:root { --top-navigation-row-height: 68px; --top-navigation-height: var(--top-navigation-row-height); }
html { scroll-padding-top: calc(var(--top-navigation-height) + 16px); }
body { padding-top: var(--top-navigation-height); }
body.game-shell { box-sizing: border-box; }
.game-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    color: #e8e0cf;
    background: linear-gradient(#0b1722a8, #09131dde), url('/assets/ui/shared/top-navigation-bg.webp') center / cover;
    box-shadow: 0 3px 14px #0003;
    font-family: "Segoe UI", sans-serif;
}
.game-topbar::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: #c9a45c55; pointer-events: none; }
.game-navigation-inner { max-width: 1600px; min-height: var(--top-navigation-row-height); margin: auto; padding: 0 98px 0 32px; display: flex; align-items: center; gap: 40px; }
.game-topbar a { color: #e8e0cf; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
.game-topbar img { display: block; object-fit: contain; flex-shrink: 0; }
.game-topbar .game-brand { display: flex; align-items: center; gap: 10px; color: #e7d6ad; font: bold 28px Georgia, serif; white-space: nowrap; }
.game-brand img { width: 32px; height: 32px; }
.game-navigation-menu { flex: 1; min-width: 0; align-items: center; gap: 28px; }
.game-navigation-links, .game-account { display: flex; align-items: center; gap: 30px; }
.game-navigation-links > a { position: relative; min-height: var(--top-navigation-row-height); display: flex; align-items: center; gap: 9px; font-size: 14px; white-space: nowrap; }
.game-navigation-links img { width: 24px; height: 24px; }
.game-topbar .is-active { color: #d9b76b; }
.game-navigation-links > .is-active::after, .game-profile.is-active::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: #c9a45c; }
.game-account { margin-left: auto; font-size: 13px; min-width: 0; }
.game-profile { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--top-navigation-row-height); }
.game-profile img { width: 28px; height: 28px; }
.game-account button.game-profile { border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.game-account button.game-profile:focus-visible { outline:2px solid #d2b575; outline-offset:3px; }
.game-profile-text { display: grid; max-width: 180px; line-height: 1.25; padding: 8px 0; overflow-wrap: anywhere; }
.game-profile-label { color: #aaa394; font-size: 11px; margin-bottom: 3px; }
.game-player-name { color: inherit; font-size: 14px; font-weight: 600; }
.game-player-points { color: #aaa394; font-size: 10px; }
.game-topbar .game-auth { min-height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid #a6894d80; border-radius: 4px; padding: 10px 20px; background: #0b172240; white-space: nowrap; }
.game-topbar a:hover { color: #f0d69b; }
.game-topbar .game-auth:hover { background: #c9a45c12; border-color: #c9a45c; }
.game-topbar a:focus-visible, .game-topbar button:focus-visible, .game-topbar summary:focus-visible { outline: 2px solid #e7c985; outline-offset: 3px; }
.game-menu-toggle, .game-utilities button { color: #e8e0cf; background: #101d28; border: 1px solid #a6894d80; border-radius: 4px; padding: 8px 12px; }
.game-menu-toggle { display: none; }
.game-utilities { position: absolute; top: 0; right: max(20px, calc((100% - 1600px) / 2 + 20px)); font-size: 12px; }
.game-utilities > summary { min-height: var(--top-navigation-row-height); display: flex; align-items: center; cursor: pointer; color: #bdb4a1; list-style: none; }
.game-utilities > summary::-webkit-details-marker { display: none; }
.game-utilities > summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); margin: -3px 0 0 8px; }
.game-utilities-panel { position: absolute; right: 0; width: min(260px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 14px; background: #101d28; border: 1px solid #a6894d80; border-radius: 4px; box-shadow: 0 8px 20px #0005; }
.game-utilities-panel strong { color: #d2b477; font-size: 10px; }
.game-utilities-panel [data-devmode-status] { color: #f3b2a7; overflow-wrap: anywhere; }
.game-utilities-panel [data-devmode-status]:empty { display: none; }
@media (min-width: 1200px) { .game-navigation-menu.collapse { display: flex !important; } }
@media (max-width: 1199.98px) {
    .game-navigation-inner { flex-wrap: wrap; gap: 0; padding: 0 90px 0 20px; }
    .game-brand { min-height: var(--top-navigation-row-height); }
    .game-menu-toggle { display: block; margin-left: auto; }
    .game-navigation-menu { flex-basis: 100%; margin-right: -70px; }
    .game-navigation-menu.show { display: flex; flex-wrap: wrap; padding-bottom: 16px; gap: 12px; }
    .game-navigation-links { flex-wrap: wrap; gap: 20px; }
    .game-navigation-links > a, .game-profile { min-height: 48px; }
    .game-account { flex-wrap: wrap; gap: 20px; }
    .game-utilities-panel { max-height: calc(100dvh - var(--top-navigation-row-height) - 16px); overflow: auto; }
}
@media (max-width: 540px) {
    .game-navigation-inner { padding-left: 14px; padding-right: 74px; }
    .game-topbar .game-brand { font-size: 23px; gap: 6px; }
    .game-brand img { width: 28px; height: 28px; }
    .game-menu-toggle { padding: 7px; font-size: 12px; }
    .game-utilities { right: 14px; }
    .game-navigation-menu { margin-right: -60px; }
    .game-navigation-links { width: 100%; gap: 18px; }
    .game-navigation-links > a { font-size: 13px; gap: 6px; }
    .game-navigation-links img { width: 20px; height: 20px; }
    .game-account { margin-left: 0; width: 100%; gap: 12px; }
    .game-topbar .game-auth { padding: 10px 14px; }
}
@media (max-width: 380px) {
    .game-topbar .game-brand { font-size: 20px; gap: 5px; }
    .game-brand img { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .game-topbar a { transition: none; } }