:root{--bg:#07090a;--ink:#050705;--olive:#4b5d2a;--orange:#ff7a1a;--neon:#8cff4f;--cream:#f1ecd8;--panel:#121a10;--panel2:#1a2416;--red:#ff4a3a;--blue:#2f8bff;--gold:#ffc83c;--cyan:#6fd8ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--cream);font-family:'Rajdhani',ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif;font-size:17px;line-height:1.45;font-weight:500}
body.playing{overflow:hidden;position:fixed;inset:0;width:100%;cursor:none}
body.playing .ov, body.playing .ov *{cursor:auto}
[hidden]{display:none!important}
b{font-weight:700}
h1,h2,.btn,#hTime,#banner,#hsPop{font-family:'Black Ops One',Impact,'Arial Black',sans-serif;font-weight:400}
.small{font-size:14px;opacity:.78;margin:4px 0;line-height:1.5}
.btn{font:inherit;font-family:'Black Ops One',Impact,sans-serif;font-size:18px;color:var(--ink);background:var(--cream);border:3px solid var(--ink);padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block;letter-spacing:1px;
  box-shadow:0 5px 0 #000;transition:transform .06s,box-shadow .06s,background .1s;text-align:center;user-select:none;-webkit-user-select:none;touch-action:manipulation;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn:hover{background:#fff}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.btn.big{font-size:26px;padding:14px 30px;background:var(--orange);color:#fff;text-shadow:2px 2px 0 #7a2d00}
.btn.big:hover{background:#ff9140}
.btn.blue{background:var(--blue)}.btn.green{background:var(--neon);color:var(--ink)}
.btn.tiny{font-size:13px;padding:5px 10px;box-shadow:0 3px 0 #000}
.btn.disabled{opacity:.5;pointer-events:none;filter:grayscale(.6)}
kbd{background:#000;padding:1px 7px;border:2px solid #3b4632;border-bottom-width:4px;color:var(--gold);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;margin:0 2px;border-radius:3px}
.btn.big.blue{background:var(--blue)}

/* ============ game ============ */
#gameWrap{position:fixed;inset:0;background:#000;overflow:hidden;user-select:none;-webkit-user-select:none}
#game{display:block;width:100%;height:100%;image-rendering:auto}
#hud{position:absolute;inset:0;pointer-events:none;font-family:'Rajdhani',sans-serif;font-weight:700;color:#fff;text-shadow:0 2px 0 #000a}
#radar{position:absolute;left:14px;top:14px;width:168px;height:168px;border:3px solid #000;background:#0008;image-rendering:pixelated;box-shadow:0 0 0 2px #8cff4f44}
#top{position:absolute;left:50%;top:10px;transform:translateX(-50%);text-align:center;background:#000a;padding:6px 22px 8px;border:2px solid #000;min-width:230px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,14px 100%)}
#hRound{font-size:13px;letter-spacing:1px;opacity:.8}#hTime{font-size:34px;line-height:1.05;letter-spacing:2px}#hTime.red{color:var(--red);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
#hScore{font-size:22px;color:var(--gold);letter-spacing:3px;font-family:'Black Ops One',sans-serif}#hAlive{font-size:12px;opacity:.8;letter-spacing:1px}
#feed{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:46vw}
.fe{background:#000b;padding:3px 10px;font-size:16px;border-left:3px solid #fff;animation:fin .15s}
.fe i{font-style:normal;opacity:.7;font-size:13px;margin:0 4px}.fe em{font-style:normal;color:var(--gold);font-size:13px;margin-right:4px}
.fe b.rd{color:#9bff6a}.fe b.gd{color:#7fd0ff}.fe b.me{color:var(--gold);text-decoration:underline}
@keyframes fin{from{transform:translateX(30px);opacity:0}}
#hMsg{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:24px;letter-spacing:1px;text-align:center;opacity:0;transition:opacity .25s;background:#000a;padding:6px 18px;max-width:80vw}#hMsg.on{opacity:1}
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;padding:16px;background:linear-gradient(90deg,transparent,#000c 20%,#000c 80%,transparent)}
#banner #bannerT{font-size:clamp(40px,8vw,84px);line-height:1.1;letter-spacing:4px}#banner #bannerS{font-family:'Rajdhani';font-weight:700;font-size:22px;opacity:.85;letter-spacing:2px;text-transform:uppercase}
#banner.win #bannerT{color:var(--neon);text-shadow:0 0 30px #8cff4f}#banner.lose #bannerT{color:var(--red);text-shadow:0 0 30px #ff4a3a}
#cross{position:absolute;left:50%;top:50%;width:0;height:0;--gap:6px}
#cross i{position:absolute;background:#9dff6e;box-shadow:0 0 0 1px #000a}
#cross .l{width:9px;height:2px;right:var(--gap);top:-1px}#cross .r{width:9px;height:2px;left:var(--gap);top:-1px}#cross .u{width:2px;height:9px;bottom:var(--gap);left:-1px}#cross .d{width:2px;height:9px;top:var(--gap);left:-1px}#cross .dot{width:2px;height:2px;left:-1px;top:-1px}
#hitMk{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}#hitMk.on{opacity:1}
#hitMk i{position:absolute;width:12px;height:3px;background:#fff;left:-6px;top:-1.5px;box-shadow:0 0 0 1px #000}
#hitMk i:nth-child(1){transform:translate(-13px,-13px) rotate(45deg)}#hitMk i:nth-child(2){transform:translate(13px,-13px) rotate(-45deg)}#hitMk i:nth-child(3){transform:translate(-13px,13px) rotate(-45deg)}#hitMk i:nth-child(4){transform:translate(13px,13px) rotate(45deg)}
#hitMk.head i{background:var(--gold)}#hitMk.kill i{background:var(--red);width:16px}
#hsPop{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.3);opacity:0;font-size:clamp(46px,9vw,100px);color:var(--red);letter-spacing:6px;white-space:nowrap;text-shadow:0 0 0 #000,4px 4px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,0 0 40px #ff4a3a}
#hsPop span{display:inline-block;color:var(--gold);-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:5px 5px 0 #000,0 0 30px #ff4a3a}
#hsPop.on{animation:hs 1.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes hs{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-6deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.05)}}
#scope{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 33vh,#000 33.4vh)}
#scope .sc-h{position:absolute;left:calc(50% - 33vh);width:66vh;top:50%;height:2px;background:#000}#scope .sc-v{position:absolute;top:calc(50% - 33vh);height:66vh;left:50%;width:2px;background:#000}
#scope::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:var(--red);border-radius:50%}
#dmgV{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,#c00000cc 100%)}
#flash{position:absolute;inset:0;opacity:0;background:#fff}
#spec{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);font-size:22px;background:#000a;padding:6px 20px;letter-spacing:2px}
#prog{position:absolute;left:50%;top:62%;transform:translateX(-50%);text-align:center;font-size:20px;letter-spacing:1px;min-width:260px}
#prog .bar{height:12px;background:#000a;border:2px solid #000;margin-top:4px}#prog .bar i{display:block;height:100%;width:0;background:var(--gold)}#prog.red .bar i{background:var(--red)}#prog.red #progT{color:var(--red)}
#vitals{position:absolute;left:18px;bottom:16px;display:flex;gap:14px}
.vit{background:#000a;padding:6px 12px 8px;min-width:130px;border:2px solid #000}.vit .ic{opacity:.85;margin-right:6px;font-size:18px}.vit b{font-size:34px;line-height:1;font-family:'Black Ops One',sans-serif;font-weight:400}
.vit .bar{height:6px;background:#0008;margin-top:4px}.vit .bar i{display:block;height:100%;width:100%}.bar.hp i{background:#ff5a4a}.bar.ar i{background:#5aa8ff}.vit.low b{color:var(--red);animation:blink .4s steps(2) infinite}
#ammoBox{position:absolute;right:18px;bottom:16px;text-align:right;background:#000a;padding:6px 16px 8px;border:2px solid #000}#hWName{font-size:14px;letter-spacing:2px;color:var(--orange)}#hAmmo{font-size:42px;line-height:1;font-family:'Black Ops One',sans-serif;font-weight:400}#hRes{font-size:20px;opacity:.7}
#muteBtn{position:absolute;right:14px;top:210px;pointer-events:auto;opacity:.7}
.ov{position:absolute;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto;z-index:5;cursor:auto}
.panel{background:var(--panel);border:3px solid #000;box-shadow:0 8px 0 #000a,0 0 40px #ff7a1a33;padding:22px;margin:auto;max-width:480px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center;position:relative}
.panel::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:repeating-linear-gradient(45deg,var(--orange) 0 10px,#000 10px 20px)}
.panel h2{margin:6px 0 0;font-size:38px;color:var(--orange);letter-spacing:3px}.panel h2.gold{color:var(--gold)}.panel h2.red{color:var(--red)}
.panel .small b{color:var(--gold)}
.mini-ctl{font-size:15px;line-height:2}
.stats{display:flex;flex-direction:column;gap:6px;font-size:18px;text-align:left;background:#000;padding:12px 16px}.stats div{display:flex;justify-content:space-between}.stats b{color:#fff}.stats .gold,.stats .gold b{color:var(--gold)}
.btn.big.blue{background:var(--blue)}

/* ===== multiplayer room lobby + scoreboard ===== */
.panel.room{width:min(640px,96vw)}
.panel.room h2 b{color:var(--orange);letter-spacing:4px}
.rlink{display:flex;gap:8px;margin:8px 0}
.rlink input{flex:1;min-width:0;font:600 15px 'Share Tech Mono',ui-monospace,monospace;color:var(--ink);background:#fff;border:3px solid var(--ink);padding:8px 10px}
.rteams{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.rteam{background:#0007;border:2px solid #fff3;padding:8px 10px;text-align:left;min-height:130px}
.rteam h4{margin:0 0 6px;font-family:'Black Ops One',Impact,sans-serif;font-weight:400;letter-spacing:2px;font-size:16px;color:var(--gold,#ffb020)}
.rteam ul{list-style:none;margin:0 0 8px;padding:0;font:600 15px 'Rajdhani',system-ui,sans-serif;min-height:80px}
.rteam li{padding:2px 0;color:#f1ecd8}.rteam li.me{color:#8cff4f}.rteam li.bot{color:#7d8a70;font-style:italic}
.rname{margin:6px 0}.rname label,.ropts label{font:600 14px 'Rajdhani',system-ui,sans-serif;letter-spacing:1px;color:#cfd8c0}
.rname input,.ropts select{font:600 15px 'Rajdhani',system-ui,sans-serif;margin-left:6px;padding:3px 6px;border:2px solid var(--ink);background:#fff;color:var(--ink)}
.ropts{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:8px 0}
.panel .small.err{color:#ff7a6a}
#sb{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none}
#sb .sbx{background:#000c;border:2px solid #fff3;padding:12px 18px;min-width:min(420px,90vw)}
#sb h4{margin:6px 0;font-family:'Black Ops One',Impact,sans-serif;font-weight:400;letter-spacing:2px;color:var(--gold,#ffb020)}#sb h4.foe{color:#8fdcff}
.sbt{width:100%;border-collapse:collapse;font:600 15px 'Rajdhani',system-ui,sans-serif;color:#f1ecd8}
.sbt th{font-size:12px;letter-spacing:2px;color:#8d9880;text-align:left}.sbt td:not(:first-child),.sbt th:not(:first-child){text-align:right;width:44px}
.sbt tr.me td{color:#8cff4f}.sbt tr.dead td{opacity:.45}.sbt i{font-size:11px;color:#8d9880;font-style:normal;letter-spacing:1px}
.stats+.small .sbt{margin-top:8px}

/* world intro card + unlock note */
#worldCard{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(ellipse at center,#0006 0%,#0000 70%)}
#worldCard .wc-in{text-align:center;transform:skewX(-6deg);padding:18px 46px;background:linear-gradient(90deg,#0000,#000c 18%,#000c 82%,#0000)}
#worldCard.go .wc-in{animation:wcin 3.5s ease both}
#wcNum{font:700 22px 'Share Tech Mono',ui-monospace,monospace;letter-spacing:10px;color:var(--orange)}
#wcName{font:400 clamp(40px,8vw,92px)/1 'Black Ops One',Impact,sans-serif;letter-spacing:4px;color:#fff;text-shadow:4px 4px 0 var(--orange),8px 8px 0 #000}
#wcSub{font:600 17px 'Rajdhani',system-ui,sans-serif;letter-spacing:3px;color:#cfd8c0;margin-top:8px;text-transform:uppercase}
@keyframes wcin{0%{opacity:0;transform:skewX(-6deg) translateX(-80px)}12%{opacity:1;transform:skewX(-6deg) translateX(0)}78%{opacity:1}100%{opacity:0;transform:skewX(-6deg) translateX(60px)}}
.wnote{color:var(--neon,#8cff4f);letter-spacing:1px;font-weight:700}

/* ============================== HUB (military base) ============================== */
body.playing.inhub{cursor:auto}
#hubHud{position:absolute;inset:0;pointer-events:none;z-index:3;font-family:'Rajdhani',sans-serif;font-weight:700;color:#fff;text-shadow:0 2px 0 #000a}
#hubHud[hidden]{display:none}
body.inhub #hud{display:none}
#hbTop{position:absolute;top:12px;left:14px;display:flex;flex-direction:column;gap:2px}
.hbT{font-size:26px;letter-spacing:3px;color:#ffd24a;text-shadow:0 2px 0 #000,0 0 12px #000a}.hbT b{color:#fff}
.hbOn{font-size:15px;letter-spacing:2px;color:#cfe8c0;display:flex;align-items:center;gap:7px;background:#0009;padding:3px 9px;border-radius:5px;width:max-content}
.hbOn i{width:8px;height:8px;border-radius:50%;background:#6aff5a;box-shadow:0 0 8px #6aff5a}
#hbMap{position:absolute;top:12px;right:14px;width:150px;height:150px;border:2px solid #000;outline:2px solid #8a7a52;border-radius:4px;background:#000;opacity:.92}
#hbBtns{position:absolute;top:174px;right:14px;display:flex;flex-direction:column;gap:5px;align-items:stretch;width:150px;pointer-events:auto}
#hbBtns .btn{font-size:13px;padding:6px 8px;text-align:center}
#hbPrompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);text-align:center;background:#000c;border:2px solid var(--c,#ffd24a);border-radius:8px;padding:9px 20px;display:flex;flex-direction:column;gap:2px}
#hbPrompt[hidden]{display:none}
#hbPT{font-size:25px;letter-spacing:2px;color:var(--c,#ffd24a)}#hbPS{font-size:14px;letter-spacing:1px;color:#ddd}
#hbHelp{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:14px;letter-spacing:1px;background:#0009;padding:5px 12px;border-radius:5px;white-space:nowrap;color:#ddd}
#hbHelp kbd{background:#fff2;border:1px solid #fff5;border-radius:3px;padding:0 5px;color:#fff;font-family:inherit}
#hbLock{position:absolute;left:50%;top:42%;transform:translateX(-50%);font-size:22px;letter-spacing:3px;background:#000b;padding:8px 18px;border-radius:6px;color:#ffd24a}
#hbLock[hidden]{display:none}
#hbChat{position:absolute;left:14px;bottom:50px;width:290px;font-size:15px;line-height:1.25;display:flex;flex-direction:column;gap:2px}
#hbChat div{background:#0008;padding:2px 8px;border-radius:4px;transition:opacity .9s}#hbChat div.fade{opacity:0}
#hbChat b{color:#ffd9a0;font-weight:700}#hbChat span{color:#fff}
#hubFade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9;display:flex;align-items:center;justify-content:center;transition:opacity .45s}
#hubFade.on{opacity:1;pointer-events:auto}
#hubFade b{font-size:34px;letter-spacing:6px;color:#ffd24a;font-family:'Rajdhani',sans-serif}
@media (max-width:760px){#hbHelp{display:none}#hbChat{display:none}}
.hbReal{color:#ffd34d}.hbReal i{background:#ffd34d;box-shadow:0 0 8px #ffd34d}.hbReal b{color:#fff}.hbReal em{font-style:normal;opacity:.6;font-size:.7em}
