/* EU Ruins header and menu: the one place that styles the header bar, the
 * logo inside it, the menu links, the Shop / Play / Community dropdowns and
 * the phone Menu panel. Pages no longer carry their own header CSS.
 *
 * Sections keep the order they had in the files they came from, so the
 * cascade resolves as before. Loaded right after site-shell.css.
 */

/* ===== from site-nav.css ===== */
.header,
header.header {
  overflow: visible;
  min-height: 70px;
  background: rgba(10, 5, 7, 0.98);
  border-bottom: 1px solid rgba(255, 51, 102, 0.22);
  color: #fff;
  z-index: 1000;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 70px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
.header-container,
.hc {
  min-width: 0;
  overflow: visible;
}
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  min-width: 0;
  justify-content: space-evenly;
  overflow-x: auto;
  overflow-y: visible;
  /* Was scrollbar-width:none with the webkit scrollbar hidden below too -
  with 12 rustTabs now (was ~9 before Outpost Games/Clan were added),
  the bar overflows on real screen widths and the last item(s) - Servers,
  confirmed reported missing - scrolled out with zero visual hint that
  more existed. A thin, themed scrollbar instead of a hidden one, so the
  overflow is at least discoverable without guessing at exact widths. */
  scrollbar-width: thin;
  scrollbar-color: var(--eu-rust-orange) transparent;
}
html[data-game="isle"] .nav,
body[data-game="isle"] .nav {
  scrollbar-color: var(--eu-isle-cyan) transparent;
}
.nav + .site-profile-chip {
  flex: 0 0 auto;
}
html[data-game="isle"] .nav .site-nav-link,
html[data-game="isle"] .nav .nav-link,
body[data-game="isle"] .nav .site-nav-link,
body[data-game="isle"] .nav .nav-link {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 11px;
}
@media (max-width: 1180px) {
  .nav {
    justify-content: flex-start;
  }
}
.nav::-webkit-scrollbar {
  height: 4px;
}
.nav::-webkit-scrollbar-track {
  background: transparent;
}
.nav::-webkit-scrollbar-thumb {
  background: var(--eu-rust-orange);
  border-radius: 2px;
}
html[data-game="isle"] .nav::-webkit-scrollbar-thumb,
body[data-game="isle"] .nav::-webkit-scrollbar-thumb {
  background: var(--eu-isle-cyan);
}
.nav .site-nav-link,
.nav .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 36px;
  /* Was 9px 12px / 12px font - fine at the ~9 items Rust used to have, but
  rustTabs is now 12 (Outpost Games and Clan both added this session).
  Matches Isle's already-proven-fine 11px/8px treatment below instead of
  inventing new numbers, so this needs less scrolling to begin with -
  the themed scrollbar above is the fallback for whatever still overflows,
  not the primary fix. */
  padding: 9px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #c9a0b0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav .site-nav-link:visited,
