:root { --bg:#14161c; --panel:#1d212b; --line:#333a48; --txt:#e7eaf0; --dim:#8b93a4; --accent:#6fcf97; --wall:#e8b04b; --door:#c77d3a; --fire:#ff5722; --water:#4aa3df; }
.seat-A { --seat-color:#5b9bd5; --seat-soft:rgba(91,155,213,.07); --seat-base:rgba(91,155,213,.2); }
.seat-B { --seat-color:#d56b6b; --seat-soft:rgba(213,107,107,.07); --seat-base:rgba(213,107,107,.2); }
.seat-C { --seat-color:#6fcf97; --seat-soft:rgba(111,207,151,.07); --seat-base:rgba(111,207,151,.2); }
.seat-D { --seat-color:#a06cd5; --seat-soft:rgba(160,108,213,.07); --seat-base:rgba(160,108,213,.2); }
.seat-neutral { --seat-color:#888; --seat-soft:rgba(136,136,136,.07); --seat-base:rgba(136,136,136,.2); }
.seat-text { color:var(--seat-color); }
.seat-bg { background:var(--seat-color); }
.seat-token { --token-color:var(--seat-color); --token-ink:#10131a; }
.seat-border { border-color:var(--seat-color); }
.seat-ring { box-shadow:0 0 0 2px var(--seat-color); }
.selected-ring { box-shadow:0 0 0 2px var(--accent); }
.seat-sector { background:var(--seat-soft); }
.seat-home-base { background:var(--seat-base); box-shadow:inset 0 0 0 2px var(--seat-color); }
.seat-door { --dc:var(--seat-color); }
.fire-text { color:var(--fire); }
.portal-pair-0 { --portal-color:#c678dd; }
.portal-pair-1 { --portal-color:#56b6c2; }
.portal-pair-2 { --portal-color:#d19a66; }
.portal-pair-3 { --portal-color:#98c379; }
.portal-pair-4 { --portal-color:#e06c75; }
.portal-pair-5 { --portal-color:#61afef; }
.portal-neutral { --portal-color:var(--dim); }
.portal-surface { background:var(--portal-color); color:var(--portal-color); }
.portal-text { color:var(--portal-color); }
.accent-cantrip { --acc:#8ab4e8; }
.accent-alchemy { --acc:#6fcf97; }
.accent-elemental { --acc:#e2a25b; }
.accent-mentalism { --acc:#b892ff; }
.accent-conjuring { --acc:#e0b341; }
.accent-mutation { --acc:#4fd0c0; }
.accent-thaumaturgy { --acc:#d97ec2; }
.accent-hexcraft { --acc:#a678d8; }
.accent-chaos { --acc:#e06c9f; }
.accent-necromancy { --acc:#7fae6b; }
.accent-draconic { --acc:#c0562e; }
.accent-mythology { --acc:#b79154; }
.accent-totem { --acc:#4f9d8b; }
.accent-fire { --acc:var(--fire); }
.accent-water { --acc:var(--water); }
.accent-attack { --acc:#d56b6b; }
.accent-energy { --acc:var(--accent); }
.accent-item { --acc:var(--wall); }
.accent-counter { --acc:#b08cff; }
.accent-neutral { --acc:#5b9bd5; }
.wizard-stack-AB { background:linear-gradient(135deg,#5b9bd5 0 50%,#d56b6b 50% 100%); }
.wizard-stack-AC { background:linear-gradient(135deg,#5b9bd5 0 50%,#6fcf97 50% 100%); }
.wizard-stack-AD { background:linear-gradient(135deg,#5b9bd5 0 50%,#a06cd5 50% 100%); }
.wizard-stack-BC { background:linear-gradient(135deg,#d56b6b 0 50%,#6fcf97 50% 100%); }
.wizard-stack-BD { background:linear-gradient(135deg,#d56b6b 0 50%,#a06cd5 50% 100%); }
.wizard-stack-CD { background:linear-gradient(135deg,#6fcf97 0 50%,#a06cd5 50% 100%); }
.wizard-stack-ABC { background:conic-gradient(from 135deg,#5b9bd5 0deg 120deg,#d56b6b 120deg 240deg,#6fcf97 240deg 360deg); }
.wizard-stack-ABD { background:conic-gradient(from 135deg,#5b9bd5 0deg 120deg,#d56b6b 120deg 240deg,#a06cd5 240deg 360deg); }
.wizard-stack-ACD { background:conic-gradient(from 135deg,#5b9bd5 0deg 120deg,#6fcf97 120deg 240deg,#a06cd5 240deg 360deg); }
.wizard-stack-BCD { background:conic-gradient(from 135deg,#d56b6b 0deg 120deg,#6fcf97 120deg 240deg,#a06cd5 240deg 360deg); }
.wizard-stack-ABCD { background:conic-gradient(from 135deg,#5b9bd5 0deg 90deg,#d56b6b 90deg 180deg,#6fcf97 180deg 270deg,#a06cd5 270deg 360deg); }
.wizard-stack-neutral { background:#888; }
.board-width-1 { --board-columns:1; --board-max:46px; }
.board-width-2 { --board-columns:2; --board-max:92px; }
.board-width-3 { --board-columns:3; --board-max:138px; }
.board-width-4 { --board-columns:4; --board-max:184px; }
.board-width-5 { --board-columns:5; --board-max:230px; }
.board-width-6 { --board-columns:6; --board-max:276px; }
.board-width-7 { --board-columns:7; --board-max:322px; }
.board-width-8 { --board-columns:8; --board-max:368px; }
.board-width-9 { --board-columns:9; --board-max:414px; }
.board-width-10 { --board-columns:10; --board-max:460px; }
.token-sprite-defs { position:absolute; overflow:hidden; pointer-events:none; }
/* These style the rendered <use> instances, not the hidden defs. An SVG <use> clones its target
   into a shadow tree, and a document rule only reaches that clone when every part of the selector
   lives inside the clone. A `.token-sprite-defs` ancestor sits in the light DOM outside the shadow
   tree, so qualifying with it makes the rules match only the invisible templates and leaves the
   visible icons filled solid black. Keep these selectors bare (or anchored on the cloned
   `symbol[id^='figure-']` root) so they apply to every instance. */
symbol { fill:currentColor; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.cut { fill:var(--token-surface,#171b23); stroke:var(--token-surface,#171b23); }
.cut[fill='none'] { fill:none; }
symbol[id^='figure-'] .ink { fill:var(--token-ink,#10131a); stroke:var(--token-ink,#10131a); stroke-linecap:round; stroke-linejoin:round; }
symbol[id^='figure-'] .cut { fill:var(--token-color,#5b9bd5); stroke:none; }
symbol[id^='figure-'] .ring { fill:none; stroke:var(--token-ink,#10131a); stroke-width:1.5; opacity:.42; }
symbol[id^='figure-summon-'] .base { fill:var(--token-color,#5b9bd5); }
/* light theme: toggled via the options menu (persisted in localStorage). Everything is var-driven,
   so overriding these on <body> cascades to the whole app — including the per-cell walls. */
body.light { --bg:#ffffff; --panel:#eef0f4; --line:#c7ccd6; --txt:#14161c; --dim:#5c6473; --wall:#000000; }
/* a couple of surfaces use hardcoded dark colours the variables don't reach — override them for light mode */
body.light .focuscard { background:linear-gradient(180deg,#dfe4ee,var(--panel)); }
body.light .cell.move { background:#cfe0f7; }   /* movement-arrow destination squares */
body.light .cell.tgt { background:#dbe7f4; }    /* attack/spell target squares */
body.light .cell.hl { background:#b7cae6; }     /* highlighted square */
body.light .ftext, body.light .ghint { color:#2a2f3a; }   /* focus-panel rules/gate text: light-grey -> dark */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body { margin:0; background:var(--bg); color:var(--txt); font:15px/1.4 system-ui,sans-serif; display:flex; justify-content:center; }
#app { width:100%; max-width:480px; padding:14px; min-height:100vh; }
#app.busy { cursor:progress; pointer-events:none; }
#app.busy button, #app.busy .cell, #app.busy .hcard, #app.busy .toggle { opacity:.72; }
h1 { font-size:30px; margin:0; text-align:center; letter-spacing:1px; }
.sub { color:var(--dim); text-align:center; margin:2px 0 18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
input { width:100%; background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:11px; margin:5px 0; font-size:15px; }
button { font-size:14px; cursor:pointer; border:0; border-radius:9px; padding:11px 14px; font-weight:700; }
.primary { background:var(--accent); color:#0c1410; }
.ghost { background:transparent; color:var(--txt); border:1px solid var(--line); }
.exitbtn { background:var(--bg); color:var(--txt); border:2px solid var(--dim); padding:7px 12px; }
.icon { width:1em; height:1em; display:inline-block; flex:none; vertical-align:-.14em; color:currentColor; --token-surface:var(--panel); }
button .icon { margin-right:6px; }
.hudstat { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.hudstat .icon { width:14px; height:14px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { flex:1; background:var(--panel); color:var(--dim); }
.tab.on { background:#2b3340; color:var(--txt); }
.label { color:var(--dim); font-size:13px; margin-top:8px; }
.err { color:#ff8b8b; text-align:center; min-height:18px; }
.leave { color:var(--dim); cursor:pointer; }
/* home + lobby: fixed presentation lives here so the rendered markup remains CSP-safe */
.home-choice-row, .orphan-actions { gap:6px; }
.home-choice-row > button, .grow-action { flex:1; }
.panel-toggle { width:100%; text-align:left; display:flex; justify-content:space-between; }
.panel-copy { margin:2px 0 4px; }
.full-left-action { width:100%; text-align:left; }
.wide-primary { width:100%; margin-top:8px; }
.hint-top { margin-top:6px; }
.dev-panel { margin-top:12px; padding-top:10px; border-top:1px dashed var(--dim); }
.uppercase-input { text-transform:uppercase; }
.stacked-card { margin-top:12px; }
.orphan-card { border-color:var(--accent); }
.orphan-actions { margin-top:8px; }
.recent-row { justify-content:space-between; margin-top:6px; }
.recent-action { flex:1; text-align:left; }
.game-code-text { letter-spacing:1px; }
.center-leave { justify-content:center; margin-top:14px; }
.split-row { justify-content:space-between; }
.lobby-title { font-size:24px; text-align:left; }
.text-center { text-align:center; }
.game-code { font-weight:700; letter-spacing:1px; margin:6px 0; user-select:all; }
.center-actions { justify-content:center; }
.rule-summary { text-align:center; margin-top:8px; }
.lobby-status.ready, .active-turn, .winner-turn { color:var(--accent); }
.lobby-status.waiting, .waiting-turn { color:var(--dim); }
.personal-decks-card { margin-top:10px; }
.hint-bottom { margin-bottom:6px; }
.player-seat-row { display:flex; justify-content:space-between; margin-top:6px; }
.enter-game { width:100%; margin-top:14px; }
.history-nav { justify-content:center; gap:10px; margin:8px 0; }
.solo-banner { background:var(--card); border:1px dashed var(--accent); border-radius:8px; padding:6px 10px; margin:4px 0; font-size:13px; }
.winner-turn { font-size:20px; }
/* board */
.board-stage { position:relative; width:100%; max-width:var(--board-max,460px); margin:10px auto; }
#board { display:grid; grid-template-columns:repeat(var(--board-columns,10),1fr); gap:0; border-radius:6px; overflow:hidden; width:100%; margin:0; }   /* perimeter walls are drawn per-cell */
#spell-fx { position:absolute; inset:0; z-index:40; width:100%; height:100%; overflow:hidden; pointer-events:none; }
#spell-fx .spell-fx-glow { filter:drop-shadow(0 0 4px currentColor); }
.board-row { display:contents; }
/* user-select/touch-callout off: a long-press opens our own inspector, not the browser's menu */
.cell { aspect-ratio:1; background:var(--panel); border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.edge-R { border-right:4px var(--edge-r-style,solid) var(--edge-r-color,var(--line)); }
.edge-B { border-bottom:4px var(--edge-b-style,solid) var(--edge-b-color,var(--line)); }
.edge-L { border-left:4px var(--edge-l-style,solid) var(--edge-l-color,var(--line)); }
.edge-T { border-top:4px var(--edge-t-style,solid) var(--edge-t-color,var(--line)); }
.edge-R-wall { --edge-r-color:var(--wall); } .edge-B-wall { --edge-b-color:var(--wall); } .edge-L-wall { --edge-l-color:var(--wall); } .edge-T-wall { --edge-t-color:var(--wall); }
.edge-R-door-neutral { --edge-r-color:var(--door); } .edge-B-door-neutral { --edge-b-color:var(--door); } .edge-L-door-neutral { --edge-l-color:var(--door); } .edge-T-door-neutral { --edge-t-color:var(--door); }
.edge-R-door-A { --edge-r-color:#5b9bd5; } .edge-B-door-A { --edge-b-color:#5b9bd5; } .edge-L-door-A { --edge-l-color:#5b9bd5; } .edge-T-door-A { --edge-t-color:#5b9bd5; }
.edge-R-door-B { --edge-r-color:#d56b6b; } .edge-B-door-B { --edge-b-color:#d56b6b; } .edge-L-door-B { --edge-l-color:#d56b6b; } .edge-T-door-B { --edge-t-color:#d56b6b; }
.edge-R-door-C { --edge-r-color:#6fcf97; } .edge-B-door-C { --edge-b-color:#6fcf97; } .edge-L-door-C { --edge-l-color:#6fcf97; } .edge-T-door-C { --edge-t-color:#6fcf97; }
.edge-R-door-D { --edge-r-color:#a06cd5; } .edge-B-door-D { --edge-b-color:#a06cd5; } .edge-L-door-D { --edge-l-color:#a06cd5; } .edge-T-door-D { --edge-t-color:#a06cd5; }
.edge-R-fire { --edge-r-color:var(--fire); --edge-r-style:dashed; } .edge-B-fire { --edge-b-color:var(--fire); --edge-b-style:dashed; } .edge-L-fire { --edge-l-color:var(--fire); --edge-l-style:dashed; } .edge-T-fire { --edge-t-color:var(--fire); --edge-t-style:dashed; }
.edge-R-water { --edge-r-color:var(--water); --edge-r-style:dashed; } .edge-B-water { --edge-b-color:var(--water); --edge-b-style:dashed; } .edge-L-water { --edge-l-color:var(--water); --edge-l-style:dashed; } .edge-T-water { --edge-t-color:var(--water); --edge-t-style:dashed; }
.edge-R-accent { --edge-r-color:var(--accent); --edge-r-style:solid; } .edge-B-accent { --edge-b-color:var(--accent); --edge-b-style:solid; } .edge-L-accent { --edge-l-color:var(--accent); --edge-l-style:solid; } .edge-T-accent { --edge-t-color:var(--accent); --edge-t-style:solid; }
.cell[role="gridcell"]:focus-visible { z-index:30; outline-offset:-3px; }
.cell.void { background:none; border:0; }   /* the empty corner of a 3-player L: no sector there */
.cell.move { background:#223; cursor:pointer; } .cell.tgt { background:#1a2433; cursor:crosshair; }
.cell.hl { background:#33415a; } .cell.enemy.atk { box-shadow:0 0 0 2px #d56b6b inset; cursor:crosshair; }
/* home sectors tint their owner's colour; the home base square inside carries a ring and a ⌂.
   Both are translucent underlays, so the move/target highlights still read through them.
   isolate + z-index:-1 puts them above the cell's background but below the wizard token —
   an absolutely-positioned child would otherwise paint over the static .wiz/.movearrow. */
.cell { isolation:isolate; }
.sect, .base { position:absolute; inset:0; pointer-events:none; z-index:-1; }
.basem { position:absolute; top:0; left:2px; font-size:11px; line-height:1.1; font-weight:800; pointer-events:none; }
.wiz { position:relative; width:74%; height:74%; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#10131a; font-weight:800; }
.wiz.token-moving, .crtok.token-moving { z-index:20; pointer-events:none; will-change:transform; }
.wiz svg { width:88%; height:88%; display:block; }
.wiz.formtoken svg { width:100%; height:100%; overflow:visible; }
.wizlifewrap { position:absolute; top:-6px; right:1px; display:flex; gap:2px; z-index:2; pointer-events:none; }
.wizlife { flex:none; min-width:11px; height:11px; padding:0 2px; border-radius:6px; color:#10131a; font-size:8px; font-weight:800; line-height:11px; text-align:center; box-shadow:0 0 0 1px #fff8; }
.stunwrap { position:absolute; top:-5px; left:-4px; display:flex; gap:2px; z-index:3; pointer-events:none; }
.stunbadge { width:13px; height:13px; border-radius:50%; background:#ffbd59; color:#10131a; font-size:10px; font-weight:900; line-height:13px; text-align:center; box-shadow:0 0 0 1px #10131acc, 0 0 0 2px #fff8; }
/* a summoned creature's token: a rounded square (distinct from a wizard's circle), controller-coloured border */
.crtok { position:absolute; right:1px; bottom:1px; width:52%; height:52%; border-radius:5px; display:flex; align-items:center; justify-content:center; z-index:6; }
.crtok.fallback { border:2px solid #888; background:#0d1017cc; }
.crtok > svg { width:100%; height:100%; display:block; overflow:visible; }
.figuremini { width:18px; height:18px; display:inline-block; vertical-align:-.25em; overflow:visible; }
.crlife { position:absolute; top:-6px; right:1px; min-width:11px; height:11px; padding:0 2px; border-radius:6px; color:#10131a; font-size:8px; font-weight:800; line-height:11px; text-align:center; box-shadow:0 0 0 1px #fff8; }
.cell.crtgt { box-shadow:inset 0 0 0 2px #e0a; }                          /* a legal creature-attack target */
/* two wizards sharing a square: a diagonal split, each half a seat colour. 3+ fall back to a conic pie.
   the glyph sits on top; a small count badge disambiguates who's stacked. */
.wizn { position:absolute; bottom:-2px; right:-2px; min-width:12px; height:12px; padding:0 2px; border-radius:6px; background:#10131aee; color:#fff; font-size:9px; line-height:12px; text-align:center; box-shadow:0 0 0 1px #fff6; }
/* a carried treasure: a small diamond on the bearer's token (owner-coloured, like the ground gem) */
.wtrewrap { position:absolute; bottom:-3px; left:-2px; display:flex; gap:2px; }
.wtre { width:9px; height:9px; transform:rotate(45deg); border:1px solid #0008; box-shadow:0 0 0 1px #fff8; }
.wtre.neutral-treasure { background:#fff; }
.gem { position:absolute; top:2px; right:2px; width:9px; height:9px; transform:rotate(45deg); border:1px solid #0008; }
/* multiple treasures on one square line up their gems in the top-right corner */
.gemwrap { position:absolute; top:2px; right:2px; display:flex; gap:2px; }
.gemwrap .gem { position:static; }
/* move affordances float above everything in the cell (including a wizard already standing there) */
.moveovl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; pointer-events:none; }
.movearrow { font-size:22px; line-height:1; color:var(--accent); font-weight:800; text-shadow:0 0 3px #000,0 0 4px #000; }
.movearrow.charge { font-size:26px; color:#ffbd59; filter:drop-shadow(0 0 3px #ff8c00); }
.moveportal { width:9px; height:9px; border-radius:50%; border:2px solid var(--accent); background:#000a; opacity:.9; }
.portal { position:absolute; border-radius:3px; box-shadow:0 0 6px 1px currentColor; }
.portal.N { top:1px; left:22%; right:22%; height:5px; } .portal.S { bottom:1px; left:22%; right:22%; height:5px; }
.portal.W { left:1px; top:22%; bottom:22%; width:5px; } .portal.E { right:1px; top:22%; bottom:22%; width:5px; }
/* an OPEN door: short jamb stubs at each end of the edge with the middle open (in the owner's colour, var --dc) */
.doorjamb { position:absolute; pointer-events:none; }
.doorjamb.R { right:0; top:0; bottom:0; width:4px; } .doorjamb.L { left:0; top:0; bottom:0; width:4px; }
.doorjamb.R, .doorjamb.L { background:linear-gradient(to bottom, var(--dc) 0 30%, transparent 30% 70%, var(--dc) 70%); }
.doorjamb.T { top:0; left:0; right:0; height:4px; } .doorjamb.B { bottom:0; left:0; right:0; height:4px; }
.doorjamb.T, .doorjamb.B { background:linear-gradient(to right, var(--dc) 0 30%, transparent 30% 70%, var(--dc) 70%); }
.cell.block { background:color-mix(in srgb,var(--panel) 84%,var(--wall)); }
.grit { position:absolute; bottom:1px; left:1px; font-size:11px; line-height:1; }
.boardmark { position:absolute; left:2px; bottom:2px; width:40%; height:40%; z-index:1; pointer-events:none; color:var(--dim); --token-surface:var(--panel); }
.boardmark.floor { left:27%; bottom:27%; width:46%; height:46%; }
.boardmark.terrain { inset:7%; width:86%; height:86%; opacity:.58; color:var(--dim); }
.boardmark.anchor { left:21%; bottom:21%; width:58%; height:58%; }
.boardmark.blockmark { inset:3%; width:94%; height:94%; color:var(--wall); opacity:.72; }
.boardmark.preview { color:var(--accent); filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 70%,transparent)); }
.inplay { display:flex; flex-direction:column; gap:4px; }
.iprow { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
.iprow .ipn { flex:1; font-size:14px; } .iprow .info { cursor:pointer; }
/* scores */
.scoresRow { display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.chips { display:flex; gap:4px; flex-wrap:wrap; flex:1; min-width:0; }
.chip { display:flex; align-items:center; gap:3px; background:var(--panel); border:1px solid var(--panel); border-radius:7px; padding:4px 6px; font-size:11px; white-space:nowrap; }
.chip.act { border-color:var(--accent); } .chip.dead { opacity:.45; }
.chip .cn { font-weight:700; }
.scoresToggle { color:var(--dim); cursor:pointer; font-size:13px; padding:4px 5px; flex-shrink:0; line-height:1; }
.scores { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.pc { flex:1 1 45%; background:var(--panel); border:1px solid var(--panel); border-radius:9px; padding:7px 9px; }
.pc.act { border-color:var(--accent); } .pc.dead { opacity:.45; }
.pn { font-weight:700; } .ps { color:var(--dim); font-size:13px; }
.turn { text-align:center; font-weight:700; padding:5px; }
/* options dropdown on the turn line.
   grid (not transform/absolute) keeps the turn text centered without the ⋯
   wrapper forming a stacking context that would trap the menu behind the board. */
.turnrow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:34px; }
.turnrow .turn { grid-column:2; }
.optwrap { grid-column:3; justify-self:end; position:relative; }
.opt { padding:6px 11px; line-height:1; }
.menu { position:absolute; right:0; top:calc(100% + 4px); z-index:1000; min-width:160px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px; box-shadow:0 8px 22px rgba(0,0,0,.45); }
.mi { display:block; width:100%; padding:10px 12px; border:0; border-radius:7px; background:none; color:inherit; cursor:pointer; white-space:nowrap; font:inherit; font-size:14px; text-align:left; }
.mi:hover { background:#2b3340; }
.mi.disabled { color:var(--dim); cursor:default; }
.mi.disabled:hover { background:transparent; }
.menuback { position:fixed; inset:0; z-index:999; }   /* click-away to close */
/* selection bar + actions */
.bar { background:var(--panel); border-radius:10px; padding:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; margin:8px 0; }
.mpbadge { border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,var(--panel)); color:var(--txt); border-radius:999px; padding:5px 9px; font-size:12px; font-weight:800; white-space:nowrap; }
.mpbadge.off { border-color:var(--line); background:var(--bg); color:var(--dim); }
.mpbadge:disabled { cursor:not-allowed; opacity:.72; }
.mpmode { margin-left:5px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.hint { color:var(--dim); font-size:13px; }
.acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:6px 0; }
.first-turn-note { flex-basis:100%; color:var(--wall); text-align:center; font-size:12px; font-weight:900; letter-spacing:.06em; }
/* hand — enlarged tiles with an art thumbnail band (glyph is a placeholder for the 8th-ed scan) */
.hand { display:flex; gap:9px; overflow-x:auto; padding:2px 0 8px; scroll-snap-type:x proximity; }
.hcard { position:relative; scroll-snap-align:center; flex:0 0 118px; background:var(--panel); border:1.5px solid var(--line); border-radius:12px; padding:0; cursor:pointer; overflow:hidden; transition:border-color .12s, transform .1s; }
.hcard-main { color:inherit; }
.hcard-main:focus-visible { outline-offset:-3px; border-radius:10px; }
.hcard-main:active { transform:scale(.97); }
.hcard.prepared { border-color:#7dd3fc; box-shadow:0 0 0 1px rgba(125,211,252,.28),0 0 14px rgba(56,189,248,.25); }
.hcard.attached-energy { border-color:var(--wall); box-shadow:0 0 0 1px color-mix(in srgb,var(--wall) 32%,transparent),0 0 14px color-mix(in srgb,var(--wall) 24%,transparent); }
.hcard.sel { border-color:#d56b6b; box-shadow:0 0 0 1px rgba(213,107,107,.3),0 0 14px rgba(213,107,107,.24); } .hcard.att { border-color:var(--wall); }
.hcard.fuel .hthumb { box-shadow:inset 0 0 0 2px rgba(111,207,151,.55); }   /* an energy card that can fuel the selected spell */
.hcard.locked { cursor:default; }
.hcard.locked .hcard-main { cursor:default; }
.hcard.locked .hbody { opacity:1; }
.prepped { display:flex; flex-direction:column; gap:4px; margin:2px 0 6px; }
.preprow { font-size:13px; opacity:.85; }
.hthumb { position:relative; height:54px; display:flex; align-items:center; justify-content:center; font-size:27px; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--acc,#5b9bd5) 42%, transparent), transparent 66%), #171b23; }
.deck-glyph { display:block; }
.hstate { position:absolute; left:5px; top:5px; max-width:75px; padding:2px 5px; border-radius:6px; font-size:9px; line-height:1.15; font-weight:900; letter-spacing:.25px; text-transform:uppercase; color:#07131a; background:#7dd3fc; box-shadow:0 1px 4px #0008; }
.hstate.energy { color:#241805; background:var(--wall); }
.hcost { position:absolute; top:5px; right:5px; }
.hbody { padding:7px 8px 8px; }
.hrow { display:flex; justify-content:space-between; align-items:flex-start; gap:4px; }
.hcard-tools { position:absolute; right:5px; top:61px; z-index:2; display:flex; align-items:center; gap:2px; }
.hcard-tools + .hcost { z-index:2; }
.hcard.has-tools .hrow { padding-right:20px; }
.info { color:var(--dim); font-size:14px; padding:0 2px; cursor:help; }
.hn { font-weight:700; font-size:13px; line-height:1.2; } .ht { color:var(--dim); font-size:10.5px; text-transform:capitalize; margin:3px 0 5px; }
.enbadge { display:inline-block; font-size:11px; font-weight:800; padding:1px 6px; border-radius:8px; background:rgba(20,22,28,.72); border:1px solid var(--acc,var(--accent)); color:var(--acc,var(--accent)); cursor:pointer; }
.enbadge.on { background:var(--accent); color:#141414; border-color:var(--accent); }
/* collapsible focus card: the selected spell's action row + its full rules text (tap ▾ to fold) */
.focuscard { background:linear-gradient(180deg,#232936,var(--panel)); border:1px solid var(--line); border-radius:12px; margin:8px 0; overflow:hidden; }
.focuscard .bar { background:transparent; margin:0; border-radius:0; }
.chev { color:var(--dim); cursor:pointer; font-size:13px; padding:2px 5px; transition:transform .2s; }
.focuscard.open .chev { transform:rotate(180deg); }
.fexpand { max-height:0; opacity:0; overflow:hidden; transition:max-height .25s ease, opacity .2s; }
.focuscard.open .fexpand { max-height:240px; opacity:1; }
.feyebrow { padding:2px 13px 0; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--acc,var(--accent)); font-weight:700; }
/* counter gate builder: the optional "only fire when…" condition attached at prep time */
.gate { padding:6px 11px 9px; border-top:1px solid var(--line); }
.ghint { font-size:12px; color:#dfe3ec; margin-bottom:6px; }
.grow { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:5px; }
.gchip { padding:3px 9px; font-size:12px; }
.gchip.on { background:var(--acc,var(--accent)); border-color:var(--acc,var(--accent)); color:#0e1116; font-weight:700; }
.gchip.unavailable { opacity:.4; }
.gval { min-width:20px; text-align:center; font-size:14px; }
.ftext { padding:3px 13px 13px; font-size:13.5px; line-height:1.5; color:#dfe3ec; }
.desc { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; max-width:380px; width:100%; max-height:82vh; overflow:auto; display:flex; flex-direction:column; gap:10px; }
/* square inspector rows */
.irow { display:flex; gap:9px; align-items:flex-start; border-top:1px solid var(--line); padding:7px 0; text-align:left; }
.irow:first-child { border-top:0; }
.iic { width:22px; flex:none; text-align:center; color:var(--dim); font-weight:700; }
.ib { flex:1; min-width:0; }
.im { color:var(--dim); font-size:12px; margin-top:1px; }
.idim { opacity:.55; }
.ipick { cursor:pointer; } .ipick:hover { background:#232936; }
.dtitle { font-size:20px; font-weight:800; } .dmeta { color:var(--dim); font-size:12px; text-transform:capitalize; }
.dtext { font-size:15px; line-height:1.5; }
.report-input { width:100%; min-height:120px; resize:vertical; box-sizing:border-box; background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; font-size:15px; line-height:1.4; }
.report-input:focus { outline:none; border-color:var(--accent); }
.report-status { font-size:13px; color:var(--dim); min-height:1em; }
.report-status.error { color:var(--fire); }
.ha { color:var(--accent); font-weight:700; font-size:12px; } .ha.mod { color:var(--wall); } .ha.no { color:var(--dim); }
#log { background:var(--panel); border-radius:10px; padding:8px 10px; font-size:12px; color:var(--dim); white-space:pre-wrap; max-height:130px; overflow:auto; margin-top:8px; }
.section { color:var(--dim); font-size:13px; margin-top:8px; }
.section.toggle { cursor:pointer; display:flex; align-items:center; gap:5px; user-select:none; }
[role="button"], [role="gridcell"] { cursor:pointer; }
/* modal, above all page content — incl. positioned hand tiles (.hthumb/.hcost) and the options menu (z-index:1000) */
.overlay { position:fixed; inset:0; z-index:2000; background:rgba(8,10,14,.96); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
.scards { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:4px 0; }
.stacked-scards { flex-direction:column; }
.scard { background:var(--panel); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; }
.scard.on { border-color:var(--accent); background:#1f3326; color:var(--accent); }
.scard.selected-discard { border-color:var(--accent); color:var(--accent); }
.dialog-label { margin-top:10px; }
.dialog-actions { justify-content:center; margin-top:10px; }
.dialog-actions.flush { margin-top:0; }
.dialog-actions.emphasis { margin-top:12px; }
.empty-deck-note { margin-top:4px; }
.origin-choice { margin-left:4px; }
.accent-text { color:var(--accent); }
.section-compact { margin:0; }
.dmeta-plain { text-transform:none; }
.hazard-name.water { color:var(--water); }
.hazard-name.fire { color:var(--fire); }
.wswatch { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; vertical-align:-1px; box-shadow:0 0 0 1px #0006; }
/* transient toast (e.g. your attack tripped an opponent's prepared counter) — lives outside #app so re-renders/polls don't wipe it */
.toast { position:fixed; left:50%; top:14px; z-index:3000; max-width:88%; background:#241c17; border:1px solid var(--door); color:#f3e7db; border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600; line-height:1.35; text-align:center; box-shadow:0 6px 22px rgba(0,0,0,.55); opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-14px); transition:opacity .18s, transform .18s; }
.toast.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); cursor:pointer; }