/* ==========================================================================
   FONTS & ROOT TOKENS
   ========================================================================== */
/* Roboto — matches the Ember store (vip.projectgaming.gg) typography so the
   shared navbar reads identically. Served from our own domain
   (assets/vendor/roboto) instead of Google Fonts: no extra DNS lookups, no
   render-blocking @import chain, and our long cache headers apply. Each
   language subset is its own file, so browsers only fetch what a page uses. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-cyrillic-ext-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-cyrillic-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-greek-ext-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-greek-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-vietnamese-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-latin-ext-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../vendor/roboto/roboto-latin-300-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-300-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-cyrillic-ext-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-cyrillic-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-greek-ext-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-greek-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-vietnamese-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-latin-ext-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../vendor/roboto/roboto-latin-400-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-cyrillic-ext-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-cyrillic-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-greek-ext-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-greek-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-vietnamese-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-latin-ext-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../vendor/roboto/roboto-latin-500-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-500-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-cyrillic-ext-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-cyrillic-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-greek-ext-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-greek-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-vietnamese-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-latin-ext-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../vendor/roboto/roboto-latin-700-normal.woff2') format('woff2'), url('../vendor/roboto/roboto-all-700-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --raise-scale: 1.01;
  --raise-translate: -2px;
  --raise-shadow: 0 16px 34px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
}

/* ==========================================================================
   BASE: BODY & GLOBAL
   ========================================================================== */
body {
  position: relative;
  min-height: 100vh;
  /* Dark page color behind the dimmed background image — matches Ember's
     --theme-bg-page (#222) so the overall tone reads the same. */
  background: #222222;
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* Base background. NOTE: the authoritative background treatment lives in the
   "Background — matched to the Ember store" block further down (it overrides
   these with the dimmed image + dark overlay). This base rule is the
   fallback before that block applies. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* Exact Ember backdrop replica — see the authoritative rule lower in this
     file. The two overlay gradients on top of the image, all at opacity:0.5. */
  background:
    linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%),
    radial-gradient(transparent, rgba(0,0,0,0.5) 100%),
    url(../img/abackground.webp) no-repeat center center fixed;
  background-size: cover;
  opacity: 0.5;
}

a, button { text-decoration: none !important; }

/* ==========================================================================
   TOP BANNERS / NAV
   ========================================================================== */
.nav-before {
  background: #000000d9;
  padding: 23px;
  border-top-style: solid;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-width: 6px;
  border-color: #000000;
}

.nav-before img { transition: transform 0.3s ease; }
.nav-before img:hover { 
  transform: scale(1.05); 
  transform: translateY(-2px) scale(1.03);
  filter:
    drop-shadow(0 0 18px rgba(147, 89, 255, 0.9))
    drop-shadow(0 0 44px rgba(0, 0, 0, 1));
}

.navbar {
  background: #000000d9 !important;
  border-top: 1px solid #08080854;
  padding: 0;
  text-align: center;
  border-top-style: solid;
  border-right-style: none;
  border-bottom-style: solid;
  border-left-style: none;
  border-width: 6px;
  border-color: #000000;
  text-shadow: 4px 4px 4px #000000;
}

nav .container { padding: 0; text-align: center; }
.navbar-toggler { border: none; text-align: center; }
.navbar-toggler:focus { outline: none; text-align: center; }

nav.navbar .mr-auto a {
  font-weight: 800;
  font-size: 1.95em;
  color: white !important;
  border-bottom: 4px solid transparent;
  text-align: center;
}

/* single, de-duplicated hover effect */
nav.navbar .mr-auto a:hover {
  background: #ffffff;
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  text-shadow: 0px 2px 24px white;
  border-color: #5900ff;
  text-align: center;
}

@keyframes textclip {
  to { background-position: 200% center; }
}

.discordwidget { padding: 2em; float: right; }

.navbar-nav a { padding: 20px !important; }
.navbar-nav.ml-auto a { font-weight: bold; color: white !important; }
.navbar-nav.ml-auto a span { color: #5DD46B; }

/* ==========================================================================
   SECTIONS: HEADERS / PADDING
   ========================================================================== */
.section { padding-top: 2em; padding-bottom: 2em; }
.sectionz { padding-top: 1em; padding-bottom: 1em; }

.section .title h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.9em;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* Cleaner soft shadow instead of the hard 4px offset (store look) */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.section .title p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.25em;
  text-shadow: none;
}

/* ==========================================================================
   GAME SERVERS GRID (epic remaster)
   ========================================================================== */

.game-servers .col-md-3 {
  margin-bottom: 1.25em;
}

/* core card */
.game-servers .card {
  position: relative;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: rgba(0, 0, 0, 0.7) !important; /* dark overlay */
  background-blend-mode: multiply;                  /* blend image + overlay */

  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  overflow: hidden;

  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.9);

  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    filter 0.18s ease-out;
}


/* edge glow + vignette */
.game-servers .card::before,
.game-servers .card::after {
  content: '';
  position: absolute;
  inset: -1px;              /* extend overlay slightly past the border */
  border-radius: inherit;
  pointer-events: none;
}

/* purple brand glow in the top-left */
.game-servers .card::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(147, 89, 255, 0.5) 0, transparent 55%);
  opacity: 0.35;
  mix-blend-mode: screen;
}

/* hover: lift + brighter */
.game-servers .card:hover,
.game-servers .card:focus-within {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(147, 89, 255, 0.9);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.96),
    0 0 24px rgba(147, 89, 255, 0.55);
  filter: saturate(1.1);
}

/* inner overlay */
.game-servers .card .inner {
  position: relative;
  z-index: 1;

  border-radius: inherit;
  padding: 0.9em 1.1em;
  background: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  min-height: 210px;

  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.18s ease-out, background 0.18s ease-out;
}

.game-servers .card:hover .inner,
.game-servers .card:focus-within .inner {
  box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.85);
  background: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.72));
}

/* server icon */
.game-servers .card .inner img {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.4em auto;
  border-radius: 14px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.95));
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}

.game-servers .card:hover .inner img,
.game-servers .card:focus-within .inner img {
  transform: translateY(-1px) scale(1.05);
  filter:
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.35));
}

/* host + map block */
.game-servers .card .inner .hostmap {
  text-shadow: 4px 4px 4px #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

/* generic text */
.game-servers .card .inner p {
  border-radius: 0;
  color: #f2f2f2;
  font-weight: 800;
  padding: 0;
  margin: 0;
  line-height: 1.05;
}

/* server title */
.game-servers .card .inner .hostmap p.morein2,
.game-servers .card .inner p.morein2 {
  font-size: 1.3em;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  text-shadow: 4px 4px 8px #000000;
}

/* map name / "Server Offline" */
.game-servers .card .inner .hostmap p.morein,
.game-servers .card .inner p.morein {
  font-size: 0.9em;
  font-weight: 700;
  color: #f8f8f8;
  opacity: 0.95;
}

/* player count (legacy – safe to keep even if unused) */
.game-servers .card .inner p.morein3,
.game-servers .card .inner .hostmap p.morein3 {
  font-size: 1.05em;
  font-weight: 900;
  color: #ffffff;
}

/* top meta row: status left, players right */
.game-servers .server-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.1em;
  margin-bottom: 0.35em;
}

/* online / offline status */
.game-servers .server-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95em;           /* was 0.8em */
  font-weight: 700;
  text-shadow: 3px 3px 4px #000;
}

.game-servers .server-status .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

/* green online */
.game-servers .server-status-online .status-dot {
  background: #3ad35c;
  box-shadow: 0 0 10px rgba(58, 211, 92, 0.95);
}

.game-servers .server-status-online .status-label {
  color: #a6ffb7;
}

/* red offline */
.game-servers .server-status-offline .status-dot {
  background: #ff3b3b;
  box-shadow: 0 0 10px rgba(255, 59, 59, 0.95);
}

.game-servers .server-status-offline .status-label {
  color: #ffb1b1;
}

/* players (top-left) */
.game-servers .server-players {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95em;          /* was 0.8em */
  font-weight: 800;
  color: #ffffff;
  text-shadow: 3px 3px 4px #000;
}

