*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #faf8ef;
  --text: #776e65;
  --accent: #8f7a66;
  --board: #bbada0;
  --cell: #cdc1b4;
}

html, body { margin: 0; }

/* L'attribut hidden l'emporte toujours sur les display des composants (.button, .overlay…) */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}

.site-header, .site-main, .site-footer {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 12px;
}

.site-header { padding-top: 16px; }
.site-header h1 { margin: 0 0 8px; font-size: clamp(2rem, 9vw, 3.2rem); }
.site-header nav { display: flex; gap: 16px; flex-wrap: wrap; }

a { color: var(--accent); font-weight: bold; }
a[aria-current="page"] { text-decoration: none; color: var(--text); }

.site-main { flex: 1; padding-top: 16px; padding-bottom: 16px; }

.game-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.scores { display: flex; gap: 8px; }
.score-box {
  min-width: 72px;
  padding: 4px 10px;
  background: var(--board);
  color: #eee4da;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: center;
}
.score-box strong { display: block; color: #fff; font-size: 1.25rem; }

/* Plateau carré : prend toute la largeur disponible, 500x500 au maximum */
.board-wrap {
  position: relative;
  width: min(100%, 500px, calc(100vh - 260px));
  min-width: 260px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3%;
  padding: 3%;
  background: var(--board);
  border-radius: 6px;
  touch-action: none;
  user-select: none;
  container-type: inline-size;
}
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--cell);
  font-weight: bold;
  font-size: 11cqw;
  color: #776e65;
}
.cell.small { font-size: 8cqw; }
.cell.tiny { font-size: 6cqw; }
.cell[data-value] { animation: pop 120ms ease-out; }
/* Couleurs vives en HSL : base hsl(45 64% 48%) pour le 2, puis la teinte avance de 30° à chaque doublement
   (teinte = 45 + 30 × (log2(valeur) − 1)). Texte foncé jusqu'à 64, blanc ensuite (contraste ≥ 4,8). */
.cell[data-value] {
  --tile-s: 64%;
  --tile-l: 48%;
  background: hsl(var(--tile-h) var(--tile-s) var(--tile-l));
  color: hsl(45 64% 12%);
}
.cell[data-value="2"] { --tile-h: 45; }
.cell[data-value="4"] { --tile-h: 75; }
.cell[data-value="8"] { --tile-h: 105; }
.cell[data-value="16"] { --tile-h: 135; }
.cell[data-value="32"] { --tile-h: 165; }
.cell[data-value="64"] { --tile-h: 195; }
.cell[data-value="128"] { --tile-h: 225; color: #fff; }
.cell[data-value="256"] { --tile-h: 255; color: #fff; }
.cell[data-value="512"] { --tile-h: 285; color: #fff; }
.cell[data-value="1024"] { --tile-h: 315; color: #fff; }
.cell[data-value="2048"] { --tile-h: 345; color: #fff; }
.cell[data-value="super"] { --tile-h: 15; --tile-l: 30%; color: #fff; }

@keyframes pop { from { transform: scale(0.9); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cell[data-value] { animation: none; } }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 6px;
  background: rgba(238, 228, 218, 0.75);
  text-align: center;
}
.overlay[data-kind="win"] { background: hsl(345 64% 48% / 0.7); color: #fff; }
.overlay p { margin: 0; font-size: 1.8rem; font-weight: bold; }
.overlay-actions { display: flex; gap: 8px; }

.help { font-size: 0.9rem; line-height: 1.4; }

.about { line-height: 1.5; }
.button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent);
  color: #f9f6f2;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.site-footer {
  padding-bottom: 16px;
  font-size: 0.85rem;
  text-align: center;
}
.site-footer p { margin: 4px 0; }