@font-face{font-family:Saira;font-weight:800;font-display:swap;src:url(./assets/fonts/SairaCondensed-ExtraBold.woff2) format("woff2")}
@font-face{font-family:Saira;font-weight:600;font-display:swap;src:url(./assets/fonts/SairaCondensed-SemiBold.woff2) format("woff2")}
:root{--ink:#12161c;--ink2:#1c222b;--paper:#f4f1ea;--orange:#ff5a1f;--red:#d8232a;--muted:#a9b0ba;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:Saira,"Arial Narrow",sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}

/* schermate */
.screen{position:fixed;inset:0;display:grid;place-items:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));z-index:10}
.menu{background:#0d1014 url(./assets/hero.jpg) center/cover no-repeat}
.menu::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,16,20,.35) 0%,rgba(13,16,20,.15) 40%,rgba(13,16,20,.9) 100%)}
@media (orientation:portrait){.menu{background-image:url(./assets/hero_portrait.jpg)}}
@media (orientation:landscape) and (min-width:1400px) and (min-resolution:1.5dppx),(orientation:landscape) and (min-width:2200px){.menu{background-image:url(./assets/hero_4k.jpg)}}
.menu-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:min(420px,100%)}
.menu-logo{width:min(300px,62vw,38vh);filter:drop-shadow(0 6px 24px rgba(0,0,0,.6));background:rgba(18,22,28,.82);padding:18px 18px 12px;border-bottom:4px solid var(--red)}
.menu-actions{display:flex;flex-direction:column;gap:10px;width:100%}
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;width:100%;
  font-weight:800;font-size:20px;letter-spacing:.06em;background:rgba(28,34,43,.92);border:1px solid rgba(255,255,255,.14);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .08s,background .15s}
