/* Same engraved controls and submenu frame as the game; native details works without JS. */
#public-navigation>.public-nav-group{position:relative;min-width:0}
#public-navigation>.public-nav-group>summary{display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:15px 28px;list-style:none;cursor:pointer;background:#104c58 url(button-carved-small-v1.webp) center/100% 100%;border:0;border-radius:4px;box-shadow:0 3px 5px #0006;color:#ffe0a0;font:17px/1.2 Georgia,serif;text-shadow:0 2px 2px #00131b,0 0 6px #082a32}
#public-navigation summary::-webkit-details-marker{display:none}
#public-navigation summary:hover,#public-navigation details[open]>summary,#public-navigation details.active>summary{filter:brightness(1.2)}
#public-navigation summary:focus-visible{outline:2px solid #f4d18c;outline-offset:4px}
#public-navigation summary .nav-chevron{position:relative;width:12px;height:12px;flex:none}
#public-navigation details[open] .nav-chevron:before{transform:rotate(225deg);top:4px}
#public-navigation .public-submenu{position:absolute;left:0;top:calc(100% + 6px);width:290px;max-width:calc(100vw - 24px);max-height:min(70dvh,560px);overflow:auto;margin:0;padding:22px;z-index:10}
#public-navigation .public-submenu a{display:block;min-height:44px;width:auto;padding:11px 16px;border-radius:0;box-shadow:none;background:none;color:#f5e4c2!important;font:15px/1.5 Georgia,serif;text-shadow:none;text-align:left;overflow-wrap:anywhere;filter:none}
/* Submenu feedback is shared with the game navigation in components.css. */
@media(max-width:700px){
 #public-navigation>.public-nav-group{position:static}
 #public-navigation>.public-nav-group>summary{min-height:49px;padding:13px 8px;font-size:14px;gap:10px}
 #public-navigation .public-submenu{left:0;right:0;top:100%;width:auto;max-width:none}
}

/* Guest links and account entry form one compact band beneath the banner. */
:is(.guest,.public-view)>.shell{padding-top:10px}
#public-navigation{position:relative;align-items:center;justify-content:flex-start;gap:6px;margin:0 0 16px}
#public-navigation>a,#public-navigation>.public-nav-group>summary{min-height:48px;padding:12px 22px;font-size:16px}
#public-navigation .account-controls{position:static;display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:18px;border-left:0}
#public-navigation .account-controls[hidden]{display:none}
#public-navigation .account-controls .auth-button{min-height:48px;padding:12px 24px;font:16px/1.2 Georgia,serif;white-space:nowrap}
#public-navigation .account-controls [data-auth=register]{color:#fff1c6!important;filter:brightness(1.12)}
#public-navigation .account-controls .auth-button:hover{filter:brightness(1.25)}
@media(min-width:701px) and (max-width:820px){
 #public-navigation{justify-content:center}
 #public-navigation .account-controls{justify-content:center;flex-basis:100%;margin:0;padding:4px 0 0;border:0}
}
@media(max-width:700px){
 :is(.guest,.public-view)>.shell{padding-top:8px}
 :is(.guest,.public-view) .header-inner{padding-bottom:0}
 #public-navigation{display:flex;gap:7px;margin-bottom:14px}
 #public-navigation>a,#public-navigation>.public-nav-group{flex:1 1 auto;width:auto}
 #public-navigation>a,#public-navigation>.public-nav-group>summary{min-height:44px;padding:11px 14px;font-size:14px}
 #public-navigation .account-controls{flex-basis:100%;margin:3px 0 0;padding:10px 0 0;border:0;border-top:0}
 #public-navigation .account-controls .auth-button{flex:1;min-height:46px;padding:12px;font-size:15px}
}

/* Quiet engraved band; gold is reserved for the current page and registration. */
#public-navigation{padding:7px 10px;border:1px solid #ac86474d;border-top-color:#d6b46e80;border-bottom-color:#715936;background:#103438 url(inventory-petrol-v1.webp) center/384px;box-shadow:inset 0 1px #f6dca51a,0 4px 10px #0003;border-radius:3px}
#public-navigation>a[aria-current=page],#public-navigation>.public-nav-group.active>summary{color:#fff1c7!important;filter:brightness(1.12);box-shadow:0 0 0 1px #e2bd71a6,0 0 12px #e6b65333,inset 0 -2px #f4d99780}
#public-navigation .account-controls .auth-button[data-auth=register]{color:#fff3cc!important;filter:brightness(1.18);box-shadow:0 0 0 1px #dfb86b9c,0 0 14px #e4b45135,0 3px 5px #0006;text-shadow:0 1px 2px #001c20}
#public-navigation .account-controls .auth-button[data-auth=register]:hover{filter:brightness(1.3)}
@media(max-width:700px){
 #public-navigation{padding:7px;gap:5px}
 #public-navigation>a,#public-navigation>.public-nav-group>summary{padding:11px 10px}
 #public-navigation .account-controls{padding-top:6px;margin-top:1px}
}

/* Shared pointer and keyboard feedback for the public navigation controls. */
:is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button){transition:filter .18s ease,transform .18s ease,box-shadow .18s ease,text-shadow .18s ease;transform:translateY(0)}
@media(hover:hover) and (pointer:fine){
 :is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button):hover{filter:brightness(1.26);transform:translateY(-2px);box-shadow:0 0 0 1px #e9c477b3,0 0 16px #e8ba594d,0 5px 10px #0006;text-shadow:0 1px 2px #001c20,0 0 8px #ffe8a54d}
}
:is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button):focus-visible{outline:2px solid #ffe0a1;outline-offset:3px;box-shadow:0 0 14px #e8ba5959}
:is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button):active{transform:translateY(0);filter:brightness(1.12);box-shadow:inset 0 2px 5px #0005,0 0 0 1px #d9b57080}
@media(prefers-reduced-motion:reduce){
 :is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button){transition:none}
 :is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button):hover,:is(#public-navigation>a,#public-navigation>.public-nav-group>summary,#public-navigation .account-controls .auth-button):active{transform:none}
}
