/* Windows has no flag emoji (they show as letter pairs): this font only covers the regional-indicator pairs, so everywhere else falls through */
@font-face {
  font-family: "Flags";
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  font-display: swap;
}
/* ============ tokens (Tavern Tussle design system, "tavern" theme: a warm, firelit inn) ============ */
:root {
  --surface-page: #2a1c13; --surface-panel: #4a3121; --surface-inset: #2a1a10; --surface-scroll: #f4e4c1;
  --border-stone: #b07f48; --border-gold: #e8b04f; --stone: #423022;
  --ink: #fdf1dc; --ink-muted: #f6e6c8; --ink-title: #ffd889; --ink-scroll: #24140a; --ink-scroll-muted: #4a331f;
  --gold: #f5bd4f; --on-gold: #2a1a0c;
  --crimson: #b9412f; --on-crimson: #fff; --azure: #3d7ca8; --on-azure: #0d1a26;
  --emerald: #528a52; --on-emerald: #0e1f0e; --ember: #df6e35; --on-ember: #2a1a0c; --arcane: #885a96; --on-arcane: #1f1230;
  --hearth: #ff9a3c;
  --focus-ring: #ffe29a;
  --scroll-accent: #8a5a12; --scroll-danger: #a8322a; --scroll-ember: #b4500f;
  --shadow-bevel: inset 0 2px 0 rgba(255,236,200,.28), inset 0 -3px 0 rgba(40,18,4,.45);
  --shadow-pressed: inset 0 3px 6px rgba(20,8,0,.55), inset 0 -1px 0 rgba(255,236,200,.12);
  --shadow-glow: inset 0 0 0 2px rgba(255,216,137,.85), inset 0 0 14px rgba(255,170,70,.35);
  --shadow-lift: 0 3px 0 rgba(30,14,4,.55), 0 8px 18px rgba(15,6,0,.4);
  --shadow-hearth: 0 0 0 2px rgba(255,216,137,.6), 0 0 22px rgba(255,154,60,.55);
  --engrave: 0 2px 0 rgba(40,16,2,.6);
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --font-display: "Fraunces", "Flags", "Georgia", serif;
  --font-sans: "Alegreya Sans", "Flags", "Trebuchet MS", system-ui, sans-serif;
  /* reusable faces */
  --wood: repeating-linear-gradient(91deg, rgba(255,220,170,.035) 0 3px, rgba(30,12,2,.05) 3px 7px, rgba(255,220,170,.02) 7px 12px), linear-gradient(rgba(255,230,190,.09), rgba(30,12,2,.2)), var(--surface-panel);
  --well: linear-gradient(rgba(255,230,190,.03), rgba(20,8,0,.2)), var(--surface-inset);
  --scroll: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(150,100,50,.18) 100%), var(--surface-scroll);
  --rivets: radial-gradient(circle at 14px 14px, var(--border-gold) 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 14px) 14px, var(--border-gold) 0 3px, transparent 3.5px), radial-gradient(circle at 14px calc(100% - 14px), var(--border-gold) 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--border-gold) 0 3px, transparent 3.5px);
  --gem: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 45%), linear-gradient(#6fb6ea, #2f72b0);
  /* A-D answer colours, shared by the big screen and the phones so "the green one" means the same thing on both */
  --a1: var(--crimson); --a2: var(--azure); --a3: var(--gold); --a4: var(--emerald);
}

/* ============ frames ============
   Plates: the element's background is the rim (polished wood or gold), ::before is the face.
   Set --rim, --face, --bevel, --drop, --k (corner radius) and --bw (rim width) per component. */
:where(.btn, .menucard, .gamecard, .opt, .ropt, .erow, .srow, .lrow, .choice, .gridbtn, .segbtn, .card, .sheetcard, .joinbox, .tapp, .ctlbtn, .bigtap, .wheel, .stepper, .prompt, .bigq, .promptp) {
  --k: var(--radius-sm); --bw: 3px;
  --rim: linear-gradient(#c99560, var(--border-stone) 45%, #7d5530); --face: var(--wood); --bevel: var(--shadow-bevel); --drop: var(--shadow-lift);
  position: relative; isolation: isolate; border: 0;
  background: var(--rim);
  border-radius: var(--k); box-shadow: var(--drop);
}
:where(.btn, .menucard, .gamecard, .opt, .ropt, .erow, .srow, .lrow, .choice, .gridbtn, .segbtn, .card, .sheetcard, .joinbox, .tapp, .ctlbtn, .bigtap, .wheel, .stepper, .prompt, .bigq, .promptp)::before {
  content: ""; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--face); box-shadow: var(--bevel);
  border-radius: max(3px, calc(var(--k) - var(--bw)));
}
/* Chips and wells: a plain border as the rim, softly rounded. */
:where(.chip, .schip, .pack, .gametag, #roomtag, .pcount, .mult, .qtag, .badge, .delta, #me .score, #me .icon, .sheethead .icon, .skip, .arcaderound, #toast, .tag, .ctag, .bigin, .codechar, .tile, .letter, .avatar, .sw, .sz, .minimap, canvas.pad, .drawimg, .track, #timer, #timerbar) {
  --k: 8px;
  border: 2px solid var(--border-stone);
  border-radius: var(--k);
}
/* Parchment scrolls: prompts and answer cards, dark ink, a polished wood edge. */
:where(.prompt, .bigq, .promptp, .card) {
  --k: var(--radius-md); --bw: 5px;
  --face: var(--scroll); --bevel: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(150,100,50,.25);
  color: var(--ink-scroll);
}

/* ============ base ============ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans); color: var(--ink); overflow: hidden; font-weight: 500;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(12,5,0,.55) 100%),
    repeating-linear-gradient(90deg, rgba(15,6,0,.22) 0 2px, transparent 2px 180px),
    repeating-linear-gradient(90deg, rgba(255,220,170,.018) 0 3px, rgba(15,6,0,.035) 3px 9px, transparent 9px 14px),
    var(--surface-page);
  background-attachment: fixed;
}
/* the hearth: warm firelight rising from the bottom of the room, gently flickering */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 60% at 50% 110%, rgba(255,140,50,.32), rgba(255,110,40,.1) 45%, transparent 70%), radial-gradient(40% 30% at 12% 0%, rgba(255,190,110,.08), transparent 70%); animation: hearth 5s ease-in-out infinite alternate; }
@keyframes hearth { 0% { opacity: .75; } 30% { opacity: 1; } 55% { opacity: .85; } 80% { opacity: .97; } 100% { opacity: .8; } }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: .005em; }
b, strong { font-weight: 800; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.enter { animation: enter .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes enter { from { opacity: 0; transform: translateY(2.5%) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.25em); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.avatar { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; --k: 50%; border-width: 2px; border-color: rgba(255,230,190,.55); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.3), transparent 50%), linear-gradient(rgba(255,255,255,.1), rgba(20,8,0,.3)), var(--c, #888); font-size: 1em; line-height: 1; box-shadow: 0 2px 0 rgba(30,14,4,.5), 0 4px 10px rgba(15,6,0,.35); flex: none; }
.avatar.big { width: 2.6em; height: 2.6em; font-size: 1.1em; --k: 6px; border-width: 3px; }
.avatar.bob { animation: bob 1.2s ease-in-out infinite; }
.avatars { display: inline-flex; flex-wrap: wrap; gap: .2em; }
.avatars .avatar { font-size: .8em; animation: pop .35s both; }
.chip { display: inline-flex; align-items: center; gap: .4em; background: var(--well); border-color: var(--c, var(--border-stone)); padding: .15em .8em .15em .15em; max-width: 100%; color: var(--ink); font-family: var(--font-sans); }
.chip .avatar { font-size: .8em; }
.chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn { padding: .8em 1.4em; color: var(--ink); font-family: var(--font-sans); font-weight: 800; letter-spacing: .02em; font-size: 1.05em; font-weight: 900; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.btn.primary { --rim: var(--border-gold); --face: linear-gradient(rgba(0,0,0,0), rgba(120,60,0,.22)), var(--gold); color: var(--on-gold); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn:hover:not(:disabled) { --bevel: var(--shadow-bevel), var(--shadow-glow); --drop: var(--shadow-lift), var(--shadow-hearth); }
.btn:active:not(:disabled) { --bevel: var(--shadow-pressed); padding-top: calc(.8em + 2px); padding-bottom: calc(.8em - 2px); }
.btn:disabled { --rim: var(--border-stone); --face: var(--surface-inset); --bevel: var(--shadow-pressed); color: var(--ink-muted); text-shadow: none; cursor: not-allowed; }
.btn:focus-visible { outline: none; --bevel: var(--shadow-bevel), inset 0 0 0 3px var(--focus-ring); }

.logo { font-family: var(--font-display); font-size: 3em; font-weight: 900; letter-spacing: .02em; color: var(--ink); text-shadow: 0 3px 0 rgba(0,0,0,.6); line-height: 1; }
.logo span { color: var(--ink-title); margin-left: .25em; }
.logo::after { content: ""; display: block; width: 7em; max-width: 80%; height: .5em; margin: .25em auto 0; background: radial-gradient(circle, var(--border-gold) 0 .16em, transparent .18em) center / .5em .5em no-repeat, linear-gradient(90deg, transparent, var(--border-gold) 25%, var(--border-gold) 75%, transparent) center / 100% 2px no-repeat; }
.tag { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-color: rgba(0,0,0,.4); background: var(--well); color: var(--ink-title); margin-right: .5em; font-size: .75em; font-weight: 900; }

/* ============ host (big screen) ============ */
body.host {
  font-size: calc(8px + 1.2vmin);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(18, 9, 3, 0.45) 0%, rgba(14, 6, 2, 0.78) 75%, rgba(9, 4, 1, 0.94) 100%),
    url('/img/tavern-splash.png') center center / cover no-repeat,
    var(--surface-page);
  background-attachment: fixed;
}
body.host:not([data-screen=lobby]):not([data-screen=connecting])::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(14, 8, 4, 0.5);
  pointer-events: none;
  z-index: 0;
}
/* above the dim layer (body::after), so only the background is darkened and the question stays bright */
.host #app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; position: relative; z-index: 1; }
.host #top { display: flex; justify-content: space-between; align-items: center; padding: .8em 1.4em 0; min-height: 3em; }
.host #roomtag { --k: 6px; border: 3px solid var(--border-gold); background: var(--well); padding: .3em 1em; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink-title); box-shadow: var(--shadow-pressed); }
.host[data-screen=lobby] #roomtag, .host[data-screen=connecting] #roomtag { visibility: hidden; }
.host #timer { position: relative; width: 22em; height: 1.7em; border-width: 3px; background: var(--surface-inset); box-shadow: var(--shadow-pressed); overflow: hidden; visibility: hidden; }
.host #timer::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.65) calc(10% - 2px) 10%); pointer-events: none; }
.host #timerfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.25)), var(--emerald); transition: width .25s linear; }
.host #timer.urgent #timerfill { background: linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.25)), var(--crimson); }
.host #timernum { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: .9em; font-weight: 900; text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.8); }
.host #stage { position: relative; padding: 1em 3em; display: grid; align-items: center; justify-items: center; overflow: hidden; }
.host #stage > * { width: 100%; max-height: 100%; }
.connecting { text-align: center; font-size: 2em; color: var(--ink-muted); font-family: var(--font-display); }
#ambient-fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; width: 100%; height: 100%; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

#strip { display: flex; justify-content: center; flex-wrap: nowrap; gap: .4em; padding: .3em 1em .4em; font-size: .8em; background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.15)); border-top: 3px solid var(--border-stone); box-shadow: inset 0 3px 0 rgba(0,0,0,.4); }
.host[data-screen=lobby] #strip, .host[data-screen=scoreboard] #strip, .host[data-screen=signal] #strip, .host[data-screen=connecting] #strip { display: none; }
.schip { display: flex; align-items: center; gap: .4em; border-width: 2px; background: var(--wood); box-shadow: var(--shadow-bevel), inset 0 -.2em 0 var(--c); padding: .15em .7em .25em .25em; transition: opacity .3s; }
.schip.away { opacity: .6; }
.schip .sname { display: none; font-size: .7em; color: var(--ink-muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schip .sscore { font-family: var(--font-display); font-size: 1.1em; font-weight: 900; color: var(--ink-title); text-shadow: var(--engrave); font-variant-numeric: tabular-nums; display: inline-block; }
.schip.bump { border-color: var(--border-gold); }
.schip.bump .sscore { animation: pulse .5s; }

/* inline cartoon SVG icons */
.svg-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; vertical-align: middle; }
.svg-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* lobby */
.lobby { display: flex; flex-direction: column; align-items: center; gap: 1.1em; text-align: center; }
.lobby .logo { font-size: 4.2em; }
.joinbox { --k: var(--radius-md); --bw: 4px; --rim: var(--border-gold); --face: var(--rivets), var(--wood); display: flex; gap: 3em; align-items: center; padding: 1em 2.4em; }
.joinstep { display: flex; align-items: center; gap: 1.1em; text-align: left; }
.joinstep .step-icon { width: 3.8em; height: 3.8em; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); flex-shrink: 0; }
.joinstep .step-text { display: flex; flex-direction: column; }
.joinstep small { display: block; color: var(--ink-muted); font-size: .8em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3em; }
.joinurl { font-size: 1.7em; font-weight: 800; color: var(--ink-title); }
.status-crown-icon { width: 1.5em; height: 1.5em; filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); margin-right: .3em; }
.winner-banner { display: flex; align-items: center; justify-content: center; gap: .8em; }
.winner-crown-icon { width: 3.8em; height: 3.8em; filter: drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,200,60,.55)); }
.code { display: flex; gap: .25em; justify-content: center; }
.codechar { display: grid; place-items: center; width: 1.25em; height: 1.4em; --k: 6px; border: 3px solid var(--border-gold); font-family: var(--font-display); font-size: 3.4em; font-weight: 900; background: var(--scroll); color: var(--ink-scroll); box-shadow: inset 0 -4px 0 rgba(150,100,50,.3), var(--shadow-lift); animation: pop .5s both; }
.lobbyplayers { display: flex; flex-wrap: wrap; gap: .9em; justify-content: center; min-height: 6em; align-items: flex-start; }
.lp { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; animation: pop .45s both; width: 6.5em; }
.lp b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }
.lp i, .lp .lp-vip-crown {
  position: absolute;
  top: -.75em;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 2.1em;
  height: 2.1em;
  font-style: normal;
  display: none;
  z-index: 12;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(255,215,75,.8));
}
.lp.isvip i, .lp.isvip .lp-vip-crown { display: inline-flex; }
.lp.isvip .avatar, .lp.isvip .char-avatar { border-color: var(--border-gold); }
.lp.away { opacity: .6; }
.status { color: var(--ink-muted); font-size: 1.15em; }
.gamerow { display: flex; flex-wrap: wrap; gap: .45em; justify-content: center; max-width: 70em; opacity: 1; }
.gametag { background: var(--wood); padding: .2em .8em; font-size: .75em; font-weight: 800; }

