/*
Theme: FuriaPolska CMS Pro
File: assets/css/server-pages.css
Purpose: Separate visual layer for Conan / ARK / Minecraft server pages.
Loaded only by fp_render_server_page().
Version: 2.20.5
*/

/* ==========================================================
   SERVER PAGE VARIABLES
   ========================================================== */

.fp-server-page-body{
  background:#050912;
}

.server-page{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--portal-accent) 7%, transparent), transparent 28%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.035), transparent 26%),
    linear-gradient(180deg, #050914 0%, #050811 48%, #03060d 100%);
}

.server-page-conan{
  --portal-accent:#d0a165;
  --portal-accent-2:#8a5d2e;
  --portal-glow:rgba(208,161,101,.18);
  --portal-panel-bg-1:rgba(13,12,17,.94);
  --portal-panel-bg-2:rgba(7,8,14,.97);
}

.server-page-ark{
  --portal-accent:#6bdcff;
  --portal-accent-2:#2b8daa;
  --portal-glow:rgba(107,220,255,.18);
  --portal-panel-bg-1:rgba(7,16,28,.94);
  --portal-panel-bg-2:rgba(5,10,19,.97);
}

.server-page-minecraft{
  --portal-accent:#9be15b;
  --portal-accent-2:#558f28;
  --portal-glow:rgba(155,225,91,.18);
  --portal-panel-bg-1:rgba(8,17,27,.95);
  --portal-panel-bg-2:rgba(5,11,19,.97);
}

/* ==========================================================
   GAME-SPECIFIC BACKGROUND TEXTURES
   ========================================================== */

.server-page::before,
.server-page::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.server-page::after{
  opacity:.12;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 1px, transparent 2px) 0 0/180px 180px,
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.7) 0 1px, transparent 2px) 0 0/220px 220px;
}

.server-page-minecraft::before{
  opacity:.115;
  background:
    linear-gradient(90deg, rgba(135,226,83,.22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(135,226,83,.16) 1px, transparent 1px),
    linear-gradient(45deg, transparent 0 46%, rgba(135,226,83,.18) 47% 53%, transparent 54% 100%);
  background-size:42px 42px, 42px 42px, 84px 84px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.20) 70%, transparent 100%);
}

.server-page-ark::before{
  opacity:.11;
  background:
    radial-gradient(circle at center, rgba(92,220,255,.3) 0 1px, transparent 2px) 0 0/60px 60px,
    linear-gradient(60deg, transparent 0 48%, rgba(92,220,255,.12) 49% 51%, transparent 52% 100%) 0 0/96px 96px,
    linear-gradient(-60deg, transparent 0 48%, rgba(92,220,255,.10) 49% 51%, transparent 52% 100%) 0 0/96px 96px;
}

.server-page-conan::before{
  opacity:.13;
  background:
    radial-gradient(circle at 12% 24%, rgba(211,151,75,.18), transparent 18%),
    repeating-linear-gradient(115deg, rgba(211,151,75,.075) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 90px);
}

.server-page > *{
  position:relative;
  z-index:1;
}

.server-page-container{
  width:min(90%,1320px);
  max-width:1320px;
  margin-inline:auto;
}

/* ==========================================================
   HERO
   ========================================================== */

.server-page-hero{
  min-height:780px;
  padding:132px 0 84px;
  align-items:center;
  position:relative;
  display:flex;
  overflow:hidden;
}

.server-page-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--portal-accent) 22%, transparent), transparent 22%),
    linear-gradient(90deg, rgba(3,7,16,.96) 0%, rgba(3,7,16,.90) 32%, rgba(3,7,16,.56) 55%, rgba(3,7,16,.24) 70%, rgba(3,7,16,.66) 100%),
    linear-gradient(180deg, rgba(3,7,16,.22), rgba(3,7,16,.92) 100%),
    var(--server-bg) center center / cover no-repeat;
  filter:saturate(1.08) brightness(.74) contrast(1.08);
}

.server-page-hero::after{
  content:"";
  position:absolute;
  inset:auto auto 96px 5.2%;
  top:158px;
  width:min(600px, 40vw);
  height:auto;
  border:1px solid color-mix(in srgb, var(--portal-accent) 22%, rgba(255,255,255,.08));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 8%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 70%);
  opacity:.82;
  pointer-events:none;
}

.server-page-hero-overlay{
  position:absolute;
  inset:auto 0 0 0;
  height:280px;
  background:linear-gradient(180deg, transparent, rgba(5,9,15,.92) 94%);
  pointer-events:none;
}

.server-page-hero-inner{
  width:min(1320px, 90%);
  max-width:1320px;
  padding-top:0;
}

.server-hero-copy{
  width:min(590px, 44vw);
  max-width:590px;
  padding:32px 0 30px 34px;
  position:relative;
  z-index:3;
}

.server-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 .9rem;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.13em;
  color:rgba(255,255,255,.92);
}

.server-hero-kicker::before{
  content:"";
  width:42px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--portal-accent));
}

.server-hero-title-main{
  display:block;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:clamp(3.8rem, 5vw, 5.95rem);
  max-width:8.4ch;
  line-height:.95;
  letter-spacing:.015em;
  color:var(--portal-accent);
  text-shadow:0 0 36px rgba(0,0,0,.33);
}

.server-page-minecraft .server-hero-title-main{
  font-size:clamp(4rem, 5.6vw, 6.65rem);
  max-width:8.8ch;
}

.server-page-desc{
  max-width:38ch;
  font-size:1.12rem;
  line-height:1.62;
  text-transform:none;
  margin:0 0 .9rem;
  color:#f4f3ee;
}

.server-page-substory{
  max-width:42ch;
  color:rgba(236,241,248,.72);
  font-size:.98rem;
  line-height:1.78;
  margin:0 0 1.7rem;
}

.server-hero-tags{
  list-style:none;
  margin:0 0 1.55rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.server-hero-tags li{
  padding:10px 14px;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:.74rem;
  letter-spacing:.04em;
  color:#f1f1ed;
  background:
    linear-gradient(180deg, rgba(10,16,28,.88), rgba(5,10,19,.72)),
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent);
  border:1px solid color-mix(in srgb, var(--portal-accent) 36%, rgba(255,255,255,.08));
}

.server-page-char{
  position:absolute;
  top:108px;
  bottom:0;
  right:6%;
  width:min(31vw, 500px);
  min-height:610px;
  background:var(--server-char) right bottom / contain no-repeat;
  opacity:.98;
  filter:drop-shadow(0 32px 58px rgba(0,0,0,.45));
  z-index:2;
}

.server-page-conan .server-page-char{width:min(32vw,520px); right:6%;}
.server-page-ark .server-page-char{width:min(30vw,490px); right:7%;}
.server-page-minecraft .server-page-char{width:min(29vw,455px); right:7%;}

/* ==========================================================
   BUTTONS
   ========================================================== */

.server-page .btn-primary,
.server-page .btn-secondary{
  min-height:66px;
  padding:0 28px;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:0 12px 34px rgba(0,0,0,.24);
}

.server-page .btn-primary{
  color:#0b0f16;
  background:linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 100%, #fff 0%), color-mix(in srgb, var(--portal-accent) 72%, #000 28%));
  border:1px solid color-mix(in srgb, var(--portal-accent) 65%, #000 35%);
}

.server-page .btn-secondary{
  background:rgba(0,0,0,.36);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}

.server-page-minecraft .btn-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.08)),
    linear-gradient(90deg, #8ddf4d, #73be3e);
  border:1px solid #a5ff68;
  box-shadow:0 12px 0 rgba(37,67,24,.28), 0 20px 35px rgba(0,0,0,.28);
}

/* ==========================================================
   PANELS / INFO
   ========================================================== */

.server-page-section{
  padding-bottom:54px;
}

.portal-panel{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 16%),
    linear-gradient(180deg, rgba(9,15,27,.92), rgba(5,10,19,.96));
  border:1px solid color-mix(in srgb, var(--portal-accent) 17%, rgba(255,255,255,.075));
  box-shadow:0 28px 80px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}

.portal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 28%, transparent), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%);
  opacity:.9;
}

.portal-panel::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:18px;
  bottom:18px;
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
}

.server-page-minecraft .portal-panel{
  background:
    linear-gradient(180deg, rgba(155,225,91,.065), rgba(0,0,0,0) 24%),
    linear-gradient(90deg, rgba(155,225,91,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(155,225,91,.028) 1px, transparent 1px),
    linear-gradient(180deg, var(--portal-panel-bg-1), var(--portal-panel-bg-2));
  background-size:auto, 32px 32px, 32px 32px, auto;
}

.server-page-ark .portal-panel{
  background:
    linear-gradient(180deg, rgba(92,220,255,.06), rgba(0,0,0,0) 26%),
    linear-gradient(120deg, rgba(92,220,255,.035) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, var(--portal-panel-bg-1), var(--portal-panel-bg-2));
}

.server-page-conan .portal-panel{
  background:
    linear-gradient(180deg, rgba(211,151,75,.065), rgba(0,0,0,0) 24%),
    repeating-linear-gradient(115deg, rgba(211,151,75,.028) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, var(--portal-panel-bg-1), var(--portal-panel-bg-2));
}

.portal-kicker{
  display:block;
  margin:0 0 10px;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:var(--portal-accent);
}

.portal-section-head{
  padding:24px 28px 16px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.portal-section-head h2,
.portal-heading h2,
.portal-rules-copy h2,
.portal-cta-copy h2{
  margin:0;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:clamp(1.75rem, 2.15vw, 2.65rem);
  line-height:1.02;
  color:#f2f0ea;
}

.server-page-info-portal{
  margin-top:-60px;
  padding-bottom:38px;
  position:relative;
  z-index:6;
}

.portal-top-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(310px,.45fr);
  gap:18px;
}

.portal-info-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}

.server-info-card{
  position:relative;
  min-height:104px;
  padding:24px 20px 20px 54px;
  border-right:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.server-info-card:nth-child(4n){border-right:0;}
.server-info-card:nth-last-child(-n+4){border-bottom:0;}

.server-info-icon{
  position:absolute;
  left:22px;
  top:24px;
  width:22px;
  height:22px;
  color:var(--portal-accent);
}

.server-info-card-ip-serwera .server-info-icon::before{content:"⌘";}
.server-info-card-wersja .server-info-icon::before{content:"◌";}
.server-info-card-tryb .server-info-icon::before{content:"⚔";}
.server-info-card-mapa .server-info-icon::before{content:"⌖";}
.server-info-card-mody .server-info-icon::before{content:"◇";}
.server-info-card-gracze-online .server-info-icon::before{content:"●";}
.server-info-card-restarty .server-info-icon::before{content:"↻";}
.server-info-card-discord .server-info-icon::before{content:"☰";}

.server-info-label{
  display:block;
  text-transform:uppercase;
  font-size:.70rem;
  color:rgba(255,255,255,.6);
  letter-spacing:.06em;
  margin-bottom:8px;
}

.server-info-card strong{
  display:block;
  font-size:1.05rem;
  line-height:1.35;
  color:var(--portal-accent);
}

/* ==========================================================
   SIDE CARD / TRAILER / COMMUNITY / GALLERY
   ========================================================== */

.portal-side-card{
  padding:30px 26px;
}

.portal-side-card h3{
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:clamp(1.75rem, 2vw, 2.3rem);
  line-height:1.02;
  color:#f2f0ea;
  margin:0 0 14px;
}

.portal-side-card p,
.portal-community-copy p,
.portal-rules-copy p,
.portal-cta-copy p{
  color:rgba(243,243,241,.77);
  line-height:1.78;
}

.portal-experience-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:18px;
}

.portal-video-wrap{
  position:relative;
  padding-bottom:56.25%;
  background:#03060b;
  overflow:hidden;
}

.portal-video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.portal-steps-list{
  list-style:none;
  counter-reset:join-steps;
  margin:0;
  padding:22px 24px;
  display:grid;
  gap:10px;
}

.portal-steps-list li{
  counter-increment:join-steps;
  position:relative;
  min-height:62px;
  padding:15px 18px 15px 76px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(12,18,29,.84), rgba(9,13,21,.84));
  color:#f2f1ed;
  line-height:1.72;
}

.portal-steps-list li::before{
  content:counter(join-steps, decimal-leading-zero);
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--portal-accent) 28%, rgba(255,255,255,.08));
  color:var(--portal-accent);
  font-family:var(--font-head);
}

.portal-mini-cta{
  margin:0 24px 24px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.07);
}

.portal-community-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) 300px;
  gap:18px;
}

.portal-community-main,
.portal-community-side{
  min-height:340px;
}

.portal-community-image{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,12,19,.92) 0%, rgba(8,12,19,.74) 38%, rgba(8,12,19,.22) 100%), var(--server-bg) center/cover no-repeat;
  opacity:.86;
}

.portal-community-copy{
  position:relative;
  z-index:2;
  padding:54px 48px;
  max-width:580px;
}

.portal-community-copy h2{
  margin:0 0 16px;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:clamp(2.2rem, 3vw, 3.8rem);
  line-height:.96;
  color:#f2f0ea;
}

.portal-community-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:32px 26px;
}

.portal-discord-emblem{
  width:102px;
  height:102px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  color:var(--portal-accent);
  font-size:2.5rem;
  background:radial-gradient(circle, var(--portal-glow), transparent 72%);
}

.portal-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.portal-gallery-card{
  min-height:230px;
  max-height:260px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:#0b111d;
  overflow:hidden;
}

.portal-gallery-card img{
  width:100%;
  height:100%;
  min-height:230px;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* ==========================================================
   BENEFITS / RULES / FINAL CTA
   ========================================================== */

.portal-benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.portal-benefit-card{
  min-height:235px;
  padding:28px 22px 20px;
  text-align:left;
}

.portal-benefit-icon{
  display:grid;
  place-items:center;
  margin:0 0 20px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(circle, var(--portal-glow), transparent 72%);
  color:var(--portal-accent);
}

.portal-benefit-card h3{
  margin:0 0 12px;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:1.16rem;
  color:#f0efe9;
}

.portal-rules-grid{
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}

.portal-rules-copy-inner{
  padding:30px 28px;
}

.portal-rules-list li{
  min-height:66px;
  padding-top:18px;
  padding-bottom:18px;
  border-radius:0;
}

.portal-cta-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:32px 34px;
}

.portal-cta-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1260px){
  .server-page-hero{min-height:760px;}
  .portal-top-grid,
  .portal-experience-grid,
  .portal-community-grid{grid-template-columns:1fr;}
  .server-page-char{width:min(39vw,460px); right:-1vw; opacity:.72;}
}

@media (max-width:980px){
  .server-page-hero{padding:124px 0 58px;}
  .server-page-hero::after{display:none;}
  .server-hero-copy{width:100%; max-width:100%; padding:0;}
  .server-page-char{
    position:relative;
    width:min(72vw,400px);
    height:390px;
    min-height:0;
    right:auto;
    top:auto;
    margin:18px auto 0;
    opacity:.95;
  }
  .server-page-info-portal{margin-top:0;}
}

@media (max-width:680px){
  .portal-info-grid,
  .portal-gallery-grid,
  .portal-benefits-grid{grid-template-columns:1fr;}
  .portal-rules-grid,
  .portal-cta-banner{grid-template-columns:1fr;}
  .server-hero-title-main{font-size:clamp(3rem, 13vw, 4.4rem);}
  .server-page-desc,
  .server-page-substory{max-width:none;}
}


/* ==========================================================
   v2.20.6 - real game-themed server page direction
   No generated screenshots are used. CSS-only texture/pass.
   ========================================================== */

/* ---------- Global server page reset for stronger game vibe ---------- */

.server-page{
  --ui-border: color-mix(in srgb, var(--portal-accent) 34%, rgba(255,255,255,.08));
  --ui-border-soft: color-mix(in srgb, var(--portal-accent) 18%, rgba(255,255,255,.06));
  --ui-shadow: rgba(0,0,0,.44);
  --ui-panel-dark: rgba(5,8,14,.94);
  --ui-panel-mid: rgba(11,16,25,.88);
  isolation:isolate;
}

.server-page-container{
  width:min(94%, 1380px);
  max-width:1380px;
}

/* A full-width, more poster-like hero, but less empty */
.server-page-hero{
  min-height:760px;
  padding:118px 0 72px;
  border-bottom:1px solid var(--ui-border-soft);
}

.server-page-bg{
  background:
    radial-gradient(circle at 72% 36%, color-mix(in srgb, var(--portal-accent) 24%, transparent), transparent 22%),
    linear-gradient(90deg, rgba(3,6,12,.96) 0%, rgba(3,6,12,.86) 28%, rgba(3,6,12,.56) 50%, rgba(3,6,12,.18) 70%, rgba(3,6,12,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.86)),
    var(--server-bg) center center / cover no-repeat;
}

.server-page-hero::after{
  display:none;
}

.server-hero-copy{
  width:min(650px, 46vw);
  max-width:650px;
  padding:30px 0 28px;
}

.server-hero-kicker{
  font-size:.95rem;
  opacity:.95;
}

.server-hero-title-main{
  font-size:clamp(4.2rem, 5.8vw, 7rem);
  line-height:.9;
  letter-spacing:-.01em;
  max-width:8.5ch;
}

.server-page-desc{
  max-width:44ch;
  font-size:1.08rem;
  line-height:1.72;
  color:rgba(255,255,255,.88);
}

.server-page-substory{
  max-width:46ch;
  font-size:.98rem;
  line-height:1.75;
  color:rgba(230,238,250,.72);
}

.server-page-char{
  top:100px;
  right:5vw;
  width:min(34vw, 560px);
  min-height:620px;
  opacity:1;
}

/* ---------- Theme-specific visual identity ---------- */

/* MINECRAFT: stone/grass blocks, square panels, blocky outlines */
.server-page-minecraft{
  --portal-accent:#78d84d;
  --portal-accent-2:#3f8c2d;
  --portal-glow:rgba(120,216,77,.24);
  --ui-panel-dark:rgba(8,12,10,.96);
  --ui-panel-mid:rgba(15,24,18,.88);
  background:
    radial-gradient(circle at 75% 12%, rgba(120,216,77,.12), transparent 28%),
    linear-gradient(180deg, #07110d 0%, #050b09 45%, #040706 100%);
}

.server-page-minecraft::before{
  opacity:.24;
  background:
    linear-gradient(90deg, rgba(120,216,77,.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(120,216,77,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,62,42,.18) 50%, rgba(36,70,36,.18) 50%),
    linear-gradient(180deg, rgba(55,92,42,.20) 50%, rgba(38,30,22,.20) 50%);
  background-size:48px 48px, 48px 48px, 96px 96px, 96px 96px;
  mix-blend-mode:screen;
}

.server-page-minecraft .server-page-bg{
  background:
    radial-gradient(circle at 76% 44%, rgba(120,216,77,.18), transparent 24%),
    linear-gradient(90deg, rgba(4,8,7,.94) 0%, rgba(4,8,7,.84) 28%, rgba(4,8,7,.55) 52%, rgba(4,8,7,.14) 70%, rgba(4,8,7,.40) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.82)),
    var(--server-bg) center center / cover no-repeat;
}

.server-page-minecraft .portal-panel,
.server-page-minecraft .server-info-card,
.server-page-minecraft .portal-steps-list li,
.server-page-minecraft .portal-gallery-card,
.server-page-minecraft .portal-benefit-card,
.server-page-minecraft .portal-rules-list li{
  border-radius:0;
  border:2px solid rgba(112,155,87,.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.10)),
    linear-gradient(90deg, rgba(120,216,77,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(120,216,77,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(19,29,21,.96), rgba(9,13,12,.96));
  background-size:auto, 32px 32px, 32px 32px, auto;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.42), 0 18px 38px rgba(0,0,0,.34);
}

.server-page-minecraft .portal-section-head,
.server-page-minecraft .portal-heading-center h2{
  background:
    linear-gradient(90deg, rgba(120,216,77,.13), transparent 75%);
}

.server-page-minecraft .btn-primary{
  background:
    linear-gradient(180deg, #9ef46b, #65b53d);
  border:2px solid #baff85;
  box-shadow:inset 0 -4px 0 rgba(45,78,27,.45), 0 12px 0 rgba(33,55,25,.35), 0 24px 42px rgba(0,0,0,.35);
  color:#081106;
}

.server-page-minecraft .btn-secondary{
  border:2px solid rgba(120,216,77,.34);
}

/* ARK: sci-fi cyan panels, hex grid, obelisk glow */
.server-page-ark{
  --portal-accent:#38d9ff;
  --portal-accent-2:#137eaa;
  --portal-glow:rgba(56,217,255,.26);
  background:
    radial-gradient(circle at 78% 12%, rgba(56,217,255,.18), transparent 28%),
    linear-gradient(180deg, #03121a 0%, #041018 45%, #03070d 100%);
}

.server-page-ark::before{
  opacity:.18;
  background:
    radial-gradient(circle at center, rgba(56,217,255,.28) 0 1px, transparent 2px) 0 0/54px 54px,
    linear-gradient(60deg, transparent 0 49%, rgba(56,217,255,.13) 50%, transparent 51%) 0 0/72px 72px,
    linear-gradient(-60deg, transparent 0 49%, rgba(56,217,255,.09) 50%, transparent 51%) 0 0/72px 72px;
  mix-blend-mode:screen;
}

.server-page-ark .portal-panel,
.server-page-ark .server-info-card,
.server-page-ark .portal-steps-list li,
.server-page-ark .portal-gallery-card,
.server-page-ark .portal-benefit-card,
.server-page-ark .portal-rules-list li{
  border-radius:0;
  border:1px solid rgba(56,217,255,.30);
  background:
    linear-gradient(135deg, rgba(56,217,255,.09), transparent 22%),
    linear-gradient(180deg, rgba(8,22,32,.95), rgba(3,10,17,.97));
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:inset 0 0 0 1px rgba(56,217,255,.06), 0 0 22px rgba(56,217,255,.055), 0 22px 48px rgba(0,0,0,.34);
}

.server-page-ark .portal-section-head{
  border-bottom-color:rgba(56,217,255,.20);
}

.server-page-ark .btn-primary{
  background:linear-gradient(180deg, #62edff, #17a9d7);
  border-color:#7ff3ff;
  box-shadow:0 0 26px rgba(56,217,255,.16), 0 22px 44px rgba(0,0,0,.36);
  color:#021018;
}

/* CONAN: worn metal, bronze, war banner */
.server-page-conan{
  --portal-accent:#c89558;
  --portal-accent-2:#8a512c;
  --portal-glow:rgba(200,149,88,.24);
  background:
    radial-gradient(circle at 70% 10%, rgba(200,149,88,.12), transparent 30%),
    linear-gradient(180deg, #120c09 0%, #080706 52%, #050403 100%);
}

.server-page-conan::before{
  opacity:.18;
  background:
    repeating-linear-gradient(115deg, rgba(200,149,88,.08) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 18% 28%, rgba(160,60,32,.13), transparent 18%),
    radial-gradient(circle at 82% 60%, rgba(200,149,88,.10), transparent 22%);
}

.server-page-conan .portal-panel,
.server-page-conan .server-info-card,
.server-page-conan .portal-steps-list li,
.server-page-conan .portal-gallery-card,
.server-page-conan .portal-benefit-card,
.server-page-conan .portal-rules-list li{
  border:1px solid rgba(200,149,88,.30);
  background:
    linear-gradient(180deg, rgba(200,149,88,.07), rgba(0,0,0,0) 26%),
    repeating-linear-gradient(115deg, rgba(200,149,88,.025) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(20,15,12,.96), rgba(8,7,6,.98));
  box-shadow:inset 0 0 0 1px rgba(255,215,140,.035), 0 24px 54px rgba(0,0,0,.42);
}

.server-page-conan .btn-primary{
  background:linear-gradient(180deg, #d6a461, #8d4d2c);
  border-color:#e4b579;
  color:#130a05;
}

/* ---------- Information area: more content dense ---------- */
.server-page-info-portal{
  margin-top:-42px;
  padding-bottom:42px;
}

.portal-top-grid{
  grid-template-columns:minmax(0, 1.45fr) minmax(300px, .55fr);
}

.portal-info-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.server-info-card{
  min-height:96px;
  padding:22px 18px 18px 52px;
}

.portal-side-card{
  padding:28px 24px;
}

.portal-side-card h3{
  font-size:clamp(1.6rem, 1.7vw, 2.05rem);
}

/* ---------- Trailer + join ---------- */
.portal-experience-grid{
  grid-template-columns:minmax(0, 1.12fr) minmax(360px, .88fr);
  gap:20px;
}

.portal-steps-list li{
  min-height:58px;
}

/* ---------- Gallery ---------- */
.portal-gallery-card{
  min-height:220px;
  max-height:245px;
}

.portal-gallery-card:hover{
  transform:translateY(-4px);
  border-color:var(--portal-accent);
}

/* ---------- Benefits as game cards ---------- */
.portal-benefits-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.portal-benefit-card{
  min-height:220px;
}

/* ---------- Footer CTA ---------- */
.portal-cta-banner{
  border-color:var(--ui-border);
}

/* ---------- Responsive ---------- */
@media (max-width:1260px){
  .portal-top-grid,
  .portal-experience-grid,
  .portal-community-grid{
    grid-template-columns:1fr;
  }
  .server-page-char{
    right:-1vw;
    width:min(38vw, 460px);
    opacity:.78;
  }
}

@media (max-width:980px){
  .server-page-hero{
    min-height:auto;
    padding:124px 0 58px;
  }
  .server-hero-copy{
    width:100%;
    max-width:100%;
  }
  .server-page-char{
    position:relative;
    top:auto;
    right:auto;
    width:min(72vw,400px);
    height:390px;
    min-height:0;
    margin:18px auto 0;
    opacity:.95;
  }
  .server-page-info-portal{
    margin-top:0;
  }
}

@media (max-width:700px){
  .portal-info-grid,
  .portal-gallery-grid,
  .portal-benefits-grid{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   v2.20.7 - Minecraft living decoration layer
   Uses transparent PNG/WebP assets from assets/game-art/server-pages/minecraft-decor/
   ========================================================== */

.server-page-minecraft{
  --mc-creeper: url('../game-art/server-pages/minecraft-decor/mc-creeper.webp');
  --mc-sniffer: url('../game-art/server-pages/minecraft-decor/mc-sniffer.webp');
  --mc-chicken: url('../game-art/server-pages/minecraft-decor/mc-chicken.webp');
  --mc-grass-divider: url('../game-art/server-pages/minecraft-decor/mc-grass-divider.webp');
  --mc-blocks-torch: url('../game-art/server-pages/minecraft-decor/mc-blocks-torch.webp');
  --mc-mossy-corner: url('../game-art/server-pages/minecraft-decor/mc-mossy-corner.webp');
}

/* small ambient pixel particles */
.server-page-minecraft .server-page-hero::before,
.server-page-minecraft .server-page-info-portal::before,
.server-page-minecraft .server-page-gallery-portal::before,
.server-page-minecraft .server-page-features-portal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.18;
  background:
    linear-gradient(90deg, transparent 0 93%, rgba(155,225,91,.35) 94% 96%, transparent 97% 100%) 0 0/78px 78px,
    linear-gradient(180deg, transparent 0 93%, rgba(155,225,91,.28) 94% 96%, transparent 97% 100%) 0 0/78px 78px;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}

/* Hero block platform at the bottom; makes the first section feel grounded */
.server-page-minecraft .server-page-hero{
  position:relative;
}

.server-page-minecraft .server-page-hero .server-page-container::after{
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  bottom:-80px;
  height:170px;
  background:var(--mc-grass-divider) center bottom / contain no-repeat;
  opacity:.78;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.38));
  pointer-events:none;
  z-index:3;
}

/* Creeper hidden slightly behind the info block */
.server-page-minecraft .server-page-info-portal{
  position:relative;
}

.server-page-minecraft .server-page-info-portal::after{
  content:"";
  position:absolute;
  right:clamp(18px, 4vw, 72px);
  top:-95px;
  width:clamp(115px, 11vw, 190px);
  aspect-ratio:1 / 1.45;
  background:var(--mc-creeper) center bottom / contain no-repeat;
  opacity:.82;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.42));
  pointer-events:none;
  z-index:2;
  transform:rotate(-4deg);
}

/* Mossy corner decor on the big server info panel */
.server-page-minecraft .portal-info-panel::before{
  background:
    var(--mc-mossy-corner) left top / 240px auto no-repeat,
    linear-gradient(180deg, rgba(155,225,91,.065), rgba(0,0,0,0) 24%),
    linear-gradient(90deg, rgba(155,225,91,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(155,225,91,.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(8,17,27,.95), rgba(5,11,19,.97));
  opacity:1;
}

/* Blocks with torch near join/trailer area */
.server-page-minecraft .portal-join-panel{
  position:relative;
}

.server-page-minecraft .portal-join-panel::before{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-42px;
  width:clamp(190px, 22vw, 330px);
  height:260px;
  background:var(--mc-blocks-torch) right bottom / contain no-repeat;
  pointer-events:none;
  opacity:.72;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.46));
  z-index:2;
}

/* Sniffer-like friendly mob for community section */
.server-page-minecraft .portal-community-side{
  overflow:visible;
}

.server-page-minecraft .portal-community-side::before{
  content:"";
  position:absolute;
  left:-118px;
  bottom:-36px;
  width:clamp(190px, 23vw, 350px);
  height:260px;
  background:var(--mc-sniffer) left bottom / contain no-repeat;
  pointer-events:none;
  opacity:.88;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.42));
  z-index:4;
}

/* Chicken detail by gallery heading */
.server-page-minecraft .server-page-gallery-portal{
  position:relative;
}

.server-page-minecraft .server-page-gallery-portal .portal-heading::after{
  content:"";
  position:absolute;
  right:clamp(4px, 9vw, 130px);
  top:-72px;
  width:clamp(110px, 11vw, 175px);
  height:150px;
  background:var(--mc-chicken) center bottom / contain no-repeat;
  pointer-events:none;
  opacity:.92;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.38));
  transform:rotate(3deg);
}

/* Grass footer decoration before CTA */
.server-page-minecraft .server-page-final-cta{
  position:relative;
}

.server-page-minecraft .server-page-final-cta::before{
  content:"";
  position:absolute;
  left:50%;
  top:-88px;
  width:min(960px, 92vw);
  height:150px;
  transform:translateX(-50%);
  background:var(--mc-grass-divider) center bottom / contain no-repeat;
  opacity:.64;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.34));
  pointer-events:none;
}

/* Minecraft-specific panels: more blocky and alive */
.server-page-minecraft .portal-panel{
  position:relative;
  overflow:hidden;
}

.server-page-minecraft .portal-panel::after{
  border-color:rgba(155,225,91,.09);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}

.server-page-minecraft .portal-benefit-card:nth-child(1)::before,
.server-page-minecraft .portal-benefit-card:nth-child(2)::before,
.server-page-minecraft .portal-benefit-card:nth-child(3)::before,
.server-page-minecraft .portal-benefit-card:nth-child(4)::before{
  content:"";
  position:absolute;
  right:14px;
  bottom:12px;
  width:34px;
  height:34px;
  opacity:.18;
  background:
    linear-gradient(90deg, rgba(155,225,91,.9) 0 50%, rgba(76,129,48,.9) 50% 100%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  box-shadow:
    -38px -18px 0 rgba(96,151,60,.32),
    -18px -54px 0 rgba(155,225,91,.20);
}

/* gentle hover motion */
.server-page-minecraft .portal-gallery-card,
.server-page-minecraft .portal-benefit-card,
.server-page-minecraft .portal-steps-list li,
.server-page-minecraft .server-info-card{
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}

.server-page-minecraft .portal-gallery-card:hover,
.server-page-minecraft .portal-benefit-card:hover,
.server-page-minecraft .portal-steps-list li:hover,
.server-page-minecraft .server-info-card:hover{
  transform:translateY(-3px);
  border-color:rgba(155,225,91,.55);
  filter:brightness(1.04);
}

/* make sure decorative layer does not break smaller screens */
@media (max-width:1260px){
  .server-page-minecraft .server-page-info-portal::after{
    right:8px;
    top:-65px;
    width:130px;
    opacity:.48;
  }

  .server-page-minecraft .portal-community-side::before{
    left:auto;
    right:-42px;
    bottom:-52px;
    width:210px;
    opacity:.42;
  }

  .server-page-minecraft .portal-join-panel::before{
    width:210px;
    opacity:.34;
  }
}

@media (max-width:760px){
  .server-page-minecraft .server-page-hero .server-page-container::after,
  .server-page-minecraft .server-page-info-portal::after,
  .server-page-minecraft .portal-join-panel::before,
  .server-page-minecraft .portal-community-side::before,
  .server-page-minecraft .server-page-gallery-portal .portal-heading::after,
  .server-page-minecraft .server-page-final-cta::before{
    opacity:.22;
    transform:none;
  }

  .server-page-minecraft .server-page-hero .server-page-container::after{
    bottom:-54px;
    height:110px;
  }

  .server-page-minecraft .server-page-gallery-portal .portal-heading::after{
    right:0;
    width:92px;
  }
}


/* ==========================================================
   v2.20.8 - Minecraft decorations polish
   Fixes: decorative assets no longer cover text/buttons; empty gallery styled cleaner.
   ========================================================== */

/* Make Minecraft decorative elements act like background layers, not content blockers */
.server-page-minecraft .portal-panel,
.server-page-minecraft .portal-join-panel,
.server-page-minecraft .portal-community-side,
.server-page-minecraft .server-page-gallery-portal,
.server-page-minecraft .server-page-info-portal{
  isolation:isolate;
}

/* Hero grass strip: more subtle and lower */
.server-page-minecraft .server-page-hero .server-page-container::after{
  bottom:-112px;
  height:145px;
  opacity:.42;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.32)) saturate(.95) brightness(.82);
  z-index:1;
}

/* Join section block pile was covering the title and steps. Move it behind content. */
.server-page-minecraft .portal-join-panel::before{
  right:-80px;
  bottom:-64px;
  width:clamp(155px, 16vw, 235px);
  height:220px;
  opacity:.22;
  z-index:0;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.34)) saturate(.85) brightness(.76);
}

