/* Sky Sunder gold button finish
   Paint-only layer: geometry, typography and behavior remain owned by the component styles. */
:root {
  --ss-button-gold-ink: #201308;
  --ss-button-gold-border: #c59b4f;
  --ss-button-gold-border-bright: #dfc47d;
  --ss-button-gold-top: #dfc176;
  --ss-button-gold-mid: #d4af5c;
  --ss-button-gold-band: #cda34e;
  --ss-button-gold-low: #bf923e;
  --ss-button-gold-deep: #b48132;
}

/* The complete gold primary family. More specific title-screen rules retain the violet Singleplayer CTA. */
:is(
  button.big:not(.ghost):not(.secondary),
  #readyBtn,
  #placeGo,
  #roBtn,
  #miBtn,
  #summitClaim,
  #lbyCreate,
  #nameGoBtn,
  #runContBtn,
  .ss-button--primary,
  .ss-exit-dialog__button--primary
) {
  color: var(--ss-button-gold-ink) !important;
  -webkit-text-fill-color: var(--ss-button-gold-ink) !important;
  border-color: var(--ss-button-gold-border) !important;
  background:
    linear-gradient(180deg, rgba(255,250,222,.3) 0%, rgba(255,241,188,.08) 20%, transparent 38%),
    linear-gradient(108deg, transparent 14%, rgba(255,232,151,.04) 30%, transparent 47%, rgba(82,43,7,.025) 74%, transparent 90%),
    linear-gradient(180deg,
      var(--ss-button-gold-top) 0%,
      var(--ss-button-gold-mid) 52%,
      var(--ss-button-gold-band) 66%,
      var(--ss-button-gold-low) 86%,
      var(--ss-button-gold-deep) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,211,.52),
    inset 0 0 0 2px rgba(72,40,9,.3),
    inset 0 -3px 6px rgba(54,27,4,.18),
    0 0 0 1px rgba(63,35,8,.58),
    0 6px 16px rgba(0,0,0,.42) !important;
  text-shadow: none !important;
}

:is(
  button.big:not(.ghost):not(.secondary),
  #readyBtn,
  #placeGo,
  #roBtn,
  #miBtn,
  #summitClaim,
  #lbyCreate,
  #nameGoBtn,
  #runContBtn,
  .ss-button--primary,
  .ss-exit-dialog__button--primary
):is(:hover, :focus-visible):not(:disabled) {
  color: #1c1006 !important;
  -webkit-text-fill-color: #1c1006 !important;
  border-color: var(--ss-button-gold-border-bright) !important;
  background:
    linear-gradient(180deg, rgba(255,253,231,.38) 0%, rgba(255,244,195,.1) 20%, transparent 38%),
    linear-gradient(108deg, transparent 13%, rgba(255,238,169,.055) 30%, transparent 47%, rgba(82,43,7,.02) 74%, transparent 91%),
    linear-gradient(180deg, #e7c982 0%, #dbb866 52%, #d3aa57 66%, #c69a46 86%, #ba8838 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,225,.62),
    inset 0 0 0 2px rgba(82,47,11,.29),
    inset 0 -3px 6px rgba(54,27,4,.16),
    0 0 0 1px rgba(82,48,12,.62),
    0 0 14px rgba(214,166,62,.14),
    0 7px 18px rgba(0,0,0,.44) !important;
  text-shadow: none !important;
}

/* The mode buttons carry a high-specificity historical override. Keep their paint in this family. */
#modeScreen #modePicks .big:not(.ghost),
#modeScreen #modePicks .big:not(.ghost):hover,
#modeScreen #modePicks .big:not(.ghost):focus-visible {
  color: var(--ss-button-gold-ink) !important;
  -webkit-text-fill-color: var(--ss-button-gold-ink) !important;
  border-color: var(--ss-button-gold-border) !important;
  background:
    linear-gradient(180deg, rgba(255,250,222,.3) 0%, rgba(255,241,188,.08) 20%, transparent 38%),
    linear-gradient(108deg, transparent 14%, rgba(255,232,151,.04) 30%, transparent 47%, rgba(82,43,7,.025) 74%, transparent 90%),
    linear-gradient(180deg, #dfc176 0%, #d4af5c 52%, #cda34e 66%, #bf923e 86%, #b48132 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,211,.52),
    inset 0 0 0 2px rgba(72,40,9,.3),
    inset 0 -3px 6px rgba(54,27,4,.18),
    0 0 0 1px rgba(63,35,8,.58),
    0 6px 16px rgba(0,0,0,.42) !important;
  text-shadow: none !important;
}

/* In the compact Bazaar header, the visible gold plate belongs to the shared Roll/Lock wrapper. */
body:has(#prep:not(.hidden)) #prepBody > #shopPanel > #shopHeadRight > #rollRow {
  border-color: var(--ss-button-gold-border) !important;
  background:
    linear-gradient(180deg, rgba(255,250,222,.3) 0%, rgba(255,241,188,.08) 20%, transparent 38%),
    linear-gradient(108deg, transparent 14%, rgba(255,232,151,.04) 30%, transparent 47%, rgba(82,43,7,.025) 74%, transparent 90%),
    linear-gradient(180deg, #dfc176 0%, #d4af5c 52%, #cda34e 66%, #bf923e 86%, #b48132 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,211,.52),
    inset 0 0 0 2px rgba(72,40,9,.3),
    inset 0 -3px 6px rgba(54,27,4,.18),
    0 4px 12px rgba(0,0,0,.4) !important;
}

body:has(#prep:not(.hidden)) #prepBody > #shopPanel > #shopHeadRight > #rollRow :is(#rollBtn, #rollBtn span, #lockBtn) {
  color: var(--ss-button-gold-ink) !important;
  -webkit-text-fill-color: var(--ss-button-gold-ink) !important;
}