/* Original captured layout, with One Legacy City branding and native controls. */
[hidden],.olc-gallery[hidden],.Burger.modal[hidden],#mobile-menu[hidden],#gallery[hidden]{display:none!important;visibility:hidden!important;height:0!important;max-height:0!important;overflow:hidden!important;pointer-events:none!important}
button{font:inherit}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible{outline:2px solid #e81c5a;outline-offset:5px}
header .left .logo{width:200px}header .left .logo>.olc-wordmark{width:200px;height:60px;object-fit:cover;object-position:center}
.Burger .header .olc-wordmark{width:200px;height:60px;object-fit:cover;object-position:center}
footer[data-v-9ce1fc5c] .company .logo.olc-wordmark{display:block;width:240px;height:72px;max-width:100%;object-fit:cover;object-position:center;margin:0 0 20px}
footer .company{min-width:240px}
.intro-container .card .olc-letter{background:none;overflow:hidden;opacity:.95;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.intro-container .card .olc-letter::before{content:'';position:absolute;left:calc(-1 * (var(--card-index, 0) * 100% + var(--card-index, 0) * 14px));top:50%;transform:translateY(-50%);width:calc(700% + 84px);height:100%;background-image:url('../new_era_logo_transparent.png');background-position:center center;background-size:88% auto;background-repeat:no-repeat;opacity:.92;filter:drop-shadow(0 0 35px rgba(0,234,255,0.65)) drop-shadow(0 0 65px rgba(237,98,191,0.6));pointer-events:none;transition:opacity .3s ease,filter .3s ease}
.intro-container .card:hover .olc-letter::before,.intro.hover .intro-container .card .olc-letter::before{opacity:1;filter:drop-shadow(0 0 45px rgba(0,234,255,0.95)) drop-shadow(0 0 85px rgba(237,98,191,0.9))}
.intro-back-logo.olc-wordmark{object-fit:contain}
header .right .burger{background:none;border:0;padding:0;align-items:flex-start;color:white}
.Burger .cross,.Burger .lang{cursor:pointer}
.olc-language{position:absolute;right:0;top:calc(100% + 12px);min-width:140px;padding:16px;background:#181818;border:1px solid #333;border-radius:6px;color:white;z-index:1100}
.showcase .cards .swiper-wrapper{display:grid;grid-template-columns:minmax(0,1fr);height:100%}
.showcase .cards .swiper-slide{grid-area:1/1;transform:none!important;opacity:0;visibility:hidden;transition:opacity .3s ease}
.showcase .cards .swiper-slide-active{opacity:1;visibility:visible}
.showcase .cards .arrow-buttons .button{padding:0;color:#ffffff80}
.showcase .cards .arrow-buttons .button:disabled{opacity:.55;cursor:default}
.showcase .media .video .back.brand-cover{object-fit:contain;object-position:center}
.showcase .media .photos .mobile-more .more{display:none!important}
.showcase .media .photos .photo[role=button]:focus-visible{outline-offset:2px}
.system-status[data-state=unknown]:before{background:#b6b6b6}
.system-status[data-state=offline]:before{background:#e81c5a}
.newsletter-result{max-width:450px;color:#e5b6c4;font-size:13px;line-height:1.5}
.olc-gallery{position:fixed;inset:0;z-index:2000;background:#080808e6;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:60px 12% 165px}
.olc-gallery button{background:transparent;border:0;color:#b8b8b8;cursor:pointer;display:grid;place-items:center;padding:12px;border-radius:50%}
.olc-gallery button:hover{color:white;background:#ffffff0a}
.olc-gallery button svg{width:32px;height:32px;pointer-events:none}
.gallery-close{position:absolute;right:3%;top:4%}
.gallery-close svg{width:24px!important;height:24px!important}
.gallery-prev{position:absolute;left:4%;top:47%}
.gallery-next{position:absolute;right:4%;top:47%;transform:rotate(180deg)}
.olc-gallery figure{width:100%;max-width:1280px;text-align:center}
.olc-gallery figure img{width:100%;height:auto;max-height:72vh;object-fit:contain}
.olc-gallery figcaption{font-size:13px;color:#aaa;padding-top:14px}
.gallery-thumbnails{position:absolute;bottom:6%;left:2%;right:2%;display:flex;gap:16px;overflow:auto;padding:8px;scrollbar-width:thin;scrollbar-color:#85516f #171317}
.gallery-thumbnails button{flex:0 0 180px;height:94px;border:1px solid #333;border-radius:6px;overflow:hidden;padding:0;opacity:.6}
.gallery-thumbnails button[aria-current=true]{border-color:#e81c5a;opacity:1}
.gallery-thumbnails img{width:100%;height:100%;object-fit:cover}
body.overlay-open{overflow:hidden}
.service-info{position:fixed;inset:0;margin:auto;max-width:460px;width:calc(100% - 40px);padding:32px;background:#181818;color:white;border:1px solid #343434;border-radius:12px}
.service-info::backdrop{background:#000b;backdrop-filter:blur(6px)}
.service-info h2{font-size:24px;font-weight:800;margin-bottom:16px}
.service-info p{font-size:15px;line-height:1.6;color:#bbb;margin-bottom:24px}
.service-info a,.service-info button{display:inline-block;border:0;border-radius:6px;padding:12px 16px;background:#e81c5a;color:white;cursor:pointer;font-size:14px}
.service-info button{background:#333;margin-left:8px}
.questStarter .mens{pointer-events:none}
@media(min-width:1281px){.showcase .cards .back{height:360px;top:0;object-position:top center}.showcase .cards .swiper{min-height:500px}.showcase .cards .swiper-slide{padding-top:360px}.showcase .media .video{height:270px;max-height:none}}
@media(max-width:1280px){.showcase .cards .back{align-self:center;height:auto;aspect-ratio:1.5}.showcase .media .photos .photo:nth-child(n+5){display:none}.showcase .media .photos .mobile-more .more{display:flex!important;position:relative;z-index:1}.showcase .media .photos .mobile-more .back{filter:saturate(0);opacity:.1}.showcase .media .video{height:270px;max-height:none}footer .company{min-width:0}}
@media(max-width:768px){.intro-play-container{bottom:auto!important}.showcase .cards .back{height:243px;aspect-ratio:auto}.showcase .media .video{height:180px}.newsletter-promo__input-wrap{min-width:0}.newsletter-promo__text{line-height:1.2}.olc-gallery{padding:70px 20px 160px}.olc-gallery figure img{max-height:60vh}.gallery-prev{left:0;top:auto;bottom:110px}.gallery-next{right:0;top:auto;bottom:110px}.gallery-thumbnails{bottom:24px;gap:8px}.gallery-thumbnails button{flex-basis:110px;height:64px}footer .nav-link{white-space:normal!important}.intro-back-logo.olc-wordmark{width:82%;top:36%}}
@media(prefers-reduced-motion:reduce){html,body{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Shared public interactions keep feedback immediate without extra dependencies. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.public-site .skip-link{position:fixed;top:12px;left:12px;z-index:5000;background:#e81c5a;color:#fff;padding:14px 20px;border-radius:6px;transform:translateY(-160%)}
.public-site .skip-link:focus{transform:none}
/* ========================================================
   NEW ERA ROLEPLAY - DEFINITIVE HIGH-PRIORITY NAVBAR SYSTEM
   ======================================================== */
header,
header[data-v-49eeea0c] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 clamp(10px, 1.8vw, 24px) !important;
  background: rgba(8, 10, 16, 0.96) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.6) !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Offset body for fixed header */
body.public-site,
body {
  padding-top: 76px !important;
}

header .left,
header .left[data-v-49eeea0c] {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: auto !important;
  flex: 0 0 auto !important;
}

header .left .logo,
header .left a.logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

header .left .logo img,
header .left .ner-wordmark {
  height: 52px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 14px rgba(0, 210, 255, 0.45)) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

header .left .logo:hover img {
  transform: scale(1.02) !important;
  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.75)) !important;
}

/* ========================================================
   NEW ERA ROLEPLAY - ULTRA-COMPACT 4-METRIC TELEMETRY BAR
   Matches user screenshots 4 & 5 - Sleek, space-efficient pill
   ======================================================== */
.ner-micro-status {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(18, 12, 34, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.15) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  gap: 8px !important;
  font-family: inherit !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  user-select: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ner-micro-status:hover {
  border-color: rgba(0, 234, 255, 0.5) !important;
  box-shadow: 0 0 16px rgba(0, 234, 255, 0.25) !important;
}

.ner-micro-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.ner-micro-label {
  color: #a395be !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.6px !important;
}

.ner-micro-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ner-micro-pill.green {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  color: #4ade80 !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25) !important;
}

.ner-micro-pill.purple {
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  color: #c084fc !important;
}

.ner-micro-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

header .left .players {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

header .left .players__value {
  color: #22c55e !important;
  font-weight: 700 !important;
}

/* Nav Item Wrapper (Center) */
header .nav-item-wrapper,
header nav.nav-item-wrapper,
header .nav-item-wrapper[data-v-49eeea0c] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 0.9vw, 14px) !important;
  margin: 0 clamp(4px, 1vw, 14px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Nav Item Links */
header .nav-item,
header nav a.nav-item,
header .nav-item[data-v-962a093a],
.nav-item {
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: clamp(11.5px, 0.85vw, 13px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  padding: 6px clamp(6px, 0.8vw, 10px) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

header .nav-item:hover,
header nav a.nav-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 14px rgba(0, 136, 255, 0.25) !important;
}

header .nav-item.router-link-active,
header .nav-item.router-link-exact-active,
header .nav-item[aria-current="page"],
header .nav-item.active {
  color: #00d2ff !important;
  background: rgba(0, 210, 255, 0.12) !important;
  border: 1px solid rgba(0, 210, 255, 0.3) !important;
}

header .nav-item.mobile-join {
  display: none !important;
}

/* Right Section - Guaranteed Zero Overflow */
header .right,
header .right[data-v-49eeea0c] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(6px, 0.8vw, 10px) !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  padding-right: 2px !important;
}

/* Discord Button */
.discord-nav-btn,
header .discord-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #5865F2 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(11px, 0.85vw, 12.5px) !important;
  letter-spacing: 0.3px !important;
  padding: 7px clamp(8px, 1vw, 14px) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.4) !important;
  transition: all 0.2s ease !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.discord-nav-btn:hover,
header .discord-nav-btn:hover {
  background: #4752c4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6) !important;
  color: #ffffff !important;
}

/* Play Now Button - Guaranteed Fully Visible */
header .login-btn,
header .login-btn._primary,
header .login-btn[data-v-49eeea0c] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #e81c5a 0%, #ff4b72 100%) !important;
  color: #ffffff !important;
  font-size: clamp(11.5px, 0.85vw, 13px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 8px clamp(12px, 1.2vw, 18px) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(232, 28, 90, 0.45) !important;
  transition: all 0.2s ease !important;
  margin-right: 0 !important;
}

header .login-btn:hover,
header .login-btn:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(232, 28, 90, 0.7) !important;
  filter: brightness(1.1) !important;
  color: #ffffff !important;
}

/* Burger Toggle Button */
header .right .burger,
header .burger {
  display: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
}

header .burger .lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  align-items: center !important;
  pointer-events: none !important;
}

header .burger .line {
  width: 20px !important;
  height: 2px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  transition: all 0.2s ease !important;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  header .nav-item-wrapper,
  header nav.nav-item-wrapper,
  header .nav-item-wrapper[data-v-49eeea0c] {
    display: none !important;
  }
  header .right .burger,
  header .burger {
    display: flex !important;
  }
}

@media (max-width: 580px) {
  header .discord-nav-btn span {
    display: none !important;
  }
  header .discord-nav-btn {
    padding: 8px 10px !important;
  }
  header .left .players {
    display: none !important;
  }
}

/* Mobile Menu Overlay */
.Burger.modal,
#mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(6, 8, 14, 0.98) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  backdrop-filter: blur(28px) !important;
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 24px !important;
}

.Burger.modal.is-open,
#mobile-menu.is-open {
  display: flex !important;
}

.Burger .header {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  right: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.Burger .cross {
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
  cursor: pointer !important;
}

.Burger nav.nav-item-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 340px !important;
}

.Burger .nav-item {
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.public-notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2100;
  max-width: 410px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 12px 45px #0008;
  padding: 22px;
  color: white;
  font-size: 14px;
  line-height: 1.6;
}
.public-notice p { margin: 0 0 14px; color: #ccc; }
.public-notice a { color: #e81c5a; }
.public-notice button { background: none; border: 0; color: #aaa; cursor: pointer; padding: 8px 12px; margin-left: 14px; }
.fivem-install { color: #bcbcbc; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; line-height: 1.5; margin-top: 12px; }
.join-logo { width: 64px !important; height: 48px !important; object-fit: cover; }
@media(max-width: 768px) {
  .public-notice { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .Burger .mobile-join { display: block !important; }
  .join-logo { width: 48px !important; }
}
@media(prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ========================================================
   CINEMATIC YOUTUBE VIDEO BACKGROUND
   ======================================================== */
/* ========================================================
   CINEMATIC YOUTUBE VIDEO BACKGROUND & HERO SHOWCASE
   ======================================================== */
.intro {
  position: relative !important;
  overflow: hidden !important;
  min-height: 540px !important;
  height: clamp(580px, 78vh, 690px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 0 !important;
}

.hero-custom-bg-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.hero-custom-bg {
  position: absolute !important;
  inset: -20px !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  filter: brightness(0.92) contrast(1.12) saturate(1.2) !important;
  transform: scale(1.02);
  transition: transform 10s ease-out;
}

.hero-custom-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 45%, rgba(10, 10, 16, 0.2) 0%, rgba(8, 8, 14, 0.72) 75%, rgba(5, 5, 8, 0.98) 100%),
              linear-gradient(180deg, rgba(8, 8, 14, 0.5) 0%, rgba(8, 8, 14, 0.15) 40%, rgba(5, 5, 8, 0.96) 100%) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
}

.intro-back {
  display: none !important;
}

.intro-back-logo {
  display: none !important;
}

/* Horizontal & Vertical Centering of 7 Roleplay Cards on Desktop (Properly moved UP) */
@media (min-width: 1201px) {
  .intro-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1680px, calc(100vw - 48px)) !important;
    max-width: 1680px !important;
    height: clamp(480px, 66vh, 540px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    right: auto !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }

  .intro-container .card {
    height: 100% !important;
    border-radius: 16px !important;
  }

  .intro-container .card .human {
    max-height: 82% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}

/* Official Logo Styling on Cards */
.card-featured-logo-wrap {
  position: absolute !important;
  top: 26px !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
  padding: 0 10px !important;
}

.card-featured-logo {
  width: 90% !important;
  max-width: 175px !important;
  height: auto !important;
  max-height: 85px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 16px rgba(0, 234, 255, 0.8)) drop-shadow(0 0 32px rgba(237, 98, 191, 0.7)) !important;
  animation: logoPulse 3s ease-in-out infinite alternate !important;
}

@keyframes logoPulse {
  0% { transform: scale(0.97); filter: drop-shadow(0 0 12px rgba(0, 234, 255, 0.6)) drop-shadow(0 0 24px rgba(237, 98, 191, 0.5)); }
  100% { transform: scale(1.03); filter: drop-shadow(0 0 18px rgba(0, 234, 255, 0.95)) drop-shadow(0 0 38px rgba(237, 98, 191, 0.85)); }
}

.card-brand-badge {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 72% !important;
  max-width: 120px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 0.65 !important;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease !important;
}

.card-brand-badge img {
  width: 100% !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
}

.intro-container .card:hover .card-brand-badge {
  opacity: 1 !important;
  filter: drop-shadow(0 0 14px rgba(0, 234, 255, 0.9)) !important;
  transform: translateX(-50%) scale(1.08) !important;
}

.intro-back-logo,
.intro-play-container {
  position: relative !important;
  z-index: 2 !important;
}

/* ========================================================
   NEW ERA ROLEPLAY - OFFICIAL COMMUNITY FOOTER
   ======================================================== */
footer.ner-official-footer {
  background: #05070c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 64px 24px 32px !important;
  position: relative !important;
  color: #c5d1e0 !important;
  font-family: inherit !important;
  width: 100% !important;
  margin-top: 80px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

footer.ner-official-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: radial-gradient(ellipse at center, #00d2ff 0%, #e81c5a 50%, transparent 80%);
  opacity: 0.85;
}

.ner-footer-container {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.ner-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr 1.1fr 1.2fr;
  gap: 48px;
  margin-bottom: 48px;
}

.ner-footer-brand .brand-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.ner-footer-brand .brand-logo-img {
  width: auto !important;
  height: 64px !important;
  max-width: 280px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 18px rgba(0, 234, 255, 0.55)) !important;
}

.ner-footer-brand .brand-title {
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.15;
}

.ner-footer-brand .brand-sub {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #00d2ff;
  letter-spacing: 2px;
}

.ner-footer-brand p {
  color: #8fa0b5;
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 0 20px 0;
}

.ner-footer-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ner-btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ner-btn-glass:hover {
  background: rgba(0, 210, 255, 0.16);
  border-color: #00d2ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.35);
}

.ner-btn-glass.discord-bg {
  background: #5865F2;
  border-color: #5865F2;
}

.ner-btn-glass.discord-bg:hover {
  background: #4752c4;
}

.ner-footer-col h4 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}

.ner-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ner-footer-links a,
.ner-footer-links button {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: #8fa0b5;
  text-decoration: none;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ner-footer-links a:hover,
.ner-footer-links button:hover {
  color: #00d2ff;
  transform: translateX(4px);
}

.ner-footer-links a.staff-link-highlight,
.ner-footer-links button.staff-link-highlight {
  color: #f59e0b;
  font-weight: 700;
}

.ner-footer-links a.staff-link-highlight:hover,
.ner-footer-links button.staff-link-highlight:hover {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.ner-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #64748b;
}

.ner-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ner-footer-bottom a,
.ner-footer-bottom button {
  color: #64748b;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.ner-footer-bottom a:hover,
.ner-footer-bottom button:hover {
  color: #00d2ff;
}

@media (max-width: 992px) {
  .ner-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .ner-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ner-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}