/* Tetris board — 8×8 arcade well */

.board,
.tutorial-game-page .board {
  background-color: transparent;
  background-image: url("/images/board/boardn.png?v=tx1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  border-radius: 7%;
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(0, 200, 255, 0.12);
  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: 14%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.tray-slot {
  background-color: transparent;
  background-image: url("/images/board/select.png?v=tx1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  border-radius: 18%;
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.08);
  min-height: 108px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.tray-slot:not(.used):active {
  transform: scale(0.97);
}

.tray-slot.used {
  opacity: 0.35;
  filter: grayscale(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=tx1") !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 24px rgba(255, 78, 184, 0.35), 0 0 18px rgba(255, 210, 74, 0.25) !important;
  color: #3d2a00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  animation: tx-cashout-pulse 1.8s ease-in-out infinite;
}

@keyframes tx-cashout-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

/* Game page — deixa o fundo fantasy do html/body aparecer */
.game-page,
.tutorial-game-page {
  background: transparent !important;
}

.game-page > *,
.tutorial-game-page > * {
  position: relative;
  z-index: 1;
}

/* Fundos do jogo (mesmo visual da landing/painel) */
html.game-active,
html.game-active body,
body.game-active,
.game-bg.active,
html:has(.tutorial-game-page),
html:has(.tutorial-game-page) body,
html:has(.game-page),
html:has(.game-page) body {
  background-color: #14081f !important;
  background-image: url("/images/bg/game/bg9x16r.webp?v=tx36") !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,
  html:has(.game-page),
  html:has(.game-page) body {
    background-image: url("/images/bg/game/gb3x4r.webp?v=tx36") !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,
  html:has(.game-page),
  html:has(.game-page) body {
    background-image: url("/images/bg/game/bgrpc.webp?v=tx36") !important;
  }
}

/* Line clear flash */
.cell.clearing,
.board .cell.line-clear {
  animation: tx-line-flash 0.35s ease-out;
}

@keyframes tx-line-flash {
  0% { filter: brightness(2.2) saturate(1.4); }
  100% { filter: brightness(1); }
}

/* Landing / painel / auth — fundos (igual Blocks: bgp16x9 mobile, bgppc PC) */
html:not(.game-active),
html:not(.game-active) body {
  background-color: #14081f !important;
  background-image: url("/images/bg/bgp16x9.webp?v=tx34") !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:
    linear-gradient(180deg, rgba(8, 6, 20, 0.28) 0%, rgba(8, 6, 20, 0.5) 100%),
    url("/images/bg/bgp16x9.webp?v=tx34") 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.webp?v=tx34") !important;
  }

  .auth-shell::before,
  .panel-shell::before,
  .lp-hero-bg {
    background:
      linear-gradient(180deg, rgba(8, 6, 20, 0.28) 0%, rgba(8, 6, 20, 0.5) 100%),
      url("/images/bg/bgp3x4.webp?v=tx34") 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.webp?v=tx34") !important;
  }

  .auth-shell::before,
  .panel-shell::before,
  .lp-hero-bg {
    background:
      linear-gradient(180deg, rgba(8, 6, 20, 0.35) 0%, rgba(8, 6, 20, 0.55) 100%),
      url("/images/bg/bgppc.webp?v=tx34") center / cover no-repeat !important;
  }

  .lp-page,
  .painel-page,
  .app-shell,
  .panel-shell,
  .landing {
    background: transparent !important;
  }
}