.header-actions { position: relative; flex: 0 0 auto; }
.header-menu-toggle { flex-shrink: 0; height: 32px; min-height: 32px; padding-inline: 8px; gap: 4px; font-size: 12px; line-height: 1.4; }
.header-menu-toggle svg { width: 13px; height: 13px; }
.header-menu-toggle .header-menu-chevron { width: 10px; height: 10px; }
.header-menu-toggle[aria-expanded="true"] { color: var(--accent-bright); border-color: var(--accent); }
.header-menu-toggle[aria-expanded="true"] .header-menu-chevron { transform: rotate(180deg); }
.header-menu-toggle:hover, .header-menu-toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }

.header-menu-popover {
  position: absolute;
  inset: calc(100% - 6px) 0 auto auto;
  z-index: 2;
  width: min(196px, calc(100vw - 32px));
  max-height: min(540px, calc(100dvh - 78px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--media-radius);
  background: var(--field);
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.header-menu-heading { margin: 2px 7px 3px; color: var(--secondary); font-size: 11px; line-height: 1.4; font-weight: 400; }
.header-menu-tools { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.header-actions .header-menu-popover button {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  height: auto;
  min-height: 32px;
  margin: 0;
  padding: 6px 7px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.header-menu-popover button svg { width: 13px; height: 13px; }
.header-menu-popover button:hover:not(:disabled), .header-menu-popover button:focus-visible {
  background: var(--surface-hover);
  color: var(--accent-bright);
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}
.header-menu-popover #steamLoginLabel { max-width: 144px; font-size: inherit; }
.header-menu-popover #addGame, .header-menu-popover .is-authenticated { color: var(--accent-bright); }
.mode-toggle { white-space: nowrap; }
.mode-toggle:hover, .mode-toggle:focus-visible { color: var(--accent-bright); }
.mode-status-dot { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.mode-toggle[data-mode="visitor"] .mode-status-dot { background: var(--selection); }
.header-menu-popover #viewMode { font-size: 12px; gap: 6px; }
.header-actions-compact #managementActions { display: none; }
.site-header.is-header-compact .header-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 0; }

@media (max-width: 1099px) {
  .site-header.is-header-compact { height: auto; }
  .site-header.is-header-compact .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 58px 44px;
    min-height: 102px;
    gap: 0 12px;
    height: auto;
  }
  .site-header.is-header-compact .brand { grid-area: 1 / 1; min-width: 0; height: auto; }
  .site-header.is-header-compact .header-actions { grid-area: 1 / 2; height: 58px; }
  .site-header.is-header-compact .main-nav {
    display: flex;
    grid-area: 2 / 1 / 3 / -1;
    order: 0;
    width: 100%;
    min-width: 0;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  .site-header.is-header-compact .main-nav a { flex-shrink: 0; }
  .site-header.is-header-compact .main-nav a::after { bottom: 0; }
  .site-header.is-header-compact .header-menu-toggle { min-height: 32px; padding-inline: 8px; }
}

@media (max-width: 359px) {
  .site-header.is-header-compact .brand { font-size: 12px; gap: 5px; }
  .site-header.is-header-compact .header-inner { column-gap: 6px; }
  .site-header.is-header-compact .header-menu-toggle { gap: 4px; padding-inline: 8px; }
}