/* 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}}