/* Shared site header */

:root{
  --headerH:48.6px;
  --siteHeaderH:48.6px;
  --siteHeaderRowH:34.2px;
  --siteHeaderRowPad:calc((var(--siteHeaderH) - var(--siteHeaderRowH)) / 2);
  --stage:963px;
  --siteHeaderStage:963px;
  --bar:rgba(2,8,16,.93);
  --siteHeaderBar:rgba(2,8,16,.93);
  --appFont:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.gameHeader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--siteHeaderH);
  z-index:12002;
  display:flex;
  justify-content:center;
  pointer-events:none;
  font-family:var(--appFont);
}

.gameHeader .bar{
  position:relative;
  width:min(var(--siteHeaderStage),100%);
  height:var(--siteHeaderH);
  background:var(--siteHeaderBar);
  border:0.9px solid rgba(122,162,220,.16);
  border-top:0;
  border-radius:0 0 25.2px 25.2px;
  backdrop-filter:blur(14.4px);
  display:flex;
  align-items:center;
  pointer-events:auto;
}

.gameHeader .barGrid{
  width:100%;
  height:var(--siteHeaderRowH);
  display:grid;
  grid-template-columns:43.2px minmax(0,1fr) minmax(0,auto);
  grid-template-rows:var(--siteHeaderRowH);
  align-items:center;
  justify-items:stretch;
  /* Previous left padding: 36.4px. Reduced by 8px to test moving the hamburger/brand cluster left. */
  padding:0 45px 0 23.4px;
}

.gameHeader.isGameHeader .barGrid{
  grid-template-columns:43.2px max-content max-content minmax(0,1fr) auto;
  column-gap:0;
}

.gameHeader .barLeft{
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
  min-width:0;
}

.gameHeader .barTitle{
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
  min-width:0;
  color:#fff;
  font-size:14.4px;
  font-weight:400;
  letter-spacing:.18em;
  line-height:1;
  white-space:nowrap;
}

.gameHeader .barBrandLink{
  display:inline-flex;
  align-items:center;
  height:100%;
  gap:8.8px;
  color:inherit;
  text-decoration:none;
  /* Previous brand offset: translateX(3px). Testing 5px left from there. */
  transform:translateX(-2px);
}

.gameHeader .barBrandLink:visited{color:inherit;}

.gameHeader .barRight{
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12.6px;
  height:100%;
  width:198px;
  min-width:0;
}

.gameHeader.isGameHeader .barRight{
  width:auto;
}

.gameHeader.isBrandHeader .barRight{
  width:auto;
}

.gameHeaderContext{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12.6px;
  margin-left:0;
  color:#e8eef8;
  font-size:10.8px;
  letter-spacing:.02em;
  overflow:hidden;
}

.gameContextLocationDotWrap{
  justify-self:stretch;
  width:15.4px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.gameContextLocationDot{
  width:5.4px;
  height:5.4px;
  border-radius:999px;
  background:#4385ff;
  box-shadow:0 0 7.2px rgba(67,133,255,.58);
}

.gameContextTitle{
  display:inline-flex;
  align-items:center;
  height:100%;
  color:#f5f8ff;
  font-size:14.4px;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.gameHeaderContext .gameContextGroup{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10.8px;
}

/* Temporary header blueprint grid for alignment review. Toggle with body.debugHeaderGrid. */
body.debugHeaderGrid .gameHeader .bar{
  outline:1px solid rgba(67,133,255,.34);
}

body.debugHeaderGrid .gameHeader .bar::before,
body.debugHeaderGrid .gameHeader .bar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:0;
  border-top:1px solid rgba(91,162,255,.95);
  box-shadow:0 0 6px rgba(91,162,255,.5);
  pointer-events:none;
}

body.debugHeaderGrid .gameHeader .bar::before{
  top:var(--siteHeaderRowPad);
}

body.debugHeaderGrid .gameHeader .bar::after{
  bottom:var(--siteHeaderRowPad);
}

body.debugHeaderGrid .gameHeader .barGrid > *{
  outline:1px solid rgba(67,133,255,.65);
  background:rgba(67,133,255,.08);
}

.gameHeaderContext .gameContextStat{
  min-width:45px;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.8px;
  line-height:1.05;
  white-space:nowrap;
}

.gameHeaderContext .gameContextLabel{
  color:#aeb9ca;
  font-size:8.6px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.gameHeaderContext .gameContextValue{
  color:#fff;
  font-size:12.6px;
  font-weight:700;
  letter-spacing:.02em;
}

.gameHeaderContext .gameContextTimer .gameContextValue{
  font-size:14.4px;
  font-weight:700;
  letter-spacing:.08em;
}

.gameHeaderContext .gameContextActions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6.3px;
}

.gameHeaderContext .iconBtn{
  width:28.8px;
  height:28.8px;
  border:0;
  border-radius:999px;
  background:rgba(164,175,194,.14);
  color:#c3ccda;
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
}

.gameHeaderContext .iconBtn:hover,
.gameHeaderContext .iconBtn:focus-visible{
  outline:0;
  background:rgba(164,175,194,.24);
  color:#fff;
}

.gameHeaderContext .iconSvg{
  width:15.3px;
  height:15.3px;
  fill:currentColor;
  opacity:1;
}

.gameHeader .sgMenuBtn{
  width:24.3px;
  height:24.3px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#dfe7f6;
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  align-self:center;
  transform:translateY(-0.9px);
}

.gameHeader .sgMenuBtn:hover,
.gameHeader .sgMenuBtn:focus-visible,
body.sgMenuOpen .gameHeader .sgMenuBtn{
  outline:0;
  color:#fff;
}

.gameHeader .sgMenuIcon,
.gameHeader .sgMenuIcon::before,
.gameHeader .sgMenuIcon::after{
  display:block;
  width:12.2px;
  height:1.2px;
  border-radius:999px;
  background:currentColor;
}

.gameHeader .sgMenuIcon{
  position:relative;
}

.gameHeader .sgMenuIcon::before,
.gameHeader .sgMenuIcon::after{
  content:"";
  position:absolute;
  left:0;
}

.gameHeader .sgMenuIcon::before{
  top:-4px;
  height:1.3px;
}
.gameHeader .sgMenuIcon::after{top:4px;}

.hubHeaderNav{
  display:flex;
  align-items:center;
  gap:20.7px;
  min-width:0;
}

.hubHeaderNav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24.3px;
  padding:0 1.8px;
  color:#d8e0ef;
  text-decoration:none;
  font-size:10.8px;
  font-weight:600;
  letter-spacing:.01em;
  transition:color .16s ease;
}

