:root{
  --bg-0:#0b0c10;--bg-1:#111722;--bg-2:#1f2833;
  --glass:rgba(12,15,22,.72);--glass-deep:rgba(6,8,12,.84);--glass-soft:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09);--metal:rgba(170,184,204,.24);--gold:#f2c45c;--gold-2:#fff0aa;
  --violet:#7c5cff;--cyan:#55d6ff;--red:#ff476f;--green:#4de6a1;
  --text:#f8fafc;--soft:#aab4c2;--muted:#727c8c;
  --r-sm:10px;--r-md:14px;--r-lg:20px;
  --shadow:0 18px 46px rgba(0,0,0,.46);--glow-violet:0 0 24px rgba(124,92,255,.24);--glow-gold:0 0 26px rgba(242,196,92,.34);
  --fast:160ms cubic-bezier(.2,.8,.2,1);--med:260ms cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}html{background:radial-gradient(circle at 50% -10%,rgba(92,70,164,.28),transparent 34%),linear-gradient(180deg,var(--bg-2),var(--bg-0))}body{display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 50% 12%,rgba(77,56,142,.22),transparent 32%),radial-gradient(circle at 14% 72%,rgba(31,111,145,.11),transparent 38%),linear-gradient(180deg,#0b0c10 0%,#121720 48%,#080a0f 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}.game-shell{position:relative;width:100%;max-width:480px;height:100dvh;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 50% 28%,rgba(55,67,96,.30),transparent 40%),linear-gradient(180deg,rgba(20,25,34,.98),rgba(8,10,14,.99));border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05);box-shadow:0 0 100px rgba(0,0,0,.72)}.game-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.014) 40%,transparent 70%);mix-blend-mode:screen;z-index:0}
.top-bar{position:sticky;top:0;z-index:100;min-height:74px;display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 9px 8px;background:linear-gradient(180deg,rgba(13,16,22,.90),rgba(8,10,14,.76));border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.30);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.resource-pill{position:relative;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--metal);border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.015)),rgba(10,12,18,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.28);backdrop-filter:blur(14px);transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast)}.resource-pill:first-child{border-color:rgba(232,190,87,.36)}.resource-pill:nth-child(2){border-color:rgba(112,112,255,.38)}.resource-pill:hover{transform:translateY(-2px);border-color:rgba(220,228,240,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.36)}.resource-pill:active{transform:scale(.96)}.resource-pill>span:last-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.resource-pill small,.vip-badge small,.combat-footer small,.stat-card small,.season-card small{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:900}.resource-pill strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:1.1}.resource-icon{flex:0 0 auto;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:950}.resource-icon.gold{color:#231700;background:radial-gradient(circle at 35% 30%,#fff5be 0%,#ffd15e 38%,#9c6417 100%);box-shadow:0 0 15px rgba(255,204,84,.28)}.resource-icon.gem{background:linear-gradient(145deg,#80f0ff,#6b62ff 48%,#bf45ff);box-shadow:0 0 18px rgba(109,96,255,.36)}
.vip-badge{position:relative;overflow:hidden;border:1px solid rgba(232,190,87,.58);border-radius:15px;background:radial-gradient(circle at 50% 10%,rgba(255,220,111,.20),transparent 52%),linear-gradient(145deg,rgba(48,38,18,.94),rgba(18,15,10,.92));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffe48b;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--glow-gold);animation:vipPulse 2.8s ease-in-out infinite}.vip-badge:before{content:"";position:absolute;width:130%;height:28%;left:-15%;top:-8%;background:linear-gradient(90deg,transparent,rgba(255,247,192,.28),transparent);transform:rotate(-18deg);animation:vipSweep 4s linear infinite}.vip-badge>*{position:relative;z-index:1}.vip-badge strong{font-size:19px;line-height:1}.vip-badge small{color:#bba05f}@keyframes vipPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(242,196,92,.20)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 28px rgba(242,196,92,.48)}}@keyframes vipSweep{0%{transform:translateX(-120%) rotate(-18deg)}100%{transform:translateX(140%) rotate(-18deg)}}
.game-viewport{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(71,60,120,.24),transparent 32%),linear-gradient(180deg,#121722,#090b10 72%)}.screen-panel{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;padding:12px;opacity:0;visibility:hidden;transform:translateY(12px) scale(.99);pointer-events:none;transition:opacity var(--med),transform var(--med),visibility var(--med);background:radial-gradient(circle at 50% 20%,rgba(83,59,154,.18),transparent 36%),linear-gradient(180deg,rgba(17,22,32,.94),rgba(7,9,14,.98));will-change:opacity,transform}.screen-panel.active-screen{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.event-banner{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;padding:10px 12px;border:1px solid rgba(127,94,229,.28);border-radius:var(--r-md);background:linear-gradient(135deg,rgba(76,54,139,.32),rgba(15,18,27,.72));box-shadow:0 10px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(16px)}.event-banner span{grid-row:1/3;align-self:center;padding:5px 7px;border:1px solid rgba(163,127,255,.30);border-radius:999px;color:#c7b5ff;background:rgba(120,79,230,.08);font-size:8px;font-weight:900;letter-spacing:.10em}.event-banner strong{font-size:12px}.event-banner small{font-size:9px;color:var(--muted)}
.stage-header{text-align:center;padding:13px 0 6px}.stage-header small{color:#7d88a0;text-transform:uppercase;letter-spacing:.20em;font-weight:900}.stage-header h1,.menu h1,.enemy-zone h2,.hero-card strong,.feature-card h2,.hero-large h2{font-family:"Cinzel","Marcellus",Georgia,serif;text-transform:uppercase;letter-spacing:.06em}.stage-header h1{margin:4px 0 0;font-size:clamp(22px,6vw,28px);text-shadow:0 4px 18px rgba(0,0,0,.55)}.stage-header p{margin:3px 0;color:var(--muted);font-size:9px;font-weight:800}
.enemy-zone{position:relative;text-align:center;padding-top:7px}.enemy-type{display:inline-block;padding:4px 8px;border:1px solid rgba(255,110,126,.30);border-radius:999px;background:rgba(255,71,111,.06);font-size:8px;font-weight:900;color:#ff9aa8;letter-spacing:.10em}.enemy-orb{position:relative;isolation:isolate;width:min(54vw,220px);aspect-ratio:1;margin:11px auto 10px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 45% 30%,rgba(154,101,255,.25),transparent 36%),linear-gradient(145deg,rgba(25,29,42,.98),rgba(10,12,17,.98));border:1px solid rgba(120,102,187,.44);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -16px 30px rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.50),0 0 24px rgba(119,77,214,.14);animation:enemyFloat 3.4s ease-in-out infinite}.enemy-orb:before{content:"";position:absolute;inset:-45%;z-index:-2;background:conic-gradient(from 0deg,rgba(124,92,255,.12),rgba(85,214,255,.72),rgba(124,92,255,.62),rgba(85,214,255,.18),rgba(124,92,255,.12));animation:borderRotate 5s linear infinite}.enemy-orb:after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:16px;background:radial-gradient(circle at 45% 32%,rgba(114,71,189,.30),transparent 42%),linear-gradient(145deg,#171b27,#090b10)}.enemy-orb span{font-size:58px;color:#cab5ff;text-shadow:0 0 32px rgba(157,113,255,.72);filter:drop-shadow(0 9px 12px rgba(0,0,0,.55))}.enemy-zone h2{margin:0 0 7px;font-size:14px}.enemy-type:has(+ .enemy-orb){}body:has(#stage-progress) .enemy-zone{}@keyframes enemyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes borderRotate{to{transform:rotate(360deg)}}
/* Add the boss class to .enemy-orb on Stage 50 for the premium gold border. */.enemy-orb.boss,.boss-card{border-color:rgba(255,211,102,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 46px rgba(0,0,0,.60),0 0 34px rgba(239,188,70,.28)}.enemy-orb.boss:before,.boss-card:before{background:conic-gradient(from 0deg,#6d4915,#ffd76b,#fff3bd,#d99a2b,#6d4915);animation:bossGoldRotate 2.8s linear infinite}@keyframes bossGoldRotate{to{transform:rotate(360deg)}}
.health-bar,.xp-bar,.progress-bar{position:relative;height:10px;max-width:330px;margin:auto;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:linear-gradient(180deg,rgba(0,0,0,.64),rgba(14,17,23,.86));box-shadow:inset 0 2px 5px rgba(0,0,0,.60),0 1px 0 rgba(255,255,255,.03)}.health-fill,.xp-fill,.progress-fill{position:relative;height:100%;border-radius:inherit;transition:width .3s ease-out;will-change:width}.health-fill{background:linear-gradient(90deg,#8e1537,#ef355a 55%,#ff7a85);box-shadow:0 0 14px rgba(255,64,95,.30)}.xp-fill{background:linear-gradient(90deg,#4d50dc,#7864ff 55%,#62d9ff);box-shadow:0 0 14px rgba(103,101,255,.30)}.health-fill:after,.xp-fill:after,.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-100%);animation:barShimmer 2.4s linear infinite}@keyframes barShimmer{to{transform:translateX(220%)}}.enemy-zone>small{font-size:9px;color:var(--muted);font-weight:700}
.hero-zone{display:flex;justify-content:center;padding:16px 0 10px}.hero-card{position:relative;width:116px;padding:14px;border-radius:16px;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(88,75,161,.25),transparent 44%),linear-gradient(180deg,rgba(22,27,39,.96),rgba(8,11,16,.98));border:1px solid rgba(105,91,166,.40);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -12px 24px rgba(0,0,0,.28),0 14px 28px rgba(0,0,0,.40),0 0 18px rgba(97,75,176,.12);animation:heroFloat 3.1s ease-in-out infinite}.hero-card:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent,rgba(255,255,255,.04),transparent);pointer-events:none}.hero-card span{position:relative;display:block;font-size:35px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}.hero-card strong,.hero-card small{position:relative;display:block}.hero-card strong{font-size:11px}.hero-card small{color:var(--muted);font-size:8px}@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.loot-feed{margin:6px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),rgba(7,10,15,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);backdrop-filter:blur(12px);font-size:10px;color:#bbc1d0}.combat-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(20,24,35,.82),rgba(8,10,15,.78));box-shadow:0 10px 28px rgba(0,0,0,.28);backdrop-filter:blur(16px)}.combat-footer>span{display:flex;flex-direction:column}.combat-footer strong{font-size:18px}.primary-button{position:relative;overflow:hidden;min-height:43px;padding:0 18px;border:1px solid rgba(132,105,255,.50);border-radius:12px;color:#fff;background:linear-gradient(135deg,#7b57ec,#4f3ab5 55%,#326bb9);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 7px 22px rgba(87,64,191,.34);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:transform var(--fast),filter var(--fast),box-shadow var(--fast)}.primary-button:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-130%);transition:transform .5s ease}.primary-button:hover{transform:translateY(-2px);filter:brightness(1.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px rgba(87,64,191,.44)}.primary-button:hover:before{transform:translateX(130%)}.primary-button:active{transform:scale(.96)}
.menu{padding:9px 2px 30px}.menu h1{margin:5px 0 17px;font-size:clamp(24px,7vw,31px);letter-spacing:.07em}.feature-card,.season-card,.stat-card,.hero-large{position:relative;overflow:hidden;padding:15px;margin-bottom:10px;border:1px solid var(--line);border-radius:17px;background:radial-gradient(circle at 82% 8%,rgba(105,79,203,.13),transparent 44%),linear-gradient(145deg,rgba(24,28,40,.78),rgba(9,11,16,.84));box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(18px);transition:transform var(--med),border-color var(--med),box-shadow var(--med)}.feature-card:hover,.season-card:hover,.stat-card:hover{transform:translateY(-3px);border-color:rgba(132,105,255,.26);box-shadow:0 16px 34px rgba(0,0,0,.36),0 0 18px rgba(107,81,209,.10)}.feature-card h2,.hero-large h2{margin:0 0 5px}.feature-card p,.hero-large p,.season-card p,.muted{margin:0;color:var(--soft);font-size:11px;line-height:1.48}.hero-large{text-align:center;padding:28px}.hero-large span{font-size:46px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}.season-card{border-color:rgba(117,91,223,.20);background:radial-gradient(circle at 80% 10%,rgba(111,78,221,.18),transparent 44%),linear-gradient(145deg,rgba(24,27,42,.80),rgba(10,11,17,.86))}.season-card strong,.stat-card strong{display:block;margin-top:4px;font-size:18px}.shop-button{width:100%;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,rgba(28,32,46,.84),rgba(12,14,20,.90));box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);font-weight:800;text-align:left;cursor:pointer;transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast)}.shop-button:hover{transform:translateY(-2px);border-color:rgba(124,92,255,.32);box-shadow:0 11px 28px rgba(0,0,0,.30),var(--glow-violet)}.shop-button:active{transform:scale(.98)}.shop-button.premium{border-color:rgba(215,184,95,.32);background:radial-gradient(circle at 90% 0%,rgba(239,193,76,.12),transparent 44%),linear-gradient(145deg,rgba(38,31,23,.86),rgba(18,16,19,.92))}.shop-button.premium:hover{border-color:rgba(242,196,92,.48);box-shadow:0 11px 28px rgba(0,0,0,.30),0 0 20px rgba(242,196,92,.12)}
.bottom-nav{position:sticky;bottom:0;z-index:100;min-height:76px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 5px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(11,13,19,.86),rgba(5,6,9,.96));border-top:1px solid var(--line);box-shadow:0 -14px 34px rgba(0,0,0,.38);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.nav-button{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px;border:0;border-radius:12px;color:#616b7b;background:transparent;cursor:pointer;transition:transform var(--med),color var(--med),background var(--med),box-shadow var(--med);will-change:transform}.nav-button:before{content:"";position:absolute;top:1px;width:26px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 12px rgba(100,111,255,.65);opacity:0;transform:scaleX(0);transition:opacity var(--med),transform var(--med)}.nav-button:hover{transform:translateY(-4px);color:#c7d0dd;background:linear-gradient(180deg,rgba(97,80,190,.08),rgba(41,94,132,.04))}.nav-button.active{transform:translateY(-4px);color:#ddd6ff;background:radial-gradient(circle at 50% 15%,rgba(110,83,225,.20),transparent 56%);box-shadow:0 8px 18px rgba(86,65,185,.12)}.nav-button.active:before{opacity:1;transform:scaleX(1)}.nav-button:active{transform:translateY(-1px) scale(.92)}.nav-button span{height:25px;display:flex;align-items:center;font-size:19px;line-height:1;transition:transform var(--med),filter var(--med)}.nav-button.active span{transform:scale(1.12) translateY(-1px);filter:drop-shadow(0 0 8px rgba(116,97,255,.50))}.nav-button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.floating-text,.floating-combat-text{position:absolute;z-index:60;pointer-events:none;color:#f8fafc;font-family:"Cinzel",Georgia,serif;font-size:14px;font-weight:900;letter-spacing:.04em;text-shadow:0 2px 4px rgba(0,0,0,.95),0 0 10px rgba(255,255,255,.15);will-change:transform,opacity}.floating-text.critical,.floating-combat-text.critical{color:#ffd869;font-size:18px;text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 16px rgba(255,202,80,.45)}.floating-text{animation:damage .8s ease-out forwards}@keyframes damage{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px) scale(1.12)}}.toast{position:absolute;left:50%;bottom:84px;z-index:140;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:10px 14px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(8,10,15,.90);box-shadow:0 10px 28px rgba(0,0,0,.42);backdrop-filter:blur(14px);color:#fff;font-size:10px;font-weight:850;transition:opacity var(--fast),transform var(--fast);white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.screen-panel{scrollbar-width:thin;scrollbar-color:rgba(107,89,185,.45) transparent}.screen-panel::-webkit-scrollbar{width:4px}.screen-panel::-webkit-scrollbar-track{background:transparent}.screen-panel::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(180deg,rgba(114,87,205,.55),rgba(66,132,180,.45))}
@media(max-width:360px){.top-bar{gap:5px;padding-left:6px;padding-right:6px;grid-template-columns:1fr 1fr 44px}.resource-pill{gap:5px;padding:7px 8px}.resource-icon{width:23px;height:23px;font-size:10px}.resource-pill small{font-size:7px}.resource-pill strong{font-size:11px}.vip-badge strong{font-size:16px}.enemy-orb{width:172px}.nav-button small{font-size:6px}}
@media(min-width:481px){body{padding:12px 0}.game-shell{height:calc(100dvh - 24px);min-height:calc(100vh - 24px);border:1px solid rgba(255,255,255,.07);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.015)}}
.enemy-orb,.hero-card,.nav-button,.resource-pill,.vip-badge,.primary-button,.shop-button,.feature-card,.health-fill,.xp-fill,.progress-fill{backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}