/* THINK FAST! — loud, chunky, game-show-on-your-phone styling.
   Three switchable themes, all driven by the variables below. */

:root, html[data-theme="arcade"] {
  --bg: #0b0b10;
  --ink: #f6f2e7;
  --card: #16161f;
  --lime: #d6ff4b;   /* accent 1 — primary action */
  --pink: #ff3d7f;   /* accent 2 — hot moments */
  --cyan: #3fd8ff;   /* accent 3 — cool actions */
  --gold: #ffcf3f;
  --hi: #d6ff4b;     /* big highlight numbers/text */
  --field: #f6f2e7;  /* input + plain button surface */
  --fieldink: #08080c;
  --line: rgba(246, 242, 231, 0.25);
  --stripe: rgba(246, 242, 231, 0.025);
  --black: #08080c;
}

html[data-theme="cosmic"] {
  --bg: #08061d;
  --ink: #eceafd;
  --card: #161240;
  --lime: #a08bff;
  --pink: #ff5fa8;
  --cyan: #55e6ff;
  --gold: #ffd166;
  --hi: #a08bff;
  --field: #eceafd;
  --fieldink: #0a0620;
  --line: rgba(236, 234, 253, 0.22);
  --stripe: rgba(236, 234, 253, 0.03);
  --black: #05030f;
}

html[data-theme="paper"] {
  --bg: #f3ecdf;
  --ink: #1a1512;
  --card: #fffdf6;
  --lime: #ffc233;
  --pink: #ff5a36;
  --cyan: #4da3ff;
  --gold: #c77800;
  --hi: #c04a00;
  --field: #ffffff;
  --fieldink: #1a1512;
  --line: rgba(26, 21, 18, 0.3);
  --stripe: rgba(26, 21, 18, 0.04);
  --black: #14100c;
}

:root {
  --border: 3px solid var(--black);
  --shadow: 6px 6px 0 var(--black);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  min-height: 100%;
  overflow-x: hidden;
}

body { touch-action: manipulation; }

/* ambient diagonal stripes */
.stripes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-24deg, transparent 0 42px, var(--stripe) 42px 84px);
}

/* scrolling category ticker across the top */
.ticker {
  position: fixed;
  top: 0;
  left: -5vw;
  width: 110vw;
  z-index: 1;
  transform: rotate(-2deg);
  background: var(--pink);
  border-bottom: var(--border);
  overflow: hidden;
  pointer-events: none;
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-family: Anton, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--black);
  padding: 5px 0;
  animation: ticker 40s linear infinite;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.corner-btns {
  position: fixed;
  top: 34px;
  right: 12px;
  z-index: 50;
  display: flex;
  gap: 8px;
}

/* the ticker only lives on the splash screen */
body.ticker-off .ticker { display: none; }
body.ticker-off .corner-btns { top: 12px; }

.pick-section { margin: 0 0 18px; }
.center-label { text-align: center; }
.player-chip .pc-pick { font-size: 13px; opacity: 0.9; }
.corner-btn {
  background: var(--card);
  border: var(--border);
  border-radius: 12px;
  font-size: 18px;
  padding: 6px 10px;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--black);
  cursor: pointer;
}

main {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0 auto;
  padding: 64px 18px 40px;
}

.screen { display: none; position: relative; animation: rise 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.screen.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hidden { display: none !important; }
.center { text-align: center; }

/* ---------- type ---------- */

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.86;
  margin: 26px 0 10px;
  transform: rotate(-3deg);
  user-select: none;
}
.logo span { font-family: Anton, sans-serif; font-weight: 400; }
.logo-think {
  font-size: clamp(64px, 21vw, 110px);
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
}
.logo-fast {
  font-size: clamp(76px, 26vw, 132px);
  color: var(--lime);
  text-shadow: 5px 5px 0 var(--pink);
  letter-spacing: 1px;
}

.tag { text-align: center; font-size: 15px; opacity: 0.9; margin: 14px 0 22px; line-height: 1.5; }
.fineprint { text-align: center; font-size: 12px; opacity: 0.55; margin-top: 18px; }

.screen-title {
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 9vw, 44px);
  margin: 18px 0 6px;
  transform: rotate(-1.5deg);
  line-height: 1;
}
.accent-pink { color: var(--pink); }
.accent-cyan { color: var(--cyan); }
.accent-lime { color: var(--hi); }

