/* 2048 */
.board-2048 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: #cbb6a0; padding: 10px; border-radius: 16px;
  max-width: 460px; margin: 20px auto; aspect-ratio: 1;
  box-shadow: var(--shadow); touch-action: none; user-select: none;
}
.tile {
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: clamp(18px, 5vw, 32px);
  background: rgba(255,255,255,0.35); color: #776e65; aspect-ratio: 1;
}
.tile-2 { background: #eee4da; }
.tile-4 { background: #ede0c8; }
.tile-8 { background: #f2b179; color:#fff; }
.tile-16 { background: #f59563; color:#fff; }
.tile-32 { background: #f67c5f; color:#fff; }
.tile-64 { background: #f65e3b; color:#fff; }
.tile-128 { background: #edcf72; color:#fff; font-size: clamp(16px,4vw,28px); }
.tile-256 { background: #edcc61; color:#fff; font-size: clamp(16px,4vw,28px); }
.tile-512 { background: #edc850; color:#fff; font-size: clamp(16px,4vw,28px); }
.tile-1024 { background: #edc53f; color:#fff; font-size: clamp(14px,3vw,24px); }
.tile-2048 { background: #edc22e; color:#fff; font-size: clamp(14px,3vw,24px); box-shadow: 0 0 24px rgba(237,194,46,0.7); }
.b2048-status { text-align:center; font-weight:800; font-size:16px; min-height:24px; padding:6px; color:#dc2626; }

/* Snake D-pad */
.dpad { display: grid; grid-template-columns: repeat(3, 60px); gap: 8px; justify-content: center; margin: 20px auto; }
.dpad button {
  width: 60px; height: 60px; border: none; border-radius: 12px;
  background: var(--dark); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.30); transition: transform .1s, background .15s; touch-action: manipulation;
}
.dpad button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.30); background: var(--red); }
.dpad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }

/* Minesweeper */
.ms-grid {
  display: grid; gap: 2px; background: #cbd5e1; padding: 6px;
  border-radius: 12px; margin: 16px auto; width: fit-content;
  max-width: 100%; user-select: none; touch-action: manipulation;
}
.ms-cell {
  width: 32px; height: 32px; border: none; border-radius: 4px;
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15); cursor: pointer;
  font-weight: 800; font-size: 14px; display: flex; align-items: center;
  justify-content: center; padding: 0; color: #334155;
}
.ms-cell:hover:not(.revealed) { background: linear-gradient(180deg, #f1f5f9, #e2e8f0); }
.ms-cell:active:not(.revealed):not(.flagged) { transform: translateY(1px); box-shadow: none; }
.ms-cell.revealed { background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; cursor: default; }
.ms-cell.flagged { background: #fef3c7; }
.ms-cell.mine { background: #fecaca; }
.ms-cell.n1 { color:#2563eb; } .ms-cell.n2 { color:#16a34a; }
.ms-cell.n3 { color:#dc2626; } .ms-cell.n4 { color:#7c3aed; }
.ms-cell.n5 { color:#b45309; } .ms-cell.n6 { color:#0891b2; }
.ms-cell.n7 { color:#1e293b; } .ms-cell.n8 { color:#64748b; }
.level-medium .ms-cell, .level-hard .ms-cell { width: 26px; height: 26px; font-size: 12px; }
@media (max-width: 600px) {
  .ms-cell { width: 26px; height: 26px; font-size: 12px; }
  .level-medium .ms-cell, .level-hard .ms-cell { width: 20px; height: 20px; font-size: 10px; }
}
.ms-status { text-align: center; font-weight: 800; font-size: 18px; padding: 8px; min-height: 36px; }
.ms-status.win { color: #16a34a; }
.ms-status.lose { color: #dc2626; }

/* Simon */
.simon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 400px; margin: 20px auto; aspect-ratio: 1; }
.simon-pad {
  border: none; border-radius: 20px; cursor: pointer; position: relative;
  box-shadow: 0 6px 0 rgba(0,0,0,0.25), inset 0 -4px 0 rgba(0,0,0,0.15);
  transition: transform .1s, filter .15s, box-shadow .1s;
  opacity: 0.85; filter: brightness(0.9); touch-action: manipulation;
}
.simon-pad::before { content: ''; position: absolute; top: 12%; left: 12%; width: 20%; height: 20%; border-radius: 50%; background: rgba(255,255,255,0.45); }
.simon-pad:active { transform: translateY(2px); }
.simon-pad.lit { filter: brightness(1.7) saturate(1.5); box-shadow: 0 0 32px currentColor, 0 6px 0 rgba(0,0,0,0.25), inset 0 -4px 0 rgba(0,0,0,0.15); transform: scale(1.02); }
.pad-red { background: #ef4444; color: #ef4444; }
.pad-green { background: #22c55e; color: #22c55e; }
.pad-blue { background: #3b82f6; color: #3b82f6; }
.pad-yellow { background: #eab308; color: #eab308; }
.simon-status { text-align: center; font-weight: 800; font-size: 16px; padding: 8px; min-height: 30px; }
.simon-status.win { color: #16a34a; }
.simon-status.lose { color: #dc2626; }