/*
 * ============================================================
 *  Mines Game Styles
 *  Extracted from style.css (lines 1306-1394, responsive 1710-1716)
 * ============================================================
 */

/* ===== MINES ===== */
.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.mine-tile {
  aspect-ratio: 1;
  background: linear-gradient(145deg, #1e293b, #162032);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.8rem;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
/* Tile shimmer on hover */
.mine-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.4s;
}
.mine-tile:hover:not(.revealed):not(.disabled)::before {
  transform: translateX(100%);
}
.mine-tile:hover:not(.revealed):not(.disabled) {
  border-color: var(--accent);
  background: linear-gradient(145deg, #1e293b, #1a2740);
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(0,212,170,0.1);
}
.mine-tile.revealed.safe {
  background: linear-gradient(145deg, rgba(0,212,170,0.2), rgba(0,180,148,0.1));
  border-color: var(--accent);
  animation: gemReveal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 20px var(--accent-glow);
}
.mine-tile.revealed.mine {
  background: linear-gradient(145deg, rgba(239,68,68,0.2), rgba(200,50,50,0.1));
  border-color: var(--danger);
  animation: mineExplode 0.5s ease-out;
  box-shadow: 0 0 20px var(--danger-glow);
}
.mine-tile.disabled { cursor: not-allowed; opacity: 0.6; }

@keyframes gemReveal {
  0% { transform: scale(0.5) rotateZ(-10deg); opacity: 0.5; }
  50% { transform: scale(1.15) rotateZ(3deg); }
  100% { transform: scale(1) rotateZ(0deg); opacity: 1; }
}
@keyframes mineExplode {
  0% { transform: scale(0.8); opacity: 0.5; }
  30% { transform: scale(1.2); }
  50% { background: rgba(239,68,68,0.4); }
  100% { transform: scale(1); opacity: 1; }
}

.mines-count-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.mines-count-btn {
  width: 40px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.mines-count-btn:hover { border-color: var(--accent); }
.mines-count-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }

/* ===== RESPONSIVE ===== */

/* Mobile */
@media (max-width: 480px) {
  .mines-grid { gap: 5px; }
  .mine-tile { font-size: 1.2rem; border-width: 1px; }
}