/* ============================================================
   CUKE OF THE WEEK
   Desktop: colonna sinistra fissa, colonna destra a scorrimento.
   Titoli: font del sito, ricavato dagli outline degli SVG originali
   (homefont, aboutfont, animalcharityfont, cukenomicsfont, legalfont,
   il bottone Find Cuke Everywhere e Privacy Policy) -> CUKEDisplay.woff2.
   Testi descrittivi: dentro le finestre.
   Sfondo: citta', palme e trama a pois delle due immagini di riferimento.
   ============================================================ */

@font-face{font-family:'CUKE Display';src:url('CUKEDisplay.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Lilita One';src:url('lilita-one-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --ciano:#00FFFF;        /* pannello, reference 2 */
  --ciano-b:#00FFFF;
  --mint:#5CDFF2;         /* cornice, reference 1 */
  --viola:#957FFF;        /* voci del menu, reference 2 */
  --viola-s:#6F5DC4;      /* HOME, reference 2 */
  --viola-p:#6F5DC4;      /* fasce dei titoli, reference 1 */
  --mauve:#BB9CB7;        /* pannello dei testi, reference 1 */
  /* scala delle spaziature: un solo passo, usato in tutta la pagina */
  --s1:clamp(4px,.45vw,7px);
  --s2:clamp(7px,.8vw,12px);
  --s3:clamp(12px,1.25vw,20px);
  --s4:clamp(18px,1.9vw,30px);
  --s5:clamp(26px,2.7vw,44px);
  --s6:clamp(36px,3.8vw,60px);
  /* altezza fissa del blocco dei testi a sinistra: cambiando voce del menu
     cambiano solo le parole, cuke e il resto non si spostano */
  --h-testa:clamp(240px,20.8vw,362px);
  --magenta:#957FFF;
  --giallo:#FEC207;
  --notte:#12053a;
  /* titoli nel font del sito; cifre e punteggiatura cadono su Lilita One */
  /* il font del sito non ha le minuscole: va usato solo in maiuscolo.
     I testi descrittivi (maiuscolo/minuscolo) usano Inter, cosi' non si
     mescolano piu' due caratteri dentro la stessa parola. */
  --tit:'CUKE Display','Lilita One',Impact,sans-serif;
  --testo:'Inter','Helvetica Neue',Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--testo);
  background:#FEC61E;
  color:var(--viola-s);
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}

/* ---------- lo sfondo, fisso dietro a tutto ---------- */
.fondale{
  position:fixed;inset:0;z-index:-1;
  background-color:#FEC61E;
  background-position:left bottom;background-size:cover;background-repeat:no-repeat;
  /* stessa immagine, stessa posizione: sugli schermi a densita' doppia
     il browser prende la versione al doppio dei pixel, cosi' palme e citta'
     non vengono piu' ingrandite dal browser */
  background-image:url('bg_desktop.webp');
  background-image:-webkit-image-set(url('bg_desktop.webp') 1x, url('bg_desktop@2x.webp') 2x);
  background-image:image-set(url('bg_desktop.webp') 1x, url('bg_desktop@2x.webp') 2x);
}

/* ---------- la schermata: sinistra fissa, destra a scorrimento ---------- */
.schermo{
  position:relative;
  height:100vh;height:100dvh;
  display:grid;
  grid-template-columns:59.73% 40.27%;
}

/* ================= COLONNA SINISTRA (fissa) ================= */
.racconto{
  position:relative;
  height:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(14px,2.2vh,30px) clamp(16px,2.4vw,46px) clamp(40px,4.8vh,62px);
  padding-top:calc(clamp(14px,2.2vh,30px) + env(safe-area-inset-top,0px));
  overflow:hidden;
}
.logo{width:clamp(120px,13.5vw,220px);height:auto;flex:none;align-self:center}

.occhiello{
  margin-top:var(--s3);
  font-family:var(--tit);
  font-size:clamp(11px,1.02vw,16px);
  letter-spacing:.1em;
  color:#fff;
  align-self:center;
  background:rgba(187,156,183,.9);
  padding:clamp(3px,.45vh,7px) clamp(9px,.9vw,15px);
  border-left:clamp(4px,.35vw,6px) solid var(--mint);
}
.occhiello span{color:var(--ciano)}

h1{
  font-family:var(--tit);font-weight:400;
  line-height:1.04;
  font-size:clamp(26px,3.8vw,62px);
  margin-top:var(--s2);
  align-self:center;
  position:relative;
  max-width:min(96%,900px);
  background:var(--viola-s);
  color:var(--ciano);
  padding:clamp(4px,.7vh,10px) clamp(14px,1.5vw,26px) clamp(6px,.9vh,13px);
  border-left:clamp(7px,.6vw,11px) solid var(--ciano);
  box-shadow:clamp(5px,.5vw,9px) clamp(5px,.5vw,9px) 0 rgba(92,223,242,.55);
}
h1 span{display:block}

.frase{
  margin-top:var(--s3);
  align-self:center;
  max-width:min(680px,92%);
  font-family:var(--tit);
  font-size:clamp(12.5px,1.26vw,21px);   /* titolo : testo = circa 3 : 1 */
  line-height:1.28;
  color:#fff;
  background:rgba(187,156,183,.82);
  padding:clamp(10px,1.4vh,18px) clamp(13px,1.3vw,22px);
  border-left:clamp(5px,.45vw,8px) solid var(--mint);
  border-bottom:clamp(5px,.45vw,8px) solid var(--mint);
}
.frase mark{background:var(--ciano);color:var(--viola);padding:0 .12em}

/* ---------- blocco dei testi: altezza fissa ----------
   occhiello + titolo + frase stanno dentro una scatola alta sempre uguale:
   cliccando REGISTER / LEADERBOARD / DATES / RULES cambiano solo le parole. */
.testa{
  flex:none;width:100%;
  height:var(--h-testa);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:hidden;
}

/* personaggio, cartellino del premio, fumetto */
.scena{
  position:relative;width:100%;
  flex:none;                       /* niente flessibilita': l'altezza non dipende dai testi */
  height:clamp(240px,52vh,700px);  /* Cuke resta della stessa misura su tutte le schermate */
  margin-top:auto;margin-bottom:auto;  /* stesso spazio sopra e sotto */
  display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto minmax(0,1fr);
  justify-content:center;
  column-gap:clamp(14px,1.8vw,38px);row-gap:clamp(30px,7.5vh,110px);
}

.personaggio{grid-column:1;grid-row:1 / span 3;align-self:end;justify-self:center;height:100%;max-height:100%;width:auto;max-width:clamp(230px,33vw,620px);object-fit:contain;object-position:bottom center}
.premio{
  grid-column:2;grid-row:2;justify-self:start;align-self:start;margin-bottom:0;
  background:var(--ciano);border:3px solid var(--viola-s);border-radius:0;
  padding:clamp(10px,1.5vh,19px) clamp(14px,1.8vw,26px);
  text-align:center;color:var(--viola-s);
  box-shadow:0 8px 0 rgba(89,0,127,.22);
  transform:rotate(-3deg);
}
.premio small{display:block;font-family:var(--tit);font-size:clamp(10px,.95vw,16px);letter-spacing:.08em;color:var(--viola)}
.premio strong{
  display:block;font-family:var(--tit);font-weight:400;
  font-size:clamp(30px,3.7vw,62px);line-height:1;
  color:var(--viola-p);margin:3px 0;
}
.fumetto{
  grid-column:2;grid-row:1;justify-self:start;align-self:start;margin:clamp(6px,1.5vh,22px) 0 0;
  position:relative;
  background:var(--viola-s);border:none;border-radius:0;
  padding:clamp(8px,1.2vh,15px) clamp(12px,1.4vw,22px);
  font-family:var(--tit);
  font-size:clamp(11px,1.15vw,19px);line-height:1.2;
  color:var(--ciano);
  border-left:clamp(4px,.4vw,7px) solid var(--ciano);
  box-shadow:0 6px 0 rgba(89,0,127,.18);
}
.fumetto:after{content:"";position:absolute;left:-13px;bottom:14px;border:7px solid transparent;border-right-color:var(--viola-s)}

.piede{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:clamp(10px,1.4vw,22px);
  padding:clamp(7px,1.1vh,14px) clamp(16px,2.4vw,46px);
  padding-bottom:calc(clamp(7px,1.1vh,14px) + env(safe-area-inset-bottom,0px));
  font-family:var(--tit);
  font-size:clamp(10px,.95vw,16px);
  letter-spacing:.04em;
  color:var(--viola-s);
}
/* i tre social in fila, la frase a fianco: tutto sulla stessa linea di mezzo */
.piede .social{display:flex;gap:clamp(10px,1vw,17px);align-items:center;flex:none}
.piede .social a{display:block;line-height:0;text-decoration:none;transition:transform .14s ease}
.piede .social a:hover{transform:translateY(-3px) scale(1.08)}
.piede .social a:focus-visible{outline:3px solid var(--viola-s);outline-offset:3px}
.piede .social img{width:clamp(19px,1.55vw,28px);height:auto;display:block}
.piede .frase-piede{white-space:nowrap}
.piede a{color:var(--viola-p);text-decoration:none}
.piede a:hover{text-decoration:underline}

/* ================= COLONNA DESTRA (a scorrimento) ================= */
.colonna{
  height:100%;
  background:var(--ciano);
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s4) var(--s4) var(--s6);
  padding-top:calc(var(--s4) + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;gap:var(--s5);
  scrollbar-width:thin;scrollbar-color:var(--viola) transparent;
}
.colonna::-webkit-scrollbar{width:9px}
.colonna::-webkit-scrollbar-thumb{background:var(--viola);border-radius:9px}
.colonna::-webkit-scrollbar-track{background:rgba(111,93,196,.15)}

/* ---------- il modulo ---------- */
.modulo{
  background:transparent;
  border-radius:0;box-shadow:none;
  padding:0;
  flex:none;
}
.biglietto{display:flex;align-items:center;justify-content:space-between;font-family:var(--tit);font-size:clamp(9px,.82vw,14px);letter-spacing:.1em;color:var(--viola-s)}
h2{
  font-family:var(--tit);font-weight:400;
  font-size:clamp(20px,2.1vw,35px);line-height:1.06;
  color:var(--ciano);background:var(--viola-s);
  display:inline-block;margin-top:var(--s2);
  padding:clamp(3px,.5vh,7px) clamp(11px,1.1vw,18px) clamp(5px,.7vh,9px);
  border-left:clamp(5px,.45vw,8px) solid var(--ciano);
  box-shadow:clamp(4px,.4vw,7px) clamp(4px,.4vw,7px) 0 rgba(92,223,242,.5);
}
.sotto{font-family:var(--tit);font-size:clamp(11px,.92vw,15px);line-height:1.3;color:var(--viola-s);margin-top:var(--s3)}

form{display:flex;flex-direction:column;margin-top:var(--s4)}
.campo + .campo{margin-top:var(--s3)}
.campo label{display:flex;align-items:center;justify-content:space-between;font-family:var(--tit);font-size:clamp(10px,.92vw,15px);letter-spacing:.04em;color:var(--viola-p);margin-bottom:var(--s2)}
.rete{display:flex;align-items:center;gap:7px}
.rete img{width:clamp(12px,1vw,17px);height:auto}
.numero{opacity:.55;font-size:clamp(9px,.78vw,13px)}
.scatola{display:flex;align-items:center;gap:2px;background:#fff;border:2.5px solid var(--viola);border-radius:11px;padding:0 clamp(8px,.85vw,14px)}
.scatola span{color:var(--viola);font-size:clamp(13px,1.15vw,19px)}
.scatola input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--testo);font-size:clamp(14px,1.2vw,20px);color:var(--viola-p);padding:clamp(9px,1.3vh,14px) 4px}
.scatola input::placeholder{color:var(--viola);opacity:.45}
.scatola:focus-within{border-color:var(--magenta);box-shadow:0 0 0 4px rgba(162,0,229,.18)}

