/*************************************************
 * REVIVE — SERVERS PAGE ONLY
 * Template: page-servers.php
 *************************************************/

body.page-template-page-servers {
  background: #000;
  color: #E6ECF5;
}

/* MAIN WRAPPER */

body.page-template-page-servers .rg-arcade--servers {
  --pix: 'Press Start 2P','VT323','Pixelify Sans',ui-monospace,Menlo,monospace;
  --ink: #E6ECF5;
  --ink-soft: #F9FAFF;
  --ink-dim: #9CA3AF;
  --bg-0: #020817;
  --bg-1: #02040a;
  --accent: #8B5CF6;
  --accent2: #22D3EE;

  position: relative;
  z-index: 1;

  /* full width with a slight gap from the viewport edges */
  margin: 10px auto 40px;
  width: calc(100% - 62px);  /* ~8px gap each side */
  max-width: 100%;
  box-sizing: border-box;
}

body.page-template-page-servers .rg-arcade--servers *,
body.page-template-page-servers .rg-arcade--servers *::before,
body.page-template-page-servers .rg-arcade--servers *::after {
  box-sizing: border-box;
}

/* BACKGROUND PLATE */

body.page-template-page-servers .rg-arcade--servers::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    radial-gradient(900px 260px at -16% -40%, rgba(139,92,246,0.14), transparent 60%),
    radial-gradient(700px 220px at 112% -36%, rgba(34,211,238,0.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), #000);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.95);
  z-index: -1;
}

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

body.page-template-page-servers .rg-servers-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 26px 22px;
  border-radius: 16px 16px 10px 10px;
  border: 1px solid rgba(139,92,246,.38);
  background:
    radial-gradient(820px 260px at -14% -40%, rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(720px 220px at 118% -32%, rgba(34,211,238,0.12), transparent 65%),
    linear-gradient(180deg, #050816, #02040a);
  box-shadow:
    0 16px 40px -24px rgba(0,0,0,0.98),
    0 1px 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}

/* Left cluster */

body.page-template-page-servers .rg-servers-hero-left {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  position: relative;
  z-index: 2;
}

body.page-template-page-servers .rg-servers-hero-avatar {
  width: 70px;
  height: 70px;
  border-radius: 1px;
  object-fit: cover;
  background: #050816;
  box-shadow: 0 5px 12px rgba(0,0,0,0.75);
}

body.page-template-page-servers .rg-servers-hero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* HERO TITLE — smaller, single line */

body.page-template-page-servers .rg-servers-hero-title {
  margin: 0;
  font-family: var(--pix);
  font-weight: 600;
  font-size: 24px !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  text-shadow:
    0 0 5px rgba(139,92,246,0.65),
    0 0 3px rgba(0,0,0,1);
}

/* HERO SLOGAN — lower + subtle motion */

body.page-template-page-servers .rg-servers-hero-sub {
  margin: 7px 0 0;
  font-family: var(--pix);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #8ab4ff;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  line-height: 1.6;
  position: relative;
  animation: none !important; /* JS handles rotation */
}

@keyframes rg-slogan-glow {
  0% {
    opacity: 0.7;
    letter-spacing: 0.16em;
    transform: translateY(0);
    text-shadow: 0 0 2px rgba(139,92,246,0.3);
  }
  100% {
    opacity: 1;
    letter-spacing: 0.20em;
    transform: translateY(1px);
    text-shadow: 0 0 6px rgba(139,92,246,0.9);
  }
}

/* Center cabinet — fixed point of truth */

body.page-template-page-servers .rg-servers-hero-center {
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

body.page-template-page-servers .rg-servers-hero-logo {
  display: block;
  width: 200px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(139,92,246,.35));
}

/* Right actions */

body.page-template-page-servers .rg-servers-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

body.page-template-page-servers .btn-coin.btn-hero {
  font-family: var(--pix);
  font-size: 0.9rem;
  padding: 0.45rem 1.7rem;
  border-radius: 999px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  background:
    radial-gradient(circle at 0 0, rgba(139,92,246,0.28), transparent 60%),
    #020816;
  border: 1px solid rgba(177,199,255,0.9);
  box-shadow:
    0 0 4px rgba(2,6,23,1),
    inset 0 0 3px rgba(15,23,42,1);
  text-decoration: none;
}
body.page-template-page-servers .btn-coin.btn-hero.ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(226,232,240,0.96);
  box-shadow:
    inset 0 -2px 0 rgba(148,163,184,0.42),
    0 2px 4px rgba(0,0,0,0.7);
}

/* ================= KPI RAIL ================= */

