@import url('../global.css');

/* =============================================================================
   Tetris — game-specific styles (frame/controls/score-bar = shared).
   ========================================================================== */

/* --- Square play area: the board (10x20) is centered, black letterbox on the
   sides (same principle as the Pac-Man map). --- */
.play-area {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-color-dark);
}

/* --- Board: 10-column x 20-row grid, fills the full height. --- */
.tetris-board {
  height: 100%;
  aspect-ratio: 10 / 20;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(10, 1fr);
  gap: 1px;
}

/* --- Empty cell / piece --- */
.cell {
  background: var(--tetris-empty-bg);
  border-radius: var(--border-radius-xs);
}

.cell--I {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-i);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cell--O {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-o);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cell--T {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cell--S {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-s);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cell--Z {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-z);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cell--J {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-j);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cell--L {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%), var(--tetris-l);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* A completed row flashes solid white during the line-clear delay, just before
   it collapses. Declared after the coloured cells so it overrides their fill. */
.cell--clearing {
  background: var(--white-color);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

/* Ghost piece: outlines where the current piece will land. */
.cell--ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--border-radius-xs);
  box-sizing: border-box;
}

/* Danger state: red tint when the stack is getting high. */
.tetris-board.is-danger {
  background: color-mix(in srgb, var(--error-color) 6%, var(--background-color-dark));
  transition: background 0.6s ease;
}
/* Only tint empty cells — piece cells (cell--I, --O, etc.) keep their colour. */
.tetris-board.is-danger .cell:not([class*='cell--']) {
  background: color-mix(in srgb, var(--error-color) 12%, var(--tetris-empty-bg));
}