:root{
  --gold:#f0b652;
  --gold2:#ffd98a;
  --gold3:#b07113;
  --dark:#0d0b09;
  --panel:rgba(16,10,6,.72);
  --panel2:rgba(23,16,10,.90);
  --line:rgba(255,222,160,.22);
  --white:#fff6de;
  --muted:#d0b996;
  --danger:#ff6d6d;
  --green:#7de8a8;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090603;color:var(--white);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{background:
radial-gradient(circle at 50% 10%,rgba(255,193,91,.08),transparent 28%),
linear-gradient(180deg,#150d07 0%,#090603 100%)}
canvas{display:block}
#game{position:fixed;inset:0}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 35%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.56) 100%);z-index:4}
#hud{position:fixed;inset:0;z-index:8;pointer-events:none}
.top-banner{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  min-width:min(900px,92vw);max-width:92vw;height:58px;
  background:linear-gradient(180deg,#f4c277,#df9e48);
  color:#1a1209;border:2px solid #3c2506;border-radius:0 0 18px 18px;
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  display:grid;grid-template-columns:1.2fr 1fr .8fr;align-items:center;
  padding:0 18px;box-shadow:0 15px 40px rgba(0,0,0,.35);font-weight:900;
}
.banner-title{font-size:19px;letter-spacing:.02em}
.banner-center{justify-self:center;display:flex;gap:18px;align-items:center;font-size:18px}
.banner-center span+span{opacity:.86}
.banner-class{justify-self:end;background:rgba(17,11,7,.16);padding:8px 12px;border-radius:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%)}
.crosshair:before,.crosshair:after{content:"";position:absolute;background:#1d140b;border-radius:2px;box-shadow:0 0 0 2px rgba(255,231,183,.88),0 0 10px rgba(0,0,0,.6)}
.crosshair:before{width:3px;height:24px;left:15px;top:5px}.crosshair:after{width:24px;height:3px;left:5px;top:15px}
.crosshair.hit:before,.crosshair.hit:after{background:var(--danger);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px rgba(255,96,96,.8)}
#killfeed{position:absolute;right:18px;top:84px;width:min(380px,42vw);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#fpsCounter{position:absolute;right:18px;top:14px;padding:5px 10px;border-radius:8px;
  background:rgba(20,10,4,.68);border:1px solid var(--line);color:#f7e2bf;
  font-size:12px;font-family:'Consolas','Menlo',monospace;letter-spacing:.03em;
  pointer-events:none;z-index:5}
#fpsCounter.fps-low{color:#ff8a7a}
.kill{background:rgba(20,10,4,.82);border:1px solid var(--line);padding:8px 12px;border-radius:11px;font-size:12px;animation:fadeKill 4.8s forwards;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.kill b{color:var(--gold2)}
@keyframes fadeKill{0%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
#minimapPanel{position:absolute;left:18px;top:78px;width:216px;height:216px;padding:8px;border-radius:16px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(7px);box-shadow:0 20px 50px rgba(0,0,0,.28)}
#minimap{width:100%;height:100%;display:block;border-radius:10px}
.score-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0}.score-row.me{color:var(--gold2);font-weight:800}
.score-row small{display:block;color:var(--muted);font-size:10px}
.label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.big-label{font-size:11px;color:#f4d5a0}
.stat-panel{position:absolute;bottom:18px;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(7px);display:flex;align-items:center;gap:12px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.bottom-left{left:18px;min-width:250px}.bottom-right{right:18px;min-width:255px}
.icon-heart{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#2c1b0c,#140c06);font-size:26px;border:1px solid rgba(255,214,145,.18)}
.hp-row{display:flex;align-items:center;gap:12px;margin-top:4px}.hp{font-size:28px;font-weight:900;min-width:46px}
.hpbar{width:145px;height:10px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden}.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),#bef8d4)}
.ammo{font-size:42px;font-weight:1000;line-height:1}.ammo small{font-size:17px;color:var(--muted)}
.class-info{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:10px 14px;border-radius:12px;background:rgba(20,10,4,.68);border:1px solid var(--line);font-size:12px;min-width:260px;text-align:center;color:#ffeecf}
#centerMessage{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.9)}
#centerMessage strong{font-size:40px;display:block;letter-spacing:.04em}#centerMessage span{font-size:14px;color:#f3ddbf}
#scoreboard{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,92vw);max-height:78vh;overflow:auto;z-index:12;background:rgba(15,9,5,.55);backdrop-filter:blur(6px);border:1px solid rgba(245,197,66,.28);border-radius:18px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.7)}
#scoreboard.show{display:block}
#scoreboard h2{margin:0 0 10px;color:var(--gold2);font-size:28px}
.board-head,.board-row{display:grid;grid-template-columns:1fr 150px 56px 60px 56px 60px 68px;gap:8px;padding:10px 12px}
.board-head{font-size:10px;color:var(--muted);text-transform:uppercase}.board-row{border-top:1px solid var(--line);font-size:13px;align-items:center}.board-row.me{background:rgba(245,197,66,.08);color:var(--gold2)}
#startScreen,#endScreen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:
radial-gradient(circle at 50% 20%,rgba(245,197,66,.10),transparent 28%),
linear-gradient(180deg,#110b07,#050303 75%)}
.panel{width:min(520px,92vw);padding:24px;border-radius:22px;background:var(--panel2);border:1px solid rgba(245,197,66,.24);box-shadow:0 35px 120px rgba(0,0,0,.72)}
.wide-panel{width:min(980px,95vw)}
.logo{width:86px;height:86px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f5c542,#9c7600);font-size:44px;color:#111;box-shadow:0 10px 36px rgba(245,197,66,.26)}
.panel h1{margin:0;text-align:center;font-size:38px;color:var(--gold2)}.panel p{text-align:center;color:var(--muted);font-size:13px;line-height:1.55;max-width:760px;margin:10px auto 0}
.field{margin-top:16px}.field label{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.field input{width:100%;height:46px;border-radius:12px;border:1px solid var(--line);outline:none;background:#17100c;color:white;padding:0 12px}.field input:focus{border-color:rgba(245,197,66,.55)}
.range-row{display:flex;align-items:center;gap:10px}.range-row input{flex:1}.range-value{min-width:34px;text-align:center;color:var(--gold2);font-weight:900}
.class-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.class-card{padding:14px;border-radius:16px;border:1px solid rgba(255,220,160,.16);background:linear-gradient(180deg,rgba(47,25,10,.86),rgba(22,12,6,.9));color:#ffedd1;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.class-card strong{display:block;font-size:18px;color:var(--gold2)}
.class-card span{display:block;margin-top:7px;font-size:12px;color:#f2d3a1}
.class-card small{display:block;margin-top:8px;font-size:11px;color:var(--muted)}
.class-card.active,.class-card:hover{transform:translateY(-2px);border-color:rgba(255,222,160,.45);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.primary{width:100%;height:52px;margin-top:20px;border:0;border-radius:14px;cursor:pointer;background:linear-gradient(180deg,#ffd98b,#e6a939);color:#16120a;font-weight:950;font-size:15px}
.tips{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;color:#dfd0b7;font-size:11px}
kbd{padding:2px 5px;border-radius:5px;background:#232833;border:1px solid #343a46}
#damageFlash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 28%,rgba(255,0,0,.40));transition:opacity .12s}
#deathScreen{position:fixed;inset:0;z-index:17;pointer-events:none;opacity:0;transition:opacity .25s ease}
#deathScreen.show{opacity:1}
.death-bar{position:fixed;left:0;right:0;height:0;background:#000;transition:height .6s cubic-bezier(.16,.84,.32,1)}
.death-bar-top{top:0}.death-bar-bottom{bottom:0}
#deathScreen.show .death-bar{height:12vh}
#deathText{position:fixed;left:0;right:0;top:50%;transform:translateY(-46%) scale(.92);text-align:center;opacity:0;transition:opacity .5s ease .22s,transform .65s cubic-bezier(.2,.85,.25,1.2) .22s}
#deathScreen.show #deathText{opacity:1;transform:translateY(-50%) scale(1)}
.death-title{font-weight:900;font-size:min(10vw,86px);letter-spacing:.05em;color:#eae6dd;text-shadow:0 0 30px rgba(0,0,0,.9),0 6px 0 rgba(0,0,0,.55);text-transform:uppercase}
.death-killer{margin-top:8px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--danger);text-shadow:0 3px 14px rgba(0,0,0,.9)}
body.is-dead #crosshair{opacity:0;transition:opacity .2s}

/* --- Cannocchiale del cecchino: bordi neri + tubo circolare con reticolo --- */
#scopeOverlay{position:fixed;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity .12s ease}
#scopeOverlay.show{opacity:1}
/* le fasce nere ai lati riempiono lo schermo attorno al tubo */
.scope-dark{position:absolute;inset:0;background:#000;
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 calc(min(46vw,46vh)), #000 calc(min(46vw,46vh) + 1px));
  mask:radial-gradient(circle at 50% 50%, transparent 0 calc(min(46vw,46vh)), #000 calc(min(46vw,46vh) + 1px))}
.scope-ring{position:absolute;left:50%;top:50%;width:min(92vw,92vh);height:min(92vw,92vh);transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:inset 0 0 0 10px #05060a, inset 0 0 70px 24px rgba(0,0,0,.85)}
.scope-line{position:absolute;background:rgba(10,12,14,.92)}
.scope-line-h{left:6%;right:6%;top:50%;height:2px;transform:translateY(-50%)}
.scope-line-v{top:6%;bottom:6%;left:50%;width:2px;transform:translateX(-50%)}
/* interruzione centrale del reticolo, per non coprire il bersaglio */
.scope-center{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,0,0,0) 0 30px,transparent 31px)}
.scope-center:before{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;
  transform:translate(-50%,-50%);background:#c0392b;border-radius:50%;box-shadow:0 0 6px rgba(220,60,50,.9)}
/* tacche di alzo sotto il centro, come su un reticolo vero */
.scope-ticks{position:absolute;left:50%;top:50%;width:70px;height:120px;transform:translate(-50%,4px);
  background:
    linear-gradient(rgba(10,12,14,.85),rgba(10,12,14,.85)) center 18px/22px 2px no-repeat,
    linear-gradient(rgba(10,12,14,.85),rgba(10,12,14,.85)) center 40px/16px 2px no-repeat,
    linear-gradient(rgba(10,12,14,.85),rgba(10,12,14,.85)) center 62px/12px 2px no-repeat,
    linear-gradient(rgba(10,12,14,.85),rgba(10,12,14,.85)) center 84px/8px 2px no-repeat}
body.scoped #crosshair{opacity:0}

/* --- Punto rosso del mirino reflex (AK e mitragliatrice) --- */
#redDot{position:fixed;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);
  z-index:14;pointer-events:none;opacity:0;transition:opacity .1s ease;border-radius:50%;
  background:#ff3b30;box-shadow:0 0 6px 2px rgba(255,59,48,.85),0 0 18px 6px rgba(255,59,48,.35)}
#redDot.show{opacity:1}
body.reddot #crosshair{opacity:0}

body.is-dead .stat-panel{opacity:.4;transition:opacity .3s}
#reload{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);padding:8px 14px;border-radius:10px;background:rgba(20,10,4,.75);border:1px solid var(--line);color:#f7e2bf;font-size:12px;display:none}
.siren-prompt{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);padding:8px 16px;border-radius:10px;background:rgba(30,8,8,.8);border:1px solid #b8382f;color:#ffe2df;font-size:13px;letter-spacing:.02em;display:none;align-items:center;gap:8px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.siren-prompt.show{display:flex}
.siren-prompt b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;background:#e8534a;color:#2a0a08;font-size:12px;font-weight:800}
@media(max-width:980px){.class-picker{grid-template-columns:repeat(2,1fr)}.top-banner{grid-template-columns:1fr 1fr;padding:0 14px;height:auto;min-height:58px}.banner-class{display:none}.banner-center{justify-self:end;font-size:16px}.banner-title{font-size:17px}}
@media(max-width:700px){#minimapPanel{display:none}.top-banner{width:95vw;grid-template-columns:1fr;gap:2px;padding:10px 12px;border-radius:0 0 16px 16px;height:auto}.banner-title,.banner-center{justify-self:center}.stat-panel{padding:10px 12px}.bottom-left{left:10px;min-width:180px}.bottom-right{right:10px;min-width:180px}.ammo{font-size:30px}.class-info{display:none}.panel h1{font-size:28px}.tips{grid-template-columns:repeat(2,1fr)}.class-picker{grid-template-columns:1fr}.board-head,.board-row{grid-template-columns:1fr 88px 42px 46px 42px 46px 52px}}

/* --- Selettore modalità di fuoco (tasto X) --- */
.fire-mode{margin-top:2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#e8c078;opacity:0;transition:opacity .15s ease}
.fire-mode.show{opacity:.95}
.fire-mode b{color:#fff3d8;font-weight:800}
.fire-mode.flash{animation:fmFlash .45s ease}
@keyframes fmFlash{0%{transform:scale(1.18);color:#fff}100%{transform:scale(1);color:#e8c078}}

/* --- Indicatore di postura (Ctrl accovacciato, Z prono) --- */
.stance-indicator{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  z-index:12;pointer-events:none;padding:5px 14px;border-radius:999px;
  background:rgba(24,16,9,.6);border:1px solid rgba(255,222,160,.22);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#f0d3a0;
  opacity:0;transition:opacity .15s ease}
.stance-indicator.show{opacity:1}

/* --- Hitmarker: quattro trattini diagonali che formano una X, uno per colpo --- */
#hitmarker{position:fixed;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);
  z-index:13;pointer-events:none;opacity:0}
#hitmarker span{position:absolute;width:11px;height:2.5px;border-radius:2px;background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
#hitmarker span:nth-child(1){left:0;top:5px;transform:rotate(45deg)}
#hitmarker span:nth-child(2){right:0;top:5px;transform:rotate(-45deg)}
#hitmarker span:nth-child(3){left:0;bottom:5px;transform:rotate(-45deg)}
#hitmarker span:nth-child(4){right:0;bottom:5px;transform:rotate(45deg)}
#hitmarker.kill span{background:#ff5a4a}
#hitmarker.show{animation:hitPop .26s ease-out}
@keyframes hitPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}

/* --- Riga inventario (arma attiva e granate) --- */
.loadout{margin-top:3px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cbb08a}
.loadout b{color:#ffe6ad}
.loadout .off{opacity:.4}

/* --- Menu di pausa in stile COD: opzioni a sinistra, mappa a destra --- */
/* pointer-events:auto è indispensabile: il menu vive dentro #hud che ha
   pointer-events:none, quindi senza questo i pulsanti non sono cliccabili */
#pauseMenu{position:fixed;inset:0;z-index:22;display:none;pointer-events:auto;
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.1fr);align-items:center;gap:40px;
  padding:0 6vw;background:linear-gradient(90deg,rgba(10,7,4,.92),rgba(10,7,4,.62))}
#pauseMenu.show{display:grid}
.pause-title{font-size:44px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:#ffe6ad;margin-bottom:18px;text-shadow:0 6px 26px rgba(0,0,0,.7)}
.pause-opt{display:block;width:100%;max-width:330px;text-align:left;margin:6px 0;padding:12px 16px;
  background:rgba(255,222,160,.06);border:1px solid rgba(255,222,160,.18);border-radius:10px;
  color:#f2dcb4;font-size:15px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s}
.pause-opt:hover{background:rgba(255,222,160,.16);border-color:rgba(255,222,160,.45);transform:translateX(4px)}
.pause-resume{margin-top:16px;background:rgba(96,211,148,.12);border-color:rgba(96,211,148,.35);color:#bff3d6}
.pause-classes{display:none;margin:8px 0 4px;max-width:330px}
.pause-classes.show{display:block}
.pause-class{display:block;width:100%;text-align:left;margin:4px 0;padding:9px 14px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,222,160,.14);color:#e6d3ae;
  font-size:13px;cursor:pointer}
.pause-class:hover{background:rgba(255,222,160,.14)}
.pause-class.sel{border-color:var(--gold2);color:#fff3d8;background:rgba(245,197,66,.14)}
.pause-class small{display:block;font-size:11px;color:#a9906c;margin-top:2px}
.pause-hint{margin-top:14px;font-size:11px;color:#a08a68;letter-spacing:.06em;max-width:330px}

#audioDebugPanel{position:fixed;inset:0;z-index:30;display:none;pointer-events:auto;
  align-items:center;justify-content:center;background:rgba(6,4,2,.82)}
#audioDebugPanel.show{display:flex}
.debug-box{width:min(560px,92vw);max-height:86vh;overflow-y:auto;padding:22px 26px;
  background:rgba(16,11,7,.96);border:1px solid rgba(255,222,160,.22);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.debug-title{font-size:18px;font-weight:800;letter-spacing:.04em;color:#ffe6ad;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center}
.debug-title span{font-size:11px;font-weight:400;color:#a08a68;cursor:pointer;letter-spacing:.04em}
.debug-title span:hover{color:#f2dcb4}
.debug-section{margin:14px 0;padding-bottom:14px;border-bottom:1px solid rgba(255,222,160,.1)}
.debug-label{font-size:12px;color:#e6d3ae;letter-spacing:.03em;margin-bottom:8px}
.debug-hint{font-size:11px;color:#8a765a;margin-top:8px;line-height:1.5}
.debug-btn{padding:9px 16px;border-radius:8px;background:rgba(255,222,160,.08);
  border:1px solid rgba(255,222,160,.25);color:#f2dcb4;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:background .15s}
.debug-btn:hover{background:rgba(255,222,160,.18)}
.debug-log{font-family:'Consolas','Menlo',monospace;font-size:11px;line-height:1.6;color:#bcae8f;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,222,160,.1);border-radius:8px;
  padding:10px 12px;max-height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
.debug-log .ok{color:#8fd9a8}
.debug-log .err{color:#f08a7e}
.pause-right{display:flex;flex-direction:column;align-items:center;gap:10px}
.pause-maptitle{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#c8ab7e}
#pauseMap{width:min(46vh,520px);height:min(46vh,520px);border-radius:14px;
  background:rgba(18,12,7,.7);border:1px solid rgba(255,222,160,.2);box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* --- Killcam di fine partita --- */
#killcam{position:fixed;inset:0;z-index:18;pointer-events:none;display:none}
#killcam.show{display:block}
.killcam-top{position:absolute;top:8vh;left:0;right:0;text-align:center}
.killcam-title{font-size:34px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  color:#ffe6ad;text-shadow:0 6px 26px rgba(0,0,0,.85)}
.killcam-info{margin-top:6px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#f0b8a8}
.killcam-bar{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);
  width:min(420px,60vw);height:4px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.killcam-bar i{display:block;height:100%;width:0;background:#ffd27a}

/* --- Barra della resistenza per lo sprint --- */
.sprint-meter{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);
  width:132px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);
  z-index:12;pointer-events:none;opacity:0;transition:opacity .2s ease;overflow:hidden}
.sprint-meter.show{opacity:1}
.sprint-meter i{display:block;height:100%;width:100%;background:#8fe0a8;transition:width .08s linear}
.sprint-meter.spent i{background:#e08f6a}

/* --- Scelta della modalità nella schermata iniziale --- */
.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text);text-align:left;cursor:pointer;transition:all .15s}
.mode-card:hover{background:rgba(255,222,160,.1)}
.mode-card.active{border-color:var(--gold2);background:rgba(245,197,66,.14)}
.mode-card strong{display:block;font-size:14px}
.mode-card span{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* --- Punteggi di squadra nel banner --- */
.team-scores{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:9;
  display:none;gap:10px;align-items:center;padding:5px 16px;border-radius:99px;
  background:rgba(24,16,9,.72);border:1px solid rgba(255,222,160,.2);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.team-scores.show{display:flex}
.team-scores b{font-size:16px;font-weight:900}
.team-a{color:#ffd76a}.team-b{color:#ff9b5a}.team-sep{color:#7a6748}
.board-row.ally{background:rgba(255,215,106,.07)}
.board-row.enemy{background:rgba(255,155,90,.07)}

/* --- Miccia della granata tenuta in mano --- */
.cook-meter{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);
  width:132px;height:5px;border-radius:99px;background:rgba(255,255,255,.16);
  z-index:13;pointer-events:none;opacity:0;transition:opacity .12s ease;overflow:hidden}
.cook-meter.show{opacity:1}
.cook-meter i{display:block;height:100%;width:100%;background:#ffd27a}
.cook-meter.danger i{background:#ff5a4a}
.cook-meter.danger{animation:cookPulse .28s infinite alternate}
@keyframes cookPulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.08)}}

/* --- Schermate di ingresso, accesso e lobby --- */
#entryScreen,#authScreen,#lobbyScreen{position:fixed;inset:0;z-index:30;display:none;
  align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#241708,#0d0904 70%)}
#entryScreen.show,#authScreen.show,#lobbyScreen.show{display:flex}
.entry-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 6px}
.entry-card{padding:22px 18px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text);text-align:left;cursor:pointer;transition:all .15s}
.entry-card:hover{background:rgba(255,222,160,.12);border-color:var(--gold2);transform:translateY(-2px)}
.entry-card strong{display:block;font-size:18px;margin-bottom:4px}
.entry-card span{display:block;font-size:12px;color:var(--muted)}
.entry-note{margin-top:12px;font-size:12px;color:var(--muted);min-height:16px}
.auth-error{min-height:18px;margin:6px 0;font-size:13px;color:#ff8f7a}
.auth-actions{display:flex;gap:10px;margin-top:8px}
.auth-actions button{flex:1}
.link-btn{margin-top:14px;background:none;border:none;color:var(--muted);
  text-decoration:underline;cursor:pointer;font-size:12px;padding:0}
.link-btn:hover{color:var(--text)}
.lobby-panel{max-width:760px;width:92vw}
.lobby-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lobby-user{font-size:12px;color:var(--muted);letter-spacing:.08em}
.lobby-actions{display:flex;gap:10px;margin:12px 0}
.lobby-actions button{flex:1}
.lobby-classes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lobby-classes button{padding:9px 6px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text);font-size:12px;cursor:pointer}
.lobby-classes button.active{border-color:var(--gold2);background:rgba(245,197,66,.14)}
.room-list{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.room-row b{font-size:14px}
.room-row small{display:block;color:var(--muted);font-size:11px}
.room-row button{padding:7px 14px;font-size:12px}
.room-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.lobby-room{display:none}
.lobby-room.show{display:block}
#lobbyBrowser.hide{display:none}
.room-title{font-size:16px;font-weight:800;margin:6px 0 10px;color:#ffe6ad}
.room-players{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.room-player{display:flex;justify-content:space-between;padding:8px 12px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px}
.room-player .tag-a{color:#ffd76a}.room-player .tag-b{color:#ff9b5a}
.room-player .host-tag{color:var(--gold2);font-size:11px;letter-spacing:.1em}

/* --- Pulsanti secondari delle schermate di menu ---
   Senza questa regola i pulsanti diversi da .primary ereditavano lo stile
   predefinito del browser: sfondo bianco e font di sistema, fuori tema. --- */
.auth-actions button,
.lobby-actions button,
.room-row button,
.entry-choices button {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  color: #f2dcb4;
  background: rgba(255, 222, 160, .07);
  border: 1px solid rgba(255, 222, 160, .26);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.auth-actions button:hover,
.lobby-actions button:hover,
.room-row button:hover {
  background: rgba(255, 222, 160, .18);
  border-color: var(--gold2);
  color: #fff3d8;
}
.auth-actions button:disabled,
.lobby-actions button:disabled,
.room-row button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
/* il pulsante principale resta dorato e pieno, ma allineato in altezza */
.lobby-actions .primary,
.auth-actions .primary { width: auto; height: auto; margin-top: 0; padding: 14px 16px; }
.entry-choices button { text-transform: none; letter-spacing: normal; font-weight: 400; }
.room-row button { padding: 8px 16px; font-size: 12px; }

/* --- Classifica divisa in due squadre (stile COD) --- */
.team-block{border-radius:12px;overflow:hidden;border:1px solid rgba(255,222,160,.14)}
.team-block.own{border-color:rgba(255,215,106,.45)}
.team-header{display:flex;justify-content:space-between;align-items:center;
  padding:9px 16px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.team-header.ha{background:rgba(255,215,106,.16);color:#ffd76a}
.team-header.hb{background:rgba(255,155,90,.16);color:#ff9b5a}
.team-gap{height:22px}

/* --- Esito della partita: la scena si congela e sbianca --- */
/* Il filtro va sul canvas: così il gioco resta fermo in bianco e nero
   mentre l'esito appare sopra, e poi torna a colori per la killcam. */
canvas.freeze-bw{filter:grayscale(1) contrast(1.06) brightness(.92);transition:filter .9s ease}
#outcomeScreen{position:fixed;inset:0;z-index:24;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.25),rgba(0,0,0,.65));opacity:0;
  transition:opacity .6s ease}
#outcomeScreen.show{display:flex;opacity:1}
.outcome-title{font-size:min(9vw,88px);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 6px 30px rgba(0,0,0,.9)}
.outcome-title.win{color:#7ee08f}
.outcome-title.lose{color:#ff6b5a}
.outcome-title.draw{color:#e8d8a8}
.outcome-sub{font-size:18px;letter-spacing:.1em;color:#e9dcc2;text-shadow:0 3px 16px rgba(0,0,0,.9)}
.outcome-scores{display:flex;gap:46px;margin-top:26px;align-items:center}
.outcome-team{text-align:center}
.outcome-team b{display:block;font-size:min(6vw,58px);font-weight:900;line-height:1}
.outcome-team span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cbb08a}
.outcome-team.ta b{color:#ffd76a}.outcome-team.tb b{color:#8fc7ff}

/* --- Classifiche finali, con la mappa sullo sfondo --- */
#resultsScreen{position:fixed;inset:0;z-index:26;display:none;align-items:center;justify-content:center;
  background:linear-gradient(rgba(8,6,4,.55),rgba(8,6,4,.75))}
#resultsScreen.show{display:flex}
.results-box{width:min(1000px,94vw);max-height:88vh;overflow-y:auto;border-radius:14px;
  background:rgba(12,9,6,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,222,160,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.results-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  background:rgba(255,222,160,.09);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#e8d1a4}
.results-cols{display:grid;grid-template-columns:repeat(5,72px);text-align:center;gap:0;font-size:11px;color:#b39c78}
.results-team{border-top:1px solid rgba(255,222,160,.14)}
.results-team-head{display:flex;align-items:center;gap:14px;padding:10px 20px}
.results-team-head b{font-size:34px;font-weight:900;line-height:1}
.results-team-head span{font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.results-team.ta .results-team-head{background:rgba(255,215,106,.12)}
.results-team.ta b,.results-team.ta span{color:#ffd76a}
.results-team.tb .results-team-head{background:rgba(143,199,255,.12)}
.results-team.tb b,.results-team.tb span{color:#8fc7ff}
.results-row{display:flex;justify-content:space-between;align-items:center;padding:9px 20px;
  border-top:1px solid rgba(255,255,255,.05);font-size:14px}
.results-row.me{background:rgba(245,197,66,.12)}
.results-row .rname{display:flex;flex-direction:column}
.results-row .rname small{font-size:11px;color:#a9906c}
.results-row .rstats{display:grid;grid-template-columns:repeat(5,72px);text-align:center;font-variant-numeric:tabular-nums}
.results-row .rstats b{color:#ffe6ad}
.results-actions{display:flex;gap:12px;padding:16px 20px}
.results-actions .primary{width:auto;flex:1;margin-top:0;height:46px}