:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#100c18;color:#f7ecdf;--muted:#cec0c9;--line:#584052;--gold:#efc67f}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 64% 5%,#3c2344,#100c18 64%) fixed}
main{width:min(100%,660px);margin:auto;padding:calc(15px + env(safe-area-inset-top)) 14px calc(26px + env(safe-area-inset-bottom))}
header{padding:16px 13px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,#2f1c38,#201629);border-radius:15px 15px 0 0}
h1,h2,h3{font-family:Georgia,serif;margin:0;color:var(--gold)}
h1{font-size:clamp(24px,7vw,38px)}
h2{font-size:23px;margin:15px 0 9px}
.masthead,.controls,.stats,nav,#wallet{display:flex;align-items:center;gap:8px}
.masthead{justify-content:space-between}
#wallet{margin-top:12px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
button{font:inherit;color:inherit;border:1px solid var(--line);background:#2b2035;border-radius:8px;padding:9px 10px;min-height:44px;cursor:pointer}
button:focus-visible,summary:focus-visible{outline:2px solid #f7dcaa;outline-offset:2px}
button[aria-pressed=true],.primary{background:var(--gold);color:#281722;border-color:#f6d49e;font-weight:700}
button:disabled{opacity:.45;cursor:default}
nav{margin:9px 0 14px;gap:5px}nav[hidden]{display:none}nav button{flex:1;font-size:.9rem;padding-inline:5px}
#status{min-height:24px;color:#ffdfaa;margin:10px 0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}
.card{background:#231a2b;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card[data-rarity="Эпический"]{border-color:#ae6ac3}.card[data-rarity="Редкий"]{border-color:#6498bc}
.card img{width:100%;aspect-ratio:1.15;object-fit:cover;display:block}
.card-body{padding:9px}
.card h3{font-size:1.18rem}
.card p,.card summary,.subtle{color:var(--muted);font-size:.84rem}
.card p{margin:5px 0}.card button{width:100%;font-size:.8rem;margin-top:6px}
summary{cursor:pointer;padding:7px 0}
.controls{flex-wrap:wrap}.controls button{flex:1;min-width:100px}
.stage{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:5px;text-align:left;gap:8px}
.stage small{color:inherit}
.arena{padding:13px 8px;border:1px solid #765669;border-radius:12px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#49304e,#21182b 68%)}
.enemy{margin:auto auto 16px;max-width:250px}.enemy h3{margin-bottom:6px}
.fighters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fighter{position:relative;padding:5px 3px;min-width:0;font-size:.81rem}
.fighter img{width:100%;max-width:100px;aspect-ratio:1;object-fit:cover;border-radius:7px;display:block;margin:auto auto 4px}
.fighter:disabled img{filter:grayscale(1)}
progress{accent-color:#77c09f;width:100%;height:10px}.enemy progress{accent-color:#e77575}
.turnline{margin:10px 0;min-height:25px;color:var(--gold)}
.float{pointer-events:none;position:absolute;z-index:1;top:4px;right:5px;color:#ff9788;font-size:1rem;font-weight:800;text-shadow:1px 1px 3px #000;animation:impact .8s ease-out both}
.float.heal,.float.shield{color:#9ce8c0}
@keyframes impact{from{transform:translateY(10px);opacity:1}to{transform:translateY(-17px);opacity:0}}
@media(prefers-reduced-motion:reduce){.float{animation:none;position:static}}
.welcome{text-align:center;padding:30px 16px;background:radial-gradient(ellipse at 50% 20%,#583c56,#22182b 70%);border:1px solid #81617d;border-radius:16px}
.chest-mark{display:grid;place-items:center;margin:0 auto 17px;width:78px;height:62px;border:3px double #f4cf8e;border-radius:13px;background:linear-gradient(145deg,#604577,#311d40);color:#ffda91;font-size:2rem;box-shadow:0 0 28px #9970b77a}
.chests{display:grid;gap:9px;margin-bottom:12px}
.chest{padding:10px 13px;background:#23192c;border:1px solid var(--line);border-radius:10px}
.chest h3{font-size:1rem}
.crest{display:grid;place-items:center;aspect-ratio:1.15;background:radial-gradient(ellipse,#60436e,#201629 72%);color:var(--gold);font-size:2.5rem}
.fighter .crest{border-radius:7px;aspect-ratio:1;font-size:1.45rem;margin-bottom:4px}

.loot {
  text-align:center;
  padding:clamp(20px,6vw,38px);
  background:radial-gradient(ellipse at top,#453351,#1d162b 70%);
  border:1px solid #9e7854;
  border-radius:18px;
}
.loot img,.loot .crest { width:min(54vw,210px); height:220px; object-fit:cover; border-radius:12px; margin-inline:auto; }
.loot p { margin:.7em 0; }
.loot button { width:100%; margin-top:12px; }
.arena { background:radial-gradient(ellipse at 50% 20%,#402231,#131626 70%); padding:16px; }
.arena h2,.side-label { margin:0 0 8px; }
.arena .side-label { margin-top:14px; font-weight:700; color:#f7dca4; }
.enemy-emblem { font-size:72px; line-height:1.2; text-shadow:0 0 24px #ff8568; }
.arena .enemy { text-align:center; max-width:380px; margin-inline:auto; }
.battle-log { padding:8px 12px; list-style:none; font-size:.85rem; border-top:1px solid #795768; }
.battle-log li { padding:3px 0; }

#nav:not([hidden]) { display:flex; flex-wrap:wrap; }
#nav button { flex:1 1 auto; min-height:42px; }
.enemy-art { display:block; width:min(100%,250px); height:170px; object-fit:cover; object-position:center 35%; margin:auto; border-radius:10px; }
.intent { color:#ffd3b4; font-size:.9rem; }
.arena .fighters { grid-template-columns:repeat(auto-fit,minmax(95px,1fr)); }
.arena .fighter small { display:block; color:#f4daac; }
.arena .controls { position:sticky; bottom:0; background:#191627; padding:8px; z-index:2; border-radius:10px; }

.arena { background:
  radial-gradient(ellipse at 50% 25%,#b34b4333,transparent 56%),
  repeating-linear-gradient(164deg,transparent 0 47px,#c5885920 49px,transparent 50px 90px),
  linear-gradient(#17111c,#35242d 52%,#1a1929 75%); }
.enemy-line { display:flex; justify-content:center; align-items:flex-end; gap:9px; }
.enemy-line .enemy { flex:0 1 230px; min-width:0; margin:0; }
.arena .field-sprite { width:100%; max-width:220px; height:clamp(105px,33vw,200px); object-fit:contain; object-position:center bottom; border:0; background:none; filter:drop-shadow(0 9px 7px #0009); }
.arena .hero-sprite { height:clamp(83px,24vw,150px); }
.arena .fallen { opacity:.3; }
.arena .selected-foe { border-color:#e89762; box-shadow:0 0 14px #dd606050; }
.arena .phase { color:#ffbb92; font-size:.8rem; }
.arena .enemy button { min-height:44px; font-size:.8rem; }
.arena .controls { display:flex; flex-wrap:wrap; }
.recruit { display:inline-grid; justify-items:center; vertical-align:top; width:46%; margin:2%; }
.recruit img,.recruit .crest { height:106px; width:100%; object-fit:cover; }