.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.controls button,
.result button {
  position: relative;
  min-height: 66px;
  padding: 10px 16px;
  color: var(--game-ivory);
  border: 1px solid #4c758b;
  border-radius: 14px;
  background: linear-gradient(180deg, #153649, #0d2332);
  box-shadow: inset 0 1px #a4dcff26, inset 0 -4px #0718254d, 0 5px 10px #0003;
  font-family: var(--body);
  transition: transform var(--motion-press) ease, filter var(--motion-tick) ease, border-color var(--motion-tick) ease, box-shadow var(--motion-tick) ease, background var(--motion-tick) ease;
}

.controls button span,
.result button span {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.controls button small,
.result button small {
  display: block;
  margin-top: 4px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .015em;
  opacity: .88;
}

.controls #startBtn:not(:disabled),
.controls #cashBtn:not(:disabled),
.result button.gold:not(:disabled) {
  color: #ffe6a1;
  border-color: #ac8844;
  background: linear-gradient(180deg, #44341c, #292316 58%, #211e17);
  box-shadow: inset 0 2px #ffe4a133, inset 0 -4px #130f0a66, 0 5px 18px #d4a32d1f;
}

.controls #startBtn:not(:disabled):hover,
.controls #cashBtn:not(:disabled):hover,
.result button.gold:not(:disabled):hover {
  border-color: #d4af37;
  box-shadow: inset 0 2px #ffe4a14d, inset 0 -4px #130f0a66, 0 8px 28px #d4a32d40;
}

.controls #startBtn:not(:disabled):active,
.controls #cashBtn:not(:disabled):active,
.result button.gold:not(:disabled):active { background: #211b11; }

.controls button.secondary:not(:disabled) {
  color: var(--game-ivory);
  border-color: #588fa4;
  background: linear-gradient(180deg, #153649, #0d2332);
}

.controls button:disabled {
  color: #91a5b6;
  border-color: #3c5367;
  background: #152334;
  box-shadow: none;
  opacity: 1;
  filter: none;
}

#cashBtn.is-confirmed:disabled {
  color: #fff;
  border-color: #1c8f5b;
  background: var(--emerald);
  opacity: 1;
  filter: none;
}

.controls button:not(:disabled):hover,
.result button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.controls button:not(:disabled):active,
.result button:active {
  transform: translateY(1px);
  filter: none;
}

.controls button:focus-visible,
.result button:focus-visible {
  outline: 2px solid #fff0cc;
  outline-offset: 3px;
}

.loadingDots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
}

.loadingDots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: cashLoadingDot 1.2s ease-in-out infinite;
}

.loadingDots i:nth-child(2) { animation-delay: .15s; }
.loadingDots i:nth-child(3) { animation-delay: .3s; }

@keyframes cashLoadingDot {
  0%, 80%, 100% { opacity: .35; }
  40% { opacity: 1; }
}

.actionDeck.is-playing .stakeControl,
.actionDeck.is-playing #startBtn {
  display: none;
}

.actionDeck.is-playing .controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .controls button,
  .result button,
  .loadingDots i { animation: none; transition: none; }
  .controls button:not(:disabled):hover,
  .controls button:not(:disabled):active,
  .result button:hover,
  .result button:active { transform: none; }
}