/* NINJA UZI SUSHI — i FUMETTI della storia (13-10, js/fumetti.js). Fondo di carta retinata, strisce impilate con la
   cornice d'inchiostro; «calma» scivola e si schiarisce, «irrompe» piomba di traverso con linee di velocità e lampo. */
.fumetto { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; gap: 1.2vh;
  padding: max(10px, env(safe-area-inset-top)) clamp(10px, 4vw, 60px) max(10px, env(safe-area-inset-bottom)); cursor: pointer;
  user-select: none; -webkit-user-select: none; animation: fum-apri .3s ease-out both; }
.fumetto[hidden] { display: none; }
.fumetto.via { animation: fum-chiudi .26s ease-in both; }
@keyframes fum-apri { from { opacity: 0; } }
@keyframes fum-chiudi { to { opacity: 0; } }
.fum-sfondo { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(circle at 1px 1px, rgba(42,34,56,.16) 1px, transparent 1.6px) 0 0 / 7px 7px,
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0) 0 6deg, rgba(255,225,77,.09) 6deg 8deg),
  linear-gradient(180deg, #fbf3df, #ead9b4); }
.fumetto.scossa .fum-tavola { animation: fum-scossa .32s linear; }
@keyframes fum-scossa { 20% { transform: translate(-7px, 4px) rotate(-.4deg); } 40% { transform: translate(6px, -5px); }
  60% { transform: translate(-4px, 3px) rotate(.3deg); } 80% { transform: translate(3px, -2px); } }
.fum-titolo { justify-self: center; display: flex; align-items: center; gap: 10px; padding: 4px 18px 4px 6px; border-radius: 30px;
  font: 400 clamp(16px, 2.6vh, 24px) var(--font); letter-spacing: 1.5px; color: #fff; background: var(--inchiostro);
  box-shadow: 0 3px 0 var(--lacca); }
/* (13-10) telefono in verticale: centrato, il titolo finiva SOTTO «SALTA» → a sinistra, e va a capo prima del pulsante */
@media (max-width: 700px) { .fum-titolo { justify-self: start; max-width: calc(100% - 140px); font-size: 15px; line-height: 1.15; letter-spacing: 1px; padding-block: 5px; border-radius: 20px; } }
.fum-titolo span { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--lacca);
  font: 900 .8em var(--cjk); }
.fum-tavola { display: grid; grid-template-rows: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.6vh; min-height: 0;
  /* strisce larghe al massimo 3:1 (le illustrazioni sono 21:9: un poco si taglia in alto e in basso, mai ai lati) */
  width: min(100%, calc((100vh - 130px) / var(--n, 3) * 3)); justify-self: center; }
