/* WILD ROAD — la pagina.
   Il gioco sta tutto nella tela; qui c'e' quello che ci sta sopra:
   WIN e metri, il VS, la bandiera col conto, il titolo, la pausa e le
   impostazioni. Lettere a blocchi bianche con l'ombra dura sotto e
   tasti con lo spessore, come le scatole del gioco.

   Chi comanda cosa si vede e' la classe sul body: titolo, gioco,
   in-bandiera (+ ultimi negli ultimi tre secondi), festa, e p-pausa /
   p-imp / p-evento quando c'e' un pannello aperto. */
@font-face{
  font-family:'Blocchi';
  src:url('/game/fonts/8-bit-wonder.ttf') format('truetype');
  font-display:swap;
}
:root{
  --inchiostro:#22283a;
  --carta:#ffffff;
  --verde:#62d633; --rosso:#ff5a4d; --oro:#ffd23f;
  --u:clamp(10px,1.9vmin,16px);   /* l'unita' dei tasti: tutto il menu scala con lei */
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; }
html{ background:#8fd0ea; }
body{
  font-family:'Blocchi','Courier New',monospace; color:var(--carta);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  touch-action:none; overscroll-behavior:none;
}
#gioco{ position:fixed; inset:0; width:100%; height:100%; display:block; }

/* l'ombra dura: la scritta e' un blocco appoggiato sullo schermo */
.blocco{
  text-shadow:
    0 .09em 0 var(--inchiostro), .09em .09em 0 var(--inchiostro), -.09em .09em 0 var(--inchiostro),
    .09em 0 0 var(--inchiostro), -.09em 0 0 var(--inchiostro), 0 -.09em 0 var(--inchiostro),
    .09em -.09em 0 var(--inchiostro), -.09em -.09em 0 var(--inchiostro),
    0 .2em 0 var(--inchiostro), .09em .2em 0 var(--inchiostro), -.09em .2em 0 var(--inchiostro);
}

/* i numeri della partita: Luckiest Guy, contorno scuro e l'ombra sotto */
.grasso{
  font-family:'Luckiest Guy','Blocchi',sans-serif; font-weight:400; letter-spacing:.03em;
  -webkit-text-stroke:.2em var(--inchiostro); paint-order:stroke fill;
  text-shadow:0 .13em 0 var(--inchiostro), 0 .26em .06em rgba(10,14,28,.55);
}

/* ---- i tasti: un blocco colorato col suo spessore sotto ---- */
.tasto{
  --su:#62d633; --giu:#3f9a1b;
  font:inherit; font-size:var(--u); color:var(--carta); border:0; cursor:pointer; padding:0;
  display:grid; place-items:center; letter-spacing:.06em;
  background:var(--su);
  box-shadow:0 .5em 0 var(--giu), 0 0 0 .22em var(--inchiostro), 0 .5em 0 .22em var(--inchiostro);
  text-shadow:0 .12em 0 rgba(0,0,0,.3);
  transition:transform .06s, box-shadow .06s;
}
.tasto:active{ transform:translateY(.3em); box-shadow:0 .2em 0 var(--giu), 0 0 0 .22em var(--inchiostro), 0 .2em 0 .22em var(--inchiostro); }
.tasto:focus-visible{ outline:.2em solid var(--oro); outline-offset:.35em; }
.tasto svg{ width:55%; height:55%; filter:drop-shadow(0 .12em 0 rgba(0,0,0,.28)); }
.tasto.blu{ --su:#4c8df0; --giu:#2d62b8; }
.tasto.rosso{ --su:#f0583f; --giu:#b5341f; }
.tasto.spento{ --su:#8a93a6; --giu:#5d6577; }
.quadro{ width:4.2em; height:3.8em; font-size:var(--u); }
.tasto.grande{ width:7.6em; height:6.6em; font-size:calc(var(--u)*1.15); }
.tasto.lungo{ width:100%; height:3.4em; flex:none; }
.tasto.mini{ width:2.6em; height:2.4em; flex:none; }
.tasto.interr{ width:6em; height:2.4em; }

/* ---- WIN, metri, VS e pausa ---- */
/* in alto al centro, una sotto l'altra */
#conti{
  position:fixed; z-index:3; left:0; right:0; top:max(16px,env(safe-area-inset-top));
  display:flex; flex-direction:column; align-items:center; text-align:center;
  line-height:1; pointer-events:none; transition:opacity .25s;
}
#win{ font-size:clamp(34px,7.2vmin,68px); color:var(--oro); }
#win.su{ animation:colpo .4s cubic-bezier(.2,1.5,.4,1); }
#win.giu{ animation:colpo .4s cubic-bezier(.2,1.5,.4,1) reverse; }
@keyframes colpo{ from{ transform:scale(1.45); } to{ transform:scale(1); } }
#metri{ margin-top:.35em; font-size:clamp(20px,4vmin,38px); }
#metri.sotto, #win.sotto{ color:var(--rosso); }
#win.sopra{ color:var(--verde); }
.vs{ display:flex; align-items:baseline; gap:.5em; }
.vs .piu{ color:var(--verde); }
.vs .meno{ color:var(--rosso); }
.vs small{ font-size:.62em; color:var(--carta); }
/* 🧱 la vita del muro: sotto ai metri, solo da vicino (body.muro-vicino) */
#muro{
  position:relative; display:flex; align-items:center; gap:.5em; margin-top:.5em; font-size:clamp(14px,2.7vmin,25px); color:var(--rosso);
  opacity:0; transform:translateY(-.6em) scale(.8); transition:opacity .25s, transform .3s cubic-bezier(.2,1.5,.4,1);
}
body.muro-vicino #muro{ opacity:1; transform:none; }
#muro .barra{
  position:relative; width:clamp(128px,27vmin,300px); height:1.25em; background:#1d2233;
  box-shadow:0 0 0 .16em var(--inchiostro), 0 .22em 0 .16em rgba(10,14,28,.5);
}
#muro .barra i{ position:absolute; left:0; top:0; bottom:0; width:100%; }
/* la vita scende di colpo; dietro, la scia chiara la raggiunge piano: e' il danno che si vede andare via */
#muroVita{ background:linear-gradient(#ff7a6e 0 45%, #e0382c 45% 100%); transition:width .18s ease-out; }
#muroScia{ background:#ffe9a8; transition:width .9s cubic-bezier(.6,0,.3,1) .35s; }
/* il numero sta DENTRO la barra: in verticale ai lati ci sono le squadre, e di spazio ce n'e' poco */
#muroNum{ position:absolute; left:0; right:0; top:50%; transform:translateY(-46%); text-align:center; color:var(--carta); font-size:.74em; }
#muroColpo{ position:absolute; right:-1.6em; top:-.1em; font-weight:400; font-size:1.5em; color:var(--oro); opacity:0; pointer-events:none; }
#muro.colpo{ animation:muroScossa .45s; }
#muro.colpo #muroColpo{ animation:muroColpo 1.1s ease-out; }
#muro.colpo .barra{ animation:muroLampo .45s; }
@keyframes muroScossa{ 0%,100%{ left:0; } 15%{ left:-.5em; } 30%{ left:.45em; } 45%{ left:-.35em; } 60%{ left:.25em; } 80%{ left:-.1em; } }
@keyframes muroColpo{ 0%{ opacity:0; transform:translateY(.4em) scale(.5); } 15%{ opacity:1; transform:translateY(-.5em) scale(1.25); } 70%{ opacity:1; transform:translateY(-1.3em) scale(1); } 100%{ opacity:0; transform:translateY(-1.9em) scale(.9); } }
@keyframes muroLampo{ 0%{ filter:brightness(3); } 100%{ filter:none; } }

#pausa{
  position:fixed; z-index:4; right:max(18px,env(safe-area-inset-right)); top:max(18px,env(safe-area-inset-top));
  font-size:calc(var(--u)*.85); transition:opacity .2s;
}
body.titolo #conti, body.titolo #pausa{ opacity:0; pointer-events:none; }

