:root {
  --black: #0a0a0a;
  --white: #fafafa;
  --ink: #111;
  --muted: #8a8a8a;
  --accent: #3f7ff0;
  --gold: #e8b800;
  --ink-black: #0d0c0b;   /* warm, not a hole in the screen */
  --felt-1: #16171a;
  --felt-2: #1c1d21;
  --panel: #202126;
  --radius: 14px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: #1b1c1f;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}
/* bottom padding keeps content clear of the fixed reel pill */
#app { max-width: 1180px; margin: 0 auto; padding: 18px 18px 96px; }

h1, h2 { font-weight: 800; letter-spacing: -0.02em; }
button {
  font-family: var(--font); font-weight: 700; font-size: 16px;
  border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer;
  background: var(--white); color: var(--ink);
}
button.primary { background: var(--accent); color: #fff; }
button.ghost { background: transparent; color: var(--white); border: 1px solid #444; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input, select {
  font-family: var(--font); font-size: 16px; padding: 12px; border-radius: 10px;
  border: 1px solid #444; background: #101114; color: var(--white); width: 100%;
}
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spread { justify-content: space-between; }
.center { text-align: center; }
.muted { color: var(--muted); }
.pill { background: #26272b; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.pill.czar { background: var(--gold); color: #000; }
.pill.bot { background: #3a3140; }
.pill.you { outline: 2px solid var(--accent); }
.card {
  border-radius: var(--radius); padding: 18px; min-height: 150px;
  font-weight: 700; font-size: 19px; line-height: 1.28; position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); display: flex; flex-direction: column;
}
.card .cardtext { display: block; }
.card .brand { position: absolute; left: 16px; bottom: 12px; font-size: 10px; font-weight: 800; opacity: 0.85; line-height: 1.05; }
.card .pickpip { position: absolute; right: 14px; bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.card.black { background: var(--ink-black); color: #fff; }
/* paper: a little tooth so a card reads as an object on a table, plus a
   two-layer shadow (contact + cast) which is what sells "resting on" */
.card { position: relative; }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.card.black, .card.white { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.42); }
.card.white { background: var(--white); color: var(--ink); }
.card.big { font-size: 23px; min-height: 190px; }
.fill { text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.card.black .fill { color: #ffe98a; }
/* On the judging and result screens the answer is what the table is reading:
   the prompt drops to caption size, the punchline becomes the hero. */
.card.punch .cardtext { font-size: 15px; line-height: 1.3; color: #b9bcc4; font-weight: 600; }
.card.punch .cardtext .fill { display: inline; font-size: 27px; line-height: 1.2; color: #fff; font-weight: 800;
  text-decoration: none; border-bottom: 3px solid var(--gold); padding-bottom: 2px; }
@media (max-width: 560px) { .card.punch .cardtext .fill { font-size: 23px; } }
.hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.hand .card.white { min-height: 118px; font-size: 16px; cursor: pointer; transition: transform .08s; }
.hand .card.white:hover { transform: translateY(-3px); }
.hand .card.white.sel { outline: 3px solid var(--accent); }
.hand .card.white .ord { position: absolute; right: 10px; top: 8px; background: var(--accent); color: #fff; border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; }
.subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.subs .card { cursor: default; }
.subs .card.pickable { cursor: pointer; }
.subs .card.pickable:hover { outline: 3px solid var(--gold); }
.subs .card.win { outline: 3px solid var(--gold); }
.players { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.scoreline { display: flex; justify-content: space-between; padding: 8px 12px; background: #212226; border-radius: 10px; margin: 6px 0; }
.gate { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.logo { background: #000; color: #fff; font-weight: 800; border-radius: var(--radius); padding: 26px; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; max-width: 340px; }
.card-wrap { max-width: 460px; margin: 10px auto; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #b23; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; }
.section { background: #202126; border-radius: var(--radius); padding: 16px; margin: 14px 0; }
a.link { color: var(--accent); cursor: pointer; }
/* ---- warmer "felt" background ---- */
body {
  background:
    radial-gradient(1200px 700px at 15% -10%, #24303a 0%, transparent 55%),
    radial-gradient(1000px 600px at 110% 10%, #302433 0%, transparent 50%),
    linear-gradient(160deg, #16171a 0%, #1c1d21 100%);
  background-attachment: fixed;
}

/* ---- tokens & chips ---- */
.token { display: inline-grid; place-items: center; border-radius: 50%; border: 3px solid var(--tc);
  background: #f5f6f8; box-shadow: 0 2px 6px #0007; flex: none; overflow: hidden; }
.token img { width: 84%; height: 84%; object-fit: contain; display: block; }
.token .qm { font-weight: 800; color: #666; }
.chip { display: inline-flex; align-items: center; gap: 9px; background: #24262b; border-radius: 999px;
  padding: 4px 15px 4px 4px; font-size: 16px; border: 2px solid transparent; }
.chip.you { border-color: color-mix(in srgb, var(--tc) 75%, #0000); }
.chip.czar { background: color-mix(in srgb, var(--gold) 22%, #24262b); }
.chip .flame { color: #ff7a1a; font-weight: 800; }
.chip .cname { font-weight: 700; }
.chip .cscore { font-size: 18px; margin-left: 2px; }
.players { gap: 10px; }
.scoreline { font-size: 18px; padding: 10px 14px; }
.scoreline .sname { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.picker { margin-top: 12px; }
.style-toggle { display: inline-flex; gap: 0; margin: 4px 0 8px; border-radius: 10px; overflow: hidden; border: 1px solid #444; }
.style-toggle button { background: #101114; color: #bbb; border: 0; border-radius: 0; padding: 8px 18px; font-size: 14px; }
.style-toggle button.on { background: var(--accent); color: #fff; }
.emoji-row, .color-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tok { background: #f5f6f8; border: 2px solid #444; border-radius: 50%; width: 72px; height: 72px; padding: 0; display: grid; place-items: center; overflow: hidden; }
.tok img { width: 66px; height: 66px; object-fit: contain; }
.tok.on { border-color: var(--tc, #fff); box-shadow: 0 0 0 4px var(--tc, #fff); }
.emoji-row { gap: 10px; max-height: 46vh; overflow-y: auto; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.sw.on { border-color: #fff; }

/* ---- table: draw pile + hand deal-in ---- */
.table { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.drawpile { flex: none; position: relative; padding-top: 6px; }
.drawpile::before, .drawpile::after { content: ""; position: absolute; inset: 0 6px 0 -6px; border-radius: var(--radius); background: #000; box-shadow: 0 4px 10px #0007; }
.drawpile::after { inset: 3px 3px 0 -3px; background: #0b0b0b; }
.card.black.mini { width: 96px; min-height: 132px; font-size: 11px; position: relative; z-index: 1; }
.card.black.mini .brand { font-size: 8px; }
.hand { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.card.white.flyin { animation: flyin 0.42s cubic-bezier(.2,.9,.25,1) backwards; animation-delay: var(--d, 0ms); }
@keyframes flyin { from { opacity: 0; transform: translate(-90px, -30px) rotate(-8deg) scale(.7); } to { opacity: 1; transform: none; } }
.card.white { transition: transform .09s ease; }
.card.white:hover { transform: translateY(-4px) rotate(-.5deg); }

/* ---- judging reactions ---- */
.reactbar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.reactbtn { background: #24262b; border: 1px solid #3a3c42; border-radius: 999px; width: 46px; height: 46px; font-size: 22px; padding: 0; }
.reactbtn:hover { transform: scale(1.12); }
.react-float { position: fixed; bottom: 12vh; font-size: 40px; pointer-events: none; z-index: 9998; animation: floatup 2.4s ease-out forwards; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { opacity: 0; transform: translateY(-45vh) scale(1); } }

/* ---- winner celebration ---- */
.celebrate { text-align: center; margin: 10px 0 4px; }
.win-token { position: relative; display: inline-block; margin-bottom: 6px; animation: bounceIn .6s cubic-bezier(.2,1.4,.4,1) both; }
.win-token .crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 28px; animation: crowndrop .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes crowndrop { from { transform: translate(-50%, -30px) rotate(-25deg); opacity: 0; } to { transform: translate(-50%, 0) rotate(0); opacity: 1; } }
.win-name { font-size: 30px; margin: 6px 0; }
.pop-in { animation: popIn .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounceIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.streak { font-weight: 800; color: #ff7a1a; margin-top: 4px; animation: popIn .5s .1s both; }
.card.black.glow { box-shadow: 0 0 0 3px var(--tc), 0 0 34px color-mix(in srgb, var(--tc) 60%, transparent); }
.card.black.glow.pop { animation: popIn .5s .05s both; }
.scoreline.winrow { background: color-mix(in srgb, var(--gold) 20%, #212226); animation: pulse 1s ease 2; }
@keyframes pulse { 50% { background: color-mix(in srgb, var(--gold) 42%, #212226); } }
.plus1 { color: #33d17a; font-weight: 900; margin-left: 8px; display: inline-block; animation: plusfloat 1.1s ease forwards; }
@keyframes plusfloat { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

/* ---- game-over podium ---- */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 22px 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pod-token { position: relative; }
.pod-token .crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 24px; }
.pod-name { font-weight: 800; }
.pod-score { font-size: 22px; font-weight: 900; }
.pod-bar { width: 92px; border-radius: 10px 10px 0 0; color: #000; font-weight: 900; display: grid; place-items: center; }
.pod1 .pod-bar { height: 120px; background: linear-gradient(#ffe07a, #e8b800); }
.pod2 .pod-bar { height: 86px; background: linear-gradient(#e8ecf2, #b9c0cc); }
.pod3 .pod-bar { height: 62px; background: linear-gradient(#f0b483, #cd7f32); }

/* ---- mute button ---- */
.mute { position: fixed; top: 12px; right: 12px; z-index: 10000; width: 42px; height: 42px; border-radius: 50%;
  background: #24262b; border: 1px solid #3a3c42; font-size: 18px; padding: 0; }
.mute.leave { right: 62px; font-size: 20px; }

/* ---- the room-code bar ---- */
/* Top-left, mirroring the sound/leave buttons top-right, so the code is on
   screen every second of the game and nobody has to remember it to let a
   latecomer in. */
.roombar { position: fixed; top: 12px; left: 12px; z-index: 10000; display: flex; align-items: center; gap: 9px;
  background: #24262b; border: 1px solid #3a3c42; border-radius: 999px; padding: 4px 5px 4px 14px;
  max-width: calc(100vw - 130px); }
.rb-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.roombar b { font-size: 19px; font-weight: 800; letter-spacing: 0.12em; line-height: 1; }
.rb-copy { background: #33353c; color: var(--white); border: 1px solid #45484f; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rb-copy:hover { background: #3f424a; }
.rb-host { display: none; }
body.has-roombar #app { padding-top: 62px; }
@media (max-width: 560px) {
  .roombar { gap: 7px; padding-left: 11px; }
  .rb-label { display: none; }
  .roombar b { font-size: 17px; }
  .rb-copy { padding: 6px 10px; font-size: 11px; }
}
/* Nobody taps a television, so on the TV the button goes and the address that
   the code belongs to arrives in its place. */
body.table-mode .roombar { top: 18px; left: auto; right: 34px; padding: 7px 18px; }
body.table-mode .roombar b { font-size: 26px; }
body.table-mode .rb-copy { display: none; }
body.table-mode .rb-host { display: inline; font-size: 13px; color: var(--muted); }
body.table-mode.has-roombar #app { padding-top: 78px; }
/* Daylight: the czar's own screen, and the light-mode default skin. */
body.czar-light .roombar { background: #fff; border-color: #dfe2e8; color: #14151a; }
body.czar-light .rb-copy { background: #eef0f5; border-color: #dfe2e8; color: #14151a; }
@media (prefers-color-scheme: light) {
  body[data-skin="default"] .roombar { background: #fff; border-color: #dfe2e8; color: #14151a; }
  body[data-skin="default"] .rb-copy { background: #eef0f5; border-color: #dfe2e8; color: #14151a; }
}

/* ---- host quit + rematch ---- */
/* Keep the header clear of the fixed sound / leave buttons in the top-right corner. */
.hdr-row { padding-right: 108px; row-gap: 8px; }
.quit-btn { background: transparent; color: #ff9a9a; border: 1px solid #6a3a3f; border-radius: 999px;
  padding: 5px 14px; font-size: 13px; font-weight: 700; }
.quit-btn:hover { background: #3a2226; }
.quit-actions { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---- big Card Czar banner ---- */
.czar-banner { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px auto 12px;
  padding: 10px 22px; background: color-mix(in srgb, var(--gold) 18%, #202126); border: 2px solid var(--gold);
  border-radius: 18px; max-width: 460px; box-shadow: 0 4px 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.cb-text { display: flex; flex-direction: column; line-height: 1.05; }
.cb-text b { font-size: 27px; letter-spacing: -0.01em; }
.cb-text span { font-size: 14px; color: #e8c55a; font-weight: 700; }

/* ---- the Hill: one shared board, constant height at any player count ---- */
.hill { position: relative; height: 214px; margin: 4px 0 14px; overflow: visible; }
.hill-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hill-svg .hp { fill: none; stroke: #3a3d45; stroke-width: 10; stroke-linecap: round; }
.hill-svg .hp-shadow { fill: none; stroke: #101114; stroke-width: 16; stroke-linecap: round; }
.hill .posts { position: absolute; inset: 0; }
.hill .post { position: absolute; width: 3px; height: 13px; margin: -7px 0 0 -1px; border-radius: 2px;
  background: #55596340; transition: background .4s ease-out; }
.hill .post.lit { background: var(--gold); box-shadow: 0 0 7px color-mix(in srgb, var(--gold) 70%, transparent); }
.hill .hgate { position: absolute; margin: -30px 0 0 -7px; }
.hill .hgate .flag { display: block; width: 15px; height: 30px; border-left: 2px solid var(--gold);
  background-image:
    linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%),
    linear-gradient(45deg, #e9e9e9 25%, #1b1c1f 25%, #1b1c1f 75%, #e9e9e9 75%);
  background-size: 7px 7px; background-position: 0 0, 3.5px 3.5px; }
.hill .hgate.lit .flag { animation: gatepulse 1.1s ease-in-out infinite alternate; }
@keyframes gatepulse { from { filter: drop-shadow(0 0 0 transparent); } to { filter: drop-shadow(0 0 10px var(--gold)); } }

.climber { position: absolute; transform: translate(-50%, calc(-50% + var(--fan, 0px)));
  transition: left .9s cubic-bezier(.3,1.25,.4,1), top .9s cubic-bezier(.3,1.25,.4,1), opacity .25s;
  display: grid; justify-items: center; z-index: 2; }
.cl-token { position: relative; line-height: 0; }
.cl-name { font-size: 12px; font-weight: 700; color: #c9ccd2; white-space: nowrap; margin-top: 2px;
  text-shadow: 0 1px 3px #000, 0 0 8px #000; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.cl-name b { color: var(--tc); margin-left: 2px; font-size: 14px; }
.climber.czar .token { box-shadow: 0 0 0 3px var(--gold), 0 2px 6px #0009; }
.climber.moving .cl-token { animation: hop .95s cubic-bezier(.34,1.3,.3,1); }
@keyframes hop { 0% { transform: scale(1.12,.86); } 35% { transform: translateY(-10px) scale(.93,1.09); } 70% { transform: scale(1.08,.92); } 100% { transform: none; } }
.climber.thinking .cl-token { animation: fidget 2.4s ease-in-out infinite; }
@keyframes fidget { 0%,100% { transform: none; } 25% { transform: translateY(-3px) rotate(-5deg); } 75% { transform: translateY(-2px) rotate(5deg); } }
.climber.matchpoint .token { animation: breathe 1.6s ease-in-out infinite alternate; }
@keyframes breathe { from { filter: brightness(1); } to { filter: brightness(1.4) drop-shadow(0 0 10px var(--tc)); } }
/* the winner takes the stage: everyone else fades back, they grow */
.hill.has-win .climber.dim { opacity: .28; }
.hill.has-win .climber.dim .cl-name { opacity: 0; }
.climber.win { z-index: 5; }
.climber.win .token { box-shadow: 0 0 0 4px #0008, 0 0 44px color-mix(in srgb, var(--tc) 85%, transparent);
  animation: sillypop .55s cubic-bezier(.2,1.6,.35,1) both; }
.climber.win .cl-name { font-size: 15px; }
.climber.win .cl-name b { font-size: 18px; }
.climber.win .cl-token::after { content: '👑'; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  font-size: 42px; animation: crowndrop .45s .12s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes crowndrop { from { transform: translate(-50%, -18px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes sillypop {
  0%   { transform: scale(.35) rotate(-14deg); }
  55%  { transform: scale(1.14) rotate(7deg); }
  75%  { transform: scale(.97) rotate(-4deg); }
  100% { transform: none; }
}
@media (max-width: 560px) { .hill { height: 220px; } .cl-name { font-size: 11px; } }

/* small drawn glyphs, so the chrome does not depend on the platform emoji set */
.ink { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; background: currentColor; }
.ink.bot { -webkit-mask: radial-gradient(circle at 50% 62%, #000 42%, transparent 43%) center/100% 100% no-repeat; mask: radial-gradient(circle at 50% 62%, #000 42%, transparent 43%); opacity: .55; }
.ink.flame { background: #ff7a1a; -webkit-mask: radial-gradient(ellipse at 50% 70%, #000 45%, transparent 46%); mask: radial-gradient(ellipse at 50% 70%, #000 45%, transparent 46%); }

/* ---- submitted row ---- */
.subrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 2px 0 6px; }
.subpill { font-size: 13px; background: #26272c; border-radius: 999px; padding: 4px 11px; color: #9aa0a6; }
.subpill.done { background: color-mix(in srgb, #33b06a 28%, #26272c); color: #d6f5e2; font-weight: 600; }

/* ---- reactions ---- */
.reactbtn:disabled { opacity: .35; }
.reactbar .react-left { align-self: center; font-size: 12px; color: #8a8a8a; margin-left: 6px; }
.react-float .rf-emoji { font-size: 46px; line-height: 1; }
.react-float .rf-name { font-size: 13px; font-weight: 800; color: #fff; background: #000b; border-radius: 8px; padding: 1px 8px; margin-top: 3px; display: inline-block; }

/* ---- the reel: the running list of winning quotes ---- */
/* Takes the old chat's slot. Read-only, so it can never hold focus and freeze
   the game the way the chat input did. */
.reel { position: fixed; left: 12px; bottom: 12px; z-index: 10000; width: 340px; max-width: 82vw; }
.reel.collapsed { width: auto; }
.reel-toggle { width: 100%; background: #24262b; border: 1px solid #3a3c42; border-radius: 10px; padding: 9px; font-weight: 700; }
.reel.collapsed .reel-toggle { width: auto; padding: 9px 14px; opacity: 0.92; }
.reel-body { background: #1c1d21; border: 1px solid #3a3c42; border-radius: 12px; margin-top: 6px; overflow: hidden; }
.reel.collapsed .reel-body { display: none; }
.reel-list { max-height: 46vh; overflow-y: auto; padding: 10px; }
.reel-empty { font-size: 13px; padding: 12px 4px; }
.reel-divider { font-size: 11px; color: var(--muted); text-align: center; margin: 8px 0; border-top: 1px dashed #3a3c42; padding-top: 6px; }
.quote { padding: 10px 0; border-bottom: 1px solid #2a2c31; cursor: pointer; }
.quote:last-child { border-bottom: 0; }
.quote.mine { border-left: 3px solid var(--gold); padding-left: 9px; }
.quote .qtext { font-size: 15px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quote.open .qtext { -webkit-line-clamp: unset; }
.quote .qlost { display: none; }
.quote.open .qlost { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.quote .ql { padding: 2px 0; }
.quote .qwho { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; color: #9aa0a6; }
.quote .qmine { color: var(--gold); font-weight: 700; }
.quote .qreact { opacity: .8; }
.quote .qn { margin-left: auto; opacity: .6; }
@media (min-width: 900px) { .reel { left: auto; right: 12px; bottom: 12px; width: 380px; } .reel-list { max-height: 62vh; } }
@media (max-width: 560px) { .lane { grid-template-columns: 92px 1fr; } .reel { width: 300px; }
  .reel.collapsed { width: auto; } }

/* ---- round result: the celebration happens in the winner's own lane ---- */
.nameplate { text-align: center; font-size: 21px; margin: 2px 0 10px; color: var(--tc); }
.nameplate b { font-size: 27px; letter-spacing: -0.02em; }
.nameplate .streak { font-size: 14px; opacity: .85; margin-left: 6px; }
.judged-by { margin-top: 6px; opacity: .7; }
.track.has-win .lane.dim { opacity: .34; transform: scale(.94); }
.lane { transition: opacity .22s ease-out, transform .22s ease-out; }
.lane.win .lane-rail { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 34%, #202126), #202126 var(--pct)); }
/* The winner's lane becomes the stage: it grows tall, the others shrink away,
   and the silly face is rendered LARGE so the table can actually enjoy it. */
/* room above for the crown, so the big face never sits on the lane above */
.lane.win { grid-template-columns: 128px 1fr; margin: 30px 0 8px; }
.lane.win .lane-rail { height: 128px; border-radius: 64px; }
.lane.win .racer { z-index: 3; }
.lane.win .racer .token { box-shadow: 0 0 0 3px #0008, 0 0 34px color-mix(in srgb, var(--tc) 85%, transparent);
  animation: sillypop .55s cubic-bezier(.2,1.6,.35,1) both; }
.lane.win .lane-name { color: var(--tc); font-weight: 800; font-size: 17px; }
.lane.win .lane-name b { font-size: 20px; }
.track.has-win .lane.dim .lane-rail { height: 30px; }
.lane-rail { transition: height .3s cubic-bezier(.2,1.2,.4,1), border-radius .3s; }
/* the face lands with a little wobble, so the swap reads as a joke */
@keyframes sillypop {
  0%   { transform: scale(.35) rotate(-14deg); }
  55%  { transform: scale(1.14) rotate(7deg); }
  75%  { transform: scale(.97) rotate(-4deg); }
  100% { transform: none; }
}
.racer.crowned::after { content: '👑'; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font-size: 42px;
  animation: crowndrop .45s .12s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes crowndrop { from { transform: translate(-50%, -14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.racer.moving .token { animation: hop .9s cubic-bezier(.34,1.3,.3,1); }
@keyframes hop { 0% { transform: scale(1.14, .84); } 35% { transform: translateY(-9px) scale(.92, 1.1); } 70% { transform: scale(1.1, .9); } 100% { transform: none; } }
/* the rail fills in behind you, so the standings read from across the room */
.lane-rail { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, #202126) 0%, #202126 var(--pct, 0%)); }
.lane.matchpoint .lane-rail { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent); animation: breathe 2s ease-in-out infinite alternate; }
@keyframes breathe { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.track.closing .finish { animation: gatepulse 1.1s ease-in-out infinite alternate; }
@keyframes gatepulse { from { filter: drop-shadow(0 0 0 transparent); } to { filter: drop-shadow(0 0 8px var(--gold)); } }
.lane.thinking .racer .token { animation: fidget 2.4s ease-in-out infinite; }
@keyframes fidget { 0%,100% { transform: none; } 25% { transform: translateY(-3px) rotate(-5deg); } 75% { transform: translateY(-2px) rotate(5deg); } }

/* the losing cards, with their authors */
.lostwrap { display: grid; gap: 8px; max-width: 560px; margin: 12px auto 0; }
.lostcard { background: #1c1d21; border: 1px solid #2c2e34; border-left: 3px solid var(--tc); border-radius: 10px; padding: 10px 12px; }
.lostcard.fall { animation: lostfall .42s cubic-bezier(.4,0,1,1) both; animation-delay: var(--d); }
.lostcard.mine { background: #23211a; }
.lostcard .lc-text { font-size: 14px; line-height: 1.3; opacity: .78; }
.lostcard .lc-who { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.lostcard .lc-who em { color: var(--gold); font-style: normal; font-weight: 700; }
@keyframes lostfall { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* "previously..." */
.prevstrip { max-width: 520px; margin: 14px auto 0; font-size: 13px; color: var(--muted); text-align: center; }
.prevline { display: flex; align-items: center; gap: 7px; padding: 4px 0; text-align: left; }
.prevline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
button.tiny { font-size: 12px; padding: 5px 11px; }
.hint.inline { display: inline; margin: 0; }

/* ---- end-of-night recap ---- */
.recap { max-width: 560px; margin: 18px auto; text-align: left; }
.recap h2 { margin: 0 0 10px; }
.awards { display: grid; gap: 6px; margin-bottom: 12px; }
.award { background: #232227; border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.award span { color: var(--muted); margin-left: 8px; font-size: 13px; }
body.readaloud .recap .qtext { font-size: 26px; -webkit-line-clamp: unset; }
body.readaloud .recap .awards, body.readaloud .recap .qlost { display: none; }

/* the animal picker previews its silly face on press */
.tok .silly { display: none; }
.tok:active .silly, .tok.on:hover .silly { display: block; }
.tok:active img:not(.silly), .tok.on:hover img:not(.silly) { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.game-title { font-size: 30px; letter-spacing: -0.03em; }
.home { min-height: 70vh; display: grid; place-items: center; }
.home .card-panel { width: 100%; max-width: 620px; background: #202126; border-radius: var(--radius); padding: 22px; }
.tabs button { padding: 9px 14px; font-size: 14px; }
@media (max-width: 560px) { .game-title { font-size: 22px; } .tabs { width: 100%; } .tabs button { flex: 1; } }

/* ---- the waiting table ---- */
.waittable { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 16px auto; max-width: 560px; }
.wt { display: grid; justify-items: center; gap: 6px; opacity: .55; transition: opacity .3s; }
.wt.in { opacity: 1; }
.wt-card { width: 52px; height: 72px; perspective: 500px; }
.wt-back { display: block; width: 100%; height: 100%; border-radius: 7px; background: var(--ink-black);
  border: 1px solid #2c2e34; box-shadow: 0 3px 8px #0008; transition: transform .5s cubic-bezier(.3,1.2,.4,1), background .3s; }
.wt.in .wt-back { transform: rotateY(180deg); background: var(--white); }
.wt-who { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

/* ---- the pass-and-play curtain ---- */
.curtain { background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 26%, transparent), transparent 72%); }
.curtain h1 { font-size: 40px; margin: 14px 0 6px; color: var(--tc); letter-spacing: -.03em; }

/* ---- the wordmark: the counter of the A is a family fox-ear notch ---- */
.mark i { font-style: normal; position: relative; display: inline-block; }
.mark i::after { content: ''; position: absolute; left: 50%; bottom: .18em; width: .30em; height: .22em;
  transform: translateX(-50%); background: var(--gold);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.game-title i { font-style: normal; color: var(--gold); }

/* ---- daylight + seasonal skins ---- */
/* Kids play this at 4pm in a bright kitchen; dark mode is a NIGHT choice that
   the old build applied 24 hours a day. */
@media (prefers-color-scheme: light) {
  body[data-skin="default"] {
    --white: #14151a; --ink: #14151a; --muted: #5f636c; --panel: #ffffff; --felt-1: #eceef3; --felt-2: #f6f7fa;
    color: #14151a;
    background: radial-gradient(1200px 700px at 15% -10%, #dfe7f2 0%, transparent 55%), linear-gradient(160deg, #eceef3 0%, #f6f7fa 100%);
  }
  body[data-skin="default"] .section { background: #fff; box-shadow: 0 1px 3px #0002; }
  body[data-skin="default"] .card.white { background: #fff; color: #14151a; border: 1px solid #dfe2e8; }
  body[data-skin="default"] .pill { background: #e4e7ee; color: #14151a; }
  body[data-skin="default"] .cl-name { color: #3a3e46; text-shadow: 0 1px 2px #fff, 0 0 8px #fff; }
  body[data-skin="default"] .hill-svg .hp { stroke: #c5cad4; }
  body[data-skin="default"] .hill-svg .hp-shadow { stroke: #dfe3ea; }
  body[data-skin="default"] .reel-body, body[data-skin="default"] .reel-toggle { background: #fff; border-color: #dfe2e8; color: #14151a; }
  body[data-skin="default"] .quote { border-bottom-color: #e6e9ef; }
  body[data-skin="default"] .lostcard { background: #fff; border-color: #dfe2e8; }
  body[data-skin="default"] button.ghost { color: #14151a; border-color: #c9ced8; }
}
body[data-skin="winter"] { --gold: #9fd8ff; --accent: #2f6fd0;
  background: radial-gradient(1000px 620px at 20% -10%, #1b3350 0%, transparent 58%), linear-gradient(160deg, #10161f 0%, #161d28 100%); }
body[data-skin="summer"] { --gold: #ffd23f; --accent: #ff7a3d;
  background: radial-gradient(1000px 620px at 20% -10%, #2b3a24 0%, transparent 58%), linear-gradient(160deg, #171a15 0%, #1d211a 100%); }
body[data-skin="spooky"] { --gold: #ff9f2b; --accent: #7a4dd0;
  background: radial-gradient(1000px 620px at 20% -10%, #2c1c34 0%, transparent 58%), linear-gradient(160deg, #16121b 0%, #1c1722 100%); }

/* the losing cards get the same caption-then-punchline treatment, quieter */
.punchlite .fill { color: #fff; font-weight: 800; }
.subs .card.mine { outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); }

/* ---- house rules, special rounds, votes, golden cards ---- */
.rules summary { cursor: pointer; font-weight: 800; font-size: 17px; }
.ruleline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 9px 0; border-top: 1px solid #2a2c31; }
.ruleline span { display: grid; }
.ruleline b { font-size: 14px; font-weight: 700; }
.ruleline em { font-style: normal; font-size: 12px; color: var(--muted); }
.banners { display: grid; gap: 6px; margin: 4px 0 8px; }
.bnr { display: grid; justify-items: center; padding: 7px 14px; border-radius: 12px; text-align: center;
  background: color-mix(in srgb, var(--gold) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.bnr b { font-size: 15px; letter-spacing: .08em; color: var(--gold); }
.bnr span { font-size: 12px; color: var(--muted); }
.bnr.finale { background: color-mix(in srgb, #e0484d 18%, var(--panel)); border-color: #e0484d88; }
.bnr.finale b { color: #ff8f93; }
.bnr.combo { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bnr.combo b { color: #9dc0ff; }
.votebtn { position: absolute; right: 10px; bottom: 10px; font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: #ffffff14; color: #ddd; border: 1px solid #ffffff2e; }
.votebtn.on { background: var(--gold); color: #000; border-color: var(--gold); }
.card.voted { outline: 2px solid var(--gold); }
.card.white.golden { box-shadow: 0 0 0 3px var(--gold), 0 8px 22px #0007; }
.goldtag { position: absolute; right: 10px; top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  background: var(--gold); color: #000; border-radius: 999px; padding: 2px 7px; }
.nameplate .pts { display: inline-block; margin-left: 8px; font-size: 15px; background: var(--tc); color: #000;
  border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.whyrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 2px; }
.whyrow span { font-size: 12px; color: var(--muted); background: var(--panel); border-radius: 999px; padding: 3px 10px; }
.guessbtn { cursor: pointer; }
.guessbtn.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, #24262b); }
.nextup { margin-top: 14px; opacity: .8; font-style: italic; }

/* ---- the night card: made to be screenshotted into the group chat ---- */
.nightcard { max-width: 420px; margin: 18px auto; padding: 22px; border-radius: 20px;
  background: linear-gradient(165deg, #1a1c22, #101116); border: 1px solid #32343c; box-shadow: 0 18px 50px #000a; }
.nc-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.nc-mark { font-weight: 800; }
.nc-hero { display: grid; place-items: center; margin: 16px 0 10px; }
.nc-joke { font-size: 22px; font-weight: 800; line-height: 1.25; text-align: center; }
.nc-joke .fill { color: var(--gold); text-decoration: none; border-bottom: 3px solid var(--gold); }
.nc-by { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.nc-by b { color: var(--tc); }
.nc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #2b2d34; }
.nc-p { display: grid; justify-items: center; font-size: 11px; color: var(--muted); }
.nc-p b { color: var(--tc); font-size: 15px; }
.nc-p em { font-style: normal; }

/* ---- the almanac sheet ---- */
.sheet { position: fixed; inset: 0; z-index: 12000; background: #0b0c0ee6; overflow-y: auto; padding: 18px; }
.sheet-inner { max-width: 620px; margin: 0 auto; }
.sheet-x { position: sticky; top: 0; float: right; }

/* ---- the commit throw ---- */
.card.white.thrown { animation: throwit .22s ease-in forwards; }
@keyframes throwit { to { transform: translateY(-140px) scale(.6) rotate(-9deg); opacity: 0; } }

/* ---- the Czar's screen turns to daylight ---- */
body.czar-light { --white: #14151a; --muted: #5f636c; --panel: #fff; color: #14151a;
  background: radial-gradient(1200px 700px at 15% -10%, #e7ecf5 0%, transparent 55%), linear-gradient(160deg, #eef0f4 0%, #f7f8fb 100%); }
body.czar-light .section, body.czar-light .reel-body, body.czar-light .reel-toggle { background: #fff; border-color: #dfe2e8; color: #14151a; }
body.czar-light .pill { background: #e4e7ee; color: #14151a; }
body.czar-light .cl-name { color: #3a3e46; text-shadow: 0 1px 2px #fff, 0 0 8px #fff; }
body.czar-light .hill-svg .hp { stroke: #c5cad4; }
body.czar-light .hill-svg .hp-shadow { stroke: #dfe3ea; }
body.czar-light button.ghost { color: #14151a; border-color: #c9ced8; }
body.czar-light .lostcard { background: #fff; border-color: #dfe2e8; }

/* ---- Table Mode: the TV ---- */
body.table-mode #app { max-width: 1600px; padding: 26px 34px; }
.tablebar { display: flex; justify-content: center; gap: 26px; margin-bottom: 10px; }
.tp { display: grid; justify-items: center; font-size: 22px; font-weight: 800; color: var(--tc); }
.tbig { font-size: 64px; margin: 8px 0; }
.tsub { font-size: 26px; color: var(--muted); }
.tcard { max-width: 1100px; margin: 14px auto; font-size: 44px; min-height: 240px; }
body.table-mode .card.punch .cardtext { font-size: 30px; }
body.table-mode .card.punch .cardtext .fill { font-size: 54px; }
.tsubs { grid-template-columns: repeat(2, 1fr); max-width: 1300px; margin: 0 auto; }
body.table-mode .reel, body.table-mode .mute { display: none !important; }
body.table-mode .hill { height: 300px; }

/* ---- the felt is the family ---- */
.feltwrap { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.feltwrap img { position: absolute; width: 400px; opacity: .03; filter: blur(2px); animation: drift 60s linear infinite; }
@keyframes drift { from { transform: translate(0,0) rotate(0); } to { transform: translate(40px,-30px) rotate(8deg); } }

.quote .qpts { background: var(--tc); color: #000; border-radius: 999px; padding: 1px 8px; font-weight: 800; font-size: 12px; }
.quote .qgold { font-size: 12px; }
.pickline { font-size: 16px; }
.pickline.two { color: var(--gold); font-weight: 700; }

/* the board now sits under the cards, quieter, with its own small heading */
.board-bottom { margin-top: 22px; padding-top: 6px; border-top: 1px solid #ffffff12; }
.board-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  text-align: center; margin: 0 0 2px; font-weight: 800; }

/* hover (or tap) a climber to actually SEE the animal */
.climber .cl-token { transition: transform .16s cubic-bezier(.2,1.3,.4,1); transform-origin: center bottom; }
.climber:hover, .climber:active { z-index: 20; }
.climber:hover .cl-token, .climber:active .cl-token {
  /* animation:none is required — the idle "thinking" fidget is an infinite
     keyframe animation on the same element, and a running animation wins over
     a plain transform declaration, so without this the hover did nothing. */
  animation: none !important; transform: scale(2.6); }
.climber:hover .cl-name, .climber:active .cl-name { opacity: 1; font-size: 14px; transform: translateY(46px); }
.climber .cl-name { transition: transform .16s, font-size .16s, opacity .16s; }
.hill.has-win .climber.dim:hover { opacity: 1; }

/* ================= squat play layout (desktop) =================
   Two tall stacked blocks (Czar banner, then question card) became one row,
   and the hand sits beside a right-hand column holding the draw pile and the
   buttons. That is most of the vertical space the screen used to waste, and it
   is what lets the race stay in view without scrolling. */
.topsplit { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.15fr);
  gap: 18px; align-items: center; margin: 4px 0 12px; }
.topsplit .ts-czar .czar-banner { margin: 0; max-width: none; }
.topsplit .ts-card .card { min-height: 150px; }
.pickline { text-align: center; font-size: 15px; margin: 8px 0 0; }
.pickline.muted { color: var(--muted); }

.playfield { display: grid; grid-template-columns: 1fr 168px; gap: 16px; align-items: start; }
.playfield .hand { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.playfield .hand .card.white { min-height: 96px; font-size: 15px; padding: 13px; }
.playfield .hand .card.white .brand { font-size: 8px; left: 11px; bottom: 8px; }
.playside { display: grid; gap: 12px; justify-items: center; position: sticky; top: 12px; }
.playside .drawpile { margin: 0; }
.playside .actions { display: grid; gap: 8px; width: 100%; }
.playside .actions button { width: 100%; padding: 11px 10px; font-size: 14px; }
.playside .actions .primary { padding: 14px 10px; font-size: 16px; }

/* the judged submissions get a little more room too */
.subs { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

@media (max-width: 900px) {
  /* phones and narrow windows keep the single column — there is no width to spend */
  .topsplit { grid-template-columns: 1fr; gap: 8px; }
  .topsplit .ts-card { max-width: 460px; margin: 0 auto; }
  .playfield { grid-template-columns: 1fr; }
  .playfield .hand { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .playside { grid-auto-flow: column; align-items: center; justify-items: center; position: static; }
  .playside .actions { grid-auto-flow: column; width: auto; }
}
@media (max-width: 560px) {
  .playside { grid-auto-flow: row; }
  .playside .drawpile { display: none; } /* pure decoration; the width is worth more */
  .playside .actions { grid-auto-flow: row; width: 100%; }
}