.server-page-minecraft .portal-join-panel > *{
  position:relative;
  z-index:2;
}

.server-page-minecraft .portal-steps-list,
.server-page-minecraft .portal-mini-cta{
  position:relative;
  z-index:3;
  background:rgba(3,8,12,.20);
  backdrop-filter:blur(1px);
}

/* Community mob was too dominant. Use it as a subtle banner mascot instead. */
.server-page-minecraft .portal-community-side::before{
  left:auto;
  right:-52px;
  bottom:-54px;
  width:clamp(150px, 15vw, 230px);
  height:190px;
  opacity:.32;
  z-index:0;
  filter:drop-shadow(0 15px 26px rgba(0,0,0,.36)) saturate(.85) brightness(.76);
}

.server-page-minecraft .portal-community-side > *{
  position:relative;
  z-index:2;
}

.server-page-minecraft .portal-community-side{
  background:
    radial-gradient(circle at 86% 82%, rgba(155,225,91,.10), transparent 34%),
    linear-gradient(180deg, rgba(10,18,14,.94), rgba(4,8,8,.97));
}

/* Chicken is good, but scale it down and make it look intentional. */
.server-page-minecraft .server-page-gallery-portal .portal-heading::after{
  right:clamp(12px, 12vw, 180px);
  top:-46px;
  width:clamp(88px, 8vw, 130px);
  height:120px;
  opacity:.88;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.34)) saturate(.92);
}

/* Creeper becomes a side accent instead of popping over the section. */
.server-page-minecraft .server-page-info-portal::after{
  right:clamp(10px, 2.5vw, 44px);
  top:-44px;
  width:clamp(86px, 8vw, 135px);
  opacity:.38;
  z-index:0;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)) saturate(.82) brightness(.78);
}

.server-page-minecraft .server-page-info-portal > *{
  position:relative;
  z-index:2;
}

/* Empty gallery should not look like a random blue WordPress alert */
.server-page-minecraft .server-empty-gallery{
  grid-column:1 / -1;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(235,245,232,.76);
  background:
    linear-gradient(90deg, rgba(155,225,91,.06), rgba(155,225,91,.015), rgba(155,225,91,.06)),
    linear-gradient(180deg, rgba(11,20,15,.86), rgba(5,10,10,.86));
  border:2px dashed rgba(155,225,91,.28);
  border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.40), 0 16px 34px rgba(0,0,0,.22);
  font-size:1.03rem;
}

/* A small decorative block line between major Minecraft sections */
.server-page-minecraft .server-page-divider{
  min-height:42px;
  margin:2px auto 44px;
  position:relative;
}

.server-page-minecraft .server-page-divider::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(520px, 80vw);
  height:18px;
  transform:translate(-50%, -50%);
  background:
    linear-gradient(90deg, transparent, rgba(155,225,91,.32), transparent),
    repeating-linear-gradient(90deg, rgba(155,225,91,.18) 0 18px, rgba(83,133,55,.14) 18px 36px);
  opacity:.32;
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  pointer-events:none;
}

.server-page-minecraft .server-page-divider-source{
  max-height:52px;
  width:min(620px, 78vw);
  opacity:.62;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.25)) saturate(.85) brightness(.78);
}

/* Improve panel readability after adding decorations */
.server-page-minecraft .portal-section-head h2,
.server-page-minecraft .portal-community-copy h2,
.server-page-minecraft .portal-rules-copy h2,
.server-page-minecraft .portal-cta-copy h2{
  text-shadow:0 8px 22px rgba(0,0,0,.34);
}

.server-page-minecraft .portal-panel::before{
  pointer-events:none;
}

/* More professional hover: subtle, not jumping */
.server-page-minecraft .portal-gallery-card:hover,
.server-page-minecraft .portal-benefit-card:hover,
.server-page-minecraft .portal-steps-list li:hover,
.server-page-minecraft .server-info-card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.38), 0 22px 42px rgba(0,0,0,.32);
}

/* Keep everything clean on tablet/mobile */
@media (max-width:1260px){
  .server-page-minecraft .portal-join-panel::before{
    right:-56px;
    bottom:-52px;
    width:170px;
    opacity:.16;
  }

  .server-page-minecraft .portal-community-side::before{
    right:-44px;
    width:160px;
    opacity:.20;
  }

  .server-page-minecraft .server-page-info-portal::after{
    opacity:.20;
  }
}

@media (max-width:760px){
  .server-page-minecraft .portal-join-panel::before,
  .server-page-minecraft .portal-community-side::before,
  .server-page-minecraft .server-page-info-portal::after,
  .server-page-minecraft .server-page-gallery-portal .portal-heading::after,
  .server-page-minecraft .server-page-hero .server-page-container::after,
  .server-page-minecraft .server-page-final-cta::before{
    display:none;
  }

  .server-page-minecraft .server-empty-gallery{
    min-height:96px;
    padding:1.2rem;
  }
}


/* ==========================================================
   v2.20.9 - Minecraft visible decorations + cleaner panels
   User direction: decorations should be visible, panels should look more natural.
   ========================================================== */

/* Cleaner Minecraft page rhythm */
.server-page-minecraft{
  --mc-panel-bg: rgba(8, 14, 11, .88);
  --mc-panel-bg-2: rgba(10, 20, 13, .82);
  --mc-panel-border: rgba(126, 210, 86, .42);
  --mc-panel-border-soft: rgba(126, 210, 86, .24);
  --mc-panel-shadow: 0 22px 52px rgba(0,0,0,.34);
}

/* Softer, more normal Minecraft panels: less technical HUD, more game-card */
.server-page-minecraft .portal-panel{
  border:1px solid var(--mc-panel-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, var(--mc-panel-bg), rgba(5,10,8,.92));
  box-shadow:var(--mc-panel-shadow), inset 0 0 0 1px rgba(255,255,255,.035);
}

.server-page-minecraft .portal-panel::after{
  left:14px;
  right:14px;
  top:14px;
  bottom:14px;
  border:1px solid rgba(126,210,86,.10);
  box-shadow:none;
}

.server-page-minecraft .portal-section-head{
  background:
    linear-gradient(90deg, rgba(126,210,86,.16), rgba(126,210,86,.045), transparent);
  border-bottom:1px solid rgba(126,210,86,.24);
}

/* Info cards: less boxed-in grid, more readable */
.server-page-minecraft .server-info-card{
  border:1px solid rgba(126,210,86,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent),
    rgba(4,9,8,.48);
  box-shadow:none;
}

.server-page-minecraft .portal-info-grid{
  gap:8px;
  padding:12px;
}

.server-page-minecraft .server-info-card strong{
  color:#a6ff73;
  text-shadow:0 0 12px rgba(126,210,86,.16);
}

/* Side CTA card: make it clean and visible, not too dark */
.server-page-minecraft .portal-side-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(126,210,86,.12), transparent 38%),
    linear-gradient(180deg, rgba(17,31,17,.92), rgba(6,12,9,.94));
}

/* Decorations should be visible but placed around content */

/* Grass strip below hero: 100% visible, lower and behind the next section */
.server-page-minecraft .server-page-hero .server-page-container::after{
  bottom:-94px;
  height:165px;
  opacity:1;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.42)) saturate(1.05) brightness(1);
  z-index:2;
}

/* Creeper: fully visible, placed as outside mascot near CTA card, not hidden in panel */
.server-page-minecraft .server-page-info-portal::after{
  right:clamp(18px, 3.4vw, 70px);
  top:-68px;
  width:clamp(115px, 9vw, 165px);
  opacity:1;
  z-index:3;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.44)) saturate(1.08) brightness(.98);
  transform:rotate(-5deg);
}

/* Mossy corner: make visible, but shift outside title area */
.server-page-minecraft .portal-info-panel::before{
  background:
    var(--mc-mossy-corner) left 18px top 18px / 210px auto no-repeat,
    linear-gradient(180deg, rgba(126,210,86,.08), rgba(0,0,0,0) 24%),
    linear-gradient(180deg, rgba(8,17,15,.88), rgba(4,9,8,.94));
  opacity:1;
}

.server-page-minecraft .portal-info-panel .portal-section-head{
  padding-left:235px;
  min-height:128px;
}

/* Blocks with torch: move to outer top-right corner of join panel */
.server-page-minecraft .portal-join-panel::before{
  right:-44px;
  top:-78px;
  bottom:auto;
  width:clamp(205px, 18vw, 290px);
  height:250px;
  opacity:1;
  z-index:4;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.44)) saturate(1.05) brightness(1.02);
}

.server-page-minecraft .portal-join-panel > *{
  position:relative;
  z-index:5;
}

/* Keep title readable even with decoration nearby */
.server-page-minecraft .portal-join-panel .portal-section-head{
  padding-right:230px;
  min-height:132px;
}

/* Sniffer: fully visible in Discord card, behind but bright enough */
.server-page-minecraft .portal-community-side::before{
  left:50%;
  right:auto;
  bottom:auto;
  top:26px;
  width:clamp(190px, 16vw, 270px);
  height:180px;
  transform:translateX(-50%);
  opacity:1;
  z-index:1;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.44)) saturate(1.08) brightness(.98);
}

.server-page-minecraft .portal-community-side{
  padding-top:210px;
  background:
    radial-gradient(circle at 50% 118px, rgba(126,210,86,.16), transparent 30%),
    linear-gradient(180deg, rgba(13,25,15,.94), rgba(5,10,7,.96));
}

.server-page-minecraft .portal-community-side > *{
  position:relative;
  z-index:4;
}

/* Chicken: fully visible and placed as a playful but clean gallery mascot */
.server-page-minecraft .server-page-gallery-portal .portal-heading::after{
  right:clamp(20px, 14vw, 240px);
  top:-78px;
  width:clamp(130px, 10vw, 180px);
  height:165px;
  opacity:1;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.42)) saturate(1.05) brightness(1.03);
}

/* Footer grass decoration: visible, but not overpowering */
.server-page-minecraft .server-page-final-cta::before{
  top:-98px;
  height:150px;
  opacity:1;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.40)) saturate(1.05) brightness(.98);
}

/* Cleaner empty gallery block */
.server-page-minecraft .server-empty-gallery{
  background:
    linear-gradient(180deg, rgba(12,24,15,.88), rgba(5,10,8,.88));
  border:1px solid rgba(126,210,86,.36);
  color:rgba(232,245,226,.82);
  box-shadow:0 18px 42px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.025);
}

/* Make gallery/benefit cards more normal and less blue/alert looking */
.server-page-minecraft .portal-gallery-card,
.server-page-minecraft .portal-benefit-card,
.server-page-minecraft .portal-rules-list li,
.server-page-minecraft .portal-steps-list li{
  background:
    linear-gradient(180deg, rgba(15,27,17,.88), rgba(6,12,8,.92));
  border:1px solid rgba(126,210,86,.28);
  box-shadow:0 16px 36px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.025);
}

/* More natural button polish */
.server-page-minecraft .btn-primary{
  background:linear-gradient(180deg, #95ef62 0%, #72ca45 100%);
  border:1px solid #b0ff7d;
  box-shadow:inset 0 -4px 0 rgba(49,103,32,.36), 0 14px 28px rgba(0,0,0,.30);
}

.server-page-minecraft .btn-secondary{
  background:rgba(3,8,8,.56);
  border:1px solid rgba(126,210,86,.38);
  box-shadow:0 14px 26px rgba(0,0,0,.18);
}

/* Reduce global Minecraft grid strength a bit now that real decorations are visible */
.server-page-minecraft::before{
  opacity:.135;
}

/* Responsive: keep decorative assets visible where possible, but safe */
@media (max-width:1260px){
  .server-page-minecraft .portal-info-panel .portal-section-head{
    padding-left:190px;
  }

  .server-page-minecraft .portal-join-panel .portal-section-head{
    padding-right:160px;
  }

  .server-page-minecraft .portal-join-panel::before{
    right:-34px;
    top:-58px;
    width:190px;
    opacity:.92;
  }

  .server-page-minecraft .portal-community-side::before{
    width:210px;
    opacity:.95;
  }

  .server-page-minecraft .server-page-info-portal::after{
    width:120px;
    opacity:.95;
  }
}

@media (max-width:900px){
  .server-page-minecraft .portal-info-panel .portal-section-head,
  .server-page-minecraft .portal-join-panel .portal-section-head{
    padding-left:24px;
    padding-right:24px;
    min-height:auto;
  }

  .server-page-minecraft .portal-info-panel::before{
    background:
      linear-gradient(180deg, rgba(126,210,86,.08), rgba(0,0,0,0) 24%),
      linear-gradient(180deg, rgba(8,17,15,.88), rgba(4,9,8,.94));
  }

  .server-page-minecraft .portal-join-panel::before{
    right:-42px;
    top:-42px;
    width:150px;
    opacity:.72;
  }

  .server-page-minecraft .server-page-info-portal::after{
    top:-34px;
    width:92px;
    opacity:.72;
  }
}

@media (max-width:700px){
  .server-page-minecraft .portal-join-panel::before,
  .server-page-minecraft .portal-community-side::before,
  .server-page-minecraft .server-page-info-portal::after,
  .server-page-minecraft .server-page-gallery-portal .portal-heading::after,
  .server-page-minecraft .server-page-hero .server-page-container::after,
  .server-page-minecraft .server-page-final-cta::before{
    display:none;
  }

  .server-page-minecraft .portal-community-side{
    padding-top:32px;
  }
}


/* ==========================================================
   v2.21.0 - Conan + ARK decoration layer
   Adds visible, game-themed ornaments for Conan and ARK pages.
   ========================================================== */

/* ---------- Shared cleaner panels for Conan and ARK ---------- */
.server-page-conan,
.server-page-ark{
  --decor-panel-shadow:0 24px 54px rgba(0,0,0,.38);
}

.server-page-conan .portal-panel,
.server-page-ark .portal-panel{
  overflow:visible;
}

.server-page-conan .portal-info-grid,
.server-page-ark .portal-info-grid{
  gap:8px;
  padding:12px;
}

.server-page-conan .server-info-card,
.server-page-ark .server-info-card{
  border:1px solid var(--ui-border-soft);
  box-shadow:none;
}

.server-page-conan .portal-section-head,
.server-page-ark .portal-section-head{
  border-bottom-color:var(--ui-border-soft);
}

/* ==========================================================
   CONAN DECORATIONS
   ========================================================== */
.server-page-conan{
  --conan-battlement:url('../game-art/server-pages/conan-decor/conan-battlement.webp');
  --conan-banner:url('../game-art/server-pages/conan-decor/conan-banner.webp');
  --conan-ruin:url('../game-art/server-pages/conan-decor/conan-ruin-fire.webp');
  --conan-blood:#6d1510;
  --conan-bronze:#c89558;
}

/* More brutal, warmer page atmosphere */
.server-page-conan{
  background:
    radial-gradient(circle at 76% 8%, rgba(200,149,88,.14), transparent 30%),
    radial-gradient(circle at 12% 40%, rgba(109,21,16,.12), transparent 28%),
    linear-gradient(180deg, #120b08 0%, #080605 54%, #040303 100%);
}

.server-page-conan .server-page-bg{
  background:
    radial-gradient(circle at 72% 30%, rgba(200,149,88,.20), transparent 23%),
    linear-gradient(90deg, rgba(10,5,3,.96) 0%, rgba(10,5,3,.86) 30%, rgba(10,5,3,.52) 52%, rgba(10,5,3,.20) 70%, rgba(10,5,3,.56) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.86)),
    var(--server-bg) center center / cover no-repeat;
}

/* Battlement as a strong ledge between hero and server info */
.server-page-conan .server-page-hero .server-page-container::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-120px;
  width:min(1160px, 88vw);
  height:270px;
  transform:translateX(-50%);
  background:var(--conan-battlement) center bottom / contain no-repeat;
  opacity:1;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.55)) saturate(1.06) brightness(.96);
  pointer-events:none;
  z-index:3;
}

/* Desert ruin, fully visible on info section */
.server-page-conan .server-page-info-portal{
  position:relative;
  isolation:isolate;
}

.server-page-conan .server-page-info-portal::after{
  content:"";
  position:absolute;
  right:clamp(16px, 3vw, 64px);
  top:-128px;
  width:clamp(230px, 20vw, 360px);
  height:330px;
  background:var(--conan-ruin) right bottom / contain no-repeat;
  opacity:1;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.58)) saturate(1.04) brightness(.96);
  pointer-events:none;
  z-index:3;
}

.server-page-conan .server-page-info-portal > *{
  position:relative;
  z-index:4;
}

/* Make the server info title leave room for the ruin */
.server-page-conan .portal-info-panel .portal-section-head{
  padding-right:320px;
}

/* Banner in Discord/community side, visible but framed */
.server-page-conan .portal-community-side{
  padding-top:230px;
  background:
    radial-gradient(circle at 50% 110px, rgba(200,149,88,.16), transparent 34%),
    linear-gradient(180deg, rgba(20,13,9,.94), rgba(7,5,4,.96));
}

.server-page-conan .portal-community-side::before{
  content:"";
  position:absolute;
  left:50%;
  top:-42px;
  width:clamp(190px, 17vw, 300px);
  height:310px;
  transform:translateX(-50%);
  background:var(--conan-banner) center top / contain no-repeat;
  opacity:1;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.58)) saturate(1.03) brightness(.95);
  pointer-events:none;
  z-index:2;
}

.server-page-conan .portal-community-side > *{
  position:relative;
  z-index:4;
}

/* Banner as subtle side watermark in benefits */
.server-page-conan .server-page-features-portal{
  position:relative;
  isolation:isolate;
}

.server-page-conan .server-page-features-portal::after{
  content:"";
  position:absolute;
  left:clamp(8px, 2vw, 44px);
  top:42px;
  width:clamp(160px, 14vw, 240px);
  height:300px;
  background:var(--conan-banner) left top / contain no-repeat;
  opacity:.52;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45)) saturate(.92) brightness(.75);
  pointer-events:none;
  z-index:0;
}

.server-page-conan .server-page-features-portal > *{
  position:relative;
  z-index:2;
}

/* Conan panels: less HUD, more carved war table */
.server-page-conan .portal-panel,
.server-page-conan .server-info-card,
.server-page-conan .portal-gallery-card,
.server-page-conan .portal-benefit-card,
.server-page-conan .portal-rules-list li,
.server-page-conan .portal-steps-list li{
  background:
    linear-gradient(180deg, rgba(200,149,88,.08), rgba(0,0,0,0) 28%),
    linear-gradient(180deg, rgba(18,13,10,.93), rgba(8,6,5,.95));
  border-color:rgba(200,149,88,.34);
  box-shadow:var(--decor-panel-shadow), inset 0 0 0 1px rgba(255,214,140,.035);
}

.server-page-conan .btn-primary{
  background:linear-gradient(180deg, #d4a15e 0%, #92512f 100%);
  border-color:#e2b678;
  color:#130905;
  box-shadow:inset 0 -4px 0 rgba(71,35,17,.46), 0 16px 34px rgba(0,0,0,.36);
}

.server-page-conan .btn-secondary{
  background:rgba(8,5,4,.64);
  border-color:rgba(200,149,88,.40);
}

/* ==========================================================
   ARK DECORATIONS
   ========================================================== */
.server-page-ark{
  --ark-ground:url('../game-art/server-pages/ark-decor/ark-crystal-ground.webp');
  --ark-obelisk:url('../game-art/server-pages/ark-decor/ark-obelisk.webp');
  --ark-cliff:url('../game-art/server-pages/ark-decor/ark-ruin-cliff.webp');
  --ark-cyan:#38d9ff;
}

/* More lush sci-fi survival vibe */
.server-page-ark{
  background:
    radial-gradient(circle at 78% 12%, rgba(56,217,255,.18), transparent 30%),
    radial-gradient(circle at 14% 50%, rgba(80,180,115,.08), transparent 34%),
    linear-gradient(180deg, #03121a 0%, #041018 52%, #03070d 100%);
}

.server-page-ark .server-page-bg{
  background:
    radial-gradient(circle at 76% 30%, rgba(56,217,255,.22), transparent 25%),
    linear-gradient(90deg, rgba(2,11,18,.96) 0%, rgba(2,11,18,.84) 30%, rgba(2,11,18,.50) 52%, rgba(2,11,18,.18) 70%, rgba(2,11,18,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.84)),
    var(--server-bg) center center / cover no-repeat;
}

/* Crystal ground ledge between hero and content */
.server-page-ark .server-page-hero .server-page-container::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-106px;
  width:min(1120px, 88vw);
  height:240px;
  transform:translateX(-50%);
  background:var(--ark-ground) center bottom / contain no-repeat;
  opacity:1;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.50)) saturate(1.05) brightness(.98);
  pointer-events:none;
  z-index:3;
}

/* Obelisk near info side card */
.server-page-ark .server-page-info-portal{
  position:relative;
  isolation:isolate;
}

.server-page-ark .server-page-info-portal::after{
  content:"";
  position:absolute;
  right:clamp(18px, 3vw, 70px);
  top:-190px;
  width:clamp(155px, 13vw, 235px);
  height:440px;
  background:var(--ark-obelisk) center bottom / contain no-repeat;
  opacity:1;
  filter:drop-shadow(0 0 26px rgba(56,217,255,.25)) drop-shadow(0 24px 42px rgba(0,0,0,.48)) saturate(1.12) brightness(1.02);
  pointer-events:none;
  z-index:3;
}

.server-page-ark .server-page-info-portal > *{
  position:relative;
  z-index:4;
}

.server-page-ark .portal-info-panel .portal-section-head{
  padding-right:230px;
}

/* Cliff/egg ruin as community side mascot */
.server-page-ark .portal-community-side{
  padding-top:220px;
  background:
    radial-gradient(circle at 50% 105px, rgba(56,217,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(5,19,27,.94), rgba(3,9,14,.96));
}

.server-page-ark .portal-community-side::before{
  content:"";
  position:absolute;
  left:50%;
  top:-36px;
  width:clamp(210px, 18vw, 330px);
  height:285px;
  transform:translateX(-50%);
  background:var(--ark-cliff) center top / contain no-repeat;
  opacity:1;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.46)) saturate(1.05) brightness(.98);
  pointer-events:none;
  z-index:2;
}

.server-page-ark .portal-community-side > *{
  position:relative;
  z-index:4;
}

/* Tech ground as section accent near trailer/start */
.server-page-ark .portal-join-panel{
  position:relative;
  isolation:isolate;
}

.server-page-ark .portal-join-panel::before{
  content:"";
  position:absolute;
  right:-54px;
  bottom:-54px;
  width:clamp(260px, 24vw, 420px);
  height:210px;
  background:var(--ark-ground) right bottom / contain no-repeat;
  opacity:.92;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.40)) saturate(1.02) brightness(.95);
  pointer-events:none;
  z-index:0;
}

.server-page-ark .portal-join-panel > *{
  position:relative;
  z-index:2;
}

/* ARK panels: cleaner sci-fi cards */
.server-page-ark .portal-panel,
.server-page-ark .server-info-card,
.server-page-ark .portal-gallery-card,
.server-page-ark .portal-benefit-card,
.server-page-ark .portal-rules-list li,
.server-page-ark .portal-steps-list li{
  background:
    linear-gradient(135deg, rgba(56,217,255,.075), transparent 28%),
    linear-gradient(180deg, rgba(7,18,28,.92), rgba(3,10,16,.96));
  border-color:rgba(56,217,255,.34);
  box-shadow:var(--decor-panel-shadow), inset 0 0 0 1px rgba(110,236,255,.045);
}

.server-page-ark .btn-primary{
  background:linear-gradient(180deg, #62edff 0%, #16a8d6 100%);
  border-color:#85f4ff;
  color:#021019;
  box-shadow:0 0 24px rgba(56,217,255,.18), inset 0 -4px 0 rgba(5,91,121,.38), 0 16px 34px rgba(0,0,0,.34);
}

.server-page-ark .btn-secondary{
  background:rgba(2,9,15,.64);
  border-color:rgba(56,217,255,.40);
}

/* ---------- Visibility / safety on smaller screens ---------- */
@media (max-width:1260px){
  .server-page-conan .server-page-hero .server-page-container::after,
  .server-page-ark .server-page-hero .server-page-container::after{
    width:96vw;
    opacity:.92;
  }

  .server-page-conan .portal-info-panel .portal-section-head,
  .server-page-ark .portal-info-panel .portal-section-head{
    padding-right:28px;
  }

  .server-page-conan .server-page-info-portal::after{
    right:-20px;
    top:-88px;
    width:230px;
    opacity:.75;
  }

  .server-page-ark .server-page-info-portal::after{
    right:-18px;
    top:-130px;
    width:160px;
    opacity:.75;
  }
}

@media (max-width:900px){
  .server-page-conan .server-page-hero .server-page-container::after,
  .server-page-ark .server-page-hero .server-page-container::after{
    bottom:-82px;
    height:170px;
  }

  .server-page-conan .server-page-info-portal::after,
  .server-page-ark .server-page-info-portal::after{
    display:none;
  }

  .server-page-conan .portal-community-side,
  .server-page-ark .portal-community-side{
    padding-top:190px;
  }

  .server-page-conan .portal-community-side::before,
  .server-page-ark .portal-community-side::before{
    width:220px;
    opacity:.9;
  }
}

@media (max-width:680px){
  .server-page-conan .server-page-hero .server-page-container::after,
  .server-page-ark .server-page-hero .server-page-container::after,
  .server-page-conan .portal-community-side::before,
  .server-page-ark .portal-community-side::before,
  .server-page-ark .portal-join-panel::before,
  .server-page-conan .server-page-features-portal::after{
    display:none;
  }

  .server-page-conan .portal-community-side,
  .server-page-ark .portal-community-side{
    padding-top:32px;
  }
}


/* ==========================================================
   v2.21.1 - Conan / ARK decoration placement fix
   Goal: decorations visible, but no longer placed over key buttons/text.
   ========================================================== */

/* ---------- CONAN: battlement moved below CTA area ---------- */

.server-page-conan .server-page-hero{
  overflow:visible;
}

.server-page-conan .server-page-hero .server-page-container::after{
  left:58%;
  bottom:-174px;
  width:min(980px, 70vw);
  height:235px;
  opacity:.96;
  z-index:1;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.58)) saturate(1.04) brightness(.93);
}

.server-page-conan .server-hero-copy,
.server-page-conan .server-page-actions,
.server-page-conan .server-hero-tags{
  position:relative;
  z-index:8;
}

.server-page-conan .server-page-char{
  z-index:4;
}

/* Give info block a little more top room because the battlement now acts like a divider */
.server-page-conan .server-page-info-portal{
  margin-top:18px;
}

/* Desert ruin moved to the outside corner of info/CTA instead of sitting on the content edge */
.server-page-conan .server-page-info-portal::after{
  right:clamp(-18px, 1.5vw, 22px);
  top:-72px;
  width:clamp(190px, 16vw, 280px);
  height:280px;
  opacity:.95;
  z-index:2;
}

.server-page-conan .portal-info-panel .portal-section-head{
  padding-right:210px;
}

/* Conan community banner becomes a clean top emblem, not an oversized hanging object */
.server-page-conan .portal-community-side{
  padding-top:190px;
}

.server-page-conan .portal-community-side::before{
  top:-22px;
  width:clamp(165px, 14vw, 245px);
  height:260px;
  opacity:.96;
}

/* ---------- ARK: move cliff decoration into sidebar background ---------- */

.server-page-ark .portal-community-side{
  padding-top:150px;
  overflow:visible;
}

.server-page-ark .portal-community-side::before{
  top:-18px;
  left:50%;
  width:clamp(185px, 15vw, 255px);
  height:180px;
  opacity:.92;
  transform:translateX(-50%);
  z-index:1;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.44)) saturate(1.02) brightness(.95);
}

.server-page-ark .portal-community-side > *{
  position:relative;
  z-index:4;
}

/* ARK obelisk was too close to the content. Move it outward and slightly down. */
.server-page-ark .server-page-info-portal::after{
  right:clamp(-18px, 1.6vw, 26px);
  top:-150px;
  width:clamp(135px, 11vw, 200px);
  height:380px;
  opacity:.95;
}

.server-page-ark .portal-info-panel .portal-section-head{
  padding-right:190px;
}

/* ARK ground ledge: lower and a bit smaller, so it does not look pasted over the section */
.server-page-ark .server-page-hero .server-page-container::after{
  bottom:-134px;
  width:min(980px, 80vw);
  height:215px;
  opacity:.92;
  z-index:2;
}

/* Join panel ground decoration becomes a bottom-right scene piece */
.server-page-ark .portal-join-panel::before{
  right:-70px;
  bottom:-72px;
  width:clamp(230px, 20vw, 340px);
  height:180px;
  opacity:.58;
  z-index:0;
}

/* ---------- Shared mobile safety ---------- */

@media (max-width:1260px){
  .server-page-conan .server-page-hero .server-page-container::after{
    left:58%;
    bottom:-142px;
    width:82vw;
    height:205px;
  }

  .server-page-conan .portal-info-panel .portal-section-head,
  .server-page-ark .portal-info-panel .portal-section-head{
    padding-right:28px;
  }

  .server-page-conan .server-page-info-portal::after,
  .server-page-ark .server-page-info-portal::after{
    opacity:.55;
    right:-42px;
  }
}

@media (max-width:900px){
  .server-page-conan .server-page-hero .server-page-container::after,
  .server-page-ark .server-page-hero .server-page-container::after{
    bottom:-96px;
    height:155px;
    opacity:.75;
  }

  .server-page-conan .server-page-info-portal{
    margin-top:0;
  }

  .server-page-conan .server-page-info-portal::after,
  .server-page-ark .server-page-info-portal::after{
    display:none;
  }

  .server-page-conan .portal-community-side,
  .server-page-ark .portal-community-side{
    padding-top:160px;
  }

  .server-page-conan .portal-community-side::before,
  .server-page-ark .portal-community-side::before{
    width:190px;
    opacity:.82;
  }
}

@media (max-width:680px){
  .server-page-conan .server-page-hero .server-page-container::after,
  .server-page-ark .server-page-hero .server-page-container::after,
  .server-page-conan .portal-community-side::before,
  .server-page-ark .portal-community-side::before,
  .server-page-ark .portal-join-panel::before,
  .server-page-conan .server-page-features-portal::after{
    display:none;
  }

  .server-page-conan .portal-community-side,
  .server-page-ark .portal-community-side{
    padding-top:32px;
  }
}


/* ==========================================================
   v2.21.2 - Conan / ARK hero polish
   Less empty hero space, better decoration integration, stronger light, premium CTA.
   ========================================================== */

/* Shared hero improvement for Conan and ARK */
.server-page-conan .server-page-hero,
.server-page-ark .server-page-hero{
  min-height:790px;
  padding-top:118px;
  padding-bottom:88px;
  overflow:visible;
}

/* Subtle readable text block instead of flat text floating on black */
.server-page-conan .server-hero-copy,
.server-page-ark .server-hero-copy{
  position:relative;
  width:min(650px, 45vw);
  max-width:650px;
  padding:34px 34px 32px;
  border-left:1px solid var(--ui-border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 8%, rgba(0,0,0,.26)), transparent 82%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
  box-shadow:inset 1px 0 0 rgba(255,255,255,.035);
  z-index:8;
}

.server-page-conan .server-hero-copy::before,
.server-page-ark .server-hero-copy::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:1px;
  background:linear-gradient(180deg, transparent, var(--portal-accent), transparent);
  opacity:.72;
}

.server-page-conan .server-page-desc,
.server-page-ark .server-page-desc{
  color:rgba(255,255,255,.91);
  text-shadow:0 2px 16px rgba(0,0,0,.42);
}

.server-page-conan .server-page-substory,
.server-page-ark .server-page-substory{
  color:rgba(236,239,245,.76);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Tags become more premium and less flat */
.server-page-conan .server-hero-tags li,
.server-page-ark .server-hero-tags li{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-color:var(--ui-border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 10px 22px rgba(0,0,0,.22);
}

/* Hero buttons: more premium, stronger hover target */
.server-page-conan .server-page-actions,
.server-page-ark .server-page-actions{
  gap:14px;
}

.server-page-conan .btn-primary,
.server-page-ark .btn-primary,
.server-page-conan .btn-secondary,
.server-page-ark .btn-secondary{
  min-width:180px;
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.server-page-conan .btn-primary:hover,
.server-page-ark .btn-primary:hover,
.server-page-conan .btn-secondary:hover,
.server-page-ark .btn-secondary:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

/* ==========================================================
   CONAN HERO
   ========================================================== */

/* Add warmer cinematic atmosphere in the empty middle */
.server-page-conan .server-page-hero::before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 70% 36%, rgba(212,130,55,.18), transparent 18%),
    radial-gradient(circle at 58% 48%, rgba(111,31,16,.13), transparent 30%),
    radial-gradient(circle at 45% 68%, rgba(220,150,75,.08), transparent 26%),
    repeating-radial-gradient(circle at 54% 54%, rgba(218,146,74,.16) 0 1px, transparent 2px 54px);
  opacity:.78;
  mask-image:linear-gradient(90deg, transparent 3%, #000 24%, #000 92%, transparent);
}

.server-page-conan .server-page-hero::after{
  content:"";
  display:block;
  position:absolute;
  inset:118px 22% 98px 34%;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 62% 45%, rgba(213,151,84,.20), transparent 23%),
    linear-gradient(90deg, transparent, rgba(200,149,88,.10), transparent);
  border:0;
  opacity:.78;
  width:auto;
  height:auto;
}

/* Warmer spotlight behind Conan character */
.server-page-conan .server-page-char{
  right:6.2%;
  width:min(34vw, 575px);
  z-index:5;
  filter:
    drop-shadow(0 36px 60px rgba(0,0,0,.56))
    drop-shadow(0 0 28px rgba(200,149,88,.12));
}

.server-page-conan .server-page-bg{
  background:
    radial-gradient(circle at 77% 34%, rgba(200,149,88,.24), transparent 25%),
    radial-gradient(circle at 58% 58%, rgba(115,35,18,.12), transparent 26%),
    linear-gradient(90deg, rgba(10,5,3,.96) 0%, rgba(10,5,3,.84) 28%, rgba(10,5,3,.45) 53%, rgba(10,5,3,.16) 69%, rgba(10,5,3,.54) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.86)),
    var(--server-bg) center center / cover no-repeat;
}

