/* ==========================================================================
   Blocky Blast Puzzle — Game Styles
   --------------------------------------------------------------------------
   8x8 grid puzzle. Drag polyomino shapes from tray onto the board, clear
   full rows/columns. All animations are CSS keyframes + a small canvas
   particle layer for explosion bursts.
   ========================================================================== */

.bb-wrap {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  /* touch-action stays `auto` here so the page scrolls when the user
     touches empty areas (board background, header, help). Only the
     draggable .bb-shape inside the tray gets touch-action:none — once
     the drag starts there, the browser commits to drag and won't try
     to scroll mid-gesture. */
}

/* (Desktop layout media query moved to END of file so its rules win
   the cascade over default .bb-stage / .bb-tray margins.) */

/* ---- Header ---- */
.bb-header {
  margin-bottom: var(--space-3);
  text-align: center;   /* center title + subtitle on all viewports */
}
.bb-title {
  font-size: 1.75rem;
  margin: 0 0 4px;
  background: linear-gradient(135deg, #f59e0b, #ec4899 40%, #8b5cf6 70%, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.bb-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}
.bb-stats {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.bb-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  min-width: 72px;
  text-align: center;
}
.bb-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.bb-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bb-stat-value.pop {
  transform: scale(1.25);
  color: var(--gold-glow);
}
.bb-new-btn {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* ---- BSTM live-earning chip ---- */
.bb-stat.bb-earn-stat {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(236, 72, 153, 0.18));
  border-color: rgba(245, 158, 11, 0.5);
  min-width: 104px;
}
.bb-stat.bb-earn-stat.cooldown {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18));
  border-color: rgba(99, 102, 241, 0.5);
}
.bb-stat-earn-value {
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.05rem !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bb-stat.bb-earn-stat.cooldown .bb-stat-earn-value {
  background: linear-gradient(135deg, #818cf8, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
}
.bb-stat.bb-earn-stat.cooldown .bb-stat-label::after {
  content: " · resets in";
  opacity: 0.8;
}

/* ---- Game-over earned banner ---- */
.bb-earned-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 18px;
  margin: 8px 0 4px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(236, 72, 153, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  animation: bb-earned-pulse 1.6s ease-in-out infinite;
}
.bb-earned-row[style*="display:none"],
.bb-earned-row[style*="display: none"] { display: none !important; }
.bb-earned-icon {
  /* Sized to match the original emoji (~1.4rem) so layout stays the same */
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}
.bb-earned-amount {
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bb-earned-unit {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.05em;
}
@keyframes bb-earned-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.25); }
  50%      { box-shadow: 0 0 22px 4px rgba(251, 191, 36, 0.45); }
}

/* ---- Stage (board + fx overlay) ---- */
.bb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 600px;
  margin: 0 auto;
}
.bb-board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  padding: 12px;
  background:
    radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.18), transparent 60%),
    linear-gradient(135deg, #0f172a, #1e1b4b 50%, #1e293b);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 1;
}
.bb-cell {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  position: relative;
}
/* Colored block overlay — seat stays put; only this layer animates in/out. */
.bb-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.bb-cell.filled::after {
  background: var(--bb-color, linear-gradient(135deg, #6366f1, #8b5cf6));
  opacity: 1;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.35);
  animation: bb-cell-place 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bb-cell.preview::after {
  background: var(--bb-color, rgba(99, 102, 241, 0.45));
  opacity: 0.55;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.bb-cell.preview-invalid::after {
  background: rgba(239, 68, 68, 0.32);
  opacity: 0.55;
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.6);
}
.bb-cell.preview-clear::after {
  /* Will-clear-a-line highlight — golden glow */
  background: var(--bb-color, linear-gradient(135deg, #f59e0b, #fbbf24));
  opacity: 0.85;
  box-shadow:
    inset 0 0 0 2px #fbbf24,
    0 0 16px rgba(251, 191, 36, 0.65);
}
.bb-cell.clearing::after {
  animation: bb-cell-clear 380ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes bb-cell-place {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes bb-cell-clear {
  0%   { transform: scale(1);   opacity: 1; filter: brightness(1); }
  40%  { transform: scale(1.25); opacity: 1; filter: brightness(2.2); }
  100% { transform: scale(0);   opacity: 0; filter: brightness(1); }
}

/* ---- Particle / FX canvas ---- */
.bb-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---- Score popups (cleared lines bonus floating text) ---- */
.bb-popups {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.bb-popup {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fbbf24;
  text-shadow:
    0 0 12px rgba(251, 191, 36, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.6);
  animation: bb-popup-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform: translate(-50%, -50%);
}
@keyframes bb-popup-rise {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(0.9); }
}

/* ---- Combo banner ---- */
.bb-combo-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: white;
  text-shadow:
    0 0 24px rgba(245, 158, 11, 0.9),
    0 4px 16px rgba(0, 0, 0, 0.7);
  z-index: 4;
  white-space: nowrap;
  background: linear-gradient(135deg, #fbbf24, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.5));
  opacity: 0;
}
.bb-combo-banner.show {
  animation: bb-combo-pop 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bb-combo-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-8deg); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(2deg); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) rotate(0); }
}

/* ---- Tray (3 active shapes at bottom) ---- */
.bb-tray {
  margin-top: var(--space-2);   /* tighter gap board → tray */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  min-height: 144px;
}
.bb-tray-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  transition: background 180ms ease;
}
.bb-tray-slot.empty {
  background: transparent;
}
.bb-shape {
  position: relative;
  cursor: grab;
  touch-action: none;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: bb-shape-breathe 2400ms ease-in-out infinite;
}
.bb-shape.dragging {
  cursor: grabbing;
  z-index: 100;
  animation: none;
  /* Position is set inline via transform */
}
.bb-shape-cell {
  position: absolute;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes bb-shape-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.03); filter: brightness(1.1); }
}

