@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root { --navy:#080d1e; --navy-2:#101a33; --ink:#eaf1ef; --muted:#8798ad; --teal:#57e2c5; --orange:#f6a65b; --coral:#ff6d63; --line:rgba(173,208,216,.18); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--navy); color:var(--ink); font-family:'Barlow Condensed',system-ui,sans-serif; }
body { display:flex; align-items:center; justify-content:center; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
.game-shell { position:relative; width:100vw; height:100vh; min-height:480px; background:#080d1e; overflow:hidden; }
#game { position:absolute; inset:0; width:100%; height:100%; image-rendering:auto; }
.hud { position:absolute; z-index:5; top:0; left:0; right:0; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; background:linear-gradient(180deg,rgba(6,11,26,.9),rgba(6,11,26,0)); }
.hud-left,.hud-right,.hud-center { display:flex; align-items:center; gap:18px; }
.hud-left { min-width:255px; }.hud-right { min-width:320px; justify-content:flex-end; }.hud-center { flex:1; max-width:420px; flex-direction:column; gap:7px; }
.brand-chip { font:700 11px 'Space Mono',monospace; letter-spacing:1.4px; color:#d9e8e7; }.brand-dot,.pulse { display:inline-block; width:7px; height:7px; margin-right:7px; background:var(--teal); border-radius:50%; box-shadow:0 0 11px var(--teal); animation:pulse 1.8s infinite; }
.energy { display:flex; align-items:center; gap:8px; }.hud-label,.level-kicker,.stat,.dash-meter b { font:700 10px 'Space Mono',monospace; letter-spacing:1px; color:#9cb0bf; }.energy-cell { display:inline-block; width:15px; height:10px; border:1px solid var(--coral); transform:skewX(-18deg); background:var(--coral); box-shadow:0 0 8px rgba(255,109,99,.35); }.energy-cell.empty { background:transparent; box-shadow:none; opacity:.42; }
#energy-cells { display:flex; gap:4px; }
.level-kicker { color:#d4e0df; font-size:11px; }.progress-track { width:100%; height:3px; background:rgba(180,205,207,.22); }.progress-track span { display:block; width:0; height:100%; background:var(--teal); box-shadow:0 0 8px var(--teal); transition:width .2s; }
.stat { display:flex; align-items:center; gap:7px; color:#edf5f1; font-size:11px; white-space:nowrap; }.icon-signal { color:var(--orange); font-size:19px; line-height:1; }.core-mini { color:#8dd7ff; font-size:14px; }.dash-meter { position:relative; width:56px; height:25px; border:1px solid rgba(88,227,198,.5); display:flex; align-items:center; justify-content:center; }.dash-meter span { position:absolute; inset:0 auto 0 0; width:100%; background:rgba(87,226,197,.2); transition:width .15s; }.dash-meter b { position:relative; color:var(--teal); font-size:9px; }.icon-button { width:31px; height:31px; border:1px solid var(--line); border-radius:3px; background:rgba(11,20,39,.7); font-size:14px; pointer-events:auto; }
.screen { position:absolute; inset:0; z-index:10; display:none; }.screen.active { display:block; }.hidden { display:none !important; }
#menu { background:radial-gradient(ellipse at 68% 47%,rgba(34,88,104,.28) 0,rgba(9,17,38,.05) 34%,rgba(5,10,23,.75) 74%),linear-gradient(115deg,#0d1730 0%,#081022 52%,#101f37 100%); }.menu-copy { position:absolute; left:10%; top:13%; z-index:2; }.eyebrow { display:block; color:#80a1a9; font:700 10px 'Space Mono',monospace; letter-spacing:2px; }.menu-copy h1 { margin:18px 0 0; color:#edf5ed; font-size:clamp(66px,10vw,142px); font-weight:800; letter-spacing:-5px; line-height:.78; text-shadow:7px 7px 0 rgba(26,39,64,.9); }.menu-copy h1 span { color:var(--teal); }.subtitle { margin:17px 0 0 5px; color:var(--orange); font:700 clamp(16px,2vw,27px) 'Space Mono',monospace; letter-spacing:8px; }.intro { margin:31px 0 0 5px; color:#9baabd; font-size:20px; line-height:1.25; letter-spacing:.4px; }.menu-actions { margin-top:37px; width:245px; }.primary-button,.secondary-button,.text-button { border:0; transition:transform .16s,background .16s,color .16s,border .16s; }.primary-button { width:100%; padding:15px 18px; background:var(--teal); color:#0b1727; font:700 14px 'Space Mono',monospace; letter-spacing:1px; text-align:left; box-shadow:6px 6px 0 rgba(25,72,79,.9); }.primary-button span { float:right; font-size:20px; line-height:12px; }.primary-button:hover,.secondary-button:hover,.text-button:hover,.icon-button:hover,.back-button:hover { transform:translateY(-2px); }.secondary-button { width:100%; margin-top:16px; padding:13px 17px; color:#e5eeeb; border:1px solid rgba(117,170,172,.42); background:rgba(22,37,57,.7); font:700 12px 'Space Mono',monospace; letter-spacing:1px; text-align:left; }.button-row { display:flex; justify-content:space-between; margin-top:14px; }.text-button { background:transparent; color:#9db1bd; padding:5px 0; font:700 10px 'Space Mono',monospace; letter-spacing:.8px; }.text-button:hover { color:var(--teal); }.menu-foot { position:fixed; bottom:22px; left:10%; right:10%; display:flex; justify-content:space-between; color:#52677e; font:10px 'Space Mono',monospace; letter-spacing:1px; }
.menu-art { position:absolute; inset:0; overflow:hidden; background-image:linear-gradient(rgba(95,160,166,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(95,160,166,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,transparent,black 45%,black); }.menu-art:after { content:''; position:absolute; right:0; bottom:0; width:64%; height:67%; background:linear-gradient(135deg,transparent 10%,rgba(45,105,116,.17) 10%,rgba(45,105,116,.17) 11%,transparent 11%,transparent 21%,rgba(45,105,116,.17) 21%,rgba(45,105,116,.17) 22%,transparent 22%),linear-gradient(180deg,transparent 0%,rgba(14,31,48,.1)); clip-path:polygon(12% 100%,12% 52%,21% 52%,21% 28%,27% 28%,27% 68%,38% 68%,38% 39%,47% 39%,47% 13%,53% 13%,53% 55%,62% 55%,62% 35%,73% 35%,73% 67%,84% 67%,84% 27%,91% 27%,91% 100%); opacity:.8; }.art-orbit { position:absolute; right:15%; top:21%; border:1px solid rgba(89,222,200,.25); border-radius:50%; transform:rotate(-28deg); }.orbit-one { width:400px; height:170px; }.orbit-two { width:300px; height:120px; right:19%; top:25%; border-color:rgba(248,166,91,.2); }.art-scan { position:absolute; top:0; right:22%; width:1px; height:100%; background:linear-gradient(transparent,rgba(88,228,198,.3),transparent); animation:scan 5s linear infinite; }
.menu-pip { position:absolute; right:19%; bottom:20%; width:155px; height:205px; filter:drop-shadow(0 20px 15px rgba(0,0,0,.3)); animation:float 3.4s ease-in-out infinite; }.pip-body { position:absolute; left:31px; top:53px; width:96px; height:96px; border:5px solid #d8e9de; background:#397d7c; border-radius:28px 28px 20px 20px; box-shadow:inset -8px -8px 0 rgba(14,43,60,.35),inset 8px 6px 0 rgba(170,239,208,.25); }.pip-visor { position:absolute; left:13px; top:22px; width:67px; height:34px; border:4px solid #102744; border-radius:13px 13px 17px 17px; background:#162a45; box-shadow:inset 0 0 0 4px #1e5064; }.pip-visor i { position:absolute; left:17px; top:10px; width:10px; height:7px; background:#77f2d2; box-shadow:20px 0 #77f2d2; }.pip-pack { position:absolute; right:-13px; top:28px; width:17px; height:50px; border:3px solid #a7c9c0; background:#e2945d; border-radius:4px; }.pip-antenna { position:absolute; left:75px; top:16px; width:4px; height:42px; background:#d8e9de; }.pip-antenna:after { content:''; position:absolute; left:-6px; top:-8px; width:15px; height:15px; border-radius:50%; background:#f6a65b; box-shadow:0 0 13px #f6a65b; }.pip-foot { position:absolute; top:142px; width:23px; height:42px; background:#d8e9de; border:4px solid #345b6c; border-radius:8px; }.pip-foot.left { left:43px; }.pip-foot.right { right:33px; }.pip-shadow { position:absolute; bottom:3px; left:23px; width:110px; height:15px; border-radius:50%; background:rgba(0,0,0,.25); filter:blur(4px); }
.panel-screen { background:linear-gradient(125deg,#0a1228,#0c1930 63%,#101e36); overflow:auto; }.panel-screen:before { content:''; position:absolute; inset:0; opacity:.4; background-image:linear-gradient(rgba(108,169,174,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(108,169,174,.04) 1px,transparent 1px); background-size:40px 40px; }.panel-inner { position:relative; width:min(1060px,84vw); margin:0 auto; padding:55px 0 30px; }.panel-inner.narrow { width:min(780px,84vw); }.back-button { background:transparent; border:0; padding:8px 0; color:#8ba5b4; font:700 10px 'Space Mono',monospace; letter-spacing:1px; }.panel-heading { margin:24px 0 31px; }.panel-heading h2 { margin:12px 0 4px; font-size:48px; letter-spacing:1px; line-height:.95; }.panel-heading p { margin:0; color:#91a7b5; font-size:18px; }.level-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.level-card { position:relative; min-height:255px; padding:22px; border:1px solid var(--line); background:rgba(17,31,51,.8); overflow:hidden; cursor:pointer; transition:transform .18s,border .18s; }.level-card:hover { transform:translateY(-5px); border-color:rgba(87,226,197,.7); }.level-card.locked { cursor:not-allowed; opacity:.56; }.level-card.locked:hover { transform:none; border-color:var(--line); }.level-visual { height:92px; margin:-22px -22px 18px; background:var(--card-bg); position:relative; overflow:hidden; }.level-visual:after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(6,12,25,.75)); }.level-num { position:absolute; left:16px; top:13px; z-index:1; color:#d6e7df; font:700 11px 'Space Mono',monospace; }.level-card h3 { margin:0; color:#e5efeb; font-size:25px; letter-spacing:.7px; }.level-card .card-tag { margin:4px 0 14px; color:var(--card-accent); font:700 9px 'Space Mono',monospace; letter-spacing:1px; }.card-meta { display:flex; justify-content:space-between; color:#8fa3ae; font:10px 'Space Mono',monospace; }.card-meta b { color:#e5efeb; }.lock-mark { position:absolute; top:12px; right:15px; color:#8ca1ac; font-size:17px; }.panel-note { display:flex; align-items:center; gap:16px; margin-top:30px; color:#718797; font:10px 'Space Mono',monospace; justify-content:center; }.signal-line { height:1px; width:48px; background:var(--line); }
.manual-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.manual-card { min-height:125px; padding:16px; border:1px solid var(--line); background:rgba(16,31,51,.76); display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; }.manual-card b { display:block; width:100%; margin-top:8px; font:700 11px 'Space Mono',monospace; color:#dce9e5; }.manual-card small { color:#8095a4; font-size:14px; line-height:1.05; }.keycap { display:inline-flex; align-items:center; justify-content:center; min-width:27px; height:27px; padding:0 7px; border:1px solid rgba(112,181,175,.6); color:var(--teal); font:700 10px 'Space Mono',monospace; }.keycap.wide { min-width:59px; }.tip-box { display:flex; gap:13px; margin-top:20px; padding:16px; border-left:2px solid var(--orange); background:rgba(36,40,46,.45); color:#acbbc0; line-height:1.3; }.tip-box p { margin:0; font-size:16px; }.tip-box b { color:var(--orange); font:700 10px 'Space Mono',monospace; letter-spacing:1px; }.tip-mark { color:var(--orange); font-size:20px; }
.settings-list { border-top:1px solid var(--line); }.setting-row { position:relative; display:flex; align-items:center; min-height:75px; padding:14px 0; border-bottom:1px solid var(--line); }.setting-row > span:first-child { flex:1; }.setting-row b { display:block; color:#e1ece9; font:700 11px 'Space Mono',monospace; letter-spacing:1px; }.setting-row small { display:block; margin-top:4px; color:#849aa7; font-size:15px; }.setting-row input[type=range] { width:220px; accent-color:var(--teal); }.setting-row output { width:44px; margin-left:12px; color:var(--teal); font:10px 'Space Mono',monospace; }.toggle-row input { position:absolute; opacity:0; }.toggle-ui { position:relative; width:43px; height:22px; border:1px solid #69818e; background:#15263d; }.toggle-ui:after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#79909a; transition:transform .18s,background .18s; }.toggle-row input:checked + .toggle-ui { border-color:var(--teal); }.toggle-row input:checked + .toggle-ui:after { transform:translateX(20px); background:var(--teal); }
.modal-screen { align-items:center; justify-content:center; background:rgba(5,10,22,.72); backdrop-filter:blur(7px); }.modal-card { position:relative; width:min(480px,86vw); padding:44px 43px 35px; background:linear-gradient(140deg,rgba(19,36,58,.98),rgba(10,21,41,.98)); border:1px solid rgba(110,166,172,.36); box-shadow:12px 12px 0 rgba(3,9,20,.4); text-align:center; }.modal-card:before { content:''; position:absolute; top:-1px; left:27px; right:27px; height:2px; background:var(--teal); box-shadow:0 0 15px rgba(87,226,197,.6); }.modal-card h2 { margin:13px 0 20px; font-size:48px; line-height:.86; letter-spacing:1px; }.modal-card h2 em { color:var(--teal); font-style:normal; }.modal-actions { display:flex; flex-direction:column; align-items:center; gap:1px; }.modal-actions .primary-button,.modal-actions .secondary-button { width:100%; text-align:center; }.modal-actions .text-button { margin-top:9px; }.modal-hint { margin:20px 0 0; color:#708998; font:10px 'Space Mono',monospace; }.complete-glow { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(87,226,197,.18),transparent 68%); animation:glow 2s ease-in-out infinite; }.complete-card { overflow:hidden; }.complete-card h2 { font-size:54px; }.complete-sector { color:var(--orange); font:700 10px 'Space Mono',monospace; letter-spacing:1px; }.results { display:grid; grid-template-columns:repeat(4,1fr); margin:25px 0 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.results div { padding:14px 4px; border-right:1px solid var(--line); }.results div:last-child { border:0; }.results small { display:block; color:#829aa6; font:9px 'Space Mono',monospace; }.results b { display:block; margin-top:7px; color:#e9f2ed; font:700 13px 'Space Mono',monospace; }.warning { color:var(--coral); }.modal-copy { margin:-4px 0 24px; color:#a0b1b7; font-size:18px; }
.toast { position:absolute; z-index:15; left:50%; top:105px; transform:translate(-50%,-20px); opacity:0; padding:10px 16px; background:rgba(8,17,31,.9); border:1px solid rgba(87,226,197,.55); color:var(--teal); font:700 10px 'Space Mono',monospace; letter-spacing:1px; pointer-events:none; transition:opacity .25s,transform .25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.touch-controls { display:none; position:absolute; z-index:7; inset:auto 0 18px; padding:0 20px; justify-content:space-between; pointer-events:none; }.touch-cluster { display:flex; gap:10px; pointer-events:auto; }.touch-cluster button { width:58px; height:58px; border:1px solid rgba(193,236,225,.35); border-radius:50%; background:rgba(9,23,39,.68); color:#d7ece4; font-size:25px; -webkit-tap-highlight-color:transparent; }.touch-cluster button:active,.touch-cluster button.down { background:rgba(50,128,123,.8); transform:scale(.94); }.right-cluster button:first-child { color:var(--orange); font-size:20px; }
button:focus-visible,input:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-11px); } } @keyframes scan { from { transform:translateY(-100%); } to { transform:translateY(100%); } } @keyframes glow { 0%,100% { transform:scale(.95); opacity:.7; } 50% { transform:scale(1.08); opacity:1; } }
@media (max-width:900px) { .hud { padding:15px 14px; }.hud-left { min-width:0; }.hud-center { display:none; }.hud-right { min-width:0; gap:10px; }.brand-chip { display:none; }.menu-copy { left:8%; top:10%; }.menu-pip { right:9%; bottom:18%; transform:scale(.78); }.level-cards { grid-template-columns:1fr; }.level-card { min-height:160px; }.level-visual { position:absolute; inset:0 0 0 auto; width:44%; height:auto; margin:0; opacity:.55; }.level-card h3,.level-card .card-tag,.level-card .card-meta { position:relative; width:50%; }.manual-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .game-shell { min-height:360px; }.hud { padding:10px 10px; }.hud-right { gap:7px; }.stat { font-size:9px; }.energy { gap:4px; }.energy-cell { width:11px; height:8px; }.dash-meter { width:47px; height:22px; }.icon-button { width:27px; height:27px; }.menu-copy { left:9%; top:9%; }.menu-copy h1 { font-size:clamp(52px,17vw,84px); letter-spacing:-3px; }.subtitle { font-size:13px; letter-spacing:5px; }.intro { font-size:16px; margin-top:24px; }.menu-actions { margin-top:27px; width:min(220px,68vw); }.menu-foot { left:9%; right:9%; font-size:7px; }.menu-foot span:last-child { display:none; }.menu-pip { right:-1%; bottom:14%; opacity:.7; transform:scale(.6); }.panel-inner { padding-top:30px; width:88vw; }.panel-heading { margin-bottom:20px; }.panel-heading h2 { font-size:35px; }.panel-heading p { font-size:16px; }.manual-card { min-height:105px; }.setting-row input[type=range] { width:135px; }.modal-card { padding:34px 25px 26px; }.modal-card h2,.complete-card h2 { font-size:41px; }.results b { font-size:10px; }.touch-controls { display:flex; }.hud { pointer-events:none; }.icon-button { pointer-events:auto; } }
@media (pointer:coarse) and (orientation:landscape) { .touch-controls { display:flex; } }