/* Make battlement a true ground layer below character, not a floating strip */
.server-page-conan .server-page-hero .server-page-container::after{
  left:66%;
  bottom:-146px;
  width:min(920px, 64vw);
  height:250px;
  z-index:3;
  opacity:1;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.62)) saturate(1.06) brightness(.98);
}

/* Add small bronze divider under CTA/tags without needing a new image */
.server-page-conan .server-page-actions::after{
  content:"";
  position:absolute;
  left:34px;
  bottom:-28px;
  width:min(420px, 34vw);
  height:1px;
  background:linear-gradient(90deg, rgba(200,149,88,.85), rgba(200,149,88,.20), transparent);
  box-shadow:0 0 18px rgba(200,149,88,.16);
}

.server-page-conan .btn-primary{
  box-shadow:inset 0 -4px 0 rgba(71,35,17,.46), 0 0 22px rgba(200,149,88,.12), 0 16px 34px rgba(0,0,0,.36);
}

.server-page-conan .btn-secondary:hover{
  border-color:rgba(200,149,88,.72);
  box-shadow:0 0 22px rgba(200,149,88,.14), 0 16px 34px rgba(0,0,0,.28);
}

/* ==========================================================
   ARK HERO
   ========================================================== */

/* Add tech/hex atmosphere in empty center */
.server-page-ark .server-page-hero::before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.70;
  background:
    radial-gradient(circle at 74% 42%, rgba(56,217,255,.22), transparent 20%),
    radial-gradient(circle at 58% 48%, rgba(56,217,255,.12), transparent 28%),
    linear-gradient(60deg, transparent 0 48%, rgba(56,217,255,.13) 49% 51%, transparent 52% 100%) 0 0/120px 120px,
    linear-gradient(-60deg, transparent 0 48%, rgba(56,217,255,.08) 49% 51%, transparent 52% 100%) 0 0/120px 120px;
  mask-image:linear-gradient(90deg, transparent 2%, #000 24%, #000 92%, transparent);
}

.server-page-ark .server-page-hero::after{
  content:"";
  display:block;
  position:absolute;
  inset:118px 17% 96px 34%;
  pointer-events:none;
  z-index:1;
  width:auto;
  height:auto;
  border:0;
  opacity:.76;
  background:
    radial-gradient(circle at 67% 44%, rgba(56,217,255,.22), transparent 23%),
    linear-gradient(90deg, transparent, rgba(56,217,255,.12), transparent);
}

/* Stronger obelisk glow integrated with background */
.server-page-ark .server-page-bg{
  background:
    radial-gradient(circle at 72% 33%, rgba(56,217,255,.28), transparent 24%),
    radial-gradient(circle at 62% 52%, rgba(80,190,120,.09), transparent 27%),
    linear-gradient(90deg, rgba(2,11,18,.96) 0%, rgba(2,11,18,.82) 28%, rgba(2,11,18,.44) 53%, rgba(2,11,18,.14) 70%, rgba(2,11,18,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.84)),
    var(--server-bg) center center / cover no-repeat;
}

/* Character separation and glow */
.server-page-ark .server-page-char{
  right:7.4%;
  width:min(32vw, 520px);
  z-index:5;
  filter:
    drop-shadow(0 36px 60px rgba(0,0,0,.54))
    drop-shadow(0 0 30px rgba(56,217,255,.16));
}

/* Crystal ground moved under the ARK character and made wider as a base */
.server-page-ark .server-page-hero .server-page-container::after{
  left:72%;
  bottom:-142px;
  width:min(620px, 45vw);
  height:235px;
  opacity:1;
  z-index:3;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.52)) drop-shadow(0 0 24px rgba(56,217,255,.13)) saturate(1.08) brightness(1.02);
}

/* Small tech divider under CTA */
.server-page-ark .server-page-actions::after{
  content:"";
  position:absolute;
  left:34px;
  bottom:-28px;
  width:min(430px, 34vw);
  height:1px;
  background:linear-gradient(90deg, rgba(56,217,255,.85), rgba(56,217,255,.22), transparent);
  box-shadow:0 0 18px rgba(56,217,255,.22);
}

.server-page-ark .btn-primary{
  box-shadow:0 0 28px rgba(56,217,255,.19), inset 0 -4px 0 rgba(5,91,121,.38), 0 16px 34px rgba(0,0,0,.34);
}

.server-page-ark .btn-secondary:hover{
  border-color:rgba(56,217,255,.72);
  box-shadow:0 0 24px rgba(56,217,255,.16), 0 16px 34px rgba(0,0,0,.28);
}

/* ==========================================================
   Section transition polish
   ========================================================== */

.server-page-conan .server-page-info-portal,
.server-page-ark .server-page-info-portal{
  border-top:1px solid color-mix(in srgb, var(--portal-accent) 22%, rgba(255,255,255,.04));
}

.server-page-conan .portal-top-grid,
.server-page-ark .portal-top-grid{
  position:relative;
}

.server-page-conan .portal-top-grid::before,
.server-page-ark .portal-top-grid::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--portal-accent), transparent);
  opacity:.20;
  pointer-events:none;
}

/* A little more readability in first server info panel */
.server-page-conan .portal-info-panel,
.server-page-ark .portal-info-panel{
  background:
    radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(8,12,18,.93), rgba(4,8,12,.96));
}

/* Responsive */
@media (max-width:1260px){
  .server-page-conan .server-hero-copy,
  .server-page-ark .server-hero-copy{
    width:min(640px, 55vw);
  }

  .server-page-conan .server-page-hero .server-page-container::after{
    left:66%;
    width:70vw;
  }

  .server-page-ark .server-page-hero .server-page-container::after{
    left:72%;
    width:52vw;
  }
}

@media (max-width:980px){
  .server-page-conan .server-hero-copy,
  .server-page-ark .server-hero-copy{
    width:100%;
    max-width:100%;
    padding:26px 22px;
  }

  .server-page-conan .server-page-hero::before,
  .server-page-ark .server-page-hero::before,
  .server-page-conan .server-page-hero::after,
  .server-page-ark .server-page-hero::after{
    opacity:.35;
  }

  .server-page-conan .server-page-actions::after,
  .server-page-ark .server-page-actions::after{
    display:none;
  }
}

@media (max-width:680px){
  .server-page-conan .server-hero-copy,
  .server-page-ark .server-hero-copy{
    border-left:0;
    background:transparent;
    padding:0;
  }

  .server-page-conan .server-hero-copy::before,
  .server-page-ark .server-hero-copy::before{
    display:none;
  }
}


/* ==========================================================
   v2.21.3 - Themed topbar for Minecraft / ARK / Conan
   Goal: match each server page palette so header feels native
   ========================================================== */

.fp-server-page-body .fp-topbar{
  isolation:isolate;
}

.fp-server-page-body .fp-topbar::before,
.fp-server-page-body .fp-topbar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.fp-server-page-body .fp-topbar > *{
  position:relative;
  z-index:1;
}

.server-page-conan .fp-topbar,
.server-page-ark .fp-topbar,
.server-page-minecraft .fp-topbar{
  backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(0,0,0,.32);
}

.server-page-conan .fp-topbar{
  background:
    linear-gradient(180deg, rgba(20,10,6,.97), rgba(12,7,5,.95)),
    linear-gradient(90deg, rgba(208,161,101,.10), transparent 30%, transparent 70%, rgba(208,161,101,.08));
  border-bottom:1px solid rgba(208,161,101,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 -1px 0 rgba(208,161,101,.08);
}
.server-page-conan .fp-topbar::before{
  background:
    radial-gradient(circle at 14% 50%, rgba(208,161,101,.16), transparent 22%),
    linear-gradient(90deg, transparent, rgba(208,161,101,.08), transparent);
  opacity:.9;
}
.server-page-conan .fp-topbar::after{
  top:auto;
  height:2px;
  background:linear-gradient(90deg, rgba(208,161,101,0), rgba(208,161,101,.95), rgba(208,161,101,0));
  opacity:.62;
}
.server-page-conan .fp-logo-tagline-wrap{
  border-color:rgba(208,161,101,.24);
  background:linear-gradient(135deg, rgba(49,26,15,.78), rgba(18,11,8,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 22px rgba(208,161,101,.08);
}
.server-page-conan .fp-logo-tagline-wrap::before{background:radial-gradient(circle, rgba(208,161,101,.20), transparent 70%);}
.server-page-conan .fp-logo-tagline-wrap::after{background:linear-gradient(90deg, rgba(208,161,101,0), rgba(208,161,101,.78), rgba(208,161,101,0));}
.server-page-conan .fp-nav-links a:hover,
.server-page-conan .fp-nav-links a.active,
.server-page-conan .fp-nav-links .current-menu-item > a{color:#f1c58b;}
.server-page-conan .fp-nav-links a:hover:after,
.server-page-conan .fp-nav-links a.active:after,
.server-page-conan .fp-nav-links .current-menu-item > a:after{background:#d0a165; box-shadow:0 0 16px rgba(208,161,101,.34);}
.server-page-conan .fp-lang-switcher{border-color:rgba(208,161,101,.22); background:rgba(15,10,8,.8); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 18px rgba(0,0,0,.20);}
.server-page-conan .fp-lang-switcher a:hover{background:rgba(208,161,101,.10);}
.server-page-conan .fp-lang-switcher a.is-active{background:linear-gradient(180deg, #e0b377, #c48f4b); color:#160d08; box-shadow:0 0 18px rgba(208,161,101,.24);}
.server-page-conan .fp-discord-top{border-color:rgba(208,161,101,.42); background:linear-gradient(180deg, rgba(32,17,12,.82), rgba(12,8,6,.82)); box-shadow:inset 0 0 0 1px rgba(208,161,101,.08), 0 10px 24px rgba(0,0,0,.24);}
.server-page-conan .fp-discord-top:hover{background:linear-gradient(180deg, rgba(43,24,17,.92), rgba(16,10,8,.90)); box-shadow:0 0 22px rgba(208,161,101,.14), 0 10px 24px rgba(0,0,0,.24);}
.server-page-conan .fp-arrow{color:#d0a165;}

.server-page-ark .fp-topbar{
  background:
    linear-gradient(180deg, rgba(4,13,22,.97), rgba(4,10,17,.95)),
    linear-gradient(90deg, rgba(107,220,255,.10), transparent 34%, transparent 70%, rgba(107,220,255,.10));
  border-bottom:1px solid rgba(107,220,255,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 -1px 0 rgba(107,220,255,.08);
}
.server-page-ark .fp-topbar::before{
  background:
    radial-gradient(circle at 84% 50%, rgba(107,220,255,.16), transparent 24%),
    linear-gradient(90deg, transparent, rgba(107,220,255,.08), transparent);
  opacity:.95;
}
.server-page-ark .fp-topbar::after{
  top:auto;
  height:2px;
  background:linear-gradient(90deg, rgba(107,220,255,0), rgba(107,220,255,.95), rgba(107,220,255,0));
  opacity:.65;
}
.server-page-ark .fp-logo-tagline-wrap{
  border-color:rgba(107,220,255,.22);
  background:linear-gradient(135deg, rgba(10,31,42,.78), rgba(5,14,25,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 22px rgba(107,220,255,.08);
}
.server-page-ark .fp-logo-tagline-wrap::before{background:radial-gradient(circle, rgba(107,220,255,.22), transparent 70%);}
.server-page-ark .fp-logo-tagline-wrap::after{background:linear-gradient(90deg, rgba(107,220,255,0), rgba(107,220,255,.82), rgba(107,220,255,0));}
.server-page-ark .fp-nav-links a:hover,
.server-page-ark .fp-nav-links a.active,
.server-page-ark .fp-nav-links .current-menu-item > a{color:#9cedff;}
.server-page-ark .fp-nav-links a:hover:after,
.server-page-ark .fp-nav-links a.active:after,
.server-page-ark .fp-nav-links .current-menu-item > a:after{background:#6bdcff; box-shadow:0 0 16px rgba(107,220,255,.38);}
.server-page-ark .fp-lang-switcher{border-color:rgba(107,220,255,.22); background:rgba(5,14,25,.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 18px rgba(0,0,0,.20);}
.server-page-ark .fp-lang-switcher a:hover{background:rgba(107,220,255,.10);}
.server-page-ark .fp-lang-switcher a.is-active{background:linear-gradient(180deg, #8beaff, #5fd8ff); color:#05131e; box-shadow:0 0 18px rgba(107,220,255,.24);}
.server-page-ark .fp-discord-top{border-color:rgba(107,220,255,.42); background:linear-gradient(180deg, rgba(7,25,35,.82), rgba(4,11,18,.82)); box-shadow:inset 0 0 0 1px rgba(107,220,255,.08), 0 10px 24px rgba(0,0,0,.24);}
.server-page-ark .fp-discord-top:hover{background:linear-gradient(180deg, rgba(11,34,45,.92), rgba(5,15,22,.90)); box-shadow:0 0 22px rgba(107,220,255,.16), 0 10px 24px rgba(0,0,0,.24);}
.server-page-ark .fp-arrow{color:#6bdcff;}

.server-page-minecraft .fp-topbar{
  background:
    linear-gradient(180deg, rgba(8,19,10,.97), rgba(7,15,9,.95)),
    linear-gradient(90deg, rgba(155,225,91,.10), transparent 34%, transparent 70%, rgba(155,225,91,.10));
  border-bottom:1px solid rgba(155,225,91,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 -1px 0 rgba(155,225,91,.08);
}
.server-page-minecraft .fp-topbar::before{
  background:
    linear-gradient(90deg, rgba(155,225,91,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(155,225,91,.04) 1px, transparent 1px),
    radial-gradient(circle at 18% 50%, rgba(155,225,91,.12), transparent 24%);
  background-size:26px 26px, 26px 26px, auto;
  opacity:.82;
}
.server-page-minecraft .fp-topbar::after{
  top:auto;
  height:2px;
  background:linear-gradient(90deg, rgba(155,225,91,0), rgba(155,225,91,.92), rgba(155,225,91,0));
  opacity:.62;
}
.server-page-minecraft .fp-logo-tagline-wrap{
  border-color:rgba(155,225,91,.22);
  background:linear-gradient(135deg, rgba(18,33,13,.80), rgba(8,15,10,.50));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 22px rgba(155,225,91,.08);
}
.server-page-minecraft .fp-logo-tagline-wrap::before{background:radial-gradient(circle, rgba(155,225,91,.22), transparent 70%);}
.server-page-minecraft .fp-logo-tagline-wrap::after{background:linear-gradient(90deg, rgba(155,225,91,0), rgba(155,225,91,.82), rgba(155,225,91,0));}
.server-page-minecraft .fp-nav-links a:hover,
.server-page-minecraft .fp-nav-links a.active,
.server-page-minecraft .fp-nav-links .current-menu-item > a{color:#bfff88;}
.server-page-minecraft .fp-nav-links a:hover:after,
.server-page-minecraft .fp-nav-links a.active:after,
.server-page-minecraft .fp-nav-links .current-menu-item > a:after{background:#9be15b; box-shadow:0 0 16px rgba(155,225,91,.34);}
.server-page-minecraft .fp-lang-switcher{border-color:rgba(155,225,91,.22); background:rgba(9,18,10,.84); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 18px rgba(0,0,0,.20);}
.server-page-minecraft .fp-lang-switcher a:hover{background:rgba(155,225,91,.10);}
.server-page-minecraft .fp-lang-switcher a.is-active{background:linear-gradient(180deg, #b8f27e, #90dc4a); color:#0c1608; box-shadow:0 0 18px rgba(155,225,91,.24);}
.server-page-minecraft .fp-discord-top{border-color:rgba(155,225,91,.42); background:linear-gradient(180deg, rgba(17,31,11,.82), rgba(8,15,8,.82)); box-shadow:inset 0 0 0 1px rgba(155,225,91,.08), 0 10px 24px rgba(0,0,0,.24);}
.server-page-minecraft .fp-discord-top:hover{background:linear-gradient(180deg, rgba(25,42,14,.92), rgba(10,18,10,.90)); box-shadow:0 0 22px rgba(155,225,91,.14), 0 10px 24px rgba(0,0,0,.24);}
.server-page-minecraft .fp-arrow{color:#9be15b;}

/* Keep mobile header readable */
@media (max-width: 900px){
  .server-page-conan .fp-topbar,
  .server-page-ark .fp-topbar,
  .server-page-minecraft .fp-topbar{
    backdrop-filter:blur(10px);
  }
}


/* ==========================================================
   v2.21.4 - themed topbar selector fix
   Topbar is outside .server-page-* container, so use body classes.
   ========================================================== */

body.fp-server-page-body-conan .fp-topbar,
body.fp-server-page-body-ark .fp-topbar,
body.fp-server-page-body-minecraft .fp-topbar{
  backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  isolation:isolate;
}

body.fp-server-page-body-conan .fp-topbar::before,
body.fp-server-page-body-conan .fp-topbar::after,
body.fp-server-page-body-ark .fp-topbar::before,
body.fp-server-page-body-ark .fp-topbar::after,
body.fp-server-page-body-minecraft .fp-topbar::before,
body.fp-server-page-body-minecraft .fp-topbar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

body.fp-server-page-body-conan .fp-topbar > *,
body.fp-server-page-body-ark .fp-topbar > *,
body.fp-server-page-body-minecraft .fp-topbar > *{
  position:relative;
  z-index:1;
}

/* CONAN */
body.fp-server-page-body-conan .fp-topbar{
  background:
    linear-gradient(180deg, rgba(28,14,7,.98), rgba(13,8,5,.96)),
    linear-gradient(90deg, rgba(208,161,101,.16), transparent 32%, transparent 70%, rgba(208,161,101,.10));
  border-bottom:1px solid rgba(208,161,101,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.42), inset 0 -1px 0 rgba(208,161,101,.12);
}

body.fp-server-page-body-conan .fp-topbar::before{
  background:
    radial-gradient(circle at 12% 50%, rgba(208,161,101,.20), transparent 24%),
    radial-gradient(circle at 82% 50%, rgba(140,64,32,.12), transparent 22%),
    linear-gradient(90deg, transparent, rgba(208,161,101,.09), transparent);
  opacity:.92;
}

body.fp-server-page-body-conan .fp-topbar::after{
  top:auto;
  height:2px;
  background:linear-gradient(90deg, rgba(208,161,101,0), rgba(208,161,101,.95), rgba(208,161,101,0));
  opacity:.70;
}

body.fp-server-page-body-conan .fp-logo-tagline-wrap{
  border-color:rgba(208,161,101,.28);
  background:linear-gradient(135deg, rgba(49,26,15,.82), rgba(18,11,8,.50));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 22px rgba(208,161,101,.10);
}

body.fp-server-page-body-conan .fp-logo-tagline-wrap::before{
  background:radial-gradient(circle, rgba(208,161,101,.22), transparent 70%);
}

body.fp-server-page-body-conan .fp-logo-tagline-wrap::after{
  background:linear-gradient(90deg, rgba(208,161,101,0), rgba(208,161,101,.86), rgba(208,161,101,0));
}

body.fp-server-page-body-conan .fp-nav-links a:hover,
body.fp-server-page-body-conan .fp-nav-links a.active,
body.fp-server-page-body-conan .fp-nav-links .current-menu-item > a{
  color:#f1c58b;
}

body.fp-server-page-body-conan .fp-nav-links a:hover:after,
body.fp-server-page-body-conan .fp-nav-links a.active:after,
body.fp-server-page-body-conan .fp-nav-links .current-menu-item > a:after{
  background:#d0a165;
  box-shadow:0 0 16px rgba(208,161,101,.38);
}

body.fp-server-page-body-conan .fp-lang-switcher{
  border-color:rgba(208,161,101,.28);
  background:rgba(15,10,8,.82);
}

body.fp-server-page-body-conan .fp-lang-switcher a:hover{
  background:rgba(208,161,101,.12);
}

body.fp-server-page-body-conan .fp-lang-switcher a.is-active{
  background:linear-gradient(180deg, #e0b377, #c48f4b);
  color:#160d08;
  box-shadow:0 0 18px rgba(208,161,101,.28);
}

body.fp-server-page-body-conan .fp-discord-top{
  border-color:rgba(208,161,101,.56);
  background:linear-gradient(180deg, rgba(35,18,12,.88), rgba(13,8,6,.86));
  box-shadow:inset 0 0 0 1px rgba(208,161,101,.10), 0 10px 24px rgba(0,0,0,.26);
}

body.fp-server-page-body-conan .fp-discord-top:hover{
  background:linear-gradient(180deg, rgba(45,24,16,.96), rgba(18,10,7,.92));
  box-shadow:0 0 22px rgba(208,161,101,.18), 0 10px 24px rgba(0,0,0,.26);
}

body.fp-server-page-body-conan .fp-arrow{
  color:#d0a165;
}

/* ARK */
body.fp-server-page-body-ark .fp-topbar{
  background:
    linear-gradient(180deg, rgba(4,16,27,.98), rgba(4,10,17,.96)),
    linear-gradient(90deg, rgba(107,220,255,.16), transparent 34%, transparent 70%, rgba(107,220,255,.12));
  border-bottom:1px solid rgba(107,220,255,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.42), inset 0 -1px 0 rgba(107,220,255,.12);
}

body.fp-server-page-body-ark .fp-topbar::before{
  background:
    radial-gradient(circle at 84% 50%, rgba(107,220,255,.20), transparent 24%),
    linear-gradient(90deg, transparent, rgba(107,220,255,.10), transparent);
  opacity:.95;
}

body.fp-server-page-body-ark .fp-topbar::after{
  top:auto;
  height:2px;
  background:linear-gradient(90deg, rgba(107,220,255,0), rgba(107,220,255,.95), rgba(107,220,255,0));
  opacity:.72;
}

body.fp-server-page-body-ark .fp-logo-tagline-wrap{
  border-color:rgba(107,220,255,.28);
  background:linear-gradient(135deg, rgba(10,31,42,.82), rgba(5,14,25,.50));
}

body.fp-server-page-body-ark .fp-logo-tagline-wrap::before{
  background:radial-gradient(circle, rgba(107,220,255,.24), transparent 70%);
}

body.fp-server-page-body-ark .fp-logo-tagline-wrap::after{
  background:linear-gradient(90deg, rgba(107,220,255,0), rgba(107,220,255,.86), rgba(107,220,255,0));
}

body.fp-server-page-body-ark .fp-nav-links a:hover,
body.fp-server-page-body-ark .fp-nav-links a.active,
body.fp-server-page-body-ark .fp-nav-links .current-menu-item > a{
  color:#9cedff;
}

body.fp-server-page-body-ark .fp-nav-links a:hover:after,
body.fp-server-page-body-ark .fp-nav-links a.active:after,
body.fp-server-page-body-ark .fp-nav-links .current-menu-item > a:after{
  background:#6bdcff;
  box-shadow:0 0 16px rgba(107,220,255,.40);
}

body.fp-server-page-body-ark .fp-lang-switcher{
  border-color:rgba(107,220,255,.28);
  background:rgba(5,14,25,.84);
}

body.fp-server-page-body-ark .fp-lang-switcher a:hover{
  background:rgba(107,220,255,.12);
}

body.fp-server-page-body-ark .fp-lang-switcher a.is-active{
  background:linear-gradient(180deg, #8beaff, #5fd8ff);
  color:#05131e;
  box-shadow:0 0 18px rgba(107,220,255,.28);
}

body.fp-server-page-body-ark .fp-discord-top{
  border-color:rgba(107,220,255,.56);
  background:linear-gradient(180deg, rgba(7,25,35,.88), rgba(4,11,18,.86));
  box-shadow:inset 0 0 0 1px rgba(107,220,255,.10), 0 10px 24px rgba(0,0,0,.26);
}

body.fp-server-page-body-ark .fp-discord-top:hover{
  background:linear-gradient(180deg, rgba(11,34,45,.96), rgba(5,15,22,.92));
  box-shadow:0 0 22px rgba(107,220,255,.18), 0 10px 24px rgba(0,0,0,.26);
}

body.fp-server-page-body-ark .fp-arrow{
  color:#6bdcff;
}

/* MINECRAFT */
body.fp-server-page-body-minecraft .fp-topbar{
  background:
    linear-gradient(180deg, rgba(8,21,10,.98), rgba(7,15,9,.96)),
    linear-gradient(90deg, rgba(155,225,91,.16), transparent 34%, transparent 70%, rgba(155,225,91,.12));
  border-bottom:1px solid rgba(155,225,91,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.42), inset 0 -1px 0 rgba(155,225,91,.12);
}

body.fp-server-page-body-minecraft .fp-topbar::before{
  background:
    linear-gradient(90deg, rgba(155,225,91,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(155,225,91,.045) 1px, transparent 1px),
    radial-gradient(circle at 18% 50%, rgba(155,225,91,.14), transparent 24%);
  background-size:26px 26px, 26px 26px, auto;
  opacity:.85;
}

body.fp-server-page-body-minecraft .fp-topbar::after{
  top:auto;
  height:2px;
  background:linear-gradient(90deg, rgba(155,225,91,0), rgba(155,225,91,.92), rgba(155,225,91,0));
  opacity:.68;
}

body.fp-server-page-body-minecraft .fp-logo-tagline-wrap{
  border-color:rgba(155,225,91,.28);
  background:linear-gradient(135deg, rgba(18,33,13,.84), rgba(8,15,10,.52));
}

body.fp-server-page-body-minecraft .fp-logo-tagline-wrap::before{
  background:radial-gradient(circle, rgba(155,225,91,.24), transparent 70%);
}

body.fp-server-page-body-minecraft .fp-logo-tagline-wrap::after{
  background:linear-gradient(90deg, rgba(155,225,91,0), rgba(155,225,91,.86), rgba(155,225,91,0));
}

body.fp-server-page-body-minecraft .fp-nav-links a:hover,
body.fp-server-page-body-minecraft .fp-nav-links a.active,
body.fp-server-page-body-minecraft .fp-nav-links .current-menu-item > a{
  color:#bfff88;
}

body.fp-server-page-body-minecraft .fp-nav-links a:hover:after,
body.fp-server-page-body-minecraft .fp-nav-links a.active:after,
body.fp-server-page-body-minecraft .fp-nav-links .current-menu-item > a:after{
  background:#9be15b;
  box-shadow:0 0 16px rgba(155,225,91,.38);
}

body.fp-server-page-body-minecraft .fp-lang-switcher{
  border-color:rgba(155,225,91,.28);
  background:rgba(9,18,10,.86);
}

body.fp-server-page-body-minecraft .fp-lang-switcher a:hover{
  background:rgba(155,225,91,.12);
}

body.fp-server-page-body-minecraft .fp-lang-switcher a.is-active{
  background:linear-gradient(180deg, #b8f27e, #90dc4a);
  color:#0c1608;
  box-shadow:0 0 18px rgba(155,225,91,.28);
}

body.fp-server-page-body-minecraft .fp-discord-top{
  border-color:rgba(155,225,91,.56);
  background:linear-gradient(180deg, rgba(17,31,11,.88), rgba(8,15,8,.86));
  box-shadow:inset 0 0 0 1px rgba(155,225,91,.10), 0 10px 24px rgba(0,0,0,.26);
}

body.fp-server-page-body-minecraft .fp-discord-top:hover{
  background:linear-gradient(180deg, rgba(25,42,14,.96), rgba(10,18,10,.92));
  box-shadow:0 0 22px rgba(155,225,91,.18), 0 10px 24px rgba(0,0,0,.26);
}

body.fp-server-page-body-minecraft .fp-arrow{
  color:#9be15b;
}


/* v2.21.5: fixed PHP body class variable. Topbar classes now use $key in functions.php. */

/* ==========================================================
   v2.21.6 - global polish for Conan / ARK / Minecraft pages
   Focus: cleaner information section, better empty gallery,
   denser feature cards, calmer Discord side cards.
   ========================================================== */

/* ---------- Shared section rhythm ---------- */
.server-page-section{
  padding-bottom:64px;
}

.server-page-divider{
  margin:6px auto 42px;
}

.portal-top-grid,
.portal-experience-grid,
.portal-community-grid,
.portal-rules-grid{
  align-items:start;
}

.portal-panel,
.portal-trailer-panel,
.portal-join-panel,
.portal-community-main,
.portal-community-side,
.portal-rules-copy,
.portal-cta-banner{
  overflow:hidden;
}

.portal-section-head{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:108px;
  padding:26px 28px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 68%),
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 72%);
  backdrop-filter:blur(2px);
}

.portal-section-head h2,
.portal-heading h2,
.portal-rules-copy h2,
.portal-cta-copy h2,
.portal-community-copy h2,
.portal-side-card h3{
  text-shadow:0 10px 24px rgba(0,0,0,.32);
}

.portal-section-head .portal-kicker,
.portal-heading .portal-kicker{
  margin-bottom:12px;
}

/* ---------- Information section is now cleaner and more readable ---------- */
.server-page-info-portal{
  margin-top:10px;
  padding-top:10px;
  padding-bottom:46px;
}

.portal-top-grid{
  gap:20px;
}

.portal-info-grid{
  gap:10px;
  padding:14px;
}

.server-info-card{
  min-height:110px;
  padding:22px 20px 20px 56px;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), rgba(4,9,16,.30);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

.server-info-card:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

.server-info-card strong{
  text-wrap:balance;
}

.portal-side-card{
  padding:30px 26px 28px;
}

.portal-side-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  margin:0 0 14px;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  color:var(--portal-accent);
  border:1px solid color-mix(in srgb, var(--portal-accent) 28%, rgba(255,255,255,.10));
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}

.portal-highlight-list{
  display:grid;
  gap:10px;
  margin:18px 0 22px;
  padding:0;
  list-style:none;
}

.portal-highlight-list li{
  position:relative;
  padding-left:18px;
  color:rgba(240,243,248,.78);
  line-height:1.68;
}

.portal-highlight-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--portal-accent);
}

/* ---------- Benefits cards ---------- */
.portal-benefits-grid{
  gap:18px;
  counter-reset:server-benefits;
}

.portal-benefit-card{
  position:relative;
  min-height:252px;
  padding:30px 24px 24px;
  overflow:hidden;
  counter-increment:server-benefits;
}

.portal-benefit-card::after{
  content:"";
  position:absolute;
  right:-16px;
  bottom:-16px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:radial-gradient(circle, var(--portal-glow), transparent 72%);
  opacity:.70;
  pointer-events:none;
}

.portal-benefit-icon{
  width:62px;
  height:62px;
  margin:0 0 18px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 28%, rgba(255,255,255,.10));
  background:
    radial-gradient(circle at 50% 38%, var(--portal-glow), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 14px 28px rgba(0,0,0,.20);
}

.portal-benefit-icon::before{
  content:counter(server-benefits, decimal-leading-zero);
  font-family:var(--font-head);
  font-size:1.05rem;
  letter-spacing:.06em;
  color:var(--portal-accent);
}

.portal-benefit-card h3{
  max-width:15ch;
  margin:0 0 12px;
  line-height:1.08;
}

.portal-benefit-card p{
  margin:0;
  color:rgba(236,241,248,.78);
  line-height:1.72;
}

/* ---------- Community side card ---------- */
.portal-community-side{
  gap:12px;
}

.portal-discord-emblem{
  margin-top:0;
  box-shadow:0 0 26px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.03);
}

.portal-discord-title{
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:clamp(1.7rem, 2.3vw, 2.55rem);
  line-height:.94;
  color:#f2f0ea;
  text-wrap:balance;
}

.portal-discord-online{
  max-width:18ch;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.4;
  color:rgba(236,241,248,.72);
}

.portal-community-stat{
  color:var(--portal-accent);
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ---------- Empty gallery state for all pages ---------- */
.server-empty-gallery{
  grid-column:1 / -1;
  min-height:168px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:28px 20px;
  text-align:center;
  border:1px dashed color-mix(in srgb, var(--portal-accent) 40%, rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--portal-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(9,15,26,.92), rgba(4,8,14,.96));
  box-shadow:0 18px 42px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.025);
}

.server-empty-gallery::before{
  content:"◈";
  font-size:1.7rem;
  line-height:1;
  color:var(--portal-accent);
  text-shadow:0 0 20px var(--portal-glow);
}

.server-empty-gallery strong{
  display:block;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1.18rem;
  color:#f2f0ea;
}

.server-empty-gallery span{
  display:block;
  max-width:54ch;
  color:rgba(236,241,248,.76);
  line-height:1.72;
}

/* ---------- Game specific calm tweaks ---------- */
.server-page-minecraft .server-page-info-portal,
.server-page-conan .server-page-info-portal,
.server-page-ark .server-page-info-portal{
  border-top:0;
}

.server-page-minecraft .portal-community-side{
  padding-top:198px;
}

.server-page-minecraft .portal-community-side::before{
  top:18px;
  width:clamp(170px, 14vw, 240px);
  height:160px;
  opacity:.86;
}

.server-page-minecraft .server-page-info-portal::after{
  top:-34px;
  right:clamp(14px, 2.2vw, 44px);
  width:clamp(92px, 7vw, 138px);
}

.server-page-minecraft .portal-join-panel::before{
  right:-24px;
  top:-58px;
  width:clamp(160px, 15vw, 235px);
  opacity:.90;
}

.server-page-ark .portal-community-side{
  padding-top:164px;
}

.server-page-ark .portal-community-side::before{
  top:-10px;
  width:clamp(175px, 14vw, 235px);
  height:170px;
  opacity:.86;
}

.server-page-ark .server-page-info-portal::after{
  top:-132px;
  right:clamp(-8px, 1vw, 22px);
  width:clamp(124px, 10vw, 178px);
  opacity:.88;
}

.server-page-ark .portal-join-panel::before{
  opacity:.46;
}

.server-page-conan .portal-community-side{
  padding-top:178px;
}

.server-page-conan .portal-community-side::before{
  top:-16px;
  width:clamp(150px, 13vw, 220px);
  height:236px;
  opacity:.88;
}

.server-page-conan .server-page-info-portal::after{
  top:-62px;
  right:clamp(-8px, 1vw, 18px);
  width:clamp(170px, 14vw, 240px);
  height:250px;
  opacity:.84;
}

/* ---------- Responsive ---------- */
@media (max-width:1260px){
  .server-page-info-portal{
    margin-top:0;
    padding-top:0;
  }

  .portal-section-head{
    min-height:96px;
  }

  .portal-benefits-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:980px){
  .portal-section-head{
    min-height:auto;
    padding:22px 22px 16px;
  }

  .portal-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .portal-benefit-card{
    min-height:220px;
  }
}

@media (max-width:700px){
  .portal-info-grid,
  .portal-benefits-grid,
  .portal-gallery-grid{
    grid-template-columns:1fr;
  }

  .server-empty-gallery{
    min-height:138px;
    padding:22px 16px;
  }

  .server-empty-gallery strong{
    font-size:1.05rem;
  }

  .portal-community-side,
  .server-page-minecraft .portal-community-side,
  .server-page-ark .portal-community-side,
  .server-page-conan .portal-community-side{
    padding-top:32px;
  }
}


/* ==========================================================
   v2.21.7 - section wallpapers for server pages
   Dark, game-themed backgrounds inside panels/sections.
   ========================================================== */

.server-page-info-portal,
.server-page-experience-portal,
.server-page-community-portal,
.server-page-features-portal,
.server-page-rules-portal,
.server-page-final-cta{
  position:relative;
}

.server-page-info-portal::before,
.server-page-experience-portal::before,
.server-page-community-portal::before,
.server-page-features-portal::before,
.server-page-rules-portal::before,
.server-page-final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-size:cover;
  background-position:center;
  mix-blend-mode:screen;
}

.server-page-info-portal::before{ background-image:var(--section-info-bg); }
.server-page-experience-portal::before{ background-image:var(--section-experience-bg); }
.server-page-community-portal::before{ background-image:var(--section-community-bg); }
.server-page-features-portal::before{ background-image:var(--section-features-bg); }
.server-page-rules-portal::before{ background-image:var(--section-rules-bg); }
.server-page-final-cta::before{ background-image:var(--section-cta-bg); }

.portal-info-panel,
.portal-trailer-panel,
.portal-join-panel,
.portal-community-main,
.portal-community-side,
.portal-side-card,
.portal-benefit-card,
.portal-rules-copy,
.portal-rules-list,
.portal-cta-banner{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}

.portal-info-panel{
  background:
    linear-gradient(180deg, rgba(3,7,14,.50), rgba(3,7,14,.92) 30%, rgba(3,7,14,.98) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 12%, transparent), transparent 42%),
    var(--section-info-bg) center/cover no-repeat;
}

.portal-side-card{
  background:
    linear-gradient(180deg, rgba(4,9,17,.72), rgba(4,9,17,.96) 84%),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 22%),
    var(--section-info-bg) center/cover no-repeat;
}

.portal-trailer-panel{
  background:
    linear-gradient(180deg, rgba(4,8,15,.50), rgba(4,8,15,.90) 26%, rgba(4,8,15,.98) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 36%),
    var(--section-experience-bg) center/cover no-repeat;
}

.portal-join-panel{
  background:
    linear-gradient(180deg, rgba(4,8,15,.54), rgba(4,8,15,.92) 28%, rgba(4,8,15,.98) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 28%),
    var(--section-experience-bg) center/cover no-repeat;
}

.portal-community-main{
  background:
    linear-gradient(90deg, rgba(5,10,18,.84) 0%, rgba(5,10,18,.72) 28%, rgba(5,10,18,.88) 100%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 16%),
    var(--section-community-bg) center/cover no-repeat;
}

.portal-community-image{
  background:
    linear-gradient(90deg, rgba(8,12,19,.94) 0%, rgba(8,12,19,.72) 38%, rgba(8,12,19,.46) 100%),
    linear-gradient(180deg, rgba(8,12,19,.16), rgba(8,12,19,.62) 100%),
    var(--section-community-bg) center/cover no-repeat;
  opacity:.96;
}

.portal-community-side{
  background:
    linear-gradient(180deg, rgba(5,10,18,.72), rgba(5,10,18,.96) 84%),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 11%, transparent), transparent 26%),
    var(--section-community-bg) center 14%/cover no-repeat;
}

.portal-benefit-card{
  background:
    linear-gradient(180deg, rgba(5,10,18,.56), rgba(5,10,18,.94) 32%, rgba(5,10,18,.98) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 8%, transparent), transparent 20%),
    var(--section-features-bg) center/cover no-repeat;
}

.portal-rules-copy,
.portal-rules-list{
  background:
    linear-gradient(180deg, rgba(5,10,18,.56), rgba(5,10,18,.94) 30%, rgba(5,10,18,.98) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 8%, transparent), transparent 22%),
    var(--section-rules-bg) center/cover no-repeat;
}

.portal-cta-banner{
  background:
    linear-gradient(90deg, rgba(5,10,18,.82), rgba(5,10,18,.92) 60%, rgba(5,10,18,.98) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 34%),
    var(--section-cta-bg) center/cover no-repeat;
}

.portal-panel::before{
  opacity:.78;
}

.portal-section-head,
.portal-steps-list li,
.portal-mini-cta,
.portal-rules-list li,
.server-info-card{
  backdrop-filter: blur(1.5px);
}

@media (max-width: 980px){
  .server-page-info-portal::before,
  .server-page-experience-portal::before,
  .server-page-community-portal::before,
  .server-page-features-portal::before,
  .server-page-rules-portal::before,
  .server-page-final-cta::before{
    opacity:.14;
  }
}

/* ==========================================================
   v2.21.8 - stronger first section, live status, richer accents
   ========================================================== */

.server-page{
  --status-online:#63e67b;
  --status-offline:#ff7a7a;
  --ui-pill-bg:rgba(255,255,255,.05);
}

.server-page .btn-primary,
.server-page .btn-secondary,
.server-page .portal-side-button{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.server-page .btn-primary:hover,
.server-page .btn-secondary:hover,
.server-page .portal-side-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
}

.server-page .btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(11,17,30,.84), rgba(7,11,20,.92));
  border:1px solid color-mix(in srgb, var(--portal-accent) 34%, rgba(255,255,255,.12));
}

.server-page .portal-side-button,
.server-page-final-cta .btn-primary,
.portal-community-copy .btn-primary,
.portal-mini-cta .btn-primary{
  min-height:58px;
}

.server-hero-quickbar{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  max-width:760px;
}

.server-hero-quickcard{
  position:relative;
  padding:14px 16px;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 26%, rgba(255,255,255,.08));
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(5,10,18,.82), rgba(5,10,18,.94));
  box-shadow:0 18px 32px rgba(0,0,0,.24);
  overflow:hidden;
}

.server-hero-quickcard::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 14%, transparent), transparent 60%);
  pointer-events:none;
}

.server-hero-quickcard-label{
  position:relative;
  z-index:1;
  display:block;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}

.server-hero-quickcard strong{
  position:relative;
  z-index:1;
  display:block;
  font-family:var(--font-head);
  font-size:1rem;
  line-height:1.28;
  color:#fff;
}

.server-hero-quickcard-status strong{color:var(--portal-accent);}
.server-hero-quickcard-status.is-online strong{color:var(--status-online);}
.server-hero-quickcard-status.is-offline strong{color:var(--status-offline);}
.server-hero-quickcard-ip strong{word-break:break-word;}

.portal-live-strip{
  display:grid;
  grid-template-columns:minmax(250px, .92fr) minmax(0, 1.4fr);
  gap:14px;
  padding:22px 28px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.portal-live-status,
.portal-live-pill,
.portal-side-meta-pill{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--portal-accent) 22%, rgba(255,255,255,.08));
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(8,13,22,.84), rgba(5,9,16,.94));
}

.portal-live-status{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  min-height:84px;
}

.portal-live-dot,
.portal-side-meta-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--portal-accent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--portal-accent) 12%, transparent), 0 0 18px color-mix(in srgb, var(--portal-accent) 65%, transparent);
  flex:0 0 auto;
}

.portal-live-status.is-online .portal-live-dot,
.portal-side-meta-pill.is-online .portal-side-meta-dot{background:var(--status-online); box-shadow:0 0 0 5px rgba(99,230,123,.14), 0 0 18px rgba(99,230,123,.45);}
.portal-live-status.is-offline .portal-live-dot,
.portal-side-meta-pill.is-offline .portal-side-meta-dot{background:var(--status-offline); box-shadow:0 0 0 5px rgba(255,122,122,.14), 0 0 18px rgba(255,122,122,.45);}

.portal-live-label,
.portal-live-pill span,
.portal-side-meta-pill span{
  display:block;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.portal-live-status-copy strong,
.portal-live-pill strong{
  display:block;
  margin-top:3px;
  font-family:var(--font-head);
  font-size:1rem;
  color:#f5f3ee;
  line-height:1.28;
}

.portal-live-status.is-online .portal-live-status-copy strong{color:var(--status-online);}
.portal-live-status.is-offline .portal-live-status-copy strong{color:var(--status-offline);}

.portal-live-pills{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.portal-live-pill{
  padding:14px 16px;
  min-height:84px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.portal-info-grid{margin-top:0;}

.server-info-card{
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.server-info-card:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}

.server-info-card-status-serwera{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 18%),
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 62%);
}

.server-info-card-status-serwera.is-online strong{color:var(--status-online);}
.server-info-card-status-serwera.is-offline strong{color:var(--status-offline);}

.server-info-card-status-serwera .server-info-icon::before{content:"◉";}
.server-info-card-ip-serwera .server-info-icon::before{content:"⌘";}
.server-info-card-wersja .server-info-icon::before{content:"◌";}
.server-info-card-tryb .server-info-icon::before{content:"⚔";}
.server-info-card-mapa .server-info-icon::before{content:"⌖";}
.server-info-card-mody .server-info-icon::before{content:"◇";}
.server-info-card-gracze-online .server-info-icon::before{content:"●";}
.server-info-card-restarty .server-info-icon::before{content:"↻";}

.portal-side-card{
  padding:28px 26px;
}

.portal-side-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 16px;
}

.portal-side-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 14px;
}

.portal-side-meta-pill span{
  color:#f4f2ee;
  letter-spacing:.04em;
  text-transform:none;
  font-size:.84rem;
}

.portal-side-status-note{
  margin-top:-4px;
  margin-bottom:16px;
  color:rgba(255,255,255,.64);
  font-size:.95rem;
}

.portal-highlight-list{
  display:grid;
  gap:10px;
}

.portal-highlight-list li{
  position:relative;
  padding-left:22px;
}

.portal-highlight-list li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:.1em;
  color:var(--portal-accent);
}

.portal-mini-cta,
.portal-community-side,
.portal-cta-banner{
  border-color:color-mix(in srgb, var(--portal-accent) 18%, rgba(255,255,255,.08));
}

.portal-mini-cta strong,
.portal-community-stat,
.portal-discord-online{
  color:#f4f2ee;
}

.portal-benefit-icon,
.portal-discord-emblem{
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.24);
}

