:root{
  --purple-main:#2B0359;
  --purple-dark:#22015A;
  --purple-light:#2D0558;
  --purple-panel:#37086A;
  --purple-panel-2:#3F0E76;
  --gold:#FCC92B;
  --gold-2:#F9C72B;
  --white:#FFFFFF;
  --ink:#F4EEFF;
  --ink-soft:#C3B2E6;
  --ink-faint:#8873B8;
  --line:rgba(252,201,43,0.16);
  --line-soft:rgba(244,238,255,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--purple-main); color:var(--ink);
  font-family:'Inter',sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Chakra Petch',sans-serif; font-weight:700; color:var(--white); letter-spacing:0.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}

.glow{position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0;}

/* ---------------- NAV ---------------- */
header.nav{position:sticky; top:0; z-index:60; background:rgba(43,3,89,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1200px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:1.28rem; color:var(--white);}
.logo img{height:36px; width:auto; max-width:168px; object-fit:contain; filter:brightness(0) invert(1);}
.nav-links{display:flex; gap:30px; font-size:0.92rem; font-weight:600; color:var(--ink-soft);}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--gold);}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-family:'Chakra Petch',sans-serif;
  font-size:0.94rem; padding:13px 28px; border-radius:100px; transition:all .25s ease; cursor:pointer; border:2px solid transparent;
}
.btn-primary{background:var(--gold); color:var(--purple-dark);}
.btn-primary:hover{background:var(--white); transform:translateY(-2px); box-shadow:0 10px 30px -6px rgba(252,201,43,0.55);}
.btn-ghost{background:transparent; color:var(--white); border-color:rgba(244,238,255,0.35);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-small{padding:9px 20px; font-size:0.82rem;}

/* ---------------- HERO ---------------- */
.hero{position:relative; padding:100px 0 70px; overflow:hidden; border-bottom:1px solid var(--line-soft);}
.hero .wrap{position:relative; z-index:1;}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:0.14em; color:var(--gold); text-transform:uppercase; margin-bottom:20px;}
.eyebrow::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold);}
.hero-main{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.8rem); line-height:1.08; margin-bottom:22px;}
.hero h1 span{color:var(--gold);}
.hero p.lead{font-size:1.06rem; color:var(--ink-soft); max-width:460px; margin-bottom:32px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}

