.brand {
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px 0 11px;
  color: var(--game-ivory);
  border: 1px solid rgba(229, 198, 92, .46);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(42, 34, 34, .94), rgba(17, 27, 42, .92));
  box-shadow: var(--glass-shadow), inset 3px 0 rgba(229, 198, 92, .45);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.brandMark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--game-gold-light);
}

.brand h1 {
  color: #f0e6cd;
  font-family: var(--display-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.wallet {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 118px;
  min-height: var(--control-h);
  padding: 4px 14px;
  color: var(--game-ivory);
  border: 1px solid var(--game-cyan-line);
  border-radius: 999px;
  background: linear-gradient(130deg, rgba(21, 42, 51, .94), rgba(16, 23, 34, .96));
  box-shadow: var(--glass-shadow);
  text-align: left;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color var(--motion-tick) ease, transform var(--motion-press) ease, box-shadow var(--motion-tick) ease;
}

.wallet span {
  display: block;
  color: #bac9d3;
  font-family: var(--utility-font);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wallet strong {
  display: block;
  color: #f0f4f6;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.wallet:hover,
.wallet:focus-visible {
  border-color: var(--game-cyan);
}

.wallet:active {
  transform: scale(.97);
}

.wallet.is-ticking {
  border-color: rgba(143, 222, 227, .62);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(143, 222, 227, .16);
}

.wallet.sandboxActive { border-color: rgba(45, 107, 255, .6); }
.wallet.sandboxActive strong { color: #9dbcff; }

.audioToggle {
  position: relative;
  display: grid;
  width: var(--control-h);
  height: var(--control-h);
  min-width: var(--control-h);
  min-height: var(--control-h);
  max-width: none;
  padding: 0;
  place-items: center;
  color: var(--game-ivory);
  border: 1px solid var(--game-violet-line);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(36, 35, 52, .94), rgba(16, 23, 34, .96));
  box-shadow: var(--glass-shadow);
  font-size: 0;
  letter-spacing: 0;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color var(--motion-tick) ease, color var(--motion-tick) ease, transform var(--motion-press) ease;
}

.audioToggle svg {
  width: 22px;
  height: 22px;
}

.audioToggle:not(:disabled):hover,
.audioToggle:focus-visible {
  color: #ede5ff;
  border-color: var(--game-violet);
}

.audioToggle:not(:disabled):active {
  transform: scale(.97);
}

.audioToggle[data-playing="true"] {
  color: #141c28;
  border-color: #a8851f;
  background: var(--gold-gradient);
}

.fairnessBtn::before,
.rulesBtn::before,
.tutorialBtn::before,
.accountBtn::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--glyph) center / 22px 22px no-repeat;
  mask: var(--glyph) center / 22px 22px no-repeat;
}

.fairnessBtn { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8.1-7 9-4-.9-7-4.6-7-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.rulesBtn { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
.tutorialBtn { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.4 2.3c-.7.4-1 1-1 1.8M12 17h.01'/%3E%3C/svg%3E"); }
.accountBtn { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13M14 5l3 3-3 3M20 16H7M10 13l-3 3 3 3'/%3E%3C/svg%3E"); }

.accountBtn.is-signedIn {
  border-color: rgba(212, 175, 55, .6);
  background: rgba(212, 175, 55, .16);
}

@media (max-width: 599px), (orientation: landscape) and (max-height: 500px) and (max-width: 719px) {
  .brand {
    width: var(--control-h);
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .brand h1 {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .wallet { min-width: 104px; padding: 4px 12px; }
  .wallet strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .wallet,
  .audioToggle { transition: none; }
}