/* Mine Grid — game-specific styles */
.mg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
}
.mg-menu { display: grid; gap: 12px; width: min(100%, 340px); text-align: center; }
.mg-menu[hidden], .mg-game[hidden] { display: none; }
.mg-menu-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.4rem; }
.mg-game { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.mg-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100%, 480px, max(280px, calc(100svh - 420px)));
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--muted);
}
.mg-mode { padding: 6px 12px; font-size: 0.85rem; }
.mg-board {
  --cols: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 2px;
  padding: 4px;
  width: min(100%, 480px, max(280px, calc(100svh - 420px)));
  background: #0f1326;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.is-fs .mg-board, .is-pseudo-fs .mg-board, .is-fs .mg-info, .is-pseudo-fs .mg-info { width: min(94vw, calc(100dvh - 240px), 640px); }
.mg-cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 18%;
  background: linear-gradient(135deg, #2a3158, #1c2142);
  font: 700 4.2cqi var(--font-display);
  line-height: 1;
  cursor: pointer;
}
.mg-cell:hover:not(.is-open) { background: linear-gradient(135deg, #343c6b, #232a52); }
.mg-cell.is-open { background: rgba(255, 255, 255, 0.05); cursor: default; }
.mg-cell.is-flag { color: #ff5c7a; }
.mg-cell.is-mine { color: #ff5c7a; }
.mg-cell.is-hit { background: #ff5c7a; color: #0b0d17; }
.mg-cell.is-wrong { text-decoration: line-through; opacity: 0.6; }
.mg-cell:focus-visible { outline: 2px solid #c6ff3d; outline-offset: 1px; }
.mg-hint { margin: 0; max-width: 480px; font-size: 0.85rem; color: var(--muted); text-align: center; }