.chest-wrap{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; z-index:2; overflow:visible;}
.chest-link{position:relative; width:78%; display:block; text-decoration:none; color:inherit;}
.chest{width:100%; overflow:visible; animation:float 5s ease-in-out infinite; transform-origin:center bottom;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
.spark{animation:sparkle 2.4s ease-in-out infinite;}
@keyframes sparkle{0%,100%{opacity:0.3; transform:scale(0.8);} 50%{opacity:1; transform:scale(1.15);}}
.chest-lid{transform-origin:50% 100%; transform-box:fill-box; transition:transform .85s cubic-bezier(.22,1.2,.36,1);}
.chest-inner{opacity:0; transition:opacity .4s ease .25s;}
.chest-bonus{
  position:absolute; left:50%; top:38%; z-index:2;
  transform:translate(-50%, 28px) scale(.55);
  opacity:0; pointer-events:none;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:188px; padding:14px 16px; border-radius:18px;
  background:var(--gold); color:var(--purple-dark);
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:0.98rem;
  line-height:1.15; text-align:center; letter-spacing:0.01em;
  box-shadow:0 14px 36px -8px rgba(252,201,43,0.7);
  transition:transform .7s cubic-bezier(.22,1.4,.36,1) .35s, opacity .45s ease .35s;
}
.chest-bonus small{display:block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;}
.chest-wrap.is-shake .chest{animation:chestShake .22s ease-in-out 2;}
@keyframes chestShake{
  0%,100%{transform:rotate(0);}
  25%{transform:rotate(-5deg);}
  75%{transform:rotate(5deg);}
}
.chest-wrap.is-open .chest{animation:none;}
.chest-wrap.is-open .chest-lid{transform:rotate(-118deg);}
.chest-wrap.is-open .chest-inner{opacity:1;}
.chest-wrap.is-open .chest-bonus{
  opacity:1; pointer-events:auto;
  transform:translate(-50%, -78px) scale(1);
}
.chest-wrap.is-open .spark{animation:sparkle 1.1s ease-in-out infinite;}

/* ---------------- TICKER ---------------- */
.ticker-bar{background:var(--purple-dark); border-bottom:1px solid var(--line-soft); overflow:hidden; padding:14px 0;}
.ticker-track{display:flex; gap:48px; white-space:nowrap; animation:ticker 28s linear infinite; width:max-content;}
.ticker-track span{font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:10px;}
.ticker-track span b{color:var(--gold); font-weight:600;}
.ticker-track span::before{content:'✦'; color:var(--gold); font-size:0.7rem;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------------- SECTION HEAD ---------------- */
.section-head{max-width:600px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem); margin:14px 0;}
.section-head p{color:var(--ink-soft); font-size:1rem;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------------- BONUSES ---------------- */
.bonuses{padding:100px 0; position:relative;}
.bonus-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.bonus-card{
  background:linear-gradient(160deg, var(--purple-panel), var(--purple-light));
  border:1px solid var(--line); border-radius:22px; padding:32px 26px;
  transition:transform .3s ease, border-color .3s ease;
}
.bonus-card:hover{transform:translateY(-6px); border-color:var(--gold);}
.bonus-icon{width:46px; height:46px; margin-bottom:20px;}
.bonus-card h3{font-size:1.12rem; margin-bottom:10px; color:var(--white);}
.bonus-card h4{font-size:0.82rem; color:var(--gold); margin:0 0 8px;}
.bonus-card p{font-size:0.9rem; color:var(--ink-soft);}
.how-num{
  width:46px; height:46px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--gold); border-radius:50%;
  color:var(--gold); font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:1.15rem;
}
.section-head.follow{margin-top:72px;}
.promo-full{margin:52px 0 0; line-height:0;}
.promo-full a{display:block;}
.promo-full img{display:block; width:100%; height:auto;}

/* ---------------- LOYALTY / RANKS ---------------- */
.ranks{padding:100px 0; background:var(--purple-dark); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.rank-list{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.rank-item{text-align:center;}
.ring{width:104px; height:104px; margin:0 auto 18px; position:relative;}
.ring svg{transform:rotate(-90deg);}
.ring .pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--gold); font-weight:600;}
.rank-item h3{font-size:1.05rem; margin-bottom:8px; color:var(--white);}
.rank-item h4{font-size:0.82rem; color:var(--gold); margin:0 0 8px;}
.rank-item p{font-size:0.85rem; color:var(--ink-soft); max-width:210px; margin:0 auto;}

/* ---------------- TOURNAMENTS ---------------- */
.tournaments{padding:100px 0;}
.t-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.t-card{
  background:linear-gradient(160deg, var(--purple-panel-2), var(--purple-panel));
  border:1px solid var(--line); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:16px;
}
.t-date{display:inline-flex; align-self:flex-start; background:rgba(252,201,43,0.14); color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:0.75rem; padding:6px 14px; border-radius:100px;}
.t-card h3{font-size:1.2rem; color:var(--white);}
.t-card h4,.t-card .t-game{font-size:0.88rem; color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:500; letter-spacing:0;}
.t-prizeline{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);}
.t-prizeline .prize{font-family:'JetBrains Mono',monospace; font-size:0.85rem; color:var(--gold);}
.t-prizeline .btn{flex-shrink:0;}

/* ---------------- STATS ---------------- */
.stats{padding:70px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--purple-dark);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.stat{text-align:center; padding:0 16px; border-right:1px solid var(--line-soft);}
.stat:last-child{border-right:none;}
.stat .num{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:2.3rem; color:var(--gold);}
.stat .label{font-size:0.82rem; color:var(--ink-soft); margin-top:6px;}

/* ---------------- SOCIAL ---------------- */
.social{padding:90px 0;}
.social-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.social-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  background:linear-gradient(160deg, var(--purple-panel), var(--purple-light));
  border:1px solid var(--line); border-radius:22px; padding:34px 26px;
  transition:transform .3s ease, border-color .3s ease;
}
.social-card:hover{transform:translateY(-6px); border-color:var(--gold);}
.social-icon{width:38px; height:38px; margin-bottom:12px;}
.social-card h3{font-size:1.08rem; color:var(--white);}
.social-handle{font-size:0.82rem; color:var(--gold);}
.social-card p{font-size:0.9rem; color:var(--ink-soft);}

