/* GodlyFlip primary navigation — compact live-mode register, v302. */
@keyframes gf-nav-value-refresh {
  45% { color:#f1ddfa; }
}

html.gf-scale #gfPrimaryNav.gf-primary-nav {
  --gf-nav-height:76px;
  display:inline-flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:1px!important;
  width:max-content!important;
  height:var(--gf-nav-height)!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid #242129!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  isolation:isolate!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button {
  all:unset!important;
  position:relative!important;
  box-sizing:border-box!important;
  isolation:isolate!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:var(--gf-nav-height)!important;
  margin:0!important;
  padding:0 15px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#8f8a95!important;
  font:650 16px/20px Manrope,"Segoe UI",system-ui,sans-serif!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:color .16s ease!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game {
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:20px 20px!important;
  place-items:center!important;
  align-content:center!important;
  row-gap:5px!important;
  width:144px!important;
  min-width:144px!important;
  padding:0 12px!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-label {
  all:unset!important;
  grid-column:1!important;
  grid-row:1!important;
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:inherit!important;
  font:750 17px/20px Manrope,"Segoe UI",system-ui,sans-serif!important;
  letter-spacing:-.028em!important;
  text-align:center!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  transform:none!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat {
  all:unset!important;
  grid-column:1!important;
  grid-row:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  height:20px!important;
  color:#bd7fd7!important;
  font-variant-numeric:tabular-nums!important;
  opacity:.88!important;
  pointer-events:none!important;
  transform:none!important;
  transition:color .16s ease,opacity .16s ease!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat::before {
  content:none!important;
  display:none!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat .g-coin {
  display:block!important;
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  margin:0!important;
  opacity:1!important;
  filter:drop-shadow(0 0 6px rgba(178,92,211,.28))!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat strong {
  all:unset!important;
  display:block!important;
  color:inherit!important;
  font:780 17px/20px Manrope,"Segoe UI",system-ui,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:-.03em!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-game > i,
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-mode-icon {
  display:none!important;
}

/* Selected state: a flush dark plane with dissolved edges, never a card. */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button::before {
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0 2px!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:
    radial-gradient(ellipse 88% 68% at 50% 105%,rgba(171,105,198,.16),transparent 72%),
    linear-gradient(180deg,rgba(108,65,126,.025),rgba(86,49,102,.1))!important;
  box-shadow:none!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .18s ease!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button::after {
  content:""!important;
  position:absolute!important;
  right:auto!important;
  bottom:0!important;
  left:50%!important;
  display:block!important;
  width:52px!important;
  height:2px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,transparent,#81568f 20%,#c188d7 50%,#81568f 80%,transparent)!important;
  box-shadow:0 -4px 12px rgba(168,101,195,.18)!important;
  opacity:0!important;
  transform:translateX(-50%) scaleX(.64)!important;
  transform-origin:center!important;
  transition:opacity .16s ease,transform .2s cubic-bezier(.22,.75,.25,1)!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game::after {
  width:76px!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button:hover:not(:disabled) {
  color:#d9d4dd!important;
  background:transparent!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button:hover:not(:disabled)::before {
  opacity:.38!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game:hover .top-nav-stat {
  color:#d094e8!important;
  opacity:1!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game:hover .top-nav-stat .g-coin,
html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game.active .top-nav-stat .g-coin {
  filter:drop-shadow(0 0 8px rgba(190,105,224,.4))!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.active,
html.gf-scale #gfPrimaryNav.gf-primary-nav > button.active:hover {
  color:#faf8fb!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.active::before {
  opacity:1!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.active::after,
html.gf-scale #gfPrimaryNav.gf-primary-nav > button:focus-visible::after {
  opacity:1!important;
  transform:translateX(-50%) scaleX(1)!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button.active .top-nav-stat {
  color:#a56bff!important;
  opacity:1!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button:focus,
html.gf-scale #gfPrimaryNav.gf-primary-nav > button:focus-visible {
  outline:0!important;
  box-shadow:none!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav > button:disabled {
  color:#69646d!important;
  cursor:default!important;
}

html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat.is-updated strong {
  animation:gf-nav-value-refresh .34s ease!important;
}

@media (max-width:1450px) {
  html.gf-scale #gfPrimaryNav.gf-primary-nav {
    --gf-nav-height:70px;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav > button {
    padding-right:13px!important;
    padding-bottom:0!important;
    padding-left:13px!important;
    font-size:14.5px!important;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game {
    width:130px!important;
    min-width:130px!important;
    row-gap:5px!important;
    padding:0 10px!important;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-label {
    font-size:15.5px!important;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat .g-coin {
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat strong {
    font-size:15.5px!important;
  }
}

@media (max-width:1050px) {
  html.gf-scale #gfPrimaryNav.gf-primary-nav {
    justify-content:flex-start!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav::-webkit-scrollbar {
    display:none!important;
  }

  html.gf-scale #gfPrimaryNav.gf-primary-nav > button {
    flex:0 0 auto!important;
  }
}

/* claude 2026-08-06: header spacing pass (ChatGPT review). Group logo+nav on the LEFT (they were floating apart - nav was centered between two auto-margins), actions on the right, consistent gaps. */
html.gf-scale main>header{justify-content:flex-start!important;gap:40px!important}
html.gf-scale main>header>.top-brand{position:relative!important;left:auto!important;margin:0!important;flex:0 0 auto!important}
html.gf-scale main>header>#gfPrimaryNav{margin:0!important;flex:0 0 auto!important}
html.gf-scale main>header>.header-right{margin-left:auto!important;gap:13px!important;flex:0 0 auto!important}
/* Coinflip/Jackpot: a touch more air between the label and its number */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game{row-gap:7px!important}
/* active-tab underline a little wider + a hair more centred glow */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button::after{width:60px!important}
html.gf-scale #gfPrimaryNav.gf-primary-nav > button.top-nav-game::after{width:90px!important}

/* claude 2026-08-06: token/coin smaller than the number text (was 19px coin vs 17px text - token read bigger). */
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat{gap:5px!important}
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat .g-coin{width:14px!important;height:14px!important;flex:0 0 14px!important;flex-basis:14px!important}

/* claude 2026-08-06: smaller stat numbers (were 17px = same as the label); coin down to 12px so it stays under the number. */
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat strong{font-size:14px!important}
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat .g-coin{width:12px!important;height:12px!important;flex:0 0 12px!important;flex-basis:12px!important}

/* claude 2026-08-06: coin/token icon bigger again (12px read too tiny). */
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat .g-coin{width:16px!important;height:16px!important;flex:0 0 16px!important;flex-basis:16px!important}

/* claude 2026-08-06: nav labels UPPERCASE with caps-appropriate tracking (Manrope). */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button{text-transform:uppercase!important;letter-spacing:.075em!important}
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-label{text-transform:uppercase!important;letter-spacing:.075em!important}

/* claude 2026-08-06: nav labels -> Space Grotesk (the brand font), way more character than Manrope for uppercase. Numbers stay Manrope (tabular). */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button,
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-label{
  font-family:"Space Grotesk",Manrope,"Segoe UI",sans-serif!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}

/* claude 2026-08-06: nav CENTERED in the header (user pref) - logo left, nav dead-center, actions right. 3-col grid so the nav centers regardless of the two side widths. */
html.gf-scale main>header{display:grid!important;grid-template-columns:1fr max-content 1fr!important;align-items:center!important;gap:0!important;justify-content:normal!important}
html.gf-scale main>header>.top-brand{position:relative!important;left:auto!important;grid-column:1!important;justify-self:start!important;margin:0!important}
html.gf-scale main>header>#gfPrimaryNav{grid-column:2!important;justify-self:center!important;margin:0!important}
html.gf-scale main>header>.header-right{grid-column:3!important;justify-self:end!important;margin:0!important}

/* claude 2026-08-06: nav font -> Inter (clean, simple UI standard). Manrope/Space Grotesk both rejected. Applies to labels + numbers so the nav is one clean font; logo stays the brand font. */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button,
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-label,
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-stat strong{
  font-family:Inter,"Segoe UI",system-ui,sans-serif!important;
  letter-spacing:.045em!important;
}
html.gf-scale #gfPrimaryNav.gf-primary-nav > button,
html.gf-scale #gfPrimaryNav.gf-primary-nav .top-nav-label{font-weight:600!important}

/* claude 2026-08-06: align ALL nav labels on one row. Game buttons (COINFLIP/JACKPOT) put the label in a top row w/ the number below, so their labels sat higher than the single-line INVENTORY/AFFILIATES/RACE (which were vertically centered). Give the single-line buttons the SAME 2-row grid so the label lands in the same top row (row 2 stays empty). */
html.gf-scale #gfPrimaryNav.gf-primary-nav > button:not(.top-nav-game){
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:20px 20px!important;
  place-items:center!important;
  align-content:center!important;
  row-gap:7px!important;
}

/* claude 2026-08-06: user wants nav CENTERED -> 3-col grid (logo left, nav dead-center of the header, actions right). */
html.gf-scale main>header{display:grid!important;grid-template-columns:1fr max-content 1fr!important;align-items:center!important;gap:0!important;justify-content:normal!important}
html.gf-scale main>header>.top-brand{position:relative!important;left:auto!important;grid-column:1!important;justify-self:start!important;margin:0!important}
html.gf-scale main>header>#gfPrimaryNav{grid-column:2!important;justify-self:center!important;margin:0!important}
html.gf-scale main>header>.header-right{grid-column:3!important;justify-self:end!important;margin:0!important}
html.gf-scale #gfPrimaryNav.gf-primary-nav > button:not(.top-nav-game){display:inline-flex!important;grid-template-rows:none!important;align-items:center!important;justify-content:center!important}