/* ===========================================================================
   [522] LA SALA GIOCHI — l'aspetto di tutta la parte del sito dove si gioca.

   PER MARIO. Mario, 15 ottobre 2026: «modifica la visualizzazione dei giochi
   per rendere chiaro, come per la sezione bambini, che ci troviamo in una
   sezione in cui si gioca». La pagina dei bambini ha la barra colorata, le
   schede grandi con la figura sopra e il titolo sotto: si capisce al primo
   sguardo. I giochi invece erano righe scure con un'icona piccola, uguali alle
   righe di tutti gli altri strumenti. Qui c'e' la stessa idea, con colori
   suoi (viola, non l'arcobaleno dei bambini) e piu' sobria, perche' e' il sito
   di una chiesa:
     - una BARRA ALLEGRA in cima, con un colore suo (la «banda»);
     - una fascia con «Qui si gioca!» e una fila di gettoni colorati, ognuno
       con l'icona di un gioco (solo icone del set del sito, public/icons.svg);
     - SCHEDE GRANDI, una per gioco, ognuna col suo colore: la copertina con
       l'icona grande sopra, il nome e a che serve sotto, il bordo in basso
       «da tasto» come nelle sale giochi.

   DOVE SI USA (tutto con le classi «sg-»):
     - la pagina Giochi per gruppi (public/giochi.html): la barra, la fascia, i
       giochi per tutti e quelli per chi conduce;
     - il foglio «Giovani e bambini» della Home (public/index.html, rapidoApri):
       le righe dei giochi diventano schede (le regole qui sotto, con
       #rapido-ov[data-rp="giovani"]: le altre schede della Home restano come
       sono);
     - la testa dei fogli dei giochi (public/vh-giochi-giovani.css, e i due
       che hanno il foglio loro: «Indovina dal dettaglio» e «L'infiltrato»):
       la banda col colore del gioco e il suo nome.
   Si carica da public/vh-giochi-giovani.js (che lo mette da solo dove serve) e
   con un <link> nelle due pagine che lo disegnano subito (Home, /giochi).

   TEMA SCURO, VISTA CARTA, CONTRASTO. Il fondo e il testo delle schede sono
   i colori del sito (--card, --text, --dim, --line): cambiano con il tema, la
   Vista Carta e il contrasto alto senza scrivere niente due volte. I colori
   «fissi» sono solo i due che servono a una cosa sola: la copertina e la banda,
   con scritte e icone BIANCHE. Misurato: bianco su ognuno dei colori qui sotto
   fra 4,6 e 12,6 : 1 (la banda sempre sopra 7 : 1; il titolo grande e' scritto
   in grassetto). Giusto e sbagliato dei giochi non dipendono da questi colori.

   [ATTENZIONE] Niente trasparenze: la banda e le copertine sono colori pieni
   (sono dentro una finestra che copre lo schermo: mai trasparente). Niente
   movimento per chi ha chiesto «meno movimento» (v. in fondo).
   =========================================================================== */