/* title / progress */
.titlecard, .progress { text-align: center; display: grid; gap: .6em; }
/* round titles sit on a swallow-tail banner */
.titlecard h1, .scoreboard h1 { justify-self: center; padding: .25em 1.8em; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.28)), var(--crimson); color: var(--on-crimson); letter-spacing: .01em; border-radius: 4px; text-shadow: var(--engrave); clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%, .8em 50%); }
.titlecard h1 { font-size: 4.2em; line-height: 1.1; font-weight: 900; }
.titlecard p, .progress p { font-size: 1.5em; color: var(--ink-muted); }
.progress h1 { font-size: 2.8em; line-height: 1.1; color: var(--ink-title); text-shadow: var(--engrave); }
.progressrow { display: flex; gap: 1em; align-items: center; justify-content: center; font-size: 1.3em; margin-top: .5em; min-height: 2.4em; }
.pcount { --k: 999px; border-color: rgba(220,240,255,.6); background: var(--gem); box-shadow: var(--shadow-lift); padding: .1em .8em; font-family: var(--font-display); font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,30,60,.7); font-variant-numeric: tabular-nums; }
.pwait { display: inline-flex; align-items: center; gap: .5em; }
.pwait small, .hint { color: var(--ink-muted); }
.hint { text-align: center; font-size: 1.3em; }

/* duel (quip) */
.duel { display: grid; gap: 1.2em; justify-items: center; text-align: center; }
.prompt { font-family: var(--font-display); font-weight: 800; font-size: 2.1em; line-height: 1.2; max-width: 26em; text-wrap: balance; padding: .6em 1.2em; }
.cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2em; align-items: center; width: 100%; }
.card { padding: 1.5em 1.4em 1.2em; font-size: 1.7em; min-height: 4.4em; display: grid; align-content: center; gap: .4em; }
.card .tag { position: absolute; top: .55em; left: .55em; margin: 0; border-color: rgba(0,0,0,.35); }
.card.a .tag { background: var(--crimson); color: var(--on-crimson); } .card.b .tag { background: var(--azure); color: var(--on-azure); }
.vs { font-family: var(--font-display); font-size: 1.8em; font-weight: 900; color: var(--ink-title); position: relative; z-index: 2; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.votecount { color: var(--ink-muted); font-size: 1.2em; }
.duel.revealed .card { transition: transform .5s, opacity .5s; }
.duel.revealed .card.winner { --rim: var(--border-gold); transform: scale(1.03); }
.duel.revealed .card:not(.winner) { opacity: .9; }
.atext { font-weight: 800; }
.reveal1, .reveal2, .reveal3 { opacity: 0; animation: rise .5s both; }
.reveal1 { animation-delay: .9s; } .reveal2 { animation-delay: 1.6s; min-height: 1.8em; } .reveal3 { animation-delay: 2.2s; font-family: var(--font-display); font-size: 1.2em; font-weight: 900; color: var(--scroll-danger); }
.quiplash { display: block; color: var(--scroll-ember); font-size: 1.2em; animation: pulse .7s infinite; }
.card .chip { font-size: .55em; }

/* fib (bluff / doodle / acro) */
.fib { display: grid; gap: 1em; justify-items: center; text-align: center; }
.fibhead { display: grid; gap: .6em; justify-items: center; }
.roundlabel { color: var(--ink-muted); font-size: 1em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mult { margin-left: .8em; border-color: var(--border-gold); background: linear-gradient(rgba(0,0,0,0), rgba(120,60,0,.22)), var(--gold); color: var(--on-gold); padding: .1em .7em; font-weight: 900; }
.bigq { font-family: var(--font-display); font-weight: 800; font-size: 2.5em; line-height: 1.2; max-width: 22em; text-wrap: balance; padding: .6em 1.2em; }
.bigq .blank { display: inline-block; min-width: 3em; border-bottom: .08em solid var(--scroll-accent); color: var(--scroll-accent); padding: 0 .2em; }
.drawimg { height: 28vmin; max-height: 100%; aspect-ratio: 1; background: var(--surface-scroll); border: 4px solid var(--border-stone); --k: 8px; }
.by { color: var(--ink-muted); font-size: 1em; display: flex; gap: .5em; align-items: center; }
.letters { display: flex; gap: .3em; }
.letter { display: grid; place-items: center; width: 1.3em; height: 1.5em; font-family: var(--font-display); font-size: 4em; --k: 6px; border: 3px solid var(--border-gold); background: linear-gradient(rgba(0,0,0,0), rgba(120,60,0,.22)), var(--gold); color: var(--on-gold); box-shadow: var(--shadow-bevel); font-weight: 900; animation: pop .5s both; }
.optgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; width: 100%; max-width: 60em; }
.opt { --rim: var(--oc, var(--ac, var(--border-stone))); padding: .8em 1em .8em 3.1em; font-size: 1.5em; font-weight: 800; text-align: left; animation: rise .4s both; }
.opt .tag { position: absolute; left: .55em; top: 50%; transform: translateY(-50%); }
.ropts { display: grid; gap: .6em; width: 100%; max-width: 55em; }
.ropt { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .6em 1em; font-size: 1.4em; font-weight: 800; text-align: left; opacity: 0; animation: rise .5s both; }
.ropt.truth { --rim: var(--border-gold); --face: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.24)), var(--emerald); color: var(--on-emerald); }
.ropt .ometa { display: flex; align-items: center; gap: .6em; font-size: .6em; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.badge { background: var(--well); color: var(--ink); padding: .15em .7em; display: inline-flex; gap: .4em; align-items: center; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.badge.truth { background: var(--surface-inset); border-color: var(--border-gold); color: var(--ink-title); font-weight: 900; } .badge.house { opacity: .75; }
.deltas { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; }
.delta { display: flex; align-items: center; gap: .3em; background: var(--well); padding: .15em .7em .15em .2em; font-size: 1.2em; font-family: var(--font-display); font-weight: 900; color: var(--ink-title); opacity: 0; animation: rise .5s both; }

/* question (pick games) */
.question { display: grid; gap: .9em; justify-items: center; text-align: center; }
.bigimg { display: grid; place-items: center; }
.bigimg img { display: block; max-width: min(24em, 70vw); max-height: 30vh; width: auto; height: auto; border: 4px solid var(--border-gold); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.6); background: #fff; }
.question .big { font-family: var(--font-display); font-size: 7em; font-weight: 900; line-height: 1; color: var(--ink-title); text-shadow: 0 .05em 0 rgba(0,0,0,.6); }
.question .opt { text-align: center; padding: .8em 1em; }
.question .opt .tag { position: static; transform: none; }
.question.grid .optgrid { grid-template-columns: repeat(4, 1fr); max-width: 56em; }
.question .opt[style*="--oc"] { --rim: rgba(0,0,0,.45); --face: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.24)), var(--oc); color: var(--on-gold); min-height: 2.4em; }
.opt.correct { --rim: var(--border-gold) !important; --face: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.24)), var(--emerald) !important; --bevel: var(--shadow-bevel), var(--shadow-glow); --drop: var(--shadow-lift), var(--shadow-hearth); color: var(--on-emerald) !important; transform: scale(1.04); }
.opt.wrong { opacity: .7; }
.question .opt { display: grid; gap: .3em; justify-items: center; }
.pickers { min-height: 1.5em; }
.note { font-size: 1.6em; color: var(--ink-title); }

