/* Public pages share a compact header; the game keeps its own scene controls. */
.public-header {
  height: 84px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  z-index: 40;
}
.public-header.scrolled { height: 76px; }
.public-navigation-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 66px);
  min-width: 0;
}
.public-header .main-nav { display: flex; gap: clamp(18px, 2vw, 30px); }
.public-header .main-nav a { font-size: 13px; white-space: nowrap; }
.public-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.public-header .header-account-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  font-size: 12px;
  white-space: nowrap;
  border-color: transparent;
}
.public-header .header-account-action:hover { border-color: var(--line); transform: none; }
.public-play-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid rgba(239, 189, 123, .42);
  border-radius: 4px;
  background: linear-gradient(110deg, #dfac68, #c58b48);
  color: #14211e;
  font: 700 12px "Manrope", sans-serif;
  letter-spacing: .025em;
  transition: background .2s, border-color .2s;
}
.public-play-link:hover { background: var(--copper-light); border-color: var(--copper-light); }
.public-play-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.public-menu-toggle { display: none; }
.public-header [hidden] { display: none !important; }
.public-header a:focus-visible,
.public-menu-toggle:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 5px; }
.legal-page:has(.public-header) .legal-nav { top: 106px; }

@media (max-width: 1120px) {
  .public-header,
  .public-header.scrolled { height: auto; min-height: 76px; grid-template-columns: 1fr auto; gap: 0; }
  .public-header[data-menu-ready] { height: 76px; }
  .public-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 84px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font: 600 12px "Manrope", sans-serif;
    cursor: pointer;
  }
  .public-menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .public-menu-close-icon { display: none; }
  .public-menu-toggle[aria-expanded="true"] .public-menu-open-icon { display: none; }
  .public-menu-toggle[aria-expanded="true"] .public-menu-close-icon { display: block; }
  .public-navigation-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 20px;
    justify-content: stretch;
    width: 100%;
    padding: 18px 0 24px;
  }
  .public-header[data-menu-ready] .public-navigation-panel {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px clamp(18px, 5vw, 56px) 24px;
    border-block: 1px solid var(--line);
    background: #0b1b1b;
    box-shadow: 0 20px 35px rgba(0, 0, 0, .25);
  }
  .public-header .main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 22px; }
  .public-header .main-nav a { padding: 13px 4px; font-size: 15px; }
  .public-header .main-nav a.active::after { right: auto; width: 24px; }
  .public-header-actions { padding-top: 18px; border-top: 1px solid var(--line); gap: 14px; }
  .public-header .public-play-link { min-height: 46px; padding-inline: 24px; }
  .public-header .header-account-action { min-height: 46px; }
}

@media (max-width: 680px) {
  .public-header { padding-inline: 18px; }
  .public-header .brand { gap: 9px; }
  .public-header .brand-mark { width: 32px; height: 32px; }
  .public-header .brand strong { font-size: 14px; letter-spacing: 0; }
  .public-header .brand small { display: none; }
  .legal-page:has(.public-header) .legal-nav { top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .public-header,
  .public-header a { transition: none; }
}

/* The guide dock reduces page width independently of viewport media queries. */
@media (min-width:1121px) {
  .public-header.is-compact,.public-header.is-compact.scrolled { height:76px;min-height:76px;grid-template-columns:1fr auto;gap:0; }
  .public-header.is-compact .public-menu-toggle { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:84px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);font:600 12px 'Manrope',sans-serif;cursor:pointer; }
  .public-header.is-compact .public-menu-toggle svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5; }
  .public-header.is-compact .public-menu-close-icon { display:none; }
  .public-header.is-compact .public-menu-toggle[aria-expanded="true"] .public-menu-open-icon { display:none; }
  .public-header.is-compact .public-menu-toggle[aria-expanded="true"] .public-menu-close-icon { display:block; }
  .public-header.is-compact .public-navigation-panel { display:grid;grid-column:1 / -1;gap:20px;justify-content:stretch;position:absolute;top:100%;left:0;width:100%;max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 24px;border-block:1px solid var(--line);background:#0b1b1b;box-shadow:0 20px 35px #0004; }
  .public-header.is-compact .main-nav { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 22px; }
  .public-header.is-compact .main-nav a { padding:13px 4px;font-size:15px; }
  .public-header.is-compact .main-nav a.active::after { right:auto;width:24px; }
  .public-header.is-compact .public-header-actions { padding-top:18px;border-top:1px solid var(--line);gap:14px; }
  .public-header.is-compact .public-play-link { min-height:46px;padding-inline:24px; }
  .public-header.is-compact .header-account-action { min-height:46px; }
}