/* VNISH GLOBAL · v83 · ANIM11 R04 «Real Miner Field» (Бивис, APPROVED 31.07)
 * Поле из 63 настоящих майнеров во второй двери, напротив одиночного майнера
 * ANIM08. Сцена живёт в iframe по требованию INTEGRATION-NOTES: её полноэкранные
 * стили не должны течь в сайт. Плашки лежат поверх поля и повторяют язык
 * плашек одиночника: -30% электричество, +25% хешрейт, теперь в масштабе флота.
 */

.route-door--fleet { position: relative; }

/* ссылка-подложка: iframe не должен перехватывать клик по двери */
.route-door-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  text-indent: -9999px;
  overflow: hidden;
}

.route-door--fleet .fleet-orchestration--wave { position: relative; }

.a11-field {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

/* сцена рисует поле от ширины своего документа: даём ей вдвое больший вьюпорт
   и ужимаем вдвое, тогда в кадр попадает плотное поле, а не четыре гиганта */
.a11-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 0;
  background: #020202;
  transform: scale(.5);
  transform-origin: 0 0;
  pointer-events: none;
}

.a11-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 6, .55) 0%, rgba(5, 6, 6, 0) 30%, rgba(5, 6, 6, 0) 58%, rgba(5, 6, 6, .92) 100%),
    linear-gradient(90deg, rgba(5, 6, 6, .5) 0%, rgba(5, 6, 6, 0) 24%, rgba(5, 6, 6, 0) 76%, rgba(5, 6, 6, .5) 100%);
}

/* плашки: тот же язык, что у одиночного майнера напротив, чтобы пара читалась
   симметрично. Типографика берётся из .hashrate-mark / .electricity-mark
   (v71-anim08.css), поэтому контейнеру нужен container-type для cqw */
.a11-marks {
  position: absolute;
  inset: 0;
  z-index: 3;
  container-type: inline-size;
  pointer-events: none;
}

.a11-mark {
  position: absolute;
  bottom: clamp(16px, 2.4cqw, 44px);
  display: grid;
  gap: 6px;
  color: #f0d69a;
  text-shadow: 0 6px 26px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .7);
}

.a11-mark > span {
  color: #b9a071;
  font-size: clamp(8px, 1cqw, 12px);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.a11-mark--hash { left: clamp(16px, 3cqw, 54px); }
.a11-mark--elec { right: clamp(16px, 3cqw, 54px); text-align: right; justify-items: end; }

/* типографика прописана явно: рядом с полем нет контекста .a08-root,
   в котором живут исходные правила одиночной сцены */
.a11-marks .hashrate-mark,
.a11-marks .electricity-mark {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #f4dda4;
  font-family: "Onest", Arial, sans-serif;
  font-size: clamp(28px, 8cqw, 62px);
  font-style: normal;
  line-height: .84;
}

.a11-marks .hashrate-mark span,
.a11-marks .electricity-mark span {
  color: #d8be86;
  font-size: .3em;
  font-weight: 820;
  line-height: .9;
  letter-spacing: .04em;
}

.a11-marks .hashrate-mark strong,
.a11-marks .electricity-mark strong {
  font-size: 1em;
  font-weight: 870;
  line-height: .82;
}

/* на карточке 02 «Exact identity» плашки живут в том же виде, но мельче:
   сцена там втрое меньше двери */
.a11-marks--stack .hashrate-mark,
.a11-marks--stack .electricity-mark { font-size: clamp(17px, 5cqw, 30px); }

/* на карточке колесо занимает центр, а снизу идёт плашка FREE OF CHARGE:
   марки уходят в верхние углы сцены */
.a11-marks--stack .a11-mark {
  top: 2%;
  bottom: auto;
}
.a11-marks--stack .a11-mark--hash { left: 2%; }
.a11-marks--stack .a11-mark--elec { right: 2%; }

/* Мобильный: слот волны на телефоне узкий (40% справа) - для поля майнеров это
   щель. Внутри второй двери и только там слот становится нормальной полосой,
   а сцена получает втрое больший вьюпорт, чтобы в кадр попало поле, а не два
   корпуса крупным планом. */
@media (max-width: 900px) {
  .route-door--fleet .fleet-orchestration--wave {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    translate: none;
    width: 100%;
    height: clamp(190px, 46vw, 260px);
    margin: 2px 0 16px;
  }
  .a11-frame {
    width: 300%;
    height: 300%;
    transform: scale(.3333);
  }
  .a11-mark { bottom: 12px; }
  .a11-mark--hash { left: 12px; }
  .a11-mark--elec { right: 12px; }
}

/* ================= Сцена парка: срез верха центрального столба =================
   Приказ шефа 31.07: столб должен подниматься над третьим дальним майнером
   лишь наполовину от прежнего. Фон в файле уже вырезан, поэтому режем маской,
   а не заливкой: никакого прямоугольника поверх сцены не появляется. */
.vgo-array .mf--sovereign-array {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 11%, #000 16%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0, transparent 11%, #000 16%, #000 100%) !important;
}