/* Карточки повторяют привычную структуру HiTech:
   .card-container > .card > текст + изображение + .grid
   и .card-big > текст + изображение + .grid. */

/* Браузер не рисует секции вне экрана — дешёвый аналог виртуализации для лендинга. */
main > .theme-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 820px;
}

.theme-wrapper > .theme-text {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}

.card-container {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: 1.5rem;
  padding: 0.75rem 0 1.1rem;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  scrollbar-width: none;
}

@media (min-width: 981px) {
  .theme-section:has(> .card-big, > .card-container) {
    padding-inline: 4rem;
  }

  .card-container:not(.three) {
    max-width: 79rem;
    margin-right: auto;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
}

@media (max-width: 980px) {
  .card-container {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
}

.card-rail {
  display: flex;
  gap: inherit;
  width: max-content;
  flex: 0 0 auto;
}

/* Топ игроков / команда: как в HiTech — по центру, без горизонтального скролла. */
.card-container.three {
  width: auto;
  max-width: 63rem;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 0;
  flex-flow: wrap;
  justify-content: center;
  align-items: stretch;
  overflow: visible;
  scroll-snap-type: none;
}

.card-container::-webkit-scrollbar {
  display: none;
}

.card,
.card-big {
  isolation: isolate;
  transform: none;
  opacity: 1;
  border: 1px solid var(--stroke);
  background: rgba(4, 8, 16, 0.62);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* Big-card: сетка как есть, но обрезаем по скруглению — не торчит справа/сверху/снизу. */
.card-big {
  overflow: hidden;
}

.card::after,
.card-big::after {
  display: none;
}

/* SVG встроены, чтобы маски работали и при открытии через file://. */
.card {
  --card-traces: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20184%20192'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='.9'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cg%20transform='translate%2864%29'%3E%3Cpath%20d='M18-4V20L57%2059H88'/%3E%3Cpath%20d='M39-4V16L67%2044H104'/%3E%3Cpath%20d='M61-4V12L86%2037H115'/%3E%3C/g%3E%3C/g%3E%3Cg%20fill='white'%3E%3Cg%20transform='translate%2864%29'%3E%3Ccircle%20cx='88'%20cy='59'%20r='2'/%3E%3Ccircle%20cx='104'%20cy='44'%20r='2'/%3E%3Ccircle%20cx='115'%20cy='37'%20r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --card-traces-bottom: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2078'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='1.15'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M8%2080V54H24V36'/%3E%3Cpath%20d='M20%2080V48H34V26'/%3E%3C/g%3E%3Cg%20fill='white'%3E%3Ccircle%20cx='24'%20cy='36'%20r='2.1'/%3E%3Ccircle%20cx='34'%20cy='26'%20r='2.1'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  display: flex;
  flex: 0 0 23rem;
  width: 23rem;
  max-width: 23rem;
  min-height: 12rem;
  border-radius: 3rem;
  align-items: center;
  justify-content: space-between;
  scroll-snap-align: start;
  overflow: visible;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--card-accent) 9%, transparent), transparent 48%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 46%),
    #050912;
  box-shadow: inset 0 0 0.9rem color-mix(in srgb, var(--card-accent) 5%, transparent);
}

.card:nth-child(3n + 2) {
  --card-traces: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20184%20192'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='.9'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cg%20transform='translate%2864%29'%3E%3Cpath%20d='M21-4V19L51%2049H98'/%3E%3Cpath%20d='M43-4V14L69%2040H111'/%3E%3Cpath%20d='M67-4V12L85%2030H117'/%3E%3C/g%3E%3C/g%3E%3Cg%20fill='white'%3E%3Cg%20transform='translate%2864%29'%3E%3Ccircle%20cx='98'%20cy='49'%20r='2'/%3E%3Ccircle%20cx='111'%20cy='40'%20r='2'/%3E%3Ccircle%20cx='117'%20cy='30'%20r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.card:nth-child(3n) {
  --card-traces: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20184%20192'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='.9'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cg%20transform='translate%2864%29'%3E%3Cpath%20d='M24-4V18L60%2054H92'/%3E%3Cpath%20d='M46-4V14L74%2040H108'/%3E%3Cpath%20d='M68-4V10L90%2032H118'/%3E%3C/g%3E%3C/g%3E%3Cg%20fill='white'%3E%3Cg%20transform='translate%2864%29'%3E%3Ccircle%20cx='92'%20cy='54'%20r='2'/%3E%3Ccircle%20cx='108'%20cy='40'%20r='2'/%3E%3Ccircle%20cx='118'%20cy='32'%20r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --card-traces-bottom: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2078'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='1.15'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpath%20d='M6%2080V58H18V42'/%3E%3Cpath%20d='M16%2080V50H30V32'/%3E%3Cpath%20d='M28%2080V64'/%3E%3C/g%3E%3Cg%20fill='white'%3E%3Ccircle%20cx='18'%20cy='42'%20r='2.1'/%3E%3Ccircle%20cx='30'%20cy='32'%20r='2.1'/%3E%3Ccircle%20cx='28'%20cy='64'%20r='2.1'/%3E%3C/g%3E%3C/svg%3E");
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.55rem;
  border-radius: inherit;
  filter: blur(0.5rem);
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 50% at 6% 2%, color-mix(in srgb, var(--card-accent) 13%, transparent), transparent 90%),
    radial-gradient(ellipse 32% 50% at 94% 98%, color-mix(in srgb, var(--card-accent) 13%, transparent), transparent 90%);
}