.game-servers .server-players i {
  font-size: 0.95em;
  opacity: 0.9;
}

.game-servers .server-players .players-count {
  white-space: nowrap;
}


/* action buttons (connect + BM + store): IP on its own row, then
   BattleMetrics + Store side by side, so every card lays out the same
   regardless of address length. */
.game-servers .server-actions {
  margin-top: 0.8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.game-servers .server-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.game-servers .server-actions-group {
  display: inline-flex;
  justify-content: center;
  gap: 8px;
}
.game-servers a.bm-link-btn {
  text-decoration: none;
}

/* shared pill style for both buttons */
.game-servers .server-connect-btn,
.game-servers .bm-link-btn {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 0.22rem 0.9rem;
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  transition: 0.18s ease-out all;
}

.game-servers .server-connect-btn i,
.game-servers .bm-link-btn i {
  font-size: 1em;
}

/* hover states */
.game-servers .server-connect-btn:hover,
.game-servers .bm-link-btn:hover {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.95);
  transform: translateY(-1px);
}

/* Store CTA button — same pill shape, brand purple so it stands out as the
   "buy/store" action linking to vip.projectgaming.gg/store/packages/{id}. */
.game-servers .server-store-btn {
  border-radius: 999px;
  border: 1px solid rgba(147, 89, 255, 0.9);
  background: linear-gradient(135deg, #5d00ff, #9359ff);
  color: #ffffff;
  padding: 0.22rem 0.9rem;
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(93, 0, 255, 0.5);
  transition: 0.18s ease-out all;
}
.game-servers .server-store-btn i {
  font-size: 1em;
}
.game-servers .server-store-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(93, 0, 255, 0.7);
  transform: translateY(-1px);
  color: #ffffff;
}

/* keep BM icon dark on hover */
.game-servers .bm-link-btn:hover i {
  color: #000000;
}

/* optional legacy bits kept so nothing breaks */
.game-servers .card .description {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(125, 125, 125, 0.9);
  padding: 0.5em;
  border-radius: 15px;
  margin-top: 1em;
}

.game-servers .card .progress {
  border-radius: 0;
  padding: 0;
  margin: 0;
  height: 2em;
}

/* responsiveness */
@media (max-width: 992px) {
  .game-servers .card .inner {
    min-height: 190px;
    padding: 0.8em 0.9em;
  }
}

@media (max-width: 768px) {
  .game-servers .card {
    border-radius: 22px;
  }

  .game-servers .card .inner {
    min-height: 180px;
  }

  .game-servers .card .inner .hostmap p.morein2 {
    font-size: 1.2em;
  }
}

/* IP:PORT text inside the copy button */
.game-servers .server-connect-btn .ip-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8em;
  text-transform: none;         /* override uppercase */
  letter-spacing: 0.04em;
}

/* copied state (brief success flash) */
.game-servers .server-connect-btn.copied {
  background: #3ad35c;
  color: #000000;
  border-color: #3ad35c;
}

.game-servers .server-connect-btn.copied i {
  color: #000000;
}









/* ==========================================================================
   FEATURES CARDS (compact + epic)
   ========================================================================== */
.section.features {
  padding-top: 3rem;
  padding-bottom: 0.25rem;
}

.features-heading {
  margin-bottom: 1.5rem; /* tweak 2rem–3rem to taste */
}

.features-heading h2 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
  text-shadow: 4px 4px 8px #000;
}

.features-heading p {
  max-width: 560px;
  margin: 0.5rem auto 0;
}

/* Grid spacing */
.features .col-md-4 {
  margin-bottom: 0.3rem;
}

/* Core card */
.feature-card {
  position: relative;
  border-radius: 18px;
  padding: 1.4rem 1.3rem;
  background:
    radial-gradient(circle at top left, rgba(147, 89, 255, 0.25), transparent 55%),
    rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

/* Desktop: keep them low profile */
@media (min-width: 992px) {
  .feature-card {
    min-height: 0;
  }
}

/* Header: icon + title row */
.feature-card-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Icon wrapper */
.feature-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.75);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 18px rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure icons themselves stay nice and sharp */
.section.features .feature-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* If you're using <i> font icons instead of <img> */
.section.features .feature-icon i {
  font-size: 1.8rem;
  text-shadow: 0 0 12px #000;
}

/* Title block */
.feature-title-block h3 {
  font-size: 1.05rem;
  margin: 0.05rem 0 0;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 3px 3px 6px #000;
}

/* Small neon pill above title */
.feature-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(147, 89, 255, 0.55);
  color: #bca7ff;
}

/* Description text */
.feature-desc {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: #f0f0f0;
  text-shadow: 2px 2px 4px #000000;
}

/* Hover / focus state – subtle lift + glow */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.18s ease-out, opacity 0.18s ease-out;
  opacity: 0;
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(147, 89, 255, 0.45);
  border-color: rgba(127, 91, 255, 0.9);
  background:
    radial-gradient(circle at top left, rgba(147, 89, 255, 0.4), transparent 55%),
    rgba(0, 0, 0, 0.95);
}

.feature-card:hover::before,
.feature-card:focus-within::before {
  border-color: rgba(255, 255, 255, 0.16);
  opacity: 1;
}

/* Slight zoom on the icon on hover */
.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon {
  transform: translateY(-1px);
  transition: transform 0.18s ease-out;
}

/* Keep legacy icon styles from breaking anything else in the site */
.section.features .icon img:hover {
  transform: scale(1.03);
  transition: transform 0.18s ease-out;
}


/* ==========================================================================
   MANAGEMENT CARDS + STATUS ROWS (remaster)
   ========================================================================== */

.management .col-md-3 {
  margin-bottom: 1.25em;
}

/* core card */
.management .card {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.4em 1.3em;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.96) 0, rgba(0, 0, 0, 0.86) 55%, rgba(0, 0, 0, 0.97) 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.9);
  overflow: hidden;

  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

/* subtle rank-colored glow */
.management .card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, var(--accent, #ff3b6f) 0, transparent 60%);
  opacity: 0.22;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.18s ease-out;
}

/* keep media layout but tighten spacing */
.management .card .media {
  align-items: center;
  gap: 1rem;
}

/* avatar */
.management .card img {
  width: 4.6em;
  height: 4.6em;
  border-radius: 10px;
  object-fit: cover;
  outline: 2px solid #000;
  box-shadow:
    0 0 0 2px var(--accent, #ff3b6f),
    0 0 16px var(--accent, #ff3b6f),
    0 0 22px rgba(0, 0, 0, 0.9);
  background: #000;
  transition: transform 0.18s ease-out;
}

/* text column */
.management .card .media-body {
  padding: 0.3em 0;
}

/* name + rank */
.management .card h5 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.1em;
  text-shadow: 3px 3px 6px #000;
}

.management .card h5 span {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--accent, #ff3b6f);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65em !important;
  letter-spacing: 0.12em;
}

/* Steam status pill row */
.management .mgmt-steam-status {
  margin-top: 0.25em;
  font-size: 0.8em;
  color: #dcdcdc;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 2px 2px 3px #000;
}

.management .mgmt-steam-status .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #777;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  flex-shrink: 0;
}

/* keep original classes for php helper */
.management .mgmt-steam-status .status-online,
.management .mgmt-steam-status .status-playing {
  background: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.9);
}

.management .mgmt-steam-status .status-offline {
  background: #888;
  box-shadow: none;
}

.management .mgmt-steam-status .status-snooze,
.management .mgmt-steam-status .status-away {
  background: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.9);
}

.management .mgmt-steam-status .status-ingame {
  background: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.9);
}

.management .mgmt-steam-status .status-text {
  font-weight: 600;
}

.management .mgmt-steam-status .status-game {
  margin-left: 0.25em;
  font-weight: 700;
  color: #ffffff;
}

/* Discord row */
.management .mgmt-discord-row {
  margin-top: 0.45em;
  font-size: 0.8em;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  text-shadow: 2px 2px 3px #000;
}

