/* GameHub premium presentation layer */
:root{
  --premium-violet:#a66bff;
  --premium-blue:#58dfff;
  --premium-mint:#61f6b8;
  --premium-gold:#ffc96a;
  --premium-surface:rgba(15,17,30,.74);
  --mouse-x:70vw;
  --mouse-y:15vh;
}

body{
  background:
    radial-gradient(circle at 74% -8%,rgba(112,57,220,.2),transparent 31rem),
    radial-gradient(circle at 2% 46%,rgba(31,138,184,.11),transparent 34rem),
    #060710;
}

body:after{
  content:"";
  position:fixed;
  z-index:-1;
  left:var(--mouse-x);
  top:var(--mouse-y);
  width:36rem;
  height:36rem;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(152,91,255,.09),transparent 68%);
  transition:left .18s linear,top .18s linear;
}

.ambient-one{animation:ambientDrift 14s ease-in-out infinite alternate}
.ambient-two{animation:ambientDriftTwo 18s ease-in-out infinite alternate}

.header{
  position:sticky;
  top:14px;
  z-index:100;
  width:min(1260px,calc(100% - 48px));
  height:70px;
  margin:14px auto 0;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.095);
  border-radius:20px;
  background:linear-gradient(110deg,rgba(13,15,27,.9),rgba(15,12,31,.78));
  box-shadow:0 18px 60px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.055);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:border-color .3s,background .3s,box-shadow .3s,transform .45s cubic-bezier(.2,.8,.2,1);
}

.header.is-scrolled{
  border-color:rgba(166,107,255,.23);
  background:rgba(8,9,18,.9);
  box-shadow:0 15px 50px rgba(0,0,0,.5),0 0 35px rgba(127,70,238,.08);
}

.brand-mark{position:relative;isolation:isolate}
.brand-mark:after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-8px;
  border-radius:18px;
  background:conic-gradient(from 180deg,transparent,var(--premium-violet),var(--premium-blue),transparent 65%);
  opacity:.24;
  filter:blur(8px);
  animation:brandAura 7s linear infinite;
}

.header nav a{padding:26px 0}
.search{background:rgba(255,255,255,.035);transition:border-color .25s,background .25s,box-shadow .25s,width .35s}
.search:focus-within{width:245px;border-color:rgba(88,223,255,.36);background:rgba(255,255,255,.065);box-shadow:0 0 0 4px rgba(88,223,255,.055)}

.hero{
  position:relative;
  min-height:735px;
  isolation:isolate;
  padding-top:72px;
}

.hero:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-95px -15vw -20px;
  background:
    radial-gradient(ellipse at 71% 35%,rgba(130,70,255,.16),transparent 34%),
    radial-gradient(ellipse at 83% 44%,rgba(43,207,255,.08),transparent 28%);
  pointer-events:none;
}

.hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  right:-7vw;
  bottom:6%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,220,255,.34),transparent);
  box-shadow:0 0 25px rgba(101,217,255,.2);
}

.live-pill{
  border-color:rgba(97,246,184,.22);
  background:rgba(38,225,153,.065);
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 0 25px rgba(38,225,153,.045);
}

.live-pill i,.latency-pill i,.asset-status i{animation:livePulse 1.8s ease-in-out infinite}

.eyebrow{display:inline-flex;align-items:center;gap:9px}
.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--premium-violet),var(--premium-blue));box-shadow:0 0 11px var(--premium-violet)}

.hero h1{
  max-width:680px;
  margin-top:23px;
  font-size:clamp(65px,6.8vw,102px);
  line-height:.84;
  text-wrap:balance;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.32));
}