/* ---- le due squadre: i regali verdi a sinistra, i rossi a destra ---- */
/* Stanno ai bordi della FASCIA VERTICALE 9:16 al centro dello schermo
   (l'inquadratura di TikTok), non ai bordi dello schermo: su uno schermo
   verticale la fascia e' tutto lo schermo. Senza sfondo: e' un overlay. */
#squadre{
  /* il lato dell'icona: grande quanto si puo', ma la colonna (alta --alta) deve tenere tutte le voci */
  --n:6; --alta:calc(100vh - 118px); --lato:min(clamp(62px, min(17vmin, 11.5vh), 124px), calc(var(--alta) / var(--n) * .86));
  position:fixed; z-index:2; inset:0; pointer-events:none;
}
body.titolo #squadre{ display:none; }
#squadre .sq{
  /* le due colonne partono alla stessa altezza: sotto al tasto pausa, che sta sopra alla rossa */
  position:absolute; top:74px; bottom:44px;
  width:calc(var(--lato) * 1.36);
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:center;
}
#squadre .verde{ left:max(4px, calc(50% - 450px)); }
#squadre .rossa{ right:max(4px, calc(50% - 450px)); }
.sqRiga, .sqFaccia{ display:flex; flex-direction:column; align-items:center; line-height:1; }
/* ogni riga e' un tasto di prova: niente aspetto da tasto, solo la mano e il colpetto */
.sqRiga{
  pointer-events:auto; cursor:pointer; border:0; padding:0; background:none; font:inherit; color:inherit;
  transition:transform .08s;
}
.sqRiga:hover{ transform:scale(1.06); }
.sqRiga:active{ transform:scale(.88); }
/* la figura dell'animale, col regalo nell'angolino in alto dalla parte del centro dello schermo */
.sqFigura{ position:relative; width:var(--lato); height:var(--lato); }
.sqAnimale{ width:100%; height:100%; display:block; filter:drop-shadow(0 .1em .05em rgba(10,14,28,.5)); }
/* le figure sono disegnate rivolte a destra: quelle della squadra rossa si specchiano, cosi' guardano anche loro verso il centro */
.rossa .sqAnimale{ transform:scaleX(-1); }
.sqAngolo{ position:absolute; top:-10%; animation:respira 1.5s ease-in-out infinite alternate; }
.verde .sqAngolo{ right:-18%; transform-origin:70% 30%; }
.rossa .sqAngolo{ left:-18%; transform-origin:30% 30%; }
/* il contorno nero del regalo: quattro ombre dure, una per lato */
#squadre .regalo{
  filter:drop-shadow(1.5px 0 0 #10131f) drop-shadow(-1.5px 0 0 #10131f) drop-shadow(0 1.5px 0 #10131f) drop-shadow(0 -1.5px 0 #10131f);
}
img.sqAngolo{ width:42%; height:42%; }
span.sqAngolo{ top:-6%; white-space:nowrap; }
@keyframes respira{ from{ transform:scale(.92); } to{ transform:scale(1.14); } }
.sqCome{ font-size:calc(var(--lato) * .17); color:var(--oro); text-align:center; line-height:1.3; }
/* il numero sale sopra al piede della figura, come un'etichetta */
.sqQuanto{ position:relative; margin-top:calc(var(--lato) * -.14); font-size:calc(var(--lato) * .235); white-space:nowrap; }
.verde .sqQuanto{ color:var(--verde); }
.rossa .sqQuanto{ color:var(--rosso); }
/* il posto delle WIN: le facce stanno una sull'altra, e si danno il cambio girando */
.sqGiro{ display:grid; justify-items:center; perspective:600px; }
.sqFaccia{ grid-area:1 / 1; opacity:0; transform:rotateY(-90deg) scale(.5); transition:transform .45s cubic-bezier(.5,0,.8,.4), opacity .3s; }
.sqFaccia.su{ opacity:1; transform:none; transition:transform .5s cubic-bezier(.2,1.5,.4,1) .3s, opacity .2s .3s; }
.sqFaccia > .regalo{ width:calc(var(--lato) * .86); height:calc(var(--lato) * .86); animation:respira 1.5s ease-in-out infinite alternate; }
.sqFaccia > .sqCome{ height:calc(var(--lato) * .86); display:grid; place-items:center; }
.sqFaccia .sqQuanto{ margin-top:calc(var(--lato) * -.08); }

