/* Zoomies V2 — tokens copied from Nuz-landing-prototype/css/tokens (colors, spacing, typography) so this folder stands alone. */
:root {
  --violet-core: #3B2A5E; --violet-accent: #6E56A8; --violet-light: #B3A3D9;
  --orange-core: #9A4A1E; --orange-accent: #E07B39; --orange-light: #F2B58A;
  --blue-core: #1F3A5C; --blue-accent: #3F72A6; --blue-light: #93B7DB;
  --paper: #F6F4FA; --cream: #ECE9F3; --pebble: #C6C2D2; --white: #FFFFFF; --paper-on-dark: #FBF9FF;
  --ink: #1E1B2E; --ink-2: #33304A; --ink-3: #5C5A70;
  --lilac-soft: #ECE6F6; --peach-soft: #FBEBDF;
  --gold: #FFD66B; --green: #3E9B6B;
  --radius-md: 16px; --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px;
  --shadow-1: 0 2px 6px rgba(59, 42, 94, .10);
  --shadow-2: 0 6px 16px rgba(110, 86, 168, .22);
  --shadow-3: 0 14px 36px rgba(59, 42, 94, .22);
  --shadow-warm: 0 6px 16px rgba(224, 123, 57, .26);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --font-display: 'Bowlby One', 'Arial Black', system-ui, sans-serif;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  /* the ink outline every big number wears */
  --ink-out: 0 3px 0 var(--violet-core), 3px 0 0 var(--violet-core), -3px 0 0 var(--violet-core), 0 -3px 0 var(--violet-core),
             2px 2px 0 var(--violet-core), -2px 2px 0 var(--violet-core), 2px -2px 0 var(--violet-core), -2px -2px 0 var(--violet-core),
             0 8px 0 rgba(59, 42, 94, .28);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #E9EEF8; color: var(--ink); font: 500 15px/1.4 var(--font-sans); -webkit-font-smoothing: antialiased;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
#c { position: fixed; inset: 0; display: block; outline: none; cursor: pointer; }
:focus-visible { outline: 3px solid var(--violet-accent); outline-offset: 2px; }

/* ================= HUD ================= */
.hud { position: fixed; z-index: 5; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px;
  padding: calc(10px + var(--st)) calc(12px + var(--sr)) 0 calc(12px + var(--sl)); pointer-events: none; transition: opacity .35s var(--ease); }
.hud > * { pointer-events: auto; }
.hud.is-quiet .hud-l, .hud.is-quiet .hud-r, .hud.is-quiet .best { opacity: 0; pointer-events: none; }
.hud-l, .hud-r { display: flex; align-items: center; gap: 8px; transition: opacity .35s var(--ease); }
.hud-r { justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .88); box-shadow: var(--shadow-1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 13px/1 var(--font-sans); color: var(--ink-2); }
.pill.icon { width: 40px; padding: 0; justify-content: center; cursor: pointer; color: var(--ink-3); }
.pill.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pill.icon .on { display: none; } .pill.icon.is-on .on { display: block; } .pill.icon.is-on .off { display: none; } .pill.icon.is-on { color: var(--orange-accent); }
.brand { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .88); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; }
.hop { text-decoration: none; }
.end-home { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 14px 0 0; }
.end-home a { color: var(--ink-2); font: 700 14px/1 var(--font-sans); }
@media (max-width: 820px) { .hud-l .hop { display: none; } }
.brand img { height: 18px; width: auto; }
.brand b { font: 400 14px/1 var(--font-display); color: var(--violet-accent); text-transform: uppercase; }

/* the score: one number, in meters, big */
.hud-c { display: grid; justify-items: center; gap: 6px; }
.score { position: relative; display: inline-flex; align-items: baseline; gap: .06em; font: 400 clamp(46px, 12vh, 112px)/1 var(--font-display);
  color: var(--white); text-shadow: var(--ink-out); letter-spacing: .01em; transform-origin: 50% 40%; will-change: transform; white-space: nowrap; }
