:root {
  /* ── THEME TOKENS — edit these to reskin the whole UI ──────────────────────────────────────────── */
  /* Surfaces: a black theme with a faint step between background and raised controls. */
  --bg: #000000;        /* page background */
  --bg2: #0a0a0d;       /* recessed surfaces (cards sitting on a panel) */
  --panel: #0c0c11;     /* the standard display-region background */
  --panel2: #17171d;    /* raised controls: tiles, chips, buttons */
  /* The "sharp region on black with a clear border + white drop shadow" look. */
  --radius: 0px;        /* corner radius — 0 = sharp corners everywhere; raise to round the whole UI */
  --line: #ffffff52;    /* clear border colour (white, ~32% on black) */
  --border: 1px solid var(--line);
  --shadow: 0 3px 14px rgba(255,255,255,0.12);  /* white drop shadow that lifts a region off the black */
  /* Text */
  --ink: #f4f5f7; --dim: #9aa1af;
  /* Accents (unchanged — semantic action/team colours) */
  --acc: #7c9cff; --you: #57c98a; --foe: #e07a7a;
  --hi: #3fbf63; --mid: #d6ab34; --lo: #de4f4f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; }
#app { max-width: 1080px; margin: 0 auto; min-height: 100vh; padding: 10px 14px; }

/* Consistent thin scrollbars everywhere (skill description, draft lists, roster grid, avatar picker, …). */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--acc) 70%, var(--line)); }
header { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 10px; }
.brand { font-weight: 700; letter-spacing: .3px; }
.status { color: var(--dim); font-size: 13px; }

/* ── arena: top bar (players + controls) · board (teams left/right, minions in front) · surrender (bottom) ── */
.arena { display: flex; flex-direction: column; gap: 12px; }

/* The BOARD: your heroes+minions hug the left, the foe's minions+heroes hug the right (space-between), so the
   open centre sits between the two minion columns — your minions face the foe's, "in front of" each team. */
.board { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.side { display: flex; align-items: flex-start; gap: 12px; } /* you: [heroes][minions] · foe: [minions][heroes] */
.teamcol { display: flex; flex-direction: column; gap: 12px; padding: 10px 8px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.teamcol.you { border-color: color-mix(in srgb, var(--you) 35%, var(--line)); }
.teamcol.foe { border-color: color-mix(in srgb, var(--foe) 35%, var(--line)); align-items: flex-end; }
.teamcol .units { display: flex; flex-direction: column; gap: 14px; }
.teamcol.foe .units { align-items: flex-end; }

/* Minion column: a vertical list (cap 6) directly in front of the team's heroes; compact, portrait-over-tiles. */
.minioncol { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.minioncol.foe { align-items: flex-end; }

/* A hero row: framed portrait + (only for YOUR living heroes) the element-themed skill kit beside it. */
.unit { display: flex; align-items: center; gap: 12px; }
.unit.dead { opacity: .35; filter: grayscale(1); }
.unit.targetable .frame { outline: 2px solid var(--foe); cursor: crosshair; animation: pulse 1s infinite; }
@keyframes pulse { 50% { outline-color: #fff; } }
/* A minion row is compact: small portrait with its (few) skill tiles stacked beneath. */
.minioncol .unit { flex-direction: column; align-items: center; gap: 5px; }

/* Narrow viewports: stack your side above the foe's so nothing scrolls off-screen (the board needs ~800px). */
@media (max-width: 860px) {
  .board { flex-direction: column; align-items: stretch; }
  .side.foe { flex-direction: row-reverse; justify-content: flex-start; }
  .unit { flex-wrap: wrap; } /* a kit that can't fit beside its portrait drops below it */
}

.pcol { position: relative; display: flex; flex-direction: column; align-items: center; width: 118px; }
.frame { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; border: 2px solid color-mix(in srgb, var(--el, #556) 60%, #000); background: var(--bg); box-shadow: var(--shadow); }
/* Elemental Essence: an element-coloured glow (no tooltip) — the middle hero, or anyone holding a charge. */
.unit.essence .frame { border-color: var(--el); box-shadow: 0 0 0 2px var(--el), 0 0 16px 3px color-mix(in srgb, var(--el) 60%, transparent), var(--shadow); }
.unit.targetable .frame[data-target] { cursor: crosshair; }
.portrait { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.portrait.minion-art { display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; color: var(--dim); padding: 4px; }
.frame .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 5px; font-size: 12px; font-weight: 700; text-align: center; background: linear-gradient(transparent, #000c); color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 3px #000; }
.pips { position: absolute; top: 3px; right: 3px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.pip { font-size: 9px; padding: 1px 4px; border-radius: var(--radius); background: #000a; color: var(--dim); }
.pip.stack { color: var(--acc); } .pip.bad { color: var(--foe); } .pip.good { color: var(--you); } .pip.state { color: var(--mid); }

.minioncol .pcol { width: 66px; }
.minioncol .name { font-size: 9px; padding: 4px 2px 2px; }
.minioncol .tiles { grid-template-columns: repeat(3, 30px); grid-auto-rows: 30px; gap: 3px; }
.minioncol .tile { width: 30px; height: 30px; }

.hp { position: relative; height: 16px; width: 100%; margin-top: 5px; background: var(--bg); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hp-fill { height: 100%; background: linear-gradient(var(--hi), #2f9e4f); transition: width .4s ease; }
.hp-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.hp-num i { color: var(--acc); font-style: normal; margin-left: 3px; }
.minioncol .hp { height: 13px; } .minioncol .hp-num { font-size: 9px; }

/* Active-skill tiles: a fixed 3-wide grid (5 skills flow as 3 + 2), living inside the kit panel. */
.tiles { display: grid; grid-template-columns: repeat(3, 38px); grid-auto-rows: 38px; gap: 6px; justify-content: center; }
.tile { position: relative; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel2); cursor: pointer; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* covers the abbr behind it; onerror removes it -> abbr shows */
.tile:hover { border-color: var(--acc); }
.tile.chosen { border-color: var(--you); box-shadow: 0 0 0 2px var(--you) inset; }
.tile.off { opacity: .4; } /* unusable — still clickable to examine */
.tile.off:hover { opacity: .6; border-color: var(--dim); }
.tile .cdbadge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000b; color: #fff; font-weight: 800; font-size: 15px; }
/* A locked/empty slot — no skill yet; grayed, dashed, inert (no data-* so the click handler ignores it). */
.tile.locked { display: flex; align-items: center; justify-content: center; opacity: .4; cursor: default;
  background: color-mix(in srgb, var(--bg) 60%, transparent); border-style: dashed; color: var(--dim); font-size: 13px; }
.tile.locked:hover { border-color: var(--line); }

/* ── skill kit: element-themed action panel beside each of YOUR heroes (normal slots + a larger Ultimate) ── */
.kit { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--el, #556) 55%, #000);
  background: linear-gradient(150deg, color-mix(in srgb, var(--el, #556) 24%, var(--panel)), var(--panel) 72%);
  box-shadow: inset 0 1px 0 #ffffff12, var(--shadow); }
/* The Ultimate: a larger, distinct slot to the right of the five normal skill slots. */
.tile-ult { width: 62px; height: 62px; border-width: 2px; border-color: color-mix(in srgb, var(--mid) 60%, #000); }
.tile-ult .cdbadge { font-size: 22px; }

/* ── top bar: your chip (far left) · shared controls (centre) · opponent chip (far right) ── */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 14px; }
.topbar > .control { align-self: center; } /* both player chips top-align; the centre control stays vertically centred */
.pc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc.foe { justify-self: end; flex-direction: row-reverse; text-align: right; }
/* Left cell: your chip with your energy pool beneath it, over your own team column. */
.side-info { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.pc-av { width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--radius); overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.pc.you .pc-av { border-color: color-mix(in srgb, var(--you) 60%, #000); }
.pc.foe .pc-av { border-color: color-mix(in srgb, var(--foe) 60%, #000); }
.pc-av img { width: 100%; height: 100%; object-fit: cover; }
.pc-ph { font-size: 24px; opacity: .65; }
.pc-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc.you .pc-name { color: var(--you); } .pc.foe .pc-name { color: var(--foe); }
.pc-score { color: var(--dim); font-size: 11.5px; }

/* centre controls: the turn/Resolve/skill-detail block, the horizontal energy pool, then the round number. */
.control { display: flex; align-items: center; gap: 16px; justify-content: center; }
/* Reserve the targeting height always, so swapping turn/Resolve ↔ skill-detail never resizes the top bar and
   shifts the board / centred player chips. Wider + taller than the turn state so most skill text fits; the
   description scrolls (thin scrollbar) when it doesn't. */
.control-mid { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 130px; width: 440px; }
.control .skillpanel { max-width: 100%; align-items: flex-start; }
.control .sp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* keep the name to one line */
/* Show most of the description; scroll the rest. ~5 lines at the panel width covers nearly every skill. */
.control .sp-desc { max-height: 80px; overflow-y: auto; margin: 2px 0; padding-right: 6px; }
.control .sp-foot { white-space: nowrap; font-size: 11px; margin-top: 2px; } /* compact so the panel fits the reserved height */
.control .sp-foot .mini { padding: 3px 9px; }
.rnd { color: var(--dim); font-size: 12px; font-weight: 700; white-space: nowrap; }
.turn { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.turn.you { color: var(--you); } .turn.foe { color: var(--dim); }
.bar { height: 8px; width: 180px; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
.bar-fill { height: 100%; width: 40%; background: var(--acc); border-radius: var(--radius); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.resolve { background: var(--acc); color: #0b0e1c; border: 0; border-radius: var(--radius); padding: 8px 18px; font: inherit; font-weight: 800; cursor: pointer; }
.mini { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; }

/* energy pool (top bar): two compact rows — specific types on top, generic + Total on the bottom. Each chip is
   just [symbol] × [number] (no element name), so the whole display stays small. */
/* Labelled fieldset-style border so the pool reads as a key resource panel; the legend sits on the top edge. */
.epool { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 11px 12px 8px;
  border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--line)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--acc) 7%, transparent); }
.ep-legend { position: absolute; top: -8px; left: 10px; padding: 0 6px; background: var(--panel);
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--acc); }
.ep-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 22px; }
.ep-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.ep-ic { width: 20px; height: 20px; border-radius: var(--radius); object-fit: cover; }
.ep-x { color: var(--dim); font-size: 11px; }
.ep-n { font-weight: 700; }
.ep-n.spent { color: var(--acc); } /* a color with energy reserved by queued skills reads as "being spent" */
.ep-el { color: var(--dim); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; } /* only the Total keeps a text label */
.ep-total { padding-left: 10px; border-left: 1px solid var(--line); gap: 5px; }
.ep-total .ep-n { font-size: 14px; }

/* skill-cost pips: one energy icon per unit of cost, no numbers/words */
.cost-ics { display: inline-flex; gap: 3px; vertical-align: middle; }
.cost-ic { width: 16px; height: 16px; border-radius: var(--radius); object-fit: cover; }
.cost-free { color: var(--dim); font-size: 11px; font-weight: 600; }

/* bottom bar: the Surrender control, pinned bottom-right */
.bottombar { display: flex; justify-content: flex-end; margin-top: 2px; }
.surrender { background: none; color: var(--foe); border: 1px solid color-mix(in srgb, var(--foe) 50%, #000); border-radius: var(--radius); padding: 7px 16px; font: inherit; cursor: pointer; }
.surrender:hover { background: color-mix(in srgb, var(--foe) 14%, transparent); }
.surrender-menu .modal-foot { flex-direction: column; gap: 8px; }
.surrender-menu .forfeit { background: var(--foe); color: #180a0a; }

/* ── overlay ───────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 10; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 34px; text-align: center; }
.modal h2 { margin: 0 0 6px; } .modal p { color: var(--dim); margin: 0 0 16px; }
.modal button { background: var(--acc); color: #0b0e1c; border: 0; border-radius: var(--radius); padding: 9px 20px; font: inherit; font-weight: 700; cursor: pointer; }

/* ── team select ───────────────────────────────────────────────────────── */
.select { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 1fr auto; gap: 14px; }
.roster-grid { grid-row: 1 / 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; max-height: 78vh; overflow-y: auto; padding-right: 4px; }
.port { position: relative; aspect-ratio: 3/4; border: 2px solid color-mix(in srgb, var(--el, #556) 55%, #000); border-radius: var(--radius); overflow: hidden; background: var(--bg); padding: 0; cursor: pointer; transition: transform .08s; }
.port img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.port:hover { transform: translateY(-2px); }
.port.sel { outline: 2px solid var(--acc); }
.port.on { outline: 2px solid var(--you); }
.port-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 3px 3px; font-size: 10px; font-weight: 700; text-align: center; background: linear-gradient(transparent, #000d); color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 3px #000; }
.port-check { position: absolute; top: 3px; right: 4px; color: var(--you); font-weight: 800; text-shadow: 0 1px 2px #000; }

/* Fixed height so selecting a hero (hint → full detail) never grows the panel and shoves the team tray. */
.detail { grid-column: 2; grid-row: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; height: 78vh; overflow-y: auto; }
.detail .hint { color: var(--dim); }
.detail-head { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }
.detail-head .dp { grid-row: 1 / 3; width: 64px; aspect-ratio: 3/4; object-fit: cover; object-position: top; border-radius: var(--radius); }
.detail-head h3 { margin: 0; font-size: 15px; }
.dp-el { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.addbtn { grid-column: 2; justify-self: start; margin-top: 4px; background: var(--you); color: #06110b; border: 0; border-radius: var(--radius); padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.addbtn.rem { background: none; color: var(--foe); border: 1px solid color-mix(in srgb, var(--foe) 50%, #000); }
.addbtn:disabled { opacity: .4; cursor: not-allowed; }
.skillview { display: flex; flex-direction: column; gap: 8px; }
.sv-row { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: start; }
.sv-row.passive { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* Direct child only — otherwise this also sizes the nested cost-icon <img>s (they'd inherit 34px). */
.sv-row > img { width: 34px; height: 34px; border-radius: var(--radius); object-fit: cover; background: var(--panel2); }
.sv-name { font-weight: 700; font-size: 12.5px; } .sv-name i { color: var(--dim); font-weight: 400; font-style: normal; font-size: 10px; }
.sv-cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; }
.sv-cost .cost-ic { width: 20px; height: 20px; border-radius: var(--radius); }
.sv-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.mtag { font-size: 9.5px; font-weight: 600; color: var(--dim); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 6px; text-transform: capitalize; }
.mtag.k { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.sv-desc { color: var(--dim); font-size: 11.5px; margin-top: 1px; }

.teambar { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 8px; }
.tray { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.tray b { display: block; color: var(--dim); font-size: 12px; margin-bottom: 6px; }
.tray b .count { color: var(--ink); }
.slots { display: flex; gap: 6px; }
.slot { flex: 1; text-align: center; padding: 6px 4px; border: 1px dashed var(--line); border-radius: var(--radius); font-size: 11px; color: var(--dim); background: none; font: inherit; }
.slot.on { border-style: solid; border-color: var(--you); color: var(--ink); cursor: pointer; }
.oppo { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.oppo span { padding: 4px 8px; background: var(--panel2); border-radius: var(--radius); font-size: 11px; }
.start { background: var(--acc); color: #0b0e1c; border: 0; border-radius: var(--radius); padding: 11px; font: inherit; font-weight: 800; cursor: pointer; }
.start:disabled { opacity: .4; cursor: not-allowed; }

/* ── effect icons + popup ──────────────────────────────────────────────── */
.fxrow { position: absolute; top: 3px; right: 3px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.minioncol .fxrow { display: none; }
.fx { position: relative; width: 22px; height: 22px; border-radius: var(--radius); overflow: hidden; border: 1px solid #000a; background: var(--panel2); cursor: help; box-shadow: var(--shadow); }
.fx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* covers the abbr; onerror removes it -> abbr shows */
.fx.bad { border-color: var(--foe); } .fx.good { border-color: var(--you); } .fx.state { border-color: var(--mid); }
.fx-abbr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--dim); }
.fx-n { position: absolute; right: 0; bottom: 0; font-size: 9px; font-weight: 800; background: #000c; color: #fff; padding: 0 2px; border-top-left-radius: var(--radius); }
.fxpop { position: fixed; z-index: 20; max-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; box-shadow: var(--shadow); pointer-events: none; }
.fxpop[hidden] { display: none; }
.fxpop b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.fxpop div { color: var(--dim); font-size: 11.5px; }
.fxpop .fxdur { margin-top: 5px; color: var(--acc); font-size: 11px; font-weight: 600; }
.fxpop .tt-en { width: 14px; height: 14px; border-radius: var(--radius); vertical-align: -2px; margin: 0 1px; object-fit: cover; }

/* ── skill detail (shown IN the midbar while targeting — never over a portrait) ── */
.skillpanel { display: flex; gap: 11px; align-items: flex-start; text-align: left; }
.sp-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--radius); object-fit: cover; background: var(--panel2); border: 1px solid var(--acc); }
.sp-body { min-width: 0; flex: 1; }
.sp-name { font-weight: 800; font-size: 14.5px; color: var(--you); }
.sp-cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; vertical-align: middle; }
.sp-desc { color: var(--ink); font-size: 12px; line-height: 1.45; margin: 3px 0 5px; }
.sp-foot { display: flex; gap: 10px; align-items: center; color: var(--dim); font-size: 11px; }
.tile-abbr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--dim); text-transform: capitalize; }
/* examine mode: a muted panel for an unusable skill (no targeting) */
.skillpanel.examine .sp-icon { border-color: var(--mid); filter: grayscale(.4); }
.skillpanel.examine .sp-name { color: var(--ink); }
.sp-warn { color: var(--acc); font-weight: 700; }

/* ── queued-skill indicators (who queued what, on whom) ─────────────────── */
.unit.acted .frame { outline: 2px solid color-mix(in srgb, var(--you) 55%, transparent); outline-offset: 1px; }
/* Targeting icons: the queued skills aimed at this character, straddling the top edge of the portrait,
   left-to-right in resolve order. Distinct from effect chips (top-right, inside the frame). Click to dequeue. */
.tgtrow { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; z-index: 6; }
.tgt { position: relative; width: 27px; height: 27px; padding: 0; border: 2px solid var(--acc); border-radius: var(--radius); background: var(--panel2); cursor: pointer; box-shadow: var(--shadow); }
.tgt img { width: 100%; height: 100%; border-radius: var(--radius); object-fit: cover; display: block; }
.tgt:hover { border-color: #fff; transform: translateY(-1px); }
.tgt-abbr { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 800; color: var(--dim); }
.tgt-n { position: absolute; bottom: -6px; right: -6px; min-width: 14px; height: 14px; padding: 0 2px; font-size: 9px; font-weight: 800; background: var(--acc); color: #0b0e1c; border: 1px solid #0008; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }

/* ── energy allocation modal (cover generic costs at end of turn) ───────── */
.energy-modal { text-align: left; min-width: 340px; max-width: 92vw; }
.energy-modal h2 { text-align: center; }
.energy-modal p { text-align: center; font-size: 12.5px; line-height: 1.5; }
.alloc-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.alloc-row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.alloc-row .ep-ic { width: 20px; height: 20px; }
.ac-el { font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
.ac-avail { color: var(--dim); font-size: 11px; }
.ac-step { display: flex; align-items: center; gap: 8px; }
.energy-modal .step { width: 26px; height: 26px; padding: 0; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.energy-modal .step:disabled { opacity: .3; cursor: default; }
.ac-n { min-width: 16px; text-align: center; font-weight: 800; font-size: 13.5px; }
.alloc-total { text-align: center; font-weight: 800; font-size: 13px; margin-bottom: 14px; }
.alloc-total.ok { color: var(--you); } .alloc-total.short { color: var(--acc); }
/* ── between-round fusion/augment draft ────────────────────────────────── */
.draft-modal { text-align: left; width: 820px; max-width: 94vw; }
.draft-modal h2 { text-align: center; }
.draft-sub { text-align: center; font-size: 12.5px; }
.draft-body { display: grid; grid-template-columns: 168px 1fr; gap: 16px; margin-bottom: 14px; }
.draft-heroes { display: flex; flex-direction: column; gap: 7px; }
/* NB: the `.draft-modal` prefix raises specificity above the generic `.modal button { background: var(--acc) }`
   rule — without it the card <button>s render in the periwinkle accent and their text is unreadable. */
.draft-modal .dh { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; padding: 7px 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.draft-modal .dh:hover { border-color: var(--acc); }
.draft-modal .dh.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, var(--panel2)); }
.draft-modal .dh.picked { border-color: var(--you); } /* a hero that already has an upgrade chosen this phase */
.dh-pick { color: var(--you); font-weight: 800; }
/* the chosen fusion/augment card for the inspected hero */
.draft-modal .do-card.chosen { border-color: var(--you); box-shadow: 0 0 0 2px var(--you) inset; }
.dh img { width: 38px; height: 38px; border-radius: var(--radius); object-fit: cover; object-position: top center; background: var(--panel); }
.dh-name { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.dh-opts { grid-column: 2; color: var(--dim); font-size: 10.5px; }
/* Fixed height so switching heroes (different option counts) never resizes / re-centers the modal. */
.draft-options { display: flex; flex-direction: column; gap: 16px; height: 56vh; overflow-y: auto; padding-right: 4px; }
.do-sec h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.do-sec h4 span { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--dim); }
.do-sec.fusion h4 { color: var(--acc); }
.do-sec.augment h4 { color: var(--mid); }
/* Cards sit on a darker surface than the modal/hero list, with a coloured left edge per type (blue = fusion,
   gold = augment) so the two sections read as clearly delineated, different-coloured groups. */
.draft-modal .do-card { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; font: inherit; }
.do-sec.fusion .do-card { border-left-color: var(--acc); }
.do-sec.augment .do-card { border-left-color: var(--mid); }
.do-sec.fusion .do-card:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, var(--bg2)); }
.do-sec.augment .do-card:hover { border-color: var(--mid); background: color-mix(in srgb, var(--mid) 13%, var(--bg2)); }
.do-port { width: 46px; height: 60px; flex: 0 0 46px; border-radius: var(--radius); object-fit: cover; object-position: top center; background: var(--panel); }
.do-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.do-name { font-weight: 800; font-size: 13px; color: var(--ink); }
.do-sub { font-size: 11.5px; color: var(--acc); font-weight: 600; }
.do-desc { font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.do-note { font-size: 11.5px; color: var(--dim); font-style: italic; padding: 4px 2px; }
/* Fusion cards are larger: a prominent fused portrait beside the new passive AND the new skill. */
.draft-modal .do-card.fusion-card { align-items: stretch; gap: 14px; padding: 12px 14px; }
.fc-port { width: 96px; height: 128px; flex: 0 0 96px; border-radius: var(--radius); object-fit: cover; object-position: top center; background: var(--panel); }
.fc-body { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
.fc-head { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.fc-block { display: flex; flex-direction: column; gap: 3px; }
.fc-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--acc); font-weight: 700; }
.fc-line { display: flex; align-items: center; gap: 7px; }
.fc-line img { width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--radius); object-fit: cover; background: var(--panel); }
.fc-line b { font-size: 12.5px; color: var(--ink); }
.fc-desc { font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.modal-foot { display: flex; gap: 10px; justify-content: center; }
.draft-modal .mini { background: var(--panel2); color: var(--dim); border: 1px solid var(--line); }
.energy-modal .mini { background: var(--panel2); color: var(--dim); border: 1px solid var(--line); }
.energy-modal .resolve:disabled { opacity: .4; cursor: default; }

/* ── character select — redesigned scene (assets/ui) ───────────────────── */
.cs { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px;
  background: url(../../assets/ui/backgrounds/background.png) center top / cover no-repeat, var(--bg); }
/* The showcase + roster rows live in a stage that JS scales-and-recentres to fit narrow windows, so the
   scene never runs off the left/right edges (see fitCharSelect). */
/* margin-top clears the absolutely-positioned top-left player card (.cs-mini, ~86px tall) so the showcase
   below starts under it, not behind it. It's a plain margin (outside the fit-transform) so the clearance
   holds at every scale. */
.cs-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; transform-origin: 0 0; margin-top: 76px; }
.cs::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 34%, #000000b0 100%); }
.cs > * { position: relative; z-index: 1; }

/* ── login screen (pre-character-select), over the menu backdrop ──────────── */
.login-scene { align-items: center; justify-content: center; }
.login-card { width: min(360px, 92vw); display: flex; flex-direction: column; gap: 10px; padding: 28px 26px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.login-title { font-size: 26px; font-weight: 800; text-align: center; letter-spacing: .5px; }
.login-sub { text-align: center; color: var(--dim); font-size: 13px; margin-bottom: 6px; }
.login-input { padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.login-input:focus { outline: none; border-color: var(--acc); }
.login-error { color: var(--foe); font-size: 12.5px; text-align: center; }
.login-primary { margin-top: 4px; padding: 11px; font: inherit; font-weight: 800; color: #0b0e1c; background: var(--acc); border: 0; border-radius: var(--radius); cursor: pointer; }
.login-primary:disabled { opacity: .5; cursor: default; }
.login-toggle { text-align: center; color: var(--dim); font-size: 12.5px; }
.login-toggle a { color: var(--acc); cursor: pointer; text-decoration: underline; }
.login-or { text-align: center; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.login-guest { padding: 9px; font: inherit; font-weight: 600; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.login-guest:disabled { opacity: .5; cursor: default; }
.cs-logout { align-self: center; width: 26px; height: 26px; padding: 0; font-size: 14px; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.cs-logout:hover { color: var(--foe); border-color: color-mix(in srgb, var(--foe) 50%, var(--line)); }
/* guest → registered: a "Save account" prompt on the profile chip, or the login handle once claimed */
.cs-claim { align-self: center; padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 700; color: var(--acc); background: transparent; border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--line)); border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.cs-claim:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.cs-handle { align-self: center; color: var(--dim); font-size: 11px; font-weight: 700; }
.claim-modal { gap: 12px; text-align: left; }
.claim-modal .login-sub { text-align: left; }

/* top-left mini card (currently-inspected hero) */
.cs-mini { position: absolute; top: 16px; left: 18px; z-index: 3; display: flex; gap: 10px; align-items: center;
  background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 14px 7px 7px; box-shadow: var(--shadow); }
.cs-avatar { width: 54px; height: 54px; padding: 0; border-radius: var(--radius); border: 1px solid var(--acc); background: var(--bg);
  cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color .12s, box-shadow .12s; }
.cs-avatar:hover { border-color: #fff; box-shadow: 0 0 0 2px #ffffff44; }
.cs-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-avatar-ph { font-size: 26px; opacity: .7; }
.cs-mini-txt { display: flex; flex-direction: column; gap: 1px; }
.cs-uname { font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius); padding: 1px 4px; width: 130px; font-family: inherit; }
.cs-uname:hover { border-color: var(--line); }
.cs-uname:focus { outline: none; border-color: var(--acc); background: var(--bg); }
.cs-mini-txt span { font-size: 11px; color: var(--dim); padding: 0 4px; }

/* Avatar picker */
.av-modal { max-width: 560px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; margin: 14px 0; max-height: 56vh; overflow-y: auto; }
.av-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, transform .08s; }
.av-cell:hover { border-color: #fff; transform: translateY(-2px); }
.av-cell.on { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
.av-cell > img { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; }
.av-cell > span { font-size: 11px; color: var(--dim); }

/* hero showcase: info | big art | skills */
/* Snug, centred group — info, art and skills sit next to each other, not spread to the edges. */
/* flex:1 + stretch makes the showcase fill all the room between the player card and the roster, and the
   panels + portrait grow to that height (the portrait is height-driven below). */
.cs-show { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 22px; padding: 4px 20px 10px; }
/* Shown in the showcase when no hero is selected (the load state) — a quiet prompt in place of the panels. */
.cs-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 20px; font-weight: 600; letter-spacing: .3px; text-align: center; padding: 40px 20px; text-shadow: 0 2px 6px #000; }
/* Info column on its own backing panel (matches the skill kit), so the name/element/buttons read clearly. */
.cs-info { width: 292px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 16px; padding: 24px 22px; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(165deg, color-mix(in srgb, var(--panel2) 95%, transparent), color-mix(in srgb, var(--bg) 95%, transparent)); box-shadow: var(--shadow), inset 0 1px 0 #ffffff14; }
.cs-hname { font-size: 38px; font-weight: 800; color: #fff; line-height: 1.05; text-shadow: 0 2px 6px #000, 0 0 3px #000; }
.cs-hel { font-size: 17px; font-weight: 600; color: var(--acc); text-shadow: 0 1px 3px #000; margin-bottom: 4px; }
.cs-abtn { width: 100%; padding: 15px 20px; font: inherit; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer; text-align: center;
  background: linear-gradient(var(--panel2), var(--bg2)); border: 1px solid var(--line); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); text-shadow: 0 1px 2px #000; }
.cs-abtn:hover:not(:disabled) { background: linear-gradient(var(--panel2), var(--panel)); border-color: var(--acc); }
.cs-abtn.rem { background: linear-gradient(color-mix(in srgb, var(--foe) 42%, var(--bg)), var(--bg)); border-color: color-mix(in srgb, var(--foe) 60%, #000); }
.cs-abtn:disabled { opacity: .5; cursor: default; }

.cs-art { align-self: center; flex: none; position: relative; height: 90%; width: auto; max-width: 40vw; aspect-ratio: 500 / 731; border-radius: var(--radius); overflow: hidden;
  border: 3px solid #ffffff55; box-shadow: var(--shadow), inset 0 0 0 6px color-mix(in srgb, var(--bg2) 40%, transparent); background: var(--bg2); }
.cs-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* Skill kit — a modern card: label-left / icons-right rows, colour-coded by skill class, on a
   translucent gradient panel so the labels + art read cleanly over the background. */
.cs-skills { width: 360px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(165deg, color-mix(in srgb, var(--panel2) 95%, transparent), color-mix(in srgb, var(--bg) 95%, transparent)); box-shadow: var(--shadow), inset 0 1px 0 #ffffff14; }
.cs-sk-title { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #fff; opacity: .82; margin-bottom: 6px; }
.cs-sk { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 0; }
.cs-sk + .cs-sk { border-top: 1px solid #ffffff12; }
.cs-sk h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .7px; color: var(--sk, var(--dim)); }
.cs-sk h4::before { content: ""; width: 3px; height: 14px; border-radius: var(--radius); background: var(--sk, var(--dim)); }
.cs-sk.passive { --sk: #aab2d6; } .cs-sk.basic { --sk: var(--acc); } .cs-sk.fusion { --sk: #c88ae8; } .cs-sk.defensive { --sk: var(--you); } .cs-sk.ultimate { --sk: var(--mid); }
.cs-icons { display: flex; gap: 6px; }
.cs-sicon { width: 52px; height: 52px; padding: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid #ffffff26; background: var(--bg); box-shadow: var(--shadow); cursor: pointer; transition: transform .1s, border-color .1s, box-shadow .1s; }
.cs-sicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-sicon:hover { transform: translateY(-2px); border-color: var(--sk, var(--acc)); box-shadow: var(--shadow); }
/* floating skill-info popup — hovers/pops off a skill icon, never affects layout */
.skpop { position: fixed; z-index: 30; max-width: 260px; background: color-mix(in srgb, var(--panel) 95%, transparent); border: 1px solid var(--acc); border-radius: var(--radius); padding: 9px 11px; box-shadow: var(--shadow); pointer-events: none; }
.skpop[hidden] { display: none; }
.skpop b { display: block; font-size: 13px; color: #fff; margin-bottom: 3px; }
.skpop-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--dim); font-size: 11px; margin-bottom: 4px; text-transform: capitalize; }
.skpop-cost { width: 15px; height: 15px; border-radius: var(--radius); object-fit: cover; }
.skpop-desc { color: var(--dim); font-size: 11.5px; line-height: 1.4; }

/* bottom band: angled roster panels flanking the match controls */
/* Outer columns are minmax(0,1fr) (not 1fr) so they can shrink below the roster's intrinsic width: on
   narrow screens the rosters then overflow OUTWARD symmetrically, keeping cs-mid — and the showcase above
   it — centred in the viewport, instead of the whole grid left-anchoring and drifting the scene sideways. */
.cs-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, auto) minmax(0, 1fr); align-items: end; gap: 14px; margin-top: auto; }
.cs-roster { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 8px; }
.cs-roster.left { transform: perspective(1500px) rotateY(13deg); transform-origin: right bottom; }
.cs-roster.right { transform: perspective(1500px) rotateY(-13deg); transform-origin: left bottom; }
/* explicit rows (varying length) hug toward the centre controls, then splay OUT from centre going up:
   top row ~100px away on each side, middle ~50px, bottom flush — matching the reference fan. */
.cs-rrow { display: flex; gap: 5px; }
.cs-roster.left .cs-rrow { justify-content: flex-end; }
.cs-roster.right .cs-rrow { justify-content: flex-start; }
.cs-roster.left .cs-rrow:nth-child(1) { transform: translateX(-60px); }
.cs-roster.left .cs-rrow:nth-child(2) { transform: translateX(-30px); }
.cs-roster.right .cs-rrow:nth-child(1) { transform: translateX(60px); }
.cs-roster.right .cs-rrow:nth-child(2) { transform: translateX(30px); }
/* Left-panel cards are mirrored so both panels angle toward the centre (opposite orientations). */
.cs-roster.left .cs-hero img { transform: scaleX(-1); }
.cs-hero { position: relative; width: 88px; flex: 0 0 88px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .08s; }
/* Element-coloured edge that follows the card's angular silhouette (double drop-shadow over the alpha). */
.cs-hero img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; display: block;
  filter: drop-shadow(1px 0 0 var(--el)) drop-shadow(-1px 0 0 var(--el)) drop-shadow(0 1px 0 var(--el)) drop-shadow(0 -1px 0 var(--el)) drop-shadow(0 2px 3px #000a); }
.cs-hero:hover { transform: translateY(-3px) scale(1.06); z-index: 3; }
.cs-hero.on::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--you); }
.cs-check { position: absolute; top: 2px; right: 5px; color: var(--you); font-weight: 800; font-size: 13px; text-shadow: 0 1px 2px #000; }

.cs-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 4px; }
.cs-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 340px; }
.cs-mode { padding: 9px 12px; font: inherit; font-weight: 700; font-size: 13.5px; color: #fff; cursor: pointer; text-shadow: 0 1px 2px #000;
  background: linear-gradient(var(--panel2), var(--bg2)); border: 1px solid var(--line); clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.cs-mode.wide { grid-column: 1 / 3; }
.cs-mode.start { grid-column: 1 / 3; background: linear-gradient(var(--acc), #4a68c8); color: #0b0e1c; border-color: #9ab0ff; }
.cs-mode.start:not(:disabled):hover { filter: brightness(1.08); }
.cs-mode:disabled { opacity: .45; cursor: default; }
.cs-team-title { font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px #000; margin-top: 4px; }
.cs-team { display: flex; gap: 8px; }
.cs-slot { width: 66px; aspect-ratio: 3/4; padding: 0; border: 2px solid var(--you); border-radius: var(--radius); overflow: hidden; background: var(--bg2); cursor: pointer; }
.cs-slot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-slot.empty { border: 2px dashed #ffffff45; background: color-mix(in srgb, var(--bg2) 55%, transparent); cursor: default; }
.cs-prompt { font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }

/* Fusions & Augments preview (character select) — display-only; fusions in two columns to fit all 10. */
.augfuse-modal { width: 900px; }
.augfuse-modal .do-card { cursor: default; margin-bottom: 0; }
.augfuse-modal .do-sec { display: flex; flex-direction: column; gap: 8px; }
.augfuse-modal .do-sec.fusion { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.augfuse-modal .do-sec.fusion h4 { grid-column: 1 / -1; }
/* larger, more legible fusion portrait + the new skill's cost & cooldown */
.augfuse-modal .fc-port { width: 116px; height: 155px; flex: 0 0 116px; }
.fc-meta { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.fc-cd { font-size: 11px; color: var(--mid); font-weight: 600; }