/* Ninja Uzi Sushi — la LANDING /welcome (17-10). Stessa identità del gioco (nus.css): lacca rossa, oro, inchiostro, carta di
   riso, onde seigaiha, Bangers / Yusei Magic / Potta One. Alternanza NOTTE (viola scuro) / CARTA (crema) / LACCA (rosso)
   come la landing di NICEtoREADtoo (skill 35 §12). ‼️ Le comparse partono VISIBILI dal CSS: la dissolvenza la toglie il JS
   (landing.js), così senza JS la pagina resta leggibile. */
:root {
  --lacca: #c0262d; --lacca-scura: #7a1018; --nero: #1b1020; --ink: #2a2238; --oro: #ffd56b; --oro-scuro: #c8902a;
  --riso: #fbf3df; --riso-ombra: #ead9b4; --notte: #140b22; --notte2: #22123a; --rosa: #ff4f9b; --ciano: #3fe0ff;
  --font: Bangers, Impact, "Arial Black", sans-serif; --testo: "Yusei Magic", "Segoe UI", system-ui, sans-serif;
  --asia: "Potta One", "Segoe UI", system-ui, sans-serif; --cjk: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Cg id='w'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3Ccircle cx='40' cy='40' r='28'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3C/g%3E%3Cuse href='%23w' x='-40' y='-20'/%3E%3Cuse href='%23w' x='40' y='-20'/%3E%3Cuse href='%23w' x='-40' y='20'/%3E%3Cuse href='%23w' x='40' y='20'/%3E%3C/g%3E%3C/svg%3E");
  --asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cg fill='none' stroke='%23c8902a' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M0 0 L30 17 L60 0 M30 17 L30 52 M0 52 L30 52 L60 52 M0 0 L0 104 M60 0 L60 104 M0 52 L30 69 L60 52 M30 69 L30 104 M0 104 L30 87 L60 104 M30 17 L0 52 M30 17 L60 52 M30 87 L0 52 M30 87 L60 52'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--notte); color: #fff; font: 400 17px/1.55 var(--testo); overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: inherit; }
b { font-weight: 400; color: var(--oro); }
.carta b { color: var(--lacca); }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 20px; position: relative; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- tipografia */
.kicker { display: inline-block; font: 400 clamp(14px, 1.6vw, 17px)/1 var(--asia); letter-spacing: .08em; color: #fff;
  background: var(--lacca); border: 3px solid var(--nero); border-radius: 9px; padding: .45em .9em .4em; box-shadow: 0 4px 0 var(--nero);
  transform: rotate(-2deg); text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font); font-weight: 400; letter-spacing: .02em; margin: 0; }
h2 { font-size: clamp(38px, 6.2vw, 78px); line-height: .98; margin: 18px 0 14px; color: #fff;
  -webkit-text-stroke: .055em var(--nero); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--nero), 0 .12em 0 var(--lacca); }
.carta h2 { color: var(--oro); }
.lead { font-size: clamp(17px, 1.9vw, 21px); max-width: 720px; margin: 0 0 28px; }
.centro { text-align: center; } .centro .lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- sezioni */
section { position: relative; padding: clamp(70px, 11vh, 130px) 0; overflow: hidden; }
.notte { background: radial-gradient(1100px 520px at 15% 0%, rgba(120, 50, 200, .35), transparent 60%),
  radial-gradient(900px 500px at 90% 100%, rgba(192, 38, 45, .28), transparent 60%), var(--seigaiha), var(--notte); }
.carta { background: var(--asanoha), var(--riso); color: var(--ink); }
.lacca { background: radial-gradient(900px 500px at 50% 0%, rgba(255, 213, 107, .25), transparent 60%), var(--seigaiha),
  linear-gradient(180deg, #a71f27, #6d0f17); }
/* il bordo fra le sezioni: una fascia di tegole/onde come i tetti del gioco */
.taglio::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 26px; z-index: 2;
  background: radial-gradient(circle at 20px -6px, transparent 22px, var(--sopra, var(--notte)) 23px) 0 0 / 40px 26px repeat-x; }
.bagliore { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none;
  animation: deriva 18s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate(60px, -40px) scale(1.15); } }