.management .mgmt-discord-row .discord-label {
  font-weight: 600;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 4px;
}

.management .mgmt-discord-row .discord-label i {
  font-size: 1em;
}

.management .mgmt-discord-row .discord-username {
  font-weight: 600;
}

.management .mgmt-discord-row .btn-copy-discord {
  padding: 0.15rem 0.55rem;
  font-size: 0.7em;
  border-radius: 999px;
  line-height: 1.2;
  text-transform: uppercase;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Steam profile button */
.management .mgmt-steam-btn {
  margin-top: 0.7em;
}

.management .card .btn {
  font-size: 0.8em;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  border-width: 1px;
}

/* hover states */
.management .card:hover,
.management .card:focus-within {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--accent, #ff3b6f);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.98) 0, rgba(0, 0, 0, 0.88) 55%, rgba(0, 0, 0, 0.98) 100%);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.96),
    0 0 26px rgba(0, 0, 0, 0.9);
}

.management .card:hover::before,
.management .card:focus-within::before {
  opacity: 0.34;
}

.management .card:hover img,
.management .card:focus-within img {
  transform: translateY(-1px) scale(1.04);
}

/* responsive tweaks */
@media (max-width: 992px) {
  .management .card {
    padding: 1.25em 1.1em;
  }
}

@media (max-width: 768px) {
  .management .card .media {
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .management .card {
    padding: 1.15em 1em;
  }
}


/* ==========================================================================
   DISCORD PILLS (epic remaster)
   ========================================================================== */
.discordz {
  --pill-width: 460px;
  --pill-gap: 14px;
}

/* container spacing */
.discordz .title h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  text-shadow: 4px 4px 8px #000;
}

.discordz .title p {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem; /* ↓ smaller bottom margin */
}

/* Discord server cards (compact): optional banner strip, icon + name + tag + counts,
   description, traits and games as small chips, a facts line, online avatars and Join.
   Data: inc/discord-info.php. */
.discordz .dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  max-width: 1260px;
  margin: 0.25rem auto 1rem;
}