.score-n { display: inline-flex; }
.score-n i { font-style: normal; display: inline-block; width: .74em; text-align: center; } /* fixed-width digits: the number never wobbles */
.score-n i.c { width: .3em; }
.score-u { font-size: .42em; color: var(--orange-light); margin-left: .08em; }
.score.bump { animation: bump .28s var(--pop); }
@keyframes bump { 40% { transform: scale(1.13); } }
.score.is-zoom { color: #FFE9D6; text-shadow: var(--ink-out), 0 0 28px rgba(224, 123, 57, .75); }
.score.is-zoom .score-u { color: var(--orange-accent); }
.score.is-pb .score-n { color: var(--gold); }
.score-badge { position: absolute; left: 50%; top: -.02em; transform: translate(-50%, -100%) scale(.6); opacity: 0; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--violet-core); font: 400 13px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; text-shadow: none; white-space: nowrap; transition: .3s var(--pop); }
.score.is-pb .score-badge { opacity: 1; transform: translate(-50%, -110%) scale(1); }
.score.is-hero .score-badge { display: none; } /* the end screen says it in words */
.best { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .78); box-shadow: var(--shadow-1);
  font: 800 12px/1 var(--font-sans); color: var(--ink-3); transition: opacity .35s var(--ease); }
.best-bar { position: relative; width: clamp(80px, 14vw, 160px); height: 8px; border-radius: 8px; background: var(--cream); overflow: hidden; }
.best-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--violet-light), var(--orange-accent)); }
.best.is-beat .best-bar i { background: var(--gold); }
.best.is-beat { color: var(--violet-core); }

/* streak: three paws fill, the third sets off zoomies */
.streak { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .88); box-shadow: var(--shadow-1); }
.streak i { width: 18px; height: 18px; background: var(--pebble); transition: background .2s, transform .25s var(--pop);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.4'/%3E%3Ccircle cx='5' cy='10' r='2.3'/%3E%3Ccircle cx='9.2' cy='5.6' r='2.3'/%3E%3Ccircle cx='14.8' cy='5.6' r='2.3'/%3E%3Ccircle cx='19' cy='10' r='2.3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.4'/%3E%3Ccircle cx='5' cy='10' r='2.3'/%3E%3Ccircle cx='9.2' cy='5.6' r='2.3'/%3E%3Ccircle cx='14.8' cy='5.6' r='2.3'/%3E%3Ccircle cx='19' cy='10' r='2.3'/%3E%3C/svg%3E") center/contain no-repeat; }
.streak i.on { background: var(--orange-accent); transform: scale(1.18); }
.streak b { display: none; font: 400 14px/1 var(--font-display); color: var(--white); }
.streak.is-zoom { background: linear-gradient(90deg, var(--violet-accent), var(--orange-accent)); animation: throb .6s ease-in-out infinite alternate; }
.streak.is-zoom i { background: var(--white); }
.streak.is-zoom b { display: inline; }
@keyframes throb { to { transform: scale(1.06); } }
.clock { position: relative; overflow: hidden; min-width: 76px; justify-content: center; }
.clock .sun { width: 14px; height: 14px; border-radius: 50%; background: var(--orange-accent); box-shadow: 0 0 0 3px rgba(242, 181, 138, .5); }
.clock b { font: 400 19px/1 var(--font-display); color: var(--ink); min-width: 2ch; text-align: right; }
.clock.is-low b { color: var(--orange-accent); animation: tick .5s steps(2) infinite; }
.clock.is-slow .sun { background: var(--violet-accent); box-shadow: 0 0 0 3px rgba(179, 163, 217, .6); }
.clock .zbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--violet-accent), var(--orange-accent)); }
.clock.bump { animation: bump .28s var(--pop); }
@keyframes tick { to { opacity: .35; } }

/* bonus chips fly from the trick to the number */
.chips { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.chip { position: absolute; left: 0; top: 0; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-2);
  font: 400 17px/1 var(--font-display); color: var(--orange-accent); white-space: nowrap; will-change: transform, opacity; }
