* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; touch-action:none;
  font-family:'Segoe UI', system-ui, sans-serif; user-select:none; -webkit-user-select:none; }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

/* ===== Overlays ===== */
.overlay { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  background:rgba(10,16,28,.88); color:#fff; padding:20px; }
.overlay h1 { font-size:clamp(36px,8vw,72px); letter-spacing:4px; font-weight:900;
  text-shadow:0 4px 0 rgba(0,0,0,.4); }
.overlay .sub { opacity:.85; font-size:clamp(13px,3vw,17px); }
.overlay .help { opacity:.6; font-size:12px; line-height:1.7; max-width:560px; }
.overlay button { cursor:pointer; border:none; border-radius:12px; font-weight:800; color:#fff; }
#btn-start, #btn-replay, #btn-resume, #btn-loadout-close { font-size:22px; padding:14px 52px;
  background:#2e6df6; box-shadow:0 5px 0 #1c4bb8; letter-spacing:2px; }
#btn-start:active, #btn-replay:active, #btn-resume:active, #btn-loadout-close:active { transform:translateY(3px); box-shadow:0 2px 0 #1c4bb8; }

/* 6 armes principales : cartes compactes sur 2-3 rangées */
.weapons { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:660px; }
.wcard { display:flex; flex-direction:column; gap:4px; padding:12px 14px; min-width:170px;
  flex:0 1 200px; background:#1b2740; border:3px solid transparent; border-radius:14px; }
.wcard.selected { border-color:#2e6df6; background:#213458; }
.wcard .wname { font-size:16px; font-weight:800; }
.wcard .wstat { font-size:11.5px; opacity:.75; }
.sub.small { font-size:12.5px; opacity:.65; }
/* le menu principal et l'équipement peuvent dépasser un petit écran → défilables */
#menu, #loadout { justify-content:flex-start; overflow-y:auto; padding-top:4vh; }

/* ===== Choix du mode (solo / multijoueur) ===== */
.modes { display:flex; flex-direction:column; gap:12px; align-items:center; }
.modes .mp { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; justify-content:center; }
.modes input { width:150px; padding:10px 12px; border:2px solid #2e6df6; border-radius:10px;
  background:#101a30; color:#fff; font-size:15px; font-weight:700; text-align:center; outline:none; }
.modes input::placeholder { color:rgba(255,255,255,.4); font-weight:400; }
#jcode { width:92px; text-transform:uppercase; letter-spacing:3px; }
#btn-create, #btn-join { font-size:15px; padding:10px 18px; background:#1b8a4c;
  box-shadow:0 4px 0 #0e5c30; }
#btn-create:active, #btn-join:active { transform:translateY(2px); box-shadow:0 2px 0 #0e5c30; }
.joinrow { display:flex; gap:8px; }
.mpmsg { min-height:18px; font-size:13px; color:#ffb02e; font-weight:700; }

/* ===== Lobby (partie privée) ===== */
.codebox { display:flex; flex-direction:column; gap:4px; background:#101a30;
  border:2px solid #2e6df6; border-radius:14px; padding:12px 34px; font-size:13px; opacity:.95; }
.codebox b { font-size:42px; letter-spacing:10px; font-weight:900; color:#ffd257; }
.lobbycols { display:flex; gap:40px; }
.lobbycols h3 { font-size:15px; letter-spacing:1px; margin-bottom:8px; }
.lobbycols .tblue { color:#7ea6ff; }
.lobbycols .tred { color:#ff8a8a; }
.lobbycols ul { list-style:none; min-width:150px; min-height:60px; }
.lobbycols li { background:rgba(255,255,255,.08); border-radius:8px; padding:6px 12px;
  margin-bottom:6px; font-size:15px; font-weight:700; }
.lobbycols li .crown { margin-left:6px; }
#btn-launch { font-size:20px; padding:13px 44px; background:#1b8a4c;
  box-shadow:0 5px 0 #0e5c30; letter-spacing:2px; }
#btn-launch:active { transform:translateY(3px); box-shadow:0 2px 0 #0e5c30; }
#btn-leave, #btn-quit { font-size:14px; padding:9px 18px; background:#1b2740;
  border:2px solid rgba(255,255,255,.25); border-radius:10px; }

.opts { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center;
  font-size:14px; opacity:.9; }
.opts input[type=range] { width:150px; accent-color:#2e6df6; }
#sensVal { font-weight:700; min-width:48px; text-align:left; }
#btn-sound { font-size:14px; padding:8px 16px; background:#1b2740; border:2px solid #2e6df6;
  border-radius:10px; }

/* ===== HUD ===== */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; color:#fff; }
#scores { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  display:flex; gap:10px; align-items:center; font-weight:700; font-size:15px; }
#scores .pill { padding:5px 14px; border-radius:20px; background:rgba(0,0,0,.45); }
#scores .pill.blue { border-bottom:3px solid #2e6df6; }
#scores .pill.red { border-bottom:3px solid #e23c3c; }
#scores .goal { opacity:.8; font-size:13px; }
#scores b { font-size:18px; }

#killfeed { position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px;
  display:flex; flex-direction:column; gap:4px; align-items:flex-end; font-size:13px; }
.feeditem { background:rgba(0,0,0,.5); padding:4px 10px; border-radius:6px; }
.feeditem .blue { color:#7ea6ff; font-weight:700; }
.feeditem .red { color:#ff8a8a; font-weight:700; }

#crosshair { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border:2px solid rgba(255,255,255,.75); border-radius:50%; }
#crosshair .dot { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:4px; height:4px; background:#fff; border-radius:50%; }
/* Anneau de progression du rechargement autour du réticule
   (dashoffset piloté chaque frame par game.js, départ en haut grâce au rotate) */
#reloadRing { position:absolute; left:50%; top:50%; width:52px; height:52px;
  transform:translate(-50%,-50%) rotate(-90deg); display:none; }
#reloadRing.show { display:block; }
#reloadRing circle { fill:none; stroke:#ffc94d; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:125.66; stroke-dashoffset:125.66;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

#hitmarker { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:30px; font-weight:900; opacity:0; transition:opacity .12s; }
#hitmarker.show { opacity:1; }
#hitmarker.head { color:#ff4040; }

/* Indicateur directionnel de dégâts : flèche rouge autour du réticule,
   orientée vers le tireur (rotation posée en JS) */
#dmgdir { position:absolute; left:50%; top:50%; width:150px; height:150px;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .5s; }
#dmgdir.show { opacity:1; transition:none; }
#dmgdir .wedge { position:absolute; left:50%; top:-8px; transform:translateX(-50%);
  width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent;
  border-bottom:16px solid rgba(226,60,60,.9);
  filter:drop-shadow(0 0 4px rgba(226,60,60,.8)); }

#kd { position:absolute; left:16px; bottom:calc(44px + env(safe-area-inset-bottom));
  font-size:13px; font-weight:700; text-shadow:0 1px 3px #000; opacity:.9; }
#kd b { font-size:15px; }

#hpwrap { position:absolute; left:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(230px,34vw); height:20px; background:rgba(0,0,0,.5); border-radius:10px; overflow:hidden; }
#hpbar { height:100%; width:100%; background:#4caf50; border-radius:10px; transition:width .15s, background .15s; }
#hpnum { position:absolute; inset:0; text-align:center; font-size:13px; font-weight:800; line-height:20px;
  text-shadow:0 1px 2px #000; }

#ammo { position:absolute; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  text-align:right; text-shadow:0 2px 3px #000; }
#ammo b { font-size:34px; }
#ammo span { font-size:16px; opacity:.8; }
#weaponName { font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; opacity:.75; }
#reloadTxt { display:none; font-size:13px; font-weight:800; color:#ffc94d; letter-spacing:1px; }
#ammo.reloading #reloadTxt { display:block; }
/* Barre de progression du rechargement (remplie chaque frame par game.js) */
#reloadWrap { display:none; width:140px; height:6px; margin:4px 0 0 auto;
  background:rgba(0,0,0,.55); border-radius:3px; overflow:hidden; }
#ammo.reloading #reloadWrap { display:block; }
#reloadBar { height:100%; width:0%; background:#ffc94d; }

#nades { font-size:14px; font-weight:700; margin-top:3px; }

/* Radar UAV (killstreak ×3) */
#radar { position:absolute; left:16px; top:calc(12px + env(safe-area-inset-top));
  width:148px; height:148px; display:none; }
#radar.show { display:block; }

/* Annonce de killstreak */
#streakMsg { position:absolute; left:50%; top:22%; transform:translateX(-50%);
  font-size:clamp(16px,3vw,22px); font-weight:900; color:#ffd257; letter-spacing:1px;
  text-shadow:0 2px 5px #000; opacity:0; transition:opacity .4s; white-space:nowrap; }
#streakMsg.show { opacity:1; }

/* Confirmation de kill (bas de l'écran) */
#killMsg { position:absolute; left:50%; bottom:calc(110px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(6px); font-size:clamp(14px,2.4vw,18px); font-weight:800;
  color:#ffd257; letter-spacing:.5px; text-shadow:0 2px 4px #000; white-space:nowrap;
  opacity:0; transition:opacity .35s, transform .35s; }
#killMsg.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Tableau des scores (Tab maintenu sur PC, tap sur le score en haut sur mobile) */
#scores { pointer-events:auto; cursor:pointer; }
#scoreboard { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(8,14,26,.92); border-radius:14px; padding:16px 24px;
  box-shadow:0 8px 30px rgba(0,0,0,.5); }
#scoreboard h3 { text-align:center; margin-bottom:10px; letter-spacing:1px; font-size:16px; }
#scoreboard .cols { display:flex; gap:26px; }
#scoreboard table { border-collapse:collapse; font-size:14px; min-width:150px; align-self:flex-start; }
#scoreboard th { text-align:left; font-size:13px; opacity:.85; padding:2px 10px 6px 6px; }
#scoreboard td { padding:2px 10px 2px 6px; }
#scoreboard td:nth-child(n+2), #scoreboard th:nth-child(n+2) { text-align:center; }
#sbBlue th:first-child { color:#7ea6ff; }
#sbRed th:first-child { color:#ff8a8a; }
#scoreboard tr.me td { background:rgba(255,255,255,.14); font-weight:800; }

#protection { position:absolute; left:50%; bottom:calc(70px + env(safe-area-inset-bottom));
  transform:translateX(-50%); background:rgba(46,109,246,.75); padding:5px 14px; border-radius:16px;
  font-size:13px; font-weight:700; display:none; }
#protection.show { display:block; }

#damageFlash { position:absolute; inset:0; box-shadow:inset 0 0 120px 40px rgba(220,30,30,.75);
  opacity:0; transition:opacity .4s; }
#scope { position:absolute; inset:0; display:none;
  background:radial-gradient(circle at 50% 50%, transparent 0 29%, rgba(5,5,8,.97) 30%); }
#scope.show { display:block; }
#scope .hline { position:absolute; top:50%; left:0; right:0; height:1px; background:rgba(255,255,255,.7); }
#scope .vline { position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.7); }

#deathOverlay { position:absolute; inset:0; display:none; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; background:rgba(60,0,0,.45);
  font-size:30px; font-weight:900; text-shadow:0 3px 5px #000; }
#deathOverlay.show { display:flex; }
#respawnTxt { font-size:17px; font-weight:600; opacity:.9; }
#deathBy { font-size:15px; font-weight:700; opacity:.85; color:#ffb02e; }

/* ===== Killcam (façon Call of Duty) ===== */
#killcamUI { position:absolute; left:50%; top:calc(18px + env(safe-area-inset-top));
  transform:translateX(-50%); display:none; flex-direction:column; align-items:center; gap:2px;
  background:rgba(8,14,26,.75); border-radius:10px; padding:8px 20px; }
