/* Board cells — keycap depth inside Liquid Glass console */

.board {
  --cols: 9;
  --rows: 9;
  --cell-gap: 3px;
  --cell-size: clamp(
    22px,
    min(
      calc((100vw - var(--chrome-x)) / var(--cols) - var(--cell-gap)),
      calc((100dvh - var(--chrome-y)) / var(--rows) - var(--cell-gap))
    ),
    120px
  );

  display: flex;
  flex-direction: column;
  gap: var(--cell-gap);
  width: max-content;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.board.is-generating {
  opacity: 0.55;
  pointer-events: none;
}

.board.is-generating .cell.is-covered {
  animation: pulse-key 1.2s ease-in-out infinite;
}

@keyframes pulse-key {
  50% {
    opacity: 0.72;
  }
}

.grid-row {
  display: flex;
  gap: var(--cell-gap);
}

.cell {
  --size: var(--cell-size);
  width: var(--size);
  height: var(--size);
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  margin: 0;
  border-radius: calc(var(--radius-sm) + 1px);
  border: 1px solid transparent;
  display: inline-grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: calc(var(--size) * 0.4);
  line-height: 1;
  position: relative;
  transition: border-color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease,
    opacity 0.1s ease;
}

/* Covered — glassy keycap */
.cell.is-covered,
.cell.is-flagged {
  background: linear-gradient(
    180deg,
    var(--bg-key-solid-top) 0%,
    var(--bg-key-solid-bot) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-key);
  color: var(--danger);
}

.cell.is-covered:hover:not(:disabled) {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-key-hover);
  background: linear-gradient(180deg, #343844 0%, #22252e 100%);
}

.cell.is-covered:active {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05);
  background: #12141a;
}

/* Open — recessed */
.cell.is-open {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) inset;
  cursor: default;
}

.cell.is-empty {
  color: transparent;
}

.cell.is-number[data-n="1"] {
  color: var(--num-1);
}
.cell.is-number[data-n="2"] {
  color: var(--num-2);
}
.cell.is-number[data-n="3"] {
  color: var(--num-3);
}
.cell.is-number[data-n="4"] {
  color: var(--num-4);
}
.cell.is-number[data-n="5"] {
  color: var(--num-5);
}
.cell.is-number[data-n="6"] {
  color: var(--num-6);
}
.cell.is-number[data-n="7"] {
  color: var(--num-7);
}
.cell.is-number[data-n="8"] {
  color: var(--num-8);
}

.cell.is-mine {
  background: var(--danger-soft);
  border-color: rgba(255, 99, 99, 0.4);
  color: var(--text);
  box-shadow: none;
}

.cell.is-exploded {
  background: rgba(255, 99, 99, 0.45);
  box-shadow: 0 0 24px rgba(255, 99, 99, 0.4);
}

.cell.is-flagged {
  color: var(--danger);
}

.cell.is-wrong-flag {
  background: rgba(255, 188, 51, 0.14);
  border-color: rgba(255, 188, 51, 0.4);
}

.wrong-x {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--warn);
  font-size: 1.15em;
  font-weight: 700;
  font-family: var(--font);
  pointer-events: none;
}

.icon-flag,
.icon-mine {
  width: 52%;
  height: 52%;
  display: block;
}

.board.is-won .cell.is-flagged {
  color: var(--success);
}

/* Per-difficulty caps so expert doesn't balloon on ultrawide */
.board[data-width="9"] {
  --cell-size: clamp(
    28px,
    min(
      calc((100vw - var(--chrome-x)) / 9 - var(--cell-gap)),
      calc((100dvh - var(--chrome-y)) / 9 - var(--cell-gap)),
      12vmin
    ),
    120px
  );
}

.board[data-width="16"] {
  --cell-size: clamp(
    24px,
    min(
      calc((100vw - var(--chrome-x)) / 16 - var(--cell-gap)),
      calc((100dvh - var(--chrome-y)) / 16 - var(--cell-gap)),
      6.5vmin
    ),
    80px
  );
}

.board[data-width="30"] {
  --cell-size: clamp(
    18px,
    min(
      calc((100vw - var(--chrome-x)) / 30 - var(--cell-gap)),
      calc((100dvh - var(--chrome-y)) / 16 - var(--cell-gap)),
      3.6vmin
    ),
    56px
  );
}

@media (max-width: 480px) {
  .board[data-width="9"] {
    --cell-size: clamp(28px, calc((100vw - 2.5rem) / 9 - 3px), 44px);
  }
  .board[data-width="16"] {
    --cell-size: clamp(18px, calc((100vw - 2rem) / 16 - 2px), 32px);
  }
  .board[data-width="30"] {
    --cell-size: clamp(14px, calc((100vw - 1.5rem) / 30 - 2px), 24px);
  }
}