@media (max-width: 1100px){
  .server-hero-quickbar{grid-template-columns:1fr; max-width:520px;}
  .portal-live-strip{grid-template-columns:1fr;}
  .portal-live-pills{grid-template-columns:1fr;}
}

@media (max-width: 680px){
  .portal-live-strip{padding:18px 18px 10px;}
  .server-hero-quickbar{max-width:none;}
  .server-info-card{padding-left:50px;}
}


/* ==========================================================
   v2.21.9 - cleaner server dashboard / no duplicated stats
   ========================================================== */

.server-page-info-portal{
  margin-top:-34px;
  padding-bottom:72px;
}

.portal-top-grid{
  grid-template-columns:minmax(0, 1.7fr) minmax(320px, .5fr);
  gap:22px;
}

.portal-info-panel{
  overflow:visible;
}

.portal-info-panel > *{
  position:relative;
  z-index:2;
}

.portal-info-panel::after{
  opacity:.34;
}

.server-page-minecraft .server-page-info-portal::after,
.server-page-ark .server-page-info-portal::after,
.server-page-conan .server-page-info-portal::after{
  opacity:.78;
  pointer-events:none;
}

/* Move decorative pieces away from the title area */
.server-page-minecraft .server-page-info-portal::after{
  top:-58px;
  left:18px;
  right:auto;
  width:clamp(78px, 6.2vw, 118px);
  height:clamp(78px, 6.2vw, 118px);
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.35));
}

.server-page-ark .server-page-info-portal::after{
  top:-94px;
  right:22px;
  width:clamp(96px, 8vw, 148px);
}

.server-page-conan .server-page-info-portal::after{
  top:-112px;
  right:24px;
  width:clamp(150px, 12vw, 220px);
}

/* Info header looks like a premium section title, not a card being covered by decoration */
.portal-section-head{
  min-height:128px;
  padding:34px 34px 24px;
  border-bottom:1px solid color-mix(in srgb, var(--portal-accent) 22%, rgba(255,255,255,.07));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 11%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 72%);
}

.portal-section-head h2{
  max-width:11ch;
}

/* Compact live dashboard */
.portal-live-strip{
  grid-template-columns:minmax(210px, .7fr) minmax(0, 1.3fr);
  gap:12px;
  padding:18px 26px 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.26));
}

.portal-live-status,
.portal-live-pill{
  min-height:76px;
  border-radius:0;
  border-color:color-mix(in srgb, var(--portal-accent) 28%, rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 26px rgba(0,0,0,.18);
}

.portal-live-status{
  padding:14px 16px;
}

.portal-live-pills{
  grid-template-columns:1.05fr 1.45fr 1.05fr;
}

.portal-live-pill{
  padding:13px 16px;
}

.portal-live-pill span,
.portal-live-label{
  color:rgba(255,255,255,.62);
}

.portal-live-status-copy strong,
.portal-live-pill strong{
  font-size:1.08rem;
}

/* Details grid: no duplicate status/IP/players block repetition */
.portal-info-grid{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  padding:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.28));
}

.server-info-card{
  min-height:112px;
  padding:22px 20px 18px 58px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 20%, rgba(255,255,255,.07));
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(4,8,15,.72), rgba(4,8,15,.88));
}

.server-info-card:nth-child(4n),
.server-info-card:nth-last-child(-n+4){
  border:1px solid color-mix(in srgb, var(--portal-accent) 20%, rgba(255,255,255,.07));
}

.server-info-card-spolecznosc .server-info-icon::before{content:"✦";}
.server-info-card-discord .server-info-icon::before{content:"☰";}

.server-info-card strong{
  font-size:1rem;
  text-shadow:0 0 18px color-mix(in srgb, var(--portal-accent) 16%, transparent);
}

/* Side card: calmer and cleaner */
.portal-side-card{
  min-height:auto;
  padding:30px 26px 28px;
}

.portal-side-meta{
  margin-bottom:18px;
}

.portal-side-meta-pill{
  min-height:38px;
  padding:8px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 18%),
    rgba(3,6,12,.46);
}

.portal-side-meta-pill span{
  font-size:.82rem;
}

.portal-side-status-note{
  padding:12px 14px;
  border-left:2px solid color-mix(in srgb, var(--portal-accent) 55%, transparent);
  background:color-mix(in srgb, var(--portal-accent) 6%, rgba(0,0,0,.18));
  line-height:1.62;
}

.portal-side-card h3{
  font-size:clamp(1.55rem, 1.7vw, 2.1rem);
}

/* Hero quick stats should be useful but not overpowering */
.server-hero-quickbar{
  grid-template-columns:.85fr .85fr 1.3fr;
  gap:9px;
  max-width:680px;
}

.server-hero-quickcard{
  min-height:76px;
  padding:12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 18%),
    rgba(5,9,17,.72);
}

.server-hero-quickcard-label{
  font-size:.68rem;
}

.server-hero-quickcard strong{
  font-size:.92rem;
}

/* More visible active colors, matching game page */
.server-page-minecraft .portal-live-status.is-online .portal-live-status-copy strong,
.server-page-minecraft .server-info-card strong,
.server-page-minecraft .portal-live-pill strong{
  color:#9bff62;
}

.server-page-ark .portal-live-status.is-online .portal-live-status-copy strong,
.server-page-ark .server-info-card strong,
.server-page-ark .portal-live-pill strong{
  color:#7ee7ff;
}

.server-page-conan .portal-live-status.is-online .portal-live-status-copy strong,
.server-page-conan .server-info-card strong,
.server-page-conan .portal-live-pill strong{
  color:#e4b36d;
}

.portal-live-status.is-offline .portal-live-status-copy strong,
.server-hero-quickcard-status.is-offline strong,
.server-info-card-status-serwera.is-offline strong{
  color:#ff7777;
}

@media (max-width:1180px){
  .portal-top-grid{grid-template-columns:1fr;}
  .server-page-info-portal{margin-top:0;}
}

@media (max-width:900px){
  .portal-live-strip,
  .portal-live-pills,
  .portal-info-grid{
    grid-template-columns:1fr;
  }

  .portal-section-head h2{
    max-width:none;
  }

  .server-hero-quickbar{
    grid-template-columns:1fr;
    max-width:none;
  }
}

@media (max-width:680px){
  .portal-section-head{
    min-height:auto;
    padding:24px 20px 18px;
  }

  .portal-live-strip,
  .portal-info-grid{
    padding:14px;
  }
}


/* ==========================================================
   v2.22.1 - Conan hero grounding polish + lighter assets
   ========================================================== */

.server-page-conan .server-page-hero{
  min-height:840px;
  padding-bottom:132px;
}

.server-page-conan .server-page-hero .server-page-container{
  position:relative;
  overflow:visible;
}

.server-page-conan .server-page-char{
  top:92px;
  bottom:12px;
  right:5.4%;
  width:min(33vw, 548px);
  min-height:640px;
  filter:
    drop-shadow(0 44px 64px rgba(0,0,0,.60))
    drop-shadow(0 0 24px rgba(200,149,88,.10))
    saturate(1.02);
}

.server-page-conan .server-page-char::before{
  content:"";
  position:absolute;
  inset:4% 8% 2% 10%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 58% 30%, rgba(214,151,84,.16), transparent 34%),
    radial-gradient(ellipse at 54% 88%, rgba(0,0,0,.48), transparent 42%);
  filter:blur(18px);
  opacity:.9;
}

.server-page-conan .server-page-char::after{
  content:"";
  position:absolute;
  left:18%;
  right:6%;
  bottom:8px;
  height:42px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 76%);
  filter:blur(10px);
}

.server-page-conan .server-page-hero .server-page-container::after{
  left:auto;
  right:-4.6%;
  bottom:-92px;
  width:min(840px, 56vw);
  height:226px;
  z-index:3;
  opacity:.98;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 56%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.38) 100%),
    var(--conan-battlement) center bottom / contain no-repeat;
  filter:drop-shadow(0 30px 48px rgba(0,0,0,.64)) saturate(.98) brightness(.96);
}

.server-page-conan .server-hero-copy,
.server-page-conan .server-page-actions,
.server-page-conan .server-hero-quickbar{
  position:relative;
  z-index:8;
}

.server-page-conan .server-hero-quickbar{
  margin-top:24px;
  max-width:650px;
}

.server-page-conan .server-hero-quickcard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 18%),
    rgba(5,9,17,.82);
  backdrop-filter:blur(6px);
}

.server-page-conan .server-page-info-portal{
  margin-top:6px;
  padding-top:20px;
}

.server-page-conan .server-page-info-portal::after{
  top:-92px;
  right:24px;
  opacity:.58;
}

@media (max-width: 1180px){
  .server-page-conan .server-page-hero{
    min-height:800px;
    padding-bottom:116px;
  }

  .server-page-conan .server-page-char{
    width:min(38vw, 500px);
    right:1%;
  }

  .server-page-conan .server-page-hero .server-page-container::after{
    right:-6%;
    width:min(760px, 64vw);
    bottom:-82px;
  }
}

@media (max-width: 980px){
  .server-page-conan .server-page-hero{
    min-height:auto;
    padding-bottom:88px;
  }

  .server-page-conan .server-page-char::before,
  .server-page-conan .server-page-char::after,
  .server-page-conan .server-page-hero .server-page-container::after{
    display:none;
  }

  .server-page-conan .server-page-info-portal{
    margin-top:0;
    padding-top:0;
  }
}

/* ==========================================================
   v2.22.2 - subpage-only consistency pass
   Scope: server subpages only. Front page is untouched.
   ========================================================== */

/* Stronger, consistent section wallpaper layer on all server subpages */
.server-page-info-portal,
.server-page-experience-portal,
.server-page-community-portal,
.server-page-features-portal,
.server-page-rules-portal,
.server-page-final-cta{
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(3,6,12,.66), rgba(3,6,12,.88)),
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--portal-accent) 9%, transparent), transparent 30%);
}

.server-page-info-portal::before,
.server-page-experience-portal::before,
.server-page-community-portal::before,
.server-page-features-portal::before,
.server-page-rules-portal::before,
.server-page-final-cta::before{
  opacity:.24;
  filter:saturate(1.04) brightness(.72) contrast(1.08);
  mix-blend-mode:normal;
  z-index:0;
}

.server-page-info-portal > *,
.server-page-experience-portal > *,
.server-page-community-portal > *,
.server-page-features-portal > *,
.server-page-rules-portal > *,
.server-page-final-cta > *{
  position:relative;
  z-index:2;
}

/* Keep decorations visible, but never over dashboards/buttons */
.server-page-minecraft .server-page-info-portal::after,
.server-page-ark .server-page-info-portal::after,
.server-page-conan .server-page-info-portal::after{
  z-index:1;
  pointer-events:none;
}

.server-page-minecraft .server-page-info-portal::after{
  opacity:.46;
  left:12px;
  top:-44px;
}

.server-page-ark .server-page-info-portal::after{
  opacity:.50;
  right:8px;
  top:-112px;
}

.server-page-conan .server-page-info-portal::after{
  opacity:.42;
  right:6px;
  top:-98px;
}

/* Dashboard: clear live state + players + IP without visual duplication */
.portal-live-strip{
  position:relative;
  z-index:3;
  border-top:1px solid color-mix(in srgb, var(--portal-accent) 18%, rgba(255,255,255,.06));
}

.portal-live-status,
.portal-live-pill,
.server-hero-quickcard,
.portal-side-meta-pill{
  backdrop-filter:blur(7px);
}

.portal-live-status.is-offline,
.server-hero-quickcard-status.is-offline,
.portal-side-meta-pill.is-offline{
  border-color:rgba(255,122,122,.34);
  background:
    linear-gradient(180deg, rgba(255,122,122,.08), rgba(255,122,122,0) 22%),
    rgba(8,10,16,.78);
}

.portal-live-status.is-online,
.server-hero-quickcard-status.is-online,
.portal-side-meta-pill.is-online{
  border-color:color-mix(in srgb, var(--portal-accent) 42%, rgba(255,255,255,.08));
}

/* Details cards: 7 cards still align professionally */
.portal-info-grid{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.server-info-card-status-serwera{
  border-color:color-mix(in srgb, var(--portal-accent) 42%, rgba(255,255,255,.10));
}

.server-info-card-status-serwera.is-offline{
  border-color:rgba(255,122,122,.34);
  background:
    linear-gradient(180deg, rgba(255,122,122,.08), rgba(255,122,122,0) 22%),
    rgba(7,9,14,.74);
}

/* Sidebar: compact summary, no feeling of repeated dashboard block */
.portal-side-meta{
  display:grid;
  grid-template-columns:1fr;
}

.portal-side-card .portal-highlight-list{
  margin:16px 0 20px;
}

/* Offline/inactive projects should look intentional, not broken */
.portal-side-status-note{
  border-radius:0;
  font-size:.94rem;
}

.server-page .is-offline + .portal-live-status-copy strong,
.portal-live-status.is-offline strong,
.server-hero-quickcard-status.is-offline strong{
  color:#ff8989;
}

/* Improve spacing where previous decorative layers created uneven first sections */
.server-page-info-portal{
  margin-top:-24px;
  padding-top:18px;
}

.server-page-experience-portal,
.server-page-community-portal,
.server-page-gallery-portal,
.server-page-features-portal,
.server-page-rules-portal{
  padding-top:42px;
}

.server-page-final-cta{
  padding:58px 0 38px;
}

/* Empty galleries on every game page share same professional card style */
.server-empty-gallery{
  grid-column:1 / -1;
  min-height:132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  padding:24px;
  border:1px dashed color-mix(in srgb, var(--portal-accent) 36%, rgba(255,255,255,.10));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 7%, rgba(7,11,18,.82)), rgba(5,8,14,.90));
  color:rgba(245,245,242,.78);
  box-shadow:0 18px 38px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.025);
}

.server-empty-gallery strong{
  color:#f5f3ee;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.035em;
}

.server-empty-gallery span{
  max-width:720px;
  line-height:1.65;
}

/* Mobile safety */
@media (max-width:1180px){
  .portal-info-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:700px){
  .portal-info-grid{
    grid-template-columns:1fr;
  }

  .server-page-info-portal,
  .server-page-experience-portal,
  .server-page-community-portal,
  .server-page-features-portal,
  .server-page-rules-portal,
  .server-page-final-cta{
    overflow:hidden;
  }

  .server-page-info-portal::before,
  .server-page-experience-portal::before,
  .server-page-community-portal::before,
  .server-page-features-portal::before,
  .server-page-rules-portal::before,
  .server-page-final-cta::before{
    opacity:.16;
  }
}

/* ==========================================================
   v2.22.3 - Server pages shifted from "portal" to themed info hub
   Goal: subpages feel like gamer server cards with stronger textures,
   more decorations and more practical info-first hierarchy.
   ========================================================== */

/* ---------- Shared section skin with wallpaper textures ---------- */
.server-page-section,
.server-page-final-cta,
.server-page-final-portal{
  position:relative;
  isolation:isolate;
}

.server-page-section > *,
.server-page-final-cta > *,
.server-page-final-portal > *{
  position:relative;
  z-index:2;
}

.server-page-info-portal::before,
.server-page-experience-portal::before,
.server-page-community-portal::before,
.server-page-gallery-portal::before,
.server-page-features-portal::before,
.server-page-rules-portal::before,
.server-page-final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.26;
  background:
    linear-gradient(180deg, rgba(3,6,12,.84), rgba(3,6,12,.94)),
    var(--section-bg, none) center center / cover no-repeat;
  mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.server-page-info-portal{ --section-bg: var(--section-info-bg); }
.server-page-experience-portal{ --section-bg: var(--section-experience-bg); }
.server-page-community-portal{ --section-bg: var(--section-community-bg); }
.server-page-gallery-portal{ --section-bg: var(--section-community-bg); }
.server-page-features-portal{ --section-bg: var(--section-features-bg); }
.server-page-rules-portal{ --section-bg: var(--section-rules-bg); }
.server-page-final-cta{ --section-bg: var(--section-cta-bg); }

.server-page-info-portal::after,
.server-page-experience-portal::after,
.server-page-community-portal::after,
.server-page-gallery-portal::after,
.server-page-features-portal::after,
.server-page-rules-portal::after,
.server-page-final-cta::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--portal-accent) 55%, rgba(255,255,255,.15)), transparent);
  opacity:.30;
}

/* ---------- More practical, gamer-like headings ---------- */
.portal-section-head,
.portal-heading,
.portal-rules-copy-inner,
.portal-cta-banner,
.portal-side-card{
  position:relative;
}

.portal-kicker{
  font-size:.74rem;
  letter-spacing:.18em;
  font-weight:700;
}

.portal-section-head::after,
.portal-heading::after,
.portal-rules-copy-inner::after,
.portal-cta-copy::after{
  content:"";
  display:block;
  width:min(148px, 38vw);
  height:2px;
  margin-top:14px;
  background:linear-gradient(90deg, var(--portal-accent), color-mix(in srgb, var(--portal-accent) 24%, transparent), transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--portal-accent) 20%, transparent);
}

.portal-section-head h2,
.portal-heading h2,
.portal-rules-copy h2,
.portal-cta-copy h2,
.portal-community-copy h2,
.portal-side-card h3{
  letter-spacing:.02em;
}

/* ---------- Hero and quick stats more like a server card ---------- */
.server-hero-quickbar{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:740px;
}

.server-hero-quickcard{
  position:relative;
  min-height:84px;
  padding:14px 16px 14px 18px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 32%, rgba(255,255,255,.10));
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(8,12,18,.88), rgba(3,6,10,.92));
  box-shadow:0 16px 34px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.02);
}

.server-hero-quickcard::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  background:linear-gradient(180deg, transparent, var(--portal-accent), transparent);
}

.server-hero-quickcard-label{
  display:block;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.68rem;
  color:rgba(255,255,255,.62);
}

.server-hero-quickcard strong{
  display:block;
  line-height:1.35;
  color:#fff;
  font-size:1rem;
}

.server-hero-quickcard-status.is-online strong{ color:var(--portal-accent); }
.server-hero-quickcard-status.is-offline strong{ color:#ff8d8d; }
.server-hero-quickcard-ip strong{ word-break:break-word; }

/* ---------- Info block becomes the main usable dashboard ---------- */
.portal-live-strip{
  margin:0 16px 8px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);
  gap:10px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 22%, rgba(255,255,255,.08));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 8%, transparent), transparent 60%),
    rgba(3,7,12,.46);
}

.portal-live-status,
.portal-live-pill{
  min-height:72px;
  display:flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(4,8,14,.48);
}

.portal-live-status{ padding:12px 16px; gap:12px; }
.portal-live-pill{ padding:10px 14px; }

.portal-live-pills{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.portal-live-pill span,
.portal-live-label{
  display:block;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.68rem;
  color:rgba(255,255,255,.60);
}

.portal-live-pill strong,
.portal-live-status-copy strong{
  color:#fff;
  line-height:1.32;
}

.portal-info-grid{ padding:14px; gap:10px; }

.server-info-card{
  min-height:104px;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent),
    rgba(4,8,14,.48);
}

.server-info-card strong{
  font-size:1rem;
  color:#f5f3ee;
}

.server-info-card-ip-serwera strong,
.server-info-card-gracze-online strong,
.server-info-card-status-serwera strong{
  color:var(--portal-accent);
}

/* ---------- Sidebar feels like mission card rather than promo box ---------- */
.portal-side-card{
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(10,15,24,.94), rgba(4,8,13,.97));
}

.portal-side-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 28%, rgba(255,255,255,.08));
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.72rem;
  color:#fff;
  background:rgba(0,0,0,.22);
}

.portal-side-badge::before{
  content:"✦";
  color:var(--portal-accent);
}

.portal-highlight-list li{
  position:relative;
  padding-left:18px;
}

.portal-highlight-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--portal-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--portal-accent) 34%, transparent);
}

/* ---------- Content cards ---------- */
.portal-trailer-panel,
.portal-join-panel,
.portal-community-main,
.portal-community-side,
.portal-benefit-card,
.portal-rules-copy,
.portal-cta-banner{
  backdrop-filter:blur(2px);
}

.portal-mini-cta{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 64%),
    rgba(3,7,12,.46);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.portal-mini-cta strong{
  display:block;
  margin:6px 0 14px;
  color:var(--portal-accent);
  font-size:1.1rem;
}

.portal-community-main{
  overflow:hidden;
}

.portal-community-copy{
  background:linear-gradient(90deg, rgba(5,9,15,.76), rgba(5,9,15,.18));
}

.portal-gallery-card,
.portal-benefit-card,
.portal-rules-list li{
  backdrop-filter:blur(1.5px);
}

.portal-benefit-card h3,
.portal-rules-list li,
.portal-gallery-overlay strong{
  letter-spacing:.02em;
}

/* ---------- Footer / bottom row ---------- */
.server-page-final-portal{
  padding:0 0 52px;
}

.portal-final-row{
  width:min(94%, 1380px);
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border:1px solid color-mix(in srgb, var(--portal-accent) 18%, rgba(255,255,255,.08));
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    rgba(4,7,12,.62);
  color:rgba(244,244,240,.70);
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.portal-final-left{
  line-height:1.6;
}

.portal-final-nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.portal-final-nav a{
  color:rgba(244,244,240,.78);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.portal-final-nav a:hover{
  color:#fff;
  border-bottom-color:var(--portal-accent);
}

/* ---------- Game-specific small polish ---------- */
.server-page-minecraft .portal-section-head::after,
.server-page-minecraft .portal-heading::after,
.server-page-minecraft .portal-rules-copy-inner::after,
.server-page-minecraft .portal-cta-copy::after{
  height:4px;
  background:linear-gradient(90deg, rgba(144,238,84,.95) 0 20%, rgba(98,160,56,.92) 20% 40%, rgba(144,238,84,.40) 40% 60%, transparent 100%);
  box-shadow:none;
}

.server-page-minecraft .portal-live-strip,
.server-page-minecraft .server-hero-quickcard,
.server-page-minecraft .portal-mini-cta{
  border-radius:0;
}

.server-page-conan .portal-kicker,
.server-page-conan .server-info-label,
.server-page-conan .server-hero-quickcard-label,
.server-page-conan .portal-live-pill span,
.server-page-conan .portal-live-label{
  color:rgba(245,226,202,.62);
}

.server-page-ark .portal-kicker,
.server-page-ark .server-info-label,
.server-page-ark .server-hero-quickcard-label,
.server-page-ark .portal-live-pill span,
.server-page-ark .portal-live-label{
  color:rgba(208,246,255,.64);
}

.server-page-minecraft .portal-kicker,
.server-page-minecraft .server-info-label,
.server-page-minecraft .server-hero-quickcard-label,
.server-page-minecraft .portal-live-pill span,
.server-page-minecraft .portal-live-label{
  color:rgba(220,248,210,.68);
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .server-hero-quickbar{grid-template-columns:1fr 1fr;}
  .portal-live-strip{grid-template-columns:1fr;}
  .portal-live-pills{grid-template-columns:1fr 1fr 1fr;}
}

@media (max-width:900px){
  .portal-final-row{flex-direction:column; align-items:flex-start;}
  .server-hero-quickbar{grid-template-columns:1fr; max-width:none;}
  .portal-live-pills{grid-template-columns:1fr;}
}

@media (max-width:700px){
  .portal-section-head::after,
  .portal-heading::after,
  .portal-rules-copy-inner::after,
  .portal-cta-copy::after{
    width:110px;
  }

  .portal-live-strip,
  .portal-info-grid{
    padding:10px;
  }

  .portal-final-row{
    width:min(94%, 1380px);
    padding:16px 18px;
  }
}

/* ==========================================================
   v2.23.0 - Full subpage redesign
   Direction: info-first gamer landing page, inspired by modern
   modular/bento layouts instead of old portal dashboard style.
   ========================================================== */

.server-page-hero-modern{
  padding-bottom:72px;
}

.server-page-hero-grid{
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .62fr);
  gap:22px;
  align-items:end;
}

.server-page-hero-modern .server-hero-copy{
  width:auto;
  max-width:760px;
}

.server-page-hero-modern .server-page-desc{
  font-size:clamp(1.2rem, 1.65vw, 1.45rem);
  line-height:1.45;
  max-width:28ch;
  color:#f6f5ef;
}

.server-page-hero-modern .server-page-substory{
  max-width:56ch;
}

.server-hero-pills{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:760px;
}

.server-hero-pill{
  min-width:132px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 26%, rgba(255,255,255,.10));
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 22%),
    rgba(5,9,15,.56);
  box-shadow:0 12px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
}

.server-hero-pill span{
  display:block;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.66rem;
  color:rgba(255,255,255,.60);
}

.server-hero-pill strong{
  display:block;
  font-size:.96rem;
  color:#f6f5ef;
  line-height:1.35;
}

.server-hero-pill.is-online strong{ color:var(--portal-accent); }
.server-hero-pill.is-offline strong{ color:#ff8a8a; }

.server-hero-summary-card{
  padding:24px 24px 22px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.server-summary-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.server-summary-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 28%, rgba(255,255,255,.08));
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.72rem;
  background:rgba(0,0,0,.22);
}

.server-summary-badge::before{
  content:"✦";
  color:var(--portal-accent);
}

.server-summary-state{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(4,8,13,.42);
  font-size:.9rem;
}

.server-summary-state.is-online{
  border-color:color-mix(in srgb, var(--portal-accent) 35%, rgba(255,255,255,.08));
  color:#f4f2ec;
}

.server-summary-state.is-offline{
  border-color:rgba(255,120,120,.28);
  color:#ffd3d3;
}

.server-summary-ip-block{
  padding:16px 16px 18px;
  border:1px solid color-mix(in srgb, var(--portal-accent) 30%, rgba(255,255,255,.08));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-accent) 10%, transparent), transparent 72%),
    rgba(4,8,13,.42);
}

.server-summary-label,
.server-overview-label,
.server-community-inline-stats span,
.server-summary-stat span{
  display:block;
  margin-bottom:7px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.66rem;
  color:rgba(255,255,255,.58);
}

.server-summary-ip-block strong{
  display:block;
  color:var(--portal-accent);
  font-size:1.25rem;
  line-height:1.35;
  word-break:break-word;
}

.server-summary-copy{
  margin-top:14px;
  width:100%;
}

.server-summary-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.server-summary-stat{
  min-height:82px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(4,8,13,.38);
}

.server-summary-stat strong{
  display:block;
  color:#f5f3ee;
  line-height:1.45;
  font-size:.98rem;
}

.server-page-overview-section,
.server-page-join-modern,
.server-page-features-modern,
.server-page-gallery-modern,
.server-page-rules-modern,
.server-page-final-cta-modern{
  padding-top:36px;
  padding-bottom:36px;
}

.server-section-heading{
  margin-bottom:18px;
}

.server-page-lead{
  max-width:70ch;
  margin:14px 0 0;
  color:rgba(244,244,240,.74);
  line-height:1.72;
}

.server-overview-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}

.server-overview-card{
  min-height:150px;
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.server-overview-card strong{
  display:block;
  color:#f5f3ee;
  font-size:1.16rem;
  line-height:1.38;
}

.server-overview-card.is-accent strong{ color:var(--portal-accent); }
.server-overview-card.is-alert strong{ color:#ff8a8a; }
.server-overview-card.is-wide{ grid-column:span 2; }
.server-overview-card:hover{ transform:translateY(-2px); }

.server-join-modern-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
  gap:18px;
  align-items:stretch;
}

.server-join-steps-card,
.server-community-card{
  overflow:hidden;
}

.server-steps-list-modern{
  padding:22px;
}

.server-inline-copy-box{
  margin:0 22px 22px;
}

.server-inline-copy-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.server-inline-copy-actions .btn-primary,
.server-inline-copy-actions .btn-secondary{
  min-width:160px;
}

.server-community-card{
  position:relative;
  min-height:100%;
}

.server-community-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(4,8,13,.72), rgba(4,8,13,.88)),
    var(--section-community-bg) center center / cover no-repeat;
  opacity:.96;
}

.server-community-card::after{
  content:"";
  position:absolute;
  inset:auto 18px 18px 18px;
  height:1px;
  background:linear-gradient(90deg, var(--portal-accent), transparent 70%);
  opacity:.45;
}

.server-community-card-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:26px 26px 28px;
  display:flex;
  flex-direction:column;
}

.server-community-card h2{
  margin:0 0 16px;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-size:clamp(2rem, 2.2vw, 3rem);
  line-height:.98;
  color:#f5f3ee;
}

.server-community-card p{
  margin:0 0 18px;
  color:rgba(244,244,240,.78);
  line-height:1.76;
  max-width:40ch;
}

.server-community-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.server-community-badges span{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(4,8,13,.38);
  color:#f5f3ee;
  font-size:.92rem;
}

.server-community-inline-stats{
  margin-bottom:22px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.server-community-inline-stats > div{
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(4,8,13,.36);
}

.server-community-inline-stats strong{
  display:block;
  color:#f5f3ee;
  line-height:1.35;
}

.server-community-card .btn-primary{
  margin-top:auto;
  align-self:flex-start;
}

.server-benefits-modern{
  gap:14px;
}

.server-benefit-card-modern{
  min-height:240px;
}

.server-page-gallery-modern .portal-gallery-grid{
  gap:14px;
}

.server-rules-modern-grid{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.server-rules-copy-modern .portal-rules-copy-inner{
  padding:28px 26px;
}

.server-rules-list-modern{
  margin:0;
}

.server-cta-banner-modern{
  gap:24px;
}

.server-page-final-cta-modern .portal-cta-actions .btn-primary,
.server-page-final-cta-modern .portal-cta-actions .btn-secondary{
  min-width:180px;
}

/* Better harmony on modern redesign with existing themed skins */
.server-page-minecraft .server-overview-card,
.server-page-minecraft .server-summary-stat,
.server-page-minecraft .server-hero-pill,
.server-page-minecraft .server-summary-ip-block,
.server-page-minecraft .server-community-badges span,
.server-page-minecraft .server-community-inline-stats > div{
  border-radius:0;
}

.server-page-conan .server-summary-ip-block strong,
.server-page-ark .server-summary-ip-block strong,
.server-page-minecraft .server-summary-ip-block strong{
  text-shadow:0 0 18px color-mix(in srgb, var(--portal-accent) 14%, transparent);
}

@media (max-width:1260px){
  .server-page-hero-grid,
  .server-join-modern-grid,
  .server-rules-modern-grid{
    grid-template-columns:1fr;
  }

  .server-page-hero-grid{
    align-items:start;
  }

  .server-summary-copy{
    width:auto;
  }
}

@media (max-width:1100px){
  .server-overview-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .server-overview-card.is-wide{grid-column:span 2;}
}

@media (max-width:760px){
  .server-summary-stats,
  .server-community-inline-stats,
  .server-overview-grid{
    grid-template-columns:1fr;
  }

  .server-overview-card.is-wide{grid-column:span 1;}
  .server-hero-pills{display:grid; grid-template-columns:1fr 1fr;}
  .server-page-hero-modern .server-page-desc{max-width:none;}
}

@media (max-width:560px){
  .server-hero-pills{grid-template-columns:1fr;}
  .server-inline-copy-actions,
  .portal-cta-actions{flex-direction:column;}
  .server-inline-copy-actions .btn-primary,
  .server-inline-copy-actions .btn-secondary,
  .server-page-final-cta-modern .portal-cta-actions .btn-primary,
  .server-page-final-cta-modern .portal-cta-actions .btn-secondary,
  .server-community-card .btn-primary{
    width:100%;
  }
}

/* ==========================================================
   v2.65.0 - server bottom CTA / footer composition fix
   Screenshot fix: the final section no longer looks like a huge empty box.
   ========================================================== */

.server-neo-cta{
  padding:34px 0 36px;
  position:relative;
  overflow:visible;
}

.server-neo-cta::before{
  content:"";
  position:absolute;
  left:50%;
  top:-36px;
  width:min(1120px, 82vw);
  height:112px;
  transform:translateX(-50%);
  background:var(--server-decor-bottom) center bottom / contain no-repeat;
  opacity:.30;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.42)) saturate(.9) brightness(.78);
  pointer-events:none;
  z-index:0;
}

.server-neo-cta .server-neo-container{
  position:relative;
  z-index:2;
}

.server-neo-cta-card{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:34px clamp(26px, 3.4vw, 54px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:24px 34px;
  text-align:left;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--server-accent) 42%, rgba(255,255,255,.10));
  background:
    linear-gradient(90deg, rgba(3,8,18,.92) 0%, rgba(4,11,23,.82) 47%, rgba(4,10,20,.70) 100%),
    radial-gradient(circle at 82% 42%, color-mix(in srgb, var(--server-accent) 15%, transparent), transparent 34%),
    var(--server-bg) center center / cover no-repeat;
  box-shadow:0 28px 72px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
}

.server-neo-cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--server-accent) 22%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%);
  opacity:.65;
  pointer-events:none;
}

.server-neo-cta-card::after{
  content:"";
  position:absolute;
  right:clamp(-38px, -2vw, -18px);
  bottom:-22px;
  width:clamp(170px, 15vw, 270px);
  height:clamp(160px, 15vw, 260px);
  background:var(--server-character) right bottom / contain no-repeat;
  opacity:.16;
  filter:saturate(.82) brightness(.7) drop-shadow(0 20px 32px rgba(0,0,0,.48));
  pointer-events:none;
}

.server-neo-cta-crown,
.server-neo-cta-card h2,
.server-neo-cta-card p,
.server-neo-cta-actions{
  position:relative;
  z-index:2;
}

.server-neo-cta-crown{
  grid-column:1 / 2;
  font-size:1.55rem;
  line-height:1;
  margin:0 0 8px;
  color:var(--server-gold);
}

.server-neo-cta-card h2{
  grid-column:1 / 2;
  max-width:620px;
  margin:0;
  font-size:clamp(2.05rem, 2.55vw, 3.15rem);
  line-height:.98;
  letter-spacing:.01em;
  text-shadow:0 10px 28px rgba(0,0,0,.36);
}

.server-neo-cta-card h2 span{
  color:var(--server-gold);
}

.server-neo-cta-card p{
  grid-column:1 / 2;
  max-width:620px;
  margin:12px 0 0;
  font-size:1rem;
  line-height:1.65;
  color:rgba(238,244,255,.76);
}

.server-neo-cta-actions{
  grid-column:2 / 3;
  grid-row:1 / span 3;
  justify-content:flex-end;
  align-items:stretch;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  min-width:min(520px, 42vw);
}

.server-neo-cta-actions .server-neo-btn{
  min-height:68px;
  min-width:240px;
  flex:1 1 240px;
}

.server-neo-footer{
  padding:8px 0 28px;
}

.server-neo-footer-inner{
  min-height:34px;
  opacity:.82;
}

.server-reboot-body .fp-social-rail,
.server-reboot-body .social-rail,
.server-reboot-body .fixed-social{
  z-index:20;
}

@media (max-width:1080px){
  .server-neo-cta-card{
    grid-template-columns:1fr;
    text-align:center;
    padding:32px 24px;
  }

  .server-neo-cta-crown,
  .server-neo-cta-card h2,
  .server-neo-cta-card p,
  .server-neo-cta-actions{
    grid-column:1 / -1;
    grid-row:auto;
    justify-self:center;
  }

  .server-neo-cta-actions{
    justify-content:center;
    min-width:0;
    width:100%;
  }
}

@media (max-width:640px){
  .server-neo-cta{
    padding:24px 0 28px;
  }

  .server-neo-cta::before,
  .server-neo-cta-card::after{
    display:none;
  }

  .server-neo-cta-card{
    border-radius:14px;
    padding:26px 18px;
  }

  .server-neo-cta-actions{
    flex-direction:column;
  }

  .server-neo-cta-actions .server-neo-btn{
    width:100%;
    min-width:0;
  }
}

/* v2.66.0 - Server pages Customizer live variables: art scale/opacity + text sizes */
.server-neo-page .server-neo-kicker{font-size:var(--server-kicker-size, .94rem);}
.server-neo-page .server-neo-logo{width:min(var(--server-logo-width, 560px), 90%);}
.server-neo-page .server-neo-feature-rail,
.server-neo-page .server-neo-rail-item,
.server-neo-page .server-neo-rail-arrow{font-size:var(--server-feature-size, .82rem);}
.server-neo-page .server-neo-subtitle{font-size:var(--server-subtitle-size, 1.3rem);}
.server-neo-page .server-neo-desc{font-size:var(--server-desc-size, 1.05rem);}
.server-neo-page .server-neo-btn,
.server-neo-page .server-neo-btn-text,
.server-neo-page .server-neo-btn small{font-size:var(--server-button-size, .94rem);}
.server-neo-page .server-neo-note-line{font-size:var(--server-note-size, 1rem);}
.server-neo-page .server-neo-side-stat span,
.server-neo-page .server-neo-ipbox span,
.server-neo-page .server-neo-side-box span{font-size:var(--server-panel-label-size, .95rem);}
.server-neo-page .server-neo-side-stat strong,
.server-neo-page .server-neo-ipbox strong,
.server-neo-page .server-neo-side-box strong{font-size:var(--server-panel-value-size, 1.2rem);}
.server-neo-page .server-neo-side-stat strong{font-size:calc(var(--server-panel-value-size, 1.2rem) * 1.45);}
.server-neo-page .server-neo-summary-copy span{font-size:var(--server-card-label-size, .95rem);}
.server-neo-page .server-neo-summary-copy strong{font-size:var(--server-card-value-size, 1.75rem);}
.server-neo-page .server-neo-summary-copy small{font-size:calc(var(--server-card-label-size, .95rem) * .98);}
.server-neo-page .server-neo-section-head h2,
.server-neo-page .server-reboot-section-title,
.server-neo-page .server-neo-cta-card h2{font-size:var(--server-section-title-size, 2.35rem);}
.server-neo-page .server-neo-section-head p,
.server-neo-page .server-reboot-section p,
.server-neo-page .server-reboot-panel p,
.server-neo-page .server-reboot-panel li{font-size:var(--server-section-body-size, 1rem);}
.server-neo-page .server-neo-cta-card h2{font-size:var(--server-cta-title-size, 2.6rem);}
.server-neo-page .server-neo-cta-card p{font-size:var(--server-cta-text-size, 1.06rem);}
.server-neo-page .server-neo-character{opacity:var(--server-character-opacity, .38); transform:scale(var(--server-character-scale, 1)); transform-origin:50% 100%;}
.server-neo-page .server-neo-decor{opacity:var(--server-decor-opacity, 1); transform:scale(var(--server-decor-scale, 1)); transform-origin:50% 100%;}
@media (max-width: 820px){
  .server-neo-page .server-neo-logo{width:min(100%, var(--server-logo-width, 430px));}
}

/* v2.67.0 - Customizer typography fix: allow large px values to visibly affect server cards */
.server-neo-page .server-neo-summary-card{
  min-height:max(112px, calc(var(--server-card-value-size, 16px) * 2.25));
  align-items:center;
  overflow:visible;
}
.server-neo-page .server-neo-summary-copy{
  min-width:0;
  overflow:visible;
}
.server-neo-page .server-neo-summary-copy span{
  font-size:var(--server-card-label-size, 12px);
  line-height:1.08;
}
.server-neo-page .server-neo-summary-copy strong{
  font-size:var(--server-card-value-size, 16px);
  line-height:1.03;
  overflow-wrap:anywhere;
}
.server-neo-page .server-neo-summary-copy small{
  font-size:calc(var(--server-card-label-size, 12px) * .98);
  line-height:1.15;
}
.server-neo-page .server-neo-sidecard{
  min-height:max(410px, calc(var(--server-panel-value-size, 16px) * 9.5));
  overflow:visible;
}
.server-neo-page .server-neo-side-box,
.server-neo-page .server-neo-ipbox{
  min-height:max(86px, calc(var(--server-panel-value-size, 16px) * 3.1));
  overflow:visible;
}
.server-neo-page .server-neo-side-stat strong,
.server-neo-page .server-neo-ipbox strong,
.server-neo-page .server-neo-side-box strong{
  line-height:1.05;
  overflow-wrap:anywhere;
}
.server-neo-page .server-neo-btn,
.server-neo-page .server-neo-btn-text,
.server-neo-page .server-neo-btn small{
  line-height:1.08;
}


/* v2.68.3 - refined icons inside right status panel */
.server-neo-page .server-neo-side-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.server-neo-page .server-neo-side-stat .server-neo-side-label,
.server-neo-page .server-neo-ipbox .server-neo-side-label{
  margin-bottom:12px;
}
.server-neo-page .server-neo-side-label-right{
  justify-content:flex-end;
}
.server-neo-page .server-neo-side-icon{
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:color-mix(in srgb,var(--server-accent) 88%,#dce8ff 12%);
  background:rgba(255,255,255,.02);
  border:1px solid color-mix(in srgb,var(--server-accent) 22%,rgba(255,255,255,.10));
  box-shadow:none;
  font-size:0;
}
.server-neo-page .server-neo-side-icon svg{
  width:10px;
  height:10px;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.server-neo-page .server-neo-side-label > .server-neo-side-text{
  margin:0;
  font-size:var(--server-panel-label-size, .95rem);
  line-height:1;
  letter-spacing:.14em;
}
.server-neo-page .server-neo-side-box span,
.server-neo-page .server-neo-ipbox span,
.server-neo-page .server-neo-side-stat span{
  margin:0;
}
.server-neo-page .server-neo-side-box strong,
.server-neo-page .server-neo-ipbox strong{
  display:block;
  padding-left:26px;
}
.server-neo-page .server-neo-side-stat strong{
  display:block;
  margin-top:2px;
}
.server-neo-page .server-neo-side-stat-right strong{
  text-align:right;
}


/* v2.69.8 server pages: loaded after the main stylesheet. */
html body.fp-smooth-scroll-mode .server-page,
html body.fp-smooth-scroll-mode .server-reboot-page,
html body.fp-smooth-scroll-mode .server-neo-page{
  background-attachment:scroll;
}
html body.fp-smooth-scroll-mode.fp-smooth-scroll-mode .server-page *,
html body.fp-smooth-scroll-mode.fp-smooth-scroll-mode .server-reboot-page *,
html body.fp-smooth-scroll-mode.fp-smooth-scroll-mode .server-neo-page *{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}


/* ==========================================================
   v2.69.10 SERVER PAGES UX CLEANUP
   Applies to Conan Exiles, Minecraft and ARK.
   - removes repeated hero information
   - compacts the information area
   - improves body text readability
   - refines responsive layout
   ========================================================== */

body.server-reboot-body .server-neo-subtitle{
  line-height:1.48;
}

body.server-reboot-body .server-neo-desc{
  max-width:660px;
  font-size:max(var(--server-desc-size,17px), 16px);
  line-height:1.72;
  color:rgba(230,237,250,.88);
}

body.server-reboot-body .server-neo-note-line{
  font-size:max(var(--server-note-size,14px), 13px);
  color:rgba(206,219,241,.76);
}

body.server-reboot-body .server-neo-summary{
  padding:0 0 52px;
}

body.server-reboot-body .server-neo-summary-grid{
  gap:14px;
}

body.server-reboot-body .server-neo-summary-card{
  min-height:96px;
  padding:16px 18px;
}

body.server-reboot-body .server-neo-summary-copy span{
  font-size:max(var(--server-card-label-size,12px), 12px);
}

body.server-reboot-body .server-neo-summary-copy strong{
  font-size:max(var(--server-card-value-size,16px), 15px);
  line-height:1.25;
}

body.server-reboot-body .server-neo-summary-copy small{
  font-size:13px;
  line-height:1.45;
  color:rgba(204,219,241,.76);
}

body.server-reboot-body .server-neo-details{
  padding-top:52px;
  padding-bottom:54px;
}

body.server-reboot-body .server-neo-details-head{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:30px;
}

body.server-reboot-body .server-neo-details-head h2{
  margin-bottom:10px;
}

body.server-reboot-body .server-neo-details-head p,
body.server-reboot-body .server-neo-section-head p{
  font-size:max(var(--server-section-body-size,16px), 15px);
  line-height:1.65;
  color:rgba(208,221,241,.78);
}

body.server-reboot-body .server-neo-details-grid{
  gap:18px;
}

body.server-reboot-body .server-neo-detail-card{
  min-height:0;
  padding:22px 22px 20px;
}

body.server-reboot-body .server-neo-detail-title{
  margin-bottom:14px;
}

body.server-reboot-body .server-neo-detail-title h3{
  font-size:1.02rem;
  line-height:1.34;
}

body.server-reboot-body .server-neo-step-list,
body.server-reboot-body .server-neo-bullet-list{
  gap:8px;
}

body.server-reboot-body .server-neo-step-list li,
body.server-reboot-body .server-neo-bullet-list li{
  min-height:43px;
  padding:8px 10px;
}

body.server-reboot-body .server-neo-step-list p,
body.server-reboot-body .server-neo-bullet-list p{
  font-size:14px;
  line-height:1.4;
  color:rgba(222,231,246,.86);
}

body.server-reboot-body .server-neo-detail-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

body.server-reboot-body .server-neo-info-link{
  min-height:52px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:11px;
  border:1px solid color-mix(in srgb, var(--server-accent) 42%, rgba(255,255,255,.12));
  background:linear-gradient(145deg, rgba(10,21,44,.88), rgba(4,10,24,.96));
  color:#eef5ff;
  font-family:var(--font-head);
  font-size:.84rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

body.server-reboot-body .server-neo-info-link:hover{
  transform:translateY(-2px);
  border-color:var(--server-accent);
}

body.server-reboot-body .server-neo-info-link-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:var(--server-gold);
}

body.server-reboot-body .server-neo-info-link-icon svg{
  width:21px;
  height:21px;
}

body.server-reboot-body .server-neo-info-link-discord .server-neo-info-link-icon{
  color:#59dbff;
}

body.server-reboot-body .server-neo-gallery{
  padding-top:28px;
  padding-bottom:46px;
}

body.server-reboot-body .server-neo-cta{
  padding-top:44px;
  padding-bottom:46px;
}

body.server-reboot-body .server-neo-footer{
  display:none;
}

@media (max-width:1180px){
  body.server-reboot-body .server-neo-details-grid{
    grid-template-columns:1fr;
    max-width:740px;
    margin-inline:auto;
  }
}

@media (max-width:820px){
  body.server-reboot-body .server-neo-container{
    width:calc(100% - 32px);
  }

  body.server-reboot-body .server-neo-hero{
    min-height:auto;
    padding-top:96px;
    padding-bottom:28px;
  }

  body.server-reboot-body .server-neo-logo{
    max-width:100%;
    height:auto;
  }

  body.server-reboot-body .server-neo-subtitle{
    font-size:clamp(1.03rem,4.8vw,1.2rem);
    line-height:1.42;
  }

  body.server-reboot-body .server-neo-desc{
    font-size:15.5px;
    line-height:1.65;
  }

  body.server-reboot-body .server-neo-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  body.server-reboot-body .server-neo-btn{
    width:100%;
    justify-content:center;
  }

  body.server-reboot-body .server-neo-sidecard{
    margin-top:18px;
    padding:18px;
  }

  body.server-reboot-body .server-neo-summary{
    padding:0 0 34px;
  }

  body.server-reboot-body .server-neo-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  body.server-reboot-body .server-neo-summary-card{
    min-height:100px;
    padding:13px 12px;
  }

  body.server-reboot-body .server-neo-summary-copy strong{
    overflow-wrap:anywhere;
  }

  body.server-reboot-body .server-neo-details{
    padding-top:38px;
    padding-bottom:38px;
  }

  body.server-reboot-body .server-neo-details-head{
    text-align:left;
    margin-bottom:22px;
  }

  body.server-reboot-body .server-neo-details-head h2{
    font-size:clamp(1.45rem,7.2vw,2rem);
    line-height:1.14;
  }

  body.server-reboot-body .server-neo-detail-card{
    padding:17px;
  }

  body.server-reboot-body .server-neo-detail-actions{
    display:grid;
    grid-template-columns:1fr;
    margin-top:18px;
  }

  body.server-reboot-body .server-neo-info-link{
    justify-content:center;
  }

  body.server-reboot-body .server-neo-cta{
    padding-top:30px;
    padding-bottom:30px;
  }
}

@media (max-width:420px){
  body.server-reboot-body .server-neo-summary-grid{
    grid-template-columns:1fr;
  }

  body.server-reboot-body .server-neo-summary-card{
    min-height:82px;
  }
}


/* ==========================================================
   v2.69.11 SERVER PAGES COMPACT FLOW
   Final spacing/readability pass for Conan, Minecraft and ARK.
   ========================================================== */
body.server-reboot-body .server-neo-hero{
  padding-top:60px;
  padding-bottom:22px;
}
body.server-reboot-body .server-neo-grid{
  grid-template-columns:minmax(0,1.1fr) minmax(332px,430px);
  gap:34px;
}
body.server-reboot-body .server-neo-sidecard{
  padding:19px;
  min-height:0;
  border-radius:21px;
}
body.server-reboot-body .server-neo-side-top{
  gap:13px;
  margin-bottom:13px;
}
body.server-reboot-body .server-neo-side-stat{
  padding-bottom:10px;
}
body.server-reboot-body .server-neo-page .server-neo-side-stat .server-neo-side-label,
body.server-reboot-body .server-neo-page .server-neo-ipbox .server-neo-side-label{
  margin-bottom:7px;
}
body.server-reboot-body .server-neo-ipbox{
  grid-template-columns:minmax(0,1fr) 46px;
  gap:12px;
  min-height:0;
  padding:12px 0;
  margin-bottom:13px;
}
body.server-reboot-body .server-neo-copy-mini{
  width:46px;
  height:46px;
  border-radius:11px;
}
body.server-reboot-body .server-neo-side-grid{
  gap:11px;
}
body.server-reboot-body .server-neo-side-box{
  min-height:84px;
  padding:12px 13px;
  border-radius:13px;
}
body.server-reboot-body .server-neo-side-box strong{
  font-size:max(var(--server-panel-value-size,15px),14px);
  line-height:1.28;
}
body.server-reboot-body .server-neo-summary{
  padding-bottom:22px;
}
body.server-reboot-body .server-neo-summary-card{
  min-height:88px;
  padding:14px 16px;
  gap:13px;
}
body.server-reboot-body .server-neo-summary-icon{
  width:38px;
  height:38px;
  flex-basis:38px;
}
body.server-reboot-body .server-neo-summary-copy small{
  font-size:14px;
}
body.server-reboot-body .server-neo-details{
  padding-top:0;
  padding-bottom:27px;
}
body.server-reboot-body .server-neo-details-head{
  padding-top:23px;
  margin-bottom:21px;
}
body.server-reboot-body .server-neo-details-head p{
  font-size:16px;
}
body.server-reboot-body .server-neo-detail-card{
  padding:20px 20px 18px;
}
body.server-reboot-body .server-neo-step-list p,
body.server-reboot-body .server-neo-bullet-list p{
  font-size:15px;
  line-height:1.42;
}
body.server-reboot-body .server-neo-step-list li,
body.server-reboot-body .server-neo-bullet-list li{
  min-height:45px;
  padding:9px 11px;
}
body.server-reboot-body .server-neo-detail-actions{
  margin-top:18px;
}
body.server-reboot-body .server-neo-cta{
  padding-top:16px;
  padding-bottom:32px;
}
body.server-reboot-body .server-neo-cta-card{
  padding:27px clamp(23px,3vw,42px);
  gap:16px 28px;
}
body.server-reboot-body .server-neo-cta-card h2{
  font-size:clamp(1.82rem,2.28vw,2.8rem);
}
body.server-reboot-body .server-neo-cta-card p{
  margin-top:9px;
  font-size:1rem;
}
body.server-reboot-body .server-neo-cta-actions{
  gap:10px;
  min-width:0;
  flex-wrap:nowrap;
}
body.server-reboot-body .server-neo-cta-actions .server-neo-btn-compact{
  min-width:215px;
  min-height:64px;
  padding-inline:18px;
}
body.server-reboot-body .server-neo-btn-discord-simple{
  white-space:nowrap;
  gap:10px;
}
body.server-reboot-body .server-neo-btn-discord-simple .server-neo-btn-text{
  display:inline;
}
body.server-reboot-body footer.fp-site-footer{
  margin-top:34px;
  padding-bottom:20px;
}
body.server-reboot-body .fp-site-footer__brand,
body.server-reboot-body .fp-site-footer__col,
body.server-reboot-body .fp-site-footer__status{
  padding:22px 23px;
}
body.server-reboot-body .fp-site-footer__logo{
  margin-bottom:13px;
}

@media (max-width:1240px){
  body.server-reboot-body .server-neo-grid{
    grid-template-columns:1fr;
  }
  body.server-reboot-body .server-neo-sidecard{
    max-width:620px;
  }
}
@media (max-width:820px){
  body.server-reboot-body .server-neo-hero{
    padding-top:88px;
    padding-bottom:18px;
  }
  body.server-reboot-body .server-neo-sidecard{
    margin-top:13px;
    padding:15px;
  }
  body.server-reboot-body .server-neo-summary{
    padding-bottom:16px;
  }
  body.server-reboot-body .server-neo-details-head{
    padding-top:18px;
    margin-bottom:18px;
  }
  body.server-reboot-body .server-neo-details{
    padding-bottom:20px;
  }
  body.server-reboot-body .server-neo-step-list p,
  body.server-reboot-body .server-neo-bullet-list p{
    font-size:14.5px;
  }
  body.server-reboot-body .server-neo-cta{
    padding-top:12px;
    padding-bottom:25px;
  }
  body.server-reboot-body .server-neo-cta-card{
    padding:21px 17px;
    gap:14px;
  }
  body.server-reboot-body .server-neo-cta-actions{
    flex-direction:column;
  }
  body.server-reboot-body .server-neo-cta-actions .server-neo-btn-compact{
    min-width:0;
    min-height:57px;
  }
  body.server-reboot-body footer.fp-site-footer{
    margin-top:22px;
    padding-inline:12px;
  }
}


/* ==========================================================
   v2.70.0 SERVER TREND REDESIGN
   Modern dark-mode, IP-first server landing layout for:
   Conan Exiles, Minecraft and ARK: Survival Evolved.
   ========================================================== */
body.server-reboot-body .server-trend-page{
  min-height:100vh;
  color:#f3f7ff;
  background:
    linear-gradient(180deg,rgba(2,8,18,.44) 0%,rgba(2,8,18,.88) 44%,#020812 100%),
    var(--server-hero-bg) center top / cover no-repeat;
  isolation:isolate;
}
body.server-reboot-body .server-trend-page::before{
  background:
    radial-gradient(circle at 79% 19%,color-mix(in srgb,var(--server-accent) 13%,transparent),transparent 27%),
    linear-gradient(90deg,rgba(2,8,18,.58) 0%,rgba(2,8,18,.22) 44%,rgba(2,8,18,.58) 100%);
}
body.server-reboot-body .server-trend-container{
  width:min(1420px,calc(100% - clamp(32px,7vw,108px)));
  margin-inline:auto;
  position:relative;
  z-index:2;
}

/* HERO */
body.server-reboot-body .server-trend-hero{
  position:relative;
  padding:clamp(66px,6.2vw,92px) 0 clamp(30px,3.5vw,46px);
  overflow:hidden;
}
body.server-reboot-body .server-trend-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:190px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,#020812);
}
body.server-reboot-body .server-trend-hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 27%,rgba(2,8,18,.12),rgba(2,8,18,.64) 43%,transparent 63%),
    linear-gradient(90deg,rgba(2,8,18,.47) 0%,transparent 55%,rgba(2,8,18,.36) 100%);
}
body.server-reboot-body .server-trend-hero-grid{
  display:grid;
  grid-template-columns:minmax(360px,.86fr) minmax(470px,1.08fr);
  align-items:center;
  gap:clamp(32px,4.5vw,72px);
}
body.server-reboot-body .server-trend-intro{
  min-width:0;
  padding:clamp(16px,2vw,26px) 0;
}
body.server-reboot-body .server-trend-kicker{
  margin:0 0 16px;
  color:var(--server-gold);
  font-family:var(--font-head);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
}
body.server-reboot-body .server-trend-title{
  margin:0 0 20px;
  font-family:var(--font-head);
  font-weight:950;
  text-transform:none;
  letter-spacing:-.035em;
  line-height:.98;
  font-size:clamp(3rem,4.55vw,4.65rem);
  color:#fff;
  max-width:600px;
  text-wrap:balance;
}
body.server-reboot-body .server-trend-title span,
body.server-reboot-body .server-trend-title em{
  display:block;
}
body.server-reboot-body .server-trend-title em{
  font-style:normal;
  color:var(--server-gold);
  margin-top:8px;
}
body.server-reboot-body .server-trend-lead{
  margin:0 0 26px;
  max-width:530px;
  color:rgba(232,239,251,.88);
  font-size:1.08rem;
  line-height:1.68;
  font-weight:500;
}
body.server-reboot-body .server-trend-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}
body.server-reboot-body .server-trend-trust span{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border-radius:999px;
  background:rgba(5,15,34,.7);
  border:1px solid rgba(90,161,251,.22);
  color:#e7f0ff;
  font-size:.84rem;
  font-weight:700;
}
body.server-reboot-body .server-trend-trust svg{
  width:18px;height:18px;color:var(--server-accent-2);
}
body.server-reboot-body .server-trend-discord-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:#76d9ff;
  text-decoration:none;
  font-weight:800;
  font-size:.93rem;
}
body.server-reboot-body .server-trend-discord-link svg{
  width:22px;height:22px;
}

