/* ==========================================================================
   2048 — estilos específicos do tabuleiro 4x4 e das peças numeradas
   ========================================================================== */

.g2048-board-wrap {
  width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

.g2048-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  background: var(--border);
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  touch-action: none;
  user-select: none;
}

.g2048-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: clamp(1rem, 5vw, 1.5rem);
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}

.g2048-tile.len-3 { font-size: clamp(0.85rem, 4vw, 1.2rem); }
.g2048-tile.len-4 { font-size: clamp(0.7rem, 3.4vw, 1rem); }
.g2048-tile.len-5 { font-size: clamp(0.6rem, 2.8vw, 0.85rem); }

.g2048-tile[data-value="2"] { background: var(--surface-alt); color: var(--text); }
.g2048-tile[data-value="4"] { background: var(--border); color: var(--text); }
.g2048-tile[data-value="8"] { background: var(--accent-dark); color: #05231f; }
.g2048-tile[data-value="16"] { background: var(--accent); color: #05231f; }
.g2048-tile[data-value="32"] { background: #00b3e6; color: #05171f; }
.g2048-tile[data-value="64"] { background: #6a5cff; color: #f1ecff; }
.g2048-tile[data-value="128"] { background: var(--accent-3); color: #2b1d00; }
.g2048-tile[data-value="256"] { background: #ff9d3f; color: #2b1500; }
.g2048-tile[data-value="512"] { background: var(--accent-2); color: #2b0417; }
.g2048-tile[data-value="1024"] { background: var(--danger); color: #2b0410; }
.g2048-tile[data-value="2048"] {
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  color: #2b0417;
  box-shadow: 0 0 16px rgba(255, 210, 63, 0.6);
}
.g2048-tile.is-super {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05231f;
  box-shadow: 0 0 16px rgba(0, 229, 199, 0.6);
}

@media (max-width: 420px) {
  .g2048-board { max-width: 300px; }
}