:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--bg:#0b0e15;--panel:#161b27;--panel2:#1b2230;--text:#f2ecdf;--muted:#959ba9;--gold:#e9bc6c;--red:#e66b65;--violet:#aa93ed}*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 50% -10%,#282535 0,transparent 46%),var(--bg)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.app{margin:0 auto;max-width:540px;min-height:100vh;padding:0 17px env(safe-area-inset-bottom)}.topbar{height:82px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:10px;align-items:center}.brand-icon{display:grid;place-items:center;border:1px solid #685545;background:#282334;color:var(--gold);width:44px;height:44px;border-radius:14px;font-size:28px}.eyebrow{display:block;color:#c29f73;font-size:10px;letter-spacing:2.4px;font-weight:800}.brand h1{margin:3px 0 0;font:750 18px Georgia,serif;letter-spacing:1.7px}.icon-button{border:1px solid #363c49;border-radius:12px;background:#1b202c;width:38px;height:38px;color:#aab2c2;font-size:23px}.icon-button.active{color:var(--gold);border-color:#9e835a}.hero-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:1px 0 14px}.summary-stat{background:#1a1e2b;border:1px solid #2b2f3f;border-radius:13px;min-height:63px;padding:12px}.summary-label{display:block;color:#a5a1a5;font-size:9px;letter-spacing:1.5px;font-weight:800}.summary-stat strong{display:block;margin-top:5px;font-size:23px;letter-spacing:-.5px}.summary-stat .gold{color:var(--gold)}.summary-stat .essence{color:var(--violet)}.arena{height:350px;position:relative;overflow:hidden;border-radius:19px;border:1px solid #4b3f47;background:radial-gradient(ellipse 55% 55% at 50% 55%,#3b2935 0%,#252330 45%,#161b25 90%);box-shadow:0 14px 60px #0006}.arena-grid{position:absolute;inset:43% -40px -60px;opacity:.3;background:repeating-linear-gradient(0deg,transparent 0 39px,#a4756b 40px,transparent 41px),repeating-linear-gradient(90deg,transparent 0 39px,#a4756b 40px,transparent 41px);transform:perspective(180px) rotateX(38deg)}.arena-glow{position:absolute;left:15%;top:10%;width:75%;height:75%;background:radial-gradient(ellipse,#95534533 0%,transparent 60%);pointer-events:none}.arena-top{position:absolute;top:17px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}.location-eyebrow,.card-eyebrow{color:#ab9b9b;font-size:9px;font-weight:800;letter-spacing:1.9px}.arena h2{margin:4px 0 0;font:700 21px Georgia,serif}.stage-pill{background:#281f27;border:1px solid #674b47;color:#f2bd88;padding:8px 10px;border-radius:9px;font-size:10px;letter-spacing:1px;font-weight:800}.battle-scene{position:absolute;inset:77px 10px 40px;display:flex;justify-content:space-around;align-items:center}.combatant{position:relative;width:43%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end}.combatant-name{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;letter-spacing:1.2px;color:#dbd9db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.character{position:relative;height:145px;width:125px;flex-shrink:0;transition:filter .3s,transform .18s}.hero-side.hit .character,.monster-side.hit .character{animation:impact .28s}.hero-side.strike .character{animation:slash .26s}.character-hero .aura{position:absolute;width:100px;height:115px;left:15px;top:20px;border-radius:50%;background:#d19b6530;filter:blur(16px)}.character-hero .hood{position:absolute;left:35px;top:6px;width:57px;height:69px;border-radius:50% 50% 35% 35%;background:linear-gradient(110deg,#8c857f,#393b48 48%,#191f2d);box-shadow:inset 8px 3px 8px #f8e2be18}.character-hero .face{position:absolute;left:51px;top:32px;width:25px;height:23px;border-radius:40% 40% 60% 60%;background:#181b28;box-shadow:0 3px 0 #c1a47933}.character-hero .face:after{content:"";position:absolute;left:4px;top:9px;width:17px;height:3px;background:#f2d2a6;box-shadow:0 0 9px #ffe4b2}.character-hero .torso{position:absolute;left:28px;top:65px;width:75px;height:77px;clip-path:polygon(25% 0,80% 0,100% 100%,0 100%);background:linear-gradient(100deg,#343947,#71747b 45%,#222633 75%);box-shadow:inset 0 0 15px #171c24}.character-hero .blade{position:absolute;left:100px;top:29px;transform:rotate(23deg);width:8px;height:106px;clip-path:polygon(50% 0,100% 20%,100% 79%,0 79%,0 20%);background:linear-gradient(90deg,#86889d,#f3d9ae,#81859a);box-shadow:0 0 13px #edd4b677}.character-hero .blade:after{content:"";position:absolute;bottom:17px;left:-9px;width:28px;height:5px;background:#a57b4e}.character-hero .feet{position:absolute;left:36px;bottom:0;width:58px;height:12px;border-radius:50%;background:#0c101a;filter:blur(4px)}.character-monster .monster-body{position:absolute;left:25px;top:30px;width:85px;height:113px;clip-path:polygon(50% 0,87% 21%,100% 60%,84% 100%,55% 88%,24% 100%,0 63%,16% 21%);border-radius:45%;background:linear-gradient(130deg,#877268,#45343e 55%,#292634);box-shadow:inset 0 -10px 15px #0e1117}.character-monster .monster-ears:before,.character-monster .monster-ears:after{content:"";position:absolute;top:13px;left:25px;width:38px;height:65px;background:#53414b;clip-path:polygon(0 0,100% 55%,33% 100%)}.character-monster .monster-ears:after{left:66px;transform:scaleX(-1)}.character-monster .monster-eyes{position:absolute;left:44px;top:77px;width:12px;height:7px;border-radius:50%;background:#f19875;box-shadow:31px 0 #f19875,0 0 11px #f67766,31px 0 11px #f67766}.character-monster .monster-fang{position:absolute;top:97px;left:58px;width:30px;height:8px;border-bottom:3px solid #dfbaac;border-radius:50%}.character-monster.boss .monster-body{background:linear-gradient(135deg,#8e5762,#3f2132 50%,#2b1a2e);transform:scale(1.06)}.character-monster.boss .monster-eyes{background:#ffdb7c;box-shadow:31px 0 #ffdb7c,0 0 13px #ffa350,31px 0 13px #ffa350}.versus{color:#d9aa85;font-size:27px;position:absolute;left:50%;top:55px;transform:translateX(-50%);z-index:2;opacity:.85}.health-track{width:94%;height:7px;border-radius:10px;background:#171922;overflow:hidden;margin-top:0;border:1px solid #5c485077}.health-fill{height:100%;border-radius:inherit;transition:width .25s}.hero-health{background:linear-gradient(90deg,#6baa87,#9dde9b)}.enemy-health{background:linear-gradient(90deg,#9e373d,#e3746a)}.health-number{color:#ded5ca;font-size:10px;margin-top:5px}.combat-feed{position:absolute;bottom:0;left:0;right:0;min-height:37px;padding:10px 15px;color:#f1d3af;background:#101620b8;font-size:11px;text-align:center}.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e3b378;box-shadow:0 0 11px #e3b378;margin-right:8px;animation:pulse 1.2s infinite}.progress-card{background:var(--panel);border:1px solid #313443;border-radius:16px;padding:15px 15px 14px;margin:12px 0 15px}.progress-head{display:flex;justify-content:space-between;gap:5px;align-items:center}.progress-head strong{font-size:13px;display:block;margin-top:6px}.boss-hint{font-size:10px;color:var(--gold);white-space:nowrap}.progress-track,.xp-track{height:6px;border-radius:10px;background:#353746;margin-top:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#e1a873,#f0d09a);transition:width .3s}.xp-row{font-size:10px;display:flex;justify-content:space-between;color:#acabb9;letter-spacing:1px;font-weight:750;margin-top:13px}.xp-track{height:4px;margin-top:7px}.xp-fill{height:100%;background:linear-gradient(90deg,#8176da,#bcaef5);transition:width .3s}.fight-actions{display:flex;gap:9px;margin-top:15px}.skill-button{border:1px solid #a68059;background:linear-gradient(120deg,#6b4434,#8c583e);border-radius:12px;color:#fff4dc;display:flex;gap:10px;align-items:center;padding:11px 15px;flex:1;text-align:left}.skill-button>span{font-size:26px}.skill-button strong,.skill-button small{display:block}.skill-button strong{font-size:12px}.skill-button small{font-size:10px;opacity:.8;margin-top:3px}.skill-button:disabled{opacity:.55;filter:saturate(.65)}.auto-button{width:97px;color:#d8d0d0;background:#252b37;border:1px solid #464a59;border-radius:12px;font-size:12px;font-weight:700}.navtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;background:#151a23;border:1px solid #2e3340;border-radius:14px}.navtab{border:0;background:transparent;color:#b0abb4;border-radius:10px;padding:12px 0;font-size:15px;font-weight:650}.navtab span{margin-left:5px;font-size:11px}.navtab.active{background:#34303a;color:#f3c789;box-shadow:inset 0 0 0 1px #5c4c49}.tabpanel{min-height:185px;padding:18px 0 12px}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px}.panel-heading h3{font:700 21px Georgia,serif;margin:5px 0 0}.subtle-text{color:#a7aab5;font-size:11px}.upgrade-list{display:grid;gap:9px}.upgrade-row{display:flex;align-items:center;gap:11px;width:100%;min-height:68px;border:1px solid #343946;background:#1b202c;color:#faf0df;border-radius:13px;text-align:left;padding:9px 12px}.upgrade-row:disabled{opacity:.47}.upgrade-icon{display:grid;place-items:center;flex:0 0 43px;height:43px;background:#3b3135;border:1px solid #605152;border-radius:11px;font-size:23px;color:#edbc82}.upgrade-copy{flex:1}.upgrade-copy strong,.upgrade-copy small{display:block}.upgrade-copy strong{font-size:13px}.upgrade-copy strong span{font-size:11px;color:var(--gold)}.upgrade-copy small{font-size:10px;color:#a3a5b0;margin-top:5px}.price{font-size:12px;color:var(--gold);white-space:nowrap;font-weight:800}.panel-intro{font-size:12px;line-height:1.6;color:#b8b5c0}.evolutions{display:grid;gap:10px;margin:13px 0}.evo-card{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:#1d2330;border:1px solid #353b4a;color:var(--text);border-radius:13px;padding:12px}.evo-card[disabled]{opacity:.54}.evo-card.chosen{border-color:#d0ae6e;background:#2d2831}.evo-icon{font-size:32px;width:42px;text-align:center}.evo-flame .evo-icon{color:#ff9a63}.evo-shadow .evo-icon{color:#be99fb}.evo-iron .evo-icon{color:#8bd4d2}.evo-card span:nth-child(2){flex:1}.evo-card strong,.evo-card small{display:block}.evo-card strong{font-size:15px}.evo-card small{color:#a5aab5;font-size:10px;margin-top:4px}.evo-status{font-size:10px;color:#d5bd9d}.milestones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:11px}.milestones>div{background:#1b202d;border-radius:13px;border:1px solid #353b47;padding:13px}.milestones small{display:block;color:#a9a9b3;font-size:9px;letter-spacing:.5px}.milestones strong{font-size:25px;display:block;margin-top:8px;color:#e6c18d}.secondary-button{width:100%;border:1px solid #887055;border-radius:12px;background:#312b2e;color:#edd4a9;padding:12px;font-weight:700;font-size:12px}.journal-list{margin:15px 0}.log-entry{font-size:11px;color:#b7bac4;border-bottom:1px solid #343847;padding:9px}.log-entry::before{content:"✧";color:#e9b979;margin-right:10px}.reset-button{border:0;background:none;color:#b8898a;font-size:11px;text-decoration:underline;padding:12px 0}.offline-banner{background:#283b34;border:1px solid #547460;color:#b6e0c3;border-radius:12px;padding:12px;margin-bottom:12px;font-size:12px;line-height:1.5}.hidden{display:none!important}.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:25px;max-width:calc(100vw - 30px);width:max-content;background:#36343c;border:1px solid #8c775d;border-radius:12px;padding:12px 17px;font-size:13px;box-shadow:0 8px 35px #000a;z-index:50;text-align:center}footer{color:#737985;font-size:10px;line-height:1.9;padding:8px 0 24px;text-align:center}footer span{display:block}.character-hero.flame{filter:drop-shadow(0 0 15px #ff793d88)}.character-hero.flame .aura{background:#d64d2e88}.character-hero.shadow{filter:drop-shadow(0 0 15px #ab72fc9f)}.character-hero.shadow .aura{background:#7240ae89}.character-hero.iron{filter:drop-shadow(0 0 11px #74c9d0a0)}.character-hero.iron .aura{background:#71c6d370}.monster-side.hit{filter:brightness(1.6)}@keyframes impact{0%,100%{transform:translateX(0)}35%{transform:translateX(8px)}60%{transform:translateX(-5px)}}@keyframes slash{0%,100%{transform:translateX(0)}45%{transform:translateX(18px)}}@keyframes pulse{50%{opacity:.3}}@media(min-width:600px){.app{border-left:1px solid #242633;border-right:1px solid #242633}.arena{height:380px}.battle-scene{inset:90px 15px 40px}.character{transform:scale(1.08)}}@media(max-width:375px){.app{padding:0 11px}.brand h1{font-size:16px}.brand-icon{width:38px;height:38px}.arena{height:330px}.battle-scene{inset:69px 6px 38px}.character{transform:scale(.88)}.combatant-name{font-size:9px}.summary-stat{padding:10px}.summary-stat strong{font-size:20px}}

