/* Engine Explorers — design system
   Palette: island-air mint sky, garage-yellow accent, engine-state trio.
   Signature element: the Engine-o-Meter dial + dashed road motif. */
:root{
  --air:#EAF4F1;          /* pale mint sky */
  --panel:#FFFFFF;
  --ink:#2E3A46;          /* deep axle blue-grey */
  --ink-soft:#5A6B7A;
  --low:#5E9BD6;          /* sleepy blue */
  --just:#3FA66A;         /* just-right green */
  --high:#F2762E;         /* revved orange */
  --accent:#FFC24B;       /* Tug tow-truck yellow */
  --accent-deep:#E5A21F;
  --road:#37474F;
  --radius:22px;
  --shadow:0 4px 0 rgba(46,58,70,.14);
  --font:'Baloo 2','Fredoka',ui-rounded,'Hiragino Maru Gothic ProN','Arial Rounded MT Bold','Comic Sans MS',system-ui,sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font); color:var(--ink); background:var(--air);
  background-image:radial-gradient(circle at 20% 10%, #ffffff66 0 120px, transparent 130px),
                   radial-gradient(circle at 85% 25%, #ffffff55 0 90px, transparent 100px);
  min-height:100svh; touch-action:manipulation;
}
button, .btn{ font-family:var(--font); }
#app{ max-width:640px; margin:0 auto; padding:16px 16px calc(96px + env(safe-area-inset-bottom));
  min-height:100svh; }
