:root{
  --blue:#2aa8ff; --deep:#0a1830; --copper:#d98a3d; --violet:#a26bff;
  --orange:#ff7a2f; --cyan:#4ff0e6; --danger:#ff5a4a; --shield:#39c6ff;
  --health:#f0a24f; --bg:#04070f; --ink:#dfeaff;
  --font:"Rajdhani","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none}
canvas#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.hidden{display:none !important}

/* ============ MENUS ============ */
.menu-screen{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%, #0c1c38 0%, #050912 60%, #02040a 100%);}
.starfield{position:absolute;inset:0;background:
  radial-gradient(1px 1px at 20% 30%,#8fbfff 50%,transparent),
  radial-gradient(1px 1px at 70% 60%,#ffd9a8 50%,transparent),
  radial-gradient(1px 1px at 40% 80%,#c4a8ff 50%,transparent),
  radial-gradient(2px 2px at 85% 20%,#4ff0e6 50%,transparent),
  radial-gradient(1px 1px at 55% 15%,#fff 50%,transparent),
  radial-gradient(1px 1px at 10% 65%,#9fd0ff 50%,transparent);
  opacity:.5;animation:drift 60s linear infinite}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-40px)}}

.title-wrap{position:relative;text-align:center;z-index:2;animation:fadeup .8s ease}
.game-title{font-size:6.2rem;font-weight:700;letter-spacing:.18em;line-height:.9;
  background:linear-gradient(180deg,#eaf4ff,#58b7ff 55%,#2a7fd6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 44px rgba(60,170,255,.35);filter:drop-shadow(0 4px 20px rgba(20,80,160,.5))}
.game-title span{display:block;font-size:2.7rem;letter-spacing:.55em;margin-top:.3rem;
  background:linear-gradient(90deg,var(--copper),var(--orange),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.title-sub{margin-top:1rem;letter-spacing:.42em;font-size:1rem;color:#8fb6e6;text-transform:uppercase}
.menu-buttons{margin-top:2.6rem;display:flex;flex-direction:column;gap:.85rem;align-items:center}
.title-footer{margin-top:2.4rem;font-size:.72rem;letter-spacing:.12em;color:#5c7699}

.mbtn{position:relative;min-width:290px;padding:.85rem 2rem;font-family:var(--font);font-size:1.05rem;
  font-weight:600;letter-spacing:.22em;color:#bfe0ff;background:linear-gradient(90deg,rgba(20,50,90,.25),rgba(30,70,120,.12));
  border:1px solid rgba(80,170,255,.4);cursor:pointer;text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:.15s ease}
.mbtn:hover{background:linear-gradient(90deg,rgba(50,130,220,.4),rgba(60,140,230,.2));color:#fff;
  box-shadow:0 0 22px rgba(60,170,255,.4),inset 0 0 14px rgba(70,180,255,.2);transform:translateY(-1px)}
.mbtn.primary{border-color:var(--orange);color:#ffd6b0}
.mbtn.primary:hover{background:linear-gradient(90deg,rgba(210,120,50,.4),rgba(255,120,60,.2));box-shadow:0 0 22px rgba(255,120,50,.45)}
.mbtn.small{min-width:auto;padding:.5rem 1rem;font-size:.8rem}
.mbtn:disabled{opacity:.35;cursor:not-allowed}

.panel{position:relative;width:min(920px,92vw);max-height:90vh;overflow:auto;padding:2.4rem 2.6rem;
  background:linear-gradient(160deg,rgba(12,28,54,.94),rgba(6,14,28,.96));
  border:1px solid rgba(70,150,240,.35);box-shadow:0 0 60px rgba(10,40,90,.6),inset 0 0 40px rgba(20,60,120,.15);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);animation:fadeup .4s ease}
.panel.narrow{width:min(460px,92vw);text-align:center}
.panel-title{font-size:1.7rem;letter-spacing:.32em;color:#7fc3ff;margin-bottom:1.6rem;text-transform:uppercase;
  border-bottom:1px solid rgba(80,160,255,.25);padding-bottom:.8rem}
.panel-actions{margin-top:1.8rem;display:flex;gap:1rem;justify-content:flex-end}

/* difficulty */
.difficulty-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.diff-card{text-align:left;padding:1.1rem 1.3rem;background:rgba(18,40,72,.4);border:1px solid rgba(70,150,240,.3);
  cursor:pointer;color:#cfe3ff;transition:.15s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.diff-card:hover{background:rgba(30,70,120,.5);transform:translateY(-2px)}
.diff-card.selected{border-color:var(--orange);box-shadow:0 0 20px rgba(255,120,50,.3);background:rgba(60,40,20,.35)}
.diff-name{display:block;font-size:1.3rem;letter-spacing:.2em;font-weight:700;color:#fff;margin-bottom:.4rem}
.diff-desc{display:block;font-size:.85rem;color:#9fb8d8;line-height:1.4}

/* settings */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.4rem}
.setting-group h3{font-size:.95rem;letter-spacing:.24em;color:var(--copper);margin-bottom:.9rem;border-left:3px solid var(--copper);padding-left:.6rem}
.setting-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem;font-size:.92rem;letter-spacing:.06em;color:#cfe0f6}
.setting-row.toggle{justify-content:space-between}
.setting-row select{margin-left:auto;background:#0c1e3a;color:#cfe6ff;border:1px solid rgba(80,160,255,.4);padding:.35rem .6rem;font-family:var(--font)}
.setting-row input[type=range]{margin-left:auto;flex:1;max-width:180px;accent-color:var(--blue)}
.setting-row .val{min-width:38px;text-align:right;color:#7fc3ff;font-variant-numeric:tabular-nums}
.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--orange)}
#keybind-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.8rem;max-height:180px;overflow:auto}
.keybind-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;letter-spacing:.05em}
.keybind-row button{min-width:96px;background:#0c1e3a;border:1px solid rgba(80,160,255,.4);color:#cfe6ff;padding:.3rem .5rem;cursor:pointer;font-family:var(--font);letter-spacing:.08em}
.keybind-row button.listening{border-color:var(--orange);color:var(--orange);animation:pulse 1s infinite}
.credits-body p{margin-bottom:.9rem;line-height:1.5;color:#cfe0f6}
.credits-body .dim{color:#7c93b3;font-size:.85rem}

/* ============ LOADING ============ */
.loading-wrap{text-align:center}
.loading-glyph svg{width:120px;height:120px;animation:spin 6s linear infinite}
.lg-outer{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:.6}
.lg-inner{fill:none;stroke:var(--orange);stroke-width:2;animation:pulse 1.6s ease-in-out infinite}
#loading-title{margin-top:1.4rem;font-size:2rem;letter-spacing:.34em;color:#9fd0ff}
#loading-tip{margin-top:.6rem;color:#7c99bd;letter-spacing:.1em;font-size:.9rem}
.loading-bar{margin:1.6rem auto 0;width:340px;height:6px;background:rgba(60,120,200,.2);overflow:hidden}
#loading-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 14px var(--cyan);transition:width .2s}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
#crosshair{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);opacity:.9}
.ch-dot{fill:var(--cyan)}
.ch-lines{stroke:var(--cyan);stroke-width:3;fill:none;filter:drop-shadow(0 0 3px var(--cyan))}
#crosshair.aiming{transform:translate(-50%,-50%) scale(.7)}
#crosshair.firing .ch-lines{stroke:var(--orange)}

#vitals{position:absolute;left:34px;bottom:34px;width:290px;display:flex;flex-direction:column;gap:.55rem}
.vital-row{display:flex;align-items:center;gap:.7rem}
.vital-label{font-size:.7rem;letter-spacing:.18em;width:70px;color:#8fb6e6}
.bar-wrap{position:relative;flex:1;height:14px;background:rgba(10,26,50,.7);
  border:1px solid rgba(80,160,255,.35);clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);overflow:hidden}
.bar-fill{height:100%;width:100%;transition:width .18s ease}
.bar-wrap.shield .bar-fill{background:linear-gradient(90deg,#2a86d8,var(--shield));box-shadow:0 0 12px var(--shield)}
.bar-wrap.health .bar-fill{background:linear-gradient(90deg,#c46a2a,var(--health));box-shadow:0 0 10px var(--health)}
.bar-ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 22px,rgba(0,0,0,.5) 22px,rgba(0,0,0,.5) 24px)}
.bar-wrap.shield.depleted{border-color:var(--danger);animation:pulse .8s infinite}

#weapon-panel{position:absolute;right:34px;bottom:34px;text-align:right;min-width:220px}
#weapon-name{font-size:1rem;letter-spacing:.2em;color:#9fd0ff;text-shadow:0 0 10px rgba(80,180,255,.5)}
#ammo-readout{font-size:2.6rem;font-weight:700;line-height:1;margin-top:.2rem;font-variant-numeric:tabular-nums}
#ammo-current{color:#fff}
#ammo-sep,#ammo-reserve{color:#6f8bb0;font-size:1.5rem}
#reload-indicator{color:var(--orange);letter-spacing:.24em;font-size:.85rem;margin-top:.3rem;animation:pulse .7s infinite}

#ability-panel{position:absolute;right:34px;top:30px}
#ability-hex{position:relative;width:88px;height:88px}
#ability-hex svg{width:100%;height:100%}
#ability-poly{fill:rgba(12,30,56,.65);stroke:rgba(120,90,255,.55);stroke-width:2}
#ability-fill{fill:rgba(160,110,255,.28);stroke:none;transform-origin:50% 50%}
#ability-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.66rem;letter-spacing:.14em;color:#d9c9ff;line-height:1.1}
#ability-key{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;background:#1a1030;border:1px solid var(--violet);color:#d9c9ff;border-radius:3px}
#ability-hex.ready #ability-poly{stroke:var(--violet);filter:drop-shadow(0 0 8px rgba(160,110,255,.7))}

#objective-panel{position:absolute;left:50%;top:26px;transform:translateX(-50%);text-align:center;max-width:60vw}
#objective-title{font-size:.68rem;letter-spacing:.34em;color:var(--copper)}
#objective-text{font-size:1.05rem;letter-spacing:.08em;color:#eaf3ff;margin-top:.25rem;text-shadow:0 0 12px rgba(60,150,255,.4)}
#objective-text.updated{animation:objflash 1.2s ease}
@keyframes objflash{0%{color:var(--cyan);text-shadow:0 0 20px var(--cyan)}100%{color:#eaf3ff}}

#compass{position:absolute;left:50%;top:74px;transform:translateX(-50%);width:200px;height:60px;opacity:.92}
#compass-svg{width:100%;height:100%}
.compass-bg{fill:rgba(8,20,40,.5);stroke:rgba(80,160,255,.3);stroke-width:1}
.compass-center{stroke:var(--orange);stroke-width:2}
.compass-tick{stroke:rgba(140,190,255,.6);stroke-width:1}
.compass-label{fill:#9fc4f0;font-size:9px;font-family:var(--font);text-anchor:middle}
.compass-marker{fill:var(--cyan)}
.compass-marker.enemy{fill:var(--danger)}
.compass-marker.objective{fill:var(--orange)}

#toast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;
  font-size:1.3rem;letter-spacing:.2em;color:#eaf3ff;text-shadow:0 0 16px rgba(60,160,255,.7);opacity:0;transition:opacity .3s}
#toast.show{opacity:1}
#toast .toast-sub{display:block;font-size:.85rem;letter-spacing:.16em;color:var(--copper);margin-top:.3rem}

#interact-prompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);letter-spacing:.14em;font-size:1rem;color:#eaf3ff;
  background:rgba(8,20,40,.6);padding:.5rem 1rem;border:1px solid rgba(80,170,255,.4);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#interact-prompt .ik{display:inline-block;min-width:22px;text-align:center;background:var(--orange);color:#111;font-weight:700;
  border-radius:3px;padding:.05rem .35rem;margin-right:.3rem}

#reactor-timer{position:absolute;left:50%;top:120px;transform:translateX(-50%);text-align:center}
.rt-label{font-size:.72rem;letter-spacing:.3em;color:var(--danger);animation:pulse 1s infinite}
#rt-value{font-size:2.4rem;font-weight:700;color:#ff6a4a;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,60,40,.6)}
#reactor-timer.critical #rt-value{animation:pulse .4s infinite}

#subtitles{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);max-width:70vw;text-align:center;
  font-size:1.15rem;line-height:1.5;color:#f2f7ff;opacity:0;transition:opacity .25s}
#subtitles.show{opacity:1}
#subtitles .spk{color:var(--cyan);font-weight:600;letter-spacing:.08em}
#subtitles.big{font-size:1.5rem;background:rgba(0,0,0,.75);padding:.5rem 1.2rem;border-radius:6px}

#damage-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 180px 40px rgba(255,40,30,.7);transition:opacity .12s}
#shield-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 120px 20px rgba(60,180,255,.6);transition:opacity .1s}

#click-to-play{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(2,6,14,.55);backdrop-filter:blur(2px)}
.ctp-inner{padding:1rem 2rem;border:1px solid rgba(80,170,255,.5);letter-spacing:.24em;color:#bfe0ff;
  background:rgba(10,24,46,.7);animation:pulse 1.4s infinite}

@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

@media (max-width:820px){
  .game-title{font-size:3.6rem}.game-title span{font-size:1.5rem}
  .settings-grid,.difficulty-grid{grid-template-columns:1fr}
  #vitals{width:200px}
}


/* Completion pass: legibility, controls and compatibility without changing the palette. */
.slice-label{font-size:12px;letter-spacing:.16em;color:#afc5df;margin-top:1.1rem}
.controls-summary{font-size:13px;line-height:1.8;color:#afc5df;margin-top:1.5rem;letter-spacing:.03em}
.title-footer{margin-top:1rem;font-size:12px;color:#9ab1ce}
.setting-note{font-size:12px;color:#b0c4e0;line-height:1.5;margin-bottom:12px}
.vital-label,#ability-name,#objective-title,.rt-label{font-size:12px;letter-spacing:.14em}
.compass-label{font-size:12px;fill:#deecff}
#objective-panel{padding:9px 20px;background:linear-gradient(90deg,transparent,rgba(4,12,24,.86),transparent);min-width:370px}
#objective-text{font-size:16px;text-shadow:0 2px 4px #000}
#compass{top:99px}
#vitals,#weapon-panel{padding:12px 14px;background:rgba(3,12,25,.72);border-bottom:1px solid #658bb34d}
#vitals{width:320px}#weapon-panel{min-width:225px}
#subtitles{background:rgba(3,10,20,.82);padding:8px 16px;text-shadow:0 1px 3px #000;border-left:2px solid #719bb2;font-size:16px;bottom:135px;max-width:65vw}
#subtitles.big{font-size:23px;background:rgba(0,0,0,.9)}
#ammo-sep,#ammo-reserve{color:#acbed6}
#ability-panel{background:rgba(3,12,25,.5);border-radius:10px}
#world-objective{position:absolute;transform:translate(-50%,-50%);font-size:13px;letter-spacing:.05em;color:#ffe3b6;text-shadow:0 1px 4px #000;background:rgba(5,14,25,.8);border:1px solid #dba76977;padding:5px 9px}
#scan-readout{position:absolute;right:32px;top:133px;font-size:13px;color:#e1cbff;text-shadow:0 2px 4px #000}
#boss-panel{position:absolute;top:174px;left:50%;transform:translateX(-50%);width:320px;background:rgba(3,9,20,.83);padding:9px 15px;color:#eed7fd;text-align:center;font-size:13px;letter-spacing:.15em}
.boss-track{height:7px;background:#172335;margin-top:8px}#boss-bar{height:100%;background:linear-gradient(90deg,#b174df,#ff9651);transition:width .1s}
#reactor-timer{top:163px;background:rgba(4,11,22,.9);padding:6px 18px}
#hud-actions{pointer-events:auto;position:absolute;left:30px;top:28px;display:flex;gap:8px}
#hud-actions button{font:600 12px system-ui;padding:9px 12px;color:#e7effd;background:#0b1b2bdd;border:1px solid #55749a;cursor:pointer;letter-spacing:.08em}
#control-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;background:rgba(3,9,20,.8);color:#c9d9ed;padding:5px 12px;white-space:nowrap}
#crosshair.hit .ch-lines{stroke:#fff;stroke-width:5}#crosshair.hit .ch-dot{fill:#ffb464}
#toast{padding:12px 20px;background:rgba(4,12,23,.82);border-left:2px solid #d98a3d}
#end-text{font-size:15px;line-height:1.65;white-space:pre-line}
#touch-controls{display:none;pointer-events:auto;touch-action:none}
#touch-look{position:absolute;right:0;top:27%;width:58%;height:40%;touch-action:none}
.touch-move{position:absolute;left:16px;bottom:130px;text-align:center}.touch-move>div{display:flex;gap:5px}
#touch-controls button{background:#0b1b2bc9;color:#e4efff;border:1px solid #7496b3;border-radius:5px;min-width:46px;min-height:44px;font:600 12px system-ui;touch-action:none;user-select:none}
.touch-actions{position:absolute;right:14px;bottom:123px;width:200px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#touch-controls button:active{background:#8f4c23}
.reduce-effects *, .reduce-effects *::before{animation-duration:.001ms!important;transition-duration:.001ms!important}
.reduce-effects #shield-flash,.reduce-effects #damage-vignette{display:none}
@media(pointer:coarse){#touch-controls{display:block}#control-hint{display:none}#subtitles{bottom:330px;max-width:85vw;font-size:14px}#hud-actions{display:none}}
@media(max-width:820px){#objective-panel{min-width:230px;max-width:63vw;top:10px;padding:6px 8px}#objective-text{font-size:14px}#objective-title{font-size:12px}#compass{top:87px}#vitals{left:12px;bottom:25px;width:220px}#weapon-panel{right:12px;bottom:25px;min-width:160px}#weapon-name{font-size:12px}#ability-panel{right:12px;top:14px}#ability-hex{width:72px;height:72px}.game-title{font-size:3.2rem}.game-title span{font-size:1.4rem}.controls-summary{font-size:12px;padding:0 18px}.panel{padding:20px}.panel-actions{justify-content:center;flex-wrap:wrap}#hud-actions{left:8px;top:16px;flex-direction:column}#control-hint{font-size:10px}#boss-panel{width:260px}}
@media(prefers-reduced-motion:reduce){.starfield,.title-wrap,.panel{animation:none}}


#touch-controls{position:absolute;inset:0;pointer-events:none}
#touch-controls>*{pointer-events:auto}