*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Arial Narrow',ui-sans-serif,system-ui,sans-serif;background:#0e1016;color:#e8e4dc;display:flex;flex-direction:column}

/* ── CSS vars ── */
:root{
  --bg0:#0a0c12;--bg1:#0e1016;--bg2:#12151c;--bg3:#1a1e28;--bg4:#2a2e38;
  --fg0:#e8e4dc;--fg1:#c8ccd8;--fg2:#9aa0b0;--fg3:#5a5e6a;--fg4:#3a3e4a;
  --orange:#e8610a;--orange-dim:rgba(232,97,10,.12);--orange-b:rgba(232,97,10,.3);
  --blue:#5ba4e0;--green:#5cb85c;--purple:#9d8fe0;--amber:#e8a040;
  --r:6px;--rl:8px;
  --cond:'Arial Narrow',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Code','Fira Code',monospace;
}

/* ── Topbar ── */
.topbar{display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;background:var(--bg0);border-bottom:1px solid var(--bg4);flex-shrink:0;z-index:10}
.logo{font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg0)}
.logo em{color:var(--orange);font-style:normal}
.team-select{background:var(--bg3);border:1px solid var(--bg4);color:var(--fg1);font:inherit;font-size:12px;padding:4px 24px 4px 8px;border-radius:var(--r);cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235a5e6a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;margin-left:8px}
.round-btn{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r);border:1px solid var(--bg4);background:var(--bg2);color:var(--fg3);cursor:pointer;transition:all .12s;margin-left:auto}
.round-btn:hover{color:var(--fg0);border-color:var(--fg4)}

/* ── Layout ── */
.layout{display:grid;grid-template-columns:1fr 220px;grid-template-rows:1fr 140px;flex:1;overflow:hidden;min-height:0}

/* ── Play area ── */
.play-area{grid-column:1;grid-row:1;padding:14px;overflow-y:auto;background:var(--bg1)}
.play-label{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);margin-bottom:10px}
.play-cards{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.play-empty{font-size:12px;color:var(--fg4);padding:16px 0}

/* ── Info panel ── */
.info-panel{grid-column:2;grid-row:1/3;background:var(--bg0);border-left:1px solid var(--bg4);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0}
.info-label{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);margin-bottom:10px}
.info-empty{font-size:11px;color:var(--fg4);text-align:center;margin-top:32px;line-height:1.7}
#infoContent{display:none}
.info-cat{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:3px}
.info-name{font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg0);margin-bottom:8px;line-height:1.2}
.info-divider{height:1px;background:var(--bg3);margin:8px 0}
.info-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:8px}
.info-stat{background:var(--bg0);border-radius:4px;text-align:center;padding:4px 2px}
.info-stat-k{font-size:7px;color:var(--fg3);letter-spacing:.06em;text-transform:uppercase;display:block}
.info-stat-v{font-size:17px;font-weight:700;color:var(--orange);font-family:var(--mono);display:block;line-height:1.15}
.info-wep-type{font-size:8px;letter-spacing:.08em;text-transform:uppercase;margin:6px 0 3px}
.info-wep-row{display:grid;grid-template-columns:1fr auto auto auto;gap:4px;font-size:9px;padding:2px 0;border-bottom:1px solid var(--bg3)}
.info-wep-name{color:var(--fg1)}
.info-wep-num{color:var(--fg3);font-family:var(--mono)}
.info-wep-wr{font-size:8px;color:var(--fg4);padding:1px 0 3px}
.info-ab{margin-bottom:8px}
.info-ab-name{font-family:var(--cond);font-size:11px;font-weight:700;color:var(--fg0);margin-bottom:2px;text-transform:uppercase;letter-spacing:.03em}
.info-ab-text{font-size:10px;color:var(--fg2);line-height:1.6;white-space:pre-wrap}
.info-tactic{margin-bottom:8px}
.info-tactic-hd{display:flex;align-items:baseline;gap:4px;margin-bottom:2px}
.info-tactic-num{font-size:8px;font-weight:700;color:var(--orange);letter-spacing:.06em}
.info-tactic-name{font-family:var(--cond);font-size:11px;font-weight:700;color:var(--fg0);text-transform:uppercase;letter-spacing:.03em}
.info-tactic-text{font-size:10px;color:var(--fg2);line-height:1.6;white-space:pre-wrap}
.info-body{font-size:10px;color:var(--fg2);line-height:1.65;white-space:pre-wrap}

/* ── Card stacks ── */
.card-stacks{grid-column:1;grid-row:2;background:var(--bg1);padding:6px 16px;overflow:visible}
.stacks-row{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:20px;height:100%;overflow:visible}
.stack-group{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.stack-label{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);text-align:center;margin-top:2px}

/* Fan hand */
.hand{position:relative;width:64px;height:90px;flex-shrink:0;overflow:visible}
.hand .mini{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:6px;cursor:pointer;border:1px solid var(--bg4);overflow:visible;user-select:none;transform-origin:50% 100%;transition:transform .25s ease}
.hand .mini.in-play{display:none}
.hand .mini .mini-label{position:absolute;top:0;left:0;right:0;padding:3px 4px;font-size:7px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg1);line-height:1.4;background:linear-gradient(rgba(0,0,0,.85),transparent);white-space:normal;word-break:break-word}
.hand .mini:hover{z-index:20}

/* individual card zoom on hover - applies on top of fan rotation */
.hand{transform-origin:50% 100%;transition:transform .25s ease}
.hand:hover{z-index:30;transform:scale(2.2) translateY(-20%)}

/* default stacked state — slight offset */
.hand .mini:nth-child(1){transform:translate(0,0) rotate(0deg)}
.hand .mini:nth-child(2){transform:translate(1px,1px) rotate(0deg)}
.hand .mini:nth-child(3){transform:translate(2px,2px) rotate(0deg)}
.hand .mini:nth-child(4){transform:translate(3px,3px) rotate(0deg)}
.hand .mini:nth-child(5){transform:translate(4px,4px) rotate(0deg)}
.hand .mini:nth-child(6){transform:translate(5px,5px) rotate(0deg)}
.hand .mini:nth-child(7){transform:translate(6px,6px) rotate(0deg)}
.hand .mini:nth-child(8){transform:translate(7px,7px) rotate(0deg)}
.hand .mini:nth-child(9){transform:translate(8px,8px) rotate(0deg)}

/* hover → fan out (JS sets --fan-* per card count) */
.hand:hover .mini:nth-child(1){transform:rotate(var(--r1,0deg))}
.hand:hover .mini:nth-child(2){transform:rotate(var(--r2,0deg))}
.hand:hover .mini:nth-child(3){transform:rotate(var(--r3,0deg))}
.hand:hover .mini:nth-child(4){transform:rotate(var(--r4,0deg))}
.hand:hover .mini:nth-child(5){transform:rotate(var(--r5,0deg))}
.hand:hover .mini:nth-child(6){transform:rotate(var(--r6,0deg))}
.hand:hover .mini:nth-child(7){transform:rotate(var(--r7,0deg))}
.hand:hover .mini:nth-child(8){transform:rotate(var(--r8,0deg))}
.hand:hover .mini:nth-child(9){transform:rotate(var(--r9,0deg))}