.view{ display:flex; flex-direction:column; gap:14px; }
h1{ font-size:1.7rem; margin:.2em 0; text-align:center; }
h2{ font-size:1.2rem; margin:.3em 0; }
.center{ display:flex; justify-content:center; }
.row{ display:flex; gap:10px; align-items:center; justify-content:center; }
.row.wrap{ flex-wrap:wrap; }
.hint{ color:var(--ink-soft); text-align:center; margin:4px 0; }
.round-count{ text-align:center; color:var(--ink-soft); font-weight:700; }
.card{ background:var(--panel); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.card.slim{ padding:10px 14px; }
.card .why{ color:var(--ink-soft); font-size:.9rem; margin:.2em 0 0; }
.disclaimer{ font-size:.85rem; color:var(--ink-soft); border-top:2px dashed var(--air); padding-top:8px; }

/* ---------- read-aloud text blocks ---------- */
.say{ background:var(--panel); border-radius:16px; padding:10px 12px; margin:4px 0;
  display:flex; gap:8px; align-items:flex-start; justify-content:space-between;
  box-shadow:var(--shadow); font-size:1.05rem; line-height:1.35; }
.hear{ border:none; background:var(--air); border-radius:12px; min-width:44px; min-height:44px;
  font-size:1.1rem; cursor:pointer; flex:none; }
.tug{ display:flex; gap:10px; align-items:flex-end; }
.tug-face{ font-size:2.6rem; flex:none; filter:drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.tug .bubble{ flex:1; }
.tug .bubble .say{ border-bottom-left-radius:4px; background:#FFF6E2; border:2px solid var(--accent); }

/* ---------- buttons (garage enamel badges) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:64px; padding:10px 20px; font-size:1.1rem; font-weight:700; color:var(--ink);
  background:var(--panel); border:none; border-radius:18px; cursor:pointer;
  box-shadow:0 5px 0 rgba(46,58,70,.18); position:relative; }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(46,58,70,.18); }
.btn.primary{ background:var(--accent); box-shadow:0 5px 0 var(--accent-deep); }
.btn.big{ font-size:1.3rem; min-height:76px; padding:14px 30px; }
.btn.wide{ width:100%; }
.btn.ghost{ background:#ffffffaa; box-shadow:0 3px 0 rgba(46,58,70,.10); font-weight:600; }
.btn.danger{ background:#F8D9D4; }
.btn:focus-visible{ outline:4px solid var(--low); outline-offset:2px; }
.btn.tool{ font-size:1rem; min-height:64px; }
.btn.big-icon{ font-size:1.7rem; min-width:64px; }
.tool-grid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.btn.hold{ overflow:hidden; }
.hold-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--just);
  opacity:.35; transition:width .05s linear; border-radius:18px; }
.hold-label{ position:relative; }
.btn.confirm{ background:#E8F4EC; }

/* ---------- title ---------- */
.title-wrap{ text-align:center; padding-top:8vh; }
.game-title{ font-size:2.6rem; letter-spacing:.5px; margin:.1em 0; }
.title-accent{ color:var(--high); }
.tagline{ color:var(--ink-soft); font-size:1.1rem; margin-top:0; }
.title-sky{ font-size:1.4rem; opacity:.8; white-space:pre; }
.settings-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.page-title .view{ align-items:center; }

/* ---------- profiles ---------- */
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; }
.profile-card{ background:var(--panel); border:none; border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; }
.profile-card:active{ transform:translateY(3px); }
.p-avatar{ width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; background:#dfe9ef; border:4px solid #fff; box-shadow:var(--shadow); }
.p-avatar.big{ width:110px; height:110px; font-size:3.2rem; }
.p-avatar.small{ width:52px; height:52px; font-size:1.5rem; cursor:pointer; }
.p-name{ font-weight:700; }
.profile-card.add .p-avatar{ background:var(--air); color:var(--ink-soft); }
.swatch-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.swatch{ width:56px; height:56px; border-radius:16px; border:3px solid #fff; box-shadow:var(--shadow);
  cursor:pointer; font-size:1.5rem; background:var(--panel); display:flex; align-items:center; justify-content:center; }
.swatch .dot{ width:28px; height:28px; border-radius:50%; display:block; }
.gate-input{ font-family:var(--font); font-size:1.3rem; padding:12px; border-radius:14px;
  border:3px solid var(--road); width:100%; max-width:280px; align-self:center; text-align:center; }

/* ---------- hub / islands ---------- */
.hub-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hub-head h1{ flex:1; }
.gear{ border:none; background:var(--panel); border-radius:14px; width:52px; height:52px;
  font-size:1.4rem; cursor:pointer; box-shadow:var(--shadow); }
.island-map{ display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; padding:6px;
  background-image:repeating-linear-gradient(45deg, transparent 0 14px, #ffffff55 14px 20px); border-radius:var(--radius); }
.island{ border:none; border-radius:26px; padding:16px 10px; min-height:110px; cursor:pointer;
  background:linear-gradient(#fff,#f2f8f4); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
  border-bottom:6px solid var(--just); }
.island:nth-child(odd){ transform:rotate(-1.2deg); }
.island:nth-child(even){ transform:rotate(1.2deg); }
.island.locked{ filter:grayscale(1); opacity:.65; border-bottom-color:#b9c4c9; }
.island.done{ border-bottom-color:var(--accent); }
.island.finale{ grid-column:1/-1; border-bottom-color:var(--high); }
.isl-icon{ font-size:2.2rem; }
.isl-name{ font-weight:800; text-align:center; }
.isl-star{ position:absolute; top:8px; right:10px; font-size:1.2rem; }
.checkin-banner{ border:3px dashed var(--accent); }
.freeplay{ border:3px solid var(--just); }

/* ---------- Engine-o-Meter ---------- */
.dial{ margin:0 auto; text-align:center; }
.needle{ transition:transform .7s cubic-bezier(.34,1.4,.64,1); }
.dial-label{ font-weight:800; font-size:1.15rem; }
.dial-picks{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
.pick{ flex:1; max-width:120px; min-height:76px; border:none; border-radius:16px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:800; color:#fff;
  padding:8px 4px; font-size:.85rem; box-shadow:var(--shadow); font-family:var(--font); }
.pick:active{ transform:translateY(3px); }
.pick-emoji{ font-size:1.5rem; }
.pick-low{ background:var(--low); } .pick-just{ background:var(--just); } .pick-high{ background:var(--high); }

/* ---------- Zoomies ---------- */
.zoomie{ display:flex; flex-direction:column; align-items:center; }
.z-body{ width:100%; position:relative; box-shadow:inset 0 -8px 0 rgba(0,0,0,.12), var(--shadow); }
.z-eyes{ position:absolute; top:6px; left:0; right:0; text-align:center; font-size:1.6rem; }
.z-decal{ position:absolute; bottom:4px; right:8px; font-size:1.1rem; }
.z-wheels{ display:flex; justify-content:space-between; width:80%; margin-top:-8px; }
.z-wheel{ width:26%; aspect-ratio:1; background:var(--road); border-radius:50%;
  border:4px solid #90A4AE; }
.z-name{ font-weight:800; margin-top:6px; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes droop{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(4px) rotate(-2deg)} }
@keyframes jitter{ 0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-3px,-4px) rotate(-2deg)}
  50%{transform:translate(3px,1px) rotate(2deg)} 75%{transform:translate(-2px,2px) rotate(-1deg)} 100%{transform:translate(0,0)} }
.anim-just .z-body{ animation:bob 2.4s ease-in-out infinite; }
.anim-low .z-body{ animation:droop 3.6s ease-in-out infinite; filter:saturate(.7) brightness(.96); }
.anim-high .z-body{ animation:jitter .5s linear infinite; }

/* ---------- games ---------- */
.stage{ display:flex; flex-direction:column; gap:12px; }
.game-box{ background:var(--panel); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px; align-items:center; position:relative; min-height:180px; }
.state-card{ background:var(--panel); border-radius:var(--radius); padding:12px; width:100%; max-width:190px;
  box-shadow:var(--shadow); border-top:8px solid; text-align:center; }
.sc-low{ border-color:var(--low);} .sc-just{ border-color:var(--just);} .sc-high{ border-color:var(--high);}
.sc-emoji{ font-size:2rem; } .sc-name{ font-weight:800; }
.body-fig{ position:relative; width:180px; height:300px; margin:0 auto; background:#F4EFE6;
  border-radius:90px 90px 30px 30px; box-shadow:var(--shadow); display:block; }
.body-zone{ position:absolute; border:none; background:#ffffffcc; border-radius:50%; cursor:pointer;
  font-size:1.1rem; min-width:56px; min-height:56px; box-shadow:var(--shadow); }
.body-zone.picked{ background:var(--accent); }
.bz-head{ top:8px; left:50%; transform:translateX(-50%); }
.bz-chest{ top:86px; left:50%; transform:translateX(-50%); }
.bz-tummy{ top:152px; left:50%; transform:translateX(-50%); }
.bz-hands{ top:120px; left:6px; } .bz-legs{ bottom:12px; left:50%; transform:translateX(-50%); }
.cup{ width:80px; height:120px; border:5px solid var(--road); border-top:none; border-radius:0 0 22px 22px;
  position:relative; overflow:hidden; background:#fff; }
.cup-fill{ position:absolute; bottom:0; left:0; right:0; height:0%; background:var(--low); transition:height .1s linear; }
.wall{ font-size:1.6rem; white-space:pre; text-align:center; transition:transform .1s; }
.bignum{ font-size:2.4rem; font-weight:800; color:var(--high); }
.pairs-grid{ display:grid; grid-template-columns:repeat(4,minmax(58px,1fr)); gap:10px; width:100%; }
.pairs-card{ aspect-ratio:1; } .pairs-card.matched{ background:#E8F4EC; }
.room{ position:relative; width:100%; max-width:320px; height:120px; background:#FFF3D6; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; overflow:hidden; box-shadow:var(--shadow); }
.room-shade{ position:absolute; inset:0; background:#0d1b2a; pointer-events:none; transition:opacity .15s; }
.slider{ width:100%; max-width:320px; height:44px; accent-color:var(--accent-deep); }
.sparkle{ position:absolute; min-width:56px; min-height:56px; font-size:1.5rem; }
.beat-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.beat{ width:60px; height:60px; border:none; border-radius:50%; background:var(--panel); font-size:1.4rem;
  box-shadow:var(--shadow); cursor:pointer; opacity:.45; }
.beat.on{ opacity:1; background:var(--accent); transform:scale(1.15); }
.beat.hit{ background:var(--just); opacity:1; }
.scene-art{ text-align:center; font-size:2.6rem; }
.boss-progress{ text-align:center; font-weight:800; color:var(--high); }
.stage.boss{ background:linear-gradient(#eef3f8,transparent); border-radius:var(--radius); }

/* ---------- pacer ---------- */
.pacer-label{ font-weight:800; text-align:center; }
.pacer-shape{ width:120px; height:120px; margin:6px auto; transition:transform linear, border-radius linear;
  display:flex; align-items:center; justify-content:center; font-size:2rem; }
.shape-circle{ border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffd9a3, var(--high)); }
.shape-star{ background:transparent; font-size:4.5rem; }
.shape-square{ border-radius:18px; background:linear-gradient(#bcd9f5,var(--low)); }
.ph-in{ transform:scale(1.35); } .ph-hold{ transform:scale(1.35) rotate(3deg); } .ph-out{ transform:scale(0.85); }
.pacer-text{ text-align:center; font-size:1.2rem; font-weight:700; min-height:1.6em; }

/* ---------- calm corner ---------- */
.calm-wrap{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; padding:20px; text-align:center; }
.calm-title{ font-size:1.6rem; margin:0; }
.pacer-circle{ width:150px; height:150px; border-radius:50%; background:#ffffff55; border:4px solid #ffffffaa;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700;
  transition:transform 4s ease-in-out; }
.pacer-circle.grow{ transform:scale(1.35); transition-duration:4s; }
.pacer-circle.shrink{ transform:scale(0.8); transition-duration:6s; }
.calm-note{ opacity:.85; }
.drift{ position:absolute; font-size:1.6rem; opacity:.7; animation:driftUp 14s linear infinite; }
.d0{left:10%; animation-delay:0s;} .d1{left:28%; animation-delay:3s;} .d2{left:46%; animation-delay:6s;}
.d3{left:64%; animation-delay:1.5s;} .d4{left:80%; animation-delay:8s;} .d5{left:90%; animation-delay:5s;}
@keyframes driftUp{ 0%{ top:105%; } 100%{ top:-10%; } }
.calm-fab{ position:fixed; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:50;
  width:60px; height:60px; border-radius:50%; border:none; background:var(--low); color:#fff;
  font-size:1.5rem; box-shadow:var(--shadow); cursor:pointer; }

/* ---------- nav ---------- */
.bottomnav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around;
  background:var(--panel); border-top:3px solid var(--air); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
.nav-b{ border:none; background:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:60px; min-height:60px; cursor:pointer; border-radius:14px; font-family:var(--font); color:var(--ink); }
.nav-b.on{ background:var(--air); }
.nav-i{ font-size:1.5rem; } .nav-t{ font-size:.72rem; font-weight:700; }

/* ---------- journal / garden / missions / badges ---------- */
.journal-list{ display:flex; flex-direction:column; gap:8px; }
.journal-row{ background:var(--panel); border-radius:14px; padding:10px 12px; display:flex; gap:10px;
  align-items:center; box-shadow:var(--shadow); }
.j-date{ color:var(--ink-soft); font-size:.85rem; min-width:84px; }
.j-dot{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.garden-plot{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; background:#DDEBD2;
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.plot-cell{ aspect-ratio:1; background:#C9DDB8; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:1.9rem; color:#9DB58A; }
.plot-cell.grown{ background:#EFF7E6; animation:pop .5s ease; }
.plot-cell.wide{ grid-column:span 2; aspect-ratio:auto; padding:8px; }
@keyframes pop{ 0%{transform:scale(.5)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
.mission-list{ display:flex; flex-direction:column; gap:10px; }
.mission{ display:flex; gap:12px; align-items:flex-start; }
.mission.done{ opacity:.8; border-left:8px solid var(--just); }
.m-icon{ font-size:2rem; flex:none; }
.m-body{ flex:1; display:flex; flex-direction:column; gap:8px; }
.m-done{ font-weight:800; color:var(--just); }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.badge{ background:var(--panel); border-radius:var(--radius); padding:14px 8px; text-align:center;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; opacity:.55; }
.badge.got{ opacity:1; border-bottom:6px solid var(--accent); }
.badge-i{ font-size:2rem; } .badge-n{ font-weight:700; font-size:.85rem; }

/* ---------- studio ---------- */
.studio-h{ text-align:center; margin-bottom:2px; }
.studio-preview{ background:var(--panel); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }

/* ---------- brain break ---------- */
.break-wrap{ position:fixed; inset:0; z-index:70; background:linear-gradient(#20355c,#31518a); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; text-align:center; }
.break-head{ position:absolute; top:calc(14px + env(safe-area-inset-top)); font-weight:800; font-size:1.1rem; opacity:.9; }
.break-big{ font-size:2rem; line-height:1.3; max-width:640px; }
.break-wrap .pacer-text{ color:#fff; }
.skipper{ position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); right:16px; }
.exiter{ position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); left:16px; }
.break-wrap .game-box{ background:#ffffff22; box-shadow:none; }

/* ---------- certificate ---------- */
.certificate{ background:#FFFDF6; border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); }
.cert-border{ border:6px double var(--accent-deep); border-radius:16px; padding:22px 14px; text-align:center; }
.cert-name{ font-size:2rem; color:var(--high); margin:.2em 0; }
.cert-sub{ letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); font-size:.8rem; }
.cert-tools{ font-size:1.4rem; }
.cert-sign{ margin-top:14px; font-style:italic; }
@media print{
  body{ background:#fff; } .bottomnav,.calm-fab,.btn{ display:none !important; }
  #app{ padding:0; max-width:none; } .certificate{ box-shadow:none; }
}

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom)); transform:translate(-50%,20px);
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:16px; opacity:0;
  transition:all .35s ease; z-index:80; max-width:88vw; text-align:center; font-weight:600; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- accessibility modes ---------- */
.no-motion *, .no-motion *::before, .no-motion *::after{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
.contrast{ --air:#ffffff; --ink:#111; --ink-soft:#333; }
@media (min-width:700px){ h1{font-size:2rem;} .break-big{font-size:2.6rem;} }