/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Game room boards: tic-tac-toe cells and the checkers board.
 */
.games-board {
    display: grid;
    gap: .5rem;
    width: min(100%, 680px);
    margin-inline: auto;
  }
  .games-cell {
    min-height: 64px;
    border: 1px solid rgba(120, 130, 150, .4);
    border-radius: .75rem;
    background: color-mix(in oklab, var(--bs-body-bg), var(--bs-emphasis-color) 2%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, background .12s ease;
  }
  .games-cell:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--bs-body-bg), var(--bs-primary) 8%); }
  .games-cell.locked { cursor: not-allowed; opacity: .65; }
  .games-checkers {
    width: min(100%, 700px);
    margin-inline: auto;
    border: 1px solid rgba(var(--bs-border-color-rgb), .65);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .games-checkers-row { display: flex; }
  .games-checkers-cell {
    position: relative;
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3dfbe;
    cursor: pointer;
  }
  .games-checkers-cell.light { background: #f2e6cc; }
  .games-checkers-cell.dark { background: #6d4f32; }
  .games-checkers-cell.disabled { cursor: default; }
  .games-checkers-cell.selected {
    box-shadow: inset 0 0 0 3px rgba(var(--bs-primary-rgb), .85);
  }
  .games-checkers-cell.legal::after {
    content: "";
    position: absolute;
    width: 24%;
    height: 24%;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .16);
  }
  .games-checkers-piece {
    width: min(78%, 52px);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.45);
    box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 1px 3px rgba(255,255,255,.22);
    position: relative;
  }
  .games-checkers-piece.black {
    background: radial-gradient(circle at 35% 30%, #575757, #1f1f1f 68%, #0f0f0f 100%);
  }
  .games-checkers-piece.white {
    background: radial-gradient(circle at 30% 28%, #ffffff, #dddddd 68%, #c5c5c5 100%);
    border-color: rgba(0,0,0,.18);
  }
  .games-checkers-piece.king::after {
    content: "K";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.72rem, 1.1vw, .96rem);
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 215, 125, .95);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
  }