/* NINJA UZI SUSHI — gli ANNUNCI DI SBLOCCO (js/annunci.js, 16-10). Cinque stili: jackpot · manga · hanabi · maestro · volpe.
   Tutto quello che si muove usa transform/opacity (tranne il «si accende» della volpe, su un'immagine sola). I fondali sono
   disegnati qui; se esiste `img/annunci/<stile>.webp` lo script lo mette sopra (.ann-fondo background-image). */
.annuncio { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; overflow: hidden;
  font-family: var(--font); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
  /* lo spazio di «tocca per continuare» è RISERVATO: la pagina si centra nel resto (centrata su tutto lo schermo, col
     nome disegnato la descrizione finiva sotto la scritta — misurato) */
  box-sizing: border-box; padding: 1vh 0 calc(2.6vh + 26px); }
.annuncio[hidden] { display: none; }
.annuncio.via { animation: ann-via .28s ease-in both; }
@keyframes ann-via { to { opacity: 0; transform: scale(1.06); } }
.ann-fondo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; overflow: hidden; }
.ann-fondo::before, .ann-fondo::after { content: ""; position: absolute; pointer-events: none; }
.ann-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.ann-pagina { position: relative; z-index: 2; display: grid; grid-template-areas: "kicker" "eroi" "testi"; justify-items: center;
  align-items: center; gap: 1.6vh; width: min(94vw, 1100px); max-height: 92vh; text-align: center; }