.fum-striscia { position: relative; min-height: 0; border: 4px solid var(--inchiostro); border-radius: 4px; overflow: hidden;
  background: #1b1430; box-shadow: 6px 6px 0 rgba(42,34,56,.85); opacity: 0; transform: rotate(var(--tilt, 0deg)); }
.fum-striscia img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* (13-10) utente: «strisce a velocità diverse e un po' storte, che appaiono A TRATTI, simulando il taglio di una katana».
   Ogni striscia ha la sua inclinazione (--tilt) e la sua durata (--dur, js/fumetti.js); si apre in DUE TAGLI diagonali
   (clip-path): il primo scopre metà, una pausa, il secondo il resto; a ogni taglio passa la LAMA (lampo bianco e oro) */
.fum-striscia.entra { opacity: 1; animation: fum-taglio var(--dur, .7s) both; }
@keyframes fum-taglio {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  30% { clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%); animation-timing-function: steps(1, end); }
  52% { clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%); }
  78% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.fum-lama { position: absolute; inset: -10% -30%; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(104deg, transparent 47.4%, rgba(255,255,255,.95) 49.6%, #ffe14d 50%, rgba(255,255,255,.95) 50.4%, transparent 52.6%); }
.fum-striscia.entra .fum-lama { animation: fum-lama var(--dur, .7s) both; }
@keyframes fum-lama { 0%, 18% { opacity: 0; transform: translateX(-34%); } 28% { opacity: 1; transform: translateX(-6%); } 36% { opacity: 0; transform: translateX(4%); }
  56% { opacity: 0; transform: translateX(8%); } 70% { opacity: 1; transform: translateX(30%); } 80%, 100% { opacity: 0; transform: translateX(44%); } }
/* CALMA: lenta, e l'immagine si schiarisce mentre si apre; poi la camera respira piano */
.fum-striscia.calma.entra img { animation: fum-schiara calc(var(--dur, 1s) * 1.3) ease-out both, fum-respira 9s ease-in-out calc(var(--dur, 1s) * 1.3) infinite alternate; }
@keyframes fum-schiara { from { filter: brightness(.35) saturate(.6); } }
@keyframes fum-respira { to { transform: scale(1.05) translate(-1%, -1%); } }
/* IRROMPE: rapida, poi un PUGNO (scatto avanti e ritorno), lampo bianco e linee di velocità */
.fum-striscia.irrompe.entra { animation: fum-taglio var(--dur, .45s) both, fum-pugno .3s calc(var(--dur, .45s) * .8) both; }
@keyframes fum-pugno { 0% { transform: rotate(var(--tilt, 0deg)) scale(1); } 35% { transform: rotate(calc(var(--tilt, 0deg) * 2.2)) scale(1.06); } 100% { transform: rotate(var(--tilt, 0deg)) scale(1); } }
/* ‼️ il lampo resta SPENTO durante l'attesa (opacity 0 e niente «both»): con «both» copriva di bianco la striscia mentre
   si apriva col primo taglio */
.fum-striscia.irrompe.entra::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  animation: fum-lampo .35s calc(var(--dur, .45s) * .75) ease-out forwards; }
@keyframes fum-lampo { from { opacity: .95; } to { opacity: 0; } }
.fum-velocita { position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.9) 0 1.2deg, transparent 1.2deg 7deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 62%); mask: radial-gradient(circle, transparent 38%, #000 62%); }
.fum-striscia.irrompe.entra .fum-velocita { animation: fum-linee .7s ease-out; }
@keyframes fum-linee { 0% { opacity: .9; transform: scale(1.25) rotate(0); } 100% { opacity: 0; transform: scale(1) rotate(4deg); } }
.fum-striscia.subito { transition: none !important; animation: none !important; clip-path: none; }
.fum-striscia.subito::after, .fum-striscia.subito .fum-velocita, .fum-striscia.subito .fum-lama { animation: none !important; opacity: 0; }
.fum-striscia.subito img { animation: none !important; }
.fum-striscia.esce-s { animation: fum-esce-s .3s ease-in both !important; }
.fum-striscia.esce-d { animation: fum-esce-d .3s ease-in both !important; }
@keyframes fum-esce-s { to { transform: translateX(-130%) rotate(-5deg); opacity: 0; } }
@keyframes fum-esce-d { to { transform: translateX(130%) rotate(5deg); opacity: 0; } }
/* l'ONOMATOPEA, enorme e storta */
.fum-ono { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-10deg); font: 400 clamp(30px, 8vh, 84px)/1 var(--font);
  letter-spacing: 2px; color: #ffe14d; -webkit-text-stroke: 3px var(--inchiostro); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--lacca);
  animation: fum-ono .5s cubic-bezier(.2,1.8,.4,1) both; pointer-events: none; white-space: nowrap; }
@keyframes fum-ono { from { transform: translate(-50%, -50%) rotate(-30deg) scale(2.6); opacity: 0; } }
/* la VIGNETTA: bianca, contorno d'inchiostro, punta in basso; il nome di chi parla in un cartellino rosso */
/* width max-content: la larghezza non dipende da dove sta (con «left» alto il riquadro si stringeva), così la misura del
   lettore vale ovunque; --coda = dove sta la codina (verso chi parla); .coda-su = la codina in alto */
