/* Ninja Uzi Sushi — l'INTERFACCIA (PIANO §8: «molto anime/manga, colorata, dettagliata, curata, bordi con immagini,
   orientaleggiante»). Le cornici sono IMMAGINI (SVG a 9 parti in border-image: legno laccato rosso e nero, angoli d'oro a
   nuvola), i pannelli carta di riso, i pulsanti tavolette di legno col sigillo rosso (hanko), lo sfondo onde seigaiha e
   petali di ciliegio. Tutto in un file: niente immagini da scaricare per le cornici. */
:root {
  --lacca: #c0262d; --lacca-scura: #7a1018; --nero: #1b1020; --inchiostro: #2a2238; --oro: #ffd56b; --oro-scuro: #c8902a;
  --riso: #fbf3df; --riso-ombra: #ead9b4; --rosa: #ff4f9b; --ciano: #3fe0ff; --verde: #5bd84a;
  --font: Bangers, Impact, "Arial Black", sans-serif;
  --cjk: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", Meiryo, "MS Gothic", sans-serif;
  /* (12-10) utente: «ogni scritta dev'essere a tema» → pennarello giapponese (font/potta.css) */
  --testo: "Yusei Magic", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  /* (12-10) le righe brevi (missioni) in un carattere a pennello giapponese; ripiega sul testo normale */
  --asia: "Potta One", "Segoe UI", system-ui, sans-serif;
  /* la CORNICE laccata: bordo nero, fascia rossa, filo d'oro, angoli a nuvola d'oro */
  --cornice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8434a'/%3E%3Cstop offset='.5' stop-color='%23c0262d'/%3E%3Cstop offset='1' stop-color='%237a1018'/%3E%3C/linearGradient%3E%3ClinearGradient id='o' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2b8'/%3E%3Cstop offset='.45' stop-color='%23ffd56b'/%3E%3Cstop offset='1' stop-color='%23b07a1c'/%3E%3C/linearGradient%3E%3Cg id='a'%3E%3Ccircle cx='20' cy='20' r='17' fill='url(%23o)' stroke='%232a2238' stroke-width='3'/%3E%3Cpath d='M20 9 a11 11 0 1 1 -11 11 a6 6 0 1 0 6 -6' fill='none' stroke='%232a2238' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23c0262d'/%3E%3C/g%3E%3C/defs%3E%3Crect x='3' y='3' width='114' height='114' rx='10' fill='none' stroke='%232a2238' stroke-width='6'/%3E%3Crect x='8' y='8' width='104' height='104' rx='7' fill='none' stroke='url(%23l)' stroke-width='12'/%3E%3Crect x='16.5' y='16.5' width='87' height='87' rx='3' fill='none' stroke='url(%23o)' stroke-width='3'/%3E%3Crect x='20' y='20' width='80' height='80' fill='none' stroke='%232a2238' stroke-width='1.5' opacity='.6'/%3E%3Cuse href='%23a'/%3E%3Cuse href='%23a' transform='translate(120 0) scale(-1 1)'/%3E%3Cuse href='%23a' transform='translate(0 120) scale(1 -1)'/%3E%3Cuse href='%23a' transform='translate(120 120) scale(-1 -1)'/%3E%3C/svg%3E");
  /* onde SEIGAIHA per gli sfondi */
  --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='.07' 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 (foglia di canapa) per la carta dei pannelli */
  --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='.13' 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");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120a1e; color: var(--inchiostro); font-family: var(--testo);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
canvas#schermo { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: auto; }
[hidden] { display: none !important; }
/* niente «salva immagine» con la pressione lunga né trascinamento (deterrente, vedi avvio.js `protetto`) */
img, canvas, svg { -webkit-user-drag: none; -webkit-touch-callout: none; }
body { -webkit-touch-callout: none; }
button { font-family: var(--font); cursor: pointer; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; border: 2px solid var(--inchiostro); border-bottom-width: 4px; border-radius: 6px;
  background: #fffaf0; font: 700 .85em var(--testo); text-align: center; color: var(--inchiostro); }

/* ======================================================== schermate */
#velo { position: fixed; inset: 0; z-index: 20; pointer-events: none; transition: opacity .35s;
  background: radial-gradient(ellipse at 50% 40%, rgba(60,20,70,.55), rgba(10,4,20,.92)), var(--seigaiha), #1a0f2e; background-size: auto, 80px 40px, auto; }
#velo.via { opacity: 0; }
.schermata { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  overflow: hidden; }
/* petali di ciliegio che scendono dietro ai pannelli */
.schermata::before, .schermata::after { content: ""; position: absolute; inset: -20% 0 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(ellipse 6px 4px at 12% 10%, #ffc2dd 60%, transparent 62%), radial-gradient(ellipse 5px 3px at 33% 30%, #ffd6e8 60%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 58% 5%, #ffb3d1 60%, transparent 62%), radial-gradient(ellipse 5px 3px at 81% 22%, #ffe1ee 60%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 92% 48%, #ffc2dd 60%, transparent 62%), radial-gradient(ellipse 4px 3px at 22% 64%, #ffd6e8 60%, transparent 62%),
    radial-gradient(ellipse 6px 3px at 70% 72%, #ffb3d1 60%, transparent 62%);
  background-size: 100% 60%; animation: petali 14s linear infinite; opacity: .85; }
.schermata::after { animation-duration: 21s; animation-delay: -7s; transform: scaleX(-1); opacity: .6; }
@keyframes petali { from { background-position: 0 -60vh; } to { background-position: 60px 120vh; } }
@media (prefers-reduced-motion: reduce) { .schermata::before, .schermata::after { animation: none; } }
.schermata > * { position: relative; z-index: 1; }

/* ---- la CORNICE laccata (immagine a 9 parti) con dentro la carta di riso */
.cornice { border: 30px solid transparent; border-image: var(--cornice) 40 / 30px / 0 stretch;
  background: var(--asanoha), linear-gradient(180deg, #fffaf0, var(--riso) 60%, var(--riso-ombra)); background-size: 60px 104px, auto;
  background-clip: padding-box; filter: drop-shadow(0 14px 30px rgba(0,0,0,.55)); }
.pannello { width: min(720px, 100%); max-height: calc(100vh - 28px); display: flex; flex-direction: column; gap: 12px; padding: 4px 10px 6px; overflow: auto; }
.pannello.largo { width: min(1060px, 100%); }
.pannello.stretto { width: min(440px, 100%); }
.pannello-tit { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: -2px; }
.pannello-tit h2 { margin: 0; font: 400 clamp(26px, 4.4vw, 44px)/1 var(--font); letter-spacing: 2px; color: var(--lacca);
  -webkit-text-stroke: 2px var(--inchiostro); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--oro), 5px 5px 0 var(--inchiostro); transform: rotate(-1.5deg); }
/* gli stendardi NOBORI ai lati del titolo */
/* (12-10, utente: «il taglio a V sotto taglia il giallo: i bordi devono seguire il taglio, ovunque») i bordi sono STRATI
   tagliati con la stessa V (inchiostro fuori, oro, poi il colore): un border o un'ombra interna sarebbero rettangoli troncati */
.nobori { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 60px;
  font: 900 22px var(--cjk); color: #fff; background: var(--inchiostro); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  text-shadow: 2px 2px 0 var(--inchiostro); }
.nobori::before, .nobori::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.nobori::before { inset: 3px 3px 4px; background: var(--oro); }
.nobori::after { inset: 5px 5px 7px; background: linear-gradient(90deg, var(--lacca-scura), var(--lacca) 40%, var(--lacca-scura)); }

/* ---- TAVOLETTE di legno (pulsanti) col sigillo HANKO */
.tavoletta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 22px 8px 18px;
  font: 400 clamp(19px, 2.6vw, 26px)/1 var(--font); letter-spacing: 1.5px; color: #fff8e6; -webkit-text-stroke: 1.5px var(--inchiostro); paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--inchiostro);
  background: repeating-linear-gradient(92deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px), repeating-linear-gradient(88deg, rgba(255,255,255,.05) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #a8642c, #7c4418 55%, #5a2e10);
  border: 3px solid var(--inchiostro); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--oro-scuro), inset 0 3px 0 rgba(255,255,255,.25), 0 5px 0 var(--inchiostro), 0 8px 14px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s, filter .12s; }
.tavoletta:hover, .tavoletta:focus-visible { transform: translateY(-2px) rotate(-.6deg); filter: brightness(1.12) saturate(1.1); outline: none;
  box-shadow: inset 0 0 0 2px var(--oro), inset 0 3px 0 rgba(255,255,255,.3), 0 7px 0 var(--inchiostro), 0 0 0 3px rgba(255,213,107,.55), 0 10px 18px rgba(0,0,0,.4); }
.tavoletta:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--oro-scuro), 0 2px 0 var(--inchiostro); }
.tavoletta.rossa { background: repeating-linear-gradient(92deg, rgba(0,0,0,.08) 0 2px, transparent 2px 10px), linear-gradient(180deg, #ef4b4f, var(--lacca) 55%, var(--lacca-scura)); }
.tavoletta.grande { min-height: 64px; font-size: clamp(24px, 3.4vw, 34px); padding: 10px 30px; }
.tavoletta[disabled] { filter: grayscale(.85) brightness(.75); cursor: not-allowed; }
.hanko { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%; font: 900 .78em var(--cjk);
  color: #fff; -webkit-text-stroke: 0; background: radial-gradient(circle at 35% 30%, #ff6a6a, var(--lacca) 60%, var(--lacca-scura)); border: 2px solid var(--inchiostro);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transform: rotate(-12deg); text-shadow: none; }
.riga-pulsanti { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 4px; }
/* (12-10, banco) i pulsanti in fondo a un pannello che SCORRE restano sempre in vista: «AVANTI» della scelta del ninja
   stava sotto il bordo anche sul PC; dietro, la carta di riso sfuma sopra il contenuto che passa sotto */
.pannello > .riga-pulsanti:last-child { position: sticky; bottom: -6px; z-index: 2; margin-bottom: -6px; padding: 14px 0 8px;
  background: linear-gradient(180deg, rgba(251,243,223,0), var(--riso-ombra) 14px); }
.colonna-pulsanti { display: flex; flex-direction: column; gap: 10px; }
.colonna-pulsanti .tavoletta { width: 100%; }

/* ---- invito a girare il telefono (utente 12-10): sopra tutto, sparisce da sé girandolo */
.ruota { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12,6,28,.86); }
.ruota[hidden] { display: none; }
/* (13-10) SCHERMO INTERO: l'icona tonda sul titolo (in alto a destra), come la pausa */
.btn-schermo { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--inchiostro); font: 900 24px/1 var(--testo); color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--lacca) 60%, var(--lacca-scura)); box-shadow: 0 3px 0 var(--inchiostro); }
.btn-schermo.pieno { background: radial-gradient(circle at 35% 30%, #fff3a0, var(--oro) 60%, var(--oro-scuro)); color: var(--inchiostro); }
.ruota-pannello { align-items: center; text-align: center; gap: 10px; }
.ruota-pannello p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--inchiostro); }
.ruota-tit { margin: 0; font: 400 32px/1 var(--font); letter-spacing: 2px; color: var(--lacca); -webkit-text-stroke: 1.5px var(--inchiostro); paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--oro), 4px 4px 0 var(--inchiostro); }
.ruota-tel { position: relative; flex: none; width: 58px; height: 96px; margin: 14px auto 8px; border: 5px solid var(--inchiostro); border-radius: 12px;
  background: linear-gradient(180deg, #2a1a4a, #c0262d); box-shadow: 0 6px 0 rgba(0,0,0,.25); animation: ruota-gira 2.4s ease-in-out infinite; }
.ruota-tel i { position: absolute; left: 50%; bottom: 5px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #fff8e6; }
@keyframes ruota-gira { 0%, 20% { transform: rotate(0deg); } 45%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .ruota-tel { animation: none; transform: rotate(-90deg); } }

/* ======================================================== caricamento */
.carica { text-align: center; color: #fff; }
/* (14-10, utente: «un'immagine per la stella ninja del caricamento, più bella, cartoon anime conforme UI»): disegnata nello
   stile del titolo (strumenti\nus_crea_shuriken.py), centrata sul suo asse: gira senza ballare */
.shuriken-gira { width: 112px; height: 112px; margin: 0 auto 16px; animation: gira .8s linear infinite;
  background: url("../img/shuriken.webp") center/contain no-repeat; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
@keyframes gira { to { transform: rotate(360deg); } }
.carica-tit { font: 400 clamp(36px, 7vw, 64px)/1 var(--font); color: var(--oro); -webkit-text-stroke: 3px var(--inchiostro); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--lacca); }
/* (14-10, utente: «invece della barra di caricamento standard, un rullo dei ristoranti sushi con le pietanze che scorrono»)
   il KAITEN-ZUSHI: nastro a stecche che corre, banco di legno, i piatti (img/rullo.webp, strumenti\nus_crea_rullo.py, una
   striscia a passo fisso che si ripete) escono da sotto il noren della cucina e la parte piena cresce col caricamento.
   ‼️ lo spostamento dei piatti è ESATTAMENTE la larghezza della striscia (532 px a 58 di altezza): se no a ogni giro scatta */
.rullo { position: relative; width: min(440px, 86vw); height: 88px; margin: 14px auto 8px; }
.rullo-banco { position: absolute; left: -8px; right: -8px; bottom: 0; height: 16px; border: 3px solid var(--inchiostro); border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, transparent 2px 26px), linear-gradient(180deg, #d69a5a, #8a5226); }
.rullo-nastro { position: absolute; left: 0; right: 0; bottom: 13px; height: 16px; border: 3px solid var(--inchiostro); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 45%, rgba(0,0,0,.25)), repeating-linear-gradient(90deg, #9aa0ad 0 18px, #5f6470 18px 21px);
  background-size: 100% 100%, 21px 100%; animation: rullo-nastro .9s linear infinite; }
@keyframes rullo-nastro { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 21px 0; } }
/* (14-10, seconda versione) i piatti sono ELEMENTI interi che js/carica.js (NUS_RULLO) fa uscire uno alla volta e girare:
   il riquadro è largo quanto il nastro, taglia solo a sinistra (sotto la cucina) e sfuma a destra (fine del banco) */
.rullo-pieno { position: absolute; left: 0; right: 0; bottom: 27px; height: 58px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
.rullo-piatti { position: absolute; inset: 0; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.rullo-piatti .piatto { position: absolute; left: 0; bottom: 0; width: 89px; height: 58px; opacity: 0; transition: opacity .25s;
  background: url("../img/rullo.webp") 0 100% / 532px 58px no-repeat; will-change: transform; }
.rullo-cucina { position: absolute; left: -14px; bottom: 11px; z-index: 2; width: 50px; height: 76px; border: 3px solid var(--inchiostro); border-radius: 6px 6px 2px 2px;
  background: linear-gradient(90deg, transparent 48%, rgba(0,0,0,.35) 48% 52%, transparent 52%), linear-gradient(180deg, #e8323c, var(--lacca-scura));
  box-shadow: inset 0 6px 0 #3a2418; display: grid; place-items: center; }
.rullo-cucina span { font: 900 15px/1.05 var(--cjk, sans-serif); color: #fff; writing-mode: vertical-rl; text-shadow: 0 1px 0 var(--inchiostro); }
.rullo-quota { position: absolute; right: 2px; bottom: -1px; z-index: 2; font: 700 11px/16px var(--testo); color: #fff; text-shadow: 0 1px 0 var(--inchiostro); }
@media (prefers-reduced-motion: reduce) { .rullo-nastro { animation-duration: 2.7s; } }
.carica-testo { font: 600 15px var(--testo); opacity: .85; min-height: 1.4em; text-align: center; padding: 0 12px; transition: opacity .18s; }

/* ======================================================== titolo */
.titolo { flex-direction: column; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) 16px 22px; }
.titolo-fondo { position: absolute; inset: 0; z-index: 0; background: url("../img/titolo.webp") center/cover no-repeat; filter: saturate(1.1); animation: respira 18s ease-in-out infinite alternate; }
.titolo-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,10,30,.15), rgba(18,10,30,0) 40%, rgba(18,10,30,.75)); }
@keyframes respira { from { transform: scale(1.03); } to { transform: scale(1.1) translateY(-1%); } }
.titolo-raggi { position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: .07; animation: gira 60s linear infinite;
  background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,213,107,.9) 0 4deg, transparent 4deg 16deg); }
.titolo-logo { position: relative; text-align: center; margin-top: 2vh; }
.kanji-sfondo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font: 900 clamp(60px, 13vw, 170px)/1 var(--cjk); color: rgba(192,38,45,.55);
  -webkit-text-stroke: 3px rgba(42,34,56,.6); letter-spacing: -4px; white-space: nowrap; filter: blur(.3px); }
.titolo-logo h1 { margin: 0; }
.logo-img { position: relative; width: min(820px, 86vw); max-height: 30vh; object-fit: contain; transform: rotate(-3deg);
  filter: drop-shadow(0 0 18px rgba(255,120,40,.65)) drop-shadow(4px 6px 0 rgba(26,15,46,.85)); animation: logo 2.4s ease-in-out infinite; }
.logo-testo { position: relative; margin: 0; font: 400 clamp(52px, 10.5vw, 130px)/.95 var(--font); letter-spacing: 3px; transform: rotate(-3deg);
  color: #ffe14d; -webkit-text-stroke: 4px var(--inchiostro); paint-order: stroke fill;
  background: linear-gradient(180deg, #fff6b8 0%, #ffd23f 38%, #ff8a1c 70%, #e8232e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2px var(--inchiostro)) drop-shadow(5px 6px 0 var(--inchiostro)) drop-shadow(0 0 22px rgba(255,120,40,.7)); animation: logo 2.4s ease-in-out infinite; }
.logo-testo span { display: inline-block; }
.logo-testo span:nth-child(2) { transform: translateY(6%) rotate(2deg); }
@keyframes logo { 50% { transform: rotate(-3deg) scale(1.025); } }
/* prima il «PREMI UN TASTO», poi (al primo tasto o tocco) il menu: mai tutti e due insieme */
.titolo:not(.aperto) .titolo-menu { visibility: hidden; }
.titolo.aperto .premi-tasto { display: none; }
.titolo-menu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 4vh; }
.titolo-menu .tavoletta { min-width: min(320px, 80vw); }
.premi-tasto { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%) skewX(-8deg); padding: 6px 34px; text-align: center; font: 400 clamp(26px, 4vw, 44px) var(--font); color: #ffe14d; white-space: nowrap; background: linear-gradient(90deg, transparent, rgba(26,15,46,.85) 15%, rgba(26,15,46,.85) 85%, transparent); border-top: 3px solid var(--oro); border-bottom: 3px solid var(--oro);
  -webkit-text-stroke: 2px var(--inchiostro); paint-order: stroke fill; letter-spacing: 3px; animation: lampeggia 1.1s steps(2) infinite; }
@keyframes lampeggia { 50% { opacity: .15; } }
.versione { position: absolute; right: 14px; bottom: 8px; font: 600 12px var(--testo); color: rgba(255,255,255,.7); }

/* ======================================================== scelta del ninja */
/* `--n` = le carte visibili (js/avvio.js): 4, o 5 col ninja segreto sbloccato (15-10) */
.ninja-griglia { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 12px; }
.ninja-carta { position: relative; aspect-ratio: 3/4; border: 4px solid var(--inchiostro); border-radius: 12px; cursor: pointer; overflow: hidden; padding: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.75), transparent 60%), var(--seigaiha), linear-gradient(160deg, var(--c1, #ff7a4a), var(--c2, #c0262d));
  background-size: auto, 40px 20px, auto; box-shadow: 0 6px 0 var(--inchiostro); transition: transform .15s; }
.ninja-carta img { position: absolute; left: 6%; right: 6%; bottom: 16%; width: 88%; height: 72%; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(42,34,56,.5)); }
.ninja-carta .nome { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 4px 7px; font: 400 clamp(18px, 2.4vw, 26px)/1 var(--font); color: #fff;
  -webkit-text-stroke: 1.5px var(--inchiostro); paint-order: stroke fill; letter-spacing: 1px; background: linear-gradient(0deg, rgba(42,34,56,.95), rgba(42,34,56,.55)); }
.ninja-carta .fascia { position: absolute; top: 8px; left: -32px; width: 130px; transform: rotate(-35deg); background: var(--fascia, var(--lacca)); border: 2px solid var(--inchiostro);
  height: 14px; }
.ninja-carta.scelto { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 4px var(--oro), 0 10px 0 var(--inchiostro), 0 0 30px rgba(255,213,107,.8); }
.ninja-carta.chiuso img { filter: brightness(0) drop-shadow(0 0 2px rgba(255,255,255,.4)); opacity: .75; }
.ninja-carta.chiuso::after { content: "🔒 " attr(data-sblocco); position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 12px;
  font: 400 22px var(--font); color: #fff; background: var(--lacca); border: 3px solid var(--inchiostro); letter-spacing: 2px; }
.ninja-dettaglio { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 12px 14px; border: 3px solid var(--inchiostro); border-radius: 10px;
  background: rgba(255,255,255,.55); }
.ninja-dettaglio h3 { margin: 0 0 4px; font: 400 30px/1 var(--font); color: var(--lacca); -webkit-text-stroke: 1px var(--inchiostro); }
.ninja-dettaglio p { margin: 0 0 8px; font: 500 14px/1.35 var(--testo); }
.stat { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font: 700 13px var(--testo); margin: 3px 0; }
.stat i { display: block; height: 12px; border: 2px solid var(--inchiostro); border-radius: 8px; background: linear-gradient(90deg, var(--lacca), var(--oro)) 0/var(--q) 100% no-repeat, #fff; }
.super-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.super-lista li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; font: 600 13px/1.25 var(--testo); padding: 5px 8px;
  background: #fffaf0; border: 2px solid var(--inchiostro); border-radius: 8px; }
.super-lista b { font: 400 17px var(--font); letter-spacing: .5px; color: var(--lacca); }
.super-lista .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--inchiostro); color: #fff; font: 400 16px var(--font); }
.super-lista .costo { white-space: nowrap; }
/* (13-10) i POTERI che si sbloccano giocando: chiusi in grigio col lucchetto e la condizione scritta */
.super-lista li.chiusa { opacity: .62; filter: grayscale(.7); }
.super-lista .sblocco-potere { display: inline-block; margin-top: 3px; font: 700 12px/1.25 var(--testo); color: var(--lacca); }
.btn-super.chiusa { filter: grayscale(1) brightness(.55); }
.btn-super .lucchetto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.fine-missioni .nuovo-potere { background: linear-gradient(90deg, #fff3a0, #ffd23f); font-weight: 900; animation: combo .4s ease-out; }
.fine-missioni .nuovo-potere::before { content: "★"; color: var(--lacca-scura); }
.frase { font-style: italic; color: #6b4a2f; }

/* ======================================================== mappa */
.mondi-schede { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* le linguette dei mondi: bordo d'inchiostro e (attiva) cornice d'oro tagliati con la stessa V del fondo (vedi .nobori) */
.mondo-scheda { position: relative; isolation: isolate; padding: 11px 21px 17px; font: 400 clamp(17px, 2.2vw, 22px)/1 var(--font); letter-spacing: 1px;
  color: #fff; border: 0; -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  background: var(--inchiostro); min-width: 156px; }
.mondo-scheda::before, .mondo-scheda::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.mondo-scheda::before { inset: 3px 3px 4px; background: linear-gradient(180deg, var(--c, #3a3a4a), color-mix(in srgb, var(--c, #3a3a4a) 60%, #000)); }
.mondo-scheda small { display: block; font: 900 13px var(--cjk); opacity: .9; margin-bottom: 3px; -webkit-text-stroke: 0; }
.mondo-scheda.attivo { transform: translateY(2px); }
.mondo-scheda.attivo::before { background: var(--oro); }
.mondo-scheda.attivo::after { inset: 6px 6px 8px; background: linear-gradient(180deg, var(--c, #3a3a4a), color-mix(in srgb, var(--c, #3a3a4a) 60%, #000)); }
.mondo-scheda.chiuso { filter: grayscale(.9) brightness(.6); cursor: not-allowed; }
.mappa-corpo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; min-height: 0; flex: 0 1 auto; overflow: auto; padding: 10px 10px 12px; margin: -10px -10px 0; }
.livelli { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-content: start; padding: 12px; border-radius: 12px; border: 3px solid var(--inchiostro);
  background: var(--seigaiha), linear-gradient(180deg, #2b1f4a, #1a0f2e); background-size: 40px 20px, auto; }
.livello { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font: 400 clamp(22px, 3vw, 32px) var(--font);
  color: #fff; -webkit-text-stroke: 1.5px var(--inchiostro); paint-order: stroke fill; border: 3px solid var(--inchiostro); border-radius: 50%; padding: 0;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--lacca) 55%, var(--lacca-scura)); box-shadow: 0 4px 0 var(--inchiostro), inset 0 0 0 3px rgba(255,213,107,.6); }
.livello.chiuso { background: radial-gradient(circle at 35% 30%, #6a6a7a, #3a3a4a); cursor: not-allowed; }
.livello.chiuso::after { content: "🔒"; position: absolute; font-size: 14px; bottom: -4px; right: -4px; -webkit-text-stroke: 0; }
.livello.scelto { outline: 4px solid var(--oro); outline-offset: 3px; animation: pulsa 1s ease-in-out infinite; }
.livello.boss { border-radius: 14px; }
.livello .stelle { position: absolute; bottom: -10px; font-size: 12px; letter-spacing: -1px; -webkit-text-stroke: 0; text-shadow: 0 0 2px #000; }
@keyframes pulsa { 50% { transform: scale(1.08); } }
.pergamena-grande { position: relative; padding: 16px 22px; border: 3px solid var(--inchiostro); border-radius: 6px;
  background: var(--asanoha), linear-gradient(180deg, #fffaf0, var(--riso)); background-size: 60px 104px, auto; }
.pergamena-grande::before, .pergamena-grande::after { content: ""; position: absolute; left: -10px; right: -10px; height: 14px; border: 3px solid var(--inchiostro); border-radius: 8px;
  background: linear-gradient(180deg, #8a4a1c, #5a2e10); }
.pergamena-grande::before { top: -10px; } .pergamena-grande::after { bottom: -10px; }
.scheda-livello h3 { margin: 4px 0; font: 400 clamp(24px, 3vw, 34px)/1 var(--font); color: var(--lacca); -webkit-text-stroke: 1px var(--inchiostro); }
.scheda-livello .sotto { font: 900 14px var(--cjk); color: #8a6a4a; }
.scheda-livello p { font: 500 14px/1.4 var(--testo); margin: 8px 0; }
.scheda-livello ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.scheda-livello li { font: 400 13.5px var(--asia); padding: 4px 8px 4px 30px; position: relative; background: rgba(255,255,255,.6); border-radius: 6px; }
.scheda-livello li::before { content: "◇"; position: absolute; left: 9px; color: var(--lacca); font-weight: 900; }
.scheda-livello li.fatta::before { content: "★"; color: #e8a400; }
.scheda-livello .record { margin-top: 8px; font: 700 13px var(--testo); color: #6b4a2f; }
/* (12-10) utente: «descrizioni dei livelli più belline»: la storia su un cartiglio con la pennellata rossa e il
   capolettera, il consiglio a parte col timbro 忍 */
.scheda-livello p.tema { position: relative; margin: 10px 0 6px; padding: 9px 14px 9px 22px; font: 400 15px/1.45 var(--testo); color: #3a2416;
  background: linear-gradient(90deg, rgba(255,226,168,.75), rgba(255,250,240,.35)); border-radius: 4px 12px 12px 4px; }
.scheda-livello p.tema::before { content: ""; position: absolute; left: 6px; top: 7px; bottom: 7px; width: 6px; border-radius: 6px 2px 6px 2px;
  background: linear-gradient(180deg, var(--lacca), var(--lacca-scura)); transform: skewY(-4deg); }
.scheda-livello p.tema::first-letter { font: 400 1.35em/1 var(--font); color: var(--lacca); }
.scheda-livello p.consiglio { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 14px/1.3 var(--asia); color: var(--lacca-scura); }
.scheda-livello p.consiglio .hanko { flex: none; width: 1.7em; height: 1.7em; font-size: 13px; }

/* ======================================================== tecniche, opzioni */
.rotolo { padding: 6px 4px; overflow: auto; }
table.comandi { width: 100%; border-collapse: separate; border-spacing: 0 6px; font: 500 14.5px/1.3 var(--testo); }
table.comandi td { padding: 6px 10px; background: rgba(255,255,255,.6); }
table.comandi td:first-child { white-space: nowrap; border-radius: 8px 0 0 8px; text-align: right; }
table.comandi td:last-child { border-radius: 0 8px 8px 0; }
/* (12-10) comandi PERSONALIZZABILI: schede tastiera/joystick, tasti come tasselli di legno chiaro cliccabili */
.com-schede { display: flex; gap: 8px; justify-content: center; margin: 2px 0 4px; }
.com-scheda { padding: 6px 16px; font: 400 18px var(--font); letter-spacing: 1px; color: var(--inchiostro); background: #f3e2bd;
  border: 3px solid var(--inchiostro); border-radius: 10px 10px 4px 4px; box-shadow: 0 3px 0 var(--inchiostro); }
.com-scheda.attiva { color: #fff; background: var(--lacca); -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; transform: translateY(-2px); }
.com-nota { margin: 0; font: 400 13.5px/1.35 var(--testo); color: #6b4a2f; text-align: center; }
.com-msg { margin: 0; min-height: 1.3em; font: 400 14px var(--testo); color: #1f6a2a; text-align: center; }
table.comandi .com-tasti { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.com-tasto { min-width: 46px; padding: 4px 9px; font: 400 15px var(--testo); color: var(--inchiostro); background: linear-gradient(180deg, #fffaf0, #ecdcb8);
  border: 2px solid var(--inchiostro); border-bottom-width: 4px; border-radius: 7px; white-space: nowrap; }
.com-tasto:hover { background: #fff3c4; }
.com-tasto.vuoto { color: #a8906c; border-style: dashed; }
.com-tasto.ascolta { color: #fff; background: var(--lacca); animation: com-ascolta .8s ease-in-out infinite alternate; }
@keyframes com-ascolta { to { box-shadow: 0 0 0 4px var(--oro); } }
.com-fisso { font: 400 13px var(--testo); color: #6b4a2f; white-space: nowrap; }
table.comandi .com-d::before { content: " · "; }
table.comandi b { font-weight: 400; color: var(--lacca); }
/* la scelta col JOYSTICK nei menu (avvio.js `bottoneMenu`) */
.schermata button.pad-fuoco:focus, .schermata button:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.opzioni { display: grid; gap: 10px; }
.nota-opzioni { margin: 0; font: 500 14.5px/1.4 var(--testo); color: #6b4a2f; }
.nota-opzioni a { color: #a3261a; font-weight: 700; }

/* ======================================================== pausa e fine */
.missioni-pausa { display: grid; gap: 6px; font: 400 14px var(--asia); }
.missioni-pausa div { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.65); border: 2px solid var(--inchiostro); }
.missioni-pausa .fatta { background: #fff1b8; }
#fine-pannello { position: relative; overflow: hidden; }
/* (12-10, banco) i raggi GIRANO dentro un riquadro che li ritaglia: girando loro stessi uscivano dal pannello e lo facevano
   scorrere, anche di lato, a ogni misura */
.fine-fascia { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fine-fascia::before { content: ""; position: absolute; inset: -60%; opacity: .35; animation: gira 40s linear infinite;
  background: repeating-conic-gradient(from 0deg at 50% 41%, var(--oro) 0 6deg, transparent 6deg 18deg); }
.fine-tit { margin: 0; text-align: center; font: 400 clamp(40px, 7vw, 76px)/1 var(--font); color: #ffe14d; letter-spacing: 2px; -webkit-text-stroke: 3px var(--inchiostro);
  paint-order: stroke fill; text-shadow: 4px 5px 0 var(--lacca), 7px 8px 0 var(--inchiostro); transform: rotate(-2deg); }
.fine-tit.sconfitta { color: #c9c2d8; text-shadow: 4px 5px 0 #3a2a5a, 7px 8px 0 var(--inchiostro); }
.fine-sotto { text-align: center; font: 600 15px var(--testo); color: #6b4a2f; }
.fine-corpo { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.fine-corpo canvas { width: 180px; height: 210px; }
.fine-dati { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font: 600 15px var(--testo); }
.fine-dati b { font: 400 22px var(--font); color: var(--lacca); text-align: right; }
.fine-dati .nuovo { color: #e8a400; font: 400 15px var(--font); }
.fine-missioni { display: grid; gap: 6px; }
.fine-missioni div { padding: 6px 10px 6px 34px; position: relative; border-radius: 8px; background: rgba(255,255,255,.65); border: 2px solid var(--inchiostro); font: 400 14px var(--asia); }
.fine-missioni div::before { content: "◇"; position: absolute; left: 10px; font-weight: 900; color: var(--lacca); }
.fine-missioni .fatta { background: #fff1b8; } .fine-missioni .fatta::before { content: "★"; color: #e8a400; }

/* ======================================================== HUD */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
.hud-sx { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); display: grid; gap: 6px; justify-items: start; }
.hud-riga { display: flex; gap: 6px; align-items: stretch; }
.pergamena { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 3px solid var(--inchiostro); border-radius: 10px;
  background: linear-gradient(180deg, #fffaf0, var(--riso) 70%, var(--riso-ombra)); box-shadow: 0 3px 0 var(--inchiostro), inset 0 0 0 2px rgba(200,144,42,.5); position: relative; }
.pergamena::before, .pergamena::after { content: ""; position: absolute; top: -3px; bottom: -3px; width: 7px; border: 3px solid var(--inchiostro); background: var(--lacca); border-radius: 4px; }
.pergamena::before { left: -7px; } .pergamena::after { right: -7px; }
.pergamena b { font: 400 22px/1 var(--font); color: var(--inchiostro); letter-spacing: 1px; min-width: 1.5em; }
.ico { display: inline-block; width: 30px; height: 30px; background: center/contain no-repeat; flex: none; }
.ico-ramen { width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M40 4 L30 30 M48 6 L36 30' stroke='%23c8902a' stroke-width='4' stroke-linecap='round'/%3E%3Cellipse cx='32' cy='30' rx='27' ry='7' fill='%23ffd9a0' stroke='%232a2238' stroke-width='4'/%3E%3Cpath d='M12 29 q8 -6 14 0 q6 6 12 0 q6 -6 14 0' fill='none' stroke='%23f5c26b' stroke-width='3'/%3E%3Ccircle cx='22' cy='28' r='5' fill='%23fff' stroke='%232a2238' stroke-width='2'/%3E%3Ccircle cx='22' cy='28' r='2.4' fill='%23ffb000'/%3E%3Cpath d='M5 31 Q8 56 32 58 Q56 56 59 31 Z' fill='%23e0232e' stroke='%232a2238' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M12 40 h40' stroke='%23fff' stroke-width='3' stroke-dasharray='4 4'/%3E%3C/svg%3E"); }
.ico-te { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 10 q-4 -6 2 -9 M34 10 q-4 -6 2 -9' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 18 h44 l-4 34 q-1 6 -7 6 H21 q-6 0 -7 -6 Z' fill='%235bb04a' stroke='%232a2238' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M16 26 h32' stroke='%23c8ff9a' stroke-width='4'/%3E%3Ccircle cx='32' cy='40' r='6' fill='none' stroke='%232a2238' stroke-width='3'/%3E%3C/svg%3E"); }
/* (12-10) l'arma da lancio di Ebi (kunai) e di Tobiko (uovo-bomba); Maki non ne ha: il riquadro si nasconde */
.ico-kunai { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg transform='rotate(-45)'%3E%3Cpath d='M0-46 L13-8 L0 0 L-13-8Z' fill='%23525a6a' stroke='%232a2238' stroke-width='6' stroke-linejoin='round'/%3E%3Crect x='-5' y='0' width='10' height='30' fill='%23c0262d' stroke='%232a2238' stroke-width='5'/%3E%3Ccircle cy='38' r='8' fill='none' stroke='%232a2238' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-uovo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M8-30 Q18-44 30-40' fill='none' stroke='%235a3a1a' stroke-width='6'/%3E%3Ccircle cx='31' cy='-41' r='7' fill='%23ffe14d'/%3E%3Ccircle cy='6' r='34' fill='%23ff9f4a' stroke='%232a2238' stroke-width='7'/%3E%3Ccircle cx='-11' cy='-6' r='6' fill='%23ffd6a8'/%3E%3Ccircle cx='9' cy='14' r='6' fill='%23ffd6a8'/%3E%3Ccircle cx='-6' cy='22' r='5' fill='%23ffd6a8'/%3E%3C/svg%3E"); }
.hud-shuriken.senza { display: none; }
.ico-shuriken { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-46 L10-10 L46 0 L10 10 L0 46 L-10 10 L-46 0 L-10-10Z' fill='%23d8e0ea' stroke='%232a2238' stroke-width='7' stroke-linejoin='round'/%3E%3Ccircle r='9' fill='%232a2238'/%3E%3C/svg%3E"); }
.ico-granata { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M38 12 q8 -8 14 -2' stroke='%23c0c8d0' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Crect x='25' y='8' width='14' height='9' rx='2' fill='%23c0c8d0' stroke='%232a2238' stroke-width='4'/%3E%3Cellipse cx='32' cy='38' rx='20' ry='22' fill='%237fc93a' stroke='%232a2238' stroke-width='5'/%3E%3Cpath d='M14 31 h36 M14 45 h36 M32 17 v42' stroke='%232a2238' stroke-opacity='.45' stroke-width='3'/%3E%3Cellipse cx='24' cy='28' rx='5' ry='3' fill='%23fff' fill-opacity='.6' transform='rotate(-30 24 28)'/%3E%3C/svg%3E"); }
.ico-moneta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='%23ffd23f' stroke='%232a2238' stroke-width='5'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='%23c8902a' stroke-width='3'/%3E%3Crect x='26' y='26' width='12' height='12' fill='%232a2238'/%3E%3Cpath d='M18 20 q6 -8 14 -9' stroke='%23fff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ciotole { display: flex; gap: 2px; }
.ciotole i { width: 20px; height: 15px; border: 2.5px solid var(--inchiostro); border-top: 0; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #ffd9a0 0 30%, #e0232e 30%); }
.ciotole i.vuota { background: #6b5a7a; opacity: .45; }
.hud-vita.poche { animation: trema .25s infinite; }
@keyframes trema { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.tazze { display: flex; gap: 3px; }
.tazze i { position: relative; width: 16px; height: 18px; border: 2.5px solid var(--inchiostro); border-radius: 2px 2px 7px 7px; background: #e8e0d0; overflow: hidden; }
.tazze i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--q, 0%); background: linear-gradient(180deg, #a6e86a, #4f9a3a); }
.tazze i.piena { box-shadow: 0 0 8px #a6e86a; }
.tasca { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border: 3px solid var(--inchiostro); border-radius: 10px; position: relative;
  background: linear-gradient(180deg, #2b1f2a, #120a12); box-shadow: 0 3px 0 var(--inchiostro), inset 0 0 0 2px var(--lacca); }
.tasca-tit { position: absolute; top: -11px; left: 6px; font: 400 11px var(--font); color: var(--oro); letter-spacing: 1px; -webkit-text-stroke: .5px #000; }
.tasca-tit kbd { font-size: 9px; padding: 0 3px; border-width: 1px 1px 2px; }
.tasca .posto { width: 40px; height: 40px; border-radius: 7px; border: 2px dashed rgba(255,213,107,.5); background: center/80% no-repeat rgba(255,255,255,.08); }
.tasca .posto.pieno { border: 2px solid var(--oro); background-color: rgba(255,213,107,.18); }
.colpo-speciale { position: relative; display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border: 3px solid var(--inchiostro); border-radius: 10px;
  background: #fffaf0; box-shadow: 0 3px 0 var(--inchiostro); overflow: hidden; }
.colpo-speciale canvas { width: 36px; height: 36px; }
.colpo-speciale span { font: 400 16px var(--font); letter-spacing: .5px; text-transform: uppercase; color: var(--lacca); }
.colpo-speciale i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--lacca); width: var(--q, 100%); }
.bonus-attivi { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.bonus-attivi span { font: 400 13px var(--font); letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; border: 2px solid var(--inchiostro); background: var(--oro); }
.hud-centro { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; width: min(440px, 44vw); }
.avanzamento { width: 100%; }
.strada { position: relative; height: 12px; border: 3px solid var(--inchiostro); border-radius: 10px; background: rgba(42,34,56,.6); }
.strada i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: linear-gradient(90deg, var(--lacca), var(--oro)); }
.testa-ninja { position: absolute; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); background: url("../img/ninja/sake.webp") center/contain no-repeat;
  filter: drop-shadow(0 0 2px #000); }
/* (13-10) -38% invece di -50%: la lanterna usciva di 2 px dal bordo alto sul PC (spostare la barra copriva le supermosse) */
.ristorante { position: absolute; right: -14px; top: 50%; transform: translateY(-38%); font-size: 22px; filter: drop-shadow(0 0 4px #ff6a3c); }
.sushi-oro { display: flex; gap: 4px; }
.sushi-oro span { width: 26px; height: 18px; border-radius: 10px 10px 5px 5px; border: 2.5px solid rgba(255,255,255,.35); background: rgba(42,34,56,.5); }
.sushi-oro span.preso { border-color: var(--inchiostro); background: linear-gradient(180deg, #fff6b8, #ffd23f 45%, #fff 46%, #f0e6c8); box-shadow: 0 0 10px #ffd23f; }
.missione { font: 400 13px var(--asia); letter-spacing: .3px; color: #fff; padding: 3px 12px; border-radius: 20px; background: rgba(42,34,56,.75); border: 2px solid var(--oro); text-shadow: 1px 1px 0 #000; }
.missione.fatta { background: rgba(232,164,0,.85); }
.assalto-banner { font: 400 clamp(26px, 4vw, 44px)/1 var(--font); color: #fff; letter-spacing: 3px; padding: 4px 20px; background: var(--lacca); border: 3px solid var(--inchiostro);
  transform: skewX(-12deg); -webkit-text-stroke: 1.5px var(--inchiostro); paint-order: stroke fill; animation: lampeggia 0.6s steps(2) infinite; }
.hud-dx { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: grid; gap: 4px; justify-items: end; }
.punti { font: 400 26px/1 var(--font); color: #fff; letter-spacing: 1px; -webkit-text-stroke: 2px var(--inchiostro); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--lacca); }
.btn-pausa { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--inchiostro); font: 900 16px var(--testo); color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--lacca) 60%, var(--lacca-scura)); box-shadow: 0 3px 0 var(--inchiostro); }
.combo { text-align: right; margin-top: 6px; animation: combo .3s ease-out; }
.combo small { display: block; font: 400 16px var(--font); color: #fff; letter-spacing: 2px; -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; }
.combo b { display: block; font: 400 clamp(40px, 6vw, 64px)/.9 var(--font); color: #ffe14d; -webkit-text-stroke: 3px var(--inchiostro); paint-order: stroke fill;
  text-shadow: 3px 4px 0 var(--lacca); transform: rotate(-6deg); }
.combo.spento b { color: #c9c2d8; text-shadow: 3px 4px 0 #3a2a5a; }
@keyframes combo { from { transform: scale(1.6); } }
.hud-super { position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; }
.btn-super { position: relative; width: 62px; height: 62px; border-radius: 12px; border: 3px solid var(--inchiostro); padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--c1, #ff6a6a), var(--c2, #7a1018)); box-shadow: 0 4px 0 var(--inchiostro); color: #fff; }
.btn-super .k { position: absolute; top: 2px; left: 5px; font: 400 16px var(--font); -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; }
.btn-super .kj { font: 900 26px var(--cjk); text-shadow: 2px 2px 0 var(--inchiostro); }
.btn-super .costo { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.btn-super .costo i { width: 8px; height: 9px; border: 1.5px solid var(--inchiostro); border-radius: 1px 1px 4px 4px; background: #a6e86a; }
.btn-super:disabled { filter: grayscale(1) brightness(.6); }
.btn-super.pronta { animation: brilla 1.2s ease-in-out infinite; }
@keyframes brilla { 50% { box-shadow: 0 4px 0 var(--inchiostro), 0 0 18px var(--oro); } }

/* ======================================================== comandi a tocco */
#tocco { position: fixed; inset: auto 0 0 0; z-index: 12; height: 0; }
#tocco .tt { position: absolute; pointer-events: auto; border: 3px solid var(--inchiostro); border-radius: 50%; color: #fff; font: 400 18px var(--font);
  -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.55), rgba(42,34,56,.55)); opacity: .85;
  touch-action: none; }
#tocco .tt.giu-premuto { transform: scale(.92); opacity: 1; background: radial-gradient(circle at 40% 30%, #fff6b8, var(--oro-scuro)); }
.tocco-sx .tt { width: 64px; height: 64px; font-size: 24px; }
.tocco-sx .sx { left: 14px; bottom: 74px; } .tocco-sx .dx { left: 150px; bottom: 74px; }
.tocco-sx .su { left: 82px; bottom: 140px; } .tocco-sx .giu { left: 82px; bottom: 10px; }
.tocco-dx .tt-grande { width: 84px; height: 84px; }
.tocco-dx .sparo { right: 112px; bottom: 18px; background: radial-gradient(circle at 40% 30%, #ff9a9a, rgba(192,38,45,.85)); }
.tocco-dx .salto { right: 14px; bottom: 60px; background: radial-gradient(circle at 40% 30%, #bff3ff, rgba(30,140,200,.85)); }
.tocco-dx .katana { right: 100px; bottom: 112px; width: 66px; height: 66px; font: 900 26px var(--cjk); background: radial-gradient(circle at 40% 30%, #fff, rgba(80,90,120,.85)); }
.tocco-dx .piccolo { width: 46px; height: 46px; font: 900 17px var(--cjk); }
.tocco-dx .shu { right: 22px; bottom: 156px; } .tocco-dx .fumo { right: 176px; bottom: 120px; } .tocco-dx .tas { right: 196px; bottom: 60px; }
.tocco-dx .gra { right: 22px; bottom: 210px; background: radial-gradient(circle at 40% 30%, #e6ffb0, rgba(63,138,31,.88)); }
.tocco-dx .sca { right: 74px; bottom: 196px; } .tocco-dx .ram { right: 160px; bottom: 176px; background: radial-gradient(circle at 40% 30%, #fff3a0, rgba(232,164,0,.9)); }
body.tocco .hud-super { bottom: auto; top: 92px; left: auto; right: 10px; transform: none; flex-direction: column; }
body.tocco .btn-super { width: 50px; height: 50px; }

/* ======================================================== telefono */
@media (max-width: 760px) {
  .ninja-griglia { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; }
  .ninja-dettaglio, .mappa-corpo { grid-template-columns: 1fr; }
  .cornice { border-width: 20px; border-image-width: 20px; }
  .hud-centro { width: 40vw; top: 56px; }
  .ico-ramen { width: 30px; height: 30px; }
  .ciotole i { width: 14px; height: 11px; }
  .tasca .posto { width: 32px; height: 32px; }
  .livelli { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
@media (max-height: 520px) {
  .titolo-menu { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 2vh; }
  .titolo-menu .tavoletta { min-width: 0; }
  .premi-tasto { bottom: 30%; }
  .pannello { gap: 8px; }
  .ninja-carta { aspect-ratio: 1; }
}

/* ---- telefono con i comandi a tocco (12-10, foto delle prove): disposizioni dedicate ai due orientamenti */
@media (orientation: landscape) and (max-height: 520px) {
  body.tocco .hud-super { top: 74px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; gap: 6px; }
  body.tocco .btn-super { width: 42px; height: 42px; }
  body.tocco .btn-super .kj { font-size: 19px; }
  body.tocco .missione { font-size: 11px; padding: 2px 8px; }
  .hud-centro { top: 6px; }
}
@media (orientation: portrait) and (max-width: 560px) {
  .hud-centro { top: 162px; left: 10px; transform: none; width: calc(100vw - 84px); }
  .missione { font-size: 11px; }
  body.tocco .hud-super { top: 150px; }
  body.tocco .combo { margin-right: 66px; }
  body.tocco .btn-super { width: 46px; height: 46px; }
  .tocco-sx .tt { width: 54px; height: 54px; font-size: 20px; }
  .tocco-sx .sx { left: 8px; bottom: 70px; } .tocco-sx .dx { left: 118px; bottom: 70px; }
  .tocco-sx .su { left: 63px; bottom: 126px; } .tocco-sx .giu { left: 63px; bottom: 14px; }
  .tocco-dx .tt-grande { width: 72px; height: 72px; font-size: 16px; }
  .tocco-dx .sparo { right: 84px; bottom: 12px; } .tocco-dx .salto { right: 8px; bottom: 78px; }
  .tocco-dx .katana { right: 90px; bottom: 96px; width: 54px; height: 54px; font-size: 22px; }
  .tocco-dx .piccolo { width: 42px; height: 42px; font-size: 15px; }
  .tocco-dx .shu { right: 14px; bottom: 160px; } .tocco-dx .fumo { right: 64px; bottom: 160px; }
  .tocco-dx .tas { right: 150px; bottom: 150px; } .tocco-dx .sca { right: 150px; bottom: 104px; }
  .tocco-dx .ram { right: 112px; bottom: 206px; } .tocco-dx .gra { right: 14px; bottom: 210px; }
}

/* ---- (12-10, banco_impaginazione.cjs) correzioni misurate sul telefono */
/* ORIZZONTALE: 390 px di altezza. HUD più piccolo (la vita copriva la barra del percorso, granate sopra le supermosse),
   combo più piccolo (cadeva sopra 爆 e ✦), 爆 spostato fuori dalla colonna del combo; cornici più sottili, la FINE su due
   colonne coi pulsanti in vista (era alta il doppio dello schermo), la PAUSA coi pulsanti a due a due */
@media (orientation: landscape) and (max-height: 520px) {
  body.tocco .hud-sx { transform: scale(.72); transform-origin: top left; }
  .hud-centro { top: 10px; }
  body.tocco .punti { font-size: 20px; }
  body.tocco .btn-pausa { width: 38px; height: 38px; }
  body.tocco .combo { margin-top: 2px; }
  body.tocco .combo small { font-size: 12px; }
  body.tocco .combo b { font-size: 34px; -webkit-text-stroke-width: 2px; }
  .tocco-dx .gra { right: 128px; bottom: 236px; }
  /* (13-10, utente: «i pulsanti movimento in orizzontale li farei più piccoli») frecce 48 px invece di 64: la croce passa
     da 214×204 a 154×148 px e lascia vedere il terreno e le buche */
  .tocco-sx .tt { width: 48px; height: 48px; font-size: 18px; border-width: 2px; }
  .tocco-sx .sx { left: 10px; bottom: 54px; } .tocco-sx .dx { left: 106px; bottom: 54px; }
  .tocco-sx .su { left: 58px; bottom: 100px; } .tocco-sx .giu { left: 58px; bottom: 6px; }
  .cornice { border-width: 16px; border-image-width: 16px; }
  .pannello { max-height: calc(100vh - 20px); }
  .pannello-tit .nobori { width: 28px; height: 40px; font-size: 17px; }
  .pannello-tit h2 { font-size: 28px; }
  #fine-pannello { width: min(820px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-content: start; }
  #fine-pannello .fine-tit, #fine-pannello .fine-sotto { grid-column: 1 / -1; }
  #fine-pannello .fine-tit { font-size: 40px; }
  #fine-pannello .fine-sotto { font-size: 13px; }
  #fine-pannello .fine-corpo { grid-column: 1; grid-row: 3 / span 2; gap: 8px; }
  #fine-pannello .fine-corpo canvas { width: 104px; height: 120px; }
  #fine-pannello .fine-dati { gap: 0 10px; font-size: 13px; }
  #fine-pannello .fine-dati b { font-size: 18px; }
  #fine-pannello .fine-missioni { grid-column: 2; grid-row: 3; gap: 4px; }
  #fine-pannello .fine-missioni div { font-size: 12px; padding: 3px 8px 3px 28px; }
  #fine-pannello .riga-pulsanti { grid-column: 2; grid-row: 4; align-self: end; gap: 8px; }
  #fine-pannello .tavoletta { min-height: 42px; font-size: 18px; padding: 6px 12px; }
  #fine-pannello .tavoletta.grande { min-height: 46px; font-size: 21px; }
  .pannello.stretto { width: min(560px, 100%); }
  .colonna-pulsanti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .colonna-pulsanti .tavoletta:first-child { grid-column: 1 / -1; }
  .colonna-pulsanti .tavoletta { min-height: 44px; }
  /* (13-10) la PAUSA col pulsante ⛶ in più: quattro colonne, tre righe (con quattro righe MAPPA finiva fuori vista sui
     telefoni bassi); audio e schermo intero da sole icone */
  #v-pausa .colonna-pulsanti { grid-template-columns: repeat(4, 1fr); }
  #v-pausa .colonna-pulsanti .tavoletta { grid-column: span 2; }
  #v-pausa .colonna-pulsanti .tavoletta:first-child { grid-column: 1 / -1; }
  #v-pausa #p-audio, #v-pausa #p-schermo { grid-column: span 1; }
  #v-pausa .colonna-pulsanti:has(#p-schermo[hidden]) #p-audio { grid-column: span 2; }
  #v-pausa #p-schermo .lungo { display: none; }
  .missioni-pausa { gap: 4px; font-size: 12px; } .missioni-pausa div { padding: 3px 8px; }
  .opzioni { grid-template-columns: 1fr 1fr; }
  .opzioni .tavoletta { min-height: 46px; font-size: 17px; }
  /* la fila dei pulsanti appiccicata in fondo più bassa; MAPPA e NINJA compatte (si vedeva solo mezza riga di livelli) */
  .pannello > .riga-pulsanti:last-child { padding: 8px 0 6px; }
  .riga-pulsanti .tavoletta { min-height: 44px; font-size: 19px; }
  .riga-pulsanti .tavoletta.grande { min-height: 48px; font-size: 24px; }
  .mondo-scheda { padding: 4px 12px 9px; font-size: 15px; min-width: 110px; }
  .mondo-scheda small { font-size: 10px; margin-bottom: 1px; }
  .mappa-corpo { grid-template-columns: auto minmax(0, 1fr); }
  .livelli { grid-template-columns: repeat(5, 40px); gap: 8px; padding: 8px 10px 12px; justify-content: center; }
  .livello { font-size: 19px; }
  .scheda-livello h3 { font-size: 22px; }
  .ninja-carta { aspect-ratio: auto; height: 30vh; }
  .ninja-carta .nome { font-size: 17px; padding: 4px; }
  .ninja-carta.chiuso::after { font-size: 15px; padding: 2px 8px; }
}
/* (15-10) utente: «la fascia sotto taglia un sacco la visuale, falla un pelo sotto i pulsanti». Sul telefono la carta di
   riso non copre più tutta l'altezza della fila: resta solo una striscia SOTTO i pulsanti, fra un pulsante e l'altro si
   vede (e si tocca: la fila lascia passare i tocchi, i pulsanti no) il contenuto che scorre */
@media (orientation: landscape) and (max-height: 520px), (orientation: portrait) and (max-width: 560px) {
  .pannello > .riga-pulsanti:last-child { pointer-events: none;
    background: linear-gradient(180deg, rgba(251,243,223,0) calc(100% - 16px), var(--riso-ombra) calc(100% - 8px)); }
  .pannello > .riga-pulsanti:last-child > * { pointer-events: auto; }
  /* (16-10) utente: «anche qui non c'è la riduzione della barra sotto». Bottega, corsa, mappa, ricettario e fumetti non
     scorrono col PANNELLO ma in un riquadro interno, che finiva 60 px sopra i pulsanti (e lì il dito non trovava niente da
     far scorrere). Il riquadro ora scende SOTTO la fila (margine negativo = quasi tutta la sua altezza) e tiene altrettanto
     spazio in fondo, così l'ultima voce si porta sopra i pulsanti. ‼️ `--sotto` non deve superare l'altezza della fila: il
     riquadro uscirebbe dal pannello e scorrerebbe il pannello intero */
  .pannello { --sotto: 54px; }
  .pannello > :is(.bot-corpo, .corsa-corpo, .mappa-corpo, .fum-galleria, .ric-corpo) { margin-bottom: calc(-1 * var(--sotto)); }
  .pannello > :is(.bot-corpo, .corsa-corpo, .mappa-corpo, .fum-galleria), .ric-carte { padding-bottom: var(--sotto); }
}
/* in verticale la fila della MAPPA va su tre righe (NINJA, icone, VIA): il testo del livello passava fra le icone */
@media (orientation: portrait) and (max-width: 560px) {
  .pannello > .mappa-corpo { margin-bottom: 0; padding-bottom: 12px; }
}
@media (orientation: landscape) and (max-height: 380px) {
  body.tocco .combo small { display: none; }
  body.tocco .combo b { font-size: 28px; }
}
/* VERTICALE: la riga tè/shuriken/granate toccava la pausa, il combo la barra del percorso */
@media (orientation: portrait) and (max-width: 560px) {
  body.tocco .hud-sx { transform: scale(.86); transform-origin: top left; }
  body.tocco .combo { position: absolute; top: 240px; right: 66px; margin: 0; }
  body.tocco .combo b { font-size: 40px; }
}
@media (max-width: 420px) {
  .mondi-schede { flex-wrap: nowrap; gap: 6px; }
  .mondo-scheda { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 5px 6px 12px; }
  .mondo-scheda small { font-size: 10px; }
  #fine-pulsanti .tavoletta.grande { flex: 1 1 100%; }
  .fine-corpo { gap: 10px; }
  .fine-corpo canvas { width: 100px; height: 118px; }
  .fine-dati { gap: 2px 8px; font-size: 14px; }
  .fine-dati b { font-size: 19px; }
}
/* telefono piccolo in verticale (360 px): la freccia ▶ toccava lo scatto */
@media (orientation: portrait) and (max-width: 370px) {
  .tocco-sx .sx { left: 4px; } .tocco-sx .dx { left: 108px; }
  .tocco-sx .su, .tocco-sx .giu { left: 56px; }
}

/* ---------------------------------------------------------------- (14-10) CO-OP: scelta 1/2 giocatori e HUD del G2 */
.coop-scelta { display: flex; gap: 10px; justify-content: center; margin: 0 0 10px; }
.coop-modo, .coop-com { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 3px solid var(--inchiostro); border-radius: 10px;
  font: 400 18px/1 var(--font); letter-spacing: 1px; color: var(--inchiostro); background: #f4e6c4; box-shadow: 0 3px 0 var(--inchiostro); cursor: pointer; }
.coop-modo.attivo, .coop-com.attivo { color: #fff; background: var(--lacca); -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill;
  box-shadow: 0 0 0 3px var(--oro), 0 3px 0 var(--inchiostro); }
.coop-modo .hanko { width: 1.4em; height: 1.4em; font-size: 15px; }
.coop-g2 { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px 12px; border: 3px dashed var(--lacca); border-radius: 12px; background: rgba(255,240,220,.85); }
.coop-g2[hidden] { display: none; }
.coop-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coop-riga > b { min-width: 7.5em; font: 400 17px var(--font); letter-spacing: 1px; color: var(--lacca); }
.coop-ninja { display: flex; flex-wrap: wrap; gap: 6px; }
.coop-n2 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 2px; border: 3px solid var(--inchiostro); border-radius: 22px;
  font: 400 16px/1 var(--font); color: var(--inchiostro); background: linear-gradient(135deg, var(--c1), #fff6e8); cursor: pointer; }
.coop-n2 img { width: 30px; height: 30px; object-fit: contain; }
.coop-n2.attivo { box-shadow: 0 0 0 3px var(--oro), 0 0 14px rgba(255,213,107,.9); background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff;
  -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; }
.coop-com { font-size: 15px; padding: 4px 10px; }
.coop-nota { margin: 0; font: 600 12.5px/1.35 var(--testo, sans-serif); color: #6a4a3a; }
.hud-altri { display: grid; }
.hud-altri[hidden] { display: none; }
.hud-g2 { display: grid; gap: 4px; justify-items: end; margin-top: 4px; }
.hud-g2 .g2-nome { font: 400 15px/1 var(--font); letter-spacing: 1px; color: var(--gc, var(--lacca)); -webkit-text-stroke: .6px var(--inchiostro); white-space: nowrap; }
.coop-com-box { display: inline-flex; gap: 6px; margin-left: auto; }
/* (14-10, utente: «un colore diverso per ognuno con il numero del player»): G1 rosso, G2 azzurro, G3 verde, G4 arancio —
   gli stessi della targhetta sopra la testa e dell'anello ai piedi (partita.js COLORI_GIOCATORE) */
.coop-riga > b { color: var(--gc, var(--lacca)); -webkit-text-stroke: .6px var(--inchiostro); paint-order: stroke fill; }
.coop-riga .coop-n2.attivo { box-shadow: 0 0 0 3px var(--gc, var(--oro)), 0 0 14px var(--gc, rgba(255,213,107,.9)); }
.ninja-carta[data-g]::before { content: "G" attr(data-g); position: absolute; top: 6px; right: 6px; z-index: 3; padding: 2px 8px;
  font: 400 18px/1 var(--font); color: #fff; border: 2px solid var(--inchiostro); border-radius: 10px; background: #3fa9ff; letter-spacing: 1px; }
.ninja-carta[data-g="1"]::before { background: #e8323c; } .ninja-carta[data-g="3"]::before { background: #3fbf6a; }
.ninja-carta[data-g="4"]::before { background: #ff9f1c; }
.g1-nome { font: 400 15px/1 var(--font); letter-spacing: 1px; color: #e8323c; -webkit-text-stroke: .6px var(--inchiostro); white-space: nowrap; }
.g1-nome[hidden] { display: none; }
body.coop .hud-sx .hud-vita { box-shadow: 0 0 0 3px #e8323c, 0 4px 0 var(--inchiostro), inset 0 0 0 2px rgba(200,144,42,.5); }
.hud-g2 .pergamena::before, .hud-g2 .pergamena::after { background: var(--gc, var(--lacca)); }
.hud-g2 .g2-vita { box-shadow: 0 0 0 3px var(--gc, #3fa9ff), 0 4px 0 var(--inchiostro), inset 0 0 0 2px rgba(200,144,42,.5); }
body.tocco .g1-nome { font-size: 12px; }
/* le vite dei COMPAGNI: una barra nel loro colore col numero (le ciotole restano al G1) */
.g2-vite { display: flex; align-items: center; gap: 5px; }
.g2-barra { position: relative; display: block; width: 74px; height: 10px; border: 2px solid var(--inchiostro); border-radius: 6px; background: #6b5a7a; overflow: hidden; }
.g2-barra i { display: block; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.45), transparent 55%), var(--gc, #3fa9ff); transition: width .25s; }
.g2-barra.poche { animation: trema .25s infinite; }
.g2-barra.poche i { background: #e8323c; }
.g2-num { font: 400 15px/1 var(--font); color: var(--inchiostro); min-width: 1.2em; }
body.tocco .hud-altri .g2-barra { width: 46px; height: 7px; border-width: 1.5px; }
body.tocco .hud-altri .g2-num { font-size: 12px; }
.coop-com.fisso { cursor: default; }
.hud-g2 .ciotole i { width: 15px; height: 11px; }
.hud-g2 .tazze i { width: 12px; height: 14px; }
.hud-g2 .pergamena b { font-size: 18px; }
.g2-rientro { padding: 2px 10px; font: 400 16px/1 var(--font); letter-spacing: 1px; color: #fff; background: var(--lacca); border: 2px solid var(--inchiostro); border-radius: 8px; }
.g2-rientro[hidden] { display: none; }

.coop-modo { white-space: nowrap; }
.coop-scelta { flex-wrap: wrap; }
.coop-parola { margin-left: .35em; }
/* (14-10, controllo della sezione) sul telefono in verticale i 4 bottoni non stavano in riga: solo sigillo e numero */
@media (max-width: 560px) { .coop-parola { display: none; } .coop-scelta { gap: 8px; } }
/* l'HUD dei compagni: SEMPRE compatto e a sinistra sotto quello del G1 (avvio.js lo posa misurando l'HUD del G1). Utente
   14-10: a destra (PC) «tagliano la vista», col tocco coprivano supermosse e missione: «a sinistra, sempre più piccoli».
   Una riga per compagno: nome, barra della vita nel suo colore, numero; tè e granate non si vedono (sono suoi) */
.hud-altri { position: fixed; justify-items: start; gap: 4px; z-index: 3; }
.hud-altri .hud-g2 { justify-items: start; margin: 0; }
.hud-altri .g2-riga { display: none; }
.hud-altri .g2-vita { padding: 2px 10px 2px 6px; gap: 6px; }
.hud-altri .g2-rientro { font-size: 13px; padding: 1px 6px; }
body.tocco .hud-altri { gap: 3px; }
body.tocco .hud-altri .g2-nome { font-size: 12px; }
body.tocco .hud-altri .g2-rientro { font-size: 12px; }
/* telefono in verticale: accanto alla tasca, tre righe più basse (sotto c'è la strada dell'avanzamento) */
@media (orientation: portrait) { body.tocco .hud-altri { gap: 3px; } body.tocco .hud-altri .g2-vita { padding: 2px 8px 1px 5px; border-width: 2px; }
  body.tocco .hud-altri .g2-nome, body.tocco .hud-altri .g2-num { font-size: 11px; line-height: 1.15; } }
/* (14-10) multigiocatore chiuso: un ninja solo sbloccato (ognuno deve avere il suo) */
.coop-modo.chiuso { opacity: .55; filter: grayscale(.6); }
.coop-modo.chiuso::after { content: "🔒"; font-size: .9em; }
.coop-chiuso { margin: 0 auto 10px; max-width: 640px; padding: 6px 12px; text-align: center; font: 600 13px/1.35 var(--testo, sans-serif);
  color: var(--lacca-scura); background: #fff3c4; border: 2px solid var(--inchiostro); border-radius: 8px; }
.coop-chiuso[hidden] { display: none; }
@media (max-width: 560px) { .coop-modo { font-size: 15px; padding: 5px 10px; gap: 6px; } .coop-modo .hanko { font-size: 12px; } }
/* telefono in orizzontale: la riga 1/2 giocatori più bassa */
@media (max-height: 520px) { .coop-scelta { margin: 0 0 4px; } .coop-modo { font-size: 14px; padding: 3px 10px; box-shadow: 0 2px 0 var(--inchiostro); } }