/* IP-first command bento */
body.server-reboot-body .server-trend-command{
  padding:clamp(18px,2vw,24px);
  border:1px solid rgba(72,142,255,.42);
  border-radius:23px;
  background:linear-gradient(145deg,rgba(3,12,28,.95),rgba(3,10,24,.86));
  box-shadow:0 30px 72px rgba(0,0,0,.36),0 0 35px rgba(40,111,242,.09),inset 0 1px 0 rgba(255,255,255,.055);
}
body.server-reboot-body .server-trend-ip{
  position:relative;
  padding:4px 0 22px;
  border-bottom:1px solid rgba(95,131,191,.32);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"label label" "ip button" "helper helper";
  gap:12px 18px;
  align-items:center;
}
body.server-reboot-body .server-trend-ip > span{
  grid-area:label;
  color:var(--server-gold);
  font-family:var(--font-head);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.78rem;
}
body.server-reboot-body .server-trend-ip > strong{
  grid-area:ip;
  color:#fff;
  font-family:var(--font-head);
  font-size:clamp(1.6rem,2.5vw,2.7rem);
  letter-spacing:-.03em;
  line-height:1;
  overflow-wrap:anywhere;
}
body.server-reboot-body .server-trend-ip > small{
  grid-area:helper;
  color:rgba(215,226,244,.72);
  font-size:.88rem;
}
body.server-reboot-body .server-trend-copy{
  grid-area:button;
  border:0;
  border-radius:11px;
  min-height:54px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--server-gold),#ffae16);
  color:#071222;
  box-shadow:0 13px 28px rgba(245,197,24,.21);
  font-family:var(--font-head);
  font-size:.9rem;
  font-weight:950;
  letter-spacing:.05em;
  transition:transform .18s ease,filter .18s ease;
}
body.server-reboot-body .server-trend-copy:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}
body.server-reboot-body .server-trend-copy svg{width:20px;height:20px;}
body.server-reboot-body .server-trend-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin-top:16px;
}
body.server-reboot-body .server-trend-metric{
  min-height:116px;
  border:1px solid rgba(76,122,203,.3);
  border-radius:13px;
  padding:15px 15px 13px;
  background:rgba(4,14,32,.56);
}
body.server-reboot-body .server-trend-metric > span{
  display:flex;align-items:center;gap:7px;
  color:#5ebcff;
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:11px;
}
body.server-reboot-body .server-trend-metric > span svg{
  width:18px;height:18px;
}
body.server-reboot-body .server-trend-metric strong{
  display:block;
  color:#f5f8ff;
  font-family:var(--font-head);
  font-size:clamp(1.18rem,1.55vw,1.55rem);
  line-height:1.18;
}
body.server-reboot-body .server-trend-metric small{
  display:block;
  margin-top:8px;
  color:rgba(211,223,243,.69);
  font-size:.76rem;
}
body.server-reboot-body .server-trend-metric.is-players strong{
  color:var(--server-gold);
}
body.server-reboot-body .server-trend-metric.is-online strong{
  color:#53e77c;
}
body.server-reboot-body .server-trend-metric-wide{
  grid-column:1 / -1;
  min-height:77px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:12px;
}
body.server-reboot-body .server-trend-metric-wide span{
  grid-row:1 / 3;
  margin:0;
}
body.server-reboot-body .server-trend-metric-wide strong{
  grid-column:2;
}

/* QUICK BENTO ACTIONS */
body.server-reboot-body .server-trend-quick{
  padding:4px 0 clamp(45px,5vw,65px);
}
body.server-reboot-body .server-trend-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
body.server-reboot-body .server-trend-quick-card{
  min-height:145px;
  padding:20px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"icon arrow" "title arrow" "desc arrow";
  align-content:start;
  gap:8px;
  border-radius:16px;
  border:1px solid rgba(73,119,196,.28);
  background:linear-gradient(145deg,rgba(6,17,37,.9),rgba(3,10,24,.96));
  color:#f3f7ff;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease;
}
body.server-reboot-body .server-trend-quick-card:hover{
  transform:translateY(-3px);
  border-color:rgba(100,173,255,.55);
}
body.server-reboot-body .server-trend-quick-card i{
  grid-area:icon;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:12px;
  color:#73bdff;background:rgba(32,87,179,.21);
  font-style:normal;margin-bottom:7px;
}
body.server-reboot-body .server-trend-quick-card i svg{width:25px;height:25px;}
body.server-reboot-body .server-trend-quick-card strong{
  grid-area:title;font-family:var(--font-head);
  font-size:1rem;line-height:1.2;
}
body.server-reboot-body .server-trend-quick-card span{
  grid-area:desc;color:rgba(212,224,244,.75);
  line-height:1.46;font-size:.86rem;
}
body.server-reboot-body .server-trend-quick-card b{
  grid-area:arrow;align-self:end;
  color:var(--server-gold);font-size:1.25rem;
}

/* SECTIONS */
body.server-reboot-body .server-trend-section-heading{
  text-align:center;
  max-width:770px;
  margin:0 auto clamp(26px,3.4vw,38px);
}
body.server-reboot-body .server-trend-section-heading h2{
  margin:0 0 9px;
  color:#fff;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:clamp(1.7rem,2.5vw,2.35rem);
}
body.server-reboot-body .server-trend-section-heading p{
  margin:0;
  color:rgba(213,224,244,.73);
  font-size:1rem;
}
body.server-reboot-body .server-trend-join{
  padding:0 0 clamp(54px,6vw,76px);
}
body.server-reboot-body .server-trend-steps{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
body.server-reboot-body .server-trend-steps li{
  position:relative;
  min-height:190px;
  padding:22px 19px;
  border-radius:16px;
  text-align:center;
  border:1px solid rgba(70,120,199,.28);
  background:rgba(4,13,29,.62);
}
body.server-reboot-body .server-trend-steps li:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-17px;
  top:50%;
  color:#4e93fa;
  font-weight:800;
  z-index:2;
}
body.server-reboot-body .server-trend-steps b{
  width:32px;height:32px;display:grid;place-items:center;
  margin:0 auto 15px;border-radius:50%;
  border:1px solid rgba(98,158,255,.48);color:#fff;
  background:rgba(31,69,134,.4);font-family:var(--font-head);
}
body.server-reboot-body .server-trend-steps i{
  display:grid;place-items:center;
  width:54px;height:54px;margin:0 auto 16px;
  border-radius:14px;background:rgba(28,79,169,.26);
  border:1px solid rgba(79,143,255,.4);color:#64b5ff;
  font-style:normal;
}
body.server-reboot-body .server-trend-steps i svg{width:29px;height:29px;}
body.server-reboot-body .server-trend-steps strong{
  display:block;color:#f3f7ff;font-size:.92rem;line-height:1.48;
}
body.server-reboot-body .server-trend-benefits{
  padding:0 0 clamp(48px,6vw,68px);
}
body.server-reboot-body .server-trend-benefits-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
body.server-reboot-body .server-trend-benefit{
  min-height:126px;
  padding:22px 18px;
  display:flex;align-items:center;gap:14px;
  border-radius:16px;
  border:1px solid rgba(74,124,205,.29);
  background:linear-gradient(145deg,rgba(6,17,37,.8),rgba(3,10,24,.93));
}
body.server-reboot-body .server-trend-benefit i{
  flex:0 0 42px;display:grid;place-items:center;
  width:42px;height:42px;border-radius:11px;
  color:var(--server-gold);background:rgba(245,197,24,.09);font-style:normal;
}
body.server-reboot-body .server-trend-benefit i svg{width:23px;height:23px;}
body.server-reboot-body .server-trend-benefit strong{
  font-size:.95rem;line-height:1.42;color:#f4f8ff;
}
body.server-reboot-body .server-trend-rules-callout{
  display:flex;align-items:center;gap:16px;
  margin-top:17px;padding:17px 20px;
  border-radius:14px;border:1px solid rgba(245,197,24,.2);
  background:rgba(4,13,29,.72);
}
body.server-reboot-body .server-trend-rules-callout span{
  flex:0 0 38px;color:var(--server-gold);
}
body.server-reboot-body .server-trend-rules-callout span svg{width:30px;height:30px;}
body.server-reboot-body .server-trend-rules-callout p{
  flex:1;margin:0;color:rgba(222,232,247,.82);font-size:.93rem;
}
body.server-reboot-body .server-trend-rules-callout a{
  color:var(--server-gold);font-weight:900;font-family:var(--font-head);
  font-size:.82rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;
}

/* CTA */
body.server-reboot-body .server-trend-cta{
  padding:0 0 clamp(38px,5vw,58px);
}
body.server-reboot-body .server-trend-cta-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:32px;
  padding:clamp(24px,3vw,38px);
  overflow:hidden;
  border-radius:19px;
  border:1px solid rgba(245,197,24,.34);
  background:
    linear-gradient(90deg,rgba(4,12,26,.91),rgba(4,12,25,.71)),
    var(--server-bg) center / cover no-repeat;
  box-shadow:0 25px 60px rgba(0,0,0,.26);
}
body.server-reboot-body .server-trend-cta-card p{
  margin:0 0 8px;color:var(--server-gold);
  font-family:var(--font-head);font-size:.75rem;font-weight:900;
  letter-spacing:.12em;
}
body.server-reboot-body .server-trend-cta-card h2{
  margin:0 0 10px;max-width:650px;
  font-family:var(--font-head);font-size:clamp(1.65rem,2.4vw,2.4rem);
  line-height:1.1;color:#fff;
}
body.server-reboot-body .server-trend-cta-card > div:first-child > span{
  color:rgba(220,232,247,.76);font-weight:600;
}
body.server-reboot-body .server-trend-cta-actions{
  display:flex;gap:10px;align-items:stretch;
}
body.server-reboot-body .server-trend-copy-final{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon ip";
  gap:1px 10px;min-height:66px;min-width:200px;text-align:left;
}
body.server-reboot-body .server-trend-copy-final svg{grid-area:icon;align-self:center;}
body.server-reboot-body .server-trend-copy-final b{grid-area:title;}
body.server-reboot-body .server-trend-copy-final small{
  grid-area:ip;font-family:var(--font-body);font-size:.74rem;font-weight:700;
}
body.server-reboot-body .server-trend-cta-actions a{
  min-height:66px;padding:0 20px;display:inline-flex;align-items:center;gap:9px;
  border-radius:11px;text-decoration:none;
  border:1px solid rgba(72,142,255,.48);background:rgba(24,71,154,.72);color:#fff;
  font-family:var(--font-head);font-size:.82rem;letter-spacing:.04em;
}
body.server-reboot-body .server-trend-cta-actions a svg{width:21px;height:21px;}
body.server-reboot-body footer.fp-site-footer{
  margin-top:20px;
}

/* RESPONSIVE */
@media (max-width:1180px){
  body.server-reboot-body .server-trend-hero-grid{
    grid-template-columns:1fr;
  }
  body.server-reboot-body .server-trend-intro{
    max-width:680px;
  }
  body.server-reboot-body .server-trend-command{
    max-width:720px;
  }
  body.server-reboot-body .server-trend-quick-grid,
  body.server-reboot-body .server-trend-benefits-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.server-reboot-body .server-trend-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.server-reboot-body .server-trend-steps li:nth-child(2)::after{display:none;}
}
@media (max-width:760px){
  body.server-reboot-body .server-trend-container{
    width:calc(100% - 30px);
  }
  body.server-reboot-body .server-trend-hero{
    padding:94px 0 24px;
  }
  body.server-reboot-body .server-trend-title{
    font-size:clamp(2.2rem,11vw,3.05rem);
    letter-spacing:-.045em;
  }
  body.server-reboot-body .server-trend-lead{
    font-size:1rem;
  }
  body.server-reboot-body .server-trend-trust{
    gap:8px;
  }
  body.server-reboot-body .server-trend-trust span{
    width:100%;
  }
  body.server-reboot-body .server-trend-command{
    padding:15px;
    border-radius:17px;
  }
  body.server-reboot-body .server-trend-ip{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:11px;
    padding-bottom:17px;
  }
  body.server-reboot-body .server-trend-ip > strong{
    font-size:clamp(1.36rem,7.2vw,1.9rem);
  }
  body.server-reboot-body .server-trend-copy{
    width:100%;
  }
  body.server-reboot-body .server-trend-metric{
    min-height:103px;
    padding:13px;
  }
  body.server-reboot-body .server-trend-quick{
    padding-bottom:38px;
  }
  body.server-reboot-body .server-trend-quick-grid,
  body.server-reboot-body .server-trend-benefits-grid,
  body.server-reboot-body .server-trend-steps{
    grid-template-columns:1fr;
  }
  body.server-reboot-body .server-trend-quick-card{
    min-height:112px;
  }
  body.server-reboot-body .server-trend-steps li{
    min-height:auto;
    display:grid;
    grid-template-columns:38px 48px 1fr;
    text-align:left;
    align-items:center;
    gap:12px;
    padding:14px;
  }
  body.server-reboot-body .server-trend-steps li::after{display:none;}
  body.server-reboot-body .server-trend-steps b,
  body.server-reboot-body .server-trend-steps i{
    margin:0;
  }
  body.server-reboot-body .server-trend-rules-callout{
    flex-direction:column;
    text-align:center;
  }
  body.server-reboot-body .server-trend-cta-card{
    grid-template-columns:1fr;
    gap:20px;
  }
  body.server-reboot-body .server-trend-cta-actions{
    flex-direction:column;
  }
  body.server-reboot-body .server-trend-cta-actions a{
    justify-content:center;
  }
}


/* ==========================================================
   v2.70.1 VISUAL POLISH + HERO ART RESTORE
   Real hero background, visible SVG icons and friendlier cards.
   ========================================================== */

