/* ===== Threes! — style.css ===== */

:root {
  --board-size: min(88vmin, 360px);
  --gap: calc(var(--board-size) * 0.028);
  --cell: calc((var(--board-size) - var(--gap) * 5) / 4);
  --radius: 8px;
  --slide-ms: 110ms;

  /* board chrome */
  --board-bg: #b8a89a;
  --cell-bg: rgba(255,255,255,0.15);
  --overlay-bg: rgba(200,190,180,0.88);
}

body.dark {
  --board-bg: #5a4e46;
  --cell-bg: rgba(255,255,255,0.08);
  --overlay-bg: rgba(40,35,30,0.88);
}

/* ===== Layout ===== */
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: var(--board-size);
}

/* ===== Next tile preview ===== */
.next-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 4px 12px;
  font-size: 14px;
}

.next-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.next-tile {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}

/* ===== Board ===== */
.board-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  background: var(--board-bg);
  border-radius: calc(var(--radius) * 1.5);
  padding: var(--gap);
  touch-action: none;
  user-select: none;
  box-shadow: var(--shadow-md);
}

.grid-bg {
  position: absolute;
  inset: var(--gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
}

.cell {
  background: var(--cell-bg);
  border-radius: var(--radius);
}

.tiles {
  position: absolute;
  inset: var(--gap);
}

/* ===== Tile base ===== */
.tile {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--cell) * 0.42);
  transition: transform var(--slide-ms) ease;
  will-change: transform;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1);
}

/* ===== Tile color scheme (Threes-inspired) ===== */
/* 1 — blue */
.tile[data-value="1"] {
  background: linear-gradient(135deg, #5ba0e0 0%, #3a7cc4 100%);
  color: #fff;
}
/* 2 — red */
.tile[data-value="2"] {
  background: linear-gradient(135deg, #e05d54 0%, #c23830 100%);
  color: #fff;
}
/* 3 — cream/white */
.tile[data-value="3"] {
  background: linear-gradient(135deg, #f5f0e8 0%, #e8e0d0 100%);
  color: #6b5e52;
}
/* 6 — light yellow */
.tile[data-value="6"] {
  background: linear-gradient(135deg, #f7d458 0%, #e8c030 100%);
  color: #6b5220;
}
/* 12 — orange */
.tile[data-value="12"] {
  background: linear-gradient(135deg, #f7aa3a 0%, #e88a18 100%);
  color: #fff;
}
/* 24 — deeper orange */
.tile[data-value="24"] {
  background: linear-gradient(135deg, #f5903a 0%, #d96820 100%);
  color: #fff;
}
/* 48 — warm coral */
.tile[data-value="48"] {
  background: linear-gradient(135deg, #f27050 0%, #d84828 100%);
  color: #fff;
}
/* 96 — crimson */
.tile[data-value="96"] {
  background: linear-gradient(135deg, #e04848 0%, #c02020 100%);
  color: #fff;
}
/* 192 — deep red */
.tile[data-value="192"] {
  background: linear-gradient(135deg, #c83838 0%, #a01818 100%);
  color: #fff;
  font-size: calc(var(--cell) * 0.36);
}
/* 384+ — purple family, getting richer */
.tile[data-value="384"] {
  background: linear-gradient(135deg, #a040c8 0%, #7820a8 100%);
  color: #fff;
  font-size: calc(var(--cell) * 0.36);
}
.tile[data-value="768"] {
  background: linear-gradient(135deg, #7840d8 0%, #5020b8 100%);
  color: #fff;
  font-size: calc(var(--cell) * 0.32);
}
.tile[data-value="1536"] {
  background: linear-gradient(135deg, #4858d8 0%, #2830b0 100%);
  color: #fff;
  font-size: calc(var(--cell) * 0.28);
}
.tile[data-value="3072"] {
  background: linear-gradient(135deg, #2870e0 0%, #0848b8 100%);
  color: #fff;
  font-size: calc(var(--cell) * 0.26);
  box-shadow: 0 0 28px rgba(80,130,240,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Super tiles (6144+) */
.tile.super {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #e0d0ff;
  font-size: calc(var(--cell) * 0.22);
  box-shadow: 0 0 32px rgba(120,80,240,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ===== Tile animations ===== */
.tile.appear {
  animation: tile-appear 0.16s ease-out;
}

.tile.merged {
  animation: tile-pop 0.16s ease-out;
}

@keyframes tile-appear {
  0%   { transform: translate(var(--x), var(--y)) scale(0.3); opacity: 0.4; }
  60%  { transform: translate(var(--x), var(--y)) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
}

@keyframes tile-pop {
  0%   { transform: translate(var(--x), var(--y)) scale(1); }
  40%  { transform: translate(var(--x), var(--y)) scale(1.15); }
  100% { transform: translate(var(--x), var(--y)) scale(1); }
}

/* ===== Overlay ===== */
.overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  border-radius: calc(var(--radius) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  animation: fadein 0.3s ease;
  backdrop-filter: blur(4px);
}

.overlay[hidden] { display: none; }

.overlay-text {
  font-size: clamp(32px, 7vmin, 52px);
  font-weight: 800;
  color: var(--text);
}

.overlay-score {
  font-size: clamp(18px, 4vmin, 26px);
  font-weight: 700;
  color: var(--text-muted);
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Next tile preview colors (mirror tile colors) ===== */
.next-tile[data-value="1"] { background: #4a90d9; color: #fff; }
.next-tile[data-value="2"] { background: #d9534a; color: #fff; }

/* ===== Responsive / small screens ===== */
@media (max-width: 400px) {
  :root {
    --board-size: min(92vmin, 320px);
  }
}