/* ============================================================
   APHELION UI THEME / GLOBAL TOKENS
   ============================================================ */
:root{--bg:#030712;--panel:rgba(4,13,27,.86);--cyan:#56f6ff;--lime:#9eff78;--pink:#ff4fbc;--amber:#ffc857;--red:#ff4d6d;--text:#d9fbff;--muted:#6e9ba5;--line:rgba(86,246,255,.24);--glow:0 0 18px rgba(86,246,255,.28)}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Share Tech Mono","IBM Plex Mono",Consolas,"Segoe UI",monospace}body{background:radial-gradient(circle at 50% 40%,#082138 0,#040a15 43%,#01030a 100%)}button,select{font:inherit}button{cursor:pointer}#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.78}#app:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px);background-size:100% 4px;z-index:20}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--line);background:rgba(1,5,13,.86);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;min-width:240px}.brand-mark{width:41px;height:41px;border:1px solid var(--cyan);display:grid;place-items:center;font-size:27px;font-weight:900;color:var(--cyan);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);text-shadow:0 0 10px var(--cyan)}.brand strong{display:block;letter-spacing:.23em;font-size:17px;color:#fff}.brand span{display:block;letter-spacing:.16em;font-size:8px;color:var(--muted)}.status-strip{display:flex;align-self:stretch}.status-strip>div{min-width:112px;border-left:1px solid var(--line);padding:6px 11px;display:flex;flex-direction:column;justify-content:center}.status-strip small{color:var(--muted);font-size:8px;letter-spacing:.12em}.status-strip b{font-size:13px;color:var(--cyan);margin-top:3px}.icon-btn{color:var(--cyan);background:transparent;border:1px solid var(--line);padding:8px 10px;font-size:9px}.top-actions{display:flex;gap:6px}.menu-btn{border-color:rgba(255,79,188,.42);color:#ff9bd6}
main{height:calc(100% - 70px);display:grid;grid-template-columns:220px minmax(0,1fr);position:relative;z-index:2}.panel{background:var(--panel);border-right:1px solid var(--line);padding:11px;overflow:auto}.panel-title{font-size:10px;letter-spacing:.2em;color:var(--cyan);border-bottom:1px solid var(--line);padding:3px 0 9px;margin-bottom:11px}.panel section{margin-bottom:15px}.field-label,.section-head{display:block;color:var(--muted);font-size:8px;letter-spacing:.13em;margin-bottom:7px}.planet-name{color:#fff;font-weight:700;font-size:13px}.muted{font-size:9px;line-height:1.45;color:#7fa8b1}.objective-box{border:1px solid rgba(158,255,120,.25);background:rgba(158,255,120,.05);padding:9px}.objective-box span{font-size:7px;color:var(--lime)}.objective-box strong{font-size:9px;line-height:1.4;display:block;margin-top:5px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.tool{min-height:66px;text-align:left;padding:7px;background:rgba(4,20,34,.9);color:var(--text);border:1px solid var(--line);position:relative}.tool.active{border-color:var(--cyan);box-shadow:inset 0 0 14px rgba(86,246,255,.08)}.tool>span{position:absolute;right:7px;top:6px;color:var(--cyan);font-size:9px}.tool b{display:block;font-size:9px;letter-spacing:.08em}.tool small{display:block;color:var(--muted);font-size:7px;margin-top:6px}.controls p{margin:5px 0;font-size:8px;color:var(--muted)}kbd{border:1px solid var(--line);padding:1px 4px;color:var(--cyan);background:#06101c}
/* ============================================================
   PLANET VIEWPORT / IN-GAME HUD
   ============================================================ */
.viewport-wrap{position:relative;overflow:hidden;min-width:0;background:radial-gradient(circle at 50% 50%,rgba(13,55,73,.22),rgba(0,0,0,0) 62%)}#game{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.scanline{position:absolute;left:0;right:0;height:90px;top:-110px;background:linear-gradient(transparent,rgba(86,246,255,.032),transparent);animation:scan 12s steps(72,end) infinite;pointer-events:none;z-index:2}@keyframes scan{to{transform:translateY(calc(100vh + 210px))}}.orbit-label{position:absolute;font-size:7px;color:rgba(86,246,255,.58);letter-spacing:.12em;line-height:1.5;pointer-events:none}.top-left{top:14px;left:14px}.top-right{top:14px;right:14px;text-align:right}.hint{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:.12em;color:rgba(86,246,255,.48);white-space:nowrap}.crosshair{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);pointer-events:none;opacity:.25}.crosshair:before,.crosshair:after{content:"";position:absolute;border:1px solid var(--cyan);inset:0;border-radius:50%}.crosshair:after{inset:8px;border-style:dashed}.crosshair i:first-child{position:absolute;left:18px;top:-7px;height:52px;border-left:1px solid var(--cyan)}.crosshair i:last-child{position:absolute;top:18px;left:-7px;width:52px;border-top:1px solid var(--cyan)}
.hud-stats{position:absolute;display:flex;gap:16px;pointer-events:none}.hud-stats div{min-width:72px;text-shadow:0 0 12px rgba(0,0,0,.9)}.hud-stats b{display:block;font-family:"OCR A Std","Share Tech Mono",Consolas,monospace;font-size:25px;line-height:1;color:#fff;letter-spacing:.02em}.hud-stats small{display:block;margin-top:3px;font-size:7px;letter-spacing:.15em;color:var(--cyan)}.hud-tl{left:14px;top:58px}.hud-br{right:14px;bottom:40px;text-align:right}.threat-overlay{position:absolute;left:14px;bottom:40px;pointer-events:none}.threat-overlay small,.threat-overlay span{display:block;font-size:7px;letter-spacing:.12em;color:var(--muted)}.threat-overlay b{display:block;font-size:18px;color:var(--lime);margin:2px 0}.system-toast{position:absolute;right:14px;top:66px;max-width:min(420px,55%);padding:7px 10px;border-right:2px solid var(--cyan);background:linear-gradient(90deg,transparent,rgba(2,14,25,.78));font-size:9px;letter-spacing:.08em;text-align:right;color:#dffcff;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}.system-toast.show{opacity:1;transform:none}.system-toast.alert{color:#ffd0d7;border-color:var(--red)}
/* ============================================================
   MODALS / MISSION CONTROL / SETTINGS
   ============================================================ */
.modal{position:fixed;inset:0;background:radial-gradient(circle,rgba(4,21,35,.75),rgba(0,2,8,.96));display:none;align-items:center;justify-content:center;z-index:50;padding:20px}.modal.open{display:flex}.modal-card{width:min(700px,95vw);max-height:95vh;overflow:auto;border:1px solid var(--cyan);background:rgba(3,10,22,.96);padding:28px;box-shadow:0 0 60px rgba(0,210,255,.14);position:relative}.eyebrow{font-size:8px;letter-spacing:.2em;color:var(--cyan)}.title-card h1,.end-card h1{font-family:"Segoe UI",sans-serif;font-size:66px;line-height:.86;margin:22px 0 0;letter-spacing:.08em;color:white;text-shadow:0 0 22px rgba(86,246,255,.4)}.title-card h2{font-size:15px;letter-spacing:.4em;color:var(--pink);margin:8px 0 18px}.title-card>p,.end-card>p{font-size:11px;line-height:1.55;color:#91b2bb}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 14px}.setup-grid label{font-size:8px;color:var(--muted);letter-spacing:.11em}.setup-grid select{width:100%;margin-top:7px;padding:10px;color:var(--text);background:#06101c;border:1px solid var(--line);font-size:9px}.archive-panel{margin:0 0 14px;border:1px solid rgba(255,79,188,.2);background:rgba(255,79,188,.035);padding:10px}.archive-head{font-size:8px;color:var(--pink);letter-spacing:.13em;margin-bottom:7px}.archive-log{display:grid;gap:5px;font-size:8px;line-height:1.35;color:#cfaec6}.archive-entry{border-left:2px solid var(--pink);padding-left:7px}.archive-entry.locked{color:#4c6670;border-color:#29424b}.primary{width:100%;border:1px solid var(--cyan);background:linear-gradient(90deg,rgba(0,168,198,.16),rgba(86,246,255,.09));color:white;padding:13px;letter-spacing:.18em;font-weight:700}.title-card>small{display:block;text-align:center;color:#42666e;font-size:7px;margin-top:10px}.end-card{text-align:center}.end-card h1{font-size:42px;margin-bottom:18px}.end-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0}.end-stats div{border:1px solid var(--line);padding:10px}.end-stats small{display:block;color:var(--muted);font-size:7px}.end-stats b{display:block;color:var(--cyan);font-size:17px;margin-top:4px}.end-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.secondary{width:100%;border:1px solid rgba(255,79,188,.55);background:rgba(255,79,188,.07);color:#ffd1ed;padding:10px;font-size:9px}
#endScreen{background:transparent;pointer-events:none;align-items:flex-end;justify-content:flex-end;padding:12px}#endScreen .end-card{pointer-events:auto;width:min(400px,92vw);padding:16px;text-align:left;background:rgba(3,10,22,.93)}#endScreen .end-card h1{font-size:27px;margin:9px 0 7px}#endScreen .end-card>p{font-size:9px;margin:0}
/* ============================================================
   RESPONSIVE / SMALL-SCREEN LAYOUT
   ============================================================ */
@media(max-width:900px){.status-strip>div:nth-child(1){display:none}main{grid-template-columns:190px minmax(0,1fr)}.title-card h1{font-size:52px}}
@media(max-width:760px){.topbar{height:56px;padding:5px 7px}.brand{min-width:145px}.brand-mark{width:32px;height:32px;font-size:21px}.brand strong{font-size:11px}.brand span{font-size:6px}.status-strip>div{min-width:68px;padding:3px 5px}.status-strip>div:nth-child(1),.status-strip>div:nth-child(3){display:none}.icon-btn{font-size:7px;padding:6px}.panel{position:absolute;z-index:8;width:190px;height:calc(100% - 56px);top:56px;transform:translateX(-100%)}main{height:calc(100% - 56px);display:block}.viewport-wrap{width:100%;height:100%}.setup-grid{grid-template-columns:1fr}.title-card h1{font-size:40px}.title-card h2{font-size:10px;letter-spacing:.24em}.modal-card{padding:20px}.hint{font-size:5.5px}.hud-stats b{font-size:21px}.hud-stats{gap:10px}.hud-tl{top:50px}.system-toast{top:52px;font-size:8px}.scanline{animation-duration:14s}}
@media(prefers-reduced-motion:reduce){.scanline{animation:none}}

.launch-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:14px 0}.secondary.compact{width:auto;min-width:92px;padding:10px 12px}.settings-card{width:min(470px,94vw)}.settings-card h1{font-family:"Segoe UI",sans-serif;font-size:34px;letter-spacing:.12em;margin:12px 0 6px}.settings-card>p{font-size:9px;color:var(--muted);margin:0 0 16px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--line)}.setting-row b{display:block;font-size:10px;letter-spacing:.12em;color:#fff}.setting-row small{display:block;margin-top:4px;font-size:8px;line-height:1.35;color:var(--muted)}.toggle-btn{min-width:64px;padding:9px 10px;border:1px solid var(--cyan);background:rgba(86,246,255,.08);color:var(--cyan);font-weight:700;letter-spacing:.1em}.toggle-btn.off{border-color:#41535c;color:#7b8b92;background:rgba(50,60,66,.1)}

@media(max-height:700px), (max-width:760px){.modal{align-items:flex-start;padding:8px}.modal-card{max-height:calc(100vh - 16px);padding:14px 16px}.title-card h1{margin-top:10px;font-size:36px}.title-card h2{margin:5px 0 8px}.title-card>p{margin:6px 0;font-size:9px}.setup-grid{margin:10px 0 8px;gap:6px}.setup-grid select{margin-top:4px;padding:8px}.launch-actions{margin:8px 0}.archive-panel{margin-top:8px;max-height:120px;overflow:auto}.primary{padding:10px}.title-card>small{margin-top:5px}}

/* Mobile performance: animated CRT scanlines can force extra compositing while
   the canvas is also changing. Keep the visual treatment static on coarse
   pointers, and pause it during any active rotation gesture. */
.viewport-wrap.is-rotating .scanline{animation-play-state:paused}
@media (pointer:coarse){.scanline{animation:none;opacity:.55}}

/* ============================================================
   CUSTOM DIFFICULTY / TUNING CONTROLS
   ============================================================
   Kept deliberately simple so they remain usable on iOS/Android and can be
   restyled without touching JavaScript. The JS derives the actual cell count
   from the WORLD DENSITY frequency slider (10*f^2+2).
*/
.custom-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:0 0 12px;padding:10px;border:1px solid rgba(86,246,255,.18);background:rgba(86,246,255,.035)}
.custom-controls[hidden]{display:none}
.custom-controls label{font-size:8px;letter-spacing:.11em;color:var(--muted)}
.custom-controls label span{float:right;color:var(--cyan);font-size:11px;font-weight:700}
.custom-controls input[type="range"]{width:100%;margin-top:9px;accent-color:var(--cyan)}
.custom-summary{min-width:135px;padding:8px;border-left:1px solid var(--line);color:#fff;font-size:9px;white-space:nowrap;text-align:right}
@media(max-width:760px){.custom-controls{grid-template-columns:1fr 1fr}.custom-summary{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);text-align:left;padding:7px 0 0}}