:root {
  --ad-navy: #102438;
  --ad-navy-deep: #071827;
  --ad-cream: #fff0cd;
  --ad-gold: #ffd36a;
  --ad-coral: #ed765f;
  --ad-teal: #4fd3cc;
}

#stage .drive-button {
  appearance: none;
  position: relative;
  isolation: isolate;
  min-height: 48px;
  min-width: 148px;
  padding: 12px 22px 11px;
  border: 1px solid color-mix(in srgb, var(--ad-cream) 72%, transparent);
  border-radius: 11px;
  color: var(--ad-cream);
  font: 800 15px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .055em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  overflow: hidden;
}

#stage .drive-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent 0 7%,
    var(--ad-coral) 7% 30%,
    var(--ad-gold) 30% 66%,
    var(--ad-teal) 66% 93%,
    transparent 93% 100%);
  opacity: .82;
}

#stage .drive-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, currentColor 28% 72%, transparent);
  opacity: .2;
}

#stage .drive-button--primary {
  color: var(--ad-navy);
  border-color: var(--ad-cream);
  background: linear-gradient(180deg, #fff7df 0%, var(--ad-gold) 72%, #efb64f 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 #d8893f,
    0 4px 0 var(--ad-navy-deep),
    0 7px 16px #07182740;
}

#stage .drive-button--primary::before {
  background: linear-gradient(90deg,
    transparent 0 8%,
    var(--ad-coral) 8% 34%,
    var(--ad-gold) 34% 64%,
    var(--ad-teal) 64% 92%,
    transparent 92% 100%);
  mix-blend-mode: multiply;
  opacity: .9;
}

#stage .drive-button--secondary {
  color: var(--ad-cream);
  border-color: color-mix(in srgb, var(--ad-gold) 74%, transparent);
  background: linear-gradient(180deg, #193950f2, var(--ad-navy) 68%, var(--ad-navy-deep));
  box-shadow:
    inset 0 1px 0 #fff0cd33,
    inset 0 -2px 0 #4fd3cc55,
    0 3px 0 #071827,
    0 6px 14px #07182736;
}

#stage .drive-button--secondary::after {
  color: var(--ad-teal);
  opacity: .42;
}

#stage .drive-button--tertiary {
  color: var(--ad-cream);
  border-color: #fff0cd70;
  background: #102438c7;
  box-shadow: inset 0 1px 0 #fff0cd1f, 0 2px 0 #071827b3;
  font-size: 13px;
}

#stage .drive-button--tertiary::before {
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ad-teal), var(--ad-gold), transparent);
  opacity: .58;
}

#stage .drive-button:hover:not(:disabled) { filter: brightness(1.06); }
#stage .drive-button:active:not(:disabled) { transform: translateY(2px); }
#stage .drive-button--primary:active:not(:disabled) { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #d8893f, 0 2px 0 var(--ad-navy-deep); }
#stage .drive-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#stage .drive-button:disabled { opacity: .58; cursor: wait; }

@media (max-width: 360px) {
  #stage .drive-button { min-height: 46px; min-width: 136px; padding-inline: 16px; font-size: 14px; }
  #stage .drive-button--tertiary { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #stage .drive-button { transition: none; }
}

#stage .drive-button{font-family:system-ui,sans-serif!important;font-style:normal!important;font-weight:800!important;text-shadow:none!important;min-height:48px;border-radius:11px}
#stage #start.drive-button,#stage #retry.drive-button{color:#102438;background:linear-gradient(180deg,#fff7df,#ffd36a 72%,#efb64f)}
#stage #ending-skip.drive-button{color:#fff0cd;background:linear-gradient(180deg,#193950f2,#102438 68%,#071827)}
#stage #share-result.drive-button{color:#fff0cd;background:#102438c7}