.fum-vignetta { position: absolute; transform: translate(-50%, 0); width: max-content; max-width: 44%; padding: 8px 12px 9px; border-radius: 18px;
  background: #fff; border: 3px solid var(--inchiostro); box-shadow: 3px 4px 0 rgba(42,34,56,.6);
  font: 400 clamp(12px, 2.1vh, 19px)/1.3 var(--testo); color: var(--inchiostro); animation: fum-vig .28s cubic-bezier(.2,1.6,.4,1) both; }
.fum-vignetta.subito { animation: none; }
/* striscia bassa (telefono in orizzontale): tre righe da 12 px erano mezza striscia, e coprivano per forza qualcuno */
/* ‼️ il margine in alto resta largo: il cartellino col nome scende di ~8 px dentro la vignetta e copriva la prima riga */
.fum-striscia.bassa .fum-vignetta { font-size: 11px; line-height: 1.22; padding: 10px 9px 6px; border-width: 2px; border-radius: 13px; }
.fum-striscia.bassa .fum-vignetta small { font-size: .8em; }
.fum-vignetta small { position: absolute; top: -.95em; left: 10px; padding: 1px 8px; border-radius: 8px; font: 400 .75em var(--font);
  letter-spacing: 1px; color: #fff; background: var(--lacca); border: 2px solid var(--inchiostro); }
.fum-vignetta::after { content: ""; position: absolute; left: var(--coda, 30%); bottom: -14px; border: 9px solid transparent; border-top: 12px solid var(--inchiostro); }
.fum-vignetta::before { content: ""; position: absolute; left: calc(var(--coda, 30%) + 3px); bottom: -8px; z-index: 1; border: 6px solid transparent; border-top: 9px solid #fff; }
.fum-vignetta.coda-su::after { bottom: auto; top: -14px; border-top: 9px solid transparent; border-bottom: 12px solid var(--inchiostro); }
.fum-vignetta.coda-su::before { bottom: auto; top: -8px; border-top: 6px solid transparent; border-bottom: 9px solid #fff; }
@keyframes fum-vig { from { transform: translate(-50%, 0) scale(.3); opacity: 0; } }
.fum-continua { position: absolute; right: 3%; bottom: 8%; font: 400 clamp(22px, 5vh, 52px) var(--font); letter-spacing: 3px; color: #fff;
  -webkit-text-stroke: 2px var(--inchiostro); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--lacca); animation: fum-ono .6s ease-out both; }
.fum-salta { position: absolute; right: clamp(10px, 3vw, 40px); top: max(10px, env(safe-area-inset-top)); padding: 6px 14px;
  font: 400 15px var(--font); letter-spacing: 1px; color: #fff; background: rgba(42,34,56,.85); border: 2px solid var(--oro); border-radius: 20px; }
.fum-avanti { justify-self: end; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font: 400 22px var(--font);
  color: #fff; background: var(--lacca); border: 3px solid var(--inchiostro); opacity: 0; transition: opacity .3s; }
.fum-avanti.pronta { opacity: 1; animation: fum-pulsa 1s ease-in-out infinite; }
@keyframes fum-pulsa { 50% { transform: translateX(5px) scale(1.08); } }
/* (13-10) i COLPI a sorpresa: FORI di proiettile sul vetro dello schermo e SHURIKEN che si piantano */
.fum-colpi { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.fum-foro, .fum-shuriken { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
/* il FORO: vetro crepato in SVG — crepe frastagliate a raggiera (bianche col filo scuro), un anello rotto, il buco al centro */
.fum-foro { width: clamp(80px, 17vh, 170px); aspect-ratio: 1; animation: fum-foro .16s cubic-bezier(.2,1.8,.4,1) both;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.55));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%232a2238' stroke-width='2.6' opacity='.55'%3E%3Cpath d='M50 50 L57 37 L61 28 L66 12 L69 3M50 50 L64 47 L78 44 L90 39 L98 38M50 50 L60 62 L70 71 L77 83 L84 95M50 50 L48 64 L45 76 L41 90 L39 99M50 50 L37 56 L24 63 L13 66 L2 71M50 50 L40 41 L29 33 L19 22 L9 14M50 50 L49 36 L47 24 L50 13 L48 2M61 28 L72 25M70 71 L80 66M24 63 L22 74M29 33 L22 37'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M50 50 L57 37 L61 28 L66 12 L69 3M50 50 L64 47 L78 44 L90 39 L98 38M50 50 L60 62 L70 71 L77 83 L84 95M50 50 L48 64 L45 76 L41 90 L39 99M50 50 L37 56 L24 63 L13 66 L2 71M50 50 L40 41 L29 33 L19 22 L9 14M50 50 L49 36 L47 24 L50 13 L48 2M61 28 L72 25M70 71 L80 66M24 63 L22 74M29 33 L22 37'/%3E%3Cpath d='M36 42 L44 34 L56 33 L65 41 L67 53 L61 64 L49 68 L38 62 L33 51Z' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M42 46 L47 41 L55 42 L58 49 L55 57 L47 58 L42 53Z' fill='%230b0710' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M46 46 L52 45' stroke='%23575066' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes fum-foro { from { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(2.2); opacity: 0; } }
.fum-shuriken { width: clamp(44px, 8vh, 84px); aspect-ratio: 1; filter: drop-shadow(3px 4px 0 rgba(42,34,56,.7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 L61 39 L97 50 L61 61 L50 97 L39 61 L3 50 L39 39Z' fill='%23cfd5df' stroke='%232a2238' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M50 9 L58 41 M91 50 L59 58' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%232a2238'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%238a90a0'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: fum-vola .28s cubic-bezier(.3,.1,.4,1) both, fum-vibra .5s .28s ease-out both; }
@keyframes fum-vola { from { transform: translate(-50%, -50%) translate(var(--dx, 60vw), var(--dy, -40vh)) rotate(-1080deg) scale(1.5); } }
@keyframes fum-vibra { 0% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 9deg)); } 25% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) - 6deg)); }
  50% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 3deg)); } 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); } }
