/* Glossy arcade buttons, inspired by the orange-gold reference. */
.header-play,
.button-gold,
.mode-card > a,
.store-button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: #653400;
  background:
    radial-gradient(ellipse at 27% 0%, #fffbc4 0%, #fffbc400 51%),
    linear-gradient(180deg, #ffe957 0%, #ffc400 28%, #ffa000 60%, #ffb51c 80%, #ffe78c 100%);
  border: 2px solid #fff2bb;
  border-radius: 999px;
  box-shadow:
    inset 0 2px 3px #ffffd6,
    inset 3px 0 6px #fff4b3a6,
    inset -3px 0 6px #fff4b3a6,
    inset 0 -4px 5px #fff0a680,
    0 5px 0 #ba690e,
    0 7px 0 1px #f0a93580,
    0 10px 22px #ffb40038;
  text-shadow: 0 1px 0 #fff1a8;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.header-play::before,
.button-gold::before,
.mode-card > a::before,
.store-button::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 8%;
  right: 8%;
  top: 3px;
  height: 35%;
  background: linear-gradient(180deg, #fffde9d9, #fff9c524 75%, transparent);
  border-radius: 100% 100% 55% 55%;
}

.header-play:hover,
.button-gold:hover,
.mode-card > a:hover,
.store-button:hover {
  color: #653400;
  background:
    radial-gradient(ellipse at 27% 0%, #fffed8 0%, #fffbc400 51%),
    linear-gradient(180deg, #fff178 0%, #ffd32c 28%, #ffad0e 60%, #ffc443 80%, #ffeda3 100%);
  border-color: #fff8d5;
  transform: translateY(-2px);
  box-shadow: inset 0 2px 4px #fffce5, inset 0 -4px 6px #fff3ba99,
    0 7px 0 #ba690e, 0 9px 0 1px #f0a93580, 0 12px 28px #ffbc0052;
}

.header-play:active,
.button-gold:active,
.mode-card > a:active,
.store-button:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 4px #ffffd6, inset 0 -2px 4px #fff0a680,
    0 1px 0 #ba690e, 0 3px 12px #ffb40038;
}

.header-play { padding: 11px 23px; }
.button-gold { padding: 17px 29px; font-size: 15px; }
.mode-card > a {
  min-height: 42px;
  padding: 9px 16px;
  margin-top: 23px;
  font-size: 11px;
}
.mode-card > a span {
  color: #8c4a00;
  background: #fff6c166;
  border: 1px solid #ffefab;
  box-shadow: inset 0 1px 2px #fff8d2;
  width: 23px;
  height: 23px;
}
.store-button { padding: 13px 22px; min-height: 65px; }
.store-button small { color: #88500d; text-shadow: 0 1px 0 #fff0aa; }
.store-button svg { fill: #784100; }
.store-button svg path { fill: #784100; }
.download-buttons { gap: 22px; }

@media (max-width: 580px) {
  .header-play { padding: 9px 14px; }
  .button-gold { padding: 15px 21px; font-size: 12px; }
  .mode-card > a { min-height: 38px; padding: 8px 9px; font-size: 8px; gap: 3px; }
  .mode-card > a span { width: 19px; height: 19px; font-size: 12px; }
  .store-button { padding: 11px 9px; min-height: 58px; }
  .download-buttons { gap: 14px; }
}