/* Frontier 0.3 — a playable scene first, instruments second. */
:root{--bg:#050914;--rail:#080e1b;--panel:#0d1729;--panel-raised:#16233c;--panel-soft:#101c30;--text:#edf4ff;--muted:#a4b7ce;--faint:#7d93b0;--line:rgba(136,181,241,.17);--line-strong:rgba(136,181,241,.35);--sage:#7edbff;--sage-dim:#6cd5ff12;--amber:#ffc47b;--amber-soft:#ffdaa8;--blue:#7bdfff;--red:#ff907b;--radius:12px}
body{background:#050914;color:var(--text);font-size:15px}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 15%,#17364f65,transparent 55%),radial-gradient(ellipse at 10% 80%,#2d1e4a35,transparent 60%);pointer-events:none}
.app-shell{grid-template-columns:86px minmax(0,1fr)}
.sidebar{width:86px;background:linear-gradient(180deg,#080f20ed,#080d19f5);border-right:1px solid #83b4ff22;backdrop-filter:blur(18px)}
.brand-mark{height:74px;background:radial-gradient(circle,#61bfff20,transparent 65%)}
.nav-item{min-height:76px;color:#9fb4ce;transition:background .2s,color .2s,transform .2s}
.nav-item.active{color:#b6eaff;background:linear-gradient(90deg,#4199d82a,transparent);box-shadow:inset 3px 0 #7edbff}
.nav-item:hover{color:#fff;background:#6eb6ff13;transform:translateX(2px)}
.nav-label{font-size:11px}.nav-icon .icon{width:23px;height:23px}
.topbar{min-height:74px;background:#080f1bd9;border-bottom-color:#8aabdb20;backdrop-filter:blur(20px);padding:0 28px;gap:18px}
.resource-strip{gap:24px}.resource-number{font-size:18px}.resource-label{font-size:10px;color:#aabed6}.resource-icon .icon{width:20px;height:20px}
.expedition-id>div>strong{font-size:12px;color:#e3f1ff;letter-spacing:.16em}.expedition-id>div>span{font-size:9px;color:#8da8c7}.dev-tag{display:none}
.topbar .icon-button{min-width:38px;min-height:38px}.topbar .save-indicator{color:#95b4cc}
.workspace{padding:24px 28px;max-width:1900px;margin:0 auto}
.page-title{font-size:clamp(28px,3vw,43px);font-weight:600;letter-spacing:-.04em;color:#f1f7ff}
.page-subtitle{font-size:13px;color:#9fb4d1;line-height:1.6}
.eyebrow{font-size:10px;letter-spacing:.2em;color:#91d5fc}
.page-heading{margin-bottom:22px}.heading-actions .button{font-size:12px}
.button{min-height:42px;font-size:13px;border-radius:7px;padding:11px 19px;transition:transform .15s,background .2s,box-shadow .2s}
.button.primary{background:linear-gradient(110deg,#b7e8ff,#64bded);color:#081525;border:1px solid #b9e9ff;box-shadow:0 4px 25px #46bcff23;font-weight:650}
.button.primary:hover{background:linear-gradient(110deg,#e6f7ff,#84d7ff);box-shadow:0 4px 32px #46bcff4a;transform:translateY(-2px)}
.button.secondary{background:#17263e99;border-color:#809bcf40;color:#dbeaff}.button:hover:not(:disabled){transform:translateY(-1px)}
.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.4;box-shadow:none;transform:none}
.button.small{min-height:36px;font-size:12px}.icon-button{min-width:36px;min-height:36px}
.content-panel,.planet-card,.side-panel{background:linear-gradient(145deg,#132138e8,#0a1223ed);border-color:#80a5d82c;border-radius:12px;box-shadow:0 12px 38px #0003}
.content-panel{padding:25px}.section-heading h2{font-size:20px}.section-description{font-size:13px;color:#a4b7ce}
.detail-row,.action-hint{font-size:12px!important}.tag{font-size:11px}.form-field{font-size:13px}.form-field input,.form-field select,.role-select{min-height:44px;font-size:14px;background:#091525;color:#eef6ff;border-color:#7ca5cc55}
.eventbar{background:#060d19e8;border-top:1px solid var(--line);min-height:44px}.event-text{font-size:12px;color:#b0c3da}.event-label{color:#7fb3d9}

/* A proper start screen. Audio starts only after a deliberate click. */
.launch-screen{min-height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:#050b16 url('./assets/frontier.png') center center/cover no-repeat}
.launch-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#030813ed 0%,#030813b3 30%,#03081335 65%,#0308130a),linear-gradient(0deg,#030813dd,transparent 35%);pointer-events:none}
.launch-content{position:relative;z-index:1;margin:110px 6vw;max-width:760px;animation:reveal 1s ease-out both}
.launch-content h1{font-size:clamp(32px,5vw,76px);line-height:1.1;letter-spacing:.04em;font-weight:300;color:#cee7ff;margin:24px 0}
.launch-content h1 strong{font-weight:750;letter-spacing:-.035em;color:#f0f7ff;text-shadow:0 4px 45px #05101c}
.launch-content p{color:#b5c9df;font-size:clamp(16px,1.45vw,21px);line-height:1.8;margin:0 0 32px}
.launch-content>.eyebrow{font-size:11px;letter-spacing:.3em}
.launch-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.launch-actions .primary{min-height:55px;padding:16px 30px;font-size:15px}
.launch-hint{margin-top:20px;font-size:12px;color:#839bb8}.launch-meta,.launch-bottom{position:absolute;left:6vw;right:5vw;z-index:1;display:flex;justify-content:space-between;gap:20px;font:10px var(--mono);letter-spacing:.16em;color:#9cb9d6}
.launch-meta{top:35px}.launch-bottom{bottom:28px}.launch-bottom .online-dot{margin-right:10px}.launch-stars{position:absolute;inset:-5%;background:radial-gradient(1px 1px at 12% 40%,white,transparent),radial-gradient(2px 2px at 30% 24%,#8fd5ff,transparent),radial-gradient(1px 1px at 20% 60%,white,transparent);background-size:400px 420px;animation:star-drift 35s linear infinite;pointer-events:none}

/* Flight map: larger stars and labels, a single cinematic field. */
body[data-page="map"] .sector-brief{display:none}
body[data-page="map"] .mission-strip{display:none}
.map-filters{margin-bottom:14px}.filter-button{font-size:12px;min-height:36px;background:#111c2b88}
.game-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px;height:calc(100svh - 257px);min-height:460px;max-height:900px}
.game-layout .map-panel{height:100%;min-height:0;background:linear-gradient(90deg,#040b18b0,#060d1b88),url('./assets/frontier.png') center/cover;border:1px solid #8cb5f236;border-radius:12px;overflow:hidden;box-shadow:0 20px 70px #0005}
.game-layout .star-map{height:auto;min-height:330px;flex:1;isolation:isolate}.star-map>#scene-slot{z-index:0;pointer-events:none}
.map-world{z-index:3}.map-grid,.map-ambient{opacity:.18;pointer-events:none}.map-toolbar{background:#0a122580;border-bottom:1px solid #8cb5f225;min-height:43px}.map-meta,.map-toggle{font-size:10px!important;color:#adc7e1!important}
.map-caption{background:#060f20a0;font-size:11px}.coordinate-label{opacity:.5;pointer-events:none}
.star-node{min-width:44px;min-height:44px}.star-node .star-dot{width:9px;height:9px;box-shadow:0 0 8px var(--star-color),0 0 24px var(--star-color);animation:star-glow 4s ease-in-out infinite}
.star-node .star-label{font-size:12px!important;color:#e0e9f8;text-shadow:0 2px 8px #000,0 1px 2px #000;font-weight:500}.star-node .star-distance{font-size:10px!important;color:#9bb7d8}
.star-node.current .star-dot{width:12px;height:12px}.star-node.current::before{border-color:#80d6ff66;animation:radar 3s linear infinite}.star-node.selected .star-label{color:#b6ebff}.star-node:not(.visited):not(.current):not(.selected):not(.reachable){opacity:.8}
.game-layout .side-panel{height:100%;overflow-y:auto}.side-panel .system-name{font-size:29px}.side-panel .system-description{font-size:12px;color:#a3b9d5}.side-panel .action-stack .button{font-size:13px;min-height:42px}.side-panel .objective-card h3{font-size:15px}.side-panel .objective-card p{font-size:12px;line-height:1.55}.side-panel .system-art{height:110px}.side-panel .system-stats .stat-value{font-size:20px}
.map-lines line.route-active{stroke:#7acfff80;stroke-width:1.2;stroke-dasharray:4 9;animation:route-flow 12s linear infinite}.map-lines line.route-dim{stroke:#83b6ff19}

/* Real-time orbit and surface views, with a fully playable non-WebGL fallback. */
#scene-slot{position:absolute;inset:0;overflow:hidden}#scene-slot canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.orbit-stage{height:390px;position:relative;isolation:isolate;overflow:hidden;border-radius:15px;border:1px solid #8db8ec38;margin-bottom:25px;background:linear-gradient(90deg,#04101ec9,#04101e44),url('./assets/frontier.png') center/cover}
.orbit-copy{position:absolute;left:35px;top:50%;transform:translateY(-50%);z-index:2;max-width:45%;pointer-events:none}.orbit-copy .button{pointer-events:auto;margin-top:10px}.orbit-copy h2{font-size:clamp(30px,4vw,55px);font-weight:600;margin:12px 0}.orbit-copy p{font-size:14px;color:#a9bfd6}
.scene-label{position:absolute;left:20px;bottom:15px;z-index:2;font:9px var(--mono);letter-spacing:.14em;color:#9bc3df;pointer-events:none}
.planet-grid{gap:20px}.planet-visual{height:150px;background:radial-gradient(ellipse,#27678a36,transparent 65%);overflow:hidden}.planet-orb{width:115px;height:115px;box-shadow:inset -25px -12px 30px #000b,0 0 30px #4ba1cc3b;animation:planet-float 8s ease-in-out infinite}
.planet-info h3{font-size:24px}.planet-info p{font-size:13px}.planet-info .card-actions .button{font-size:13px}
.surface-layout{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.surface-panel{padding:0;overflow:hidden}.surface-viewport{position:relative;height:560px;display:none;background:radial-gradient(ellipse at 50% 35%,#1b3b4e,#06101b 70%)}
.has-scene .surface-viewport{display:block}.has-scene .surface-map{display:none}.has-scene .tactical-open .surface-map{display:grid}.scene-toggle{position:absolute;right:12px;top:12px;z-index:3;background:#07111de8!important;border-color:#7bafdd55!important}
.surface-map{max-width:680px;width:100%;padding:22px;background:radial-gradient(ellipse,#153547,#08131f);gap:3px}.surface-cell{position:relative;border:1px solid #79adce18;background:#2040592b;border-radius:5px;font-size:0!important;min-height:25px}.surface-cell::after{font-size:24px;line-height:1;filter:drop-shadow(0 3px 3px #0006)}.surface-cell.wall::after{content:'⬟';color:#657a8a}.surface-cell.sample::after{content:'◆';color:#6affd7;text-shadow:0 0 14px #2affc2;animation:star-glow 2s infinite}.surface-cell.hazard::after{content:'≋';color:#ff8755}.surface-cell.shuttle::after{content:'▲';color:#8bdaff}.surface-cell.ruin::after{content:'▥';color:#c9a4ff}.surface-cell.player::after{content:'●';color:white;text-shadow:0 0 15px #8df0ff}.surface-cell.player{border-color:#92e3ff;background:#4ca3cf50}
.surface-info{padding:24px;background:linear-gradient(150deg,#15253de8,#0a1326)}.surface-info h2{font-size:29px}.surface-info p{font-size:13px!important}.oxygen-reading>span{font-size:70px;color:#c2edff}.surface-info .action-stack .button{min-height:46px;font-size:13px}.surface-legend{background:#0b1729;font-size:11px;gap:16px;color:#b0c7e0}.surface-legend b{color:#87d8ff}.keyboard-hint{font-size:11px!important;padding:10px 18px}.dpad .button,.dpad button{width:45px;height:45px}
.crew-avatar{box-shadow:0 0 35px #64baff1a}.crew-card{background:linear-gradient(150deg,#182b42,#0b1425)}.tech-card{transition:transform .2s,border-color .2s,box-shadow .2s}.tech-card:hover{transform:translateY(-3px);border-color:#75d0ff66;box-shadow:0 8px 24px #0004}
.modal-backdrop{background:#020611c9;backdrop-filter:blur(14px)}.modal{background:linear-gradient(145deg,#14233c,#091426);border:1px solid #7facdf4a;border-radius:15px;box-shadow:0 25px 100px #0008}.modal h2{font-size:30px}.modal p{font-size:14px;line-height:1.7}.settings-row p{font-size:12px}.graphics-field{margin-top:25px}.form-field input[type="range"]{accent-color:#7edbff;min-height:35px}.toggle-switch.on{background:#78c9ef;border-color:#b3e9ff}.toggle-switch.on span{background:#0e1c30}
.toast-stack{bottom:65px}.toast-stack .toast{font-size:13px;border-color:#7cafde55;background:#11233af0;backdrop-filter:blur(15px);animation:reveal .25s ease-out}
#voice-caption{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(12px);z-index:100;max-width:min(700px,90vw);padding:11px 20px;border:1px solid #8cc5f43b;border-radius:8px;background:#050e1df2;color:#d3ecff;font-size:13px;text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
#voice-caption.visible{opacity:1;transform:translateX(-50%) translateY(0)}
#cinematic-fx{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;color:#d4f3ff;font:600 clamp(18px,3vw,40px) var(--sans);letter-spacing:.2em;text-shadow:0 0 30px #70ccff;visibility:hidden}
#cinematic-fx.jump{background:radial-gradient(ellipse,transparent 12%,#4692c850 50%,#071c4190 100%);animation:warp 1.3s ease-out both;box-shadow:inset 0 0 160px #a2dcff}
#cinematic-fx.scan{background:linear-gradient(180deg,transparent 40%,#7bdeff55 50%,transparent 55%);background-size:100% 200%;animation:scan-sweep 1.2s ease-out both}
#cinematic-fx.landing{background:linear-gradient(0deg,#24556f90,transparent 60%);animation:warp 1.1s ease-out both}
#cinematic-fx.discovery{align-items:flex-start;padding-top:16vh;background:radial-gradient(ellipse at 50% 0%,#6adeff35,transparent 65%);animation:discovery 1.5s ease-out both}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes star-drift{to{transform:translate3d(20px,-30px,0)}}
@keyframes star-glow{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.6)}}
@keyframes radar{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes route-flow{to{stroke-dashoffset:-130}}
@keyframes planet-float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-6px) rotate(-5deg)}}
@keyframes warp{0%{opacity:0;visibility:visible;filter:blur(8px);transform:scale(.95)}30%{opacity:.8;filter:blur(0)}100%{opacity:0;visibility:hidden;transform:scale(1.1)}}
@keyframes scan-sweep{0%{opacity:0;visibility:visible;background-position:0 100%}25%{opacity:.65}100%{opacity:0;visibility:hidden;background-position:0 -100%}}
@keyframes discovery{0%{opacity:0;visibility:visible;transform:translateY(-15px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(min-width:1600px){.game-layout{grid-template-columns:minmax(0,1fr) 345px}.surface-viewport{height:650px}.orbit-stage{height:450px}}
@media(max-width:1100px){.resource-strip{gap:14px}.expedition-id>div>span{display:none}.topbar{gap:12px;padding:0 18px}.workspace{padding:20px}.game-layout{grid-template-columns:minmax(0,1fr) 255px}.save-indicator{display:none}.surface-layout{grid-template-columns:minmax(0,1fr) 240px}.surface-viewport{height:500px}.surface-info{padding:18px}.orbit-stage{height:330px}.orbit-copy{left:25px}.launch-content h1{font-size:clamp(32px,5.7vw,65px)}}
@media(max-width:760px){
 .app-shell{display:block}.sidebar{inset:auto 0 0;width:100%;height:64px;flex-direction:row;border-right:0;border-top:1px solid var(--line);background:#081322f5}.brand-mark,.sidebar-foot{display:none}.nav-list{display:flex;width:100%;height:64px;justify-content:space-around;margin:0;padding:0}.nav-item{min-height:60px;padding:7px 4px;flex:1}.nav-label{font-size:10px}.nav-item.active{box-shadow:inset 0 2px #7edbff}.nav-item:hover{transform:none}.main-shell{padding-bottom:64px}
 .topbar{min-height:104px;display:grid;grid-template-columns:1fr auto;padding:12px 16px;gap:12px}.resource-strip{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:10px;width:100%;margin:0}.resource{min-width:0;grid-template-columns:15px auto;gap:6px}.resource-number{font-size:15px}.resource-label{font-size:8px}.resource-icon .icon{width:15px}.resource-max{font-size:9px}.topbar-actions{grid-row:1;grid-column:2}.expedition-id>div>strong{font-size:11px}.topbar .icon-button{min-width:34px;min-height:30px}.workspace{padding:20px 14px}.page-title{font-size:29px}.page-heading{align-items:flex-start;gap:10px}.page-subtitle{font-size:12px}.heading-actions .coordinates{display:none}.heading-actions .button{min-width:36px;padding:8px;font-size:10px}.map-filters{gap:10px}.filter-button{font-size:10px;padding:7px 9px;min-height:34px}.game-layout{height:auto;max-height:none;min-height:0;grid-template-columns:1fr}.game-layout .map-panel{height:460px}.game-layout .star-map{min-height:360px}.game-layout .side-panel{height:auto;max-height:none}.star-node .star-label{font-size:9px!important}.star-node .star-distance{font-size:8px!important}.star-node{min-width:30px}.side-panel .system-art{height:125px}.coordinate-label{display:none}
 .surface-layout{grid-template-columns:1fr}.surface-viewport{height:430px}.surface-info{padding:22px}.surface-legend{font-size:10px;gap:10px}.surface-cell::after{font-size:19px}.surface-map{padding:12px}.orbit-stage{height:350px}.orbit-copy{left:20px;top:auto;bottom:30px;transform:none;max-width:80%;text-shadow:0 2px 14px #000}.orbit-copy .eyebrow{font-size:8px}.orbit-copy h2{font-size:32px}.orbit-copy p{font-size:12px}.orbit-copy .button{min-height:40px}.orbit-stage .scene-label{bottom:10px;font-size:8px}.planet-info h3{font-size:23px}.planet-visual{height:155px}.planet-visual .planet-orb{width:120px;height:120px}.content-panel{padding:20px}.surface-panel{padding:0}.modal{padding:25px 20px;max-height:85svh}.modal h2{font-size:25px}.modal p{font-size:13px}
 .launch-screen{background-position:60% center}.launch-screen::before{background:linear-gradient(90deg,#030813d9,#03081380),linear-gradient(0deg,#030813ed,transparent)}.launch-content{margin:110px 24px;max-width:calc(100% - 48px)}.launch-content h1{font-size:clamp(24px,7vw,48px)}.launch-content p{font-size:16px}.launch-content .eyebrow{font-size:8px}.launch-meta,.launch-bottom{left:24px;right:24px;font-size:8px;line-height:1.7}.launch-meta span:last-child,.launch-bottom span:last-child{display:none}.launch-actions{gap:12px}.launch-actions .primary{font-size:14px;padding:14px 22px}.launch-hint{font-size:11px}.toast-stack{bottom:84px}.eventbar{margin-bottom:0}.event-text{font-size:11px}#voice-caption{bottom:78px;font-size:12px;max-width:92vw}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.has-scene .orbit-stage{background:radial-gradient(ellipse at 70% 30%,#123650,#020710 70%)}
.has-scene .orbit-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#030a16ed,transparent 55%);pointer-events:none;z-index:1}
.planet-preview{margin-top:8px;width:100%}
@media(min-width:761px) and (max-height:850px){
 body[data-page="surface"] .workspace{padding-top:16px}
 body[data-page="surface"] .page-heading{margin-bottom:14px}
 body[data-page="surface"] .page-title{font-size:32px}
 .surface-viewport{height:430px}
 .surface-info{padding:18px;margin-top:0}
 .surface-info h2{font-size:25px;margin:10px 0 3px}
 .surface-info>p{margin:5px 0}
 .oxygen-reading{margin:12px 0 4px}.oxygen-reading>span{font-size:48px}
 .surface-info .detail-row{padding:8px 0}
 .surface-controls{margin:10px 0}.dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,30px);gap:3px}
 .dpad .button,.dpad button{width:34px;height:30px;min-width:30px;min-height:30px}
 .surface-info .action-stack{gap:7px}.surface-info .action-stack .button{min-height:36px;padding:8px;font-size:12px}
}
@media(min-width:761px) and (max-height:850px){
 .surface-info>p{margin-bottom:6px!important;line-height:1.5}
 .surface-info .oxygen{margin-top:5px}.surface-info .action-stack{padding-top:8px}
 .surface-controls .dpad{display:flex;justify-content:center;gap:8px}
 .surface-controls .dpad>span{display:none}
 .surface-info>p:last-child{display:none}
}
.surface-hud{position:absolute;left:16px;top:18px;font:600 16px var(--mono);color:#c9f1ff;text-shadow:0 2px 10px #000;pointer-events:none}.surface-hud.critical{color:#ff947a;animation:star-glow 1s infinite}
.scene-actions{position:absolute;right:12px;bottom:13px;z-index:3;display:flex;gap:8px}.scene-actions .button{backdrop-filter:blur(15px)}
@media(max-width:760px){
 body[data-page="surface"] .page-subtitle,body[data-page="surface"] .heading-actions{display:none}
 body[data-page="surface"] .page-heading{margin-bottom:12px}
 .surface-viewport{height:350px}.surface-viewport .scene-label{display:none}
 .scene-actions{left:12px;right:12px;justify-content:space-between}.scene-actions .button{min-height:42px}
 .has-scene .orbit-stage::after{background:linear-gradient(0deg,#020816f2,transparent 95%)}
}