.ann-kicker { grid-area: kicker; }
.ann-eroi { grid-area: eroi; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.ann-testi { grid-area: testi; display: grid; justify-items: center; gap: 1vh; }

/* ---- le lettere: ognuna salta dentro, una dopo l'altra (--i), dopo --d0 */
.ann-parola { display: inline-block; white-space: nowrap; }
.ann-l { display: inline-block; opacity: 0; }
.entra .ann-l { animation: ann-lettera .5s cubic-bezier(.2, 1.9, .4, 1) both; animation-delay: calc(var(--d0) + var(--i) * 38ms); }
@keyframes ann-lettera { 0% { opacity: 0; transform: translateY(-.6em) scale(.2) rotate(-25deg); }
  70% { opacity: 1; transform: translateY(.05em) scale(1.25) rotate(4deg); } 100% { opacity: 1; transform: none; } }

.ann-kicker { font-size: clamp(20px, 4vw, 38px); letter-spacing: 2px; padding: .15em .7em .1em; border: 3px solid #1b1020;
  border-radius: 10px; background: var(--c2); box-shadow: 0 4px 0 #1b1020; transform: rotate(-3deg); }
.ann-titolo { margin: 0; font-weight: 400; font-size: clamp(32px, 7.4vw, 78px); line-height: 1; letter-spacing: 1px;
  -webkit-text-stroke: .07em #1b1020; paint-order: stroke fill; text-shadow: 0 .08em 0 #1b1020, 0 .15em 0 var(--c2); }
.ann-nome { font-size: clamp(28px, 6vw, 62px); line-height: 1; color: var(--c1); -webkit-text-stroke: .06em #1b1020; paint-order: stroke fill;
  text-shadow: 0 .07em 0 #1b1020; opacity: 0; }
.entra .ann-nome { animation: ann-pop .55s cubic-bezier(.2, 1.7, .4, 1) both; animation-delay: var(--dn, 1.25s); }
/* (16-10, utente: «i nomi molto più grandi, molto più visibili») il nome DISEGNATO come TIMBRO sul fondo della figura:
   `--nh` è la sua altezza. Poi «coprono troppo i personaggi, max il 20%»: la posizione VERA la mette annunci.js
   (posaNome, sulla sagoma opaca della figura, 16%) insieme al margine sotto il riquadro; questi valori sono solo il
   punto di partenza, vicini al risultato perché il titolo non salti */
.ann-eroi.con-nome { --nh: min(26vh, 40vw); margin-bottom: calc(var(--nh) * .8); }
.ann-nome-splash { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--nh) * -.8); height: var(--nh); width: auto; max-width: 92vw;
  translate: -50% 0; opacity: 0; object-fit: contain;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 1.6vmin rgba(255, 255, 255, .35)); }
.annuncio { --dsplash: 1.15s; } .ann-jackpot { --dsplash: 2.3s; } .ann-maestro { --dsplash: 1.5s; }
.entra .ann-nome-splash { animation: ann-nome-entra .7s cubic-bezier(.2, 1.8, .4, 1) var(--dsplash) both,
  ann-nome-pulsa 1.7s ease-in-out calc(var(--dsplash) + .9s) infinite; }
@keyframes ann-nome-entra { 0% { opacity: 0; transform: scale(2.6) rotate(-14deg); } 60% { opacity: 1; transform: scale(.92) rotate(3deg); }
  100% { opacity: 1; transform: none; } }
@keyframes ann-nome-pulsa { 50% { transform: scale(1.06) rotate(-1.5deg); } }
body.ridotti .ann-nome-splash { animation-iteration-count: 1, 0 !important; }
/* il nome DISEGNATO dentro le scritte (resta per chi non ha il timbro): alto in em, così segue la misura di ogni formato */
.ann-nome-img { display: block; height: min(1.8em, 15vh); width: auto; max-width: 84vw; object-fit: contain;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.ann-nome small { font: 400 .55em "Potta One", var(--font); margin-left: .35em; color: #fff; -webkit-text-stroke: 0; }
.ann-sotto { margin: 0; max-width: 34em; font: 400 clamp(14px, 2.1vw, 20px)/1.35 var(--testo); color: #fff;
  background: rgba(10, 4, 20, .55); padding: .45em 1em; border-radius: 12px; opacity: 0; }
.entra .ann-sotto { animation: ann-su .5s ease-out both; animation-delay: var(--ds, 1.5s); }
@keyframes ann-pop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes ann-su { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }

.ann-eroe { height: min(34vh, 42vw); width: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); opacity: 0; }
.coop .ann-eroe { height: min(25vh, 22vw); margin: 0 -1.2vw; }

.ann-avanti { position: absolute; z-index: 4; bottom: 2.6vh; left: 0; right: 0; text-align: center; font-size: clamp(14px, 2.2vw, 20px);
  letter-spacing: 2px; color: #fff; text-shadow: 0 2px 0 #1b1020, 0 0 10px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.annuncio.pronta .ann-avanti { opacity: 1; animation: ann-respira 1.1s ease-in-out infinite; }
@keyframes ann-respira { 50% { transform: scale(1.08); } }

/* ---- particelle */
.ann-cor { position: absolute; top: -6vh; width: 10px; height: 16px; border-radius: 2px; animation: ann-cade linear both; }
.ann-cor.tondo { width: 11px; height: 11px; border-radius: 50%; }
@keyframes ann-cade { 0% { transform: translate3d(0, 0, 0) rotate(0) scale(var(--s)); }
  100% { transform: translate3d(var(--dx), 112vh, 0) rotate(var(--r)) scale(var(--s)); } }
.ann-sc { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; animation: ann-scoppio ease-out both; }
.ann-sc.grande { width: 11px; height: 11px; }
@keyframes ann-scoppio { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 7vmin)) scale(.25); opacity: 0; } }