.nav .nav-link:visited {
  color: #c9a0b0;
}
.nav .site-nav-link:hover,
.nav .nav-link:hover {
  color: #fff;
  background: rgba(255, 51, 102, 0.08);
  border-color: rgba(255, 51, 102, 0.24);
  text-decoration: none;
}
.nav .site-nav-link.active,
.nav .nav-link.active {
  color: var(--eu-rust-pink);
  background: rgba(255, 51, 102, 0.12);
  border-color: rgba(255, 51, 102, 0.35);
  text-decoration: none;
}
.nav .nav-link.discord,
.nav .site-nav-link.discord {
  color: #fff;
  background: #5865f2;
  border-color: rgba(255, 255, 255, 0.1);
}
.nav .nav-link.admin-link,
.nav .site-nav-link.admin-link {
  color: var(--eu-rust-pink);
  background: rgba(255, 51, 102, 0.14);
  border-color: rgba(255, 51, 102, 0.3);
}
.site-nav-link {
  border-radius: 6px;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, background 160ms ease;
}
.site-nav-link:hover,
.site-nav-link.active {
  border-color: var(--eu-rust-pink);
  box-shadow: 0 0 18px rgba(255, 51, 102, 0.22);
}
.isle-theme .site-nav-link:hover,
.isle-theme .site-nav-link.active,
html[data-game="isle"] .site-nav-link:hover,
html[data-game="isle"] .site-nav-link.active,
body[data-game="isle"] .site-nav-link:hover,
body[data-game="isle"] .site-nav-link.active {
  border-color: var(--eu-isle-cyan);
  box-shadow: 0 0 18px rgba(17, 217, 242, 0.22);
}
.isle-theme .nav .site-nav-link,
.isle-theme .nav .nav-link,
html[data-game="isle"] .nav .site-nav-link,
html[data-game="isle"] .nav .nav-link,
body[data-game="isle"] .nav .site-nav-link,
body[data-game="isle"] .nav .nav-link,
.isle-theme .nav .site-nav-link:visited,
.isle-theme .nav .nav-link:visited,
html[data-game="isle"] .nav .site-nav-link:visited,
html[data-game="isle"] .nav .nav-link:visited,
body[data-game="isle"] .nav .site-nav-link:visited,
body[data-game="isle"] .nav .nav-link:visited {
  color: #a9d5df;
}
.isle-theme .nav .site-nav-link:hover,
.isle-theme .nav .nav-link:hover,
html[data-game="isle"] .nav .site-nav-link:hover,
html[data-game="isle"] .nav .nav-link:hover,
body[data-game="isle"] .nav .site-nav-link:hover,
body[data-game="isle"] .nav .nav-link:hover {
  color: #ffffff;
  background: rgba(17, 217, 242, 0.08);
  border-color: rgba(17, 217, 242, 0.24);
}
.isle-theme .nav .site-nav-link.active,
.isle-theme .nav .nav-link.active,
html[data-game="isle"] .nav .site-nav-link.active,
html[data-game="isle"] .nav .nav-link.active,
body[data-game="isle"] .nav .site-nav-link.active,
body[data-game="isle"] .nav .nav-link.active {
  color: var(--eu-isle-cyan);
  background: rgba(17, 217, 242, 0.12);
  border-color: rgba(17, 217, 242, 0.35);
}
@media (max-width: 760px) {
  .header-container {
    padding: 0 12px;
    gap: 10px;
  }
}
@media (max-width: 760px) {
  .nav .site-nav-link,
  .nav .nav-link {
    min-height: 34px;
    padding: 8px 9px;
    font-size: 10px;
  }
}

/* ===== from isle-themes.css ===== */
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .header,
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) header.header {
  background:var(--hdr)!important;
  border-bottom-color:var(--bdr)!important;
}
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .site-nav-link,
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .nav-link,
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .site-nav-link:visited,
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .nav-link:visited {
  color:var(--txt2)!important;
}
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .site-nav-link:hover,
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .nav-link:hover {
  color:var(--txt)!important;
  background:color-mix(in srgb,var(--isle-accent) 9%,transparent)!important;
  border-color:color-mix(in srgb,var(--isle-accent) 30%,transparent)!important;
}
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .site-nav-link.active,
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) .nav .nav-link.active {
  color:var(--isle-accent)!important;
  background:color-mix(in srgb,var(--isle-accent) 13%,transparent)!important;
  border-color:color-mix(in srgb,var(--isle-accent) 42%,transparent)!important;
  box-shadow:0 0 18px color-mix(in srgb,var(--isle-accent) 22%,transparent)!important;
}

/* ===== from isle-polish.css ===== */
html[data-game="isle"] :is(.site-nav-link,.nav-link,.nl).active {
  color:var(--ip-accent)!important;
  border-color:color-mix(in srgb,var(--ip-accent) 42%,transparent)!important;
  background:color-mix(in srgb,var(--ip-accent) 13%,transparent)!important;
  box-shadow:0 0 22px var(--ip-soft)!important;
}
html[data-game="isle"] .nav-link.admin-link {
  color:var(--ip-accent)!important;
  border-color:color-mix(in srgb,var(--ip-accent) 38%,transparent)!important;
  background:color-mix(in srgb,var(--ip-accent) 12%,transparent)!important;
  box-shadow:0 0 20px var(--ip-soft)!important;
}

