/* ===========================================================================
   [512] «Dai il telefono al bambino» (era l'esperimento modo-bambino
   del Laboratorio, 492): lo usano la Home e l'Angolo Bambini, con un <link>
   in testa a tutte e due (nell'Angolo la barra e le parti da nascondere
   servono dal primo disegno). public/vh-modo-bambino.js.
   Tutte le classi cominciano con «vh-modo-bambino»: non toccano il sito.
   Le finestre a tutto schermo hanno il fondo PIENO (var(--bg), var(--card)):
   niente veli trasparenti. Nella Home i colori sono quelli del tema del sito;
   nell'Angolo Bambini sono quelli chiari della sua pagina (stessi nomi).
   =========================================================================== */

/* ---------------------------------------------------------------- la Home */
.vh-modo-bambino-foglio{position:fixed;inset:0;z-index:2147482000;background:var(--bg, #0b0d12);color:var(--text, #eef1f6);
  overflow-y:auto;overscroll-behavior:contain;line-height:1.5}
html.vh-modo-bambino-blocca, html.vh-modo-bambino-blocca body{overflow:hidden}
.vh-modo-bambino-dentro{max-width:720px;margin:0 auto;padding:14px 16px 40px;box-sizing:border-box}
.vh-modo-bambino-testa{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
.vh-modo-bambino-tit{font-size:1.2rem;margin:0;display:flex;align-items:center;gap:8px;min-width:0}
.vh-modo-bambino-tit .vh-ic{width:1.4em;height:1.4em;flex:none}
.vh-modo-bambino-sottotit{font-size:1rem;margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.vh-modo-bambino-spiega{color:var(--dim, #9aa3b2);margin:4px 0 0}
.vh-modo-bambino-piccolo{color:var(--dim, #9aa3b2);font-size:.88rem;margin:8px 0 0}
.vh-modo-bambino-riass{margin:14px 0 4px;font-weight:700}
/* [512] detto chiaro ai genitori, ogni volta: il tasto Home non si ferma */
.vh-modo-bambino-attento{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:var(--r-2, 14px);
  background:var(--card, #171b25);border:1px solid var(--line, #2a3040);border-left:4px solid var(--accent2, #f4a261);font-size:.92rem;line-height:1.5}
.vh-modo-bambino-attento .vh-ic{width:1.3em;height:1.3em;flex:none;margin-top:.1em;color:var(--accent2-testo, #f4a261)}

.vh-modo-bambino-foglio button,
.vh-modo-bambino-barra button, .vh-modo-bambino-barra a,
.vh-modo-bambino-pieno button{font:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.vh-modo-bambino-chiudi{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-1, 10px);
  background:var(--card, #171b25);color:var(--text, #eef1f6);border:1px solid var(--line, #2a3040);flex:none}

.vh-modo-bambino-tempi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vh-modo-bambino-dove{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){.vh-modo-bambino-dove{grid-template-columns:1fr 1fr}}
.vh-modo-bambino-opz{background:var(--card, #171b25);color:var(--text, #eef1f6);border:2px solid var(--line, #2a3040);
  border-radius:var(--r-2, 14px);padding:10px 12px;text-align:left;display:flex;align-items:center;gap:10px}
.vh-modo-bambino-tempo{flex-direction:column;justify-content:center;text-align:center;gap:0;min-height:64px}
.vh-modo-bambino-tempo b{font-size:1.35rem;line-height:1.1}
.vh-modo-bambino-tempo span{font-size:.8rem;color:var(--dim, #9aa3b2)}
.vh-modo-bambino-luogo .vh-ic{width:1.6em;height:1.6em;flex:none}
.vh-modo-bambino-luogo span{display:flex;flex-direction:column;min-width:0}
.vh-modo-bambino-luogo small{color:var(--dim, #9aa3b2);font-size:.85rem}
.vh-modo-bambino-opz[aria-pressed="true"]{border-color:var(--ok, #2a9d8f);background:var(--ok-sfondo, #123024);color:var(--text, #eef1f6)}
.vh-modo-bambino-opz[aria-pressed="true"] span, .vh-modo-bambino-opz[aria-pressed="true"] small{color:var(--text, #eef1f6)}
.vh-modo-bambino-opz:focus-visible, .vh-modo-bambino-pieno button:focus-visible, .vh-modo-bambino-foglio button:focus-visible,
.vh-modo-bambino-barra button:focus-visible, .vh-modo-bambino-barra a:focus-visible{outline:3px solid var(--accent2-testo, #ffd23f);outline-offset:2px}

.vh-modo-bambino-grande{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding:14px 18px;
  border:0;border-radius:var(--r-2, 14px);font-weight:800;font-size:1.1rem;min-height:56px;background:var(--accent-fondo, #c62f3c);color:#fff}
.vh-modo-bambino-verde{background:var(--ok-fondo, #1f7d72);color:#fff}
.vh-modo-bambino-secondo{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:10px 14px;
  border-radius:var(--r-2, 14px);background:var(--card, #171b25);color:var(--text, #eef1f6);border:1px solid var(--line, #2a3040);text-align:center}
.vh-modo-bambino-secondo .vh-ic, .vh-modo-bambino-grande .vh-ic{flex:none}

/* la guida «Il vero lucchetto» con le figure */
.vh-modo-bambino-guida p{margin:6px 0}
.vh-modo-bambino-guide{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
@media (min-width:700px){.vh-modo-bambino-guide{grid-template-columns:1fr 1fr}}
.vh-modo-bambino-guida-carta{background:var(--card, #171b25);border:1px solid var(--line, #2a3040);border-radius:var(--r-2, 14px);padding:10px 12px;margin-top:10px}
.vh-modo-bambino-guide .vh-modo-bambino-guida-carta{margin-top:0}
.vh-modo-bambino-guida-carta h4{margin:0 0 8px;font-size:.98rem}
.vh-modo-bambino-tel{max-width:260px;margin:0 auto;background:var(--card2, #1e2430);border:3px solid var(--line, #2a3040);border-radius:22px;padding:14px 10px 12px}
.vh-modo-bambino-tel-orecchio{width:44px;height:5px;border-radius:3px;background:var(--line, #2a3040);margin:0 auto 10px}
.vh-modo-bambino-tel-riga{display:flex;align-items:center;gap:8px;background:var(--bg, #0b0d12);border-radius:10px;padding:7px 9px;margin-top:6px;font-size:.88rem}
.vh-modo-bambino-tel-riga span{flex:1;min-width:0}
.vh-modo-bambino-tel-riga .vh-ic{width:1em;height:1em;flex:none;color:var(--dim, #9aa3b2)}
.vh-modo-bambino-tel-n{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ok-fondo, #1f7d72);color:#fff;font-size:.78rem}
.vh-modo-bambino-tel-ultima{outline:2px solid var(--ok, #2a9d8f)}
.vh-modo-bambino-tel-int{flex:none;width:34px;height:20px;border-radius:10px;background:var(--ok-fondo, #1f7d72);position:relative}
.vh-modo-bambino-tel-int::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}

/* ------------------------------------------------- il modo acceso: la barra */
.vh-modo-bambino-barra{position:fixed;left:0;right:0;top:0;z-index:2147482500;height:64px;box-sizing:border-box;
  padding:6px 10px;padding-top:max(6px, env(safe-area-inset-top));display:flex;align-items:center;gap:8px;
  background:var(--card, #ffffff);color:var(--text, #3a2e22);border-bottom:2px solid var(--line, #d9cdb8)}
.vh-modo-bambino-bruco{flex:1;min-width:0;height:44px;display:flex;align-items:center}
.vh-modo-bambino-bruco-svg{width:100%;height:44px;display:block}
.vh-modo-bambino-mancano{flex:none;font-weight:800;font-size:.9rem;min-width:3.6em;text-align:right}
.vh-modo-bambino-esci, .vh-modo-bambino-ai-giochi{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;
  border-radius:var(--r-2, 14px);background:var(--bg, #fdf6e9);color:var(--text, #3a2e22);border:2px solid var(--line, #d9cdb8);
  font-weight:800;min-height:48px;text-decoration:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.vh-modo-bambino-ai-giochi{padding:4px 12px;touch-action:auto}
.vh-modo-bambino-anello{width:34px;height:34px;flex:none}
.vh-modo-bambino-esci.vh-modo-bambino-tiene{border-color:var(--accent-fondo, #c62f3c)}
.vh-modo-bambino-nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:380px){.vh-modo-bambino-mancano{display:none}}

/* nell'Angolo Bambini: la pagina scende sotto la barra (la sua barra
   colorata si ferma sotto la nostra, i fogli dei giochi pure) */
html.vh-modo-bambino-qui body{padding-top:64px}
html.vh-modo-bambino-qui .top{top:64px}
html.vh-modo-bambino-qui .full{top:64px}
/* niente strade verso fuori: la freccia di casa, le stampe, le schede PDF */
html.vh-modo-bambino-qui .top a.back,
html.vh-modo-bambino-qui [onclick^="stampa"],
html.vh-modo-bambino-qui [onclick^="schedaStoria"],
html.vh-modo-bambino-qui [onclick^="schedeTutte"],
html.vh-modo-bambino-qui p:has(> [onclick^="schedeTutte"]){display:none!important}

/* «IN CULTO»: via quello che parla o suona (i giochi muti restano) */
html.vh-modo-bambino-muto #pic-interruttore,
html.vh-modo-bambino-muto #piccoli-sezione,
html.vh-modo-bambino-muto h2:has(+ #canz-box),
html.vh-modo-bambino-muto #canz-box,
html.vh-modo-bambino-muto #canz-barra,
html.vh-modo-bambino-muto #btn-audio,
html.vh-modo-bambino-muto #btn-cartone,
html.vh-modo-bambino-muto div:has(> .fila > a[href*="gioca=mappa"]){display:none!important}

/* --------------------------------- le schermate a tutto schermo del modo */
.vh-modo-bambino-pieno{position:fixed;inset:0;z-index:2147482400;background:var(--bg, #fdf6e9);color:var(--text, #3a2e22);
  overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:80px 16px 24px;box-sizing:border-box;line-height:1.5}
.vh-modo-bambino-fine{z-index:2147482600;padding-top:24px}
.vh-modo-bambino-cancello{z-index:2147482700;padding-top:24px}
.vh-modo-bambino-centro{width:100%;max-width:460px;text-align:center;margin:auto}
.vh-modo-bambino-centro h2{font-size:1.45rem;margin:8px 0;display:flex;align-items:center;justify-content:center;gap:8px}
.vh-modo-bambino-grosso .vh-ic{width:96px;height:96px}
.vh-modo-bambino-pecora{width:200px;height:200px;margin:0 auto;transform-origin:50% 80%;animation:vh-modo-bambino-sbadiglia 3.2s ease-in-out infinite}
.vh-modo-bambino-pecora svg{width:100%;height:100%;display:block}
.vh-modo-bambino-pecora > .vh-ic{width:100%;height:100%}
@keyframes vh-modo-bambino-sbadiglia{0%,60%,100%{transform:scale(1,1) rotate(0)}70%{transform:scale(1.04,.93) rotate(-3deg)}82%{transform:scale(.98,1.07) rotate(2deg)}}
.vh-modo-bambino-zz{font-weight:900;letter-spacing:.3em;color:var(--dim, #7a6a56);animation:vh-modo-bambino-zz 2.4s ease-in-out infinite}
@keyframes vh-modo-bambino-zz{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.vh-modo-bambino-pecora,.vh-modo-bambino-zz{animation:none}}
.vh-modo-bambino-fine-esci{display:flex;justify-content:center;margin-top:16px}
/* alla fine: sotto la pecorella non si tocca piu' niente */
html.vh-modo-bambino-finito body > *:not(.vh-modo-bambino-fine):not(.vh-modo-bambino-cancello):not(.vh-modo-bambino-avviso){pointer-events:none!important}

/* il cancello: il conto e il tastierino */
.vh-modo-bambino-stretto{max-width:340px}
.vh-modo-bambino-domanda{font-size:1.5rem;font-weight:900;margin:6px 0}
.vh-modo-bambino-risposta{display:block;min-height:56px;font-size:2rem;font-weight:900;border:2px solid var(--line, #d9cdb8);border-radius:var(--r-2, 14px);
  background:var(--card, #ffffff);line-height:52px;letter-spacing:.1em;margin:8px 0}
.vh-modo-bambino-c-msg{min-height:1.5em;margin:4px 0 8px;font-weight:700}
.vh-modo-bambino-tastierino{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vh-modo-bambino-cifra{min-height:56px;font-size:1.4rem;font-weight:900;border-radius:var(--r-2, 14px);border:2px solid var(--line, #d9cdb8);
  background:var(--card, #ffffff);color:var(--text, #3a2e22);display:flex;align-items:center;justify-content:center}
.vh-modo-bambino-cifra.vh-modo-bambino-verde{background:var(--ok-fondo, #1f7d72);color:#fff;border-color:transparent}
.vh-modo-bambino-cifra .vh-ic{width:1.3em;height:1.3em}
.vh-modo-bambino-cifra[disabled]{opacity:.45;cursor:not-allowed}

/* la scritta che passa (role=status) */
.vh-modo-bambino-avviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2147482800;max-width:min(92vw,520px);
  background:var(--card, #171b25);color:var(--text, #eef1f6);border:2px solid var(--line, #2a3040);border-radius:var(--r-2, 14px);
  padding:10px 14px;font-weight:700;text-align:center;box-sizing:border-box}
.vh-modo-bambino-avviso[hidden]{display:none}