.discordz .dc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 14, 26, 0.96), rgba(9, 8, 15, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 2px solid var(--accent, #5865F2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}
.discordz .dc-card:hover,
.discordz .dc-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 24px color-mix(in srgb, var(--accent, #5865F2) 20%, transparent);
}
.discordz .dc-card.has-banner { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.discordz .dc-banner {
  position: relative;
  height: 72px;
  background: center / cover no-repeat;
}
.discordz .dc-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(14, 12, 22, 0.95));
}

.discordz .dc-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 14px;
  flex: 1;
}

.discordz .dc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.discordz .has-banner .dc-head { margin-top: -34px; align-items: flex-end; }
.discordz .dc-icon {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 16px;
  object-fit: cover;
  background: #0c0a14;
  border: 3px solid #0e0c17;
  box-shadow: 0 0 0 2px var(--accent, #5865F2), 0 6px 16px rgba(0, 0, 0, 0.6);
}
.discordz .dc-titles { min-width: 0; }
.discordz .dc-name {
  margin: 0;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.discordz .dc-verified { color: #3ba55d; font-size: 0.9em; margin-right: 3px; }
.discordz .dc-partner { color: #5865F2; font-size: 0.85em; margin-right: 3px; }
.discordz .dc-label,
.discordz .dc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--accent, #9ba7ff);
}
.discordz .dc-tag { color: #fff; }
.discordz .dc-tag img { width: 14px; height: 14px; object-fit: contain; }

.discordz .dc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
}
.discordz .dc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #80848e;
}
.discordz .dc-dot.online { background: #23a55a; box-shadow: 0 0 6px rgba(35, 165, 90, 0.7); }

.discordz .dc-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.discordz .dc-section-label {
  align-self: center;
  margin-right: 2px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.discordz .dc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.discordz .dc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.discordz .dc-chip img { width: 15px; height: 15px; border-radius: 4px; object-fit: cover; }
.discordz .dc-game i { color: var(--accent, #9ba7ff); }

.discordz .dc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
}
.discordz .dc-facts i { margin-right: 5px; color: var(--accent, #9ba7ff); }

.discordz .dc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.discordz .dc-avatars { display: flex; align-items: center; padding-left: 6px; }
.discordz .dc-avatars img,
.discordz .dc-avatars span {
  width: 24px;
  height: 24px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid #0e0c17;
  object-fit: cover;
  background: #1c1a26;
}
.discordz .dc-avatars span {
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.discordz .dc-vanity { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); font-family: monospace; }
.discordz .dc-join {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  text-decoration: none;
  background: #5865F2;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.35);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.discordz .dc-join:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }

@media (max-width: 575px) {
  .discordz .dc-grid { grid-template-columns: 1fr; }
  .discordz .dc-body { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .discordz .dc-card, .discordz .dc-join { transition: none; }
}


/* ==========================================================================
   SOCIAL CARDS
   ========================================================================== */
.social .col-md-6, .social .col-sm-12 { padding: 12; }

.social .card {
  border-radius: 25px;
  border: none;
  padding: 2em;
  overflow-y: hidden;
  border-style: solid;
  border-color: black;
  border-width: thick;

  transition: .2s ease-in-out transform, .2s ease-in-out box-shadow, .2s ease-in-out border-color;
  -webkit-transition: .2s ease-in-out transform, .2s ease-in-out box-shadow, .2s ease-in-out border-color;
  -o-transition: .2s ease-in-out transform, .2s ease-in-out box-shadow, .2s ease-in-out border-color;
  -moz-transition: .2s ease-in-out transform, .2s ease-in-out box-shadow, .2s ease-in-out border-color;
}

/* deep outer lift on hover (kept gradients per variant) */
.social .card:hover {
  box-shadow: var(--raise-shadow);
  transform: translateY(var(--raise-translate)) scale(var(--raise-scale));
}

.social .card h5 {
  color: white;
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 0;
  text-shadow: 4px 4px 4px #000000;
}
.social .card p {
  color: white;
  font-weight: 500;
  margin-bottom: 0;
  text-shadow: 3px 3px 3px #000000;
}

.social .card i {
  color: rgba(255,255,255,.1);
  font-size: 10em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
  transition: .2s ease-in-out all;
}
.social .card:hover i { font-size: 15em; }

/* Per-network gradient backgrounds */
.social .card.steam {
  background: linear-gradient(135deg, rgba(22,43,63,1) 0%,rgba(16,132,179,1) 100%);
  color: white;
}
.social .card.teamspeak {
  background: linear-gradient(135deg, rgba(35, 5, 87,1) 0%,rgba(149, 0, 255,1) 100%);
  color: white;
}
.social .card.extra {
  background: linear-gradient(135deg, rgba(61, 0, 0,1) 0%,rgba(217, 4, 4,1) 100%);
  color: white;
}
.social .card.gcity {
  background: linear-gradient(135deg, rgba(29, 75, 102,1) 0%,rgba(0, 124, 196,1) 100%);
  color: white;
}

/* ==========================================================================
   FOOTER (epic remaster)
   ========================================================================== */
.footer {
  margin-bottom: 2.5em;
}

.footer.author-footer {
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2.4em 2.2em;
  background:
    radial-gradient(circle at 0% 0%, rgba(147, 89, 255, 0.35) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0.96) 52%, rgba(0, 0, 0, 1) 100%);
  color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4em;

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(0, 0, 0, 0.9);

  overflow: hidden;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

/* diagonal glow sweep */
.footer.author-footer::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 0,
    rgba(255, 255, 255, 0.06) 35%,
    rgba(147, 89, 255, 0.18) 50%,
    transparent 70%
  );
  opacity: 0;
  transform: translate3d(-20%, 0, 0) rotate(-8deg);
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.footer.author-footer:hover,
.footer.author-footer:focus-within {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(147, 89, 255, 0.9);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.96),
    0 0 26px rgba(147, 89, 255, 0.55);
}

.footer.author-footer:hover::before,
.footer.author-footer:focus-within::before {
  opacity: 1;
  transform: translate3d(8%, 0, 0) rotate(-8deg);
}

/* main footer column */
.footer-inner {
  max-width: 960px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers label, logo, content */
  text-align: center;
}

/* subtle label above title */
.footer-inner::before {
  content: "PROJECT GAMING • COMMUNITY HUB";
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.16rem 0.9rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d8d2ff;
}

/* logo */
.footer-brand {
  margin-bottom: 1.1rem;
}

.footer-brand img {
  display: block;
  margin: 0 auto;
}

.footer-logo {
  width: 120px;
  height: auto;
  filter:
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 24px rgba(0, 0, 0, 0.9));
  transition: transform 0.2s ease-out, filter 0.2s ease-out;
}

.footer-logo:hover {
  transform: translateY(-2px) scale(1.03);
  filter:
    drop-shadow(0 0 12px rgba(147, 89, 255, 0.9))
    drop-shadow(0 0 26px rgba(0, 0, 0, 1));
}

/* CONTENT BLOCK – single source of truth */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers title, text, button */
  text-align: center;
}

/* title & body */
.footer-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.55rem;
  text-shadow: 4px 4px 8px #000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-text {
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
  color: #d8d8d8;
  max-width: 40rem;
  margin: 0 auto;
}

/* CTA button */
.footer-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  gap: 0.4rem;
  padding: 0.45rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.85);
  transition: 0.18s ease-out all;
}

.footer-cta i {
  margin-right: 0.45rem;
  font-size: 1rem;
}

.footer-cta:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow:
    0 0 20px rgba(147, 89, 255, 0.6),
    0 12px 26px rgba(0, 0, 0, 0.95);
}

/* copyright strip */
.footer-copyright {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: #b9b9b9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  text-align: center;   /* keep this centered with everything else */
}

/* legacy */
.author-footer {
  font-size: 0.9em;
  color: #ffffff;
  font-weight: 300;
}

.author-footer p {
  margin-bottom: 0;
}

/* responsive tweaks */
@media (max-width: 768px) {
  .footer.author-footer {
    padding: 2em 1.4em;
  }

  .footer-title {
    font-size: 1.2rem;
  }

  .footer-text {
    font-size: 0.95rem;
  }
}




/* ==========================================================================
   LOGGED OUT SCREEN
   ========================================================================== */
body.admin { background: #f2f2f2; }

.logged-out {
  width: 100%;
  height: 100vh;
  background: linear-gradient(238deg, #1fbd94, #af00ff);
  background-size: 400% 400%;
  animation: AnimationName 32s ease infinite;
}
@keyframes AnimationName {
  0%{background-position:0% 88%}
  50%{background-position:100% 13%}
  100%{background-position:0% 88%}
}

.logged-out img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); height: 4em;
}
.logged-out .container {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.logged-out .card {
  padding: 2em; border-radius: 0; margin: 0; border: none;
  background: #242424; text-decoration: none;
}
.logged-out a { text-decoration: none; }
.logged-out .card i {
  font-size: 4em; margin-bottom: 0; text-decoration:none; color:#f2f2f2;
}
.logged-out .card h2 {
  font-weight: 700; font-size: 2em; margin-top: 1em;
  text-decoration: none; color:#f2f2f2;
}
.logged-out .card .btn { margin-top: 1em; }

.btn-icon { padding: 0; padding-right: 1em; border: none; border-radius: 3px; display:inline-block; }
.btn-icon i {
  font-size: 1em !important;
  padding: 1em; background: rgba(0,0,0,.2); margin-right: .5em;
}

/* ==========================================================================
   LAYOUT / GRID BREAKPOINTS
   ========================================================================== */
@media screen and (max-width: 991px) { .navbar { padding: 1em; } }
@media (min-width:1200px) { .container-big { max-width: 90%; } }
@media (min-width:1880px) { .container-big { max-width: 1860px; } }
@media (max-width: 1200px) {
  .game-servers .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 576px) {
  .game-servers .col-md-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

/* management grid breakpoints */
@media screen and (max-width: 1580px) {
  .management .col-md-3 { -ms-flex: 0 0 33%; flex: 0 0 33%; max-width: 33%; }
}
@media screen and (max-width: 1280px) {
  .management .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}
@media screen and (max-width: 768px) {
  .management .col-md-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}
@media screen and (max-width: 768px) { .footer .col-md-3 { /* reserved */ } }





/* ==========================================================================
   VIP CTA – thin rainbow line by default, huge rainbow border + glow on hover
   ========================================================================== */
.vip-cta {
  --card-bg: rgba(8, 10, 17, 0.96);
  --card-edge: rgba(255, 255, 255, 0.08);
  --text: #e8ebf2;
  --muted: #a7afbf;
  --accent: #ffd44d;
  --radius: 10px;           /* was 16px – squarer corners */
}

.vip-cta .col-md-6 {
  max-width: 560px;
}

/* OUTER SHELL: neutral by default, rainbow outline + glow ONLY on hover */
.vip-shell {
  position: relative;
  z-index: 0;
  border-radius: var(--radius);
  padding: 0;                           /* CHANGED: no padding so shell == button width */
  background: rgba(0, 0, 0, 0.85);      /* neutral edge when idle */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* RAINBOW OUTER GLOW (big blurry aura) */
.vip-shell::before {
  content: "";
  position: absolute;
  inset: -18px;                         /* sits outside the shell */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #ff4d4d,
    #ffa64d,
    #ffe04d,
    #6dff6d,
    #4dd6ff,
    #6b6bff,
    #d26bff,
    #ff4d4d
  );
  background-size: 200% 100%;
  filter: blur(28px);
  opacity: 0;                           /* OFF by default */
  pointer-events: none;
  z-index: 0;
}

/* RAINBOW RING AROUND THE EDGE (no fill inside) */
.vip-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;                         /* ring thickness – handled by mask, not shell padding */
  background: linear-gradient(
    90deg,
    #ff4d4d,
    #ffa64d,
    #ffe04d,
    #6dff6d,
    #4dd6ff,
    #6b6bff,
    #d26bff,
    #ff4d4d
  );
  background-size: 200% 100%;

  /* keep only the border ring, cut out the center */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0;                           /* OFF by default */
  pointer-events: none;
  z-index: 0;
}

/* move the rainbow */
@keyframes vip-border-anim {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

.vip-shell:hover::before,
.vip-shell:hover::after {
  opacity: 1;
  animation: vip-border-anim 12s linear infinite;
}

/* HOVER: rainbow BORDER + outer glow */
.vip-shell:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.9);
  background: linear-gradient(
    90deg,
    #ff4d4d,
    #ffa64d,
    #ffe04d,
    #6dff6d,
    #4dd6ff,
    #6b6bff,
    #d26bff,
    #ff4d4d
  );
  background-size: 200% 100%;
  animation: vip-border-anim 12s linear infinite;
}

/* glow turns ON + animates with the same rainbow */
.vip-shell:hover::before {
  opacity: 1;
  filter: blur(30px);
  animation: vip-border-anim 12s linear infinite;
}

/* --------------------------------------------------------------------------------
   INNER BUTTON – stays dark, with a single rainbow line at the bottom
   -------------------------------------------------------------------------------- */
.vip-btn {
  all: unset;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;

  min-height: 64px;          /* was 56px – a bit taller */
  padding: 12px 18px 14px;   /* slightly beefier padding */

  cursor: pointer;
  color: var(--text);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #1a2134, #05070d);
  border: 1px solid var(--card-edge);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}


/* make inner content sit above the bottom line */
.vip-btn > * {
  position: relative;
  z-index: 2;
}

/* permanent rainbow line on the bottom (idle + hover) */
.vip-btn::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ff4d4d,
    #ffa64d,
    #ffe04d,
    #6dff6d,
    #4dd6ff,
    #6b6bff,
    #d26bff,
    #ff4d4d
  );
  background-size: 200% 100%;
  animation: vip-rainbow-line 10s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes vip-rainbow-line {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* speed up line a bit on hover (optional flair) */
.vip-shell:hover .vip-btn::after {
  animation-duration: 7s;
}

/* inner layout */
.vip-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* gold pill icon */
.vip-icon {
  display: grid;
  place-items: center;
  width: 52px;              /* was 34px */
  height: 52px;             /* was 34px */
  border-radius: 14px;      /* a bit softer but still chunky */
  flex: 0 0 auto;
  color: #0e1117;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #ffe57f, #ffca7f) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.75);
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* scale up the SVG crown without touching the PHP */
.vip-icon svg {
  width: 48px;
  height: 48px;
}


.vip-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 1.5rem;
  transition: color 0.18s ease;
}

.vip-sub {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.18s ease;
}

/* hover content color + crown bounce */
.vip-shell:hover .vip-title,
.vip-shell:hover .vip-sub {
  color: var(--accent);
}

.vip-shell:hover .vip-icon {
  transform: translateY(-1px) scale(1.07);  /* was 1.05 */
  filter: brightness(1.2);
}

/* active press */
.vip-btn:active {
  transform: translateY(0) scale(0.997);
}

/* mobile tweaks */
@media (max-width: 576px) {
  .vip-sub {
    display: none;
  }

  .vip-btn {
    min-height: 50px;
    padding: 10px 12px;
  }
}

/* size the custom crown image inside the pill */
.vip-crown-icon {
  width: 38px;   /* tweak until it looks perfect */
  height: 38px;
  display: block;
}




















/* Rainbow cursor trail canvas */
#cursor-rainbow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* so it doesn't block clicks */
  z-index: 9999;
}






/* ==========================================================================
   FIREFOX PERFORMANCE OVERRIDES
   ========================================================================== */

/* 1) Background: avoid fixed repaint overhead in Firefox */
.is-firefox body::before {
  filter: none;
  transform: none;
  background-attachment: scroll;
}

/* 2) Tone down heavy card shadows + hover transforms on FF
   ------------------------------------------------------------------ */
.is-firefox .game-servers .card,
.is-firefox .management .card,
.is-firefox .discordz .card,
.is-firefox .vip-shell,
.is-firefox .footer.author-footer,
.is-firefox .social .card {
  /* single, cheaper shadow */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.85);
  /* keep transforms mild to reduce repaint work */
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, border-color 0.08s ease-out;
}

