.shell-region--bottom {
  display: grid;
  place-items: center;
  min-height: calc(var(--game-controls-height) + var(--app-footer-height) + env(safe-area-inset-bottom));
  padding-bottom: calc(var(--app-footer-height) + env(safe-area-inset-bottom));
}
.game-controls {
  pointer-events: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(500px, calc(100vw - 24px));
  min-height: 64px;
  padding: 8px 0;
}
.game-controls[hidden] { display: none !important; }
.game-control {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #486581;
  border-radius: 5px;
  padding: 7px 10px;
  background: #102a43;
  color: #f0f4f8;
  font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  touch-action: manipulation;
}
.game-control--drop, .game-control--confirm { min-width: 76px; background: #1769aa; border-color: #62b0e8; }
.game-control--rewind {
  min-width: 76px;
  border-color: #c084fc;
  background: #3b1d5c;
  color: #f5e9ff;
}
.game-control--rewind:hover:not(:disabled) { border-color: #e879f9; background: #55267a; }
.game-control:hover:not(:disabled) { border-color: #62b0e8; background: #16324f; }
.game-control:disabled { opacity: .38; cursor: default; }
.game-control[hidden] { display: none; }
.game-control--attention:not(:disabled) {
  border-color: #62b0e8;
  animation: game-control-attention 1s ease-in-out infinite;
}
.game-control--ready:not(:disabled) {
  border-color: #81e6b3;
  background: #147d64;
  animation: game-control-ready 1s ease-in-out infinite;
}
@keyframes game-control-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(98, 176, 232, 0); }
  50% { box-shadow: 0 0 0 6px rgba(98, 176, 232, 0.35); }
}
@keyframes game-control-ready {
  0%, 100% { box-shadow: 0 0 0 0 rgba(129, 230, 179, 0); }
  50% { box-shadow: 0 0 0 6px rgba(129, 230, 179, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .game-control--attention:not(:disabled) {
    animation: none;
    box-shadow: 0 0 0 2px rgba(98, 176, 232, 0.45);
  }
  .game-control--ready:not(:disabled) {
    animation: none;
    box-shadow: 0 0 0 2px rgba(129, 230, 179, 0.55);
  }
}
@media (max-width: 420px) {
  .game-controls { gap: 4px; width: calc(100vw - 12px); }
  .game-control { min-width: 40px; padding-inline: 7px; }
  .game-control--drop, .game-control--confirm { min-width: 68px; }
  .game-control--rewind { min-width: 68px; font-size: 12px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  :root { --game-controls-height: 0px; }
  .shell-region--bottom {
    min-height: calc(var(--app-footer-height) + env(safe-area-inset-bottom));
    padding-bottom: calc(var(--app-footer-height) + env(safe-area-inset-bottom));
  }
  .game-controls { display: none; }
  .game-controls[data-rewind-mode="true"] {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    /* Stay aligned with the game canvas without competing with the HUD. */
    right: max(112px, calc((100vw - 680px) / 2 + 16px));
    z-index: 20;
    display: flex;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  .game-controls[data-rewind-mode="true"] .game-control:not(.game-control--rewind) { display: none; }
}
.game-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
canvas {
  display: block;
  flex: none;
  touch-action: none;
  cursor: pointer;
}