/* ==========================================================================
   header.css: the site header (design/eli/Concepts/header.png).
   Desktop: wordmark + BETA | PLAY ARCHIVE LEADERBOARD ACHIEVEMENTS | search ? avatar.
   Phone: wordmark + BETA, search ? avatar; the nav drops to its own row under it,
   in the flow of the page, so it can never sit on top of the board's Simulate bar.
   Owned by foundation.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 11, 14, .88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.hd-row {
  display: flex; align-items: center; gap: 28px;
  max-width: 1440px; margin: 0 auto; height: var(--header-h);
  padding: 0 calc(32px + env(safe-area-inset-right)) 0 calc(32px + env(safe-area-inset-left));
}
.hd-brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hd-brand .wordmark { font-size: 34px; }
.hd-beta {
  cursor: pointer; background: none; font-family: var(--font-label);
  transition: box-shadow var(--t-med), background-color var(--t-med);
}
.hd-beta:hover { background: rgba(255,138,61,.1); box-shadow: 0 0 16px -4px rgba(255,138,61,.6); }
.hd-sep { width: 1px; height: 36px; background: var(--border); flex: 0 0 1px; }

.hd-nav { display: flex; align-items: stretch; gap: 8px; height: 100%; flex: 1; min-width: 0; }
.hd-nav a {
  position: relative; display: inline-flex; align-items: center; padding: 0 18px;
  color: #C9CAD3; text-decoration: none; white-space: nowrap;
  font: 600 14px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--t-med);
}
.hd-nav a:hover { color: var(--text); }
.hd-nav a[aria-current="page"] { color: var(--mode-primary); text-shadow: 0 0 18px rgba(var(--mode-rgb), .45); }
/* The underline bar with its soft glow, in mode colour. */
.hd-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 12px; width: calc(100% - 36px); max-width: 64px; height: 4px;
  transform: translateX(-50%); border-radius: 4px; background: var(--mode-primary);
  box-shadow: 0 0 14px 1px rgba(var(--mode-rgb), .75), 0 6px 26px 6px rgba(var(--mode-rgb), .28);
}
.hd-nav a:focus-visible { outline-offset: -6px; }

.hd-tools { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.hd-tools .icon-btn { width: 44px; height: 44px; color: var(--text); }
.hd-tools .icon-btn .i { width: 26px; height: 26px; }
.hd-tools .icon-btn[aria-current="page"] { color: var(--mode-primary); }
.hd-help { box-shadow: inset 0 0 0 2px #9A9BA6; }
.hd-help .i { width: 24px !important; height: 24px !important; }
.hd-avatar {
  position: relative; box-shadow: inset 0 0 0 2.5px var(--mode-primary);
  color: var(--mode-primary) !important; overflow: hidden;
}
.hd-avatar .i { width: 30px !important; height: 30px !important; transform: translateY(5px); }
.hd-avatar[aria-current="page"] { box-shadow: inset 0 0 0 2.5px var(--mode-primary), 0 0 18px -2px rgba(var(--mode-rgb), .7); }
.hd-avatar .hd-initial { display: none; }
.hd-avatar.has-initial .i { display: none; }
.hd-avatar.has-initial .hd-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 700 18px/1 var(--font-ui); color: var(--mode-primary);
}

/* Tablet: tighten. */
@media (max-width: 1080px) {
  .hd-row { gap: 18px; padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); }
  .hd-nav a { padding: 0 10px; font-size: 13px; letter-spacing: .06em; }
  .hd-nav a[aria-current="page"]::after { width: calc(100% - 20px); }
  .hd-brand .wordmark { font-size: 30px; }
  .hd-tools { gap: 8px; }
}

/* Phone and small tablet: nav moves to a row of its own. */
@media (max-width: 860px) {
  .site-header { position: relative; }
  .hd-row { height: 60px; gap: 10px; padding-left: calc(var(--gutter) + env(safe-area-inset-left)); padding-right: calc(var(--gutter) + env(safe-area-inset-right)); flex-wrap: wrap; }
  .hd-sep { display: none; }
  .hd-brand { gap: 10px; }
  .hd-brand .wordmark { font-size: 28px; }
  .hd-beta { height: 22px; font-size: 10px; padding: 0 7px; }
  .hd-tools { gap: 6px; }
  .hd-tools .icon-btn { width: 40px; height: 40px; }
  .hd-tools .icon-btn .i { width: 23px; height: 23px; }
  .hd-help .i { width: 21px !important; height: 21px !important; }
  .hd-avatar .i { width: 26px !important; height: 26px !important; }
  .hd-nav {
    order: 3; flex: 1 0 100%; height: 44px; gap: 0; justify-content: space-between;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 6px; border-top: 1px solid var(--border);
  }
  .hd-nav a { flex: 1 1 auto; justify-content: center; padding: 0 4px; font-size: 11.5px; letter-spacing: .05em; }
  .hd-nav a[aria-current="page"]::after { bottom: 5px; height: 3px; max-width: 44px; }
  .hd-row { height: auto; padding-top: 8px; row-gap: 8px; }
}
@media (max-width: 360px) {
  .hd-nav a { font-size: 10.5px; letter-spacing: .03em; }
  .hd-brand .wordmark { font-size: 25px; }
  .hd-tools .icon-btn { width: 36px; height: 36px; }
}

/* ---- the footer under a rebuilt page (legacy pages keep the old .wrap column) ---- */
.frame > .site-foot {
  max-width: calc(var(--content) - 2 * var(--gutter)); margin-left: auto; margin-right: auto;
  width: calc(100% - 2 * var(--gutter));
}

/* The old floating "Beta, tell us anything" chip from public/shell.js. The BETA
   pill in this header opens the same composer (data-act="feedback"), so the chip
   and the lane it reserved at the foot of every page are retired. */
.beta-chip, .dock { display: none !important; }
body.has-dock { padding-bottom: env(safe-area-inset-bottom); }
body.has-dock .toast { bottom: calc(18px + env(safe-area-inset-bottom)); }

/* Focus lands on <main> after a route change so screen readers start there; it needs no ring. */
main#app:focus { outline: none; }