/* La Bottega dei Suoni · stile (24/10/2026)
   Stessa carta del Teatrino di Pozzalume (creative/2026-10-23-sito-vero/scelta-3/stile.css): colori,
   font, fibra, bordo tagliato a forbice, linguette che si piegano. Telefono prima (390), poi 700 e 1100.
   Si anima solo transform e opacity. Con "riduci movimento" tutto resta fermo e al suo posto. */

@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/pz-fredoka-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/pz-fredoka-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/pz-fredoka-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pz-andika-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/pz-andika-700-latin.woff2) format("woff2"); }
/* ripieghi metrici: finche' Fredoka e Andika non arrivano il testo occupa lo stesso spazio */
@font-face { font-family: "Fredoka ripiego"; src: local("Arial Rounded MT Bold"), local("Arial Bold"), local("Arial"); size-adjust: 103%; ascent-override: 96%; descent-override: 24%; }
@font-face { font-family: "Andika ripiego"; src: local("Verdana"), local("DejaVu Sans"), local("Arial"); size-adjust: 94%; ascent-override: 98%; descent-override: 28%; }

:root {
  --inchiostro: #33291f; --seppia: #6f604e; --notte: #2c3d6e; --notte-fonda: #1d2747;
  --oro: #e09a2b; --oro-profondo: #9a6414; --oro-testo: #784d0c; --ambra: #c98a1c;
  --forza: #b5432e; --ingegno: #3c60ae;
  --arancio: #cf7426; --viola: #7955a6; --mulino: #a8862a; --ponte: #8a5a35; --rocca: #566577; --bosco: #41803b; --forno: #c0394c;
  --stagno: #2e7088; --grotta: #6b5a8e; --inverno: #2f6f9a;
  --crema: #fffaf0; --riga: #fbf6ea; --linguetta: #e3d6bd; --cella: #f3ead6; --taglio: #b9ad9b; --contorno: #6e5236;
  --pergamena: #f4edde; --sabbia: #ceb37e; --miele: #e9d3af; --zolla: #8c754d; --radice: #66573d;
  --neve-calda: #f7eddb; --ghiaccio-chiaro: #bad1df; --ghiaccio-pallido: #d9e3ec;
  --fibra: url(img/fibra.webp);
  --fibra-chiara: url(img/fibra-chiara.webp);
  --f-titoli: "Fredoka", "Fredoka ripiego", system-ui, sans-serif;
  --f-testo: "Andika", "Andika ripiego", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --molla: cubic-bezier(.34, 1.56, .64, 1);
  --uscita: cubic-bezier(.16, 1, .3, 1);
  --gutter: 16px;
  --testa: 118px;
  --banco: 84px;
  --bordo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V7L1392 10L1330 6.5L1262 11L1198 7.5L1121 12L1048 8L986 11.5L915 6.5L842 10.5L770 7L698 12L631 8.5L560 11L488 6.5L417 10.5L349 7.5L276 12L205 8L139 11L71 6.5L0 9Z'/%3E%3C/svg%3E");
  --bordo-ombra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-2%25' y='-80%25' width='104%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='%23000' fill-opacity='.4' d='M0 0H1440V10L1392 13L1330 9.5L1262 14L1198 10.5L1121 15L1048 11L986 14.5L915 9.5L842 13.5L770 10L698 15L631 11.5L560 14L488 9.5L417 13.5L349 10.5L276 15L205 11L139 14L71 9.5L0 12Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: var(--radice); }
body {
  margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  background-color: var(--radice); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
  color: var(--inchiostro); font-family: var(--f-testo); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px dashed var(--oro); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nascosto { position: absolute; width: 0; height: 0; overflow: hidden; }
.salta {
  position: absolute; left: 12px; top: 10px; z-index: 100; display: inline-flex; align-items: center; min-height: 56px; padding: 10px 18px;
  background: var(--oro); color: var(--inchiostro); font-weight: 700; text-decoration: none;
  border-radius: 6px 9px 7px 10px; transform: translateY(-160%); transition: transform .2s;
}
.salta:focus { transform: none; }
main { display: block; outline: none; }

/* ---------- materiali del Teatrino ---------- */
.carta-tesoro {
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 9px 13px 10px 14px / 13px 9px 14px 10px; color: var(--inchiostro);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 6px var(--crema), inset 0 0 0 8px var(--oro),
    3px 4px 0 rgba(40, 25, 12, .18), 14px 22px 28px -10px rgba(40, 25, 12, .55);
}
.bottone {
  position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 12px 22px; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--f-titoli); font-weight: 700; font-size: 18px; line-height: 1.12;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; white-space: normal;
}
.bottone--linguetta {
  width: 100%; max-width: 360px; font-size: 19px; color: var(--crema);
  background-color: var(--notte);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%), var(--fibra);
  background-size: auto, 256px; background-blend-mode: normal, soft-light;
  border-radius: 6px 7px 14px 15px / 6px 6px 16px 15px;
  box-shadow: 0 4px 0 var(--notte-fonda), 4px 13px 18px -6px rgba(16, 22, 40, .55);
  transform-origin: 50% 0; transition: transform .24s var(--molla), box-shadow .24s ease;
}
.bottone--linguetta::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 7px; height: 1.5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 250, 240, .5) 0 6px, transparent 6px 10px);
}
.bottone--linguetta:active { transform: perspective(520px) rotateX(18deg) translateY(2px); box-shadow: 0 1px 0 var(--notte-fonda), 2px 6px 10px -4px rgba(16, 22, 40, .5); transition-duration: .1s; }
.bottone--carta {
  width: 100%; max-width: 360px; color: var(--inchiostro);
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 8px 12px 9px 13px / 12px 8px 13px 9px;
  box-shadow: inset 0 0 0 2px var(--inchiostro), 3px 4px 0 rgba(51, 41, 31, .25);
  transition: transform .22s var(--molla), box-shadow .22s;
}
.bottone--carta:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 0 0 2px var(--inchiostro), 1px 1px 0 rgba(51, 41, 31, .25); }
.bottone--piccolo { width: auto; min-height: 56px; padding: 8px 16px; font-size: 16px; }
.bottone--compatto { width: auto; min-height: 56px; padding: 8px 16px; font-size: 17px; }
@media (hover: hover) {
  .bottone--linguetta:hover { transform: translateY(-2px) rotate(-.7deg); box-shadow: 0 6px 0 var(--notte-fonda), 6px 17px 22px -6px rgba(16, 22, 40, .6); }
  .bottone--carta:hover { transform: translateY(-2px) rotate(-1.2deg); box-shadow: inset 0 0 0 2px var(--inchiostro), 5px 7px 0 rgba(51, 41, 31, .25); }
}
.coppia-bottoni { display: grid; gap: 14px; width: 100%; justify-items: center; margin-top: 22px; }

