/* Comandi touch della partita (web/touch.js). Visibili solo con body.touch.ingame. Pulsanti >= 56px, semitrasparenti. */
#touchui{display:none}
body.touch.ingame #touchui{display:block}
body.touch.ingame,body.touch.ingame canvas#c{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#touchui{position:fixed;inset:0;pointer-events:none;z-index:8;--t:clamp(56px,13vmin,84px);--m:max(10px,2vmin);font:700 14px/1 system-ui,sans-serif}
#touchui .t-btn{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;display:grid;place-items:center;
  min-width:56px;min-height:56px;border-radius:14px;border:2px solid rgba(255,255,255,.55);background:rgba(20,20,30,.42);color:#fff;
  text-shadow:0 1px 2px #000;padding:0;cursor:default;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#touchui .t-btn.down{background:rgba(255,200,40,.6);border-color:#fff;transform:scale(.95)}
/* croce direzionale in basso a sinistra */
.t-dpad{position:absolute;left:calc(var(--m) + env(safe-area-inset-left));bottom:calc(var(--m) + env(safe-area-inset-bottom));
  width:calc(var(--t)*3);height:calc(var(--t)*3);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);pointer-events:none}
.t-dpad .t-btn{width:var(--t);height:var(--t);font-size:calc(var(--t)*.4)}
.t-up{grid-area:1/2}.t-left{grid-area:2/1}.t-right{grid-area:2/3}.t-down{grid-area:3/2}
/* azioni in basso a destra: Fuoco grande, Salto e Indietro accanto */
.t-actions{position:absolute;right:calc(var(--m) + env(safe-area-inset-right));bottom:calc(var(--m) + env(safe-area-inset-bottom));
  width:calc(var(--t)*3);height:calc(var(--t)*3);pointer-events:none}
.t-actions .t-btn{position:absolute;border-radius:50%}
.t-fire{right:0;bottom:0;width:calc(var(--t)*1.6);height:calc(var(--t)*1.6);background:rgba(224,40,63,.5)!important;font-size:calc(var(--t)*.26)}
.t-jump{right:calc(var(--t)*1.7);bottom:calc(var(--t)*.3);width:var(--t);height:var(--t)}
.t-back{right:calc(var(--t)*.3);bottom:calc(var(--t)*1.7);width:var(--t);height:var(--t);font-size:12px}
/* barra in alto a destra (il pulsante "Menu" della pagina sta in alto a sinistra) */
.t-top{position:absolute;top:calc(var(--m) + env(safe-area-inset-top));right:calc(var(--m) + env(safe-area-inset-right));display:flex;gap:8px;pointer-events:none}
.t-top .t-btn{width:auto;padding:0 12px;height:48px;min-height:48px;min-width:56px;opacity:.8}
.t-timers{position:absolute;top:calc(var(--m) + env(safe-area-inset-top) + 56px);right:calc(var(--m) + env(safe-area-inset-right));display:none;gap:8px;pointer-events:none}
#touchui.timers .t-timers{display:flex}
.t-num{width:56px;height:56px;font-size:22px}
/* telefono in verticale: i comandi stanno in basso, l'area di gioco resta in alto */
@media (orientation:portrait){
  #touchui{--t:clamp(56px,17vw,80px)}
  .t-top{flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
}
@media (max-height:420px) and (orientation:landscape){#touchui{--t:clamp(52px,15vh,64px)}}

/* pannello armi HTML (touch.js): sopra il gioco, griglia per categoria F1..F12 come il pannello originale */
#t-weap{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(0,0,0,.45);touch-action:none;
  --c:clamp(54px,12vmin,78px);font:600 14px/1.2 system-ui,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}
#t-weap .w-box{max-width:min(96vw,980px);max-height:94vh;overflow:auto;padding:10px 12px;border-radius:14px;border:2px solid rgba(255,255,255,.6);
  background:rgba(18,20,34,.94);box-shadow:0 6px 30px rgba(0,0,0,.6);touch-action:pan-y;
  margin:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#t-weap .w-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#t-weap .w-title{font-size:18px;font-weight:800}
#t-weap .w-state{flex:1;color:#ffd24a;font-size:13px}
#t-weap .w-orig,#t-weap .w-close{min-height:44px;min-width:44px;padding:0 12px;border-radius:10px;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);color:#fff;font:inherit;cursor:pointer}
#t-weap .w-grid{display:flex;flex-wrap:wrap;gap:8px 14px}
#t-weap .w-g{display:flex;align-items:center;gap:6px}
#t-weap .w-fk{min-width:2.2em;text-align:right;color:#aab;font-size:12px}
#t-weap .w-row{display:flex;gap:6px}
#t-weap .w-c{position:relative;width:var(--c);height:var(--c);padding:0;border-radius:10px;border:2px solid rgba(255,255,255,.35);background:#000;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;color:#fff;font:inherit}
#t-weap .w-c img{width:90%;height:90%;object-fit:contain;image-rendering:auto;pointer-events:none}
#t-weap .w-c .w-n{position:absolute;right:3px;bottom:2px;font-size:14px;font-weight:800;text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none}
#t-weap .w-c .w-t{font-size:11px;padding:2px;text-align:center;pointer-events:none}
#t-weap .w-c.cur{border-color:#ffd24a;box-shadow:0 0 0 2px #ffd24a,0 0 12px #ffd24a;background:#3a2f10}
#t-weap .w-c:active{transform:scale(.94)}
#t-weap .w-c.off{opacity:.38;filter:grayscale(.85);cursor:default}
#t-weap .w-c.off:active{transform:none}
#t-weap .w-c.delay .w-n{color:#9cf}
#t-weap .w-cap{margin-top:8px;min-height:1.3em;color:#dde;font-size:14px}
#t-toast{position:fixed;left:50%;bottom:calc(var(--m,12px) + 76px);transform:translateX(-50%);z-index:21;padding:8px 14px;border-radius:10px;background:rgba(0,0,0,.8);color:#fff;
  font:600 14px/1.2 system-ui,sans-serif;opacity:0;transition:opacity .2s;pointer-events:none}
