@font-face {
  font-family: 'PressStart2P';
  src: url('../assets/fonts/PressStart2P-Regular.ttf') format('truetype');
}
/* --px: un pixel di gioco in px CSS. main.js lo scrive a ogni ridimensionamento (k pixel di dispositivo / dpr): tutte le
   misure degli overlay sono pixel di gioco interi, i testi 8 pixel di gioco (la griglia del font). Questo valore di
   partenza conta solo se main.js non parte (schermata d'errore): lo stesso k, a meno del dpr. */
:root { --px: max(1px, round(down, min(100vw / 320, 100vh / 180), 1px)); }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: 'PressStart2P', monospace; color: #fff; }
/* chiosco: niente selezione del testo (solo il campo dei minuti si scrive) né gesti del touch (zoom, scorrimento) */
body { user-select: none; touch-action: none; }
/* il mondo parte da 0,0 e copre la finestra; quello che esce dal bordo (meno di un pixel di gioco) si taglia */
#stage { position: fixed; left: 0; top: 0; }
.panel input[type=number] { user-select: text; }
/* cursori in pixel art (tools/make_cursor.py): la freccia ovunque, la manina sui pulsanti e sui controlli, anche quelli
   dei pannelli che verranno (basta che siano button, label o input, campo dei minuti compreso). main.js li ridisegna alla
   scala del mondo (--arrow, --hand) e in copia piccola per i bordi della finestra (--arrow-s, --hand-s); finché non ci sono
   valgono i PNG ×4 */
#stage { cursor: var(--arrow, url('../assets/cursor.png') 0 0), var(--arrow-s, url('../assets/cursor.png') 0 0), auto; }
button, label, input, #card { cursor: var(--hand, url('../assets/cursor-hand.png') 8 0), var(--hand-s, url('../assets/cursor-hand.png') 8 0), pointer; }
#scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* prima della partita, in colonna al centro: logo grande (canvas), «GIOCA» e la scritta d'invito. main.js scrive --gx, --gy
   (il pulsante) e --py (la riga della scritta) in pixel di gioco interi da attract.js, pregame. La scritta compare e sparisce piano */
#prompt { position: absolute; display: none; }
#prompt { left: 0; right: 0; top: calc(var(--px) * var(--py)); text-align: center; font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 8); pointer-events: none;
          text-shadow: var(--px) 0 #000, calc(var(--px) * -1) 0 #000, 0 var(--px) #000, 0 calc(var(--px) * -1) #000; animation: breathe 1.5s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: 0; } }
/* «GIOCA»: i colori del logo, misure e posizione in pixel di gioco interi (niente translate o %: l'ombra netta resta netta).
   58×20 (attract.js, GIOCA_W e GIOCA_H) con la cornice da 1, ombra da 2. La cornice è un box-shadow interno: un border da
   --px frazionario (dpr 1,25) Chromium lo sfuma; la riga da 20 mette il testo 6 sotto il bordo, come cornice 1 + margine 5.
   Prima della partita ha sempre il fuoco: niente anello */
#gioca { position: absolute; left: calc(var(--px) * var(--gx)); top: calc(var(--px) * var(--gy)); width: calc(var(--px) * 58); height: calc(var(--px) * 20);
         box-sizing: border-box; margin: 0; padding: 0; border: 0; font: calc(var(--px) * 8) / calc(var(--px) * 20) 'PressStart2P', monospace; text-align: center;
         color: #11183e; background: #e8b321; outline: none; --f: inset 0 0 0 var(--px) #11183e; box-shadow: var(--f), calc(var(--px) * 2) calc(var(--px) * 2) 0 #11183e; }
#gioca:hover { background: #ffd23a; }
#gioca:active { translate: var(--px) var(--px); box-shadow: var(--f), var(--px) var(--px) 0 #11183e; }
#gioca[hidden] { display: none; }
#errore { display: none; max-width: 90vw; max-height: 84vh; overflow-y: auto; margin: 8vh auto; font-size: calc(var(--px) * 8); line-height: 1.8; }
#errore h1 { font-size: calc(var(--px) * 8); color: #f55; }
#errore li { margin-bottom: calc(var(--px) * 4); }

/* Cartiglio del Trofeo, dal mockup iniziale: 27 lettere da 8 pixel di gioco per riga, righe da 14 e spazio
   sotto il titolo da 6, così i bordi cadono su pixel di gioco interi. --b: spessore della cornice (reveal.js FRAME tiene la più spessa, 3) */
