/* ======================================================== il DOJO DEL CLAN: accesso e account (12-10)
   utente: «pannello login sempre a tema col gioco, effetti belli cartoon»: illustrazione propria (img/conto.webp), petali
   che cadono, timbro «入門» che si stampa all'ingresso, tessera del ninja; stessi pannello, tavolette e colori di nus.css */
.conto-pannello { animation: conto-entra .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes conto-entra { from { transform: translateY(24px) scale(.94) rotate(-1deg); opacity: 0; } to { transform: none; opacity: 1; } }
.conto-corpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; min-height: 0; }
.conto-arte { position: relative; border: 4px solid var(--inchiostro); border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 0 var(--inchiostro), inset 0 0 0 3px var(--oro); background: #1b1430; aspect-ratio: 4 / 3; }
.conto-arte img { width: 100%; height: 100%; object-fit: cover; display: block; animation: conto-zoom 18s ease-in-out infinite alternate; }
@keyframes conto-zoom { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1%); } }
.conto-petali i { position: absolute; top: -8%; width: 12px; height: 9px; border-radius: 70% 10% 70% 10%; background: #ffc2dc;
  box-shadow: inset -2px -2px 0 #f58fbf; animation: conto-petalo 7s linear infinite; opacity: .9; }
.conto-petali i:nth-child(1) { left: 8%; animation-delay: -1s; }
.conto-petali i:nth-child(2) { left: 22%; animation-delay: -4s; animation-duration: 9s; }
.conto-petali i:nth-child(3) { left: 37%; animation-delay: -2.5s; }
.conto-petali i:nth-child(4) { left: 52%; animation-delay: -6s; animation-duration: 8s; }
.conto-petali i:nth-child(5) { left: 66%; animation-delay: -3s; }
.conto-petali i:nth-child(6) { left: 79%; animation-delay: -5.5s; animation-duration: 10s; }
.conto-petali i:nth-child(7) { left: 90%; animation-delay: -.5s; }
.conto-petali i:nth-child(8) { left: 45%; animation-delay: -7.5s; animation-duration: 11s; }
@keyframes conto-petalo { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-22px, 260px) rotate(200deg); }
  100% { transform: translate(14px, 560px) rotate(420deg); opacity: 0; } }