body.page-template-page-servers .rg-kpi-rail--servers {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin: 0px 0 1px;
  padding: 10px 18px 9px;
  border-radius: 0 0 16px 16px;
  border: 1px solid rgba(139,92,246,0.3);
  border-top: none;
  background:
    radial-gradient(600px 180px at 0% -40%, rgba(139,92,246,0.12), transparent 70%),
    radial-gradient(550px 160px at 100% -40%, rgba(34,211,238,0.09), transparent 72%),
    linear-gradient(180deg, #030712, #010208);
  box-shadow: 0 14px 32px -22px rgba(0,0,0,0.98);
}

body.page-template-page-servers .rg-kpi-rail--servers .rg-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 6px;
  border-radius: 8px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.96), #020817);
  border: 1px solid rgba(75, 85, 99, 0.9);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 1);
  min-width: 0;
}

/* bigger + clearer KPI text */

body.page-template-page-servers .rg-kpi-rail--servers .rg-kpi__label {
  font-family: var(--pix);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #c7cdd4;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

body.page-template-page-servers .rg-kpi-rail--servers .rg-kpi__value {
  margin-top: 1px;
  font-family: var(--pix);
  font-size: 12px;
  font-weight: 700;
  color: #f9fafb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  body.page-template-page-servers .rg-kpi-rail--servers {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 640px) {
  body.page-template-page-servers .rg-kpi-rail--servers {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* ================= NEWS TICKER ================= */

body.page-template-page-servers .rg-news-ticker {
  margin: 6px 26px 0 !important; /* match hero side padding */
  padding: 6px 0 7px;
  border-radius: 9px;
  border: 1px solid rgba(148,163,253,0.35);
  background:
    radial-gradient(circle at 0 0, rgba(139,92,246,0.16), transparent 70%) #020817;
  overflow: hidden;
  font-family: var(--pix);
  font-size: 10px;
  color: #e5e7eb;
  white-space: nowrap;
}

body.page-template-page-servers .rg-news-label {
  display: none !important;
}

/* Track: JS drives motion, no CSS animation */
body.page-template-page-servers .rg-news-inner {
  overflow: hidden;
  border-radius: inherit;
}

body.page-template-page-servers .rg-news-track {
  display: inline-flex;
  will-change: transform;
  padding-left: 24px;
  padding-right: 24px;
  animation: none !important;
}

body.page-template-page-servers .rg-news-track span {
  margin-right: 28px;
}

body.page-template-page-servers .rg-news-track span::after {
  content: "•";
  margin-left: 10px;
  color: #64748b;
}
body.page-template-page-servers .rg-news-track span:last-child::after {
  content: "";
  margin: 0;
}

/* Ticker emoji caps (DESKTOP ONLY – hidden on mobile via media query) */
body.page-template-page-servers .rg-news-ticker {
  position: relative;
  overflow: visible;
}

body.page-template-page-servers .rg-news-ticker::before,
body.page-template-page-servers .rg-news-ticker::after {
  content: '📰';
  position: absolute;
  top: 37%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 6px #ff0088;
  pointer-events: none;
}

body.page-template-page-servers .rg-news-ticker::before {
  left: -28px;
}

body.page-template-page-servers .rg-news-ticker::after {
  right: -28px;
}

/* ================= SERVER LIST ================= */

body.page-template-page-servers .rg-servers-list {
  margin-top: 6px;
}

/* if any heading snuck in, hide it */
body.page-template-page-servers .rg-servers-heading {
  display: none !important;
}

/* SERVER LIST — ALWAYS STACKED, DESKTOP + MOBILE */
body.page-template-page-servers .rg-server-list {
  list-style: none;
  margin: 0;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Slightly wider spacing on very large screens */
@media (min-width: 1600px) {
  body.page-template-page-servers .rg-server-list {
    gap: 14px;
  }
}

/* SERVER CARD */

body.page-template-page-servers .rg-server-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 14px;
  background: #020817;
  border: 1px solid rgba(75, 85, 99, 0.9);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 1);
  transition:
    transform 0.14s ease-out,
    box-shadow 0.14s ease-out,
    border-color 0.14s ease-out,
    background 0.14s ease-out;
  height: 100%;
  box-sizing: border-box;
}


@media (hover: hover) and (pointer: fine) {
  body.page-template-page-servers .rg-server-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139,92,246,0.9);
    background: radial-gradient(circle at 0 0, rgba(139,92,246,0.16), transparent 55%) #020814;
    box-shadow:
      0 16px 30px -18px rgba(0,0,0,1),
      0 0 10px rgba(139,92,246,0.36);
  }
}

/* Left side content */

