:root {
  --ink: #30254d;
  --paper: #fffaf0;
  --plum: #7452b8;
  --star: #ffd84d;
  --star-stroke: #a86100;
  --tint: #fff1dc;
  --accent: #ff8a5c;
  --chrome: 56px;
  --gap: 12px;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-right: max(10px, env(safe-area-inset-right));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
  --safe-left: max(16px, env(safe-area-inset-left));
  --pop: cubic-bezier(.2, .9, .25, 1.2);
  color-scheme: light;
}

#game-shell[data-circuit="sunrise-circuit"] { --tint: #fff1dc; --accent: #ff8a5c; }
#game-shell[data-circuit="cloudway-crossing"] { --tint: #eef8ff; --accent: #4fa8e8; }
#game-shell[data-circuit="aurora-loop"] { --tint: #f1edff; --accent: #8a6ae0; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background: #ffb27f;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 800;
}
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; }

#game-shell { position: relative; width: 100%; height: 100dvh; min-height: 100%; overflow: hidden; isolation: isolate; }
#game-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#play-layout { position: absolute; top: 170px; bottom: 140px; left: 10vw; right: 10vw; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Platform chrome: sound then fullscreen, top-right. */
.hud-actions {
  position: absolute;
  /* Above the mission map (40) and the completion overlay (45): sound and fullscreen stay reachable everywhere. */
  z-index: 50;
  top: var(--safe-top);
  right: var(--safe-right);
  display: flex;
  gap: var(--gap);
}
.icon-button {
  display: grid;
  place-items: center;
  width: var(--chrome);
  height: var(--chrome);
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 5px 0 #39295e, 0 8px 18px rgba(31, 24, 51, .2);
  cursor: pointer;
  touch-action: manipulation;
}
.icon-button svg { width: 26px; height: 26px; }
.icon-off { display: none; }
#sound-button[aria-pressed="false"] .icon-on { display: none; }
#sound-button[aria-pressed="false"] .icon-off { display: block; }

/* Task panel, top-centre. */
.task-panel {
  position: absolute;
  z-index: 25;
  top: var(--safe-top);
  left: 50%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  width: min(540px, calc(100vw - 2 * (var(--chrome) * 2 + var(--gap) + 24px)));
  min-height: 72px;
  padding: 8px 16px 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 5px 0 #39295e, 0 10px 22px rgba(31, 24, 51, .18);
  transform: translateX(-50%);
  pointer-events: none;
}
#game-shell[data-phase="map"] .task-panel, #game-shell[data-phase="mission-complete"] .task-panel { display: none; }
.task-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--tint);
  color: var(--ink);
}
.task-icon svg { width: 32px; height: 32px; }
.task-panel.praise .task-icon { background: var(--star); }
.task-panel.bump .task-icon { animation: settle 300ms var(--pop); }
.task-text { font-size: 20px; font-weight: 900; line-height: 1.12; overflow-wrap: anywhere; }
.route { position: relative; height: 18px; }
.route-dots { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 18px; margin: 0; padding: 0 4px; list-style: none; }
.route-dots li { flex: 0 0 auto; width: 12px; height: 12px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.route-dots li.done { background: var(--accent); }
.route-dots li[data-kind="bot-stop"] { border-radius: 4px; }
.route-dots li[data-kind="garage"] { width: 16px; height: 16px; border-radius: 5px; background: var(--star); }
.route-hero {
  position: absolute;
  top: -11px;
  left: 0;
  width: 26px;
  height: 26px;
  color: var(--plum);
  transform: translateX(-50%);
  transition: left 300ms linear;
  filter: drop-shadow(0 2px 0 var(--paper));
}
.route-hero svg { width: 26px; height: 26px; }

/* Language badge: in MIX it shows which language a circuit speaks. Letters only, drawn as a chip. */
.lang-badge, .badge-lang {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 24px;
  padding: 0 7px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--plum);
  color: var(--paper);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
}
.lang-badge { position: absolute; right: 14px; bottom: -14px; }
/* The route line stops short of the badge so the garage dot stays clear. */
.task-panel:has(.lang-badge:not([hidden])) .route { margin-right: 40px; }
.badge-lang { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); }

/* Word bubble over the hero: the name of what the child just used, in the circuit's language. */
.word-bubble {
  position: absolute;
  z-index: 23;
  left: 50%;
  top: 40%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 #39295e;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
  white-space: nowrap;
}
.word-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  transform: translateX(-50%) rotate(45deg);
}
.word-bubble.pop { animation: word-pop 300ms var(--pop); }
.word-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--plum); }
.word-icon.swatch { border: 2.5px solid var(--ink); color: var(--ink); }
.word-icon svg { width: 28px; height: 28px; }
.word-text { font-size: 26px; font-weight: 950; line-height: 1; }

/* Game controls, bottom inside safe areas. */
.controls {
  position: absolute;
  z-index: 24;
  left: var(--safe-left);
  right: max(16px, env(safe-area-inset-right));
  bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: end;
  gap: var(--gap);
  pointer-events: none;
}
.controls > *, .center-cluster > * { pointer-events: auto; }
.center-cluster { display: flex; justify-content: center; align-items: center; gap: var(--gap); pointer-events: none; }
.steer-button, .form-button, .pulse-button, .play-button, .celebrate-button, .circuit-badge {
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 5px 0 #39295e, 0 10px 20px rgba(31, 24, 51, .2);
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  transition: transform 80ms ease-out;
}
.steer-button { width: 72px; height: 72px; border-radius: 22px; }
.steer-button svg { width: 38px; height: 38px; stroke-width: 3; }
.form-button { position: relative; width: 88px; height: 88px; border-radius: 50%; background: var(--star); }
.form-button svg { width: 52px; height: 52px; }
.form-button .as-car { display: none; }
.form-button[data-next-form="car"] .as-robot { display: none; }
.form-button[data-next-form="car"] .as-car { display: block; }
.form-button[aria-disabled="true"] { background: #ffe9a3; }
.form-button[aria-disabled="true"] svg { animation: spin-in 1.35s linear; }
.pulse-button { width: 72px; height: 72px; border-radius: 50%; background: #7ef0cf; }
.pulse-button svg { width: 40px; height: 40px; }
.pulse-button:not([hidden]) { animation: appear 250ms var(--pop); }

:is(.steer-button, .form-button, .pulse-button, .play-button, .celebrate-button, .circuit-badge, .icon-button):active { transform: scale(.94); }
.pop { animation: pop 260ms var(--pop); }
.squash { animation: squash 300ms var(--pop); }
.hint-target { animation: hint-bounce 900ms var(--pop) infinite; }
.form-button.hint-target { box-shadow: 0 5px 0 #39295e, 0 0 0 8px rgba(255, 216, 77, .55), 0 10px 20px rgba(31, 24, 51, .2); }

.hint-hand {
  position: absolute;
  z-index: 29;
  width: 54px;
  height: 54px;
  color: var(--paper);
  pointer-events: none;
  filter: drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 2px var(--ink));
  animation: hand-tap 1.1s ease-in-out infinite;
}
.hint-hand svg { width: 54px; height: 54px; stroke: var(--ink); stroke-width: 1.6; }

:is(button, a):focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--plum); }

