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

:root { --cyan:#47f4ff; --pink:#ff3b81; --ink:#070a14; --panel:rgba(9,14,31,.75); }
*{box-sizing:border-box} body{margin:0;background:#050611;color:#edfaff;font-family:Rajdhani,sans-serif;overflow:hidden;user-select:none}
.game-shell{height:100vh;width:100vw;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#132947 0,#090d20 43%,#03040c 100%)}
canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.62) 100%);mix-blend-mode:multiply}
.hud{position:absolute;inset:0;pointer-events:none;padding:26px 32px;text-shadow:0 0 14px rgba(71,244,255,.5)}
.brand{font:800 29px/ .9 'Barlow Condensed';letter-spacing:2px;position:absolute;top:27px;left:32px}.brand span,h1 span,h2 span{color:var(--cyan);text-shadow:0 0 22px var(--cyan)}.brand small{display:block;color:#7d94ae;font:600 10px Rajdhani;letter-spacing:3.3px;margin-top:6px}
.objective{position:absolute;top:35px;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:2px;color:#bcd6e7}.pulse{display:inline-block;width:7px;height:7px;background:var(--pink);border-radius:50%;margin:0 9px 2px 0;box-shadow:0 0 13px var(--pink);animation:blink 1s infinite}
.top-stats{position:absolute;right:32px;top:27px;display:flex;gap:26px}.stats div{text-align:right;min-width:58px}.stats label{display:block;font-size:10px;letter-spacing:1.8px;color:#8498ad}.stats strong{font:700 21px/1 'Barlow Condensed';letter-spacing:1px}
.player-panel{position:absolute;left:32px;bottom:33px;width:270px}.health-row,.energy-row{display:grid;grid-template-columns:50px 1fr 26px;gap:8px;align-items:center;font-size:11px;letter-spacing:1.3px;color:#b8cede;margin:7px 0}.bar{height:8px;background:rgba(160,206,225,.17);border:1px solid rgba(187,226,242,.2);transform:skewX(-16deg);overflow:hidden}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#22c9e7,var(--cyan));box-shadow:0 0 12px var(--cyan);transition:width .2s}.bar.energy i{background:linear-gradient(90deg,#9746ff,#ff4b9a);box-shadow:0 0 12px #d955ff}
.weapon{position:absolute;right:32px;bottom:30px;display:flex;align-items:center;gap:10px;text-align:right}.weapon-icon{font-size:30px;color:var(--pink);filter:drop-shadow(0 0 7px var(--pink))}.weapon small{display:block;font-size:9px;letter-spacing:1.8px;color:#8ca3b5}.weapon b{font:700 19px 'Barlow Condensed';letter-spacing:1px}.weapon em{position:absolute;right:0;top:-20px;font:600 13px Rajdhani;color:#ffcc6d;letter-spacing:1px}
.controls{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:10px;color:#7f94a9;letter-spacing:1px;white-space:nowrap}.controls kbd{font:700 11px Rajdhani;color:#dcecff;border:1px solid #567084;border-radius:2px;padding:2px 5px;margin-left:7px;background:#101b2c}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,4,12,.52);backdrop-filter:blur(4px);transition:opacity .3s}.overlay.hidden{opacity:0;pointer-events:none}.panel{text-align:center;width:min(480px,88vw);padding:35px}.panel h1,.panel h2{font:800 clamp(68px,12vw,110px)/.76 'Barlow Condensed';margin:11px 0 25px;letter-spacing:3px}.panel h2{font-size:clamp(58px,9vw,85px)}.eyebrow{font-size:11px;letter-spacing:4px;color:var(--pink);margin:0}.lead{line-height:1.45;color:#a5bed0;font-size:17px;max-width:360px;margin:0 auto 28px}.panel button{pointer-events:auto;border:1px solid var(--cyan);background:rgba(14,53,72,.72);color:#eafeff;padding:13px 20px 12px;font:700 16px Rajdhani;letter-spacing:1.8px;cursor:pointer;box-shadow:inset 0 0 20px rgba(71,244,255,.15),0 0 18px rgba(71,244,255,.13);transition:.2s}.panel button:hover{background:#1db6ca;color:#06101a;box-shadow:0 0 28px var(--cyan)}.panel button span{font-size:20px;margin-left:18px}.tip{margin-top:19px;font-size:11px;letter-spacing:.7px;color:#75899e}.result{font-size:16px;line-height:1.9;color:#a8c4d6}.result b{color:#fff;font-size:20px;letter-spacing:1px}
@keyframes blink{50%{opacity:.15;transform:scale(.65)}}
@media(max-width:650px){.hud{padding:17px}.brand{top:18px;left:18px;font-size:23px}.top-stats{top:18px;right:18px;gap:13px}.top-stats div:last-child{display:none}.objective{top:75px;font-size:11px}.player-panel{left:18px;bottom:23px;width:210px}.weapon{right:18px;bottom:22px}.weapon b{font-size:16px}.weapon em,.controls{display:none}.panel{padding:20px}.lead{font-size:15px}}