@font-face {
  font-family: "Fredoka";
  src: url(/fonts/fredoka.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #261a63;          /* text on light surfaces */
  --ink-soft: #6b5fb0;
  --paper: #ffffff;
  --paper2: #f1edff;
  --text: #ffffff;         /* text on the page background */
  --muted: rgba(255, 255, 255, .78);
  --pink: #ff4f9a;
  --orange: #ff9f1c;
  --yellow: #ffd23f;
  --green: #22c55e;
  --teal: #14c9b8;
  --blue: #3b82f6;
  --violet: #7c4dff;
  --red: #ef4444;
  --good: #16a34a;
  --bad: #e11d48;
  --radius: 20px;
  --lift: 0 5px 0 rgba(20, 10, 70, .28);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  font: 17px/1.4 "Fredoka", ui-rounded, "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: #2a1a7a;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255, 79, 154, .55) 0, transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(20, 201, 184, .45) 0, transparent 34%),
    radial-gradient(circle at 80% 92%, rgba(255, 159, 28, .40) 0, transparent 38%),
    linear-gradient(165deg, #3a22a0 0%, #24147a 55%, #1b1060 100%);
  background-attachment: fixed;
}
a { color: var(--yellow); }
.wrap { max-width: 780px; margin: 0 auto; padding: 22px 16px 70px; }
.wrap.wide { max-width: 1120px; }

h1 { font-size: 2rem; margin: .2em 0 .1em; font-weight: 700; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(20, 10, 70, .3); }
h2 { font-size: 1.05rem; margin: 1.5em 0 .6em; color: var(--yellow); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.muted { color: var(--muted); }

/* ---------- brand header ---------- */
.brand { display: flex; align-items: center; margin-bottom: 6px; }
.brand > * + * { margin-left: 14px; }
.brand img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(20, 10, 70, .3)); }
.brand h1 { font-size: 2.6rem; line-height: 1; margin: 0; }
.brand h1 span { color: var(--yellow); }
.brand p { margin: 4px 0 0; }

/* ---------- surfaces ---------- */
.card, .answer, .board-row, .stat, .tv-card {
  background: var(--paper); color: var(--ink); box-shadow: var(--lift);
}
.card { border-radius: var(--radius); padding: 18px; margin: 16px 0; }
.card h2 { color: var(--violet); margin-top: 0; }
.card .muted, .answer .muted, .board-row .muted, .stat .muted { color: var(--ink-soft); }
.card a { color: var(--violet); }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
.card label { color: var(--ink); }
input[type=text], input[type=number], select, textarea {
  width: 100%; padding: 13px 16px; font: inherit; color: var(--ink); background: var(--paper2);
  border: 3px solid transparent; border-radius: 14px; outline: none;
}
input::placeholder { color: #a79ddb; }
input:focus, select:focus, textarea:focus { border-color: var(--violet); background: #fff; }
/* inputs that sit directly on the gradient */
.wrap > input[type=text], .wrap > select { background: #fff; box-shadow: var(--lift); }

button, .btn {
  font: inherit; font-weight: 600; color: #fff; border: 0; border-radius: 14px; padding: 12px 20px; cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.2;
  background: linear-gradient(180deg, #ff6aa9, var(--pink)); box-shadow: 0 4px 0 #b5256a;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
button:hover, .btn:hover { filter: brightness(1.06); }
button:active, .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b5256a; }
button.ghost, .btn.ghost { background: linear-gradient(180deg, #8f6bff, var(--violet)); box-shadow: 0 4px 0 #4a2bb3; }
button.ghost:active, .btn.ghost:active { box-shadow: 0 1px 0 #4a2bb3; }
button.danger { background: linear-gradient(180deg, #ff6a7f, var(--bad)); box-shadow: 0 4px 0 #8f1233; }
button.danger:active { box-shadow: 0 1px 0 #8f1233; }
button:disabled { opacity: .5; cursor: default; filter: grayscale(.4); }
.mini { padding: 6px 12px; font-size: .9rem; background: var(--paper2); color: var(--violet); box-shadow: 0 3px 0 #cfc5f5; }
.mini:active { box-shadow: 0 0 0 #cfc5f5; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1; min-width: 160px; }
.err { color: #ffd6e5; font-weight: 600; min-height: 1.4em; }
.card .err { color: var(--bad); }
.hr { border: 0; border-top: 2px dashed var(--paper2); margin: 18px 0; }
.pillbar { display: inline-block; background: var(--yellow); color: var(--ink); padding: 5px 14px; border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 #b98e00; }

/* ---------- builder ---------- */
.opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.opt-row input[type=radio] { width: 24px; height: 24px; accent-color: var(--green); flex: none; }
.qcard { border-left: 10px solid var(--pink); }
.qcard:nth-child(4n+2) { border-left-color: var(--blue); }
.qcard:nth-child(4n+3) { border-left-color: var(--orange); }
.qcard:nth-child(4n+4) { border-left-color: var(--green); }

/* ---------- avatars & chips ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; line-height: 1;
  overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(20, 10, 70, .3);
}
.avatar img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6%; }
.chip {
  display: inline-flex; align-items: center; background: var(--paper); color: var(--ink); border-radius: 999px;
  padding: 4px 14px 4px 4px; margin: 4px; font-weight: 600; box-shadow: 0 3px 0 rgba(20, 10, 70, .28);
}
.chip.done { background: #d9ffe8; outline: 3px solid var(--green); }
.chip .avatar { border-width: 2px; box-shadow: none; }

/* ---------- profile picker ---------- */
.avatar-grid, .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; }
.pick { background: var(--paper2); border: 4px solid transparent; border-radius: 18px; padding: 4px; cursor: pointer; line-height: 0; }
.pick img { width: 100%; border-radius: 12px; display: block; }
.pick.sel { border-color: var(--pink); background: #ffe3f0; transform: scale(1.06); }
.swatch { height: 46px; border: 4px solid #fff; border-radius: 14px; cursor: pointer; box-shadow: 0 3px 0 rgba(20, 10, 70, .25); }
.swatch.sel { outline: 4px solid var(--ink); }
.preview { display: flex; align-items: center; gap: 16px; font-size: 1.5rem; font-weight: 700; color: var(--ink); }

/* ---------- answering (phone) ---------- */
.question { font-size: 1.7rem; font-weight: 700; margin: 12px 0 20px; line-height: 1.2; text-shadow: 0 3px 0 rgba(20, 10, 70, .3); }
.choice {
  display: block; width: 100%; text-align: left; font-size: 1.2rem; padding: 20px 18px; margin: 12px 0; border-radius: 18px;
  background: var(--blue); box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
}
.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
button.choice:nth-of-type(4n+1) { background: #e74c5c; }
button.choice:nth-of-type(4n+2) { background: #3b82f6; }
button.choice:nth-of-type(4n+3) { background: #e0a100; }
button.choice:nth-of-type(4n+4) { background: #17a34a; }
button.choice:nth-of-type(n+5) { background: #8b5cf6; }
.big-status { text-align: center; padding: 40px 10px; }
.big-status .emoji { font-size: 4.5rem; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- QR ---------- */
.qr { background: #fff; border-radius: 22px; padding: 12px; display: inline-block; line-height: 0; box-shadow: var(--lift); }
.qr img { width: 100%; max-width: 320px; height: auto; }

/* ---------- results ---------- */
.tally { margin: 10px 0 24px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 28%) 1fr auto; gap: 12px; align-items: center; margin: 12px 0; }
.bar-label { font-weight: 700; text-shadow: 0 2px 0 rgba(20, 10, 70, .3); }
.bar-track { position: relative; background: rgba(20, 10, 70, .35); border-radius: 14px; height: 42px; overflow: hidden; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .15); }
.bar-fill { height: 100%; border-radius: 14px; background: linear-gradient(90deg, var(--blue), #6fa8ff); transition: width .5s; }
.bar-row:nth-child(4n+1) .bar-fill { background: linear-gradient(90deg, #e74c5c, #ff8a96); }
.bar-row:nth-child(4n+3) .bar-fill { background: linear-gradient(90deg, #e0a100, #ffd23f); }
.bar-row:nth-child(4n+4) .bar-fill { background: linear-gradient(90deg, #17a34a, #5eea92); }
.bar-row.right .bar-fill { background: linear-gradient(90deg, #16a34a, #4ade80); box-shadow: 0 0 0 3px #fff inset; }
.bar-row.right .bar-label { color: #b8ffd2; }
.bar-count { position: absolute; left: 14px; top: 0; line-height: 42px; font-weight: 700; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bar-people { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
.stats { display: flex; flex-wrap: wrap; margin: 10px 0 22px; }
.stat { margin: 0 14px 14px 0; border-radius: var(--radius); padding: 14px 24px; text-align: center; }
.stat-v { font-size: 2.2rem; font-weight: 700; color: var(--violet); }
.stat-k { color: var(--ink-soft); }

.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 20px 0; }
.award { border-radius: var(--radius); padding: 18px 14px; text-align: center; color: var(--ink); background: linear-gradient(160deg, #fff, #ffeef7); box-shadow: var(--lift); border-top: 8px solid var(--pink); }
.award:nth-child(4n+2) { border-top-color: var(--teal); background: linear-gradient(160deg, #fff, #e6fffb); }
.award:nth-child(4n+3) { border-top-color: var(--orange); background: linear-gradient(160deg, #fff, #fff4df); }
.award:nth-child(4n+4) { border-top-color: var(--violet); background: linear-gradient(160deg, #fff, #efe9ff); }
.award-emoji { font-size: 2.8rem; line-height: 1.1; }
.award-title { font-weight: 700; font-size: 1.2rem; margin: 4px 0 8px; }
.award-who { margin-bottom: 4px; }
.award-detail { color: var(--ink-soft); font-size: .95rem; }

.answers { display: grid; gap: 10px; margin-top: 20px; }
.answers.wall { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.answer { display: flex; align-items: center; border-radius: 16px; padding: 10px 14px; }
.answer.right { border-left: 8px solid var(--good); background: #eafff2; }
.answer.wrong { border-left: 8px solid var(--bad); background: #fff0f4; }
.answer-body { flex: 1; min-width: 0; }
.answer-name { font-weight: 700; }
.answer-text { overflow-wrap: anywhere; }
.answer-ms { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; }

.board { display: grid; gap: 10px; margin: 12px 0; }
.board-row { display: flex; align-items: center; border-radius: 18px; padding: 10px 16px; }
.board-row.first { background: linear-gradient(90deg, #fff3b8, #fff); border: 3px solid var(--yellow); }
.board-rank { font-weight: 700; font-size: 1.5rem; width: 1.6em; text-align: center; color: var(--violet); }
.board-row.first .board-rank { color: #d99100; }
.board-score { font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--violet); }

ol.outline { margin: 12px 0 0; padding-left: 1.5em; color: var(--ink-soft); }
ol.outline li.cur { color: var(--ink); font-weight: 700; }
ol.outline li.done { text-decoration: line-through; opacity: .55; }

/* ---------- TV mode: big type, generous spacing ---------- */
body.tv { font-size: 24px; overflow-x: hidden; }
.tv-stage { padding: 3vh 4vw; min-height: 100vh; }
.tv-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tv-brand { display: flex; align-items: center; margin-bottom: 1.5vh; font-weight: 700; font-size: 1.5rem; color: var(--yellow); }
.tv-brand img { width: 64px; height: 64px; object-fit: contain; }
.tv-q { font-size: 3.4rem; font-weight: 700; line-height: 1.12; margin: 0; text-shadow: 0 4px 0 rgba(20, 10, 70, .35); }
.tv-sub { color: var(--muted); font-size: 1.3rem; margin-top: 10px; }
.tv-lobby { display: flex; align-items: center; margin-top: 4vh; }
.tv-lobby .qr img { max-width: 34vh; width: 34vh; }
.tv-join { font-size: 1.5rem; }
.tv-join b { font-size: 1.8rem; word-break: break-all; color: var(--yellow); }
.tv-people { margin-top: 3vh; }
.tv-people .chip { font-size: 1.4rem; }
.tv-count { font-size: 2.4rem; font-weight: 700; margin: 12px 0; }
body.tv .award-emoji { font-size: 3.6rem; }
body.tv .award-title { font-size: 1.5rem; }
body.tv .bar-track { height: 58px; }
body.tv .bar-count { line-height: 58px; font-size: 1.5rem; }
body.tv .bar-label { font-size: 1.5rem; }
body.tv .answer-text { font-size: 1.35rem; }
body.tv .board-row { padding: 14px 22px; }
body.tv .board-score { font-size: 2.1rem; }
.mini-qr { background: #fff; border-radius: 14px; padding: 7px; line-height: 0; flex: none; box-shadow: var(--lift); }
.mini-qr img { width: 14vh; height: 14vh; }
.tv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 3vh; max-width: 1250px; }
.tv-opt { border-radius: 18px; padding: 20px 26px; font-size: 1.7rem; font-weight: 600; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.tv-opt:nth-child(4n+1) { background: #e74c5c; }
.tv-opt:nth-child(4n+2) { background: #3b82f6; }
.tv-opt:nth-child(4n+3) { background: #e0a100; }
.tv-opt:nth-child(4n+4) { background: #17a34a; }
.tv-opt:nth-child(n+5) { background: #8b5cf6; }

/* confetti canvas */
#confetti { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* =====================================================================
   MOTION & PERSONALITY
   ===================================================================== */
:root { --elastic: cubic-bezier(.34, 1.56, .64, 1); --snap: cubic-bezier(.2, 1.9, .4, .9); }

/* ---- living background: drifting doodle pattern + slow colour glows ---- */
body::before {
  content: ""; position: fixed; left: -160px; top: -160px; right: -160px; bottom: -160px; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27 viewBox=%270 0 160 160%27 fill=%27none%27 stroke=%27white%27 stroke-width=%275%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 opacity=%27.14%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%279%27/%3E%3Cpath d=%27M100 22v22M89 33h22%27/%3E%3Cpath d=%27M20 104q10-14 20 0t20 0%27/%3E%3Cpath d=%27M112 106l12 20h-24z%27/%3E%3Cpath d=%27M138 62l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z%27/%3E%3Ccircle cx=%2770%27 cy=%27142%27 r=%275%27/%3E%3Cpath d=%27M140 130q8-8 16 0%27/%3E%3C/svg%3E"); background-size: 160px 160px;
  animation: drift 36s linear infinite;
}
body::after {
  content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 210, 63, .20) 0, transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(20, 201, 184, .22) 0, transparent 32%);
  animation: glow 14s ease-in-out infinite alternate;
}
.wrap, .tv-stage { position: relative; z-index: 1; }
@keyframes drift { to { transform: translate(160px, 160px); } }
@keyframes glow { to { transform: translate(4%, -3%) scale(1.15); } }

/* ---- keyframes ---- */
@keyframes popIn {
  0%   { transform: scale(.2) rotate(-10deg); opacity: 0; }
  55%  { transform: scale(1.16) rotate(3deg); opacity: 1; }
  78%  { transform: scale(.94) rotate(-1deg); }
  100% { transform: scale(1) rotate(var(--tilt, 0deg)); opacity: 1; }
}
@keyframes tada {
  0%   { transform: scale(1) rotate(0); }
  15%  { transform: scale(.88) rotate(-5deg); }
  35%  { transform: scale(1.18) rotate(5deg); }
  50%  { transform: scale(1.18) rotate(-5deg); }
  65%  { transform: scale(1.18) rotate(4deg); }
  85%  { transform: scale(1.04) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes floatUp { from { transform: translateY(34px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes bobBig { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-14px) scale(.97, 1.04); } 90% { transform: translateY(0) scale(1.05, .94); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg) scale(1, 1); } 50% { transform: rotate(6deg) scale(1.04, .97); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(10deg) scale(1.1); } 80% { transform: rotate(-5deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes letterWave { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-.22em) rotate(-5deg); } 40% { transform: translateY(.04em) rotate(2deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .0); } 50% { box-shadow: 0 0 22px 6px rgba(74, 222, 128, .75); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }

/* ---- reusable: JS adds .pop the first time a thing appears ---- */
.pop { animation: popIn .7s var(--elastic) backwards; animation-delay: var(--d, 0ms); }
.chip.done.pop { animation-name: tada; animation-duration: .9s; }
.award { transform: rotate(var(--tilt, 0deg)); transition: transform .3s var(--elastic); }
.award:nth-child(odd) { --tilt: -1.4deg; }
.award:nth-child(even) { --tilt: 1.4deg; }
.award:hover { transform: rotate(0) scale(1.05); }
.award-emoji { display: inline-block; animation: bobBig 2.6s ease-in-out infinite; }
.award:nth-child(2n) .award-emoji { animation-delay: -.8s; }
.award:nth-child(3n) .award-emoji { animation-delay: -1.6s; }

/* ---- avatars idle-bob, phase synced to the clock so rebuilds don't jitter ---- */
.avatar.bob { animation: bob 2.8s ease-in-out infinite; }
.preview .avatar { animation: bobBig 2.2s ease-in-out infinite; }
.bar-people .avatar { margin: 2px; }

/* ---- bars: elastic grow ---- */
.bar-fill { transition: width .9s var(--elastic); }
.bar-row.right .bar-fill { animation: glowPulse 1.6s ease-in-out infinite; }

/* ---- brand ---- */
.brand img, .tv-brand img { animation: sway 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.brand img:hover { animation: wiggle .6s; }
.w { display: inline-block; animation: letterWave 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 110ms); white-space: pre; }

/* ---- squishy buttons ---- */
button, .btn { transition: transform .3s var(--elastic), box-shadow .15s, filter .15s; }
button:hover, .btn:hover { transform: translateY(-2px) scale(1.04); }
button:active, .btn:active { transform: translateY(3px) scale(.94); transition-duration: .08s; }
#create { animation: pulse 2s ease-in-out infinite; }
.pick { transition: transform .3s var(--elastic), background .15s; }
.pick:hover { transform: rotate(-5deg) scale(1.14); }
.pick.sel { animation: tada .8s; }
.swatch { transition: transform .3s var(--elastic); }
.swatch:hover { transform: scale(1.12) rotate(4deg); }
.chip { transition: transform .3s var(--elastic); }
.chip:hover { transform: scale(1.08) rotate(-2deg); }

/* ---- page entrance (static markup only) ---- */
.wrap > .card, .wrap > h2, .wrap > label, .wrap > input, .wrap > #qlist, .wrap > .row, .wrap > .question { animation: floatUp .6s var(--elastic) backwards; }
.wrap > :nth-child(2) { animation-delay: .05s; } .wrap > :nth-child(3) { animation-delay: .1s; } .wrap > :nth-child(4) { animation-delay: .15s; }
.wrap > :nth-child(5) { animation-delay: .2s; } .wrap > :nth-child(6) { animation-delay: .25s; } .wrap > :nth-child(7) { animation-delay: .3s; }

/* ---- phone: question + choices ---- */
.question { animation: floatUp .55s var(--elastic) backwards; }
button.choice { animation: popIn .6s var(--elastic) backwards; transition: transform .3s var(--elastic), box-shadow .15s; }
button.choice:nth-of-type(1) { animation-delay: .08s; } button.choice:nth-of-type(2) { animation-delay: .16s; }
button.choice:nth-of-type(3) { animation-delay: .24s; } button.choice:nth-of-type(4) { animation-delay: .32s; }
button.choice:nth-of-type(n+5) { animation-delay: .4s; }
button.choice:hover { transform: scale(1.02); }
button.choice:active { transform: scale(.96) translateY(4px); }
.big-status h1 { animation: floatUp .6s var(--elastic) backwards; }
.big-status .emoji { display: inline-block; animation: bobBig 2.4s ease-in-out infinite; }

/* ---- leaderboard & podium ---- */
.board-row.first { background: linear-gradient(100deg, #fff3b8 0%, #fff 40%, #fff3b8 60%, #ffe27a 100%); background-size: 200% 100%; animation: shimmer 3.2s linear infinite; }
.board-row.pop { animation-name: popIn; }
.board-row.first.pop { animation: popIn .7s var(--elastic) backwards, shimmer 3.2s linear infinite; animation-delay: var(--d, 0ms), 0ms; }
.podium { display: flex; justify-content: center; align-items: flex-end; margin: 28px 0 18px; }
.podium .step { text-align: center; margin: 0 10px; width: 30%; max-width: 230px; }
.podium .who { margin-bottom: 8px; font-weight: 700; font-size: 1.15rem; text-shadow: 0 3px 0 rgba(20, 10, 70, .35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .block { border-radius: 18px 18px 0 0; color: #fff; font-weight: 700; font-size: 2.6rem; padding-top: 10px; box-shadow: var(--lift); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.podium .p1 .block { height: 150px; background: linear-gradient(180deg, #ffd23f, #e0a100); }
.podium .p2 .block { height: 105px; background: linear-gradient(180deg, #cfd6e6, #8d97b3); }
.podium .p3 .block { height: 75px; background: linear-gradient(180deg, #e8a36b, #b06a35); }
.podium .crown { font-size: 2.4rem; display: block; animation: bobBig 1.8s ease-in-out infinite; line-height: 1; }
.podium .avatar { animation: bobBig 2.2s ease-in-out infinite; }
body.tv .podium .p1 .block { height: 21vh; } body.tv .podium .p2 .block { height: 15vh; } body.tv .podium .p3 .block { height: 10vh; }
body.tv .podium .who { font-size: 1.6rem; }

/* ---- TV: lobby QR floats, answer tiles pop ---- */
.tv-lobby .qr { animation: floaty 4s ease-in-out infinite; }
.tv-lobby > * + * { margin-left: 4vw; }
.tv-opt.pop { animation-name: popIn; }
.tv-sub { animation: none; }

/* ---- be kind to people who ask for less motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Tizen-safe spacing for former flex gaps ---- */
.chip > * + *, .answer > * + *, .board-row > * + *, .tv-brand > * + * { margin-left: 10px; }
.chip > .avatar + span { margin-left: 8px; }

/* TV: bigger brand + player chips */
.tv-brand { font-size: 2.1rem; }
.tv-brand img { width: 84px; height: 84px; }
body.tv .chip { padding: 6px 22px 6px 6px; margin: 7px; font-size: 1.6rem; }