.hero h1 em{
  position:relative;
  background:linear-gradient(105deg,#d9c5ff 8%,#9f68ff 42%,#64e8ff 93%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:0;
  background-size:180% auto;
  animation:titleSheen 7s ease-in-out infinite;
}

.hero-copy>p{max-width:575px;font-size:14px;color:#a3a9ba}
.actions{align-items:center}
.actions a{position:relative;overflow:hidden;isolation:isolate}
.actions .primary{
  min-width:200px;
  background:linear-gradient(110deg,#8b48ff,#6e55ff 48%,#387fef);
  box-shadow:0 15px 38px rgba(116,66,238,.34),inset 0 1px rgba(255,255,255,.24);
}
.actions .primary:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  left:-35%;
  width:30%;
  height:240%;
  background:rgba(255,255,255,.38);
  filter:blur(8px);
  transform:rotate(22deg);
  animation:buttonSweep 4.8s ease-in-out infinite;
}
.actions .primary:hover{box-shadow:0 20px 50px rgba(116,66,238,.5),0 0 0 1px rgba(255,255,255,.2) inset}
.actions .secondary{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.025);backdrop-filter:blur(8px)}

.stats strong{color:#fff;text-shadow:0 0 22px rgba(143,85,255,.22)}
.stats div{position:relative}
.stats div:after{content:"";position:absolute;left:0;right:25%;bottom:-12px;height:1px;background:linear-gradient(90deg,rgba(160,97,255,.38),transparent)}

.hero-art{
  min-height:600px;
  perspective:1200px;
  transform-style:preserve-3d;
  transition:transform .22s ease-out;
}

.hero-index{
  position:absolute;
  z-index:5;
  top:16px;
  right:12%;
  color:rgba(214,219,235,.5);
  font-size:8px;
  font-weight:800;
  letter-spacing:.2em;
}

.hero-orbit{
  inset:0 -2% 1% 7%;
  border-color:rgba(163,97,255,.2);
  box-shadow:inset 0 0 80px rgba(127,65,230,.035);
  animation:orbitTurn 28s linear infinite;
}
.hero-orbit:before{animation:orbitTurn 18s linear infinite reverse}
.hero-orbit:after{box-shadow:0 0 60px rgba(86,230,255,.045)}

.hero-card{backface-visibility:hidden;will-change:transform}
.hero-card-main{
  top:47px;
  left:9%;
  width:72%;
  aspect-ratio:1.04;
  border-radius:42px;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 42px 100px rgba(0,0,0,.58),0 0 0 1px rgba(155,94,255,.06),0 0 80px rgba(104,54,214,.13);
  transform:translateZ(40px) rotate(-3.5deg);
  animation:heroFloat 6.5s ease-in-out infinite;
}
.hero-card-main:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.13),transparent 22%,transparent 70%,rgba(111,75,255,.1));
  pointer-events:none;
}
.hero-card-main:after{background:linear-gradient(transparent 34%,rgba(7,8,16,.98))}
.hero-card-main>img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(1.06) contrast(1.04)}
.hero-card-main:hover>img{transform:scale(1.055);filter:saturate(1.18) contrast(1.05)}
.hero-card-main>div{bottom:31px}
.hero-card-main strong{font-size:35px}
.hero-card-main small{font-size:9px;letter-spacing:.02em}

.hero-card-side{
  right:-1%;
  bottom:54px;
  width:43%;
  height:164px;
  z-index:4;
  border-color:rgba(99,225,255,.17);
  box-shadow:0 25px 65px rgba(0,0,0,.5),0 0 35px rgba(66,196,255,.08);
  animation:sideFloat 7.4s ease-in-out infinite;
}

.hero-scan{
  position:absolute;
  z-index:3;
  top:73px;
  left:11%;
  width:67%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(101,239,255,.8),transparent);
  box-shadow:0 0 18px rgba(101,239,255,.55);
  pointer-events:none;
  opacity:.6;
  animation:scanLine 5.5s ease-in-out infinite;
}

.hero-rating{
  position:absolute;
  z-index:6;
  left:1%;
  bottom:64px;
  width:78px;
  height:78px;
  display:grid;
  place-content:center;
  gap:3px;
  border:1px solid rgba(255,201,106,.24);
  border-radius:22px;
  background:rgba(18,16,27,.78);
  box-shadow:0 17px 45px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  transform:rotate(-5deg);
}
.hero-rating b{color:var(--premium-gold);font-size:20px}
.hero-rating small{color:#888e9d;font-size:5px;font-weight:900;letter-spacing:.12em}

.latency-pill{z-index:8;backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.marquee{
  position:relative;
  overflow:hidden;
  border-block:1px solid rgba(255,255,255,.04);
  background:linear-gradient(90deg,rgba(124,68,241,.03),rgba(65,212,255,.035),rgba(124,68,241,.03));
  text-shadow:0 0 28px rgba(158,92,255,.18);
}

.games{position:relative}
.games:before{content:"";position:absolute;left:50%;top:70px;width:60vw;height:22rem;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(113,65,216,.075),transparent 68%);pointer-events:none}
.section-head h2,.app h2{text-wrap:balance}
.filters{padding:5px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.02)}
.filters button{border:0}
.filters button.active{background:linear-gradient(120deg,rgba(154,91,255,.24),rgba(67,139,243,.16));box-shadow:inset 0 0 0 1px rgba(161,105,255,.22),0 8px 25px rgba(0,0,0,.2)}

