.char-modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:rgba(15,16,13,.58);backdrop-filter:blur(5px);animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}.char-modal{position:relative;width:min(400px,100%);padding:var(--s6);border:1px solid var(--ink);border-radius:var(--r-m);background:var(--bg2);box-shadow:var(--shadow-l);animation:modalPop .2s var(--ease)}
@keyframes modalPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.char-modal-close{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:var(--r-s);background:transparent;color:var(--ink2);cursor:pointer}.char-modal-close:hover{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.char-modal-char{margin-bottom:4px;font-family:var(--font-jp);font-size:96px;line-height:1.1;text-align:center}.char-modal-romaji{margin-bottom:var(--s4);color:var(--hira);font-size:22px;font-weight:750;text-align:center}.char-modal-romaji.kata-rm{color:var(--kata)}.char-modal-stroke{position:relative;text-align:center;margin-bottom:var(--s3)}.char-modal-stroke svg{border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface)}.char-modal-listen{display:flex;justify-content:center}.char-modal-listen button{min-height:40px;padding:8px 16px;border:1px solid var(--ink);border-radius:var(--r-s);background:var(--warn);color:#fff;font-size:12px;font-weight:700;cursor:pointer}