/* Public map chrome: same palette and ink outlines as ZENTRALE. */
header{background:#fff3ba;border:2px solid #2a2824;border-radius:12px;box-shadow:4px 4px 0 #2a2824;color:#2a2824;font-family:'Comic Sans MS',cursive;top:20px;left:24px;right:24px;height:70px}
header .brand{color:#2a2824;font-family:inherit;letter-spacing:-1px;font-weight:700}
header .brand>span:last-child{font-weight:700}
header .mark{background:#ffdc28;color:#2a2824;border:2px solid #2a2824;border-radius:8px;box-shadow:2px 2px 0 #2a2824}
header .mark span{color:#2a2824}
header .divider{background:#2a2824;width:2px;opacity:.45}
header .location{color:#2a2824}
header .location small{color:#655738;letter-spacing:.5px}
header .badge{color:#2a2824;border:2px solid #2a2824;background:#ffdc28;border-radius:7px;box-shadow:2px 2px 0 #2a2824;font-weight:700;letter-spacing:1px}
/* Keep renderer control nodes available to their existing event handlers. */
aside.panel,#world-location{display:none!important}
#account-actions{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px}
#account-actions>span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#participate-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
#participate-actions a,#participate-actions button{display:inline-block;text-decoration:none;white-space:nowrap;background:#ffdc28;color:#2a2824;border:2px solid #2a2824;box-shadow:2px 2px #2a2824;border-radius:7px;padding:9px 14px;font:700 14px 'Comic Sans MS',cursive}
#participate-actions button:disabled{opacity:.6;cursor:default}
#participate-actions a:hover{background:#ffe989}
#account-actions{margin-left:0}
@media(max-width:1000px){header .location,header .divider{display:none}header{gap:12px}}
@media(max-width:650px){header{height:auto;min-height:100px;flex-wrap:wrap;padding:10px 14px;gap:10px}header .brand{margin-right:auto}#participate-actions{order:3;flex-basis:100%;margin-left:0;justify-content:center}#participate-actions a,#participate-actions button{padding:6px 12px;font-size:12px}#ollymaps-version{top:124px}}
#account-actions button,#account-dialog button{background:#ffdc28;color:#2a2824;border:2px solid #2a2824;box-shadow:2px 2px #2a2824;border-radius:7px;padding:9px 14px;font:700 14px 'Comic Sans MS',cursive;cursor:pointer}
#account-actions button:hover,#account-dialog button:hover{background:#ffe989}
#ollymaps-version{position:absolute;top:103px;left:33px;color:#2a2824;background:#fff3ba;border:1px solid #2a2824;border-radius:5px;padding:3px 8px;font:12px 'Comic Sans MS',cursive;pointer-events:none}
#account-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border:3px solid #2a2824;border-radius:12px;box-shadow:6px 6px #2a2824;background:#fff3ba;color:#2a2824;padding:25px;font:15px 'Comic Sans MS',cursive}
#account-dialog::backdrop{background:#131c2966}
#account-dialog h2{margin:0 35px 15px 0;font-size:26px}
#account-dialog label{display:block;margin:14px 0;font-weight:700}
#account-dialog [hidden]{display:none!important}
#account-dialog input,#account-dialog textarea{display:block;width:100%;margin-top:6px;padding:10px;border:2px solid #2a2824;border-radius:6px;background:#fffbee;color:#2a2824;font:16px 'Comic Sans MS',cursive}
#account-dialog textarea{font:14px monospace;overflow-wrap:anywhere;resize:none}
#account-dialog #account-close{position:absolute;top:14px;right:14px;padding:2px 10px;font-size:22px}
#account-dialog p{font-size:13px;line-height:1.5}
#account-dialog button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){header .location,header .divider{display:none}#account-actions{gap:7px}#account-actions button{padding:7px;font-size:12px}#account-actions>span{max-width:75px}#ollymaps-version{left:20px;top:84px}}
@media(max-width:800px){header{top:12px;left:12px;right:12px;height:60px;padding:0 14px;gap:12px}header .location{font-size:11px}header .badge{display:none}}

@media(max-width:650px){#ollymaps-version{top:130px}}

/* Primary action stays at the actual center of the header. */
header #join-scout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 24px;font-size:16px}
header #paypal-donate{display:flex;align-items:center;justify-content:center;width:auto;min-width:110px;gap:7px;height:44px;padding:3px 10px;background:#fffbee;opacity:1}
#paypal-donate svg{filter:drop-shadow(1px 1px 0 #2a2824)}
@media(max-width:1000px){header #join-scout{font-size:14px;padding:9px 15px}#account-actions{gap:7px}#account-actions button{padding:8px 10px}}
@media(max-width:650px){header #join-scout{position:static;transform:none;order:0}header #paypal-donate{width:auto;min-width:100px;height:38px}#participate-actions{justify-content:center}}

/* Keep startup covered until the city and its first building tiles are ready. */
#loading{position:fixed;inset:0;z-index:100;background:#fff3ba;color:#2a2824;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:'Comic Sans MS',cursive;transition:opacity .5s}
#loading strong{font-size:30px}#loading .spinner{border-color:#dbc887;border-top-color:#2a2824}

/* Compact header; the transparent brand extends beyond the bar. */
header{height:35px;min-height:35px;padding:0 14px;gap:16px;overflow:visible}
header .brand{flex:none;height:70px;position:relative;z-index:1;line-height:0}
header .brand-logo{display:block;width:auto;height:70px;max-width:260px;object-fit:contain}
header .divider{height:22px}
header .location{font-size:12px;line-height:1.1}
header .location small{font-size:9px;margin-top:2px}
header #join-scout,header #account-actions button{padding:3px 12px;font-size:12px;line-height:20px}
header #paypal-donate{height:28px;min-width:90px;padding:1px 7px;gap:4px;font-size:11px}
header #paypal-donate svg{width:24px;height:24px}
#ollymaps-version{top:76px}
@media(max-width:1000px){header{gap:10px}header .brand-logo{max-width:230px}header #join-scout{padding:3px 10px;font-size:12px}header #account-actions{gap:7px}header #account-actions button{padding:3px 8px}}
@media(max-width:650px){header{min-height:70px;height:auto;padding:5px 10px;gap:5px 8px;flex-wrap:wrap}header .brand{height:50px;margin-right:auto}header .brand-logo{height:50px;max-width:170px}header #participate-actions{flex-basis:auto;order:3;margin:0 auto;gap:8px}header #join-scout{position:static;transform:none}header #account-actions{margin-left:auto}header #account-actions button{padding:3px 6px;font-size:11px}#ollymaps-version{top:112px}}

/* Larger brand and flatter header buttons. */
header .brand{height:90px}
header .brand-logo{height:90px;max-width:320px}
header #join-scout,header #account-actions button{padding:1px 12px;line-height:18px}
header #paypal-donate{height:24px;padding:0 7px}
header #paypal-donate svg{width:20px;height:20px}
@media(max-width:1000px){header .brand-logo{max-width:270px}header #join-scout{padding:1px 10px}header #account-actions button{padding:1px 8px}}
@media(max-width:650px){header .brand{height:60px}header .brand-logo{height:60px;max-width:200px}header #account-actions button{padding:1px 6px}}

/* Planet and lettering are independent design targets; preserve their shared layout. */
header .brand-logo{position:relative;display:block;flex:none;width:281.25px;height:90px;max-width:320px}
header .brand-logo>img{position:absolute;display:block;max-width:none;object-fit:contain}
header .brand-planet{left:0;top:0;width:32%;height:100%}
header .brand-lettering{left:30.5263158%;top:15.5263158%;width:69.4736842%;height:78.9473684%}
@media(max-width:1000px){header .brand-logo{width:270px;max-width:270px}}
@media(max-width:650px){header .brand-logo{width:187.5px;height:60px;max-width:200px}}

/* Floating map controls without the former banner surface. */
#ollymaps-header{background:transparent;border-color:transparent;box-shadow:none;pointer-events:none}
#ollymaps-header .divider{visibility:hidden}
#ollymaps-header .location,#ollymaps-header #account-actions>span{color:#fff3ba;text-shadow:1px 1px 0 #2a2824,-1px -1px 0 #2a2824,0 1px 3px #2a2824}
#ollymaps-header .brand,#ollymaps-header button,#ollymaps-header #participate-actions a{pointer-events:auto}

/* The account name opens the compact menu in the existing header position. */
#ollymaps-header #account-actions{position:relative}
#ollymaps-header .account-name{max-width:min(220px,45vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ollymaps-header .account-name::after{content:' ▾'}
#ollymaps-header .account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;gap:7px;min-width:185px;max-width:calc(100vw - 32px);padding:9px;background:#fff3ba;border:2px solid #2a2824;border-radius:9px;box-shadow:3px 3px #2a2824;pointer-events:auto}
#ollymaps-header .account-menu[hidden]{display:none}
#ollymaps-header #account-actions .account-menu button{text-align:left;white-space:nowrap;padding:6px 10px;line-height:20px;background:#fffbee}
#ollymaps-header #account-actions .account-menu button:hover,#ollymaps-header #account-actions .account-menu button:focus-visible{background:#ffdc28}