/* Wick Wardens: tokens (SPEC §10.1, Navy Night paper), page shell, menu components, sheets, toasts, notices and the §9.2 phone grid.
   board.css (board), fx.css (look), table.css, towns.css and daily.css add their own styles on top; they may use every token and class here.
   Big text: <html data-bigtext> sets --tx:1.2 and every size below is calc(Npx * var(--tx)), so use the --fs-* tokens.
   Settings -> <html data-*> (main.js): flags are present ("1") only when ON: data-bigtext, data-hcfog, data-table, data-lefty, data-hints;
   always present: data-motion=reduced|full, data-speed=1x|2x|instant, data-overlay=on|off, data-kbd=1|0, data-paper, data-lamp.
   Other papers (§7.10) override the colour tokens on html[data-paper="ink"] etc. */
:root{
  /* palette, §10.1 */
  --bg:#0E1A2B; --bg-deep:#08111D; --sea:#0B2237; --sea-wave:#16405E; --paper:#1C2E47; --paper-hi:#28426A;
  --edge:#E9DDBE; --edge-a:rgba(233,221,190,.35);
  --ink:#F6EBD0; --ink-muted:#A9B6C8; --fog:#B4C7DB; --fog-ink:#DCE6F0;
  --amber:#F2A93B; --teal:#3CC6B5; --violet:#B9A2F2; --any:#F6EBD0;
  --lamp-core:#FFD27A; --lamp-glow:#FF9E3D; --beam:#FFE7A8;
  --danger:#FF7A66; --brass:#D9B26A; --moon:#E8E3C8; --card:#F3E6C8; --card-ink:#2A1E10; --good:#9BE39B;
  /* app-level helpers */
  --panel:rgba(28,46,71,.92); --panel-solid:#162640; --panel-edge:rgba(233,221,190,.22); --shadow:rgba(4,9,16,.6);
  --focus:#FFD27A; --warn:#FFB86B; --scrim:rgba(8,17,29,.8);
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --anim:300ms;                         /* main.js: 300 / 150 / 0 (1x / 2x / Instant), 120 under reduced motion */
  --tx:1;                               /* Big text = 1.2 */
  --fs-xs:calc(16px * var(--tx)); --fs-s:calc(16px * var(--tx)); --fs-m:calc(16px * var(--tx)); --fs-l:calc(18px * var(--tx));
  --fs-xl:calc(22px * var(--tx)); --fs-xxl:calc(30px * var(--tx));
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --radius:14px;
  /* §9.2 phone grid (360x640 design): strip 112 + board flex + seat bar 48 + hand 84 + action bar 52, 6 px gaps */
  --strip-h:112px; --seatbar-h:48px; --hand-h:84px; --actions-h:52px; --gap:6px;
}
html[data-bigtext]{ --tx:1.2; }
/* html[data-hcfog] fog colours live in fx.css (per paper, contrast-checked by look) */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); }
html,body{ margin:0; padding:0; min-height:100%; }
body{
  font:400 var(--fs-m)/1.4 var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink); background-color:var(--bg);
  background-image:radial-gradient(120% 70% at 50% -10%,#1A2C48 0,rgba(14,26,43,0) 60%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior:none; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--lamp-core); }
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:.2px; font-weight:600; }
h1{ font-size:var(--fs-xxl); } h2{ font-size:var(--fs-xl); } h3{ font-size:var(--fs-l); }
p{ margin:0 0 10px; }
.dim{ color:var(--ink-muted); } .small{ font-size:var(--fs-xs); } .center{ text-align:center; } .num{ font-variant-numeric:tabular-nums; }
.nowrap{ white-space:nowrap; } .sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus{ outline:none; }
html[data-kbd="1"] :focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:12px; }
[hidden]{ display:none!important; }
.noselect, .btn, .card, .hexbtn{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* ---------- page shell ---------- */
#app{ position:relative; z-index:1; min-height:100%; }
#overlays{ position:fixed; inset:0; z-index:40; pointer-events:none; }
#overlays > *{ pointer-events:auto; }
#boot{ position:fixed; inset:0; display:grid; place-items:center; color:var(--ink-muted); z-index:2; }
noscript{ display:block; padding:24px; text-align:center; }

/* A menu screen: a scrollable column, max 480 wide, safe-area padded. */
.screen{ position:relative; width:100%; max-width:480px; min-height:100dvh; margin:0 auto; display:flex; flex-direction:column; gap:12px;
  padding:calc(var(--sat) + 10px) calc(var(--sar) + 16px) calc(var(--sab) + 18px) calc(var(--sal) + 16px); }
.screen.tight{ gap:8px; }
.top{ display:flex; align-items:center; gap:10px; min-height:48px; }
.top h1{ flex:1; font-size:var(--fs-xl); }
.top .back{ flex:0 0 auto; }
.grow{ flex:1 1 auto; } .row{ display:flex; gap:10px; align-items:center; } .row.wrap{ flex-wrap:wrap; } .row.split{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.gap-s{ gap:6px; } .gap-l{ gap:18px; }

/* ---------- panels: cut-paper cards ---------- */
.panel{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:14px; box-shadow:0 4px 0 var(--bg-deep); }
.panel.cream{ background:var(--card); color:var(--card-ink); border-color:#d8c79f; box-shadow:0 4px 0 var(--bg-deep), inset 0 0 0 3px #e9d9b3; }
.panel h2{ margin-bottom:8px; }
.panel h3{ margin-bottom:4px; }
.panel .lead{ color:var(--ink-muted); margin-bottom:8px; }
.panel.accent{ border-color:rgba(255,210,122,.6); background:linear-gradient(180deg,rgba(255,158,61,.14),rgba(28,46,71,.92) 70%); }

/* ---------- buttons: pills, all >= 44 px tall, immediate press feedback ---------- */
.btn{ --bg-b:var(--card); --fg:var(--card-ink); --edge-b:#d8c79f;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:48px; padding:10px 18px;
  border:0; border-radius:var(--radius); background:var(--bg-b); color:var(--fg); font-weight:700; font-size:var(--fs-l); line-height:1.15; text-align:center;
  box-shadow:0 4px 0 var(--bg-deep), inset 0 -3px 0 var(--edge-b); position:relative; text-decoration:none;
  transition:transform 60ms ease, box-shadow 60ms ease, filter 60ms ease; }
.btn.pressed, .btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--bg-deep), inset 0 -2px 0 var(--edge-b); filter:brightness(.94); }
.btn.big{ min-height:56px; font-size:calc(19px * var(--tx)); } .btn.wide{ width:100%; } .btn.small{ min-height:44px; padding:6px 14px; font-size:var(--fs-s); }
.btn.primary{ --bg-b:var(--lamp-core); --fg:var(--card-ink); --edge-b:#E1A64A; }
.btn.secondary{ --bg-b:rgba(246,235,208,.1); --fg:var(--ink); --edge-b:rgba(0,0,0,.2); border:1.5px solid rgba(246,235,208,.4); }
.btn.quiet{ --bg-b:transparent; --fg:var(--ink); --edge-b:transparent; box-shadow:none; border:1.5px solid var(--panel-edge); }
.btn.quiet.pressed{ box-shadow:none; transform:translateY(2px); }
.btn.danger{ --bg-b:var(--danger); --fg:#2A0E08; --edge-b:#D4553F; }
.btn.good{ --bg-b:var(--good); --fg:#0B2A12; --edge-b:#6FC06F; }
.btn[disabled]{ opacity:.45; filter:saturate(.4); pointer-events:none; }
.btn[aria-disabled="true"]{ opacity:.55; filter:saturate(.45); }   /* still tappable: the tap explains why (toast) */
.btn .sub{ display:block; font-size:var(--fs-xs); font-weight:500; opacity:.8; }
.btn.stacked{ flex-direction:column; gap:2px; }
.linkbtn{ background:none; border:0; padding:10px 8px; min-height:44px; min-width:44px; color:var(--lamp-core); text-decoration:underline; text-underline-offset:3px; font-size:var(--fs-s); font-weight:600; border-radius:10px; }
.linkbtn.muted{ color:var(--ink-muted); font-weight:500; }
.linkbtn.pressed{ opacity:.6; }
.iconbtn{ min-width:48px; padding:10px; }

/* ---------- form controls ---------- */
.toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:6px 0; border-top:1px solid rgba(233,221,190,.14); }
.toggle:first-child{ border-top:0; }
.toggle .tl{ display:flex; flex-direction:column; min-width:0; }
.toggle .tt{ font-weight:600; } .toggle .sub{ font-size:var(--fs-xs); color:var(--ink-muted); }
.seg{ display:inline-flex; background:rgba(0,0,0,.28); border-radius:12px; padding:3px; gap:3px; flex:0 0 auto; max-width:62%; flex-wrap:wrap; justify-content:flex-end; }
.seg .btn{ min-height:44px; padding:6px 12px; font-size:var(--fs-s); font-weight:600; --bg-b:transparent; --fg:var(--ink-muted); box-shadow:none; --edge-b:transparent; border-radius:10px; }
.seg .btn[aria-pressed="true"]{ --bg-b:var(--card); --fg:var(--card-ink); box-shadow:0 2px 0 var(--bg-deep); }
.seg .btn.pressed{ transform:translateY(1px); }
.btn.sw{ min-width:72px; min-height:44px; padding:6px 14px; font-size:var(--fs-s); --bg-b:rgba(0,0,0,.34); --fg:var(--ink-muted); box-shadow:none; }
.btn.sw[aria-pressed="true"]{ --bg-b:var(--good); --fg:#0B2A12; }
.toggle.col{ flex-direction:column; align-items:stretch; gap:6px; padding:10px 0; } .toggle.col .seg{ max-width:none; width:100%; justify-content:stretch; } .toggle.col .seg .btn{ flex:1 1 0; padding-left:6px; padding-right:6px; }
.slider{ display:flex; align-items:center; gap:10px; padding:0 0 8px; }
.slider input[type=range]{ flex:1; min-height:44px; accent-color:var(--lamp-core); background:transparent; }
.slider > .small{ flex:0 0 118px; }
.slider .val{ min-width:3ch; text-align:right; color:var(--ink-muted); font-size:var(--fs-xs); }
.field{ display:flex; flex-direction:column; gap:4px; } .field > span{ font-size:var(--fs-xs); color:var(--ink-muted); font-weight:600; }
input.text, textarea.text, select.text{ width:100%; min-height:48px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--panel-edge); background:rgba(0,0,0,.3); color:var(--ink); font-size:var(--fs-l); }
input.text:focus, textarea.text:focus{ border-color:var(--lamp-core); }
textarea.text{ min-height:96px; resize:vertical; font-size:var(--fs-xs); font-family:ui-monospace,Menlo,monospace; }
.check{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:var(--fs-s); }
.check input{ width:24px; height:24px; accent-color:var(--lamp-core); flex:0 0 auto; }
.err{ color:var(--warn); font-size:var(--fs-s); } .err:empty{ display:none; } .okmsg{ color:var(--good); font-size:var(--fs-s); }
.chip{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; border-radius:999px; background:rgba(0,0,0,.3); font-size:var(--fs-xs); font-weight:600; color:var(--ink-muted); }
.chip.good{ color:var(--good); } .chip.warn{ color:var(--warn); } .chip.danger{ color:var(--danger); }
.badge{ min-width:24px; height:24px; padding:0 7px; border-radius:12px; background:var(--danger); color:#2A0E08; font:700 var(--fs-xs)/24px var(--font-ui); text-align:center; }
hr.sep{ border:0; border-top:1px solid rgba(233,221,190,.18); margin:12px 0; }

/* ---------- Title ---------- */
.titlescreen{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; text-align:center; cursor:pointer; }
.wordmark{ position:relative; text-align:center; }
.wordmark svg{ width:min(100%,320px); height:auto; display:block; margin:0 auto; overflow:visible; }
.wordmark .wm-fallback{ display:block; margin:0 auto; font-weight:800; letter-spacing:.08em; font-size:calc(40px * var(--tx)); line-height:1; color:var(--ink);
  text-shadow:0 3px 0 var(--bg-deep), 0 0 18px rgba(255,158,61,.55); }
.wordmark .wm-fallback b{ display:block; color:var(--lamp-core); }
.wordmark .tag{ margin-top:8px; color:var(--ink-muted); font-size:var(--fs-s); }
.lantern{ width:44px; height:64px; position:relative; }
.lantern svg{ width:100%; height:100%; overflow:visible; }
.lantern .flame{ animation:flick 600ms steps(2,jump-none) infinite; transform-origin:50% 100%; }
@keyframes flick{ 0%{ transform:scale(1,1); } 100%{ transform:scale(.88,1.1); } }
.tapnote{ color:var(--ink-muted); font-size:var(--fs-s); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ---------- Home ---------- */
.homehead{ display:flex; flex-direction:column; align-items:center; padding:6px 0 2px; }
.homehead .wordmark svg{ width:min(100%,220px); }
.homehead .wordmark .wm-fallback{ font-size:calc(30px * var(--tx)); }
.menu{ display:flex; flex-direction:column; gap:10px; }
.menu > .btn{ width:100%; justify-content:space-between; text-align:left; padding-left:18px; padding-right:14px; }
.menu > .btn .lab{ display:flex; flex-direction:column; align-items:flex-start; } .menu > .btn .sub{ font-size:var(--fs-xs); font-weight:500; opacity:.8; }
.menu > .btn .go{ opacity:.55; font-size:var(--fs-xl); line-height:1; }
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.menu-grid > .btn{ justify-content:flex-start; text-align:left; min-height:56px; padding:10px 14px; }
.foot{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 4px; margin-top:auto; padding-top:8px; }
.updatepill{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px 14px; border-radius:var(--radius); border:1.5px solid var(--lamp-core); background:rgba(255,210,122,.12); color:var(--lamp-core); font-weight:700; }
.offer .row .btn{ flex:1 1 140px; }

/* ---------- lists, tiles, prose ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tile{ background:rgba(0,0,0,.28); border-radius:12px; padding:8px 6px; text-align:center; }
.tile b{ display:block; font:700 var(--fs-xl)/1.1 var(--font-ui); } .tile span{ font-size:var(--fs-xs); color:var(--ink-muted); }
.list{ list-style:none; margin:0; padding:0; } .list li{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(233,221,190,.14); min-height:40px; }
.list li:first-child{ border-top:0; }
.prose p, .prose li{ font-size:var(--fs-m); line-height:1.5; } .prose ul, .prose ol{ margin:0 0 10px; padding-left:20px; } .prose li{ margin:3px 0; }
.prose b{ color:var(--lamp-core); font-weight:600; }
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.steps li{ display:flex; gap:12px; align-items:flex-start; }
.stepn{ flex:0 0 28px; height:28px; border-radius:50%; background:var(--lamp-core); color:var(--card-ink); font-weight:700; display:grid; place-items:center; font-size:var(--fs-xs); }
.stub h2{ margin-bottom:6px; } .stub .meta{ white-space:pre-line; font:var(--fs-xs)/1.4 ui-monospace,Menlo,monospace; color:var(--ink-muted); margin:8px 0 12px; }
.versionline{ display:inline-block; min-height:44px; padding:10px 0; color:var(--ink-muted); font-size:var(--fs-xs); background:none; border:0; text-align:left; }

/* ---------- Rules (S21) ---------- */
.rules-page{ min-height:340px; }
.rules-page .illus{ background:rgba(0,0,0,.26); border-radius:12px; padding:4px; margin:0 -12px 12px; display:flex; justify-content:center; }
.rules-page .illus svg{ width:100%; max-width:340px; height:auto; display:block; }
.rules-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rules-dots{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.rules-dots button{ min-width:44px; min-height:44px; border-radius:12px; border:1.5px solid var(--panel-edge); background:transparent; font-weight:600; }
.rules-dots button[aria-current="page"]{ background:var(--lamp-core); color:var(--card-ink); border-color:var(--lamp-core); }
.rules-jump{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rules-jump button{ width:100%; min-height:48px; text-align:left; background:none; border:0; border-top:1px solid rgba(233,221,190,.14); padding:8px 4px; font-weight:600; display:flex; gap:10px; align-items:center; }
.rules-jump li:first-child button{ border-top:0; } .rules-jump button[aria-current="page"]{ color:var(--lamp-core); }
.keyline{ border-left:4px solid var(--lamp-core); background:rgba(255,210,122,.1); padding:8px 12px; border-radius:0 10px 10px 0; font-weight:600; }

/* ---------- result-screen tip line (K3 placement 3) ---------- */
.tipline{ display:flex; align-items:center; justify-content:center; gap:2px; font-size:var(--fs-xs); color:var(--ink-muted); }
.tipline .tiplink{ background:none; border:0; padding:10px 6px; min-height:44px; color:var(--ink-muted); font-weight:500; text-decoration:underline; text-underline-offset:3px; font-size:inherit; }
.tipline .tipx{ background:none; border:0; min-width:44px; min-height:44px; color:var(--ink-muted); font-size:var(--fs-xl); line-height:1; }

/* ---------- sheets (S7-S11) ---------- */
.sheet-back{ position:fixed; inset:0; z-index:42; display:flex; align-items:flex-end; justify-content:center; background:var(--scrim); animation:fade-in var(--anim) ease-out; }
.sheet-back.board{ top:calc(var(--sat) + var(--strip-h) + var(--gap)); background:rgba(8,17,29,.5); }   /* §9.2: sheets never cover the strip */
.sheet-back.out{ opacity:0; transition:opacity 160ms; }
.sheet{ position:relative; width:100%; max-width:520px; max-height:min(86dvh,720px); display:flex; flex-direction:column; background:var(--panel-solid); color:var(--ink);
  border:1px solid var(--panel-edge); border-bottom:0; border-radius:20px 20px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.45);
  padding:6px calc(var(--sar) + 16px) calc(var(--sab) + 14px) calc(var(--sal) + 16px); animation:sheet-in var(--anim) ease-out; }
.sheet-back.board .sheet{ max-height:100%; }
.sheet.tall{ height:min(92dvh,760px); }
.sheet-grab{ align-self:center; width:40px; height:4px; border-radius:2px; background:var(--panel-edge); margin:2px 0 6px; flex:0 0 auto; }
.sheet-head{ display:flex; align-items:center; gap:10px; min-height:48px; flex:0 0 auto; }
.sheet-title{ flex:1; font-size:var(--fs-xl); }
.sheet-x{ flex:0 0 auto; width:48px; height:48px; border:0; border-radius:12px; background:rgba(246,235,208,.1); font-size:var(--fs-xxl); line-height:1; }
.sheet-body{ overflow:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; padding-bottom:6px; }
@keyframes sheet-in{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- confirm dialog ---------- */
.dialog-back{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:var(--scrim); animation:fade-in var(--anim) ease-out; }
.dialog{ width:100%; max-width:380px; background:var(--panel-solid); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:18px; box-shadow:0 6px 0 var(--bg-deep); }
.dialog h2{ margin-bottom:8px; } .dialog .dlg-btns{ justify-content:flex-end; margin-top:6px; } .dialog .dlg-btns .btn{ flex:1 1 120px; }

/* ---------- notices (sticky system strips), toasts, banners ---------- */
#notices{ position:fixed; z-index:60; left:0; right:0; top:var(--sat); display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 10px; pointer-events:none; }
.notice{ pointer-events:auto; display:flex; align-items:center; gap:8px; max-width:460px; width:100%; padding:8px 8px 8px 14px; border-radius:12px; background:#1E3556; border:1.5px solid var(--panel-edge); box-shadow:0 4px 0 var(--bg-deep); font-size:var(--fs-s); }
.notice.warn{ border-color:var(--warn); } .notice .nt{ flex:1; } .notice .nbtn{ min-height:44px; min-width:44px; padding:0 12px; border-radius:10px; border:0; background:rgba(246,235,208,.14); font-weight:600; }
#toasts{ position:fixed; z-index:70; left:0; right:0; bottom:calc(var(--sab) + 18px); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; padding:0 16px; }
.toasts.in-host{ position:absolute; left:0; right:0; bottom:4px; display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; z-index:30; }
.toast{ max-width:min(92vw,420px); padding:10px 16px; border-radius:12px; background:var(--card); color:var(--card-ink); font-weight:600; font-size:var(--fs-s); box-shadow:0 4px 0 var(--bg-deep); animation:toast-in var(--anim) ease-out; }
.toast.good{ background:#DDF3D6; } .toast.warn{ background:#FFE3BE; }
@keyframes toast-in{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
.banner{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:35; padding:12px 16px; text-align:center; font-weight:700; font-size:var(--fs-xl);
  background:var(--card); color:var(--card-ink); border-top:4px solid var(--seat,var(--lamp-core)); border-bottom:4px solid var(--seat,var(--lamp-core)); box-shadow:0 5px 0 var(--bg-deep); pointer-events:none; animation:banner-in var(--anim) ease-out; }
.banner.lamp{ background:var(--lamp-core); } .banner.warn{ background:#FFE3BE; } .banner.good{ background:#DDF3D6; --seat:var(--good); } .banner.out{ opacity:0; transition:opacity 160ms; }
@keyframes banner-in{ from{ transform:translateY(-70%); opacity:0; } to{ transform:translateY(-50%); opacity:1; } }
#edgeflash{ position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0; box-shadow:inset 0 0 0 8px rgba(255,210,122,.55), inset 0 0 36px 8px rgba(255,210,122,.28); }
#edgeflash.on{ animation:edgeflash 140ms ease-out; } @keyframes edgeflash{ 0%{opacity:.85} 100%{opacity:0} }

/* ---------- the §9.2 phone grid for the board screen (S05) ----------
   <div class="bs"> strip / board / seats / hand / actions </div>  at 360x640: 112 + board + 48 + 84 + 52 with 6 px gaps.
   Extra height goes to the board. Nothing overlaps the board in normal play. Landscape / tablet: board left (max 60%), the rest right. */
.bs{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:var(--strip-h) minmax(0,1fr) var(--seatbar-h) var(--hand-h) var(--actions-h);
  grid-template-areas:"strip" "board" "seats" "hand" "actions"; gap:var(--gap); width:100%; max-width:560px; height:100dvh; margin:0 auto;
  padding:calc(var(--sat) + 4px) calc(var(--sar) + 4px) calc(var(--sab) + 4px) calc(var(--sal) + 4px); overflow:hidden; }
.bs-strip{ grid-area:strip; min-height:0; } .bs-board{ grid-area:board; min-height:0; min-width:0; position:relative; } .bs-seats{ grid-area:seats; min-height:0; }
.bs-hand{ grid-area:hand; min-height:0; } .bs-actions{ grid-area:actions; min-height:0; display:flex; align-items:center; gap:8px; }
.bs-board svg{ display:block; width:100%; height:100%; }
html[data-lefty] .bs-actions{ flex-direction:row-reverse; }
.bs-ph{ border:1.5px dashed var(--panel-edge); border-radius:10px; display:grid; place-items:center; color:var(--ink-muted); font-size:var(--fs-xs); background:rgba(0,0,0,.18); }
.bs-actions .btn{ min-height:44px; }
@media (orientation:landscape) and (min-width:700px){
  .bs{ max-width:none; grid-template-columns:minmax(0,60%) minmax(0,1fr); grid-template-rows:var(--strip-h) var(--seatbar-h) minmax(0,1fr) var(--actions-h);
    grid-template-areas:"board strip" "board seats" "board hand" "board actions"; }
  .bs-hand{ align-self:start; min-height:var(--hand-h); }
  .sheet-back.board{ top:0; }
}

/* ---------- motion preferences ---------- */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:var(--anim)!important; scroll-behavior:auto!important; }
html[data-speed="instant"] *, html[data-speed="instant"] *::before, html[data-speed="instant"] *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:0s!important; scroll-behavior:auto!important; }
@media (prefers-reduced-motion:reduce){ html:not([data-motion="full"]) .lantern .flame, html:not([data-motion="full"]) .tapnote{ animation:none; } }

/* ---------- desktop / landscape ---------- */
@media (min-width:700px){ .screen{ padding-top:calc(var(--sat) + 24px); } }
@media (orientation:landscape) and (max-height:520px){ .wordmark svg{ width:220px; } .screen{ padding-top:8px; } .titlescreen{ gap:12px; } }