/* Quaderno dei kanji — intestazione, barre e menu */
  /* ---- Il blocco in alto: testata + suggerimento + ricerca + tab ----
     Un elemento solo, con un fondo suo, appiccicato in cima. Prima erano tre
     pezzi ognuno per conto suo e negli spazi fra l'uno e l'altro si vedevano
     passare le schede; adesso non ci sono più spazi da tappare.
     Scorrendo il suggerimento si ripiega: serve la prima volta, non sempre. */
  .topbar{
    position:sticky;top:0;z-index:90;
    background:var(--paper);
    padding:10px 0 0;margin:0 0 22px;
  }
  .topbar .hint{
    overflow:hidden;
    transition:max-height .22s ease, opacity .18s ease, margin .22s ease;
    max-height:80px;
  }
  .topbar.compatto .hint{max-height:0;opacity:0;margin-top:0;margin-bottom:0}
  /* ---- Intestazione ---- */
  header.app{
    /* sopra alla ricerca e ai tab (z-index:1): il menu a tendina del telefono
       apre da qui, e con lo stesso livello finiva DIETRO a quelli che vengono
       dopo nel blocco, spuntando solo a metà. */
    position:relative;z-index:3;
    display:grid;grid-template-columns:auto auto 1fr;align-items:center;
    column-gap:18px;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--line);border-radius:16px;
    box-shadow:0 12px 30px -18px rgba(0,0,0,.35);
    padding:10px 16px;margin-bottom:0;
  }
  .brand{grid-column:1}
  .brand .user-chip{margin:2px 0 0;font-size:12px}
  .brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:nowrap;min-width:0}
  .brand .jp{
    font-family:var(--serif);font-weight:800;font-size:27px;line-height:1;
    letter-spacing:.04em;position:relative;
  }
  .brand .jp .stamp{
    display:inline-block;margin-left:7px;transform:translateY(-3px);
    font-family:var(--serif);font-size:11px;font-weight:700;color:#fff;
    background:var(--shu);border-radius:4px;padding:2px 6px;line-height:1;
    box-shadow:0 1px 0 var(--shu-deep);
  }
  .brand .sub{
    font-family:var(--serif);font-size:12.5px;color:var(--ink-soft);
    letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;
  }
  .toolbar{grid-column:3;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
  .nav-burger{
    display:none;flex:none;width:42px;height:38px;border-radius:10px;
    border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:18px;
  }
  /* tutti i tasti della barra alla stessa ALTEZZA (le larghezze restano naturali) */
  .toolbar .btn,.nav-play,.nav-burger{height:38px;padding-top:0;padding-bottom:0}
  /* bottone impostazioni: icona ingranaggio */
  .seticon{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 11px}
  .seticon svg{flex:none}
  .seticon-txt{display:none}   /* su desktop basta l'icona; nel menu del telefono appare il testo */

  /* Gioca: su desktop/tablet accanto al titolo, sul telefono centrato nella barra */
  .nav-play{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    grid-column:2;justify-self:start;
    font-family:var(--serif);letter-spacing:.03em;padding:0 20px;border-radius:10px;
  }
  /* "+ Nuova scheda" flottante: stesso stile dei bottoni neri, su desktop e telefono */
  .fab{
    display:flex;position:fixed;right:18px;z-index:95;
    bottom:calc(20px + var(--qk-tastiera,0px));transition:bottom .18s ease;
    border:none;border-radius:12px;
    background:var(--ink);color:var(--paper);
    font-family:var(--sans);font-size:13.5px;font-weight:700;
    /* stessa sagoma dei tasti «annulla» dall'altra parte: 5+42+6+42+5 di largo,
       5+36+5 di alto, più il bordo. Un rettangolo, non una barra lunga. */
    width:102px;height:48px;padding:0;line-height:1;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    align-items:center;justify-content:center;gap:7px;
  }
  /* la croce a sinistra, le due parole incolonnate a destra */
  .fab .fab-p{font-size:19px;line-height:1;font-weight:400}
  .fab .fab-t{display:flex;flex-direction:column;align-items:flex-start;
    font-size:12px;line-height:1.16;text-align:left}
  .fab .fab-t i{font-style:normal}
  .fab:hover{background:#000}
  /* Annulla / ripristina: in basso a sinistra, di fronte al "+ Nuova scheda".
     Solo dove non c'è la tastiera — telefono e tablet: sul computer bastano
     Ctrl+Z e Ctrl+Y, e due tasti in più sarebbero solo ingombro. */
  /* Quando spunta la tastiera sale sopra di lei invece di finirci sotto:
     --qk-tastiera dice di quanto (vale 0 quando la tastiera non c'è). */
  .undo-bar{
    position:fixed;left:18px;bottom:calc(20px + var(--qk-tastiera,0px));
    transition:bottom .18s ease;z-index:95;gap:6px;
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    display:none!important;
  }
  @media (hover:none){ .undo-bar.on{display:flex!important} }
  body.qk-touch .undo-bar.on{display:flex!important}
  .undo-bar button{
    width:42px;height:38px;border-radius:9px;border:none;background:var(--paper);
    color:var(--ink);font-size:19px;line-height:1;cursor:pointer;
  }
  /* alto come il dizionario e come «+ Nuova scheda»: i tre pulsanti in fondo
     devono stare su una riga sola, allineati */
  @media (max-width:560px){ .undo-bar button{height:36px} }
  .undo-bar button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
  .undo-bar button:disabled{opacity:.32;cursor:default}
  /* ---- Avviso dopo una cancellazione: «Annulla» a portata di dito ---- */
  /* In ALTO, non in basso: in basso finiva in mezzo alle mani — sopra i
     pulsanti flottanti, sopra la tastiera del telefono — e copriva quello su
     cui si stava lavorando. In alto si legge e non intralcia. */
  .qk-toast{
    position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:var(--z-dialog);
    display:flex;align-items:center;gap:12px;max-width:min(480px,calc(100vw - 36px));
    background:var(--ink);color:var(--paper);border-radius:13px;
    padding:11px 12px 11px 16px;box-shadow:0 14px 34px rgba(0,0,0,.36);
    font-family:var(--sans);font-size:13.5px;
    animation:qt-in .22s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes qt-in{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
  .qk-toast .qt-txt{flex:1;min-width:0;line-height:1.35}
  .qk-toast .qt-btn{
    flex:none;border:1px solid rgba(255,255,255,.35);background:transparent;
    color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
    padding:7px 14px;border-radius:9px;cursor:pointer;
  }
  .qk-toast .qt-btn:hover{background:rgba(255,255,255,.16)}
  .qk-toast .qt-x{
    flex:none;border:none;background:none;color:rgba(255,255,255,.6);
    font-size:17px;line-height:1;padding:2px 4px;cursor:pointer;
  }
  .qk-toast .qt-x:hover{color:#fff}
  /* anche su telefono sta in alto: sotto c'è la tastiera, e in mezzo dava
     fastidio — era proprio il motivo del trasloco */
  @media (hover:none){ .qk-toast{top:10px} }
  body.qk-touch .qk-toast{top:10px}
  /* impostazioni: bottoni di backup */
  .set-backup{display:flex;gap:10px}
  .set-backup .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
  /* Fino ai 1000px (non solo sul telefono): il menu ripiegato dietro il
     bottone ☰ e la barra a due righe — su una finestra mezza larga i tasti
     in fila non ci stavano comunque. */
  @media (max-width:1000px){
    /* Sul telefono la barra va su due righe: sopra il marchio e il menu, sotto
       "Esercitati" a tutta larghezza. Prima il tasto doveva stare stretto in
       mezzo e la parola spariva; così c'è per intero, e le due righe sono
       allineate ai bordi come un blocco solo. */
    .topbar{padding-top:8px}
    /* Una riga sola: marchio, «Minigiochi» e il menu. Prima «Minigiochi»
       finiva a capo da solo su una seconda riga e mangiava spazio per niente
       — di posto in larghezza ce n'è. */
    header.app{
      grid-template-columns:1fr auto auto;grid-template-rows:auto;
      column-gap:9px;row-gap:0;padding:10px 12px;
    }
    .brand{min-width:0;grid-column:1;grid-row:1}
    /* anche sul telefono il marchio è completo: timbro 練習 e sottotitolo */
    .brand .jp{font-size:21px}
    .brand .jp .stamp{font-size:9px;padding:2px 5px;margin-left:5px;transform:translateY(-2px)}
    .brand .sub{font-size:10.5px}
    /* i tasti alti uguali su tutte e due le righe */
    .toolbar .btn,.nav-play,.nav-burger{height:42px}
    /* il tassello della griglia è il contenitore del menu, non il tasto */
    .ex-wrap{grid-column:1 / -1;grid-row:2;justify-self:stretch;width:100%}
    .nav-play{
      display:inline-flex;align-items:center;justify-content:center;gap:7px;
      grid-column:2;grid-row:1;justify-self:end;white-space:nowrap;
      padding:0 13px;font-size:14px;border-radius:11px;
    }
    .nav-burger{display:grid;place-items:center;justify-self:end;
      grid-column:3;grid-row:1;width:44px;font-size:17px}
    .seticon-txt{display:inline}
    .seticon svg{width:21px;height:21px}
    .toolbar{
      display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
      grid-column:1 / -1;grid-row:1;   /* area piena: il pannello copre tutta la barra */
      background:#fff;border:1px solid var(--line);border-radius:14px;
      box-shadow:0 16px 36px -14px rgba(0,0,0,.4);padding:10px;z-index:60;
      flex-direction:column;align-items:stretch;
    }
    .toolbar.open{display:flex}
    .toolbar .btn{width:100%}
    .toolbar .menu-wrap{width:100%}
    .toolbar .menu-wrap .btn{width:100%}
    /* sottomenu Stampe dentro il pannello: un blocco riquadrato, meno bianco vuoto */
    .toolbar .menu{position:static;box-shadow:none;border:none;width:auto;max-width:none;
      background:var(--paper);border:1px solid var(--line);border-radius:10px;
      margin:6px 0 2px;padding:5px}
    .toolbar .menu button{
      white-space:normal;line-height:1.35;font-size:13px;padding:9px 11px;border-radius:7px;
    }
    .toolbar .menu button+button{border-top:1px solid var(--line)}
    .toolbar .user-chip{margin:0;padding:4px 2px;text-align:center}
    .wrap{padding:18px 14px 96px}
  }
  /* schermi molto stretti: il tasto è già a tutta riga, basta togliere un filo
     al kanji perché "Esercitati" resti largo e leggibile */
  @media (max-width:400px){
    .nav-play{font-size:14px;letter-spacing:0}
    .brand .jp{font-size:19.5px}
  }
  /* Sotto ai 380 la riga sarebbe troppo piena: del pulsante resta 遊ぶ, che
     è quello che si riconosce, e la testata sta comunque su una riga. */
  @media (max-width:380px){
    .nav-play .play-txt{display:none}
    .nav-play{padding:0 14px;font-size:16px}
  }
  button{font-family:var(--sans);cursor:pointer;border:none;border-radius:9px}
  .btn{
    font-size:13.5px;font-weight:700;padding:9px 13px;
    background:var(--ink);color:var(--paper);
    transition:transform .08s ease,background .15s ease;
  }
  .btn:hover{background:#000}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}

  .hint{
    font-size:13px;color:var(--ink-soft);margin:14px 0 8px;
    display:flex;align-items:center;gap:8px;
  }
  .hint .dot{width:7px;height:7px;border-radius:50%;background:var(--shu);flex:none}

  /* ricerca + tab Kanji/Parole: fisse sotto la barra del menu */
  .tools-sticky{
    position:relative;z-index:1;
    /* il padding (non collassabile) dà l'aria sopra la ricerca anche quando il
       promemoria non c'è; il margin della .search-row collasserebbe e sparirebbe */
    padding:12px 0 14px;margin-bottom:0;
    box-shadow:0 14px 12px -14px rgba(0,0,0,.22);
  }
  /* ricerca e "nuova scheda" sulla stessa riga (solo dove c'è il mouse).
     Un po' d'aria sopra la ricerca, e meno sotto (prima erano 24px: 12 del
     campo + 12 della riga) così i tab Kanji/Parole le stanno più vicini. */
  .search-row{display:flex;align-items:stretch;gap:10px;margin:0 0 10px}
  .search-row .search-bar{flex:1;min-width:0;margin:0}
  /* alto come il campo di ricerca (12+12 di padding, 15px di testo, 1.5 di bordo) */
  .add-here{display:none;flex:none;height:47px;padding:0 20px;white-space:nowrap;border-radius:11px}
  @media (hover:hover) and (min-width:820px){
    .add-here{display:inline-flex;align-items:center}
    .fab{display:none}            /* il flottante lascia il posto a quello in riga */
  }
  .tools-sticky .search-bar{margin:0}
  .tools-sticky .view-tabs{margin:0}
  .search-bar{position:relative;margin:14px 0 26px}
  .search-bar input{
    width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
    padding:12px 14px 12px 42px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  }
  .search-bar input:focus{outline:none;border-color:var(--shu)}
  .search-bar::before{
    content:"";position:absolute;left:15px;top:50%;width:15px;height:15px;
    transform:translateY(-50%);opacity:.45;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320201C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  }
  .no-results{
    text-align:center;padding:32px;color:var(--ink-soft);font-size:14px;
    border:2px dashed var(--line);border-radius:12px;
  }


/* ---- gli avvisi di sistema: al centro in basso, sopra a TUTTO,
   dizionario compreso ---- */
.qk-toast{
  left:50%;right:auto;transform:translate(-50%,0);
  z-index:2147482800;
  animation:qt-in2 .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes qt-in2{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
/* ---- su telefono l'avviso è largo quanto lo schermo ----
   A metà larghezza «「今日」 spostata nella scheda di 日」» diventava una
   colonna alta mezzo schermo, proprio sopra a quello che si stava scrivendo.
   Largo, sono due righe. Va dopo il blocco qui sopra, che rimette il -50%:
   a parità di peso comanda l'ultimo che parla.
   L'ingresso si rifà senza il -50%: qui non c'è più niente da centrare, e
   con quello la fascia entrava di sbieco. */
@media (max-width:560px){
  .qk-toast{
    left:8px;right:8px;transform:none;max-width:none;
    animation:qt-in-largo .22s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes qt-in-largo{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
}