/* ZAZTEK Tambola Live — visual system
   Stage is ZAZTEK navy. The ticket is the only lit surface, printed on cold
   newsprint. Red is ink: it appears when a number is daubed and nowhere else.
   Gold appears only when somebody wins. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --navy:   #001f3f;   /* site secondary */
  --ink:    #0a1626;   /* site game-surface ink, as used in /munzee */
  --ink-2:  #0d2140;
  --ink-3:  #122c52;
  --edge:   #1d3a63;
  --paper:  #f5f7fb;   /* site paper */
  --paper-2:#ccd8e8;
  --red:    #cc0000;   /* site primary-dark, the red used across products */
  --red-d:  #990000;
  --gold:   #E9B949;
  --mist:   #90A7C5;
  --ok:     #2FBF71;

  --r: 14px;
  --pad: clamp(14px, 4vw, 22px);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --display: 'Sora', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

body {
  background-image:
    radial-gradient(120% 60% at 50% -10%, #14315A 0%, transparent 60%);
  background-attachment: fixed;
  min-height: 100dvh;
}

h1, h2, h3, .num, .stat-v { font-family: var(--display); letter-spacing: -.02em; }
h1 { font-size: clamp(22px, 5.5vw, 32px); font-weight: 800; margin: 0 0 4px; }
h2 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
p  { margin: 0 0 10px; color: var(--mist); }
a  { color: var(--paper); }

.wrap { max-width: 720px; margin: 0 auto; padding: var(--pad) var(--pad) 120px; }
.wide { max-width: 1200px; }

/* ---------- masthead ---------- */
.mast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--pad); border-bottom: 1px solid var(--edge);
  position: sticky; top: 0; z-index: 40;
  background: rgba(8,23,43,.92); backdrop-filter: blur(10px);
}
.brand { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.brand span { color: var(--red); }
.mast .spacer { flex: 1; }
.code-chip {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  background: var(--ink-3); border: 1px solid var(--edge);
  padding: 5px 10px; border-radius: 999px; letter-spacing: .08em;
}

/* ---------- cards ---------- */
.card {
  background: var(--ink-2); border: 1px solid var(--edge);
  border-radius: var(--r); padding: var(--pad); margin-bottom: 14px;
}
.card.flat { background: transparent; border-style: dashed; }

.eyebrow {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist); font-weight: 700; margin-bottom: 8px;
}

/* ---------- controls ---------- */
label { display: block; font-size: 13px; color: var(--mist); margin: 12px 0 5px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 12px 14px; font-family: var(--body); font-size: 16px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--edge); border-radius: 10px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, .cell:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
input::placeholder { color: #5B779B; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  padding: 13px 20px; border-radius: 11px; border: 1px solid var(--edge);
  background: var(--ink-3); color: var(--paper); cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--red); border-color: var(--red); }
.btn.gold    { background: var(--gold); border-color: var(--gold); color: #2A1D00; }
.btn.ghost   { background: transparent; }
.btn.block   { width: 100%; }
.btn.big     { font-size: 18px; padding: 17px 22px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1; min-width: 120px; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px,1fr)); gap: 8px; }
.stat { background: var(--ink); border: 1px solid var(--edge); border-radius: 10px; padding: 10px; text-align: center; }
.stat-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }

