/* Hushed Halls: the in-game table (S08-S13, S22, S23). Owner: table agent.
   Layout = SPEC 9.4: a 375x667 design box scaled by --u. Every size below is `calc(N * var(--u))`.
   Cards, doors, frames and all card motion come from cards.css (look agent); this file only places them. */

.tableroot{
  --u:min(calc(100vw / 375), calc((100dvh - var(--sat) - var(--sab)) / 667), 1.4px);
  position:fixed; inset:0; z-index:1; overflow:hidden; display:flex; align-items:flex-start; justify-content:center;
  padding-top:var(--sat); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  font-size:calc(14 * var(--u)); touch-action:manipulation;
}
.tableroot .hh-backdrop{ position:fixed; inset:0; z-index:0; }
.tableroot .stage{ z-index:2; background:transparent; --u:inherit; }
.tableroot.is-reveal .hh-backdrop .hh-dawn-layer{ opacity:1; }
.tableroot button{ -webkit-tap-highlight-color:transparent; }
.tableroot .stage{ width:calc(375 * var(--u)); height:calc(667 * var(--u)); }
.tableroot .stage > *{ min-height:0; }

/* ============ header (36) ============ */
.t-head{ position:relative; z-index:8; flex:0 0 calc(36 * var(--u)); display:flex; align-items:center; gap:calc(6 * var(--u)); padding:0 calc(6 * var(--u)); }
.t-round{ font:800 calc(15 * var(--u))/1 var(--font-num); letter-spacing:.02em; padding:calc(3 * var(--u)) calc(9 * var(--u)); border-radius:99px; background:rgba(18,15,38,.55); white-space:nowrap; }
.t-room{ font:800 calc(14 * var(--u))/1 var(--font-num); letter-spacing:.18em; color:var(--ui-muted); padding-left:calc(4 * var(--u)); }
.t-sp{ flex:1; }
.t-hbtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:calc(5 * var(--u)); height:calc(48 * var(--u)); min-width:calc(48 * var(--u)); margin-top:calc(-2 * var(--u));
  padding:0 calc(10 * var(--u)); border:0; border-radius:calc(14 * var(--u)); background:transparent; color:var(--ui-text);
  font:800 calc(13 * var(--u))/1 var(--font-num); letter-spacing:.06em; cursor:pointer;
}
.t-hbtn::before{ content:""; position:absolute; left:0; right:0; top:calc(7 * var(--u)); bottom:calc(7 * var(--u)); border-radius:99px; background:rgba(18,15,38,.55); z-index:-1; }
.t-hbtn:active::before, .t-hbtn.is-pressed::before{ background:rgba(246,239,216,.28); }
.t-hbtn .t-dots{ font-size:calc(22 * var(--u)); line-height:1; letter-spacing:0; }
.t-hbtn svg{ width:calc(14 * var(--u)); height:calc(14 * var(--u)); }