/* ---------- la testata: notte, insegna piccola e il filo delle sette lanterne ---------- */
.testata {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30; height: 62px;
  padding: env(safe-area-inset-top, 0) var(--gutter) 0;
  display: flex; align-items: center; color: var(--crema);
  background-color: var(--notte); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
}
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 16px; pointer-events: none;
  background-color: var(--notte); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
  -webkit-mask: var(--bordo) 0 0 / 1440px 16px repeat-x; mask: var(--bordo) 0 0 / 1440px 16px repeat-x;
}
.testata::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 24px; pointer-events: none;
  background: var(--bordo-ombra) 0 0 / 1440px 24px repeat-x;
}
body.avvio .testata { height: calc(62px + env(safe-area-inset-top, 0px)); }
.testata__casa { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding-right: 8px; text-decoration: none; position: relative; z-index: 2; }
.testata__casa img { width: 38px; height: 38px; flex: none; transform-origin: 50% 10%; transition: transform .4s var(--molla); }
.testata__casa:active img { transform: rotate(-14deg) scale(1.06); }
@media (hover: hover) { .testata__casa:hover img { transform: rotate(-14deg) scale(1.06); } }
.testata__nome { font-family: var(--f-titoli); font-weight: 700; font-size: 19px; letter-spacing: .005em; }
.testata__prova {
  margin-left: auto; position: relative; z-index: 2; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  background: var(--oro); color: var(--inchiostro);
}

.filo {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 52px; pointer-events: none; z-index: 1;
  display: flex; justify-content: space-between; padding: 0 calc(var(--gutter) + 6px);
}
.filo::before {   /* la cordicella, che fa la pancia tra le lanterne */
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 26px;
  border-bottom: 2px solid rgba(51, 41, 31, .55); border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.filo__l { position: relative; width: 24px; height: 38px; transform-origin: 50% 0; animation: dondola 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
.filo__l:nth-child(1), .filo__l:nth-child(7) { top: 0; }
.filo__l:nth-child(2), .filo__l:nth-child(6) { top: 6px; }
.filo__l:nth-child(3), .filo__l:nth-child(5) { top: 10px; }
.filo__l:nth-child(4) { top: 12px; }
.filo__l img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.filo__accesa { transition: opacity .6s ease; }
.filo__alone {
  position: absolute; left: 50%; top: 62%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 90, .62), rgba(255, 196, 90, 0));
  opacity: .5; transition: opacity .6s ease;
}
.filo__l.spenta .filo__accesa, .filo__l.spenta .filo__alone { opacity: 0; }
.filo__l.batte .filo__alone { animation: batte .5s var(--uscita); }
@keyframes dondola { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes batte { 0% { transform: scale(1); opacity: .5; } 30% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: .5; } }
body.suona .filo__alone { opacity: .78; }

/* ---------- le stanze ---------- */
.stanza {
  position: relative; min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--testa) + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--banco) + 40px + env(safe-area-inset-bottom, 0px));
  background-color: var(--fondo, var(--radice)); background-image: var(--fibra-s, var(--fibra)); background-size: 256px;
  background-blend-mode: var(--miscela, soft-light);
  transform-origin: 50% 0;
}
.stanza > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.stanza--porta { --fondo: var(--notte); color: var(--crema); padding-bottom: 48px; overflow: hidden; }
.stanza--bottega { --fondo: var(--radice); color: var(--crema); }
.stanza--musiche { --fondo: var(--notte); color: var(--crema); }
.stanza--suoni { --fondo: var(--miele); --fibra-s: var(--fibra-chiara); --miscela: multiply; }
.stanza--clessidra { --fondo: var(--ingegno); color: var(--crema); }
.stanza--dado { --fondo: #35692f; color: var(--crema); }
.stanza--diploma { --fondo: var(--pergamena); --fibra-s: var(--fibra-chiara); --miscela: multiply; }
.stanza--buonanotte { --fondo: var(--notte-fonda); color: var(--crema); overflow: hidden; }

/* la stanza si apre come una pagina di un libro pop-up: si alza dal fondo, poi le cose saltano su */
.stanza.apre { animation: apre .62s var(--uscita) both; }
.stanza.apre .su:not(.attesa) { transform-origin: 50% 100%; animation: salta .6s var(--molla) both; animation-delay: calc(.12s + var(--i, 0) * .045s); }
@keyframes apre { from { transform: perspective(1400px) rotateX(-24deg) translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes salta { from { transform: perspective(900px) rotateX(68deg) translateY(14px) scale(.96); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }

.stanza__testa { margin-bottom: 22px; }
.indietro {
  display: inline-flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 16px 0 12px; margin: 0 0 8px -4px;
  font-family: var(--f-titoli); font-weight: 600; font-size: 16px; text-decoration: none;
  border-radius: 99px; background: rgba(255, 250, 240, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 250, 240, .4);
}
.indietro span { font-size: 26px; line-height: 0; margin-top: -3px; }
.stanza--suoni .indietro, .stanza--diploma .indietro { background: rgba(51, 41, 31, .07); box-shadow: inset 0 0 0 1.5px rgba(51, 41, 31, .45); }
.stanza__titolo { font-family: var(--f-titoli); font-weight: 700; font-size: clamp(32px, 9vw, 52px); line-height: 1.04; }
.stanza__intro { margin-top: 10px; font-size: 17.5px; line-height: 1.5; max-width: 36em; }
.gruppo__titolo {
  display: flex; align-items: center; gap: 10px; margin-top: 30px; margin-bottom: 14px;
  font-family: var(--f-titoli); font-weight: 700; font-size: 21px; line-height: 1.15;
}
.gruppo__titolo::after { content: ""; flex: 1; height: 2px; opacity: .45; background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 18px); }

/* ---------- la porta ---------- */
.porta__notte { position: absolute; inset: 0; pointer-events: none; }
.stella { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffe9b8; box-shadow: 0 0 10px 2px rgba(255, 220, 150, .45); animation: brilla 3.4s ease-in-out infinite alternate; }
.porta__notte .s1 { left: 9%; top: 18%; } .porta__notte .s2 { left: 84%; top: 14%; animation-delay: -1.2s; } .porta__notte .s3 { left: 72%; top: 34%; width: 5px; height: 5px; animation-delay: -2s; }
.porta__notte .s4 { left: 16%; top: 42%; width: 5px; height: 5px; animation-delay: -.6s; } .porta__notte .s5 { left: 50%; top: 8%; width: 6px; height: 6px; animation-delay: -2.6s; }
@keyframes brilla { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.1); } }
.porta__insegna { margin-top: 6px; }
.porta__carta { position: relative; max-width: 520px; margin-top: 26px; padding: 26px 22px 24px; }
.porta__titolo { font-family: var(--f-titoli); font-weight: 700; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; color: var(--notte); }
.porta__testo { margin-top: 10px; font-size: 17px; }
.porta__passi { margin: 18px 0 20px; display: grid; gap: 10px; }
.porta__passi li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: 16.5px; }
.porta__n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--f-titoli); font-weight: 700; color: var(--crema); background: var(--notte);
}
.porta__carta .bottone { max-width: none; }
.banco:has(.avviso-suono) { flex-wrap: wrap; }
.avviso-suono { flex-basis: 100%; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--cella); color: var(--inchiostro); font-size: 15px; line-height: 1.35; box-shadow: inset 0 0 0 2px var(--forza); }
.porta__avviso { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--cella); font-size: 16px; box-shadow: inset 0 0 0 2px var(--oro); }
.porta__piccolo { margin-top: 14px; font-size: 14.5px; color: var(--seppia); }

