/* ===== Five in a Row (unit 079) — game CSS, all scoped to .g5 =====
   Jacobo's final game. Differences from the original file:
   - --ink and --bg are the site's own tokens (--color-text / --color-bg), so light and dark just work.
   - The two tokens are registered colours that transition 0.3s ease, like the rest of the site's theme switch;
     everything below is derived from them, so the whole board fades together (and a board reset, which does not
     change them, stays instant). prefers-reduced-motion is cut in css/base.css.
   - No margin / max-width / padding around the board: the square grid IS the game and takes the width it is given.
   - Computer ring and "computer wins" frame are 1px, the stroke of the cross and the arrows.
   Original notes:
   1. Only two tokens: --ink and --bg. Grid lines and dimmed states are --ink at low opacity (--line-mix).
   2. End states are classes on the board: .won-you (winning cells invert), .won-ai (board dims to .12, winning cells
      keep a 1px --ink border), .draw (everything to .4).
   3. .out also returns a cell to --bg, so inverted/bordered cells clear with their row. */
@property --ink { syntax: "<color>"; inherits: true; initial-value: #111111; }
@property --bg  { syntax: "<color>"; inherits: true; initial-value: #ffffff; }

.g5 {
  --ink: var(--color-text);
  --bg: var(--color-bg);
  --line-mix: 28%;            /* grid line = --ink at this strength */
  color: var(--ink);
  width: 100%;
  margin: 0;
  padding: 0;
  transition: --ink 0.3s ease, --bg 0.3s ease;
}
.g5-board {
  --line: color-mix(in srgb, var(--ink) var(--line-mix), var(--bg));
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.g5-cell {
  aspect-ratio: 1;
  min-width: 0;
  background: var(--bg);
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.g5-cell::after {
  content: "";
  width: 46%; height: 46%;
  border-radius: 50%;
  box-sizing: border-box;
}
/* hover preview */
.g5-board:not(.wait):not(.over) .g5-cell:not(.p1):not(.p2):hover::after {
  background: var(--ink); opacity: .12;
}
/* you = solid dot, computer = ring */
.g5-cell.p1::after { background: var(--ink); animation: g5-in .2s; }
.g5-cell.p2::after { border: 1px solid var(--ink); animation: g5-in .2s; }
.g5-board.wait .g5-cell, .g5-board.over .g5-cell { cursor: default; }

/* ---- End states ----
   Transitions exist only while .over is set, so when the board resets
   (all classes removed at once) nothing fades back in. */
.g5-board.over { transition: background-color .2s ease, border-color .2s ease; }
.g5-board.over .g5-cell { transition: background-color .2s ease, box-shadow .2s ease; }
.g5-board.over .g5-cell::after { transition: opacity .2s ease, background-color .2s ease, border-color .2s ease; }

/* You win: winning cells invert, the rest drops to .25 */
.g5-board.won-you { --line-mix: 2.5%; }
.g5-board.won-you .g5-cell:not(.win)::after { opacity: .25; }
.g5-board.won-you .g5-cell.win { background: var(--ink); }
.g5-board.won-you .g5-cell.win::after { background: var(--bg); }

/* Computer wins: board goes dark to .12, winning rings stay, 1px frame */
.g5-board.won-ai { --line-mix: 1.2%; }
.g5-board.won-ai .g5-cell:not(.win)::after { opacity: .12; }
.g5-board.won-ai .g5-cell.win { box-shadow: inset 0 0 0 1px var(--ink); }

/* Draw: everything to .4, nothing highlighted */
.g5-board.draw { --line-mix: 4%; }
.g5-board.draw .g5-cell::after { opacity: .4; }

/* then clear the board, row by row from the top: stones shrink away,
   highlighted cells fade back to --bg in the same step, and the grid
   returns to normal during the whole cascade */
.g5-cell.out::after { animation: g5-out .3s forwards; }
.g5-board.over .g5-cell.out { transition-duration: .3s; }
.g5-board.over .g5-cell.win.out { background: var(--bg); box-shadow: none; }
.g5-board.over.clearing { --line-mix: 28%; transition-duration: .9s; }

@keyframes g5-in  { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes g5-out { to { transform: scale(0); opacity: 0 } }