/* ============================================================ C — JACKPOT (Ebi + co-op in 2) */
.ann-jackpot .ann-fondo { background-color: #1a0630;
  background-image: radial-gradient(circle at 50% 42%, #ff4fb0 0, #8a1ab8 40%, #1a0630 78%); }
.ann-jackpot .ann-fondo::before { left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: .22;
  background: repeating-conic-gradient(#ffe14a 0 6deg, transparent 6deg 18deg); animation: ann-gira 22s linear infinite; }
/* le lampadine della sala giochi, in alto e in basso, che si accendono a turno */
.ann-jackpot .ann-fondo::after { left: 0; right: 0; top: 1.2vh; height: 2.2vh; box-shadow: 0 95.6vh 0 0 transparent;
  background: radial-gradient(circle, #fff7b0 0 35%, #ffb400 45%, transparent 55%) 0 0/4.4vh 2.2vh repeat-x;
  animation: ann-lampadine .5s steps(2) infinite; }
.ann-jackpot .ann-fx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.2vh; height: 2.2vh;
  background: radial-gradient(circle, #fff7b0 0 35%, #ffb400 45%, transparent 55%) 2.2vh 0/4.4vh 2.2vh repeat-x;
  animation: ann-lampadine2 .5s steps(2) infinite; }
@keyframes ann-lampadine2 { 50% { background-position: 0 0; } }
@keyframes ann-lampadine { 50% { background-position: 2.2vh 0; } }
.ann-jackpot .ann-kicker { background: none; border: 0; box-shadow: none; transform: none; font-size: clamp(32px, 6.4vw, 66px);
  color: #fff; letter-spacing: 4px; text-shadow: 0 0 6px #fff, 0 0 18px #ff3fa4, 0 0 36px #ff3fa4, 0 0 60px #ff3fa4; }
/* l'insegna si appoggia sul bordo della slot: più spazio alla slot, e la slot resta al CENTRO in ogni formato */
.ann-jackpot .ann-kicker { position: relative; z-index: 2; margin-bottom: -2.6vh; }
.ann-jackpot .ann-pagina { gap: 1.1vh; }
.ann-jackpot .ann-titolo { font-size: clamp(28px, 6.2vw, 66px); }
.ann-jackpot .ann-nome-img { height: min(1.8em, 11vh); }        /* misurato: col nome alto la descrizione finiva sotto «tocca» */
.ann-jackpot .entra .ann-kicker { animation: ann-neon 2.4s 1.9s infinite; }
.ann-jackpot .ann-kicker .ann-l { animation-delay: calc(1850ms + var(--i) * 60ms); }
@keyframes ann-neon { 0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; } 20%, 62% { opacity: .35; } }
/* (16-10, utente: «la roulette falla più grande, coi personaggi più grandi e centrali») finestre ALTE (il ninja è più alto che
   largo) e il ritaglio che le riempie quasi tutte */
/* con il nome sotto (16-10: il nome scende e copre solo il 16% della slot) la slot si stringe un poco, o il testo
   finisce sotto «tocca per continuare» */
@media (orientation: landscape) { .con-nome .ann-slot { --h: min(33vh, 27vw); } }
.ann-slot { --h: min(38vh, 27vw); --w: calc(var(--h) * .86); display: flex; justify-content: center; gap: 1.4vh; padding: 1.6vh;
  border-radius: 20px; border: 5px solid #1b1020;
  background: linear-gradient(180deg, #ffe46a, #e8a020 60%, #b06a10); box-shadow: 0 7px 0 #1b1020, inset 0 0 0 3px rgba(255, 255, 255, .5); }
.ann-rullo { width: var(--w); height: var(--h); overflow: hidden; border-radius: 12px; border: 3px solid #1b1020;
  background: radial-gradient(circle at 50% 55%, #fff 0 45%, #e4dcf2 100%); }
.ann-striscia { will-change: transform; }
.ann-striscia img { display: block; width: var(--w); height: var(--h); object-fit: contain; object-position: 50% 55%; padding: 3%; box-sizing: border-box; }
.entra .ann-striscia { animation: ann-rullo calc(1000ms + var(--r) * 330ms) cubic-bezier(.12, .55, .3, 1.12) .25s both; }
@keyframes ann-rullo { from { transform: translateY(0); } to { transform: translateY(calc((1 - var(--n)) / var(--n) * 100%)); } }
.entra .ann-slot { animation: ann-vincita .9s ease-out 1.85s both; }
@keyframes ann-vincita { 0% { box-shadow: 0 6px 0 #1b1020, 0 0 0 0 rgba(255, 240, 120, .9); transform: scale(1); }
  30% { transform: scale(1.08); } 100% { box-shadow: 0 6px 0 #1b1020, 0 0 0 4vmin rgba(255, 240, 120, 0); transform: scale(1); } }
.ann-jackpot .ann-titolo .ann-l { color: hsl(calc(var(--i) * 41 + 300), 100%, 64%); }
.ann-jackpot .ann-nome { --dn: 2.5s; } .ann-jackpot .ann-sotto { --ds: 2.8s; }
.ann-moneta { position: absolute; top: -8vh; width: 5vmin; height: 5vmin; border-radius: 50%; border: 2px solid #8a5a00;
  background: radial-gradient(circle at 35% 30%, #fffbd0 0, #ffd23a 40%, #d89a10 75%); box-shadow: inset 0 0 0 .6vmin rgba(255, 255, 255, .25);
  animation: ann-moneta ease-in both; }
@keyframes ann-moneta { 0% { transform: translateY(0) rotateY(0) scale(var(--s)); } 100% { transform: translateY(118vh) rotateY(1080deg) scale(var(--s)); } }

/* ============================================================ A — MANGA (Maki + co-op in 3) */
.ann-manga .ann-fondo { background-color: #ffe7b0; }
.ann-manga .ann-fondo::before { left: 50%; top: 46%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(#fffaf0 0 3.5deg, var(--c1) 3.5deg 8deg); animation: ann-gira 30s linear infinite; }
.ann-manga .ann-fondo::after { inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .95) 0 14%, transparent 34%, rgba(27, 16, 32, .5) 100%); }
.ann-manga .ann-fx::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: ann-lampo .55s .5s ease-out both; }
@keyframes ann-lampo { 0% { opacity: .95; } 100% { opacity: 0; } }
.entra .ann-eroe { animation: ann-irruzione .7s cubic-bezier(.2, 1.5, .4, 1) .45s both; animation-delay: calc(.45s + var(--i, 0) * .14s); }
@keyframes ann-irruzione { 0% { opacity: 0; transform: scale(.15) rotate(-30deg); } 65% { opacity: 1; transform: scale(1.18) rotate(5deg); }
  100% { opacity: 1; transform: none; } }
.ann-manga .ann-kicker { background: #1b1020; color: #ffe14a; }
.ann-manga .ann-titolo .ann-l { color: #ffe14a; }
/* (16-10, utente: «il simbolo sulla faccia di Maki non sta bene») il timbro è un SIGILLO accanto all'etichetta, non
   sulla figura: misure in em dell'etichetta, così la segue in ogni formato */
.ann-kicker { position: relative; }
.ann-timbro { position: absolute; left: 100%; top: 50%; margin-left: .35em; translate: 0 -50%; z-index: 2; width: 1.9em; aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%; border: .12em solid #c0262d; color: #c0262d; background: rgba(255, 250, 240, .92);
  font: 400 1.1em/1 "Potta One", var(--font); letter-spacing: 0; opacity: 0; }
.entra .ann-timbro { animation: ann-timbro .9s cubic-bezier(.2, 1.6, .4, 1) .95s both; }
@keyframes ann-timbro { 0% { opacity: 0; transform: scale(2.6) rotate(-45deg); } 35% { opacity: 1; transform: scale(.9) rotate(-12deg); }
  100% { opacity: 1; transform: rotate(-12deg); } }
.annuncio.scossa { animation: ann-scossa .42s linear both; }
@keyframes ann-scossa { 0%, 100% { transform: none; } 15% { transform: translate(-1.4vmin, .8vmin); } 30% { transform: translate(1.2vmin, -1vmin); }
  45% { transform: translate(-.9vmin, -.6vmin); } 60% { transform: translate(.8vmin, .7vmin); } 80% { transform: translate(-.4vmin, .2vmin); } }

/* ============================================================ B — HANABI (Tobiko + co-op in 4) */
.ann-hanabi .ann-fondo { background-color: #070a2a; background-image: linear-gradient(180deg, #050722 0, #160c44 55%, #4a1658 100%); }
.ann-hanabi .ann-fondo::before { inset: 0; opacity: .9; animation: ann-stelle 2.6s ease-in-out infinite alternate;
  background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 28% 9%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 47% 23%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 66% 12%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 83% 27%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 91% 7%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 5% 40%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 73% 44%, #fff 50%, transparent 52%); }
@keyframes ann-stelle { to { opacity: .45; } }
/* lo skyline di Tokyo, nero, in basso */
.ann-hanabi .ann-fondo::after { left: 0; right: 0; bottom: 0; height: 24vh; background: #0a0618;
  clip-path: polygon(0 62%, 6% 62%, 6% 40%, 11% 40%, 11% 55%, 16% 55%, 16% 28%, 19% 20%, 22% 28%, 22% 58%, 29% 58%, 29% 36%, 35% 36%,
    35% 50%, 41% 50%, 41% 14%, 43% 6%, 45% 14%, 45% 46%, 52% 46%, 52% 32%, 58% 32%, 58% 54%, 64% 54%, 64% 24%, 70% 24%, 70% 44%,
    77% 44%, 77% 34%, 80% 26%, 83% 34%, 83% 52%, 90% 52%, 90% 38%, 96% 38%, 96% 60%, 100% 60%, 100% 100%, 0 100%); }
.ann-hanabi .ann-eroe { filter: drop-shadow(0 0 1.6vmin rgba(255, 200, 120, .55)) drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
.ann-hanabi .entra .ann-eroe, .ann-hanabi .ann-pagina.entra .ann-eroe { animation: ann-sale .8s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(.35s + var(--i, 0) * .16s); }
@keyframes ann-sale { 0% { opacity: 0; transform: translateY(40vh) scale(.7); } 70% { opacity: 1; transform: translateY(-3vh) scale(1.06); } 100% { opacity: 1; transform: none; } }
.ann-hanabi .ann-kicker { background: linear-gradient(90deg, #ff4a6a, #b46aff, #4ad0ff); }
.ann-hanabi .ann-titolo .ann-l { color: hsl(calc(var(--i) * 37 + 330), 100%, 66%);
  text-shadow: 0 .08em 0 #1b1020, 0 0 .35em hsla(calc(var(--i) * 37 + 330), 100%, 60%, .9); }
.ann-razzo { position: absolute; bottom: 0; width: 4px; height: 16px; margin-left: -2px; border-radius: 3px; box-shadow: 0 0 8px #fff;
  animation: ann-razzo .52s cubic-bezier(.3, .6, .5, 1) both; }
@keyframes ann-razzo { 0% { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(calc(var(--y) - 100vh)); opacity: 0; } }
.ann-hanabi .ann-sc { box-shadow: 0 0 8px currentColor; }

/* ============================================================ D — IL MAESTRO (Inari) */
.ann-maestro .ann-fondo { background-color: #ffb84a; background-image: radial-gradient(circle at 50% 46%, #fff6d8 0, #ffcf6a 40%, #e8602a 80%, #a8202a 100%); }
.ann-maestro .ann-fondo::before { left: 50%; top: 46%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: .25;
  background: repeating-conic-gradient(#fff 0 5deg, transparent 5deg 15deg); animation: ann-gira 40s linear infinite; }
.ann-maestro .ann-kicker { background: #c0262d; }
.ann-maestro .ann-titolo .ann-l { color: #fff4d0; }
/* la figura del Maestro (.ann-sensei): entra di corsa da sinistra */
.ann-pagina > .ann-sensei { position: absolute; left: -2%; bottom: 2%; width: min(30vh, 24vw); aspect-ratio: 1; display: grid; place-items: center; opacity: 0; }
.ann-pagina.entra > .ann-sensei { animation: ann-corsa .8s cubic-bezier(.2, 1.3, .4, 1) .2s both; }
@keyframes ann-corsa { 0% { opacity: 0; transform: translateX(-60vw) rotate(-12deg); } 70% { opacity: 1; transform: translateX(2vw) rotate(4deg); } 100% { opacity: 1; transform: none; } }
.ann-sensei > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)); }
.ann-sensei-ripiego { width: 70%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #c0262d; color: #fff;
  font: 400 min(12vh, 10vw)/1 "Potta One", var(--font); border: 4px solid #1b1020; box-shadow: 0 5px 0 #1b1020; }
/* (16-10, utente: «meglio il personaggio scontornato») niente pergamena attorno: il ninja libero sul fondale, con un'AUREOLA
   dorata dietro che si accende (e la sua luce che pulsa piano) */
.ann-aureola { position: absolute; z-index: -1; left: 50%; top: 52%; width: 125%; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 240, .95) 0 22%, rgba(255, 214, 107, .75) 38%, rgba(255, 160, 60, .25) 56%, transparent 70%); }
.entra .ann-aureola { animation: ann-aureola .7s cubic-bezier(.2, 1.5, .4, 1) .4s both, ann-respira-aureola 2.4s ease-in-out 1.1s infinite; }
@keyframes ann-aureola { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ann-respira-aureola { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.ann-maestro .ann-nome { --dn: 1.6s; color: #fff; } .ann-maestro .ann-sotto { --ds: 1.9s; }
.ann-petalo { position: absolute; top: -6vh; width: 12px; height: 8px; border-radius: 60% 0; background: #ff9ec0; opacity: .9;
  animation: ann-petalo linear infinite both; }
@keyframes ann-petalo { 0% { transform: translate(0, 0) rotate(0) scale(var(--s)); } 50% { transform: translate(8vw, 55vh) rotate(200deg) scale(var(--s)); }
  100% { transform: translate(-4vw, 112vh) rotate(420deg) scale(var(--s)); } }

/* ============================================================ LA VIA DELLA VOLPE (ad hoc: nero e oro) */
.ann-volpe { --c1: #ffd56b; --c2: #1a1622; }
.ann-volpe .ann-fondo { background-color: #050308; background-image: radial-gradient(circle at 50% 40%, #4a3208 0, #160c14 42%, #050308 78%); }
.ann-volpe .ann-fondo::before { inset: 0; display: grid; place-items: center; content: "狐の道"; font: 400 min(34vh, 26vw)/1 "Potta One", var(--font);
  color: rgba(255, 213, 107, .07); letter-spacing: .05em; }
.ann-volpe .ann-fondo::after { left: 50%; top: 40%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: .12;
  background: repeating-conic-gradient(#ffd56b 0 2deg, transparent 2deg 14deg); animation: ann-gira 60s linear infinite; }
/* (16-10, utente: «segreto scoperto non si legge, serve il bordo nero esterno»): stava giallo su giallo, davanti alla luna
   del fondale → contorno nero FUORI dalle lettere (paint-order) + ombra scura, e un po' più grande */
.ann-volpe .ann-kicker { background: none; border: 0; box-shadow: none; transform: none; color: #ffd56b; letter-spacing: .2em;
  font-size: clamp(20px, 3.8vw, 38px); -webkit-text-stroke: .18em #1b1020; paint-order: stroke fill;
  text-shadow: 0 .1em 0 #1b1020, 0 0 .5em rgba(0, 0, 0, .75); }
.ann-volpe .ann-titolo .ann-l { color: #ffd56b; text-shadow: 0 .08em 0 #1b1020, 0 0 .4em rgba(255, 200, 80, .8); }
.ann-volpe .ann-nome { color: #fff3c0; }
.ann-volpe .entra .ann-eroe, .ann-volpe .ann-pagina.entra .ann-eroe { animation: ann-accendi 1.6s ease-out .2s both; }
@keyframes ann-accendi { 0% { opacity: 0; transform: scale(.85); filter: brightness(0); } 25% { opacity: 1; filter: brightness(0) drop-shadow(0 0 1vmin #8a6aff); }
  70% { transform: scale(.95); filter: brightness(0) drop-shadow(0 0 2.5vmin #ffd56b); } 78% { transform: scale(1.08); filter: brightness(2.6) drop-shadow(0 0 4vmin #ffd56b); }
  100% { opacity: 1; transform: none; filter: brightness(1) drop-shadow(0 0 2vmin rgba(255, 213, 107, .6)); } }
.ann-volpe .ann-nome { --dn: 1.6s; } .ann-volpe .ann-sotto { --ds: 1.9s; }
.ann-fuocov { position: absolute; width: 7vmin; height: 9vmin; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 65%, #f0e6ff 0, #a88aff 28%, #5a2ad8 55%, transparent 72%); mix-blend-mode: screen;
  animation: ann-fuocov ease-in-out infinite both; }
@keyframes ann-fuocov { 0% { opacity: 0; transform: translateY(0) scale(calc(var(--s) * .6)); } 25% { opacity: .9; }
  50% { transform: translateY(-14vh) scale(var(--s)) rotate(6deg); } 75% { opacity: .7; }
  100% { opacity: 0; transform: translateY(-30vh) scale(calc(var(--s) * .5)) rotate(-6deg); } }
.ann-volpe .ann-sc { box-shadow: 0 0 8px currentColor; }
/* fuochi volpini e fuochi d'artificio DIETRO le scritte (le monete e i coriandoli degli altri passano davanti) */
.ann-volpe .ann-fx, .ann-hanabi .ann-fx { z-index: 1; }

@keyframes ann-gira { to { transform: rotate(360deg); } }

/* ---- col FONDALE DIPINTO (img/annunci/fondo-<stile>.webp, js: classe .con-arte): via i doppioni disegnati in CSS
   (lampadine, stelle, skyline, vignetta), restano i raggi che girano — più leggeri — e il fondale «respira» piano */
.con-arte .ann-fondo { animation: ann-respiro-fondo 16s ease-in-out infinite alternate; }
@keyframes ann-respiro-fondo { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, -1%); } }
.con-arte .ann-fondo::after, .con-arte.ann-jackpot .ann-fx::after, .con-arte.ann-hanabi .ann-fondo::before { display: none; }
.con-arte.ann-jackpot .ann-fondo::before { opacity: .1; }
.con-arte.ann-manga .ann-fondo::before { opacity: .16; }
.con-arte.ann-maestro .ann-fondo::before { opacity: .14; }
.con-arte.ann-volpe .ann-fondo::before { opacity: .6; }
body.ridotti .con-arte .ann-fondo { animation: none; }
@media (prefers-reduced-motion: reduce) { .con-arte .ann-fondo { animation: none; } }

/* ============================================================ lo STRATO VIVO (tutti gli stili, sotto le scritte) */
.ann-dietro { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  --linee: rgba(255, 255, 255, .75); --op-linee: .55; --stella: #fff; --kanji: rgba(255, 255, 255, .1); --burst: rgba(255, 240, 150, .75); }
.ann-jackpot { --burst: rgba(255, 240, 120, .8); }
.ann-manga .ann-dietro { --linee: #1b1020; --op-linee: .5; --kanji: rgba(27, 16, 32, .1); }
.ann-manga { --burst: rgba(255, 255, 255, .95); }
.ann-hanabi .ann-dietro { --linee: rgba(255, 255, 255, .3); --op-linee: .45; }
.ann-hanabi { --burst: rgba(255, 150, 220, .5); }
.ann-maestro .ann-dietro { --linee: rgba(255, 255, 255, .85); --stella: #fff6c8; --kanji: rgba(140, 20, 30, .12); }
.ann-volpe .ann-dietro { --linee: rgba(255, 213, 107, .45); --stella: #ffd56b; --kanji: rgba(255, 213, 107, .09); }
.ann-volpe { --burst: rgba(255, 213, 107, .45); }
/* le linee di concentrazione dei manga: fitte ai bordi, vuote al centro, che SFRIGOLANO */
.ann-concentrazione { position: absolute; inset: -12%; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 46%, var(--linee) 0 .45deg, transparent .45deg 2.4deg);
  -webkit-mask: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 0 46%, #000 92%);
  mask: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 0 46%, #000 92%);
  animation: ann-sfrigola .18s steps(1) infinite, ann-appare .5s ease-out .25s forwards; }
@keyframes ann-sfrigola { 0% { transform: rotate(0); } 33% { transform: rotate(1.2deg) scale(1.015); } 66% { transform: rotate(-.9deg) scale(.995); } }
@keyframes ann-appare { to { opacity: var(--op-linee); } }
.ann-stella { position: absolute; width: 2.6vmin; height: 2.6vmin; background: var(--stella); opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px var(--stella)); animation: ann-brilla ease-in-out infinite both; }
@keyframes ann-brilla { 0%, 100% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(var(--s)) rotate(90deg); } }
.ann-kanji { position: absolute; top: 100%; font-family: "Potta One", var(--font); line-height: 1; color: var(--kanji);
  animation: ann-kanji linear infinite both; }
@keyframes ann-kanji { 0% { transform: translateY(10vh) rotate(var(--r)); } 100% { transform: translateY(-140vh) rotate(calc(var(--r) * -1)); } }
/* le onomatopee (img/ono): esplodono, restano un attimo, volano via */
.ann-sopra { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.ann-ono { position: absolute; height: auto; translate: -50% -50%; opacity: 0;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: ann-ono 1.25s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ann-ono { 0% { opacity: 0; transform: scale(0) rotate(calc(var(--r) - 25deg)); } 22% { opacity: 1; transform: scale(1.3) rotate(var(--r)); }
  38% { transform: scale(1) rotate(var(--r)); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12) translateY(-5vh) rotate(var(--r)); } }
/* la raggiera dietro il ninja (il Maestro ha l'aureola): entra di colpo, poi gira */
.ann-burst { position: absolute; z-index: -1; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(var(--burst) 0 6deg, transparent 6deg 14deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 0 16%, rgba(0, 0, 0, .8) 30%, transparent 66%);
  mask: radial-gradient(circle, #000 0 16%, rgba(0, 0, 0, .8) 30%, transparent 66%); }
.entra .ann-burst { animation: ann-burst-entra .6s cubic-bezier(.2, 1.6, .4, 1) .35s both, ann-gira 10s linear 1s infinite; }
@keyframes ann-burst-entra { 0% { opacity: 0; transform: scale(.15); } 100% { opacity: 1; transform: scale(1); } }
.ann-jackpot .ann-burst { width: 115%; }
/* il ninja, finita l'entrata, galleggia */
.entra .ann-eroi { animation: ann-galleggia 2.8s ease-in-out 1.8s infinite; }
@keyframes ann-galleggia { 50% { transform: translateY(-1.4vh); } }
body.ridotti .annuncio .ann-concentrazione, body.ridotti .annuncio .ann-burst, body.ridotti .annuncio .ann-eroi { animation-iteration-count: 1; }

/* ---- orizzontale e basso (telefono girato): figure a sinistra, scritte a destra */
@media (orientation: landscape) and (max-height: 560px) {
  .ann-pagina { grid-template-areas: "kicker kicker" "eroi testi"; grid-template-columns: auto minmax(0, 56vw); column-gap: 3vw; gap: 1.4vh 3vw; }
  .ann-eroe { height: min(52vh, 34vw); }
  .coop .ann-eroe { height: min(38vh, 16vw); }
  /* il jackpot resta IN COLONNA e centrato (utente: «la roulette è ancora piccola e decentrata»): slot grande al centro,
     scritte strette sotto */
  .ann-jackpot .ann-pagina { grid-template-areas: "kicker" "eroi" "testi"; grid-template-columns: auto; gap: .8vh; }
  .ann-slot { --h: min(33vh, 20vw); padding: 1.2vh; gap: 1vh; }
  .con-nome .ann-slot { --h: min(28vh, 20vw); }
  .ann-jackpot .ann-pagina { gap: .4vh; }
  .ann-jackpot .ann-kicker { font-size: clamp(22px, 4.4vw, 42px); margin-bottom: -2vh; }
  .ann-jackpot .ann-titolo { font-size: clamp(22px, 4.6vw, 44px); }
  .ann-jackpot .ann-nome { font-size: clamp(20px, 4vw, 38px); }
  .ann-jackpot .ann-sotto { font-size: clamp(12px, 1.8vw, 16px); padding: .3em .9em; }
  .ann-jackpot .ann-testi { gap: .5vh; }
  .ann-titolo { font-size: clamp(26px, 5.2vw, 56px); }
  .ann-kicker { font-size: clamp(18px, 3.4vw, 32px); }
  .ann-pagina > .ann-sensei { width: min(30vh, 15vw); left: -1%; top: -2%; bottom: auto; }
}
/* ---- verticale (telefono in mano): tutto più grande, il Maestro sopra la scritta invece che di lato */
@media (orientation: portrait) {
  .ann-pagina { gap: 2vh; grid-template-areas: "sensei" "kicker" "eroi" "testi"; }
  .ann-eroe { height: min(30vh, 72vw); }
  .coop .ann-eroe { height: min(19vh, 27vw); margin: 0 -3vw; }
  /* 3 finestre × 0,86 × 32vw + spazi + cornice = ~93vw: entra nei 94vw della pagina e resta centrata */
  .ann-slot { --h: min(31vh, 32vw); gap: .8vh; padding: 1vh; }
  .ann-titolo { font-size: clamp(32px, 10.5vw, 78px); }
  .ann-nome { font-size: clamp(30px, 10vw, 62px); }
  .ann-kicker { font-size: clamp(20px, 6.4vw, 38px); }
  .ann-jackpot .ann-kicker { font-size: clamp(40px, 15vw, 84px); }
  .ann-volpe .ann-kicker { font-size: clamp(22px, 6.6vw, 40px); }
  .ann-sotto { font-size: clamp(15px, 4.2vw, 20px); }
  .ann-pagina > .ann-sensei { position: relative; grid-area: sensei; left: auto; bottom: auto; width: min(13vh, 28vw); }
  .ann-maestro .ann-eroe { height: min(25vh, 62vw); }
}

/* ---- meno movimento: niente raggi che girano né scossoni */
body.ridotti .annuncio .ann-fondo::before, body.ridotti .annuncio .ann-fondo::after { animation: none; }
body.ridotti .annuncio.scossa { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .annuncio .ann-fondo::before, .annuncio .ann-fondo::after { animation: none; }
  .annuncio.scossa { animation: none; }
}