:root{--bg: #0e1018;--panel: #171a29;--panel2: #1e2236;--line: #2a2f4a;--text: #eef1f8;--muted: #b3bbcd;--hp: #e05b5b;--mana: #5b9df0;--shield: #ffd97a;--fury: #ff8c42;--good: #8fe39a;--bad: #ff9a9a;--sys: #b3bbcd;--accent: #9b6df2;--radius: 12px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}#app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}button{font:inherit;color:inherit}.select{padding:24px 16px calc(24px + env(safe-area-inset-bottom))}.select h1{font-size:1.7rem;margin:8px 0 4px;letter-spacing:.5px}.tagline{color:var(--muted);margin:0 0 20px;font-size:1rem}.select h2{font-size:1.2rem;color:var(--muted);font-weight:600;margin:14px 0}.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:96px;transition:transform .08s ease,border-color .12s ease}.card:active{transform:scale(.97)}.card:hover{border-color:var(--accent)}.class-cards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.class-card-v{padding:0;overflow:hidden;min-height:0;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.class-card-v:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 28px #00000073,0 0 0 1px #9b6df259}.cc-art{position:relative;height:132px;overflow:hidden;background:#12141f}.cc-art .class-art{width:100%;height:100%;display:block;transition:transform .45s cubic-bezier(.2,.6,.2,1);transform-origin:50% 40%}.class-card-v:hover .cc-art .class-art{transform:scale(1.12) translate(-6px,5px)}.cc-art:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0e101800 55%,#171a29f2)}.cc-emoji{position:absolute;top:10px;left:12px;font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));transition:transform .3s ease;z-index:1}.class-card-v:hover .cc-emoji{transform:scale(1.2) rotate(-6deg)}.cc-name{position:absolute;bottom:8px;left:12px;font-weight:800;font-size:1.05rem;text-shadow:0 2px 6px rgba(0,0,0,.8);z-index:1}.cc-points{list-style:none;margin:0;padding:12px 14px 14px;display:grid;gap:8px;font-size:.88rem;color:var(--muted)}.cc-points li:before{content:"◆ ";color:var(--accent);font-size:.7em}.card .name{font-weight:700;font-size:1.02rem}.card .desc{color:var(--muted);font-size:.9rem}.weapon-cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.weapon-card-v{padding:0;overflow:hidden;min-height:0;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.weapon-card-v:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 28px #00000073,0 0 0 1px #9b6df259}.w-art{position:relative;height:96px;overflow:hidden;background:linear-gradient(155deg,rgba(155,109,242,.22) 0%,transparent 60%),#12141f}.w-glyph{position:absolute;right:-12px;bottom:-18px;width:120px;height:120px;color:#b79bff;opacity:.5;transform:rotate(-14deg);transition:transform .4s cubic-bezier(.2,.6,.2,1)}.w-glyph :global(svg){width:100%;height:100%}.weapon-card-v:hover .w-glyph{transform:scale(1.1) rotate(-10deg) translate(-5px,4px)}.w-art:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0e101800 40%,#171a29f0)}.w-name{position:absolute;bottom:8px;left:12px;font-weight:800;font-size:1rem;text-shadow:0 2px 6px rgba(0,0,0,.85);z-index:1}.w-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}.sk-ic{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:5px}.sk-ic :global(svg){width:100%;height:100%}.skill-list{list-style:none;margin:4px 0 0;padding:8px 0 0;border-top:1px dashed var(--line);font-size:.85rem;color:var(--muted);display:grid;gap:8px}.skill-list b{color:var(--text)}.btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-weight:700;cursor:pointer;min-height:44px}.btn:active{transform:scale(.97)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}.select .btn.ghost{margin-top:14px}.game{display:flex;flex-direction:column;gap:14px;padding:12px 14px calc(20px + env(safe-area-inset-bottom))}.game header{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.95rem}.game header .who{font-weight:700;color:var(--text)}canvas{width:100%;aspect-ratio:480 / 250;border-radius:var(--radius);background:#10121d;border:1px solid var(--line)}.panel{display:flex;flex-direction:column;gap:4px}.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.e-name{font-weight:700}.battle-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.art-strip{position:relative;height:96px;overflow:hidden;background:#12141f}.art-strip.hero{height:64px}.art-strip .class-art{width:100%;height:100%;display:block}.art-strip:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0e101800 35%,#171a29f0)}.art-name{position:absolute;bottom:6px;left:10px;font-weight:800;font-size:1rem;text-shadow:0 2px 6px rgba(0,0,0,.85);z-index:1}.kind-badge{position:absolute;top:8px;right:8px;z-index:1;font-size:.72rem;background:#0a0c14a6;border:1px solid var(--line);border-radius:999px;padding:2px 8px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.card-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}.ec-desc{margin:0;font-size:.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ec-meta{display:flex;gap:12px;font-size:.8rem;color:var(--muted)}.ec-weak{font-size:.84rem;color:#ffd97a}.ec-abilities{display:flex;flex-wrap:wrap;gap:6px}.chip.ability{color:#dbe1ee;font-size:.8rem}.my-block,.states{display:flex;flex-direction:column;gap:4px}.st-line{display:flex;flex-wrap:wrap;gap:6px;min-height:0}.st-line:empty{display:none}.badge{font-size:.75rem;color:var(--muted);background:var(--panel2);border-radius:999px;padding:2px 8px;white-space:nowrap}.bar{position:relative;height:26px;background:#0a0c14;border-radius:8px;overflow:hidden;border:1px solid var(--line)}.bar.thin{height:20px}.bar .fill{position:absolute;inset:0 auto 0 0;transition:width .45s ease}.bar.hp .fill{background:linear-gradient(180deg,#ef6b6b,#c94444)}.bar.mana .fill{background:linear-gradient(180deg,#6cacff,#4179c9)}.bar.shield .fill{background:linear-gradient(180deg,#ffe3a1,#d9a94e)}.bar.fury .fill{background:linear-gradient(180deg,#ff9d5c,#d96a2e)}.bar span{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}.resources{display:grid;gap:4px}.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:0}.chip{font-size:.8rem;border-radius:999px;padding:2px 10px;background:var(--panel2);border:1px solid var(--line)}.chip.dot{color:#e3e7f0;display:inline-flex;align-items:center;gap:4px}.chip-ic{width:13px;height:13px;display:inline-flex;color:#e8b268}.chip.stun{color:#ffe28a}.chip.buff{color:var(--muted)}.skills{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skill{position:relative;background:linear-gradient(155deg,color-mix(in srgb,var(--tone, var(--accent)) 26%,transparent) 0%,transparent 60%),linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid color-mix(in srgb,var(--tone, var(--line)) 42%,var(--line));border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:10px 12px 8px;min-height:96px;cursor:pointer;text-align:left;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.s-bg{position:absolute;right:-12px;bottom:-16px;width:116px;height:116px;color:var(--tone);opacity:.16;transform:rotate(-16deg);pointer-events:none;z-index:0}.skill-glyph{width:100%;height:100%;display:block}.s-icon{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:5px;color:color-mix(in srgb,var(--tone) 78%,#ffffff)}.skill:not(:disabled):hover{transform:translateY(-2px);border-color:var(--tone, var(--accent));box-shadow:0 8px 20px #0006}.s-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;z-index:1}.s-name{font-size:.9rem;font-weight:700;line-height:1.25}.s-cost{font-size:.85rem;font-weight:700;color:#9fcbff;white-space:nowrap}.s-effect{font-size:.82rem;color:var(--text);z-index:1;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.s-bonus{font-size:.8rem;font-weight:600;color:#ffd97a;z-index:1}.s-overload{font-size:.74rem;color:var(--muted);z-index:1}.s-overload.ready{color:#ffd97a;font-weight:700}.s-foot{margin-top:auto;display:flex;justify-content:flex-end;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;z-index:1}.skill .s-meta .s-cd{color:#8d94a8}.skill .cd-fill{position:absolute;left:0;right:0;bottom:0;background:#04060cb8;transition:height .45s linear;z-index:0}.skill .cd-num{position:absolute;top:4px;right:8px;font-size:.85rem;font-weight:800;color:#fff;z-index:1}.skill.ready{border-color:var(--accent);box-shadow:0 0 8px #9b6df259}.skill.overloaded{border-color:#ffd97a;box-shadow:0 0 10px #ffd97a73}.skill.overloaded .s-name{color:#ffe9b0}.skill .s-ov{font-size:.68rem;color:#8d94a8}.skill.overloaded .s-ov{color:#ffd97a;font-size:.8rem}.skill.locked{opacity:.55}.skill:disabled{cursor:default}.skill:not(:disabled):active{transform:scale(.98)}.bar.mana.overload{border-color:#ffd97a;box-shadow:0 0 8px #ffd97a66}.bar.mana.overload .fill{background:linear-gradient(180deg,#ffe9b0,#e0a94e)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#080910c7;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;width:min(420px,100%);text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}.sheet.wide{width:min(480px,100%)}.sheet h2{margin:0}.perk-cards{display:grid;gap:10px}.perk-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:40px 1fr auto;grid-template-areas:"icon name pips" "icon desc desc";align-items:center;gap:2px 10px;text-align:left;cursor:pointer;transition:border-color .12s ease,transform .08s ease}.perk-card:active{transform:scale(.98)}.perk-card:hover{border-color:var(--accent)}.p-icon{grid-area:icon;font-size:1.6rem}.p-name{grid-area:name;font-weight:700}.p-pips{grid-area:pips;color:var(--accent);letter-spacing:2px;font-size:.9rem}.p-desc{grid-area:desc;color:var(--muted);font-size:.82rem}.end-sub{color:var(--muted);margin:0}.end-perks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.end-btns{display:flex;gap:10px}.end-btns .btn{flex:1}.top-actions{display:flex;align-items:center;gap:10px;margin-bottom:8px}.guide-btn{min-height:32px;padding:4px 12px;font-size:.8rem}.tutorial{max-height:86dvh;overflow-y:auto;text-align:left;align-items:stretch}.tutorial h2{text-align:center}.tutorial h3{font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin:4px 0}.tutorial p{margin:0 0 6px;font-size:.85rem}.tutorial ul{margin:0 0 6px;padding-left:18px;font-size:.85rem;display:grid;gap:4px}.tutorial code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:.8rem}.tut-muted{color:var(--muted);font-size:.78rem!important}.tutorial .btn{align-self:center;min-width:180px}.dot-table{display:grid;gap:8px;margin-top:4px}.dot-entry{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}.dot-head{display:flex;justify-content:space-between;align-items:baseline}.dot-name{font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:6px}.dot-ic{width:15px;height:15px;display:inline-flex;color:#e8b268}.dot-cap{color:#ffd97a;font-size:.75rem;font-weight:700}.dot-meta{color:var(--muted);font-size:.72rem;margin:1px 0 3px}.dot-desc{font-size:.78rem}.game-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%}.stats-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;font-size:.9rem;align-self:start}.stats-panel h3{margin:14px 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.stats-panel h3:first-child{margin-top:0}.stat-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0}.st-label{color:var(--muted)}.st-val{font-weight:700;font-variant-numeric:tabular-nums}.st-val.bad{color:var(--bad)}.st-val.good{color:var(--good)}.stat-bar{height:4px;border-radius:2px;background:#0a0c14;overflow:hidden;margin:0 0 4px}.stat-bar .fill{height:100%;background:var(--accent);transition:width .3s ease}.stat-total{margin-top:4px;font-weight:800;font-size:.85rem;color:#ffd97a;font-variant-numeric:tabular-nums}.stat-empty{color:var(--muted);margin:0}@media (min-width: 860px){#app{max-width:780px}.game-wrap{grid-template-columns:minmax(0,520px) 220px;align-items:start}.stats-panel{position:sticky;top:12px}}.gold-chip{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:700;color:#ffd97a}.game header .gold-chip{font-size:.8rem}.select h3{font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:16px 0 8px}.select-actions{display:flex;gap:10px;margin-top:16px}.select-actions .btn{flex:1}.transmute-btn{background:#7a5bbf}.item-grid,.inv-grid{display:grid;gap:8px}.item-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.item-pick{background:none;border:none;padding:0;cursor:pointer;text-align:left;transition:transform .15s ease}.item-pick:hover{transform:translateY(-3px)}.item-pick:active{transform:scale(.97)}.item-card{position:relative;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;overflow:hidden}.ic-bg{position:absolute;right:-10px;bottom:-14px;width:72px;height:72px;opacity:.16;transform:rotate(-16deg);pointer-events:none}.ic-bg :global(svg){width:100%;height:100%}.item-card.rarity-0{border-left-color:#b8c0d0}.item-card.rarity-1{border-left-color:#64b5ff}.item-card.rarity-2{border-left-color:#c07aff}.item-card.rarity-3{border-left-color:#ffb347}.ic-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}.ic-name{font-weight:700;font-size:.9rem}.ic-tag{color:var(--muted);font-size:.75rem;white-space:nowrap}.ic-affixes{list-style:none;margin:0;padding:0;font-size:.78rem;color:var(--good);display:grid;gap:1px}.ic-badge{position:absolute;top:-7px;right:8px;background:var(--accent);color:#fff;font-size:.65rem;font-weight:800;border-radius:999px;padding:1px 8px}.inv-grid{grid-template-columns:1fr 1fr}.inv-entry{display:flex;flex-direction:column;gap:6px}.t-btn{min-height:38px;font-size:.8rem;padding:8px}.t-btn:disabled{opacity:.4;cursor:not-allowed}.transmute-result{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.tr-title{margin:0;font-weight:800;color:#c07aff}.t-error{color:var(--bad);margin:0;font-size:.85rem}.loot-gold{color:#ffd97a;font-weight:800;font-size:1.1rem;margin:0}