/* ═══════════════════════════════════════════════════════════
   Режим «Minecraft» — пиксельная сцена внутри синей темы.
   ═══════════════════════════════════════════════════════════ */

/*
 * Сцена занимает весь экран целиком.
 *
 * Раньше она растягивалась отрицательными полями поверх отступов
 * контейнера. Работало это только при симметричных отступах: снизу
 * у экрана отступ больше, а справа появлялась полоса прокрутки —
 * и сцена уезжала вбок. Теперь родителю на время игры отступы
 * обнуляются (.screen.is-fullbleed), а сцена просто занимает его
 * целиком и ничего не прокручивает.
 */
.mc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  background: linear-gradient(180deg, #6FBBEE 0%, #97D0F3 42%, #C4E6FA 100%);
  overflow: hidden;
}

/*
 * Дальний план: холмы у горизонта.
 *
 * Рисуются на псевдоэлементе, а не картинкой — так они тянутся под
 * любую ширину экрана и ничего не весят. Ступенчатый градиент даёт
 * пиксельный край, который вяжется с текстурами блоков.
 */
.mc::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 132px;
  height: 86px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 52%, #A9C6D8 52% 100%),
    linear-gradient(255deg, transparent 0 62%, #BBD4E3 62% 100%);
  background-repeat: no-repeat;
  background-size: 62% 100%, 55% 78%;
  background-position: right bottom, left bottom;
  opacity: .55;
}

/* Солнце — просто светлое пятно в углу, без деталей */
.mc::after {
  content: '';
  position: absolute;
  top: 54px; right: 26px;
  width: 54px; height: 54px;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6C9 0 38%, rgba(255,246,201,.35) 60%, transparent 72%);
  pointer-events: none;
}

