.l2gold-two-server-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:767px){.l2gold-two-server-grid{grid-template-columns:1fr!important}}

nav a[href*="download_now"],
nav a[href*="l2acm.com/login.php"] {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 8px 16px;
  gap: 8px;
  border-radius: .375rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

nav a[href*="download_now"] {
  background: transparent;
  color: #fff;
}

nav a[href*="download_now"]:hover,
nav a[href*="download_now"]:focus-visible {
  background: #ff8918 !important;
  color: #000 !important;
  outline: none;
}

nav a[href*="download_now"]:hover svg,
nav a[href*="download_now"]:focus-visible svg {
  color: #000 !important;
}

nav a[href*="l2acm.com/login.php"] {
  padding-right: 24px;
  padding-left: 24px;
  background: var(--primary);
  color: var(--primary-foreground);
}

nav a[href*="l2acm.com/login.php"]:hover,
nav a[href*="l2acm.com/login.php"]:focus-visible {
  background: color-mix(in oklab, var(--primary) 85%, transparent) !important;
  color: var(--primary-foreground) !important;
  box-shadow: 0 10px 15px -3px color-mix(in oklab, var(--primary) 30%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--primary) 30%, transparent);
  outline: none;
}

body.l2gold-popup-open{overflow:hidden}
.legal-header a[href*="download_now"]{gap:.5rem;background:transparent;color:#fff;transition:background-color .3s ease,color .3s ease}
.legal-header a[href*="download_now"]:hover,.legal-header a[href*="download_now"]:focus-visible{background:#ff8918!important;color:#000!important;outline:none}
.legal-header a[href*="download_now"]:hover svg{color:#000}
.l2gold-update-popup{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:1.25rem;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.l2gold-update-popup.is-open{visibility:visible;opacity:1;pointer-events:auto}
.l2gold-update-popup__backdrop{position:absolute;inset:0;background:rgba(3,4,8,.78);backdrop-filter:blur(8px)}
.l2gold-update-popup__dialog{position:relative;width:min(100%,34rem);padding:2.4rem 2rem 1.8rem;border:1px solid rgba(250,204,21,.42);border-radius:1.1rem;background:radial-gradient(circle at 50% 0%,rgba(250,204,21,.13),transparent 42%),linear-gradient(145deg,rgba(22,23,31,.98),rgba(8,9,14,.98));box-shadow:0 1.5rem 5rem rgba(0,0,0,.55),0 0 2.5rem rgba(250,204,21,.1);text-align:center;transform:translateY(12px) scale(.98);transition:transform .25s ease}
.l2gold-update-popup.is-open .l2gold-update-popup__dialog{transform:translateY(0) scale(1)}
.l2gold-update-popup__close{position:absolute;top:.65rem;right:.75rem;width:2rem;height:2rem;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.55);font-size:1.5rem;line-height:1;cursor:pointer;transition:color .2s ease,background .2s ease}
.l2gold-update-popup__close:hover,.l2gold-update-popup__close:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
.l2gold-update-popup__icon{display:grid;place-items:center;width:4.25rem;height:4.25rem;margin:0 auto 1.25rem;border:1px solid rgba(250,204,21,.5);border-radius:50%;background:rgba(250,204,21,.1);color:#facc15;box-shadow:0 0 1.8rem rgba(250,204,21,.15)}
.l2gold-update-popup__icon span{font-size:2.2rem;line-height:1;animation:l2gold-update-spin 3s linear infinite}
.l2gold-update-popup__eyebrow{margin:0 0 .5rem;color:#facc15;font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.l2gold-update-popup__dialog h2{margin:0;color:#f8fafc;font-size:clamp(1.35rem,3vw,1.8rem);font-weight:700;letter-spacing:.02em}
.l2gold-update-popup__dialog p:not(.l2gold-update-popup__eyebrow):not(.l2gold-update-popup__note){margin:1rem auto 0;max-width:28rem;color:rgba(226,232,240,.78);font-size:.95rem;line-height:1.7}
.l2gold-update-popup__note{margin:.9rem 0 1.5rem;color:rgba(250,204,21,.78);font-size:.8rem;letter-spacing:.04em}
.l2gold-update-popup__button{min-width:8rem;padding:.7rem 1.25rem;border:1px solid rgba(250,204,21,.55);border-radius:.55rem;background:#facc15;color:#17130a;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.l2gold-update-popup__button:hover,.l2gold-update-popup__button:focus-visible{background:#fde047;box-shadow:0 0 .9rem rgba(250,204,21,.28);outline:none;transform:translateY(-1px)}
@keyframes l2gold-update-spin{to{transform:rotate(360deg)}}
@media (max-width:480px){.l2gold-update-popup{padding:.9rem}.l2gold-update-popup__dialog{padding:2.2rem 1.25rem 1.5rem}.l2gold-update-popup__dialog p:not(.l2gold-update-popup__eyebrow):not(.l2gold-update-popup__note){font-size:.88rem}}
nav img[alt="L2GOLD.CO"] {
  width: auto;
  height: 50px;
  max-width: none !important;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.l2gold-server-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  margin-top: .35rem;
}

.l2gold-server-link {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--primary));
  border-radius: .35rem;
  color: var(--muted-foreground);
  display: inline-flex;
  font-size: .68rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  min-height: 1.9rem;
  padding: .3rem .45rem;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.l2gold-server-link:hover,
.l2gold-server-link:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
  color: var(--primary);
  outline: none;
}

@media (max-width: 1023px) {
  nav img[alt="L2GOLD.CO"] {
    width: 48px;
    height: 48px;
  }
}

/* The homepage cards also contain the four server navigation links. */
#servers-section {
  justify-content: flex-start !important;
  padding-top: clamp(5.5rem, 10vh, 7.5rem) !important;
}

#servers-section > div.relative.z-10 {
  transform: translateY(-1.25rem);
}

#servers-section .l2gold-two-server-grid .flip-card {
  height: 600px !important;
}

#servers-section .l2gold-two-server-grid .flip-card-inner,
#servers-section .l2gold-two-server-grid .flip-card-front,
#servers-section .l2gold-two-server-grid .flip-card-back {
  height: 100% !important;
}

