/* Header specification supplied by the client. */
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .hero-head {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: min(100%, 360px) !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 9px 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: translateX(-50%) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(16px, calc(50% - 164px)) !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 71px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill::before {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/icons/plus-diamond.svg") center / 24px 24px no-repeat !important;
  clip-path: none !important;
  content: "" !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span {
  display: block !important;
  width: 35px !important;
  height: 20px !important;
  color: #f8f9fa !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
  text-transform: uppercase !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span::before {
  display: none !important;
  content: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(111px, calc(50% - 69px)) !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 47px !important;
  height: 32px !important;
  min-height: 32px !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  color: #f8f9fa !important;
  background: #1e2225 !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill span,
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill strong {
  color: #f8f9fa !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet.session-wallet {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(166px, calc(50% - 14px)) !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 69px !important;
  min-width: 69px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-main {
  display: grid !important;
  box-sizing: border-box !important;
  width: 69px !important;
  height: 32px !important;
  grid-template-columns: 24px 33px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet #balance {
  max-width: 33px !important;
  color: #f8f9fa !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-switch {
  position: absolute !important;
  top: 4px !important;
  left: 93px !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 85px !important;
  height: 24px !important;
  min-height: 24px !important;
  grid-template-columns: 44px 37px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="demo"] {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 100px !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="demo"]::after {
  top: 1px !important;
  left: 21px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 100px !important;
  background: #f8f9fa !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"] {
  position: static !important;
  width: 37px !important;
  height: 17px !important;
  min-height: 17px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::before {
  color: #f8f9fa !important;
  content: "DEMO" !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
}

/* Override the old state-specific sizing rules with the supplied 32px controls. */
html body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .plus-pill,
html body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .level-pill,
html body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .compact-wallet {
  top: 9px !important;
  height: 32px !important;
  min-height: 32px !important;
}

html body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .compact-wallet .wallet-main {
  height: 32px !important;
}

html body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill::before {
  background: url("/assets/icons/plus-diamond.svg") center / 24px 24px no-repeat !important;
}