/* ═══════════════════════════════════════════════
   games.css  — extends styles.css variables
═══════════════════════════════════════════════ */

/* ── utility ── */
.hidden { display: none !important; }

/* ═══════════════════════
   LAYOUT — nav clearance
═══════════════════════ */
#game-list,
#game-container {
  padding-top: 80px;
  padding-bottom: 4rem;
}

/* ═══════════════════════
   GAME LIST
═══════════════════════ */
#game-list {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.gl-header {
  text-align: center;
  padding: 1.5rem 0 1rem;
}

.gl-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .35rem;
}

.gl-sub {
  color: var(--muted);
  font-size: .95rem;
}

/* ── search ── */
.gl-search-wrap {
  max-width: 420px;
  margin: 1rem auto;
}

.gl-search {
  width: 100%;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s;
}

.gl-search:focus { border-color: var(--accent); }

/* ── category pills ── */
.gl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: .75rem 0 .5rem;
}

.cat-btn {
  padding: .4rem .95rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.cat-btn:hover        { border-color: var(--accent); color: var(--text); }
.cat-btn--active      { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-btn--active:hover{ color: #fff; }

/* ── count ── */
.gl-count {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .75rem;
}

/* ── card grid ── */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .85rem;
}

.gl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: border-color .2s, transform .2s;
  cursor: default;
}

.gl-card:hover {
  border-color: rgba(108,99,255,.45);
  transform: translateY(-2px);
}

.gl-icon { font-size: 1.8rem; line-height: 1; margin-bottom: .15rem; }

.gl-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.gl-desc {
  font-size: .77rem;
  color: var(--muted);
  flex: 1;
  line-height: 1.45;
}

.gl-card .play-btn {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .45rem .75rem;
  border-radius: 7px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.gl-card .play-btn:hover { opacity: .85; }

/* ═══════════════════════
   GAME CONTAINER
═══════════════════════ */
#game-container {
  max-width: 700px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.gc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}

.gc-back,
.gc-restart {
  padding: .4rem .9rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.gc-back:hover,
.gc-restart:hover { border-color: var(--accent); color: var(--accent); }

.gc-title {
  font-size: 1.2rem;
  font-weight: 800;
  flex: 1;
  text-align: center;
  color: var(--text);
}

.gc-instructions {
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.5;
  min-height: 1rem;
}

/* ═══════════════════════
   SHARED GAME PIECES
═══════════════════════ */
.g-status {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
  min-height: 1.4rem;
  color: var(--text);
}

.g-score {
  text-align: center;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: .75rem;
}

.g-btns {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.g-btn {
  padding: .55rem 1.2rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.g-btn:hover        { border-color: var(--accent); background: var(--surface); }
.g-btn.active       { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-btn:disabled     { opacity: .4; cursor: default; }

/* big action button */
.g-big-btn {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: .75rem auto 0;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.g-big-btn:hover { opacity: .85; }

/* text input shared */
.g-input {
  padding: .55rem .9rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: .95rem;
  outline: none;
  transition: border-color .15s;
}

.g-input:focus { border-color: var(--accent); }

/* big display number / text */
.g-display {
  text-align: center;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin: .5rem 0;
  color: var(--text);
}

.g-display-sm {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin: .5rem 0;
  color: var(--accent);
}

/* ═══════════════════════
   TIC-TAC-TOE
═══════════════════════ */
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  max-width: 280px;
  margin: 0 auto .75rem;
}

.ttt-cell {
  aspect-ratio: 1;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 1.9rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font);
  transition: background .15s;
}

.ttt-cell:hover:not(:disabled) { background: var(--surface); }
.ttt-cell.x   { color: var(--accent); }
.ttt-cell.o   { color: var(--accent2); }
.ttt-cell.win { background: rgba(108,99,255,.2); border-color: var(--accent); }

/* ═══════════════════════
   ROCK PAPER SCISSORS
═══════════════════════ */
.rps-result {
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  min-height: 1.6rem;
  margin: .6rem 0;
}

/* ═══════════════════════
   NUMBER GUESS
═══════════════════════ */
.ng-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.ng-input {
  width: 130px;
  padding: .55rem .9rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 1.1rem;
  text-align: center;
  font-family: var(--font);
  outline: none;
}

.ng-input:focus { border-color: var(--accent); }

/* ═══════════════════════
   MEMORY MATCH
═══════════════════════ */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  max-width: 320px;
  margin: 0 auto .75rem;
}

.mem-card {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  user-select: none;
}

.mem-card.revealed { background: var(--surface); }
.mem-card.matched  { background: rgba(74,222,128,.15); border-color: var(--green); cursor: default; }

/* ═══════════════════════
   SNAKE
═══════════════════════ */
#snake-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  max-width: 100%;
}

/* ═══════════════════════
   2048
═══════════════════════ */
.g2048-board {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  background: var(--surface2);
  border-radius: 9px;
  padding: 6px;
  max-width: 300px;
  margin: 0 auto .75rem;
  touch-action: none;
}

.g2048-cell {
  aspect-ratio: 1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
}

.t2    { background:#3a3a5c; }  .t4   { background:#44446a; }
.t8    { background:#5a3e7a; color:#fff; } .t16 { background:#6c3fa0; color:#fff; }
.t32   { background:#7c40c0; color:#fff; } .t64 { background:#8c43d8; color:#fff; }
.t128  { background:#6c63ff; color:#fff; font-size:.95rem; }
.t256  { background:#5a52e0; color:#fff; font-size:.9rem; }
.t512  { background:#4a43cc; color:#fff; font-size:.85rem; }
.t1024 { background:#ff6584; color:#fff; font-size:.75rem; }
.t2048 { background:#ff4f6e; color:#fff; font-size:.75rem; }

/* ═══════════════════════
   REACTION BOX
═══════════════════════ */
#reaction-box {
  width: 100%;
  max-width: 400px;
  height: 180px;
  margin: 0 auto .75rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  user-select: none;
  transition: background .15s;
}

#reaction-box.waiting { background: #c0392b; color: #fff; border-color: #c0392b; }
#reaction-box.go      { background: #27ae60; color: #fff; border-color: #27ae60; }

/* ═══════════════════════
   CONNECT 4
═══════════════════════ */
.c4-board {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 5px;
  background: var(--surface2);
  border-radius: 9px;
  padding: 5px;
  max-width: 360px;
  margin: 0 auto .75rem;
}

.c4-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dark2);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}

.c4-cell.p1  { background: var(--accent2); border-color: var(--accent2); }
.c4-cell.p2  { background: var(--accent);  border-color: var(--accent); }
.c4-cell.win { outline: 3px solid #fff; }

/* ═══════════════════════
   WHACK-A-MOLE
═══════════════════════ */
.wam-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  max-width: 280px;
  margin: 0 auto .75rem;
}

.wam-hole {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}

.wam-hole.active { background: var(--surface); border-color: var(--accent); }
.wam-hole.miss   { background: rgba(255,101,132,.2); }

/* ═══════════════════════
   SPIN THE WHEEL
═══════════════════════ */
.wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

#wheel-canvas {
  border-radius: 50%;
  border: 2px solid var(--border);
  max-width: 260px;
  width: 100%;
}

.wheel-result {
  font-size: 1.15rem;
  font-weight: 700;
  min-height: 1.6rem;
  color: var(--accent);
}

.wheel-options-wrap { width: 100%; max-width: 300px; }

.wheel-options-wrap label {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .35rem;
}

#wheel-options-input {
  width: 100%;
  padding: .5rem .85rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: .85rem;
  outline: none;
}

#wheel-options-input:focus { border-color: var(--accent); }

/* ═══════════════════════
   HANGMAN
═══════════════════════ */
.hangman-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.hangman-drawing {
  font-size: 3.5rem;
  line-height: 1;
  margin: .25rem 0;
}

.hangman-word {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text);
}

.hangman-letter {
  border-bottom: 3px solid var(--accent);
  min-width: 1.4rem;
  text-align: center;
  line-height: 1.2;
}

.hangman-used {
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
  max-width: 320px;
}

.hangman-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  max-width: 340px;
}

.hkey {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .1s, opacity .1s;
}

.hkey:disabled { opacity: .25; cursor: default; }
.hkey.correct  { background: rgba(74,222,128,.2); border-color: var(--green); }
.hkey.wrong    { background: rgba(255,101,132,.2); border-color: var(--accent2); }

/* ═══════════════════════
   LIGHTS OUT
═══════════════════════ */
.lo-board {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 6px;
  max-width: 240px;
  margin: 0 auto .75rem;
}

.lo-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: background .1s;
}

.lo-cell.on { background: #f8c555; border-color: #f8c555; box-shadow: 0 0 8px #f8c555; }

/* ═══════════════════════
   MINESWEEPER
═══════════════════════ */
.ms-board {
  display: grid;
  grid-template-columns: repeat(9,1fr);
  gap: 3px;
  max-width: 320px;
  margin: 0 auto .75rem;
}

.ms-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
  user-select: none;
}

.ms-cell.open  { background: var(--dark2); cursor: default; }
.ms-cell.mine  { background: rgba(255,101,132,.3); }
.ms-cell.flag  { background: var(--surface); }
.ms-cell.n1 { color: #4ade80; } .ms-cell.n2 { color: #38bdf8; }
.ms-cell.n3 { color: var(--accent2); } .ms-cell.n4 { color: var(--accent); }

/* ═══════════════════════
   15-PUZZLE
═══════════════════════ */
.puzzle15-board {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
  max-width: 260px;
  margin: 0 auto .75rem;
}

.p15-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 1.2rem;
  font-weight: 800;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}

.p15-cell.empty { background: var(--dark2); border-color: var(--dark2); cursor: default; }
.p15-cell:hover:not(.empty) { background: var(--surface2); }

/* ═══════════════════════
   WORD SCRAMBLE / WORD GUESS
═══════════════════════ */
.word-display {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--accent);
  margin: .5rem 0;
}

.word-hint {
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .5rem;
}

/* ═══════════════════════
   MATH QUIZ
═══════════════════════ */
.math-question {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text);
  margin: .5rem 0;
}