/* estimate / rows */
.estimate { display: grid; gap: .9em; justify-items: center; text-align: center; }
.answer small { display: block; color: var(--ink-muted); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.answer b { font-family: var(--font-display); font-size: 4.5em; font-weight: 900; color: var(--ink-title); text-shadow: 0 3px 0 rgba(0,0,0,.6); line-height: 1; }
.rows { display: grid; gap: .5em; width: 100%; max-width: 46em; }
.erow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 1em; align-items: center; padding: .5em 1em; font-size: 1.3em; opacity: 0; animation: rise .5s both; text-align: left; }
.erow.winner { --rim: var(--border-gold); --bevel: var(--shadow-bevel), var(--shadow-glow); --drop: var(--shadow-lift), var(--shadow-hearth); }
.erow .guess { font-weight: 900; font-variant-numeric: tabular-nums; } .erow .diff { color: var(--ink-muted); font-size: .8em; } .erow .pts { font-family: var(--font-display); font-weight: 900; color: var(--ink-title); min-width: 3.5em; text-align: right; }

/* scramble */
.scramble { display: grid; gap: 1em; justify-items: center; text-align: center; }
.tiles { display: flex; gap: .3em; flex-wrap: wrap; justify-content: center; }
.tile { display: grid; place-items: center; width: 1.2em; height: 1.4em; font-family: var(--font-display); font-size: 4.6em; --k: 6px; border-width: 3px; background: var(--scroll); color: var(--ink-scroll); box-shadow: inset 0 -4px 0 rgba(90,70,48,.35); animation: pop .4s both; font-weight: 900; }
.solved { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; font-size: 1.1em; }

/* rebus */
.rebus { display: grid; gap: 1.1em; justify-items: center; text-align: center; }
.rebus-emojis {
  font-size: 5.5em;
  line-height: 1.2;
  letter-spacing: .15em;
  padding: .2em .4em;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
  animation: pop .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
}
.rebus-hint {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 2.2em;
  letter-spacing: .15em;
  color: var(--gold-bright, #ffd56b);
  background: var(--surface-inset, rgba(0,0,0,.35));
  border: 2px solid var(--border-stone, #5a4630);
  padding: .35em .9em;
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-pressed, inset 0 2px 4px rgba(0,0,0,.5));
  max-width: 90vw;
  word-break: break-word;
}
.rebus-ans {
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 900;
  color: var(--ink-title);
  text-shadow: 0 4px 0 rgba(0,0,0,.7);
  animation: pop .4s both;
  background: var(--well);
  border: 3px solid var(--border-gold);
  border-radius: var(--radius-md, 8px);
  padding: .25em .8em;
  box-shadow: var(--shadow-bevel), var(--shadow-glow);
}

/* corrupt a wish */
.wish { display: grid; gap: .8em; justify-items: center; text-align: center; width: min(60em, 92vw); }
.wish-goal { font-size: 1.4em; opacity: .85; }
.wish-text { font-size: 2.2em; font-style: italic; padding: .4em .8em; background: var(--well); border: 2px solid var(--border-stone, #5a4630); border-radius: var(--radius-md, 8px); }
.wish-backfire { font-size: 1.9em; max-width: 30em; color: var(--scroll-ember); }
.wish-rating { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: .2em .3em; font-family: var(--font-display); font-weight: 900; }
.wish-score { font-size: 4.5em; line-height: 1; }
.wish-of { font-size: 1.6em; opacity: .7; }
.wish-label { flex-basis: 100%; font-size: 1.2em; opacity: .8; }
.wish-rating.high .wish-score { color: var(--gold-bright, #ffd56b); }
.wish-rating.mid .wish-score { color: var(--ink-title); }
.wish-rating.low .wish-score { color: var(--scroll-danger); }

/* secret thread */
.thread { display: grid; gap: 1em; justify-items: center; text-align: center; width: min(60em, 92vw); }
.thread-clues { display: grid; gap: .5em; width: 100%; }
.thread-clue { display: flex; align-items: center; gap: .7em; font-size: 1.9em; text-align: left; padding: .4em .8em; background: var(--well); border: 2px solid var(--border-stone, #5a4630); border-radius: var(--radius-md, 8px); animation: pop .4s both; }
.thread-no { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; font-family: var(--font-display); font-weight: 900; background: var(--scroll); color: var(--ink-scroll); }
.thread-worth { font-family: var(--font-display); font-size: 1.8em; font-weight: 900; color: var(--gold-bright, #ffd56b); }
.thread-ans { font-family: var(--font-display); font-size: 3.4em; font-weight: 900; color: var(--ink-title); text-shadow: 0 4px 0 rgba(0,0,0,.7); animation: pop .4s both; background: var(--well); border: 3px solid var(--border-gold); border-radius: var(--radius-md, 8px); padding: .25em .8em; box-shadow: var(--shadow-bevel), var(--shadow-glow); }
.thread-note { font-size: 1.5em; max-width: 36em; }

/* race */
.raceWrap { display: grid; gap: 1em; text-align: center; }
.raceWrap h1 { font-size: 4em; color: var(--ink-title); text-shadow: 0 3px 0 rgba(0,0,0,.6); } .raceWrap h1.pulse { animation: pulse .5s infinite; }
.race { display: grid; gap: .6em; }
.lane { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center; font-size: 1.3em; }
.track { position: relative; height: 1.6em; --k: 4px; border-width: 3px; background: var(--surface-inset); box-shadow: var(--shadow-pressed); overflow: hidden; }
.track::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.55) calc(10% - 2px) 10%); pointer-events: none; }
.fill { height: 100%; width: 0; background: linear-gradient(rgba(255,255,255,.22), rgba(0,0,0,.25)), var(--c); transition: width .2s linear; }
.lane b { min-width: 6em; text-align: left; font-family: var(--font-display); font-weight: 900; color: var(--ink-title); font-variant-numeric: tabular-nums; }

/* signal (quick draw) */
.host[data-screen=signal] #stage { padding: 0; }
.signal { height: 100%; min-height: 70vh; display: grid; place-content: center; text-align: center; gap: .5em; }
.signal.wait { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.05) 2px 4px), linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.35)), var(--crimson); color: var(--on-crimson); }
.signal.go { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.05) 2px 4px), linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.25)), var(--emerald); color: var(--on-emerald); }
.sigtext { font-family: var(--font-display); font-size: 7em; font-weight: 900; text-shadow: 0 .06em 0 rgba(0,0,0,.35); }
.signal.go .sigtext { animation: pulse .3s infinite; }
.early { min-height: 2em; display: flex; gap: .5em; justify-content: center; align-items: center; }

/* clock */
.clock { display: grid; gap: .6em; justify-items: center; text-align: center; }
.target { font-family: var(--font-display); font-size: 5em; color: var(--ink-title); text-shadow: 0 3px 0 rgba(0,0,0,.6); font-weight: 900; line-height: 1; }
.clockface { font-family: var(--font-display); font-size: 9em; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,.6); }
.clockface.hidden { color: var(--ink-muted); animation: pulse 1s infinite; }
.timeline { position: relative; width: 100%; max-width: 60em; height: 5em; margin: 1em 0; }
.timeline .line { position: absolute; left: 0; right: 0; top: 50%; height: .4em; background: var(--surface-inset); border: 2px solid var(--border-stone); box-shadow: var(--shadow-pressed); }
.targetmark, .marker { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1.5em; }
.targetmark { top: 10%; font-size: 2em; } .marker { animation: pop .5s both; }

/* scoreboard */
.scoreboard { display: grid; gap: 1em; justify-items: center; text-align: center; }
.scoreboard h1 { font-size: 3em; font-weight: 900; }
.srows { display: grid; gap: .55em; width: 100%; max-width: 50em; }
.srow { display: grid; grid-template-columns: 2em auto 8em 1fr 4.5em; gap: .7em; align-items: center; font-size: 1.3em; padding: .35em .8em; animation: rise .5s both; text-align: left; }
.srow .sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .85em; }
.srow .fill { transition: width 1s cubic-bezier(.2,.8,.2,1); }
.srow.first { --rim: var(--border-gold); --bevel: var(--shadow-bevel), var(--shadow-glow); --drop: var(--shadow-lift), var(--shadow-hearth); }
.srow .sv { text-align: right; font-family: var(--font-display); font-weight: 900; color: var(--ink-title); text-shadow: var(--engrave); font-variant-numeric: tabular-nums; }
.rank { text-align: center; font-family: var(--font-display); font-weight: 900; color: var(--ink-title); text-shadow: var(--engrave); }

/* ============ phone ============ */
body.phone {
  font-size: 17px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(18, 9, 3, 0.65) 0%, rgba(14, 6, 2, 0.88) 75%, rgba(9, 4, 1, 0.96) 100%),
    url('/img/tavern-splash.png') center center / cover no-repeat,
    var(--surface-page);
  background-attachment: fixed;
}
.phone #app { overflow-x: hidden; height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.phone #timerbar { height: 12px; flex: none; --k: 0px; border-width: 0 0 2px; background: var(--surface-inset); box-shadow: var(--shadow-pressed); }
.phone #timerfill { height: 100%; width: 0; background: linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.25)), var(--gold); }
.phone #me { display: flex; align-items: center; gap: .6em; padding: .6em 1em; min-height: 3.4em; flex: none; background: var(--wood); border-bottom: 3px solid var(--border-stone); box-shadow: inset 0 -.2em 0 var(--c, transparent); }
.phone #me:empty { min-height: 0; padding: 0; border: 0; }
.phone #me .grow { flex: 1; }
.phone #me b { letter-spacing: .08em; text-transform: uppercase; }
.phone #me .score { --k: 999px; border-color: rgba(220,240,255,.6); background: var(--gem); box-shadow: 0 2px 0 rgba(30,14,4,.5); padding: .1em .7em; font-family: var(--font-display); font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,30,60,.7); font-variant-numeric: tabular-nums; }
.phone #me.offline { opacity: .5; }
.phone #me .icon { background: var(--wood); padding: .3em .6em; box-shadow: var(--shadow-bevel); }
.phone #screen { flex: 1; overflow-y: auto; padding: .8em 1.1em 1.5em; display: flex; flex-direction: column; }
.phone #screen > * { flex: 1; display: flex; flex-direction: column; gap: .9em; }
#toast { position: fixed; left: 50%; bottom: 8%; transform: translate(-50%, 2em); --k: 6px; border: 3px solid var(--border-gold); background: var(--well); color: var(--ink); padding: .7em 1.2em; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; max-width: 90%; text-align: center; z-index: 20; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.skip { position: fixed; right: 1em; bottom: calc(1em + env(safe-area-inset-bottom)); --k: 5px; border-width: 3px; background: var(--wood); box-shadow: var(--shadow-bevel); padding: .6em 1.2em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; z-index: 10; }