/* ===== from site-shell.css ===== */
.header,
header.header {
  height: auto !important;
  min-height: var(--eu-shell-header) !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(8, 6, 16, .97), rgba(7, 6, 15, .92)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--eu-shell-accent) 30%, transparent) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .34), inset 0 -1px 0 rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  isolation: isolate;
}
.header::after,
header.header::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--eu-shell-gutter);
  right: var(--eu-shell-gutter);
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eu-shell-accent), var(--eu-shell-accent-2), transparent);
  opacity: .72;
  pointer-events: none;
}
.header-container,
.hc {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(12px, .85vw, 28px) !important;
  width: 100% !important;
  max-width: var(--eu-shell-max) !important;
  min-width: 0 !important;
  min-height: var(--eu-shell-header) !important;
  height: auto !important;
  margin-inline: auto !important;
  padding-inline: var(--eu-shell-gutter) !important;
  overflow: visible !important;
}
.header .logo,
.header .logo-text,
header.header .logo,
header.header .logo-text {
  flex: 0 0 auto !important;
  max-width: none !important;
  overflow: visible !important;
  color: var(--eu-shell-text) !important;
  font-size: clamp(23px, 1.25vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: clamp(.08em, .11vw, .16em) !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.header .logo,
header.header .logo {
  white-space: pre !important;
}
.header .logo .logo-text,
header.header .logo .logo-text {
  white-space: nowrap !important; color: var(--eu-shell-text) !important; text-shadow: none;
}
.header .logo span,
.header .logo-text span {
  color: var(--eu-shell-accent) !important;
  text-shadow: 0 0 22px var(--eu-shell-glow);
}
.header .nav,
header.header .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: clamp(1px, .18vw, 7px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}
.header .nav::-webkit-scrollbar,
header.header .nav::-webkit-scrollbar {
  display: none !important;
}
.header .nav .site-nav-link,
.header .nav .nav-link,
.header .nav .nl,
header.header .nav .site-nav-link,
header.header .nav .nav-link,
header.header .nav .nl {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: clamp(38px, 2.1vw, 54px) !important;
  max-width: none !important;
  padding: clamp(8px, .52vw, 14px) clamp(7px, .52vw, 16px) !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: var(--eu-shell-radius) !important;
  color: var(--eu-shell-text-2) !important;
  background: transparent !important;
  font-size: clamp(10px, .49vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-decoration: none !important;
  text-overflow: clip !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: color .2s var(--eu-shell-ease), border-color .2s var(--eu-shell-ease), background .2s var(--eu-shell-ease), box-shadow .2s var(--eu-shell-ease), transform .2s var(--eu-shell-ease) !important;
}
.header .nav .site-nav-link::before,
.header .nav .nav-link::before,
.header .nav .nl::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eu-shell-accent), var(--eu-shell-accent-2));
  opacity: 0;
  transform: scaleX(.25);
  transition: opacity .2s var(--eu-shell-ease), transform .24s var(--eu-shell-ease);
  pointer-events: none;
}
.header .nav .site-nav-link:hover,
.header .nav .nav-link:hover,
.header .nav .nl:hover {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--eu-shell-accent) 28%, transparent) !important;
  background: color-mix(in srgb, var(--eu-shell-accent) 8%, transparent) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2), inset 0 0 18px color-mix(in srgb, var(--eu-shell-accent) 5%, transparent) !important;
  transform: translateY(-1px);
}
.header .nav .site-nav-link.active,
.header .nav .nav-link.active,
.header .nav .nl.active {
  color: var(--eu-shell-active-text) !important;
  border-color: rgba(var(--eu-shell-tint), .34) !important;
  background: linear-gradient(150deg, rgba(var(--eu-shell-tint), .16), rgba(var(--eu-shell-tint-deep), .16)) !important;
  box-shadow: inset 0 0 24px rgba(var(--eu-shell-tint), .08), 0 0 20px rgba(var(--eu-shell-tint), .08) !important;
}
.header .nav .site-nav-link:hover::before,
.header .nav .nav-link:hover::before,
.header .nav .nl:hover::before,
.header .nav .site-nav-link.active::before,
.header .nav .nav-link.active::before,
.header .nav .nl.active::before {
  opacity: 1;
  transform: scaleX(1);
}
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(var(--eu-shell-tint), .36);
  border-radius: 9px;
  color: var(--eu-shell-soft-text);
  background: rgba(var(--eu-shell-tint), .12);
  font: 800 11px/1 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.header .nav-toggle,
