@font-face { font-family: "Andika"; src: url("../assets/fonts/andika-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Andika"; src: url("../assets/fonts/andika-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Russo One"; src: url("../assets/fonts/russo-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }

[hidden] { display: none !important; }

:root {
  --sky-top: #6fc1ef;
  --sky-bottom: #cdeeff;
  --grass: #5fb85a;
  --grass-dark: #3f9a45;
  --asphalt: #3a3f4a;
  --asphalt-edge: #2a2e36;
  --lane: #f3eedf;
  --paper: #fffaf0;
  --ink: #1c2333;
  --ink-soft: #4a5468;
  --go: #23a050;
  --go-dark: #157a3a;
  --red: #c42a1f;
  --gold: #f6b81a;
  --gold-dark: #b9820a;
  --scrap: #b65f26;
  --scrap-dark: #874317;
  --sign: #ffffff;
  --plate: #ffd426;
  --focus: #1b6fd1;
  --shadow: 0 6px 14px rgba(20, 30, 50, .22), 0 2px 3px rgba(20, 30, 50, .18);
  --shadow-press: 0 2px 4px rgba(20, 30, 50, .25);
  --radius: 22px;
  --display: "Russo One", "Andika", sans-serif;
  --read: "Andika", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 70%);
  background-color: var(--sky-bottom);
  color: var(--ink);
  font-family: var(--read);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
::selection { background: var(--gold); color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.i { width: 1.2em; height: 1.2em; flex: none; }

#app { position: relative; height: 100dvh; width: 100vw; }
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.screen[data-active] { display: flex; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 12px; min-height: 56px; position: relative; z-index: 2; }
.topbar-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.logo {
  font-family: var(--display); font-weight: 400; margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem); letter-spacing: -.01em;
  color: var(--red); text-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.logo span { color: var(--ink); margin-left: .25em; }
.screen-title { font-family: var(--display); font-weight: 400; margin: 0; font-size: clamp(1.3rem, 3.4vw, 2rem); }
.coins {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper); border-radius: 999px; padding: 6px 14px 6px 8px;
  font-family: var(--display); font-size: 1.25rem; box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.topbar-right .coins { margin-left: 0; }
.coins .i { width: 1.6em; height: 1.6em; }
.coins.bump { animation: bump .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bump { 40% { transform: scale(1.18); } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  border: 0; border-radius: var(--radius); padding: 14px 26px; min-height: 60px;
  font-family: var(--display); font-size: 1.35rem; letter-spacing: .01em;
  box-shadow: var(--shadow); transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.btn .i { width: 1.3em; height: 1.3em; }
.btn-go { background: var(--go); color: #fff; }
.btn-big { font-size: clamp(1.7rem, 4.5vw, 2.4rem); padding: 18px 44px; min-height: 84px; }
.btn-soft { background: var(--paper); color: var(--ink); }
.btn-scrap { background: var(--scrap); color: #fff; }
.btn[disabled] { opacity: .45; box-shadow: none; transform: none; cursor: default; }
.icon-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 0; flex: none;
  display: grid; place-items: center; background: var(--paper); box-shadow: var(--shadow);
}
.icon-btn .i { width: 28px; height: 28px; }
.icon-btn:active { transform: translateY(2px); box-shadow: var(--shadow-press); }
.muted .waves { display: none; }

/* Garage */
.garage {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 64px);
  position: relative; z-index: 1; padding-bottom: 4vh;
}
.showroom { display: flex; flex-direction: column; align-items: center; }
.showroom .car-slot { width: clamp(220px, 44vw, 480px); }
.podium {
  width: 110%; height: 22px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,40,20,.35), transparent);
}
.home-actions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.scenery { position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none; }
.grass { position: absolute; inset: 0; background: linear-gradient(var(--grass), var(--grass-dark)); border-top: 6px solid #7fcf72; }
.car-slot svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Track picker */
.tabs { display: flex; gap: 8px; background: rgba(255,255,255,.45); padding: 6px; border-radius: 999px; }
.tab {
  border: 0; border-radius: 999px; padding: 10px 20px; min-height: 48px;
  font-family: var(--display); font-size: 1.1rem; background: transparent; color: var(--ink);
}
.tab[aria-selected="true"] { background: var(--paper); box-shadow: var(--shadow); }
.pick-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.lengths { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.length {
  border: 3px solid transparent; border-radius: 999px; padding: 8px 18px; min-height: 48px;
  background: rgba(255,255,255,.6); font-family: var(--display); font-size: 1rem;
}
.length[aria-checked="true"] { background: var(--paper); border-color: var(--ink); }
.length small { font-family: var(--read); font-size: .85rem; color: var(--ink-soft); margin-left: 4px; }
.surprise { margin-left: auto; }
.tracks {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
  padding: 14px 4px 24px; align-content: start;
}
.track {
  position: relative; border: 0; border-radius: var(--radius); background: var(--paper);
  box-shadow: var(--shadow); padding: 14px 10px 12px; min-height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.track:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.track .sound { font-family: var(--read); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--ink); }
.track .eg { font-size: 1.05rem; color: var(--ink-soft); }
.track .stars { display: flex; gap: 2px; color: #d7d2c4; margin-top: 4px; }
.track .stars .on { color: var(--gold); }
.track .stars .i { width: 22px; height: 22px; }
.track.suggested { outline: 4px solid var(--go); outline-offset: -4px; }
.track .tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--go); color: #fff; font-family: var(--display); font-size: .8rem;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.track.soon { background: rgba(255,255,255,.55); box-shadow: none; cursor: default; }
.track.soon .sound { color: var(--ink-soft); }
.track.soon .tag { background: var(--ink-soft); }

/* Race */
#race { padding-top: max(8px, env(safe-area-inset-top)); gap: 10px; }
.road {
  position: relative; height: clamp(120px, 33dvh, 220px); flex: none; overflow: hidden;
  border-radius: 18px; background: linear-gradient(#bfe6ff, #e6f6ff); box-shadow: var(--shadow);
}
.terrain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lane { position: absolute; inset: 0; }
.lane-rival { z-index: 1; }
.lane-me { z-index: 3; }
.finish {
  position: absolute; top: 6%; bottom: 0; right: 7%; width: 14px; z-index: 2;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 14px 14px;
  border: 2px solid #111; border-bottom: 0; box-shadow: 0 0 0 2px #fff;
}
.finish::before {
  content: ""; position: absolute; top: -2px; right: 12px; width: 46px; height: 28px; border: 2px solid #111;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 14px 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); animation: wave 1.5s ease-in-out infinite alternate; transform-origin: right center;
}
@keyframes wave { from { transform: skewY(3deg) scaleX(1); } to { transform: skewY(-5deg) scaleX(.94); } }
.racer {
  position: absolute; left: 0; top: 0; height: 30%; aspect-ratio: 290 / 88; will-change: transform;
  transform-origin: 55.3% 94.3%; transition: none;
}
.racer[data-racer="rival"] { height: 25%; }
.racer svg { height: 100%; width: auto; display: block; overflow: visible; }
  width: auto; border-radius: 999px; padding: 0 16px 0 12px; gap: 6px; display: flex; opacity: 1;
  background: var(--scrap); color: #fff; font-family: var(--display); font-size: 1.05rem;
}
.racer.moving::before {
  content: ""; position: absolute; right: 100%; top: 30%; width: 60%; height: 40%;
  background: repeating-linear-gradient(transparent 0 5px, rgba(255,255,255,.7) 5px 8px);
  mask-image: linear-gradient(90deg, transparent, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
}
.spokes { transform-box: fill-box; transform-origin: center; }
.racer.moving .spokes { animation: spin var(--spin, .3s) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flame { opacity: 0; transition: opacity .15s; }
.racer.moving .flame { opacity: 1; animation: flicker .12s steps(2) infinite; }
@keyframes flicker { 50% { opacity: .6; } }
.pic.hint { animation: glow 1.1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 8px rgba(35,160,80,.45), var(--shadow); transform: scale(1.04); } }

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 3dvh, 24px); }
.sign {
  background: var(--sign); border: 5px solid var(--ink); border-radius: 18px;
  padding: clamp(6px, 1.6dvh, 14px) clamp(28px, 5vw, 56px); box-shadow: var(--shadow);
  font-family: var(--read); font-weight: 700; font-size: clamp(2.4rem, 11dvh, 5rem); line-height: 1.15;
  min-width: 40%; text-align: center; color: var(--ink);
}
.plate {
  background: var(--plate); border: 4px solid var(--ink); border-radius: 12px;
  padding: clamp(6px, 1.6dvh, 14px) clamp(28px, 5vw, 56px); box-shadow: var(--shadow);
  font-family: var(--read); font-weight: 700; font-size: clamp(2.4rem, 11dvh, 5rem); line-height: 1.15;
  text-align: center; letter-spacing: .03em; min-width: 40%;
}
.prompt { font-family: var(--display); font-size: clamp(1rem, 3.4dvh, 1.4rem); color: var(--ink); margin: 0; }
.answers { display: flex; gap: clamp(12px, 3vw, 32px); justify-content: center; align-items: center; width: 100%; }
.pic {
  border: 0; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  width: min(200px, 24vw, 30vh); height: min(200px, 24vw, 30vh); min-width: 96px; min-height: 96px;
  padding: 0; flex: none; display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease-out, opacity .3s ease-out;
}
.pic img { display: block; width: 72%; height: 72%; pointer-events: none; }
.pic:active { transform: translateY(3px) scale(.98); box-shadow: var(--shadow-press); }
.pic.wrong { opacity: .3; animation: wobble .4s ease-out; pointer-events: none; }
.pic.right { outline: 6px solid var(--go); animation: pop .45s cubic-bezier(.2,.9,.3,1.4); }
.choice { min-width: clamp(150px, 26vw, 260px); min-height: clamp(64px, 14dvh, 96px); font-size: clamp(1.3rem, 4dvh, 1.8rem); }
.choice.right { outline: 6px solid var(--gold); }
.reveal { font-family: var(--display); font-size: clamp(1.1rem, 3.6dvh, 1.5rem); min-height: 1.6em; margin: 0; text-align: center; }
.reveal.good { color: var(--go-dark); }
.reveal.oops { color: var(--scrap-dark); }
@keyframes wobble { 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
@keyframes pop { 50% { transform: scale(1.08); } }
.shake { animation: wobble .4s ease-out; }

/* Start lights */
.lights-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.intro { font-family: var(--display); font-size: clamp(1.2rem, 4.2dvh, 1.8rem); text-align: center; margin: 0; max-width: 28ch; }
.lights { display: flex; gap: 14px; background: var(--ink); padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow); }
.light { width: clamp(34px, 8dvh, 54px); aspect-ratio: 1; border-radius: 50%; background: #3a2222; transition: background .1s, box-shadow .2s; }
.light.red { background: #ff3b30; box-shadow: 0 0 18px 2px rgba(255,59,48,.7); }
.lights.go .light { background: #2ee86a; box-shadow: 0 0 22px 4px rgba(46,232,106,.75); }

/* Results */
#results { align-items: center; justify-content: center; }
.results-card {
  background: var(--paper); border-radius: 28px; box-shadow: var(--shadow);
  padding: clamp(16px, 4dvh, 32px) clamp(20px, 5vw, 48px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2dvh, 16px);
  max-width: 640px; width: 100%;
}
.results-card h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: clamp(1.8rem, 7dvh, 2.8rem); }
.results-card p { margin: 0; font-size: 1.2rem; color: var(--ink-soft); }
.big-stars { display: flex; gap: 10px; color: #ddd7c8; }
.big-stars .i { width: clamp(48px, 13dvh, 76px); height: clamp(48px, 13dvh, 76px); }
.big-stars .on { color: var(--gold); animation: starIn .6s cubic-bezier(.2,.9,.3,1.5) backwards; }
.big-stars .on:nth-child(2) { animation-delay: .25s; } .big-stars .on:nth-child(3) { animation-delay: .5s; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } }
.earned { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.5rem; }
.earned .i { width: 1.5em; height: 1.5em; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Garage shop */
.shop-body { flex: 1; min-height: 0; display: flex; gap: clamp(12px, 3vw, 32px); padding-top: 8px; }
.shop-stage { flex: 1 1 46%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.shop-stage .car-slot { width: 100%; max-width: 520px; }
.shop-bar { min-height: 64px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; text-align: center; }
.shop-hint { margin: 0; font-size: 1.15rem; color: var(--ink-soft); }
.shop-hint b { font-family: var(--display); color: var(--ink); }
.shop-side { flex: 1 1 54%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-tabs { overflow-x: auto; scrollbar-width: none; border-radius: 20px; flex: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs .tab { white-space: nowrap; flex: none; }
.parts { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); grid-auto-rows: max-content; gap: 10px; padding: 4px 4px 16px; align-content: start; }
.part {
  border: 4px solid transparent; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow);
  padding: 8px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 120px;
}
.part:active { transform: translateY(2px); box-shadow: var(--shadow-press); }
.part .thumb { width: 100%; display: block; }
.part .thumb svg { width: 100%; height: auto; display: block; }
.part .thumb.round { width: 64px; }
.part .name { font-size: 1.05rem; font-weight: 700; line-height: 1.15; text-align: center; }
.part .price { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: .92rem; color: var(--ink-soft); }
.part .price .i { width: 1.2em; height: 1.2em; }
.part.fitted { border-color: var(--go); }
.part.fitted .price { color: var(--go-dark); }
.part.trying { border-color: var(--gold); }
.part.locked .thumb { opacity: .8; }
.car-tap { border: 0; background: none; padding: 0; cursor: pointer; }
.car-slot.pop svg { animation: carPop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes carPop { 30% { transform: translateY(-6px) rotate(-1.2deg); } 60% { transform: translateY(1px); } }

/* Phones held sideways are short: tighten everything. */
@media (max-height: 430px) {
  .topbar { min-height: 48px; }
  .icon-btn { width: 48px; height: 48px; }
  .btn { min-height: 52px; padding: 10px 20px; font-size: 1.15rem; }
  .btn-big { min-height: 68px; font-size: 1.6rem; }
  .tracks { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .track { min-height: 108px; padding: 10px 8px; }
  .track .sound { font-size: 1.8rem; }
  .sign, .plate { border-width: 4px; font-size: clamp(3.2rem, 16vh, 4.4rem); padding: 2px 40px; }
  .prompt { display: none; }
  .road { height: 128px; }
  .stage { gap: 10px; }
  .pic { width: min(150px, 22vw, 34vh); height: min(150px, 22vw, 34vh); }
  .parts { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .part { min-height: 100px; }
  .shop-bar { min-height: 52px; }
}
/* Portrait (only in a browser: the app is locked to landscape). */
@media (orientation: portrait) {
  .garage, .shop-body { flex-direction: column; justify-content: center; }
  .showroom .car-slot { width: min(86vw, 420px); }
  .shop-stage { flex: none; }
  .shop-side { flex: 1; min-height: 0; }
  .answers { flex-wrap: wrap; }
  .tabs .tab { padding: 8px 12px; font-size: 1rem; }
}
/* Calm mode (grown-ups' screen) */
body.calm *, body.calm *::before, body.calm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }


/* Nitro and streaks */
.nitro {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  width: clamp(76px, 15dvh, 100px); aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--ink);
  background: conic-gradient(#ff8a1f calc(var(--fill, 0) * 360deg), #3a3f4a 0);
  display: grid; place-items: center; z-index: 3; box-shadow: var(--shadow); padding: 0;
  transition: transform .15s ease-out;
}
.nitro-fill { position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); }
.nitro-label { position: relative; font-family: var(--display); color: #8a93a6; font-size: clamp(.8rem, 2.6dvh, 1rem); letter-spacing: .04em; }
.nitro[disabled] { opacity: 1; cursor: default; }
.nitro.ready { animation: nitroReady .9s ease-in-out infinite; }
.nitro.ready .nitro-fill { background: radial-gradient(circle at 40% 35%, #ffb347, #ff6a00); }
.nitro.ready .nitro-label { color: #fff; }
.nitro.ready:active { transform: scale(.94); }
@keyframes nitroReady { 50% { box-shadow: 0 0 0 10px rgba(255,138,31,.35), var(--shadow); } }
.streak {
  position: absolute; right: max(16px, env(safe-area-inset-right)); top: calc(clamp(120px, 33dvh, 220px) + 18px);
  margin: 0; font-family: var(--display); font-size: clamp(1rem, 3.6dvh, 1.4rem); color: var(--red); opacity: 0;
  transition: opacity .2s; pointer-events: none;
}
.streak.hot { opacity: 1; animation: pop .4s cubic-bezier(.2,.9,.3,1.4); }
.racer.boost .flame { opacity: 1; transform: scaleX(1.8); transform-origin: 6px 77px; }
.road::before {
  content: ""; position: absolute; inset: 0 -220px 0 0; z-index: 1; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.5) 70px 110px) 0 30% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.5) 60px 110px) 0 78% / 100% 2px no-repeat;
  will-change: transform, opacity; transition: opacity .2s;
}
/* Speed lines move with transform only, so firing nitro never repaints the track. */
.road.boosting::before { opacity: 1; animation: streaks .3s linear infinite; }
@media (max-height: 430px) {
  .streak { top: 146px; }
}

@keyframes streaks { to { transform: translateX(-110px); } }

/* Pit Stop Spelling tyres */
.spell-pic { width: clamp(64px, 16dvh, 110px); height: auto; }
.tyre {
  width: clamp(120px, min(22vw, 26dvh), 170px); aspect-ratio: 1; border-radius: 50%; padding: 0; flex: none;
  border: clamp(12px, 3dvh, 18px) solid #1d2027; background: radial-gradient(circle, #f4f5f7 0 52%, #c9ced8 53% 60%, #f4f5f7 61%);
  box-shadow: var(--shadow), inset 0 0 0 3px #3a3f4a; display: grid; place-items: center;
  font-family: var(--read); font-weight: 700; font-size: clamp(1.3rem, 5dvh, 2rem); color: var(--ink);
  transition: transform .15s ease-out, opacity .3s ease-out;
}
.tyres.long .tyre { font-size: clamp(1rem, 3.6dvh, 1.45rem); }
.tyre span { background: rgba(255,255,255,.9); padding: 0 6px; border-radius: 8px; }
.tyre:active { transform: scale(.96) rotate(-8deg); }
.tyre.wrong { opacity: .3; animation: wobble .4s ease-out; pointer-events: none; }
.tyre.right { border-color: var(--go); animation: pop .45s cubic-bezier(.2,.9,.3,1.4); }
.tyre.hint { animation: glow 1.1s ease-in-out infinite; }
@media (max-height: 430px) { .spell-pic { display: none; } }

/* Results extras */
.treat {
  display: inline-flex; align-items: center; gap: 8px; border: 3px dashed var(--gold-dark); background: #fff4cc;
  border-radius: 999px; padding: 8px 18px; min-height: 48px; font-family: var(--display); font-size: 1.05rem; color: var(--ink);
}
.treat .i { width: 1.3em; height: 1.3em; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -16px; width: 10px; height: 14px; border-radius: 2px; background: var(--c); animation: fall cubic-bezier(.3, .1, .6, 1) forwards; }
.confetti i.round { border-radius: 50%; width: 11px; height: 11px; }
.confetti i.strip { width: 6px; height: 18px; }
.confetti i.star { width: 14px; height: 14px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes fall {
  30% { transform: translate(var(--sway), 30dvh) rotate(calc(var(--spin) * .3)); }
  65% { transform: translate(calc(var(--sway) * -1), 70dvh) rotate(calc(var(--spin) * .7)); }
  100% { transform: translate(var(--sway), 112dvh) rotate(var(--spin)); }
}
.results-card .bonus { font-family: var(--display); font-size: 1rem; color: var(--go-dark); }

/* Grown-ups gate and progress screen */
.grownup { position: relative; overflow: hidden; }
.grownup::after { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: rgba(35,160,80,.35); }
.grownup.holding::after { height: 100%; transition: height 2s linear; }
.topbar-right { position: relative; }
.hold-tip {
  position: absolute; top: 64px; right: 0; white-space: nowrap; background: var(--ink); color: #fff;
  font-size: .95rem; padding: 6px 12px; border-radius: 10px; z-index: 5;
}
.parent-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 4px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 860px; width: 100%; margin: 0 auto; user-select: text; -webkit-user-select: text; }
.parent-body .lead { font-size: clamp(1.15rem, 2.6vw, 1.4rem); margin: 0; line-height: 1.4; max-width: 60ch; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.figures div { background: var(--paper); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.figures b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.figures span { color: var(--ink-soft); font-size: .95rem; }
.panel { background: var(--paper); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow); }
.panel h3, .panel summary { font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: 0 0 6px; cursor: pointer; }
.panel h4 { margin: 12px 0 6px; font-size: 1rem; }
.panel h4 small { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.panel .note { margin: 4px 0 8px; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; max-width: 70ch; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: 1rem; border: 2px solid transparent; }
.chip.good, .key.good { background: #d8f2df; color: #145c2c; }
.chip.ok, .key.ok { background: #fff0c2; color: #6b4a00; }
.chip.low, .key.low { background: #fde0dc; color: #8f1d14; }
.chip.new, .key.new { background: #eceae4; color: #5b6170; }
.key { font-size: .85rem; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.chip.word { background: #eef4fb; color: var(--ink); display: inline-flex; gap: 6px; align-items: baseline; }
.chip.word small { font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.races { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.races th { text-align: left; color: var(--ink-soft); font-weight: 400; padding: 4px 6px; }
.races td { padding: 5px 6px; border-top: 1px solid #ebe5d6; }
.panel .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Progress colours also carry a symbol, so they don't rely on colour alone. */
.chip.good::before, .key.good::before { content: "✓ "; font-weight: 700; }
.chip.ok::before, .key.ok::before { content: "~ "; font-weight: 700; }
.chip.low::before, .key.low::before { content: "! "; font-weight: 700; }
.btn-danger { color: #8f1d14; border: 2px solid #e2392c; }
.reset-warn { flex-basis: 100%; color: #8f1d14 !important; }

/* How he's getting on */
.panel h4 { margin: 12px 0 6px; }
.mixups { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; }
.mixups small { color: var(--ink-soft); }
.btn[data-action="test-race"][aria-pressed="true"] { background: var(--go); color: #fff; }

.name-row { align-items: center; }
.name-input { min-height: 48px; min-width: 0; flex: 1; max-width: 320px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 14px; font: 700 1.2rem var(--read); background: #fff; }

/* Weekly report: a plain white page, easy to read in a screenshot */
.report { width: min(760px, 94vw); max-height: 92dvh; overflow-y: auto; padding: 20px 24px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.report h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; }
.report h4 { margin: 14px 0 4px; }
.report p { margin: 0; line-height: 1.5; }
.report .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.report .btn { margin-top: 14px; }
.fullscreen-btn span { font-size: 1.4rem; line-height: 1; }