.actionDeck {
  position: absolute;
  z-index: 6;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--footer-h, 22px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(425px, 1.8fr) minmax(170px, .9fr) 96px;
  align-items: center;
  gap: 10px 18px;
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
  padding: 14px 18px;
  color: #f3f6f8;
  border: 1px solid #304453;
  border-top: 2px solid #537e8c;
  border-radius: 22px;
  background: linear-gradient(105deg, #101b29, #0b121f 35%, #080e18 72%);
  box-shadow: 0 14px 40px #02071099, inset 0 1px #8fc8e81c, inset 0 -5px #050d194d;
}

.deckHead {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
  margin: 0;
}

.deckHead::before {
  grid-column: 1;
  content: "YOUR NEXT MOVE";
  color: #94d4e4;
  font: 800 9px/1.2 var(--body);
  letter-spacing: .16em;
}

.actionDeck .message {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: #f3f6f8;
  border: 0;
  background: none;
  font: 650 14px/1.4 var(--body);
  text-align: left;
  text-overflow: clip;
  white-space: normal;
}

.actionDeck .message--error { color: #c5eaff; }
.actionDeck .deckShuffle {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-color: #3d5668;
  border-radius: 50%;
  background: #111c2a;
  font-size: 0;
}
.actionDeck .deckShuffle::before { font-size: 23px; }

.actionDeck .stakeControl { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
.actionDeck .controls { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.actionDeck:not(.is-playing) .controls { grid-template-columns: minmax(0, 1fr); }
.actionDeck:not(.is-playing) #robBtn,
.actionDeck:not(.is-playing) #cashBtn { display: none; }

.actionDeck:not(.is-playing) .hud {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.hud {
  position: static;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 66px;
  overflow: hidden;
  border: 1px solid #344758;
  border-radius: 14px;
  background: #0b1929;
  box-shadow: inset 0 3px 8px #0005;
}

.hud .stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hud .stat span { color: #adcad7; font: 800 10px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; }
#betView span { color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; } /* the stake value, not a label */
.hud .stat strong { margin-top: 4px; color: #f0f5f8; font: 700 20px/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.035em; white-space: nowrap; overflow-wrap: normal; }
.hud .pot { flex-direction: row; align-items: center; gap: 12px; border-left: 1px solid #625335; background: linear-gradient(115deg, #292417, #161a19); }
.hud .pot strong { color: #ffe3a0; font-size: 28px; }
.hud .potIcon { display: none; }
.hud .potIcon svg { width: 100%; height: 100%; }
.hud .pot > div:last-child { min-width: 0; }

.actionDeck .buildingInteraction {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 60px;
  min-height: 0;
  min-width: 0;
  padding: 6px 8px;
  border-color: #3d6174;
  border-radius: 8px;
  background: #0a1825;
}
.actionDeck .buildingInteractionName { max-width: 14ch; font-size: 11px; }
.actionDeck .buildingInteractionValue { font: 750 17px/1.1 var(--body); }
.actionDeck .buildingInteractionLabel { font-size: 8px; }
.actionDeck .playNote { display: none; }

@media (min-width: 801px) and (min-height: 501px) {
  .actionDeck:has(.buildingInteraction:not([hidden])) .deckHead { display: none; }
  .actionDeck.is-playing .controls button { height: 66px; min-width: 0; }
}

.actionDeck.is-playing .controls button :is(span, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deckTools {
  display: grid;
  grid-column: 4;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(2, 44px);
  gap: 8px;
  align-self: center;
}
.deckTools .heatSeed,
.deckTools .historyToggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: #bdd5e2;
  border: 1px solid #344657;
  border-radius: 12px;
  background: #0c1522;
  font-size: 0;
  pointer-events: auto;
}
.deckTools .heatSeed::before { content: ""; width: 16px; height: 20px; border: 2px solid currentColor; border-radius: 4px 4px 10px 10px; }
.deckTools .historyToggle { gap: 5px; font: 700 8px/1 var(--body); letter-spacing: 0; }
.deckTools .historyToggle::before { content: ""; width: 18px; height: 18px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); }
.deckTools button:hover { color: #f3f8fc; border-color: #537e8c; }
.deckTools button:focus-visible { outline: 2px solid #fff0cc; outline-offset: 3px; }

.actionDeck.is-playing { grid-template-columns: minmax(150px, 1fr) minmax(370px, 1.15fr) minmax(280px, 1.2fr) 96px; }
.actionDeck.is-playing .deckHead { grid-template-columns: minmax(0, 1fr); }
.actionDeck.is-playing .deckShuffle { display: none; }

.gamePage:has(.tutorialLayer.show) .actionDeck:not(.is-playing) .hud {
  position: static;
  grid-column: 2;
  grid-row: 3;
  width: auto;
  height: auto;
  min-height: 58px;
  clip-path: none;
}
.gamePage:has(.tutorialLayer.show) .actionDeck:not(.is-playing) .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gamePage:has(.tutorialLayer.show) .actionDeck:not(.is-playing) #startBtn { grid-column: 1 / -1; }
.gamePage:has(.tutorialLayer.show) .actionDeck:not(.is-playing) #robBtn,
.gamePage:has(.tutorialLayer.show) .actionDeck:not(.is-playing) #cashBtn { display: block; }