/* ====================================================== Gravhold, l'aspetto
 *
 * Un foglio solo, scritto a mano, senza niente da compilare. E' lo stesso
 * criterio del resto del progetto: quello che si legge si aggiusta, e un sito
 * di dieci pagine non ha bisogno di una catena di montaggio per cambiare un
 * colore.
 *
 * L'aria e' quella dipinta: fondo scuro, illustrazioni grandi che fanno il
 * lavoro, tipografia pulita e pochissime cornici. Il dorato c'e' ma e' un
 * accento, non un rivestimento -- il rischio di questo genere e' l'oro
 * dappertutto, che dopo dieci secondi non si vede piu'.
 */

:root {
  /* I colori del legno e del bronzo: quelli dei siti dei vecchi giochi online,
     cornici calde intorno a un mondo che e' quello vero del gioco. */
  --fondo:     #0c0906;
  --fondo-2:   #140f0a;
  --pannello:  #1b140d;
  --pannello-2:#261c12;
  --bordo:     #3f2e1b;
  --bordo-vivo:#6b4f2c;
  --testo:     #efe6d3;
  --muto:      #b3a488;
  --oro:       #d4a04a;
  --oro-vivo:  #f2c877;
  --verde:     #6fcf7f;
  --rosso:     #e2695f;
  --tondo:     4px;
  --ombra:     0 10px 30px rgba(0,0,0,.55);
  --largo:     1180px;
}

* { box-sizing: border-box }

html, body { margin: 0; padding: 0 }

