:root{font-family:Noto Sans TC,PingFang HK,Microsoft JhengHei,system-ui,sans-serif;color:#24332e;background:#edf3ee;font-synthesis:none;--ink: #24332e;--teal: #2f7865;--teal-dark: #225d4e;--paper: #fffdf7;--amber: #e5a63b}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100%}body{min-height:100dvh;overflow-x:hidden}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #e5a63b;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.app-shell{min-height:100dvh;background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.85),transparent 28rem),radial-gradient(circle at 92% 92%,rgba(208,226,211,.8),transparent 30rem),#edf3ee;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}.topbar{max-width:1120px;margin:0 auto 20px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-seal{width:46px;height:46px;display:grid;place-items:center;border-radius:13px 13px 13px 4px;background:var(--teal);color:#fff;font:700 27px/1 "Noto Serif TC",PMingLiU,serif;box-shadow:0 6px 16px #2f78652e}.brand h1{font-size:20px;line-height:1.2;margin:0;letter-spacing:.06em}.brand p{margin:4px 0 0;font-size:11px;color:#738078;letter-spacing:.18em}.top-actions{display:flex;align-items:center;gap:10px}.total-progress{height:38px;display:flex;align-items:center;gap:5px;padding:0 13px;border:1px solid #d6e1d8;border-radius:999px;background:#fff9;font-size:13px;font-weight:700;color:#527063}.icon-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #d6e1d8;border-radius:50%;background:#ffffffbf;cursor:pointer}.game-layout{max-width:1120px;margin:auto;display:grid;grid-template-columns:330px minmax(0,1fr);gap:28px;align-items:start}.character-panel{background:#ffffffb8;border:1px solid rgba(208,220,209,.9);border-radius:24px;padding:25px;box-shadow:0 14px 40px #304c3b0f}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--teal);font-weight:800}.panel-heading h2{margin:5px 0 0;font-size:20px}.close-sheet{display:none}.level-group+.level-group{margin-top:21px}.level-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.level-title strong{font-size:13px}.level-title span{color:#8a958e;font-size:11px}.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.character-choice{position:relative;aspect-ratio:1;min-height:52px;border:1px solid #dde4dd;border-radius:13px;background:#fffefa;cursor:pointer;display:grid;place-items:center;transition:transform .16s,background .16s,border .16s}.character-choice:active{transform:scale(.95)}.character-choice>span{font:400 29px/1 "Noto Serif TC",PMingLiU,serif}.character-choice.selected{color:#fff;background:var(--teal);border-color:var(--teal);box-shadow:0 5px 12px #2f786533}.character-choice i{position:absolute;right:4px;top:4px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#e1f0e7;color:#2f7865}.character-choice.selected i{background:#fff}.source-note{margin:25px 0 0;padding-top:17px;border-top:1px solid #e2e7e0;color:#929b94;font-size:10px;line-height:1.7}.play-section{width:min(100%,640px,calc(100dvh - 260px));min-width:420px;justify-self:center}.play-topline{min-height:48px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.current-character{min-height:44px;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0 5px;cursor:pointer;color:#66766e}.current-character strong{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#fff;color:var(--ink);font:400 24px/1 "Noto Serif TC",PMingLiU,serif;box-shadow:0 2px 8px #1e32280f}.stroke-count{color:#87928b;font-size:13px}.stroke-count span{color:var(--teal);font-size:24px;font-weight:800}.canvas-frame{position:relative;width:100%;aspect-ratio:1;border-radius:24px;padding:12px;background:#fff;box-shadow:0 18px 50px #2d46371a,0 2px 4px #2d46370d}#game-canvas{display:block;width:100%;height:100%;border-radius:15px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.feedback{position:absolute;left:50%;bottom:24px;transform:translate(-50%);width:max-content;max-width:calc(100% - 50px);min-height:34px;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#ffffffed;box-shadow:0 4px 15px #28372d1a;color:#53665c;font-size:12px;pointer-events:none}.feedback-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#4a9d81}.feedback.is-warning{color:#a45548}.feedback.is-warning .feedback-dot{background:#d56f5e}.stroke-progress{height:30px;display:flex;align-items:center;justify-content:center;gap:7px}.stroke-progress span{width:7px;height:7px;border-radius:99px;background:#cdd7cf;transition:all .25s}.stroke-progress span.current{width:22px;background:#e6b456}.stroke-progress span.done{background:var(--teal)}.action-row{display:grid;grid-template-columns:1fr auto;gap:12px}.hint-button,.restart-button,.primary-button{min-height:54px;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:750}.hint-button{border:0;background:var(--teal);color:#fff;box-shadow:0 7px 18px #2f78652e}.hint-button.active{background:#d89b35}.hint-button:active,.primary-button:active{transform:translateY(1px)}.hint-button kbd{margin-left:8px;padding:2px 7px;border-radius:5px;background:#ffffff26;font:11px/1.5 inherit;opacity:.8}.restart-button{min-width:108px;border:1px solid #d6e0d8;background:#ffffffb3;color:#5f7167}.privacy-note{text-align:center;color:#89958d;font-size:10px;margin:11px 0 0}.loading-overlay{position:absolute;inset:12px;display:grid;place-items:center;border-radius:15px;background:#f6f8f1d1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#527063;font-size:14px;font-weight:700;letter-spacing:.08em}.error-card{width:min(320px,86%);padding:22px;text-align:center;border-radius:20px;background:#fffefa;box-shadow:0 14px 40px #28413229}.error-card p{margin:0 0 14px;color:#7b8780;font-size:13px;line-height:1.6}.catalogue-more{display:flex;margin:10px auto -4px;font-size:12px}.completion-overlay{position:absolute;inset:12px;display:grid;place-items:center;border-radius:15px;background:#f6f8f1c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .25s ease-out}.completion-card{width:min(310px,88%);padding:25px;text-align:center;border-radius:24px;background:#fffefa;box-shadow:0 18px 50px #2841322e}.completion-kicker{color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.18em}.completion-character{margin:10px auto 3px;width:84px;height:84px;display:grid;place-items:center;border-radius:20px;background:#edf4ed;font:400 62px/1 "Noto Serif TC",PMingLiU,serif}.completion-card h2{margin:12px 0 5px;font-size:25px}.completion-card p{margin:0 0 17px;color:#7b8780;font-size:12px;line-height:1.6}.primary-button{width:100%;border:0;background:var(--teal);color:#fff}.text-button{min-height:44px;margin:7px auto -8px;display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#718078;cursor:pointer}.sheet-backdrop{display:none}.parent-shell{max-width:720px;margin:auto;display:grid;gap:18px}.parent-card{background:#ffffffb8;border:1px solid rgba(208,220,209,.9);border-radius:24px;padding:25px;box-shadow:0 14px 40px #304c3b0f}.parent-card h2{margin:5px 0 0;font-size:20px}.parent-note{margin:8px 0 0;color:#7b8780;font-size:12px;line-height:1.6}.parent-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.parent-question{margin:22px 0 10px;text-align:center;font-size:21px;font-weight:750;letter-spacing:.04em}.parent-answer{height:58px;display:grid;place-items:center;border-radius:14px;border:1px solid #dde4dd;background:#fffefa;font-size:27px;font-weight:800;color:var(--ink)}.parent-answer.is-wrong{border-color:#d56f5e;color:#a45548}.parent-hint{margin:8px 0 0;text-align:center;color:#a45548;font-size:12px}.parent-keypad{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.parent-keypad button{min-height:54px;border:1px solid #dde4dd;border-radius:14px;background:#fffefa;font-size:21px;font-weight:750;cursor:pointer;display:grid;place-items:center}.parent-keypad button:active{transform:scale(.96)}.parent-keypad-ok{background:var(--teal)!important;border-color:var(--teal)!important;color:#fff}.set-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.set-row{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:8px 10px;border:1px solid #e6ebe5;border-radius:14px;background:#fffefa}.set-char{font:400 27px/1 "Noto Serif TC",PMingLiU,serif}.set-meta{color:#87928b;font-size:12px}.set-actions{display:flex;gap:6px}.set-actions button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #dde4dd;border-radius:10px;background:#fff;color:#5f7167;cursor:pointer}.set-actions button:disabled{opacity:.35;cursor:default}.parent-search{display:flex;align-items:center;gap:8px;padding:0 13px;height:44px;margin-bottom:16px;border:1px solid #dde4dd;border-radius:14px;background:#fffefa;color:#87928b}.parent-search input{flex:1 1 auto;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);min-width:0}.catalogue-group+.catalogue-group{margin-top:20px}.catalogue-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.catalogue-title strong{font-size:13px}.catalogue-title span{color:#8a958e;font-size:11px}.catalogue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:9px}.catalogue-choice{position:relative;aspect-ratio:1;min-height:62px;border:1px solid #dde4dd;border-radius:13px;background:#fffefa;cursor:pointer;display:grid;place-items:center;gap:2px}.catalogue-choice>span{font:400 26px/1 "Noto Serif TC",PMingLiU,serif}.catalogue-choice i{color:#98a29b;font-size:10px;font-style:normal}.catalogue-choice.selected{color:#fff;background:var(--teal);border-color:var(--teal)}.catalogue-choice.selected i{color:#ffffffbf}.parent-done{margin-top:4px}@keyframes fade-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media(max-width:1023px){.app-shell{padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.topbar{margin-bottom:6px}.brand-seal{width:40px;height:40px;border-radius:11px 11px 11px 4px;font-size:23px}.brand h1{font-size:17px}.brand p{font-size:9px;margin-top:2px}.total-progress{height:34px;padding:0 10px;font-size:11px}.icon-button{width:44px;height:44px}.game-layout{display:block}.play-section{width:min(100%,580px);min-width:0;margin:auto}.character-panel{display:none}.character-panel.is-open{display:block;position:fixed;z-index:30;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-height:min(78dvh,650px);overflow-y:auto;border-radius:26px;padding:24px;background:#f9fbf7;box-shadow:0 -10px 60px #1d342740;animation:sheet-up .22s ease-out}.sheet-backdrop{display:block;position:fixed;z-index:20;inset:0;border:0;background:#1a2b2261;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.close-sheet{display:grid}.character-grid{grid-template-columns:repeat(5,1fr)}.source-note{margin-top:18px}.play-topline{margin-bottom:5px}.canvas-frame{width:min(100%,calc(100dvh - 235px));min-width:280px;margin:auto;padding:9px;border-radius:20px}.feedback{bottom:18px;font-size:11px;min-height:31px;padding:6px 11px}.completion-overlay{inset:9px}.stroke-progress{height:27px}.action-row{width:min(100%,580px);margin:auto}.hint-button,.restart-button{min-height:52px}.hint-button kbd{display:none}@keyframes sheet-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}}@media(max-width:380px){.brand p{display:none}.current-character>span{display:none}.canvas-frame{min-width:270px}.restart-button{min-width:94px}.privacy-note{font-size:9px}.parent-card{padding:19px}.parent-keypad button{min-height:48px}}@media(orientation:landscape)and (max-height:600px)and (max-width:1000px){.app-shell{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(7px,env(safe-area-inset-bottom))}.topbar{margin-bottom:2px}.brand-seal{width:36px;height:36px;font-size:20px}.brand p,.privacy-note{display:none}.play-section{display:grid;grid-template-columns:minmax(260px,calc(100dvh - 85px)) minmax(210px,1fr);grid-template-rows:48px 1fr 58px;column-gap:20px;max-width:850px}.play-topline{grid-column:2;grid-row:1;margin:0}.canvas-frame{grid-column:1;grid-row:1 / 4;width:100%;min-width:0}.stroke-progress{grid-column:2;grid-row:2;align-self:end}.action-row{grid-column:2;grid-row:3;grid-template-columns:1fr 54px;gap:8px}.restart-button{min-width:54px}.restart-button span{display:none}.feedback{bottom:13px;max-width:calc(100% - 30px);font-size:10px}.completion-card{padding:15px}.completion-character{width:58px;height:58px;font-size:43px}.completion-card h2{margin:6px 0 2px;font-size:20px}.completion-card p{margin-bottom:8px}}@media(min-width:1200px){.app-shell{padding-top:25px}.game-layout{gap:42px;grid-template-columns:350px minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
