:root {
  --ink: #2b2350;
  --ink-soft: #5b5480;
  --card: #ffffff;
  --sky-top: #7fd3ff;
  --sky-bottom: #c9f0ff;
  --grass: #7ed957;
  --play: #3ecf6e;
  --play-dark: #23a24e;
  --alt: #ffb340;
  --alt-dark: #d9861a;
  --hint: #ffd23f;
  --asphalt: #3d4a6e;
  --asphalt-tile: #46557d;
  --frame: #ffc93c;
  --frame-dark: #e29b14;
  --exit: #3ecf6e;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(43, 35, 80, 0.18);
  font-family: "Fredoka", "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: clip; }
body {
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 70%, var(--grass) 70.2%, #64c444);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, .car:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

/* ---------- sky ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cloud {
  position: absolute; width: 120px; height: 40px; background: #fff; border-radius: 40px; opacity: 0.85;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 60px; height: 60px; left: 15px; top: -28px; }
.cloud::after { width: 46px; height: 46px; left: 60px; top: -18px; }
.c1 { top: 8%; animation-duration: 55s; }
.c2 { top: 22%; transform: scale(0.7); animation-duration: 75s; animation-delay: -30s; }
.c3 { top: 40%; transform: scale(1.2); animation-duration: 95s; animation-delay: -60s; }
@keyframes drift { from { left: -160px; } to { left: 110%; } }

/* ---------- screens ---------- */
.screen {
  position: relative; z-index: 1;
  display: none;
  max-width: 560px; margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  overflow-x: clip;
}
.screen.active { display: block; animation: screenIn 0.35s cubic-bezier(.2,1.4,.4,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

/* ---------- logo ---------- */
.logo { text-align: center; margin: 8px 0 4px; }
.logo h1 {
  margin: 0; line-height: 0.95; font-size: clamp(38px, 11vw, 58px); font-weight: 700;
  color: #fff; letter-spacing: 1px;
  text-shadow: 0 4px 0 #ff5d73, 0 8px 0 var(--ink);
}
.logo h1 span { display: block; }
.logo h1 span:last-child { color: #ffe14d; transform: rotate(-3deg); }
.logo-car { font-size: 44px; display: inline-block; animation: logoDrive 3.5s ease-in-out infinite; }
@keyframes logoDrive {
  0%, 100% { transform: translateX(-60px) scaleX(-1); }
  45% { transform: translateX(60px) scaleX(-1); }
  50% { transform: translateX(60px) scaleX(1); }
  95% { transform: translateX(-60px) scaleX(1); }
}

/* ---------- mascot (Blinky the traffic light) ---------- */
.mascot-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.mascot-row.game { margin: 6px 0 10px; min-height: 64px; }
.mascot {
  --s: 1;
  flex: none; width: calc(54px * var(--s)); height: calc(96px * var(--s));
  background: #2f2a4a; border-radius: calc(18px * var(--s)); position: relative;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.3), var(--shadow);
  animation: mascotBob 2.2s ease-in-out infinite;
  transform-origin: bottom center;
}
.mascot.small { --s: 0.68; }
.mascot .l {
  position: absolute; left: 50%; width: calc(20px * var(--s)); height: calc(20px * var(--s)); margin-left: calc(-10px * var(--s));
  border-radius: 50%; background: #4b4466; transition: background 0.3s, box-shadow 0.3s;
}
.mascot .l.r { top: calc(7px * var(--s)); }
.mascot .l.y { top: calc(30px * var(--s)); }
.mascot .l.g { top: calc(53px * var(--s)); }
.mascot[data-mood="oops"] .l.r { background: #ff5d73; box-shadow: 0 0 14px #ff5d73; }
.mascot[data-mood="think"] .l.y { background: #ffd23f; box-shadow: 0 0 14px #ffd23f; }
.mascot[data-mood="happy"] .l.g, .mascot[data-mood="party"] .l { background: #3ecf6e; box-shadow: 0 0 14px #3ecf6e; }
.mascot[data-mood="party"] .l.r { background: #ff5d73; box-shadow: 0 0 14px #ff5d73; }
.mascot[data-mood="party"] .l.y { background: #ffd23f; box-shadow: 0 0 14px #ffd23f; }
.mascot[data-mood="party"] { animation: mascotParty 0.5s ease-in-out infinite; }
.mascot .mface {
  position: absolute; left: 50%; bottom: calc(-6px * var(--s)); transform: translateX(-50%);
  width: calc(46px * var(--s)); height: calc(26px * var(--s)); background: #ffe7b8; border-radius: 40%;
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.mascot .mface i {
  position: absolute; top: calc(5px * var(--s)); width: calc(8px * var(--s)); height: calc(9px * var(--s));
  background: var(--ink); border-radius: 50%; animation: blink 4s infinite;
}
.mascot .mface i:first-child { left: calc(10px * var(--s)); }
.mascot .mface i:nth-child(2) { right: calc(10px * var(--s)); }
.mascot .mface u {
  position: absolute; left: 50%; bottom: calc(4px * var(--s)); width: calc(14px * var(--s)); height: calc(7px * var(--s));
  margin-left: calc(-7px * var(--s)); border: calc(3px * var(--s)) solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px;
}
.mascot[data-mood="oops"] .mface u { height: calc(9px * var(--s)); width: calc(9px * var(--s)); margin-left: calc(-4.5px * var(--s)); border: calc(3px * var(--s)) solid var(--ink); border-radius: 50%; }
@keyframes mascotBob { 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes mascotParty { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-8px); } }

.bubble {
  position: relative; background: #fff; border-radius: 18px; padding: 10px 14px;
  font-size: 18px; font-weight: 500; box-shadow: var(--shadow); flex: 1; line-height: 1.25;
}
.bubble::before {
  content: ""; position: absolute; left: -10px; top: 50%; margin-top: -10px;
  border: 10px solid transparent; border-right-color: #fff; border-left: 0;
}
.bubble.pop { animation: bubblePop 0.35s cubic-bezier(.2,1.8,.4,1); }
@keyframes bubblePop { from { transform: scale(0.85); } }

/* ---------- chips & week ---------- */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 8px; }
.chip {
  background: #fff; border-radius: 18px; padding: 8px 6px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.chip-icon { font-size: 26px; }
.chip b { font-size: 24px; }
.chip small { color: var(--ink-soft); font-size: 13px; }
.chip.flame.lit .chip-icon { animation: flicker 0.8s ease-in-out infinite alternate; display: inline-block; }
@keyframes flicker { to { transform: scale(1.18) rotate(6deg); } }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.day {
  background: rgba(255,255,255,.7); border-radius: 14px; padding: 4px 0 6px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
}
.day .dot { display: block; font-size: 20px; height: 26px; line-height: 26px; }
.day.today { outline: 3px solid #fff; background: #fff; color: var(--ink); }
.streak-note { text-align: center; margin: 8px 0 4px; font-weight: 500; min-height: 1.2em; }

/* ---------- buttons ---------- */
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
  padding: 14px 18px; border-radius: 24px; font-size: 22px; font-weight: 700; color: #fff;
  background: var(--play); box-shadow: 0 7px 0 var(--play-dark); margin: 14px 0 18px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--play-dark); }
.big-btn.alt { background: var(--alt); box-shadow: 0 7px 0 var(--alt-dark); }
.big-btn.alt:active { box-shadow: 0 2px 0 var(--alt-dark); }
.big-btn.play { animation: wiggleIdle 3s ease-in-out infinite; }
.big-btn b { display: block; font-size: 30px; line-height: 1; }
.big-btn small { display: block; font-size: 15px; font-weight: 500; opacity: 0.9; }
.big-btn span:last-child { text-align: left; }
.big-btn-emoji {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 26px;
}
@keyframes wiggleIdle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-2deg) scale(1.03); } 94% { transform: rotate(2deg) scale(1.03); } 97% { transform: rotate(-1deg); } }

.card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 10px; font-size: 21px; }

.daily-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.daily-btn {
  border-radius: 18px; padding: 10px 4px 8px; color: #fff; font-weight: 600; font-size: 16px; line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative;
  transition: transform .1s;
}
.daily-btn:active { transform: scale(.95); }
.daily-btn .e { font-size: 28px; }
.daily-btn small { font-weight: 500; opacity: .9; font-size: 13px; }
.daily-btn.easy { background: #3ecf6e; box-shadow: 0 5px 0 #23a24e; }
.daily-btn.medium { background: #ffb340; box-shadow: 0 5px 0 #d9861a; }
.daily-btn.tricky { background: #ff5d73; box-shadow: 0 5px 0 #cc3a52; }
.daily-btn.done::after {
  content: "✔"; position: absolute; top: -8px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--play-dark); display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow);
}

.quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quest { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.quest .qe { font-size: 26px; text-align: center; }
.quest .qt { font-weight: 500; font-size: 16px; line-height: 1.2; }
.quest .bar { height: 12px; border-radius: 8px; background: #ece9f7; margin-top: 4px; overflow: hidden; }
.quest .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff9f43); border-radius: 8px; transition: width .6s; }
.quest .qn { font-weight: 600; color: var(--ink-soft); font-size: 15px; }
.quest.done .qt { text-decoration: line-through; color: var(--ink-soft); }
.quest.done .bar i { background: linear-gradient(90deg, #3ecf6e, #2ed3c6); }
.quest.done .qn { color: var(--play-dark); }

.home-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nav-btn {
  background: #fff; border-radius: 20px; padding: 10px 4px; font-weight: 600; font-size: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s;
}
.nav-btn span { font-size: 30px; }
.nav-btn:active { transform: translateY(4px); box-shadow: none; }
.toggles { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.toggle { background: rgba(255,255,255,.75); padding: 8px 14px; border-radius: 30px; font-weight: 500; }
.toggle[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.toggle.install { background: #fff; font-weight: 600; }
.toggle[hidden] { display: none; }

/* ---------- top bars ---------- */
.topbar { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.topbar h2 { margin: 0; font-size: 26px; color: #fff; text-shadow: 0 3px 0 var(--ink); text-align: center; }
.icon-btn {
  width: 52px; height: 52px; border-radius: 18px; background: #fff; font-size: 24px; box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.icon-btn:active { transform: translateY(4px); box-shadow: none; }
.mini-chip { background: #fff; border-radius: 16px; padding: 8px 12px; font-size: 18px; box-shadow: var(--shadow); min-width: 52px; text-align: center; }
.game-title { text-align: center; line-height: 1.05; }
.game-title small { color: #fff; font-weight: 600; text-shadow: 0 2px 0 var(--ink); font-size: 16px; }

/* ---------- map ---------- */
.world { border-radius: var(--radius); padding: 14px; margin-bottom: 16px; box-shadow: var(--shadow); background: #fff; position: relative; }
.world-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.world-head .we { font-size: 38px; }
.world-head h3 { margin: 0; font-size: 22px; }
.world-head small { color: var(--ink-soft); font-weight: 500; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lvl {
  aspect-ratio: 1; border-radius: 18px; font-size: 24px; font-weight: 700; color: #fff;
  background: var(--wc, #4aa3ff); box-shadow: 0 5px 0 rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  transition: transform .1s;
}
.lvl:active { transform: translateY(4px); box-shadow: none; }
.lvl .ls { font-size: 12px; letter-spacing: -1px; margin-top: 4px; min-height: 13px; }
.lvl.ouch { animation: nudge .4s; }
.lvl.locked { background: #d8d4e8; color: #a29cc0; box-shadow: 0 5px 0 #bdb7d6; }
.lvl.current { animation: pulse 1.4s ease-in-out infinite; outline: 4px solid #fff; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.world.locked .level-grid { filter: grayscale(1); opacity: .45; pointer-events: none; }
.world-lock {
  position: absolute; inset: 60px 14px 14px; display: grid; place-items: center; text-align: center;
  font-weight: 600; font-size: 18px; z-index: 2;
}
.world-lock div { background: #fff; padding: 10px 16px; border-radius: 16px; box-shadow: var(--shadow); }

/* ---------- game ---------- */
.game-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: #fff; border-radius: 16px; text-align: center; padding: 4px; box-shadow: var(--shadow); line-height: 1.1; }
.stat small { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.stat b { font-size: 24px; }
.stat.goal b::before { content: "🌟 "; font-size: 18px; }
.stat.bump b { animation: bumpNum .3s; display: inline-block; }
@keyframes bumpNum { 50% { transform: scale(1.4); color: #ff5d73; } }

.board-wrap {
  --size: min(calc(100vw - 32px), calc(100dvh - 330px), 520px);
  width: max(var(--size), 270px); margin: 0 auto; padding: 12px;
  background: repeating-linear-gradient(-45deg, var(--frame) 0 14px, #ffdf73 14px 28px);
  border-radius: 28px; box-shadow: 0 8px 0 var(--frame-dark), 0 14px 24px rgba(0,0,0,.18);
  position: relative;
}
.board {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px;
  background-color: var(--asphalt);
  background-image:
    radial-gradient(circle at center, var(--asphalt-tile) 0 62%, transparent 63%);
  background-size: calc(100% / 6) calc(100% / 6);
  touch-action: none;
}
.lane {
  position: absolute; left: 0; right: 0; top: calc(var(--cell) * 2); height: var(--cell);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 18px, transparent 18px 34px);
  background-size: 34px 4px; background-repeat: repeat-x; background-position: 0 50%;
  border-radius: 8px;
}
.exit {
  position: absolute; right: -12px; top: calc(var(--cell) * 2); height: var(--cell); width: 16px;
  background: var(--exit); display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-radius: 0 10px 10px 0; color: #fff; font-weight: 700; font-size: 18px; line-height: .6;
  box-shadow: 0 0 18px var(--exit);
}
.exit span { animation: chevron 1s infinite; }
.exit span:nth-child(2) { animation-delay: .15s; }
.exit span:nth-child(3) { animation-delay: .3s; }
@keyframes chevron { 50% { opacity: .2; } }
.exit-flag { position: absolute; right: -20px; top: calc(var(--cell) * 2 - 24px); font-size: 26px; transform: rotate(12deg); animation: flagWave 1.2s ease-in-out infinite; z-index: 3; }
@keyframes flagWave { 50% { transform: rotate(-6deg); } }

/* ---------- vehicles ---------- */
.car {
  position: absolute; left: calc(var(--x) * var(--cell)); top: calc(var(--y) * var(--cell));
  width: calc(var(--w) * var(--cell)); height: calc(var(--h) * var(--cell));
  padding: calc(var(--cell) * 0.07); z-index: 2; cursor: grab; touch-action: none;
  transition: left .18s cubic-bezier(.3,1.5,.5,1), top .18s cubic-bezier(.3,1.5,.5,1);
  outline-offset: -4px; border-radius: 22px;
}
.car.dragging { transition: none; z-index: 5; cursor: grabbing; }
.car.dragging .body { transform: scale(1.04); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), 0 10px 14px rgba(0,0,0,.35); }
.car .body {
  position: relative; width: 100%; height: 100%; border-radius: calc(var(--cell) * 0.24);
  background: var(--color);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.35), 0 5px 0 rgba(0,0,0,.3);
  transition: transform .15s, box-shadow .15s;
}
.car .roof {
  position: absolute; inset: 22%; border-radius: calc(var(--cell) * 0.14);
  background: rgba(255,255,255,.28);
}
.car.h .roof { inset: 20% 18%; }
.car.v .roof { inset: 18% 20%; }
.car .wheel { position: absolute; background: #221d38; border-radius: 4px; }
.car.h .wheel { width: 22%; max-width: calc(var(--cell) * .32); height: 9%; }
.car.v .wheel { height: 22%; max-height: calc(var(--cell) * .32); width: 9%; }
.car.h .wheel.a { top: -5%; left: 10%; } .car.h .wheel.b { top: -5%; right: 10%; }
.car.h .wheel.c { bottom: -5%; left: 10%; } .car.h .wheel.d { bottom: -5%; right: 10%; }
.car.v .wheel.a { left: -5%; top: 10%; } .car.v .wheel.b { left: -5%; bottom: 10%; }
.car.v .wheel.c { right: -5%; top: 10%; } .car.v .wheel.d { right: -5%; bottom: 10%; }

.face {
  position: absolute; width: calc(var(--cell) * .86); height: calc(var(--cell) * .86);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--cell) * .04);
}
.car.h .face { top: 0; bottom: 0; margin: auto 0; }
.car.v .face { left: 0; right: 0; margin: 0 auto; }
.car.h .face.start { left: 0; } .car.h .face.end { right: 0; }
.car.v .face.start { top: 0; } .car.v .face.end { bottom: 0; }
.eyes { display: flex; gap: calc(var(--cell) * .05); }
.eye {
  width: calc(var(--cell) * .26); height: calc(var(--cell) * .26); border-radius: 50%; background: #fff;
  position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.25); animation: blink 5s infinite; animation-delay: var(--blink, 0s);
  overflow: hidden;
}
.eye::after {
  content: ""; position: absolute; width: 48%; height: 48%; border-radius: 50%; background: #1d1833;
  left: 26%; top: 26%; transform: translate(var(--px, 0), var(--py, 0)); transition: transform .12s;
}
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.mouth {
  width: calc(var(--cell) * .2); height: calc(var(--cell) * .1); border: calc(var(--cell) * .04) solid #1d1833;
  border-top: 0; border-radius: 0 0 20px 20px; transition: all .15s;
}
.car.ouch .mouth { width: calc(var(--cell) * .14); height: calc(var(--cell) * .14); border-top: calc(var(--cell) * .04) solid #1d1833; border-radius: 50%; }
.car.ouch .body { animation: squish .35s; }
.car.hero.cheer .mouth { width: calc(var(--cell) * .3); height: calc(var(--cell) * .16); background: #ff7e9a; }
@keyframes squish { 30% { transform: scale(1.08, .9); } 60% { transform: scale(.95, 1.05); } }
.car.honk .body { animation: honkBounce .45s cubic-bezier(.3,2,.5,1); }
@keyframes honkBounce { 40% { transform: scale(1.12) rotate(-3deg); } 70% { transform: scale(.96) rotate(2deg); } }

.topper {
  position: absolute; font-size: calc(var(--cell) * .42); line-height: 1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%); animation: topperWobble 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
@keyframes topperWobble { 50% { transform: translate(-50%, -58%) rotate(8deg); } }

.car.hero .body { box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.35), 0 5px 0 rgba(0,0,0,.3), 0 0 0 3px #fff; }
.car.hero .stripe { position: absolute; left: 6%; right: 6%; top: 44%; height: 12%; background: rgba(255,255,255,.75); border-radius: 6px; }

.car.hint-glow .body { animation: hintGlow 0.8s ease-in-out infinite alternate; }
@keyframes hintGlow { to { box-shadow: 0 0 0 5px #ffd23f, 0 0 26px 8px #ffd23f; } }
.ghost {
  position: absolute; border: 4px dashed #ffd23f; border-radius: 20px; z-index: 1; pointer-events: none;
  left: calc(var(--x) * var(--cell) + 4px); top: calc(var(--y) * var(--cell) + 4px);
  width: calc(var(--w) * var(--cell) - 8px); height: calc(var(--h) * var(--cell) - 8px);
  background: rgba(255, 210, 63, .18); animation: ghostPulse 1s ease-in-out infinite;
}
@keyframes ghostPulse { 50% { opacity: .45; } }
.hint-hand {
  position: absolute; z-index: 8; font-size: calc(var(--cell) * .6); pointer-events: none;
  animation: handMove 1.4s ease-in-out infinite;
}
@keyframes handMove {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.say {
  position: absolute; z-index: 9; background: #fff; padding: 4px 10px; border-radius: 14px; font-weight: 700;
  font-size: 16px; white-space: nowrap; pointer-events: none; box-shadow: 0 3px 0 rgba(0,0,0,.2);
  transform: translate(-50%, -100%); animation: sayFloat 1.1s ease-out forwards;
}
@keyframes sayFloat {
  0% { transform: translate(-50%, -60%) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -110%) scale(1.1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1); opacity: 0; }
}
.puff { position: absolute; z-index: 1; pointer-events: none; font-size: calc(var(--cell) * .4); animation: puff .7s ease-out forwards; }
@keyframes puff { to { transform: translate(-30px, -10px) scale(1.8); opacity: 0; } }

.car.drive-off { transition: left .9s cubic-bezier(.6,-0.3,.6,1), opacity .3s .7s; opacity: 0; }

.game-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.act-btn {
  background: #fff; border-radius: 18px; padding: 8px 4px; font-weight: 600; font-size: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; transition: transform .1s;
}
.act-btn span { font-size: 26px; }
.act-btn:active { transform: translateY(4px); box-shadow: none; }
.act-btn:disabled { opacity: .45; }
.act-btn.hint { background: var(--hint); }
.act-btn.nudge { animation: nudge 0.6s ease-in-out 3; }
@keyframes nudge { 25% { transform: rotate(-8deg) scale(1.1); } 75% { transform: rotate(8deg) scale(1.1); } }

/* ---------- stickers & garage ---------- */
.sticker-grid, .garage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sticker, .ride {
  background: #fff; border-radius: 20px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.15;
}
.sticker .se { font-size: 44px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #fff4c7; border: 4px dashed #ffd23f; }
.sticker b, .ride b { font-size: 15px; }
.sticker small, .ride small { font-size: 12px; color: var(--ink-soft); }
.sticker.locked .se { filter: grayscale(1) brightness(1.4); opacity: .35; background: #eee; border-color: #ccc; }
.sticker.got .se { animation: stickerShine 3s ease-in-out infinite; border-style: solid; }
@keyframes stickerShine { 50% { transform: rotate(-6deg) scale(1.05); } }
.garage-intro { text-align: center; font-weight: 500; margin: 0 0 12px; background: rgba(255,255,255,.75); border-radius: 16px; padding: 8px; }
.ride { position: relative; transition: transform .1s; }
.ride .preview { width: 90px; height: 46px; position: relative; --cell: 45px; }
.ride .preview .car { position: relative; left: 0; top: 0; }
.ride.locked .preview { filter: grayscale(1); opacity: .4; }
.ride.selected { outline: 4px solid var(--play); }
.ride.selected::after { content: "✔"; position: absolute; top: -8px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--play); color: #fff; display: grid; place-items: center; }
.ride:active { transform: scale(.96); }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 20; background: rgba(43, 35, 80, .55); display: grid; place-items: center; padding: 16px;
  animation: fadeIn .25s;
}
.modal[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-card {
  background: #fff; border-radius: 30px; padding: 22px 18px 6px; width: min(420px, 100%); text-align: center; position: relative;
  box-shadow: 0 10px 0 rgba(0,0,0,.2); animation: cardIn .5s cubic-bezier(.2,1.6,.4,1); overflow: hidden;
  max-height: 100%; overflow-y: auto;
}
@keyframes cardIn { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
.win-burst {
  position: absolute; inset: -50%; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(#fff6cf 0 12deg, #fff 12deg 24deg); animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.modal-card > :not(.win-burst) { position: relative; z-index: 1; }
#win-title { margin: 0; font-size: clamp(32px, 9vw, 44px); color: #ff5d73; text-shadow: 0 4px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
.win-stars { display: flex; justify-content: center; gap: 6px; margin: 8px 0; height: 70px; align-items: flex-end; }
.wstar { font-size: 54px; opacity: 0; transform: scale(0); filter: grayscale(1) brightness(1.5); }
.wstar:nth-child(2) { font-size: 66px; }
.wstar.show { animation: starIn .5s cubic-bezier(.2,2,.4,1) forwards; }
.wstar.show.on { filter: none; }
@keyframes starIn { to { opacity: 1; transform: scale(1); } }
.win-msg { font-size: 19px; font-weight: 500; margin: 4px 0 12px; }
.win-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.win-stats div { background: #f3f0ff; border-radius: 14px; padding: 6px; }
.win-stats small { display: block; color: var(--ink-soft); font-size: 13px; }
.win-stats b { font-size: 22px; }
.win-extras { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.win-extras li { background: #fff4c7; border-radius: 12px; padding: 6px 10px; font-weight: 600; animation: cardIn .4s cubic-bezier(.2,1.6,.4,1) backwards; }
.win-buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.win-buttons .big-btn { font-size: 20px; margin: 16px 0 18px; }

/* ---------- toasts & fx ---------- */
.toasts { position: fixed; top: 12px; left: 0; right: 0; z-index: 30; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  background: #fff; border-radius: 20px; padding: 10px 16px; box-shadow: 0 6px 0 rgba(0,0,0,.2); font-weight: 600; font-size: 17px;
  display: flex; align-items: center; gap: 10px; max-width: 100%;
  animation: toastIn .5s cubic-bezier(.2,1.6,.4,1), toastOut .4s ease-in 3.2s forwards;
}
.toast .te { font-size: 34px; }
.toast small { display: block; font-weight: 500; color: var(--ink-soft); }
@keyframes toastIn { from { transform: translateY(-80px) scale(.6); } }
@keyframes toastOut { to { transform: translateY(-120px); opacity: 0; } }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}