.hubHeaderNav a:hover,
.hubHeaderNav a:focus-visible{
  color:#fff;
  outline:0;
}

.hubHeaderNav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7.2px;
  width:5.4px;
  height:5.4px;
  border-radius:999px;
  background:#4385ff;
  opacity:0;
  transform:translateX(-50%) scale(.72);
  transition:opacity .16s ease,transform .16s ease;
}

.hubHeaderNav a:hover::after,
.hubHeaderNav a:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

.hubBrandIcon{
  width:22px;
  height:22px;
  color:#2f79ff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-2px);
  filter:drop-shadow(0 0 2.7px rgba(47,121,255,.95));
}

.hubBrandIcon svg{
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hubHeaderUtilities{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
  gap:8.1px;
}

.hubUtilityBtn{
  position:relative;
  width:34.2px;
  height:34.2px;
  border:0;
  border-radius:999px;
  background:rgba(164,175,194,.14);
  color:#c3ccda;
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}

.hubUtilityBtn::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7.2px;
  width:80%;
  height:1.8px;
  border-radius:999px;
  background:#4385ff;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .16s ease,transform .18s ease;
}

.hubUtilityBtn:hover,
.hubUtilityBtn:focus-visible,
.hubAccountBtn[aria-expanded="true"],
.hubSettingsBtn[aria-expanded="true"]{
  outline:0;
  background:rgba(164,175,194,.24);
  color:#fff;
}

.hubUtilityBtn:hover::after,
.hubUtilityBtn:focus-visible::after,
.hubAccountBtn[aria-expanded="true"]::after,
.hubSettingsBtn[aria-expanded="true"]::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

.gameHeader #settings-btn.hubSettingsBtn[data-header-utility="volume"],
.gameHeader .hubSettingsBtn[data-header-utility="volume"]{
  background:rgba(164,175,194,.14);
  border:0;
  border-radius:999px;
  padding:0;
  color:#c3ccda;
}

.gameHeader #settings-btn.hubSettingsBtn[data-header-utility="volume"]:hover,
.gameHeader #settings-btn.hubSettingsBtn[data-header-utility="volume"]:focus-visible,
.gameHeader #settings-btn.hubSettingsBtn[data-header-utility="volume"][aria-expanded="true"],
.gameHeader .hubSettingsBtn[data-header-utility="volume"]:hover,
.gameHeader .hubSettingsBtn[data-header-utility="volume"]:focus-visible,
.gameHeader .hubSettingsBtn[data-header-utility="volume"][aria-expanded="true"]{
  background:rgba(164,175,194,.24);
  color:#fff;
}

