:root {
  color-scheme: light;
  --bg: #fff7ed;
  --ink: #172033;
  --muted: #64748b;
  --sky: #38bdf8;
  --sky-dark: #0284c7;
  --lime: #bef264;
  --rose: #fb7185;
  --amber: #fbbf24;
  --purple: #c084fc;
  --card: rgba(255,255,255,0.88);
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, #bae6fd 0 28%, transparent 29%),
    radial-gradient(circle at bottom right, #fed7aa 0 30%, transparent 31%),
    var(--bg);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button, select, input { font: inherit; }
button { cursor: pointer; border: 0; }

.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px 28px;
}

.topbar {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 4.2rem); line-height: 0.95; }
h2 { font-size: clamp(1.6rem, 4vw, 3.4rem); line-height: 1.02; }
.eyebrow { color: var(--sky-dark); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; margin-bottom: 6px; }
.muted { color: var(--muted); }
.hidden { visibility: hidden; }

.back-button, .parent-button, .round-button, .secondary-action, .danger-action {
  min-height: 56px;
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 900;
  box-shadow: var(--shadow);
}

.back-button { width: 64px; font-size: 2rem; background: #fff; }
.parent-button { background: #1f2937; color: #fff; }
.round-button { width: 76px; height: 76px; font-size: 1rem; background: #fff; padding: 0; }
.secondary-action { background: var(--ink); color: #fff; font-size: 1.2rem; }
.danger-action { background: #fee2e2; color: #991b1b; }

.hero-card, .prompt-card, .parent-panel {
  background: var(--card);
  border: 5px solid rgba(255,255,255,0.95);
  border-radius: 36px;
  box-shadow: var(--shadow);
}

.hero-card {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 4vw, 42px);
  margin-bottom: 18px;
}
.hero-card p { font-size: clamp(1rem, 2vw, 1.45rem); color: var(--muted); margin-top: 12px; }
.hero-monster {
  height: 170px;
  border-radius: 42% 42% 34% 34%;
  background: linear-gradient(160deg, #86efac, #22c55e);
  position: relative;
  box-shadow: inset 0 -18px 0 rgba(0,0,0,0.08);
}
.hero-monster .eye { position: absolute; top: 48px; width: 32px; height: 32px; background: #111827; border-radius: 50%; }
.hero-monster .eye:first-child { left: 48px; }
.hero-monster .eye:nth-child(2) { right: 48px; }
.hero-monster .mouth { position: absolute; left: 48px; right: 48px; bottom: 42px; height: 28px; background: #111827; border-radius: 0 0 50px 50px; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.game-card {
  min-height: 260px;
  border-radius: 36px;
  padding: 24px;
  color: #111827;
  text-align: left;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .15s ease;
}
.game-card:active, .choice:active, .apple:active { transform: scale(0.96); }
.monster-card { background: linear-gradient(160deg, #bbf7d0, #4ade80); }
.car-card { background: linear-gradient(160deg, #bfdbfe, #60a5fa); }
.treasure-card { background: linear-gradient(160deg, #fde68a, #f59e0b); }
.game-icon { width: 96px; height: 76px; position: relative; display: block; }
.monster-mini { border-radius: 42% 42% 34% 34%; background: #7c3aed; box-shadow: inset 0 -10px 0 rgba(0,0,0,.12); }
.monster-mini i { position: absolute; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px #111827; }
.monster-mini i:first-child { left: 26px; }
.monster-mini i:nth-child(2) { right: 26px; }
.car-mini { height: 54px; margin-top: 20px; border-radius: 28px 38px 18px 18px; background: #ef4444; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.car-mini i, .car-mini b { position: absolute; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: #111827; border: 6px solid #e5e7eb; }
.car-mini i { left: 14px; }
.car-mini b { right: 14px; }
.box-mini { height: 72px; margin-top: 8px; border-radius: 16px; background: linear-gradient(160deg, #fcd34d, #d97706); border: 5px solid #fff7ed; }
.box-mini i { position: absolute; left: 0; right: 0; top: 31px; height: 8px; background: rgba(120,53,15,.35); }
.game-name { font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 1000; line-height: 1; }
.game-desc { font-size: 1.08rem; font-weight: 800; opacity: .78; }

.play-area { display: grid; gap: 18px; }
.prompt-card {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.game-stage {
  min-height: 420px;
  border-radius: 38px;
  background: rgba(255,255,255,.48);
  border: 4px dashed rgba(14, 116, 144, .25);
  padding: 20px;
  overflow: hidden;
}
.feedback {
  min-height: 62px;
  padding: 16px 20px;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 1000;
  text-align: center;
}
.game-actions { display: flex; justify-content: center; }

.monster-stage { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; height: 100%; }
.big-monster {
  height: 300px;
  border-radius: 46% 46% 36% 36%;
  background: linear-gradient(170deg, #a78bfa, #7c3aed);
  position: relative;
  box-shadow: inset 0 -22px 0 rgba(0,0,0,.12), var(--shadow);
}
.big-monster::before, .big-monster::after { content: ''; position: absolute; top: 78px; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 14px #111827; }
.big-monster::before { left: 70px; }
.big-monster::after { right: 70px; }
.monster-mouth { position: absolute; left: 64px; right: 64px; bottom: 72px; height: 56px; background: #111827; border-radius: 0 0 80px 80px; }
.count-bubble { position: absolute; left: 50%; transform: translateX(-50%); bottom: -22px; min-width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); font-size: 3rem; font-weight: 1000; border: 6px solid #fff; }
.apple-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px; }
.apple, .choice, .bay, .box {
  min-height: 96px;
  border-radius: 28px;
  font-size: 2.4rem;
  font-weight: 1000;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.apple { background: #fecaca; border: 5px solid #fff; }
.apple-shape { width: 58px; height: 58px; border-radius: 52% 48% 58% 42%; background: #ef4444; position: relative; display: block; box-shadow: inset 0 -8px 0 rgba(0,0,0,.1); }
.apple-shape::before { content: ''; position: absolute; left: 28px; top: -15px; width: 8px; height: 20px; border-radius: 8px; background: #7c2d12; transform: rotate(18deg); }
.apple-shape::after { content: ''; position: absolute; left: 36px; top: -13px; width: 24px; height: 14px; border-radius: 50%; background: #22c55e; transform: rotate(-24deg); }
.apple.eaten { opacity: .22; transform: scale(.88); }

.parking-stage { display: grid; gap: 20px; }
.race-lane { min-height: 118px; border-radius: 34px; background: #334155; position: relative; overflow: hidden; display: flex; align-items: center; padding-left: 30px; }
.race-lane::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 8px dashed rgba(255,255,255,.55); }
.race-car { z-index: 1; width: 150px; height: 78px; border-radius: 42px 60px 22px 22px; background: #ef4444; position: relative; filter: drop-shadow(0 12px 10px rgba(0,0,0,.18)); animation: idleCar 1.2s ease-in-out infinite alternate; }
.race-car span { position: absolute; left: 48px; top: -18px; width: 58px; height: 34px; border-radius: 28px 28px 4px 4px; background: #bae6fd; }
.race-car i, .race-car b { position: absolute; bottom: -18px; width: 38px; height: 38px; border-radius: 50%; background: #111827; border: 8px solid #e5e7eb; }
.race-car i { left: 20px; }
.race-car b { right: 20px; }
.bay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 14px; }
.bay { min-height: 128px; background: #e0f2fe; border: 7px solid #fff; color: #075985; }
.bay.correct { background: #bbf7d0; }

.treasure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); gap: 18px; align-content: center; height: 100%; }
.box { min-height: 132px; background: linear-gradient(160deg, #fcd34d, #d97706); border: 7px solid #fff7ed; color: #78350f; position: relative; }
.box::before { content: ''; position: absolute; inset: 48% 0 auto; height: 10px; background: rgba(120,53,15,.35); }
.box.open { background: linear-gradient(160deg, #fde68a, #fef3c7); }
.box.open::after { content: '★'; position: absolute; top: -18px; right: 16px; color: #f43f5e; font-size: 3rem; }

.celebrate { animation: pop .42s ease; }
.shake { animation: shake .28s ease; }

.parent-panel { padding: clamp(20px, 4vw, 38px); display: grid; gap: 18px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; background: #fff; border-radius: 24px; padding: 16px 18px; font-size: 1.2rem; font-weight: 900; }
select, input { min-height: 52px; border-radius: 16px; border: 3px solid #cbd5e1; padding: 8px 12px; font-size: 1.2rem; }
input[type="checkbox"] { width: 42px; }
.progress-list { display: grid; gap: 12px; }
.progress-card { background: #f8fafc; border-radius: 22px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 14px; font-weight: 850; }

.gate-dialog { border: 0; border-radius: 28px; padding: 24px; box-shadow: var(--shadow); max-width: 420px; }
.gate-dialog::backdrop { background: rgba(15,23,42,.45); }
.gate-dialog form { display: grid; gap: 14px; }
.gate-dialog menu { display: flex; justify-content: flex-end; gap: 10px; padding: 0; margin: 0; }
.gate-dialog button { min-height: 48px; border-radius: 18px; padding: 0 18px; background: #e0f2fe; font-weight: 900; }

@keyframes idleCar { from { transform: translateX(0) rotate(-1deg); } to { transform: translateX(20px) rotate(1deg); } }
@keyframes pop { 0% { transform: scale(.94); } 65% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 33% { transform: translateX(-8px); } 66% { transform: translateX(8px); } }

@media (max-width: 780px) {
  .topbar { grid-template-columns: 56px 1fr auto; }
  .parent-button { padding: 0 14px; min-height: 48px; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-monster { display: none; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 170px; }
  .monster-stage { grid-template-columns: 1fr; }
  .big-monster { height: 210px; width: min(260px, 80vw); margin: 0 auto; }
  .game-stage { min-height: 360px; }
}

/* Arcade modes */
.slime-mini { border-radius: 50% 46% 52% 44%; background: #22c55e; box-shadow: inset 0 -10px 0 rgba(0,0,0,.12); }
.slime-mini i, .slime-mini b { position: absolute; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: #111827; }
.slime-mini i { left: 28px; }
.slime-mini b { right: 28px; }

.racer-stage { display: grid; gap: 18px; align-content: stretch; background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(51,65,85,.72)); }
.arcade-track { min-height: 210px; border-radius: 34px; background: #1f2937; position: relative; overflow: hidden; display: flex; align-items: center; padding-left: 34px; border: 6px solid rgba(255,255,255,.25); }
.speed-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.18) 55px 76px); animation: roadRush .5s linear infinite; }
.finish-flag { position: absolute; right: 34px; top: 24px; bottom: 24px; width: 26px; background: repeating-conic-gradient(#fff 0 25%, #111827 0 50%) 0 / 26px 26px; border-radius: 8px; }
.racer-car { transform: scale(1.15); }
.racer-car.boost { animation: turboBoost .72s ease-out forwards; }
.gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 14px; }
.turbo-gate { min-height: 132px; border-radius: 26px; background: linear-gradient(180deg, #67e8f9, #0284c7); color: #082f49; border: 6px solid #e0f2fe; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.turbo-gate::before, .turbo-gate::after { content: ''; position: absolute; top: 12px; bottom: 12px; width: 12px; border-radius: 10px; background: rgba(255,255,255,.7); }
.turbo-gate::before { left: 18px; }
.turbo-gate::after { right: 18px; }
.gate-number { position: relative; z-index: 1; font-size: 3.5rem; font-weight: 1000; }
.gate-lights { position: absolute; left: 50%; bottom: 12px; width: 54px; height: 12px; transform: translateX(-50%); border-radius: 99px; background: repeating-linear-gradient(90deg, #fef08a 0 10px, transparent 10px 18px); }
.turbo-gate.correct { background: linear-gradient(180deg, #bef264, #22c55e); }

.blaster-stage { display: grid; grid-template-rows: auto 1fr; gap: 18px; background: radial-gradient(circle at 30% 20%, rgba(34,197,94,.28), transparent 32%), rgba(15,23,42,.86); }
.blaster-hud { min-height: 76px; border-radius: 28px; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; gap: 20px; font-weight: 1000; color: #14532d; }
.blaster-hud strong { min-width: 72px; min-height: 72px; border-radius: 50%; display: grid; place-items: center; background: #bef264; border: 5px solid #fff; font-size: 2.4rem; color: #111827; }
.slime-field { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 18px; align-content: center; }
.slime { min-height: 104px; border-radius: 32px; background: transparent; position: relative; filter: drop-shadow(0 14px 12px rgba(0,0,0,.2)); }
.slime span { position: absolute; inset: 16px 14px 12px; border-radius: 48% 52% 42% 58%; background: linear-gradient(160deg, #86efac, #16a34a); box-shadow: inset 0 -12px 0 rgba(0,0,0,.1); }
.slime i, .slime b { position: absolute; top: 42px; width: 12px; height: 12px; border-radius: 50%; background: #052e16; z-index: 1; }
.slime i { left: 38%; }
.slime b { right: 38%; }
.slime.popped { opacity: .18; transform: scale(.72) rotate(8deg); }
.slime.popped::after { content: 'POP'; position: absolute; inset: 0; display: grid; place-items: center; color: #fef3c7; font-size: 1.3rem; font-weight: 1000; }

@keyframes roadRush { from { background-position: 0 0; } to { background-position: -76px 0; } }
@keyframes turboBoost { 0% { transform: translateX(0) scale(1.15); } 65% { transform: translateX(58vw) scale(1.18); } 100% { transform: translateX(52vw) scale(1.18); } }

@media (max-width: 780px) {
  .arcade-track { min-height: 160px; }
  .gate-number { font-size: 3rem; }
  .blaster-hud { flex-wrap: wrap; padding: 10px; gap: 10px; }
}

/* Out Run-inspired dot-count driving */
.outrun-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: 14px;
  background: #111827;
  border: 0;
}

.dot-prompt {
  display: flex;
  gap: clamp(10px, 2vw, 18px);
  align-items: center;
  justify-content: center;
  min-height: 70px;
}
.dot-prompt i {
  width: clamp(34px, 6vw, 58px);
  height: clamp(34px, 6vw, 58px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #fef08a 36%, #f59e0b 72%);
  border: 5px solid #fff7ed;
  box-shadow: 0 10px 20px rgba(245, 158, 11, .25);
}

.outrun-world {
  position: relative;
  min-height: 470px;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(#7c2d92 0 26%, #fb7185 27% 43%, #f97316 44% 54%, #111827 55%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.16);
}
.sunset {
  position: absolute;
  left: 50%;
  top: 32px;
  width: 210px;
  height: 210px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, #fde047 0 18px, #fb7185 18px 29px);
  opacity: .95;
}
.mountains {
  position: absolute;
  left: 0;
  right: 0;
  top: 210px;
  height: 110px;
  background:
    linear-gradient(135deg, transparent 0 50%, #581c87 51%) 0 0 / 240px 110px repeat-x,
    linear-gradient(225deg, transparent 0 50%, #312e81 51%) 90px 22px / 260px 100px repeat-x;
  opacity: .92;
}
.road {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: min(760px, 96%);
  height: 370px;
  transform: translateX(-50%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #0f172a 0 31%, #1f2937 31% 36%, #0f172a 36% 64%, #1f2937 64% 69%, #0f172a 69%);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.road-lines {
  position: absolute;
  inset: 20px 0 0;
  background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(255,255,255,.8) 35px 70px);
  clip-path: polygon(49% 0, 51% 0, 57% 100%, 43% 100%);
  animation: roadFlow .42s linear infinite;
}
.road-gate {
  position: absolute;
  top: 78px;
  width: 86px;
  height: 96px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #67e8f9, #0284c7);
  color: #082f49;
  border: 5px solid #e0f2fe;
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
  transform: translateX(-50%);
}
.road-gate::before, .road-gate::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 10px;
  height: 70px;
  background: #e0f2fe;
}
.road-gate::before { left: 12px; }
.road-gate::after { right: 12px; }
.road-gate span { font-size: 3.3rem; font-weight: 1000; }
.road-gate.lane-0 { left: 35%; }
.road-gate.lane-1 { left: 50%; }
.road-gate.lane-2 { left: 65%; }
.road-gate.correct { background: linear-gradient(180deg, #bef264, #22c55e); }
.road-gate.wrong { background: linear-gradient(180deg, #fecaca, #ef4444); }

.player-car {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 138px;
  height: 76px;
  border-radius: 34px 48px 18px 18px;
  background: #ef4444;
  transform: translateX(-50%);
  transition: left .18s ease, transform .18s ease;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.35));
  z-index: 5;
}
.player-car span { position: absolute; left: 44px; top: -17px; width: 54px; height: 32px; border-radius: 26px 26px 4px 4px; background: #bae6fd; }
.player-car i, .player-car b { position: absolute; bottom: -15px; width: 34px; height: 34px; border-radius: 50%; background: #111827; border: 7px solid #e5e7eb; }
.player-car i { left: 18px; }
.player-car b { right: 18px; }
.player-car.lane-0 { left: 28%; }
.player-car.lane-1 { left: 50%; }
.player-car.lane-2 { left: 72%; }
.player-car.mega-boost { animation: megaBoost .88s ease-out forwards; }
.player-car.soft-bump { animation: softBump .42s ease; }

.drive-controls {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 12px;
}
.drive-controls button {
  min-height: 82px;
  border-radius: 26px;
  font-size: clamp(1.15rem, 3vw, 1.9rem);
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(180deg, #334155, #0f172a);
  border: 4px solid rgba(255,255,255,.28);
  box-shadow: var(--shadow);
}
#goButton { background: linear-gradient(180deg, #f97316, #dc2626); }

@keyframes roadFlow { from { background-position: 0 0; } to { background-position: 0 70px; } }
@keyframes megaBoost {
  0% { transform: translateX(-50%) scale(1); }
  55% { transform: translateX(-50%) translateY(-160px) scale(.72); }
  100% { transform: translateX(-50%) translateY(-260px) scale(.42); opacity: .25; }
}
@keyframes softBump {
  0%, 100% { transform: translateX(-50%); }
  28% { transform: translateX(calc(-50% - 14px)) rotate(-4deg); }
  64% { transform: translateX(calc(-50% + 14px)) rotate(4deg); }
}

@media (max-width: 780px) {
  .outrun-world { min-height: 390px; }
  .road { height: 315px; }
  .road-gate { top: 64px; width: 72px; height: 84px; }
  .road-gate span { font-size: 2.7rem; }
  .player-car { width: 112px; height: 64px; }
  .player-car span { left: 36px; width: 44px; }
  .drive-controls button { min-height: 72px; }
}

/* Proper canvas Out Run-style racer */
.canvas-racer-stage {
  position: relative;
  min-height: 620px;
  padding: 0;
  border: 0;
  background: #111827;
  overflow: hidden;
}
#racerCanvas {
  display: block;
  width: 100%;
  height: min(68vh, 640px);
  min-height: 520px;
  border-radius: 38px;
  background: #111827;
  touch-action: none;
}
.racer-touch-zones {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.racer-touch-zones button {
  pointer-events: auto;
  opacity: 0;
  border: 0;
  background: transparent;
  touch-action: none;
}
.canvas-racer-stage::before,
.canvas-racer-stage::after {
  content: '';
  position: absolute;
  bottom: 22px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 4px solid rgba(255,255,255,.24);
  pointer-events: none;
}
.canvas-racer-stage::before { left: 24px; }
.canvas-racer-stage::after { right: 24px; }

@media (max-width: 780px) {
  .canvas-racer-stage { min-height: 470px; }
  #racerCanvas { min-height: 430px; height: 58vh; }
}