/* Render the game artwork inside hero, not stretched across the entire page. */
body.server-reboot-body .server-trend-page{
  background:#020812;
}
body.server-reboot-body .server-trend-page::before{
  display:none;
}
body.server-reboot-body .server-trend-hero{
  min-height:min(760px, calc(100vh - 76px));
  display:flex;
  align-items:center;
  padding-top:clamp(54px,5vw,76px);
  padding-bottom:clamp(48px,5vw,76px);
  background:
    linear-gradient(90deg,rgba(2,8,18,.62) 0%,rgba(2,8,18,.32) 43%,rgba(2,8,18,.44) 100%),
    linear-gradient(180deg,rgba(2,8,18,.06) 0%,rgba(2,8,18,.19) 62%,#020812 100%),
    var(--server-hero-bg) center center / cover no-repeat;
}
body.server-reboot-body .server-trend-hero-overlay{
  background:
    radial-gradient(circle at 76% 30%,transparent 0%,rgba(2,8,18,.07) 22%,rgba(2,8,18,.30) 54%,rgba(2,8,18,.52) 100%);
}
body.server-reboot-body .server-trend-hero::after{
  height:88px;
}

/* All new UI icons use outline SVGs; provide their drawing stroke. */
body.server-reboot-body .server-trend-page svg{
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.server-reboot-body .server-trend-page svg circle[fill="currentColor"]{
  fill:currentColor;
  stroke:none;
}
body.server-reboot-body .server-trend-page svg path[fill="currentColor"]{
  fill:currentColor;
  stroke:none;
}

/* Brighter, game-themed hero hierarchy. */
body.server-reboot-body .server-trend-intro{
  text-shadow:0 3px 20px rgba(0,0,0,.6);
}
body.server-reboot-body .server-trend-title{
  font-size:clamp(3.1rem,4.75vw,4.8rem);
  max-width:620px;
}
body.server-reboot-body .server-trend-lead{
  max-width:550px;
  color:rgba(242,247,255,.92);
}
body.server-reboot-body .server-trend-command{
  background:linear-gradient(145deg,rgba(3,12,28,.93),rgba(3,10,24,.88));
  box-shadow:0 30px 72px rgba(0,0,0,.4),0 0 45px rgba(51,126,247,.12),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(4px);
}
body.fp-smooth-scroll-mode.server-reboot-body .server-trend-command{
  backdrop-filter:none;
}

/* Restore strong icons in action cards. */
body.server-reboot-body .server-trend-quick{
  margin-top:-30px;
  position:relative;
  z-index:5;
  padding-bottom:clamp(50px,5vw,68px);
}
body.server-reboot-body .server-trend-quick-card{
  min-height:154px;
  padding:21px;
  background:
    radial-gradient(circle at 12% 12%,rgba(37,104,213,.14),transparent 40%),
    linear-gradient(145deg,rgba(7,19,41,.97),rgba(3,10,24,.98));
}
body.server-reboot-body .server-trend-quick-card i{
  color:#68bbff;
  background:linear-gradient(145deg,rgba(24,80,178,.36),rgba(14,40,94,.28));
  border:1px solid rgba(70,145,255,.36);
}
body.server-reboot-body .server-trend-quick-card:nth-child(2) i,
body.server-reboot-body .server-trend-quick-card:nth-child(3) i{
  color:var(--server-gold);
  background:rgba(245,197,24,.10);
  border-color:rgba(245,197,24,.26);
}

/* Steps now include readable titles and supporting descriptions. */
body.server-reboot-body .server-trend-steps li{
  min-height:218px;
  background:
    radial-gradient(circle at 50% 18%,rgba(30,82,171,.12),transparent 34%),
    rgba(4,13,29,.78);
}
body.server-reboot-body .server-trend-steps strong{
  display:block;
  font-family:var(--font-head);
  text-transform:uppercase;
  color:#f7faff;
  margin-bottom:8px;
  font-size:.88rem;
}
body.server-reboot-body .server-trend-steps small{
  display:block;
  color:rgba(215,226,244,.76);
  font-size:.82rem;
  line-height:1.48;
}

/* Benefits contain headline and friendly supporting copy. */
body.server-reboot-body .server-trend-benefit{
  align-items:flex-start;
  min-height:146px;
  padding:23px 18px;
}
body.server-reboot-body .server-trend-benefit strong{
  display:block;
  margin:2px 0 7px;
  font-family:var(--font-head);
  font-size:.91rem;
  text-transform:uppercase;
  color:#f5f8ff;
}
body.server-reboot-body .server-trend-benefit small{
  display:block;
  color:rgba(211,224,245,.74);
  font-size:.82rem;
  line-height:1.48;
}
body.server-reboot-body .server-trend-rules-callout{
  margin-top:20px;
}

/* Use the game image visibly in final CTA as well. */
body.server-reboot-body .server-trend-cta-card{
  min-height:174px;
  background:
    linear-gradient(90deg,rgba(4,12,26,.96) 0%,rgba(4,12,25,.78) 43%,rgba(4,12,25,.42) 100%),
    var(--server-bg) right center / cover no-repeat;
}

@media (max-width:1180px){
  body.server-reboot-body .server-trend-hero{
    min-height:auto;
    background-position:68% center;
  }
  body.server-reboot-body .server-trend-quick{
    margin-top:0;
  }
}
@media (max-width:760px){
  body.server-reboot-body .server-trend-hero{
    padding-top:98px;
    padding-bottom:31px;
    background:
      linear-gradient(180deg,rgba(2,8,18,.44),rgba(2,8,18,.82) 50%,#020812 100%),
      var(--server-hero-bg) 68% top / auto 560px no-repeat;
  }
  body.server-reboot-body .server-trend-title{
    font-size:clamp(2.18rem,10.8vw,3.05rem);
  }
  body.server-reboot-body .server-trend-steps li{
    min-height:auto;
    grid-template-columns:34px 52px 1fr;
    grid-template-areas:"number icon title" "number icon desc";
  }
  body.server-reboot-body .server-trend-steps b{grid-area:number;}
  body.server-reboot-body .server-trend-steps i{grid-area:icon;}
  body.server-reboot-body .server-trend-steps strong{grid-area:title;margin:0;}
  body.server-reboot-body .server-trend-steps small{grid-area:desc;}
  body.server-reboot-body .server-trend-benefit{
    min-height:112px;
  }
}


/* ==========================================================
   v2.70.2 CINEMATIC SERVER PAGES + SHARED CATEGORY GALLERY
   Hero characters, stronger depth, richer cards and gallery filters.
   ========================================================== */

/* Hero: make the artwork and per-game character part of the composition. */
body.server-reboot-body .server-trend-hero{
  min-height:min(790px,calc(100vh - 70px));
  background:
    linear-gradient(90deg,rgba(2,8,18,.50) 0%,rgba(2,8,18,.17) 42%,rgba(2,8,18,.35) 100%),
    linear-gradient(180deg,rgba(2,8,18,.03) 0%,rgba(2,8,18,.08) 58%,#020812 100%),
    var(--server-hero-bg) center center/cover no-repeat;
}
body.server-reboot-body .server-trend-hero-overlay{
  background:
    radial-gradient(ellipse at 47% 42%,transparent 0%,rgba(2,8,18,.06) 24%,rgba(2,8,18,.29) 70%),
    linear-gradient(90deg,rgba(2,8,18,.42),transparent 47%,rgba(2,8,18,.23));
}
body.server-reboot-body .server-trend-character{
  position:absolute;
  z-index:1;
  pointer-events:none;
  bottom:-15px;
  left:calc(50% - 140px);
  width:min(24vw,380px);
  max-height:640px;
  object-fit:contain;
  object-position:center bottom;
  opacity:.82;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.6));
}
body.server-reboot-body .server-trend-hero-grid{
  position:relative;
  z-index:2;
}
body.server-reboot-body .server-trend-intro{
  padding-bottom:82px;
}
body.server-reboot-body .server-trend-title{
  text-shadow:0 8px 34px rgba(0,0,0,.64);
}
body.server-reboot-body .server-trend-command{
  border-color:rgba(80,149,255,.58);
  background:
    linear-gradient(145deg,rgba(3,12,29,.92),rgba(3,10,24,.89));
  box-shadow:0 34px 82px rgba(0,0,0,.48),0 0 45px rgba(54,126,255,.14),inset 0 1px 0 rgba(255,255,255,.075);
}
body.server-reboot-body .server-trend-copy{
  background:linear-gradient(135deg,#ffd32c,#f4ab16);
}

/* Quick-action cards: differentiated modern bento accents. */
body.server-reboot-body .server-trend-quick{
  margin-top:-50px;
}
body.server-reboot-body .server-trend-quick-card{
  position:relative;
  overflow:hidden;
  min-height:164px;
  padding:23px;
}
body.server-reboot-body .server-trend-quick-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg,#4aaaff,transparent);
}
body.server-reboot-body .server-trend-quick-card:nth-child(2)::before{
  background:linear-gradient(90deg,#ffd12c,transparent);
}
body.server-reboot-body .server-trend-quick-card:nth-child(3)::before{
  background:linear-gradient(90deg,var(--server-accent),transparent);
}
body.server-reboot-body .server-trend-quick-card:nth-child(4)::before{
  background:linear-gradient(90deg,#57d8ff,transparent);
}
body.server-reboot-body .server-trend-quick-card i{
  width:51px;
  height:51px;
}
body.server-reboot-body .server-trend-quick-card i svg{
  width:29px;
  height:29px;
}

/* Steps: stronger hierarchy with a visual route between cards. */
body.server-reboot-body .server-trend-join{
  position:relative;
  padding-bottom:clamp(62px,6vw,84px);
}
body.server-reboot-body .server-trend-steps{
  gap:22px;
}
body.server-reboot-body .server-trend-steps li{
  min-height:238px;
  border-color:rgba(72,131,220,.37);
  background:
    radial-gradient(circle at 50% 16%,rgba(47,115,232,.20),transparent 34%),
    linear-gradient(160deg,rgba(7,19,41,.94),rgba(3,10,24,.97));
}
body.server-reboot-body .server-trend-steps i{
  width:62px;
  height:62px;
  border-radius:18px;
}
body.server-reboot-body .server-trend-steps i svg{
  width:33px;
  height:33px;
}
body.server-reboot-body .server-trend-steps li:nth-child(even) i{
  color:var(--server-gold);
  background:rgba(245,197,24,.10);
  border-color:rgba(245,197,24,.32);
}

/* Benefits are no longer a flat strip. */
body.server-reboot-body .server-trend-benefits-grid{
  gap:18px;
}
body.server-reboot-body .server-trend-benefit{
  position:relative;
  min-height:174px;
  display:block;
  padding:27px 23px;
  border-color:rgba(72,130,218,.36);
  background:
    radial-gradient(circle at 12% 10%,rgba(245,197,24,.10),transparent 38%),
    linear-gradient(145deg,rgba(7,19,41,.92),rgba(3,10,24,.98));
}
body.server-reboot-body .server-trend-benefit i{
  margin-bottom:17px;
  width:50px;
  height:50px;
}
body.server-reboot-body .server-trend-benefit i svg{
  width:27px;
  height:27px;
}
body.server-reboot-body .server-trend-benefit strong{
  font-size:1.01rem;
}
body.server-reboot-body .server-trend-benefit small{
  font-size:.9rem;
}

/* Existing WordPress gallery embedded on each server page. */
body.server-reboot-body .server-trend-gallery{
  padding:0 0 clamp(58px,7vw,82px);
}
body.server-reboot-body .server-trend-gallery .server-trend-section-heading{
  margin-bottom:25px;
}
body.server-reboot-body .server-trend-section-kicker{
  margin:0 0 10px;
  color:var(--server-gold);
  font-family:var(--font-head);
  font-size:.73rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}
body.server-reboot-body .server-trend-gallery-filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin:0 auto 25px;
}
body.server-reboot-body .server-trend-gallery-filters .gallery-chip{
  min-height:39px;
  padding:0 17px;
  border-radius:999px;
  border:1px solid rgba(74,126,208,.4);
  background:rgba(5,15,34,.8);
  color:rgba(226,236,250,.8);
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
body.server-reboot-body .server-trend-gallery-filters .gallery-chip:hover,
body.server-reboot-body .server-trend-gallery-filters .gallery-chip.active{
  background:linear-gradient(135deg,var(--server-gold),#f0a614);
  border-color:transparent;
  color:#061122;
}
body.server-reboot-body .server-trend-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
body.server-reboot-body .server-trend-gallery-card{
  position:relative;
  display:block;
  width:100%;
  height:284px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(73,130,215,.37);
  border-radius:17px;
  background:#061128;
  cursor:pointer;
  text-align:left;
  box-shadow:0 22px 52px rgba(0,0,0,.28);
}
body.server-reboot-body .server-trend-gallery-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}
body.server-reboot-body .server-trend-gallery-card:hover img{
  transform:scale(1.045);
}
body.server-reboot-body .server-trend-gallery-card .gallery-tag{
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(4,12,27,.76);
  border:1px solid rgba(255,211,44,.46);
  color:#ffd32c;
  font-family:var(--font-head);
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
}
body.server-reboot-body .server-trend-gallery-card .gallery-tag-secondary{
  left:auto;
  right:14px;
}
body.server-reboot-body .server-trend-gallery-meta{
  position:absolute;
  inset:auto 0 0;
  padding:42px 17px 15px;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#fff;
  background:linear-gradient(180deg,transparent,rgba(2,8,18,.94));
}
body.server-reboot-body .server-trend-gallery-meta strong{
  font-family:var(--font-head);
  font-size:1rem;
}
body.server-reboot-body .server-trend-gallery-meta span,
body.server-reboot-body .server-trend-gallery-meta small{
  color:rgba(218,230,246,.78);
  font-size:.78rem;
}

/* More cinematic final banner. */
body.server-reboot-body .server-trend-cta-card{
  min-height:208px;
  padding-inline:clamp(28px,4vw,54px);
  background:
    linear-gradient(90deg,rgba(3,10,22,.96) 0%,rgba(3,10,22,.86) 39%,rgba(3,10,22,.26) 100%),
    var(--server-bg) right 34% / cover no-repeat;
}
body.server-reboot-body .server-trend-cta-card h2{
  font-size:clamp(1.85rem,2.7vw,2.72rem);
}

/* Lighter footer weight on game landing pages. */
body.server-reboot-body footer.fp-site-footer{
  margin-top:8px;
}
body.server-reboot-body .fp-site-footer__main{
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
body.server-reboot-body .fp-site-footer__brand,
body.server-reboot-body .fp-site-footer__col,
body.server-reboot-body .fp-site-footer__status{
  padding-top:19px;
  padding-bottom:19px;
}

@media (max-width:1180px){
  body.server-reboot-body .server-trend-character{
    opacity:.42;
    left:auto;
    right:2%;
    width:min(42vw,350px);
  }
  body.server-reboot-body .server-trend-intro{
    padding-bottom:10px;
  }
  body.server-reboot-body .server-trend-quick{
    margin-top:0;
  }
  body.server-reboot-body .server-trend-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  body.server-reboot-body .server-trend-character{
    display:none;
  }
  body.server-reboot-body .server-trend-quick-card{
    min-height:120px;
  }
  body.server-reboot-body .server-trend-steps li{
    min-height:auto;
  }
  body.server-reboot-body .server-trend-benefit{
    min-height:126px;
    padding:19px;
  }
  body.server-reboot-body .server-trend-benefit i{
    margin-bottom:11px;
  }
  body.server-reboot-body .server-trend-gallery-grid{
    grid-template-columns:1fr;
  }
  body.server-reboot-body .server-trend-gallery-card{
    height:245px;
  }
  body.server-reboot-body .server-trend-cta-card{
    min-height:auto;
  }
}


/* ==========================================================
   v2.70.3 SERVER GALLERY PREVIEW FIX
   Compact per-game gallery on server landing pages.
   ========================================================== */
body.server-reboot-body .server-trend-gallery-preview{
  padding:clamp(34px,4.5vw,52px) 0 clamp(48px,5.5vw,68px);
  background:
    radial-gradient(circle at 50% 12%,rgba(40,101,194,.10),transparent 45%),
    transparent;
}
body.server-reboot-body .server-trend-gallery-preview .server-trend-section-heading{
  margin-bottom:clamp(22px,2.7vw,30px);
}
body.server-reboot-body .server-trend-gallery-preview-grid{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

/* Reset homepage masonry layout classes and any gallery-item spans here.
   Server pages are a compact preview, not a full editorial gallery. */
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card.large,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card.wide,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card.tall{
  grid-column:auto;
  grid-row:auto;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16 / 10;
  border-radius:15px;
  overflow:hidden;
  position:relative;
  padding:0;
  background:#061128;
  border:1px solid rgba(73,130,215,.35);
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,transparent 34%,rgba(2,8,18,.12) 48%,rgba(2,8,18,.93) 100%);
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card:hover img{
  transform:scale(1.045);
}
body.server-reboot-body .server-trend-gallery-preview-grid .gallery-tag{
  top:12px;
  left:12px;
  padding:5px 9px;
  font-size:.62rem;
}
body.server-reboot-body .server-trend-gallery-preview-grid .gallery-tag-secondary{
  left:auto;
  right:12px;
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:38px 14px 13px;
  display:flex;
  flex-direction:column;
  gap:3px;
  background:transparent;
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-meta strong{
  display:block;
  color:#fff;
  font-family:var(--font-head);
  font-size:.88rem;
  line-height:1.28;
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-meta span,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-meta small{
  color:rgba(221,232,248,.80);
  font-size:.74rem;
  line-height:1.35;
}
body.server-reboot-body .server-trend-gallery-actions{
  display:flex;
  justify-content:center;
  margin-top:24px;
}
body.server-reboot-body .server-trend-gallery-actions a{
  min-height:48px;
  padding:0 21px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(245,197,24,.38);
  border-radius:11px;
  background:rgba(7,18,38,.78);
  color:var(--server-gold);
  font-family:var(--font-head);
  font-weight:900;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
body.server-reboot-body .server-trend-gallery-actions a:hover{
  transform:translateY(-2px);
  border-color:var(--server-gold);
  background:rgba(245,197,24,.08);
}

@media (max-width:980px){
  body.server-reboot-body .server-trend-gallery-preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:620px){
  body.server-reboot-body .server-trend-gallery-preview-grid{
    grid-template-columns:1fr;
  }
  body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card{
    aspect-ratio:16 / 10;
  }
}


/* ==========================================================
   v2.70.5 COMPACT GALLERY TAGS
   Smaller badges in server page gallery previews.
   ========================================================== */
body.server-reboot-body .server-trend-gallery-preview-grid .gallery-tag{
  top:10px;
  left:10px;
  min-height:0;
  max-width:calc(50% - 14px);
  padding:4px 8px;
  border-radius:999px;
  font-size:.52rem;
  line-height:1.05;
  letter-spacing:.04em;
  white-space:nowrap;
}
body.server-reboot-body .server-trend-gallery-preview-grid .gallery-tag-secondary{
  left:auto;
  right:10px;
}


/* v2.70.9: Neutral state while live Conan status is awaiting a bot reading. */
body.server-reboot-body .server-trend-metric.is-status.is-unknown strong{
  color:#ffd32c;
}
body.server-reboot-body .server-trend-metric.is-status.is-unknown{
  border-color:rgba(245,197,24,.28);
}


/* ==========================================================
   v2.70.11 POLISH GALLERY LABEL READABILITY FIX
   Use the Latin-extended body typeface in compact badges/chips
   so Ą Ć Ę Ł Ń Ó Ś Ź Ż remain clear at small sizes.
   ========================================================== */
#gallery .gallery-item .gallery-tag,
.fp-gallery-archive-grid .gallery-tag,
body.server-reboot-body .server-trend-gallery-preview-grid .gallery-tag{
  font-family:var(--font-body,'Rajdhani',sans-serif);
  font-weight:700;
  font-size:.67rem;
  line-height:1.18;
  letter-spacing:.055em;
  padding-top:5px;
  padding-bottom:6px;
}
.gallery-filters .gallery-chip,
.fp-gallery-archive-filters .gallery-chip{
  font-family:var(--font-body,'Rajdhani',sans-serif);
  font-weight:700;
  letter-spacing:.055em;
}
@media (max-width:620px){
  #gallery .gallery-item .gallery-tag,
  .fp-gallery-archive-grid .gallery-tag,
  body.server-reboot-body .server-trend-gallery-preview-grid .gallery-tag{
    font-size:.64rem;
    line-height:1.18;
  }
}

/* ==========================================================
   v2.71.0 STORYBOOK SERVER PAGES
   Guild Wars style inspiration without copying external assets:
   centered hero logo, cinematic trailer ribbon, scenic story section.
   ========================================================== */
body.server-reboot-body .server-trend-page-conan{
  --server-gw-ribbon:#8d1025;
  --server-gw-ribbon-dark:#280811;
  --server-gw-ribbon-soft:#c24a2f;
  --server-gw-cream:#ffe4ad;
}
body.server-reboot-body .server-trend-page-ark{
  --server-gw-ribbon:#0b4560;
  --server-gw-ribbon-dark:#041823;
  --server-gw-ribbon-soft:#21a7c8;
  --server-gw-cream:#d9f7ff;
}
body.server-reboot-body .server-trend-page-minecraft{
  --server-gw-ribbon:#185d31;
  --server-gw-ribbon-dark:#071b10;
  --server-gw-ribbon-soft:#79d34d;
  --server-gw-cream:#edffd7;
}
body.server-reboot-body .server-trend-page{
  background:#050706;
  overflow:hidden;
}
body.server-reboot-body .server-trend-hero{
  min-height:calc(100vh - 62px);
  padding:clamp(86px,8vw,122px) 0 clamp(86px,8vw,132px);
  display:flex;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 36%,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(180deg,rgba(3,5,10,.10) 0%,rgba(3,5,10,.20) 43%,rgba(5,6,6,.82) 84%,#050706 100%),
    linear-gradient(90deg,rgba(2,3,6,.58),rgba(2,3,6,.18) 47%,rgba(2,3,6,.58)),
    var(--server-hero-bg) center center/cover no-repeat;
}
body.server-reboot-body .server-trend-hero::after{
  height:160px;
  background:linear-gradient(180deg,transparent,#050706 92%);
}
body.server-reboot-body .server-trend-hero-overlay{
  background:
    radial-gradient(ellipse at 50% 38%,transparent 0 30%,rgba(0,0,0,.20) 60%,rgba(0,0,0,.52) 100%),
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.12) 42%,rgba(0,0,0,.56));
}
body.server-reboot-body .server-trend-hero-grid{
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
  gap:clamp(18px,2.2vw,30px);
}
body.server-reboot-body .server-trend-intro{
  max-width:min(980px,100%);
  margin-inline:auto;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-shadow:0 8px 38px rgba(0,0,0,.78);
}
body.server-reboot-body .server-trend-kicker{
  margin:0 0 13px;
  color:var(--server-gw-cream);
  letter-spacing:.18em;
  font-size:clamp(.75rem,1.1vw,.9rem);
  text-shadow:0 2px 18px rgba(0,0,0,.85);
}
body.server-reboot-body .server-gw-logo{
  display:block;
  width:min(var(--server-logo-width,520px),78vw);
  max-height:210px;
  object-fit:contain;
  margin:0 auto clamp(13px,1.8vw,22px);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.70)) drop-shadow(0 0 16px rgba(255,255,255,.10));
}
body.server-reboot-body .server-trend-page-minecraft .server-gw-logo{
  max-height:128px;
  width:min(500px,78vw);
}
body.server-reboot-body .server-gw-hero-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0 0 18px;
  padding:0;
}
body.server-reboot-body .server-gw-hero-tags li{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  color:#fff4d6;
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(7,5,7,.44);
  border:1px solid rgba(255,226,166,.40);
  box-shadow:0 9px 20px rgba(0,0,0,.20);
}
body.server-reboot-body .server-trend-title{
  margin:0 auto 12px;
  max-width:780px;
  font-size:clamp(1.65rem,3vw,2.9rem);
  line-height:1.04;
  letter-spacing:-.015em;
  text-transform:none;
  text-wrap:balance;
}
body.server-reboot-body .server-trend-title span,
body.server-reboot-body .server-trend-title em{
  display:inline;
}
body.server-reboot-body .server-trend-title em{
  color:var(--server-gw-cream);
  margin:0;
}
body.server-reboot-body .server-trend-lead{
  margin:0 auto 19px;
  max-width:720px;
  font-size:clamp(1rem,1.35vw,1.23rem);
  line-height:1.6;
  color:rgba(255,255,255,.92);
}
body.server-reboot-body .server-trend-trust{
  justify-content:center;
  margin:0 0 18px;
}
body.server-reboot-body .server-trend-trust span{
  border-color:rgba(255,226,166,.35);
  background:rgba(0,0,0,.32);
  color:#fff8e4;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
body.server-reboot-body .server-trend-trust svg{
  color:var(--server-gw-cream);
}
body.server-reboot-body .server-trend-discord-link{
  min-height:42px;
  padding:0 20px;
  color:#1b1006;
  text-shadow:none;
  border-radius:0;
  background:linear-gradient(180deg,#fff0c9,#e5ad58);
  border:1px solid rgba(255,255,255,.55);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  box-shadow:0 13px 26px rgba(0,0,0,.34);
}
body.server-reboot-body .server-trend-discord-link svg{
  color:#1b1006;
}
body.server-reboot-body .server-trend-character{
  left:auto;
  right:clamp(8px,5vw,80px);
  bottom:18px;
  width:min(260px,22vw);
  transform:scale(var(--server-character-scale,1));
  transform-origin:right bottom;
  max-height:62vh;
  opacity:var(--server-character-opacity,.38);
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.68));
}
body.server-reboot-body .server-trend-command{
  width:min(980px,100%);
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
body.server-reboot-body .server-trend-ip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
}
body.server-reboot-body .server-trend-ip > span,
body.server-reboot-body .server-trend-ip > small{
  display:none;
}
body.server-reboot-body .server-trend-ip > strong{
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff8e5;
  font-size:clamp(.95rem,1.5vw,1.12rem);
  letter-spacing:.02em;
  background:rgba(0,0,0,.40);
  border:1px solid rgba(255,226,166,.34);
  box-shadow:0 9px 22px rgba(0,0,0,.24);
}
body.server-reboot-body .server-trend-copy{
  min-height:42px;
  border-radius:0;
  background:linear-gradient(180deg,#fff1c8,#dfa24e);
  color:#1b1006;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  box-shadow:0 12px 26px rgba(0,0,0,.30);
}
body.server-reboot-body .server-trend-metrics{
  width:min(760px,100%);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
body.server-reboot-body .server-trend-metric,
body.server-reboot-body .server-trend-metric-wide{
  min-height:0;
  padding:8px 11px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:auto;
  grid-column:auto;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,226,166,.24);
}
body.server-reboot-body .server-trend-metric > span,
body.server-reboot-body .server-trend-metric-wide span{
  display:inline-flex;
  margin:0;
  grid-row:auto;
  color:var(--server-gw-cream);
  font-size:.62rem;
}
body.server-reboot-body .server-trend-metric strong,
body.server-reboot-body .server-trend-metric-wide strong{
  display:inline;
  grid-column:auto;
  color:#fff;
  font-size:.82rem;
  line-height:1;
}
body.server-reboot-body .server-trend-metric small{
  display:none;
}

body.server-reboot-body .server-gw-ribbon{
  position:relative;
  z-index:4;
  margin-top:-48px;
  padding:clamp(82px,8vw,122px) 0 clamp(54px,5vw,72px);
  background:
    radial-gradient(circle at 22% 10%,rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 78% 0%,rgba(255,193,64,.13),transparent 28%),
    repeating-linear-gradient(22deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,var(--server-gw-ribbon),var(--server-gw-ribbon-dark));
  box-shadow:0 -16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
body.server-reboot-body .server-gw-ribbon::before{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  top:-44px;
  height:82px;
  background:linear-gradient(180deg,var(--server-gw-ribbon-soft),var(--server-gw-ribbon));
  clip-path:polygon(0 42%,8% 35%,18% 46%,29% 31%,40% 43%,52% 33%,64% 47%,78% 35%,90% 43%,100% 34%,100% 100%,0 100%);
}
body.server-reboot-body .server-gw-ribbon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:74px;
  background:linear-gradient(180deg,transparent,#050706 88%);
  pointer-events:none;
}
body.server-reboot-body .server-gw-ribbon-inner{
  width:min(920px,calc(100% - 32px));
  margin-inline:auto;
  position:relative;
  z-index:2;
  text-align:center;
}
body.server-reboot-body .server-gw-ribbon-label{
  margin:0 0 18px;
  color:#fff1bc;
  font-family:var(--font-head);
  font-size:.82rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.server-reboot-body .server-gw-video-frame{
  width:min(780px,100%);
  aspect-ratio:16/9;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:#08080a;
  border:2px solid rgba(255,224,162,.70);
  box-shadow:0 28px 72px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.4) inset;
}
body.server-reboot-body .server-gw-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
body.server-reboot-body .server-gw-ribbon-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
body.server-reboot-body .server-gw-ribbon-actions a{
  min-height:42px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#1b1006;
  text-decoration:none;
  font-family:var(--font-head);
  font-size:.86rem;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff1c8,#dfa24e);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  box-shadow:0 12px 26px rgba(0,0,0,.30);
}
body.server-reboot-body .server-gw-ribbon-actions svg{
  width:19px;
  height:19px;
}

body.server-reboot-body .server-trend-quick{
  padding:clamp(34px,4vw,52px) 0 clamp(32px,3.5vw,48px);
  margin:0;
  background:#050706;
}
body.server-reboot-body .server-trend-quick-grid{
  gap:12px;
}
body.server-reboot-body .server-trend-quick-card{
  min-height:118px;
  border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),rgba(10,12,13,.76);
  border:1px solid rgba(255,230,180,.18);
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}
body.server-reboot-body .server-trend-quick-card:hover{
  border-color:rgba(255,230,180,.42);
  transform:translateY(-2px);
}
body.server-reboot-body .server-trend-quick-card i{
  border-radius:0;
  color:var(--server-gw-cream);
  background:rgba(255,224,162,.09);
  border-color:rgba(255,224,162,.22);
}
body.server-reboot-body .server-trend-quick-card b{
  color:var(--server-gw-cream);
}

body.server-reboot-body .server-gw-world{
  position:relative;
  min-height:clamp(760px,92vh,1040px);
  display:flex;
  align-items:flex-end;
  padding:clamp(280px,34vw,450px) 0 clamp(72px,8vw,112px);
  background:var(--server-world-bg) center center/cover no-repeat;
  overflow:hidden;
}
body.server-reboot-body .server-gw-world::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,#050706 0%,rgba(5,7,6,.20) 20%,rgba(5,7,6,.06) 48%,rgba(5,7,6,.74) 78%,#050706 100%),
    radial-gradient(ellipse at 50% 55%,transparent 0 38%,rgba(0,0,0,.48) 100%);
  pointer-events:none;
}
body.server-reboot-body .server-gw-world-character{
  position:absolute;
  left:clamp(10px,5vw,88px);
  bottom:clamp(36px,7vw,110px);
  width:min(260px,25vw);
  max-height:420px;
  object-fit:contain;
  opacity:.86;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.66));
  pointer-events:none;
  z-index:1;
}
body.server-reboot-body .server-gw-world-content{
  z-index:2;
}
body.server-reboot-body .server-gw-world-copy{
  width:min(720px,100%);
  margin:0 auto clamp(30px,4vw,48px);
  text-align:center;
  text-shadow:0 8px 28px rgba(0,0,0,.82);
}
body.server-reboot-body .server-gw-world-copy h2{
  margin:0 0 14px;
  color:#fff8e8;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(2rem,4vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
body.server-reboot-body .server-gw-world-copy p{
  margin:0 auto;
  max-width:680px;
  color:rgba(255,255,255,.86);
  font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.72;
}
body.server-reboot-body .server-gw-card-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
body.server-reboot-body .server-gw-story-card{
  text-align:center;
  color:#fff;
}
body.server-reboot-body .server-gw-story-card img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:2px solid rgba(255,224,162,.58);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
}
body.server-reboot-body .server-gw-story-card h3{
  margin:13px 0 8px;
  color:#fff4d6;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(1.1rem,1.5vw,1.55rem);
  line-height:1.15;
}
body.server-reboot-body .server-gw-story-card p{
  margin:0;
  color:rgba(255,255,255,.77);
  font-size:.88rem;
  line-height:1.55;
}

body.server-reboot-body .server-trend-join,
body.server-reboot-body .server-trend-benefits,
body.server-reboot-body .server-trend-gallery-preview,
body.server-reboot-body .server-trend-cta{
  background:#050706;
}
body.server-reboot-body .server-trend-section-heading h2,
body.server-reboot-body .server-trend-cta-card h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.02em;
  color:#fff8e8;
}
body.server-reboot-body .server-trend-section-heading p{
  color:rgba(255,255,255,.72);
}
body.server-reboot-body .server-trend-steps li,
body.server-reboot-body .server-trend-benefit,
body.server-reboot-body .server-trend-rules-callout,
body.server-reboot-body .server-trend-cta-card{
  border-radius:0;
  border-color:rgba(255,230,180,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(10,12,13,.76);
}
body.server-reboot-body .server-trend-steps i,
body.server-reboot-body .server-trend-benefit i{
  border-radius:0;
  color:var(--server-gw-cream);
  background:rgba(255,224,162,.08);
  border-color:rgba(255,224,162,.22);
}
body.server-reboot-body .server-trend-steps b,
body.server-reboot-body .server-trend-rules-callout a,
body.server-reboot-body .server-trend-gallery-actions a{
  color:var(--server-gw-cream);
  border-color:rgba(255,224,162,.28);
}
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card.large,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card.wide,
body.server-reboot-body .server-trend-gallery-preview-grid .server-trend-gallery-card.tall{
  border-radius:0;
  border-color:rgba(255,224,162,.36);
}
body.server-reboot-body .server-trend-cta-card{
  background:
    linear-gradient(90deg,rgba(5,7,6,.92),rgba(5,7,6,.62)),
    var(--server-bg) center/cover no-repeat;
}

@media (max-width:1180px){
  body.server-reboot-body .server-trend-character{
    opacity:.22;
    width:min(280px,34vw);
  }
  body.server-reboot-body .server-trend-hero{
    min-height:auto;
  }
  body.server-reboot-body .server-gw-card-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:860px){
  body.server-reboot-body .server-gw-card-row,
  body.server-reboot-body .server-trend-quick-grid{
    grid-template-columns:1fr;
  }
  body.server-reboot-body .server-gw-world-character,
  body.server-reboot-body .server-trend-character{
    display:none;
  }
  body.server-reboot-body .server-gw-world{
    min-height:auto;
    padding:260px 0 66px;
  }
}
@media (max-width:620px){
  body.server-reboot-body .server-trend-hero{
    padding:92px 0 82px;
    background:
      linear-gradient(180deg,rgba(3,5,10,.38),rgba(3,5,10,.62) 58%,#050706 100%),
      var(--server-hero-bg) center top/auto 620px no-repeat;
  }
  body.server-reboot-body .server-gw-logo{
    width:min(340px,82vw);
    max-height:145px;
  }
  body.server-reboot-body .server-trend-page-minecraft .server-gw-logo{
    max-height:86px;
  }
  body.server-reboot-body .server-gw-hero-tags li{
    font-size:.65rem;
    min-height:25px;
  }
  body.server-reboot-body .server-trend-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  body.server-reboot-body .server-trend-metric,
  body.server-reboot-body .server-trend-metric-wide{
    justify-content:center;
    border-radius:0;
  }
  body.server-reboot-body .server-gw-ribbon{
    margin-top:-36px;
    padding-top:74px;
  }
  body.server-reboot-body .server-gw-ribbon::before{
    top:-34px;
    height:64px;
  }
  body.server-reboot-body .server-gw-world{
    padding-top:210px;
  }
}

/* ==========================================================
   v2.70.15 - Guild Wars inspired polish pass for server pages
   Goal: calmer trailer ribbon, more breathing room in hero,
   stronger cinematic cards and better text readability.
   ========================================================== */

body.server-reboot-body .server-trend-hero{
  min-height:clamp(820px, calc(100vh - 54px), 980px);
  padding:clamp(118px,9vw,154px) 0 clamp(112px,8vw,150px);
  background-position:center center;
}
body.server-reboot-body .server-trend-hero::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:clamp(82px,8vw,118px);
  width:min(920px,86vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,232,180,.45),transparent);
  z-index:1;
  pointer-events:none;
}
body.server-reboot-body .server-trend-hero-grid{
  gap:clamp(28px,3.4vw,48px);
}
body.server-reboot-body .server-trend-intro{
  max-width:min(1040px,100%);
}
body.server-reboot-body .server-trend-kicker{
  margin-bottom:clamp(18px,2vw,28px);
}
body.server-reboot-body .server-gw-logo{
  margin-bottom:clamp(20px,2.5vw,34px);
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(255,231,185,.14));
}
body.server-reboot-body .server-gw-hero-tags{
  margin-bottom:clamp(20px,2.4vw,32px);
  gap:10px;
}
body.server-reboot-body .server-gw-hero-tags li{
  min-height:31px;
  padding:0 15px;
  background:linear-gradient(180deg,rgba(10,8,9,.64),rgba(4,5,7,.50));
  border-color:rgba(255,226,166,.46);
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
body.server-reboot-body .server-trend-title{
  margin-bottom:clamp(16px,2vw,26px);
  max-width:900px;
  line-height:1.08;
}
body.server-reboot-body .server-trend-lead{
  margin-bottom:clamp(24px,2.7vw,38px);
  max-width:760px;
  font-size:clamp(1.06rem,1.42vw,1.28rem);
  line-height:1.72;
}
body.server-reboot-body .server-trend-trust{
  margin-bottom:clamp(20px,2.3vw,30px);
  gap:10px;
}
body.server-reboot-body .server-trend-trust span{
  min-height:38px;
  padding:0 15px;
  font-size:.82rem;
}
body.server-reboot-body .server-trend-discord-link,
body.server-reboot-body .server-trend-copy,
body.server-reboot-body .server-gw-ribbon-actions a{
  min-height:46px;
  padding-inline:24px;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
body.server-reboot-body .server-trend-discord-link:hover,
body.server-reboot-body .server-trend-copy:hover,
body.server-reboot-body .server-gw-ribbon-actions a:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 18px 34px rgba(0,0,0,.38);
}
body.server-reboot-body .server-trend-command{
  margin-top:clamp(4px,1.2vw,18px);
  gap:18px;
}
body.server-reboot-body .server-trend-ip{
  gap:12px;
}
body.server-reboot-body .server-trend-ip > strong{
  min-height:46px;
  padding-inline:20px;
  background:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.34));
  border-color:rgba(255,226,166,.42);
  box-shadow:0 12px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
body.server-reboot-body .server-trend-metrics{
  width:min(880px,100%);
  gap:10px;
}
body.server-reboot-body .server-trend-metric,
body.server-reboot-body .server-trend-metric-wide{
  padding:10px 14px;
  border-color:rgba(255,226,166,.31);
  background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.28));
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
body.server-reboot-body .server-trend-metric strong,
body.server-reboot-body .server-trend-metric-wide strong{
  font-size:.9rem;
}

body.server-reboot-body .server-gw-ribbon{
  margin-top:-34px;
  padding:clamp(62px,6vw,92px) 0 clamp(42px,4vw,58px);
  background:
    radial-gradient(circle at 28% 0%,rgba(255,255,255,.09),transparent 24%),
    radial-gradient(circle at 74% 6%,rgba(255,224,142,.10),transparent 25%),
    repeating-linear-gradient(22deg,rgba(255,255,255,.024) 0 1px,transparent 1px 16px),
    linear-gradient(180deg,color-mix(in srgb,var(--server-gw-ribbon) 72%,#070707),var(--server-gw-ribbon-dark));
  box-shadow:0 -10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14);
}
body.server-reboot-body .server-gw-ribbon::before{
  top:-30px;
  height:58px;
  opacity:.82;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--server-gw-ribbon-soft) 58%,#1e090d),color-mix(in srgb,var(--server-gw-ribbon) 80%,#070707));
  clip-path:polygon(0 54%,10% 43%,21% 54%,33% 42%,45% 51%,57% 41%,70% 53%,82% 44%,94% 52%,100% 44%,100% 100%,0 100%);
}
body.server-reboot-body .server-gw-ribbon::after{
  height:92px;
  background:linear-gradient(180deg,transparent,rgba(5,7,6,.52) 46%,#050706 92%);
}
body.server-reboot-body .server-gw-ribbon-inner{
  width:min(900px,calc(100% - 40px));
}
body.server-reboot-body .server-gw-ribbon-label{
  margin-bottom:20px;
  font-size:.88rem;
  color:#ffe9b0;
}
body.server-reboot-body .server-gw-video-frame{
  width:min(720px,100%);
  border-width:1px;
  border-color:rgba(255,224,162,.58);
  box-shadow:0 24px 58px rgba(0,0,0,.44),0 0 0 1px rgba(0,0,0,.38) inset;
}
body.server-reboot-body .server-gw-ribbon-actions{
  margin-top:20px;
}

body.server-reboot-body .server-trend-quick{
  padding:clamp(44px,4.5vw,68px) 0 clamp(42px,4vw,64px);
}
body.server-reboot-body .server-trend-quick-grid{
  gap:clamp(14px,1.8vw,22px);
}
body.server-reboot-body .server-trend-quick-card{
  position:relative;
  min-height:136px;
  padding:24px 26px 22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 6%,color-mix(in srgb,var(--server-accent) 18%,transparent),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),
    rgba(10,12,13,.82);
  border-color:rgba(255,230,180,.24);
  box-shadow:0 20px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045);
}
body.server-reboot-body .server-trend-quick-card::after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  bottom:14px;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--server-accent) 68%,#fff0bf),transparent);
  opacity:.55;
}
body.server-reboot-body .server-trend-quick-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,230,180,.52);
  box-shadow:0 26px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
body.server-reboot-body .server-trend-quick-card i{
  width:44px;
  height:44px;
  background:linear-gradient(180deg,rgba(255,224,162,.14),rgba(255,224,162,.045));
}
body.server-reboot-body .server-trend-quick-card strong{
  margin-top:12px;
  color:#fff7e1;
  font-size:1.08rem;
  letter-spacing:.015em;
}
body.server-reboot-body .server-trend-quick-card span{
  margin-top:5px;
  color:rgba(255,255,255,.78);
  font-size:.94rem;
  line-height:1.35;
}
body.server-reboot-body .server-trend-quick-card b{
  right:22px;
  bottom:22px;
  font-size:1.1rem;
}

body.server-reboot-body .server-gw-world{
  min-height:clamp(790px,94vh,1080px);
  padding-bottom:clamp(88px,8.5vw,128px);
}
body.server-reboot-body .server-gw-world-copy h2{
  margin-bottom:18px;
}
body.server-reboot-body .server-gw-world-copy p{
  font-size:clamp(1.02rem,1.28vw,1.18rem);
  line-height:1.82;
}
body.server-reboot-body .server-gw-story-card{
  padding:0 0 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(255,224,162,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.server-reboot-body .server-gw-story-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,224,162,.42);
  box-shadow:0 26px 58px rgba(0,0,0,.34);
}
body.server-reboot-body .server-gw-story-card img{
  border-width:1px;
  border-left:0;
  border-right:0;
  border-top:0;
}
body.server-reboot-body .server-gw-story-card div{
  padding:0 18px;
}
body.server-reboot-body .server-gw-story-card h3{
  font-size:clamp(1.18rem,1.55vw,1.62rem);
}
body.server-reboot-body .server-gw-story-card p{
  color:rgba(255,255,255,.80);
  font-size:.96rem;
  line-height:1.62;
}

body.server-reboot-body .server-trend-section-heading{
  margin-bottom:clamp(26px,3vw,42px);
}
body.server-reboot-body .server-trend-section-heading h2{
  font-size:clamp(2.05rem,3.2vw,3.7rem);
}
body.server-reboot-body .server-trend-section-heading p{
  font-size:clamp(1rem,1.15vw,1.12rem);
  line-height:1.65;
  color:rgba(255,255,255,.78);
}
body.server-reboot-body .server-trend-steps{
  gap:clamp(14px,1.7vw,22px);
}
body.server-reboot-body .server-trend-steps li{
  min-height:174px;
  padding:28px 20px 24px;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--server-accent) 13%,transparent),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.014)),
    rgba(10,12,13,.80);
  box-shadow:0 20px 44px rgba(0,0,0,.25);
}
body.server-reboot-body .server-trend-steps strong{
  color:#fff5d6;
  font-size:1.02rem;
}
body.server-reboot-body .server-trend-steps small{
  color:rgba(255,255,255,.76);
  font-size:.92rem;
  line-height:1.5;
}
body.server-reboot-body .server-trend-benefit{
  min-height:116px;
  padding:24px;
  background:
    radial-gradient(circle at 10% 8%,color-mix(in srgb,var(--server-accent) 12%,transparent),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014)),
    rgba(10,12,13,.80);
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}
body.server-reboot-body .server-trend-benefit strong{
  color:#fff5d6;
  font-size:1.02rem;
}
body.server-reboot-body .server-trend-benefit small{
  color:rgba(255,255,255,.76);
  font-size:.93rem;
  line-height:1.5;
}
body.server-reboot-body .server-trend-rules-callout{
  padding:19px 22px;
  border-color:rgba(255,230,180,.25);
  box-shadow:0 16px 38px rgba(0,0,0,.22);
}
body.server-reboot-body .server-trend-rules-callout p{
  color:rgba(255,255,255,.82);
  font-size:.98rem;
}
body.server-reboot-body .server-trend-gallery-meta strong{
  color:#fff5d6;
  font-size:1rem;
}
body.server-reboot-body .server-trend-gallery-meta span,
body.server-reboot-body .server-trend-gallery-meta small{
  color:rgba(255,255,255,.78);
  font-size:.88rem;
}
body.server-reboot-body .server-trend-cta-card{
  border-color:rgba(255,230,180,.26);
  box-shadow:0 30px 78px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
}

@media (max-width:1180px){
  body.server-reboot-body .server-trend-hero{
    min-height:auto;
  }
  body.server-reboot-body .server-trend-command{
    width:min(860px,100%);
  }
}
@media (max-width:860px){
  body.server-reboot-body .server-trend-hero{
    padding:104px 0 96px;
  }
  body.server-reboot-body .server-trend-metrics{
    width:min(620px,100%);
  }
  body.server-reboot-body .server-gw-ribbon{
    padding-top:70px;
  }
  body.server-reboot-body .server-trend-quick-card{
    min-height:126px;
  }
  body.server-reboot-body .server-gw-story-card div{
    padding:0 16px;
  }
}
@media (max-width:620px){
  body.server-reboot-body .server-trend-hero{
    padding:92px 0 86px;
  }
  body.server-reboot-body .server-gw-hero-tags{
    gap:7px;
  }
  body.server-reboot-body .server-gw-hero-tags li{
    padding-inline:10px;
  }
  body.server-reboot-body .server-trend-trust{
    display:grid;
    grid-template-columns:1fr;
    width:min(360px,100%);
  }
  body.server-reboot-body .server-trend-metrics{
    gap:8px;
  }
  body.server-reboot-body .server-trend-metric,
  body.server-reboot-body .server-trend-metric-wide{
    padding:10px 8px;
  }
  body.server-reboot-body .server-gw-ribbon{
    margin-top:-24px;
    padding:58px 0 42px;
  }
  body.server-reboot-body .server-gw-ribbon::before{
    top:-24px;
    height:46px;
  }
  body.server-reboot-body .server-trend-quick{
    padding-top:38px;
  }
  body.server-reboot-body .server-gw-world{
    padding-top:190px;
  }
}

/* ==========================================================
   v2.71.0 - PRAKTYCZNY REBUILD STRON SERWERÓW
   Priorytet: IP, gracze online, tryb, mapa, status.
   ========================================================== */

body.server-reboot-body{
  background:#03060b;
  color:#edf5ff;
}

.server-neo-page.server-trend-page{
  --hub-bg:#03060b;
  --hub-panel:rgba(7,13,22,.86);
  --hub-panel-strong:rgba(9,18,31,.94);
  --hub-line:rgba(255,255,255,.11);
  --hub-text:#f6f8ff;
  --hub-muted:rgba(222,234,248,.74);
  --hub-dim:rgba(222,234,248,.58);
  --hub-shadow:0 28px 90px rgba(0,0,0,.48);
  --hub-radius:22px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--server-accent) 13%, transparent), transparent 30%),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.05), transparent 28%),
    linear-gradient(180deg,#03060b 0%,#050910 44%,#020408 100%);
  color:var(--hub-text);
  overflow:hidden;
}

.server-hub-container{
  width:min(1180px, calc(100% - 44px));
  margin-inline:auto;
  position:relative;
  z-index:2;
}

.server-hub-hero{
  position:relative;
  min-height:calc(100vh - 72px);
  padding:124px 0 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}

.server-hub-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,6,11,.96) 0%,rgba(3,6,11,.86) 38%,rgba(3,6,11,.42) 67%,rgba(3,6,11,.78) 100%),
    linear-gradient(180deg,rgba(3,6,11,.20) 0%,rgba(3,6,11,.92) 100%),
    var(--server-bg) center center/cover no-repeat;
  transform:scale(1.02);
  filter:saturate(1.1) contrast(1.04) brightness(.74);
  z-index:0;
}

.server-hub-bg::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(180deg,transparent,#03060b 86%);
}

.server-hub-noise{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.28;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/90px 90px,
    linear-gradient(180deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/90px 90px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 82%);
}

.server-hub-character{
  position:absolute;
  right:clamp(-70px, 2vw, 42px);
  bottom:0;
  width:min(36vw,520px);
  max-height:78vh;
  object-fit:contain;
  object-position:right bottom;
  opacity:calc(var(--server-character-opacity, .38) + .34);
  filter:drop-shadow(0 38px 70px rgba(0,0,0,.62));
  z-index:1;
  pointer-events:none;
}

.server-hub-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(360px, .66fr);
  gap:34px;
  align-items:center;
}

.server-hub-copy,
.server-hub-live,
.server-hub-player-list-card,
.server-hub-bento-card,
.server-hub-steps li,
.server-hub-feature-list article{
  border:1px solid var(--hub-line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014)),
    linear-gradient(135deg,rgba(8,16,28,.92),rgba(3,7,13,.88));
  box-shadow:var(--hub-shadow);
  backdrop-filter:blur(16px);
}

.server-hub-copy{
  padding:34px;
  border-radius:var(--hub-radius);
  max-width:720px;
}

.server-hub-kicker-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.server-hub-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:7px 12px;
  border-radius:999px;
  color:#10151b;
  background:linear-gradient(180deg,var(--server-accent),color-mix(in srgb,var(--server-accent) 70%,#000 30%));
  font-family:var(--font-head,inherit);
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 10px 30px color-mix(in srgb,var(--server-accent) 23%,transparent);
}

.server-hub-pill i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#0cff8d;
  box-shadow:0 0 18px #0cff8d;
}

.server-hub-pill.is-offline i{background:#ff3d4f;box-shadow:0 0 18px #ff3d4f}
.server-hub-pill.is-unknown i{background:#ffcf4d;box-shadow:0 0 18px #ffcf4d}
.server-hub-pill.is-muted{color:#f5f7ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);box-shadow:none}
.server-hub-pill.is-muted i{display:none}

.server-hub-logo{
  display:block;
  width:min(var(--server-logo-width, 520px), 100%);
  max-height:180px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 12px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.52));
}

.server-hub-overline,
.server-hub-section-head p,
.server-hub-world-kicker{
  margin:0 0 10px;
  color:var(--server-accent);
  font-family:var(--font-head,inherit);
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.server-hub-copy h1{
  margin:0;
  max-width:12ch;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:clamp(42px, 5.1vw, 78px);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
}

.server-hub-lead{
  max-width:64ch;
  margin:18px 0 24px;
  color:rgba(245,249,255,.84);
  font-size:clamp(16px, 1.25vw, 19px);
  line-height:1.66;
}

.server-hub-ip-copy{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--server-accent) 35%,rgba(255,255,255,.12));
  background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(255,255,255,.035));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 18px 50px rgba(0,0,0,.34);
}

.server-hub-ip-copy span{
  padding-left:6px;
  color:var(--hub-dim);
  font-family:var(--font-head,inherit);
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.server-hub-ip-copy code{
  color:#fff;
  font:900 clamp(17px, 2vw, 27px)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.015em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.server-hub-ip-copy button,
.server-hub-bento-card button,
.server-hub-copy .server-hub-action,
.server-hub-cta-actions a,
.server-hub-cta-actions button{
  appearance:none;
  border:0;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#11151a;
  background:linear-gradient(180deg,#ffe69a,#f5c518 62%,#d69b10);
  font-family:var(--font-head,inherit);
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(245,197,24,.24);
}

.server-hub-ip-copy svg,
.server-hub-action svg,
.server-hub-live svg,
.server-hub-core-card svg,
.server-hub-card-title svg,
.server-hub-bento-card svg,
.server-hub-steps svg,
.server-hub-feature-list svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.server-hub-note{
  margin:14px 0 0;
  color:var(--hub-dim);
  font-size:14px;
  line-height:1.6;
}

.server-hub-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.server-hub-copy .server-hub-action{
  color:#f8fbff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}

.server-hub-copy .server-hub-action.is-discord{
  color:#12161d;
  background:linear-gradient(180deg,var(--server-accent),color-mix(in srgb,var(--server-accent) 70%,#000 30%));
  box-shadow:0 16px 36px color-mix(in srgb,var(--server-accent) 18%,transparent);
}

.server-hub-live{
  position:relative;
  padding:24px;
  border-radius:var(--hub-radius);
  overflow:hidden;
}

.server-hub-live::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--server-accent),transparent);
}

.server-hub-live-head span,
.server-hub-stat-main span,
.server-hub-live-grid span,
.server-hub-core-card span,
.server-hub-card-title span,
.server-hub-bento-card span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--hub-dim);
  font-family:var(--font-head,inherit);
  font-size:11px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.server-hub-live-head strong{
  display:block;
  margin-top:8px;
  color:#0cff8d;
  font-family:var(--font-head,inherit);
  font-size:38px;
  line-height:1;
  text-transform:uppercase;
}
.server-hub-live-head strong.is-offline{color:#ff5567}
.server-hub-live-head strong.is-unknown{color:#ffd35b}

.server-hub-live-head small,
.server-hub-stat-main small,
.server-hub-core-card small{
  display:block;
  margin-top:7px;
  color:var(--hub-dim);
  font-size:13px;
  line-height:1.45;
}

.server-hub-stat-main{
  margin:20px 0;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--server-accent) 16%,rgba(255,255,255,.04)),rgba(0,0,0,.32));
  border:1px solid color-mix(in srgb,var(--server-accent) 34%,rgba(255,255,255,.08));
}

.server-hub-stat-main strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:clamp(45px, 6vw, 72px);
  line-height:.9;
  letter-spacing:-.035em;
}

