/* Shared Brand2Game header and menu. Keep client branding inside each game. */
.header,
.site-menu{
  --lime:#c5f75b;
  --text:#f7f5f0;
  --line:#ffffff22;
  --action-radius:11px;
  --action-height:56px;
  --action-ink:#201a2c;
  color:#f7f5f0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:normal;
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  position:relative;
  z-index:20;
  width:100%;
  max-width:1440px;
  height:100px;
  min-height:100px;
  margin:0 auto;
  padding:0 68px;
  border:0;
  background:#151120;
}
.header a,
.site-menu a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.header .wordmark,
.site-menu .wordmark{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  color:#f7f5f0;
  background:none;
  font-family:Arial,Helvetica,sans-serif;
  font-size:36px;
  font-weight:900;
  line-height:normal;
  letter-spacing:-2px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}
.wordmark .brand-name{display:inline-block;white-space:nowrap}
.wordmark .brand-two{color:#c5f75b;display:inline-block;margin:0 .015em}
.footer .wordmark{white-space:nowrap;flex-shrink:0}
.header .brand-icon,
.site-menu .brand-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  color:#c5f75b;
  font-size:44px;
  font-weight:400;
  line-height:1;
}
.header .brand-gamepad,
.site-menu .brand-gamepad{display:block;width:1em;height:.85em;flex-shrink:0;overflow:visible}
.header .studio,
.site-menu .studio{
  position:absolute;
  bottom:-12px;
  left:53px;
  color:#a99fb8;
  font-family:monospace;
  font-size:8px;
  font-weight:900;
  line-height:normal;
  letter-spacing:2.7px;
}
.header .desktop-nav{
  display:flex;
  align-items:center;
  flex-direction:row;
  gap:22px;
  position:static;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:#c7c1d1;
  box-shadow:none;
}
.header .desktop-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 4px;
  border-radius:7px;
  font-size:12px;
  font-weight:400;
  line-height:normal;
  white-space:nowrap;
  touch-action:manipulation;
  transition:color .18s,background-color .18s;
}
.header .desktop-nav a[aria-current="page"]{color:#c5f75b}
.header .nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  position:relative;
  isolation:isolate;
  min-height:44px;
  margin:0;
  padding:10px 16px;
  border:1px solid #776b87;
  border-radius:11px;
  background:#ffffff04;
  color:#f7f5f0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
  text-align:center;
  white-space:nowrap;
  touch-action:manipulation;
  cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
}
.header .menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  min-height:48px;
  margin:0;
  padding:12px;
  border:1px solid #7c6d8c;
  border-radius:11px;
  background:#ffffff04;
  color:#eee6f7;
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s,border-color .18s,transform .18s;
}
.header .ui-icon,
.site-menu .ui-icon{
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.header .ui-icon{width:22px;height:22px;flex:0 0 22px}
.header .menu-toggle .icon-close{display:none}
.header .menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.header .menu-toggle[aria-expanded="true"] .icon-close{display:block}
.header .wordmark:focus-visible,.site-menu .wordmark:focus-visible{outline:3px solid #c5f75b;outline-offset:5px}
.header :is(.desktop-nav a,.nav-cta,.menu-toggle):focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #151120}
.header :is(.nav-cta,.menu-toggle):active{transform:translateY(2px);transition-duration:.06s}
.site-menu .menu-topbar .wordmark{font-size:34px}
.site-menu .menu-topbar .brand-icon{font-size:42px}
.site-menu .menu-close{font:inherit;line-height:normal;padding:0}
.site-menu .menu-all-games,.site-menu .menu-game-bottom>b{color:#c5f75b}
.site-menu .button-lime{background:#c5f75b;color:#201a2c;border-color:#c5f75b}
.site-menu .button-lime:active{box-shadow:0 1px 0 #739036}
@media(hover:hover) and (pointer:fine){
  .header .desktop-nav a:hover{color:#c5f75b;background:#ffffff06}
  .header :is(.nav-cta,.menu-toggle):hover{background:#3d304b;border-color:#b49ec8;color:#fff}
  .site-menu .button-lime:hover{background:#d6ff79;border-color:#d6ff79;box-shadow:0 5px 0 #739036,0 0 28px #c5f75b15}
}
@media(min-width:1500px){.header{max-width:1500px}}
@media(max-width:1200px){.header .desktop-nav{gap:13px}.header .desktop-nav a{font-size:11px}}
@media(max-width:1200px){.header .desktop-nav{display:none}.header .nav-cta{margin-left:auto}}
@media(max-width:1100px){
  .header{padding:0 35px;gap:18px}
  .header .desktop-nav{display:none}
  .header .wordmark{font-size:30px}
  .header .brand-icon{font-size:37px}
  .header .studio{left:46px}
  .header .nav-cta{margin-left:auto;font-size:12px;padding:10px 12px;gap:10px}
}
@media(max-width:760px){
  .header{height:88px;min-height:88px;padding:0 20px;gap:10px}
  .header .wordmark{font-size:28px}
  .header .brand-icon{font-size:34px}
  .header .studio{left:44px;bottom:-9px;font-size:6px;letter-spacing:2.1px}
  .header .nav-cta{font-size:12px}
  .site-menu .studio{left:46px;bottom:-9px;font-size:6px;letter-spacing:2.1px}
}
@media(max-width:700px){
  .site-menu .menu-topbar .wordmark{font-size:28px}
  .site-menu .menu-topbar .brand-icon{font-size:34px}
  .site-menu .menu-topbar .studio{left:44px}
}
@media(max-width:560px){.header .nav-cta{display:none}.header .menu-toggle{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.header a,.header button{transition:none!important;transform:none!important}}

/* Selected pixel logo: original artwork, framed without changing its design. */
.wordmark .brand-logo{display:block;width:270px;height:auto;max-width:100%;flex:none;mix-blend-mode:lighten}
.header .wordmark,.site-menu .wordmark{line-height:1;letter-spacing:0;gap:0}
.footer .wordmark .brand-logo{width:195px}
@media(max-width:1100px){.header .wordmark .brand-logo{width:240px}}
@media(max-width:760px){.header .wordmark .brand-logo{width:210px}}
@media(max-width:700px){.site-menu .wordmark .brand-logo{width:210px}}
@media(max-width:389px){.header .wordmark .brand-logo,.site-menu .wordmark .brand-logo{width:200px}}