.btn:active{transform:scale(.98)}
.btn:hover:not(:disabled){background:#2a323e}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--orange);border-color:transparent;color:#140a05;font-size:24px;min-height:60px}
.btn.primary:hover:not(:disabled){background:#ff7340}
.btn.primary:disabled{opacity:1;background:#3a2a22;color:var(--paper)}
.btn small{font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--orange)}
.btn.small{font-size:16px;min-height:44px}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.2)}
#bar{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--orange);transition:width .2s}
.hint{margin:0;text-align:center;font-weight:600;font-size:15px;letter-spacing:.03em;color:#d7dbe0;line-height:1.5;text-shadow:0 1px 4px #000}
.hint kbd{font:inherit;font-weight:800;padding:1px 6px;border:1px solid rgba(255,255,255,.35);border-radius:4px;margin:0 2px}
.rotate-hint{display:none;margin:0;font-weight:600;font-size:13px;color:var(--muted)}
@media (orientation:portrait) and (pointer:coarse){.rotate-hint{display:block}}
.dim{background:rgba(10,12,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card{display:flex;flex-direction:column;gap:10px;width:min(380px,100%);padding:22px;background:var(--ink);border-top:4px solid var(--red);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card h2{margin:0 0 6px;font-size:40px;line-height:1;letter-spacing:.04em;text-align:center}
.card .row{display:flex;gap:10px}
.eyebrow{margin:0;text-align:center;color:var(--orange);font-weight:600;letter-spacing:.14em;font-size:14px}
#resScore{font-size:72px;color:var(--paper)}
.stats{display:flex;justify-content:space-around;margin:0 0 6px;color:var(--muted);font-weight:600;font-size:14px}
.stats span{display:flex;flex-direction:column;align-items:center}
.stats b{font-size:26px;color:var(--paper)}
.record{margin:0;text-align:center;color:var(--orange);font-weight:800;font-size:22px;letter-spacing:.08em;animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.5}}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.hud-logo{position:absolute;top:calc(12px + var(--safe-t));left:calc(14px + var(--safe-l));height:34px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.score{position:absolute;top:calc(10px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:8px;
  padding:4px 16px;background:rgba(18,22,28,.72);border-bottom:3px solid var(--orange)}
.score b{font-size:30px;font-weight:800;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.score small{font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--muted)}
#timer{font-weight:800;font-size:30px;color:var(--orange);padding-right:10px;margin-right:4px;border-right:1px solid rgba(255,255,255,.2);font-variant-numeric:tabular-nums}
#timer.low{color:#ff3b30;animation:pulse .5s infinite alternate}
.round{pointer-events:auto;position:absolute;top:calc(10px + var(--safe-t));right:calc(12px + var(--safe-r));width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,22,28,.72);border:1px solid rgba(255,255,255,.2)}
.round svg{width:22px;fill:var(--paper)}
.crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
.crosshair i{position:absolute;background:var(--paper);box-shadow:0 0 2px #000;transition:all .08s}
.crosshair i:nth-child(1),.crosshair i:nth-child(2){width:2px;height:9px;left:-1px}
.crosshair i:nth-child(1){top:-15px}.crosshair i:nth-child(2){top:6px}
.crosshair i:nth-child(3),.crosshair i:nth-child(4){height:2px;width:9px;top:-1px}
.crosshair i:nth-child(3){left:-15px}.crosshair i:nth-child(4){left:6px}
.crosshair::after{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--orange)}
.crosshair.fire i:nth-child(1){top:-19px}.crosshair.fire i:nth-child(2){top:10px}.crosshair.fire i:nth-child(3){left:-19px}.crosshair.fire i:nth-child(4){left:10px}
.crosshair.hit i{background:var(--orange)}
.crosshair.hit i:nth-child(1){transform:rotate(45deg)}.crosshair.hit i:nth-child(2){transform:rotate(45deg)}
.crosshair.hit i:nth-child(3){transform:rotate(45deg)}.crosshair.hit i:nth-child(4){transform:rotate(45deg)}
.popups{position:absolute;left:50%;top:50%}
.pop{position:absolute;left:18px;top:-40px;white-space:nowrap;font-weight:800;font-size:26px;color:var(--paper);text-shadow:0 2px 6px rgba(0,0,0,.8);animation:rise .8s ease-out forwards}
.pop.center{color:var(--orange);font-size:30px}
@keyframes rise{from{transform:translateY(8px) scale(.8);opacity:0}15%{opacity:1;transform:translateY(0) scale(1.05)}to{transform:translateY(-34px);opacity:0}}
.toast{position:absolute;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%);max-width:calc(100% - 40px);padding:10px 18px;text-align:center;
  font-weight:600;font-size:16px;letter-spacing:.03em;background:rgba(18,22,28,.82);border-left:3px solid var(--orange)}
.big-count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:120px;font-weight:800;color:var(--paper);text-shadow:0 4px 18px rgba(0,0,0,.7)}

/* controlli touch */
.touch{display:none}
.is-touch .touch{display:block}
.is-touch .toast{bottom:auto;top:calc(64px + var(--safe-t))}
.stick-zone{pointer-events:auto;position:absolute;left:0;bottom:0;width:45%;height:65%;touch-action:none}
.stick-base{position:absolute;left:calc(28px + var(--safe-l));bottom:calc(28px + var(--safe-b));width:128px;height:128px;margin:0;border-radius:50%;
  background:rgba(18,22,28,.35);border:2px solid rgba(244,241,234,.35);transition:opacity .2s;opacity:.75}
.stick-base.active{opacity:1}
.stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(244,241,234,.85);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.fire{pointer-events:auto;position:absolute;right:calc(26px + var(--safe-r));bottom:calc(30px + var(--safe-b));width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,90,31,.88);color:#140a05;box-shadow:0 4px 20px rgba(0,0,0,.45);touch-action:none}
.fire svg{width:46px}
.fire.on{transform:scale(.93);background:#ff7a45}
@media (max-height:460px){.card{gap:7px;padding:14px 18px}.card h2{font-size:30px;margin:0}.btn{min-height:42px;font-size:17px}.btn.primary{min-height:46px;font-size:20px}
  #resScore{font-size:48px}.stats b{font-size:20px}.menu-inner{gap:10px}.menu-logo{width:min(220px,34vh*1.1);padding:10px 12px 6px}}
@media (max-height:440px){.stick-base{width:110px;height:110px}.fire{width:84px;height:84px}.hud-logo{height:28px}.score b,#timer{font-size:24px}}
@media (max-width:520px){.hud-logo{height:26px;top:calc(62px + var(--safe-t))}}
.noscript{position:fixed;inset:0;display:grid;place-items:center;margin:0}

/* 1 VS 1 */
.btn.vs{background:var(--red);border-color:transparent;font-size:22px}
.btn.vs:hover:not(:disabled){background:#ec2f37}
.btn.vs small{color:#ffd9c9}
.btn.wa{background:#1f8f4e;text-decoration:none;color:#fff}
.field{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.card input{font:inherit;font-weight:800;font-size:20px;letter-spacing:.06em;color:var(--paper);background:var(--ink2);border:1px solid rgba(255,255,255,.18);padding:10px 12px;min-width:0;width:100%;text-transform:uppercase;-webkit-user-select:text;user-select:text}
#vsLink{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.card input:focus,.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.invite{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--ink2);border-left:3px solid var(--orange)}
.invite p{margin:0;font-weight:600;color:var(--muted)}
.invite b{color:var(--paper);font-size:26px;letter-spacing:.2em;margin-left:6px}
.card .row{flex-wrap:wrap}.card .row .btn{flex:1 1 30%;width:auto}
.join input{flex:1 1 50%}
.status{margin:0;min-height:1.4em;font-weight:600;font-size:15px;color:var(--paper);text-align:center}
.status.err{color:#ff6b5e}
.note{margin:0;font-weight:600;font-size:15px;color:#ffd9c9;line-height:1.4}
.note.center{text-align:center;color:var(--muted)}
.big{margin:0;text-align:center;font-weight:800;font-size:56px;line-height:1}
.vsbar,.vitals,.hurt{display:none}
.versus .vsbar{display:flex;position:absolute;top:calc(8px + var(--safe-t));left:50%;transform:translateX(-50%);align-items:stretch;background:rgba(18,22,28,.78)}
.vsbar b{display:grid;place-items:center;min-width:44px;font-size:30px;background:var(--orange);color:#140a05}
.vsbar b:last-child{background:var(--red);color:#fff}
.vsbar span{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 14px;font-weight:800;font-size:16px;white-space:nowrap}
.vsbar small{font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.vsbar i{font-style:normal;color:var(--muted);font-weight:600;padding:0 4px}
.vsbar em{font-style:normal;color:#ff8a80}
.versus .score{display:none}
.versus .vitals{display:flex;position:absolute;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%);flex-direction:column;gap:3px;width:min(300px,42vw)}
.bar{height:9px;background:rgba(0,0,0,.55);transform:skewX(-14deg);overflow:hidden}
.bar i{display:block;height:100%;transition:width .15s}
.bar.shield i{background:linear-gradient(90deg,#3aa8ff,#7cc8ff)}
.bar.hp{height:7px}.bar.hp i{background:var(--paper)}
#hpText{align-self:flex-end;font-weight:800;font-size:15px;text-shadow:0 1px 3px #000}
.ammo-box{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(20px + var(--safe-b));display:flex;align-items:baseline;gap:6px;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.ammo-box b{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums}
.ammo-box b.low{color:#ff6b5e}
.ammo-box small{font-weight:600;color:var(--muted);font-size:16px}
.is-touch .ammo-box{right:calc(132px + var(--safe-r));bottom:calc(36px + var(--safe-b))}
.is-touch .ammo-box b{font-size:30px}
.versus .hurt{display:block;position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(220,20,20,.55) 100%)}
.hurt.on{animation:hurt .45s ease-out}
@keyframes hurt{from{opacity:1}to{opacity:0}}
.banner{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px;background:linear-gradient(90deg,transparent,rgba(160,20,26,.88) 20%,rgba(160,20,26,.88) 80%,transparent);animation:slam .35s ease-out}
.banner.good{background:linear-gradient(90deg,transparent,rgba(220,90,20,.9) 20%,rgba(220,90,20,.9) 80%,transparent)}
.banner b{font-size:clamp(34px,7vw,64px);font-weight:800;letter-spacing:.06em;line-height:1}
.banner span{font-weight:600;font-size:17px;letter-spacing:.06em}
@keyframes slam{from{transform:scale(1.4);opacity:0}to{transform:none;opacity:1}}
.pop.dmg{font-size:24px;color:var(--paper)}
.pop.dmg.shield{color:#5cb8ff}
.pop.dmg.head{color:#ffd23a;font-size:30px}
.act{display:none;pointer-events:auto;position:absolute;width:62px;height:62px;border-radius:50%;place-items:center;font-weight:800;font-size:14px;letter-spacing:.04em;
  background:rgba(18,22,28,.6);border:2px solid rgba(244,241,234,.45);color:var(--paper);touch-action:none}
.is-touch .act{display:grid}
.act.on{background:rgba(255,90,31,.6)}
.act.jump{right:calc(132px + var(--safe-r));bottom:calc(92px + var(--safe-b))}
.act.crouch{right:calc(40px + var(--safe-r));bottom:calc(140px + var(--safe-b))}
.act.reload{right:calc(112px + var(--safe-r));bottom:calc(168px + var(--safe-b));width:50px;height:50px;font-size:12px}
@media (max-height:460px){.act{width:54px;height:54px}.act.crouch{bottom:calc(120px + var(--safe-b))}.act.reload{bottom:calc(150px + var(--safe-b))}.big{font-size:40px}}
.invited #vsCreate{display:none}
.invited .join .btn{background:var(--orange);color:#140a05;font-size:20px;flex-basis:40%}
.vsbar span{display:block;text-align:center;line-height:1.15;padding:3px 14px}
.vsbar small{display:block}
@media (max-width:760px){.versus .hud-logo{display:none}}

/* classi */
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.classes button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:rgba(28,34,43,.92);border:1px solid rgba(255,255,255,.14);min-width:0}
.classes b{font-weight:800;font-size:17px;letter-spacing:.05em}
.classes span{font-weight:600;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.classes button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.classes button[aria-pressed="true"] span{color:#5a3a2a}
/* ottica del cecchino */
.scope{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent 33vmin,rgba(0,0,0,.96) 33.4vmin)}
.scope i{position:absolute;left:50%;top:50%;width:66vmin;height:66vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.scope i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ff3b30}
.scope:not([hidden]) ~ .crosshair{display:none}
.act.ads{right:calc(196px + var(--safe-r));bottom:calc(30px + var(--safe-b));width:58px;height:58px}
.act.ads.lit{background:rgba(255,90,31,.75);border-color:var(--orange)}
@media (max-height:460px){.classes b{font-size:15px}.classes span{font-size:11px}.classes button{padding:5px 3px}.act.ads{width:52px;height:52px}}
.ammo-box,.vitals,.vsbar,.score,.hud-logo,.round,.touch,.banner,.popups{z-index:2}

/* ---------- menu tipo lobby ---------- */
.menu{background:transparent;place-items:stretch;padding:0}
.loading .menu{background:#0d1014 url(./assets/hero.jpg) center/cover no-repeat}
.menu::before{background:linear-gradient(90deg,transparent 35%,rgba(13,16,20,.55) 62%,rgba(13,16,20,.9) 100%)}
.menu-brand{position:absolute;top:calc(14px + var(--safe-t));left:calc(18px + var(--safe-l));height:40px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.legend-plate{position:absolute;left:calc(26% - 110px);bottom:calc(18px + var(--safe-b));width:220px;display:flex;flex-direction:column;align-items:center;
  padding:8px 10px 10px;background:rgba(18,22,28,.82);border-bottom:4px solid #4cc8ff;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%)}
.legend-plate small{font-weight:600;font-size:12px;letter-spacing:.2em;color:#8fd8ff}
.legend-plate b{font-size:24px;letter-spacing:.06em}
.menu-panel{position:absolute;right:calc(18px + var(--safe-r));top:50%;transform:translateY(-50%);width:min(390px,44vw);display:flex;flex-direction:column;gap:10px}
.btn.big{flex-direction:column;align-items:flex-start;gap:0;min-height:72px;padding:8px 18px;text-align:left}
.btn.big span{font-size:26px;line-height:1.05}
.btn.big small{font-weight:600;font-size:14px;letter-spacing:.03em;opacity:.85}
.btn.big.primary small{color:#3a1a08}
.label{margin:6px 0 0;font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.label.or{text-align:center;margin-top:4px}
.menu-row{display:flex;gap:8px}.menu-row .btn{flex:1}
.menu .hint{font-size:13px;text-align:left}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-weight:600;font-size:17px;line-height:1.35}
.steps svg{width:20px;height:20px;vertical-align:-4px;color:#4cc8ff}
.fire{flex-direction:column}
.fire span{font-weight:800;font-size:12px;letter-spacing:.08em;margin-bottom:-6px}
.act.reload{font-size:10px}
@media (orientation:portrait){
  .menu::before{background:linear-gradient(180deg,transparent 30%,rgba(13,16,20,.7) 52%,rgba(13,16,20,.95) 100%)}
  .menu-panel{left:calc(16px + var(--safe-l));right:calc(16px + var(--safe-r));top:auto;bottom:calc(14px + var(--safe-b));transform:none;width:auto}
  .legend-plate{left:50%;transform:translateX(-50%);bottom:auto;top:44%}
  .menu .hint,.rotate-hint{display:none}
  .btn.big{min-height:62px}.btn.big span{font-size:23px}
}
@media (max-height:460px){
  .menu-panel{gap:6px}.btn.big{min-height:52px;padding:4px 14px}.btn.big span{font-size:21px}.btn.big small{font-size:12px}
  .menu .hint{display:none}.legend-plate{width:180px}.legend-plate b{font-size:19px}.menu-brand{height:30px}
}
.wname{align-self:center;font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--muted);margin-right:4px}
.act.swap{right:calc(196px + var(--safe-r));bottom:calc(98px + var(--safe-b));width:52px;height:52px;font-size:12px}
@media (max-height:460px){.act.swap{bottom:calc(90px + var(--safe-b));width:48px;height:48px}}
@media (orientation:portrait){.legend-plate{top:calc(66px + var(--safe-t));width:180px;padding:4px 10px 6px}.legend-plate b{font-size:19px}}

/* modalità ZONA */
.btn.zonebtn{background:#2a1f4a;border-color:#7d5cff}
.btn.zonebtn small{color:#cdbfff}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.modes button{display:flex;flex-direction:column;align-items:center;padding:8px;background:var(--ink2);border:1px solid rgba(255,255,255,.14)}
.modes b{font-weight:800;font-size:18px}.modes span{font-weight:600;font-size:12px;color:var(--muted)}
.modes button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.modes button[aria-pressed="true"] span{color:#5a3a2a}
.zone .vitals{display:flex;position:absolute;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%);flex-direction:column;gap:3px;width:min(300px,42vw)}
.zone .hurt{display:block;position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(220,20,20,.55) 100%)}
.zone-info{display:none}
.zone .zone-info{display:block;position:absolute;top:calc(64px + var(--safe-t));left:50%;transform:translateX(-50%);padding:4px 14px;font-weight:800;font-size:15px;letter-spacing:.08em;
  color:#ffd2b8;background:rgba(60,14,8,.7);border-left:3px solid #ff5a1f;white-space:nowrap}
.outside .hud::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 30px rgba(255,60,20,.45);animation:pulse .8s infinite alternate}
.bar.shield.purple i{background:linear-gradient(90deg,#9a5cff,#c9a2ff)}
@media (max-height:460px){.btn.zonebtn small{display:none}}
/* grafica leggera: vignettatura senza costo GPU */
.lite::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.42) 100%)}

/* abilità */
.abilities{position:absolute;left:calc(18px + var(--safe-l));bottom:calc(22px + var(--safe-b));display:flex;gap:12px;z-index:2}
.ab{pointer-events:auto;position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;touch-action:none;
  background:conic-gradient(var(--c,#4cc8ff) var(--p,100%),rgba(255,255,255,.12) 0);padding:4px}
.ab::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(14,18,24,.88)}
.ab>*{position:relative}
.ab b{font-size:20px;font-weight:800;line-height:1}
.ab span{position:absolute;bottom:-18px;font-weight:800;font-size:11px;letter-spacing:.08em;text-shadow:0 1px 3px #000}
.ab kbd{position:absolute;top:-4px;right:-4px;font:inherit;font-weight:800;font-size:11px;background:var(--paper);color:var(--ink);border-radius:4px;padding:0 4px}
.ab.ult{--c:#ff8a2a;width:72px;height:72px}
.ab.ready::before{background:radial-gradient(circle,rgba(76,200,255,.35),rgba(14,18,24,.9) 70%)}
.ab.ult.ready::before{background:radial-gradient(circle,rgba(255,138,42,.45),rgba(14,18,24,.9) 70%);animation:pulse .7s infinite alternate}
.ab.ready b::after{content:"";display:block;width:22px;height:22px;background:currentColor;clip-path:polygon(50% 0,100% 50%,62% 50%,62% 100%,38% 100%,38% 50%,0 50%)}
.ab.ult.ready b::after{clip-path:circle(46% at 50% 60%);border-radius:50% 50% 0 0}
.is-touch .ab kbd{display:none}
.is-touch .abilities{left:auto;bottom:auto;right:calc(24px + var(--safe-r));top:calc(78px + var(--safe-t));flex-direction:column;gap:22px}
.is-touch .ab{width:58px;height:58px}.is-touch .ab.ult{width:64px;height:64px}
.dashing #view{filter:blur(1.5px) saturate(1.2)}
/* direzione del danno */
.dmgdir{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;pointer-events:none}
.dmgdir i{position:absolute;left:-70px;top:-150px;width:140px;height:40px;border-top:7px solid rgba(255,50,40,.9);border-radius:50%/100% 100% 0 0;filter:drop-shadow(0 0 6px rgba(255,40,30,.8))}
.dmgdir.on{animation:dmgdir 1.1s ease-out}
@keyframes dmgdir{0%{opacity:1}70%{opacity:.8}100%{opacity:0}}
/* mirino dinamico */
.crosshair i:nth-child(1){top:calc(-9px - var(--g,6px))}.crosshair i:nth-child(2){top:var(--g,6px)}
.crosshair i:nth-child(3){left:calc(-9px - var(--g,6px))}.crosshair i:nth-child(4){left:var(--g,6px)}
.versus .abilities,.zone .abilities{bottom:calc(64px + var(--safe-b))}
.is-touch.versus .abilities,.is-touch.zone .abilities{bottom:auto}
@media (max-height:460px){.is-touch .abilities{top:calc(64px + var(--safe-t));gap:16px}.is-touch .ab{width:50px;height:50px}.is-touch .ab.ult{width:56px;height:56px}.ab span{font-size:9px;bottom:-14px}}

/* banner */
.my-banner{position:absolute;left:calc(18px + var(--safe-l));top:calc(66px + var(--safe-t));height:min(46vh,330px);aspect-ratio:360/489;object-fit:cover;cursor:pointer;
  border:2px solid rgba(255,255,255,.25);box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .15s}
.my-banner:hover{transform:scale(1.03)}
@media (orientation:portrait),(max-height:460px){.my-banner{display:none}}
.card.wide{width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.banner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.banner-grid button{padding:0;border:2px solid transparent;background:none;aspect-ratio:360/489;overflow:hidden}
.banner-grid img{width:100%;height:100%;object-fit:cover;display:block}
.banner-grid button[aria-pressed="true"]{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.vs-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3vw;z-index:6;
  background:linear-gradient(90deg,rgba(255,90,31,.35),rgba(10,12,16,.85) 40%,rgba(10,12,16,.85) 60%,rgba(216,35,42,.35))}
.vs-intro figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.vs-intro img{height:min(62vh,420px);aspect-ratio:360/489;object-fit:cover;border:3px solid rgba(255,255,255,.3);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.vs-intro figcaption{font-weight:800;font-size:22px;letter-spacing:.06em}
.vs-intro .vs-word{font-size:clamp(48px,10vw,110px);font-weight:800;color:var(--orange);text-shadow:0 4px 20px rgba(0,0,0,.8)}
.vs-intro.go .me{animation:vsl .45s ease-out}.vs-intro.go .opp{animation:vsr .45s ease-out}.vs-intro.go .vs-word{animation:slam .4s .2s ease-out both}
@keyframes vsl{from{transform:translateX(-60vw)}}@keyframes vsr{from{transform:translateX(60vw)}}