.hint { font-size: 14px; opacity: 0.75; margin: 8px 0 18px; line-height: 1.5; }
.field-label { display: block; font-family: Anton, sans-serif; font-size: 13px; letter-spacing: 2px; opacity: 0.8; margin-bottom: 8px; }

/* ---------- cards, buttons, inputs ---------- */

.card {
  background: var(--card);
  border: var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.home-card { margin-top: 6px; }

.stack { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.btn {
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.5px;
  color: var(--fieldink);
  background: var(--field);
  border: var(--border);
  border-radius: 14px;
  padding: 13px 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  text-transform: uppercase;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--black); }
.btn.big { font-size: 22px; padding: 16px 20px; }
.btn.small { font-size: 13px; padding: 8px 14px; box-shadow: 3px 3px 0 var(--black); }
.btn-lime { background: var(--lime); color: var(--black); }
.btn-cyan { background: var(--cyan); color: var(--black); }
.btn-pink { background: var(--pink); color: var(--black); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; border-color: var(--line); }
.btn-ghost:active { transform: none; }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.input {
  width: 100%;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--fieldink);
  background: var(--field);
  border: var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
}
.input::placeholder { color: var(--fieldink); opacity: 0.4; }

.code-input {
  font-family: Anton, sans-serif;
  font-size: 44px;
  text-align: center;
  letter-spacing: 14px;
  text-transform: uppercase;
  padding: 10px 0 10px 14px;
  margin-bottom: 6px;
}

/* ---------- avatar picker ---------- */

.avatar-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.avatar-pick {
  font-size: 20px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 3px 0;
  cursor: pointer;
  line-height: 1.3;
}
.avatar-pick.selected {
  background: var(--lime);
  border-color: var(--black);
  box-shadow: 2px 2px 0 var(--black);
}

/* ---------- AI topic ---------- */

.ai-topic-wrap { margin: -6px 0 16px; animation: rise 0.25s; }
.ai-topic { font-size: 16px; }

.gen-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gen-card {
  background: var(--card);
  border: var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 30px 26px;
  text-align: center;
  max-width: 320px;
  transform: rotate(-1.5deg);
}
.gen-spin { font-size: 44px; animation: spin 1.6s linear infinite; display: inline-block; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.gen-title { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: 2px; margin-top: 10px; }
.gen-topic { color: var(--hi); font-weight: 700; font-size: 16px; margin-top: 6px; }
.gen-note { font-size: 12px; opacity: 0.6; margin-top: 10px; }

/* ---------- QR ---------- */

.qr-box { display: flex; justify-content: center; margin: 2px 0 10px; min-height: 0; }
.qr-box img {
  border: var(--border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black);
  background: #fff;
  padding: 6px;
  width: 132px;
  height: 132px;
  image-rendering: pixelated;
}

/* ---------- picture questions ---------- */

.q-img {
  display: block;
  max-width: min(78vw, 300px);
  margin: 14px auto 0;
  border: var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #fff;
}

/* ---------- awards ---------- */

.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.award {
  background: var(--card);
  border: var(--border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--black);
  padding: 12px;
  animation: pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.award .aw-emoji { font-size: 26px; }
.award .aw-title { font-family: Anton, sans-serif; font-size: 12px; letter-spacing: 1.5px; color: var(--hi); margin-top: 4px; }
.award .aw-name { font-weight: 700; font-size: 15px; margin-top: 2px; }
.award .aw-detail { font-size: 12px; opacity: 0.7; margin-top: 2px; overflow-wrap: break-word; }

/* ---------- theme picker ---------- */

.theme-row { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.theme-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: Anton, sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}
.theme-pill .swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--black); }
.theme-pill.selected { border-color: var(--black); background: var(--lime); color: var(--black); box-shadow: 3px 3px 0 var(--black); }