.join { justify-content: center; text-align: center; }
.join-header { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.join-badge-icon { width: 5.6rem; height: 5.6rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(255,180,50,.45)); animation: bob 4s ease-in-out infinite; }
.join .logo { font-size: clamp(1.7rem, 10vw, 2.6rem); margin-bottom: .3em; }
.join label { display: grid; gap: .3em; text-align: left; color: var(--ink); font-size: .8em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.msg { color: var(--ink-title); }
.bigin { width: 100%; font: inherit; font-size: 1.3rem; font-weight: 500; padding: .7em .8em; --k: 5px; --k: var(--radius-sm); border: 3px solid var(--border-stone); background: var(--scroll); color: var(--ink-scroll); caret-color: var(--scroll-danger); box-shadow: inset 0 3px 6px rgba(150,100,50,.3), var(--shadow-lift); outline: none; text-transform: none; letter-spacing: 0; }
.bigin::placeholder { color: var(--ink-scroll-muted); opacity: 1; }
.bigin:focus { border-color: var(--border-gold); box-shadow: inset 0 3px 6px rgba(150,100,50,.3), var(--shadow-hearth); }
.bigin.code { text-align: center; letter-spacing: .4em; font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--ink-scroll); text-transform: uppercase; }
.phone .btn { font-size: 1.2rem; padding: .9em 1em; }
.phone .btn:active:not(:disabled) { padding-top: calc(.9em + 2px); padding-bottom: calc(.9em - 2px); }
.phone .btn.small { padding: .5em .8em; font-size: .85rem; }

.waitp, .lobbyp { align-items: center; justify-content: center; text-align: center; }
.lobbyp.vip { justify-content: flex-start; align-items: stretch; text-align: center; }
.bigemoji { font-size: 5.5rem; line-height: 1; } .bigemoji.bob { animation: bob 1.6s ease-in-out infinite; }
.waitp h2, .lobbyp h2 { font-size: 1.7rem; color: var(--ink-title); text-shadow: var(--engrave); } .waitp p, .lobbyp p, .dim { color: var(--ink-muted); }
.plist { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; }
.group { display: grid; gap: .5em; text-align: left; margin-top: .5em; }
.group-header-with-icon { display: flex; align-items: center; gap: .8em; margin-bottom: .2em; padding-bottom: .3em; border-bottom: 2px solid var(--border-stone); }
.group-header-with-icon h3 { border-bottom: none !important; padding-bottom: 0 !important; margin: 0 !important; }
.group-art-icon { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.group h3 { color: var(--ink-title); font-family: var(--font-display); font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding-bottom: .3em; border-bottom: 2px solid var(--border-stone); }
.gamecard { display: flex; gap: .8em; align-items: center; text-align: left; padding: .7em .9em; }
.gamecard:disabled { opacity: .65; } .gamecard:active:not(:disabled) { --bevel: var(--shadow-pressed); }
.gamecard:hover:not(:disabled) { --rim: var(--border-gold); }
.gamecard .ge { font-size: 2rem; } .gamecard .gt { display: grid; } .gamecard small { color: var(--ink-muted); font-weight: 500; font-size: .82rem; }
.stepper { --face: var(--well); --bevel: var(--shadow-pressed); display: flex; align-items: center; justify-content: center; gap: .8em; padding: .5em .8em; color: var(--ink-muted); font-size: .9rem; }
.stepper span { flex: 1; text-align: left; } .stepper b { color: var(--ink-title); font-family: var(--font-display); font-size: 1.2rem; min-width: 1.2em; text-align: center; }
.vipbtns { display: grid; gap: .7em; width: 100%; margin-top: 1em; }

.textp .promptp, .choosep .promptp, .drawp .promptp, .padp .step { font-size: 1.3rem; line-height: 1.25; text-wrap: balance; }
.promptp { font-family: var(--font-display); font-weight: 800; padding: .8em 1em; text-align: center; }
.promptp.small { font-size: 1.1rem; }
.step { color: var(--ink-title); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.count { color: var(--ink-muted); text-align: right; margin-top: -.5em; }
.choices { display: grid; gap: .7em; flex: 1; align-content: start; }
.choose-p, .choosep { gap: .8em; }
.choice, .promptp { overflow-wrap: anywhere; }
.choice { --rim: var(--ac, var(--border-stone)); padding: 1em 1em; font-size: 1.2rem; font-weight: 800; text-align: center; min-height: 3.2em; color: var(--ink); }
.choice.colored { --rim: rgba(0,0,0,.45); --face: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.24)), var(--oc); }
.choice:disabled { opacity: .6; }
.choice:active:not(:disabled) { --bevel: var(--shadow-pressed); }
.choice.picked { --rim: var(--border-gold); --bevel: var(--shadow-pressed), var(--shadow-glow); opacity: 1; }
.choosep.grid .choices { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; flex: 1; }
.choosep.grid .choice { min-height: 5.5em; font-size: 1.5rem; }

.drawp { gap: .6em; }
canvas.pad { width: 100%; max-width: 480px; aspect-ratio: 1; --k: 8px; border: 4px solid var(--border-stone); background: var(--surface-scroll); touch-action: none; align-self: center; }
.tools { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; justify-content: center; }
.swatches { display: flex; gap: .3em; flex-wrap: wrap; justify-content: center; }
.sw { width: 2em; height: 2em; border-width: 3px; padding: 0; } .sw.on { border-color: var(--border-gold); box-shadow: var(--shadow-glow); }
.sizes { display: flex; gap: .3em; } .sz { width: 2.4em; height: 2.4em; border-width: 3px; background: var(--wood); display: grid; place-items: center; padding: 0; } .sz i { background: var(--ink); border-radius: 50%; display: block; } .sz.on { border-color: var(--border-gold); }

.tapp { --k: var(--radius-md); --bw: 5px; --face: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.04) 2px 4px), linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.3)), var(--tc); flex: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; margin-top: .3em; }
.tapp.hit { animation: hit .12s; } @keyframes hit { 50% { transform: scale(.96); } }
.taplabel { font-family: var(--font-display); font-size: 3.2rem; font-weight: 900; text-shadow: 0 .06em 0 rgba(0,0,0,.35); } .tapcount { font-family: var(--font-display); font-size: 4rem; font-weight: 900; } .tapp small { margin-top: 1em; opacity: .85; padding: 0 1em; text-align: center; }
.padp { gap: .8em; }

/* ============ v2: lobby shelves, packs, controllers, arcade ============ */
html, body { overscroll-behavior: none; }
.small { font-size: .85rem; }
.qtag { margin-left: .8em; background: var(--well); color: var(--ink-title); padding: .1em .8em; letter-spacing: .1em; }

/* big-screen lobby: which games exist and which need more players */
.gameshelf { display: grid; gap: .5em; width: 100%; max-width: 78em; margin-top: .4em; }
.shelfrow { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; align-items: center; }
.shelfcat { color: var(--ink-title); font-family: var(--font-display); font-size: .75em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: .5em; min-width: 9em; text-align: right; }
.gametag.locked { opacity: .7; }
.gametag small { color: var(--ink-title); }
.shelfnote { color: var(--ink-muted); font-size: .8em; margin-top: .3em; }

/* arcade (canvas) */
.host[data-screen=arcade] #stage { padding: 0; }
.host[data-screen=arcade] #strip, .host[data-screen=arcade] #top { display: none; }
.host[data-screen=arcade] #app { grid-template-rows: 1fr; }
.arcadewrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: #000; }
.arcadecv { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.arcaderound { position: absolute; left: 1em; top: .8em; background: rgba(34,22,14,.85); padding: .2em .9em; font-size: .85em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }

/* phone lobby */
.lobbyp.vip { gap: .7em; }
.lobbyp .shelf { display: grid; gap: .7em; text-align: left; }
.lobbyp .group h3 { display: flex; align-items: baseline; gap: .6em; }
.lobbyp .group h3 small { font-family: var(--font-sans); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-muted); font-size: .8rem; }
.gamecard { width: 100%; color: inherit; }
.gamecard .gt { flex: 1; min-width: 0; }
.gamecard .gr { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--ink-muted); white-space: nowrap; align-self: flex-start; }
.gamecard.locked { opacity: .5; filter: saturate(.4); }
.practice { display: flex; gap: .6em; align-items: center; color: var(--ink-muted); font-size: .9rem; padding: .5em .2em; text-align: left; }
.practice input { width: 1.3em; height: 1.3em; flex: none; accent-color: var(--gold); }