#killcamUI.show { display:flex; }
#killcamTag { font-size:15px; font-weight:900; letter-spacing:2px; color:#e23c3c; }
#killcamInfo { font-size:14px; font-weight:700; color:#ffd257; }
#killcamHint { font-size:11px; opacity:.7; }
/* pendant la killcam : HUD de combat masqué pour une vue cinématique dégagée */
#hud.killcam-on #crosshair, #hud.killcam-on #hpwrap, #hud.killcam-on #ammo,
#hud.killcam-on #kd, #hud.killcam-on #radar, #hud.killcam-on #scores,
#hud.killcam-on #reloadRing, #hud.killcam-on #protection, #hud.killcam-on #scope { display:none; }

/* ===== Contrôles mobile =====
   Disposition en deux grappes par pouce, espacées d'au moins ~15-25px pour éviter
   les appuis fantômes, et groupées par fréquence d'usage :
   - pouce droit (grappe autour du joystick de visée) : TIR (gros, prioritaire),
     ADS et SAUT juste au-dessus, RECHARGE et ARME encore au-dessus (actions
     ponctuelles, pas besoin d'être sous le pouce en permanence) ;
   - pouce gauche (autour du joystick de déplacement) : uniquement GRENADE et
     ÉQUIPEMENT, actions rares, décalées loin au-dessus du joystick pour ne
     jamais interférer avec le déplacement. */
