body { gap: 18px; }

/* scoreboard chips */
#score {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* difficulty (size) button group — copied from connect-four */
#difficulty {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.diff-btn {
  padding: 8px 18px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
}
.diff-btn:hover { opacity: 1; background: var(--surface-3); }
.diff-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}
#difficulty[hidden] { display: none; }

/* the board — a square grid sized by --n columns */
#board {
  --n: 4;
  --gap: 8px;
  --pad: 12px;
  /* tile size scales to viewport but caps out on desktop */
  --tile: min(88px, calc((92vw - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n)));
  display: grid;
  grid-template-columns: repeat(var(--n), var(--tile));
  grid-template-rows: repeat(var(--n), var(--tile));
  gap: var(--gap);
  padding: var(--pad);
  background: var(--surface-2);
  border-radius: 14px;
  box-shadow: 0 10px 40px var(--shadow);
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--tile) * 0.42);
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 8px var(--shadow);
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
.tile:hover { transform: translateY(-2px); }

/* the empty space — non-interactive well */
.tile.blank {
  background: transparent;
  box-shadow: inset 0 3px 8px var(--shadow);
  cursor: default;
}
.tile.blank:hover { transform: none; }

/* tiles already sitting in their final spot */
.tile.placed { background: var(--green); }

/* solved celebration */
#board.won .tile:not(.blank) {
  animation: tilePop 0.5s ease;
}
@keyframes tilePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}