/* Minesweeper expert is wider than the default; let header/toolbar/board span more. */
.app { max-width: 100%; }
.app .header,
.app .toolbar { max-width: 720px; margin-left: auto; margin-right: auto; }

.board-wrapper {
  overflow-x: auto;
  padding: 8px 0;
}

.board {
  display: grid;
  gap: 3px;
  background: var(--board-bg);
  padding: 6px;
  border-radius: 14px;
  user-select: none;
  touch-action: none;
}
.board.is-paused { visibility: hidden; }

.cell {
  width: var(--cs, 28px);
  height: var(--cs, 28px);
  background: var(--btn-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--cs, 28px) * 0.55);
  cursor: pointer;
  position: relative;
  transition: background .1s ease;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cell:hover:not(.revealed) { background: var(--btn-bg-hover); }

.cell.revealed {
  background: var(--cell-bg);
  cursor: default;
}
body.dark .cell.revealed { background: #6a5d52; }

.cell.flagged::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: var(--danger);
}
.cell.mine {
  background: var(--danger) !important;
}
.cell.mine::after {
  content: "";
  position: absolute;
  width: 55%;
  height: 55%;
  background: #1a1410;
  border-radius: 50%;
  box-shadow: inset -2px -2px 4px rgba(255,255,255,0.2);
}
.cell.exploded {
  background: #b71c1c !important;
}

.cell.n1 { color: #1976d2; }
.cell.n2 { color: #388e3c; }
.cell.n3 { color: #d32f2f; }
.cell.n4 { color: #1a237e; }
body.dark .cell.n4 { color: #7986cb; }
body.dark .cell.n1 { color: #64b5f6; }
body.dark .cell.n2 { color: #81c784; }
body.dark .cell.n3 { color: #e57373; }
.cell.n5 { color: #b71c1c; }
.cell.n6 { color: #00838f; }
.cell.n7 { color: var(--text); }
.cell.n8 { color: var(--text-muted); }

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 100;
  animation: fadein .3s ease-in-out;
}
.overlay[hidden] { display: none; }
.overlay-text {
  font-size: clamp(36px, 8vmin, 56px);
  font-weight: 800;
  color: var(--text);
  text-align: center;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }