/* ---------- IL GIOCO · TIRA AL CARRO ----------
   Tre misure di testo: etichette 12px Tango Sans maiuscolo · testo 16px (14px su telefono) · numeri 28px (22px su telefono).
   Titoli delle schede: 40px (30px su telefono). */
.gioco{padding:clamp(70px,8vw,120px) 0 0}
.gioco__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;padding:0 var(--pad);margin-bottom:clamp(28px,3vw,44px)}
.gioco__intro{font-size:var(--t-lead);line-height:1.25;letter-spacing:-.015em;font-weight:500;max-width:36ch}

.gioco__stage{--pad:var(--pad0,clamp(20px,4.45vw,64px));--g-k:12px;--g-n:28px;--g-t:40px;--g-p:16px;position:relative;width:100%;max-width:var(--wrap,1600px);margin:0 auto;aspect-ratio:16/8.4;max-height:calc(100vh - 40px);min-height:420px;overflow:hidden;background:var(--w);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;cursor:crosshair;outline:none;border-top:6px solid var(--k);border-bottom:6px solid var(--k);border-image:linear-gradient(var(--k),var(--k)) 1 / 6px 0 / 0 100vw}
.gioco__stage:focus,.gioco__stage:focus-visible{outline:none}
.gioco__stage[data-kbd]:focus-visible{outline:4px solid var(--o);outline-offset:-4px}
.gioco__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gioco__stage.is-duel canvas{touch-action:none;cursor:none}