/* On hover: tiny lift instead of big jump + huge glow */
.is-firefox .game-servers .card:hover,
.is-firefox .game-servers .card:focus-within,
.is-firefox .management .card:hover,
.is-firefox .management .card:focus-within,
.is-firefox .discordz .card:hover,
.is-firefox .discordz .card:focus-within,
.is-firefox .vip-shell:hover,
.is-firefox .vip-shell:focus-within,
.is-firefox .footer.author-footer:hover,
.is-firefox .footer.author-footer:focus-within,
.is-firefox .social .card:hover,
.is-firefox .social .card:focus-within {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.9);
  filter: none;
}

/* Inner inset glows on heavy cards: cheaper in Firefox */
.is-firefox .game-servers .card .inner,
.is-firefox .management .card img,
.is-firefox .discordz .card img {
  box-shadow: none;
}

/* 3) Disable expensive blend-modes / edge overlays in FF
   ------------------------------------------------------------------ */
.is-firefox .game-servers .card::before,
.is-firefox .game-servers .card::after,
.is-firefox .management .card::before,
.is-firefox .discordz .card::before,
.is-firefox .vip-shell::before,
.is-firefox .vip-shell::after,
.is-firefox .footer.author-footer::before {
  mix-blend-mode: normal;
  opacity: 0.18;
  filter: none;
}

/* 4) Take the edge off big text-shadows to reduce overdraw
   ------------------------------------------------------------------ */
.is-firefox .section .title h2,
.is-firefox .section .title p,
.is-firefox nav.navbar,
.is-firefox nav.navbar .mr-auto a,
.is-firefox .game-servers .card .inner .hostmap,
.is-firefox .game-servers .server-players,
.is-firefox .game-servers .server-status,
.is-firefox .features-heading h2,
.is-firefox .feature-desc,
.is-firefox .management .card h5,
.is-firefox .management .mgmt-steam-status,
.is-firefox .discordz .card h5,
.is-firefox .discordz .card .discord-counts,
.is-firefox .social .card h5,
.is-firefox .social .card p,
.is-firefox .footer-title,
.is-firefox .footer-text {
  text-shadow: 1px 1px 3px #000000;
}

/* 5) Disable long-running gradient animations (VIP, nav text, logged-out)
   ------------------------------------------------------------------ */

/* Navbar rainbow text on hover -> static in Firefox */
.is-firefox nav.navbar .mr-auto a:hover {
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: inherit;
  animation: none !important;
  text-shadow: 0 2px 4px #000;
}

/* VIP rainbow ring + bottom line: keep subtle static color */
.is-firefox .vip-shell::before,
.is-firefox .vip-shell::after,
.is-firefox .vip-btn::after {
  animation: none !important;
  background-position: 50% 0;
  filter: none;
}

/* Logged-out animated gradient: static in Firefox */
.is-firefox .logged-out {
  animation: none !important;
  background-position: 50% 50%;
}

/* Extra Firefox fix: kill flashing accent overlays on hover */
.is-firefox .game-servers .card::before,
.is-firefox .game-servers .card::after,
.is-firefox .management .card::before,
.is-firefox .discordz .card::before,
.is-firefox .footer.author-footer::before,
.is-firefox .vip-shell::before,
.is-firefox .vip-shell::after {
  background: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}



/* Firefox: simplify game server card hover to avoid pink flash */
.is-firefox .game-servers .card {
  background-blend-mode: normal;              /* no multiply blending */
  filter: none !important;                    /* avoid animated filter */
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    border-color 0.12s ease-out;
}

.is-firefox .game-servers .card:hover,
.is-firefox .game-servers .card:focus-within {
  transform: translateY(-2px);            /* small lift, no scale */
}

/* Inner panel: slightly toned-down inset glow */
.is-firefox .game-servers .card .inner {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.75);
}

.is-firefox .game-servers .card:hover .inner,
.is-firefox .game-servers .card:focus-within .inner {
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9);
}

/* Icon: avoid heavy stacked drop-shadows on Firefox */
.is-firefox .game-servers .card:hover .inner img,
.is-firefox .game-servers .card:focus-within .inner img {
  transform: translateY(-1px);                /* tiny movement only */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.95));
}


/* Firefox: remove purple glow overlay on game cards to stop pink flicker */
.is-firefox .game-servers .card::before,
.is-firefox .game-servers .card::after {
  content: none !important;        /* no pseudo elements at all */
  background: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

/* ==========================================================================
   FIREFOX: make game server cards static to kill pink flicker
   ========================================================================== */

/* turn off blend mode + animations on cards */
.is-firefox .game-servers .card {
  background-blend-mode: normal !important;     /* no multiply compositing */
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

/* keep a simple, static hover style (no transforms) */
.is-firefox .game-servers .card:hover,
.is-firefox .game-servers .card:focus-within {
  transform: none !important;
  filter: none !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.9);
  border-color: rgba(147, 89, 255, 0.7);
}

/* images inside the card: no zoom / extra glow on hover in Firefox */
.is-firefox .game-servers .card .inner img,
.is-firefox .game-servers .card:hover .inner img,
.is-firefox .game-servers .card:focus-within .inner img {
  transition: none !important;
  transform: none !important;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.95));
}

/* ============================================
   FIREFOX: simplify Discord "Join" pills
   ============================================ */

.is-firefox .discordz .card {
  /* Replace the fancy radial background with a flat dark one */
  background: rgba(0, 0, 0, 0.92) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;

  /* Slightly lighter transitions so Firefox isn't repainting as much */
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    border-color 0.12s ease-out,
    background 0.12s ease-out;
}

/* Kill the radial accent glow layer entirely */
.is-firefox .discordz .card::before {
  content: none !important;
}

/* Keep a tiny hover lift but no crazy glow */
.is-firefox .discordz .card:hover,
.is-firefox .discordz .card:focus-within {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.96);
}

