.top { padding-block: 12px; gap: 12px 24px; }
.brand { gap: 10px; }
.brand svg { width: 40px; }
.brand span { font-size: 28px; }
.header-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 24px; min-width: 0; }
.header-settings { justify-content: flex-end; align-items: end; gap: 10px 12px; }
.header-settings .select { min-width: 0; gap: 5px; font-size: 12px; letter-spacing: .045em; }
.header-settings select { width: 100%; min-height: 44px; border-radius: 8px; background: #111728; }
.header-settings .server-select { width: 210px; }
.header-settings .toggle { min-height: 44px; gap: 10px; padding: 0 4px; }
.header-settings .toggle small { font-size: 13px; margin-top: 2px; }
/* Region, server and alerts are set once, so they live behind one Settings control */
.settings { position: relative; }
.settings summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; list-style: none; cursor: pointer; color: var(--text); font-size: 14px; font-weight: 600; border: 1px solid #394360; border-radius: 12px; background: #070b14; }
.settings summary::-webkit-details-marker { display: none; }
.settings summary::after { content: ''; width: 7px; height: 7px; border: solid var(--dim); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .24s var(--ease); }
.settings[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.settings summary small { color: var(--dim); font-size: 13px; font-weight: 500; }
.settings summary:hover { border-color: var(--gold2); }
.settings .header-settings { justify-content: flex-start; position: absolute; z-index: 6; top: calc(100% + 8px); right: 0; width: max-content; max-width: min(92vw, 560px); padding: 16px; background: var(--bg2); border: 1px solid var(--gold2); border-radius: 12px; box-shadow: 0 16px 40px #000a; }
.site-nav { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 5px; border: 1px solid #394360; border-radius: 12px; background: #070b14; isolation: isolate; }
.site-nav a { position: relative; display: grid; place-items: center; min-width: 116px; min-height: 44px; text-align: center; color: var(--dim); font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 8px; }
.site-nav a[aria-current="page"] { color: #211a0b; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"]:hover { color: #211a0b; }
.site-nav a:focus-visible { outline-offset: 4px; }
.nav-indicator { position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 8px; background: var(--gold); box-shadow: inset 0 1px 0 #fff3c480, 0 3px 8px #0004; transform: translateX(0); transition: transform .24s cubic-bezier(.22, .68, .2, 1); }
.site-nav[data-active="journey"] .nav-indicator { transform: translateX(100%); }
.site-nav[data-active="market"] .nav-indicator { transform: translateX(200%); }
.site-nav[data-active="players"] .nav-indicator { transform: translateX(300%); }
.site-nav[data-active="hunts"] .nav-indicator { transform: translateX(400%); }
.site-nav[aria-busy="true"] a { cursor: progress; }
html { overflow-anchor: none; scroll-padding-top: 180px; }
.app-view main > * { animation: none; }
.app-view main:focus { outline: none; }
.navigation-status { position: fixed; z-index: 20; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(90vw, 460px); margin: 0; padding: 14px 18px; color: var(--text); background: var(--bg2); border: 1px solid var(--gold2); border-radius: 8px; font-size: 13px; }
.navigation-status:empty { display: none; }

/* Both views stay mounted. Only their viewport snapshots slide; the header stays anchored. */
html[data-slide] .top { view-transition-name: app-header; }
html[data-slide] .nav-indicator { view-transition-name: app-indicator; transition: none; }
html[data-slide]::view-transition { pointer-events: none; }
html[data-slide]::view-transition-group(*) { animation-duration: .24s; animation-timing-function: cubic-bezier(.22, .68, .2, 1); }
html[data-slide]::view-transition-group(app-header) { animation: none; z-index: 2; }
html[data-slide]::view-transition-group(app-indicator) { z-index: 3; }
html[data-slide]::view-transition-old(app-header), html[data-slide]::view-transition-old(app-indicator) { display: none; }
html[data-slide]::view-transition-new(app-header), html[data-slide]::view-transition-new(app-indicator) { animation: none; }
html[data-slide]::view-transition-old(root), html[data-slide]::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.22, .68, .2, 1); animation-fill-mode: both; mix-blend-mode: normal; }
html[data-slide="left"]::view-transition-old(root) { animation-name: page-out-left; }
html[data-slide="left"]::view-transition-new(root) { animation-name: page-in-right; }
html[data-slide="right"]::view-transition-old(root) { animation-name: page-out-right; }
html[data-slide="right"]::view-transition-new(root) { animation-name: page-in-left; }
@keyframes page-out-left { to { transform: translateX(-100%); } }
@keyframes page-in-right { from { transform: translateX(100%); } }
@keyframes page-out-right { to { transform: translateX(100%); } }
@keyframes page-in-left { from { transform: translateX(-100%); } }

@media (max-width: 1400px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .header-tools { display: contents; }
  .settings { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 16px; }
  .top { position: relative; grid-template-columns: minmax(0, 1fr); padding-block: 12px; }
  .brand { justify-content: center; gap: 10px; }
  .brand svg { width: 36px; }
  .brand span { font-size: 24px; }
  .site-nav { width: 100%; }
  .site-nav a { min-width: 0; padding-inline: 4px; font-size: 13px; }
  .settings { grid-column: 1; grid-row: auto; }
  .settings summary { justify-content: space-between; }
  .settings .header-settings { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; }
  .header-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; gap: 6px 10px; }
  .header-settings #kr-group-label { grid-column: 1 / -1; }
  .header-settings .server-select { width: auto; }
  .header-settings .toggle { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 420px) {
  .site-nav a { padding-inline: 2px; font-size: 12px; letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: none; }
  html[data-slide]::view-transition-group(*), html[data-slide]::view-transition-old(*), html[data-slide]::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 420px) { .site-nav .nav-more { display: none; } }