.card{
  --rx:0deg;
  --ry:0deg;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.75,.25,1),opacity .55s,filter .4s;
}
.card .cover{
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 55px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.05);
  transition:border-color .35s,box-shadow .35s,transform .45s cubic-bezier(.2,.8,.2,1);
}
.card .cover:before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(255,255,255,.18),transparent 31%);
  opacity:0;
  transition:opacity .3s;
}
.card:hover{z-index:4;filter:saturate(1.08)}
.card:hover .cover{border-color:rgba(159,101,255,.3);box-shadow:0 32px 70px rgba(0,0,0,.48),0 0 45px rgba(119,62,227,.09)}
.card:hover .cover:before{opacity:.5}
.card .cover img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}
.card:hover .cover img{transform:scale(1.065);filter:saturate(1.1) contrast(1.03)}
.card .play{box-shadow:0 13px 35px rgba(120,65,239,.4)}
.card-info>a{transition:transform .3s,background .3s,border-color .3s}
.card:hover .card-info>a{transform:rotate(45deg);background:rgba(151,87,255,.16);border-color:rgba(151,87,255,.3)}

.app{
  border-color:rgba(166,107,255,.16);
  background:
    radial-gradient(circle at 18% 50%,rgba(103,74,230,.15),transparent 32%),
    linear-gradient(120deg,rgba(17,20,36,.98),rgba(17,12,34,.96));
  box-shadow:0 40px 100px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05);
}
.app-glow{animation:appGlow 5s ease-in-out infinite alternate}
.app-visual img{animation:appIconFloat 5.8s ease-in-out infinite;filter:drop-shadow(0 28px 35px rgba(0,0,0,.45))}

/* ===== Support section ===== */
main .support{
  position:relative;
  width:min(1240px,calc(100% - 48px));
  margin:90px auto 100px;
  padding:0;
  isolation:isolate;
}
main .support:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:40px;
  width:70%;
  height:20rem;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(113,65,216,.09),transparent 68%);
  pointer-events:none;
}
main .support .section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:38px;
}
main .support .section-head>div>span{
  display:block;
  margin-bottom:12px;
  color:var(--premium-blue);
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
}
main .support .section-head h2{
  margin:0;
  font-size:clamp(40px,5vw,68px);
  line-height:.95;
  letter-spacing:-.04em;
}
main .support .section-head p{
  max-width:380px;
  margin:0;
  color:#a3a9ba;
  font-size:14px;
  line-height:1.8;
}

main .support-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

main .support-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-height:210px;
  padding:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  box-shadow:0 20px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .3s cubic-bezier(.2,.75,.25,1),border-color .3s,background .3s,box-shadow .3s;
}
main .support-card:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(166,107,255,.55),rgba(88,223,255,.45),transparent);
  opacity:0;
  transition:opacity .3s;
}
main .support-card:hover{
  transform:translateY(-5px);
  border-color:rgba(166,107,255,.35);
  background:linear-gradient(145deg,rgba(166,107,255,.09),rgba(88,223,255,.03));
  box-shadow:0 30px 70px rgba(0,0,0,.42),0 0 45px rgba(119,62,227,.09);
}
main .support-card:hover:before{opacity:1}

main .support-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:14px;
  border:1px solid rgba(166,107,255,.25);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(166,107,255,.22),rgba(88,223,255,.1));
  color:#d3fa74;
  font-size:20px;
  line-height:1;
}

main .support-card h3{
  margin:0 0 8px;
  color:#f4f5fa;
  font-size:18px;
  font-weight:750;
  letter-spacing:-.02em;
}