/* === v0.2: atmosphere, combat feedback, inventory and responsive navigation === */
body{background:radial-gradient(ellipse at 50% -5%,#24222f 0,transparent 51%),#0a0e16}
.topbar{height:86px}
.brand h1{font-size:18px;letter-spacing:1.1px}
.eyebrow{color:#c9a16e;letter-spacing:2px}
.brand-icon{box-shadow:0 0 24px #df8f3822,inset 0 0 15px #ba73331b;border-color:#ac7e5366}
.hero-summary{margin-bottom:12px}
.summary-stat{background:linear-gradient(150deg,#23232c,#181d29 75%);border-color:#383442}
.summary-label{letter-spacing:1.3px}
.arena{height:375px;background:radial-gradient(ellipse at 48% 28%,#604453 0%,#332b40 28%,#1b1f2d 65%,#141821 93%);border:1px solid #79605780;box-shadow:0 0 0 1px #ffffff06,0 22px 46px #0009,inset 0 1px 28px #fff1;isolation:isolate}
.arena::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,#c28e7720,transparent 30%,transparent 58%,#0b0d18bb 100%);pointer-events:none;z-index:0}
.arena::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 15% 24%,#f9c39673 0 1px,transparent 2px),radial-gradient(circle at 64% 14%,#eab09070 0 1px,transparent 2px),radial-gradient(circle at 92% 40%,#fff0c745 0 1px,transparent 2px),radial-gradient(circle at 38% 61%,#ffa97655 0 1px,transparent 2px);pointer-events:none;z-index:0}
.arena-grid{top:59%;opacity:.19;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 36px,#c1988460 37px,transparent 38px),repeating-linear-gradient(90deg,transparent 0 36px,#c1988460 37px,transparent 38px)}
.arena-glow{background:radial-gradient(ellipse at 50% 55%,#c2736935 0%,transparent 58%);z-index:0}
.moon{position:absolute;width:104px;height:104px;left:calc(50% - 52px);top:36px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#f6c9a2 0,#bc8694 56%,#765570 80%,#503c5d 100%);box-shadow:0 0 25px #e2a9a555,0 0 100px #c78a7b33;opacity:.45;z-index:0}
.ruins{position:absolute;bottom:54px;width:98px;height:220px;opacity:.46;z-index:0;filter:blur(.2px)}
.ruins-left{left:-12px;background:linear-gradient(0deg,#121823,#2b2a35);clip-path:polygon(0 0,13% 0,17% 18%,32% 20%,32% 50%,51% 46%,51% 30%,65% 26%,66% 5%,81% 5%,82% 56%,96% 60%,100% 100%,0 100%)}
.ruins-right{right:-13px;background:linear-gradient(0deg,#111720,#3d3440);clip-path:polygon(0 60%,19% 52%,19% 17%,28% 10%,28% 0,43% 0,44% 38%,60% 43%,60% 29%,72% 29%,73% 0,91% 0,92% 50%,100% 61%,100% 100%,0 100%)}
.embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:14%;width:3px;height:3px;background:#ffc18f;border-radius:50%;box-shadow:0 0 9px 2px #f8a56b;opacity:0;animation:emberFly 6s infinite ease-out}
.embers i:nth-child(1){left:14%;animation-delay:0s}.embers i:nth-child(2){left:28%;animation-delay:1.1s}.embers i:nth-child(3){left:48%;animation-delay:2s}.embers i:nth-child(4){left:80%;animation-delay:2.8s}.embers i:nth-child(5){left:62%;animation-delay:3.5s}.embers i:nth-child(6){left:91%;animation-delay:4.3s}.embers i:nth-child(7){left:34%;animation-delay:5.1s}.embers i:nth-child(8){left:72%;animation-delay:5.9s}
.arena-top{z-index:4}
.arena-top h2{text-shadow:0 2px 15px #0008}
.stage-pill{background:#301d26d9;backdrop-filter:blur(8px)}
.battle-scene{z-index:2;inset:83px 12px 42px}
.combatant{z-index:1}
.character{filter:drop-shadow(0 14px 7px #0b0b1699);animation:idleBreath 3s ease-in-out infinite;transform-origin:bottom center}
.character-hero .hood{background:linear-gradient(110deg,#b3a18f,#4b4b59 42%,#171d2c);box-shadow:inset 8px 3px 8px #f8e2be28,8px 5px 8px #141724aa}
.character-hero .torso{background:linear-gradient(100deg,#262a39,#9b9792 47%,#33343f 75%);box-shadow:inset 0 0 16px #171c24}
.character-hero .blade{box-shadow:0 0 14px #edd4b699}
.character-monster .monster-body{filter:drop-shadow(0 0 20px #1b132c);background:linear-gradient(130deg,#9d7876,#4e3a47 55%,#292231)}
.character-monster.boss{filter:drop-shadow(0 0 14px #db755688)}
.character-monster.boss .monster-body{background:linear-gradient(135deg,#b46566,#61304c 50%,#321e39)}
.versus{top:90px;opacity:.88;z-index:0;font-size:25px}
.versus span{display:grid;place-items:center;width:35px;height:35px;border:1px solid #f4c58b3b;border-radius:50%;background:#1e1c2990;color:#f8c890;box-shadow:0 0 16px #cb804c22}
.combatant-name{letter-spacing:.55px;text-shadow:0 1px 5px #090b14}
.combat-feed{background:linear-gradient(90deg,#111623e9,#161927db,#111623e9);z-index:4;border-top:1px solid #fbc4871a}
.damage-float{position:absolute;z-index:8;pointer-events:none;font-weight:900;font-size:21px;text-shadow:0 3px 10px #05050b,0 0 8px #000;white-space:nowrap;animation:damageRise .85s ease-out both}
.damage-float.hitnum{color:#f7d8ad}.damage-float.crit{color:#ffd371;font-size:26px}.damage-float.taken{color:#ff8e8e;font-size:17px}
.monster-side.hit .character{animation:impact .25s}
.hero-side.strike .character{animation:slash .31s}
.progress-card{background:linear-gradient(140deg,#1d2330,#141a25);border-color:#383744;box-shadow:inset 0 1px #ffffff07}
.skill-button{background:linear-gradient(130deg,#975633,#5e342c);box-shadow:inset 0 1px #ffffff1b,0 4px 16px #752d191f;transition:transform .12s,filter .12s}
.skill-button:not(:disabled):active{transform:scale(.975)}
.auto-button{background:#242936}
.world-banner{display:flex;gap:13px;align-items:center;margin-bottom:14px;padding:13px 14px;background:linear-gradient(120deg,#2a2430,#1c2430);border:1px solid #66514d77;border-radius:15px}
.world-symbol{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#e6b581;background:radial-gradient(circle,#75453a4d,#272230);border:1px solid #96644855}
.world-copy{flex:1;min-width:0}.world-copy strong{display:block;font:700 16px Georgia,serif;color:#f2d8b8;margin-top:4px}.world-copy small{display:block;color:#aaaab5;font-size:10px;line-height:1.45;margin-top:4px}
.world-count{font:700 30px Georgia,serif;color:#c39265;opacity:.67}
.navtabs{grid-template-columns:repeat(4,1fr);gap:3px;padding:5px;border-color:#363541;background:#151a24}
.navtab{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:9px 2px 8px;min-height:62px;font-size:10px}
.navtab span{margin-left:0;font-size:10px;letter-spacing:.1px}
.navtab .tab-icon{font-size:20px;line-height:1.05;color:#aca4ad}
.navtab.active .tab-icon{color:#f2c588}
.new-badge{position:absolute;right:16%;top:7px;height:7px;width:7px;border-radius:50%;background:#eaba72;box-shadow:0 0 10px #fbb66a}
.panel-heading{margin-top:2px}
.forge-note{margin:15px 0 3px;font-size:11px;color:#9da2b0;line-height:1.6}
.equipment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 18px}
.equipment-slot{display:flex;align-items:center;flex-direction:column;gap:6px;min-height:114px;text-align:center;background:linear-gradient(150deg,#272535,#181e29);border:1px dashed #66504b;border-radius:12px;padding:10px 6px}
.equipment-slot.equipped{border-style:solid;border-color:#ac806188;background:linear-gradient(150deg,#3d302f,#1c222d)}
.slot-glyph{font-size:28px;color:#c6a17f}
.equipment-slot small{font-size:9px;letter-spacing:1px;color:#c2a8a0}
.equipment-slot strong{font-size:10px;font-weight:650;line-height:1.35;color:#f3d7b7;overflow-wrap:anywhere}
.loot-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.loot-title strong{font:700 17px Georgia,serif}.loot-title small{font-size:9px;color:#999fae;max-width:49%;text-align:right;line-height:1.4}
.inventory-list{display:grid;gap:9px}
.empty-loot{text-align:center;color:#8c96aa;font-size:12px;padding:30px 12px;border:1px dashed #475060;border-radius:12px;background:#181d29}
.loot-row{display:flex;align-items:center;gap:10px;padding:10px;background:#1c222d;border:1px solid #3a3e4b;border-radius:13px}
.loot-row.rare{border-color:#677cc177}.loot-row.epic{border-color:#ab6cda88;background:linear-gradient(110deg,#29233b,#1a202a)}
.loot-symbol{display:grid;place-items:center;width:42px;height:48px;flex:0 0 42px;background:#2d2d38;border:1px solid #4b4a55;border-radius:10px;color:#d7b58a;font-size:25px}
.loot-row.rare .loot-symbol{color:#93b6ff}.loot-row.epic .loot-symbol{color:#d3a2f9}
.loot-description{flex:1;min-width:0}.loot-description strong{font-size:12px;line-height:1.3;display:block}.loot-description small{display:block;color:#abb0c2;font-size:10px;line-height:1.5;margin-top:4px}
.loot-actions{display:flex;flex-direction:column;gap:5px}
.loot-actions button{border:1px solid #7e674c;border-radius:8px;font-size:10px;font-weight:750;padding:7px 8px;white-space:nowrap;color:#f7dfbe;background:#4e3d34}
.loot-actions button:disabled{opacity:.48}.loot-actions .loot-sell{background:#272e39;border-color:#424957;color:#b9bdc9;font-size:9px}
.daily-card{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0;padding:14px;border:1px solid #8a684a77;border-radius:14px;background:linear-gradient(100deg,#332835,#282633)}
.daily-card strong{display:block;font:700 18px Georgia,serif;margin:6px 0;color:#f0d2ac}.daily-card small{display:block;color:#aaaab8;font-size:11px}
.daily-button{border:1px solid #c59668;border-radius:11px;background:linear-gradient(140deg,#996641,#6b433a);padding:12px;color:#ffe2b7;font-size:11px;font-weight:800;white-space:nowrap}
.daily-button:disabled{opacity:.6;background:#3c3840;border-color:#6e6365}
.stats-card{display:flex;align-items:center;justify-content:space-between;background:#1d2330;border:1px solid #3a404e;border-radius:11px;padding:13px;margin:12px 0;gap:10px}.stats-card span{color:#a4a7b5;font-size:10px;letter-spacing:.6px}.stats-card strong{font-size:11px;text-align:right}
@keyframes emberFly{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.7}70%{opacity:.6}100%{transform:translateY(-225px) translateX(28px);opacity:0}}
@keyframes damageRise{0%{transform:translateY(6px) scale(.7);opacity:0}15%{transform:translateY(-4px) scale(1.1);opacity:1}70%{opacity:1}100%{transform:translateY(-57px) scale(.9);opacity:0}}
@keyframes idleBreath{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(max-width:375px){.arena{height:350px}.battle-scene{inset:76px 6px 42px}.navtab span{font-size:9px}.loot-symbol{width:35px;flex-basis:35px}.loot-row{gap:7px;padding:8px}.loot-description strong{font-size:11px}.loot-actions button{padding:7px 5px}}
@media(min-width:600px){.arena{height:405px}.battle-scene{inset:100px 15px 42px}}
@media(prefers-reduced-motion:reduce){.character,.embers i,.pulse{animation:none}.damage-float{animation-duration:.12s}*{scroll-behavior:auto!important}}


/* v0.2.1 — автономная прокрутка внутри игрового iframe itch.io.
   Игровая страница на телефоне может быть заблокирована по высоте хостом. */
html,body{height:100%;max-height:100%;overflow:hidden}
body{overscroll-behavior:none}
.app{
  height:100vh;
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#77634e transparent;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.app:focus{outline:none}
.quickdock{
  position:fixed;z-index:48;
  left:50%;transform:translateX(-50%);
  bottom:calc(8px + env(safe-area-inset-bottom));
  width:min(510px,calc(100% - 20px));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding:6px;border:1px solid #665541;border-radius:16px;
  background:#111723f5;box-shadow:0 8px 32px #000b;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.quickdock button{
  min-height:47px;border:1px solid #41404b;border-radius:11px;
  color:#f6e2c0;background:#272633;font-size:12px;font-weight:800;
  touch-action:manipulation
}
.quickdock button:focus-visible{outline:2px solid #e9bc6c;outline-offset:2px}
.quickdock button:active{background:#524333}
.quickdock button:first-child{background:#4a352d;border-color:#916843}
.quickdock button:disabled{opacity:.4}
@media(prefers-reduced-motion:reduce){.app{scroll-behavior:auto}}

/* v0.3 -- vibrant dark fantasy, without external assets or dependencies */
:root{--bg:#080b17;--panel:#151a2d;--panel2:#22223c;--text:#f9f1f2;--muted:#c5bcd2;--gold:#ffc875;--red:#ff6b80;--violet:#d5a5ff}
body{background:radial-gradient(ellipse 70% 25% at 50% 0,#512351aa,transparent),#080b17}
.app{max-width:570px}
.brand-icon{color:#ffd091;border-color:#f69f87a8;background:linear-gradient(135deg,#432239,#212c55);box-shadow:0 0 24px #ff7b6a45}
.brand h1{font-size:19px;color:#fff0d9;text-shadow:0 1px 16px #ef83ad40}
.eyebrow{color:#ffb6a9}
.summary-stat{background:linear-gradient(150deg,#2b2545,#181b30);border-color:#56446c;box-shadow:inset 0 1px #ffffff0d}
.summary-stat strong{color:#faf1f7}
.summary-stat .gold{color:#ffc875}
.summary-stat .essence{color:#d6b5ff}
.arena{border:1px solid #a86f9eaa;background:radial-gradient(ellipse at 51% 30%,#83375b 0%,#4e2853 28%,#20213c 63%,#15172b 98%);box-shadow:0 22px 48px #000a,0 0 26px #bc568b19}
.arena.zone-2{background:radial-gradient(ellipse at 48% 30%,#513f9a,#36235b 43%,#13182e 94%)}
.arena.zone-3{background:radial-gradient(ellipse at 52% 28%,#9b543e,#4c2847 48%,#161929 94%)}
.arena-glow{background:radial-gradient(ellipse,#fc926544,transparent 65%)}
.moon{background:radial-gradient(circle at 40% 30%,#ffe4b9,#f1a6ac 45%,#9c6391 82%);opacity:.63;box-shadow:0 0 40px #ffabc686,0 0 120px #df608c66;animation:moonGlow 6s ease-in-out infinite alternate}
@keyframes moonGlow{to{opacity:.85;box-shadow:0 0 55px #ffb6d49c,0 0 140px #e56daa77}}
.stage-pill{border-color:#f49d8a88;color:#ffcd93;background:#41273cc7}
.combatant-name{color:#ffebf0;text-shadow:0 1px 6px #000}
.character-hero .aura{background:#e177ad77;filter:blur(19px);animation:auraBreath 2.4s ease-in-out infinite alternate}
@keyframes auraBreath{to{transform:scale(1.15);opacity:.74}}
.character-hero .blade{background:linear-gradient(90deg,#a5a4da,#fff5cb,#a4d0eb);box-shadow:0 0 13px #ffbd83bb}
.character-monster.shade .monster-body{background:linear-gradient(135deg,#755eb4,#382c6f 60%,#171b3b);filter:drop-shadow(0 0 9px #a280ff66);border-radius:50% 50% 35% 35%}
.character-monster.shade .monster-eyes{background:#e7a9ff;box-shadow:31px 0 #e7a9ff,0 0 15px #ba63ff,31px 0 15px #ba63ff}
.character-monster.beast .monster-body{background:linear-gradient(130deg,#ae6b54,#51313c 60%,#241e31);clip-path:polygon(50% 0,80% 20%,100% 52%,81% 100%,62% 76%,42% 100%,14% 82%,0 52%,16% 17%)}
.character-monster.guard .monster-body{background:linear-gradient(145deg,#78a9b0,#414662 55%,#1b2639);border-radius:20%}
.character-monster.boss{filter:drop-shadow(0 0 20px #ff857a88)}
.character-monster.boss .monster-body{background:linear-gradient(110deg,#bf5c83,#59345c 65%,#28213f)}
.hero-side.strike .character{animation:slashV3 .3s ease-out}
@keyframes slashV3{0%,100%{transform:translateX(0)}47%{transform:translateX(21px) rotate(3deg);filter:brightness(1.45)}}
.battle-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.battle-flash.flare{animation:flare .27s ease-out}
.battle-flash.critflash{animation:critflare .38s ease-out}
@keyframes flare{20%{opacity:.22;background:radial-gradient(circle at 64% 53%,#ffb780,transparent 48%)}100%{opacity:0}}
@keyframes critflare{25%{opacity:.55;background:radial-gradient(circle at 62% 48%,#ffe7aa,transparent 57%)}100%{opacity:0}}
.spark{position:absolute;z-index:4;width:5px;height:5px;border-radius:50%;background:var(--spark,#ffd8a0);pointer-events:none;box-shadow:0 0 11px 3px var(--spark,#ffd8a0);animation:sparkArc .53s ease-out forwards}
@keyframes sparkArc{to{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
.boss-warning{position:absolute;z-index:6;top:76px;left:14px;right:14px;padding:9px 12px;border-radius:9px;background:#5c1f3deb;border:1px solid #ff9da7;color:#ffe2da;font-size:11px;text-align:center;font-weight:700;box-shadow:0 0 20px #fa6c8c33;animation:warningPulse .7s ease-in-out infinite alternate}
@keyframes warningPulse{to{filter:brightness(1.38)}}
.progress-card{background:linear-gradient(155deg,#23243d,#151b2b);border-color:#55476c}
.progress-fill{background:linear-gradient(90deg,#ff8c8c,#ffdb88);box-shadow:0 0 11px #ffc38a66}
.xp-fill{background:linear-gradient(90deg,#9b7efa,#efacff)}
.skill-button{background:linear-gradient(120deg,#91435a,#c46c4d);border-color:#f3ad84;box-shadow:0 6px 15px #ad487133}
.navtabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;background:#181c31;border-color:#514568;padding:5px 4px;margin-top:8px}
.navtab{font-size:16px;padding:9px 0 7px;min-width:0;display:flex;align-items:center;flex-direction:column;gap:4px}
.navtab span{margin-left:0}.navtab .tab-icon{font-size:17px}.navtab span:not(.tab-icon){font-size:9px;letter-spacing:-.2px}
.navtab.active{background:linear-gradient(160deg,#59405f,#493b53);color:#ffe2aa;border:1px solid #916d8e}
.panel-heading h3{color:#fff0e3}
.talent-points{font-size:11px;color:#ffdb9a;background:#533449;border:1px solid #9c637e;padding:7px 9px;border-radius:10px;white-space:nowrap}
.talent-list{display:grid;gap:10px;margin:13px 0 3px}
.talent-card{min-height:76px;display:flex;gap:11px;align-items:center;text-align:left;width:100%;padding:12px;background:linear-gradient(125deg,#292443,#1d233a);color:#fff2e9;border:1px solid #57466b;border-radius:14px}
.talent-card.flame{border-left:3px solid #ffa46c}.talent-card.shadow{border-left:3px solid #bd97ff}.talent-card.iron{border-left:3px solid #85dfd1}
.talent-card.unlocked{background:linear-gradient(130deg,#413354,#263448);border-color:#c69ad8}
.talent-card:disabled{opacity:.64}.talent-card .talent-icon{flex:0 0 39px;font-size:27px;text-align:center}
.talent-card .talent-copy{flex:1;min-width:0}.talent-card strong,.talent-card small{display:block}.talent-card strong{font-size:12px}.talent-card small{font-size:10px;color:#c3b8cc;line-height:1.4;margin-top:5px}
.talent-card .talent-status{font-size:10px;color:#fcd9aa;white-space:nowrap}
.quest-date{font-size:10px;color:#dcc5ff}.quest-card{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:12px;align-items:center;background:linear-gradient(125deg,#2e2847,#1c2339);border:1px solid #806181;border-radius:16px;padding:15px;margin:12px 0}
.quest-mark{font-size:31px;text-align:center;color:#ffcc8c}.quest-copy strong,.quest-copy small{display:block}.quest-copy strong{font-size:15px}.quest-copy small{font-size:11px;color:#d1c5d6;line-height:1.5;margin-top:4px}
.quest-count{grid-column:1 / -1;font-size:11px;text-align:right;color:#ffdd9b}.quest-bar{height:8px;overflow:hidden;border-radius:20px;background:#48394d;grid-column:1 / -1}.quest-bar>div{height:100%;width:0;background:linear-gradient(90deg,#eb81ac,#ffd28d);transition:width .2s}
.quest-claim{grid-column:1 / -1;min-height:44px;border:1px solid #f2b489;border-radius:11px;color:#fff2e3;font-weight:750;background:linear-gradient(100deg,#9b526d,#c67b57);padding:10px}.quest-claim:disabled{opacity:.47;filter:grayscale(.3)}
.streak-card{display:flex;gap:13px;align-items:center;background:#23263c;border-radius:15px;padding:14px;border:1px solid #5e4d67}.streak-card>span{font-size:30px;color:#ffc978}.streak-card strong,.streak-card small{display:block}.streak-card strong{font-size:13px}.streak-card small{font-size:10px;color:#c8bccc;margin-top:5px;line-height:1.5}
.gift-card{grid-template-columns:1fr}.gift-card .quest-claim{grid-column:1}
.evo-card{background:linear-gradient(110deg,#2c2546,#1d263c);border-color:#615073}.evo-card.chosen{box-shadow:0 0 20px #c082e54b;border-color:#eac092}
.evo-card .evo-icon{text-shadow:0 0 16px #ffce8c99}
@media(max-width:360px){.navtab span:not(.tab-icon){font-size:8px}.navtab .tab-icon{font-size:16px}.app{padding-left:10px;padding-right:10px}.arena{height:340px}.brand h1{font-size:15px}}
@media(prefers-reduced-motion:reduce){.moon,.character-hero .aura,.spark,.boss-warning,.battle-flash{animation:none!important}.spark{opacity:0}}

/* ================================================================
   v0.4.0 — ZATMENIE / ILLUSTRATED DARK FANTASY ART DIRECTION
   Self-contained, responsive and light-weight. Source logic unchanged.
   ================================================================ */
:root{--bg:#070a11;--panel:#141725;--panel2:#191c2d;--text:#fff1e6;--muted:#bdb0ae;--gold:#f4c68a;--violet:#ba97f8;--red:#f27566}
body{background:radial-gradient(ellipse 110% 30% at 50% -4%,#572f3c77,transparent 80%),linear-gradient(#0a0c15,#070911 80%)}
.app{max-width:604px;padding-left:13px;padding-right:13px;background:linear-gradient(90deg,#080a1100,#11132265 52%,#080a1100)}
.topbar{height:73px}
.brand-icon{border-radius:10px;background:linear-gradient(145deg,#4e262c,#150f21);border:1px solid #a56b53;width:42px;height:42px;box-shadow:inset 0 0 11px #e6985744,0 0 15px #ce58502c;text-shadow:0 0 12px #ffda92}
.brand h1{font-family:Georgia,'Times New Roman',serif;color:#fbe9d6;font-weight:700;font-size:19px;letter-spacing:1.3px;text-shadow:0 0 17px #c56c6377}
.eyebrow{color:#f6bd94;letter-spacing:2px;font-size:8px}
.icon-button{background:linear-gradient(145deg,#242235,#101320);border-color:#6a4a4b;color:#f4d2a6}
.hero-summary{margin:0 0 10px;gap:7px}
.summary-stat{position:relative;min-height:61px;padding:10px 12px 8px;border:1px solid #7c5b5566;background:linear-gradient(170deg,#282334,#121725);border-radius:10px;box-shadow:inset 0 1px 0 #e9b88b19,0 7px 16px #0004}
.summary-stat:before{content:"";position:absolute;left:9px;right:9px;top:0;height:1px;background:linear-gradient(90deg,transparent,#ecb47d66,transparent)}
.summary-stat strong{font-size:23px;color:#fff0dc;margin-top:3px;font-weight:850}
.summary-label{letter-spacing:1.2px;font-size:9px;color:#ceb9ac}
.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3{height:438px;background:#0e101b url('assets/arena_ruins.webp') center center/cover no-repeat;border:1px solid #a46e6080;border-radius:15px;box-shadow:0 18px 55px #000c,0 0 0 1px #b96b4520,inset 0 0 45px #08090b}
.arena:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a0e19c9 0%,transparent 23%,transparent 70%,#050911ac 90%),radial-gradient(ellipse at 50% 52%,#ab483413,transparent 75%);z-index:0;pointer-events:none}
.arena:after{content:"";position:absolute;inset:0;border-radius:inherit;border:7px solid transparent;box-shadow:inset 0 0 0 1px #cea36b18,inset 0 0 52px #000a;pointer-events:none;z-index:5}
.arena.zone-2{filter:hue-rotate(20deg)}.arena.zone-3{filter:hue-rotate(-13deg)}
.arena-grid,.moon,.ruins,.arena-glow{display:none!important}
.embers{position:absolute;inset:0;z-index:2;opacity:.78;pointer-events:none}
.arena-top{z-index:6;top:14px;left:14px;right:14px;align-items:start}
.location-eyebrow{color:#f1c3a5;font-size:9px;letter-spacing:2px;text-shadow:0 2px 5px #000}
.arena h2{font-size:21px;color:#fff1dd;text-shadow:0 3px 10px #000}
.stage-pill{padding:9px 10px;background:#1a1521e0;color:#ffd39a;border-color:#a9715c;box-shadow:0 0 11px #ea976b22;backdrop-filter:blur(4px)}
.battle-scene{inset:79px 5px 38px;z-index:3;align-items:stretch}
.combatant{height:100%;width:46%;justify-content:flex-end;overflow:visible}
.combatant:before{content:"";position:absolute;bottom:31px;left:12%;width:76%;height:27px;border-radius:50%;background:radial-gradient(ellipse,#de743e66,transparent 72%);filter:blur(11px);z-index:0}
.combatant-name{z-index:10;top:0;font-size:10px;line-height:1.3;letter-spacing:.6px;color:#fff1e1;text-shadow:0 1px 8px #000,0 2px 12px #000;white-space:normal;overflow:visible;max-height:36px}
.combatant-name small{display:block;font-size:8px;color:#ebb490;letter-spacing:1px;margin-top:3px}
.monster-side .combatant-name{color:#fbded9}
.character{width:100%;max-width:242px;height:247px;z-index:2;overflow:visible;transform-origin:50% 77%;filter:drop-shadow(0 8px 12px #000a);transition:filter .2s}
.character-hero .hood,.character-hero .face,.character-hero .torso,.character-hero .blade,.character-hero .feet,.character-hero .aura,.character-monster .monster-body,.character-monster .monster-ears,.character-monster .monster-eyes,.character-monster .monster-fang{display:none!important}
.character-art{position:absolute;width:114%;height:112%;left:-7%;bottom:-4px;object-fit:contain;object-position:center bottom;z-index:2;pointer-events:none;filter:contrast(1.12) saturate(1.25) drop-shadow(0 8px 7px #0009);animation:characterBreathe 3.2s ease-in-out infinite alternate}
.character-hero .character-art{transform:scaleX(1.02);animation-duration:2.5s}
.character-monster .character-art{width:119%;left:-9%;height:105%;animation-delay:-1.2s;filter:contrast(1.14) saturate(1.18) drop-shadow(0 9px 7px #000c)}
.hero-halo,.enemy-halo{position:absolute;inset:25% 12% 0;border-radius:48%;background:radial-gradient(ellipse at 50% 56%,#ff96525c,transparent 63%);filter:blur(13px);animation:auraBreath 2.9s infinite alternate}
.enemy-halo{background:radial-gradient(ellipse at 50% 56%,#d0466766,transparent 65%)}
.character-hero.flame .hero-halo{background:radial-gradient(ellipse,#ff4910ac,transparent 65%)}
.character-hero.shadow .hero-halo{background:radial-gradient(ellipse,#a149f6a0,transparent 65%)}
.character-hero.iron .hero-halo{background:radial-gradient(ellipse,#45bfea9e,transparent 65%)}
.character-monster.shade .enemy-halo{background:radial-gradient(ellipse,#a34ef4aa,transparent 65%)}
.character-monster.boss .enemy-halo{background:radial-gradient(ellipse,#fb4229b5,transparent 68%)}
.character-monster.boss .character-art{transform:scale(1.09);filter:drop-shadow(0 0 20px #ed402f77) contrast(1.2)}
.character-shine{position:absolute;z-index:3;bottom:0;left:20%;right:20%;height:4px;border-radius:50%;background:#fca26c77;filter:blur(9px)}
.versus{z-index:8;font-size:19px;top:46%;text-shadow:0 0 15px #ffbc92;opacity:.65}
.health-track{position:relative;z-index:9;margin-top:0;height:9px;background:#060a11;border-color:#9f8f845c;box-shadow:0 2px 8px #0009}
.hero-health{background:linear-gradient(90deg,#57ac87,#baf6b9)}
.enemy-health{background:linear-gradient(90deg,#9b3444,#fa6864)}
.health-number{z-index:9;position:relative;margin-top:5px;color:#f3e2d8;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 2px 5px #000}
.combat-feed{z-index:9;min-height:40px;padding:11px 15px;background:linear-gradient(90deg,#0b0d17f5,#211725d5,#0b0d17f5);color:#ffdfb2;border-top:1px solid #b87a6b5c;font-size:11px}
.boss-warning{z-index:15;top:92px;font-size:11px;background:#5b131df2;border-color:#ffb6a2;box-shadow:0 0 30px #f3383e88}
.battle-flash{z-index:12}.combat-effects{z-index:13}
.blade-arc{position:absolute;pointer-events:none;z-index:11;left:21%;top:35%;width:60%;height:26%;border-radius:50%;opacity:0;transform:rotate(-26deg);filter:drop-shadow(0 0 16px #ff915b)}
.blade-arc.play{animation:arcStrike .48s ease-out both}
.blade-arc.special{filter:drop-shadow(0 0 24px #bfa4ff)}
.blade-arc.special.play{animation:arcStrikeSpecial .66s ease-out both}
.blade-arc:after{content:"";position:absolute;inset:5% 0;border-bottom:7px solid #ffcb84;border-right:4px solid transparent;border-radius:50%;box-shadow:0 8px 15px #ff5326,0 11px 20px #fa7c41}
.blade-arc.special:after{border-color:#fff8d5;box-shadow:0 7px 20px #b985ff,0 0 50px #f8a045}
.impact-ring{position:absolute;z-index:10;pointer-events:none;left:66%;top:46%;width:30px;height:30px;border-radius:50%;border:4px solid #ffc180;box-shadow:0 0 22px #ff9556,0 0 48px #ed532d;opacity:0}
.impact-ring.play{animation:impactBlast .46s ease-out both}
.impact-ring.special{border-color:#e2d9ff;box-shadow:0 0 29px #b4a0ff,0 0 60px #ffab73}
@keyframes arcStrike{0%{opacity:0;transform:translate(-24px,30px) rotate(-45deg) scale(.5)}28%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(30px,-28px) rotate(-12deg) scale(1.45)}}
@keyframes arcStrikeSpecial{0%{opacity:0;transform:translate(-26px,35px) rotate(-45deg) scale(.3)}35%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate(55px,-45px) rotate(-9deg) scale(1.8)}}
@keyframes impactBlast{0%{opacity:0;transform:scale(.3)}15%{opacity:1}100%{opacity:0;transform:scale(5)}}
@keyframes characterBreathe{0%{translate:0 2px}100%{translate:0 -4px}}
@keyframes arenaRattle{0%{translate:0 0}25%{translate:-2px 0}50%{translate:3px 0}75%{translate:-2px 0}100%{translate:0 0}}
.arena.combat-shock{animation:arenaRattle .22s ease-in-out}
.hero-side.awaken .character{animation:awakening .7s ease-out both}
@keyframes awakening{0%{filter:brightness(3) drop-shadow(0 0 23px #fff);transform:scale(1.2)}100%{filter:brightness(1);transform:scale(1)}}
.hero-side.strike .character{animation:heroLunge .31s ease-out!important}
@keyframes heroLunge{0%,100%{transform:translateX(0)}45%{transform:translateX(24px) scale(1.035)}}
.game-motto{display:flex;justify-content:center;gap:12px;align-items:center;margin-top:8px;color:#a88d83;letter-spacing:1.6px;font-size:8px;font-weight:800;text-align:center}
.game-motto span{color:#e6a66e}
.progress-card{border-radius:12px;border-color:#80605578;padding:14px 15px;background:linear-gradient(160deg,#201e2f,#121723);box-shadow:inset 0 1px #eacb9a18;margin-top:9px}
.progress-card .card-eyebrow{color:#bd9e8f}.progress-head strong{color:#faeadc}
.skill-button{border-radius:9px;background:linear-gradient(125deg,#8c353d,#bb6047 76%,#da905a);border-color:#e9a170;color:#fff6ec;box-shadow:inset 0 1px #ffe0ad44,0 5px 22px #b9504b3b}
.auto-button{border-radius:9px;border-color:#756057;background:linear-gradient(#342835,#191b2b)}
.world-banner{border:1px solid #795c6280;background:linear-gradient(90deg,#1a1724d9,#101924c0),url('assets/arena_ruins.webp') center/cover!important;box-shadow:0 9px 25px #0009;border-radius:12px}
.navtabs{background:linear-gradient(#221e2d,#161624);border:1px solid #684e55;border-radius:12px;padding:5px;gap:3px;box-shadow:inset 0 1px #c5927326}
.navtab{border-radius:8px;color:#c8b7b2}.navtab.active{background:linear-gradient(145deg,#70433b,#3a2532);color:#ffe4bc;border:1px solid #ba7a59;box-shadow:inset 0 1px #ffc2a13b}
.navtab .tab-icon{font-size:19px}.navtab span:not(.tab-icon){font-size:9px}
.panel-heading h3{font:700 22px Georgia,serif;color:#ffe9d3}.card-eyebrow{color:#d2a98e}
.upgrade-row,.talent-card,.quest-card,.streak-card,.equipment-slot,.loot-row{background:linear-gradient(145deg,#242232,#151b28);border:1px solid #6d505866;border-radius:11px;box-shadow:inset 0 1px #ffffff0a}
.upgrade-icon{background:radial-gradient(circle at 50% 40%,#663a36,#302436);color:#ffd5a1;border-color:#916b58}
.evolutions{gap:12px}.evo-card{position:relative;min-height:112px;padding:9px 12px 9px 7px;overflow:hidden;background:linear-gradient(125deg,#29202f,#161b2a);border:1px solid #6e5159;box-shadow:inset 0 1px #ffffff1c}
.evo-flame{border-left:3px solid #fd7954}.evo-shadow{border-left:3px solid #af7efa}.evo-iron{border-left:3px solid #7bc7eb}
.evo-thumb{display:block;flex:0 0 87px;width:87px;height:98px;position:relative;margin:-5px 0 -5px -5px;overflow:hidden;mask-image:linear-gradient(90deg,#000 80%,transparent)}
.evo-thumb img{height:132px;width:100%;object-fit:cover;object-position:top center;filter:saturate(1.28) contrast(1.1)}
.evo-card>span:nth-child(2){min-width:0;flex:1}.evo-card strong{color:#fff4e2;font:700 18px Georgia,serif}.evo-card small{font-size:11px;color:#d3c1bd;line-height:1.4}.evo-status{padding:6px;background:#4c2c30aa;border:1px solid #976962;border-radius:6px;font-size:9px;color:#ffe6c6}
.evo-card.chosen{border-color:#f8c48e;box-shadow:0 0 23px #b9674659,inset 0 0 10px #bd826b22}
.slot-glyph{display:block;height:47px;margin:0 auto 4px}.slot-glyph img{height:46px;width:46px;object-fit:contain;filter:drop-shadow(0 0 8px #d4a86a44)}
.loot-symbol{display:grid;place-items:center;background:linear-gradient(#30283b,#1e2231);border:1px solid #8c697155}.loot-symbol img{width:33px;height:33px;object-fit:contain;filter:drop-shadow(0 0 5px #deb68f44)}
.loot-row.epic .loot-symbol{box-shadow:inset 0 0 13px #ad5def55}.loot-row.rare .loot-symbol{box-shadow:inset 0 0 13px #69bde855}
.bestiary-collection{margin:16px 0;border:1px solid #6d4e5780;border-radius:12px;padding:14px 10px;background:linear-gradient(150deg,#211c2c,#0e1624)}
.bestiary-collection h3{font:700 21px Georgia,serif;margin:6px 0 13px;color:#ffe3cc}
.bestiary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.bestiary-item{min-width:0;overflow:hidden;border:1px solid #694a55;background:#100f1a;border-radius:7px;position:relative}
.bestiary-item img{width:100%;height:88px;object-fit:cover;object-position:top center;display:block}
.bestiary-item small{display:block;font-size:8px;min-height:24px;padding:5px 2px;color:#ecd3c4;text-align:center;background:#120f1ade;line-height:1.1}
.quickdock{border:1px solid #a278647f;border-radius:12px;background:#100e17fa;box-shadow:0 10px 38px #000e,0 0 0 1px #a5785b20}
.quickdock button{background:linear-gradient(#322939,#1c202e);border-color:#6e5155;border-radius:7px;color:#f6dfce}
.quickdock button:first-child{background:linear-gradient(#783a3d,#4e2a32);border-color:#bf7f5e}
@media(max-width:375px){.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3{height:408px}.battle-scene{inset:73px 2px 40px}.character{height:213px}.combatant-name{font-size:9px}.app{padding-left:9px;padding-right:9px}.evo-thumb{flex-basis:70px;width:70px}.brand h1{font-size:15px}.stage-pill{padding:8px 7px}}
@media(min-width:600px){.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3{height:464px}.battle-scene{inset:87px 11px 42px}.character{height:268px}.app{border-left:1px solid #473238;border-right:1px solid #473238}}
@media(prefers-reduced-motion:reduce){.character-art,.hero-halo,.enemy-halo,.blade-arc,.impact-ring,.arena.combat-shock{animation:none!important}.blade-arc,.impact-ring{opacity:0!important}}


/* V0.5: Actual 3D WebGL scene with a retained 2D safety mode. */
#arena3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;display:block;opacity:0;transition:opacity .35s ease;}
.arena-3d-active #arena3d{opacity:1}
.arena-3d-active .battle-scene .character-art,.arena-3d-active .battle-scene .hero-halo,.arena-3d-active .battle-scene .enemy-halo,.arena-3d-active .battle-scene .character-shine,.arena-3d-active .versus{opacity:0!important;animation:none!important}
.arena-3d-active .character{filter:none!important;opacity:0!important;}
.arena-3d-active .combatant:before{opacity:.12}
.arena-3d-active .combatant-name{top:14px}
.arena-3d-active .health-track{position:relative;z-index:8;}
.arena-3d-active .combatant{pointer-events:none}
.scene-mode{position:absolute;z-index:25;left:auto;right:14px;top:52px;border:1px solid #d7a46e99;border-radius:7px;background:linear-gradient(145deg,#412a39ed,#191825ea);color:#ffe7c4;font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 8px;box-shadow:0 3px 12px #0009;min-width:49px}
.scene-mode:disabled{opacity:.58}
.arena-3d-active .arena-grid,.arena-3d-active .blade-arc,.arena-3d-active .impact-ring{display:none!important}
.arena-3d-active .battle-scene{z-index:3}
@media(prefers-reduced-motion:reduce){.arena-3d-active #arena3d{opacity:1}}

/* v0.6 cinematic visual update: interface contrast and animated combat stage. */
:root{--bg:#080c15;--panel:#161b29;--panel2:#202431;--gold:#f3c983;--red:#ee7769;--violet:#bd92fb}
.brand h1{font-weight:800;letter-spacing:2px;color:#f6e4c5;text-shadow:0 2px 14px #b2754a44}
.arena{border-color:#bc8a697a;box-shadow:0 0 0 1px #ffd1aa0d,0 17px 40px #000b,0 0 48px #a6402424;background:radial-gradient(ellipse at 50% 48%,#593b4d 0%,#252638 55%,#121522 100%)}
.arena.zone-2{background:radial-gradient(ellipse at 52% 43%,#3e3460 0%,#24213c 62%,#121622 100%)}
.arena.zone-3{background:radial-gradient(ellipse at 52% 46%,#543c33 0%,#30202f 60%,#131621 100%)}
.stage-pill{border-color:#aa6e5175;background:#35222cbd;box-shadow:0 0 16px #c1664729}
.arena-3d-active .arena::after{opacity:.38}
.scene-mode{top:59px;right:10px;padding:5px 9px;border-color:#ffcf7b;background:linear-gradient(150deg,#5a2f35,#1c1a31);font-size:11px;box-shadow:0 1px 18px #ef925955}
.motion-ribbon{position:absolute;z-index:6;left:12px;bottom:43px;font-size:8px;font-weight:800;letter-spacing:1.5px;color:#f4d2aa;background:#111927bf;border:1px solid #e8a06655;border-radius:7px;padding:6px 9px;opacity:.35;transition:opacity .3s}
.motion-ribbon b{color:#f4b868;font-size:10px}.motion-ribbon span{color:#a9adbb;margin-left:6px}
.arena-3d-active .motion-ribbon{opacity:.88}
.skill-button{background:linear-gradient(115deg,#ac633c,#663b40);border:1px solid #ffbd7477;box-shadow:0 6px 21px #c45f2a22,inset 0 1px 0 #ffffff28}
.navtab.active{background:linear-gradient(145deg,#4e373e,#302c3c);box-shadow:inset 0 0 0 1px #d395685c,0 2px 12px #a9573026}
.evo-card.chosen,.evolution-card.chosen{box-shadow:0 0 20px #f8a06822}
@media(max-width:360px){.motion-ribbon{letter-spacing:.9px;font-size:7px;left:9px}}
@media(prefers-reduced-motion:reduce){.motion-ribbon{transition:none}}
/* v0.7: battle polish, visible loot equipment and safe mobile graphic profiles */
.quality-mode{position:absolute;right:10px;top:90px;z-index:25;border:1px solid #79aab077;border-radius:7px;background:#171e31e8;color:#cff1ef;font-weight:800;font-size:9px;letter-spacing:.3px;padding:5px 8px;min-width:75px}
.quality-mode:focus-visible{outline:2px solid #e9bc6c;outline-offset:3px}
.boss-phase{position:absolute;z-index:12;top:109px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;border:1px solid #ee7dda;background:#341631e9;padding:6px 10px;border-radius:8px;color:#ffe1f8;font-weight:900;letter-spacing:1px;font-size:9px;box-shadow:0 0 25px #af3e9b7d;animation:ragepulse 1.7s infinite}
@keyframes ragepulse{50%{box-shadow:0 0 32px #ed55b4aa;filter:brightness(1.3)}}
.arena.boss-enraged{border-color:#d67cde;box-shadow:0 0 0 1px #cb8ce766,0 0 65px #a4358a77,0 20px 50px #000b}
.arena.boss-enraged .arena-glow{background:radial-gradient(ellipse,#9945cc40 0%,transparent 65%)}
.save-panel{padding:15px;background:linear-gradient(130deg,#242138,#151c29);border:1px solid #594e6e;border-radius:12px;margin:16px 0 12px;display:grid;gap:12px}
.save-panel strong{display:block;color:#f6e9df;font:700 15px Georgia,serif;margin-bottom:5px}.save-panel small{color:#b9b0c8;font-size:11px;line-height:1.5;display:block}
.save-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.save-actions button{min-height:41px;background:#312b42;color:#f4e2ff;border:1px solid #a183bd;border-radius:9px;font-weight:800;font-size:12px}
.arena-2d-active .quality-mode{display:none}
@media(max-width:360px){.quality-mode{top:89px;right:8px;font-size:8px;padding:5px 6px}.boss-phase{top:118px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.boss-phase{animation:none}}

/* v0.8 — cinematography and premium illustrated hybrid stage, retained as fallback. */
.camera-mode{position:absolute;top:91px;left:10px;z-index:26;min-width:77px;border:1px solid #a386b3a6;border-radius:8px;color:#f4e4ff;background:linear-gradient(140deg,#432e54ed,#171826ed);font-size:9px;font-weight:900;letter-spacing:.3px;padding:6px 9px;box-shadow:0 2px 14px #000a}
.camera-mode[hidden]{display:none!important}
.camera-mode:focus-visible{outline:2px solid #ffe2ad;outline-offset:2px}
.arena-hybrid-active .character{opacity:1!important;filter:drop-shadow(0 12px 12px #000d)!important;animation:hybridPresence 3.2s ease-in-out infinite alternate;transform-origin:center 80%}
.arena-hybrid-active .battle-scene .character-art,.arena-hybrid-active .battle-scene .hero-halo,.arena-hybrid-active .battle-scene .enemy-halo,.arena-hybrid-active .battle-scene .character-shine{opacity:1!important;animation:characterBreathe 3.2s ease-in-out infinite alternate!important}
.arena-hybrid-active .battle-scene .character-art{filter:saturate(1.16) contrast(1.12) drop-shadow(0 7px 12px #000e);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 51%,#000 48%,#000b 67%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 51%,#000 48%,#000b 67%,transparent 100%)}
.arena-hybrid-active .battle-scene{z-index:4}
.arena-hybrid-active .versus{display:none}
.arena-hybrid-active .combatant:before{opacity:.65}
.arena-hybrid-active .hero-side.strike .character{animation:heroLunge .31s ease-out!important}
.arena-hybrid-active .hero-side.hit .character,.arena-hybrid-active .monster-side.hit .character{animation:impact .28s ease-out!important}
.arena-hybrid-active .character-hero.flame .character-art{filter:drop-shadow(0 0 15px #ff632d99) saturate(1.18)}
.arena-hybrid-active .character-hero.shadow .character-art{filter:drop-shadow(0 0 14px #985cffff) saturate(1.1)}
.arena-hybrid-active .character-hero.iron .character-art{filter:drop-shadow(0 0 13px #5cc6ffff) saturate(1.1)}
.arena-hybrid-active .character-monster.boss .character-art{filter:drop-shadow(0 0 18px #fc5637bd) contrast(1.19)}
@keyframes hybridPresence{0%{transform:translateY(0)}100%{transform:translateY(-4px)}}
.hero-showcase{position:relative;isolation:isolate;min-height:300px;overflow:hidden;border-radius:16px;border:1px solid #936a9a;background:radial-gradient(ellipse 75% 62% at 48% 38%,#613c53 0%,#2c233d 49%,#111521 96%);box-shadow:inset 0 0 85px #0007,0 13px 30px #0006;margin-bottom:14px}
.hero-showcase:before{content:'';position:absolute;inset:0;background:url('assets/arena_ruins.webp') center/cover no-repeat;opacity:.30;z-index:-1}
.hero-showcase-glow{position:absolute;top:7%;left:10%;height:74%;width:80%;border-radius:50%;background:radial-gradient(ellipse,#db65507d,transparent 69%);filter:blur(11px);pointer-events:none}
.hero-showcase[data-path=shadow] .hero-showcase-glow{background:radial-gradient(ellipse,#9b52e779,transparent 68%)}
.hero-showcase[data-path=iron] .hero-showcase-glow{background:radial-gradient(ellipse,#50bce779,transparent 68%)}
.hero-showcase img{position:absolute;top:4px;height:95%;width:92%;left:4%;object-fit:contain;object-position:center 10%;filter:drop-shadow(0 14px 20px #000c);pointer-events:none}
.hero-showcase-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:29px 16px 14px;background:linear-gradient(0deg,#11101efc,#11101ec0 70%,transparent);display:grid;gap:5px}
.hero-showcase-caption small{font-size:9px;letter-spacing:2px;font-weight:900;color:#eab18d}
.hero-showcase-caption strong{font:800 23px Georgia,serif;color:#fff1df;letter-spacing:1.5px}
.hero-showcase-caption span{font-size:11px;color:#c6bfce;line-height:1.45}
.boss-intro{position:absolute;z-index:40;inset:0;background:radial-gradient(ellipse at center,#53152be9,#0b0b19f5 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-shadow:0 0 12px #f35576aa;animation:bossRevelation 2.6s both;pointer-events:none}
.boss-intro span{font-size:10px;letter-spacing:3px;color:#ffb7b9;font-weight:800}
.boss-intro strong{font:800 clamp(24px,7vw,38px) Georgia,serif;letter-spacing:2px;color:#ffe5c9;text-align:center}
.boss-intro small{font-size:10px;color:#f69386;letter-spacing:2px;font-weight:800}
@keyframes bossRevelation{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
.rare-reveal{pointer-events:none;position:fixed;left:50%;top:35%;z-index:75;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 30px));background:radial-gradient(ellipse at 50% 10%,#503675,#181726 75%);border:2px solid #d8aa63;border-radius:22px;box-shadow:0 0 45px #bd6dcb99,0 18px 80px #000e;padding:24px 15px;display:grid;justify-items:center;gap:7px;animation:relicAppear 2.6s both;text-align:center}
.rare-reveal[data-rarity=epic]{border-color:#e595fd}
.rare-reveal>span{font-size:9px;letter-spacing:2px;color:#f0c998;font-weight:800}
.rare-reveal-art{display:grid;place-items:center;height:102px;width:110px;background:radial-gradient(ellipse,#cbbaff38,transparent 70%)}
.rare-reveal-art img{height:94px;width:94px;object-fit:contain;filter:drop-shadow(0 0 12px #f0c5ffb3)}
.rare-reveal strong{font:700 21px Georgia,serif;color:#fff4e6}
.rare-reveal small{color:#dcc1f6;font-size:10px;letter-spacing:1.7px;font-weight:800}
@keyframes relicAppear{0%{opacity:0;transform:translate(-50%,-42%) scale(.78)}12%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-54%) scale(.96)}}
@media(max-width:360px){.camera-mode{top:88px;left:8px;font-size:8px;padding:5px 7px}.hero-showcase{min-height:268px}.boss-intro strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.arena-hybrid-active .character,.arena-hybrid-active .character-art,.boss-intro,.rare-reveal{animation:none!important}.boss-intro,.rare-reveal{opacity:1}}


/* v1.1 FORGED HEROES 3D display: no flat art over the skinned WebGL characters. */
.arena-3d-active:not(.arena-hybrid-active) .battle-scene .character-art{opacity:0!important;visibility:hidden!important}
.scene-mode{min-width:95px;font-size:9px;white-space:nowrap}
#rigStatus{position:absolute;bottom:42px;right:10px;color:#9cd9c0;z-index:16;font-size:8px;font-weight:800;letter-spacing:1px;text-shadow:0 1px 6px #000;pointer-events:none}
.arena-2d-active #rigStatus{display:none}
/* v1.4 cinematic UI polish, no additional heavy graphics textures. */
.arena{isolation:isolate;box-shadow:0 0 0 1px #c18c5d33,0 22px 65px #000b,inset 0 0 45px #0009}
.arena:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 -45px 58px #090b15c9,inset 0 0 35px #06070b8a}
.arena-3d-active .moon{opacity:.38;mix-blend-mode:screen}
.arena-3d-active .arena-grid{opacity:.08}
.arena-3d-active #arena3d{filter:contrast(1.07) saturate(1.13)}
.arena:has(.camera-mode:focus-visible) #arena3d{outline:1px solid #edc797}
#arena3d{touch-action:pan-y}
.arena-top{z-index:12}.stage-pill{box-shadow:0 2px 12px #0009,inset 0 1px #ffc38a20}
.summary-stat{background:linear-gradient(150deg,#242434,#141823);border-color:#55405165;box-shadow:inset 0 1px #ffffff0c}
.summary-stat strong{font-variant-numeric:tabular-nums;letter-spacing:.15px}
.combatant-name{color:#ffebd2;text-shadow:0 2px 7px #000c}
.progress-fill{background:linear-gradient(90deg,#df715e,#ffd1a0);box-shadow:0 0 12px #f49a6a55}
.motion-ribbon{background:linear-gradient(90deg,#181727d8,#301e31cf)!important;border-color:#b48a6470!important}
@media(prefers-reduced-motion:reduce){.arena-3d-active #arena3d{filter:none}}

/* V2.0: three releases in one; all assets local, no font CDN. */
:root{--bg:#070a13;--panel:#141b2a;--panel2:#182033;--text:#fff4e6;--muted:#b4aebb;--gold:#ffc57b;--violet:#c5a1ff}
body{background:radial-gradient(ellipse 80% 23% at 50% -1%,#80433030,transparent),radial-gradient(ellipse 130% 40% at 50% 80%,#1d224444,transparent),#070911}
.app{max-width:680px;background:linear-gradient(90deg,transparent,#15101c33 50%,transparent)}
.brand-icon{font-size:25px;width:46px;height:46px;border:1px solid #c79b63;background:radial-gradient(circle at 50% 40%,#9c4e304a,#1a101a 65%);box-shadow:0 0 16px #ff8c3c44,inset 0 0 17px #f6b06533}
.brand h1{font-size:19px;font-family:Georgia,serif;font-weight:700;letter-spacing:2.7px;color:#ffedd6;text-shadow:0 2px 12px #ed855b7a}
.eyebrow{color:#dcb790;font-size:8px;letter-spacing:1.4px}
.topbar{height:77px}
.hero-summary{gap:7px;margin-bottom:11px}
.summary-stat{border-radius:13px;padding:10px 12px 10px;border:1px solid #a16c575d;background:linear-gradient(145deg,#292538,#171927 57%,#101724);box-shadow:inset 0 1px 0 #ffedd32f,0 8px 19px #0007}
.summary-stat strong{font-size:25px;font-weight:900;line-height:1.25;text-shadow:0 0 16px #ee94684d}
.summary-label{font-size:9px;letter-spacing:1.4px;color:#d8b6a5}
.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:490px;background:#0b101d center center/cover no-repeat;border:1px solid #b98a638a;border-radius:20px;box-shadow:0 0 0 1px #e3ad6530,0 0 55px #dd6a2833,0 23px 45px #000d;filter:none!important}
.arena.zone-1{background-image:linear-gradient(180deg,#0e101eb3 0%,#130b1673 25%,#00000020 52%,#030814a6 100%),url('assets/world_eclipse.webp')}
.arena.zone-2{background-image:linear-gradient(180deg,#0e101eb3 0%,#170e2688 28%,#09071b37 54%,#030814a6 100%),url('assets/world_void.webp')}
.arena.zone-3{background-image:linear-gradient(180deg,#0e101eb3 0%,#29131276 25%,#020a1740 57%,#030814b9 100%),url('assets/world_ember.webp')}
.arena.zone-4{background-image:linear-gradient(180deg,#0e101eb3 0%,#0b233a75 27%,#07152836 58%,#030814bc 100%),url('assets/world_frost.webp')}
.arena:before{z-index:0;background:radial-gradient(ellipse at 50% 51%,transparent 10%,#03040b44 74%,#03040b9b 100%),linear-gradient(180deg,#030714ad,transparent 34%,#07091224 59%,#02050ab3 100%)}
.arena:after{border:2px solid #ffbd7640;box-shadow:inset 0 0 0 1px #ffe3a02f,inset 0 0 42px #08050caa}
.world-vignette{pointer-events:none;position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 75% 65% at 50% 56%,transparent 32%,#08061255 96%);animation:worldBreath 8s ease-in-out infinite alternate}
@keyframes worldBreath{to{opacity:.7;transform:scale(1.035)}}
#arena3d{z-index:2;filter:contrast(1.17) saturate(1.26) drop-shadow(0 8px 4px #0009)}
.arena-3d-active #arena3d{filter:contrast(1.18) saturate(1.25)}
.arena-top{top:15px;left:14px;right:14px;z-index:12}
.location-eyebrow{font-size:9px;letter-spacing:1.9px;color:#ffcbaa;text-shadow:0 2px 7px #000}
.arena h2{font-family:Georgia,serif;font-size:30px;line-height:1.04;letter-spacing:.2px;max-width:240px;font-weight:700;color:#fff0dc;text-shadow:0 3px 8px #000,0 0 20px #000d}
.stage-pill{background:#22131cdf;border:1px solid #e8b076b3;border-radius:12px;color:#ffdbb6;font-size:10px;box-shadow:0 0 0 1px #4c202b99,inset 0 1px #fff3}
.scene-mode,.camera-mode,.quality-mode{border-radius:10px;backdrop-filter:blur(9px);box-shadow:0 5px 18px #000a,inset 0 1px 0 #fff2}
.scene-mode{top:60px;right:11px;min-width:92px;border-color:#ffb66f;color:#fff4da;background:#6b3525e9}
.camera-mode{top:92px;left:11px;border-color:#b88cce89;color:#f9ebff;background:#30243aea}
.quality-mode{top:96px;right:11px;background:#142839ed;border-color:#6bcbd28c;color:#d2ffff}
.motion-ribbon{bottom:43px;left:14px;opacity:1!important;color:#ffdfbb!important;background:linear-gradient(100deg,#3d2137dd,#130f1bec)!important;border-color:#f3b86b88!important;font-size:8px}
#rigStatus{right:13px;bottom:43px;color:#c1f5e2;font-size:8px;text-shadow:0 2px 4px #000}
.battle-scene{inset:123px 7px 40px}
.combatant-name{font-family:system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 10px #000}
.health-track{height:10px;background:#140f1bd9;border:1px solid #c8a9988f;box-shadow:0 0 6px #000b}
.hero-health{background:linear-gradient(90deg,#1baf80,#96f8b1,#e7ffe2)}
.enemy-health{background:linear-gradient(90deg,#b91d55,#f0536a,#ffa8a2)}
.health-number{font-size:11px;font-weight:800;text-shadow:0 1px 6px #000}
.combat-feed{padding:11px 12px;background:linear-gradient(90deg,#0c1423ed,#271b24ee,#0c1423ed);border-top:1px solid #ffbd7454;color:#ffebd0;font-weight:700;letter-spacing:.05px;z-index:9}
.cinematic-cut{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:linear-gradient(120deg,transparent 25%,#ffffedba 49%,transparent 53%);mix-blend-mode:screen;transform:translateX(-110%) rotate(-11deg)}
.arena.cinematic-hit .cinematic-cut{animation:cutNormal .35s ease-out}
.arena.cinematic-special .cinematic-cut{animation:cutSpecial .8s ease-out}
@keyframes cutNormal{0%{opacity:0;transform:translateX(-105%) rotate(-11deg)}36%{opacity:.6}70%{opacity:.1;transform:translateX(95%) rotate(-11deg)}100%{opacity:0;transform:translateX(110%) rotate(-11deg)}}
@keyframes cutSpecial{0%{opacity:0;transform:translateX(-120%) rotate(-11deg)}35%{opacity:.9}65%{opacity:.2;transform:translateX(130%) rotate(-11deg)}100%{opacity:0;transform:translateX(130%) rotate(-11deg)}}
.progress-card{background:linear-gradient(150deg,#241f2c,#111827 70%);border:1px solid #b17d6368;box-shadow:inset 0 1px 0 #fff2,0 14px 26px #0006;border-radius:18px;padding:17px}
.card-eyebrow{color:#d5a17d}
.progress-fill{background:linear-gradient(90deg,#c23a51,#e88f56,#ffdc9c)}
.skill-button{background:linear-gradient(118deg,#a34b37,#61304a 74%);box-shadow:inset 0 1px 0 #ffefbc33,0 8px 22px #d345343e;border-color:#f7c082d9;border-radius:13px}
.skill-button:active{transform:scale(.985)}
.auto-button{background:linear-gradient(160deg,#29263c,#1b2435);border-color:#88637e;border-radius:13px;color:#f8d6ec}
.navtabs{margin:13px 0 1px;background:linear-gradient(155deg,#261f31,#101b29);border-color:#76535f;border-radius:14px;box-shadow:0 10px 28px #0007}
.navtab.active{background:linear-gradient(130deg,#853e39,#5b334b);border-radius:10px;color:#fff0d8;box-shadow:inset 0 0 0 1px #efbf927f,0 0 19px #b65b4a3c}
.navtab{font-weight:750}
.panel-heading h3{font-family:Georgia,serif;font-size:27px;color:#ffe9d1}
.upgrade-row,.talent-card,.evo-card,.inventory-item{border-color:#6e53637c;background:linear-gradient(135deg,#292335,#171b2b);box-shadow:inset 0 1px 0 #fff1}
.hero-showcase:before{background-image:url('assets/world_eclipse.webp')}
@media(max-width:375px){.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:470px}.arena h2{font-size:25px}.camera-mode{top:90px}.quality-mode{top:96px}.motion-ribbon{font-size:7px;letter-spacing:.7px}.arena-top{left:11px;right:11px}.summary-stat{padding:10px 9px}.summary-stat strong{font-size:23px}}
@media(min-width:600px){.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:520px}.battle-scene{inset:116px 7px 44px}}
@media(prefers-reduced-motion:reduce){.world-vignette,.arena.cinematic-hit .cinematic-cut,.arena.cinematic-special .cinematic-cut{animation:none!important}}