.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.7); }
.sheet[hidden] { display: none; }
.sheetcard { --k: var(--radius-md); --bw: 4px; --rim: var(--border-gold); --face: var(--rivets), var(--wood); width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; gap: .8em; padding: 1.1em 1.2em calc(1.1em + env(safe-area-inset-bottom)); animation: sheetup .3s cubic-bezier(.2,.9,.3,1.1); text-align: left; }
.sheetcard.still { animation: none; }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
.sheethead { display: flex; align-items: center; gap: .8em; padding-bottom: .6em; border-bottom: 2px solid var(--border-gold); }
.sheethead .ge { font-size: 2.4rem; }
.sheethead h2 { font-size: 1.35rem; color: var(--ink-title); text-shadow: var(--engrave); } .sheethead small { color: var(--ink-muted); }
.sheethead > div { flex: 1; }
.sheethead .icon { border-width: 3px; background: var(--wood); box-shadow: var(--shadow-bevel); padding: .4em .7em; font-size: 1rem; }
.sheetbody { flex: 1; overflow-y: auto; display: grid; gap: .7em; align-content: start; min-height: 0; padding-right: .2em; }
.sheetbody p { margin: 0; line-height: 1.4; }
.sheetbody > div { display: grid; gap: 1.1em; }
.startbtn { flex: none; }
.packhead { display: flex; justify-content: space-between; align-items: baseline; gap: .3em .8em; flex-wrap: wrap; padding-top: .4em; border-top: 2px solid var(--border-stone); }
.packhead b { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-title); }
.packtools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.phone .packtools .btn.small { min-width: 0; padding: .7em .4em; font-size: .95rem; }
.packgroup + .packgroup { margin-top: .4em; }
.packgroup h4 { margin: 0 0 .6em; color: var(--ink-muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.packs { display: flex; flex-wrap: wrap; gap: .7em; }
.pack { display: inline-flex; align-items: center; gap: .4em; background: var(--well); box-shadow: var(--shadow-pressed); padding: .6em 1em .6em .75em; gap: .55em; font-size: 1rem; font-weight: 800; }
.pack .pe { font-size: 1.3rem; } .pack small { color: var(--ink-muted); font-weight: 500; font-size: .8rem; }
.pack.on { border-color: var(--border-gold); background: linear-gradient(rgba(0,0,0,0), rgba(120,60,0,.22)), var(--gold); color: var(--on-gold); box-shadow: var(--shadow-bevel); }
.pack.on small { color: rgba(27,23,18,.75); }
.lineup { display: grid; gap: .45em; }
.lrow { display: flex; align-items: center; gap: .7em; padding: .5em .8em; }
.lrow b { width: 1.4em; font-family: var(--font-display); color: var(--ink-title); } .lrow .ge { font-size: 1.4rem; } .lrow span:nth-of-type(2) { flex: 1; }
.lrow.last { --rim: var(--border-gold); --bevel: var(--shadow-bevel), var(--shadow-glow); --drop: var(--shadow-lift), var(--shadow-hearth); } .lrow em { color: var(--ink-title); font-style: normal; font-weight: 900; }
body.sheet-open { overflow: hidden; }

/* phone controllers (simple buttons only: bigtap, turnpad, gridpad) */
.phone[data-screen=controller] #screen { padding: 0; overflow: hidden; }
.phone[data-screen=controller] #me { min-height: 2.6em; padding-top: .3em; padding-bottom: .3em; }
.controller { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0 !important; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ctltitle { text-align: center; color: var(--ink-title); font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; padding: .55em 0 .25em; }
.ctlbanner { text-align: center; font-size: 1.1rem; font-weight: 800; padding: .2em .6em .5em; display: none; } .ctlbanner.show { display: block; color: var(--ink-title); }
.bigtap { --k: var(--radius-lg); --bw: 5px; --face: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.04) 2px 4px), linear-gradient(rgba(255,255,255,.16), rgba(0,0,0,.28)), var(--bc, var(--gold)); flex: 1; display: grid; place-items: center; margin: .4em .9em .9em; color: var(--on-gold); font-family: var(--font-display); font-size: 3.6rem; font-weight: 900; text-shadow: 0 3px 0 rgba(0,0,0,.35); touch-action: none; }
.bigtap.hit { animation: hit .12s; --bevel: var(--shadow-pressed); }
.turnpad { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .8em; padding: .4em .9em .9em; }
.turnpad .bigtap { margin: 0; font-size: 2.2rem; color: #fff; } .turnpad .l { --bc: var(--azure); } .turnpad .r { --bc: var(--arcane); }
.gridpad { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: .65em; padding: .4em .9em .9em; }
.gridbtn { --k: var(--radius-md); --bw: 4px; --face: var(--wood); --bevel: var(--shadow-bevel); display: grid; place-items: center; font-family: var(--font-display); font-size: 3.1rem; font-weight: 900; color: var(--ink-title); text-shadow: 0 3px 0 rgba(0,0,0,.6); touch-action: none; }
.gridbtn.hit { animation: hit .12s; --rim: var(--border-gold); --face: linear-gradient(rgba(0,0,0,0), rgba(120,60,0,.22)), var(--gold); --bevel: var(--shadow-pressed); color: var(--on-gold); text-shadow: none; }

/* A-D answer colours (values in :root) */
.optgrid .opt:nth-child(4n+1) { --ac: var(--a1); } .optgrid .opt:nth-child(4n+2) { --ac: var(--a2); }
.optgrid .opt:nth-child(4n+3) { --ac: var(--a3); } .optgrid .opt:nth-child(4n+4) { --ac: var(--a4); }
.optgrid .opt .tag { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.24)), var(--ac, var(--surface-inset)); color: var(--on-gold); border-color: rgba(0,0,0,.4); }
.choices .choice:nth-child(4n+1) { --ac: var(--a1); } .choices .choice:nth-child(4n+2) { --ac: var(--a2); }
.choices .choice:nth-child(4n+3) { --ac: var(--a3); } .choices .choice:nth-child(4n+4) { --ac: var(--a4); }
.choice:not(.colored) { display: flex; align-items: center; justify-content: center; gap: .6em; }
.choice .ctag { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-color: rgba(0,0,0,.4); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.24)), var(--ac); color: var(--on-gold); font-size: .8em; font-weight: 900; }

/* keep the whole lobby (join box, players, every game) on one screen */
.lobby { gap: .7em; }
.lobby .logo { font-size: 3.2em; }
.joinbox { padding: .8em 2em; gap: 2.2em; }
.codechar { font-size: 2.6em; }
.lobbyplayers { min-height: 3.6em; gap: .6em; }
.lobby .gameshelf { font-size: .82em; gap: .35em; }
.lobby .shelfnote { font-size: .85em; }

/* landing page: host or join */
body.landing {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  padding: 2.5rem max(2rem, 6vw);
  background:
    linear-gradient(90deg, rgba(6, 11, 20, 0.94) 0%, rgba(8, 14, 26, 0.85) 34%, rgba(10, 18, 30, 0.28) 62%, rgba(5, 8, 16, 0.06) 100%),
    url('/img/snowy-outside.png') 76% center / cover no-repeat,
    #0c121e;
  background-attachment: fixed;
}
#splash-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.landing-fireglow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 45% at 74% 48%, rgba(255, 175, 70, 0.35), transparent 70%),
    radial-gradient(ellipse 35% 35% at 72% 38%, rgba(255, 215, 110, 0.22), transparent 60%);
  animation: hearthPulse 4.8s ease-in-out infinite alternate;
}
@keyframes hearthPulse {
  0% { opacity: 0.7; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.8; transform: scale(1); }
}
.menu {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 31rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  text-align: left;
  margin: 0;
}
.menu-header {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.lantern-swing-wrap {
  position: absolute;
  left: -1.6rem;
  top: -3.2rem;
  z-index: 10;
  transform-origin: 50% 0;
  animation: lanternSwing 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
.splash-lantern {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  filter: drop-shadow(0 0 16px rgba(255, 180, 50, 0.85)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7));
}
@keyframes lanternSwing {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}
.logo-plaque {
  position: relative;
  width: 100%;
  padding: 1.6rem 2.2rem 1.4rem;
  background: var(--rim);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift), 0 8px 25px rgba(0, 0, 0, 0.65), 0 0 30px rgba(245, 160, 50, 0.25);
  text-align: left;
}
.logo-plaque::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--face);
  border-radius: calc(var(--radius-md) - 4px);
  box-shadow: var(--shadow-bevel);
  z-index: 0;
}
.logo-plaque > * { position: relative; z-index: 1; }

.snow-pillow {
  position: absolute;
  top: -14px;
  left: -6px;
  right: -6px;
  height: 24px;
  background:
    radial-gradient(ellipse 20% 70% at 20% 40%, #ffffff 0%, #e2f0fc 65%, transparent 70%),
    radial-gradient(ellipse 26% 85% at 50% 35%, #ffffff 0%, #e0effc 65%, transparent 70%),
    radial-gradient(ellipse 22% 75% at 80% 40%, #ffffff 0%, #e2f0fc 65%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #e6f2fb 55%, #c0daf3 100%);
  border-radius: 14px 14px 6px 6px;
  box-shadow: 0 4px 8px rgba(10, 20, 35, 0.4), inset 0 2px 2px #fff;
  pointer-events: none;
  z-index: 4;
}
.snow-pillow.sm {
  top: -10px;
  left: -4px;
  right: -4px;
  height: 18px;
  border-radius: 10px 10px 5px 5px;
}
.menu .logo {
  font-size: clamp(2.3rem, 6vw, 3.8rem);
  line-height: 1.05;
  text-align: left;
}
.tagline {
  color: var(--ink-muted);
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-style: italic;
  margin-top: .35rem;
  line-height: 1.35;
}
.menucards {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
}
.menucard {
  --rim: linear-gradient(135deg, #ffd889 0%, var(--border-gold) 45%, #7d5530 100%);
  --face: radial-gradient(ellipse at 50% 20%, rgba(255, 230, 180, 0.08), transparent 70%), var(--wood);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.15rem;
  row-gap: .25rem;
  align-items: start;
  text-align: left;
  padding: 1.35rem 1.5rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.menucard:hover {
  transform: translateX(5px) translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.7), 0 0 24px rgba(245, 189, 79, 0.55);
}
.menucard:active { --bevel: var(--shadow-pressed); }
.menucard .snow-pillow {
  grid-column: 1 / -1;
}
.card-icon-wrap {
  grid-row: 1 / 4;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(255, 185, 60, 0.45));
  margin-bottom: 0;
}
.card-art-icon {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.menucard:hover .card-art-icon {
  transform: scale(1.08) rotate(2deg);
}
.menucard .mi { font-size: 2.1rem; line-height: 1; }
.menucard b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink-title);
  text-shadow: var(--engrave);
  letter-spacing: .04em;
  margin: 0;
}
.menucard small {
  color: var(--ink-muted);
  font-size: .92rem;
  line-height: 1.35;
}
.card-action {
  grid-column: 2 / 3;
  margin-top: .35rem;
  font-weight: 800;
  color: var(--gold);
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.menucard form {
  grid-column: 2 / 3;
  display: flex;
  gap: .5rem;
  width: 100%;
  margin-top: .35rem;
}
.menucard form .bigin { font-size: 1.3rem; padding: .45em .6em; min-width: 0; }
.enter-inn-btn {
  white-space: nowrap;
  padding: .65em 1.2em;
  font-family: var(--font-display);
  letter-spacing: .04em;
}
.backlink { color: var(--ink-muted); font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; text-align: left; padding: .2em 0; }

@media (max-width: 860px) {
  body.landing {
    justify-content: center;
    padding: 2rem 1.2rem;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(8, 14, 26, 0.88) 0%, rgba(6, 11, 20, 0.96) 100%),
      url('/img/snowy-outside.png') 76% center / cover no-repeat,
      #0c121e;
  }
  .menu {
    max-width: 28rem;
    text-align: center;
  }
  .menu-header {
    justify-content: center;
  }
  .logo-plaque {
    text-align: center;
  }
  .menu .logo {
    text-align: center;
  }
  .backlink {
    text-align: center;
  }
}

/* waiting-for-players lobby: glowing room code, bouncing pips */
.lobby .code { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 .1em rgba(255,215,94,0.3)); } 50% { filter: drop-shadow(0 0 .6em rgba(255,215,94,.75)); } }
.lobby .logo { animation: bob 3s ease-in-out infinite; }
.lobbyplayers.empty { min-height: 1em; }
.lobby .status { font-size: 1.6em; display: flex; align-items: center; justify-content: center; gap: .4em; }
.dots { display: inline-flex; gap: .25em; margin-left: .2em; }
.dots i { width: .35em; height: .35em; background: var(--gold); animation: dotbounce 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotbounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-.5em); opacity: 1; } }
.bobphone { display: inline-block; animation: bob 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .floaters { display: none; }
}

/* ============ tavern lobby scene ============ */
.lobby {
  position: relative;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 1.5em 2em;
  gap: 1.6em;
}
.lobby > * { position: relative; z-index: 2; }