#card { position: absolute; left: 50%; bottom: calc(var(--px) * 14); width: calc(var(--px) * 216); padding: calc(var(--px) * 9) calc(var(--px) * 10);
        font-size: var(--fs, calc(var(--px) * 8)); line-height: 1.75; --b: calc(var(--px) * 3); --nb: calc(var(--px) * -3);
        text-align: center; overflow-wrap: anywhere; opacity: 0; pointer-events: none; transform: translateX(-50%) scale(0);
        overflow: hidden; } /* il testo (segni diacritici impilati compresi) resta dentro la cornice */
#card .txt { unicode-bidi: isolate; } /* una direzione forzata nel testo non rovescia altro (messages.js le rifiuta comunque) */
#card .ttl { margin-bottom: .75em; }
/* testi lunghi (reveal.js, fit): --fs scende di un pixel di dispositivo per pixel del font alla volta; alla soglia il testo
   si taglia con «…» a --lines righe */
#card.clamp .txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); overflow: hidden; }
#card.show { opacity: 1; pointer-events: auto; }
#stage:has(.panel.open) #card { pointer-events: none; } /* pannello aperto: un clic sul cartiglio non lo chiude (nessun clic arriva al gioco) */
/* il tema cambia con l'ora del giorno; sfuma solo a carta aperta, così una carta nuova parte già col suo colore */
#card.show, #card.show .ttl { transition: background-color 2s, color 2s, box-shadow 2s; }
/* positivo: esce con un rimbalzo a molla */
#card.pos.show { animation: pop .55s cubic-bezier(.2,1.7,.45,1) forwards; }
@keyframes pop { to { transform: translateX(-50%) scale(1); } }
/* negativo: il cartiglio cade dall'alto, sbatte e resta storto */
#card.neg { transform: translateX(-50%) translateY(-260%) rotate(0); }
#card.neg.show { animation: drop 1s linear forwards; }
@keyframes drop {
  0%   { transform: translateX(-50%) translateY(-260%) rotate(0); animation-timing-function: cubic-bezier(.5,0,1,1); }
  40%  { transform: translateX(-50%) translateY(0) rotate(-5deg); animation-timing-function: ease-out; }
  55%  { transform: translateX(-50%) translateY(-6%) rotate(3deg); animation-timing-function: ease-in; }
  70%  { transform: translateX(-50%) translateY(0) rotate(-2.5deg); }
  85%  { transform: translateX(-50%) translateY(0) rotate(-.5deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
}
#card.alba     { background: #fbeae2; color: #3a2440;
                 box-shadow: 0 var(--nb) #3a2440, 0 var(--b) #3a2440, var(--nb) 0 #3a2440, var(--b) 0 #3a2440, inset var(--nb) var(--nb) #e8b8b8, inset var(--b) var(--b) #ffffff; }
#card.alba.pos .ttl { color: #a8501a; } #card.alba.neg .ttl { color: #8a2a4a; }
#card.giorno   { background: #102a4c; color: #eaf6ff;
                 box-shadow: 0 var(--nb) #eaf6ff, 0 var(--b) #eaf6ff, var(--nb) 0 #eaf6ff, var(--b) 0 #eaf6ff, inset var(--nb) var(--nb) #0a1a30, inset var(--b) var(--b) #2a5a8a; }
#card.giorno.pos .ttl { color: #ffd84a; } #card.giorno.neg .ttl { color: #ff8a7a; }
#card.tramonto { background: #3b2416; color: #f6e7c8;
                 box-shadow: 0 var(--nb) #1a0e06, 0 var(--b) #1a0e06, var(--nb) 0 #1a0e06, var(--b) 0 #1a0e06, inset var(--nb) var(--nb) #8a5a1a, inset var(--b) var(--b) #d9a441; }
#card.tramonto.pos .ttl { color: #ffd23a; } #card.tramonto.neg .ttl { color: #f0a8a8; }
#card.notte    { background: rgba(8,14,32,.8); color: #ffffff; --b: calc(var(--px) * 2); --nb: calc(var(--px) * -2);
                 box-shadow: 0 var(--nb) #fff, 0 var(--b) #fff, var(--nb) 0 #fff, var(--b) 0 #fff; }
#card.notte.pos .ttl { color: #ffe066; } #card.notte.neg .ttl { color: #c8b0ff; }

/* HUD in alto a destra, stile scuro del cartiglio (giorno): etichette a sinistra, numeri a destra (fino a 7 cifre). Non prende
   clic: sotto c'è la scena. .dodge: la barca ci passa sotto e l'HUD si scansa (hud.js, dodge). .off: la partita non è
   iniziata (avvio, invito), l'HUD non c'è (hud.js, show). */
#hud { position: absolute; top: calc(var(--px) * 6); right: calc(var(--px) * 6); display: grid; grid-template-columns: auto auto;
       gap: calc(var(--px) * 3) calc(var(--px) * 10); padding: calc(var(--px) * 4) calc(var(--px) * 5); font-size: calc(var(--px) * 8); line-height: 1;
       --b: calc(var(--px) * 2); --nb: calc(var(--px) * -2); background: #102a4c; color: #eaf6ff; pointer-events: none; transition: opacity .2s;
       box-shadow: 0 var(--nb) #eaf6ff, 0 var(--b) #eaf6ff, var(--nb) 0 #eaf6ff, var(--b) 0 #eaf6ff, inset var(--nb) var(--nb) #0a1a30, inset var(--b) var(--b) #2a5a8a;
       outline: var(--b) solid transparent; outline-offset: var(--b); }
#hud.dodge, #hud.off { opacity: 0; }
#hud.off { transition: none; } /* con l'invito sparisce di colpo, senza mostrare gli zeri appena azzerati; ricompare in dissolvenza */
#hud span { position: relative; }
#hud .v { justify-self: end; color: #ffd84a; }
/* il numero cambiato salta su di 2 pixel e lampeggia bianco, a scatti */
#hud .v.bump { animation: bump .3s steps(1); }
@keyframes bump { 0% { transform: translateY(calc(var(--px) * -2)); color: #fff; } 50% { transform: translateY(calc(var(--px) * -1)); color: #ffd84a; } }
/* fiammelle accanto a STREAK, nello spazio prima dei numeri: piccola da 3 di fila, grande da 5 (sporge sopra la riga); tremolano specchiandosi */
#hud .flame { display: none; position: absolute; left: calc(100% + var(--px) * 2); bottom: 0; width: calc(var(--px) * 6); height: calc(var(--px) * 8);
              image-rendering: pixelated; animation: flick .3s steps(1) infinite; }
#hud .flame.big { left: calc(100% + var(--px)); width: calc(var(--px) * 8); height: calc(var(--px) * 11); }
#hud.hot .flame:not(.big), #hud.blaze .flame.big { display: block; }
@keyframes flick { 50% { transform: scaleX(-1); } }
/* da 5 di fila, a ogni presa: un bordo caldo attorno alla cornice che si spegne */
#hud.glow { animation: glow .6s steps(4); }
@keyframes glow { from { outline-color: #ffb040; } to { outline-color: transparent; } }
/* «+N» del trofeo: sale di 16 pixel di gioco, uno alla volta, e sparisce; hud.js lo mette in (--x, --y), pixel di gioco */
#pop { position: absolute; left: calc(var(--px) * var(--x, 0)); top: calc(var(--px) * var(--y, 0)); transform: translateX(-50%); opacity: 0; pointer-events: none;
       font-size: calc(var(--px) * 8); line-height: 1; white-space: nowrap; color: #ffd84a;
       text-shadow: var(--px) 0 #000, calc(var(--px) * -1) 0 #000, 0 var(--px) #000, 0 calc(var(--px) * -1) #000; }
#pop.go { animation: rise 1.2s steps(16) forwards; }
@keyframes rise { from, 75% { opacity: 1; } to { opacity: 0; transform: translate(-50%, calc(var(--px) * -16)); } }

/* Rotellina: ingranaggio 8x8 pixel (SVG inline, bordi netti) a 2 pixel di gioco per pixel, discreta finché non ci passi sopra
   o finché il pannello è aperto. Ancorata alla finestra (il mondo, in una finestra minuscola, esce dal bordo) e sopra i
   pannelli, sul loro angolo vuoto (.panel): si clicca sempre, anche a pannello aperto. A 8 pixel di gioco dai bordi: la manina (8x8) ci sta tutta, e Chromium non disegna un cursore che esce dalla finestra.
   Alla sua sinistra, 4 pixel più in là, la pergamena di «Come si gioca», uguale per misure e opacità */
#gear, #help { position: fixed; right: calc(var(--px) * 8); bottom: calc(var(--px) * 8); z-index: 3; width: calc(var(--px) * 16); height: calc(var(--px) * 16); padding: 0; border: 0; opacity: .35;
        image-rendering: pixelated; }
#gear { background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M3 0h2v1H3zM0 3h1v2H0zM7 3h1v2H7zM3 7h2v1H3zM1 1h1v1H1zM6 1h1v1H6zM1 6h1v1H1zM6 6h1v1H6zM2 1h4v1H2zM1 2h6v4H1zM2 6h4v1H2z'/%3E%3Cpath fill='%23102a4c' d='M3 3h2v2H3z'/%3E%3C/svg%3E"); }
/* pergamena: i due rotoli larghi quanto lei, il foglio rientrato di 1 con due righe di testo */
#help { right: calc(var(--px) * 28);
        background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 0h6v1H1zM0 1h8v1H0zM1 2h6v4H1zM0 6h8v1H0zM1 7h6v1H1z'/%3E%3Cpath fill='%23102a4c' d='M7 1h1v1H7zM0 6h1v1H0zM2 3h4v1H2zM2 5h3v1H2z'/%3E%3C/svg%3E"); }
#gear:hover, #gear:focus-visible, #gear[aria-expanded=true], #help:hover, #help:focus-visible, #help[aria-expanded=true] { opacity: 1; }
#gear:focus-visible, #help:focus-visible { outline: var(--px) solid #ffd84a; outline-offset: var(--px); }

/* Pannello: stile scuro del cartiglio (giorno), al centro della finestra su pixel di gioco interi (left e translate arrotondati a
   --px: niente mezzi pixel, bordi e testo restano netti). Testo a 8 pixel di gioco su righe da 8, 28 lettere per riga. In una
   finestra piccola resta dentro, con 4 pixel di gioco oltre la cornice, e scorre. Rotellina e pergamena gli stanno sopra,
   sull'angolo in basso a destra: lì nessuno dei due pannelli ha testo o controlli (le impostazioni finiscono 4 pixel prima
   della pergamena, in «Come si gioca» l'ultima riga è «Chiudi», a sinistra). */
.panel { position: fixed; left: round(down, 50vw, var(--px)); top: round(down, 50vh, var(--px)); translate: round(-50%, var(--px)) round(-50%, var(--px));
         width: calc(var(--px) * 240); max-width: calc(100vw - var(--px) * 12); max-height: calc(100vh - var(--px) * 12); overflow-y: auto; box-sizing: border-box;
         padding: calc(var(--px) * 8); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 8); --b: calc(var(--px) * 2); --nb: calc(var(--px) * -2);
         display: none; background: #102a4c; color: #eaf6ff; scrollbar-width: thin; scrollbar-color: #ffd84a #0a1a30;
         box-shadow: 0 var(--nb) #eaf6ff, 0 var(--b) #eaf6ff, var(--nb) 0 #eaf6ff, var(--b) 0 #eaf6ff, inset var(--nb) var(--nb) #0a1a30, inset var(--b) var(--b) #2a5a8a; }
.panel.open { display: block; z-index: 2; } /* sopra il resto della pagina, sotto rotellina e pergamena */
.panel .row { margin-bottom: calc(var(--px) * 8); }
.panel .h { margin-bottom: calc(var(--px) * 4); color: #ffd84a; }
.panel .left { margin-bottom: calc(var(--px) * 4); }
.panel label { display: inline-flex; align-items: center; gap: calc(var(--px) * 4); margin-right: calc(var(--px) * 12); }
.panel label:last-child { margin-right: 0; }
.panel label:hover { color: #ffd84a; }
/* il numero si scrive; le freccette del browser no (non sono in pixel art e a scala 1 coprirebbero le cifre) */
.panel input[type=number] { width: calc(var(--px) * 28); height: calc(var(--px) * 10); box-sizing: border-box; margin: 0; padding: 0 calc(var(--px) * 2); font: inherit; background: #0a1a30; color: #ffd84a;
         border: 0; box-shadow: inset 0 0 0 var(--px) #eaf6ff; appearance: textfield; } /* cornice in box-shadow: un border da 1 px Chromium lo sfuma */
.panel input[type=number]::-webkit-inner-spin-button { appearance: none; }
/* radio e caselle: l'input vero, disegnato in pixel art 8x8 (anello con il centro pieno, casella con la spunta) */
.panel input[type=radio], .panel input[type=checkbox] { appearance: none; flex: none; width: calc(var(--px) * 8); height: calc(var(--px) * 8); margin: 0;
         image-rendering: pixelated; background: center / 100% no-repeat; }
.panel input[type=radio] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23eaf6ff' d='M2 0h4v1H2zM1 1h1v1H1zM6 1h1v1H6zM0 2h1v4H0zM7 2h1v4H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/%3E%3Cpath fill='%230a1a30' d='M2 1h4v1H2zM1 2h6v4H1zM2 6h4v1H2z'/%3E%3C/svg%3E"); }
.panel input[type=radio]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23eaf6ff' d='M2 0h4v1H2zM1 1h1v1H1zM6 1h1v1H6zM0 2h1v4H0zM7 2h1v4H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/%3E%3Cpath fill='%230a1a30' d='M2 1h4v1H2zM1 2h6v4H1zM2 6h4v1H2z'/%3E%3Cpath fill='%23ffd84a' d='M3 2h2v1H3zM2 3h4v2H2zM3 5h2v1H3z'/%3E%3C/svg%3E"); }
.panel input[type=checkbox] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23eaf6ff' d='M0 0h8v1H0zM0 7h8v1H0zM0 1h1v6H0zM7 1h1v6H7z'/%3E%3Cpath fill='%230a1a30' d='M1 1h6v6H1z'/%3E%3C/svg%3E"); }
.panel input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23eaf6ff' d='M0 0h8v1H0zM0 7h8v1H0zM0 1h1v6H0zM7 1h1v6H7z'/%3E%3Cpath fill='%230a1a30' d='M1 1h6v6H1z'/%3E%3Cpath fill='%23ffd84a' d='M6 2h1v1H6zM1 3h1v1H1zM5 3h2v1H5zM1 4h2v1H1zM4 4h2v1H4zM2 5h3v1H2zM3 6h1v1H3z'/%3E%3C/svg%3E"); }
.panel input:focus-visible, .panel button:focus-visible { outline: var(--px) solid #ffd84a; outline-offset: var(--px); }
.panel button { font: inherit; border: 0; padding: 0; }
/* blocchi fase 2x2: il mini-cielo (settings-ui.js) con il nome sopra, contornato come la scritta d'invito; cornice d'oro
   sulla fase attuale, bianca sotto il mouse */
.panel .skies { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 4); }
.panel .sky { height: calc(var(--px) * 16); color: #fff; image-rendering: pixelated; background-size: calc(var(--px) * 4) 100%; background-repeat: repeat-x;
              text-shadow: var(--px) 0 #0a1a30, calc(var(--px) * -1) 0 #0a1a30, 0 var(--px) #0a1a30, 0 calc(var(--px) * -1) #0a1a30; box-shadow: 0 0 0 var(--px) #0a1a30; }
.panel .sky:hover { box-shadow: 0 0 0 var(--px) #eaf6ff; }
.panel .sky.on { box-shadow: 0 0 0 calc(var(--px) * 2) #ffd84a; }
.panel .sky:focus-visible { outline-color: #eaf6ff; outline-offset: calc(var(--px) * 3); }
.panel .ask { color: #102a4c; background: #ffd84a; padding: calc(var(--px) * 2) calc(var(--px) * 5); box-shadow: inset 0 calc(var(--px) * -1) #b8901a; }
.panel .ask:hover { background: #ffe680; }
.panel .ask.armed { background: #ff8a7a; box-shadow: inset 0 calc(var(--px) * -1) #c0503e; }
/* «Come si gioca» (help-ui.js): largo come le impostazioni (28 lettere per riga) e centrato; i paragrafi a righe da 9 (1 pixel
   tra una riga e l'altra: virgole e discendenti non toccano la riga sotto) stanno in una vista da 320×180 senza scorrere;
   paragrafi separati da 4, «Chiudi» come «Rimescola», al centro: rotellina e pergamena restano nell'angolo libero */
#help-panel { text-align: center; }
#help-panel p { margin: 0 0 calc(var(--px) * 4); line-height: calc(var(--px) * 9); }
#help-panel .rari { color: #ffd84a; }
/* X delle impostazioni: nell'angolo in alto a destra, accanto a «Recupero» (che sta a sinistra) */
#panel .x { position: absolute; top: calc(var(--px) * 4); right: calc(var(--px) * 4); width: calc(var(--px) * 10); height: calc(var(--px) * 10);
  background: #ffd84a center / calc(var(--px) * 6) no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23102a4c' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h2v2H2zM4 1h1v1H4zM5 0h1v1H5zM1 4h1v1H1zM0 5h1v1H0zM4 4h1v1H4zM5 5h1v1H5z'/%3E%3C/svg%3E");
  box-shadow: inset 0 calc(var(--px) * -1) #b8901a; }
#panel .x:hover { background-color: #ffe680; }