/* Mission map. */
.map-screen {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: max(130px, calc(env(safe-area-inset-top) + 120px)) 12px 20px;
  background: linear-gradient(180deg, rgba(48, 37, 77, .05), rgba(48, 37, 77, .3));
}
.map-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  padding: 18px 20px 22px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 6px 0 #39295e, 0 18px 40px rgba(31, 24, 51, .25);
  text-align: center;
}
.map-card h1 { margin: 0; font-size: 32px; font-weight: 950; line-height: 1; }
.map-route { position: relative; width: 100%; padding: 22px 0 6px; }
.map-road { position: absolute; inset: 14px 6% 0; width: 88%; height: calc(100% - 14px); }
.map-road path { stroke: var(--ink); stroke-width: 5; stroke-dasharray: .5 14; opacity: .55; vector-effect: non-scaling-stroke; }
.map-badges { position: relative; display: flex; justify-content: space-around; gap: 12px; }
.circuit-badge { position: relative; width: 84px; height: 84px; border-radius: 26px; background: var(--paper); }
.circuit-badge[data-level="0"] { background: #ffd9b8; color: #a3460f; }
.circuit-badge[data-level="1"] { background: #cfeaff; color: #2b6aa8; }
.circuit-badge[data-level="2"] { background: #ddd2ff; color: #5a3fb0; }
.circuit-badge .badge-face svg { width: 46px; height: 46px; }
.circuit-badge[aria-disabled="true"] { opacity: .55; }
.circuit-badge[aria-current="true"] { outline: 4px solid var(--plum); outline-offset: 3px; }
.badge-star { position: absolute; top: -14px; right: -14px; display: none; width: 34px; height: 34px; }
.badge-star svg { width: 34px; height: 34px; fill: var(--star); stroke: var(--star-stroke); stroke-width: 1.8; }
.circuit-badge[data-earned="true"] .badge-star { display: block; }
.map-token {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  color: var(--plum);
  transform: translate(-50%, -6px);
  transition: left 400ms var(--pop);
  pointer-events: none;
  filter: drop-shadow(0 2px 0 var(--paper));
}
.map-token svg { width: 36px; height: 36px; }
.map-circuit { margin: 4px 0 2px; font-size: 22px; font-weight: 900; }
.play-button { width: 88px; height: 88px; border-radius: 50%; background: var(--star); }
.play-button svg { width: 46px; height: 46px; margin-left: 5px; }

/* Completion: platform celebration grammar. */
.completion {
  position: absolute;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: max(170px, calc(env(safe-area-inset-top) + 160px)) 12px 20px;
  background: rgba(48, 37, 77, .22);
}
.completion-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(460px, calc(100vw - 24px));
  padding: 16px 20px 22px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 6px 0 #39295e, 0 18px 40px rgba(31, 24, 51, .25);
  text-align: center;
  animation: appear 350ms var(--pop);
}
.completion-star { width: 104px; height: 104px; margin-top: -66px; fill: var(--star); stroke: var(--star-stroke); stroke-width: 1.4; filter: drop-shadow(0 4px 0 rgba(48, 37, 77, .25)); animation: star-in 500ms var(--pop); }
.completion-card h2 { margin: 0; font-size: 30px; font-weight: 950; line-height: 1.05; }
.completion-loot { display: flex; gap: 22px; margin: 0; font-size: 22px; }
.loot-item { display: inline-flex; align-items: center; gap: 6px; }
.loot-item svg { width: 30px; height: 30px; color: var(--plum); }
.completion-badges { display: flex; gap: 14px; }
.completion-badges .mini-badge { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid var(--ink); border-radius: 18px; }
.completion-badges .mini-badge svg { width: 32px; height: 32px; }
.completion-badges .mini-badge .badge-star { display: block; top: -10px; right: -10px; width: 26px; height: 26px; }
.completion-badges .mini-badge .badge-star svg { width: 26px; height: 26px; }
.completion-actions { display: flex; justify-content: center; gap: 16px; margin-top: 4px; }
.celebrate-button { width: 72px; height: 72px; border-radius: 22px; }
.celebrate-button.primary { background: var(--star); }
.celebrate-button svg { width: 36px; height: 36px; }

.webgl-error { position: absolute; z-index: 60; left: 50%; top: 45%; width: min(440px, calc(100vw - 32px)); padding: 16px 20px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 0 5px 0 #39295e; font-size: 20px; line-height: 1.25; text-align: center; transform: translateX(-50%); }

@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes squash { 0% { transform: scale(1); } 35% { transform: scale(.94); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes settle { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes appear { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes star-in { 0% { transform: scale(.3) rotate(-30deg); } 70% { transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes hint-bounce { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.16) translateY(-4px); } }
@keyframes hand-tap { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-4px, -14px); } 60% { transform: translate(0, 2px) scale(.92); } }
@keyframes word-pop { 0% { scale: .7; } 60% { scale: 1.08; } 100% { scale: 1; } }
@keyframes spin-in { from { transform: rotate(-180deg) scale(.8); } to { transform: rotate(0) scale(1); } }

@media (max-width: 700px) {
  :root { --chrome: 48px; --safe-bottom: max(14px, env(safe-area-inset-bottom)); --safe-left: max(12px, env(safe-area-inset-left)); }
  .icon-button { border-radius: 16px; }
  .icon-button svg { width: 24px; height: 24px; }
  .task-panel {
    top: calc(var(--safe-top) + 58px);
    left: max(84px, calc(env(safe-area-inset-left) + 74px));
    right: max(10px, env(safe-area-inset-right));
    width: auto;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 10px;
    min-height: 64px;
    transform: none;
  }
  .task-icon { width: 44px; height: 44px; border-radius: 14px; }
  .task-icon svg { width: 28px; height: 28px; }
  .task-text { font-size: 18px; }
  .word-text { font-size: 22px; }
  .controls { right: max(12px, env(safe-area-inset-right)); grid-template-columns: 64px 1fr 64px; }
  .steer-button { width: 64px; height: 64px; border-radius: 20px; }
  .form-button { width: 84px; height: 84px; }
  .pulse-button { width: 64px; height: 64px; }
  .map-screen { padding-top: max(124px, calc(env(safe-area-inset-top) + 114px)); }
  .map-card h1 { font-size: 28px; }
  .circuit-badge { width: 76px; height: 76px; border-radius: 22px; }
  .completion { padding-top: max(176px, calc(env(safe-area-inset-top) + 166px)); }
  .completion-card h2 { font-size: 26px; }
  .celebrate-button { width: 66px; height: 66px; }
}

/* Wide landscape: the map card clears the home and sound columns, so it rides high and leaves the hero's face visible. */
@media (min-width: 820px) and (min-height: 561px) and (orientation: landscape) {
  .map-screen { padding-top: max(18px, calc(env(safe-area-inset-top) + 12px)); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .task-panel { min-height: 60px; padding: 6px 12px 6px 8px; }
  .task-icon { width: 44px; height: 44px; }
  .map-screen { padding-top: 70px; }
  .completion { padding-top: 76px; }
  .completion-star { width: 72px; height: 72px; margin-top: -30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hint-target { transform: scale(1.12); }
}