/* Sandbox: 8x8 playable grid aligned to boardn.png */
.board,
.tutorial-game-page .board {
  background-color: transparent;
  background-image: url("/images/board/boardn.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  border-radius: 7%;
  box-shadow: none;
  overflow: hidden;
  padding: 7%;
  gap: 1.7%;
}

.board.board-fall-layer {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.board > .cell:not(.filled) {
  background: transparent;
  box-shadow: none;
}

.board > .cell.filled {
  border-radius: 18%;
}

.tray-slot {
  background-color: transparent;
  background-image: url("/images/board/select.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  border-radius: 18%;
  box-shadow: none;
  min-height: 108px;
}

.tray-slot.used {
  opacity: 0.4;
}

.game-page .tray,
.tutorial-game-page .tray {
  order: 4;
  overflow: visible;
}

.tutorial-cashout-wrap {
  order: 3;
  width: min(100%, 460px);
  margin: 8px auto 0;
}

.cashout-btn.cashout-ready,
.btn.cashout-ready {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  order: 3;
  width: min(100%, 460px) !important;
  margin: 8px auto 0 !important;
  z-index: 5;
  background-color: transparent !important;
  background-image: url("/images/board/bres.png?v=2") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px #0000004d !important;
  color: #3d2a00 !important;
  text-shadow: 0 1px 0 #fff8;
  overflow: hidden;
  min-height: 52px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.btn.cashout-ready:not(:disabled):hover {
  filter: brightness(1.06);
}

/* Game backdrop: fundo preto sólido (sem arte antiga /images/bg/game) */
html.game-active,
html.game-active body,
body.game-active,
.game-bg.active,
html:has(.tutorial-game-page),
html:has(.tutorial-game-page) body {
  background-color: #000000 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

.game-bg.active {
  inset: -140px 0 !important;
}

/* /jogo stacks: mesmo céu do treino (jogodatorre), sem arte roxa do Block Blast */
html:has(.game-bg.stacks-sky),
html:has(.game-bg.stacks-sky) body,
body:has(.game-bg.stacks-sky),
.game-bg.active.stacks-sky {
  background-color: var(--stacks-sky, #0a0a12) !important;
  background-image: none !important;
  background-size: auto !important;
  background-attachment: scroll !important;
}

/* Landing/painel: preto no 1º paint — evita flash azul do bgp antigo */
html:not(.game-active),
html:not(.game-active) body {
  background-color: #000000 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

.auth-shell::before,
.panel-shell::before,
.lp-hero-bg {
  background: #000000 !important;
}

html:has(.lobby-shell),
html:has(.lobby-shell) body {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  background-color: #080214 !important;
  background-image: url("/images/lobby/bg.webp") !important;
}

.lobby-shell.panel-shell::before {
  background:
    linear-gradient(180deg, rgba(8, 4, 16, 0.42) 0%, rgba(8, 4, 16, 0.62) 100%),
    url("/images/lobby/bg.webp") center / cover no-repeat !important;
}

.panel-shell {
  background: transparent !important;
}

@media (min-width: 1024px), (min-aspect-ratio: 1/1) {
  .lobby-shell.panel-shell::before {
    background:
      linear-gradient(180deg, rgba(8, 4, 16, 0.38) 0%, rgba(8, 4, 16, 0.58) 100%),
      url("/images/lobby/bg.webp") center / cover no-repeat !important;
  }
}

/* Primeiro frame de /jogo: reforço preto antes do React. */
html.stacks-boot,
html.stacks-boot body {
  background-color: #000000 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

html.game-active.stacks-html,
html.game-active.stacks-html body,
body.game-active.stacks-html {
  background-color: var(--stacks-sky, #0a0a12) !important;
  background-image: none !important;
}

.lp-stats {
  display: none !important;
}

/* Botão Jogar: mesma arte do painel no lugar dos 4 quadradinhos */
.nav-item.center .nav-circle .logo-mark {
  width: 34px;
  height: 34px;
  display: block;
  background: url("/images/lobby/btn.png") center / contain no-repeat;
  filter: none;
}

.nav-item.center .nav-circle .logo-mark span {
  display: none !important;
}

.bb-profile-hero {
  margin: -8px -20px 14px;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  line-height: 0;
}

.bb-profile-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

html.stacks-html .game-mute-btn {
  bottom: calc(clamp(142px, 16vh, 168px) + env(safe-area-inset-bottom, 0px)) !important;
}

html.stacks-html .cashout-btn.cashout-ready,
html.stacks-html .btn.cashout-ready {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(clamp(72px, 9vh, 92px) + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 auto !important;
  z-index: 80 !important;
  animation: stacks-cashout-glow 1.15s ease-in-out infinite !important;
}

@keyframes stacks-cashout-glow {
  0%,
  100% {
    filter: brightness(1.04) drop-shadow(0 0 6px #ffc10788);
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 18px #ffe566cc);
  }
}