main .support-card a,
main .support-card address{
  max-width:100%;
  color:#b4bcd2;
  font-size:14px;
  font-style:normal;
  line-height:1.7;
  text-decoration:none;
  overflow-wrap:anywhere;
}
main .support-card a{transition:color .2s,transform .2s}
main .support-card a:hover{color:#d3fa74;transform:translateX(3px)}
main .support-card a:focus-visible{outline:2px solid #d3fa74;outline-offset:4px;border-radius:4px}

.game-shell{border-color:rgba(166,107,255,.15);box-shadow:0 35px 100px rgba(0,0,0,.58),0 0 65px rgba(106,57,220,.06)}
.game-top{background:linear-gradient(100deg,rgba(159,93,255,.055),rgba(255,255,255,.018) 44%,rgba(77,216,255,.025))}
.control-panel,.game-meta aside{backdrop-filter:blur(14px);transition:border-color .3s,background .3s,transform .3s}
.control-panel:hover,.game-meta aside:hover{border-color:rgba(156,95,255,.18);background:rgba(255,255,255,.035);transform:translateY(-2px)}

body.motion-ready [data-reveal]{opacity:0;transform:translateY(30px);filter:blur(5px)}
body.motion-ready [data-reveal="left"]{transform:translateX(-35px)}
body.motion-ready [data-reveal="right"]{transform:translateX(35px)}
body.motion-ready [data-reveal].is-visible{opacity:1;transform:translate(0,0);filter:blur(0);transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .85s cubic-bezier(.2,.75,.2,1),filter .7s}
.grid .card:nth-child(2){transition-delay:.05s}.grid .card:nth-child(3){transition-delay:.1s}.grid .card:nth-child(4){transition-delay:.15s}

@keyframes ambientDrift{to{transform:translate(-70px,80px) scale(1.08)}}
@keyframes ambientDriftTwo{to{transform:translate(110px,-65px) scale(.92)}}
@keyframes brandAura{to{transform:rotate(360deg)}}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(92,242,177,.25)}50%{opacity:.6;transform:scale(.8);box-shadow:0 0 0 6px rgba(92,242,177,0)}}
@keyframes titleSheen{0%,100%{background-position:0% center}50%{background-position:100% center}}
@keyframes buttonSweep{0%,55%{left:-45%}80%,100%{left:135%}}
@keyframes orbitTurn{to{transform:rotate(352deg)}}
@keyframes heroFloat{0%,100%{transform:translateZ(40px) rotate(-3.5deg) translateY(0)}50%{transform:translateZ(50px) rotate(-2.5deg) translateY(-11px)}}
@keyframes sideFloat{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2deg) translateY(-9px)}}
@keyframes scanLine{0%,100%{transform:translateY(20px);opacity:0}15%,80%{opacity:.55}50%{transform:translateY(400px);opacity:.75}}
@keyframes appGlow{to{opacity:.75;transform:scale(1.14)}}
@keyframes appIconFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

@media(max-width:1000px){
  .header{grid-template-columns:auto 1fr}
  .hero{padding-top:65px}
  .hero h1{font-size:clamp(58px,7vw,74px)}
  .hero-rating{left:-1%}
  main .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main .support-card:last-child{grid-column:1 / -1;min-height:0}
}

@media(max-width:760px){
  body:after{display:none}
  .header{top:8px;width:calc(100% - 20px);height:64px;margin-top:8px;padding:0 11px;border-radius:18px}
  .hero{width:calc(100% - 28px);padding-top:80px;min-height:auto}
  .hero-copy{text-align:left}
  .hero h1{font-size:clamp(52px,15vw,74px)}
  .hero-art{min-height:535px;margin-top:10px}
  .hero-card-main{left:5%;width:80%}
  .hero-card-side{right:0;width:47%}
  .hero-rating{left:0;bottom:52px}
  .hero-index{right:3%}
  .games:before{width:100vw}
  .card{transform:none!important}

  main .support{width:calc(100% - 28px);margin:70px auto 80px}
  main .support .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  main .support-grid{grid-template-columns:1fr;gap:14px}
  main .support-card{min-height:0;padding:24px}
  main .support-card:last-child{grid-column:auto}
}

@media(max-width:430px){
  .hero{padding-top:60px}
  .hero-art{min-height:450px}
  .hero-card-main{top:35px;left:2%;width:86%;border-radius:30px}
  .hero-card-main strong{font-size:26px}
  .hero-card-side{height:118px;bottom:22px}
  .hero-rating{width:65px;height:65px;bottom:28px}
  .hero-scan{left:6%;width:77%}
  .actions .primary{min-width:0}
}

@media(prefers-reduced-motion:reduce){
  body.motion-ready [data-reveal]{opacity:1;transform:none;filter:none}
  body:after{display:none}
  main .support-card,
  main .support-card a{transition:none}
}