*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none}
:root{--accent:#f2b134;--xh:#4dff6a}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;padding:16px;overflow:auto}
#menu,#teams{touch-action:none}
#menu{background:linear-gradient(90deg,rgba(10,10,12,.85) 0%,rgba(10,10,12,.55) 45%,rgba(10,10,12,0) 80%);align-items:flex-start;padding-left:clamp(16px,7vw,120px)}
.menu-inner{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:min(320px,88vw);max-width:92vw}
h1{font-size:clamp(34px,7vw,78px);letter-spacing:.08em;font-weight:900;color:var(--accent);text-shadow:0 3px 0 #000,0 0 30px rgba(0,0,0,.6);line-height:1}
h2{font-size:clamp(22px,4vw,40px);letter-spacing:.08em;font-weight:800;text-align:center;margin-bottom:8px}
.sub{color:#ddd;font-size:clamp(13px,1.8vw,17px);margin-bottom:14px;text-shadow:0 1px 2px #000}
.btn{background:rgba(20,22,26,.85);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;letter-spacing:.12em;font-size:clamp(14px,2vw,18px);padding:12px 22px;cursor:pointer;text-align:left;transition:background .12s,border-color .12s;font-family:inherit}
.btn:hover,.btn:focus-visible{background:rgba(242,177,52,.25);border-color:var(--accent);outline:none}
.btn.big{background:var(--accent);color:#141414;border-color:var(--accent);font-size:clamp(18px,2.6vw,24px);padding:14px 22px}
.btn.big:hover{filter:brightness(1.1);background:var(--accent)}
.btn.small{margin-top:14px;text-align:center;min-width:160px}
.controls-card{margin-top:14px;background:rgba(0,0,0,.55);border-left:3px solid var(--accent);padding:10px 14px;font-size:13px;line-height:1.65;color:#ddd}
.controls-card b{color:#fff;display:inline-block;min-width:92px}
#teams{background:rgba(8,9,11,.9)}
.team-row{display:flex;gap:clamp(10px,3vw,30px);flex-wrap:wrap;justify-content:center}
.team{width:clamp(140px,28vw,260px);background:#15171b;border:2px solid #333;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0 0 12px;font-family:inherit;overflow:hidden;transition:transform .12s,border-color .12s}
.team img{width:100%;aspect-ratio:336/600;object-fit:cover;max-height:48vh;background:#ccc}
.team span{font-weight:900;font-size:clamp(13px,2vw,19px);letter-spacing:.06em;margin-top:10px}
.team small{color:#aaa;font-size:12px;margin-top:4px;padding:0 6px;text-align:center}
.team.ct:hover,.team.ct:focus-visible{border-color:#5aa0ff;transform:translateY(-4px);outline:none}
.team.t:hover,.team.t:focus-visible{border-color:#e0a030;transform:translateY(-4px);outline:none}
.team.ct span{color:#8cc0ff}.team.t span{color:#f0b850}
#loading{background:radial-gradient(ellipse at center,#2a2418 0%,#0b0a08 75%);z-index:30}
.load-inner{width:min(520px,86vw);text-align:center}
.load-team{font-size:clamp(20px,4vw,34px);font-weight:900;letter-spacing:.1em;color:var(--accent)}
.load-map{color:#aaa;letter-spacing:.2em;font-size:13px;margin:6px 0 22px}
.load-bar{height:10px;background:#222;border:1px solid #444}
#loadFill{height:100%;width:0;background:var(--accent);transition:width .1s linear}
.load-pct{margin-top:8px;font-weight:700;font-size:15px}
.load-tip{margin-top:22px;color:#ccc;font-size:14px;min-height:2.4em}
#pause,#settings,#over{background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.settings-inner label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#ddd;background:rgba(20,22,26,.8);padding:8px 12px}
.settings-inner label span{color:var(--accent);font-weight:700}
.settings-inner label.chk{flex-direction:row;align-items:center;gap:10px}
.settings-inner input[type=range]{width:100%;accent-color:var(--accent)}
.settings-inner select{font-size:15px;padding:4px;background:#222;color:#fff;border:1px solid #555}
#overTitle.ct{color:#8cc0ff}#overTitle.t{color:#f0b850}
#overSub{text-align:center;color:#ddd;margin-bottom:8px}
#overStats{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;background:rgba(0,0,0,.5);padding:10px 14px;font-size:14px;margin-bottom:8px}
#overStats b{color:var(--accent);text-align:right}
#board{font-size:13px;color:#ccc;background:rgba(0,0,0,.45);padding:8px 12px;margin-top:6px}
#board a{color:#8cc0ff}
#board .mine{color:var(--accent)}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair i{position:absolute;background:var(--xh);box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#crosshair .t,#crosshair .b{width:2px;height:9px;left:-1px}
#crosshair .l,#crosshair .r{height:2px;width:9px;top:-1px}
#crosshair .dot{width:2px;height:2px;left:-1px;top:-1px}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;background:
 linear-gradient(45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%);
 -webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}
#hitmarker.head{filter:drop-shadow(0 0 2px red) hue-rotate(0deg);background:
 linear-gradient(45deg,transparent 44%,#ff3030 44%,#ff3030 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#ff3030 44%,#ff3030 56%,transparent 56%)}
#vignette{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(200,0,0,.75) 100%)}
#dmgdir{position:absolute;left:50%;top:50%;width:min(36vh,36vw);height:min(36vh,36vw);transform:translate(-50%,-50%);opacity:0}
#dmgdir::before{content:"";position:absolute;left:50%;top:0;width:60px;height:18px;margin-left:-30px;background:radial-gradient(ellipse at 50% 100%,rgba(255,40,40,.95),transparent 70%);border-radius:50% 50% 0 0}
#topbar{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%)}
.score{background:rgba(0,0,0,.55);padding:5px 14px;font-weight:800;font-size:clamp(13px,1.8vw,18px);display:flex;gap:10px;align-items:center}
.score .ct{color:#8cc0ff}.score .tt{color:#f0b850}
#timer{min-width:56px;text-align:center;background:rgba(255,255,255,.1);padding:1px 8px;color:#fff}
#killfeed{position:absolute;top:max(10px,env(safe-area-inset-top));right:64px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
#killfeed div{background:rgba(0,0,0,.6);padding:4px 10px;font-size:13px;font-weight:700;border:1px solid rgba(255,60,60,.6)}
#healthbox{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));background:rgba(0,0,0,.5);padding:8px 12px 10px;width:clamp(170px,22vw,260px)}
.hplabel{font-size:clamp(24px,3.2vw,36px);font-weight:900;color:var(--accent);line-height:1;display:flex;gap:8px;align-items:center}
.hplabel .plus{font-size:.9em}
#hpbar{height:10px;margin-top:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25)}
#hpfill{height:100%;width:100%;background:linear-gradient(90deg,#3fd35a,#9cf06a);transition:width .15s}
#hpfill.mid{background:linear-gradient(90deg,#e0b020,#f5d050)}
#hpfill.low{background:linear-gradient(90deg,#d02020,#ff5040)}
#ammobox{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));background:rgba(0,0,0,.5);padding:8px 14px;font-weight:900;color:var(--accent);display:flex;align-items:baseline;gap:6px}
#ammo{font-size:clamp(28px,3.6vw,42px)}#reserve,.sep{font-size:clamp(16px,2vw,22px);color:#ddd}
#reloadtxt{position:absolute;top:-22px;right:0;font-size:12px;letter-spacing:.2em;color:#fff}
#hint{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(0,0,0,.45);padding:5px 12px;font-size:12px;color:#ddd;white-space:nowrap;transition:opacity 1s;max-width:calc(100vw - 2*clamp(190px,24vw,280px));overflow:hidden;text-overflow:ellipsis}
#center-msg{position:absolute;left:50%;top:28%;transform:translateX(-50%);font-size:clamp(22px,4.5vw,46px);font-weight:900;letter-spacing:.08em;text-shadow:0 2px 6px #000;text-align:center;white-space:nowrap}
#pausebtn{pointer-events:auto;position:absolute;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:44px;height:44px;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.3);font-weight:900;font-size:16px;cursor:pointer}
#fps{position:absolute;left:8px;top:8px;font:12px monospace;background:rgba(0,0,0,.5);padding:2px 6px}
#touch{position:absolute;inset:0;pointer-events:none}
#touch button{pointer-events:auto;position:absolute;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);color:#fff;font-weight:900;font-family:inherit;touch-action:none}
#tFire{right:max(26px,env(safe-area-inset-right));bottom:28%;width:84px;height:84px;font-size:15px;background:rgba(220,60,40,.35)!important}
#tJump{right:max(124px,calc(env(safe-area-inset-right) + 100px));bottom:calc(28% - 30px);width:58px;height:58px;font-size:11px}
#tCrouch{right:max(116px,calc(env(safe-area-inset-right) + 90px));bottom:calc(28% + 60px);width:58px;height:58px;font-size:9px}
#tReload{right:max(36px,env(safe-area-inset-right));bottom:calc(28% + 100px);width:56px;height:56px;font-size:18px}
#stick{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);left:max(30px,env(safe-area-inset-left));bottom:26%;opacity:.8}
#knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,255,255,.4)}
body.touch #hint{display:none}
body.touch #healthbox{bottom:max(8px,env(safe-area-inset-bottom));padding:5px 10px 7px;width:150px}
body.touch #ammobox{bottom:max(8px,env(safe-area-inset-bottom))}
#clicktoplay{position:fixed;left:50%;top:60%;transform:translateX(-50%);background:rgba(0,0,0,.6);padding:8px 16px;z-index:15;font-weight:700;letter-spacing:.1em;pointer-events:none}
@media (max-height:480px){
  .menu-inner{gap:6px}.btn{padding:8px 16px}.controls-card{display:none}
  .team img{max-height:38vh}
  #menu .controls-card{display:none}
}
@media (max-width:600px){
  #menu{align-items:center;padding-left:16px;background:rgba(10,10,12,.6)}
  h1{text-align:center}.sub{text-align:center}
  #killfeed{right:60px;top:52px}
  #topbar{top:max(8px,env(safe-area-inset-top));left:12px;transform:none}
}