/* Codenames: Hub navy-slate tokens (Board and Card Games/Hub/index.html) */
:root {
  --bg: #0f1117; --bg-soft: #161923; --card: #1a1e2b; --card-hover: #212636; --line: #2a3042;
  --text: #e8eaf0; --muted: #969db4; --accent: #6ea8fe; --warm: #f0b354;
  --red: #e5544b; --red-d: #b83a33; --blue: #4d8dff; --blue-d: #2f66c9;
  --tan: #cdbb92; --tan-d: #a8956b; --ink: #2b2416; --paper: #efe6cf; --paper-d: #ddd0ae;
  --ass: #14151b; --good: #4ade80; --bad: #f87171;
  --tabh: 58px; --r: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden; overflow-x: clip;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input { font-size: 16px; } /* no iOS zoom */
.hidden { display: none !important; }

#app { height: 100vh; display: grid; grid-template-rows: auto 1fr var(--tabh); }
@supports (height: 100dvh) { #app { height: 100dvh; } }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); min-height: 48px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .02em; font-size: 17px; }
.brand svg { width: 26px; height: 26px; }
#topInfo { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ---------- tabs ---------- */
.tabs { display: flex; border-top: 1px solid var(--line); background: var(--bg-soft); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tabs button svg { width: 22px; height: 22px; }
.tabs button.on { color: var(--accent); }
.tabs button:active { transform: scale(.96); }

main { min-height: 0; position: relative; }
.tab { position: absolute; inset: 0; display: none; }
.tab.on { display: flex; }

/* ---------- stage: board + side panel ---------- */
.stage { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 8px 12px 0; gap: 6px; }
.boardwrap { flex-shrink: 0; }
.cluebar + .board { margin-top: 5px; }
.panel { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.bar { display: flex; align-items: center; gap: 8px; min-height: 36px; flex-shrink: 0; }
.bar .grow { flex: 1; min-width: 0; }

/* ---------- the table: wooden top from css/table.css, seen from your seat ---------- */
.boardwrap.tbl-surface {
  display: flex; flex-direction: column; gap: 4px; padding: 5px 7px 6px; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,220,170,.14), 0 6px 16px rgba(0,0,0,.45);
}
.boardwrap .bar { min-height: 34px; }
.boardwrap .bar .chip { background: rgba(20,14,8,.55); border-color: rgba(255,220,170,.18); }
.boardwrap .seg { background: rgba(20,14,8,.55); border-color: rgba(255,220,170,.18); }
.boardwrap .switch { color: #e8dcc4; }
/* seats across the table and yours at your edge: wooden name plates */
.across { display: flex; gap: 5px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; padding: 1px 2px 3px; }
.across::-webkit-scrollbar { display: none; }
.across > :first-child { margin-left: auto; } .across > :last-child { margin-right: auto; }
.plate { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 10.5px; line-height: 17px; padding: 1px 6px; transition: border-color .2s, box-shadow .2s; }
.plate .dot { width: 8px; height: 8px; }
.plate .cpu { width: 12px; height: 12px; opacity: .8; }
/* long or emoji names stop at a fixed plate width instead of pushing the other seats off the table */
.plate .pn { min-width: 0; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boardwrap { min-width: 0; }
/* phone: the table runs to the screen edges, under the header */
@media (max-width: 899px) {
  .boardwrap.tbl-surface { margin: -8px -12px 0; border-radius: 0 0 16px 16px; padding-left: 9px; padding-right: 9px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.4); }
}
/* seen from your chair: the far rows lean away a little */
.board { transform: perspective(1500px) rotateX(7deg); transform-origin: 50% 100%; }
.board.dealing { transform: none; }
.plate.turn { border-color: #f0c35a; box-shadow: 0 0 0 2px rgba(240,195,90,.45), 0 2px 4px rgba(0,0,0,.4); }
.myedge { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-shrink: 0; min-height: 20px; }
/* the clue slip between the two agent stacks */
.slips { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; flex-shrink: 0; }
.slips > .counts, .slips > .turnline { min-width: 52px; justify-content: center; }
/* agent card stacks (face up, thicker with more cards left) */
.counts { display: inline-flex; gap: 12px; align-items: center; }
.astack { position: relative; display: inline-flex; padding: 8px 6px 4px 0; flex: none; }
.astack .acard {
  position: relative; display: grid; place-items: center; width: 44px; aspect-ratio: 68 / 44; border-radius: 3px; color: #fff;
  transform: translateY(var(--rise, 0)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--tbl-stack, 0 1px 2px rgba(0,0,0,.4));
}
.astack .acard svg { width: 17px; height: 17px; opacity: .92; }
.astack.empty .acard { background: rgba(0,0,0,.12) !important; box-shadow: none; outline: 1.5px dashed rgba(255,255,255,.3); outline-offset: -1.5px; transform: none; }
.astack.empty .acard svg { display: none; }
.astack b { position: absolute; right: -2px; bottom: -2px; z-index: 2; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #1b1b1f; color: #fff; font: 800 12px/18px system-ui, sans-serif; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Duet timer tokens in a row; used ones turned over and dimmed */
.turnline { display: inline-flex; align-items: center; gap: 4px; }
.turnline .toks { display: inline-flex; }
.turnline .tok { width: 15px; height: 15px; border-radius: 50%; flex: none; margin-left: -6px; background: radial-gradient(circle at 35% 30%, #8fe0a6, #2e9d4f 60%, #1f6e37); box-shadow: inset 0 -1px 1px rgba(0,0,0,.35), 0 2px 0 #174d27, 0 3px 3px rgba(0,0,0,.4); }
.turnline .tok:first-child { margin-left: 0; }
.turnline .tok.used { background: radial-gradient(circle at 35% 30%, #c9b88f, #8f7c55); opacity: .35; }
.turnline b { font-size: 15px; font-weight: 800; color: #f3efe4; }

/* ---------- the board: 25 word cards at the real 68 x 44 mm shape ---------- */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; flex-shrink: 0; }
.card {
  position: relative; min-width: 0; aspect-ratio: 68 / 44; border-radius: 5px; padding: 0; color: var(--ink); overflow: visible;
  container-type: inline-size; /* print on the card scales with the card (cqw) */
  transform: translate(var(--jx, 0), var(--jy, 0)) rotate(var(--jr, 0deg));
  transition: transform .1s ease; outline: 2px solid transparent; outline-offset: 2px;
}
.card .wc {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #eee2c4, #ddcca2);
  box-shadow: inset 0 -3px 0 var(--edge, transparent), inset 0 0 0 1px rgba(110,85,40,.38), inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 0 #a8946a, 0 2px 0 var(--side, #8a7650), 0 3px 6px rgba(0,0,0,.45);
  transition: box-shadow .12s ease;
}
.card .wc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 40%, transparent 70%, rgba(0,0,0,.05)); }
/* top half: the word upside down for the far side, beside a small portrait stamp */
.card .wtop { flex: 1 1 46%; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 5px; transform: rotate(180deg); }
.card .stamp { flex: none; width: 9px; height: 8px; border: 1px solid rgba(80,60,30,.45); border-radius: 1px; background: radial-gradient(circle at 50% 36%, rgba(80,60,30,.5) 0 20%, transparent 23%), radial-gradient(ellipse 60% 45% at 50% 100%, rgba(80,60,30,.45) 0 98%, transparent 100%); }
.card .mirror { font-size: 6.5px; font-weight: 800; letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: rgba(60,45,20,.5); white-space: nowrap; overflow: hidden; }
/* bottom half: the white strip with the word */
.card .strip { flex: 1 1 54%; min-height: 0; margin: 0 3px 3px; border-radius: 2px; background: #fbf8ef; box-shadow: inset 0 0 0 1px rgba(110,85,40,.18); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* every word the same letter height, sized from the card; app.js fitText() squeezes a long word
   sideways to fit its strip (like condensed print) instead of shrinking it */
.card .w { position: relative; flex: none; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: clamp(10.5px, 17cqw, 30px); line-height: 1; white-space: nowrap; color: #1d1912; }
.card .w.l8, .card .w.l9 { letter-spacing: 0; }
.card:active:not(:disabled) { transform: translate(var(--jx, 0), calc(var(--jy, 0px) + 2px)) rotate(var(--jr, 0deg)); }
.card:active:not(:disabled) .wc { box-shadow: inset 0 -3px 0 var(--edge, transparent), inset 0 0 0 1px rgba(110,85,40,.38), 0 1px 0 #a8946a, 0 1px 3px rgba(0,0,0,.45); }
.card:disabled { cursor: default; }
.card.pick { outline-color: var(--warm); }
/* the spymaster's view of the key: each word card tinted, with a team edge */
.card.k-R .wc { background: linear-gradient(180deg, #f2ada3, #e08577); --edge: var(--red); --side: #9e3a33; }
.card.k-B .wc { background: linear-gradient(180deg, #bcd0f7, #8fb0f0); --edge: var(--blue); --side: #2f5aa8; }
.card.k-G .wc { background: linear-gradient(180deg, #c3e9c4, #93d398); --edge: #2e9d4f; --side: #23703a; }
.card.k-A .wc { background: linear-gradient(180deg, #3a3d4a, #1d1f27); --edge: #ff5d52; --side: #000; }
.card.k-A .mirror { color: rgba(255,255,255,.45); } .card.k-A .stamp { border-color: rgba(255,255,255,.4); filter: invert(1); }
.card.k-A .strip { background: #d9d9de; }
/* closeness heat for a typed clue */
.card .heat { position: absolute; left: 6px; right: 6px; top: 3px; height: 3px; border-radius: 2px; background: #d98a12; transform-origin: left; transition: transform .25s ease; z-index: 2; }

/* agent / bystander / assassin cards laid over a word, a little askew, by hand */
.cover-tile {
  position: absolute; inset: 0; z-index: 3; border-radius: 5px; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: translate(var(--cx, 0), var(--cy, 0)) rotate(var(--cr, 0deg));
  box-shadow: 0 1px 1px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25);
  animation: place .36s cubic-bezier(.3,.7,.3,1) both;
}
.cover-tile::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.32); border-radius: 3px; pointer-events: none; }
.cover-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 42%, transparent 70%, rgba(0,0,0,.08)); }
.cover-tile svg { position: relative; width: 20px; height: 20px; opacity: .92; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.cover-tile .cw { position: relative; flex: none; font-size: clamp(10px, 14.5cqw, 24px); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; opacity: .95; margin-top: 2px; white-space: nowrap; }
.cover-tile.c-R, .acard.c-R { background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255,255,255,.22), transparent 70%), linear-gradient(160deg, #ef6a61, var(--red-d)); }
.cover-tile.c-B, .acard.c-B { background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255,255,255,.22), transparent 70%), linear-gradient(160deg, #6aa2ff, var(--blue-d)); }
.cover-tile.c-G, .acard.c-G { background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255,255,255,.22), transparent 70%), linear-gradient(160deg, #4cc06d, #23803f); }
.cover-tile.c-N { background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255,255,255,.3), transparent 70%), linear-gradient(160deg, #e2d2a9, var(--tan-d)); color: #3a301c; }
.cover-tile.c-N::before { border-color: rgba(60,45,20,.3); }
.cover-tile.c-A { background: radial-gradient(circle at 50% 40%, #2a2c36, #07080b); color: #ff6b5f; }
/* Duet bystander: a card laid over the top half only, naming who guessed it */
.cover-tile.half { inset: -2px 0 auto 0; height: 52%; flex-direction: row; gap: 2px; border-radius: 4px; }
.cover-tile.half svg { width: 11px; height: 11px; flex-shrink: 0; }
.cover-tile.half .cw { font-size: clamp(10px, 12cqw, 17px); font-weight: 750; letter-spacing: 0; padding: 0; margin-top: 0; }
.cover-tile.half::before { inset: 2px; }
.cover-tile.still { animation: none; }
.cover-tile.flying { animation: none; visibility: hidden; }
.cover-tile.ghost { transform: none; }
@keyframes place {
  from { transform: translate(var(--cx, 0), calc(var(--cy, 0px) - 16px)) rotate(calc(var(--cr, 0deg) - 7deg)) scale(1.16); opacity: 0; }
  45% { opacity: 1; }
  to { transform: translate(var(--cx, 0), var(--cy, 0)) rotate(var(--cr, 0deg)); opacity: 1; }
}
/* a fresh board is dealt out of the word-card box, card by card */
.board.dealing .card { animation: deal .3s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--d, 0) * 22ms); }
@keyframes deal {
  from { transform: translate(calc(var(--dc, 0) * 105%), calc(var(--dr, 1) * -112%)) rotate(-12deg); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translate(var(--jx, 0), var(--jy, 0)) rotate(var(--jr, 0deg)); opacity: 1; }
}
/* the spymaster's key card standing in its holder */
.keystand { display: inline-flex; padding: 0 5px 4px; border-radius: 2px; background: linear-gradient(#4a301a, #24170b) bottom / 100% 7px no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.keycard { width: 42px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 3px; background: #16171c; border: 2px solid #3b3e49; border-radius: 3px; }
.keycard.s-R { border-color: var(--red); } .keycard.s-B { border-color: var(--blue); }
.keycard i { border-radius: 1px; }
.keycard .kR { background: var(--red); } .keycard .kB { background: var(--blue); } .keycard .kG { background: #3fb35f; }
.keycard .kN { background: #d8c79c; } .keycard .kA { background: #000; box-shadow: inset 0 0 0 1px #8a8fa3; }
@media (prefers-reduced-motion: reduce) { .cover-tile, .board.dealing .card { animation: none; } }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 650; background: var(--card); border: 1px solid var(--line); transition: transform .1s ease, background .15s; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.main { background: var(--accent); border-color: var(--accent); color: #0b1220; }
.btn.warm { background: var(--warm); border-color: var(--warm); color: #23180a; }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.R { background: var(--red); } .dot.B { background: var(--blue); } .dot.G { background: #3fb35f; } .dot.N { background: var(--tan); } .dot.A { background: #000; box-shadow: 0 0 0 1.5px #6b7086; }
.seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.seg button { padding: 5px 11px; border-radius: 7px; font-size: 13px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.seg button.on { background: var(--card-hover); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.switch i { width: 40px; height: 24px; border-radius: 12px; background: #3a4157; position: relative; transition: background .2s; flex-shrink: 0; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch.on i { background: var(--accent); } .switch.on i::after { transform: translateX(16px); }
.switch.on { color: var(--text); }
.q { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: 12px 0 6px; }
h3:first-child { margin-top: 2px; }

/* clue entry */
.clue-in { display: flex; gap: 6px; align-items: center; }
.clue-in input { flex: 1; min-width: 0; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-soft); padding: 0 12px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; outline: none; }
.clue-in input:focus { border-color: var(--accent); }
.stepper { display: inline-flex; align-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; height: 42px; }
.stepper button { width: 32px; height: 100%; font-size: 20px; color: var(--muted); }
.stepper b { min-width: 22px; text-align: center; font-size: 18px; }
.msg { min-height: 20px; font-size: 13px; margin-top: 4px; color: var(--muted); }
.msg.bad { color: var(--bad); }

/* odds */
.odds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.odd { background: var(--card); border-radius: 10px; padding: 6px 4px; text-align: center; }
.odd b { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.odd span { font-size: 11px; color: var(--muted); font-weight: 600; }
.near { margin-top: 8px; display: grid; gap: 3px; }
.near-row { display: grid; grid-template-columns: 14px 86px 1fr 38px; gap: 6px; align-items: center; font-size: 13px; }
.near-row .nm { font-weight: 700; text-transform: uppercase; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-row .track { height: 8px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; }
.near-row .track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .25s ease; }
.near-row .pc { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }

/* the clue, written on a slip of notepad paper lying on the table (tape colour = whose turn) */
.cluebar {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 0; padding: 0 10px 0 14px;
  border-radius: 2px; flex-shrink: 0; color: #1f1a12; font-weight: 800; letter-spacing: .03em; transform: rotate(-.7deg);
  background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(70,110,170,.16) 12px 13px), linear-gradient(180deg, #f8f3e4, #ece3cb);
  box-shadow: inset 6px 0 0 var(--tape, #b9ad8f), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(0,0,0,.35), 0 4px 7px rgba(0,0,0,.35);
  transition: box-shadow .3s;
}
.cluebar.t-R { --tape: var(--red); } .cluebar.t-B { --tape: var(--blue); } .cluebar.t-G { --tape: #3fb35f; }
.cluebar.think .who::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.cluebar .cw { font-family: "Marker Felt", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 20px; font-weight: 700; color: #1b2d55; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Start stays in reach at the bottom of the setup panel, however long the options get */
.go-row { position: sticky; bottom: -12px; margin-top: 14px; padding: 10px 0 12px; background: var(--bg); z-index: 2; }
.cluebar .cn { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border: 2px solid #1b2d55; border-radius: 50%; color: #1b2d55; font: 700 16px/1 "Marker Felt", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.cluebar .who { font-size: 11.5px; color: #5d543f; letter-spacing: 0; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cluebar { overflow: hidden; }
.cluebar .who:only-child { display: block; min-width: 0; font-size: 13px; line-height: 1.15; color: #3d3628; white-space: normal; text-align: center; overflow: hidden; max-height: 2.3em; }

/* log */
.log { display: grid; gap: 4px; }
.log-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13px; padding: 6px 8px; background: var(--card); border-radius: 8px; }
.log-row .lc { font-weight: 800; text-transform: uppercase; }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--bg-soft); }
.tag.R { background: rgba(229,84,75,.25); color: #ffb2ab; } .tag.B { background: rgba(77,141,255,.25); color: #b4ceff; }
.tag.G { background: rgba(63,179,95,.25); color: #a6e9b8; } .tag.N { background: rgba(205,187,146,.2); color: #e6d6b0; } .tag.A { background: #000; color: #ff8a80; }

/* setup choices */
.choices { display: grid; gap: 8px; grid-template-columns: 1fr; }
.choice { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .1s, border-color .15s; }
.choice:active { transform: scale(.985); }
.choice.on { border-color: var(--accent); }
.choice svg { width: 34px; height: 34px; flex-shrink: 0; }
.choice b { display: block; font-size: 15.5px; }
.choice span { font-size: 12.5px; color: var(--muted); }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seatbtn { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.seatbtn em { font-style: normal; color: var(--accent); font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.field input { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-soft); padding: 0 12px; outline: none; }
.field input:focus { border-color: var(--accent); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.big-code { font-size: 34px; font-weight: 800; letter-spacing: .18em; color: var(--warm); }

/* result banner */
.result { padding: 12px; border-radius: var(--r); background: var(--card); text-align: center; }
.result > b { font-size: 22px; display: block; }

/* links tab */
.map svg { width: 100%; height: auto; display: block; }
.map text { font: 700 11px system-ui, sans-serif; text-transform: uppercase; }
.wordlist { display: flex; flex-wrap: wrap; gap: 5px; }
.wordlist .tag { font-size: 12px; padding: 3px 8px; }

/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.set-row .lab { display: flex; align-items: center; gap: 6px; font-weight: 600; }
table.strength { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
table.strength th, table.strength td { padding: 4px 4px; text-align: right; border-bottom: 1px solid var(--line); }
table.strength th:first-child, table.strength td:first-child { text-align: left; }
table.strength th { color: var(--muted); font-weight: 600; }
/* Sound & effects rows (js/fx.js), drawn like this site's own switches and segments */
.fx-set .fx-row { border-top: 0; min-height: 0; }
.fx-set .fx-lab { font-weight: 600; gap: 6px; }
.fx-set .switch { position: relative; width: 40px; height: 24px; }
.fx-set .switch span { background: #3a4157; border-radius: 12px; transition: background .2s; }
.fx-set .switch span::after { top: 2px; left: 2px; transition: transform .2s; }
.fx-set .switch input:checked + span { background: var(--accent); }
.fx-set .switch input:checked + span::after { transform: translateX(16px); }
.fx-set .seg { display: inline-flex; gap: 0; border-radius: 9px; padding: 2px; }
.fx-set .seg button { padding: 5px 11px; border-radius: 7px; font-size: 13px; }
.fx-set .seg button[aria-pressed="true"] { background: var(--card-hover); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fx-set .q { width: 20px; height: 20px; font-size: 12px; }
.fx-set .fx-test { min-height: 32px; border-radius: 9px; background: var(--card); }
/* Animations off = covers appear at once; Fast = half-length flip */
.fx-still .cover-tile, .fx-still .board.dealing .card { animation: none; }
.fx-fast .cover-tile { animation-duration: .2s; }
.fx-fast .board.dealing .card { animation-duration: .17s; animation-delay: calc(var(--d, 0) * 12ms); }

/* pass-the-phone cover, sheets, toast */
.cover { position: fixed; inset: 0; z-index: 50; background: radial-gradient(circle at 50% 30%, #1d2233, var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.cover.t-R { background: radial-gradient(circle at 50% 35%, #4f2629, var(--bg) 70%); }
.cover.t-B { background: radial-gradient(circle at 50% 35%, #233a63, var(--bg) 70%); }
.cover.t-G { background: radial-gradient(circle at 50% 35%, #1d422d, var(--bg) 70%); }
.cover.t-R svg { color: #ff8a80; } .cover.t-B svg { color: #8fb6ff; } .cover.t-G svg { color: #7fd99a; }
.cover .btn { min-height: 48px; padding: 0 24px; font-size: 16px; }
.cover h2 { font-size: 26px; }
.cover p { color: var(--muted); max-width: 300px; }
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(5,7,12,.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 460px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: up .22s ease-out; max-height: 85dvh; overflow-y: auto; }
.sheet h2 { font-size: 18px; margin-bottom: 6px; }
.sheet p { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.sheet .btns { display: flex; gap: 8px; justify-content: space-between; margin-top: 14px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 14px); transform: translateX(-50%); z-index: 60; background: #2b3247; border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; font-size: 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.4); max-width: calc(100vw - 32px); }
.toast button { color: var(--accent); font-weight: 700; }

/* narrow phones (320-360 px): smaller print so long words stay on the strip */
@media (max-width: 360px) {
  .card .strip { margin: 0 2px 2px; }
  .cluebar .who:only-child { font-size: 11px; }
  .plate { font-size: 10px; padding: 1px 5px; gap: 3px; }
  .across { gap: 3px; }
  .across .plate .cpu { display: none; }
  .cover-tile .cw { letter-spacing: 0; }
  .astack .acard { width: 32px; } .astack .acard svg { width: 13px; height: 13px; }
  .counts { gap: 6px; } .boardwrap .bar { gap: 6px; } .boardwrap .bar .chip { padding: 0 8px; } .boardwrap .switch { gap: 5px; font-size: 12.5px; }
}

/* ---------- laptop ---------- */
@media (min-width: 900px) {
  #app { grid-template-rows: auto 1fr; grid-template-columns: 92px 1fr; }
  .top { grid-column: 1 / -1; padding: 10px 20px; }
  .tabs { grid-row: 2; grid-column: 1; flex-direction: column; justify-content: flex-start; border-top: 0; border-right: 1px solid var(--line); padding: 12px 0; gap: 4px; }
  .tabs button { flex: 0 0 68px; font-size: 12px; }
  main { grid-row: 2; grid-column: 2; }
  .stage { flex-direction: row; padding: 18px 22px; gap: 22px; align-items: stretch; }
  .boardwrap { flex: 1; display: flex; flex-direction: column; gap: 10px; }
  .boardwrap.tbl-surface { gap: 10px; padding: 12px 18px 14px; border-radius: 18px; }
  /* the table fills the column; the board takes all the height left on it at the real card shape (68 x 44):
     width = (height - 4 row gaps) x 68/44 + 4 column gaps */
  .boardbox { flex: 1; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
  .board { gap: 10px 12px; width: min(100cqw, calc((100cqh - 52px) * 1.5455 + 48px)); margin: 0 auto; }
  .card { border-radius: 8px; }
  .card .wtop { gap: 6px; padding: 0 10px; }
  .card .stamp { width: 15px; height: 13px; }
  .card .mirror { font-size: clamp(8px, 7cqw, 12px); }
  .card .strip { margin: 0 6px 6px; border-radius: 3px; }
  .card .w { font-size: clamp(14px, 15cqw, 28px); }
  .cover-tile { border-radius: 8px; }
  .cover-tile::before { inset: 5px; border-radius: 4px; }
  .cover-tile svg { width: clamp(30px, 17cqw, 44px); height: clamp(30px, 17cqw, 44px); }
  .cover-tile .cw { font-size: clamp(12px, 12cqw, 26px); margin-top: 4px; }
  .cover-tile.half svg { width: 18px; height: 18px; }
  .cover-tile.half .cw { font-size: clamp(11px, 10cqw, 17px); }
  /* Links: the map fills the column too, at its own 500 x 340 shape */
  .map { flex: 1; min-height: 0; container-type: size; display: flex; align-items: flex-start; justify-content: center; }
  .map svg { width: min(100cqw, calc(100cqh * 500 / 340)); }
  .card .heat { top: 5px; left: 10px; right: 10px; height: 4px; }
  .cluebar { height: 50px; padding: 0 16px 0 20px; }
  .cluebar .cw { font-size: 26px; }
  .cluebar .cn { min-width: 32px; height: 32px; font-size: 20px; }
  .cluebar .who { font-size: 13px; }
  .cluebar .who:only-child { font-size: 15px; } /* "Your turn: give a clue" must read at laptop distance */
  .slips { gap: 18px; }
  .slips > .cluebar { justify-self: center; width: min(100%, 760px); } /* a notepad slip, not a banner across a big table */
  .astack .acard { width: clamp(64px, 4.6vw, 92px); }
  .astack .acard svg { width: 24px; height: 24px; }
  .astack b { min-width: 24px; font-size: 14px; line-height: 22px; border-radius: 12px; }
  .turnline .tok { width: 20px; height: 20px; margin-left: -7px; }
  .plate { font-size: 13.5px; line-height: 21px; padding: 2px 10px; }
  .across { gap: 10px; }
  .keycard { width: clamp(78px, 6vw, 110px); padding: 5px; gap: 2px; border-width: 3px; }
  .panel { font-size: 15px; }
  .log-row { font-size: 14px; }
  .panel { flex: 0 0 clamp(270px, 25vw, 380px); max-height: 100%; padding-right: 4px; }
  .choices { grid-template-columns: 1fr 1fr; }
  .setup { max-width: 820px !important; }
  .go-row .btn.main { min-height: 46px; padding: 0 34px; font-size: 16px; }
  .sheet-back { align-items: center; }
  .sheet { border-radius: 16px; }
  .toast { bottom: 24px; }
}
/* phone on its side: the screen is short, so the brand header goes, the tab bar gets slimmer, and the
   table takes all the height left with a narrower panel beside it */
@media (max-width: 999px) and (max-height: 520px) and (orientation: landscape) {
  :root { --tabh: 44px; }
  #app { grid-template-rows: 1fr var(--tabh); grid-template-columns: none; }
  .top { display: none; }
  .tabs { grid-row: auto; grid-column: auto; flex-direction: row; border-top: 1px solid var(--line); border-right: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .tabs button { flex: 1; flex-direction: row; gap: 6px; font-size: 12px; }
  .tabs button svg { width: 19px; height: 19px; }
  main { grid-row: auto; grid-column: auto; }
  .stage { flex-direction: row; gap: 10px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); align-items: stretch; }
  .boardwrap { flex: 1 1 0; display: flex; flex-direction: column; }
  .boardwrap.tbl-surface { margin: 0; border-radius: 14px; padding: 5px 8px 6px; }
  .boardbox { flex: 1; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
  .board { gap: 5px; width: min(100cqw, calc((100cqh - 26px) * 1.5455 + 20px)); }
  .map { flex: 1; min-height: 0; container-type: size; display: flex; align-items: flex-start; justify-content: center; }
  .map svg { width: min(100cqw, calc(100cqh * 500 / 340)); }
  .panel { flex: 0 0 clamp(200px, 32vw, 300px); padding-bottom: 6px; }
  .odds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 4 odds don't fit side by side in the narrow panel */
  .odd { padding: 4px; } .odd b { font-size: 17px; }
  .across, .myedge { display: none; }
  .card .strip { margin: 0 2px 2px; }
  .slips > .counts, .slips > .turnline { min-width: 0; }
  .astack .acard { width: 34px; }
  .cluebar { height: 34px; }
  .cluebar .cw { font-size: 18px; }
}