/* Buttons: remove the animated gradient / heavy glows */
.is-firefox .discordz .card .btn {
  background: #111111;
  border-color: var(--accent, #5865F2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  transition:
    background 0.12s ease-out,
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    border-color 0.12s ease-out;
}

/* Firefox hover: subtle only, no bright radial / neon */
.is-firefox .discordz .card .btn:hover,
.is-firefox .discordz .card .btn:focus-visible {
  background: #1b1b1b;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  transform: translateY(-1px);
}

/* ============================================
   FIREFOX: simplify GAME SERVER CARDS
   ============================================ */

.is-firefox .game-servers .card {
  /* keep background image, but no blend-mode tricks */
  background-blend-mode: normal !important;
  background-color: rgba(0, 0, 0, 0.85) !important;

  /* single cheaper shadow */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9) !important;

  /* avoid filter-based saturation on hover */
  filter: none !important;

  /* lighter transitions so repaint windows are shorter */
  transition:
    transform 0.10s ease-out,
    box-shadow 0.10s ease-out,
    border-color 0.10s ease-out;
}

/* kill the radial/vignette overlays which were using blend modes */
.is-firefox .game-servers .card::before,
.is-firefox .game-servers .card::after {
  content: none !important;
}

/* inner panel: simpler background */
.is-firefox .game-servers .card .inner {
  background: rgba(0, 0, 0, 0.65) !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8) !important;
}

/* hover: tiny lift only, no extra glow or saturation */
.is-firefox .game-servers .card:hover,
.is-firefox .game-servers .card:focus-within {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.95) !important;
}

/* Firefox: no scroll animations – render everything statically */
.is-firefox [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}










/* ==========================================================================
   LOW-FX MODE (prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* 1) Kill big transitions / animations site-wide */
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* 2) Turn off flashy text / border animations */
  nav.navbar .mr-auto a:hover {
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: inherit;
    animation: none !important;
    text-shadow: 0px 2px 4px #000;
  }

  /* rainbow bottom line: keep static color, no moving gradient */
  .vip-btn::after {
    animation: none !important;
    background: linear-gradient(90deg, #ffd44d, #ffd44d);
  }

  /* rainbow vip border: keep subtle static glow, no spin */
  .vip-shell::before,
  .vip-shell::after {
    animation: none !important;
    opacity: 0.6;
    filter: blur(14px);
  }

  /* cards / glows: reduce intensity slightly */
  .game-servers .card,
  .management .card,
  .discordz .card,
  .vip-shell {
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.8);
  }




/* Simple inline icons (no Font Awesome needed) */

/* Players icon */
.game-servers .server-players i::before {
  content: "👥";
}

/* Copy button clipboard icon (normal state) */
.game-servers .server-connect-btn i::before {
  content: "📋";
}

/* Discord label in management cards */
.management .mgmt-discord-row .discord-label i::before {
  content: "💬";
}

/* Discord join buttons */
.discordz .card .btn i::before,
.footer-cta i::before {
  content: "💬";
}

/* Steam icons */
.management .mgmt-steam-btn .btn i::before,
.social .card.steam i::before {
  content: "🎮";
}

/* Social cards */
.social .card.teamspeak i::before { content: "🎧"; }
.social .card.extra i::before     { content: "⭐"; }
.social .card.gcity i::before     { content: "🌐"; }

/* Logged-out big icon */
.logged-out .card i::before { content: "⚠"; }

/* Generic small icon button */
.btn-icon i::before { content: "➜"; }


/* ==========================================================================
   EPIC COMPACT THEME - Cinematic Gaming Dashboard
   ========================================================================== */

:root {
    --epic-purple: #7c3aed;
    --epic-blue: #3b82f6;
    --epic-cyan: #06b6d4;
    --epic-glow: rgba(124, 58, 237, 0.6);
    --neon-border: rgba(124, 58, 237, 0.4);
}

/* Background — matched to the Ember store (public/css/bg-img.css):
   the real background image, dimmed to ~0.5 opacity over a dark page,
   with a top-to-bottom + radial dark overlay. (Replaces the previous
   "epic animated" radial-gradient-only background so the homepage and
   vip.projectgaming.gg share the same backdrop.) */
body {
    background: #222222 !important;   /* exact Ember --theme-bg-page */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    /* Exact replica of the Ember store backdrop. Ember layers .bg-img +
       .bg-overlay (two gradients) inside .bg-wrapper{opacity:.5}. We reproduce
       that as one element here: the same two overlay gradients on top of the
       image, all at opacity:0.5, composited over the #222 page — so it matches
       the store. (Everything lives in body::before because a separate
       body::after layer wasn't painting reliably on this page.) */
    background:
        linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%),
        radial-gradient(transparent, rgba(0,0,0,0.5) 100%),
        url(../img/abackground.webp) no-repeat center center fixed;
    background-size: cover;
    opacity: 0.5;
    filter: none;
    transform: none;
}

/* =====================================================
   EPIC HEADER - Compact with glow
   ===================================================== */
.nav-before {
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.95), rgba(5, 5, 10, 0.98)) !important;
    padding: 1.5rem !important;
    border-bottom: 1px solid var(--neon-border) !important;
    box-shadow: 0 4px 30px rgba(124, 58, 237, 0.15);
    position: relative;
}

.nav-before::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--epic-purple), var(--epic-cyan), transparent);
}

.nav-before img {
    width: 180px !important;
    height: 180px !important;
    filter: drop-shadow(0 0 40px rgba(124, 58, 237, 0.5));
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 40px rgba(124, 58, 237, 0.5)); }
    50% { filter: drop-shadow(0 0 60px rgba(124, 58, 237, 0.7)) drop-shadow(0 0 80px rgba(59, 130, 246, 0.3)); }
}

/* =====================================================
   EPIC NAVBAR
   ===================================================== */
.navbar {
    background: linear-gradient(180deg, rgba(5, 5, 10, 0.98), rgba(10, 10, 18, 0.95)) !important;
    border-bottom: 1px solid var(--neon-border) !important;
    padding: 0 !important;
}

nav.navbar .mr-auto a {
    font-size: 1.1em !important;
    position: relative;
    transition: all 0.3s ease;
}

nav.navbar .mr-auto a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--epic-purple), var(--epic-cyan));
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

nav.navbar .mr-auto a:hover::after {
    width: 80%;
}

nav.navbar .mr-auto a:hover {
    text-shadow: 0 0 20px var(--epic-purple), 0 0 40px rgba(124, 58, 237, 0.5) !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    animation: none !important;
}

/* =====================================================
   COMPACT SECTIONS
   ===================================================== */
.section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.sectionz {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.section.features {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
}

/* Epic section titles */
.section .title h2,
.features-heading h2 {
    font-size: 1.8em !important;
    background: linear-gradient(135deg, #fff 0%, var(--epic-purple) 50%, var(--epic-cyan) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none !important;
    text-decoration: none !important;
    position: relative;
    display: inline-block;
    animation: titleShimmer 4s linear infinite;
}

@keyframes titleShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.section .title h2::after,
.features-heading h2::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--epic-purple), var(--epic-cyan));
    border-radius: 2px;
}

.section .title p {
    font-size: 1.1em !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* =====================================================
   EPIC FEATURE CARDS
   ===================================================== */
.feature-card {
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.9), rgba(10, 10, 18, 0.95)) !important;
    border: 1px solid var(--neon-border) !important;
    border-radius: 16px !important;
    padding: 1.2rem 1rem !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border: none;
    inset: auto;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--epic-purple) !important;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2), 0 0 20px rgba(124, 58, 237, 0.1);
}

.feature-icon {
    background: linear-gradient(135deg, var(--epic-purple), var(--epic-blue)) !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.6) !important;
}

.feature-title-block h3 {
    font-size: 0.95rem !important;
}

.feature-desc {
    font-size: 0.85rem !important;
}

.feature-pill {
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: var(--epic-purple) !important;
    color: var(--epic-cyan) !important;
}

/* =====================================================
   EPIC SERVER CARDS
   ===================================================== */