/* ---------- category & timer pickers ---------- */

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 18px; }
.cat-grid.compact { grid-template-columns: 1fr 1fr; max-height: 260px; overflow-y: auto; }
.cat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.cat .cat-emoji { font-size: 20px; }
.cat .live-dot {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--cyan);
  color: var(--black);
  border-radius: 6px;
  padding: 2px 5px;
}
.cat.selected {
  background: var(--lime);
  color: var(--black);
  border-color: var(--black);
  box-shadow: 4px 4px 0 var(--black);
  font-weight: 700;
}
.cat.special {
  border-color: var(--gold);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--gold) 45%, transparent);
  font-weight: 700;
}
.cat.special .live-dot { background: var(--gold); }
.cat.special.selected { border-color: var(--black); box-shadow: 4px 4px 0 var(--black); }
.cat-divider {
  grid-column: 1 / -1;
  font-family: Anton, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.55;
  text-align: center;
  padding-top: 4px;
}
.cat.selected .live-dot { background: var(--black); color: var(--cyan); }

.settings-row { margin: 4px 0 12px; }
.timer-row { display: flex; gap: 10px; margin-top: 8px; }
.timer-pill {
  flex: 1;
  font-family: Anton, sans-serif;
  font-size: 18px;
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.timer-pill.selected {
  background: var(--cyan);
  color: var(--black);
  border-color: var(--black);
  box-shadow: 4px 4px 0 var(--black);
}

/* ---------- lobby ---------- */

.room-code {
  font-family: Anton, sans-serif;
  font-size: clamp(72px, 24vw, 120px);
  text-align: center;
  color: var(--hi);
  text-shadow: 6px 6px 0 var(--pink);
  letter-spacing: 10px;
  margin: 4px 0 8px;
  transform: rotate(-2deg);
  user-select: all;
}
#btn-share { display: block; margin: 0 auto 6px; }
.lobby-meta { text-align: center; font-size: 14px; opacity: 0.85; margin: 10px 0 16px; }

.player-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }
.player-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 9px;
  font-weight: 700;
  font-size: 15px;
  animation: pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.player-chip .pc-avatar { font-size: 20px; }
.player-chip.host { border-color: var(--gold); }
.player-chip.gone { opacity: 0.4; filter: grayscale(1); }
.player-chip .pc-crown { font-size: 12px; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.settings-drawer { margin-bottom: 14px; }
.settings-drawer summary {
  font-size: 14px;
  opacity: 0.75;
  cursor: pointer;
  padding: 8px 0;
}
#host-lobby-controls .btn.big { width: 100%; }

/* ---------- question ---------- */

.final-banner {
  font-family: Anton, sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-align: center;
  background: var(--gold);
  color: var(--black);
  border: var(--border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black);
  padding: 9px 12px;
  margin: 14px 0 0;
  transform: rotate(-1deg);
}

.q-top { display: flex; gap: 8px; margin: 16px 0 12px; flex-wrap: wrap; }
.q-chip {
  font-family: Anton, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
}
.q-cat { background: var(--pink); color: var(--black); border-color: var(--black); }
.q-progress { margin-left: auto; }
.q-guesses .used { opacity: 0.3; }
.q-guesses.last-one { background: var(--gold); color: var(--black); border-color: var(--black); animation: pulse 1.2s ease-in-out infinite; }

.timerbar {
  height: 16px;
  background: var(--card);
  border: var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.timerbar-fill {
  height: 100%;
  width: 100%;
  background: var(--lime);
  border-radius: 6px 0 0 6px;
}
.timerbar-fill.hot { background: var(--pink); }
.timer-num {
  font-family: Anton, sans-serif;
  font-size: 30px;
  text-align: right;
  color: var(--hi);
  margin: 4px 2px 0 0;
  min-height: 36px;
}
.timer-num.center { text-align: center; font-size: 40px; }
.timer-num.hot { color: var(--pink); }

/* the big center-screen "−4s" smash on a wrong guess */
.penalty-big {
  position: fixed;
  left: 50%;
  top: 38%;
  z-index: 150;
  font-family: Anton, sans-serif;
  font-size: clamp(70px, 22vw, 120px);
  color: var(--pink);
  -webkit-text-stroke: 3px var(--black);
  text-shadow: 6px 6px 0 var(--black), 0 0 34px color-mix(in srgb, var(--pink) 70%, transparent);
  pointer-events: none;
  white-space: nowrap;
  animation: penaltySmash 1.3s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes penaltySmash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(var(--tilt, -6deg)); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--tilt, -6deg)); }
  24% { transform: translate(-52%, -49%) scale(1.06) rotate(var(--tilt, -6deg)); }
  32% { transform: translate(-49%, -50%) scale(1) rotate(var(--tilt, -6deg)); }
  65% { opacity: 1; transform: translate(-50%, -90%) scale(0.98) rotate(var(--tilt, -6deg)); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(0.9) rotate(var(--tilt, -6deg)); }
}
.timerbar-fill.stung { animation: sting 0.45s; }
@keyframes sting {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.6) saturate(2); background: var(--pink); }
}

