*{box-sizing:border-box}html{background:#050711}body{margin:0;overflow-x:hidden;background:#050711;color:#f6d69a;font-family:Georgia,serif}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #fff4b0;outline-offset:3px}a{color:inherit;text-decoration:none}.desktop-scene{position:relative;width:100%;max-width:2000px;margin:auto;line-height:0;isolation:isolate}.desktop-art{display:block;width:100%;height:auto;user-select:none}.spot,.desktop-play,.desktop-downloads button{position:absolute;border:0;padding:0;background:transparent;cursor:pointer}.spot:hover,.desktop-downloads button:hover{background:radial-gradient(ellipse,#ffc65d2e,transparent 70%);filter:drop-shadow(0 0 11px #ffca7a)}.home{left:5.6%;top:6.7%;width:10%;height:6%}.news{left:16%;top:6.7%;width:7%;height:6%}.events{left:24%;top:6.7%;width:9%;height:6%}.ranking{left:65%;top:6.7%;width:10%;height:6%}.guide{left:77%;top:6.7%;width:7%;height:6%}.support{left:85%;top:6.7%;width:10%;height:6%}.play-effect{position:absolute;left:29%;top:57.5%;width:42%;height:24%;pointer-events:none}.electric{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}.desktop-play{inset:12% 6% 15%;width:88%;height:73%;border-radius:48%;pointer-events:auto;transition:filter .25s,transform .25s}.desktop-play:hover{filter:drop-shadow(0 0 16px #ffb46c);transform:scale(1.025)}.desktop-downloads{position:absolute;left:12.5%;top:81.5%;width:74%;height:12%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1%}.desktop-downloads button{position:relative;width:100%;height:100%;border-radius:14px}.mobile-scene{display:none}.toast{position:fixed;z-index:20;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,16px);opacity:0;pointer-events:none;max-width:min(430px,calc(100vw - 28px));padding:13px 18px;background:#101321;border:1px solid #b88b4c;border-radius:8px;box-shadow:0 12px 30px #000a;color:#fff;font:14px/1.4 Arial,sans-serif;text-align:center;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.desktop-scene{display:none}.mobile-scene{display:block;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#26345e 0,#0b1023 42%,#070811 80%)}.mobile-header{position:relative;z-index:2;padding:16px 20px 0;text-align:center}.mobile-header img{display:block;width:min(75vw,340px);max-height:126px;object-fit:contain;margin:auto;filter:drop-shadow(0 6px 16px #000b)}.mobile-heroes{height:clamp(220px,60vw,440px);margin-top:-8px;background-image:linear-gradient(to bottom,transparent 68%,#090c19 99%),url('assets/mobile-heroes.webp');background-repeat:no-repeat;background-size:100% 100%,auto 110%;background-position:center,center bottom;filter:saturate(1.1)}.mobile-cta{position:relative;z-index:2;margin-top:-35px;padding:0 14px max(30px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,#090c19 45px,#090b14)}.mobile-play-effect{position:relative;width:min(100%,480px);height:auto;aspect-ratio:685/245;margin:0 auto 2px;pointer-events:none}.mobile-play{position:absolute;inset:4% 1%;width:98%;height:92%;border:0;padding:0;background:transparent;pointer-events:auto;filter:drop-shadow(0 0 13px #ff5a42a6);transition:transform .2s,filter .2s}.mobile-play:active{transform:scale(.97);filter:drop-shadow(0 0 23px #ff9b5c)}.mobile-play img{width:100%;height:100%;object-fit:contain;display:block}.mobile-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:520px;margin:0 auto}.mobile-downloads button{min-width:0;border:0;background:none;padding:0;transition:transform .2s,filter .2s}.mobile-downloads button:active{transform:scale(.96)}.mobile-downloads button img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 8px #000)}.mobile-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-width:520px;margin:24px auto 0}.mobile-nav button,.mobile-nav a{display:flex;align-items:center;justify-content:center;min-height:43px;min-width:0;padding:8px 4px;border:1px solid #8c6238;border-radius:6px;background:linear-gradient(#241a27,#0e111d);box-shadow:inset 0 1px #e8b85b40;color:#f9d69a;font:clamp(10px,2.8vw,13px) Georgia,serif;letter-spacing:.3px}}@media(max-width:380px){.mobile-header{padding-top:8px}.mobile-heroes{height:clamp(200px,60vw,228px)}.mobile-cta{margin-top:-23px;padding-left:10px;padding-right:10px}.mobile-downloads{gap:5px}.mobile-nav{gap:6px}}@media(min-width:761px) and (max-width:1100px){.desktop-scene{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep the mobile artwork separate from the desktop composite. */
@media(max-width:760px){.mobile-header{padding:12px 16px 8px}.mobile-header img{width:min(66vw,300px);max-height:100px}.mobile-heroes{margin-top:0}.mobile-cta{margin-top:-24px}.mobile-play-effect{max-width:390px;aspect-ratio:685/225;margin-bottom:10px}.mobile-downloads button{display:flex;align-items:center;justify-content:center;min-height:44px}.mobile-downloads button img{aspect-ratio:2.5;object-fit:contain}.mobile-nav button,.mobile-nav a{min-height:44px}}

@media(max-width:760px){.mobile-heroes{background-image:url("assets/mobile-heroes.webp");background-size:auto 110%;background-position:center bottom}.mobile-cta{background:linear-gradient(180deg,transparent,#090c19 30px,#090b14)}}
/* V5: luminous controls and a continuous mobile atmosphere. */
.play-effect,.mobile-play-effect{isolation:isolate;overflow:visible}
.electric{z-index:3;inset:-20%;width:140%;height:140%;mix-blend-mode:screen;opacity:1}
.mobile-play{z-index:1}
.mobile-play img{mask-image:radial-gradient(ellipse 71% 78% at center,#000 48%,transparent 77%);-webkit-mask-image:radial-gradient(ellipse 71% 78% at center,#000 48%,transparent 77%)}
.mobile-play{animation:core-glow 3s ease-in-out infinite}
@keyframes core-glow{0%,100%{filter:drop-shadow(0 0 9px #ff4724) drop-shadow(0 0 20px #b8194370)}50%{filter:drop-shadow(0 0 16px #ffb344) drop-shadow(0 0 30px #ef305b90)}}
.desktop-downloads button,.mobile-downloads button{--shine:#ffd48d;position:relative;isolation:isolate;overflow:visible;border-radius:12px;transition:filter .2s,transform .2s}
[data-action="androidApk"]{--shine:#a6ff31!important}[data-action="windowsPc"]{--shine:#37cfff!important}[data-action="webGame"]{--shine:#ce8aff!important}
.mobile-downloads button::after,.desktop-downloads button::after{content:"";position:absolute;inset:8% 3%;border-radius:12px;pointer-events:none;opacity:0;box-shadow:0 0 12px var(--shine),0 0 30px var(--shine),inset 0 0 15px var(--shine);background:linear-gradient(115deg,transparent 20%,#ffffffb0 48%,transparent 75%);background-size:250% 100%;background-position:100% 0;z-index:4}
.mobile-downloads button.energized::after,.desktop-downloads button.energized::after{animation:energy-burst .85s ease-out}
.mobile-downloads button.energized,.desktop-downloads button.energized{filter:brightness(1.35) drop-shadow(0 0 12px var(--shine));transform:scale(.97)}
@keyframes energy-burst{0%{opacity:0;background-position:100% 0;transform:scale(.96)}20%{opacity:.95}100%{opacity:0;background-position:0% 0;transform:scale(1.09)}}
@media(hover:hover){.mobile-downloads button:hover,.desktop-downloads button:hover{filter:brightness(1.2) drop-shadow(0 0 10px var(--shine));transform:translateY(-2px)}}
@media(max-width:760px){
.mobile-scene{position:relative;isolation:isolate;background:#121a33 url('assets/mobile-heroes.webp') center top/auto 100svh no-repeat;overflow:hidden}
.mobile-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#11162d85,transparent 38%,#14152be0 72%,#0b1025);pointer-events:none}
.mobile-header{padding:14px 16px 0;background:transparent}
.mobile-header img{width:min(72vw,310px);max-height:108px;mix-blend-mode:screen;filter:drop-shadow(0 2px 12px #ffad3440)}
.mobile-heroes{height:clamp(230px,69vw,450px);margin-top:-8px;background-image:url('assets/mobile-heroes.webp');background-size:auto 110%;background-position:center bottom;mask-image:linear-gradient(transparent,#000 10%,#000 74%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 74%,transparent)}
.mobile-cta{margin-top:-52px;padding-top:0;background:transparent}
.mobile-play-effect{width:100%;max-width:430px;margin-bottom:10px;aspect-ratio:685/245}
.mobile-downloads{gap:10px}.mobile-nav{margin-top:20px}.mobile-nav a,.mobile-nav button{background:linear-gradient(150deg,#333051b8,#121a32cc);backdrop-filter:blur(8px)}
}
@media(prefers-reduced-motion:reduce){.mobile-play{animation:none}.electric{display:none}.energized::after{animation:none!important}}
@media(max-width:760px){.mobile-header{mix-blend-mode:screen}.mobile-header img{mix-blend-mode:normal}.mobile-scene{background-position:center -65px;background-size:auto calc(100svh + 65px)}}
@media(max-width:760px){.mobile-scene{background:radial-gradient(ellipse at 15% 20%,#293f70,transparent 55%),radial-gradient(ellipse at 90% 48%,#552841,transparent 60%),linear-gradient(#192039,#171b34 65%,#10182c)}.mobile-scene::before{inset:-40px;background:linear-gradient(#17214060,#171b3499),url('assets/mobile-heroes.webp') center/auto 100% no-repeat;filter:blur(34px);opacity:.4}.mobile-header img{mask-image:radial-gradient(ellipse 66% 76% at center,#000 48%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 66% 76% at center,#000 48%,transparent 75%)}}
/* PC controls use the same image surfaces and glow as mobile. */
@media(min-width:761px){
.desktop-play{inset:0;width:100%;height:100%;border-radius:0;animation:core-glow 3s ease-in-out infinite}
.desktop-play img{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 71% 78% at center,#000 48%,transparent 77%);-webkit-mask-image:radial-gradient(ellipse 71% 78% at center,#000 48%,transparent 77%)}
.desktop-play:hover{transform:scale(1.025)}
.desktop-play:active,.desktop-play.energized{transform:scale(.97)}
.desktop-downloads{top:83.5%;height:12%;left:12.5%;width:75%}
.desktop-downloads button{display:flex;align-items:center;justify-content:center}
.desktop-downloads button img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.desktop-downloads button::after{inset:8% 3%}
}
@media(prefers-reduced-motion:reduce){.desktop-play{animation:none}}
/* V7: true alpha assets, with light following the physical silhouette. */
.desktop-logo{display:none}
.desktop-play img,.mobile-play img{mask-image:none!important;-webkit-mask-image:none!important;object-fit:contain!important}
.desktop-downloads button img,.mobile-downloads button img{object-fit:contain!important}
.desktop-downloads button::after,.mobile-downloads button::after{inset:0;border-radius:0;box-shadow:none;mask-image:var(--cutout);-webkit-mask-image:var(--cutout);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
[data-action="appStore"]{--cutout:url('assets/app-store-cutout.png')}
[data-action="androidApk"]{--cutout:url('assets/android-apk-cutout.png')}
[data-action="windowsPc"]{--cutout:url('assets/windows-pc-cutout.png')}
[data-action="webGame"]{--cutout:url('assets/play-web-cutout.png')}
.mobile-play,.desktop-play{--shine:#ffb354!important}
.mobile-downloads button.energized,.desktop-downloads button.energized{filter:none!important}
.energized img{animation:silhouette-flare .85s ease-out!important}
@keyframes silhouette-flare{0%{filter:brightness(1) drop-shadow(0 0 2px var(--shine,#ffd271))}18%{filter:brightness(1.65) drop-shadow(0 0 9px var(--shine,#ffd271)) drop-shadow(0 0 23px var(--shine,#ffd271))}100%{filter:brightness(1) drop-shadow(0 0 2px transparent)}}
@media(min-width:761px){
.desktop-scene{aspect-ratio:1672/1000;line-height:normal;background:radial-gradient(ellipse at 50% 70%,#64283b55,transparent 65%),linear-gradient(#131c35,#11162a)}
.desktop-art{position:absolute;top:10%;left:0;width:100%;height:70%;object-fit:cover;object-position:center bottom;mask-image:linear-gradient(transparent,#000 12%,#000 70%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 70%,transparent)}
.desktop-logo{display:block;position:absolute;z-index:2;top:1%;left:35%;width:30%;height:18%;object-fit:contain;mix-blend-mode:screen}
.hotspots{position:absolute;inset:0;pointer-events:none}
.hotspots .spot{pointer-events:auto;display:flex;align-items:center;justify-content:center;top:6%;height:6%;color:#ffe0a1;font-size:clamp(10px,1.15vw,21px);background:linear-gradient(transparent,#202239aa,transparent);border-block:1px solid #ba8d4a90;text-shadow:0 2px 5px #000}
.play-effect{left:29%;top:58%;width:42%;height:24%}
.desktop-downloads{left:13%;top:83%;width:74%;height:13%;gap:2%}
}
@media(prefers-reduced-motion:reduce){.energized img{animation:none!important;filter:brightness(1.25)}}
/* V8: PC mirror sweep, luminous lettering, and a brighter metal frame. */
@media(min-width:761px) and (hover:hover){
.desktop-play{--cutout:url('assets/play-game-cutout.png');transition:transform .28s ease,filter .28s ease}
.desktop-play img,.desktop-downloads button img{transition:filter .28s ease,transform .28s ease;will-change:filter}
.desktop-play::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url('assets/play-game-cutout.png') center/contain no-repeat;clip-path:inset(40% 23% 32% 23%);opacity:0;filter:brightness(2.4) saturate(.5) drop-shadow(0 0 5px #fff9b5) drop-shadow(0 0 10px #ffcb39);transition:opacity .25s ease;mix-blend-mode:screen}
.desktop-play:hover{animation:none;filter:drop-shadow(0 0 8px #ffd670) drop-shadow(0 0 20px #ff8b24) drop-shadow(0 0 35px #ff395f90);transform:scale(1.035)}
.desktop-play:hover img{filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 7px #ffe8a2)}
.desktop-play:hover::before{opacity:1}
.desktop-play::after,.desktop-downloads button::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;border:0;border-radius:0;box-shadow:none;transform:none;background:linear-gradient(112deg,transparent 34%,#fff4d73b 42%,#ffffffd9 49%,#fffbe872 53%,transparent 63%);background-size:320% 100%;background-position:100% 0;mask-image:var(--cutout);-webkit-mask-image:var(--cutout);mask-size:contain;-webkit-mask-size:contain;mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mix-blend-mode:screen}
.desktop-play:hover::after,.desktop-downloads button:hover::after{opacity:1;animation:mirror-sweep 1.65s ease-in-out infinite}
.desktop-downloads button:hover{filter:none;transform:translateY(-3px) scale(1.025)}
.desktop-downloads button:hover img{filter:brightness(1.22) saturate(1.15) drop-shadow(0 0 7px var(--shine)) drop-shadow(0 0 15px var(--shine))}
.desktop-play:active{transform:scale(.98)}
.desktop-downloads button:active{transform:scale(.97)}
@keyframes mirror-sweep{0%{background-position:100% 0;opacity:0}12%{opacity:1}70%{background-position:0% 0;opacity:1}85%,100%{background-position:0% 0;opacity:0}}
}
@media(prefers-reduced-motion:reduce){.desktop-play:hover::after,.desktop-downloads button:hover::after{animation:none!important;background-position:50% 0;opacity:.35}.desktop-play img,.desktop-downloads button img{will-change:auto}}
/* Flames are drawn around the transparent button silhouette. */
.fire-border{position:absolute;inset:-25%;width:150%;height:150%;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .25s ease}
@media(min-width:761px) and (hover:hover){
.play-effect:has(.desktop-play:hover) .fire-border{opacity:1}
.desktop-play:hover{filter:drop-shadow(0 0 6px #fff0a8) drop-shadow(0 0 17px #ff8a13) drop-shadow(0 0 34px #ff3300b0)}
}
@media(prefers-reduced-motion:reduce){.fire-border{display:none}}
/* Atmospheric embers float above the scene, without intercepting controls. */
.ambient-embers{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;mix-blend-mode:screen}
@media(min-width:761px) and (hover:hover){.desktop-play:hover{filter:drop-shadow(0 0 5px #ffe68d) drop-shadow(0 0 19px #ff7800) drop-shadow(0 0 36px #e32400c0)}}
@media(prefers-reduced-motion:reduce){.ambient-embers{display:none}}
/* V12: a clean red halo follows the transparent metal frame. */
@media(min-width:761px) and (hover:hover){
.desktop-play:hover{animation:none;filter:drop-shadow(0 0 3px #ffb2a3) drop-shadow(0 0 9px #ff2410) drop-shadow(0 0 21px #f50000) drop-shadow(0 0 36px #d9000080);transform:scale(1.035)}
.desktop-play:hover img{filter:brightness(1.16) saturate(1.2) drop-shadow(0 0 4px #ff3b25)}
.play-effect:has(.desktop-play:hover) .electric{opacity:.18;transition:opacity .25s}
.desktop-play:active{transform:scale(.98)}
}