/* ---------------- CTA ---------------- */
.cta{padding:110px 0; position:relative; overflow:hidden;}
.cta-box{
  position:relative; z-index:1; text-align:center; padding:70px 40px; border-radius:32px;
  background:linear-gradient(155deg, var(--purple-panel-2), var(--purple-dark));
  border:1px solid var(--line);
}
.cta-box h2{font-size:clamp(2rem,4vw,2.7rem); margin-bottom:16px;}
.cta-box p{color:var(--ink-soft); max-width:480px; margin:0 auto 30px;}

/* ---------------- FOOTER ---------------- */
footer{padding:50px 0 32px; border-top:1px solid var(--line-soft); background:var(--purple-dark);}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:26px;}
.footer-links{display:flex; gap:26px; font-size:0.88rem; color:var(--ink-soft); font-weight:600;}
.footer-links a:hover{color:var(--gold);}
.footer-bottom{display:flex; justify-content:space-between; margin-top:36px; padding-top:22px; border-top:1px solid var(--line-soft); font-size:0.78rem; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:var(--ink-faint); font-weight:600;}
.footer-bottom a:hover{color:var(--gold);}
.footer-links{flex-wrap:wrap;}

/* ---------------- INNER PAGES ---------------- */
.breadcrumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:0.82rem; color:var(--ink-faint); margin-bottom:22px;}
.breadcrumb a{color:var(--ink-soft); font-weight:600;}
.breadcrumb a:hover{color:var(--gold);}
.page-hero{position:relative; padding:72px 0 48px; overflow:hidden; border-bottom:1px solid var(--line-soft);}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(2rem,4vw,3.1rem); line-height:1.1; margin-bottom:16px;}
.page-hero h1 span{color:var(--gold);}
.page-hero .lead{font-size:1.06rem; color:var(--ink-soft); max-width:640px;}
.page-hero .btn-row{margin-top:28px;}
.prose{padding:70px 0;}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:8px 0 14px;}
.prose h3{font-size:1.15rem; margin:28px 0 10px;}
.prose h4{font-size:1rem; margin:18px 0 8px; color:var(--gold);}
.prose p{color:var(--ink-soft); margin-bottom:14px;}
.prose a{color:var(--gold); font-weight:600;}
.prose a:hover{color:var(--white);}
.prose ul,.prose ol{margin:0 0 16px 20px; color:var(--ink-soft);}
.prose li{margin-bottom:8px;}
.prose .section-block{margin-bottom:42px;}
.faq{padding:90px 0; background:var(--purple-dark); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.faq-list{display:grid; gap:14px; max-width:860px;}
.faq-item{
  background:linear-gradient(160deg, var(--purple-panel), var(--purple-light));
  border:1px solid var(--line); border-radius:18px; padding:22px 24px;
}
.faq-item h3{font-size:1.05rem; margin-bottom:8px;}
.faq-item h4{font-size:0.92rem; color:var(--gold); margin:0 0 8px;}
.faq-item p{color:var(--ink-soft); font-size:0.92rem;}
.faq-item a{color:var(--gold); font-weight:600;}
.faq-item a:hover{color:var(--white);}
.related{padding:80px 0;}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px){
  .nav-links{display:none;}
  .hero-main{grid-template-columns:1fr;}
  .chest-wrap{max-width:320px; margin:0 auto;}
  .bonus-grid{grid-template-columns:repeat(2,1fr);}
  .rank-list{grid-template-columns:repeat(2,1fr); row-gap:34px;}
  .t-grid{grid-template-columns:repeat(2,1fr);}
  .social-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:26px;}
  .stat:nth-child(2){border-right:none;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .bonus-grid{grid-template-columns:1fr;}
  .rank-list{grid-template-columns:1fr;}
  .t-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .ticker-track{animation:none;}
  .chest{animation:none;}
  .spark{animation:none;}
  .chest-lid,.chest-inner,.chest-bonus{transition:none;}
  .chest-wrap .chest-bonus{opacity:1; transform:translate(-50%, -78px) scale(1); pointer-events:auto;}
  .chest-wrap .chest-lid{transform:rotate(-118deg);}
  .chest-wrap .chest-inner{opacity:1;}
  *{transition-duration:0.001ms !important;}
}