/* ============================================================
   Board — 6×5 tile grid + animations
   ============================================================ */

.board {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  width: calc(5 * var(--tile-size) + 4 * 5px);
  height: calc(6 * var(--tile-size) + 5 * 5px);
}

.board-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

/* ============================================================
   Tile
   ============================================================ */
.tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-tile-border-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, calc(var(--tile-size) * 0.5), 2rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  user-select: none;
  position: relative;
  transition: border-color 0.05s;
  /* For flip animation */
  perspective: 250px;
}

/* Letter typed but row not yet submitted */
.tile[data-state="tbd"] {
  border-color: var(--color-tile-border-filled);
  animation: tile-pop 0.1s ease;
}

/* Revealed states */
.tile[data-state="correct"] {
  background-color: var(--color-correct);
  border-color: var(--color-correct);
  color: #fff;
}
.tile[data-state="present"] {
  background-color: var(--color-present);
  border-color: var(--color-present);
  color: #fff;
}
.tile[data-state="absent"] {
  background-color: var(--color-absent);
  border-color: var(--color-absent);
  color: #fff;
}

/* ============================================================
   Animations
   ============================================================ */

/* Pop — typed letter */
@keyframes tile-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Flip-in — tile face rotates away (phase 1) */
@keyframes flip-in {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

/* Flip-out — tile face rotates back, revealing color (phase 2) */
@keyframes flip-out {
  0%   { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}

.tile.flip-in {
  animation: flip-in 0.2s ease forwards;
}
.tile.flip-out {
  animation: flip-out 0.2s ease forwards;
}

/* Shake — invalid word */
@keyframes row-shake {
  0%, 100% { transform: translateX(0); }
  10%       { transform: translateX(-4px); }
  30%       { transform: translateX(4px); }
  50%       { transform: translateX(-4px); }
  70%       { transform: translateX(4px); }
  90%       { transform: translateX(-2px); }
}

.board-row.shake {
  animation: row-shake 0.45s ease;
}

/* Bounce — win celebration */
@keyframes tile-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-20px); }
  60%  { transform: translateY(4px); }
  80%  { transform: translateY(-10px); }
  90%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

.tile.bounce {
  animation: tile-bounce 0.8s ease forwards;
}