.hubUtilityBtn svg{
  width:17.1px;
  height:17.1px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hubSettingsBtn[data-volume-muted="true"] .volumeIconWave{
  display:none;
}

.hubSettingsBtn[data-volume-muted="false"] .volumeIconMute,
.hubVolumeMute[data-volume-muted="false"] .volumeIconMute{
  display:none;
}

.hubVolumeMute[data-volume-muted="true"] .volumeIconWave{
  display:none;
}

.hubVolumePopover{
  --volumePercent:80%;
  --volumeTrackActive:#9aa4b2;
  --volumeTrackRest:rgba(140,150,164,.44);
  --volumeThumb:#dce4ef;
  position:absolute;
  top:var(--siteHeaderH);
  right:calc(28.8px + 12.6px + 18px - 75px);
  width:150px;
  min-height:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  border:0;
  border-radius:999px;
  background:rgb(41,50,61);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
  color:#c3ccda;
}

.hubVolumePopover[hidden]{
  display:none;
}

.hubVolumeMute{
  width:21px;
  height:21px;
  border:0;
  border-radius:999px;
  background:rgba(164,175,194,.14);
  color:inherit;
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  flex:0 0 auto;
}

.hubVolumeMute:hover,
.hubVolumeMute:focus-visible{
  outline:0;
  background:rgba(164,175,194,.24);
  color:#fff;
}

.hubVolumeMute svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hubVolumeSlider{
  appearance:none;
  width:96px;
  height:16px;
  background:transparent;
  cursor:pointer;
}

.hubVolumeSlider:focus-visible{
  outline:0;
}

.hubVolumeSlider::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--volumeTrackActive) var(--volumePercent),var(--volumeTrackRest) var(--volumePercent));
}

.hubVolumeSlider::-webkit-slider-thumb{
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;
  border:2px solid rgba(164,175,194,.14);
  border-radius:999px;
  background:var(--volumeThumb);
  box-shadow:0 1px 5px rgba(0,0,0,.26);
}

.hubVolumeSlider::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:var(--volumeTrackRest);
}

.hubVolumeSlider::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:var(--volumeTrackActive);
}

.hubVolumeSlider::-moz-range-thumb{
  width:11px;
  height:11px;
  border:2px solid rgba(164,175,194,.14);
  border-radius:999px;
  background:var(--volumeThumb);
  box-shadow:0 1px 5px rgba(0,0,0,.26);
}

.hubAccountGlyph{
  position:relative;
  width:17.1px;
  height:17.1px;
  display:block;
}

.hubAccountGlyph::before,
.hubAccountGlyph::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:currentColor;
}

.hubAccountGlyph::before{
  top:1.8px;
  width:7.2px;
  height:7.2px;
  border-radius:999px;
}

.hubAccountGlyph::after{
  bottom:1.8px;
  width:13.5px;
  height:6.3px;
  border-radius:7.2px 7.2px 4.5px 4.5px;
}

.hubAccountNote{
  position:absolute;
  top:39.6px;
  right:7.2px;
  width:189px;
  padding:9px 10.8px;
  border:0.9px solid rgba(156,169,188,.18);
  border-radius:8.1px;
  background:rgba(7,18,34,.98);
  box-shadow:0 10.8px 25.2px rgba(0,0,0,.38);
  color:#b5c0d2;
  font-size:9.9px;
  line-height:1.4;
  text-align:left;
}

@media (max-width:1050px){
  :root{--siteHeaderStage:801px;}
  .gameHeader .barGrid{padding:0 21.6px;}
}

@media (max-width:820px){
  :root{--siteHeaderStage:calc(100% - 18px);}
  .gameHeader .barGrid{
    grid-template-columns:43.2px 1fr auto;
    padding:0 16.2px;
  }
  .gameHeader .barRight{width:auto;}
  .hubHeaderNav a{padding:0 9px;font-size:10.8px;}
  .gameHeader.isGameHeader .barGrid{
    grid-template-columns:37.8px minmax(0,1fr) auto;
  }
  .gameHeader.isGameHeader .barTitle{justify-self:center;}
  .gameHeader.isGameHeader .gameContextLocationDotWrap,
  .gameHeader.isGameHeader .gameHeaderContext{display:none;}
}

@media (max-width:640px){
  :root{--siteHeaderStage:calc(100% - 18px);}
  .gameHeader .bar{width:100%;}
  .gameHeader .barGrid{
    grid-template-columns:37.8px 1fr 37.8px;
    padding:0 18.9px 0 10.8px;
  }
  .gameHeader .barTitle{
    justify-self:center;
    font-size:10.8px;
  }
  .hubHeaderNav{display:none;}
  .hubSettingsBtn{display:none;}
  .hubVolumePopover{right:calc(28.8px + 18px - 75px);}
  .hubHeaderUtilities{gap:0;}
}