.game-servers .card {
    border: 1px solid var(--neon-border) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(124, 58, 237, 0.1) !important;
    transition: all 0.3s ease !important;
}

.game-servers .card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: var(--epic-purple) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 58, 237, 0.3) !important;
}

.game-servers .card .inner {
    min-height: 190px !important;
    padding: 0.8em 1em !important;
}

.game-servers .server-status-online .status-dot {
    animation: statusGlow 2s ease-in-out infinite;
}

@keyframes statusGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(58, 211, 92, 0.95); }
    50% { box-shadow: 0 0 20px rgba(58, 211, 92, 1), 0 0 30px rgba(58, 211, 92, 0.5); }
}

.game-servers .server-connect-btn,
.game-servers .bm-link-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(59, 130, 246, 0.2)) !important;
    border-color: var(--epic-purple) !important;
    transition: all 0.3s ease !important;
}

.game-servers .server-connect-btn:hover,
.game-servers .bm-link-btn:hover {
    background: linear-gradient(135deg, var(--epic-purple), var(--epic-blue)) !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* =====================================================
   EPIC DISCORD CARDS
   ===================================================== */
.discordz .card {
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.95), rgba(10, 10, 18, 0.98)) !important;
    border: 1px solid var(--neon-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.discordz .card:hover {
    border-color: var(--accent, #5865F2) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(var(--accent, 88, 101, 242), 0.3) !important;
}

.discordz .card .btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(88, 101, 242, 0.3)) !important;
    border-color: var(--accent, #5865F2) !important;
}

.discordz .card .btn:hover {
    background: linear-gradient(135deg, var(--epic-purple), #5865F2) !important;
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.5) !important;
}

/* =====================================================
   EPIC MANAGEMENT CARDS
   ===================================================== */
.management .card {
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.95), rgba(10, 10, 18, 0.98)) !important;
    border: 1px solid var(--neon-border) !important;
    padding: 1rem !important;
}

.management .card:hover {
    border-color: var(--accent, #ff3b6f) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 59, 111, 0.2) !important;
}

.management .card img {
    box-shadow: 0 0 0 2px var(--accent, #ff3b6f), 0 0 15px var(--accent, #ff3b6f) !important;
}

/* =====================================================
   EPIC SOCIAL CARDS
   ===================================================== */
.social .card {
    border: 1px solid var(--neon-border) !important;
    position: relative;
    overflow: hidden;
}

.social .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.social .card:hover::before {
    left: 100%;
}

.social .card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(124, 58, 237, 0.2) !important;
}

/* =====================================================
   EPIC VIP CTA
   ===================================================== */
.vip-shell {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 77, 77, 0.2) !important;
}

.vip-shell:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 77, 77, 0.4) !important;
}

/* =====================================================
   EPIC FOOTER
   ===================================================== */
.footer.author-footer {
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.95), rgba(10, 10, 18, 0.98)) !important;
    border: 1px solid var(--neon-border) !important;
    box-shadow: 0 -10px 40px rgba(124, 58, 237, 0.1) !important;
}

.footer.author-footer:hover {
    border-color: var(--epic-purple) !important;
}

.footer-logo {
    filter: drop-shadow(0 0 25px rgba(124, 58, 237, 0.5)) !important;
}

.footer-cta {
    background: linear-gradient(135deg, var(--epic-purple), var(--epic-blue)) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
}

.footer-cta:hover {
    box-shadow: 0 6px 30px rgba(124, 58, 237, 0.6) !important;
    transform: translateY(-3px) !important;
}
} /* close @media (prefers-reduced-motion: reduce) — was missing, which
     nested the Firefox section, the responsive @media blocks, and the
     navbar/theme additions inside it. */

/* =====================================================
   EPIC THEME FIREFOX OPTIMIZATIONS
   ===================================================== */
.is-firefox body::before,
.is-firefox body::after {
    animation: none !important;
}

.is-firefox .nav-before img {
    animation: none !important;
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.4));
}

.is-firefox .section .title h2,
.is-firefox .features-heading h2 {
    animation: none !important;
    background: linear-gradient(135deg, #fff, var(--epic-purple));
    -webkit-background-clip: text;
}

.is-firefox .game-servers .card:hover {
    transform: translateY(-4px) !important;
}

.is-firefox .feature-card:hover {
    transform: translateY(-3px);
}

.is-firefox .game-servers .server-status-online .status-dot {
    animation: none !important;
    box-shadow: 0 0 12px rgba(58, 211, 92, 0.9);
}

/* =====================================================
   EPIC THEME COMPACT RESPONSIVE TWEAKS
   ===================================================== */
@media (max-width: 992px) {
    .nav-before img {
        width: 140px !important;
        height: 140px !important;
    }

    .section .title h2 {
        font-size: 1.5em !important;
    }
}

@media (max-width: 768px) {
    .nav-before {
        padding: 1rem !important;
    }

    .nav-before img {
        width: 120px !important;
        height: 120px !important;
    }

    .section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}
/* ==========================================================================
   ProjectGaming unified navbar  (matches vip.projectgaming.gg / Ember store)
   --------------------------------------------------------------------------
   The homepage pages render a `.nav-before` logo banner stacked above a
   plain Bootstrap `.navbar.bg-dark`. To match the Ember store's compact
   glass bar WITHOUT editing 19 page templates, this restyles that existing
   markup directly: the tall logo banner is hidden and the PG logo is pulled
   into the navbar as a left-aligned brand via CSS. Accent is #5d00ff.
   ========================================================================== */
:root {
  --pg-accent:   #5d00ff;
  --pg-accent-2: #9359ff;
}

/* Hide the old oversized logo banner above the nav */
.nav-before { display: none !important; }

/* The bar itself -> glassmorphic Ember-style header. Height matched to the
   store's ~56px bar (taller than the previous 0.5rem padding). */
.navbar.navbar-dark.bg-dark {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 56px;
  /* Solid dark bar like the store. NOTE: the previous 0.82-alpha version let
     the page's purple radial-glow background bleed THROUGH the bar, washing
     the whole navbar purple. Using a near-opaque flat dark fill (no
     transparency, no purple, no glow) so only the thin bottom line shows —
     exactly like the Ember store. */
  background: #0b0712 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(147, 89, 255, 0.30) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  padding: 0.45rem 0 !important;
  text-shadow: none !important;
}

/* Inject the PG logo as a left brand (markup has no .navbar-brand) and
   CENTER the whole bar's content in a ~1140px container so the logo+links
   group sits centered like the store — instead of hugging the far-left edge
   of the 90%-wide .container-big. */
.navbar.navbar-dark.bg-dark .container,
.navbar.navbar-dark.bg-dark .container-big {
  position: relative;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 58px;   /* room for the injected logo on the left */
  display: flex;
  align-items: center;
}
.navbar.navbar-dark.bg-dark .container::before,
.navbar.navbar-dark.bg-dark .container-big::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url("/assets/img/!PGLOGO.webp") no-repeat center / contain;
  filter: drop-shadow(0 0 8px rgba(93, 0, 255, 0.55));
  pointer-events: none;
  z-index: 2;
}

/* Links sit immediately after the logo (left-grouped), like the store. */
.navbar.navbar-dark.bg-dark .navbar-nav {
  align-items: center;
  flex-direction: row;
}
.navbar.navbar-dark.bg-dark .navbar-nav.mr-auto.ml-auto {
  margin-left: 0.5rem !important;
  margin-right: auto !important;
}

/* Links — mirrored EXACTLY from the live store's pg-theme.css: uppercase,
   weight 700, letter-spacing, purple icons, animated center-out underline,
   icon lift on hover. (Earlier this was flattened to normal-case/weight-500,
   which is why the two navbars diverged.) */
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link {
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;   /* "Steam Group" must never wrap to two lines */
  color: rgba(255, 255, 255, 0.72) !important;
  padding: 0.65rem 1rem !important;
  margin: 0 0.1rem;
  border: 0 !important;
  border-radius: 8px;
  text-shadow: none !important;
  transition: color 0.2s ease, background 0.2s ease;
}
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link i,
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link svg {
  color: var(--pg-accent-2);
  margin-right: 0.35rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
/* center-out animated underline */
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  height: 2px;
  width: 0;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent-2));
  border-radius: 2px;
  box-shadow: 0 0 10px var(--pg-accent);
  transition: width 0.25s ease;
}
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link:focus,
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(93, 0, 255, 0.10);
  -webkit-text-fill-color: #fff;   /* cancel the legacy text-clip */
  animation: none;
  border-color: transparent;
}
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link:hover::after,
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link.active::after {
  width: 60%;
}
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link:hover i,
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link:focus i {
  transform: translateY(-1px);
  color: #fff;
}