/* ---- chi ha mandato cosa ---- */
#annuncio{
  /* al centro dello schermo; sotto la bandiera li' c'e' il conto, e l'avviso sale */
  position:fixed; z-index:3; left:0; right:0; top:50%; margin-top:-1.3em; text-align:center; pointer-events:none; opacity:0;
  display:flex; flex-direction:column; gap:.2em; align-items:center; font-size:clamp(22px,4.6vmin,42px); line-height:1.05;
}
#annuncioChi{ font-size:.72em; max-width:90vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:.2em .3em .3em; }
#annuncio.piu #annuncioCosa{ color:var(--verde); }
#annuncio.meno #annuncioCosa{ color:var(--rosso); }
#annuncio.vai{ animation:annuncio 2.4s ease-out both; }
@keyframes annuncio{
  0%{ opacity:0; transform:scale(.6); } 8%{ opacity:1; transform:scale(1.12); } 14%{ transform:scale(1); }
  80%{ opacity:1; } 100%{ opacity:0; transform:translateY(-1em); }
}
body.titolo #annuncio{ display:none; }
body.in-bandiera #annuncio{ top:max(17vh,130px); margin-top:0; }

/* ---- sotto la bandiera: il conto e la sfida ---- */
#bandiera{
  position:fixed; z-index:3; left:0; right:0; top:30vh; display:none; flex-direction:column; align-items:center; gap:clamp(8px,2vmin,18px);
  pointer-events:none; line-height:1;
}
body.in-bandiera #bandiera{ display:flex; }
#conto{ font-size:clamp(84px,24vmin,230px); color:var(--oro); }
#conto.batte{ animation:batte .35s cubic-bezier(.2,1.4,.4,1); }
body.ultimi #conto{ color:var(--rosso); }
body.ultimi #conto.batte{ animation:batte 1.2s cubic-bezier(.2,1.4,.4,1); }
@keyframes batte{ from{ transform:scale(1.7); } to{ transform:scale(1); } }
#vsBand{ font-size:clamp(30px,7.5vmin,70px); }
#festa{
  position:fixed; z-index:3; left:0; right:0; top:30vh; text-align:center; pointer-events:none; display:none;
  font-size:clamp(60px,18vmin,170px); color:var(--oro);
}
body.festa #festa{ display:block; animation:festa 2.2s ease-out both; }
@keyframes festa{ 0%{ transform:scale(.2) rotate(-8deg); } 12%{ transform:scale(1.2) rotate(3deg); } 20%{ transform:scale(1); } 85%{ opacity:1; } 100%{ opacity:0; transform:scale(1.1); } }

