:root{--bg: #f3f7f8;--text: #111;--muted: #7a7a7a;--line: #dfe6e8;--btn: #e9eef0;--btn2: #f6f8f9;--baseStroke: rgba(0, 0, 0, .18);--doneStroke: rgba(0, 0, 0, .35);--activeStroke: rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,Meiryo,sans-serif;overflow:hidden}#app{height:100%;display:flex;flex-direction:column}.hud{height:56px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px}.stars{font-size:28px;letter-spacing:4px;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.starsSparkle{animation:starsPop .42s ease-out}@keyframes starsPop{0%{transform:scale(1)}35%{transform:scale(1.12)}to{transform:scale(1)}}.star-spark{position:absolute;width:6px;height:6px;border-radius:999px;background:#000000d9;pointer-events:none;animation:starSparkFly .42s ease-out forwards}@keyframes starSparkFly{0%{transform:translate(0) scale(1);opacity:.95}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}.goal{font-size:28px;font-weight:700;-webkit-user-select:none;user-select:none}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 16px 18px;gap:12px}.topline{margin-top:6px}.title{font-size:30px;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}.stage{width:min(720px,92vw);height:min(520px,58vh);display:grid;place-items:center;padding-bottom:18px}.kanji-area{width:min(520px,84vw);height:min(360px,42vh);display:grid;place-items:center;overflow:hidden;border-radius:16px}.kanji-area svg{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden}.stroke-ui{display:flex;justify-content:center;align-items:center;min-height:52px;margin-top:6px}.stroke-buttons{display:flex;gap:14px;padding-bottom:4px}.stroke-btn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 18px #0000000f;font-size:18px;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.stroke-btn.is-done{background:#f5f7f8;color:#444}.stroke-btn.is-active{outline:3px solid rgba(0,0,0,.08)}.nav{display:flex;gap:18px;margin-top:4px;padding-top:6px}.btn{min-width:140px;height:64px;border-radius:18px;border:1px solid var(--line);background:var(--btn);font-size:22px;font-weight:700;cursor:pointer}.btn.primary{background:var(--btn2)}.btn:disabled{opacity:.5;cursor:not-allowed}.caption{margin:0;font-size:18px;color:#111;-webkit-user-select:none;user-select:none}.error{margin:0;font-size:14px;color:#b00020;min-height:20px}.teacher-overlay{display:none}.teacher-mode .teacher-overlay{display:block}#teacherToggle{padding:10px 16px;border-radius:999px;border:2px solid rgba(0,0,0,.65);background:#fffffff5;font-weight:800;cursor:pointer;box-shadow:0 10px 30px #00000014}#teacherToggle,#plusBtn{display:none}.teacher-mode #teacherToggle,.teacher-mode #plusBtn{display:inline-flex}#strokeButtons,#navButtons{display:none}.teacher-mode #strokeButtons,.teacher-mode #navButtons{display:flex}.kanjiSvg{overflow:visible}.stroke-base{fill:none;stroke:var(--baseStroke);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.stroke-base.done{stroke:var(--doneStroke)}.stroke-active{fill:none;stroke:var(--activeStroke);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.9}.stroke-hit{fill:none;stroke:#0000;stroke-width:26;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke;vector-effect:non-scaling-stroke}.trace-line{fill:none;stroke:#000000e6;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.tracePulse{animation:tracePulse .22s ease-out}@keyframes tracePulse{0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}60%{transform:scale(1.01);filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}to{transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}}.stroke-shadow{fill:none;stroke:#0000002e;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:blur(1.2px);pointer-events:none;transition:opacity .26s ease-out}.stroke-ui,.nav{display:none}.teacher-mode .stroke-ui,.teacher-mode .nav{display:flex}.teacher-mode .stroke-ui{display:block}.stroke-shadow.goal{stroke:#00000047;stroke-width:14;filter:blur(1.4px);transition:stroke .2s ease-out,stroke-width .2s ease-out}.stroke-shadow.pop{animation:shadowPop .26s ease-out}@keyframes shadowPop{0%{opacity:0}60%{opacity:1}to{opacity:1}}.fx-layer,.char-layer{pointer-events:none}.char{filter:drop-shadow(1px 0px 0 rgba(255,255,255,.95)) drop-shadow(-1px 0px 0 rgba(255,255,255,.95)) drop-shadow(0px 1px 0 rgba(255,255,255,.95)) drop-shadow(0px -1px 0 rgba(255,255,255,.95)) drop-shadow(0 6px 14px rgba(0,0,0,.25))}.fx-spark{fill:#000c}.kanjiSvg.failFlash{filter:drop-shadow(0 0 0 rgba(255,0,0,0))}.kanjiSvg.failFlash .stroke-active{stroke:#ff787873}.kanjiSvg.failFlash{filter:drop-shadow(0 2px 6px rgba(0,0,0,.1))}.traceShake{animation:traceShake .35s ease-out}@keyframes traceShake{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-1px)}to{transform:translate(0)}}.traceShake{animation:traceShake .22s ease-out}.hanamaru{pointer-events:none}.hanamaru circle{stroke:#ff7a00;stroke-width:6;fill:none;animation:hanamaru-pulse 1.2s infinite}.hanamaru text{font-size:18px;font-weight:700;fill:#ff7a00}.fx-clear-maru{pointer-events:none}.fx-clear-maru circle{stroke:#ff3c3cf2;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(1px 0px 0 rgba(255,255,255,.85)) drop-shadow(-1px 0px 0 rgba(255,255,255,.85)) drop-shadow(0px 1px 0 rgba(255,255,255,.85)) drop-shadow(0px -1px 0 rgba(255,255,255,.85))}.final-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0000002e;z-index:9999}.final-card{width:min(420px,92vw);background:#fff;border-radius:18px;padding:18px 16px;box-shadow:0 12px 28px #0000002e;text-align:center}.final-title{font-size:20px;font-weight:800;margin-bottom:12px}.final-actions{display:flex;gap:12px;justify-content:center}.stroke-hint-layer{pointer-events:none}.stroke-hint-dot{fill:#000000e0;stroke:#fffffff2;stroke-width:3;opacity:.7}.stroke-hint-num{font-size:18px;font-weight:800;fill:#000000eb;paint-order:stroke;stroke:#fffffff2;stroke-width:4;stroke-linejoin:round;opacity:.85}.stroke-shadow{opacity:0;transition:opacity .18s ease-out}.stroke-shadow.on{opacity:1}.stroke-shadow.pop{animation:roadPop .22s ease-out}.fx-combo-text{font-weight:800;font-size:10px;opacity:.95;-webkit-user-select:none;user-select:none}#stars{display:flex;gap:4px;align-items:center}.star{font-size:18px;line-height:1;color:#bbb;transform:scale(.9);transition:color .2s ease,transform .2s ease;-webkit-user-select:none;user-select:none}.star.filled{color:#f6c343}.star.pop{animation:star-pop .26s ease-out}@keyframes star-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes roadPop{0%{opacity:0}60%{opacity:1}to{opacity:1}}.final-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 6px}.final-stat{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:10px;background:#0000000f;font-size:12px}.final-stat b{font-size:13px}.final-hist{margin:8px 0 4px;padding:8px;border-radius:12px;background:#0000000d;font-size:12px}.final-hist-title{font-weight:800;margin-bottom:6px}.final-hist-row{opacity:.9}.final-stat.pb b{display:flex;gap:6px;align-items:baseline}.pb-new{font-style:normal;font-weight:900;font-size:11px;transform:translateY(-1px);animation:pb-pop .32s ease-out}@keyframes pb-pop{0%{transform:translateY(-1px) scale(.7);opacity:.4}60%{transform:translateY(-1px) scale(1.15);opacity:1}to{transform:translateY(-1px) scale(1);opacity:1}}.rank-row{display:flex;justify-content:center;margin:6px 0 2px}.rank-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.04em;transform:translateZ(0)}.rank-S{background:#ffd70040}.rank-A{background:#64b4ff38}.rank-B{background:#78dca033}.rank-C{background:#00000014}.title-row{display:flex;justify-content:center;margin:4px 0 6px}.title-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.02em;background:#0000000f}.comment-row{display:flex;justify-content:center;margin:4px 0 10px;text-align:center}.comment-text{font-weight:800;font-size:12px;padding:6px 10px;border-radius:12px;background:#0000000d}.final-sub{margin:6px 0 10px;font-size:12px;text-align:center}.tb-new{display:inline-block;margin-left:6px;font-weight:900;font-size:11px;padding:2px 6px;border-radius:999px;background:#00000014}.tb-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;z-index:10000}.tb-card{width:min(520px,92vw);max-height:min(560px,80vh);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px #00000040;display:flex;flex-direction:column}.tb-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:900;border-bottom:1px solid rgba(0,0,0,.08)}.tb-close{border:none;background:transparent;font-size:18px;cursor:pointer}.tb-body{padding:12px 14px;overflow:auto}.tb-row{padding:10px;border-radius:12px;background:#0000000a;margin-bottom:8px}.tb-title{font-weight:900;font-size:13px}.tb-rank{opacity:.75;font-weight:800}.tb-meta{margin-top:4px;font-size:12px;opacity:.8}.tb-empty{padding:12px;opacity:.85}.tb-foot{padding:12px 14px;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:flex-end}.tb-progress{margin-bottom:10px}.tb-progress-text{font-size:12px;opacity:.75;margin-left:6px}.tb-bar{height:10px;border-radius:999px;background:#00000014;overflow:hidden}.tb-bar-fill{height:100%;border-radius:999px;background:#00000038}.tb-progress-sub{margin-top:6px;font-size:12px;opacity:.8}.tb-rarity{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:900;background:#00000014;opacity:.9}.tb-r-SR{background:#0000002e}.tb-r-R{background:#0000001f}.tb-r-N{background:#00000014}.tb-row.locked{opacity:.62;filter:grayscale(.25)}.tb-row.locked .tb-title{letter-spacing:.08em}.tb-sort{display:flex;gap:8px;margin:8px 0 12px;flex-wrap:wrap}.tb-sort-btn{border:none;cursor:pointer;padding:6px 10px;border-radius:999px;background:#0000000f;font-weight:900;font-size:12px}.tb-sort-btn.active{background:#00000029}.tb-search{display:flex;gap:8px;align-items:center;margin:0 0 12px}.tb-search-input{flex:1;padding:8px 10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#ffffffe6;font-size:12px}.tb-search-clear{width:34px;height:34px;border-radius:12px;border:none;background:#0000000f;font-weight:900;cursor:pointer}.screen.titlebook .tb-head-actions .btn{min-width:0}.screen.titlebook .btn.small{height:44px;padding:0 14px;font-size:16px;border-radius:14px}.tb-section{margin-top:10px}.screen.titlebook .tb-section,.screen.titlebook .tb-locked,.screen.titlebook .tb-admin{background:#fffffffa}.tb-section-title{font-weight:1000;opacity:.78;margin:4px 0 8px}.tb-filter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.tb-filter-btn{border:none;cursor:pointer;padding:8px 10px;border-radius:999px;background:#0000000f;font-weight:1000;font-size:12px;display:inline-flex;align-items:center;gap:6px}.tb-filter-btn.active{background:#3875ff24;box-shadow:0 12px 26px #3875ff1a}.tb-count{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:#00000014;font-size:11px;font-weight:1000;opacity:.85}.tb-locked{margin-top:10px;border-radius:16px;border:1px solid rgba(18,38,63,.08);background:#f6f8fb8c;overflow:hidden}.tb-locked-sum{list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding:12px 14px;font-weight:1000;display:flex;align-items:center;justify-content:space-between;gap:10px;opacity:.9}.tb-locked-sum::-webkit-details-marker{display:none}.tb-locked-hint{font-weight:900;opacity:.65;font-size:12px}.tb-body-locked{padding-top:0}.tb-admin{margin-top:12px;border-radius:16px;border:1px dashed rgba(18,38,63,.18);background:#ffffff8c;overflow:hidden}.tb-admin-sum{list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding:12px 14px;font-weight:1000;opacity:.78}.tb-admin-sum::-webkit-details-marker{display:none}.tb-admin-body{padding:12px 14px 14px}.tb-admin-note{font-size:12px;font-weight:900;opacity:.72;margin-bottom:10px}.tb-admin-actions{display:flex;gap:10px;flex-wrap:wrap}.tb-now{margin:10px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.tb-now-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(18,38,63,.12);background:#ffffffb3;font-weight:1000}.tb-now-sub{font-weight:900;opacity:.7;font-size:12px}.tb-goals{margin:8px 0 12px}.tb-top{margin:8px 0 12px;display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:start}.screen.titlebook .tb-top{border:none;background:transparent;padding:0}.tb-top-left,.tb-top-right{border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#ffffffe0;padding:12px}.tb-top-right .tb-filter{margin-top:0}.tb-top-right .tb-sort,.tb-top-right .tb-search{margin-top:10px}.tb-goal-grid{display:grid;grid-template-columns:1fr;gap:10px}.tb-goal-card{border-radius:18px;border:1px solid rgba(18,38,63,.1);background:#ffffffc7;box-shadow:0 10px 24px #12263f14;padding:12px;min-height:78px;width:100%;text-align:left;cursor:pointer}.tb-goal-card:hover{box-shadow:0 14px 30px #12263f1f}.tb-goal-card:active{transform:translateY(1px)}.tb-goal-card:focus{outline:none;box-shadow:0 0 0 3px #3875ff40}.tb-goal-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.tb-goal-title{font-weight:1000}.tb-goal-rlabel{font-weight:1000;font-size:11px;opacity:.72;padding:4px 8px;border-radius:999px;background:#0000000f;white-space:nowrap}.tb-goal-hint{margin-top:8px;font-size:12px;font-weight:900;opacity:.62;line-height:1.35}.tb-goal-remain{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(56,117,255,.18);background:#3875ff1a;font-weight:1000;font-size:12px;width:fit-content}.tb-goal-progress{margin-top:10px}.tb-goal-bar{height:10px;border-radius:999px;background:#12263f14;overflow:hidden}.tb-goal-bar-fill{height:100%;width:0%;border-radius:999px;background:#3875ff61;transition:width .25s ease}.tb-goal-bar-text{margin-top:6px;font-size:12px;font-weight:1000;opacity:.72}.tb-goal-bar-text{display:none}@media (hover: hover) and (pointer: fine){.tb-goal-card:hover .tb-goal-bar-text{display:block}}@media (max-width: 720px){.tb-top,.tb-goal-grid{grid-template-columns:1fr}}.btn.danger{background:#dc00001a;font-weight:900}.btn.danger.ghost{background:#dc00000f}#area,#area *{touch-action:none;-ms-touch-action:none;user-select:none;-webkit-user-select:none}html,body{overscroll-behavior:none}.final-card{max-height:min(78vh,620px);overflow:auto}.final-top{margin:6px 0 8px}.final-actions{flex-wrap:wrap}.final-actions .btn{min-width:140px;height:54px;font-size:18px}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:9999}:root{--bg: #f6f8fb;--card: rgba(255,255,255,.92);--ink: #1c2430;--muted: rgba(28,36,48,.62);--shadow: 0 10px 30px rgba(18, 38, 63, .1);--radius: 18px}body{background:radial-gradient(1200px 600px at 50% 0%,#ffffff 0%,var(--bg) 55%,#f1f5fb 100%);color:var(--ink)}.screen{padding:20px}.card{background:var(--card);border:1px solid rgba(18,38,63,.08);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.screen.titlebook .card{background:#fffffffa;-webkit-backdrop-filter:none;backdrop-filter:none}.btn{border-radius:16px;border:1px solid rgba(18,38,63,.1);box-shadow:0 6px 16px #12263f14;transition:transform .08s ease,box-shadow .12s ease}.btn:active{transform:translateY(1px);box-shadow:0 3px 10px #12263f1a}.btn.primary{border:none;box-shadow:0 10px 20px #3875ff38}.hud{position:sticky;top:0;z-index:10;background:#f6f8fbb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(18,38,63,.06);border-radius:0 0 16px 16px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.hud-right{display:flex;align-items:center;gap:10px}.mode{color:var(--muted);font-weight:700}.iconBtn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(18,38,63,.1);background:#ffffffe6;box-shadow:0 6px 16px #12263f1a;display:flex;align-items:center;justify-content:center;cursor:pointer}.iconBtn:active{transform:translateY(1px)}.hudActionBtn{height:44px;min-width:96px;padding:0 12px;border-radius:14px;border:1px solid rgba(18,38,63,.1);background:#ffffffeb;box-shadow:0 6px 16px #12263f1a;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.hudActionBtn:active{transform:translateY(1px)}.hudActionIcon{font-size:18px;line-height:1}.hudActionText{font-weight:900;font-size:14px;line-height:1;letter-spacing:.02em}@media (max-height: 820px){.hudActionBtn{min-width:90px;padding:0 10px}.hudActionText{font-size:13px}}.main{max-width:980px;margin:0 auto}.stage{border-radius:22px;box-shadow:0 14px 40px #12263f14}.stars{display:flex;gap:6px;align-items:center}.star{font-size:18px;opacity:.28}.star.filled{opacity:1;filter:drop-shadow(0 8px 16px rgba(255,184,0,.28))}.final-stats{border-radius:18px;overflow:hidden;border:1px solid rgba(18,38,63,.08)}.final-stat span{color:var(--muted);font-weight:700}.rank-badge{border-radius:999px;padding:8px 14px;box-shadow:0 10px 20px #12263f1a}.resultBoard{max-width:980px;margin:0 auto;background:#ffffffeb;border:1px solid rgba(18,38,63,.08);border-radius:24px;box-shadow:0 16px 48px #12263f1f;padding:18px 18px 16px}.resultHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.resultTitleMain{font-size:28px;font-weight:900;letter-spacing:.02em}.resultTitleSub{margin-top:6px;font-size:14px}.resultRankBadge{width:110px;height:110px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(18,38,63,.1);box-shadow:0 12px 26px #12263f1f;background:#f6f8fbcc}.resultRankLabel{font-size:12px;font-weight:800;opacity:.7}.resultRankValue{font-size:56px;font-weight:1000;line-height:1}.commentBubble{margin-top:10px;background:#f6f8fbe6;border:1px solid rgba(18,38,63,.08);border-radius:18px;padding:12px 14px;font-weight:800}.muted{opacity:.68}.resultHighlights{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.highlightCard{border-radius:20px;border:1px solid rgba(18,38,63,.1);background:#ffffffe6;box-shadow:0 12px 28px #12263f1a;padding:14px}.highlightCard.isPB{box-shadow:0 14px 30px #3875ff2e}.hLabel{font-size:13px;font-weight:800;opacity:.65}.hValue{margin-top:6px;font-size:30px;font-weight:1000;display:flex;align-items:baseline;gap:10px}.pbChip{font-size:12px;font-weight:1000;padding:4px 10px;border-radius:999px;background:#3875ff1f;border:1px solid rgba(56,117,255,.25)}.resultStatsGrid{margin-top:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.statPill{border-radius:16px;border:1px solid rgba(18,38,63,.08);background:#f6f8fbcc;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}.statPill span{opacity:.7;font-weight:800}.statPill b{font-weight:1000}.resultHistory{margin-top:14px;border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#fffc;padding:12px 14px}.resultHistoryTitle{font-weight:1000;opacity:.75;margin-bottom:8px}.resultHistoryList .final-hist-row{padding:6px 0;border-top:1px dashed rgba(18,38,63,.12)}.resultHistoryList .final-hist-row:first-child{border-top:none}.resultActions{margin-top:14px}.btn.big{width:100%;height:62px;font-size:20px;border-radius:18px}.resultActionsSub{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}@media (max-width: 720px){.resultHighlights{grid-template-columns:1fr}.resultStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.resultRankBadge{width:96px;height:96px}.resultRankValue{font-size:50px}}.progressBoard{max-width:980px;margin:0 auto;background:#ffffffeb;border:1px solid rgba(18,38,63,.08);border-radius:24px;box-shadow:0 16px 48px #12263f1a;padding:18px}.progressHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.progressTitle{font-size:28px;font-weight:1000;letter-spacing:.01em}.progressMeta{margin-top:6px;opacity:.72;font-weight:700}.progressHeadActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.progressBarWrap{margin-top:14px}.progressBar{height:12px;border-radius:999px;background:#12263f14;overflow:hidden}.progressBarFill{height:100%;width:0%;border-radius:999px;background:#3875ff59;box-shadow:0 10px 20px #3875ff33;transition:width .25s ease}.progressBarText{margin-top:8px;font-weight:900;opacity:.78}.progressTabs{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}.tab{border-radius:999px;padding:10px 14px;border:1px solid rgba(18,38,63,.1);background:#f6f8fbe6;font-weight:900}.tab.active{border:none;background:#3875ff24;box-shadow:0 12px 26px #3875ff29}.tileGrid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}.tile{position:relative;border-radius:16px;border:1px solid rgba(18,38,63,.1);background:#ffffffeb;box-shadow:0 10px 24px #12263f14;overflow:hidden}.tile.cleared{box-shadow:0 12px 26px #3875ff24}.tileMain{width:100%;height:64px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.tileChar{font-size:22px;font-weight:1000}.tileBadge{position:absolute;top:6px;left:8px;font-weight:1000;opacity:.8}.tileBook{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:10px;border:1px solid rgba(18,38,63,.1);background:#f6f8fbb3;cursor:pointer;opacity:.55;transform:scale(.98);transition:opacity .12s ease,transform .12s ease,background .12s ease}.tile:hover .tileBook,.tile:focus-within .tileBook{opacity:1;transform:scale(1);background:#f6f8fbf2}@media (hover: none) and (pointer: coarse){.tileBook{opacity:.72}}.emptyNote{opacity:.7;padding:10px 0;font-weight:800}.dexBoard{max-width:980px;margin:0 auto;background:#ffffffeb;border:1px solid rgba(18,38,63,.08);border-radius:24px;box-shadow:0 16px 48px #12263f1a;padding:18px}.dexHead{display:flex;justify-content:space-between;align-items:flex-start}.dexTitle{font-size:28px;font-weight:1000}.dexMeta{margin-top:6px;opacity:.72;font-weight:700}.dexCard{margin-top:14px;border-radius:22px;border:1px solid rgba(18,38,63,.1);background:#f6f8fbd9;padding:18px;box-shadow:0 12px 30px #12263f14}.dexChar{font-size:92px;font-weight:1000;text-align:center;letter-spacing:.02em}.dexStatus{text-align:center;margin-top:6px;font-weight:900;opacity:.75}.dexActions{margin-top:14px}.dexNav{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.dexIndex{font-weight:1000;opacity:.75}@media (max-width: 720px){.tileGrid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}.tileMain{height:58px}.tileChar{font-size:20px}.dexChar{font-size:78px}}.dexTools{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}.dexInfo{margin-top:14px;border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#ffffffc7;padding:12px 14px}.dexInfoRow{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:6px 0;border-top:1px dashed rgba(18,38,63,.12)}.dexInfoRow:first-child{border-top:none}.dexInfoLabel{font-weight:1000;opacity:.7}.dexInfoValue{font-weight:900}.dexTags{margin:10px 0 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.dexTag{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:1px solid rgba(18,38,63,.18);background:#ffffffd9;font-weight:900;font-size:13px;letter-spacing:.02em;box-shadow:0 6px 18px #12263f0f}.dexActions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:14px}.dexActions .bigBtn{min-width:min(520px,100%)}.dexNotice{margin-top:12px;border-radius:18px;border:1px dashed rgba(18,38,63,.18);background:#ffffffb8;padding:12px 14px}.dexNoticeTitle{font-weight:1000;opacity:.8;margin-bottom:6px}.dexNoticeList{margin:0;padding-left:18px;font-weight:800;line-height:1.6;opacity:.88}.dexNoticeList li{margin:4px 0}.dexExample{margin-top:12px;border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#f6f8fbd9;padding:12px 14px}.dexExampleLabel{font-weight:1000;opacity:.75;margin-bottom:6px}.dexExampleText{font-weight:800;line-height:1.6}.modeFade{animation:modeFade .22s ease-out}@keyframes modeFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}html,body{height:100%}body{margin:0;overflow:hidden}#app{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}.screen{min-height:100%}.resultBoard,.progressBoard,.dexBoard,.card{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.reviewBoard{max-width:980px;margin:0 auto;background:#ffffffeb;border:1px solid rgba(18,38,63,.08);border-radius:24px;box-shadow:0 16px 48px #12263f1a;padding:18px}.reviewHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.reviewTitle{font-size:28px;font-weight:1000}.reviewMeta{margin-top:6px;opacity:.72;font-weight:700}.reviewHeadActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.reviewCard{margin-top:14px;border-radius:22px;border:1px solid rgba(18,38,63,.1);background:#f6f8fbd9;padding:18px;box-shadow:0 12px 30px #12263f14}.reviewSection{margin-top:14px}.reviewLabel{font-weight:1000;opacity:.75;margin-bottom:8px}.reviewChips{display:flex;gap:10px;flex-wrap:wrap}.chipBtn{border-radius:999px;padding:10px 14px;border:1px solid rgba(18,38,63,.1);background:#ffffffe6;font-weight:1000}.chipBtn.active{border:none;background:#3875ff24;box-shadow:0 12px 26px #3875ff29}.reviewToggle{display:flex;gap:10px;align-items:center;font-weight:900;opacity:.85}.reviewActions{margin-top:16px}.reviewNote{margin-top:10px}.reviewSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sumBox{border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#ffffffc7;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}.sumBox span{opacity:.7;font-weight:900}.sumBox b{font-weight:1000}.reviewList .reviewRow{padding:8px 0;border-top:1px dashed rgba(18,38,63,.12)}.reviewList .reviewRow:first-child{border-top:none}@media (max-width: 720px){.reviewSummary{grid-template-columns:1fr}}.reviewSummaryCard{margin-top:14px;border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#ffffffc7;padding:12px 14px}.reviewSummaryTitle{font-weight:1000;opacity:.78;margin-bottom:8px}.reviewSummaryList{display:flex;flex-direction:column;gap:10px}.reviewRowLine{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px dashed rgba(18,38,63,.12)}.reviewRowLine:first-child{border-top:none;padding-top:0}.reviewRowMain{font-weight:900}.reviewRowSub{margin-top:4px;font-weight:800}.reviewRowTag{font-size:12px;font-weight:1000;padding:6px 10px;border-radius:999px;background:#3875ff1a;border:1px solid rgba(56,117,255,.18);white-space:nowrap}.master-mode .stroke-active{opacity:0!important}.master-mode .stroke-hint-dot,.master-mode .stroke-hint-num,.master-mode .stroke-ui,.master-mode .nav{display:none!important}.masterFailMark{font-size:34px;font-weight:1000;fill:#ff3c3cf2;stroke:#ffffffd9;stroke-width:2px;paint-order:stroke}.kanjiSvg.masterFailFlash{filter:drop-shadow(0 0 18px rgba(255,60,60,.45))}.kanjiSvg.masterFailShake{animation:masterShake .22s ease-out}@keyframes masterShake{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-1px)}to{transform:translate(0)}}.dexMasterBox{margin-top:12px;border-radius:18px;border:1px solid rgba(18,38,63,.08);background:#ffffffc7;padding:12px 14px}.dexMasterHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.dexMasterTitle{font-weight:1000;opacity:.8}.dexMasterBadge{font-weight:1000;padding:6px 10px;border-radius:999px;border:1px solid rgba(18,38,63,.1);background:#f6f8fbd9}.dexMasterBadge.ok{border:1px solid rgba(56,117,255,.25);background:#3875ff1f}.dexMasterStats{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.dexMasterStat{display:flex;justify-content:space-between;align-items:center;border-radius:14px;border:1px solid rgba(18,38,63,.08);background:#f6f8fbd9;padding:8px 10px}.dexMasterStat span{opacity:.7;font-weight:900}.dexMasterStat b{font-weight:1000}.dexMasterMist{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.dexMistPill{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(18,38,63,.1);background:#ffffffe6;font-weight:900}.dexMistPill span{opacity:.75}.dexMistPill b{font-weight:1000}#practiceMaster.btn.big{border:1px solid rgba(18,38,63,.12);background:#f6f8fbe6}#practiceMaster.btn.big:active{transform:translateY(1px)}.title-popup{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);left:auto;bottom:auto;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s ease}.title-popup.show{opacity:1}.title-popup-inner{background:linear-gradient(180deg,#fff,#f6f8fb);border-radius:24px;padding:14px 16px;min-width:auto;max-width:min(320px,calc(100vw - 24px));box-shadow:0 20px 60px #0000002e;text-align:left;transform:translateY(-6px) scale(.98);transition:transform .25s ease}.title-popup.show .title-popup-inner{transform:translateY(0) scale(1)}.title-popup-head{font-weight:900;font-size:14px;margin-bottom:6px}.title-popup-title{font-weight:1000;font-size:18px;color:#2b6cff}.titlebook-glow{position:fixed;top:calc(env(safe-area-inset-top,0px) + 64px);right:calc(env(safe-area-inset-right,0px) + 10px);z-index:9999;pointer-events:none;opacity:0;transform:translateY(-6px) scale(.96);transition:opacity .18s ease,transform .22s ease}.titlebook-glow.show{opacity:1;transform:translateY(0) scale(1)}.titlebook-glow-inner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:#ffffffeb;border:1px solid rgba(56,117,255,.22);box-shadow:0 14px 34px #3875ff2e,0 8px 22px #12263f1f}.titlebook-glow-icon{font-size:20px;line-height:1;filter:drop-shadow(0 10px 18px rgba(56,117,255,.24));animation:tbGlowPop .42s ease-out}.titlebook-glow-text{font-weight:1000;font-size:12px;opacity:.78;white-space:nowrap}@keyframes tbGlowPop{0%{transform:scale(.75);opacity:.55}60%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:1}}.homeCard{width:min(720px,92vw);margin:0 auto;padding:18px}.homeHero{text-align:center;padding:6px 8px 10px}.homeTitle{font-size:34px;font-weight:900;letter-spacing:.04em}.homeSubtitle{margin-top:4px;font-weight:800}.homeKinds{margin-top:6px;font-weight:700}.homePrimary{display:grid;place-items:center;margin:12px 0 10px}.homePlayMeta{margin-top:8px;font-weight:800;font-size:12px;text-align:center;opacity:.75}.homeRangeActions{margin-top:10px;display:flex;justify-content:flex-end}.btn.small{min-width:0;height:44px;padding:0 14px;font-size:16px;border-radius:14px}.btn.ghost{background:#ffffffb3;border:1px solid rgba(18,38,63,.12);box-shadow:0 6px 16px #12263f0f}.bigBtn{width:min(420px,92%);padding:14px 18px;font-size:18px;border-radius:18px}.homeSubActions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.homeFooter{margin-top:12px}.saveBtn{background:#ffffffd1;border:1px solid rgba(18,38,63,.12)}.saveToast{margin-top:8px;font-weight:1000;font-size:14px;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease;-webkit-user-select:none;user-select:none}.saveToast.show{opacity:.95;transform:translateY(0)}.saveToastGame{position:sticky;top:62px;z-index:20;width:fit-content;margin:6px auto 0;padding:8px 12px;border-radius:999px;background:#ffffffe0;border:1px solid rgba(18,38,63,.1);box-shadow:0 10px 26px #12263f1a}.homeRange{margin-top:6px;padding:12px;border:1px solid rgba(18,38,63,.08);border-radius:18px;background:#ffffff8c}.homeRangeRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}.homeRangeName{font-weight:900}.homeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}@media (max-height: 900px){.screen.home{padding:12px}.homeCard{padding:14px}.homeHero{padding:2px 6px 6px}.homeTitle{font-size:30px}.homeSubtitle{margin-top:2px;font-size:14px}.homeKinds{margin-top:4px;font-size:12px}.homePrimary{margin:8px 0 6px;gap:6px}.bigBtn{padding:11px 16px;font-size:17px;border-radius:16px}.homeSubActions{gap:8px}.saveToast{margin-top:4px;font-size:13px}.homeRange{margin-top:6px;padding:10px;border-radius:16px}.homeRangeRow{margin-top:4px;gap:8px}.screen.home .homeRange label,.screen.home .homeRange [style*="gap:10px"]{gap:8px!important}.btn.small{height:40px;border-radius:14px}.screen.home select.btn{height:40px!important;font-size:15px!important}.homeGrid{margin-top:10px;gap:8px}.homeGrid .btn{height:56px;font-size:20px}.homeFooter{margin-top:10px;font-size:13px}}.homeFooter{text-align:center;margin-top:12px;font-weight:700}.masterToggle{padding:10px 14px;border-radius:999px;border:1px solid rgba(18,38,63,.18);background:#ffffffd1;font-weight:900;letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none}.masterToggle[aria-pressed=true]{border-color:#12263f59;box-shadow:0 10px 22px #12263f1a;transform:translateY(-1px)}.screen.game .nav{display:flex;justify-content:center;gap:12px}.screen.game .nav .btn{min-width:110px}.screen.range .rangeCard{width:min(980px,94vw);margin:0 auto}.screen.range .rangeHeader{display:grid;gap:10px;margin-bottom:12px}.screen.range .rangeTitle{font-weight:900;letter-spacing:.03em}.screen.range .rangeNow{padding:10px 12px;border-radius:18px;border:1px solid rgba(18,38,63,.1);background:#fff9}.screen.range .rangeNowValue{margin-top:2px;font-size:18px;font-weight:900}.screen.range .rangeList{display:grid;gap:12px}.screen.range .rangeGroup{border-radius:18px;border:1px solid rgba(18,38,63,.1);background:#ffffff8c;overflow:hidden}.screen.range .rangeGroupHead{list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.screen.range .rangeGroupHead::-webkit-details-marker{display:none}.screen.range .rangeGroupTitle{font-weight:900;font-size:18px}.screen.range .rangeGroupHint{font-weight:1000;font-size:16px;opacity:.55;transition:transform .12s ease,opacity .12s ease}.screen.range details[open] .rangeGroupHint{transform:rotate(90deg);opacity:.8}.screen.range .rangeGrid{padding:12px 12px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.screen.range .rangeRadio{position:absolute;opacity:0;pointer-events:none}.screen.range .rangeItem{position:relative;display:block}.screen.range .rangeChip{display:grid;place-items:center;text-align:center;padding:14px 12px;border-radius:16px;border:1px solid rgba(18,38,63,.12);background:#ffffffc7;font-weight:900;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .06s ease,box-shadow .12s ease}.screen.range .rangeItem:hover .rangeChip{transform:translateY(-1px)}.screen.range .rangeRadio:checked+.rangeChip{border-color:#3875ff73;background:#3875ff1a;box-shadow:0 14px 28px #3875ff29;transform:translateY(-1px)}.screen.range .rangeFooter{margin-top:12px}.screen.range .rangeFooter{display:flex;justify-content:flex-end}.screen.range #back.btn{min-width:160px;height:56px;font-size:20px}@media (max-height: 900px){.screen.range .rangeCard{padding:14px}.screen.range .rangeGroupHead{padding:12px}.screen.range .rangeGrid{padding:10px 10px 12px;gap:8px}.screen.range .rangeChip{padding:12px 10px}}.stars{gap:4px}.star{font-size:18px;line-height:1;opacity:.22;transform:translateY(1px) scale(.96);filter:none}.star.filled{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 10px 16px rgba(18,38,63,.1))}.star.pop{animation:paw-pop .26s ease-out}@keyframes paw-pop{0%{transform:translateY(2px) scale(.7);opacity:.4}60%{transform:translateY(-1px) scale(1.18);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}html.bg-app,body.bg-app,html.bg-home,body.bg-home{background-image:url(/assets/bg/home-bg.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;background-color:#eef6f8}#app{background:transparent!important}html.bg-app #app,body.bg-app #app,html.bg-home #app,body.bg-home #app{position:relative;z-index:1}body.bg-app:before,body.bg-home:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:radial-gradient(700px 360px at 30% 16%,#ffffff8c,#fff0 70%),radial-gradient(700px 360px at 74% 22%,#ffffff73,#fff0 72%);filter:blur(.4px);opacity:.85}body.bg-app:after,body.bg-home:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.55;background:radial-gradient(circle 7px at 14% 22%,rgba(18,38,63,.06) 0 70%,transparent 72%),radial-gradient(circle 3px at 12.6% 19.9%,rgba(18,38,63,.06) 0 70%,transparent 72%),radial-gradient(circle 3px at 14.2% 18.8%,rgba(18,38,63,.06) 0 70%,transparent 72%),radial-gradient(circle 3px at 15.7% 19.9%,rgba(18,38,63,.06) 0 70%,transparent 72%),radial-gradient(circle 7px at 22% 38%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 3px at 20.6% 35.9%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 3px at 22.2% 34.8%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 3px at 23.7% 35.9%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 7px at 34% 54%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 3px at 32.6% 51.9%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 3px at 34.2% 50.8%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 3px at 35.7% 51.9%,rgba(18,38,63,.05) 0 70%,transparent 72%),radial-gradient(circle 7px at 66% 26%,rgba(18,38,63,.045) 0 70%,transparent 72%),radial-gradient(circle 3px at 64.6% 23.9%,rgba(18,38,63,.045) 0 70%,transparent 72%),radial-gradient(circle 3px at 66.2% 22.8%,rgba(18,38,63,.045) 0 70%,transparent 72%),radial-gradient(circle 3px at 67.7% 23.9%,rgba(18,38,63,.045) 0 70%,transparent 72%),radial-gradient(circle 7px at 74% 42%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 3px at 72.6% 39.9%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 3px at 74.2% 38.8%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 3px at 75.7% 39.9%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 7px at 60% 74%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 3px at 58.6% 71.9%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 3px at 60.2% 70.8%,rgba(18,38,63,.04) 0 70%,transparent 72%),radial-gradient(circle 3px at 61.7% 71.9%,rgba(18,38,63,.04) 0 70%,transparent 72%)}