/* Styles for DOM-based games (loaded on game pages only). */
.game-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
}
.game-toolbar select, .game-toolbar button {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; min-height: 38px; cursor: pointer; font-weight: 600;
}
.game-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.game-toolbar b { color: var(--text); font-variant-numeric: tabular-nums; }
.game-toolbar button[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* Merge 2048 */
.m2048-board {
  --gap: clamp(6px, 2vw, 12px);
  width: min(100%, 460px, 62svh); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: var(--gap);
  background: #15122a; border: 1px solid var(--border-strong); border-radius: 18px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.m2048-cell {
  display: grid; place-items: center; border-radius: 10px; background: rgb(255 255 255 / 5%);
  font-weight: 800; font-size: clamp(1.4rem, 7vw, 2.4rem); color: #776e65; font-variant-numeric: tabular-nums;
}
.m2048-cell.digits-4 { font-size: clamp(1rem, 5vw, 1.8rem); }
.m2048-cell.digits-5 { font-size: clamp(0.85rem, 4vw, 1.4rem); }
.m2048-cell[data-v="2"] { background: #eee4da; }
.m2048-cell[data-v="4"] { background: #ede0c8; }
.m2048-cell[data-v="8"] { background: #f2b179; color: #fff; }
.m2048-cell[data-v="16"] { background: #f59563; color: #fff; }
.m2048-cell[data-v="32"] { background: #f67c5f; color: #fff; }
.m2048-cell[data-v="64"] { background: #f65e3b; color: #fff; }
.m2048-cell[data-v="128"] { background: #edcf72; color: #fff; }
.m2048-cell[data-v="256"] { background: #edcc61; color: #fff; }
.m2048-cell[data-v="512"] { background: #edc850; color: #fff; }
.m2048-cell[data-v="1024"] { background: #edc53f; color: #fff; }
.m2048-cell[data-v="2048"] { background: #edc22e; color: #fff; box-shadow: 0 0 24px rgb(243 215 116 / 60%); }
.m2048-cell[data-v="big"] { background: #3c3a32; color: #fff; }
.m2048-cell.pop { animation: m2048-pop 0.18s ease-out; }
.m2048-cell.merge { animation: m2048-merge 0.18s ease-out; }
@keyframes m2048-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes m2048-merge { 50% { transform: scale(1.14); } }

/* Memory Match */
.mm-time { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-board {
  width: min(100%, calc(var(--cols) * 104px), calc(60svh * var(--cols) / 4));
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: clamp(6px, 1.6vw, 12px);
}
.mm-card { aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.mm-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.35s ease; transform-style: preserve-3d; }
.mm-card.open .mm-inner { transform: rotateY(180deg); }
.mm-back, .mm-front {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mm-back {
  background: var(--gradient); color: rgb(255 255 255 / 80%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
  font-weight: 800; font-size: clamp(1.2rem, 5vw, 2rem);
}
.mm-front { background: #1c1934; border: 1px solid var(--border-strong); transform: rotateY(180deg); font-size: clamp(1.6rem, 7vw, 2.8rem); }
.mm-card.done .mm-front { background: rgb(34 197 94 / 18%); box-shadow: inset 0 0 0 1px rgb(34 197 94 / 45%); }

/* Minesweeper */
.ms-board {
  width: min(100%, calc(var(--cols) * 36px), 66svh);
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px;
  background: rgb(255 255 255 / 8%); padding: 3px; border-radius: 12px; border: 1px solid var(--border-strong); user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ms-cell {
  aspect-ratio: 1; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(160deg, #9a80ff, #6d4fe8); color: #fff; touch-action: manipulation;
  font: 800 clamp(0.7rem, calc(min(100vw - 56px, var(--cols) * 36px) / var(--cols) * 0.55), 1.15rem) / 1 system-ui, sans-serif;
  display: grid; place-items: center;
}
.ms-cell:hover:not(.open) { filter: brightness(1.1); }
.ms-cell.open { background: #16132b; cursor: default; }
.ms-cell.mine { background: #4a1d2e; }
.ms-cell.boom { background: #ef4444; }
.ms-cell[data-n="1"] { color: #60a5fa; }
.ms-cell[data-n="2"] { color: #4ade80; }
.ms-cell[data-n="3"] { color: #f87171; }
.ms-cell[data-n="4"] { color: #c4b5fd; }
.ms-cell[data-n="5"] { color: #fbbf24; }
.ms-cell[data-n="6"] { color: #22d3ee; }
.ms-cell[data-n="7"] { color: #f3f4f6; }
.ms-cell[data-n="8"] { color: #9ca3af; }