/* =========================================================================
   MINES area — the 5×5 board (.mnb*) and the screen around it (.mn*).
   The board is a recessed tray of raised dark slabs. A slab flips open to
   an emerald crystal (the casino's win colour) or a mine with a red core.
   Every size inside the board is a multiple of --u (1% of the board width,
   a container-query unit where supported), so it scales with the screen.
   The whole screen fits one viewport: the board takes the height that is
   left after the bar, the multiplier steps and the controls.
   ========================================================================= */

/* ------------------------------------------------------------- board */
.mnb {
  --u: 3px; /* fallback = a 300px board */
  position: relative; width: 100%; height: 100%;
  -webkit-user-select: none; user-select: none;
}
@supports (width: 1cqw) { .mnb { --u: 1cqw; } }
.mnb-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.mnb-tray {
  position: absolute; inset: 0; padding: calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 5.6);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(132, 104, 246, 0.08), rgba(132, 104, 246, 0) 70%),
    linear-gradient(180deg, #141417, #0f0f12);
  border: 1px solid var(--line); border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 36px -22px rgba(0, 0, 0, 0.9);
}
/* soft light around the tray: violet while a game runs, green/red when it ends */
.mnb-tray::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(160, 139, 255, 0.28), 0 0 28px -8px rgba(132, 104, 246, 0.55);
  opacity: 0; transition: opacity 420ms var(--ease-standard);
}
.mnb.is-live .mnb-tray::before { opacity: 1; }
.mnb.is-won .mnb-tray::before { opacity: 1; box-shadow: 0 0 0 1px rgba(79, 227, 154, 0.3), 0 0 30px -8px rgba(46, 224, 154, 0.55); }
.mnb.is-lost .mnb-tray::before { opacity: 1; box-shadow: 0 0 0 1px rgba(255, 107, 120, 0.28), 0 0 30px -8px rgba(255, 71, 87, 0.5); }

.mnb-grid {
  position: relative; width: 100%; height: 100%;
  display: grid; gap: calc(var(--u) * 2.2);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

/* tile = a recessed pit with the piece, covered by a raised slab (the cap) */
.mnb-tile {
  --tr: calc(var(--u) * 3.4);
  position: relative; display: block; width: 100%; height: 100%; min-width: 0;
  border-radius: var(--tr); cursor: default; outline-offset: 3px;
}
.mnb.is-live .mnb-tile:not(.is-open) { cursor: pointer; }
.mnb-pit, .mnb-cap { position: absolute; inset: 0; border-radius: var(--tr); }

.mnb-cap {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #303038 0%, #26262c 58%, #212126 100%);
  border: 1px solid rgba(255, 255, 255, 0.05); border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 calc(var(--u) * -0.6) 0 rgba(0, 0, 0, 0.2),
    0 calc(var(--u) * 0.9) 0 #0b0b0d,
    0 calc(var(--u) * 1.6) calc(var(--u) * 2.4) calc(var(--u) * -0.6) rgba(0, 0, 0, 0.75);
  /* transform only: the pressed / pending shadow and brightness switch instantly */
  transition: transform var(--dur-press) var(--ease-standard);
}
/* an engraved diamond in the middle of every slab; it picks up the violet while a game runs */
.mnb-cap::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%;
  transform: translate(-50%, -50%) rotate(45deg); border-radius: 22%;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
}
.mnb.is-live .mnb-tile:not(.is-open) .mnb-cap::before { background: rgba(132, 104, 246, 0.13); border-color: rgba(160, 139, 255, 0.24); }
/* pending: the slab is held down and a light sweeps across it until the server answers */
.mnb-cap::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
.mnb.is-live .mnb-tile:not(.is-open):active .mnb-cap {
  transform: translateY(calc(var(--u) * 0.6)) scale(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 calc(var(--u) * 0.3) 0 #0b0b0d,
    0 calc(var(--u) * 0.6) calc(var(--u) * 1.2) calc(var(--u) * -0.4) rgba(0, 0, 0, 0.7);
}
.mnb-tile.is-pending .mnb-cap {
  transform: translateY(calc(var(--u) * 0.5)) scale(0.96); filter: brightness(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(160, 139, 255, 0.55),
    0 0 calc(var(--u) * 3.4) rgba(132, 104, 246, 0.55),
    0 calc(var(--u) * 0.4) 0 #0b0b0d;
}
.mnb-tile.is-pending .mnb-cap::after { opacity: 1; animation: mnb-shimmer 850ms var(--ease-inout) infinite; }
@keyframes mnb-shimmer { from { transform: translateX(0); } to { transform: translateX(270%); } }
@media (hover: hover) {
  .mnb.is-live .mnb-tile:not(.is-open):not(.is-pending):hover .mnb-cap { filter: brightness(1.14); }
}

/* opened */
.mnb-pit {
  display: grid; place-items: center; opacity: 0;
  background: #0c0c0f;
  box-shadow: inset 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.mnb-tile.is-open .mnb-pit { opacity: 1; }
.mnb-tile.is-open .mnb-cap { opacity: 0; pointer-events: none; }
.mnb-tile.is-gem:not(.is-dim) .mnb-pit {
  background: radial-gradient(closest-side, rgba(46, 224, 154, 0.28), rgba(46, 224, 154, 0.07) 70%, rgba(46, 224, 154, 0)), #0c1611;
  box-shadow:
    inset 0 0 0 1px rgba(79, 227, 154, 0.34),
    inset 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.5),
    0 0 calc(var(--u) * 2.2) calc(var(--u) * -0.4) rgba(46, 224, 154, 0.4);
}
.mnb.is-won .mnb-tile.is-gem:not(.is-dim) .mnb-pit {
  box-shadow:
    inset 0 0 0 1px rgba(110, 240, 180, 0.6),
    inset 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.45),
    0 0 calc(var(--u) * 3) rgba(46, 224, 154, 0.5);
}
.mnb-tile.is-hit { z-index: 1; }
.mnb-tile.is-hit .mnb-pit {
  background: radial-gradient(closest-side, rgba(255, 71, 87, 0.5), rgba(255, 71, 87, 0.12) 70%, rgba(255, 71, 87, 0)), #1c0c10;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 120, 0.6), 0 0 calc(var(--u) * 3) rgba(255, 71, 87, 0.5);
}
.mnb-tile.is-hit .mnb-pit::before {
  content: ''; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 90, 100, 0.55), rgba(255, 71, 87, 0));
  animation: mnb-throb 1.5s ease-in-out infinite;
}
@keyframes mnb-throb { 50% { opacity: 0.35; transform: scale(0.85); } }

