/**
 * Corrige células do tabuleiro/bandeja que encolhem e sobem em alguns dispositivos
 * (Safari/iOS/Android) enquanto o card externo mantém o tamanho.
 */

/* Tabuleiro: linhas explícitas + células preenchendo o grid */
.board {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  align-content: stretch;
  justify-content: stretch;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  min-height: 0;
}

.board-wrap {
  flex-shrink: 0;
  width: 100%;
  max-width: 460px;
}

.board > .cell {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  justify-self: stretch;
}

.board-fall-layer > .cell,
.board-fall-layer > .cell-ghost {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

/* Evita o flex da página esmagar HUD / bandeja em telas baixas */
.game-page {
  min-height: 100dvh;
  min-height: 100svh;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bb-hud,
.game-hud,
.tray,
.cashout-btn {
  flex-shrink: 0;
}

/* Slots da bandeja: altura estável proporcional à largura, não ao viewport */
.tray {
  width: 100%;
  max-width: 460px;
  align-items: stretch;
}

.tray-slot {
  min-height: 96px;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  place-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Em telas muito baixas, reduz padding sem esmagar o grid */
@media (max-height: 700px) {
  .game-page {
    padding-top: calc(36px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .bb-hud {
    margin-bottom: 2px;
    padding-bottom: 4px;
  }

  .bb-hud-score {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    margin: 2px 0 6px;
  }

  .tray {
    margin-top: 10px;
    gap: 8px;
  }
}