/* ---------- l'insegna di carta che dondola ---------- */
.insegna { position: relative; width: min(300px, 82%); padding-top: 34px; transform-origin: 50% 0; animation: insegna 5.2s ease-in-out infinite alternate; }
.insegna__corda { position: absolute; top: 0; width: 2px; height: 40px; background: rgba(255, 250, 240, .7); }
.insegna__corda--s { left: 18%; transform: rotate(14deg); transform-origin: 50% 0; }
.insegna__corda--d { right: 18%; transform: rotate(-14deg); transform-origin: 50% 0; }
.insegna__tavola {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 16px 16px;
  background-color: var(--oro); background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 50%), var(--fibra);
  background-size: auto, 256px; background-blend-mode: normal, soft-light;
  border-radius: 10px 14px 12px 16px / 14px 10px 16px 12px; color: var(--inchiostro);
  box-shadow: inset 0 0 0 5px var(--oro), inset 0 0 0 7px rgba(120, 77, 12, .55), 4px 6px 0 rgba(20, 14, 6, .25), 12px 22px 26px -12px rgba(10, 8, 4, .6);
}
.insegna__tavola::before, .insegna__tavola::after { content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro-testo); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35); }
.insegna__tavola::before { left: 16%; } .insegna__tavola::after { right: 16%; }
.insegna__su { font-family: var(--f-titoli); font-weight: 600; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-testo); }
.insegna__giu { font-family: var(--f-titoli); font-weight: 700; font-size: clamp(25px, 7.4vw, 34px); line-height: 1.02; text-align: center; color: var(--notte); }
@keyframes insegna { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.insegna--grande { margin: 0 auto; }

/* ---------- lo scaffale ---------- */
.bottega__invito { max-width: 30em; margin: 22px auto 0; text-align: center; font-size: 17px; }
.scaffale { max-width: 760px; margin: 26px auto 0; display: grid; gap: 30px; }
.scaffale__ripiano {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; padding: 0 6px 22px;
}
.scaffale__ripiano::after {   /* l'asse di legno */
  content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 22px;
  background-color: var(--ponte); background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .12) 70%), var(--fibra);
  background-size: auto, 256px; background-blend-mode: normal, soft-light;
  border-radius: 4px 6px 8px 5px; box-shadow: 0 8px 0 rgba(40, 25, 12, .35), 0 18px 22px -10px rgba(0, 0, 0, .55);
}
.scaffale__ripiano::before {   /* il bordo dell'asse */
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 9px; height: 2px; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255, 230, 190, .45) 0 10px, transparent 10px 18px);
}
.scaffale__ripiano > li { position: relative; z-index: 2; }
.oggetto {
  display: grid; justify-items: center; gap: 8px; text-decoration: none; color: var(--inchiostro);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; transition: transform .3s var(--molla);
  -webkit-tap-highlight-color: transparent;
}
.oggetto__taglio {   /* il ritaglio di cartoncino, col tratteggio dove passano le forbici */
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / .9; padding: 12px;
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 18px 26px 20px 28px / 26px 18px 28px 20px;
  box-shadow: 3px 4px 0 rgba(40, 25, 12, .3), 10px 16px 20px -10px rgba(0, 0, 0, .6);
}
.oggetto__taglio::before {
  content: ""; position: absolute; inset: 7px; border-radius: inherit; pointer-events: none;
  border: 2px dashed var(--taglio);
}
.oggetto__img { width: auto; height: 100%; max-height: 112px; object-fit: contain; filter: drop-shadow(2px 3px 2px rgba(40, 25, 12, .3)); }
.oggetto__img--musone { width: 100%; height: auto; max-height: none; }
.oggetto__img--dado { height: 78%; }
.oggetto__img--clessidra { height: 92%; width: auto; }
.oggetto__img--diploma { height: 100%; border-radius: 3px; }
.oggetto__nome {
  display: block; padding: 7px 12px 8px; min-height: 48px; display: grid; place-items: center; text-align: center;
  font-family: var(--f-titoli); font-weight: 700; font-size: 16.5px; line-height: 1.1; color: var(--crema);
  background-color: var(--c); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
  border-radius: 6px 8px 12px 10px; box-shadow: 0 3px 0 rgba(20, 14, 6, .35);
}
.oggetto:active { transform: rotate(0deg) translateY(2px) scale(.97); transition-duration: .12s; }
@media (hover: hover) { .oggetto:hover { transform: rotate(0deg) translateY(-6px); } }
/* lo scaffale si sveglia a turno: ogni oggetto ogni 12 s fa il gesto della sua stanza (solo transform) */
.oggetto__img { animation: 12s ease-in-out infinite both; }
.oggetto__img--lanterna { transform-origin: 50% 6%; animation-name: sveglia-lanterna; animation-delay: 1.4s; }
.oggetto__img--musone { transform-origin: 50% 100%; animation-name: sveglia-musone; animation-delay: 3.4s; }
.oggetto__img--clessidra { animation-name: sveglia-clessidra; animation-delay: 5.4s; }
.oggetto__img--dado { animation-name: sveglia-dado; animation-delay: 7.4s; }
.oggetto__img--diploma { transform-origin: 50% 100%; animation-name: sveglia-diploma; animation-delay: 9.4s; }
.oggetto__img--luna { animation: sveglia-luna 6s ease-in-out infinite alternate; }
@keyframes sveglia-lanterna { 0%, 18%, 100% { transform: none; } 3% { transform: rotate(-9deg); } 7% { transform: rotate(7deg); } 11% { transform: rotate(-4deg); } 15% { transform: rotate(2deg); } }
@keyframes sveglia-musone { 0%, 14%, 100% { transform: none; } 3% { transform: translateY(2px) scale(1.06, .92); } 7% { transform: translateY(-14px) scale(.96, 1.05); } 11% { transform: translateY(1px) scale(1.04, .95); } }
@keyframes sveglia-clessidra { 0%, 4% { transform: rotate(0deg); } 12%, 54% { transform: rotate(180deg); } 62%, 100% { transform: rotate(360deg); } }
@keyframes sveglia-dado { 0%, 2% { transform: rotate(0deg); } 6% { transform: translateY(-18px) rotate(-120deg); } 10% { transform: translateY(-3px) rotate(-300deg); } 13%, 100% { transform: rotate(-360deg); } }
@keyframes sveglia-diploma { 0%, 16%, 100% { transform: none; } 5% { transform: translateY(-10px) rotate(-4deg) scale(1.04); } 10% { transform: translateY(-5px) rotate(2deg) scale(1.02); } }
@keyframes sveglia-luna { from { transform: translateY(2px) rotate(2deg); } to { transform: translateY(-6px) rotate(-5deg); } }
.bottega__nota { max-width: 30em; margin: 30px auto 0; text-align: center; font-size: 15.5px; opacity: .92; }
.bottega__esci { margin-top: 18px; text-align: center; }
.stanza--bottega .bottone--carta { background-color: rgba(255, 250, 240, .92); }