:root{
  /* la banda in cima: indaco → viola → melanzana. Il bianco sopra sta fra
     12,6 e 7,6 : 1 su tutta la lunghezza (misurato) */
  --sg-banda:linear-gradient(100deg, #2b1a8a 0%, #5427bf 52%, #8f1f6c 100%);
}

/* ---- i colori dei giochi: due tinte per gioco (copertina a sfumatura) ----
   Il bianco sopra sta almeno a 4,6 : 1 su tutte (misurato col contrasto di
   WCAG); la PRIMA tinta (--sg-c, quella della testa dei fogli, dove sta il
   titolo) sta sopra 7 : 1. Chi non e' in elenco prende l'indaco. */
[data-sg]{--sg-c:#3b2aa8; --sg-c2:#5a38c8}
[data-sg="parola-giorno"],[data-sg="parola"],[data-sg="anagrammi"]{--sg-c:#146333; --sg-c2:#1f8046}
[data-sg="che-libro"],[data-sg="versetto"],[data-sg="mappa"],[data-sg="@giochi"]{--sg-c:#0c56a0; --sg-c2:#1368b8}
[data-sg="caccia-capitolo"],[data-sg="chidetto"],[data-sg="voto-sala"]{--sg-c:#0a605c; --sg-c2:#0d7a74}
[data-sg="versetto-codice"],[data-sg="quiz"],[data-sg="milionario"]{--sg-c:#814500; --sg-c2:#a85a00}
[data-sg="mappa-sfida"],[data-sg="cruciverba"],[data-sg="rischiatutto"],[data-sg="via:/gioca"]{--sg-c:#3b2aa8; --sg-c2:#5a38c8}
[data-sg="lampo"],[data-sg="pictionary"],[data-sg="immagini"]{--sg-c:#9c1f6b; --sg-c2:#b82a80}
[data-sg="chi-sono"],[data-sg="tabu"],[data-sg="bingo"]{--sg-c:#a22727; --sg-c2:#c13434}
[data-sg="giochi-bibbia"],[data-sg="intruso"]{--sg-c:#6a2aa0; --sg-c2:#7c36b5}
[data-sg="dettaglio-tavole"],[data-sg="ordina"],[data-sg="bambini"],[data-sg="modo-bambino"]{--sg-c:#7a4a1f; --sg-c2:#8e5826}
[data-sg="infiltrato"],[data-sg="personaggio"]{--sg-c:#3d5365; --sg-c2:#4a6378}

/* ===========================================================================
   LA BARRA IN CIMA (.sg-testata): la barra di sempre del sito (.vh-top) col
   colore della sala. «!important» perche' la barra di tutte le pagine ha il
   vetro (trasparente e sfocato, v. ui.css) con regole piu' forti di questa:
   qui serve la banda piena, sempre.
   =========================================================================== */
body .vh-top.sg-testata{
  background:var(--sg-banda) !important; background-color:#2b1a8a !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; border-bottom:0 !important; color:#fff}
.vh-top.sg-testata h1{color:#fff;font-weight:900;font-size:1.2rem;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.vh-top.sg-testata h1 .vh-ic{color:#fff}
/* il tasto «indietro»: chiaro e pieno, come nella pagina dei bambini */
.vh-top.sg-testata .vh-back{background:#fff;color:#1a1410;border:0}
.vh-top.sg-testata .vh-back:hover{background:#f1ecff}

/* ===========================================================================
   LA FASCIA («Qui si gioca!» e i gettoni): sta sotto la barra, fa da
   intestazione alla pagina. Decorativa: ai lettori di schermo resta solo la
   frase. I gettoni sono tondi, coi colori dei giochi.
   =========================================================================== */
.sg-sala{max-width:640px;margin:0 auto;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px}
.sg-sala .sg-slogan{margin:0;font-size:1.5rem;font-weight:900;line-height:1.15;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sg-sala .sg-slogan small{display:block;flex:1 1 100%;font-size:.95rem;font-weight:600;line-height:1.4;color:var(--dim)}
.sg-fascia{display:flex;gap:8px;justify-content:space-between;overflow:hidden;padding:2px 0 4px}
.sg-fascia > span{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--sg-c),var(--sg-c2));color:#fff;border-bottom:3px solid rgba(0,0,0,.22)}
.sg-fascia .vh-ic{width:22px;height:22px}
/* sul telefono stretto i gettoni in piu' restano fuori, senza far scorrere la pagina */
@media (max-width:400px){.sg-fascia > span:nth-child(n+7){display:none}}
@media (min-width:640px){.sg-fascia{justify-content:flex-start;gap:12px}}

/* ===========================================================================
   LE SCHEDE GRANDI (.sg-scheda): una per gioco. Servono per i <button> e per
   i link <a>; sono alte almeno un dito (la copertina da sola e' di 78 px).
   =========================================================================== */
/* [ATTENZIONE] «.sg-scheda.sg-scheda» (la classe due volte) non e' un refuso:
   nella pagina Giochi per gruppi le schede sono anche «.tipo», con regole sue
   scritte DOPO questo foglio di stile; due classi valgono piu' di una e la
   scheda resta quella che si e' disegnata qui. */
.sg-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.sg-griglia{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
/* i giochi con la spiegazione lunga (la pagina Giochi per gruppi): sul telefono
   una scheda per riga, la copertina a sinistra */
@media (max-width:639px){
  .sg-griglia.sg-lista{grid-template-columns:minmax(0,1fr)}
  .sg-griglia.sg-lista .sg-scheda{flex-direction:row}
  .sg-griglia.sg-lista .sg-scheda .sg-cover{width:84px;height:auto;min-height:92px;flex:none}
}

.sg-scheda.sg-scheda,
#rapido-ov[data-rp="giovani"] .str-voce{
  position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:0;overflow:hidden;
  min-height:44px;width:100%;box-sizing:border-box;text-align:left;text-decoration:none;font:inherit;cursor:pointer;
  color:var(--text);background:var(--card);
  border:2px solid var(--line);border-bottom:5px solid var(--sg-c2);border-radius:var(--r-3,20px);
  -webkit-tap-highlight-color:transparent}
/* la copertina: colore pieno, icona bianca grande, due cerchi chiari per l'allegria */
.sg-scheda .sg-cover,
#rapido-ov[data-rp="giovani"] .str-voce .str-ico{
  position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:78px;margin:0;overflow:hidden;
  background:linear-gradient(135deg,var(--sg-c),var(--sg-c2));color:#fff;font-size:0;line-height:0}
.sg-scheda .sg-cover::before,
#rapido-ov[data-rp="giovani"] .str-voce .str-ico::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 18%, rgba(255,255,255,.20) 0 20px, transparent 21px),
             radial-gradient(circle at 10% 96%, rgba(255,255,255,.14) 0 30px, transparent 31px)}
.sg-scheda .sg-cover .vh-ic,
#rapido-ov[data-rp="giovani"] .str-voce .str-ico .vh-ic{position:relative;width:46px;height:46px;color:#fff;flex:none}
/* il nome e a che serve */
.sg-scheda .sg-corpo,
#rapido-ov[data-rp="giovani"] .str-voce .str-testo{display:block;min-width:0;padding:10px 12px 12px}
.sg-scheda .sg-corpo b,
#rapido-ov[data-rp="giovani"] .str-voce .str-testo b{display:block;font-size:1rem;font-weight:800;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.sg-scheda .sg-corpo small,
#rapido-ov[data-rp="giovani"] .str-voce .str-testo span{display:block;margin-top:3px;font-size:.875rem;font-weight:400;line-height:1.4;color:var(--dim);overflow-wrap:anywhere}
.sg-scheda .sg-corpo small .rep{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:var(--r-tondo,999px);font-weight:600;white-space:nowrap;
  background:color-mix(in srgb, var(--sg-c) 14%, var(--card));color:var(--text)}

.sg-scheda.sg-scheda:hover,
#rapido-ov[data-rp="giovani"] .str-voce:hover{background:var(--card2, var(--card));border-color:var(--sg-c)}
.sg-scheda.sg-scheda:active,
#rapido-ov[data-rp="giovani"] .str-voce:active{transform:translateY(2px)}
.sg-scheda.sg-scheda:focus-visible,
#rapido-ov[data-rp="giovani"] .str-voce:focus-visible{outline:3px solid var(--accent2-testo, #f0a8ae);outline-offset:2px}
/* ...e il tipo «a squadre» (rosso dei bottoni) non cambia: la scheda e' la scheda */
a.sg-scheda.sg-scheda{color:var(--text)}

/* ===========================================================================
   IL FOGLIO «GIOVANI E BAMBINI» DELLA HOME. La barra col titolo diventa la
   banda; la fascia con «Qui si gioca!» e' il primo pezzo del corpo (la scrive
   VHGiochiGiovani.sala(), v. rapidoApri in index.html). Il resto dei fogli
   della Home (Culti, La Bibbia…) non si tocca: l'attributo data-rp lo dice.
   =========================================================================== */
#rapido-ov[data-rp="giovani"] .tt-testa{background:var(--sg-banda);background-color:#2b1a8a;border-bottom:0;color:#fff}
#rapido-ov[data-rp="giovani"] .tt-testa h2{color:#fff;font-weight:900;font-size:1.2rem}
#rapido-ov[data-rp="giovani"] .tt-testa .rp-tit-ico{color:#fff}
#rapido-ov[data-rp="giovani"] .tt-chiudi{background:#fff;color:#1a1410;border:0}
#rapido-ov[data-rp="giovani"] .tt-corpo{padding-top:4px}
#rapido-ov[data-rp="giovani"] .tt-corpo > .sg-sala{padding:10px 0 6px}
#rapido-ov[data-rp="giovani"] .str-griglia{gap:12px}
/* la riga che resta sola in fondo prende tutta la larghezza (v. index.html):
   con la copertina grande non serve, ma non fa danni */
#rapido-ov[data-rp="giovani"] .str-griglia > .str-voce:last-child:nth-child(odd){grid-column:1 / -1}

/* ===========================================================================
   LA TESTA DEI FOGLI DEI GIOCHI (vh-giochi-giovani.js mette data-sg sul
   foglio): banda in tinta unita col colore del gioco (la prima tinta, che col
   bianco sta sopra 7 : 1), titolo e icona bianchi, «Chiudi» bianco. Il fondo del foglio resta PIENO (var(--bg)): qui si colora solo la testa.
   =========================================================================== */
.vh-gg-foglio[data-sg] .vh-gg-testa{background:var(--sg-c);border-bottom:0}
.vh-gg-foglio[data-sg] .vh-gg-riga h2{color:#fff;font-weight:900}
.vh-gg-foglio[data-sg] .vh-gg-riga h2:focus-visible{outline-color:#fff}
.vh-gg-foglio[data-sg] .vh-gg-riga .vh-gg-tasto{background:#fff;color:#1a1410;border:0}
.vh-gg-foglio[data-sg] .vh-gg-pannello{background:var(--bg)}
/* i due giochi che hanno il foglio loro (v. vh-dettaglio-tavole.css e vh-infiltrato.css) */
#vh-dettaglio-tavole-foglio .vh-dettaglio-tavole-testa,
#vh-infiltrato-foglio .vh-infiltrato-testa{background:var(--sg-c);border-bottom:0}
#vh-dettaglio-tavole-foglio .vh-dettaglio-tavole-testa h2,
#vh-infiltrato-foglio .vh-infiltrato-testa h2{color:#fff;font-weight:900}
#vh-dettaglio-tavole-foglio .vh-dettaglio-tavole-testa .vh-dettaglio-tavole-tasto,
#vh-infiltrato-foglio .vh-infiltrato-testa .vh-infiltrato-tasto{background:#fff;color:#1a1410;border:0}

/* ===========================================================================
   MENO MOVIMENTO, STAMPA
   =========================================================================== */
.sg-scheda,#rapido-ov[data-rp="giovani"] .str-voce{transition:border-color .15s, background-color .15s}
@media (prefers-reduced-motion: reduce){
  .sg-scheda,#rapido-ov[data-rp="giovani"] .str-voce{transition:none}
  .sg-scheda:active,#rapido-ov[data-rp="giovani"] .str-voce:active{transform:none}
}
/* sulla carta (cruciverba, bingo) niente banda e niente fascia: solo il gioco */
@media print{
  body .vh-top.sg-testata{background:#fff !important;background-color:#fff !important;color:#000}
  .vh-top.sg-testata h1{color:#000;text-shadow:none}
  .sg-sala{display:none !important}
}