.archetype-carousel {
  --arc-card-width: clamp(165px, 50cqw, 225px);
  --arc-gold: var(--gold-fill, linear-gradient(105deg, #967023 0%, #e9c866 23%, #fff1ab 48%, #d7b04d 74%, #a67c29 100%));
  position: relative;
  container-type: inline-size;
  width: 100%;
  margin-top: 12px;
  outline: none;
}

.archetype-carousel-viewport {
  position: relative;
  width: calc(100% + 36px);
  height: calc(var(--arc-card-width) * 1.3333 + 108px);
  margin-inline: -18px;
  overflow: clip;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.archetype-carousel-viewport.is-dragging { cursor: grabbing; }

.arc-card {
  position: absolute;
  top: 35px;
  left: 50%;
  width: var(--arc-card-width);
  margin: 0;
  transform-origin: 50% 85%;
  transform: translate(-50%, 0) translate3d(var(--arc-x, 0px), var(--arc-y, 0px), 0) rotate(var(--arc-rotation, 0deg)) scale(var(--arc-scale, 1));
  opacity: var(--arc-opacity, 0);
  z-index: var(--arc-z, 1);
  will-change: transform;
  pointer-events: none;
}

.arc-card:first-child { --arc-opacity: 1; }
.arc-card.is-visible { pointer-events: auto; }

.arc-card-visual {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: visible;
}

.arc-card { --mist-tone: 110, 173, 226; }
.arc-card[data-archetype-name="МУЗА"] { --mist-tone: 169, 136, 202; }
.arc-card[data-archetype-name="ШУТ"] { --mist-tone: 177, 85, 107; }
.arc-card[data-archetype-name="ВЕДУЩАЯ"] { --mist-tone: 211, 153, 82; }
.arc-card[data-archetype-name="ГЕРОИНЯ"] { --mist-tone: 224, 186, 93; }
.arc-card[data-archetype-name="ХАМЕЛЕОН"] { --mist-tone: 67, 211, 217; }
.arc-mist { position:absolute; inset:-8% -25% -4%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse,rgba(var(--mist-tone),.6),rgba(var(--mist-tone),.2) 40%,transparent 70%); mask-image:radial-gradient(ellipse,#000 30%,transparent 70%); }
.arc-mist svg { width:100%; height:100%; opacity:.65; filter:blur(3px); }
.arc-card-visual img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.arc-card-visual .arc-expert {display:block;width:100%;height:100%;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 92%,transparent 100%)}
.arc-card-visual .portrait-placeholder { inset: 0 0 0 0; width: 100%; height: 100%; opacity: .9; mask-image: none; }
.arc-card-visual .portal { inset: 22% 0 auto; height: 72%; width: 100%; }
.arc-card-visual .slot-index { display: none; }

.arc-card-nameplate {
  position: relative;
  width: 90%;
  min-height: calc(44px + clamp(4.8px, 1.44cqw, 6.4px));
  display: grid;
  align-items: center;
  margin: -14px auto 0;
  padding: 8px 8px 8.667px;
  border: 1px solid #d8f9ff;
  border-radius: 4px;
  clip-path: polygon(0 0,10% 1.5%,25% 3.5%,50% 5%,75% 3.5%,90% 1.5%,100% 0,100% 100%,90% 98.5%,75% 96.5%,50% 95%,25% 96.5%,10% 98.5%,0 100%);
  background: linear-gradient(145deg, #ffffff, #e5f6ff);
  box-shadow: 0 8px 24px #13639124, inset 0 1px 0 #ffffff;
  color: var(--navy, #070f36);
  text-align: center;
}

.arc-card-title,
.arc-card-title h3 {
  margin: 0;
  font-family: Oswald, Manrope, sans-serif;
  font-size: clamp(22px, 5.8cqw, 27px);
  line-height: 1.14;
  letter-spacing: -.4px;
  text-align: center;
}

.arc-card-select { position: absolute; inset: 0; z-index: 4; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.arc-card.is-active .arc-card-select { cursor: grab; }

.archetype-carousel-navigation {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -12px;
}

.archetype-carousel .carousel-control {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid #ffeb9e;
  border-radius: 50%;
  background: var(--arc-gold);
  color: #4f3711;
  box-shadow: inset 0 1px 2px #fff7cc, 0 3px 9px #92722130;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}

.archetype-carousel .carousel-control svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.archetype-carousel .carousel-control-prev svg { transform: rotate(180deg); }
.archetype-carousel .carousel-control:hover { filter: brightness(1.08); transform: translateY(-1px); }
.archetype-carousel .carousel-control:active { transform: translateY(1px); }
.archetype-carousel-dots { display: flex; align-items: center; justify-content: center; }
.archetype-carousel .carousel-dot { display: grid; place-items: center; width: 25px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.archetype-carousel .carousel-dot span { width: 7px; height: 7px; border: 1px solid #b48a32; border-radius: 50%; background: var(--arc-gold); opacity: .55; transition: transform .2s, opacity .2s; }
.archetype-carousel .carousel-dot[aria-current="true"] span { opacity: 1; transform: scale(1.65); box-shadow: 0 0 0 3px #fbdda755; }
.archetype-carousel:focus-visible,
.archetype-carousel button:focus-visible { outline: 3px solid #197daa; outline-offset: 4px; }
.archetype-carousel-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 350px) {
  .archetype-carousel-navigation { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-card { will-change: auto; }
  .archetype-carousel button,
  .archetype-carousel .carousel-dot span { transition: none; }
}

@media print {
  .archetype-carousel-viewport { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; height: auto; width: 100%; margin: 0; overflow: visible; }
  .arc-card { position: relative; top: auto; left: auto; width: 100%; transform: none; opacity: 1; }
  .archetype-carousel-navigation { display: none; }
}

/* Единый масштаб всех названий: короткие слова не растягиваем. */
.arc-label-art{display:block;width:100%;height:auto;overflow:hidden;mix-blend-mode:multiply}


.arc-card-title,.arc-card-title h3{font-family:'Russo One',Manrope,sans-serif;font-weight:400;font-size:clamp(12px,3.6cqw,16px);line-height:1.2;letter-spacing:-.35px;text-transform:uppercase;white-space:nowrap}

/* Статичная дымка не пересчитывает SVG fractalNoise во время свайпа. */
.arc-mist svg{display:none}
.arc-mist{background:radial-gradient(ellipse at 30% 55%,rgba(var(--mist-tone),.38),transparent 56%),radial-gradient(ellipse at 70% 40%,rgba(var(--mist-tone),.3),transparent 60%);filter:blur(7px)}
.arc-card:not(.is-visible){visibility:hidden;will-change:auto}
.arc-card.is-visible{will-change:transform,opacity}
.arc-card-select{touch-action:pan-y}

/* Прежний fractalNoise заранее растеризован: фактура остаётся, GPU-фильтр не нужен. */
.arc-mist{background:radial-gradient(ellipse,rgba(var(--mist-tone),.6),rgba(var(--mist-tone),.2) 40%,transparent 70%);filter:none}
.archetype-carousel.effects-ready .arc-mist:after{content:'';position:absolute;inset:0;background-image:var(--smoke-texture);background-size:100% 100%;opacity:.65;pointer-events:none}