/* ---------------------------------------------------------------- barra in alto */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  transition: background .3s, box-shadow .3s; }
.nav.piena { background: rgba(20, 11, 34, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.nav .marchio { height: 38px; width: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); opacity: 0; transition: opacity .3s; }
.nav.piena .marchio { opacity: 1; }
.nav .spazio { flex: 1; }
.nav .lingua { font: 400 15px var(--font); letter-spacing: 1px; text-decoration: none; padding: 6px 10px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 8px; }
.nav .gioca { font: 400 18px var(--font); letter-spacing: 1px; text-decoration: none; color: var(--nero); background: linear-gradient(180deg, #ffe58a, #ffc23a);
  border: 3px solid var(--nero); border-radius: 10px; padding: 5px 16px; box-shadow: 0 4px 0 var(--nero); }

/* ---------------------------------------------------------------- bottoni */
.cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 240px; padding: 14px 26px 12px;
  text-decoration: none; border: 4px solid var(--nero); border-radius: 16px; box-shadow: 0 7px 0 var(--nero), 0 14px 30px rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s; cursor: pointer; position: relative; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--nero), 0 18px 34px rgba(0, 0, 0, .4); }
.btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--nero); }
.btn span { font: 400 clamp(26px, 3vw, 34px)/1 var(--font); letter-spacing: 1.5px; }
.btn small { font: 400 13px/1.2 var(--testo); margin-top: 5px; opacity: .92; }
.btn-rosso { background: linear-gradient(180deg, #ff5a4e, #c0262d 60%, #9c1a22); color: #fff; }
.btn-rosso span { -webkit-text-stroke: 1.5px var(--nero); paint-order: stroke fill; text-shadow: 0 3px 0 var(--nero); }
.btn-oro { background: linear-gradient(180deg, #fff2a8, #ffd56b 55%, #e8a52a); color: var(--nero); }
.btn::after { content: ""; position: absolute; inset: 4px 10px auto; height: 38%; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent); pointer-events: none; }

/* ---------------------------------------------------------------- HERO */
.hero { min-height: 100svh; display: grid; place-items: center; padding: 90px 0 70px; text-align: center; background: #0d0718; isolation: isolate; }
.hero-video, .hero-velo, .hero-linee { position: absolute; inset: 0; z-index: -1; }
.hero-video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05) blur(1.6px); transform: scale(1.03); }
.hero-velo { background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(13, 7, 24, .62), rgba(13, 7, 24, .38) 60%, rgba(13, 7, 24, .78) 100%),
  linear-gradient(180deg, rgba(13, 7, 24, .55), rgba(13, 7, 24, .15) 35%, rgba(13, 7, 24, .55) 70%, var(--notte)); }
.hero-linee { opacity: .5; mix-blend-mode: screen; background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, .13) 0 1.2deg, transparent 1.2deg 7deg);
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent 26%, #000 62%); mask: radial-gradient(circle at 50% 46%, transparent 26%, #000 62%);
  animation: gira 40s linear infinite; }
@keyframes gira { to { transform: rotate(360deg) scale(1.4); } }
.hero-linee { transform: scale(1.4); }
.hero-kanji { position: absolute; z-index: -1; left: 50%; top: 44%; transform: translate(-50%, -50%); font: 900 min(46vw, 64vh)/1 var(--cjk);
  color: rgba(255, 213, 107, .07); pointer-events: none; white-space: nowrap; }
.hero .kicker { transform: rotate(-2deg); }
.logo { width: min(780px, 92vw, 64vh); height: auto; margin: 14px auto 4px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 28px rgba(255, 120, 60, .35));
  animation: galleggia 6s ease-in-out infinite; }
@keyframes galleggia { 50% { transform: translateY(-12px) rotate(-.6deg); } }
.hero .wrap { z-index: 2; }
.hero-sub { font-size: clamp(17px, 2.1vw, 23px); max-width: 760px; margin: 6px auto 26px; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; max-width: 820px; padding: 0; list-style: none; }
.chips li { font: 400 14px/1 var(--asia); padding: 8px 12px; border-radius: 99px; background: rgba(20, 11, 34, .72); border: 2px solid rgba(255, 213, 107, .6); }
.scorri { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font: 400 15px var(--font); letter-spacing: 3px; opacity: .8;
  animation: rimbalza 1.8s ease-in-out infinite; }