.fum-foro.subito, .fum-shuriken.subito { animation: none; }
/* la GALLERIA nel menu */
/* (16-10) foto dell'utente: le carte si SOVRAPPONEVANO (righe da 38 px, ogni carta coperta dalla seguente: sembrava
   un'immagine caricata a metà). Con `overflow: hidden` la carta non ha altezza minima, e la griglia schiacciata dal
   pannello stringeva le righe sotto l'aspect-ratio: le righe ora sono alte quanto la carta e la galleria scorre */
.fum-galleria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: max-content; gap: 14px; padding: 4px;
  min-height: 0; overflow: auto; }
.fum-carta { position: relative; padding: 0; border: 3px solid var(--inchiostro); border-radius: 8px; overflow: hidden; background: #1b1430;
  box-shadow: 4px 4px 0 rgba(42,34,56,.7); text-align: left; cursor: pointer; aspect-ratio: 21 / 11; }
.fum-carta img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.fum-carta:hover img { transform: scale(1.06); }
.fum-carta b { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font: 400 clamp(14px, 2vw, 18px)/1.15 var(--font); letter-spacing: 1px;
  color: #fff; background: linear-gradient(0deg, rgba(26,15,46,.95), rgba(26,15,46,0)); }
.fum-carta.chiusa { cursor: default; background: repeating-linear-gradient(45deg, #2a2238 0 12px, #332a44 12px 24px); }
.fum-carta.chiusa i { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(34px, 6vw, 60px) var(--cjk); color: rgba(255,255,255,.18); font-style: normal; }
@media (prefers-reduced-motion: reduce) {
  .fum-striscia, .fum-striscia.entra, .fum-striscia.entra img, .fum-lama, .fum-ono, .fum-vignetta, .fum-avanti.pronta, .fumetto.scossa .fum-tavola { animation: none !important; transition: none !important; }
  .fum-striscia.entra { clip-path: none; }
}