: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}html{font-size:18px}*{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 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 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}.enemy-head{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;display:flex;flex-direction:column;gap:4px}.eh-line{display:flex;justify-content:space-between;align-items:center;gap:8px}.eh-name{font-weight:800;font-size:1.02rem}.enemy-head .kind-badge{position:static;flex-shrink:0}.enemy-head .ec-desc{margin:0}.versus{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}.versus .card-body{padding:10px;gap:7px}.hero-stats{display:flex;flex-wrap:wrap;gap:6px}.hstat{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700}.hstat em{font-style:normal;font-weight:400;color:var(--muted)}.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.auto{height:8px;border-radius:5px}.bar.auto .fill{background:#fff;transition:width .1s linear}.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-sec{display:flex;flex-direction:column;gap:6px}.skills-head{display:flex;justify-content:space-between;align-items:center}.skills-head h2{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.sk-info-btn{padding:2px 10px;font-size:.9rem}.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:2px;padding:8px 10px;min-height:64px;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}.nav-ic-btn .skill-glyph{width:30px;height:30px}.hs-emoji .skill-glyph{width:1.7em;height:1.7em}.gold-chip .skill-glyph,.kind-badge .skill-glyph,.chip .skill-glyph,.bar span .skill-glyph,.states .skill-glyph,.s-cost .skill-glyph,.s-ov .skill-glyph,.s-fx .skill-glyph,.fx-row .skill-glyph,.pick-res .skill-glyph,.pick-ov-t .skill-glyph,.res-mana .skill-glyph,.p-icon .skill-glyph,.cc-emoji .skill-glyph,.ic-tag .skill-glyph,.btn .skill-glyph,.eh-name .skill-glyph,.ec-weak .skill-glyph,h1 .skill-glyph,h2 .skill-glyph{width:1em;height:1em;display:inline-block;vertical-align:-.15em}.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:.85rem;font-weight:700;line-height:1.25}.s-meta{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);z-index:1}.s-fx{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;white-space:nowrap;overflow:hidden;z-index:1;font-variant-numeric:tabular-nums}.s-cost{font-size:.78rem;font-weight:700;color:var(--mana);white-space:nowrap}.s-fx .fx{display:inline-flex;align-items:center;gap:3px}.s-cd2{font-variant-numeric:tabular-nums}.skill .cd-num{position:absolute;top:4px;right:8px;font-size:.85rem;font-weight:800;color:#fff;z-index:1}.skill .cd-fill{position:absolute;left:0;right:0;bottom:0;background:#04060cb8;transition:height .45s linear;z-index:0}.skill.ready{border-color:color-mix(in srgb,var(--tone, var(--accent)) 70%,var(--line));box-shadow:0 0 10px color-mix(in srgb,var(--tone, var(--accent)) 40%,transparent)}.skill.cding{border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:none}.skill.cding .s-name{color:var(--muted)}.skill.cding .s-bg{opacity:.06}.skill.cding .s-fx{color:color-mix(in srgb,var(--muted) 55%,transparent)}.skill.cding .s-fx .skill-glyph{opacity:.6}.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)}.sk-info{align-self:stretch;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 0;border-bottom:1px solid var(--line)}.sk-info:last-of-type{border-bottom:none}.sk-ic{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--tone, var(--accent)) 22%,transparent);color:color-mix(in srgb,var(--tone, var(--accent)) 78%,#ffffff)}.sk-info-body{min-width:0}.sk-info-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.sk-info-meta{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.sk-info-desc{margin:2px 0 0;font-size:.82rem;color:var(--muted)}.sk-info-num{margin:3px 0 0;font-size:.85rem;font-weight:600}.sk-info-bonus{margin:3px 0 0;font-size:.8rem;font-weight:600;color:#ffd97a}.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}.step-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:10px}.step-tab{padding:6px 4px;font-size:.68rem;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-tab.active{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--panel))}.sum-list{display:flex;flex-direction:column;gap:6px}.sum-row{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.sum-tag{margin-left:auto;font-size:.68rem;color:var(--muted)}.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 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-head{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:8px}.loot-head h2{margin:0}.loot-item{width:100%;max-width:250px;margin:12px auto 4px}.loot-none{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0 10px;color:var(--muted)}.loot-none p{margin:0}.loot-btn{width:100%;margin-top:10px}.loot-gold{color:#ffd97a;font-weight:800;font-size:1.1rem;margin:0}.hero-items{margin-top:8px}.weapon-card-v.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 22px #0006}.item-pick.picked-item .item-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.skill-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.pick-card{position:relative;background:linear-gradient(155deg,color-mix(in srgb,var(--tone, var(--accent)) 24%,transparent) 0%,transparent 60%),var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;overflow:hidden;transition:transform .1s ease,border-color .12s ease,box-shadow .12s ease}.pick-card>:not(.skill-pattern){position:relative;z-index:1}.pick-card:hover{border-color:color-mix(in srgb,var(--tone, var(--accent)) 60%,var(--line))}.pick-card:active{transform:scale(.97)}.pick-card.picked{border-color:var(--tone, var(--accent));box-shadow:0 0 0 1px var(--tone, var(--accent)),0 6px 18px #00000059}.pick-card.picked:after{content:"✓";position:absolute;top:-7px;right:8px;background:var(--tone, var(--accent));color:#0e1018;font-size:.7rem;font-weight:800;border-radius:999px;padding:1px 7px}.pick-ic{width:16px;height:16px;color:var(--tone, var(--accent))}.pick-ic svg{width:100%;height:100%}.pick-name{font-weight:700;font-size:.9rem}.pick-head{display:flex;align-items:center;gap:8px}.pick-res{margin-top:2px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}.res-cd{margin-left:auto}.res-mana{color:var(--mana);font-weight:700}.pick-facts{margin-top:10px;display:flex;flex-direction:column;gap:5px}.fx-row{display:flex;align-items:center;gap:4px;font-size:.8rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}.fx-pct{color:var(--muted);font-weight:500}.fx-plus{color:var(--text);font-weight:800}.fx-val{display:inline-flex;align-items:center;gap:2px}.ov-b{color:var(--shield);font-weight:800}.fx-row.ov{padding-left:4px;margin-top:2px}.pick-ov-t{margin-top:10px;font-size:.75rem;font-weight:700;color:var(--shield)}.home{display:flex;flex-direction:column;gap:16px;min-height:calc(100dvh - 24px);padding:12px 14px 0}.home-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.lvl-chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px}.lvl-num{width:30px;height:30px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center}.xp-bar{width:110px;height:12px;border-radius:999px;background:#0a0c14;overflow:hidden}.xp-bar .fill{height:100%;background:linear-gradient(90deg,#7fe08a,#4fae63)}.hero-strip{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}.hs-emoji{font-size:1.7rem}.hs-info{flex:1;min-width:0}.hs-info b{font-size:1rem}.hs-info small{display:block;color:var(--muted);font-size:.8rem}.home-mid{display:block}.scene-card{position:relative;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;background:#12141f;box-shadow:0 12px 30px #00000073;transition:transform .15s ease,border-color .15s ease}.scene-card:hover{transform:translateY(-3px);border-color:var(--accent)}.zone-art{width:100%;height:210px;display:block}.scene-label{position:absolute;left:12px;right:12px;bottom:10px;background:#0e1018d1;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:800;text-align:center}.battle-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;border:none;border-radius:16px;background:linear-gradient(180deg,#ffc14d,#f09a1a);color:#241a05;font-size:1.35rem;font-weight:800;letter-spacing:.5px;cursor:pointer;box-shadow:0 8px 22px #f09a1a59;transition:transform .1s ease}.battle-btn:active{transform:scale(.98)}.bb-glyph{width:30px;height:30px;color:#241a05}.bottom-nav{position:sticky;bottom:0;margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--bg);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.nav-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:68px;padding:8px 4px 6px;color:color-mix(in srgb,var(--tone, var(--accent)) 78%,#ffffff);font-size:.76rem;font-weight:600;cursor:pointer;border-radius:12px;border:1px solid color-mix(in srgb,var(--tone, var(--accent)) 35%,var(--line));background:linear-gradient(155deg,color-mix(in srgb,var(--tone, var(--accent)) 20%,transparent) 0%,transparent 62%),linear-gradient(180deg,var(--panel2),var(--panel));transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.nav-btn:hover{transform:translateY(-2px);border-color:var(--tone, var(--accent));box-shadow:0 8px 20px #0006}.nav-btn:active{transform:scale(.97)}.nav-ic{width:26px;height:26px}.nav-btn.center .nav-ic{width:30px;height:30px}.nav-ic svg{width:100%;height:100%}.mode-row{width:100%;display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;transition:border-color .12s ease,transform .08s ease}button.mode-row:hover{border-color:var(--accent);transform:translateY(-1px)}.mode-row.locked{opacity:.5;cursor:default}.mode-row .mr-emoji{font-size:1.5rem}.mr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.mr-info small{color:var(--muted);font-size:.76rem}.mr-info .mr-meta{color:#8d94a8;font-size:.7rem}.mr-go,.mr-state{font-weight:700;font-size:.85rem;color:#ffd97a;white-space:nowrap}.mode-row.locked .mr-state{color:var(--muted)}.build-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.bc-head{display:flex;align-items:center;gap:8px}.bc-head b{font-size:1rem}.bc-weapon{margin-left:auto;color:var(--muted);font-size:.82rem}.hs-emoji{width:26px;height:26px;color:var(--accent)}.build-slots{display:flex;gap:8px}.slot{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}.slot.ok{color:var(--text);border-color:var(--accent)}.slot.empty{color:#ff8a8a;border-color:#a04040;background:#a0404026;font-weight:800}.mode-row.coming{opacity:.55}.mode-row.disabled{opacity:.5}.current-badge{position:absolute;top:6px;right:8px;z-index:1;background:#ffd97a;color:#241a05;font-size:.68rem;font-weight:800;border-radius:999px;padding:1px 8px}.section-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}.section-head h2{flex:1;min-width:0;font-size:1.12rem;font-weight:800;color:var(--text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-head .btn.ghost{min-height:38px;padding:6px 12px;font-size:.82rem}.class-card-v.current{border-color:#ffd97a;box-shadow:0 0 0 1px #ffd97a73,0 10px 28px #00000073}.skill-pattern{position:absolute;top:0;right:0;bottom:0;left:0;color:var(--tone, var(--accent));opacity:.12;pointer-events:none;z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(120deg,rgba(0,0,0,.95),rgba(0,0,0,.3) 70%);mask-image:linear-gradient(120deg,#000000f2,#0000004d 70%)}.tab-count{color:var(--muted);font-weight:700;margin-left:5px}.tab-count.done{color:#ffd97a}.chip.frenzy{color:#ff8c42;border-color:#a05a24;background:#a05a2426;font-weight:700}