/* Содержимое обрезается отдельно от внешнего свечения карточки. */
.card-content {
  display: flex;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  border-radius: inherit;
  overflow: hidden;
}

.card:hover {
  transform: none;
}

.card-text-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 12rem;
  padding: 1.5rem 0.4rem 1.5rem 1.7rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.55rem;
}

.card-title {
  margin: 0;
  color: #f4f8ff;
  font-family: "Ruberoid", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
}

.card-title span,
.card-big .theme-title span {
  display: block;
  color: var(--card-accent, var(--cyan));
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: none;
}

.card-container .card:nth-child(5n + 1) {
  --card-accent: var(--color-x4);
  border-color: var(--border-x4);
}

.card-container .card:nth-child(5n + 2) {
  --card-accent: var(--color-x16);
  border-color: var(--border-x16);
}

.card-container .card:nth-child(5n + 3) {
  --card-accent: var(--color-x64);
  border-color: var(--border-x64);
}

.card-container .card:nth-child(5n + 4) {
  --card-accent: var(--color-x256);
  border-color: var(--border-x256);
}

.card-container .card:nth-child(5n + 5) {
  --card-accent: var(--color-x512);
  border-color: var(--border-x512);
}

.card-text {
  max-width: 10rem;
  margin: 0;
  color: var(--muted);
  font-family: "Ruberoid", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
}

.card-image-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-self: flex-end;
  width: auto;
  height: auto;
  margin-top: auto;
  margin-left: auto;
  margin-right: -1.35rem;
  margin-bottom: 0.15rem;
  align-items: flex-end;
  justify-content: flex-end;
}

.card-image-wrapper::before {
  display: none;
}

.card .card-image,
.card .card-image.item-icon {
  position: relative;
  z-index: 2;
  width: 9rem;
  height: 9rem;
  max-width: 9rem;
  max-height: 9rem;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45));
  overflow: visible;
  transform: translateX(12%) rotate(-18deg);
  transform-origin: 70% 70%;
}

.card-big {
  position: relative;
  display: flex;
  width: min(100%, 72rem);
  max-width: 72rem;
  margin-right: auto;
  margin-left: auto;
  min-height: 27rem;
  padding: 3rem 5rem;
  border-radius: 6rem;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.feature-section .card-big {
  --card-accent: var(--color-x256);
  border-color: var(--border-x256);
}

.energy-section .card-big {
  --card-accent: var(--color-x4);
  border-color: var(--border-x4);
}

.card-text-wrapper-big {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(100%, 33rem);
  padding: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}

.card-big .theme-title {
  width: auto;
  max-width: 31rem;
  margin: 0;
  color: #f4f8ff;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
}

/* Подпись («Подсистема …») — снова в потоке заголовка */
.card-big .theme-title .tag {
  position: static;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.15rem;
  padding: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  transform: none;
}

.card-big .theme-text {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

.card-image-wrapper-big {
  position: relative;
  z-index: 3;
  display: grid;
  flex: 0 1 28rem;
  width: min(42%, 28rem);
  min-width: 16rem;
  min-height: 20rem;
  place-items: center;
}

.card-image-wrapper-big::before {
  display: none;
}

.card-image-big {
  position: relative;
  z-index: 2;
  width: 23rem;
  height: 23rem;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5));
  animation: none;
}

.card-image-big.wide {
  width: 25rem;
  max-width: 100%;
}

/* Широкие GUI (сканер жил): не в квадрат 23×23 — иначе мело. */
.card-image-wrapper-big.media-gui {
  flex: 1 1 40rem;
  width: min(60%, 46rem);
  min-width: 24rem;
  min-height: 18rem;
  place-items: center;
}
.card-image-wrapper-big.media-gui > .card-image-big {
  width: min(100%, 44rem);
  height: auto;
  max-height: 28rem;
  image-rendering: auto;
}

