/* Default flat navigation, using the existing option D/E styles. */
html:not([data-nav="old"]) #nav, html:not([data-nav="old"]) #nav-toggle { display: none !important; }
html[data-nav="old"] .fl-row, html[data-nav="a"] .fl-row, html[data-nav="b"] .fl-row, html[data-nav="c"] .fl-row { display: none; }
/* ---------------------------------------------------------------- D and E: the flat menus (js/navflat.js)
   The header is today's, untouched, minus the dropdown bar and its ☰; its header-fitting script still runs (labels, search
   width, the account's initial). Under it, one row of plain words that use today's menu links' own look (.nav-top in
   style.css: Inter 550, #c3c8d4, white on --panel-2 when hovered or current). No serif, no small caps, no icons, no arrows,
   nothing that opens. The header's shadow and gold-tinted rule move to the bottom of the row, so the two read as one header. */
html[data-nav="d"] .topbar, html[data-nav="e"] .topbar { box-shadow: none; border-bottom-color: var(--line); }
/* without the old menu, the search box takes the room it had at any width (as today's header does once the menu is a ☰) */
html:not([data-nav="old"]) .topbar.fl-bar .global-search { width: auto; flex: 1 1 0; min-width: 0; max-width: 720px; }
/* the language link stays on the bar at every width (there is no ☰ to move it into): just the other language when narrow */
html:not([data-nav="old"]) .topbar.fl-bar.hdr-micro > .lang-switch { display: flex; }
.fl-row {
  position: sticky; top: var(--fl-top, 57px); z-index: 999;
  background: rgba(9, 14, 30, .97); border-bottom: 1px solid rgba(240, 195, 90, .16); box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.fl-scroll { display: flex; align-items: center; gap: 2px; padding: 10px 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.fl-scroll::-webkit-scrollbar { display: none; }
.fl-w.nav-top { position: relative; flex: none; padding: 6px 10px; }
.fl-w.fl-teal { color: var(--teal); }
.fl-w.fl-teal:hover, .fl-w.fl-teal.active { color: var(--teal); }
.fl-dot { position: absolute; top: 5px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); pointer-events: none; }
.fl-row::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(9, 14, 30, 0), rgba(9, 14, 30, .97)); transition: opacity .15s; }
.fl-row.fl-more::after { opacity: 1; }
@media (max-width: 719px) {
  .fl-row { position: relative; top: auto; }   /* a phone: only the top bar stays on screen */
  .fl-scroll { padding: 3px 6px; }
  .fl-w.nav-top { padding: 6px 9px; }
  html:not([data-nav="old"]) .topbar.fl-bar > .nav-discord { display: none; }   /* Discord, CurseForge and Wago: on /addons, /all-pages and the footer */
}
/* ---------------------------------------------------------------- 8 Oct 2026 (owner): icons on the words, the row centred,
   each word's pages on hover (js/navflat.js), and a big search box in the middle of the bar on a wide screen */
.fl-scroll > .fl-w:first-child { margin-left: auto; }   /* centred, and still scrolls from its first word when it doesn't fit */
.fl-scroll > .fl-w:last-child { margin-right: auto; }
.fl-w.nav-top { display: inline-flex; align-items: center; gap: 7px; }
.fl-w .nav-ic { width: 20px; height: 20px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.fl-w.open { color: #fff; background: var(--panel-2); }
.fl-menu { position: fixed; z-index: 1001; display: grid; grid-template-columns: repeat(var(--fl-cols, 1), minmax(230px, 280px)); gap: 2px;
  padding: 8px; border: 1px solid rgba(240, 195, 90, .22); border-radius: 10px; background: #0e1526; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.fl-menu[hidden] { display: none; }
.fl-mi { display: flex; align-items: flex-start; gap: 10px; padding: 7px 9px; border-radius: 7px; color: var(--text); text-decoration: none; min-width: 0; }
.fl-mi:hover, .fl-mi:focus-visible { background: var(--panel-2); color: #fff; }
.fl-mi .nav-ic, .fl-noic { width: 26px; height: 26px; flex: none; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.fl-noic { background: var(--panel-2); }
.fl-mi span { display: grid; min-width: 0; }
.fl-mi b { font-weight: 600; font-size: 14px; }
.fl-mi small { color: var(--muted); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  /* the search box itself, big and in the middle of the bar (the compact Search button and its overlay are for narrow screens) */
  html:not([data-nav="old"]) .topbar.fl-bar .search-open { display: none; }
  html:not([data-nav="old"]) .topbar.fl-bar .global-search { display: block; flex: 1 1 auto; max-width: 760px; margin: 0 auto; }
  html:not([data-nav="old"]) .topbar.fl-bar .global-search input { height: 40px; font-size: 15px; padding-left: 38px;
    background: rgba(14, 20, 38, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%238a93a8' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%238a93a8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 12px 50% / 17px no-repeat; }
  html.hero-search-on .topbar.fl-bar .global-search { visibility: hidden; }
}
.fl-classes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.fl-cls { display: grid; justify-items: center; gap: 4px; padding: 7px 2px; border-radius: 7px; color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.fl-cls:hover, .fl-cls:focus-visible { background: var(--panel-2); color: #fff; }
.fl-cls .nav-ic { width: 30px; height: 30px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
/* a narrower window: the words sit closer, so the whole row still fits without scrolling down to about 1280px */
@media (max-width: 1500px) {
  .fl-scroll { gap: 0; padding-left: 6px; padding-right: 6px; }
  .fl-w.nav-top { padding: 6px 6px; gap: 5px; font-size: 13.5px; }
  .fl-w .nav-ic { width: 18px; height: 18px; }
}
@media (min-width: 900px) {
  html:not([data-nav="old"]) .topbar.fl-bar .global-search { transform: translateX(var(--search-dx, 0px)); max-width: var(--search-w, 760px); }   /* dead centre (js/navflat.js) */
}
/* ---------------------------------------------------------------- frosted glass once the page scrolls (owner, 7 Oct 2026)
   Solid at the top of a page; scrolled (app.js: html.hdr-scrolled), both rows turn see-through with the page blurred under
   them. The blur is on a ::before layer, not the bar itself: a backdrop-filter on the bar would make it the containing block
   of its fixed children (the search box opened over the page on a phone). */
.topbar::before, .fl-row::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: rgba(10, 14, 26, .36); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
.topbar, .fl-row { transition: background-color .2s; }
html.hdr-scrolled .topbar, html.hdr-scrolled .fl-row { background-color: transparent; }
html.hdr-scrolled .topbar::before, html.hdr-scrolled .fl-row::before { opacity: 1; }
html.hdr-scrolled .fl-row { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hdr-scrolled .topbar::before, html.hdr-scrolled .fl-row::before { background: rgba(10, 14, 26, .92); }   /* no blur: stay readable */
}
/* the search box opened over the page (a phone): the full width, not the flat bar's flex sizing */
html.search-open:not([data-nav="old"]) .topbar.fl-bar .global-search { width: min(720px, calc(100vw - 32px)); max-width: none; flex: none; }
/* ---------------------------------------------------------------- the game's servers at a glance, between the logo and the search box
   (js/hdrstatus.js). "Server status", a dot and the state on one line, no box: green online, amber maintenance or problems,
   red down; the next maintenance in grey. The search box gives up the room; the item slides to the middle of the gap. */
.hdr-status { display: none; }
@media (min-width: 1000px) {
  html:not([data-nav="old"]) .topbar.fl-bar > .hdr-status:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; flex: none;
    margin: 0 14px 0 6px; white-space: nowrap; text-decoration: none; font-size: 13px; color: #c3c8d4; }
  .hdr-status small { font-size: 13px; font-weight: 500; color: var(--muted); margin-right: 2px; }
  .hdr-status b { font-weight: 600; }
  .hdr-status em { font-style: normal; color: var(--muted); font-size: 12px; }
  .hdr-status:hover b { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .hdr-status i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #3fbf6a; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
  .hdr-status[data-kind="up"] b { color: #7ee2a0; }
  .hdr-status[data-kind="warn"] i { background: #f0c35a; }
  .hdr-status[data-kind="warn"] b { color: #f0c35a; }
  .hdr-status[data-kind="down"] i { background: #e5534b; }
  .hdr-status[data-kind="down"] b { color: #ff7b72; }
}
@media (min-width: 1000px) and (max-width: 1699px) {
  .hdr-status em { display: none; }   /* the next maintenance: in its title when the bar is narrower (the search box keeps its room) */
}