:root {
  --mint-1: #e2f8ea; --mint-2: #b3e8c6; --mint-3: #86d3a2;
  --ink: #3a2a22; --cream: #fff6e6; --sand: #f3cf94;
  --rock: #e07a3c; --rock-dark: #b25429; --orange: #f28c38;
  --green: #5cc16b; --blue: #3f7fe0; --red: #e8453c; --gold: #ffd23f;
  --chunky: 0 6px 0 var(--ink);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Baloo 2', system-ui, sans-serif; color: var(--ink); background: var(--mint-2);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; cursor: pointer; color: inherit; border: none; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: 16px; }
.hidden { display: none !important; }
.chunky-text {
  font-family: 'Lilita One', 'Baloo 2', sans-serif; color: #fff; letter-spacing: .5px; font-weight: normal;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 7px 0 var(--ink);
}
.abc { font-family: 'Andika', 'Baloo 2', sans-serif !important; }
.calm {
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 50% 30% at 85% 90%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(var(--mint-1), var(--mint-2) 55%, var(--mint-3));
}

/* ---------- coins: a drawn gold coin (the emoji looked like a moon) ---------- */
.coin {
  display: inline-block; position: relative; width: 1em; height: 1em; border-radius: 50%; vertical-align: -0.14em;
  background: radial-gradient(circle at 35% 30%, #fff7b8, #ffd23f 45%, #e8a100 80%);
  border: .08em solid #b87900; box-shadow: inset 0 -.07em 0 rgba(0,0,0,.18);
}
.coin::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .58em; line-height: 1; color: #c98a00; }
.coin.flying { position: fixed; z-index: 30; font-size: 36px; animation: coinFly .7s cubic-bezier(.45,0,.6,1) forwards; pointer-events: none; }
@keyframes coinFly {
  0% { transform: translate(0, 0) scale(.3); }
  25% { transform: translate(calc(var(--dx) * .1), calc(var(--dy) * .1 - 60px)) scale(1.25); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.7); }
}
.bank {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Lilita One', sans-serif; font-size: 26px;
  background: var(--cream); padding: 4px 16px 4px 10px; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
}
.bank .coin { font-size: 30px; }

/* ---------- shared buttons ---------- */
.row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 22px 0 10px; }
.big-btn {
  font-family: 'Lilita One', sans-serif; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .5px;
  padding: 10px 28px; border-radius: 999px; background: var(--green); color: #fff;
  border: 3px solid var(--ink); box-shadow: var(--chunky); text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.big-btn.alt { background: var(--orange); }
.big-btn.primary { font-size: clamp(30px, 5vw, 42px); padding: 14px 40px; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.08); } }
.big-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); animation: none; }
.round-btn {
  font-size: 24px; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.round-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.shop-btn.glow { background: #fff1a8; animation: nudge 1s ease-in-out infinite; }
.topbar { width: 100%; max-width: 900px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ---------- home ---------- */
.title { font-size: clamp(38px, 7.5vw, 72px); margin: 14px 0 4px; text-align: center; line-height: 1.05; }
.title .accent { color: var(--orange); }
.modes { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.mode {
  width: min(320px, 90vw); padding: 18px 14px 20px; border-radius: 28px; border: 4px solid var(--ink); box-shadow: 0 9px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--cream);
}
.mode:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--ink); }
.mode .big { font-size: 96px; line-height: 1.1; }
.mode .big.abc { font-size: 84px; color: var(--blue); letter-spacing: 4px; font-weight: 700; }
.mode .nm { font-family: 'Lilita One', sans-serif; font-size: 34px; }
.mode.es { background: linear-gradient(#fff6e6 0 72%, #ffe1a8 72%); }
.mode.en { background: linear-gradient(#fff6e6 0 72%, #cfe6ff 72%); }

/* ---------- level map ---------- */
.map-title { font-size: clamp(30px, 5vw, 48px); margin: 6px 0 0; text-align: center; }
.subtitle { font-size: clamp(16px, 2.6vw, 21px); margin: 6px 0 18px; font-weight: 800; text-align: center; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 16px; width: 100%; max-width: 900px; padding-bottom: 28px; }
.lvl {
  position: relative; border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--chunky); overflow: hidden;
  background: linear-gradient(var(--cream) 0 72%, var(--sand) 72% 78%, var(--rock) 78%);
  display: flex; flex-direction: column; align-items: center; padding: 6px 6px 4px; transition: transform .1s;
}
.lvl:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.lvl.next { animation: bob 1.3s ease-in-out infinite; border-color: #d98a00; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.lvl .num { font-family: 'Lilita One', sans-serif; font-size: 20px; line-height: 1; }
.lvl .thumb { width: 100%; height: 70px; }
.lvl .nm { font-family: 'Lilita One', sans-serif; font-size: 16px; line-height: 1.1; text-align: center; min-height: 2.2em; display: grid; place-items: center; }
.lvl .st { font-size: 16px; letter-spacing: 1px; margin-top: 6px; color: #fff; }
.lvl.locked { filter: saturate(.4) brightness(.97); }
.lvl.locked .thumb { opacity: .85; }
.lvl.locked .nm { opacity: .6; }
.lvl .lock { position: absolute; top: 2px; right: 4px; font-size: 30px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.shake { animation: shake .4s !important; }
@keyframes shake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* ---------- practice cards ---------- */
.learn-head h2 { font-size: clamp(28px, 5vw, 46px); margin: 4px 0 0; line-height: 1.1; text-align: center; }
.learn-head p { margin: 6px 0 16px; font-size: 19px; font-weight: 800; text-align: center; }
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; width: 100%; max-width: 900px; }
.word {
  background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--chunky);
  display: flex; flex-direction: column; align-items: center; padding: 10px 8px 12px; transition: transform .12s;
}
.word.playing { background: #fff1c2; transform: scale(1.06) rotate(-2deg); }
.word .pic { font-size: 72px; line-height: 1.15; }
.word .pic.letter { font-family: 'Andika', sans-serif; font-weight: 700; color: var(--blue); font-size: 84px; line-height: 1.1; }
.word .pic.letter.len2 { font-size: 64px; } .word .pic.letter.len3 { font-size: 52px; }
.word .es { font-family: 'Lilita One', sans-serif; font-size: 28px; color: var(--rock-dark); text-align: center; line-height: 1.1; }
.word .en { font-size: 16px; font-weight: 600; opacity: .6; }
.word .spk { font-size: 20px; }
.word.heard .spk::after { content: ' ✅'; }
.back { position: absolute; left: 16px; top: 14px; }

/* ---------- race ---------- */
#race { padding: 0; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; left: 0; right: 0; top: 0; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.progress { position: relative; flex: 1; height: 36px; background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); }
.progress .flag { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; }
.progress .mk { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: 'Lilita One', sans-serif; font-size: 13px; color: #fff; border: 3px solid var(--ink); }
.mk.you { background: var(--red); z-index: 2; }
.mk.cpu { background: var(--blue); font-size: 16px; }
.lvl-tag { font-family: 'Lilita One', sans-serif; font-size: 18px; background: var(--cream); padding: 5px 14px;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); flex: none; }
.gas { display: flex; align-items: center; gap: 6px; background: var(--cream); padding: 4px 10px 4px 8px;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); flex: none; font-size: 20px; }
.gas-bar { width: 90px; height: 16px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; overflow: hidden; }
#gasFill, #gasBigFill { height: 100%; width: 100%; background: var(--green); transition: background .3s; }
.gas.low { animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { background: #ffd0c9; } }
.count { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(90px, 22vw, 200px); pointer-events: none; }
.count.pop { animation: pop .9s ease-out; }
@keyframes pop { from { transform: scale(1.7); opacity: 0; } 20% { transform: scale(1); opacity: 1; } }

/* quiz + gas speech bubbles */
.ask-layer { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 76px 16px 16px; background: rgba(40,70,55,.18); }
.bubble {
  position: relative; background: var(--cream); border: 4px solid var(--ink); border-radius: 36px;
  padding: 14px 20px 20px; width: min(900px, 100%); box-shadow: 0 9px 0 var(--ink); text-align: center;
  animation: bubbleIn .35s cubic-bezier(.2,1.6,.4,1);
}
.bubble::before, .bubble::after { content: ''; position: absolute; left: 24%; border-style: solid; border-color: transparent; }
.bubble::before { bottom: -38px; border-width: 34px 18px 0 18px; border-top-color: var(--ink); margin-left: -4px; }
.bubble::after { bottom: -28px; border-width: 28px 14px 0 14px; border-top-color: var(--cream); }
@keyframes bubbleIn { from { transform: scale(.4); opacity: 0; } }
.q-line { font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.q-line > span { display: inline; }
.q-line .q-pic { vertical-align: middle; margin-right: 8px; }
.q-word { font-family: 'Lilita One', sans-serif; font-size: clamp(44px, 8vw, 76px); color: var(--rock); line-height: 1; }
.q-pic { font-size: clamp(56px, 9vw, 84px); line-height: 1; }
.q-say { background: var(--gold); }
.choices { display: flex; gap: 16px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.choice {
  background: #fdf0d8; border: 3px solid var(--ink); border-radius: 26px; box-shadow: var(--chunky);
  width: clamp(108px, 16vw, 156px); aspect-ratio: 1; font-size: clamp(58px, 9.5vw, 92px);
  display: grid; place-items: center; transition: transform .1s;
}
.choice.txt { font-family: 'Andika', sans-serif; font-weight: 700; color: var(--ink); line-height: 1; }
.choice.txt.len2 { font-size: clamp(48px, 7.5vw, 72px); }
.choice.txt.len3 { font-size: clamp(38px, 6vw, 58px); }
.choice:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.choice.right { background: #c9f2d3; animation: yay .5s; }
.choice.wrong { background: #ffd0c9; animation: shake .4s; }
.choice.faded { opacity: .35; }
.choice.yes { background: #c9f2d3; }
.choice.no { background: #ffd0c9; }
.choice.pulse { animation: nudge .5s ease-in-out infinite; }
@keyframes yay { 50% { transform: scale(1.2) rotate(-6deg); } }
.q-feedback { font-family: 'Lilita One', sans-serif; font-size: clamp(24px, 4vw, 34px); min-height: 1.3em; margin-top: 10px; }
.gas-bubble { width: min(460px, 100%); }
.gas-big { height: 30px; margin: 10px auto 0; width: 80%; border: 3px solid var(--ink); border-radius: 14px; background: #fff; overflow: hidden; }

/* ---------- reward: its own celebration screen ---------- */
#reward { justify-content: center; gap: 4px; text-align: center; }
#reward .burst {
  position: fixed; inset: -50%; z-index: -1; opacity: .35;
  background: repeating-conic-gradient(from 0deg, #fff 0 10deg, transparent 10deg 20deg);
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#rwBox { font-size: 34px; }
#rwBox.bump { animation: boxBump .25s; }
@keyframes boxBump { 50% { transform: scale(1.18); } }
#rwTitle { font-size: clamp(44px, 9vw, 84px); margin: 8px 0 0; line-height: 1.05; animation: bubbleIn .5s cubic-bezier(.2,1.6,.4,1); }
#rwCar { width: min(300px, 70vw); height: min(200px, 30vh); }
#rwCar:not(.sad) { animation: hop 0.9s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-12px) rotate(-3deg); } }
.stars { display: flex; gap: 14px; justify-content: center; }
.star { font-size: clamp(54px, 10vw, 80px); line-height: 1; filter: grayscale(1) opacity(.35); transition: filter .2s; }
.star.on { filter: none; animation: starPop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes starPop { from { transform: scale(2.2) rotate(-30deg); } }
#rwScore { font-size: 22px; font-weight: 800; }
#rwEarned { font-family: 'Lilita One', sans-serif; font-size: 40px; opacity: 0; }
#rwEarned.show { opacity: 1; animation: bubbleIn .4s cubic-bezier(.2,1.6,.4,1); }
.need, .unlock { font-family: 'Lilita One', sans-serif; font-size: 30px; background: var(--cream); padding: 6px 18px;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); animation: bubbleIn .4s cubic-bezier(.2,1.6,.4,1); }
.unlock { background: #fff1a8; }
#rwButtons { margin-top: 12px; }

/* ---------- car shop ---------- */
.sheets { display: flex; gap: 14px; margin: 2px 0 16px; }
.sheet-tab {
  position: relative; font-size: 32px; width: 76px; height: 60px; border-radius: 18px;
  background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.sheet-tab.on { background: #fff1a8; transform: translateY(-4px); box-shadow: 0 9px 0 var(--ink); }
.sheet-tab .tab-lock { position: absolute; right: -10px; top: -12px; font-size: 20px; }
.cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; width: 100%; max-width: 900px; padding-bottom: 28px; }
.car {
  background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--chunky);
  display: flex; flex-direction: column; align-items: center; padding: 8px 8px 12px; transition: transform .1s;
}
.car:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.car.selected { background: #dff5e3; border-color: #2f9e44; box-shadow: 0 6px 0 #2f9e44; }
.car.locked { background: #efe6d8; }
.car.can-buy { background: #fff1a8; animation: nudge 1s ease-in-out infinite; }
.car.pop { animation: starPop .6s cubic-bezier(.2,1.8,.4,1); }
.car-thumb { width: 100%; height: 120px; }
.car-name { font-family: 'Lilita One', sans-serif; font-size: 22px; }
.car-foot { min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; }
.buy-btn { font-family: 'Lilita One', sans-serif; font-size: 26px; color: #fff; background: var(--green); padding: 4px 18px;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.price { font-family: 'Lilita One', sans-serif; font-size: 20px; }
.save-bar { width: 130px; height: 14px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; overflow: hidden; margin-bottom: 2px; }
.save-bar > div { height: 100%; background: var(--gold); }

.confetti { position: fixed; top: -60px; font-size: 34px; pointer-events: none; animation: fall linear forwards; z-index: 40; }
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); } }

/* ---------- adaptive Spanish levels: quiz cards, obstacle picker, check-in quiz ---------- */
.lvl.quiz { background: linear-gradient(#fff6c2 0 72%, #ffd23f 72% 78%, #f2a20a 78%); }
.lvl .big-emoji { font-size: 50px; line-height: 70px; height: 70px; }
.lvl.mystery .big-emoji { opacity: .45; }
.word { position: relative; }
.word .tag { position: absolute; top: 6px; right: 8px; font-size: 18px; background: #fff1a8; border: 2px solid var(--ink); border-radius: 999px; padding: 0 6px; }
.pick-title { font-size: clamp(28px, 5vw, 46px); margin: 6px 0 16px; text-align: center; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; width: 100%; max-width: 900px; padding-bottom: 24px; }
.pick {
  background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--chunky);
  display: flex; flex-direction: column; align-items: center; padding: 6px 6px 8px; transition: transform .1s;
}
.pick:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.pick canvas { width: 100%; height: 76px; }
.pick .nm { font-family: 'Lilita One', sans-serif; font-size: 17px; }
.pick.invent { background: #fff1a8; animation: nudge 1.2s ease-in-out infinite; }
.pick.emoji { font-size: 58px; line-height: 1.2; padding: 10px 0; }
.ck-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; flex: 1; }
.ck-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; transition: transform .2s; }
.ck-dot.now { background: var(--gold); transform: scale(1.35); }
.ck-dot.ok { background: var(--green); }
.ck-dot.miss { background: var(--red); }
.ck-intro, .ck-done { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; text-align: center; }
.ck-intro h1, .ck-done h1 { font-size: clamp(40px, 8vw, 72px); margin: 0; }
.ck-sub { font-size: 22px; font-weight: 800; margin: 0; }
.ck-trophy { font-size: 110px; line-height: 1; animation: hop .9s ease-in-out infinite; }
.ck-ask { margin-top: 30px; }
.ck-ask::before, .ck-ask::after { display: none; }
.ck-row { display: flex; align-items: center; gap: 12px; background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; padding: 6px 16px; box-shadow: 0 4px 0 var(--ink); }
.ck-label { font-size: 34px; }
.ck-pics { font-size: 44px; letter-spacing: 6px; }
.ck-parent { font-size: 14px; opacity: .7; max-width: 640px; margin-top: 18px; }

@media (max-width: 600px) {
  .gas-bar { width: 56px; }
  .lvl-tag { display: none; }
  .bubble { padding: 12px 10px 16px; border-radius: 26px; }
  .choices { gap: 10px; }
  .choice { width: 92px; font-size: 52px; border-radius: 20px; }
  .choice.txt.len2 { font-size: 40px; } .choice.txt.len3 { font-size: 32px; }
  .levels { grid-template-columns: repeat(2, 1fr); }
  .cars { grid-template-columns: repeat(2, 1fr); }
  .mode .big { font-size: 72px; }
}