.lobby .logo-plaque {
  width: auto;
  max-width: 44rem;
  text-align: center;
  padding: 1.1rem 2.5rem 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.65), 0 0 25px rgba(245, 160, 50, 0.25);
}
.host .snow-pillow { display: none; }
.lobby .logo { font-size: 3.4em; animation: none; }
.lobby .status { font-family: var(--font-display); font-size: 1.5em; color: var(--ink-title); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.lobby .tagline { font-family: var(--font-display); font-style: italic; color: var(--ink-muted); font-size: 1.15em; margin-top: -.5em; }

.joinsep {
  width: 2px;
  height: 3.8em;
  background: linear-gradient(180deg, transparent, var(--border-gold), transparent);
}

/* the barkeep's speech plaque and the sound button */
.barkeep { position: fixed; left: 1.2em; bottom: 1.2em; z-index: 60; max-width: min(34em, 70vw); display: flex; gap: .7em; align-items: center; padding: .6em 1em; font-family: var(--font-display); font-size: calc(10px + 1vmin); color: var(--ink-scroll);
  background: var(--scroll); border: 3px solid var(--border-stone); box-shadow: var(--shadow-bevel), 0 .3em 1.2em rgba(0,0,0,.6); border-radius: 14px;
  opacity: 0; transform: translateY(1.2em); pointer-events: none; transition: opacity .3s, transform .3s; }
.barkeep.show { opacity: 1; transform: none; }
.barkeep .bf { width: 2.4em; height: 2.4em; font-size: 1em; line-height: 1; flex-shrink: 0; } .barkeep .bq { font-weight: 800; line-height: 1.25; }
.soundbtn { position: fixed; right: 1.2em; bottom: 1.2em; z-index: 61; padding: .45em .9em; font: 800 calc(9px + .9vmin) var(--font-sans); letter-spacing: .06em; color: var(--ink); background: var(--wood); border: 3px solid var(--border-stone); border-radius: 999px; box-shadow: var(--shadow-bevel), var(--shadow-lift); cursor: pointer; }
.soundbtn:hover { border-color: var(--border-gold); } .soundbtn.waiting { border-color: var(--border-gold); animation: pulse 1.6s ease-in-out infinite; color: var(--ink-title); }
body:not(.host) .barkeep, body:not(.host) .soundbtn { display: none; }

/* fullscreen button */
.fsbtn { position: fixed; right: 1.2em; bottom: 4.8em; z-index: 61; width: 2.6em; height: 2.6em; padding: 0; font-size: calc(10px + 1vmin); line-height: 1; color: var(--ink); background: var(--stone); border: 3px solid var(--border-stone); box-shadow: var(--shadow-bevel); cursor: pointer; opacity: .8; }
.fsbtn:hover { border-color: var(--border-gold); opacity: 1; }
.phone #me .fsicon { font-size: 1.1rem; line-height: 1; }
:fullscreen .fsbtn, :-webkit-full-screen .fsbtn { opacity: .45; }

/* ============ The Chameleon ============ */
.cham { display: grid; gap: 1em; justify-items: center; text-align: center; width: 100%; max-width: 64em; margin: 0 auto; }
.cham-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; width: 100%; }
.cham-grid.mini { max-width: 32em; }
.cham-card {
  --k: var(--radius-sm); --bw: 3px;
  --rim: linear-gradient(#c99560, var(--border-stone) 45%, #7d5530);
  --face: var(--scroll); --bevel: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(150,100,50,.25);
  background: var(--rim); border-radius: var(--k); box-shadow: var(--shadow-lift);
  padding: .75em .5em; font-weight: 800; font-size: 1.15em; color: var(--ink-scroll);
  display: grid; place-items: center; position: relative; isolation: isolate;
  animation: pop .3s cubic-bezier(.34,1.56,.64,1) backwards;
}
.cham-card::before {
  content: ""; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--face); box-shadow: var(--bevel); border-radius: max(3px, calc(var(--k) - var(--bw)));
}
.cham-card.secret {
  --rim: linear-gradient(#ffe29a, var(--border-gold) 45%, #b37822);
  --face: linear-gradient(135deg, #fff2cb, #ffd889);
  color: #3a1f05; box-shadow: var(--shadow-hearth); transform: scale(1.05); font-weight: 900;
}
.cham-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; width: 100%; align-items: start; }
.cham-cluelist { background: var(--well); border: 2px solid var(--border-stone); border-radius: var(--radius-md); padding: 1em; text-align: left; }
.cham-cluebox { display: grid; gap: .6em; margin-top: .6em; }
.cham-cluerow { display: flex; align-items: center; gap: .8em; font-size: 1.15em; }
.cham-cluetext { font-family: var(--font-display); font-weight: 800; color: var(--ink-title); font-size: 1.2em; }
.cham-status { font-size: 1.2em; color: var(--ink-muted); margin: .4em 0; }
.cham-secret { color: var(--gold); font-size: 1.3em; }

/* Spyfall reuses the Chameleon card styles; its location list is longer, so the cards get smaller */
.spy .cham-grid { grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .45em; }
.spy .cham-card { font-size: .95em; padding: .45em .4em; }

/* ============ Wavelength ============ */
.wave { display: grid; gap: 1.2em; justify-items: center; text-align: center; width: 100%; max-width: 60em; margin: 0 auto; }
.wave-clue { margin: .5em 0; }
.wave-clue h1 { font-family: var(--font-display); font-size: 2.8em; color: var(--ink-title); text-shadow: var(--engrave); }
.wave-bar { display: grid; grid-template-columns: 12em 1fr 12em; gap: 1em; align-items: center; width: 100%; }
.wave-label { font-family: var(--font-display); font-size: 1.25em; font-weight: 800; color: var(--gold); }
.wave-label.left { text-align: right; } .wave-label.right { text-align: left; }
.wave-track {
  position: relative; height: 3.8em; border-radius: 1.9em;
  background: linear-gradient(90deg, #3d7ca8, #b07f48 50%, #df6e35);
  border: 3px solid var(--border-stone); box-shadow: inset 0 3px 6px rgba(0,0,0,.6);
  overflow: visible; display: flex; align-items: center;
}
.wave-curtain {
  width: 100%; height: 100%; border-radius: inherit;
  background: repeating-linear-gradient(92deg, rgba(255,220,170,.05) 0 3px, transparent 3px 10px), var(--surface-panel);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1em; color: var(--ink-muted);
}
.wave-zone { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.wave-zone.outer { background: rgba(245,189,79,.3); border-radius: .4em; }
.wave-zone.inner { background: rgba(245,189,79,.55); border-radius: .4em; }
.wave-zone.bullseye { background: #ffe29a; border-radius: .4em; box-shadow: 0 0 16px rgba(255,226,154,.9); }
.wave-targetline { position: absolute; top: -6px; bottom: -6px; width: 4px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 8px #fff; z-index: 3; }
.wave-pin {
  position: absolute; top: -2.2em; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; z-index: 4;
}
.wave-pin small { background: rgba(0,0,0,.75); padding: 1px 5px; border-radius: 6px; font-weight: 800; font-size: .75em; color: #fff; }

/* Phone slider */
.sliderp { display: grid; gap: 1em; width: 100%; }
.sliderval { font-family: var(--font-display); font-size: 3em; font-weight: 900; color: var(--gold); text-align: center; }
.bigslider { width: 100%; height: 2.2em; accent-color: var(--gold); }
.sliderends { display: flex; justify-content: space-between; gap: 1em; font-weight: 700; color: var(--ink-muted); font-size: .95em; }
.sliderends span:last-child { text-align: right; }

/* Phone spectrum (Wavelength's Psychic): the scale with the secret target zone on it */
.spect { display: grid; gap: .5em; width: 100%; margin: .2em 0 .6em; }
.spect-track {
  position: relative; height: 3.2em; border-radius: 1.6em;
  background: linear-gradient(90deg, #3d7ca8, #b07f48 50%, #df6e35);
  border: 3px solid var(--border-stone); box-shadow: inset 0 3px 6px rgba(0,0,0,.6);
}
.spect-zone {
  position: absolute; top: -6px; bottom: -6px; width: 18%; transform: translateX(-50%);
  background: rgba(255,226,154,.85); border: 2px solid #fff; border-radius: .6em;
  box-shadow: 0 0 14px rgba(255,226,154,.9); display: grid; place-items: center; font-size: 1.3em;
}
.spect-ends { display: flex; justify-content: space-between; gap: 1em; font-family: var(--font-display); font-weight: 800; color: var(--gold); font-size: 1.05em; line-height: 1.2; }
.spect-ends span:last-child { text-align: right; }

/* ============ Herd Mentality ============ */
.herd { display: grid; gap: 1em; justify-items: center; text-align: center; width: 100%; max-width: 58em; margin: 0 auto; }
.pinkcow-holder, .pinkcow-alert {
  background: linear-gradient(135deg, #f78fb3, #e66767); color: #fff;
  padding: .4em 1em; border-radius: 2em; font-weight: 800; font-size: 1.15em; box-shadow: var(--shadow-lift);
}
.herd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 1em; width: 100%; }
.herd-group {
  --k: var(--radius-sm); --bw: 3px;
  --rim: linear-gradient(#c99560, var(--border-stone) 45%, #7d5530);
  --face: var(--well);
  background: var(--rim); border-radius: var(--k); padding: 1em .8em;
  display: grid; gap: .5em; justify-items: center; position: relative; isolation: isolate;
  animation: pop .3s cubic-bezier(.34,1.56,.64,1) backwards;
}
.herd-group::before {
  content: ""; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--face); border-radius: max(3px, calc(var(--k) - var(--bw)));
}
.herd-group.winner {
  --rim: linear-gradient(#ffe29a, var(--border-gold) 45%, #b37822);
  --face: linear-gradient(135deg, rgba(245,189,79,.2), rgba(245,189,79,.05)), var(--surface-panel);
  box-shadow: var(--shadow-hearth); transform: scale(1.04);
}
.herd-answer { font-family: var(--font-display); font-size: 1.5em; font-weight: 800; color: var(--ink-title); }
.herd-count { font-size: 1.1em; color: var(--gold); font-weight: 700; }
.herd-avatars { display: flex; gap: 4px; justify-content: center; }

/* ============ Just One ============ */
.justone { display: grid; gap: 1em; justify-items: center; text-align: center; width: 100%; max-width: 56em; margin: 0 auto; }
.justone-warning { background: var(--crimson); color: #fff; padding: .4em 1em; border-radius: 2em; font-weight: 800; font-size: 1.1em; }
.justone-wordbox {
  background: var(--scroll); color: var(--ink-scroll); border: 4px solid var(--border-stone);
  border-radius: var(--radius-md); padding: 1em 2.5em; box-shadow: var(--shadow-lift);
}
.justone-wordbox h1 { font-family: var(--font-display); font-size: 3.2em; margin: 0; color: #2a1405; letter-spacing: .06em; }
.justone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: 1em; width: 100%; }
.justone-card {
  background: var(--well); border: 2px solid var(--border-stone); border-radius: var(--radius-sm);
  padding: .9em .6em; display: grid; gap: .4em; justify-items: center; position: relative;
  animation: pop .3s cubic-bezier(.34,1.56,.64,1) backwards;
}
.justone-text { font-family: var(--font-display); font-size: 1.6em; font-weight: 800; color: var(--ink-title); }
.justone-card.cancelled { opacity: .55; }
.justone-card.cancelled .justone-text { text-decoration: line-through; color: #a87265; }
.justone-stamp { background: var(--crimson); color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 900; font-size: .8em; }
.justone-ok { background: var(--emerald); color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 900; font-size: .8em; }

/* ============ Hearthstone Reusable Character & Component System ============ */

/* ---- Character Avatar Component ---- */
.char-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  user-select: none;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), filter .2s;
}
.char-avatar:hover {
  transform: scale(1.06) translateY(-2px);
}
.char-avatar:active {
  transform: scale(0.96) translateY(1px);
}

.char-avatar--xs { width: 1.6em; height: 1.6em; font-size: .85em; }
.char-avatar--sm { width: 2.2em; height: 2.2em; font-size: 1.05em; }
.char-avatar--md { width: 3.1em; height: 3.1em; font-size: 1.45em; }
.char-avatar--lg { width: 4.4em; height: 4.4em; font-size: 2.15em; }
.char-avatar--xl { width: 6.2em; height: 6.2em; font-size: 3.05em; }

.char-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(8, 4, 2, 0.65),
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.65);
}
.char-bg {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 35%, transparent 60%),
    radial-gradient(circle at 50% 50%, var(--c, #3d7ca8) 32%, rgba(12, 6, 3, 0.95) 100%);
  z-index: 1;
}
.char-glyph {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
  transition: transform .2s ease;
}
.char-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.char-avatar:hover .char-glyph {
  transform: translateY(0) scale(1.08);
}
.char-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #231208;
  box-shadow:
    inset 0 0 0 2px #b88244,
    inset 0 2px 2px rgba(255, 235, 170, 0.75),
    inset 0 -2px 3px rgba(0, 0, 0, 0.7),
    0 3px 8px rgba(0, 0, 0, 0.65);
  z-index: 3;
  pointer-events: none;
}
.char-avatar.is-vip .char-rim,
.char-avatar.is-winner .char-rim,
.char-avatar.is-rank .char-rim {
  border-color: #231208;
  box-shadow:
    inset 0 0 0 2.5px #ffcf40,
    inset 0 2px 2px #fff6cc,
    inset 0 -2px 3px rgba(120, 80, 20, 0.8),
    0 0 14px rgba(247, 202, 84, 0.85);
}
.char-shine {
  position: absolute;
  top: 7%;
  left: 12%;
  width: 42%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.18) 60%, transparent 100%);
  transform: rotate(-25deg);
  z-index: 4;
  pointer-events: none;
}
.char-avatar:hover .char-shine {
  animation: jewelGlint 1.2s ease-in-out infinite alternate;
}
@keyframes jewelGlint {
  0% { opacity: 0.75; transform: rotate(-25deg) scale(0.95); }
  100% { opacity: 1; transform: rotate(-25deg) scale(1.1); filter: brightness(1.3); }
}

/* Badges */
.char-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.char-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
.badge-vip {
  top: -22%;
  left: 50%;
  width: .85em;
  height: .85em;
  transform: translateX(-50%);
  font-size: .65em;
  box-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 80, 0.7));
  animation: vipCrownBob 2.6s ease-in-out infinite alternate;
}
@keyframes vipCrownBob {
  0% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  100% { transform: translateX(-50%) translateY(-3px) rotate(2deg); }
}
.badge-winner, .badge-rank {
  bottom: -10%;
  right: -10%;
  font-size: .56em;
  background: var(--rim);
  border: 1.5px solid #ffeaa7;
  padding: .1em .25em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}
.badge-winner.svg-icon {
  width: 1.25em;
  height: 1.25em;
  padding: .12em;
}
.badge-ready {
  bottom: -8%;
  right: -8%;
  font-size: .45em;
  font-weight: 900;
  background: #2ecc71;
  color: #fff;
  border: 2px solid #fff;
  width: 1.4em;
  height: 1.4em;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}
.badge-thinking {
  top: -14%;
  right: -10%;
  font-size: .55em;
  animation: thinkPulse 1.4s ease-in-out infinite alternate;
}
@keyframes thinkPulse {
  0% { transform: scale(0.9); opacity: 0.75; }
  100% { transform: scale(1.18); opacity: 1; }
}
.badge-away {
  bottom: -10%;
  left: -8%;
  font-size: .45em;
  opacity: .85;
}

/* Mood states */
.char-avatar.is-bob { animation: charBob 1.6s ease-in-out infinite alternate; }
@keyframes charBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}
.char-avatar.is-thinking .char-frame {
  animation: thinkGlow 1.8s ease-in-out infinite alternate;
}
@keyframes thinkGlow {
  0% { box-shadow: 0 0 6px var(--c, #3d7ca8); }
  100% { box-shadow: 0 0 18px var(--c, #3d7ca8), 0 0 28px rgba(255, 220, 100, .5); }
}
.char-avatar.is-streak .char-frame {
  box-shadow:
    0 0 18px #ff5500,
    0 0 30px #ffbb00,
    inset 0 0 8px #ffdd66;
  animation: streakFlare 1.4s ease-in-out infinite alternate;
}
@keyframes streakFlare {
  0% { filter: brightness(1) drop-shadow(0 0 6px #ff4400); }
  100% { filter: brightness(1.3) drop-shadow(0 0 16px #ffaa00); }
}
.char-avatar.is-winner {
  animation: championPulse 2.8s ease-in-out infinite alternate;
}
.char-avatar.is-winner .char-rim {
  border-color: #ffd875;
  box-shadow:
    inset 0 2px 2px #fff,
    inset 0 -2px 4px #704505,
    0 0 20px rgba(255, 215, 75, 0.9),
    0 0 35px rgba(255, 180, 40, 0.5);
}
@keyframes championPulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.05); filter: brightness(1.15); }
}
.char-avatar.is-away {
  filter: grayscale(0.85) opacity(0.55);
}

/* ---- Reusable Character Chip ---- */
.char-chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .25em .85em .25em .3em;
  background: linear-gradient(135deg, rgba(46, 26, 14, 0.95), rgba(24, 12, 6, 0.98));
  border: 2px solid #754d2b;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 230, 180, .2);
  color: var(--ink);
  font-family: var(--font-sans);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.char-chip:hover {
  transform: translateY(-2px);
  border-color: #dca234;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .65), 0 0 12px rgba(220, 162, 52, .3);
}
.char-chip.is-vip {
  border-color: #dca234;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 12px rgba(220, 162, 52, 0.35);
}
.chip-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.chip-name {
  font-weight: 800;
  font-size: 1.05em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.chip-title {
  font-size: .75em;
  color: #e5b974;
  letter-spacing: .02em;
}
.chip-score {
  margin-left: auto;
  font-weight: 900;
  font-size: 1.1em;
  color: #ffd24d;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  padding: 0 .3em;
}

/* Avatar list container */
.char-avatar-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4em;
  align-items: center;
}

/* ---- Reusable Wood & Parchment Card ---- */
.tavern-card {
  position: relative;
  border-radius: var(--radius-md);
  transition: transform .2s, box-shadow .2s;
}
.tavern-card--wood {
  background: linear-gradient(135deg, #ffd889 0%, var(--border-gold) 45%, #7d5530 100%);
  box-shadow: var(--shadow-lift), 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: 3px;
}
.tavern-card--wood .card-face {
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 230, 180, 0.08), transparent 70%), var(--wood);
  border-radius: calc(var(--radius-md) - 3px);
  box-shadow: var(--shadow-bevel);
  padding: 1.2rem 1.4rem;
}
.tavern-card--parchment {
  background: linear-gradient(135deg, #d8b88a 0%, #aa8455 50%, #5d4023 100%);
  box-shadow: var(--shadow-lift), 0 6px 18px rgba(0, 0, 0, 0.55);
  padding: 3px;
}
.tavern-card--parchment .card-face {
  background: linear-gradient(180deg, #f7ecd5 0%, #ecd7b7 60%, #e2c59d 100%);
  color: var(--ink-scroll);
  border-radius: calc(var(--radius-md) - 3px);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(90, 50, 20, 0.25);
  padding: 1.2rem 1.4rem;
}

/* ---- Tavern Score Badge ---- */
.tavern-score-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  background: linear-gradient(180deg, #3d2310, #221206);
  border: 2px solid #dca234;
  border-radius: 999px;
  padding: .25em .8em;
  font-weight: 900;
  color: #ffd966;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 240, 180, .3);
  position: relative;
}
.tavern-score-badge .coin-icon { width: 1.2em; height: 1.2em; font-size: 1.15em; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.score-delta {
  position: absolute;
  top: -65%;
  right: -10%;
  font-size: .85em;
  font-weight: 900;
  padding: .1em .35em;
  border-radius: 999px;
  animation: deltaPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.score-delta.plus { background: #27ae60; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.score-delta.minus { background: #c0392b; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }

/* ---- Hearthstone Burning Rope Timer ---- */
.timer-rope-wrap {
  position: relative;
  width: 100%;
  height: 16px;
  display: none;
  align-items: center;
}
.timer-rope-wrap.active {
  display: flex;
}
.timer-rope-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: #150c05;
  border: 2px solid #54331a;
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85);
  overflow: visible;
}
.timer-rope-fuse {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(45deg, #422612 0px, #422612 4px, #583318 4px, #583318 8px),
    linear-gradient(90deg, #3d200e 0%, #a44f12 65%, #ff8c1a 90%, #fff6d0 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 140, 26, 0.7);
  transition: width .1s linear;
}
.timer-rope-spark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 10;
  transition: left .1s linear;
}
.spark-flame {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #fff176 30%, #ff6d00 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 14px #ff6600, 0 0 26px #ffea00;
  animation: ropeSizzle .22s ease-in-out infinite alternate;
}
@keyframes ropeSizzle {
  0% { transform: scale(0.85) rotate(-6deg); filter: brightness(1); }
  100% { transform: scale(1.25) rotate(6deg); filter: brightness(1.5); }
}
.timer-rope-wrap.urgent .spark-flame {
  box-shadow: 0 0 22px #ff2200, 0 0 38px #ffcc00;
  animation: ropeSizzleRapid .12s ease-in-out infinite alternate;
}
@keyframes ropeSizzleRapid {
  0% { transform: scale(1) translate(-1px, 0); }
  100% { transform: scale(1.4) translate(1px, -1px); }
}
.timer-rope-wrap.critical {
  animation: ropeTremble .1s infinite alternate;
}
@keyframes ropeTremble {
  0% { transform: translateY(-1px); }
  100% { transform: translateY(1px); }
}

/* ---- Podium Component ---- */
.podium-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  animation: enter .5s both;
}
.podium-title {
  font-family: var(--font-display);
  font-size: 2.6em;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .8), 0 0 24px rgba(255, 190, 60, 0.6);
  margin: 0;
}
.podium-ranks {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
  padding-top: 1rem;
}
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 12rem;
}
.podium-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-bottom: .6rem;
  animation: rise .6s both;
}
.podium-name {
  font-size: 1.25em;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}
.podium-title {
  font-size: .85em;
  color: #e5b974;
}
.podium-pedestal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .8), inset 0 2px 2px rgba(255, 255, 255, .3);
  position: relative;
}
.pedestal-rank {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3em;
  padding: .4em 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}
.pedestal-first {
  order: 2;
}
.pedestal-first .podium-pedestal {
  height: 10rem;
  background: linear-gradient(180deg, #d4a74b 0%, #946922 45%, #52370e 100%);
  border: 3.5px solid #ffefa4;
  color: #fff6d0;
  box-shadow:
    0 0 32px rgba(255, 205, 55, 0.55),
    inset 0 3px 5px rgba(255, 255, 255, 0.65),
    0 12px 28px rgba(0, 0, 0, 0.85);
}
.pedestal-first .podium-player {
  position: relative;
}
.pedestal-first .podium-player::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 90, 0.35) 0%, rgba(255, 170, 40, 0.15) 50%, transparent 72%);
  animation: championHalo 3.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes championHalo {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
  100% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}
.pedestal-second {
  order: 1;
}
.pedestal-second .podium-pedestal {
  height: 7.2rem;
  background: linear-gradient(180deg, #95a5a6 0%, #5d6d7e 45%, #2c3e50 100%);
  border: 3px solid #d5dbdb;
  color: #f2f4f4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .75), inset 0 2px 3px rgba(255, 255, 255, .5);
}
.pedestal-third {
  order: 3;
}
.pedestal-third .podium-pedestal {
  height: 5.4rem;
  background: linear-gradient(180deg, #b87333 0%, #7d4414 45%, #452408 100%);
  border: 3px solid #d49a6a;
  color: #fcece0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .75), inset 0 2px 3px rgba(255, 255, 255, .4);
}
.podium-runners {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  max-width: 32rem;
  margin-top: .6rem;
}
.podium-runner-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .45rem 1.1rem;
  background: rgba(30, 15, 6, 0.9);
  border: 2px solid #5a3c20;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.runner-rank { font-weight: 800; color: #dca234; min-width: 1.8rem; }
.runner-name { font-weight: 800; }
.runner-score { margin-left: auto; font-weight: 900; color: #ffd24d; }

/* ---- Character Picker Modal on Mobile ---- */
.char-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 6, 2, 0.88);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: enter .25s ease-out both;
}
.char-picker-modal {
  position: relative;
  background: linear-gradient(180deg, #2a170a 0%, #170d06 100%);
  border: 3px solid #dca234;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .9), inset 0 2px 2px rgba(255, 230, 160, .3);
  width: 100%;
  max-width: 26rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--ink);
}
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.picker-header h2 {
  font-family: var(--font-display);
  font-size: 1.5em;
  margin: 0;
  color: #ffe090;
}
.picker-close-btn {
  background: transparent;
  border: 0;
  font-size: 1.4em;
  color: #dca234;
  cursor: pointer;
}
.picker-preview-slot {
  width: 100%;
}
.picker-preview-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  background: rgba(45, 24, 10, 0.85);
  border: 2px solid var(--c, #dca234);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
}
.picker-preview-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-align: left;
}
.preview-hero-name {
  font-size: 1.25em;
  font-weight: 900;
  margin: 0;
  color: #fff;
}
.preview-hero-title {
  font-size: .85em;
  font-weight: 800;
  color: #f1c40f;
}
.preview-hero-quote {
  font-size: .8em;
  font-style: italic;
  color: #c9b097;
  margin: .2rem 0 0;
}
.picker-section-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1em;
  color: #e5c382;
  text-align: left;
  margin-top: .2rem;
}
.picker-char-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.picker-char-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .3rem;
  background: rgba(35, 18, 8, 0.75);
  border: 2px solid #5a3c20;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
.picker-char-btn:hover, .picker-char-btn.active {
  transform: translateY(-2px);
  border-color: #ffd24d;
  background: rgba(65, 34, 14, 0.9);
  box-shadow: 0 4px 12px rgba(255, 210, 77, 0.35);
}
.picker-char-name {
  font-size: .85em;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}
.picker-char-role {
  font-size: .7em;
  color: #e5b974;
}
.picker-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.color-swatch-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--swatch);
  border: 3px solid #201005;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .6);
  transition: transform .15s, border-color .15s;
}
.color-swatch-btn:hover, .color-swatch-btn.active {
  transform: scale(1.18);
  border-color: #fff;
  box-shadow: 0 0 12px var(--swatch);
}
.btn-confirm-hero {
  width: 100%;
  padding: .8rem;
  font-size: 1.15em;
}

