/* La cornice dei giochi, uguale per tutti: barra con le pillole, campo con angoli tondi, copertina, conto alla rovescia, fine partita.
   Carta chiara color crema nelle pagine chiare, vetro scuro nelle zone scure (cielo notturno, laboratorio) e a schermo intero.
   Va caricato dopo style.css. La parte che si muove sta in giochi-grafica.js. */

.gc-campo, #gioco, .rob-gioco {
  --gg-carta: #fbf6ee; --gg-foglio: #fffdf9; --gg-ink: #1d140d; --gg-muto: #6f6155; --gg-riga: #1d140d1c; --gg-pillola: #ffffff; --gg-ar: #ff7a1a; --gg-ar2: #c2520a; --gg-ombra: #1d140d40;
  --gg-sis: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cielo .gc-campo, .cielo-oggi .gc-campo, .lab-giochi .gc-campo, .lab-giochi #gioco, .gc-campo.gioco-pieno, #gioco.gioco-pieno {
  --gg-carta: #171224d9; --gg-foglio: #1d1730e6; --gg-ink: #f7efe4; --gg-muto: #b9aacb; --gg-riga: #ffffff26; --gg-pillola: #ffffff12; --gg-ar2: #ffa24d; --gg-ombra: #00000080;
}

/* ——— il riquadro ——— */
body .gc-campo:not(.viaggio) { background: var(--gg-carta); color: var(--gg-ink); border: 1px solid var(--gg-riga); border-radius: 28px; padding: 14px; box-shadow: 0 26px 50px -30px var(--gg-ombra), 0 2px 6px -3px var(--gg-ombra); font-family: var(--gg-sis); }
body .cielo .gc-campo:not(.viaggio), body .cielo-oggi .gc-campo:not(.viaggio) { -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
body .gc-campo.gioco-pieno:not(.viaggio) { background: radial-gradient(ellipse at 80% 0%, #2a1f3f, #120d1c 60%, #08060d); border: 0; border-radius: 0; }
body .sala-campo { max-width: min(460px, calc((100svh - 150px) * .75 + 30px)); }
body .gc-campo.gioco-pieno.sala-campo { max-width: none; }

/* ——— la barra: punti, tempo o vite, record ——— */
body .gc-testa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; margin: 0 0 10px; font: 600 12px/1 var(--gg-sis); letter-spacing: 0; text-transform: none; color: var(--gg-muto); }
body .gc-testa > span { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-height: 52px; min-width: 0; padding: 7px 15px; border-radius: 17px; background: var(--gg-pillola); box-shadow: inset 0 0 0 1px var(--gg-riga); }
body .gc-testa > span:last-child { align-items: flex-end; }
body .gc-testa b { display: block; font: 800 25px/1 var(--gg-sis); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gg-ink); }
body .gc-testa .gc-tempo { align-items: center; min-width: 86px; font: 800 19px/1 var(--gg-sis); font-variant-numeric: tabular-nums; color: var(--gg-ar2); text-align: center; white-space: nowrap; }
body .gc-testa .gc-tempo small { font: 600 12px/1 var(--gg-sis); color: var(--gg-muto); }
body .gc-testa .gc-tempo:empty { visibility: hidden; }
.gg-batti { animation: gg-batti .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes gg-batti { 0% { transform: scale(1.28); color: var(--gg-ar); } 100% { transform: none; } }

/* il laboratorio ha la sua testata */
body #gioco .gioco-punti { gap: 8px; font: 600 12px/1 var(--gg-sis); letter-spacing: 0; text-transform: none; color: var(--gg-muto) !important; }
body #gioco .gioco-punti span { display: flex; flex-direction: column; gap: 4px; min-width: 74px; padding: 8px 14px; border-radius: 16px; background: var(--gg-pillola); box-shadow: inset 0 0 0 1px var(--gg-riga); }
body #gioco .gioco-punti b { font: 800 23px/1 var(--gg-sis); font-variant-numeric: tabular-nums; color: var(--gg-ink); }

/* ——— il campo ——— */
.gg-scena { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; background: #0b0813; box-shadow: 0 0 0 1px var(--gg-riga), 0 16px 30px -20px #000000b3; transition: box-shadow .3s; }
.gg-scena > .gc-area, .gg-scena > .gioco-campo, .gg-scena > .sala-tela-zona { border-radius: 0; margin: 0; box-shadow: none !important; overscroll-behavior: contain; }
.gg-scena #sala-tela { max-width: none; border-radius: 0; box-shadow: none !important; }
.gg-scena #mot-tela, .gg-scena #cav-tela { box-shadow: 0 0 0 1px #ffffff1f, 0 14px 30px -16px #000; }
[data-gg-stato="gioca"] > .gg-scena { box-shadow: 0 0 0 2px #ff7a1a59, 0 16px 30px -20px #000000b3; }
.gioco-pieno > .gg-scena { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gioco-pieno > .gg-scena > :first-child { flex: 1 1 auto; min-height: 0; }
.gioco-pieno > .gg-scena #sala-tela { max-width: 100%; }
.gg-ok .mot-copertina:not(.cav-livelli) { visibility: hidden; }

/* ——— il velo: copertina, conto alla rovescia, pausa, fine ——— */
.gg-velo { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; overflow: auto; background: #0b081385; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transition: opacity .3s ease, visibility .3s; }
.gg-velo[hidden] { display: grid; opacity: 0; visibility: hidden; pointer-events: none; }
[data-gg-stato="conta"] .gg-velo { background: #0b081340; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gg-carta { box-sizing: border-box; width: min(100%, 330px); padding: 18px 18px 14px; border-radius: 24px; background: var(--gg-foglio); color: var(--gg-ink); text-align: center; font-family: var(--gg-sis); box-shadow: inset 0 0 0 1px var(--gg-riga), 0 24px 50px -22px #000000d9; animation: gg-su .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gg-su { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.gg-cop { display: block; width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 22px; background: #fff center / 84% no-repeat; box-shadow: 0 10px 20px -12px #000000a6, inset 0 0 0 1px #1d140d14; }
.gg-cop-segno { display: grid; place-items: center; font-size: 46px; line-height: 1; }
.gg-cop-grande { width: auto; height: auto; aspect-ratio: 16 / 9; margin: -8px -8px 12px; border-radius: 17px; background-size: cover; }
.gg-carta .gg-titolo { margin: 0; font: 800 22px/1.15 var(--gg-sis); letter-spacing: -.02em; color: var(--gg-ink); }
.gg-come, .gg-frase { margin: 7px 0 0; font: 500 14.5px/1.4 var(--gg-sis); color: var(--gg-muto); }
.gg-eti { margin: 0 0 4px; font: 700 13px/1 var(--gg-sis); color: var(--gg-muto); }
.gg-voto { display: block; font: 800 64px/1 var(--gg-sis); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--gg-ink); }
.gg-unita { display: block; margin-top: 2px; font: 600 14px/1 var(--gg-sis); color: var(--gg-muto); }
.gg-record { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; font: 700 13px/1 var(--gg-sis); color: var(--gg-muto); background: var(--gg-pillola); box-shadow: inset 0 0 0 1px var(--gg-riga); }
.gg-record:empty { display: none; }
.gg-record.gg-nuovo { color: #7a3300; background: #ffe3c7; box-shadow: none; animation: gg-batti .5s .25s cubic-bezier(.2, .8, .2, 1) both; }
.gg-bott { display: block; width: 100%; min-height: 50px; margin: 14px 0 0; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(#ff9a4a, #ff7a1a); color: #2a1403; font: 700 17px/1 var(--gg-sis); cursor: pointer; box-shadow: 0 10px 20px -12px #ff7a1acc, inset 0 1px 0 #ffffff59; transition: transform .16s, filter .16s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gg-bott:hover { filter: brightness(1.05); }
.gg-bott:active { transform: scale(.97); }
.gg-liscio { display: block; width: 100%; min-height: 40px; margin: 4px 0 0; border: 0; background: none; color: var(--gg-muto); font: 600 14px/1 var(--gg-sis); cursor: pointer; border-radius: 999px; }
.gg-bott:focus-visible, .gg-liscio:focus-visible { outline: 3px solid #ff7a1a8c; outline-offset: 3px; }
.gg-numero { font: 800 112px/1 var(--gg-sis); letter-spacing: -.04em; color: #fff; text-shadow: 0 6px 30px #000000b3, 0 0 40px #ff7a1a80; animation: gg-numero .62s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gg-numero { 0% { opacity: 0; transform: scale(1.7); } 35% { opacity: 1; } 100% { opacity: .15; transform: scale(.82); } }

/* il cartellino con il consiglio: dentro il campo, sparisce al primo tocco */
.gg-cartellino { position: absolute; left: 50%; bottom: 14px; z-index: 4; max-width: calc(100% - 28px); margin: 0; padding: 10px 16px; border-radius: 999px; background: #120d1cd9; color: #fff; font: 600 14px/1.25 var(--gg-sis); text-align: center; box-shadow: inset 0 0 0 1px #ffffff2e, 0 12px 26px -12px #000; pointer-events: none; transform: translateX(-50%); animation: gg-cart .4s .15s cubic-bezier(.2, .8, .2, 1) both; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gg-cartellino.gg-va { opacity: 0; transition: opacity .3s; }
@keyframes gg-cart { from { opacity: 0; transform: translate(-50%, 10px); } }
body .gioco-tocca { top: auto; bottom: 12px; left: 50%; right: auto; width: max-content; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: #120d1cd9; color: #fff; font: 600 13.5px/1.2 var(--gg-sis, system-ui); letter-spacing: 0; text-transform: none; transform: translateX(-50%); box-shadow: inset 0 0 0 1px #ffffff2e; }

/* il «+1» che vola via nei giochi fatti di pulsanti (stelle cadenti) */
.gg-vola { position: absolute; z-index: 3; margin: -30px 0 0 -12px; font: 800 18px/1 var(--gg-sis); color: #ffe9b0; text-shadow: 0 2px 8px #000; pointer-events: none; animation: gg-vola .7s ease-out both; }
@keyframes gg-vola { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-34px); } }
/* stelle cadenti più grandi e più vive; pianeti e Luna con più profondità */
body .gc-meteora::before { width: 16px; height: 16px; margin: -8px; background: radial-gradient(circle at 40% 40%, #fff, #ffe9b0 60%, #ffb45e); box-shadow: 0 0 14px 5px #ffe9b0cc, 0 0 34px 14px #ff9a3c80; }
body .gc-meteora::after { width: 96px; height: 4px; margin-top: -2px; background: linear-gradient(90deg, transparent, #ff9a3c66 45%, #fff3d6); filter: drop-shadow(0 0 4px #ffb45e); }
body .gc-pianeta { border: 0; background: #ffffff0f; box-shadow: inset 0 0 0 1px #ffffff24; font: 600 14px/1.2 var(--gg-sis); transition: transform .16s, background .2s; }
body .gc-pianeta:hover { background: #ffffff1c; }
body .gc-pianeta:active { transform: scale(.96); }
body .gc-pianeta.giusto { box-shadow: inset 0 0 0 1.5px #6dff9a80; }
body .gc-fila span { animation: gg-su .3s cubic-bezier(.2, .8, .2, 1) both; }
body .gc-luna svg { filter: drop-shadow(0 0 26px #ffe9a055) !important; }

/* ——— quello che sta sotto il campo ——— */
body .gg-ok .gc-voce, body #gioco.gg-ok .gioco-voce { margin: 10px 0 0; text-align: center; font: 600 15px/1.4 var(--gg-sis); color: var(--gg-ink); }
.gg-nuova { animation: gg-voce .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes gg-voce { from { opacity: 0; transform: translateY(6px); } }
[data-gg-stato="inizio"] > .gc-voce, [data-gg-stato="fine"] > .gc-voce, [data-gg-stato="conta"] > .gc-voce, #gioco[data-gg-stato="inizio"] > .gioco-voce, #gioco[data-gg-stato="fine"] > .gioco-voce { visibility: hidden; }
.gg-ok:not([data-gg-stato="visto"]) .gc-azioni .gc-via, #gioco.gg-ok:not([data-gg-stato="visto"]) #gioco-via { display: none !important; }
body .gg-ok .gc-nota { color: var(--gg-muto); font: 500 13px/1.4 var(--gg-sis); }
body .gg-ok .gc-nota a { color: var(--gg-ar2); }
body .gc-campo > .gioco-pieno-bott, body #gioco.gg-ok > .gioco-pieno-bott { margin: 0 0 8px auto; min-height: 32px; padding: 5px 12px; border: 0; border-radius: 999px; background: var(--gg-pillola); color: var(--gg-muto); font: 600 12.5px/1 var(--gg-sis); box-shadow: inset 0 0 0 1px var(--gg-riga); }
body .gg-ok .sala-icone { color: var(--gg-muto); font: 600 13px/1 var(--gg-sis); }
body .gg-ok .sala-icone button { border: 0; background: var(--gg-pillola); color: var(--gg-ink); box-shadow: inset 0 0 0 1px var(--gg-riga); transition: transform .16s, box-shadow .16s; }
body .gg-ok .sala-icone button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gg-ar); background: #ff7a1a1f; }
body .gg-ok .sala-frecce button { border: 0; background: var(--gg-pillola); color: var(--gg-ink); box-shadow: inset 0 0 0 1px var(--gg-riga); }
body .gg-ok .sala-frecce button:active { background: #ff7a1a33; }
[data-gg-stato="gioca"] .sala-icone { display: none; }

/* robotica: stessi angoli e stessa carta, senza toccare il gioco */
body .rob-gioco .rob-missione { border-radius: 20px; }

@media (max-width: 520px) {
  body .gc-campo:not(.viaggio) { padding: 10px; border-radius: 24px; }
  body .gc-testa > span { min-height: 48px; padding: 6px 12px; }
  body .gc-testa b { font-size: 23px; }
  body .gc-testa .gc-tempo { min-width: 76px; font-size: 17px; }
  .gg-voto { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .gg-carta, .gg-numero, .gg-cartellino, .gg-nuova, .gg-batti, .gg-record.gg-nuovo, .gg-vola, body .gc-fila span { animation: none; }
  .gg-velo, .gg-bott, .gg-scena { transition: none; }
}
/* 6.25 — la copertina del gioco non esce più dalla finestra: resta centrata e si adatta all'altezza */
.gg-velo { place-items: safe center; align-content: safe center; }
.gg-carta { max-height: calc(100% - 8px); overflow: auto; margin: auto; }
.gg-cop-grande { aspect-ratio: auto; height: min(34vh, 160px); background-size: cover; background-position: center; }
.gg-carta .gg-come { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }