/* Site header outside the lobby (includes/gto-header.php): a 1:1 copy of the lobby header, plus the Muck GTO submenu.
   Used by the Muck GTO pages and membership.php. */
/* Main nav on top (the lobby's own links and look), the Muck GTO menu as a submenu row under it (includes/gto-header.php). */
.gto-main{flex:1}
.gto-main a{font-size:12px;font-weight:600;color:#b9b9b2}
.gto-sub{border-bottom:1px solid #292929;background:var(--muck-surface-1)}
.gto-sub-in{display:flex;align-items:center;gap:4px;height:48px;padding:0 28px;overflow-x:auto;scrollbar-width:none}
@media(min-width:761px){.gto-sub-in{padding-left:max(26px,calc((100% - 1600px)/2 + 26px));padding-right:max(26px,calc((100% - 1600px)/2 + 26px))}}
.gto-sub a{flex:none;padding:7px 11px;border:1px solid transparent;border-radius:var(--muck-radius-sm);color:var(--muck-text-2);font:600 12.5px var(--muck-font);text-decoration:none;white-space:nowrap}
.gto-sub a:hover{color:var(--muck-text);background:var(--muck-surface-2)}
.gto-sub a[aria-current=page]{color:var(--muck-gold-muted);background:color-mix(in srgb,var(--muck-gold) 9%,var(--muck-bg));border-color:color-mix(in srgb,var(--muck-gold) 30%,var(--muck-bg))}
.gto-sub a:focus-visible,.gto-main a:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px}
.gto-sub .gto-sub-brand{margin-right:8px;padding-left:0;padding-right:14px;border-width:0 1px 0 0;border-radius:0;border-right-color:#292929;background:none;color:var(--muck-text);font-weight:800;letter-spacing:-.2px}
.gto-sub .gto-sub-brand span{color:var(--muck-gold)}
.gto-sub .gto-sub-brand[aria-current=page]{background:none;color:var(--muck-text);border-color:transparent #292929 transparent transparent}
.gto-sub{view-transition-name:gto-sub}
@media(max-width:760px){.gto-sub-in{height:44px;padding:0 12px}.gto-sub a{padding:6px 8px;font-size:12px}}
@media(max-width:760px){.gto-head .gto-main{order:3;flex:1 0 100%;justify-content:flex-start}.gto-head .gto-play{margin-left:auto}}

/* Sticky on every page, phones too (Shaun, 2026-10-09: "the header is not sticky on some pages"), like the lobby's, which
   stays put while the lobby scrolls under it. z-index 90: under the Muck GTO modals (100) and the menu panel (1000). */
/* ── Site header on Muck GTO pages = the lobby header, 1:1 (includes/gto-header.php; values measured off
   #lobby-mobile-header: 73px tall, full width with 26px sides, logo 155×52, nav from x=212, 40px pills). ── */
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:100 700;font-display:block;src:url('fonts/material-symbols-rounded-sub.woff2?v=9') format('woff2')}
:is(.gto-head,.gh-drop,.br-nav,.ptw-ticket) .material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400}
.gto-head{position:sticky!important;top:0;z-index:90;display:flex;align-items:center;gap:0;box-sizing:border-box;padding:10px 26px!important;background:#0e0e0e;border-bottom:1px solid #292929}
.gto-head .gto-logo{flex:none;display:flex;width:164px;border-radius:6px}
.gto-head .gto-logo img{display:block;width:155px;height:auto;translate:0 -1.3%}   /* the artwork sits 1.3% low in its image: this centres the drawn logo in the header (Shaun, 2026-10-17) */
.gto-head .gto-main{display:flex;align-items:center;gap:8px;flex:none;margin:0 auto 0 22px}
.gto-head .gto-main a{display:flex;align-items:center;box-sizing:border-box;min-height:40px;padding:10px 13px;border:1px solid transparent;border-radius:8px;background:transparent;color:#b9b9b2;font:600 12px Inter,system-ui;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.gto-head .gto-main a[hidden]{display:none}   /* Missions until api/me.php says you're signed in (gto-header.php) */
.gto-head .gto-main a:hover{color:#fff7df;background:#292925;border-color:#47473c}
.gto-head .gto-main a[aria-current=page]{color:#d8bd84;background:#2c281e;border-color:#5c4e30}
.gto-head .gh-right{display:flex;align-items:center;gap:19px;margin-left:auto}
.gto-head .gh-profile{display:flex;align-items:center;gap:10px;border-radius:8px;color:#f1f2f7;font:14px/21px Inter,system-ui,sans-serif;text-decoration:none}
.gto-head .gh-profile[hidden],.gto-head .gh-signin[hidden]{display:none}
.gto-head .gh-av{position:relative;display:flex}
.gto-head .gh-av img{display:block;width:40px;height:40px;box-sizing:border-box;border:2px solid #a970ff;border-radius:50%;background:#30313d;object-fit:cover}
.gto-head .gh-online{position:absolute;left:29px;top:29px;width:11px;height:11px;box-sizing:border-box;border:2px solid #181818;border-radius:50%;background:#35d364}
.gto-head .gh-info{display:flex;flex-direction:column}
.gto-head .gh-name{font:750 14px/20px Inter,system-ui,sans-serif;color:#f1f2f7}
.gto-head .gh-chips{display:flex;align-items:center;gap:3px;color:#ffd34f;font:700 10px/17px Inter,system-ui,sans-serif}
.gto-head .gh-chips .material-symbols-rounded{font-size:12px}
.gto-head .gh-pill{display:flex;overflow:hidden;border:1px solid #383b39;border-radius:10px;background:#1d1f1f}
.gto-head .gh-icon,.gto-head .gh-menu{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#c8c9d0;text-decoration:none}
.gto-head .gh-icon:hover,.gto-head .gh-menu:hover{color:#fff}
.gto-head .gh-icon .material-symbols-rounded,.gto-head .gh-menu .material-symbols-rounded{font-size:20px}
.gto-head .gh-menu{display:none;border:1px solid #383b39;border-radius:10px;background:#1d1f1f}
/* Sign In and Join Free sized exactly like the lobby header's (#lmh-signin-btn, #lmh-guest-play-btn), so the header doesn't
   shift between the homepage family and these pages (Shaun, 2026-10-29: "the header seems to be jumping around a hair"); Join
   Free sits 14px from Sign In like the lobby, the right group's 19px gap less 5 */
.gto-head{height:auto;min-height:71.78px}
.gto-head .gh-signin{display:flex;align-items:center;box-sizing:border-box;height:40px;padding:0 14px;border:1px solid #363941;border-radius:7px;background:transparent;color:#b4b4b4;font:650 13px var(--muck-font,Inter),system-ui;text-decoration:none}
.gto-head .gh-signin.gh-join{margin-left:-5px;padding:0 18px;border-color:var(--muck-gold-cta);background:var(--muck-gold-cta);color:var(--muck-gold-ink);font-weight:750}
.gto-head .gh-signin.gh-join:hover{background:var(--muck-gold-cta-hover);border-color:var(--muck-gold-cta-hover)}
.gto-head :is(a):focus-visible{outline:2px solid #d8bd84;outline-offset:3px}
/* 1001-1240px: one row still, a little tighter (a 1034px Chrome window ran 33-86px off the right; device check, 2026-10-04). */
@media(min-width:1001px) and (max-width:1240px){.gto-head .gto-main{gap:2px;margin-left:12px}.gto-head .gto-main a{padding:10px 8px}.gto-head .gh-right{gap:10px}}
@media(max-width:1000px){
  .gto-head{height:112px;flex-wrap:wrap;align-content:center;padding:0 26px!important}
  .gto-head .gto-main{order:10;width:100%;margin:0;justify-content:space-between}
  .gto-head .gto-main a{padding:12px 8px}
}
@media(max-width:768px){.gto-head .gto-main a{padding:9px 7px;font-size:11px}}
@media(max-width:719px){
  .gto-head{padding:0 14px!important}
  .gto-head .gh-profile,.gto-head .gh-pill,.gto-head .gh-signin{display:none!important}
  .gto-head .gh-menu{display:flex}
  .gto-head .gto-main .gh-wide{display:none}
}
/* Same thin scrollbar as the lobby's scroller, so the header's right edge lands in the same place. */
html{scrollbar-width:thin;scrollbar-color:#3c3f46 transparent}
/* Desktop: the header's contents sit on the content column (max 1600px with 26px sides), the same edges the lobby
   aligns its header to, so the logo and the account cluster don't move between pages. */
@media(min-width:1001px){.gto-head{padding-left:max(26px,calc((100% - 1600px)/2 + 26px))!important;padding-right:max(26px,calc((100% - 1600px)/2 + 26px))!important}}
@media(max-width:1000px){.gto-head .gto-main a{font-size:11px;padding:10px 13px}.gto-head .gh-right{gap:7px}.gto-head .gh-name{font-size:13px}}
@media(max-width:768px){.gto-head .gto-main a{padding:9px 7px}}
@media(max-width:1000px){.gto-head .gto-main,.gto-head .gh-right{transform:translateY(-1px)}}
.gto-head .gh-profile.is-member .gh-av img{border-color:#ffd34f;box-shadow:0 0 10px #ffd34f44}
.gto-head .gto-main a.nav-membership{color:#ffd34f}
.gto-head .gto-main a.nav-membership:hover{color:#fff1b8}
/* Keep all five mobile destinations, including MuckLab, within the header. */
@media(max-width:719px){.gto-head .gto-main{gap:0}.gto-head .gto-main a{font-size:10px;padding:9px 4px}}
/* Phones: one row (logo + hamburger); the links and account items open from the hamburger (includes/gto-header.php,
   Shaun 2026-10-03: "shouldnt all those be in the hamburger?"). */
.gh-drop{display:none}
@media(max-width:719px){
  .gto-head{height:70px;min-height:0;flex-wrap:nowrap}
  .gto-head .gto-main{display:none!important}
  .gto-head .gh-menu[aria-expanded=true]{border-color:#5c4e30;color:#d8bd84}
  .gh-drop:not([hidden]){display:block;position:fixed;left:12px;right:12px;z-index:1000;max-height:calc(100vh - 80px);overflow:auto;padding:8px;border:1px solid #383b39;border-radius:14px;background:#161716;box-shadow:0 18px 40px -12px #000c;font-family:Inter,system-ui,sans-serif}
  .gh-drop-nav,.gh-drop-acct{display:flex;flex-direction:column}
  .gh-drop-acct{margin-top:6px;padding-top:6px;border-top:1px solid #2a2c2a}
  .gh-drop a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:10px;color:#e6e7e2;font-size:15px;font-weight:600;text-decoration:none}
  .gh-drop a:not([hidden]){display:flex}
  .gh-drop a[hidden]{display:none}
  .gh-drop a:active,.gh-drop a:hover{background:#232422}
  .gh-drop-nav a[aria-current=page]{color:#d8bd84;background:#2c281e}
  .gh-drop-acct a{color:#b9b9b2;font-size:14px}
  .gh-drop .material-symbols-rounded{font-size:20px;color:#8f9390}
  .gh-drop-bal{margin-left:auto;color:#d8bd84;font-size:12px;font-weight:700}
}
/* Get Muck Bucks, the same grey button as the lobby's (assets/home-hover.css .lmh-get-bucks-btn) */
.gto-head .gh-bucks{display:inline-flex;align-items:center;gap:8px;height:42px;box-sizing:border-box;padding:0 16px;margin-right:4px;border:1px solid #383b39;border-radius:10px;background:#1d1f1f;color:#f4f1e9;font:700 14px/1 var(--muck-font,Inter,system-ui,sans-serif);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.gto-head .gh-bucks[hidden]{display:none}
.gto-head .gh-bucks .material-symbols-rounded{font-size:22px;color:#ffd34f;font-variation-settings:'FILL' 1;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.gto-head .gh-bucks:hover{background:#292b31;color:#cdb47e}.gto-head .gh-bucks:hover .material-symbols-rounded{transform:rotate(-20deg) scale(1.1)}}
@media(max-width:719px){.gto-head .gh-bucks{display:none!important}}
/* Shop inside the cog's pill (includes/gto-header.php), a short line before the cog, like the lobby */
.gto-head .gh-pill .gh-bucks{height:40px;margin:0;border:0;border-radius:0;background:transparent}
.gto-head .gh-pill .gh-bucks:not([hidden])+.gh-icon{position:relative}
.gto-head .gh-pill .gh-bucks:not([hidden])+.gh-icon::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:#383b39}



/* Phones: nothing under 12px, reading text 13px (Shaun, 2026-10-30, mobile text audit) */
@media (max-width: 720px) {
  .gto-sub a { font-size: 13px; }
}