/* ============ opponents (184) ============ */
.t-opp{ flex:0 0 calc(184 * var(--u)); position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; padding:calc(var(--oppt, 0) * var(--u)) calc(var(--oppad, 0) * var(--u)) 0; }
.t-oprow{ display:flex; justify-content:center; align-items:flex-start; width:100%; }
.t-mini{
  position:relative; display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:calc(var(--slotw) * var(--u)); height:calc(var(--sloth) * var(--u)); padding:0; margin:0; border:0; background:transparent; color:var(--ui-text);
  cursor:pointer; font:inherit; border-radius:calc(8 * var(--u));
}
.t-mini:active, .t-mini.is-pressed{ filter:brightness(.8); transform:translateY(calc(1 * var(--u))); }
.t-mini[disabled]{ cursor:default; }
.t-mini.is-pick{ outline:calc(2.5 * var(--u)) solid var(--band-lantern); outline-offset:calc(-1 * var(--u)); }
.t-mini .t-lbl{ height:calc(var(--lblh, 18) * 1px * var(--uu)); }
.t-mlbl{
  display:flex; align-items:center; justify-content:center; gap:calc(2 * var(--u)); width:100%; height:calc(var(--lblh) * var(--u)); white-space:nowrap; position:relative;
  font:800 calc(var(--lblfs) * var(--u))/1 var(--font-ui); color:var(--ui-text);
}
.t-mlbl .t-nm{ overflow:hidden; text-overflow:clip; max-width:calc(var(--nmw) * var(--u)); }
.t-score{
  display:inline-block; min-width:calc(var(--pillw) * var(--u)); padding:calc(1.5 * var(--u)) calc(4 * var(--u)); border-radius:99px; background:var(--paper); color:var(--ink); text-align:center;
  font:800 calc(var(--pillfs) * var(--u))/1.05 var(--font-num); font-variant-numeric:tabular-nums; box-shadow:0 calc(1.5 * var(--u)) 0 var(--paper-shadow);
}
.t-score.is-neg{ background:#cdeede; }
.t-botchip{ display:inline-block; padding:calc(1 * var(--u)) calc(3 * var(--u)); border-radius:calc(4 * var(--u)); background:rgba(179,173,211,.3); font:800 calc(7.5 * var(--u))/1 var(--font-ui); letter-spacing:.05em; color:var(--ui-text); }
.t-flag{ display:inline-flex; align-items:center; }
.t-flag svg{ width:calc(11 * var(--u)); height:calc(11 * var(--u)); }
.t-away{ display:inline-block; width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:50%; background:var(--warn); }
.t-play{ font-size:calc(9 * var(--u)); color:var(--seatc, var(--moon)); }
.t-mini .hh-board{ margin-top:calc(var(--roof, 6) * var(--u)); }

/* ============ boards ============ */
.hh-board{ position:relative; isolation:isolate; width:calc(var(--bw) * var(--u)); height:calc(var(--bh) * var(--u)); flex:0 0 auto; }
.hh-board .t-cells{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--cols), 1fr); grid-template-rows:repeat(var(--rows), 1fr); gap:calc(var(--gap) * var(--u)); }
.hh-board .t-cells > .hh-card{ width:100%; height:100%; aspect-ratio:auto; }
.hh-board .hh-card{ transition:transform var(--dur-lift) ease-out, box-shadow var(--dur-lift) ease-out, filter var(--dur-lift) ease-out, opacity 120ms; }
.hh-board[data-cols="4"][data-size="own"] .hh-card{ --s-num:51; }
.hh-board .hh-card.is-cand{ cursor:pointer; }
.hh-board .hh-card.is-cand:not(.is-staged):not(.is-selected){ box-shadow:0 calc(2 * var(--u)) 0 var(--paper-shadow), 0 0 0 calc(2.2 * var(--u)) rgba(246,239,216,.8); }
.hh-board .hh-card.is-block{ cursor:default; }
.hh-board .hh-card.is-dim{ opacity:.5; }
.hh-board .t-stagedlbl{ position:absolute; left:0; right:0; bottom:calc(3 * var(--u)); text-align:center; font:800 calc(11 * var(--u))/1 var(--font-ui); color:var(--moon); letter-spacing:.06em; pointer-events:none; text-shadow:0 1px 2px #000; }
.hh-card.is-pressed{ transform:translateY(calc(1.5 * var(--u))) scale(.985); filter:brightness(.92); }
.t-ov{ position:absolute; inset:0; pointer-events:none; z-index:20; }
.t-ov .hh-stamp{ position:absolute; left:50%; top:50%; margin:0; translate:-50% -50%; }

/* ============ table band (108) ============ */
.t-table{ flex:0 0 calc(108 * var(--u)); position:relative; display:flex; align-items:flex-start; gap:calc(8 * var(--u)); padding:calc(8 * var(--u)) calc(10 * var(--u)) 0; }
.t-pile{
  position:relative; flex:0 0 calc(68 * var(--u)); width:calc(68 * var(--u)); height:calc(92 * var(--u)); padding:0; margin:0; border:0; background:transparent; cursor:pointer; border-radius:calc(7 * var(--u));
  font:inherit; color:inherit;
}
.t-pile > .hh-card{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.t-pile.is-empty{ border:calc(2 * var(--u)) dashed var(--hushed); cursor:default; }
.t-pile .t-pcap{ position:absolute; left:0; right:0; bottom:calc(-1 * var(--u)); text-align:center; font:800 calc(9.5 * var(--u))/1 var(--font-ui); letter-spacing:.08em; color:var(--ui-muted); text-transform:uppercase; pointer-events:none; }
.t-pile.is-act > .hh-card{ box-shadow:0 0 0 calc(2 * var(--u)) var(--moon), 0 0 calc(12 * var(--u)) calc(2 * var(--u)) rgba(246,239,216,.55); }
.t-pile.is-act::after, .t-slot.is-act::after{ content:none; }
.t-pile .t-ring{ position:absolute; right:calc(-8 * var(--u)); top:calc(-8 * var(--u)); width:calc(34 * var(--u)); height:calc(34 * var(--u)); display:flex; align-items:center; justify-content:center; z-index:6; pointer-events:none; background:rgba(18,15,38,.78); border-radius:50%; }
.t-pile .t-ring .hh-window svg{ width:calc(30 * var(--u)); height:calc(30 * var(--u)); }
.t-pile .t-ring .hh-window-bar{ width:calc(26 * var(--u)); }
.t-pile .t-seal{ position:absolute; left:0; right:0; top:calc(3 * var(--u)); text-align:center; font:800 calc(7.5 * var(--u))/1 var(--font-num); color:var(--paper); letter-spacing:.04em; opacity:.9; pointer-events:none; z-index:2; }
.t-slot{ position:relative; flex:0 0 calc(68 * var(--u)); width:calc(68 * var(--u)); height:calc(92 * var(--u)); border-radius:calc(7 * var(--u)); }
.t-slot.is-empty{ border:calc(2 * var(--u)) dashed rgba(110,104,134,.55); }
.t-slot > .hh-card{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.t-slot.is-held > .hh-card{ transform:translateY(calc(-4 * var(--u))); box-shadow:0 calc(7 * var(--u)) 0 var(--paper-shadow), 0 calc(12 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.35); }
.t-slot .t-who{ position:absolute; left:0; right:0; bottom:calc(-12 * var(--u)); text-align:center; font:800 calc(9.5 * var(--u))/1 var(--font-ui); letter-spacing:.06em; color:var(--ui-muted); pointer-events:none; }

.t-act{ position:relative; flex:1 1 auto; min-width:0; height:calc(92 * var(--u)); display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:calc(5 * var(--u)); }
html[data-left="1"] .t-table{ flex-direction:row-reverse; }
.t-hint{ font:700 calc(14 * var(--u))/1.2 var(--font-ui); color:var(--ui-text); text-align:left; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.t-hint b{ color:var(--moon); font-weight:800; }
.t-hint .t-sub{ display:block; font-weight:600; color:var(--ui-muted); font-size:calc(12 * var(--u)); margin-top:calc(2 * var(--u)); }
.t-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:calc(6 * var(--u)); min-height:calc(48 * var(--u)); min-width:calc(48 * var(--u)); padding:0 calc(14 * var(--u));
  border:0; border-radius:calc(14 * var(--u)); background:var(--paper); color:var(--ink); font:800 calc(16 * var(--u))/1.1 var(--font-ui); cursor:pointer;
  box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow), inset 0 calc(-3 * var(--u)) 0 var(--paper-2); transition:transform 60ms ease, box-shadow 60ms ease, filter 60ms;
}
.t-btn:active, .t-btn.is-pressed{ transform:translateY(calc(3 * var(--u))); box-shadow:0 0 0 var(--paper-shadow), inset 0 calc(-2 * var(--u)) 0 var(--paper-2); filter:brightness(.93); }
.t-btn.primary{ background:var(--band-lantern); color:#2a1d00; box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow), inset 0 calc(-3 * var(--u)) 0 #c18f1c; }
.t-btn.quiet{ background:rgba(244,235,221,.12); color:var(--ui-text); border:calc(1.5 * var(--u)) solid rgba(244,235,221,.4); box-shadow:none; }
.t-btn.good{ background:var(--good); color:#06281a; box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow), inset 0 calc(-3 * var(--u)) 0 #38a073; }
.t-btn.warn{ background:#ffe6bd; }
.t-btn[disabled], .t-btn[aria-disabled="true"]{ opacity:.5; }
.t-row{ display:flex; gap:calc(8 * var(--u)); align-items:center; }
.t-row > *{ flex:1 1 auto; }
.t-cnt{ font:800 calc(13 * var(--u))/1 var(--font-num); color:var(--moon); padding:calc(2 * var(--u)) calc(8 * var(--u)); border-radius:99px; background:rgba(18,15,38,.55); align-self:flex-start; }

/* SNAG pill (96x56) */
.t-snag{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:calc(6 * var(--u)); width:calc(96 * var(--u)); height:calc(56 * var(--u)); border:0; border-radius:calc(16 * var(--u));
  background:var(--seat-snag, var(--band-howl)); color:#1b0a06; font:900 calc(17 * var(--u))/1 var(--font-num); letter-spacing:.04em; cursor:pointer;
  box-shadow:0 calc(4 * var(--u)) 0 var(--paper-shadow), inset 0 calc(-4 * var(--u)) 0 rgba(0,0,0,.22); animation:t-snag-in 120ms ease-out both;
}
.t-snag small{ display:block; font-size:calc(11 * var(--u)); font-weight:800; opacity:.85; }
.t-snag .hh-window{ position:absolute; right:calc(-7 * var(--u)); top:calc(-7 * var(--u)); width:calc(30 * var(--u)); height:calc(30 * var(--u)); background:rgba(18,15,38,.85); border-radius:50%; align-items:center; justify-content:center; }
.t-snag .hh-window svg{ width:calc(28 * var(--u)); height:calc(28 * var(--u)); }
.t-snag .hh-window-bar{ width:calc(24 * var(--u)); }
.t-snag:active, .t-snag.is-pressed{ transform:translateY(calc(4 * var(--u))); box-shadow:0 0 0 var(--paper-shadow), inset 0 calc(-2 * var(--u)) 0 rgba(0,0,0,.22); }
.t-snag.is-claimed{ background:var(--good); }
.t-snag.is-lost{ background:rgba(179,173,211,.4); color:var(--ui-text); animation:none; }
@keyframes t-snag-in{ from{ transform:scale(.85); opacity:.3; } to{ transform:none; opacity:1; } }
.t-cancel{ position:absolute; }

/* undo pill row */
.t-undo{ display:flex; gap:calc(8 * var(--u)); align-items:center; }
.t-undo .hh-undo{ min-height:calc(48 * var(--u)); min-width:calc(48 * var(--u)); font-size:calc(15 * var(--u)); }
.t-undo .hh-undo svg{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); }

/* ============ you band (330) ============ */
.t-you{ flex:0 0 calc(330 * var(--u)); position:relative; display:flex; flex-direction:column; align-items:center; padding-bottom:var(--sab); }
.t-you .hh-board{ margin-top:calc(var(--roof, 30) * var(--u)); }
.t-ylbl{
  position:absolute; left:calc(14 * var(--u)); top:0; z-index:6; display:flex; align-items:center; gap:calc(7 * var(--u)); height:calc(26 * var(--u)); padding:0 calc(10 * var(--u)) 0 calc(7 * var(--u)); border-radius:99px;
  background:rgba(18,15,38,.82); font:800 calc(15 * var(--u))/1 var(--font-ui); white-space:nowrap; max-width:calc(250 * var(--u));
}
.t-ylbl .t-nm{ max-width:calc(100 * var(--u)); overflow:hidden; }
.t-ylbl .t-score{ font-size:calc(20 * var(--u)); min-width:calc(32 * var(--u)); padding:calc(1 * var(--u)) calc(7 * var(--u)); }
.t-ylbl .t-tot{ font:700 calc(12 * var(--u))/1 var(--font-num); color:var(--ui-muted); }
.t-ylbl .hh-stubs svg{ width:calc(11 * var(--u)); height:calc(14 * var(--u)); }
.t-ylbl .t-flag svg{ width:calc(16 * var(--u)); height:calc(16 * var(--u)); }
.t-ylbl .t-play{ font-size:calc(12 * var(--u)); }

/* paddles (One Phone) */
.t-paddle{
  position:absolute; z-index:9; width:calc(56 * var(--u)); height:calc(var(--ph, 88) * var(--u)); border:0; padding:0; background:rgba(46,42,92,.82); color:var(--ui-text); border-radius:calc(12 * var(--u));
  display:flex; align-items:center; justify-content:center; cursor:pointer; font:800 calc(12 * var(--u))/1 var(--font-ui); border:calc(2 * var(--u)) solid rgba(179,173,211,.35);
  box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow);
}
.t-paddle.is-left{ left:0; border-radius:0 calc(14 * var(--u)) calc(14 * var(--u)) 0; padding-left:var(--sal); width:calc(56 * var(--u) + var(--sal)); }
.t-paddle.is-right{ right:0; border-radius:calc(14 * var(--u)) 0 0 calc(14 * var(--u)); padding-right:var(--sar); width:calc(56 * var(--u) + var(--sar)); }
.t-paddle .t-pin{ display:flex; flex-direction:column; align-items:center; gap:calc(3 * var(--u)); }
.t-paddle.is-left .t-pin{ transform:rotate(-90deg); flex-direction:row; gap:calc(6 * var(--u)); }
.t-paddle.is-right .t-pin{ transform:rotate(90deg); flex-direction:row; gap:calc(6 * var(--u)); }
.t-paddle .t-pin svg{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.t-paddle .t-pn{ max-width:calc(64 * var(--u)); overflow:hidden; letter-spacing:.02em; }
.t-paddle:not(.is-live){ opacity:.55; }
.t-paddle.is-live{ background:var(--seatc, var(--band-howl)); color:#16100a; border-color:var(--moon); box-shadow:0 0 calc(14 * var(--u)) calc(3 * var(--u)) var(--seatc), 0 calc(3 * var(--u)) 0 var(--paper-shadow); animation:t-pad 700ms ease-in-out infinite alternate; }
.t-paddle.is-lantern{ background:rgba(232,178,58,.2); border-color:var(--band-lantern); opacity:1; }
.t-paddle.is-lantern.is-armed{ background:var(--band-lantern); color:#2a1d00; }
.t-paddle:active, .t-paddle.is-pressed{ filter:brightness(.8); }
@keyframes t-pad{ from{ transform:scale(1); } to{ transform:scale(1.04); } }
html[data-motion="reduced"] .t-paddle.is-live{ animation:none; }

/* ============ overlay panels (cut, scores, night end, menu, help, zoom) ============ */
.t-panel{ position:absolute; left:0; right:0; bottom:0; top:calc(36 * var(--u)); z-index:12; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:calc(6 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); gap:calc(8 * var(--u)); background:rgba(18,15,38,.0); }
.t-panel.is-solid{ background:linear-gradient(180deg, rgb(30,27,58), rgb(46,42,92)); }
.tableroot[data-mode="tutorial"] .t-head{ z-index:20; }
.t-cutstage{ margin-top:calc(14 * var(--u)); display:flex; flex-direction:column; align-items:center; gap:calc(14 * var(--u)); text-align:center; }
.t-cutdeck{ position:relative; width:calc(120 * var(--u)); height:calc(162 * var(--u)); padding:0; border:0; background:transparent; cursor:pointer; }
.t-cutdeck > .hh-card{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.t-cutdeck .hh-card + .hh-card{ transform:translate(calc(3 * var(--u)), calc(3 * var(--u))) rotate(2deg); z-index:-1; }
.t-sealtxt{ font:800 calc(24 * var(--u))/1 var(--font-num); letter-spacing:.06em; color:var(--moon); }
.t-sealsub{ font:600 calc(13 * var(--u))/1.3 var(--font-ui); color:var(--ui-muted); max-width:calc(280 * var(--u)); }
.t-chips{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--u)); justify-content:center; max-width:calc(340 * var(--u)); }
.t-chip{ display:inline-flex; align-items:center; gap:calc(5 * var(--u)); padding:calc(5 * var(--u)) calc(10 * var(--u)); border-radius:99px; background:rgba(18,15,38,.7); border:calc(2 * var(--u)) solid var(--seatc, var(--panel-edge)); font:800 calc(13 * var(--u))/1 var(--font-num); color:var(--ui-text); }
.t-chip.is-wait{ opacity:.55; border-style:dashed; }
.t-chip svg{ width:calc(14 * var(--u)); height:calc(14 * var(--u)); }
.t-big{ font:900 calc(26 * var(--u))/1.1 var(--font-num); text-align:center; }
.t-sm{ font:600 calc(13 * var(--u))/1.35 var(--font-ui); color:var(--ui-muted); text-align:center; }

/* reveal hint */
.t-revhint{ position:absolute; left:calc(14 * var(--u)); right:calc(14 * var(--u)); bottom:calc(10 * var(--u) + var(--sab)); z-index:14; display:flex; align-items:center; justify-content:center; min-height:calc(48 * var(--u)); border:0; border-radius:calc(16 * var(--u));
  background:var(--paper); color:var(--ink); font:900 calc(17 * var(--u))/1 var(--font-num); box-shadow:0 calc(4 * var(--u)) 0 var(--paper-shadow); animation:t-snag-in 160ms ease-out both; cursor:pointer; }
.t-revhint:active{ transform:translateY(calc(3 * var(--u))); }
.t-revtag{ position:absolute; top:calc(40 * var(--u)); left:50%; translate:-50% 0; z-index:13; padding:calc(5 * var(--u)) calc(14 * var(--u)); border-radius:99px; background:var(--paper); color:var(--ink); font:900 calc(15 * var(--u))/1 var(--font-num); letter-spacing:.04em; box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow); pointer-events:none; }

/* scores (S12) */
.t-scores{ width:100%; display:flex; flex-direction:column; gap:calc(5 * var(--u)); overflow:auto; max-height:calc(478 * var(--u)); padding-bottom:calc(2 * var(--u)); }
.t-srow{ display:grid; grid-template-columns:calc(26 * var(--u)) 1fr auto; align-items:center; gap:calc(8 * var(--u)); padding:calc(6 * var(--u)) calc(9 * var(--u)); background:rgba(244,235,221,.1); border-radius:calc(12 * var(--u)); border:calc(2 * var(--u)) solid transparent; }
.t-srow.is-me{ border-color:var(--seatc, var(--moon)); background:rgba(244,235,221,.16); }
.t-srow.is-best{ background:rgba(95,211,154,.16); }
.t-srow .t-sn{ font:800 calc(15 * var(--u))/1.1 var(--font-ui); display:flex; align-items:center; gap:calc(5 * var(--u)); }
.t-srow .t-lines{ grid-column:2 / 4; display:flex; flex-wrap:wrap; gap:calc(4 * var(--u)); }
.t-lchip{ display:inline-flex; align-items:center; gap:calc(3 * var(--u)); padding:calc(2.5 * var(--u)) calc(7 * var(--u)); border-radius:99px; background:rgba(18,15,38,.6); font:800 calc(12.5 * var(--u))/1 var(--font-num); color:var(--ui-text); font-variant-numeric:tabular-nums; }
.t-lchip.is-hushed{ color:var(--hushed-ink); }
.t-lchip.is-good{ color:var(--good); } .t-lchip.is-warn{ color:var(--warn); } .t-lchip.is-snag{ color:#ffd27a; }
.t-lchip small{ font-weight:700; opacity:.75; }
.t-rsc{ text-align:right; font-variant-numeric:tabular-nums; }
.t-rsc b{ display:block; font:900 calc(24 * var(--u))/1 var(--font-num); }
.t-rsc small{ display:block; font:700 calc(11.5 * var(--u))/1.2 var(--font-num); color:var(--ui-muted); }
.t-picks{ font:700 calc(12.5 * var(--u))/1.3 var(--font-ui); color:var(--ui-muted); text-align:center; }
.t-picks b{ color:var(--band-lantern); }
.t-foot{ margin-top:auto; width:100%; display:flex; flex-direction:column; gap:calc(8 * var(--u)); padding-bottom:var(--sab); }

/* podium (S13) */
.t-podium{ display:flex; align-items:flex-end; justify-content:center; gap:calc(8 * var(--u)); height:calc(150 * var(--u)); width:100%; position:relative; margin-top:calc(4 * var(--u)); }
.t-step{ flex:1 1 0; max-width:calc(92 * var(--u)); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:calc(3 * var(--u)); text-align:center; }
.t-step .t-blk{ width:100%; border-radius:calc(8 * var(--u)) calc(8 * var(--u)) 0 0; background:var(--paper); color:var(--ink); display:flex; align-items:flex-start; justify-content:center; padding-top:calc(5 * var(--u)); font:900 calc(22 * var(--u))/1 var(--font-num); box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow); }
.t-step.p1 .t-blk{ background:var(--band-lantern); }
.t-step .t-pnm{ font:800 calc(13 * var(--u))/1.1 var(--font-ui); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-step .t-ptot{ font:800 calc(15 * var(--u))/1 var(--font-num); color:var(--moon); }
.t-chart{ display:flex; flex-direction:column; gap:calc(3 * var(--u)); width:100%; }
.t-crow{ display:flex; align-items:center; gap:calc(5 * var(--u)); font:700 calc(11 * var(--u))/1 var(--font-num); color:var(--ui-muted); }
.t-crow i{ display:block; height:calc(8 * var(--u)); border-radius:99px; background:var(--seatc); opacity:.9; min-width:calc(3 * var(--u)); }
.t-crow span:first-child{ flex:0 0 calc(54 * var(--u)); color:var(--ui-text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.t-gain{ width:100%; display:flex; flex-direction:column; gap:calc(4 * var(--u)); }
.t-xpbar{ height:calc(10 * var(--u)); border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; }
.t-xpbar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--band-lantern),#f6d27a); }
.t-ghostrow{ display:flex; flex-wrap:wrap; gap:calc(6 * var(--u)); justify-content:center; }
.t-ghostrow .t-chip{ border-color:var(--band-lantern); color:var(--band-lantern); }
.t-tip{ font:600 calc(13 * var(--u))/1.3 var(--font-ui); color:var(--ui-muted); text-align:center; }
.t-tip a{ color:var(--moon); }

/* sheets: menu, help, zoom */
.t-scrim{ --u:min(calc(100vw / 375), calc((100dvh - var(--sat) - var(--sab)) / 667), 1.4px); position:fixed; inset:0; z-index:50; background:rgba(10,8,24,.55); display:flex; align-items:flex-end; justify-content:center; }
.t-scrim.is-center{ align-items:center; }
.t-sheet{
  width:min(100vw, calc(420 * var(--u))); max-height:86%; overflow:auto; padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u) + var(--sab)); background:var(--paper); color:var(--ink);
  border-radius:calc(22 * var(--u)) calc(22 * var(--u)) 0 0; box-shadow:0 calc(-6 * var(--u)) 0 var(--paper-shadow); font-size:calc(16 * var(--u)); display:flex; flex-direction:column; gap:calc(10 * var(--u));
  animation:t-sheet-in var(--dur-banner, 200ms) ease-out both;
}
@keyframes t-sheet-in{ from{ transform:translateY(30%); opacity:0; } to{ transform:none; opacity:1; } }
.t-sheet h2{ margin:0; font:900 calc(22 * var(--u))/1.15 var(--font-ui); }
.t-sheet p{ margin:0; font:500 calc(16 * var(--u))/1.4 var(--font-ui); }
.t-sheet .t-hrow{ display:flex; gap:calc(14 * var(--u)); align-items:center; }
.t-sheet .t-hpic{ flex:0 0 calc(92 * var(--u)); width:calc(92 * var(--u)); }
.t-sheet .t-hpic .hh-card{ width:100%; }
.t-sheet .t-hband{ display:inline-flex; align-items:center; gap:calc(6 * var(--u)); font:800 calc(14 * var(--u))/1 var(--font-ui); color:#4a4560; }
.t-sheet .t-hband svg{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.t-sheet .t-btn{ background:var(--ink); color:var(--paper); box-shadow:0 calc(3 * var(--u)) 0 rgba(18,15,38,.4); }
.t-sheet .t-btn.primary{ background:var(--band-lantern); color:#2a1d00; }
.t-sheet .t-btn.quiet{ background:transparent; color:var(--ink); border-color:rgba(35,31,53,.35); }
.t-sheet .t-btn.danger{ background:#F0715A; color:#2b0b05; }
.t-sheet .t-hist{ display:flex; gap:calc(6 * var(--u)); overflow-x:auto; padding:calc(4 * var(--u)) 0 calc(8 * var(--u)); }
.t-sheet .t-hist .hh-card{ flex:0 0 calc(54 * var(--u)); width:calc(54 * var(--u)); }
.t-sheet .t-menu{ display:flex; flex-direction:column; gap:calc(8 * var(--u)); }
.t-sheet .t-sealbox{ font:800 calc(20 * var(--u))/1.2 var(--font-num); letter-spacing:.05em; background:rgba(35,31,53,.07); border-radius:calc(10 * var(--u)); padding:calc(8 * var(--u)) calc(10 * var(--u)); text-align:center; word-break:break-all; }
.t-zoom{ display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--u)); padding-top:var(--sat); }
.t-zoomcard{ background:rgba(30,27,58,.96); border-radius:calc(22 * var(--u)); padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--u)); border:calc(2 * var(--u)) solid var(--seatc, var(--panel-edge)); max-width:100vw; }
.t-zoomcard .hh-board{ margin-top:calc(var(--roof, 30) * var(--u)); }
.t-zoomhead{ display:flex; align-items:center; justify-content:space-between; gap:calc(10 * var(--u)); width:100%; font:800 calc(18 * var(--u))/1 var(--font-ui); }
.t-zoomhead .t-score{ font-size:calc(24 * var(--u)); }
.t-zoomnote{ font:700 calc(14 * var(--u))/1.2 var(--font-ui); color:var(--moon); text-align:center; }
.t-zoomcard .t-btn{ width:100%; }

/* away / pause / bench banners */
.t-strip{ position:absolute; left:calc(8 * var(--u)); right:calc(8 * var(--u)); top:calc(38 * var(--u)); z-index:11; padding:calc(6 * var(--u)) calc(12 * var(--u)); border-radius:calc(12 * var(--u)); background:#ffe6bd; color:var(--ink); font:800 calc(14 * var(--u))/1.2 var(--font-ui); text-align:center; box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow); }
.t-pause{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(14 * var(--u)); background:rgba(18,15,38,.82); }
.t-pause .t-btn{ min-width:calc(180 * var(--u)); }

/* tutorial caption */
.t-caption{ position:absolute; left:calc(8 * var(--u)); right:calc(8 * var(--u)); top:calc(38 * var(--u)); z-index:13; padding:calc(6 * var(--u)) calc(12 * var(--u)); border-radius:calc(14 * var(--u)); background:var(--paper); color:var(--ink); font:800 calc(14.5 * var(--u))/1.2 var(--font-ui); text-align:center; box-shadow:0 calc(4 * var(--u)) 0 var(--paper-shadow); pointer-events:none; }
.t-skip{ position:absolute; z-index:15; right:calc(4 * var(--u)); top:calc(-2 * var(--u)); }

/* lantern chips on minis */
.t-picks-row{ position:absolute; left:0; right:0; bottom:calc(-5 * var(--u)); display:flex; justify-content:center; gap:calc(2 * var(--u)); pointer-events:none; z-index:7; }
.t-lchipmini{ display:inline-block; width:calc(11 * var(--u)); height:calc(11 * var(--u)); border-radius:50%; border:calc(1.5 * var(--u)) solid var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.4); }

/* focus rings for keyboard play */
.tableroot :focus-visible{ outline:calc(3 * var(--u)) solid var(--focus); outline-offset:calc(2 * var(--u)); }
html[data-kbd="1"] .hh-board .hh-card:focus{ outline:calc(3 * var(--u)) solid var(--focus); outline-offset:calc(1 * var(--u)); z-index:3; }

@media (orientation:landscape) and (max-height:520px){ .tableroot{ align-items:center; } }

/* tutorial: leave room at the top for the caption */
.tableroot[data-mode="tutorial"] .t-opp{ padding-top:calc(50 * var(--u)); }
.t-hidden{ visibility:hidden; }

.t-botg{ flex:0 0 auto; color:var(--ui-muted); opacity:.9; }
html:has(.tableroot), body:has(.tableroot){ overflow:hidden; height:100%; }

.t-snag.is-wait{ opacity:.55; animation:none; }
.t-pile.is-pressed > .hh-card, .t-slot.is-pressed > .hh-card{ filter:brightness(.85); transform:translateY(calc(2 * var(--u))); }
.t-ylbl.is-pressed, .t-hbtn.is-pressed{ filter:brightness(.8); }
/* Long Manor (78 px cells): keep the Flip band a full-size target (cards.css scales it with the card width) */
.hh-board[data-cols="4"] .hh-zone--flip{ height:calc(48 * var(--u)); }
.hh-board[data-cols="4"] .hh-zone--swap{ bottom:calc(48 * var(--u)); }

/* level-up card + Ghost Book stamps (Night end, juice #21/#22) and the Night-end tip line (§8.7) */
.t-lvl{ display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--u)); padding:calc(6 * var(--u)) calc(14 * var(--u)); border-radius:calc(14 * var(--u)); background:var(--paper); color:var(--ink); box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow); flex-wrap:wrap; }
.t-lvl .t-lvlk{ font:800 calc(13 * var(--u))/1 var(--font-ui); text-transform:uppercase; letter-spacing:.08em; }
.t-lvl .t-lvln{ font:900 calc(30 * var(--u))/1 var(--font-num); color:#8a5d00; }
.t-lvl .t-lvlu{ flex:1 0 100%; text-align:center; font:700 calc(12.5 * var(--u))/1.2 var(--font-ui); color:#4a4560; }
.t-stampchip{ background:var(--paper) !important; color:var(--ink) !important; border-color:var(--band-lantern) !important; }
.t-tip{ display:flex; align-items:center; justify-content:center; gap:calc(4 * var(--u)); min-height:calc(48 * var(--u)); }
.t-tip a{ display:inline-flex; align-items:center; min-height:calc(48 * var(--u)); }
.t-tipx{ min-width:calc(48 * var(--u)); min-height:calc(48 * var(--u)); border:0; background:transparent; color:var(--ui-muted); font:800 calc(22 * var(--u))/1 var(--font-ui); cursor:pointer; }

/* emote bubbles (over the sender's grid only) */
.t-bubble{ position:absolute; left:50%; top:10%; translate:-50% 0; z-index:21; max-width:96%; padding:calc(5 * var(--u)) calc(10 * var(--u)); border-radius:calc(14 * var(--u)); background:var(--paper); color:var(--ink);
  font:800 calc(15 * var(--u))/1.15 var(--font-ui); text-align:center; box-shadow:0 calc(3 * var(--u)) 0 var(--paper-shadow); pointer-events:none; display:flex; align-items:center; justify-content:center; }
.t-bubble::after{ content:""; position:absolute; left:50%; bottom:calc(-5 * var(--u)); translate:-50% 0; border:calc(6 * var(--u)) solid transparent; border-bottom:0; border-top-color:var(--paper); }
.hh-board[data-size="mini"] .t-bubble{ font-size:calc(9 * var(--u)); padding:calc(2 * var(--u)) calc(5 * var(--u)); border-radius:calc(8 * var(--u)); top:6%; }
.hh-board[data-size="mini"] .t-bubble .t-emoji{ width:calc(20 * var(--u)); height:calc(23 * var(--u)); }
.t-emobtn{ flex:0 0 auto; min-width:calc(56 * var(--u)); }
.t-sheet .t-emoji{ display:block; }

/* ============ landscape phones: opponents in a left rail (SPEC 9.4) ============
   Design box = rail 196 + column 375 wide, 36 + 108 + 330 = 474 tall, so the table scales ~40% larger than the portrait column shrunk to fit. */
.tableroot.is-land{ --u:min(calc(100vw / 571), calc((100dvh - var(--sat) - var(--sab)) / 474), 1.4px); align-items:center; padding-top:0; }
.tableroot.is-land .stage{ width:calc(571 * var(--u)); height:calc(474 * var(--u)); display:grid; grid-template-columns:calc(196 * var(--u)) calc(375 * var(--u)); grid-template-rows:calc(36 * var(--u)) calc(108 * var(--u)) calc(330 * var(--u)); padding-left:0; padding-right:0; }
.tableroot.is-land .t-opp{ grid-column:1; grid-row:1 / 4; flex:none; height:auto; padding:0; justify-content:center; }
.tableroot.is-land .t-oprow{ justify-content:center; }
.tableroot.is-land .t-head{ grid-column:2; grid-row:1; }
.tableroot.is-land .t-table{ grid-column:2; grid-row:2; }
.tableroot.is-land .t-you{ grid-column:2; grid-row:3; }
.tableroot.is-land .t-mini{ margin:calc(1 * var(--u)) 0; }
@media (orientation:landscape) and (max-height:520px){
  .t-scrim{ --u:min(calc(100vw / 375), calc((100dvh - var(--sat) - var(--sab)) / 500), 1.4px); }
  .t-sheet{ max-height:94%; }
}
.tableroot.is-land .t-panel{ overflow-y:auto; }
.tableroot.is-land .t-panel > *{ max-width:calc(420 * var(--u)); }
.tableroot.is-land .t-scores{ max-height:none; overflow:visible; }
.tableroot.is-land .t-foot{ margin-top:calc(8 * var(--u)); }
/* landscape: header buttons grow to 44 px (56 design px at the ~0.79 scale of a 375 px tall phone); the table band gives them the room */
.tableroot.is-land .t-hbtn{ height:calc(56 * var(--u)); min-width:calc(56 * var(--u)); margin-top:calc(-4 * var(--u)); }
.tableroot.is-land .t-hbtn::before{ top:calc(11 * var(--u)); bottom:calc(11 * var(--u)); }
.tableroot.is-land .t-table{ padding-top:calc(16 * var(--u)); }

/* quick chat sheet: two columns of lines, four columns of emotes, so Close stays on screen at 360 x 640 */
.t-sheet .t-chatgrid{ display:grid; grid-template-columns:1fr 1fr; gap:calc(8 * var(--u)); }
.t-sheet .t-chatgrid.t-emogrid{ grid-template-columns:repeat(4, 1fr); }
.t-sheet .t-chatgrid .t-btn{ padding:0 calc(6 * var(--u)); font-size:calc(15 * var(--u)); min-width:0; }