.mnb-art { position: relative; width: 72%; height: 72%; }
.mnb-tile.is-mine .mnb-art { width: 78%; height: 78%; }
.mnb-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mnb-tile.is-gem:not(.is-dim) .mnb-svg { filter: drop-shadow(0 0 calc(var(--u) * 1.3) rgba(46, 224, 154, 0.6)); }
.mnb-tile.is-hit .mnb-svg { filter: drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 71, 87, 0.75)); }
/* game over: what the other tiles held, smaller and dimmed; the hit mine stays bright */
.mnb-tile.is-dim .mnb-art { opacity: 0.36; transform: scale(0.74); }
.mnb-tile.is-dim.is-mine .mnb-art { opacity: 0.55; }

/* one-shot effects (rings, sparks, the blast), drawn over the tiles */
.mnb-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mnb-fx > i { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; }
.mnb-ring {
  border-radius: 50%; border: calc(var(--u) * 0.6) solid rgba(120, 245, 190, 0.85);
  box-shadow: 0 0 calc(var(--u) * 2.2) rgba(46, 224, 154, 0.6), inset 0 0 calc(var(--u) * 1.6) rgba(46, 224, 154, 0.4);
}
.mnb-spark {
  background: #effff7;
  -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.mnb-boom {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 215, 0.95), rgba(255, 150, 70, 0.8) 28%, rgba(255, 71, 87, 0.5) 55%, rgba(255, 71, 87, 0) 78%);
}
.mnb-shock { border-radius: 50%; border: calc(var(--u) * 0.5) solid rgba(255, 120, 130, 0.85); }
.mnb-shard { border-radius: 50%; background: radial-gradient(closest-side, #fff0d6, #ff8a3d 55%, rgba(255, 71, 87, 0)); }

/* result badge over the board centre */
.mnb-result {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  border-radius: calc(var(--u) * 5.6); pointer-events: none; visibility: hidden;
}
.mnb-result.is-on { visibility: visible; }
/* moved off the board centre when it would hide the mine that was hit */
.mnb-result[data-place='top'] { align-items: start; padding-top: calc(var(--u) * 4); }
.mnb-result[data-place='bottom'] { align-items: end; padding-bottom: calc(var(--u) * 4); }
.mnb-result::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(8, 8, 10, 0.62), rgba(8, 8, 10, 0));
}
.mnb-result__card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.9);
  min-width: calc(var(--u) * 44); padding: calc(var(--u) * 3.4) calc(var(--u) * 5.4) calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 4.6);
  background: linear-gradient(180deg, rgba(36, 36, 42, 0.95), rgba(22, 22, 26, 0.95));
  border: 1px solid var(--line-strong); border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -12px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mnb-result.is-win .mnb-result__card {
  border-color: rgba(79, 227, 154, 0.42); border-top-color: rgba(140, 255, 200, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(46, 224, 154, 0.1),
    0 0 calc(var(--u) * 9) calc(var(--u) * -1.5) rgba(46, 224, 154, 0.55), 0 18px 40px -12px rgba(0, 0, 0, 0.85);
}
.mnb-result.is-lose .mnb-result__card {
  border-color: rgba(255, 107, 120, 0.42); border-top-color: rgba(255, 160, 170, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 71, 87, 0.1),
    0 0 calc(var(--u) * 9) calc(var(--u) * -1.5) rgba(255, 71, 87, 0.5), 0 18px 40px -12px rgba(0, 0, 0, 0.85);
}
.mnb-result__cap {
  max-width: calc(var(--u) * 70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: max(var(--fs-2xs), calc(var(--u) * 2.9)); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-2);
}
.mnb-result__cap:empty { display: none; }
.mnb-result__big {
  font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
  font-size: calc(var(--u) * 10);
}
.mnb-result.is-win .mnb-result__big { color: var(--green-400); text-shadow: 0 0 calc(var(--u) * 5) rgba(46, 224, 154, 0.45); }
.mnb-result.is-lose .mnb-result__big { color: var(--red-400); text-shadow: 0 0 calc(var(--u) * 5) rgba(255, 71, 87, 0.4); }
.mnb-result__sub {
  display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap;
  font-weight: 800; font-size: max(var(--fs-sm), calc(var(--u) * 4));
}
.mnb-result__sub .coin { --coin: 1.1em; }
.mnb-result.is-win .mnb-result__sub { color: var(--green-400); }
.mnb-result.is-lose .mnb-result__sub { color: var(--text-2); }

/* small mine glyph (chips, presets, stepper) */
.mn-glyph { display: inline-block; flex: none; width: 1em; height: 1em; }
.mn-glyph__core { fill: var(--red-500); }

/* ------------------------------------------------------------- screen: one viewport */
.mn {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 100%;
  /* the board's ring and glow may reach into the gutter and past the screen edge:
     the box spans the gutters so the clip sits at the screen edge, never scroll sideways */
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: hidden; overflow-x: clip;
}
.mn-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* compact bar: back · recent games · balance */
.mn-bar { flex: none; display: flex; align-items: center; gap: var(--s-2); height: 40px; }
.mn.is-tg .mn-bar__btn[data-go='back'] { display: none; }
.mn-bar__btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--text);
  background: var(--surface-1); border: 1px solid var(--line); border-top-color: var(--line-top);
}
.mn-bar__btn .ic { width: 20px; height: 20px; }
.mn-bar__bal {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 4px 0 11px; border-radius: 13px;
  font-weight: 800; font-size: var(--fs-md);
  background: var(--surface-1); border: 1px solid var(--line); border-top-color: var(--line-top);
}
.mn-bar__bal > .coin { --coin: 19px; }
.mn-bar__bal.is-hit { animation: mn-hit 520ms var(--ease-spring); }
@keyframes mn-hit { 35% { transform: scale(1.08); } }
.mn-bar__plus { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--violet-500); }
.mn-bar__plus .ic { width: 18px; height: 18px; --ic-stroke: 2.4; }