/* Пиксельная графика не должна размываться при масштабировании */
.mc img, .mc svg { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Шапка ─────────────────────────────────────────────────── */

/*
 * Шапка игры отступает от верха на безопасную зону.
 *
 * Панель приложения на игровом экране скрыта, и без этого отступа
 * «Назад», «Демо» и «Правила» оказывались под шторкой Telegram —
 * нажать их было нельзя.
 */
.mc__top {
  align-self: stretch;
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top, 0px) + var(--sp-3)) var(--sp-3) var(--sp-2);
  flex: none;
}
.mc__back, .mc__demo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 800;
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.mc__back { background: #1C2333; color: #fff; }

/* Переключатель автопрокрута */
.mc__auto {
  height: 34px; padding: 0 14px;
  border-radius: var(--r-sm);
  background: rgba(28,35,51,.55); color: rgba(255,255,255,.5);
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mc__auto.is-on {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.28), var(--glow-blue-sm);
}
.mc__auto:active { transform: translateY(2px); }
.mc__demo { background: var(--grad-gold); color: #2A1700; }
.mc__back:active, .mc__demo:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.mc__back svg, .mc__demo svg { width: 14px; height: 14px; }

/* ── Сетка падающих предметов ──────────────────────────────── */

.mc__tray {
  width: fit-content;
  position: relative; z-index: 4;
  margin: 0 auto var(--sp-2);
  padding: 4px;
  flex: none;
  background: rgba(255,255,255,.92);
  border: 3px solid #6B6B6B;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #FFF, 0 4px 0 rgba(0,0,0,.2);
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  grid-auto-rows: var(--cell);
  gap: 3px;
}
.mc__slot {
  background: #F2F2F2;
  border: 2px solid #DADADA;
  border-radius: 3px;
  position: relative;
}

/* Предмет в слоте */
.mc-item {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform .18s var(--ease-out), opacity .2s linear, filter .2s linear;
  will-change: transform;
}
.mc-item svg { width: 78%; height: 78%; }
.mc-item.is-spent { filter: grayscale(1) brightness(.65); opacity: 0; transform: scale(.7); }

/* Счётчик прочности кирки */
.mc-item__dur {
  position: absolute; right: 1px; bottom: 0;
  min-width: 14px; height: 14px; padding: 0 3px;
  display: grid; place-items: center;
  background: #1C2333; color: #fff;
  font-size: 10px; font-weight: 900; line-height: 1;
  border: 1px solid #000;
  border-radius: 2px;
  text-shadow: 1px 1px 0 #000;
}
.mc-item__dur.is-low { background: #B4341F; }

/* Летящий предмет — живёт поверх всей сцены */
.mc-flyer {
  /* Точка отсчёта — левый верхний угол сцены: координаты приходят
     из offsetLeft/offsetTop, а не из экранных прямоугольников. */
  position: absolute; z-index: 20;
  left: 0; top: 0;
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  pointer-events: none;
  will-change: transform;
}
.mc-flyer svg { width: 82%; height: 82%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
/*
 * Удар анимируется ВНУТРИ рамки предмета, а не самой рамкой.
 *
 * Раньше keyframes переписывали transform всего элемента — того самого,
 * в котором лежат координаты полёта. Кирка на время удара прыгала в
 * левый верхний угол и возвращалась: это и выглядело как моргание.
 */
.mc-flyer.is-hitting > *:not(.mc-item__dur) {
  animation: mc-hit .18s ease-in-out;
}

@keyframes mc-hit {
  /* Сначала замах вверх и назад, потом резкий удар вниз — так движение
     читается даже при уменьшенной сцене. Прежние 9 пикселей без замаха
     были почти незаметны. */
  0%   { transform: translateY(-8px) rotate(24deg); }
  35%  { transform: translateY(-10px) rotate(30deg); }
  60%  { transform: translateY(14px) rotate(-22deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── Поле блоков ───────────────────────────────────────────── */

/*
 * Поле и призы под ним — одна сетка одинаковой ширины, выровненная
 * по центру экрана. Раньше justify-content не задавался, и на широком
 * экране сетка прижималась к краю: колонки уезжали вбок относительно
 * шахты и панели.
 */
.mc__field {
  position: relative; z-index: 3;
  width: fit-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  justify-content: center;
  gap: 0;
}
/* Без зазора: блоки в шахте лежат вплотную */
.mc__col { display: flex; flex-direction: column; }

/*
 * Блок колонки.
 *
 * Блок — плоский квадрат лицевой грани. У верхнего блока колонки
 * сверху лежит развёрнутая верхняя грань: получается вид «сверху
 * и сбоку», без изометрических наложений между соседями.
 */
.mc-block {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  transition: transform .12s ease-out, opacity .22s linear;
}

/* Верхняя грань выходит за границы блока — не обрезаем её */
.mc-block.is-top { overflow: visible; z-index: 2; }
.mc-block svg { width: 100%; height: 100%; display: block; }

/*
 * Куб внутри блока. Картинка позиционируется по низу, поэтому у
 * обычных блоков верхняя грань просто уходит за край и не видна,
 * а у верхнего влезает целиком.
 */
.mc-cube {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

/*
 * Верхняя грань. Лежит НАД блоком, поэтому у верхнего блока колонки
 * снят overflow — иначе она обрезалась бы по его границе.
 */
.mc-cube__top {
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: calc(var(--cell) * .25);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
.mc-block.is-shake { animation: mc-shake .16s ease-in-out; }
@keyframes mc-shake {
  0%,100% { transform: translateX(0); }
  30%     { transform: translateX(-2px); }
  70%     { transform: translateX(2px); }
}
.mc-block.is-gone { opacity: 0; transform: scale(.72) translateY(-6px); }

/* Трещины поверх блока — чем меньше прочности, тем гуще */
.mc-block__crack {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity .1s linear;
  pointer-events: none;
}

/* ── Призы под колонками ───────────────────────────────────── */

.mc__prizes {
  position: relative; z-index: 3;
  width: fit-content;
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  justify-content: center;
  gap: 1px;
}
.mc-prize {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 3px 1px;
  transition: transform .25s var(--ease-out), filter .25s linear;
}
/*
 * Карточка приза.
 *
 * Тёмная полупрозрачная плашка на светлом небе давала ровно тот серый
 * налёт, из-за которого экран выглядел тусклым. Теперь это светлая
 * карточка с мягкой тенью — подарок на ней читается, а сцена остаётся
 * дневной.
 */
.mc-prize__art {
  width: calc(var(--cell) - 10px); height: calc(var(--cell) - 10px);
  display: grid; place-items: center;
  font-size: calc(var(--cell) * .46); line-height: 1;
  background: linear-gradient(180deg, #FFFFFF, #EAF2F8);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(23,54,84,.18), 0 6px 14px rgba(23,54,84,.18);
}
.mc-prize__art img { width: 88%; height: 88%; object-fit: contain; }
.mc-prize__val {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px;
  background: linear-gradient(180deg, #FFD84D, #F5B01E);
  color: #3A2600;
  font-size: 10px; font-weight: 900;
  border: none; border-radius: 999px;
  box-shadow: 0 2px 0 rgba(122,74,0,.35);
  white-space: nowrap;
}
.mc-prize__val svg { width: 9px; height: 9px; }
.mc-prize.is-won { transform: scale(1.14) translateY(-4px); }
.mc-prize.is-won .mc-prize__art {
  border-color: #FFD84D;
  box-shadow: 0 0 0 2px #FFD84D, 0 0 22px rgba(255,216,77,.85);
  background: rgba(255,216,77,.25);
}
.mc-prize.is-lost { filter: grayscale(1) brightness(.6); }

/* ── Земля и нижняя панель ─────────────────────────────────── */

/*
 * Земля под сценой.
 *
 * Собрана из тех же 16×16, что и блоки поля: сверху лента травы,
 * ниже — земля в два ряда. Раньше здесь был градиент в три полоски,
 * и он выбивался из пиксельного стиля всего остального.
 */
.mc__ground {
  position: relative; z-index: 2;
  align-self: stretch;
  /* margin-top: auto убран: он прижимал землю к низу поверх ряда
     призов, когда сцена оказывалась выше расчётной. */
  height: 48px;
  background-image:
    url('../assets/mc/grass.png'),
    url('../assets/mc/dirt.png');
  background-repeat: repeat-x, repeat;
  background-size: 24px 24px, 24px 24px;
  background-position: left top, left 24px;
  image-rendering: pixelated;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18);
}

.mc__bar {
  position: relative; z-index: 6;
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px var(--sp-3);
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));
  /* Панель лежит на земле, поэтому тёмная подложка с коричневым
     подтоном, а не холодный синий блок поверх пейзажа. */
  background: linear-gradient(180deg, rgba(58,38,20,.86), rgba(38,24,12,.96));
  border-top: 3px solid rgba(0,0,0,.35);
  border-top: 2px solid rgba(255,255,255,.12);
}
.mc__stat { text-align: center; }
.mc__stat b { display: block; font-size: 9px; letter-spacing: .1em; color: var(--text-mute); text-transform: uppercase; }
.mc__stat span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-body); font-weight: 900;
}
.mc__stat svg { width: 13px; height: 13px; color: var(--gold); }

/* Кнопка прокрута со счётчиком */
.mc__spin {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2F7BFF, #14428F);
  border: 3px solid rgba(255,255,255,.28);
  box-shadow: var(--glow-blue), inset 0 -4px 10px rgba(0,0,0,.4);
  font-size: 30px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
  transition: transform .12s var(--ease);
}
.mc__spin:active:not(:disabled) { transform: scale(.94); }
.mc__spin:disabled { opacity: .45; box-shadow: none; }
.mc__spin.is-busy { animation: mc-pulse .9s ease-in-out infinite; }
@keyframes mc-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Текущая ставка — выбирается панелью режимов выше */

/* ── Выбор режима прямо на экране ──────────────────────────── */

/* Раньше выбор ставки открывался поверх слота и закрывал собой поле:
   игрок выбирал тариф вслепую. Теперь панель живёт под полем, поле
   и призы видны сразу, а на время раунда панель убирается. */
.mc__modes {
  position: relative; z-index: 6;
  align-self: stretch;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) 0;
  /* В тон нижней панели: обе стоят на земле */
  background: linear-gradient(180deg, rgba(58,38,20,.78), rgba(48,31,16,.92));
}
.mc__modes.is-hidden { display: none; }

.mc__modes-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.mc__mode {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--sp-2) 2px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  transition: transform .12s var(--ease), border-color .18s var(--ease);
}
.mc__mode:active { transform: scale(.95); }
.mc__mode.is-active { border-color: var(--blue-500); box-shadow: var(--glow-blue-sm); }
.mc__mode b {
  display: flex; align-items: center; gap: 3px;
  font-size: var(--fs-body); font-weight: 900;
}
.mc__mode b svg { width: 12px; height: 12px; color: var(--gold); }
.mc__mode span {
  display: flex; align-items: center; gap: 2px;
  font-size: 9px; color: var(--text-mute); white-space: nowrap;
}
.mc__mode span svg { width: 8px; height: 8px; color: var(--gold); }
.mc__mode.is-active span { color: var(--text-dim); }

.mc__play {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; font-size: var(--fs-body); font-weight: 900;
}
.mc__play svg { width: 15px; height: 15px; }
.mc__play:disabled { opacity: .55; }

/* Кнопка правил в шапке — на месте бывшей «Играть» */
.mc__rules {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--stroke); font-weight: 700; font-size: var(--fs-xs);
}
.mc__rules:active { transform: translateY(1px); }
.mc__rules svg { width: 14px; height: 14px; }

/* Призы-заглушки до покупки: суммы настоящие, для выбранной ставки */
.mc-prize.is-demo { opacity: .55; }

/* Итог раунда */
.mc-result { text-align: center; }
.mc-result__sum { font-size: 34px; font-weight: 900; color: var(--gold); }

/* ── Текстуры из PNG ───────────────────────────────────────── */

/* Пиксель-арт нельзя сглаживать: браузер по умолчанию мылит
   при масштабировании, из-за чего 16×16 превращается в кашу. */
.mc-tex {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  -webkit-user-drag: none;
}
.mc-block .mc-tex { object-fit: fill; }


/* ── Итог раунда ───────────────────────────────────────────── */

/*
 * Карточка поверх сцены. Голубая, в тон неба: тёмная плашка посреди
 * дневного пейзажа выглядела как ошибка загрузки.
 */
.mc-result {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: var(--sp-4);
  background: rgba(12, 40, 66, .45);
  backdrop-filter: blur(2px);
  animation: fade-in .18s var(--ease) both;
}

.mc-result__card {
  width: 100%; max-width: 320px;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #DCEEFB, #B9DDF7);
  border: 3px solid #FFFFFF;
  box-shadow: 0 10px 30px rgba(10, 40, 70, .45);
  color: #123A5C;
  text-align: center;
}

.mc-result__title {
  font-size: var(--fs-lg); font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: var(--sp-3);
}

.mc-result__list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 40vh; overflow-y: auto;
  margin-bottom: var(--sp-3);
}
.mc-result__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.7);
  border-radius: var(--r-sm);
  text-align: left;
}
.mc-result__art { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.mc-result__art img { width: 100%; height: 100%; object-fit: contain; }
.mc-result__name { flex: 1; font-size: var(--fs-sm); font-weight: 700; }
.mc-result__price { font-size: var(--fs-sm); color: #3E6C93; white-space: nowrap; }

.mc-result__total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, #FFD84D, #F5B01E);
  border-radius: var(--r-md);
  color: #3A2600; font-weight: 900;
  margin-bottom: var(--sp-3);
}
.mc-result__total b { font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: 4px; }

.mc-result__empty {
  padding: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.5; color: #2C5878;
}

.mc-result__actions { display: flex; gap: var(--sp-2); }
.mc-result__actions .btn { flex: 1; }


/* ── Изометрия: разрушение и инструменты ───────────────────── */

/*
 * Разрушение в два шага: короткий треск, затем растворение.
 * Мгновенное исчезновение выглядело как пропавшая картинка.
 */
.mc-block.is-cracking {
  /* Треск заметнее и дольше: на 0.2 с он проскакивал незамеченным */
  animation: mc-crack .3s steps(4) both;
}

/* Короткая вспышка по месту удара — вместо разлетающихся искр */
.mc-block.is-shake::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .55);
  animation: mc-flash .16s ease-out both;
  pointer-events: none;
}

