/* ============================================================
   Block Puzzle — sem tema (apenas blocos). Sunset background.
   ============================================================ */

.sj-game-host:has(.bp) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
}
.sj-game-host:has(.bp),
body:has(.sj-game-stage) .sj-game-host:has(.bp) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.bp) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.bp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.bp-board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botão "Reiniciar nível" — abaixo do tabuleiro, escopo local. */
.bp-reset-level {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: #2d2438;
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 36, 56, 0.18);
  transition: transform .08s, filter .12s, background .15s, opacity .15s;
  touch-action: manipulation;
}
@media (hover: hover) {
  .bp-reset-level:hover:not(:disabled) { background: #fff; filter: brightness(1.02); }
}
.bp-reset-level:active:not(:disabled) { transform: scale(0.96); }
.bp-reset-level:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 0 2px 6px rgba(45, 36, 56, 0.10);
}

/* ============ Tabuleiro ============
   --bp-cell e --bp-size vêm do JS. Saída fica do lado direito na
   linha do bloco-alvo (--bp-exit-row). */
.bp-board {
  position: relative;
  width:  calc(var(--bp-cell, 60px) * var(--bp-size, 6));
  height: calc(var(--bp-cell, 60px) * var(--bp-size, 6));
  background: rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.45),
    0 12px 32px rgba(45, 36, 56, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: none;   /* desabilita scroll/zoom durante o drag */
}

/* "Saída" — passagem na borda direita, na cor do bloco-alvo (roxo accent).
   Batente fade-in nas pontas, setinha roxa apontando pra fora, glow suave. */
.bp-board::before {
  /* Batente vertical (cor do goal) */
  content: '';
  position: absolute;
  top: calc(var(--bp-exit-row, 2) * var(--bp-cell, 60px));
  right: 0;
  width: 3px;
  height: var(--bp-cell, 60px);
  background: linear-gradient(to bottom,
    rgba(107, 91, 255, 0) 0%,
    rgba(107, 91, 255, 0.9) 12%,
    rgba(107, 91, 255, 0.9) 88%,
    rgba(107, 91, 255, 0) 100%);
  box-shadow: 0 0 10px rgba(107, 91, 255, 0.6);
  pointer-events: none;
  z-index: 1;
}
.bp-board::after {
  content: '';
  position: absolute;
  top: calc(var(--bp-exit-row, 2) * var(--bp-cell, 60px));
  right: calc(-1 * var(--bp-cell, 60px) * 0.7);
  width: calc(var(--bp-cell, 60px) * 0.7);
  height: var(--bp-cell, 60px);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M6 16h18M18 9l8 7-8 7' stroke='%236b5bff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center / 70% no-repeat,
    linear-gradient(to right,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.25) 55%,
      rgba(255, 255, 255, 0) 100%);
  filter: drop-shadow(0 0 6px rgba(107, 91, 255, 0.45));
  animation: bp-exit-glow 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bp-exit-glow {
  0%, 100% { opacity: 0.85; transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(3px); }
}

/* Grid de fundo (linhas suaves entre células) */
.bp-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(45, 36, 56, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 36, 56, 0.08) 1px, transparent 1px);
  background-size: var(--bp-cell, 60px) var(--bp-cell, 60px);
  background-position: -0.5px -0.5px;
  border-radius: 16px;
}