.mn-recent {
  flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; height: 40px; align-items: center;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.mn-chip {
  flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 800; border: 1px solid transparent;
}
.mn-chip.is-win { color: #4fe39a; background: rgba(34, 197, 120, 0.12); border-color: rgba(34, 197, 120, 0.32); }
.mn-chip.is-lose { color: var(--text-2); background: rgba(255, 255, 255, 0.04); border-color: var(--line); padding: 0 7px; }
.mn-chip.is-latest { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.mn-chip__ic { width: 12px; height: 12px; color: #8a8a97; }

/* multiplier steps for the chosen mine count + the rules button */
.mn-top { flex: none; display: flex; align-items: center; gap: var(--s-2); height: 34px; }
.mn-steps {
  --fl: 16px; --fr: 20px;
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto;
  /* the scroller clips vertically too: pad it so the lit chip's glow isn't cut flat */
  padding-block: 10px; margin-block: -10px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.mn-steps.is-start { --fl: 0px; }
.mn-steps.is-end { --fr: 0px; }
.mn-step {
  flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); white-space: nowrap;
  background: var(--surface-1); border: 1px solid var(--line); border-top-color: var(--line-top);
  transition: opacity var(--dur-ui) var(--ease-standard);
}
.mn-step b { font-weight: 800; }
.mn-step.is-done { color: var(--green-400); background: rgba(34, 197, 120, 0.07); border-color: rgba(34, 197, 120, 0.16); opacity: 0.5; }
.mn-step.is-next {
  color: var(--text);
  background: linear-gradient(180deg, rgba(46, 224, 154, 0.2), rgba(46, 224, 154, 0.08));
  border-color: rgba(79, 227, 154, 0.55); border-top-color: rgba(140, 255, 200, 0.7);
  box-shadow: 0 0 14px -4px rgba(46, 224, 154, 0.55);
}
.mn-step.is-final {
  color: #062a19; background: linear-gradient(180deg, #74f1b9, var(--green-500)); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 16px -4px rgba(46, 224, 154, 0.7);
}
.mn-step.is-bust { color: var(--red-400); background: var(--red-tint); border-color: rgba(255, 107, 120, 0.45); }
.mn-step.is-cap { opacity: 0.3; }
.mn-infobtn {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--line); border-top-color: var(--line-top);
}
.mn-infobtn .ic { width: 19px; height: 19px; --ic-fill: 0.14; }

/* the board fills whatever height is left (container query units) */
.mn-stage { flex: 1 1 0; min-height: 200px; display: grid; place-items: center; container-type: size; }
.mn-board { width: 300px; max-width: 100%; aspect-ratio: 1; container-type: inline-size; }
@supports (width: 1cqw) { .mn-board { width: min(100cqw, 100cqh, 440px); } }

.mn-panel {
  flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%), var(--surface-1);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top), var(--shadow-2);
}
.mn-row { display: flex; gap: 6px; align-items: stretch; }
.mn-amount, .mn-minesctl { flex: 1; min-width: 0; }

.mn-amount .stepper__row, .mn-minesctl .stepper__row { height: 46px; padding: 4px; border-radius: 14px; background: var(--bg-0); }
.mn-amount .stepper__btn, .mn-minesctl .stepper__btn {
  width: 38px; border-radius: 10px; font-family: var(--font-text); font-size: var(--fs-md); color: var(--text);
  background: linear-gradient(180deg, #2b2b31, #232328);
}
.mn-amount .stepper__btn b { font-weight: 800; font-size: var(--fs-sm); }
.mn-amount .stepper__field, .mn-minesctl .stepper__field { gap: 6px; }
.mn-amount .stepper__field .coin { --coin: 18px; }
.mn-amount .stepper__input, .mn-minesctl .stepper__input {
  flex: 0 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-lg);
}
.mn-amount .stepper__input { width: 5.4ch; }
.mn-minesctl .stepper__input { width: 2.3ch; text-align: left; }
.mn-minesctl__ic { width: 17px; height: 17px; color: #8e8e9c; }
.mn .stepper.is-disabled { opacity: 0.55; }

.mn-q {
  flex: none; height: 46px; padding: 0; border-radius: 14px; font-size: var(--fs-sm); font-weight: 800; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line); border-top-color: var(--line-top);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.mn-q--max { width: 58px; }
.mn-q--preset { width: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.mn-q--preset .mn-glyph { width: 12px; height: 12px; opacity: 0.75; }
.mn-q.is-active { color: var(--violet-300); background: var(--primary-tint); border-color: rgba(132, 104, 246, 0.42); border-top-color: rgba(195, 181, 255, 0.5); }
.mn-q:disabled { opacity: 0.45; }

/* main button: violet «Играть» → grey «Откройте клетку» → green «Забрать» (live payout below) */
.mn-actions { display: flex; gap: 6px; }
.mn-go {
  position: relative; flex: 1; min-width: 0; height: 52px; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  border-radius: 16px; color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 22px -12px rgba(109, 80, 232, 0.8);
}
.mn-go[data-tone='cash'] { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px -10px rgba(34, 197, 120, 0.75); }
.mn-go__bg, .mn-go__stripes { position: absolute; inset: 0; z-index: -1; transition: opacity var(--dur-ui) var(--ease-standard); }
.mn-go__bg--play {
  background: linear-gradient(180deg, #9a83ff 0%, var(--violet-500) 50%, var(--violet-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}
.mn-go__bg--cash {
  opacity: 0;
  background: linear-gradient(180deg, #5df0aa 0%, var(--green-500) 55%, #179f60 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.mn-go__bg--off { opacity: 0; background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mn-go[data-tone='cash'] .mn-go__bg--cash { opacity: 1; }
.mn-go:disabled { box-shadow: none; cursor: default; }
.mn-go:disabled .mn-go__bg--off { opacity: 1; }
/* busy (start / cash-out in flight): diagonal stripes slide across, transform only */
.mn-go__stripes {
  left: -24px; opacity: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 75%, rgba(255, 255, 255, 0) 75%);
  background-size: 24px 24px;
}
.mn-go.is-busy .mn-go__stripes { opacity: 1; animation: mn-stripes 0.6s linear infinite; }
.mn-go.is-busy[data-tone='play'] .mn-go__bg--play { filter: brightness(0.72) saturate(0.85); }
@keyframes mn-stripes { to { transform: translateX(24px); } }
.mn-go__text { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; padding: 0 10px; line-height: 1.15; }
.mn-go__label { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.mn-go__sub { margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); font-weight: 700; opacity: 0.9; white-space: nowrap; }
.mn-go__sub:empty { display: none; }
.mn-go[data-tone='cash'] .mn-go__text { text-shadow: 0 1px 1px rgba(0, 60, 30, 0.35); }
.mn-go:disabled .mn-go__text { color: var(--text-2); }
.mn-go:disabled .mn-go__sub { color: var(--gold-400); }
.mn-go.is-busy .mn-go__text { color: rgba(255, 255, 255, 0.85); }
.mn-go.is-nudge { animation: mn-nudge 460ms var(--ease-spring); }
@keyframes mn-nudge { 30% { transform: scale(1.04); } 60% { transform: scale(0.99); } }

.mn-rand {
  flex: none; width: 66px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 16px; color: var(--text);
  background: linear-gradient(180deg, #29292f, #222227); border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top), var(--shadow-1);
}
.mn-rand .ic { width: 20px; height: 20px; color: var(--violet-300); --ic-fill: 0.16; }
.mn-rand span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.01em; color: var(--text-2); white-space: nowrap; }
.mn-rand:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

/* rules sheet («Как играть») — rendered in #sheet-root */
.mn-info { display: flex; flex-direction: column; gap: var(--s-4); }
.mn-info__rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.mn-info__rules li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-2); }
.mn-info__rules li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: calc(0.625em - 2.5px); border-radius: 50%; background: var(--text-3); }
.mn-info__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mn-info__facts > div {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 8px; border-radius: var(--r-md);
  background: var(--bg-0); border: 1px solid var(--line);
}
.mn-info__facts span { font-size: var(--fs-xs); font-weight: 650; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-info__facts b { font-size: var(--fs-md); font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .mnb-tile.is-pending .mnb-cap::after,
  .mnb-tile.is-hit .mnb-pit::before,
  .mn-go.is-busy .mn-go__stripes { animation: none; }
  .mnb-tray::before { transition: none; }
}

/* short screens: tighten the vertical rhythm so the board keeps its size */
@media (max-height: 700px) {
  .mn { gap: 8px; }
  .mn-panel { gap: 6px; padding: 8px; }
  .mn-amount .stepper__row, .mn-minesctl .stepper__row, .mn-q { height: 42px; }
  .mn-go, .mn-rand { height: 48px; }
}

/* narrow phones: give the steppers room next to MAX and the presets */
@media (max-width: 380px) {
  .mn-q--preset { width: 44px; font-size: var(--fs-xs); gap: 2px; }
  .mn-q--preset .mn-glyph { width: 11px; height: 11px; }
  .mn-q--max { width: 52px; }
  .mn-amount .stepper__btn, .mn-minesctl .stepper__btn { width: 32px; }
  .mn-amount .stepper__input, .mn-minesctl .stepper__input { font-size: var(--fs-md); }
  .mn-rand { width: 60px; }
  .mn-step { padding: 0 8px; }
}

/* very narrow windows (Telegram Desktop zoomed in): keep the mines count readable */
@media (max-width: 359px) {
  .mn-q--preset { width: 40px; font-size: var(--fs-xs); }
  .mn-q--preset .mn-glyph { display: none; }
  .mn-q--max { width: 46px; font-size: var(--fs-xs); }
  .mn-amount .stepper__btn, .mn-minesctl .stepper__btn { width: 30px; }
  .mn-minesctl__ic { display: none; }
  .mn-minesctl .stepper__input { text-align: center; }
}