:root {
  /* Spacing scale — multiples of 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Common transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Default light theme */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #6e7781;
  --border: #d0d7de;
  --focus: #0969da;
  --danger: #cf222e;
  --success: #1a7f37;

  --board-border: #9ca3af;
  --tile-covered: #d1d5db;
  --tile-revealed: #f3f4f6;
  --tile-light: rgba(255, 255, 255, 0.7);
  --tile-shadow: rgba(0, 0, 0, 0.18);

  --n1: #1d4ed8;
  --n2: #15803d;
  --n3: #b91c1c;
  --n4: #1e3a8a;
  --n5: #7f1d1d;
  --n6: #0e7490;
  --n7: #111827;
  --n8: #4b5563;

  --tile-size: 32px;
  --tile-font: clamp(14px, 4vmin, 22px);
}

.theme-dark {
  --bg: #0d1117;
  --surface: #161b22;
  --text: #c9d1d9;
  --muted: #8b949e;
  --border: #30363d;
  --focus: #58a6ff;
  --danger: #f85149;
  --success: #3fb950;

  --board-border: #30363d;
  --tile-covered: #374151;
  --tile-revealed: #1f2937;
  --tile-light: rgba(255, 255, 255, 0.12);
  --tile-shadow: rgba(0, 0, 0, 0.5);

  --n1: #60a5fa;
  --n2: #4ade80;
  --n3: #f87171;
  --n4: #93c5fd;
  --n5: #f87171;
  --n6: #22d3ee;
  --n7: #e5e7eb;
  --n8: #9ca3af;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding: var(--space-4);
}

.app {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Header / toolbar */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  padding: var(--space-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.status-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.status-value {
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.face {
  justify-self: center;
  width: 48px;
  height: 48px;
  font-size: 1.75rem;
  line-height: 1;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--tile-revealed);
  cursor: pointer;
  transition: transform 80ms var(--ease), background 120ms var(--ease);
}

.face:hover,
.face:focus-visible {
  background: var(--tile-covered);
  transform: scale(1.05);
}

.face:active {
  transform: scale(0.95);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.control,
.control-btn,
.difficulty-select {
  font: inherit;
}

.difficulty-select {
  appearance: none;
  min-height: 40px;
  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--space-1);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.control-btn {
  min-height: 40px;
  min-width: 40px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--space-1);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}

.control-btn:hover,
.control-btn:focus-visible {
  background: var(--tile-revealed);
  border-color: var(--focus);
  outline: none;
}

.control-btn[aria-pressed='true'] {
  border-color: var(--focus);
  background: color-mix(in srgb, var(--focus) 10%, transparent);
}

/* Board */
.board-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.board {
  display: grid;
  gap: 1px;
  background: var(--board-border);
  border: 4px solid var(--board-border);
  border-radius: var(--space-1);
  width: 100%;
  max-width: 100%;
  overflow: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tile {
  position: relative;
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tile-size);
  min-height: var(--tile-size);
  aspect-ratio: 1 / 1;
  font-size: var(--tile-font);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background: var(--tile-covered);
  color: var(--text);
  transition: background 100ms var(--ease), transform 100ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.tile.covered {
  background: var(--tile-covered);
  box-shadow:
    inset 2px 2px 0 var(--tile-light),
    inset -2px -2px 0 var(--tile-shadow);
}

.tile.covered:hover:active,
.tile.covered.active-both {
  transform: scale(0.96);
}

.tile:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  z-index: 1;
}

.tile.revealed {
  background: var(--tile-revealed);
  box-shadow: none;
  cursor: default;
}

.tile.mine.revealed::after,
.tile.exploded::after {
  content: '💣';
}

.tile.exploded {
  background: color-mix(in srgb, var(--danger) 18%, var(--tile-revealed));
  color: var(--danger);
  animation: shake 120ms ease-in-out;
}

/* Flag and question states */
.tile.flagged::after {
  content: '🚩';
}

.tile.questioned::after {
  content: '?';
  color: var(--muted);
}

.tile.flagged.wrong::before {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  color: var(--danger);
  text-shadow: 0 1px 0 var(--surface);
}

.tile.flagged.correct {
  background: color-mix(in srgb, var(--success) 12%, var(--tile-revealed));
}

/* Number colours */
.tile.n1 { color: var(--n1); }
.tile.n2 { color: var(--n2); }
.tile.n3 { color: var(--n3); }
.tile.n4 { color: var(--n4); }
.tile.n5 { color: var(--n5); }
.tile.n6 { color: var(--n6); }
.tile.n7 { color: var(--n7); }
.tile.n8 { color: var(--n8); }

/* Accessibility / colour-blind friendly tweaks:
   numbers aren't only hue; weight and clear border on board help segmentation. */
.tile.revealed {
  text-decoration: none;
}

/* Help panel */
.help-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  padding: var(--space-3) var(--space-4);
  max-width: 560px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.help-panel h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}

.help-panel p,
.help-panel ul {
  margin: var(--space-2) 0;
}

.help-panel ul {
  padding-left: var(--space-4);
}

.help-panel li {
  margin-bottom: var(--space-1);
}

.help-panel kbd {
  background: var(--tile-revealed);
  border: 1px solid var(--border);
  border-radius: var(--space-1);
  padding: 0 var(--space-1);
  font-size: 0.875em;
}

.help-panel[hidden] {
  display: none;
}

/* Stats */
.stats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.stats-heading {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.stat dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 700;
}

/* Custom board dialog */
.custom-dialog {
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.custom-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  min-width: min(90vw, 320px);
}

.custom-form h2 {
  margin: 0;
  font-size: 1.125rem;
}

.custom-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 600;
}

.custom-field input {
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--space-1);
  background: var(--bg);
  color: var(--text);
}

.custom-error {
  min-height: 1.25em;
  margin: 0;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 600;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.control-btn.primary {
  background: var(--focus);
  color: #fff;
  border-color: var(--focus);
}

.control-btn.primary:hover,
.control-btn.primary:focus-visible {
  filter: brightness(1.1);
}

/* Utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 480px) {
  body {
    padding: var(--space-2);
  }

  :root {
    --tile-size: 26px;
  }

  .board {
    border-width: 2px;
  }

  .status {
    gap: var(--space-2);
  }

  .status-value {
    font-size: 1.25rem;
  }

  .controls {
    gap: var(--space-1);
  }
}