/* Desktop: иконки как на HiTech (~23–26rem); широкие GUI — крупнее отдельно. */
@media (min-width: 981px) {
  .card-image-wrapper-big {
    flex: 0 1 30rem;
    width: min(44%, 32rem);
    min-width: 18rem;
    min-height: 22rem;
  }
  .card-image-big {
    width: 25rem;
    height: 25rem;
  }
  .card-image-big.wide {
    width: 28rem;
    max-width: 100%;
  }
  .card-image-wrapper-big.media-gui {
    flex: 1 1 48rem;
    width: min(60%, 50rem);
    min-width: 28rem;
    min-height: 20rem;
  }
  .card-image-wrapper-big.media-gui > .card-image-big {
    width: min(100%, 48rem);
    height: auto;
    max-height: 30rem;
    image-rendering: auto;
  }
  .card-image-wrapper-big.media-pair {
    flex: 0 1 32rem;
    width: min(46%, 34rem);
    min-height: 26rem;
    height: 26rem;
  }
  .card-image-wrapper-big.media-pair > .card-image-big:first-child {
    width: 24rem;
    height: 24rem;
  }
  .card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
    width: 17rem;
    height: 17rem;
  }
  .resources-card .card-image-wrapper-big.media-pair {
    flex-basis: 36rem;
    width: min(52%, 36rem);
    min-height: 30rem;
    height: 30rem;
  }
  .resources-card .card-image-wrapper-big.media-pair > .card-image-big:first-child {
    width: 29rem;
    height: 29rem;
  }
  .resources-card .card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
    width: 20rem;
    height: 20rem;
  }
  .card-image-wrapper-big.media-trio {
    flex: 0 1 32rem;
    width: min(46%, 34rem);
    min-height: 26rem;
  }
}

.card-image-wrapper-big.media-pair {
  display: grid;
  flex: 0 1 28rem;
  width: min(42%, 28rem);
  min-width: 16rem;
  min-height: 23rem;
  height: 23rem;
  place-items: center;
}

.card-image-wrapper-big.media-pair > .card-image-big:first-child {
  width: 22rem;
  height: 22rem;
  max-width: 80%;
  transform: translate(-10%, -3%) rotate(-5deg);
}

.card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
  position: absolute;
  z-index: 3;
  right: 3%;
  bottom: 0;
  width: 16rem;
  max-width: 57%;
  height: 16rem;
  margin: 0;
  transform: rotate(6deg);
}

.resources-card .card-image-wrapper-big.media-pair {
  flex-basis: 34rem;
  width: min(52%, 34rem);
  min-height: 27rem;
  height: 27rem;
}

.resources-card .card-image-wrapper-big.media-pair > .card-image-big:first-child {
  width: 27rem;
  height: 27rem;
}

.resources-card .card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
  width: 19rem;
  height: 19rem;
}

.card-image-wrapper-big.media-trio {
  display: flex;
  flex: 0 1 28rem;
  width: min(42%, 28rem);
  min-width: 16rem;
  min-height: 23rem;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

.card-image-wrapper-big.media-trio > .card-image-big {
  width: calc((100% - .5rem) / 3);
  height: 23rem;
  flex: 0 1 calc((100% - .5rem) / 3);
}

.card > .grid,
.card-big > .grid {
  --circuit-image: url("../images/pattern-left.svg");
  --circuit-position: 125% 50%;
  --circuit-size: 72% auto;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  opacity: 0.13;
  pointer-events: none;
  background: var(--card-accent, #9ca9bd);
  -webkit-mask: var(--circuit-image) var(--circuit-position) / var(--circuit-size) no-repeat;
  mask: var(--circuit-image) var(--circuit-position) / var(--circuit-size) no-repeat;
  mix-blend-mode: normal;
  filter: none;
}

.card > .grid {
  border-radius: inherit;
  overflow: hidden;
  opacity: 1;
  background: none;
  -webkit-mask: none;
  mask: none;
}

/* Дорожки начинаются за краем; фиксированная ширина не заводит их в текст. */
.card > .grid::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0.65rem;
  bottom: -1px;
  width: 11.5rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-accent) 48%, transparent),
    color-mix(in srgb, var(--card-accent) 28%, transparent) 40%,
    color-mix(in srgb, var(--card-accent) 55%, transparent));
  -webkit-mask: var(--card-traces) center / 100% 100% no-repeat;
  mask: var(--card-traces) center / 100% 100% no-repeat;
}

