:root{--bg: #0b1020;--card: #1a1520;--text: #e8eaf6;--muted: #a5b4d0;--border: #464154;--accent: #FAAC47;--gold: #FAAC47;--danger: #8B372E;--success: #10b981;--purple: #7F4A4B;--warrior: #DB6331;--mage: #7F4A4B;--worge: #DB6331;--ranger: #22c55e;--brand-orange: #DB6331;--brand-grey: #464154;--brand-mauve: #7F4A4B;--brand-burgundy: #8B372E;--frame-inset-top: 0;--frame-inset-side: 0;--frame-inset-bottom: 0;--frame-content-bottom: 0;--game-ref-w: 1280px;--game-ref-h: 720px;--game-scale: 1;--ui-scale: 1;--font-scale: 1;--container-w: 100vw;--container-h: 100vh}*{box-sizing:border-box;margin:0;padding:0}*:focus{outline:none}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{font-family:Jost,sans-serif;background:var(--bg, #0b1020);color:var(--text)}#root{width:100%;height:100%;overflow:hidden}.game-frame{width:100%;height:100%;position:relative;overflow:hidden;background:var(--bg);cursor:url(/sprites/ui/cursor_gauntlet.png) 4 0,auto}.game-frame:active{cursor:url(/sprites/ui/cursor_gauntlet_click.png) 4 0,auto}.game-frame button,.game-frame a,.game-frame [role=button],.game-frame .clickable{cursor:url(/sprites/ui/cursor_gauntlet.png) 4 0,pointer}.game-frame button:active,.game-frame a:active,.game-frame [role=button]:active,.game-frame .clickable:active{cursor:url(/sprites/ui/cursor_gauntlet_click.png) 4 0,pointer}.game-frame input,.game-frame textarea,.game-frame select{cursor:text}.game-container{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}.game-viewport{container-type:size;container-name:game}.game-screen{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.game-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.game-layer.interactive{pointer-events:auto}.game-panel{position:absolute;pointer-events:auto}.font-cinzel{font-family:Morpheus,Cinzel,serif}.font-warcraft{font-family:LifeCraft,Morpheus,MedievalSharp,serif}.font-morpheus{font-family:Morpheus,Cinzel,serif}#game-ui-overlay{font-family:Morpheus,Cinzel,serif;box-sizing:border-box}.ui-element{pointer-events:auto}.ornate-popup{position:relative}.panel-style{background:linear-gradient(to bottom,#1a1520,#0d0a10);border:2px solid var(--brand-orange);box-shadow:inset 0 0 10px #000,0 0 10px #000c,0 0 6px #db633126,inset 1px 1px #faac4714;position:relative}.panel-style:before{content:"";position:absolute;top:3px;left:3px;width:6px;height:6px;background:var(--gold);border:1px solid rgba(250,172,71,.7);box-shadow:0 0 4px #faac4799;border-radius:1px;pointer-events:none}.panel-style:after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;background:var(--gold);border:1px solid rgba(250,172,71,.7);box-shadow:0 0 4px #faac4799;border-radius:1px;pointer-events:none}.hotbar-slot{width:48px;height:48px;background:#000000b3;border:2px solid #444;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:inset 0 0 6px #000;position:relative;cursor:pointer;transition:all .15s}.hotbar-slot:hover{border-color:var(--gold);transform:scale(1.1) translateY(-2px);box-shadow:inset 0 0 6px #000,0 0 12px #faac4766,0 4px 8px #0006}.hotbar-slot:active{transform:scale(.95);box-shadow:inset 0 0 8px #000,0 0 4px #faac4733}.hotbar-slot .hotbar-num{position:absolute;top:2px;left:4px;font-size:9px;color:#888;font-family:Jost,sans-serif}.circle-btn{width:38px;height:38px;border-radius:4px;background:url(/ui/icon-button-frame.png) center/cover no-repeat;border:none;display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;box-shadow:0 4px 8px #0009;cursor:pointer;transition:all .15s}.circle-btn:hover{box-shadow:0 4px 8px #0009,0 0 12px #faac474d;transform:scale(1.1);filter:brightness(1.2)}.circle-btn:active{transform:scale(.9);filter:brightness(.9)}.circle-btn.active{box-shadow:0 4px 8px #0009,0 0 14px #faac4780;filter:brightness(1.3)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#141a2b80}::-webkit-scrollbar-thumb{background:var(--brand-orange);border-radius:3px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{opacity:.3;transform:translate(-100%)}50%{opacity:1}to{opacity:.3;transform:translate(100%)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes cinematicFade{0%{opacity:0;filter:brightness(2)}40%{opacity:1;filter:brightness(1.3)}to{opacity:1;filter:brightness(1)}}@keyframes warRoomSlideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes warRoomSlideRight{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes warRoomFadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes warRoomSlideLeft{0%{opacity:0;transform:translate(80px)}to{opacity:1;transform:translate(0)}}@keyframes battleEntry{0%{opacity:0;transform:scale(1.15);filter:brightness(3)}30%{opacity:1;filter:brightness(1.5)}to{opacity:1;transform:scale(1);filter:brightness(1)}}@keyframes battleExit{0%{opacity:1}to{opacity:0;transform:scale(.95);filter:brightness(.5)}}@keyframes victoryBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{transform:translate(-50%,-50%) scale(.96)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes defeatBanner{0%{opacity:0;transform:translate(-50%,-50%) translateY(30px);filter:blur(8px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0);filter:blur(0)}}@keyframes swirlSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dmgPop{0%{opacity:0;transform:translate(-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.3)}35%{transform:translate(-50%,-25px) scale(1)}to{opacity:0;transform:translate(-50%,-55px) scale(.7)}}@keyframes dmgCritPop{0%{opacity:0;transform:translate(-50%) scale(.3)}10%{opacity:1;transform:translate(-50%,-5px) scale(1.6)}25%{transform:translate(-50%,-20px) scale(1.1)}40%{transform:translate(-50%,-30px) scale(1)}to{opacity:0;transform:translate(-50%,-65px) scale(.6)}}@keyframes healPop{0%{opacity:0;transform:translate(-50%,5px) scale(.5)}20%{opacity:1;transform:translate(-50%,-8px) scale(1.15)}to{opacity:0;transform:translate(-50%,-45px) scale(.8)}}@keyframes buffPop{0%{opacity:0;transform:translate(-50%) scale(.3)}15%{opacity:1;transform:translate(-50%,-5px) scale(1.2)}30%{transform:translate(-50%,-12px) scale(1)}to{opacity:0;transform:translate(-50%,-40px) scale(.7)}}@keyframes screenShake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-3px,-3px)}40%{transform:translate(3px,3px)}50%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}70%{transform:translate(-1px,2px)}80%{transform:translate(1px,-1px)}90%{transform:translate(-1px)}}@keyframes critShake{0%,to{transform:translate(0)}10%{transform:translate(-8px,4px)}20%{transform:translate(7px,-5px)}30%{transform:translate(-6px,-4px)}40%{transform:translate(5px,5px)}50%{transform:translate(-3px,2px)}60%{transform:translate(3px,-2px)}70%{transform:translate(-2px,3px)}80%{transform:translate(2px,-1px)}}@keyframes btnPress{0%{transform:scale(1)}40%{transform:scale(.94)}to{transform:scale(1)}}@keyframes glowPulse{0%,to{box-shadow:0 0 8px #faac4733}50%{box-shadow:0 0 24px #faac4780,0 0 48px #db633126}}@keyframes goldPulse{0%,to{box-shadow:0 0 8px #faac4726}50%{box-shadow:0 0 20px #faac4766,0 0 40px #db63311a}}@keyframes nodeHoverPop{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}to{transform:translate(-50%,-50%) scale(1.08)}}@keyframes panelSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes vignetteFadeIn{0%{opacity:0}to{opacity:1}}@keyframes titleGlow{0%,to{text-shadow:0 0 20px rgba(250,172,71,.2),0 0 40px rgba(219,99,49,.1);filter:brightness(1)}50%{text-shadow:0 0 30px rgba(250,172,71,.4),0 0 60px rgba(219,99,49,.2);filter:brightness(1.05)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bossNodePulse{0%,to{box-shadow:0 0 12px #c80000b3,0 0 24px #c8000066}50%{box-shadow:0 0 18px #ff1e1ee6,0 0 36px #c8000099}}@keyframes footstepPulse{0%,to{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}@keyframes footprintFade{0%{opacity:.6}60%{opacity:.4}to{opacity:0}}@keyframes glow{0%,to{box-shadow:0 0 5px #faac474d}50%{box-shadow:0 0 20px #faac4799}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}@keyframes atbFill{0%{width:0%}}@keyframes unitSlideIn{0%{opacity:0;transform:translate(-50%,-50%) translate(var(--slide-offset, -60px)) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) translate(0) scale(1)}}@keyframes particleFade{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.2) translateY(-20px)}}@keyframes healRise{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:1;transform:translateY(-10px) scale(1)}to{opacity:0;transform:translateY(-40px) scale(.3)}}@keyframes ambientFloat{0%{opacity:0;transform:translateY(0)}20%{opacity:.4}80%{opacity:.2}to{opacity:0;transform:translateY(-80px)}}@keyframes effectPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}60%{opacity:.9;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.6)}}@keyframes effectGrid{0%{background-position:0 0}to{background-position:-100% 0}}@keyframes workerIdle{0%{transform:translate(0)}to{transform:translate(-256px)}}@keyframes hurtBlink{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes resurrectGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}@keyframes nightborneTrail1{0%{opacity:.5;transform:translate(-6px) scale(1);filter:brightness(1.5) hue-rotate(0deg) drop-shadow(0 0 8px rgba(120,0,255,.8))}50%{opacity:.25;transform:translate(-10px) scale(.97);filter:brightness(1.2) hue-rotate(15deg) drop-shadow(0 0 12px rgba(120,0,255,.5))}to{opacity:0;transform:translate(-14px) scale(.94);filter:brightness(.8) hue-rotate(30deg) drop-shadow(0 0 4px rgba(120,0,255,.2))}}@keyframes nightborneTrail2{0%{opacity:.35;transform:translate(-12px) scale(.96);filter:brightness(1.3) hue-rotate(20deg) drop-shadow(0 0 6px rgba(180,0,255,.7))}50%{opacity:.15;transform:translate(-18px) scale(.92);filter:brightness(1) hue-rotate(35deg) drop-shadow(0 0 10px rgba(180,0,255,.4))}to{opacity:0;transform:translate(-24px) scale(.88);filter:brightness(.6) hue-rotate(50deg) drop-shadow(0 0 3px rgba(180,0,255,.1))}}@keyframes nightborneTrail3{0%{opacity:.2;transform:translate(-18px) scale(.92);filter:brightness(1.1) hue-rotate(40deg) drop-shadow(0 0 4px rgba(220,0,255,.6))}50%{opacity:.08;transform:translate(-26px) scale(.86);filter:brightness(.8) hue-rotate(55deg) drop-shadow(0 0 8px rgba(220,0,255,.3))}to{opacity:0;transform:translate(-34px) scale(.8);filter:brightness(.5) hue-rotate(70deg) drop-shadow(0 0 2px rgba(220,0,255,.05))}}@keyframes nightborneAura{0%{box-shadow:0 0 15px 5px #7800ff4d,0 0 30px 10px #5000b426,inset 0 0 20px #7800ff1a}50%{box-shadow:0 0 25px 8px #8c14ff66,0 0 45px 15px #6400c833,inset 0 0 30px #8c14ff26}to{box-shadow:0 0 15px 5px #7800ff4d,0 0 30px 10px #5000b426,inset 0 0 20px #7800ff1a}}@keyframes nightborneParticle{0%{opacity:0;transform:translate(0) scale(.5)}20%{opacity:1}to{opacity:0;transform:translate(var(--px, 10px),var(--py, -30px)) scale(0)}}@keyframes morphColumnPulse{0%{opacity:.7;transform:translate(-50%) scaleX(.8)}to{opacity:1;transform:translate(-50%) scaleX(1.1)}}@keyframes morphParticleRise{0%{opacity:0;transform:translateY(0) scale(1)}30%{opacity:1}to{opacity:0;transform:translateY(-60px) scale(.3)}}@keyframes morphBlinkPulse{0%{opacity:.3;transform:scale(.9)}to{opacity:.9;transform:scale(1.15)}}@keyframes titleShimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes subtitleReveal{0%{opacity:0;letter-spacing:12px;filter:blur(4px)}to{opacity:.8;letter-spacing:3px;filter:blur(0)}}@keyframes borderGlow{0%,to{border-color:#faac4766;box-shadow:0 0 12px #faac4726,inset 0 0 12px #faac470d}50%{border-color:#faac47b3;box-shadow:0 0 24px #faac474d,inset 0 0 24px #faac471a}}@keyframes floatIdle{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes scanLine{0%{top:-5%}to{top:105%}}@keyframes lobbyCardShine{0%{left:-100%}to{left:200%}}@keyframes taglinePulse{0%,to{opacity:.7;text-shadow:0 0 8px rgba(110,231,183,.2)}50%{opacity:1;text-shadow:0 0 16px rgba(110,231,183,.4),0 0 32px rgba(110,231,183,.15)}}@keyframes dragonFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes dragonSpriteIdle7{0%{background-position:0 0}to{background-position:-980px 0}}@keyframes screenShakeLight{0%,to{transform:translate(0)}15%{transform:translate(-2px,1px)}30%{transform:translate(2px,-1px)}45%{transform:translate(-1px,-1px)}60%{transform:translate(1px,1px)}75%{transform:translate(-1px)}90%{transform:translateY(-1px)}}@keyframes screenShakeHeavy{0%,to{transform:translate(0)}8%{transform:translate(-10px,5px)}16%{transform:translate(9px,-6px)}24%{transform:translate(-8px,-4px)}32%{transform:translate(7px,5px)}40%{transform:translate(-5px,3px)}50%{transform:translate(4px,-3px)}60%{transform:translate(-3px,2px)}70%{transform:translate(2px,-2px)}80%{transform:translate(-1px,1px)}90%{transform:translate(1px)}}@keyframes hitFlash{0%{filter:brightness(3) saturate(.2)}30%{filter:brightness(2) saturate(.5)}to{filter:brightness(1) saturate(1)}}@keyframes turnGlow{0%,to{box-shadow:0 0 12px 4px #6ee7b74d,0 0 24px 8px #6ee7b71a}50%{box-shadow:0 0 20px 8px #6ee7b780,0 0 40px 16px #6ee7b733}}@keyframes turnGlowEnemy{0%,to{box-shadow:0 0 12px 4px #ef44444d,0 0 24px 8px #ef44441a}50%{box-shadow:0 0 20px 8px #ef444480,0 0 40px 16px #ef444433}}@keyframes deathDissolve{0%{opacity:1;filter:brightness(1) saturate(1);transform:translate(-50%) scale(1)}30%{opacity:.8;filter:brightness(.6) saturate(.3) sepia(.5);transform:translate(-50%) scale(.98)}70%{opacity:.3;filter:brightness(.3) saturate(0) blur(2px);transform:translate(-50%,4px) scale(.94)}to{opacity:0;filter:brightness(0) blur(6px);transform:translate(-50%,8px) scale(.88)}}@keyframes lootItemReveal{0%{opacity:0;transform:translateY(16px) scale(.85)}50%{opacity:1;transform:translateY(-4px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes lootShimmer{0%{left:-100%}to{left:200%}}@keyframes lootTitleReveal{0%{opacity:0;letter-spacing:8px;filter:blur(3px)}60%{opacity:1;letter-spacing:3px;filter:blur(0)}80%{letter-spacing:2px}to{opacity:1;letter-spacing:2px;filter:blur(0)}}@keyframes levelUpBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}40%{opacity:.9;transform:translate(-50%,-50%) scale(.95)}60%{opacity:.7;transform:translate(-50%,-50%) scale(1.05)}to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}@keyframes zoneArrivalFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:.8;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}@keyframes buffAuraOrbit{0%{transform:rotate(0) translate(14px) rotate(0)}to{transform:rotate(360deg) translate(14px) rotate(-360deg)}}@keyframes spiralCast{0%{opacity:0;transform:rotate(0) translate(0) scale(.5)}30%{opacity:1}to{opacity:0;transform:rotate(720deg) translate(20px) scale(0)}}@keyframes countUp{0%{opacity:0;transform:translateY(6px)}40%{opacity:1;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}