body.page-template-page-servers .rg-server-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.page-template-page-servers .rg-server-name {
  font-family: var(--pix);
  font-size: 20px;
  letter-spacing: 0.04em;
  word-spacing: -0.5em;
  text-transform: none;
  color: #f9fafb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


body.page-template-page-servers .rg-server-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: 2px;
}

/* BIGGER server description + IP */

body.page-template-page-servers .rg-server-subtitle {
  padding: 4px 0px;
  font-size: 20px;
  font-weight: 600;
  color: #c7cdd4;
  line-height: 1.3;
}

body.page-template-page-servers .rg-server-address {
  font-size: 16px;
  font-weight: 900;
  color: #60a5fa;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Right side stats */

body.page-template-page-servers .rg-server-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  min-width: 120px;
}

body.page-template-page-servers .stat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 110px;
  padding: 3px 9px 3px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(139,92,246,0.28), transparent 60%),
    #020816;
  border: 1px solid rgba(177,199,255,0.9);
  box-shadow:
    0 0 4px rgba(2,6,23,1),
    inset 0 0 3px rgba(15,23,42,1);
  font-family: var(--pix);
  font-size: 8px;
  color: #E5E7EB;
  white-space: nowrap;
}

body.page-template-page-servers .stat-label {
  padding: 2.4px 1px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #c7cdd4;
  line-height: 1.4;
}

body.page-template-page-servers .stat-value {
  padding: 2.4px;
  font-size: 10px;
  color: #e6e6e6;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* JOIN BUTTON */

body.page-template-page-servers .rg-server-join {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 7px 7px;
  border-radius: 999px;
  font-family: var(--pix);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(148, 163, 253, 0.9);
  background:
    radial-gradient(circle at 0 0, rgba(139, 92, 246, 0.35), transparent 60%),
    #020816;
  color: #00ff22;
  box-shadow:
    0 0 4px rgba(15, 23, 42, 1),
    inset 0 0 2px rgba(30, 64, 175, 0.9);
}

body.page-template-page-servers .rg-server-join:hover {
  border-color: rgba(129, 140, 248, 1);
  transform: translateY(-1px);
}

body.page-template-page-servers .rg-server-join--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ====== STATUS / PLAYERS COLORS ====== */

/* Non-MC: STATUS text colors */
body.page-template-page-servers .stat-value.rg-status--offline {
  color: #f87171;
}
body.page-template-page-servers .stat-value.rg-status--idle {
  color: #facc15;
}
body.page-template-page-servers .stat-value.rg-status--active {
  color: #4ade80;
}

/* MC: PLAYERS fill colors */
body.page-template-page-servers .stat-value.rg-players--empty {
  color: #ffffff;
}
body.page-template-page-servers .stat-value.rg-players--mid {
  color: #facc15;
}
body.page-template-page-servers .stat-value.rg-players--high {
  color: #ef4444;
}

/* Players % colouring (0%, 50%, 90%+) */
body.page-template-page-servers .rg-pstat-neutral {
  color: #e5e7eb;
}

body.page-template-page-servers .rg-pstat-warm {
  color: #facc15;
}

body.page-template-page-servers .rg-pstat-hot {
  color: #f97373;
}

/* Status colours: Offline (red), Idle (yellow), Active (green) */
body.page-template-page-servers .rg-status-offline {
  color: #f97373;
}

body.page-template-page-servers .rg-status-idle {
  color: #facc15;
}

body.page-template-page-servers .rg-status-active {
  color: #4ade80;
}

/* Smaller variant of the join-style button (for "Show players") */
body.page-template-page-servers .rg-server-join--sm {
  padding: 4px 8px;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: #c7cdd4;
  min-width: auto;
}

/* Ensure the whole button area feels clickable; avoid cursor flicker on edges */
body.page-template-page-servers .rg-server-join,
body.page-template-page-servers .rg-server-join.rg-server-join--sm,
body.page-template-page-servers .rg-players-toggle {
  cursor: pointer;
}

/* Disabled join buttons should not look clickable */
body.page-template-page-servers .rg-server-join--disabled {
  cursor: default;
}

/* Stop hover "lift" causing cursor jitter on button edges */
body.page-template-page-servers .rg-server-join:hover,
body.page-template-page-servers .rg-server-join.rg-server-join--sm:hover {
  border-color: rgba(129, 140, 248, 1);
  transform: none;
}

/* =========================================
 * Reusable RGB hover border (ring only)
 * ========================================= */

body.page-template-page-servers .rg-rgb-border {
  position: relative;
  z-index: 0;
}

/* outer RGB ring */
body.page-template-page-servers .rg-rgb-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #ff0080,
    #fffb00,
    #00f0ff,
    #8b5cf6,
    #ff0080
  );
  background-size: 400% 400%;
  animation: rg-rgb-ring-move 3s linear infinite;
  opacity: 0;
  pointer-events: none;
  z-index: -2;
  transition: opacity 0.18s ease-out;
}

