/* ═══════════════════════════════════════════════════════════════
   ROBOT FACTORY — chunky toy-factory aesthetic
   Candy colors · thick navy outlines · squash-and-stretch motion
   ═══════════════════════════════════════════════════════════════ */

:root {
  --navy:   #1D3557;
  --navy-2: #2b4a75;
  --cream:  #FFF6E9;
  --cream-2:#FFEAC9;
  --teal:   #2A9D8F;
  --teal-d: #1f7a70;
  --orange: #F4772E;
  --orange-d:#d55f1a;
  --gold:   #FFB703;
  --coral:  #FF6B6B;
  --sky:    #4EA8DE;
  --sunny:  #FFD166;
  --mint:   #6BCB77;
  --pink:   #FF7EB6;
  --shadow: 0 8px 0 rgba(29,53,87,.25);
  --font-round: "Arial Rounded MT Bold", "Trebuchet MS", "Comic Sans MS", "Segoe UI", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.hidden { display: none !important; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font-round);
  background: var(--cream);
  color: var(--navy);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ── screens ─────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.screen.active { display:flex; }

.bg-art {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}

/* ══════════════ TITLE SCREEN ══════════════ */
#screen-title {
  background:
    radial-gradient(120% 90% at 50% 110%, var(--cream-2) 0 38%, transparent 38.5%),
    linear-gradient(180deg, #9BDCE8 0%, #C7EEDD 55%, var(--cream) 100%);
  align-items:center; justify-content:center;
}

.title-clouds { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cloud {
  position:absolute; background:#fff; opacity:.85; border-radius:60px;
  box-shadow: 30px 8px 0 6px #fff, -28px 10px 0 2px #fff;
  animation: drift 40s linear infinite;
}
.cloud.c1 { width:90px; height:34px; top:9%;  left:-15%; }
.cloud.c2 { width:70px; height:28px; top:20%; left:-15%; animation-duration:55s; animation-delay:-25s; }
.cloud.c3 { width:110px;height:38px; top:5%;  left:-15%; animation-duration:70s; animation-delay:-48s; }
@keyframes drift { to { transform: translateX(130vw); } }

.title-inner {
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap: clamp(12px, 2.5vh, 28px); padding:20px;
}
.logo-wrap { display:flex; flex-direction:column; align-items:center; }

.mascot-bounce { width:clamp(110px, 20vh, 180px); height:clamp(110px, 20vh, 180px); animation: bob 2.4s ease-in-out infinite; }
.mascot-bounce img, .mascot-bounce svg { width:100%; height:100%; }
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-12px) rotate(2deg); }
}

