/* Early Bird Arcade prototype styles. System fonts only (no web fonts). */
:root{
  --bg:#fff8ec; --ink:#1f2a44; --muted:#4a5568; --card:#ffffff;
  --sky:#56B4E9; --blue:#0072B2; --orange:#E69F00; --green:#009E73;
  --yellow:#F0E442; --verm:#D55E00; --purple:#CC79A7;
  --arcade:#2b4c9b; --learn:#0b7a5c;
  --radius:18px; --tap:56px;
  --font:"Trebuchet MS","Segoe UI",Verdana,system-ui,-apple-system,Roboto,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:19px;line-height:1.5;color:var(--ink);background:var(--bg);
  background-image:radial-gradient(circle at 10% 0%,#ffe9c7 0,transparent 40%),radial-gradient(circle at 90% 10%,#d9f0ff 0,transparent 40%);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:4px solid #111;outline-offset:3px;box-shadow:0 0 0 7px var(--yellow)}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.site-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:4px solid #ffd9a0;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.15rem;min-height:var(--tap)}
.brand img{width:40px;height:40px}
.header-spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);min-width:var(--tap);padding:10px 20px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--blue);color:#fff;border-color:#03406b}
.btn.go{background:var(--green);color:#fff;border-color:#03543e}
.btn.big{font-size:1.4rem;padding:16px 30px;min-height:72px}
.btn.icon{padding:0;width:var(--tap);font-size:1.5rem}
.mute-btn[aria-pressed="true"]{background:#ffe1e1}
main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:16px}
h1{font-size:2rem;line-height:1.2;margin:.4em 0}
h2{font-size:1.5rem;margin:1.2em 0 .5em}
.lead{font-size:1.15rem;color:var(--muted)}
.section{border-radius:24px;padding:16px;margin:18px 0}
.section.arcade{background:#e7eeff;border:4px solid var(--arcade)}
.section.learn{background:#e3f7ef;border:4px solid var(--learn)}
.section h2{margin-top:0;display:flex;align-items:center;gap:10px}
.age-badge{display:inline-block;font-size:.95rem;padding:2px 12px;border-radius:999px;background:#fff;border:2px solid currentColor}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--ink);border:3px solid #d6dbe7;min-height:120px;box-shadow:0 4px 0 #d6dbe7}
.card:hover{border-color:var(--ink)}
.card .thumb{width:100%;aspect-ratio:16/9;border-radius:12px;display:block;background:#eee}
.card strong{font-size:1.25rem}
.card span{color:var(--muted);font-size:1rem}
.site-footer{background:#fff;border-top:4px solid #ffd9a0;padding:16px;text-align:center;font-size:1rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.site-footer a{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;font-weight:700}
.prose{background:#fff;border-radius:var(--radius);padding:18px 20px;border:3px solid #e2e6ef}
.prose li{margin:.3em 0}
.todo{background:#fff3b0;border:2px dashed #8a6d00;padding:2px 6px;border-radius:6px;font-weight:700}
.note{background:#eef6ff;border-left:6px solid var(--blue);padding:10px 14px;border-radius:8px}

/* Game shell */
.game-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.hud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;width:100%;font-weight:800;font-size:1.1rem}
.hud .pill{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 14px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.stage{position:relative;width:100%;max-width:560px;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{display:block;width:100%;height:auto;border-radius:16px;border:4px solid var(--ink);background:#7a5230;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(255,248,236,.93);border-radius:16px;text-align:center;padding:20px}
.overlay[hidden]{display:none}
.overlay h2{margin:0;font-size:1.8rem}
.overlay p{margin:0;max-width:30ch}
.dpad{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:repeat(3,72px);gap:6px;justify-content:center;margin-top:4px}
.dpad button{font-size:1.8rem;border-radius:16px;border:3px solid var(--ink);background:#fff;touch-action:none;color:var(--ink)}
.dpad button:active,.dpad button.on{background:var(--yellow)}
.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}
.dpad .mid{grid-column:2;grid-row:2;font-size:1.3rem}
.how{font-size:1rem;color:var(--muted);max-width:560px;text-align:center}
.banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:#fff;border:4px solid var(--ink);border-radius:18px;padding:10px 22px;font-weight:900;font-size:1.6rem;pointer-events:none}
.banner[hidden]{display:none}

/* Learn games */
.learn-top{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.levels{display:flex;gap:10px;justify-content:center}
.levels button{min-width:76px;min-height:64px;border-radius:18px;border:3px solid var(--ink);background:#fff;font-size:1.3rem;font-weight:900;color:var(--ink)}
.levels button[aria-pressed="true"]{background:var(--green);color:#fff;border-color:#03543e;box-shadow:0 0 0 4px var(--yellow)}
.prompt-box{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:24px;border:4px solid var(--learn);padding:16px;min-height:180px;justify-content:center;width:100%;max-width:640px;margin:10px auto}
.prompt-big{font-size:5rem;line-height:1.1}
.prompt-word{font-size:3.4rem;font-weight:900;letter-spacing:.08em}
.caption{font-size:1.25rem;font-weight:700;text-align:center;min-height:1.6em;color:#103d30}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:640px;margin:0 auto}
.choice{min-height:110px;border-radius:24px;border:4px solid var(--ink);background:#fff;font-size:3rem;font-weight:900;color:var(--ink);cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;font-family:var(--font)}
.choice.word{font-size:2rem}
.choice.right{background:#c8f5e1;border-color:var(--green)}
.choice.right::after{content:" ✔";font-size:.7em}
.choice.dim{opacity:.35}
.choice.wobble{animation:wobble .4s}
@keyframes wobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.objects{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:2.6rem;max-width:520px}
.objects .sep{font-weight:900;font-size:2.6rem;padding:0 6px}
.stars{font-size:1.6rem;letter-spacing:4px}
.progress{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.progress i{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);display:inline-block}
.progress i.done{background:var(--green)}
.trace-stage{width:100%;max-width:460px;margin:0 auto;touch-action:none}
.trace-stage canvas{width:100%;height:auto;display:block;background:#fff;border:4px solid var(--learn);border-radius:24px;touch-action:none}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.celebrate{text-align:center}
.celebrate .prompt-big{animation:pop 1s ease-in-out infinite alternate}
@keyframes pop{from{transform:scale(1)}to{transform:scale(1.12)}}

/* Modal (grown-up gate, break note) */
.modal-back{position:fixed;inset:0;background:rgba(20,25,40,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:#fff;border-radius:22px;border:4px solid var(--ink);padding:20px;max-width:420px;width:100%;text-align:center}
.modal h2{margin-top:0}
.gate-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.settings{display:grid;gap:12px}
.setting{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;background:#f7f9fc;border-radius:14px;padding:10px 14px}
.setting .levels button{min-width:60px;min-height:52px;font-size:1.1rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:480px){h1{font-size:1.6rem}.prompt-big{font-size:4rem}.choice{min-height:96px;font-size:2.5rem}.choice.word{font-size:1.6rem}.dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px)}}
.obj{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:52px}
.obj.countable{cursor:pointer;border-radius:12px}
.obj.counted{background:#e3f2fd}
.obj.counted::after{content:attr(data-n);position:absolute;right:-6px;top:-6px;background:#0072B2;color:#fff;font-size:1rem;font-weight:900;border-radius:999px;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.obj.taken{opacity:.45}
.obj.taken::after{content:"✖";position:absolute;color:#D55E00;font-size:2.4rem;font-weight:900}
.choice small{font-size:.55em;margin-left:.2em;font-weight:700}
@media (max-width:480px){
  body[data-game] main{padding:8px 10px}
  body[data-game] h1{font-size:1.3rem;margin:.1em 0 .3em}
  .hud{gap:6px;font-size:1rem}
  .hud .pill{padding:2px 10px;min-height:40px;border-width:2px}
  .hud .btn.icon{min-height:48px;width:48px;min-width:48px}
}