:root{
  --ct:#4aa3ff;
  --t:#f0a33c;
  --red:#ff3b3b;
  --ui:#e8edf4;
  --ui-dim:#8b98aa;
  --panel:rgba(12,16,22,.86);
  --accent:#37e0a0;
  --font:"Bahnschrift","DIN Alternate","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05070a;color:var(--ui);font-family:var(--font);user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}
#crosshair{position:absolute;left:50%;top:50%;width:36px;height:36px;transform:translate(-50%,-50%);transition:transform .08s ease-out}
#crosshair i{position:absolute;background:rgba(230,255,240,.92);box-shadow:0 0 3px rgba(0,0,0,.9)}
#crosshair .t,#crosshair .b{width:2px;height:9px;left:50%;margin-left:-1px}
#crosshair .t{top:0}
#crosshair .b{bottom:0}
#crosshair .l,#crosshair .r{height:2px;width:9px;top:50%;margin-top:-1px}
#crosshair .l{left:0}
#crosshair .r{right:0}
#crosshair b{position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;background:#fff;border-radius:50%;box-shadow:0 0 2px #000}
#crosshair.enemy i{background:#ff5252;box-shadow:0 0 6px rgba(255,60,60,.9)}

#hitmark{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
#hitmark::before,#hitmark::after{content:"";position:absolute;background:#fff;box-shadow:0 0 4px #000}
#hitmark::before{left:50%;top:0;width:2px;height:100%;margin-left:-1px}
#hitmark::after{top:50%;left:0;height:2px;width:100%;margin-top:-1px}
#hitmark.on{animation:hitpop .18s ease-out}
#hitmark.head::before,#hitmark.head::after{background:#ff3b3b}
@keyframes hitpop{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.25)}}

#topbar{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px}
.scorebox{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(10,14,20,.85),rgba(10,14,20,.6));border:1px solid rgba(255,255,255,.08);padding:5px 12px;border-radius:4px;backdrop-filter:blur(6px)}
.side{display:flex;align-items:baseline;gap:5px;font-weight:700}
.side span{font-size:22px;line-height:1}
.side small{font-size:10px;letter-spacing:1px;opacity:.75}
.side.ct span{color:var(--ct)}
.side.t span{color:var(--t)}
.vs{font-size:10px;color:var(--ui-dim);letter-spacing:1px}
#timer{font-size:15px;font-weight:700;letter-spacing:1px;color:#fff;background:rgba(10,14,20,.7);border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:4px;min-width:62px;text-align:center}
#timer.low{color:#ff5252;border-color:rgba(255,82,82,.55);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

#roundinfo{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:4px;color:rgba(255,255,255,.75);text-shadow:0 2px 8px #000;text-align:center}
/* Centre alert: width is clamped to the safe area, font size is fitted by JS
   from the measured text width, and long lines wrap automatically so the text
   always fits on any screen */
#alert{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:min(88vw,900px);font-size:clamp(16px,4.4vw,38px);font-weight:800;letter-spacing:.14em;line-height:1.24;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.9);opacity:0;transition:opacity .35s;text-align:center;white-space:normal;overflow-wrap:break-word;word-break:break-word}
#alert.show{opacity:1}
/* Short landscape screens: nudge it up so it does not crowd the crosshair
   and weapon below */
@media (max-height:480px){
  #alert{top:40%}
}
#alert .al-main{display:block;white-space:nowrap}
#alert .al-sub{display:block;white-space:nowrap;font-size:.62em;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.78);margin-top:.28em}

