.board {
  --cell: 34px;
  --gap: 4px;
}

.board-viewport {
  padding: 4px;
  scroll-padding: 12px;
}

.board-viewport[data-scrollable='true'] {
  align-items: safe center;
  justify-items: safe center;
  border-radius: 8px;
  box-shadow:
    inset 18px 0 16px -18px rgba(0, 0, 0, 0.88),
    inset -18px 0 16px -18px rgba(0, 0, 0, 0.88),
    inset 0 18px 16px -18px rgba(0, 0, 0, 0.88),
    inset 0 -18px 16px -18px rgba(0, 0, 0, 0.88);
}

.board:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: max-content;
  min-height: 0;
}

.board-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), var(--cell));
  gap: var(--gap);
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: clamp(4px, calc(var(--cell) * 0.14), 7px);
  background: linear-gradient(160deg, var(--cell-hidden-top), var(--cell-hidden-bottom));
  color: var(--text);
  font-family: var(--font-mono);
  font-size: calc(var(--cell) * 0.54);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 3px 7px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--dur-fast) var(--ease),
    background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}

@media (hover: hover) and (pointer: fine) {
  .cell[data-state='hidden']:hover {
    background: linear-gradient(160deg, #2d3f39, #14201c);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.36),
      0 5px 12px rgba(0, 0, 0, 0.38),
      0 0 0 1px rgba(216, 185, 121, 0.12);
    transform: translateY(-1px);
  }
}

.cell[data-state='hidden']:active {
  transform: translateY(0) scale(0.97);
}

.cell:focus-visible {
  z-index: 4;
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
}

.board[data-flag-mode='true'] .cell[data-state='hidden'] {
  cursor: copy;
}

.cell[data-state='revealed'] {
  background: linear-gradient(180deg, #0b1411, #08100e);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
  cursor: default;
}

.cell[data-state='revealed']:active {
  transform: none;
}

.cell[data-state='flagged'] {
  background: linear-gradient(160deg, #2c3733, #131d19);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 123, 110, 0.14),
    0 3px 7px rgba(0, 0, 0, 0.3);
}

.cell-number {
  display: block;
  line-height: 1;
  transform: translateY(-0.02em);
  font-variant-numeric: tabular-nums;
}

.cell-glyph {
  display: none;
  width: 60%;
  height: 60%;
  pointer-events: none;
}

.cell-glyph--cross {
  position: absolute;
  width: 74%;
  height: 74%;
}

.cell[data-state='flagged'] .cell-glyph--flag {
  display: block;
  width: 56%;
  height: 56%;
  color: var(--danger);
  filter: drop-shadow(0 0 6px rgba(255, 123, 110, 0.32));
}

.cell[data-state='revealed'][data-mine='true'] {
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 95, 78, 0.22), transparent 64%),
    linear-gradient(180deg, #1b0e0c, #0d0807);
  box-shadow:
    inset 0 0 0 1px rgba(255, 123, 110, 0.28),
    inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.cell[data-state='revealed'][data-mine='true'] .cell-glyph--mine {
  display: block;
  color: #ffd9d3;
  filter: drop-shadow(0 0 8px rgba(255, 123, 110, 0.35));
}

.cell[data-wrong='true'] .cell-glyph--flag {
  display: block;
  width: 56%;
  height: 56%;
  color: rgba(255, 123, 110, 0.42);
  filter: none;
}

.cell[data-wrong='true'] .cell-glyph--cross {
  display: block;
  color: var(--danger);
  filter: drop-shadow(0 0 6px rgba(255, 123, 110, 0.35));
}

.cell[data-exploded='true'] {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, #b83a2c 0%, #7a211a 42%, #240a07 78%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 205, 196, 0.72),
    0 0 24px rgba(255, 86, 63, 0.42);
  outline: 2px solid rgba(255, 151, 138, 0.62);
  outline-offset: 1px;
  animation: cell-explode 520ms var(--ease);
}

/* Number palette: hue-coded, still readable without color. */
.cell[data-number='1'] .cell-number { color: var(--num-1); text-shadow: 0 0 13px rgba(125, 196, 255, 0.28); }
.cell[data-number='2'] .cell-number { color: var(--num-2); text-shadow: 0 0 13px rgba(143, 227, 192, 0.25); }
.cell[data-number='3'] .cell-number { color: var(--num-3); text-shadow: 0 0 13px rgba(242, 198, 109, 0.25); }
.cell[data-number='4'] .cell-number { color: var(--num-4); text-shadow: 0 0 13px rgba(195, 166, 255, 0.25); }
.cell[data-number='5'] .cell-number { color: var(--num-5); text-shadow: 0 0 13px rgba(255, 155, 140, 0.25); }
.cell[data-number='6'] .cell-number { color: var(--num-6); text-shadow: 0 0 13px rgba(122, 219, 211, 0.25); }
.cell[data-number='7'] .cell-number { color: var(--num-7); text-shadow: 0 0 13px rgba(242, 238, 227, 0.2); }
.cell[data-number='8'] .cell-number { color: var(--num-8); text-shadow: 0 0 13px rgba(167, 177, 171, 0.2); }

.cell.is-revealed {
  animation: cell-reveal var(--dur-base) var(--ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}

.cell.is-flagged-pop .cell-glyph--flag {
  animation: flag-pop 220ms var(--ease);
}

.cell.is-blocked {
  animation: cell-blocked 300ms var(--ease);
}

.board.is-won {
  position: relative;
}

.board.is-won::after {
  position: absolute;
  inset: -2px;
  border-radius: 9px;
  background: linear-gradient(115deg, transparent 28%, rgba(240, 212, 154, 0.2) 48%, transparent 68%);
  background-size: 220% 100%;
  content: '';
  pointer-events: none;
  animation: win-sweep 1100ms var(--ease);
}

.board.is-lost {
  animation: board-shake 190ms var(--ease) 2;
}

@keyframes cell-reveal {
  from {
    opacity: 0.35;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flag-pop {
  0% { transform: scale(0.72); opacity: 0.3; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes cell-blocked {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2px); }
  65% { transform: translateX(2px); }
}

@keyframes cell-explode {
  0% { transform: scale(0.88); filter: brightness(1.9); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes win-sweep {
  from { background-position: 120% 0; opacity: 0; }
  25% { opacity: 1; }
  to { background-position: -120% 0; opacity: 0; }
}

@keyframes board-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .cell.is-revealed,
  .cell.is-flagged-pop .cell-glyph--flag,
  .cell.is-blocked,
  .cell[data-exploded='true'],
  .board.is-won::after,
  .board.is-lost {
    animation: none;
  }

  .cell {
    transition: none;
  }
}