/* ---- la firma: tikforge.net, ogni 45 secondi per 5 ---- */
#firma{
  position:fixed; z-index:3; left:0; right:0; bottom:13vh; text-align:center; pointer-events:none; opacity:0;
  font-size:clamp(22px,5vmin,48px); letter-spacing:.05em; color:var(--carta);
}
#firma b{ font-weight:400; color:#d183f8; }
#firma.vai{ animation:firma 5s ease-in-out both; }
@keyframes firma{ 0%{ opacity:0; transform:translateY(.6em) scale(.8); } 8%{ opacity:1; transform:translateY(0) scale(1.08); } 13%{ transform:scale(1); } 88%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-.4em); } }

/* ---- lo stato della diretta ---- */
#stato{
  position:fixed; z-index:3; left:max(14px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.7em; padding:.6em .8em .5em; font-size:clamp(8px,1.4vmin,11px); letter-spacing:.08em;
  background:rgba(34,40,58,.78); pointer-events:none;
}
#stato::before{ content:''; width:.9em; height:.9em; background:#8a93a6; }
#stato.on::before{ background:var(--verde); }
#stato.off::before{ background:var(--rosso); }
body.titolo #stato{ bottom:auto; top:max(12px,env(safe-area-inset-top)); }

/* ---- il titolo e la sua barra ---- */
#titolo{
  position:fixed; z-index:3; left:0; right:0; top:11vh; margin:0; text-align:center; pointer-events:none;
  font-size:clamp(40px,12.5vmin,120px); font-weight:400; line-height:1.08; letter-spacing:.02em;
  transform:translateY(-70vh); transition:transform .5s cubic-bezier(.5,-0.3,.7,.4);
}
#titolo span{ display:block; }
#titolo span + span{ color:var(--oro); }
#titolo small{
  display:block; margin-top:1.2em; font-size:.2em; letter-spacing:.2em; color:var(--carta);
  text-shadow:0 .16em 0 var(--inchiostro), .12em 0 0 var(--inchiostro), -.12em 0 0 var(--inchiostro), 0 -.12em 0 var(--inchiostro);
}
body.titolo #titolo{ transform:none; transition:transform .55s cubic-bezier(.2,1.2,.4,1); }

