/* ==========================================================================
   Game Center — Мины: сетка 5×5, множитель растёт с каждой открытой клеткой

   Казино-грейд проход (2026-08-14): сетка превращена в дверцу сейфа —
   гравированный стальной короб с заклёпками по углам, бегущей золотой
   рамкой (.marquee-frame--accent из slot.css, добавлена классом в mines.js —
   position:absolute, НЕ увеличивает высоту .game__stage) и клетками-«слитками»
   с металлической выделкой. Открытые клетки эскалируют тир свечения по
   порядку открытия (data-tier, см. safeTier() в mines.js) — тот же язык, что
   и .tile[data-tier] у слотов, только применённый к своим mn-cell--safe
   классам (slot.css не тронут).
   ========================================================================== */

.mines-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 2vw, 10px);
  width: min(86vw, 380px);
  margin: 6px auto 0;
  border-radius: 18px;
  /* Заклёпки по 4 углам + лёгкий градиент «гнутой стали» + тёплый отсвет
     accent-а сверху — всё фоном самого grid-контейнера: gap между клетками
     не закрыт детьми, поэтому фон виден именно в межклеточных «швах»,
     а padding НЕ добавляется — высота блока не меняется ни на пиксель. */
  background: radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(255, 255, 255, 0.22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 14px calc(100% - 14px), rgba(255, 255, 255, 0.22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(255, 255, 255, 0.22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 10px 24px -16px rgba(0, 0, 0, 0.8);
}

/* Гравированный металлический бортик сейфа — тот же приём exclude-mask, что
   у .machine::before в slot.css (тонкая рамка без padding/z-index-трюков).
   Рисуется чуть ШИРЕ, чем бегущая золотая .marquee-frame--accent::after
   (inset -3px) — обе рамки видны одновременно, как двойной обод люка. */
.mines-grid::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  padding: 1.5px;
  background: linear-gradient(145deg, #cfd3da, #46454e 30%, #17151c 55%, #46454e 78%, #cfd3da);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.mn-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 6.5vw, 27px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.1) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 6px);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.07),
    0 3px 8px -5px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s var(--ease-back), background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.mn-cell:active:not(:disabled) {
  transform: scale(0.9);
}
.mn-cell:disabled {
  cursor: default;
}

.mn-cell--safe {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--green) 34%, transparent),
    color-mix(in srgb, var(--green) 8%, transparent)
  );
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  box-shadow: 0 0 16px -6px var(--green), inset 0 -3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Тир-свечение открытых клеток по порядку их открытия (см. safeTier() в
   mines.js) — от почти нейтрального зелёного (тир 1, дефолт .mn-cell--safe
   выше) до пульсирующего золото-изумруда на тире 5. Чисто декоративная
   эскалация, зеркалит уже посчитанный на сервере рост риска/множителя. */
.mn-cell--safe[data-tier='2'] {
  box-shadow: 0 0 18px -5px var(--green), inset 0 -3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
.mn-cell--safe[data-tier='3'] {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--green) 68%);
  box-shadow: 0 0 20px -4px color-mix(in srgb, var(--gold) 28%, var(--green) 72%),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.24);
}
.mn-cell--safe[data-tier='4'] {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--green) 40%);
  box-shadow: 0 0 24px -3px color-mix(in srgb, var(--gold) 55%, var(--green) 45%),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.26);
}
.mn-cell--safe[data-tier='5'] {
  border-color: var(--gold);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--gold) 42%, transparent),
    color-mix(in srgb, var(--green) 18%, transparent)
  );
  box-shadow: 0 0 28px -2px var(--gold), 0 0 44px -10px var(--gold-light),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.32);
  animation: mn-tier5-pulse 2.2s ease-in-out infinite;
}
@keyframes mn-tier5-pulse {
  50% {
    filter: brightness(1.18) saturate(1.15);
  }
}

.mn-cell--mine {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--red) 50%, transparent),
    color-mix(in srgb, var(--red) 12%, transparent)
  );
  border-color: color-mix(in srgb, var(--red) 65%, transparent);
  box-shadow: 0 0 18px -6px var(--red);
}

/* Ударная волна на клетке, где реально подорвались (см. .mn-cell--pop —
   играет только на "своей" клетке, не на всей сетке разом, как и раньше). */
.mn-cell--mine.mn-cell--pop::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: mn-blast-ring 0.5s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes mn-blast-ring {
  from {
    transform: scale(0.4);
    opacity: 0.9;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

.mn-cell--ghost-mine {
  opacity: 0.42;
  filter: grayscale(0.3);
  border-color: color-mix(in srgb, var(--red) 40%, var(--stroke));
}

/* Анимация «появления» — только на клетке, которую только что открыли/
   подорвали, а не на всей сетке при каждой перерисовке (иначе все ранее
   открытые клетки заново подпрыгивали бы на каждый клик — то самое
   «дёргание» всей сетки). */
.mn-cell--pop.mn-cell--safe {
  animation: mn-reveal 0.32s var(--ease-back);
}
.mn-cell--pop.mn-cell--mine {
  animation: mn-bust 0.45s var(--ease-back);
}

@keyframes mn-reveal {
  from {
    transform: scale(0.55) rotate(-10deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes mn-bust {
  0% {
    transform: scale(1) rotate(0);
  }
  30% {
    transform: scale(1.18) rotate(-7deg);
  }
  60% {
    transform: scale(0.94) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}