.math-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  max-width: 280px;
  margin: 0 auto;
}

.math-opt {
  padding: .7rem;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}

.math-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
.math-opt.correct { background: rgba(74,222,128,.2); border-color: var(--green); }
.math-opt.wrong   { background: rgba(255,101,132,.2); border-color: var(--accent2); }

/* ═══════════════════════
   CANVAS GAMES (Pong, Breakout, etc.)
═══════════════════════ */
.game-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  max-width: 100%;
}

.canvas-hint {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .5rem;
}

/* touch D-pad for canvas games */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  gap: 4px;
  justify-content: center;
  margin-top: .75rem;
}

.dpad-btn {
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  transition: background .1s;
  touch-action: manipulation;
}

.dpad-btn:active { background: var(--accent); border-color: var(--accent); }
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-center{ grid-column: 2; grid-row: 2; font-size: .75rem; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }

/* ═══════════════════════
   BLACKJACK / CARD GAMES
═══════════════════════ */
.card-hand {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: .4rem 0;
}

.playing-card {
  width: 44px;
  height: 60px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  cursor: default;
}

.playing-card.red  { color: var(--accent2); }
.playing-card.black{ color: var(--text); }
.playing-card.back { background: var(--accent); color: #fff; font-size: 1.4rem; }

/* ═══════════════════════
   PARTY / KIDS text boxes
═══════════════════════ */
.party-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}