.conto-timbro { position: absolute; right: 6%; top: 7%; width: 30%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font: 900 clamp(22px, 3.4vw, 40px)/1 var(--cjk); color: #fff; background: radial-gradient(circle, #e8323c 55%, #a8141e 56% 62%, #e8323c 63%);
  border: 4px solid #fff; box-shadow: 0 0 0 4px var(--lacca-scura), 0 8px 20px rgba(0,0,0,.45); transform: scale(0) rotate(-30deg); opacity: 0; }
.conto-timbro.stampa { animation: conto-timbro 1.6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes conto-timbro { 0% { transform: scale(2.4) rotate(-40deg); opacity: 0; } 30% { transform: scale(.92) rotate(-12deg); opacity: 1; }
  45% { transform: scale(1.05) rotate(-12deg); } 100% { transform: scale(1) rotate(-12deg); opacity: 1; } }
.conto-lato { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.conto-lato [hidden] { display: none !important; }
.conto-intro { margin: 0; font: 500 14px/1.45 var(--testo); }
.conto-spunta { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; font: 600 13px/1.35 var(--testo); cursor: pointer;
  padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.6); border: 2px solid var(--inchiostro); }
.conto-spunta input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 3px solid var(--inchiostro);
  border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .12s; }
.conto-spunta input:checked { background: var(--lacca); transform: rotate(-6deg) scale(1.08); }
.conto-spunta input:checked::after { content: "✓"; color: #fff; font: 900 17px/1 var(--testo); }
.conto-spunta input:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.conto-spunta a, .conto-link { color: var(--lacca); font-weight: 800; }
.conto-lato .tavoletta:disabled { filter: grayscale(.7) brightness(.85); cursor: not-allowed; transform: none; }
.conto-google { width: 100%; background: linear-gradient(180deg, #fff, #ece4d2) !important; color: var(--inchiostro) !important;
  -webkit-text-stroke: 0 !important; text-shadow: none !important; }
.conto-google .g-logo { width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
.conto-oppure { display: flex; align-items: center; gap: 10px; font: 400 12px var(--asia); color: #8a6a4a; }
.conto-oppure::before, .conto-oppure::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #c8a878 0 6px, transparent 6px 10px); }
.conto-campi { display: grid; gap: 8px; }
.conto-campi input, .conto-nome input { min-width: 0; width: 100%; box-sizing: border-box; padding: 10px 12px; font: 600 15px var(--testo);
  color: var(--inchiostro); background: #fffaf0; border: 3px solid var(--inchiostro); border-radius: 10px; box-shadow: inset 0 3px 0 rgba(0,0,0,.08); }
.conto-campi input:focus, .conto-nome input:focus { outline: 3px solid var(--oro); outline-offset: 1px; }
.conto-riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.conto-riga .tavoletta { flex: 1 1 140px; min-height: 46px; }
.conto-link { background: none; border: 0; padding: 4px 0; font: 700 13px var(--testo); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; align-self: flex-start; }
.conto-link.pericolo { color: #8a1018; }
.conto-msg { margin: 0; min-height: 1.3em; font: 700 13px/1.35 var(--testo); }
.conto-msg.ok { color: #1f6a2a; }
.conto-msg.ko { color: #a8141e; }
.conto-tessera { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 14px;
  border: 3px solid var(--inchiostro); background: linear-gradient(135deg, #fff4d8, #ffe2a8); box-shadow: 0 4px 0 var(--inchiostro);
  animation: conto-tessera 3s ease-in-out infinite; }
@keyframes conto-tessera { 50% { transform: translateY(-2px) rotate(-.4deg); } }
.conto-tessera img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.conto-tessera small { display: block; font: 400 11px var(--asia); color: #8a6a4a; letter-spacing: 1px; }
.conto-tessera b { display: block; font: 400 26px/1.05 var(--font); letter-spacing: 1px; color: var(--lacca); -webkit-text-stroke: 1px var(--inchiostro);
  overflow-wrap: anywhere; }
.conto-tessera span { display: block; font: 600 12px var(--testo); color: #6b4a2f; overflow-wrap: anywhere; }
.conto-stato { margin: 0; font: 400 14px var(--asia); }
.conto-avviso { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 3px dashed var(--lacca); background: rgba(255,240,220,.85);
  font: 600 13px/1.35 var(--testo); }
.conto-nome { display: grid; gap: 6px; }
.conto-nome label { font: 400 15px var(--font); letter-spacing: 1px; color: var(--lacca); }
.conto-nome small { font: 500 12px var(--testo); color: #6b4a2f; }
.conto-nome .conto-riga input { flex: 1 1 160px; width: auto; }
@media (max-width: 760px), (max-height: 520px) {
  .conto-corpo { grid-template-columns: 1fr; }
  .conto-arte { aspect-ratio: 16 / 7; }
  .conto-arte img { object-position: 50% 62%; }
  .conto-timbro { width: 22%; top: 5%; }
}
/* (12-10) il nuovo SFONDO DEL MENU dell'utente ha i 4 ninja ai lati e la colonna centrale libera: il logo, sui monitor
   larghi, sta nella colonna della luna (prima copriva Sake ed Ebi in alto); col telefono in verticale l'inquadratura
   scivola verso Sake e Maki invece di mostrare solo la luna */
@media (min-aspect-ratio: 3/4) {
  .titolo .logo-img { width: min(600px, 46vw); max-height: 24vh; }
}
/* (12-10) utente: «su schermo orizzontale la scritta più in basso e più grande»: sugli schermi larghi i ninja stanno agli
   angoli e la colonna della luna è libera fino ai bottoni, quindi il logo scende sulla luna e cresce */
/* Misurato sul 16:9: volti di Sake ed Ebi fra il 18% e il 35% dell'altezza, ai lati di una colonna libera dal 31% al 71%
   della larghezza; Maki e Tobiko lasciano libero il centro dal 45% in giù. Logo dentro quella colonna (44vw), menu sotto
   e più in su (utente: «spostare un po' più su il menu, per avere tutto più centrato»): logo + menu sono UN blocco
   centrato in altezza, e i bottoni misurano in vh (in px su una finestra bassa il menu era alto metà schermo e
   saliva sotto il logo) */
@media (min-aspect-ratio: 3/2) and (min-height: 521px) {
  .titolo { justify-content: center; gap: 3.5vh; }
  /* (15-10) utente: «un pelo più su, un po' più grande, e la scritta giapponese sotto che si intravede come in verticale»:
     i kanji scendono sotto il logo e il logo si stacca dal menu quanto basta per lasciarli vedere */
  .titolo .titolo-logo { margin-top: -4vh; margin-bottom: 6vh; }
  .titolo .logo-img { width: min(1000px, 48vw); max-height: 28vh; }
  .titolo .kanji-sfondo { font-size: min(9.5vw, 17vh); top: 100%; transform: translate(-50%, -42%); letter-spacing: 0;
    color: rgba(192,38,45,.72); }
  .titolo .titolo-menu { margin-bottom: 0; gap: 1.3vh; }
  .titolo .titolo-menu .tavoletta { min-width: min(320px, 24vw); min-height: 0; height: 6.2vh; font-size: clamp(17px, 2.9vh, 26px); }
  .titolo .titolo-menu .tavoletta:first-child { height: 7.6vh; font-size: clamp(20px, 3.5vh, 30px); }
}
/* telefono in orizzontale (menu in fila, nus.css): il logo scende un po' sulla luna */
@media (min-aspect-ratio: 3/2) and (max-height: 520px) {
  /* (15-10) allineato a monitor e verticale: logo un pelo più su e più grande, kanji che spuntano sotto */
  .titolo .titolo-logo { margin-top: 4vh; }
  .titolo .logo-img { width: min(900px, 44vw); max-height: 31vh; }
  .titolo .kanji-sfondo { font-size: min(8vw, 17vh); top: 100%; transform: translate(-50%, -45%); letter-spacing: 0;
    color: rgba(192,38,45,.72); }
}
/* (12-10) utente: «per smartphone farei un'altra immagine 9:16, da usare solo in smartphone verticale». Nello sfondo
   verticale (`img/titolo-verticale.webp`, `strumenti/nus_crea_titolo_verticale.py`) i ninja stanno fra il 28% e il 75%
   dell'altezza: il logo va sulla luna in alto e i bottoni sul tetto in basso, GIOCA da solo e gli altri tre in fila */
@media (max-aspect-ratio: 3/4) and (min-aspect-ratio: 2/3) {
  .titolo-fondo { background-position: 24% center; }   /* tablet in verticale: lo sfondo largo, come prima */
}
/* solo il TELEFONO in verticale (≤ 2:3): su un tablet 3:4 lo sfondo 9:16 si taglia e i bottoni coprono Maki e Tobiko */
@media (max-aspect-ratio: 2/3) {
  .titolo-fondo { background-image: url("../img/titolo-verticale.webp"); background-position: center top; }
  .titolo .logo-img { width: min(520px, 88vw); max-height: 19vh; }
  /* (15-10) utente: «abbassa la scritta e metti le lettere giapponesi sotto come nelle altre». Il logo scende sulla luna
     e i kanji, che qui restavano nascosti dietro (più stretti del logo), crescono e spuntano SOTTO, fra il logo e i ninja */
  .titolo-logo { margin-top: 7vh; }
  .titolo .kanji-sfondo { font-size: min(19vw, 96px); top: 100%; transform: translate(-50%, -38%); letter-spacing: 0;
    color: rgba(192,38,45,.72); }   /* sulla luna chiara il rosso al 55% si sbiadiva */
  .titolo .titolo-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(440px, 100%);
    margin: 0 auto 5vh; }
  /* in verticale due righe: il sito sopra, la firma sotto (in una riga sola a 390 px non ci sta) */
  .titolo-firma { font-size: 11px; }
  .titolo-firma span { display: block; }
  .titolo-firma .sep { display: none; }
  .titolo .titolo-menu .tavoletta { min-width: 0; min-height: 44px; padding-left: 4px; padding-right: 4px; font-size: clamp(14px, 4vw, 19px); }
  .titolo .titolo-menu .tavoletta:first-child { grid-column: 1 / -1; min-height: 54px; font-size: clamp(22px, 6.5vw, 28px); }
  .titolo .premi-tasto { bottom: 7%; }
}
/* (13-10) le schede dei ninja riscritte («più anime ed epiche») sono più lunghe: sugli schermi bassi (telefono girato)
   un filo più piccole, così si scorre meno */
@media (max-height: 520px) {
  .ninja-dettaglio p { font-size: 12.5px; line-height: 1.3; }
  .super-lista li { font-size: 12px; }
}
/* (12-10) utente: «in basso nel menu: ninjauzisushi.com - Designed and created by thebiondosbrain 2026» */
.titolo-firma { position: absolute; left: 0; right: 0; bottom: max(4px, env(safe-area-inset-bottom)); z-index: 1; padding: 0 12px;
  text-align: center; font: 400 clamp(11px, 1.6vh, 14px)/1.2 var(--testo); letter-spacing: .5px; color: rgba(255, 248, 230, .82);
  text-shadow: 0 1px 2px #120a1e, 0 0 6px #120a1e; pointer-events: none; }

/* protezione immagini (deterrente, insieme a quella di avvio.js): niente menu «salva immagine» alla pressione lunga
   su iPhone/Android, niente trascinamento né selezione su immagini e tele, in tutto il gioco */
img, canvas { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .conto-pannello, .conto-arte img, .conto-petali i, .conto-tessera { animation: none !important; }
  .conto-petali { display: none; }
}