.countdown {
  font-family: Anton, sans-serif;
  font-size: 120px;
  text-align: center;
  color: var(--cyan);
  text-shadow: 6px 6px 0 var(--black);
  margin: 30px 0;
  animation: pulse 1s ease-in-out infinite;
}

.question-text {
  font-size: clamp(21px, 6vw, 27px);
  font-weight: 700;
  line-height: 1.35;
  margin: 18px 0 20px;
  min-height: 76px;
}

.guess-form { display: flex; gap: 10px; }
.guess-input { flex: 1; font-size: 19px; }
.btn.go { padding: 10px 20px; }

.wrong-flash {
  margin-top: 12px;
  font-weight: 700;
  color: var(--pink);
  font-size: 15px;
}
.shake { animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.locked-panel {
  margin-top: 16px;
  background: var(--card);
  border: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
  text-align: center;
  animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.locked-panel .lp-points {
  font-family: Anton, sans-serif;
  font-size: 46px;
  color: var(--hi);
}
.locked-panel .lp-note { font-size: 14px; opacity: 0.8; margin-top: 4px; }
.locked-panel.gaveup .lp-points { color: var(--ink); font-size: 30px; }

#btn-giveup { display: block; margin: 18px auto 0; }

/* ---------- wager ---------- */

.wager-have { text-align: center; font-family: Anton, sans-serif; font-size: 14px; letter-spacing: 2px; opacity: 0.8; margin: 0 0 4px; }
.wager-amount {
  font-family: Anton, sans-serif;
  font-size: clamp(56px, 18vw, 84px);
  text-align: center;
  color: var(--hi);
  line-height: 1;
  margin-bottom: 12px;
}
.wager-slider {
  width: 100%;
  accent-color: var(--pink);
  height: 34px;
  margin-bottom: 12px;
}
.wager-chips { display: flex; gap: 10px; margin-bottom: 16px; }
.wager-chips .btn { flex: 1; }
#btn-wager-lock { width: 100%; }

/* ---------- reveal ---------- */

.answer-stamp {
  font-family: Anton, sans-serif;
  font-size: clamp(34px, 10vw, 54px);
  text-align: center;
  background: var(--lime);
  color: var(--black);
  border: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 16px;
  transform: rotate(-2deg);
  margin: 6px 0 14px;
  animation: stamp 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
  overflow-wrap: break-word;
}
@keyframes stamp { from { transform: rotate(-2deg) scale(1.6); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }

.spam-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 0 14px;
}
.spam-btn {
  font-size: 26px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 9px 15px;
  cursor: pointer;
  transition: transform 0.07s;
  user-select: none;
  -webkit-user-select: none;
}
.spam-btn:active { transform: scale(1.35); border-color: var(--black); }

.spam-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  overflow: hidden;
}
.spam-float {
  position: absolute;
  bottom: -50px;
  animation: spamUp linear forwards;
  will-change: transform, opacity;
}
@keyframes spamUp {
  0% { transform: translateY(0) translateX(0) rotate(-10deg) scale(0.7); opacity: 1; }
  20% { transform: translateY(-22vh) translateX(3vw) rotate(8deg) scale(1.1); opacity: 1; }
  60% { transform: translateY(-62vh) translateX(-3vw) rotate(-6deg) scale(1); opacity: 0.9; }
  100% { transform: translateY(-108vh) translateX(2vw) rotate(12deg) scale(1.15); opacity: 0; }
}

.rate-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.rate-label { font-family: Anton, sans-serif; font-size: 11px; letter-spacing: 2px; opacity: 0.6; }
.rate-btn {
  font-size: 20px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  transition: transform 0.1s;
}
.rate-btn:active { transform: scale(1.2); }
.rate-btn.selected { border-color: var(--black); background: var(--lime); box-shadow: 3px 3px 0 var(--black); }

.react-hint {
  font-size: 12px;
  opacity: 0.55;
  text-align: center;
  margin: -6px 0 10px;
}

.results-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.result-row {
  position: relative;
  display: block;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 15px;
}
.result-row.correct { border-color: var(--lime); }
.rr-main { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-chips:not(:empty) { margin-top: 7px; }
.chip {
  font-size: 13px;
  background: none;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  animation: pop 0.25s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.rr-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 9px;
  animation: rise 0.15s;
}
.react-btn {
  font-size: 22px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 5px 11px;
  cursor: pointer;
  transition: transform 0.1s;
}
.react-btn:active { transform: scale(1.25); }
.float-emoji {
  position: absolute;
  top: 4px;
  font-size: 26px;
  pointer-events: none;
  z-index: 60;
  animation: floatUp 1.1s ease-out forwards;
}
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-70px) scale(1.7); }
}
.result-row .rr-avatar { font-size: 20px; }
.result-row .rr-name { font-weight: 700; }
.result-row .rr-guess { opacity: 0.65; font-style: italic; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.result-row .rr-points {
  margin-left: auto;
  font-family: Anton, sans-serif;
  font-size: 18px;
  color: var(--hi);
  white-space: nowrap;
}
.result-row .rr-points.zero { color: var(--ink); opacity: 0.4; }
.result-row .rr-points.loss { color: var(--pink); }

.board-title { font-family: Anton, sans-serif; font-size: 14px; letter-spacing: 2px; opacity: 0.7; margin-bottom: 8px; }
.board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15px;
  border: 2px solid transparent;
}
.board-row.me { border-color: var(--cyan); }
.board-row .br-rank { font-family: Anton, sans-serif; width: 26px; opacity: 0.7; }
.board-row .br-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .br-score { margin-left: auto; font-family: Anton, sans-serif; font-size: 17px; color: var(--gold); }
.board-row.gone { opacity: 0.45; }