/* ---------- musiche ---------- */
.ora-suona {
  position: sticky; top: calc(var(--testa) - 8px + env(safe-area-inset-top, 0px)); z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; margin-bottom: 8px;
  color: var(--inchiostro); background-color: var(--oro); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
  border-radius: 12px 16px 14px 18px; box-shadow: 0 4px 0 var(--oro-profondo), 0 14px 20px -10px rgba(0, 0, 0, .6);
}
.ora-suona__lume { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 3px rgba(255, 250, 240, .4); animation: lume 1.43s ease-in-out infinite; }
@keyframes lume { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
.ora-suona__testo { flex: 1; min-width: 0; font-family: var(--f-titoli); font-weight: 700; font-size: 17px; line-height: 1.15; }
.ora-suona__piccolo { display: block; font-size: 13px; font-weight: 600; color: var(--oro-testo); letter-spacing: .06em; text-transform: uppercase; }
.ora-suona .bottone { flex: none; }

.brani { display: grid; gap: 12px; }
.brano {
  position: relative; width: 100%; min-height: 84px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center;
  padding: 12px 14px 12px 12px; border: 0; cursor: pointer; text-align: left; touch-action: manipulation;
  color: var(--inchiostro); background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 10px 14px 12px 16px / 14px 10px 16px 12px;
  box-shadow: inset 0 0 0 6px var(--crema), inset 0 0 0 8px var(--c, var(--notte)), 3px 4px 0 rgba(10, 14, 30, .3);
  transition: transform .25s var(--molla);
}
.brano__lume { grid-row: span 2; position: relative; width: 44px; height: 44px; }
.brano__lume img { width: 100%; height: 100%; object-fit: contain; }
.brano__lume .brano__accesa { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.brano__pillola {
  justify-self: start; display: inline-block; padding: 4px 12px 5px; border-radius: 12px;
  font-family: var(--f-testo); font-weight: 700; font-size: 17px; line-height: 1.15; color: #fff;
  background: var(--c, var(--notte)); box-shadow: 0 0 0 3px #fff, 0 2px 0 3px rgba(51, 41, 31, .18);
}
.brano__riga { font-size: 15px; line-height: 1.3; color: var(--seppia); }
.brano[aria-pressed="true"] { transform: translateY(-2px) rotate(-.6deg); box-shadow: inset 0 0 0 6px var(--crema), inset 0 0 0 8px var(--oro), 0 0 0 3px var(--oro), 3px 6px 0 rgba(10, 14, 30, .3); }
.brano[aria-pressed="true"] .brano__accesa { opacity: 1; }
.brano:active { transform: scale(.98); transition-duration: .1s; }
.brani--neve .brano { background-color: var(--neve-calda); box-shadow: inset 0 0 0 6px var(--neve-calda), inset 0 0 0 8px var(--c, var(--inverno)), 3px 4px 0 rgba(10, 14, 30, .3); }
.gruppo__titolo--neve { color: var(--ghiaccio-chiaro); }

/* ---------- suoni da tavolo ---------- */
.tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tasto {
  position: relative; width: 100%; min-height: 118px; display: grid; align-content: center; justify-items: center; gap: 4px;
  padding: 14px 10px 12px; border: 0; cursor: pointer; text-align: center; touch-action: manipulation; overflow: hidden;
  color: var(--inchiostro); background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 14px 18px 16px 20px / 18px 14px 20px 16px;
  box-shadow: inset 0 0 0 5px var(--crema), inset 0 0 0 7px var(--c, var(--oro)), 0 5px 0 rgba(51, 41, 31, .28), 6px 12px 16px -8px rgba(51, 41, 31, .5);
  transform-origin: 50% 100%;
}
.tasto__verso { font-family: var(--f-titoli); font-weight: 700; font-size: 22px; line-height: 1.05; color: var(--c-testo, var(--inchiostro)); overflow-wrap: anywhere; }
.tasto__chi { font-size: 14px; line-height: 1.25; color: var(--seppia); }
.tasto::after {   /* l'anello del suono */
  content: ""; position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%;
  border: 3px solid var(--c, var(--oro)); opacity: 0; transform: scale(.3); pointer-events: none;
}
.tasto.suona { animation: schiaccia .42s var(--molla); }
.tasto.suona::after { animation: anello .7s var(--uscita); }
@keyframes schiaccia { 0% { transform: scale(1); } 30% { transform: scale(1.04, .9); } 60% { transform: scale(.97, 1.04); } 100% { transform: scale(1); } }
@keyframes anello { from { opacity: .8; transform: scale(.3); } to { opacity: 0; transform: scale(1.5); } }
.tasti--turno .tasto { --c: var(--oro); }
.tasti--neve .tasto { background-color: var(--ghiaccio-pallido); box-shadow: inset 0 0 0 5px var(--ghiaccio-pallido), inset 0 0 0 7px var(--c, var(--inverno)), 0 5px 0 rgba(31, 77, 108, .35), 6px 12px 16px -8px rgba(31, 77, 108, .5); }
.stanza--suoni .gruppo__titolo--neve { color: var(--inverno); }

/* ---------- clessidra ---------- */
.clessidra { position: relative; display: grid; justify-items: center; margin-top: 4px; }
.clessidra__vetro { position: relative; width: min(220px, 58vw); aspect-ratio: 2 / 3; }
.clessidra__telaio { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(4px 8px 6px rgba(10, 14, 40, .45)); }
.clessidra__camera { position: absolute; left: 22%; right: 22%; overflow: hidden; z-index: 1; }
.clessidra__camera--su { top: 10%; height: 40%; clip-path: polygon(0 0, 100% 0, 100% 6%, 58% 96%, 42% 96%, 0 6%); }
.clessidra__camera--giu { bottom: 10%; height: 40%; clip-path: polygon(42% 4%, 58% 4%, 100% 94%, 100% 100%, 0 100%, 0 94%); }
.clessidra__sabbia {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: 50% 100%;
  background-color: var(--oro); background-image: var(--fibra); background-size: 128px; background-blend-mode: soft-light;
  transition: transform .25s linear;
}
.clessidra__camera--su .clessidra__sabbia { height: 82%; }
.clessidra__camera--giu .clessidra__sabbia { transform: scaleY(0); }
.clessidra__filo { position: absolute; left: 50%; top: 49%; width: 3px; height: 34%; margin-left: -1.5px; z-index: 1; background: var(--oro); transform-origin: 50% 0; opacity: 0; transition: opacity .3s; }
.clessidra[data-stato="va"] .clessidra__filo { opacity: 1; animation: filo .5s linear infinite; }
@keyframes filo { 0% { transform: scaleY(.92); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.92); } }
.clessidra__tempo { margin-top: 14px; font-family: var(--f-titoli); font-weight: 700; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.clessidra__mulinello { position: absolute; right: 2%; bottom: 40px; width: 34%; max-width: 150px; height: auto; z-index: 3; animation: mulinello 1.6s var(--uscita) both; }
@keyframes mulinello { 0% { transform: translateX(60%) rotate(0deg) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(0) rotate(-720deg) scale(1); opacity: 1; } }
.clessidra[data-stato="finita"] .clessidra__tempo { color: var(--oro); }

.scelte { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scelte__titolo { grid-column: 1 / -1; padding: 0; margin-bottom: 2px; font-family: var(--f-titoli); font-weight: 700; font-size: 18px; float: left; width: 100%; }
.scelta { position: relative; display: block; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta span {
  display: grid; place-items: center; min-height: 56px; padding: 8px 10px; text-align: center;
  font-family: var(--f-titoli); font-weight: 600; font-size: 17px; line-height: 1.12;
  color: var(--inchiostro); background: var(--crema); border-radius: 10px 14px 12px 16px;
  box-shadow: inset 0 0 0 2px rgba(51, 41, 31, .35), 0 3px 0 rgba(20, 14, 6, .25);
  transition: transform .2s var(--molla);
}
.scelta input:checked + span { background: var(--oro); box-shadow: inset 0 0 0 2px var(--inchiostro), 0 3px 0 var(--oro-profondo); transform: translateY(-2px) rotate(-1deg); }
.scelta input:focus-visible + span { outline: 3px dashed var(--oro); outline-offset: 3px; }
.scelta input:disabled + span { opacity: .55; }
.stanza--clessidra .scelte, .stanza--clessidra .coppia-bottoni { max-width: 520px; }
.stanza--clessidra .bottone--linguetta { background-color: var(--notte-fonda); }

/* ---------- dado ---------- */
.tavolo { display: grid; place-items: center; }
.tavolo__dado { position: relative; width: 190px; height: 190px; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
.tavolo__ombra { position: absolute; left: 18%; right: 18%; bottom: 2%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
}
@keyframes ombra { 0%, 100% { transform: scale(1); opacity: 1; } 18% { transform: scale(.55); opacity: .4; } 40% { transform: scale(1.05); opacity: 1; } 58% { transform: scale(.75); opacity: .6; } }
.dado__esito { margin-top: 8px; text-align: center; font-family: var(--f-titoli); font-weight: 700; font-size: 24px; line-height: 1.2; min-height: 2.4em; }
.dado__oro {
  display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; max-width: 420px; margin: 6px auto 0; padding: 14px 18px;
  color: var(--inchiostro); background-color: var(--oro); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
  border-radius: 12px 18px 14px 20px; box-shadow: 0 4px 0 var(--oro-profondo), 0 16px 22px -10px rgba(0, 0, 0, .6);
  animation: salta .6s var(--molla) both;
}
.dado__oro p { font-size: 17px; line-height: 1.3; }
.dado__oro strong { display: block; font-family: var(--f-titoli); font-size: 22px; }

/* ---------- diploma ---------- */
.diploma__comandi { display: grid; gap: 18px; max-width: 560px; }
.scelte--due { grid-template-columns: 1fr; margin-top: 0; }
.scelta--neve input:checked + span { background: var(--ghiaccio-chiaro); box-shadow: inset 0 0 0 2px var(--inverno), 0 3px 0 var(--inverno); }
.campo { display: grid; gap: 6px; }
.campo__nome { font-family: var(--f-titoli); font-weight: 700; font-size: 18px; }
.campo__input {
  width: 100%; min-height: 58px; padding: 10px 16px; border: 0; font-family: var(--f-titoli); font-weight: 700; font-size: 22px; color: var(--notte);
  background: var(--crema); border-radius: 10px 14px 12px 16px; box-shadow: inset 0 0 0 2px var(--inchiostro), inset 0 -10px 0 -8px var(--oro);
}
.campo__input::placeholder { color: #8a7b68; font-weight: 600; }
.campo__input:focus-visible { outline: 3px dashed var(--oro-profondo); outline-offset: 3px; }
.conta { display: inline-grid; grid-template-columns: 56px 64px 56px; align-items: center; justify-items: center; }
.conta__tasto {
  width: 56px; height: 56px; border: 0; cursor: pointer; font-family: var(--f-titoli); font-weight: 700; font-size: 28px; line-height: 1;
  color: var(--crema); background: var(--notte); border-radius: 50%; box-shadow: 0 4px 0 var(--notte-fonda); touch-action: manipulation;
  transition: transform .18s var(--molla);
}
.conta__tasto:active { transform: translateY(2px) scale(.94); }
.conta__tasto:disabled { opacity: .4; cursor: default; }
.conta__numero { font-family: var(--f-titoli); font-weight: 700; font-size: 30px; }
.spunta { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; font-size: 16.5px; }
.spunta input { width: 26px; height: 26px; margin: 0; accent-color: var(--notte); flex: none; }
.spunta--notte input { accent-color: var(--oro); }
.diploma__foglio {
  /* --fw e' la larghezza del foglio, scritta senza container query: una container query qui rifa' tutta la pagina a freddo all'avvio */
  --fw: min(100vw - 2 * var(--gutter), 520px);
  position: relative; width: min(100%, 520px); margin: 26px auto 0;
  border-radius: 4px; box-shadow: 3px 4px 0 rgba(51, 41, 31, .16), 16px 26px 34px -14px rgba(51, 41, 31, .55);
  transform: rotate(-.8deg);
}
.diploma__fondo { width: 100%; height: auto; border-radius: 4px; }
/* sopra il foglio vero: le misure vengono dal PDF del diploma (pagina 595 x 842 punti) */
.diploma__nome {
  position: absolute; left: 19.7%; right: 19.6%; top: 23.4%; height: 6%; display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--f-titoli); font-weight: 700; font-size: calc(var(--fw) * .074); line-height: 1; color: var(--notte); white-space: nowrap; padding-bottom: calc(var(--fw) * .006);
}
.diploma__nome.vuoto { color: rgba(44, 61, 110, .32); }
.diploma__cerchi { position: absolute; inset: 0; pointer-events: none; }
.diploma__cerchi img { position: absolute; width: 4.12%; height: auto; transform: scale(.4) rotate(-30deg); opacity: 0; transition: transform .35s var(--molla), opacity .2s; }
.diploma__cerchi img.c { transform: none; opacity: 1; }
.diploma__data {
  position: absolute; left: 12.1%; width: 26%; top: 86.2%; height: 3.5%; display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--f-testo); font-size: calc(var(--fw) * .029); color: var(--inchiostro); padding-bottom: calc(var(--fw) * .004);
}
.diploma__firma, .diploma__aiuto { max-width: 520px; margin: 14px auto 0; text-align: center; font-size: 15px; color: var(--seppia); }
.stanza--diploma .coppia-bottoni { max-width: 520px; }
.stampa, .stampa-avviso { display: none; }

/* ---------- Buonanotte di Luna ---------- */
.cielo { position: absolute; inset: 0; pointer-events: none; }
.cielo .stella { opacity: 0; transform: scale(.2); animation: none; transition: opacity 1.6s ease, transform 1.6s var(--molla); }
.cielo .stella.su { opacity: 1; transform: scale(1); }
.cielo.brilla .stella.su { animation: brilla 3.4s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.stanza--buonanotte > *:not(.cielo) { position: relative; }
.indietro--notte { color: var(--crema); }
.nido { position: relative; display: grid; justify-items: center; margin-top: 8px; }
.nido__luna { width: min(56%, 260px); height: auto; filter: drop-shadow(0 10px 22px rgba(255, 210, 140, .28)); animation: luna 5s ease-in-out infinite alternate; }
.stanza--buonanotte.dorme .nido__luna { animation-duration: 9s; }
@keyframes luna { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
.nido__lanterne { display: flex; justify-content: center; gap: 4px; margin-top: 14px; width: 100%; max-width: 520px; }
.nido__l { position: relative; width: calc((100% - 24px) / 7); max-width: 58px; aspect-ratio: 112 / 180; }
.nido__l img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nido__accesa { transition: opacity 1.4s ease; }
.nido__alone {
  position: absolute; left: 50%; top: 62%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 90, .55), rgba(255, 196, 90, 0)); transition: opacity 1.4s ease;
}
.nido__l.spenta .nido__accesa, .nido__l.spenta .nido__alone { opacity: 0; }
.bn__frase { max-width: 22em; margin: 22px auto 0; text-align: center; font-family: var(--f-titoli); font-weight: 700; font-size: 23px; line-height: 1.25; transition: opacity .6s ease; }
.bn__frase.fine { font-size: clamp(30px, 8vw, 44px); color: #ffe9b8; }
.stanza--buonanotte .bottone--carta { max-width: 420px; }
.stanza--buonanotte .bottone--linguetta { background-color: var(--oro); color: var(--inchiostro); box-shadow: 0 4px 0 var(--oro-profondo), 4px 13px 18px -6px rgba(0, 0, 0, .55); }

/* ---------- il banco: volume e ferma tutto ---------- */
.banco {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  color: var(--inchiostro); background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  box-shadow: 0 -8px 18px -8px rgba(20, 14, 6, .45);
}
.banco::before {
  content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; pointer-events: none; transform: scaleY(-1);
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  -webkit-mask: var(--bordo) 0 0 / 1440px 16px repeat-x; mask: var(--bordo) 0 0 / 1440px 16px repeat-x;
}
.banco > * { position: relative; }
.banco__volume { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 56px; }
.banco__icona { flex: none; width: 26px; height: 26px; fill: var(--inchiostro); }
.banco__onda { fill: none; stroke: var(--inchiostro); stroke-width: 2; stroke-linecap: round; }
.banco input[type="range"] { flex: 1; min-width: 0; height: 56px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.banco input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--oro) var(--p, 85%), var(--linguetta) var(--p, 85%)); box-shadow: inset 0 0 0 1.5px rgba(51, 41, 31, .45); }
.banco input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--linguetta); box-shadow: inset 0 0 0 1.5px rgba(51, 41, 31, .45); }
.banco input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--oro); }
.banco input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; border: 3px solid var(--crema); background: var(--notte); box-shadow: 0 2px 0 rgba(20, 14, 6, .35), 0 0 0 1.5px var(--inchiostro); }
.banco input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--crema); background: var(--notte); box-shadow: 0 2px 0 rgba(20, 14, 6, .35), 0 0 0 1.5px var(--inchiostro); }
.banco__ferma {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px 0 14px; border: 0; cursor: pointer; touch-action: manipulation;
  font-family: var(--f-titoli); font-weight: 700; font-size: 18px; color: var(--crema);
  background-color: var(--forza); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%), var(--fibra);
  background-size: auto, 256px; background-blend-mode: normal, soft-light;
  border-radius: 8px 10px 16px 14px / 8px 8px 16px 16px; box-shadow: 0 4px 0 #7f2c1d, 3px 10px 14px -6px rgba(40, 14, 8, .55);
  transition: transform .2s var(--molla), box-shadow .2s;
}
@media (hover: hover) { .banco__ferma:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 6px 0 #7f2c1d, 3px 13px 16px -6px rgba(40, 14, 8, .55); } }
.banco__ferma:active { transform: translateY(3px); box-shadow: 0 1px 0 #7f2c1d; }
.banco__lume { width: 22px; height: 22px; border-radius: 5px; background: var(--crema); box-shadow: inset 0 0 0 4px var(--crema), inset 0 0 0 6px var(--forza); }
.banco.zitto .banco__ferma { animation: schiaccia .42s var(--molla); }

/* ---------- la pagina del ritorno dalla porta (callback.html) ---------- */
body.viaggio { display: grid; place-items: center; padding: 24px var(--gutter); background-color: var(--notte); }
.viaggio__carta { width: min(100%, 460px); padding: 28px 22px 26px; text-align: center; }
.viaggio__lanterna { width: 64px; height: auto; margin: 0 auto 10px; animation: dondola 3s ease-in-out infinite alternate; transform-origin: 50% 0; }
.viaggio__titolo { font-family: var(--f-titoli); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--notte); }
.viaggio__testo { margin-top: 10px; font-size: 17px; }
.viaggio__nota { font-size: 15px; padding: 10px 12px; border: 1.5px dashed currentColor; border-radius: 10px; opacity: .9; }
.viaggio__azioni { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- da 700 px: tavolo largo ---------- */
/* ---------- W2 · i segni del Teatrino: nastro di carta, cerchio d'oro, pillola, sagoma in piedi, tratteggio delle forbici ---------- */
.nastro {
  position: absolute; top: -12px; z-index: 4; width: 76px; height: 24px; pointer-events: none;
  background-color: rgba(233, 211, 175, .88); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 96% 36%, 100% 55%, 97% 74%, 100% 100%, 3% 100%, 0 82%, 4% 63%, 0 44%, 3% 26%, 0 8%);
}
.nastro--s { left: 7%; transform: rotate(-6deg); }
.nastro--d { right: 7%; transform: rotate(5deg); }
.nastro--su { left: 50%; top: -7.5%; margin-left: -38px; transform: rotate(-3deg); }
.pillola {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 6px 8px; border-radius: 999px;
  background-color: var(--c, var(--notte)); background-image: var(--fibra); background-size: 256px; background-blend-mode: soft-light;
  color: var(--crema); font-family: var(--f-titoli); font-weight: 700; font-size: 19px; line-height: 1.15;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 240, .38), 2px 3px 0 rgba(20, 14, 6, .28);
}
.pillola img { flex: none; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(1px 1.5px 0 rgba(20, 14, 6, .35)); }
.gruppo__titolo { margin-top: 34px; }

