/* Top menu bar. Sits above the world canvas, below the game windows (mmorpgOverlay is z-index 18). */
/* Desktop height of #kheldraTopBar: 5px padding x2, 1px border x2, and a 48px button (24px icon, 2px gap, 11px label, padding and border). Other rules place things at top: 8px + this + 8px. */
:root{--k-topbar-h:60px}
#kheldraTopBar{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:9;display:flex;gap:4px;padding:5px 6px;background:linear-gradient(#162a21f2,#0c1813f2);border:1px solid #a58c5b;border-radius:10px;box-shadow:0 8px 22px #000a,inset 0 0 0 1px #0007;pointer-events:auto}
#kheldraTopBar[hidden]{display:none}
#kheldraCompass{position:fixed;top:72px;left:50%;width:360px;height:30px;z-index:9;overflow:hidden;transform:translateX(-50%);border:1px solid #a58c5b;border-radius:7px;background:#0c1813ef;box-shadow:0 5px 16px #0009;color:#f1d39a;font:700 13px/28px Grenze Gotisch,Georgia,serif;pointer-events:none}
#kheldraCompass[hidden]{display:none}
/* 382.5px = the middle of label 9 (the first N of the middle turn), so heading 0 sits under the marker. */
.kheldraCompassTrack{position:absolute;top:0;left:50%;display:flex;width:max-content;transform:translateX(calc(-382.5px - var(--compass-shift,0px)));transition:transform .18s ease}
.kheldraCompassLabel{display:block;width:45px;text-align:center;flex:0 0 45px}
.kheldraCompassMarker{position:absolute;top:-2px;left:50%;z-index:1;transform:translateX(-50%);color:#f4d48c;font-size:12px;line-height:12px}
#kheldraTopBar button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:54px;margin:0;padding:5px 6px 4px;border:1px solid transparent;border-radius:7px;background:transparent;color:#f1d39a;font:700 11px/1 Grenze Gotisch,Georgia,serif;letter-spacing:.04em;cursor:pointer}
#kheldraTopBar button:hover{background:#2c4b3a;border-color:#8f7a51}
#kheldraTopBar button:focus-visible{outline:2px solid #f4d48c;outline-offset:1px}
#kheldraTopBar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){#kheldraTopBar button{min-width:40px}#kheldraTopBar button span{display:none}}
@media(max-width:900px){#kheldraCompass{display:none}}
@media(max-width:560px){#kheldraTopBar{gap:0;padding:3px}#kheldraTopBar button{min-width:34px;padding:4px}}
/* The recovery-email prompt used the same top-centre spot as the compass, notices and coach. Desktop: under the coach (coach ends at 257px).
   Tablet portrait: under the coach, right of the checklist chip. Phones keep their own rules (phone-layout.css / touch.css). */
@media(min-width:901px){body:has(#kheldraTopBar:not([hidden])) .k-verify-banner{top:266px!important}}
@media(min-width:481px) and (max-width:900px) and (min-height:481px){body:has(#kheldraTopBar:not([hidden])) .k-verify-banner{top:224px!important;left:240px;transform:none;max-width:min(400px,calc(100vw - 252px))}}
@media(max-width:480px){body:has(#kheldraTopBar:not([hidden])) .k-verify-banner{top:84px!important}}
/* Phone landscape: the free pocket between the chat (ends 417px) and the minimap column, above the hotbar. */
@media(min-width:481px) and (max-height:480px) and (orientation:landscape){body:has(#kheldraTopBar:not([hidden])) .k-verify-banner{top:174px!important;left:424px;transform:none}}
/* On desktop the side menu was always open; it now follows its Menu button like it does on phones. */
@media(min-width:701px){html body #hudMenu[data-open="false"]{display:none}}