#btn-next { width: 100%; margin-top: 4px; }

/* ---------- chat ---------- */

.chat-panel { margin: 4px 0 20px; }
.chat-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  min-height: 52px;
}
.chat-msg { font-size: 14px; line-height: 1.4; animation: rise 0.2s; overflow-wrap: break-word; }
.chat-msg .cm-who { font-weight: 700; }
.chat-empty { font-size: 13px; opacity: 0.5; font-style: italic; }
.chat-form { display: flex; gap: 8px; }
.chat-input { flex: 1; font-size: 16px; padding: 10px 14px; }
.chat-form .btn.go { padding: 8px 16px; font-size: 16px; }

/* ---------- final ---------- */

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 26px 0 26px; min-height: 240px; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 30%; }
.podium-col .pd-avatar { font-size: 38px; }
.podium-col .pd-name { font-weight: 700; font-size: 14px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-col .pd-score { font-family: Anton, sans-serif; color: var(--gold); }
.podium-col .pd-bar {
  width: 100%;
  border: var(--border);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: Anton, sans-serif;
  font-size: 30px;
  color: var(--black);
  padding-top: 8px;
  animation: grow 0.9s cubic-bezier(0.2, 1.3, 0.4, 1);
  transform-origin: bottom;
}
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.podium-col.p1 .pd-bar { height: 150px; background: var(--gold); }
.podium-col.p2 .pd-bar { height: 105px; background: #cfd6dd; }
.podium-col.p3 .pd-bar { height: 75px; background: #d99a5b; }

/* ---------- toast, pills, confetti ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: var(--pink);
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
  border: var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 18px;
  z-index: 100;
  max-width: 88vw;
  text-align: center;
  animation: rise 0.25s;
}

.connpill {
  position: fixed;
  top: 34px;
  left: 12px;
  z-index: 50;
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 5px 10px;
}

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-track { animation: none; }
}

/* ---- Event Pass UI + branded lobbies ---- */
.pass-wrap { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pass-row { display: flex; gap: 8px; width: 100%; }
.pass-input { flex: 1; text-transform: uppercase; letter-spacing: 0.08em; }
.pass-status { text-align: left; }
.pass-status strong { color: var(--lime); }
.fineprint-link { color: var(--cyan); text-decoration: none; }
.fineprint-link:hover { text-decoration: underline; }
.brand-banner {
  font-family: "Anton", sans-serif;
  font-size: clamp(18px, 5vw, 26px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime);
  border: 2px solid var(--lime);
  padding: 8px 18px;
  margin: 0 auto 14px;
  text-align: center;
  max-width: 92%;
}