/* Phone Lobby Hero Card */
.lobby-hero-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1.1rem;
  background: linear-gradient(135deg, rgba(46, 24, 11, 0.95), rgba(28, 14, 7, 0.95));
  border: 2px solid #dca234;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 230, 160, .25);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  width: 100%;
  max-width: 24rem;
  margin: .4rem auto .8rem;
}
.lobby-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .7), 0 0 14px rgba(220, 162, 52, .35);
}
.hero-card-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.hero-card-name {
  margin: 0;
  font-size: 1.35em;
  font-weight: 900;
  color: #fff;
}
.hero-card-title {
  font-size: .85em;
  font-weight: 800;
  color: #ffd966;
}
.btn-change-hero {
  margin-left: auto;
  padding: .4rem .8rem;
  background: var(--wood);
  border: 2px solid var(--border-gold);
  border-radius: 999px;
  color: var(--ink-title);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: .85em;
  cursor: pointer;
}
.btn-mini-hero {
  padding: .25em .6em;
  background: var(--wood);
  border: 1.5px solid var(--border-gold);
  border-radius: 999px;
  color: var(--ink-title);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: .8em;
  cursor: pointer;
  margin-right: .4em;
}
.me-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
}
.me-name {
  font-size: 1.05em;
  font-weight: 900;
  color: #fff;
}
.me-title {
  font-size: .75em;
  color: #ffd966;
}

