/* Minesweeper Game Styles */

.mine-info {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.mine-info .panel-box {
  border: 2px solid var(--neon-cyan);
  padding: 0.8rem 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.mine-info .panel-box h3 {
  font-size: 0.5rem;
  color: var(--neon-cyan);
  margin-bottom: 0.3rem;
}

.mine-info .panel-box .value {
  font-size: 0.85rem;
  color: var(--neon-yellow);
  text-shadow: 0 0 5px var(--neon-yellow);
}

.difficulty-select {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.mine-grid {
  display: inline-grid;
  gap: 1px;
  background: #333;
  border: 3px solid var(--neon-cyan);
  box-shadow:
    0 0 10px var(--neon-cyan),
    0 0 20px rgba(0, 255, 245, 0.2);
  padding: 1px;
  user-select: none;
}

.mine-cell {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel-font);
  font-size: 0.55rem;
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  padding: 0;
}

.mine-cell.hidden {
  background: #2a2a4e;
  border-top: 2px solid #4a4a7e;
  border-left: 2px solid #4a4a7e;
  border-bottom: 2px solid #1a1a2e;
  border-right: 2px solid #1a1a2e;
}

.mine-cell.hidden:hover {
  background: #3a3a5e;
}

.mine-cell.revealed {
  background: #1a1a2e;
}

.mine-cell.flagged {
  background: #2a2a4e;
  border-top: 2px solid #4a4a7e;
  border-left: 2px solid #4a4a7e;
  border-bottom: 2px solid #1a1a2e;
  border-right: 2px solid #1a1a2e;
}

.mine-cell.mine {
  background: #ff0044;
}

/* Number colors */
.mine-cell.n1 { color: #00fff5; }
.mine-cell.n2 { color: #39ff14; }
.mine-cell.n3 { color: #ff0044; }
.mine-cell.n4 { color: #4444ff; }
.mine-cell.n5 { color: #ff6600; }
.mine-cell.n6 { color: #00fff5; }
.mine-cell.n7 { color: #ff00ff; }
.mine-cell.n8 { color: #888; }

.mine-status {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

@media (max-width: 600px) {
  .mine-cell {
    width: 24px;
    height: 24px;
    font-size: 0.45rem;
  }
}