/* ========= Board wrapper ========= */
.board-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.board {
  display: grid;
  gap: var(--gap);
  padding: 4px;
  touch-action: manipulation;
}

/* ========= Cells ========= */
.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: calc(var(--cell-size) * 0.55);
  color: transparent;
  position: relative;
  transition: transform 0.08s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 60%);
  pointer-events: none;
}

.cell:not(.revealed):hover {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.28);
  transform: translateY(-1px);
}
.cell:not(.revealed):active { transform: translateY(0); }
.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

/* Revealed ========= */
.cell.revealed {
  background: rgba(10, 12, 24, 0.55);
  border-color: rgba(120, 140, 200, 0.08);
  cursor: default;
  animation: reveal 0.18s ease-out;
}
.cell.revealed.empty { background: rgba(10, 12, 24, 0.25); }

@keyframes reveal {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Number colors (neon) */
.cell.revealed[data-n="1"] { color: var(--n1); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="2"] { color: var(--n2); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="3"] { color: var(--n3); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="4"] { color: var(--n4); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="5"] { color: var(--n5); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="6"] { color: var(--n6); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="7"] { color: var(--n7); text-shadow: 0 0 6px currentColor; }
.cell.revealed[data-n="8"] { color: var(--n8); text-shadow: 0 0 6px currentColor; }

/* Flags ========= */
.cell.flagged {
  color: var(--accent-2);
  text-shadow: 0 0 8px currentColor;
  animation: flagIn 0.18s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.cell.flagged::after {
  content: "⚑";
  font-size: calc(var(--cell-size) * 0.6);
  line-height: 1;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes flagIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
  50% { opacity: 0.75; filter: drop-shadow(0 0 12px currentColor); }
}

/* Mines ========= */
.cell.mine {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.6);
  color: var(--danger);
}
.cell.mine::after {
  content: "✸";
  font-size: calc(var(--cell-size) * 0.65);
  line-height: 1;
  color: var(--danger);
  text-shadow: 0 0 10px currentColor;
}
.cell.mine.exploded {
  background: var(--danger);
  color: #0a0a14;
  animation: explode 0.6s ease-out;
}
.cell.mine.exploded::after { color: #0a0a14; text-shadow: 0 0 16px #fff; }
@keyframes explode {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); box-shadow: 0 0 30px var(--danger); }
  100% { transform: scale(1); }
}

.cell.wrong-flag {
  background: rgba(255, 176, 32, 0.15);
  border-color: var(--warning);
}
.cell.wrong-flag::after { color: var(--warning); }

/* Hint highlight */
.cell.hint {
  animation: hintPulse 0.9s ease-in-out 3;
  border-color: var(--accent-3);
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(57, 255, 20, 0); background: rgba(57, 255, 20, 0.18); }
}

/* Scanner state */
body.scanner-mode .cell:not(.revealed):not(.flagged) {
  border-color: rgba(255, 46, 196, 0.5);
  cursor: crosshair;
}
body.scanner-mode .cell:not(.revealed):not(.flagged):hover {
  border-color: var(--accent-2);
  box-shadow: 0 0 14px rgba(255, 46, 196, 0.55);
}

.scanner-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  background: var(--accent-2);
  color: #0a0a14;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 0 18px rgba(255, 46, 196, 0.5);
  animation: fadeIn 0.2s ease-out;
  font-size: 0.85rem;
  pointer-events: none;
}

/* Win wave */
.cell.won {
  animation: winWave 0.7s ease-out both;
}
@keyframes winWave {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.12); filter: brightness(1.6) saturate(1.5); box-shadow: 0 0 18px var(--accent-3); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Lose shake */
.board.lost {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Small screens: denser cells */
@media (max-width: 640px) {
  :root { --cell-size: clamp(22px, 6.5vmin, 34px); --gap: 2px; }
  .board-wrap { padding: 8px; }
}