#servers-section [data-l2gold-status="open-beta"] {
  color: #4ade80 !important;
  font-weight: 700;
}

#servers-section [data-l2gold-status="alpha-1"] {
  color: #facc15 !important;
  font-weight: 700;
}

@media (min-width: 1024px) {
#servers-section .l2gold-two-server-grid .flip-card {
    height: 620px !important;
  }
}

@media (max-width: 767px) {
  #servers-section {
    padding-top: 5.25rem !important;
  }

  #servers-section > div.relative.z-10 {
    transform: translateY(-.5rem);
  }

  #servers-section .l2gold-two-server-grid .flip-card {
    height: 590px !important;
  }
}

/* New-design navigation: a subtle dark glass bar shared by every page
   outside OLDWEB, with the orange brand accent kept easy to spot. */
#promo-root nav.fixed.top-0,
body.legal-page .legal-header > nav {
  background:
    linear-gradient(180deg, rgba(4, 7, 13, .94), rgba(7, 10, 17, .82)) !important;
  border-bottom: 1px solid rgba(245, 158, 11, .22);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .04) inset;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

#promo-root nav.fixed.top-0 > div:first-child,
body.legal-page .legal-header > nav > div:first-child {
  position: relative;
}

#promo-root nav.fixed.top-0 > div:first-child::after,
body.legal-page .legal-header > nav > div:first-child::after {
  position: absolute;
  right: 1rem;
  bottom: -1px;
  left: 1rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, .62), transparent);
  opacity: .6;
  pointer-events: none;
}

#promo-root nav.fixed.top-0 a[href*="download.php"],
body.legal-page .legal-header a[data-l2gold-i18n="nav.download"] {
  box-sizing: border-box;
  min-height: 36px;
  padding: .5rem 1rem !important;
  gap: .5rem !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .045) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 .75rem rgba(0, 0, 0, .12) inset;
}

#promo-root nav.fixed.top-0 a[href*="download.php"]:hover,
#promo-root nav.fixed.top-0 a[href*="download.php"]:focus-visible,
body.legal-page .legal-header a[data-l2gold-i18n="nav.download"]:hover,
body.legal-page .legal-header a[data-l2gold-i18n="nav.download"]:focus-visible {
  border-color: rgba(245, 158, 11, .68);
  background: rgba(245, 158, 11, .16) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .08);
  outline: none;
}

#promo-root nav.fixed.top-0 a[href*="login.php"],
body.legal-page .legal-header a[data-l2gold-i18n="nav.login"] {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid rgba(251, 191, 36, .52);
  border-radius: .65rem;
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #1c1305 !important;
  box-shadow: 0 .45rem 1.1rem rgba(245, 158, 11, .2);
  font-weight: 700;
}

#promo-root nav.fixed.top-0 a[href*="login.php"]:hover,
#promo-root nav.fixed.top-0 a[href*="login.php"]:focus-visible,
body.legal-page .legal-header a[data-l2gold-i18n="nav.login"]:hover,
body.legal-page .legal-header a[data-l2gold-i18n="nav.login"]:focus-visible {
  border-color: #fcd34d;
  background: linear-gradient(135deg, #fbbf24, #fb923c) !important;
  color: #1c1305 !important;
  box-shadow: 0 .65rem 1.4rem rgba(245, 158, 11, .3);
  outline: none;
  transform: translateY(-1px);
}

#promo-root nav.fixed.top-0 button,
body.legal-page .legal-header > nav button {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .045);
}

#promo-root nav.fixed.top-0 button:hover,
#promo-root nav.fixed.top-0 button:focus-visible,
body.legal-page .legal-header > nav button:hover,
body.legal-page .legal-header > nav button:focus-visible {
  border-color: rgba(245, 158, 11, .42);
  background: rgba(245, 158, 11, .12) !important;
  color: #fbbf24 !important;
  outline: none;
}

@media (max-width: 1023px) {
  #promo-root nav.fixed.top-0,
  body.legal-page .legal-header > nav {
    background: rgba(4, 7, 13, .95) !important;
  }

  #promo-root nav.fixed.top-0 > div:first-child::after,
  body.legal-page .legal-header > nav > div:first-child::after {
    right: .75rem;
    left: .75rem;
  }
}