.game-logo {
  display:flex; flex-direction:column; align-items:center; line-height:.9;
  letter-spacing:.04em; text-align:center; margin-top:6px;
}
.logo-line1 {
  font-size: clamp(2.6rem, 9vw, 5.2rem); color: var(--orange);
  -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(29,53,87,.28);
  animation: logo-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.logo-line2 {
  font-size: clamp(1.9rem, 6.6vw, 3.8rem); color: var(--teal);
  -webkit-text-stroke: 2.5px var(--navy); paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(29,53,87,.28);
  animation: logo-pop .7s .12s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes logo-pop { from { transform:scale(0) rotate(-8deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }

.tagline { margin-top:10px; font-size:clamp(1rem, 2.6vw, 1.4rem); color:var(--navy-2); font-weight:bold; }

.title-buttons { display:flex; flex-direction:column; gap:16px; align-items:center; }

.big-btn {
  display:flex; align-items:center; gap:12px; justify-content:center;
  font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight:bold; color:#fff;
  padding: .55em 1.4em; border-radius: 999px;
  border: 4px solid var(--navy);
  box-shadow: var(--shadow);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.big-btn:active { transform: translateY(6px) scale(.97); box-shadow: 0 2px 0 rgba(29,53,87,.25); }
.btn-play     { background: linear-gradient(180deg, #ff9550, var(--orange) 55%, var(--orange-d)); animation: pulse-play 1.8s ease-in-out infinite; }
.btn-stickers { background: linear-gradient(180deg, #43c9b8, var(--teal) 55%, var(--teal-d)); font-size:clamp(1.05rem,3vw,1.5rem); }
@keyframes pulse-play { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
.btn-icon { font-size:.9em; }

.title-stats { font-size:clamp(.9rem,2.2vw,1.15rem); color:var(--navy-2); font-weight:bold; min-height:1.3em; }

.title-footer {
  position:absolute; bottom:10px; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center; padding:0 16px;
}
.chip-btn {
  background:#fff; border:3px solid var(--navy); border-radius:999px;
  padding:6px 14px; font-weight:bold; font-size:.95rem; color:var(--navy);
  box-shadow: 0 4px 0 rgba(29,53,87,.2);
}
.chip-btn:active { transform:translateY(3px); box-shadow:none; }
.teacher-link {
  font-size:.72rem; color:var(--navy-2); opacity:.65; text-decoration:none;
  background:rgba(255,255,255,.55); padding:4px 10px; border-radius:999px;
}
.teacher-link:hover { opacity:1; text-decoration:underline; }

/* ══════════════ GAME SCREEN ══════════════ */
#screen-game {
  background:
    linear-gradient(180deg, #8fd8e4 0%, #bfeadb 30%, var(--cream) 30.2%, var(--cream) 100%);
}
#screen-game::before { /* wall paneling stripes */
  content:""; position:absolute; inset:30% 0 0 0; z-index:0; opacity:.5;
  background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(233,196,144,.35) 120px 124px);
}

.hud {
  position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; gap:10px;
}
.hud-btn {
  width:54px; height:54px; border-radius:18px; font-size:1.5rem;
  background:#fff; border:3.5px solid var(--navy);
  box-shadow: 0 5px 0 rgba(29,53,87,.22);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.hud-btn:active { transform:translateY(4px); box-shadow:none; }
.hud-center { display:flex; gap:10px; }
.hud-pill {
  background:#fff; border:3.5px solid var(--navy); border-radius:999px;
  padding:8px 18px; font-size:1.2rem; font-weight:bold;
  box-shadow: 0 5px 0 rgba(29,53,87,.22); white-space:nowrap;
}

/* prompt banner */
.prompt-banner {
  position:relative; z-index:5; margin: 4px auto 0; width:min(660px, 92vw);
  background:#fff; border:4px solid var(--navy); border-radius:26px;
  box-shadow: var(--shadow);
  display:flex; align-items:center; gap:12px; padding:10px 14px;
}
.prompt-banner.attn { animation: banner-wiggle .5s ease; }
@keyframes banner-wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-1.5deg) scale(1.02)} 75%{transform:rotate(1.5deg) scale(1.02)} }
.repeat-btn {
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; font-size:1.6rem;
  background: linear-gradient(180deg,#5cb9f0,var(--sky) 60%,#3a8cc0);
  border:3.5px solid var(--navy); box-shadow:0 4px 0 rgba(29,53,87,.25);
}
.repeat-btn:active { transform:translateY(3px) rotate(-180deg); box-shadow:none; transition: transform .25s; }
.prompt-text { flex:1; font-size:clamp(1.15rem, 3.4vw, 1.7rem); font-weight:bold; line-height:1.15; }
.prompt-text b { color: var(--orange); }
.prompt-text u { color: var(--teal-d); text-decoration-thickness:4px; text-decoration-color: var(--gold); }
.prompt-shape-icon { flex:0 0 auto; width:52px; height:52px; }
.prompt-shape-icon svg { width:100%; height:100%; }

/* robot stage */
.stage-wrap {
  position:relative; z-index:2; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
#robot-stage { width:min(92vw, 62vh, 560px); height:min(80vh, 100%); position:relative; }
#robot-stage svg.robot-svg { width:100%; height:100%; overflow:visible; }

/* slot states (SVG groups) */
.slot-outline { fill: rgba(255,255,255,.55); stroke: var(--navy); stroke-width:3; stroke-dasharray: 10 8; }
.slot.hint .slot-outline { stroke: var(--gold); fill: rgba(255,209,102,.4); animation: hint-pulse 1s ease-in-out infinite; }
@keyframes hint-pulse { 0%,100% { stroke-width:3; } 50% { stroke-width:7; } }
.slot.filled .slot-outline { display:none; }
.slot.wrong-flash .slot-outline { stroke:var(--coral); animation: none; }

.robot-dance { animation: dance .5s ease-in-out 4; transform-origin: 50% 80%; }
@keyframes dance {
  0%,100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-4deg) translateY(-10px); }
  75% { transform: rotate(4deg) translateY(-10px); }
}

/* conveyor + tray */
.conveyor { position:relative; z-index:4; padding: 6px 0 18px; }
.conveyor-belt {
  position:absolute; left:0; right:0; bottom:0; height: 74px;
  background: var(--navy);
  border-top: 6px solid var(--navy-2);
  overflow:hidden;
}
.conveyor-belt::after {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.14) 34px 44px);
  animation: belt-roll 1.2s linear infinite;
}
@keyframes belt-roll { to { transform: translateX(44px); } }

.tray {
  position:relative; display:flex; justify-content:center; gap: clamp(10px, 3vw, 30px);
  padding: 0 10px;
}
.shape-tile {
  width: clamp(84px, 17vw, 122px); height: clamp(84px, 17vw, 122px);
  background:#fff; border:4px solid var(--navy); border-radius:24px;
  box-shadow: 0 7px 0 rgba(29,53,87,.3);
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  animation: tile-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
.shape-tile svg { width:72%; height:72%; pointer-events:none; }
.shape-tile:nth-child(2) { animation-delay:.08s; }
.shape-tile:nth-child(3) { animation-delay:.16s; }
@keyframes tile-in { from { transform: translateY(90px) scale(.4); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.shape-tile:active { transform: scale(1.08); }
.shape-tile.selected {
  border-color: var(--gold); background: #FFF9E8;
  transform: translateY(-14px) scale(1.12);
  box-shadow: 0 12px 0 rgba(29,53,87,.3), 0 0 0 6px rgba(255,183,3,.45);
  animation: sel-wiggle 1s ease-in-out infinite;
}
@keyframes sel-wiggle { 0%,100% { rotate:-3deg; } 50% { rotate:3deg; } }
.shape-tile.shake { animation: shake .45s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px) rotate(-3deg)} 40%{transform:translateX(9px) rotate(3deg)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.shape-tile.used { opacity:0; pointer-events:none; transition:opacity .3s; }

/* flying shape clone */
.fly-shape { position:fixed; z-index:60; pointer-events:none; will-change: transform; }
.fly-shape svg { width:100%; height:100%; filter: drop-shadow(0 6px 6px rgba(29,53,87,.35)); }

/* progress bolts */
.progress-bolts {
  position:absolute; top:84px; right:14px; z-index:5;
  display:flex; flex-direction:column; gap:6px;
}
.bolt { width:26px; height:26px; border-radius:50%; background:#fff;
  border:3px solid var(--navy); display:flex; align-items:center; justify-content:center;
  font-size:.8rem; opacity:.55; }
.bolt.done { background: var(--gold); opacity:1; animation: pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { from { transform:scale(0);} to { transform:scale(1);} }

/* ══════════════ BADGE BOOK ══════════════ */
#screen-badges { background: linear-gradient(180deg, #FFE9C7, var(--cream) 40%); }
.badges-title { font-size: clamp(1.4rem, 5vw, 2.2rem); color: var(--navy);
  -webkit-text-stroke: 0; text-shadow: 0 3px 0 rgba(29,53,87,.15); }
.badge-grid {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:14px; padding: 10px 16px 30px; z-index:2;
}
.badge-card {
  background:#fff; border:4px solid var(--navy); border-radius:22px;
  padding:14px 10px; text-align:center;
  box-shadow: 0 6px 0 rgba(29,53,87,.18);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.badge-card .badge-emoji { font-size:2.6rem; line-height:1; }
.badge-card .badge-name { font-weight:bold; font-size:1rem; }
.badge-card .badge-desc { font-size:.78rem; color:var(--navy-2); line-height:1.2; }
.badge-card .badge-meter { width:100%; height:10px; background:var(--cream-2); border-radius:99px; border:2px solid var(--navy); overflow:hidden; }
.badge-card .badge-meter i { display:block; height:100%; background:var(--mint); border-radius:99px; }
.badge-card.locked { filter: grayscale(1); opacity:.55; }
.badge-card.earned { border-color: var(--gold); box-shadow: 0 6px 0 rgba(255,183,3,.5); background:#FFFBEF; }
.badge-card.earned .badge-emoji { animation: bob 2.4s ease-in-out infinite; }

/* ══════════════ OVERLAYS ══════════════ */
.overlay {
  position:fixed; inset:0; z-index:70; background: rgba(29,53,87,.45);
  display:flex; align-items:center; justify-content:center;
  animation: fade-in .25s ease both;
}
.overlay.hidden { display:none; }
@keyframes fade-in { from { opacity:0; } }
.overlay-card {
  background: var(--cream); border:5px solid var(--navy); border-radius:34px;
  padding: 30px 36px; text-align:center;
  display:flex; flex-direction:column; gap:16px; align-items:center;
  box-shadow: 0 14px 0 rgba(0,0,0,.25);
  animation: card-pop .5s cubic-bezier(.34,1.56,.64,1) both;
  max-width:92vw;
}
@keyframes card-pop { from { transform:scale(.3) rotate(-5deg); opacity:0; } }
.complete-title {
  font-size: clamp(1.7rem, 6vw, 2.6rem); color: var(--orange);
  -webkit-text-stroke: 2px var(--navy); paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(29,53,87,.25);
}
.complete-stars { display:flex; gap:10px; font-size: clamp(2.6rem, 9vw, 4rem); min-height:1.2em; }
.complete-stars .st { opacity:.25; }
.complete-stars .st.on { opacity:1; animation: star-land .5s cubic-bezier(.34,1.56,.64,1) both; }
.complete-stars .st.on:nth-child(2) { animation-delay:.25s; }
.complete-stars .st.on:nth-child(3) { animation-delay:.5s; }
@keyframes star-land { from { transform: scale(3) rotate(40deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
.complete-name { font-size:1.2rem; font-weight:bold; color:var(--navy-2); }

/* badge toast */
.badge-toast {
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:80; display:flex; align-items:center; gap:14px;
  background:#fff; border:4px solid var(--gold); border-radius:24px;
  padding:12px 22px; box-shadow: 0 8px 0 rgba(29,53,87,.3);
  animation: toast-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.badge-toast.hidden { display:none; }
@keyframes toast-in { from { transform: translate(-50%, -120px); } to { transform: translate(-50%, 0); } }
.badge-toast-art { font-size:2.6rem; animation: bob 1.2s ease-in-out infinite; }
.badge-toast-label { font-size:.8rem; letter-spacing:.12em; color:var(--orange); font-weight:bold; }
.badge-toast-name { font-size:1.25rem; font-weight:bold; color:var(--navy); }

#confetti-canvas { position:fixed; inset:0; z-index:90; pointer-events:none; }

/* ══════════════ SHARED MODE UI ══════════════ */
.mode-title { font-size: clamp(1.2rem, 4.5vw, 2rem); color:var(--navy); text-align:center;
  text-shadow: 0 3px 0 rgba(29,53,87,.15); z-index:5; }
.mode-banner {
  position:relative; z-index:5; margin: 2px auto 0; width:min(600px, 92vw);
  background:#fff; border:4px solid var(--navy); border-radius:24px;
  box-shadow: var(--shadow); padding:10px 18px; text-align:center;
  font-size:clamp(1.05rem, 3vw, 1.5rem); font-weight:bold;
}
.mode-banner b { color:var(--orange); } .mode-banner u { color:var(--teal-d); text-decoration-thickness:4px; text-decoration-color:var(--gold); }
.mode-stage-wrap { position:relative; z-index:3; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.mode-robot { width:min(80vw, 46vh, 380px); height:min(60vh, 100%); }
.mode-robot svg { width:100%; height:100%; overflow:visible; }
.mode-nav { position:relative; z-index:6; display:flex; justify-content:center; gap:12px; padding: 8px 10px 16px; flex-wrap:wrap; }
.mode-btn {
  font-size:clamp(1rem, 2.8vw, 1.35rem); font-weight:bold; color:#fff;
  padding:.5em 1.1em; border-radius:999px; border:4px solid var(--navy);
  box-shadow: 0 6px 0 rgba(29,53,87,.3);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.mode-btn:active { transform:translateY(5px); box-shadow:0 1px 0 rgba(29,53,87,.3); }
.mode-btn.locked { filter:grayscale(1); opacity:.6; }
.mode-btn.shake { animation: shake .45s ease; }
.dance-c   { background:linear-gradient(180deg,#c58cf0,#9b5de5 60%,#7b3fc4); }
.says-c    { background:linear-gradient(180deg,#ff9cc7,var(--pink) 60%,#df5f98); }
.mission-c { background:linear-gradient(180deg,#5cb9f0,var(--sky) 60%,#3a86b8); }
.build-c   { background:linear-gradient(180deg,#ff9550,var(--orange) 60%,var(--orange-d)); }
.btn-dance { background:linear-gradient(180deg,#c58cf0,#9b5de5 60%,#7b3fc4); animation:pulse-play 1.8s ease-in-out infinite; }
.btn-garage{ background:linear-gradient(180deg,#5cb9f0,var(--sky) 60%,#3a86b8); font-size:clamp(1.05rem,3vw,1.5rem); }

/* ══════════════ DANCE PARTY ══════════════ */
#screen-dance { background: radial-gradient(130% 100% at 50% 0%, #3b2d63 0%, #241b45 55%, #171034 100%); }
#screen-dance .mode-title.dance-title { color:#fff; -webkit-text-stroke:0; text-shadow:0 0 14px rgba(255,183,3,.8), 0 3px 0 rgba(0,0,0,.4); animation: pulse-play 1s ease-in-out infinite; }
#screen-dance .hud-btn { background:#4a3a7d; color:#fff; border-color:#171034; }
.disco-lights { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.spot {
  position:absolute; top:-12%; width:34vw; height:130%;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity:.24; transform-origin:50% 0;
  animation: sweep 5s ease-in-out infinite alternate;
}
.spot.s1 { left:2%;  background:linear-gradient(180deg,#FF6B6B,transparent 85%); }
.spot.s2 { left:33%; background:linear-gradient(180deg,#FFD166,transparent 85%); animation-delay:-1.6s; }
.spot.s3 { left:64%; background:linear-gradient(180deg,#4EA8DE,transparent 85%); animation-delay:-3.2s; }
@keyframes sweep { from { transform:rotate(-14deg);} to { transform:rotate(14deg);} }
.disco-ball { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:3rem; z-index:2;
  animation: bob 2s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255,255,255,.7)); }
.disco-floor {
  position:absolute; left:0; right:0; bottom:0; height:88px; z-index:2; opacity:.85;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 60px, transparent 60px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 30px, transparent 30px 60px),
    linear-gradient(180deg,#2c2158,#171034);
  animation: floor-flash .8s steps(2) infinite;
}
@keyframes floor-flash { 50% { filter: hue-rotate(120deg) brightness(1.35); } }
#screen-dance .mode-banner { background:#fff; }
.mode-robot.dancing svg { animation: groove 1.1s ease-in-out infinite; transform-origin:50% 85%; }
@keyframes groove {
  0%,100% { transform: rotate(-3deg) translateY(0) scale(1,.98); }
  25%     { transform: rotate(0deg) translateY(-14px) scale(.98,1.03); }
  50%     { transform: rotate(3deg) translateY(0) scale(1,.98); }
  75%     { transform: rotate(0deg) translateY(-14px) scale(.98,1.03); }
}
.mode-robot .part { cursor:pointer; }
.mode-robot .part.boogie { animation: part-boogie .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes part-boogie {
  0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.35) rotate(-12deg); }
  70% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0); }
}

/* ══════════════ GARAGE ══════════════ */
#screen-garage { background: linear-gradient(180deg, #FFE9C7, var(--cream) 45%); }
.garage-grid {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:2;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:14px; padding:10px 16px 10px;
}
.garage-card {
  background:#fff; border:4px solid var(--navy); border-radius:22px;
  box-shadow:0 6px 0 rgba(29,53,87,.18); padding:10px 6px 8px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.garage-card:active { transform:scale(1.05); }
.garage-card.selected { border-color:var(--gold); background:#FFFBEF;
  box-shadow:0 6px 0 rgba(255,183,3,.55), 0 0 0 5px rgba(255,183,3,.35); }
.garage-card .mini-bot { width:96px; height:110px; }
.garage-card .mini-bot svg { width:100%; height:100%; }
.garage-card.selected .mini-bot svg { animation: bob 1.4s ease-in-out infinite; }
.garage-card .g-name { font-weight:bold; font-size:.95rem; color:var(--navy); }
.garage-card .g-stars { font-size:.85rem; letter-spacing:.05em; }
.garage-empty { grid-column:1/-1; text-align:center; color:var(--navy-2); font-weight:bold;
  font-size:1.1rem; padding:40px 20px; }

/* ══════════════ MISSION ══════════════ */
#screen-mission { background: linear-gradient(180deg, #8fd8e4 0%, #bfeadb 24%, var(--cream) 24.2%); }
.mission-stage-wrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; z-index:2; padding:6px; }
.mission-grid {
  position:relative;
  display:grid; grid-template-columns:repeat(5, 1fr); grid-template-rows:repeat(3, 1fr);
  gap:6px; width:min(94vw, 78vh, 640px); aspect-ratio: 5/3;
  background: var(--cream-2); border:5px solid var(--navy); border-radius:22px;
  padding:8px; box-shadow: var(--shadow);
}
.m-cell { background:#fff; border:3px dashed rgba(29,53,87,.25); border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:clamp(1.6rem,6vw,2.8rem); }
.m-cell.target { border-style:solid; border-color:var(--gold); background:#FFF9E8;
  animation: hint-pulse 1s ease-in-out infinite; }
#mission-bot {
  position:absolute; z-index:3; pointer-events:none;
  transition: transform .45s cubic-bezier(.34,1.3,.64,1);
  display:flex; align-items:center; justify-content:center;
}
#mission-bot svg { width:86%; height:86%; overflow:visible; }
#mission-bot.hop svg { animation: hop .45s ease; }
@keyframes hop { 50% { transform:translateY(-16px) scale(1.05,.95); } }
.mission-pad { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px; padding: 4px 0 14px; }
.pad-mid { display:flex; gap:12px; }
.pad-btn {
  width:clamp(64px, 13vw, 84px); height:clamp(56px, 10vw, 70px);
  font-size:clamp(1.5rem, 5vw, 2.2rem);
  background:#fff; border:4px solid var(--navy); border-radius:20px;
  box-shadow:0 6px 0 rgba(29,53,87,.28);
  transition: transform .1s;
}
.pad-btn:active { transform:translateY(5px); box-shadow:0 1px 0 rgba(29,53,87,.28); }
.pad-btn.correct { background:#E9FBEA; border-color:var(--mint); }
.pad-btn.nope { animation: shake .45s ease; }

/* ══════════════ ROBOT SAYS ══════════════ */
#screen-says { background: linear-gradient(180deg, #FFDDEE 0%, var(--cream) 45%); }
.says-bubble {
  position:absolute; top:2%; left:50%; transform:translateX(-50%);
  background:#fff; border:4px solid var(--navy); border-radius:24px;
  padding:10px 18px; font-size:clamp(1.6rem, 5vw, 2.4rem); z-index:6;
  box-shadow: 0 6px 0 rgba(29,53,87,.2);
}
.says-bubble::after {
  content:""; position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  border:10px solid transparent; border-top-color:var(--navy);
}
.says-bubble.talk { animation: banner-wiggle .5s ease; }
.says-progress { display:flex; justify-content:center; gap:10px; padding:0 0 18px; z-index:5; }
.says-progress .sp { width:30px; height:30px; border-radius:50%; background:#fff;
  border:3.5px solid var(--navy); opacity:.5; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.says-progress .sp.done { background:var(--mint); opacity:1; animation: pop .35s cubic-bezier(.34,1.56,.64,1); }
.says-glow { animation: says-glow-pulse .8s ease-in-out 2; }
@keyframes says-glow-pulse { 50% { filter: drop-shadow(0 0 18px rgba(255,183,3,.95)) brightness(1.15); } }

/* ══════════════ prompt arrow + tutor hand ══════════════ */
.pos-arrow { font-size:1.1em; }
#tutor-hand {
  position:fixed; z-index:75; font-size:2.4rem; pointer-events:none; display:none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.3));
  animation: hand-tap 1s ease-in-out infinite;
}
@keyframes hand-tap { 0%,100%{ transform:translateY(0) rotate(-8deg);} 50%{ transform:translateY(-10px) rotate(-8deg);} }

/* build-bolts on the complete screen */
.complete-stars .bolt-win { font-size:1em; display:inline-block; animation: star-land .5s cubic-bezier(.34,1.56,.64,1) both; }
.complete-stars .bolt-win:nth-child(2){ animation-delay:.18s; }
.complete-stars .bolt-win:nth-child(3){ animation-delay:.36s; }

/* ══════════════ ORIENTATION ACTIVITY ══════════════ */
.orient-card { max-width: min(560px, 94vw); }
.orient-label { font-size:clamp(1.2rem,4vw,1.7rem); font-weight:bold; color:var(--navy); min-height:1.3em; }
.orient-hands { display:flex; gap:clamp(14px,5vw,40px); }
.orient-hand {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:#fff; border:5px solid var(--navy); border-radius:26px;
  padding:16px clamp(14px,4vw,30px); box-shadow: var(--shadow);
  transition: transform .12s;
}
.orient-hand:active { transform:translateY(5px); }
.orient-hand.lit { border-color:var(--mint); background:#EAFBEC; box-shadow:0 6px 0 rgba(107,203,119,.5); }
.orient-hand.nope { animation: shake .45s ease; }
.orient-hand .oh-arrow { font-size:clamp(2rem,8vw,3rem); }
.orient-hand .oh-emoji { font-size:clamp(2.4rem,9vw,3.6rem); }
.orient-hand .oh-word  { font-weight:bold; font-size:1.1rem; color:var(--navy); letter-spacing:.08em; }

/* ══════════════ SETTINGS ══════════════ */
.settings-card { max-width:min(460px, 94vw); max-height:92vh; overflow-y:auto; align-items:stretch; text-align:left; gap:12px; }
.settings-title { text-align:center; font-size:clamp(1.4rem,5vw,2rem); color:var(--navy); text-shadow:0 3px 0 rgba(29,53,87,.15); }
.set-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border:3px solid var(--navy); border-radius:16px; padding:10px 16px;
  font-size:1.1rem; font-weight:bold; color:var(--navy);
}
.set-row input[type=range]{ flex:0 0 46%; height:26px; accent-color:var(--orange); cursor:pointer; }
.switch { width:30px; height:30px; accent-color:var(--teal); cursor:pointer; }
.grownup-btn { align-self:center; margin-top:4px; }
.gate-panel, .danger-panel {
  border:3px dashed var(--navy); border-radius:16px; padding:14px; text-align:center;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.gate-q { font-size:1.6rem; font-weight:bold; color:var(--navy); }
.gate-choices { display:flex; gap:12px; }
.gate-opt {
  width:64px; height:64px; font-size:1.6rem; font-weight:bold; color:#fff;
  background:linear-gradient(180deg,#5cb9f0,var(--sky) 60%,#3a86b8);
  border:4px solid var(--navy); border-radius:18px; box-shadow:0 5px 0 rgba(29,53,87,.28);
}
.gate-opt:active { transform:translateY(4px); box-shadow:none; }
.gate-opt.nope { animation: shake .45s ease; }
.danger-note { font-size:.95rem; color:var(--navy-2); }
.btn-reset { background:linear-gradient(180deg,#ff8f6b,#e0563a 60%,#c0442a); font-size:1.1rem; }
.badge-say { font-size:.72rem; color:var(--teal-d); font-weight:bold; opacity:.7; }
.badge-card { cursor:pointer; }
.badge-card.tapped { animation: pop .35s cubic-bezier(.34,1.56,.64,1); }

/* ══════════════ REDUCED MOTION ══════════════ */
:root.reduced-motion *, :root.reduced-motion *::before, :root.reduced-motion *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .05s !important;
}
:root.reduced-motion .cloud,
:root.reduced-motion .conveyor-belt::after,
:root.reduced-motion .disco-floor,
:root.reduced-motion .spot,
:root.reduced-motion .disco-ball { animation: none !important; }

@media (max-height: 480px) {
  .prompt-banner { padding:6px 10px; }
  .repeat-btn { width:44px; height:44px; font-size:1.2rem; }
  .hud-btn { width:44px; height:44px; }
}