:root{color-scheme:light;--bg:#f1f5f9;--surface:#fff;--ink:#0f172a;--muted:#64748b;--brand:#f97316;--line:#e2e8f0;--field:#edf5e9;--panel:rgba(255,255,255,.97);--veil:rgba(228,238,224,.45);--track:#e2e8f0}
:root.dark{color-scheme:dark;--bg:#020617;--surface:#0f172a;--ink:#f8fafc;--muted:#94a3b8;--line:#273449;--field:#132b2a;--panel:rgba(15,23,42,.97);--veil:rgba(2,6,23,.5);--track:#273449}
*{box-sizing:border-box;margin:0}body{height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}button:not(:disabled):active{transform:translateY(1px)}[hidden]{display:none!important}.app{height:100%;max-width:1040px;margin:auto;padding:14px;display:flex;flex-direction:column;gap:11px}.toolbar{display:flex;align-items:center;gap:22px;flex:none}.identity{display:flex;gap:10px;align-items:center;margin-right:auto}.identity b{font-size:17px;letter-spacing:.04em}.identity small,.stat small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:#ffedd5;color:var(--brand);border-radius:13px;font-size:30px}.stat b{font-size:23px;font-variant-numeric:tabular-nums}.target{font-size:12px;color:var(--muted)}.tools{display:flex;gap:6px}.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface)}.icon-btn svg{width:19px;height:19px}.icon-btn:disabled{opacity:.35}.icon-btn[aria-pressed=true]{color:var(--brand)}#sound-btn[aria-pressed=true] .sound-off,#sound-btn[aria-pressed=false] .sound-on{display:none}.meters{display:flex;gap:22px;align-items:center;padding:0 3px;flex:none}.health,.experience{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:11px}.health>span{color:#f87171;font-size:16px}.health b{min-width:61px;text-align:right;font-variant-numeric:tabular-nums}.experience>b{color:#16a34a;white-space:nowrap}.experience>span{color:var(--muted);min-width:46px;text-align:right}.track{height:7px;border-radius:9px;background:var(--track);overflow:hidden;flex:1}.track>div{height:100%;border-radius:inherit;transition:width .16s linear}#health-fill{background:#fb7185;width:100%}#xp-fill{background:#4ade80;width:0}.board{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;background:var(--field);isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none}.field-top{position:absolute;top:16px;left:17px;right:17px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:8px}.stage-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--panel);padding:7px 12px;font-size:11px;color:var(--muted)}.stage-chip i{width:6px;height:6px;border-radius:100%;background:#4ade80}#combo{font-size:15px;font-weight:800;color:#ea580c;letter-spacing:.02em;background:var(--panel);padding:6px 12px;border-radius:99px}.field-bottom{position:absolute;bottom:16px;left:17px;right:17px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}.loadout{display:flex;gap:6px;flex-wrap:wrap}.weapon{display:flex;gap:5px;align-items:center;font-size:11px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:7px 9px}.weapon .weapon-icon{font-size:19px;line-height:1}.weapon.evolved{border-color:#fbbf24}.burst-btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:9px;min-height:56px;padding:9px 18px 9px 12px;border-radius:18px;background:var(--surface);box-shadow:0 3px 0 rgba(15,23,42,.05);pointer-events:auto;text-align:left;flex:none}.burst-btn b{font-size:13px;display:block}.burst-btn small{font-size:10px;color:var(--muted)}.qi-icon{color:#f59e0b;font-size:30px;line-height:1}.burst-progress{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#fbbf242b;z-index:-1}.burst-btn.ready{background:#f97316;color:#fff;box-shadow:0 3px 0 #c2410c}.burst-btn.ready small,.burst-btn.ready .qi-icon{color:#fff}#boss-hud{position:absolute;top:57px;left:50%;transform:translateX(-50%);width:min(280px,70%);pointer-events:none;background:var(--panel);border-radius:10px;padding:8px 12px}#boss-hud>div:first-child{display:flex;justify-content:space-between;font-size:10px;margin-bottom:5px}#boss-fill{background:#c084fc}.toast{position:absolute;left:50%;top:25%;transform:translateX(-50%);border-radius:999px;padding:11px 22px;background:var(--panel);box-shadow:0 5px 24px #0f172a0a;font-size:14px;font-weight:700;text-align:center;pointer-events:none;max-width:90%;width:max-content}.overlay{position:absolute;inset:0;background:var(--veil);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;backdrop-filter:blur(3px);z-index:5}.panel{background:var(--panel);border:1px solid var(--surface);box-shadow:0 12px 60px #1e293b0a;border-radius:26px;max-width:460px;width:100%;padding:25px 30px;text-align:center;margin:auto}.intro-art{height:130px;overflow:hidden;margin:-10px auto 5px;width:220px}.intro-art img{width:220px;height:165px;display:block;transform:translateY(-17px)}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:#16a34a;margin-bottom:8px}h1{font-size:32px;letter-spacing:.06em;line-height:1.3}.description{font-size:13px;line-height:1.85;color:var(--muted);margin:12px auto 19px;max-width:340px}.mode-picker{display:flex;gap:8px;margin-bottom:20px}.mode-picker button{flex:1;background:var(--bg);border:1.5px solid transparent;border-radius:14px;padding:11px 8px}.mode-picker button[aria-pressed=true]{border-color:var(--brand);background:#f973160c}.mode-picker b{display:block;font-size:13px}.mode-picker small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.panel-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.primary{border-radius:999px;background:var(--brand);color:#fff;font-size:15px;font-weight:750;padding:13px 35px;min-width:160px;box-shadow:0 3px 0 #c2410c}.secondary{border-radius:999px;background:var(--bg);color:var(--muted);font-size:12px;padding:12px 20px}.panel-note{font-size:10px;color:var(--muted);margin-top:17px;line-height:1.6}.choices{display:flex;flex-direction:column;gap:9px;margin:20px 0 17px}.choice{display:flex;gap:13px;align-items:center;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:12px;transition:border-color .12s,background .12s}.choice:hover,.choice:focus-visible{border-color:var(--brand);background:#f9731608}.choice-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;font-size:25px;flex:none;background:var(--surface)}.choice-text{flex:1}.choice-text b{display:block;font-size:14px}.choice-text small{display:block;color:var(--muted);font-size:11px;line-height:1.6;margin-top:3px}.choice-level{font-size:10px;white-space:nowrap;color:#16a34a}.choice.evolution{border-color:#fbbf24}.results{display:flex;justify-content:center;gap:25px;padding:8px 0 23px}.results b{display:block;font-size:24px;font-variant-numeric:tabular-nums}.results small{display:block;color:var(--muted);font-size:11px;margin-top:3px}footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);padding:0 3px;flex:none}.dark .eyebrow,.dark .experience>b,.dark .choice-level{color:#4ade80}
@media(max-width:580px){.app{padding:9px;gap:9px}.toolbar{gap:12px}.identity b{font-size:13px}.brand-mark{display:none}.tools{gap:4px}.icon-btn{width:35px;height:38px}.stat b{font-size:20px}.target,.kills-stat{display:none}.meters{gap:12px}.health b{min-width:52px;font-size:10px}.experience>span{display:none}.panel{padding:22px 19px;max-width:390px;border-radius:22px}h1{font-size:29px}.field-top{top:12px;left:12px;right:12px}.field-bottom{left:12px;right:12px;bottom:12px}.weapon{padding:7px}.weapon-name{display:none}.burst-btn{padding:8px 12px}.stage-chip{font-size:10px}footer{font-size:9px}#best{white-space:nowrap}.intro-art{height:120px}.overlay{padding:12px}}
@media(max-height:600px){.app{padding:8px;gap:7px}.intro-art{display:none}.panel{padding:17px 24px;max-width:480px}h1{font-size:25px}.description{margin:7px auto 11px;font-size:12px}.mode-picker{margin-bottom:12px}.panel-note{margin-top:10px}.choices{gap:6px;margin:12px 0}.choice{padding:8px}.choice-icon{height:35px;width:35px}.eyebrow{margin-bottom:4px}footer{display:none}.toolbar{gap:17px}.identity small{display:none}.choice-text small{margin-top:1px}}
.hero-picker{display:flex;gap:7px;margin:15px 0 12px}.hero-choice{flex:1;min-width:0;background:var(--bg);border:1.5px solid transparent;border-radius:14px;padding:9px 3px}.hero-choice[aria-pressed=true]{border-color:var(--brand);background:#f973160c}.hero-choice canvas{width:54px;height:57px;margin:0 auto 4px;pointer-events:none}.hero-choice b{display:block;font-size:12px}.hero-choice small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.hero-detail{font-size:11px;color:var(--muted)}.intro-art{height:88px;width:210px}.intro-art img{width:210px;height:157px;transform:translateY(-35px)}.panel:has(.hero-picker:not([hidden])){padding-top:17px}.panel:has(.hero-picker:not([hidden])) .description{margin-bottom:8px}.brand-mark{font-size:23px;font-weight:800}
@media(max-height:700px){.intro-art{display:none}.hero-choice canvas{width:38px;height:40px}.hero-picker{margin-top:10px}.panel{padding-top:18px;padding-bottom:18px}.panel-note{margin-top:10px}.mode-picker{margin-bottom:13px}.hero-choice{padding:7px 3px}}
@media(max-height:460px) and (min-width:600px){.panel:has(.hero-picker:not([hidden])){max-width:650px;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:center}.panel:has(.hero-picker:not([hidden])) .eyebrow,.panel:has(.hero-picker:not([hidden])) h1,.panel:has(.hero-picker:not([hidden])) .description{grid-column:1}.hero-picker{grid-column:2;grid-row:1/4}.mode-picker{grid-column:1;margin:0}.panel-actions{grid-column:2}.panel-note{grid-column:1/3}.hero-choice canvas{width:46px;height:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}