:root{
  --bg:#05060a;
  --text:#f7f8fb;
  --muted:#aeb4c2;
  --pink:#ff315a;
  --purple:#a855f7;
  --cyan:#45d6ff;
  --green:#33e6a6;
  --line:rgba(255,255,255,.14);
  --shadow:0 28px 90px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:#05060a;
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%}
button,input{font:inherit}

.lg-root{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
}
.scene-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.scene-tint{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.lg-glass{
  position:relative;
  z-index:3;
  color:#fff;
}
.lg-glass canvas{border-radius:inherit}
.lg-glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--home-glass-color,transparent);opacity:var(--home-glass-intensity,0)}
.section-kicker{
  display:inline-block;
  font:800 11px/1 "Orbitron",sans-serif;
  letter-spacing:.18em;
  color:#ff90a6;
}
.section-heading h2,.articles-heading h2{
  margin:.3em 0 .18em;
  font:800 clamp(30px,4vw,58px)/.98 "Orbitron",sans-serif;
  letter-spacing:-.045em;
}
.section-heading p{
  margin:0;
  color:var(--muted);
  font-size:16px;
}

/* HERO */
.hero-root{
  min-height:100svh;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 1fr auto auto;
  gap:18px;
  padding:18px clamp(18px,3vw,46px) 28px;
  align-items:center;
}
.hero-bg{object-position:center}
.hero-tint{
  background:
    radial-gradient(circle at 66% 38%,rgba(255,49,90,.08),transparent 32%),
    linear-gradient(90deg,rgba(3,4,8,.82) 0%,rgba(3,4,8,.48) 48%,rgba(3,4,8,.72) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.38));
}
.site-nav{
  grid-column:1/-1;
  grid-row:1;
  align-self:start;
  min-height:74px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:10px 14px 10px 18px;
  border-radius:28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
}
.brand img{
  width:46px;height:46px;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(255,49,90,.22));
}
.brand>span{
  font:900 22px/1 "Orbitron",sans-serif;
  letter-spacing:-.04em;
}
.brand span span{
  background:linear-gradient(120deg,#ff9caf,var(--pink),#c67dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
}
.desktop-nav a,.nav-login,.nav-icon{
  text-decoration:none;
  color:rgba(255,255,255,.78);
  padding:11px 12px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  transition:.18s ease;
}
.desktop-nav a:hover,.desktop-nav a.active,.nav-login:hover,.nav-icon:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.nav-account{display:flex;align-items:center;gap:8px}
.nav-avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.25)
}
.nav-name{font-size:12px;font-weight:800;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-login{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;
}
.menu-toggle{
  display:none;
  width:42px;height:42px;border:0;border-radius:14px;
  color:#fff;background:rgba(255,255,255,.08);cursor:pointer;
}
.mobile-nav{
  position:absolute;
  right:14px;
  top:calc(100% + 10px);
  width:min(290px,calc(100vw - 40px));
  padding:10px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(6,8,13,.92);
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
}
.mobile-nav a{
  display:block;
  padding:12px 14px;
  text-decoration:none;
  border-radius:12px;
  font-weight:700;
  color:#e8e9ef;
}
.mobile-nav a:hover{background:rgba(255,255,255,.07)}

.hero-panel{
  grid-column:1/8;
  grid-row:2;
  align-self:center;
  max-width:860px;
  border-radius:34px;
  padding:clamp(28px,4vw,56px);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  font:800 10px/1 "Orbitron",sans-serif;
  letter-spacing:.1em;
  background:rgba(6,8,13,.22);
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px var(--green);
}
.welcome{
  margin:22px 0 -4px;
  color:#c9ccd5;
  font-size:15px;
}
.welcome strong{color:#fff}
.hero-panel h1{
  margin:22px 0 18px;
  font:900 clamp(54px,7vw,104px)/.87 "Orbitron",sans-serif;
  letter-spacing:-.065em;
  text-wrap:balance;
  text-shadow:0 8px 38px rgba(0,0,0,.28);
}
.hero-panel h1 span{
  background:linear-gradient(105deg,#fff 0%,#ff9caf 24%,var(--pink) 54%,#bb73ff 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  max-width:730px;
  margin:0;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.75;
  color:#d1d4dc;
}
.hero-meta{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:#c4c8d2;
  font-size:12px;
  font-weight:700;
}
.hero-meta span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}
.hero-meta i{font-size:8px;color:var(--pink)}

.hero-action{
  grid-row:3;
  min-height:74px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 18px;
  border-radius:22px;
  text-decoration:none;
  transition:transform .18s ease;
}
.hero-action:hover{transform:translateY(-2px)}
.hero-action>i{
  width:38px;height:38px;border-radius:13px;
  display:grid;place-items:center;
  font-size:19px;
  background:rgba(255,255,255,.08);
}
.hero-action span{display:flex;flex-direction:column;gap:3px}
.hero-action strong{font-size:14px}
.hero-action small{font-size:10px;color:#b9bdc8}
.action-login{grid-column:1/4}
.action-discord{grid-column:4/7}
.action-live{grid-column:7/10}
.action-members{grid-column:10/13}
.action-login>i{color:#8d97ff}
.action-discord>i{color:#7f8aff}
.action-live>i{color:#ff7895}
.action-members>i{color:#c58aff}

.hero-scroll{
  grid-column:1/-1;
  grid-row:4;
  justify-self:center;
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.5);
  font:700 9px/1 "Orbitron",sans-serif;
  letter-spacing:.18em;
  z-index:3;
}
.hero-scroll span{
  width:26px;height:1px;background:rgba(255,255,255,.35)
}

/* CONTENT */
.content-root{
  min-height:920px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto auto auto;
  gap:18px;
  padding:84px clamp(18px,4vw,64px);
}
.content-bg{
  object-position:center 44%;
  filter:saturate(.76) brightness(.56);
  transform:scale(1.08);
}
.content-tint{
  background:
    linear-gradient(to bottom,#05060a 0%,rgba(5,6,10,.72) 11%,rgba(5,6,10,.70) 89%,#05060a 100%),
    radial-gradient(circle at 18% 28%,rgba(69,214,255,.12),transparent 32%),
    radial-gradient(circle at 82% 66%,rgba(168,85,247,.13),transparent 34%);
}
.section-heading{
  grid-column:1/9;
  grid-row:1;
  z-index:3;
  margin-bottom:18px;
}
.stat-card{
  grid-row:2;
  min-height:164px;
  border-radius:26px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:5px;
}
.stat-card>i{
  position:absolute;top:22px;right:22px;
  font-size:23px;color:#ff8da5;
}
.stat-card strong{
  font:800 34px/1 "Orbitron",sans-serif;
}
.stat-card span{color:#b9bdc8;font-size:12px;font-weight:700}
.stat-members{grid-column:1/4}
.stat-live{grid-column:4/7}
.stat-discord{grid-column:7/10}
.stat-since{grid-column:10/13}
.stat-live strong{color:#ff6686}
.stat-discord strong{color:#8992ff}
.stat-since strong{color:#c58aff}

.articles-heading{
  grid-column:1/4;
  grid-row:3;
  z-index:3;
  align-self:center;
  padding-right:28px;
}
.article-card{
  grid-row:3;
  min-height:280px;
  border-radius:28px;
  padding:28px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease;
}
.article-card:hover{transform:translateY(-4px)}
.article-1{grid-column:4/7}
.article-2{grid-column:7/10}
.article-3{grid-column:10/13}
.article-category{
  align-self:flex-start;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,49,90,.14);
  color:#ffd6de;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.article-card h3{
  margin:18px 0 10px;
  font:800 21px/1.15 "Orbitron",sans-serif;
  letter-spacing:-.03em;
}
.article-card p{
  margin:0;
  color:#c2c6cf;
  line-height:1.6;
  font-size:13px;
}
.article-more{
  margin-top:auto;
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

/* COMMUNITY */
.community-root{
  min-height:680px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 1fr auto;
  gap:18px;
  padding:78px clamp(18px,4vw,64px) 34px;
}
.community-bg{
  object-position:center 72%;
  filter:saturate(.62) brightness(.45);
  transform:scale(1.12);
}
.community-tint{
  background:
    linear-gradient(to bottom,#05060a 0%,rgba(5,6,10,.69) 14%,rgba(5,6,10,.72) 86%,#05060a 100%),
    radial-gradient(circle at 22% 44%,rgba(255,49,90,.13),transparent 34%),
    radial-gradient(circle at 80% 52%,rgba(69,214,255,.10),transparent 30%);
}
.community-heading{grid-column:1/10;grid-row:1}
.creator-card{
  grid-row:2;
  min-height:240px;
  border-radius:30px;
  padding:24px;
  display:flex;
  align-items:center;
  gap:22px;
}
.creator-one{grid-column:1/7}
.creator-two{grid-column:7/13}
.creator-card>img{
  width:128px;height:128px;border-radius:26px;object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 38px rgba(0,0,0,.30);
}
.creator-label{
  color:#ff88a0;
  font:800 9px/1 "Orbitron",sans-serif;
  letter-spacing:.18em;
}
.creator-card h3{
  margin:8px 0 8px;
  font:800 24px/1 "Orbitron",sans-serif;
}
.creator-card p{
  margin:0 0 12px;
  color:#c4c8d1;
  font-size:13px;
  line-height:1.55;
}
.creator-card a{
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.site-footer{
  grid-column:1/-1;
  grid-row:3;
  min-height:98px;
  border-radius:26px;
  padding:16px 22px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:20px;
  align-items:center;
}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:42px;height:42px;object-fit:contain}
.footer-brand strong{font:900 16px/1 "Orbitron",sans-serif}
.footer-brand span{color:#ff6688}
.site-footer p{color:#b9bdc7;font-size:12px}
.footer-links{display:flex;gap:14px}
.footer-links a{font-size:11px;font-weight:800;text-decoration:none;color:#d9dce4}
.site-footer small{color:#8d929e;font-size:10px}

/* TOAST */
.toast-container{
  position:fixed;
  right:20px;bottom:20px;
  z-index:100;
  display:grid;gap:10px;
}
.toast{
  padding:13px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(7,9,14,.88);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  font-size:13px;
}
.toast.success{border-color:rgba(51,230,166,.32)}
.toast.error{border-color:rgba(255,49,90,.32)}

/* responsive */
@media(max-width:1100px){
  .desktop-nav{display:none}
  .menu-toggle{display:grid;place-items:center}
  .nav-name{display:none}
  .hero-panel{grid-column:1/10}
  .action-login{grid-column:1/7}
  .action-discord{grid-column:7/13}
  .action-live{grid-column:1/7;grid-row:4}
  .action-members{grid-column:7/13;grid-row:4}
  .hero-scroll{display:none}
  .hero-root{grid-template-rows:auto 1fr auto auto}
  .content-root{
    grid-template-rows:auto auto auto auto;
  }
  .section-heading{grid-column:1/-1}
  .stat-members{grid-column:1/4}
  .stat-live{grid-column:4/7}
  .stat-discord{grid-column:7/10}
  .stat-since{grid-column:10/13}
  .articles-heading{grid-column:1/-1;grid-row:3}
  .article-card{grid-row:4}
  .article-1{grid-column:1/5}
  .article-2{grid-column:5/9}
  .article-3{grid-column:9/13}
}
@media(max-width:760px){
  .hero-root{
    min-height:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto auto repeat(4,auto);
    gap:12px;
    padding:10px 10px 24px;
  }
  .site-nav,.hero-panel,.hero-action{
    grid-column:1!important;
  }
  .site-nav{grid-row:1;min-height:64px;border-radius:22px;padding:8px 10px}
  .brand img{width:38px;height:38px}
  .brand>span{font-size:17px}
  .nav-login{font-size:0;padding:8px}
  .nav-login i{font-size:18px}
  .hero-panel{grid-row:2;padding:28px 20px;border-radius:26px;margin-top:28px}
  .hero-panel h1{font-size:clamp(38px,12vw,58px);line-height:.94}
  .hero-lead{font-size:14px;line-height:1.65}
  .hero-meta{gap:7px}
  .hero-meta span{font-size:10px}
  .action-login{grid-row:3}
  .action-discord{grid-row:4}
  .action-live{grid-row:5}
  .action-members{grid-row:6}
  .hero-action{min-height:70px}
  .hero-bg{object-position:62% center}

  .content-root{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto auto auto;
    padding:64px 10px;
    gap:12px;
  }
  .section-heading{grid-column:1/-1;grid-row:1;padding:0 8px 18px}
  .section-heading h2,.articles-heading h2{font-size:34px}
  .stat-card{min-height:142px;padding:18px;border-radius:22px}
  .stat-members{grid-column:1;grid-row:2}
  .stat-live{grid-column:2;grid-row:2}
  .stat-discord{grid-column:1;grid-row:3}
  .stat-since{grid-column:2;grid-row:3}
  .stat-card strong{font-size:27px}
  .articles-heading{grid-column:1/-1;grid-row:4;padding:24px 8px 6px}
  .article-card{grid-column:1/-1!important;min-height:220px;border-radius:24px;padding:22px}
  .article-1{grid-row:5}
  .article-2{grid-row:6}
  .article-3{grid-row:7}
  .content-bg{object-position:60% center}

  .community-root{
    min-height:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    padding:58px 10px 24px;
    gap:12px;
  }
  .community-heading,.creator-one,.creator-two,.site-footer{grid-column:1}
  .community-heading{grid-row:1;padding:0 8px 16px}
  .creator-one{grid-row:2}
  .creator-two{grid-row:3}
  .creator-card{min-height:unset;border-radius:24px;padding:18px;gap:15px}
  .creator-card>img{width:90px;height:90px;border-radius:20px}
  .creator-card h3{font-size:18px}
  .creator-card p{font-size:11px}
  .site-footer{
    grid-row:4;
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    gap:10px;
    border-radius:22px;
  }
  .site-footer p{margin:0}
  .footer-links{justify-content:center}
}
@media(max-width:420px){
  .content-root{grid-template-columns:1fr}
  .stat-members,.stat-live,.stat-discord,.stat-since{grid-column:1}
  .stat-members{grid-row:2}
  .stat-live{grid-row:3}
  .stat-discord{grid-row:4}
  .stat-since{grid-row:5}
  .articles-heading{grid-row:6}
  .article-1{grid-row:7}.article-2{grid-row:8}.article-3{grid-row:9}
  .hero-panel h1{font-size:39px}
}

/* graceful fallback only when the WebGL engine cannot initialise */
.lg-root.lg-fallback > .lg-glass{
  background:rgba(10,12,18,.62);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
  box-shadow:var(--shadow);
}

@media(max-width:760px){
  .hero-panel h1 span{
    display:block;
    font-size:.88em;
  }
}
@media(max-width:420px){
  .hero-panel h1{
    font-size:35px;
    letter-spacing:-.055em;
  }
  .hero-panel h1 span{font-size:.86em}
}

/* final mobile containment */
.site-nav,.hero-panel,.hero-action,.stat-card,.article-card,.creator-card,.site-footer{
  min-width:0;
}
@media(max-width:760px){
  .hero-panel{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .hero-panel h1{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .hero-panel h1 span{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .hero-lead{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .hero-action{width:100%;max-width:100%}
}
@media(max-width:420px){
  .hero-panel h1{font-size:33px}
  .hero-panel h1 span{font-size:.82em;letter-spacing:-.075em}
}

/* GAMES HUB */
.games-root{
  min-height:980px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(190px,auto);
  gap:16px;
  padding:82px clamp(18px,4vw,64px);
  scroll-margin-top:18px;
}
.games-bg{
  object-position:center 56%;
  filter:saturate(.72) brightness(.48);
  transform:scale(1.1);
}
.games-tint{
  background:
    linear-gradient(to bottom,#05060a 0%,rgba(5,6,10,.68) 12%,rgba(5,6,10,.72) 88%,#05060a 100%),
    radial-gradient(circle at 18% 30%,rgba(255,49,90,.12),transparent 32%),
    radial-gradient(circle at 78% 62%,rgba(69,214,255,.11),transparent 34%);
}
.games-heading{
  grid-column:1/-1;
  z-index:3;
  margin-bottom:20px;
}
.game-card{
  min-width:0;
  min-height:190px;
  border-radius:26px;
  padding:22px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .18s ease;
}
.game-card:hover{transform:translateY(-4px)}
.game-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  font-size:20px;
  color:#fff;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10);
}
.game-category{
  align-self:flex-start;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(168,85,247,.13);
  color:#e3c8ff;
  font:800 9px/1 "Orbitron",sans-serif;
  letter-spacing:.11em;
}
.game-card h3{
  margin:4px 0 2px;
  font:800 18px/1.15 "Orbitron",sans-serif;
  letter-spacing:-.035em;
}
.game-card p{
  margin:0;
  color:#c0c4ce;
  font-size:12px;
  line-height:1.55;
}
.game-open{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:800;
  color:#fff;
}
.game-open i{
  transition:transform .18s ease;
}
.game-card:hover .game-open i{
  transform:translateX(3px);
}

@media(max-width:1050px){
  .games-root{
    grid-template-columns:repeat(3,minmax(0,1fr));
    min-height:auto;
  }
}
@media(max-width:760px){
  .games-root{
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:auto;
    padding:62px 10px;
    gap:12px;
  }
  .games-heading{
    grid-column:1/-1;
    padding:0 8px 14px;
    margin-bottom:0;
  }
  .game-card{
    min-height:180px;
    border-radius:22px;
    padding:17px;
  }
  .game-card h3{font-size:15px}
  .game-card p{font-size:11px}
  .game-icon{
    width:40px;
    height:40px;
    border-radius:13px;
    font-size:17px;
  }
}
@media(max-width:480px){
  .games-root{grid-template-columns:1fr}
  .game-card{min-height:165px}
}

/* MOBILE NAV V4 — compact LiquidGlass control */
.menu-toggle{
  position:relative;
  display:none;
  width:46px;
  height:46px;
  flex:0 0 46px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#fff;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 26px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  cursor:pointer;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.menu-toggle::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(69,214,255,.08),transparent 48%,rgba(255,49,90,.10));
}
.menu-toggle:hover,
.menu-toggle:focus-visible{
  border-color:rgba(255,255,255,.32);
  transform:scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 30px rgba(0,0,0,.34),
    0 0 24px rgba(168,85,247,.08);
}
.menu-toggle.is-open{
  border-color:rgba(255,104,133,.34);
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.14),transparent 42%),
    linear-gradient(145deg,rgba(255,49,90,.13),rgba(168,85,247,.055));
}
.menu-toggle-lines{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
}
.menu-toggle-lines span{
  position:absolute;
  width:18px;
  height:1.7px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 9px rgba(255,255,255,.18);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease,width .24s ease;
}
.menu-toggle-lines span:nth-child(1){transform:translateY(-6px)}
.menu-toggle-lines span:nth-child(2){transform:translateY(0)}
.menu-toggle-lines span:nth-child(3){transform:translateY(6px)}
.menu-toggle.is-open .menu-toggle-lines span:nth-child(1){transform:rotate(45deg);width:20px}
.menu-toggle.is-open .menu-toggle-lines span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-toggle.is-open .menu-toggle-lines span:nth-child(3){transform:rotate(-45deg);width:20px}

.mobile-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  position:absolute;
  left:14px;
  right:14px;
  top:calc(100% + 10px);
  width:auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),
    rgba(6,8,13,.93);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 22px 60px rgba(0,0,0,.45);
  transform-origin:top center;
  animation:mobileMenuIn .18s cubic-bezier(.2,.8,.2,1);
  z-index:30;
}
.mobile-nav[hidden]{display:none!important}
@keyframes mobileMenuIn{
  from{opacity:0;transform:translateY(-7px) scale(.985)}
  to{opacity:1;transform:none}
}
.mobile-nav-item{
  min-width:0;
  display:flex!important;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 12px!important;
  border:1px solid transparent;
  border-radius:15px!important;
  color:#e9ebf2!important;
  background:rgba(255,255,255,.028);
  text-decoration:none;
  font-size:12px;
  font-weight:750!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.mobile-nav-item i{
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#d9dcff;
  background:rgba(255,255,255,.055);
}
.mobile-nav-item span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-nav-item:hover,
.mobile-nav-item.active{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.10);
  transform:translateY(-1px);
}
.mobile-nav-item.discord i{color:#9ca5ff}
.mobile-nav-item.danger i{color:#ff8da5}

@media(max-width:1100px){
  .menu-toggle{display:block}
}
@media(max-width:760px){
  .site-nav{
    position:relative;
    min-height:64px;
    gap:10px;
    padding:8px 9px 8px 10px;
  }
  .brand{min-width:0}
  .brand>span{
    min-width:0;
    white-space:nowrap;
    font-size:clamp(15px,4.5vw,18px);
  }
  .nav-account{
    margin-left:auto;
    gap:7px;
  }
  .nav-account>.nav-login{
    display:none!important;
  }
  .nav-account>.nav-icon{
    display:none!important;
  }
  .nav-avatar{
    width:36px;
    height:36px;
  }
  .menu-toggle{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
}
@media(max-width:430px){
  .mobile-nav{
    left:8px;
    right:8px;
    top:calc(100% + 8px);
    gap:7px;
    padding:8px;
    border-radius:19px;
  }
  .mobile-nav-item{
    min-height:45px;
    padding:8px 9px!important;
    font-size:11px;
    border-radius:13px!important;
  }
  .mobile-nav-item i{
    width:27px;
    height:27px;
    flex-basis:27px;
    border-radius:9px;
  }
}

@media(max-width:1100px){
  .site-nav.mobile-menu-open{
    z-index:80!important;
  }
  .site-nav.mobile-menu-open .mobile-nav{
    z-index:90!important;
  }
}

/* GAME CARD ARTWORK V6 */
.game-card{
  isolation:isolate;
  overflow:hidden!important;
  background:transparent!important;
}
.game-card-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  z-index:-3!important;
  opacity:.82;
  filter:saturate(1.08) contrast(1.04) brightness(.82);
  transform:scale(1.035);
  pointer-events:none;
  transition:transform .35s ease,filter .35s ease,opacity .35s ease;
}
.game-card-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,7,12,.16) 0%,rgba(5,7,12,.34) 48%,rgba(5,7,12,.76) 100%),
    linear-gradient(115deg,rgba(5,7,12,.36) 0%,transparent 58%);
}
.game-card > .game-icon,
.game-card > .game-category,
.game-card > h3,
.game-card > p,
.game-card > .game-open{
  position:relative;
  z-index:2;
}
.game-card h3,
.game-card p,
.game-card .game-open,
.game-card .game-category{
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}
.game-card:hover .game-card-bg{
  transform:scale(1.09);
  filter:saturate(1.18) contrast(1.06) brightness(.9);
}
.game-card:hover .game-card-overlay{
  background:
    linear-gradient(180deg,rgba(5,7,12,.10) 0%,rgba(5,7,12,.26) 48%,rgba(5,7,12,.70) 100%),
    linear-gradient(115deg,rgba(5,7,12,.30) 0%,transparent 58%);
}
@media(max-width:760px){
  .game-card-bg{opacity:.76}
  .game-card-overlay{
    background:
      linear-gradient(180deg,rgba(5,7,12,.22),rgba(5,7,12,.78)),
      linear-gradient(115deg,rgba(5,7,12,.40),transparent 60%);
  }
}

/* GAME ART V7 — artwork lives in the root scene so WebGL can refract it */
.game-scene-art{
  position:absolute;
  z-index:2;
  display:block;
  max-width:none!important;
  object-fit:cover;
  border-radius:26px;
  pointer-events:none;
  user-select:none;
  opacity:.88;
  filter:saturate(1.12) contrast(1.05) brightness(.84);
  transform:scale(1.01);
  transform-origin:center;
  transition:transform .30s ease,filter .30s ease,opacity .30s ease;
}
.game-scene-art.is-hovered{
  transform:scale(1.05);
  filter:saturate(1.22) contrast(1.07) brightness(.92);
}
.game-card{
  position:relative;
  z-index:3;
  isolation:isolate;
  overflow:hidden!important;
  background:transparent!important;
  transform:none!important;
}
.game-card:hover{
  transform:none!important;
}
.game-card-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(5,7,12,.10) 0%,rgba(5,7,12,.28) 48%,rgba(5,7,12,.72) 100%),
    linear-gradient(115deg,rgba(5,7,12,.28) 0%,transparent 60%);
}
.game-card > canvas{
  z-index:-1!important;
}
.game-card > .game-icon,
.game-card > .game-category,
.game-card > h3,
.game-card > p,
.game-card > .game-open{
  position:relative;
  z-index:2;
}
@media(max-width:760px){
  .game-scene-art{
    border-radius:22px;
    opacity:.82;
  }
  .game-card-overlay{
    background:
      linear-gradient(180deg,rgba(5,7,12,.16) 0%,rgba(5,7,12,.35) 48%,rgba(5,7,12,.76) 100%),
      linear-gradient(115deg,rgba(5,7,12,.34) 0%,transparent 60%);
  }
}

/* One continuous viewport backdrop across all native glass scenes. */
.lg-root > .scene-bg {
  inset:auto;
  object-fit:cover;
  object-position:center;
  transform:none;
  filter:saturate(.72) brightness(.68);
}
.lg-root > .scene-tint {
  background:rgba(5,6,10,.48);
}
@media(max-width:700px) {
  .lg-root > .scene-bg { object-position:60% center; }
}

/* Paint the fixed artwork once; invisible scene sources are sampled by WebGL. */
.page-backdrop {
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center; filter:saturate(.72) brightness(.68);
  z-index:0; pointer-events:none;
}
body > main { position:relative; z-index:1; }
.lg-root > .scene-bg { opacity:0; }
.lg-root > .lg-glass { background:rgba(5,6,10,.18); }
@media(max-width:700px) { .page-backdrop { object-position:60% center; } }