/* Active page tab matches the store exactly via the shared hover/active rule
   above: faint purple background + persistent center-out underline (no filled
   pill or border ring). The active class is applied by pg-analytics.js. */

/* Right-side "connect" server links keep normal casing. Scoped with
   :not(.mr-auto) so it does NOT also hit the main link list, which carries
   both mr-auto AND ml-auto (that was forcing the main links back to title
   case instead of the store's uppercase). */
.navbar.navbar-dark.bg-dark .navbar-nav.ml-auto:not(.mr-auto) .nav-link {
  text-transform: none;
}


/* Mobile toggler */
.navbar.navbar-dark.bg-dark .navbar-toggler {
  border: 1px solid rgba(93, 0, 255, 0.45) !important;
  border-radius: 10px;
  margin-left: auto;
}
.navbar.navbar-dark.bg-dark .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 0, 255, 0.35);
  outline: none;
}

/* Below 1200px the links fold into the menu button (navbar-expand-xl on
   every page): eight of them don't fit in one row any narrower. */
@media (max-width: 1199.98px) {
  .navbar.navbar-dark.bg-dark .container,
  .navbar.navbar-dark.bg-dark .container-big {
    flex-wrap: wrap;
  }
  .navbar.navbar-dark.bg-dark .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar.navbar-dark.bg-dark .navbar-nav.mr-auto.ml-auto {
    margin-left: 0 !important;
  }
}

/* Neutralise the leftover "epic theme" navbar rules that fight the unified
   styling above: the .navbar-nav a { padding:20px !important } and the
   duplicate .mr-auto a::after underline (different color/timing). These come
   last so they win over those earlier !important declarations. */
.navbar.navbar-dark.bg-dark .navbar-nav .nav-link {
  padding: 0.7rem 1.15rem !important;
  font-size: 1.05rem !important;
}
.navbar.navbar-dark.bg-dark .navbar-nav.mr-auto a,
.navbar.navbar-dark.bg-dark .navbar-nav.ml-auto a {
  font-weight: 700 !important;
}
/* Match the legacy second underline's color to the unified one (it shares
   the same center-out geometry, so they overlap cleanly). */
.navbar.navbar-dark.bg-dark .navbar-nav.mr-auto a::after {
  background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent-2));
}

/* Eight items on narrower desktops: tighten them from 1200px (where the menu
   button takes over below) until they fit at full size. Has to come after
   the rule above, which would otherwise win and push the row past the edge. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link {
    font-size: 0.86rem !important;
    padding: 0.6rem 0.55rem !important;
    letter-spacing: 0.035em;
  }
}

/* ==========================================================================
   ProjectGaming unified theme cohesion (Phase 2+3)
   --------------------------------------------------------------------------
   Aligns the homepage's buttons, section headers, links and footer with the
   vip.projectgaming.gg (Ember) store so both sites read as one brand. Uses
   the same #5d00ff accent. Appended last so it layers over the existing
   styles above without removing any of them.
   ========================================================================== */
:root {
  --pg-accent:   #5d00ff;
  --pg-accent-2: #9359ff;
  --pg-ink:      #0b0712;
}

/* Primary buttons → brand gradient + glow (matches the store) */
.btn-primary,
.btn-outline-light:hover,
a.btn.btn-primary {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(93, 0, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-primary:hover,
a.btn.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(93, 0, 255, 0.5);
}

/* Outline buttons (e.g. management "Steam Profile") pick up the brand edge */
.btn-outline-light {
  border: 1px solid rgba(147, 89, 255, 0.55) !important;
  transition: all 0.18s ease;
}
.btn-outline-light:hover {
  box-shadow: 0 8px 22px rgba(93, 0, 255, 0.4);
}

/* Section title underline → brand gradient instead of a flat text-underline,
   so it matches the store's accented headings. */
.section .title h2 {
  text-decoration: none;
  display: inline-block;
  padding-bottom: 0.35rem;
  position: relative;
}
.section .title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent-2));
  box-shadow: 0 0 14px rgba(93, 0, 255, 0.7);
}

/* Generic links inside content adopt the brand purple on hover */
.container a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
  color: var(--pg-accent-2);
}

/* Footer: brand-purple top divider to mirror the store footer */
.footerz {
  border-top: 1px solid rgba(93, 0, 255, 0.25);
}

/* ==========================================================================
   Hero PG logo — centered brand mark above the "WELCOME" heading
   ========================================================================== */
.pg-hero-logo {
  margin: 0.5rem auto 1.25rem;
}
.pg-hero-logo img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(93, 0, 255, 0.55))
          drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.pg-hero-logo img:hover {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 0 30px rgba(147, 89, 255, 0.85))
          drop-shadow(0 8px 22px rgba(0, 0, 0, 0.7));
}
@media (max-width: 768px) {
  .pg-hero-logo img { width: 110px; height: 110px; }
}

/* ==========================================================================
   Navbar on narrower screens (works like the Ember store's)
   --------------------------------------------------------------------------
   The PG logo is drawn by .container::before (the page markup has no brand
   element). It used to sit at left:0 of a container that, below ~1400px,
   fills the whole window, so the logo and the menu button were pressed
   against the screen edges, and with the menu open the logo slid down to the
   middle of the panel. Now: a 16px margin on both sides, the logo pinned to
   the top row beside the menu button, and the links opening as a panel
   under the bar like the store's dropdowns. Comes last so it wins.
   ========================================================================== */
.navbar.navbar-dark.bg-dark .container,
.navbar.navbar-dark.bg-dark .container-big {
  padding-left: 72px !important;   /* 16px edge + 40px logo + 16px gap */
  padding-right: 16px !important;
}
.navbar.navbar-dark.bg-dark .container::before,
.navbar.navbar-dark.bg-dark .container-big::before {
  left: 16px;
}

@media (max-width: 1199.98px) {
  /* Logo and menu button share the top row; the links go full width below. */
  .navbar.navbar-dark.bg-dark .container,
  .navbar.navbar-dark.bg-dark .container-big {
    padding-left: 16px !important;
    min-height: 44px;
  }
  /* Pinned to the top row (not the middle of the bar), so it stays put
     when the menu opens. */
  .navbar.navbar-dark.bg-dark .container::before,
  .navbar.navbar-dark.bg-dark .container-big::before {
    top: 22px;
  }
  .navbar.navbar-dark.bg-dark .navbar-toggler {
    width: 48px;
    height: 44px;
    padding: 0;
    margin: 0 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .navbar.navbar-dark.bg-dark .navbar-collapse {
    flex-basis: 100%;
  }
  /* The open menu: a framed panel of full-width rows, like the store. */
  .navbar.navbar-dark.bg-dark .navbar-nav.mr-auto.ml-auto {
    width: 100%;
    align-items: stretch;
    margin: 0.6rem 0 0.3rem !important;
    padding: 0.4rem;
    background: rgba(17, 12, 26, 0.97);
    border: 1px solid rgba(122, 43, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  }
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
  }
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link i,
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link svg {
    width: 1.4em;
    text-align: center;
  }
  /* The underline belongs to the desktop row; in the panel the row highlight is enough. */
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link::after,
  .navbar.navbar-dark.bg-dark .navbar-nav.mr-auto a::after {
    display: none;
  }
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link:hover,
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link:focus,
  .navbar.navbar-dark.bg-dark .navbar-nav .nav-link.active {
    background: rgba(122, 43, 255, 0.18);
  }
}