/* ==========================================================================
   DropHub Miner

   Тема сайта, как у апгрейда, HiLo, «1 Клика» и рулетки: индиго-
   поверхности, лаймовый акцент, Oswald на заголовках и цифрах, Inter на
   тексте.

   ---------- УСТРОЙСТВО ЭКРАНА ----------

   Вся игра — один индиго-стол (.mn-stage): лампа сверху, сетка и редкие
   искры. Слева ставка (то, чем человек управляет, стоит на месте), справа
   поле в утопленном «колодце» с картинкой бункера — то, что меняется само.

   Цвета смысловые: лайм — главное действие, открытая клетка и
   заработанное; красный — мина и потерянное. Больше ничем не красим,
   иначе эти два перестанут выделяться.

   Общие файлы (home.css, games.css, mobile.css) не правим: где их нужно
   перебить, вес поднят префиксом .gm-body / .mn-body (подписано).
   ========================================================================== */

/* фон страницы — как у HiLo и «1 Клика». Камуфляж (body::before из
   home.css) здесь раньше выключали по просьбе; 2026-11-02 владелец
   вернул его во всех играх, как в апгрейде, — на минёре, клатче и миде
   (у всех .mn-body) он снова виден. */
.mn-body { background-color: #1A1430; }

/* Токены — на .mn-page: ближайший предок выигрывает у :root без
   !important, и шапка сайта над игрой остаётся своей. */
.mn-page {
  --mn-s2: #2C2452; --mn-s3: #372E62; --mn-deep: #150F2B;
  --mn-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --mn-line: #3A3166; --mn-line2: #4C4182;
  --mn-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --mn-lime: #D7FF00;
  --gem: #D7FF00;
  --boom: #FF5A6E;

  --text: #F5F3FF; --text-dim: #BDB7DE; --text-mute: #A69FCF;
  --line: var(--mn-line); --panel-2: var(--mn-s2); --panel-3: var(--mn-deep);
  --accent: var(--mn-lime);

  max-width: 1240px; margin: 0 auto;
  padding: 12px var(--pad-x) 56px;
}

/* Обязательная строка, а не перестраховка.

   Атрибут hidden прячет элемент правилом [hidden]{display:none} из
   ВСТРОЕННОЙ таблицы браузера, а любое правило автора её перебивает. На
   этой странице через hidden переключаются «Начать», «Забрать», цифры
   партии и итог — и у всех у них display задан ниже. Селектор с
   потомком, а не голый [hidden]: у правил ниже вес класса, у кнопок и
   цифр — два класса (.gm-body …), отсюда второй селектор. */
.mn-page [hidden], .gm-body .mn-page [hidden] { display: none; }

/* ── заголовок раздела ──
   На линиях, как у апгрейда и HiLo. Полосу ставит drophub.gamebar.js перед
   <main>, поэтому перекраска здесь. */
.mn-body .kz-gbar { max-width: 1240px; padding: 10px var(--pad-x, 20px) 0; justify-content: center; gap: 12px; }
.mn-body .kz-gbar::before, .mn-body .kz-gbar::after { content: ''; flex: 1; height: 1px; min-width: 24px; }
.mn-body .kz-gbar::before { margin-right: 6px; background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.mn-body .kz-gbar::after  { margin-left: 6px;  background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .35)); }
.mn-body .kz-gbar .kz-gico { width: 30px; height: 30px; flex: none; }
.mn-body .kz-gbar__txt { display: block; flex: none; }
.mn-body .kz-gbar__txt b { font-size: 30px; font-weight: 600; letter-spacing: .06em; line-height: 1.1; color: #F5F3FF; text-shadow: 0 0 24px rgba(166, 44, 255, .45); }
.mn-body .kz-gbar__txt i { display: none; }

/* ═══════════════ СТОЛ ═══════════════ */

.mn-stage {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  align-items: stretch; gap: 22px;
  padding: 20px;
  border: 1px solid var(--mn-line); border-radius: 28px;
  background:
    radial-gradient(40% 46% at 50% 0%, rgba(140, 90, 255, .30), transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgba(110, 80, 230, .14), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(110, 80, 230, .14), transparent 70%),
    linear-gradient(180deg, #261E4A 0%, #201941 58%, #1D163A 100%);
  box-shadow: 0 24px 60px rgba(8, 4, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 120px rgba(14, 8, 36, .35);
}
/* сетка 44 px, гаснет к краям — плоскость не выглядит пустой заливкой */
.mn-stage::before, .mn-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
}
.mn-stage::before {
  background-image:
    linear-gradient(rgba(190, 170, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 170, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
/* редкие искры — один слой, мерцает только прозрачностью */
.mn-stage::after {
  background:
    radial-gradient(1.6px 1.6px at 7% 22%, rgba(215, 255, 0, .8), transparent),
    radial-gradient(1.2px 1.2px at 13% 58%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.8px 1.8px at 19% 86%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.4px 1.4px at 76% 6%, rgba(166, 120, 255, .85), transparent),
    radial-gradient(1.2px 1.2px at 97% 62%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.7px 1.7px at 90% 3%, rgba(215, 255, 0, .7), transparent),
    radial-gradient(1.3px 1.3px at 98% 92%, rgba(166, 120, 255, .7), transparent),
    radial-gradient(1.1px 1.1px at 36% 97%, rgba(255, 255, 255, .35), transparent);
  animation: mn-twinkle 5s ease-in-out infinite alternate;
}
@keyframes mn-twinkle { from { opacity: .45; } to { opacity: 1; } }

/* ═══════════════ ПАНЕЛЬ ═══════════════
   Раскладка, а не карточка: своя рамка внутри стола читалась бы
   карточкой в карточке. */

.mn-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 4px 0 2px; }
.mn-main  { display: flex; flex-direction: column; min-width: 0; }

.mn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.mn-title {
  margin: 0;
  font-family: var(--f-cond), sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
.mn-info {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 1px solid var(--mn-line); background: var(--mn-glass); box-shadow: var(--mn-hl);
  font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 700; color: var(--text-mute);
  transition: color .14s, border-color .14s;
}
.mn-info:hover { color: var(--text); border-color: var(--mn-line2); }

/* Подпись над полем: слева что это, справа справка (баланс, «из 25»). */
.mn-lab {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: 12px; color: var(--text-mute);
}
.mn-lab__note { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.mn-lab__note img { width: 16px; height: 16px; object-fit: contain; }

/* Баланс — в строке подписи: монету рисует drophub.currency.js по маркеру
   суммы, значок кошелька не нужен. Гостю баланса нет. */
.mn-wallet { display: inline-flex; align-items: center; min-width: 0; }
.mn-wallet__ico { display: none; }
.mn-wallet__txt { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.mn-wallet__txt i { font-style: normal; font-size: 11px; }
.mn-wallet__txt b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
html:not(.dh-user) .mn-wallet { display: none; }

/* ═══════════════ СТАВКА ═══════════════ */

.mn-betrow { display: grid; gap: 8px; }
/* Поле суммы — утопленный колодец, как у HiLo и «1 Клика». */
.mn-bet {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 7px 0 14px;
  border: 1px solid var(--mn-line); border-radius: 12px; background: var(--mn-deep);
  box-shadow: inset 0 2px 8px rgba(6, 2, 20, .5);
  transition: border-color .14s, box-shadow .14s;
}
.mn-bet:focus-within { border-color: var(--mn-line2); box-shadow: inset 0 2px 8px rgba(6, 2, 20, .5), 0 0 0 3px rgba(215, 255, 0, .12); }
.mn-bet__coin { width: 18px; height: 18px; flex: none; }
.mn-bet__coin svg, .mn-bet__coin img { display: block; width: 100%; height: 100%; }
.mn-bet input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
  font: inherit; font-family: var(--f-cond), sans-serif; font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mn-bet input[disabled] { opacity: .5; }
.mn-max {
  height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--mn-line2); background: var(--mn-s2);
  font-family: var(--f-cond), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--mn-lime);
  transition: background-color .14s, border-color .14s;
}
.mn-max:hover:not([disabled]) { background: var(--mn-s3); border-color: rgba(215, 255, 0, .45); }
.mn-max[disabled] { opacity: .4; cursor: not-allowed; }

/* Быстрые суммы — стеклянные чипы, как у рулетки и HiLo. */
.mn-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mn-quick button {
  height: 40px; min-width: 0; border-radius: 10px;
  border: 1px solid var(--mn-line); background: var(--mn-glass); box-shadow: var(--mn-hl);
  font-family: var(--f-cond), sans-serif; font-size: 14px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s, transform .12s;
}
.mn-quick button:hover:not([disabled]) { color: var(--text); border-color: var(--mn-line2); }
.mn-quick button:active:not([disabled]) { transform: scale(.96); }
.mn-quick button[disabled] { opacity: .4; cursor: not-allowed; }

/* ═══════════════ ВЫБОР МИН ═══════════════
   Выбранное число — лаймовой рамкой, как выбранная ставка у HiLo:
   заливка лаймом остаётся одной главной кнопке. */

.mn-mines { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mn-mine {
  height: 46px; min-width: 0; border-radius: 10px;
  border: 1px solid var(--mn-line); background: var(--mn-glass); box-shadow: var(--mn-hl);
  font-family: var(--f-cond), sans-serif; font-size: 16px; font-weight: 600;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
  transition: border-color .14s, color .14s, background-color .14s, opacity .14s, transform .12s;
}
.mn-mine:hover:not([disabled]) { color: var(--text); border-color: var(--mn-line2); }
.mn-mine:active:not([disabled]) { transform: scale(.95); }
.mn-mine.is-on {
  border-color: var(--mn-lime); color: var(--mn-lime);
  background: linear-gradient(180deg, rgba(215, 255, 0, .12), rgba(215, 255, 0, .04)), var(--mn-deep);
}
.mn-mine[disabled] { opacity: .4; cursor: not-allowed; }
.mn-mine.is-on[disabled] { opacity: .7; }

/* ═══════════════ КНОПКИ ═══════════════
   «Начать» и «Забрать» — одна и та же лаймовая кнопка в одном месте:
   партия — это нажать, открывать клетки и нажать там же. games.css
   красит .gm-body .mn-go в зелёный — перебиваем тем же весом (этот файл
   подключён позже). */

.gm-body .mn-go, .gm-body .mn-take, .mn-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 58px; margin-top: 10px; padding: 0 18px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #E6FF4D 0%, #D7FF00 60%, #C6EC00 100%); color: #141A00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 8px 22px -10px rgba(215, 255, 0, .55);
  font-family: var(--f-cond), sans-serif; font-size: 17px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  transition: transform .14s, filter .14s, opacity .14s;
}
.gm-body .mn-go:hover:not([disabled]), .gm-body .mn-take:hover:not([disabled]), .mn-login:hover { transform: translateY(-1px); filter: brightness(1.05); }
.gm-body .mn-go:active:not([disabled]), .gm-body .mn-take:active:not([disabled]), .mn-login:active { transform: none; }
.gm-body .mn-go[disabled] {
  background: var(--mn-s2); color: var(--text-mute); box-shadow: var(--mn-hl);
  cursor: not-allowed;
}
.mn-go b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .72; }
.mn-go b:empty { display: none; }

/* «Забрать» до первой клетки заперта: забирать ещё нечего. Остаётся
   лаймовой, но приглушённой — видно, что она появится здесь. */
.mn-take__lead { font-size: 17px; }
.mn-take__prize { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mn-take__prize b { font-weight: 700; }
.gm-body .mn-page:not(.is-busy) .mn-take[disabled] {
  background: rgba(215, 255, 0, .10); color: rgba(215, 255, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .28);
  cursor: not-allowed;
}
/* Пока ответ на клетку в пути (~0.1 с), кнопка заперта скриптом, но вид
   не меняет: иначе мигала бы на каждой открытой клетке. */
.gm-body .mn-page.is-busy .mn-take[disabled] { cursor: progress; }

/* ── гость ── вместо «Начать»: что нужно и кнопка входа */
.mn-guest { display: none; gap: 2px; margin-top: 8px; }
.mn-page.is-guest .mn-guest { display: grid; }
.mn-page.is-guest .mn-go { display: none; }
.mn-guest p { display: grid; gap: 2px; margin: 0; text-align: center; font-size: 12px; color: var(--text-mute); }
.mn-guest p b { font-family: var(--f-cond), sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.mn-login svg { flex: none; }

/* ═══════════════ ЦИФРЫ ПАРТИИ ═══════════════
   Видны только в партии. Без своей карточки: четыре числа на линиях. */

.gm-body .mn-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 2px 0 0;
  border: 0; border-top: 1px solid var(--mn-line); border-bottom: 1px solid var(--mn-line);
  background: none; box-shadow: none; border-radius: 0;
}
.mn-stats > div { padding: 9px 2px; min-width: 0; }
.mn-stats > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--mn-line); }
.mn-stats > div:nth-child(n+3) { border-top: 1px solid rgba(58, 49, 102, .6); }
.mn-stats dt {
  font-family: var(--f-cond), sans-serif; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-stats dd {
  margin: 4px 0 0; line-height: 1;
  font-family: var(--f-cond), sans-serif; font-size: 19px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mn-mult { color: var(--mn-lime); }
/* Порог, за которым следующий шаг — уже подбрасывание монеты. */
.mn-page.is-hot #mn-chance { color: var(--boom); }

.mn-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-mute); }
.mn-hint b { color: var(--text-dim); font-weight: 600; }
.mn-hint.is-alert { color: var(--text-dim); }

/* ═══════════════ ПОЛЕ ═══════════════
   Утопленный колодец с бункером — картинка, что раньше лежала фоном
   всей страницы, теперь только здесь и притушена: поле читается первым.
   games.css рисует .gm-body .mn-boardwrap панелью — перебиваем тем же
   весом. */

.gm-body .mn-boardwrap {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px 24px 10px;
  border: 1px solid var(--mn-line); border-radius: 22px;
  background:
    radial-gradient(56% 50% at 50% 46%, rgba(21, 15, 43, .55), rgba(21, 15, 43, .92) 100%),
    linear-gradient(180deg, rgba(21, 15, 43, .55), rgba(21, 15, 43, .85)),
    url("assets/miner_page_bg.webp") center / cover no-repeat,
    var(--mn-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 70px rgba(8, 4, 24, .55);
  transition: box-shadow .8s ease;
}

.mn-board {
  --heat: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  /* строки — явные и равные: неявные auto-строки росли под содержимое
     открытой клетки (Safari на телефоне), и ряд становился выше соседних */
  grid-template-rows: repeat(5, minmax(0, 1fr));
  /* Поле квадратное и не во всю ширину: двадцать пять кнопок по 200
     пикселей — мишень, по которой не промахнуться, и игра теряет
     напряжение. */
  width: min(100%, 500px);
  aspect-ratio: 1;
}

/* Закрытая клетка — индиго-плитка с нижней кромкой: читается кнопкой,
   которую нажимают. Знак бренда (assets/skin-mark.png) чуть заметен. */
.mn-cell {
  position: relative; min-width: 0; min-height: 0;
  /* всё содержимое — внутри своего квадрата: без отступов кнопки и без
     вылета кристалла и множителя за край (владелец 2026-10-16, iPhone) */
  padding: 0; overflow: hidden;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #382E68 0%, #2B2354 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(150, 128, 255, .14), 0 3px 0 #110B24;
  transition: opacity .7s ease, transform .12s, background-color .16s, box-shadow .16s;
}
.mn-cell.is-closed::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: url("assets/skin-mark.png") center / 50% auto no-repeat;
  opacity: .1; transition: opacity .16s;
}
/* До старта клетки не нажимаются — и не делают вид, что нажимаются. */
.mn-page[data-state="idle"] .mn-cell.is-closed { cursor: default; }
.mn-page[data-state="playing"] .mn-cell.is-closed:hover {
  background: linear-gradient(180deg, #43387A 0%, #322961 100%);
  transform: translateY(-2px);
}
.mn-page[data-state="playing"] .mn-cell.is-closed:hover::before { opacity: .22; }
.mn-cell.is-closed:active { transform: translateY(1px); }
.mn-cell:focus-visible { outline: 2px solid var(--mn-lime); outline-offset: 2px; }
/* клик ушёл на сервер — клетка вдавлена и мерцает до ответа */
.mn-cell.is-pending { transform: translateY(2px) scale(.96); }
.mn-cell.is-pending::before { opacity: .4 !important; animation: mn-pend .5s ease-in-out infinite alternate; }
@keyframes mn-pend { from { opacity: .15; } to { opacity: .45; } }

.mn-cell__face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.mn-cell__face .mn-ico { width: 70%; height: 70%; object-fit: contain; display: block; }
.mn-cell[disabled] { cursor: default; }

/* Вскрытие: клетка «переворачивается». Мгновенная подмена читается как
   перерисовка, а не как действие игрока. */
.mn-cell.is-gem, .mn-cell.is-bomb { animation: mn-flip .26s cubic-bezier(.16, .84, .28, 1); }
@keyframes mn-flip {
  from { transform: rotateY(84deg) scale(.9); }
  to   { transform: none; }
}

/* ── пустая клетка ──
   Утоплена (открыта — «вскопана»), лаймовая рамка, кристалл и под ним
   множитель того шага. Без свечений — просили спокойно. */
.mn-cell.is-gem {
  background: radial-gradient(70% 70% at 50% 40%, rgba(215, 255, 0, .10), transparent 70%), #1B1538;
  box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .5), inset 0 3px 10px rgba(6, 2, 20, .55);
}
/* Кристалл и множитель — абсолютно, долями самой клетки. Раньше — сетка
   «1fr auto» и height: 100% у картинки: Safari считал 100% от всей клетки,
   строка 1fr раздувалась, и множитель уезжал вниз за край. */
.mn-cell.is-gem .mn-cell__face { display: block; }
.mn-cell.is-gem .mn-ico {
  position: absolute; left: 18%; top: 8%; width: 64%; height: 60%;
  max-width: none; max-height: none; object-fit: contain;
}
.mn-cell.is-gem .mn-cell__x {
  position: absolute; left: 2px; right: 2px; bottom: 9%;
  text-align: center; white-space: nowrap; overflow: hidden;
}
.mn-cell.is-gem .mn-ico { animation: mn-gem-pop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes mn-gem-pop {
  0%   { transform: scale(0) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.14) rotate(3deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.mn-cell__x {
  font-style: normal; line-height: 1;
  font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--mn-lime); font-variant-numeric: tabular-nums;
  animation: mn-say .3s .12s ease-out both;
}

/* ── мина ──
   Аккуратно: тёмно-красная клетка с тонкой рамкой, мина мягко
   проявляется. Всё поле вокруг тихо гаснет (.is-lost ниже). */
.mn-cell.is-bomb {
  z-index: 2;
  background: linear-gradient(180deg, #5A1A33 0%, #3E1226 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .75), inset 0 3px 10px rgba(20, 2, 8, .5);
}
.mn-cell.is-bomb .mn-ico { animation: mn-bomb-in .5s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes mn-bomb-in {
  0%   { transform: scale(.55); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* Остальные мины после партии — приглушённо: видно, что их было ровно
   столько, сколько обещано. */
.mn-cell.is-ghost {
  background: #1B1538;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .2);
  animation: mn-ghostin .3s ease-out;
}
.mn-cell.is-ghost .mn-ico { width: 56%; height: 56%; opacity: .45; }
@keyframes mn-ghostin {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════ НАПРЯЖЕНИЕ ══════════════════════
   --heat ставит скрипт: вероятность взорваться на следующем шаге. Не
   «сколько открыто» и не множитель — на трёх минах восьмой шаг ещё
   безопасен, а на двадцати четырёх опасен первый. Красится рамка
   закрытых клеток, а не заливка: заливка на двадцати пяти клетках
   превращает поле в сплошное пятно. */
.mn-cell.is-closed {
  box-shadow:
    inset 0 0 0 1px rgba(255, 90, 110, calc(var(--heat) * .55)),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(150, 128, 255, .14),
    0 3px 0 #110B24;
}
/* Пульс поля: тонкая красная плёнка поверх, дышит только прозрачностью
   (композитор, без перерисовки клеток). Период короче с ростом риска. */
.mn-board::after {
  content: ''; position: absolute; inset: -4px; border-radius: 14px; pointer-events: none; z-index: 5;
  background: rgba(255, 90, 110, calc(var(--heat) * .08));
  opacity: 0;
  animation: mn-breathe calc(2.6s - var(--heat) * 1.7s) ease-in-out infinite;
}
@keyframes mn-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Проигрыш — затухание, а не взрыв: закрытые клетки и кристаллы уходят в
   полутон, рамка колодца чуть краснеет, мина — единственное яркое пятно. */
.mn-page.is-lost .mn-cell.is-closed { opacity: .32; }
.mn-page.is-lost .mn-cell.is-gem    { opacity: .5; }
.mn-page.is-lost .mn-cell.is-closed::before { opacity: .05; }
.gm-body .mn-page.is-lost .mn-boardwrap { box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .32), inset 0 0 70px rgba(8, 4, 24, .55); }

/* ══════════════════ ЛЕСТНИЦА КОЭФФИЦИЕНТОВ ══════════════════
   Под полем: ступень и её множитель при выбранном числе мин. Листается
   вбок, край гаснет. Пройденные — лаймовым числом, текущая — лаймовой
   рамкой, следующая — пунктиром. */
.mn-ladder {
  width: min(100%, 500px); margin-top: 16px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
}
.mn-ladder::-webkit-scrollbar { display: none; }
/* листать мышью: курсор-рука; на время перетаскивания плавная прокрутка
   выключена, иначе лента отстаёт от мыши (miner.main.js bindLadder) */
@media (hover: hover) and (pointer: fine) { .mn-ladder { cursor: grab; } }
.mn-ladder.is-drag { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.mn-lad {
  flex: none; min-width: 60px; height: 42px; padding: 0 8px;
  display: grid; align-content: center; justify-items: center; gap: 3px;
  border: 1px solid var(--mn-line); border-radius: 10px; background: rgba(44, 36, 82, .72);
  font-family: var(--f-cond), sans-serif; font-variant-numeric: tabular-nums; line-height: 1;
  transition: border-color .16s, background-color .16s, color .16s;
}
.mn-lad i { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--text-mute); }
.mn-lad b { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.mn-lad.is-done { background: rgba(27, 21, 56, .8); }
.mn-lad.is-done b { color: rgba(215, 255, 0, .7); }
.mn-lad.is-on   { border-color: var(--mn-lime); background: rgba(215, 255, 0, .1); }
.mn-lad.is-on b, .mn-lad.is-on i { color: var(--mn-lime); }
.mn-lad.is-next { border-style: dashed; border-color: var(--mn-line2); }
.mn-lad.is-next b { color: var(--text); }

/* Итог партии — плашкой под лестницей. Место держит .mn-overslot, чтобы
   стол не прыгал, когда итог появляется и исчезает. */
.mn-overslot { display: grid; place-items: center; min-height: 48px; width: 100%; }
.mn-over {
  margin: 0; padding: 7px 16px; border-radius: 999px;
  background: rgba(21, 15, 43, .8); box-shadow: inset 0 0 0 1px var(--mn-line);
  font-family: var(--f-cond), sans-serif; font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  animation: mn-say .34s cubic-bezier(.16, .84, .28, 1);
}
.mn-over b { color: var(--boom); }
.mn-over b.win { color: var(--mn-lime); }
@keyframes mn-say {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════ УЗКИЕ ЭКРАНЫ ═══════════════ */

@media (max-width: 1080px) {
  .mn-stage { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .gm-body .mn-boardwrap { padding: 18px 14px 6px; }
}

/* ══════════════════════════ ТЕЛЕФОН ══════════════════════════

   Стол в одну колонку: сверху поле во всю ширину, под ним панель.
   В панели первыми — «Начать»/«Забрать» (или вход для гостя) и цифры
   партии: партия — это нажать, открыть клетки и забрать, и палец не
   ходит прокруткой между полем и кнопкой. Мины и сумму меняют реже —
   они ниже.

   mobile.css подключён ПОСЛЕ этого файла и рисует .gm-body .mn-panel
   тёмной плашкой, ужимает поле до 240px и кнопки до 44px — поэтому
   селекторы здесь на ступень сильнее (.gm-body.mn-body …). */
@media (max-width: 760px) {
  .mn-page { padding-top: 6px; padding-bottom: 32px; }
  .mn-body .kz-gbar__txt b { font-size: 24px; }
  .mn-body .kz-gbar .kz-gico { width: 26px; height: 26px; }

  .mn-stage {
    display: flex; flex-direction: column; gap: 14px;
    padding: 10px 10px 14px; border-radius: 20px;
  }

  .gm-body.mn-body .mn-boardwrap { padding: 10px 8px 0; border-radius: 16px; }
  /* Во всю ширину, но не выше экрана: ветка ловит и телефон боком
     (740×360) — там поле и кнопка иначе не видны вместе никогда. */
  .gm-body.mn-body .mn-boardwrap .mn-board {
    width: min(100%, 600px, max(240px, 100vh - 130px));
    width: min(100%, 600px, max(240px, 100svh - 130px));
    gap: 6px;
  }
  .mn-cell { border-radius: 10px; }
  .mn-cell__x { font-size: 11px; }
  .mn-ladder { width: 100%; margin-top: 10px; }
  .mn-lad { min-width: 54px; height: 38px; }
  .mn-lad b { font-size: 13px; }

  /* итог партии — поверх лестницы, той же высоты: держится три секунды
     (miner.main.js, overLater) и уходит, как только меняют мины или
     ставку. Своего места под ним на телефоне не держим. */
  .mn-overslot { min-height: 10px; }
  .gm-body.mn-body .mn-boardwrap .mn-over {
    position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 10px;
    height: 38px; padding: 0 10px; border-radius: 10px;
    background: #1B1538; box-shadow: inset 0 0 0 1px var(--mn-line2);
    font-size: 15px; line-height: 38px; text-align: center;
  }

  .gm-body.mn-body .mn-panel {
    gap: 8px; padding: 0 2px; position: static;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .gm-body.mn-body .mn-panel > .mn-go,
  .gm-body.mn-body .mn-panel > .mn-take,
  .gm-body.mn-body .mn-panel > .mn-guest { order: -3; margin-top: 0; }
  .gm-body.mn-body .mn-panel > .mn-stats { order: -2; }
  .gm-body.mn-body .mn-panel .mn-go,
  .gm-body.mn-body .mn-panel .mn-take,
  .gm-body.mn-body .mn-panel .mn-login { height: 52px; font-size: 16px; }
  .gm-body.mn-body .mn-take__lead { font-size: 16px; }
  .gm-body.mn-body .mn-guest { margin-top: 0; gap: 6px; }

  /* цифры одной строкой из трёх: «на кону» и так написано в «Забрать» */
  .gm-body.mn-body .mn-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .gm-body.mn-body .mn-stats > div { padding: 7px 0 7px 10px; border-top: 0; border-left: 1px solid var(--mn-line); }
  .gm-body.mn-body .mn-stats > div:first-child { padding-left: 0; border-left: 0; }
  .gm-body.mn-body .mn-stats .mn-stat--risk { display: none; }
  .gm-body.mn-body .mn-stats dt { font-size: 9.5px; letter-spacing: .08em; }
  .gm-body.mn-body .mn-stats dd { font-size: 17px; }

  /* Подсказка на телефоне скрыта (mobile.css) — места нет. Но сообщения,
     после которых нужно что-то сделать (отказ сервера, «не хватает»,
     лимит бесплатных кейсов, «как играть» по «i»), скрипт помечает
     is-alert — они встают строкой прямо под кнопкой. */
  .gm-body.mn-body .mn-panel > .mn-hint.is-alert:not(:empty) {
    display: block; order: -2; margin: 0; padding: 0 2px;
    font-size: 12px; line-height: 1.45; color: var(--text-dim);
  }

  .gm-body.mn-body .mn-head { margin: 4px 0 0; }
  .gm-body.mn-body .mn-title { font-size: 12px; }
  .gm-body.mn-body .mn-lab { margin-top: 2px; }
  .gm-body.mn-body .mn-wallet { height: auto; }
  .gm-body.mn-body .mn-wallet__txt b { font-size: 13px; }
  .gm-body.mn-body .mn-bet { height: 46px; }
  .gm-body.mn-body .mn-quick button { min-width: 0; height: 40px; padding: 0; font-size: 14px; }
  .gm-body.mn-body .mn-panel .mn-mines { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .gm-body.mn-body .mn-mine { height: 42px; font-size: 15px; }
}

@media (max-width: 360px) {
  .mn-stage { padding: 8px 8px 12px; }
  .gm-body.mn-body .mn-boardwrap { padding: 8px 6px 0; }
  .gm-body.mn-body .mn-boardwrap .mn-board { gap: 5px; }
  .mn-cell__x { font-size: 10px; }
  .gm-body.mn-body .mn-stats dt { font-size: 9px; letter-spacing: .04em; }
  .gm-body.mn-body .mn-stats dd { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-stage::after, .mn-board::after { animation: none; }
  .mn-board::after { opacity: 0; }
  .mn-cell.is-gem, .mn-cell.is-bomb, .mn-cell.is-ghost,
  .mn-cell .mn-ico, .mn-cell__x, .mn-over { animation-duration: .01ms; animation-delay: 0s; }
  .mn-cell, .gm-body .mn-boardwrap, .mn-ladder { transition-duration: .01ms; scroll-behavior: auto; }
  .mn-page[data-state="playing"] .mn-cell.is-closed:hover,
  .gm-body .mn-go:hover:not([disabled]), .gm-body .mn-take:hover:not([disabled]), .mn-login:hover { transform: none; }
}

/* ═══ ВЫБРАННОЕ И ВКЛЮЧЁННОЕ — ГРАДИЕНТ ЛОГОТИПА ═══
   Статичный градиент кислотный → розовый через светлый тон (напрямую
   смесь рыжеет), как ⚡/🛒 в «1 Клике» (oneclick.css). Стоит в конце
   файла: те же селекторы выше рисовали лаймовую рамку. */
.mn-mine.is-on {
  color: #F4FFD6;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #2A2158 0%, #1C1540 100%) padding-box, linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), -4px -4px 14px rgba(215, 255, 0, .16), 4px 4px 14px rgba(245, 53, 240, .2);
}