/* la linguetta dello scaffale: cartoncino col tratteggio e il cerchio d'oro */
.stanza .indietro, .stanza--suoni .indietro, .stanza--diploma .indietro {
  position: relative; gap: 8px; padding: 0 18px 0 9px; color: var(--inchiostro);
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 8px 12px 9px 13px / 12px 8px 13px 9px; box-shadow: 2px 3px 0 rgba(20, 14, 6, .3);
  transition: transform .22s var(--molla);
}
.indietro.indietro--notte { color: var(--inchiostro); }
.indietro::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed var(--taglio); border-radius: inherit; pointer-events: none; }
.indietro .indietro__cerchio {
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 50%;
  font-size: 26px; line-height: 1; padding-bottom: 3px; color: var(--inchiostro); background: var(--oro);
  box-shadow: inset 0 0 0 2px var(--inchiostro);
}
.indietro:active { transform: translateY(2px) rotate(-1deg); }
@media (hover: hover) { .indietro:hover { transform: translateY(-2px) rotate(-1deg); } }
.porta__n { color: var(--inchiostro); background: var(--oro); box-shadow: inset 0 0 0 2px var(--inchiostro), 1.5px 2px 0 rgba(51, 41, 31, .25); }
.oggetto__nome { border-radius: 999px; padding-left: 16px; padding-right: 16px; box-shadow: inset 0 0 0 2px rgba(255, 250, 240, .38), 0 3px 0 rgba(20, 14, 6, .35); }
.insegna__tavola { outline: 2px dashed rgba(120, 77, 12, .5); outline-offset: -12px; }
.conta__numero {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--crema); box-shadow: inset 0 0 0 3px var(--oro), 1.5px 2px 0 rgba(51, 41, 31, .25);
}