#barra{
  position:fixed; z-index:4; left:0; right:0; bottom:max(6vh,env(safe-area-inset-bottom)); padding-bottom:.6em;
  display:flex; align-items:flex-end; justify-content:center; gap:calc(var(--u)*1.6);
  transform:translateY(160%); transition:transform .3s cubic-bezier(.5,-0.3,.7,.4);
}
body.titolo #barra{ transform:none; transition:transform .45s cubic-bezier(.2,1.2,.4,1) .1s; }

#invito{
  position:fixed; z-index:3; left:0; right:0; bottom:calc(max(6vh,env(safe-area-inset-bottom)) + var(--u)*11); text-align:center; pointer-events:none;
  font-size:clamp(14px,3vmin,26px); letter-spacing:.08em; animation:lampeggia 1s steps(2,jump-none) infinite;
}
body.gioco #invito{ display:none; }
@keyframes lampeggia{ from{ opacity:1; } to{ opacity:.45; } }

/* ---- i pannelli: pausa, impostazioni, evento ---- */
.pannello{
  position:fixed; z-index:7; left:50%; top:50%; width:min(88vw, calc(var(--u)*27)); max-height:90vh;
  display:flex; flex-direction:column; gap:calc(var(--u)*1.35); padding:calc(var(--u)*1.6) calc(var(--u)*1.6) calc(var(--u)*2.1);
  font-size:var(--u); background:#2f3750;
  box-shadow:0 0 0 .3em var(--carta), 0 0 0 .55em var(--inchiostro), 0 .9em 0 .55em rgba(20,24,38,.45);
  transform:translate(-50%,-50%) scale(.6); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .16s cubic-bezier(.2,1.3,.4,1), opacity .12s, visibility 0s .16s;
}
.pannello.largo{ width:min(94vw, calc(var(--u)*40)); }
#pEvento{ z-index:8; }
body.p-pausa #pPausa, body.p-imp #pImp, body.p-evento #pEvento{ transform:translate(-50%,-50%); opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.pannello h2{ margin:0 0 .2em; text-align:center; font-weight:400; font-size:1.6em; letter-spacing:.06em; flex:none; }
.pannello h3{
  margin:.9em 0 0; padding:.55em .7em .45em; font-weight:400; font-size:.95em; letter-spacing:.1em;
  background:#1d2233; color:var(--oro);
}
.pannello h3:first-child{ margin-top:0; }
.pannello h3.verde{ color:var(--verde); }
.pannello h3.rossa{ color:var(--rosso); }
.nota{ margin:0; font-family:'Courier New',monospace; font-weight:700; font-size:.78em; line-height:1.35; letter-spacing:0; color:#b9c2d8; }
/* la parte che scorre: tutto il resto del pannello resta fermo */
.corpo{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  display:flex; flex-direction:column; gap:calc(var(--u)*1.05); padding:.3em .55em 1em .3em; margin-right:-.4em;
  scrollbar-width:thin; scrollbar-color:#4c8df0 #1d2233;
}
.schede{ display:flex; gap:1em; flex:none; padding-bottom:.5em; }
.tasto.scheda{ flex:1; height:3em; --su:#56607c; --giu:#3a425a; }
.tasto.scheda.scelto{ --su:var(--oro); --giu:#c99a12; color:var(--inchiostro); text-shadow:none; }
.riga{ display:flex; align-items:center; justify-content:space-between; gap:1em; padding-bottom:.5em; flex:none; }
.riga > span{ font-size:.9em; line-height:1.4; }
.regola{ display:flex; align-items:center; gap:.8em; padding-bottom:.1em; }
.regola small{ font-size:.8em; color:#b9c2d8; }
.tacche{ display:flex; gap:.3em; }
.tacche i{ display:block; width:.8em; height:1.6em; background:#1d2233; box-shadow:0 0 0 .14em var(--inchiostro); }
.tacche i.on{ background:var(--oro); }
.numero{
  width:5.2em; height:2.4em; padding:0 .3em; border:0; border-radius:0; text-align:center; -moz-appearance:textfield; appearance:textfield;
  font:inherit; font-size:1em; color:var(--carta); background:#1d2233; box-shadow:0 0 0 .2em var(--inchiostro), inset 0 .25em 0 rgba(0,0,0,.35);
  -webkit-user-select:text; user-select:text;
}
.numero::-webkit-outer-spin-button, .numero::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.numero:focus{ outline:.2em solid var(--oro); outline-offset:.2em; }
.scelte{ display:flex; flex-wrap:wrap; gap:1em .9em; padding-bottom:.6em; flex:none; }
.tasto.scelta{ flex:1 1 28%; height:2.8em; padding:0 .5em; font-size:.85em; --su:#56607c; --giu:#3a425a; }
.tasto.scelta.scelto{ --su:#62d633; --giu:#3f9a1b; }

/* una riga per voce: a sinistra regalo e nome, a destra quanto, EVENTO,
   prova e togli; se non ci stanno, la destra va a capo */
.azione{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.8em 1em;
  padding:.7em .7em 1em; background:#262d42; box-shadow:inset .3em 0 0 var(--verde); flex:none;
}
.azChi{ flex:1 1 11em; min-width:0; display:flex; align-items:center; gap:.8em; }
.azFa{ flex:none; display:flex; align-items:center; gap:.8em; padding-bottom:.35em; }
.tasto.animale{ justify-self:start; height:2.2em; padding:0 .7em; font-size:.8em; --su:#56607c; --giu:#3a425a; }
.nuove{ display:flex; gap:1em; padding:.2em 0 .7em; flex:none; }
.tasto.aggiungi{ flex:1; height:2.8em; font-size:.8em; --su:#56607c; --giu:#3a425a; }
.azione.rossa{ box-shadow:inset .3em 0 0 var(--rosso); }
.azione .regalo{ width:2.4em; height:2.4em; margin-left:.4em; image-rendering:auto; }
.azNome{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.55em; }
.azNome span{ font-size:.85em; }
.azNome small{ font-family:'Courier New',monospace; font-weight:700; font-size:.72em; color:#b9c2d8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.azMetri{ display:flex; align-items:center; gap:.35em; }
.azMetri b{ font-weight:400; color:var(--verde); }
.azione.rossa .azMetri b{ color:var(--rosso); }
.azMetri small{ font-size:.75em; color:#b9c2d8; }
.azMetri .numero{ width:4.6em; }
.tasto.evento{ height:2.4em; padding:0 .7em; font-size:.75em; }
.tasto.prova{ width:2.6em; height:2.4em; }

/* la scelta del regalo */
.tasto.scegli{ display:flex; justify-content:flex-start; gap:.8em; padding:0 .8em; font-family:'Courier New',monospace; font-weight:700; }
.tasto.scegli .regalo{ width:2em; height:2em; }
.catalogo{ display:flex; flex-direction:column; gap:.8em; flex:none; }
.cerca{
  height:2.6em; padding:0 .8em; border:0; border-radius:0; font-family:'Courier New',monospace; font-weight:700; font-size:1em;
  color:var(--carta); background:#1d2233; box-shadow:0 0 0 .2em var(--inchiostro); -webkit-user-select:text; user-select:text;
}
.cerca:focus{ outline:.2em solid var(--oro); outline-offset:.2em; }
.voci{ display:grid; grid-template-columns:repeat(auto-fill,minmax(12em,1fr)); gap:.5em; }
.voce{
  display:flex; align-items:center; gap:.6em; padding:.4em .5em; border:0; cursor:pointer; text-align:left;
  font-family:'Courier New',monospace; font-weight:700; font-size:.8em; color:var(--carta); background:#262d42;
}
.voce span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voce small{ color:var(--oro); }
.voce:hover{ background:#39435f; }
.voce.scelto{ background:#3f9a1b; }
.voce.usato{ opacity:.45; cursor:not-allowed; }
.voce .regalo{ width:1.9em; height:1.9em; flex:none; }

/* dietro al pannello il gioco si scurisce */
body::after{
  content:''; position:fixed; z-index:6; inset:0; background:rgba(24,28,44,.5); opacity:0; pointer-events:none; transition:opacity .15s;
}
body.p-pausa::after, body.p-imp::after, body.p-evento::after{ opacity:1; pointer-events:auto; }

#velo{ position:fixed; z-index:9; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .2s; }
#velo.su{ opacity:1; }

/* Piano Free: una voce oltre le prime 5 e' chiusa, si puo' solo togliere. */
.azione.chiusa .azChi, .azione.chiusa .azMetri, .azione.chiusa .evento, .azione.chiusa .prova:not(.rosso){ opacity:.4; }