/* ============ Peças ============ */
.bp-piece {
  position: absolute;
  top:    calc(var(--r, 0) * var(--bp-cell, 60px));
  left:   calc(var(--c, 0) * var(--bp-cell, 60px));
  width:  calc(var(--w, 1) * var(--bp-cell, 60px));
  height: calc(var(--h, 1) * var(--bp-cell, 60px));
  background:
    linear-gradient(160deg, #f9f3e6 0%, #ead9bd 100%);
  border-radius: 10px;
  box-shadow:
    inset 0 -3px 0 rgba(120, 90, 50, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 3px 0 rgba(45, 36, 56, 0.18),
    0 6px 14px rgba(45, 36, 56, 0.12);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow .15s, filter .15s;
  /* Padding interno: cria gap visual entre peça e células vizinhas */
  margin: 3px;
  width:  calc(var(--w, 1) * var(--bp-cell, 60px) - 6px);
  height: calc(var(--h, 1) * var(--bp-cell, 60px) - 6px);
}
.bp-piece.is-dragging { cursor: grabbing; filter: brightness(1.04); z-index: 5; }
.bp-piece.is-goal {
  background: linear-gradient(160deg, #8e7dff 0%, #5347d6 100%);
  box-shadow:
    inset 0 -3px 0 rgba(30, 20, 100, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 rgba(45, 36, 56, 0.24),
    0 8px 18px rgba(107, 91, 255, 0.35);
  cursor: grab;
}
.bp-piece.is-goal.is-dragging { cursor: grabbing; }

/* Pequenas "alças" decorativas pra dar pegada de "tira" de móvel */
.bp-piece::before, .bp-piece::after {
  content: '';
  position: absolute;
  background: rgba(45, 36, 56, 0.12);
  border-radius: 2px;
}
.bp-piece[data-ori="h"]::before,
.bp-piece[data-ori="h"]::after {
  width: 3px; height: 22%;
  top: 39%;
}
.bp-piece[data-ori="h"]::before { left: 14%; }
.bp-piece[data-ori="h"]::after  { right: 14%; }
.bp-piece[data-ori="v"]::before,
.bp-piece[data-ori="v"]::after {
  height: 3px; width: 22%;
  left: 39%;
}
.bp-piece[data-ori="v"]::before { top: 14%; }
.bp-piece[data-ori="v"]::after  { bottom: 14%; }

.bp-piece.is-goal::before, .bp-piece.is-goal::after {
  background: rgba(255, 255, 255, 0.35);
}

/* ============ Estrelas + score no overlay de fim de fase ============ */
.bp-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bp-stars {
  display: flex;
  gap: 10px;
  margin: 4px 0 2px;
}
.bp-star {
  width: 42px;
  height: 42px;
  color: rgba(45, 36, 56, 0.14);
  transition: color .2s ease-out, transform .2s ease-out, filter .25s;
}
.bp-star.is-on {
  color: var(--sj-gold, #ffd93d);
  filter: drop-shadow(0 0 8px rgba(255, 217, 61, 0.7));
  animation: bp-star-pop .42s cubic-bezier(.4, 1.6, .6, 1) both;
}
.bp-star.is-on:nth-child(1) { animation-delay: .05s; }
.bp-star.is-on:nth-child(2) { animation-delay: .2s; }
.bp-star.is-on:nth-child(3) { animation-delay: .35s; }
@keyframes bp-star-pop {
  0%   { transform: scale(0.3) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.bp-pts {
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--sj-accent);
  letter-spacing: 0.04em;
}

/* Slot Movs: número em cima, mini-estrelas embaixo, centralizados */
.sj-score[data-sj-score="moves"] { cursor: help; }
.sj-score[data-sj-score="moves"] .sj-score-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.bp-hud-stars {
  display: inline-flex;
  gap: 2px;
}
.bp-hud-stars svg { width: 11px; height: 11px; color: rgba(45, 36, 56, 0.22); display: block; }
.bp-hud-stars svg.is-on { color: var(--sj-gold, #ffd93d); filter: drop-shadow(0 0 3px rgba(255, 217, 61, 0.55)); }
.bp-final-total {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 38px;
  color: var(--sj-gold);
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 12px rgba(255, 217, 61, 0.5));
}

/* ============ Mobile ============ */
@media (max-width: 760px) {
  .bp { padding: 10px; }
  .bp-star { width: 36px; height: 36px; }
  .bp-final-total { font-size: 32px; }
}