/* ---------- the coin: current number ---------- */
.coin-wrap { display: flex; align-items: center; gap: 16px; }
.coin {
  width: clamp(96px, 30vw, 132px); aspect-ratio: 1; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 13vw, 58px); color: var(--paper);
  background: radial-gradient(circle at 34% 28%, #E3454D 0%, var(--red) 45%, var(--red-d) 100%);
  box-shadow: 0 12px 28px rgba(216,30,39,.32), inset 0 -6px 14px rgba(0,0,0,.28);
  border: 3px solid rgba(255,255,255,.14);
}
.coin.empty { background: var(--ink-3); color: var(--mist); font-size: 15px; box-shadow: none; letter-spacing: .06em; }
.coin.drop { animation: drop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes drop {
  0%   { transform: translateY(-42px) scale(.6); opacity: 0; }
  70%  { transform: translateY(4px) scale(1.06); opacity: 1; }
  100% { transform: none; }
}
.coin-side { min-width: 0; }
.coin-line { font-size: 14px; color: var(--paper); font-weight: 500; }
.recent { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.recent b {
  font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700;
  background: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: 3px 8px; color: var(--mist);
}

/* ---------- 1..90 board ---------- */
.board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.board i {
  font-style: normal; font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums;
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: clamp(10px, 2.6vw, 14px);
  background: var(--ink); border: 1px solid var(--edge); border-radius: 6px; color: #4D6A92;
}
.board i.hit { background: var(--red); border-color: var(--red); color: #fff; }
.board i.now { background: var(--gold); border-color: var(--gold); color: #2A1D00; }

/* ---------- ticket ---------- */
.ticket {
  background: var(--paper);
  border-radius: 12px; padding: 9px; margin-bottom: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--paper-2);
}
.ticket-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #56708F;
  padding: 2px 4px 8px;
}
.ticket-head .spacer { flex: 1; }
.grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }

.cell {
  position: relative; aspect-ratio: 1; border: 0; padding: 0;
  border-radius: 8px; background: #FBFCFE;
  box-shadow: inset 0 0 0 1px var(--paper-2);
  font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(14px, 4.4vw, 22px); color: #0C2444;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .1s ease;
}
.cell.blank { background: transparent; box-shadow: none; cursor: default; }
.cell:active:not(.blank) { transform: scale(.94); }

/* the signature: a red ink blot, stamped slightly off-square */
.cell.daub::before {
  content: ''; position: absolute; inset: 6%;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: var(--red); opacity: .9;
  transform: rotate(var(--tilt, -7deg));
  animation: stamp .18s cubic-bezier(.3,1.4,.5,1);
}
.cell.daub { color: #FFF; }
.cell.daub > span { position: relative; z-index: 1; }
@keyframes stamp { from { transform: rotate(var(--tilt,-7deg)) scale(1.5); opacity: 0; } }

/* a number that was called but not yet daubed gets a faint pencil ring */
.cell.live::after {
  content: ''; position: absolute; inset: 10%;
  border-radius: 50%; border: 2px dashed rgba(216,30,39,.45);
}

/* ---------- prize strip ---------- */
.prizes { display: flex; flex-direction: column; gap: 8px; }
.prize {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); border: 1px solid var(--edge);
  border-radius: 10px; padding: 10px 12px;
}
.prize .nm { font-weight: 700; font-size: 14px; }
.prize .hint { font-size: 11px; color: var(--mist); }
.prize .spacer { flex: 1; }
.prize .amt { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--mist); font-variant-numeric: tabular-nums; }
.prize.done { border-color: var(--gold); background: rgba(233,185,73,.08); }
.prize.done .amt { color: var(--gold); }
.prize.locked { opacity: .45; }
.prize .btn { padding: 8px 14px; font-size: 13px; }

.winner-line { font-size: 12px; color: var(--gold); font-weight: 700; }

/* ---------- feed ---------- */
.feed { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.feed div { font-size: 13px; color: var(--mist); border-left: 2px solid var(--edge); padding-left: 10px; }
.feed div.win   { color: var(--gold); border-color: var(--gold); font-weight: 500; }
.feed div.bogey { color: #E4808B; border-color: var(--red-d); }

/* ---------- roster ---------- */
.row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--edge); font-size: 14px;
}
.row:last-child { border-bottom: 0; }
.row .spacer { flex: 1; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--edge); color: var(--mist);
}
.pill.on { background: rgba(47,191,113,.14); border-color: var(--ok); color: var(--ok); }

/* ---------- toggles ---------- */
.opt {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--ink); border: 1px solid var(--edge); border-radius: 10px; margin-bottom: 8px;
  cursor: pointer;
}
.opt input { width: 20px; height: 20px; flex: none; accent-color: var(--red); }
.opt .nm { font-weight: 700; font-size: 14px; }
.opt .hint { font-size: 11.5px; color: var(--mist); }
.opt .money { width: 92px; flex: none; text-align: right; padding: 8px; font-size: 14px; }
.opt.sel { border-color: var(--red); }

/* ---------- dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ink) 62%, rgba(8,23,43,0));
}
.dock .inner { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; }
.dock .btn { flex: 1; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px);
  z-index: 90; max-width: min(92vw, 480px);
  background: var(--ink-3); border: 1px solid var(--edge); color: var(--paper);
  padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .22s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.win   { border-color: var(--gold); background: #2B2205; color: var(--gold); }
#toast.bogey { border-color: var(--red); }

/* ---------- celebration ---------- */
.pop {
  position: fixed; inset: 0; z-index: 100; display: none;
  place-items: center; background: rgba(4,10,20,.88); padding: 24px; text-align: center;
  backdrop-filter: blur(6px);
}
.pop.show { display: grid; }
.pop h1 { color: var(--gold); font-size: clamp(30px, 9vw, 52px); }
.pop .sub { color: var(--paper); font-size: 17px; margin-bottom: 22px; }

/* ---------- big screen ---------- */
.screen-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.screen-coin { font-size: clamp(60px, 12vw, 150px); width: clamp(160px, 26vw, 300px); }
@media (max-width: 860px) { .screen-grid { grid-template-columns: 1fr; } }