#mobile { position:fixed; inset:0; z-index:20; pointer-events:none; }
#mobile > * { pointer-events:auto; }
.stick { position:absolute; width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.30); }
.stick .knob { position:absolute; left:50%; top:50%; margin:-26px 0 0 -26px; width:52px; height:52px;
  border-radius:50%; background:rgba(255,255,255,.45); }
#stick-move { left:calc(20px + env(safe-area-inset-left)); bottom:calc(50px + env(safe-area-inset-bottom)); }
#stick-look { right:calc(20px + env(safe-area-inset-right)); bottom:calc(50px + env(safe-area-inset-bottom)); }
#mobile button { position:absolute; border:none; border-radius:50%; color:#fff; font-weight:900;
  background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.35); }

/* -- pouce droit -- */
#btn-fire { right:calc(165px + env(safe-area-inset-right)); bottom:calc(90px + env(safe-area-inset-bottom));
  width:100px; height:100px; font-size:19px; background:rgba(226,60,60,.55); }
#btn-ads { right:calc(90px + env(safe-area-inset-right)); bottom:calc(205px + env(safe-area-inset-bottom));
  width:60px; height:60px; font-size:14px; }
#btn-ads.on { background:rgba(46,109,246,.7); }
#btn-jump { right:calc(205px + env(safe-area-inset-right)); bottom:calc(210px + env(safe-area-inset-bottom));
  width:56px; height:56px; font-size:12px; }
#btn-reload { right:calc(90px + env(safe-area-inset-right)); bottom:calc(280px + env(safe-area-inset-bottom));
  width:54px; height:54px; font-size:16px; }
#btn-weapon { right:calc(200px + env(safe-area-inset-right)); bottom:calc(285px + env(safe-area-inset-bottom));
  width:50px; height:50px; font-size:11px; }

/* -- pouce gauche -- */
#btn-nade { left:calc(20px + env(safe-area-inset-left)); bottom:calc(200px + env(safe-area-inset-bottom));
  width:54px; height:54px; font-size:18px; }
#btn-loadout { left:calc(20px + env(safe-area-inset-left)); bottom:calc(270px + env(safe-area-inset-bottom));
  width:50px; height:50px; font-size:18px; }