.game-page {
  max-width: 62rem;
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-space);
}

.game-workspace {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  max-width: 38rem;
  margin-inline: auto;
}

.game-workspace--compact {
  max-width: 30rem;
}

.game-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.game-settings {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.game-setting {
  max-width: 15rem;
}

.game-custom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-3);
  align-items: end;
}

.game-custom--small {
  grid-template-columns: minmax(0, 12rem) auto;
}

.game-custom[hidden] {
  display: none;
}

.game-config-status {
  min-height: 1.4rem;
  margin: 0;
}

.game-board-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.game-board-scroll--bounded {
  max-height: min(72vh, 48rem);
  overflow: auto;
  scrollbar-gutter: stable;
}

.game-help,
.game-check {
  width: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.game-check {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 2.75rem;
}

.game-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 3rem;
}

.game-status {
  flex: 1;
  min-width: 10rem;
  margin: 0;
  color: var(--color-text-soft);
  font-weight: 600;
}

.score-pair {
  display: flex;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.tic-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(4rem, 6.75rem));
  border-top: 1px solid var(--color-text);
  border-left: 1px solid var(--color-text);
}

.tic-cell {
  aspect-ratio: 1;
  border: 0;
  border-right: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  font-size: clamp(2rem, 8vw, 3.75rem);
  font-weight: 620;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.tic-cell:hover:not(:disabled) {
  background: var(--color-surface);
}

.tic-cell[data-value="X"] {
  color: var(--color-accent);
}

.tic-cell[data-winning="true"] {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
}

.tic-board[data-speed="true"] {
  border-color: var(--color-accent);
}

.tic-cell:disabled {
  cursor: default;
}

.board-2048 {
  display: grid;
  grid-template-columns: repeat(4, minmax(3.6rem, 5.5rem));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  touch-action: none;
}

.tile-2048 {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: clamp(1.1rem, 4vw, 1.65rem);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.tile-2048[data-value="2"],
.tile-2048[data-value="4"] {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

.tile-2048[data-value="8"],
.tile-2048[data-value="16"] {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg));
}

.tile-2048[data-value="32"],
.tile-2048[data-value="64"] {
  background: color-mix(in srgb, var(--color-accent) 32%, var(--color-bg));
}

.tile-2048[data-value="128"],
.tile-2048[data-value="256"],
.tile-2048[data-value="512"] {
  background: color-mix(in srgb, var(--color-accent) 58%, var(--color-bg));
  color: var(--color-on-accent);
}

.tile-2048[data-value="1024"],
.tile-2048[data-value="2048"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.direction-pad {
  display: grid;
  grid-template-columns: repeat(3, 3rem);
  gap: var(--space-1);
  justify-content: center;
}

.direction-pad button {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-weight: 720;
}

.direction-pad button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.direction-pad [data-snake-move="up"] { grid-column: 2; grid-row: 1; }
.direction-pad [data-snake-move="left"] { grid-column: 1; grid-row: 2; }
.direction-pad [data-snake-move="right"] { grid-column: 3; grid-row: 2; }
.direction-pad [data-snake-move="down"] { grid-column: 2; grid-row: 3; }

.memory-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(3.6rem, 5.25rem));
  gap: var(--space-2);
}

.memory-card {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: transparent;
  font-size: var(--text-xl);
  font-weight: 720;
  transition: transform var(--duration-normal) var(--ease-out), background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.memory-card:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.memory-card[data-revealed="true"],
.memory-card[data-matched="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.memory-card[data-matched="true"] {
  background: var(--color-surface-strong);
  color: var(--color-text);
}

.mine-board {
  display: grid;
  grid-template-columns: repeat(var(--mine-columns, 8), var(--mine-cell-size, 2.25rem));
  width: max-content;
  margin-inline: auto;
  border-top: 1px solid var(--color-text);
  border-left: 1px solid var(--color-text);
}

.mine-cell {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 720;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mine-cell:hover:not(:disabled) {
  background: var(--color-surface-strong);
}

.mine-cell[data-revealed="true"] {
  background: var(--color-bg);
}

.mine-cell[data-mine="true"] {
  color: var(--color-error);
}

.mine-cell[data-number="1"],
.mine-cell[data-number="4"] { color: var(--color-accent); }
.mine-cell[data-number="2"],
.mine-cell[data-number="5"] { color: var(--color-success); }
.mine-cell[data-number="3"],
.mine-cell[data-number="6"] { color: var(--color-error); }

.snake-board {
  width: min(100%, 22.5rem);
  height: auto;
  border: 1px solid var(--color-text);
  background: var(--color-surface);
  touch-action: none;
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(2rem, 2.7rem));
  width: min(100%, 24.3rem);
  border-top: 2px solid var(--color-text);
  border-left: 2px solid var(--color-text);
}

.sudoku-cell {
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-accent);
  text-align: center;
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 650;
}

.sudoku-cell:nth-child(3n) { border-right: 2px solid var(--color-text); }
.sudoku-cell:nth-child(n + 19):nth-child(-n + 27),
.sudoku-cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 2px solid var(--color-text); }
.sudoku-cell[data-fixed="true"] { background: var(--color-surface); color: var(--color-text); }
.sudoku-cell[data-invalid="true"] { background: color-mix(in srgb, var(--color-error) 12%, var(--color-bg)); color: var(--color-error); }

.fifteen-board,
.lights-board {
  display: grid;
  width: min(100%, 24rem);
  border-top: 1px solid var(--color-text);
  border-left: 1px solid var(--color-text);
}

.fifteen-board { grid-template-columns: repeat(4, 1fr); }
.lights-board {
  grid-template-columns: repeat(var(--lights-size, 6), var(--lights-cell-size, 3.5rem));
  width: max-content;
  margin-inline: auto;
}

.fifteen-cell,
.lights-cell {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 680;
}

.fifteen-cell:hover:not(:disabled),
.lights-cell:hover:not(:disabled) {
  background: var(--color-surface-strong);
}

.fifteen-cell[data-empty="true"] {
  background: var(--color-bg);
}

.lights-cell[data-on="true"] {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-bg);
}

.lights-cell[data-hint="true"] {
  outline: 3px solid var(--color-text);
  outline-offset: -5px;
}

.reaction-target {
  display: grid;
  width: 100%;
  min-height: clamp(14rem, 45vw, 22rem);
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 680;
}

.reaction-target[data-state="waiting"] {
  background: var(--color-surface-strong);
}

.reaction-target[data-state="ready"] {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

@media (max-width: 48rem) {
  .game-toolbar {
    justify-content: center;
  }

  .game-status {
    flex-basis: 100%;
    text-align: center;
  }

  .game-options {
    grid-template-columns: 1fr;
  }

  .game-custom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-custom .button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .game-custom--small {
    grid-template-columns: minmax(0, 12rem);
  }
}

@media (max-width: 26rem) {
  .board-2048,
  .memory-board {
    grid-template-columns: repeat(4, minmax(3.2rem, 1fr));
    width: 100%;
  }

  .sudoku-board {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-card { transition: none; }
}