Revisione di Codex: salvataggi a punti fermi, salva e carica da file, volume delle voci

- si salva solo a sequenza finita: uscire a metà di una risposta o della casetta riporta a prima; la squama
  presa resta salvata anche senza cambiare scena; test di interruzione su soluzione e catena del ghiacciolo
- «Salva su file» nella pausa e «Carica» nel titolo, con controllo di versione e contenuto prima di
  sostituire il salvataggio del browser
- cursore del volume delle voci («bla»), 50% di partenza; il muto zittisce subito la voce, la pausa la riprende
- col dito un oggetto mancato di poco si prende, e i piccoli vincono sui grandi che li contengono (la squama);
  verbi su due colonne nel telefono in orizzontale
- sfondi caricati per vicinanza alla scena di partenza, con tentativi limitati se falliscono; a gioco fermo
  non si ridisegna
- modalità ?debug per scrivere le scene: area calpestabile, hotspot, punti, coordinate copiabili
- corretto: i crediti dal titolo restavano dietro il titolo

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ApqNBvNbNCwXqR2RLo8QJh

style.css

@@ -30,12 +30,13 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
   text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000; }
 #speech:empty { display: none; }
 
-/* Musica: nota per il muto e cursore del volume, in alto a destra sopra la scena (anche sul titolo). */
+/* Audio: nota per il muto, cursore della musica e cursore delle voci («bla»), in alto a destra sopra la scena (anche sul titolo). */
 #sound { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px;
   background: rgba(27, 20, 32, .62); border-radius: 18px; }
 #mute { width: 30px; height: 30px; padding: 0; font: bold 12.96px var(--font); color: var(--accent); background: none; border: 0; cursor: pointer; }
 #mute[aria-pressed="true"] { color: var(--dim); text-decoration: line-through; }
-#volume { width: clamp(60px, 10vw, 110px); accent-color: var(--accent); cursor: pointer; }
+#volume, #voice-volume { width: clamp(50px, 9vw, 100px); accent-color: var(--accent); cursor: pointer; }
+.sound-label { margin-left: 4px; font-size: 9px; color: var(--accent); }
 
 #sentence { min-height: 1.8em; padding: .25em .6em; text-align: center; color: var(--blue); font-size: clamp(10.8px, 1.44vw, 15.84px); font-weight: bold; background: var(--panel); }
 
@@ -140,7 +141,8 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
   color: var(--accent); background: rgba(27, 20, 32, .62); border: 0; border-radius: 18px; cursor: pointer; }
 #pause { z-index: 3; background: rgba(15, 10, 20, .9); }
 .pause-buttons { flex-direction: column; align-items: stretch; min-width: min(70%, 16em); }
-#pause .hint { color: var(--dim); }
+#pause .hint { color: var(--dim); max-width: 34em; text-align: center; }
+.load-error { margin: .6em 0 0; padding: .4em .8em; color: #fff; background: #7a1f1f; border-radius: 6px; font-size: max(9px, calc(var(--u) * 1.4)); }
 #map { z-index: 3; justify-content: flex-start; padding-top: 2.5%; background: rgba(15, 10, 20, .94); }
 #map h2 { font-size: clamp(12.96px, 2.16vw, 23.04px); }
 /* Sui telefoni la pianta resta grande quanto serve per leggerla e si scorre col dito. */
@@ -155,7 +157,7 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
 #map-board button.here { color: var(--ink); background: #2f5fb3; cursor: default; }
 #map-board button.here::after { content: ' · sei qui'; font-weight: normal; }
 /* I crediti crescono con chi contribuisce: scorre solo l'elenco, dedica e Chiudi restano sempre in vista. */
-#credits { z-index: 3; justify-content: flex-start; overflow: hidden; padding-top: 4%; background: rgba(15, 10, 20, .96); }
+#credits { justify-content: flex-start; overflow: hidden; padding-top: 4%; background: rgba(15, 10, 20, .96); }
 #credits .credits-dedication { margin: .2em 0 .5em !important; font-size: clamp(10px, 1.6vw, 17px); }
 /* Due colonne: il ruolo a destra della sua colonna, il nome a sinistra della sua, allineati sulla riga. */
 #credits dl { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: .4em; margin: .2em 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; row-gap: .45em; align-items: baseline; width: min(100%, 44em); }
@@ -182,9 +184,10 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
   #panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); flex: 1; min-height: 0; gap: 6px; padding: 6px; }
   #inventory { grid-template-columns: repeat(2, 1fr); min-height: 0; height: auto; }
   #verbs button, #inventory button, #choices li { font-size: 10.08px; }
-  /* La colonna di lato è stretta: verbi piccoli che vanno a capo, mai più larghi della colonna (sennò il telefono
-     allarga la pagina e taglia tutto a destra). */
-  #verbs button { font-size: clamp(6px, 1vw, 8px); padding: .7em 0; letter-spacing: -.04em; }
+  /* La colonna di lato è stretta: verbi su due colonne, così il dito li prende e si leggono; mai più larghi della
+     colonna (sennò il telefono allarga la pagina e taglia tutto a destra). */
+  #verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  #verbs button { font-size: clamp(8px, 1.25vw, 10px); padding: .75em 0; letter-spacing: -.04em; }
   #inventory button { font-size: 8px; }
   /* Pausa, mappa, crediti e titolo: tutto dentro l'altezza della scena. */
   .overlay { gap: .3em; padding: 6px; overflow-y: auto; }