.topbar { height:60px; min-height:60px; }
.tools #retry,.tools #help { font-size:12px; }
.tools #gameSettings { padding-inline:12px; }
.tools #pause { background:#252724; color:#f3f1ea; border-color:#252724; }
.scene { --hud-height:56px; --live-height:0px; --hud-bottom:calc(var(--hud-height) + var(--live-height)); }
.scene[data-telemetry-visible=true] { --live-height:34px; }
.telemetry { grid-template-columns:repeat(6,minmax(0,1fr)) auto; align-items:center; gap:16px; padding:8px 24px; height:var(--hud-height); min-height:0; z-index:4; border-bottom:1px solid #484c43; }
.metric { position:relative; }
.metric > span { display:block; font-size:10px; line-height:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric strong { font-size:21px; line-height:23px; margin-top:1px; white-space:nowrap; }
.metric strong small { font-size:10px; margin-left:4px; }
.metric .track { position:absolute; bottom:-4px; left:0; right:0; max-width:72px; height:2px; margin:0; }
.telemetry-toggle { pointer-events:auto; align-self:stretch; min-height:38px; padding:0 10px; display:flex; justify-content:center; align-items:center; gap:8px; border:1px solid #606759; border-radius:3px; background:transparent; color:#edf0e7; cursor:pointer; font-size:11px; user-select:none; }
.telemetry-toggle:focus-visible { outline:2px solid #9ab7a0; outline-offset:2px; }
.telemetry-toggle[aria-expanded=true] { background:#41483c; }
.telemetry-indicator { width:5px; height:5px; border-radius:50%; background:#777f70; flex:none; }
.telemetry-toggle[aria-expanded=true] .telemetry-indicator { background:#afd1b5; }
.telemetry-panel { position:absolute; inset:var(--hud-height) 0 auto; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px 16px; padding:8px 24px; border-bottom:1px solid #484c43; background:#292c27; color:#c6cbbb; pointer-events:none; z-index:2; }
.telemetry-panel[hidden] { display:none; }
.telemetry-panel > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 6px; font-size:10px; line-height:16px; min-width:0; }
.telemetry-panel > div > span { overflow-wrap:anywhere; }
.telemetry-panel strong { color:#f3f1ea; font-weight:500; font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.telemetry-panel small { margin-left:3px; font-weight:400; font-size:9px; color:#c6cbbb; }
.scene-caption { top:calc(var(--hud-bottom) + 12px); }
.score-panel { top:calc(var(--hud-bottom) + 34px); }
.flight-instruments { top:calc(var(--hud-bottom) + 14px); }
.stage-overlay:not(.paused):not(.terminal) { inset:var(--hud-bottom) 0 30px; }
.stage-overlay:is(.terminal,.paused) { top:var(--hud-bottom); }
.stage-overlay:is(.terminal,.paused) .intro { max-height:100%; overflow-y:auto; }
#infoDialog [hidden] { display:none !important; }
#infoDialog[data-view=settings] { width:min(480px,calc(100% - 24px)); }
#infoDialog[data-view=settings] .dialog-body { padding:24px; }
#infoDialog[data-view=settings] .game-preferences { margin:0; padding:0; border:0; }
#infoDialog[data-view=settings] .preferences-bar { width:100%; display:flex; flex-direction:column; align-items:stretch; gap:20px; }
#infoDialog[data-view=settings] .language-picker { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
#infoDialog[data-view=settings] .language-picker select { width:180px; height:36px; font-size:13px; }
#infoDialog[data-view=settings] .audio-controls { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:12px; }
#infoDialog[data-view=settings] .audio-controls button { text-align:left; padding:10px 12px; font-size:13px; min-height:40px; max-width:none; }
#infoDialog[data-view=settings] .audio-controls button[aria-pressed=true]::after { content:'✓'; float:right; }
#infoDialog[data-view=settings] .volume-control { display:flex; justify-content:space-between; width:100%; font-size:13px; gap:20px; }
#infoDialog[data-view=settings] .volume-control input { width:65%; }
.battery-assumptions { padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid #d5d4ca; }
.battery-assumptions a { color:#287552; }
.game-preferences { padding:0 0 20px; margin-bottom:22px; border-bottom:1px solid #d5d4ca; }
.game-preferences h3 { margin:0 0 14px; }
.game-preferences .preferences-bar { background:transparent; padding:0; border:none; display:flex; flex-wrap:wrap; gap:18px; }
.game-preferences .audio-controls { margin-left:0; flex-wrap:wrap; gap:10px; }
.game-preferences .language-picker select { width:140px; }
.game-preferences .audio-controls button { min-height:34px; font-size:12px; }
.game-preferences .volume-control input { width:100px; }
.game-preferences .audio-status { flex-basis:100%; }
.topbar button { text-transform:capitalize; }
.wordmark small { letter-spacing:0 !important; font-size:11px; }
.app-footer { font-size:10px; letter-spacing:0; }
@media(max-width:850px) { .topbar { gap:10px; padding:0 16px; } .stages button { min-width:88px; } .tools { gap:5px; } .tools button { padding:6px 8px; } }
@media(max-width:1100px) { .telemetry-panel { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px 14px; } }
@media(max-width:620px) and (orientation:portrait) { .topbar { min-height:100px; height:100px; flex-wrap:wrap; gap:5px 12px; padding:8px 12px; } .wordmark { order:0; } .stages { order:1; margin-left:auto; height:36px; } .tools { order:2; width:100%; justify-content:space-between; } .tools button { min-height:34px; flex:1; } .app-footer { font-size:8px; } }
@media(max-height:560px) and (orientation:landscape) { .topbar { min-height:42px; height:42px; } .tools button { min-height:28px; height:28px; } }
@media(max-width:620px) and (orientation:portrait) {
 .scene { --hud-height:86px; }
 .telemetry { grid-template-columns:repeat(3,minmax(0,1fr)) 68px; grid-template-rows:1fr 1fr; gap:6px 12px; padding:7px 12px; }
 .metric strong { font-size:18px; line-height:20px; }
 .metric > span { font-size:9px; line-height:11px; }
 .metric strong small { font-size:9px; margin-left:3px; }
 .metric .track { bottom:-2px; max-width:52px; }
 .telemetry-toggle { grid-column:4; grid-row:1/3; padding:0 5px; gap:3px; font-size:10px; flex-wrap:wrap; align-content:center; }
 .telemetry-panel { padding:6px 12px; gap:6px 10px; }
 .telemetry-panel > div { display:block; line-height:12px; font-size:9px; }
 .telemetry-panel strong { display:block; font-size:13px; line-height:15px; margin-top:1px; }
 .scene { min-height:350px; }
 .topbar .tools #camera { display:inline-block; }
 .topbar .tools button { font-size:10px; padding:4px; }
}
@media(max-height:560px) and (orientation:landscape) {
 .scene { --hud-height:46px; }
 .telemetry { padding:5px 20px; gap:12px; }
 .metric strong { font-size:18px; line-height:20px; }
 .metric > span { font-size:9px; line-height:11px; }
 .metric .track { bottom:-2px; }
 .telemetry-toggle { min-height:34px; }
 .telemetry-panel { padding:4px 20px; gap:3px 12px; }
 .scene-caption { top:calc(var(--hud-bottom) + 8px); }
 .score-panel { top:calc(var(--hud-bottom) + 24px); }
 .stage-overlay:not(.paused):not(.terminal) { bottom:5px; }
}