/* HUD */
.hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"a m f p";align-items:start;gap:12px 28px;padding:16px var(--pad);pointer-events:none;opacity:0;transition:opacity .4s}
.is-playing .hud{opacity:1}
.hud__b{display:flex;flex-direction:column;gap:7px;margin:0}
.hud__ammo{grid-area:a}.hud__mid{grid-area:m;align-items:center}.hud__face{grid-area:f;align-items:flex-end}.hud__score{grid-area:p;align-items:flex-end;min-width:5.2ch}
.hud__k{font:700 var(--g-k)/1 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.hud b{font:700 var(--g-n)/1 "Tango Sans",sans-serif;font-variant-numeric:tabular-nums}
.hud__ammo b{color:var(--o);-webkit-text-stroke:1.5px var(--k);paint-order:stroke fill}
.hud__ammo.is-empty b{animation:g-lamp .6s steps(2) infinite}
@keyframes g-lamp{50%{color:var(--w)}}
.hud__goal.is-ok{background:var(--k);color:var(--w);padding:4px 6px 3px;margin:-4px 0 -3px}
.pips{display:flex;gap:4px;height:calc(var(--g-n) * .64);align-items:center}
.pips i{width:14px;height:14px;border:2px solid var(--k);background:var(--w)}
.pips i.on{background:var(--o)}
.pips--crew{gap:5px}
.pips--crew i{width:12px;height:18px;background:linear-gradient(to top,var(--o) calc(var(--hp)*100%),var(--w) 0)}
.pips--crew i.off{background:var(--k)}
.is-duel .pips--crew i{width:10px}

.gioco__toast{position:absolute;left:50%;top:clamp(84px,7vw,100px);transform:translateX(-50%);margin:0;background:var(--k);color:var(--w);font:700 var(--g-k)/1.3 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:9px 12px 8px;max-width:calc(100% - 32px);width:max-content;text-align:center;pointer-events:none}

/* legenda del testa a testa */
.g-legend{position:absolute;left:var(--pad);bottom:18px;display:none;gap:6px;margin:0;pointer-events:none;flex-wrap:wrap}
.is-duel .g-legend{display:flex}
.g-legend span{font:700 var(--g-k)/1 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:.08em;background:var(--w);border:2px solid var(--k);padding:6px 8px 5px}
.g-legend span:nth-child(2){background:var(--o)}
.g-legend span:nth-child(3){background:var(--k);color:var(--w)}

/* schede */
.g-layer[hidden],.gioco__toast[hidden]{display:none!important}
.g-layer{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(16px,2.4vw,36px) var(--pad);cursor:default;overflow:auto;background:rgba(255,255,255,.55)}
.g-layer--start{background:linear-gradient(90deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 75%)}
@media (max-width:700px){.g-layer,.g-layer--start{background:rgba(255,255,255,.3)}}
.g-layer--center{justify-content:center;background:rgba(255,255,255,.82)}
.g-card{background:var(--w);border:3px solid var(--k);box-shadow:8px 8px 0 var(--k);padding:clamp(20px,2.4vw,32px);max-width:600px;width:100%;margin:auto 0}
.g-layer--center .g-card{margin:auto}
.g-card--o{background:var(--o)}
.g-layer--start .g-card{max-width:580px}
.g-k{font:700 var(--g-k)/1 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
.g-layer h3{font:700 var(--g-t)/.95 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.g-layer p{font-size:var(--g-p);line-height:1.38;max-width:56ch;margin:0 0 12px}
.g-rules{counter-reset:r;display:grid;gap:9px;margin:0 0 22px;padding:0;list-style:none;font-size:var(--g-p);line-height:1.35}
.g-rules li{counter-increment:r;padding-left:32px;position:relative}
.g-rules li::before{content:counter(r);position:absolute;left:0;top:1px;width:20px;height:20px;display:grid;place-items:center;background:var(--k);color:var(--w);font:700 var(--g-k)/1 "Tango Sans",sans-serif}
.g-rules li:nth-child(4)::before{background:var(--o);color:var(--k)}
.g-sapevi{display:block;border-top:3px solid var(--k);padding-top:12px;margin-top:4px!important}
.g-sapevi::before{content:"Lo sapevi? ";font:700 var(--g-k)/1 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.g-sapevi:empty{display:none}
.g-best{font:700 var(--g-k)/1 "Tango Sans",sans-serif!important;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 0!important}
.g-best:empty{display:none}
.g-stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin:16px 0 8px;padding:0;list-style:none}
.g-stats li{font:700 var(--g-k)/1 "Tango Sans",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.g-stats b{display:block;font:700 var(--g-n)/1 "Tango Sans",sans-serif;letter-spacing:0;margin-bottom:6px}
.g-stats li:first-child b{color:var(--o);-webkit-text-stroke:1.5px var(--k);paint-order:stroke fill}
.g-record{font-weight:700}
.g-record:empty{display:none}
.g-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.g-layer .btn{min-height:48px}
.g-layer .btn--big{box-shadow:6px 6px 0 var(--k);font-size:18px;padding:18px 26px 16px}
.g-card--o .btn--big{--bg:var(--k);--fg:var(--w);box-shadow:none}
.g-card--o .btn:not(.btn--big){--bg:var(--o);--fg:var(--k)}
.g-card--o .btn:not(.btn--big):hover{--bg:var(--w)}

/* l'invito a giocare, sopra la piazza che si muove */
.g-layer--invito{justify-content:center;align-items:center;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(255,255,255,.94) 0,rgba(255,255,255,.86) 55%,rgba(255,255,255,.45) 100%);cursor:pointer}
.g-invito{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px}
.g-invito h3{font-size:calc(var(--g-t) * 1.9)!important;margin-bottom:12px!important}
.g-invito p{max-width:34ch;font-weight:500}
.g-play{display:inline-flex;align-items:center;gap:14px;margin-top:10px;font-size:22px!important;padding:22px 38px 20px!important;--bg:var(--o);--fg:var(--k);border:3px solid var(--k)}
.g-play:hover{--bg:var(--k);--fg:var(--w)}
.g-play__tri{width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent currentColor;margin-top:-2px}
.g-invito .g-best{margin-top:18px!important}

/* a schermo intero */
.gioco__stage.is-full{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;min-height:0;aspect-ratio:auto;margin:0;border:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.gioco__stage.is-full:fullscreen{width:100vw;height:100vh}
html.gioco-aperto,html.gioco-aperto body{overflow:hidden;overscroll-behavior:none}
.g-chiudi{display:none;position:absolute;z-index:20;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:48px;height:48px;border:3px solid var(--k);background:var(--w);cursor:pointer;padding:0}
.g-chiudi span,.g-chiudi span::after{position:absolute;left:50%;top:50%;width:24px;height:3px;background:var(--k);transform:translate(-50%,-50%) rotate(45deg)}
.g-chiudi span::after{content:"";transform:translate(-50%,-50%) rotate(90deg)}
.g-chiudi:hover{background:var(--o)}
.is-full .g-chiudi{display:block}
.is-full .hud{padding-right:calc(var(--pad) + 60px)}

@media (max-width:900px){.gioco__head{grid-template-columns:1fr}}
@media (min-width:561px) and (max-width:1100px){.gioco__stage{aspect-ratio:4/3;max-height:none}}
@media (min-width:561px) and (max-width:1100px) and (orientation:landscape){.gioco__stage{aspect-ratio:16/10;max-height:calc(100vh - 20px)}}
@media (max-width:560px){
  .gioco__stage{--g-n:22px;--g-t:26px;--g-p:13.5px;aspect-ratio:3/4;max-height:none;min-height:0}
  .hud{grid-template-columns:auto 1fr auto;grid-template-areas:"a f p" "m m m";gap:10px 14px;padding:12px 14px}
  .hud__mid{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px}
  .hud__face{align-items:center}
  .pips i{width:11px;height:11px}
  .pips--crew i{width:9px;height:14px}
  .gioco__toast{top:104px}
  .g-layer{padding:10px;align-items:flex-start}
  .g-layer--start{background:rgba(255,255,255,.93)}
  .g-card{padding:14px 14px 16px;box-shadow:5px 5px 0 var(--k)}
  .g-k{margin-bottom:8px}
  .g-layer h3{margin-bottom:10px}
  .g-layer p{margin-bottom:8px}
  .g-stats{gap:8px 18px;margin:10px 0 6px}
  .g-best{margin-top:10px!important}
  .g-rules{gap:5px;margin-bottom:12px;line-height:1.3}
  .g-rules li{padding-left:28px}
  .g-layer .btn--big{font-size:15px;padding:14px 18px 13px}
  .g-actions{gap:10px;margin-top:14px}
  .g-actions .btn{padding:12px 14px 11px;font-size:13px;min-height:44px}
  .g-legend{bottom:10px;left:10px;right:10px}
  .g-layer--invito{align-items:center;padding:20px;background:rgba(255,255,255,.9)}
  .g-invito h3{font-size:44px!important}
  .g-play{font-size:20px!important;padding:18px 30px 16px!important}
  .is-full .hud{padding-right:70px}
  .is-full .g-layer{padding-top:70px}
}

.g-card{color:var(--k)}
.g-card--o{color:var(--k)}
/* audio */
.g-audio{display:none;position:absolute;z-index:20;top:calc(68px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:48px;height:48px;border:3px solid var(--k);background:var(--w);cursor:pointer;padding:0;display:none;place-items:center}
.g-audio:hover{background:var(--o)}
.is-full .g-audio{display:grid}
.g-actions [hidden]{display:none!important}
/* la foto da salvare: tieni premuto */
.g-foto{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:16px;overflow:auto}
.g-foto__in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:420px;width:100%}
.g-foto img{display:block;width:auto;max-width:100%;max-height:68vh;border:3px solid #fff;-webkit-touch-callout:default;user-select:auto}
.g-foto__t{color:#fff;font:500 16px/1.35 "Inter Tight",sans-serif;text-align:center}
.g-foto .btn{min-width:160px}
.g-go{margin:0 0 12px}.g-go .px{display:block;height:30px;width:auto}
.g-go .px rect{animation:none}
/* «INIZIA» a quadratini, come il tasto della sala giochi */
.arcade--btn{position:static;transform:none;display:inline-block;cursor:pointer;background:#FE5000;border:5px solid #000;box-shadow:6px 6px 0 #000;padding:14px 22px;animation:arcade 1.1s steps(1) infinite}
.arcade--btn .px{display:block;height:30px;width:auto}
.arcade--btn:hover,.arcade--btn:focus-visible{animation:none;background:#fff}
/* ===== versione sala giochi ===== */
@font-face{font-family:"Pixel Scacchi";src:url("../fonts/PixelScacchi.woff2") format("woff2");font-display:block}
.arcade-mode [data-gioco] canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.arcade-mode [data-gioco],.arcade-mode [data-gioco] *{font-family:"Pixel Scacchi",monospace!important;font-weight:400!important;letter-spacing:0!important;-webkit-font-smoothing:none}
.arcade-mode [data-gioco]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:30;background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px)}
.arcade-mode [data-gioco] .g-card{border-width:5px;box-shadow:8px 8px 0 #000}
.arcade-mode [data-gioco] .g-card h3{font-size:30px!important;line-height:1.1}
.arcade-mode [data-gioco] .g-card p,.arcade-mode [data-gioco] .g-card li{font-size:14px!important;line-height:1.5}
.arcade-mode [data-gioco] .g-txt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;image-rendering:pixelated}
.arcade-mode [data-gioco] .gioco__toast{font-size:clamp(13px,1.2vw,18px)!important;line-height:1.4;padding:10px 14px}
.arcade-mode [data-gioco] .hud__k{font-size:clamp(11px,1vw,15px)!important}
/* testa a testa sul telefono: sopra c'è la pancia nera del carro, le scritte diventano bianche */
.gioco__stage.g-alto.is-duel .hud,.gioco__stage.g-alto.is-duel .hud *{color:#fff!important}
.gioco__stage.g-alto.is-duel .hud .pips i{border-color:#fff}