/* ---------- utility ---------- */
.muted { color: var(--mist); font-size: 13px; }
.tiny  { font-size: 11.5px; color: var(--mist); }
.center { text-align: center; }
.mt { margin-top: 14px; }
.hide { display: none !important; }
.xl .cell { font-size: clamp(19px, 6vw, 30px); }
.xl .grid { gap: 5px; }
.hc .ticket { background: #fff; }
.hc .cell { box-shadow: inset 0 0 0 2px #24405f; color: #000; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- ZAZ ---------- */
.zaz {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55;
  background: linear-gradient(180deg, rgba(216,30,39,.14), rgba(216,30,39,.04));
  border: 1px solid rgba(216,30,39,.34); color: var(--paper);
}
.zaz b {
  display: inline-block; font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-right: 8px;
}

/* ---------- currency switcher ---------- */
.cur-toggle {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--ink-3); border: 1px solid var(--edge);
}
.cur-toggle button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  color: var(--mist); font-family: var(--display); font-weight: 700;
  font-size: 12px; letter-spacing: .08em; padding: 6px 13px; border-radius: 999px;
  transition: background .16s ease, color .16s ease;
}
.cur-toggle button.on { background: var(--red); color: #fff; }
.cur-toggle button:not(.on):hover { color: var(--paper); }
.cur-toggle button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cur-toggle button { transition: none; } }

/* ---------- ZAZTEK footer ---------- */
.zfoot {
  text-align: center; padding: 30px 16px 34px; margin-top: 26px;
  border-top: 1px solid var(--edge); color: var(--mist);
}
.zfoot-mark {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  letter-spacing: .2em; color: var(--paper-2); margin-bottom: 10px;
}
.zfoot-mark span { color: var(--red); }
.zfoot-line { font-size: 14px; color: var(--paper-2); }
.zfoot-line a { color: var(--paper-2); text-decoration: underline; text-underline-offset: 3px; }
.zfoot-line a:hover { color: var(--red); }
.zfoot-meta { font-size: 12px; margin-top: 7px; line-height: 1.6; }
.zfoot.compact { padding: 22px 16px 26px; }
.zfoot.compact .zfoot-mark { font-size: 13px; }
.zfoot.compact .zfoot-line { font-size: 13px; }

/* ---------- for-entertainment notice ---------- */
.zdisc {
  border: 1px solid rgba(204,0,0,.32); background: rgba(204,0,0,.07);
  border-radius: 12px; padding: 11px 13px; margin-top: 14px;
  font-size: 13px; line-height: 1.55; color: var(--paper-2);
}
.zdisc b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px;
}
.zfoot-disc { max-width: 52ch; margin-left: auto; margin-right: auto; opacity: .85; }

/* ---------- host claim alert ---------- */
.claim-veil {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(4,12,24,.72); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.claim-veil.show { display: flex; }
.claim-box {
  width: min(430px, 100%); background: var(--ink-2); border-radius: 18px;
  border: 1px solid var(--edge); padding: 22px; text-align: center;
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
  animation: claimIn .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes claimIn { from { transform: scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .claim-box { animation: none } }
.claim-kind {
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
.claim-box.valid .claim-kind { color: var(--gold); }
.claim-box.bogey .claim-kind { color: var(--red); }
.claim-who { font-family: var(--display); font-weight: 800; font-size: 27px; color: var(--paper); line-height: 1.15; }
.claim-what { font-size: 16px; color: var(--paper-2); margin-top: 6px; }
.claim-meta { font-size: 13px; color: var(--mist); margin-top: 8px; }
.claim-amt { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--gold); margin-top: 10px; }
.claim-stack { font-size: 12px; color: var(--mist); margin-top: 12px; }

/* ---------- points / money chooser ---------- */
.stake-pick { display: flex; gap: 8px; margin-top: 6px; }
.stake-pick button {
  flex: 1; appearance: none; cursor: pointer; padding: 12px;
  background: var(--ink-3); border: 1px solid var(--edge); border-radius: 12px;
  color: var(--mist); font-family: var(--display); font-weight: 700; font-size: 15px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.stake-pick button.on { border-color: var(--red); color: var(--paper); background: rgba(204,0,0,.14); }
@media (prefers-reduced-motion: reduce) { .stake-pick button { transition: none; } }

/* ---------- the crier: claims announced to the whole room ---------- */
.crier {
  position: fixed; left: 50%; top: 64px; z-index: 80;
  width: min(460px, calc(100% - 24px));
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  background: var(--ink-2); border: 1px solid var(--edge); border-radius: 14px;
  padding: 13px 16px; text-align: center; font-size: 15.5px; color: var(--paper-2);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transition: opacity .22s ease, transform .22s ease;
}
.crier.show { opacity: 1; transform: translate(-50%, 0); }
.crier b { color: var(--paper); font-weight: 700; }
.crier.win   { border-color: var(--gold); }
.crier.win b { color: var(--gold); }
.crier.bogey { border-color: var(--red); }
.crier-amt {
  display: inline-block; margin-left: 6px; font-family: var(--display);
  font-weight: 800; color: var(--gold);
}
.crier-tk { display: block; font-size: 12px; color: var(--mist); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .crier { transition: none; } }

/* big screen wants it much larger */
.screen .crier { top: 26px; width: min(76vw, 1100px); padding: 26px 30px; font-size: clamp(24px, 3.4vw, 44px); border-radius: 20px; }
.screen .crier-tk { font-size: clamp(13px, 1.2vw, 20px); margin-top: 8px; }

/* ---------- settle up ---------- */
.settle-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 11px 0; border-top: 1px solid var(--edge);
}
.settle-row:first-child { border-top: 0; }
.settle-who b { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--paper); }
.settle-sub { display: block; font-size: 12px; color: var(--mist); margin-top: 2px; }
.settle-sub .ok  { color: var(--ok); }
.settle-sub .owe { color: var(--red); }
.settle-won {
  grid-column: 1; font-size: 13px; color: var(--paper-2);
}
.settle-won .frac { font-size: 11px; color: var(--mist); }
.settle-won .muted { color: var(--mist); }
.settle-net {
  grid-row: 1 / span 2; align-self: center; text-align: right;
  font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--paper-2);
  font-variant-numeric: tabular-nums;
}
.settle-net.up   { color: var(--gold); }
.settle-net.down { color: var(--mist); }
.settle-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 14px; padding-top: 13px; border-top: 2px solid var(--edge);
  font-size: 13px; color: var(--mist);
}
.settle-foot b { color: var(--paper); font-family: var(--display); }
.settle-foot .owe b { color: var(--red); }