.aiuto{font-family:var(--testo);font-size:clamp(10px,.8vw,13px);color:var(--viola-s);margin-top:var(--s2)}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consenso{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s4)}
.consenso input{appearance:none;-webkit-appearance:none;flex:none;width:clamp(16px,1.25vw,21px);height:clamp(16px,1.25vw,21px);border:2.5px solid var(--viola);border-radius:5px;background:#fff;cursor:pointer;margin-top:1px}
.consenso input:checked{background:var(--magenta);border-color:var(--magenta)}
.consenso input:checked:after{content:"";display:block;width:100%;height:100%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center/72%}
.consenso label{font-family:var(--testo);font-size:clamp(10px,.84vw,13.5px);line-height:1.34;color:var(--viola-s)}
.consenso a{color:var(--viola-p);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

.invia{
  margin-top:var(--s4);width:100%;border:none;cursor:pointer;border-radius:12px;
  padding:clamp(12px,1.7vh,18px) 14px;
  background:linear-gradient(90deg,var(--ciano-b),#7f7fff);
  color:var(--notte);font-family:var(--tit);font-weight:400;
  font-size:clamp(15px,1.35vw,24px);letter-spacing:.02em;
  box-shadow:0 6px 0 rgba(89,0,127,.3);
  transition:transform .18s ease;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.invia:hover{transform:translateY(-2px) scale(1.01)}
.invia:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(89,0,127,.3)}
.invia svg{width:1.05em;height:1.05em;flex:none}
.unavolta{margin-top:var(--s2);font-family:var(--testo);font-size:clamp(10px,.82vw,13px);color:var(--viola-s);display:flex;gap:6px;align-items:center;justify-content:center}
.unavolta svg{width:1.05em;height:1.05em;flex:none}
.esito{margin-top:var(--s2);font-family:var(--tit);font-size:clamp(11px,.9vw,14px);color:var(--viola-p);text-align:center}
.esito[hidden]{display:none!important}

/* ---------- le finestre con i testi descrittivi ---------- */
.finestra{
  background:transparent;
  border-radius:0;box-shadow:none;
  padding:var(--s4) 0 0;
  border-top:3px solid var(--viola-s);
  flex:none;
}
.occhiello2{font-family:var(--tit);font-size:clamp(9px,.82vw,13px);letter-spacing:.1em;color:var(--viola)}
h3{
  font-family:var(--tit);font-weight:400;
  font-size:clamp(19px,1.95vw,32px);line-height:1.06;
  color:var(--ciano);background:var(--viola-s);
  display:inline-block;margin-top:var(--s2);
  padding:clamp(3px,.5vh,7px) clamp(11px,1.1vw,18px) clamp(5px,.7vh,9px);
  border-left:clamp(5px,.45vw,8px) solid var(--ciano);
  box-shadow:clamp(4px,.4vw,7px) clamp(4px,.4vw,7px) 0 rgba(92,223,242,.5);
}
.intro{font-family:var(--tit);font-size:clamp(11px,.92vw,15px);line-height:1.3;color:var(--viola-s);margin-top:var(--s3)}

.elenco{list-style:none;margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.elenco li{
  display:flex;gap:12px;
  background:rgba(187,156,183,.92);
  padding:var(--s3) var(--s3);
  border-left:clamp(5px,.45vw,8px) solid var(--mint);
  border-bottom:clamp(5px,.45vw,8px) solid var(--mint);
}
.num{font-family:var(--tit);font-size:clamp(15px,1.45vw,23px);color:var(--viola);background:var(--ciano);line-height:1;flex:none;align-self:flex-start;padding:4px 8px 6px}
h4{font-family:var(--tit);font-weight:400;font-size:clamp(14px,1.28vw,21px);line-height:1.06;color:#fff}
.corpo{font-family:var(--tit);font-size:clamp(11.5px,.95vw,15px);line-height:1.38;color:#fff;margin-top:var(--s1)}

.carte{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
.carte article{background:rgba(187,156,183,.92);padding:var(--s3);border-left:clamp(5px,.45vw,8px) solid var(--mint);border-bottom:clamp(5px,.45vw,8px) solid var(--mint)}
.icona{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2)}
.icona svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icona.rosa{background:#ff5fa2}.icona.lilla{background:#957fff}.icona.verde{background:#2fbf71}

.nota{margin-top:var(--s4);background:var(--viola-s);padding:var(--s3);color:#fff;border-left:clamp(5px,.45vw,8px) solid var(--ciano);border-bottom:clamp(5px,.45vw,8px) solid var(--ciano)}
.nota strong{display:block;font-family:var(--tit);font-weight:400;font-size:clamp(13px,1.15vw,19px);line-height:1.06;color:var(--ciano)}
.nota span{display:block;font-family:var(--tit);font-size:clamp(11px,.92vw,14.5px);line-height:1.38;margin-top:var(--s1);color:#fff}
.chiusura{font-family:var(--tit);font-size:clamp(11px,.92vw,14.5px);line-height:1.34;color:#fff;background:rgba(187,156,183,.92);padding:var(--s3);border-left:clamp(5px,.45vw,8px) solid var(--mint);border-bottom:clamp(5px,.45vw,8px) solid var(--mint);margin-top:var(--s4)}
.contatti{font-family:var(--tit);font-size:clamp(10px,.85vw,14px);color:var(--viola-p);text-align:center;padding:4px 0 clamp(4px,1vh,12px)}
/* le tre righe in fondo: una sotto l'altra, centrate, con la sottolineatura
   attaccata alle lettere e nera come i testi della fascia */
.contatti{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.35}
.contatti a{
  color:#0d0b12;
  text-decoration:underline;
  text-decoration-color:#0d0b12;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  border:none;padding:0;
}
.contatti a:hover{color:var(--viola-s);text-decoration-color:var(--viola-s)}
.contatti .riga{display:block}
.contatti .llc{color:#0d0b12;opacity:.72;letter-spacing:.06em}

/* schermi meno alti: Cuke resta grande il massimo che lo spazio consente,
   e comunque uguale su tutte e quattro le schermate */
@media (max-height:1000px){ .scena{height:46vh} }
@media (max-height:860px){  .scena{height:44vh} }

/* ============================================================
   MOBILE — per ora la pila che funziona, la rifiniamo dopo
   ============================================================ */
@media (max-width:900px){
  body{overflow:auto}
  .fondale{background-position:left bottom}
  .fondale{background-image:url('bg_mobile.webp')}
  .fondale{background-image:-webkit-image-set(url('bg_mobile.webp') 1x, url('bg_mobile@2x.webp') 2x)}
  .fondale{background-image:image-set(url('bg_mobile.webp') 1x, url('bg_mobile@2x.webp') 2x)}
  .schermo{display:block;height:auto}
  .racconto{height:auto;min-height:74vh;padding:clamp(12px,2vh,20px) clamp(14px,4.5vw,26px) clamp(14px,2vh,22px)}
  .logo{width:clamp(84px,23vw,120px)}
  h1{font-size:clamp(32px,10.5vw,60px)}
  .frase{font-size:clamp(13px,3.6vw,18px)}
  .scena{min-height:clamp(150px,30vh,300px)}
  .personaggio{max-width:48%}
  .scena{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);justify-content:center;height:clamp(220px,35vh,330px);margin:var(--s4) 0 0;column-gap:10px;row-gap:clamp(14px,3vh,30px)}
  .personaggio{max-width:100%;justify-self:center}
  .premio{margin-bottom:0}
  .fumetto{margin-bottom:0}
  .piede{position:static;margin-top:clamp(10px,2vh,18px);padding-left:0;padding-right:0;flex-wrap:wrap;font-size:clamp(10px,2.7vw,13px)}
  .colonna{height:auto;overflow:visible;background:var(--ciano);padding:clamp(16px,3vh,26px) clamp(14px,4.5vw,26px) clamp(24px,5vh,44px)}
  .scatola input{font-size:16px}
}
@media (min-width:1180px){
  .carte{grid-template-columns:1fr 1fr}
}


/* ---------- barra di navigazione fra le due schermate ---------- */
.nav{
  display:flex;flex-wrap:wrap;gap:clamp(7px,.8vw,12px);
  flex:none;
  /* il menu resta sempre in alto: nessuna voce sparisce scorrendo */
  position:sticky;top:0;z-index:9;
  background:var(--ciano);
  margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) clamp(8px,1.2vh,16px);
  padding:var(--s4) var(--s4) clamp(10px,1.4vh,16px);
}
.nav a{
  font-family:var(--tit);
  font-size:clamp(14px,1.25vw,21px);letter-spacing:.03em;line-height:1;
  color:var(--ciano);text-decoration:none;
  background:var(--viola-s);border-radius:0;
  padding:clamp(8px,1.1vh,13px) clamp(13px,1.3vw,22px);
  border:none;border-left:clamp(5px,.45vw,8px) solid var(--ciano);
  box-shadow:clamp(4px,.4vw,6px) clamp(4px,.4vw,6px) 0 rgba(149,127,255,.9);
  transition:transform .14s ease, box-shadow .14s ease;
}
.nav a:hover{
  transform:translate(-2px,-2px);
  box-shadow:clamp(7px,.65vw,10px) clamp(7px,.65vw,10px) 0 rgba(149,127,255,.9);
}
.nav a:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(149,127,255,.9)}
.nav a[aria-current="page"]{
  background:var(--viola);color:#fff;
  border-left-color:var(--viola-s);
  box-shadow:clamp(4px,.4vw,6px) clamp(4px,.4vw,6px) 0 var(--viola-s);
}

/* ---------- classifica ---------- */

.podio{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);
  background:rgba(187,156,183,.92);border:none;border-radius:0;border-left:clamp(5px,.45vw,8px) solid var(--mint);border-bottom:clamp(5px,.45vw,8px) solid var(--mint);
  padding:var(--s3);
  box-shadow:0 4px 0 rgba(89,0,127,.18);
  margin-top:var(--s4);
}
.podio .medaglia{
  flex:none;width:clamp(42px,3.6vw,58px);height:clamp(42px,3.6vw,58px);
  border-radius:50%;background:var(--ciano);border:3px solid var(--viola-s);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--tit);font-size:clamp(17px,1.6vw,26px);color:var(--viola-p);
}
.podio .chi{font-family:var(--tit);font-size:clamp(15px,1.4vw,23px);color:#fff;line-height:1.05}
.podio .nota2{font-family:var(--tit);font-size:clamp(10.5px,.88vw,14px);line-height:1.34;color:#fff;margin-top:4px}

.calendario{list-style:none;margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.calendario li{
  display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  background:rgba(187,156,183,.92);border:none;border-radius:0;border-left:clamp(4px,.35vw,6px) solid var(--mint);
  padding:var(--s3);
  box-shadow:none;
}
.calendario .data{font-family:var(--tit);font-size:clamp(12px,1.08vw,17px);color:#fff;flex:1}
.calendario .ora{font-family:var(--tit);font-size:clamp(10.5px,.86vw,13.5px);color:var(--ciano)}
.calendario .tag{
  font-family:var(--tit);font-size:clamp(9.5px,.8vw,13px);
  background:var(--ciano);border:none;border-radius:0;
  padding:3px 9px;color:var(--viola-s);flex:none;
}
.calendario li.prossima{background:var(--viola-s);border-left-color:var(--ciano)}
.calendario li.prossima .tag{background:var(--ciano);color:var(--viola-s)}

/* i link dentro i testi descrittivi */
.corpo a,.nota2 a,.chiusura a{color:var(--ciano);text-decoration:underline;text-underline-offset:2px;font-family:var(--tit);text-shadow:0 1px 0 rgba(111,93,196,.5)}
.corpo a.tagname,.nota2 a.tagname,a.tagname{font-family:var(--tit);color:var(--viola-s);background:var(--ciano);padding:0 .22em;white-space:nowrap;text-decoration:none;text-shadow:none}


/* ============================================================
   PROVA: testi neri nel riquadro celeste.
   Si attiva con class="neri" sul contenitore.
   ============================================================ */
body.neri .elenco li,
body.neri .carte article,
body.neri .chiusura,
body.neri .podio,
body.neri .calendario li{background:rgba(255,255,255,.97)}
body.neri .corpo,
body.neri .chiusura,
body.neri .podio .nota2{color:#0d0b12}
body.neri h4,
body.neri .podio .chi,
body.neri .calendario .data{color:#0d0b12}
body.neri .calendario .ora{color:#3c3350}
body.neri .intro,
body.neri .sotto,
body.neri .aiuto,
body.neri .consenso label,
body.neri .unavolta,
body.neri .biglietto,
body.neri .occhiello2,
body.neri .campo label,
body.neri .numero,
body.neri .esito,
body.neri .contatti{color:#0d0b12}
body.neri .contatti a{color:#0d0b12}
body.neri .consenso a{color:#0d0b12}
body.neri .num{background:var(--viola-s);color:var(--ciano)}
body.neri .nota{background:#0d0b12}
body.neri .nota strong{color:var(--ciano)}
body.neri .nota span{color:#fff}
body.neri .corpo a,
body.neri .chiusura a,
body.neri .nota2 a{color:var(--viola-s);text-shadow:none}
body.neri .corpo a.tagname,body.neri a.tagname{background:var(--viola-s);color:var(--ciano)}
body.neri .calendario li.prossima{background:var(--viola-s)}
body.neri .calendario li.prossima .data{color:#fff}
body.neri .calendario li.prossima .ora{color:var(--ciano)}
body.neri .scatola input{color:#0d0b12}
body.neri .finestra{border-top-color:#0d0b12}


/* ============================================================
   Il font del sito ha solo le maiuscole: dove lo uso, il maiuscolo
   e' forzato. I testi descrittivi restano in Inter.
   ============================================================ */
h1,h2,h3,h4,.occhiello,.occhiello2,.frase,.sotto,.intro,.biglietto,
.campo label,.num,.premio small,.premio strong,.fumetto,.piede,
.nav a,.invia,.esito,.contatti,.podio .chi,.calendario .data,
.calendario .ora,.calendario .tag,.nota strong,.podio .medaglia,
a.tagname{text-transform:uppercase}

/* i testi descrittivi: Inter, con un filo di corpo in piu' per leggerli bene */
.corpo,.chiusura,.nota span,.consenso label,.aiuto,.unavolta,.podio .nota2{
  font-family:var(--testo);
  letter-spacing:0;
}
.corpo{font-size:clamp(12px,1vw,15.5px);line-height:1.5}
.chiusura,.nota span{font-size:clamp(11.5px,.95vw,15px);line-height:1.5}
.consenso label{font-size:clamp(10.5px,.88vw,13.5px);line-height:1.45}
.aiuto,.unavolta{font-size:clamp(10.5px,.85vw,13.5px)}
/* informativa breve sotto il modulo */
.privacy{font-family:var(--testo);font-size:clamp(10px,.8vw,12.5px);line-height:1.45;margin-top:var(--s3);
  background:rgba(255,255,255,.97);color:#0d0b12;padding:var(--s2) var(--s3);
  border-left:clamp(4px,.35vw,6px) solid var(--viola-s)}
.privacy strong{font-family:var(--tit);font-weight:400;letter-spacing:.04em;color:var(--viola-s);text-transform:uppercase}
.privacy a{color:var(--viola-s)}
.podio .nota2{font-size:clamp(11px,.9vw,14px);line-height:1.45}
.corpo strong,.chiusura strong{font-weight:600}
.scatola input{font-family:var(--testo)}
.scatola input::placeholder{font-family:var(--testo)}
a.tagname{font-family:var(--tit)}

/* ============================================================
   PROVA 3: fascia destra nera, testi bianchi.
   Si attiva con class="nera".
   ============================================================ */
body.nera .colonna{background:#0E0B14}
body.nera .finestra{border-top-color:#2E2640}
body.nera h2,body.nera h3{color:#0E0B14;background:var(--ciano);box-shadow:clamp(4px,.4vw,7px) clamp(4px,.4vw,7px) 0 var(--viola)}
body.nera h2{border-left-color:var(--viola)}
body.nera h3{border-left-color:var(--viola)}
body.nera .occhiello2{color:var(--ciano)}
body.nera .biglietto{color:#8C7FB5}
body.nera .intro,body.nera .sotto{color:var(--ciano)}
body.nera .campo label{color:#EDE9F7}
body.nera .numero{color:#8C7FB5;opacity:1}
body.nera .elenco li,body.nera .carte article,body.nera .podio,body.nera .calendario li{
  background:#1A1626;border-left-color:var(--ciano);border-bottom-color:var(--ciano)}
body.nera h4,body.nera .podio .chi,body.nera .calendario .data{color:var(--ciano)}
body.nera .corpo,body.nera .podio .nota2{color:#EDE9F7}
body.nera .chiusura{background:#1A1626;color:#EDE9F7;border-left-color:var(--ciano);border-bottom-color:var(--ciano)}
body.nera .num{background:var(--ciano);color:#0E0B14}
body.nera .nota{background:var(--ciano);border-left-color:var(--viola);border-bottom-color:var(--viola)}
body.nera .nota strong{color:#0E0B14}
body.nera .nota span{color:#0E0B14}
body.nera .aiuto,body.nera .unavolta,body.nera .consenso label{color:#C9C1E0}
body.nera .consenso a,body.nera .contatti a{color:var(--ciano)}
body.nera .contatti{color:#8C7FB5}
body.nera .corpo a,body.nera .chiusura a,body.nera .nota2 a{color:var(--ciano);text-shadow:none}
body.nera .corpo a.tagname,body.nera a.tagname{background:var(--ciano);color:#0E0B14}
body.nera .calendario .ora{color:#8C7FB5}
body.nera .calendario li.prossima{background:var(--ciano)}
body.nera .calendario li.prossima .data{color:#0E0B14}
body.nera .calendario li.prossima .ora{color:#0E0B14}
body.nera .calendario li.prossima .tag{background:#0E0B14;color:var(--ciano)}
body.nera .nav a{background:#1A1626;color:var(--ciano);border-left-color:var(--ciano);box-shadow:clamp(4px,.4vw,6px) clamp(4px,.4vw,6px) 0 var(--viola)}
body.nera .nav a[aria-current="page"]{background:var(--ciano);color:#0E0B14;border-left-color:var(--viola)}
body.nera .invia{background:var(--ciano);color:#0E0B14;box-shadow:0 6px 0 var(--viola)}
body.nera .scatola{background:#fff;border-color:var(--ciano)}
body.nera .esito{color:var(--ciano)}
body.nera .colonna::-webkit-scrollbar-thumb{background:var(--ciano)}
body.nera .colonna::-webkit-scrollbar-track{background:#1A1626}


/* ============================================================
   PROVA 4: a destra TUTTI i testi neri, numeri compresi.
   Gli sfondi e i colori dei riquadri restano identici alla versione A.
   Si attiva con class="neritutto".
   ============================================================ */
body.neritutto .colonna,
body.neritutto .colonna *{color:#0B0910}
body.neritutto .nav a,
body.neritutto h2,
body.neritutto h3,
body.neritutto h4,
body.neritutto .num,
body.neritutto .intro,
body.neritutto .sotto,
body.neritutto .biglietto,
body.neritutto .occhiello2,
body.neritutto .campo label,
body.neritutto .numero,
body.neritutto .corpo,
body.neritutto .chiusura,
body.neritutto .nota strong,
body.neritutto .nota span,
body.neritutto .aiuto,
body.neritutto .consenso label,
body.neritutto .unavolta,
body.neritutto .esito,
body.neritutto .contatti,
body.neritutto .contatti a,
body.neritutto .consenso a,
body.neritutto .podio .chi,
body.neritutto .podio .nota2,
body.neritutto .podio .medaglia,
body.neritutto .calendario .data,
body.neritutto .calendario .ora,
body.neritutto .calendario .tag,
body.neritutto .invia,
body.neritutto .corpo a,
body.neritutto .chiusura a,
body.neritutto .nota2 a,
body.neritutto .corpo a.tagname,
body.neritutto a.tagname,
body.neritutto .scatola input,
body.neritutto .scatola span{color:#0B0910}
body.neritutto .corpo a,
body.neritutto .chiusura a,
body.neritutto .nota2 a{text-shadow:none;text-decoration-color:#0B0910}
body.neritutto .invia svg,
body.neritutto .unavolta svg{stroke:#0B0910}
body.neritutto .scatola input::placeholder{color:#0B0910;opacity:.45}
body.neritutto .icona svg{stroke:#fff}


/* ---------- pezzi dei testi definitivi (zip 5) ---------- */
/* avviso in cima al modulo: l'iscrizione non e' ancora aperta */
#registration-state{
  font-family:var(--tit);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(11px,1vw,15px);line-height:1.3;
  background:var(--giallo);color:#3f2d00;
  padding:clamp(9px,1.2vh,15px) clamp(12px,1.2vw,20px);
  margin-bottom:var(--s3);
  border-left:clamp(5px,.45vw,8px) solid var(--viola-s);
  box-shadow:clamp(4px,.4vw,6px) clamp(4px,.4vw,6px) 0 rgba(111,93,196,.3);
}
#registration-state.is-open{background:#B6FF6B;color:#123c00}
/* informativa breve sotto le caselle */
.privacy-short{
  font-family:var(--testo);font-size:clamp(10.5px,.82vw,13px);line-height:1.5;
  background:rgba(255,255,255,.97);color:#0d0b12;
  padding:var(--s2) var(--s3);margin-top:var(--s3);
  border-left:clamp(4px,.35vw,6px) solid var(--viola-s);
}
.privacy-short a{color:var(--viola-s);font-weight:600}
/* casella facoltativa: staccata da quella obbligatoria */
.consenso.optional{
  margin-top:var(--s2);padding-top:var(--s2);
  border-top:2px dashed rgba(111,93,196,.35);
}
/* bottone spento finche' le iscrizioni non aprono */
.invia:disabled{opacity:.62;cursor:not-allowed;filter:saturate(.75)}
.invia:disabled:hover{transform:none;box-shadow:none}
/* elenco dei vincitori confermati */
#winner-list .corpo{
  background:rgba(255,255,255,.97);color:#0d0b12;
  padding:var(--s3);border-left:clamp(5px,.45vw,8px) solid var(--mint);
  margin-top:var(--s2);
}

/* Menu: one row, pinned to the viewport from the first pixel. */
:root { --cuke-nav-height: calc(clamp(68px, 9vh, 88px) + env(safe-area-inset-top, 0px)); }
.schermo { grid-template-columns: minmax(0, 59.73fr) minmax(0, 40.27fr); }
.colonna { min-width: 0; padding-top: calc(var(--cuke-nav-height) + var(--s4)); scroll-padding-top: calc(var(--cuke-nav-height) + 14px); }
.colonna > .nav {
  position: fixed; top: 0; right: 0; bottom: auto; left: auto;
  width: 40.27%; height: var(--cuke-nav-height); z-index: 100;
  display: grid; grid-template-columns: 8fr 5fr 11fr 5fr;
  align-items: center; gap: clamp(5px, .55vw, 10px);
  margin: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) clamp(10px, 1.2vw, 22px) 16px;
  background: var(--ciano); isolation: isolate;
}
.colonna > .nav a {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; white-space: nowrap; text-align: center;
  font-size: clamp(10px, .95vw, 20px); letter-spacing: .015em; line-height: 1.15;
  padding: 10px 2px; border-left-width: 3px;
}
body.nera .colonna > .nav { background: #0E0B14; }
@media (max-width: 900px) {
  .schermo { padding-top: var(--cuke-nav-height); }
  .colonna { padding-top: var(--s4); }
  .colonna > .nav { width: 100%; gap: 5px; padding-right: 10px; padding-left: 10px; }
  .colonna > .nav a { font-size: clamp(9px, 2.6vw, 18px); border-left-width: 2px; }
}

/* Mobile redesign: single-column story and full-width registration card. */
@media (max-width:900px){
 :root{--cuke-nav-height:calc(64px + env(safe-area-inset-top,0px));}
 html{height:auto;scroll-padding-top:calc(var(--cuke-nav-height) + 14px);}
 body{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;}
 .schermo{display:block;grid-template-columns:none;height:auto;min-height:100dvh;padding-top:var(--cuke-nav-height);}
 .schermo .racconto{height:auto;min-height:0;overflow:visible;padding:22px 20px 18px;max-width:620px;margin:0 auto;}
 .racconto .logo{width:112px;height:56px;object-fit:contain;}
 .racconto .testa{height:auto;overflow:visible;gap:0;}
 .racconto .occhiello{background:none;border:0;padding:0;margin:14px 0 8px;color:#28143e;font-size:12px;letter-spacing:.055em;}
 .racconto .occhiello span{color:#7548d8;}
 .racconto h1{background:none;border:0;box-shadow:none;padding:0;max-width:100%;margin:4px 0 12px;font-size:clamp(32px,8.4vw,52px);line-height:1.06;color:#fffbed;text-shadow:2px 3px 0 #28143e;-webkit-text-stroke:1px #28143e;overflow-wrap:normal;}
 .racconto h1 span{color:#7548d8;}
 .racconto .frase{max-width:100%;background:none;border:0;padding:0;margin:0;color:#28143e;font-family:var(--testo);font-size:15px;line-height:1.5;}
 .racconto .frase mark{background:none;color:#28143e;font-weight:600;}
 .racconto .scena{position:relative;display:block;min-height:0;height:240px;max-width:360px;margin:18px auto 0;}
 .racconto .personaggio{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:230px;width:166px;max-width:none;max-height:none;object-fit:contain;}
 .racconto .premio{position:absolute;top:12px;right:0;display:flex;flex-direction:column;justify-content:center;width:112px;height:112px;padding:8px;border:2px solid #28143e;border-radius:50%;background:#ed9acd;box-shadow:3px 4px 0 #28143e;transform:rotate(7deg);}
 .racconto .premio strong{font-size:42px;color:#28143e;line-height:1.15;}
 .racconto .premio small{font-size:10px;letter-spacing:.02em;color:#28143e;}
 .racconto .fumetto{position:absolute;top:30px;left:0;margin:0;max-width:125px;padding:10px;font-size:12px;line-height:1.2;border:2px solid #28143e;border-radius:12px 12px 2px 12px;background:#fffbed;color:#28143e;box-shadow:2px 3px 0 #28143e;transform:rotate(-5deg);}
 .racconto .fumetto:after{display:none;}
 .racconto .piede{position:static;margin:8px 0 0;padding:6px 0;gap:10px;flex-wrap:wrap;}
 .racconto .piede .social img{width:24px;height:24px;}
 .racconto .frase-piede{white-space:normal;font-size:10px;line-height:1.4;}
 .schermo .colonna{display:flex;flex-direction:column;height:auto;min-width:0;overflow:visible;background:transparent;padding:8px 18px 36px;gap:28px;max-width:620px;margin:0 auto;}
 .colonna > .nav{width:100%;height:var(--cuke-nav-height);padding:calc(8px + env(safe-area-inset-top,0px)) 10px 12px;gap:5px;background:#ffcf28;border-bottom:2px solid #28143e;}
 .colonna > .nav a{min-height:40px;border:2px solid #28143e;border-radius:7px;background:#7548d8;color:#fffbed;box-shadow:2px 3px 0 #28143e;padding:8px 1px;font-size:clamp(10px,2.9vw,14px);letter-spacing:0;}
 .colonna > .nav a[aria-current="page"]{background:#c8abf0;color:#28143e;border-color:#28143e;box-shadow:2px 3px 0 #28143e;}
 .colonna > .nav a:hover{transform:none;}
 .colonna .modulo{width:100%;padding:22px 19px;border:2px solid #28143e;border-radius:20px;background:#fffbed;box-shadow:5px 6px 0 #28143e;}
 .colonna .biglietto{font-size:12px;line-height:1.4;letter-spacing:.04em;color:#604479;padding-bottom:13px;border-bottom:1px solid #d6c7de;}
 .colonna h2,.colonna h3{background:none;border:0;box-shadow:none;padding:0;margin:16px 0 10px;color:#28143e;font-size:28px;line-height:1.15;}
 .colonna h3{font-size:24px;}
 .colonna .sotto,.colonna .intro{font-family:var(--testo);font-size:16px;line-height:1.5;color:#604479;margin-top:10px;}
 .colonna form{margin-top:22px;}
 .colonna .campo + .campo{margin-top:20px;}
 .colonna .campo label{font-size:14px;line-height:1.4;color:#28143e;}
 .colonna .rete{gap:8px;}
 .colonna .numero{font-size:12px;}
 .colonna .scatola{min-height:52px;border:2px solid #c5afd9;border-radius:10px;background:#fff;padding:0 12px;}
 .colonna .scatola input{font-size:16px;min-width:0;padding:13px 4px;color:#28143e;}
 .colonna .scatola:focus-within{border-color:#7548d8;outline:3px solid #7548d822;}
 .colonna .aiuto,.colonna .unavolta{font-size:13px;line-height:1.5;margin-top:10px;color:#604479;}
 .colonna .consenso{gap:10px;margin-top:16px;align-items:flex-start;}
 .colonna .consenso label,.colonna .privacy-short,.colonna .privacy{font-size:14px;line-height:1.55;color:#604479;}
 .colonna .consenso input{flex:none;width:20px;height:20px;margin-top:2px;}
 .colonna .privacy-short{border:0;border-radius:10px;background:#f1e8f7;padding:13px;}
 .colonna .invia{min-height:54px;font-size:15px;line-height:1.35;white-space:normal;border:2px solid #28143e;border-radius:10px;background:#7548d8;color:#fffbed;box-shadow:3px 4px 0 #28143e;margin-top:20px;padding:13px;}
 .colonna .finestra{border:2px solid #28143e;border-radius:18px;background:#fffbed;padding:20px 16px;box-shadow:4px 5px 0 #b894ea;}
 .colonna .corpo,.colonna .chiusura,.colonna .nota span,.colonna .podio .nota2{font-family:var(--testo);font-size:16px;line-height:1.6;color:#28143e;overflow-wrap:anywhere;}
 .colonna h4{font-size:18px;line-height:1.35;color:#28143e;}
 .colonna .carte{grid-template-columns:1fr;gap:16px;}
 .colonna .elenco li,.colonna .carte article,.colonna .calendario li,.colonna .podio{min-width:0;padding:16px;border-radius:12px;}
 .colonna .podio{flex-wrap:wrap;}
 .colonna .podio .chi{font-size:24px;overflow-wrap:anywhere;}
 .colonna .calendario .data{font-size:17px;}
 .colonna .calendario .ora,.colonna .contatti{font-size:14px;line-height:1.5;}
 .colonna .contatti{flex-wrap:wrap;overflow-wrap:anywhere;}
}

/* Mobile palette correction: retain the finished cyan/purple CUKE identity. */
@media (max-width:900px){
 .racconto .occhiello{background:rgba(187,156,183,.9);color:#fff;border-left:4px solid var(--mint);padding:6px 10px;}
 .racconto .occhiello span{color:var(--ciano);}
 .racconto h1{background:var(--viola-s);color:var(--ciano);border-left:7px solid var(--ciano);box-shadow:5px 5px 0 rgba(92,223,242,.55);padding:8px 12px 10px;text-shadow:none;-webkit-text-stroke:0;font-size:clamp(29px,7.7vw,48px);}
 .racconto h1 span{color:var(--ciano);}
 .racconto .frase{font-family:var(--tit);font-size:14px;line-height:1.35;background:rgba(187,156,183,.82);color:#fff;border-left:4px solid var(--mint);border-bottom:4px solid var(--mint);padding:10px 12px;margin-top:8px;}
 .racconto .frase mark{background:var(--ciano);color:var(--viola-s);font-weight:400;}
 .racconto .premio{background:var(--ciano);border:3px solid var(--viola-s);border-radius:0;box-shadow:0 6px 0 rgba(89,0,127,.22);transform:rotate(-3deg);}
 .racconto .premio strong,.racconto .premio small{color:var(--viola-s);}
 .racconto .fumetto{background:var(--viola-s);color:var(--ciano);border:0;border-left:4px solid var(--ciano);border-radius:0;box-shadow:0 5px 0 rgba(89,0,127,.18);transform:none;}
 .schermo .colonna{background:var(--ciano);max-width:none;padding:24px 20px 40px;}
 .colonna > :not(.nav){width:100%;max-width:580px;margin-left:auto;margin-right:auto;}
 .colonna > .nav{background:var(--ciano);border-bottom:0;}
 .colonna > .nav a{background:var(--viola-s);color:var(--ciano);border:0;border-left:3px solid var(--ciano);border-radius:0;box-shadow:3px 4px 0 var(--viola);}
 .colonna > .nav a[aria-current="page"]{background:var(--viola);color:#fff;border-left-color:var(--viola-s);box-shadow:3px 4px 0 var(--viola-s);}
 .colonna .modulo,.colonna .finestra{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;}
 .colonna .biglietto{color:#0B0910;border:0;padding-bottom:6px;font-family:var(--tit);}
 .colonna h2,.colonna h3{background:var(--viola-s);color:var(--ciano);border:0;border-left:5px solid var(--ciano);border-radius:0;box-shadow:4px 5px 0 var(--mint);padding:7px 11px 9px;}
 .colonna .sotto,.colonna .intro{color:#0B0910;font-family:var(--tit);font-size:15px;line-height:1.4;}
 .colonna .campo label,.colonna .aiuto,.colonna .unavolta,.colonna .consenso label{color:#0B0910;}
 .colonna .scatola{background:#fff;border:3px solid var(--viola);border-radius:14px;}
 .colonna .scatola input,.colonna .scatola span{color:var(--viola-s);}
 .colonna .scatola:focus-within{border-color:var(--viola-s);outline:3px solid rgba(149,127,255,.3);}
 .colonna .privacy-short,.colonna .privacy{background:#fff;color:#0B0910;border-left:4px solid var(--viola-s);border-radius:0;}
 .colonna .invia{background:var(--viola-s);color:var(--ciano);border:0;border-radius:0;box-shadow:0 6px 0 var(--viola);}
 .colonna .elenco li,.colonna .carte article,.colonna .calendario li,.colonna .podio{background:#fff;border-radius:0;border-left:5px solid var(--mint);border-bottom:5px solid var(--mint);}
 .colonna .corpo,.colonna .chiusura,.colonna .nota span,.colonna .podio .nota2{color:#0B0910;}
 .colonna h4,.colonna .podio .chi,.colonna .calendario .data{color:var(--viola-s);}
 .colonna .chiusura{background:rgba(187,156,183,.92);border-radius:0;}
}

/* Mobile hero composition: one layout, separate columns, flush scenery. */
@media (max-width:900px){
 :root{--cuke-nav-height:64px;}
 html,body,.schermo{background:var(--ciano);}
 .fondale{display:none;}
 .schermo{padding-top:64px;}
 .colonna > .nav{top:0;height:64px;min-height:0;max-height:64px;grid-template-rows:40px;align-content:start;align-items:center;padding:10px 10px 14px;margin:0;}
 .colonna > .nav a{height:40px;min-height:40px;max-height:40px;}
 .schermo .racconto{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:none;min-height:calc(100svh - 64px);height:auto;margin:0;padding:12px 18px 14px;background-color:#FEC61E;background-image:url('hero-mobile-scenery.svg');background-size:cover;background-position:22% top;background-repeat:no-repeat;overflow:hidden;}
 .racconto .logo{flex:none;width:140px;height:62px;margin:0 0 16px;}
 .racconto .testa{flex:none;width:100%;max-width:440px;height:auto;gap:10px;overflow:visible;}
 .racconto .occhiello{margin:0;padding:6px 9px;font-size:clamp(10px,2.7vw,12px);line-height:1.3;}
 .racconto h1{margin:0;max-width:100%;font-size:clamp(28px,7.5vw,44px);line-height:1.08;padding:8px 12px 10px;}
 .racconto .frase{margin:6px 0 0;max-width:100%;padding:9px 10px;font-size:clamp(12px,3.3vw,15px);line-height:1.4;}
 .racconto .scena{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(86px,25vw,110px);grid-template-rows:minmax(64px,.32fr) minmax(108px,.4fr) minmax(0,.28fr);column-gap:14px;row-gap:0;align-items:center;flex:0 0 auto;width:calc(100% + 16px);max-width:480px;height:clamp(320px,45svh,430px);min-height:0;margin:clamp(24px,3.5svh,36px) -8px 0;}
 .racconto .personaggio{position:static;grid-column:1;grid-row:1 / -1;align-self:end;justify-self:center;display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;left:auto;right:auto;top:auto;bottom:auto;transform:none;object-fit:contain;object-position:center bottom;}
 .racconto .fumetto{position:static;grid-column:2;grid-row:1;align-self:end;justify-self:stretch;width:100%;max-width:none;margin:0;padding:10px 6px;font-size:clamp(10px,2.6vw,12px);line-height:1.3;left:auto;right:auto;top:auto;bottom:auto;transform:translateX(-8px);z-index:auto;}
 .racconto .premio{position:static;grid-column:2;grid-row:2;align-self:center;justify-self:center;display:flex;flex-direction:column;justify-content:center;width:calc(100% - 4px);height:auto;min-height:96px;margin:0;padding:9px 5px;left:auto;right:auto;top:auto;bottom:auto;transform:translateX(-4px) rotate(-3deg);z-index:auto;}
 .racconto .premio strong{font-size:clamp(33px,9vw,42px);line-height:1.1;}
 .racconto .premio small{font-size:clamp(9px,2.35vw,11px);line-height:1.3;letter-spacing:.02em;}
 .racconto .piede{flex:none;position:static;left:auto;right:auto;bottom:auto;width:100%;margin:18px 0 0;padding:6px 0 2px;gap:10px;}
 .schermo .colonna{background:var(--ciano);min-height:calc(100dvh - 64px);padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));}
}

/* Consistent navigation targets and leaderboard branding. */
[hidden]{display:none!important;}
#registration,#leaderboard,#date,#regole,#contributions{scroll-margin-top:calc(var(--cuke-nav-height) + 14px);}
.podio{border:3px solid var(--viola-s);border-left:7px solid var(--viola-s);box-shadow:5px 5px 0 var(--mint);}
.podio .medaglia{flex:none;background:var(--viola-s);color:var(--ciano);}
.podio > div:last-child{min-width:0;}
.podio .chi{overflow-wrap:anywhere;}
@media(max-width:900px){
 .racconto h1{overflow-wrap:anywhere;}
 .racconto h1{font-size:clamp(23px,6.25vw,38px);}
 .calendario li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
 .calendario .data{flex:1 1 170px;}
 .podio{margin:20px 0;}
}

/* Scene dimensions remain independent from the active text panel. */
body[data-cuke-default] .testa{flex-shrink:0;}
body[data-cuke-default] .colonna{overflow-anchor:none;}