@keyframes rimbalza { 50% { transform: translate(-50%, 8px); } }
.nota-video { font-size: 13px; opacity: .75; margin-top: 18px; }
/* onomatopee che esplodono nell'apertura (img/ono del gioco) */
.ono-volante { position: absolute; z-index: 1; width: clamp(110px, 16vw, 210px); height: auto; pointer-events: none;
  animation: ono 1.5s cubic-bezier(.2, 1.6, .4, 1) both; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
@keyframes ono { 0% { opacity: 0; transform: scale(.2) rotate(var(--r, -12deg)); } 18% { opacity: 1; transform: scale(1.15) rotate(var(--r, -12deg)); }
  30% { transform: scale(1) rotate(var(--r, -12deg)); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) translateY(-20px) rotate(var(--r, -12deg)); } }

/* ---------------------------------------------------------------- FUMETTI che si compongono scorrendo */
.fumetto { padding: clamp(60px, 9vh, 110px) 0; }
.fumetto .wrap { max-width: 1100px; }
.tavola { display: grid; gap: 18px; margin-top: 26px; }
.striscia { position: relative; aspect-ratio: 1600 / 679; border: 5px solid var(--nero); border-radius: 6px; background: #fff;
  box-shadow: 8px 10px 0 rgba(42, 34, 56, .35); }
.striscia .arte { position: absolute; inset: 0; overflow: hidden; }
.striscia .arte img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); transform: scale(1.12);
  transition: clip-path .75s cubic-bezier(.7, 0, .25, 1), transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.striscia.on .arte img { clip-path: inset(0 0 0 0); transform: scale(1); }
.striscia .cornice { position: absolute; inset: -5px; border: 5px solid var(--nero); border-radius: 6px; pointer-events: none; }
.striscia .lampo { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.striscia.on .lampo { animation: lampo .5s ease-out .55s; }
@keyframes lampo { 0% { opacity: .85; } 100% { opacity: 0; } }
.bal { position: absolute; z-index: 2; width: max-content; max-width: 38%; padding: 10px 14px 11px; border-radius: 20px; background: #fff;
  border: 3px solid var(--nero); box-shadow: 3px 4px 0 rgba(42, 34, 56, .55); color: var(--ink);
  font: 400 clamp(13px, 1.55vw, 19px)/1.3 var(--testo); transform: translate(-50%, 0) scale(.2); opacity: 0;
  transition: transform .35s cubic-bezier(.2, 1.7, .4, 1), opacity .2s; }
.bal.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.bal small { position: absolute; top: -.95em; left: 12px; padding: 1px 9px; border-radius: 8px; font: 400 .78em var(--font); letter-spacing: 1px;
  color: #fff; background: var(--lacca); border: 2px solid var(--nero); }
.bal::after { content: ""; position: absolute; left: var(--coda, 30%); bottom: -15px; border: 9px solid transparent; border-top: 13px solid var(--nero); }
.bal::before { content: ""; position: absolute; left: calc(var(--coda, 30%) + 3px); bottom: -8px; z-index: 1; border: 6px solid transparent; border-top: 9px solid #fff; }
.bal.su::after { bottom: auto; top: -15px; border-top: 9px solid transparent; border-bottom: 13px solid var(--nero); }
.bal.su::before { bottom: auto; top: -8px; border-top: 6px solid transparent; border-bottom: 9px solid #fff; }
.bal.urlo { background: #fff6c8; border-radius: 6px; font-family: var(--font); font-size: clamp(16px, 2vw, 25px); letter-spacing: .5px; }
.striscia .ono { position: absolute; z-index: 3; width: clamp(110px, 19%, 230px); transform: translate(-50%, -50%) scale(.1) rotate(-14deg); opacity: 0;
  transition: transform .45s cubic-bezier(.2, 1.9, .4, 1), opacity .2s; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .4)); }
.striscia .ono.on { transform: translate(-50%, -50%) scale(1) rotate(-14deg); opacity: 1; }
/* telefono: la vignetta si fa più alta e le battute scendono SOTTO, una per riga (sopra un'immagine larga 360 px non ci stanno) */
@media (max-width: 720px) {
  .striscia { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 14px; background: #fff; }
  .striscia .arte { position: relative; aspect-ratio: 16 / 10; }
  .striscia .ono { top: 26% !important; width: 34%; }
  .bal { position: relative; left: auto !important; top: auto !important; width: auto; max-width: 86%; justify-self: end; margin: 6px 12px 0 auto; transform: scale(.2); }
  .bal.su { justify-self: start; margin: 6px auto 0 12px; }
  .bal.on { transform: none; }
  .bal::after, .bal::before { display: none; }
}

/* ---------------------------------------------------------------- IL CLAN: scelta + scheda grande */
.clan-scelta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 22px; }
.clan-scelta button { width: 92px; height: 92px; padding: 0; border-radius: 16px; border: 4px solid var(--nero); cursor: pointer; position: relative;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .7), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 5px 0 var(--nero); transition: transform .15s; overflow: hidden; }
.clan-scelta button img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 20%; transform: scale(1.35) translateY(10%); }
.clan-scelta button.attivo { transform: translateY(-5px) scale(1.06); box-shadow: 0 0 0 4px var(--oro), 0 9px 0 var(--nero); }
.clan-scelta button.segreto img { filter: brightness(0) drop-shadow(0 0 3px rgba(255, 213, 107, .9)); }
.clan-scelta button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--oro); }
.clan-scelta button.attivo.gira::after { animation: barra var(--giro, 7s) linear forwards; }
@keyframes barra { to { width: 100%; } }
.scheda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px; align-items: center; padding: 30px; border-radius: 22px;
  background: var(--asanoha), var(--riso); color: var(--ink); border: 5px solid var(--nero); box-shadow: 10px 12px 0 rgba(0, 0, 0, .35); min-height: 520px; }
