/* Wick Wardens: the in-game renderer (board agent). Board, towers, overlay, strip, hand, seat bar, FX layer.
   Uses the tokens in app.css (§10.1). Flags on <html>: data-hcfog (high-contrast fog), data-bigtext, data-table / data-tablelayout,
   data-motion=reduced|full, data-speed, data-overlay=on|off. Reduced motion: no movement, 120 ms cross-fades (app.css kills animation durations). */
:root{ --fo1:.18; --fo2:.34; --fo3:.52; --fpw:1;
  --card-amber:#B96E08; --card-teal:#0B8C80; --card-violet:#6446C4; }
html[data-hcfog]{ --fo1:.25; --fo2:.45; --fo3:.65; --fpw:1.5; }

/* ================= board ================= */
.ww-board{ display:block; width:100%; height:100%; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; font-family:var(--font-ui); }
.ww-board text{ font-family:var(--font-ui); font-variant-numeric:tabular-nums; user-select:none; -webkit-user-select:none; pointer-events:none; }
.ww-board .overlay, .ww-board .fx, .ww-board .beams, .ww-board .cables, .ww-board .tint, .ww-board .canal, .ww-board .sea{ pointer-events:none; }
.ww-board .seafill{ fill:var(--sea); }
.ww-board .wave{ fill:none; stroke:var(--sea-wave); stroke-width:2.2; stroke-linecap:round; animation:ww-wave 9s ease-in-out infinite alternate; }
@keyframes ww-wave{ from{ transform:translateX(-16px); } to{ transform:translateX(16px); } }

.ww-board .d{ cursor:pointer; outline:none; }
.ww-board .d .shadow{ fill:var(--bg-deep); fill-opacity:.6; }
.ww-board .d .paper{ fill:var(--paper); stroke:var(--edge-a); stroke-width:2; stroke-linejoin:round; }
.ww-board .d .ridge{ fill:none; stroke:var(--dc); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.ww-board .d .dglyph{ fill:var(--dc); font-size:16.8px; font-weight:700; text-anchor:middle; }
.ww-board .d .hit{ fill:transparent; pointer-events:all; }
.ww-board .d .focus{ fill:none; stroke:none; pointer-events:none; }
.ww-board .d:focus-visible .focus{ stroke:var(--focus); stroke-width:3.4; }
.ww-board .d .hlpath{ fill:none; stroke:none; pointer-events:none; }
.ww-board .d .hopmark{ display:none; fill:none; stroke:var(--lamp-core); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.ww-board .d.reach .paper, .ww-board .d.hop .paper{ fill:var(--paper-hi); }
.ww-board .d.reach .hlpath{ stroke:var(--ink); stroke-width:2.6; stroke-dasharray:.1 5.2; stroke-linecap:round; }
.ww-board .d.hop .hlpath{ stroke:var(--lamp-core); stroke-width:1.8; stroke-dasharray:7 5; stroke-opacity:.85; }
.ww-board .d.hop .hopmark{ display:block; }
.ww-board .d.soft .hlpath{ stroke:var(--ink); stroke-width:2; stroke-opacity:.6; }
.ww-board .d.tgt .paper, .ww-board .d.pick .paper{ fill:var(--paper-hi); }
.ww-board .d.tgt .hlpath, .ww-board .d.pick .hlpath{ stroke:var(--lamp-core); stroke-width:3.6; stroke-dasharray:none; stroke-opacity:1; animation:ww-tgt 1.2s ease-in-out infinite alternate; }
@keyframes ww-tgt{ from{ stroke-opacity:.55; } to{ stroke-opacity:1; } }
.ww-board .d.pressed{ filter:brightness(1.22); }
.ww-board .d.flash .paper{ animation:ww-flash 450ms ease-out; }
@keyframes ww-flash{ 0%{ fill:#FFD27A; } 100%{ } }

/* fog (§10.3): fill opacity, pattern, bands, numeral */
.ww-board .fogfill{ fill:var(--fog); }
.ww-board .fog.f1 .fogfill{ fill-opacity:var(--fo1); } .ww-board .fog.f2 .fogfill{ fill-opacity:var(--fo2); } .ww-board .fog.f3 .fogfill{ fill-opacity:var(--fo3); }
.ww-board .fogpat{ stroke:var(--fog-ink); stroke-width:calc(1.1px * var(--fpw)); stroke-opacity:.62; }
.ww-board .fogeyes circle{ fill:var(--fog-ink); fill-opacity:.6; }
.ww-board .bands path{ stroke:var(--fog-ink); stroke-width:calc(1.8px * var(--fpw)); stroke-opacity:.85; }
.ww-board .fog{ transform-box:fill-box; transform-origin:center; }
.ww-board .fnum circle{ fill:var(--panel-solid); stroke:var(--fog-ink); stroke-width:1.4; }
.ww-board .fnum .ring{ fill:none; stroke-width:1.8; }
.ww-board .fnum.n3 circle:first-child{ fill:#0f1c31; }
.ww-board .fnum text{ fill:var(--ink); font-size:17px; font-weight:700; text-anchor:middle; }
.ww-board .nchip rect{ fill:var(--panel-solid); stroke:var(--edge-a); stroke-width:1.2; }
.ww-board .nchip text{ fill:var(--ink); font-size:17px; font-weight:700; text-anchor:middle; }

/* lamps and Hollows */
.ww-board .glow{ transform-box:fill-box; transform-origin:center; pointer-events:none; }
.ww-board.day .glow{ animation:ww-breathe 3s ease-in-out infinite; }
@keyframes ww-breathe{ 0%,100%{ transform:scale(.96); } 50%{ transform:scale(1.04); } }
.ww-board .lampicon .lg{ fill:var(--lamp-core); stroke:#7a4a12; stroke-width:.8; stroke-linejoin:round; }
.ww-board .lampicon .lf{ fill:#FFF3C9; }
.ww-board .lampicon .lc{ fill:var(--brass); stroke:#6b4a14; stroke-width:.5; }
.ww-board .lampicon .lh{ stroke:var(--brass); stroke-width:1.2; }
.ww-board .lampicon .lperm{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:2.2 1.6; stroke-linecap:round; }
.ww-board .lampicon .lfull{ stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }
.ww-board .litmark circle{ fill:var(--good); stroke:#0B2A12; stroke-width:1; }
.ww-board .litmark path{ stroke:#0B2A12; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ww-board .hollow .hcore{ fill:#050b14; fill-opacity:.35; }
.ww-board .hollow .hring{ fill:none; stroke:var(--moon); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:.1 5.7; }
.ww-board .hollow .hring2{ fill:none; stroke:var(--brass); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:.1 4.5; stroke-opacity:.75; }
.ww-board .hollow.spin .hring{ transform-box:fill-box; transform-origin:center; animation:ww-spin 900ms ease-in-out 1; }
@keyframes ww-spin{ to{ transform:rotate(360deg); } }

/* pawns */
.ww-board .pawn-art .pbody{ stroke:#0d1626; stroke-width:.9; }
.ww-board .pawn-art .peye{ fill:#0d1626; }
.ww-board .pawn-art .pglyph{ font-size:7.4px; font-weight:800; fill:#0d1626; text-anchor:middle; }
.ww-board .pawn-art .plegs, .ww-board .pawn-art .phandle{ stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; }
.ww-board .pawn.mine .pbody{ stroke:var(--ink); stroke-width:1.7; }
.ww-board .pawn .pmark{ fill:var(--lamp-core); stroke:#7a4a12; stroke-width:.7; stroke-linejoin:round; }
.ww-board .pawn.active .pawn-art{ transform-box:fill-box; transform-origin:50% 100%; animation:ww-bob 1.1s ease-in-out infinite alternate; }
@keyframes ww-bob{ from{ transform:translateY(0); } to{ transform:translateY(-1.8px); } }

/* towers */
.ww-board .tower{ cursor:pointer; outline:none; }
.ww-board .tower .hit{ fill:transparent; pointer-events:all; }
.ww-board .tower .tglow{ fill:none; stroke:none; pointer-events:none; }
.ww-board .tower.tgt .tglow, .ww-board .tower.hl .tglow{ stroke:var(--lamp-core); stroke-width:2.6; stroke-dasharray:6 3; fill:rgba(255,210,122,.1); animation:ww-tgt 1.2s ease-in-out infinite alternate; }
.ww-board .tower:focus-visible .tglow{ stroke:var(--focus); stroke-width:3; }
.ww-board .tower.pressed{ filter:brightness(1.2); }
.ww-board .tower.flash .tbody{ animation:ww-flash 600ms ease-out; }
.ww-board .tshadow{ fill:var(--bg-deep); fill-opacity:.6; }
.ww-board .tbody{ fill:var(--tc); stroke:rgba(0,0,0,.4); stroke-width:1; stroke-linejoin:round; }
.ww-board .tband{ fill:rgba(0,0,0,.26); }
.ww-board .troom{ fill:#0b1322; stroke:var(--edge); stroke-opacity:.55; stroke-width:1; }
.ww-board .twin{ stroke:var(--edge-a); stroke-width:1; }
.ww-board .troof{ fill:var(--tc); stroke:rgba(0,0,0,.4); stroke-width:1; stroke-linejoin:round; }
.ww-board .tglyph{ fill:#1b1204; font-size:8px; font-weight:800; text-anchor:middle; }
.ww-board .tower.lit .troom{ fill:var(--lamp-core); stroke:#fff6d6; stroke-opacity:.9; }
.ww-board .tcore{ fill:#fffbe6; }
.ww-board .rays path{ stroke:var(--lamp-core); stroke-width:1.6; stroke-linecap:round; }
.ww-board .tflare{ pointer-events:none; }
.ww-board .tower.smoulder .troom{ fill:#5a3318; }
.ww-board .tember{ fill:var(--lamp-glow); opacity:.85; }
.ww-board .tsmoke{ stroke:var(--ink-muted); stroke-width:1.5; stroke-linecap:round; opacity:.75; }
.ww-board .tchip rect{ fill:var(--panel-solid); stroke:var(--edge-a); stroke-width:1.2; }
.ww-board .tchip text{ fill:var(--ink); font-size:17px; font-weight:700; text-anchor:middle; }
.ww-board .tlit circle{ fill:var(--good); stroke:#0B2A12; stroke-width:1; }
.ww-board .tlit path{ stroke:#0B2A12; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ww-board .tlittxt{ fill:var(--good); font-size:16.8px; font-weight:800; text-anchor:middle; }
.ww-board .tcard rect{ stroke-width:1.4; }
.ww-board .tcard.back rect{ fill:#22385c; stroke:var(--sc); filter:drop-shadow(0 0 1.6px var(--sc)); }
.ww-board .tcard.back .cg{ fill:var(--sc); font-size:7.6px; font-weight:800; text-anchor:middle; }
.ww-board .tcard.up rect{ fill:var(--card); stroke:var(--sc); }
.ww-board .tcard.up .cn{ fill:var(--card-ink); font-size:8.6px; font-weight:800; text-anchor:middle; }
.ww-board .tcard.mine rect{ stroke-width:2; }
.ww-board .flag .fpole{ stroke:var(--edge); stroke-width:1; stroke-opacity:.8; }
.ww-board .flag .fcloth{ stroke:rgba(0,0,0,.45); stroke-width:.6; }
.ww-board .flag text{ fill:#14100a; font-weight:800; }
.ww-board .flag .fg{ font-size:8px; } .ww-board .flag .fi{ font-size:8.4px; } .ww-board .flag .fn{ font-size:6.6px; font-weight:700; }
.ww-board .seal circle{ fill:#C8432E; stroke:#6a1a0e; stroke-width:.6; }
.ww-board .seal path{ stroke:#fff; stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; }
.ww-board .tk rect{ fill:rgba(246,235,208,.1); stroke:var(--edge-a); stroke-width:.8; }
.ww-board .tk text{ fill:var(--ink); font-size:7.4px; font-weight:800; text-anchor:middle; }
.ww-board .tk.bank rect{ stroke:var(--brass); }
.ww-board .tk.known rect, .ww-board .tk.tot rect{ stroke:var(--ink); stroke-dasharray:2 1.3; }
.ww-board .tk.key text{ fill:var(--brass); }
.ww-board .cable{ fill:none; stroke:var(--brass); stroke-width:2; stroke-linecap:round; stroke-dasharray:.1 4; stroke-opacity:.8; }
.ww-board .beam{ fill:var(--beam); fill-opacity:.17; stroke:none; transform-box:view-box; }
.ww-board .beam.sweep{ fill-opacity:.4; animation:ww-sweep 900ms ease-out 1; }
@keyframes ww-sweep{ 0%{ transform:rotate(-16deg); fill-opacity:.1; } 60%{ fill-opacity:.5; } 100%{ transform:none; } }

/* sky and Dusk tint (§10.4) */
.ww-board .dusktint{ fill:#1B3D8F; opacity:0; transition:opacity 300ms ease; }
.ww-board.dusk .dusktint{ opacity:.15; }
.ww-board .dawnsky{ opacity:0; transition:opacity 600ms ease; }
.ww-board.won .dawnsky{ opacity:1; }
.ww-board.lost .seafill{ fill:#09182a; }

/* the Brine Cut canal and Drawbridge */
.ww-board .canal-bank{ fill:none; stroke:#071624; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.ww-board .canal-water{ fill:none; stroke:#2A7FB8; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.ww-board .bridge.down rect{ fill:#A87A3A; stroke:#3b2810; stroke-width:1.2; }
.ww-board .bridge.down path{ stroke:#3b2810; stroke-width:1.2; }
.ww-board .bridge.up path{ stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
.ww-board .bridgelabel{ fill:var(--ink); font-size:11px; font-weight:700; text-anchor:middle; paint-order:stroke; stroke:var(--bg-deep); stroke-width:3px; }

/* forecast overlay (§9.3) */
.ww-board .ov-hit rect{ fill:rgba(8,17,29,.86); stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3.4 2.4; }
.ww-board .ov-hit text{ fill:var(--ink); font-size:16.8px; font-weight:800; text-anchor:middle; }
.ww-board .ov-hit .af{ fill:var(--lamp-core); }
.ww-board .ov-hit.full rect{ stroke:var(--danger); }
.ww-board .ov-hit.full .af{ fill:var(--danger); }
.ww-board .ov-surge .sout{ fill:none; stroke:var(--danger); stroke-width:3; stroke-dasharray:6 4; stroke-linejoin:round; }
.ww-board .sburst circle{ fill:var(--danger); stroke:#2A0E08; stroke-width:1.2; }
.ww-board .sburst text{ fill:#2A0E08; font-size:16px; font-weight:800; text-anchor:middle; }
.ww-board .twitch{ transform-box:fill-box; transform-origin:center; animation:ww-twitch 4s linear infinite; }
@keyframes ww-twitch{ 0%,86%,100%{ transform:none; } 89%{ transform:rotate(-16deg) scale(1.15); } 93%{ transform:rotate(14deg) scale(1.15); } 97%{ transform:rotate(-6deg); } }
.ww-board .sarrow{ fill:none; stroke:var(--danger); stroke-width:3.2; stroke-dasharray:6 3; stroke-linecap:round; }
.ww-board .ov-snuff circle{ fill:rgba(8,17,29,.5); stroke:var(--danger); stroke-width:2; stroke-dasharray:3.4 2.2; }
.ww-board .ov-snuff path{ stroke:var(--danger); stroke-width:2.6; stroke-linecap:round; }
.ww-board .drop{ fill:#8FD0FF; stroke:#0C3A5C; stroke-width:.9; }
.ww-board .ov-beam{ fill:none; stroke:var(--beam); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:.1 6.6; stroke-opacity:.95; }
.ww-board .ov-moon .mring{ fill:none; stroke:var(--moon); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:.1 5.5; animation:ww-tighten 2.4s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
@keyframes ww-tighten{ from{ transform:scale(1.06); } to{ transform:scale(.94); } }
.ww-board .ov-moon .mbadge{ fill:var(--panel-solid); stroke:var(--moon); stroke-width:1.4; }
.ww-board .ov-moon .mcres{ fill:var(--moon); }
.ww-board .ov-danger .dout{ fill:rgba(255,122,102,.07); stroke:var(--danger); stroke-width:3.8; stroke-linejoin:round; animation:ww-pulse 1.1s ease-in-out infinite alternate; }
@keyframes ww-pulse{ from{ stroke-opacity:.55; } to{ stroke-opacity:1; } }
.ww-board .ov-danger .dtri{ fill:var(--danger); stroke:#2A0E08; stroke-width:1.3; stroke-linejoin:round; }
.ww-board .ov-danger text{ fill:#2A0E08; font-size:16.8px; font-weight:800; text-anchor:middle; }

/* FX layer atoms (fx.js) */
.ww-board .fx .fxwisp{ fill:var(--fog-ink); stroke:var(--fog); stroke-width:1; }
.ww-board .fx .fxeye{ fill:#10203a; }
.ww-board .fx .fxburst{ fill:var(--danger); stroke:#2A0E08; stroke-width:1.4; }
.ww-board .fx .fxspark{ fill:var(--lamp-core); }
.ww-board .fx .fxtile rect{ fill:var(--card); stroke:var(--brass); stroke-width:2; } .ww-board .fx .fxtile text{ fill:var(--card-ink); font-size:16px; font-weight:800; text-anchor:middle; }
.ww-board .fx .fxcard rect{ fill:#22385c; stroke:var(--sc,var(--card)); stroke-width:1.6; }
.ww-board .fx .fxlabel{ fill:var(--ink); font-size:16px; font-weight:800; text-anchor:middle; paint-order:stroke; stroke:var(--bg-deep); stroke-width:3.4px; stroke-linejoin:round; }
.ww-board .fx .fxverdict rect{ fill:var(--panel-solid); stroke:var(--lamp-core); stroke-width:2; }
.ww-board .fx .fxverdict text{ fill:var(--ink); font-size:16px; font-weight:800; text-anchor:middle; }
.ww-board .fx .fxverdict.lit rect{ stroke:var(--good); } .ww-board .fx .fxverdict.flare rect{ stroke:var(--danger); }
.ww-board .fx .fxfog{ fill:var(--fog); }
.ww-board .fx .fxtrail{ fill:none; stroke:var(--lamp-core); stroke-width:2; stroke-dasharray:3 4; stroke-linecap:round; stroke-opacity:.8; }
.ww-board .fx .fxmoon circle{ fill:var(--moon); }
.ww-board .fx .fxlamp{ fill:none; }

/* ================= strip ================= */
.ww-strip{ position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:40px 48px 24px; width:100%; height:100%; min-width:0; font-size:var(--fs-s); line-height:20px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ww-strip button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; text-align:left; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.ww-strip button.pressed{ filter:brightness(1.3); transform:translateY(1px); }
.ww-strip .sa{ display:grid; grid-template-columns:minmax(0,112px) 44px minmax(0,1fr) 44px; align-items:center; column-gap:4px; padding:0 2px; }
.ww-strip .s-clock{ display:block; height:44px; margin:-2px 0; padding:2px 0; min-width:44px; overflow:hidden; white-space:nowrap; }
.ww-strip .s-clock .l1{ display:block; font-weight:700; color:var(--ink); }
.ww-strip .s-clock .l2{ display:flex; align-items:center; gap:4px; color:var(--moon); }
.ww-strip .s-clock svg{ flex:0 0 16px; width:16px; height:16px; }
.ww-strip .s-die{ height:44px; margin:-2px 0; width:44px; display:grid; place-items:center; border-radius:10px; }
.ww-strip .s-die svg{ width:40px; height:40px; display:block; overflow:visible; }
.ww-strip .s-die .dface{ fill:var(--card); stroke:#b8a679; stroke-width:1.4; }
.ww-strip .s-die .dpip{ fill:#6b5a3a; opacity:.38; }
.ww-strip .s-die .darrow{ fill:var(--card-ink); }
.ww-strip .s-die .dq{ fill:var(--card-ink); font-size:26px; font-weight:800; text-anchor:middle; }
.ww-strip .s-die.pulse svg{ animation:ww-diepulse 1s ease-in-out infinite; }
.ww-strip .s-die.pulse .dface{ stroke:var(--lamp-core); stroke-width:3; }
@keyframes ww-diepulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
.ww-strip .s-die.tumble svg{ animation:ww-tumble var(--tumble,600ms) cubic-bezier(.3,.7,.4,1) 1; }
@keyframes ww-tumble{ 0%{ transform:rotate(0) scale(.8); } 33%{ transform:rotate(240deg) scale(1.1); } 66%{ transform:rotate(480deg) scale(.95); } 100%{ transform:rotate(720deg) scale(1); } }
.ww-strip .s-info{ display:block; min-width:0; height:40px; }
.ww-strip .s-info .l1{ display:flex; align-items:center; gap:4px; height:20px; }
.ww-strip .s-info .l2{ display:block; height:20px; white-space:nowrap; color:var(--ink); }
.ww-strip .s-info .l2 b{ font-weight:700; }
.ww-strip .s-info .l2.low b{ color:var(--danger); }
.ww-strip .bellicon{ flex:0 0 16px; width:16px; height:16px; transform-origin:50% 10%; }
.ww-strip .bellicon path{ fill:var(--brass); stroke:#6b4a14; stroke-width:.8; }
.ww-strip .bellicon.swing{ animation:ww-swing .7s ease-in-out 1; }
@keyframes ww-swing{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-28deg); } 55%{ transform:rotate(22deg); } 80%{ transform:rotate(-8deg); } }
.ww-strip .pips{ display:flex; gap:2px; align-items:center; }
.ww-strip .pip{ box-sizing:border-box; width:var(--pip,11px); height:var(--pip,11px); border-radius:50%; border:1.8px solid var(--brass); background:transparent; flex:0 0 auto; }
.ww-strip .pip.rung{ background:var(--brass); }
.ww-strip .pip.last{ border-color:var(--danger); animation:ww-pippulse 1s ease-in-out infinite alternate; }
.ww-strip .pip.dim{ opacity:.5; }
@keyframes ww-pippulse{ from{ background:rgba(255,122,102,.1); } to{ background:rgba(255,122,102,.75); } }
.ww-strip .s-menu{ width:44px; height:44px; margin:-2px 0; display:grid; place-items:center; font-size:26px; line-height:1; border-radius:10px; background:rgba(246,235,208,.1); text-align:center; }
.ww-strip .sb{ display:flex; align-items:center; gap:4px; padding:0 2px; min-width:0; }
.ww-strip .omens{ display:flex; align-items:stretch; gap:4px; flex:1 1 auto; min-width:0; height:48px; }
.ww-strip .grp{ display:flex; align-items:stretch; gap:3px; position:relative; padding:0 0 4px 18px; }
.ww-strip .grp::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; border:2px solid var(--brass); border-top:0; border-radius:0 0 3px 3px; }
.ww-strip .grp.next::after{ border-color:var(--ink-muted); border-style:dashed; border-top:0; }
/* bracket labels at 16 px: a moon for tonight, "Next" for the rest (the words are in the ticker, S7 and the screen-reader labels) */
.ww-strip .grp .brk{ position:absolute; left:0; top:0; width:18px; height:44px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:16px; line-height:1; font-weight:800; color:var(--brass); white-space:nowrap; }
.ww-strip .grp.next .brk{ color:var(--ink-muted); writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; letter-spacing:.02em; }
.ww-strip .tile{ position:relative; width:54px; height:44px; flex:0 0 54px; display:flex; align-items:center; justify-content:center; gap:4px; background:var(--card); color:var(--card-ink); border-radius:7px; border-bottom:5px solid var(--tc); box-shadow:0 2px 0 var(--bg-deep); font-weight:800; font-size:20px; }
.ww-strip .tile .g{ font-size:16px; color:var(--tcd); }
.ww-strip .grp.next .tile{ opacity:.62; }
.ww-strip .tile.sel{ outline:3px solid var(--lamp-core); outline-offset:1px; }
.ww-strip .tile.calm{ opacity:.35; text-decoration:line-through; }
.ww-strip .tile.fly{ visibility:hidden; }
.ww-strip .s-bag{ flex:0 0 auto; min-height:44px; min-width:44px; padding:0 8px; display:flex; align-items:center; gap:3px; border-radius:10px; background:rgba(246,235,208,.1); font-weight:700; white-space:nowrap; }
.ww-strip .ticker{ display:block; width:100%; height:24px; border-radius:6px; background:rgba(0,0,0,.28); padding:0 8px; white-space:nowrap; color:var(--ink-muted); position:relative; }
.ww-strip .ticker::after{ content:""; position:absolute; left:0; right:0; top:-4px; bottom:-16px; }   /* hit area 44 px tall (down into the gap) */
.ww-strip .ticker .clip{ display:block; overflow:hidden; height:24px; }
.ww-strip .ticker .tx{ display:inline-block; will-change:auto; }
.ww-strip .ticker.over .tx{ animation:ww-marq var(--mdur,8s) linear infinite alternate; }
@keyframes ww-marq{ 0%,12%{ transform:translateX(0); } 88%,100%{ transform:translateX(calc(-1 * var(--ov,0px))); } }
.ww-strip .ticker.kind-surge, .ww-strip .ticker.kind-lose{ color:#FFE3DD; background:rgba(255,122,102,.22); font-weight:700; }
.ww-strip .ticker.kind-lose{ background:rgba(255,122,102,.38); }
.ww-strip .ticker.kind-snuff{ color:#FFE1B8; background:rgba(255,184,107,.2); font-weight:600; }
.ww-strip .ticker.kind-moonrise{ color:var(--moon); background:rgba(232,227,200,.14); font-weight:600; }

/* ================= hand ================= */
.ww-hand{ position:relative; width:100%; height:100%; min-height:84px; display:flex; flex-wrap:nowrap; gap:var(--hg,4px); justify-content:center; align-items:flex-end; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.ww-hand .sep{ flex:none; width:6px; align-self:center; height:56px; border-left:2px dotted var(--panel-edge); margin:0 -1px; }
.ww-hand .card{ flex:none; position:relative; width:var(--cw,50px); height:72px; padding:0; border:0; border-radius:7px; background:var(--card); color:var(--card-ink); box-shadow:0 3px 0 var(--bg-deep); text-align:left; cursor:pointer; transition:transform 120ms ease, opacity 120ms; touch-action:manipulation; font:inherit; overflow:hidden; }
.ww-hand.fanned > .card + .card{ margin-left:calc(var(--ov,0px) * -1); }
.ww-hand .tray{ flex:none; width:var(--ew,66px); display:flex; flex-direction:column; gap:2px; align-self:stretch; justify-content:flex-end; }
.ww-hand .tray.stack .card.ember{ flex:1 1 0; min-height:0; height:auto; width:100%; border-radius:6px; }
.ww-hand .tray.stack .card.ember .n{ display:none; }
.ww-hand .tray.stack .card.ember .en{ top:50%; bottom:auto; transform:translateY(-50%); left:9px; }
.ww-hand .card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--cc); }
.ww-hand .card .n{ position:absolute; left:11px; top:4px; font-size:24px; line-height:26px; font-weight:800; font-variant-numeric:tabular-nums; }
.ww-hand .card .g{ position:absolute; right:5px; bottom:20px; font-size:20px; line-height:20px; font-weight:800; color:var(--cd); }
.ww-hand .card .pp{ position:absolute; left:11px; bottom:6px; display:flex; gap:2px; }
.ww-hand .card .pp i{ width:5px; height:5px; border-radius:50%; background:var(--cd); }
/* tighter (slices under 28 px): smaller glyph, pips in 2 columns */
.ww-hand.tighter .card:not(.ember):not(.mini):not(.back) .n{ left:6px; font-size:22px; }
.ww-hand.tighter .card:not(.ember):not(.mini):not(.back) .g{ left:6px; top:29px; font-size:16px; line-height:16px; }
.ww-hand.tighter .card:not(.ember):not(.mini):not(.back) .pp{ left:6px; bottom:4px; width:11px; gap:1.5px; }
.ww-hand.tighter .card:not(.ember):not(.mini):not(.back) .pp i{ width:4.5px; height:4.5px; }
/* tight hand (a full hand plus a tray): numeral, glyph and pips stack in the left column so a card's slice shows all three */
.ww-hand.tight .card:not(.ember):not(.mini):not(.back)::before{ width:5px; }
.ww-hand.tight .card:not(.ember):not(.mini):not(.back) .n{ left:8px; top:3px; }
.ww-hand.tight .card:not(.ember):not(.mini):not(.back) .g{ left:8px; right:auto; top:31px; bottom:auto; font-size:18px; line-height:18px; }
.ww-hand.tight .card:not(.ember):not(.mini):not(.back) .pp{ left:8px; bottom:5px; width:19px; flex-wrap:wrap; gap:2px; }
.ww-hand .card.sel{ transform:translateY(-12px); box-shadow:0 3px 0 var(--bg-deep), 0 0 0 3px var(--lamp-core); z-index:3; }
.ww-hand .card.pressed{ transform:translateY(-4px); filter:brightness(.94); }
.ww-hand .card.dim{ opacity:.5; }
.ww-hand .card.ember{ width:100%; background:#1B2A45; color:var(--ink); border:2px solid var(--lamp-core); }
.ww-hand .card.ember::before{ background:var(--lamp-glow); }
.ww-hand .card.ember .n{ font-size:22px; top:6px; left:10px; color:var(--lamp-core); }
.ww-hand .card.ember .en{ position:absolute; left:8px; right:0; bottom:8px; font-size:16px; line-height:18px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; }
.ww-hand .card.back{ background:#22385c; border:2px solid #3b5a8c; }
.ww-hand .card.back::before{ background:repeating-linear-gradient(45deg,#2c4a78 0 4px,#22385c 4px 8px); width:100%; }
.ww-hand .card.mini{ width:30px; height:44px; border-radius:5px; }
.ww-hand .card.mini .en{ display:none; }
.ww-hand .card.mini .n{ left:7px; top:3px; font-size:15px; line-height:16px; } .ww-hand .card.mini::before{ width:4px; } .ww-hand .card.mini .g, .ww-hand .card.mini .pp{ display:none; }
.ww-hand .empty{ align-self:center; margin:0 auto; color:var(--ink-muted); font-size:var(--fs-s); text-align:center; }
.ww-strips{ display:flex; flex-direction:column; gap:3px; width:100%; }
.ww-strips .row{ display:flex; align-items:center; gap:6px; height:46px; }
.ww-strips .who{ flex:0 0 64px; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ww-strips .fan{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,30px); gap:2px; flex:1 1 auto; justify-content:start; }
.ww-strips .fan > :last-child{ justify-self:end; }

/* ================= seat bar ================= */
.ww-seatbar{ display:flex; gap:6px; width:100%; height:100%; align-items:stretch; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ww-seatbar .chip{ position:relative; flex:1 1 0; min-width:76px; min-height:44px; display:flex; flex-direction:column; justify-content:center; gap:0; padding:2px 6px 2px 8px; border:0; border-left:6px solid var(--sc); border-radius:9px; background:rgba(246,235,208,.1); color:var(--ink); text-align:left; font:inherit; font-size:var(--fs-s); line-height:20px; cursor:pointer; box-shadow:0 3px 0 var(--bg-deep); touch-action:manipulation; overflow:hidden; }
.ww-seatbar .chip.pressed{ transform:translateY(2px); filter:brightness(1.25); }
.ww-seatbar .chip.active{ background:var(--card); color:var(--card-ink); box-shadow:0 3px 0 var(--bg-deep), 0 0 0 2.5px var(--lamp-core); }
.ww-seatbar .chip.viewer .nm::after{ content:" ·you"; font-weight:500; font-size:16px; opacity:.7; }
.ww-seatbar .chip.dimmed{ opacity:.5; }
.ww-seatbar .chip .nm{ display:flex; align-items:center; gap:4px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ww-seatbar .chip .sg{ flex:0 0 auto; color:var(--sc); font-size:18px; line-height:18px; text-shadow:0 0 0 #000; }
.ww-seatbar .chip.active .sg{ color:var(--card-ink); }
.ww-seatbar .chip .nt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
.ww-seatbar .chip .cog{ margin-left:auto; flex:0 0 auto; width:16px; height:16px; }
.ww-seatbar .chip .cog path{ fill:none; stroke:currentColor; stroke-width:1.6; }
.ww-seatbar .chip .tools{ position:absolute; right:5px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:3px; }
.ww-seatbar .chip.hastools{ padding-right:18px; }
.ww-seatbar .chip .tools i{ width:8px; height:8px; border-radius:50%; background:var(--lamp-core); box-shadow:0 0 0 1.5px rgba(0,0,0,.45); }
.ww-seatbar .chip.active .tools i{ background:#B96E08; }
.ww-seatbar .chip .emb{ display:inline-flex; gap:2px; margin-left:3px; vertical-align:middle; }
.ww-seatbar .chip .emb i{ width:9px; height:11px; border-radius:2px; background:var(--lamp-core); display:inline-block; }
.ww-seatbar.table{ position:absolute; inset:0; display:block; pointer-events:none; z-index:20; height:auto; }
.ww-seatbar.table .chip{ position:absolute; width:112px; height:48px; flex:none; pointer-events:auto; }
.ww-seatbar.table .chip.e0{ left:calc(50% - 56px); bottom:2px; }
.ww-seatbar.table .chip.e1{ left:-30px; top:calc(50% - 24px); transform:rotate(90deg); }
.ww-seatbar.table .chip.e2{ left:calc(50% - 56px); top:2px; transform:rotate(180deg); }
.ww-seatbar.table .chip.e3{ right:-30px; top:calc(50% - 24px); transform:rotate(-90deg); }
.ww-seatbar.table .chip.pressed{ filter:brightness(1.25); }

/* ================= FX html layer (fx.js) ================= */
.ww-fxhtml{ position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden; }
.ww-fxhtml .fxh{ position:absolute; display:grid; place-items:center; will-change:transform; }
.ww-fxhtml .omentile{ background:var(--card); color:var(--card-ink); border-radius:7px; border:2px solid var(--brass); box-shadow:0 3px 0 var(--bg-deep); font-weight:800; font-size:20px; }
.ww-fxhtml .lend{ color:var(--lamp-core); font-size:26px; text-shadow:0 0 10px var(--lamp-glow); }

/* reduced motion: static, readable end states (app.css already shortens every animation to ~0) */
html[data-motion="reduced"] .ww-strip .ticker.over .tx{ animation:none; }
html[data-motion="reduced"] .ww-strip .ticker{ text-overflow:ellipsis; }
@media (prefers-reduced-motion:reduce){ html:not([data-motion="full"]) .ww-strip .ticker.over .tx{ animation:none; } }
/* Big text (+20%): the strip grows to three rows (Strip A wraps: clock + die + menu, then Bell + wisps), so the §9.2 grid gives it more height. */
html[data-bigtext]{ --strip-h:150px; --seatbar-h:52px; }
html[data-bigtext] .ww-strip{ grid-template-rows:auto 52px 28px; }
html[data-bigtext] .ww-strip .sa{ grid-template-columns:minmax(0,1fr) 44px 44px; grid-template-rows:44px auto; row-gap:2px; }
html[data-bigtext] .ww-strip .s-clock{ height:auto; margin:0; }
html[data-bigtext] .ww-strip .s-clock .l1, html[data-bigtext] .ww-strip .s-clock .l2{ line-height:22px; }
html[data-bigtext] .ww-strip .s-info{ grid-column:1 / -1; grid-row:2; height:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
html[data-bigtext] .ww-strip .s-info .l1, html[data-bigtext] .ww-strip .s-info .l2{ height:24px; line-height:24px; }
html[data-bigtext] .ww-strip .ticker, html[data-bigtext] .ww-strip .ticker .clip{ height:28px; line-height:28px; }
html[data-bigtext] .ww-strip .tile{ font-size:22px; width:48px; flex-basis:48px; gap:2px; }
html[data-bigtext] .ww-strip .s-bag{ padding:0 6px; }
/* Big text: the board is height-limited (the strip grows to 3 rows) so it draws at ~0.82; grow the SVG text so numerals stay >= 16 px on screen */
html[data-bigtext] .ww-board .nchip text, html[data-bigtext] .ww-board .fnum text{ font-size:20px; }
html[data-bigtext] .ww-board .ov-hit text, html[data-bigtext] .ww-board .d .dglyph, html[data-bigtext] .ww-board .ov-danger text{ font-size:19.6px; }
html[data-bigtext] .ww-board .tchip text{ font-size:20px; }
html[data-bigtext] .ww-board .ov-hit rect{ x:-31px; width:62px; }