.card > .grid::after {
  content: "";
  position: absolute;
  right: 8.5rem;
  bottom: 0.15rem;
  width: 2.2rem;
  height: 4.4rem;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-accent) 40%, transparent),
    color-mix(in srgb, var(--card-accent) 62%, transparent));
  -webkit-mask: var(--card-traces-bottom) center / 100% 100% no-repeat;
  mask: var(--card-traces-bottom) center / 100% 100% no-repeat;
}

.card-big > .grid {
  overflow: hidden;
  border-radius: inherit;
  opacity: 1;
  background: none;
  -webkit-mask: none;
  mask: none;
}

.card-circuit {
  --circuit-top: -10%;
  --circuit-right: -12%;
  --circuit-width: 65%;
  --circuit-height: 120%;
  --circuit-aspect: auto;
  --circuit-transform: none;
  position: absolute;
  z-index: 1;
  top: var(--circuit-top);
  right: var(--circuit-right);
  width: var(--circuit-width);
  height: var(--circuit-height);
  aspect-ratio: var(--circuit-aspect);
  transform: var(--circuit-transform);
  overflow: visible;
  color: var(--card-accent, #9ca9bd);
  pointer-events: none;
}

@media (min-width: 681px) {
  /* Как раньше: высота карточки тянет сетку. Узкие — через fitCardCircuits без height-scale. */
  .card-big .card-circuit {
    --circuit-top: -22%;
    --circuit-right: -10%;
    --circuit-width: 64%;
    --circuit-height: 145%;
    --circuit-aspect: auto;
    --circuit-transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 100%);
  }

  .card-big.is-circuit-narrow .card-circuit {
    --circuit-top: 50%;
    --circuit-right: -8%;
    --circuit-width: 72%;
    --circuit-height: auto;
    --circuit-aspect: 522 / 540;
    --circuit-transform: translateY(-50%);
  }

  .card-big.is-circuit-tall:not(.is-circuit-narrow) .card-circuit {
    --circuit-right: -18%;
    --circuit-width: 70%;
  }
}

.card-circuit .pattern-lines {
  opacity: 0.34;
}

