/* wgf-header.css - the site header's visual layer (navigation redesign, 2026-10-26).
   Supersedes wgf-masthead.css, which stays in the tree as the rollback target (revert
   wgf_site_theme.masthead_tags() and re-bake).

   Owner 2026-10-26: "for thewowdb only do the navigation". Information architecture lives in
   wgf_nav_ia.py: five pillars (Database, Classes & Talents, Auction House, Guides, Tools) and
   one More group (News, Downloads, Games, the six version doors), then the directory.

     desktop >= 1360   row 1  version tabs (WoW Forever first) + live build        region chip
                       row 2  wordmark | pillars + More | search | Enter World
     tablet  900-1359  row 1  version tabs
                       row 2  wordmark | search | Enter World
                       row 3  pillars + More
     phone   <  900    one row: wordmark | Menu. Menu opens a full-height sheet: game version,
                       then the pillars as large tap rows (accordion), Enter World + region on top.

   Rules kept from the house taste: sentence case at reading size, flat fills (no gradient, no
   glass, no glow on things at rest), one action, the only shadow is on the open panel.
   Skin stays the game's: gold Friz wordmark and panel heads on near-black.

   Loaded on every shell by wgf_site_theme.head_tag() (Flask pages) and apply_to_html() (the
   baked statics), AFTER every other header sheet. !important is deliberate and scoped to this
   file: the older header rules live in wgf-site-shell.css / wgf-chrome.css / wgf-home.css at
   several breakpoints and this layer has to beat all of them without editing them. */