.chip.big { font-size: 22px; background: var(--orange-accent); color: var(--white); }
.chip.time { color: var(--violet-accent); }
.chip small { font: 800 11px/1 var(--font-sans); color: var(--ink-3); margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.chip.big small { color: #FFE3CF; }

.toast { position: fixed; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none;
  font: 400 clamp(26px, 7vh, 54px)/1 var(--font-display); color: var(--white); text-shadow: var(--ink-out); text-transform: uppercase; white-space: nowrap; transition: opacity .2s, transform .35s var(--pop); }
.toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast small { display: block; margin-top: 8px; font: 800 14px/1 var(--font-sans); text-shadow: none; color: var(--violet-core); text-align: center; letter-spacing: .06em; }

/* ================= tutorial coach ================= */
.coach { position: fixed; z-index: 7; left: 50%; bottom: calc(22px + var(--sb)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 10px 22px 10px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .95); box-shadow: var(--shadow-3); pointer-events: none; animation: coach-in .35s var(--pop); }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.9); } }
.coach-key { display: grid; place-items: center; width: 64px; height: 52px; }
.coach-key svg { width: 52px; height: 52px; fill: var(--violet-core); display: none; }
.coach-key svg .ring { fill: none; stroke: var(--orange-accent); stroke-width: 3; transform-origin: 30px 22px; animation: ring 1.1s ease-out infinite; }
.coach-key .k-key { display: none; min-width: 64px; padding: 12px 8px 14px; border-radius: 10px; background: var(--white); box-shadow: inset 0 -5px 0 var(--pebble), 0 0 0 2px var(--violet-core);
  font: 800 13px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--violet-core); text-align: center; }
body.touch .coach-key svg { display: block; }
body:not(.touch) .coach-key .k-key { display: block; }
.coach.is-hold .coach-key svg path, .coach.is-hold .k-key { animation: press 1.1s ease-in-out infinite; }
.coach.is-hold .k-key { animation-name: keypress; }
.coach.is-let .coach-key svg .ring { animation: none; opacity: 0; }
.coach.is-let .coach-key svg path, .coach.is-let .k-key { animation: lift .7s ease-in-out infinite alternate; }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes press { 0%, 100% { transform: translateY(0); } 30%, 80% { transform: translateY(4px); } }
@keyframes keypress { 0%, 100% { transform: translateY(0); box-shadow: inset 0 -5px 0 var(--pebble), 0 0 0 2px var(--violet-core); } 30%, 80% { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--pebble), 0 0 0 2px var(--orange-accent); } }
@keyframes lift { to { transform: translateY(-6px); opacity: .7; } }
.coach-t { display: grid; gap: 3px; }
.coach-t b { font: 400 clamp(20px, 4.6vh, 30px)/1 var(--font-display); text-transform: uppercase; color: var(--violet-core); letter-spacing: .01em; }
.coach-t small { font: 700 14px/1.2 var(--font-sans); color: var(--ink-3); }
.coach.is-win .coach-t b { color: var(--orange-accent); }

