/* Quaderno dei kanji — minigiochi */
  /* ===== Gioco ===== */
  .game-overlay{
    position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(40,30,26,.55);
    display:flex;align-items:flex-start;justify-content:center;padding:26px 14px;overflow:auto;
  }
  /* Il pannello scorre da sé (non lo sfondo), così testata e × possono restare
     agganciate in alto. Due regole d'oro per lo sticky, imparate a spese mie:
     l'ancoraggio guarda il MARGINE, non il bordo, e l'elemento non può uscire
     dal riquadro del genitore. Perciò: niente margini verticali negativi, e il
     padding alto del pannello è 0 — quello spazio lo mette la testata stessa,
     che così può incollarsi al bordo vero senza lasciare fessure. */
  .game-panel{
    --pp:30px;    /* padding laterale */
    --pht:26px;   /* respiro sopra il titolo, dentro la testata */
    position:relative;width:100%;max-width:720px;background:var(--paper);
    border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3);
    padding:0 var(--pp) 34px;
    max-height:calc(100dvh - 52px);overflow:auto;overscroll-behavior:contain;
  }
  /* ===== 仮名 la tavola dei kana =====
     Tavola a sinistra, segno aperto sempre nella stessa colonna a destra: la
     tavola non si muove mai e il dettaglio non va cercato. I riquadri sono
     piccoli — servono a colpo d'occhio, non a leggerci dentro. */
  .kana-panel{max-width:860px;padding:0 0 18px}
  .kn-top{display:flex;align-items:center;gap:12px;padding:16px 18px 10px}
  .kn-jp{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
    background:color-mix(in srgb,var(--shu) 10%,#fff);color:var(--shu);
    font-family:var(--mincho);font-size:19px}
  .kn-t b{display:block;font-family:var(--sans);font-size:16px}
  .kn-t i{font-style:normal;font-size:12px;color:var(--ink-soft)}
  .kn-bar{display:flex;align-items:center;gap:8px;padding:0 18px 12px;flex-wrap:wrap}
  .seg-kn{display:inline-flex;gap:4px;padding:4px;background:#EDEBE4;border-radius:12px}
  .seg-kn button{padding:7px 14px;border:none;border-radius:9px;background:transparent;
    font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer}
  .seg-kn button.on{background:#fff;color:var(--shu);box-shadow:0 1px 3px rgba(20,20,18,.12)}
  .kn-prova{margin-left:auto;padding:9px 15px;border:none;border-radius:99px;
    background:var(--shu);color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer}
  .kn-prova:hover{background:var(--shu-deep,#9E2B21)}
  .kn-due{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:0;
    border-top:1px solid rgba(20,20,18,.07)}
  /* riquadri piccoli e a misura fissa: una tavola del 五十音 si guarda tutta
     insieme, non si legge riga per riga. Restano 64 px anche se il pannello è
     largo — allargandoli si otterrebbero cinque francobolli giganti. */
  .kn-grid{display:grid;grid-template-columns:repeat(5,64px);gap:5px;padding:14px 16px;
    align-content:start;justify-content:center}
  .kn-c{aspect-ratio:1;display:grid;place-items:center;background:#fff;cursor:pointer;
    border:1px solid var(--line);border-radius:9px;position:relative;padding:0;transition:.11s}
  .kn-c b{display:block;font-family:var(--mincho);font-size:23px;line-height:1;color:var(--ink)}
  .kn-c i{display:block;font-style:normal;font-size:9.5px;color:#A5A199;margin-top:3px}
  .kn-c:hover{border-color:var(--shu)}
  .kn-c.sel{border-color:var(--shu);box-shadow:0 0 0 3px color-mix(in srgb,var(--shu) 13%,#fff)}
  .kn-c.fatto{background:color-mix(in srgb,var(--jl-n3,#58995F) 10%,#fff)}
  .kn-c.fatto::after{content:"";position:absolute;top:4px;right:5px;width:4px;height:4px;
    border-radius:50%;background:var(--jl-n3,#58995F)}
  .kn-c.vuota{background:transparent;border-color:transparent;cursor:default}
  /* la colonna del segno */
  .kn-lato{border-left:1px solid rgba(20,20,18,.07);padding:14px 16px;background:#fff}
  .kn-big{height:132px;display:grid;place-items:center;position:relative;background:var(--paper);
    border:1px solid var(--line);border-radius:14px;
    font-family:var(--mincho);font-size:76px;line-height:1;color:var(--ink)}
  .kn-big::before,.kn-big::after{content:"";position:absolute;background:var(--grid)}
  .kn-big::before{left:8px;right:8px;top:50%;height:1px}
  .kn-big::after{top:8px;bottom:8px;left:50%;width:1px}
  .kn-h{display:flex;align-items:baseline;gap:10px;margin-top:11px}
  .kn-ro{font-family:var(--sans);font-size:21px;font-weight:800}
  .kn-gem{font-family:var(--mincho);font-size:19px;color:var(--ai)}
  .kn-riga{font-size:12px;color:var(--ink-soft);margin-bottom:10px}
  .kn-tratti{display:flex;gap:5px;flex-wrap:wrap}
  .kn-tratti .skcell{width:48px;height:48px;flex:none}
  .kn-attesa{font-size:12px;color:var(--ink-soft)}
  .kn-az{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
  .kn-az button{padding:9px 13px;border:1px solid var(--line);border-radius:99px;background:#fff;
    font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .kn-az button.pri{background:var(--ink);border-color:var(--ink);color:#fff}
  .kn-tela{margin-top:12px}
  .kn-tela canvas{width:100%;max-width:260px;aspect-ratio:1;background:#fff;
    border:1px solid var(--line);border-radius:12px;touch-action:none;display:block}
  .kn-tela-az{display:flex;gap:7px;margin-top:8px}
  .kn-tela-az button{padding:7px 12px;border:1px solid var(--line);border-radius:99px;
    background:#fff;font-family:var(--sans);font-size:12px;color:var(--ink-soft);cursor:pointer}
  /* la prova */
  .kn-quiz{max-width:380px;margin:0 auto;padding:20px 18px 24px;text-align:center}
  .kn-q-n{font-size:11.5px;color:var(--ink-soft);letter-spacing:.05em}
  .kn-q-k{font-family:var(--mincho);font-size:88px;line-height:1.15;margin:4px 0 16px}
  .kn-q-op{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .kn-q-op button{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff;
    font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
  .kn-q-op button:hover{border-color:var(--shu);color:var(--shu)}
  .kn-q-op button.ok{background:color-mix(in srgb,var(--jl-n3,#58995F) 12%,#fff);
    border-color:var(--jl-n3,#58995F);color:var(--jl-n3,#58995F)}
  .kn-q-op button.no{background:#FBF0EE;border-color:var(--shu);color:var(--shu)}
  .kn-q-bar{height:6px;border-radius:99px;background:#EDEBE4;margin:16px 0 6px;overflow:hidden}
  .kn-q-bar i{display:block;height:100%;background:var(--shu);border-radius:99px;transition:width .2s}
  .kn-q-p{font-size:11.5px;color:var(--ink-soft)}
  .kn-q-esci{margin-top:14px;padding:8px 16px;border:1px solid var(--line);border-radius:99px;
    background:#fff;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);cursor:pointer}
  .kn-fine{padding:34px 18px;text-align:center}
  .kn-fine-n{font-family:var(--sans);font-size:38px;font-weight:800;color:var(--shu)}
  .kn-fine-t{font-size:13.5px;color:var(--ink-soft);margin:6px 0 16px}
  .kn-fine-t b{font-family:var(--mincho);font-size:17px;color:var(--ink)}
  /* sul telefono la colonna scende sotto la tavola */
  @media (max-width:640px){
    .kn-due{grid-template-columns:1fr}
    .kn-lato{border-left:none;border-top:1px solid rgba(20,20,18,.07)}
    .kn-big{height:150px;font-size:88px}
    .kn-grid{padding:12px}
  }

  /* i pannelli senza testata (la partita in corso, per esempio) si rimettono
     da soli il respiro che altrimenti avrebbe dato lei */
  .game-panel > div{padding-top:var(--pht)}
  .game-panel > div:has(> .g-title:first-child),
  .game-panel > div:has(> .g-titlerow:first-child),
  .game-panel > div:has(> .wr-top:first-child){padding-top:0}
  /* La × sta in alto a destra e ci resta scorrendo. Niente float (i contenitori
     flex lo ignorano e la manderebbero a sinistra) e niente absolute (non si
     aggancia): è un blocco spinto a destra da margin-left:auto che non occupa
     spazio verticale (14 + 34 − 48 = 0). */
  .game-close{
    position:sticky;top:14px;z-index:40;   /* = al margine sopra: non si muove mai */
    display:block;width:34px;height:34px;
    margin:14px calc(16px - var(--pp)) -48px auto;
    border:none;border-radius:50%;
    background:#EDE7E3;color:var(--ink-soft);font-size:22px;cursor:pointer;line-height:1;
  }
  /* Testata di ogni pannello scorrevole: agganciata in alto e larga quanto il
     popup. Vale sia per il titolo semplice sia per la riga titolo + pulsante. */
  .game-panel > div > .g-title:first-child,
  .game-panel > .g-title:first-child,
  .g-titlerow,.wr-top{
    position:sticky;top:0;z-index:30;background:var(--paper);
    margin:0 calc(0px - var(--pp)) 12px;
    padding:var(--pht) 56px 12px var(--pp);
    border-radius:18px 18px 0 0;
    box-shadow:0 12px 10px -12px rgba(0,0,0,.18);
  }
  .game-close:hover{background:var(--shu);color:#fff}
  .g-title{font-family:var(--title);font-weight:900;font-size:25px;color:var(--ink);letter-spacing:-.01em}
  .g-title .jp{color:var(--shu);font-weight:900}
  .g-sub{color:var(--ink-soft);font-size:14px;margin:4px 0 4px}
  .g-section-h{
    font-family:var(--title);font-weight:900;font-size:14px;color:var(--shu);margin:24px 0 12px;
    display:flex;align-items:center;gap:10px;letter-spacing:.01em;
  }
  .g-picklist{display:flex;flex-wrap:wrap;gap:10px}
  .g-chip{
    display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;
    border:1.5px solid var(--line);background:#fff;cursor:pointer;user-select:none;transition:.12s;min-width:56px;
  }
  .g-chip .k{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);line-height:1.1}
  .g-chip .n{font-size:10.5px;color:var(--ink-soft)}
  .g-chip.on{border-color:var(--shu);background:#FBF1EF}
  .g-selall{background:none;border:none;color:var(--ai);font-size:12.5px;cursor:pointer;text-decoration:underline;font-family:var(--sans)}
  .g-filters{display:flex;flex-direction:column;gap:14px}
  /* ogni filtro è un blocchetto: intestazione sopra, scelte sotto */
  .g-filter-blk{display:flex;flex-direction:column;gap:7px}
  .g-filter-lab{font-size:10.5px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;
    display:flex;align-items:center;gap:10px}
  /* la fila non deve schiacciare il pulsantino quando il nome è lungo */
  .g-filter-lab .qk-tutti{margin-left:6px}
  .g-filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  /* il pulsante delle label sta stretto quanto basta, non a tutta riga */
  .g-filter-chips .pk-btn{flex:0 0 auto;max-width:220px}
  /* le label scelte, elencate sotto: un tocco e vanno via */
  .g-filter-sel{display:flex;gap:6px;flex-wrap:wrap;min-height:22px;align-items:center}
  .g-filter-none{font-size:11.5px;color:var(--ink-soft)}
  .g-sel-chip{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--lc,var(--ai));border-radius:999px;cursor:pointer;
    background:color-mix(in srgb, var(--lc,var(--ai)) 14%, #fff);
    color:var(--ink);font-family:var(--sans);font-size:11.5px;line-height:1;padding:5px 9px;
  }
  .g-sel-chip i{font-style:normal;font-size:13px;color:var(--ink-soft);line-height:1}
  .g-sel-chip:hover{border-color:var(--shu)}
  .g-sel-chip:hover i{color:var(--shu)}
  .g-filter{
    display:inline-flex;align-items:center;padding:6px 13px;border-radius:99px;
    border:1.5px solid var(--line);background:#fff;cursor:pointer;
    font-family:var(--sans);font-size:13px;color:var(--ink);transition:.12s;
  }
  .g-filter:hover{border-color:var(--ai)}
  .g-filter.on{border-color:var(--ai);background:#F0F4F8;font-weight:700}
  /* sottocategoria: un gradino sotto la sua principale */
  .g-filter-sub{font-size:12px;padding-left:9px}
  .g-filter-sub::before{content:"·";margin-right:5px;color:var(--ink-soft)}
  .g-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  /* le modalità sono dispari: l'ultima si prende tutta la riga */
  .g-modes .g-mode:last-child:nth-child(odd){grid-column:1/-1}
  .g-mode{text-align:left;padding:16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:.12s}
  .g-mode:hover{border-color:var(--ai)}
  .g-mode.on{border-color:var(--ai);background:#F0F4F8}
  .g-mode .mt{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:5px}
  .g-mode .md{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
  .g-start{
    margin-top:26px;width:100%;padding:14px;border:none;border-radius:12px;
    background:var(--shu);color:#fff;font-family:var(--serif);font-weight:700;font-size:16px;cursor:pointer;
  }
  .g-start:disabled{background:#D8CFC9;cursor:not-allowed}
  .g-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center}
  .g-hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;color:var(--ink-soft)}
  .g-score b{color:var(--shu);font-size:15px}
  .g-progress{height:6px;background:#EDE7E3;border-radius:99px;overflow:hidden;margin-bottom:24px}
  .g-progress i{display:block;height:100%;background:var(--shu);transition:width .3s}
  .g-prompt{text-align:center;padding:30px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);margin-bottom:22px}
  /* la parola della domanda: tutti i caratteri della stessa misura, così i
     piccoli っ ゃ ゅ ょ restano leggibili; il kanji della scheda si vede dal colore */
  .g-word{line-height:1.35}
  .g-jp{font-family:var(--serif);font-size:52px;font-weight:700;color:var(--ink)}
  .g-jp .k{color:var(--shu)}
  .g-jp rt{font-size:.3em;color:var(--ai);font-weight:600;line-height:1.2}
  .g-ask{font-size:14px;color:var(--ink-soft);margin-top:16px}
  /* furigana sì/no durante la partita */
  .g-furib{
    margin-top:12px;padding:6px 14px;border-radius:99px;border:1.5px solid var(--line);
    background:#fff;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);cursor:pointer;
  }
  .g-furib:hover{border-color:var(--ai);color:var(--ai)}
  .g-furib.on{border-color:var(--ai);color:var(--ai);background:#F0F4F8}
  /* come si risponde e che cosa ripassare: due blocchetti affiancati, ognuno
     con la sua intestazione sopra (sul telefono uno sotto l'altro) */
  .g-ansgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 4px}
  .g-ansrow{display:flex;flex-direction:column;gap:7px;min-width:0}
  .g-anschips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .g-anslab{font-size:10.5px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase}
  .g-ans{
    display:inline-flex;align-items:center;padding:6px 13px;border-radius:99px;
    border:1.5px solid var(--line);background:#fff;cursor:pointer;
    font-family:var(--sans);font-size:13px;color:var(--ink-soft);transition:.12s;
  }
  .g-ans:hover:not(:disabled){border-color:var(--ai);color:var(--ink)}
  /* L'anello della selezione è UNO SOLO: il bordo.
     Prima c'era il bordo da 1.5px PIÙ un box-shadow interno da 1px: due
     cerchi quasi sovrapposti che, con lo zoom del browser, cadono su frazioni
     di pixel diverse — e così due pastiglie accese, con le stesse identiche
     regole, si vedevano una più spessa dell'altra. Un anello solo si disegna
     uguale dappertutto. Il bordo è largo uguale acceso e spento: la pastiglia
     non balla di mezzo pixel quando la scegli. */
  .g-ans.on{border-color:var(--ai);background:#F0F4F8;color:var(--ink);font-weight:700}
  .g-ans:disabled{opacity:.4;cursor:not-allowed}
  .g-ansnote{font-size:11.5px;color:var(--ink-soft)}
  .g-ansn{margin-left:6px;background:var(--shu);color:#fff;border-radius:99px;
    font-size:10.5px;padding:1px 6px;vertical-align:1px}
  /* quando la parola tornerà in gioco */
  .g-next-due{display:block;margin-top:4px;font-size:11.5px;opacity:.75}
  .g-srs-row{grid-template-columns:auto auto 1fr}
  .g-srs-n{font-size:12px;color:var(--ink-soft)}
  .g-srs-n b{color:var(--shu)}
  @media (max-width:560px){ .g-jp{font-size:40px} }
  /* risposta scritta a tastiera */
  .g-answer{display:flex;gap:10px}
  .g-answer input{
    flex:1;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
    font-size:18px;font-family:var(--serif);color:var(--ink);background:#fff;min-width:0;
  }
  .g-answer input:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 1px var(--ai) inset}
  .g-answer input:disabled{background:#F4F1EE;color:var(--ink-soft)}
  .g-submit{
    padding:14px 22px;border:none;border-radius:12px;background:var(--ai);color:#fff;
    font-family:var(--serif);font-weight:700;font-size:15px;cursor:pointer;
  }
  .g-submit:disabled{background:#D8CFC9;cursor:default}
  .g-feedback{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:15px;text-align:center}
  .g-feedback.ok{background:#E9F7EF;color:#0d7a3d;border:1.5px solid #12A150}
  .g-feedback.ko{background:#FBECEA;color:var(--shu);border:1.5px solid var(--shu)}
  /* scelta multipla */
  .g-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .g-opt{
    padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
    font-family:var(--sans);font-size:14.5px;color:var(--ink);cursor:pointer;
    text-align:left;line-height:1.4;transition:.12s;
  }
  .g-opt:hover:not(:disabled){border-color:var(--ai)}
  .g-opt:disabled{cursor:default;opacity:.7}
  .g-opt.right{border-color:#12A150;background:#E9F7EF;color:#0d7a3d;font-weight:700;opacity:1}
  .g-opt.wrong{border-color:var(--shu);background:#FBECEA;color:var(--shu);opacity:1}
  /* spunte del filtro stampe */
  .g-chkrow{display:flex;align-items:baseline;gap:9px;margin:10px 0;font-size:14.5px;color:var(--ink)}
  .g-chknote{color:var(--ink-soft);font-size:12.5px}
  /* quante parole studiare */
  .g-count{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .g-count input{
    width:92px;padding:10px;border:1.5px solid var(--line);border-radius:10px;
    font-family:var(--serif);font-weight:700;font-size:16px;text-align:center;
    color:var(--ink);background:#fff;
  }
  .g-count input:focus{outline:none;border-color:var(--ai)}
  .g-count-note{flex:1;min-width:220px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  .g-count-note b{color:var(--shu)}
  /* elenco degli errori a fine partita */
  .g-errors{margin-top:26px;text-align:left}
  .g-err-row{
    display:grid;grid-template-columns:auto auto 1fr;gap:2px 14px;align-items:baseline;
    padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px;
  }
  .g-err-w{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink)}
  .g-err-r{font-family:var(--serif);font-size:14px;color:var(--ai)}
  .g-err-m{font-size:13.5px;color:var(--ink)}
  .g-err-t{grid-column:1/-1;font-size:12.5px;color:var(--shu)}


/* ================= Duello di magie ================= */
/* Il pannello sta SEMPRE dentro lo schermo: l'arena si allarga e si stringe da
   sé, senza tagliare la casella in fondo (era il problema su schermi bassi). */
/* l'id vince su .auth-panel (che stringe a 420px): il duello ha bisogno di respiro */
#duello .duello-panel{max-width:720px;width:100%;display:flex;flex-direction:column;max-height:min(94vh,900px)}
#duello #duello-body{display:flex;flex-direction:column;min-height:0;flex:1}
/* su schermo grande l'arena occupa una bella altezza: il campo delle magie
   deve vedersi, non essere una striscia */
@media (min-width:701px){
  #duello .duello-panel:has(.duel-arena){height:min(88vh,820px)}
  .duel-arena{min-height:420px}
}

/* --- copertina del menu --- */
.duel-hero{text-align:center;padding:6px 0 2px}
.duel-hero-jp{font-family:var(--title);font-size:34px;font-weight:800;color:var(--shu);line-height:1.1;
  text-shadow:0 2px 0 rgba(192,57,43,.12)}
.duel-hero-t{font-family:var(--title);font-size:21px;font-weight:800;color:var(--ink);margin-top:2px}
.duel-hero-s{font-size:13px;color:var(--ink-soft);line-height:1.55;max-width:430px;margin:8px auto 0}
.duel-menu-modes{display:flex;flex-direction:column;gap:10px;margin:16px 0 8px}
.g-start.ghosty{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
.g-start.ghosty:disabled{opacity:.6;cursor:default}
.g-start.duel-vs{background:linear-gradient(135deg,#7D3C98,#C0392B)}
.duel-joinrow{display:flex;gap:8px}
.duel-joinrow input{flex:1;min-width:0;box-sizing:border-box;height:42px;padding:0 13px;border:1.5px solid var(--line);
  border-radius:11px;font-family:var(--sans);font-size:14px;color:var(--ink);background:#fff;letter-spacing:1px}
.duel-joinrow input:focus{outline:none;border-color:var(--ai)}
.duel-joinrow .btn{height:42px;padding:0 16px;white-space:nowrap}

/* --- sala d'attesa --- */
.duel-lobby{text-align:center;padding:4px 0}
.duel-lobby-sub{font-size:13px;color:var(--ink-soft);line-height:1.55;max-width:400px;margin:10px auto 16px}
.duel-codebox{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);margin-bottom:14px}
.duel-codebox span{font-size:12px;color:var(--ink-soft);letter-spacing:.4px}
.duel-codebox b{font-family:var(--title);font-size:26px;letter-spacing:3px;color:var(--shu)}
.duel-linklab{display:block;max-width:380px;margin:0 auto;font-size:12px;color:var(--ink-soft);text-align:left}
.duel-codelab{max-width:380px;margin:14px auto 6px;font-size:12px;color:var(--ink-soft);text-align:left}
/* --- conto alla rovescia del via (uguale per i due giocatori) --- */
.duel-count{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.82),rgba(255,255,255,.55) 55%,transparent 78%)}
.duel-count.on,.duel-count.go{display:flex}
.duel-count-n{font-family:var(--title);font-weight:800;font-size:clamp(52px,16vw,84px);line-height:1;
  color:var(--shu);text-shadow:0 4px 18px rgba(192,57,43,.28);animation:duelCountPop .95s ease-out}
.duel-count-lab{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);letter-spacing:.3px}
.duel-count-go{font-family:var(--title);font-weight:800;font-size:clamp(40px,12vw,62px);color:#27AE60;
  letter-spacing:2px;animation:duelGoPop .6s ease-out}
@keyframes duelCountPop{0%{opacity:0;transform:scale(1.7)}25%{opacity:1;transform:scale(1)}
  100%{opacity:.85;transform:scale(.96)}}
@keyframes duelGoPop{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.5)}}
.duel-ask-wait{color:var(--shu);font-weight:700}
.duel-linkin{display:block;width:100%;box-sizing:border-box;margin-top:5px;height:38px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-soft);background:var(--paper)}
.duel-lobby-acts{display:flex;gap:8px;justify-content:center;margin:12px 0 18px;flex-wrap:wrap}
.duel-waiting{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.duel-dots{display:inline-flex;gap:4px}
.duel-dots i{width:6px;height:6px;border-radius:50%;background:var(--shu);opacity:.35;animation:duelDot 1.1s infinite}
.duel-dots i:nth-child(2){animation-delay:.15s}
.duel-dots i:nth-child(3){animation-delay:.3s}
@keyframes duelDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* --- arena --- */
.duel-arena{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.duel-side{flex:none;display:flex;flex-direction:column;gap:8px}
.duel-fighter{display:flex;align-items:center;gap:12px}
.duel-avatar{position:relative;width:48px;height:48px;flex:none;display:grid;place-items:center;font-size:27px;
  border-radius:15px;background:var(--paper);border:1px solid var(--line);transition:transform .12s}
.duel-avatar span{position:relative;z-index:1;line-height:1}
.duel-av-enemy{background:linear-gradient(160deg,#33292a,#241e20);border-color:#3d3134}
.duel-av-me{background:linear-gradient(160deg,#eaf2fb,#dbe9f8);border-color:#c5dcf2}
.duel-avatar.cast::after{content:"";position:absolute;inset:-6px;border-radius:19px;
  background:radial-gradient(circle,rgba(255,214,120,.85),transparent 70%);animation:duelCastFx .5s ease-out}
@keyframes duelCastFx{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
.duel-avatar.hurt{animation:duelHurt .4s}
@keyframes duelHurt{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-3deg)}
  50%{transform:translateX(5px) rotate(3deg)}80%{transform:translateX(-3px)}}
.duel-meta{flex:1;min-width:0}
.duel-name{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);margin-bottom:5px}
.duel-livechip{display:inline-block;padding:1px 7px;border-radius:999px;background:rgba(39,174,96,.15);
  color:#1e8449;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.duel-hpwrap{display:flex;align-items:center;gap:8px}
.duel-hpbar{flex:1;height:15px;border-radius:8px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.duel-hpbar i{display:block;height:100%;width:100%;border-radius:7px;
  background:linear-gradient(90deg,#27AE60,#2ec77a);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.duel-hpbar-me i{background:linear-gradient(90deg,#2E86C1,#4aa3e0)}
.duel-hpbar i.mid{background:linear-gradient(90deg,#D68910,#eaa93a)}
.duel-hpbar i.low{background:linear-gradient(90deg,#C0392B,#e05a4a);animation:duelLow 1s infinite}
@keyframes duelLow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.duel-hpbar.hit{animation:duelShake .28s}
@keyframes duelShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.duel-hpnum{flex:none;min-width:26px;text-align:right;font-family:var(--title);font-size:13px;font-weight:700;color:var(--ink-soft)}

/* riquadro del nemico */
.duel-enemyword{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.duel-enemyword.flash{animation:duelBoxFlash .6s}
@keyframes duelBoxFlash{0%{background:rgba(192,57,43,.22)}100%{background:var(--paper)}}
.duel-ew-label{font-size:11px;color:var(--ink-soft);letter-spacing:.3px}
.duel-ew-jp{font-family:var(--title);font-size:20px;color:var(--ink);margin:2px 0 6px;min-height:24px}
.duel-ew-w{color:var(--shu);font-weight:700}
.duel-ew-m{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);margin-left:8px}
.duel-charge{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.duel-charge i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C0392B,#e07a5f);transition:width .06s linear}

/* --- il campo dove volano le magie --- */
.duel-field{position:relative;flex:1;min-height:90px;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 50%,rgba(125,60,152,.07),transparent 70%),
    linear-gradient(180deg,rgba(192,57,43,.05),rgba(46,134,193,.05));
  border:1px solid var(--line)}
.duel-runes{position:absolute;left:50%;top:50%;width:130px;height:130px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(125,60,152,.25);opacity:.7;animation:duelSpin 26s linear infinite}
.duel-runes::before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(192,57,43,.18)}
.duel-runes::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 62%)}
@keyframes duelSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.duel-field::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* proiettili */
.duel-shot{position:absolute;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;will-change:top;z-index:2}
.duel-orb{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#ffd36a 35%,#e07a1f 65%,#c0392b 100%);
  box-shadow:0 0 14px 4px rgba(224,122,31,.55);animation:duelPulse .5s ease-in-out infinite alternate}
.duel-orb.big{transform:scale(1.28)}
.duel-orb.small{transform:scale(.78)}
@keyframes duelPulse{to{filter:brightness(1.25)}}
.duel-trail{position:absolute;left:50%;width:10px;height:44px;transform:translateX(-50%);border-radius:50%;filter:blur(5px);opacity:.5}
.duel-shot-me .duel-trail{bottom:-30px;background:linear-gradient(to top,transparent,#e07a1f)}
.duel-shot-enemy .duel-orb{background:radial-gradient(circle at 35% 35%,#fff,#d9a3f5 35%,#8e44ad 65%,#5b2c6f 100%);
  box-shadow:0 0 14px 4px rgba(142,68,173,.55)}
.duel-shot-enemy .duel-trail{top:-30px;background:linear-gradient(to bottom,transparent,#8e44ad)}
/* quando una magia perde forza in uno scontro: un guizzo e si rimpicciolisce */
.duel-orb{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.duel-shot.shrunk .duel-orb{animation:duelShrink .35s ease-out}
@keyframes duelShrink{0%{filter:brightness(1.9)}100%{filter:brightness(1)}}

/* --- i caratteri della parola che girano attorno alla palla --- */
.duel-ring{position:absolute;left:50%;top:50%;width:0;height:0;animation:duelRingSpin 3.2s linear infinite}
.duel-ring b{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateY(-27px)}
/* la proprietà `rotate` si compone col transform: così il carattere resta
   dritto mentre orbita, invece di capovolgersi */
.duel-ring b i{display:block;font-family:var(--title);font-style:normal;font-weight:700;font-size:13px;
  line-height:1;color:var(--ink);text-shadow:0 0 6px #fff,0 0 10px #fff;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  animation:duelRingBack 3.2s linear infinite}
.duel-shot-enemy .duel-ring b i{color:#5b2c6f}
@keyframes duelRingSpin{to{rotate:360deg}}
@keyframes duelRingBack{to{rotate:-360deg}}
.duel-orb.small ~ .duel-ring b{transform:rotate(var(--a)) translateY(-22px)}
.duel-orb.big ~ .duel-ring b{transform:rotate(var(--a)) translateY(-31px)}

/* scontro a metà campo */
.duel-flash{position:absolute;left:50%;top:50%;width:90px;height:90px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,214,120,.8) 35%,rgba(192,57,43,.45) 60%,transparent 72%);
  opacity:0;pointer-events:none;z-index:3}
.duel-flash.on{animation:duelBoom .5s ease-out}
@keyframes duelBoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
/* botto sull'obiettivo */
.duel-burst{position:absolute;left:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,170,80,.6) 40%,transparent 70%);
  pointer-events:none;z-index:3;animation:duelBurst .55s ease-out}
.duel-burst-enemy{top:0}
.duel-burst-me{top:100%}
@keyframes duelBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
/* numero del danno */
.duel-dmg{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--title);font-weight:800;font-size:24px;
  color:#C0392B;text-shadow:0 2px 6px rgba(255,255,255,.9);pointer-events:none;z-index:4;animation:duelDmg .9s ease-out forwards}
.duel-dmg-enemy{top:6%}
.duel-dmg-me{top:78%;color:#8e44ad}
@keyframes duelDmg{0%{opacity:0;transform:translateX(-50%) scale(.6)}20%{opacity:1;transform:translateX(-50%) scale(1.15)}
  100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(1)}}

/* --- la mia parola e la risposta --- */
.duel-prompt{text-align:center;flex:none}
/* la parola si rimpicciolisce da sé quando è lunga: niente più a-capo che
   sfondano il riquadro (にゅうがくしき e simili) */
.duel-myword{font-family:var(--title);font-size:clamp(24px,7vw,34px);line-height:1.25;color:var(--ink);
  min-height:38px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.duel-myword.long{font-size:clamp(20px,5.4vw,27px)}
.duel-myword.xlong{font-size:clamp(16px,4.2vw,22px)}
/* la parola del quiz arriva con la sua misura fissa (.g-jp 52px): nel duello
   deve invece seguire quella del riquadro, che si adatta allo schermo */
.duel-myword .g-jp,.duel-study-w .g-jp{font-size:inherit;font-family:var(--title)}
.duel-myword ruby rt,.duel-study-w ruby rt{font-size:.45em}
.duel-myword.pop{animation:duelPop .32s ease-out}
@keyframes duelPop{0%{opacity:0;transform:translateY(6px) scale(.94)}100%{opacity:1;transform:none}}
.duel-myword .k{color:var(--shu)}
/* quanto fa male, quanto costa passarla, quanto la sai */
.duel-wordinfo{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 2px;
  font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.duel-wi-dmg{color:var(--shu);font-weight:700}
.duel-wi-sec{color:#7D3C98;font-weight:700}
.duel-pips{display:inline-flex;gap:3px;align-items:center}
.duel-pips i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.duel-pips i.on{background:#27AE60}
.duel-ask{font-size:12px;color:var(--ink-soft);margin:2px 0 8px}
.duel-inrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.duel-inrow input{flex:1;min-width:150px;max-width:320px;box-sizing:border-box;height:46px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:12px;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff}
.duel-inrow input:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 3px rgba(46,134,193,.12)}
.duel-inrow input.bad{border-color:var(--shu);animation:duelShake .28s}
.duel-castbtn{height:46px;padding:0 18px;white-space:nowrap;
  background:linear-gradient(135deg,#C0392B,#e0603f);border:none}
.duel-skipbtn{height:46px;padding:0 14px;white-space:nowrap;font-size:13px}

/* --- «non la so»: magie bloccate, intanto la studi --- */
.duel-study{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:12px 14px}
.duel-study-t{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;color:var(--ink-soft);letter-spacing:.3px;margin-bottom:6px}
.duel-study-t svg{width:15px;height:15px}
.duel-study-w{font-family:var(--title);font-size:clamp(22px,6vw,30px);color:var(--ink);line-height:1.3}
.duel-study-w .k{color:var(--shu)}
.duel-study-w ruby rt{font-size:.5em}
.duel-study-m{font-family:var(--sans);font-size:15px;color:var(--shu);font-weight:700;margin-top:4px}
.duel-study-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin:10px 0 6px}
.duel-study-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7D3C98,#C0392B);transition:width .1s linear}
.duel-study-note{font-size:11.5px;color:var(--ink-soft)}
.duel-study-note b{color:var(--ink)}

/* --- ingresso ospite (pagina pubblica) --- */
.duel-guest{text-align:center;padding:6px 0}
.duel-guest-form{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:16px}
.duel-guest-form input{width:100%;max-width:320px;box-sizing:border-box;height:44px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:11px;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff}
.duel-guest-form input:focus{outline:none;border-color:var(--ai)}
.duel-guest-form .g-start{width:100%;max-width:320px}
.duel-guest-err{min-height:18px;margin-top:8px;font-size:12.5px;color:var(--shu)}
.duel-guest-note{font-size:11.5px;color:var(--ink-soft);margin-top:6px}

/* --- risultato + ripasso --- */
.duel-result{text-align:center;padding:20px 6px;max-height:82vh;overflow:auto}
.duel-res-emoji{font-size:56px;margin-bottom:6px;animation:duelPop .45s ease-out}
.duel-result.win .g-title{color:#27AE60}
.duel-result.lose .g-title{color:var(--shu)}
.duel-res-acts{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.duel-review{margin:16px auto 0;max-width:460px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.duel-rev-h{display:flex;align-items:center;gap:8px;padding:10px 12px;font-family:var(--sans);font-size:13px;
  color:var(--ink);background:#fff;border-bottom:1px solid var(--line)}
.duel-rev-h svg{width:16px;height:16px}
.duel-rev-h b{color:var(--shu)}
.duel-addall{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:8px;padding:5px 9px;font-size:12px;cursor:pointer}
.duel-addall svg{width:13px;height:13px}
.duel-addall:hover{border-color:var(--ai);color:var(--ai)}
.duel-rev-list{max-height:220px;overflow:auto}
.duel-revrow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font-family:var(--sans)}
.duel-revrow:first-child{border-top:none}
.duel-wl-jp{font-family:var(--title);font-size:16px;color:var(--ink)}
.duel-wl-r{font-size:12px;color:var(--ink-soft)}
.duel-wl-m{font-size:13px;color:var(--ink);flex:1;min-width:60px}
.duel-add{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--shu);
  background:#fff;color:var(--shu);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer}
.duel-add svg{width:13px;height:13px}
.duel-add:hover{background:var(--shu);color:#fff}
.duel-add.done{border-color:#27AE60;color:#27AE60;background:#fff;cursor:default}

/* --- adattamenti: telefono e schermi bassi --- */
@media (max-width:700px){
  /* a tutto schermo, senza margini che facevano sbordare il fondo */
  #duello.game-overlay{padding:0;align-items:stretch;justify-content:stretch}
  #duello .game-panel{max-height:100dvh;height:100dvh;width:100%;max-width:none;border-radius:0;
    padding:12px 12px calc(10px + env(safe-area-inset-bottom,0px));overflow:hidden}
  .duel-arena{gap:8px}
  /* la riga della risposta sta su due file: il campo si stringe per farle posto */
  .duel-inrow input{flex:1 1 100%;max-width:none;order:1}
  .duel-castbtn{flex:1 1 auto;order:2}
  .duel-skipbtn{flex:0 0 auto;order:3}
  .duel-avatar{width:40px;height:40px;font-size:22px;border-radius:12px}
  .duel-enemyword{padding:6px 8px}
  .duel-ew-jp{font-size:17px;min-height:20px;margin-bottom:4px}
  .duel-field{min-height:70px;border-radius:12px}
  .duel-runes{width:96px;height:96px}
  .duel-shot{width:28px;height:28px}
  .duel-inrow input{height:44px;font-size:15px}
  .duel-castbtn,.duel-skipbtn{height:44px}
  .duel-castbtn{padding:0 14px}
  .duel-hero-jp{font-size:28px}
  .duel-hero-t{font-size:19px}
  .duel-codebox b{font-size:22px;letter-spacing:2px}
}
/* schermi molto bassi (telefono in orizzontale): tutto più compatto */
@media (max-height:620px){
  .duel-avatar{width:36px;height:36px;font-size:20px}
  .duel-myword{font-size:clamp(18px,4.5vw,24px);min-height:30px}
  .duel-ask{margin:0 0 6px}
  .duel-inrow input,.duel-castbtn,.duel-skipbtn{height:40px}
  .duel-enemyword{padding:5px 8px}
  .duel-ew-jp{font-size:15px;min-height:18px}
  .duel-field{min-height:56px}
  .duel-study{padding:8px 10px}
  .duel-study-w{font-size:clamp(18px,4.5vw,24px)}
}
/* schermo largo: la casella non si perde in mezzo */
@media (min-width:900px){
  .duel-myword{font-size:clamp(26px,2.4vw,36px)}
}
@media (prefers-reduced-motion:reduce){
  .duel-orb,.duel-runes,.duel-hpbar i.low,.duel-dots i{animation:none}
}

/* ================= Premi del duello: magie e campi ================= */
/* --- saldo e barra della bottega --- */
.duel-tama{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-weight:700;
  font-size:13px;color:#8a6d1f}
.duel-tama b{font-family:var(--title);font-size:14px;color:#c9a227}
.duel-shopbar{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--ink)}
.duel-shopbar span{flex:1;text-align:left;font-weight:700}
.duel-shopbar svg{width:17px;height:17px;color:var(--shu)}
.duel-shopbar:hover{border-color:var(--shu)}

/* --- bottega --- */
.duel-shop{padding:2px 0 6px}
.duel-tamabar{display:flex;justify-content:center;margin:12px 0 4px}
.duel-tamabar .duel-tama{font-size:16px;padding:7px 16px;border-radius:999px;
  background:linear-gradient(135deg,#fdf3d3,#f7e6a8);border:1px solid #e8d391}
.duel-tamabar .duel-tama b{font-size:17px}
.duel-shop-h{font-family:var(--sans);font-size:12px;color:var(--ink-soft);letter-spacing:.4px;
  margin:16px 0 8px;text-transform:uppercase}
.duel-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.duel-shop-it{border:1.5px solid var(--line);border-radius:14px;padding:9px 7px;text-align:center;background:#fff}
.duel-shop-it.on{border-color:var(--shu);box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.duel-shop-it.mio{background:var(--paper)}
.duel-shop-prev{height:52px;border-radius:10px;display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
.duel-shop-prev span{font-family:var(--title);font-size:20px;font-weight:800;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.45)}
.duel-shop-nome{font-family:var(--sans);font-size:12px;color:var(--ink);margin-bottom:5px}
.duel-shop-st{font-size:11px;color:var(--shu);font-weight:700}
.duel-shop-btn{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;
  padding:5px 4px;font-size:11.5px;cursor:pointer;font-family:var(--sans)}
.duel-shop-btn:hover{border-color:var(--ai);color:var(--ai)}
.duel-shop-btn.buy{border-color:#e8d391;color:#8a6d1f;background:#fdf8e8;font-weight:700}
.duel-shop-btn.buy:hover{background:#f7e6a8}
.duel-shop-btn.no{opacity:.45;cursor:default}
.duel-shop .g-start{margin-top:18px}

/* --- bottino di fine partita --- */
.duel-loot{margin:14px auto 0;max-width:320px;padding:12px;border-radius:14px;
  background:linear-gradient(135deg,#fdf8e8,#f7ecc9);border:1px solid #e8d391}
.duel-loot-tot{font-family:var(--title);font-size:26px;font-weight:800;color:#8a6d1f}
.duel-loot-tot b{font-size:19px;color:#c9a227}
.duel-loot-det{display:flex;justify-content:center;gap:12px;margin-top:2px;
  font-family:var(--sans);font-size:11.5px;color:#8a6d1f;opacity:.85}
.duel-loot-shop{margin-top:10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #e8d391;
  background:#fff;color:#8a6d1f;border-radius:9px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:var(--sans)}
.duel-loot-shop svg{width:14px;height:14px}
.duel-loot-shop:hover{background:#fdf8e8}

/* ================= Aspetti delle magie ================= */
/* anteprime in bottega + palla in campo: stesse tinte */
.duel-prev-fuoco{background:radial-gradient(circle at 35% 35%,#fff,#ffd36a 35%,#e07a1f 65%,#c0392b 100%)}
.duel-prev-acqua{background:radial-gradient(circle at 35% 35%,#fff,#a8e6ff 35%,#2e9fd4 65%,#14507a 100%)}
.duel-prev-fulmine{background:radial-gradient(circle at 35% 35%,#fff,#fff59a 30%,#f2c200 60%,#7a5c00 100%)}
.duel-prev-sakura{background:radial-gradient(circle at 35% 35%,#fff,#ffd6e6 35%,#f48fb1 65%,#ad1457 100%)}
.duel-prev-sumi{background:radial-gradient(circle at 35% 35%,#fff,#b9b6b0 30%,#4a463f 65%,#16150f 100%)}
.duel-prev-oro{background:radial-gradient(circle at 35% 35%,#fff,#ffe9a8 30%,#d4af37 60%,#8a6d1f 100%)}

.duel-skin-acqua .duel-orb{background:radial-gradient(circle at 35% 35%,#fff,#a8e6ff 35%,#2e9fd4 65%,#14507a 100%);
  box-shadow:0 0 14px 4px rgba(46,159,212,.55)}
.duel-skin-acqua .duel-trail{background:linear-gradient(to top,transparent,#2e9fd4)}
.duel-skin-fulmine .duel-orb{background:radial-gradient(circle at 35% 35%,#fff,#fff59a 30%,#f2c200 60%,#7a5c00 100%);
  box-shadow:0 0 16px 5px rgba(242,194,0,.6)}
.duel-skin-fulmine .duel-trail{background:linear-gradient(to top,transparent,#f2c200)}
.duel-skin-fulmine .duel-orb{animation:duelZap .22s steps(2,end) infinite alternate}
@keyframes duelZap{to{filter:brightness(1.5)}}
.duel-skin-sakura .duel-orb{background:radial-gradient(circle at 35% 35%,#fff,#ffd6e6 35%,#f48fb1 65%,#ad1457 100%);
  box-shadow:0 0 14px 4px rgba(244,143,177,.55)}
.duel-skin-sakura .duel-trail{background:linear-gradient(to top,transparent,#f48fb1)}
.duel-skin-sumi .duel-orb{background:radial-gradient(circle at 35% 35%,#fff,#b9b6b0 30%,#4a463f 65%,#16150f 100%);
  box-shadow:0 0 14px 4px rgba(30,28,24,.45)}
.duel-skin-sumi .duel-trail{background:linear-gradient(to top,transparent,#4a463f)}
.duel-skin-sumi .duel-ring b i{color:#16150f}
.duel-skin-oro .duel-orb{background:radial-gradient(circle at 35% 35%,#fff,#ffe9a8 30%,#d4af37 60%,#8a6d1f 100%);
  box-shadow:0 0 18px 6px rgba(212,175,55,.6)}
.duel-skin-oro .duel-trail{background:linear-gradient(to top,transparent,#d4af37)}
.duel-skin-oro .duel-ring b i{color:#8a6d1f}

/* ================= Campi di battaglia ================= */
.duel-prev-washi{background:linear-gradient(180deg,#f6efe6,#efe4d4)}
.duel-prev-notte{background:linear-gradient(180deg,#10162e,#243b6b)}
.duel-prev-bambu{background:linear-gradient(180deg,#e8f3e2,#bcd9b0)}
.duel-prev-onde{background:linear-gradient(180deg,#dff1fb,#7fb9df)}
.duel-prev-tatami{background:linear-gradient(180deg,#e6dfc2,#cbbf90)}

/* notte: stelline */
.duel-arena-notte{background:
  radial-gradient(1.4px 1.4px at 18% 22%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(1.2px 1.2px at 72% 16%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.6px 1.6px at 42% 62%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.2px 1.2px at 84% 74%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1.3px 1.3px at 28% 84%,rgba(255,255,255,.8),transparent 60%),
  linear-gradient(180deg,#10162e,#243b6b)!important;border-color:#2c3a63!important}
.duel-arena-notte .duel-runes{border-color:rgba(255,255,255,.28)}
.duel-arena-notte .duel-runes::before{border-color:rgba(255,255,255,.18)}
.duel-arena-notte .duel-runes::after{background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%)}
.duel-arena-notte .duel-ring b i{color:#fff;text-shadow:0 0 6px #000,0 0 10px #000}
/* bambuseto: canne verticali */
.duel-arena-bambu{background:
  repeating-linear-gradient(90deg,rgba(94,140,80,.20) 0 8px,transparent 8px 46px),
  linear-gradient(180deg,#e8f3e2,#bcd9b0)!important;border-color:#a9c79c!important}
/* grande onda: creste morbide */
.duel-arena-onde{background:
  radial-gradient(120% 40% at 50% 108%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(90% 30% at 20% 86%,rgba(255,255,255,.5),transparent 60%),
  linear-gradient(180deg,#dff1fb,#7fb9df)!important;border-color:#8fc0dd!important}
/* dojo: trama del tatami */
.duel-arena-tatami{background:
  repeating-linear-gradient(0deg,rgba(120,105,60,.13) 0 2px,transparent 2px 12px),
  repeating-linear-gradient(90deg,rgba(120,105,60,.09) 0 2px,transparent 2px 12px),
  linear-gradient(180deg,#e6dfc2,#cbbf90)!important;border-color:#bdb083!important}
.duel-arena-tatami .duel-runes{border-color:rgba(90,70,40,.3)}

@media (prefers-reduced-motion:reduce){
  .duel-skin-fulmine .duel-orb{animation:none}
}

/* ================= Altri giochi: elenco nel pannello Minigiochi ================= */
.g-altri{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .g-altri{grid-template-columns:1fr} }
.g-altro{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border-radius:14px;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:.12s}
.g-altro:hover{border-color:var(--shu);box-shadow:0 4px 14px rgba(192,57,43,.08)}
.g-altro-jp{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--title);font-size:22px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#7D3C98,#C0392B)}
.g-altro-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.g-altro-txt b{font-family:var(--serif);font-size:15px;color:var(--ink)}
.g-altro-txt i{font-style:normal;font-size:12px;color:var(--ink-soft);line-height:1.4}

/* ================= 漢字の雨 Pioggia di kanji ================= */
#pioggia .pioggia-panel,#shiritori .shiritori-panel{max-width:640px;display:flex;flex-direction:column;
  max-height:min(94vh,900px)}
#pioggia #pioggia-body,#shiritori #shiritori-body{display:flex;flex-direction:column;min-height:0;flex:1}
.pio-hero{text-align:center;padding:6px 0 2px}
.pio-hero-jp{font-family:var(--title);font-size:32px;font-weight:800;color:var(--shu);line-height:1.1}
.pio-hero-t{font-family:var(--title);font-size:21px;font-weight:800;color:var(--ink);margin-top:2px}
.pio-hero-s{font-size:13px;color:var(--ink-soft);line-height:1.55;max-width:420px;margin:8px auto 0}
.pio-rec{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.pio-rec b{font-family:var(--title);font-size:19px;color:var(--shu)}

.pio-arena{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
@media (min-width:701px){ .pio-arena{min-height:440px} }
/* il punteggio sta lontano dalla × che è agganciata in alto a destra */
.pio-hud{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:13px;
  color:var(--ink-soft);padding-right:46px}
.shi-top{padding-right:46px}
.pio-vite{font-size:17px;letter-spacing:2px}
.pio-vite.hit{animation:pioShake .4s}
@keyframes pioShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pio-punti b{font-family:var(--title);font-size:18px;color:var(--shu);margin-left:4px}
.pio-punti b.up{animation:pioUp .35s ease-out}
@keyframes pioUp{0%{transform:scale(1.5);color:#27AE60}100%{transform:scale(1)}}
/* il cielo da cui cadono le parole */
.pio-cielo{position:relative;flex:1;min-height:180px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#eaf2fb 0%,#dbe9f8 60%,#cfe0f3 100%);border:1px solid var(--line)}
.pio-terra{position:absolute;left:0;right:0;bottom:0;height:8px;
  background:repeating-linear-gradient(90deg,#b9cfe6 0 10px,#a8c2dd 10px 20px)}
.pio-goccia{position:absolute;top:0;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--title);will-change:top;
  background:rgba(255,255,255,.92);border:1px solid #c5dcf2;border-radius:12px;padding:5px 11px;
  box-shadow:0 3px 10px rgba(30,60,90,.14)}
.pio-goccia .g-jp{font-size:22px!important;font-family:var(--title)}
.pio-goccia ruby rt{font-size:.45em;color:var(--ai)}
.pio-goccia.presa{animation:pioPresa .32s ease-out forwards}
@keyframes pioPresa{0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.5);opacity:0;filter:brightness(1.6)}}
.pio-splash{position:absolute;bottom:0;transform:translateX(-50%);width:44px;height:22px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,57,43,.4),transparent 70%);animation:pioSplash .6s ease-out forwards}
@keyframes pioSplash{0%{opacity:1;transform:translateX(-50%) scale(.4)}100%{opacity:0;transform:translateX(-50%) scale(1.6)}}
.pio-inrow{display:flex;gap:8px}
.pio-inrow input{flex:1;min-width:0;box-sizing:border-box;height:46px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:12px;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff}
.pio-inrow input:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 3px rgba(46,134,193,.12)}
.pio-inrow input.bad{border-color:var(--shu);animation:pioShake .3s}
.pio-btn{height:46px;padding:0 16px;white-space:nowrap}
.pio-note{font-size:11.5px;color:var(--ink-soft);text-align:center}

/* ================= しりとり Shiritori ================= */
.shi-arena{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.shi-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.shi-len b{font-family:var(--title);font-size:18px;color:var(--shu);margin-left:4px}
.shi-timer b{font-family:var(--title);font-size:17px;color:var(--ink)}
.shi-barra{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.shi-barra i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#27AE60,#D68910,#C0392B);
  background-size:300% 100%;background-position:100% 0;transition:width .12s linear}
.shi-lista{flex:1;min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:6px;
  padding:10px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.shi-riga{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:10px;background:#fff;
  border:1px solid var(--line);font-family:var(--sans);animation:shiIn .25s ease-out}
@keyframes shiIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.shi-riga.mia{border-color:#c5dcf2;background:#f4f9ff}
.shi-riga.sua{border-color:#e8cfc9;background:#fdf6f4}
.shi-chi{flex:none;font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;min-width:56px}
.shi-w{font-family:var(--title);font-size:17px;color:var(--ink)}
.shi-r{font-size:12px;color:var(--ai)}
.shi-m{font-size:12.5px;color:var(--ink-soft);margin-left:auto;text-align:right}
.shi-req{text-align:center;font-size:13px;color:var(--ink-soft)}
.shi-req b{font-family:var(--title);font-size:24px;color:var(--shu);margin-left:6px}
.shi-inrow{display:flex;gap:8px}
.shi-inrow input{flex:1;min-width:0;box-sizing:border-box;height:46px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:12px;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff}
.shi-inrow input:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 3px rgba(46,134,193,.12)}
.shi-inrow input.bad{border-color:var(--shu);animation:pioShake .3s}
.shi-inrow .btn{height:46px;padding:0 18px;white-space:nowrap}
.shi-err{min-height:18px;text-align:center;font-size:12.5px;color:var(--shu)}
.shi-catena-fin{margin:12px auto 0;max-width:420px;font-family:var(--title);font-size:14px;color:var(--ink-soft);
  line-height:1.7;word-break:break-word}

@media (max-width:700px){
  #pioggia .pioggia-panel,#shiritori .shiritori-panel{max-height:100dvh;height:100dvh;border-radius:0;
    padding:12px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .pio-goccia .g-jp{font-size:18px!important}
  .shi-m{display:none}
}

/* ================= 対戦 Multiplayer (banco dei giochi in compagnia) ================= */
#multi .multi-panel,#karuta .karuta-panel{max-width:680px;display:flex;flex-direction:column;max-height:min(94vh,900px)}
#karuta #karuta-body{display:flex;flex-direction:column;min-height:0;flex:1}
.multi-grid{margin-top:18px}

/* ================= かるた Karuta ================= */
.kar-arena{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
/* punteggi in cima */
.kar-punti{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-right:46px}
.kar-p{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);font-family:var(--sans);font-size:12.5px;color:var(--ink-soft)}
.kar-p b{color:var(--ink);font-weight:700}
.kar-p.io{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 8%,#fff);color:var(--shu)}
.kar-p.io b{color:var(--shu)}

/* il banditore che legge il significato */
.kar-banditore{text-align:center;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,#fdf6f4,#f8ece8);border:1px solid var(--line)}
.kar-b-lab{font-size:11px;color:var(--ink-soft);letter-spacing:.3px}
.kar-b-m{font-family:var(--title);font-size:clamp(20px,5.4vw,27px);font-weight:800;color:var(--shu);
  min-height:34px;line-height:1.25;margin-top:2px}
.kar-b-m.pop{animation:karPop .4s ease-out}
@keyframes karPop{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

/* il tavolo delle carte */
.kar-tavolo{flex:1;min-height:0;overflow:auto;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;
  padding:10px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.kar-tavolo.fitto{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.kar-carta{position:relative;min-height:62px;display:grid;place-items:center;padding:8px 6px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:.1s;
  font-family:var(--title)}
.kar-carta:hover:not(:disabled){border-color:var(--shu);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(192,57,43,.14)}
.kar-carta:active:not(:disabled){transform:scale(.97)}
.kar-w{font-size:clamp(17px,4.6vw,22px);font-weight:700;color:var(--ink);line-height:1.2;word-break:break-word}
.kar-tavolo.fitto .kar-w{font-size:clamp(15px,4vw,19px)}
/* carta già presa */
.kar-carta.presa{opacity:.5;cursor:default;background:var(--paper);border-style:dashed}
.kar-carta.presa .kar-w{color:var(--ink-soft)}
.kar-carta.mia{opacity:1;border-color:#27AE60;background:#f1faf4;border-style:solid}
.kar-carta.mia .kar-w{color:#1e8449}
.kar-by{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);max-width:92%;
  font-family:var(--sans);font-size:9.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kar-carta.flash{animation:karFlash .5s ease-out}
@keyframes karFlash{0%{box-shadow:0 0 0 0 rgba(39,174,96,.6)}100%{box-shadow:0 0 0 14px rgba(39,174,96,0)}}
.kar-carta.sbagliata{animation:karNo .45s}
@keyframes karNo{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px);border-color:var(--shu)}
  60%{transform:translateX(6px);border-color:var(--shu)}}

.kar-note{text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);min-height:18px}
.kar-note.bene{color:#1e8449;font-weight:700}
.kar-note.male{color:var(--shu);font-weight:700}
.kar-note.attesa{color:var(--ai)}

/* sala d'attesa: chi c'è al tavolo */
.kar-lobby-p{margin:14px 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-soft)}

/* classifica finale */
.kar-classifica{margin:14px auto 0;max-width:320px;display:flex;flex-direction:column;gap:6px}
.kar-cl-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:var(--paper);border:1px solid var(--line);font-family:var(--sans);font-size:13.5px}
.kar-cl-row.io{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 8%,#fff)}
.kar-cl-pos{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--line);color:var(--ink);font-size:11px;font-weight:700}
.kar-cl-row:first-child .kar-cl-pos{background:#d4af37;color:#fff}
.kar-cl-n{flex:1;text-align:left;color:var(--ink)}
.kar-cl-row b{font-family:var(--title);font-size:17px;color:var(--shu)}

@media (max-width:700px){
  #multi .multi-panel,#karuta .karuta-panel{max-height:100dvh;height:100dvh;border-radius:0;
    padding:12px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .kar-tavolo{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;padding:8px}
  .kar-carta{min-height:54px}
}

/* pannello «Esercitati» (dentro Studio) */
#eserc .eserc-panel{max-width:680px}

/* ---- il fogliettino delle label nei filtri ---- */
.lblfil-btn{display:inline-flex;align-items:center;gap:7px}
.lblfil-tn{display:flex;gap:10px;margin:0 0 7px 2px}
.lblfil-nota{font-family:var(--sans);font-size:11px;color:var(--ink-soft);margin:0 0 6px 2px}
#lblfilpop .np-lbltree{max-height:min(46vh,320px);border:none;background:none;padding:2px;
  display:flex;flex-direction:column;gap:5px;overflow:auto}

/* ---- 仮名: la preparazione della prova ---- */
.kn-gr-d{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-soft);margin-left:5px}
/* la domanda quando è un suono (modo «Scrittura»): è latino, non un segno */
.kn-q-ro{font-family:var(--sans);font-size:40px;font-weight:800;letter-spacing:.04em}
.kn-q-m{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-top:-8px;margin-bottom:14px}
/* la risposta a tastiera */
.kn-q-in{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.kn-q-in input{
  width:min(260px,70vw);border:1.5px solid var(--line);border-radius:12px;background:#fff;
  padding:11px 14px;font-family:var(--serif);font-size:20px;text-align:center;color:var(--ink);
}
.kn-q-in input:focus{outline:none;border-color:var(--ai)}
.kn-q-in input:disabled{opacity:.7}
.kn-q-in .pri,.kn-mano-az .pri{background:var(--shu);color:#fff;border-color:var(--shu)}
.kn-q-in button,.kn-mano-az button{
  border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 18px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;
}
.kn-q-in button:disabled{opacity:.6;cursor:default}
/* la risposta a mano */
.kn-q-mano{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0}
.kn-q-mano canvas{border:1.5px solid var(--line);border-radius:14px;background:#fff;touch-action:none}
.kn-mano-az{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kn-mano-az button{padding:9px 14px;font-size:12.5px}
/* l'esito */
.kn-q-esito{font-family:var(--sans);font-size:14px;margin-top:12px}
.kn-q-esito.ok{color:#2E7D5B}
.kn-q-esito.no{color:var(--shu)}
.kn-q-next{
  display:block;margin:12px auto 0;border:none;border-radius:12px;padding:11px 26px;
  background:var(--shu);color:#fff;font-family:var(--sans);font-size:14px;font-weight:800;cursor:pointer;
}

/* ---- niente selezione del testo dentro agli esercizi ----
   Su telefono e tablet un dito che indugia un istante di troppo su una
   pastiglia fa partire la selezione di sistema: la parola si evidenzia di
   azzurro, spunta il fumetto «Copia / Cerca», e il tocco che volevi dare va
   perso. Qui dentro non c'è niente da copiare — si tocca e basta — quindi la
   selezione si spegne. Restano selezionabili le caselle dove si scrive
   davvero (le risposte a tastiera): lì serve, per correggersi. */
#game, #coniuga, #kana, #writecfg, #duello, #karuta, #pioggia, #shiritori,
#eserc, #multi, #picker, #conjtab{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
#game input, #game textarea, #coniuga input, #coniuga textarea,
#kana input, #kana textarea, #writecfg input, #writecfg textarea,
#duello input, #karuta input, #shiritori input, #eserc input, #multi input,
#picker input, #conjtab input{
  -webkit-user-select:text; user-select:text;
}

/* il nome dell'alfabeto: il kana grande, il romaji accanto in piccolo — chi
   sta imparando a leggere i kana «ひらがな» da solo non lo decifra */
.kn-nome-jp{font-family:var(--serif);font-weight:800}
.kn-nome-ro{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-left:5px}
.g-ans.on .kn-nome-ro{color:var(--ai)}
.kn-alf{gap:2px}
/* il conto dei segni scelti: pastiglia neutra, non il pallino rosso degli
   avvisi — qui è un'informazione, non una cosa da sbrigare */
.kn-conta{background:#EDEBE4;color:var(--ink-soft);font-weight:700}
.g-ans.on .kn-conta{background:var(--ai);color:#fff}
/* ---- la griglia dei kana: al centro dello schermo ---- */
.kngrid-fondo{
  position:fixed;inset:0;z-index:var(--z-menu);background:rgba(40,30,26,.4);
  display:flex;align-items:center;justify-content:center;padding:20px 14px;
}
.kngrid{
  width:min(500px,94vw);max-height:min(84vh,720px);
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(20,20,18,.26);overflow:hidden;
}
.kng-top{
  flex:none;display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:#fff;border-bottom:1px solid var(--line);
}
.kng-t{display:flex;align-items:baseline;font-size:15px;color:var(--ink)}
.kng-top .qk-tutti{margin-left:8px;margin-right:auto}
.kng-n{font-family:var(--sans);font-size:10.5px;font-weight:800;color:var(--ai);
  background:var(--ai-soft);border-radius:99px;padding:2px 9px}
.kng-x{border:none;background:none;font-size:19px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 3px}
.kng-x:hover{color:var(--shu)}
.kng-spenta{flex:none;padding:9px 12px;font-family:var(--sans);font-size:11.5px;
  color:#8A5A18;background:color-mix(in srgb,#C97F35 12%,#fff)}
.kng-corpo{flex:1;min-height:0;overflow:auto;padding:10px 12px 14px}
.kng-gr{margin-bottom:14px}
.kng-gr:last-child{margin-bottom:0}
.kng-gr-t{display:flex;align-items:center;gap:8px;margin-bottom:7px;
  font-family:var(--serif);font-size:13px;font-weight:800;color:var(--ink)}
/* ---- la riga: l'etichetta e cinque caselle che si prendono il resto ----
   Le caselle erano larghe 42px fisse: la tavola stava tutta a sinistra e a
   destra restava un dito di bianco. Adesso è una griglia — la colonna
   dell'etichetta ha la sua misura, le altre cinque si dividono in parti
   uguali quello che avanza — così la tavola riempie il fogliettino a
   qualunque larghezza, telefono compreso.
   Cinque colonne sempre, anche nelle righe del 拗音 che di caselle ne hanno
   tre: così き, きゃ e が restano incolonnate una sotto l'altra. */
.kng-riga{
  display:grid;grid-template-columns:40px repeat(5,minmax(0,1fr));
  gap:6px;align-items:center;margin-bottom:6px;
}
/* l'etichetta della riga: きゃ sono DUE segni, e in 28px non ci stavano —
   uscivano dal bordo o andavano a capo. Qui la casella è più larga e la
   scritta non va mai a capo */
.kng-rt{
  height:34px;padding:0 2px;border:1px solid var(--line);border-radius:8px;
  background:#fff;cursor:pointer;font-family:var(--serif);font-size:13px;
  line-height:1;color:var(--ink-soft);white-space:nowrap;letter-spacing:-.5px;
  display:flex;align-items:center;justify-content:center;
}
.kng-rt:hover{border-color:var(--shu);color:var(--shu)}
/* le caselle stanno nella griglia della riga, non in un contenitore loro */
.kng-celle{display:contents}
/* la casella: spenta è pallida, accesa ha il fondo e il contorno dell'indaco */
.kng-c{
  width:100%;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;
  line-height:1;transition:.1s;padding:0;
}
.kng-c b{font-family:var(--serif);font-size:18px;font-weight:700;color:#BFBBB2;line-height:1}
.kng-c i{font-style:normal;font-family:var(--sans);font-size:9px;color:#C9C5BB;margin-top:3px}
/* sul telefono la colonna dell'etichetta si stringe, le caselle no */
@media (max-width:420px){
  .kng-riga{grid-template-columns:32px repeat(5,minmax(0,1fr));gap:4px}
  .kng-rt{font-size:11px;height:30px}
  .kng-c{height:40px}
  .kng-c b{font-size:16px}
  .kng-corpo{padding:10px 9px 14px}
}
.kng-c.on{border-color:var(--ai);background:#F0F4F8}
.kng-c.on b{color:var(--ink)}
.kng-c.on i{color:var(--ai)}
.kng-c:hover{border-color:var(--ai)}
.kng-c.vuota{border:none;background:none;cursor:default}
/* ---- la lavagnetta della prova: guide e ordine dei tratti ---- */
.kn-cv-box{display:flex;flex-direction:column;align-items:center;gap:10px}
.kn-cv-tratti{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:300px}
.kn-cv-tratti svg{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff}
.kn-mano-az button.on{border-color:var(--ai);color:var(--ai);background:#F0F4F8}

/* ---- 活用 Coniugazioni ---- */
.cj-hero{text-align:center;padding:8px 0 18px}
.cj-hero-jp{font-family:var(--serif);font-size:56px;font-weight:700;color:var(--shu);line-height:1}
.cj-hero-t{font-family:var(--title);font-size:19px;font-weight:900;color:var(--ink);margin-top:6px}
.cj-hero-s{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:8px auto 0;max-width:420px}
.cj-conto{display:flex;justify-content:center;gap:26px;margin-bottom:20px;
  font-size:12.5px;color:var(--ink-soft);text-align:center}
.cj-conto b{display:block;font-family:var(--title);font-size:20px;color:var(--ink)}
/* ---- le spunte: quali parole, quali forme ----
   Sono le pastiglie del gioco delle parole (.g-ans), con davanti un
   quadratino: qui si accende e si spegne a mucchi — cinque gruppi e una
   ventina di forme — e col solo colore, in mezzo a venti pastiglie, non si
   capiva più che cosa fosse acceso. */
/* «Tutte / Nessuna» sta accanto al titolo della fila, in piccolo: uno solo,
   uguale in tutti gli esercizi (lo scrive qkTuttiBtn, in ui/menu.js) */
.qk-tutti{
  margin-left:8px;border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:1px 9px;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  flex:none;white-space:nowrap;
}
.qk-tutti:hover{border-color:var(--ai);color:var(--ai)}
/* ---- i due mucchi di forme ----
   «Le due forme di base» e «Tutte le altre»: diciotto pastiglie tutte in fila
   sono un muro, e per giunta registro e polarità valgono solo per le prime
   due — separarle è il modo più corto per dirlo. */
.cj-gruppo{margin-bottom:14px}
.cj-gruppo:last-child{margin-bottom:0}
.cj-gruppo-t{
  font-family:var(--sans);font-size:11.5px;font-weight:800;color:var(--ink);
  margin-bottom:7px;
}
/* rientrato e appeso a un filo: si vede che dipende dalle due pastiglie sopra */
.cj-sotto{
  margin:10px 0 0 12px;padding:10px 0 2px 14px;border-left:2px solid var(--paper-edge);
  display:flex;flex-direction:column;gap:8px;
}
.cj-sotto.spenta{opacity:.45}
.cj-sotto-n{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);line-height:1.5}
/* ---- quanto dura ----
   Le lunghezze pronte come nel gioco delle parole, e accanto la casella per
   un numero qualsiasi: chi vuole venticinque domande non deve accontentarsi
   di venti. */
.cj-serie{gap:7px}
#coniuga-body .g-step-hint{margin-top:9px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}

.cj-secondo{display:block;width:100%;margin-top:10px;background:transparent;border:1px solid var(--line);
  border-radius:10px;padding:11px;color:var(--ink-soft);font-family:var(--sans);font-size:13px;
  font-weight:700;cursor:pointer;transition:.12s}
.cj-secondo:hover{border-color:var(--shu);color:var(--shu)}
/* la × del pannello sta in alto a destra e non occupa spazio: la riga del
   punteggio le lascia il posto, se no ci finisce sotto */
.cj-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
  padding-right:40px;font-size:12px;color:var(--ink-soft)}
.cj-passo{font-family:var(--title);font-weight:900;letter-spacing:.06em}
.cj-punti b{color:var(--ink)}
.cj-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;text-align:center}
.cj-dict{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--ink);line-height:1.1}
.cj-mean{font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.cj-chiesta{display:inline-block;margin-top:16px;padding:7px 15px;border-radius:99px;
  background:var(--ai);color:#fff;font-family:var(--serif);font-size:15px;font-weight:700}
.cj-nota{font-size:12px;color:var(--ink-soft);margin-top:7px}
.cj-in{width:100%;max-width:340px;margin:20px auto 0;display:block;text-align:center;
  font-family:var(--serif);font-size:26px;color:var(--ink);
  border:none;border-bottom:2px solid var(--line);background:transparent;padding:8px 4px}
.cj-in:focus{outline:none;border-color:var(--ai)}
.cj-in.ok{border-color:var(--jl-n3,#58995F);color:var(--jl-n3,#58995F)}
.cj-in.ko{border-color:var(--shu);color:var(--shu)}
.cj-esito{min-height:26px;margin-top:12px;font-size:14px}
.cj-si{color:var(--jl-n3,#58995F);font-weight:700}
.cj-no{color:var(--shu);font-weight:700}
.cj-sol{font-family:var(--serif);font-size:20px;color:var(--ink)}
.cj-azioni{margin-top:18px}
.cj-ok{width:100%}
.cj-sub{margin:22px 0 10px;font-family:var(--title);font-size:11px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cj-errori{display:flex;flex-direction:column;gap:7px}
.cj-err{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.cj-err-d{font-size:12.5px;color:var(--ink-soft)}
.cj-err-f{font-family:var(--serif);font-size:18px;color:var(--ink);white-space:nowrap}
@media (max-width:560px){
  .cj-dict{font-size:34px}
  .cj-in{font-size:22px}
  .cj-card{padding:20px 14px}
}

/* Bottega: un pulsantino in testa alla sezione, non una scheda come i giochi —
   è un posto dove si spende, non un gioco da aprire. */
.g-secrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.g-secrow .g-section-h{margin-bottom:0}
.g-bottega{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  border:1px solid var(--line);background:#fff;color:var(--shu);font-family:var(--sans);
  font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s}
.g-bottega svg{width:15px;height:15px}
.g-bottega:hover{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 7%,#fff)}

/* ---- «Mettiti alla prova»: la preparazione in tre passi ----
   Tre carte numerate invece della colonna piatta di prima: l'occhio va da un
   passo all'altro, e ogni cosa sta nel passo a cui appartiene. */
#game-body .g-step{
  border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:15px 18px 17px;margin-top:14px;
  display:flex;flex-direction:column;gap:11px;
}
#game-body .g-step-h{
  display:flex;align-items:center;gap:10px;
  font-family:var(--title);font-weight:900;font-size:15.5px;color:var(--ink);
}
#game-body .g-step-n{
  display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--shu);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
}
#game-body .g-step-sub{
  font-size:10.5px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;
  margin-top:3px;
}
#game-body .g-step-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
/* dentro a un passo, l'intestazione condivisa dei filtri smette di gridare:
   diventa un'etichetta come le altre (il titolo vero è quello del passo) */
#game-body .g-step .g-section-h{
  margin:4px 0 0;font-family:var(--sans);font-weight:400;font-size:10.5px;
  color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;
}
/* le tre modalità in fila su schermo largo (la terza non si allarga più) */
#game-body .g-modes{grid-template-columns:repeat(3,1fr);gap:11px}
#game-body .g-modes .g-mode:last-child:nth-child(odd){grid-column:auto}
#game-body .g-mode{padding:13px 14px}
#game-body .g-mode .mt{font-size:14.5px;display:flex;align-items:center;gap:7px;margin-bottom:4px}
#game-body .g-mode .mjp{
  font-family:var(--serif);color:var(--shu);font-size:15px;flex:none;
}
#game-body .g-mode .md{font-size:12px}
/* il via in fondo: lo stato a sinistra, il pulsante a destra */
#game-body .g-startbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
}
#game-body .g-startnote{flex:1;min-width:200px;font-size:13px;color:var(--ink-soft);line-height:1.45}
#game-body .g-startnote.ok{color:var(--ink);font-weight:700}
#game-body .g-startbar .g-start{margin:0;flex:none}
@media (max-width:700px){
  #game-body .g-step{padding:12px 13px 14px}
  #game-body .g-modes{grid-template-columns:1fr}
  #game-body .g-startbar .g-start{flex:1 1 100%}
}

/* ---- «Kanji e parole»: sezioni a carte, «Fatto» sempre a portata ---- */
.pick-sez{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px 16px 16px;margin-top:14px}
.pick-h{
  display:flex;align-items:baseline;gap:9px;margin-bottom:11px;
  font-family:var(--title);font-weight:900;font-size:13.5px;color:var(--ink);
}
.pick-h b{
  font-family:var(--sans);font-weight:700;font-size:11.5px;color:#fff;
  background:var(--shu);border-radius:99px;padding:2px 9px;
}
.pick-sez .g-wchip{
  border:1.5px solid var(--line);background:#fff;border-radius:99px;
  padding:7px 14px;font-family:var(--sans);font-size:13.5px;color:var(--ink);
  cursor:pointer;transition:.12s;
}
.pick-sez .g-wchip:hover{border-color:var(--ai)}
.pick-sez .g-wchip.off{opacity:.35;text-decoration:line-through;background:var(--paper)}
.g-wordlist{display:flex;flex-wrap:wrap;gap:7px}
/* la chiusura resta in vista anche con novanta parole da scorrere:
   una fascia solida appoggiata al fondo, con la sua riga sottile */
.pick-piede{
  position:sticky;bottom:-34px;margin:18px calc(-1*var(--pp)) -34px;
  padding:12px var(--pp) 18px;
  background:var(--paper);border-top:1px solid var(--line);
}
.pick-piede .g-start{width:100%;margin:0}

/* i gruppi per label dentro al pannello, e il cartellino sopra a tutto */
.pick-grp{margin-top:14px}
.pick-grp:first-child{margin-top:0}
.pick-grp-h{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.pick-grp-h i{width:10px;height:10px;border-radius:3px;flex:none}
#picktip{z-index:2147482500}

/* ===== キーボード i giochi scritti con la tastiera aperta =====
   Quando la tastiera del telefono è su (body.tast-su, vedi tastiera.js) i tre
   giochi scritti si rifanno nello spazio che resta VISIBILE:
     · pioggia (strada A): il pannello si stringe, il cielo si comprime, il
       campo resta incollato sopra la tastiera — niente finisce sotto;
     · shiritori e coniugazioni (strada B): piega da chat — resta l'essenziale,
       domanda grande appena sopra il campo, il resto torna a tastiera chiusa. */
@media (max-width:700px){
  body.tast-su #pioggia, body.tast-su #shiritori, body.tast-su #coniuga{
    align-items:flex-start;padding:0;
  }
  body.tast-su #pioggia .game-panel,
  body.tast-su #shiritori .game-panel,
  body.tast-su #coniuga .game-panel{
    height:calc(100dvh - var(--tastiera,0px));
    max-height:calc(100dvh - var(--tastiera,0px));
    border-radius:0;overflow:hidden;
    padding-bottom:8px;
  }
  body.tast-su #pioggia .game-panel > div,
  body.tast-su #shiritori .game-panel > div,
  body.tast-su #coniuga .game-panel > div{
    display:flex;flex-direction:column;height:100%;
    padding-top:8px;
  }
  /* A — la pioggia si comprime ma si vede TUTTA */
  body.tast-su #pioggia .pio-hero,
  body.tast-su #pioggia .pio-rec{display:none}
  body.tast-su #pioggia .pio-cielo{min-height:90px}
  body.tast-su #pioggia .pio-hud{margin-top:0}
  /* B — shiritori: via la storia della catena, domanda incollata al campo */
  body.tast-su #shiritori .shi-lista{display:none}
  body.tast-su #shiritori .shi-req{margin-top:auto}
  body.tast-su #shiritori .shi-req b{font-size:30px}
  /* B — coniugazioni: la carta del verbo scende sopra il campo */
  body.tast-su #coniuga .cj-hero,
  body.tast-su #coniuga .cj-conto{display:none}
  body.tast-su #coniuga .cj-card{margin-top:auto;padding:14px 14px}
  body.tast-su #coniuga .cj-dict{font-size:30px}
  /* i titoli grandi dei pannelli rubano spazio: con la tastiera su si accorciano */
  body.tast-su #pioggia .g-title, body.tast-su #shiritori .g-title,
  body.tast-su #coniuga .g-title{display:none}
}

/* ===== D1 — il duello sul telefono =====
   Due cose, chieste guardando lo schermo vero:
   1) su telefono la zona della risposta («Scrivi il significato», campo,
      Lancia, Non la so) e il riquadro «sta preparando…» erano GRANDI: qui
      si asciugano, e la partita respira anche senza tastiera;
   2) con la tastiera su (body.tast-su) vale la strada A della pioggia: il
      pannello si stringe nello spazio visibile, l'arena si riduce ma resta
      viva, campo e vita mai sotto la tastiera. */
@media (max-width:700px){
  .duel-myword{font-size:clamp(19px,5.2vw,24px);min-height:28px}
  .duel-myword.long{font-size:clamp(16px,4.4vw,21px)}
  .duel-myword.xlong{font-size:clamp(14px,3.8vw,18px)}
  .duel-ask{font-size:11px;margin:0 0 4px}
  .duel-wordinfo{margin:2px 0 0;font-size:11px;gap:8px}
  .duel-inrow{gap:6px}
  .duel-inrow input{height:38px;font-size:14px}
  .duel-castbtn,.duel-skipbtn{height:38px;font-size:12.5px}
  .duel-castbtn{padding:0 12px}
  .duel-skipbtn{padding:0 10px}
  .duel-enemyword{padding:4px 8px}
  .duel-ew-label{font-size:9px}
  .duel-ew-jp{font-size:15px;min-height:18px;margin-bottom:2px}

  body.tast-su #duello .game-panel{
    height:calc(100dvh - var(--tastiera,0px));
    max-height:calc(100dvh - var(--tastiera,0px));
    padding-bottom:6px;
  }
  body.tast-su #duello .duel-arena{gap:5px}
  body.tast-su #duello .duel-field{min-height:44px}
  body.tast-su #duello .duel-avatar{width:28px;height:28px;font-size:15px;border-radius:9px}
  body.tast-su #duello .duel-name{font-size:11px}
  body.tast-su #duello .duel-ask{display:none}
  body.tast-su #duello .duel-wordinfo{display:none}
  body.tast-su #duello .duel-ew-label{display:none}
}

/* ===== かるた la karuta sul telefono =====
   Due carte per riga: larghe abbastanza da tenere ラーメン su una riga sola,
   un filo più basse e con la scritta più piccola — si vede tutto il mazzo
   senza che le parole lunghe vadano a capo. */
@media (max-width:700px){
  .kar-tavolo{grid-template-columns:1fr 1fr;gap:7px;padding:8px}
  .kar-tavolo.fitto{grid-template-columns:1fr 1fr}
  .kar-carta{min-height:52px;padding:6px;border-radius:10px}
  .kar-w{font-size:16px}
  .kar-tavolo.fitto .kar-w{font-size:14px}
  .kar-banditore{padding:8px 10px}
  .kar-b-m{font-size:clamp(17px,4.6vw,22px)}
}

/* la parola dell'avversario arriva col suo vestito (.g-jp) e ignorava la
   misura del riquadro: da qui eredita — 20px al computer, 15 su telefono */
.duel-ew-jp .g-jp{font-size:inherit;font-family:var(--title)}
.duel-ew-jp ruby rt{font-size:.45em}

/* ===== la testata del nemico, rifatta stretta =====
   Nome sotto l'icona, vita in alto, e sotto la barra del TEMPO con la ⚡
   della magia in arrivo: tre righe diventate due, senza la parola nemica. */
.duel-f2{align-items:flex-start}
.duel-who{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.duel-name2{font-size:10px;color:var(--ink-soft);white-space:nowrap;max-width:74px;
  overflow:hidden;text-overflow:ellipsis}
.duel-eninfo{display:flex;align-items:center;gap:8px;margin-top:5px;min-height:16px}
.duel-eninfo .duel-ew-label{font-size:10px;color:var(--ink-soft)}
.duel-hitword{font-family:var(--title);font-size:13px;color:var(--ink)}
/* il tempo che resta: parte pieno e si consuma da sinistra — il pezzo
   rimasto sta a destra e si accorcia */
.duel-charge2{flex:1;height:6px;border-radius:99px;background:#EBE7DF;overflow:hidden;
  display:flex;justify-content:flex-end}
.duel-charge2 i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--shu),#E2694F)}
.duel-ew-pw{flex:none;font-family:var(--sans);font-size:12px;font-weight:800;color:var(--shu)}
/* la riga della risposta quando le magie sono ferme (scuola, conto alla
   rovescia): si vede spenta ma NON sparisce — se sparisse, la tastiera del
   telefono si chiuderebbe con lei */
.duel-inrow.spenta{opacity:.4;pointer-events:none}
.duel-inrow.spenta input{pointer-events:auto}   /* il focus resta suo */

/* la vita del nemico non deve infilarsi sotto la ×, e il nome sotto
   l'icona ha diritto a qualche lettera in piu' */
.duel-f2 .duel-hpwrap{margin-right:44px}
.duel-name2{max-width:96px}

/* ---- 練習 la tendina degli esercizi ----
   Sta in cima a tutti e quattro (parole, scrittura, kana, coniugazioni): da
   lì si passa dall'uno all'altro senza tornare al menu. */
.es-scelta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 16px;padding:9px 12px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.es-scelta-l{
  font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);flex:none;
}
.es-scelta-s{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;
  cursor:pointer;
}
.es-scelta-s:focus{outline:none;border-color:var(--ai)}
/* il rimando dalla Stampa agli esercizi a schermo */
.es-rimando{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);text-align:center;
}

/* ============================================================
   練習 — LE QUATTRO SCHERMATE DEGLI ESERCIZI (bozza B)
   Testata uguale per tutti, scelte a tessere, e la barra del «via» in
   fondo che ti segue mentre scegli.
   ============================================================ */
.es-testa{margin:0 0 16px}
.es-hero{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.es-cerchio{
  flex:none;width:46px;height:46px;border-radius:99px;display:grid;place-items:center;
  background:var(--ai-soft);color:var(--ai);font-family:var(--serif);font-size:19px;font-weight:800;
}
.es-hero-t{min-width:0}
.es-hero-t b{display:block;font-family:var(--title);font-size:19px;font-weight:900;line-height:1.25}
.es-hero-t i{font-style:normal;font-size:12.5px;color:var(--ink-soft)}
/* il segmentato dei quattro esercizi */
.es-seg{display:flex;gap:3px;padding:3px;background:var(--paper);border-radius:99px;overflow-x:auto;
  scrollbar-width:none}
.es-seg::-webkit-scrollbar{display:none}
.es-seg button{
  flex:1;min-width:max-content;border:none;background:none;border-radius:99px;padding:7px 13px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;
}
.es-seg button.on{background:#fff;color:var(--shu);box-shadow:0 1px 3px rgba(20,20,18,.14)}
.es-seg-jp{font-family:var(--serif);font-weight:800}
/* le sezioni: niente cornici, solo un filo a dividere */
.es-sez{padding:14px 0;border-bottom:1px solid var(--paper-edge)}
.es-sez:last-of-type{border-bottom:none}
.es-lab{
  font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;
}
.es-lab2{margin-top:14px}
/* ---- le tessere ----
   Tutte alte uguali (la griglia le stira) e con il contenuto incollato in
   ALTO: con descrizioni di due o tre righe, altrimenti, ogni tessera
   comincia a un'altezza diversa e la fila sembra storta. */
.es-tessere{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-items:stretch}
.es-tessere.due{grid-template-columns:repeat(2,1fr)}
.es-tess{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:2px;text-align:left;height:100%;
  border:1.5px solid var(--line);border-radius:14px;padding:11px 12px 12px;background:#fff;
  cursor:pointer;transition:.14s;font-family:var(--sans);
}
.es-tess:hover{border-color:var(--ai)}
.es-tess.on{
  border-color:var(--shu);background:linear-gradient(180deg,#fff,#FDF4F2);
  box-shadow:0 0 0 3px rgba(192,57,43,.1);
}
.es-tess-jp{font-family:var(--serif);font-size:15px;font-weight:800;color:var(--shu);line-height:1.2}
.es-tess b{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.3}
.es-tess i{font-style:normal;font-size:11.5px;color:var(--ink-soft);line-height:1.45}
/* ---- la barra del via ---- */
.es-piede{
  position:sticky;bottom:0;z-index:2;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px calc(var(--pp) * -1) calc(-34px);
  padding:11px var(--pp);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
}
.es-riep{flex:1;min-width:120px;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.es-riep b{color:var(--ink)}
.es-riep.ok{color:var(--ink-soft)}
.es-via{
  flex:none;border:none;border-radius:12px;padding:12px 24px;
  font-family:var(--sans);font-size:14px;font-weight:800;
  background:var(--shu);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.es-via:hover:not(:disabled){background:var(--shu-deep)}
.es-via:disabled{background:#DCD8D0;color:#9A968D;cursor:default}
.es-via svg{width:16px;height:16px}
/* i kana: il conto accanto al segmentato hiragana/katakana */
.kn-conto{margin-left:auto;font-size:12px;color:var(--ink-soft)}
@media (max-width:560px){
  .es-tessere{grid-template-columns:1fr}
  .es-hero-t b{font-size:17px}
  .es-seg button{flex:none}
  .es-piede{margin-bottom:calc(-24px)}
  .es-via{flex:1;justify-content:center}
}

/* ============================================================
   IL PANNELLO NON SCORRE PIÙ: SCORRE IL SUO CORPO
   ------------------------------------------------------------
   Serviva per due cose insieme: la × appesa FUORI dall'angolo in alto a
   destra (dentro a un riquadro che ritaglia non poteva sporgere) e le
   testate che devono restare ferme mentre si scorre.
   Adesso il pannello è un contenitore fermo — bordo, sfondo, angoli — e
   dentro c'è un corpo che scorre e che si porta il ritaglio tondo (così la
   barra non squadra gli angoli).
   ============================================================ */
.game-panel{
  padding:0; overflow:visible;
  display:flex; flex-direction:column;
  max-height:calc(100dvh - 52px);
}
.game-corpo{
  flex:1 1 auto; min-height:0;
  overflow:auto; overscroll-behavior:contain;
  padding:0 var(--pp) 34px;
  /* niente ritaglio qui: a fare gli angoli tondi è il bordo del pannello,
     e un ritaglio su chi scorre taglierebbe i popup che devono sporgere
     (le impostazioni del foglio di scrittura ci sono cascate). */
}
/* la × appesa fuori, all'angolo */
.game-panel > .game-close{
  position:absolute; top:-15px; right:-15px; z-index:41;
  margin:0; width:36px; height:36px;
  background:#fff; color:var(--ink-soft);
  border:1px solid var(--line); box-shadow:0 6px 18px -6px rgba(0,0,0,.35);
}
.game-panel > .game-close:hover{background:var(--shu);color:#fff;border-color:var(--shu)}
/* Sul telefono la × resta FUORI come sul computer, ma appesa SOPRA invece
   che di lato: ai fianchi ci sono solo i 14px di margine dell'overlay, e una
   × che sporge di 15 finirebbe mezzo pixel oltre il bordo dello schermo;
   sopra invece di spazio ce n'è 26 (il padding dell'overlay), quindi ci sta
   comoda. Prima la mandavo dentro al pannello, ed era l'unica scheda che sul
   telefono si chiudeva in un modo diverso da tutte le altre. */
@media (max-width:560px){
  .game-panel > .game-close{top:-14px; right:-2px}
}

/* ---- la testata degli esercizi resta ferma ---- */
.es-testa{
  position:sticky; top:0; z-index:5;
  margin:0 calc(var(--pp) * -1) 14px;
  padding:16px var(--pp) 11px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.es-hero{align-items:flex-start}
.es-hero-t{flex:1;min-width:0}
/* il «via» sta qui, in alto a destra, e ci resta */
.es-avvio{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.es-avvio .es-riep{flex:none;max-width:230px;text-align:right}
@media (max-width:700px){
  .es-hero{flex-wrap:wrap}
  .es-avvio{width:100%;margin-left:0;justify-content:space-between}
  .es-avvio .es-riep{text-align:left;max-width:none;flex:1}
}

/* ---- tutti gli esercizi larghi uguale ----
   Parole e Scrittura stavano a 720, i kana a 860 e le coniugazioni a 420
   (si portavano dietro .auth-panel): cambiando esercizio la finestra
   saltava di larghezza a ogni tocco. */
#kana .kana-panel, #coniuga .coniuga-panel{max-width:720px}
#kana .kana-panel{--pp:24px}
/* Il respiro sopra al titolo (--pht) stava sul corpo, e una testata
   appiccicata a «top:0» si ferma sotto a quel respiro: restava una fessura
   di 26px in cui si vedeva passare il contenuto. Lo spazio adesso ce l'ha
   la testata, dentro sé stessa. */
/* ---- il posto del pulsante del dizionario ----
   「辞書」 sta fisso in fondo al centro e passa SOPRA ai pannelli (è voluto:
   serve soprattutto mentre scrivi lì dentro). Ma stando sopra copriva
   l'ultima riga di ogni pannello — l'ultima pastiglia, l'ultimo pulsante —
   e per leggerla bisognava indovinare che sotto c'era ancora qualcosa.
   Qui sotto il pannello si tiene libera esattamente la fascia che il
   pulsante occupa, così il fondo del contenuto gli resta sempre sopra.
   In un pannello corto è aria in più che nessuno nota; in uno lungo è la
   differenza tra vedere l'ultima riga e non vederla. */
:root{ --qk-fab:74px; }   /* pulsante + il suo margine dal fondo */
.game-panel > .game-corpo{padding:0 var(--pp) calc(34px + var(--qk-fab))}
@media print{ :root{ --qk-fab:0px; } }
/* Gli appunti ritagliano dal corpo in giù (vedi #notes-body): il pannello
   resta libero, così la × sporge dall'angolo come in tutte le altre schede. */

/* ---- la lavagnetta della prova dei kana ----
   Larga quanto ci sta, mai più di 260: su un telefono deve entrare nello
   schermo insieme ai suoi pulsanti. La misura vera della tela (quella fitta
   quanto i pixel dello schermo) la mette wrInitCanvas. */
#kn-cv{
  width:min(260px, 100%);aspect-ratio:1;background:#fff;
  border:1px solid var(--line);border-radius:12px;touch-action:none;display:block;
}
.kn-q-mano{max-width:100%;overflow:hidden}
.kn-mano-az{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:10px}

/* ---- la prova dei kana: risposta grande e pulsanti in ordine ----
   La risposta giusta è la cosa che devi guardare, non una riga di testo come
   le altre: qui si legge da lontano. E i pulsanti stanno su due file — i tre
   attrezzi insieme, Verifica (poi Avanti) su una riga sua, che su telefono
   in fila con gli altri andava a capo e si sfilacciava tutto. */
.kn-q-esito{font-size:19px;font-weight:700;margin-top:14px}
.kn-q-esito b{font-family:var(--serif);font-size:30px;font-weight:800;vertical-align:-3px;margin-left:4px}
.kn-mano-via{display:flex;justify-content:center;gap:8px;margin-top:9px}
.kn-mano-via .pri{
  border:none;border-radius:12px;padding:11px 30px;background:var(--shu);color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:800;cursor:pointer;
}
.kn-mano-via button:not(.pri){
  border:1px solid var(--line);border-radius:12px;padding:11px 18px;background:#fff;
  font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;
}
#kn-cv{cursor:crosshair}
@media (max-width:560px){
  .kn-mano-az{gap:6px}
  .kn-mano-az button{font-size:11.5px;padding:7px 10px}
}
@media (max-width:560px){ .kn-lungo{display:none} }