:root { --ink:#eaf7ef; --navy:#101a32; --blue:#1f385a; --panel:#182b49e8; --teal:#6fe0cb; --orange:#ffad57; --rose:#ff6d7c; --cream:#fff2cd; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#090f20; color:var(--ink); font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow:hidden; }
button, input { font:inherit; }
button { color:var(--ink); cursor:pointer; }
#game-shell { position:relative; width:100vw; height:100vh; min-height:420px; overflow:hidden; background:#0e1830; user-select:none; display:flex; align-items:center; justify-content:center; }
#game { display:block; width:min(100vw,177.777vh); height:min(100vh,56.25vw); aspect-ratio:16/9; image-rendering:pixelated; image-rendering:crisp-edges; }
.hidden { display:none !important; }
.screen { position:absolute; inset:0; display:none; align-items:center; flex-direction:column; justify-content:center; text-align:center; padding:24px; background:linear-gradient(180deg,#0f1c38aa,#101a32e8); overflow:auto; }
.screen.active { display:flex; }
.screen h1, .screen h2, .screen p { margin:0; }
.eyebrow { color:var(--teal); font-size:clamp(10px,1.4vw,15px); letter-spacing:.18em; margin-bottom:12px !important; }
h1 { color:var(--cream); font-size:clamp(48px,9vw,116px); letter-spacing:-.1em; line-height:.8; text-shadow:5px 5px 0 #1f385a; }
h1 span { color:var(--teal); }
.subtitle { color:var(--orange); font-size:clamp(17px,2.8vw,33px); letter-spacing:.65em; margin:22px 0 20px !important; padding-left:.65em; }
h2 { font-size:clamp(28px,4.5vw,48px); color:var(--cream); letter-spacing:-.08em; }
.menu-copy { color:#b8cfdb; line-height:1.65; font-size:clamp(12px,1.3vw,15px); }
.button-stack { display:grid; gap:9px; width:min(290px,85vw); margin:28px auto 0; }
button { border:1px solid #51728d; border-radius:4px; padding:13px 18px; background:#17304f; box-shadow:inset 0 1px #6f96a5, 0 3px 0 #0b1529; text-transform:uppercase; letter-spacing:.13em; font-size:13px; transition:transform .1s, background .1s, color .1s; }
button:hover, button:focus-visible { outline:none; color:#101a32; background:var(--teal); transform:translateY(-1px); }
button:active { transform:translateY(2px); box-shadow:inset 0 1px #6f96a5, 0 1px 0 #0b1529; }
button.primary { background:var(--orange); color:#16233a; border-color:#ffe3a1; box-shadow:inset 0 1px #fff2cd, 0 3px 0 #a65a39; font-weight:800; }
button.primary:hover, button.primary:focus-visible { background:#fff2cd; }
.menu-hint { color:#7897ad; position:absolute; bottom:26px; font-size:10px; letter-spacing:.08em; }
.menu-signal { position:absolute; width:360px; height:360px; border:1px solid #6fe0cb26; border-radius:50%; opacity:.6; animation:pulse 5s ease-in-out infinite; }
.menu-signal i { position:absolute; inset:24px; border:1px solid #6fe0cb22; border-radius:50%; } .menu-signal i:nth-child(2){inset:54px}.menu-signal i:nth-child(3){inset:90px}
@keyframes pulse{50%{transform:scale(1.12);opacity:.25}}
.panel-screen { background:#101a32f5; justify-content:flex-start; padding-top:clamp(42px,9vh,90px); }
.back { position:absolute; top:20px; left:20px; width:45px; height:42px; padding:0; font-size:21px; }
.level-cards { display:grid; grid-template-columns:repeat(3,minmax(190px,280px)); gap:18px; margin-top:34px; width:min(940px,100%); }
.level-card { min-height:260px; text-align:left; position:relative; padding:20px; border:1px solid #42647e; background:#172a47; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.level-card::before { content:""; position:absolute; left:0; right:0; top:0; height:112px; background:var(--card-color); opacity:.8; }
.level-card > * { position:relative; }.level-card .sector { color:var(--teal); font-size:10px; letter-spacing:.15em; }.level-card h3{font-size:22px;margin:10px 0 6px;color:var(--cream)}.level-card p{font-size:11px;color:#abc3d1;line-height:1.5;margin:0}.level-card .progress{margin-top:16px;color:var(--orange);font-size:11px}.level-card.locked{filter:saturate(.25);opacity:.55}.level-card.locked button{cursor:not-allowed}.level-card button{margin-top:15px;width:100%;padding:10px;font-size:10px}
.how-grid { display:grid; grid-template-columns:repeat(2,minmax(190px,280px)); gap:12px; margin:28px auto 0; max-width:600px; }.how-grid article{border:1px solid #375773;background:#172a47;padding:18px;text-align:left;min-height:140px}.how-grid kbd,.how-grid b{display:inline-block;color:#101a32;background:var(--teal);min-width:30px;text-align:center;padding:5px;border-radius:2px;margin-right:4px;font-size:13px}.how-grid b{background:var(--orange)}.how-grid h3{margin:14px 0 6px;color:var(--cream);font-size:14px;letter-spacing:.08em}.how-grid p{color:#b8cfdb;font-size:11px;line-height:1.55}.bottom-button{margin-top:25px;min-width:230px}
.settings-list { width:min(470px,90vw); display:grid; gap:20px; margin-top:35px; text-align:left; }.settings-list label:not(.toggle-line){display:grid;grid-template-columns:1fr auto;gap:9px;color:var(--cream);font-size:13px}.settings-list output{color:var(--teal)}.settings-list input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--teal)}.toggle-line{display:flex;align-items:center;justify-content:space-between;color:var(--cream);font-size:13px}.toggle-line input{position:absolute;opacity:0}.toggle{width:44px;height:22px;background:#314a65;border:1px solid #5b7992;border-radius:15px;position:relative}.toggle:after{content:"";position:absolute;background:#bed5dd;width:14px;height:14px;border-radius:50%;left:3px;top:3px;transition:.15s}.toggle-line input:checked + .toggle{background:#227c77}.toggle-line input:checked + .toggle:after{left:25px;background:var(--cream)}.toggle-line input:focus-visible +.toggle{outline:2px solid var(--orange)}
.modal { background:#071022b8; backdrop-filter:blur(4px); }.modal-box { border:1px solid #56778e; background:#132743f7; padding:35px 45px 38px; max-width:420px; width:min(420px,90vw); box-shadow:0 14px 45px #02071699; }.modal-box h2{margin-bottom:12px}.modal-box > p:not(.eyebrow){font-size:12px;color:#bbcfda;line-height:1.6}.modal-box.danger{border-color:#c45c6c}.modal-box.danger h2{color:var(--rose)}.modal-box.complete{border-color:#e7bd69}.modal-box.complete h2{color:var(--orange)}
.results{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin:22px 0 3px}.result{padding:10px;background:#0e2039;color:#bcd3da;font-size:10px}.result strong{display:block;color:var(--cream);font-size:17px;margin-top:3px}
.hud { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; padding:18px 24px; pointer-events:none; text-shadow:2px 2px #111a32; font-size:12px; }.brand-mini{font-size:11px;color:var(--cream);letter-spacing:.12em}.brand-mini span{color:var(--teal)}.level-label{font-size:10px;color:#aac4d3;margin-top:5px;letter-spacing:.14em}.hud-right{display:flex;align-items:flex-start;gap:18px}.stat{display:flex;gap:6px;align-items:center;white-space:nowrap}.stat-label{font-size:9px;color:#a8c8d4;letter-spacing:.1em}.cells{display:flex;gap:3px}.cell{display:block;width:11px;height:15px;background:var(--orange);clip-path:polygon(25% 0,75% 0,100% 20%,100% 80%,75% 100%,25% 100%,0 80%,0 20%)}.cell.off{background:#35465e}.diamond{color:var(--teal);font-size:17px;line-height:.7}.core-icon{color:var(--orange);font-size:17px;line-height:.7}.dash-wrap{display:grid;gap:3px}.dash-meter{width:52px;height:6px;background:#33465c;border:1px solid #7ca0ad}.dash-meter i{display:block;background:var(--teal);height:100%;transition:width .1s}
.toast { position:absolute; top:82px; left:50%; transform:translate(-50%,-12px); background:#173c56; color:var(--cream); padding:9px 14px; border:1px solid var(--teal); font-size:11px; opacity:0; transition:.22s; pointer-events:none; z-index:6; }.toast.show{opacity:1;transform:translate(-50%,0)}
.touch-controls { display:none; position:absolute; inset:auto 0 max(12px,env(safe-area-inset-bottom)) 0; padding:0 18px; justify-content:space-between; pointer-events:none; }.touch-move,.touch-actions{display:flex;gap:10px;pointer-events:auto}.touch-button{width:64px;height:64px;border-radius:50%;padding:0;background:#17304fd9;border-color:#6e97a8;font-size:21px;touch-action:none}.touch-button.jump{background:#e78c4cdd;color:#132039}.touch-button.dash{background:#2e817bdd}
@media (hover:none),(pointer:coarse){.touch-controls{display:flex}.hud{padding:12px 15px}.hud-right{gap:8px}.brand-mini{font-size:9px}.level-label{font-size:8px}.stat-label{font-size:7px}.dash-wrap{display:none}}
@media(max-width:700px){.level-cards{grid-template-columns:1fr;max-width:350px;margin-top:18px}.level-card{min-height:150px}.level-card::before{height:65px}.how-grid{grid-template-columns:1fr;gap:8px;margin-top:16px}.how-grid article{min-height:95px;padding:12px}.how-grid h3{margin:7px 0 3px}.panel-screen{padding-top:55px}.settings-list{margin-top:24px}.modal-box{padding:28px 24px}.hud-right .stat:nth-child(2),.hud-right .stat:nth-child(3){font-size:10px}}