/* my own line, on the player screen */
.my-settle {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 13px 15px; border-radius: 12px;
  background: var(--ink-3); border: 1px solid var(--edge);
}
.my-settle .lbl { font-size: 13px; color: var(--mist); }
.my-settle .net { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 22px; }
.my-settle .net.up { color: var(--gold); }

/* big screen ranking */
.screen .settle-top { display: grid; gap: 10px; margin-top: 18px; }
.screen .settle-top .r {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.2vw, 30px);
  padding: 10px 18px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--edge);
}
.screen .settle-top .r .n { margin-left: auto; font-weight: 800; }
.screen .settle-top .r .n.up { color: var(--gold); }

/* ---------- session, scoreboard, snowball ---------- */
.round-line { font-family: var(--display); font-size: 17px; color: var(--paper); }
.snow-pill {
  display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px;
  background: var(--gold); color: #241a00; font-family: var(--display);
  font-weight: 800; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
}
.lucky {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding: 14px 16px;
  border-radius: 14px; background: linear-gradient(180deg, rgba(233,185,73,.16), rgba(233,185,73,.04));
  border: 1px solid rgba(233,185,73,.4);
}
.lucky-k { font-family: var(--display); font-weight: 800; font-size: 10.5px;
           letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lucky b { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--paper); }
.lucky-sub { font-size: 13px; color: var(--mist); }

.board-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
             align-items: start; padding: 11px 0; border-top: 1px solid var(--edge); }
.board-row:first-child { border-top: 0; }
.board-rank { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--mist); min-width: 1.4em; }
.board-who b { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--paper); }
.board-sub { display: block; font-size: 12px; color: var(--mist); margin-top: 2px; }
.board-score { font-family: var(--display); font-weight: 800; font-size: 17px;
               color: var(--paper-2); font-variant-numeric: tabular-nums; }
.hist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hchip { font-size: 11px; padding: 3px 7px; border-radius: 7px;
         background: var(--ink-3); border: 1px solid var(--edge); color: var(--paper-2); }
.chk { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--paper-2); }
.chk input { width: 19px; height: 19px; accent-color: var(--red); }

/* ---------- voice lounge ---------- */
.faces {
  display: grid; gap: 8px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.face {
  position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  background: var(--ink-3); border: 1px solid var(--edge);
}
.face video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.face.nocam video { display: none; }
.face-off {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--paper-2);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.face.nocam .face-off { display: flex; }
.face-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 7px;
  font-size: 11px; line-height: 1.3; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.face.me { border-color: var(--red); }
.face.linking { opacity: .55; }
.face.linking::after {
  content: 'connecting'; position: absolute; top: 6px; left: 7px;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}

/* the dedicated faces page wants them larger */
.lounge-page .faces { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.lounge-page .face-name { font-size: 13px; padding: 6px 9px; }
.lounge-page .face-off { font-size: 46px; }