@charset "UTF-8";
/* Generated by vite-plugin-svg-spritemap */
.blast-div {
  --bg:#0b0f14;
  --ink:#e7edf3;
  --muted:#9fb0c0;
  --accent:#43b1ff;
  --inj:#f35b44;
  --safe:#6ad17a;
  background: var(--bg);
  color: var(--ink);
  background: #212121;
  border: 0.0625rem solid #333;
  overflow-x: auto;
}

.blast-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1600/900;
  overflow: hidden;
  min-width: 100%;
}

/* Фоновые полосы (3 ряда) */
.band {
  position: absolute;
  inset: auto 0 auto 0;
  pointer-events: none;
}

.band--top {
  background: #f3c6c6;
}

.band--mid {
  background: #e9e6e2;
}

.band--bot {
  background: #efe0b8;
}

/* Левый rail */
.rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 15rem;
  height: 100%;
  pointer-events: none;
  text-align: left !important;
}
.rail span {
  text-transform: none;
  font-size: 0.875rem;
  color: #fff;
  font-weight: 400;
}
.rail__slice {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  min-width: 15rem;
  padding: 0.625rem;
}

.rail__slice--top {
  background: #c83a3a;
}

.rail__slice--mid {
  background: #999;
}

.rail__slice--bot {
  background: #e1b245;
}

/* Заголовки */
.chart-title {
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 0.02em;
}

.chart-sub {
  position: absolute;
  left: 0;
  top: 4.875rem;
  color: #cdcdcd;
  font-weight: 500;
  font-size: 1.375rem;
}

/* Ноты у рейла (всегда видимы) */
.rail-note {
  position: absolute;
  max-width: 12.5rem;
  left: 15.625rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  justify-content: center;
}

.rail-note .kicker {
  font: 700 0.625rem;
  color: #4e4e4e;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}

.rail-note h4 {
  margin: 0 0 0.125rem;
  color:#828282;
}

.rail-note p {
  margin: 0;
  color: #4e4e4e;
}

/* Колонные подложки (лёгкий тон) */
.col-bg {
  position: absolute;
  background: rgba(255, 255, 255, 0.22);
}

/* Карточка-«поповер» для колонки — всегда видима */
.col-note {
  position: absolute;
  background: #212121;
  border: 0.0625rem solid #333;
  border-radius: 0.125rem;
  padding: 0.625rem 0.4375rem;
  width: 7.5rem;
  max-width: 8.75rem;
  margin-right: -1.25rem;
  z-index: 99;
}

.col-note h5 {
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.col-note p {
  margin: 0;
  color: #c6d3de;
  font-size: 0.75rem;
}

/* Бейдж машины (картинка) */
.badge {
  position: absolute;
  width: 7.5rem;
  height: 3.75rem;
  object-fit: contain;
}

/* Логотипы в колонках */
.logos {
  position: absolute;
  display: grid;
  gap: 0.625rem;
  width: 5.625rem;
  transform: translateX(-50%);
}

.logos img {
  object-fit: contain;
}

/* Вес + гиря */
.weight {
  position: absolute;
  display: grid;
  place-items: center;
  width: 7.5rem;
}

.weight img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.weight .label {
  margin-top: 0.375rem;
  color: #cdcdcd;
  font-weight: 400;
  font-size: 0.75rem;
}

/* Подпись injuries/safe + вопросик */
.legend {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 0.625rem;
}

.legend .txt {
  font-weight: 800;
  font-size: 1.125rem;
}

.legend .txt.inj {
  color: var(--inj);
}

.legend .txt.safe {
  color: var(--safe);
}

.legend .q {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 62.4375rem;
  background: #0f1720;
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  color: #e7edf3;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Плавающий поповер для вопросиков */
.pop {
  position: absolute;
  min-width: 8.75rem;
  max-width: min(23.75rem, 92vw);
  background: #212121;
  color: var(--ink);
  border: 0.0625rem solid #333;
  border-radius: 0.125rem;
  padding: 0.625rem 0.625rem 0.75rem;
  box-shadow: 0 1.5rem 4.375rem rgba(0, 0, 0, 0.45);
  z-index: 99;
  font-size: 0.875rem;
}

.pop[hidden] {
  display: none;
}

.pop .title {
  margin: 0 0 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
}

.pop .body {
  color: #c6d3de;
  margin: 0;
}
.pop .body p {
  margin-bottom: 0.625rem;
  line-height: 1.3;
}

.pop .close {
  position: absolute;
  top: 0.375rem;
  right: 0.5rem;
  background: transparent;
  border: 0;
  color: #9fb0c0;
  font-size: 1.375rem;
  cursor: pointer;
}

@media (max-width: 82.5rem){
  .blast-canvas {
    min-width: 100rem;
  }
}

@media (max-width: 20em){
  .blast-div {
    padding-top: 1.5625rem;
  }
  .blast-div {
    padding-bottom: 1.5625rem;
  }
}

@media (min-width: 20em) and (max-width: 91.875em){
  .blast-div {
    padding-top: clamp( 1.5625rem , 0.34510869565rem  +  6.0869565217vw , 5.9375rem );
  }
  .blast-div {
    padding-bottom: clamp( 1.5625rem , 1.38858695651875rem  +  0.8695652174vw , 2.1875rem );
  }
}

@media (min-width: 91.875em){
  .blast-div {
    padding-top: 5.9375rem;
  }
  .blast-div {
    padding-bottom: 2.1875rem;
  }
}