:root{
  color-scheme: dark;
  --ink:#08171A; --text:#F4F7FB; --muted:#AFC2D3;
  --yellow1:#F6CF5A; --yellow2:#DFA126; --yellow-ink:#2E2205;
  --green1:#4ED48F; --green2:#2BA865;
  --glass:rgba(14,20,34,.58); --glass-line:rgba(255,255,255,.14);
  --neon:rgba(150,255,240,.95);
  --disp:"Lilita One", Impact, sans-serif;
  --ui:"Nunito", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; height:100%; overflow:hidden; background:#15132E}
body{color:var(--text); font-family:var(--ui); font-weight:700; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
canvas{position:fixed; inset:0; width:100vw; height:100vh; display:block}

.overlay{
  position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:auto; padding:max(24px, env(safe-area-inset-top)) 20px max(84px, env(safe-area-inset-bottom));
}
.overlay.hidden{display:none}
.overlay.dim{background:rgba(5,8,16,.35)}
#menu{background:rgba(5,8,16,.28)}
#lobby{background:rgba(5,8,16,.32)}

/* scritta al neon, come conto alla rovescia e freccia */
.neon{color:#fff; text-shadow:0 0 6px var(--neon), 0 0 18px var(--neon), 0 0 42px rgba(150,255,240,.7), 0 0 80px rgba(150,255,240,.45)}
.logo{font-family:var(--disp); font-size:clamp(3.4rem, 11vw, 9.5rem); line-height:1; letter-spacing:.03em; text-align:center}
#title{justify-content:flex-start; padding-top:9vh}
#title .logo{margin-bottom:auto}
#title #startGame{margin-bottom:auto}
.logo.small{font-size:clamp(2.2rem, 5.5vw, 3.6rem); margin-bottom:.6rem}

/* pulsanti */
.btn{
  font:inherit; font-weight:800; font-size:1.25rem; cursor:pointer; border:none; border-radius:12px;
  padding:.85rem 2rem; min-height:48px; transition:transform .1s ease, filter .1s ease, box-shadow .1s ease;
}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:default; transform:none; filter:none}
.btn:focus-visible, .chip:focus-visible, .field:focus-visible, .vol:focus-visible, .volIcon:focus-visible{outline:3px solid #fff; outline-offset:3px}
.btn.yellow{background:linear-gradient(135deg, var(--yellow1), var(--yellow2)); color:var(--yellow-ink); box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.btn.green{background:linear-gradient(135deg, var(--green1), var(--green2)); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.25); box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3)}
.btn.big{font-size:clamp(1.25rem, 2.2vw, 1.6rem); padding:1rem 2.6rem}
.btn.ghost{background:rgba(255,255,255,.08); color:var(--text); border:1px solid var(--glass-line)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.danger{color:#FFB3BC}

/* menu: nome, crea, entra */
.stack{display:flex; flex-direction:column; align-items:center; gap:.9rem; width:min(100%, 38rem)}
.lbl{font-size:1.15rem; text-shadow:0 2px 4px rgba(0,0,0,.6)}
.field{
  width:100%; font:inherit; font-size:1.7rem; font-weight:700; color:var(--text); text-align:center;
  background:rgba(14,22,38,.72); border:1px solid var(--glass-line); border-radius:12px; padding:1rem 1.2rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); user-select:text;
}
.field::placeholder{color:rgba(244,247,251,.45)}
.field.code{text-transform:uppercase; letter-spacing:.35em; font-size:1.9rem}
.msg{margin:0; padding:.6rem 1rem; color:var(--text); text-align:center}

/* vetro scuro */
.glass{
  background:var(--glass); border:1px solid var(--glass-line); border-radius:20px;
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.panel{width:min(100%, 40rem); padding:1.8rem 2rem 2rem; text-align:center}
.panel.narrow{width:min(100%, 26rem)}
.panel h1{font-family:var(--disp); font-weight:400; font-size:2.3rem; margin:0 0 .5rem; letter-spacing:.02em}
.sub{color:var(--muted); margin:.3rem 0 .8rem; font-weight:700}
.small-lbl{color:var(--muted); font-size:.95rem}
.codebox{font-family:var(--disp); font-size:3.2rem; letter-spacing:.25em; margin:.1rem 0 .5rem; padding-left:.25em; color:#fff;
  text-shadow:0 0 6px var(--neon), 0 0 22px rgba(150,255,240,.6)}
#codeWrap[hidden], #hostCtl[hidden]{display:none}
.row{display:flex; gap:.6rem; justify-content:center; align-items:center; flex-wrap:wrap}
.actions{margin-top:1.3rem}
.chip{
  font:inherit; font-weight:800; color:var(--text); cursor:pointer; min-height:40px; padding:.35rem .95rem;
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line); border-radius:10px; transition:background-color .1s ease;
}
.chip:hover{background:rgba(255,255,255,.15)}
.chip[aria-pressed="true"]{background:linear-gradient(135deg, var(--yellow1), var(--yellow2)); color:var(--yellow-ink); border-color:transparent}
.settings{display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; text-align:left}
.setting{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:.6rem .8rem}
.setting.col{flex-direction:column; align-items:stretch; margin:.6rem 0 1rem}
.setting > span{color:var(--muted)}
.seg{display:flex; gap:.4rem; align-items:center}
.count{min-width:1.8rem; text-align:center; font-size:1.25rem}
ul.players{list-style:none; margin:.6rem 0; padding:0; display:grid; gap:.45rem}
.players li{display:flex; align-items:center; gap:.6rem; justify-content:center; font-size:1.1rem}
.dot{width:1rem; height:1rem; border-radius:50%; display:inline-block; flex:none; box-shadow:0 0 8px currentColor}
.stackbtn{display:flex; flex-direction:column; gap:.6rem}

/* volume e versione: stessa altezza, agli angoli in basso */
#footer{position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; justify-content:space-between; align-items:center;
  padding:0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); pointer-events:none}
#footer[hidden]{display:none}
.pill{pointer-events:auto; height:42px; display:flex; align-items:center; gap:.6rem; padding:0 .9rem;
  background:var(--glass); border:1px solid var(--glass-line); border-radius:12px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.version{font-size:.92rem; color:var(--text)}
.volpill .vol{width:9rem}
.volrow{display:flex; align-items:center; gap:.7rem}
.volrow .vol{flex:1}
.volIcon{width:30px; height:30px; flex:none; border:none; cursor:pointer; background:transparent; padding:0;
  background-repeat:no-repeat; background-position:center; background-size:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F7FB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23F4F7FB'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.volIcon.off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F7FB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23F4F7FB'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6'/%3E%3C/svg%3E")}
input[type=range].vol{-webkit-appearance:none; appearance:none; height:6px; border-radius:3px; background:rgba(255,255,255,.22); cursor:pointer}
input[type=range].vol::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--yellow1); border:2px solid #fff3; box-shadow:0 2px 6px rgba(0,0,0,.4)}
input[type=range].vol::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--yellow1); border:2px solid #fff3}
@media (prefers-reduced-motion: reduce){ .btn, .chip{transition:none} .btn:hover{transform:none} }

/* slider del volume: a sinistra del pallino diventa giallo */
input[type=range].vol{background:linear-gradient(to right, var(--yellow1) 0, var(--yellow2) var(--p, 50%), rgba(255,255,255,.22) var(--p, 50%), rgba(255,255,255,.22) 100%)}

/* X per chiudere i riquadri */
.panel{position:relative}
.xbtn{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:10px; border:1px solid var(--glass-line);
  background:rgba(255,255,255,.08); color:var(--text); font:inherit; font-size:1.6rem; line-height:1; cursor:pointer}
.xbtn:hover{background:rgba(255,255,255,.16)}
.xbtn:focus-visible{outline:3px solid #fff; outline-offset:2px}
.btn.red{background:linear-gradient(135deg, #FF5A6E, #D7263D); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.25); box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25)}

/* scelta del colore */
.sw{width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:var(--sw); cursor:pointer; transition:transform .1s ease}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 0 14px var(--sw)}
.sw:disabled{opacity:.25; cursor:not-allowed; transform:none}
.sw:focus-visible{outline:3px solid #fff; outline-offset:3px}

/* tendina dei comandi */
.drawer{position:fixed; z-index:40; right:max(16px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%);
  width:min(92vw, 25rem); max-height:86vh; overflow:auto; padding:1.3rem 1.4rem 1.2rem; text-align:left}
.drawer[hidden]{display:none}
.drawer h2{font-family:var(--disp); font-weight:400; font-size:1.7rem; margin:0 0 .8rem}
.drawer dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.55rem .9rem; align-items:baseline}
.drawer dt{white-space:nowrap; color:var(--text)}
.drawer dd{margin:0; color:var(--muted); font-weight:600}
kbd{font-family:var(--ui); font-weight:800; color:var(--text); background:rgba(255,255,255,.1); border:1px solid var(--glass-line); border-radius:6px; padding:0 .35rem}

/* schermata di vittoria */
.victory{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; width:min(100%, 34rem)}
.trophy{width:clamp(64px, 9vw, 96px); height:auto; filter:drop-shadow(0 0 16px rgba(246,207,90,.55))}
.vlabel{font-family:var(--disp); font-size:clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing:.12em; text-transform:uppercase}
.vname{font-family:var(--disp); font-size:clamp(3rem, 9vw, 6.5rem); line-height:1.05; text-align:center; color:var(--c, #fff);
  -webkit-text-stroke:2px #fff; paint-order:stroke fill;
  text-shadow:0 0 10px rgba(150,255,240,.9), 0 0 28px rgba(150,255,240,.55), 0 0 60px var(--c, #fff)}
.standings{margin-top:.6rem; padding:1.1rem 1.3rem 1.3rem}
#standings{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
#standings li{display:grid; grid-template-columns:1.6rem 1rem minmax(0, 8rem) 1fr 2rem; align-items:center; gap:.6rem; text-align:left}
#standings li:first-child .nm, #standings li:first-child .wn{color:#fff}
.pos{color:var(--muted); text-align:right}
.nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar{height:10px; border-radius:5px; background:rgba(255,255,255,.1); overflow:hidden}
.bar span{display:block; height:100%; border-radius:5px}
.wn{text-align:right; font-size:1.15rem}
.confetti{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.confetti i{position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; opacity:.9; animation:fall linear infinite}
@keyframes fall{ to{ transform:translateY(110vh) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce){ .confetti{display:none} }

/* stessa scritta, stessa posizione nella schermata iniziale e nel menu */
#menu{justify-content:flex-start; padding-top:9vh}
#menu .logo{margin-bottom:5vh}
#menu .stack{margin-bottom:auto}

/* pulsante "Clicca per iniziare": un po' più grande e pulsante */
#startGame{font-size:clamp(1.45rem, 2.6vw, 1.95rem); padding:1.25rem 3.4rem; animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{
  0%, 100%{transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(246,207,90,.55)}
  50%{transform:scale(1.06); box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 14px rgba(246,207,90,0)}
}
#startGame:hover{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ #startGame{animation:none} }

/* elenco dei partecipanti nella sala d'attesa: schede ordinate su due colonne */
ul.players{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; margin:.8rem 0}
.players li{justify-content:flex-start; gap:.6rem; padding:.5rem .75rem; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:1.02rem; min-width:0}
.players li span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:520px){ ul.players{grid-template-columns:1fr} }

/* comandi nel riquadro */
.panel.help{width:min(100%, 34rem); text-align:left; padding-top:3.4rem}
.panel.help h1{text-align:center}
.panel.help dl{margin:.4rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.6rem 1rem; align-items:baseline}
.panel.help dt{white-space:nowrap}
.panel.help dd{margin:0; color:var(--muted); font-weight:600}
.xbtn.left{left:12px; right:auto}
.xbtn.red{background:linear-gradient(135deg, #FF5A6E, #D7263D); color:#fff; border-color:transparent}
.xbtn.red:hover{filter:brightness(1.1)}

/* tutte le X per chiudere i riquadri: rosse, uguali, nell'angolo in alto a destra */
.xbtn, .xbtn.red, .xbtn.left{position:absolute; top:12px; right:12px; left:auto; width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, #FF5A6E, #D7263D); color:#fff; border:none; font:inherit; font-size:1.6rem; line-height:1; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.35)}
.xbtn:hover{filter:brightness(1.1); background:linear-gradient(135deg, #FF5A6E, #D7263D)}
.panel.help{padding-top:2.2rem}
.panel.help h1{padding:0 2.6rem}

/* pulsante "?" in alto a destra nel menu e nella sala d'attesa */
.qbtn{position:fixed; top:max(18px, env(safe-area-inset-top)); right:max(18px, env(safe-area-inset-right)); z-index:2; width:46px; height:46px; border-radius:50%;
  font-family:var(--disp); font-size:1.6rem; line-height:1; color:#fff; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 0 14px rgba(150,255,240,.35); text-shadow:0 0 8px rgba(150,255,240,.9)}
.qbtn:hover{background:rgba(255,255,255,.14)}
.qbtn:focus-visible{outline:3px solid #fff; outline-offset:3px}
/* guida alle armi */
.panel.guide{width:min(100%, 54rem); padding:1.4rem 1.2rem 1rem}
.gwrap{display:flex; align-items:center; gap:.4rem}
.gview{flex:1; overflow:hidden; border-radius:14px}
.gtrack{display:flex; transition:transform .35s ease; touch-action:pan-y}
.gpage{flex:0 0 100%; display:grid; grid-template-columns:1.15fr 1fr; gap:1rem; align-items:start; padding:.3rem; text-align:left}
.gmedia{border-radius:12px; overflow:hidden; background:rgba(0,0,0,.35); border:1px solid var(--glass-line); aspect-ratio:2/1}
.gmedia img{display:block; width:100%; height:100%; object-fit:cover}
.gmedia.nogif{display:none}
.gpage:has(.gmedia.nogif){grid-template-columns:1fr}
.ginfo p{margin:.3rem 0 .7rem; color:var(--text); font-weight:600; line-height:1.45}
.gicon{display:block; height:42px; max-width:180px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(150,255,240,.9)) drop-shadow(0 0 14px rgba(150,255,240,.5))}
.ginfo table{width:100%; border-collapse:collapse; font-size:.92rem}
.ginfo th, .ginfo td{padding:.32rem .5rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:top}
.ginfo th{color:var(--muted); font-weight:700; white-space:nowrap; width:42%}
.ginfo td{color:#fff; font-weight:800}
.garr{flex:none; width:44px; height:44px; border:none; background:none; cursor:pointer; position:relative; border-radius:10px}
.garr:hover{background:rgba(255,255,255,.08)}
.garr::before{content:""; position:absolute; top:50%; left:50%; border-style:solid; transform:translate(-50%, -50%)}
.garr.left::before{border-width:12px 18px 12px 0; border-color:transparent #fff transparent transparent; filter:drop-shadow(0 0 6px rgba(150,255,240,.9))}
.garr.right::before{border-width:12px 0 12px 18px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 0 6px rgba(150,255,240,.9))}
.garr:focus-visible{outline:3px solid #fff; outline-offset:2px}
.gcount{margin-top:.6rem; color:var(--muted); font-weight:800; font-variant-numeric:tabular-nums}
@media (max-width:760px){ .gpage{grid-template-columns:1fr} .garr{width:34px} }
@media (prefers-reduced-motion: reduce){ .gtrack{transition:none} }

/* pulsante dorato "Installa l'app", accanto al "?" */
.instbtn{position:fixed; top:max(18px, env(safe-area-inset-top)); right:calc(max(18px, env(safe-area-inset-right)) + 58px); z-index:2; width:46px; height:46px; border-radius:50%;
  border:none; cursor:pointer; color:var(--yellow-ink); background:linear-gradient(135deg, var(--yellow1), var(--yellow2)); box-shadow:0 6px 18px rgba(0,0,0,.35)}
.instbtn svg{width:24px; height:24px}
.instbtn:hover{filter:brightness(1.07)}
.instbtn:focus-visible{outline:3px solid #fff; outline-offset:3px}
.instbtn[hidden]{display:none}
/* classe dell'arma nella guida */
.gcat{display:inline-block; margin-bottom:.45rem; padding:.18rem .6rem; border-radius:999px; font-size:.78rem; font-weight:800; letter-spacing:.04em;
  color:var(--yellow-ink); background:linear-gradient(135deg, var(--yellow1), var(--yellow2))}