:root{--bg: #f3ece0;--card: #fffaf1;--ink: #2e2419;--muted: #7a6a55;--line: #e2d5c0;--accent: #b5622b;--accent-ink: #fff8ef;--slot: #efe5d5;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #1c1712;--card: #28211a;--ink: #efe4d2;--muted: #a8977f;--line: #3a3026;--accent: #e08a4c;--accent-ink: #1c1712;--slot: #332a21;color-scheme:dark}}:root[data-theme=dark]{--bg: #1c1712;--card: #28211a;--ink: #efe4d2;--muted: #a8977f;--line: #3a3026;--accent: #e08a4c;--accent-ink: #1c1712;--slot: #332a21;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}#app{max-width:480px;margin:0 auto;padding:16px;min-height:100vh}h1,h2,h3{margin:0 0 6px;line-height:1.2}h1{font-size:22px}h2{font-size:17px}h3{font-size:16px}p{margin:0 0 10px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}.center{text-align:center;margin-top:18vh}.muted{color:var(--muted)}.small{font-size:13px}.label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 4px}button,.button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:12px 18px;display:inline-block;text-decoration:none}.primary{background:var(--accent);color:var(--accent-ink);font-weight:600;margin:6px 0 14px}.link{background:none;color:var(--muted);text-decoration:underline;padding:6px}.code{font:600 22px/1.2 ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.08em;-webkit-user-select:all;user-select:all}.hero{display:flex;gap:14px;align-items:center}.hero p{margin:0}.avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--slot);border:1px solid var(--line);flex:none}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}.slot{aspect-ratio:1;border-radius:8px;background:var(--slot);border:1px solid var(--line);padding:0;font-size:24px;display:grid;place-items:center}.slot.filled:hover,.slot.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.detail{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.history{list-style:none;padding:0;margin:0;font-size:14px}.history li{padding:3px 0}:root{--danger: #c2412d;--arcane: #7d4fc4;--good: #3f8f4f;--rage: #b8321f;--hp: #3f8f4f}.wide{width:100%}.battle{position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation}.battle.shake{animation:shake .25s}@keyframes shake{25%{transform:translate(-5px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}.b-top,.b-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}.b-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.b-phase{color:var(--danger);font-size:13px;font-weight:600}.bar{position:relative;height:18px;border-radius:9px;background:var(--slot);border:1px solid var(--line);overflow:hidden;flex:1}.bar.thin{height:12px}.bar-fill{height:100%;transition:width .12s linear}.hp-boss{background:var(--danger)}.hp-hero{background:var(--hp)}.rage{background:var(--rage)}.bar-text{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink);mix-blend-mode:normal;text-shadow:0 0 3px var(--card)}.bar.thin .bar-text{font-size:10px}.b-chips{min-height:26px;display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}.chip{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid currentColor}.chip.good{color:var(--good)}.chip.bad{color:var(--danger)}.b-stage{position:relative;width:168px;height:168px;margin:8px auto 4px}.b-ring{--p: 0deg;--c: var(--muted);position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(var(--c) var(--p),var(--slot) var(--p));-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%)}.b-ring[data-kind=block]{--c: var(--danger)}.b-ring[data-kind=bash]{--c: var(--arcane)}.b-face{position:absolute;top:22px;right:22px;bottom:22px;left:22px;border-radius:50%;display:grid;place-items:center;font-size:72px;background:var(--slot)}.b-face.hit{animation:hit .18s}.b-face.stunned{filter:grayscale(.7);animation:wobble .6s infinite}@keyframes hit{40%{transform:scale(.92);filter:brightness(1.6)}}@keyframes wobble{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}.b-answer{position:absolute;right:-6px;top:-6px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;opacity:0;transform:scale(.6);transition:.12s}.b-answer[data-kind=block],.b-answer[data-kind=bash]{opacity:1;transform:scale(1)}.b-answer[data-kind=block]{background:var(--danger)}.b-answer[data-kind=bash]{background:var(--arcane)}.b-floats,.h-floats{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.h-floats{position:relative;height:0}.float{position:absolute;top:40%;font-weight:800;font-size:18px;animation:floatUp 1s ease-out forwards;white-space:nowrap;text-shadow:0 1px 2px var(--card)}.h-floats .float{top:-40px}.float.dmg{color:var(--ink)}.float.crit{color:#e0a21b;font-size:24px}.float.hurt{color:var(--danger);font-size:22px}.float.good{color:var(--good)}.float.big{font-size:26px}@keyframes floatUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}.b-cast{min-height:58px;text-align:center;opacity:.25;transition:opacity .1s}.b-cast.on{opacity:1}.b-cast-name{font-weight:700}.b-cast[data-kind=block] .b-cast-name{color:var(--danger)}.b-cast[data-kind=bash] .b-cast-name{color:var(--arcane)}.b-cast-hint{font-size:13px;color:var(--muted)}.cast-bar{height:6px;border-radius:3px;background:var(--slot);overflow:hidden;margin:4px 0}.cast-fill{height:100%;background:var(--muted)}.b-cast[data-kind=block] .cast-fill{background:var(--danger)}.b-cast[data-kind=bash] .cast-fill{background:var(--arcane)}.h-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.h-label{width:52px;font-size:12px;color:var(--muted)}.h-shield{font-size:22px;opacity:.15;transition:.08s}.h-shield.on{opacity:1;transform:scale(1.2)}.panel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}.skill{position:relative;overflow:hidden;aspect-ratio:1;padding:4px;border-radius:12px;background:var(--slot);border:2px solid var(--line);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.skill-key{position:absolute;left:6px;top:3px;font-size:11px;color:var(--muted)}.skill-cost{position:absolute;right:6px;top:3px;font-size:11px;color:var(--rage);font-weight:700}.skill-emoji{font-size:26px;line-height:1}.skill-name{font-size:11px;line-height:1.1;text-align:center}.sweep{position:absolute;left:0;right:0;bottom:0;height:0;background:color-mix(in srgb,var(--ink) 35%,transparent);pointer-events:none}.skill.poor{opacity:.55}.skill.answer{border-color:var(--danger);animation:pulse .5s infinite alternate}.skill.answer[data-answer=bash]{border-color:var(--arcane);animation-name:pulse-arcane}@keyframes pulse{to{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 45%,transparent)}}@keyframes pulse-arcane{to{box-shadow:0 0 0 3px color-mix(in srgb,var(--arcane) 45%,transparent)}}.skill.pressed{animation:press .15s}@keyframes press{50%{transform:scale(.92)}}.keys-hint{font-size:11px;color:var(--muted);text-align:center;margin:8px 0 0}.b-log{list-style:none;padding:0 4px;margin:0;font-size:13px;min-height:90px}.b-log li{padding:2px 0;color:var(--muted)}.b-log li.bad{color:var(--danger)}.b-log li.good{color:var(--good)}.b-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 75%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:14px}.center-inline{text-align:center;min-width:260px}.trophy{font-size:18px;font-weight:600}[hidden]{display:none!important}