.server-hub-live-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.server-hub-live-grid div{
  min-width:0;
  padding:14px;
  border-radius:15px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.09);
}

.server-hub-live-grid strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:15px;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
}

.server-hub-core-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:32px;
}

.server-hub-core-card{
  position:relative;
  min-height:136px;
  padding:18px;
  border-radius:18px;
  overflow:hidden;
}

.server-hub-core-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--server-accent),transparent);
}

.server-hub-core-card i{
  width:40px;
  height:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:var(--server-accent);
  background:color-mix(in srgb,var(--server-accent) 13%,rgba(255,255,255,.04));
  margin-bottom:12px;
}

.server-hub-core-card strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:clamp(18px, 2vw, 28px);
  line-height:1.05;
  overflow:hidden;
  text-overflow:ellipsis;
}

.server-hub-players,
.server-hub-info,
.server-hub-join,
.server-hub-world,
.server-hub-trailer{
  position:relative;
  padding:72px 0;
}

.server-hub-players::before,
.server-hub-info::before,
.server-hub-join::before,
.server-hub-trailer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--server-accent) 8%,transparent),transparent 26%);
  opacity:.9;
}

.server-hub-players-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);
  gap:26px;
  align-items:start;
}

.server-hub-section-head h2{
  max-width:780px;
  margin:0;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:clamp(32px, 4vw, 58px);
  line-height:.98;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.server-hub-section-head span{
  display:block;
  margin-top:14px;
  max-width:650px;
  color:var(--hub-muted);
  font-size:16px;
  line-height:1.65;
}

.server-hub-section-head.is-centered{
  text-align:center;
}
.server-hub-section-head.is-centered h2,
.server-hub-section-head.is-centered span{
  margin-inline:auto;
}

.server-hub-player-list-card{
  padding:22px;
  border-radius:var(--hub-radius);
}

.server-hub-card-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}

.server-hub-card-title i{
  width:50px;
  height:50px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:var(--server-accent);
  background:color-mix(in srgb,var(--server-accent) 13%,rgba(255,255,255,.04));
}

.server-hub-card-title strong{
  display:block;
  margin-top:4px;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:28px;
  line-height:1;
}

.server-hub-player-list{
  display:grid;
  gap:10px;
  max-height:520px;
  overflow:auto;
  padding-right:4px;
}

.server-hub-player-list a{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:15px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.server-hub-player-list a:hover{
  transform:translateY(-2px);
  background:color-mix(in srgb,var(--server-accent) 10%,rgba(255,255,255,.06));
  border-color:color-mix(in srgb,var(--server-accent) 34%,rgba(255,255,255,.12));
}

.server-hub-player-list b{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#10151b;
  background:linear-gradient(180deg,var(--server-accent),color-mix(in srgb,var(--server-accent) 70%,#000 30%));
  font-family:var(--font-head,inherit);
  font-size:18px;
  text-transform:uppercase;
}

.server-hub-player-list span{
  min-width:0;
  display:block;
  font-family:var(--font-head,inherit);
  font-size:16px;
  line-height:1.12;
  overflow:hidden;
  text-overflow:ellipsis;
}

.server-hub-player-list small{
  display:block;
  margin-top:4px;
  color:var(--hub-dim);
  font-family:var(--font-body,inherit);
  font-size:12px;
}

.server-hub-player-list em{
  color:var(--server-accent);
  font-style:normal;
  font-family:var(--font-head,inherit);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.server-hub-empty-list{
  padding:22px;
  border-radius:18px;
  border:1px dashed color-mix(in srgb,var(--server-accent) 28%,rgba(255,255,255,.14));
  background:rgba(0,0,0,.25);
}

.server-hub-empty-list strong{
  display:block;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:21px;
}

.server-hub-empty-list p{
  margin:10px 0 14px;
  color:var(--hub-muted);
  line-height:1.62;
}

.server-hub-empty-list a{
  color:var(--server-accent);
  text-decoration:none;
  font-weight:900;
}

.server-hub-bento{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.server-hub-bento-card{
  min-height:210px;
  padding:22px;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.server-hub-bento-card.is-wide{
  grid-column:span 2;
  background:
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--server-accent) 20%,transparent),transparent 42%),
    linear-gradient(135deg,rgba(9,18,31,.95),rgba(3,7,13,.91));
}

.server-hub-bento-card i{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:var(--server-accent);
  background:color-mix(in srgb,var(--server-accent) 13%,rgba(255,255,255,.04));
  margin-bottom:14px;
}

.server-hub-bento-card strong{
  display:block;
  margin:7px 0 9px;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:clamp(20px,2vw,31px);
  line-height:1.04;
  word-break:break-word;
}

.server-hub-bento-card p{
  margin:0;
  color:var(--hub-muted);
  font-size:14px;
  line-height:1.55;
}

.server-hub-bento-card button{
  align-self:flex-start;
  margin-top:auto;
}

.server-hub-steps{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  counter-reset:step;
}

.server-hub-steps li{
  position:relative;
  min-height:210px;
  padding:22px;
  border-radius:20px;
  overflow:hidden;
}

.server-hub-steps li > b{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#10151b;
  background:var(--server-accent);
  font-family:var(--font-head,inherit);
}

.server-hub-steps li i{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:var(--server-accent);
  background:color-mix(in srgb,var(--server-accent) 13%,rgba(255,255,255,.04));
  margin-bottom:28px;
}

.server-hub-steps strong{
  display:block;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:19px;
  line-height:1.1;
  text-transform:uppercase;
}

.server-hub-steps small{
  display:block;
  margin-top:9px;
  color:var(--hub-muted);
  font-size:13px;
  line-height:1.5;
}

.server-hub-world{
  background:
    linear-gradient(180deg,#03060b 0%,rgba(3,6,11,.65) 24%,rgba(3,6,11,.72) 74%,#03060b 100%),
    var(--server-world-bg) center center/cover no-repeat;
  min-height:680px;
  display:flex;
  align-items:center;
}

.server-hub-world-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);
  gap:34px;
  align-items:center;
}

.server-hub-world h2{
  margin:0;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:clamp(38px, 4.4vw, 68px);
  line-height:.95;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.server-hub-world p:not(.server-hub-world-kicker){
  margin:16px 0 0;
  color:rgba(245,249,255,.78);
  font-size:17px;
  line-height:1.7;
}

.server-hub-feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.server-hub-feature-list article{
  min-height:166px;
  padding:20px;
  border-radius:20px;
}

.server-hub-feature-list i{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--server-accent);
  background:color-mix(in srgb,var(--server-accent) 13%,rgba(255,255,255,.04));
  margin-bottom:14px;
}

.server-hub-feature-list strong{
  display:block;
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:18px;
  line-height:1.12;
}

.server-hub-feature-list span{
  display:block;
  margin-top:8px;
  color:var(--hub-muted);
  font-size:13px;
  line-height:1.5;
}

.server-hub-trailer-grid{
  display:grid;
  grid-template-columns:minmax(0,.65fr) minmax(520px,1.35fr);
  gap:30px;
  align-items:center;
}

.server-hub-video{
  border-radius:22px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--server-accent) 28%,rgba(255,255,255,.12));
  background:#000;
  box-shadow:var(--hub-shadow);
}

.server-hub-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}

.server-trend-gallery-preview,
.server-trend-cta{
  background:#03060b;
}

.server-trend-gallery-preview .server-trend-container,
.server-trend-cta .server-trend-container{
  width:min(1180px, calc(100% - 44px));
}

.server-trend-gallery-card,
.server-trend-cta-card{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(135deg,rgba(9,18,31,.92),rgba(3,7,13,.88));
}

@media (max-width:1180px){
  .server-hub-hero-grid,
  .server-hub-players-grid,
  .server-hub-world-grid,
  .server-hub-trailer-grid{
    grid-template-columns:1fr;
  }
  .server-hub-copy{max-width:none}
  .server-hub-character{opacity:.26;width:min(58vw,520px)}
  .server-hub-core-strip,
  .server-hub-bento,
  .server-hub-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .server-hub-container{width:min(100% - 28px, 1180px)}
  .server-hub-hero{min-height:auto;padding:104px 0 34px}
  .server-hub-character{display:none}
  .server-hub-copy,.server-hub-live,.server-hub-player-list-card{padding:18px;border-radius:18px}
  .server-hub-copy h1{font-size:clamp(34px, 12vw, 52px)}
  .server-hub-lead{font-size:15px}
  .server-hub-ip-copy{grid-template-columns:1fr;align-items:stretch}
  .server-hub-ip-copy code{white-space:normal;font-size:20px}
  .server-hub-actions,.server-hub-kicker-row{display:grid;grid-template-columns:1fr}
  .server-hub-live-grid,.server-hub-core-strip,.server-hub-bento,.server-hub-steps,.server-hub-feature-list{grid-template-columns:1fr}
  .server-hub-bento-card.is-wide{grid-column:auto}
  .server-hub-players,.server-hub-info,.server-hub-join,.server-hub-world,.server-hub-trailer{padding:46px 0}
  .server-hub-world{min-height:auto}
  .server-hub-player-list a{grid-template-columns:38px minmax(0,1fr)}
  .server-hub-player-list em{display:none}
}

/* v2.72.0 - simplified server pages: two top panels, no duplicated info blocks */
.server-hub-hero{
  min-height:calc(100vh - 64px);
  padding:118px 0 76px;
}
.server-hub-hero-grid{
  grid-template-columns:minmax(0, .98fr) minmax(380px, .62fr);
  gap:34px;
  align-items:center;
}
.server-hub-copy,
.server-hub-live{
  border-radius:24px;
  border-color:color-mix(in srgb,var(--server-accent) 18%,rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 86% 0%, color-mix(in srgb,var(--server-accent) 12%,transparent), transparent 34%),
    linear-gradient(180deg,rgba(13,22,36,.94),rgba(4,8,15,.90));
}
.server-hub-copy{
  padding:38px;
  max-width:690px;
}
.server-hub-logo{
  max-height:150px;
  margin-bottom:14px;
}
.server-hub-copy h1{
  max-width:13ch;
  font-size:clamp(44px, 4.7vw, 74px);
}
.server-hub-lead{
  max-width:58ch;
  margin:18px 0 20px;
}
.server-hub-ip-copy{
  margin-top:4px;
  grid-template-columns:auto minmax(0, 1fr) auto;
  background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(255,255,255,.04));
}
.server-hub-note{
  max-width:58ch;
  color:rgba(215,227,248,.74);
}
.server-hub-actions{
  gap:12px;
}
.server-hub-copy .server-hub-action{
  min-height:46px;
  border-radius:14px;
}
.server-hub-live{
  padding:24px;
  max-width:430px;
  justify-self:start;
}
.server-hub-live-head strong{
  font-size:34px;
}
.server-hub-stat-main{
  margin:18px 0;
  padding:18px;
}
.server-hub-stat-main strong{
  font-size:clamp(42px, 4.8vw, 62px);
}
.server-hub-live-grid{
  gap:9px;
}
.server-hub-live-grid div{
  padding:12px;
}
.server-hub-live-grid strong{
  font-size:14px;
}
.server-hub-side-players{
  margin-top:14px;
  padding:14px;
  border-radius:17px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.09);
}
.server-hub-side-players-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.server-hub-side-players-head span{
  color:var(--hub-dim);
  font-family:var(--font-head,inherit);
  font-size:11px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.server-hub-side-players-head strong{
  color:#fff;
  font-family:var(--font-head,inherit);
  font-size:18px;
  line-height:1;
}
.server-hub-side-player-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.server-hub-side-player-list a{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.server-hub-side-player-list b{
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#11151a;
  background:linear-gradient(180deg,var(--server-accent),color-mix(in srgb,var(--server-accent) 70%,#000 30%));
  font-family:var(--font-head,inherit);
  font-size:12px;
  text-transform:uppercase;
}
.server-hub-side-player-list span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-head,inherit);
  font-size:12px;
}
.server-hub-side-players p{
  margin:0;
  color:rgba(215,227,248,.72);
  font-size:13px;
  line-height:1.5;
}
.server-hub-world{
  padding:86px 0;
  min-height:560px;
}
.server-hub-world-grid{
  grid-template-columns:minmax(0,.88fr) minmax(420px,.9fr);
}
.server-hub-feature-list{
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.server-hub-feature-list article{
  min-height:150px;
  border-color:color-mix(in srgb,var(--server-accent) 16%,rgba(255,255,255,.10));
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    rgba(3,7,13,.70);
  box-shadow:0 18px 52px rgba(0,0,0,.30);
}
.server-hub-trailer{
  padding:70px 0;
}
.server-hub-trailer-grid{
  grid-template-columns:minmax(0,.58fr) minmax(500px,1fr);
}
@media (max-width:1180px){
  .server-hub-hero-grid,
  .server-hub-world-grid,
  .server-hub-trailer-grid{
    grid-template-columns:1fr;
  }
  .server-hub-live{
    max-width:none;
    justify-self:stretch;
  }
}
@media (max-width:760px){
  .server-hub-hero{padding:98px 0 42px}
  .server-hub-copy,
  .server-hub-live{padding:18px;border-radius:19px}
  .server-hub-copy h1{max-width:12ch;font-size:clamp(34px, 12vw, 52px)}
  .server-hub-live-grid,
  .server-hub-side-player-list,
  .server-hub-feature-list{grid-template-columns:1fr}
  .server-hub-world{padding:52px 0;min-height:auto}
}

/* v2.72.1 - epic, conversion-focused redesign of the first hero panel */
.server-hub-copy{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb,var(--server-accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.05), transparent 28%),
    linear-gradient(180deg,rgba(11,20,34,.96),rgba(4,8,15,.92));
  border-color:color-mix(in srgb,var(--server-accent) 28%,rgba(255,255,255,.1));
  box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.server-hub-copy::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(125deg, color-mix(in srgb,var(--server-accent) 12%, transparent), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%);
  pointer-events:none;
}
.server-hub-copy::after{
  content:"";
  position:absolute;
  right:24px;
  top:24px;
  width:110px;
  height:110px;
  border-top:1px solid color-mix(in srgb,var(--server-accent) 52%, transparent);
  border-right:1px solid color-mix(in srgb,var(--server-accent) 52%, transparent);
  border-top-right-radius:26px;
  opacity:.5;
  pointer-events:none;
}
.server-hub-copy > *{position:relative;z-index:1}
.server-hub-overline{
  margin-bottom:14px;
  color:#ffd38c;
  letter-spacing:.22em;
}
.server-hub-title-epic,
.server-hub-copy .server-hub-title-epic{
  margin:0;
  max-width:none;
  display:grid;
  gap:6px;
  line-height:.94;
  text-transform:uppercase;
  text-wrap:balance;
}
.server-hub-title-epic span{display:block}
.server-hub-title-top{
  font-family:var(--font-head,inherit);
  font-size:clamp(22px, 2vw, 31px);
  font-weight:900;
  letter-spacing:.02em;
  color:rgba(245,248,255,.95);
}
.server-hub-title-main{
  font-family:var(--font-head,inherit);
  font-size:clamp(54px, 6vw, 94px);
  font-weight:950;
  letter-spacing:-.05em;
  color:color-mix(in srgb,var(--server-accent) 74%, #fff 26%);
  text-shadow:0 0 28px color-mix(in srgb,var(--server-accent) 18%, transparent), 0 18px 48px rgba(0,0,0,.46);
}
.server-hub-title-bottom{
  font-family:var(--font-head,inherit);
  font-size:clamp(28px, 2.8vw, 42px);
  font-weight:900;
  letter-spacing:-.03em;
  color:#fff;
}
.server-hub-lead{
  max-width:56ch;
  margin:20px 0 18px;
  color:rgba(239,245,255,.88);
}
.server-hub-perks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}
.server-hub-perks span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#f6f9ff;
  font-family:var(--font-head,inherit);
  font-size:12px;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.server-hub-perks svg{width:16px;height:16px;color:var(--server-accent)}
.server-hub-ip-copy{
  gap:12px;
  padding:14px;
  border-radius:20px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(255,255,255,.03)),
    radial-gradient(circle at 0% 50%, color-mix(in srgb,var(--server-accent) 16%, transparent), transparent 40%);
  border-color:color-mix(in srgb,var(--server-accent) 44%, rgba(255,255,255,.1));
}
.server-hub-ip-copy span{
  padding-left:0;
  color:#ffd38c;
  letter-spacing:.18em;
}
.server-hub-ip-copy code{
  font-size:clamp(19px, 2.05vw, 29px);
}
.server-hub-ip-copy button{
  min-width:154px;
  white-space:nowrap;
}
.server-hub-note{
  max-width:54ch;
  margin:16px 0 0;
  color:rgba(211,223,241,.78);
  font-size:14px;
}
.server-hub-actions{
  margin-top:18px;
  gap:12px;
}
.server-hub-copy .server-hub-action{
  min-height:48px;
  padding:0 18px;
  border-radius:15px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.server-hub-copy .server-hub-action.is-discord{
  background:linear-gradient(180deg,#ffd27e,#f5c518 68%,#d69914);
  color:#11151a;
}
@media (max-width: 1024px){
  .server-hub-title-main{font-size:clamp(48px, 8vw, 82px)}
  .server-hub-title-bottom{font-size:clamp(24px, 4vw, 36px)}
}
@media (max-width: 767px){
  .server-hub-copy{padding:22px}
  .server-hub-title-top{font-size:18px}
  .server-hub-title-main{font-size:clamp(40px, 13vw, 64px)}
  .server-hub-title-bottom{font-size:clamp(22px, 7vw, 32px)}
  .server-hub-perks{gap:8px}
  .server-hub-perks span{width:100%;justify-content:flex-start;padding:0 12px}
}


/* v2.72.2 - safety fix: no SVG icons inside the first hero perks, compact stable first panel */
.server-hub-copy{
  min-height:0;
  max-height:none;
  align-self:center;
}
.server-hub-copy .server-hub-perks svg{
  display:none;
  width:0;
  height:0;
  max-width:0;
  max-height:0;
}
.server-hub-perks span{
  position:relative;
  min-height:34px;
  padding:0 12px;
  gap:8px;
}
.server-hub-perks span > i{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--server-accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--server-accent) 70%, transparent);
  flex:0 0 auto;
}
.server-hub-title-main{
  font-size:clamp(48px,5.2vw,82px);
}
.server-hub-title-bottom{
  font-size:clamp(24px,2.6vw,38px);
}
.server-hub-logo{
  max-height:120px;
  margin-bottom:12px;
}
.server-hub-lead{
  margin:16px 0 16px;
}
.server-hub-ip-copy{
  margin-top:8px;
}
.server-hub-actions{
  margin-top:16px;
}
@media (min-width: 1100px){
  .server-hub-copy{padding:34px;}
  .server-hub-hero-grid{align-items:center;}
}
@media (max-width: 767px){
  .server-hub-title-main{font-size:clamp(36px,11vw,56px);}
  .server-hub-title-bottom{font-size:clamp(20px,6vw,30px);}
  .server-hub-logo{max-height:96px;}
}


/* ==========================================================
   v2.83.1 - clean server hub repairs after forced declaration removal
   Targets the real server-hub classes used by server-pages.php.
   No forced declarations.
   ========================================================== */

/* General icon normalization inside server pages. */
body.server-reboot-body .server-hub-main svg,
body.server-reboot-body .server-neo-page svg,
body.server-reboot-body .server-trend-gallery svg,
body.server-reboot-body .server-trend-cta svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Restore "Dlaczego warto grać?" / world section cards. */
body.server-reboot-body .server-hub-world {
  position: relative;
  padding: clamp(58px, 7vw, 96px) 0;
  overflow: hidden;
  background: #050a12;
}

body.server-reboot-body .server-hub-world::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,6,12,.96), rgba(2,6,12,.72) 48%, rgba(2,6,12,.88)),
    var(--server-world-bg) center / cover no-repeat;
  opacity: .82;
}

body.server-reboot-body .server-hub-world-grid {
  position: relative;
  z-index: 1;
  width: min(100% - 56px, 1160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

body.server-reboot-body .server-hub-world-kicker {
  margin: 0 0 10px;
  color: var(--server-accent);
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-world h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: clamp(34px, 5vw, 70px);
  line-height: .96;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-world h2 + p {
  max-width: 620px;
  margin: 16px 0 0;
  color: rgba(230,240,255,.82);
  font-size: 16px;
  line-height: 1.62;
}

body.server-reboot-body .server-hub-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.server-reboot-body .server-hub-feature-list article {
  position: relative;
  min-height: 154px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(8,16,28,.72);
  display: grid;
  align-content: end;
  gap: 8px;
}

body.server-reboot-body .server-hub-feature-list article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,6,12,.18), rgba(2,6,12,.86)),
    var(--feature-bg) center / cover no-repeat;
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}

body.server-reboot-body .server-hub-feature-list article > * {
  position: relative;
  z-index: 1;
}

body.server-reboot-body .server-hub-feature-list article i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: rgba(0,0,0,.34);
  color: var(--server-accent);
  border: 1px solid color-mix(in srgb, var(--server-accent) 44%, rgba(255,255,255,.12));
}

body.server-reboot-body .server-hub-feature-list article i svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

body.server-reboot-body .server-hub-feature-list article strong {
  color: #fff;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.08;
}

body.server-reboot-body .server-hub-feature-list article span {
  color: rgba(230,240,255,.78);
  font-size: 13px;
  line-height: 1.35;
}

/* Restore "Jak dołączyć?" cards; this was the section that became a plain text list. */
body.server-reboot-body .server-hub-join {
  padding: clamp(56px, 6vw, 88px) 0;
  background: #020810;
}

body.server-reboot-body .server-hub-join .server-hub-container {
  width: min(100% - 56px, 1160px);
  margin: 0 auto;
}

body.server-reboot-body .server-hub-join-head {
  margin: 0 0 28px;
  text-align: center;
}

body.server-reboot-body .server-hub-join-head p {
  margin: 0 0 8px;
  color: var(--server-accent);
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-join-head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-join-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body.server-reboot-body .server-hub-join-steps article {
  position: relative;
  min-height: 132px;
  padding: 22px 18px 20px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
}

body.server-reboot-body .server-hub-join-steps article > b {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--server-accent);
  color: #06110b;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 12px;
  line-height: 1;
}

body.server-reboot-body .server-hub-join-steps article i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--server-accent-2);
  background: rgba(255,255,255,.04);
}

body.server-reboot-body .server-hub-join-steps article i svg {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
}

body.server-reboot-body .server-hub-join-steps article strong {
  color: #fff;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 14px;
  line-height: 1.12;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-join-steps article span {
  max-width: 210px;
  color: rgba(230,240,255,.74);
  font-size: 12px;
  line-height: 1.35;
}

/* Enhanced/trailer section: make copy and bullets readable again. */
body.server-reboot-body .server-hub-trailer {
  padding: clamp(58px, 6vw, 94px) 0;
  background:
    radial-gradient(circle at 10% 45%, color-mix(in srgb, var(--server-accent) 10%, transparent), transparent 32%),
    #030912;
}

body.server-reboot-body .server-hub-trailer-grid {
  width: min(100% - 56px, 1160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

body.server-reboot-body .server-hub-section-head p {
  margin: 0 0 10px;
  color: var(--server-accent);
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-section-head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
}

body.server-reboot-body .server-hub-section-head > span {
  display: block;
  max-width: 500px;
  margin-top: 14px;
  color: rgba(230,240,255,.8);
  font-size: 15px;
  line-height: 1.58;
}

body.server-reboot-body .server-hub-trailer-points {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

body.server-reboot-body .server-hub-trailer-points span {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(240,246,255,.9);
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

body.server-reboot-body .server-hub-trailer-points svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  color: var(--server-accent);
}

body.server-reboot-body .server-hub-video iframe,
body.server-reboot-body .server-enhanced-trailer-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 0;
  border-radius: 18px;
  display: block;
}

body.server-reboot-body .server-enhanced-trailer-block {
  border: 1px solid color-mix(in srgb, var(--server-accent) 34%, rgba(255,255,255,.12));
  border-radius: 20px;
  background: rgba(5,10,18,.92);
  overflow: hidden;
}

body.server-reboot-body .server-enhanced-trailer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

body.server-reboot-body .server-enhanced-trailer-actions a {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--server-accent) 82%, #fff);
  color: #071014;
  font-family: var(--font-head, 'Orbitron', sans-serif);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}

body.server-reboot-body .server-enhanced-trailer-actions a + a {
  background: #4f6cff;
  color: #fff;
}

/* Final CTA: preserve new clean button design. */
body.server-reboot-body .server-trend-cta.server-join-redesign {
  padding: 48px 0 58px;
  background:
    radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--server-accent) 14%, transparent), transparent 34%),
    linear-gradient(180deg, #02070d 0%, #030912 100%);
}

body.server-reboot-body .server-trend-cta.server-join-redesign .server-join-redesign__wrap {
  width: min(100% - 48px, 1120px);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  gap: clamp(22px, 3.2vw, 42px);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--server-accent) 32%, rgba(255,255,255,.12));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--server-accent) 8%, rgba(5,12,22,.98)), rgba(5,10,22,.985));
  overflow: hidden;
}

body.server-reboot-body .server-join-redesign__content {
  min-width: 0;
  padding-left: 16px;
  border-left: 3px solid var(--server-accent);
}

body.server-reboot-body .server-join-redesign__content p {
  margin: 0 0 8px;
  color: var(--server-accent);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.server-reboot-body .server-join-redesign__content h2 {
  margin: 0;
  max-width: 640px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

body.server-reboot-body .server-join-redesign__content > span {
  display: block;
  margin-top: 10px;
  max-width: 620px;
  color: rgba(230,240,255,.82);
  font-size: 15px;
  line-height: 1.55;
}

body.server-reboot-body .server-join-redesign__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

body.server-reboot-body .server-join-redesign__steps li {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

body.server-reboot-body .server-join-redesign__steps li b {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--server-accent);
  color: #041006;
  font-size: 11px;
  line-height: 1;
}

body.server-reboot-body .server-join-redesign__steps li span {
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  line-height: 1;
}

body.server-reboot-body .server-join-redesign__actions {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.server-reboot-body .server-join-safe-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  font-family: var(--font-head, 'Orbitron', sans-serif);
}

body.server-reboot-body .server-join-safe-btn--copy {
  background: linear-gradient(135deg, var(--server-accent), color-mix(in srgb, var(--server-accent) 75%, #fff));
  color: #06110b;
}

body.server-reboot-body .server-join-safe-btn--discord {
  background: linear-gradient(135deg, #6d84ff, #3f63f0);
  color: #fff;
}

body.server-reboot-body .server-join-safe-btn svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
}

body.server-reboot-body .server-join-safe-btn span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.server-reboot-body .server-join-safe-btn b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}

body.server-reboot-body .server-join-safe-btn small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  opacity: .78;
}

/* Gallery and floating rails. */
body.server-reboot-body .server-trend-gallery-preview-grid {
  gap: 18px;
}

body.server-reboot-body .server-trend-gallery-meta strong {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.12;
}

body.server-reboot-body .server-trend-gallery-meta small,
body.server-reboot-body .server-trend-gallery-meta span {
  font-size: 12px;
  line-height: 1.25;
}

body.server-reboot-body .fp-social-rail svg,
body.server-reboot-body .server-social-rail svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

/* Responsive */
@media (max-width: 980px) {
  body.server-reboot-body .server-hub-world-grid,
  body.server-reboot-body .server-hub-trailer-grid,
  body.server-reboot-body .server-trend-cta.server-join-redesign .server-join-redesign__wrap {
    grid-template-columns: 1fr;
  }

  body.server-reboot-body .server-hub-join-steps,
  body.server-reboot-body .server-hub-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.server-reboot-body .server-join-redesign__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.server-reboot-body .server-hub-world-grid,
  body.server-reboot-body .server-hub-trailer-grid,
  body.server-reboot-body .server-hub-join .server-hub-container,
  body.server-reboot-body .server-trend-cta.server-join-redesign .server-join-redesign__wrap {
    width: min(100% - 28px, 1160px);
  }

  body.server-reboot-body .server-hub-join-steps,
  body.server-reboot-body .server-hub-feature-list,
  body.server-reboot-body .server-join-redesign__actions,
  body.server-reboot-body .server-join-redesign__steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.server-reboot-body .server-hub-world h2,
  body.server-reboot-body .server-hub-section-head h2 {
    font-size: clamp(30px, 11vw, 44px);
  }
}


/* ==========================================================
   v2.83.3 - server hub join section hard clean repair
   Real classes only, no forced declarations.
   ========================================================== */

body.server-reboot-body main.server-hub-main section.server-hub-join {
  display: block;
  position: relative;
  padding: clamp(54px, 6vw, 86px) 0;
  background:
    radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--server-accent) 8%, transparent), transparent 30%),
    linear-gradient(180deg, #020812 0%, #030812 100%);
  overflow: hidden;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-container {
  width: min(100% - 56px, 1160px);
  margin-left: auto;
  margin-right: auto;
  display: block;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-head {
  width: 100%;
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: center;
  display: block;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-head p {
  margin: 0 0 8px;
  color: var(--server-accent);
  font-family: var(--font-head, "Orbitron", sans-serif);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-head, "Orbitron", sans-serif);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-align: center;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article {
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  min-height: 138px;
  margin: 0;
  padding: 22px 18px 20px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--server-accent) 8%, transparent), transparent 45%);
  opacity: .8;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article > * {
  position: relative;
  z-index: 1;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article > b {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 25px;
  height: 25px;
  min-width: 25px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--server-accent);
  color: #06110b;
  font-family: var(--font-head, "Orbitron", sans-serif);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  z-index: 2;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article i {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--server-accent-2);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  font-style: normal;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article i svg {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article strong {
  display: block;
  margin: 0;
  color: #fff;
  font-family: var(--font-head, "Orbitron", sans-serif);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: .035em;
  text-transform: uppercase;
}

body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps article span {
  display: block;
  max-width: 220px;
  margin: 0;
  color: rgba(230,240,255,.76);
  font-size: 12px;
  line-height: 1.35;
}

/* Extra safety for any global SVG rule on server hub sections. */
body.server-reboot-body main.server-hub-main section.server-hub-join svg,
body.server-reboot-body main.server-hub-main section.server-hub-world svg,
body.server-reboot-body main.server-hub-main section.server-hub-trailer svg {
  display: block;
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
}

/* Keep trailer side bullets compact and readable. */
body.server-reboot-body main.server-hub-main section.server-hub-trailer .server-hub-trailer-points svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

body.server-reboot-body main.server-hub-main section.server-hub-trailer .server-hub-trailer-points span {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Keep world cards icons compact. */
body.server-reboot-body main.server-hub-main section.server-hub-world .server-hub-feature-list article i svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

/* Keep final CTA buttons readable. */
body.server-reboot-body main.server-hub-main .server-trend-cta.server-join-redesign .server-join-safe-btn svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

@media (max-width: 980px) {
  body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.server-reboot-body main.server-hub-main section.server-hub-join {
    padding: 44px 0 58px;
  }

  body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-container {
    width: min(100% - 28px, 1160px);
  }

  body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-steps {
    grid-template-columns: 1fr;
  }

  body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-head {
    text-align: left;
  }

  body.server-reboot-body main.server-hub-main section.server-hub-join .server-hub-join-head h2 {
    text-align: left;
    font-size: clamp(30px, 11vw, 44px);
  }
}


/* ==========================================================
   v2.83.4 - gallery typography unification
   Gallery headings now use the same gaming heading font as the rest of server pages.
   No forced declarations.
   ========================================================== */

body.server-reboot-body .server-trend-gallery .server-trend-section-heading,
body.server-reboot-body .server-trend-gallery-preview .server-trend-section-heading {
  text-align: center;
}

body.server-reboot-body .server-trend-gallery .server-trend-section-kicker,
body.server-reboot-body .server-trend-gallery-preview .server-trend-section-kicker {
  font-family: var(--font-head, "Orbitron", sans-serif);
  color: var(--server-accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.server-reboot-body .server-trend-gallery .server-trend-section-heading h2,
body.server-reboot-body .server-trend-gallery-preview .server-trend-section-heading h2 {
  font-family: var(--font-head, "Orbitron", sans-serif);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.055em;
  text-transform: none;
  color: #fff;
}

body.server-reboot-body .server-trend-gallery .server-trend-section-heading > p:not(.server-trend-section-kicker),
body.server-reboot-body .server-trend-gallery-preview .server-trend-section-heading > p:not(.server-trend-section-kicker) {
  font-family: var(--font-body, "Rajdhani", sans-serif);
  color: rgba(230,240,255,.78);
  font-size: 15px;
  line-height: 1.5;
}

body.server-reboot-body .server-trend-gallery-card,
body.server-reboot-body .server-trend-gallery-card strong,
body.server-reboot-body .server-trend-gallery-card span,
body.server-reboot-body .server-trend-gallery-card small,
body.server-reboot-body .gallery-tag {
  font-family: var(--font-head, "Orbitron", sans-serif);
}

body.server-reboot-body .server-trend-gallery-meta strong {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

body.server-reboot-body .server-trend-gallery-meta span,
body.server-reboot-body .server-trend-gallery-meta small {
  font-family: var(--font-body, "Rajdhani", sans-serif);
}