/* Bright party colors on a deep purple night, a rounded font, and pictures from art.js.
   Motion uses transforms and opacity only (cheap on old phones and TV browsers), plays when a step changes, and
   stops completely for anyone who asks their device for less motion (bottom of this file). */
@font-face {
  font-family: Fredoka;
  src: url(/fonts/fredoka.woff2) format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --bg: #1d1146;
  --bg2: #3b1a78;
  --panel: #2a1b5e;
  --panel2: #34237a;
  --line: #4d3a99;
  --ink: #1d1433;
  --text: #fff8ec;
  --soft: #cfc4f2;
  --accent: #ffd23f;
  --pink: #ff5d8f;
  --teal: #2ec4b6;
  --violet: #7b6cff;
  --good: #4fd66b;
  --radius: 18px;
  --spring: cubic-bezier(.2, 1.6, .5, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); }
body {
  font: 500 18px/1.4 Fredoka, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 8%, #ff5d8f33 0, transparent 32%),
    radial-gradient(circle at 92% 18%, #2ec4b633 0, transparent 30%),
    radial-gradient(circle at 70% 100%, #ffd23f22 0, transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff' opacity='.05'%3E%3Cpath d='M20 18h26a8 8 0 0 1 8 8v10a8 8 0 0 1-8 8H32l-8 7v-7h-4a8 8 0 0 1-8-8V26a8 8 0 0 1 8-8z'/%3E%3Ccircle cx='92' cy='84' r='5'/%3E%3Cpath d='M86 30l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
}
h1, h2, .title, .prompt { font-weight: 700; letter-spacing: -.01em; }
a { color: var(--accent); }
button, input, textarea { font: inherit; color: inherit; }
button {
  position: relative;
  min-height: 54px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 12px 18px;
  background: var(--accent);
  background-image: linear-gradient(180deg, #ffffff40, transparent 55%);
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .09s, box-shadow .09s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
button:hover:not(:disabled) { filter: brightness(1.05); }
button:active:not(:disabled) { transform: translateY(4px) scale(.98); box-shadow: 0 1px 0 var(--ink); }
button.pink { background-color: var(--pink); color: #fff; text-shadow: 0 2px 0 #0003; }
button.teal { background-color: var(--teal); color: var(--ink); }
button.quiet { background: transparent; color: var(--text); border: 2px solid var(--line); box-shadow: none; font-weight: 600; }
button.quiet:active:not(:disabled) { transform: scale(.97); }
button.small { min-height: 40px; padding: 6px 12px; font-size: 16px; }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input, textarea {
  width: 100%;
  min-height: 54px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 20px;
  box-shadow: inset 0 3px 0 #1d143314;
}
input::placeholder, textarea::placeholder { color: #8a80ad; }
textarea { resize: none; min-height: 110px; }
.muted { color: var(--soft); }
.center { text-align: center; }
.hidden { display: none !important; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.card { background: linear-gradient(165deg, var(--panel2), var(--panel)); border: 3px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 8px 0 #0000003a, inset 0 2px 0 #ffffff14; }
.tag { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 3px 12px; border-radius: 999px; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.tag.pink { background: var(--pink); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- timers: a fuse (phone, and between steps on the screen) and a ring (screen) ---------- */
.timer, .fuse { position: relative; height: 12px; background: #ffffff1f; border-radius: 12px; }
.timer > i, .fuse > i { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(90deg, var(--pink), var(--accent)); transform-origin: left; transform: scaleX(var(--left, 1)); transition: transform .25s linear; }
.fuse .spark { position: absolute; top: 50%; left: calc(var(--left, 1) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--accent) 45%, #ff5d8f00 70%); transition: left .25s linear; animation: spark .5s ease-in-out infinite alternate; }
.ptimer { display: flex; align-items: center; gap: 10px; }
.ptimer .fuse { flex: 1; }
.ptimer #secs { min-width: 2.2em; text-align: center; font-size: 18px; color: var(--accent); background: var(--panel); border: 2px solid var(--line); border-radius: 999px; padding: 0 6px; }
.ptimer.urgent .fuse > i { background: linear-gradient(90deg, #ff3b6b, var(--pink)); }
.ptimer.urgent #secs { color: #fff; background: var(--pink); border-color: var(--ink); animation: throb 1s ease-in-out infinite; }
.ring { position: relative; display: inline-grid; place-items: center; width: clamp(64px, 7vw, 110px); height: clamp(64px, 7vw, 110px); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring .ring-track { stroke: #ffffff22; fill: #1d143399; }
.ring .ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--left, 1) * 100); transition: stroke-dashoffset .25s linear, stroke .3s; }
.ring b { position: relative; font-size: clamp(24px, 2.6vw, 42px); color: #fff; }
.ring.urgent .ring-fill { stroke: var(--pink); }
.ring.urgent { animation: throb 1s ease-in-out infinite; }

/* ---------- logo, avatars, art ---------- */
.logo { display: inline-flex; align-items: center; gap: .35em; }
.logo-word { font-weight: 700; color: #fff; text-shadow: 0 3px 0 var(--pink); letter-spacing: .01em; }
.avatar { display: block; flex: none; overflow: visible; }
.avatar .eyes { transform-box: view-box; transform-origin: 50px 50px; animation: blink 5s infinite; }
.round-art { display: block; width: min(420px, 70vw); height: auto; margin: 0 auto; overflow: visible; }
.hero-art { display: block; width: 100%; height: auto; overflow: visible; }
.star-icon { display: inline-block; vertical-align: -4px; }
.burst { display: block; width: 100%; height: 100%; }
.spin { animation: spin 40s linear infinite; }
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.twinkle:nth-of-type(2n) { animation-delay: -1.2s; }
.twinkle:nth-of-type(3n) { animation-delay: -.6s; animation-duration: 3.4s; }
.pop { animation: pop .5s var(--spring) both; }
.bob { display: block; animation: bob 3.2s ease-in-out infinite; }
/* Only a from-state, so the end state is whatever the element already says (a faded disabled button stays faded). */
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes slide { from { transform: translateY(18px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 93%, 100% { transform: none; } 95.5% { transform: scaleY(.1); } }
@keyframes twinkle { 50% { transform: scale(.55) rotate(20deg); opacity: .55; } }
@keyframes throb { 50% { transform: scale(1.08); } }
@keyframes spark { to { transform: scale(1.35); } }
@keyframes stampIn { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } to { transform: rotate(-8deg); opacity: 1; } }
@keyframes rise { from { transform: translateY(110%); } }

/* A person: face over a name (lobby, writing). */
.person { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.person .nm { font-weight: 700; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.away { opacity: .4; }
.person .badge { position: relative; }
.person .typing, .person .said { position: absolute; right: -16px; top: -10px; display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 16px 16px 16px 4px; padding: 6px 9px; box-shadow: 0 3px 0 var(--ink); }
.person .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: dot 1.2s ease-in-out infinite; }
.person .typing i:nth-child(2) { animation-delay: .15s; } .person .typing i:nth-child(3) { animation-delay: .3s; }
.person .said { background: var(--good); padding: 4px 6px; }
.person .said svg { width: 22px; height: 22px; display: block; }
.person.just .said { animation: pop .55s var(--spring) both; }
.person.just .badge::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 5px solid var(--good); animation: ringOut .7s ease-out both; pointer-events: none; }
.person.done .avatar { filter: drop-shadow(0 0 10px #4fd66b88); }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes ringOut { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ---------- phone ---------- */
.phone { max-width: 520px; margin: 0 auto; padding: 16px 16px 40px; }
.phone h1 { font-size: 30px; margin: 0; line-height: 1.15; }
.phone main > * { animation: slide .35s var(--out) both; }
.phone main.still > *, .phone main.still .choice .medal { animation: none; }
.phone main.still .choice .medal.new { animation: stampIn .35s var(--spring) both; }
.phone main > :nth-child(2) { animation-delay: .05s; } .phone main > :nth-child(3) { animation-delay: .1s; } .phone main > :nth-child(n+4) { animation-delay: .15s; }
.phone .prompt { position: relative; font-size: 25px; line-height: 1.25; background: linear-gradient(160deg, #fffaf0, #fff1d6); color: var(--ink); border: 3px solid var(--ink); border-radius: 22px; padding: 18px 18px 20px; margin: 12px 0 0; box-shadow: 0 7px 0 var(--ink); }
.phone .prompt::before { content: ''; position: absolute; left: 18px; top: -3px; width: 56px; height: 7px; border-radius: 0 0 6px 6px; background: var(--pink); }
.phone .context { font-size: 16px; color: var(--soft); }
.phone .choice { width: 100%; text-align: left; min-height: 84px; font-size: 21px; background: #fff; color: var(--ink); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; box-shadow: 0 6px 0 var(--ink); }
.phone .choice + .choice, .phone .choice + .quiet + .choice { margin-top: 16px; }
.phone .choice .ctext { flex: 1; }
.phone .choice .letter { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--pink); border: 3px solid var(--ink); font-size: 19px; box-shadow: 0 3px 0 var(--ink); }
.phone .choice.c0 { background: linear-gradient(160deg, #fff, #ffe1ea); }
.phone .choice.c1 { background: linear-gradient(160deg, #fff, #d9f7f3); }
.phone .choice.c1 .letter { background: var(--teal); color: var(--ink); }
.phone .choice.picked { background: #fff0b3; box-shadow: 0 0 0 4px var(--accent), 0 6px 0 var(--ink); }
.phone .choice .stamp { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--good); border: 3px solid var(--ink); font-size: 22px; animation: stampIn .35s var(--spring) both; }
.phone .choice .medal { margin-left: auto; flex: none; animation: stampIn .35s var(--spring) both; }
.phone .choice.mine { opacity: .55; }
.phone .count { font-size: 14px; text-align: right; }
.phone .me { font-size: 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.phone .me .who-am-i { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.phone .me .pts { background: var(--accent); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 2px 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.phone .me .logo { font-size: 20px; }
.phone details summary { cursor: pointer; color: var(--soft); min-height: 40px; }
.phone .err { color: #ffb4a6; min-height: 1.4em; }
.phone .who { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.phone .who > span { display: flex; align-items: center; gap: 8px; }
.phone .hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.phone .hello-face { position: relative; display: grid; place-items: center; width: 170px; height: 170px; margin: 0 auto; }
.phone .hello-face.small { width: 80px; height: 80px; margin: 0; }
.phone .hello-face .burst { position: absolute; inset: 0; }
.phone .hello-face .avatar { position: relative; }
.phone .faces-row { justify-content: center; }
.phone .faces-row > span { animation: pop .45s var(--spring) both; animation-delay: calc(var(--i) * .05s); }
.phone .small-note { font-size: 15px; }
.phone .round-art { width: min(300px, 80vw); }
.phone .banner { display: flex; align-items: center; gap: 12px; }
.phone .mini-board > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 14px; background: #ffffff0d; font-size: 19px; }
.phone .mini-board .sc { margin-left: auto; font-weight: 700; color: var(--accent); }
.phone .mini-board .me-row { background: #ffd23f26; box-shadow: inset 0 0 0 2px var(--accent); }
.phone .result { position: relative; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 14px 16px 16px; margin-bottom: 18px; font-size: 20px; font-weight: 600; animation: pop .45s var(--spring) both; animation-delay: calc(var(--i, 0) * .12s); }
.phone .result.c0 { background: linear-gradient(160deg, #fff, #ffe1ea); }
.phone .result.c1 { background: linear-gradient(160deg, #fff, #d9f7f3); }
.phone .result .by { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 16px; color: #4a3f73; }
.phone .result .vc { font-size: 14px; color: #6b5fa0; }
.phone .result .by .pts { margin-left: auto; font-weight: 800; color: var(--ink); background: var(--accent); border-radius: 999px; padding: 0 10px; border: 2px solid var(--ink); }
.phone .result.win { box-shadow: 0 0 0 4px var(--accent), 0 6px 0 var(--ink); }
.phone .result.mine { border-style: dashed; }
.phone .result .crown { position: absolute; right: 14px; top: -18px; animation: stampIn .4s var(--spring) .3s both; }
.phone .moment-card, .phone .rank-card { position: relative; text-align: center; background: linear-gradient(165deg, var(--panel2), var(--panel)); border: 3px solid var(--line); border-radius: 26px; padding: 6px 16px 18px; box-shadow: 0 8px 0 #0000003a; overflow: hidden; }
.phone .moment-card.win, .phone .rank-card.p1 { border-color: var(--accent); background: linear-gradient(165deg, #5b2fb0, #2a1b5e); }
.phone .moment-card h1, .phone .rank-card h1 { margin-top: -6px; }
.phone .moment-card .hello-face.small { margin: 8px auto; }
.phone .big-pts { margin: 4px 0 0; font-size: 40px; font-weight: 700; color: var(--accent); text-shadow: 0 3px 0 var(--ink); animation: pop .5s var(--spring) .35s both; }
.phone .big-pts small { font-size: 20px; color: var(--soft); text-shadow: none; }
.phone .rank-card .ribbon { display: inline-block; margin: -10px 0 8px; position: relative; font-weight: 700; font-size: 22px; color: var(--ink); background: #d6dce8; border: 3px solid var(--ink); padding: 2px 22px; border-radius: 8px; box-shadow: 0 4px 0 var(--ink); animation: stampIn .4s var(--spring) .3s both; }
.phone .rank-card.p1 .ribbon { background: var(--accent); }
.phone .rank-card.p3 .ribbon { background: #e0995e; }
.phone .rank-trophy { position: absolute; right: -6px; bottom: 4px; animation: pop .5s var(--spring) .5s both; }
.flash { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
.flash-card { display: inline-flex; align-items: center; gap: 10px; background: var(--good); color: var(--ink); font-weight: 700; font-size: 26px; padding: 14px 24px; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink); animation: flash 1.25s var(--out) both; }
.flash-card svg { width: 30px; height: 30px; }
@keyframes flash { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 18% { transform: scale(1.08) rotate(-3deg); opacity: 1; } 30%, 75% { transform: rotate(-3deg); opacity: 1; } 100% { transform: translateY(-40px) rotate(-3deg); opacity: 0; } }

/* ---------- shared screen ---------- */
.screen { padding: 3vh 4vw; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate; }
/* The living background: soft color blobs that drift, and a few shapes floating up. Gradients, not blur filters,
   so it stays smooth on a TV's browser. */
.screen .bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.screen .blob { position: absolute; border-radius: 50%; will-change: transform; animation: drift 26s ease-in-out infinite alternate; }
.screen .b1 { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(circle, #ff5d8f55 0, #ff5d8f00 65%); }
.screen .b2 { width: 55vw; height: 55vw; right: -16vw; bottom: -24vw; background: radial-gradient(circle, #2ec4b64d 0, #2ec4b600 65%); animation-duration: 31s; animation-delay: -9s; }
.screen .b3 { width: 46vw; height: 46vw; left: 38vw; top: 30vh; background: radial-gradient(circle, #7b6cff44 0, #7b6cff00 65%); animation-duration: 37s; animation-delay: -17s; }
.screen .floaty { position: absolute; opacity: .16; will-change: transform; animation: floaty var(--d, 20s) ease-in-out infinite alternate; animation-delay: var(--o, 0s); }
.screen .floaty svg { display: block; width: 100%; height: 100%; }
@keyframes drift { 50% { transform: translate(8vw, 6vh) scale(1.12); } to { transform: translate(-4vw, 10vh) scale(.94); } }
@keyframes floaty { from { transform: translateY(0) rotate(0); } to { transform: translateY(-9vh) rotate(40deg); } }
.screen header { display: flex; justify-content: space-between; align-items: center; color: var(--soft); font-size: clamp(16px, 1.6vw, 26px); min-height: clamp(64px, 7vw, 110px); }
.screen header .logo { font-size: clamp(22px, 2.2vw, 36px); }
.screen header #where { display: flex; align-items: center; gap: .8em; }
.screen main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.5vh; padding: 2vh 0; }
.screen main > * { animation: slide .45s var(--out) both; }
.screen main > :nth-child(2) { animation-delay: .06s; } .screen main > :nth-child(3) { animation-delay: .12s; } .screen main > :nth-child(n+4) { animation-delay: .18s; }
.screen .big-code { display: inline-flex; gap: .06em; font-size: clamp(64px, 11vw, 180px); font-weight: 700; letter-spacing: .08em; color: var(--ink); line-height: 1; background: linear-gradient(180deg, #ffe680, var(--accent)); border: 5px solid var(--ink); border-radius: 28px; padding: .08em .3em .12em; box-shadow: 0 10px 0 var(--ink), 0 0 60px #ffd23f40; }
.screen .big-code span { display: inline-block; animation: pop .5s var(--spring) both, bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .08s), calc(var(--i) * -.4s); }
.screen .prompt { font-size: clamp(30px, 4.2vw, 64px); line-height: 1.2; margin: 0; text-shadow: 0 4px 0 #0000004d; }
.screen .context { font-size: clamp(18px, 1.8vw, 28px); color: var(--soft); margin: 0; }
.screen .title { font-size: clamp(44px, 6.5vw, 104px); line-height: 1.05; margin: 0; text-shadow: 0 5px 0 var(--pink), 0 10px 30px #0006; }
.screen .lead { font-size: clamp(20px, 2.2vw, 34px); color: var(--soft); margin: 0; }
.screen .waiting .dots { display: inline-flex; gap: 6px; margin-left: 8px; }
.screen .waiting .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--soft); animation: dot 1.2s ease-in-out infinite; }
.screen .waiting .dots i:nth-child(2) { animation-delay: .15s; } .screen .waiting .dots i:nth-child(3) { animation-delay: .3s; }
.screen .tag { font-size: clamp(14px, 1.2vw, 20px); }

/* Round title card: a big card zooms in with the round's picture and rays turning behind. */
.screen .round-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4vw; margin: 0 auto; width: min(1300px, 100%); padding: 5vh 4vw; border-radius: 40px; border: 6px solid var(--ink); background: linear-gradient(150deg, #5b2fb0, #2a1360); box-shadow: 0 16px 0 var(--ink), 0 30px 80px #0008; overflow: hidden; animation: cardIn .8s var(--spring) both !important; }
.screen .round-card.r2 { background: linear-gradient(150deg, #3a2fb0, #1f1560); }
.screen .round-card.r3 { background: linear-gradient(150deg, #a02a6a, #3b1a78); }
.screen .round-card .rc-burst { position: absolute; width: 120vmax; height: 120vmax; left: calc(20% - 60vmax); top: calc(50% - 60vmax); opacity: .12; z-index: 0; }
.screen .round-card .rc-burst .burst { animation: spin 50s linear infinite; }
.screen .round-card .rc-art, .screen .round-card .rc-text { position: relative; }
.screen .round-card .round-art { width: clamp(260px, 34vw, 560px); animation: artIn .9s var(--spring) .25s both; }
.screen .round-card .rc-text > * { animation: slide .5s var(--out) both; }
.screen .round-card .rc-text > :nth-child(1) { animation-delay: .35s; } .screen .round-card .rc-text > :nth-child(2) { animation-delay: .5s; }
.screen .round-card .rc-text > :nth-child(3) { animation-delay: .7s; } .screen .round-card .rc-text > :nth-child(4) { animation-delay: .9s; }
.screen .round-card .rc-text > * + * { margin-top: 2vh; }
.screen .rc-num { margin: 0; font-weight: 700; font-size: clamp(22px, 2.4vw, 40px); color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }
.screen .rc-num span { color: var(--soft); }
.screen .round-card .title { font-size: clamp(56px, 8vw, 140px); }
@keyframes cardIn { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes artIn { from { transform: translateY(30px) scale(.6) rotate(10deg); opacity: 0; } to { transform: none; opacity: 1; } }
.round-art .art-l { animation: nudgeL 2.4s ease-in-out infinite; }
.round-art .art-r { animation: nudgeR 2.4s ease-in-out infinite; }
.round-art .art-bolt, .round-art .art-x2, .round-art .art-s1 { transform-box: fill-box; transform-origin: center; animation: throb 1.2s ease-in-out infinite; }
.round-art .art-s2, .round-art .art-s3 { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
.round-art .art-swing { transform-box: fill-box; transform-origin: center; animation: swing 2.6s ease-in-out infinite; }
@keyframes nudgeL { 50% { transform: translate(6px, -4px); } }
@keyframes nudgeR { 50% { transform: translate(-6px, 4px); } }
@keyframes swing { 50% { transform: rotate(-10deg); } }

/* Answer cards (duels and the final). */
.acard { position: relative; display: block; background: #fff; color: var(--ink); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink), 0 20px 40px #0006; }
.acard .text { display: block; }
.acard.c0 { background: linear-gradient(160deg, #fff, #ffd3e1); }
.acard.c1 { background: linear-gradient(160deg, #fff, #c9f3ee); }
.acard .letter { position: absolute; top: -26px; left: 26px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 26px; font-weight: 700; color: #fff; background: var(--violet); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.acard.c0 .letter { background: var(--pink); }
.acard.c1 .letter { background: var(--teal); color: var(--ink); left: auto; right: 26px; }
.acard.hid { background: #ffffff22; color: var(--soft); border-style: dashed; box-shadow: none; }
.screen .duel-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.5vw; margin-top: 2vh; }
.screen .duel-stage .acard { padding: 5vh 2.4vw 4.5vh; font-size: clamp(26px, 3.3vw, 54px); font-weight: 700; line-height: 1.2; min-height: 26vh; display: flex; flex-direction: column; justify-content: center; animation: cardL .7s var(--spring) both; }
.screen .duel-stage .acard.right { animation-name: cardR; animation-delay: .2s; }
@keyframes cardL { from { transform: translateX(-30vw) rotate(-12deg); opacity: 0; } to { transform: rotate(-1.5deg); opacity: 1; } }
@keyframes cardR { from { transform: translateX(30vw) rotate(12deg); opacity: 0; } to { transform: rotate(1.5deg); opacity: 1; } }
.screen .duel-stage .acard.left { transform: rotate(-1.5deg); } .screen .duel-stage .acard.right { transform: rotate(1.5deg); }
.screen .vs { width: clamp(70px, 8vw, 130px); height: clamp(70px, 8vw, 130px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a6, var(--accent) 60%); color: var(--ink); border: 5px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: clamp(26px, 3vw, 50px); box-shadow: 0 7px 0 var(--ink); animation: vsIn .6s var(--spring) .35s both; }
.screen .vs span { display: block; animation: throb 1.4s ease-in-out infinite; }
@keyframes vsIn { from { transform: scale(0) rotate(-180deg); } to { transform: rotate(-8deg); } }
.screen .duel-stage.revealed .vs { animation: none; transform: rotate(-8deg) scale(.8); opacity: .7; }
.screen .duel-stage.revealed .acard { animation: none; }
/* Reveal: votes fly in, bars fill, the author slides in, the winner lifts and the other one settles back. */
.screen .acard .vbar { position: relative; display: block; height: clamp(26px, 3.2vh, 40px); margin-top: 2.4vh; border-radius: 99px; background: #1d143318; border: 3px solid var(--ink); overflow: hidden; }
.screen .acard .vbar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--w)); background: linear-gradient(90deg, var(--violet), var(--pink)); animation: barIn 1.1s var(--out) .5s both; }
.screen .acard.c1 .vbar i { background: linear-gradient(90deg, var(--teal), #3fa7ff); }
.screen .acard .vbar b { position: relative; display: block; padding: 0 12px; font-size: clamp(14px, 1.4vw, 22px); line-height: clamp(20px, 2.6vh, 34px); color: var(--ink); }
@keyframes barIn { from { transform: scaleX(0); } }
.screen .acard .voters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1.6vh; min-height: 52px; }
.screen .acard .token { position: relative; display: block; animation: tokenL .7s var(--spring) both; animation-delay: calc(.35s + var(--k) * .12s); }
.screen .acard.right .token, .screen .answers.many .token { animation-name: tokenR; }
.screen .acard .token .medal { position: absolute; right: -6px; bottom: -4px; }
@keyframes tokenL { from { transform: translate(40vw, 30vh) scale(.3); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
@keyframes tokenR { from { transform: translate(-40vw, 30vh) scale(.3); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
.screen .acard .by { display: flex; align-items: center; gap: 12px; margin-top: 1.8vh; font-size: clamp(18px, 1.8vw, 30px); color: #4a3f73; font-weight: 600; flex-wrap: wrap; animation: slide .5s var(--out) 1.3s both; }
.screen .acard .by .who { font-weight: 700; color: var(--ink); }
.screen .acard .pts { color: var(--ink); background: var(--accent); border: 3px solid var(--ink); border-radius: 999px; padding: 0 14px; box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
.screen .acard.win { z-index: 1; animation: winLift .6s var(--spring) 1.7s both !important; box-shadow: 0 0 0 7px var(--accent), 0 10px 0 var(--ink), 0 0 70px #ffd23f88; }
.screen .acard.lose { animation: loseDim .6s ease-out 1.7s both !important; }
.screen .acard .crown { position: absolute; top: -48px; left: 50%; margin-left: -38px; animation: crownIn .6s var(--spring) 1.9s both; }
@keyframes winLift { to { transform: rotate(-1deg) scale(1.05); } }
@keyframes loseDim { to { transform: scale(.94); opacity: .7; } }
@keyframes crownIn { from { transform: translateY(-40px) scale(0) rotate(-90deg); } to { transform: none; } }
.screen .moment { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.screen .acard .sweep-stamp { position: absolute; z-index: 2; bottom: -7vh; right: -3vw; width: clamp(130px, 13vw, 210px); height: clamp(130px, 13vw, 210px); }
.screen .acard.left .sweep-stamp { right: -4vw; }
.screen .acard.right .sweep-stamp { right: auto; left: -4vw; }
.screen .sweep-stamp .burst { position: absolute; inset: -35%; width: 170%; height: 170%; animation: fadeIn .4s ease-out 2.1s both, spin 30s linear infinite; }
.screen .sweep-badge { position: relative; display: block; width: 100%; height: 100%; animation: sweepIn .8s var(--spring) 2.1s both; transform: rotate(-10deg); }
@keyframes sweepIn { from { transform: scale(0) rotate(-200deg); opacity: 0; } to { transform: rotate(-10deg); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } }
.screen .duel-stage.twins .acard.left { animation: twinL .8s var(--spring) .2s both !important; }
.screen .duel-stage.twins .acard.right { animation: twinR .8s var(--spring) .2s both !important; }
@keyframes twinL { to { transform: translateX(1.5vw) rotate(-3deg); } }
@keyframes twinR { to { transform: translateX(-1.5vw) rotate(3deg); } }
.screen .duel-stage.twins .vs { visibility: hidden; }
.screen .twins-moment { width: clamp(220px, 24vw, 360px); margin-left: calc(clamp(220px, 24vw, 360px) / -2); transform: translateY(-50%); background: linear-gradient(160deg, #4a2596, #2a1360); border: 5px solid var(--accent); border-radius: 32px; padding: 2vh 1vw 2.4vh; box-shadow: 0 10px 0 var(--ink), 0 0 60px #ffd23f55; animation: twinsIn .6s var(--spring) .9s both; }
.screen .twins-moment .title { font-size: clamp(36px, 4.4vw, 72px); }
@keyframes twinsIn { from { transform: translateY(-50%) scale(0) rotate(-20deg); } to { transform: translateY(-50%); } }
.screen .twins-art { width: 90%; }
.screen .twins-art .twin-l { animation: nudgeL 1.2s ease-in-out infinite; } .screen .twins-art .twin-r { animation: nudgeR 1.2s ease-in-out infinite; }
.screen .duel-stage.revealed + .note { animation-delay: 1.5s !important; }
/* The reveal adds bars, faces and names under each answer: make room for them on a 720p screen. */
.screen main[data-phase="reveal"] .prompt { font-size: clamp(24px, 3vw, 46px); }
.screen main[data-phase="reveal"] .duel-stage .acard { min-height: 0; padding: 3.6vh 2vw 2.6vh; font-size: clamp(22px, 2.7vw, 44px); }
.screen main[data-phase="reveal"] .acard .token .avatar { width: clamp(36px, 3.4vw, 56px); height: auto; }
.screen main[data-phase="reveal"] .acard .voters { min-height: 0; margin-top: 1.2vh; }
.screen main[data-phase="reveal"] .acard .by { margin-top: 1.2vh; }
.screen main[data-phase="reveal"] .acard .by .avatar { width: clamp(36px, 3.4vw, 56px); height: auto; }
.screen .answers.many { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4vh 1.6vw; align-items: start; margin-top: 2vh; }
.screen .answers.many .acard { font-size: clamp(18px, 2vw, 32px); font-weight: 700; padding: 3vh 1.5vw 2.4vh; animation: pop .5s var(--spring) both; animation-delay: calc(var(--i, 0) * .08s); }
.screen .answers.many .acard .letter { width: 42px; height: 42px; font-size: 20px; top: -20px; left: 18px; }
.screen .answers.many .acard .by { animation-delay: .9s; font-size: clamp(14px, 1.4vw, 22px); }
.screen .answers.many .acard.win { animation: winLift .6s var(--spring) 1.1s both !important; }
.screen .answers.many .acard.lose { animation: none !important; }
.screen .answers.many .acard .crown { animation-delay: 1.2s; top: -40px; }
.screen .answers.many .voters { min-height: 0; }
.screen .people { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 40px); font-size: clamp(16px, 1.6vw, 26px); }
.screen .people .person { animation: pop .5s var(--spring) both; animation-delay: calc(var(--i, 0) * .06s); }
.screen .crowd-chip { align-self: center; background: var(--panel); border: 3px solid var(--line); border-radius: 999px; padding: 6px 16px; }
.screen .lobby { display: grid; grid-template-columns: 1fr auto; gap: 4vw; align-items: center; }
.screen .qr { background: #fff; padding: 16px; border-radius: 22px; width: clamp(150px, 18vw, 280px); border: 5px solid var(--ink); box-shadow: 0 10px 0 var(--ink); transform: rotate(2deg); }
.screen .qr svg, .screen .qr img { display: block; width: 100%; height: auto; }
.screen .qr p { margin: 8px 0 0; color: var(--ink); text-align: center; font-weight: 700; font-size: clamp(14px, 1.2vw, 20px); }

/* Scores: bars climb from the last scores, then rows slide to their new places. */
.screen main[data-phase="scores"] .title { font-size: clamp(36px, 4.6vw, 76px); }
.screen .board.many .bar-row { font-size: clamp(16px, 1.6vw, 26px); padding: .2vh 1vw; }
.screen .board { display: grid; gap: 1.2vh; max-width: 1150px; width: 100%; margin: 0 auto; }
.screen .bar-row { display: grid; grid-template-columns: 1.6em auto minmax(6em, 13em) 1fr auto 4.2em 2.6em; align-items: center; gap: 1.2vw; font-size: clamp(18px, 1.9vw, 32px); font-weight: 700; padding: .3vh 1.2vw; border-radius: 20px; background: #ffffff0f; border: 3px solid #ffffff14; animation: rowIn .45s var(--out) both, rankMove .7s var(--spring) both; animation-delay: calc(var(--i, 0) * .06s), 1.7s; }
.screen .bar-row.lead-row { background: #ffd23f1f; border-color: #ffd23f66; }
.screen .bar-row .rank { color: var(--soft); text-align: center; }
.screen .bar-row.lead-row .rank { color: var(--accent); }
.screen .bar-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen .bar-row .track { height: clamp(20px, 2.8vh, 34px); background: #ffffff1a; border-radius: 99px; overflow: hidden; border: 3px solid var(--ink); }
.screen .bar-row .fill { display: block; height: 100%; border-radius: 99px; background-image: linear-gradient(180deg, #ffffff55, transparent 60%) !important; animation: climb 1.2s var(--out) both; animation-delay: calc(var(--i, 0) * .07s + .25s); }
.screen .bar-row .sc { color: var(--accent); min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.screen .bar-row .gain { color: var(--good); font-size: .7em; animation: pop .45s var(--spring) both; animation-delay: calc(var(--i, 0) * .07s + 1.3s); }
.screen .bar-row .move { font-size: .65em; text-align: center; animation: pop .45s var(--spring) 2.3s both; }
.screen .bar-row .move.up { color: var(--good); } .screen .bar-row .move.down { color: #ff8fab; }
@keyframes rowIn { from { opacity: 0; } }
@keyframes climb { from { width: var(--from); } to { width: var(--to); } }
/* --shift = old place minus new place: a row starts where it was and slides into its new place. */
@keyframes rankMove { from { transform: translateY(calc(var(--shift, 0) * (100% + 1.2vh))); } to { transform: none; } }

/* End: podium, trophy, and confetti that falls once. */
.screen .podium { display: flex; align-items: flex-end; justify-content: center; gap: 2vw; }
.screen .podium .step { display: flex; flex-direction: column; align-items: center; gap: .6vh; animation: stepUp .8s var(--spring) both; }
.screen .podium .p3 { animation-delay: .3s; } .screen .podium .p2 { animation-delay: .8s; } .screen .podium .p1 { animation-delay: 1.4s; }
.screen .podium .pod-face { position: relative; display: grid; place-items: center; }
.screen .podium .pod-face .avatar { position: relative; animation: bob 3.2s ease-in-out infinite; }
.screen .podium .pod-burst { position: absolute; width: 260%; height: 260%; left: -80%; top: -80%; }
.screen .podium .block { position: relative; width: clamp(110px, 12vw, 200px); border: 5px solid var(--ink); border-radius: 18px 18px 6px 6px; display: grid; place-items: center; font-size: clamp(22px, min(3.6vw, 4.6vh), 60px); font-weight: 700; color: var(--ink); box-shadow: inset 0 8px 0 #ffffff66, inset 0 -10px 0 #0000001f, 0 10px 0 #0005; overflow: hidden; }
.screen .podium .nm { font-size: clamp(20px, 2.2vw, 36px); font-weight: 700; }
.screen .podium .sc { color: var(--accent); font-size: clamp(16px, 1.7vw, 28px); }
.screen .podium .p1 .block { height: 12vh; background: linear-gradient(180deg, #ffe680, #ffd23f); }
.screen .podium .p2 .block { height: 8.5vh; background: linear-gradient(180deg, #f2f5fb, #c4cbda); }
.screen .podium .p3 .block { height: 6vh; background: linear-gradient(180deg, #f0b07a, #d0854a); }
@keyframes stepUp { from { transform: translateY(40vh); opacity: 0; } to { transform: none; opacity: 1; } }
.screen .end-top { display: flex; align-items: center; gap: 1.4vw; justify-content: center; animation: pop .7s var(--spring) 2s both !important; }
.screen .end-top .trophy { width: clamp(70px, 8vw, 120px); height: auto; animation: throb 1.6s ease-in-out infinite; }
.screen .end-top .title { font-size: clamp(36px, min(5.4vw, 9vh), 88px); }
.screen main[data-phase="end"] { gap: 1.6vh; padding: 0; }
.screen .podium .pod-face .avatar { width: clamp(64px, min(8vw, 13vh), 150px); height: auto; }
.screen .podium .p1 .pod-face .avatar { width: clamp(84px, min(11vw, 18vh), 190px); }
.screen .end-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3vw; align-items: end; }
.screen .end-grid .board { gap: .8vh; margin-top: 1.4vh; }
.screen .end-grid .board .bar-row { grid-template-columns: 1.6em auto 1fr auto; font-size: clamp(15px, 1.5vw, 24px); padding: 0 1vw; animation-delay: 2.4s, 0s; }
.screen .end-grid .board .track, .screen .end-grid .board .gain, .screen .end-grid .board .move { display: none; }
.screen .answers.best { display: grid; grid-template-columns: 1fr; gap: 1.8vh; }
.screen .acard.best-line { font-size: clamp(16px, 1.7vw, 28px); font-weight: 700; padding: 1.2vh 1.4vw; border-width: 4px; box-shadow: 0 6px 0 var(--ink); animation: slide .5s var(--out) both; animation-delay: calc(2.6s + var(--i) * .15s); }
.screen .acard.best-line:nth-child(odd) { transform: rotate(-.8deg); } .screen .acard.best-line:nth-child(even) { transform: rotate(.8deg); }
.screen .acard.best-line .by { display: flex; align-items: center; gap: 8px; margin-top: .6vh; font-size: clamp(13px, 1.2vw, 20px); color: #4a3f73; font-weight: 600; }
.confetti { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -4vh; width: 14px; height: 10px; border-radius: 2px; animation: fall 3s cubic-bezier(.25, .6, .5, 1) 1 both; }
.confetti i.circle { width: 11px; height: 11px; border-radius: 50%; }
.confetti i.strip { width: 6px; height: 20px; }
@keyframes fall { from { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } to { transform: translate(var(--dx), 110vh) rotate(var(--r)); opacity: 0; } }

.screen .ring { margin-left: 1vw; }
.screen .fuse { height: 10px; }
.screen footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--soft); font-size: clamp(14px, 1.3vw, 20px); margin-top: 1.5vh; }
@media (max-width: 900px) { .screen .end-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .screen .lobby, .screen .round-card { grid-template-columns: 1fr; }
  .screen .qr { width: 160px; }
  .screen .duel-stage { grid-template-columns: 1fr; }
  .screen .vs { justify-self: center; }
  .screen .bar-row { grid-template-columns: 1.6em auto 1fr auto; }
  .screen .bar-row .track, .screen .bar-row .gain, .screen .bar-row .move { display: none; }
}

/* Redraws inside one step (a vote arriving) don't replay the entrance animations. */
.screen main.still > *, .screen main.still .acard, .screen main.still .person, .screen main.still .bar-row,
.screen main.still .fill, .screen main.still .step, .screen main.still .pop, .screen main.still .token, .screen main.still .vbar i,
.screen main.still .by, .screen main.still .crown, .screen main.still .sweep-badge, .screen main.still .sweep-stamp .burst, .screen main.still .moment, .screen main.still .vs,
.screen main.still .round-card, .screen main.still .round-art, .screen main.still .rc-text > *, .screen main.still .gain,
.screen main.still .move, .screen main.still .end-top, .screen main.still .big-code span, .screen main.still .best-line { animation: none !important; }
.screen main.still .acard.win { transform: rotate(-1deg) scale(1.05); }
.screen main.still .acard.lose { transform: scale(.94); opacity: .7; }
.screen main.still .duel-stage.twins .acard.left { transform: translateX(1.5vw) rotate(-3deg); }
.screen main.still .duel-stage.twins .acard.right { transform: translateX(-1.5vw) rotate(3deg); }
.screen main.still .twins-moment { transform: translateY(-50%); }
.screen main.still .sweep-stamp .burst { animation: spin 30s linear infinite !important; }
.screen main.still .vs { transform: rotate(-8deg); }

/* ---------- Letter Line ---------- */
/* Tiles: chunky cream tiles with a colored rim and a shadow, one per letter. On the screen they flip in one by one;
   on the phone (chips) they light up as each word matches. --ts is the tile size. */
.tiles { --ts: 56px; display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--ts) * .22); padding-bottom: calc(var(--ts) * .2); }
.tile { position: relative; display: grid; place-items: center; width: var(--ts); height: var(--ts); border-radius: calc(var(--ts) * .2);
  font-size: calc(var(--ts) * .6); font-weight: 700; line-height: 1; color: var(--ink);
  background: linear-gradient(170deg, #fffdf6 0%, #fff4d6 55%, #ffe7ad 100%);
  border: calc(var(--ts) * .065 + 1px) solid var(--ink);
  box-shadow: inset 0 calc(var(--ts) * -.13) 0 var(--rim, var(--accent)), inset 0 calc(var(--ts) * .06) 0 #fff, 0 calc(var(--ts) * .12) 0 var(--ink), 0 calc(var(--ts) * .26) calc(var(--ts) * .3) #0006;
  transform: rotate(var(--tilt, 0deg)); }
.tile:nth-child(odd) { --tilt: -3deg; } .tile:nth-child(even) { --tilt: 2.5deg; }
.tile b { position: relative; top: calc(var(--ts) * -.05); }
.tile small { position: absolute; right: calc(var(--ts) * .1); top: calc(var(--ts) * .04); font-size: calc(var(--ts) * .18); color: #8a6a2a; }
.tiles.big { --ts: clamp(84px, min(11vw, 17vh), 200px); }
.tiles.big .tile { animation: tileFlip .75s var(--spring) both; animation-delay: calc(.35s + var(--i) * .38s); }
.tiles.big .tile::after { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, #ffd23f88, transparent 60%); opacity: 0; z-index: -1; animation: tileGlow .9s ease-out both; animation-delay: calc(.55s + var(--i) * .38s); }
.tiles.small { --ts: clamp(40px, 3.6vw, 62px); padding-bottom: 0; }
@keyframes tileFlip { 0% { transform: perspective(700px) translateY(-30px) rotateY(-180deg) scale(.5); opacity: 0; } 45% { opacity: 1; } 70% { transform: perspective(700px) rotateY(16deg) scale(1.1); } 100% { transform: rotate(var(--tilt, 0deg)); opacity: 1; } }
@keyframes tileGlow { 30% { opacity: 1; } to { opacity: 0; transform: scale(1.4); } }
/* Phone chips: dim until their word matches, then they light up green and pop; pink when the word starts wrong. */
.tiles.chips { --ts: 52px; margin-top: 14px; }
.tiles.chips .tile { filter: saturate(.25) brightness(.8); transition: filter .2s; }
.tiles.chips .tile.lit, .tiles.chips.done .tile { --rim: var(--good); filter: none; }
.tiles.chips .tile.lit::before, .tiles.chips.done .tile::before { content: '✓'; position: absolute; left: -8px; bottom: -10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--good); color: var(--ink); border: 2px solid var(--ink); }
.tiles.chips .tile.pop-now { animation: chipPop .4s var(--spring) both; }
.tiles.chips .tile.miss { --rim: var(--pink); filter: none; animation: chipNo .35s ease-in-out; }
@keyframes chipPop { from { transform: scale(.7) rotate(var(--tilt)); } 60% { transform: scale(1.18) rotate(var(--tilt)); } to { transform: rotate(var(--tilt)); } }
@keyframes chipNo { 25% { transform: translateX(-5px) rotate(var(--tilt)); } 75% { transform: translateX(5px) rotate(var(--tilt)); } }
.phone .letter-hint { min-height: 1.4em; margin-top: 8px; font-size: 16px; }
.phone .letter-hint.good { color: var(--good); font-weight: 700; }
.letters-art .art-t1, .letters-art .art-t2, .letters-art .art-t3 { animation: tileHop 2.4s ease-in-out infinite; }
.letters-art .art-t2 { animation-delay: -.8s; } .letters-art .art-t3 { animation-delay: -1.6s; }
.letters-art .art-pencil { transform-box: fill-box; transform-origin: 20% 90%; animation: swing 1.6s ease-in-out infinite; }
@keyframes tileHop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-12px); } }

/* Game picker (phone lobby) and the chosen game (screen lobby, other phones). */
.phone .pick-label { margin: 18px 0 0; font-weight: 700; color: var(--soft); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }
.phone .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.phone .mode-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 150px; padding: 12px 10px 14px; background: linear-gradient(165deg, var(--panel2), var(--panel)); color: var(--text); border: 3px solid var(--line); box-shadow: 0 5px 0 #0006; }
.phone .mode-chip .mode-name { font-size: 20px; font-weight: 700; }
.phone .mode-chip .mode-blurb { font-size: 13px; font-weight: 500; color: var(--soft); line-height: 1.25; }
.phone .mode-chip.on { border-color: var(--accent); background: linear-gradient(165deg, #5b2fb0, #2a1b5e); box-shadow: 0 0 0 3px var(--accent), 0 5px 0 var(--ink), 0 0 30px #ffd23f40; }
.phone .mode-chip.on .mode-art { animation: bob 3.2s ease-in-out infinite; }
.phone .mode-chip .mode-check { position: absolute; top: -12px; right: -10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: var(--ink); border: 3px solid var(--ink); font-size: 17px; animation: stampIn .35s var(--spring) both; }
.mode-now { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mode-now small, .mode-badge small { display: block; font-size: .7em; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
.mode-now b { font-size: 22px; }
.screen .mode-badge { display: inline-flex; align-items: center; gap: 1.2vw; padding: 1.2vh 2vw 1.2vh 1.2vw; border-radius: 26px; background: linear-gradient(165deg, var(--panel2), var(--panel)); border: 4px solid var(--accent); box-shadow: 0 8px 0 var(--ink), 0 0 50px #ffd23f2e; font-size: clamp(16px, 1.5vw, 24px); animation: pop .6s var(--spring) both !important; }
.screen .mode-badge .mode-art { width: clamp(56px, 6vw, 96px); height: auto; animation: bob 3.2s ease-in-out infinite; }
.screen .mode-badge b { display: block; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.05; color: #fff; text-shadow: 0 3px 0 var(--pink); }
.screen .mode-badge .blurb { display: block; color: var(--soft); }
/* Difficulty: the leader's three chips on the phone, the pick on everyone else's phone and on the screen. */
.phone .levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.phone .level-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 6px; background: linear-gradient(165deg, var(--panel2), var(--panel)); color: var(--text); border: 3px solid var(--line); box-shadow: 0 4px 0 #0006; }
.phone .level-chip b { font-size: 18px; }
.phone .level-chip small { font-size: 11px; font-weight: 500; color: var(--soft); line-height: 1.2; }
.phone .level-chip.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.mode-now .level-now { padding-left: 12px; margin-left: 2px; border-left: 2px solid var(--line); }
.screen .mode-badge .level-pill { display: inline-block; margin-top: .6vh; padding: .3vh 1vw; border-radius: 999px; border: 2px solid var(--accent); font-weight: 700; color: var(--text); }
.screen .mode-badge .level-pill.lv-hard { background: var(--pink); color: #fff; border-color: var(--pink); }
.screen .round-card.letters { background: linear-gradient(150deg, #13857c, #2a1360); }
.screen .round-card.letters.last { background: linear-gradient(150deg, #a02a6a, #2a1360); }
.screen .topic { margin: 0 auto; max-width: 22ch; }
.screen main[data-phase="write"] .prompt.topic { font-size: clamp(34px, 4.8vw, 76px); }
.screen .topic-row { display: flex; align-items: center; justify-content: center; gap: 1.4vw; flex-wrap: wrap; }
.screen .topic-row .topic { max-width: none; margin: 0; font-weight: 700; font-size: clamp(24px, 2.8vw, 46px); text-shadow: 0 4px 0 #0000004d; }
.screen .answers.lines { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3.4vh 1.4vw; }
.screen .answers.lines .acard { font-size: clamp(20px, 2.2vw, 36px); }
/* The reveal adds faces, a count and the author under each line: keep five to ten of them on a 720p screen. */
.screen main[data-phase="reveal"] .answers.lines .acard { font-size: clamp(17px, 1.8vw, 30px); padding: 2.4vh 1.2vw 1.8vh; }
.screen main[data-phase="reveal"] .answers.lines .voters { margin-top: 1vh; gap: 4px; }
.screen main[data-phase="reveal"] .answers.lines .token .avatar { width: clamp(28px, 2.6vw, 44px); height: auto; }
.screen main[data-phase="reveal"] .answers.lines .by { margin-top: 1vh; gap: 8px; }
.screen main[data-phase="reveal"] .answers.lines .by .avatar { width: clamp(28px, 2.6vw, 44px); height: auto; }
.screen main[data-phase="reveal"] .answers.lines .vcount { margin-top: .6vh; }
.screen .answers.lines .acard .vcount { display: inline-block; margin-top: 1vh; font-size: clamp(14px, 1.3vw, 20px); font-weight: 700; color: #4a3f73; animation: slide .4s var(--out) .8s both; }
.screen .bonus-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: clamp(18px, 1.9vw, 30px); color: var(--soft); animation: slide .5s var(--out) 1.6s both !important; }
.screen .bonus-faces { display: inline-flex; gap: 4px; }
.screen .bonus-faces > span { animation: pop .5s var(--spring) both; animation-delay: calc(1.8s + var(--k, 0) * .1s); }
.screen main.still .tile, .screen main.still .tile::after, .screen main.still .mode-badge, .screen main.still .bonus-note, .screen main.still .bonus-faces > span, .screen main.still .vcount { animation: none !important; }

/* ---------- home ---------- */
.home { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.home .top { display: flex; justify-content: center; font-size: clamp(34px, 8vw, 54px); }
.home .top .logo-mark { animation: bob 3.2s ease-in-out infinite; }
.home .lead { font-size: clamp(19px, 3.6vw, 23px); text-align: center; margin: 4px auto 0; max-width: 30em; }
.home .hero { position: relative; }
.home .hero::before { content: ''; position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(circle, #ff5d8f33, transparent 65%); z-index: -1; }
.hero-art .hero-phone { animation: heroBob 3.4s ease-in-out infinite; }
.hero-art .hero-send { transform-box: fill-box; transform-origin: center; animation: heroTap 3.4s ease-in-out infinite; }
.hero-art .hero-a { transform-box: fill-box; transform-origin: 10% 100%; animation: heroA 6s var(--out) infinite; }
.hero-art .hero-b { transform-box: fill-box; transform-origin: 90% 100%; animation: heroB 6s var(--out) infinite; }
.hero-art .hero-vs { transform-box: fill-box; transform-origin: center; animation: heroVs 6s var(--spring) infinite; }
.hero-art .hero-win { transform-box: fill-box; transform-origin: center; animation: heroWin 6s var(--spring) infinite; }
.hero-art .hero-fly { opacity: 0; animation: heroFly1 6s ease-in infinite; }
.hero-art .hero-fly.f2 { animation-name: heroFly2; }
@keyframes heroBob { 50% { transform: translateY(-6px); } }
@keyframes heroTap { 0%, 40%, 60%, 100% { transform: none; } 50% { transform: scale(.8); } }
@keyframes heroA { 0%, 4% { transform: scale(0); } 12%, 92% { transform: none; } 100% { transform: scale(0); } }
@keyframes heroB { 0%, 18% { transform: scale(0); } 26%, 92% { transform: none; } 100% { transform: scale(0); } }
@keyframes heroVs { 0%, 28% { transform: scale(0) rotate(-90deg); } 36%, 92% { transform: none; } 100% { transform: scale(0); } }
@keyframes heroWin { 0%, 62% { transform: scale(0) rotate(-120deg); } 72%, 90% { transform: none; } 100% { transform: scale(0); } }
@keyframes heroFly1 { 0%, 40% { opacity: 0; transform: none; } 44% { opacity: 1; } 58% { opacity: 1; transform: translate(230px, -110px) scale(.6); } 60%, 100% { opacity: 0; transform: translate(230px, -110px); } }
@keyframes heroFly2 { 0%, 46% { opacity: 0; transform: none; } 50% { opacity: 1; } 62% { opacity: 1; transform: translate(-40px, -130px) scale(.6); } 64%, 100% { opacity: 0; transform: translate(-40px, -130px); } }
.home .choices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.home .choices .card { display: flex; flex-direction: column; gap: 10px; animation: slide .5s var(--out) both; }
.home .choices .card:nth-child(2) { animation-delay: .08s; } .home .choices .card:nth-child(3) { animation-delay: .16s; }
.home .choices h2 { margin: 0; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.home .choices p { margin: 0; flex: 1; }
.home .choices button { width: 100%; }
.home .play-now { border-color: var(--accent); background: linear-gradient(160deg, #5b2fb0, #2a1b5e); box-shadow: 0 8px 0 #0000003a, 0 0 40px #ffd23f2e; }
.home .house-note { font-size: 15px; margin: 6px 0 0; }
.home .steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; list-style: none; }
.home .steps li { background: linear-gradient(165deg, var(--panel2), var(--panel)); border: 3px solid var(--line); border-radius: 20px; padding: 14px; text-align: center; }
.home .steps .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 700; border: 3px solid var(--ink); margin-bottom: 6px; box-shadow: 0 3px 0 var(--ink); }
.home .faces { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.home .faces .avatar { animation: bob 3.2s ease-in-out infinite; }
.home .faces .avatar:nth-child(2n) { animation-delay: -1.1s; } .home .faces .avatar:nth-child(3n) { animation-delay: -2.2s; }

/* ---------- back arrow and the "leave the game?" pop-up (public/back.js) ---------- */
button.back { min-height: 44px; min-width: 44px; padding: 6px 14px 6px 10px; display: inline-flex; align-items: center; gap: 6px; }
.phone .back-row { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.screen header .back { margin-right: .8em; font-size: 16px; }
.leave-ask { position: fixed; inset: 0; z-index: 30; background: #0d0826cc; display: grid; place-items: center; padding: 16px; }
.leave-ask .card { width: min(420px, 100%); animation: pop .35s var(--spring) both; }
.leave-ask h2 { margin: 0; }

/* Less motion, asked for by the device: everything stands still in its final place, nothing loops or flies. */
@media (prefers-reduced-motion: reduce) {
  /* :is() with an id that never matches lifts this above every other rule here, including the !important ones. */
  :is(#reduce-motion, *), :is(#reduce-motion, *)::before, :is(#reduce-motion, *)::after { animation: none !important; transition: none !important; }
  .confetti { display: none; }
  .hero-art .hero-fly { display: none; }
}
/* Link from the Comeback home to the games collection. */
.more-games { display: inline-block; padding: 10px 18px; border: 2px solid var(--line); border-radius: 999px; background: #ffffff10; color: var(--text); text-decoration: none; font-weight: 600; }
.more-games b { color: var(--accent); }
.more-games:hover, .more-games:focus-visible { border-color: var(--accent); }

.home .back-row { align-self: flex-start; }

/* Join steps on the shared screen's lobby: big enough to read from the sofa. */
.join-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: clamp(18px, 2.2vw, 30px); font-weight: 600; }
.join-steps li { display: inline-flex; align-items: center; gap: 10px; }
.join-steps b { color: var(--accent, #ffd23f); }
.join-steps .js-n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #2ec4b6; color: #1d1433; border: 3px solid #1d1433; font-weight: 700; flex: none; }

/* Nothing in a game highlights like copied text (Doug, standing order 1 Oct: "all games we make should not have
   highlightable text"). Every page that loads this file is a game or the arcade, so nothing selects, long-press
   brings up no copy menu, taps don't flash and pictures don't drag. Typing boxes (names, codes) still select.
   Reading pages (privacy, stats) opt back in with body.read. test/no-select.test.js keeps every page covered. */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
img, svg, canvas, a { -webkit-user-drag: none; }
input, textarea, [contenteditable="true"], body.read, body.read * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }