/* Minesweeper Responsive Sizing */
:root {
  /* Mobile default */
  --minesweeper-cell-beginner: 1.75rem;      /* ~28px, 9 cells = 252px */
  --minesweeper-cell-intermediate: 1.25rem;  /* ~20px, 16 cells = 320px */
  --minesweeper-cell-expert: 0.75rem;        /* ~12px, 30 cells = 360px */
  --minesweeper-font-beginner: 0.875rem;
  --minesweeper-font-intermediate: 0.75rem;
  --minesweeper-font-expert: 0.5rem;
  --minesweeper-padding: 4px;
  --minesweeper-border: 2px;
}

@media (min-width: 480px) {
  :root {
    --minesweeper-cell-beginner: 2rem;       /* 32px */
    --minesweeper-cell-intermediate: 1.5rem; /* 24px, 16 cells = 384px */
    --minesweeper-cell-expert: 0.875rem;     /* 14px, 30 cells = 420px */
    --minesweeper-font-beginner: 1rem;
    --minesweeper-font-intermediate: 0.875rem;
    --minesweeper-font-expert: 0.625rem;
    --minesweeper-padding: 5px;
    --minesweeper-border: 2px;
  }
}

@media (min-width: 640px) {
  :root {
    --minesweeper-cell-beginner: 2.25rem;    /* 36px */
    --minesweeper-cell-intermediate: 1.75rem; /* 28px, 16 cells = 448px */
    --minesweeper-cell-expert: 1.125rem;     /* 18px, 30 cells = 540px */
    --minesweeper-font-beginner: 1.125rem;
    --minesweeper-font-intermediate: 1rem;
    --minesweeper-font-expert: 0.75rem;
    --minesweeper-padding: 6px;
    --minesweeper-border: 3px;
  }
}

@media (min-width: 768px) {
  :root {
    --minesweeper-cell-beginner: 2.5rem;     /* 40px */
    --minesweeper-cell-intermediate: 2rem;   /* 32px, 16 cells = 512px */
    --minesweeper-cell-expert: 1.375rem;     /* 22px, 30 cells = 660px */
    --minesweeper-font-beginner: 1.25rem;
    --minesweeper-font-intermediate: 1.125rem;
    --minesweeper-font-expert: 0.875rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --minesweeper-cell-beginner: 2rem;       /* Original */
    --minesweeper-cell-intermediate: 1.75rem;
    --minesweeper-cell-expert: 1.5rem;       /* 24px, 30 cells = 720px */
    --minesweeper-font-beginner: 1rem;
    --minesweeper-font-intermediate: 1rem;
    --minesweeper-font-expert: 1rem;
  }
}

/* Board container */
.minesweeper-board {
  display: inline-block;
  background: #C0C0C0;
  border-style: solid;
  border-width: var(--minesweeper-border);
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  padding: var(--minesweeper-padding);
}

/* Cell sizing by difficulty */
.minesweeper-cell-beginner {
  width: var(--minesweeper-cell-beginner);
  height: var(--minesweeper-cell-beginner);
  font-size: var(--minesweeper-font-beginner);
}

.minesweeper-cell-intermediate {
  width: var(--minesweeper-cell-intermediate);
  height: var(--minesweeper-cell-intermediate);
  font-size: var(--minesweeper-font-intermediate);
}

.minesweeper-cell-expert {
  width: var(--minesweeper-cell-expert);
  height: var(--minesweeper-cell-expert);
  font-size: var(--minesweeper-font-expert);
}

/* Cell base styling */
.minesweeper-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: monospace;
  user-select: none;
  transition: transform 0.1s ease;
}

.minesweeper-cell.hidden-cell {
  background: #C0C0C0;
  border-style: solid;
  border-width: var(--minesweeper-border);
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  cursor: pointer;
}

.minesweeper-cell.hidden-cell:hover {
  background: #D0D0D0;
}

.minesweeper-cell.hidden-cell:active {
  background: #B0B0B0;
  border-color: #808080;
}

.minesweeper-cell.revealed {
  background: #D0D0D0;
  border: 1px solid #808080;
  cursor: default;
}

.minesweeper-cell.flagged {
  background: #C0C0C0;
  border-style: solid;
  border-width: var(--minesweeper-border);
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  cursor: pointer;
}

/* Number colors */
.minesweeper-cell.count-1 { color: #0000FF; }
.minesweeper-cell.count-2 { color: #008000; }
.minesweeper-cell.count-3 { color: #FF0000; }
.minesweeper-cell.count-4 { color: #000080; }
.minesweeper-cell.count-5 { color: #800000; }
.minesweeper-cell.count-6 { color: #008080; }
.minesweeper-cell.count-7 { color: #000000; }
.minesweeper-cell.count-8 { color: #808080; }

/* Mine cell */
.minesweeper-cell.mine {
  background: #FF0000;
}

/* Status bar */
.minesweeper-status-bar {
  display: flex;
  align-items: center;
  background: #808080;
  border-style: solid;
  border-width: var(--minesweeper-border);
  border-color: #808080 #FFFFFF #FFFFFF #808080;
  padding: 0.25rem 0.5rem;
}

@media (min-width: 640px) {
  .minesweeper-status-bar {
    padding: 0.5rem 1rem;
  }
}