/* Minesweeper application styles */

.minesweeper-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--win98-window-bg);
  user-select: none;
}

/* Menu bar */
.minesweeper-menubar {
  height: 20px;
  background-color: var(--win98-window-bg);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--win98-button-shadow);
  position: relative;
}

.minesweeper-menu-item {
  padding: 0 8px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.minesweeper-menu-item:hover {
  background-color: var(--win98-title-active);
  color: var(--win98-title-text-active);
}

/* Game header */
.minesweeper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  margin: 6px;
  border: 2px solid;
  border-color: var(--win98-button-shadow) var(--win98-button-highlight) var(--win98-button-highlight) var(--win98-button-shadow);
  background-color: var(--win98-window-bg);
}

/* Counter display (timer and mine counter) */
.minesweeper-counter {
  width: 48px;
  height: 28px;
  background-color: #000;
  color: #f00;
  font-family: 'Digital', monospace;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px inset #888;
}

/* Face button */
.minesweeper-face {
  width: 26px;
  height: 26px;
  border: 2px solid;
  border-color: var(--win98-button-highlight) var(--win98-button-shadow) var(--win98-button-shadow) var(--win98-button-highlight);
  background-color: var(--win98-button-face);
  position: relative;
  cursor: pointer;
}

.minesweeper-face:active {
  border-color: var(--win98-button-shadow) var(--win98-button-highlight) var(--win98-button-highlight) var(--win98-button-shadow);
}

/* Face states */
.face-smile::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="yellow" stroke="black"/><circle cx="5" cy="6" r="1" fill="black"/><circle cx="11" cy="6" r="1" fill="black"/><path d="M4 10 C6 12, 10 12, 12 10" stroke="black" fill="none" stroke-width="1"/></svg>');
  background-repeat: no-repeat;
}

.face-cool::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="yellow" stroke="black"/><rect x="4" y="5" width="3" height="2" fill="black"/><rect x="9" y="5" width="3" height="2" fill="black"/><path d="M4 10 C6 12, 10 12, 12 10" stroke="black" fill="none" stroke-width="1"/></svg>');
  background-repeat: no-repeat;
}

.face-dead::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="yellow" stroke="black"/><line x1="4" y1="5" x2="6" y2="7" stroke="black" stroke-width="1"/><line x1="6" y1="5" x2="4" y2="7" stroke="black" stroke-width="1"/><line x1="10" y1="5" x2="12" y2="7" stroke="black" stroke-width="1"/><line x1="12" y1="5" x2="10" y2="7" stroke="black" stroke-width="1"/><path d="M4 12 C6 10, 10 10, 12 12" stroke="black" fill="none" stroke-width="1"/></svg>');
  background-repeat: no-repeat;
}

/* Game board */
.minesweeper-board {
  margin: 0 6px 6px 6px;
  border: 3px solid;
  border-color: var(--win98-button-shadow) var(--win98-button-highlight) var(--win98-button-highlight) var(--win98-button-shadow);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.minesweeper-row {
  display: flex;
  flex-grow: 1;
}

/* Cell styles */
.minesweeper-cell {
  flex-grow: 1;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 14px;
  cursor: pointer;
}

/* Covered cell */
.cell-covered {
  border: 2px solid;
  border-color: var(--win98-button-highlight) var(--win98-button-shadow) var(--win98-button-shadow) var(--win98-button-highlight);
  background-color: var(--win98-button-face);
}

.cell-covered:active {
  border-color: var(--win98-button-shadow) var(--win98-button-highlight) var(--win98-button-highlight) var(--win98-button-shadow);
}

/* Flagged cell */
.cell-flagged {
  border: 2px solid;
  border-color: var(--win98-button-highlight) var(--win98-button-shadow) var(--win98-button-shadow) var(--win98-button-highlight);
  background-color: var(--win98-button-face);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><line x1="8" y1="3" x2="8" y2="13" stroke="black" stroke-width="2"/><polygon points="8,3 14,5 8,7" fill="red"/><rect x="5" y="13" width="6" height="2" fill="black"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* Revealed cell */
.cell-0 {
  border: 1px solid var(--win98-button-shadow);
  background-color: var(--win98-button-face);
}

/* Number colors for adjacent mines */
.cell-1 { color: blue; }
.cell-2 { color: green; }
.cell-3 { color: red; }
.cell-4 { color: darkblue; }
.cell-5 { color: darkred; }
.cell-6 { color: teal; }
.cell-7 { color: black; }
.cell-8 { color: gray; }

.cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6, .cell-7, .cell-8 {
  border: 1px solid var(--win98-button-shadow);
  background-color: var(--win98-button-face);
}

/* Mine cell */
.cell-mine {
  border: 1px solid var(--win98-button-shadow);
  background-color: var(--win98-button-face);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="4" fill="black"/><line x1="8" y1="0" x2="8" y2="16" stroke="black" stroke-width="2"/><line x1="0" y1="8" x2="16" y2="8" stroke="black" stroke-width="2"/><line x1="2" y1="2" x2="14" y2="14" stroke="black" stroke-width="2"/><line x1="14" y1="2" x2="2" y2="14" stroke="black" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* Board sizes for different difficulties */
.difficulty-beginner {
  width: 9 * 16px;
  height: 9 * 16px;
}

.difficulty-intermediate {
  width: 16 * 16px;
  height: 16 * 16px;
}

.difficulty-advanced {
  width: 30 * 16px;
  height: 16 * 16px;
}

/* Responsive design */
@media (max-width: 640px) {
  .minesweeper-counter {
    width: 40px;
    height: 24px;
    font-size: 20px;
  }
  
  .minesweeper-face {
    width: 22px;
    height: 22px;
  }
  
  .minesweeper-cell {
    font-size: 12px;
  }
}