#t-toast.show{opacity:1}
@media (max-height:420px){#t-weap{--c:clamp(46px,15vh,60px)}#t-weap .w-box{padding:6px 8px}#t-weap .w-head{margin-bottom:4px}}

/* modalita' mira (touch.js): banner in alto al centro, mirino sul punto scelto */
#t-aim{position:absolute;top:calc(var(--m) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9;max-width:min(62vw,560px);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px 10px;border-radius:12px;border:2px solid #ffd24a;
  background:rgba(18,20,34,.82);color:#fff;pointer-events:none;font:600 14px/1.25 system-ui,sans-serif;text-align:center}
#t-aim[hidden]{display:none}
#t-aim button{pointer-events:auto;touch-action:manipulation;min-height:44px;min-width:44px;padding:0 12px;border-radius:10px;border:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);color:#fff;font:inherit;cursor:pointer}
#t-aim .a-conf.on{background:#ffd24a;color:#221;border-color:#fff}
#t-aim .a-ok,#t-aim .a-no{display:none}
#t-aim.pending .a-ok,#t-aim.pending .a-no{display:inline-block}
#t-aim.pending .a-ok{background:#2e9e4d;border-color:#fff}
#t-reticle{position:fixed;z-index:9;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #ff3b3b;box-shadow:0 0 0 2px #fff,0 0 8px #000;
  pointer-events:none}
#t-reticle[hidden]{display:none}
#t-reticle::before,#t-reticle::after{content:"";position:absolute;background:#ff3b3b;box-shadow:0 0 0 1px #fff}
#t-reticle::before{left:50%;top:-8px;bottom:-8px;width:2px;margin-left:-1px}
#t-reticle::after{top:50%;left:-8px;right:-8px;height:2px;margin-top:-1px}
@media (max-height:420px){#t-aim{max-width:50vw;padding:4px 8px;font-size:12px}}
/* menu di pausa HTML (web/touch.js): voci grandi, adatte al dito */
#t-pause{position:fixed;inset:0;z-index:22;display:grid;place-items:center;background:rgba(0,0,0,.6);touch-action:none;font:700 16px/1.2 system-ui,sans-serif;color:#fff}
#t-pause .p-box{width:min(92vw,420px);max-height:94vh;overflow:auto;padding:14px;border-radius:16px;border:2px solid rgba(255,255,255,.6);background:rgba(18,16,28,.96);
  display:flex;flex-direction:column;gap:10px}
#t-pause .p-title{font-size:24px;font-weight:800;text-align:center}
#t-pause .p-sub{text-align:center;color:#ffd24a;font-size:15px}
#t-pause .p-teams{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.07);font-size:15px}
#t-pause .p-team{display:flex;justify-content:space-between;gap:10px}
#t-pause .p-items{display:flex;flex-direction:column;gap:10px}
#t-pause .p-b{min-height:60px;padding:0 14px;border-radius:12px;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:19px;cursor:pointer;touch-action:manipulation}
#t-pause .p-b:active{transform:scale(.97);background:rgba(255,210,74,.35)}
#t-pause .p-b.resume,#t-pause .p-b.yes{background:rgba(70,170,90,.45);border-color:#8fe0a0}
#t-pause .p-b.danger,#t-pause .p-b.no{background:rgba(200,60,60,.35);border-color:#f0a0a0}
#t-pause .p-box.confirm .p-items{flex-direction:row}
#t-pause .p-box.confirm .p-b{flex:1;min-height:72px;font-size:24px}
#t-pause .p-b.back{min-height:48px;font-size:15px}
#t-pause.busy .p-b{opacity:.55;pointer-events:none}
@media (max-height:420px){#t-pause .p-box{padding:8px;gap:6px}#t-pause .p-title{font-size:19px}#t-pause .p-b{min-height:48px;font-size:17px}#t-pause .p-teams{display:none}}