:root{color-scheme:dark;--gold:#f3c96d;--gold2:#a96722;--ink:#080b10;--panel:#11151bea;--line:#d7ad5f59;--red:#d43f35;--blue:#6cbcff;font-family:Inter,Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030405}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid #fff1ae;outline-offset:2px}
[hidden]{display:none!important}

.game-shell{position:relative;width:min(100vw,56.25dvh,520px);height:100dvh;min-height:560px;margin:auto;overflow:hidden;background:#111;box-shadow:0 0 80px #000;isolation:isolate}
.scene{position:absolute;inset:0;background:url('assets/arena-empty.png') center center/cover no-repeat;transform:scale(1.02);animation:camera-breathe 9s ease-in-out infinite alternate}
.scene-shade{position:absolute;inset:0;background:linear-gradient(#02060bd9 0%,transparent 16%,transparent 48%,#05070a70 69%,#050608 83%),radial-gradient(circle at 50% 40%,transparent 20%,#0305077a 82%);pointer-events:none}
.embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}.ember{position:absolute;bottom:23%;width:2px;height:2px;border-radius:50%;background:#ff9b41;box-shadow:0 0 7px #ff6325;animation:rise var(--time) linear infinite;animation-delay:var(--delay);left:var(--left);opacity:0}
.hit-burst{position:absolute;z-index:9;left:61%;top:44%;width:235px;height:235px;transform:translate(-50%,-50%) rotate(-8deg) scale(.25);background:url('assets/attack-impact-v2.png') center/contain no-repeat;filter:drop-shadow(0 0 16px #ff8c22);opacity:0;pointer-events:none}.hit-burst.fire{animation:slash-impact .48s cubic-bezier(.13,.72,.2,1)}

.top-hud{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 13px 9px;background:linear-gradient(#05070bf5,#080b10cf 72%,transparent);border-bottom:1px solid #d7ad5f33}
.profile{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;text-align:left}.avatar{width:41px;height:41px;border:1px solid #efd487;background:radial-gradient(circle at 40% 30%,#685132,#17191a 65%);box-shadow:0 0 0 2px #090b0d,0 0 0 3px #83642f;object-fit:cover;object-position:50% 12%}
.profile-copy{width:92px}.profile-copy small{display:block;color:#d8b568;font:700 7px/1 Inter;letter-spacing:.18em}.profile-copy strong{display:block;margin:3px 0 5px;font:700 12px/1 Cinzel,serif;color:#fff3d2;white-space:nowrap}.profile-copy i{display:block;height:3px;background:#232935}.profile-copy i b{display:block;width:0;height:100%;background:linear-gradient(90deg,#417bc1,#83d4ff);transition:width .35s}.profile em{align-self:start;padding:4px 5px;background:#2b2115;border:1px solid #9c7337;color:#ffd77b;font:800 8px Inter;font-style:normal}
.wallet{display:flex;gap:7px}.wallet>span{display:flex;align-items:center;gap:4px;min-width:54px;padding:6px 7px;background:#080b0dc9;border:1px solid #9b805247;font-size:10px}.wallet i{font-size:10px;font-style:normal}.coin{color:#ffc350}.gem{color:#67dcff}.wallet button{width:28px;border:1px solid #c2944c;background:linear-gradient(#61451e,#2e1c0b);color:#ffe0a0;font-size:16px}

.campaign-head{position:absolute;z-index:7;top:70px;left:12px;right:12px;text-shadow:0 2px 3px #000}.chapter{text-align:center}.chapter small{display:block;color:#caa862;font:700 7px Inter;letter-spacing:.3em}.chapter strong{display:block;margin-top:3px;color:#f7ead0;font:700 13px Cinzel;letter-spacing:.08em}.stage-line{display:flex;justify-content:space-between;margin-top:8px;color:#e8d5af;font:700 8px Inter;letter-spacing:.12em}.stage-line b{color:#ffdb84}.stage-track{height:4px;margin-top:4px;background:#171b20;border:1px solid #0008}.stage-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#a55e1c,#ffd879);box-shadow:0 0 9px #f4a94e;transition:width .3s}

.quick-actions{position:absolute;z-index:8;right:10px;top:137px;display:grid;gap:8px}.quick-actions button{position:relative;width:46px;height:50px;padding:4px 2px;border:1px solid #d9b46261;background:linear-gradient(145deg,#22242be8,#0b0e12ed);box-shadow:inset 0 0 0 1px #050608,0 3px 10px #0008}.quick-actions span{display:block;font-size:19px;filter:drop-shadow(0 0 5px #efaa4a)}.quick-actions small{display:block;margin-top:2px;color:#e5c681;font:800 6px Inter;letter-spacing:.06em}.quick-actions .ready::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#6eff8d;box-shadow:0 0 8px #43e872}.quick-actions button.active{border-color:#fff1a4;box-shadow:0 0 15px #ffc44288}
.live-pill{position:absolute;z-index:8;left:10px;top:137px;width:75px;padding:6px 6px 5px;background:linear-gradient(145deg,#151a21ed,#080a0ded);border:1px solid #41e7e955;box-shadow:0 4px 14px #000a;text-align:left}.live-pill>span{display:flex;align-items:center;gap:4px;color:#fff;font:900 8px Inter;letter-spacing:.12em}.live-pill>span i{width:6px;height:6px;border-radius:50%;background:#ff315d;box-shadow:0 0 8px #ff315d;animation:pulse .9s infinite}.live-pill>b{display:block;margin-top:4px;color:#fd4d78;font:800 6px Inter;letter-spacing:.08em}.live-pill.connected>b{color:#4df6da}.live-pill small{display:block;margin-top:4px;color:#929aa6;font:700 5px Inter}.live-pill strong{color:#fff;font-size:6px}.live-pill em{color:#7ce9ee;font-style:normal}.gift-alert{position:absolute;z-index:24;left:50%;top:19%;width:82%;display:flex;align-items:center;gap:11px;padding:11px 13px;transform:translate(-50%,-18px) scale(.92);opacity:0;background:linear-gradient(110deg,#111722f5,#0a0c12f5);border:1px solid #44e1e4;box-shadow:0 12px 36px #000c,0 0 22px #ff3b7a28;pointer-events:none}.gift-alert.show{animation:gift-alert 2.55s ease both}.gift-alert>span{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:radial-gradient(circle,#61384c,#19141c 67%);font-size:28px;box-shadow:0 0 18px #ff4d8760}.gift-alert div{min-width:0}.gift-alert small,.gift-alert strong,.gift-alert em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gift-alert small{color:#54e6eb;font:800 7px Inter;letter-spacing:.13em}.gift-alert strong{margin-top:3px;color:#fff0cf;font:800 14px Cinzel}.gift-alert em{margin-top:4px;color:#ffb667;font:800 7px Inter;font-style:normal;letter-spacing:.08em}.gift-alert.epic,.gift-alert.legendary{border-color:#ffd35b;box-shadow:0 12px 36px #000c,0 0 28px #ffd45a66}.gift-alert.legendary>span{background:radial-gradient(circle,#b47728,#25170a 70%);box-shadow:0 0 24px #ffbe3f}

.battle-zone{position:absolute;z-index:5;top:116px;left:0;right:0;bottom:303px;pointer-events:none}.enemy-card{position:absolute;top:8px;left:50%;width:66%;transform:translateX(-50%);padding:7px 9px;background:linear-gradient(90deg,transparent,#080b0dd6 12%,#080b0de8 88%,transparent);text-align:center}.enemy-card>div:first-child{display:flex;align-items:center;justify-content:center;gap:7px}.enemy-card span{padding:2px 4px;border:1px solid #b64839;background:#4c1616;color:#ff9b85;font:800 6px Inter;letter-spacing:.1em}.enemy-card strong{font:700 10px Cinzel;color:#f6e9d0}.enemy-card b{color:#cbb689;font-size:7px}.enemy-track{height:7px;margin-top:5px;padding:1px;background:#090909;border:1px solid #7e5e4b}.enemy-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#842018,#ef5b3d);box-shadow:0 0 8px #ff3b24;transition:width .18s}.enemy-card>small{display:block;margin-top:2px;color:#d5c7aa;font-size:7px}
.combat-stage{position:absolute;inset:54px 0 17px;overflow:visible;transform-style:preserve-3d}.three-stage{position:absolute;z-index:2;inset:-18% -8% -5%;pointer-events:none}.three-stage canvas{display:block;width:100%;height:100%}.three-canvas{position:absolute;inset:0;filter:brightness(1.12) contrast(1.08)}.combat-stage.mode-3d>.actor,.combat-stage.mode-3d>.actor-shadow{display:none}.actor{position:absolute;z-index:3;object-fit:contain;pointer-events:none;user-select:none;will-change:transform,filter,opacity}.hero-actor{left:13%;bottom:-2px;width:38%;height:68%;object-position:center bottom;filter:drop-shadow(0 10px 9px #000d) drop-shadow(0 0 6px #ffac5070);transform-origin:50% 92%;animation:hero-breathe 2.1s ease-in-out infinite}.monster-actor{right:12%;top:auto;bottom:16%;width:43%;height:58%;object-position:center bottom;filter:drop-shadow(0 10px 9px #000d) drop-shadow(0 0 7px #ff743b66);transform-origin:50% 92%;animation:monster-breathe 2.35s ease-in-out infinite}.combat-stage[data-monster="hound"] .monster-actor{right:8%;top:auto;bottom:21%;width:52%;height:40%}.combat-stage[data-monster="demon"] .monster-actor{right:9%;top:auto;bottom:10%;width:50%;height:67%}.combat-stage[data-monster="orc"] .monster-actor{right:12%;width:44%;height:60%}.attack-echo{position:absolute;z-index:4;left:13%;bottom:-2px;width:38%;height:68%;object-fit:contain;object-position:center bottom;mix-blend-mode:screen;filter:brightness(1.7) saturate(0) blur(1.2px) drop-shadow(0 0 10px #ffd16b);transform-origin:50% 92%;animation:attack-echo .5s ease-out forwards}
.actor-shadow{position:absolute;z-index:1;height:16px;border-radius:50%;background:#000c;filter:blur(4px);transform:perspective(30px) rotateX(55deg)}.hero-shadow{left:16%;bottom:0;width:32%}.monster-shadow{right:15%;bottom:17%;width:34%}.combat-stage[data-monster="hound"] .monster-shadow{right:12%;bottom:21%;width:42%}.combat-stage[data-monster="demon"] .monster-shadow{bottom:11%;right:12%}
.hero-aura,.monster-aura{position:absolute;z-index:0;border-radius:50%;filter:blur(2px);opacity:.62;pointer-events:none}.hero-aura{left:16%;bottom:-7%;width:37%;height:31%;background:radial-gradient(ellipse,#f2a7405c,transparent 67%);animation:aura-pulse 2.1s ease-in-out infinite}.monster-aura{right:18%;top:15%;width:38%;height:35%;background:radial-gradient(ellipse,#e74b1d45,transparent 67%);animation:aura-pulse 2.7s ease-in-out infinite reverse}.combat-stage[data-hero="mage"] .hero-aura{background:radial-gradient(ellipse,#694cff68,transparent 67%)}.combat-stage[data-hero="ranger"] .hero-aura{background:radial-gradient(ellipse,#31c66a5c,transparent 67%)}
.ground-runes{position:absolute;z-index:2;left:17%;bottom:-1%;width:34%;height:14%;color:#e0aa55;border:1px solid currentColor;border-radius:50%;transform:perspective(70px) rotateX(62deg);box-shadow:0 0 15px #e5993d;background:radial-gradient(circle,#e8993636,transparent 66%);opacity:.7;animation:runes 8s linear infinite}.ground-runes::before,.ground-runes::after{content:"";position:absolute;inset:12%;border:1px dashed currentColor;border-radius:50%}.ground-runes::after{inset:34%;background:#ffd77d55}.combat-stage[data-hero="mage"] .ground-runes{color:#936dff;background:radial-gradient(circle,#694cff38,transparent 66%);box-shadow:0 0 15px #7b57ff}.combat-stage[data-hero="ranger"] .ground-runes{color:#56ca85;background:radial-gradient(circle,#31c66a30,transparent 66%);box-shadow:0 0 15px #38d778}
.hero-actor.attacking.hero-knight{animation:knight-attack .68s cubic-bezier(.16,.84,.2,1)}.hero-actor.attacking.hero-mage{animation:mage-cast .72s ease-out}.hero-actor.attacking.hero-ranger{animation:ranger-shot .62s ease-out}.hero-actor.hurt{animation:hero-hurt .38s ease-out}.hero-actor.swapping{animation:hero-swap .65s ease-out}.monster-actor.spawning{animation:monster-spawn .58s cubic-bezier(.2,.85,.25,1)}.monster-actor.hit{animation:monster-hit .42s ease-out}.monster-actor.counter{animation:monster-counter .62s ease-in-out}.monster-actor.dying{animation:monster-die .7s ease-in forwards}.combat-stage.boss-arrival{animation:boss-shake .7s ease-out}.combat-stage.attack-live{animation:combat-kick .34s ease-out}.combat-stage.attack-live .hero-aura{opacity:1;transform:scale(1.2)}
.projectile-layer{position:absolute;z-index:5;inset:0;pointer-events:none}.battle-projectile{position:absolute;left:39%;bottom:34%;width:22px;height:8px;border-radius:50%;background:#a8eaff;box-shadow:0 0 6px #fff,0 0 15px #59b8ff,0 0 28px #6e50ff;animation:projectile-flight .48s ease-in forwards}.battle-projectile.arrow{width:52px;height:4px;border-radius:0;background:linear-gradient(90deg,transparent,#fff,#a8ffbd);box-shadow:0 0 8px #4dff87;transform:rotate(-24deg);animation:arrow-flight .42s linear forwards}.battle-projectile.slash{left:34%;bottom:33%;width:92px;height:92px;border:5px solid transparent;border-top-color:#fff4c3;border-right-color:#ffad44;background:none;box-shadow:none;filter:drop-shadow(0 0 10px #ff8327);animation:slash-flight .52s ease-out forwards}.battle-projectile.meteor{left:50%;top:-15%;width:30px;height:82px;border-radius:50%;background:linear-gradient(#fff,#8fcfff 18%,#865eff 45%,transparent);box-shadow:0 0 20px #7c59ff;transform:rotate(24deg);animation:meteor-fall .55s ease-in forwards}
.damage-layer{position:absolute;z-index:11;inset:0}.damage-number{position:absolute;left:61%;top:31%;color:#fff0a3;font:800 32px Cinzel;text-shadow:0 2px #5a170a,0 0 12px #ff6b22;animation:damage-float .9s ease-out forwards}.damage-number.crit{color:#fff;font-size:42px;text-shadow:0 2px #a42811,0 0 18px #ffad38}.damage-number small{display:block;color:#ffba5e;font:800 7px Inter;letter-spacing:.2em;text-align:center}
.combat-status{--attack-progress:0%;position:absolute;left:50%;bottom:52px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px 10px 8px;overflow:hidden;background:#070a0de8;border:1px solid #c49b556b;box-shadow:0 4px 14px #0009;white-space:nowrap}.combat-status::after{content:"";position:absolute;left:0;bottom:0;width:var(--attack-progress);height:2px;background:linear-gradient(90deg,#b96720,#ffe099);box-shadow:0 0 7px #ffb43d}.combat-status i{width:6px;height:6px;border-radius:50%;background:#72ef80;box-shadow:0 0 7px #72ef80;animation:pulse 1s infinite}.combat-status span{font:800 7px Inter;letter-spacing:.12em;color:#e8ddc7}.combat-status b{padding-left:6px;border-left:1px solid #ffffff24;color:#ffc85f;font-size:8px}
.gift-callout{position:absolute;left:50%;bottom:5px;display:flex;gap:4px;transform:translateX(-50%);white-space:nowrap}.gift-callout span{padding:3px 5px;background:#080b0dc9;border:1px solid #ffffff16;color:#bfc5cc;font:800 5px Inter;letter-spacing:.04em}.gift-callout span:first-child{border-color:#ff497659}.gift-callout span:nth-child(2){border-color:#aa70ff59}.gift-callout span:last-child{border-color:#ffd05a59;color:#f3d584}
.skills{position:absolute;left:11px;bottom:35px;display:flex;gap:7px;pointer-events:auto}.skill-button{position:relative;width:54px;height:54px;overflow:hidden;border:1px solid #d4aa61;background:radial-gradient(circle at 50% 28%,#61341f,#11141b 60%);box-shadow:inset 0 0 0 2px #090b0e,0 4px 12px #0009}.skill-button span{display:block;font-size:23px;color:#ffb862;text-shadow:0 0 8px #ff6a1c}.skill-button small{font:800 6px Inter;color:#ffe0a6}.skill-button.ultimate{background:radial-gradient(circle at 50% 28%,#233e6a,#11141b 60%)}.skill-button.ultimate span{color:#9cceff;text-shadow:0 0 9px #3796ff}.skill-button:disabled{filter:grayscale(.6);color:#777}.cooldown{position:absolute;inset:auto 0 0;height:0;background:#030508c7;transition:height .1s}

.upgrade-dock{position:absolute;z-index:10;left:0;right:0;bottom:64px;height:239px;padding:0 11px 9px;background:linear-gradient(180deg,#080b0eea,#090b0ff8 25%);border-top:1px solid #cba25366;box-shadow:0 -15px 35px #0009}.upgrade-dock::before{content:"";position:absolute;left:50%;top:0;width:55%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#ffe39b,transparent)}
.dock-head{height:50px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.dock-head>div small{display:block;color:#9f9788;font:700 7px Inter;letter-spacing:.16em}.dock-head>div strong{color:#ffe09a;font:800 22px Cinzel}.dock-head>span{padding:5px 7px;background:#162118;border:1px solid #3e6746;color:#92d99d;font:800 7px Inter;letter-spacing:.08em}.dock-head>span i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#6eff83;box-shadow:0 0 6px #6eff83}.dock-head>button{border:0;background:none;color:#d6b46c;font:800 7px Inter;letter-spacing:.08em}
.upgrade-list{display:grid;gap:5px;padding-top:7px}.upgrade{height:55px;display:grid;grid-template-columns:43px 1fr 77px;align-items:center;gap:8px;padding:5px 6px;text-align:left;border:1px solid #aa89543b;background:linear-gradient(90deg,#181c22e8,#0d1015ed);box-shadow:inset 0 0 0 1px #060708;transition:transform .12s,filter .12s}.upgrade:active{transform:scale(.98);filter:brightness(1.3)}.upgrade:disabled{filter:grayscale(.8);opacity:.62}.upgrade-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ad7b35;background:radial-gradient(circle,#663a19,#171616);font-size:21px}.upgrade-icon.speed{color:#9ed8ff;background:radial-gradient(circle,#234867,#15181b)}.upgrade-icon.fortune{color:#ffe58c;background:radial-gradient(circle,#5d4a1b,#171712)}.upgrade-copy strong{display:block;color:#f0e3cc;font:700 10px Cinzel}.upgrade-copy small{display:block;margin-top:5px;color:#958e84;font-size:7px}.upgrade-buy{justify-self:stretch;padding:6px 5px;text-align:center;background:linear-gradient(#6c4b1e,#33200d);border:1px solid #b5853c;color:#ffdc87}.upgrade-buy b{display:block;font:800 10px Inter}.upgrade-buy small{display:block;margin-top:2px;font:800 6px Inter;letter-spacing:.05em}

.bottom-nav{position:absolute;z-index:12;left:0;right:0;bottom:0;height:64px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:#080b0ff7;border-top:1px solid #a4814e59}.bottom-nav button{position:relative;border:0;border-right:1px solid #ffffff0a;background:none;color:#77736c}.bottom-nav button.active{color:#f6cb71;background:linear-gradient(#402a114a,transparent)}.bottom-nav button.active::before{content:"";position:absolute;left:22%;right:22%;top:-1px;height:2px;background:#ffd371;box-shadow:0 0 9px #ffb73b}.bottom-nav span{display:block;font-size:19px}.bottom-nav small{display:block;margin-top:3px;font:800 7px Inter;letter-spacing:.1em}.bottom-nav em{position:absolute;top:8px;left:58%;width:7px;height:7px;border-radius:50%;background:#ec5949;box-shadow:0 0 6px #ff4b39}
.toast{position:absolute;z-index:40;left:50%;top:19%;transform:translateX(-50%);min-width:190px;max-width:88%;padding:10px 15px;background:#090c10ed;border:1px solid #e0b45e;color:#ffe5ad;text-align:center;font:700 10px Cinzel;box-shadow:0 8px 30px #000}

.sheet{position:absolute;z-index:30;inset:0}.sheet-backdrop{position:absolute;inset:0;background:#020305bb;backdrop-filter:blur(2px)}.sheet-panel{position:absolute;left:0;right:0;bottom:0;min-height:45%;max-height:76%;overflow:auto;padding:22px 18px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(#181b21,#090b0f 28%);border-top:1px solid #d9b260;box-shadow:0 -12px 35px #000}.sheet-panel::before{content:"";position:absolute;left:50%;top:7px;width:45px;height:3px;transform:translateX(-50%);background:#8d7b5b}.sheet-close{position:absolute;right:13px;top:12px;width:30px;height:30px;border:1px solid #7e6a48;background:#11151a;color:#d9c59e;font-size:20px}.sheet-title small{display:block;color:#c79c50;font:800 8px Inter;letter-spacing:.2em}.sheet-title h2{margin:7px 0 18px;color:#f1dfbd;font:700 23px Cinzel}.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sheet-stat{padding:12px;background:#0d1116;border:1px solid #ffffff13}.sheet-stat small{display:block;color:#86837e;font-size:8px}.sheet-stat strong{display:block;margin-top:5px;color:#f4cf7c;font:700 17px Cinzel}.sheet-note{margin:15px 0;color:#b6aea0;font-size:10px;line-height:1.6}.sheet-action{width:100%;padding:13px;border:1px solid #c59648;background:linear-gradient(#765223,#35200c);color:#ffe4a5;font:800 10px Inter;letter-spacing:.12em}.mission{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff14}.mission>span{font-size:23px}.mission div{flex:1}.mission strong{display:block;font:700 10px Cinzel}.mission small{color:#918b82;font-size:8px}.mission b{color:#f1c96f;font-size:9px}
.live-title small{color:#42e3e8}.live-goal{padding:12px;background:linear-gradient(120deg,#15101a,#0b1017);border:1px solid #ff3d7350}.live-goal span{color:#a8abb2;font:800 7px Inter;letter-spacing:.1em}.live-goal b{display:block;margin-top:5px;color:#fff;font:800 14px Cinzel}.live-goal i{display:block;height:5px;margin-top:8px;overflow:hidden;background:#282632}.live-goal i em{display:block;height:100%;background:linear-gradient(90deg,#22d7df,#ff3d79,#ffd35a);box-shadow:0 0 9px #ff3d79}.gift-simulator{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:10px}.gift-simulator button{min-width:0;padding:8px 2px;border:1px solid #ffffff18;background:linear-gradient(#1a1e26,#0c0e13);text-align:center}.gift-simulator button:active{transform:scale(.94);filter:brightness(1.5)}.gift-simulator span{display:block;font-size:24px}.gift-simulator strong{display:block;margin-top:5px;overflow:hidden;color:#eee2cf;font:800 7px Cinzel;text-overflow:ellipsis}.gift-simulator small{display:block;margin-top:3px;color:#858993;font:700 5px Inter;line-height:1.35}.leaderboard{padding:11px;background:#090c11;border:1px solid #ffffff12}.leaderboard>small{display:block;margin-bottom:7px;color:#f0be67;font:800 7px Inter;letter-spacing:.14em}.leaderboard>div{display:grid;grid-template-columns:24px 1fr auto;padding:6px 0;border-top:1px solid #ffffff0d;font-size:8px}.leaderboard>div b{color:#54dfe6}.leaderboard>div strong{color:#ffd474}.leaderboard p{margin:0;color:#858993;font-size:8px}

.hero-select{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:5px 0 16px}.hero-choice{position:relative;min-width:0;height:145px;padding:0 4px 9px;overflow:hidden;border:1px solid #665943;background:linear-gradient(#20242c,#0c0f14);text-align:center}.hero-choice.selected{border-color:#f0c86e;box-shadow:inset 0 0 18px #b67c293e}.hero-choice img{display:block;width:100%;height:104px;object-fit:contain;filter:drop-shadow(0 3px 5px #000)}.hero-choice strong{display:block;overflow:hidden;color:#f0dfbf;font:700 8px Cinzel;text-overflow:ellipsis;white-space:nowrap}.hero-choice small{display:block;margin-top:3px;color:#9b9489;font-size:6px}.hero-choice.selected::after{content:"ELEGIDO";position:absolute;top:5px;right:4px;padding:2px 3px;background:#5f431b;color:#ffe39c;font:800 5px Inter;letter-spacing:.08em}
.offline-modal{position:absolute;z-index:50;inset:0;display:grid;place-items:center;padding:22px;background:#020305e6;backdrop-filter:blur(5px)}.offline-card{position:relative;width:100%;padding:30px 22px 22px;text-align:center;background:radial-gradient(circle at 50% 8%,#5a3f1c,#17191c 29%,#0b0e12 70%);border:1px solid #d5ad5d;box-shadow:0 0 0 3px #080a0d,0 18px 60px #000}.offline-rays{display:block;color:#ffe19a;font-size:44px;text-shadow:0 0 25px #ffb836}.offline-card>small{color:#d3ad62;font:800 8px Inter;letter-spacing:.23em}.offline-card h1{margin:9px 0;color:#fff0cf;font:700 24px/1.15 Cinzel}.offline-card p{color:#999287;font-size:10px}.offline-loot{display:flex;justify-content:center;align-items:center;gap:12px;margin:20px 0;padding:15px;background:#07090cc9;border:1px solid #816633}.offline-loot>span{color:#ffc754;font-size:29px}.offline-loot small{display:block;color:#8f887c;font-size:7px}.offline-loot strong{display:block;margin-top:3px;color:#ffe091;font:800 22px Cinzel}.offline-card button{width:100%;padding:14px;border:1px solid #e0b45e;background:linear-gradient(#9a6d2e,#54350e);color:#fff0c0;font:800 10px Inter;letter-spacing:.12em}

@keyframes camera-breathe{to{transform:scale(1.045) translateY(-.5%)}}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.8}100%{transform:translateY(-58vh) translateX(24px);opacity:0}}
@keyframes slash-impact{0%{opacity:0;transform:translate(-50%,-50%) rotate(-11deg) scale(.18)}24%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(.82)}55%{opacity:.95;transform:translate(-50%,-50%) rotate(-4deg) scale(1.06)}100%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(1.32)}}
@keyframes damage-float{0%{transform:translate(-50%,0) scale(.65);opacity:0}15%{opacity:1;transform:translate(-50%,-8px) scale(1.1)}100%{transform:translate(calc(-50% + 18px),-80px) scale(.9);opacity:0}}
@keyframes pulse{50%{opacity:.4}}
@keyframes hero-breathe{0%,100%{transform:translateY(0) rotate(-.25deg) scale(1)}48%{transform:translateY(-5px) rotate(.35deg) scale(1.008)}}
@keyframes monster-breathe{0%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(-4px) scale(1.022)}}
@keyframes aura-pulse{50%{opacity:.92;transform:scale(1.1)}}
@keyframes runes{to{transform:perspective(70px) rotateX(62deg) rotateZ(360deg)}}
@keyframes knight-attack{0%{transform:translate(0,0) rotate(0) scale(1)}18%{transform:translate(-8px,2px) rotate(-2deg) scale(.99)}42%{transform:translate(78px,-18px) rotate(7deg) scale(1.08);filter:brightness(1.25) drop-shadow(0 0 12px #ffc66b)}62%{transform:translate(63px,-10px) rotate(-3deg) scale(1.04)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes mage-cast{0%{transform:translateY(0) scale(1)}28%{transform:translateY(-12px) scale(1.08);filter:brightness(1.35) drop-shadow(0 0 22px #8668ff)}56%{transform:translate(30px,-7px) scale(1.05)}100%{transform:none}}
@keyframes ranger-shot{0%{transform:none}24%{transform:translate(-12px,2px) rotate(-4deg)}48%{transform:translate(18px,-7px) rotate(3deg) scale(1.04);filter:brightness(1.3) drop-shadow(0 0 14px #67ef99)}100%{transform:none}}
@keyframes attack-echo{0%{opacity:.28;transform:translate(0,0) scale(1)}55%{opacity:.11;transform:translate(62px,-13px) scale(1.05)}100%{opacity:0;transform:translate(85px,-20px) scale(1.09)}}
@keyframes hero-hurt{30%{transform:translate(-11px,4px) rotate(-4deg);filter:brightness(1.8) sepia(1) hue-rotate(-35deg)}100%{transform:none}}
@keyframes hero-swap{0%{opacity:0;transform:translateY(30px) scale(.7);filter:brightness(3)}65%{opacity:1;transform:translateY(-4px) scale(1.05)}100%{transform:none}}
@keyframes monster-spawn{0%{opacity:0;transform:translateY(-35px) scale(.65);filter:brightness(3) blur(5px)}70%{opacity:1;transform:translateY(3px) scale(1.04)}100%{transform:none}}
@keyframes monster-hit{0%{transform:none}24%{transform:translate(21px,-5px) rotate(5deg) scale(.96);filter:brightness(2.4) sepia(1) saturate(2.4)}52%{transform:translate(13px,2px) rotate(-3deg) scale(1.02)}100%{transform:none}}
@keyframes monster-counter{0%,100%{transform:none}45%{transform:translate(-42px,18px) scale(1.08) rotate(-4deg)}70%{transform:translate(-35px,12px) scale(1.04)}}
@keyframes monster-die{0%{opacity:1;transform:none}35%{transform:translate(15px,9px) rotate(8deg);filter:brightness(2) saturate(.4)}100%{opacity:0;transform:translate(28px,45px) rotate(18deg) scale(.55);filter:brightness(.3) blur(3px)}}
@keyframes projectile-flight{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(118px,-85px) scale(1.4);opacity:0}}
@keyframes arrow-flight{0%{transform:translate(0,0) rotate(-24deg);opacity:1}100%{transform:translate(130px,-78px) rotate(-24deg);opacity:.1}}
@keyframes slash-flight{0%{transform:translate(-8px,8px) rotate(-72deg) scale(.2);opacity:0}22%{opacity:1}68%{opacity:1}100%{transform:translate(120px,-78px) rotate(38deg) scale(1.35);opacity:0}}
@keyframes meteor-fall{0%{transform:translate(0,0) rotate(24deg) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(42px,145px) rotate(24deg) scale(1.3);opacity:0}}
@keyframes boss-shake{10%,30%,50%{transform:translateX(-3px)}20%,40%,60%{transform:translateX(3px)}100%{transform:none}}
@keyframes combat-kick{0%,100%{transform:translate(0,0)}35%{transform:translate(-2px,1px)}55%{transform:translate(3px,-1px)}72%{transform:translate(-1px,0)}}
@keyframes gift-alert{0%{opacity:1;transform:translate(-50%,-8px) scale(.96)}8%,86%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px) scale(.97)}}
@media(max-height:700px){.game-shell{min-height:0}.campaign-head{top:64px}.battle-zone{top:105px;bottom:274px}.upgrade-dock{height:210px}.dock-head{height:39px}.upgrade{height:50px}.bottom-nav{height:56px}.upgrade-dock{bottom:56px}.skill-button{width:46px;height:46px}.combat-status{bottom:38px}.quick-actions{top:120px}}
@media(prefers-reduced-motion:reduce){.scene,.ember,.combat-status i{animation:none}.damage-number{animation-duration:.1s}}