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

:root { color-scheme: dark; --cyan:#62efff; --blue:#218cf9; --ink:#07111f; --muted:#b8d2df; --orange:#ffaf48; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#061220; font-family:'Chakra Petch',system-ui,sans-serif; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
canvas { position:fixed; inset:0; display:block; width:100%; height:100%; filter:contrast(1.12) saturate(.90) brightness(.96); }
@media (pointer:coarse) { html,body { width:100vw; height:100dvh; min-width:100vw; min-height:100dvh; touch-action:manipulation; } canvas { width:100vw; height:100dvh; touch-action:none; } button,input,select,summary { touch-action:manipulation; } }
#cinematicIntro { position:fixed; inset:0; z-index:100; overflow:hidden; background:#000; }
#introVideo { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:0; transition:opacity 660ms cubic-bezier(.2,.78,.2,1); }
#cinematicIntro.intro-playing #introVideo { opacity:1; }
#cinematicIntro.intro-ending #introVideo { opacity:0; transition-duration:900ms; transition-timing-function:cubic-bezier(.4,0,.2,1); }
#skipIntro,#enableIntroAudio { position:absolute; right:clamp(18px,2.6vw,38px); z-index:1; margin:0; padding:9px 11px; border:1px solid rgba(205,235,249,.30); background:rgba(3,10,17,.22); color:rgba(229,247,255,.60); box-shadow:none; font:600 10px Orbitron,sans-serif; letter-spacing:.18em; opacity:.70; transition:opacity .18s,background .18s,border-color .18s,transform .18s; }
#skipIntro { bottom:clamp(18px,3.2vw,34px); }
#enableIntroAudio { display:none; bottom:clamp(58px,7.4vw,76px); }
#cinematicIntro.audio-locked #enableIntroAudio { display:block; animation:introSoundReveal .35s ease-out both; }
#skipIntro:hover,#enableIntroAudio:hover { transform:none; filter:none; opacity:1; color:#effcff; border-color:rgba(205,245,255,.72); background:rgba(9,28,42,.45); }
#skipIntro:disabled { pointer-events:none; opacity:0; }
@keyframes introSoundReveal { from { opacity:0; transform:translateY(5px); } to { opacity:.82; transform:translateY(0); } }
#hud { position:fixed; inset:0; pointer-events:none; color:#e6fbff; letter-spacing:.08em; text-shadow:0 1px 10px #00131d; }
.brand { position:absolute; top:24px; left:28px; font:700 14px Orbitron,sans-serif; letter-spacing:.25em; color:#fff; } .brand span { color:var(--cyan); }
.objective { position:absolute; top:49px; left:28px; color:#8db8c9; font-size:11px; font-weight:600; } .pulse { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#4bffbb; box-shadow:0 0 12px #4bffbb; }
.top-right { position:absolute; top:23px; right:28px; text-align:right; font:600 13px Orbitron,sans-serif; line-height:1.8; color:#b6deea; } #timer { font-size:20px; color:#fff; letter-spacing:.15em; }
#bossHud { position:absolute; top:22px; left:50%; width:min(410px,58vw); transform:translateX(-50%); padding:7px 12px 8px; border:1px solid rgba(255,75,75,.72); background:linear-gradient(90deg,rgba(44,5,8,.08),rgba(57,5,9,.78),rgba(44,5,8,.08)); color:#ffb3a9; text-align:center; font:700 9px Orbitron,sans-serif; letter-spacing:.16em; opacity:0; transition:opacity .24s; } #bossHud.show { opacity:1; } #bossHud div { height:7px; margin-top:5px; overflow:hidden; border:1px solid rgba(255,190,180,.46); background:#190508; transform:skewX(-15deg); } #bossHud i { display:block; width:100%; height:100%; transform-origin:left center; background:linear-gradient(90deg,#d82e35,#ff9049,#ffdad0); box-shadow:0 0 13px #ff343c; transition:transform .12s; } #bossHud b { display:block; margin-top:4px; color:#fff2e8; font-size:11px; }
#reticle { position:absolute; top:50%; left:50%; width:32px; height:32px; transform:translate(-50%,-50%); opacity:.85; transition:opacity .12s,transform .12s; } #reticle:before { content:''; position:absolute; inset:5px; border:1px solid transparent; border-radius:50%; opacity:0; transform:scale(1.45); transition:opacity .14s,transform .16s,border-color .16s; } #reticle:after { content:''; position:absolute; left:14px; top:14px; width:4px; height:4px; background:#eafeff; border-radius:50%; box-shadow:0 0 7px #62efff; } #reticle i,#reticle b,#reticle em,#reticle strong { position:absolute; display:block; background:#d8fbff; box-shadow:0 0 5px #62efff; transition:transform .14s,background .14s,box-shadow .14s; } #reticle i { width:2px;height:8px;left:15px;top:0; } #reticle b { width:2px;height:8px;left:15px;bottom:0; } #reticle em { width:8px;height:2px;top:15px;left:0; } #reticle strong { width:8px;height:2px;top:15px;right:0; } #reticle.aiming:before { opacity:.86; transform:scale(.88); border-color:rgba(161,244,255,.78); box-shadow:0 0 8px rgba(80,225,255,.44),inset 0 0 7px rgba(80,225,255,.18); } #reticle.aiming i { transform:translateY(3px); } #reticle.aiming b { transform:translateY(-3px); } #reticle.aiming em { transform:translateX(3px); } #reticle.aiming strong { transform:translateX(-3px); } #reticle.caster:before { border-color:rgba(255,156,102,.88); box-shadow:0 0 9px rgba(255,92,69,.54),inset 0 0 8px rgba(255,135,78,.20); } #reticle.caster:after,#reticle.caster i,#reticle.caster b,#reticle.caster em,#reticle.caster strong { background:#ffe1be; box-shadow:0 0 7px #ff7c67; } #reticle.hit-confirm:before { opacity:1; transform:scale(1.20) rotate(45deg); border-color:rgba(255,213,248,.98); box-shadow:0 0 12px rgba(255,75,213,.82); transition:none; } #reticle.hit-confirm:after,#reticle.hit-confirm i,#reticle.hit-confirm b,#reticle.hit-confirm em,#reticle.hit-confirm strong { background:#ffe1fa; box-shadow:0 0 10px #ff4fd3; transition:none; }
#targetTelemetry { position:absolute; top:calc(50% - 55px); left:50%; z-index:7; width:190px; padding:4px 8px 6px; transform:translate(-50%,-4px); opacity:0; color:#dffcff; background:linear-gradient(90deg,transparent,rgba(3,18,30,.76) 14%,rgba(3,18,30,.76) 86%,transparent); text-align:center; font:700 8px Orbitron,sans-serif; letter-spacing:.12em; text-shadow:0 1px 8px #00131d; transition:opacity .14s ease-out,transform .14s ease-out,color .14s; } #targetTelemetry.show { opacity:1; transform:translate(-50%,0); } #targetTelemetry small { display:block; margin-bottom:2px; color:rgba(128,220,237,.72); font-size:6px; letter-spacing:.24em; } #targetTelemetry header { display:flex; align-items:center; justify-content:space-between; gap:8px; } #targetTelemetry span { min-width:0; overflow:hidden; color:#a9ecf7; text-align:left; text-overflow:ellipsis; white-space:nowrap; } #targetTelemetry b { flex:none; color:#fff; font-size:8px; letter-spacing:.08em; } #targetTelemetry .target-integrity { height:4px; margin-top:4px; overflow:hidden; border:1px solid rgba(185,245,255,.56); background:rgba(1,10,18,.72); transform:skewX(-15deg); } #targetTelemetry i { display:block; width:100%; height:100%; transform-origin:left center; background:linear-gradient(90deg,#36bdd2,#9ff8ff); box-shadow:0 0 9px rgba(112,239,255,.75); transition:transform .10s ease-out; } #targetTelemetry.warning { color:#ffd49b; } #targetTelemetry.warning span { color:#ffcb83; } #targetTelemetry.warning i { background:linear-gradient(90deg,#e9893c,#ffe2a1); box-shadow:0 0 9px rgba(255,158,70,.7); } #targetTelemetry.critical { color:#ffc0b7; } #targetTelemetry.critical span { color:#ffac9e; } #targetTelemetry.critical i { background:linear-gradient(90deg,#d94c4e,#ffb08b); box-shadow:0 0 9px rgba(255,93,80,.72); } body.helmet-off #targetTelemetry { display:none; } @media (max-width:760px) { #targetTelemetry { top:calc(50% - 46px); width:min(170px,48vw); padding:3px 6px 5px; font-size:8px; } #targetTelemetry small { font-size:6px; letter-spacing:.18em; } #targetTelemetry b { font-size:8px; } #targetTelemetry .target-integrity { height:3px; margin-top:3px; } } @media (prefers-reduced-motion:reduce) { #targetTelemetry,#targetTelemetry i { transition:none; } }
/* Original helmet-mounted display: an actual curved aperture, not translucent side columns. */
#suitVisor { position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.43; transition:opacity .18s,filter .16s; } #suitVisor:before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%,transparent 48%,rgba(0,8,17,.022) 71%,rgba(0,4,10,.15) 100%); } .visor-frame { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .visor-brow-fill,.visor-cheek-fill,.visor-chin-fill { fill:rgba(1,8,16,.28); } .visor-outline { fill:none; stroke:rgba(109,235,255,.63); stroke-width:2.1; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(51,209,255,.40)); } .visor-accent { fill:none; stroke:rgba(181,249,255,.82); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linecap:round; } .visor-ticks { fill:none; stroke:rgba(95,221,248,.46); stroke-width:1; vector-effect:non-scaling-stroke; } .visor-lens { position:absolute; inset:5.5% 8.5% 8%; border:1px solid transparent; border-top-color:rgba(138,239,255,.10); border-radius:50% 50% 44% 44%/15% 15% 7% 7%; box-shadow:inset 0 13px 26px -24px rgba(139,236,255,.7),inset 0 -18px 35px -33px rgba(65,197,255,.7); } .visor-readout { position:absolute; top:23%; width:clamp(24px,4vw,62px); height:2px; background:linear-gradient(90deg,transparent,rgba(118,238,255,.7)); box-shadow:0 8px 0 -1px rgba(109,224,250,.44),0 16px 0 -1px rgba(109,224,250,.24); opacity:.36; } .visor-readout-left { left:clamp(20px,7.9vw,140px); transform:skewY(-17deg); } .visor-readout-right { right:clamp(20px,7.9vw,140px); transform:scaleX(-1) skewY(-17deg); } #suitVisor.aiming { opacity:.66; filter:drop-shadow(0 0 6px rgba(84,226,255,.30)); } #suitVisor.aiming .visor-brow-fill,#suitVisor.aiming .visor-cheek-fill,#suitVisor.aiming .visor-chin-fill { fill:rgba(1,9,19,.40); } #suitVisor.aiming .visor-outline { stroke:rgba(142,243,255,.78); } #suitVisor.aiming .visor-lens { border-top-color:rgba(142,244,255,.18); box-shadow:inset 0 16px 28px -24px rgba(162,243,255,.75),inset 0 -18px 35px -31px rgba(76,204,255,.7); } #suitVisor.shield-hit { animation:visorShieldHit .32s ease-out; } #suitVisor.health-hit { animation:visorHealthHit .38s ease-out; } #suitVisor.shield-low { opacity:.62; } #suitVisor.shield-low .visor-outline { stroke:rgba(255,166,91,.88); } #suitVisor.shield-low .visor-accent { stroke:rgba(255,210,154,.84); } @keyframes visorShieldHit { 0% { opacity:.95; filter:brightness(2.2) drop-shadow(0 0 18px #55eaff); } 100% { opacity:.43; filter:none; } } @keyframes visorHealthHit { 0% { opacity:.95; filter:sepia(1) saturate(2.5) drop-shadow(0 0 16px #ff5454); } 100% { opacity:.43; filter:none; } }
#powerSlideFx { position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity .12s ease-out; pointer-events:none; mask-image:radial-gradient(ellipse at 50% 50%,transparent 28%,#000 72%); -webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent 28%,#000 72%); backdrop-filter:blur(2px) saturate(1.09); } #powerSlideFx:before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 35%,rgba(42,176,220,.08) 66%,rgba(2,13,25,.28) 100%); } #powerSlideFx.active { opacity:1; } #powerSlideFx i { position:absolute; display:block; width:2px; height:13vh; opacity:.72; background:linear-gradient(transparent,rgba(173,246,255,.90),transparent); box-shadow:0 0 7px rgba(101,230,255,.55); transform:rotate(var(--angle)) scaleY(.08); transform-origin:center; } #powerSlideFx.active i { animation:slideStreak .30s linear infinite; } #powerSlideFx i:nth-child(1){left:8%;top:11%;--angle:-42deg;animation-delay:-.08s} #powerSlideFx i:nth-child(2){left:20%;top:64%;--angle:-58deg;animation-delay:-.18s} #powerSlideFx i:nth-child(3){left:84%;top:15%;--angle:46deg;animation-delay:-.12s} #powerSlideFx i:nth-child(4){left:92%;top:63%;--angle:64deg;animation-delay:-.23s} #powerSlideFx i:nth-child(5){left:34%;top:4%;--angle:-12deg;animation-delay:-.04s} #powerSlideFx i:nth-child(6){left:68%;top:6%;--angle:14deg;animation-delay:-.20s} #powerSlideFx i:nth-child(7){left:3%;top:43%;--angle:-82deg;animation-delay:-.14s} #powerSlideFx i:nth-child(8){left:97%;top:41%;--angle:82deg;animation-delay:-.26s} @keyframes slideStreak { 0% { transform:rotate(var(--angle)) scaleY(.06); opacity:0; } 18% { opacity:.78; } 100% { transform:rotate(var(--angle)) scaleY(2.25) translateY(5vh); opacity:0; } }
.bottom-left { position:absolute; bottom:26px; left:28px; width:260px; } .meter-label { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font:600 10px Orbitron,sans-serif; letter-spacing:.14em; } .meter-label b { font-size:13px; } .meter { width:100%; height:7px; margin-top:4px; border:1px solid rgba(180,238,255,.45); background:rgba(3,10,17,.62); transform:skewX(-18deg); overflow:hidden; } .meter div { height:100%; width:100%; transform-origin:left center; transition:transform .18s; } .shield div { background:linear-gradient(90deg,#219eff,#8df7ff); box-shadow:0 0 12px #59e8ff; } .health div { background:linear-gradient(90deg,#e75257,#ffb24f); box-shadow:0 0 12px #ff7048; }
.bottom-center { position:absolute; right:278px; bottom:22px; min-width:196px; padding:8px 12px 5px; border-right:2px solid rgba(98,239,255,.72); background:linear-gradient(90deg,rgba(3,13,24,.05),rgba(4,18,31,.72)); text-align:right; } #weaponName { color:#8eeeff; font:600 11px Orbitron,sans-serif; letter-spacing:.18em; } .ammo-label { margin-top:4px; color:#6f9eae; font:600 8px Orbitron,sans-serif; letter-spacing:.17em; } .ammo { display:flex; justify-content:flex-end; align-items:baseline; gap:6px; margin-top:0; font-family:Orbitron,sans-serif; } .ammo b { color:#fff; font-size:39px; line-height:1; } .ammo span { color:#6e9aaa; } .ammo em { color:#97c7d6; font-size:16px; font-style:normal; } #reload { height:13px; margin-top:2px; font:600 10px Orbitron,sans-serif; color:var(--orange); opacity:0; transition:opacity .15s; } #reload.show { opacity:1; }
.bottom-right { position:absolute; display:flex; gap:8px; right:27px; bottom:28px; } .weapon-slot { width:112px; padding:8px; border:1px solid rgba(133,198,218,.35); background:rgba(3,12,23,.45); color:#78a4b4; font:600 10px Orbitron,sans-serif; } .weapon-slot.active { border-color:var(--cyan); color:#eaffff; background:rgba(32,142,196,.18); box-shadow:inset 0 0 16px rgba(77,222,255,.14); } .weapon-slot kbd { display:block; color:inherit; margin-bottom:4px; font:700 16px Orbitron,sans-serif; }
#message { position:absolute; top:13.5%; left:50%; min-width:min(440px,70vw); padding:8px 23px 9px; transform:translateX(-50%) translateY(-6px); border-top:1px solid rgba(109,227,247,.46); border-bottom:1px solid rgba(109,227,247,.20); background:linear-gradient(90deg,transparent,rgba(3,18,30,.45) 18%,rgba(3,18,30,.45) 82%,transparent); text-align:center; font-family:Orbitron,sans-serif; opacity:0; transition:opacity .20s,transform .20s; } #message:before,#message:after { content:''; position:absolute; top:-1px; width:19px; height:19px; border-top:2px solid currentColor; } #message:before { left:10%; border-left:2px solid currentColor; } #message:after { right:10%; border-right:2px solid currentColor; } #message .message-channel { display:block; color:#83ddea; font:600 8px Orbitron,sans-serif; letter-spacing:.30em; opacity:.72; } #message strong { display:block; margin-top:3px; color:#effcff; font:600 clamp(10px,1.1vw,14px) Orbitron,sans-serif; letter-spacing:.14em; text-shadow:0 0 9px rgba(91,230,255,.42); } #message.show { opacity:1; transform:translateX(-50%) translateY(0); } #message[data-tone="combat"] { color:#6eeaff; } #message[data-tone="system"] { color:#8df7c8; } #message[data-tone="alert"] { color:#ffad89; border-top-color:rgba(255,137,108,.78); border-bottom-color:rgba(255,137,108,.28); } #message[data-tone="alert"] .message-channel { color:#ffb093; } #message[data-tone="alert"] strong { color:#ffe9dc; text-shadow:0 0 10px rgba(255,109,82,.46); } #damage,#shieldDamage { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .12s; mix-blend-mode:screen; } #damage { background:radial-gradient(transparent 35%,rgba(255,24,30,.38)); } #shieldDamage { background:radial-gradient(transparent 39%,rgba(45,188,255,.42)); } #shieldDepleted { position:absolute; top:21%; left:50%; z-index:1; width:min(380px,64vw); padding:9px 18px; transform:translateX(-50%); pointer-events:none; text-align:center; opacity:0; color:#ffd8c7; font-family:Orbitron,sans-serif; letter-spacing:.19em; border-top:1px solid rgba(255,115,85,.72); border-bottom:1px solid rgba(255,115,85,.32); background:linear-gradient(90deg,transparent,rgba(72,9,8,.48),transparent); text-shadow:0 0 10px rgba(255,107,80,.60); } #shieldDepleted:before,#shieldDepleted:after { content:''; position:absolute; top:50%; width:14px; height:14px; transform:translateY(-50%) rotate(45deg); border:1px solid rgba(255,151,117,.72); } #shieldDepleted:before { left:7px; } #shieldDepleted:after { right:7px; } #shieldDepleted span { display:block; font-size:clamp(11px,1.25vw,15px); font-weight:800; } #shieldDepleted small { display:block; margin-top:5px; color:#ffb59b; font-size:8px; font-weight:700; letter-spacing:.28em; } #shieldDepleted.show { animation:shieldDepleted 1.18s ease-out; } .meter.hit { animation:meterHit .32s ease-out; } .shield.hit { border-color:#a6f7ff; box-shadow:0 0 17px rgba(99,231,255,.82); } .shield.depleted { border-color:rgba(255,128,106,.9); box-shadow:0 0 12px rgba(255,79,61,.56); } .shield.depleted div { background:linear-gradient(90deg,#6c2933,#eb5e51); box-shadow:0 0 10px rgba(255,75,59,.72); } .health.hit { border-color:#ff9a87; box-shadow:0 0 17px rgba(255,82,69,.82); } @keyframes meterHit { 0% { filter:brightness(1); } 25% { filter:brightness(2.35); } 100% { filter:brightness(1); } } @keyframes shieldDepleted { 0% { opacity:0; transform:translateX(-50%) scale(1.04); } 13% { opacity:1; transform:translateX(-50%) scale(1); } 67% { opacity:1; transform:translateX(-50%) scale(1); } 100% { opacity:0; transform:translateX(-50%) scale(.985); } }
.overlay { position:fixed; inset:0; z-index:4; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,rgba(11,51,80,.58),rgba(2,7,15,.9)); transition:opacity .25s; } .overlay.hidden { display:none; }
#startScreen { background:radial-gradient(ellipse at 50% 38%,rgba(22,79,111,.29),rgba(3,12,23,.76) 46%,rgba(1,5,11,.94)); }
body.intro-active #startScreen { pointer-events:none; }
#startScreen .panel { border-color:rgba(119,228,255,.42); background:linear-gradient(125deg,rgba(5,20,34,.76),rgba(3,10,21,.72)); box-shadow:0 0 0 1px rgba(76,199,239,.06),0 18px 100px rgba(0,8,19,.44),inset 0 0 55px rgba(56,218,255,.05); opacity:1; transform:translateY(0) scale(1); transition:opacity 720ms cubic-bezier(.2,.8,.2,1),transform 720ms cubic-bezier(.2,.8,.2,1); }
body.intro-active #startScreen .panel { opacity:0; transform:translateY(18px) scale(.985); }
body.intro-complete #startScreen .panel { opacity:1; transform:translateY(0) scale(1); }
#startScreen #playButton { min-width:236px; padding:17px 34px; background:linear-gradient(180deg,#2a8bbd,#105170); box-shadow:0 0 28px rgba(54,221,255,.24),inset 0 0 18px rgba(136,240,255,.18); }
#startScreen #playButton:hover { box-shadow:0 0 38px rgba(98,239,255,.44),inset 0 0 22px rgba(188,250,255,.22); }
.panel { width:min(680px,92vw); padding:48px 54px 42px; text-align:center; border:1px solid rgba(111,224,255,.48); background:linear-gradient(125deg,rgba(7,28,45,.93),rgba(4,12,25,.94)); box-shadow:0 0 0 4px rgba(40,155,208,.07),0 0 80px rgba(0,149,255,.16),inset 0 0 50px rgba(56,218,255,.06); clip-path:polygon(0 22px,22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px)); } .panel.compact { width:min(430px,90vw); }
.eyebrow { font:600 10px Orbitron,sans-serif; letter-spacing:.28em; color:#6ddcf5; } h1,h2 { margin:12px 0 6px; color:#fff; font:800 clamp(42px,8vw,76px)/.86 Orbitron,sans-serif; letter-spacing:.07em; text-shadow:0 0 28px rgba(80,220,255,.34); } h1 span { color:var(--cyan); } h2 { font-size:36px; color:#ffb05c; } .tagline,.panel p { color:#b9d3df; font-size:15px; letter-spacing:.03em; } .click-note { margin:10px 0 0; font-size:11px!important; color:#6f9fb0!important; }
button { pointer-events:auto; margin-top:23px; padding:15px 34px; border:1px solid #7ef2ff; background:linear-gradient(180deg,#247cb5,#125075); color:white; cursor:pointer; font:700 13px Orbitron,sans-serif; letter-spacing:.15em; box-shadow:0 0 22px rgba(54,221,255,.25),inset 0 0 18px rgba(136,240,255,.18); transition:transform .15s,filter .15s; } button:hover { transform:translateY(-2px); filter:brightness(1.2); } button:active { transform:translateY(1px); }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:29px; padding-top:21px; border-top:1px solid rgba(110,212,242,.22); text-align:left; } .controls div { display:flex; flex-direction:column; gap:2px; padding:4px 11px; } .controls b { color:#6edff5; font:600 10px Orbitron,sans-serif; } .controls span { color:#d9f6fb; font-size:12px; font-weight:600; letter-spacing:.06em; }
@media (max-width:620px) { .panel { padding:38px 24px 31px; } .bottom-right { display:none; } .bottom-left { width:175px; left:14px; bottom:16px; } .brand,.objective { left:14px; } .top-right { right:14px; } .bottom-center { right:14px; bottom:14px; min-width:160px; transform:scale(.8); transform-origin:bottom right; } .controls { font-size:9px; } }
.energy div { background:linear-gradient(90deg,#4c6cff,#66e5ff); box-shadow:0 0 12px #5baeff; }

/* Centered suit deck: one connected lower console instead of corner widgets. */
#missionTelemetry { position:absolute; z-index:2; top:15px; left:50%; min-width:260px; padding:6px 22px 8px; transform:translateX(-50%); text-align:center; border-bottom:1px solid rgba(99,226,248,.44); background:linear-gradient(90deg,transparent,rgba(3,19,33,.56) 18%,rgba(3,19,33,.56) 82%,transparent); clip-path:polygon(0 0,100% 0,94% 100%,6% 100%); } #missionTelemetry:before,#missionTelemetry:after { content:''; position:absolute; bottom:0; width:24px; height:9px; border-bottom:2px solid rgba(132,242,255,.74); } #missionTelemetry:before { left:6%; border-left:1px solid rgba(132,242,255,.45); } #missionTelemetry:after { right:6%; border-right:1px solid rgba(132,242,255,.45); } .telemetry-kicker { color:#79cfdf; font:600 7px Orbitron,sans-serif; letter-spacing:.31em; opacity:.74; } #missionTelemetry #timer { margin:1px 0 2px; color:#fff; font:600 19px/1 Orbitron,sans-serif; letter-spacing:.17em; } #missionTelemetry #objectiveText { color:#bcecf4; font:600 8px Orbitron,sans-serif; letter-spacing:.14em; white-space:nowrap; } #missionTelemetry #kills { margin-top:3px; color:#67dcf0; font:600 8px Orbitron,sans-serif; letter-spacing:.23em; } #bossHud { top:105px; }
#combatDeck { position:absolute; z-index:2; left:50%; bottom:18px; display:grid; grid-template-columns:minmax(195px,238px) minmax(190px,228px) minmax(166px,202px); gap:7px; width:min(700px,calc(100vw - 36px)); transform:translateX(-50%); align-items:stretch; } #combatDeck > section { position:static; min-width:0; margin:0; padding:9px 11px 8px; border:1px solid rgba(104,224,244,.36); background:linear-gradient(135deg,rgba(5,21,35,.76),rgba(3,11,21,.57)); box-shadow:inset 0 0 20px rgba(78,219,247,.045),0 8px 24px rgba(0,0,0,.18); clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px)); } .deck-title { margin-bottom:6px; color:#6fdbe9; font:600 7px Orbitron,sans-serif; letter-spacing:.25em; opacity:.84; } #combatDeck .bottom-left { width:auto; } #combatDeck .meter-label { margin-top:4px; font-size:8px; letter-spacing:.12em; } #combatDeck .meter-label:first-of-type { margin-top:0; } #combatDeck .meter-label b { font-size:11px; } #combatDeck .meter { height:5px; margin-top:2px; transform:skewX(-13deg); } #combatDeck .bottom-center { right:auto; bottom:auto; min-width:0; border-right:0; text-align:center; background:linear-gradient(135deg,rgba(7,32,50,.84),rgba(4,15,28,.68)); } #combatDeck #weaponName { color:#a3f4ff; font-size:9px; letter-spacing:.14em; } #combatDeck .ammo-label { margin-top:4px; font-size:7px; letter-spacing:.14em; } #combatDeck .ammo { justify-content:center; margin-top:1px; } #combatDeck .ammo b { font-size:34px; } #combatDeck .ammo em { font-size:13px; } #combatDeck #reload { height:10px; font-size:8px; } #combatDeck .bottom-right { right:auto; bottom:auto; display:grid; grid-template-columns:1fr 1fr; gap:5px; } #combatDeck .weapon-select .deck-title { grid-column:1/-1; } #combatDeck .weapon-slot { width:auto; min-height:48px; padding:7px 5px; text-align:center; font-size:7px; } #combatDeck .weapon-slot kbd { margin-bottom:3px; font-size:13px; } #combatDeck .weapon-slot.active { box-shadow:inset 0 0 16px rgba(77,222,255,.18),0 0 10px rgba(65,215,246,.13); }
@media (max-width:760px) { #missionTelemetry { top:8px; min-width:226px; padding:5px 16px 7px; } #missionTelemetry #timer { font-size:16px; } #missionTelemetry #objectiveText,#missionTelemetry #kills { font-size:6px; } #bossHud { top:87px; } #combatDeck { bottom:10px; grid-template-columns:1.12fr 1fr .90fr; gap:4px; width:calc(100vw - 16px); } #combatDeck > section { padding:6px 7px; } #combatDeck .deck-title { font-size:5px; letter-spacing:.16em; } #combatDeck .meter-label { font-size:6px; } #combatDeck .meter-label b { font-size:8px; } #combatDeck #weaponName { font-size:7px; } #combatDeck .ammo b { font-size:26px; } #combatDeck .weapon-slot { min-height:39px; padding:5px 3px; font-size:5px; } #combatDeck .weapon-slot kbd { font-size:10px; } }

/* Low-profile visor console: all combat data now nests inside the lower suit-frame rather than standing above it. */
#combatDeck { bottom:7px; width:min(830px,calc(100vw - 72px)); grid-template-columns:1.20fr .92fr .94fr; gap:2px; padding:4px 14px 6px; border-top:1px solid rgba(110,229,248,.50); background:linear-gradient(90deg,transparent 0%,rgba(3,18,32,.54) 10%,rgba(5,25,41,.76) 50%,rgba(3,18,32,.54) 90%,transparent 100%); box-shadow:0 -8px 24px rgba(15,148,196,.08); }
#combatDeck:before,#combatDeck:after { content:''; position:absolute; top:-1px; width:48px; height:9px; border-top:2px solid rgba(151,243,255,.78); opacity:.72; } #combatDeck:before { left:2.5%; border-left:1px solid rgba(112,224,245,.58); transform:skewX(-36deg); } #combatDeck:after { right:2.5%; border-right:1px solid rgba(112,224,245,.58); transform:skewX(36deg); }
#combatDeck > section { min-height:48px; padding:4px 8px 3px; border:0; border-left:1px solid rgba(104,224,244,.19); background:linear-gradient(135deg,rgba(12,41,59,.31),rgba(1,8,18,.16)); box-shadow:inset 0 1px 14px rgba(87,229,249,.05); clip-path:none; }
#combatDeck > section:first-child { border-left:0; }
#combatDeck .deck-title { margin:0; color:#a1effa; font-size:6px; line-height:9px; letter-spacing:.25em; text-shadow:0 0 7px rgba(111,239,255,.42); }
#combatDeck .suit-status { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:10px 14px 4px; column-gap:8px; align-items:end; }
#combatDeck .suit-status .deck-title { grid-column:1 / -1; }
#combatDeck .suit-status .meter-label { grid-row:2; min-width:0; margin:0; font-size:7px; letter-spacing:.08em; }
#combatDeck .suit-status .meter-label b { font-size:9px; }
#combatDeck .suit-status .meter { grid-row:3; height:3px; margin:0; border-color:rgba(160,239,252,.35); transform:skewX(-17deg); }
#combatDeck .bottom-center { display:grid; grid-template-columns:1fr auto; grid-template-rows:10px 12px 20px; align-items:center; padding-left:12px; text-align:left; background:linear-gradient(135deg,rgba(10,53,72,.42),rgba(1,10,20,.15)); }
#combatDeck .bottom-center .deck-title { grid-column:1 / -1; }
#combatDeck #weaponName { align-self:end; font-size:8px; letter-spacing:.12em; }
#combatDeck .ammo-label { align-self:end; margin:0; font-size:6px; letter-spacing:.11em; }
#combatDeck .ammo { grid-column:2; grid-row:2 / 4; align-self:center; justify-content:flex-end; margin:0; gap:3px; }
#combatDeck .ammo b { font-size:25px; text-shadow:0 0 10px rgba(167,247,255,.35); }
#combatDeck .ammo em { font-size:10px; }
#combatDeck #reload { grid-column:1; grid-row:3; align-self:end; height:8px; margin:0; font-size:6px; letter-spacing:.13em; }
#combatDeck .bottom-right { grid-template-columns:1fr 1fr; grid-template-rows:10px 31px; gap:2px; }
#combatDeck .weapon-select .deck-title { grid-column:1 / -1; }
#combatDeck .weapon-slot { min-height:0; padding:3px 4px; border-color:rgba(108,225,246,.24); background:rgba(3,18,30,.30); font-size:6px; letter-spacing:.08em; }
#combatDeck .weapon-slot kbd { display:inline; margin:0 3px 0 0; font-size:10px; }
#combatDeck .weapon-slot.active { background:linear-gradient(135deg,rgba(56,182,216,.21),rgba(8,57,76,.14)); box-shadow:inset 0 0 10px rgba(78,227,248,.16); }
@media (max-width:760px) { #combatDeck { bottom:4px; width:calc(100vw - 26px); padding:3px 6px 5px; } #combatDeck > section { min-height:42px; padding:3px 5px; } #combatDeck .suit-status { column-gap:4px; } #combatDeck .deck-title { font-size:5px; } #combatDeck .suit-status .meter-label { font-size:5px; } #combatDeck .suit-status .meter-label b { font-size:7px; } #combatDeck #weaponName { font-size:6px; } #combatDeck .ammo b { font-size:20px; } #combatDeck .weapon-slot { font-size:5px; } }

/* Restored suit readout: explicit three-row status list with color-coded charge, health and boost response. */
#combatDeck .suit-status { grid-template-columns:64px 1fr; grid-template-rows:10px repeat(3,15px); column-gap:7px; row-gap:1px; min-height:57px; padding:4px 8px; background:linear-gradient(105deg,rgba(4,22,39,.78),rgba(15,44,57,.30)); }
#combatDeck .suit-status .deck-title { grid-column:1 / -1; grid-row:1; color:#c3f8ff; letter-spacing:.30em; }
#combatDeck .suit-status .meter-label { grid-column:1; display:flex; align-self:center; margin:0; font-size:7px; font-weight:800; letter-spacing:.10em; }
#combatDeck .suit-status .meter-label b { color:#efffff; font-size:10px; text-shadow:0 0 7px currentColor; }
#combatDeck .suit-status .meter-label:before { content:''; width:4px; height:4px; margin-right:5px; border-radius:50%; background:#78edff; box-shadow:0 0 7px #78edff; }
#combatDeck .suit-status .meter-label:nth-of-type(2),#combatDeck .suit-status .meter:nth-of-type(3) { grid-row:2; }
#combatDeck .suit-status .meter-label:nth-of-type(4),#combatDeck .suit-status .meter:nth-of-type(5) { grid-row:3; }
#combatDeck .suit-status .meter-label:nth-of-type(6),#combatDeck .suit-status .meter:nth-of-type(7) { grid-row:4; }
#combatDeck .suit-status .meter { grid-column:2; align-self:center; position:relative; height:6px; margin:0; overflow:hidden; border-color:rgba(193,248,255,.38); border-radius:1px; transform:skewX(-12deg); background:rgba(1,10,20,.78); }
#combatDeck .suit-status .meter:after { content:''; position:absolute; inset:0 auto 0 -38%; width:28%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:suitMeterSweep 2.7s linear infinite; opacity:.54; }
#combatDeck .suit-status .shield { box-shadow:0 0 9px rgba(80,225,255,.26); } #combatDeck .suit-status .health { box-shadow:0 0 9px rgba(255,111,82,.23); } #combatDeck .suit-status .energy { box-shadow:0 0 9px rgba(133,125,255,.23); }
#combatDeck .suit-status .health + .meter-label:before { background:#ff8a68; box-shadow:0 0 7px #ff705b; } #combatDeck .suit-status .meter-label:nth-of-type(6):before { background:#8e9bff; box-shadow:0 0 7px #7186ff; }
#combatDeck .suit-status .energy div { background:linear-gradient(90deg,#536dff,#9bf0ff); box-shadow:0 0 12px #6caeff; }
#combatDeck .suit-status .meter.hit { animation:suitStatusImpact .42s ease-out; } #combatDeck .suit-status .shield.depleted { animation:suitStatusAlert .80s steps(2,end) infinite; }
@keyframes suitMeterSweep { 0% { transform:translateX(0); } 100% { transform:translateX(510%); } } @keyframes suitStatusImpact { 0% { filter:brightness(1); } 30% { filter:brightness(2.8) saturate(1.8); } 100% { filter:brightness(1); } } @keyframes suitStatusAlert { 50% { filter:brightness(1.7); border-color:#ff816a; } }
@media (max-width:760px) { #combatDeck .suit-status { grid-template-columns:49px 1fr; grid-template-rows:8px repeat(3,11px); min-height:45px; column-gap:4px; padding:3px 4px; } #combatDeck .suit-status .meter-label { font-size:5px; } #combatDeck .suit-status .meter-label b { font-size:7px; } #combatDeck .suit-status .meter { height:4px; } }

/* Larger but contained upper telemetry; it stays clear of the centered helmet-comms notification channel. */
#missionTelemetry { top:11px; min-width:330px; padding:8px 28px 10px; } #missionTelemetry .telemetry-kicker { font-size:8px; } #missionTelemetry #timer { margin:2px 0 4px; font-size:26px; letter-spacing:.19em; text-shadow:0 0 12px rgba(145,241,255,.42); } #missionTelemetry #objectiveText { font-size:10px; letter-spacing:.16em; } #missionTelemetry #kills { margin-top:4px; font-size:10px; letter-spacing:.24em; }

/* Dedicated radial boost module: a compact ability decision point beside the status list, not another long bar. */
#combatDeck { width:min(900px,calc(100vw - 48px)); grid-template-columns:62px 1.20fr .92fr .94fr; align-items:center; } #combatDeck > section:first-child { border-left:1px solid rgba(104,224,244,.19); }
#jetBoostDial { position:relative; width:56px; height:56px; justify-self:center; border-radius:50%; background:radial-gradient(circle at 42% 33%,rgba(72,222,255,.16),rgba(2,16,31,.88) 64%); box-shadow:inset 0 0 16px rgba(83,225,255,.12),0 0 12px rgba(44,190,237,.15); }
#jetBoostDial:before { content:''; position:absolute; inset:3px; border:1px solid rgba(131,238,255,.44); border-radius:50%; box-shadow:0 0 8px rgba(88,227,255,.24); } #jetBoostDial:after { content:''; position:absolute; inset:9px; border:1px solid rgba(143,239,255,.16); border-radius:50%; }
#energyBar { --charge:0deg; position:absolute; inset:0; z-index:1; border-radius:50%; background:conic-gradient(from -90deg,#4ad8ff 0deg,var(--charge),rgba(47,108,141,.23) var(--charge),rgba(47,108,141,.23) 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px)); mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px)); filter:drop-shadow(0 0 4px rgba(78,225,255,.58)); transition:background .18s,filter .18s; }
.jet-readout { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .jet-readout b { color:#d9fbff; font:800 12px Orbitron,sans-serif; text-shadow:0 0 7px rgba(104,234,255,.74); } .jet-readout small { margin-top:3px; color:#7bd9eb; font:700 6px Orbitron,sans-serif; letter-spacing:.20em; }
#jetBoostDial.ready { background:radial-gradient(circle at 42% 33%,rgba(205,175,255,.34),rgba(25,18,64,.90) 64%); animation:jetDialReady 1.05s ease-in-out infinite; } #jetBoostDial.ready #energyBar { background:conic-gradient(from -90deg,#d9a7ff 0deg,#6b85ff 180deg,#d9a7ff 360deg); filter:drop-shadow(0 0 7px rgba(188,135,255,.88)); } #jetBoostDial.ready .jet-readout b { color:#f0d7ff; text-shadow:0 0 10px rgba(207,133,255,.92); }
#suitVisor.jet-ready { opacity:.58; filter:drop-shadow(0 0 7px rgba(153,119,255,.35)); } #suitVisor.jet-ready .visor-accent { stroke:rgba(202,171,255,.90); animation:visorJetReady 1.05s ease-in-out infinite; }
@keyframes jetDialReady { 50% { transform:scale(1.055); box-shadow:inset 0 0 21px rgba(188,135,255,.34),0 0 19px rgba(157,108,255,.42); } } @keyframes visorJetReady { 50% { stroke:rgba(239,222,255,1); filter:drop-shadow(0 0 5px #c990ff); } }

/* The status list retains just its always-active vital information once boost moves to the radial module. */
#combatDeck .suit-status { grid-template-rows:10px repeat(2,15px); min-height:42px; } #combatDeck .suit-status .meter-label:nth-of-type(6),#combatDeck .suit-status .meter:nth-of-type(7) { display:none; }
@media (max-width:760px) { #missionTelemetry { top:7px; min-width:250px; padding:5px 15px 7px; } #missionTelemetry .telemetry-kicker { font-size:6px; } #missionTelemetry #timer { font-size:19px; } #missionTelemetry #objectiveText,#missionTelemetry #kills { font-size:7px; } #combatDeck { width:calc(100vw - 18px); grid-template-columns:47px 1.17fr 1fr .92fr; } #jetBoostDial { width:42px; height:42px; } .jet-readout b { font-size:9px; } .jet-readout small { font-size:5px; } #combatDeck .suit-status { grid-template-columns:48px 1fr; grid-template-rows:8px repeat(2,11px); min-height:31px; } }

/* Direct-read combat deck: labels are deliberately larger now that category headers have been removed. */
#combatDeck .suit-status { grid-template-columns:72px 1fr; grid-template-rows:22px 22px; min-height:48px; row-gap:2px; padding:4px 9px; }
#combatDeck .suit-status .deck-title { display:none; }
#combatDeck .suit-status .meter-label { grid-column:1; font-size:9px; letter-spacing:.12em; }
#combatDeck .suit-status .meter-label b { font-size:13px; }
#combatDeck .suit-status .meter-label:nth-child(1),#combatDeck .suit-status .meter:nth-child(2) { grid-row:1; }
#combatDeck .suit-status .meter-label:nth-child(3),#combatDeck .suit-status .meter:nth-child(4) { grid-row:2; }
#combatDeck .suit-status .meter { grid-column:2; height:8px; }
#combatDeck .bottom-center { grid-template-columns:1fr auto; grid-template-rows:17px 23px 9px; min-height:48px; padding:5px 11px 4px; }
#combatDeck .bottom-center .deck-title,#combatDeck .weapon-select .deck-title { display:none; }
#combatDeck #weaponName { grid-column:1; grid-row:1; align-self:end; transform:translateY(5px); font-size:12px; font-weight:800; letter-spacing:.13em; text-shadow:0 0 10px rgba(150,242,255,.48); }
#combatDeck .ammo-label { grid-column:1; grid-row:2; font-size:7px; letter-spacing:.13em; }
#combatDeck .ammo { grid-column:2; grid-row:1 / 3; }
#combatDeck .ammo b { font-size:28px; }
#combatDeck #reload { grid-column:1; grid-row:3; font-size:7px; }
#combatDeck .bottom-right { grid-template-columns:1fr 1fr; grid-template-rows:48px; align-items:stretch; }
#combatDeck .weapon-slot { display:flex; align-items:center; justify-content:center; min-height:0; padding:4px; font-size:9px; font-weight:800; letter-spacing:.08em; line-height:1.15; }
#combatDeck .weapon-slot kbd { flex:0 0 auto; font-size:12px; }
#combatDeck .weapon-slot span { max-width:68px; }
#combatDeck .bottom-right.weapon-select { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) { #combatDeck .suit-status { grid-template-columns:56px 1fr; grid-template-rows:16px 16px; min-height:36px; padding:3px 5px; } #combatDeck .suit-status .meter-label { font-size:6px; } #combatDeck .suit-status .meter-label b { font-size:9px; } #combatDeck .suit-status .meter { height:5px; } #combatDeck .bottom-center { grid-template-rows:12px 18px 7px; min-height:37px; padding:3px 6px; } #combatDeck #weaponName { transform:translateY(3px); font-size:7px; } #combatDeck .ammo-label,#combatDeck #reload { font-size:5px; } #combatDeck .ammo b { font-size:21px; } #combatDeck .bottom-right { grid-template-rows:37px; } #combatDeck .weapon-slot { font-size:6px; } #combatDeck .weapon-slot kbd { font-size:9px; } #combatDeck .weapon-slot span { max-width:43px; } }

/* Compact combat-only reticle feedback. */
#infernoLock {position:fixed;display:none;pointer-events:none;z-index:8;transform:translate(-50%,-50%);color:#e9a64f;filter:drop-shadow(0 0 2px #8e4519);}
#infernoLock i {position:absolute;width:8px;height:8px;border:solid currentColor;border-width:1px 0 0 1px;}
#infernoLock i:nth-child(1) {left:0;top:0;}
#infernoLock i:nth-child(2) {right:0;top:0;transform:rotate(90deg);}
#infernoLock i:nth-child(3) {right:0;bottom:0;transform:rotate(180deg);}
#infernoLock i:nth-child(4) {left:0;bottom:0;transform:rotate(270deg);}
#infernoLock b {position:absolute;bottom:-5px;left:25%;width:50%;height:1px;background:currentColor;transform:scaleX(var(--progress));transform-origin:center;}
#infernoLock.locked {color:#ffd18a;}
#infernoLock.locked i {border-width:2px 0 0 2px;width:7px;height:7px;}
#reticle {width:24px;height:24px;} #reticle:after {left:11px;top:11px;width:2px;height:2px;} #reticle i,#reticle b {left:11px;width:1px;height:5px;} #reticle em,#reticle strong {top:11px;height:1px;width:5px;} #reticle.kill-confirm:before {border-color:#ffb98d;transform:scale(1.3) rotate(45deg);}

#mobileControls { display:none; --mobile-control-scale:1; --mobile-control-x:0px; --mobile-control-y:0px; }
@media (pointer: coarse) {
  html,body { touch-action:none; overscroll-behavior:none; }
  body.touch-ready #mobileControls { position:fixed; inset:0; z-index:7; display:block; pointer-events:none; transform:translate(var(--mobile-control-x),var(--mobile-control-y)); }
  body.touch-ready #mobileControls * { -webkit-tap-highlight-color:transparent; }
  .mobile-look { position:absolute; inset:0 0 0 38%; pointer-events:auto; touch-action:none; }
  .mobile-stick { position:absolute; left:max(22px,calc(env(safe-area-inset-left) + 8px)); bottom:max(96px,calc(env(safe-area-inset-bottom) + 82px)); width:142px; height:142px; border-radius:50%; pointer-events:auto; touch-action:none; background:radial-gradient(circle,rgba(229,252,255,.12),rgba(91,217,255,.13) 42%,rgba(6,25,42,.34) 62%,rgba(1,7,14,.20)); border:1px solid rgba(209,250,255,.30); box-shadow:inset 0 0 30px rgba(94,224,255,.10),0 0 22px rgba(0,0,0,.26); transform:translate(var(--button-x,0),var(--button-y,0)) scale(var(--button-scale,1)); }
  .mobile-stick i { position:absolute; inset:24px; border:1px solid rgba(216,252,255,.25); border-radius:50%; box-shadow:inset 0 0 16px rgba(119,235,255,.08); }
  .mobile-stick span { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(226,253,255,.24); border:1px solid rgba(241,255,255,.76); box-shadow:0 0 20px rgba(113,235,255,.44),inset 0 0 12px rgba(255,255,255,.10); }
  .mobile-fire-left { position:absolute; left:max(176px,calc(env(safe-area-inset-left) + 164px)); bottom:max(132px,calc(env(safe-area-inset-bottom) + 118px)); pointer-events:auto; }
  .mobile-fire-left button { width:58px; height:58px; margin:0; padding:0; border-radius:50%; opacity:.58; border:1px solid rgba(255,196,143,.52); background:rgba(123,41,31,.38); color:#fff0df; font:800 9px Orbitron,sans-serif; letter-spacing:.05em; box-shadow:0 0 18px rgba(255,107,75,.16); }
  .mobile-actions { position:absolute; right:max(18px,calc(env(safe-area-inset-right) + 10px)); bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px)); width:214px; height:214px; pointer-events:auto; transform:scale(var(--mobile-control-scale)); transform-origin:bottom right; }
  .mobile-actions button { position:absolute; margin:0; padding:0; border-radius:50%; border:1px solid rgba(159,239,255,.56); background:linear-gradient(180deg,rgba(14,57,82,.70),rgba(5,20,34,.54)); color:#effcff; box-shadow:inset 0 0 16px rgba(98,239,255,.12),0 7px 18px rgba(0,0,0,.23); font:800 calc(10px * var(--button-scale,1)) Orbitron,sans-serif; letter-spacing:.06em; display:grid; place-items:center; transform:translate(var(--button-x,0),var(--button-y,0)) scale(var(--button-scale,1)); }
  .mobile-actions button.down,.mobile-actions button:active,.mobile-fire-left button.down,.mobile-fire-left button:active { transform:translateY(1px) scale(.98); filter:brightness(1.25); }
  .mobile-actions .fire { right:16px; bottom:42px; width:82px; height:82px; color:#fff2e8; border-color:rgba(255,181,122,.86); background:radial-gradient(circle at 42% 32%,rgba(255,180,105,.30),rgba(173,64,43,.74) 55%,rgba(76,16,20,.68)); font-size:12px; box-shadow:inset 0 0 20px rgba(255,218,175,.10),0 0 24px rgba(255,91,67,.22); }
  .mobile-actions .ads { right:92px; bottom:102px; width:58px; height:58px; color:#dffbff; }
  .mobile-actions .jump { right:82px; bottom:18px; width:58px; height:58px; }
  .mobile-actions .reload { right:12px; bottom:130px; width:52px; height:52px; }
  .mobile-actions .weapon { right:150px; bottom:58px; width:52px; height:52px; }
  .mobile-actions .tactical { right:128px; bottom:0; width:48px; height:48px; }
  .mobile-actions .slide { right:154px; bottom:116px; width:48px; height:48px; }
  .mobile-actions .grenade { right:68px; bottom:166px; width:46px; height:46px; color:#ffe4bc; border-color:rgba(255,198,119,.62); }
  body:not(.mobile-combat-active) #mobileControls { display:none; }
  body.mobile-combat-active #pauseScreen:not(.hidden) { display:flex; pointer-events:auto; }
  body.mobile-combat-active #timer { pointer-events:auto; cursor:pointer; }
  body.mobile-combat-active #missionTelemetry { pointer-events:auto; padding:14px 22px; margin:-14px -22px; cursor:pointer; }
  body.mobile-combat-active #combatDeck { bottom:calc(env(safe-area-inset-bottom) + 2px); width:calc(100vw - 12px); grid-template-columns:42px 1fr .82fr; padding-inline:4px; }
  body.mobile-combat-active #combatDeck .weapon-select { display:none; }
  body.mobile-combat-active #missionTelemetry { top:calc(env(safe-area-inset-top) + 5px); min-width:220px; }
  body.mobile-combat-active #message { top:16%; min-width:72vw; }
  body.mobile-combat-active #reticle { transform:translate(-50%,-50%) scale(1.2); }
}
/* Halo-inspired transparent energy rail for Minimal and Clean combat views. */
body.helmet-minimal #combatDeck,body.helmet-off #combatDeck{bottom:10px;width:min(650px,calc(100vw - 40px));grid-template-columns:1fr 1.16fr 56px;gap:0;padding:3px 10px 4px;border:1px solid rgba(120,226,247,.34);border-radius:3px;background:linear-gradient(180deg,rgba(5,22,36,.70),rgba(2,9,18,.52));box-shadow:0 0 22px rgba(32,177,222,.12),inset 0 1px rgba(206,249,255,.12);clip-path:none}
body.helmet-minimal #combatDeck:before,body.helmet-minimal #combatDeck:after,body.helmet-off #combatDeck:before,body.helmet-off #combatDeck:after{display:none}
body.helmet-minimal #combatDeck>section,body.helmet-off #combatDeck>section{min-height:34px;padding:2px 8px;border:0;border-left:1px solid rgba(117,218,237,.18);background:transparent;box-shadow:none;clip-path:none}
body.helmet-minimal #combatDeck>section:first-child,body.helmet-off #combatDeck>section:first-child{border-left:0}
body.helmet-minimal #combatDeck .deck-title,body.helmet-off #combatDeck .deck-title,body.helmet-minimal #combatDeck .ammo-label,body.helmet-off #combatDeck .ammo-label,body.helmet-minimal #combatDeck #reload,body.helmet-off #combatDeck #reload{display:none}
body.helmet-minimal #combatDeck .suit-status,body.helmet-off #combatDeck .suit-status{display:grid;grid-template-columns:38px 1fr;grid-template-rows:14px 14px;min-height:30px;gap:2px 6px;padding:1px 8px}
body.helmet-minimal #combatDeck .suit-status .meter-label,body.helmet-off #combatDeck .suit-status .meter-label{font-size:6px;letter-spacing:.12em}
body.helmet-minimal #combatDeck .suit-status .meter-label b,body.helmet-off #combatDeck .suit-status .meter-label b{font-size:8px}
body.helmet-minimal #combatDeck .suit-status .meter,body.helmet-off #combatDeck .suit-status .meter{height:3px}
body.helmet-minimal #combatDeck .bottom-center,body.helmet-off #combatDeck .bottom-center{display:grid;grid-template-columns:1fr auto;grid-template-rows:13px 18px;min-height:30px;padding:1px 10px;text-align:left}
body.helmet-minimal #combatDeck #weaponName,body.helmet-off #combatDeck #weaponName{grid-column:1;grid-row:1;font-size:7px;letter-spacing:.12em;align-self:center}
body.helmet-minimal #combatDeck .ammo,body.helmet-off #combatDeck .ammo{grid-column:2;grid-row:1 / 3;margin:0}
body.helmet-minimal #combatDeck .ammo b,body.helmet-off #combatDeck .ammo b{font-size:22px}
body.helmet-minimal #combatDeck .ammo em,body.helmet-off #combatDeck .ammo em{font-size:9px}
body.helmet-minimal #combatDeck .weapon-select,body.helmet-off #combatDeck .weapon-select{display:none}
body.helmet-minimal #jetBoostDial,body.helmet-off #jetBoostDial{width:30px;height:30px}
body.helmet-minimal .jet-readout b,body.helmet-off .jet-readout b{font-size:7px}
body.helmet-minimal .jet-readout small,body.helmet-off .jet-readout small{font-size:4px}
body.helmet-minimal #combatDeck .meter div,body.helmet-off #combatDeck .meter div{animation:haloEnergyPulse 2.4s ease-in-out infinite}
@keyframes haloEnergyPulse{0%,100%{filter:brightness(.92);box-shadow:0 0 4px currentColor}50%{filter:brightness(1.35);box-shadow:0 0 12px currentColor}}
body.helmet-minimal #combatDeck .meter.hit div,body.helmet-off #combatDeck .meter.hit div{animation:haloEnergyImpact .34s ease-out}
@keyframes haloEnergyImpact{0%{filter:brightness(2.3);box-shadow:0 0 20px currentColor}100%{filter:brightness(1);box-shadow:0 0 4px currentColor}}
@media (max-width:760px){body.helmet-minimal #combatDeck,body.helmet-off #combatDeck{bottom:calc(env(safe-area-inset-bottom) + 3px);width:calc(100vw - 18px);grid-template-columns:1fr 1.18fr 40px;padding:2px 5px 3px}body.helmet-minimal #combatDeck>section,body.helmet-off #combatDeck>section{min-height:29px;padding:1px 4px}body.helmet-minimal #combatDeck .suit-status,body.helmet-off #combatDeck .suit-status{grid-template-columns:30px 1fr;grid-template-rows:12px 12px;min-height:26px;gap:1px 4px;padding:1px 3px}body.helmet-minimal #combatDeck .suit-status .meter-label,body.helmet-off #combatDeck .suit-status .meter-label{font-size:5px}body.helmet-minimal #combatDeck .suit-status .meter-label b,body.helmet-off #combatDeck .suit-status .meter-label b{font-size:7px}body.helmet-minimal #combatDeck .bottom-center,body.helmet-off #combatDeck .bottom-center{min-height:26px;grid-template-rows:11px 15px;padding:1px 5px}body.helmet-minimal #combatDeck #weaponName,body.helmet-off #combatDeck #weaponName{font-size:6px}body.helmet-minimal #combatDeck .ammo b,body.helmet-off #combatDeck .ammo b{font-size:18px}body.helmet-minimal #jetBoostDial,body.helmet-off #jetBoostDial{width:25px;height:25px}}
/* Final readable layout for the compact Halo-style combat deck. */
body.helmet-minimal #combatDeck,body.helmet-off #combatDeck{display:grid;grid-template-columns:48px minmax(168px,1fr) minmax(190px,1.18fr);align-items:center;column-gap:10px;width:min(590px,calc(100vw - 32px));min-height:54px;padding:6px 10px 6px 8px;border:1px solid rgba(129,226,246,.42);border-radius:6px;background:linear-gradient(180deg,rgba(8,30,45,.88),rgba(2,12,23,.78));box-shadow:0 0 24px rgba(32,177,222,.16),inset 0 1px rgba(215,251,255,.16);}
body.helmet-minimal #combatDeck>section,body.helmet-off #combatDeck>section{min-width:0;min-height:42px;padding:4px 10px;border-left:1px solid rgba(117,218,237,.24);overflow:hidden;}
body.helmet-minimal #combatDeck .suit-status,body.helmet-off #combatDeck .suit-status{display:grid;grid-template-columns:54px 1fr;grid-template-rows:18px 18px;gap:4px 8px;align-content:center;min-height:42px;padding:0 10px;}
body.helmet-minimal #combatDeck .suit-status .meter-label,body.helmet-off #combatDeck .suit-status .meter-label{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;margin:0;font-size:8px;letter-spacing:.1em;white-space:nowrap;}
body.helmet-minimal #combatDeck .suit-status .meter-label b,body.helmet-off #combatDeck .suit-status .meter-label b{font-size:11px;}
body.helmet-minimal #combatDeck .suit-status .meter,body.helmet-off #combatDeck .suit-status .meter{align-self:center;height:6px;min-width:0;margin:0;}
body.helmet-minimal #combatDeck .bottom-center,body.helmet-off #combatDeck .bottom-center{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px 20px;align-content:center;min-height:42px;padding:0 10px;text-align:left;}
body.helmet-minimal #combatDeck #weaponName,body.helmet-off #combatDeck #weaponName{grid-column:1;grid-row:1;align-self:center;overflow:hidden;font-size:10px;letter-spacing:.12em;text-overflow:ellipsis;white-space:nowrap;}
body.helmet-minimal #combatDeck .ammo,body.helmet-off #combatDeck .ammo{grid-column:2;grid-row:1 / 3;align-self:center;margin:0;gap:4px;white-space:nowrap;}
body.helmet-minimal #combatDeck .ammo b,body.helmet-off #combatDeck .ammo b{font-size:27px;line-height:1;}
body.helmet-minimal #combatDeck .ammo em,body.helmet-off #combatDeck .ammo em{font-size:11px;}
body.helmet-minimal #combatDeck .weapon-select,body.helmet-off #combatDeck .weapon-select{display:none;}
body.helmet-minimal #jetBoostDial,body.helmet-off #jetBoostDial{width:42px;height:42px;}
body.helmet-minimal .jet-readout b,body.helmet-off .jet-readout b{font-size:9px;}
body.helmet-minimal .jet-readout small,body.helmet-off .jet-readout small{font-size:5px;}
body.helmet-minimal #combatDeck .suit-status,body.helmet-off #combatDeck .suit-status{grid-template-columns:minmax(58px,auto) minmax(24px,auto) minmax(72px,1fr);column-gap:5px;}
body.helmet-minimal #combatDeck .suit-status .meter-label,body.helmet-off #combatDeck .suit-status .meter-label{grid-column:1 / 3;justify-content:flex-start;gap:8px;}
body.helmet-minimal #combatDeck .suit-status .meter,body.helmet-off #combatDeck .suit-status .meter{grid-column:3;}
@media (max-width:760px){body.helmet-minimal #combatDeck,body.helmet-off #combatDeck{grid-template-columns:38px minmax(120px,1fr) minmax(142px,1.1fr);column-gap:4px;width:calc(100vw - 14px);min-height:48px;padding:4px 5px 4px 4px}body.helmet-minimal #combatDeck>section,body.helmet-off #combatDeck>section{min-height:38px;padding:2px 5px}body.helmet-minimal #combatDeck .suit-status,body.helmet-off #combatDeck .suit-status{grid-template-columns:40px 1fr;grid-template-rows:15px 15px;gap:2px 5px;min-height:38px;padding:0 4px}body.helmet-minimal #combatDeck .suit-status .meter-label,body.helmet-off #combatDeck .suit-status .meter-label{font-size:6px}body.helmet-minimal #combatDeck .suit-status .meter-label b,body.helmet-off #combatDeck .suit-status .meter-label b{font-size:9px}body.helmet-minimal #combatDeck .suit-status .meter,body.helmet-off #combatDeck .suit-status .meter{height:4px}body.helmet-minimal #combatDeck .bottom-center,body.helmet-off #combatDeck .bottom-center{min-height:38px;padding:0 5px}body.helmet-minimal #combatDeck #weaponName,body.helmet-off #combatDeck #weaponName{font-size:7px}body.helmet-minimal #combatDeck .ammo b,body.helmet-off #combatDeck .ammo b{font-size:20px}body.helmet-minimal #combatDeck .ammo em,body.helmet-off #combatDeck .ammo em{font-size:8px}body.helmet-minimal #jetBoostDial,body.helmet-off #jetBoostDial{width:34px;height:34px}}
@media (max-width:760px){body.helmet-minimal #combatDeck .suit-status,body.helmet-off #combatDeck .suit-status{grid-template-columns:43px 20px minmax(52px,1fr);column-gap:4px}body.helmet-minimal #combatDeck .suit-status .meter-label,body.helmet-off #combatDeck .suit-status .meter-label{grid-column:1 / 3;gap:5px}body.helmet-minimal #combatDeck .suit-status .meter,body.helmet-off #combatDeck .suit-status .meter{grid-column:3}}
body.helmet-minimal #suitVisor { opacity:.08; }
body.helmet-off #suitVisor { display:none; }
body.helmet-off #missionTelemetry #objectiveText, body.helmet-off #missionTelemetry #kills { display:none; }
#screenAdjustments { position:fixed; z-index:200; inset:10% 8%; max-width:560px; margin:auto; padding:24px; background:rgba(5,15,25,.97); border:1px solid #4e91a8; color:#dff8ff; font:14px system-ui; }
#screenAdjustments[hidden] { display:none; }
#screenAdjustments label { display:grid; gap:6px; margin:14px 0; }
#screenAdjustments input,#screenAdjustments select { width:100%; accent-color:#78cce8; }
.settings-category { margin:18px 0 0; padding:0 0 16px; border-top:1px solid #29404d; border-bottom:1px solid #29404d; }
.settings-category + .settings-category { border-top:0; }
.settings-category summary { padding:16px 0 4px; cursor:pointer; color:#b8dce8; letter-spacing:.12em; font:inherit; list-style:none; }
.settings-category summary::-webkit-details-marker { display:none; }
.settings-category summary:after { content:'+'; float:right; color:#78cce8; }
.settings-category[open] summary:after { content:'−'; }
.settings-category label { display:grid; gap:7px; margin:14px 0; }
.settings-category input { width:100%; accent-color:#78cce8; }
.settings-category .mouse-settings input[type=number] { max-width:330px; box-sizing:border-box; background:#0b1821; border:1px solid #3a5261; color:#d9e8ed; padding:12px; font-family:inherit; }
.settings-category .mouse-settings input[type=checkbox] { width:20px; height:20px; margin:0; }
#screenAdjustmentsBody { position:static; inset:auto; max-width:none; margin:0; padding:0; background:none; border:0; color:inherit; font:inherit; }
#tacticalSettings .settings-category { margin-top:14px; }
#mobileHudEditor { margin-top:16px; padding:12px; border:1px solid #29404d; background:rgba(5,19,30,.55); }
#mobileHudEditor .hud-editor-stage { position:relative; height:250px; margin:12px 0; overflow:hidden; border:1px solid #315b6d; background:radial-gradient(circle at 50% 42%,rgba(41,93,116,.28),rgba(2,8,16,.9) 72%); touch-action:none; }
#mobileHudEditor .hud-edit-button { position:absolute; min-width:42px; min-height:34px; padding:7px; border:1px solid rgba(159,239,255,.82); border-radius:50%; background:rgba(10,62,86,.8); color:#effcff; font:800 10px Orbitron,sans-serif; transform:translate(-50%,-50%) scale(var(--edit-scale,1)); transform-origin:center; touch-action:none; }
#mobileHudEditor .hud-edit-button.selected { outline:2px solid #ffb56f; box-shadow:0 0 0 5px rgba(255,181,111,.18),0 0 18px rgba(99,221,255,.4); }
#mobileHudEditor .hud-editor-help { color:#8fb2c0; font-size:12px; line-height:1.5; }
#mobileHudEditor .hud-editor-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#mobileHudEditor .hud-editor-row output { color:#8cd6ec; }
#mobileHudEditor .hud-editor-save { margin-top:10px; }
.mobile-hud-editor-overlay { position:fixed; z-index:260; left:6%; right:6%; top:8%; max-height:84vh; overflow:auto; background:rgba(5,15,25,.98); border:1px solid #4e91a8; padding:18px; box-shadow:0 14px 50px rgba(0,0,0,.55); }
.mobile-hud-editor-overlay.hud-editor-open { display:block; }
.mobile-hud-editor-overlay[hidden] { display:none !important; }
#mobileHudEditor, #mobileHudEditor * { -webkit-user-select:none; user-select:none; }
#mobileHudEditor .hud-editor-stage { min-height:260px; }
#mobileHudEditor .hud-editor-back { float:right; }
#mobileHudEditor .hud-editor-size { display:grid; gap:6px; margin:12px 0; color:#b8dce8; }
#mobileHudEditor .hud-editor-size input { width:100%; accent-color:#78cce8; }
.mobile-actions button, .mobile-fire-left button, .mobile-stick { -webkit-user-select:none; user-select:none; }
@media (pointer: coarse) and (max-width: 740px) and (orientation: portrait) {
  .mobile-stick { width:118px; height:118px; bottom:max(92px,calc(env(safe-area-inset-bottom) + 82px)); }
  .mobile-stick span { width:48px; height:48px; margin:-24px 0 0 -24px; }
  .mobile-actions { width:190px; height:206px; right:max(10px,env(safe-area-inset-right)); bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px)); }
  .mobile-actions .fire { width:74px; height:74px; right:10px; bottom:42px; }
  .mobile-actions .ads { right:78px; bottom:101px; width:54px; height:54px; }
  .mobile-actions .jump { right:72px; bottom:19px; width:54px; height:54px; }
  .mobile-actions .reload { right:7px; bottom:125px; width:48px; height:48px; }
  .mobile-actions .weapon { right:134px; bottom:58px; width:48px; height:48px; }
  .mobile-actions .tactical { right:113px; bottom:0; width:45px; height:45px; }
  .mobile-actions .slide { right:137px; bottom:112px; width:45px; height:45px; }
  .mobile-actions .grenade { right:58px; bottom:162px; width:43px; height:43px; }
  .mobile-fire-left { left:max(150px,calc(env(safe-area-inset-left) + 136px)); bottom:max(128px,calc(env(safe-area-inset-bottom) + 116px)); }
}
#developerConsole{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;background:rgba(0,5,12,.30);pointer-events:auto}
#developerConsole[hidden]{display:none}
.dev-console-card{width:min(420px,calc(100vw - 34px));padding:18px 18px 14px;border:1px solid rgba(120,226,247,.62);border-radius:6px;background:rgba(3,15,26,.90);box-shadow:0 0 34px rgba(46,201,241,.18),inset 0 1px rgba(224,253,255,.15);font-family:Orbitron,sans-serif}
.dev-console-kicker{font-size:8px;letter-spacing:.22em;color:#78dced;margin-bottom:12px}
.dev-console-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.dev-console-line>span{color:#9bf2ff;font-size:16px}
#devConsoleInput{min-width:0;border:0;border-bottom:1px solid rgba(145,236,255,.55);border-radius:0;background:transparent;color:#effcff;outline:0;padding:7px 2px;font:500 14px Orbitron,sans-serif;letter-spacing:.08em}
#devConsoleClose{border:1px solid rgba(120,226,247,.42);background:rgba(40,114,139,.25);color:#c8f7ff;padding:7px 9px;font:600 8px Orbitron,sans-serif;letter-spacing:.1em}
.dev-console-title{margin:18px 0 10px;padding-top:12px;border-top:1px solid rgba(120,226,247,.24);color:#dffbff;font-size:11px;letter-spacing:.16em}
.dev-wave-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.dev-wave-grid button{min-height:38px;border:1px solid rgba(120,226,247,.4);background:rgba(12,55,76,.5);color:#dffbff;font:600 9px Orbitron,sans-serif;letter-spacing:.08em;user-select:none;-webkit-user-select:none}
.dev-wave-grid button.dev-boss{grid-column:1/-1;color:#ffd1b2;border-color:rgba(255,166,101,.65);background:rgba(108,46,25,.38)}
.dev-console-status{margin-top:12px;color:#86aebb;font:500 8px "Chakra Petch",sans-serif;letter-spacing:.1em}
#developerConsole,#developerConsole button{user-select:none;-webkit-user-select:none}
#developerConsole input{user-select:text;-webkit-user-select:text}
@media (max-width:620px){.dev-console-card{width:min(390px,calc(100vw - 24px));padding:15px}.dev-wave-grid{grid-template-columns:repeat(2,1fr)}}
/* Enemy integrity remains a core combat readout in Clean View. */
body.helmet-off #targetTelemetry { display:block; }
/* Top-center combat telemetry shares the alert lane beneath the mission timer. */
#targetTelemetry { top:105px; width:min(300px,62vw); }
@media (max-width:760px) { #targetTelemetry { top:87px; width:min(250px,68vw); } }
/* One integrated row beneath the timer: warnings temporarily replace enemy integrity. */
#targetTelemetry,#message { top:105px; width:min(300px,62vw); min-width:0; box-sizing:border-box; }
#message { padding:4px 8px 6px; }
@media (max-width:760px) { #targetTelemetry,#message,body.mobile-combat-active #message { top:87px; width:min(250px,68vw); } }
/* Boss encounter alert lane: timer remains fixed above, boss integrity remains fixed below. */
#hud:has(#bossHud.show) #message { top:59px; z-index:9; width:min(360px,66vw); padding:4px 12px 5px; background:linear-gradient(90deg,transparent,rgba(20,13,25,.88) 16%,rgba(20,13,25,.88) 84%,transparent); }
#hud:has(#bossHud.show) #message .message-channel { font-size:7px; }
#hud:has(#bossHud.show) #message strong { margin-top:2px; font-size:clamp(9px,.9vw,12px); }
@media (max-width:760px) { #hud:has(#bossHud.show) #message,body.mobile-combat-active #hud:has(#bossHud.show) #message { top:49px; width:min(300px,72vw); padding:3px 9px 4px; } }
/* Grenades sit alongside the existing IC-2 box, with matching restrained framing. */
#combatDeck{width:min(1020px,calc(100vw - 48px));grid-template-columns:62px 1.20fr .92fr .94fr 126px}
#grenadeInventory{position:static;display:grid;grid-template-columns:1fr;gap:4px;padding:0 0 0 5px;font:8px var(--font-ui,monospace);letter-spacing:.08em;color:#9bb6c2;pointer-events:none;min-width:0}
#grenadeInventory>span{display:flex;align-items:center;gap:5px;min-height:22px;padding:3px 7px;border:1px solid rgba(104,224,244,.25);background:rgba(7,20,27,.7)}
#grenadeInventory b{margin-left:auto;font-size:11px}#grenadeInventory i{font-style:normal;font-size:13px;color:#58d7ff}#grenadeInventory [data-grenade="1"] i{color:#ffad62}
#grenadeInventory .selected{border-color:#9bd8e8;color:#e9faff;box-shadow:inset 2px 0 #9bd8e8}#grenadeInventory .empty b{color:#ec866a}
body.helmet-minimal #combatDeck,body.helmet-off #combatDeck{width:min(780px,calc(100vw - 28px));grid-template-columns:46px minmax(160px,1fr) minmax(185px,1.1fr) 112px}
@media(max-width:760px){#combatDeck{width:calc(100vw - 14px);grid-template-columns:42px 1.15fr 1fr .85fr 85px}#grenadeInventory{font-size:6px;padding-left:2px;gap:3px}#grenadeInventory>span{padding:2px 4px;min-height:18px;gap:3px}#grenadeInventory b{font-size:9px}body.helmet-minimal #combatDeck,body.helmet-off #combatDeck,body.mobile-combat-active #combatDeck{grid-template-columns:36px minmax(100px,1fr) minmax(115px,1fr) 85px}}