/* ---------- il tabellone che suona ---------- */
.plancia { position: relative; max-width: 760px; margin: 8px auto 24px; }
.plancia__foglio {
  position: relative; display: block; padding: 10px;
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 6px 9px 7px 10px;
  box-shadow: inset 0 0 0 2px rgba(51, 41, 31, .14), 3px 4px 0 rgba(10, 14, 30, .32), 14px 24px 30px -12px rgba(0, 0, 0, .6);
  transform: rotate(-.6deg);
}
#plancia-neve .plancia__foglio { transform: rotate(.5deg); }
.plancia__img { width: 100%; height: auto; border-radius: 3px; }
.plancia__tappe { position: absolute; inset: 10px; }
.tappa {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tappa::before {   /* il cerchio tratteggiato del luogo: qui si appoggia la lanterna */
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  border: 2.5px dashed rgba(255, 250, 240, .95); box-shadow: 0 0 0 2px rgba(51, 41, 31, .4), inset 0 0 0 2px rgba(51, 41, 31, .25);
  transition: transform .3s var(--molla);
}
.tappa:active::before { transform: scale(.82); }
@media (hover: hover) { .tappa:hover::before { transform: scale(1.18); } }
.tappa.attiva::before { border-style: solid; border-color: var(--oro); }
.segnalino { position: absolute; z-index: 2; width: 15%; aspect-ratio: 1; margin: -13.5% 0 0 -7.5%; pointer-events: none; }
.segnalino img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(2px 4px 2px rgba(40, 25, 12, .45)); }
.segnalino__alone {
  position: absolute; left: 8%; right: 8%; bottom: -16%; height: 34%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .95), rgba(255, 180, 60, 0)); opacity: .55;
}
.segnalino.cade { animation: cade .72s var(--molla) both; }
.segnalino__alone.batte-a { animation: alone-a .5s var(--uscita); }
.segnalino__alone.batte-b { animation: alone-b .5s var(--uscita); }
@keyframes cade { from { transform: translateY(-160%) scale(1.25) rotate(-20deg); opacity: 0; } 45% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes alone-a { 0% { transform: scale(1); opacity: .55; } 30% { transform: scale(1.7); opacity: 1; } 100% { transform: scale(1); opacity: .55; } }
@keyframes alone-b { 0% { transform: scale(1); opacity: .55; } 30% { transform: scale(1.7); opacity: 1; } 100% { transform: scale(1); opacity: .55; } }
.plancia__dida { margin-top: 14px; text-align: center; font-size: 15.5px; line-height: 1.4; color: var(--crema); opacity: .9; }

/* le carte dei brani: il luogo nel medaglione, la lanternina che si accende */
.brano { grid-template-columns: 76px 1fr; min-height: 100px; gap: 6px 14px; }
.brano__medaglione {
  grid-row: span 2; position: relative; width: 76px; height: 76px; border-radius: 50%;
  background: var(--cella); box-shadow: inset 0 0 0 3px var(--c, var(--notte)), 0 0 0 3px var(--crema), 2px 3px 0 3px rgba(51, 41, 31, .18);
}
.brano__luogo { position: absolute; left: 7px; top: 7px; width: 62px; height: 62px; object-fit: contain; border-radius: 50%; }
.brano .brano__lume { position: absolute; grid-row: auto; right: -10px; bottom: -8px; width: 24px; height: 38px; }
.brano[aria-pressed="true"] .brano__medaglione { box-shadow: inset 0 0 0 3px var(--oro), 0 0 0 3px var(--crema), 0 0 0 6px var(--oro); }
.brano[aria-pressed="true"] .brano__luogo { animation: dondola-luogo 1.6s ease-in-out infinite alternate; }
@keyframes dondola-luogo { from { transform: rotate(-4deg) scale(1.03); } to { transform: rotate(4deg) scale(1.03); } }

/* i tasti: la figura del gioco in piedi sulla carta, che salta al tocco */
.tasto { min-height: 156px; padding-top: 12px; }
.tasto__figura { position: relative; display: block; width: 70px; height: 70px; margin-bottom: 4px; }
.tasto__figura img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(1.5px 2.5px 0 rgba(51, 41, 31, .26)); }
.tasto__figura::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -5px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(51, 35, 18, .32), rgba(51, 35, 18, 0)); }
.tasto.suona .tasto__figura img { animation: saltella .52s var(--molla); }
@keyframes saltella { 0% { transform: none; } 35% { transform: translateY(-16px) rotate(-7deg) scale(1.1); } 70% { transform: scale(1.08, .9); } 100% { transform: none; } }