/* ================= buttons ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; border: 0; border-radius: var(--radius-pill);
  background: var(--orange-accent); color: var(--white); font: 800 17px/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-warm); transition: transform .14s var(--ease); }
.btn:active { transform: scale(.96); }
.btn kbd { padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .22); font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; }
body.touch .btn kbd { display: none; }
.linkbtn { border: 0; background: none; padding: 8px; font: 700 14px/1 var(--font-sans); color: var(--violet-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ================= intro ================= */
.intro { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: linear-gradient(#DCE6F6, #F6F1F8 70%); cursor: pointer; }
.intro-sky { position: absolute; inset: 0; }
.i-sun { position: absolute; right: 16%; top: 12%; width: 13vh; height: 13vh; border-radius: 50%; background: var(--orange-accent); box-shadow: 0 0 0 18px rgba(242, 181, 138, .35), 0 0 80px 40px rgba(242, 181, 138, .35); transition: top 1.2s var(--ease), background 1.2s; }
.i-mtn { position: absolute; left: -5%; width: 110%; bottom: 0; }
.i-mtn.far { height: 62%; fill: #A9C3E8; } .i-mtn.far .cap { fill: #FBFAFF; }
.i-mtn.near { height: 38%; fill: #8FBCEB; transition: transform 1.2s var(--ease); }
.i-snow { position: absolute; inset: auto 0 0 0; height: 9%; background: #FBFAFF; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.intro[data-i="1"] .i-mtn.near { transform: translateX(-3%) scaleY(1.12); }
.intro[data-i="2"] .i-sun { top: 46%; background: #F2A067; }
.intro[data-i="2"] { background: linear-gradient(#C9D4F0, #F8DCC8 72%); }
.intro-skip { position: absolute; z-index: 3; top: calc(12px + var(--st)); right: calc(12px + var(--sr)); min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-1); font: 800 13px/1 var(--font-sans); color: var(--ink-3); cursor: pointer; }
.slide { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2vw;
  padding: calc(6vh + var(--st)) calc(6vw + var(--sr)) calc(12vh + var(--sb)) calc(7vw + var(--sl)); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.slide-copy { display: grid; justify-items: start; gap: 1.6vh; }
.slide .kicker { margin: 0; font: 800 clamp(12px, 2.4vh, 16px)/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-accent); }
.slide .big { margin: 0; font: 400 clamp(38px, 13vh, 118px)/.92 var(--font-display); text-transform: uppercase; color: var(--white); text-shadow: var(--ink-out); letter-spacing: .005em; }
.slide .big em { font-style: normal; color: var(--orange-light); }
.slide[data-i="1"] .big, .slide[data-i="2"] .big { font-size: clamp(30px, 10vh, 92px); }
.slide .sub { margin: 0; max-width: 26em; font: 700 clamp(15px, 3.2vh, 22px)/1.35 var(--font-sans); color: var(--ink-2); }
.slide .sub b { color: var(--orange-accent); }
.slide .fine { margin: -.6vh 0 0; font: 700 clamp(11px, 2vh, 13px)/1 var(--font-sans); color: var(--ink-3); }
.slide .btn { margin-top: 1.6vh; }
.slide-art { position: relative; display: grid; place-items: center; height: 100%; min-height: 0; }
.slide-art img { width: min(100%, 62vh); height: auto; transform: scaleX(-1); filter: drop-shadow(0 18px 18px rgba(59, 42, 94, .18)); }
.slide.is-on .s1 img { animation: hopin .9s var(--pop) both, breathe 2.6s 1s ease-in-out infinite; }
.slide.is-on .s2 img { animation: whoosh 2.4s cubic-bezier(.45, .05, .35, 1) infinite; }
.slide.is-on .s3 img { animation: hopin .7s var(--pop) both, wiggle 1.2s .8s ease-in-out infinite; }
@keyframes hopin { 0% { opacity: 0; transform: scaleX(-1) translate(-60%, 12%) rotate(8deg); } 60% { opacity: 1; transform: scaleX(-1) translate(4%, -6%) rotate(-3deg); } 100% { transform: scaleX(-1); } }
@keyframes breathe { 50% { transform: scaleX(-1) scale(1.02, 1.035); } }
@keyframes wiggle { 0%, 100% { transform: scaleX(-1) rotate(0); } 25% { transform: scaleX(-1) rotate(-2.5deg); } 75% { transform: scaleX(-1) rotate(2.5deg); } }
@keyframes whoosh { 0% { opacity: 0; transform: scaleX(-1) translate(70%, -26%) rotate(-14deg); } 18% { opacity: 1; } 55% { transform: scaleX(-1) translate(-6%, 4%) rotate(-10deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: scaleX(-1) translate(-90%, 26%) rotate(-10deg); } }
.streaks { position: absolute; inset: 20% 0; }
.streaks i { position: absolute; right: 0; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .95); animation: streak 1.2s linear infinite; }
.streaks i:nth-child(1) { top: 30%; width: 34%; } .streaks i:nth-child(2) { top: 50%; width: 22%; animation-delay: .4s; } .streaks i:nth-child(3) { top: 70%; width: 28%; animation-delay: .8s; }
@keyframes streak { from { transform: translateX(40%); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(-260%); opacity: 0; } }
.intro-nav { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(4vh + var(--sb)); display: flex; justify-content: center; align-items: center; gap: 8px; }
.intro-nav i { width: 10px; height: 10px; border-radius: 50%; background: rgba(59, 42, 94, .22); transition: .25s var(--ease); }
.intro-nav i.is-on { width: 28px; border-radius: 6px; background: var(--violet-accent); }
.intro-nav span { margin-left: 12px; font: 800 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--violet-core); opacity: .7; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ================= end: score hero + scoreboard ================= */
.end { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; scroll-behavior: smooth; user-select: text; -webkit-user-select: text; }
.end-hero { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center;
  padding: calc(14px + var(--st)) calc(4vw + var(--sr)) calc(18px + var(--sb)) calc(3vw + var(--sl));
  background: linear-gradient(90deg, rgba(246, 244, 250, 0) 25%, rgba(246, 244, 250, .72) 48%, rgba(246, 244, 250, .9)); animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.end-main { display: grid; justify-items: center; gap: 1.6vh; text-align: center; }
.end-kicker { margin: 0; font: 800 clamp(12px, 2.4vh, 15px)/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-accent); }
.score-slot { min-height: 1em; font: 400 clamp(76px, 25vh, 240px)/1 var(--font-display); }
.score.is-hero { font-size: clamp(76px, 25vh, 240px); }
.score.is-hero .score-u { font-size: .34em; }
.end-break { margin: -.4vh 0 0; font: 700 clamp(13px, 2.6vh, 17px)/1.3 var(--font-sans); color: var(--ink-3); }
.end-break b { color: var(--ink); } .end-break em { font-style: normal; color: var(--orange-accent); font-weight: 800; }
.end-reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.end.is-revealed .end-reveal { opacity: 1; transform: none; }
.end-compare { width: min(520px, 100%); display: grid; gap: 7px; }
.cmp-head { margin: 0 0 2px; font: 400 clamp(18px, 4vh, 28px)/1.1 var(--font-display); color: var(--violet-core); }
.cmp-head.is-pb { color: var(--orange-accent); animation: bump .5s var(--pop) 2; }
.cmp-row { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 4.6em; align-items: center; gap: 10px; font: 700 13px/1.1 var(--font-sans); color: var(--ink-3); text-align: left; }
.cmp-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-row b { font: 400 14px/1 var(--font-display); color: var(--ink); text-align: right; }
.cmp-bar { height: 12px; border-radius: 12px; background: var(--cream); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; width: 0; border-radius: 12px; background: var(--pebble); transition: width 1s var(--ease); }
.cmp-row.is-you .cmp-bar i { background: linear-gradient(90deg, var(--violet-accent), var(--orange-accent)); }
.cmp-row.is-you { color: var(--violet-core); }
.cmp-row.is-top .cmp-bar i { background: var(--gold); }
.end-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: .4vh 0 0; padding: 0; list-style: none; }
.end-stats li { display: grid; gap: 3px; min-width: 76px; padding: 7px 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .9); box-shadow: var(--shadow-1); }
.end-stats b { font: 400 16px/1 var(--font-display); color: var(--ink); }
.end-stats small { font: 700 10.5px/1.1 var(--font-sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.end-stats li.ros { grid-template-columns: auto auto; align-items: center; column-gap: 8px; text-align: left; }
.end-stats li.ros i { grid-row: span 2; position: relative; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, var(--rc) 24% 100%); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rc); }
.end-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: .6vh; }
.to-board { font: 800 14px/1 var(--font-sans); color: var(--violet-accent); text-decoration: none; padding: 10px; }
.to-board span { display: inline-block; animation: bob 1s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(4px); } }

.board { position: relative; background: var(--paper); box-shadow: 0 -18px 40px rgba(59, 42, 94, .12); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.board-in { width: min(760px, 100%); margin: 0 auto; padding: 28px calc(16px + var(--sr)) calc(40px + var(--sb)) calc(16px + var(--sl)); }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.board h2 { margin: 0; font: 400 clamp(22px, 4vw, 30px)/1 var(--font-display); text-transform: uppercase; color: var(--ink); }
.board-src { margin: 0; font: 700 12.5px/1 var(--font-sans); color: var(--ink-3); }
.namebox { display: grid; gap: 8px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-1); }
.namebox label { font: 800 13px/1 var(--font-sans); color: var(--violet-accent); text-transform: uppercase; letter-spacing: .06em; }
.namebox-row { display: flex; gap: 10px; }
.namebox input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 2px solid var(--pebble); border-radius: var(--radius-md); background: var(--paper); font: 700 18px/1 var(--font-sans); color: var(--ink); user-select: text; -webkit-user-select: text; }
.namebox input:focus { outline: none; border-color: var(--violet-accent); }
.check { flex: none; width: 56px; height: 52px; border: 0; border-radius: var(--radius-md); background: var(--green); cursor: pointer; box-shadow: 0 6px 14px rgba(62, 155, 107, .3); display: grid; place-items: center; }
.check svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.namebox-as { margin: -4px 0 14px; font: 700 13px/1.3 var(--font-sans); color: var(--ink-3); }
.board-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.board-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px 6px 8px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-1); }
.board-list .rk { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); font: 400 14px/1 var(--font-display); color: var(--ink-3); }
.board-list li:nth-child(1) .rk { background: var(--gold); color: var(--violet-core); }
.board-list li:nth-child(2) .rk { background: #DCE3EE; color: var(--blue-core); }
.board-list li:nth-child(3) .rk { background: #F2C9A6; color: var(--orange-core); }
.board-list .nm { display: grid; gap: 2px; min-width: 0; }
.board-list .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1.1 var(--font-sans); color: var(--ink); }
.board-list .nm small { font: 700 11.5px/1 var(--font-sans); color: var(--ink-3); }
.board-list .m { font: 400 20px/1 var(--font-display); color: var(--ink); }
.board-list .m small { font-size: .6em; color: var(--ink-3); margin-left: 2px; }
.board-list li.is-you { background: var(--lilac-soft); box-shadow: inset 0 0 0 2px var(--violet-light); }
.board-list li.is-new { box-shadow: inset 0 0 0 3px var(--orange-accent), var(--shadow-2); animation: bump .5s var(--pop); }
.board-list li.gap { min-height: 18px; padding: 0; background: none; box-shadow: none; justify-content: center; grid-template-columns: 1fr; color: var(--ink-3); font-weight: 800; text-align: center; }
.board-empty { padding: 18px; border-radius: var(--radius-lg); background: var(--white); color: var(--ink-3); font-weight: 700; text-align: center; }
.board-foot { margin: 18px 0 0; text-align: center; }

/* coats: one colour per score milestone (best single run) */
.coats { margin-bottom: 28px; }
.coat-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.coat { position: relative; width: 100%; display: grid; justify-items: center; gap: 3px; padding: 6px 4px 9px; border: 0; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-1); cursor: pointer; font: inherit; color: var(--ink); transition: transform .14s var(--ease); }
.coat:active { transform: scale(.96); }
.coat-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--a) 70%, white) 0 38%, var(--lilac-soft) 72%); }
.coat-art img { width: 122%; max-width: none; height: auto; transform: scaleX(-1) translateY(3%); }
.coat b { font: 800 12px/1.15 var(--font-sans); text-align: center; }
.coat small { font: 700 10.5px/1 var(--font-sans); color: var(--ink-3); white-space: nowrap; }
.coat[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--b), var(--shadow-2); }
.coat[aria-pressed="true"] small { color: var(--b); }
.coat.is-locked { cursor: default; background: var(--cream); box-shadow: none; }
.coat.is-locked .coat-art { background: var(--cream); }
.coat.is-locked img { filter: grayscale(1) brightness(1.25); opacity: .35; }
.coat.is-locked .coat-art::after { content: ""; position: absolute; width: 26%; aspect-ratio: 1; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.coat.is-new { box-shadow: inset 0 0 0 3px var(--orange-accent), var(--shadow-2); animation: bump .5s var(--pop) 2; }
.coat.is-shine:not(.is-locked) .coat-art::before { content: ""; position: absolute; inset: -20%; z-index: 1; background: linear-gradient(115deg, transparent 40%, rgba(255, 250, 220, .75) 50%, transparent 60%); animation: sheen 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.coat-new { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px; font: 700 13.5px/1.2 var(--font-sans); color: var(--ink-2); }
.coat-new i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--b); }
.coat-new b { color: var(--ink); }
@media (max-width: 700px) { .coat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================= rotate prompt (phones held upright) ================= */
.rotate { display: none; position: fixed; inset: 0; z-index: 50; place-content: center; justify-items: center; gap: 22px; padding: 24px; background: linear-gradient(#DCE6F6, #F6F1F8); text-align: center; }
.rotate p { margin: 0; font: 700 15px/1.4 var(--font-sans); color: var(--ink-3); }
.rotate p b { display: block; margin-bottom: 6px; font: 400 26px/1.05 var(--font-display); text-transform: uppercase; color: var(--violet-core); }
.rotate-phone { position: relative; width: 92px; height: 164px; border-radius: 20px; border: 5px solid var(--violet-core); background: #E3ECFA; animation: turn 2.4s var(--ease) infinite; }
.rotate-phone img { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%) scaleX(-1) rotate(-90deg); }
@keyframes turn { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) and (pointer: coarse) { .rotate { display: grid; } }

/* ================= small landscape phones ================= */
@media (max-height: 460px) {
  .hud { padding-top: calc(6px + var(--st)); }
  .pill, .brand, .streak { min-height: 34px; height: 34px; }
  .pill.icon { width: 34px; }
  .brand b { display: none; }
  .streak i { width: 15px; height: 15px; }
  .clock b { font-size: 16px; }
  .best { padding: 3px 8px 3px 5px; font-size: 11px; }
  .coach { bottom: calc(10px + var(--sb)); padding: 6px 16px 6px 8px; gap: 10px; }
  .coach-key { width: 48px; height: 40px; } .coach-key svg { width: 40px; height: 40px; }
  .coach-key .k-key { min-width: 54px; padding: 9px 6px 11px; font-size: 11px; }
  .end-main { gap: 1.2vh; }
  .score-slot, .score.is-hero { font-size: clamp(64px, 22vh, 240px); }
  .end-stats li { min-width: 60px; padding: 4px 8px; }
  .end-stats li:nth-child(4), .end-stats li:nth-child(5) { display: none; } /* short screens: keep one row */
  .end-stats b { font-size: 13px; } .end-stats small { font-size: 9.5px; }
  .cmp-head { font-size: 17px; }
  .btn { min-height: 44px; padding: 10px 22px; font-size: 15px; }
  .cmp-row { font-size: 12px; } .cmp-bar { height: 9px; }
}
@media (max-width: 700px) {
  .end-hero { grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); padding-left: calc(8px + var(--sl)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* the end-screen reveal: one new coat per new best */
.coat-won { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; padding: 6px 8px 6px 6px; border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 2px var(--b), var(--shadow-2); text-align: left; animation: bump .5s var(--pop) .9s both; }
.coat-won-art { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--a) 70%, white) 0 40%, var(--lilac-soft) 75%); }
.coat-won-art img { width: 125%; max-width: none; height: auto; transform: scaleX(-1); }
.coat-won-t { display: grid; gap: 3px; flex: 1; min-width: 0; }
.coat-won-t small { font: 800 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.coat-won-t b { font: 400 17px/1 var(--font-display); color: var(--ink); }
.btn.sm { min-height: 40px; padding: 8px 16px; font-size: 14px; background: var(--b); box-shadow: none; }
.btn.sm:disabled { background: var(--cream); color: var(--ink-3); cursor: default; }
@media (max-height: 460px) {
  .score-slot, .score.is-hero { font-size: clamp(56px, 20vh, 240px); }
  .coat-won { padding: 4px 6px 4px 4px; gap: 8px; margin-top: 2px; }
  .coat-won-art { width: 36px; height: 36px; border-radius: 9px; }
  .coat-won-t b { font-size: 14px; } .coat-won-t small { font-size: 9.5px; }
  .btn.sm { min-height: 32px; padding: 6px 12px; font-size: 13px; }
  .end-compare:has(.coat-won) > .end-break { display: none; } /* room for the reveal */
}