:root {
  --pink: #ff5fa2;
  --rose: #ff9ccf;
  --violet: #9b5cff;
  --gold: #ffd36e;
  --bg1: #14051f;
  --bg2: #3a0b45;
  --text: #fff4fa;
  --beat: 0.652s; /* set from config.bpm */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, var(--bg2), var(--bg1) 70%);
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

.screen {
  position: fixed; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  text-align: center; z-index: 2;
}
.screen.active { display: flex; animation: fadeIn .8s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: scale(.97); } }

.script { font-family: "Dancing Script", cursive; font-size: clamp(2.2rem, 9vw, 4.5rem); line-height: 1.1;
  background: linear-gradient(90deg, var(--rose), var(--gold), var(--rose)); background-size: 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; }
@keyframes shimmer { to { background-position: 200% 0; } }

.hint { opacity: .8; max-width: 26rem; line-height: 1.5; }
.error { color: var(--rose); min-height: 1.4em; }
.gift { font-size: 5rem; animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }

form { display: flex; flex-direction: column; gap: 12px; width: min(320px, 100%); }
input {
  font: inherit; font-size: 1.1rem; padding: 14px 18px; border-radius: 999px; text-align: center;
  border: 2px solid rgba(255,156,207,.5); background: rgba(255,255,255,.08); color: var(--text); outline: none;
}
input:focus { border-color: var(--pink); box-shadow: 0 0 20px rgba(255,95,162,.5); }
.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

.btn {
  font: inherit; font-weight: 600; font-size: 1.05rem; color: #fff; cursor: pointer;
  padding: 14px 26px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  box-shadow: 0 8px 30px rgba(255,95,162,.45);
}
.btn:active { transform: scale(.96); }
.btn.ghost { background: rgba(255,255,255,.1); box-shadow: none; border: 1px solid rgba(255,255,255,.3); }
.btn.big { font-size: 1.4rem; padding: 20px 40px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 50px rgba(255,95,162,.9); transform: scale(1.05); } }

#count { font-size: 40vmin; font-weight: 800; color: var(--gold); text-shadow: 0 0 60px var(--pink); }
#count.pop { animation: pop 1s ease-out both; }
@keyframes pop { from { transform: scale(2.2); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.8); opacity: 0; } }

/* ---------- The show ---------- */
#show { justify-content: space-evenly; }
.stage { position: relative; width: min(70vmin, 420px); aspect-ratio: 1; }
.photo-wrap {
  position: absolute; inset: 6%; border-radius: 50%; overflow: hidden; z-index: 2;
  animation: reveal 3s cubic-bezier(.2,.8,.2,1) both, heartbeat var(--beat) ease-in-out 3s infinite;
}
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 20s ease-in-out infinite alternate; }
.photo-wrap.noimg { background: radial-gradient(circle, var(--pink), var(--violet)); }
@keyframes reveal { from { filter: blur(30px) brightness(3); transform: scale(.2) rotate(-30deg); opacity: 0; } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.04); } 30% { transform: scale(1); } 45% { transform: scale(1.025); } }
@keyframes kenburns { from { transform: scale(1.05) translate(0,0); } to { transform: scale(1.2) translate(-3%, 2%); } }

.ring {
  position: absolute; inset: 2%; border-radius: 50%; z-index: 1;
  background: conic-gradient(var(--pink), var(--gold), var(--violet), var(--rose), var(--pink));
  animation: spin 6s linear infinite; filter: blur(2px);
}
.halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,95,162,.55), transparent 65%);
  animation: glow var(--beat) ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { opacity: .5; transform: scale(1.08); } }

.orbit { position: absolute; inset: -8%; animation: spin 14s linear infinite; z-index: 3; }
.orbit span { position: absolute; left: 50%; top: 50%; font-size: clamp(1.2rem, 5vmin, 2rem);
  transform: rotate(calc(var(--i) * 60deg)) translateY(calc(-1 * min(42vmin, 250px))) rotate(calc(var(--i) * -60deg)); }

.lyrics { min-height: 8.5em; display: flex; flex-direction: column; justify-content: center; gap: 8px; max-width: 34rem; }
.line { transition: opacity .5s; }
.line.prev { opacity: .35; font-size: clamp(.9rem, 3.5vw, 1.1rem); }
.line.cur { font-size: clamp(1.3rem, 6vw, 2.2rem); font-weight: 600; text-shadow: 0 0 18px rgba(255,95,162,.8); }
.line.cur.special { font-family: "Dancing Script", cursive; font-size: clamp(2rem, 9vw, 3.4rem); color: var(--gold); text-shadow: 0 0 25px var(--pink); }
.line .w { display: inline-block; opacity: 0; transform: translateY(12px) scale(.8); filter: blur(6px);
  animation: word .5s ease-out forwards; }
@keyframes word { to { opacity: 1; transform: none; filter: none; } }

.finale { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: rgba(20,5,31,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 4; }
.finale.on { display: flex; animation: fadeIn 1.2s ease both; }
.finale h1 { font-size: clamp(3rem, 14vw, 7rem); }
.finale h2 { font-size: clamp(2.5rem, 12vw, 6rem); font-weight: 800; letter-spacing: .05em;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--violet), var(--pink)); background-size: 300%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3s linear infinite; }
.finale p { font-size: 2.5rem; }

/* ---------- Sync helper ---------- */
#sync textarea { width: min(560px, 100%); font: 0.85rem ui-monospace, monospace; padding: 10px; border-radius: 10px;
  background: rgba(0,0,0,.35); color: var(--text); border: 1px solid rgba(255,255,255,.2); }
#sync audio { width: min(560px, 100%); }

@media (prefers-reduced-motion: reduce) {
  .ring, .orbit, .photo-wrap img { animation: none; }
}