#killfeed{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(58px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.kf{background:rgba(8,11,16,.72);border-left:2px solid var(--accent);padding:4px 9px;font-size:12px;border-radius:2px;animation:kfin .2s ease-out;white-space:nowrap}
.kf .k{color:#fff;font-weight:700}
.kf .s{color:var(--ui-dim);margin:0 6px;font-size:11px}
.kf.head{border-left-color:#ff3b3b}
@keyframes kfin{from{transform:translateX(24px);opacity:0}}

#damageVignette{position:absolute;inset:0;box-shadow:inset 0 0 140px 30px rgba(255,20,20,.0);transition:box-shadow .18s}
#damageVignette.hurt{box-shadow:inset 0 0 160px 40px rgba(255,20,20,.55)}

#radarWrap{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));width:112px;height:112px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(6,10,14,.55);backdrop-filter:blur(4px)}
#radar{width:100%;height:100%;display:block}

#bottomleft{position:absolute;left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px}
.hpwrap{display:flex;align-items:center;gap:8px}
.hpicon{color:#ff5252;font-size:16px;text-shadow:0 0 8px rgba(255,82,82,.6)}
.hpbar{width:130px;height:7px;background:rgba(255,255,255,.14);border-radius:1px;overflow:hidden;transform:skewX(-18deg)}
#hpfill{height:100%;width:100%;background:linear-gradient(90deg,#ff5252,#ff9a3c);transition:width .18s}
#hpnum{font-size:20px;font-weight:800;min-width:44px}
.armorwrap{display:flex;align-items:center;gap:6px;font-size:14px;color:#7fc4ff;padding-left:2px}
.armorwrap .ai{font-size:11px}

#bottomright{position:absolute;right:calc(20px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));text-align:right}
#weaponName{font-size:12px;letter-spacing:2px;color:var(--ui-dim)}
#ammo{font-size:34px;font-weight:800;line-height:1;margin-top:2px}
#ammo #mag{color:#fff}
#ammo .sep{color:var(--ui-dim);font-size:20px;margin:0 3px}
#ammo #reserve{font-size:18px;color:var(--ui-dim)}
#reloadHint{font-size:11px;color:#ffcc55;letter-spacing:1px;margin-top:2px}
#reloadHint.blink{animation:pulse .6s infinite}

#topright{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));display:flex;gap:6px;pointer-events:auto}
.iconbtn{width:34px;height:34px;border-radius:4px;background:rgba(10,14,20,.7);border:1px solid rgba(255,255,255,.12);color:var(--ui);font-size:13px;cursor:pointer}
.iconbtn:active{background:rgba(255,255,255,.16)}

#hint{position:absolute;bottom:calc(58px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.4);letter-spacing:1px;transition:opacity .6s;white-space:nowrap}
@media (max-width:820px){#hint{display:none}}
body.touchmode #hint{display:none}
/* Landscape phones (short height): compress the HUD further */
@media (max-height:480px){
  body.touchmode #radarWrap{width:70px;height:70px}
  body.touchmode #bottomleft{top:calc(86px + env(safe-area-inset-top))}
  body.touchmode #bottomright{top:calc(84px + env(safe-area-inset-top))}
  body.touchmode #hint{display:none}
  .tbtn{width:42px;height:42px;font-size:17px}
}

/* ---------- Touch controls ---------- */
#touch{position:absolute;inset:0}
/* Left-hand control sizes: larger in portrait, smaller in landscape.
   The fire button sits up and to the left, the stick down and to the right,
   so the two are pulled diagonally apart to avoid mis-taps */
body.touchmode{
  --fireX: calc(66px + env(safe-area-inset-left));      /* fire button: flush left */
  --fireR: 44px;
  --fireCY: calc(196px + env(safe-area-inset-bottom));  /* fire button: upper */
  --joyX: calc(126px + env(safe-area-inset-left));      /* stick: to the right */
  --joyR: 59px;
  --joyCY: calc(58px + env(safe-area-inset-bottom));    /* stick: lower */
}
@media (max-height:480px){
  body.touchmode{
    --fireX: calc(56px + env(safe-area-inset-left));
    --fireR: 38px;
    --fireCY: calc(162px + env(safe-area-inset-bottom));
    --joyX: calc(116px + env(safe-area-inset-left));
    --joyR: 48px;
    --joyCY: calc(48px + env(safe-area-inset-bottom));
  }
}
/* Stick trigger zone: only the bottom-left square, the rest of the right side
   stays free for look control */
#stickZone{position:absolute;left:0;bottom:0;width:44%;height:42%;pointer-events:auto}
/* Always-visible stick hint: when untouched, a translucent base rests at its
   default spot so the player knows they can walk from the left side */
#stickBase{transition:opacity .18s}
body.touchmode #stickBase.idle{opacity:.32}
body.touchmode #stickBase.idle #stickKnob{background:rgba(255,255,255,.22)}
#stickBase{position:absolute;left:var(--joyX,calc(78px + env(safe-area-inset-left)));bottom:var(--joyCY,calc(168px + env(safe-area-inset-bottom)));width:calc(var(--joyR,59px) * 2);height:calc(var(--joyR,59px) * 2);margin:calc(var(--joyR,59px) * -1) 0 0 calc(var(--joyR,59px) * -1);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);opacity:0;transition:opacity .15s}
#stickBase.active{opacity:1}
#stickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.5)}
#touchRight{position:absolute;right:calc(24px + env(safe-area-inset-right));bottom:calc(150px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;pointer-events:auto;align-items:center}
@media (max-height:480px){#touchRight{right:calc(24px + env(safe-area-inset-right));bottom:calc(70px + env(safe-area-inset-bottom));gap:6px}}
.tbtn{width:48px;height:48px;border-radius:50%;background:rgba(12,16,22,.55);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:19px;pointer-events:auto;backdrop-filter:blur(4px)}
.tbtn.small{width:42px;height:42px;font-size:16px}
.tbtn:active{background:rgba(255,255,255,.28)}
#btnFire{position:absolute;left:var(--fireX,calc(56px + env(safe-area-inset-left)));bottom:var(--fireCY,calc(196px + env(safe-area-inset-bottom)));width:calc(var(--fireR,44px) * 2);height:calc(var(--fireR,44px) * 2);margin:0 0 0 calc(var(--fireR,44px) * -1);border-radius:50%;border:2px solid rgba(255,80,80,.75);background:radial-gradient(circle,rgba(255,60,60,.35),rgba(255,60,60,.10));color:#fff;font-size:13px;font-weight:800;letter-spacing:1px;pointer-events:auto;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#btnFire:active{background:radial-gradient(circle,rgba(255,80,80,.65),rgba(255,60,60,.25));transform:scale(.96)}
/* Fire button press feedback: outer glow plus inner pulse */
#btnFire::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,80,80,.35);opacity:.55;transition:opacity .12s,inset .12s}
#btnFire:active::after{opacity:1;inset:-10px;border-color:rgba(255,120,120,.85)}
#btnFire:active{border-color:rgba(255,150,150,.95)}
/* MOVE label to the right of the stick (same horizontal line as the stick
   centre, so it stays on screen even when the stick hugs the edge) */
#stickHint{position:absolute;left:calc(var(--joyX,calc(126px + env(safe-area-inset-left))) + var(--joyR,59px) + 8px);bottom:calc(var(--joyCY,58px) - 5px);transform:none;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.38);pointer-events:none;transition:opacity .2s;white-space:nowrap}
body.touchmode #stickHint{opacity:1}
@media (max-height:480px){#stickHint{display:none}}
/* Portrait: not enough horizontal room at the bottom, the MOVE label would
   collide with the health bar, so hide it */
@media (max-width:600px){body.touchmode #stickHint{display:none}}
/* Touch layout: radar top-left, health under the radar, ammo under the top-right */
body.touchmode #radarWrap{width:84px;height:84px;left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top))}
body.touchmode #bottomleft{left:calc(220px + env(safe-area-inset-left));bottom:calc(40px + env(safe-area-inset-bottom));top:auto;gap:2px}
@media (max-height:480px){body.touchmode #bottomleft{left:calc(192px + env(safe-area-inset-left));bottom:calc(30px + env(safe-area-inset-bottom))}}
/* Portrait phones: no horizontal room to sit side by side, so the health bar
   falls back to the bottom right */
@media (max-width:600px){body.touchmode #bottomleft{left:auto;right:calc(16px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));align-items:flex-end}}
body.touchmode .hpbar{width:92px;height:6px}
body.touchmode #hpnum{font-size:16px;min-width:34px}
body.touchmode .hpicon{font-size:13px}
body.touchmode .armorwrap{font-size:12px}
body.touchmode #bottomright{bottom:auto;top:calc(96px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}
body.touchmode #ammo{font-size:26px}
body.touchmode #ammo #reserve{font-size:14px}
body.touchmode #weaponName{font-size:11px;letter-spacing:1px}
body.touchmode #topbar{top:calc(8px + env(safe-area-inset-top))}
body.touchmode .scorebox{padding:4px 9px}
body.touchmode .side span{font-size:18px}
body.touchmode #timer{font-size:13px;padding:5px 8px;min-width:52px}
body.touchmode #topright .iconbtn{width:30px;height:30px;font-size:12px}
body.touchmode #killfeed{top:calc(52px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
body.touchmode .kf{font-size:11px}
body.touchmode #roundinfo{top:26%;font-size:11px;letter-spacing:2px}

/* ---------- Overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,rgba(14,22,32,.72),rgba(3,5,8,.94));backdrop-filter:blur(6px);z-index:20;overflow:auto}
.menuPanel,.panel{width:min(460px,94vw);background:linear-gradient(165deg,rgba(18,25,34,.96),rgba(9,13,18,.98));border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:26px 24px;box-shadow:0 30px 90px rgba(0,0,0,.7);position:relative}
.menuPanel::before,.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:10px 10px 0 0}
.panel.small{width:min(340px,92vw);text-align:center}
.logo{text-align:center;margin-bottom:22px}
.logo h1{margin:0;font-size:clamp(34px,8vw,48px);letter-spacing:8px;font-weight:800;background:linear-gradient(180deg,#ffffff,#8fb7d9);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(55,224,160,.18)}
.logo h2{margin:2px 0 0;font-size:13px;letter-spacing:9px;color:var(--accent);font-weight:600;opacity:.9}
.tagline{font-size:12px;color:var(--ui-dim);margin:10px 0 0;letter-spacing:.5px}
.menuBtns{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px}
.row>*{flex:1}
.bigbtn{width:100%;padding:14px;border-radius:6px;border:1px solid rgba(55,224,160,.5);background:linear-gradient(180deg,rgba(55,224,160,.22),rgba(55,224,160,.10));color:#dffdf1;font-size:16px;font-weight:700;letter-spacing:3px;cursor:pointer;transition:.15s;font-family:var(--font)}
.bigbtn:hover{background:linear-gradient(180deg,rgba(55,224,160,.35),rgba(55,224,160,.16));transform:translateY(-1px)}
.bigbtn:active{transform:translateY(0)}
.ghostbtn{padding:11px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--ui);font-size:13px;letter-spacing:2px;cursor:pointer;font-family:var(--font)}
.ghostbtn:hover{background:rgba(255,255,255,.1)}
.ghostbtn.wide{width:100%;margin-top:10px}
.panel .bigbtn{margin-top:16px}
.panel.small .bigbtn{margin-top:8px}
.stats-mini{display:flex;gap:8px;margin-top:20px;border-top:1px solid rgba(255,255,255,.07);padding-top:16px}
.stats-mini>div{flex:1;text-align:center}
.stats-mini label{display:block;font-size:10px;color:var(--ui-dim);letter-spacing:1px;margin-bottom:4px}
.stats-mini b{font-size:19px;color:#fff}
.pad-note{display:none;margin-top:14px;font-size:11px;color:#ffcc55;text-align:center;line-height:1.6}
body.touchmode .pad-note{display:block}
body.touchmode .stats-mini{margin-top:12px}

/* ---------- Map picker (dropdown) ---------- */
.mapPick{margin:0 0 18px}
.mapPickHead{font-size:10px;letter-spacing:3px;color:var(--ui-dim);margin-bottom:8px;text-align:center}
.mapRow{display:flex}
#mapSelect{flex:1;width:100%;appearance:none;-webkit-appearance:none;padding:12px 38px 12px 14px;border-radius:6px;
  border:1px solid rgba(55,224,160,.45);background:linear-gradient(180deg,rgba(55,224,160,.14),rgba(55,224,160,.05));
  color:#eafff7;font-size:14px;font-weight:700;letter-spacing:1.5px;cursor:pointer;font-family:var(--font);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2337e0a0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;outline:none}
#mapSelect option{background:#10161d;color:#eafff7;font-weight:600;letter-spacing:1px}
#mapSelect:focus{border-color:rgba(55,224,160,.85);box-shadow:0 0 0 2px rgba(55,224,160,.18)}
.mapDesc{margin-top:7px;font-size:11px;color:var(--ui-dim);text-align:center;letter-spacing:.4px;min-height:15px}

/* Author credit */
.credit{margin-top:14px;text-align:center;font-size:11px;color:var(--ui-dim);letter-spacing:.6px}
.credit a{color:var(--accent);text-decoration:none;border-bottom:1px dotted rgba(55,224,160,.5)}
.credit a:hover{color:#7dffc9}
.panel h3{margin:0 0 16px;font-size:18px;letter-spacing:3px;text-align:center}
.keymap{width:100%;border-collapse:collapse;font-size:12px}
.keymap td{padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--ui-dim)}
.keymap td:first-child{color:var(--ui);width:32%}
.keymap td:last-child{text-align:right;font-size:11px}
kbd{display:inline-block;min-width:20px;padding:2px 5px;margin-right:3px;border-radius:3px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;font-size:10px;color:#fff;text-align:center;font-family:var(--font)}
.tip{font-size:12px;color:var(--ui-dim);line-height:1.7;margin:12px 0 0}
.setrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.setrow label{width:88px;color:var(--ui-dim)}
.setrow input[type=range]{flex:1;accent-color:var(--accent);height:4px}
.setrow span{width:38px;text-align:right;font-size:12px;color:#fff}
.setrow select{flex:1;padding:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:4px;font-family:var(--font)}
.endstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.endstats>div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:12px;text-align:center}
.endstats label{display:block;font-size:10px;color:var(--ui-dim);letter-spacing:1px;margin-bottom:6px}
.endstats b{font-size:22px;color:#fff}
#endTitle.win{color:var(--accent)}
#endTitle.lose{color:#ff5252}
#loading .loader{text-align:center;color:var(--ui-dim);font-size:12px;letter-spacing:2px}
.spinner{width:34px;height:34px;margin:0 auto 14px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#end .overlay,#end{z-index:30}