/* Oplaland — aggiunte della notte del 21/10 (file mio; tema.css e base.css li toccano anche gli aiutanti). */
/* il tasto Indietro: sempre in alto a sinistra, con la freccia e dove porta */
.indietro { gap: .4em; padding: .6em 1.1em .6em .8em; } .indietro .ic { width: 1.3em; height: 1.3em; }
.testa-dettaglio { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 14px; position: relative; isolation: isolate; }
.testa-dettaglio::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -30px; bottom: -20px; background: var(--cielo-1); }
.testa-dettaglio .s-famiglia { margin: 0; color: #FFFFFF; font-weight: 800; }
.testa-dettaglio + .s-titolo { color: var(--testo); margin-top: 32px; }
.testa-dettaglio + .tp { margin-top: 8px; } .testa-dettaglio + .tp::before { top: -20px; }
@media (max-width: 600px) { .barra .indietro span { position: static; width: auto; height: auto; overflow: visible; clip: auto; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
html[data-colori="contrasto"] .testa-dettaglio::before { background: #000; }

/* Tastiera: come funziona, tappe e minitastiere */
.come { background: #FFFFFF; border-radius: 36px; padding: 24px 26px; box-shadow: 0 8px 24px rgba(36, 21, 74, .10); margin-bottom: 28px; }
.come h2 { font-size: 1.6rem; margin-bottom: 14px; color: var(--testo); }
.passi-come { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.passi-come li { display: grid; grid-template-columns: 64px 1fr; gap: 2px 14px; align-items: center; } .passi-come .tessera { grid-row: span 2; }
.passi-come b { font-family: var(--font-titoli); font-size: 1.2rem; color: var(--testo); } .passi-come li > span:last-child { color: var(--testo-2); font-size: 1rem; }
@media (max-width: 860px) { .passi-come { grid-template-columns: 1fr; } }
.tappa { margin-top: 34px; } .tappa h2 { display: flex; align-items: center; gap: 12px; font-size: 1.7rem; color: var(--testo); margin-bottom: 4px; } .tappa > p { color: var(--testo-2); margin-bottom: 14px; }
.lezioni-mini { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.lez-carta { display: grid; gap: 6px; height: 100%; background: #FFFFFF; border-radius: 30px; padding: 18px; text-decoration: none; color: var(--testo); box-shadow: 0 8px 24px rgba(36, 21, 74, .10); transition: transform calc(.15s * var(--mov)); }
.lez-carta:hover { transform: translateY(-4px); } .lez-carta b { font-family: var(--font-titoli); font-size: 1.3rem; line-height: 1.1; } .lc-frase { color: var(--testo-2); font-size: .98rem; }
.lez-carta.libera { max-width: 420px; }
.lc-testa { display: flex; justify-content: space-between; align-items: center; } .lc-fatta { display: none; width: 40px; height: 40px; border-radius: 50%; background: #1FB86A; place-items: center; color: #FFF; } .lc-fatta .ic { width: 26px; height: 26px; }
.lez-carta.fatta .lc-fatta { display: grid; }
.mini-tastiera { width: 100%; height: auto; margin-top: 4px; } .mk-off { fill: #ECE8F7; } .mk-on { fill: #6A3DE8; } .mk-t { fill: #FFFFFF; font: 700 11px var(--font-titoli); text-anchor: middle; }
.lc-vai { justify-self: start; margin-top: 4px; font-family: var(--font-titoli); font-weight: 800; color: #FFFFFF; background: linear-gradient(180deg, #8D66FF, #6A3DE8); border-radius: 999px; padding: .45em 1.1em; box-shadow: inset 0 -4px 0 #4C25C4; }
html[data-colori="scuro"] :is(.come, .lez-carta) { background: var(--superficie); } html[data-colori="scuro"] .mk-off { fill: #2C2257; }
html[data-colori="contrasto"] .mk-on { fill: #000; } html[data-colori="contrasto"] .lc-vai { background: #000; box-shadow: none; }

/* scheda al telefono: prima il foglio, poi le opzioni */
@media (max-width: 1100px) { .scheda-due > .anteprima-c { order: -1; } }

/* il piano di oggi */
.piano { margin-top: 28px; background: #FFFFFF; border-radius: 40px; padding: 24px 26px; box-shadow: 0 10px 30px rgba(36, 21, 74, .12); }
.piano-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.piano h2 { display: flex; align-items: center; gap: 10px; font-size: 1.9rem; color: var(--testo); margin: 0; } .piano h2 .ic { width: 44px; height: 44px; } .piano-testa p { margin: 4px 0 0; color: var(--testo-2); }
.piano-obiettivi { display: flex; flex-wrap: wrap; gap: 8px; }
.ob { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--superficie-2); color: #24154A; font-family: var(--font-titoli); font-weight: 800; cursor: pointer; box-shadow: inset 0 -3px 0 #E2D9FF; }
.ob[aria-pressed="true"] { background: #6A3DE8; color: #FFFFFF; box-shadow: inset 0 -3px 0 #4C25C4; }
.piano-voci { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pv { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; height: 100%; padding: 14px; border-radius: 26px; background: var(--superficie-2); text-decoration: none; color: var(--testo); transition: transform calc(.15s * var(--mov)); }
.pv:hover { transform: translateY(-3px); } .pv-n { width: 36px; height: 36px; border-radius: 50%; background: #6A3DE8; color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-family: var(--font-titoli); }
.pv-n .ic { width: 22px; height: 22px; } .pv.fatta { background: #DDF7E6; } .pv.fatta .pv-n { background: #1FB86A; }
.pv-ic .ic { width: 42px; height: 42px; } .pv-t { display: grid; } .pv-t b { font-family: var(--font-titoli); font-size: 1.1rem; line-height: 1.15; } .pv-t small { color: var(--testo-2); font-size: .92rem; }
.piano-fatto { margin: 14px 0 0; font-family: var(--font-titoli); font-weight: 800; color: #157A3D; }
@media (max-width: 980px) { .piano-voci { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .piano-voci { grid-template-columns: 1fr; } .piano { padding: 18px; border-radius: 30px; } }
html[data-colori="scuro"] .piano { background: var(--superficie); } html[data-colori="scuro"] .pv { background: var(--superficie-2); }
/* la festa vicina */
.festa-box { margin-top: 24px; }
.festa-banda { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "q q v" "n n v" "s s v"; gap: 2px 16px; padding: 20px 26px; border-radius: 34px; background: linear-gradient(120deg, var(--f1), var(--f2)); color: #FFFFFF; text-decoration: none; box-shadow: 0 10px 30px rgba(36, 21, 74, .18); }
.fb-quando { grid-area: q; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; } .festa-banda b { grid-area: n; font-family: var(--font-titoli); font-size: 2rem; line-height: 1.05; } .festa-banda > span:nth-of-type(2) { grid-area: s; }
.fb-vai { grid-area: v; align-self: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; } .fb-vai .ic { width: 30px; height: 30px; color: #FFF; }
.festa-banda, .festa-c { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.feste-lista { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.festa-c { display: grid; gap: 2px; padding: 20px; border-radius: 30px; background: linear-gradient(120deg, var(--f1), var(--f2)); color: #FFFFFF; text-decoration: none; height: 100%; }
.festa-c b { font-family: var(--font-titoli); font-size: 1.6rem; } .festa-c span { font-weight: 800; } .festa-c small { font-size: 1rem; }
html[data-colori="contrasto"] :is(.festa-banda, .festa-c) { background: #000; text-shadow: none; }
.gruppo-d { margin-top: 30px; } .gruppo-d > h2 { color: var(--testo); font-size: 1.7rem; margin-bottom: 12px; }
/* premi */
.premio-box { display: flex; align-items: center; gap: 20px; text-align: left; background: #FFF7D6; border-radius: 30px; padding: 18px 20px; margin: 18px auto; max-width: 720px; }
.medaglia { width: 90px; height: auto; flex: none; } .medaglia.grande { width: 120px; animation: medaglia calc(.7s * var(--mov)) cubic-bezier(.3, 1.5, .5, 1); }
@keyframes medaglia { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.pb-titolo { font-family: var(--font-titoli); font-weight: 800; font-size: 1.5rem; margin: 0; color: #24154A; } .pb-sotto { margin: 4px 0 10px; color: #5A4E7A; }
.pb-bottoni { display: flex; flex-wrap: wrap; gap: 8px; } .pb-bottoni .tasto { font-size: .95rem; padding: .55em 1em; } .pb-esito { margin: 8px 0 0; font-weight: 700; color: #24154A; }
@media (max-width: 600px) { .premio-box { flex-direction: column; text-align: center; } .pb-bottoni { justify-content: center; } }
html[data-colori="scuro"] .premio-box { background: var(--superficie-2); } html[data-colori="scuro"] :is(.pb-titolo, .pb-sotto, .pb-esito) { color: var(--testo); }
.premi-griglia { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.premio-c { display: grid; justify-items: center; text-align: center; gap: 4px; } .premio-c b { font-family: var(--font-titoli); } .premio-c small { color: var(--testo-2); }
.premi-conta { font-family: var(--font-titoli); font-weight: 800; font-size: 1.3rem; } .premi-vuoto { text-align: center; padding: 20px; } .c-premio:empty { display: none; }

/* —— correzioni dal controllo finale (21/10) —— */
.kb-maiusc { flex: 1.6 1 0; max-width: 110px; font-size: .85rem; }
.kb-maiusc.kb-acceso { background: #FFC21A; color: #24154A; }
.barra .t-progresso, .barra .g-progresso { min-width: 0; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
  .barra:has(.t-progresso) { flex-wrap: wrap; row-gap: 10px; }
  .barra .t-progresso { order: 3; flex: 1 0 100%; gap: 6px; }
  .barra .t-progresso .pallino { width: 22px; height: 10px; }
  .kb-tasto { min-height: 52px; font-size: .9rem; }
  .kb-riga { gap: 3px; }
  .kb-carta { padding: 10px 6px; }
  .t-bersaglio { font-size: 2.4rem; }
}
/* le parole non si spezzano a metà: si va a capo solo fra una parola e l'altra */
.t-bersaglio { flex-wrap: wrap; } .t-bersaglio .t-parola { display: inline-flex; white-space: nowrap; }
/* testata stretta (360 px e testo grande): tutto dentro lo schermo */
@media (max-width: 420px) {
  .testata-in { gap: 8px; width: calc(100% - 24px); }
  .testata .tasto { padding: .5em .7em; font-size: .88rem; gap: .35em; }
  .logo span { font-size: 1.2rem; } .logo-blob { width: 34px; height: 36px; }
  html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .testata .menu-apri span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .logo span { font-size: 1rem; }
}
/* colonne che non si allargano oltre lo schermo con parole lunghe o lettere spaziate */
.con-torre { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 760px) { .con-torre { grid-template-columns: minmax(0, 1fr); } }
.carta, .risposta, .app, .g-titolo, .g-istruzione, h1, h2, .eroe p { overflow-wrap: break-word; min-width: 0; }
/* barra dei giochi al telefono: il nome del ritorno si accorcia, «Il mio modo» resta sempre dentro */
@media (max-width: 520px) {
  .barra { gap: 8px; }
  .barra .indietro { min-width: 0; flex: 0 1 auto; } .barra .indietro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .barra .modo-apri { flex: 0 0 auto; margin-left: auto; }
  .barra .modo-apri span, html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .testata .modo-apri span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra .modo-apri, .testata .modo-apri { min-width: 48px; justify-content: center; }
}
.g-livelli { flex-wrap: wrap; justify-content: center; max-width: 100%; }
@media (max-width: 520px) {
  html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .app-griglia { grid-template-columns: minmax(0, 1fr); }
  .pannello-bianco > * { min-width: 0; }
}
@media (max-width: 600px) { .barra .indietro span { position: static; width: auto; height: auto; clip: auto; max-width: 42vw; } }

/* alto contrasto: ogni tasto è nero con scritta bianca (bianco con scritta nera sulle fasce nere) */
html[data-colori="contrasto"] :is(.tasto, .g-aiuto, .g-livello, .ob, .risposta.giusta) { background: #000 !important; color: #FFF !important; border: 3px solid #000 !important; }
html[data-colori="contrasto"] :is(.eroe, .barra, .testata, .piede, .tp, .testa-dettaglio, .festa-banda) :is(.tasto, .g-livello) { background: #FFF !important; color: #000 !important; border-color: #FFF !important; }
html[data-colori="contrasto"] :is(.tasto, .g-aiuto, .g-livello, .ob) .ic { --ic1: currentColor; --ic2: currentColor; --ic3: currentColor; color: currentColor; }
html[data-colori="contrasto"] :is(.g-livello, .ob)[aria-pressed="true"] { outline: 4px solid #FFC21A; outline-offset: 2px; }
html[data-colori="contrasto"] .g-ascolta, html[data-colori="contrasto"] [data-ascolta] { color: #000; }
html[data-colori="contrasto"] .torre-slot { opacity: .45; filter: grayscale(1) contrast(3); }
html[data-colori="contrasto"] .app-frase, html[data-colori="contrasto"] .app-nome { color: #000; }
html[data-colori="contrasto"] .btn-primario { background: #000 !important; color: #FFF !important; } html[data-colori="contrasto"] .btn-primario .ic { --ic1: #FFF; --ic2: #FFF; --ic3: #FFF; color: #FFF; }
@media (max-width: 560px) {
  .tp > div { min-width: 0; }
  .tp h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); hyphens: auto; }
  html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) :is(.tp h1, .g-titolo, .eroe-testo h1) { font-size: clamp(1.4rem, 7.5vw, 2rem); hyphens: auto; }
  html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .tp .tessera.grande { width: 56px; height: 56px; }
  html:is([data-testo=grande], [data-testo=enorme], [data-carattere=dislessia]) .eroe .tasto { max-width: 100%; white-space: normal; }
}
.senza-js { position: relative; z-index: 5; margin: 16px auto; max-width: 640px; background: #FFF3C4; color: #24154A; border-radius: 20px; padding: 16px 20px; font-weight: 800; text-align: center; }
.g-livello { min-height: 48px; padding: 8px 18px; }
.istr .ascolta { background: linear-gradient(180deg, #8D66FF, #5A2FD6) !important; color: #FFFFFF; min-width: 52px; min-height: 52px; }
.istr .ascolta .ic { --ic1: #FFFFFF; --ic2: rgba(255, 255, 255, .5); color: #FFFFFF; }
html[data-colori="contrasto"] .istr .ascolta { background: #000 !important; }
.torre-slot { opacity: .22; }
.barra .c-titolo { color: #FFFFFF; text-align: center; min-width: 0; }
html[data-colori="contrasto"] .barra .c-titolo { color: #FFFFFF; }
@media (max-width: 520px) { .barra:has(.c-titolo) { flex-wrap: wrap; } .barra .c-titolo { order: 3; flex: 1 0 100%; font-size: 1.3rem; margin: 0; } }
.g-stelle { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; vertical-align: middle; font-size: .9rem; color: #8A5A00; background: #FFF3C4; border-radius: 999px; padding: 2px 10px 2px 6px; } .g-stelle svg { width: 20px; height: 20px; }
.continua-box { margin-top: 18px; position: relative; z-index: 2; }
.continua { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--superficie); color: var(--testo); border-radius: 28px; padding: 16px 22px; text-decoration: none; box-shadow: 0 8px 24px rgba(36, 21, 74, .10); border: 3px solid #E2D9FF; }
.continua small { display: block; font-weight: 800; color: #5A2FD6; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; } .continua b { font-family: var(--font-titoli); font-size: 1.4rem; }
.ct-vai { background: linear-gradient(180deg, #FFE36B, #FFC21A); color: #3A2600; font-family: var(--font-titoli); font-weight: 800; border-radius: 999px; padding: .6em 1.3em; box-shadow: inset 0 -5px 0 #E59F00; min-height: 48px; display: inline-flex; align-items: center; }
html[data-colori="scuro"] .continua small { color: #C9B8FF; } html[data-colori="contrasto"] .continua { border-color: #000; } html[data-colori="contrasto"] .ct-vai { background: #000; color: #FFF; }
/* l'icona di ogni gioco: un disegno a colori su una tessera chiara, col bordo del colore del mondo */
.tessera-g { flex: 0 0 auto; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 4px var(--g1, #E2D9FF), 0 6px 0 var(--g2, #C9B8FF); padding: 10px; }
.tessera-g svg { width: 100%; height: 100%; display: block; }
html[data-colori="scuro"] .tessera-g { background: #F4F0FF; } html[data-colori="contrasto"] .tessera-g { box-shadow: inset 0 0 0 3px #000; }
@media (max-width: 560px) { .tessera-g { width: 64px; height: 64px; padding: 8px; border-radius: 20px; } }
.mondi > li > .mondo { height: 100%; }
.fam-indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 28px; }
.fam-indice a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--superficie); color: var(--testo); font-weight: 800; text-decoration: none; box-shadow: inset 0 -4px 0 #E2D9FF; }
.fam-indice a span { background: #6A3DE8; color: #FFF; border-radius: 999px; padding: 1px 9px; font-size: .85rem; }
html[data-colori="contrasto"] .fam-indice a { border: 3px solid #000; } .fam { scroll-margin-top: 20px; }
.pb-testo .tasto, .tasto { max-width: 100%; } .pb-testo .tasto span { white-space: normal; text-align: center; }
/* il tasto della lingua nel menu */
.voce-lingua .voce { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); font-weight: 800; }
.menu.aperto .voce-lingua .voce { box-shadow: inset 0 0 0 2px #E2D9FF; }
/* testi solo per chi ha la tastiera, o solo per chi tocca */
.solo-tocco { display: none; }
@media (pointer: coarse) { .solo-tastiera { display: none; } .solo-tocco { display: inline; } }
.kb-maiusc span { font-size: 1.5rem; line-height: 1; }
@media (max-width: 640px) { .t-bersaglio { font-size: clamp(1.4rem, calc(150vw / var(--n, 6)), 2.4rem); } }
/* dopo la risposta giusta «Avanti» si vede sempre (vita.js lo porta in vista) */
/* il tasto indietro sopra la fascia viola, intero e cliccabile */
.testa-dettaglio { position: relative; z-index: 3; }
/* alto contrasto: icone dei tasti leggibili */
html[data-colori="contrasto"] :is(.tasto, .g-aiuto, .g-livello, .ob) .ic { --ic1: #FFC21A; --ic2: #FFC21A; --ic3: #FFFFFF; color: #FFFFFF; }
html[data-colori="contrasto"] :is(.eroe, .barra, .testata, .piede, .tp, .testa-dettaglio, .festa-banda) .tasto .ic { --ic1: #000; --ic2: #000; --ic3: #000; color: #000; }
html[data-colori="contrasto"] .torre-slot { opacity: 1; filter: grayscale(1) brightness(1.6) drop-shadow(0 0 0 #000); outline: 2px dashed #000; outline-offset: -6px; }
html[data-colori="contrasto"] .torre-slot.pieno { filter: none; outline: 0; }
/* scuro: l'icona di «Il mio modo» intera */
html[data-colori="scuro"] .modo-apri .ic { --ic1: #FFC21A; --ic2: #E59F00; --ic3: rgba(255, 255, 255, .7); }
/* le feste: testo bianco sempre leggibile anche sui colori chiari */
.festa-c, .festa-banda { background-image: linear-gradient(rgba(36, 21, 74, .52), rgba(36, 21, 74, .52)), linear-gradient(135deg, var(--f1), var(--f2)) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* colora: lo strumento scelto ha l'icona bianca */
[data-strumento][aria-pressed="true"] .ic { --ic1: #FFFFFF; --ic2: rgba(255, 255, 255, .6); --ic3: #FFFFFF; color: #FFFFFF; }
/* livelli nelle pagine dei mondi: 48 px */
.g-liv .tasto.piccolo { min-height: 48px; }
/* bandiere da colorare: anche cerchi e stelle hanno il contorno (Giappone, Palau, Bangladesh) */
.foglio .es-bandiera svg :is(circle, path, polygon, ellipse) { stroke: #1E2233; stroke-width: 1.5; }
/* scuro: i tasti degli obiettivi del piano */
html[data-colori="scuro"] .ob { background: var(--superficie-2); color: var(--testo); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
html[data-colori="scuro"] .ob[aria-pressed="true"] { background: #FFC21A; color: #24154A; }
.ob { min-height: 44px; }
/* Colora al telefono e sul tablet: colori e strumenti attaccati in basso, il disegno resta sopra */
@media (max-width: 900px) {
  .campo-c .attrezzi { position: sticky; bottom: max(8px, env(safe-area-inset-bottom, 0px)); z-index: 6; max-height: 44vh; overflow-y: auto; padding: 12px; gap: 10px; box-shadow: 0 -8px 30px rgba(36, 21, 74, .22); overscroll-behavior: contain; }
  .campo-c .c-tavolozza { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .campo-c .c-colore { flex: 0 0 64px; scroll-snap-align: start; }
}
/* le carte delle lezioni in fila, tutte uguali (anche quelle già fatte, con la spunta) */
.lez-carta { grid-template-rows: auto auto 1fr auto auto; align-content: start; } .lc-testa { min-height: 60px; }
/* feste e disegni: carte della stessa fila allineate */
.feste-griglia > *, .disegni > li, .gruppo-d .disegni > li { height: 100%; }
.festa-c { height: 100%; align-content: start; }
/* le schede col carattere per la dislessia: le parole non si spezzano */
.foglio, .foglio * { hyphens: manual; }
/* le carte delle feste: chiare, con la fascia dei colori della festa in alto (testo scuro, sempre leggibile) */
.festa-c { background: linear-gradient(120deg, var(--f1), var(--f2)) top / 100% 14px no-repeat, var(--superficie) !important; color: var(--testo); text-shadow: none; padding-top: 30px; box-shadow: 0 8px 24px rgba(36, 21, 74, .10); }
.festa-c span { color: #5A2FD6; } html[data-colori="scuro"] .festa-c span { color: #C9B8FF; } .festa-c small { color: var(--testo-2); }
html[data-colori="contrasto"] .festa-c { border: 3px solid #000; color: #000; } html[data-colori="contrasto"] .festa-c span { color: #000; }