/* Hushed Halls: tokens (SPEC §10.1), page shell, menu components, layout bands (§9.4). cards.css and table.css (other agents)
   add card/frame/table styles on top; they may use every token and the .stage / .band-* classes defined here. */
:root{
  --night-1:#1E1B3A; --night-2:#2E2A5C; --moon:#F6EFD8; --paper:#F4EBDD; --paper-2:#E3D5C1; --paper-shadow:rgba(18,15,38,.35);
  --card:#FBF7F0; --ink:#231F35; --door:#3A3646; --door-edge:#57526A; --brass:#C9A55A;
  --band-lantern:#E8B23A; --band-empty:#D9CFBC; --band-faint:#2FA39A; --band-rattle:#8C6BD8; --band-howl:#F0715A;
  --hushed:#6E6886; --ui-text:#F3F0FF; --ui-muted:#B3ADD3; --good:#5FD39A; --warn:#FFB547;
  /* app-level helpers */
  --panel:rgba(46,42,92,.72); --panel-edge:rgba(179,173,211,.22); --focus:#F6EFD8;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-num:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --anim:250ms;                               /* main.js sets 250 / 120 / 0 from Settings */
  --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);
  /* scaling unit (§9.4): 1 design px at 375×667; capped so desktop stays a phone-shaped column (≤ 480 px) */
  --u:min(calc(100vw / 375), calc(100dvh / 667), 1.28px);
  --numeral-scale:1;
}
html[data-big="1"]{ --numeral-scale:1.15; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--night-1); }
html,body{ margin:0; padding:0; height:100%; }
body{
  font:400 16px/1.4 var(--font-ui); color:var(--ui-text);
  background:radial-gradient(120% 60% at 80% -10%, rgba(246,239,216,.10) 0, rgba(246,239,216,0) 60%), linear-gradient(180deg,var(--night-1) 0%,var(--night-2) 100%) fixed;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
/* the moon: a quiet disc behind everything (decoration only, no animation) */
body::before{ content:""; position:fixed; right:calc(var(--sar) + 12px); top:calc(var(--sat) + 10px); width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%, #fffbe9 0, var(--moon) 55%, #d9d0b3 100%); opacity:.1; pointer-events:none; z-index:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--moon); }
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:.2px; }
h1{ font-size:26px; font-weight:800; } h2{ font-size:20px; font-weight:800; } h3{ font-size:17px; font-weight:700; }
p{ margin:0 0 10px; }
.dim{ color:var(--ui-muted); } .small{ font-size:14px; } .center{ text-align:center; }
.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; }

/* ---------- 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(--ui-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:22px; }
.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; }
.sticky-bottom{ position:sticky; bottom:0; padding:12px 0 calc(var(--sab) + 4px); margin-top:auto;
  background:linear-gradient(180deg,rgba(46,42,92,0) 0,rgba(46,42,92,.92) 38%); z-index:5; }

/* ---------- panels ---------- */
.panel{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px; padding:14px; box-shadow:0 4px 0 var(--paper-shadow); }
.panel.paper{ background:var(--paper); color:var(--ink); border-color:var(--paper-2); box-shadow:0 4px 0 var(--paper-shadow), inset 0 0 0 3px var(--paper-2); }
.panel h2{ margin-bottom:8px; }
.panel .lead{ color:var(--ui-muted); margin-bottom:8px; }
details.panel > summary{ list-style:none; cursor:pointer; min-height:44px; font-weight:700; display:flex; align-items:center; gap:8px; }
details.panel > summary::-webkit-details-marker{ display:none; }
details.panel > summary::after{ content:"▾"; margin-left:auto; color:var(--ui-muted); }
details.panel[open] > summary::after{ content:"▴"; }
details.panel[open] > summary{ margin-bottom:10px; }

