:root{color-scheme:dark;--ink:#081223;--panel:#081a2df2;--cyan:#94e9ff;--white:#e5f3ed;--muted:#a8c3cb;--line:#55899b;--red:#ff898e;--green:#7ce4a0;--font:'Courier New',ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#031022;color:var(--white);font:700 14px/1.35 var(--font)}button,input,select{font:inherit}button,select{color:var(--white);background:#0c2037;border:2px solid #456b80;min-height:34px;padding:5px 9px;border-radius:0;box-shadow:inset 0 0 0 1px #071121;cursor:pointer}button:hover,select:hover{background:#193b52;border-color:var(--cyan)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fff59b;outline-offset:3px}h1,h2,h3,p{margin:0}h2,h3{font-size:14px}strong{color:var(--cyan)}small{font-size:14px}input[type=range]{accent-color:#91e9ff;cursor:pointer;height:18px;width:100%;margin:6px 0}input[type=checkbox]{accent-color:#83ddf7;width:18px;height:18px;flex-shrink:0}
#game-shell{position:relative;width:100%;height:100dvh;min-height:0;overflow:hidden;background:#062c50}#map-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;outline:none}.scanlines{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.22;background:repeating-linear-gradient(0deg,#020818 0,#020818 1px,transparent 1px,transparent 4px)}.bezel{position:absolute;inset:0;border:7px solid #010813;box-shadow:inset 0 0 0 2px #38687c,inset 0 0 80px #01071499;pointer-events:none;z-index:8}.pixel-panel{background:linear-gradient(180deg,#0b1a2ef5,#050d1df5);border:2px solid #7293a5;box-shadow:0 0 0 2px #020713,inset 0 0 0 2px #14283e,4px 4px 0 #020713b3;position:absolute;z-index:4}.hud-top{top:10px;left:12px;right:12px;height:87px;padding:10px 14px;display:grid;grid-template-columns:minmax(220px,1fr) 360px minmax(220px,1fr);gap:24px;align-items:center;clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}.hud-label{display:flex;justify-content:space-between;gap:8px;text-transform:uppercase;letter-spacing:.5px}.hud-label strong{color:var(--green)}.meter{height:17px;border:2px solid #7297ac;box-shadow:inset 0 0 0 2px #051323;background:#040b18;margin:5px 0;padding:2px}.meter>div{height:100%;background:repeating-linear-gradient(90deg,transparent 0,transparent 16px,#051d2855 16px,#051d2855 18px),linear-gradient(#89e69b,#2a9562);width:100%;box-shadow:0 -2px 0 #b2edbc inset;transition:width .3s}.meter #gps-meter{background:repeating-linear-gradient(90deg,transparent 0,transparent 16px,#16222f55 16px,#16222f55 18px),linear-gradient(#75d7ff,#2c98be);box-shadow:0 -2px 0 #b4f1ff inset}.meter #gps-meter.danger,.meter #budget-bar-fill.warn{background:linear-gradient(#ef7e87,#a92b49);box-shadow:none}.mission-line{display:flex;align-items:center;gap:7px;text-transform:uppercase;font-size:14px;letter-spacing:.5px}.status-dot{width:7px;height:7px;background:var(--cyan);box-shadow:0 0 7px #77dbff}.hull{justify-content:space-between}.brand{text-align:center;align-self:center;line-height:1}.brand canvas{width:min(100%,364px);height:53px;image-rendering:pixelated;display:block;margin:-6px auto 1px}.brand-sub{font-size:14px;letter-spacing:4px;color:#8fc3d0}.utility{position:absolute;right:20px;top:109px;display:flex;gap:7px;z-index:5}.utility select{max-width:150px}.utility button{min-height:32px}.compass-widget{top:111px;left:20px;width:126px;height:148px;background:#071526e8;text-align:center;border-color:#486d87}.compass-widget canvas{width:116px;height:116px;display:block;margin:3px auto;image-rendering:pixelated}.compass-widget span{font-size:14px;color:#bdf1ff}.radar-widget{top:273px;left:20px;width:154px;text-align:center;padding:7px;background:#071526e5}.radar-widget>span{display:block;color:#bdf1ff;letter-spacing:2px}.radar-widget canvas{display:block;width:132px;height:112px;margin:4px auto;image-rendering:pixelated}.radar-widget small{display:block;color:#b2d5c7;font-size:14px}.telemetry-strip{position:absolute;right:20px;top:152px;z-index:4;background:#08192ae8;border:1px solid #486b7b;display:flex;gap:22px;padding:8px 12px}.telemetry-strip>span{display:flex;flex-direction:column;gap:2px}.telemetry-strip i{font-size:14px;font-style:normal;color:#b8d1da;text-transform:uppercase}.telemetry-strip strong{font-size:18px}.radio-widget{left:20px;bottom:217px;width:304px;max-height:244px;padding:11px 13px}.panel-kicker{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid #38546b;text-transform:uppercase;color:#cfeced;letter-spacing:.5px}.radio-led{color:#80e0b1}.radio-body{display:flex;align-items:center;gap:11px;margin-bottom:8px}.radio-body canvas{width:48px;height:48px;image-rendering:pixelated;flex-shrink:0}.radio-body strong,.radio-body span{display:block}.radio-body strong{text-transform:uppercase;letter-spacing:1px}.radio-body span{color:var(--muted);font-size:14px}.radio-widget p{font-size:14px;line-height:1.45;font-weight:400}.radio-widget #dialogue-nav{margin-top:9px}.warning-stack{position:absolute;top:208px;right:20px;width:min(345px,32vw);z-index:5}.warning{display:none;background:#351522ee;color:#ffc7c7;border:2px solid #cc7282;padding:10px 12px;margin-bottom:8px;box-shadow:3px 3px 0 #070a1f;font-size:14px}.navigation-dock{bottom:33px;left:50%;transform:translateX(-50%);width:min(1040px,calc(100% - 38px));min-height:168px;display:grid;grid-template-columns:1.1fr 1fr 1.12fr;gap:0;padding:12px 0;clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}.navigation-dock>div{padding:0 16px}.navigation-dock>div+div{border-left:1px solid #365970}.navigation-dock label{color:#afccd5;font-size:14px}.heading-module .panel-kicker strong{white-space:nowrap}.compass-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.btn-dir{padding:1px;min-height:27px;font-size:14px}.btn-dir.active{background:#275773;border-color:#93e5f5;color:#fff}.sensor-fields{display:grid;grid-template-columns:1fr 80px;gap:10px}.sensor-fields label{display:block;margin-bottom:4px}.sensor-fields select{width:100%;font-size:14px;padding:4px}.qubit-pips{color:#6ce4ff;white-space:nowrap;font-size:18px}.sensor-module p{font-size:14px;color:#add3df;font-weight:400;margin-top:9px;line-height:1.25}.suspicion-container{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:14px;line-height:1.2;cursor:pointer}.sail-button{width:100%;min-height:53px;text-transform:uppercase;background:linear-gradient(#2d6d8d,#194761);border:2px solid #a6dbea;box-shadow:inset 0 0 0 2px #10283a,0 4px 0 #020915;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;letter-spacing:1px}.sail-icon{color:#e7f9fa}.sail-button kbd{font-size:14px;padding:3px 4px;background:#112e44;border:1px solid #5689a1;color:#add4e2;letter-spacing:0}.action-module p{margin-top:8px;font-size:14px;line-height:1.3;color:#a5c9d2;font-weight:400}.chart-legend{right:20px;bottom:217px;width:240px;padding:10px 12px;font-size:14px;font-weight:400;line-height:1.8}.chart-legend span{display:block}.chart-legend span:before{content:'';display:inline-block;width:19px;height:3px;background:#d2f3e6;margin-right:8px;vertical-align:middle}.chart-legend .dash-key:before{height:0;background:none;border-top:2px dashed #f4ce75}.chart-legend .heat-key:before{height:7px;background:#49bded}.chart-legend .reef-key:before{height:7px;background:repeating-linear-gradient(135deg,#965867 0,#965867 2px,#132a3d 2px,#132a3d 4px)}.bottom-status{position:absolute;bottom:11px;left:23px;right:23px;display:flex;justify-content:space-between;gap:10px;color:#b3cad3;font-size:14px;z-index:4}.debug-badge{display:none;position:absolute;top:106px;left:50%;transform:translateX(-50%);z-index:6;padding:6px 12px;background:#56283b;color:#fff0bc;border:1px solid #ffd6a5}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.replay-modal{display:none;position:fixed;inset:0;z-index:20;align-items:flex-start;justify-content:flex-end;padding:106px 20px 18px;background:linear-gradient(90deg,transparent 25%,#030b18bb)}.replay-box{position:relative;width:min(560px,100%);max-height:calc(100dvh - 126px);overflow:auto;padding:18px}.replay-box>.panel-kicker h2{font-size:18px}.outcome-banner{padding:12px;background:#102940;color:#e1f4ef;border:1px solid #65b0b9;font-size:15px;font-weight:400}.scoreboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}.scoreboard-grid span,.scoreboard-grid strong{display:block}.scoreboard-grid span{font-size:14px;color:#b9d4da;font-weight:400}.scoreboard-grid strong{font-size:22px;margin-top:5px}.replay-box>label{font-size:14px;color:#bbd7de}.replay-box input[type=range]{margin:12px 0}#turn-event-info,#meas-details{font-size:14px;line-height:1.6;font-weight:400;color:#c1dce4}#attack-timeline{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:10px 0 15px}.timeline-cell{padding:6px 0;text-align:center;background:#122c43;border:1px solid #446077;font-size:14px}.timeline-cell.attack{border-color:#f59d9d;background:#412238}.timeline-cell.marked:after{content:'!';display:block;color:#fff3c4;font-weight:bold}.timeline-cell.current{outline:2px solid #a8efff;outline-offset:1px}#replay-measurement-box{margin:12px 0;border:1px solid #365d75;padding:10px}#replay-measurement-box h3{margin-bottom:7px}#histogram-canvas{width:100%;height:112px;image-rendering:pixelated;display:block;margin-top:8px}.replay-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.replay-controls button{flex:1;font-size:14px}
/* Keep every control reachable without imposing a clipped minimum viewport. */
#map-canvas:focus-visible{outline:3px solid #fff59b;outline-offset:-10px}
.radio-toggle{display:none}
.radio-widget{overflow:auto}
.chart-legend [hidden],[hidden]{display:none!important}
.bottom-status{bottom:7px;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;line-height:1.2;text-align:center}
.bottom-status>span:first-child{display:none}
.navigation-dock{bottom:44px}
#timeline-legend{font-size:12px;line-height:1.4;font-weight:400;color:#c1dce4;margin:6px 0}
.credits{display:flex;flex-direction:column;gap:2px}
.timeline-cell.marked:after{content:none}
#legend-true:before{background:#a7f2ce}
#legend-inertial:before{height:0;background:none;border-top:2px dotted #b1c8ff}
@media(min-width:900px){.radio-widget{left:194px;width:266px}.chart-legend{bottom:217px}}
@media(min-width:900px) and (max-width:1200px){.radio-widget{left:170px;width:210px}}

@media(min-width:1600px){
 .hud-top{grid-template-columns:1fr 460px 1fr}
 .brand canvas{width:420px;height:60px}
 .radio-widget{width:330px}
 .navigation-dock{width:1100px}
}
@media(max-width:1200px){
 .chart-legend{display:none}
 .radio-widget{width:265px;bottom:231px;max-height:225px}
 .hud-top{grid-template-columns:1fr 285px 1fr;gap:12px}
 .brand canvas{width:285px;height:48px}
 .brand-sub{letter-spacing:2px}
 .hud-label{font-size:14px;letter-spacing:0}
 .utility{gap:4px}
 .navigation-dock{grid-template-columns:1fr 1fr 1fr}
 .navigation-dock>div{padding:0 11px}
 .sail-button kbd{display:none}
}
@media(max-height:740px) and (min-width:900px){
 .radio-widget{max-height:174px;width:266px;bottom:227px}
 .radio-widget .radio-body{display:none}
 .radar-widget{top:267px;width:126px}
 .radar-widget canvas{width:105px;height:90px}
 .navigation-dock{min-height:156px}
 .sensor-module p{font-size:12px}
 .chart-legend{display:none}
}

/* Portrait and tablet layouts keep a visible, expandable mission radio. */
@media(max-width:850px){
 .hud-top{left:8px;right:8px;top:8px;height:150px;padding:50px 10px 7px;grid-template-columns:1fr 1fr;gap:12px;align-content:start;align-items:start}
 .brand{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:245px}
 .brand canvas{width:245px;height:39px;margin:0 auto}
 .brand-sub{display:none}
 .signal,.energy{min-width:0}
 .hud-label{display:block;font-size:13px;line-height:1.2;letter-spacing:0}
 .hud-label>span,.hud-label>strong{display:block;overflow-wrap:anywhere}
 .hud-label strong{margin-top:2px;font-size:13px}
 .meter{height:12px;margin:4px 0;padding:1px}
 .mission-line{font-size:12px;line-height:1.2;letter-spacing:0}
 .mission-line .status-dot{display:none}
 .utility{top:168px;left:12px;right:12px;display:grid;grid-template-columns:94px minmax(0,1fr) 84px;gap:5px;align-items:stretch}
 .utility button,.utility select{font-size:13px;min-height:38px;padding:4px;white-space:normal;max-width:none;min-width:0;line-height:1.2}
 .compass-widget{top:219px;left:12px;width:96px;height:115px}
 .compass-widget canvas{width:87px;height:87px}
 .compass-widget span{font-size:13px}
 .telemetry-strip{top:219px;left:120px;right:12px;gap:8px;padding:7px 8px;justify-content:space-between}
 .telemetry-strip>span{min-width:0}
 .telemetry-strip i{font-size:12px;line-height:1.2;overflow-wrap:anywhere}
 .telemetry-strip strong{font-size:14px;white-space:nowrap}
 .radar-widget{display:none}
 .radio-widget{top:346px;bottom:auto;left:12px;width:176px;max-height:none;padding:7px 9px;overflow:visible;z-index:6}
 .radio-widget .panel-kicker{margin:0;padding:0;border:0;letter-spacing:0}
 .radio-widget h2{font-size:12px;line-height:1.2}
 .radio-widget .radio-body,.radio-led{display:none}
 .radio-toggle{display:inline-block;min-height:29px;min-width:29px;padding:2px 5px;font-size:13px;flex-shrink:0}
 .radio-widget:not(.radio-open) #dialogue-box,.radio-widget:not(.radio-open) #dialogue-nav{display:none!important}
 .radio-widget.radio-open{width:min(344px,calc(100% - 24px));max-height:min(180px,max(90px,calc(100dvh - 615px)));overflow:auto}
 .radio-widget.radio-open #dialogue-box{margin-top:8px;font-size:14px;line-height:1.35}
 .radio-widget #dialogue-nav{margin-top:8px}
 .radio-widget #dialogue-nav button{min-height:32px;padding:3px 7px}
 .navigation-dock{bottom:43px;width:calc(100% - 24px);min-height:213px;padding:9px 0;grid-template-columns:1fr 1fr}
 .navigation-dock>div{padding:0 9px;min-width:0}
 .navigation-dock .panel-kicker{margin-bottom:5px;padding-bottom:4px;gap:4px}
 .panel-kicker h2{font-size:14px;line-height:1.2}
 .heading-module .panel-kicker strong{font-size:13px}
 .heading-module>label{display:none}
 .heading-module input[type=range]{margin:4px 0;height:20px}
 .compass-grid{grid-template-columns:repeat(4,1fr);gap:4px}
 .btn-dir{min-height:29px;font-size:13px}
 .qubit-pips{display:none}
 .sensor-fields{display:block}
 .sensor-fields>div{display:flex;align-items:center;gap:5px;margin-top:7px}
 .sensor-fields label{display:block;margin:0;white-space:nowrap;font-size:12px;line-height:1.2}
 .sensor-fields select{flex:1;width:0;min-width:0;min-height:32px;font-size:13px;padding:3px}
 .sensor-module p{display:block;font-size:12px;margin-top:7px;line-height:1.25;overflow-wrap:anywhere}
 .action-module{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;padding-top:8px!important;margin-top:8px;border-top:1px solid #365970;border-left:none!important}
 .suspicion-container{margin:0!important;font-size:13px!important;line-height:1.25;min-height:42px}
 .sail-button{min-height:43px;font-size:14px;padding:5px;gap:5px;letter-spacing:0}
 .sail-icon,.action-module p{display:none}
 .chart-legend{display:none}
 .warning-stack{top:281px;right:12px;width:calc(100% - 132px);max-height:58px;overflow:auto}
 .warning{font-size:12px;line-height:1.25;padding:5px 7px;margin-bottom:5px}
 .bottom-status{left:12px;right:12px;font-size:11px;line-height:1.15}
 .debug-badge{top:122px;left:auto;right:18px;transform:none;max-width:45%;font-size:11px;padding:3px 6px}
 .bezel{border-width:5px}
 .replay-modal{padding:12px}
 .replay-box{width:min(560px,100%);max-height:calc(100dvh - 24px);padding:13px}
 .replay-box>.panel-kicker{flex-wrap:wrap}
 .replay-box>.panel-kicker h2{font-size:16px}
 .scoreboard-grid{grid-template-columns:repeat(2,1fr)}
 #attack-timeline{grid-template-columns:repeat(6,1fr)}
}
@media(min-width:521px) and (max-width:850px) and (min-height:521px){
 .hud-top{height:126px;padding-top:44px}
 .utility{top:144px;grid-template-columns:124px minmax(0,190px) 105px;right:auto}
 .compass-widget{top:191px}
 .telemetry-strip{top:191px;left:auto;max-width:290px;width:45%}
 .radio-widget{top:321px}
 .radio-widget.radio-open{max-height:min(210px,max(60px,calc(100dvh - 580px)))}
 .navigation-dock{min-height:193px}
 .compass-grid{grid-template-columns:repeat(8,1fr)}
 .warning-stack{top:253px;max-width:320px;max-height:64px}
 .debug-badge{top:101px}
}

/* Landscape: a compact three-column dock leaves a usable chart between it
   and the HUD. The radio remains available instead of disappearing. */
@media(max-height:520px) and (min-width:621px){
 .hud-top{left:8px;right:8px;top:6px;height:68px;padding:4px 10px;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);gap:14px;align-items:center;align-content:normal}
 .brand{position:static;transform:none;width:auto}
 .brand canvas{width:220px;height:35px;margin:0 auto}
 .brand-sub{display:none}
 .signal,.energy{margin:0;min-width:0}
 .hud-label{display:block;font-size:12px;line-height:1.15;letter-spacing:0}
 .hud-label>span,.hud-label>strong{display:block;overflow-wrap:normal}
 .hud-label strong{font-size:12px;margin:0}
 .meter{height:9px;margin:3px 0;padding:1px}
 .mission-line{font-size:11px;line-height:1.1;letter-spacing:0}
 .status-dot{display:none}
 .utility{top:83px;left:auto;right:12px;display:flex;gap:5px;max-width:calc(100% - 330px)}
 .utility button,.utility select{min-height:30px;font-size:12px;padding:3px 5px;white-space:normal;line-height:1.15;min-width:0}
 .utility select{max-width:116px}
 .utility button{max-width:180px}
 .compass-widget{top:83px;left:12px;width:78px;height:96px}
 .compass-widget canvas{width:68px;height:68px}
 .compass-widget span{font-size:12px}
 .radar-widget{display:none}
 .telemetry-strip{top:124px;left:auto;right:12px;gap:12px;padding:5px 8px;width:auto;max-width:294px}
 .telemetry-strip i{font-size:11px}
 .telemetry-strip strong{font-size:13px}
 .radio-widget{display:block;top:83px;bottom:auto;left:105px;width:198px;padding:6px 8px;max-height:none;overflow:visible;z-index:6}
 .radio-widget .panel-kicker{margin:0;padding:0;border:0;letter-spacing:0}
 .radio-widget h2{font-size:12px}
 .radio-widget .radio-body,.radio-led{display:none}
 .radio-toggle{display:inline-block;min-height:26px;min-width:26px;padding:2px 4px;font-size:12px;flex-shrink:0}
 .radio-widget:not(.radio-open) #dialogue-box,.radio-widget:not(.radio-open) #dialogue-nav{display:none!important}
 .radio-widget.radio-open{width:min(344px,calc(100% - 128px));max-height:calc(100dvh - 239px);overflow:auto}
 .radio-widget.radio-open #dialogue-box{font-size:13px;line-height:1.3;margin-top:7px}
 .radio-widget #dialogue-nav{margin-top:6px}
 .radio-widget #dialogue-nav button{min-height:28px;font-size:12px;padding:3px 6px}
 .navigation-dock{bottom:43px;width:calc(100% - 24px);min-height:132px;grid-template-columns:1.05fr 1fr 1fr;padding:7px 0}
 .navigation-dock>div{padding:0 10px;min-width:0}
 .navigation-dock>div+div{border-left:1px solid #365970}
 .navigation-dock .panel-kicker{gap:4px;margin-bottom:4px;padding-bottom:3px}
 .navigation-dock h2{font-size:13px}
 .heading-module .panel-kicker{display:flex}
 .heading-module .panel-kicker strong{font-size:12px}
 .heading-module>label{display:block;font-size:12px}
 .heading-module input[type=range]{height:18px;margin:2px 0}
 .compass-grid{grid-template-columns:repeat(8,1fr);gap:3px}
 .btn-dir{min-height:28px;font-size:12px}
 .sensor-fields{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:7px}
 .sensor-fields>div{display:block;margin:0}
 .sensor-fields label{font-size:12px;margin-bottom:3px;white-space:normal}
 .sensor-fields select{width:100%;min-height:29px;font-size:12px;padding:3px}
 .sensor-module p{display:block;margin-top:5px;font-size:11px;line-height:1.15;max-height:none;overflow:visible}
 .qubit-pips{display:none}
 .action-module{grid-column:auto;display:block;border-top:none;margin-top:0;padding-top:0!important}
 .suspicion-container{font-size:12px!important;line-height:1.2;min-height:29px;margin-bottom:7px!important}
 .sail-button{font-size:13px;letter-spacing:0;min-height:39px;padding:5px;gap:5px}
 .sail-icon,.action-module p,.sail-button kbd{display:none}
 .chart-legend{display:none}
 .warning-stack{top:176px;right:12px;width:300px;max-width:calc(100% - 330px);max-height:max(28px,calc(100dvh - 355px));overflow:auto}
 .warning{font-size:12px;line-height:1.2;padding:4px 6px;margin-bottom:4px}
 .bottom-status{left:12px;right:12px;bottom:6px;font-size:11px;line-height:1.15}
 .debug-badge{top:47px;left:50%;right:auto;transform:translateX(-50%);max-width:220px;white-space:normal;font-size:10px;padding:2px 4px}
 .replay-modal{padding:8px}
 .replay-box{max-height:calc(100dvh - 16px);padding:12px}
 .scoreboard-grid{grid-template-columns:repeat(4,1fr)}
}

/* Short portrait windows retain the radio above the controls. */
@media(max-width:620px) and (max-height:700px){
 .hud-top{height:125px;padding-top:42px}
 .brand{top:5px;width:220px}
 .brand canvas{width:220px;height:34px}
 .hud-label,.hud-label strong{font-size:12px;line-height:1.15}
 .meter{height:9px;margin:3px 0}
 .mission-line{font-size:11px}
 .utility{top:137px}
 .utility button,.utility select{min-height:34px;font-size:12px}
 .compass-widget{top:182px;width:78px;height:96px}
 .compass-widget canvas{width:68px;height:68px}
 .compass-widget span{font-size:12px}
 .telemetry-strip{top:182px;left:102px}
 .radio-widget{top:242px;left:102px;width:176px}
 .radio-widget.radio-open{left:12px;width:calc(100% - 24px);max-height:max(64px,calc(100dvh - 520px))}
 .warning-stack{top:285px;left:12px;right:12px;width:auto;max-height:35px}
 .debug-badge{top:102px}
}
@media(max-width:620px) and (max-height:520px){
 html,body{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100%}
 #game-shell{height:680px;min-height:680px}
 .radio-widget.radio-open{max-height:150px}
}
/* Very small windows may scroll; no essential control is clipped away. */
@media(max-width:340px),(max-height:340px){
 html,body{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100%}
 #game-shell{height:680px;min-height:680px}
 .radio-widget.radio-open{max-height:180px}
 .warning-stack{max-height:70px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Ghost Route: a seafoam signal against a deep-water bridge. */
:root{--ink:#041119;--panel:#071c28f5;--cyan:#8ce5f1;--seafoam:#84ecd7;--white:#e4f1e9;--muted:#9cb9c1;--line:#3c6a79;--red:#ff9a95;--green:#91e9bd}
button,select{border-width:1px;border-color:var(--line);background:#0b2937;box-shadow:inset 0 0 0 1px #183a46,0 2px 0 #031018}
button:hover,select:hover{border-color:var(--cyan);background:#143e4c}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#ffe4a0}
input[type=range],input[type=checkbox]{accent-color:var(--seafoam)}
.scanlines{opacity:.13}
.bezel{border-color:#020b11;box-shadow:inset 0 0 0 1px #3c6a79,inset 0 0 60px #010a1470}
.pixel-panel{border:1px solid #507d87;background:linear-gradient(180deg,#0a2634f5,#061924f5);box-shadow:0 0 0 2px #041017,inset 0 0 0 1px #183843,3px 3px 0 #010911a3}
.pixel-panel:before{content:'';position:absolute;width:3px;height:3px;top:4px;left:4px;background:#83b8bf;box-shadow:0 1px 0 #041017;pointer-events:none}
.hud-top{top:12px;left:14px;right:14px;height:84px;grid-template-columns:minmax(0,1fr) 330px minmax(0,1fr);padding:10px 18px;border-bottom:3px solid #3f7c87;clip-path:none}
.hud-label{font-size:13px;letter-spacing:.4px}
.hud-label strong{white-space:nowrap}
.meter{height:13px;padding:2px;border:1px solid #456b78;background:#041119;box-shadow:none}
.meter>div{background:repeating-linear-gradient(90deg,transparent 0,transparent 13px,#041d2866 13px,#041d2866 15px),linear-gradient(#91ecc2,#499e85);box-shadow:none}
.mission-line{font-size:12px;letter-spacing:.4px;color:#b9d6d4}
.status-dot{width:6px;height:6px;background:var(--seafoam);box-shadow:none}
.brand{display:flex;justify-content:center;align-items:center;gap:9px;line-height:1}
.brand-mark{width:46px;height:46px;image-rendering:pixelated;flex-shrink:0}
.brand-type{text-align:left}
.brand h1{font-size:29px;text-transform:uppercase;letter-spacing:-1.8px;color:#e0f7ec;text-shadow:2px 2px 0 #2a6575,4px 4px 0 #020d15;white-space:nowrap}
.brand-sub{display:block;margin:8px 0 0 2px;font-size:10px;letter-spacing:4px;color:var(--seafoam)}
.utility{gap:6px;align-items:stretch}
.utility select{max-width:150px;font-size:12px}
.utility button{font-size:12px;min-height:34px}
.menu-trigger{display:flex;align-items:center;gap:8px;border-color:#75b9b8;color:var(--seafoam)}
.menu-icon{width:12px;height:2px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor}
.compass-widget,.radar-widget{background:#071b28eb}
.compass-widget span,.radar-widget>span{color:var(--seafoam)}
.radar-widget>span{font-size:12px;letter-spacing:1px}
.radar-widget small{font-size:12px;color:#a4c8be}
.telemetry-strip{top:155px;border-color:#3b6b76;background:#071c28ed}
.telemetry-strip i{font-size:11px;color:#a2bfc6}
.telemetry-strip strong{color:#d9eee6}
.radio-widget{bottom:236px;max-height:235px}
.panel-kicker{padding-bottom:8px;margin-bottom:9px;border-color:#315765;color:#d6e9e1;letter-spacing:.6px}
.radio-led{width:5px;height:5px;background:var(--seafoam)}
.radio-body canvas{border:1px solid #315765}
.radio-body strong{font-size:13px;letter-spacing:.4px}
.radio-body span{font-size:12px}
.radio-widget p{font-size:13px;line-height:1.5}
.warning{border:1px solid #d48682;border-left:4px solid #ff9a95;background:#321d29f2;color:#ffcbc0;font-size:13px}
.navigation-dock{width:min(1080px,calc(100% - 38px));min-height:175px;padding:14px 0;grid-template-columns:1.12fr 1fr 1.05fr;border-top:3px solid #6cc1bf;clip-path:none}
.navigation-dock>div{padding:0 18px}
.navigation-dock>div+div{border-color:#315765}
.navigation-dock label{font-size:12px}
.heading-module .panel-kicker strong{font-size:13px;color:var(--seafoam)}
.btn-dir{min-height:30px;font-size:12px;box-shadow:none}
.btn-dir.active{border-color:var(--seafoam);background:#245651;color:#dcfff2}
.sensor-fields{grid-template-columns:minmax(0,1fr) 83px}
.sensor-fields select{font-size:12px;padding:4px 6px}
.qubit-pips{color:var(--seafoam);font-size:17px;letter-spacing:-2px}
.sensor-module p{font-size:12px;line-height:1.3;color:#b0cdd1}
.suspicion-container{gap:8px;min-height:29px;line-height:1.25}
.sail-button{justify-content:space-between;min-height:51px;padding:10px 12px;border:1px solid #b7fff0;background:linear-gradient(#a0f5de,#6dcdbd);box-shadow:inset 0 0 0 2px #65b8ad,0 4px 0 #020b13;color:#062821;font-size:15px;letter-spacing:.3px}
.sail-button:hover{border-color:#e3fff4;background:#bafbe7}
.sail-icon{color:#1b5d56}
.sail-button kbd{border-color:#4d968e;background:#92decb;color:#1b5d56;font-size:11px}
.action-module p{font-size:11px;line-height:1.4;color:#9dbbc4}
.chart-legend{bottom:237px;font-size:12px;line-height:1.85}
.bottom-status{font-size:11px;color:#abc3c7}

/* The bridge menu has its own wordmark, signal emblem and campaign console. */
.mission-menu{position:fixed;inset:0;z-index:30;display:flex;justify-content:center;align-items:center;padding:24px;overflow:auto;background:radial-gradient(ellipse at 30% 40%,#0d435866,#04101aed 70%),repeating-linear-gradient(0deg,#04101922 0,#04101922 1px,transparent 1px,transparent 4px)}
.menu-box{position:relative;width:min(1080px,100%);max-height:calc(100dvh - 48px);overflow:auto;border-color:#56949a;background:#071c28f8;box-shadow:0 0 0 3px #020d15,8px 8px 0 #010912aa}
.menu-box:before{top:7px;left:7px;background:var(--seafoam)}
.menu-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:59px;padding:11px 22px;border-bottom:1px solid #2d505e;background:#08222e}
.menu-eyebrow{color:#9cd5d1;font-size:11px;letter-spacing:2px}
#btn-menu-close{min-height:32px;padding:4px 8px;color:#adcad0;font-size:11px;background:transparent;box-shadow:none}
.menu-content{display:grid;grid-template-columns:1.04fr 1fr;gap:40px;padding:30px 36px 26px}
.menu-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.menu-emblem{position:relative;display:flex;align-items:center;justify-content:center;width:108px;height:108px;margin-bottom:19px;background:repeating-linear-gradient(0deg,transparent 0,transparent 17px,#183e452b 17px,#183e452b 18px),repeating-linear-gradient(90deg,transparent 0,transparent 17px,#183e452b 17px,#183e452b 18px)}
.menu-emblem img{width:94px;height:94px;image-rendering:pixelated}
.emblem-cross{position:absolute;width:5px;height:5px;background:#83d4ce}
.emblem-cross.north{top:-4px;left:51px}.emblem-cross.east{right:-4px;top:51px}.emblem-cross.south{bottom:-4px;left:51px}.emblem-cross.west{left:-4px;top:51px}
.menu-brand-name{color:#def9e9;font-size:66px;line-height:.88;font-weight:900;letter-spacing:-5px;text-shadow:4px 4px 0 #256277}
.brand-period{color:var(--seafoam);text-shadow:none}
.menu-brand-line{margin-top:16px;color:var(--seafoam);font-size:10px;letter-spacing:2px}
#menu-title{margin-top:29px;color:#e0efe6;font-size:21px;letter-spacing:-.5px;line-height:1.25;text-transform:none}
#menu-intro{max-width:420px;margin-top:11px;color:#aec8cd;font-size:14px;font-weight:400;line-height:1.65}
.menu-primary{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;max-width:420px;min-height:55px;margin-top:25px;padding:13px 17px;border:1px solid #c1fff0;background:#8be6cb;box-shadow:inset 0 0 0 2px #58b3a5,0 4px 0 #031018;color:#092a25;font-size:16px}
.menu-primary:hover{border-color:#e2fff4;background:#b4f6dc}
.menu-primary>span:last-child{font-size:25px;line-height:1}
.menu-keyboard{margin-top:13px;color:#80a8b2;font-size:10px;font-weight:400;line-height:1.5}
.menu-console{display:flex;flex-direction:column;gap:18px;min-width:0}
.campaign-card{position:relative;padding:19px 20px;border:1px solid #366b77;background:linear-gradient(135deg,#123946,#0c2935)}
.campaign-card:before{content:'';position:absolute;top:-1px;left:-1px;width:45px;height:3px;background:var(--seafoam)}
.menu-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:15px;border-bottom:1px solid #365b67}
.menu-section-heading h3{color:#d8ede4;font-size:15px;letter-spacing:.5px;text-transform:uppercase}
#current-level{min-width:40px;padding:4px 6px;border:1px solid #4b938f;background:#174b4c;color:var(--seafoam);font-size:16px;text-align:center}
.campaign-selector{display:grid;grid-template-columns:minmax(0,1fr) minmax(86px,.65fr);gap:16px;align-items:start}
.campaign-selector label,.campaign-difficulty>span,.menu-settings label{display:block;margin-bottom:7px;color:#a3c4c9;font-size:11px;font-weight:400}
#level-select{width:100%;min-height:39px;background:#09232f;font-size:12px}
.campaign-difficulty strong{display:inline-block;padding-top:8px;color:#d0eadb;font-size:13px;line-height:1.25}
.level-description{min-height:66px;margin-top:16px;color:#bbd3d5;font-size:13px;line-height:1.55;font-weight:400}
.campaign-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #315b66;color:#9dbcc3;font-size:11px;font-weight:400}
.campaign-progress strong{color:var(--seafoam);text-align:right}
.menu-level-action{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;margin-top:15px;padding:9px 12px;border-color:#5cbab2;background:#16493f;color:#a8f0d4;font-size:12px}
.menu-level-action:hover{border-color:#a3f5d9;background:#226354}
.menu-section-label{margin-bottom:11px;color:#b5d4d5;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.menu-settings-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.menu-settings-row select,.menu-settings-row button{width:100%;min-height:42px;font-size:12px}
.menu-guide{padding:11px 13px;border:1px solid #2d5361;color:#abcad0;background:#09222e}
.menu-guide summary{padding:2px 0;color:#bdd9d9;font-size:12px;cursor:pointer}
.menu-guide[open] summary{margin-bottom:13px}
.menu-guide ol{display:grid;gap:12px;margin:0;padding-left:23px}
.menu-guide li{padding-left:4px;color:var(--seafoam);font-size:12px}
.menu-guide strong{color:#d4e8df;font-size:12px}
.menu-guide p{margin-top:4px;color:#a3c1c8;font-size:12px;font-weight:400;line-height:1.5}
.menu-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-secondary-actions button{min-height:36px;background:transparent;box-shadow:none;color:#a8c3c8;font-size:11px}
.menu-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 22px;border-top:1px solid #244b58;color:#83a7b3;font-size:10px;font-weight:400}
.menu-footer-code{color:#89c8c4;letter-spacing:2px}
.replay-box>.panel-kicker h2{color:#d4ebe5}
.outcome-banner{border-color:#579f9c;background:#11313c;color:#dfede4;font-size:14px;line-height:1.5}
.scoreboard-grid span{font-size:12px}
.scoreboard-grid strong{color:var(--seafoam)}
.timeline-cell{border-color:#446a75;background:#12313d;font-size:12px}
.timeline-cell.attack{border-color:#e58e88;background:#412832}
.timeline-cell.current{outline-color:var(--seafoam)}
.replay-controls button{font-size:12px}
.replay-controls #btn-next-level{flex-basis:100%;margin-top:0;min-height:43px;justify-content:center}
.tutorial-focus{outline:2px solid var(--seafoam);outline-offset:4px;box-shadow:0 0 0 6px #79e7cd22}

@media(min-width:1600px){
 .hud-top{grid-template-columns:1fr 410px 1fr}.brand h1{font-size:35px}.brand-mark{width:52px;height:52px}.navigation-dock{width:1120px}
}
@media(max-width:1200px){
 .hud-top{grid-template-columns:minmax(0,1fr) 280px minmax(0,1fr);gap:15px;padding:10px 13px}.brand h1{font-size:25px;letter-spacing:-1.5px}.brand-mark{width:40px;height:40px}.hud-label{font-size:12px;letter-spacing:0}.mission-line{font-size:11px;letter-spacing:0}
 .navigation-dock{grid-template-columns:1fr 1fr 1fr}.navigation-dock>div{padding:0 12px}.menu-content{gap:28px;padding:26px 28px}
}
@media(max-height:740px) and (min-width:900px){
 .radio-widget{max-height:175px;bottom:235px}.navigation-dock{min-height:159px}.menu-content{padding-top:20px;padding-bottom:20px}.menu-emblem{width:82px;height:82px;margin-bottom:15px}.menu-emblem img{width:76px;height:76px}.emblem-cross{display:none}.menu-brand-name{font-size:56px}#menu-title{margin-top:20px}.menu-primary{margin-top:20px}
}
@media(max-width:900px){
 .utility #btn-fullscreen,.utility #btn-restart{display:none}.menu-content{gap:24px;padding:24px}.menu-brand-name{font-size:56px}.menu-brand-line{font-size:9px;letter-spacing:1px}#menu-title{font-size:20px}#menu-intro{font-size:13px}.campaign-card{padding:16px}
}
@media(max-width:850px){
 .hud-top{top:8px;left:9px;right:9px;height:136px;padding:55px 11px 9px;grid-template-columns:1fr 1fr;gap:13px;align-items:start;align-content:start}.brand{top:9px;width:264px}.brand h1{font-size:27px}.brand-mark{width:36px;height:36px}.brand-sub{display:block;margin-top:5px;font-size:8px;letter-spacing:3px}
 .hud-label,.hud-label strong{font-size:12px}.meter{height:10px}.mission-line{font-size:10px;line-height:1.2}.utility{top:156px;left:auto;right:12px;display:flex;gap:6px}.utility select{width:154px;max-width:none}.utility button,.utility select{min-height:35px;padding:4px 8px;font-size:12px;white-space:nowrap}
 .compass-widget{top:157px;width:83px;height:101px}.compass-widget canvas{width:74px;height:74px}.compass-widget span{font-size:12px}.telemetry-strip{top:204px;left:107px;right:12px;gap:7px;padding:6px 8px}.telemetry-strip i{font-size:10px}.telemetry-strip strong{font-size:13px}
 .radio-widget{top:270px;bottom:auto;width:173px;max-height:none}.radio-widget h2{font-size:12px}.radio-widget.radio-open #dialogue-box{font-size:13px;line-height:1.4}.radio-widget.radio-open{max-height:min(180px,max(90px,calc(100dvh - 580px)))}
 .navigation-dock{bottom:43px;width:calc(100% - 24px);min-height:212px;grid-template-columns:1fr 1fr;padding:10px 0}.navigation-dock>div{padding:0 10px}.navigation-dock .panel-kicker{margin-bottom:5px;padding-bottom:5px}.navigation-dock h2{font-size:12px}.heading-module .panel-kicker strong{font-size:11px}.btn-dir{min-height:29px;font-size:12px}.sensor-fields{display:block}.sensor-fields label{font-size:11px}.sensor-fields select{font-size:12px;padding:3px}.sensor-module p{font-size:11px;line-height:1.3}
 .action-module{grid-template-columns:1fr 1fr;padding-top:9px!important;margin-top:9px}.suspicion-container{min-height:42px;font-size:12px!important}.sail-button{justify-content:center;min-height:44px;padding:5px;font-size:13px;letter-spacing:0}.warning-stack{top:309px;left:auto;right:12px;width:calc(100% - 24px);max-height:61px}.warning{font-size:11px;line-height:1.3;padding:6px 8px}.bottom-status{font-size:10px}.debug-badge{top:111px;font-size:10px}
}
@media(min-width:521px) and (max-width:850px) and (min-height:521px){
 .hud-top{height:124px;padding-top:49px}.utility,.compass-widget{top:146px}.compass-widget{width:96px;height:114px}.compass-widget canvas{width:86px;height:86px}.telemetry-strip{top:195px;left:auto;width:min(320px,50%)}.radio-widget{top:273px}.navigation-dock{min-height:194px}.warning-stack{top:238px;left:auto;width:min(320px,50%)}
}
@media(max-width:700px){
 .mission-menu{align-items:flex-start;padding:12px}.menu-box{max-height:calc(100dvh - 24px)}.menu-topbar{min-height:54px;padding:10px 14px;gap:10px}.menu-eyebrow{font-size:9px;letter-spacing:.7px;line-height:1.5}.menu-content{grid-template-columns:1fr;gap:24px;padding:22px}
 .menu-hero{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;column-gap:14px}.menu-emblem{width:72px;height:72px;margin:0;grid-row:1/3}.menu-emblem img{width:64px;height:64px}.emblem-cross{display:none}.menu-brand-name{font-size:43px;line-height:.9;letter-spacing:-3px}.menu-brand-name br{display:none}.menu-brand-line{align-self:end;margin-top:9px;font-size:9px;line-height:1.5;letter-spacing:.6px}
 #menu-title{grid-column:1/3;margin-top:22px;font-size:20px}#menu-intro{grid-column:1/3;max-width:none;margin-top:8px;font-size:13px;line-height:1.55}.menu-primary{grid-column:1/3;max-width:none;margin-top:19px;min-height:49px;font-size:14px}.menu-keyboard{grid-column:1/3;margin-top:11px;font-size:10px}.menu-console{gap:17px}.level-description{min-height:0}.menu-footer{padding:12px 14px;font-size:9px;line-height:1.5}.menu-footer-code{font-size:9px;letter-spacing:.5px;white-space:nowrap}
}
@media(max-height:520px) and (min-width:621px){
 .hud-top{top:6px;left:8px;right:8px;height:68px;padding:4px 10px;grid-template-columns:minmax(0,1fr) 225px minmax(0,1fr);gap:12px;align-items:center;align-content:normal}.brand{position:static;transform:none;width:auto;gap:5px}.brand h1{font-size:23px;letter-spacing:-1.5px}.brand-mark{width:32px;height:32px}.brand-sub{display:none}.hud-label,.hud-label strong{font-size:11px}.meter{height:8px}.mission-line{font-size:10px}
 .utility{top:84px;left:auto;right:12px;display:flex;gap:5px}.utility button,.utility select{min-height:30px;padding:3px 6px;font-size:11px}.utility select{width:148px;max-width:148px}.compass-widget{top:84px;width:77px;height:93px}.compass-widget canvas{width:67px;height:67px}.compass-widget span{font-size:11px}.telemetry-strip{top:123px;left:auto;width:auto;gap:12px;padding:5px 8px}.telemetry-strip i{font-size:10px}.telemetry-strip strong{font-size:12px}
 .radio-widget{top:84px;bottom:auto;left:103px;width:190px;padding:6px 8px;max-height:none}.radio-widget h2{font-size:11px}.radio-widget.radio-open #dialogue-box{font-size:12px;line-height:1.35}.navigation-dock{bottom:43px;min-height:132px;grid-template-columns:1.05fr 1fr 1fr;padding:7px 0}.navigation-dock>div{padding:0 10px}.navigation-dock .panel-kicker{margin-bottom:4px;padding-bottom:3px}.navigation-dock h2{font-size:12px}.heading-module .panel-kicker strong{font-size:11px}.heading-module>label{font-size:11px}.btn-dir{min-height:28px;font-size:11px}
 .sensor-fields{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:7px}.sensor-fields label,.sensor-fields select{font-size:11px}.sensor-fields select{width:100%;padding:3px}.sensor-module p{font-size:10px;line-height:1.25}.action-module{display:block;grid-column:auto;margin-top:0;padding-top:0!important;border-top:none}.suspicion-container{min-height:29px;margin-bottom:7px!important;font-size:11px!important}.sail-button{min-height:39px;font-size:12px}.warning-stack{top:176px;left:auto;right:12px;width:300px;max-width:calc(100% - 330px);max-height:max(28px,calc(100dvh - 355px))}.warning{font-size:11px;line-height:1.25;padding:4px 6px}.bottom-status{font-size:10px}.debug-badge{top:47px;font-size:9px}
 .mission-menu{align-items:flex-start;padding:10px}.menu-box{max-height:calc(100dvh - 20px)}.menu-content{grid-template-columns:1fr 1fr;gap:22px;padding:22px}.menu-hero{display:flex}.menu-emblem{width:62px;height:62px;margin-bottom:12px}.menu-emblem img{width:56px;height:56px}.menu-brand-name{font-size:44px}.menu-brand-name br{display:block}.menu-brand-line{font-size:9px;letter-spacing:.5px}#menu-title{margin-top:18px;font-size:18px}#menu-intro{font-size:12px;line-height:1.5}.menu-primary{min-height:45px;font-size:13px}
}
@media(max-width:620px) and (max-height:700px){
 .hud-top{height:125px;padding-top:48px}.brand{top:7px}.brand h1{font-size:24px}.hud-label,.hud-label strong{font-size:11px}.mission-line{font-size:10px}.utility,.compass-widget{top:146px}.telemetry-strip{top:192px}.radio-widget{top:251px;left:12px}.warning-stack{top:290px;max-height:40px}.debug-badge{top:102px}
}
@media(max-width:390px){
 .menu-content{padding:19px 17px}.menu-hero{grid-template-columns:60px minmax(0,1fr);column-gap:11px}.menu-emblem{width:60px;height:60px}.menu-emblem img{width:54px;height:54px}.menu-brand-name{font-size:34px;letter-spacing:-2.5px}.menu-brand-line{font-size:8px;letter-spacing:.2px}.menu-settings-row{grid-template-columns:1fr}.menu-secondary-actions{gap:7px}.menu-secondary-actions button{font-size:10px;padding:6px}.campaign-selector{grid-template-columns:minmax(0,1fr) minmax(75px,.7fr);gap:10px}
}

/* Notices occupy a control row; the chart never sits behind them. */
.bottom-status{bottom:11px;font-size:11px;line-height:1.2}
.navigation-dock .dock-instruments{display:contents}
.navigation-dock .heading-module,.navigation-dock .sensor-module{padding:0 18px}
.navigation-dock .sensor-module{border-left:1px solid #315765}
.navigation-dock .dock-notices{position:static;grid-column:1/-1;display:none;flex-wrap:wrap;gap:8px;width:auto;max-width:none;max-height:none;overflow:visible;border:0;padding:0 14px 10px}
.navigation-dock .dock-notices:has(.warning[style*="block"]){display:flex}
.dock-notices .warning{flex:1 1 240px;margin:0;padding:7px 10px;line-height:1.4;box-shadow:none}
.navigation-dock .heading-module{border-left:0}
@media(max-width:1200px){.navigation-dock .heading-module,.navigation-dock .sensor-module{padding:0 12px}}
@media(max-width:850px){.navigation-dock .heading-module,.navigation-dock .sensor-module{padding:0 10px}}
@media(max-height:520px) and (min-width:621px){
 .compass-widget,.radar-widget{display:none}
 .telemetry-strip{top:84px;left:12px;right:auto;width:calc(50% - 24px);justify-content:space-between}
 .radio-widget{top:84px;left:calc(50% + 12px);right:auto;bottom:auto;width:calc(50% - 267px);min-width:110px;padding:5px 7px}
 .radio-widget h2{font-size:10px}
 .radio-widget.radio-open{top:123px;width:calc(50% - 24px);max-height:126px;overflow:auto}
 .navigation-dock{top:132px;bottom:43px;left:auto;right:12px;transform:none;width:calc(50% - 24px);min-height:0;overflow:hidden;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:9px 0}
 .navigation-dock>div{padding:0 9px}
 .navigation-dock .dock-notices{grid-row:1}
 .navigation-dock .dock-instruments{display:grid;grid-row:2;grid-column:1/-1;grid-template-columns:1fr 1fr;min-height:0;overflow:auto;padding:0;border:0}
 .navigation-dock .heading-module,.navigation-dock .sensor-module{padding:0 9px;min-width:0}
 .sensor-fields{display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:6px}
 .sensor-fields>div+div{margin-top:0}
 .sensor-module p{max-height:42px;overflow:auto}
 .action-module{display:grid;grid-row:3;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:9px;align-items:center;border-left:0;border-top:1px solid #315765;padding-top:9px!important;margin-top:8px}
 .action-module p{display:none}
 .suspicion-container{font-size:11px!important;margin:0!important}
 .sail-button{min-height:43px;white-space:normal}
 .dock-notices .warning{flex-basis:100%;font-size:11px}
}
@media(max-width:620px) and (max-height:740px),(min-width:621px) and (max-width:850px) and (min-height:521px) and (max-height:740px){
 .hud-top{height:108px;padding-top:52px}
 .brand{left:21px;top:10px;transform:none;width:244px;justify-content:flex-start}
 .brand h1{font-size:23px}.brand-mark{width:28px;height:28px}.brand-sub{font-size:8px;letter-spacing:1.5px}
 .utility{top:17px;right:16px}.utility select{display:none}
 .compass-widget,.radar-widget{display:none}
 .radio-widget{top:128px;left:12px;width:calc(35% - 12px);padding:6px 8px}
 .radio-widget h2{font-size:10px}
 .radio-widget.radio-open{width:calc(100% - 24px);max-height:110px}
 .telemetry-strip{top:128px;left:calc(35% + 12px);right:12px;width:auto;padding:6px 8px;justify-content:space-between}
 .telemetry-strip i{font-size:10px}.telemetry-strip strong{font-size:12px}
}

/* ==========================================================================
   SUNSET RESCUE THEME — paleta "Resgate no pôr do sol"
   Só cores e efeitos; o layout acima não muda.
   Laranja = resgate/ação · Dourado = destaque · Lilás = quântico/Quoora
   Âmbar = GPS · Coral = perigo/recife
   ========================================================================== */
:root{
  --ink:#120d24;--panel:#1a1336f5;--white:#fbefe2;--muted:#cbbcd8;--line:#6b5a8e;
  --sun:#ff8a3d;--sun-deep:#e0651f;--gold:#ffd166;--lilac:#b69cff;--lilac-soft:#d7c8ff;
  --amber:#ffb347;--coral:#ff6b6b;--good:#a6e8a0;
  --cyan:var(--gold);--seafoam:var(--gold);--red:var(--coral);--green:var(--good)
}
html,body{background:#120d24;color:var(--white)}
#game-shell{background:#1a1240}
strong{color:var(--gold)}
button,select{color:var(--white);background:#24193f;border-color:var(--line);box-shadow:inset 0 0 0 1px #34275a,0 2px 0 #0b0717}
button:hover,select:hover{background:#33245a;border-color:var(--gold)}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#ffe9a8}
input[type=range],input[type=checkbox]{accent-color:var(--sun)}
.scanlines{opacity:.12;background:repeating-linear-gradient(0deg,#0d0820 0,#0d0820 1px,transparent 1px,transparent 4px)}
.bezel{border-color:#0b0619;box-shadow:inset 0 0 0 1px #6b5a8e,inset 0 0 70px #0b061980}
.pixel-panel{border-color:#7a64a8;background:linear-gradient(180deg,#221846f5,#130d2af5);box-shadow:0 0 0 2px #0b0717,inset 0 0 0 1px #34275a,3px 3px 0 #06030fa8}
.pixel-panel:before{background:var(--gold)}
.hud-top{border-bottom:3px solid var(--sun)}
.hud-label{color:#f0e2f5}
.mission-line{color:#e4d3ea}
.status-dot{background:var(--sun)}
.meter{border-color:#6b5a8e;background:#0d0820}
.meter>div{background:repeating-linear-gradient(90deg,transparent 0,transparent 13px,#0d082055 13px,#0d082055 15px),linear-gradient(#e2d6ff,#8b6cf0)}
.meter #gps-meter{background:repeating-linear-gradient(90deg,transparent 0,transparent 13px,#0d082055 13px,#0d082055 15px),linear-gradient(#ffd08a,#e8891f)}
.meter #gps-meter.danger,.meter #budget-bar-fill.warn{background:linear-gradient(#ff9a8a,#c9344a)}
.brand h1{color:#fff1de;text-shadow:2px 2px 0 var(--sun-deep),4px 4px 0 #1a0b2e}
.brand-sub{color:var(--gold)}
.menu-trigger{border-color:var(--sun);color:#ffd9b8}
.compass-widget,.radar-widget{background:#160f2eeb}
.compass-widget span,.radar-widget>span{color:var(--gold)}
.radar-widget small{color:#e8d6f0}
.telemetry-strip{border-color:#5d4c82;background:#1a1236ed}
.telemetry-strip i{color:#cdbedb}
.telemetry-strip strong{color:#fff1de}
.panel-kicker{border-color:#46386a;color:#f3e6f2}
.radio-led{background:var(--good)}
.radio-body canvas{border-color:var(--lilac)}
.radio-body strong{color:var(--lilac-soft)}
.radio-body span{color:var(--muted)}
.radio-widget p{color:#f6eadf}
.warning{border:1px solid #d9776f;border-left:4px solid var(--coral);background:#3a1a2ef2;color:#ffd3c9}
#alert-gps{border-color:#d8964a;border-left-color:var(--amber);background:#3a2516f2;color:#ffe2b8}
.navigation-dock{border-top:3px solid var(--sun)}
.navigation-dock>div+div,.navigation-dock .sensor-module{border-color:#46386a}
.navigation-dock label{color:#d9c9e4}
.heading-module .panel-kicker strong{color:var(--gold)}
.btn-dir.active{border-color:var(--sun);background:#5a2f3a;color:#ffe6cc}
.sensor-module .panel-kicker h2{color:var(--lilac-soft)}
.qubit-pips{color:var(--lilac)}
.sensor-module p{color:#e2d3ee}
.sail-button{border:1px solid #ffe0b8;background:linear-gradient(#ffb26b,#ff7a2e);box-shadow:inset 0 0 0 2px #e0651f,0 4px 0 #2a1206;color:#2b1206}
.sail-button:hover{border-color:#fff1de;background:linear-gradient(#ffc489,#ff8a3d)}
.sail-icon{color:#5a2408}
.sail-button kbd{border-color:#c45a1c;background:#ffc48f;color:#5a2408}
.action-module p{color:#d2c2dd}
.chart-legend .dash-key:before{border-top-color:var(--amber)}
.chart-legend .heat-key:before{background:var(--lilac)}
.chart-legend .reef-key:before{background:repeating-linear-gradient(135deg,var(--coral) 0,var(--coral) 2px,#1a1236 2px,#1a1236 4px)}
#legend-true:before{background:#fff1de}
#legend-inertial:before{border-top-color:var(--lilac-soft)}
.bottom-status{color:#d8c8e3}
.debug-badge{background:#4a2140;color:#ffe9b8;border-color:var(--gold)}
/* Menu */
.mission-menu{background:radial-gradient(ellipse at 78% 12%,#ff8a3d40,transparent 38%),radial-gradient(ellipse at 30% 40%,#5b2a6e66,#120d24ed 72%),repeating-linear-gradient(0deg,#0d082022 0,#0d082022 1px,transparent 1px,transparent 4px)}
.menu-box{border-color:#8a6fb8;background:#160f2ef8}
.menu-box:before{background:var(--gold)}
.menu-topbar{border-color:#3c2f5e;background:linear-gradient(90deg,#2a1840,#1d1438 60%,#3a1e3a)}
.menu-eyebrow{color:#ffcf9e}
#btn-menu-close{color:#e3d3ec}
.menu-emblem{background:repeating-linear-gradient(0deg,transparent 0,transparent 17px,#5a3f8a2b 17px,#5a3f8a2b 18px),repeating-linear-gradient(90deg,transparent 0,transparent 17px,#5a3f8a2b 17px,#5a3f8a2b 18px)}
.emblem-cross{background:var(--sun)}
.menu-brand-name{color:#fff1de;text-shadow:4px 4px 0 var(--sun-deep),7px 7px 0 #2a0f3a}
.brand-period{color:var(--sun)}
.menu-brand-line{color:var(--gold)}
#menu-title{color:#fff1de}
#menu-intro{color:#dccbe6}
.menu-primary{border:1px solid #ffe0b8;background:linear-gradient(#ffb26b,#ff7a2e);box-shadow:inset 0 0 0 2px #e0651f,0 4px 0 #2a1206;color:#2b1206}
.menu-primary:hover{border-color:#fff1de;background:linear-gradient(#ffc489,#ff8a3d)}
.menu-keyboard{color:#bfaed0}
.campaign-card{border-color:#5d4c82;background:linear-gradient(135deg,#2a1d4a,#1a1336)}
.campaign-card:before{background:var(--sun)}
.menu-section-heading{border-color:#46386a}
.menu-section-heading h3{color:#f3e6f2}
#current-level{border-color:var(--lilac);background:#3d2560;color:var(--gold)}
.campaign-selector label,.campaign-difficulty>span,.menu-settings label{color:#d0c0dd}
#level-select{background:#1d1438}
.campaign-difficulty strong{color:#fff1de}
.level-description{color:#e2d3ee}
.campaign-progress{border-color:#46386a;color:#d0c0dd}
.menu-level-action{border-color:var(--sun);background:#4a2a35;color:#ffd9b8}
.menu-level-action:hover{border-color:#ffd9b8;background:#5e3540}
.menu-section-label{color:#e3d3ec}
.menu-guide{border-color:#46386a;color:#e2d3ee;background:#1d1438}
.menu-guide summary{color:#f3e6f2}
.menu-guide li{color:var(--gold)}
.menu-guide strong{color:#fff1de}
.menu-guide p{color:#d6c6e1}
.menu-secondary-actions button{color:#e3d3ec}
.menu-footer{border-color:#3c2f5e;color:#c4b2d4}
.menu-footer-code{color:var(--gold)}
/* Replay */
.replay-modal{background:linear-gradient(90deg,transparent 25%,#120d24bb)}
.replay-box>.panel-kicker h2{color:#fff1de}
.outcome-banner{border-color:#8a6fb8;background:#241a40;color:#fbefe2}
.scoreboard-grid span{color:#d6c6e1}
.timeline-cell{border-color:#5d4c82;background:#22183f}
.timeline-cell.attack{border-color:var(--coral);background:#4a2030}
#turn-event-info,#meas-details,#timeline-legend{color:#e6d8ef}
#replay-measurement-box{border-color:#5d4c82}
.replay-box>label{color:#e3d3ec}
.tutorial-focus{outline-color:var(--gold);box-shadow:0 0 0 6px #ffd16622}

/* --------------------------------------------------------------------------
   FRUFRUS: brilhos e animações (desligados com prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@keyframes gr-sail-glow{0%,100%{box-shadow:inset 0 0 0 2px #e0651f,0 4px 0 #2a1206,0 0 0 0 #ff8a3d00}50%{box-shadow:inset 0 0 0 2px #e0651f,0 4px 0 #2a1206,0 0 18px 2px #ff8a3d88}}
@keyframes gr-blink{0%,60%,100%{opacity:1}70%,90%{opacity:.25}}
@keyframes gr-dot{0%,100%{box-shadow:0 0 0 0 #ff8a3d00}50%{box-shadow:0 0 8px 2px #ff8a3dcc}}
@keyframes gr-qubits{0%,100%{text-shadow:0 0 0 #b69cff00;color:#b69cff}50%{text-shadow:0 0 8px #b69cffcc;color:#e9e0ff}}
@keyframes gr-quoora{0%,100%{box-shadow:0 0 0 0 #b69cff00}50%{box-shadow:0 0 12px 1px #b69cffaa}}
@keyframes gr-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes gr-warn{0%,100%{box-shadow:3px 3px 0 #06030f}50%{box-shadow:3px 3px 0 #06030f,0 0 14px #ffb34766}}
.sail-button,.menu-primary{animation:gr-sail-glow 2.6s ease-in-out infinite}
.sail-button:disabled{animation:none}
.radio-led{animation:gr-blink 1.8s steps(1,end) infinite}
.status-dot{animation:gr-dot 2s ease-in-out infinite}
.qubit-pips{animation:gr-qubits 2.4s ease-in-out infinite}
.radio-body canvas{animation:gr-quoora 3s ease-in-out infinite}
.brand-mark,.menu-emblem img{animation:gr-bob 2.8s steps(4,end) infinite}
.warning{animation:gr-warn 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
 .sail-button,.menu-primary,.radio-led,.status-dot,.qubit-pips,.radio-body canvas,.brand-mark,.menu-emblem img,.warning{animation:none!important}
}

/* 32-bit ship layer: full-resolution sprite above the 16-bit chart, below scanlines and panels. */
.ship-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;z-index:1}

/* ==========================================================================
   PAINÉIS DE CONSOLE — moldura de aço com parafusos e tela embutida
   (referência: arte conceitual do SPOOFED). Só aparência; o layout não muda.
   ========================================================================== */
:root{
  --steel:linear-gradient(180deg,#eef2f7 0%,#c3cad6 25%,#98a1b2 60%,#6b7487 100%);
  --screen:linear-gradient(180deg,#1b1a44 0%,#14133a 60%,#0f0e2e 100%);
  --steel-edge:#2a2f3a;--steel-light:#e4e9f0;--steel-mid:#8e97a8;
  --rivet:radial-gradient(circle,#ffffff 0 .8px,#b9c1ce 1.3px,#3a404d 2.2px,transparent 2.7px);
  --radius:14px;--radius-sm:10px
}
/* Moldura: o fundo "border-box" é o aço, o "padding-box" é a tela escura. */
.pixel-panel,.menu-box,.telemetry-strip{
  border:6px solid transparent;border-radius:var(--radius);
  background:
    var(--screen) padding-box,
    var(--rivet) top 0 left 0/6px 6px no-repeat border-box,
    var(--rivet) top 0 right 0/6px 6px no-repeat border-box,
    var(--rivet) bottom 0 left 0/6px 6px no-repeat border-box,
    var(--rivet) bottom 0 right 0/6px 6px no-repeat border-box,
    var(--steel) border-box;
  box-shadow:0 0 0 1px #f4f7fb,0 0 0 4px #8e97a8,0 0 0 6px var(--steel-edge),inset 0 0 0 2px #07061a,inset 0 0 22px #00000070,0 8px 0 5px #0b0717aa,0 14px 26px #05020f66;
}
.pixel-panel:before{display:none}
.menu-box:before{display:none}
.hud-top{border-bottom:6px solid transparent;border-radius:16px}
.navigation-dock{border-top:6px solid transparent;border-radius:16px}
.compass-widget,.radar-widget{border-radius:18px}
.menu-box{border-radius:20px;border-width:8px}
.telemetry-strip{border-width:4px;border-radius:12px}
/* LEDs de console no painel de comando */
.navigation-dock:after{content:'';position:absolute;bottom:-13px;right:28px;width:58px;height:14px;padding:2px 6px;box-sizing:border-box;border:2px solid var(--steel-mid);border-radius:7px;pointer-events:none;background-origin:content-box;background-color:#0b0a24;box-shadow:0 0 0 1px var(--steel-edge);
  background:radial-gradient(circle,#a6e8a0 0 2px,#3c7a3a 3px,transparent 4px) 0 0/14px 8px no-repeat,
             radial-gradient(circle,#ffd166 0 2px,#8a6a1f 3px,transparent 4px) 15px 0/14px 8px no-repeat,
             radial-gradient(circle,#ff6b6b 0 2px,#8a2a2a 3px,transparent 4px) 30px 0/14px 8px no-repeat}
/* Plaquinhas de título, como "BÚSSOLA" e "RADAR GPS" na arte */
.radar-widget>span,.panel-kicker h2,.menu-section-heading h3{display:inline-block;padding:3px 10px;border:2px solid var(--steel-mid);border-radius:8px;background:#0b0a24;box-shadow:inset 0 0 0 1px #000,0 2px 0 var(--steel-edge),inset 0 1px 0 #ffffff14;color:var(--gold);letter-spacing:1px}
.panel-kicker{border-bottom:2px solid #2e2b5a}
.radar-widget>span{margin-top:2px}
/* O nome do jogo numa placa central */
.brand{padding:4px 14px;border:3px solid var(--steel-mid);border-radius:12px;background:#0b0a24;box-shadow:0 0 0 2px var(--steel-edge),inset 0 0 0 1px #000,inset 0 0 14px #00000080}
/* Botões e seletores: teclas escuras com aro de aço */
button,select{border:2px solid var(--steel-mid);border-radius:var(--radius-sm);background:linear-gradient(180deg,#2c2a5e,#1a1840);color:var(--white);box-shadow:inset 0 2px 0 #ffffff1f,inset 0 -2px 0 #00000066,0 3px 0 var(--steel-edge)}
button:hover,select:hover{border-color:var(--gold);background:linear-gradient(180deg,#3a3678,#22204e)}
button:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #ffffff1f,0 1px 0 var(--steel-edge)}
.btn-dir{border-radius:8px}
.btn-dir.active{border-color:var(--sun);background:linear-gradient(180deg,#7a3a3a,#5a2f3a);box-shadow:inset 0 2px 0 #ffffff2a,0 3px 0 #2a1206}
/* Botão principal: laranja de resgate com aro de aço */
.sail-button,.menu-primary{border:3px solid #fff1de;border-radius:14px;background:linear-gradient(180deg,#ffc489 0%,#ff8a3d 55%,#ff7a2e 100%);color:#2b1206;box-shadow:inset 0 3px 0 #ffffff55,inset 0 -3px 0 #e0651f,0 0 0 4px var(--steel-mid),0 0 0 6px var(--steel-edge),0 6px 0 5px #0b0717}
.sail-button:hover,.menu-primary:hover{background:linear-gradient(180deg,#ffd6a8,#ff9a55 55%,#ff8a3d)}
.sail-button kbd{border-radius:6px;border-width:2px}
@keyframes gr-sail-glow{0%,100%{box-shadow:inset 0 3px 0 #ffffff55,inset 0 -3px 0 #e0651f,0 0 0 4px var(--steel-mid),0 0 0 6px var(--steel-edge),0 6px 0 5px #0b0717,0 0 0 0 #ff8a3d00}50%{box-shadow:inset 0 3px 0 #ffffff55,inset 0 -3px 0 #e0651f,0 0 0 4px var(--steel-mid),0 0 0 6px var(--steel-edge),0 6px 0 5px #0b0717,0 0 22px 6px #ff8a3d66}}
.menu-level-action{border-radius:12px;border-width:2px}
/* Medidores: calha escura com aro de aço */
.meter{border:2px solid var(--steel-mid);border-radius:99px;padding:2px;background:#07061a;box-shadow:inset 0 2px 0 #00000080,0 0 0 1px var(--steel-edge)}
.meter>div{border-radius:99px}
/* Caixas internas */
.warning{border-radius:12px}
.campaign-card{border:3px solid var(--steel-mid);border-radius:14px;background:var(--screen);box-shadow:0 0 0 2px var(--steel-edge),inset 0 0 16px #00000060}
.campaign-card:before{display:none}
#current-level{border-radius:8px;border-width:2px}
.menu-guide{border:2px solid var(--steel-mid);border-radius:12px;background:#0f0e2e}
.menu-topbar{border-radius:12px 12px 0 0;background:linear-gradient(90deg,#24204e,#1b1a44 60%,#2a1e48)}
.menu-footer{border-radius:0 0 12px 12px}
.outcome-banner,#replay-measurement-box{border:2px solid var(--steel-mid);border-radius:12px}
.timeline-cell{border-radius:8px}
.radio-body canvas{border:2px solid var(--steel-mid);border-radius:10px;background:#0b0a24}
.menu-emblem{border-radius:16px}
.debug-badge{border-radius:10px}
.replay-box{border-radius:18px}
.compass-widget canvas{width:104px;height:104px;margin:2px auto 0}
.compass-widget span{display:block;margin-top:-1px}
@media(max-width:850px),(max-height:520px){.compass-widget,.radar-widget,.telemetry-strip{border-width:4px}.compass-widget canvas{width:64px;height:64px;margin:1px auto 0}.navigation-dock:after{display:none}}
@keyframes gr-led{0%,100%{filter:none}50%{filter:brightness(1.6)}}
.navigation-dock:after{animation:gr-led 1.4s steps(2,end) infinite}
@media(prefers-reduced-motion:reduce){.navigation-dock:after{animation:none!important}}
@media(max-width:850px),(max-height:520px){
 .brand{padding:0;border:0;background:none;box-shadow:none}
 .radio-widget .panel-kicker h2,.navigation-dock .panel-kicker h2{padding:1px 6px;border-width:1px;letter-spacing:0;box-shadow:none}
 .radio-widget{border-width:4px}
}

/* ==========================================================================
   COMPACTO — painéis menores, mapa maior (como na arte conceitual)
   Só em telas de computador; celular e tablet mantêm o layout acima.
   ========================================================================== */
@media(min-width:900px) and (min-height:600px){
 .pixel-panel,.menu-box{border-width:5px}
 .hud-top{top:10px;height:66px;padding:5px 16px;gap:18px;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr)}
 .brand{padding:2px 10px}.brand h1{font-size:22px;letter-spacing:-1.2px}.brand-mark{width:32px;height:32px}.brand-sub{font-size:8px;margin-top:4px;letter-spacing:3px}
 .hud-label{font-size:11px}.mission-line{font-size:10px}.meter{height:10px;margin:3px 0;padding:1px}
 .utility{top:92px}.utility button,.utility select{min-height:28px;font-size:11px;padding:3px 8px}
 .telemetry-strip{top:132px;gap:14px;padding:3px 8px}.telemetry-strip strong{font-size:15px}.telemetry-strip i{font-size:10px}
 .compass-widget{top:92px;width:104px;height:118px}.compass-widget canvas{width:82px;height:82px;margin:1px auto 0}.compass-widget span{font-size:11px}
 .radar-widget{top:224px;width:120px;padding:4px}.radar-widget canvas{width:98px;height:84px;margin:3px auto}.radar-widget>span{font-size:10px;padding:2px 7px}.radar-widget small{font-size:10px}
 .radio-widget{left:148px;width:236px;bottom:198px;max-height:188px;padding:7px 10px}
 .radio-widget p{font-size:12px;line-height:1.4}.radio-body{gap:8px;margin-bottom:5px}.radio-body canvas{width:38px;height:38px}.radio-body strong{font-size:12px}.radio-body span{font-size:11px}
 .radio-widget #dialogue-nav button{min-height:26px;font-size:11px;padding:2px 8px}
 .panel-kicker{margin-bottom:6px;padding-bottom:5px}
 .radar-widget>span,.panel-kicker h2,.menu-section-heading h3{padding:2px 8px;font-size:11px}
 .navigation-dock{bottom:40px;width:min(860px,calc(100% - 300px));min-height:122px;padding:8px 0}
 .navigation-dock .heading-module,.navigation-dock .sensor-module,.navigation-dock>div{padding:0 13px}
 .navigation-dock label{font-size:11px}.heading-module>label{display:none}
 .heading-module input[type=range]{margin:2px 0 6px;height:14px}
 .btn-dir{min-height:24px;font-size:11px;padding:0}
 .sensor-fields label{font-size:11px;margin-bottom:2px}.sensor-fields select{min-height:28px;font-size:11px;padding:2px 6px}
 .sensor-module p{font-size:11px;margin-top:6px}
 .suspicion-container{font-size:11px;min-height:24px;margin-bottom:7px}
 .sail-button{min-height:40px;font-size:13px;padding:6px 10px}.sail-button kbd{font-size:10px;padding:1px 4px}
 .action-module p{font-size:10px;margin-top:6px}
 .chart-legend{width:192px;bottom:198px;padding:7px 10px;font-size:11px;line-height:1.6}
 .bottom-status{bottom:6px;font-size:10px}
}
@media(min-width:900px) and (min-height:600px) and (max-height:800px){.radio-widget{max-height:160px}.radio-widget .radio-body{display:none}}

/* ==========================================================================
   PONTE DE COMANDO — você está dentro do Spoofed
   Janela de metal em volta do mar, barra superior colada, console de ponta
   a ponta embaixo e bússola solta sobre o mar (sem caixa).
   ========================================================================== */
/* Bússola sem moldura em qualquer tela */
.compass-widget.pixel-panel{background:none;border:0;box-shadow:none;border-radius:0}
.compass-widget span{color:#fff1de;text-shadow:1px 1px 0 #0b0717,-1px 0 0 #0b0717,0 -1px 0 #0b0717,2px 2px 0 #0b0717}

@media(min-width:1200px) and (min-height:640px){
 :root{--console-h:200px;--hud-h:72px}
 /* Console de ponta a ponta: aço escovado, grade de ventilação e parafusos */
 #game-shell:before{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--console-h);z-index:3;pointer-events:none;
   border-top:4px solid #dfe5ee;box-shadow:0 -3px 0 #2a2f3a,0 -10px 24px #05020f88;
   background:
     var(--rivet) top 10px left 10px/6px 6px no-repeat,var(--rivet) top 10px right 10px/6px 6px no-repeat,
     var(--rivet) bottom 10px left 10px/6px 6px no-repeat,var(--rivet) bottom 10px right 10px/6px 6px no-repeat,
     repeating-linear-gradient(90deg,transparent 0 6px,#00000040 6px 9px,transparent 9px 12px) center top 6px/220px 6px no-repeat,
     repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),
     linear-gradient(180deg,#8e97a8 0%,#6b7487 18%,#4c5466 70%,#3a404d 100%)}
 /* Janela da ponte: moldura de metal com cantos arredondados em volta do mar */
 .bezel{inset:auto;top:var(--hud-h);bottom:var(--console-h);left:0;right:0;border:0;box-shadow:none;overflow:hidden}
 .bezel:before{content:'';position:absolute;inset:12px;border-radius:28px;
   box-shadow:0 0 0 60px #7a8396,inset 0 0 0 2px #2a2f3a,inset 0 0 0 4px #c3cad6,inset 0 0 0 6px #2a2f3a,inset 0 0 50px #000000aa}
 .bezel:after{content:'';position:absolute;inset:0;border:2px solid #dfe5ee;border-top-color:#a6afbe;pointer-events:none}
 /* Barra superior colada no topo, placa do nome descendo no meio */
 .hud-top{top:0;left:0;right:0;height:var(--hud-h);border-radius:0 0 20px 20px;border-top-width:0;padding:6px 22px}
 .brand{transform:translateY(12px);padding:6px 20px;border-width:4px;border-color:#c3cad6;box-shadow:0 0 0 3px #2a2f3a,inset 0 0 0 2px #000,inset 0 0 18px #000a,0 6px 0 2px #0b0717aa;z-index:9;position:relative}
 .brand h1{font-size:26px}
 .utility{top:92px;right:28px}
 .telemetry-strip{top:132px;right:28px}
 .compass-widget{top:86px;left:26px;width:126px;height:auto}
 .compass-widget canvas{width:116px;height:116px;margin:0 auto}
 .compass-widget span{font-size:12px}
 .chart-legend{top:200px;bottom:auto;right:28px}
 /* Instrumentos encaixados no console */
 .radar-widget{top:auto;bottom:16px;left:18px;width:150px;padding:4px}
 .radar-widget canvas{width:118px;height:100px}
 .radio-widget{top:auto;bottom:16px;left:184px;width:272px;max-height:152px;z-index:4}
 .navigation-dock{left:472px;right:18px;bottom:16px;width:auto;transform:none;min-height:152px}
 .bottom-status{bottom:calc(var(--console-h) + 16px);z-index:5}
 .bottom-status .credits{background:#0b0717aa;padding:2px 10px;border-radius:8px}
}
@media(min-width:1200px) and (min-height:640px){
 .bottom-status{left:auto;right:30px;bottom:calc(var(--console-h) + 18px);align-items:flex-end;text-align:right}
}

/* Decoração do console (cabos, botões, parafusos) — desenhada em console-decor.js */
.console-deco{position:absolute;left:0;top:0;pointer-events:none;z-index:3;overflow:visible}
.console-deco.deco-front{z-index:9}
.console-deco .deco-blink{animation:gr-blink 2.2s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.console-deco .deco-blink{animation:none!important}}
@media(min-width:1200px) and (min-height:640px){.navigation-dock:after{display:none}}

/* ==========================================================================
   RÁDIO DA MISSÃO COMO ÍCONE — celular em pé: ícone acima do leme, abre por
   cima do mar. Mensagem nova: o rádio pulsa e mostra um "!".
   ========================================================================== */
.radio-widget.radio-floating{left:12px!important;right:auto!important;z-index:7}
.radio-widget.radio-floating:not(.radio-open){width:50px!important;height:50px;max-height:none!important;padding:0!important;border-width:3px!important;border-radius:14px;overflow:visible!important}
.radio-widget.radio-floating:not(.radio-open) .panel-kicker{height:100%;margin:0;padding:0;border:0}
.radio-widget.radio-floating:not(.radio-open) h2,.radio-widget.radio-floating:not(.radio-open) .radio-led{display:none}
.radio-widget.radio-floating:not(.radio-open) .radio-toggle{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:10px;font-size:0;color:transparent;background:#0b0a24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='10' y='0' width='2' height='5' fill='%23dfe5ee'/%3E%3Crect x='13' y='1' width='1' height='3' fill='%23ffd166'/%3E%3Crect x='14' y='0' width='1' height='5' fill='%23ffd16699'/%3E%3Crect x='4' y='4' width='9' height='12' fill='%23ff8a3d'/%3E%3Crect x='4' y='4' width='9' height='1' fill='%23ffc489'/%3E%3Crect x='5' y='6' width='7' height='4' fill='%23170f2e'/%3E%3Crect x='6' y='7' width='5' height='2' fill='%23b69cff'/%3E%3Crect x='5' y='11' width='7' height='1' fill='%237a2a12'/%3E%3Crect x='5' y='13' width='7' height='1' fill='%237a2a12'/%3E%3Crect x='3' y='6' width='1' height='6' fill='%23fff1de'/%3E%3C/svg%3E") center/30px 30px no-repeat;box-shadow:inset 0 0 10px #000a}
.radio-widget.radio-floating.radio-open{width:calc(100% - 24px)!important;max-height:min(260px,45dvh)!important;overflow:auto;box-shadow:0 0 0 1px #f4f7fb,0 0 0 4px #8e97a8,0 0 0 6px #2a2f3a,0 12px 30px #05020fcc}
@keyframes gr-radio-pulse{0%,100%{filter:drop-shadow(0 0 0 #ff8a3d00)}50%{filter:drop-shadow(0 0 10px #ff8a3dcc)}}
.radio-widget.radio-unread:not(.radio-open){animation:gr-radio-pulse 1.1s ease-in-out infinite}
.radio-widget.radio-unread:not(.radio-open):after{content:'!';position:absolute;top:-11px;right:-11px;z-index:3;width:22px;height:22px;border-radius:50%;background:#ff8a3d;border:2px solid #fff1de;box-shadow:0 0 0 2px #2a1206,0 3px 0 2px #0b0717;color:#2b1206;font:900 15px/19px var(--font);text-align:center}
@media(prefers-reduced-motion:reduce){.radio-widget.radio-unread:not(.radio-open){animation:none!important}}

/* ==========================================================================
   TOPO LIMPO — só idioma e Menu, um de cada lado do nome do jogo.
   Tela cheia e recomeçar continuam dentro do Menu.
   ========================================================================== */
.utility #btn-fullscreen,.utility #btn-restart{display:none!important}
.utility{z-index:10;pointer-events:none}
.utility>*{pointer-events:auto}
#lang-select{text-align:center;font-weight:900;letter-spacing:1px}
/* Computador e notebook */
@media(min-width:900px) and (min-height:600px){
 .hud-top{grid-template-columns:minmax(0,1fr) 508px minmax(0,1fr)}
 .brand{justify-self:center}
 .utility{top:26px;left:50%;right:auto;transform:translateX(-50%);width:508px;display:flex;justify-content:space-between;align-items:center;gap:0}
 .utility select{width:84px;max-width:84px}
 .utility button,.utility select{min-height:32px}
 .telemetry-strip{top:92px}
}
@media(min-width:1200px) and (min-height:640px){
 .utility{top:20px}
 .telemetry-strip{top:92px}
 .chart-legend{top:156px}
}
/* Celular e tablet em pé */
@media(max-width:850px){
 .utility{top:20px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:0;grid-template-columns:none}
 .utility select{width:62px!important;max-width:62px!important;min-width:0;padding:2px 4px;font-size:13px}
 .utility #btn-menu{width:46px;min-width:46px;padding:0;justify-content:center}
 .utility #btn-menu [data-i18n]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .brand{width:210px}.brand h1{font-size:22px;letter-spacing:-1.2px}.brand-mark{width:28px;height:28px}
 .compass-widget{top:150px;width:76px;height:auto}.compass-widget canvas{width:64px;height:64px}
 .telemetry-strip{top:150px}
}
@media(min-width:521px) and (max-width:850px) and (min-height:521px){
 .compass-widget,.telemetry-strip{top:140px}
}
@media(max-width:620px) and (max-height:700px){
 .utility{top:16px}
 .compass-widget,.telemetry-strip{top:140px}
}
/* Celular deitado */
@media(max-height:520px) and (min-width:621px){
 .hud-top{grid-template-columns:minmax(0,1fr) 412px minmax(0,1fr)}
 .brand{justify-self:center}
 .utility{top:22px;left:50%;right:auto;transform:translateX(-50%);width:412px;display:flex;justify-content:space-between;align-items:center;max-width:none}
 .utility select{width:70px!important;max-width:70px!important}
 .telemetry-strip{top:84px}
}

/* Caixa de explicação do sensor quântico (primeiro uso) e botão "?" */
.help-btn{width:24px;min-width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;font:900 13px/1 var(--font);color:#2b1206;background:linear-gradient(180deg,#ffd6a8,#ff8a3d);border:2px solid #fff1de;box-shadow:0 0 0 2px #2a1206,0 2px 0 2px #0b0717;margin-left:auto;margin-right:8px}
.help-btn:hover{background:linear-gradient(180deg,#ffe6c8,#ff9a55)}
.sensor-intro{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:16px;background:#0b0717b3}
.sensor-intro[hidden]{display:none!important}
.sensor-intro-box.pixel-panel{position:relative;inset:auto;width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:20px 22px;border-radius:18px}
.sensor-intro-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sensor-intro-atom{width:44px;height:44px;flex-shrink:0;filter:drop-shadow(0 0 6px #b69cff88)}
.sensor-intro h2{font-size:17px;color:var(--gold);letter-spacing:.3px;text-transform:none;display:block;padding:0;border:0;background:none;box-shadow:none}
.sensor-intro p{font-size:14px;line-height:1.55;font-weight:400;color:#f6eadf;margin:0 0 10px}
.sensor-intro ul{margin:4px 0 16px;padding:12px 14px 12px 30px;border:2px solid var(--steel-mid,#8e97a8);border-radius:12px;background:#0b0a24;display:grid;gap:8px}
.sensor-intro li{font-size:13px;line-height:1.5;font-weight:400;color:#e6d8ef}
.sensor-intro li::marker{color:var(--lilac)}
.sensor-intro-ok{display:block;width:100%;min-height:46px;border:3px solid #fff1de;border-radius:14px;background:linear-gradient(180deg,#ffc489,#ff8a3d 55%,#ff7a2e);color:#2b1206;font-size:15px;box-shadow:inset 0 3px 0 #ffffff55,inset 0 -3px 0 #e0651f,0 0 0 3px #5a2408,0 5px 0 3px #2a1206}
@media(max-width:520px){.sensor-intro-box.pixel-panel{padding:16px}.sensor-intro p{font-size:13px}.sensor-intro li{font-size:12px}}

/* Dropdown lists: Windows draws options on a light sheet, so give them the panel colors explicitly. */
select{background-color:#221f4f;color:#fbefe2;color-scheme:dark}
select option,select optgroup{background:#221f4f!important;background-color:#221f4f!important;color:#fbefe2!important}
select option:checked,select option:hover{background:#ff8a3d!important;color:#1a0b2e!important}
.histogram-caption{margin-top:6px;font-size:12px;line-height:1.45;font-weight:400;color:#cbbcd8}
/* Mechanic introductions stay readable above the bridge on phones and desktop. */
.feature-intro { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:#100b21cc; }
.feature-intro[hidden] { display:none; }
.feature-card { width:min(100%,520px); max-height:85dvh; overflow:auto; box-sizing:border-box; padding:clamp(20px,4vw,36px); color:#fff1de; background:#211735; border:2px solid #b69cff; box-shadow:6px 6px 0 #09061b, inset 0 0 0 4px #322546; }
.feature-card h2 { font-size:clamp(20px,4vw,28px); margin:14px 0; line-height:1.2; }
.feature-card p { font-size:16px; line-height:1.65; margin-bottom:24px; }
.feature-card > span { font:12px monospace; color:#ffd166; }
.feature-card button { min-height:44px; padding:10px 20px; border:2px solid #ffe3ae; background:#ffd166; color:#211735; font-weight:bold; cursor:pointer; }
.feature-card button:focus-visible { outline:3px solid #baf9ed; outline-offset:5px; }
.menu-settings-row { flex-wrap:wrap; }
/* The menu has one scroll container. Compact spacing fits common laptop and
   phone heights; expanded help and accessibility zoom can still scroll. */
html:has(.mission-menu:not([hidden])),body:has(.mission-menu:not([hidden])){overflow:hidden;height:100%;}
.mission-menu{overflow:hidden;padding:16px;}
.menu-box{max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;}
.menu-content{gap:28px;padding:20px 26px;}
.menu-console{gap:12px;}
.menu-settings-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px;}
.menu-settings-row>*{min-width:0;}
.menu-settings-row select,.menu-settings-row button{white-space:normal;overflow-wrap:anywhere;}
.level-description{min-height:0;margin-top:12px;}
.campaign-card{padding:16px;}
.menu-section-heading{margin-bottom:10px;padding-bottom:8px;}
.campaign-progress{margin-top:12px;padding-top:8px;}
.menu-guide .menu-secondary-actions{margin-top:14px;}
.menu-settings-row select{white-space:nowrap;}
.menu-topbar{min-height:48px;padding:8px 18px;}
.menu-footer{padding:10px 18px;overflow-wrap:anywhere;}
@media(max-height:800px){
 .menu-emblem{width:64px;height:64px;margin-bottom:10px;}.menu-emblem img{width:58px;height:58px;}.emblem-cross{display:none;}
 .menu-brand-name{font-size:48px;}.menu-brand-line{margin-top:10px;}
 #menu-title{margin-top:16px;}#menu-intro{line-height:1.5;}.menu-primary{margin-top:16px;}
}
@media(max-width:700px){
 .mission-menu{padding:10px;}.menu-box{max-height:calc(100dvh - 20px);border-width:4px;}
 .menu-topbar{padding:7px 12px;min-height:42px;}.menu-eyebrow{letter-spacing:.4px;}
 .menu-content{gap:14px;padding:14px;}
 .menu-hero{grid-template-columns:48px minmax(0,1fr);gap:0 10px;}
 .menu-emblem{width:48px;height:48px;margin:0;}.menu-emblem img{width:44px;height:44px;}
 .menu-brand-name{font-size:34px;letter-spacing:-2px;}.menu-brand-name br{display:none;}
 .menu-brand-line{margin-top:6px;font-size:9px;letter-spacing:0;}
 #menu-title{margin-top:10px;font-size:18px;}#menu-intro{margin-top:6px;font-size:12px;line-height:1.4;}
 .menu-primary{margin-top:12px;min-height:44px;padding:8px 12px;}.menu-keyboard{display:none;}
 .menu-console{gap:10px;}.campaign-card{padding:12px;}
 .menu-section-heading{padding-bottom:6px;margin-bottom:8px;}.menu-section-heading h3{font-size:13px;}
 .campaign-selector{gap:10px;grid-template-columns:minmax(0,1fr) minmax(76px,.5fr);}
 .level-description{margin-top:8px;font-size:12px;line-height:1.4;}
 .campaign-progress{margin-top:8px;padding-top:6px;}.menu-level-action{margin-top:10px;min-height:40px;}
 .menu-section-label{margin-bottom:6px;}.menu-settings-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:6px;}
 .menu-settings-row select,.menu-settings-row button{font-size:11px;min-height:40px;padding:4px;}
 .menu-guide{padding:8px 10px;}.menu-footer{padding:8px 12px;font-size:9px;gap:10px;}
}
@media(max-height:520px) and (min-width:701px){
 .mission-menu{padding:10px;}.menu-box{max-height:calc(100dvh - 20px);border-width:4px;}
 .menu-content{gap:18px;padding:12px 18px;}.menu-emblem{display:none;}
 .menu-brand-name{font-size:36px;}.menu-brand-name br{display:none;}
 .menu-brand-line{margin-top:8px;}#menu-title{margin-top:12px;font-size:18px;}
 #menu-intro{font-size:12px;line-height:1.4;}.menu-primary{min-height:42px;padding:8px 12px;margin-top:12px;}
 .menu-keyboard{margin-top:8px;}.menu-console{gap:8px;}.campaign-card{padding:10px;}
 .level-description{margin-top:8px;}.menu-level-action{margin-top:8px;min-height:36px;padding:6px 10px;}
 .menu-topbar{min-height:40px;padding:4px 14px;}.menu-footer{padding:6px 14px;}
 .menu-settings-row button,.menu-settings-row select{min-height:36px;font-size:11px;}
 .menu-guide{padding:6px 10px;}
}
@media(max-width:700px) and (min-height:521px){
 #btn-start-level{display:none;}
 .menu-brand-line{display:none;}.menu-emblem{grid-row:1;}
 .menu-settings .menu-section-label{display:none;}
 .menu-settings-row>div>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .menu-hero{align-items:center;}
}
@media(max-height:650px) and (min-width:701px){
 .menu-emblem{display:none;}.menu-brand-name{font-size:42px;}.menu-brand-name br{display:none;}
 .menu-keyboard{margin-top:8px;}.menu-console{gap:8px;}.campaign-card{padding:12px;}.menu-content{padding-top:12px;padding-bottom:12px;}
}
@media(max-width:700px) and (min-height:521px) and (max-height:740px){
 #menu-title{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);}
 .menu-footer-code{display:none;}.menu-footer{justify-content:center;text-align:center;}
 .menu-content{padding:10px;gap:8px;}.menu-console{gap:8px;}.menu-footer{padding-top:6px;padding-bottom:6px;}
}
/* Long mission names must not push hull status outside the HUD frame. */
.hud-top .mission-line{min-width:0;}
#mission-badge{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hud-top .hull>strong{white-space:nowrap;}
@media(min-width:851px) and (max-width:1199px) and (min-height:521px){
 .hud-top{height:96px;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:12px;padding:8px 14px;}
 .telemetry-strip,.compass-widget{top:114px;}
}
@media(max-width:620px) and (min-height:521px){
 .hud-top{height:136px;padding-top:55px;}
 .telemetry-strip,.compass-widget{top:150px;}
}
@media(min-width:621px) and (max-width:740px) and (max-height:520px){
 .hud-top{height:90px;}.hud-top .hud-label{font-size:10px;line-height:1.1;gap:2px;}
 .hud-top .hud-label>span{font-size:9px;line-height:1.1;}
 .hud-top .mission-line{font-size:9px;line-height:1.1;}
 .hud-top .hull>span{display:none;}
 .telemetry-strip{top:104px;}
 .navigation-dock{top:152px;}
}
/* A collapsed walkie-talkie on every screen; messages open away from the helm. */
.radio-widget.radio-floating { min-width:0!important; z-index:11; left:var(--radio-left,12px)!important; }
.radio-widget.radio-floating .radio-toggle { display:block!important; }
.radio-widget.radio-floating:not(.radio-open) :is(.radio-body,#dialogue-box,#dialogue-nav) { display:none!important; }
.radio-widget.radio-floating.radio-open { width:var(--radio-width, min(340px,calc(100% - 24px)))!important; max-height:min(260px,45dvh,var(--radio-space,260px))!important; }
.radio-widget.radio-floating.radio-open #dialogue-box { display:block; }
@media(max-height:520px) and (min-width:621px){
 .radio-widget.radio-floating.radio-open { max-height:var(--radio-space,200px)!important; }
}