:root{--bg: #ffffff;--soft: #f4f6f8;--line: #e5e7eb;--ink: #1f2430;--muted: #5d6673;--green: #16a34a;--green-d: #15803d;--green-dd: #14532d;--green-t: #f0fdf4;--green-l: #bbf7d0;--orange: #F28512;--orange-d: #c2410c;--orange-t: #fff7ed;--orange-l: #fed7aa;--amber: #FBB23A;--amber-d: #d97706;--teal: #3FAABB;--teal-t: #effafb;--red: #C8323D;--lock: #e5e7eb;--lock-d: #cbd0d8;--lock-i: #8f97a3;--book: #9be3b0;--book-ink: #0f2e1c;--acc: #16a34a;--acc-d: #166534;--acc-t: #dcfce7;--font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #11161b;--soft: #1a2128;--line: #2a333c;--ink: #eef2f5;--muted: #a3adb8;--green-t: #10261a;--green-l: #1f5133;--orange-t: #2a1c0f;--orange-l: #6b3b12;--teal-t: #10262a;--lock: #2a333c;--lock-d: #1d242b;--lock-i: #6c7682;--acc-t: #12301f;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}#root{min-height:100%}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--green-d)}img{max-width:100%}:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.shell{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}.shell.wide{max-width:1100px}.top{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;align-items:center;gap:14px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:2px solid var(--line)}.top .grow{flex:1}.stat{display:flex;align-items:center;gap:5px;font-weight:900;font-size:16px}.stat.fire{color:var(--orange-d)}.stat.xp{color:#b45309}.chip-book{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px;cursor:pointer;font-weight:900;font-size:17px;color:var(--acc-d)}.cover{width:26px;height:34px;border-radius:4px;background:var(--book);border:2px solid var(--acc-d);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:var(--book-ink)}main.page{flex:1;padding:16px 16px 110px;display:flex;flex-direction:column;gap:16px}.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-top:2px solid var(--line);padding:8px 8px calc(10px + env(safe-area-inset-bottom,0px))}.nav-in{max-width:520px;margin:0 auto;display:flex;gap:4px}.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:14px;border:2px solid transparent;font-size:12px;font-weight:800;color:var(--muted);text-decoration:none}.nav a.on{border-color:var(--green-l);background:var(--green-t);color:var(--green-d)}.nav svg{width:26px;height:26px}h1{font-size:26px;font-weight:900;line-height:1.2;margin:0;text-wrap:balance}h2{font-size:19px;font-weight:900;margin:0}.muted{color:var(--muted)}.small{font-size:13px}.card{border:2px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--bg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border:0;border-radius:16px;background:var(--green-d);color:#fff;font-weight:900;font-size:16px;letter-spacing:.5px;border-bottom:5px solid var(--green-dd);cursor:pointer;text-decoration:none;text-transform:uppercase}.btn:active{transform:translateY(2px);border-bottom-width:3px}.btn:disabled{background:var(--lock);color:var(--lock-i);border-bottom-color:var(--lock-d);cursor:default;transform:none}.btn.block{width:100%}.btn.ghost{background:var(--bg);color:var(--green-d);border:2px solid var(--line);border-bottom:5px solid var(--line)}.btn.orange{background:var(--orange);color:#1f2430;border-bottom-color:var(--orange-d)}.btn.small{min-height:40px;font-size:13px;padding:0 14px;border-bottom-width:4px}.link{background:none;border:0;padding:0;color:var(--green-d);font-weight:800;cursor:pointer;text-decoration:underline}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:800;font-size:14px}.input{width:100%;min-height:50px;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;padding:10px 14px;background:var(--soft);font-size:17px;font-weight:700}.input:focus{border-color:var(--teal);background:var(--bg);outline:none}textarea.input{min-height:90px;resize:vertical}.msg{border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px}.msg.err{background:#fde8ea;color:#8c1d27}.msg.ok{background:var(--green-t);color:var(--green-dd)}.msg.info{background:var(--soft);color:var(--muted)}@media(prefers-color-scheme:dark){.msg.err{background:#3a1418;color:#ffb3ba}.msg.ok{color:#86efac}}.auth{max-width:420px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top,0px)) 20px 40px;display:flex;flex-direction:column;gap:18px;min-height:100dvh}.auth-logo{width:72px;height:72px;border-radius:18px}.tabs{display:flex;gap:6px;background:var(--soft);padding:4px;border-radius:14px}.tabs button{flex:1;min-height:42px;border:0;border-radius:11px;background:none;font-weight:800;color:var(--muted);cursor:pointer}.tabs button.on{background:var(--bg);color:var(--ink);box-shadow:0 2px 0 var(--line)}.unit{border-radius:18px;padding:14px 16px;background:var(--acc-d);color:#fff;border-bottom:5px solid rgba(0,0,0,.25);display:flex;flex-direction:column;gap:2px}.unit .k{font-size:12px;font-weight:800;letter-spacing:1px;opacity:.85;text-transform:uppercase}.unit .t{font-size:19px;font-weight:900;line-height:1.2}.path{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0 18px}.path{overflow:hidden}.node{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;max-width:300px}.disc{width:68px;height:62px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;border-bottom:6px solid;position:relative}.disc svg{width:30px;height:30px}.disc.done{background:var(--amber);border-color:var(--amber-d)}.disc.open{background:var(--acc);border-color:var(--acc-d)}.disc.lock{background:var(--lock);border-color:var(--lock-d)}.disc.cp{border-radius:22px}.disc img.ic{width:34px;height:34px}.ring{position:absolute;inset:-9px;border-radius:50%;border:5px solid var(--green-l)}.node .lbl{max-width:190px;display:flex;flex-direction:column;font-weight:800;font-size:14px;line-height:1.2}.node .lbl small{font-weight:700;color:var(--muted);font-size:12px}.node.locked .lbl{color:var(--muted)}.bubble{font-size:12px;font-weight:900;color:var(--green-d);background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:4px 9px;white-space:nowrap}.back{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--muted);text-decoration:none;min-height:44px}.cando{background:var(--teal-t);border:2px solid #a5dde5;border-radius:16px;padding:12px 14px;font-weight:700}.ex{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;text-decoration:none;color:var(--ink)}.ex .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ex .ttl{font-weight:800;line-height:1.25}.badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;background:var(--soft);color:var(--muted)}.badge.g{background:var(--green-t);color:var(--green-d)}.badge.o{background:var(--orange-t);color:var(--orange-d)}.pct{width:46px;height:46px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}.guide{overflow-x:auto}.md table{border-collapse:collapse;font-size:14px;width:100%}.md th,.md td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}.md th{background:var(--soft)}.md p{margin:.4em 0}.md h3{font-size:15px;margin:.6em 0 .3em;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}.play{min-height:100dvh;display:flex;flex-direction:column}.play-top{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 6px}.bar{flex:1;height:16px;background:var(--lock);border-radius:99px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--green);border-radius:99px;box-shadow:inset 0 -4px 0 var(--green-d);transition:width .3s}.play-body{flex:1;padding:10px 18px 20px;display:flex;flex-direction:column;gap:16px}.prompt{font-size:19px;font-weight:700;line-height:1.6;border:2px solid var(--line);border-radius:18px;padding:14px 16px}.prompt .blank{display:inline-block;min-width:110px;width:auto;min-height:40px;margin:2px 4px;padding:4px 10px;font-size:17px;border-radius:10px}.opts{display:grid;gap:10px}.opt{min-height:56px;padding:10px 14px;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;background:var(--bg);font-weight:800;font-size:17px;text-align:left;cursor:pointer;display:flex;gap:10px;align-items:center}.opt .k{flex:none;width:30px;height:30px;border-radius:8px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}.seg{display:inline-flex;gap:4px;vertical-align:middle;margin:2px}.seg button{min-height:38px;padding:2px 10px;border:2px solid var(--line);border-bottom-width:4px;border-radius:10px;background:var(--bg);font-weight:800;font-size:16px;cursor:pointer}.seg button.sel,.opt.sel{border-color:#86efac;border-bottom-color:var(--green);background:var(--green-t);color:var(--green-d)}.tf{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}.pic{position:relative;border:2px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;text-align:center}.pic img{width:46px;height:46px;object-fit:contain}.pic .n{position:absolute;top:4px;left:6px;font-size:11px;font-weight:900;color:var(--muted)}.bank{display:flex;flex-wrap:wrap;gap:6px}.bank span{padding:4px 10px;border-radius:10px;background:var(--soft);border:2px solid var(--line);font-weight:700;font-size:14px}.reading{border-left:4px solid var(--teal);padding:4px 0 4px 14px;font-size:16px}.reading h3{margin:0 0 6px}.fb{padding:18px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}.fb.ok{background:var(--acc-t)}.fb.bad{background:var(--orange-t)}.fb.neutral{background:var(--soft)}.fb .head{font-size:22px;font-weight:900;display:flex;align-items:center;gap:10px}.fb.ok .head{color:var(--green-d)}.fb.bad .head{color:var(--orange-d)}.fb p{margin:0;font-weight:700}.foot{padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--line)}.ex-chip{font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tile{border:2px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column}.tile b{font-size:21px;font-weight:900}.ladder{display:flex;align-items:flex-end;gap:4px}.ladder span{flex:1;height:28px;border-radius:4px}.skills{display:grid;grid-template-columns:96px minmax(0,1fr) 42px;gap:8px 10px;align-items:center;font-weight:800;font-size:14px}.meter{height:12px;background:var(--lock);border-radius:99px;overflow:hidden}.meter i{display:block;height:100%;background:var(--green)}.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th,.tbl td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}.codes{font-family:ui-monospace,Menlo,monospace;font-size:14px;columns:3 140px;background:var(--soft);border-radius:12px;padding:12px}.empty{text-align:center;padding:30px 10px;display:flex;flex-direction:column;gap:12px;align-items:center}@media(prefers-reduced-motion:reduce){*{transition:none!important}}