@keyframes mc-flash {
  from { opacity: .8; }
  to   { opacity: 0; }
}

@keyframes mc-crack {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-2px, 1px) scale(1.03); }
  70%  { transform: translate(2px, -1px) scale(.98); }
  100% { transform: translate(0, 0) scale(1); }
}

/*
 * Разрушенный блок не просто гаснет, а схлопывается по высоте.
 *
 * Раньше он исчезал, оставляя пустое место, и колонки висели рваными
 * обрубками с дырами сверху. Теперь шахта укорачивается сверху и
 * остаётся цельной — низ всех колонок стоит на одной линии.
 */
/*
 * Разрушенный блок гаснет, оставаясь на своём месте.
 *
 * Схлопывание по высоте убирало дыру, но тянуло колонку: соседние
 * блоки уезжали вверх прямо во время игры, и следить за шахтой было
 * невозможно. Сетка должна стоять неподвижно — пробитая колонка
 * просто становится прозрачной сверху.
 */
.mc-block.is-gone {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .3s linear, transform .42s var(--ease-out);
  pointer-events: none;
}

/* Кирка в лотке и в полёте — тот же набор спрайтов */
.mc-tool {
  display: block;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Отработавшая кирка гаснет, а не пропадает рывком */
.mc-flyer.is-spending {
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity .3s linear;
}


/* ── Сцена: фиксированные координаты, масштаб под экран ────── */

/*
 * Внутри сцены всё считается в постоянных единицах, а под конкретный
 * экран она подгоняется одним transform. Это заметно надёжнее, чем
 * пересчитывать размер каждого элемента: пропорции не разъезжаются,
 * и подписи цен остаются читаемыми на телефоне.
 */
.mc__stage {
  position: relative; z-index: 3;
  width: max-content;
  margin: 0 auto;
  transform-origin: top center;
  will-change: transform;
}

/*
 * Демо — маленькая кнопка прямо под ставкой: показать механику без
 * денег. Крупной ей быть незачем, но и прятать в правила не стоит.
 */
.mc__demo-btn {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.mc__demo-btn:active { background: rgba(255,255,255,.28); }

/* Смена витрины: подарки гаснут и появляются новые */
.mc__prizes { transition: opacity .3s linear; }
.mc__prizes.is-fading { opacity: 0; }


/* ── Компактные панели: место нужно шахте ──────────────────── */

/*
 * Всё, что не сцена, ужимается по высоте. На телефоне тарифы, земля
 * и панель ставки занимали больше половины экрана, и шахте оставалось
 * так мало, что масштаб падал вдвое — цены призов становились
 * нечитаемыми.
 */
.mc__modes { padding: var(--sp-2) var(--sp-3) var(--sp-2); }
.mc__modes-row { gap: 6px; }

.mc__mode { padding: 6px 4px; }
.mc__mode b { font-size: var(--fs-sm); }
.mc__mode span { font-size: 9px; }

.mc__play { padding: 10px; font-size: var(--fs-body); }
.mc__demo-btn { padding: 7px; font-size: var(--fs-sm); }

.mc__spin { width: 58px; height: 58px; font-size: var(--fs-lg); }
.mc__stat b { font-size: 8px; }
.mc__stat span { font-size: var(--fs-sm); }

.mc__slot { border-radius: 4px; }


/*
 * Панели не сжимаются.
 *
 * В колонке flex по умолчанию ужимает детей, когда места не хватает —
 * земля с заданной высотой 48px схлопывалась в ноль, а сцена всё равно
 * не влезала. Теперь фиксированные части держат свой размер, а под
 * остаток подгоняется только масштаб сцены.
 */
.mc__top,
.mc__ground,
.mc__modes,
.mc__bar { flex: none; }

.mc__stage { flex: 0 1 auto; }


/* ── Летящий инструмент: заметнее на фоне блоков ───────────── */

/*
 * Кирка мельче блока и с тенью — иначе она сливается с рудой и
 * непонятно, где она вообще находится.
 */
.mc-flyer {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
}
.mc-flyer .mc-tool {
  width: 92%;
  height: 92%;
  margin: 4%;
}