/* Learning layer: hints, array model, report card, fact map and teacher panel share the desk's ivory language. */
.story-text{margin:-8px 0 20px;padding:14px 16px;border-left:4px solid #e2a93b;background:#fff3d6;border-radius:0 9px 9px 0;font-size:19px;line-height:1.5;font-weight:700}
.missing-factor strong{border:2px dashed var(--orange);border-radius:10px;padding:0 10px;background:#fff1ea}
.hint-box{margin:6px 0 4px;padding:14px 16px;border:1px solid #e2c77c;border-radius:10px;background:#fff8e3}
.hint-box h3{margin:0 0 8px;font-size:17px;color:#7a5410}
.hint-box ol{margin:0;padding-left:22px;font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums}
.hint-box li:last-child{font-weight:800}
.model-switch{display:inline-flex;border:1px solid #96bfba;border-radius:22px;padding:3px;margin:0 0 12px;background:#f1f6f2}
.model-switch button{border:0;background:none;border-radius:18px;padding:7px 16px;min-height:38px;font-size:15px;font-weight:800;color:#125d5a}
.model-switch button[aria-pressed="true"]{background:var(--teal);color:#fff}
.array-model{--dot:22px;display:grid;grid-template-columns:repeat(var(--cols),var(--dot));gap:4px;justify-content:start;margin:4px 0 14px;padding:12px;border:1px dashed #8caaa3;border-radius:10px;background:#f1f6f2;width:max-content;max-width:100%;overflow-x:auto}
.array-model i{width:var(--dot);height:var(--dot);border-radius:50%;background:#dbe7e0;border:1.5px solid #607a70}
.array-model i.counted{background:#ffdc70;border-color:#12655c}
.array-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:14px}
.array-tools p{margin:0;font-size:15px;line-height:1.5;flex:1 1 220px}
.link-button{background:none;border:0;padding:10px 0;min-height:44px;color:var(--teal);font-size:16px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.link-button.quiet{color:var(--muted);font-weight:600}
.desk-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;margin-top:10px}
.focus-note{margin:16px 0 0;padding:10px 14px;border-radius:8px;background:#e5f1ec;color:#125d5a;font-size:15px;font-weight:800}
.mission-summary{margin:0 0 26px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fffdf8}
.mission-summary h3{margin:0 0 8px;font-size:18px}
.mission-summary ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.7}
.mission-summary li:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:1px}
.mission-summary li.fluent:before{background:var(--teal)}.mission-summary li.helped:before{background:#e2a93b}.mission-summary li.missed:before{background:var(--orange)}
.flight-screen .mission-summary p{font-size:15px;line-height:1.5;margin:8px 0 4px;color:var(--ink)}
.map-screen h2,.teacher-screen h2{font-size:36px;line-height:1.1;letter-spacing:-.025em;margin:0 0 10px}
.map-intro,.teacher-note{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 18px}
.grade-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.grade-tabs button,.focus-chips button{border:1.5px solid #bbc6c5;background:#fffdf8;color:var(--ink);border-radius:20px;padding:6px 14px;min-height:40px;font-size:15px;font-weight:800}
.grade-tabs button[aria-pressed="true"],.focus-chips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.map-scroll{overflow-x:auto;max-width:100%;padding-bottom:4px}
.fact-map{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums;margin:0 auto}
.fact-map caption{caption-side:bottom;font-size:13px;color:var(--muted);padding-top:8px;text-align:left}
.fact-map th{font-size:14px;color:var(--muted);font-weight:800;min-width:26px;height:26px}
.fact-map th.corner{color:#9aa5ab}
.fact-map td{width:36px;height:34px;border-radius:7px;text-align:center;font-size:14px;font-weight:800}
.fact-map td.unseen,.map-legend .unseen{background:#eef0ec;border:1px dashed #c4cbc6}
.fact-map td.again,.map-legend .again{background:#f9d9cf;border:1px solid #e5a08c}
.fact-map td.growing,.map-legend .growing{background:#fbe7b0;border:1px solid #e2c77c}
.fact-map td.solid,.map-legend .solid{background:var(--teal);color:#fff;border:1px solid var(--teal)}
.map-legend{list-style:none;padding:0;margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)}
.map-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px}
.map-count{font-weight:800;margin:6px 0 18px}
.map-screen .primary,.teacher-screen .primary{width:100%}
.teacher-block{border-top:1px solid var(--line);padding:16px 0 18px}
.teacher-block h3{margin:0 0 6px;font-size:19px}
.teacher-block h4{margin:16px 0 4px;font-size:16px}
.teacher-block>p{margin:0 0 12px;color:var(--muted);font-size:15px;line-height:1.5}
.focus-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.focus-chips button{padding:6px 0;border-radius:9px}
label.check{display:flex;align-items:center;gap:10px;font-weight:700;margin:2px 0;min-height:40px}
label.check span{color:var(--muted);font-weight:400}
label.check input{width:22px;height:22px;accent-color:var(--teal)}
.teacher-stats{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0;font-size:16px}
.teacher-stats dd{margin:0;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.plain-list{margin:0;padding-left:20px;font-size:15px;line-height:1.7}
.danger-button{display:block;width:100%;margin:4px 0 14px;padding:12px;min-height:46px;border:1.5px solid #d9a497;border-radius:9px;background:#fff6f2;color:#9d392a;font-size:15px;font-weight:800}
@media(max-width:650px){.story-text{font-size:17px}.map-screen h2,.teacher-screen h2{font-size:30px}.fact-map td{width:28px;height:28px;font-size:12px}.fact-map th{min-width:20px;font-size:12px}.focus-chips{grid-template-columns:repeat(4,1fr)}.grade-tabs{gap:6px}.grade-tabs button{padding:6px 10px;font-size:14px}.model-switch button{padding:6px 12px}}
.teacher-links{margin:16px 0 0;text-align:center}.teacher-links a{color:var(--teal);font-weight:800;text-underline-offset:4px}
/* Tall two-column screens (iPad portrait): loaded last so it wins; the game fills the screen instead of leaving an empty band below. */
@media(min-width:851px) and (orientation:portrait){.workspace{min-height:calc(100svh - 170px)}}
/* In-game keypad on touch screens: big keys right under the answer, the system keyboard never opens. */
.keypad{display:none}
.touch-keypad .keypad:not([hidden]){display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.keypad button{min-height:56px;border:1.5px solid #bbc6c5;border-radius:12px;background:#fffdf8;color:var(--ink);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.keypad button:active{background:#e5f1ec;border-color:var(--teal);transform:translateY(1px)}
.keypad .key-back{font-size:19px;color:var(--muted)}
.keypad .key-check{background:var(--orange);border-color:var(--orange);color:#fff;font-size:19px}
.keypad .key-check:active{background:#9f2e1e;border-color:#9f2e1e}
.touch-keypad .answer-row .primary{display:none}
.touch-keypad .answer-row input{width:100%;text-align:center;caret-color:transparent;font-size:30px}
.touch-keypad .feedback:not(:empty){margin-top:10px}
/* Touch: help sits above the answer as two pills, so it stays visible next to the keypad. */
.touch-keypad #gameScreen:not([hidden]){display:flex;flex-direction:column}
.touch-keypad #gameScreen>*{order:0}
.touch-keypad #gameScreen>#answerForm,.touch-keypad #gameScreen>#feedback,.touch-keypad #gameScreen>#nextQuestion,.touch-keypad #gameScreen>#keypad,.touch-keypad #gameScreen>#hintBox,.touch-keypad #gameScreen>#countHelp,.touch-keypad #gameScreen>.save-status{order:2}
.touch-keypad .help-row{order:1;display:flex;gap:8px;margin:0 0 10px}
.touch-keypad .help-row .help-toggle{flex:1;justify-content:center;margin:0;padding:6px 8px;gap:6px;white-space:nowrap;border:1.5px solid #96bfba;border-radius:22px;background:#f1f6f2;font-size:15px}
.touch-keypad .help-row .help-toggle[aria-expanded="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
/* Edge-to-edge shell (iOS app, viewport-fit=cover): pages keep clear of the status bar, notch and home indicator. */
.topbar{padding-top:max(18px,calc(env(safe-area-inset-top) + 6px))}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
footer{padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px))}
.panel-close{display:none;margin:0 0 6px auto;background:none;border:0;color:var(--teal);font-weight:800;font-size:15px;min-height:36px;padding:4px 0}
/* Phones while solving: one full-screen game, scene above and a dark console below; nothing scrolls. */
@media(max-width:650px){
 .topbar{padding-top:max(14px,calc(env(safe-area-inset-top) + 4px))}
 body.phone-game{background:#0b1a2b;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body.phone-game footer,body.phone-game .header-note{display:none}
 body.phone-game .topbar{flex:none;width:100%;max-width:none;margin:0;flex-wrap:nowrap;gap:8px;min-height:0;padding:calc(env(safe-area-inset-top) + 6px) 14px 8px;background:#0b1a2b}
 body.phone-game .brand{color:#fff9ed;font-size:18px}
 body.phone-game .brand svg{width:24px;height:24px}
 body.phone-game .header-actions{flex-wrap:nowrap;gap:6px}
 body.phone-game .setting-button{background:transparent;border-color:#36597a;color:#dfebf3;min-height:36px;padding:6px 9px}
 body.phone-game .setting-button span{display:none}
 body.phone-game .setting-button[aria-pressed="false"]{background:#1f3b56;color:#9fb6c8}
 body.phone-game .topbar .text-button{color:#fff9ed;margin:0;padding:6px 0;min-height:36px}
 body.phone-game .workspace{flex:1;min-height:0;margin:0;border-radius:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;overflow:hidden}
 body.phone-game .space{flex:1 1 auto;min-height:0;padding:6px 16px 8px;border-radius:0}
 body.phone-game .mission-top{position:relative;inset:auto;align-items:center}
 body.phone-game .space-caption,body.phone-game .journey-label,body.phone-game .theme-label,body.phone-game .route-heading,body.phone-game .route,body.phone-game .flight-tally,body.phone-game .build-status>span,body.phone-game .departure-label{display:none}
 body.phone-game .mission-top h1{font-size:22px;margin:0}
 body.phone-game .mission-stamp{font-size:10px;padding:4px 8px}
 body.phone-game .sky{flex:1 1 auto;height:auto;min-height:112px;margin-top:2px}
 body.phone-game .scene-status{font-size:13px}
 body.phone-game .rocket-wrap,body.phone-game .assembly-guides{height:min(230px,calc(100% - 28px));bottom:20px}
 body.phone-game .rocket-wrap{width:auto;aspect-ratio:2/3}
 body.phone-game .assembly-guides{width:auto;aspect-ratio:100/138}
 body.phone-game .launchpad{bottom:15px}
 body.phone-game .target{width:min(170px,40vw,calc(100% - 44px));height:auto;aspect-ratio:1;bottom:22px}
 body.phone-game .target span{font-size:11px;line-height:14px;top:calc(100% + 1px)}
 body.phone-game .build-status{margin-top:2px}
 body.phone-game .segments{gap:6px}
 body.phone-game .segments i{width:22px;height:22px;font-size:11px}
 body.phone-game .desk{flex:none;display:block;padding:10px 14px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(#10253b,#0b1a2b);color:#fff9ed;border-top:1px solid #ffffff14}
 body.phone-game #gameScreen .question-meta{margin:0 0 6px;font-size:12px}
 body.phone-game #gameScreen .question-meta span:first-child{background:#ffffff14;color:#cfe3ea;padding:3px 9px}
 body.phone-game #gameScreen .question-meta span:last-child{color:#9fb6c8}
 body.phone-game #gameScreen .question-title{display:none}
 body.phone-game .story-text{margin:0 0 8px;padding:8px 12px;font-size:15px;background:#ffcf651f;color:#fff3cf;border-left-color:#e2a93b}
 body.phone-game .equation{gap:8px;align-items:center}
 body.phone-game .factor{padding:5px 10px 4px;border-radius:12px;min-width:58px}
 body.phone-game .factor strong{font-size:36px}
 body.phone-game .factor>span{font-size:11px;margin-top:0}
 body.phone-game .equation>b{font-size:24px;line-height:1;color:#9fb6c8}
 body.phone-game .unknown{font-size:36px;color:#fff9ed;line-height:1}
 body.phone-game #gameScreen .count-instruction{margin:6px 0 8px;font-size:15px;color:#dfebf3}
 body.phone-game .help-row{margin:0 0 8px}
 body.phone-game .help-row .help-toggle{background:#ffffff0d;border-color:#36597a;color:#bfe7e0;min-height:36px;font-size:14px}
 body.phone-game .help-row .help-toggle[aria-expanded="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
 body.phone-game #answerForm label{display:none}
 body.phone-game .answer-row input{background:#081524;border-color:#36597a;color:#fff9ed;padding:6px 12px;font-size:26px;min-height:46px}
 body.phone-game .answer-row input::placeholder{color:#6f8aa0;font-size:16px}
 body.phone-game .feedback{font-size:14px;line-height:1.4}
 body.phone-game .feedback:not(:empty){margin-top:6px}
 body.phone-game .feedback.error{color:#ffb4a3;padding:0}
 body.phone-game .feedback.success{background:#0f3f3a;color:#a9ebdd;padding:8px 12px}
 body.phone-game .next{margin-top:8px;min-height:50px}
 body.phone-game .keypad:not([hidden]){gap:6px;margin-top:8px}
 body.phone-game .keypad button{min-height:48px;background:#1d3a55;border-color:#30557a;color:#fff9ed;font-size:24px;border-radius:10px}
 body.phone-game .keypad button:active{background:#2b5274;border-color:#70c9bb}
 body.phone-game .keypad .key-back{color:#bcd0de;font-size:17px}
 body.phone-game .keypad .key-check{background:var(--orange);border-color:var(--orange);color:#fff;font-size:18px}
 body.phone-game #gameScreen .save-status{display:none}
 body.phone-game #countHelp:not([hidden]),body.phone-game #hintBox:not([hidden]){position:fixed;left:0;right:0;top:0;height:var(--panel-bottom,50vh);overflow-y:auto;overscroll-behavior:contain;z-index:30;margin:0;padding:calc(env(safe-area-inset-top) + 10px) 16px 14px;background:#fffdf7;color:var(--ink);border:0;border-radius:0 0 18px 18px;box-shadow:0 10px 30px #0008}
 body.phone-game .panel-close{display:block}
}
@media(max-width:650px){body.phone-game .brand{white-space:nowrap;font-size:17px}}
/* Short phones (SE class): tighter console so the scene keeps room for the rocket and its five pieces. */
@media(max-width:650px) and (max-height:760px){
 body.phone-game #gameScreen .question-meta{display:none}
 body.phone-game .factor strong,body.phone-game .unknown{font-size:30px}
 body.phone-game .factor>span{font-size:10px}
 body.phone-game #gameScreen .count-instruction{margin:4px 0 6px;font-size:14px}
 body.phone-game .help-row{margin-bottom:6px}
 body.phone-game .help-row .help-toggle{min-height:32px;font-size:13px}
 body.phone-game .answer-row input{min-height:40px;font-size:22px;padding:4px 12px}
 body.phone-game .keypad:not([hidden]){gap:5px;margin-top:6px}
 body.phone-game .keypad button{min-height:42px;font-size:21px}
 body.phone-game .desk{padding-top:8px}
}
/* Phones: the ready, flight and arrival screen shares the full-screen console. */
@media(max-width:650px){
 body.phone-game #flightScreen .large-number{font-size:28px;line-height:1}
 body.phone-game #flightScreen h2{font-size:24px;line-height:1.15;margin:4px 0}
 body.phone-game #flightScreen #flightCopy{font-size:15px;line-height:1.45;margin:0 0 10px;color:#c9dbe6}
 body.phone-game #flightScreen .mission-summary{margin:0 0 10px;padding:10px 12px;background:#ffffff0a;border-color:#ffffff1a;color:#fff9ed}
 body.phone-game #flightScreen .mission-summary h3{font-size:14px;margin:0 0 2px;color:#cfe3ea}
 body.phone-game #flightScreen .mission-summary ul{font-size:13px;line-height:1.55}
 body.phone-game #flightScreen .mission-summary p{font-size:13px;line-height:1.4;margin:4px 0 0;color:#fff9ed}
 body.phone-game #flightScreen .mission-summary .link-button{min-height:32px;padding:2px 0;font-size:14px;color:#8fe0cf}
 body.phone-game #flightScreen .celebration-message{margin:0 0 10px;font-size:15px!important;padding:8px 12px!important}
 body.phone-game #flightScreen .primary{min-height:52px}
 body.phone-game #flightScreen .save-status{display:none}
 body.phone-game .countdown{font-size:72px}
}
@media(max-width:650px) and (max-height:760px){
 body.phone-game #flightScreen .large-number{display:none}
 body.phone-game #flightScreen .mission-summary h3{display:none}
}
/* Flight screen on phones: rocket and planet sized from the screen, not the flexing scene, so the console
   changing on arrival never resizes them (which would restart the landing scene) and the landed rocket fits. */
@media(max-width:650px){
 body.phone-game .workspace[data-screen="flightScreen"] .rocket-wrap,body.phone-game .workspace[data-screen="flightScreen"] .assembly-guides{height:min(200px,20dvh)}
 body.phone-game .workspace[data-screen="flightScreen"] .target{width:min(150px,40vw,14dvh)}
}
/* Phones: the class chooser opens straight into the same full-screen scene and console. */
@media(max-width:650px){
 body.phone-game #classScreen h2{font-size:26px;line-height:1.1;color:#fff9ed}
 body.phone-game #classScreen h2 br{display:none}
 body.phone-game #classScreen h2 span{color:#70c9bb}
 body.phone-game #classScreen .intro{font-size:14px;margin:4px 0 10px;color:#c9dbe6}
 body.phone-game #classScreen .how-it-works{display:none}
 body.phone-game .class-options{gap:8px}
 body.phone-game .class-choice{padding:9px 12px;border:0}
 body.phone-game .class-choice>span:first-child{font-size:26px}
 body.phone-game .class-choice small{font-size:11px;margin-top:2px}
 body.phone-game .choice-arrow{top:8px;right:10px}
 body.phone-game .focus-note{margin:8px 0 0;padding:6px 10px;font-size:13px;background:#ffffff14;color:#bfe7e0}
 body.phone-game .desk-links{margin-top:6px}
 body.phone-game .desk-links .link-button{min-height:36px;padding:4px 0;font-size:14px;color:#8fe0cf}
 body.phone-game .desk-links .link-button.quiet{color:#9fb6c8}
 body.phone-game .resume-panel{padding-bottom:10px;margin-bottom:10px;border-color:#ffffff1a}
 body.phone-game .class-screen .resume-panel h2{font-size:18px;color:#fff9ed}
 body.phone-game .resume-panel>p{font-size:13px;margin:2px 0 8px;color:#c9dbe6}
 body.phone-game .resume-panel .primary{min-height:46px;padding:10px 14px;font-size:16px}
 body.phone-game .resume-panel .resume-note{display:none}
}
@media(max-width:650px) and (max-height:760px){
 body.phone-game #classScreen .intro{display:none}
 body.phone-game #classScreen h2{font-size:23px;margin-bottom:8px}
}
@media(max-width:650px){.class-screen h2>span::before{content:" "}}
/* Phones: help panels start below the status bar. */
@media(max-width:650px){
 body.phone-game #countHelp:not([hidden]),body.phone-game #hintBox:not([hidden]){top:env(safe-area-inset-top);height:calc(var(--panel-bottom,50vh) - env(safe-area-inset-top));padding-top:10px}
}
/* Phones: the fact map and teacher panel sit in the same dark frame as a sheet that scrolls inside,
   so nothing slides under the status bar. */
@media(max-width:650px){
 body.phone-panel{background:#0b1a2b;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body.phone-panel footer,body.phone-panel .header-note,body.phone-panel .space{display:none}
 body.phone-panel .topbar{flex:none;width:100%;max-width:none;margin:0;flex-wrap:nowrap;gap:8px;min-height:0;padding:calc(env(safe-area-inset-top) + 6px) 14px 8px;background:#0b1a2b}
 body.phone-panel .brand{color:#fff9ed;font-size:17px;white-space:nowrap}
 body.phone-panel .brand svg{width:24px;height:24px}
 body.phone-panel .header-actions{flex-wrap:nowrap;gap:6px}
 body.phone-panel .setting-button{background:transparent;border-color:#36597a;color:#dfebf3;min-height:36px;padding:6px 9px}
 body.phone-panel .setting-button span{display:none}
 body.phone-panel .setting-button[aria-pressed="false"]{background:#1f3b56;color:#9fb6c8}
 body.phone-panel .topbar .text-button{color:#fff9ed;margin:0;padding:6px 0;min-height:36px}
 body.phone-panel .workspace{flex:1;min-height:0;margin:0;border-radius:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;overflow:hidden}
 body.phone-panel .desk{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:block;margin:0 8px;border-radius:18px 18px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom) + 20px);background:#fffdf7}
}
/* Edge-to-edge shell: a solid strip behind the status bar, so scrolled content never shows under the clock. */
body::before{content:'';position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:#f6f3e9;z-index:60;pointer-events:none}
@media(max-width:650px){body.phone-game::before,body.phone-panel::before{background:#0b1a2b}}
/* Fullscreen toggle: an action, not an on/off setting, so it keeps the normal button look. */
.fs-exit{display:none}#fullscreenToggle[aria-pressed="true"] .fs-enter{display:none}#fullscreenToggle[aria-pressed="true"] .fs-exit{display:block}
#fullscreenToggle[aria-pressed="false"]{background:#fffdf7;color:var(--ink)}
@media(max-width:650px){#fullscreenToggle{display:none!important}}
/* Phone layout with a mouse or trackpad (narrow desktop window): the same help pills, without the keypad. */
@media(max-width:650px){
 body.phone-game .help-row{display:flex;gap:8px;margin:8px 0 0}
 body.phone-game .help-row .help-toggle{flex:1;justify-content:center;margin:0;padding:6px 8px;gap:6px;white-space:nowrap;border:1.5px solid #36597a;border-radius:22px}
 body.phone-game.touch-keypad .help-row{margin:0 0 8px}
}
/* Computers, smartboards and tablets: the game fits the screen for projection; only the right panel may scroll.
   Rocket and planet follow the screen height, so landing always fits and never resizes mid-scene. */
@media(min-width:851px){
 body.phone-game{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body.phone-game .topbar{flex:none;width:100%;padding-top:max(10px,calc(env(safe-area-inset-top) + 6px));padding-bottom:10px}
 body.phone-game footer{flex:none;padding-top:8px;padding-bottom:max(10px,calc(env(safe-area-inset-bottom) + 6px))}
 body.phone-game .workspace{flex:1 1 auto;min-height:0;margin-top:0;grid-template-rows:minmax(0,1fr)}
 body.phone-game .space{min-height:0}
 body.phone-game .sky{flex:1 1 auto;height:auto;min-height:200px}
 body.phone-game .rocket-wrap,body.phone-game .assembly-guides{height:min(225px,26dvh)}
 body.phone-game .rocket-wrap{width:auto;aspect-ratio:2/3}
 body.phone-game .assembly-guides{width:auto;aspect-ratio:164/225}
 body.phone-game .target{width:min(180px,18dvh);height:auto;aspect-ratio:1}
 body.phone-game .desk{min-height:0;overflow-y:auto;align-items:flex-start}
 body.phone-game .desk>.screen{margin:auto 0}
}
/* Shorter classroom screens (1366×768 laptops, 1280×720 projectors): tighter spacing. */
@media(min-width:851px) and (max-height:860px){
 body.phone-game .space{padding-top:20px;padding-bottom:14px}
 body.phone-game .mission-top h1{font-size:34px}
 body.phone-game .route-heading{margin-top:10px}
 body.phone-game .route{margin-top:6px;padding-bottom:4px}
 body.phone-game .route img{width:30px;height:30px}
 body.phone-game .flight-tally{margin-top:4px}
 body.phone-game .desk{padding-top:22px;padding-bottom:22px}
 body.phone-game .class-screen h2{font-size:38px}
 body.phone-game #classScreen .intro{margin:10px 0 16px}
 body.phone-game #classScreen .how-it-works{display:none}
 body.phone-game .question-meta{margin-bottom:12px}
 body.phone-game .question-title{font-size:24px;margin-bottom:14px}
 body.phone-game .factor strong,body.phone-game .unknown{font-size:52px}
 body.phone-game .count-instruction{margin:14px 0 16px}
 body.phone-game .flight-screen h2{font-size:34px;margin:10px 0}
 body.phone-game .flight-screen p{margin-bottom:16px}
 body.phone-game .large-number{font-size:52px}
}
@media(min-width:851px) and (max-height:800px){body.phone-game #classScreen .intro{display:none}body.phone-game .class-screen h2{font-size:34px;margin-bottom:14px}}
@media(min-width:851px) and (max-height:740px){body.phone-game .class-screen h2{font-size:30px}body.phone-game .class-options{gap:10px}body.phone-game .class-choice{padding:11px 14px}body.phone-game .class-choice small{margin-top:4px}body.phone-game .desk{padding-top:16px;padding-bottom:16px}}
/* No double-tap zoom anywhere (fast keypad taps like "1, 1" must not zoom); pinch zoom stays available on the web. */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Grades 2–4 (Maarif Modeli): three class cards, estimation choices, worked place-value steps, strategy badges. */
.class-options{grid-template-columns:repeat(3,1fr)}
.class-choice small{line-height:1.3}
.choices:not([hidden]){display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.choice{min-height:64px;border:2px solid #bbc6c5;border-radius:14px;background:#fffdf8;color:var(--ink);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;touch-action:manipulation}
.choice:hover:enabled{border-color:var(--teal);background:#e5f1ec}
.choice.wrong{border-color:#e5a08c;background:#f9d9cf;color:#9d392a}
.work-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.work-steps li{padding:10px 12px;border:1px dashed #8caaa3;border-radius:9px;background:#f1f6f2;color:#536b65;font-size:18px;font-weight:800}
.work-steps li.open{background:#12655c;border-style:solid;border-color:#12655c;color:#fff9ed}
.work-steps li:last-child{background:#fff8e3;border-color:#e2c77c;color:#7a5410}
.work-steps li:last-child.open{background:#ffdc70;border:1px solid #e2a93b;color:var(--ink)}
.equation.long .factor strong,.equation.long .unknown{font-size:46px}
.equation{flex-wrap:wrap}
.map-strategies h3{font-size:17px;margin:16px 0 8px}
.strategy-list{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.strategy-list li{padding:6px 12px;border-radius:20px;font-size:14px;font-weight:800;border:1px dashed #c4cbc6;background:#eef0ec;color:var(--muted)}
.strategy-list li.growing{background:#fbe7b0;border:1px solid #e2c77c;color:#7a5410}
.strategy-list li.again{background:#f9d9cf;border:1px solid #e5a08c;color:#9d392a}
.strategy-list li.solid{background:var(--teal);border:1px solid var(--teal);color:#fff}
@media(max-width:650px){
 body.phone-game .class-choice{padding:9px 10px}
 body.phone-game .class-choice>span:first-child{font-size:24px}
 body.phone-game .class-choice small{font-size:11px}
 body.phone-game .choice-arrow{display:none}
 body.phone-game .choice{background:#1d3a55;border-color:#30557a;color:#fff9ed;font-size:20px;min-height:56px}
 body.phone-game .choice.wrong{background:#3b2430;border-color:#8a4a46;color:#ffb4a3}
 body.phone-game .equation.long .factor strong,body.phone-game .equation.long .unknown{font-size:28px}
 .work-steps li{font-size:16px;padding:8px 10px}
}
/* Teacher level choice: four equal chips (Otomatik, Kolay, Orta, Zor). */
.level-chips{grid-template-columns:repeat(4,1fr)}
.level-chips button{font-size:14px}
.teacher-levels{margin:10px 0 0;font-size:14px;color:var(--muted)}
@media(max-width:650px){.level-chips{grid-template-columns:repeat(2,1fr)}}
/* Simpler screens: icon-only header buttons, one Yardım button, tools inside the help panel, star report card. */
.setting-button.icon-only{width:44px;padding:0;gap:0}
.setting-button.icon-only span{display:none}
#changeClass.icon-only{color:var(--ink)}
.help-row .help-toggle{width:100%;justify-content:center}
.panel-tools{display:flex;align-items:center;gap:14px;margin:0 0 8px}
.panel-tools .link-button{min-height:36px;padding:4px 0;font-size:15px}
.panel-tools .panel-close{display:block;margin:0 0 0 auto}
#countHelp .hint-box{margin:0 0 12px}
#countProgress{display:none}
.count-help-top{justify-content:flex-end}
.mission-summary ul li.star-score{font-size:20px;letter-spacing:.04em;color:#e2a93b;font-weight:800}
.mission-summary ul li.star-score:before{display:none}
.flight-screen .mission-summary p:empty{display:none}
.save-status:empty{display:none}
.how-it-works{font-size:15px}
.class-choice>span:first-child{margin:4px 0}
@media(max-width:650px){
 body.phone-game .help-row .help-toggle{font-size:15px}
 body.phone-game #countHelp #hintBox:not([hidden]){position:static;height:auto;overflow:visible;z-index:auto;padding:12px 14px;border:1px solid #e2c77c;border-radius:10px;background:#fff8e3;box-shadow:none;color:var(--ink)}
 body.phone-game .setting-button.icon-only{width:38px;min-height:36px}
 body.phone-game #changeClass.icon-only,body.phone-panel #changeClass.icon-only{color:#dfebf3}
 body.phone-game .mission-summary ul li.star-score{font-size:18px}
}
/* Guided tour: the real element glows, a short bubble says what to do; taps go through to the game. */
.tour{position:fixed;inset:0;z-index:90;pointer-events:none}
.tour[hidden]{display:none}
.tour-spot{position:fixed;border-radius:16px;box-shadow:0 0 0 4px #ffcf65,0 0 0 9999px #0b1a2b99;transition:all .25s var(--ease)}
.tour-bubble{position:fixed;pointer-events:auto;background:#fffdf7;color:var(--ink);border-radius:16px;padding:14px 16px 10px;box-shadow:0 14px 36px #0007;font-size:17px;line-height:1.45}
.tour-bubble p{margin:0 0 8px;font-weight:700}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-actions .link-button{min-height:36px;padding:4px 0;font-size:14px}
.tour-actions .primary{min-height:42px;padding:8px 18px;font-size:16px}
/* Level picker after the class card. */
.level-picker[hidden]{display:none}
.level-grade{font-weight:800;font-size:18px;margin:0 0 10px}
.level-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.level-choice{border:2px solid transparent;border-radius:14px;padding:14px 8px;text-align:center;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.level-choice b{font-size:22px}.level-choice small{font-size:12px;color:#4b5b63}
.level-choice[data-level="1"]{background:#dff1ea}.level-choice[data-level="2"]{background:#ffe8b6}.level-choice[data-level="3"]{background:#ffdcd2}
.level-choice[aria-pressed="true"]{border-color:var(--teal)}
.level-picker .link-button{margin-top:6px}
.desk-links{justify-content:flex-start;gap:4px 18px}
.desk-links #openTeacher{margin-left:auto}
@media(max-width:650px){body.phone-game .level-grade{color:#fff9ed;font-size:16px;margin-bottom:8px}body.phone-game .level-choice{padding:10px 6px}body.phone-game .level-choice b{font-size:19px}body.phone-game .level-picker .link-button{color:#9fb6c8}}
/* Back from a question: the class label is a button. */
.grade-back{border:0;background:#e5f2ee;color:#14595b;border-radius:20px;padding:6px 12px;font-size:15px;font-weight:800;min-height:34px}
.grade-back:hover{background:#d3eae3}
@media(max-width:650px){body.phone-game #gameScreen .question-meta .grade-back{background:#ffffff1a;color:#e6f2f5;padding:5px 12px;font-size:13px;min-height:32px}}
/* Table practice: timed rounds, separate from the untimed rocket journey. */
.practice-entry{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;min-height:48px;border:2px dashed #e2a93b;border-radius:14px;background:#fff8e3;color:#7a5410;font-size:17px;font-weight:800}
.practice-entry small{font-weight:600;font-size:13px;opacity:.85}
.practice-screen h2{font-size:30px;line-height:1.15;margin:0 0 4px}
.practice-intro{color:var(--muted);margin:0 0 12px;font-size:16px}
.practice-label{font-weight:800;font-size:14px;margin:10px 0 6px;color:var(--muted)}
.practice-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.practice-chips.times{grid-template-columns:repeat(4,1fr)}
.practice-chips button{border:1.5px solid #bbc6c5;background:#fffdf8;color:var(--ink);border-radius:10px;min-height:42px;font-size:15px;font-weight:800;padding:4px}
.practice-chips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.practice-record{min-height:1.4em;margin:10px 0 6px;font-weight:800;color:#b07a10}
#practiceSetup .primary,#practiceDone .primary{width:100%}
#practiceSetup .link-button{margin-top:6px}
.practice-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--muted)}
.practice-meta .link-button{min-height:34px;padding:2px 0;font-size:14px}
.practice-score{color:#b07a10}
.practice-timer{height:12px;border-radius:6px;background:#e3e7e6;overflow:hidden;margin:10px 0 6px}
.practice-timer[hidden]{display:none}
.practice-timer i{display:block;height:100%;background:var(--teal);transform-origin:left;transform:scaleX(1)}
.practice-timer.late i{background:#e2a93b}
.practice-q{text-align:center;font-size:54px;font-weight:800;margin:10px 0 0;font-variant-numeric:tabular-nums;line-height:1.1}
.practice-ans{display:inline-block;min-width:1.6em;border-bottom:4px solid var(--teal)}
.practice-ans.empty{color:#9aa5ab}
.practice-feedback{min-height:1.5em;text-align:center;font-weight:800;margin:6px 0}
.practice-feedback.ok{color:#086a5f}.practice-feedback.no{color:#9d392a}
.practice-keys{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.practice-result{font-size:20px;font-weight:800}
.practice-again{color:var(--muted)}
.practice-links{display:flex;justify-content:space-between;margin-top:8px}
@media(max-width:650px){
 body.phone-game .practice-entry{margin-top:10px;min-height:44px;background:#ffcf651a;border-color:#e2a93b99;color:#ffdc8a;font-size:16px}
 body.phone-game .practice-screen h2{font-size:24px;color:#fff9ed}
 body.phone-game .practice-intro,body.phone-game .practice-label,body.phone-game .practice-again,body.phone-game .practice-meta{color:#c9dbe6}
 body.phone-game .practice-chips button{background:#1d3a55;border-color:#30557a;color:#fff9ed;min-height:38px}
 body.phone-game .practice-chips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
 body.phone-game .practice-record,body.phone-game .practice-score{color:#ffdc8a}
 body.phone-game .practice-timer{background:#ffffff1a}
 body.phone-game .practice-q{color:#fff9ed;font-size:46px}
 body.phone-game .practice-ans.empty{color:#6f8aa0}
 body.phone-game .practice-feedback.ok{color:#a9ebdd}body.phone-game .practice-feedback.no{color:#ffb4a3}
 body.phone-game .practice-result,body.phone-game #practiceDone h2{color:#fff9ed}
 body.phone-game .practice-links .link-button{color:#8fe0cf}body.phone-game .practice-links .quiet,body.phone-game #practiceSetup .quiet{color:#9fb6c8}
}
@media(max-width:650px) and (max-height:760px){body.phone-game .practice-q{font-size:38px}body.phone-game .practice-intro{display:none}}
@media(max-width:650px){body.phone-game .practice-meta .link-button{color:#e6f2f5}}
/* Planets change place between stops (placed instantly, so the flight is always planned from the final spot). */
/* Idle engine: a small flickering flame under the rocket and a gentle hover, as if it were already humming. */
.rocket-wrap::after{content:'';position:absolute;left:50%;top:90%;width:15%;height:17%;transform:translateX(-50%);transform-origin:50% 0;border-radius:45% 45% 50% 50%/30% 30% 70% 70%;background:radial-gradient(ellipse 50% 60% at 50% 25%,#fffbe0 0 22%,#ffd166 40%,#ff7b3a 68%,transparent 74%);filter:blur(.5px);opacity:0;z-index:-1;pointer-events:none}
.sky.engine-on:not(.flying):not(.arrived):not(.igniting) .rocket-wrap::after{opacity:1;animation:flame-flicker .16s ease-in-out infinite alternate}
.sky.engine-on:not(.flying):not(.arrived) .rocket-wrap img{animation:rocket-hover 2.6s ease-in-out infinite}
@keyframes flame-flicker{from{transform:translateX(-50%) scale(.92,.82);opacity:.85}to{transform:translateX(-50%) scale(1.06,1.12);opacity:1}}
@keyframes rocket-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body.calm-motion .rocket-wrap::after{display:none}
body.calm-motion .rocket-wrap img{animation:none!important}
@media(prefers-reduced-motion:reduce){.rocket-wrap::after{display:none}.rocket-wrap img{animation:none!important}}
/* Origin planet: the rocket stands on the last stop's planet (a horizon at the bottom left of the scene). */
.origin{position:absolute;z-index:2;pointer-events:none}
.origin img{display:block;width:100%;height:100%;object-fit:contain}
.sky .launchpad{display:none}
.departure-label{z-index:4!important;background:#0b1a2bb3;color:#e6f2f5!important;padding:1px 8px;border-radius:10px}
/* Shooting stars during the flight between planets: thin bright streaks gliding down and left. */
.shooting-star{position:absolute;z-index:1;width:var(--len,100px);height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,#fff 0%,#fff8 30%,transparent 100%);transform:rotate(-28deg) translateX(0);transform-origin:0 50%;opacity:0;animation:shoot 1s ease-out forwards;filter:drop-shadow(0 0 3px #fff)}
.shooting-star::before{content:'';position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #fff9}
@keyframes shoot{0%{opacity:0;transform:rotate(-28deg) translateX(0)}15%{opacity:1}100%{opacity:0;transform:rotate(-28deg) translateX(-260px)}}
.space[data-theme="day"] .shooting-star{background:linear-gradient(90deg,#fffbe0 0%,#fff6c088 30%,transparent 100%)}
body.calm-motion .shooting-star{display:none}
@media(prefers-reduced-motion:reduce){.shooting-star{display:none}}
/* The calm-motion setting inside the teacher panel keeps its label (header buttons are icon-only on phones). */
#teacherScreen .setting-button{background:#fffdf7!important;color:var(--ink)!important;border-color:#bdc9cc!important;width:auto;padding:8px 14px;min-height:44px}
#teacherScreen .setting-button span{display:inline!important}
#teacherScreen .setting-button[aria-pressed="false"]{background:#e5f1ec!important;color:#125d5a!important}