/* 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: 9x16 phone, 3x4 tablet, landscape/PC */
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: #7a32d6 !important;
  background-image: url("/images/bg/game/bg9x16r.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

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

@media (min-aspect-ratio: 5/8) and (max-aspect-ratio: 1/1) {
  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-image: url("/images/bg/game/gb3x4r.png") !important;
  }
}

@media (min-width: 1024px), (min-aspect-ratio: 1/1) {
  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-image: url("/images/bg/game/bgrpc.png") !important;
  }
}

/* Landing, painel, cadastro/login — /images/bg (fora de game/) */
html:not(.game-active),
html:not(.game-active) body {
  background-color: #3d8ef0 !important;
  background-image: url("/images/bg/bgp16x9.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.auth-shell::before,
.panel-shell::before,
.lp-hero-bg {
  background: url("/images/bg/bgp16x9.png") center / cover no-repeat !important;
}

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

@media (min-aspect-ratio: 5/8) and (max-aspect-ratio: 1/1) {
  html:not(.game-active),
  html:not(.game-active) body {
    background-image: url("/images/bg/bgp3x4.png") !important;
  }

  .auth-shell::before,
  .panel-shell::before,
  .lp-hero-bg {
    background: url("/images/bg/bgp3x4.png") center / cover no-repeat !important;
  }
}

@media (min-width: 1024px), (min-aspect-ratio: 1/1) {
  html:not(.game-active),
  html:not(.game-active) body {
    background-image: url("/images/bg/bgppc.png") !important;
  }

  .auth-shell::before,
  .panel-shell::before,
  .lp-hero-bg {
    background: url("/images/bg/bgppc.png") center / cover no-repeat !important;
  }
}

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

/* Botão Jogar: m2.png no lugar dos 4 quadradinhos */
.nav-item.center .nav-circle .logo-mark {
  width: 34px;
  height: 34px;
  display: block;
  background: url("/images/pieces/m2.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;
}