/* ---------- Puzzle race ---------- */
.script.small { font-size: clamp(1.6rem, 7vw, 2.6rem); }
.timer { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
.board { display: grid; gap: 3px; width: min(88vw, 60vh, 460px); aspect-ratio: 1; padding: 3px; border-radius: 14px;
  background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 40px rgba(255,95,162,.5); }
.tile { border-radius: 6px; background-repeat: no-repeat; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tile.sel { transform: scale(.9); box-shadow: 0 0 0 3px var(--gold), 0 0 20px var(--gold); }
.tile.ok { box-shadow: inset 0 0 0 1px rgba(255,211,110,.35); }
.board.done { gap: 0; transition: gap .6s; }
.board.done .tile { border-radius: 0; }
.big-time { font-size: clamp(3rem, 16vw, 6rem); font-weight: 800; color: var(--gold); text-shadow: 0 0 40px var(--pink);
  font-variant-numeric: tabular-nums; }

.hint.small { font-size: .85rem; }
.dots { display: flex; gap: 10px; }
.dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--pink); animation: bounce 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,80%,100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.rank { font-size: clamp(1.4rem, 6vw, 2.2rem); font-weight: 800; }

/* ---------- Podium (TV + admin) ---------- */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 2vmin; width: min(900px, 100%); }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.step .medal { font-size: clamp(2rem, 7vmin, 4.5rem); opacity: .35; transition: opacity .4s, transform .4s; }
.step.filled .medal { opacity: 1; animation: pop-in .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop-in { from { transform: scale(0) rotate(-40deg); } }
.step .who { font-weight: 800; font-size: clamp(1rem, 4vmin, 2.4rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .time { color: var(--gold); font-variant-numeric: tabular-nums; font-size: clamp(.9rem, 2.6vmin, 1.5rem); min-height: 1.3em; }
.step .block { width: 100%; border-radius: 14px 14px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
  font-size: clamp(1.6rem, 6vmin, 4rem); font-weight: 800; color: rgba(255,255,255,.85);
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.05)); }
.step1 .block { height: 26vmin; background: linear-gradient(180deg, #ffd36e, #c9902a); }
.step2 .block { height: 19vmin; background: linear-gradient(180deg, #e8e8f0, #9a9ab0); }
.step3 .block { height: 14vmin; background: linear-gradient(180deg, #ffb37a, #b8673a); }
.podium.small .block { height: auto; padding: 6px 0; }
.podium.small .step1 .block { min-height: 70px; } .podium.small .step2 .block { min-height: 50px; } .podium.small .step3 .block { min-height: 36px; }
.others { list-style-position: inside; columns: 2; gap: 30px; text-align: left; opacity: .85; }
.others span { color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- TV ---------- */
.tv .timer.huge { font-size: clamp(2rem, 7vmin, 5rem); }
.tv-grid { display: flex; align-items: center; justify-content: center; gap: 6vmin; flex-wrap: wrap; }
.qr-card { background: #fff; padding: 22px; border-radius: 24px; box-shadow: 0 0 80px rgba(255,95,162,.6); }
.qr-card svg { display: block; width: min(40vmin, 360px) !important; height: auto !important; }
.qr-url { color: #14051f; font-weight: 800; margin-top: 10px; font-size: clamp(.9rem, 2.2vmin, 1.4rem); word-break: break-all; }
.joined-count { font-size: 1.6rem; font-weight: 800; color: var(--gold); margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 40rem; margin-top: 12px; }
.chip { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,156,207,.5);
  font-weight: 600; animation: pop-in .5s cubic-bezier(.2,1.6,.4,1) both; }
.tv .stage { width: min(55vmin, 620px); }
.tv .line.cur { font-size: clamp(1.6rem, 4.5vmin, 3.4rem); }
.tv .line.cur.special { font-size: clamp(2.4rem, 7vmin, 5rem); }

/* ---------- Admin ---------- */
.screen.scroll { justify-content: flex-start; overflow-y: auto; }
.admin .phase { font-size: 1.1rem; }
.controls { display: flex; flex-direction: column; gap: 12px; width: min(420px, 100%); }
.players { list-style: none; width: min(420px, 100%); display: flex; flex-direction: column; gap: 6px; }
.players li { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.08); }
.players .x { background: none; border: 0; color: var(--rose); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.btn.danger { border-color: rgba(255,95,162,.6); color: var(--rose); }
.admin a { color: var(--rose); }

/* ---------- Levels ---------- */
.level-tag { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; color: var(--rose); }
.gain { font-size: 1.6rem; font-weight: 800; color: var(--gold); min-height: 1.2em; }
#level { justify-content: flex-start; padding-top: max(16px, env(safe-area-inset-top)); }
.level-head { width: min(560px, 100%); display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-weight: 600; font-size: .9rem; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.08); }
.level-head .score { color: var(--gold); font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.game { width: min(560px, 100%); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.g-timer { font-weight: 800; font-size: 1.3rem; color: var(--gold); font-variant-numeric: tabular-nums; }

.quiz { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.q-count { opacity: .7; font-size: .9rem; }
.q-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.q-bar div { height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); transform-origin: left; }
.q-bar div.low { background: #ff4d6d; }
.q-text { font-size: clamp(1.25rem, 5.5vw, 1.8rem); line-height: 1.3; min-height: 3.2em; display: flex; align-items: center; justify-content: center; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-opt { font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--text); padding: 18px 10px; border-radius: 16px; cursor: pointer;
  border: 2px solid rgba(255,156,207,.4); background: rgba(255,255,255,.08); transition: transform .1s, background .2s; }
.q-opt:active { transform: scale(.96); }
.q-opt.right { background: #1fae6b; border-color: #5dffb0; animation: pop-in .4s; }
.q-opt.wrong { background: #c9304f; border-color: #ff8fa6; animation: shake .4s; }
.q-opt:disabled { cursor: default; }

.mouth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(90vw, 420px); padding: 18px; border-radius: 40px;
  background: radial-gradient(circle at 50% 40%, #a12a52, #5c0f2c); box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
.tooth { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; user-select: none; touch-action: manipulation; cursor: pointer; }
.tooth .t { font-size: clamp(2.6rem, 14vw, 4.2rem); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.tooth .bug { position: absolute; font-size: clamp(2rem, 10vw, 3rem); transform: scale(0); transition: transform .15s cubic-bezier(.2,1.6,.4,1); }
.tooth.up .bug { transform: scale(1); animation: wiggle .3s ease-in-out infinite alternate; }
@keyframes wiggle { from { rotate: -12deg; } to { rotate: 12deg; } }
.tooth.zap .t { animation: pop-in .3s; } .tooth.oops { animation: shake .3s; }

.road { width: min(90vw, 380px); flex: 1; max-height: 62vh; min-height: 300px; border-radius: 18px; touch-action: manipulation;
  box-shadow: 0 0 40px rgba(28,105,212,.5); }

.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(92vw, 440px); }
.card { aspect-ratio: 3/4; border: 0; border-radius: 14px; cursor: pointer; position: relative; background: none; perspective: 600px; font-size: clamp(1.8rem, 9vw, 2.8rem); }
.card span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; backface-visibility: hidden; transition: transform .35s; }
.card .front { background: linear-gradient(135deg, var(--pink), var(--violet)); }
.card .back { background: #fff4fa; transform: rotateY(180deg); }
.card.flip .front { transform: rotateY(180deg); } .card.flip .back { transform: rotateY(360deg); }
.card.matched .back { box-shadow: 0 0 0 3px var(--gold), 0 0 20px var(--gold); }

.breakdown { list-style: none; width: min(360px, 100%); display: flex; flex-direction: column; gap: 6px; }
.breakdown li { display: flex; justify-content: space-between; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.08); }
.breakdown b { color: var(--gold); }

.progress { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.pp { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .9rem; }
.pp.done { background: rgba(255,211,110,.25); }
.pp b { color: var(--gold); }

/* Winners reveal */
.podium.reveal { margin-top: 2vh; }
.step.hidden { visibility: hidden; }
.step.shown { animation: rise 1s cubic-bezier(.2,1.2,.4,1) both; }
.step.shown .medal { opacity: 1; }
@keyframes rise { from { transform: translateY(60vh); opacity: 0; } }
.drum { font-size: clamp(1.6rem, 5vmin, 3rem); font-weight: 800; color: var(--gold); min-height: 1.4em; }
.drum:not(:empty) { animation: throb 0.5s ease-in-out infinite alternate; }
@keyframes throb { to { transform: scale(1.08); } }
.script .emo { color: #fff; -webkit-text-fill-color: #fff; display: inline-block; }

/* ---------- Horse race (TV + admin) ---------- */
.race-screen { justify-content: flex-start; gap: 10px; padding: 16px 24px; }
.race-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.race-head .timer.huge { font-size: clamp(1.6rem, 5vmin, 3.4rem); }
.race-body { width: 100%; flex: 1; min-height: 0; display: flex; gap: 18px; }
.track {
  --start: 15%; --horse: calc(var(--lane-h, 60px) * 1.45);
  position: relative; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; padding-top: 36px;
  background: repeating-linear-gradient(90deg, #2f7d3a 0 40px, #2a7034 40px 80px);
  box-shadow: inset 0 0 0 4px #fff4fa, 0 0 40px rgba(0,0,0,.4);
}
.track::before { /* starting gate */
  content: "START"; position: absolute; top: 36px; bottom: 0; left: 0; width: var(--start);
  background: rgba(20,5,31,.35); border-right: 4px solid #fff;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  font-weight: 800; letter-spacing: .2em; font-size: .75rem; color: rgba(255,255,255,.6);
}
.marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed rgba(255,255,255,.45);
  left: calc(var(--start) + var(--x) * (100% - var(--start) - var(--horse)) + var(--horse)); }
.mark span { position: absolute; top: 4px; left: 0; transform: translateX(-50%); font-size: 1.4rem; }
.mark.finish { border: 0; width: 12px; margin-left: -6px; top: 36px;
  background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 12px 12px; }
.mark.finish span { top: -32px; left: 6px; }
.lanes { position: relative; height: 100%; display: flex; flex-direction: column; }
.lane { position: relative; flex: 0 0 var(--lane-h, 60px); border-bottom: 2px solid rgba(255,255,255,.35); }
.lane-no { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 3;
  min-width: 1.6em; height: 1.6em; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--lane-h, 60px) * .32); font-weight: 800; color: #14051f; background: hsl(var(--hue) 85% 65%); }
.runner {
  position: absolute; top: 0; height: 100%; width: var(--horse); z-index: 2;
  left: calc(var(--start) + var(--p, 0) * (100% - var(--start) - var(--horse)));
  transition: left 1.4s cubic-bezier(.3,.7,.3,1);
  display: flex; align-items: center; justify-content: center;
}
.runner .horse { display: block; width: 100%; filter: drop-shadow(0 4px 3px rgba(0,0,0,.45)); }

/* The galloping horse (horse.js) */
.horse-svg { width: 100%; height: auto; display: block; overflow: visible; --stride: .5s; }
.horse-svg .coat { fill: var(--coat, #a0522d); }
.horse-svg .far { filter: brightness(.7); }
.horse-svg .hoof { fill: #222; }
.horse-svg .mane, .horse-svg .tail { fill: #1d140e; }
.horse-svg .silk { fill: hsl(var(--hue, 330) 85% 58%); }
.horse-svg .cloth { fill: hsl(var(--hue, 330) 85% 70%); stroke: #fff; stroke-width: 1.5; }
.horse-svg .helmet { fill: hsl(calc(var(--hue, 330) + 40) 85% 62%); }
.horse-svg .leg { transform-box: fill-box; transform-origin: 50% 0; animation: stride var(--stride) ease-in-out infinite; }
.horse-svg .leg-bl { animation-delay: 0s; }
.horse-svg .leg-br { animation-delay: calc(var(--stride) * -.12); }
.horse-svg .leg-fl { animation-delay: calc(var(--stride) * -.5); }
.horse-svg .leg-fr { animation-delay: calc(var(--stride) * -.62); }
@keyframes stride { 0% { transform: rotate(38deg); } 50% { transform: rotate(-42deg); } 100% { transform: rotate(38deg); } }
.horse-svg .horse-body { transform-box: view-box; transform-origin: 50% 70%; animation: bound var(--stride) ease-in-out infinite; }
@keyframes bound { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-5px) rotate(-3deg); } 75% { transform: translateY(-2px) rotate(2deg); } }
.horse-svg .head { transform-box: fill-box; transform-origin: 10% 90%; animation: nod var(--stride) ease-in-out infinite; }
@keyframes nod { 0%,100% { transform: rotate(4deg); } 50% { transform: rotate(-8deg); } }
.horse-svg .tail { transform-box: fill-box; transform-origin: 100% 0; animation: swish calc(var(--stride) * 2) ease-in-out infinite; }
@keyframes swish { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
.horse-svg .jockey { transform-box: fill-box; transform-origin: 30% 100%; animation: nod var(--stride) ease-in-out infinite reverse; }
/* Finished horses trot proudly on the spot */
.lane.done .horse-svg { --stride: 1.1s; }
@media (prefers-reduced-motion: reduce) { .horse-svg * { animation: none !important; } }
.runner .tag {
  position: absolute; right: 96%; top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 2px 10px; border-radius: 999px; font-weight: 800; color: #14051f;
  font-size: clamp(.7rem, calc(var(--lane-h, 60px) * .3), 1.25rem);
  background: hsl(var(--hue) 85% 68%); box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.lane.leader .tag { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); }
.leader-box { width: clamp(220px, 24vw, 340px); display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: rgba(255,255,255,.07); border-radius: 18px; padding: 16px; }
.leader-box h3 { font-size: 1.3rem; }
.leaders { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.leaders li { display: flex; align-items: center; gap: 8px; font-size: clamp(.9rem, 1.8vw, 1.3rem); }
.leaders .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: hsl(var(--hue) 85% 65%); }
.leaders .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaders b { color: var(--gold); font-variant-numeric: tabular-nums; }
.leaders .empty { opacity: .6; font-size: .95rem; }
.track.small { width: min(560px, 100%); flex: none; height: 240px; --start: 20%; }

/* "Your horse" on the phone */
.my-horse { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.my-horse .horse { width: 150px; display: block; filter: drop-shadow(0 6px 4px rgba(0,0,0,.4)); }
.my-horse .tag { padding: 3px 14px; border-radius: 999px; font-weight: 800; color: #14051f; background: hsl(var(--hue, 330) 85% 68%); }

.mic { font: inherit; font-weight: 600; color: var(--text); cursor: pointer; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.mic.off { opacity: .45; text-decoration: line-through; }

/* Credit */
.credit { position: fixed; z-index: 6; left: 0; right: 0; bottom: max(6px, env(safe-area-inset-bottom)); text-align: center;
  font-size: .72rem; letter-spacing: .08em; opacity: .55; pointer-events: none; }
.tv .credit { font-size: .95rem; text-align: right; right: 18px; bottom: 10px; left: auto; }
.finale .finale-credit { font-family: "Dancing Script", cursive; font-size: clamp(1.2rem, 4vw, 2rem); color: var(--rose); opacity: .9; margin-top: 10px; }

/* ---------- 🎂 Cake & candles ---------- */
.cake-wrap { width: min(80vw, 900px); display: flex; justify-content: center; }
.cake-wrap.small { width: min(86vw, 380px); }
.cake { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.candles { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 0 2.2%; width: 72%; margin-bottom: -6px; position: relative; z-index: 2; }
.candle { position: relative; width: 3.2%; min-width: 7px; aspect-ratio: 1 / 5; margin-top: 7%; border-radius: 3px 3px 1px 1px;
  background: repeating-linear-gradient(135deg, hsl(var(--h) 80% 72%) 0 6px, #fff 6px 10px); box-shadow: inset -2px 0 0 rgba(0,0,0,.12); }
.flame { position: absolute; left: 50%; bottom: 100%; width: 170%; aspect-ratio: 1 / 1.8; transform: translateX(-50%); transform-origin: 50% 90%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 70%, #fff 0 18%, #ffe066 30%, #ff9b29 60%, rgba(255,80,0,0) 72%);
  filter: drop-shadow(0 0 8px #ffb02e) drop-shadow(0 0 18px rgba(255,160,40,.7));
  animation: flicker .18s ease-in-out infinite alternate; transition: opacity .25s, transform .25s; }
.candle:nth-child(3n) .flame { animation-duration: .23s; } .candle:nth-child(4n) .flame { animation-duration: .15s; }
@keyframes flicker { from { transform: translateX(-50%) scale(1, 1) rotate(-3deg); } to { transform: translateX(-50%) scale(.9, 1.12) rotate(3deg); } }
.candle.out .flame { opacity: 0; transform: translateX(-50%) scale(.2, .2); animation: none; }
.smoke { position: absolute; left: 50%; bottom: 100%; width: 140%; aspect-ratio: 1; border-radius: 50%; background: rgba(220,220,230,.55);
  transform: translateX(-50%); opacity: 0; pointer-events: none; }
.candle.out .smoke { animation: smoke 1.6s ease-out; }
@keyframes smoke { 0% { opacity: .8; transform: translate(-50%, 0) scale(.6); } 100% { opacity: 0; transform: translate(-20%, -260%) scale(2.4); } }
.tier { position: relative; border-radius: 14px 14px 8px 8px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); overflow: hidden; }
.tier.top { width: 76%; height: clamp(40px, 9vmin, 110px); background: linear-gradient(#ffd6e8, #ffb3d1); z-index: 1; }
.tier.bottom { width: 96%; height: clamp(60px, 14vmin, 170px); background: linear-gradient(#ffc2dc, #ff8fbf); display: flex; align-items: center; justify-content: center; }
.drip { position: absolute; top: 0; left: 0; right: 0; height: 30%;
  background: radial-gradient(circle at 10% 0, #fff 0 40%, transparent 41%) 0 0 / 12% 100%, linear-gradient(#fff, #fff) top / 100% 35% no-repeat; opacity: .95; }
.cake-name { position: relative; font-family: "Dancing Script", cursive; font-weight: 700; color: #b0135e; font-size: clamp(1.4rem, 6vmin, 4.2rem); margin-top: 8%; }
.plate { width: 108%; height: clamp(10px, 2vmin, 22px); border-radius: 50%; background: linear-gradient(#f4f4f8, #bdbdd0); margin-top: -4px; }
.candle-count { font-weight: 800; font-size: 1.2rem; color: var(--gold); min-height: 1.4em; }
.candle-count.big { font-size: clamp(1.4rem, 3.5vmin, 2.6rem); }
.breath { width: min(320px, 80vw); height: 14px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.breath div { height: 100%; background: linear-gradient(90deg, #9be7ff, #fff); transform: scaleX(0); transform-origin: left; transition: transform .08s; }

/* ---------- 🍌 Bananas ---------- */
.banana-btn { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); right: 12px; font: inherit; font-size: 1.6rem; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; border: 3px solid #fff3a0; background: #ffd400; color: #3a2a00; box-shadow: 0 6px 24px rgba(255,212,0,.55);
  animation: wobble 1.2s ease-in-out infinite; }
.banana-btn b { font-size: 1.1rem; }
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(10,0,20,.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden], .splat[hidden], .banner[hidden] { display: none; }
.sheet-card { width: min(520px, 100%); max-height: 80vh; overflow-y: auto; background: #2a0d3a; border-radius: 22px 22px 0 0; padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; text-align: center; animation: slideUp .25s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } }
.targets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.target { font: inherit; color: var(--text); padding: 14px 8px; border-radius: 14px; cursor: pointer; border: 2px solid rgba(255,212,0,.6);
  background: rgba(255,212,0,.12); display: flex; flex-direction: column; gap: 2px; }
.target span { font-weight: 800; } .target small { opacity: .7; }
.target:disabled { opacity: .4; cursor: default; }
.splat { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(circle, rgba(255,230,80,.85), rgba(255,190,0,.75)); color: #3a2a00; text-align: center; padding: 16px; }
.splat h2 { font-size: clamp(3rem, 16vw, 6rem); font-weight: 800; }
.splat p { font-size: 1.3rem; font-weight: 600; }
.splat-banana { font-size: 8rem; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
body.slipping .screen.active { animation: slip .35s ease-in-out infinite alternate; filter: blur(2px); }
@keyframes slip { from { transform: rotate(-6deg) translateX(-10px); } to { transform: rotate(6deg) translateX(10px); } }

/* Banana hit on the TV: the horse spins out */
.lane.slipped .runner .horse { animation: spinout .7s linear infinite; }
@keyframes spinout { to { transform: rotate(-360deg); } }
.lane.slipped .runner::after { content: "🍌"; position: absolute; top: -10%; left: 30%; font-size: calc(var(--lane-h, 60px) * .5); }

/* ---------- 👑 The birthday girl's golden horse ---------- */
.horse-svg .crown { display: none; }
.bday .horse-svg .crown { display: inline; }
.lane.bday { background: linear-gradient(90deg, rgba(255,215,90,.15), rgba(255,215,90,.45)); box-shadow: inset 0 0 0 2px rgba(255,220,120,.9); }
.lane.bday .tag { background: linear-gradient(90deg, #ffe58a, #f3c43f); box-shadow: 0 0 0 2px #fff, 0 0 18px #ffd34d; }
.lane.bday .horse { filter: drop-shadow(0 0 10px #ffd34d) drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.lane.bday .runner::before { /* sparkle trail */
  content: "✨ ✨ ✨"; position: absolute; right: 85%; top: 55%; font-size: calc(var(--lane-h, 60px) * .3); white-space: nowrap;
  opacity: .9; animation: trail 0.8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes trail { from { transform: translateY(-50%) translateX(0); opacity: .5; } to { transform: translateY(-60%) translateX(-8px); opacity: 1; } }
.my-horse.bday .horse { filter: drop-shadow(0 0 14px #ffd34d); }
.my-horse.bday .tag { background: linear-gradient(90deg, #ffe58a, #f3c43f); }

/* ---------- TV pop-up banner ---------- */
.banner { position: fixed; z-index: 25; left: 50%; top: 14%; transform: translateX(-50%); max-width: 90vw; text-align: center;
  padding: 18px 36px; border-radius: 999px; font-size: clamp(1.4rem, 3.8vmin, 3rem); font-weight: 600;
  background: linear-gradient(135deg, #ffe066, #ffb347); color: #3a1a00; box-shadow: 0 10px 50px rgba(255,190,60,.6); }
.banner.pop { animation: bannerPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bannerPop { from { transform: translateX(-50%) scale(.3); opacity: 0; } }

/* ---------- 📜 Certificate preview ---------- */
.cert-btn { margin-top: 10px; }
.cert-modal { position: fixed; inset: 0; z-index: 50; background: rgba(10,0,20,.85); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.cert-modal img { max-width: 100%; max-height: 72vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.cert-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
a.btn { text-decoration: none; }
.lane.at-start .runner .tag { right: auto; left: 92%; }
.lane.at-start.bday .runner::before { display: none; }

/* ---------- 📸 Memory lane ---------- */
.photo-wrap img { transition: filter .45s, transform .45s, opacity .45s; }
.photo-wrap img.swap { filter: brightness(2.5) blur(12px); opacity: .3; transform: scale(1.3) rotate(8deg); }
.card .back img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.card .back:has(img) { padding: 0; overflow: hidden; }
.polaroids { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.polaroid { position: absolute; width: clamp(110px, 13vw, 210px); aspect-ratio: 1; object-fit: cover; padding: 10px 10px 34px; background: #fff;
  border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity: .85;
  left: calc(var(--i) / var(--n) * 92% - 4%); top: 110%;
  animation: drift 26s linear infinite; animation-delay: calc(var(--i) * -5.2s); }
.polaroid:nth-child(odd) { --tilt: -9deg; } .polaroid:nth-child(even) { --tilt: 8deg; }
@keyframes drift { from { transform: translateY(0) rotate(var(--tilt, 0deg)); } to { transform: translateY(-150vh) rotate(calc(var(--tilt, 0deg) * -1)); } }

/* ---------- 🖼️ Puzzle goal picture ---------- */
.puzzle-bar { display: flex; align-items: center; justify-content: center; gap: 22px; }
.goal { position: relative; width: 74px; height: 74px; padding: 0; border: 3px solid var(--gold); border-radius: 14px; overflow: hidden;
  cursor: pointer; background: #000; box-shadow: 0 0 20px rgba(255,211,110,.5); }
.goal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.goal span { position: absolute; left: 0; right: 0; bottom: 0; font: 600 .7rem Poppins, sans-serif; color: #fff; background: rgba(20,5,31,.75); padding: 2px 0; }
.count-pic { width: min(52vmin, 320px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 4px solid var(--gold);
  box-shadow: 0 0 40px rgba(255,211,110,.6); margin-top: 12px; }
.count-pic[hidden] { display: none; }
.goal-modal { cursor: pointer; } .goal-modal img { max-height: 70vh; border: 4px solid var(--gold); }
.goal-card { text-align: center; }
.goal-card[hidden] { display: none; }
.goal-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 3px solid var(--gold); box-shadow: 0 0 24px rgba(255,211,110,.45); }
.goal-card p { margin-top: 6px; font-weight: 600; font-size: .9rem; color: var(--gold); }

/* Flames lean over and shake while people are blowing */
.blowing .flame { animation: gust .12s ease-in-out infinite alternate; }
@keyframes gust { from { transform: translateX(-50%) scale(.85, .8) rotate(-34deg); } to { transform: translateX(-50%) scale(.7, .7) rotate(-50deg); } }
.blowing .candle.out .flame { animation: none; }

/* Keep the goal picture inside the sidebar, however big the screen is */
.leader-box { flex: none; min-width: 0; overflow: hidden; }
.goal-card { min-width: 0; }
.goal-card img { display: block; width: min(100%, 26vh); max-width: 100%; height: auto; margin: 0 auto; }