/* ---------- buttons (all ≥ 44 px tall, immediate press feedback) ---------- */
.btn{ --bg:var(--paper); --fg:var(--ink); --edge:var(--paper-2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:48px; padding:10px 18px;
  border:0; border-radius:14px; background:var(--bg); color:var(--fg); font-weight:800; font-size:17px; line-height:1.15; text-align:center;
  box-shadow:0 4px 0 var(--paper-shadow), inset 0 -3px 0 var(--edge); position:relative; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  transition:transform 60ms ease, box-shadow 60ms ease, filter 60ms ease; text-decoration:none; }
.btn.pressed, .btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--paper-shadow), inset 0 -2px 0 var(--edge); filter:brightness(.94); }
.btn.big{ min-height:56px; font-size:19px; } .btn.wide{ width:100%; } .btn.small{ min-height:44px; padding:6px 14px; font-size:15px; }
.btn.primary{ --bg:var(--band-lantern); --fg:#2a1d00; --edge:#c18f1c; }
.btn.secondary{ --bg:rgba(244,235,221,.12); --fg:var(--ui-text); --edge:rgba(0,0,0,.18); border:1.5px solid rgba(244,235,221,.45); }
.btn.quiet{ --bg:transparent; --fg:var(--ui-text); --edge:transparent; box-shadow:none; border:1.5px solid var(--panel-edge); }
.btn.quiet.pressed{ box-shadow:none; transform:translateY(2px); }
.btn.danger{ --bg:#F0715A; --fg:#2b0b05; --edge:#b94c38; }
.btn.good{ --bg:var(--good); --fg:#06281a; --edge:#38a073; }
.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:13px; font-weight:600; opacity:.8; }
.btn.stacked{ flex-direction:column; gap:2px; }
.linkbtn{ background:none; border:0; padding:10px 6px; min-height:44px; min-width:44px; color:var(--moon); text-decoration:underline; text-underline-offset:3px; font-size:15px; font-weight:600; border-radius:10px; }
.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(179,173,211,.14); }
.toggle:first-child{ border-top:0; }
.toggle .tl{ display:flex; flex-direction:column; min-width:0; }
.toggle .tt{ font-weight:700; } .toggle .sub{ font-size:13px; color:var(--ui-muted); }
.seg{ display:inline-flex; background:rgba(0,0,0,.22); 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:15px; font-weight:700; --bg:transparent; --fg:var(--ui-muted); box-shadow:none; --edge:transparent; border-radius:10px; }
.seg .btn[aria-pressed="true"]{ --bg:var(--paper); --fg:var(--ink); box-shadow:0 2px 0 var(--paper-shadow); }
.seg .btn.pressed{ transform:translateY(1px); }
.btn.sw{ min-width:72px; min-height:44px; padding:6px 14px; font-size:15px; --bg:rgba(0,0,0,.28); --fg:var(--ui-muted); box-shadow:none; }
.btn.sw[aria-pressed="true"]{ --bg:var(--good); --fg:#06281a; }
.field{ display:flex; flex-direction:column; gap:4px; } .field > span{ font-size:14px; color:var(--ui-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,.28); color:var(--ui-text); font-size:17px; }
input.text:focus, textarea.text:focus{ border-color:var(--moon); }
input.code{ text-transform:uppercase; letter-spacing:.35em; text-align:center; font-family:var(--font-num); font-weight:800; font-size:22px; }
textarea.text{ min-height:96px; resize:vertical; font-size:15px; font-family:ui-monospace,Menlo,monospace; }
.err{ color:var(--warn); font-size:14px; } .err:empty{ display:none; } .okmsg{ color:var(--good); font-size:14px; }
.chip{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; border-radius:999px; background:rgba(0,0,0,.28); font-size:13px; font-weight:700; color:var(--ui-muted); }
.chip.good{ color:var(--good);} .chip.warn{ color:var(--warn);} .badge{ min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--band-howl); color:#2b0b05; font:800 13px/22px var(--font-num); text-align:center; }

/* ---------- Home ---------- */
.wordmark{ position:relative; text-align:center; padding:6px 0 0; }
.wordmark svg{ width:min(100%,290px); height:auto; display:block; margin:0 auto; overflow:visible; }
.wordmark .tag{ margin-top:2px; color:var(--ui-muted); font-size:14px; }
.menu{ display:flex; flex-direction:column; gap:10px; }
.menu > .btn{ width:100%; justify-content:space-between; text-align:left; padding-left:18px; padding-right:18px; }
.menu > .btn .lab{ display:flex; flex-direction:column; align-items:flex-start; } .menu > .btn .sub{ font-size:13px; font-weight:600; opacity:.78; }
.menu > .btn .go{ opacity:.55; font-size:22px; line-height:1; }
.menu > .btn[aria-disabled="true"] .sub{ color:inherit; }
.joinrow{ display:flex; gap:10px; } .joinrow input{ flex:1; min-width:0; } .joinrow .btn{ flex:0 0 auto; }
.foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 4px; margin-top:auto; padding-top:6px; }
.pack-note{ font-size:13px; color:var(--ui-muted); text-align:center; }

/* ---------- stat tiles, lists ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tile{ background:rgba(0,0,0,.24); border-radius:12px; padding:8px 6px; text-align:center; }
.tile b{ display:block; font:800 22px/1.1 var(--font-num); font-variant-numeric:tabular-nums; } .tile span{ font-size:12px; color:var(--ui-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(179,173,211,.14); min-height:40px; }
.list li:first-child{ border-top:0; }
.xpbar{ height:12px; border-radius:6px; background:rgba(0,0,0,.35); overflow:hidden; } .xpbar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--band-lantern),#f6d27a); border-radius:6px; }
.book{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.badge-card{ background:rgba(0,0,0,.24); border-radius:12px; padding:10px; min-height:76px; border:1.5px dashed rgba(179,173,211,.25); }
.badge-card.got{ background:var(--paper); color:var(--ink); border:1.5px solid var(--paper-2); box-shadow:0 3px 0 var(--paper-shadow); }
.badge-card b{ display:block; font-size:15px; } .badge-card small{ display:block; font-size:12.5px; opacity:.8; margin-top:2px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ min-height:56px; padding:6px 12px; border-radius:12px; background:rgba(0,0,0,.24); border:1.5px solid transparent; text-align:left; font-weight:700; font-size:14px; flex:1 1 40%; }
.opt[aria-pressed="true"]{ border-color:var(--moon); background:rgba(246,239,216,.14); }
.opt[aria-disabled="true"]{ opacity:.5; } .opt small{ display:block; font-weight:500; color:var(--ui-muted); font-size:12px; }
.seatrow{ display:flex; flex-direction:column; gap:8px; padding:10px; background:rgba(0,0,0,.2); border-radius:12px; }
.seatrow .num{ flex:0 0 28px; height:28px; border-radius:50%; background:var(--paper); color:var(--ink); font:800 15px/28px var(--font-num); text-align:center; }
.seatrow .line{ display:flex; gap:8px; align-items:center; }
.prose h2{ margin:18px 0 6px; font-size:19px; } .prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ font-size:16px; line-height:1.5; } .prose ul{ margin:0 0 10px; padding-left:20px; } .prose li{ margin:3px 0; }
.prose table{ border-collapse:collapse; width:100%; margin:6px 0 10px; font-size:14.5px; } .prose th,.prose td{ border:1px solid rgba(179,173,211,.25); padding:5px 8px; text-align:left; vertical-align:top; } .prose th{ background:rgba(0,0,0,.2); }
.prose b{ color:var(--moon); }
.codebox{ font:800 24px/1.2 var(--font-num); letter-spacing:.12em; text-align:center; padding:14px 8px; background:var(--paper); color:var(--ink); border-radius:12px; user-select:all; -webkit-user-select:all; }

/* ---------- 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:#2c2858; border:1.5px solid var(--panel-edge); box-shadow:0 4px 0 var(--paper-shadow); font-size:15px; }
.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(244,235,221,.14); font-weight:700; }
#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-band{ 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(--paper); color:var(--ink); font-weight:700; font-size:15px; box-shadow:0 4px 0 var(--paper-shadow); animation:toast-in var(--anim) ease-out; }
.toast.good{ background:#d6f5e6; } .toast.warn{ background:#ffe6bd; }
@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:800; font-size:20px;
  background:var(--paper); color:var(--ink); border-top:4px solid var(--seat,var(--band-lantern)); border-bottom:4px solid var(--seat,var(--band-lantern)); box-shadow:0 5px 0 var(--paper-shadow); pointer-events:none; animation:banner-in var(--anim) ease-out; }
.banner.dawn{ background:var(--band-lantern); color:#2a1d00; --seat:#fff3c4; } .banner.warn{ background:#ffe6bd; } .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 10px var(--moon), inset 0 0 40px 10px rgba(246,239,216,.5); }
#edgeflash.on{ animation:edgeflash 120ms ease-out; } @keyframes edgeflash{ 0%{opacity:.9} 100%{opacity:0} }

/* ---------- table stage + bands (§9.4). The table agent builds inside .stage; sizes scale with --u ---------- */
.stage{ position:relative; width:calc(375 * var(--u)); height:calc(667 * var(--u)); margin:0 auto; display:flex; flex-direction:column; overflow:hidden;
  padding-left:var(--sal); padding-right:var(--sar); }
.band-header{ flex:0 0 calc(36 * var(--u)); padding-top:0; display:flex; align-items:center; gap:calc(8 * var(--u)); }
.band-opp{ flex:0 0 calc(184 * var(--u)); position:relative; }
.band-table{ flex:0 0 calc(108 * var(--u)); position:relative; }
.band-you{ flex:0 0 calc(330 * var(--u)); position:relative; padding-bottom:var(--sab); }
html[data-left="1"] .band-table{ direction:rtl; } html[data-left="1"] .band-table > *{ direction:ltr; }
.numeral{ font-family:var(--font-num); font-weight:800; font-variant-numeric:tabular-nums; font-size:calc(46px * var(--numeral-scale)); }
.noselect{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* ---------- misc ---------- */
.qr{ background:#FBF7F0; padding:8px; border-radius:12px; display:inline-block; } .qr svg{ display:block; }
.stub h2{ margin-bottom:6px; } .stub .meta{ white-space:pre-line; font:13px/1.4 ui-monospace,Menlo,monospace; color:var(--ui-muted); margin:8px 0 12px; }
hr.sep{ border:0; border-top:1px solid rgba(179,173,211,.18); margin:12px 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:.01ms!important; scroll-behavior:auto!important; }

/* ---------- desktop / landscape ---------- */
@media (min-width:700px){ .screen{ padding-top:calc(var(--sat) + 24px); } body::before{ right:12vw; top:36px; width:56px; height:56px; } }
@media (orientation:landscape) and (max-height:520px){ .wordmark svg{ width:220px; } .screen{ padding-top:8px; } }
.seatrow .seg{ max-width:none; width:100%; justify-content:stretch; } .seatrow .seg .btn{ flex:1 1 0; padding-left:6px; padding-right:6px; }
.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; }
.seatrow .line input.text{ flex:1 1 auto; min-width:0; } .seatrow .line .seg{ width:auto; }