/* inner mask: keeps your existing button fill */
body.page-template-page-servers .rg-rgb-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

/* animate ring on hover */
body.page-template-page-servers .rg-rgb-border:hover::before {
  opacity: 1;
  animation: rg-rgb-ring-move 15.4s linear infinite;
}

@keyframes rg-rgb-ring-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

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

/* Tablets / small desktops */
@media (max-width: 900px) {
  body.page-template-page-servers .rg-servers-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-template-page-servers .rg-servers-hero-actions {
    margin-top: 6px;
    align-self: flex-end;
  }

  body.page-template-page-servers .rg-servers-hero-center {
    top: 30%;
  }

  body.page-template-page-servers .rg-server-card {
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-template-page-servers .rg-server-stats {
    flex-direction: row;
    align-items: center;
    margin-top: 4px;
  }
}

/* General mobile tweaks (<= 768px) */
@media (max-width: 768px) {
  body.page-template-page-servers {
    font-size: 14px;
  }

  body.page-template-page-servers .rg-cabinet {
    padding: 1.1rem 1rem;
  }

  /* Slight hero shrink */
  body.page-template-page-servers .rg-servers-hero {
    padding-top: 0.5em;
    padding-bottom: 2em;
  }

  body.page-template-page-servers .rg-servers-hero-logo {
    width: 160px;
    max-height: 100px;
  }

  body.page-template-page-servers .rg-servers-hero-title {
    font-size: 12px !important;
    line-height: 1.1;
    margin-bottom: 0.35rem;
  }

  body.page-template-page-servers .rg-servers-hero-sub {
    font-size: 12px;
    letter-spacing: 0.7em;
  }

  /* Server card tightening */
  body.page-template-page-servers .rg-server-card {
    padding: 1rem 1rem 1.15rem;
  }

  body.page-template-page-servers .rg-server-name {
    font-size: 18px;
  }

  body.page-template-page-servers .rg-server-subtitle {
    font-size: 16px;
  }

  body.page-template-page-servers .rg-server-address {
    font-size: 14px;
  }
}

/* Phones / narrow (<= 640px) */
@media (max-width: 640px) {

  /* overall shell */
  body.page-template-page-servers .rg-arcade--servers {
    margin: 14px auto 28px;
    width: calc(100% - 16px);
  }

  /* HERO LAYOUT:
   * - stack vertically
   * - logo above title
   * - hide avatar
   * - slogan single line
   */
  body.page-template-page-servers .rg-servers-hero {
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 5px;
    text-align: center;
  }

  /* order children: logo (center), then text (left), then actions */
  body.page-template-page-servers .rg-servers-hero-center {
    position: static;
    transform: none;
    margin: 0px auto 0px;
    order: -2;
    pointer-events: none;
  }

  body.page-template-page-servers .rg-servers-hero-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    order: -1;
  }

  /* hide avatar */
  body.page-template-page-servers .rg-servers-hero-avatar {
    display: none !important;
  }

  body.page-template-page-servers .rg-servers-hero-logo {
    width: 120px;
    max-height: 80px;
  }

  body.page-template-page-servers .rg-servers-hero-title {
    font-size: 16px !important;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* slogan: ONE LINE only */
  body.page-template-page-servers .rg-servers-hero-sub {
    font-size: 7px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
  }

  body.page-template-page-servers .rg-servers-hero-actions {
    align-self: stretch;
    justify-content: center;
    margin-top: 8px;
    gap: 8px;
    order: 10;
  }

  body.page-template-page-servers .btn-coin.btn-hero {
    font-size: 0.7rem;
    padding: 0.3rem 1.1rem;
    letter-spacing: 0.12em;
  }

  /* KPI rail tighter + smaller text */
  body.page-template-page-servers .rg-kpi-rail--servers {
    margin: 4px 10px 6px;
    padding: 8px 10px 8px;
  }

  body.page-template-page-servers .rg-kpi-rail--servers .rg-kpi {
    padding: 5px 5px;
  }

  body.page-template-page-servers .rg-kpi-rail--servers .rg-kpi__label {
    font-size: 9px;
    letter-spacing: 0.09em;
  }

  body.page-template-page-servers .rg-kpi-rail--servers .rg-kpi__value {
    font-size: 11px;
  }

  /* TICKER – smaller, no emoji caps */
  body.page-template-page-servers .rg-news-ticker {
    margin: 1px 10px 0px !important;
    padding: 4px 0 5px;
    font-size: 6px;
    overflow: hidden;
  }

  body.page-template-page-servers .rg-news-ticker::before,
  body.page-template-page-servers .rg-news-ticker::after {
    display: none !important;
    content: "";
  }

  body.page-template-page-servers .rg-news-track {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* server list spacing (still stacked; just tighter) */
  body.page-template-page-servers .rg-server-list {
    padding: 0 8px 5px;
    gap: 6px;
  }

  body.page-template-page-servers .rg-server-card {
    padding: 14px 14px;
  }

  body.page-template-page-servers .rg-server-name {
    font-size: 17px;
  }

  body.page-template-page-servers .rg-server-subtitle {
    font-size: 15px;
  }

  body.page-template-page-servers .rg-server-address {
    font-size: 13px;
  }

  /* stack stats / buttons full-width */
  body.page-template-page-servers .rg-server-stats {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  body.page-template-page-servers .stat-pill {
    width: 100%;
    min-width: 0;
  }

  body.page-template-page-servers .rg-server-join,
  body.page-template-page-servers .rg-server-join.rg-server-join--sm,
  body.page-template-page-servers .rg-players-toggle {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

@media (max-width: 640px) {
  /* Smaller hero buttons on mobile (servers page only) */
  body.page-template-page-servers .btn-coin.btn-hero {
    font-size: 0.6rem;        /* was ~0.7–0.9rem */
    padding: 0.22rem 0.7rem;  /* less height + narrower */
    letter-spacing: 0.08em;   /* a bit tighter so text fits */
  }
}

@media (max-width: 640px) {
  body.page-template-page-servers .rg-arcade--servers {
    margin-top: 1px;   /* or 0 if you want it jammed to the top of the page */
  }

  body.page-template-page-servers .rg-servers-hero {
    padding-top: 0;    /* <<< remove the extra gap */
    padding-bottom: 1px;
  }

  body.page-template-page-servers .rg-servers-hero-logo {
    margin-top: 0;
    margin-bottom: 1px;
  }
}

@media (max-width: 640px) {
  /* Tighten logo to top of hero on mobile */
  body.page-template-page-servers .rg-servers-hero-center {
    padding: 0;          /* removes the extra 10px */
    margin-top: 0;
  }

  body.page-template-page-servers .rg-servers-hero-logo {
    margin-top: 0;
  }
}


/* =========================================
 * STARFIELD + METEORS LAYERS (SERVERS PAGE)
 * ========================================= */

body.page-template-page-servers #sparkle-canvas,
body.page-template-page-servers #meteor-canvas {
  position: fixed;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;  /* don’t block clicks */
}

/* Stars: behind all page content */
body.page-template-page-servers #sparkle-canvas {
  z-index: 0;
}

/* Meteors: on top of everything */
body.page-template-page-servers #meteor-canvas {
  z-index: 9999;
}

/* =========================================
 * Desktop responsive helpers
 * ========================================= */

/* GLOBAL RESPONSIVE TEXT (<= 1200px) */
@media (max-width: 1200px) {
  body.page-template-page-servers .rg-servers-hero-title,
  body.page-template-page-servers .rg-servers-hero-sub,
  body.page-template-page-servers .rg-server-name,
  body.page-template-page-servers .rg-server-subtitle,
  body.page-template-page-servers .rg-server-address {
    white-space: normal;
  }

  /* Slightly tighter padding so content breathes when resized */
  body.page-template-page-servers .rg-servers-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.page-template-page-servers .rg-server-card {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* MID-WIDTH (TABLETS / SMALL DESKTOPS) */
@media (max-width: 992px) {
  /* Let hero behave like a flex row that can wrap */
  body.page-template-page-servers .rg-servers-hero {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Logo stops being hard-centered and joins the flow */
  body.page-template-page-servers .rg-servers-hero-center {
    position: static;
    transform: none;
    margin: 0 auto 6px;
    padding: 0;
  }

  body.page-template-page-servers .rg-servers-hero-left {
    max-width: 100%;
  }

  /* Cards become vertical at these sizes so they don't feel cramped */
  body.page-template-page-servers .rg-server-card {
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-template-page-servers .rg-server-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
  }
}

/* FULL-WIDTH WRAPPERS FOR SERVERS TEMPLATE ONLY */
body.page-template-page-servers #page,
body.page-template-page-servers .site,
body.page-template-page-servers .site-main,
body.page-template-page-servers .content-area,
body.page-template-page-servers .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}