@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root { --ink:#10283c; --blue:#3a8db3; --yellow:#ffd45d; --orange:#f49a39; --cream:#fff8e6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Nunito,sans-serif; background:radial-gradient(circle at 50% 40%,#fffdf5 0 13%,transparent 35%),linear-gradient(135deg,#c8eff0,#6fc7d5); }
body:before,body:after { content:"";position:fixed;border-radius:50%;opacity:.23;pointer-events:none;z-index:-1; }
body:before { width:340px;height:340px;background:#fff2a9;top:-115px;left:-90px; } body:after { width:440px;height:440px;background:#16779f;bottom:-250px;right:-140px; }
.game-shell { width:min(900px,100%);min-height:100vh;margin:auto;padding:24px 24px 32px;display:flex;flex-direction:column;align-items:center; }
header { width:100%;display:flex;justify-content:space-between;align-items:center; }
.brand { font:800 26px "Baloo 2",sans-serif;letter-spacing:-1px;display:flex;gap:7px;align-items:center; }.brand>span:last-child span { color:#ed8b36; }.brand-mark { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--ink);color:#ffe47c;font-size:22px;transform:rotate(-8deg); }
.fullscreen-button { width:39px;height:39px;border:2px solid #fff;border-radius:12px;background:#fff8df;color:#17435e;font:800 25px/1 Arial;cursor:pointer;box-shadow:0 3px 0 #4c9cac; }.fullscreen-button:active { transform:translateY(2px);box-shadow:0 1px 0 #4c9cac; }
.mission { text-align:center;margin:34px auto 12px; }.eyebrow { font-size:12px;letter-spacing:2px;font-weight:800;color:#247393;margin:0 0 5px; }.mission h1 { font:800 clamp(30px,6vw,43px)/1 "Baloo 2",sans-serif;letter-spacing:-1.5px;margin:0; }.mission p:not(.eyebrow) { margin:9px 0;color:#31596c;font-weight:700; }
.listen-panel { text-align:center;background:#fff8df;border:3px solid #fff;border-radius:20px;padding:14px 20px 11px;box-shadow:0 6px 0 #438da2;margin:10px 0 28px; }.listen-button,.next-button { border:0;cursor:pointer;font:800 18px Nunito,sans-serif;border-radius:15px;box-shadow:0 5px 0 #c97829;transition:transform .15s,box-shadow .15s; }.listen-button { background:#f59a3b;color:#fff;padding:13px 21px; }.speaker { font-size:22px;vertical-align:-2px; }.listen-button:active,.next-button:active { transform:translateY(4px);box-shadow:0 1px 0 #c97829; }.listen-panel p { font-size:13px;font-weight:800;color:#31596c;margin:7px 0 0; }
.choices { width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }.choice { min-height:195px;border:4px solid #fff;border-radius:23px;background:#fff8df;box-shadow:0 7px 0 #438da2,0 10px 18px #1b56622b;cursor:pointer;padding:15px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .16s,box-shadow .16s,background .16s;position:relative;color:var(--ink); }.choice:hover:not(:disabled) { transform:translateY(-4px);box-shadow:0 11px 0 #438da2,0 14px 22px #1b566234; }.choice:active:not(:disabled) { transform:translateY(4px);box-shadow:0 3px 0 #438da2; }.choice:disabled { cursor:default; }.choice-number { position:absolute;top:12px;left:14px;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#d7ebed;color:#17435e;font-weight:800; }.choice .label { margin-top:18px;font-size:12px;font-weight:800;letter-spacing:1.3px;color:#52717c; }.choice.correct { background:#dff5c9;border-color:#fff;box-shadow:0 7px 0 #3b9453,0 10px 18px #1b56622b; }.choice.correct:after,.choice.wrong:after { position:absolute;right:12px;top:9px;font:800 26px "Baloo 2"; }.choice.correct:after { content:"✓";color:#218445; }.choice.wrong { background:#ffe0d8;border-color:#fff;box-shadow:0 7px 0 #ce6f59,0 10px 18px #1b56622b; }.choice.wrong:after { content:"×";color:#b74935; }
.notes { min-height:69px;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 2px;border-top:2px solid #cbbd8d;border-bottom:2px solid #cbbd8d;width:100%; }.note { position:relative;display:inline-block;width:25px;height:43px; }.note .head { position:absolute;bottom:2px;left:1px;width:20px;height:14px;border-radius:50%;background:#1b2429;transform:rotate(-18deg); }.note .stem { position:absolute;width:4px;height:33px;background:#1b2429;left:18px;bottom:11px;border-radius:2px; }.note.eighth .flag { position:absolute;width:15px;height:14px;border:4px solid #1b2429;border-left:0;border-bottom:0;border-radius:0 13px 0 0;left:20px;top:0; }.pair { display:flex;position:relative;gap:0;width:49px; }.pair:after { content:"";position:absolute;top:1px;left:20px;width:30px;height:6px;background:#1b2429;border-radius:3px; }.pair .note.eighth .flag { display:none; }.rest { display:block;width:29px;height:43px;color:#1b2429;transform:translateY(-1px); }
.feedback { min-height:27px;text-align:center;font-weight:800;font-size:18px;color:#1f5d75;margin:26px 0 13px; }.feedback.success { color:#16713b; }.feedback.wrong { color:#b74935; }.next-button { background:#f59a3b;color:#fff;padding:14px 25px;margin-bottom:17px; }.next-button span { font-size:23px;vertical-align:-1px;margin-left:5px; }.keyboard-hint { margin:4px 0;color:#31596c;font-size:13px;font-weight:700;text-align:center; }.keyboard-hint kbd { background:#fff8df;border:1px solid #fff;border-radius:5px;padding:1px 5px;box-shadow:0 2px #4c9cac;color:#17435e;font:800 12px Nunito; }
@media(max-width:620px) { .game-shell{padding:18px 14px 28px}.mission{margin-top:26px}.choices{gap:11px}.choice{min-height:155px;border-radius:18px;padding:12px 7px}.notes{gap:6px;transform:scale(.82);width:122%;}.choice .label{font-size:10px}.choice-number{top:8px;left:9px}.feedback{margin-top:22px;font-size:16px} }
@media(max-width:390px) { .choices{gap:8px}.choice{min-height:140px}.notes{transform:scale(.69);width:142%}.mission h1{font-size:30px}.listen-panel{margin-bottom:20px} }