/* Pennies to Pounds — overrides on top of the shared arcade shell */

body {
  background:
    radial-gradient(900px 520px at 50% -14%, #fffaf0 0%, rgba(255, 250, 240, 0) 70%),
    radial-gradient(1200px 700px at 50% -10%, #fdf7ff 0%, #f1ecfb 55%, #e5e0f6 100%);
}

#scoreboard { flex-wrap: wrap; }

.score-item {
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.86);
}

.score-item.purse span:last-child {
  font-variant-numeric: tabular-nums;
  color: #7a5b12;
}

#score { font-variant-numeric: tabular-nums; }

/* Next-up coins are rendered as real minted sprites, not flat discs. */
#next-bar { background: rgba(255, 255, 255, 0.86); }

.next-token {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 3px rgba(52, 30, 110, 0.28));
}

.next-token.up-next {
  position: relative;
  padding-bottom: 5px;
}

.next-token.up-next::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #4b42e2;
  opacity: 0.65;
}

.next-token canvas { display: block; }

#currencySelect {
  font-family: inherit;
  font-weight: 600;
  color: #2a2054;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(42, 32, 84, 0.18);
  border-radius: 12px;
  padding: 9px 10px;
  cursor: pointer;
}

/* The shared stylesheet only targets a fixed list of buttons, so this one
   needs the full treatment rather than a background override. */
#muteBtn {
  cursor: pointer;
  border: none;
  background: linear-gradient(180deg, #8f88ff, #6259e8);
  color: white;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: inherit;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  box-shadow: 0 8px 24px rgba(49, 43, 171, 0.3);
}

#muteBtn:hover { filter: brightness(1.05); }
#muteBtn:active { filter: brightness(0.95); }

#muteBtn.muted {
  background: linear-gradient(180deg, #b9b4cf, #8f89ab);
  box-shadow: 0 8px 24px rgba(80, 74, 110, 0.24);
}

#overlay .panel .hint {
  font-size: 14px;
  opacity: 0.65;
}

#overlay .panel kbd {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  background: rgba(42, 32, 84, 0.08);
  border: 1px solid rgba(42, 32, 84, 0.16);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
}

@media (max-width: 720px) {
  #overlay .panel .hint { display: none; }
  #muteBtn { min-width: 0; padding: 8px 10px; font-size: 14px; border-radius: 10px; }
  #currencySelect { padding: 7px 8px; font-size: 14px; }
}