/* Self-hosted Nunito (variable, latin) — works offline, no third-party request. */
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('assets/fonts/nunito-latin.woff2') format('woff2');
}
:root{
  --sky:#E6F1EE; --ink:#213A4A; --ink-soft:#52677A;
  --green:#2E9E6B; --green-d:#247c54; --blue:#2F6FB0; --coral:#E08A5F;
  --card:#ffffff; --line:#dbe6e3; --bad:#E0883E;
  --r:18px; --tap:64px;
  --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--sky);
  -webkit-font-smoothing:antialiased; line-height:1.4;
  min-height:100vh; min-height:100dvh;
}
body.font-dyslexic{ --font:'Comic Sans MS','Trebuchet MS',Verdana,sans-serif; letter-spacing:.3px; }
body.high-contrast{ --ink:#0b1b26; --ink-soft:#2a3f4d; --sky:#ffffff; --line:#9bb0ad; }

.screen{
  max-width:560px; margin:0 auto; min-height:100vh; min-height:100dvh;
  padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
}
.center{ display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }

/* buttons */
.btn{
  font-family:inherit; font-weight:800; font-size:1.15rem; color:#fff;
  background:var(--green); border:none; border-radius:var(--r);
  padding:16px 24px; min-height:var(--tap); cursor:pointer; width:100%;
  box-shadow:0 3px 0 var(--green-d); transition:transform .06s ease;
}
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--green-d); }
.btn.big{ font-size:1.4rem; padding:20px; }
.btn.ghost{ background:#fff; color:var(--ink); box-shadow:0 3px 0 var(--line); }
.btn.next{ margin-top:18px; background:var(--blue); box-shadow:0 3px 0 #245a92; }
.icon-btn{
  font-size:1.4rem; background:#fff; border:1px solid var(--line); border-radius:14px;
  width:48px; height:48px; min-width:48px; cursor:pointer; color:var(--ink); line-height:1;
}
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

/* start */
.start-card{ text-align:center; background:#fff; border-radius:28px; padding:34px 26px; box-shadow:0 10px 30px rgba(33,58,74,.10); max-width:420px; }
.start-card h1{ font-size:2.2rem; margin:14px 0 6px; }
.tagline{ color:var(--green-d); font-size:1.35rem; font-weight:800; margin:14px 0 4px; letter-spacing:.2px; }
.subtag{ color:var(--ink-soft); font-size:1.05rem; margin:0 0 22px; }
.fineprint{ color:var(--ink-soft); font-size:.92rem; margin-top:18px; }
.logo svg{ filter:drop-shadow(0 6px 12px rgba(46,158,107,.35)); }

/* home */
.home-head h2{ font-size:1.5rem; margin:8px 0 18px; }
.section-label{ font-size:1rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:22px 0 10px; }
.modes{ display:flex; flex-direction:column; gap:10px; }
.mode-btn{
  font-family:inherit; font-weight:800; font-size:1.1rem; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; min-height:var(--tap); cursor:pointer; color:var(--ink);
  display:flex; gap:12px; align-items:center;
}
.mode-btn:active{ transform:translateY(1px); }
.module-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.module-card{
  font-family:inherit; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:16px; min-height:84px; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; gap:4px;
}
.module-card:active{ transform:translateY(1px); }
.mc-title{ font-weight:800; font-size:1.08rem; }
.mc-sub{ color:var(--ink-soft); font-size:.9rem; }
.settings-fab{ position:fixed; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%; border:none; background:#fff; box-shadow:0 4px 14px rgba(33,58,74,.18); font-size:1.5rem; cursor:pointer; }
.note{ color:var(--ink-soft); }

/* play */
.topbar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.dots{ flex:1; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.dot{ width:10px; height:10px; border-radius:50%; background:#cdd9d6; }
.dot.done{ background:var(--green); }
.dot.current{ background:var(--blue); transform:scale(1.35); }
.play-title{ color:var(--ink-soft); font-weight:700; margin:6px 2px 0; font-size:.95rem; }
.prompt{ font-size:1.35rem; font-weight:800; margin:6px 2px 14px; }
.scene-wrap{ background:#fff; border-radius:22px; padding:10px; box-shadow:0 6px 18px rgba(33,58,74,.08); }
.scene{ width:100%; height:auto; display:block; border-radius:14px; }
.scene .tap{ cursor:pointer; }
.scene .tap:focus{ outline:none; }
.scene .tap:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:6px; }

/* choices */
.choices{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.choice{
  font-family:inherit; font-weight:700; font-size:1.12rem; text-align:left;
  background:#fff; border:2px solid var(--line); border-radius:16px;
  padding:16px 18px; min-height:var(--tap); cursor:pointer; color:var(--ink);
}
.choice:active{ transform:translateY(1px); }
.choice.right{ border-color:var(--green); background:#e9f7f0; }
.choice.wrong{ border-color:var(--bad); background:#fdeee3; }

/* feedback */
.feedback{ margin-top:14px; min-height:0; font-size:1.12rem; font-weight:700; border-radius:14px; padding:0 14px; max-height:0; overflow:hidden; transition:max-height .2s ease, padding .2s ease; }
.feedback.show{ max-height:240px; padding:14px; }
.feedback.good{ background:#e9f7f0; color:var(--green-d); }
.feedback.bad{ background:#fdeee3; color:#9a5a2c; }

/* done */
.done-card{ text-align:center; background:#fff; border-radius:28px; padding:32px 24px; box-shadow:0 10px 30px rgba(33,58,74,.10); max-width:420px; width:100%; }
.score{ font-size:2.6rem; font-weight:800; color:var(--green); }
.score.fail{ color:var(--bad); }
.done-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }

/* settings panel */
.panel{ position:fixed; inset:0; background:rgba(20,34,42,.4); display:none; align-items:flex-end; justify-content:center; z-index:50; }
.panel.open{ display:flex; }
.panel-inner{ background:#fff; width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:18px 20px calc(30px + env(safe-area-inset-bottom)); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.panel-head h3{ margin:0; font-size:1.3rem; }
.panel .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--line); font-size:1.1rem; font-weight:700; }
.panel .row input{ width:26px; height:26px; }
.panel-note{ color:var(--ink-soft); font-size:.9rem; margin-top:12px; }

/* animations */
@keyframes blink{ 50%{ opacity:.18; } }
.blink{ animation:blink 1s steps(1) infinite; }
@keyframes pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.12);} 100%{ transform:scale(1);} }
.chosen{ animation:pop .5s ease; transform-box:fill-box; transform-origin:center; }
@keyframes hp{ 0%,100%{ filter:none;} 50%{ filter:drop-shadow(0 0 8px rgba(46,158,107,.95)); } }
.hintpulse{ animation:hp 1s ease 2; transform-box:fill-box; transform-origin:center; }
@keyframes shake{ 10%,90%{ transform:translateX(-2px);} 30%,70%{ transform:translateX(4px);} 50%{ transform:translateX(-5px);} }
.scene .tap.wrong{ animation:shake .4s ease; transform-box:fill-box; transform-origin:center; }

/* cars driving up to an intersection (each slides in along its approach) */
@keyframes arriveS{ from{ transform:translateY(135px);} to{ transform:translateY(0);} }
@keyframes arriveN{ from{ transform:translateY(-135px);} to{ transform:translateY(0);} }
@keyframes arriveE{ from{ transform:translateX(135px);} to{ transform:translateX(0);} }
@keyframes arriveW{ from{ transform:translateX(-135px);} to{ transform:translateX(0);} }
.scene .arrive-south{ animation:arriveS .7s ease-out both; }
.scene .arrive-north{ animation:arriveN .7s ease-out both; }
.scene .arrive-east{ animation:arriveE .7s ease-out both; }
.scene .arrive-west{ animation:arriveW .7s ease-out both; }

body.reduce-motion .blink{ animation:none; opacity:1; }
body.reduce-motion .chosen,
body.reduce-motion .hintpulse,
body.reduce-motion .tap.wrong,
body.reduce-motion .arrive-south,
body.reduce-motion .arrive-north,
body.reduce-motion .arrive-east,
body.reduce-motion .arrive-west{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .blink{ animation:none; opacity:1; }
  .chosen,.hintpulse,.tap.wrong,
  .arrive-south,.arrive-north,.arrive-east,.arrive-west{ animation:none; }
}

@media (max-width:380px){
  .module-grid{ grid-template-columns:1fr; }
  .prompt{ font-size:1.2rem; }
}