body {
  background: var(--fondo);
  color: var(--testo);
  font: 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .titolo {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  margin: 0 0 .5em;
}

a { color: var(--oro-vivo); text-decoration: none }
a:hover { color: #fff }

.dentro { max-width: var(--largo); margin: 0 auto; padding: 0 20px }

/* ------------------------------------------------------------- la testata */
header.alta {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,13,19,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
}
header.alta .dentro {
  display: flex; align-items: center; gap: 26px; height: 66px;
}
.marchio { display: flex; align-items: center; gap: 11px; flex-shrink: 0 }
.marchio svg { width: 30px; height: 30px; display: block }
.marchio b {
  font-family: 'Cinzel', serif; font-size: 21px; font-weight: 700;
  letter-spacing: .14em; color: var(--testo);
}
nav.vie { display: flex; gap: 4px; margin-left: 8px; flex: 1 }
nav.vie a {
  color: var(--muto); font-size: 14.5px; font-weight: 500;
  padding: 8px 13px; border-radius: 8px;
}
nav.vie a:hover { color: var(--testo); background: var(--pannello) }
nav.vie a.qui { color: var(--oro-vivo); background: rgba(212,160,74,.1) }
.in-testa { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }

/* ------------------------------------------------------------- i pulsanti */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 8px; border: 1px solid var(--bordo-vivo);
  background: var(--pannello-2); color: var(--testo);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.tasto:hover { background: #222a3d; color: #fff; border-color: #445270 }
.tasto.oro {
  background: linear-gradient(180deg, #e0ad55, #c1883a);
  border-color: #e8bc6f; color: #201803;
  box-shadow: 0 4px 16px rgba(212,160,74,.22);
}
.tasto.oro:hover { background: linear-gradient(180deg, #f0c072, #d09a45); color: #1a1302 }
.tasto.nudo { background: transparent; border-color: transparent; color: var(--muto) }
.tasto.nudo:hover { color: var(--testo); background: var(--pannello) }
.tasto.grande { padding: 14px 30px; font-size: 16px }
.tasto.pieno { width: 100%; }
.tasto.rosso { border-color: #5a2f2c; color: var(--rosso); background: rgba(226,105,95,.07) }
.tasto.rosso:hover { background: rgba(226,105,95,.15); color: #ff9c92 }
.tasto[disabled] { opacity: .45; cursor: not-allowed }

/* --------------------------------------------------------------- l'ingresso
 *
 * L'immagine grande e il titolo sopra. La sfumatura in basso non e' un
 * effetto: senza, il bordo dell'immagine taglia netto e si vede il rettangolo.
 * Con, il dipinto sprofonda nella pagina e il taglio non c'e' piu'. */
.ingresso { position: relative; min-height: 520px; display: flex; align-items: center }
.ingresso .sfondo {
  position: absolute; inset: 0; overflow: hidden;
}
.ingresso .sfondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50% }
.ingresso .sfondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,13,19,.55) 0%, rgba(10,13,19,.1) 35%, var(--fondo) 100%),
    linear-gradient(90deg, rgba(10,13,19,.92) 0%, rgba(10,13,19,.6) 45%, rgba(10,13,19,.15) 100%);
}
.ingresso .dentro { position: relative; padding-top: 70px; padding-bottom: 80px }
.ingresso h1 {
  font-size: clamp(38px, 6vw, 68px); letter-spacing: .04em; margin-bottom: .25em;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.ingresso .sotto {
  font-size: clamp(16px, 2vw, 20px); color: #cfd4de; max-width: 40ch;
  margin: 0 0 30px; text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.ingresso .tasti { display: flex; gap: 12px; flex-wrap: wrap }

/* la spia dello stato del mondo */
.spia {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 7px 14px 7px 12px; border-radius: 99px;
  background: rgba(10,13,19,.6); border: 1px solid var(--bordo-vivo);
  font-size: 13.5px; color: var(--muto); backdrop-filter: blur(6px);
}
.spia .luce {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 10px var(--verde);
}
.spia.spenta .luce { background: #6b7280; box-shadow: none }
.spia b { color: var(--testo); font-weight: 600 }

/* ----------------------------------------------------------------- sezioni */
section { padding: 62px 0 }
section.stretta { padding: 40px 0 }
.capo { display: flex; align-items: flex-end; justify-content: space-between;
        gap: 20px; margin-bottom: 26px; flex-wrap: wrap }
.capo h2 { font-size: 27px; margin: 0 }
.capo p  { margin: 4px 0 0; color: var(--muto); font-size: 15px }

/* ------------------------------------------------------------- i riquadri */
.riquadro {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--tondo); padding: 26px;
}
.riquadro.stretto { padding: 20px }

.griglia { display: grid; gap: 18px }
.griglia.due { grid-template-columns: repeat(2, 1fr) }
.griglia.tre { grid-template-columns: repeat(3, 1fr) }
.griglia.quattro { grid-template-columns: repeat(4, 1fr) }

/* --------------------------------------------------------------- notizie */
.notizia {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--tondo); overflow: hidden; display: flex; flex-direction: column;
  transition: .18s;
}
.notizia:hover { border-color: var(--bordo-vivo); transform: translateY(-2px) }
.notizia .figura { aspect-ratio: 16/9; background: var(--fondo-2); overflow: hidden }
.notizia .figura img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* I ritratti sono verticali e il riquadro della notizia e' largo: tagliando
     dal centro si ottiene un torace. Alzando il taglio si ottiene la faccia,
     che e' l'unica parte per cui uno guarda un ritratto. */
  object-position: 50% 14%;
}
.notizia .corpo { padding: 20px; flex: 1; display: flex; flex-direction: column }
.notizia h3 { font-size: 19px; margin-bottom: 8px }
.notizia h3 a { color: var(--testo) }
.notizia h3 a:hover { color: var(--oro-vivo) }
.notizia p { color: var(--muto); font-size: 14.5px; margin: 0 0 14px; flex: 1 }
.data { font-size: 12.5px; color: #6f798f; letter-spacing: .04em }
.bollo {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 5px;
  background: rgba(212,160,74,.13); color: var(--oro-vivo); margin-bottom: 11px;
}
/* L'etichetta del tipo si chiama tipo-*: con la classe nuda 'novita' prendeva
   tutta la carta delle notizie della home (cornice, corna, flex) e spariva. */
.bollo.aggiornamento, .bollo.tipo-aggiornamento { background: rgba(95,191,127,.12); color: var(--verde) }
.bollo.evento, .bollo.tipo-evento { background: rgba(140,130,235,.14); color: #a79bf0 }
.bollo.avviso, .bollo.tipo-avviso { background: rgba(226,105,95,.12); color: var(--rosso) }
.bollo.tipo-novita { background: rgba(255,106,26,.14); color: #ff9a4a }

/* -------------------------------------------------------------- vocazioni */
.strada {
  position: relative; border-radius: var(--tondo); overflow: hidden;
  border: 1px solid var(--bordo); background: var(--pannello);
  aspect-ratio: 4/5; display: flex; align-items: flex-end;
}
.strada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.strada .velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,19,0) 35%, rgba(10,13,19,.94) 88%);
}
.strada .dice { position: relative; padding: 20px; width: 100% }
.strada h3 { font-size: 20px; margin: 0 0 4px }
.strada p { margin: 0; font-size: 13.5px; color: #b9c0cf; line-height: 1.45 }

/* ------------------------------------------------------------- i moduli */
form.modulo { display: flex; flex-direction: column; gap: 16px }
label.campo { display: block }
label.campo > span {
  display: block; font-size: 13px; font-weight: 600; color: var(--muto);
  margin-bottom: 6px; letter-spacing: .02em;
}
/* Il numero c'era solo nei moduli dell'admin (i punti, i prezzi), e non era in
   questa lista: restava bianco di sistema con il testo scuro, cioe' non si
   leggeva quello che si scriveva. Tutti i campi in cui si scrive, una regola. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input:not([type]), select, textarea {
  color-scheme: dark;
  width: 100%; padding: 11px 13px; border-radius: 8px;
  background: var(--fondo-2); border: 1px solid var(--bordo);
  color: var(--testo); font: inherit; font-size: 15px; transition: .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--oro); background: #12161f;
  box-shadow: 0 0 0 3px rgba(212,160,74,.12);
}
input::placeholder { color: #5d6678 }
.aiuto { font-size: 12.5px; color: #6f798f; margin: 6px 0 0 }
label.spunta { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muto) }
label.spunta input { margin-top: 3px; accent-color: var(--oro) }

.male, .bene {
  border-radius: 8px; padding: 12px 15px; font-size: 14.5px;
  border: 1px solid; margin: 0 0 4px;
}
.male { background: rgba(226,105,95,.09); border-color: #55302c; color: #f0a49b }
.bene { background: rgba(95,191,127,.09); border-color: #2d5540; color: #9bdcb2 }

.stretto-mezzo { max-width: 460px; margin: 0 auto }

/* --------------------------------------------------------- i personaggi */
/* **Tre azioni su una riga non ci stanno, e non devono starci.**
   Con Gioca, Cancella e Metti in servizio accanto al nome, la colonna del nome
   si riduceva a una parola per riga: "Senza / strada / livello / 1". I bottoni
   vanno sotto, su una riga loro, e il nome si riprende tutta la larghezza --
   che e' anche l'ordine in cui si legge: prima chi e', poi cosa farci. */
.scheda-p {
  display: flex; gap: 14px 16px; align-items: center; padding: 14px;
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--tondo); flex-wrap: wrap;
}
.scheda-p .azioni {
  display: flex; gap: 8px; flex-wrap: wrap;
  flex: 1 0 100%; justify-content: flex-end;
}
.scheda-p .azioni .tasto { padding: 8px 14px; font-size: 13.5px }
/* Il personaggio in servizio si riconosce prima di leggere il bottone. */
.scheda-p:has(.gm) { border-color: rgba(212,160,74,.45);
                     background: linear-gradient(180deg, rgba(212,160,74,.06), transparent) var(--pannello) }
.scheda-p .faccia {
  width: 62px; height: 62px; border-radius: 8px; object-fit: cover;
  object-position: 50% 18%; flex-shrink: 0; border: 1px solid var(--bordo-vivo);
}
.scheda-p .chi { flex: 1 1 140px; min-width: 0 }
.scheda-p .chi b { font-family: 'Cinzel', serif; font-size: 17px; display: block }
.scheda-p .chi span { font-size: 13.5px; color: var(--muto) }
.puntino { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
           background: #566; margin-right: 6px; vertical-align: 1px }
.puntino.acceso { background: var(--verde); box-shadow: 0 0 8px var(--verde) }

/* la scelta della vocazione, in creazione */
.scelte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.scelte input { position: absolute; opacity: 0; pointer-events: none }
.scelte label {
  display: block; position: relative; border-radius: 9px; overflow: hidden;
  border: 2px solid var(--bordo); cursor: pointer; aspect-ratio: 4/5;
  transition: .15s;
}
.scelte label:hover { border-color: var(--bordo-vivo) }
.scelte input:checked + label { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212,160,74,.16) }
.scelte label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.scelte label .nome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px;
  background: linear-gradient(180deg, transparent, rgba(10,13,19,.95));
  font-family: 'Cinzel', serif; font-size: 14px; text-align: center; font-weight: 600;
}

/* ------------------------------------------------------------- le tabelle */
table.elenco { width: 100%; border-collapse: collapse; font-size: 14.5px }
table.elenco th {
  text-align: left; padding: 10px 12px; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muto); border-bottom: 1px solid var(--bordo);
  font-weight: 700;
}
table.elenco td { padding: 11px 12px; border-bottom: 1px solid rgba(35,43,61,.55) }
table.elenco tr:last-child td { border-bottom: none }
table.elenco tr:hover td { background: rgba(255,255,255,.017) }
table.elenco td.n { color: var(--muto); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap }
table.elenco td.destra, table.elenco th.destra { text-align: right; font-variant-numeric: tabular-nums }
.podio1 { color: var(--oro-vivo); font-weight: 700 }
.podio2 { color: #cfd6e4; font-weight: 700 }
.podio3 { color: #c08a5e; font-weight: 700 }

/* le linguette delle classifiche */
.linguette { display: flex; gap: 6px; flex-wrap: wrap }
.linguette a {
  padding: 7px 15px; border-radius: 7px; font-size: 14px; color: var(--muto);
  border: 1px solid transparent;
}
.linguette a:hover { color: var(--testo); background: var(--pannello) }
.linguette a.qui { background: var(--pannello-2); border-color: var(--bordo-vivo); color: var(--oro-vivo) }

/* --------------------------------------------------------------- la coda */
footer.bassa {
  border-top: 1px solid var(--bordo); background: var(--fondo-2);
  padding: 40px 0 50px; margin-top: 40px; color: var(--muto); font-size: 14px;
}
footer.bassa .dentro { display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap }
footer.bassa a { color: var(--muto) }
footer.bassa a:hover { color: var(--oro-vivo) }
footer.bassa .colonna b {
  display: block; color: var(--testo); font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 10px;
}
footer.bassa .colonna a { display: block; padding: 3px 0 }
.minuto { font-size: 12.5px; color: #5d6678; margin-top: 18px }

/* prosa: le pagine di sole parole */
.prosa { max-width: 70ch }
.prosa p { margin: 0 0 1.1em }
.prosa h2 { font-size: 22px; margin-top: 1.8em }
.prosa ul { padding-left: 1.2em; color: var(--muto) }
.prosa li { margin: .45em 0 }

/* ------------------------------------------------------------ lo schermo
 * piccolo. Mezzo mondo arriva da un telefono, e un gioco nel browser lo
 * guardano dal telefono anche quelli che poi ci giocano dal computer. */
@media (max-width: 860px) {
  .griglia.quattro { grid-template-columns: repeat(2, 1fr) }
  .griglia.tre { grid-template-columns: 1fr }
  .griglia.due { grid-template-columns: 1fr }
  .scelte { grid-template-columns: repeat(2, 1fr) }
  nav.vie { display: none }
  .ingresso { min-height: 420px }
  .ingresso .dentro { padding-top: 46px; padding-bottom: 46px }
  section { padding: 44px 0 }
  .riquadro { padding: 20px }
}
@media (max-width: 520px) {
  .griglia.quattro { grid-template-columns: 1fr }
  /* Il nome del conto non si nasconde: sul telefono e' l'unico modo di
     arrivare ai propri personaggi dall'alto della pagina. Si accorcia. */
  .in-testa .tasto.nudo { max-width: 92px; overflow: hidden; text-overflow: ellipsis;
                          display: block; padding: 10px 8px; line-height: 1.4 }
  header.alta .dentro { gap: 10px }
  .marchio b { font-size: 18px }
}

/* Il distintivo di chi comanda. Sta accanto a un nome, quindi e' piccolo: un
   game master si riconosce, non si annuncia. */
.gm {
  display: inline-block; margin-right: 7px; padding: 2px 6px; border-radius: 4px;
  font: 700 10px/1.35 'Inter', system-ui, sans-serif; letter-spacing: .1em;
  background: linear-gradient(180deg, #e0ad55, #bd8734); color: #1d1503;
  vertical-align: 1px;
}

/* ========================================================== lo zaino, letto da fuori
   Un albero di oggetti: un contenitore ha le sue cose dentro, e quelle possono
   averne altre. La riga verticale a sinistra e' quello che rende leggibile il
   secondo livello -- senza, uno zaino dentro uno zaino e' solo un elenco piu'
   lungo e non si capisce dove finisce cosa. */
ul.roba { list-style: none; margin: 0; padding: 0 }
ul.roba ul.roba {
  margin: 4px 0 4px 10px; padding-left: 12px;
  border-left: 1px solid var(--bordo);
}
ul.roba li {
  padding: 3px 0; font-size: 13.5px;
  display: grid; grid-template-columns: 42px 1fr; align-items: baseline;
  column-gap: 6px;
}
/* Il contenuto di un contenitore sta sotto, non accanto: prende tutta la
   larghezza invece di infilarsi nella seconda colonna. */
ul.roba li > ul.roba { grid-column: 1 / -1 }
ul.roba .quante {
  text-align: right; color: var(--oro-vivo);
  font: 600 12px/1.5 'Inter', system-ui, sans-serif;
}

/* **La figura che cammina.** Il foglio del gioco e' 4x4 fotogrammi da 64x80:
   si mostra la prima riga (verso sud) alta quanto il riquadro, centrata, e la
   si fa scorrere a scatti -- quattro passi in 0,76 s, il ritmo del gioco. */
.figura {
  --h: 62px; --fw: calc(var(--h) * .8);
  display: block; width: var(--h); height: var(--h); flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--bordo-vivo);
  background: var(--foglio) no-repeat, rgba(255,255,255,.03);
  background-size: calc(var(--fw) * 4) calc(var(--h) * 4), auto;
  background-position: calc((var(--h) - var(--fw)) / 2) 0, 0 0;
  animation: figura-passo .76s steps(4) infinite;
}
@keyframes figura-passo {
  to { background-position: calc((var(--h) - var(--fw)) / 2 - var(--fw) * 4) 0, 0 0 }
}
@media (prefers-reduced-motion: reduce) { .figura { animation: none } }


/* ======================================================== il vestito di Tibia
 *
 * **Il sito mostra il gioco, non delle illustrazioni.** Lo sfondo e' il mondo
 * vero, scurito; le figure che camminano sono i fogli del gioco presi da
 * play.gravhold.com; le foto sono fotogrammi della mappa che gira. Intorno, le
 * cornici di legno e bronzo dei siti dei vecchi giochi online: casse con la
 * testata, bottoni in rilievo, oro dove serve. */
body {
  background:
    linear-gradient(180deg, rgba(12,9,6,.72), rgba(12,9,6,.94) 60%, #0c0906),
    url('/immagini/mondo/fondo.webp') center top / cover fixed,
    #0c0906;
}
header.alta {
  background: linear-gradient(180deg, #2a1d11, #17100a);
  border-bottom: 2px solid #6b4f2c;
  box-shadow: 0 2px 0 #0a0704, 0 8px 24px rgba(0,0,0,.5);
  backdrop-filter: none;
}
nav.vie a { font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .04em; border-radius: 3px }
nav.vie a:hover { background: rgba(212,160,74,.08) }
nav.vie a.qui { background: linear-gradient(180deg, rgba(212,160,74,.2), rgba(212,160,74,.06));
                box-shadow: inset 0 0 0 1px rgba(212,160,74,.35) }
.tasto { border-radius: 3px; border-color: #5c4427;
         background: linear-gradient(180deg, #3a2a19, #24190f); color: var(--testo);
         box-shadow: inset 0 1px 0 rgba(255,220,160,.12), 0 1px 0 #000 }
.tasto:hover { background: linear-gradient(180deg, #4a3520, #2d2013); border-color: #8a6a3a; color: #fff }
.tasto.oro { border-color: #f1c67a; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 14px rgba(212,160,74,.25) }
.tasto.piccolo { padding: 6px 13px; font-size: 13px }

/* la cassa: testata scura, bordo di bronzo, due chiodi agli angoli */
.cassa {
  position: relative; background: linear-gradient(180deg, rgba(30,22,14,.96), rgba(20,15,10,.96));
  border: 1px solid #6b4f2c; border-radius: 4px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,210,140,.05), var(--ombra);
}
.cassa::before, .cassa::after {
  content: ''; position: absolute; top: -5px; width: 9px; height: 9px; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #ffe3a3, #b07a2c 60%, #4a2f10);
  transform: rotate(45deg); box-shadow: 0 0 0 1px #000;
}
.cassa::before { left: -5px } .cassa::after { right: -5px }
.cassa > .testa {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid #6b4f2c;
  background: linear-gradient(180deg, #5a2c17 0%, #3b1b0d 55%, #2c140a 100%);
  box-shadow: inset 0 1px 0 rgba(255,200,140,.15);
}
.cassa > .testa h2 {
  margin: 0; font-size: 18px; color: #f5d99b; letter-spacing: .07em;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(242,200,119,.25);
}
.cassa > .testa h2::before { content: '\25C6'; color: #d4a04a; font-size: 11px; margin-right: 10px; vertical-align: 3px }
.cassa > .pancia { padding: 22px 22px 24px }
.sotto-testa { margin: 0 0 18px; color: var(--muto); font-size: 14.5px }
.punto { background: rgba(0,0,0,.18); border: 1px solid var(--bordo); border-radius: 3px; padding: 18px }
.punto h3 { font-size: 16.5px; color: var(--oro-vivo); margin-bottom: 8px }
.punto p { margin: 0; color: var(--muto); font-size: 14.5px }
.riquadro { border-color: #4a3620; background: linear-gradient(180deg, #1e160e, #17110b) }
.notizia { border-color: #4a3620; background: linear-gradient(180deg, #21180f, #18120b) }

/* -------------------------------------------------------- le figure vive */
.sprite {
  --s: 1; display: inline-block; flex-shrink: 0;
  width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s));
  background-image: var(--img); background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--s) * 4) calc(var(--h) * var(--s) * 4);
  background-position-x: 0;
  background-position-y: calc(var(--h) * var(--s) * var(--r) * -1);
  animation: sprite-passo .76s steps(4) infinite;
}
@keyframes sprite-passo { to { background-position-x: calc(var(--w) * var(--s) * -4) } }
@keyframes sprite-gira { to { background-position-y: calc(var(--h) * var(--s) * -4) } }

/* l'ingresso: il mondo vero, che scorre piano */
.ingresso { min-height: 600px; overflow: hidden; border-bottom: 2px solid #6b4f2c }
.ingresso .sfondo img { object-position: 50% 40%; animation: panoramica 60s ease-in-out infinite alternate }
@keyframes panoramica { from { transform: scale(1.08) translateX(-2%) } to { transform: scale(1.08) translateX(2%) } }
.ingresso .sfondo::after {
  background:
    linear-gradient(180deg, rgba(12,9,6,.35) 0%, rgba(12,9,6,0) 30%, rgba(12,9,6,.15) 70%, rgba(12,9,6,.9) 100%),
    linear-gradient(90deg, rgba(12,9,6,.93) 0%, rgba(12,9,6,.62) 42%, rgba(12,9,6,0) 75%);
}
.ingresso h1 { color: #f5d99b; text-shadow: 0 2px 0 #000, 0 0 30px rgba(242,200,119,.25) }
.ingresso .dentro { padding-bottom: 150px }
.effetti { position: absolute; inset: 0; pointer-events: none }
.botto {
  position: absolute; width: 128px; height: 128px; margin: -64px 0 0 -64px;
  background: var(--img) no-repeat 0 0 / 512px 128px;
  animation: botto .62s steps(4) forwards, svanisce .9s ease-out forwards;
}
@keyframes botto { to { background-position-x: -512px } }
@keyframes svanisce { 0%, 60% { opacity: 1 } 100% { opacity: 0 } }

.sfilata { position: absolute; left: 0; right: 0; bottom: 6px; height: 110px; pointer-events: none }
.passante {
  position: absolute; bottom: 0; left: 0; display: flex; align-items: flex-end;
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.45));
  animation: attraversa var(--dur) linear var(--rit) infinite;
}
@keyframes attraversa { from { transform: translateX(-140px) } to { transform: translateX(calc(100vw + 40px)) } }

/* le foto del mondo */
.scorci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.scorcio { position: relative; display: block; border: 1px solid #6b4f2c; border-radius: 3px;
           overflow: hidden; background: #000; box-shadow: 0 0 0 1px #000 }
.scorcio img { display: block; width: 100%; height: auto; aspect-ratio: 640/370; object-fit: cover;
               transition: transform .5s ease }
.scorcio:hover img { transform: scale(1.06) }
.scorcio span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
                background: linear-gradient(180deg, transparent, rgba(8,6,4,.92));
                color: var(--muto); font-size: 13px; line-height: 1.4 }
.scorcio span b { display: block; color: var(--oro-vivo); font-family: 'Cinzel', serif; font-size: 15px }

/* gli abitanti, con quello che dicono */
.abitanti { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 22px }
.abitante { display: flex; flex-direction: column; align-items: center; text-align: center;
            background: rgba(0,0,0,.2); border: 1px solid var(--bordo); border-radius: 3px; padding: 12px 8px 10px }
.abitante q { quotes: '\201C' '\201D'; font-size: 12.5px; line-height: 1.35; color: #e9dcc0; font-style: italic;
              background: #2a1f14; border: 1px solid #5c4427; border-radius: 6px; padding: 7px 9px;
              position: relative; margin-bottom: 8px; display: block; width: 100% }
.abitante q::after { content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -5px;
                     border: 5px solid transparent; border-bottom: 0; border-top-color: #5c4427 }
.abitante b { font-family: 'Cinzel', serif; font-size: 14px; color: var(--oro-vivo); margin-top: 2px }

/* le quattro strade, vive */
.strada.viva { aspect-ratio: auto; display: block; border-color: #6b4f2c;
               background: linear-gradient(180deg, #221810, #150f09) }
.palco { position: relative; display: flex; align-items: flex-end; justify-content: center;
         height: 210px; overflow: hidden;
         background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(0,0,0,.55), transparent 70%),
                     radial-gradient(ellipse at 50% 60%, rgba(212,160,74,.14), transparent 65%); }
.palco .sprite { position: relative; z-index: 1; margin-bottom: 6px }
.lampo { position: absolute; left: 50%; bottom: 10px; width: 128px; height: 128px; margin-left: -64px;
         background: var(--img) no-repeat 0 0 / 512px 128px; opacity: .55; z-index: 0;
         animation: botto .8s steps(4) infinite }
.strada.viva:hover .sprite { animation: sprite-passo .45s steps(4) infinite, sprite-gira 2.4s steps(4) infinite }
.strada.viva:hover .lampo { opacity: .9 }
.strada.viva .dice { padding: 14px 16px 18px; border-top: 1px solid var(--bordo) }
.strada.viva h3 { color: var(--oro-vivo) }

/* il bestiario */
.bestie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.bestia { display: flex; flex-direction: column; align-items: center; text-align: center;
          background: rgba(0,0,0,.22); border: 1px solid var(--bordo); border-radius: 3px; padding: 0 8px 12px;
          transition: border-color .15s, transform .15s }
.bestia:hover { border-color: #8a6a3a; transform: translateY(-2px) }
.bestia:hover .sprite { animation: sprite-passo .45s steps(4) infinite, sprite-gira 2.4s steps(4) infinite }
.bestia .palco { height: 118px; width: 100%; background: radial-gradient(ellipse 45% 14% at 50% 86%, rgba(0,0,0,.6), transparent 70%) }
.bestia b { font-family: 'Cinzel', serif; font-size: 14.5px; color: var(--testo) }
.bestia .numeri { font-size: 12.5px; color: var(--muto); font-variant-numeric: tabular-nums }
.elemento { margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
            padding: 2px 8px; border-radius: 3px; background: rgba(255,255,255,.06); color: #d8cdb5 }
.el-fuoco { background: rgba(226,105,60,.16); color: #ff9a6a }
.el-ghiaccio { background: rgba(110,190,240,.14); color: #9fd8ff }
.el-veleno { background: rgba(110,200,90,.14); color: #9fe08a }
.el-energia { background: rgba(170,120,255,.16); color: #c7a8ff }
.el-morte { background: rgba(150,120,160,.18); color: #cdb3d6 }
.el-sacro { background: rgba(240,210,120,.16); color: #f5dc8a }
.el-terra { background: rgba(160,120,70,.2); color: #d9b27a }
.el-sabbia { background: rgba(220,190,120,.16); color: #ead19a }

/* la scelta della strada, in creazione: le figure al posto dei quadri */
.scelte .palco { height: auto; background: radial-gradient(ellipse at 50% 60%, rgba(212,160,74,.14), transparent 65%) }

@media (max-width: 860px) {
  .scorci { grid-template-columns: repeat(2, 1fr) }
  .ingresso { min-height: 520px }
  .ingresso .dentro { padding-bottom: 130px }
  .cassa > .pancia { padding: 16px }
}
@media (max-width: 520px) {
  .scorci { grid-template-columns: 1fr }
  .cassa > .testa { flex-wrap: wrap }
}
@media (prefers-reduced-motion: reduce) {
  .sprite, .passante, .lampo, .ingresso .sfondo img { animation: none !important }
  .sfilata { display: none }
}

/* La scheda della notizia ha un riquadro che si chiama `figura`, come la figura
   che cammina: senza questa riga l'immagine della notizia diventava un
   francobollo da 62 pixel. */
.notizia .figura { width: auto; height: auto; aspect-ratio: 16/9; border: 0; border-radius: 0;
                   background: #000; animation: none; border-bottom: 1px solid var(--bordo) }

@media (max-width: 520px) {
  .in-testa { gap: 6px }
  .in-testa .tasto { padding: 8px 10px; font-size: 13px }
  .marchio b { font-size: 16px; letter-spacing: .1em }
  .ingresso .sfondo::after {
    background: linear-gradient(180deg, rgba(12,9,6,.7) 0%, rgba(12,9,6,.62) 60%, rgba(12,9,6,.92) 100%);
  }
}

/* Con Cinzel e con le Creature la fila delle voci e' piu' larga: sotto i 1120
   pixel si stringe, sotto i 960 si nasconde come sul telefono -- sennno' spinge
   fuori dallo schermo il bottone per creare il conto. */
/* Con Guilds e Shop le voci sono otto (nove per l'admin): la fila si stringe
   prima, e sotto i 1180 pixel passa al menu, invece di spingere la pagina
   oltre il bordo e farla scorrere di lato. */
@media (max-width: 1400px) {
  header.alta .dentro { gap: 14px }
  nav.vie { margin-left: 0; gap: 2px }
  nav.vie a { padding: 7px 8px; font-size: 13px; letter-spacing: .02em }
}
@media (max-width: 1180px) { nav.vie { display: none } }

/* ------------------------------------------ gli incantesimi dell'ingresso
   I fogli sono fotogrammi registrati dal gioco (vedi vivo.js). Il fulmine e la
   colonna di luce si sommano allo sfondo invece di coprirlo, come nel gioco,
   dove si disegnano con 'lighter'. */
.passante.bersaglio { z-index: 1 }
.magia { position: absolute; pointer-events: none; z-index: 3; background-repeat: no-repeat;
         background-position: 0 0; animation-name: magia; animation-fill-mode: forwards }
.magia.luce { mix-blend-mode: screen }
@keyframes magia { to { background-position-x: var(--fine) } }
.passante.colpito .sprite { filter: brightness(2.4) saturate(.4) }
.danno { position: absolute; left: 50%; top: -6px; z-index: 4; pointer-events: none;
         font: 800 22px/1 'Inter', system-ui, sans-serif; text-shadow: 0 2px 0 #000, 0 0 6px #000;
         animation: danno 1.05s ease-out forwards }
@keyframes danno { from { transform: translate(-50%, 0); opacity: 1 }
                   to { transform: translate(-50%, -46px); opacity: 0 } }
.ingresso.scossa .sfondo { animation: scossa .32s linear }
@keyframes scossa { 20% { transform: translate(-5px, 3px) } 40% { transform: translate(4px, -3px) }
                    60% { transform: translate(-3px, 2px) } 80% { transform: translate(2px, -1px) } }

/* ------------------------------------------------------ il menu del telefono
   Sotto i 960 pixel la fila delle voci sparisce, e con lei spariva l'unica
   strada per il pannello admin. Un <details>: si apre e si chiude senza una
   riga di codice, e funziona anche con lo script bloccato. */
.menu-telefono { display: none; position: static; margin-left: auto }
.menu-telefono summary { list-style: none; cursor: pointer; width: 40px; height: 36px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 9px;
  border: 1px solid #5c4427; border-radius: 3px; background: linear-gradient(180deg, #3a2a19, #24190f) }
.menu-telefono summary::-webkit-details-marker { display: none }
.menu-telefono summary span { display: block; height: 2px; background: var(--oro-vivo); border-radius: 2px }
.menu-telefono[open] summary { border-color: var(--oro) }
.menu-telefono nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  display: flex; flex-direction: column; padding: 8px 12px 12px;
  background: linear-gradient(180deg, #221810, #150f09); border-bottom: 2px solid #6b4f2c;
  box-shadow: 0 14px 30px rgba(0,0,0,.6) }
.menu-telefono nav a { padding: 12px 10px; border-bottom: 1px solid var(--bordo); color: var(--testo);
  font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .04em }
.menu-telefono nav a:last-child { border-bottom: 0 }
.menu-telefono nav a.qui { color: var(--oro-vivo) }
.menu-telefono nav a.admin { color: var(--oro-vivo) }
@media (max-width: 1180px) {
  .menu-telefono { display: block }
  header.alta .dentro { position: relative }
}
@media (max-width: 520px) {
  /* il nome del conto sta nel menu: in testa resta solo il bottone che serve */
  .in-testa .tasto.nudo { display: none }
}
/* Sul telefono Safari non somma la luce dentro un gruppo con un filtro, e la
   colonna e il fulmine sparivano: si disegnano normali, sono gia' trasparenti. */
.magia.luce { mix-blend-mode: normal }
@media (max-width: 640px) {
  /* stretto: la meta' dei passanti, cosi' la distanza fra loro raddoppia */
  .sfilata .passante:nth-child(even) { display: none }
}

/* La moneta dei Gravhold Points accanto al numero, e la domanda prima di
   comprare. */
.gp { display: inline-flex; align-items: center; gap: .32em; white-space: nowrap; vertical-align: -0.18em }
.gp img { width: 1.15em; height: 1.15em; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) }
.gp.grande img { width: 1.25em; height: 1.25em }
.conferma-acquisto { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 22px;
  border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212,160,74,.14) }

/* ===================================================== la cornice (ottobre 2026)
   Il sito nella forma dei vecchi siti dei giochi online: menu a sinistra, barra
   in alto, contenuto al centro, colonna destra con il mondo com'e' adesso. Il
   telaio sta sopra il mondo vero del gioco, scurito, che si vede ai lati.
   Tutto quello che segue vince sulle regole di prima perche' viene dopo. */
:root {
  --telaio-bordo: #33291a;
  --pietra:       #090c11;
  --pietra-2:     #0e131b;
  --oro-chiaro:   #f3e2b8;
}
body.cornice {
  background: #05070a url('/immagini/vetrina/fondo.webp') center top / cover fixed;
}
body.cornice::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(5,7,10,.62), rgba(5,7,10,.9));
}
.telaio {
  position: relative; z-index: 1; max-width: 1680px; margin: 16px auto;
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "sx barra barra" "sx centro dx" "sx piede piede";
  background: var(--pietra); border: 1px solid var(--telaio-bordo);
  box-shadow: 0 0 0 1px #000, 0 30px 90px rgba(0,0,0,.85);
}

/* ------------------------------------------------------------- il menu */
.lato-sx {
  grid-area: sx; position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0c1016, #07090d);
  border-right: 1px solid var(--telaio-bordo); overflow: hidden;
}
.lato-sx .logo {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 14px 20px; border-bottom: 1px solid #1d1a14;
}
.lato-sx .logo svg { width: 78px; height: 78px; filter: drop-shadow(0 6px 14px rgba(212,160,74,.28)) }
.lato-sx .logo b {
  font-family: 'Cinzel', serif; font-size: 27px; font-weight: 700; letter-spacing: .14em;
  color: var(--oro-chiaro); margin-top: 8px; text-shadow: 0 2px 0 #000, 0 0 22px rgba(212,160,74,.3);
}
.lato-sx .logo small {
  font-family: 'Cinzel', serif; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--oro); margin-top: 2px;
}
.menu { display: flex; flex-direction: column; padding: 12px 0; position: relative; z-index: 2 }
.menu a {
  display: flex; align-items: center; gap: 14px; padding: 10px 24px;
  color: #d9cfb9; font-family: 'Cinzel', serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.menu a .ico { width: 22px; height: 22px; color: #c9ad72; flex: 0 0 auto }
.menu a:hover { background: rgba(212,160,74,.07); color: #fff }
.menu a.qui {
  color: #fff; border-left-color: var(--oro);
  background: linear-gradient(90deg, rgba(212,160,74,.2), rgba(212,160,74,0) 85%);
}
.menu a.qui .ico { color: var(--oro-vivo) }
.menu hr { border: 0; height: 1px; margin: 10px 22px;
  background: linear-gradient(90deg, transparent, #4b3c22, transparent) }
.motto-verticale {
  margin-top: auto; position: relative; z-index: 2; padding: 30px 26px 26px;
  font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .45em; line-height: 1.75;
  text-transform: uppercase; color: #e4cf9c; text-shadow: 0 2px 6px #000, 0 0 2px #000;
}
.scorcio-lato {
  position: absolute; left: 0; right: 0; bottom: 0; height: 360px; z-index: 1;
  background: url('/immagini/vetrina/lato.webp') center bottom / cover;
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%);
  opacity: .8;
}

/* ------------------------------------------------------------- la barra */
.barra {
  grid-area: barra; position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 22px;
  background: linear-gradient(180deg, #10151d, #0a0d12); border-bottom: 1px solid var(--telaio-bordo);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.barra .vie { display: flex; gap: 2px; flex: 1; margin: 0 }
.barra .vie a {
  font-family: 'Cinzel', serif; font-size: 13.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #e5dac2; padding: 8px 14px; border-radius: 3px; background: none;
}
.barra .vie a:hover, .barra .vie a.qui { color: var(--oro-vivo); background: rgba(212,160,74,.08) }
.in-linea { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e4ecdf; white-space: nowrap }
.in-linea i { width: 9px; height: 9px; border-radius: 50%; background: #3ad46b; box-shadow: 0 0 9px #3ad46b }
.in-linea i.spenta { background: #c9473d; box-shadow: 0 0 9px #c9473d }
.barra .in-testa { gap: 10px }
.barra .in-testa .tasto { padding: 9px 20px; font-family: 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; font-size: 13.5px }
.barra .in-testa .tasto.nudo { border: 1px solid #5a4727; background: rgba(0,0,0,.25) }
.barra .logo-piccolo { display: none; align-items: center; gap: 9px }
.barra .logo-piccolo svg { width: 30px; height: 30px }
.barra .logo-piccolo b { font-family: 'Cinzel', serif; font-size: 18px; letter-spacing: .12em; color: var(--oro-chiaro) }
.barra .menu-telefono { display: none; margin: 0 }
.barra .menu-telefono nav { display: flex; flex-direction: column; padding: 8px 0; background: #0b0f15;
  border: 1px solid var(--telaio-bordo); box-shadow: 0 18px 40px rgba(0,0,0,.6) }
.barra .menu-telefono nav a { display: flex; align-items: center; gap: 12px; padding: 11px 18px;
  font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: #ddd2bb }
.barra .menu-telefono nav a .ico { width: 20px; height: 20px; color: #c9ad72 }
.barra .menu-telefono nav a.qui { color: var(--oro-vivo) }

/* ------------------------------------------------------------- il centro */
.centro { grid-area: centro; min-width: 0; padding-bottom: 26px;
  background: linear-gradient(180deg, #0b0e14, #080a0f) }
.centro section { padding: 30px 0 }
.centro section.stretta { padding: 24px 0 }
.centro .dentro { max-width: none; padding: 0 28px }
.centro .capo h2, .centro h2 { letter-spacing: .06em }
.riquadro { background: linear-gradient(180deg, #10151d, #0b0f15); border: 1px solid #33291a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.35) }

/* ------------------------------------------------------------- la colonna destra */
.lato-dx { grid-area: dx; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 26px;
  background: #080b10; border-left: 1px solid var(--telaio-bordo); min-width: 0 }
.pezzo { position: relative; padding: 16px; background: linear-gradient(180deg, #10151d, #0a0e14);
  border: 1px solid #3d311d; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.4) }
.pezzo::before, .pezzo::after { content: ''; position: absolute; width: 10px; height: 10px;
  border: 2px solid var(--oro); opacity: .7 }
.pezzo::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0 }
.pezzo::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0 }
.pezzo h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--oro-chiaro) }
.pezzo h3 .ico { width: 20px; height: 20px; color: var(--oro) }
.pezzo .tasto.pieno { width: 100%; justify-content: center; margin-top: 12px; font-family: 'Cinzel', serif;
  letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; border: 1px solid #5a4727; background: rgba(0,0,0,.3) }
.pezzo .tasto .ico { width: 16px; height: 16px; vertical-align: -3px }
.spia-grande { display: flex; align-items: center; gap: 9px; padding-bottom: 12px;
  border-bottom: 1px solid #1f2229; color: #3ad46b; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase }
.spia-grande i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor }
.spia-grande.spenta { color: #e2695f }
.mondo-riga { display: flex; align-items: center; gap: 14px; padding: 14px 0 10px }
.mondo-riga .luce { width: 14px; height: 14px; border-radius: 50%; background: #3ad46b; box-shadow: 0 0 12px #3ad46b; flex: 0 0 auto }
.mondo-riga .luce.spenta { background: #c9473d; box-shadow: 0 0 12px #c9473d }
.mondo-riga b { color: #f1e8d4 } .mondo-riga small { color: var(--muto) }
.mondo-riga span { color: var(--muto); font-size: 14px }
.mini-numeri { display: flex; justify-content: space-between; font-size: 13px; color: var(--muto);
  border-top: 1px solid #1f2229; padding-top: 10px }
.mini-numeri b { color: var(--oro-chiaro) }
.palco-creatura { position: relative; height: 160px; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; border: 1px solid #3d311d; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(10,6,6,.15), rgba(10,6,6,.75)), url('/immagini/vetrina/creatura.webp') center / cover }
.palco-creatura .sprite { margin-bottom: 8px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.7)) }
.nome-creatura { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 700; color: #ff6b4f;
  letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(255,80,50,.35) }
.dati-creatura { color: var(--muto); font-size: 13.5px }
.schede { position: relative; display: flex; flex-wrap: wrap }
.schede input { position: absolute; opacity: 0; pointer-events: none }
.schede label { flex: 1 1 0; display: block; text-align: center; padding: 8px 0; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muto); border: 1px solid #2c2618; background: rgba(0,0,0,.25); margin-right: -1px }
.schede input:checked + label { color: var(--oro-chiaro); background: linear-gradient(180deg, #1d1810, #121009);
  border-color: #5a4727; box-shadow: inset 0 -2px 0 var(--oro) }
.schede input:focus-visible + label { outline: 2px solid var(--oro) }
.schede .pannello { display: none; flex-basis: 100%; list-style: none; margin: 10px 0 0; padding: 0 }
#cima-l:checked ~ .l, #cima-g:checked ~ .g, #cima-p:checked ~ .p { display: block }
.schede li { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.04) }
.schede li .n { width: 24px; color: var(--muto); font-variant-numeric: tabular-nums }
.schede li a { flex: 1; min-width: 0; color: #e8dec8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.schede li a:hover { color: var(--oro-vivo) }
.schede li b { color: var(--oro-chiaro); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap }
.schede li b small { color: var(--muto); font-weight: 400 }
.schede li.vuoto { color: var(--muto); font-size: 13px; display: block }
.schede li .sprite { margin: -8px -4px -6px }
.sprite.fermo { animation: none }

/* ------------------------------------------------------------- il piede */
.piede { grid-area: piede; display: flex; align-items: center; gap: 24px 36px; flex-wrap: wrap;
  padding: 22px 28px; background: #06080b; border-top: 1px solid var(--telaio-bordo) }
.logo-piede { display: flex; align-items: center; gap: 10px }
.logo-piede svg { width: 38px; height: 38px }
.logo-piede b { font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: .12em; color: var(--oro-chiaro) }
.logo-piede small { display: none }
.piede nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; flex: 1 }
.piede nav a, .piede button.link { color: #b8ad95; font-size: 13.5px }
.piede nav a:hover, .piede button.link:hover { color: var(--oro-vivo) }
.piede nav form { display: inline; margin: 0 }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer }
.firma { color: #8a806b; font-size: 13px; text-align: right; line-height: 1.5 }
.firma small { color: #625a4a }

/* ------------------------------------------------------------- piu' stretto */
@media (max-width: 1440px) {
  .telaio { grid-template-columns: 230px minmax(0, 1fr) 300px; margin: 0 auto }
  .barra .vie a { padding: 8px 9px; font-size: 12.5px }
}
@media (max-width: 1280px) {
  .telaio { grid-template-columns: 230px minmax(0, 1fr);
    grid-template-areas: "sx barra" "sx centro" "sx dx" "sx piede" }
  .lato-dx { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start; border-left: 0; border-top: 1px solid var(--telaio-bordo) }
  .barra .vie a:nth-child(n+4) { display: none }
}
@media (max-width: 960px) {
  .telaio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "centro" "dx" "piede"; border: 0 }
  .lato-sx { display: none }
  .barra { padding: 0 12px; gap: 12px }
  .barra .vie { display: none }
  .barra .menu-telefono { display: block }
  .barra .logo-piccolo { display: flex; flex: 1 }
  .centro .dentro { padding: 0 16px }
  .piede { flex-direction: column; text-align: center }
  .firma { text-align: center }
}
@media (max-width: 560px) {
  .in-linea { display: none }
  .barra .in-testa .tasto.nudo { display: none }
  .barra .logo-piccolo b { font-size: 15px }
}

/* ------------------------------------------------------------- la home */
.ingresso.eroe { min-height: 600px; border-bottom: 1px solid var(--telaio-bordo); text-align: center;
  justify-content: center }
.ingresso.eroe .sfondo img { object-position: 50% 45%; image-rendering: pixelated;
  animation: panoramica 50s ease-in-out infinite alternate }
.ingresso.eroe .sfondo::after { background:
  radial-gradient(ellipse 60% 55% at 50% 45%, rgba(6,8,12,.72), rgba(6,8,12,.25) 75%),
  linear-gradient(180deg, rgba(6,8,12,.35) 0%, rgba(6,8,12,0) 25%, rgba(6,8,12,.15) 60%, rgba(6,8,12,.9) 100%) }
.ingresso.eroe .dentro { padding: 70px 20px 170px; display: flex; flex-direction: column; align-items: center }
.ingresso.eroe h1 { font-size: clamp(36px, 5.2vw, 70px); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.08; color: #f7e9c6; margin: 0 0 14px;
  text-shadow: 0 3px 0 #000, 0 0 2px #000, 0 0 40px rgba(0,0,0,.8), 0 0 60px rgba(242,200,119,.25) }
.ingresso.eroe .motto { font-family: 'Cinzel', serif; font-size: 16px; letter-spacing: .3em; text-transform: uppercase;
  color: #f1e3c0; margin: 0 0 26px; text-shadow: 0 2px 4px #000, 0 0 2px #000 }
.ingresso.eroe .motto i { font-style: normal; color: var(--oro); margin: 0 .3em }
.tasto.gigante { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 16px 42px; border: 2px solid #8a6420;
  box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35) }
.tasto .ico { width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-left: .3em }
.cifre { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; justify-content: center }
.cifre span { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  column-gap: 10px; text-align: left; align-items: center; text-shadow: 0 2px 4px #000 }
.cifre .ico { grid-row: span 2; width: 34px; height: 34px; color: #f1e3c0; filter: drop-shadow(0 2px 3px #000) }
.cifre b { font-size: 21px; color: #fff; line-height: 1.1 }
.cifre small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #e6dcc6 }
.corsivo { position: absolute; right: 4%; bottom: 150px; transform: rotate(-10deg); z-index: 2;
  font-family: 'Caveat', cursive; font-size: 30px; line-height: 1.05; color: #f3e6c8;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,.8); pointer-events: none }
.sez { padding: 30px 0 }
.testata { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px;
  flex-wrap: wrap }
.testata h2 { margin: 0; font-size: 24px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-chiaro) }
.testata a, .testata > span { font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oro-vivo) }
.testata > span { color: var(--muto); text-transform: none; letter-spacing: .02em; font-family: inherit; font-size: 14px }
.testata a .ico { width: 15px; height: 15px; vertical-align: -3px }
.novita { display: flex; flex-direction: column; background: linear-gradient(180deg, #10151d, #0b0f15);
  border: 1px solid #3d311d; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.4); overflow: hidden }
.novita .immagine { display: block; aspect-ratio: 16 / 8; overflow: hidden; border-bottom: 1px solid #3d311d }
.novita .immagine img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .5s }
.novita:hover .immagine img { transform: scale(1.05) }
.novita .corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 }
.novita .data { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muto) }
.novita h3 { font-size: 19px; margin: 4px 0 6px } .novita h3 a { color: #f3ead6 }
.novita p { color: #b9ae96; font-size: 14px; margin: 0 0 12px; flex: 1 }
.novita .leggi { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-vivo) }
.novita .leggi .ico { width: 15px; height: 15px; vertical-align: -3px; margin-left: 4px }
.fascia { position: relative; margin: 10px 0; padding: 34px 28px 30px; text-align: center; overflow: hidden;
  border-top: 1px solid var(--telaio-bordo); border-bottom: 1px solid var(--telaio-bordo);
  background: linear-gradient(180deg, rgba(8,10,14,.82), rgba(8,10,14,.55) 40%, rgba(8,10,14,.85)),
              url('/immagini/vetrina/fascia.webp') center 40% / cover }
.fascia h2 { font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: #f4e6c4; margin: 0 0 22px;
  text-shadow: 0 2px 4px #000 }
.fascia .punti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.fascia .punti div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-shadow: 0 2px 4px #000 }
.fascia .punti .ico { width: 42px; height: 42px; color: var(--oro-vivo); filter: drop-shadow(0 2px 4px #000) }
.fascia .punti b { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff }
.fascia .punti span { font-size: 13px; color: #e1d6be; max-width: 22ch }
@media (max-width: 1500px) { .corsivo { display: none } }
@media (max-width: 960px) {
  .fascia .punti { grid-template-columns: repeat(2, 1fr) }
  .ingresso.eroe { min-height: 520px }
}
@media (max-width: 560px) {
  .fascia .punti { grid-template-columns: 1fr }
  .cifre { gap: 18px }
  .tasto.gigante { font-size: 18px; padding: 13px 26px }
}

/* ------------------------------------------------------------- i pezzi di prima, nel colore nuovo
   Le casse, le carte, le schede e i bottoni che c'erano gia': stessa forma,
   pietra scura e oro al posto del legno. */
.cassa { background: linear-gradient(180deg, #10151d, #0a0e14); border-color: #3d311d; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 10px 26px rgba(0,0,0,.4) }
.cassa > .testa { background: linear-gradient(180deg, #161c26, #0e131b); border-bottom-color: #3d311d; box-shadow: none }
.cassa > .testa h2 { color: var(--oro-chiaro); text-transform: uppercase; letter-spacing: .1em; font-size: 16px; text-shadow: 0 1px 0 #000 }
.cassa::before, .cassa::after { width: 8px; height: 8px }
.centro .cassa { margin-left: 28px; margin-right: 28px }
.notizia, .riquadro, .strada.viva, .bestia, .punto, .scheda-p {
  background: linear-gradient(180deg, #10151d, #0b0f15); border-color: #33291a }
.strada.viva:hover, .bestia:hover, .notizia:hover { border-color: #6b5530 }
.palco { background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(0,0,0,.6), transparent 70%),
                     radial-gradient(ellipse at 50% 60%, rgba(120,150,200,.08), transparent 65%) }
.tasto { background: linear-gradient(180deg, #1a202b, #10141b); border-color: #4a3c24 }
.tasto:hover { background: linear-gradient(180deg, #232a37, #151a23); border-color: #8a6a3a }
.tasto.oro { background: linear-gradient(180deg, #f4d488, #d6a64e 55%, #b07f30); color: #1a1206; border-color: #f1c67a }
.tasto.oro:hover { background: linear-gradient(180deg, #ffe2a0, #e2b25a 55%, #bf8b37); color: #000 }
.tasto.rosso { background: linear-gradient(180deg, #3a1714, #241010); border-color: #7a3229 }
.linguette a.qui { background: linear-gradient(180deg, #1d1810, #121009); box-shadow: inset 0 -2px 0 var(--oro) }
.elenco tbody tr:nth-child(even) { background: rgba(255,255,255,.015) }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input:not([type]), select, textarea { background: #0a0e14; border-color: #33291a }

/* ===================================================================== INFERNO
   Il sito demoniaco: ferro nero e lava. Le cornici sono disegni veri
   (immagini/inferno/, generate con Higgsfield e ritagliate in nove pezzi):
   gli angoli con i teschi cornuti restano interi, i lati di ferro runico si
   ripetono per tutta la lunghezza, e la gemma di brace sta a meta' del lato
   di sopra e di quello di sotto. Le cornici sporgono un poco fuori dal
   riquadro (border-image-outset): la riga di ferro cade sul bordo, i teschi
   escono dagli angoli. Tutto quello che segue vince sulle regole di prima. */
:root {
  --oro: #ff7a24; --oro-vivo: #ffb35a; --oro-chiaro: #ffe3c4; --rosso: #ff4b3a;
  --muto: #b9a596; --bordo: #4a1a10; --bordo-vivo: #8a2a14;
  --telaio-bordo: #3a120b; --pietra: #070304; --pietra-2: #0d0507;
  --lava: #ff5a14; --brace: #ffae42;
  --ferro: linear-gradient(180deg, rgba(26,9,7,.93), rgba(11,4,4,.96)), url('/immagini/inferno/ferro.webp') 0 0 / 256px;
}
body.cornice { background: #030102 url('/immagini/inferno/fondo-inferno.webp') center top / cover fixed }
body.cornice::before { background:
  radial-gradient(ellipse 70% 75% at 50% 30%, rgba(8,2,3,.5), rgba(4,1,1,.9)),
  linear-gradient(0deg, rgba(255,60,0,.1), transparent 35%) }
.telaio { background: linear-gradient(rgba(7,3,3,.86), rgba(7,3,3,.9)), url('/immagini/inferno/ferro.webp') 0 0 / 320px;
  border-color: #4a160c; box-shadow: 0 0 0 1px #000, 0 0 70px rgba(255,50,0,.16), 0 30px 90px rgba(0,0,0,.85) }
#braci { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; mix-blend-mode: screen }

/* ------------------------------------------------------------- il fuoco nelle scritte */
@keyframes brace {
  0%, 100% { text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,90,20,.55), 0 0 26px rgba(255,40,0,.3) }
  45% { text-shadow: 0 2px 0 #000, 0 0 14px rgba(255,120,30,.75), 0 0 34px rgba(255,50,0,.45) }
  55% { text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,80,10,.45), 0 0 20px rgba(255,30,0,.25) }
}
@keyframes lava-scorre { from { background-position: 0% 50% } to { background-position: 200% 50% } }
.testata h2, .capo h2, .cassa > .testa h2, .fascia h2, .pezzo h3, .centro h1 {
  color: #ffd8b0; animation: brace 4.5s ease-in-out infinite }
.ingresso.eroe h1, .lato-sx .logo b {
  background: linear-gradient(100deg, #fff1d6 0%, #ffc070 22%, #ff5a1a 45%, #ffc070 68%, #fff1d6 90%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lava-scorre 7s linear infinite; text-shadow: none;
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(255,60,0,.45)) }
.lato-sx .logo svg { filter: hue-rotate(-28deg) saturate(1.6) drop-shadow(0 0 16px rgba(255,60,0,.6)) }
.lato-sx .logo small { color: #ff8a3c }
.ingresso.eroe .sfondo::after { background:
  radial-gradient(ellipse 60% 55% at 50% 45%, rgba(20,4,2,.7), rgba(20,4,2,.2) 75%),
  linear-gradient(180deg, rgba(30,5,2,.35) 0%, rgba(30,5,2,0) 25%, rgba(60,10,0,.18) 60%, rgba(8,2,2,.92) 100%) }
.ingresso.eroe .motto i, .fascia .punti .ico, .cifre .ico, .menu a .ico, .pezzo h3 .ico { color: var(--oro) }
.menu a.qui { border-left-color: var(--lava); background: linear-gradient(90deg, rgba(255,70,10,.28), rgba(255,70,10,0) 85%) }
.menu a.qui .ico { color: var(--brace); filter: drop-shadow(0 0 6px rgba(255,90,0,.8)) }
.menu a:hover { background: rgba(255,70,10,.1) }
.menu hr { height: 20px; margin: 4px 16px; background: url('/immagini/inferno/divisore.webp') center / contain no-repeat }
.barra { background: linear-gradient(180deg, #1a0806, #0b0303); border-bottom-color: #4a160c;
  box-shadow: 0 1px 0 rgba(255,70,10,.25), 0 8px 24px rgba(0,0,0,.6) }
.barra .vie a:hover, .barra .vie a.qui { color: var(--brace); background: rgba(255,70,10,.12) }
.lato-sx { background: linear-gradient(180deg, rgba(20,6,5,.94), rgba(8,3,3,.97)) }
.lato-dx { background: rgba(8,3,3,.55) }
.piede { background: #070202 }

/* ------------------------------------------------------------- le cornici */
.novita, .notizia, .pezzo, .riquadro, .cassa {
  position: relative; border: 8px solid transparent; border-radius: 0; overflow: visible;
  border-image: url('/immagini/inferno/cornice.webp') 120 / 60px / 23px 19px round;
  background: var(--ferro); background-clip: padding-box;
  box-shadow: 0 14px 30px rgba(0,0,0,.55); transition: filter .25s, transform .25s }
.bestia, .strada.viva, .punto, .scheda-p {
  position: relative; border: 5px solid transparent; border-radius: 0;
  border-image: url('/immagini/inferno/cornice.webp') 120 / 36px / 14px 11px round;
  background: var(--ferro); background-clip: padding-box; transition: filter .25s, transform .25s }
.novita:hover, .notizia:hover, .bestia:hover, .strada.viva:hover {
  transform: translateY(-3px); filter: brightness(1.12) drop-shadow(0 0 16px rgba(255,70,0,.45)) }
/* la gemma di brace a meta' del lato di sopra e di sotto */
.novita::before, .novita::after, .notizia::before, .notizia::after, .pezzo::before, .pezzo::after,
.riquadro::before, .riquadro::after, .cassa::before, .cassa::after {
  content: ''; position: absolute; left: 50%; top: auto; right: auto; bottom: auto;
  width: 27px; height: 27px; margin-left: -13.5px; transform: none; border: 0; opacity: 1;
  background: url('/immagini/inferno/gemma.webp') center / contain no-repeat; box-shadow: none;
  z-index: 3; pointer-events: none; animation: gemma 3.2s ease-in-out infinite }
.novita::before, .notizia::before, .pezzo::before, .riquadro::before, .cassa::before { top: -17.5px }
.novita::after, .notizia::after, .pezzo::after, .riquadro::after, .cassa::after { bottom: -17.5px; animation-delay: -1.6s }
@keyframes gemma {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,80,0,.5)) brightness(1) }
  50% { filter: drop-shadow(0 0 10px rgba(255,110,20,.95)) brightness(1.35) } }
/* un riquadro stretto in una colonna o in una tabella non ha bisogno della gemma */
.riquadro.stretto::before, .riquadro.stretto::after { display: none }
.novita .immagine, .notizia .figura { border-bottom: 1px solid #5a1c0e }
.novita .immagine img { filter: saturate(1.05) contrast(1.05) }
.novita h3 a, .notizia h3 a { color: #ffe9d2 }
.novita .leggi, .testata a { color: var(--brace) }
.cassa > .testa { background: linear-gradient(180deg, #3d1008, #1d0605); border-bottom: 1px solid #7a2410;
  box-shadow: 0 1px 0 rgba(255,90,20,.25) }
.cassa > .testa h2::before { content: none }
.griglia { gap: 44px 40px }
.lato-dx { gap: 40px; padding: 34px 30px 34px }
.centro .cassa { margin: 26px 34px }
.centro .dentro { padding: 0 40px }
.riquadro { margin-top: 26px; margin-bottom: 26px }
.griglia > .riquadro { margin-top: 0; margin-bottom: 0 }

/* ------------------------------------------------------------- l'intestazione delle sezioni: lo stendardo */
.testata { position: relative; justify-content: center; margin: 0 0 26px; align-items: flex-end }
.centro { background: linear-gradient(180deg, rgba(16,5,4,.55), rgba(8,3,3,.75)) }
.testata h2 {
  /* il testo sta nella placca dello stendardo: x 186-819, y 216-335 su 1000 x 424 */
  --w: 380px; box-sizing: border-box; width: var(--w); height: calc(var(--w) * .424); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; margin: 0; text-align: center;
  padding: calc(var(--w) * .216) calc(var(--w) * .181) calc(var(--w) * .089) calc(var(--w) * .186);
  font-size: calc(var(--w) * .05); line-height: 1.1; white-space: nowrap;
  background: url('/immagini/inferno/stendardo.webp') center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)) }
.testata > a, .testata > span { position: absolute; right: 0; bottom: 6px; max-width: 30% }
.sez + .sez::before, .centro section + section::before {
  content: ''; display: block; height: 48px; max-width: 640px; margin: -30px auto 4px;
  background: url('/immagini/inferno/divisore.webp') center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255,60,0,.35)) }

/* ------------------------------------------------------------- i bottoni */
.tasto { border-color: #5a1c0e; background: linear-gradient(180deg, #2a0d08, #140505); color: #ffe3c8 }
.tasto:hover { border-color: #ff5a1a; background: linear-gradient(180deg, #3d120a, #1d0706); color: #fff;
  box-shadow: 0 0 14px rgba(255,70,0,.45) }
.tasto.rosso { background: linear-gradient(180deg, #4a0d08, #220505); border-color: #a3200f }
/* il bottone grande: la cornice con le corna, lava che scorre dentro */
body.cornice .tasto.oro,
body.cornice .tasto.gigante,
body.cornice .centro .tasto.grande,
body.cornice .centro .tasto.pieno,
body.cornice .pezzo .tasto.pieno {
  --k: 1; position: relative; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: calc(40px * var(--k)); padding: 0 calc(44px * var(--k));
  min-width: calc(150px * var(--k)); flex: 0 0 auto; align-self: center;
  margin: calc(30px * var(--k)) calc(22px * var(--k)) calc(24px * var(--k));
  border: 1px solid transparent; border-radius: 0;
  border-image: url('/immagini/inferno/tasto.webp') 106 141 92 141 /
    calc(53px * var(--k)) calc(70.5px * var(--k)) calc(46px * var(--k)) /
    calc(33px * var(--k)) calc(20px * var(--k)) calc(26.4px * var(--k)) stretch;
  background: linear-gradient(180deg, #3a0c06, #1a0403 60%, #2c0805) calc(12px * var(--k)) 0 / calc(100% - 24px * var(--k)) 100% no-repeat;
  color: #ffe6c8; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255,90,20,.7); box-shadow: none; white-space: nowrap;
  transition: filter .2s, transform .2s }
body.cornice .tasto.oro::after,
body.cornice .tasto.gigante::after,
body.cornice .centro .tasto.grande::after,
body.cornice .centro .tasto.pieno::after,
body.cornice .pezzo .tasto.pieno::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(14px * var(--k)); right: calc(14px * var(--k));
  background: linear-gradient(100deg, transparent 30%, rgba(255,140,40,.35) 45%, rgba(255,220,150,.5) 50%, rgba(255,140,40,.35) 55%, transparent 70%) 200% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen; pointer-events: none; animation: lampo-lava 4.5s ease-in-out infinite }
@keyframes lampo-lava { 0%, 55% { background-position: 200% 0 } 100% { background-position: -150% 0 } }
body.cornice .tasto.oro:hover,
body.cornice .tasto.gigante:hover,
body.cornice .centro .tasto.grande:hover,
body.cornice .centro .tasto.pieno:hover,
body.cornice .pezzo .tasto.pieno:hover {
  color: #fff; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255,80,0,.7)); transform: translateY(-1px) }
body.cornice .tasto.gigante { --k: 1.45; font-size: 21px }
body.cornice .centro .tasto.grande { --k: 1.15 }
body.cornice .pezzo .tasto.pieno { --k: .78; width: calc(100% - 2 * 22px * var(--k)); font-size: 12px }
body.cornice .centro .tasto.pieno { width: calc(100% - 2 * 22px * var(--k)) }
body.cornice .scheda-p .azioni .tasto.oro { --k: .9; font-size: 14px }
/* nella barra in alto il bottone non ha posto per le corna: brace e basta */
body.cornice .barra .tasto.oro { --k: .82; margin: 0 calc(18px * var(--k)) }
.barra .tasto.oro::after { animation-duration: 5.5s }

/* ------------------------------------------------------------- le cose che compaiono */
html.inferno-js .rivela { opacity: 0; transform: translateY(22px) }
html.inferno-js .rivela.vista { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) }
@media (max-width: 960px) {
  .centro .dentro { padding: 0 26px }
  .testata h2 { --w: 320px }
  .testata > a, .testata > span { position: static; max-width: none }
  .testata { flex-direction: column; align-items: center }
}
@media (prefers-reduced-motion: reduce) {
  .testata h2, .capo h2, .cassa > .testa h2, .fascia h2, .pezzo h3, .centro h1,
  .ingresso.eroe h1, .lato-sx .logo b, .tasto::after, .novita::before, .novita::after { animation: none !important }
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input:not([type]), select, textarea { background: #100504; border-color: #4a1a10; color: #ffe9d6 }
input:focus, select:focus, textarea:focus { border-color: #ff5a1a; box-shadow: 0 0 0 3px rgba(255,80,10,.18), 0 0 14px rgba(255,60,0,.25); outline: 0 }
.linguette a.qui, .schede input:checked + label { background: linear-gradient(180deg, #3a0f08, #1a0504); box-shadow: inset 0 -2px 0 var(--lava) }
nav.vie a.qui, .barra .vie a.qui { box-shadow: inset 0 0 0 1px rgba(255,90,20,.45) }
::selection { background: rgba(255,70,10,.45); color: #fff }

/* le griglie non si allargano oltre la colonna: con le cornici e i margini
   nuovi un campo lungo spingeva il riquadro sotto la colonna di destra */
.griglia.due { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.griglia.tre { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.griglia.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 860px) {
  .griglia.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .griglia.tre, .griglia.due { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 520px) { .griglia.quattro { grid-template-columns: minmax(0, 1fr) } }
/* il distintivo: nella scheda del personaggio prendeva il colore del testo
   accanto (.scheda-p .chi span) e non si leggeva */
.gm, .scheda-p .chi .gm { background: linear-gradient(180deg, #ff8a3c, #c2340f); color: #fff6e8;
  text-shadow: 0 1px 0 rgba(0,0,0,.35); box-shadow: 0 0 10px rgba(255,80,10,.35); font-size: 10px }
/* una scheda dentro un riquadro: una cornice basta */
.riquadro .scheda-p, .riquadro .riquadro, .riquadro .punto { border: 1px solid #4a1a10; border-image: none;
  background: linear-gradient(180deg, rgba(40,12,8,.6), rgba(16,5,4,.7)) }
.riquadro .riquadro::before, .riquadro .riquadro::after { display: none }
/* un bottone lungo va a capo invece di uscire dalla cornice */
body.cornice .centro .tasto.pieno { white-space: normal; line-height: 1.15; text-align: center; font-size: 13px }
.riquadro input, .riquadro select, .riquadro textarea, .riquadro form { min-width: 0; max-width: 100% }
body.cornice form .tasto.oro { white-space: normal; line-height: 1.15; text-align: center;
  max-width: calc(100% - 2 * 22px * var(--k)); font-size: 13px }
/* nella barra le corna ci stanno solo sullo schermo largo: piu' stretto, lo
   stesso bottone di lava senza cornice, che non spinge la pagina di lato */
@media (max-width: 1180px) {
  body.cornice .barra .tasto.oro { border: 1px solid #ff6a1a; border-image: none; min-width: 0; height: auto;
    margin: 0; padding: 8px 14px; background: linear-gradient(180deg, #4a1008, #200503);
    box-shadow: 0 0 12px rgba(255,70,0,.45), inset 0 1px 0 rgba(255,180,120,.25) }
  body.cornice .barra .tasto.oro::after { left: 0; right: 0 }
}
@media (max-width: 960px) {
  table.elenco { display: block; max-width: 100%; overflow-x: auto }
  body.cornice .tasto.gigante { --k: 1.15; font-size: 17px }
  .novita, .notizia, .pezzo, .riquadro, .cassa { border-image-width: 46px; border-image-outset: 18px 15px }
  .centro .cassa { margin: 22px 20px }
}
@media (max-width: 420px) {
  body.cornice .tasto.gigante { --k: 1; font-size: 15px; padding: 0 calc(36px * var(--k)) }
  .centro .dentro { padding: 0 22px }
  .lato-dx { padding: 30px 22px }
}
.riquadro:has(table.elenco) { overflow-x: auto }
@media (max-width: 960px) { .telaio { overflow-x: clip } }
/* ------------------------------------------------------------- il logo (Higgsfield)
   La scritta con il teschio cornuto e l'aquila demoniaca nel cerchio di rune. */
.lato-sx .logo { padding: 18px 12px 16px }
.lato-sx .logo img.scritta { width: 100%; max-width: 224px; height: auto; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(255,60,0,.35));
  animation: logo-respira 5s ease-in-out infinite }
@keyframes logo-respira { 0%, 100% { filter: brightness(1.3) contrast(1.1) drop-shadow(0 6px 14px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(255,60,0,.3)) }
  50% { filter: brightness(1.45) contrast(1.1) drop-shadow(0 6px 14px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(255,90,10,.6)) } }
.lato-sx .logo small { margin-top: 4px }
.barra .logo-piccolo img.scritta { height: 40px; width: auto; display: block; filter: brightness(1.35) contrast(1.1) drop-shadow(0 0 10px rgba(255,60,0,.35)) }
.logo-piede { gap: 12px }
.logo-piede img.stemma { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(255,60,0,.4)) }
.logo-piede img.scritta { height: 44px; width: auto; filter: brightness(1.3) contrast(1.1) }
@media (prefers-reduced-motion: reduce) { .lato-sx .logo img.scritta { animation: none } }
/* ------------------------------------------------------------- il primo personaggio: i passi */
.passi { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 14px 0 30px; padding: 0 }
.passi li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; opacity: .55;
  border: 1px solid #3a140c; background: linear-gradient(180deg, rgba(30,9,7,.85), rgba(14,5,4,.85)) }
.passi li b { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 'Cinzel', serif; background: #1c0705; border: 1px solid #5a1c0e; color: #ffcf9e }
.passi li span { display: flex; flex-direction: column; font: 700 14px/1.25 'Cinzel', serif; letter-spacing: .05em; color: #ffe3c4 }
.passi li small { font: 400 12.5px/1.35 'Inter', sans-serif; letter-spacing: 0; color: var(--muto); margin-top: 3px }
.passi li.fatto { opacity: .85 }
.passi li.fatto b { background: linear-gradient(180deg, #5d2a12, #34150a); color: #ffd9a8; border-color: #8a4a1e }
.passi li.qui { opacity: 1; border-color: #ff5a1a; animation: passo-qui 2.4s ease-in-out infinite }
.passi li.qui b { background: linear-gradient(180deg, #ff8a3c, #c2340f); color: #fff; border-color: #ffb35a;
  box-shadow: 0 0 12px rgba(255,90,10,.7) }
@keyframes passo-qui { 0%, 100% { box-shadow: 0 0 12px rgba(255,70,0,.3), inset 0 0 16px rgba(255,70,0,.1) }
  50% { box-shadow: 0 0 26px rgba(255,90,10,.6), inset 0 0 24px rgba(255,90,10,.22) } }
/* chi non ha ancora nessuno: una cosa sola davanti, il nome */
.griglia.due.da-primo { grid-template-columns: minmax(0, 1fr) }
.da-primo > .crea { order: -1; width: 100%; max-width: 640px; margin: 54px auto 34px }
.da-primo .miei { display: none }
.riquadro.crea.primo { animation: crea-brilla 2.8s ease-in-out infinite; text-align: center }
@keyframes crea-brilla { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,70,0,.2)) }
  50% { filter: drop-shadow(0 0 22px rgba(255,90,10,.55)) } }
.riquadro.crea.primo h3 { font-size: 25px !important; margin-bottom: 6px }
.riquadro.crea.primo .sotto-testa { margin: 0 auto 18px; max-width: 44ch }
.riquadro.crea.primo .campo { text-align: left }
.riquadro.crea.primo input[name=nome] { font-size: 19px; padding: 14px 16px; text-align: center; letter-spacing: .04em }
.riquadro.crea.primo::before { display: none }
.parti-qui { position: absolute; top: -58px; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap;
  padding: 7px 16px 7px; font: 700 13px/1 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase;
  color: #fff4e6; background: linear-gradient(180deg, #ff7a24, #b8300e); border: 1px solid #ffb35a;
  box-shadow: 0 0 18px rgba(255,90,10,.6); animation: parti-qui 1.4s ease-in-out infinite }
.parti-qui::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: #b8300e }
@keyframes parti-qui { 0%, 100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 6px) } }
.guida-qui { animation: guida-qui 1.6s ease-in-out infinite }
@keyframes guida-qui { 50% { filter: brightness(1.35) drop-shadow(0 0 16px rgba(255,100,20,.9)) } }
@media (max-width: 860px) { .passi { grid-template-columns: minmax(0, 1fr); gap: 10px } .da-primo > .crea { margin-top: 64px } }
@media (prefers-reduced-motion: reduce) { .passi li.qui, .riquadro.crea.primo, .parti-qui, .guida-qui { animation: none } }
/* ------------------------------------------------------------- la colonna Live */
.pezzo.live h3 { gap: 10px }
.pallino-live { width: 9px; height: 9px; border-radius: 50%; background: #ff3b1f; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(255,60,30,.7); animation: live-batte 1.6s ease-out infinite }
@keyframes live-batte { 0% { box-shadow: 0 0 0 0 rgba(255,60,30,.7) } 100% { box-shadow: 0 0 0 10px rgba(255,60,30,0) } }
.cronaca { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto; scrollbar-width: thin }
.cronaca li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start;
  padding: 7px 8px; font-size: 13px; line-height: 1.35; color: #d8c6b8;
  background: rgba(0,0,0,.25); border-left: 2px solid #4a1a10 }
.cronaca li.vuoto { display: block; color: var(--muto); border: 0; background: none; padding: 4px 0 }
.cronaca .icona .ico { width: 18px; height: 18px; color: #ff8a3c; margin-top: 1px }
.cronaca .testo { min-width: 0; overflow-wrap: anywhere }
.cronaca .testo a { color: #ffe3c4; font-weight: 600 }
.cronaca .testo a:hover { color: var(--brace) }
.cronaca .testo b { color: #ffb35a; font-weight: 600 }
.cronaca time { font-size: 11px; color: #8a7466; white-space: nowrap; margin-top: 2px; font-variant-numeric: tabular-nums }
.cronaca .cr-pvp { border-left-color: #ff3b1f; background: linear-gradient(90deg, rgba(120,10,0,.35), rgba(0,0,0,.2)) }
.cronaca .cr-pvp .ico, .cronaca .cr-morte .ico { color: #ff4b3a }
.cronaca .cr-morte { border-left-color: #8a1a10 }
.cronaca .cr-livello { border-left-color: #ff8a3c }
.cronaca .cr-livello .ico { color: #ffc070 }
.cronaca .cr-missione { border-left-color: #c9a24a } .cronaca .cr-missione .ico { color: #f2c877 }
.cronaca .cr-strada { border-left-color: #b06aff } .cronaca .cr-strada .ico { color: #d3a6ff }
.cronaca .cr-gilda { border-left-color: #5fbf7f } .cronaca .cr-gilda .ico { color: #8fe0a6 }
.cronaca li.grande { border-left-width: 3px; border-left-color: #ffb35a;
  background: linear-gradient(90deg, rgba(255,120,30,.22), rgba(0,0,0,.2)); box-shadow: inset 0 0 14px rgba(255,90,10,.18) }
.cronaca li.nuova { animation: cronaca-arriva 1.6s ease-out }
@keyframes cronaca-arriva {
  0% { transform: translateX(-14px); opacity: 0; background: rgba(255,110,30,.55); box-shadow: 0 0 18px rgba(255,90,10,.6) }
  25% { transform: none; opacity: 1 }
  100% { box-shadow: none } }
@media (prefers-reduced-motion: reduce) { .pallino-live, .cronaca li.nuova { animation: none } }
/* ------------------------------------------------------------- il banner: la battaglia col demone
   La scena vera del gioco (le caverne infernali, quattro giocatori e un Demone
   sotto il fulmine) sta a destra; il titolo a sinistra, su un velo che la
   lascia vedere. Sul telefono il titolo torna in mezzo e la scena sta sotto. */
.ingresso.eroe .sfondo img { object-position: 72% 50%; image-rendering: pixelated;
  animation: banner-respira 14s ease-in-out infinite alternate; transform-origin: 70% 50% }
@keyframes banner-respira { from { transform: scale(1.02) } to { transform: scale(1.09) } }
.ingresso.eroe .sfondo::after { background:
  linear-gradient(90deg, rgba(10,3,2,.92) 0%, rgba(10,3,2,.72) 30%, rgba(10,3,2,.2) 58%, rgba(10,3,2,0) 75%),
  linear-gradient(180deg, rgba(10,3,2,.35) 0%, rgba(10,3,2,0) 22%, rgba(10,3,2,0) 70%, rgba(8,2,2,.95) 100%) }
/* il bagliore della scarica, che pulsa sopra il demone */
.ingresso.eroe .sfondo::before { content: ''; position: absolute; z-index: 1; pointer-events: none;
  left: 58%; top: 22%; width: 34%; height: 60%;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,240,200,.35), rgba(255,120,30,.12) 40%, transparent 70%);
  mix-blend-mode: screen; animation: banner-lampo 3.2s ease-in-out infinite }
@keyframes banner-lampo { 0%, 100% { opacity: .35 } 8% { opacity: 1 } 12% { opacity: .5 } 16% { opacity: .9 } 40% { opacity: .45 } }
/* il banner largo (schermi grandi): titolo a sinistra, battaglia a destra.
   Si guarda la larghezza del banner, non della finestra: fra le due colonne
   un 1440 lascia al banner poco piu' di 800 pixel. */
.ingresso.eroe { container-type: inline-size }
.ingresso.eroe .sfondo::after { background:
  radial-gradient(ellipse 62% 58% at 50% 42%, rgba(10,3,2,.62), rgba(10,3,2,.18) 70%, rgba(10,3,2,0)),
  linear-gradient(180deg, rgba(10,3,2,.45) 0%, rgba(10,3,2,0) 26%, rgba(10,3,2,.05) 66%, rgba(8,2,2,.95) 100%) }
.ingresso.eroe .sfondo img { object-position: 64% 50% }
@container (min-width: 760px) {
  .ingresso.eroe .dentro { align-items: flex-start; text-align: left; padding: 60px 30px 170px 44px; max-width: 56% }
  .ingresso.eroe h1 { font-size: clamp(36px, 5.4cqw, 64px) }
  .ingresso.eroe .motto { letter-spacing: .22em }
  .ingresso.eroe .cifre { justify-content: flex-start; gap: 26px }
  /* la battaglia a destra, fuori dal titolo */
  .ingresso.eroe .sfondo img { object-position: 52% 50% }
  .ingresso.eroe .sfondo::after { background:
    linear-gradient(90deg, rgba(10,3,2,.9) 0%, rgba(10,3,2,.7) 32%, rgba(10,3,2,.15) 56%, rgba(10,3,2,0) 70%),
    linear-gradient(180deg, rgba(10,3,2,.35) 0%, rgba(10,3,2,0) 22%, rgba(10,3,2,0) 70%, rgba(8,2,2,.95) 100%) }
  .ingresso.eroe .sfondo::before { left: 62%; width: 34% }
  .ingresso.eroe .corsivo { display: none }
}
@media (prefers-reduced-motion: reduce) { .ingresso.eroe .sfondo img, .ingresso.eroe .sfondo::before { animation: none } }

/* Il testo di una notizia: note di aggiornamento leggibili (sottotitoli, elenchi) */
.testo-notizia { max-width: none; font-size: 16px; line-height: 1.7; color: #e3d8bf }
.testo-notizia h2 { font-family: 'Cinzel', serif; font-size: 21px; letter-spacing: .06em; color: #f5d99b;
  margin: 1.7em 0 .6em; padding-bottom: .35em; border-bottom: 1px solid rgba(255,90,20,.25) }
.testo-notizia ul { color: #e3d8bf; padding-left: 1.3em; margin: 0 0 1.1em }
.testo-notizia li { margin: .5em 0; padding-left: .2em }
.testo-notizia li::marker { color: #ff6a1a }
.testo-notizia b { color: #fff1d6; font-weight: 600 }

/* ------------------------------------------------- il messaggio dei cookie
   In fondo allo schermo, sopra tutto, finche' non si sceglie. Accept e Reject
   hanno la stessa forma e lo stesso peso (lo chiede il Garante), e la croce
   chiude con i soli cookie necessari. */
.biscotti { position: fixed; z-index: 9000; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(920px, calc(100% - 24px)); display: flex; gap: 16px; align-items: center;
  background: rgba(18, 7, 5, .97); border: 1px solid var(--telaio-bordo, #3a120b); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.7); padding: 16px 44px 16px 18px; color: var(--testo) }
.biscotti b { font-family: 'Cinzel', serif; color: var(--oro-vivo); font-size: 15px }
.biscotti p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muto) }
.biscotti a { color: var(--oro-vivo) }
.biscotti-testo { flex: 1 }
.biscotti-tasti { display: flex; gap: 10px; flex: 0 0 auto }
.biscotti-tasti .tasto { min-width: 110px; justify-content: center }
.biscotti-x { position: absolute; top: 6px; right: 8px; margin: 0 }
.biscotti-x button { background: none; border: 0; color: var(--muto); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px }
.biscotti-x button:hover { color: var(--testo) }
@media (max-width: 700px) {
  .biscotti { flex-direction: column; align-items: stretch; bottom: 8px; padding: 14px 14px 14px }
  .biscotti-testo { padding-right: 26px }
  .biscotti-tasti .tasto { flex: 1 }
}
.legale .aggiornato { color: var(--muto); font-size: 13px; margin-top: -6px }
.legale li { margin-bottom: .45em }
.legale table.elenco td, .legale table.elenco th { font-size: 13.5px }

/* -------------------------------------------------------- le missioni */
.num-missione { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px;
                border-radius: 50%; border: 1px solid var(--bordo-vivo); color: var(--oro-vivo);
                font-size: 14px; vertical-align: 2px }
.missione-livello { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-vivo) }
.missione { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; scroll-margin-top: 90px }
.missione-figure { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px }
.missione { grid-template-columns: minmax(300px, 380px) 1fr }
.missione-passi small { color: var(--muto) }
.missione-figure .bestia .palco { height: 120px }
.missione-compito { margin: 0 0 12px; font-size: 16.5px; color: var(--testo) }
.missione blockquote { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--oro); background: rgba(212,160,74,.07);
                       font-style: italic; color: #e3d6bc }
.missione blockquote cite { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--muto) }
.missione-dati { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14.5px }
.missione-dati dt { color: var(--muto) }
.missione-dati dd { margin: 0 }
.missione-dati .oro { color: var(--oro-vivo) }
.missione-passi { margin: 0; padding-left: 20px; color: #d9ccb2; font-size: 14.5px; line-height: 1.6 }
@media (max-width: 760px) {
  .missione { grid-template-columns: 1fr }
}

/* -------------------------------------------------------- la vetrina degli outfit */
.bestia.vetrina .palco { height: 130px }
.bestia.vetrina b { margin-bottom: 2px }
.bestie.vetrine { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) }
@media (max-width: 520px) { .bestie.vetrine { grid-template-columns: repeat(2, 1fr); gap: 8px } }
.missione-figure .bestia .palco { height: 132px }
.missione > *, .missione-figure > * { min-width: 0 }
@media (max-width: 520px) { .missione-figure .sprite { --s: 1.1 !important } .missione-figure .bestia .palco { height: 100px } }
.zona-missioni { margin: 26px 0 0; font-size: 22px; color: var(--oro-vivo) }

/* ===================================================== la lingua (bandiere)
   Inglese o portoghese, in alto accanto a Login. Un <details> come il menu del
   telefono: si apre senza JavaScript, la tendina sta sopra a tutto. */
.lingua { position: relative; flex-shrink: 0 }
.lingua summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px;
  border: 1px solid #4a3c24; border-radius: 3px; color: var(--testo); font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  background: rgba(0,0,0,.25); user-select: none }
.lingua summary::-webkit-details-marker { display: none }
.lingua summary::after { content: ''; width: 5px; height: 5px; margin: -3px 0 0 1px; border-right: 1.5px solid var(--muto);
  border-bottom: 1.5px solid var(--muto); transform: rotate(45deg) }
.lingua summary:hover, .lingua[open] summary { border-color: #8a6a3a; color: #fff }
.lingua .bandiera { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.18) }
.lingua .lingue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 170px; padding: 6px;
  background: linear-gradient(180deg, #1a202b, #10141b); border: 1px solid #4a3c24; border-radius: 4px; box-shadow: var(--ombra) }
.lingua .lingue a { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 3px;
  color: var(--testo); text-decoration: none; font-size: 14px; font-weight: 500 }
.lingua .lingue a:hover { background: rgba(255,255,255,.06) }
.lingua .lingue a.qui { color: var(--oro-vivo) }
.lingua .lingue a.qui::after { content: '✓'; margin-left: auto; font-size: 13px }
@media (max-width: 520px) {
  .lingua summary { height: 34px; padding: 0 8px; gap: 5px }
  .lingua summary span { display: none }
}
/* la barra in alto e' piena: sotto i 1600 pixel della lingua resta la
   bandiera, sotto i 1500 dei giocatori online resta il numero col puntino */
@media (max-width: 1600px) { .lingua summary > span { display: none } }
@media (max-width: 1500px) { .in-linea [data-vivo="etichetta"] { display: none } .in-testa { gap: 8px } }
/* ------------------------------------------------ Discord (ottobre 2026)
   Il colore di Discord sta solo nel bordo e nell'icona: il resto e' il
   nostro, cosi' il tasto si riconosce senza uscire dal sito. */
.tasto.discord { border-color: #4b54b8; color: #c9cdff; background: linear-gradient(180deg, rgba(88,101,242,.22), rgba(88,101,242,.08)) }
.tasto.discord:hover { border-color: #7a84ff; color: #fff; background: linear-gradient(180deg, rgba(88,101,242,.4), rgba(88,101,242,.18)) }
.tasto.discord .ico { width: 18px; height: 18px; color: #aab1ff; vertical-align: -4px }
.barra .in-testa .tasto.discord { display: inline-flex; align-items: center; gap: 7px }
.pezzo.discord { background: linear-gradient(180deg, #151933, #0b0e1a); border-color: #353d80 }
.pezzo.discord h3 .ico { color: #8c95ff }
.pezzo.discord p { margin: 0; color: var(--muto); font-size: 13.5px; line-height: 1.5 }
.pezzo .tasto.pieno.discord { display: flex; align-items: center; gap: 8px }
.invito-discord { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 14px 16px;
  border: 1px solid #353d80; border-radius: 4px; background: linear-gradient(90deg, rgba(88,101,242,.16), rgba(88,101,242,.04)) }
.invito-discord > .ico { width: 34px; height: 34px; color: #8c95ff; flex-shrink: 0 }
.invito-discord div { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 14px }
.invito-discord span { color: var(--muto) }
@media (max-width: 700px) {
  .barra .in-testa .tasto.discord span { display: none }
  .barra .in-testa .tasto.discord { padding: 8px 10px }
  .invito-discord { flex-wrap: wrap }
}
@media (max-width: 1500px) { .barra .in-testa .tasto.discord span { display: none } .barra .in-testa .tasto.discord { padding: 9px 11px } }