header.wgf-shell-topbar {
  --hd-bg: #111218;
  --hd-strip: #08090c;
  --hd-panel: #0c0d12;
  --hd-tone: #1b1c24;
  --hd-tone-hi: #262833;
  --hd-ink: #ece6d6;
  --hd-dim: #a8a293;
  --hd-gold: var(--wgf-gold, #ffd100);
  --hd-sans: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --hd-game: var(--font-game, "Friz Quadrata", Georgia, serif);
}

/* ---- version tabs (strip) ---------------------------------------------------------------- */
.wgf-mh-games {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font: 600 14px/1 var(--hd-sans);
  white-space: nowrap;
}
.wgf-mh-game {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  color: var(--hd-dim);
  text-decoration: none;
  border-radius: 3px;
}
.wgf-mh-game i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acc, #d4ad3d);
  flex: none;
}
html body header.wgf-shell-topbar .wgf-mh-game { color: var(--hd-dim); text-decoration: none; }
html body header.wgf-shell-topbar .wgf-mh-games > .wgf-mh-game:first-child { color: var(--hd-ink); }
html body header.wgf-shell-topbar .wgf-mh-game:hover { color: #fff; background: rgba(255, 255, 255, .07); }
html body header.wgf-shell-topbar .wgf-mh-game:focus-visible { outline: 2px solid var(--hd-gold); outline-offset: -2px; color: #fff; }
html body header.wgf-shell-topbar .wgf-mh-game.is-active { color: #17110a; background: var(--hd-gold); }
.wgf-mh-game.is-active i { background: #17110a; }
html body header.wgf-shell-topbar .wgf-mh-game::after { display: none !important; }
.wgf-mh-game.is-empty { opacity: 1; }
.wgf-mh-game em {
  font-style: normal;
  font-size: 12px;
  color: var(--hd-gold);
  background: #2a2418;
  padding: 3px 6px;
  border-radius: 3px;
}

/* the live build, written after the tabs */
.wgf-mh-build {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  font: 600 13px/1 var(--hd-sans);
  color: var(--hd-dim);
}
.wgf-mh-build[hidden] { display: none; }
.wgf-mh-build b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--hd-ink);
}
.wgf-mh-build b::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
}

/* the phone's copy of the tabs is dormant on desktop */
.wgf-mh-sheetvers { display: none; }

/* keep the topical row (retired, kept empty by the shell) out of the way */
header.wgf-shell-topbar .wgf-mh-topical { display: none !important; }

/* ---- shared nav skin (desktop + tablet) -------------------------------------------------- */
@media (min-width: 900px) {
  html body header.wgf-shell-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 38px 64px 46px;
    column-gap: 20px;
    align-items: center;
    padding: 0 max(20px, calc((100% - 1640px) / 2)) !important;
    background: var(--hd-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
    z-index: 50;
  }
  html body header.wgf-shell-topbar > .wgf-shell-topbar__inner,
  html body header.wgf-shell-topbar .wgf-shell-right { display: contents !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle { display: none !important; }

  /* row 1: the strip bleeds its fill to the viewport edges without clipping anything */
  header.wgf-shell-topbar .wgf-mh-games {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    border-image: linear-gradient(var(--hd-strip), var(--hd-strip)) fill 0 / 0 / 0 100vmax;
  }
  html body header.wgf-shell-topbar .wgf-sel { grid-row: 1; grid-column: -2 / -1; justify-self: end; z-index: 2; }
  html body header.wgf-shell-topbar .wgf-sel__chip {
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    font: 600 13px/1 var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: none !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: var(--hd-dim) !important;
  }
  html body header.wgf-shell-topbar .wgf-sel__chip > * { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: none !important; }
  html body header.wgf-shell-topbar .wgf-sel__chip:hover { color: #fff !important; background: rgba(255, 255, 255, .07) !important; }
  html body header.wgf-shell-topbar .wgf-sel__chip:focus-visible { outline: 2px solid var(--hd-gold) !important; outline-offset: -2px; }

  /* row 2: wordmark */
  html body header.wgf-shell-topbar .wgf-shell-logo {
    grid-row: 2;
    grid-column: 1;
    gap: 10px !important;
    font-family: var(--hd-game) !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-gold) !important;
    text-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-logo:focus-visible { outline: 2px solid var(--hd-gold); outline-offset: 4px; }
  html body header.wgf-shell-topbar .wgf-logo-coin { width: 34px !important; height: 34px !important; filter: none !important; }

  /* search: the front door, on every page (owner mandate 2026-08-06) */
  html body header.wgf-shell-topbar .wgf-shell-searchband {
    grid-row: 2;
    grid-column: 2;
    display: block !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-searchband::before,
  html body header.wgf-shell-topbar .wgf-shell-searchband::after,
  html body header.wgf-shell-topbar .wgf-shell-search::before,
  html body header.wgf-shell-topbar .wgf-shell-search::after { display: none !important; }
  html body header.wgf-shell-topbar .wgf-shell-search {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-image: none !important;
    outline: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search__input {
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box;
    padding: 0 16px 0 44px !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 3px !important;
    outline: 0 !important;
    background: var(--hd-tone) !important;
    box-shadow: none !important;
    font: 500 15px var(--hd-sans) !important;
    color: var(--hd-ink) !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search__input::placeholder { color: #908a7d !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__input:hover { background: var(--hd-tone-hi) !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__input:focus { background: var(--hd-tone-hi) !important; outline: 2px solid var(--hd-gold) !important; outline-offset: 0; }
  html body header.wgf-shell-topbar .wgf-shell-search__btn {
    left: 8px !important;
    right: auto !important;
    color: var(--hd-dim) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search__btn:focus-visible { outline: 2px solid var(--hd-gold) !important; }

  /* the one action: Enter World */
  html body header.wgf-shell-topbar .wgf-realm-btn {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    background: var(--hd-gold) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font: 700 15px var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: #17110a !important;
    white-space: nowrap;
  }
  html body header.wgf-shell-topbar .wgf-realm-btn::after {
    content: "";
    display: inline-block;
    margin-left: 9px;
    vertical-align: 2px;
    border: 4px solid transparent;
    border-top: 5px solid currentColor;
    border-bottom: 0;
  }
  html body header.wgf-shell-topbar .wgf-realm-btn:hover { background: #ffe066 !important; }
  html body header.wgf-shell-topbar .wgf-realm-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

  /* version spine (Classic Era / MoP) keeps its own row under everything */
  html body header.wgf-shell-topbar [class*="spine"]:not([class*="spine__"]) {
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0 0 10px !important;
  }

  /* the pillars (tablet: their own row under the masthead) */
  html body header.wgf-shell-topbar .wgf-shell-nav {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: stretch !important;
    align-self: stretch;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group { align-items: stretch !important; position: static !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group[data-nav-tier] { display: flex !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-link[data-nav-tier] { display: inline-flex !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger,
  html body header.wgf-shell-topbar .wgf-shell-nav > a {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 600 15px/1 var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    color: var(--hd-ink) !important;
    white-space: nowrap;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:first-child > .wgf-nav-trigger { padding-left: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > a > .wgf-nav-icon { display: none !important; }
  /* the caret says "this opens" */
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger .wgf-nav-caret {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin: -3px 0 0 7px !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg);
    opacity: .7;
  }
  /* active / open indicator: a gold bar on the row's foot */
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: var(--hd-gold) !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .14s ease;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:first-child > .wgf-nav-trigger::after { left: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger:hover,
  html body header.wgf-shell-topbar .wgf-shell-nav > a:hover,
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group.is-open > .wgf-nav-trigger { color: #fff !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger:focus-visible,
  html body header.wgf-shell-topbar .wgf-shell-nav > a:focus-visible { outline: 2px solid var(--hd-gold) !important; outline-offset: -4px; color: #fff !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group.is-open > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav:not(.wgf-js) > .wgf-nav-group:hover > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav:not(.wgf-js) > .wgf-nav-group:focus-within > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > a:hover::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger.is-active::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > a.is-active::after { transform: scaleX(1); }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger.is-active,
  html body header.wgf-shell-topbar .wgf-shell-nav > a.is-active { color: var(--hd-gold) !important; }

  /* the full-site directory: a quiet utility at the end of the row, label in words */
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group--directory { margin-left: auto; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group--directory > .wgf-nav-trigger {
    font-size: 0 !important;
    padding: 0 0 0 12px !important;
    color: var(--hd-dim) !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group--directory > .wgf-nav-trigger::before {
    content: "All pages";
    font: 600 15px/1 var(--hd-sans);
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group--directory > .wgf-nav-trigger::after { left: 12px !important; right: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group--directory > .wgf-nav-trigger .wgf-nav-caret { display: none !important; }

  /* ---- PANELS: one full-width band under the header, same place for every group -------- */
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu.wgf-nav-menu--mega,
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu:not(.wgf-nav-menu--directory) {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 28px max(20px, calc((100% - 1640px) / 2)) 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--hd-panel) !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .6) !important;
    z-index: 60;
    transition: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu--mega {
    display: grid !important;
    grid-template-columns: repeat(var(--wgf-mega-cols, 3), minmax(160px, 230px));
    justify-content: start;
    align-items: start;
    column-count: auto !important;
    gap: 22px 36px;
  }
  /* a plain (ungrouped) menu is a single column inside the same band */
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu:not(.wgf-nav-menu--mega):not(.wgf-nav-menu--directory) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }
  /* open: JS state, with hover / focus as the no-script fallback */
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group.is-open > .wgf-nav-menu:not(.wgf-nav-menu--directory),
  html body header.wgf-shell-topbar .wgf-shell-nav:not(.wgf-js) .wgf-nav-group:hover > .wgf-nav-menu:not(.wgf-nav-menu--directory),
  html body header.wgf-shell-topbar .wgf-shell-nav:not(.wgf-js) .wgf-nav-group:focus-within > .wgf-nav-menu:not(.wgf-nav-menu--directory) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body header.wgf-shell-topbar .wgf-nav-menu--mega .wgf-nav-section {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }
  html body header.wgf-shell-topbar .wgf-nav-menu--mega .wgf-nav-grouphead {
    display: block;
    margin: 0 0 6px !important;
    padding: 4px 10px !important;
    border: 0 !important;
    font: 400 18px/1.25 var(--hd-game) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-gold) !important;
    opacity: 1 !important;
    white-space: nowrap;
    border-radius: 3px;
  }
  html body header.wgf-shell-topbar .wgf-nav-menu--mega a.wgf-nav-grouphead:hover { color: #fff !important; background: rgba(255, 255, 255, .07) !important; }
  html body header.wgf-shell-topbar .wgf-nav-menu a:not(.wgf-nav-grouphead) {
    display: block;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 3px !important;
    font: 500 15px/1.3 var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-ink) !important;
    white-space: normal;
    background: none !important;
  }
  html body header.wgf-shell-topbar .wgf-nav-menu a:not(.wgf-nav-grouphead):hover { color: #fff !important; background: rgba(255, 255, 255, .07) !important; }
  html body header.wgf-shell-topbar .wgf-nav-menu a:focus-visible { outline: 2px solid var(--hd-gold) !important; outline-offset: -2px; color: #fff !important; background: rgba(255, 255, 255, .07) !important; }
  html body header.wgf-shell-topbar .wgf-nav-menu a.is-active { color: var(--hd-gold) !important; }

  /* the directory overlay keeps its own sheet geometry (wgf-site-directory.css); only its
     trigger above changed. Open it the same way the panels open. */
  html body header.wgf-shell-topbar .wgf-nav-group--directory.is-open > .wgf-nav-menu--directory {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ---- More: nine sections placed by position (wgf_nav_ia.more_group) ------------------ */
  html body header.wgf-shell-topbar #wgf-nav-more {
    grid-template-columns: repeat(5, minmax(160px, 230px));
    grid-template-rows: auto auto;
  }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(2) { grid-column: 2; grid-row: 1; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(3) { grid-column: 2; grid-row: 2; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(4) { grid-column: 3; grid-row: 1; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(5) { grid-column: 3; grid-row: 2; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(6) { grid-column: 4; grid-row: 1; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(7) { grid-column: 4; grid-row: 2; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(8) { grid-column: 5; grid-row: 1; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section:nth-child(9) { grid-column: 5; grid-row: 2; }
}

/* ---- DESKTOP >= 1360: pillars share the masthead row ------------------------------------- */
@media (min-width: 1360px) {
  html body header.wgf-shell-topbar {
    grid-template-columns: auto auto minmax(220px, 1fr) auto;
    grid-template-rows: 38px 68px;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav { grid-row: 2; grid-column: 2; justify-self: start !important; margin-left: 8px !important; }
  html body header.wgf-shell-topbar .wgf-shell-searchband { grid-column: 3; }
  html body header.wgf-shell-topbar .wgf-realm-btn { grid-column: 4; }
  html body header.wgf-shell-topbar [class*="spine"]:not([class*="spine__"]) { grid-row: 3; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group--directory { margin-left: 8px; }
}
/* ---- TABLET 900-1359: a panel wraps instead of running off the edge ----------------------- */
@media (min-width: 900px) and (max-width: 1359px) {
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu--mega,
  html body header.wgf-shell-topbar #wgf-nav-more {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-template-rows: none;
  }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section { grid-column: auto !important; grid-row: auto !important; }
}

/* ---- PHONE < 900: one row, then a sheet ----------------------------------------------------- */
@media (max-width: 899.98px) {
  html body header.wgf-shell-topbar {
    display: block !important;
    position: relative;
    padding: 0 !important;
    background: var(--hd-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  header.wgf-shell-topbar .wgf-mh-games,
  header.wgf-shell-topbar .wgf-mh-topical { display: none !important; }

  html body header.wgf-shell-topbar > .wgf-shell-topbar__inner {
    display: flex !important;
    align-items: center;
    height: 56px;
    padding: 0 6px 0 16px !important;
    margin: 0 !important;
    gap: 8px;
    background: var(--hd-bg);
  }
  html body header.wgf-shell-topbar .wgf-shell-logo {
    order: 1;
    gap: 9px !important;
    font-family: var(--hd-game) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-gold) !important;
    text-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-logo-coin { width: 30px !important; height: 30px !important; filter: none !important; }
  html body header.wgf-shell-topbar .wgf-shell-logo:focus-visible { outline: 2px solid var(--hd-gold); outline-offset: 3px; }

  /* the Menu button: a word, not three bars */
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle {
    order: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 72px;
    height: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 16px !important;
    background: var(--hd-tone) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: var(--hd-ink) !important;
    font: 600 16px/1 var(--hd-sans) !important;
    cursor: pointer;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle .wgf-shell-nav-toggle__bar { display: none !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle::after { content: "Menu"; }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle[aria-expanded="true"]::after { content: "Close"; }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle[aria-expanded="true"] { background: var(--hd-gold) !important; color: #17110a !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle:focus-visible { outline: 2px solid var(--hd-gold) !important; outline-offset: 2px; }

  /* Enter World + region live at the top of the sheet; hidden while it is closed */
  html body header.wgf-shell-topbar .wgf-shell-right { display: none !important; }
  html body header.wgf-shell-topbar.is-open .wgf-shell-right {
    display: flex !important;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 102;
    align-items: center;
    gap: 10px;
    height: 64px;
    margin: 0 !important;
    padding: 0 16px;
    background: var(--hd-panel);
  }
  html body header.wgf-shell-topbar .wgf-realm-btn {
    height: 44px !important;
    padding: 0 18px !important;
    background: var(--hd-gold) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font: 700 16px var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: #17110a !important;
  }
  html body header.wgf-shell-topbar .wgf-sel__chip {
    height: 44px !important;
    padding: 0 14px !important;
    background: var(--hd-tone) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font: 600 15px var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-ink) !important;
  }
  html body header.wgf-shell-topbar .wgf-sel__chip > * { font: inherit !important; color: inherit !important; text-transform: none !important; letter-spacing: 0 !important; }

  /* search row under the header row (the home page keeps hiding it: the hero has the search) */
  html body header.wgf-shell-topbar .wgf-shell-searchband {
    margin: 0 !important;
    padding: 0 16px 12px !important;
    background: var(--hd-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-searchband::before,
  html body header.wgf-shell-topbar .wgf-shell-searchband::after,
  html body header.wgf-shell-topbar .wgf-shell-search::before,
  html body header.wgf-shell-topbar .wgf-shell-search::after { display: none !important; }
  html body header.wgf-shell-topbar .wgf-shell-search { border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__input {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px 0 46px !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 3px !important;
    background: var(--hd-tone) !important;
    box-shadow: none !important;
    font: 500 16px var(--hd-sans) !important;
    color: var(--hd-ink) !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search__input::placeholder { color: #908a7d !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__input:focus { outline: 2px solid var(--hd-gold) !important; outline-offset: 0; }
  html body header.wgf-shell-topbar .wgf-shell-search__btn { left: 10px !important; right: auto !important; color: var(--hd-dim) !important; background: none !important; border: 0 !important; box-shadow: none !important; }

  /* the sheet */
  html body header.wgf-shell-topbar .wgf-shell-nav { display: none !important; }
  html body header.wgf-shell-topbar.is-open .wgf-shell-nav {
    display: block !important;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    margin: 0 !important;
    padding: 64px 0 48px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--hd-panel) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* game version, first thing in the sheet */
  html body header.wgf-shell-topbar .wgf-mh-sheetvers { display: block; padding: 6px 16px 18px; }
  html body header.wgf-shell-topbar .wgf-mh-sheetvers__label {
    margin: 0 0 10px;
    font: 600 15px/1.2 var(--hd-sans);
    color: var(--hd-dim);
  }
  html body header.wgf-shell-topbar .wgf-mh-sheetvers__list { display: flex; flex-wrap: wrap; gap: 8px; }
  html body header.wgf-shell-topbar .wgf-mh-sheetvers .wgf-mh-game {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    width: auto !important;
    min-height: 44px;
    height: 44px;
    padding: 0 16px !important;
    border: 0 !important;
    font: 600 15px/1 var(--hd-sans) !important;
    color: var(--hd-ink) !important;
    background: var(--hd-tone) !important;
    border-radius: 3px;
  }
  html body header.wgf-shell-topbar .wgf-mh-sheetvers .wgf-mh-game.is-active { color: #17110a !important; background: var(--hd-gold) !important; }

  /* pillars as large tap rows */
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group { display: block !important; position: static !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger,
  html body header.wgf-shell-topbar .wgf-shell-nav > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font: 600 19px/1.2 var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: var(--hd-ink) !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > a::after { display: none !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger.is-active { color: var(--hd-gold) !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group.is-expanded > .wgf-nav-trigger { background: var(--hd-tone) !important; color: #fff !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger:focus-visible,
  html body header.wgf-shell-topbar .wgf-shell-nav a:focus-visible { outline: 2px solid var(--hd-gold) !important; outline-offset: -2px; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger .wgf-nav-caret {
    display: inline-block !important;
    flex: none;
    width: 8px !important;
    height: 8px !important;
    margin: -4px 4px 0 12px !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg);
    transition: transform .15s ease;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group.is-expanded > .wgf-nav-trigger .wgf-nav-caret { transform: rotate(225deg); margin-top: 2px !important; }

  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    columns: auto !important;
    grid-template-columns: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  html body header.wgf-shell-topbar .wgf-nav-section { display: block !important; padding: 0 !important; margin: 0 !important; }
  html body header.wgf-shell-topbar #wgf-nav-more > .wgf-nav-section { grid-column: auto !important; grid-row: auto !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a:not(.wgf-nav-grouphead) {
    display: flex !important;
    align-items: center;
    min-height: 50px;
    padding: 0 20px 0 36px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font: 500 17px/1.25 var(--hd-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-ink) !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a:not(.wgf-nav-grouphead):active { background: var(--hd-tone) !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-grouphead {
    display: block !important;
    margin: 14px 0 0 !important;
    padding: 6px 20px 6px 36px !important;
    border: 0 !important;
    background: none !important;
    font: 400 18px/1.3 var(--hd-game) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--hd-gold) !important;
    opacity: 1 !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a.is-active { color: var(--hd-gold) !important; }
  /* the full-site directory stays an accordion row, labelled in words like on desktop */
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory > .wgf-nav-trigger { color: var(--hd-dim) !important; font-size: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory > .wgf-nav-trigger::before { content: "All pages"; font: 600 19px/1.2 var(--hd-sans); }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory > .wgf-nav-menu { padding: 8px 16px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-caret { transition: none !important; }
}