/* One compact header for the website and game library. */
#sp-site-header{box-sizing:border-box;position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;width:calc(100% - 48px);max-width:1240px;min-height:80px;margin:0 auto;padding:12px 0;border-bottom:1px solid #193c3926;color:#193c39;font-family:"Avenir Next",system-ui,sans-serif;flex:0 0 auto}
#sp-site-header *{box-sizing:border-box}
#sp-site-header a{text-decoration:none;color:inherit}
#sp-site-header .sp-brand{display:flex;align-items:center;gap:10px;min-width:0;font-size:21px;font-weight:750;letter-spacing:-.65px;line-height:1.2;white-space:nowrap}
#sp-site-header .sp-mark{display:grid;place-items:center;font-size:30px;width:36px;flex-shrink:0;letter-spacing:0}
#sp-site-header sup{font-size:.48em;vertical-align:super;line-height:0;letter-spacing:0}
#sp-site-header .sp-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
#sp-site-header .sp-bag,#sp-site-header summary{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:8px;border:0;border-radius:9px;background:transparent;cursor:pointer;font-size:14px;font-weight:500;line-height:1.2;list-style:none}
#sp-site-header summary::-webkit-details-marker{display:none}
#sp-site-header summary::marker{content:""}
#sp-site-header .sp-menu{position:relative;margin:0;padding:0;border:0}
#sp-site-header .sp-menu[open] summary{background:#e9ede3}
#sp-site-header #bag-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;background:#e5eadf;border-radius:50%;font-size:11px}
#sp-site-header [hidden]{display:none!important}
#sp-site-header nav{position:absolute;right:0;top:calc(100% + 12px);display:flex;flex-direction:column;align-items:stretch;gap:2px;width:260px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:10px;background:#fffdf7;border:1px solid #cfd7cc;border-radius:16px;box-shadow:0 12px 35px #193c3926;text-align:left}
#sp-site-header nav a,#sp-site-header nav button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:11px 14px;border:0;border-radius:8px;background:transparent;color:#193c39;font:550 15px/1.4 "Avenir Next",system-ui,sans-serif;text-align:left;white-space:normal;cursor:pointer}
#sp-site-header nav [aria-current="page"]{background:#edf0e6;font-weight:750}
#sp-site-header nav .sp-donate{border-top:1px solid #dce1d5;border-radius:0;margin-top:5px;padding-top:14px}
#sp-site-header a:hover,#sp-site-header summary:hover,#sp-site-header nav button:hover{color:#a14e35}
#sp-site-header a:focus-visible,#sp-site-header summary:focus-visible,#sp-site-header button:focus-visible{outline:3px solid #ae573a;outline-offset:2px}
body:has(#library) #sp-site-header{width:100%;max-width:1200px}
body:has(#library:not([hidden])) .app-bar{display:none}
body:has(#library[hidden]) #sp-site-header{display:none}
@media(max-width:600px){
  #sp-site-header{width:calc(100% - 32px);min-height:64px;padding:6px 0;gap:6px}
  #sp-site-header .sp-brand{font-size:17px;letter-spacing:-.6px;gap:7px}
  #sp-site-header .sp-mark{font-size:25px;width:29px}
  #sp-site-header .sp-header-actions{gap:2px}
  #sp-site-header .sp-bag-label{display:none}
  #sp-site-header .sp-bag{gap:4px;padding:6px}
  #sp-site-header nav{top:calc(100% + 8px)}
}
@media(max-width:359px){#sp-site-header .sp-brand{font-size:15px;gap:4px}#sp-site-header .sp-mark{width:24px;font-size:22px}#sp-site-header .sp-header-actions{gap:0}}