/**
 * Layout da página de jogo.
 * Fixo no viewport — evita herdar scroll do painel (ex.: valor custom digitado embaixo).
 */

html:has(.game-page),
body:has(.game-page) {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100dvh !important;
  max-height: 100svh !important;
  overscroll-behavior: none;
}

body:has(.game-page),
#root:has(.game-page) {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100dvh !important;
  max-height: 100svh !important;
}

.game-page {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0;

  padding-top: max(72px, calc(48px + env(safe-area-inset-top, 0px))) !important;
  padding-right: 12px !important;
  padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
  padding-left: 12px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  -webkit-user-select: none;
  user-select: none;
  z-index: 10;
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */
.bb-hud,
.game-hud {
  flex: 0 0 auto;
  width: 100%;
  max-width: 460px;
  margin: 0 0 4px;
  padding: 0 4px 6px;
  position: relative;
  z-index: 5;
}

.bb-hud-score {
  margin: 2px 0 6px !important;
  font-size: clamp(1.25rem, 5.2vw, 2.2rem) !important;
  line-height: 1 !important;
}

.bb-hud-corner {
  font-size: clamp(0.95rem, 3.6vw, 1.2rem) !important;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-hud-progress {
  width: min(200px, 55%) !important;
  height: 8px !important;
}

/* ── Tabuleiro — sizing clássico (não quebra células / fall-layer) ────────── */
.board-wrap {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  /* wrap = tamanho do board → fall-layer (inset:0) fica alinhado */
  width: min(
    100%,
    460px,
    calc(100svh - 240px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  );
  max-width: 460px;
  margin: 0 auto;
  touch-action: none;
}

.board-wrap > .board:not(.board-fall-layer) {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}

.board {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  align-content: stretch;
  justify-content: stretch;
  touch-action: none;
}

/* Células preenchem o grid (fixa cells “subindo/encolhendo” no mobile) */
.board > .cell {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  justify-self: stretch;
}

/* Fall-layer: NÃO reescrever width/height — original usa inset:0 */
.board-fall-layer {
  /* mantém position:absolute; inset:0 do CSS principal */
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  pointer-events: none;
}

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

.board-locked-msg {
  flex: 0 0 auto;
  margin-top: 8px !important;
  font-size: clamp(0.95rem, 3.4vw, 1.2rem) !important;
}

/* ── Bandeja ─────────────────────────────────────────────────────────────── */
.tray {
  flex: 0 0 auto;
  width: min(100%, 460px);
  max-width: 460px;
  margin: 8px auto 0 !important;
  gap: 10px !important;
  touch-action: none;
}

.tray-slot {
  min-height: 96px !important;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: min(110px, 14dvh);
  width: 100%;
  place-items: center;
  box-sizing: border-box;
  padding: 8px !important;
}

/* ── Resgatar ────────────────────────────────────────────────────────────── */
.cashout-btn {
  flex: 0 0 auto;
  width: min(100%, 460px);
  max-width: 460px;
  margin: 10px auto 0 !important;
  z-index: 6;
}

.board,
.board-wrap,
.tray,
.tray-slot {
  touch-action: none;
}

/* ── Telas baixas ────────────────────────────────────────────────────────── */
@media (max-height: 780px) {
  .game-page {
    padding-top: max(64px, calc(40px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: max(10px, calc(6px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .bb-hud-score {
    font-size: clamp(1.15rem, 4.8vw, 1.85rem) !important;
    margin: 2px 0 4px !important;
  }

  .board-wrap {
    width: min(
      100%,
      460px,
      calc(100svh - 260px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
    );
  }

  .tray {
    margin-top: 6px !important;
    gap: 8px !important;
  }

  .tray-slot {
    min-height: 84px !important;
    max-height: min(96px, 12dvh);
    padding: 6px !important;
  }

  .cashout-btn {
    margin-top: 8px !important;
  }
}

@media (max-height: 680px) {
  .game-page {
    padding-top: max(56px, calc(32px + env(safe-area-inset-top, 0px))) !important;
  }

  .bb-hud-score {
    font-size: clamp(1.05rem, 4.4vw, 1.65rem) !important;
  }

  .board-wrap {
    width: min(
      100%,
      460px,
      calc(100svh - 250px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
    );
  }

  .tray-slot {
    min-height: 76px !important;
    max-height: min(88px, 11dvh);
  }
}

@media (max-height: 580px) {
  .game-page {
    padding-top: max(48px, calc(24px + env(safe-area-inset-top, 0px))) !important;
  }

  .bb-hud-score {
    font-size: clamp(1rem, 4vw, 1.45rem) !important;
  }

  .board-wrap {
    width: min(
      100%,
      460px,
      calc(100svh - 230px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
    );
  }

  .tray-slot {
    min-height: 68px !important;
    max-height: min(80px, 10dvh);
    padding: 4px !important;
  }

  .cashout-btn {
    margin-top: 6px !important;
  }
}