:root { --ink:#1d1d2b; --yellow:#ffcf1f; --red:#e63b2e; --blue:#1f7ae0; --green:#2fb344; --belt:#f4f4f4;
        font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); text-align:center; transition:background .6s;
       background:repeating-linear-gradient(90deg,transparent 0 80px,rgba(0,0,0,.07) 80px 160px),#3fa34d; }
body.night { background:
  radial-gradient(2px 2px at 20% 30%,#fff,transparent), radial-gradient(2px 2px at 70% 20%,#fff,transparent),
  radial-gradient(3px 3px at 40% 70%,#ffe9a8,transparent), radial-gradient(2px 2px at 85% 60%,#fff,transparent),
  radial-gradient(2px 2px at 10% 80%,#fff,transparent), #14234a; color:#fff; }
#fx { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; }

header { position:relative; background:var(--ink); color:#fff; padding:28px 64px 22px; border-bottom:10px solid var(--yellow); }
h1 { margin:0; font-size:clamp(36px,8vw,88px); letter-spacing:2px; cursor:pointer; user-select:none; }
h1 .ninja { display:inline-block; animation:wobble 2.4s ease-in-out infinite; }
header p { margin:8px 0 0; font-size:clamp(18px,3.5vw,28px); }
.sound { position:absolute; top:14px; right:14px; width:56px; height:56px; font-size:28px; border:4px solid var(--yellow);
         border-radius:16px; background:#fff; cursor:pointer; }

main { max-width:1000px; margin:0 auto; padding:clamp(16px,4vw,40px); }
button { font:inherit; }
:focus-visible { outline:6px solid var(--yellow); outline-offset:3px; }

.belt { display:flex; align-items:center; justify-content:center; gap:16px; max-width:460px; margin:0 auto 18px; padding:12px 18px;
        border:5px solid var(--ink); border-radius:20px; background:#fffdf5; color:var(--ink); box-shadow:0 6px 0 var(--ink); }
.belt svg { flex:none; width:84px; height:auto; }
.belt-info { flex:1; text-align:left; }
.belt-info b { font-size:24px; }
.bar { height:16px; border:3px solid var(--ink); border-radius:10px; background:#ddd; overflow:hidden; margin:4px 0; }
#belt-bar { height:100%; width:0; background:var(--belt); box-shadow:inset 0 0 0 2px rgba(0,0,0,.25); transition:width .5s; }
.belt-info small { font-size:17px; }

.mascot-wrap { position:relative; display:flex; flex-direction:column; align-items:center; min-height:190px; }
.bubble { min-height:44px; padding:8px 16px; margin-bottom:6px; border:4px solid var(--ink); border-radius:18px; background:#fff; color:var(--ink);
          font-size:22px; font-weight:bold; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; }
.bubble.show { opacity:1; transform:none; }
.mascot { border:0; background:none; cursor:pointer; padding:0; transform-origin:50% 60%; }
.mascot svg { display:block; max-width:40vw; height:auto; overflow:visible; }
.headband { fill:var(--belt); stroke:var(--ink); stroke-width:2; }
.mascot .lids, .mascot.asleep .pupil { display:none; }
.mascot.asleep .lids { display:block; }
.mascot.asleep { animation:snooze 3s ease-in-out infinite; }
.mascot.flip { animation:flip .75s ease-in-out; }

.keepy { margin:8px auto 28px; }
.ball { font-size:clamp(80px,20vw,130px); line-height:1; background:none; border:0; cursor:pointer; padding:0; transition:transform .12s; user-select:none; }
.ball:active { transform:translateY(-30px) scale(1.12) rotate(25deg); }
.score { font-size:28px; font-weight:bold; text-shadow:0 3px 0 #fff; color:var(--ink); }

.game { max-width:600px; margin:0 auto 34px; padding:18px; border:6px solid var(--ink); border-radius:24px; background:#fffdf5; color:var(--ink); box-shadow:0 10px 0 var(--ink); }
.game h2 { margin:0 0 4px; font-size:34px; }
.how { margin:0 0 12px; font-size:20px; }
.stage { position:relative; }
#shootout { display:block; width:100%; height:auto; border:5px solid var(--ink); border-radius:16px; touch-action:manipulation; cursor:crosshair; }
.banner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(40px,12vw,76px); font-weight:bold;
          color:#fff; text-shadow:0 5px 0 var(--ink), 0 0 20px rgba(0,0,0,.4); pointer-events:none; animation:pop .35s ease-out; }
.banner[hidden] { display:none; }
.banner[data-result="goal"] { color:var(--yellow); }
.hud { margin:12px 0; font-size:22px; }
.mini { display:inline-block; padding:12px 18px; border:4px solid var(--ink); border-radius:14px; background:var(--yellow); color:var(--ink);
        font-size:19px; font-weight:bold; text-decoration:none; }

.worlds { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.world { border:6px solid var(--ink); border-radius:24px; padding:22px 16px; color:#fff; box-shadow:0 10px 0 var(--ink); }
.world .emoji { font-size:76px; line-height:1; display:block; }
.world h2 { margin:10px 0 4px; font-size:32px; text-shadow:0 3px 0 rgba(0,0,0,.35); }
.world p { margin:0; font-size:20px; }
.football { background:var(--green); } .mine { background:#8a5a33; } .lego { background:var(--red); }
.lab { display:block; margin:34px auto 8px; max-width:560px; padding:22px; border:6px solid var(--ink); border-radius:24px;
       background:var(--yellow); color:var(--ink); text-decoration:none; box-shadow:0 10px 0 var(--ink); }
.lab:hover { transform:translateY(-3px); }
.lab b { font-size:36px; display:block; }
.lab span { font-size:20px; }
footer { padding:24px 16px 40px; font-size:18px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.4); }

@keyframes wobble { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg) translateY(-6px); } }
@keyframes flip { 0% { transform:translateY(0) rotate(0); } 45% { transform:translateY(-70px) rotate(200deg); } 100% { transform:translateY(0) rotate(360deg); } }
@keyframes snooze { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg) translateY(3px); } }
@keyframes pop { 0% { transform:scale(.3); opacity:0; } 70% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }