/* Versus Tetris (public/arcade/tetris.js): one crisp canvas (board, next, hold, their mini board); every move is a gesture on the board
   (swipe to move, tap to rotate, swipe up to swap, swipe down to drop). Everything is scoped to this game's stage. */
.ag-stage[data-kind="tetris"] { touch-action: none; }
.ag-stage[data-kind="tetris"] .tt-cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; image-rendering: pixelated; }
.ag-stage[data-kind="tetris"] .tt-hint { position: absolute; left: 0; right: 0; bottom: max(14px, calc(6px + var(--sab, 0px))); z-index: 4;
  margin: 0 auto; width: max-content; max-width: calc(100% - 24px); padding: 10px 16px; pointer-events: none;
  background: rgba(0, 0, 0, .78); border: 2px solid #0a367c; color: #9eb0c6; font: 400 22px/1.1 var(--ac-pixel);
  letter-spacing: .03em; text-align: center; transition: opacity .5s; }
.ag-stage[data-kind="tetris"] .tt-hint p { margin: 0; }
.ag-stage[data-kind="tetris"] .tt-hint b { font-weight: 400; color: #f5f8ff; }
.ag-stage[data-kind="tetris"] .tt-hint.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ag-stage[data-kind="tetris"] .tt-hint { transition: none; } }