/* Shared optional handwriting surface; it never changes trainer layout. */
.ma-handwriting{position:fixed;top:calc(var(--ma-overlay-top,0px) + var(--ma-overlay-height,100dvh)*.5);left:calc(var(--ma-overlay-left,0px) + var(--ma-overlay-width,100vw)*.5);bottom:auto;right:auto;height:auto;margin:0;transform:translate(-50%,-50%);box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:min(92dvh,var(--ma-overlay-height,92dvh));padding:18px;border:1px solid var(--ma-border);border-radius:24px;background:var(--ma-surface-strong);background-color:var(--ma-app-bg);color:var(--ma-text-strong);box-shadow:0 20px 70px #0006;overflow:auto;}
.ma-handwriting::backdrop{background:#0009;}
.ma-handwriting>header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ma-handwriting h2{margin:0;font:750 1.2rem/1.3 var(--ma-font-display);}
.ma-handwriting-body{display:grid;justify-items:center;gap:12px;padding-top:12px;}
.ma-handwriting-characters,.ma-handwriting-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.ma-handwriting-characters .ma-button{font-family:var(--ma-font-jp);font-size:1.15rem;min-width:44px;padding:8px 12px;}
.ma-handwriting :is(button,a):focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:3px;}
.ma-handwriting [aria-pressed="true"]{background:var(--ma-text-strong);color:var(--ma-app-bg);}
.ma-handwriting-stage{width:min(280px,100%,42dvh);aspect-ratio:1;display:grid;place-items:center;}
.ma-handwriting-board{display:block;width:100%;height:100%;border:1px solid var(--ma-border);border-radius:16px;background:var(--ma-surface-inset);touch-action:none;user-select:none;cursor:crosshair;}
.ma-handwriting-grid{stroke:var(--ma-border);stroke-width:.5;stroke-dasharray:2 2;fill:none;}
.ma-handwriting-guide{fill:none;stroke:var(--ma-muted);stroke-opacity:.22;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.ma-handwriting-guide.is-next{stroke:var(--ma-writing);stroke-opacity:.5;}
.ma-handwriting-guide.is-done{stroke:var(--ma-reading);stroke-opacity:.65;}
.ma-handwriting-guide.is-hidden{stroke-opacity:0;}
.ma-handwriting-guide.is-demonstrated{stroke:var(--ma-text-strong);stroke-opacity:1;}
.ma-handwriting-ink{stroke:var(--ma-writing);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.ma-handwriting-start{fill:var(--ma-results);}
.ma-handwriting-status{min-height:2.6em;margin:0;text-align:center;font:.85rem/1.3 var(--ma-font-jp);max-width:42ch;}
.ma-handwriting-tip{font-size:.8rem;color:var(--ma-muted);line-height:1.4;margin:0;text-align:center;max-width:42ch;}
.ma-handwriting-source{font-size:.72rem;color:var(--ma-muted);padding:4px;}
.ma-pronunciation{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ma-pronunciation .ma-button{min-height:44px;padding:8px 12px;font-size:.8rem;}
@media(max-width:400px){.ma-handwriting{padding:12px;}.ma-handwriting-body{gap:8px;}.ma-handwriting-tools{gap:6px;}.ma-handwriting-tools .ma-button{font-size:.78rem;padding:8px 10px;}}