:root{--bg: #0b0a12;--bg-2: #141225;--panel: #1a1829;--panel-2: #221f36;--line: #2f2b47;--ink: #efe9dd;--ink-soft: #a9a39a;--ink-mute: #6e6a7a;--gold: #d4a24c;--ember: #ff7a3d;--ember-2: #ffb347;--green: #4ccf8e;--red: #ff5a5a;--blue: #5aa9ff;--sun: #b8860b;--frost: #2f7fb8;--shadow: #5b3f8f;--wild: #2e8b57;--forge: #a0522d;--radius: 14px;--radius-sm: 9px;--title: "Cinzel", "Georgia", serif;--body: "Inter", system-ui, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(120% 70% at 50% 0%,#1b1733 0%,var(--bg) 60%);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;color:inherit}h1,h2,h3{margin:0;font-family:var(--title);letter-spacing:.02em;text-wrap:balance}.app{max-width:480px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 10px) 14px calc(var(--safe-bottom) + 14px);gap:12px}@media(min-width:560px){body{background:radial-gradient(60% 50% at 50% 0%,#1b1733 0%,var(--bg) 60%)}.app{border-left:1px solid var(--line);border-right:1px solid var(--line);background:linear-gradient(180deg,#110f1c,var(--bg));min-height:100vh}}.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px}.top h2{font-size:17px}.wallet{display:flex;gap:10px;font-size:13px;font-weight:600}.wallet span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}.wallet .gold{color:var(--gold)}.wallet .crystal{color:var(--blue)}.nav{position:sticky;bottom:calc(var(--safe-bottom) + 8px);margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;border-radius:var(--radius);background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);backdrop-filter:blur(10px)}.nav button{padding:10px 6px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-soft);font-weight:600;font-size:13px}.nav button.is-on{background:var(--panel-2);color:var(--ink)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-weight:600;cursor:pointer;transition:transform .12s ease,filter .12s ease}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default}.btn-ember{background:linear-gradient(180deg,var(--ember-2),var(--ember));color:#1a0d05;border-color:transparent}.btn-ghost{background:transparent}.btn-block{width:100%}.btn-sm{min-height:34px;padding:6px 12px;font-size:13px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.overline{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}.muted{color:var(--ink-soft)}.small{font-size:13px}.err{color:var(--red);font-size:13px}.title{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:70vh}.title .crown{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3a2a16,#15101b 70%);border:1px solid #5a4322;box-shadow:0 0 60px -10px var(--ember);font-size:44px}.title h1{font-size:clamp(38px,11vw,56px);font-weight:800;color:var(--ember-2);text-shadow:0 0 28px color-mix(in srgb,var(--ember) 50%,transparent)}.title .tag{color:var(--ink-soft);font-size:15px}.title .tap{margin-top:18px;animation:pulse 2.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.card{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);text-align:left;cursor:pointer;width:100%}.card.is-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}.card.is-dim{opacity:.45}.medal{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;position:relative;font-family:var(--title);font-weight:800;font-size:20px;color:#fff;background:linear-gradient(160deg,var(--fc, #555),color-mix(in srgb,var(--fc, #555) 40%,#000));border:1px solid color-mix(in srgb,var(--fc, #555) 60%,#fff)}.portrait{width:52px;height:52px;border-radius:14px;display:block;position:relative;overflow:hidden;flex:none;background:radial-gradient(120% 90% at 50% 15%,color-mix(in srgb,var(--fc, #555) 55%,#1a1829),#0b0a12 80%);border:1px solid color-mix(in srgb,var(--fc, #555) 60%,#fff)}.portrait img{width:100%;height:100%;object-fit:cover;display:block}.portrait.sm{width:40px;height:40px;border-radius:11px}.portrait.lg{width:64px;height:64px;border-radius:18px}.portrait.xl{width:96px;height:96px;border-radius:22px}.portrait .lvl{position:absolute;right:3px;bottom:3px;font:700 10px/1 var(--body);padding:3px 5px;border-radius:6px;background:#0b0a12d9;border:1px solid var(--line);color:var(--ink)}.medal.sm{width:40px;height:40px;border-radius:11px;font-size:16px}.medal.lg{width:64px;height:64px;border-radius:18px;font-size:26px}.medal .lvl{position:absolute;right:-4px;bottom:-4px;font:700 10px/1 var(--body);padding:3px 5px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}.card .name{font-weight:700;font-size:14px}.card .sub{font-size:12px;color:var(--ink-soft)}.stars{color:var(--gold);font-size:12px;letter-spacing:1px}.rar-legendary .name{color:var(--ember-2)}.rar-epic .name{color:#c9a6ff}.chapters{display:flex;gap:8px}.chapters button{flex:1;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);font-weight:600}.chapters button.is-on{color:var(--ink);background:var(--panel-2);border-color:var(--gold)}.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.stage{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700;cursor:pointer;position:relative}.stage .n{font-size:15px}.stage .s{font-size:10px;color:var(--gold);letter-spacing:1px}.stage.is-next{border-color:var(--ember);box-shadow:0 0 18px -6px var(--ember)}.stage.is-locked{opacity:.38;cursor:default}.stage.is-boss{background:linear-gradient(180deg,#2a1a1a,var(--panel));border-color:#6b3a3a}.stage.is-camp{border-style:dashed}.story{font-family:var(--title);font-size:15px;line-height:1.5;color:var(--ink)}.story p{margin:0 0 8px}.enemy-list{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:12px}.chip i{width:8px;height:8px;border-radius:50%;background:var(--fc, #888)}.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.slots .row-label{grid-column:1 / -1;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:2px 0 -2px}.slot{min-height:92px;border-radius:var(--radius-sm);border:1px dashed var(--line);background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:12px;color:var(--ink-mute)}.slot.is-filled{border-style:solid;background:var(--panel);color:var(--ink)}.slot.is-pick{border-color:var(--ember)}.slot .name{font-size:12px;font-weight:600;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}.roster{display:grid;gap:6px}.battle{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg);height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 92px);min-height:440px;touch-action:manipulation;isolation:isolate}.battle canvas{display:block;outline:none}.scene-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--ink-soft);font-size:14px;background:radial-gradient(70% 50% at 50% 40%,#1b1733,var(--bg) 70%)}.battle-hud{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px;pointer-events:none}.battle-hud>*{pointer-events:auto}.hud-left{display:grid;gap:2px;padding:6px 10px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);backdrop-filter:blur(8px)}.hud-left .round{font-family:var(--title);font-weight:700;font-size:15px;line-height:1.2}.hud-left .round small{font-size:11px;color:var(--ink-mute);font-weight:600}.hud-left .where{font-size:11px;color:var(--ink-soft);letter-spacing:.04em}.hud-right{display:flex;gap:6px}.hud-right .btn{background:color-mix(in srgb,var(--panel-2) 80%,transparent);backdrop-filter:blur(8px)}.hud-right .btn.is-on{border-color:var(--gold);color:var(--ember-2)}.banner{position:absolute;top:64px;left:50%;transform:translate(-50%);z-index:2;pointer-events:none;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);backdrop-filter:blur(10px);animation:bannerIn .26s cubic-bezier(.2,.9,.3,1.1) both;max-width:calc(100% - 28px)}.banner span{display:grid;line-height:1.15;min-width:0}.banner b{font-family:var(--title);font-size:13px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.banner em{font-style:normal;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.banner.is-big{border-color:var(--ember);box-shadow:0 0 28px -6px var(--ember),0 0 0 1px color-mix(in srgb,var(--ember) 40%,transparent) inset;animation:bigIn .42s cubic-bezier(.2,.9,.3,1.25) both}.banner.is-big b{color:var(--ember-2);font-size:15px}.banner.is-big em{color:var(--ink)}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-8px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes bigIn{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}60%{opacity:1;transform:translate(-50%) scale(1.06)}to{opacity:1;transform:translate(-50%) scale(1)}}.result{text-align:center;display:grid;gap:10px}.result-over{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(14px);box-shadow:0 20px 60px -20px #000;animation:riseIn .38s cubic-bezier(.2,.9,.3,1.05) both;max-height:calc(100% - 20px);overflow:auto}@keyframes riseIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.result h2{font-size:30px}.result h2.win{color:var(--ember-2)}.result h2.lose{color:var(--ink-soft)}.result .big-stars{font-size:28px;color:var(--gold);letter-spacing:6px}.rewards{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.rewards span{padding:6px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;font-weight:600}.hero-detail{display:grid;gap:8px}.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}.statgrid div{padding:6px 2px;border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--line)}.statgrid b{display:block;font-size:15px}.statgrid span{font-size:10px;color:var(--ink-mute);letter-spacing:.1em;text-transform:uppercase}.skill{display:grid;gap:2px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--line)}.skill b{font-size:13px}.skill span{font-size:12px;color:var(--ink-soft)}.skill .kind{color:var(--gold);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 84px);transform:translate(-50%);padding:10px 14px;border-radius:999px;background:var(--panel-2);border:1px solid var(--gold);font-size:13px;font-weight:600;z-index:20;max-width:90vw;text-align:center}.sheet{position:fixed;inset:0;background:color-mix(in srgb,#000 60%,transparent);display:flex;align-items:flex-end;justify-content:center;z-index:10}.sheet>div{width:100%;max-width:480px;background:var(--panel);border-radius:var(--radius) var(--radius) 0 0;padding:16px 16px calc(var(--safe-bottom) + 16px);border:1px solid var(--line);display:grid;gap:12px;max-height:86vh;overflow:auto}@media(prefers-reduced-motion:reduce){.banner,.result-over,.title .tap{animation:none!important;transition:none!important}}