.card-circuit .pattern-signal {
  stroke: var(--card-accent, #9ca9bd);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 2px var(--card-accent, #9ca9bd)) drop-shadow(0 0 5px var(--card-accent, #9ca9bd));
}

.card-circuit .pattern-pulse {
  fill: var(--card-accent, #9ca9bd);
  filter: drop-shadow(0 0 2px var(--card-accent, #9ca9bd)) drop-shadow(0 0 5px var(--card-accent, #9ca9bd));
}

.card-big:not(.is-circuit-visible) .card-circuit .pattern-signal,
.card-big:not(.is-circuit-visible) .card-circuit .pattern-pulse {
  animation-play-state: paused;
}

/* Не паузим точку отдельно от линии — иначе рассинхрон на углах */
.card-circuit:not(.signals-ready) .pattern-signal,
.card-circuit:not(.signals-ready) .pattern-pulse {
  opacity: 0 !important;
}

.card-copy {
  flex-basis: 16.5rem;
  width: 16.5rem;
  max-width: 16.5rem;
  min-height: 7.5rem;
}

.card-copy .card-text-wrapper {
  width: 100%;
  max-width: none;
  padding: 1.45rem 1.2rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-copy .card-text {
  width: 100%;
  max-width: none;
}

.card-copy .card-title {
  font-size: 1.05rem;
  text-align: center;
}

@media (min-width: 981px) {
  .theme-title {
    font-size: 2.12rem;
    font-weight: 600;
  }

  .theme-title.large {
    font-size: 3.15rem;
  }

  .theme-wrapper > .theme-text {
    font-size: 1rem;
  }

  .card-title,
  .ranking-section .card-title,
  .team-cards .card-title {
    font-size: 1.08rem;
    font-weight: 600;
  }

  .card-text,
  .ranking-section .card-text,
  .team-cards .card-text {
    font-size: 0.8rem;
    font-weight: 500;
  }

  .card-big .theme-title {
    font-size: 2.65rem;
    font-weight: 600;
  }

  .card-big .theme-text {
    font-size: 1rem;
    font-weight: 500;
  }

  .card-copy .card-title {
    font-size: 1.12rem;
  }

  .card-copy .card-text {
    font-size: 0.84rem;
  }

  .card-text-wrapper {
    max-width: 14.5rem;
    padding: 2.15rem 1.15rem 2.15rem 2.35rem;
    gap: 0.8rem;
  }

  .card {
    flex-basis: calc((100% - 3rem) / 3);
    width: calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
    min-height: 13.5rem;
  }

  .card-big {
    width: min(100%, 79rem);
    max-width: 79rem;
    padding: 3.75rem 3rem;
  }

  .card-text-wrapper-big {
    padding: 2.6rem 1rem;
    gap: 1.25rem;
  }

  .card-copy .card-text-wrapper {
    padding: 2rem 1.75rem;
  }

  .ranking-section .card-top-player,
  .team-cards .card-top-player {
    padding: 1.85rem 1.35rem 2rem;
  }

  .card-container.card-container-copy {
    --copy-card: 18rem;
    width: min(100%, calc(3 * var(--copy-card) + 2 * 1.5rem));
    max-width: calc(3 * var(--copy-card) + 2 * 1.5rem);
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    gap: 1.25rem 1.5rem;
  }

  .card-container-copy .card-copy {
    flex: 0 0 var(--copy-card);
    width: var(--copy-card);
    max-width: var(--copy-card);
    min-height: 9.4rem;
  }
}

@media (max-width: 980px) {
  .card-container.card-container-copy {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .card-container-copy .card-copy {
    scroll-snap-align: start;
  }

  .card-container.is-carousel {
    scroll-snap-type: none;
    /* pan-y alone ломал горизонтальный жест в WebKit — нужен pan-x */
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Планшет / узкое окно: колонка как на мобилке, без webflow max-width: 85% */
  .theme-section:has(> .card-big, > .card-container) {
    padding-inline: 0.4rem;
  }

  .card-big {
    width: 100%;
    max-width: 100%;
    min-height: 34rem;
    padding: 2.25rem 0.95rem;
    border-radius: 4rem;
    flex-flow: column;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  .card-big .theme-title .tag {
    margin: 0 auto 0.95rem;
    font-size: 0.92rem;
    text-align: center;
  }

  .card-big-text-only {
    min-height: 24rem;
  }

  .card-image-wrapper-big {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 16rem;
  }

  .card-image-wrapper-big::before {
    width: 16rem;
    height: 16rem;
  }

  .card-image-big,
  .card-image-big.wide {
    width: 17rem;
    height: 17rem;
  }

  .card-image-wrapper-big.media-gui {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .card-image-wrapper-big.media-gui > .card-image-big {
    width: min(100%, 36rem);
    height: auto;
    max-height: 22rem;
  }

  .card-image-wrapper-big.media-pair {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 17rem;
    height: 17rem;
  }

  .card-image-wrapper-big.media-pair > .card-image-big:first-child {
    width: 16rem;
    height: 16rem;
    max-width: 80%;
  }

  .card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
    width: 12rem;
    height: 12rem;
    max-width: 57%;
  }

  .card-image-wrapper-big.media-trio {
    min-height: 15rem;
  }

  .card-image-wrapper-big.media-trio > .card-image-big {
    height: 15rem;
  }

  .card-text-wrapper-big {
    width: 100%;
    max-width: none;
    padding: 1.2rem 0.85rem;
    align-items: center;
    text-align: center;
  }

  .card-big .theme-title {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(1.05rem, 5.6vw, 1.55rem);
    letter-spacing: -0.02em;
    text-align: center;
    white-space: normal;
  }

  /* Акценты переносятся по словам, без nowrap-обрезки и съезда центра. */
  .card-big .theme-title > span,
  .card-big .theme-title .title-lead,
  .card-big .theme-title .title-accent {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center;
  }

  .card-big .theme-text {
    max-width: 28rem;
    margin-inline: auto;
    font-size: 0.88rem;
    text-align: center;
  }

  /* Текст не ужимаем — только длинные title (JS). Картинки карточки ниже. */
  .card-big .card-text-wrapper-big .theme-title {
    max-width: 100%;
    font-size: clamp(1.15rem, 5.8vw, 1.55rem);
    letter-spacing: -0.015em;
  }

  .card-image-wrapper-big {
    min-height: 12rem !important;
  }
  .card-image-big,
  .card-image-big.wide {
    width: min(14.5rem, 72vw) !important;
    height: min(14.5rem, 72vw) !important;
  }
  .card-image-wrapper-big.media-gui > .card-image-big {
    width: min(100%, 20rem) !important;
    height: auto !important;
    max-height: 12.5rem !important;
  }

  .card-circuit {
    top: 0;
    right: auto;
    left: 0;
    bottom: auto;
    width: 100%;
    height: min(16rem, 46%);
    aspect-ratio: auto;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .theme-wrapper {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    padding-left: calc(1.75rem - 5px);
    padding-right: calc(1.75rem - 5px);
  }

  .theme-title.large {
    font-size: 2.35rem;
  }

  .theme-wrapper > .theme-text {
    max-width: 36rem;
    font-size: 0.86rem;
  }

  .theme-section:has(> .locator-cards, > .resource-photo-grid, > .theme-wrapper) {
    padding-inline: 0.75rem;
  }

  .card-container {
    gap: 1rem;
    padding-bottom: 1rem;
  }

  .card {
    flex-basis: min(22rem, calc(100vw - 3rem));
    width: min(22rem, calc(100vw - 3rem));
    max-width: min(22rem, calc(100vw - 3rem));
    border-radius: 2.8rem;
  }

  .card-text-wrapper {
    padding: 1.45rem 0.55rem 1.45rem 1.45rem;
  }

  /* locator-cards mobile layout — см. блок после базового .locator-cards (каскад) */

  .card-tall {
    min-height: 15.5rem;
    border-radius: 2.8rem;
  }

  .card-tall .card-text-wrapper {
    max-width: none;
    padding: 1.5rem 1.4rem 0.65rem;
  }

  .card-tall .card-title {
    max-width: none;
    font-size: 0.95rem;
  }

  .card-tall .card-text {
    max-width: none;
    font-size: 0.75rem;
  }

  .locator-icon-wrap {
    min-height: 7.5rem;
  }

  .locator-icon {
    right: 0.35rem;
    bottom: 0.2rem;
    width: 7.25rem;
    height: 7.25rem;
  }

  .resource-photo-grid {
    width: calc(100% - 2.5rem);
    gap: 1.15rem;
  }

  .card-container.three {
    max-width: none;
    width: 100%;
    padding-inline: 0.75rem;
    gap: 1rem;
  }
}

.card-copy > .grid {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-container.card-container-copy {
    overflow-x: auto;
  }
}

@media (max-width: 680px) {
  .theme-wrapper {
    padding-left: calc(1.4rem - 5px);
    padding-right: calc(1.4rem - 5px);
  }

  .theme-wrapper > .theme-text {
    font-size: 0.78rem;
  }

  .changes-section {
    gap: 0.5rem;
  }

  .changes-section .theme-wrapper {
    margin-bottom: 0.5rem;
  }

  .card-container-copy {
    margin-top: 0;
  }

  .card-container {
    gap: 0.85rem;
    padding-bottom: 0.9rem;
  }

  .card {
    flex-basis: min(23rem, calc(100vw - 2.4rem));
    width: min(23rem, calc(100vw - 2.4rem));
    max-width: min(23rem, calc(100vw - 2.4rem));
    min-height: 12rem;
    border-radius: 2.6rem;
  }

  .card-text-wrapper {
    padding: 1.5rem 0.4rem 1.5rem 1.5rem;
    gap: 0.55rem;
  }

  .card-title {
    font-size: 0.85rem;
    font-weight: 500;
  }

  .card-text {
    max-width: 8.5rem;
    font-size: 0.7rem;
    font-weight: 400;
  }

  .card-image-wrapper {
    margin-right: -1rem;
    margin-bottom: 0.1rem;
  }

  .card .card-image,
  .card .card-image.item-icon {
    width: 8.5rem;
    height: 8.5rem;
    max-width: 8.5rem;
    max-height: 8.5rem;
  }

  .card-big {
    min-height: 34rem;
    padding: 1.75rem 0.8rem;
    border-radius: 3rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
  }

  .card-image-wrapper-big {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 14rem;
  }

  .card-image-wrapper-big::before {
    width: 14rem;
    height: 14rem;
  }

  .card-image-big,
  .card-image-big.wide {
    width: 14rem;
    height: 14rem;
  }

  .card-image-wrapper-big.media-gui {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .card-image-wrapper-big.media-gui > .card-image-big {
    width: min(100%, 22rem);
    height: auto;
    max-height: 14rem;
  }

  .card-text-wrapper-big {
    width: 100%;
    padding: 1.05rem 0.75rem;
    align-items: center;
    text-align: center;
  }

  .card-big .theme-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(1.05rem, 6vw, 1.4rem);
    letter-spacing: -0.02em;
    text-align: center;
  }

  .card-big .theme-title > span,
  .card-big .theme-title .title-lead,
  .card-big .theme-title .title-accent {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center;
  }

  .card-big .theme-title .tag {
    margin: 0 auto 0.85rem;
    font-size: 0.86rem;
  }

  .card-big .theme-text {
    max-width: 20rem;
    font-size: 0.84rem;
    text-align: center;
  }

  .card-big .card-text-wrapper-big .theme-title {
    max-width: 100%;
    font-size: clamp(1.1rem, 6.2vw, 1.45rem);
    letter-spacing: -0.015em;
  }

  .card-image-wrapper-big {
    min-height: 10.5rem !important;
  }
  .card-image-big,
  .card-image-big.wide {
    width: min(12.5rem, 68vw) !important;
    height: min(12.5rem, 68vw) !important;
  }
  .card-image-wrapper-big.media-gui > .card-image-big {
    width: min(100%, 18rem) !important;
    height: auto !important;
    max-height: 11rem !important;
  }

  .card-circuit {
    top: 0;
    right: auto;
    left: 0;
    bottom: auto;
    width: 100%;
    height: min(14rem, 46%);
    aspect-ratio: auto;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .card-copy {
    flex-basis: min(15rem, 74vw);
    width: min(15rem, 74vw);
    max-width: min(15rem, 74vw);
    min-height: 6.4rem;
  }

  .card-copy .card-text-wrapper {
    padding: 1.5rem;
  }
}

.mobile-card-circuit { display: none; }
@media (max-width: 680px) {
  .desktop-card-circuit { display: none; }
  .mobile-card-circuit {
    display: block;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 330;
    transform: none;
    overflow: visible;
  }
}

/* Accent rotation keeps each launch block distinct while staying in the same dark UI. */
.theme-section[data-accent] {
  --section-accent: #aa91ff;
}
.theme-section[data-accent="violet"] { --section-accent: #aa91ff; }
.theme-section[data-accent="gold"] { --section-accent: #f0c96b; }
.theme-section[data-accent="magenta"] { --section-accent: #d64d8c; }
.theme-section[data-accent="orange"] { --section-accent: #f29a5b; }
.theme-section[data-accent="amber"] { --section-accent: #dcb64e; }
.theme-section[data-accent="teal"] { --section-accent: #5dcab5; }
.theme-section[data-accent="cyan"] { --section-accent: #64cfe7; }
.theme-section[data-accent="blue"] { --section-accent: #76aaf5; }
.theme-section[data-accent="green"] { --section-accent: #9bcf77; }
.theme-section[data-accent="lime"] { --section-accent: #c8d96b; }
.theme-section[data-accent="rose"] { --section-accent: #d78ec7; }
.theme-section[data-accent="red"] { --section-accent: #ef797b; }
.theme-section[data-accent="copper"] { --section-accent: #db9870; }

.theme-section[data-accent] > .theme-wrapper .theme-title.large,
.theme-section[data-accent] .card-big .theme-title {
  color: var(--section-accent);
}

.locator-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  width: min(100% - 8rem, 75rem);
  margin: 1.5rem auto 0;
}

/* Tall-карточки: без JS card-rail. На узком — нативный горизонтальный скролл.
   Важно: эти правила ПОСЛЕ базового grid, иначе repeat(3) побеждает mobile. */
@media (max-width: 980px) {
  .locator-cards {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    max-width: none;
    margin: 1.25rem 0 0;
    padding: 0.35rem 0.5rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .locator-cards.is-carousel {
    scroll-snap-type: none;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .locator-cards::-webkit-scrollbar { display: none; }
  .locator-cards .card,
  .locator-cards .card-tall {
    flex: 0 0 min(16.5rem, 78vw);
    width: min(16.5rem, 78vw);
    max-width: min(16.5rem, 78vw);
    min-height: 15.5rem;
    scroll-snap-align: start;
  }
}

.card-tall {
  width: 100%;
  max-width: none;
  min-height: 0;
}

.card-tall .card-content {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.card-tall .card-text-wrapper {
  flex: none;
  width: auto;
  max-width: none;
}

.card-tall .card-title { max-width: calc(100% - 3rem); }
.card-tall .card-text { max-width: none; }

.card-tall > .grid::before {
  inset: auto auto 0 0;
  width: 11.5rem;
  height: 12rem;
  transform: rotate(180deg);
}

.card-tall > .grid::after {
  inset: 0 1.5rem auto auto;
  width: 2.2rem;
  height: 3.9rem;
  transform: rotate(180deg);
}

.locator-cards .card:nth-child(1) { --card-accent: #62c9b4; border-color: color-mix(in srgb, #62c9b4 48%, transparent); }
.locator-cards .card:nth-child(2) { --card-accent: #f0c96b; border-color: color-mix(in srgb, #f0c96b 48%, transparent); }
.locator-cards .card:nth-child(3) { --card-accent: #64cfe7; border-color: color-mix(in srgb, #64cfe7 48%, transparent); }

.locator-icon-wrap {
  position: relative;
  min-height: 9rem;
  margin-top: auto;
}

.locator-icon {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 9rem;
  height: 9rem;
  object-fit: contain;
  image-rendering: pixelated;
  transform: rotate(-18deg);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4));
}

.theme-section.feature-section[data-accent] .card-big {
  --card-accent: var(--section-accent);
  border-color: color-mix(in srgb, var(--section-accent) 48%, transparent);
  background:
    radial-gradient(ellipse at 8% 5%, color-mix(in srgb, var(--section-accent) 8%, transparent), transparent 48%),
    rgba(4, 8, 16, 0.72);
}

.ranking-section .top-avatar.shadow-x4 { filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--color-x4) 35%, transparent)); }
.ranking-section .top-avatar.shadow-x16 { filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--color-x16) 35%, transparent)); }
.ranking-section .top-avatar.shadow-x64 { filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--color-x64) 35%, transparent)); }
.ranking-section .top-avatar.shadow-x256 { filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--color-x256) 35%, transparent)); }
.ranking-section .top-avatar.shadow-x512 { filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--color-x512) 35%, transparent)); }

.card-container .card:nth-child(8n + 1) { --card-accent: #62c9b4; border-color: color-mix(in srgb, #62c9b4 48%, transparent); }
.card-container .card:nth-child(8n + 2) { --card-accent: #f0c96b; border-color: color-mix(in srgb, #f0c96b 48%, transparent); }
.card-container .card:nth-child(8n + 3) { --card-accent: #64cfe7; border-color: color-mix(in srgb, #64cfe7 48%, transparent); }
.card-container .card:nth-child(8n + 4) { --card-accent: #aa91ff; border-color: color-mix(in srgb, #aa91ff 48%, transparent); }
.card-container .card:nth-child(8n + 5) { --card-accent: #f29a5b; border-color: color-mix(in srgb, #f29a5b 48%, transparent); }
.card-container .card:nth-child(8n + 6) { --card-accent: #9bcf77; border-color: color-mix(in srgb, #9bcf77 48%, transparent); }
.card-container .card:nth-child(8n + 7) { --card-accent: #76aaf5; border-color: color-mix(in srgb, #76aaf5 48%, transparent); }
.card-container .card:nth-child(8n + 8) { --card-accent: #d78ec7; border-color: color-mix(in srgb, #d78ec7 48%, transparent); }

.rig-tiers .card:nth-child(2) {
  --card-accent: #eba4df;
  border-color: color-mix(in srgb, #eba4df 48%, transparent);
}

.resource-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: min(100% - 8rem, 75rem);
  margin: 2rem auto 0;
}

.resource-photo-grid img {
  display: block;
  width: 100%;
  height: clamp(14rem, 24vw, 23rem);
  border: 1px solid color-mix(in srgb, var(--section-accent) 32%, transparent);
  border-radius: 2rem;
  object-fit: cover;
}

@media (max-width: 680px) {
  .locator-cards {
    gap: 0.85rem;
    padding: 0.25rem 0.35rem 0.9rem;
  }

  .locator-cards .card,
  .locator-cards .card-tall {
    flex-basis: min(15.5rem, 82vw);
    width: min(15.5rem, 82vw);
    max-width: min(15.5rem, 82vw);
    min-height: 14.5rem;
    border-radius: 2.6rem;
  }

  .card-tall {
    min-height: 14.5rem;
    border-radius: 2.6rem;
  }

  .card-tall .card-text-wrapper {
    padding: 1.35rem 1.2rem 0.5rem;
  }

  .locator-icon-wrap {
    min-height: 7rem;
  }

  .locator-icon {
    right: 0.15rem;
    bottom: 0.1rem;
    width: 6.75rem;
    height: 6.75rem;
  }

  .resource-photo-grid {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 2rem);
    gap: 1rem;
  }

  .resource-photo-grid img { height: 14rem; border-radius: 1.25rem; }

  .card-image-wrapper-big.media-pair {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 15rem;
    height: 15rem;
  }

  .resources-card .card-image-wrapper-big.media-pair {
    min-height: 15rem;
    height: 15rem;
  }

  .resources-card .card-image-wrapper-big.media-pair > .card-image-big:first-child {
    width: 14.5rem;
    height: 14.5rem;
  }

  .resources-card .card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
    width: 10.5rem;
    height: 10.5rem;
  }

  .card-image-wrapper-big.media-pair > .card-image-big:first-child {
    width: 14.5rem;
    height: 14.5rem;
    max-width: 80%;
  }

  .card-image-wrapper-big.media-pair > .card-image-big.ae2-secondary {
    width: 10.5rem;
    height: 10.5rem;
    max-width: 57%;
  }

  .card-image-wrapper-big.media-trio {
    min-height: 13rem;
    gap: .15rem;
  }

  .card-image-wrapper-big.media-trio > .card-image-big {
    height: 13rem;
  }


}