/* card type backgrounds */
.mini.t-operative{background:#1a1e26;border-color:#2a3040}
.mini.t-kaempferauswahl{background:#1a1408;border-color:#3a2a10}
.mini.t-ordenstaktiken{background:#08121a;border-color:#102030}
.mini.t-fraktionsregel{background:#08121a;border-color:#102030}
.mini.t-strategielist{background:#1a1008;border-color:#3a2010}
.mini.t-gefechtslist{background:#081a08;border-color:#103010}
.mini.t-fraktionsausruestung{background:#12081a;border-color:#221030}

/* ── Full cards in play area ── */
.card{border-radius:var(--rl);overflow:hidden;cursor:pointer;position:relative;flex-shrink:0;border:1px solid var(--bg4);transition:box-shadow .15s,opacity .2s}
.card:hover{box-shadow:0 0 0 1px var(--orange-b)}
.card.selected{box-shadow:0 0 0 2px var(--orange)}
.card.used{opacity:.4}

/* Operative card */
.oc{width:196px;background:var(--bg2)}
.oc-header{background:var(--bg0);padding:7px 8px 5px;border-bottom:1px solid var(--bg3)}
.oc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.oc-apl{display:flex;align-items:baseline;gap:3px}
.oc-apl-num{font-size:28px;font-weight:700;color:var(--orange);line-height:1;font-family:var(--mono)}
.oc-apl-lbl{font-size:8px;color:var(--fg3);letter-spacing:.07em;text-transform:uppercase}
.oc-stats{display:flex;gap:2px}
.oc-stat{background:var(--bg2);border:1px solid var(--bg3);border-radius:3px;padding:2px 5px;text-align:center}
.oc-stat-k{font-size:7px;color:var(--fg3);letter-spacing:.06em;text-transform:uppercase;display:block}
.oc-stat-v{font-size:13px;font-weight:700;color:var(--fg0);font-family:var(--mono);display:block;line-height:1.2}
.oc-name{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg0);line-height:1.2}
.oc-portrait{height:116px;background:var(--bg0);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--bg3)}
.oc-portrait img{width:100%;height:100%;object-fit:cover}
.oc-portrait-ph{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.15}
.oc-portrait-ph svg{width:34px;height:34px}
.oc-portrait-ph span{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg0)}
.oc-weapons{padding:5px 7px}
.oc-wtype{font-size:7px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;margin-top:3px}
.oc-wep{display:flex;gap:3px;align-items:center;padding:2px 0;border-bottom:1px solid var(--bg3);font-size:9px}
.oc-wep:last-child{border-bottom:none}
.oc-wep-icon{width:10px;flex-shrink:0;text-align:center}
.oc-wep-name{flex:1;color:var(--fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-wep-nums{color:var(--fg3);font-family:var(--mono);white-space:nowrap;font-size:9px}
.oc-footer{background:var(--bg0);border-top:2px solid var(--orange);padding:4px 7px;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.oc-kw{font-size:7px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg2)}
.oc-kw:not(:last-child)::after{content:'·';margin-left:2px;color:var(--fg4)}
.oc-leader-kw{color:var(--orange)}
.used-btn{position:absolute;bottom:6px;right:6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--bg4);background:var(--bg0);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;font-size:10px;color:var(--fg3);transition:all .12s;line-height:1}
.used-btn:hover{border-color:var(--orange);color:var(--orange)}
.used-btn.on{border-color:var(--orange);background:var(--orange);color:#000}

/* Generic card */
.gc{width:172px;background:var(--bg2)}
.gc-header{padding:5px 8px 4px;background:var(--bg0);border-bottom:1px solid var(--bg3);display:flex;align-items:center;gap:5px}
.gc-logo{width:16px;height:16px;flex-shrink:0}
.gc-logo svg{width:16px;height:16px}
.gc-hd-text{display:flex;flex-direction:column;gap:0}
.gc-faction{font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg4)}
.gc-cat{font-size:8px;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.cat-strategielist{color:var(--orange)}
.cat-gefechtslist{color:var(--green)}
.cat-fraktionsregel{color:var(--blue)}
.cat-fraktionsausruestung{color:var(--purple)}
.cat-kaempferauswahl{color:var(--amber)}
.cat-ordenstaktiken{color:var(--blue)}
.gc-body{padding:7px 8px;position:relative;min-height:80px}
.gc-title{font-family:var(--cond);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg0);line-height:1.2;margin-bottom:3px}
.gc-subtitle{font-size:8px;color:var(--fg4);margin-bottom:3px}
.gc-rule{height:1px;background:var(--orange);margin-bottom:6px}
.gc-text{font-size:9px;color:var(--fg3);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.gc-tactic{margin-bottom:4px}
.gc-tactic-hd{display:flex;align-items:baseline;gap:3px;margin-bottom:1px}
.gc-tactic-num{font-size:8px;font-weight:700;color:var(--orange)}
.gc-tactic-name{font-family:var(--cond);font-size:10px;font-weight:700;color:var(--fg0);text-transform:uppercase;letter-spacing:.03em}
.gc-tactic-text{font-size:8px;color:var(--fg3);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gc-skull{position:absolute;bottom:4px;right:6px;opacity:.04;font-size:32px;pointer-events:none;line-height:1}
.gc-footer{background:var(--bg0);border-top:1px solid var(--bg3);padding:4px 8px;display:flex;justify-content:space-between;align-items:center}
.gc-cardnum{font-size:7px;color:var(--fg4);letter-spacing:.06em}
.gc-used-btn{width:18px;height:18px;border-radius:50%;border:1px solid var(--bg4);background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:9px;color:var(--fg3);transition:all .12s;line-height:1}
.gc-used-btn:hover{border-color:var(--orange);color:var(--orange)}
.gc-used-btn.on{border-color:var(--orange);background:var(--orange);color:#000}

/* ── scrollbars ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}

/* ── Remove from play button ── */
.remove-btn{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;border:1px solid var(--bg4);background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;font-size:9px;color:var(--fg3);transition:all .12s;line-height:1}
.remove-btn:hover{border-color:#c05050;color:#c05050;background:rgba(0,0,0,.9)}