:root{--bg: #07060a;--panel: rgba(20, 16, 12, .82);--panel-solid: #14110d;--ink: #f0e6d2;--ink-dim: #b6a78e;--gold: #e2b256;--gold-soft: #f4d488;--red: #ff5a3c;--green: #6fe0a2;--line: rgba(226, 178, 86, .25);--radius: 14px;--font-jp: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer}kbd{display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:5px;background:#ffffff0a;font-family:monospace;font-size:.85em}.menu{min-height:100vh;min-height:100dvh;max-width:940px;margin:0 auto;padding:max(28px,var(--sa-t)) max(20px,var(--sa-r)) max(72px,var(--sa-b)) max(20px,var(--sa-l));color:var(--ink)}.menu-back{border:0;background:transparent;color:var(--ink-dim);font-size:14px;padding:6px 2px}.menu-back:hover{color:var(--gold)}.menu-head{text-align:center;margin:26px 0 34px}.menu-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 10px}.menu-title{font-size:clamp(26px,5vw,40px);margin:8px 0 6px}.menu-sub{color:var(--ink-dim);font-size:14px;margin:0 0 6px}.menu-stats{color:var(--gold);font-size:13px;font-weight:600;margin:0}.level-badge{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--gold);font-weight:700;font-size:18px}.level-badge.is-big{width:62px;height:62px;font-size:22px}.card-go{color:var(--gold);font-size:20px}.course-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.course-card{display:grid;gap:6px;justify-items:start;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);text-align:left}.course-card:hover{border-color:var(--gold)}.course-name{font-size:20px;font-weight:700}.course-stats{font-size:13px;color:var(--ink-dim)}.path{list-style:none;margin:0;padding:0;position:relative}.path:before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px dashed var(--line)}.path-step{position:relative;display:flex;align-items:center;min-height:132px}.path-step.is-left{justify-content:flex-start}.path-step.is-right{justify-content:flex-end}.path-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--line);border-radius:50%;background:var(--panel-solid);color:var(--ink-dim);font-weight:700;font-size:15px;z-index:1}.path-node.is-current{border-color:var(--gold);color:var(--gold-soft);box-shadow:0 0 0 6px #e2b2561f,0 0 22px #e2b25673}.lesson-card{width:min(100%,380px);display:grid;gap:6px;justify-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);text-align:left;position:relative}.lesson-card:hover{border-color:var(--gold)}.lesson-card .card-go{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.lesson-eyebrow{font-size:12px;font-weight:700;color:var(--gold)}.lesson-kanji{display:flex;align-items:baseline;gap:8px;font-family:var(--font-jp);font-size:clamp(20px,3.4vw,28px);padding-right:26px}.lesson-more{font-family:inherit;font-size:12px;color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:1px 7px}.lesson-gloss{font-size:12px;color:var(--ink-dim);padding-right:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.mode-kanji{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px}.mode-kanji-cell{display:grid;justify-items:center;gap:2px;min-width:62px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.mode-kanji-char{font-family:var(--font-jp);font-size:24px}.mode-kanji-en{font-size:10px;color:var(--ink-dim)}.mode-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.mode-card{display:grid;gap:8px;justify-items:start;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);text-align:left}.mode-card:hover{border-color:var(--gold)}.mode-name{font-size:22px;font-weight:700;color:var(--gold-soft)}.mode-desc{font-size:13px;color:var(--ink-dim);line-height:1.5}@media (max-width: 640px){.path:before{left:22px}.path-step,.path-step.is-right{justify-content:flex-end}.path-step{min-height:0;margin-bottom:14px}.path-node{left:22px;top:26px;transform:translate(-50%,-50%);width:34px;height:34px;font-size:13px}.lesson-card{width:calc(100% - 52px)}}.trace{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink)}.trace-top{display:flex;align-items:center;gap:14px;padding:max(14px,var(--sa-t)) max(18px,var(--sa-r)) 14px max(18px,var(--sa-l))}.trace-segs{flex:1;display:flex;gap:6px}.trace-seg{flex:1;height:8px;border-radius:99px;background:#ffffff14}.trace-seg.is-done{background:var(--gold)}.trace-seg.is-current{background:var(--gold-soft);box-shadow:0 0 12px #e2b25680}.trace-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 20px 24px;text-align:center}.trace-title{font-size:clamp(20px,3.6vw,30px);margin:10px 0 8px}.trace-sub{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-size:14px;color:var(--ink-dim)}.trace-word{font-family:var(--font-jp);font-size:22px;color:var(--ink)}.trace-blank{display:inline-block;min-width:.9em;margin:0 2px;color:transparent;border-bottom:2px solid var(--gold)}.trace-romaji{color:var(--gold);font-style:italic}.trace-pad{width:min(420px,82vw);aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);background:#ffffff08;touch-action:none;cursor:crosshair}.trace-pad.is-miss{border-color:var(--red)}.trace-grid{stroke:var(--line);stroke-width:.5;stroke-dasharray:3 3}.trace-ghost{fill:none;stroke:#f0e6d21c;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}.trace-done{fill:none;stroke:var(--gold);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}.trace-guide{fill:none;stroke:#f4d48880;stroke-width:4;stroke-linecap:round;stroke-dasharray:4 3.5}.trace-hint{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trace-draw 1.2s ease forwards}@keyframes trace-draw{to{stroke-dashoffset:0}}.trace-start{fill:var(--gold-soft);opacity:.9}.trace-num{fill:var(--ink-dim);font-size:7px;font-weight:700;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:2.2;stroke-linejoin:round}.trace-num.is-current{fill:var(--gold-soft)}.trace-num.is-done{fill:#b6a78e59}.trace-num{transition:opacity .14s ease}.trace-num.is-hidden{opacity:0}.trace-ink{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.trace-toggle{margin-top:12px;border:0;background:transparent;color:var(--ink-dim);font-size:13px;text-decoration:underline}.trace-toggle:hover{color:var(--gold)}.trace-credit{margin-top:18px;font-size:10px;color:#b6a78e8c}.trace-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px max(20px,var(--sa-r)) max(18px,var(--sa-b)) max(20px,var(--sa-l));border-top:1px solid var(--line);background:#14100c99}.trace-foot.is-ok{background:#183c2a80;border-top-color:var(--green)}.trace-foot.is-miss{background:#3c140e73;border-top-color:var(--red)}.trace-feedback{margin:0;font-size:15px}.trace-nice{color:var(--green);font-weight:700}.trace-warn{color:var(--red)}.trace-step{color:var(--ink-dim)}@media (max-width: 640px){.trace-sub{flex-direction:column;gap:2px}.trace-foot{flex-direction:column-reverse}.trace-foot .btn-primary{width:100%}}.rg-root{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.rg-arena{position:relative;flex:1;overflow:hidden;touch-action:none}.rg-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hud{display:flex;align-items:center;gap:18px;padding:max(12px,var(--sa-t)) max(18px,var(--sa-r)) 12px max(18px,var(--sa-l));background:linear-gradient(180deg,#07060af2,#07060a59);border-bottom:1px solid var(--line);z-index:5}.hud-group{display:flex;align-items:center;gap:8px;flex:0 0 auto}.hud-right{gap:14px;justify-content:flex-end;min-width:84px}.hud-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);background:#ffffff08;color:var(--ink-dim);border-radius:9px;font-size:14px;line-height:1;transition:color .15s ease,border-color .15s ease}.hud-btn:hover{color:var(--gold);border-color:var(--gold)}.hud-btn.is-muted{opacity:.5}.hud-progress{flex:1;display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto}.hud-segs{flex:1;display:flex;gap:4px}.hud-seg{flex:1;height:7px;border-radius:99px;background:#ffffff12;transition:background .25s ease,box-shadow .25s ease}.hud-seg.is-done{background:linear-gradient(180deg,var(--gold-soft),var(--gold));box-shadow:0 0 10px #e2b25673}.hud-round{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em}.hud-bar{flex:1;height:7px;background:#ffffff12;border-radius:99px;overflow:hidden}.hud-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:99px;transition:width .3s ease}.hud-combo{font-size:13px;font-weight:700;color:var(--gold);text-shadow:0 0 12px rgba(226,178,86,.5)}.hud-score{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.hud-unit{color:var(--ink-dim);font-weight:400}@media (max-width: 560px){.hud{gap:10px;padding:10px 12px}.hud-progress{gap:8px}.hud-round{font-size:11px}}.hud-life{color:var(--red);font-size:18px;filter:drop-shadow(0 0 4px var(--red))}.hud-life.is-dead{color:#4a3a35;filter:none}.prompt{position:absolute;top:5%;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;z-index:3;animation:prompt-in .25s ease both}@keyframes prompt-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}.prompt-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim);margin-bottom:4px}.prompt-text{display:block;font-size:clamp(26px,5vw,44px);font-weight:700;color:#fff;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.8),0 0 30px rgba(226,178,86,.3)}.prompt-romaji{display:block;margin-top:2px;font-size:clamp(14px,2.4vw,20px);font-weight:500;font-style:italic;letter-spacing:.04em;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.9)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:#07060ab8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;animation:overlay-in .3s ease both}.overlay.is-miss{background:#07060a6b;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;align-items:start;padding-top:12vh;animation:crash-flash .2s ease both}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes crash-flash{0%{opacity:0;background:#ff462899}to{opacity:1}}.intro{max-width:440px;width:100%;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;box-shadow:0 20px 60px #0009;max-height:86vh;overflow-y:auto}.intro-eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}.intro-title{margin:0 0 18px;font-size:28px;font-weight:700}.intro-kanji{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}.intro-kanji span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;background:#e2b25614;border:1px solid var(--line);font-family:var(--font-jp);font-size:20px;color:var(--gold-soft)}.intro-how{font-size:14px;line-height:1.7;color:var(--ink-dim);margin:0 0 24px}.miss{text-align:center;animation:shake .4s ease both}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.miss-wrong{font-size:15px;color:var(--ink-dim);margin:0 0 6px}.miss-wrong strong{font-family:var(--font-jp);color:var(--red);font-size:18px}.miss-right-jp{margin:0;font-family:var(--font-jp);font-size:clamp(34px,6vw,54px);font-weight:700;color:var(--green);text-shadow:0 0 28px rgba(111,224,162,.45)}.miss-right-read{margin:2px 0 0;font-size:15px;color:var(--ink)}.miss-romaji{color:var(--gold);font-style:italic}.intro-mode{font-size:13px;font-weight:600;color:var(--gold);margin:0 0 14px}.intro-note{color:var(--green)}.btn-primary{padding:12px 28px;border:none;border-radius:99px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1a1208;font-size:15px;font-weight:700;letter-spacing:.03em;box-shadow:0 6px 20px #e2b25659;transition:transform .12s ease,box-shadow .12s ease,opacity .12s}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 28px #e2b25673}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{padding:12px 24px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink-dim);font-size:14px;font-weight:600;transition:color .12s,border-color .12s}.btn-ghost:hover{color:var(--ink);border-color:var(--ink-dim)}.result{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:#07060ae0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:20;animation:overlay-in .4s ease both}.result-card{max-width:420px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;text-align:center;box-shadow:0 24px 70px #000000b3;max-height:86vh;overflow-y:auto}.result-eyebrow{margin:0 0 6px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.result-score{margin:0;font-size:64px;font-weight:800;line-height:1}.result-score span{font-size:28px;color:var(--ink-dim);font-weight:600}.result-pct{margin:6px 0 20px;color:var(--ink-dim);font-size:14px}.result-stats{display:flex;justify-content:center;gap:32px;margin-bottom:22px}.result-stats>div{display:flex;flex-direction:column;gap:2px}.result-stat-num{font-size:22px;font-weight:700;color:var(--ink)}.result-stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim)}.result-toggle{display:block;margin:0 auto 14px;background:transparent;border:none;color:var(--gold);font-size:13px;font-weight:600}.result-toggle:hover{color:var(--gold-soft)}.result-review{list-style:none;margin:0 0 22px;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px}.result-review li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.result-review li.is-miss{border-color:#ff5a3c59;background:#ff5a3c0f}.result-review li.is-ok{border-color:#6fe0a24d}.result-review-jp{font-family:var(--font-jp);font-size:18px;color:var(--ink)}.result-review-en{font-size:13px;color:var(--ink-dim)}.result-review-romaji{color:var(--gold);font-style:italic;margin-right:6px}.result-review-mark{font-weight:700}.result-review li.is-ok .result-review-mark{color:var(--green)}.result-review li.is-miss .result-review-mark{color:var(--red)}.result-actions{display:flex;gap:12px;justify-content:center}.rotate-prompt{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;gap:18px;padding:32px;text-align:center;background:#07060af0;color:var(--ink);animation:overlay-in .3s ease both}.rotate-icon{width:88px;height:88px;color:var(--gold);animation:rotate-nudge 2.6s ease-in-out infinite}.rotate-prompt p{margin:0;max-width:16em;font-size:clamp(16px,4.5vw,22px);font-weight:600}@keyframes rotate-nudge{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.debug-overlay{position:fixed;top:0;left:0;z-index:50;padding:6px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.55;color:#8dffce;background:#0000008c;border-bottom-right-radius:6px;pointer-events:none;white-space:nowrap}.debug-overlay .debug-gpu{max-width:60vw;overflow:hidden;text-overflow:ellipsis}:root{color-scheme:dark;--sa-t: env(safe-area-inset-top, 0px);--sa-r: env(safe-area-inset-right, 0px);--sa-b: env(safe-area-inset-bottom, 0px);--sa-l: env(safe-area-inset-left, 0px)}html,body,#root{min-height:100%;margin:0}body{background:#07060a;color:#f0e6d2;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}