/* ═══════════════════════
   SIMON SAYS
═══════════════════════ */
.simon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 220px;
  margin: 0 auto .75rem;
}

.simon-btn {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  opacity: .65;
  transition: opacity .1s;
}

.simon-btn.lit { opacity: 1; box-shadow: 0 0 16px currentColor; }
.simon-btn:disabled { cursor: default; }
.simon-red    { background: #e74c3c; color: #e74c3c; }
.simon-green  { background: #27ae60; color: #27ae60; }
.simon-blue   { background: #2980b9; color: #2980b9; }
.simon-yellow { background: #f39c12; color: #f39c12; }

/* ═══════════════════════
   SUDOKU MINI (4x4)
═══════════════════════ */
.sudoku-board {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3px;
  max-width: 200px;
  margin: 0 auto .75rem;
  background: var(--accent);
  padding: 3px;
  border-radius: 8px;
}

.sudoku-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--surface2);
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  cursor: text;
}

.sudoku-cell.given { background: var(--surface); color: var(--accent); cursor: default; }
.sudoku-cell.wrong { background: rgba(255,101,132,.2); }

/* ═══════════════════════
   DOTS AND BOXES
═══════════════════════ */
.dab-board {
  display: inline-block;
  margin: 0 auto .75rem;
}

.dab-row {
  display: flex;
  align-items: center;
}

.dab-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.dab-hline, .dab-vline {
  cursor: pointer;
  transition: background .1s;
  flex-shrink: 0;
}

.dab-hline {
  width: 50px; height: 8px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.dab-hline.taken { cursor: default; }
.dab-hline.p1    { background: var(--accent2); border-color: var(--accent2); }
.dab-hline.p2    { background: var(--accent);  border-color: var(--accent); }

.dab-vline {
  width: 8px; height: 50px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.dab-vline.taken { cursor: default; }
.dab-vline.p1    { background: var(--accent2); border-color: var(--accent2); }
.dab-vline.p2    { background: var(--accent);  border-color: var(--accent); }

.dab-box {
  width: 50px; height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ═══════════════════════
   RESPONSIVE
═══════════════════════ */
@media (max-width: 600px) {
  .gl-grid { grid-template-columns: repeat(auto-fill, minmax(145px,1fr)); gap: .65rem; }
  .gl-title { font-size: 1.7rem; }
  .cat-btn  { font-size: .75rem; padding: .35rem .75rem; }
  .gc-title { font-size: 1.05rem; }

  .ttt-board   { max-width: 230px; }
  .mem-grid    { max-width: 270px; }
  .c4-board    { max-width: 290px; gap: 3px; }
  .wam-grid    { max-width: 240px; }
  .g2048-board { max-width: 260px; }
  .ms-board    { max-width: 270px; }
  .math-question { font-size: 1.8rem; }
  .hangman-keys .hkey { width: 32px; height: 32px; font-size: .75rem; }
}

@media (max-width: 380px) {
  .gl-grid { grid-template-columns: 1fr 1fr; }
}