/* Quaderno dei kanji — scrittura a mano e tavolozza */
/* ---- Scrittura a mano ---- */
.write-panel{max-width:880px}
.wr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wr-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wr-tb{border:1.5px solid var(--line);background:#fff;border-radius:9px;
  padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
.wr-tb.on{border-color:var(--shu);background:#FBF1EF;color:var(--shu)}
.wr-chk{font-size:11.5px;color:var(--ink-soft);gap:4px}
.wr-list{margin-top:14px}
.wr-row{margin-bottom:20px}
.wr-tr{font-size:13.5px;margin-bottom:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wr-tr>b{color:var(--shu);font-family:var(--serif)}
.wr-sol{border:none;background:none;color:var(--ai);font-size:11.5px;cursor:pointer;text-decoration:underline;padding:0}
.wr-solt{font-family:var(--serif);font-size:15px}
.wr-rowbtns{margin-left:auto;display:flex;gap:4px}
.wr-rowbtns button{border:1px solid var(--line);background:#fff;border-radius:7px;
  font-size:12px;padding:3px 9px;cursor:pointer;color:var(--ink-soft)}
.wr-rowbtns button:hover{border-color:var(--shu);color:var(--shu)}
.wr-cv{
  width:100%;height:150px;display:block;touch-action:none;
  border:1px solid var(--line);border-radius:10px;cursor:crosshair;
  background:
    linear-gradient(to bottom, transparent calc(50% - 1px), #EBD6D1 calc(50% - 1px),
      #EBD6D1 calc(50% + 1px), transparent calc(50% + 1px)),
    #fff;
}

/* ---- Scrittura: selezione dei kanji dall'indice ---- */
.idx-k.sel{border-color:var(--shu);background:#FBF1EF;color:var(--shu);font-weight:700}
.idx-k.got.sel{color:var(--shu)}
.wr-hint{font-size:12.5px;color:var(--ink-soft)}
.wr-hint b{color:var(--ai);font-family:var(--serif)}
.wr-kbig{font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink)}
.wr-copyhint{font-size:11.5px;color:var(--ink-soft)}

/* ---- Gioco: risposta scritta a mano ---- */
.g-writechk{margin:10px 0 2px;font-size:13px;flex-wrap:wrap}
.g-writechk .g-count-note{font-size:11.5px}
.g-wrans{margin-top:14px}
.g-wrtools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.g-wrtools .g-submit{margin-left:auto}
.g-selfgrade{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.g-selfgrade .g-opt{flex:1;min-width:150px}
.g-feedback.sol{background:#F6F1EE;color:var(--ink);border:1px solid var(--line)}

/* ---- Scrittura: scheda stile foglio esercizi (modello + caselle) ---- */
.wr-body{display:flex;gap:10px;align-items:stretch}
.wr-ref{
  flex:none;width:112px;height:112px;display:grid;place-items:center;
  font-family:var(--serif);font-size:68px;line-height:1;color:var(--model);
  border:2px solid var(--grid-strong);border-radius:6px;
  background:
    linear-gradient(var(--grid),var(--grid)) center/100% 1px no-repeat,
    linear-gradient(90deg,var(--grid),var(--grid)) center/1px 100% no-repeat,
    #fff;
}
.wr-ref.hid{font-size:40px;color:var(--line)}
.wr-cv.wr-grid{
  flex:1;height:112px;border:2px solid var(--grid-strong);border-radius:6px;
  background:
    repeating-linear-gradient(to right,
      transparent 0 55.5px, var(--grid) 55.5px 56.5px,
      transparent 56.5px 111px, var(--grid-strong) 111px 112px),
    linear-gradient(var(--grid),var(--grid)) 0 center/100% 1px no-repeat,
    #fff;
}
.wr-ordchk{font-size:11.5px;color:var(--ink-soft);gap:4px}
.wr-strokes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ---- Scrittura: celle singole + header fissi + impostazioni foglio ---- */
.wr-cells{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;align-content:flex-start}
.wr-cell{
  display:block;touch-action:none;cursor:crosshair;
  border:1.5px solid var(--grid-strong);border-radius:6px;
  background:
    linear-gradient(var(--grid),var(--grid)) center/100% 1px no-repeat,
    linear-gradient(90deg,var(--grid),var(--grid)) center/1px 100% no-repeat,
    #fff;
}
.wr-hintrow{font-size:12.5px;color:var(--ink-soft);margin:2px 0 8px}
.wr-hintrow b{color:var(--ai);font-family:var(--serif)}

/* Le testate appiccicose ("Inizia", gli strumenti del foglio) sono definite
   una volta sola in 40-gioco.css insieme a quelle di tutti i pannelli. */

/* rotellina impostazioni del foglio di scrittura */
.wr-set-wrap{position:relative;display:inline-block;margin-left:10px;vertical-align:middle}
.wr-set{
  position:absolute;left:0;top:calc(100% + 6px);z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;white-space:nowrap;
}
.wr-set label{display:flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:12.5px;font-weight:400;color:var(--ink-soft)}
.wr-set input[type=number]{width:64px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-family:var(--sans)}
.wr-set input[type=range]{width:120px}
#wr-size-val{font-size:11.5px;color:var(--ink);min-width:44px}

/* correzione del riconoscimento: "l'avevo scritta giusta" */
.g-fixgrade{
  display:inline-block;margin-left:10px;border:1.5px solid currentColor;background:transparent;
  color:inherit;border-radius:8px;font-size:12px;font-weight:700;padding:4px 10px;cursor:pointer;
}

/* ---- Canvas del gioco: pulito, senza la vecchia linea-guida in mezzo ---- */
.wr-cv{background:#fff}

/* ---- Tavolozza flottante penna/gomma (trascinabile) ---- */
.wrpal{
  position:fixed;right:16px;top:42%;z-index:var(--z-float);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.3);padding:7px;
}
.wrpal .wr-tb{width:42px;height:42px;padding:0;font-size:17px;display:grid;place-items:center}
.wrpal-drag{
  border:none;background:none;color:var(--ink-soft);cursor:grab;
  font-size:15px;line-height:1;padding:3px 0;touch-action:none;width:100%;
}
.wrpal-drag:active{cursor:grabbing}
.wrpal-touch{
  display:grid;place-items:center;width:42px;height:38px;
  border:1.5px solid var(--line);border-radius:9px;cursor:pointer;font-size:16px;
}
.wrpal-touch input{display:none}
.wrpal-touch:has(input:checked){border-color:var(--shu);background:#FBF1EF}

/* ---- Timbro (判子) di selezione del kanji: cala dall'alto ---- */
.wrstamp{
  position:fixed;top:14px;left:50%;z-index:var(--z-toast);pointer-events:none;
  display:grid;place-items:center;gap:0;
  width:74px;height:74px;border:3px solid var(--shu);border-radius:10px;
  background:#FFF8F5;color:var(--shu);font-family:var(--serif);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transform:translate(-50%,-110px) rotate(-5deg);opacity:0;
  transition:transform .22s cubic-bezier(.2,1.4,.4,1), opacity .18s ease;
}
.wrstamp.show{transform:translate(-50%,0) rotate(-5deg);opacity:1}
.wrstamp.off{border-color:var(--ink-soft);color:var(--ink-soft);background:#F6F5F2}
.wrstamp-k{font-size:36px;font-weight:700;line-height:1}
.wrstamp-t{font-size:12px;font-weight:700;letter-spacing:2px}

/* ---- Mancino: celle a sinistra, modello a destra ---- */
#write.lefty .wr-body{flex-direction:row-reverse}
.wr-gear{width:34px;height:34px;padding:0;display:inline-grid;place-items:center;vertical-align:middle}

/* ---- tasto "indietro" nei popup delle impostazioni ---- */
.g-back{
  display:inline-block;border:none;background:none;cursor:pointer;
  color:var(--ai);font-size:12.5px;font-weight:700;padding:0 0 8px;
}
.g-back:hover{text-decoration:underline}

/* ---- Scrittura: cestino sotto il modello, livello nelle letture ---- */
.wr-refcol{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.wr-clearbtn{
  border:1px solid var(--line);background:#fff;border-radius:7px;
  font-size:12px;padding:3px 12px;cursor:pointer;color:var(--ink-soft);
}
.wr-clearbtn:hover{border-color:var(--shu);color:var(--shu)}
.wr-lv{color:var(--shu);font-family:var(--serif)}

/* spazio d'appoggio per il polso: anche l'ultima riga si porta in alto.
   Il riquadro tratteggiato spiega a cosa serve tutto quel vuoto. */
#write .wr-list{padding-bottom:24px}
#write .wr-list::after{
  content:'空\A Spazio d\'appoggio — serve solo a far scorrere le righe più in alto, così scrivi sempre con il polso appoggiato comodo. Qui non si scrive.';
  white-space:pre-line;
  display:grid;place-items:center;height:65vh;margin-top:18px;
  border:2px dashed var(--line);border-radius:14px;
  color:var(--ink-soft);font-size:13px;line-height:1.6;
  text-align:center;padding:0 36px;
}

/* ---- tessera-timbro: usata per la selezione in Scrittura (.sel) e per i
   kanji posseduti nell'Indice (.stamped) — inchiostrata di rosso, kanji
   bianco, pressata dall'alto ---- */
.idx-k.sel,.idx-k.stamped{
  background:var(--shu);border-color:var(--shu-deep);color:#fff;
  font-weight:600;
  transform:rotate(-3deg) scale(.96);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.22);
  animation:hanko-press .22s cubic-bezier(.2,1.4,.4,1);
  animation-fill-mode:backwards;   /* col ritardo a cascata, prima parte è invisibile */
}
.idx-k.got.sel{color:#fff}
.idx-k.sel:hover,.idx-k.stamped:hover{border-color:var(--shu-deep);background:var(--shu-deep);color:#fff}
@keyframes hanko-press{
  0%{transform:translateY(-10px) rotate(-3deg) scale(1.35);opacity:.35}
  100%{transform:translateY(0) rotate(-3deg) scale(.96);opacity:1}
}