/* ---------- la clessidra di carta, in piedi sul palco ---------- */
.clessidra__carta {
  position: absolute; inset: -5% -13%; z-index: 0; display: block;
  background-color: var(--crema); background-image: var(--fibra-chiara); background-size: 256px; background-blend-mode: multiply;
  border-radius: 22px 28px 24px 30px / 28px 22px 30px 24px;
  box-shadow: 3px 4px 0 rgba(10, 14, 40, .3), 14px 22px 26px -12px rgba(10, 14, 40, .6);
}
.clessidra__carta::before { content: ""; position: absolute; inset: 7px; border: 2px dashed var(--taglio); border-radius: inherit; }
.clessidra__telaio { filter: none; }
.clessidra__vetro.sagoma::after {   /* la linguetta piegata che la tiene in piedi */
  content: ""; position: absolute; left: 4%; right: 4%; top: calc(105% - 1px); height: 12px; z-index: 0;
  background: linear-gradient(180deg, rgba(51, 41, 31, .28) 0 1.5px, var(--linguetta) 1.5px, var(--sabbia));
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}
.clessidra__vetro.sagoma::before {   /* la sua ombra sul tavolo */
  content: ""; position: absolute; left: 30%; right: -18%; top: calc(105% + 4px); height: 20px; z-index: 0;
  background: radial-gradient(60% 100% at 30% 0, rgba(10, 14, 40, .45), rgba(10, 14, 40, 0) 70%);
  transform: skewX(-38deg); transform-origin: 0 0;
}
.clessidra { margin-top: 34px; }
.clessidra__tempo { margin-top: 34px; }

