.stakeControl {
  display: grid;
  grid-template-columns: minmax(175px, 1fr) auto;
  align-items: center;
  gap: 7px 10px;
  min-width: 0;
}

.stakeHead {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #b7d6e3;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stakeRow {
  display: grid;
  grid-column: 1;
  grid-template-columns: 44px minmax(70px, 1fr) 44px;
  gap: 0;
}

.stakeStep,
.stakePreset,
.deckShuffle {
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 6px 10px;
  color: var(--game-ivory);
  border: 1px solid #3b5063;
  border-radius: 9px;
  background: #122032;
  box-shadow: inset 0 1px #dceaff1c;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  transition: transform var(--motion-press) ease, border-color var(--motion-tick) ease, background var(--motion-tick) ease, color var(--motion-tick) ease;
}

.stakeStep {
  padding: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.stakeStep:first-child { border-radius: 12px 0 0 12px; }
.stakeStep:last-child { border-radius: 0 12px 12px 0; }

.stakeStep:not(:disabled):hover,
.stakePreset:not(:disabled):hover,
.deckShuffle:not(:disabled):hover {
  border-color: var(--glass-line-strong);
  background: rgba(28, 38, 54, .92);
}

.stakeStep:not(:disabled):active,
.stakePreset:not(:disabled):active,
.deckShuffle:not(:disabled):active {
  transform: scale(.97);
}

.stakeStep:disabled,
.stakePreset:disabled,
.deckShuffle:disabled {
  color: rgba(154, 168, 184, .55);
  border-color: rgba(148, 163, 184, .14);
  background: rgba(16, 23, 34, .5);
  box-shadow: none;
}

.stakePresets {
  display: flex;
  grid-column: 2;
  flex-wrap: nowrap;
  gap: 5px;
}

.stakePreset.active {
  color: #f1fbff;
  border-color: #73b9c8;
  background: #183a4b;
  box-shadow: inset 0 -3px #73b9c852;
}
.stakePreset { min-width: 44px; padding-inline: 5px; font-size: 10px; }

.deckShuffle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px 0 10px;
  color: var(--game-muted);
  border-radius: 999px;
}

.deckShuffle::before {
  content: "\21BB";
  font-size: 18px;
  line-height: 1;
}

.deckShuffle:not(:disabled):hover { color: var(--game-gold-light); }

.stakeError {
  grid-column: 1 / -1;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  color: #f0818f;
  font-family: var(--utility);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity var(--motion-tick) ease, max-height var(--motion-tick) ease;
}

.stakeError.show {
  max-height: 2.4em;
  opacity: 1;
}
.stakeError:not(.show) { display: none; }

.inputShell {
  display: flex;
  align-items: center;
  width: auto;
  min-height: var(--control-h);
  overflow: hidden;
  border: 1px solid #3b5063;
  border-inline: 0;
  border-radius: 0;
  background: #080f1c;
  box-shadow: inset 0 3px 8px #0006;
}

.inputShell b {
  padding-left: 8px;
  color: #9eb8c9;
  font-family: var(--body);
  font-size: 17px;
}

.inputShell input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 4px 6px;
  color: #f0e6cd;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.inputShell input::-webkit-outer-spin-button,
.inputShell input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.inputShell input:focus-visible {
  outline: 2px solid rgba(229, 198, 92, .9);
  outline-offset: -2px;
  border-radius: 10px;
}

.inputShell:focus-within { border-color: var(--glass-line-strong); }

.stakeStep:focus-visible,
.stakePreset:focus-visible,
.deckShuffle:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .stakeStep,
  .stakePreset,
  .deckShuffle,
  .stakeError { transition: none; }
}

/* Currency picker in the stake head: one session, one currency, so each chip is a link. */
.currencySwitch { display: inline-flex; gap: 3px; margin: 0 auto 0 10px; padding: 2px; border: 1px solid rgba(183, 214, 227, .22); border-radius: 999px; }
.currencySwitch a {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px;
  color: rgba(183, 214, 227, .78); font-size: 9.5px; letter-spacing: .08em; text-decoration: none;
}
.currencySwitch a:hover, .currencySwitch a:focus-visible { color: #fff3d2; outline: 0; }
.currencySwitch a:focus-visible { box-shadow: var(--focus-ring); }
.currencySwitch a.is-active { color: #141c28; background: linear-gradient(180deg, #f0d470, #d4af37); }
.game.running .currencySwitch { display: none; }
@media (pointer: coarse) { .currencySwitch a { min-height: 30px; padding: 0 10px; } }