header.header .nav-toggle {
  display: none !important;
}
@media (max-width: 1500px) {
  .header .logo,
  .header .logo-text {
    font-size: clamp(20px, 1.7vw, 27px) !important;
  }
}
@media (max-width: 1500px) {
  .header .nav .site-nav-link,
  .header .nav .nav-link,
  .header .nav .nl {
    padding-inline: clamp(5px, .42vw, 9px) !important; font-size: clamp(9px, .72vw, 11px) !important;
  }
}
@media (max-width: 1180px) {
  .header-container,
  .hc {
    gap: 9px !important;
  }
}
@media (max-width: 1180px) {
  .site-nav-toggle {
    display: inline-flex; margin-left: auto;
  }
}
@media (max-width: 1180px) {
  .header .nav,
  header.header .nav {
    position: absolute !important;
    z-index: 12500 !important;
    top: calc(100% + 8px) !important;
    left: var(--eu-shell-gutter) !important;
    right: var(--eu-shell-gutter) !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: min(68vh, 620px) !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(var(--eu-shell-tint), .34) !important;
    border-radius: 13px !important;
    background: rgba(var(--eu-shell-panel), .985) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .58), inset 0 0 28px rgba(var(--eu-shell-tint), .045) !important;
    backdrop-filter: blur(20px) !important;
  }
}
@media (max-width: 1180px) {
  .header .nav.is-open,
  header.header .nav.is-open {
    display: grid !important; animation: euNavReveal .2s var(--eu-shell-ease) both;
  }
}
@media (max-width: 1180px) {
  .header .nav .site-nav-link,
  .header .nav .nav-link,
  .header .nav .nl {
    width: 100% !important;
    min-height: 43px !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 620px) {
  .header .logo,
  .header .logo-text {
    font-size: 18px !important; letter-spacing: .08em !important;
  }
}
@media (max-width: 620px) {
  .site-nav-toggle {
    min-width: 42px; padding-inline: 9px; font-size: 10px;
  }
}
@media (max-width: 620px) {
  .header .nav,
  header.header .nav {
    grid-template-columns: 1fr !important;
  }
}
.header .nav .site-nav-group {
  position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0;
}
.header .nav .site-nav-group-btn {
  font-family: inherit !important; cursor: pointer; gap: 5px;
}
.header .nav .site-nav-group-btn::after {
  content: "";
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .2s var(--eu-shell-ease);
}
.header .nav .site-nav-group.is-open .site-nav-group-btn::after {
  transform: translateY(3px) rotate(-135deg);
}
.header .nav .site-nav-menu {
  position: absolute;
  z-index: 12600;
  top: calc(100% + 6px);
  left: 50%;
  display: none;
  flex-direction: column;
  gap: 3px;
  min-width: 190px;
  padding: 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(var(--eu-shell-tint), .34);
  border-radius: 12px;
  background: rgba(var(--eu-shell-panel), .985);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55), inset 0 0 24px rgba(var(--eu-shell-tint), .045);
  backdrop-filter: blur(18px);
}
.header .nav .site-nav-menu::after {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.header .nav .site-nav-group.is-open .site-nav-menu {
  display: flex; animation: euNavReveal .16s var(--eu-shell-ease) both;
}
@media (hover: hover) and (min-width: 1181px) {
  .header .nav .site-nav-group:hover .site-nav-menu {
    display: flex;
  }
}
.header .nav .site-nav-menu .site-nav-link,
.header .nav .site-nav-menu .nav-link {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
}
@media (max-width: 1180px) {
  .header .nav .site-nav-group {
    display: block; grid-column: 1 / -1;
  }
}
@media (max-width: 1180px) {
  .header .nav .site-nav-group-btn,
  header.header .nav .site-nav-group-btn {
    display: none !important;
  }
}
@media (max-width: 1180px) {
  .header .nav .site-nav-link,
  header.header .nav .site-nav-link,
  header.header .nav .nav-link {
    justify-content: flex-start !important;
  }
}
@media (max-width: 1180px) {
  .header .nav .site-nav-menu,
  .header .nav .site-nav-group.is-open .site-nav-menu {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
    padding: 0;
    transform: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
  }
}
@media (max-width: 1180px) {
  .header .nav .site-nav-menu::after {
    content: none;
  }
}
@media (max-width: 1180px) {
  .header .nav .site-nav-menu::before {
    content: attr(data-label);
    grid-column: 1 / -1;
    padding: 8px 4px 0;
    color: var(--eu-shell-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}
@media (max-width: 620px) {
  .header .nav,
  header.header .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px) {
  .header .nav .site-nav-menu {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== page-specific header differences (kept as they were) ===== */
/* Header placement. Every page used to set this in its own <style>; nearly
   all pinned the header to the top of the window, so that is the default.
   (Pages using rust-pages.css get the same from that file.) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
/* These pages scroll the header away with the page. relative (not static)
   keeps the header's z-index working, so the phone Menu panel and the
   dropdowns are drawn above the page content instead of under it. */
html[data-page="contracts"] .header,
html[data-page="isle-events"] .header {
  position: relative;
}
/* These pages keep the header stuck to the top while their content scrolls. */
html[data-page="isle-dino-shop"] .header,
html[data-page="isle-marketplace"] .header,
html[data-page="rust-skins"] .header {
  position: sticky;
  left: auto;
  right: auto;
}

/* Isle responsive navigation: three intentional destination groups instead of
   one oversized list with empty columns. */
@media (max-width: 1180px) {
  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav,
  :is(html[data-game="isle"], body[data-game="isle"]) header.header .nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: min(76vh, 690px) !important;
    padding: 14px !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 85% 15%, rgba(var(--eu-shell-tint), .11), transparent 20rem),
      rgba(var(--eu-shell-panel), .99) !important;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav > .site-nav-link {
    min-height: 54px !important;
    border: 1px solid rgba(var(--eu-shell-tint), .18) !important;
    border-radius: 11px !important;
    background: rgba(var(--eu-shell-tint), .055) !important;
    font-size: 12px !important;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav > .site-nav-link:hover,
  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav > .site-nav-link.active {
    border-color: rgba(var(--eu-shell-tint), .42) !important;
    background: rgba(var(--eu-shell-tint), .12) !important;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-group {
    grid-column: auto;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(var(--eu-shell-tint), .16);
    border-radius: 12px;
    background: rgba(1, 10, 16, .42);
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-menu,
  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-group.is-open .site-nav-menu {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-menu::before {
    padding: 1px 5px 8px;
    font-size: 11px;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-menu .site-nav-link {
    min-height: 38px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
    color: rgba(229, 243, 248, .78) !important;
    font-size: 11px !important;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-menu .site-nav-link:hover,
  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-menu .site-nav-link.active {
    color: #fff !important;
    background: rgba(var(--eu-shell-tint), .1) !important;
  }
}

@media (max-width: 620px) {
  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav,
  :is(html[data-game="isle"], body[data-game="isle"]) header.header .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-group {
    grid-column: 1 / -1;
    padding: 9px;
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-menu,
  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav .site-nav-group.is-open .site-nav-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(html[data-game="isle"], body[data-game="isle"]) .header .nav > .site-nav-link {
    min-height: 46px !important;
  }
}