.scheda-arte { position: relative; aspect-ratio: 1; border-radius: 18px; border: 4px solid var(--nero); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .8), transparent 60%), var(--seigaiha), linear-gradient(160deg, var(--c1), var(--c2)); }
.scheda-arte canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scheda-arte .kanji { position: absolute; right: 6%; top: 4%; font: 900 clamp(60px, 9vw, 120px)/1 var(--cjk); color: rgba(255, 255, 255, .35); writing-mode: vertical-rl; }
.scheda-nome { height: clamp(70px, 9vw, 110px); width: auto; max-width: 100%; margin: 0 0 6px -4px; filter: drop-shadow(0 4px 0 rgba(42, 34, 56, .35)); }
.scheda-nome-testo { font: 400 clamp(48px, 6vw, 80px)/1 var(--font); color: var(--ink); margin-bottom: 8px; }
.scheda .ruolo { font: 400 15px var(--asia); color: #fff; background: var(--ink); display: inline-block; padding: 5px 11px; border-radius: 8px; margin-bottom: 10px; }
.scheda p { margin: 0 0 14px; }
.stat { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; margin: 5px 0; font: 400 14px var(--asia); }
.stat i { display: block; height: 12px; border-radius: 9px; background: var(--riso-ombra); border: 2px solid var(--ink); overflow: hidden; position: relative; }
.stat i::after { content: ""; position: absolute; inset: 0; width: var(--q); background: linear-gradient(90deg, var(--c2), var(--c1)); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.supers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.supers li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px; }
.supers .kj { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; border: 3px solid var(--nero);
  font: 900 26px/1 var(--cjk); color: #fff; background: linear-gradient(160deg, var(--s1, #ff8a6a), var(--s2, #8a1018)); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.supers b { display: block; font: 400 18px/1.05 var(--font); color: var(--lacca); letter-spacing: .5px; }
.supers em { font-style: normal; font-size: 13px; opacity: .8; }
.sblocco { font: 400 14px var(--asia); color: var(--lacca); }
.scheda.segreta .scheda-arte { background: radial-gradient(circle at 50% 45%, rgba(255, 213, 107, .35), transparent 60%), #0b0710; }
.scheda.segreta canvas { filter: brightness(0) drop-shadow(0 0 10px rgba(255, 213, 107, .9)); }
.punto-domanda { font: 400 clamp(90px, 12vw, 150px)/1 var(--font); color: var(--ink); }
.super-clip { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: center; }

/* nomi sotto i ritratti della scelta */
.scelta-voce { display: grid; justify-items: center; gap: 6px; }
.nome-mini { height: 30px; width: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }

/* ---------------------------------------------------------------- NOMI che entrano come in un fumetto (17-10, utente:
   «taglio di spada, fori di proiettile, esplosione… man mano che appaiono»). landing.js mette `attesa` (nascosto finché non
   arriva in vista: senza JS resta visibile) e poi `fx-<tipo>` con lo strato degli effetti. Il nome è il PRIMO figlio. */
.nome-fx { position: relative; display: inline-block; }
.nome-fx.attesa > :first-child { opacity: 0; }
.fx-strato { position: absolute; inset: -30% -12%; pointer-events: none; z-index: 3; }
.fx-ono { position: absolute; right: -6%; top: -14%; width: clamp(70px, 9vw, 120px); height: auto; transform: rotate(12deg) scale(0); opacity: 0;
  animation: fx-ono 1.3s cubic-bezier(.2, 1.8, .4, 1) both; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }
/* sulle schede dei nemici i nomi sono piccoli: l'onomatopea li coprirebbe (restano fori, tagli, esplosioni) */
.nemico .fx-ono, .boss .fx-ono { display: none; }
@keyframes fx-ono { 0% { opacity: 0; transform: rotate(12deg) scale(.2); } 15% { opacity: 1; transform: rotate(12deg) scale(1.15); }
  25% { transform: rotate(12deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: rotate(12deg) scale(1) translateY(-10px); } }
/* TAGLIO di katana (Sake): una lama di luce attraversa, il nome compare dietro il fendente */
.fx-lama { position: absolute; left: 0; right: 0; top: 50%; height: 7px; margin-top: -3px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff 18%, #fff 82%, transparent); box-shadow: 0 0 12px #fff, 0 0 26px #ff6a5a;
  transform-origin: left center; animation: fx-lama .42s cubic-bezier(.6, 0, .3, 1) both; }
.fx-lama.due { transform-origin: right center; animation-name: fx-lama2; animation-delay: .2s; }
@keyframes fx-lama { 0% { transform: rotate(-12deg) scaleX(0); opacity: 1; } 55% { transform: rotate(-12deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-12deg) scaleX(1); opacity: 0; } }
@keyframes fx-lama2 { 0% { transform: rotate(12deg) scaleX(0); opacity: 1; } 55% { transform: rotate(12deg) scaleX(1); opacity: 1; } 100% { transform: rotate(12deg) scaleX(1); opacity: 0; } }
.fx-taglio > :first-child { animation: fx-taglio .55s .16s cubic-bezier(.2, .9, .3, 1) both; }
.fx-croce > :first-child { animation: fx-taglio .55s .34s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes fx-taglio { 0% { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); transform: translate(-8px, 3px); }
  70% { transform: translate(2px, -1px); } 100% { clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); transform: none; } }
/* COLPI (Ebi): una raffica di fori, poi il nome «esce» dai fori */
.fx-foro { position: absolute; width: 30px; height: 30px; margin: -15px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #0d0710 0 30%, #3a2a2a 34%, #9a8a7a 42%, rgba(255, 255, 255, .7) 47%, transparent 54%);
  animation: fx-foro 1.9s ease-out both; }
.fx-foro::after, .fx-foro::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 2px; margin: -1px 0 0 -22px; background: rgba(40, 30, 30, .5); transform: rotate(var(--r, 30deg)); }
.fx-foro::before { width: 34px; margin-left: -17px; transform: rotate(calc(var(--r, 30deg) + 70deg)); }
@keyframes fx-foro { 0% { opacity: 0; transform: scale(2.4); } 8% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.fx-colpi > :first-child { animation: fx-pop .5s .55s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes fx-pop { 0% { opacity: 0; transform: scale(1.6) rotate(-4deg); } 100% { opacity: 1; transform: none; } }
/* ESPLOSIONE (Tobiko): lampo, palla di fuoco, schegge, il nome scaraventato in scena */
.fx-palla { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; margin: -60% 0 0 -60%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffe14d 22%, #ff8a1c 40%, #c0262d 56%, transparent 68%); animation: fx-palla .75s ease-out both; }
@keyframes fx-palla { 0% { transform: scale(0); opacity: 1; } 55% { opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }
.fx-scheggia { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: #ffb43a; border: 2px solid var(--nero); border-radius: 2px;
  animation: fx-scheggia .8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fx-scheggia { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
.fx-boom > :first-child { animation: fx-boom .7s .12s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fx-boom { 0% { opacity: 0; transform: scale(.1) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.12) rotate(4deg); } 80% { transform: scale(.97) rotate(-1deg); } 100% { transform: none; } }
/* FUMO: sbuffi che si allargano, il nome si scopre dal grigio */
.fx-sbuffo { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(220, 215, 230, .9), rgba(160, 150, 180, .5) 50%, transparent 70%);
  filter: blur(4px); animation: fx-sbuffo 1.1s ease-out both; }
@keyframes fx-sbuffo { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.fx-fumo > :first-child { animation: fx-nebbia .8s .25s ease-out both; }
@keyframes fx-nebbia { 0% { opacity: 0; filter: blur(10px); } 100% { opacity: 1; filter: none; } }

/* ---------------------------------------------------------------- video (partite registrate) */
.video { position: relative; border-radius: 16px; overflow: hidden; border: 5px solid var(--nero); background: #000; aspect-ratio: 16 / 9;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .35); }
.video video { width: 100%; height: 100%; object-fit: cover; }
.video .rec { position: absolute; left: 10px; bottom: 10px; font: 400 13px/1 var(--font); letter-spacing: 1.5px; color: #fff; background: rgba(0, 0, 0, .6);
  padding: 5px 9px 4px; border-radius: 6px; }
.video .rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; margin-right: 6px; vertical-align: 1px; animation: rec 1.2s infinite; }
@keyframes rec { 50% { opacity: .2; } }
.didascalia { font-size: 14px; opacity: .85; margin-top: 10px; }

/* ---------------------------------------------------------------- mondi */
.mondi { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mondo { background: rgba(255, 255, 255, .04); border: 3px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 14px 14px 18px; }
.mondo h3 { font-size: clamp(28px, 3vw, 38px); margin: 14px 4px 4px; display: flex; align-items: baseline; gap: 12px; }
.mondo h3 small { font: 900 .6em var(--cjk); color: var(--c); filter: brightness(1.5); }
.mondo p { margin: 0 4px; font-size: 16px; opacity: .92; }
.mondo .video { border-color: var(--c); }
.via-segreta { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 26px 30px; border-radius: 20px;
  border: 3px dashed rgba(255, 213, 107, .55); background: radial-gradient(600px 200px at 10% 50%, rgba(255, 140, 40, .22), transparent 70%), #0b0710; }
.via-segreta .kanji { font: 900 clamp(56px, 8vw, 96px)/1 var(--cjk); color: var(--oro); text-shadow: 0 0 24px rgba(255, 170, 60, .7); }
.fuochi i { position: absolute; width: 14px; height: 18px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 70%, #fff, #7a9cff 45%, transparent 70%);
  filter: blur(1px); animation: fuoco 3.5s ease-in-out infinite; }
@keyframes fuoco { 50% { transform: translateY(-14px) scale(1.2); opacity: .6; } }

/* ---------------------------------------------------------------- nemici */
.nemici { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.nemico { background: #fff; color: var(--ink); border: 4px solid var(--nero); border-radius: 16px; overflow: hidden; box-shadow: 6px 8px 0 rgba(42, 34, 56, .3);
  display: grid; grid-template-rows: auto 1fr; }
.nemico .arte { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .9), transparent 60%), repeating-linear-gradient(135deg, #ffe0a8 0 14px, #ffd28a 14px 28px); border-bottom: 4px solid var(--nero); }
.nemico canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nemico .grido { position: absolute; right: 6px; top: 8px; font: 400 15px/1 var(--font); letter-spacing: .5px; color: #fff; background: var(--lacca);
  border: 2px solid var(--nero); border-radius: 6px; padding: 4px 7px 3px; transform: rotate(6deg) scale(0); transition: transform .3s cubic-bezier(.2, 1.8, .4, 1); }
.nemico .grido.on { transform: rotate(6deg) scale(1); }
.nemico div.testo { padding: 10px 12px 14px; }
.nemico h3 { font-size: 22px; line-height: 1; margin-bottom: 6px; color: var(--lacca); }
.nemico p { margin: 0; font-size: 14px; line-height: 1.4; }
.capi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; margin-top: 34px; align-items: start; }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mini .nemico .arte { background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .9), transparent 60%), repeating-linear-gradient(135deg, #f7c6c6 0 14px, #f3b0b0 14px 28px); }
.mini h3 { font-size: 17px; }
.boss { margin-top: 18px; display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px; border: 4px solid var(--nero); }
.boss .arte { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 70%, rgba(255, 213, 107, .6), transparent 65%), #3a1622; }
.boss canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.boss h3 { font-size: 30px; color: var(--oro); line-height: 1; }
.etichetta { font: 400 14px var(--asia); letter-spacing: .06em; text-transform: uppercase; color: var(--lacca); margin: 0; }
.boss .etichetta { color: #ff8a8a; }

/* ---------------------------------------------------------------- co-op e corsa */
.due { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.due.giro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.elenco li { position: relative; padding: 12px 14px 12px 50px; background: rgba(0, 0, 0, .22); border-radius: 12px; border: 2px solid rgba(255, 255, 255, .14); }
.elenco li::before { content: "手"; position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  background: var(--oro); color: var(--nero); font: 900 16px/1 var(--cjk); border: 2px solid var(--nero); }
.giocatori { display: flex; gap: 8px; margin: 0 0 16px; }
.giocatori span { font: 400 20px/1 var(--font); padding: 6px 12px 5px; border-radius: 8px; border: 3px solid var(--nero); color: #fff; text-shadow: 0 2px 0 var(--nero); }
.voci { display: grid; gap: 12px; margin-top: 8px; }
.voce { background: #fff; color: var(--ink); border: 3px solid var(--nero); border-radius: 14px; padding: 12px 16px; box-shadow: 5px 6px 0 rgba(0, 0, 0, .3); }
.voce h3 { font-size: 24px; color: var(--lacca); line-height: 1; margin-bottom: 4px; }
.voce p { margin: 0; font-size: 15px; }

/* ---------------------------------------------------------------- tutto il resto: 12 tessere (2/3/4: dividono 12) */
.tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tessera { background: #fff; color: var(--ink); border: 3px solid var(--nero); border-radius: 16px; padding: 16px; box-shadow: 5px 6px 0 rgba(42, 34, 56, .28); }
.tessera i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; border: 3px solid var(--nero); font: 900 26px/1 var(--cjk); font-style: normal;
  color: #fff; background: linear-gradient(160deg, #ff6a5a, var(--lacca)); margin-bottom: 10px; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.tessera:nth-child(3n+2) i { background: linear-gradient(160deg, #ffd56b, #c8902a); color: var(--nero); text-shadow: none; }
.tessera:nth-child(3n) i { background: linear-gradient(160deg, #7a5cff, #3a1b8a); }
.tessera h3 { font-size: 22px; line-height: 1.05; margin-bottom: 6px; }
.tessera p { margin: 0; font-size: 14.5px; line-height: 1.45; }

/* ---------------------------------------------------------------- dojo */
.dojo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; align-items: center; margin-top: 30px; }
.rotolo { background: #fff; color: var(--ink); border: 5px solid var(--nero); border-radius: 20px; padding: 26px; box-shadow: 10px 12px 0 rgba(42, 34, 56, .3); position: relative; }
.rotolo::before { content: "道場"; position: absolute; right: 16px; top: 10px; font: 900 44px/1 var(--cjk); color: rgba(192, 38, 45, .13); writing-mode: vertical-rl; }
.rotolo h3 { font-size: 34px; color: var(--lacca); margin-bottom: 10px; }
.rotolo ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.rotolo .nota { font-size: 14px; opacity: .8; margin: 12px 0 0; }

/* ---------------------------------------------------------------- faq */
.faq { max-width: 860px; margin: 24px auto 0; display: grid; gap: 12px; }
.faq button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 16px; align-items: center; cursor: pointer;
  background: #fff; color: var(--ink); border: 3px solid var(--nero); border-radius: 14px; padding: 14px 18px; font: 400 22px/1.1 var(--font); letter-spacing: .5px;
  box-shadow: 0 5px 0 var(--nero); }
.faq button::after { content: "+"; font-size: 30px; line-height: .8; color: var(--lacca); transition: transform .2s; }
.faq .aperta button::after { transform: rotate(45deg); }
.faq .risposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.faq .aperta .risposta { grid-template-rows: 1fr; }
.faq .risposta > div { overflow: hidden; }
.faq .risposta p { margin: 12px 18px 4px; }

/* ---------------------------------------------------------------- finale e piede */
.finale { text-align: center; min-height: 80vh; display: grid; place-items: center; isolation: isolate; }
.finale-fondo { position: absolute; inset: -4%; z-index: -1; background-size: cover; background-position: 50% 40%; }
.finale-fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(13, 7, 24, .45), rgba(13, 7, 24, .9) 75%); }
.finale h2 { font-size: clamp(42px, 7vw, 92px); }
.finale .logo { width: min(560px, 80vw); }
footer { background: #0b0614; padding: 34px 0 110px; font-size: 14px; text-align: center; color: rgba(255, 255, 255, .75); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-bottom: 10px; }
footer a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
@media (min-width: 900px) { footer { padding-bottom: 40px; } }

/* barra fissa sul telefono (isteresi in landing.js, strato proprio contro lo sfarfallio: skill 35 §12) */
.barra { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .9, .3, 1);
  will-change: transform; backface-visibility: hidden; }
.barra.su { transform: none; }
.barra a { display: block; text-align: center; text-decoration: none; font: 400 24px/1 var(--font); letter-spacing: 1.5px; color: #fff; padding: 15px 10px 13px;
  border-radius: 14px; border: 4px solid var(--nero); background: linear-gradient(180deg, #ff5a4e, #c0262d 60%, #9c1a22); box-shadow: 0 6px 0 var(--nero), 0 10px 30px rgba(0, 0, 0, .5);
  -webkit-text-stroke: 1.2px var(--nero); paint-order: stroke fill; }
@media (min-width: 768px) { .barra { display: none; } }

/* ---------------------------------------------------------------- misure */
@media (max-width: 1050px) {
  .nemici { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nemici .nemico:nth-child(4), .nemici .nemico:nth-child(5) { grid-column: span 1; }
  .tessere { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capi, .due, .due.giro, .dojo, .super-clip { grid-template-columns: 1fr; }
  .scheda { grid-template-columns: 1fr; min-height: 0; }
  .scheda-arte { max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .mondi { grid-template-columns: 1fr; }
  .nemici { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nemici .nemico:last-child { grid-column: 1 / -1; }
  .nemici .nemico:last-child .arte { aspect-ratio: 2 / 1; }
  .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tessera { padding: 12px; } .tessera h3 { font-size: 19px; } .tessera p { font-size: 13.5px; }
  .supers { grid-template-columns: 1fr; }
  .scheda { padding: 16px; }
  .clan-scelta button { width: 62px; height: 62px; border-radius: 12px; }
  .nome-mini { height: 20px; }
  .via-segreta { grid-template-columns: 1fr; text-align: center; padding: 20px; }
  .boss { grid-template-columns: 110px 1fr; }
  .btn { min-width: 0; width: 100%; }
  .nav .lingua { padding: 5px 8px; }
  .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mini h3 { font-size: 14px; }
}
@media (max-width: 380px) { .nav .gioca { font-size: 16px; padding: 4px 10px; } }

/* ---------------------------------------------------------------- «riduci animazioni»: tutto fermo e già visibile */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .striscia .arte img { clip-path: none; transform: none; }
  .bal, .striscia .ono { opacity: 1; transform: translate(-50%, 0); }
  .striscia .ono { transform: translate(-50%, -50%) rotate(-14deg); }
  .ono-volante { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) { .bal { transform: none; } }