:root{
  --bg:#030914;
  --panel:#071426;
  --panel2:#0b1a2f;
  --line:#0c8bff;
  --cyan:#22c7ff;
  --blue:#446cff;
  --purple:#8a5cff;
  --orange:#f59e0b;
  --gold:#dca032;
  --green:#25ef7a;
  --text:#eef7ff;
  --muted:#9fb2c8;
  --font-head:'Rajdhani', 'Arial Narrow', sans-serif;
  --font-logo:'Orbitron', sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top,#07162a 0,#020711 52%,#01040a 100%);color:var(--text);font-family:var(--font-body);min-height:100vh}
a{color:inherit;text-decoration:none}
.site-header{height:60px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 58px;background:rgba(2,8,18,.94);border-bottom:1px solid rgba(34,199,255,.22);box-shadow:0 8px 30px rgba(0,0,0,.35);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:14px;min-width:260px}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;font-family:var(--font-logo);font-weight:800;color:white;background:linear-gradient(135deg,#294dff,#17d4ff 55%,#0a1328);clip-path:polygon(50% 0,95% 20%,82% 100%,50% 76%,18% 100%,5% 20%);filter:drop-shadow(0 0 10px rgba(34,199,255,.5))}
.brand-text{font-family:var(--font-logo);letter-spacing:1px;font-size:19px;color:#f4f8ff;text-shadow:0 0 12px rgba(34,199,255,.25)}
.brand-text strong{color:#1ec8ff;font-weight:800}
.main-nav{display:flex;align-items:center;gap:26px;font-family:var(--font-head);text-transform:uppercase;font-weight:700;letter-spacing:.07em;font-size:14px}
.main-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.main-nav .menu{display:flex}
.main-nav .menu:empty{display:none}
.main-nav .menu:not(:empty) + .fallback-menu{display:none}
.main-nav a{color:#d5dfed;transition:.2s}
.main-nav a:hover{color:var(--cyan);text-shadow:0 0 12px rgba(34,199,255,.8)}
.discord-button{padding:13px 22px;border-radius:6px;background:linear-gradient(135deg,#4f5dff,#246aff);box-shadow:0 0 24px rgba(68,108,255,.42);color:white!important}
.user-orb{width:38px;height:38px;border:1px solid rgba(183,216,255,.3);border-radius:50%;position:relative}
.user-orb:before{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid rgba(183,216,255,.55);box-shadow:inset 0 -8px 0 -5px rgba(183,216,255,.55)}
.nav-toggle{display:none}

.hero{position:relative;min-height:520px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid rgba(34,199,255,.2);background:#020711}
.hero-bg{position:absolute;inset:0;background-image:url('../images/hero-mmo-reference.webp');background-size:cover;background-position:center top;filter:saturate(1.08) contrast(1.04);transform:scale(1.01)}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,0,0,.05) 0,rgba(0,0,0,.18) 38%,rgba(0,0,0,.72) 100%),linear-gradient(to bottom,rgba(2,7,17,.05),rgba(2,7,17,.08) 55%,#020711 100%)}
.hero-scanlines{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 4px;opacity:.22;mix-blend-mode:screen;pointer-events:none}
.hero-content{position:relative;text-align:center;z-index:3;max-width:860px;margin-top:18px;text-shadow:0 3px 20px rgba(0,0,0,.95)}
.hero-emblem{width:94px;height:94px;margin:0 auto 10px;display:grid;place-items:center;font:800 54px var(--font-logo);background:linear-gradient(135deg,rgba(210,229,255,.96),rgba(34,174,255,.75) 52%,rgba(12,26,60,.86));clip-path:polygon(50% 0,96% 22%,78% 100%,50% 74%,22% 100%,4% 22%);box-shadow:0 0 42px rgba(34,199,255,.85);animation:heroPulse 3s ease-in-out infinite}
.hero h1{font-family:var(--font-logo);font-size:clamp(52px,7.2vw,112px);line-height:.88;margin:0;letter-spacing:.04em;color:#edf6ff;text-shadow:0 0 8px rgba(255,255,255,.35),0 0 34px rgba(0,137,255,.55),0 8px 20px rgba(0,0,0,.85)}
.hero h1 span{color:#15bfff}
.tagline{margin:12px 0 8px;font-family:var(--font-logo);font-weight:700;letter-spacing:.52em;text-transform:uppercase;color:#a9c6ff;font-size:clamp(15px,2.1vw,26px)}
.subtitle{font-size:clamp(15px,1.4vw,20px);color:#f2f7ff;margin:0 0 24px}
.hero-actions{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--font-head);font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:15px 34px;border-radius:6px;min-width:190px;border:1px solid rgba(52,170,255,.55);transition:.2s}
.btn-primary{background:linear-gradient(135deg,#5862ff,#1473ff);box-shadow:0 0 24px rgba(65,111,255,.55)}
.btn-secondary{background:rgba(3,12,24,.72);box-shadow:inset 0 0 22px rgba(34,199,255,.08)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.game-strip{position:absolute;z-index:4;left:8%;right:8%;bottom:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;font-family:var(--font-logo);font-size:clamp(15px,1.8vw,26px);letter-spacing:.08em;text-transform:uppercase;color:#d8e7ff;text-shadow:0 3px 15px #000}
.game-strip span:nth-child(2){color:#f4d197}
.game-strip span:nth-child(3){color:#d5bbff}
.game-strip span:nth-child(4){color:#f3cc7a}
.hero-down{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:4;color:#1ec8ff;font-size:34px;text-shadow:0 0 15px rgba(34,199,255,.9)}

.section-frame{width:min(1420px,92vw);margin:0 auto}
.game-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px;padding:0 0 18px}
.game-card{min-height:145px;display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;padding:28px;background:linear-gradient(135deg,rgba(6,18,34,.94),rgba(4,10,20,.92));border:1px solid rgba(34,199,255,.22);position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.game-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at right,rgba(34,199,255,.16),transparent 44%);opacity:.85}
.game-card h2{font-family:var(--font-head);font-size:26px;text-transform:uppercase;margin:0 0 8px}
.game-card p{color:#c7d7eb;margin:0 0 14px;line-height:1.35}
.game-card a{display:inline-block;font:800 13px var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:#21caff;border:1px solid currentColor;border-radius:5px;padding:8px 20px;background:rgba(0,0,0,.24)}
.game-icon{width:58px;height:58px;display:grid;place-items:center;background:#09243d;border:1px solid rgba(34,199,255,.3);clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);font-size:24px;color:white;z-index:1}
.game-card > div{z-index:1}
.card-factory{border-color:rgba(245,158,11,.35)}
.card-factory:before{background:radial-gradient(circle at right,rgba(245,158,11,.15),transparent 45%)}
.card-factory .game-icon{background:#23190c;border-color:rgba(245,158,11,.5);color:#ffad24}
.card-factory a{color:#ffad24}
.card-survival{border-color:rgba(138,92,255,.42)}
.card-survival:before{background:radial-gradient(circle at right,rgba(138,92,255,.18),transparent 45%)}
.card-survival .game-icon{background:#1a1234;border-color:rgba(138,92,255,.55);color:#9c6dff}
.card-survival a{color:#b17cff}
.card-fantasy{border-color:rgba(220,160,50,.42)}
.card-fantasy:before{background:radial-gradient(circle at right,rgba(220,160,50,.16),transparent 45%)}
.card-fantasy .game-icon{background:#21170b;border-color:rgba(220,160,50,.55);color:#f4bf52}
.card-fantasy a{color:#f4bf52}

.dashboard{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:20px;padding-bottom:24px}
.panel{background:linear-gradient(180deg,rgba(8,22,40,.96),rgba(3,9,19,.98));border:1px solid rgba(34,199,255,.24);padding:24px;box-shadow:0 0 26px rgba(0,0,0,.28),inset 0 0 34px rgba(34,199,255,.035);clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.panel h2{font:800 22px var(--font-head);letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px}
.status-row{display:grid;grid-template-columns:1fr 78px 76px 66px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(178,221,255,.1);font-size:14px}
.status-row strong{color:#25ef7a;text-transform:uppercase;font:800 12px var(--font-head)}
.status-row em{font-style:normal;color:#e2f1ff;font-weight:700}
.status-row small{color:#9fb2c8;text-transform:uppercase}
.panel-link{display:block;margin-top:18px;padding:12px;border:1px solid rgba(34,199,255,.45);border-radius:5px;text-align:center;text-transform:uppercase;font:800 14px var(--font-head);letter-spacing:.08em;color:#22c7ff}
.panel-link.filled{background:linear-gradient(135deg,#4f5dff,#246aff);color:white;border-color:transparent}
.discord-grid{display:grid;grid-template-columns:1fr 110px;gap:20px;align-items:center}
.discord-grid h3{font:800 24px var(--font-head);margin:0 0 8px}
.discord-grid p{color:#e9f6ff;margin:0 0 14px}
.online-dot{display:inline-block;width:8px;height:8px;background:#25ef7a;border-radius:50%;box-shadow:0 0 10px #25ef7a;margin-right:6px}
.discord-grid ul{list-style:none;margin:0;padding:0;color:#aebfd5}
.discord-grid li{display:flex;justify-content:space-between;padding:5px 0}
.discord-logo{width:110px;height:110px;border-radius:28px;background:linear-gradient(135deg,#5862ff,#246aff);display:grid;place-items:center;font-size:58px;box-shadow:0 0 35px rgba(68,108,255,.5)}
.news-item{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:8px 0;border-bottom:1px solid rgba(178,221,255,.1)}
.news-thumb{height:54px;border-radius:4px;border:1px solid rgba(34,199,255,.35);background:linear-gradient(135deg,#174976,#5b3b18)}
.news-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.news-thumb.purple{background:linear-gradient(135deg,#173a70,#4d2175)}
.news-thumb.gold{background:linear-gradient(135deg,#1a462c,#7a5418)}
.news-item strong{display:block;font:800 16px var(--font-head);text-transform:none}
.news-item small{float:right;color:#7890aa}
.news-item em{display:block;font-style:normal;color:#9fb2c8;font-size:13px;margin-top:2px}
.features{width:min(1360px,92vw);margin:0 auto 40px;padding:22px 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.features div{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;color:#c9d8ea}
.features b{grid-row:1 / span 2;width:42px;height:42px;border:1px solid rgba(34,199,255,.35);border-radius:50%;display:grid;place-items:center;color:#22c7ff;font-size:22px;text-shadow:0 0 12px #22c7ff}
.features strong{font:800 16px var(--font-head);text-transform:uppercase}
.features span{color:#8ea0b7;font-size:13px}
.site-footer{border-top:1px solid rgba(34,199,255,.18);background:#020711;padding:28px 58px;color:#9fb2c8}
.footer-inner{display:flex;justify-content:space-between;align-items:center;width:min(1360px,92vw);margin:0 auto}
.footer-inner strong{color:white;font-family:var(--font-logo);margin-right:14px}
.footer-links{display:flex;gap:20px}
@keyframes heroPulse{0%,100%{filter:drop-shadow(0 0 10px rgba(34,199,255,.85))}50%{filter:drop-shadow(0 0 28px rgba(34,199,255,1))}}
@media(max-width:1100px){
  .site-header{padding:0 22px}
  .main-nav ul{display:none}
  .fallback-menu{display:none!important}
  .game-cards,.dashboard,.features{grid-template-columns:1fr 1fr}
  .hero{min-height:540px}
  .game-strip{grid-template-columns:1fr 1fr;bottom:18px;font-size:16px}
}
@media(max-width:720px){
  .site-header{height:auto;min-height:60px;align-items:flex-start;padding:12px 16px;flex-wrap:wrap}
  .brand{min-width:auto}
  .brand-text{font-size:15px}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;margin-top:8px;background:transparent;border:0}
  .nav-toggle span{width:25px;height:2px;background:#d5dfed}
  .main-nav{display:none;width:100%;padding:14px 0 4px;flex-direction:column;align-items:flex-start;gap:14px}
  .main-nav.is-open{display:flex}
  .discord-button{width:100%;text-align:center}
  .hero{min-height:560px}
  .hero-bg{background-position:center top}
  .hero h1{font-size:42px}
  .tagline{letter-spacing:.24em;font-size:14px}
  .game-strip{display:none}
  .game-cards,.dashboard,.features{grid-template-columns:1fr}
  .game-card{grid-template-columns:58px 1fr;padding:22px}
  .status-row{grid-template-columns:1fr 60px 58px;gap:8px}
  .status-row small{display:none}
  .footer-inner{flex-direction:column;gap:12px;align-items:flex-start}
}


/* V9 Hero animation + overlap fix */
.reference-hero{
  min-height: 625px;
  isolation:isolate;
}
.reference-hero:before{
  content:"";
  position:absolute;
  z-index:2;
  left:-20%;
  top:-40%;
  width:58%;
  height:185%;
  background:linear-gradient(105deg,transparent 0%,rgba(34,199,255,.0) 35%,rgba(34,199,255,.18) 48%,rgba(138,92,255,.12) 55%,transparent 70%);
  transform:translateX(-40%) skewX(-12deg);
  animation:heroLightSweep 8.5s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
.hero-bg{
  animation:heroSlowZoom 24s ease-in-out infinite alternate;
  transform-origin:center center;
}
.hero-vignette{
  background:
    radial-gradient(circle at 50% 46%,rgba(34,199,255,.12) 0,rgba(34,199,255,.05) 18%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.74) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.04),rgba(2,7,17,.12) 54%,#020711 100%);
}
.hero-content{
  transform:translateY(-46px);
  animation:heroFloat 6.5s ease-in-out infinite;
}
.hero h1{
  font-size:clamp(48px,5.7vw,88px);
  line-height:.86;
}
.tagline{
  margin-top:10px;
  font-size:clamp(14px,1.6vw,21px);
  letter-spacing:.46em;
}
.subtitle{
  margin-bottom:18px;
}
.hero-actions{
  position:relative;
  z-index:6;
  margin-top:8px;
}
.game-strip{
  bottom:54px;
  left:5.5%;
  right:5.5%;
  z-index:5;
  pointer-events:none;
}
.game-strip span{
  display:block;
  transform:translateY(0);
  animation:gameLabelGlow 5s ease-in-out infinite;
}
.game-strip span:nth-child(2){ animation-delay:.35s; }
.game-strip span:nth-child(3){ animation-delay:.7s; }
.game-strip span:nth-child(4){ animation-delay:1.05s; }
.hero-down{
  bottom:17px;
  animation:heroDownBounce 1.9s ease-in-out infinite;
}
.btn-primary{
  animation:primaryButtonPulse 3.4s ease-in-out infinite;
}
.hero-emblem{
  animation:heroPulse 3s ease-in-out infinite, emblemHover 5.5s ease-in-out infinite;
}

@keyframes heroSlowZoom{
  0%{transform:scale(1.01) translate3d(0,0,0); filter:saturate(1.08) contrast(1.04) brightness(.94);}
  100%{transform:scale(1.065) translate3d(-10px,-5px,0); filter:saturate(1.16) contrast(1.08) brightness(1);}
}
@keyframes heroFloat{
  0%,100%{transform:translateY(-46px);}
  50%{transform:translateY(-54px);}
}
@keyframes heroLightSweep{
  0%,55%{transform:translateX(-55%) skewX(-12deg); opacity:0;}
  68%{opacity:.78;}
  88%,100%{transform:translateX(255%) skewX(-12deg); opacity:0;}
}
@keyframes emblemHover{
  0%,100%{translate:0 0;}
  50%{translate:0 -6px;}
}
@keyframes gameLabelGlow{
  0%,100%{text-shadow:0 3px 15px #000,0 0 8px rgba(34,199,255,.18);}
  50%{text-shadow:0 3px 15px #000,0 0 18px rgba(34,199,255,.58);}
}
@keyframes primaryButtonPulse{
  0%,100%{box-shadow:0 0 24px rgba(65,111,255,.55);}
  50%{box-shadow:0 0 34px rgba(65,111,255,.86),0 0 14px rgba(34,199,255,.38);}
}
@keyframes heroDownBounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(5px);}
}

@media(max-width:1100px){
  .reference-hero{min-height:610px;}
  .hero-content{transform:translateY(-34px);}
  .hero h1{font-size:clamp(42px,7vw,70px);}
  .game-strip{bottom:44px;grid-template-columns:repeat(2,1fr);gap:10px 34px;}
}
@media(max-width:720px){
  .reference-hero{min-height:610px;}
  .hero-content{transform:translateY(-20px);padding:0 20px;}
  .hero h1{font-size:42px;line-height:.92;}
  .tagline{letter-spacing:.22em;}
  .game-strip{display:none;}
  .hero-actions{gap:12px;}
  .btn{width:100%;max-width:280px;}
}

@media (prefers-reduced-motion: reduce){
  .hero-bg,
  .hero-content,
  .hero-emblem,
  .btn-primary,
  .game-strip span,
  .hero-down,
  .reference-hero:before{
    animation:none!important;
  }
}


/* V10 Customizer support */
.brand-logo img{
  max-height:42px;
  width:auto;
  display:block;
}


/* V11 Pages and templates */
.page-shell{
  min-height:70vh;
}
.page-hero{
  position:relative;
  overflow:hidden;
  min-height:310px;
  display:grid;
  place-items:center;
  padding:90px 24px 50px;
  text-align:center;
  border-bottom:1px solid rgba(34,199,255,.22);
  background:
    radial-gradient(circle at 50% 40%,rgba(34,199,255,.16),transparent 32%),
    linear-gradient(135deg,rgba(5,18,38,.96),rgba(3,8,18,.98));
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/hero-mmo-reference.webp') center/cover no-repeat;
  opacity:.22;
  filter:saturate(1.15) contrast(1.1);
}
.page-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(2,7,17,.15),#020711);
}
.page-hero > div{
  position:relative;
  z-index:2;
}
.page-hero h1{
  margin:0;
  font:800 clamp(42px,6vw,82px) var(--font-logo);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#eef7ff;
  text-shadow:0 0 28px rgba(34,199,255,.46);
}
.page-hero p{
  max-width:780px;
  margin:14px auto 0;
  color:#c7d7eb;
  font-size:18px;
}
.eyebrow{
  margin:0 0 10px!important;
  color:#22c7ff!important;
  font:800 14px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.22em;
}
.page-content{
  padding:34px 0 60px;
}
.content-panel{
  background:linear-gradient(180deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  padding:34px;
  color:#d8e6f7;
  box-shadow:0 0 26px rgba(0,0,0,.28),inset 0 0 34px rgba(34,199,255,.035);
}
.content-panel h2,
.event-card h2,
.world-card h2,
.archive-card h2{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.content-panel p,
.content-panel li{
  line-height:1.7;
}
.page-featured{
  margin-bottom:24px;
}
.page-featured img{
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid rgba(34,199,255,.25);
}
.archive-grid,
.game-worlds,
.event-grid,
.community-layout{
  display:grid;
  gap:22px;
  padding:34px 0 60px;
}
.archive-grid{
  grid-template-columns:repeat(3,1fr);
}
.game-worlds{
  grid-template-columns:repeat(4,1fr);
}
.event-grid{
  grid-template-columns:repeat(4,1fr);
}
.community-layout{
  grid-template-columns:1.2fr .8fr;
}
.archive-card,
.world-card,
.event-card{
  min-height:260px;
  padding:28px;
  background:linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
  box-shadow:inset 0 0 34px rgba(34,199,255,.035);
}
.archive-thumb{
  display:block;
  height:160px;
  margin:-8px -8px 18px;
  background:linear-gradient(135deg,rgba(34,199,255,.18),rgba(138,92,255,.16));
  border:1px solid rgba(34,199,255,.18);
}
.archive-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.archive-card small,
.world-card small,
.event-card small{
  color:#22c7ff;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.archive-card p,
.world-card p,
.event-card p,
.world-card em{
  color:#b6c7dc;
  line-height:1.55;
}
.world-card em{
  display:block;
  font-style:normal;
  margin-top:18px;
}
.world-card a{
  display:inline-block;
  margin-top:22px;
  padding:10px 20px;
  border:1px solid currentColor;
  color:#22c7ff;
  border-radius:5px;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.world-card.factory,
.event-card:nth-child(3){
  border-color:rgba(245,158,11,.34);
}
.world-card.factory a,
.event-card:nth-child(3) small{
  color:#f59e0b;
}
.world-card.survival,
.event-card:nth-child(2){
  border-color:rgba(138,92,255,.42);
}
.world-card.survival a,
.event-card:nth-child(2) small{
  color:#a879ff;
}
.world-card.fantasy,
.event-card:nth-child(4){
  border-color:rgba(220,160,50,.42);
}
.world-card.fantasy a,
.event-card:nth-child(4) small{
  color:#dca032;
}
.server-detail-row{
  display:grid;
  grid-template-columns:1fr 120px 120px 120px;
  gap:14px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid rgba(178,221,255,.1);
}
.server-detail-row span{
  color:#25ef7a;
  text-transform:uppercase;
  font:800 13px var(--font-head);
}
.server-detail-row em{
  font-style:normal;
  font-weight:800;
}
.server-detail-row small{
  color:#9fb2c8;
  text-transform:uppercase;
}
.inline-btn{
  display:inline-block;
  width:auto;
  margin-top:24px;
}
.channel-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:24px 0;
}
.channel-grid div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:16px;
  background:rgba(34,199,255,.06);
  border:1px solid rgba(34,199,255,.18);
}
.clean-list{
  margin:0;
  padding-left:18px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:520px;
}
.footer-links{
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:1100px){
  .archive-grid,
  .game-worlds,
  .event-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:720px){
  .archive-grid,
  .game-worlds,
  .event-grid,
  .community-layout,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .server-detail-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .content-panel{
    padding:24px;
  }
  .page-hero{
    min-height:260px;
  }
}


/* V13 detailed game pages */
.game-detail-hero{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:grid;
  align-items:center;
  padding:110px 7vw 70px;
  border-bottom:1px solid rgba(34,199,255,.22);
  background:#020711;
}
.game-detail-bg{
  position:absolute;
  inset:0;
  background:url('../images/hero-mmo-reference.webp') center/cover no-repeat;
  opacity:.34;
  filter:saturate(1.15) contrast(1.1);
  transform:scale(1.03);
}
.game-detail-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 75% 50%,rgba(34,199,255,.14),transparent 30%),
    linear-gradient(90deg,#020711 0%,rgba(2,7,17,.78) 42%,rgba(2,7,17,.3) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.25),#020711 100%);
}
.game-detail-content{
  position:relative;
  z-index:2;
  max-width:760px;
}
.game-detail-content h1{
  margin:0;
  font:800 clamp(48px,7vw,96px) var(--font-logo);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-shadow:0 0 34px rgba(34,199,255,.45);
}
.game-detail-content > p:not(.eyebrow){
  color:#d6e6f7;
  font-size:20px;
  line-height:1.55;
  max-width:680px;
}
.game-detail-icon{
  position:absolute;
  z-index:2;
  right:9vw;
  top:50%;
  transform:translateY(-50%);
  width:170px;
  height:170px;
  display:grid;
  place-items:center;
  font-size:82px;
  color:#eef7ff;
  background:linear-gradient(135deg,rgba(34,199,255,.16),rgba(68,108,255,.08));
  border:1px solid rgba(34,199,255,.34);
  clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
  box-shadow:0 0 60px rgba(34,199,255,.24), inset 0 0 38px rgba(34,199,255,.08);
}
.factory-detail .game-detail-icon,
.factory-detail .eyebrow{color:#f59e0b}
.factory-detail .game-detail-icon{border-color:rgba(245,158,11,.42);background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(34,16,4,.28));box-shadow:0 0 60px rgba(245,158,11,.18), inset 0 0 38px rgba(245,158,11,.08)}
.survival-detail .game-detail-icon,
.survival-detail .eyebrow{color:#a879ff}
.survival-detail .game-detail-icon{border-color:rgba(138,92,255,.48);background:linear-gradient(135deg,rgba(138,92,255,.18),rgba(20,8,45,.28));box-shadow:0 0 60px rgba(138,92,255,.2), inset 0 0 38px rgba(138,92,255,.08)}
.fantasy-detail .game-detail-icon,
.fantasy-detail .eyebrow{color:#dca032}
.fantasy-detail .game-detail-icon{border-color:rgba(220,160,50,.48);background:linear-gradient(135deg,rgba(220,160,50,.18),rgba(40,22,4,.28));box-shadow:0 0 60px rgba(220,160,50,.2), inset 0 0 38px rgba(220,160,50,.08)}
.game-detail-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:22px;
  padding:36px 0 0;
}
.game-server-card{
  align-self:start;
}
.server-big-status{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid rgba(34,199,255,.18);
  background:rgba(34,199,255,.05);
}
.server-big-status span{
  font:800 20px var(--font-head);
  text-transform:uppercase;
}
.server-big-status strong{
  color:#25ef7a;
  text-transform:uppercase;
  font:800 14px var(--font-head);
}
.server-big-status em{
  font-style:normal;
  font-size:28px;
  font-weight:800;
}
.server-big-status small{
  color:#9fb2c8;
  text-transform:uppercase;
}
.game-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding:22px 0;
}
.game-feature-grid article{
  padding:28px;
  min-height:210px;
  background:linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.22);
  box-shadow:inset 0 0 34px rgba(34,199,255,.035);
}
.game-feature-grid b{
  color:#22c7ff;
  font:800 13px var(--font-logo);
  letter-spacing:.18em;
}
.game-feature-grid h3{
  font:800 24px var(--font-head);
  text-transform:uppercase;
  margin:14px 0 10px;
}
.game-feature-grid p{
  color:#b8c9de;
  line-height:1.55;
}
.join-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding:0 0 60px;
}
.rules-list li{
  margin-bottom:10px;
}
.join-card{
  background:
    radial-gradient(circle at 80% 20%,rgba(34,199,255,.16),transparent 32%),
    linear-gradient(180deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
}

@media(max-width:980px){
  .game-detail-grid,
  .game-feature-grid,
  .join-layout{
    grid-template-columns:1fr;
  }
  .game-detail-icon{
    opacity:.18;
    right:20px;
    width:140px;
    height:140px;
  }
}
@media(max-width:720px){
  .game-detail-hero{
    min-height:460px;
    padding:90px 24px 50px;
  }
  .game-detail-content h1{
    font-size:42px;
  }
  .game-detail-content > p:not(.eyebrow){
    font-size:17px;
  }
}


/* V15 per-game atmospheric backgrounds */
.game-detail{
  position:relative;
  overflow:hidden;
}
.game-detail:before{
  content:"";
  position:fixed;
  z-index:-2;
  inset:0;
  background:url('../images/hero-mmo-reference.webp') center/cover no-repeat;
  opacity:.16;
  filter:saturate(1.08) contrast(1.1);
}
.game-detail:after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 8%,rgba(34,199,255,.12),transparent 28%),
    linear-gradient(to bottom,rgba(2,7,17,.56),#020711 44%,#01050d 100%);
}

/* Space Engineers: left space / asteroid / ship area */
.space-detail:before{
  background-position:left center;
}
.space-detail:after{
  background:
    radial-gradient(circle at 16% 20%,rgba(34,199,255,.24),transparent 24%),
    radial-gradient(circle at 70% 18%,rgba(42,92,180,.16),transparent 26%),
    linear-gradient(105deg,rgba(2,7,17,.2),rgba(4,18,36,.82) 44%,#020711 100%);
}
.space-detail .game-detail-bg{
  background-position:left center;
  opacity:.46;
}
.space-detail .game-detail-hero:after{
  background:
    radial-gradient(circle at 20% 38%,rgba(34,199,255,.17),transparent 26%),
    linear-gradient(90deg,rgba(2,7,17,.36) 0%,rgba(2,15,30,.82) 44%,rgba(2,7,17,.72) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.08),#020711 100%);
}

/* Satisfactory: factory / orange industrial section */
.factory-detail:before{
  background-position:32% center;
}
.factory-detail:after{
  background:
    radial-gradient(circle at 35% 20%,rgba(245,158,11,.23),transparent 26%),
    radial-gradient(circle at 74% 12%,rgba(34,199,255,.08),transparent 28%),
    linear-gradient(105deg,rgba(16,8,2,.24),rgba(28,14,3,.78) 42%,#020711 100%);
}
.factory-detail .game-detail-bg{
  background-position:32% center;
  opacity:.48;
}
.factory-detail .game-detail-hero:after{
  background:
    radial-gradient(circle at 34% 38%,rgba(245,158,11,.22),transparent 28%),
    linear-gradient(90deg,rgba(8,4,2,.28) 0%,rgba(34,16,4,.82) 46%,rgba(2,7,17,.75) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.08),#020711 100%);
}

/* StarRupture: alien / purple survival zone */
.survival-detail:before{
  background-position:64% center;
}
.survival-detail:after{
  background:
    radial-gradient(circle at 58% 17%,rgba(138,92,255,.26),transparent 26%),
    radial-gradient(circle at 76% 18%,rgba(255,73,185,.13),transparent 22%),
    linear-gradient(105deg,rgba(9,4,24,.18),rgba(18,8,44,.8) 48%,#020711 100%);
}
.survival-detail .game-detail-bg{
  background-position:64% center;
  opacity:.49;
}
.survival-detail .game-detail-hero:after{
  background:
    radial-gradient(circle at 64% 36%,rgba(138,92,255,.25),transparent 27%),
    linear-gradient(90deg,rgba(6,3,18,.32) 0%,rgba(18,8,44,.82) 48%,rgba(2,7,17,.74) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.08),#020711 100%);
}

/* World of Warcraft: right fantasy / castle / banner section */
.fantasy-detail:before{
  background-position:right center;
}
.fantasy-detail:after{
  background:
    radial-gradient(circle at 82% 22%,rgba(220,160,50,.24),transparent 26%),
    radial-gradient(circle at 65% 16%,rgba(138,92,255,.12),transparent 26%),
    linear-gradient(105deg,rgba(20,10,2,.15),rgba(32,17,4,.72) 50%,#020711 100%);
}
.fantasy-detail .game-detail-bg{
  background-position:right center;
  opacity:.5;
}
.fantasy-detail .game-detail-hero:after{
  background:
    radial-gradient(circle at 78% 36%,rgba(220,160,50,.23),transparent 29%),
    linear-gradient(90deg,rgba(10,5,2,.28) 0%,rgba(35,18,4,.82) 50%,rgba(2,7,17,.72) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.08),#020711 100%);
}

/* Theme the detail cards per game */
.space-detail .content-panel,
.space-detail .game-feature-grid article{
  border-color:rgba(34,199,255,.28);
  box-shadow:0 0 26px rgba(0,0,0,.28), inset 0 0 40px rgba(34,199,255,.045);
}
.factory-detail .content-panel,
.factory-detail .game-feature-grid article{
  border-color:rgba(245,158,11,.28);
  box-shadow:0 0 26px rgba(0,0,0,.28), inset 0 0 40px rgba(245,158,11,.045);
}
.survival-detail .content-panel,
.survival-detail .game-feature-grid article{
  border-color:rgba(138,92,255,.32);
  box-shadow:0 0 26px rgba(0,0,0,.28), inset 0 0 40px rgba(138,92,255,.055);
}
.fantasy-detail .content-panel,
.fantasy-detail .game-feature-grid article{
  border-color:rgba(220,160,50,.32);
  box-shadow:0 0 26px rgba(0,0,0,.28), inset 0 0 40px rgba(220,160,50,.055);
}

.factory-detail .game-feature-grid b,
.factory-detail .server-big-status strong{
  color:#f59e0b;
}
.survival-detail .game-feature-grid b,
.survival-detail .server-big-status strong{
  color:#a879ff;
}
.fantasy-detail .game-feature-grid b,
.fantasy-detail .server-big-status strong{
  color:#dca032;
}

/* More cinematic separation between hero and content */
.game-detail-grid,
.game-feature-grid,
.join-layout{
  position:relative;
  z-index:1;
}
.game-detail-grid:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:-70px;
  width:100vw;
  height:220px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,rgba(2,7,17,0),#020711 44%,rgba(2,7,17,0));
  pointer-events:none;
}


/* V16 Mobile polish and navigation refinements */
.site-header{
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  background:rgba(1,6,14,.98);
  border-bottom-color:rgba(34,199,255,.34);
  box-shadow:0 10px 35px rgba(0,0,0,.5), 0 0 24px rgba(34,199,255,.08);
}
.nav-toggle{
  width:44px;
  height:40px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(34,199,255,.25)!important;
  border-radius:8px;
}
.nav-toggle span{
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle.is-active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2){
  opacity:0;
}
.nav-toggle.is-active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media(max-width:1280px){
  .site-header{
    padding:0 28px;
  }
  .main-nav{
    gap:18px;
  }
  .main-nav ul{
    gap:18px;
  }
  .discord-button{
    padding:11px 18px;
  }
}

@media(max-width:980px){
  body.nav-open{
    overflow:hidden;
  }
  .site-header{
    min-height:64px;
    height:auto;
    padding:10px 18px;
    align-items:center;
  }
  .brand{
    min-width:0;
  }
  .brand-mark{
    width:38px;
    height:38px;
  }
  .brand-text{
    font-size:17px;
  }
  .nav-toggle{
    display:flex;
    margin-left:auto;
    margin-top:0;
  }
  .main-nav{
    display:none;
    position:fixed;
    left:16px;
    right:16px;
    top:76px;
    max-height:calc(100vh - 92px);
    overflow:auto;
    padding:18px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:
      radial-gradient(circle at top right,rgba(34,199,255,.12),transparent 34%),
      linear-gradient(180deg,rgba(5,16,31,.98),rgba(2,7,17,.99));
    border:1px solid rgba(34,199,255,.28);
    border-radius:14px;
    box-shadow:0 22px 70px rgba(0,0,0,.65), inset 0 0 34px rgba(34,199,255,.04);
    z-index:100;
  }
  .main-nav.is-open{
    display:flex;
  }
  .main-nav ul,
  .main-nav .fallback-menu{
    display:flex!important;
    flex-direction:column;
    gap:4px;
    width:100%;
  }
  .main-nav .menu:not(:empty) + .fallback-menu{
    display:none!important;
  }
  .main-nav li{
    width:100%;
  }
  .main-nav a:not(.discord-button){
    display:block;
    width:100%;
    padding:13px 14px;
    border:1px solid rgba(34,199,255,.12);
    border-radius:8px;
    background:rgba(34,199,255,.035);
  }
  .discord-button{
    width:100%;
    text-align:center;
    margin-top:8px;
  }
  .user-orb{
    display:none;
  }

  .reference-hero{
    min-height:590px;
  }
  .hero-content{
    transform:translateY(-18px);
    max-width:680px;
  }
  .hero h1{
    font-size:clamp(44px,10vw,68px);
  }
  .subtitle{
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .game-strip{
    grid-template-columns:repeat(2,1fr);
    left:6%;
    right:6%;
    bottom:42px;
    gap:12px 20px;
  }
  .game-strip span{
    font-size:16px;
  }
  .game-cards{
    margin-top:18px;
  }
  .dashboard{
    grid-template-columns:1fr;
  }
  .panel{
    padding:22px;
  }
}

@media(max-width:640px){
  .site-header{
    padding:10px 14px;
  }
  .brand-text{
    font-size:14px;
    letter-spacing:.04em;
  }
  .brand-mark{
    width:34px;
    height:34px;
    font-size:16px;
  }
  .main-nav{
    left:12px;
    right:12px;
    top:70px;
  }

  .reference-hero{
    min-height:560px;
  }
  .hero-bg{
    background-position:center center;
    opacity:.9;
  }
  .hero-vignette{
    background:
      radial-gradient(circle at 50% 42%,rgba(34,199,255,.1),transparent 26%),
      linear-gradient(to bottom,rgba(2,7,17,.28),rgba(2,7,17,.38) 48%,#020711 100%);
  }
  .hero-content{
    padding:0 20px;
    transform:translateY(-8px);
  }
  .hero-emblem{
    width:64px;
    height:64px;
    font-size:34px;
    margin-bottom:12px;
  }
  .hero h1{
    font-size:40px;
    line-height:.96;
    letter-spacing:.02em;
  }
  .tagline{
    font-size:12px;
    letter-spacing:.2em;
    line-height:1.65;
  }
  .subtitle{
    font-size:15px;
    line-height:1.55;
  }
  .hero-actions{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .btn{
    max-width:300px;
    width:100%;
    min-width:0;
    padding:13px 20px;
  }
  .hero-down{
    display:none;
  }

  .section-frame{
    width:min(100% - 28px, 1420px);
  }
  .game-cards{
    gap:14px;
  }
  .game-card{
    grid-template-columns:54px 1fr;
    gap:14px;
    padding:20px;
    min-height:auto;
  }
  .game-card h2{
    font-size:22px;
  }
  .game-card p{
    font-size:14px;
  }
  .dashboard{
    gap:14px;
  }
  .status-row{
    grid-template-columns:1fr auto;
    gap:6px 12px;
  }
  .status-row span{
    grid-column:1 / -1;
  }
  .status-row em{
    text-align:right;
  }
  .discord-grid{
    grid-template-columns:1fr;
  }
  .discord-logo{
    width:86px;
    height:86px;
    font-size:44px;
    justify-self:center;
  }
  .news-item{
    grid-template-columns:64px 1fr;
  }
  .features{
    width:min(100% - 28px, 1360px);
    gap:14px;
  }
  .features div{
    padding:8px 0;
  }

  .game-detail-hero{
    min-height:430px;
    padding:86px 22px 44px;
  }
  .game-detail-content h1{
    font-size:38px;
    word-break:break-word;
  }
  .game-detail-content > p:not(.eyebrow){
    font-size:16px;
  }
  .game-detail-icon{
    width:112px;
    height:112px;
    font-size:56px;
    right:18px;
    top:58%;
  }
  .game-detail-grid,
  .game-feature-grid,
  .join-layout,
  .archive-grid,
  .game-worlds,
  .event-grid,
  .community-layout{
    width:min(100% - 28px, 1420px);
    gap:14px;
  }
  .content-panel,
  .game-feature-grid article,
  .archive-card,
  .world-card,
  .event-card{
    padding:22px;
  }
  .page-hero h1{
    font-size:36px;
  }
  .page-hero p{
    font-size:16px;
  }
  .channel-grid{
    grid-template-columns:1fr;
  }
  .site-footer{
    padding:26px 18px;
  }
}

@media(max-width:420px){
  .hero h1{
    font-size:34px;
  }
  .tagline{
    letter-spacing:.14em;
  }
  .game-card{
    grid-template-columns:1fr;
  }
  .game-icon{
    width:52px;
    height:52px;
  }
  .panel h2{
    font-size:19px;
  }
  .news-item{
    grid-template-columns:1fr;
  }
  .news-thumb{
    height:90px;
  }
  .game-detail-content h1{
    font-size:32px;
  }
}


/* V17 Artwork Customizer support */
.hero-bg{
  background-image:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp'))!important;
}
.page-hero:before{
  background-image:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp'))!important;
}
.game-detail:before{
  background-image:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp'))!important;
}
.game-detail-bg{
  background-image:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp'))!important;
}
.space-detail:before,
.space-detail .game-detail-bg{
  background-image:var(--mmo-space-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')))!important;
}
.factory-detail:before,
.factory-detail .game-detail-bg{
  background-image:var(--mmo-factory-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')))!important;
}
.survival-detail:before,
.survival-detail .game-detail-bg{
  background-image:var(--mmo-survival-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')))!important;
}
.fantasy-detail:before,
.fantasy-detail .game-detail-bg{
  background-image:var(--mmo-fantasy-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')))!important;
}


/* V18 Join and Rules pages */
.page-actions{
  margin-top:24px;
}
.join-steps,
.rules-layout,
.game-rules-grid{
  display:grid;
  gap:22px;
  padding:36px 0 0;
}
.join-steps{
  grid-template-columns:repeat(4,1fr);
}
.step-card,
.game-rules-grid article{
  min-height:230px;
  padding:28px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.step-card b{
  display:inline-block;
  margin-bottom:20px;
  color:#22c7ff;
  font:800 14px var(--font-logo);
  letter-spacing:.18em;
}
.step-card h2,
.game-rules-grid h2{
  margin:0 0 12px;
  font:800 24px var(--font-head);
  text-transform:uppercase;
}
.step-card p,
.game-rules-grid p{
  color:#b9cbe0;
  line-height:1.55;
}
.rules-layout{
  grid-template-columns:1.35fr .65fr;
}
.rules-panel{
  padding:36px;
}
.numbered-rules{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:rules;
}
.numbered-rules li{
  counter-increment:rules;
  position:relative;
  padding:20px 0 20px 64px;
  border-bottom:1px solid rgba(178,221,255,.1);
}
.numbered-rules li:before{
  content:counter(rules, decimal-leading-zero);
  position:absolute;
  left:0;
  top:18px;
  color:#22c7ff;
  font:800 18px var(--font-logo);
  text-shadow:0 0 14px rgba(34,199,255,.55);
}
.numbered-rules strong{
  display:block;
  margin-bottom:6px;
  font:800 22px var(--font-head);
  text-transform:uppercase;
  color:#eef7ff;
}
.numbered-rules span{
  display:block;
  color:#b9cbe0;
  line-height:1.6;
}
.rules-sidebar{
  align-self:start;
}
.game-rules-grid{
  grid-template-columns:repeat(4,1fr);
  padding-bottom:60px;
}
.join-page .page-hero:before,
.rules-page .page-hero:before{
  opacity:.32;
}
.join-page .page-hero{
  background:
    radial-gradient(circle at 50% 35%,rgba(34,199,255,.2),transparent 34%),
    linear-gradient(135deg,rgba(5,18,38,.96),rgba(3,8,18,.98));
}
.rules-page .page-hero{
  background:
    radial-gradient(circle at 50% 35%,rgba(138,92,255,.16),transparent 34%),
    linear-gradient(135deg,rgba(5,18,38,.96),rgba(3,8,18,.98));
}

@media(max-width:1100px){
  .join-steps,
  .game-rules-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .rules-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .join-steps,
  .game-rules-grid{
    grid-template-columns:1fr;
    width:min(100% - 28px, 1420px);
  }
  .step-card,
  .game-rules-grid article{
    min-height:auto;
    padding:22px;
  }
  .rules-layout{
    width:min(100% - 28px, 1420px);
  }
  .numbered-rules li{
    padding-left:46px;
  }
}


/* V19 FAQ and Contact pages */
.faq-layout,
.contact-grid,
.application-layout{
  display:grid;
  gap:22px;
  padding:36px 0 0;
}
.faq-layout{
  grid-template-columns:1.25fr .75fr;
}
.faq-list{
  display:grid;
  gap:14px;
}
.faq-list details{
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.09),transparent 30%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.22);
  padding:0;
  overflow:hidden;
}
.faq-list summary{
  cursor:pointer;
  padding:22px 26px;
  color:#eef7ff;
  font:800 22px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  list-style:none;
}
.faq-list summary::-webkit-details-marker{
  display:none;
}
.faq-list summary:after{
  content:"+";
  float:right;
  color:#22c7ff;
  font-family:var(--font-logo);
}
.faq-list details[open] summary:after{
  content:"−";
}
.faq-list p{
  margin:0;
  padding:0 26px 24px;
  color:#b9cbe0;
  line-height:1.65;
}
.faq-sidebar{
  align-self:start;
}
.faq-sidebar .btn-secondary{
  margin-left:10px;
}
.contact-grid{
  grid-template-columns:repeat(3,1fr);
}
.contact-card{
  min-height:250px;
  padding:28px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.contact-card b{
  display:inline-block;
  margin-bottom:20px;
  color:#22c7ff;
  font:800 14px var(--font-logo);
  letter-spacing:.18em;
}
.contact-card h2{
  margin:0 0 12px;
  font:800 25px var(--font-head);
  text-transform:uppercase;
}
.contact-card p{
  color:#b9cbe0;
  line-height:1.55;
}
.contact-card a{
  display:inline-block;
  margin-top:16px;
  color:#22c7ff;
  border:1px solid currentColor;
  border-radius:5px;
  padding:10px 20px;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.application-layout{
  grid-template-columns:1.1fr .9fr;
  padding-bottom:60px;
}
.copy-box{
  margin-top:18px;
  padding:20px;
  background:rgba(34,199,255,.05);
  border:1px solid rgba(34,199,255,.18);
  color:#d8e6f7;
}
.copy-box p{
  margin:8px 0;
}
.copy-box strong{
  color:#22c7ff;
}
.contact-page .page-hero:before,
.faq-page .page-hero:before{
  opacity:.3;
}

@media(max-width:980px){
  .faq-layout,
  .application-layout{
    grid-template-columns:1fr;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .faq-layout,
  .contact-grid,
  .application-layout{
    width:min(100% - 28px, 1420px);
    gap:14px;
  }
  .faq-list summary{
    font-size:19px;
    padding:20px;
  }
  .faq-list p{
    padding:0 20px 20px;
  }
  .contact-card{
    min-height:auto;
    padding:22px;
  }
  .faq-sidebar .btn-secondary{
    margin-left:0;
  }
}


/* V20 Search, 404 and sharing polish */
.mmo-search-form{
  display:flex;
  gap:10px;
  width:min(620px,100%);
  margin:24px auto 0;
}
.mmo-search-form label{
  flex:1;
}
.search-field{
  width:100%;
  min-height:48px;
  padding:0 16px;
  color:#eef7ff;
  background:rgba(3,12,24,.78);
  border:1px solid rgba(34,199,255,.34);
  border-radius:6px;
  outline:none;
  font:600 15px var(--font-body);
  box-shadow:inset 0 0 18px rgba(34,199,255,.04);
}
.search-field:focus{
  border-color:#22c7ff;
  box-shadow:0 0 20px rgba(34,199,255,.22), inset 0 0 18px rgba(34,199,255,.06);
}
.search-submit{
  min-height:48px;
  padding:0 24px;
  border:0;
  border-radius:6px;
  color:white;
  background:linear-gradient(135deg,#5862ff,#1473ff);
  box-shadow:0 0 22px rgba(65,111,255,.45);
  cursor:pointer;
  font:800 14px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.search-results-grid{
  padding-bottom:60px;
}
.pagination-wrap{
  grid-column:1/-1;
  padding:20px 0 0;
}
.pagination{
  display:flex;
  justify-content:center;
}
.nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav-links .page-numbers{
  display:inline-grid;
  place-items:center;
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:1px solid rgba(34,199,255,.22);
  color:#d8e6f7;
  background:rgba(34,199,255,.04);
  border-radius:6px;
  font-weight:800;
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover{
  color:white;
  background:linear-gradient(135deg,#5862ff,#1473ff);
  border-color:transparent;
}
.empty-state{
  grid-column:1/-1;
  text-align:center;
}
.inline-actions{
  margin-top:22px;
}
.error-hero{
  position:relative;
  min-height:620px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:110px 24px 70px;
  overflow:hidden;
  background:#020711;
}
.error-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')) center/cover no-repeat;
  opacity:.28;
  filter:saturate(1.15) contrast(1.08);
}
.error-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(34,199,255,.18),transparent 34%),
    linear-gradient(to bottom,rgba(2,7,17,.46),#020711 100%);
}
.error-hero > *{
  position:relative;
  z-index:2;
}
.error-code{
  font:800 clamp(96px,18vw,230px) var(--font-logo);
  line-height:.8;
  color:rgba(238,247,255,.08);
  text-shadow:0 0 50px rgba(34,199,255,.22);
  position:absolute;
  top:110px;
}
.error-hero h1{
  margin:90px 0 16px;
  max-width:900px;
  font:800 clamp(38px,7vw,86px) var(--font-logo);
  text-transform:uppercase;
  letter-spacing:.04em;
  text-shadow:0 0 34px rgba(34,199,255,.45);
}
.error-hero p:not(.eyebrow){
  max-width:720px;
  color:#c7d7eb;
  font-size:18px;
  line-height:1.6;
}
.error-actions{
  margin-top:22px;
}
.quick-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding:34px 0 60px;
}
.quick-links article{
  padding:28px;
  background:linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.quick-links h2{
  margin:0 0 10px;
  font:800 24px var(--font-head);
  text-transform:uppercase;
}
.quick-links p{
  color:#b9cbe0;
}
.quick-links a{
  display:inline-block;
  margin-top:14px;
  color:#22c7ff;
  border:1px solid currentColor;
  border-radius:5px;
  padding:9px 18px;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.screen-reader-text{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(max-width:820px){
  .mmo-search-form{
    flex-direction:column;
  }
  .quick-links{
    grid-template-columns:1fr;
    width:min(100% - 28px, 1420px);
  }
  .error-hero h1{
    margin-top:70px;
  }
}


/* V21 Production polish: accessibility, focus states, print, compatibility */
.skip-link{
  position:fixed;
  z-index:9999;
  left:16px;
  top:12px;
  transform:translateY(-140%);
  padding:12px 18px;
  color:#020711;
  background:#22c7ff;
  border-radius:6px;
  font:800 14px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 0 22px rgba(34,199,255,.55);
}
.skip-link:focus{
  transform:translateY(0);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible{
  outline:2px solid #22c7ff;
  outline-offset:3px;
}
img{
  max-width:100%;
  height:auto;
}
.wp-caption,
.aligncenter,
.alignleft,
.alignright{
  max-width:100%;
}
.aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.alignleft{
  float:left;
  margin:0 24px 18px 0;
}
.alignright{
  float:right;
  margin:0 0 18px 24px;
}
.gallery{
  display:grid;
  gap:14px;
}
.gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.gallery-columns-3{grid-template-columns:repeat(3,1fr)}
.gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.gallery img{
  border:1px solid rgba(34,199,255,.2)!important;
  border-radius:8px;
}
.content-panel blockquote{
  margin:24px 0;
  padding:18px 22px;
  border-left:4px solid #22c7ff;
  background:rgba(34,199,255,.06);
  color:#d8e6f7;
}
.content-panel code{
  padding:2px 6px;
  border-radius:4px;
  background:rgba(34,199,255,.08);
  color:#8be6ff;
}
.content-panel pre{
  overflow:auto;
  padding:18px;
  border:1px solid rgba(34,199,255,.18);
  background:#020711;
  border-radius:8px;
}
.content-panel table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  overflow:hidden;
}
.content-panel th,
.content-panel td{
  padding:12px 14px;
  border:1px solid rgba(178,221,255,.12);
}
.content-panel th{
  background:rgba(34,199,255,.08);
  color:#eef7ff;
  text-align:left;
}
.content-panel input,
.content-panel textarea,
.content-panel select{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  color:#eef7ff;
  background:rgba(3,12,24,.78);
  border:1px solid rgba(34,199,255,.28);
  border-radius:6px;
}
.content-panel textarea{
  min-height:130px;
}
.content-panel button,
.content-panel input[type="submit"]{
  width:auto;
  cursor:pointer;
  color:white;
  border:0;
  background:linear-gradient(135deg,#5862ff,#1473ff);
  font:800 14px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
@media(max-width:640px){
  .alignleft,
  .alignright{
    float:none;
    margin:0 0 18px;
  }
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4{
    grid-template-columns:1fr;
  }
}
@media print{
  .site-header,
  .site-footer,
  .hero-actions,
  .discord-button,
  .nav-toggle,
  .main-nav,
  .hero-down{
    display:none!important;
  }
  body{
    background:white!important;
    color:black!important;
  }
  .content-panel,
  .panel,
  .game-card{
    border:1px solid #ccc!important;
    box-shadow:none!important;
    background:white!important;
    color:black!important;
  }
  a{
    color:black!important;
    text-decoration:underline;
  }
}


/* V22 Gallery and showcase */
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin:22px 0 18px;
}
.section-heading h2{
  margin:0;
  font:800 clamp(28px,4vw,46px) var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.section-heading a{
  color:#22c7ff;
  border:1px solid rgba(34,199,255,.4);
  border-radius:5px;
  padding:10px 18px;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.home-gallery{
  padding:8px 0 28px;
}
.home-gallery-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1.25fr;
  gap:18px;
}
.home-shot{
  min-height:210px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(34,199,255,.22);
  background:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')) center/cover no-repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.home-shot:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(2,7,17,.86),rgba(2,7,17,.12));
}
.home-shot span{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  color:#eef7ff;
  font:800 22px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.05em;
  text-shadow:0 2px 12px #000;
}
.shot-space{background-image:var(--mmo-space-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:left center}
.shot-factory{background-image:var(--mmo-factory-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:32% center;border-color:rgba(245,158,11,.32)}
.shot-survival{background-image:var(--mmo-survival-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:64% center;border-color:rgba(138,92,255,.36)}
.shot-fantasy{background-image:var(--mmo-fantasy-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:right center;border-color:rgba(220,160,50,.36)}

.gallery-filter{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:34px 0 0;
}
.gallery-filter span{
  padding:10px 16px;
  border:1px solid rgba(34,199,255,.24);
  background:rgba(34,199,255,.05);
  color:#cfe3f8;
  border-radius:999px;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.gallery-filter span:first-child{
  color:white;
  background:linear-gradient(135deg,#5862ff,#1473ff);
  border-color:transparent;
}
.mmo-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding:24px 0 34px;
}
.mmo-gallery-item{
  min-height:280px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(34,199,255,.24);
  background:linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.mmo-gallery-item a{
  display:block;
  height:100%;
  min-height:280px;
  position:relative;
}
.mmo-gallery-item img,
.placeholder-art{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, filter .35s ease;
}
.mmo-gallery-item:hover img,
.mmo-gallery-item:hover .placeholder-art{
  transform:scale(1.045);
  filter:saturate(1.14) contrast(1.06);
}
.mmo-gallery-item span{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:42px 22px 20px;
  background:linear-gradient(to top,rgba(2,7,17,.94),rgba(2,7,17,0));
}
.mmo-gallery-item strong{
  display:block;
  color:#eef7ff;
  font:800 24px var(--font-head);
  text-transform:uppercase;
}
.mmo-gallery-item small{
  color:#b9cbe0;
  line-height:1.45;
}
.placeholder-art{
  background:
    radial-gradient(circle at 70% 24%,rgba(34,199,255,.22),transparent 28%),
    var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')) center/cover no-repeat;
}
.placeholder.space .placeholder-art{background-image:var(--mmo-space-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:left center}
.placeholder.factory .placeholder-art{background-image:var(--mmo-factory-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:32% center}
.placeholder.survival .placeholder-art{background-image:var(--mmo-survival-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:64% center}
.placeholder.fantasy .placeholder-art{background-image:var(--mmo-fantasy-bg, var(--mmo-hero-image, url('../images/hero-mmo-reference.webp')));background-position:right center}
.placeholder.event .placeholder-art{background-image:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp'));background-position:center}
.placeholder.build .placeholder-art{background-image:var(--mmo-hero-image, url('../images/hero-mmo-reference.webp'));background-position:bottom center}
.gallery-cta{
  padding-bottom:60px;
}

@media(max-width:1100px){
  .home-gallery-grid,
  .mmo-gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .section-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .home-gallery-grid,
  .mmo-gallery-grid{
    grid-template-columns:1fr;
  }
  .home-gallery,
  .gallery-filter,
  .mmo-gallery-grid,
  .gallery-cta{
    width:min(100% - 28px, 1420px);
  }
  .home-shot,
  .mmo-gallery-item,
  .mmo-gallery-item a,
  .mmo-gallery-item img,
  .placeholder-art{
    min-height:230px;
  }
}


/* V23 Events CPT */
.event-board{
  padding:36px 0 0;
}
.event-timeline{
  display:grid;
  gap:16px;
}
.event-timeline-card{
  display:grid;
  grid-template-columns:220px 1fr auto;
  gap:22px;
  align-items:center;
  padding:22px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.1),transparent 36%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.event-date-badge{
  padding:18px;
  border:1px solid rgba(34,199,255,.22);
  background:rgba(34,199,255,.055);
}
.event-date-badge strong{
  display:block;
  color:#eef7ff;
  font:800 19px var(--font-head);
  text-transform:uppercase;
}
.event-date-badge span{
  display:block;
  margin-top:8px;
  color:#22c7ff;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.event-info h2{
  margin:0 0 8px;
  font:800 26px var(--font-head);
  text-transform:uppercase;
}
.event-info p{
  margin:0 0 8px;
  color:#b9cbe0;
  line-height:1.55;
}
.event-info small{
  color:#8fa4bd;
}
.event-link{
  color:#22c7ff;
  border:1px solid currentColor;
  border-radius:5px;
  padding:10px 18px;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.event-empty{
  text-align:center;
}
.event-detail-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
  padding:36px 0 60px;
}
.event-sidebar{
  align-self:start;
}
.event-meta-list{
  display:grid;
  gap:12px;
  margin:20px 0;
}
.event-meta-list span{
  display:grid;
  gap:6px;
  padding:14px;
  background:rgba(34,199,255,.05);
  border:1px solid rgba(34,199,255,.16);
  color:#d8e6f7;
}
.event-meta-list strong{
  color:#22c7ff;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.single-event-page .page-hero:before,
.event-archive-page .page-hero:before{
  opacity:.32;
}

@media(max-width:900px){
  .event-timeline-card{
    grid-template-columns:1fr;
  }
  .event-link{
    justify-self:start;
  }
  .event-detail-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .event-board,
  .event-detail-layout{
    width:min(100% - 28px, 1420px);
  }
}


/* V24 Live server status */
.live-server-list.is-loading,
.server-live-grid.is-loading{
  opacity:.62;
  position:relative;
}
.live-status-row.is-online strong{
  color:#25ef7a;
}
.live-status-row.is-offline strong{
  color:#ff5b6e;
}
.server-refresh-button{
  cursor:pointer;
  font-family:var(--font-head);
}
button.panel-link{
  width:100%;
  color:#22c7ff;
  background:transparent;
}
.section-refresh{
  color:#22c7ff;
  border:1px solid rgba(34,199,255,.4);
  border-radius:5px;
  padding:10px 18px;
  background:rgba(34,199,255,.04);
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.server-live-section{
  padding:36px 0 0;
}
.server-live-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.server-live-card{
  min-height:300px;
  padding:26px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.server-live-card.is-offline{
  border-color:rgba(255,91,110,.28);
}
.server-live-card small{
  display:block;
  color:#22c7ff;
  font:800 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.server-live-card h2{
  margin:10px 0 16px;
  font:800 25px var(--font-head);
  text-transform:uppercase;
  line-height:1.1;
}
.server-pulse{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:#25ef7a;
  font:800 15px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.is-offline .server-pulse{
  color:#ff5b6e;
}
.server-pulse span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#25ef7a;
  box-shadow:0 0 16px #25ef7a;
  animation:serverPulse 1.8s ease-in-out infinite;
}
.is-offline .server-pulse span{
  background:#ff5b6e;
  box-shadow:0 0 16px #ff5b6e;
  animation:none;
}
.server-live-card dl{
  margin:0;
  display:grid;
  gap:10px;
}
.server-live-card dl div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid rgba(178,221,255,.1);
}
.server-live-card dt{
  color:#8fa4bd;
  font-size:13px;
}
.server-live-card dd{
  margin:0;
  color:#eaf5ff;
  font-weight:800;
  text-align:right;
  word-break:break-word;
}
.server-map,
.server-error{
  margin:14px 0 0;
  color:#aebfd5;
  font-size:13px;
  line-height:1.45;
}
.server-error{
  color:#ff9aa8;
}
.server-help{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding:28px 0 60px;
}
@keyframes serverPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.65}
}

@media(max-width:1180px){
  .server-live-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:720px){
  .server-live-grid,
  .server-help{
    grid-template-columns:1fr;
  }
  .server-live-section,
  .server-help{
    width:min(100% - 28px, 1420px);
  }
}


/* V25 Animated live server status */
.live-server-panel h2,
.server-live-section .section-heading h2{
  position:relative;
}
.live-server-panel h2:after,
.server-live-section .section-heading h2:after{
  content:"LIVE";
  display:inline-grid;
  place-items:center;
  margin-left:12px;
  padding:3px 8px;
  border:1px solid rgba(37,239,122,.42);
  border-radius:999px;
  color:#25ef7a;
  background:rgba(37,239,122,.08);
  font:800 10px var(--font-logo);
  letter-spacing:.12em;
  vertical-align:middle;
  box-shadow:0 0 16px rgba(37,239,122,.22);
  animation:liveBadgePulse 2s ease-in-out infinite;
}
.live-server-list,
.server-live-grid{
  position:relative;
  overflow:hidden;
}
.live-server-list:before,
.server-live-grid:before{
  content:"";
  position:absolute;
  z-index:8;
  left:-45%;
  top:0;
  width:42%;
  height:100%;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,199,255,.24),rgba(255,255,255,.12),transparent);
  transform:skewX(-18deg);
}
.live-server-list.is-loading:before,
.server-live-grid.is-loading:before{
  opacity:1;
  animation:serverScanSweep 1.05s ease-in-out infinite;
}
.live-status-row{
  position:relative;
  overflow:hidden;
}
.live-status-row:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  background:#25ef7a;
  box-shadow:0 0 12px #25ef7a;
  animation:serverDotPulse 1.65s ease-in-out infinite;
}
.live-status-row.is-offline:before{
  background:#ff5b6e;
  box-shadow:0 0 12px #ff5b6e;
  animation:serverOfflineBlink 2.4s ease-in-out infinite;
}
.live-status-row span{
  padding-left:16px;
}
.live-status-row.is-new{
  animation:statusRowIn .42s ease both;
}
.live-status-row.is-online{
  background:linear-gradient(90deg,rgba(37,239,122,.05),transparent 48%);
}
.live-status-row.is-offline{
  background:linear-gradient(90deg,rgba(255,91,110,.055),transparent 48%);
}
.server-live-card{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.server-live-card:hover{
  transform:translateY(-4px);
}
.server-live-card.is-new{
  animation:serverCardIn .48s ease both;
}
.server-live-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.0;
  background:radial-gradient(circle at 78% 18%,rgba(37,239,122,.24),transparent 28%);
  transition:opacity .25s ease;
}
.server-live-card.is-online:before{
  opacity:.72;
  animation:onlineAura 3.4s ease-in-out infinite;
}
.server-live-card.is-offline:before{
  opacity:.52;
  background:radial-gradient(circle at 78% 18%,rgba(255,91,110,.22),transparent 30%);
}
.server-live-card.is-online{
  box-shadow:0 0 26px rgba(0,0,0,.28), 0 0 28px rgba(37,239,122,.08), inset 0 0 36px rgba(37,239,122,.035);
}
.server-live-card.is-offline{
  box-shadow:0 0 26px rgba(0,0,0,.28), 0 0 28px rgba(255,91,110,.08), inset 0 0 36px rgba(255,91,110,.035);
}
.server-pulse{
  position:relative;
}
.server-pulse:after{
  content:"";
  display:inline-block;
  width:28px;
  height:8px;
  margin-left:2px;
  background:linear-gradient(90deg,rgba(37,239,122,.15),rgba(37,239,122,.7),rgba(37,239,122,.15));
  mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  animation:signalBars 1.4s ease-in-out infinite;
}
.is-offline .server-pulse:after{
  background:linear-gradient(90deg,rgba(255,91,110,.15),rgba(255,91,110,.7),rgba(255,91,110,.15));
  animation:signalBars 2.6s ease-in-out infinite;
}
.server-refresh-button{
  position:relative;
  overflow:hidden;
}
.server-refresh-button:before{
  content:"";
  position:absolute;
  left:-42%;
  top:0;
  width:38%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(34,199,255,.24),transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.server-refresh-button.is-loading:before{
  opacity:1;
  animation:serverScanSweep 1s linear infinite;
}
.server-refresh-button.is-loading{
  pointer-events:none;
  color:#9beaff;
  border-color:rgba(34,199,255,.72);
  box-shadow:0 0 22px rgba(34,199,255,.2);
}
.server-live-card:nth-child(2).is-new,
.live-status-row:nth-child(2).is-new{animation-delay:.04s}
.server-live-card:nth-child(3).is-new,
.live-status-row:nth-child(3).is-new{animation-delay:.08s}
.server-live-card:nth-child(4).is-new,
.live-status-row:nth-child(4).is-new{animation-delay:.12s}
.server-live-card:nth-child(5).is-new,
.live-status-row:nth-child(5).is-new{animation-delay:.16s}
.server-live-card:nth-child(6).is-new,
.live-status-row:nth-child(6).is-new{animation-delay:.2s}
.server-live-card:nth-child(7).is-new,
.live-status-row:nth-child(7).is-new{animation-delay:.24s}
.server-live-card:nth-child(8).is-new,
.live-status-row:nth-child(8).is-new{animation-delay:.28s}

@keyframes liveBadgePulse{
  0%,100%{opacity:.78;box-shadow:0 0 12px rgba(37,239,122,.18)}
  50%{opacity:1;box-shadow:0 0 24px rgba(37,239,122,.42)}
}
@keyframes serverScanSweep{
  from{left:-45%}
  to{left:115%}
}
@keyframes serverDotPulse{
  0%,100%{transform:translateY(-50%) scale(1);opacity:1}
  50%{transform:translateY(-50%) scale(1.55);opacity:.64}
}
@keyframes serverOfflineBlink{
  0%,70%,100%{opacity:1}
  78%,88%{opacity:.38}
}
@keyframes statusRowIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes serverCardIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes onlineAura{
  0%,100%{opacity:.46}
  50%{opacity:.82}
}
@keyframes signalBars{
  0%,100%{opacity:.35;transform:scaleX(.72)}
  50%{opacity:1;transform:scaleX(1)}
}

@media (prefers-reduced-motion: reduce){
  .live-server-panel h2:after,
  .server-live-section .section-heading h2:after,
  .live-server-list.is-loading:before,
  .server-live-grid.is-loading:before,
  .live-status-row:before,
  .live-status-row.is-new,
  .server-live-card.is-new,
  .server-live-card.is-online:before,
  .server-pulse:after,
  .server-refresh-button.is-loading:before{
    animation:none!important;
  }
  .server-live-card:hover{
    transform:none;
  }
}


/* V26 Red Alert offline state */
.live-status-row.is-offline,
.server-live-card.is-offline{
  position:relative;
}
.live-status-row.is-offline{
  border-bottom-color:rgba(255,38,58,.28);
  background:
    repeating-linear-gradient(135deg,rgba(255,38,58,.10) 0 8px,rgba(255,38,58,.02) 8px 16px),
    linear-gradient(90deg,rgba(255,38,58,.16),transparent 56%)!important;
  box-shadow:inset 0 0 18px rgba(255,38,58,.08);
  animation:redAlertRow 2.2s ease-in-out infinite;
}
.live-status-row.is-offline strong{
  color:#ff3348;
  text-shadow:0 0 10px rgba(255,38,58,.85);
}
.live-status-row.is-offline small:before{
  content:"RED ALERT · ";
  color:#ff3348;
  font-weight:900;
}
.server-live-card.is-offline{
  border-color:rgba(255,38,58,.58)!important;
  background:
    repeating-linear-gradient(135deg,rgba(255,38,58,.08) 0 10px,rgba(0,0,0,0) 10px 22px),
    radial-gradient(circle at 78% 18%,rgba(255,38,58,.24),transparent 34%),
    linear-gradient(145deg,rgba(45,5,10,.96),rgba(8,2,8,.98))!important;
  box-shadow:
    0 0 28px rgba(0,0,0,.35),
    0 0 36px rgba(255,38,58,.22),
    inset 0 0 44px rgba(255,38,58,.09)!important;
  animation:redAlertCard 2.35s ease-in-out infinite;
}
.server-live-card.is-offline:after{
  content:"RED ALERT";
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  padding:5px 10px;
  color:#fff;
  background:rgba(255,38,58,.16);
  border:1px solid rgba(255,38,58,.72);
  border-radius:999px;
  font:900 10px var(--font-logo);
  letter-spacing:.14em;
  text-shadow:0 0 10px rgba(255,38,58,.9);
  box-shadow:0 0 18px rgba(255,38,58,.32), inset 0 0 12px rgba(255,38,58,.14);
  animation:redAlertBadge 1.15s steps(2,end) infinite;
}
.server-live-card.is-offline .server-pulse{
  color:#ff3348!important;
  text-shadow:0 0 14px rgba(255,38,58,.9);
}
.server-live-card.is-offline .server-pulse span{
  position:relative;
  width:14px;
  height:14px;
  background:#ff263a!important;
  box-shadow:0 0 18px #ff263a,0 0 36px rgba(255,38,58,.58)!important;
  animation:redAlertBeacon 1.15s ease-in-out infinite!important;
}
.server-live-card.is-offline .server-pulse span:after{
  content:"";
  position:absolute;
  inset:-9px;
  border:1px solid rgba(255,38,58,.5);
  border-radius:50%;
  animation:redAlertRing 1.15s ease-out infinite;
}
.server-live-card.is-offline h2{
  color:#fff3f4;
  text-shadow:0 0 14px rgba(255,38,58,.52);
}
.server-live-card.is-offline small{
  color:#ff9aa6;
}
.server-live-card.is-offline dl div{
  border-bottom-color:rgba(255,148,160,.18);
}
.server-live-card.is-offline dt{
  color:#ff9aa6;
}
.server-live-card.is-offline dd{
  color:#fff0f2;
}
.server-live-card.is-offline .server-error{
  color:#ffb4bd;
  border:1px solid rgba(255,38,58,.24);
  background:rgba(255,38,58,.08);
  padding:10px 12px;
  border-radius:6px;
}
.server-live-card.is-offline .server-error:before{
  content:"⚠ ";
}
.live-status-row.is-offline:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,38,58,.18),transparent);
  transform:translateX(-120%) skewX(-15deg);
  animation:redAlertSweep 2.4s ease-in-out infinite;
}
.live-status-row.is-offline:before{
  background:#ff263a!important;
  box-shadow:0 0 14px #ff263a,0 0 28px rgba(255,38,58,.55)!important;
  animation:redAlertBeacon 1.15s ease-in-out infinite!important;
}
.is-offline .server-pulse:after{
  background:linear-gradient(90deg,rgba(255,38,58,.12),rgba(255,38,58,.95),rgba(255,38,58,.12))!important;
  animation:redAlertSignal 1.15s ease-in-out infinite!important;
}

@keyframes redAlertCard{
  0%,100%{filter:brightness(1);box-shadow:0 0 28px rgba(0,0,0,.35),0 0 28px rgba(255,38,58,.18),inset 0 0 44px rgba(255,38,58,.07)}
  50%{filter:brightness(1.16);box-shadow:0 0 28px rgba(0,0,0,.35),0 0 56px rgba(255,38,58,.42),inset 0 0 60px rgba(255,38,58,.14)}
}
@keyframes redAlertRow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22)}
}
@keyframes redAlertBeacon{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.45);opacity:.72}
}
@keyframes redAlertRing{
  0%{transform:scale(.65);opacity:.85}
  100%{transform:scale(1.8);opacity:0}
}
@keyframes redAlertBadge{
  0%,100%{opacity:1}
  50%{opacity:.42}
}
@keyframes redAlertSweep{
  0%,52%{transform:translateX(-120%) skewX(-15deg);opacity:0}
  60%{opacity:1}
  88%,100%{transform:translateX(120%) skewX(-15deg);opacity:0}
}
@keyframes redAlertSignal{
  0%,100%{opacity:.35;transform:scaleX(.58)}
  50%{opacity:1;transform:scaleX(1.18)}
}

@media (prefers-reduced-motion: reduce){
  .live-status-row.is-offline,
  .server-live-card.is-offline,
  .server-live-card.is-offline:after,
  .server-live-card.is-offline .server-pulse span,
  .server-live-card.is-offline .server-pulse span:after,
  .live-status-row.is-offline:after,
  .live-status-row.is-offline:before,
  .is-offline .server-pulse:after{
    animation:none!important;
  }
}


/* V27 Shortcodes */
.shortcode-server-grid,
.shortcode-events,
.shortcode-games-grid{
  margin:24px 0;
}
.shortcode-refresh{
  margin:12px 0 24px;
}
.shortcode-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  margin:28px 0;
  padding:30px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  border:1px solid rgba(34,199,255,.24);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.shortcode-cta h2{
  margin:0 0 10px;
  font:800 clamp(28px,4vw,44px) var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.shortcode-cta p:not(.eyebrow){
  margin:0;
  color:#b9cbe0;
  line-height:1.6;
}
.content-panel .shortcode-games-grid,
.content-panel .shortcode-server-grid{
  width:100%;
}
.content-panel .shortcode-games-grid{
  grid-template-columns:repeat(2,1fr);
}
.content-panel .shortcode-server-grid{
  grid-template-columns:repeat(2,1fr);
}
@media(max-width:900px){
  .shortcode-cta{
    align-items:flex-start;
    flex-direction:column;
  }
  .content-panel .shortcode-games-grid,
  .content-panel .shortcode-server-grid{
    grid-template-columns:1fr;
  }
}


/* V32 Customizer style controls */
body.mmo-no-animations *,
body.mmo-no-animations *:before,
body.mmo-no-animations *:after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
body.mmo-no-red-alert .server-live-card.is-offline,
body.mmo-no-red-alert .live-status-row.is-offline{
  background:
    radial-gradient(circle at top right,rgba(255,91,110,.10),transparent 34%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98))!important;
  box-shadow:0 0 26px rgba(0,0,0,.28), inset 0 0 36px rgba(255,91,110,.035)!important;
  border-color:rgba(255,91,110,.28)!important;
}
body.mmo-no-red-alert .server-live-card.is-offline:after,
body.mmo-no-red-alert .live-status-row.is-offline:after,
body.mmo-no-red-alert .server-live-card.is-offline .server-pulse span:after{
  content:none!important;
  display:none!important;
}
body.mmo-no-red-alert .live-status-row.is-offline small:before{
  content:""!important;
}
body.mmo-no-red-alert .server-live-card.is-offline .server-pulse{
  color:#ff5b6e!important;
}


/* V33 Cinematic WOW animations */
body.mmo-front-page.mmo-intro-enabled:not(.mmo-intro-done){
  overflow:hidden;
}
.mmo-cinematic-intro{
  position:fixed;
  z-index:100000;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(34,199,255,.18),transparent 26%),
    radial-gradient(circle at 30% 65%,rgba(138,92,255,.13),transparent 28%),
    linear-gradient(180deg,#020711,#010309);
  color:#eef7ff;
  pointer-events:none;
  animation:introFadeOut .8s ease 1.75s forwards;
}
.intro-grid{
  position:absolute;
  inset:-20%;
  background:
    linear-gradient(rgba(34,199,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,199,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  transform:perspective(520px) rotateX(64deg) translateY(28%);
  transform-origin:center bottom;
  animation:introGridMove 1.8s linear infinite;
  opacity:.38;
}
.intro-core{
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  position:relative;
  z-index:2;
  font:800 66px var(--font-logo);
  clip-path:polygon(50% 0,96% 22%,78% 100%,50% 74%,22% 100%,4% 22%);
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(34,199,255,.74),rgba(8,21,48,.92));
  box-shadow:0 0 55px rgba(34,199,255,.8),0 0 130px rgba(68,108,255,.36);
  animation:introCore .95s cubic-bezier(.2,.85,.2,1) both, introCorePulse 1.35s ease-in-out infinite .95s;
}
.intro-core:before{
  content:"";
  position:absolute;
  inset:-42px;
  border:1px solid rgba(34,199,255,.34);
  border-radius:50%;
  animation:introRing 1.4s ease-out infinite;
}
.intro-title{
  position:absolute;
  z-index:3;
  top:calc(50% + 86px);
  font:800 clamp(28px,5vw,62px) var(--font-logo);
  letter-spacing:.14em;
  text-shadow:0 0 25px rgba(34,199,255,.78);
  animation:introTitleIn .72s ease .42s both;
}
.intro-scan{
  position:absolute;
  z-index:3;
  top:calc(50% + 162px);
  color:#9feaff;
  font:800 13px var(--font-head);
  letter-spacing:.24em;
  text-transform:uppercase;
  animation:introTitleIn .72s ease .64s both, introScanBlink .48s steps(2,end) infinite 1.05s;
}
.reference-hero:after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 32%,rgba(34,199,255,.18),transparent 18%),
    radial-gradient(circle at 48% 44%,rgba(255,255,255,.10),transparent 12%),
    radial-gradient(circle at 72% 26%,rgba(245,158,11,.13),transparent 20%),
    radial-gradient(circle at 84% 48%,rgba(138,92,255,.13),transparent 20%);
  mix-blend-mode:screen;
  opacity:.52;
  animation:heroAuraShift 9s ease-in-out infinite;
}
.reference-hero .hero-bg{
  transform:scale(1.06) translate3d(var(--mouse-x,0),var(--mouse-y,0),0);
  transition:filter .35s ease;
}
.reference-hero .hero-bg:before{
  content:"";
}
.hero-scanlines{
  opacity:.28;
}
.hero-content{
  transform:translateY(-46px) translate3d(var(--mouse-x,0),var(--mouse-y,0),0);
}
body.mmo-animations-ready .hero-emblem{
  animation:heroPulse 3s ease-in-out infinite, emblemHover 5.5s ease-in-out infinite, heroEmblemEntry .9s cubic-bezier(.2,.85,.2,1) both;
}
body.mmo-animations-ready .hero h1{
  animation:heroTitleEntry .95s cubic-bezier(.2,.85,.2,1) .18s both, heroTextGlow 4.2s ease-in-out 1.2s infinite;
}
body.mmo-animations-ready .tagline{
  animation:heroLineEntry .8s ease .42s both;
}
body.mmo-animations-ready .subtitle{
  animation:heroLineEntry .8s ease .58s both;
}
body.mmo-animations-ready .hero-actions{
  animation:heroButtonsEntry .8s ease .74s both;
}
body.mmo-animations-ready .game-strip span{
  animation:gameLabelRise .72s ease both, gameLabelGlow 5s ease-in-out infinite;
}
body.mmo-animations-ready .game-strip span:nth-child(1){animation-delay:.9s,0s}
body.mmo-animations-ready .game-strip span:nth-child(2){animation-delay:1.02s,.35s}
body.mmo-animations-ready .game-strip span:nth-child(3){animation-delay:1.14s,.7s}
body.mmo-animations-ready .game-strip span:nth-child(4){animation-delay:1.26s,1.05s}
.btn{
  position:relative;
  overflow:hidden;
}
.btn:before{
  content:"";
  position:absolute;
  inset:0 auto 0 -55%;
  width:42%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  opacity:0;
  transition:opacity .18s ease;
}
.btn:hover:before{
  opacity:1;
  animation:buttonEnergySweep .72s ease;
}
.btn-primary:hover{
  box-shadow:0 0 36px rgba(65,111,255,.82),0 0 28px rgba(34,199,255,.46),inset 0 0 18px rgba(255,255,255,.12);
}
.game-card,
.panel,
.home-shot,
.server-live-card,
.world-card,
.event-card,
.step-card,
.contact-card,
.mmo-gallery-item{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease;
}
.game-card:hover,
.panel:hover,
.home-shot:hover,
.server-live-card:hover,
.world-card:hover,
.event-card:hover,
.step-card:hover,
.contact-card:hover,
.mmo-gallery-item:hover{
  transform:translateY(-6px);
  filter:brightness(1.06);
}
.game-card:hover{
  box-shadow:0 18px 60px rgba(0,0,0,.28),0 0 32px rgba(34,199,255,.16);
}
.panel:hover{
  box-shadow:0 18px 60px rgba(0,0,0,.28),0 0 30px rgba(34,199,255,.13),inset 0 0 34px rgba(34,199,255,.05);
}
.mmo-reveal{
  opacity:0;
  transform:translateY(24px) scale(.985);
  filter:blur(4px);
}
.mmo-reveal.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
  transition:
    opacity .72s ease var(--reveal-delay,0ms),
    transform .72s cubic-bezier(.2,.85,.2,1) var(--reveal-delay,0ms),
    filter .72s ease var(--reveal-delay,0ms),
    box-shadow .28s ease,
    border-color .28s ease;
}
.site-header{
  animation:headerDrop .72s ease .2s both;
}
.reference-hero .hero-down{
  filter:drop-shadow(0 0 16px rgba(34,199,255,.7));
}
.home-gallery-grid .home-shot:after,
.game-card:after,
.panel:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 42%,transparent 58%);
  transform:translateX(-130%) skewX(-12deg);
  opacity:0;
}
.home-gallery-grid .home-shot:hover:after,
.game-card:hover:after,
.panel:hover:after{
  opacity:1;
  animation:cardSheen .9s ease;
}

@keyframes introFadeOut{
  to{opacity:0;visibility:hidden}
}
@keyframes introGridMove{
  from{background-position:0 0,0 0}
  to{background-position:0 42px,42px 0}
}
@keyframes introCore{
  from{opacity:0;transform:scale(.55) rotate(-18deg);filter:blur(8px)}
  to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
}
@keyframes introCorePulse{
  0%,100%{box-shadow:0 0 55px rgba(34,199,255,.72),0 0 130px rgba(68,108,255,.32)}
  50%{box-shadow:0 0 88px rgba(34,199,255,1),0 0 180px rgba(68,108,255,.5)}
}
@keyframes introRing{
  0%{transform:scale(.72);opacity:.72}
  100%{transform:scale(1.55);opacity:0}
}
@keyframes introTitleIn{
  from{opacity:0;transform:translateY(18px);filter:blur(8px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes introScanBlink{
  0%,100%{opacity:1}
  50%{opacity:.36}
}
@keyframes heroAuraShift{
  0%,100%{opacity:.42;filter:hue-rotate(0deg)}
  50%{opacity:.68;filter:hue-rotate(18deg)}
}
@keyframes heroEmblemEntry{
  from{opacity:0;transform:translateY(-20px) scale(.72) rotate(-8deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes heroTitleEntry{
  from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(10px);letter-spacing:.16em}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);letter-spacing:.04em}
}
@keyframes heroTextGlow{
  0%,100%{text-shadow:0 0 8px rgba(255,255,255,.35),0 0 34px rgba(0,137,255,.55),0 8px 20px rgba(0,0,0,.85)}
  50%{text-shadow:0 0 12px rgba(255,255,255,.55),0 0 48px rgba(34,199,255,.78),0 8px 20px rgba(0,0,0,.85)}
}
@keyframes heroLineEntry{
  from{opacity:0;transform:translateY(18px);filter:blur(7px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroButtonsEntry{
  from{opacity:0;transform:translateY(22px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes gameLabelRise{
  from{opacity:0;transform:translateY(22px);filter:blur(7px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes buttonEnergySweep{
  from{left:-55%}
  to{left:125%}
}
@keyframes headerDrop{
  from{opacity:0;transform:translateY(-18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes cardSheen{
  from{transform:translateX(-130%) skewX(-12deg)}
  to{transform:translateX(130%) skewX(-12deg)}
}

/* animation safety */
body.mmo-no-animations .mmo-cinematic-intro,
body:not(.mmo-intro-enabled) .mmo-cinematic-intro{
  display:none!important;
}
body.mmo-no-animations .mmo-reveal{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
@media (prefers-reduced-motion: reduce){
  .mmo-cinematic-intro{
    display:none!important;
  }
  .mmo-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}
@media(max-width:720px){
  .mmo-cinematic-intro{
    display:none;
  }
  body.mmo-front-page.mmo-intro-enabled:not(.mmo-intro-done){
    overflow:auto;
  }
  .reference-hero:after{
    opacity:.32;
  }
}


/* V34 Visual Boost: stronger hero colors + reference-style game cards */
:root{
  --mmo-hero-boost-image:url('../images/hero-mmo-reference-boost.webp');
}

/* Use boosted built-in hero unless a custom hero artwork is set through Customizer */
body:not(.custom-background) .hero-bg{
  background-image:var(--mmo-hero-image, var(--mmo-hero-boost-image))!important;
}

/* Make the hero closer to the supplied reference: stronger color, less muddy overlay */
.reference-hero{
  min-height:640px;
  background:#020711;
}
.reference-hero .hero-bg{
  filter:saturate(1.45) contrast(1.18) brightness(1.08)!important;
  background-position:center top;
}
.hero-vignette{
  background:
    radial-gradient(circle at 50% 39%,rgba(34,199,255,.08) 0,rgba(34,199,255,.03) 23%,rgba(0,0,0,.08) 44%,rgba(0,0,0,.42) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.0),rgba(2,7,17,.04) 46%,rgba(2,7,17,.58) 100%)!important;
}
.reference-hero:after{
  opacity:.74;
  background:
    radial-gradient(circle at 18% 34%,rgba(34,199,255,.24),transparent 20%),
    radial-gradient(circle at 38% 34%,rgba(245,158,11,.20),transparent 19%),
    radial-gradient(circle at 58% 35%,rgba(138,92,255,.24),transparent 20%),
    radial-gradient(circle at 82% 36%,rgba(220,160,50,.24),transparent 21%),
    linear-gradient(90deg,rgba(34,199,255,.10),transparent 25%,rgba(138,92,255,.10) 65%,rgba(220,160,50,.10))!important;
}
.hero-scanlines{
  opacity:.17!important;
}
.hero-content{
  text-shadow:0 4px 22px rgba(0,0,0,.96),0 0 30px rgba(34,199,255,.42);
}
.hero h1{
  filter:drop-shadow(0 0 18px rgba(34,199,255,.46));
}
.hero-emblem{
  box-shadow:0 0 56px rgba(34,199,255,.95),0 0 110px rgba(68,108,255,.35)!important;
}
.game-strip{
  bottom:36px;
}
.game-strip span{
  text-shadow:0 4px 18px #000,0 0 18px rgba(255,255,255,.22);
}

/* Home game buttons/cards like the reference */
.game-cards{
  width:min(1490px,94vw);
  gap:20px;
  margin-top:14px;
  padding-bottom:20px;
}
.game-card{
  min-height:142px;
  grid-template-columns:74px 1fr;
  gap:18px;
  padding:24px 26px;
  isolation:isolate;
  background:#040b15!important;
  border-width:1px;
  box-shadow:0 0 26px rgba(0,0,0,.32), inset 0 0 30px rgba(34,199,255,.035);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px));
}
.game-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.55;
  background-image:var(--mmo-hero-image, var(--mmo-hero-boost-image));
  background-size:cover;
  filter:saturate(1.28) contrast(1.15) brightness(.92);
}
.game-card:after{
  z-index:-1;
  content:"";
  position:absolute;
  inset:0;
  opacity:1;
  transform:none;
  background:
    linear-gradient(90deg,rgba(2,7,17,.78),rgba(2,7,17,.48) 54%,rgba(2,7,17,.72)),
    radial-gradient(circle at right,rgba(34,199,255,.18),transparent 45%);
}
.card-space{
  border-color:rgba(34,199,255,.58);
}
.card-space:before{
  background-position:left center;
}
.card-space:after{
  background:
    linear-gradient(90deg,rgba(2,12,24,.82),rgba(2,12,24,.48) 54%,rgba(2,12,24,.76)),
    radial-gradient(circle at right,rgba(34,199,255,.26),transparent 48%);
}
.card-factory{
  border-color:rgba(245,158,11,.58);
}
.card-factory:before{
  background-position:32% center;
}
.card-factory:after{
  background:
    linear-gradient(90deg,rgba(17,9,2,.84),rgba(17,9,2,.48) 54%,rgba(17,9,2,.76)),
    radial-gradient(circle at right,rgba(245,158,11,.27),transparent 48%);
}
.card-survival{
  border-color:rgba(138,92,255,.62);
}
.card-survival:before{
  background-position:64% center;
}
.card-survival:after{
  background:
    linear-gradient(90deg,rgba(10,5,24,.84),rgba(10,5,24,.48) 54%,rgba(10,5,24,.76)),
    radial-gradient(circle at right,rgba(138,92,255,.28),transparent 48%);
}
.card-fantasy{
  border-color:rgba(220,160,50,.62);
}
.card-fantasy:before{
  background-position:right center;
}
.card-fantasy:after{
  background:
    linear-gradient(90deg,rgba(19,10,2,.84),rgba(19,10,2,.48) 54%,rgba(19,10,2,.76)),
    radial-gradient(circle at right,rgba(220,160,50,.27),transparent 48%);
}
.game-card h2{
  margin-bottom:6px;
  font-size:25px;
  line-height:1;
  text-shadow:0 3px 12px rgba(0,0,0,.9);
}
.game-card p{
  max-width:260px;
  color:#d9e8f8;
  font-size:14px;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.game-card a{
  margin-top:2px;
  background:rgba(0,0,0,.32);
  box-shadow:0 0 18px rgba(34,199,255,.12);
}
.card-space a{
  color:#22c7ff;
  box-shadow:0 0 18px rgba(34,199,255,.16);
}
.card-factory a{
  color:#f59e0b;
  box-shadow:0 0 18px rgba(245,158,11,.16);
}
.card-survival a{
  color:#b17cff;
  box-shadow:0 0 18px rgba(138,92,255,.18);
}
.card-fantasy a{
  color:#f4bf52;
  box-shadow:0 0 18px rgba(220,160,50,.18);
}
.game-icon{
  width:62px;
  height:62px;
  font-size:25px;
  background:rgba(5,20,36,.78);
  box-shadow:0 0 18px rgba(34,199,255,.18), inset 0 0 18px rgba(34,199,255,.08);
}
.card-space .game-icon{
  color:#e9fbff;
  border-color:rgba(34,199,255,.58);
  background:linear-gradient(145deg,rgba(8,40,70,.85),rgba(4,14,28,.88));
}
.card-factory .game-icon{
  color:#ffad24;
  border-color:rgba(245,158,11,.58);
  background:linear-gradient(145deg,rgba(60,32,4,.85),rgba(18,9,2,.88));
}
.card-survival .game-icon{
  color:#a879ff;
  border-color:rgba(138,92,255,.62);
  background:linear-gradient(145deg,rgba(42,18,88,.85),rgba(13,5,32,.88));
}
.card-fantasy .game-icon{
  color:#f4bf52;
  border-color:rgba(220,160,50,.62);
  background:linear-gradient(145deg,rgba(66,39,6,.85),rgba(20,10,2,.88));
}
.game-card:hover{
  transform:translateY(-8px);
  filter:brightness(1.14) saturate(1.1);
}
.game-card:hover:before{
  opacity:.72;
}
.card-space:hover{
  box-shadow:0 18px 55px rgba(0,0,0,.36),0 0 34px rgba(34,199,255,.28),inset 0 0 30px rgba(34,199,255,.055);
}
.card-factory:hover{
  box-shadow:0 18px 55px rgba(0,0,0,.36),0 0 34px rgba(245,158,11,.24),inset 0 0 30px rgba(245,158,11,.055);
}
.card-survival:hover{
  box-shadow:0 18px 55px rgba(0,0,0,.36),0 0 34px rgba(138,92,255,.28),inset 0 0 30px rgba(138,92,255,.055);
}
.card-fantasy:hover{
  box-shadow:0 18px 55px rgba(0,0,0,.36),0 0 34px rgba(220,160,50,.24),inset 0 0 30px rgba(220,160,50,.055);
}

/* Make dashboard slightly closer to the darker reference */
.dashboard{
  width:min(1490px,94vw);
}
.panel{
  border-color:rgba(34,199,255,.28);
  background:linear-gradient(180deg,rgba(7,19,36,.96),rgba(2,8,18,.99));
}
.panel-link{
  background:rgba(0,0,0,.18);
}

@media(max-width:1100px){
  .reference-hero{
    min-height:610px;
  }
  .game-cards{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .reference-hero{
    min-height:560px;
  }
  .reference-hero .hero-bg{
    filter:saturate(1.25) contrast(1.1) brightness(.98)!important;
  }
  .game-cards{
    grid-template-columns:1fr;
    width:min(100% - 28px, 1490px);
  }
  .game-card{
    grid-template-columns:58px 1fr;
  }
}


/* V35 Textless Hero Artwork */
:root{
  --mmo-hero-textless-image:url('../images/hero-mmo-textless-boost.webp');
}

/* Use the new textless artwork as the default hero background */
.hero-bg,
.page-hero:before,
.game-detail:before,
.game-detail-bg,
.home-shot,
.placeholder-art{
  background-image:var(--mmo-hero-image, var(--mmo-hero-textless-image))!important;
}

/* Textless hero needs a cleaner typography layer because the image no longer contains baked-in branding */
.reference-hero{
  min-height:665px;
}
.reference-hero .hero-bg{
  background-image:var(--mmo-hero-image, var(--mmo-hero-textless-image))!important;
  background-position:center center;
  filter:saturate(1.35) contrast(1.13) brightness(1.02)!important;
}
.hero-vignette{
  background:
    radial-gradient(circle at 50% 45%,rgba(2,7,17,.10) 0,rgba(2,7,17,.18) 30%,rgba(0,0,0,.30) 62%,rgba(0,0,0,.70) 100%),
    linear-gradient(to bottom,rgba(2,7,17,.06),rgba(2,7,17,.02) 38%,rgba(2,7,17,.82) 100%)!important;
}
.reference-hero:after{
  background:
    radial-gradient(circle at 18% 34%,rgba(34,199,255,.24),transparent 20%),
    radial-gradient(circle at 38% 34%,rgba(245,158,11,.18),transparent 19%),
    radial-gradient(circle at 58% 35%,rgba(138,92,255,.24),transparent 20%),
    radial-gradient(circle at 82% 36%,rgba(220,160,50,.20),transparent 21%),
    linear-gradient(90deg,rgba(34,199,255,.08),transparent 28%,rgba(138,92,255,.08) 68%,rgba(220,160,50,.08))!important;
  opacity:.62;
}
.hero-content{
  margin-top:16px;
  transform:translateY(-36px) translate3d(var(--mouse-x,0),var(--mouse-y,0),0);
}
.hero-emblem{
  width:102px;
  height:102px;
  margin-bottom:14px;
}
.hero h1{
  font-size:clamp(54px,6.8vw,106px);
  line-height:.9;
  letter-spacing:.035em;
  background:linear-gradient(180deg,#ffffff 0%,#d7eaff 40%,#12bfff 74%,#226cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  text-shadow:none!important;
  filter:
    drop-shadow(0 5px 18px rgba(0,0,0,.95))
    drop-shadow(0 0 26px rgba(34,199,255,.55));
}
.tagline{
  color:#b7d4ff;
  text-shadow:0 4px 18px rgba(0,0,0,.96),0 0 18px rgba(34,199,255,.52);
}
.subtitle{
  color:#f4f8ff;
  text-shadow:0 3px 14px rgba(0,0,0,.95);
}
.hero-actions{
  margin-top:12px;
}
.game-strip{
  bottom:42px;
}
.game-strip span{
  padding:6px 10px;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.18),rgba(0,0,0,.08));
}

/* Cards use the textless image too, so there is no duplicated text/logo inside cards */
.game-card:before{
  background-image:var(--mmo-hero-image, var(--mmo-hero-textless-image))!important;
}
.card-space:before,
.shot-space,
.placeholder.space .placeholder-art,
.space-detail:before,
.space-detail .game-detail-bg{
  background-image:var(--mmo-space-bg, var(--mmo-hero-image, var(--mmo-hero-textless-image)))!important;
  background-position:left center;
}
.card-factory:before,
.shot-factory,
.placeholder.factory .placeholder-art,
.factory-detail:before,
.factory-detail .game-detail-bg{
  background-image:var(--mmo-factory-bg, var(--mmo-hero-image, var(--mmo-hero-textless-image)))!important;
  background-position:32% center;
}
.card-survival:before,
.shot-survival,
.placeholder.survival .placeholder-art,
.survival-detail:before,
.survival-detail .game-detail-bg{
  background-image:var(--mmo-survival-bg, var(--mmo-hero-image, var(--mmo-hero-textless-image)))!important;
  background-position:64% center;
}
.card-fantasy:before,
.shot-fantasy,
.placeholder.fantasy .placeholder-art,
.fantasy-detail:before,
.fantasy-detail .game-detail-bg{
  background-image:var(--mmo-fantasy-bg, var(--mmo-hero-image, var(--mmo-hero-textless-image)))!important;
  background-position:right center;
}

/* Cleaner mobile crop for textless artwork */
@media(max-width:720px){
  .reference-hero{
    min-height:590px;
  }
  .reference-hero .hero-bg{
    background-position:center center;
    filter:saturate(1.18) contrast(1.08) brightness(.94)!important;
  }
  .hero-content{
    transform:translateY(-8px);
  }
  .hero h1{
    font-size:42px;
  }
  .game-strip{
    display:none;
  }
}


/* V35.1 hard fix: default textless artwork must win when no Customizer image is selected.
   The PHP inline fallback now also points to hero-mmo-textless-boost.webp. */
.hero-bg,
.page-hero:before,
.game-detail:before,
.game-detail-bg{
  background-image:var(--mmo-hero-image, url('../images/hero-mmo-textless-boost.webp'))!important;
}


/* V36 Server Status Polish */
.live-server-panel{
  overflow:hidden;
}
.live-server-panel h2{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.live-server-panel h2:after{
  margin-left:0!important;
}
.live-server-list{
  display:grid;
  gap:10px;
  margin:18px 0;
  overflow:visible!important;
}
.live-server-panel .status-row,
.live-server-list .status-row,
.shortcode-server-status .status-row{
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:
    "name state players"
    "game game game";
  align-items:center;
  gap:6px 12px;
  position:relative;
  padding:13px 14px 12px 18px;
  border:1px solid rgba(34,199,255,.13);
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(34,199,255,.065),rgba(34,199,255,.025)),
    rgba(2,8,18,.54);
  overflow:hidden;
  box-shadow:inset 0 0 18px rgba(34,199,255,.025);
}
.live-server-panel .status-row:before,
.live-server-list .status-row:before,
.shortcode-server-status .status-row:before{
  left:8px;
  width:8px;
  height:8px;
}
.live-server-panel .status-row span,
.live-server-list .status-row span,
.shortcode-server-status .status-row span{
  grid-area:name;
  min-width:0;
  padding-left:12px;
  color:#eef7ff;
  font-weight:800;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
}
.live-server-panel .status-row strong,
.live-server-list .status-row strong,
.shortcode-server-status .status-row strong{
  grid-area:state;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:4px 9px;
  border-radius:999px;
  font:900 10px var(--font-logo);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.live-server-panel .status-row em,
.live-server-list .status-row em,
.shortcode-server-status .status-row em{
  grid-area:players;
  justify-self:end;
  min-width:32px;
  color:#dcecff;
  font-style:normal;
  font-weight:900;
  text-align:right;
  white-space:nowrap;
}
.live-server-panel .status-row small,
.live-server-list .status-row small,
.shortcode-server-status .status-row small{
  grid-area:game;
  display:flex;
  align-items:center;
  gap:7px;
  color:#8fa7c4;
  font:800 10px var(--font-head);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  padding-left:12px;
  opacity:.96;
}
.live-server-panel .status-row small:before,
.live-server-list .status-row small:before,
.shortcode-server-status .status-row small:before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
  opacity:.42;
}
.live-status-row.is-online{
  border-color:rgba(37,239,122,.24);
  background:
    radial-gradient(circle at 96% 50%,rgba(37,239,122,.13),transparent 42%),
    linear-gradient(90deg,rgba(37,239,122,.09),rgba(34,199,255,.025) 62%),
    rgba(2,8,18,.58)!important;
}
.live-status-row.is-online strong{
  color:#25ef7a!important;
  background:rgba(37,239,122,.10);
  border:1px solid rgba(37,239,122,.36);
  box-shadow:0 0 14px rgba(37,239,122,.13), inset 0 0 10px rgba(37,239,122,.06);
  text-shadow:0 0 8px rgba(37,239,122,.55);
}

/* Offline in the small panel: smoother red alert instead of a hard block */
.live-server-panel .live-status-row.is-offline,
.shortcode-server-status .live-status-row.is-offline{
  border-color:rgba(255,51,72,.30);
  background:
    linear-gradient(135deg,rgba(255,51,72,.10) 0 12%,transparent 12% 24%,rgba(255,51,72,.055) 24% 36%,transparent 36% 100%),
    radial-gradient(circle at 96% 50%,rgba(255,51,72,.18),transparent 44%),
    linear-gradient(90deg,rgba(255,51,72,.10),rgba(2,8,18,.64) 66%),
    rgba(2,8,18,.66)!important;
  box-shadow:
    inset 0 0 20px rgba(255,51,72,.05),
    0 0 0 1px rgba(255,51,72,.02);
  animation:redAlertRowSoft 3.2s ease-in-out infinite;
}
.live-server-panel .live-status-row.is-offline strong,
.shortcode-server-status .live-status-row.is-offline strong{
  color:#ff445a!important;
  background:rgba(255,51,72,.12);
  border:1px solid rgba(255,51,72,.42);
  box-shadow:0 0 14px rgba(255,51,72,.16), inset 0 0 10px rgba(255,51,72,.08);
  text-shadow:0 0 8px rgba(255,51,72,.6);
}
.live-server-panel .live-status-row.is-offline small,
.shortcode-server-status .live-status-row.is-offline small{
  color:#ff95a1;
}
.live-server-panel .live-status-row.is-offline small:before,
.shortcode-server-status .live-status-row.is-offline small:before{
  content:"RED ALERT";
  width:auto;
  height:auto;
  padding:2px 7px;
  border:1px solid rgba(255,51,72,.34);
  border-radius:999px;
  background:rgba(255,51,72,.09);
  color:#ff445a;
  opacity:1;
  font:900 9px var(--font-logo);
  letter-spacing:.10em;
}
.live-server-panel .live-status-row.is-offline:after,
.shortcode-server-status .live-status-row.is-offline:after{
  opacity:.55;
  animation:redAlertSweepSoft 3.4s ease-in-out infinite;
}
.live-server-panel .live-status-row.is-offline em,
.shortcode-server-status .live-status-row.is-offline em{
  color:#ffd5da;
}
.live-server-panel .panel-link,
.live-server-panel button.panel-link{
  border-radius:8px;
  min-height:47px;
  margin-top:10px;
}
.live-server-panel button.panel-link{
  background:
    linear-gradient(90deg,rgba(34,199,255,.03),rgba(34,199,255,.06),rgba(34,199,255,.03));
}

/* Keep the large server page more dramatic, but avoid clipping there too */
.server-live-card.is-offline:after{
  right:14px;
  top:14px;
  max-width:calc(100% - 28px);
}
.server-live-card dl div{
  min-width:0;
}
.server-live-card dd{
  overflow-wrap:anywhere;
}

@keyframes redAlertRowSoft{
  0%,100%{filter:brightness(1);box-shadow:inset 0 0 20px rgba(255,51,72,.05)}
  50%{filter:brightness(1.08);box-shadow:inset 0 0 28px rgba(255,51,72,.09),0 0 16px rgba(255,51,72,.06)}
}
@keyframes redAlertSweepSoft{
  0%,58%{transform:translateX(-120%) skewX(-15deg);opacity:0}
  68%{opacity:.55}
  92%,100%{transform:translateX(120%) skewX(-15deg);opacity:0}
}

@media(max-width:520px){
  .live-server-panel .status-row,
  .live-server-list .status-row,
  .shortcode-server-status .status-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name state"
      "players players"
      "game game";
  }
  .live-server-panel .status-row em,
  .live-server-list .status-row em,
  .shortcode-server-status .status-row em{
    justify-self:start;
    padding-left:12px;
  }
}


/* V37 Clean dropdown navigation */
.main-nav{
  overflow:visible;
}
.main-nav ul{
  align-items:center;
}
.main-nav li{
  position:relative;
}
.main-nav .menu-item-has-children > a,
.fallback-menu .menu-item-has-children > a{
  display:flex;
  align-items:center;
  gap:7px;
}
.main-nav .menu-item-has-children > a:after,
.fallback-menu .menu-item-has-children > a:after{
  content:"⌄";
  color:#22c7ff;
  font-size:12px;
  transform:translateY(-1px);
}
.main-nav .sub-menu,
.fallback-menu .sub-menu{
  position:absolute;
  z-index:200;
  top:calc(100% + 18px);
  left:50%;
  min-width:230px;
  transform:translateX(-50%) translateY(10px);
  display:grid;
  gap:4px;
  padding:12px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.12),transparent 36%),
    linear-gradient(180deg,rgba(5,16,31,.98),rgba(2,7,17,.99));
  border:1px solid rgba(34,199,255,.28);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 28px rgba(34,199,255,.10),inset 0 0 24px rgba(34,199,255,.035);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.main-nav .sub-menu:before,
.fallback-menu .sub-menu:before{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:12px;
  height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(5,16,31,.98);
  border-left:1px solid rgba(34,199,255,.28);
  border-top:1px solid rgba(34,199,255,.28);
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.fallback-menu li:hover > .sub-menu,
.fallback-menu li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.main-nav .sub-menu li,
.fallback-menu .sub-menu li{
  width:100%;
}
.main-nav .sub-menu a,
.fallback-menu .sub-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:11px 12px;
  border-radius:7px;
  color:#cfe6ff;
  background:rgba(34,199,255,.035);
  border:1px solid rgba(34,199,255,.08);
  white-space:nowrap;
  font-size:12px;
}
.main-nav .sub-menu a:hover,
.fallback-menu .sub-menu a:hover{
  color:white;
  background:rgba(34,199,255,.10);
  border-color:rgba(34,199,255,.26);
  box-shadow:0 0 18px rgba(34,199,255,.10);
}
.main-nav .sub-menu .menu-item-has-children > a:after,
.fallback-menu .sub-menu .menu-item-has-children > a:after{
  content:"";
}

/* Prevent crowded header on desktop */
.site-header{
  gap:20px;
}
.main-nav ul{
  gap:22px;
}
.main-nav a{
  white-space:nowrap;
}
.brand{
  flex-shrink:0;
}
.discord-button{
  flex-shrink:0;
}

/* Mobile dropdowns become normal nested groups */
@media(max-width:980px){
  .main-nav .sub-menu,
  .fallback-menu .sub-menu{
    position:static;
    min-width:0;
    transform:none!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:grid;
    gap:4px;
    margin:4px 0 8px 12px;
    padding:8px;
    background:rgba(34,199,255,.035);
    border-color:rgba(34,199,255,.12);
    border-radius:8px;
    box-shadow:none;
  }
  .main-nav .sub-menu:before,
  .fallback-menu .sub-menu:before{
    display:none;
  }
  .main-nav .sub-menu a,
  .fallback-menu .sub-menu a{
    padding:10px 12px;
    font-size:12px;
    background:rgba(2,8,18,.42);
  }
  .main-nav .menu-item-has-children > a:after,
  .fallback-menu .menu-item-has-children > a:after{
    margin-left:auto;
  }
}


/* V37.1 Dropdown hover fix */
@media(min-width:981px){
  .main-nav .menu-item-has-children,
  .fallback-menu .menu-item-has-children{
    padding-bottom:16px;
    margin-bottom:-16px;
  }

  .main-nav .sub-menu,
  .fallback-menu .sub-menu{
    top:100%!important;
    margin-top:8px;
  }

  /* Invisible hover bridge between parent and dropdown */
  .main-nav .sub-menu:after,
  .fallback-menu .sub-menu:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-16px;
    height:16px;
    background:transparent;
  }

  .main-nav li:hover > .sub-menu,
  .main-nav li:focus-within > .sub-menu,
  .fallback-menu li:hover > .sub-menu,
  .fallback-menu li:focus-within > .sub-menu{
    transform:translateX(-50%) translateY(0)!important;
  }

  .main-nav .sub-menu a,
  .fallback-menu .sub-menu a{
    pointer-events:auto;
  }
}


/* V38 Portal Footer Upgrade */
.portal-footer{
  position:relative;
  overflow:hidden;
  margin-top:70px;
  padding:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(34,199,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(2,7,17,.96),#01040b 60%,#000 100%);
  border-top:1px solid rgba(34,199,255,.26);
}
.footer-rift{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  background:
    linear-gradient(90deg,transparent,rgba(34,199,255,.12),transparent),
    radial-gradient(circle at 18% 20%,rgba(34,199,255,.14),transparent 20%),
    radial-gradient(circle at 80% 22%,rgba(138,92,255,.13),transparent 22%);
}
.footer-rift:after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,199,255,.82),rgba(255,255,255,.44),rgba(138,92,255,.72),transparent);
  box-shadow:0 0 24px rgba(34,199,255,.5);
  animation:footerRiftPulse 4.6s ease-in-out infinite;
}
.footer-top,
.footer-main,
.footer-bottom{
  position:relative;
  z-index:1;
}
.footer-top{
  padding:44px 0 22px;
}
.footer-cta-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:30px;
  border:1px solid rgba(34,199,255,.28);
  border-radius:16px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.17),transparent 34%),
    linear-gradient(145deg,rgba(8,22,40,.86),rgba(3,9,19,.92));
  box-shadow:0 20px 70px rgba(0,0,0,.32),inset 0 0 36px rgba(34,199,255,.04);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.footer-cta-panel h2{
  margin:0 0 8px;
  color:#eef7ff;
  font:800 clamp(28px,4vw,48px) var(--font-head);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.footer-cta-panel p:not(.eyebrow){
  margin:0;
  max-width:680px;
  color:#b9cbe0;
  line-height:1.6;
}
.footer-main{
  display:grid;
  grid-template-columns:1.35fr repeat(3, .75fr);
  gap:34px;
  padding:28px 0 34px;
}
.footer-column{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-column h3{
  margin:0 0 10px;
  color:#22c7ff;
  font:800 15px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.16em;
}
.footer-column a{
  color:#bfd3ea;
  text-decoration:none;
  font-weight:700;
  transition:color .2s ease, transform .2s ease, text-shadow .2s ease;
}
.footer-column a:hover{
  color:#fff;
  transform:translateX(4px);
  text-shadow:0 0 14px rgba(34,199,255,.42);
}
.footer-brand-column p{
  max-width:440px;
  color:#aebfd5;
  line-height:1.65;
}
.footer-brand-mark{
  display:flex;
  align-items:center;
  gap:12px;
  color:#eef7ff!important;
  text-decoration:none;
}
.footer-brand-mark span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#07101f;
  background:linear-gradient(135deg,#eef7ff,#22c7ff 52%,#446cff);
  clip-path:polygon(50% 0,96% 22%,78% 100%,50% 74%,22% 100%,4% 22%);
  font:800 24px var(--font-logo);
  box-shadow:0 0 28px rgba(34,199,255,.46);
}
.footer-brand-mark strong{
  font:800 24px var(--font-logo);
  letter-spacing:.08em;
}
.footer-mini-status{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  margin-top:12px;
  padding:10px 13px;
  border:1px solid rgba(34,199,255,.22);
  border-radius:999px;
  background:rgba(34,199,255,.045);
}
.footer-mini-status span{
  color:#8fa7c4;
  font:800 11px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.footer-mini-status strong{
  color:#25ef7a;
  font:900 12px var(--font-logo);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-mini-status strong.is-offline{
  color:#ff5b6e;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px 0 30px;
  border-top:1px solid rgba(178,221,255,.11);
  color:#7f92aa;
  font-size:13px;
}
.footer-bottom div{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.footer-bottom a{
  color:#9fb6d0;
  text-decoration:none;
}
.footer-bottom a:hover{
  color:#fff;
}
@keyframes footerRiftPulse{
  0%,100%{opacity:.55;transform:translateX(-8%)}
  50%{opacity:1;transform:translateX(8%)}
}

@media(max-width:980px){
  .footer-cta-panel{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-main{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:640px){
  .portal-footer{
    margin-top:46px;
  }
  .footer-top,
  .footer-main,
  .footer-bottom{
    width:min(100% - 28px, 1420px);
  }
  .footer-cta-panel{
    padding:24px;
  }
  .footer-main{
    grid-template-columns:1fr;
    gap:24px;
  }
  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-mini-status{
    width:100%;
    justify-content:space-between;
    border-radius:10px;
  }
}


/* V39 Discord Community Module */
.community-discord-module-wrap{
  padding:36px 0 0;
}
.mmo-discord-module{
  position:relative;
  overflow:hidden;
  padding:32px;
  margin:0 0 28px;
  border:1px solid rgba(88,101,242,.36);
  border-radius:18px;
  background:
    radial-gradient(circle at top right,rgba(88,101,242,.22),transparent 34%),
    radial-gradient(circle at 12% 18%,rgba(34,199,255,.13),transparent 26%),
    linear-gradient(145deg,rgba(8,22,40,.96),rgba(3,9,19,.98));
  box-shadow:0 20px 70px rgba(0,0,0,.28),0 0 34px rgba(88,101,242,.10),inset 0 0 42px rgba(88,101,242,.045);
}
.discord-module-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(rgba(88,101,242,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,101,242,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask:linear-gradient(to bottom,#000,transparent 85%);
  -webkit-mask:linear-gradient(to bottom,#000,transparent 85%);
}
.discord-module-header,
.discord-module-grid,
.discord-module-actions{
  position:relative;
  z-index:1;
}
.discord-module-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin-bottom:24px;
}
.discord-module-header h2{
  margin:0 0 10px;
  color:#eef7ff;
  font:800 clamp(30px,5vw,58px) var(--font-head);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.discord-module-header p:not(.eyebrow){
  max-width:820px;
  margin:0;
  color:#bfd3ea;
  line-height:1.65;
}
.discord-module-status{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  padding:12px 15px;
  border:1px solid rgba(37,239,122,.32);
  border-radius:999px;
  color:#25ef7a;
  background:rgba(37,239,122,.075);
  box-shadow:0 0 20px rgba(37,239,122,.12),inset 0 0 12px rgba(37,239,122,.04);
  font:900 12px var(--font-logo);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.discord-module-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.discord-module-card{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:15px;
  min-height:150px;
  padding:18px;
  border:1px solid rgba(34,199,255,.22);
  border-radius:14px;
  background:
    radial-gradient(circle at top right,rgba(34,199,255,.11),transparent 34%),
    rgba(2,8,18,.54);
  box-shadow:inset 0 0 24px rgba(34,199,255,.025);
}
.discord-module-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  color:#eaf9ff;
  background:linear-gradient(145deg,rgba(8,40,70,.82),rgba(4,14,28,.88));
  border:1px solid rgba(34,199,255,.42);
  clip-path:polygon(50% 0,96% 22%,78% 100%,50% 74%,22% 100%,4% 22%);
  font:800 24px var(--font-logo);
  box-shadow:0 0 18px rgba(34,199,255,.18);
}
.discord-module-card strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font:900 28px var(--font-logo);
  letter-spacing:.04em;
}
.discord-module-card h3{
  margin:0 0 8px;
  color:#eef7ff;
  font:800 18px var(--font-head);
  text-transform:uppercase;
}
.discord-module-card p{
  margin:0;
  color:#aebfd5;
  font-size:13px;
  line-height:1.45;
}
.discord-module-card.accent-orange{
  border-color:rgba(245,158,11,.34);
}
.discord-module-card.accent-orange .discord-module-icon{
  color:#ffb02d;
  border-color:rgba(245,158,11,.50);
  background:linear-gradient(145deg,rgba(60,32,4,.85),rgba(18,9,2,.88));
}
.discord-module-card.accent-purple{
  border-color:rgba(138,92,255,.38);
}
.discord-module-card.accent-purple .discord-module-icon{
  color:#b996ff;
  border-color:rgba(138,92,255,.54);
  background:linear-gradient(145deg,rgba(42,18,88,.85),rgba(13,5,32,.88));
}
.discord-module-card.accent-gold{
  border-color:rgba(220,160,50,.40);
}
.discord-module-card.accent-gold .discord-module-icon{
  color:#f4bf52;
  border-color:rgba(220,160,50,.56);
  background:linear-gradient(145deg,rgba(66,39,6,.85),rgba(20,10,2,.88));
}
.discord-module-card.accent-green{
  border-color:rgba(37,239,122,.34);
}
.discord-module-card.accent-green .discord-module-icon{
  color:#25ef7a;
  border-color:rgba(37,239,122,.50);
  background:linear-gradient(145deg,rgba(8,60,32,.85),rgba(2,18,9,.88));
}
.discord-module-card.accent-blue{
  border-color:rgba(68,108,255,.40);
}
.discord-module-card.accent-blue .discord-module-icon{
  color:#9db2ff;
  border-color:rgba(68,108,255,.56);
  background:linear-gradient(145deg,rgba(18,28,88,.85),rgba(5,10,32,.88));
}
.discord-module-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.mmo-discord-module.is-compact{
  padding:24px;
}
.mmo-discord-module.is-compact .discord-module-grid{
  grid-template-columns:repeat(2,1fr);
}
@media(max-width:1100px){
  .discord-module-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:720px){
  .community-discord-module-wrap{
    width:min(100% - 28px, 1420px);
  }
  .mmo-discord-module{
    padding:22px;
  }
  .discord-module-header{
    flex-direction:column;
  }
  .discord-module-grid,
  .mmo-discord-module.is-compact .discord-module-grid{
    grid-template-columns:1fr;
  }
  .discord-module-card{
    grid-template-columns:50px 1fr;
  }
  .discord-module-status{
    width:100%;
    justify-content:center;
    border-radius:10px;
  }
}


/* V40 Separate join/query ports */
.server-live-card dl{gap:8px}.server-live-card dt{white-space:nowrap}.server-live-card dd{overflow-wrap:anywhere}


/* V41 Server direct connect links */
.server-connect-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  min-height:42px;
  padding:0 18px;
  color:#07101f;
  background:linear-gradient(135deg,#eef7ff,#22c7ff 52%,#446cff);
  border-radius:7px;
  font:900 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 0 22px rgba(34,199,255,.22);
}
.server-connect-link:hover{
  color:#020711;
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(34,199,255,.36);
}
.server-live-card.is-offline .server-connect-link{
  background:linear-gradient(135deg,#fff1f3,#ff5b6e 55%,#9c1626);
  color:#1b0206;
  box-shadow:0 0 22px rgba(255,51,72,.22);
}


/* V41.1 Connect button visibility fix */
.server-connect-link{
  display:flex!important;
  width:100%;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  min-height:44px;
  padding:0 18px;
  color:#07101f!important;
  background:linear-gradient(135deg,#eef7ff,#22c7ff 52%,#446cff)!important;
  border:1px solid rgba(255,255,255,.28);
  border-radius:8px;
  font:900 13px var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none!important;
  box-shadow:0 0 24px rgba(34,199,255,.26), inset 0 0 12px rgba(255,255,255,.18);
}
.server-connect-link:before{
  content:"▶";
  margin-right:8px;
  font-size:11px;
}
.server-connect-link:hover{
  color:#020711!important;
  transform:translateY(-2px);
  box-shadow:0 0 36px rgba(34,199,255,.42), inset 0 0 14px rgba(255,255,255,.22);
}
.server-live-card.is-offline .server-connect-link{
  background:linear-gradient(135deg,#fff1f3,#ff5b6e 55%,#9c1626)!important;
  color:#1b0206!important;
  box-shadow:0 0 24px rgba(255,51,72,.26), inset 0 0 12px rgba(255,255,255,.14);
}