/* ==========================================================
   GEOCHIOSCO — edicola di piazza, Italia vintage, profondità 3D
   ========================================================== */

@font-face { font-family: 'Anton'; src: url('/fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --carta: #f4ead5;
  --carta-2: #ead9b6;
  --carta-3: #fffaf0;
  --inchiostro: #1d1a16;
  --inchiostro-2: #4b4238;
  --rosso: #d6402b;
  --rosso-scuro: #9e2a1a;
  --verde: #2f7d6b;
  --verde-scuro: #1f3d34;
  --giallo: #f2b632;
  --giallo-scuro: #b9821a;
  --azzurro: #3a6ea5;
  --legno: #7a4a2a;
  --ombra: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -10px rgba(60,35,15,.45), 0 2px 0 rgba(60,35,15,.12);
  --raggio: 18px;
  --serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --titolo: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --testo: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--carta);
  background-image: var(--grana), radial-gradient(ellipse at top, #fbf3e1 0%, var(--carta) 55%, var(--carta-2) 100%);
  background-attachment: fixed;
  color: var(--inchiostro);
  font: 400 17px/1.5 var(--testo);
  overflow-x: hidden;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }
img { max-width: 100%; display: block; }
a { color: var(--rosso-scuro); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Tendone a righe ---------- */
.tendone {
  position: relative;
  height: 54px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, var(--rosso) 0 36px, #fff3dc 36px 72px);
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
  z-index: 3;
}
.tendone::after { /* bordo a smerlo */
  content: '';
  position: absolute; left: 0; right: 0; bottom: -17px; height: 18px;
  background:
    radial-gradient(circle at 18px 0, var(--rosso) 17px, transparent 18px) 0 0 / 72px 18px repeat-x,
    radial-gradient(circle at 54px 0, #fff3dc 17px, transparent 18px) 0 0 / 72px 18px repeat-x;
  filter: drop-shadow(0 4px 2px rgba(60,35,15,.25));
}
.tendone nav {
  position: relative; z-index: 2;
  height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  max-width: 1120px; margin: 0 auto; padding: 0 12px;
}
.tendone nav a {
  font: 700 13px/1 var(--testo); letter-spacing: .08em; text-transform: uppercase;
  color: var(--inchiostro); text-decoration: none;
  background: var(--carta-3); padding: 9px 12px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--legno);
}
.tendone nav a[aria-current="page"]:not(.home) { background: var(--giallo); }
.tendone nav .home { margin-right: auto; background: var(--verde-scuro); color: var(--giallo); font-family: var(--serif); letter-spacing: .12em; }

/* ---------- Insegna ---------- */
.insegna {
  position: relative; z-index: 2;
  margin: 34px auto 0; max-width: 760px; text-align: center;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, #2a5547, var(--verde-scuro) 60%, #14291f);
  border: 6px solid #c99a3b;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--legno), 0 18px 30px -12px rgba(30,15,5,.7), inset 0 2px 0 rgba(255,255,255,.18);
  transform: perspective(900px) rotateX(6deg);
}
.insegna::before, .insegna::after { /* catenelle */
  content: ''; position: absolute; top: -40px; width: 4px; height: 40px;
  background: repeating-linear-gradient(180deg, #8a6a3a 0 5px, #c99a3b 5px 8px);
}
.insegna::before { left: 18%; } .insegna::after { right: 18%; }
.insegna h1 {
  margin: 0;
  font: 900 clamp(30px, 9.6vw, 92px)/.95 var(--serif);
  letter-spacing: .02em;
  color: var(--giallo);
  text-shadow:
    0 1px 0 #d39a22, 0 2px 0 #c18a1c, 0 3px 0 #a87716, 0 4px 0 #8f6412,
    0 5px 0 #77520d, 0 10px 14px rgba(0,0,0,.55);
}
.insegna p { margin: 8px 0 0; color: #f3e7c8; font: 500 clamp(11px, 3.2vw, 14px)/1.3 var(--testo); letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 620px) { .insegna p { letter-spacing: .22em; } }
.insegna.piccola { margin-top: 30px; padding: 12px; transform: none; }
.insegna.piccola h1 { font-size: clamp(28px, 8.6vw, 54px); overflow-wrap: anywhere; }

/* ---------- Bancone: città + cassa ---------- */
.bancone { display: grid; gap: 14px; margin: 26px 0 8px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bancone { grid-template-columns: 1.1fr 1fr; } }

.pannello {
  position: relative;
  background: var(--carta-3);
  background-image: var(--grana);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  border: 2px solid rgba(122,74,42,.18);
}

.dove { display: flex; align-items: center; gap: 12px; padding: 14px 16px; overflow: hidden; }
.dove .ape { width: 108px; flex: none; animation: brum 1.6s ease-in-out infinite; transform-origin: 30% 90%; }
@keyframes brum { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-1deg); } }
.etichetta { font: 700 12px/1 var(--testo); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro-2); }
.dove .citta { font: 400 clamp(30px, 8vw, 44px)/1 var(--titolo); text-transform: uppercase; letter-spacing: .01em; margin: 6px 0 2px; color: var(--rosso); text-shadow: 2px 2px 0 rgba(122,74,42,.18); }
.dove .regione { font-size: 14px; color: var(--inchiostro-2); }

.cassa { padding: 14px 16px 16px; }
.cassa .riga { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cassa .soldi { font: 400 30px/1 var(--titolo); letter-spacing: .02em; }
.cassa .soldi small { font: 500 15px var(--testo); color: var(--inchiostro-2); }
.barretta {
  margin: 10px 0 8px; height: 22px; border-radius: 999px;
  background: #e5d3ad; box-shadow: inset 0 3px 6px rgba(60,35,15,.3);
  overflow: hidden; position: relative;
}
.barretta i {
  display: block; height: 100%; width: var(--p, 100%); border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 50%), var(--colore, var(--verde));
  transition: width 1.2s cubic-bezier(.2,.8,.2,1), background-color .4s;
}
.cassa .sudore { margin: 0; font-size: 14px; font-style: italic; color: var(--inchiostro-2); }
.demo-badge {
  display: inline-block; background: var(--rosso); color: #fff; font: 700 11px/1 var(--testo);
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; transform: rotate(-2deg);
}

/* ---------- Sezioni ---------- */
section { margin: 40px 0; }
.titolo-sezione { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.titolo-sezione h2 {
  margin: 0; font: 400 clamp(28px, 7vw, 40px)/1 var(--titolo); text-transform: uppercase; letter-spacing: .02em;
}
.titolo-sezione p { margin: 0; color: var(--inchiostro-2); font-size: 15px; font-style: italic; }
.titolo-sezione::after { content: ''; flex: 1 1 60px; height: 3px; background: repeating-linear-gradient(90deg, var(--inchiostro) 0 8px, transparent 8px 12px); opacity: .25; align-self: center; }

/* ---------- Locandina da edicola ---------- */
.espositore { display: grid; gap: 18px; justify-items: center; }
.filo { position: relative; width: 100%; max-width: 520px; padding-top: 22px; }
.filo::before { content: ''; position: absolute; top: 8px; left: -16px; right: -16px; height: 3px; background: #6b5a48; border-radius: 3px; box-shadow: 0 2px 2px rgba(0,0,0,.2); }
.molletta { position: absolute; top: 0; width: 16px; height: 38px; border-radius: 4px; background: linear-gradient(90deg, #c49a64, #e7c48d 50%, #a87b45); box-shadow: 0 3px 4px rgba(0,0,0,.3); z-index: 2; }
.molletta.sx { left: 16%; } .molletta.dx { right: 16%; }

.locandina {
  position: relative;
  background: #fffdf6;
  background-image: var(--grana);
  border: 1px solid #d8c7a2;
  padding: 0 0 14px;
  transform: rotate(-1.2deg);
  box-shadow: 0 30px 40px -20px rgba(60,35,15,.55), 0 4px 0 #e0cfa8, 0 8px 0 -2px #d4c096;
  transition: transform .3s;
}
.locandina:hover { transform: rotate(0deg) translateY(-2px); }
.locandina .testata {
  background: var(--rosso); color: #fff; text-align: center; padding: 10px 12px 8px;
  border-bottom: 4px double #fff;
}
.locandina .testata strong { display: block; font: 900 clamp(30px, 9vw, 46px)/1 var(--serif); letter-spacing: .06em; }
.locandina .testata span { display: flex; justify-content: space-between; font: 700 11px/1.3 var(--testo); letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; opacity: .92; }
.locandina .foto { margin: 12px 12px 0; aspect-ratio: 10 / 7; background: var(--carta-2); overflow: hidden; border: 2px solid var(--inchiostro); }
.locandina .foto img { width: 100%; height: 100%; object-fit: cover; }
.locandina h3 {
  margin: 12px 14px 0; text-align: center;
  font: 400 clamp(30px, 8.6vw, 52px)/.98 var(--titolo); text-transform: uppercase; letter-spacing: .005em;
  color: var(--inchiostro);
  overflow-wrap: anywhere;
}
.locandina .piede { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 14px 0; padding-top: 10px; border-top: 2px solid var(--inchiostro); font: 700 13px/1.2 var(--testo); text-transform: uppercase; letter-spacing: .08em; }
.locandina .piede a { color: var(--rosso-scuro); }
.timbro {
  position: absolute; z-index: 4; left: 50%; top: 42%; pointer-events: none;
  font: 400 clamp(36px, 12vw, 64px)/1 var(--titolo); color: var(--rosso); text-transform: uppercase;
  border: 6px solid var(--rosso); border-radius: 10px; padding: 6px 14px; mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); opacity: 0;
  animation: timbro 2.6s ease-out forwards;
}
@keyframes timbro { 12% { opacity: .9; transform: translate(-50%,-50%) rotate(-14deg) scale(1); } 75% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-14deg) scale(1); } }

/* ---------- Bottoni 3D ---------- */
.btn {
  --c: var(--giallo); --c-scuro: var(--giallo-scuro);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 18px; border: 0; border-radius: 16px; cursor: pointer;
  font: 700 16px/1.1 var(--testo); color: var(--inchiostro); text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), var(--c);
  box-shadow: 0 6px 0 var(--c-scuro), 0 10px 16px -6px rgba(60,35,15,.5);
  transform: translateY(0); transition: transform .08s, box-shadow .08s, filter .2s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c-scuro), 0 3px 6px -2px rgba(60,35,15,.5); }
.btn .n { font: 400 18px/1 var(--titolo); background: rgba(29,26,22,.12); padding: 5px 8px 4px; border-radius: 8px; min-width: 2.2em; text-align: center; }
.btn.fatto { filter: saturate(.35); }
.btn.fatto::after { content: '✓'; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; font: 700 13px/22px var(--testo); text-align: center; box-shadow: 0 2px 0 var(--verde-scuro); }
.btn.rosso { --c: #ef6a52; --c-scuro: var(--rosso-scuro); color: #fff; }
.btn.verde { --c: #4fa38c; --c-scuro: var(--verde-scuro); color: #fff; }
.btn.blu { --c: #5b8fc6; --c-scuro: #2a527c; color: #fff; }
.btn.crema { --c: var(--carta-3); --c-scuro: #c9b48a; }
.btn.grande { width: 100%; min-height: 60px; font-size: 18px; }
.btn.pulse .n { animation: pulse .5s ease-out; }
@keyframes pulse { 40% { transform: scale(1.5); background: var(--giallo); } }

/* ---------- Il cast ---------- */
.cast { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cast { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .cast { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cast { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.card {
  position: relative; padding: 14px; overflow: visible;
  transition: transform .25s;
}
.card .testa { display: flex; gap: 12px; align-items: center; }
@media (min-width: 1100px) { .card .testa { flex-direction: column; text-align: center; } }
.ritratto {
  position: relative; flex: none; width: 92px; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
  background: var(--carta-2);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--legno), 0 12px 18px -8px rgba(60,35,15,.6);
  transform: rotate(-2deg);
}
.card:nth-child(even) .ritratto { transform: rotate(2deg); }
@media (min-width: 1100px) { .ritratto { width: 120px; } }
.ritratto img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { margin: 0; font: 400 26px/1 var(--titolo); text-transform: uppercase; letter-spacing: .02em; }
.card .ruolo { margin: 4px 0 0; font: 700 13px/1.2 var(--testo); text-transform: uppercase; letter-spacing: .1em; color: var(--rosso-scuro); }
.card .regione { margin: 2px 0 0; font-size: 13px; color: var(--inchiostro-2); }
.card .difetto { margin: 12px 0 0; font-size: 14px; line-height: 1.35; padding: 8px 10px; border-radius: 10px; background: rgba(242,182,50,.18); border-left: 4px solid var(--giallo); }
.card .difetto b { font-weight: 700; }
.card .azioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.card .azioni .btn { min-height: 58px; padding: 6px 2px; flex-direction: column; gap: 3px; font-size: 22px; border-radius: 14px; }
.card .azioni .btn .n { font-size: 15px; padding: 3px 6px 2px; min-width: 0; }
.card.carico { animation: carico .6s ease-in-out 3; }
@keyframes carico { 25% { transform: rotate(-2deg) scale(1.02); } 75% { transform: rotate(2deg) scale(1.02); } }
.card .bollino-sciopero {
  position: absolute; top: 18px; right: 10px; z-index: 3; pointer-events: none;
  font: 400 22px/1 var(--titolo); color: #fff; background: var(--rosso); padding: 6px 10px; border-radius: 6px;
  transform: rotate(8deg); box-shadow: 0 4px 0 var(--rosso-scuro); animation: comparsa 2.4s ease-out forwards;
}
@keyframes comparsa { 0% { opacity: 0; transform: rotate(8deg) scale(2); } 15% { opacity: 1; transform: rotate(8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Proiettili e schizzi */
.volo { position: fixed; z-index: 50; font-size: 40px; line-height: 1; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.schizzo { position: absolute; z-index: 3; pointer-events: none; width: 120px; height: 120px; animation: schizzo 3.2s ease-out forwards; }
@keyframes schizzo { 0% { transform: scale(.2); opacity: 1; } 10% { transform: scale(1.1); } 16% { transform: scale(1); } 80% { opacity: .95; } 100% { opacity: 0; transform: scale(1) translateY(14px); } }
.coriandolo { position: fixed; z-index: 50; pointer-events: none; font-size: 22px; }

/* ---------- Chat della riunione ---------- */
.riunione { max-width: 760px; margin: 0 auto; overflow: hidden; }
.riunione .barra {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, #2a5547, var(--verde-scuro)); color: #f3e7c8;
  border-radius: var(--raggio) var(--raggio) 0 0;
}
.riunione .barra .avatars { display: flex; }
.riunione .barra .avatars img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--verde-scuro); margin-left: -8px; background: var(--carta-2); }
.riunione .barra .avatars img:first-child { margin-left: 0; }
.riunione .barra b { display: block; font: 700 15px/1.2 var(--testo); }
.riunione .barra small { font-size: 12px; opacity: .8; }
.riunione .barra .live { margin-left: auto; font: 700 11px/1 var(--testo); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.riunione .barra .live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--giallo); animation: lampeggio 1.6s infinite; }
@keyframes lampeggio { 50% { opacity: .2; } }
.messaggi { list-style: none; margin: 0; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 4px; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(58,110,165,.08) 31px 32px); }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; animation: entra .35s ease-out both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.msg .av { width: 38px; height: 38px; border-radius: 50%; flex: none; overflow: hidden; background: var(--carta-2); box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0,0,0,.2); }
.msg .av img { width: 100%; height: 100%; object-fit: cover; }
.msg.seguito .av { visibility: hidden; height: 0; }
.msg .bolla { position: relative; background: #fff; padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; box-shadow: 0 2px 0 rgba(122,74,42,.18), 0 6px 12px -8px rgba(60,35,15,.4); }
.msg .chi { display: block; font: 700 13px/1.2 var(--testo); margin-bottom: 2px; color: var(--c, var(--verde)); }
.msg.seguito .chi { display: none; }
.msg .testo { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.msg time { display: block; text-align: right; font-size: 11px; color: #8a7c6a; margin-top: 2px; }
.msg:not(.seguito) { margin-top: 8px; }
.msg.investor { align-self: flex-end; flex-direction: row-reverse; }
.msg.investor .av { box-shadow: 0 0 0 2px var(--giallo), 0 3px 6px rgba(0,0,0,.3); }
.msg.investor .bolla { background: linear-gradient(180deg, #2b2620, #16130f); color: #f3e7c8; border-radius: 16px 16px 4px 16px; box-shadow: 0 2px 0 #000, 0 8px 16px -8px rgba(0,0,0,.6); }
.msg.investor .chi { color: var(--giallo); font-family: var(--serif); font-style: italic; letter-spacing: .04em; }
.msg.investor .testo::after { content: '— L’Investor'; display: block; margin-top: 4px; font: italic 700 13px var(--serif); color: var(--giallo); text-align: right; }
.msg.investor time { color: #a8987f; }
.riunione .nota { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--inchiostro-2); border-top: 2px dashed rgba(122,74,42,.25); }
.vuoto { padding: 30px 16px; text-align: center; color: var(--inchiostro-2); font-style: italic; }

/* ---------- Voti città / regioni ---------- */
.giochi { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .giochi { grid-template-columns: 1fr 1fr; } }
.gioco { padding: 16px; }
.gioco h3 { margin: 0 0 4px; font: 400 26px/1.05 var(--titolo); text-transform: uppercase; }
.gioco > p { margin: 0 0 14px; font-size: 14px; color: var(--inchiostro-2); }
.proposte { display: grid; gap: 12px; }
.proposta { justify-content: space-between; width: 100%; overflow: hidden; }
.proposta .barra-voti { position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p, 0%); background: var(--rosso); border-radius: 0 4px 4px 0; transition: width .8s; }
.regioni-form { display: flex; gap: 10px; flex-wrap: wrap; }
.regioni-form select {
  flex: 1 1 200px; min-height: 52px; padding: 0 14px; border-radius: 14px; font: 500 16px var(--testo);
  border: 2px solid var(--legno); background: var(--carta-3); color: var(--inchiostro);
}
.regioni-form .btn { flex: 1 1 140px; }
.classifica { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: pos; display: grid; gap: 8px; }
.classifica li { counter-increment: pos; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; font-weight: 500; }
.classifica li::before { content: counter(pos); font: 400 20px/1 var(--titolo); color: var(--rosso); text-align: center; }
.classifica .bar { grid-column: 2 / 4; height: 8px; border-radius: 6px; background: #e5d3ad; overflow: hidden; margin-top: -4px; }
.classifica .bar i { display: block; height: 100%; width: var(--p); background: var(--verde); border-radius: inherit; }
.classifica .voti { font: 400 18px/1 var(--titolo); }

.caffe-vero { margin-top: 16px; padding: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.caffe-vero p { margin: 0; flex: 1 1 220px; font-size: 15px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translate(-50%, 140%);
  width: calc(100% - 32px); max-width: 420px; padding: 14px 16px; border-radius: 14px;
  background: var(--inchiostro); color: #f3e7c8; font-weight: 500; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s cubic-bezier(.2,.9,.3,1.3), visibility 0s .3s;
  visibility: hidden;
}
.toast.su { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* ---------- Archivio ---------- */
.archivio { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .archivio { grid-template-columns: repeat(4, 1fr); } }
.archivio a { display: block; text-decoration: none; color: inherit; padding: 8px 8px 12px; transition: transform .2s; }
.archivio a:hover { transform: translateY(-3px) rotate(-.6deg); }
.archivio .mini { aspect-ratio: 3 / 4; background: #fffdf6; border: 1px solid #d8c7a2; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.archivio .mini b { background: var(--rosso); color: #fff; font: 900 15px/1 var(--serif); text-align: center; padding: 6px 4px; letter-spacing: .06em; }
.archivio .mini img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.archivio .mini span { padding: 6px; font: 400 15px/1 var(--titolo); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.archivio .data { margin: 10px 0 0; font: 700 12px/1 var(--testo); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); }
.archivio .citta { margin: 4px 0 0; font: 400 22px/1 var(--titolo); text-transform: uppercase; color: var(--rosso); }

/* ---------- Pagine di testo ---------- */
.articolo { max-width: 680px; margin: 30px auto; padding: 22px 20px; }
.articolo h2 { font: 400 34px/1 var(--titolo); text-transform: uppercase; margin: 0 0 12px; }
.articolo h3 { font: 400 22px/1.1 var(--titolo); text-transform: uppercase; margin: 22px 0 6px; }
.articolo p, .articolo li { font-size: 17px; }
.articolo .attacco { font: 700 21px/1.35 var(--serif); }

/* ---------- Footer ---------- */
footer { margin-top: 50px; padding: 26px 0 34px; background: var(--verde-scuro); color: #e9dcbd; }
footer::before { content: ''; display: block; height: 10px; margin-top: -36px; margin-bottom: 26px; background: repeating-linear-gradient(90deg, var(--rosso) 0 36px, #fff3dc 36px 72px); }
footer .wrap { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
footer a { color: var(--giallo); font-weight: 700; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer small { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* utilità usate dalle pagine */
.locandina-box { width: 100%; display: grid; justify-items: center; }
.cast { list-style: none; margin: 0; padding: 0; }
.gioco h3.sotto { margin-top: 18px; font-size: 20px; }
.bancone.singolo { grid-template-columns: 1fr; }
.centro { text-align: center; }
.tutta { grid-column: 1 / -1; }
.classifica li.vuoto { display: block; }
[hidden] { display: none !important; }
.sezione-scena { margin-top: 26px; }