/* ============================================================
   Mines Game Styles — extends core.css (Phase 2)
   ============================================================ */

/* ── Mine count selector ──────────────────────────────────── */
.mines-selector {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.mines-selector__btn {
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  border: 1.5px solid var(--g-border);
  background: var(--g-surface-3);
  color: var(--g-text-secondary);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
}

.mines-selector__btn:hover {
  border-color: var(--g-red);
  color: var(--g-red);
}

.mines-selector__btn.is-active {
  background: var(--g-red);
  border-color: var(--g-red);
  color: #fff;
}

/* ── Tile grid ────────────────────────────────────────────── */
.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  padding: 1rem;
}

/* ── Individual tile ──────────────────────────────────────── */
.mines-tile {
  perspective: 600px;
  cursor: pointer;
  user-select: none;
}

.mines-tile.is-disabled {
  cursor: default;
  pointer-events: none;
}

.mines-tile__inner {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* square */
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 10px;
}

.mines-tile.is-flipped .mines-tile__inner {
  transform: rotateY(180deg);
}

.mines-tile__front,
.mines-tile__back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Front face — dark card, visible when not flipped */
.mines-tile__front {
  background: var(--g-surface-3);
  border: 1.5px solid rgba(255,255,255,0.08);
  transition: background .15s, border-color .15s;
}

.mines-tile:not(.is-flipped):not(.is-disabled):hover .mines-tile__front {
  background: var(--g-surface-2);
  border-color: var(--g-blue);
  box-shadow: 0 0 14px rgba(8,106,215,0.35);
}

.mines-tile__front-icon {
  width: 36%;
  height: 36%;
  opacity: .25;
}

/* Back face — revealed gem or mine */
.mines-tile__back {
  transform: rotateY(180deg);
  border: 1.5px solid transparent;
}

.mines-tile.is-safe .mines-tile__back {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 0 18px rgba(34,197,94,0.25);
}

.mines-tile.is-mine .mines-tile__back {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 0 18px rgba(239,68,68,0.35);
  animation: g-shake .45s ease-in-out;
}

.mines-tile.is-mine-hidden .mines-tile__back {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.15);
}

.mines-tile__back img {
  width: 55%;
  height: 55%;
  object-fit: contain;
  pointer-events: none;
}

/* ── Playing-state bar ────────────────────────────────────── */
.mines-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.25rem;
  background: var(--g-surface-3);
  border-bottom: 1px solid var(--g-border);
}

.mines-multiplier {
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--g-green);
  line-height: 1;
  transition: color .2s;
}

.mines-multiplier.is-zero {
  color: var(--g-text-muted);
}

/* ── Result overlay ───────────────────────────────────────── */
.mines-result {
  padding: 1.25rem;
  border-radius: 10px;
  text-align: center;
  margin: .75rem;
}

.mines-result--win {
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.35);
}

.mines-result--loss {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
}

/* ── Multiplier progress strip ────────────────────────────── */
.mines-progress {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  padding: .5rem 1.25rem;
  scrollbar-width: none;
}

.mines-progress::-webkit-scrollbar { display: none; }

.mines-progress-step {
  flex-shrink: 0;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: var(--g-surface-3);
  color: var(--g-text-muted);
  border: 1px solid var(--g-border);
  transition: background .2s, color .2s, border-color .2s;
  font-variant-numeric: tabular-nums;
}

.mines-progress-step.is-reached {
  background: rgba(34,197,94,.15);
  color: var(--g-green);
  border-color: rgba(34,197,94,.35);
}

.mines-progress-step.is-current {
  background: var(--g-green);
  color: #fff;
  border-color: var(--g-green);
  box-shadow: 0 0 10px rgba(34,197,94,.4);
}