/* ---------- il dado di carta sul tappetino da taglio ---------- */
.tavolo {
  position: relative; max-width: 440px; min-height: 260px; margin: 6px auto 0; border-radius: 16px 20px 18px 22px;
  background-color: #2b5a28;
  background-image:
    linear-gradient(rgba(255, 250, 240, .24) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 250, 240, .24) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 250, 240, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 250, 240, .09) 1px, transparent 1px),
    linear-gradient(33deg, transparent calc(50% - 1px), rgba(255, 250, 240, .18) calc(50% - 1px), rgba(255, 250, 240, .18) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%;
  background-position: 10px 10px, 10px 10px, 10px 10px, 10px 10px, 0 0;
  box-shadow: inset 0 0 0 3px rgba(255, 250, 240, .14), 0 4px 0 #1c3b1a, 0 18px 26px -12px rgba(0, 0, 0, .6);
}
.tavolo__dado { width: 200px; height: 200px; perspective: 700px; }
.tavolo__ombra { bottom: 6%; }
.dado3__salto, .dado3__vista, .dado3 { position: absolute; display: block; transform-style: preserve-3d; }
.dado3__salto { inset: 35px; }
.dado3__vista { inset: 0; transform: rotateX(-18deg) rotateY(24deg); }
.dado3 { --m: 65px; inset: 0; transform: rotateY(180deg); transition: transform 1s cubic-bezier(.2, .9, .25, 1.04); }
.dado3__f {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 6px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background-color: var(--crema); border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--inchiostro), inset 0 0 0 6px var(--crema), inset 0 0 0 7.5px var(--taglio);
}
.dado3__f img { width: 100%; height: 100%; object-fit: contain; }
.dado3__f--1 { transform: translateZ(var(--m)); }
.dado3__f--6 { transform: rotateY(180deg) translateZ(var(--m)); }
.dado3__f--2 { transform: rotateY(90deg) translateZ(var(--m)); }
.dado3__f--5 { transform: rotateY(-90deg) translateZ(var(--m)); }
.dado3__f--3 { transform: rotateX(90deg) translateZ(var(--m)); }
.dado3__f--4 { transform: rotateX(-90deg) translateZ(var(--m)); }
.tavolo__dado.rotola .dado3__salto { animation: balzo 1s var(--uscita); }
/* riserva per i browser che schiacciano il 3D: la faccia uscita, in piano, salta sul tappetino */
.tavolo__dado.piatto .dado3__vista, .tavolo__dado.piatto .dado3 { transform: none !important; transition: none; }
.tavolo__dado.piatto .dado3__f { display: none; transform: rotate(-6deg); }
.tavolo__dado.piatto .dado3__f.davanti { display: grid; }
.tavolo__dado.rotola .tavolo__ombra { animation: ombra 1s var(--uscita); }
@keyframes balzo {
  0% { transform: none; } 22% { transform: translateY(-64px) scale(.9); } 46% { transform: translateY(0) scale(1.05, .94); }
  62% { transform: translateY(-22px); } 80% { transform: translateY(0) scale(1.02, .98); } 100% { transform: none; }
}
.scintilla-posto { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; border: 2.5px dashed rgba(51, 41, 31, .5); }
.scintilla-posto::after {
  content: ""; position: absolute; inset: 3px; background: url(img/scintilla.webp) center / contain no-repeat;
  transform: scale(0) rotate(-40deg);
}
.scintilla-posto.piena::after { transform: none; animation: incastra .6s var(--molla) .2s both; }
@keyframes incastra { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }

/* ---------- il diploma da ritagliare ---------- */
.diploma__taglio { position: absolute; inset: -10px; z-index: 3; border: 2px dashed var(--taglio); border-radius: 8px; pointer-events: none; }
.diploma__taglio .forbici { position: absolute; top: -26px; right: 26px; width: 52px; height: 52px; transform: rotate(180deg); filter: drop-shadow(1px 2px 0 rgba(51, 41, 31, .25)); }

/* ---------- le cose sotto lo schermo aspettano e si alzano quando ci arrivate ---------- */
.rivela { transition: opacity .5s ease, transform .7s var(--molla); }
.rivela.attesa { opacity: 0; }
.rivela[data-modo="piedi"].attesa { transform: translateY(44px) scale(.9); }
.rivela[data-modo="salto"].attesa { transform: scale(.66) rotate(-7deg); }
.rivela[data-modo="scivola"].attesa { transform: translateX(-34px); }
.rivela[data-modo="apri"].attesa { transform: scale(.94, .35); transform-origin: 50% 100%; }
.rivela[data-modo="apri"] { transform-origin: 50% 100%; }
.rivela[data-modo="ribalta"] { transform-origin: 50% 0; }
.rivela[data-modo="ribalta"].attesa { transform: perspective(700px) rotateX(-78deg); }
/* le carte e i tasti rispondono alla mano: si alzano dal tavolo e il luogo si gira verso chi guarda */
@media (hover: hover) {
  .brano:not([aria-pressed="true"]):hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: inset 0 0 0 6px var(--crema), inset 0 0 0 8px var(--c, var(--notte)), 4px 8px 0 rgba(10, 14, 30, .28); }
  .brani--neve .brano:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 6px var(--neve-calda), inset 0 0 0 8px var(--c, var(--inverno)), 4px 8px 0 rgba(10, 14, 30, .28); }
  .brano__luogo { transition: transform .35s var(--molla); }
  .brano:hover .brano__luogo { transform: rotate(-8deg) scale(1.06); }
  .tasto { transition: transform .25s var(--molla); }
  .tasto:hover { transform: translateY(-3px) rotate(1deg); }
}

@media (min-width: 700px) {
  :root { --gutter: 28px; --testa: 128px; }
  .brani { grid-template-columns: 1fr 1fr; }
  .tasti { grid-template-columns: repeat(3, 1fr); }
  .scaffale { gap: 36px; }
  .scaffale__ripiano { gap: 22px; padding: 0 22px 22px; }
  .scelte { grid-template-columns: repeat(4, 1fr); }
  .scelte--due { grid-template-columns: 1fr 1fr; }
  .filo { left: 50%; right: auto; width: 620px; margin-left: -310px; }
  .filo__l { width: 28px; height: 44px; }
  .banco { justify-content: center; }
  .banco__volume { flex: 0 1 420px; }
  .diploma__layout { display: grid; }
}
@media (min-width: 1100px) {
  .tasti { grid-template-columns: repeat(4, 1fr); }
  .brani { grid-template-columns: repeat(3, 1fr); }
  .scaffale { max-width: 1040px; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .stanza--diploma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-content: start; }
  .stanza--diploma > .stanza__testa, .stanza--diploma > .diploma__comandi { grid-column: 1; margin-left: 0; }
  .stanza--diploma > .diploma__foglio { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; align-self: start; }
  .stanza--diploma > .diploma__firma, .stanza--diploma > .coppia-bottoni, .stanza--diploma > .diploma__aiuto { grid-column: 1; margin-left: 0; justify-items: start; text-align: left; }
}

/* ---------- riduci movimento: tutto fermo, niente nascosto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .cielo .stella.su { opacity: 1; transform: none; }
}

/* ---------- stampa: solo il diploma, su un foglio A4 intero ---------- */
@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff !important; min-height: 0; }
  body > *:not(.stampa):not(.stampa-avviso) { display: none !important; }
  /* stampa dal menu del browser senza il bottone: un avviso al posto del foglio bianco */
  .stampa:empty { display: none !important; }
  .stampa:empty + .stampa-avviso { display: block !important; margin: 40mm 20mm 0; font: 700 18pt/1.4 Andika, sans-serif; color: #33291f; text-align: center; }
  .stampa { display: block !important; width: 210mm; height: 297mm; margin: 0; padding: 0; overflow: hidden; break-after: avoid; page-break-after: avoid; }
  .stampa img { display: block; width: 210mm; height: 297mm; object-fit: contain; }
}