/* ---- Help text ---- */
.bb-help {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.bb-help strong { color: var(--text-primary); }

/* ---- Game Over overlay ---- */
.bb-gameover {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bb-gameover.show {
  display: flex;
  animation: bb-fade-in 220ms ease-out;
}
/* Close-X on game-over card */
.bb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  z-index: 2;
}
.bb-close:hover, .bb-close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  transform: scale(1.05);
  outline: none;
}
.bb-gameover-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  animation: bb-gameover-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bb-gameover-card h2 {
  font-size: 2rem;
  margin: 0 0 var(--space-3);
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bb-gameover-msg {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.bb-gameover-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.bb-gameover-stats > div {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bb-gameover-stats .bb-stat-label { font-size: 0.6875rem; }
.bb-gameover-stats .mono { font-size: 1.5rem; font-weight: 700; }
.bb-final-score { color: var(--accent-glow); }
.bb-final-best  { color: var(--gold-glow); }

@keyframes bb-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes bb-gameover-pop {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Board shake when game over triggers ---- */
.bb-stage.shake { animation: bb-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes bb-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ---- Combo screen flash (subtle gold tint on big combos) ---- */
.bb-stage.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 5;
  animation: bb-flash 380ms ease-out;
}
@keyframes bb-flash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Mobile tweaks ---- */
@media (max-width: 600px) {
  .bb-title { font-size: 1.5rem; }
  .bb-stats { gap: var(--space-2); }
  .bb-stat { padding: 6px 10px; min-width: 60px; }
  .bb-stat-value { font-size: 1rem; }
  .bb-new-btn { padding: 6px 12px; }
  .bb-tray { padding: var(--space-3); gap: var(--space-2); }
  .bb-tray-slot { min-height: 88px; }
  .bb-board { gap: 3px; padding: 8px; }
}

/* ============================================================
   Desktop layout (≥1024px)
   Placed at the END of the stylesheet so that its rules win the
   cascade against the default .bb-stage / .bb-tray margins above
   (same specificity → later wins). Without this ordering, default
   `.bb-stage { margin: 0 auto }` and `.bb-tray { margin-top }`
   would override our desktop overrides and offset the tray /
   board from a shared centre line.
   ============================================================ */
@media (min-width: 1024px) {
  .bb-wrap {
    max-width: min(920px, 100%);
    display: grid;
    grid-template-columns: clamp(132px, 16vw, 180px) minmax(0, 1fr);
    /* "." in row 1 col 1 = empty, so the title (header) sits only
       in column 2 — directly above the board — on the board's own
       vertical centre line, NOT the page centre. */
    grid-template-areas:
      ".     header"
      "stats stage"
      "stats tray"
      "stats help";
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    align-items: start;
  }
  .bb-header {
    grid-area: header;
    justify-self: start;
    width: 100%;
    max-width: 600px;       /* match .bb-stage / .bb-tray / .bb-help */
    margin: 0 0 var(--space-2);
    text-align: center;     /* title + subtitle centred over the board */
    display: block;
  }
  .bb-stats {
    grid-area: stats;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    align-self: start;
    margin-bottom: 0;       /* override default mobile margin-bottom */
  }
  .bb-stat { min-width: 0; width: 100%; }
  .bb-new-btn { width: 100%; }

  /* Force-align board, tray, help to the SAME left edge as the
     header, with the SAME 600px max-width. Margin overrides defeat
     the default .bb-stage `margin: 0 auto` (which would centre it
     in its grid cell) and the default .bb-tray `margin-top`. */
  .bb-stage { grid-area: stage; justify-self: start; margin: 0; }
  .bb-tray  { grid-area: tray;  justify-self: start; margin: 0; width: 100%; max-width: 600px; }
  .bb-help  { grid-area: help;  justify-self: start; margin: 0; width: 100%; max-width: 600px; }
}