/* ============ language switcher (flags) ============ */
.langswitch { display: inline-flex; flex-wrap: wrap; gap: .5em; justify-content: center; max-width: 100%; }
.langbtn { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; min-width: 0; max-width: 100%; border: 2px solid var(--border-stone); border-radius: 999px; background: var(--well); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; opacity: .75; }
.langbtn.on { opacity: 1; border-color: var(--border-gold); box-shadow: var(--shadow-glow); }
.langbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.langflag { font-size: 1.2em; line-height: 1; }
.landinglang { display: flex; justify-content: center; margin-top: .6em; }
.join .joinlang { margin-top: 1em; }
.lobby .lobbylang { margin-top: .4em; }

/* letter-by-letter slot input (join code, known-length words) */
.slotinput { position: relative; width: 100%; }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.slot { display: grid; place-items: center; box-sizing: border-box; width: min(3.4rem, calc((100vw - 3rem) / var(--n) - .35rem)); aspect-ratio: 4 / 5; border: 3px solid var(--border-stone); background: var(--scroll); color: var(--ink-scroll); font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 7vw, 2rem); text-transform: uppercase; box-shadow: inset 0 3px 6px rgba(150,100,50,.3), var(--shadow-lift); transition: border-color .12s, transform .12s; }
.slot.filled { border-color: var(--border-gold); animation: pop .25s both; }
.slot.active { border-color: var(--border-gold); box-shadow: inset 0 3px 6px rgba(150,100,50,.3), var(--shadow-hearth); }
.slot.active:not(.filled)::after { content: ''; width: 2px; height: 55%; background: var(--scroll-danger); animation: slotblink 1s steps(1) infinite; }
@keyframes slotblink { 50% { opacity: 0; } }
.slot-real { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; }

/* timeline */
.timeline { display: grid; gap: 1em; justify-items: center; text-align: center; width: 100%; }
.tl-mystery { display: grid; gap: .3em; max-width: 40em; }
.tl-mystery small { color: var(--ink-muted); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tl-mystery h1 { margin: 0; }
.tl-mystery p { margin: 0; color: var(--ink-muted); }
.tl-year { font-family: var(--font-display); font-size: 4.5em; font-weight: 900; color: var(--ink-title); text-shadow: 0 3px 0 rgba(0,0,0,.6); line-height: 1; animation: pop .6s .5s both; }
.tl-row { display: flex; align-items: stretch; justify-content: center; gap: .3em; flex-wrap: wrap; width: 100%; }
.tl-card { display: grid; align-content: center; gap: .2em; width: 9em; padding: .6em .7em; font-size: 1em; background: var(--scroll); color: var(--ink-scroll); border: 3px solid var(--border-gold); animation: rise .5s both; }
.tl-card small { font-weight: 900; letter-spacing: .08em; }
.tl-card b { font-size: .95em; line-height: 1.15; }
.tl-card.tl-new { animation: pop .6s .6s both; box-shadow: var(--shadow-glow); }
.tl-gap { display: grid; align-content: center; min-width: 1.2em; }
.tl-marks { display: flex; flex-direction: column; gap: .2em; align-items: center; }
.tl-who { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; }

/* map pin */
.mappin { display: grid; gap: .7em; justify-items: center; text-align: center; width: 100%; max-width: 70em; margin: 0 auto; }
.mappin .mp-prompt { font-family: var(--font-display); font-size: 2.4em; line-height: 1.1; color: var(--ink-title); text-shadow: var(--engrave); }
.mp-place { font-family: var(--font-display); font-size: 2.2em; color: var(--ink-title); text-shadow: var(--engrave); }
.mp-clue { color: var(--ink-muted); font-size: 1.3em; }
.mp-fact { color: var(--ink-muted); font-size: 1.15em; max-width: 44em; }
.mp-board { width: 100%; border: 4px solid var(--border-gold); box-shadow: var(--shadow-lift); background: var(--surface-inset); line-height: 0; }
.mp-svg { width: 100%; height: auto; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.mp-sea { fill: #2c4a63; }
.mp-grid { stroke: rgba(255,246,224,.12); stroke-width: 1; }
.mp-land { fill: #7d9a5c; stroke: #3d5230; stroke-width: 1.2; stroke-linejoin: round; }
.mp-pinlabel { font: 800 9px var(--font-sans); fill: #fff6e0; text-anchor: middle; }
.mp-drop { animation: mpdrop .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes mpdrop { from { transform: translateY(-160px); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-line { stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; animation: mpline .8s ease-out forwards; }
@keyframes mpline { to { stroke-dashoffset: 0; } }
.mp-target { opacity: 0; animation: mptarget .6s both; }
@keyframes mptarget { from { opacity: 0; transform-box: fill-box; } to { opacity: 1; } }
.mp-ring { stroke: #fff6e0; stroke-width: 3; }
.mp-ring.outer { fill: rgba(223,110,53,.35); } .mp-ring.mid { fill: rgba(245,189,79,.6); } .mp-ring.core { fill: #b9412f; }
.mp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4em .8em; width: 100%; line-height: 1.2; }
.mp-rows .erow { font-size: 1.1em; }
.mappinp { gap: .6em; }
.mappinp .mp-clue { font-size: 1em; }
.mp-phone { border-width: 3px; }
.mp-hint { color: var(--ink-muted); font-size: 1.05em; }