/* Missione Quasi Doppi: colori da fumetto, pennellate e interfaccia per smartphone. */
:root { --blue:#4fc3ff; --yellow:#ffe94d; --pink:#ff566b; --pink-bright:#ff329d; --green:#9be564; --ink:#111; --display:'Lilita One','Fredoka',system-ui,sans-serif; --hand:'Patrick Hand','Fredoka',system-ui,sans-serif; --body:'Fredoka',system-ui,sans-serif; font-family:var(--body); color:var(--ink); font-synthesis:none; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body { margin:0; background:white; line-height:1.45; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #1767c4; outline-offset:5px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--display); font-weight:400; line-height:1.08; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:absolute; top:-100px; left:15px; padding:12px; background:white; z-index:100; }
.skip-link:focus { top:8px; }
.brush { position:relative; display:inline-block; isolation:isolate; padding:3px 15px 6px; }
.brush::before { content:''; position:absolute; z-index:-1; inset:1px -3px 0; background:var(--brush-color,var(--yellow)); transform:rotate(-1.5deg); clip-path:polygon(4% 5%,19% 1%,45% 4%,76% 0,96% 6%,100% 20%,96% 27%,100% 40%,97% 48%,100% 65%,96% 70%,98% 87%,92% 96%,61% 98%,32% 95%,7% 100%,0 84%,3% 70%,0 60%,3% 44%,0 30%,4% 23%,1% 15%); }
.brush-blue { --brush-color:#b0edff; }
.brush-yellow { --brush-color:#fff27c; }
.marker { background:linear-gradient(transparent 42%,#ffb8df 42% 90%,transparent 90%); padding:0 4px; box-decoration-break:clone; }
.section-kicker { font-family:var(--hand); font-size:20px; font-weight:400; line-height:1.3; }
.site-header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:70px; padding:12px max(22px,calc((100% - 1080px)/2)); background:#fffffff5; border-bottom:2px solid var(--ink); }
.brand { font-family:var(--hand); font-size:24px; font-weight:400; text-decoration:none; white-space:nowrap; }
.top-nav { display:flex; gap:24px; align-items:center; font-size:16px; }
.top-nav a { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.top-nav a:first-child:hover { text-decoration:underline; text-decoration-color:var(--pink-bright); text-underline-offset:5px; }
.nav-action { padding:7px 20px; background:var(--green); border:2px solid var(--ink); border-radius:18px 21px 17px 20px; box-shadow:2px 3px 0 var(--ink); font-family:var(--display); font-size:19px; gap:12px; }
.hero { position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:34px; max-width:1120px; margin:auto; padding:42px 24px 44px; align-items:center; }
.eyebrow { font-family:var(--hand); font-size:17px; letter-spacing:.3px; }
.hero-title-wrap { position:relative; margin:13px 0 12px; }
.hero h1 { font-size:clamp(72px,8vw,112px); letter-spacing:.5px; -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill; text-shadow:2px 3px 0 var(--ink); }
.hero h1 span { display:block; width:fit-content; }
.title-blue { color:var(--blue); transform:rotate(-2deg); }
.title-yellow { color:var(--yellow); transform:rotate(1deg); }
.hero-rocket { position:absolute; width:104px; height:auto; right:0; top:24px; transform:rotate(7deg); }
.title-spark { position:absolute; top:-10px; right:20px; color:var(--pink-bright); font-size:40px; transform:rotate(10deg); }
.hero-subtitle { font-family:var(--hand); font-size:27px; line-height:1.25; }
.hero-description { margin-top:11px; font-family:var(--hand); font-size:22px; line-height:1.25; }
.formula-demo { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; width:fit-content; padding:12px 16px 10px; margin:20px 0; border:2.5px solid var(--ink); border-radius:18px 21px 17px 19px; transform:rotate(-1deg); }
.math-token { font-family:var(--display); font-size:30px; border:2px solid var(--ink); border-radius:11px; min-width:46px; padding:2px 10px; text-align:center; }
.num-a { background:#ffb4dc; }
.num-b { background:#a9eaff; }
.num-green { background:#c5f593; }
.operator { font-family:var(--hand); font-size:27px; }
.formula-caption { flex-basis:100%; font-family:var(--hand); font-size:19px; text-align:center; }
.formula-caption strong { font-weight:400; color:#217235; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; }
.soft-note { font-size:13px; }
.primary-btn,.secondary-btn { position:relative; display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:54px; padding:12px 22px; border:3px solid var(--ink); border-radius:23px 25px 21px 26px; box-shadow:2px 3px 0 var(--ink); font-family:var(--display); font-size:21px; font-weight:400; line-height:1.15; text-decoration:none; background:var(--green); transition:transform .15s,box-shadow .15s; }
.primary-btn::before,.secondary-btn::before { content:''; position:absolute; top:5px; left:16px; right:16px; height:16px; border-top:3px solid #ffffffa8; border-radius:50%; pointer-events:none; }
.primary-btn img,.secondary-btn img { flex-shrink:0; }
.secondary-btn { background:var(--blue); }
.primary-btn:hover,.secondary-btn:hover { transform:translateY(-2px); box-shadow:2px 5px 0 var(--ink); }
.primary-btn:active,.secondary-btn:active { transform:translateY(2px); box-shadow:none; }
.big-button { font-size:23px; }
.hero-visual { position:relative; min-width:0; height:410px; }
.hero-visual::before { content:''; position:absolute; left:2%; right:2%; bottom:18px; height:55%; background:#fff5b7; border-radius:50%; transform:rotate(-5deg); }
.speech-bubble { position:absolute; top:9px; right:17px; z-index:2; background:white; padding:16px 23px; border:3px solid var(--ink); border-radius:26px 31px 25px 6px; transform:rotate(3deg); font-family:var(--hand); font-size:25px; line-height:1.15; text-align:center; }
.speech-bubble strong { font-weight:400; }
.bubble-plus { position:absolute; right:-16px; bottom:-20px; border:3px solid var(--ink); border-radius:50%; background:var(--pink-bright); font-family:var(--display); font-size:26px; width:49px; height:49px; padding-top:6px; transform:rotate(-12deg); }
.character-lineup { position:absolute; bottom:10px; left:0; width:100%; height:270px; display:flex; align-items:flex-end; justify-content:center; gap:0; }
.c-char { width:25%; height:100%; object-fit:contain; object-position:bottom; }
.c-quarketti { transform:rotate(-4deg); }
.c-greta { transform:rotate(4deg); }
.doodle { position:absolute; pointer-events:none; }
.d1 { width:55px; height:55px; left:0; top:42px; transform:rotate(-15deg); }
.d2 { width:53px; height:65px; left:26px; top:125px; transform:rotate(-12deg); }
.d3 { color:var(--blue); font-size:43px; bottom:5px; right:5px; }
.game-section { padding:34px 20px 56px; text-align:center; background:#f5fcff; border-top:2px dashed #84cdec; border-bottom:2px dashed #84cdec; }
.game-section h2 { font-size:clamp(32px,5vw,47px); margin:12px 0 10px; }
.section-intro { font-family:var(--hand); font-size:23px; max-width:700px; margin:0 auto 26px; }
.game-shell { max-width:720px; margin:auto; padding:26px; background:white; border:3px solid var(--ink); border-radius:24px 27px 23px 26px; box-shadow:4px 5px 0 var(--ink); scroll-margin-top:88px; }
.selection-title { font-family:var(--hand); font-size:24px; }
.levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.level-card { position:relative; display:flex; align-items:center; flex-direction:column; gap:5px; padding:18px 10px; border:2px solid var(--ink); border-radius:19px 22px 18px 21px; background:#fff7b1; }
.level-card[data-mode='medium'] { background:#c7f0ff; }
.level-card[data-mode='hard'] { background:#ffd3e8; }
.level-card.selected { outline:2px solid var(--ink); outline-offset:2px; box-shadow:3px 4px 0 var(--ink); }
.level-card.selected::after { content:'✓'; position:absolute; right:7px; top:5px; border:2px solid var(--ink); background:white; border-radius:50%; width:24px; height:24px; font-family:var(--body); line-height:20px; }
.level-symbol { height:47px; width:47px; object-fit:contain; margin-bottom:5px; }
.level-card strong { font-family:var(--display); font-size:18px; font-weight:400; }
.level-card span { font-size:14px; }
.level-card small { font-family:var(--hand); font-size:16px; }
.start-footer { display:flex; gap:7px 16px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.round-info { font-size:14px; }
.round-info::before { content:'✓ '; color:#287238; }
.start-main { width:min(100%,380px); }
body:not([data-game-state='start']) .hero,body:not([data-game-state='start']) .game-section>.section-kicker,body:not([data-game-state='start']) .game-section>h2,body:not([data-game-state='start']) .game-section>.section-intro { display:none; }
body:not([data-game-state='start']) .game-section { padding-top:25px; }
.game-topline { display:flex; align-items:center; gap:10px; font-size:14px; }
.question-count { background:#a9eaff; border-radius:10px; padding:7px 10px; }
.question-count strong { font-weight:600; }
.score-counter { display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:5px 9px; background:#fff7b0; border-radius:10px; font-size:19px; }
.small-action { background:white; border:2px solid var(--ink); border-radius:12px; min-width:44px; min-height:44px; font-size:24px; line-height:1; }
.progress-track { height:10px; background:#f1f1f1; border:2px solid var(--ink); border-radius:12px; overflow:hidden; margin:12px 0 16px; }
.progress-fill { height:100%; width:0; background:var(--green); transition:width .2s; }
.mascot-side { display:flex; align-items:center; gap:12px; text-align:left; max-width:400px; margin:0 auto 10px; }
.mascot-side>img { height:72px; width:53px; object-fit:contain; flex-shrink:0; }
.guide-copy { border:2px solid var(--ink); border-radius:16px 18px 17px 4px; background:#fffbe0; padding:7px 13px; }
.mascot-name { font-family:var(--body); font-size:11px; font-weight:600; }
.game-chip { font-family:var(--hand); font-size:20px; line-height:1.15; }
.challenge h3 { font-family:var(--hand); font-size:27px; font-weight:400; margin:4px 0 10px; }
.challenge h3:focus { outline:none; }
.equation { display:flex; justify-content:center; align-items:center; gap:10px; font-family:var(--display); font-size:49px; line-height:1.2; }
.equation-a,.equation-b,.equation-unknown { min-width:77px; padding:6px 13px; border:3px solid var(--ink); border-radius:14px 17px 13px 16px; }
.equation-a { background:#ffb9dd; transform:rotate(-2deg); }
.equation-b { background:#a9eaff; transform:rotate(2deg); }
.equation-unknown { background:var(--yellow); }
.equation-op { font-family:var(--hand); font-size:.8em; }
.near-double-visual { max-width:390px; background:#f8fcff; border-radius:13px; padding:9px 12px; margin:15px auto; text-align:left; }
.visual-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
.visual-row>span { flex:0 0 23px; font-size:16px; font-weight:600; }
.dot-row { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.unit-dot { display:inline-block; width:11px; height:11px; border:1.5px solid var(--ink); border-radius:3px; background:var(--blue); }
.unit-dot.extra { background:var(--pink-bright); }
.ten-block { display:inline-flex; justify-content:center; align-items:center; min-width:24px; height:19px; background:#a9eaff; border:1.5px solid var(--ink); border-radius:4px; font-size:11px; }
.visual-caption { font-family:var(--hand); font-size:17px; color:#444; }
.visual-caption strong { color:var(--ink); }
.answers-heading { font-family:var(--hand); font-size:20px; margin:4px auto 15px; }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:450px; margin:auto; }
.answer-btn { border:3px solid var(--ink); border-radius:18px 21px 17px 20px; min-height:70px; padding:9px; background:#bdeeff; font-family:var(--display); font-size:36px; line-height:1.1; box-shadow:2px 3px 0 var(--ink); }
.answer-btn:nth-child(2) { background:#fff28b; }
.answer-btn:nth-child(3) { background:#ffc2df; }
.answer-btn:nth-child(4) { background:#c4f39f; }
.answer-btn:hover:not(:disabled) { transform:translateY(-2px); }
.answer-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.answer-btn:disabled { opacity:.5; }
.answer-btn.correct { background:var(--green); opacity:1; border-width:4px; }
.answer-btn.wrong { background:#eee; opacity:.6; box-shadow:none; }
.game-help { display:flex; justify-content:space-between; flex-wrap:wrap; gap:9px; max-width:450px; margin:15px auto 0; }
.hint-btn,.sound-btn { display:inline-flex; justify-content:center; align-items:center; border:2px solid var(--ink); border-radius:13px; padding:8px 10px; min-height:44px; font-size:14px; background:#fff7b1; }
.sound-btn { background:white; font-size:13px; }
.hint-btn:disabled { opacity:.6; }
.hint-panel { margin-top:15px; padding:14px; background:#fff6ad; border:2px dashed var(--ink); border-radius:16px; text-align:left; }
.hint-panel strong { font-family:var(--display); font-size:18px; font-weight:400; }
.hint-panel p { margin-top:7px; font-family:var(--hand); font-size:21px; line-height:1.3; }
.feedback { margin-top:15px; padding:12px; border:2px solid var(--ink); border-radius:14px; font-family:var(--hand); font-size:23px; line-height:1.2; }
.feedback.positive { background:#dff8c5; }
.feedback.neutral { background:#fff5b2; }
.explanation { margin-top:13px; padding:18px; border:2px solid var(--ink); background:#f2ffe8; border-radius:18px; }
.explain-title { font-family:var(--display); font-size:22px; }
.explain-math { margin:10px 0; font-size:24px; line-height:1.4; font-weight:600; }
.explanation p { font-family:var(--hand); font-size:21px; margin-bottom:16px; line-height:1.3; }
.explanation .primary-btn { background:var(--pink-bright); color:white; }
.victory-confetti { font-size:27px; letter-spacing:5px; }
.victory-teacher { height:130px; width:auto; margin:10px auto; }
.finish-screen h3 { font-size:clamp(32px,6vw,46px); margin:12px 0; color:var(--pink-bright); -webkit-text-stroke:1px var(--ink); paint-order:stroke fill; }
.finish-screen>p:not(.section-kicker) { font-family:var(--hand); font-size:23px; }
.final-stats { display:grid; grid-template-columns:1fr 1fr; gap:13px; max-width:400px; margin:20px auto; }
.final-stats>div { border:2px solid var(--ink); border-radius:17px; background:#fff28b; padding:14px 9px; }
.final-stats>div:nth-child(2) { background:#bdeeff; }
.final-stats strong,.final-stats span { display:block; }
.final-stats strong { font-family:var(--display); font-size:32px; font-weight:400; }
.final-stats span { font-size:13px; }
.final-tip { font-family:var(--hand); font-size:23px; margin:18px auto; }
.final-tip strong { font-weight:400; background:linear-gradient(transparent 40%,#d9ffaf 40%); }
.finish-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:15px; }
.share-notice { margin-top:15px; font-size:14px!important; overflow-wrap:anywhere; }
.book-link { display:inline-block; padding:12px 0; font-size:14px; text-underline-offset:4px; }
.learning-panel { max-width:960px; margin:auto; padding:50px 24px; text-align:center; }
.learning-panel h2 { font-size:clamp(32px,5vw,44px); margin:14px 0; }
.method-intro { font-family:var(--hand); font-size:24px; }
.step-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:30px 0 22px; }
.step-list>div { position:relative; padding:22px 14px 16px; border:2.5px solid var(--ink); border-radius:20px 23px 18px 22px; background:#bdeeff; }
.step-list>div:nth-child(2) { background:#ffc2df; transform:rotate(1deg); }
.step-list>div:nth-child(3) { background:#c4f39f; }
.step-list b { position:absolute; left:14px; top:-16px; background:var(--yellow); border:2.5px solid var(--ink); border-radius:50%; font-family:var(--display); font-size:23px; font-weight:400; width:34px; height:34px; line-height:29px; }
.step-list img { margin:0 auto 10px; height:44px; object-fit:contain; }
.step-list h3 { font-size:23px; }
.step-list p { font-family:var(--hand); font-size:23px; margin-top:7px; }
.parent-tip { max-width:650px; margin:auto; padding:14px 18px; font-family:var(--hand); font-size:21px; line-height:1.3; background:#fffbe0; border-radius:15px; }
.parent-tip strong { font-weight:400; text-decoration:underline; text-decoration-color:var(--pink-bright); }
.method-play { background:var(--pink-bright); color:white; margin-top:23px; }
.explore-more { text-align:center; padding:35px 20px 40px; border-top:2px dashed var(--ink); background:#fffbe0; }
.explore-more h2 { font-size:clamp(28px,5vw,38px); }
.explore-more p { margin-top:9px; font-family:var(--hand); font-size:22px; }
.more-links { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:20px; }
.more-links a { display:inline-flex; align-items:center; min-height:48px; padding:10px 16px; background:white; border:2px solid var(--ink); border-radius:17px; font-size:15px; text-decoration:none; }
.footer { padding:24px 20px; border-top:2px solid var(--ink); background:white; text-align:center; }
.footer>a { font-family:var(--hand); font-size:25px; text-decoration:none; background:linear-gradient(transparent 30%,#fff27c 30%); }
.footer>p { font-family:var(--hand); font-size:20px; margin:9px auto; max-width:590px; }
.footer .footer-privacy { font-family:var(--body); font-size:12px; line-height:1.6; color:#4c4c4c; }
.footer nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; margin-top:15px; }
.footer nav a { font-size:12px; padding:10px 0; }
@media(max-width:760px) {
 .site-header { min-height:58px; padding:8px 16px; }
 .brand { font-size:20px; padding-inline:8px; }
 .top-nav { gap:12px; }
 .top-nav a:first-child { display:none; }
 .nav-action { min-height:40px!important; font-size:17px; padding:5px 13px; }
 .hero { display:block; max-width:520px; padding:24px 20px 20px; }
 .hero-content { text-align:center; }
 .eyebrow { font-size:15px; }
 .hero-title-wrap { display:flex; justify-content:center; align-items:center; gap:14px; margin:12px 0; }
 .hero h1 { font-size:clamp(61px,17vw,83px); -webkit-text-stroke-width:2px; line-height:.97; }
 .hero h1 span { margin-inline:auto; }
 .hero-rocket { position:static; width:62px; transform:rotate(7deg); }
 .title-spark { display:none; }
 .hero-subtitle { font-size:23px; }
 .hero-description { font-size:21px; margin-top:8px; }
 .formula-demo { margin:15px auto 16px; gap:9px; padding:9px 13px 8px; }
 .math-token { font-size:27px; min-width:43px; padding:1px 8px; }
 .formula-caption { font-size:18px; }
 .hero-actions { flex-direction:column; gap:9px; }
 .hero-actions .primary-btn { width:min(100%,330px); }
 .hero-visual { height:155px; max-width:340px; margin:18px auto 0; }
 .character-lineup { height:145px; bottom:0; }
 .hero-visual::before { bottom:0; height:90px; }
 .speech-bubble { font-size:16px; top:10px; right:6px; padding:6px 9px; border-width:2px; border-radius:14px 15px 13px 3px; }
 .speech-bubble strong { display:none; }
 .speech-bubble br { display:none; }
 .bubble-plus { width:28px; height:28px; font-size:16px; border-width:2px; padding-top:3px; bottom:-17px; right:-3px; }
 .d1 { width:30px; height:30px; top:2px; left:0; }
 .d2 { display:none; }
 .d3 { font-size:26px; bottom:1px; }
 .game-section { padding:27px 14px 36px; }
 .game-section h2 { font-size:34px; }
 .section-intro { font-size:21px; max-width:320px; margin-bottom:20px; }
 .game-shell { padding:18px 15px 22px; border-radius:21px 24px 20px 23px; box-shadow:3px 4px 0 var(--ink); scroll-margin-top:72px; }
 .selection-title { font-size:23px; }
 .levels { grid-template-columns:1fr; margin:18px 0; gap:13px; }
 .level-card { display:grid; grid-template-columns:47px 1fr; grid-template-rows:auto auto auto; gap:0 14px; text-align:left; justify-items:start; padding:11px 14px; }
 .level-symbol { grid-row:1 / 4; height:44px; width:44px; margin:0; }
 .level-card strong { font-size:19px; padding-right:19px; }
 .level-card small { font-size:16px; }
 .round-info { font-size:12px; }
 .start-footer { gap:4px 11px; margin-bottom:15px; }
 .start-main { font-size:21px; padding-inline:12px; }
 body:not([data-game-state='start']) .game-section { padding:15px 12px 27px; }
 .game-topline { gap:7px; font-size:12px; }
 .question-count { padding:7px 8px; }
 .score-counter { font-size:18px; padding:4px 7px; }
 .progress-track { margin:10px 0 11px; }
 .mascot-side { gap:9px; margin-bottom:4px; }
 .mascot-side>img { height:58px; width:43px; }
 .guide-copy { padding:6px 10px; }
 .game-chip { font-size:18px; }
 .mascot-name { font-size:10px; }
 .challenge h3 { font-size:24px; margin:7px 0 8px; }
 .equation { font-size:clamp(32px,10vw,43px); gap:7px; }
 .equation-a,.equation-b,.equation-unknown { min-width:0; padding:5px 10px; border-width:2.5px; border-radius:12px; }
 .equation-unknown { min-width:49px; }
 .near-double-visual { margin:12px auto; padding:7px 9px; }
 .visual-row { margin:4px 0; }
 .dot-row { gap:3px; }
 .unit-dot { width:9px; height:9px; border-width:1px; }
 .visual-caption { font-size:16px; }
 .answers-heading { font-size:18px; margin:0 auto 12px; padding-inline:8px; }
 .answer-grid { gap:10px; }
 .answer-btn { min-height:61px; font-size:31px; }
 .game-help { gap:6px; margin-top:13px; }
 .hint-btn,.sound-btn { padding-inline:9px; font-size:13px; }
 .explanation { padding:14px 11px; }
 .explain-math { font-size:21px; }
 .explanation p { font-size:20px; }
 .explanation .primary-btn { width:100%; padding-inline:10px; font-size:20px; }
 .finish-buttons { flex-direction:column; gap:12px; }
 .finish-buttons .primary-btn,.finish-buttons .secondary-btn { width:100%; font-size:20px; }
 .learning-panel { padding:35px 21px; }
 .step-list { gap:10px; }
 .step-list>div { padding:22px 5px 12px; border-radius:15px; }
 .step-list b { left:calc(50% - 15px); width:30px; height:30px; font-size:21px; line-height:25px; }
 .step-list img { height:34px; max-width:34px; }
 .step-list h3 { font-family:var(--hand); font-size:20px; line-height:1; }
 .step-list p { font-size:18px; line-height:1.1; }
 .parent-tip { font-size:20px; padding:13px; }
 .more-links { flex-direction:column; max-width:360px; margin-inline:auto; }
 .more-links a { justify-content:center; }
}
@media(max-width:350px) {
 .site-header { padding-inline:10px; }
 .brand { font-size:18px; }
 .hero { padding-inline:17px; }
 .hero h1 { font-size:57px; }
 .hero-rocket { width:51px; }
 .hero-title-wrap { gap:10px; }
 .hero-subtitle { font-size:21px; }
 .game-shell { padding-inline:12px; }
 .level-card { gap:0 9px; padding-inline:10px; }
 .level-card strong { font-size:17px; }
 .equation { gap:6px; font-size:32px; }
 .equation-a,.equation-b,.equation-unknown { padding-inline:8px; }
 .answers-heading { font-size:16px; }
 .hint-btn,.sound-btn { font-size:12px; padding-inline:7px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
}