/* Kana lessons: one card, one line per gojūon row, each kana under its vowel.
 * Mirrors the dashboard widgets: surface card, paper-2 tiles, dashed rules. */
.kana-chart{display:grid;gap:10px;margin-top:20px;padding:24px;background:var(--color-surface);border-radius:var(--radius-surface);min-width:0}
.kana-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kana-chart-yoon .kana-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.kana-cell{display:flex;flex-direction:column;min-width:0;border-radius:14px;background:var(--color-paper-2);overflow:hidden}
.kana-cell.is-empty{min-height:100%;background:var(--color-transparent);border:1px dashed var(--color-rule)}
.kana-cell-sound{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:96px;padding:14px 6px 10px;border:0;border-radius:0;background:var(--color-transparent);color:var(--color-ink);cursor:pointer;transition:background var(--dur-short,.15s) var(--ease-out,ease),color var(--dur-short,.15s) var(--ease-out,ease)}
.kana-cell-symbol{font:400 38px/1.15 var(--font-japanese);white-space:nowrap}
.kana-cell-pair .kana-cell-symbol{font-size:32px}
.kana-cell-sound strong{font-size:12px;font-weight:500;color:var(--color-muted)}
.kana-cell-sound svg{position:absolute;top:10px;right:10px;width:14px;height:14px;color:var(--color-muted);opacity:0;transition:opacity var(--dur-short,.15s) var(--ease-out,ease)}
.kana-cell-meaning{padding:0 6px 8px;font-size:11px;line-height:1.3;text-align:center;color:var(--color-muted)}
.kana-cell-write{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;border:0;border-top:1px dashed var(--color-rule);border-radius:0;background:var(--color-transparent);color:var(--color-muted);cursor:pointer;transition:background var(--dur-short,.15s) var(--ease-out,ease),color var(--dur-short,.15s) var(--ease-out,ease)}
.kana-cell-write svg{width:16px;height:16px}
.kana-cell-sound:hover,.kana-cell-write:hover{background:var(--color-accent-soft);color:var(--color-accent)}
.kana-cell-sound:hover strong{color:var(--color-accent)}
.kana-cell-sound:hover svg,.kana-cell-sound:focus-visible svg{opacity:1;color:var(--color-accent)}
.kana-cell-sound:focus-visible,.kana-cell-write:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}
@media(hover:none){.kana-cell-sound svg{opacity:.6}}
@media(max-width:767px){
 .kana-chart{gap:8px;padding:16px}
 .kana-row{gap:8px}
 .kana-cell{border-radius:12px}
 .kana-cell-sound{min-height:76px;padding:10px 2px 8px;gap:2px}
 .kana-cell-symbol{font-size:28px}
 .kana-cell-pair .kana-cell-symbol{font-size:20px}
 .kana-chart-yoon .kana-cell-pair .kana-cell-symbol{font-size:28px}
 .kana-cell-sound strong{font-size:11px}
 .kana-cell-sound svg{top:6px;right:6px;width:11px;height:11px}
 .kana-cell-write{min-height:38px}
}
@media(max-width:479px){.kana-chart{gap:6px;padding:10px}.kana-row{gap:6px}}
@media(max-width:359px){.kana-cell-symbol{font-size:24px}.kana-cell-pair .kana-cell-symbol{font-size:17px}.kana-cell-sound svg{display:none}}