:root{--bg:#101b18;--panel:#182621;--panel-2:#1d2d27;--line:#2c3b33;--text:#f1f3e9;--muted:#a1afa4;--green:#c3ef79;--green-dark:#254f34;--amber:#f0c26a;--danger:#ff9a87;--radius:16px;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.5}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--green);outline-offset:4px}button,svg{flex-shrink:0}button{transition:background .15s,transform .15s,border-color .15s}button:active:not(:disabled){transform:translateY(1px)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.sprite{position:absolute;width:0;height:0;overflow:hidden}a{color:inherit}h1,h2,h3,p{margin:0}button{border:0}button[hidden],div[hidden],section[hidden]{display:none!important}.app-header{min-height:84px;padding:12px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);background:#0e1815}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-image{width:52px;height:52px;background:#fff;border-radius:12px;overflow:hidden;display:grid;place-items:center}.brand-image img{width:52px;height:49px;object-fit:contain}.brand strong{display:block;font-size:25px;letter-spacing:-1.2px;line-height:1.12;font-weight:750}.brand-dot{color:var(--green)}.brand small{display:block;letter-spacing:1.6px;font-size:8px;margin-top:6px;color:var(--muted)}.top-nav{display:flex;gap:7px;align-self:stretch;align-items:center}.nav-button{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:9px;background:none;color:#b6c1b6;font-weight:550;font-size:13px}.nav-button:hover{background:#1b2923}.nav-button.active{color:var(--green);background:#233324}.nav-button svg{width:19px;height:19px}.header-actions{display:flex;gap:8px}.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:transparent;display:grid;place-items:center;position:relative;color:#c0cbbf}.icon-button:hover{background:var(--panel-2)}.sound-off{position:absolute;font-weight:900;font-size:25px;transform:rotate(8deg);color:var(--danger)}main{max-width:1720px;margin:auto;padding:27px 38px 12px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}.eyebrow,.section-label{font-size:10px;letter-spacing:1.65px;font-weight:700;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}.eyebrow>span{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-size:32px;line-height:1.2;letter-spacing:-1.1px;font-weight:650}h1 em{font-style:normal;color:var(--green)}.page-heading p{color:var(--muted);margin-top:7px;font-size:13px}.training-tag{display:flex;gap:12px;align-items:center;border-left:1px solid var(--line);padding-left:22px;color:var(--muted)}.training-tag svg{color:var(--green);width:27px;height:27px}.training-tag strong{color:#dce5d4;display:block;font-size:12px;font-weight:600}.training-tag span{font-size:11px}.mission-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}.mission-card{text-align:left;display:flex;align-items:center;gap:11px;min-width:0;padding:13px 12px;background:#16241e;border:1px solid #2a3b30;border-radius:11px;color:#b9c8b9;position:relative}.mission-card:hover{background:#233426}.mission-card.active{background:#c2ee7a;color:#203621;border-color:#c2ee7a;box-shadow:0 3px 18px #b9e4710c}.mission-card .mission-number{height:30px;width:30px;border:1px solid currentColor;border-color:#4b5b48;border-radius:50%;font-size:11px;font-family:var(--mono);display:grid;place-items:center;flex-shrink:0;opacity:.8}.mission-card.active .mission-number{border-color:#73964c}.mission-card strong{display:block;font-size:11px;line-height:1.25;font-weight:650}.mission-card small{display:block;font-size:9px;opacity:.7;margin-top:3px}.mission-card .done-marker{position:absolute;right:5px;top:4px;font-size:9px;color:var(--green)}.mission-card.active .done-marker{color:#2b5c36}.sim-layout{display:grid;grid-template-columns:minmax(0,1fr) 298px;gap:18px;align-items:start}.sim-main{min-width:0}.viewport{height:clamp(355px,48vh,560px);min-height:355px;background:#202c28;border:1px solid #3c4a3e;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;position:relative;isolation:isolate}#warehouse{display:block;width:100%;height:100%;outline-offset:-4px}.viewport-top{display:flex;justify-content:space-between;align-items:center;position:absolute;z-index:2;top:0;left:0;right:0;padding:16px 18px;background:linear-gradient(#16221ee8,transparent);font-size:10px;pointer-events:none}.viewport-top>div{display:flex;align-items:center;gap:10px}.viewport-top strong{letter-spacing:1px;font-weight:650;color:#dae2d5}.viewport-top span{color:#b2bcae}.viewport-top .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #bdec7970}.viewport-separator{opacity:.4}.viewport-tools{pointer-events:auto}.time-label{display:flex;align-items:center;gap:6px;padding-right:9px;border-right:1px solid #6b79645e}.time-label svg{width:13px;height:13px}.time-label b{font:12px var(--mono);color:#e5ebde}.canvas-tool{display:flex;align-items:center;gap:5px;background:#1b2a22d9;padding:6px 8px;border-radius:7px;border:1px solid #56644c80;font-size:10px}.canvas-tool svg{width:15px;height:15px}.canvas-tool:hover{background:#34482c}.canvas-bottom{position:absolute;bottom:15px;left:18px;right:18px;display:flex;gap:12px;align-items:flex-end;justify-content:space-between;pointer-events:none;z-index:2}.context-hint{display:flex;align-items:flex-start;gap:9px;background:#13231ded;border:1px solid #54624e;padding:10px 12px;border-radius:9px;max-width:calc(100% - 90px);font-size:11px;line-height:1.45;box-shadow:0 4px 15px #0002}.hint-dot{width:5px;height:5px;border-radius:50%;background:var(--green);margin-top:5px;flex-shrink:0}.guidance-button{background:#17271fef;border:1px solid #53614b;border-radius:8px;padding:8px 10px;font-size:10px;pointer-events:auto}.guidance-button strong{color:var(--green);margin-left:4px;font-size:9px}.ready-badge{position:absolute;left:24px;top:78px;width:254px;border:1px solid #576b48;background:#17291fef;backdrop-filter:blur(8px);padding:19px;border-radius:12px;z-index:3;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column;gap:9px}.mini-label{font-size:9px;letter-spacing:1.5px;color:var(--green);font-weight:600}.ready-badge>strong{font-size:21px;letter-spacing:-.4px}.ready-badge>span:not(.mini-label){font-size:12px;color:#bccbb7;line-height:1.6}.ready-badge .primary-button{margin-top:5px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;padding:11px 16px;border-radius:9px;font-size:12px;font-weight:650;text-decoration:none}.primary-button{background:var(--green);color:#1d321b;border:1px solid var(--green)}.primary-button:hover:not(:disabled){background:#d4ffa0;border-color:#d4ffa0}.primary-button.small{font-size:11px;min-height:37px;padding:9px 12px}.primary-button svg,.secondary-button svg{height:17px;width:17px}.primary-button.full,.secondary-button.full{width:100%}.secondary-button{background:#23342b;color:#d5e2cf;border:1px solid #435341}.secondary-button:hover{background:#304532}.end-icon{margin-left:auto}.pause-overlay{position:absolute;inset:0;z-index:6;background:#10211edb;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px}.pause-overlay>svg{width:40px;height:40px;color:var(--green)}.pause-overlay strong{font-size:24px;font-weight:600}.pause-overlay>span{font-size:12px;color:var(--muted)}.toast{position:absolute;right:18px;top:66px;max-width:330px;background:#283c27;border:1px solid #759a55;border-left:3px solid var(--green);padding:12px 16px;color:#eff2e7;border-radius:8px;z-index:5;font-size:12px;box-shadow:0 6px 20px #0004}.toast.warning,.toast.collision{background:#423124;border-color:#987243;border-left-color:var(--amber)}.dashboard{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;background:#18271f;border:1px solid #3c4a3e;border-top:0;border-radius:0 0 13px 13px;padding:15px 4px 13px}.instrument{padding:0 19px;border-right:1px solid #394735;min-width:0}.instrument:last-child{border-right:0}.instrument-label{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:9px;font-weight:600;letter-spacing:.8px;color:#b5c1ad;line-height:1.3;min-height:17px;white-space:nowrap}.instrument-label>span:not(.gear){letter-spacing:0;font-size:9px;color:#7e9279}.instrument-label svg{width:14px;height:14px;color:#809879}.instrument-number{display:flex;align-items:baseline;gap:7px;margin-top:2px;font-family:var(--mono);font-weight:450;font-size:32px;line-height:1.3;letter-spacing:-1.4px;font-variant-numeric:tabular-nums}.instrument-number small{font-family:Inter,"Segoe UI",sans-serif;font-size:11px;letter-spacing:0;color:#91a288;font-weight:500}.gear{font-family:var(--mono);width:21px;height:19px;background:#2e4929;border:1px solid #63814d;color:var(--green);border-radius:3px;display:grid;place-items:center;font-size:11px;letter-spacing:0}.segmented-meter{height:5px;margin-top:6px;background:#34452d;position:relative;overflow:hidden;border-radius:1px;max-width:155px}.segmented-meter:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 10px,#18271f 10px,#18271f 12px)}.segmented-meter span{display:block;width:0;height:100%;background:var(--green);transition:width .15s}.instrument-foot{font-size:9px;color:#99ac8e;margin-top:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.instrument-foot b{font-weight:500;color:#d2dfc8}.instrument-foot>span{margin-left:auto;font-size:9px;color:#778f6e}.risk-title{color:var(--green);font-size:17px;margin-top:6px;line-height:1.6;letter-spacing:-.4px}.risk-meter{height:5px;background:#33472d;margin-top:4px;border-radius:2px;overflow:hidden}.risk-meter>span{display:block;height:100%;width:0;background:var(--green);transition:width .25s,background .25s}.keyboard-strip{display:flex;align-items:center;flex-wrap:wrap;gap:9px 16px;padding:16px 1px;color:#acb9a4;font-size:9px}.keyboard-strip>span{display:flex;align-items:center;gap:4px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:21px;padding:2px 5px;border:1px solid #47523e;border-bottom-width:2px;border-radius:4px;font:10px var(--mono);color:#d5decd;background:#1e2b23;white-space:nowrap}.keyboard-strip button{margin-left:auto;padding:0;background:none;color:var(--green);font-size:10px}.keyboard-strip button>span{margin-left:5px}.mission-panel{border:1px solid var(--line);border-radius:var(--radius);padding:21px 20px;background:linear-gradient(150deg,#1e2f25,#16251e)}.mission-header{display:flex;justify-content:space-between;align-items:center;gap:4px}.mission-header .section-label{font-size:9px;letter-spacing:1.3px}.level-pill{font-size:9px;border:1px solid #516348;color:#bdcfb0;padding:3px 7px;border-radius:4px}.mission-panel h2{font-size:23px;line-height:1.25;letter-spacing:-.6px;margin:13px 0 9px;font-weight:600}.mission-desc{color:#a9bba2;font-size:11px;line-height:1.7;min-height:39px}.steps{display:flex;flex-direction:column;gap:15px;padding:22px 0}.step{display:flex;gap:10px;align-items:flex-start;color:#a4b59d;font-size:11px;line-height:1.5}.step-index{border:1px solid #4c5e43;min-width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-family:var(--mono);margin-top:-2px;color:#829677}.step.active{color:#e7eddd}.step.active .step-index{border-color:var(--green);background:#38562c;color:var(--green)}.step.done{color:#a4c786}.step.done .step-index{background:var(--green);color:#284222;border-color:var(--green)}.score-box{background:#14241c;border:1px solid #34482f;border-radius:10px;padding:14px;display:grid;grid-template-columns:1fr 31px;gap:8px}.score-box>div>span{font-size:10px;color:#b0bfa4}.score-box strong{display:flex;gap:6px;align-items:baseline;line-height:1.35;margin-top:2px}.score-box b{font:27px var(--mono);letter-spacing:-1px;color:var(--green)}.score-box small{font-size:10px;color:#849479;font-weight:400}.score-box svg{width:29px;height:29px;color:#729455;align-self:center}.score-track{height:4px;background:#34472e;border-radius:3px;grid-column:span 2}.score-track span{display:block;width:100%;height:100%;background:var(--green);border-radius:3px;transition:width .3s}.score-box p{font-size:9px;color:#86987b;grid-column:span 2;margin:0;line-height:1.45}.session-stats{display:flex;justify-content:space-around;margin:17px 0;gap:10px}.session-stats span{display:flex;flex-direction:column;align-items:center;font-size:9px;color:#a3b397;gap:2px}.session-stats b{font:17px var(--mono);color:#e1e8d5}.session-buttons{display:flex;gap:8px;margin-top:9px}.session-buttons>button{flex:1;min-height:35px;font-size:10px;padding:8px}.mini-note{text-align:center;display:flex;justify-content:center;align-items:center;gap:5px;font-size:9px;color:#7e9573;margin-top:15px}.small-dot{width:4px;height:4px;background:#799a58;border-radius:50%}.lesson-footer{display:flex;align-items:center;gap:9px;padding:9px 0;color:#859a80;font-size:10px}.lesson-footer svg{height:15px;width:15px}.lesson-footer button{background:none;color:#a2bd90;font-size:10px;white-space:nowrap;margin-left:auto}.app-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #27392c;max-width:1644px;margin:16px auto 0;padding:16px 0 22px;color:#688363;font-size:9px;letter-spacing:.4px}.app-footer span:first-child{font-size:8px;letter-spacing:1.8px;font-weight:650}.touch-controls{border:1px solid var(--line);border-radius:13px;background:var(--panel);display:grid;grid-template-columns:.85fr 1fr 1fr;gap:20px;padding:18px}.control-group h3{font-size:11px;color:var(--muted);margin-bottom:12px;font-weight:500}.dpad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,32px);gap:4px;justify-content:center}.dpad .up{grid-column:2}.dpad .left{grid-row:2;grid-column:1}.dpad .center{grid-row:2;grid-column:2;font-size:8px;color:var(--amber)}.dpad .right{grid-row:2;grid-column:3}.dpad .down{grid-row:3;grid-column:2}.control-group button{touch-action:none;user-select:none;-webkit-user-select:none;background:#2b4030;border:1px solid #4d6240;border-radius:6px;color:#d9e6d1;font-family:var(--mono);font-size:16px}.control-group button.pressed,.control-group button:active{background:var(--green);color:#1a331b}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.control-grid button{padding:8px 5px;min-height:48px;font-size:13px}.control-grid button span{display:block;font:9px "Segoe UI",sans-serif;margin-top:3px}.park-button{margin-top:9px;border:1px solid #827044;background:#483e23;color:#f2ce82;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;font-size:10px;border-radius:7px;width:100%}.park-button.released{background:#1f3326;border-color:#455d3c;color:#aec997}.tab-panel[hidden]{display:none}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}.content-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:25px}.content-card h2{font-size:23px;letter-spacing:-.6px;font-weight:550;margin:9px 0 18px}.content-card p{color:#b2c0ac;font-size:13px;line-height:1.8;margin-bottom:13px}.content-card strong{color:#e2ead8;font-weight:600}.control-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:9px 0;border-bottom:1px solid #31402e;font-size:12px;color:#c0ceb7}.control-row span:last-child{display:flex;gap:5px}.muted{color:var(--muted)!important;font-size:12px;line-height:1.7}.content-card p.muted{margin-top:18px;font-size:12px}.howto-list{padding-left:21px;color:#afc0a7;font-size:13px;line-height:1.8;display:flex;flex-direction:column;gap:14px}.howto-list li::marker{color:var(--green);font-family:var(--mono);font-size:13px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 20px}.section-heading h2{margin:7px 0 0;font-size:24px;font-weight:550;letter-spacing:-.6px}.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}.rule-card{padding:19px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.rule-card .rule-no{display:block;font:12px var(--mono);color:var(--green);margin-bottom:12px}.rule-card h3{font-size:14px;font-weight:550;color:#e0ead5;margin-bottom:8px}.rule-card p{font-size:12px;line-height:1.7;color:#9eb294}.source-links{display:flex;gap:15px;flex-wrap:wrap;border-top:1px solid #344a31;padding-top:17px;margin-top:18px}.source-links a{font-size:11px;text-decoration:none;color:var(--green)}.source-links a:hover{text-decoration:underline}.quiz-progress{font-size:11px;color:var(--green);margin-bottom:12px}.quiz-question{font-size:16px!important;color:var(--text)!important;line-height:1.5!important}.quiz-options{display:flex;flex-direction:column;gap:9px}.quiz-option{text-align:left;padding:12px;border:1px solid #42563c;border-radius:8px;background:#203325;font-size:12px;display:flex;align-items:center;gap:10px}.quiz-option:hover{background:#2d442b}.quiz-option>span{font-family:var(--mono);color:var(--green)}.quiz-option.correct{background:#31532e;border-color:var(--green)}.quiz-option.incorrect{border-color:#df9571;background:#49392a}.quiz-feedback{margin-top:15px;padding:13px;background:#2b412b;border-left:3px solid var(--green);font-size:12px;line-height:1.7}.quiz-feedback.incorrect{border-color:var(--amber);background:#393827}.quiz-next{margin-top:15px}.progress-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-card{border:1px solid var(--line);background:var(--panel);padding:22px;border-radius:13px}.stat-card small{font-size:11px;color:var(--muted)}.stat-card strong{display:block;font:34px var(--mono);color:var(--green);margin-top:9px;letter-spacing:-1px}.table-wrap{width:100%;overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{font-size:10px;color:#90a582;letter-spacing:.6px;font-weight:550}td,th{padding:14px 12px;border-bottom:1px solid #34452f}td{color:#c8d5bd}td strong{font-family:var(--mono);color:var(--green)!important}td .status{font-size:10px;padding:4px 7px;border-radius:5px;background:#30492c;color:#c4e0a9;white-space:nowrap}td .status.partial{background:#423e2b;color:#d0bc82}.empty-state{text-align:center;padding:45px 20px;color:#aabfa0}.empty-state svg{width:36px;height:36px;color:var(--green);margin-bottom:15px}.empty-state strong{font-size:18px;display:block;margin-bottom:9px}.empty-state p{font-size:12px}.text-button{background:none;color:#b0bd99;font-size:11px;text-decoration:underline;text-underline-offset:3px}.privacy-note{margin-top:22px!important;max-width:900px;font-size:11px!important}dialog{color:var(--text);background:#1b2d22;border:1px solid #647752;border-radius:18px;max-width:min(650px,calc(100% - 30px));width:650px;max-height:calc(100dvh - 40px);padding:27px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#08110ed9;backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}.dialog-heading h2{font-size:25px;font-weight:600;letter-spacing:-.6px;line-height:1.3;margin-top:8px}.dialog-heading>.icon-button{margin-top:-5px;margin-right:-5px}.dialog-intro{font-size:12px;color:#a7ba9d;line-height:1.8;margin-bottom:20px}.name-label{display:block;font-size:11px;color:#d0dfc4;margin-bottom:20px}.name-label>span{color:#8fa781}.name-label input{width:100%;margin-top:7px;background:#14221a;border:1px solid #536746;border-radius:7px;padding:11px;color:var(--text);font-size:13px}.name-label input::placeholder{color:#70876a}.checklist{display:grid;gap:8px}.check-row{display:flex;gap:12px;align-items:center;background:#243727;border:1px solid #405538;padding:12px;border-radius:8px;font-size:12px;cursor:pointer}.check-row:has(input:checked){background:#2b462a;border-color:#739952}.check-row input{width:18px;height:18px;accent-color:var(--green);flex-shrink:0}.check-row strong{display:block;font-size:12px;font-weight:500}.check-row small{display:block;color:#99b28e;font-size:10px;margin-top:2px}.preflight-status{display:flex;justify-content:space-between;font-size:10px;color:#9fb08c;margin-top:13px}.dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:23px;margin-top:20px;border-top:1px solid #43573b}.dialog-footer>span{font-size:11px;color:#8fa781}.result-dialog{width:710px;max-width:min(710px,calc(100% - 30px))}.result-hero{text-align:center;padding:12px 15px 20px}.result-hero>svg{color:var(--green);height:41px;width:41px;margin-bottom:10px}.result-hero h2{font-size:26px;letter-spacing:-.6px;font-weight:600}.result-hero p{font-size:12px;color:#acc19c;margin:7px 0}.result-score{font:55px var(--mono);letter-spacing:-3px;color:var(--green);margin:13px 0 0}.result-score small{font-size:16px;letter-spacing:0;color:#879e79;margin-left:7px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #405b35;border-radius:10px;padding:14px;gap:10px;margin:10px 0 20px;text-align:center}.result-grid strong{display:block;font:19px var(--mono);color:#e1ebd8}.result-grid span{font-size:9px;color:#94ab86}.feedback-title{font-size:12px;color:var(--green);margin-bottom:9px}.feedback-list{padding-left:19px;color:#bbceac;font-size:12px;line-height:1.7;display:grid;gap:5px}.result-note{font-size:10px;color:#89a07b;padding-top:15px}.result-actions{flex-wrap:wrap;gap:8px}.result-actions button{font-size:11px;flex:1;padding:10px 12px}.confirm-dialog{max-width:420px}.confirm-dialog h2{font-size:22px;font-weight:550;line-height:1.3}.confirm-dialog>p{margin:13px 0;font-size:13px;color:#acc29d;line-height:1.7}#helpDialog .control-row{font-size:13px}#helpDialog>p{margin:20px 0}.storage-notice{border:1px solid #7c713e;background:#363820;color:#dfd49c;font-size:11px;padding:10px 13px;border-radius:7px;margin-bottom:14px}.result-meta{font-size:10px;color:#a3b498;text-align:center}
@media(min-width:1700px){.viewport{height:560px}.mission-panel{min-height:672px}.steps{padding-top:28px;padding-bottom:30px;gap:20px}.mission-card strong{font-size:12px}}
@media(max-width:1200px){main{padding:24px 24px 12px}.app-header{padding:12px 24px}.mission-card{padding:11px 8px;gap:7px}.mission-card .mission-number{width:24px;height:24px;font-size:10px}.mission-card strong{font-size:10px}.sim-layout{grid-template-columns:minmax(0,1fr) 270px;gap:14px}.mission-panel{padding:18px 16px}.instrument{padding:0 13px}.instrument-number{font-size:28px}.instrument-label{font-size:8px;letter-spacing:.4px}.instrument-foot{font-size:8px}.keyboard-strip{gap:10px;font-size:8px}.app-footer{margin-left:24px;margin-right:24px}.rules-grid{grid-template-columns:repeat(2,1fr)}.top-nav{gap:2px}.nav-button{padding:9px 12px}.training-tag{padding-left:15px}.brand strong{font-size:22px}.brand small{font-size:7px}.touch-controls{gap:10px;padding:14px}.control-grid button span{font-size:8px}}
@media(max-width:1000px){.sim-layout{grid-template-columns:minmax(0,1fr)}.viewport{height:clamp(400px,54vh,600px)}.mission-panel{display:grid;grid-template-columns:1.2fr 1fr;column-gap:28px;align-items:start}.mission-header,.mission-panel h2,.mission-desc,.steps{grid-column:1}.mission-panel h2{margin-top:8px}.score-box{grid-column:2;grid-row:1 / 4}.session-stats{grid-column:2;grid-row:4;align-self:start}.mission-panel #startButton{grid-column:2;grid-row:4;align-self:end;margin-bottom:0;margin-top:86px}.session-buttons,.park-button,.mini-note{grid-column:2}.steps{grid-row:4 / 8;padding-bottom:0}.mission-panel .mini-note{margin-top:10px}.training-tag{display:none}.brand small{display:none}.nav-button{font-size:12px;padding:9px 10px}.brand-image{width:43px;height:43px}.brand-image img{width:43px;height:41px}.header-actions{gap:5px}.icon-button{width:34px;height:34px}.page-heading{margin-bottom:20px}.keyboard-strip{font-size:10px}.touch-controls{gap:20px}.control-grid button span{font-size:10px}.instrument-label{font-size:10px}.instrument-foot{font-size:10px}.instrument-number{font-size:32px}.app-footer{font-size:8px}}
@media(max-width:740px){.app-header{padding:10px 16px;min-height:70px;flex-wrap:wrap;gap:12px}.brand strong{font-size:22px}.header-actions{margin-left:auto}.top-nav{order:3;width:100%;justify-content:space-between;padding-top:1px}.nav-button{flex:1;justify-content:center;padding:9px;font-size:11px}.nav-button svg{height:17px;width:17px}main{padding:22px 16px 8px}h1{font-size:27px;letter-spacing:-.9px}.eyebrow{font-size:8px;letter-spacing:1.5px}.page-heading p{font-size:11px}.page-heading{gap:15px;align-items:flex-start}.page-heading .primary-button,.page-heading .secondary-button{font-size:10px;min-height:36px;padding:8px 10px}.mission-selector{display:flex;overflow:auto;padding-bottom:5px;gap:7px;margin-bottom:13px;scroll-snap-type:x proximity}.mission-card{min-width:147px;padding:12px 10px;scroll-snap-align:start}.mission-card strong{font-size:11px}.mission-card small{font-size:9px}.viewport{height:390px;min-height:340px}.viewport-top{padding:13px 12px;font-size:9px}.viewport-top>div{gap:6px}.viewport-top #viewLabel{display:none}.viewport-tools{gap:6px!important}.ready-badge{left:16px;top:62px;width:224px;padding:16px}.ready-badge>strong{font-size:20px}.ready-badge>span:not(.mini-label){font-size:11px}.canvas-bottom{left:12px;right:12px;bottom:12px;gap:8px}.context-hint{font-size:10px;padding:8px;max-width:calc(100% - 75px)}.guidance-button{font-size:9px;padding:7px}.dashboard{grid-template-columns:1fr 1fr;padding:13px 0;gap:16px 0}.instrument{padding:0 18px}.instrument:nth-child(2){border-right:0}.instrument-label{font-size:9px}.instrument-number{font-size:29px}.instrument-foot{font-size:9px}.risk-title{font-size:17px;line-height:1.5}.risk-instrument{border-right:0}.keyboard-strip>span{display:none}.keyboard-strip{padding:12px 0}.keyboard-strip button{font-size:12px;margin-left:0;width:100%;background:#223629;border:1px solid #435b3a;border-radius:7px;padding:9px}.mission-panel{display:block;padding:20px}.mission-panel h2{font-size:24px;margin-top:10px}.mission-desc{min-height:0;font-size:12px}.steps{padding:19px 0;gap:13px}.step{font-size:12px}.mission-panel #startButton{margin-top:0}.score-box{margin-top:6px}.touch-controls{grid-template-columns:1fr 1fr;gap:16px 12px;padding:15px;margin-bottom:15px}.control-group:last-child{grid-column:span 2}.control-group:last-child .control-grid{grid-template-columns:repeat(4,1fr)}.control-group h3{font-size:10px}.control-grid button span{font-size:8px}.control-grid button{min-height:49px}.dpad{grid-template-columns:repeat(3,39px);grid-template-rows:repeat(3,32px)}.lesson-footer{align-items:flex-start;font-size:9px;flex-wrap:wrap;margin-top:12px}.lesson-footer>span{flex:1}.lesson-footer button{margin-left:23px;font-size:9px}.app-footer{margin:10px 16px 0;padding-bottom:22px;flex-wrap:wrap;gap:7px}.app-footer>span:last-child{display:none}.guide-grid{grid-template-columns:1fr;gap:15px}.content-card{padding:20px}.content-card h2{font-size:22px}.rules-grid{gap:10px}.rule-card{padding:15px}.rule-card h3{font-size:13px}.rule-card p{font-size:11px}.section-heading{align-items:flex-start;gap:12px;flex-direction:column}.section-heading h2{font-size:23px}.section-heading .muted{font-size:10px}.progress-summary{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:16px}.stat-card strong{font-size:29px}.stat-card small{font-size:10px}#tab-progreso .page-heading{flex-direction:column;gap:18px}.control-row{font-size:11px;gap:8px}.content-card p{font-size:12px}.howto-list{font-size:12px}dialog{padding:20px;max-height:calc(100dvh - 24px)}.dialog-heading h2{font-size:23px}.dialog-heading{gap:12px}.dialog-intro{font-size:11px}.check-row{padding:10px;gap:9px}.check-row strong{font-size:11px}.check-row small{font-size:9px}.checklist{gap:7px}.dialog-footer{gap:10px;margin-top:15px;padding-top:18px}.dialog-footer .primary-button{font-size:11px;padding:10px 12px}.dialog-footer>span{font-size:10px}.result-grid{grid-template-columns:1fr 1fr;gap:18px}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions .primary-button{grid-column:span 2}.toast{font-size:11px;max-width:260px;right:12px;top:55px}.pause-overlay strong{font-size:22px}.pause-overlay>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:white!important;color:#111!important}.app-header,main,.app-footer,body>svg,dialog:not(#resultDialog),noscript{display:none!important}#resultDialog{display:block!important;position:static!important;margin:0;max-width:none;width:100%;max-height:none;border:0;box-shadow:none;color:#111;background:#fff;padding:10mm;overflow:visible}#resultDialog::backdrop{display:none}.dialog-heading>.icon-button,.result-actions{display:none!important}.section-label,.result-hero p,.result-meta,.result-note,.feedback-title,.feedback-list,.result-grid span{color:#333!important}.result-score,.result-grid strong,.result-hero svg{color:#236d34!important}.result-grid{border-color:#ccc}.result-hero h2{color:#111}.result-hero{padding-top:5px}a{color:#111}}

/* Mobile layout is appended after the desktop stylesheet. */
.mobile-playbar,
.mobile-stepbar,
.mobile-controls,
#focusButton {
  display: none;
}

.mobile-objective-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #435c38;
  border-radius: 10px;
  background: #15271c;
}
.mobile-objective-score strong {
  color: var(--green);
  font: 20px var(--mono);
}
.mobile-objective-score span { color: var(--muted); font-size: 11px; }
.mobile-objective-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.mobile-objective-actions .primary-button { grid-column: 1 / -1; }
.mobile-objective-actions button { min-height: 44px; }

@media (max-width: 900px), (max-height: 540px) {
  .app-header {
    padding: 10px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    gap: 9px 12px;
  }
  .brand { gap: 9px; }
  .brand strong { font-size: 20px; }
  .brand small { display: none; }
  .brand-image, .brand-image img { width: 40px; height: 40px; }
  .brand-image { border-radius: 10px; }
  .header-actions { gap: 4px; }
  .header-actions .icon-button { width: 44px; height: 44px; }
  .top-nav { gap: 3px; }
  .nav-button { min-height: 44px; font-size: 11px; }
  main { padding: 18px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .page-heading { margin-bottom: 16px; }
  .page-heading p { max-width: 35em; line-height: 1.5; }
  .page-heading .primary-button, .page-heading .secondary-button { min-height: 44px; }
  .mission-selector {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: 7px;
    margin-bottom: 12px;
  }
  .mission-card {
    flex: 0 0 152px;
    min-height: 63px;
    padding: 10px;
    scroll-snap-align: start;
  }
  .mission-card strong { font-size: 11px; }
  .mission-card small { font-size: 10px; }
  .viewport { height: clamp(240px, 44svh, 420px); min-height: 240px; }
  .viewport-top { padding: 8px 10px; }
  .viewport-top #viewLabel, .viewport-separator { display: none; }
  .viewport-tools { gap: 5px !important; }
  .canvas-tool { min-width: 44px; min-height: 44px; padding: 7px 9px; font-size: 10px; justify-content: center; }
  #focusButton { display: inline-flex; }
  .time-label { padding-right: 5px; }
  .ready-badge { top: 64px; left: 14px; width: 205px; padding: 13px; gap: 6px; }
  .ready-badge > strong { font-size: 18px; }
  .ready-badge > span:not(.mini-label) { display: none; }
  .ready-badge .primary-button { min-height: 44px; margin-top: 2px; }
  .canvas-bottom { bottom: 10px; left: 10px; right: 10px; }
  .guidance-button { min-width: 60px; min-height: 44px; }
  .context-hint { font-size: 11px; line-height: 1.35; }
  .keyboard-strip button { min-height: 44px; }
  .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .control-group button, .park-button, .session-buttons > button { min-height: 44px; }
  .lesson-footer button, .text-button { min-height: 44px; }
  dialog {
    width: 650px;
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 15px;
  }
  dialog.result-dialog { max-width: min(710px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  dialog.confirm-dialog { max-width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  dialog input:not([type="checkbox"]):not([type="radio"]),
  dialog select, dialog textarea { font-size: 16px; }
  dialog button { min-height: 44px; }
  dialog .icon-button { min-width: 44px; height: 44px; }
  .dialog-heading { gap: 12px; }
  .dialog-heading h2 { font-size: 22px; }
  .dialog-heading > .icon-button { margin-top: -7px; margin-right: -7px; }
  .dialog-intro { font-size: 12px; line-height: 1.6; margin-bottom: 16px; }
  .name-label { font-size: 12px; margin-bottom: 16px; }
  .name-label input { min-height: 46px; }
  .check-row { min-height: 58px; gap: 10px; padding: 11px; }
  .check-row input { width: 22px; height: 22px; margin: 0; }
  .check-row strong { font-size: 12px; }
  .check-row small { font-size: 10px; line-height: 1.4; }
  .dialog-footer { margin-top: 16px; padding-top: 16px; gap: 10px; }
  .dialog-footer .primary-button, .dialog-footer .secondary-button { min-height: 46px; }
  .mobile-objectives-dialog .mission-desc { min-height: 0; font-size: 12px; }
  .mobile-objectives-dialog .steps { gap: 16px; padding: 20px 0; }
  .mobile-objectives-dialog .step { font-size: 12px; }
}

/* A viewport-filling play surface keeps the road and every control in reach. */
body.play-focus {
  overflow: hidden;
  overscroll-behavior: none;
}
body.play-focus .app-header,
body.play-focus #tab-simulador > .page-heading,
body.play-focus .mission-selector,
body.play-focus .mission-panel,
body.play-focus .keyboard-strip,
body.play-focus .touch-controls,
body.play-focus .lesson-footer,
body.play-focus .app-footer {
  display: none !important;
}
body.play-focus main { padding: 0; }
body.play-focus .sim-layout { display: block; }
body.play-focus .sim-main {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 44px minmax(0, 1fr) 58px 40px 226px;
  grid-template-areas: "bar" "view" "hud" "step" "controls";
  gap: 0;
  overflow: hidden;
  background: #101e17;
  touch-action: none;
}
body.play-focus .mobile-playbar {
  grid-area: bar;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 76px 44px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 6px;
  background: #0e1914;
  border-bottom: 1px solid #314432;
}
.mobile-playbar button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  background: transparent;
  color: #cfdfc5;
  font-size: 11px;
}
.mobile-playbar button:hover { background: #213327; }
.mobile-playbar #mobileExitButton > span:first-child { font-size: 19px; }
.mobile-playbar #mobileObjectivesButton { color: var(--green); }
.mobile-playbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
body.play-focus .viewport {
  grid-area: view;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
body.play-focus #warehouse { width: 100%; height: 100%; touch-action: none; }
body.play-focus .viewport-top { top: 0; padding: 4px 10px; font-size: 9px; }
body.play-focus .viewport-top > div:first-child { display: flex; gap: 6px; }
body.play-focus .viewport-top strong { font-size: 8px; letter-spacing: .8px; }
body.play-focus #viewLabel,
body.play-focus .viewport-separator,
body.play-focus #focusButton,
body.play-focus #pauseButton { display: none; }
body.play-focus .canvas-tool { min-height: 44px; min-width: 44px; padding: 6px 9px; }
body.play-focus .time-label { border-right: 0; padding-right: 5px; }
body.play-focus .canvas-bottom { bottom: 8px; left: 10px; right: 10px; }
body.play-focus .context-hint {
  display: none;
  max-width: 100%;
  padding: 7px 9px;
  gap: 7px;
  font-size: 10px;
  line-height: 1.35;
  border-radius: 7px;
  background: #13231df0;
}
body.play-focus .guidance-button { display: none; }
body.play-focus .ready-badge { top: 58px; left: 12px; width: min(205px, calc(100% - 24px)); padding: 12px; }
body.play-focus .ready-badge > span:not(.mini-label) { display: none; }
body.play-focus .ready-badge > strong { font-size: 17px; }
body.play-focus .ready-badge .primary-button { min-height: 44px; }
body.play-focus .toast {
  top: 56px;
  right: auto;
  left: 10px;
  max-width: min(280px, calc(100% - 20px));
  padding: 9px 12px;
  font-size: 11px;
}
body.play-focus .pause-overlay { gap: 10px; padding: 12px; text-align: center; }
body.play-focus .pause-overlay > svg { width: 28px; height: 28px; }
body.play-focus .pause-overlay strong { font-size: 21px; }
body.play-focus .pause-overlay > span { font-size: 11px; }
body.play-focus .pause-overlay button { min-height: 44px; }

body.play-focus .dashboard {
  grid-area: hud;
  grid-template-columns: 1fr 1fr 1fr 1.12fr;
  align-items: start;
  gap: 0;
  min-height: 0;
  padding: 5px 0 4px;
  border: 0;
  border-top: 1px solid #3b4d39;
  border-bottom: 1px solid #31442f;
  border-radius: 0;
}
body.play-focus .instrument { min-width: 0; padding: 0 9px; border-right: 1px solid #394735; }
body.play-focus .instrument:last-child { border-right: 0; }
body.play-focus .instrument-label { min-height: 12px; font-size: 8px; letter-spacing: .35px; line-height: 1.2; }
body.play-focus .instrument-label > span:not(.gear),
body.play-focus .instrument-label > svg,
body.play-focus .instrument-foot > span { display: none; }
body.play-focus .gear { width: 17px; height: 13px; font-size: 9px; border-radius: 2px; }
body.play-focus .instrument-number { margin-top: 1px; gap: 4px; font-size: 22px; line-height: 1.15; letter-spacing: -.8px; }
body.play-focus .instrument-number small { font-size: 8px; }
body.play-focus .instrument-foot { margin-top: 1px; gap: 4px; font-size: 8px; line-height: 1.1; flex-wrap: nowrap; white-space: nowrap; }
body.play-focus .instrument:nth-child(3) .instrument-foot { font-size: 0; gap: 3px; }
body.play-focus .instrument:nth-child(3) .instrument-foot::before { content: "Cap."; font-size: 8px; }
body.play-focus .instrument:nth-child(3) .instrument-foot b { font-size: 8px; }
body.play-focus .segmented-meter { height: 3px; margin-top: 4px; }
body.play-focus .risk-instrument .instrument-label { font-size: 0; }
body.play-focus .risk-instrument .instrument-label::before { content: "SEGURIDAD"; font-size: 8px; }
body.play-focus .risk-title { margin-top: 4px; font-size: 12px; line-height: 1.6; letter-spacing: -.25px; white-space: nowrap; }
body.play-focus .risk-meter { height: 3px; margin-top: 5px; }
body.play-focus .risk-instrument .instrument-foot { display: none; }
body.play-focus .mobile-stepbar {
  grid-area: step;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 5px 12px;
  border-bottom: 1px solid #31442f;
  background: #14251c;
  color: #d3e3c8;
  font-size: 11px;
  line-height: 1.3;
}
.mobile-stepbar .hint-dot { margin-top: 0; }
#mobileCurrentStep {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.play-focus .mobile-controls {
  grid-area: controls;
  display: grid;
  grid-template-rows: 44px minmax(94px, 1fr) 56px;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 8px 10px;
  background: #101e17;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.mobile-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #4c6342;
  border-radius: 10px;
  background: #253b2b;
  color: #e1edda;
  font-size: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.mobile-controls button.pressed,
.mobile-controls button:active:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: #153116;
  transform: none;
  box-shadow: inset 0 0 0 1px #f2ffd757;
}
.mobile-controls button:focus-visible { outline-offset: -3px; }
.mobile-control-tabs { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.mobile-control-tabs button { min-width: 66px; padding: 8px 13px; font-size: 12px; border-color: #344c35; background: #182b20; }
.mobile-control-tabs button[aria-selected="true"] { color: var(--green); background: #2b4328; border-color: #7c9c58; }
.mobile-control-tabs small { align-self: center; margin-left: auto; max-width: 82px; color: #a1b193; font-size: 10px; text-align: right; line-height: 1.3; }
.mobile-drive-pad {
  display: grid;
  grid-template-columns: minmax(94px, 1.6fr) minmax(52px, 1fr) minmax(44px, .68fr);
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.mobile-steering-pair { display: grid; grid-template-columns: repeat(2, minmax(44px, 1fr)); gap: 6px; min-width: 0; }
.mobile-throttle-pair { display: grid; grid-template-rows: repeat(2, minmax(44px, 1fr)); gap: 6px; min-width: 0; }
.mobile-throttle-pair button { flex-direction: row; gap: 6px; }
.m-control-icon { font: 25px/1 var(--mono); }
.m-control-label { font-size: 10px; font-weight: 550; line-height: 1.15; text-align: center; }
.mobile-throttle-pair .m-control-icon { font-size: 23px; }
.mobile-controls .mobile-brake { border-color: #8e7042; background: #463923; color: #f2cf8b; }
.mobile-brake .m-control-icon { font-size: 22px; }
.mobile-brake .m-control-label { font-size: 9px; letter-spacing: .5px; }
.mobile-load-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(44px, 1fr)); gap: 6px; min-height: 0; }
.mobile-load-pad button { flex-direction: row; gap: 8px; }
.mobile-load-pad .m-control-icon { font-size: 22px; }
.mobile-load-pad .m-control-label { font-size: 11px; }
.mobile-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.mobile-actions button { border-radius: 8px; gap: 4px; }
.mobile-actions .m-control-icon { font-size: 18px; }
.mobile-actions svg { width: 18px; height: 18px; }
.mobile-actions .m-control-label { max-width: 100%; font-size: 10px; }
.mobile-actions .mobile-stop { color: #ffd1a0; border-color: #865a36; background: #412e22; }
.mobile-actions #mobileParkButton[aria-pressed="true"] { color: #f3d695; border-color: #9b7e41; background: #4a3d22; }
.mobile-actions #mobileParkButton[aria-pressed="false"] { color: #bad6a9; background: #233a26; }
.mobile-actions .mobile-interact { border-color: #728c4f; background: #30472a; }

@media (max-width: 600px) {
  .app-header { flex-wrap: wrap; }
  .top-nav { order: 3; width: 100%; }
  .nav-button { flex: 1; padding: 8px 5px; gap: 5px; }
  .nav-button svg { width: 17px; height: 17px; }
  h1 { font-size: 27px; }
  .page-heading p { font-size: 12px; }
  .viewport-top > div:first-child { display: none; }
  .viewport-tools { margin-left: auto; }
  .touch-controls { gap: 12px 8px; padding: 12px 8px; }
  .control-group h3 { font-size: 10px; }
  .dpad { gap: 3px; }
  .control-group:last-child .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-grid button span { font-size: 10px; }
  .content-card { padding: 17px; }
  #historyTable .table-wrap { overflow: visible; }
  #historyTable table, #historyTable tbody { display: block; width: 100%; }
  #historyTable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #historyTable tbody { display: grid; gap: 12px; }
  #historyTable tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px; border: 1px solid #3b5134; border-radius: 10px; background: #13251b; }
  #historyTable td { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; font-size: 12px; overflow-wrap: anywhere; }
  #historyTable td::before { content: attr(data-label); flex-shrink: 0; color: #9eb391; font-size: 10px; font-weight: 500; letter-spacing: .2px; }
  #historyTable td:nth-child(-n+4) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; text-align: right; }
  #historyTable td:nth-child(-n+4)::before { min-width: 72px; text-align: left; }
  #historyTable td:nth-child(4) { padding-bottom: 10px; margin-bottom: 1px; border-bottom: 1px solid #31472e; }
  #historyTable td .status { max-width: 100%; font-size: 10px; }
  .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-actions .primary-button { grid-column: 1 / -1; }
  .result-grid { gap: 14px; padding: 12px; }
  .result-hero { padding: 4px 0 14px; }
  .result-hero h2 { font-size: 24px; }
  .result-score { font-size: 47px; }
}

/* Landscape leaves the whole left side available for the driving view. */
@media (min-width: 520px) and (max-height: 540px) {
  body.play-focus .sim-main {
    grid-template-columns: minmax(0, 1fr) clamp(248px, 32vw, 280px);
    grid-template-rows: 44px 42px minmax(0, 1fr) 58px;
    grid-template-areas: "bar bar" "view step" "view controls" "hud controls";
  }
  body.play-focus .mobile-playbar { grid-template-columns: 70px minmax(0, 1fr) 90px 44px; gap: 8px; }
  body.play-focus .mobile-playbar strong { font-size: 13px; }
  body.play-focus .mobile-stepbar { padding: 4px 10px; border-left: 1px solid #354a31; font-size: 10px; }
  body.play-focus .mobile-controls {
    grid-template-rows: 44px minmax(94px, 1fr) 56px;
    padding: 6px 8px 8px;
    border-left: 1px solid #354a31;
  }
  .mobile-control-tabs button { min-width: 60px; padding: 8px 10px; font-size: 11px; }
  .mobile-control-tabs small { max-width: 72px; font-size: 9px; }
  .mobile-throttle-pair button { flex-direction: column; gap: 3px; }
  .mobile-steering-pair .m-control-label { font-size: 9px; }
  body.play-focus .instrument { padding: 0 10px; }
  body.play-focus .context-hint { max-width: 100%; font-size: 10px; }
  body.play-focus .pause-overlay { gap: 7px; }
  body.play-focus .pause-overlay > svg { display: none; }
}

@media (max-width: 370px) {
  .brand strong { font-size: 19px; }
  .brand { gap: 7px; }
  .header-actions { gap: 2px; }
  body.play-focus .instrument { padding: 0 7px; }
  body.play-focus .instrument-number { font-size: 21px; gap: 3px; }
  body.play-focus .risk-title { font-size: 11px; }
  .mobile-throttle-pair .m-control-label { font-size: 9px; }
}

@media print {
  body.play-focus { overflow: visible; }
  .mobile-playbar, .mobile-stepbar, .mobile-controls, #focusButton { display: none !important; }
}