/* ===========================================================================
   [512] I GIOCHI DEI RAGAZZI — L'ASPETTO COMUNE (vh-giochi-giovani.js).

   Qui c'e' quello che tutti i giochi hanno uguale: il foglio a tutto
   schermo, la testa col titolo e «Chiudi», i tasti, i messaggi, i
   riquadri. Tutto comincia con «vh-gg-»; quello di un gioco solo sta nel
   suo file (vh-parola-giorno.css, vh-che-libro.css, vh-caccia-capitolo.css)
   e comincia con «vh-<gioco>-».

   I colori vengono dalle variabili del sito (--bg --card --card2 --line
   --text --dim --accent-fondo --ok-… --avviso-… --errore-testo): valgono nel
   tema scuro, nella Vista Carta e col contrasto alto, senza scrivere niente
   due volte. Giusto e sbagliato non si dicono MAI solo col colore: c'e'
   sempre anche un'icona, una parola o la forma del bordo.

   [ATTENZIONE] Il foglio copre lo schermo col fondo PIENO (var(--bg)): una
   finestra che copre lo schermo non e' mai trasparente. Il «z-index» scritto
   qui vale solo se public/vh-pannelli.js non c'e': quando c'e', la quota la
   da' lui (chi si apre dopo sta sopra).

   LA LARGHEZZA. Sul telefono una colonna; sul PC la stessa colonna al
   centro, larga al massimo --vh-gg-largo (620 px; ogni gioco la cambia per
   se': la tastiera della Parola del giorno a 540, il capitolo della caccia
   a 752). La testa si allinea alla colonna.
   =========================================================================== */

.vh-gg-foglio{--vh-gg-largo:620px;position:fixed;inset:0;z-index:2147482100;background:var(--bg, #0b0d12);color:var(--text, #eef1f6);
  overflow-y:auto;overflow-x:hidden;line-height:1.45;font-size:16px;box-sizing:border-box;overscroll-behavior:contain;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)}
.vh-gg-foglio *{box-sizing:border-box}
.vh-gg-foglio [hidden]{display:none !important}
.vh-gg-foglio .vh-ic{width:22px;height:22px;flex:none}

/* ---- la testa: il titolo e «Chiudi», ferma mentre si scorre ---- */
.vh-gg-testa{position:sticky;top:0;z-index:2;background:var(--bg, #0b0d12);border-bottom:1px solid var(--line, #2a3040)}
.vh-gg-riga{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 16px;
  max-width:calc(var(--vh-gg-largo) + 32px);margin:0 auto}
.vh-gg-riga h2{margin:0;font-size:1.2rem;line-height:1.25;display:flex;align-items:center;gap:8px;min-width:0}
.vh-gg-riga h2 span{min-width:0;overflow-wrap:anywhere}
.vh-gg-riga h2:focus{outline:none}
.vh-gg-riga h2:focus-visible{outline:3px solid var(--accent2-testo, #f0a8ae);outline-offset:3px}
.vh-gg-riga .vh-gg-tasto{flex:none}
/* la striscia sotto il titolo (la domanda della caccia): ferma anche lei */
.vh-gg-pannello{max-width:calc(var(--vh-gg-largo) + 32px);margin:0 auto;padding:4px 16px 10px;display:flex;flex-direction:column;gap:6px}

/* ---- il corpo ---- */
.vh-gg-corpo{max-width:calc(var(--vh-gg-largo) + 32px);margin:0 auto;padding:12px 16px 32px;display:flex;flex-direction:column;gap:12px}
.vh-gg-corpo p{margin:0}
.vh-gg-corpo h3,.vh-gg-h3{margin:4px 0 0;font-size:1.08rem;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vh-gg-corpo h3:focus{outline:none}
.vh-gg-corpo h3:focus-visible{outline:3px solid var(--accent2-testo, #f0a8ae);outline-offset:2px}

/* ---- i tasti: alti almeno 44 px, la parola sempre accanto all'icona ---- */
.vh-gg-tasto{min-height:44px;padding:8px 16px;border:0;border-radius:var(--r-1, 10px);background:var(--accent-fondo, #c62f3c);
  color:#fff;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  max-width:100%;text-align:left;flex-shrink:0}
.vh-gg-tasto .vh-ic{width:20px;height:20px;flex:none}
.vh-gg-tasto.vh-gg-piano{background:var(--card2, #1e2430);color:var(--text, #eef1f6);border:1px solid var(--line, #2a3040)}
.vh-gg-foglio button:focus-visible,.vh-gg-foglio input:focus-visible,.vh-gg-foglio select:focus-visible,
.vh-gg-posto button:focus-visible{outline:3px solid var(--accent2-testo, #f0a8ae);outline-offset:2px}
.vh-gg-azioni{display:flex;flex-wrap:wrap;gap:8px}
.vh-gg-azioni .vh-gg-tasto{flex:1 1 150px}

/* ---- le parole ---- */
.vh-gg-msg{color:var(--dim, #9aa3b2)}
.vh-gg-msg[data-tipo="no"]{color:var(--errore-testo, #ff9a9a);font-weight:700}
.vh-gg-nota{color:var(--dim, #9aa3b2);font-size:.92rem}
.vh-gg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
/* il riquadro (una sfida, i record, la fine…) */
.vh-gg-riquadro{background:var(--card, #171b25);border:1px solid var(--line, #2a3040);border-radius:var(--r-2, 14px);
  padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.vh-gg-riquadro.vh-gg-segnato{border-left:5px solid var(--accent-fondo, #c62f3c)}
.vh-gg-amico{background:var(--avviso-sfondo, var(--card, #171b25));border:1px solid var(--avviso-bordo, #8a6d1f);
  border-radius:var(--r-1, 10px);padding:8px 12px;font-weight:700}

/* ---- sotto il capitolo della Bibbia (vh-gg-posto: v. posto() nel .js) ---- */
.vh-gg-posto:empty{display:none}
.vh-gg-posto{margin-top:14px}
.vh-gg-casella{background:var(--card, #171b25);color:var(--text, #eef1f6);border:1px solid var(--line, #2a3040);
  border-left:5px solid var(--accent-fondo, #c62f3c);border-radius:var(--r-2, 14px);padding:12px 14px;line-height:1.5;
  display:flex;flex-direction:column;gap:8px;max-width:100%}
.vh-gg-casella p{margin:0;display:flex;gap:8px;align-items:flex-start}
.vh-gg-casella .vh-ic{width:22px;height:22px;flex:none}
.vh-gg-casella .vh-gg-tasto{align-self:flex-start}

/* sul telefono stretto i tasti delle azioni prendono tutta la riga */
@media (max-width:420px){
  .vh-gg-corpo .vh-gg-azioni .vh-gg-tasto{flex:1 1 100%}
  .vh-gg-riga h2{font-size:1.04rem}
}