/* ───────── Кнопка-плашка: декоративная рамка (button-frame) + заливка (#C03740 · 0.7) ───────── */
.btn-plaque {
  --w: 417;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(var(--w) * var(--u));
  aspect-ratio: 3 / 1;
  font-family: var(--font-text);
  font-weight: 600;
  /* единый размер подписи на всех плашках сайта */
  font-size: var(--fs-btn);
  color: var(--color-red);
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease);
}
.btn-plaque::before {
  /* заливка — слой «Vector», лежит под рамкой */
  content: '';
  position: absolute;
  inset: 25.2% 2.6% 28.6% 3.1%;
  background: url('../assets/images/decorations/next-fill.svg') center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: -2;
}
.btn-plaque::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/images/decorations/button-frame.webp') center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
.btn-plaque > span { display: block; width: 100%; padding: 0 9%; text-align: center; line-height: 1.05; text-box: trim-both cap alphabetic; transform: translateY(-2px); /* оптически чуть выше центра */ }
.btn-plaque--fill { color: var(--color-pink); }
.btn-plaque--fill::before { opacity: 1; }
.btn-plaque--ui { font-family: var(--font-ui); font-weight: 400; }
.btn-plaque--ui.btn-plaque--fill { color: var(--color-white); }
.btn-plaque:focus-visible { box-shadow: none; }
.btn-plaque:focus-visible > span { box-shadow: var(--focus); border-radius: 4px; }
@media (hover: hover) {
  .btn-plaque:not(:disabled):hover { transform: translateY(-2px); }
  .btn-plaque:not(.btn-plaque--fill):not(:disabled):hover::before { opacity: 0.18; }
}
.btn-plaque:active { transform: translateY(1px); }
.btn-plaque[aria-pressed='true'] { color: var(--color-pink); }
.btn-plaque[aria-pressed='true']::before { opacity: 1; }
.btn-plaque:disabled { cursor: default; }

/* ───────── Информационная плашка (не кнопка): «Твой первый выбор», «Причина» ───────── */
.info-plaque { display: grid; gap: calc(-15 * var(--u)); }
.info-plaque__label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-graphite);
  padding-left: calc(21 * var(--u));
}
.info-plaque__value {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: calc(438 * var(--u));
  aspect-ratio: 438 / 146;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-pink);
  isolation: isolate;
  margin-top: calc(-15 * var(--u));
}
.info-plaque__value::before {
  content: '';
  position: absolute;
  left: 2.5%; right: 2.1%; top: 24.7%; bottom: 28.8%;
  background: url('../assets/images/decorations/plaque-fill.svg') center / 100% 100% no-repeat;
  z-index: -2;
}
.info-plaque__value::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/images/decorations/button-frame.webp') center / 100% 100% no-repeat;
  z-index: -1;
}
.info-plaque__value--empty { color: var(--color-red); }
.info-plaque__value--empty::before { opacity: 0; }

/* ───────── Круглые кнопки (на месте серых кружков макета) ───────── */
.round-btn {
  --size: 71;
  width: calc(var(--size) * var(--u));
  height: calc(var(--size) * var(--u));
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-red);
  color: var(--color-red);
  background: transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.round-btn svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.round-btn--arrow { --size: 89; }
.round-btn--dark { border-color: var(--color-graphite); color: var(--color-graphite); }
@media (hover: hover) {
  .round-btn:hover { background: var(--color-red-fill); color: var(--color-pink); }
  .round-btn--dark:hover { background: var(--color-graphite); color: var(--color-bg); }
}
.round-btn[aria-pressed='true'] { background: var(--color-red); color: var(--color-pink); }
.round-btn:focus-visible { border-radius: 50%; }
.round-btn:active { transform: scale(0.94); }
.round-btn:disabled { opacity: 0.35; cursor: default; }

/* ───────── Текстовая ссылка-кнопка ───────── */
.text-link {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  padding: 6px 0;
}
@media (hover: hover) { .text-link:hover { text-decoration-thickness: 2px; } }

/* ───────── Иконки персонажей (ряд из шести кругов, MacBook Air 13/15) ───────── */
.avatar {
  --d: 199;
  position: relative;
  width: calc(var(--d) * var(--u));
  height: calc(var(--d) * var(--u));
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-muted);
  display: block;
}
.avatar img {
  position: absolute;
  max-width: none;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  object-fit: cover;
}
.avatar--flip img { transform: scaleX(-1); }
.avatar .avatar__red { opacity: 0; transition: opacity var(--t) var(--ease); }
.avatar .avatar__mono { transition: opacity var(--t) var(--ease); }
.avatar--active { background: var(--color-graphite); }
.avatar--active .avatar__red { opacity: 1; }
.avatar--active .avatar__mono { opacity: 0; }

/* ───────── Манга: ряды кадров и реплики ───────── */
.manga {
  container-type: inline-size;
  display: grid;
  gap: calc(18 * var(--u));
}
.manga__row {
  display: flex;
  gap: calc(20 * var(--u));
}
/* Деталь: одиночный вертикальный или квадратный кадр не растягивается на всю колонку */
.manga__row--detail .panel-frame { flex: 0 1 auto; width: min(100%, calc(560 * var(--u) + 120px)); }
.manga__row--detail.manga__row--start { justify-content: flex-start; }
.manga__row--detail.manga__row--end { justify-content: flex-end; }
.panel-frame {
  position: relative;
  flex: var(--grow) 1 0;
  aspect-ratio: var(--ar);
  border: 3px solid var(--color-red);
  overflow: hidden;
  background: var(--color-bg);
}
.panel-frame__img {
  position: absolute;
  max-width: none;
}
.panel-frame__img--fit {
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
}
.panel-frame__img--contain {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* без кадрирования: пропорции и детали сохраняются */
}

.bubble {
  position: absolute;
  left: var(--x); top: var(--y);
  max-width: var(--bw);
  padding: 0.3em 0.7em 0.35em;
  background: var(--color-bg);
  border: var(--bubble-border) solid var(--color-red);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 0;
  font-family: var(--font-text);
  font-weight: 600;
  /* 24 px при колонке манги 1073 px — масштабируется вместе с кадром */
  font-size: clamp(12px, 2.24cqw, 24px);
  line-height: 1.12;
  color: var(--color-graphite);
  z-index: 1;
}
.bubble--br { border-radius: var(--radius-bubble) var(--radius-bubble) 0 var(--radius-bubble); }
.bubble--tl { border-radius: 0 var(--radius-bubble) var(--radius-bubble) var(--radius-bubble); }
.bubble--tr { border-radius: var(--radius-bubble) 0 var(--radius-bubble) var(--radius-bubble); }
.bubble--you { font-style: italic; }
.bubble .visually-hidden { font-style: normal; }

/* ───────── Переворачивающиеся карточки ───────── */
.flip-card {
  perspective: 1200px;
}
.flip-card__btn {
  position: relative;
  width: 100%;
  aspect-ratio: 445 / 297;
  display: block;
  text-align: center;
}
.flip-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
}
.flip-card__btn[aria-pressed='true'] .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* поля внутри рамки: по бокам — дальше от виньеток, снизу — место под подпись «трактовка» */
  padding: 13% 14% 21%;
  text-wrap: balance;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: url('../assets/images/decorations/card-frame.webp') center / 100% 100% no-repeat;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: normal;
  color: var(--color-ink);
}
.flip-card__face--back {
  transform: rotateY(180deg);
  color: var(--color-red);
}
.flip-card__tag {
  position: absolute;
  left: 0; right: 0; bottom: 13%;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-graphite);
}
.flip-card__btn:focus-visible { box-shadow: none; }
.flip-card__btn:focus-visible .flip-card__face { outline: 2px solid var(--color-red); outline-offset: -10px; border-radius: 18px; }

/* ───────── Панели «О проекте» / «Источники» ───────── */
.panel {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 2px solid var(--color-red);
  border-radius: 24px;
  background: var(--color-bg);
  color: var(--color-ink);
}
.panel::backdrop { background: var(--color-graphite-a55); }
.panel__inner {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 48px);
}
.panel .h-section { font-size: clamp(32px, 4vw, 50px); }
.panel .body-text { font-size: clamp(17px, 1.7vw, 22px); }
.panel .btn-plaque { --w: 260; min-width: 200px; justify-self: start; }
.sources-list { display: grid; gap: 10px; padding-left: 1.1em; list-style: disc; }


/* ───────── Pill-кнопка возврата ───────── */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid var(--color-red);
  border-radius: 999px;
  background: var(--color-bg);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-red);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .pill:hover { background: var(--color-red); color: var(--color-pink); } }

/* ───────── Список вариантов (причина, уверенность) — радиокружки Ellipse 4 ───────── */
.choice-list {
  display: grid;
  justify-content: center;
  margin: calc(40 * var(--u)) auto 0;
  width: max-content;
  max-width: 100%;
}
.choice {
  display: flex;
  align-items: center;
  gap: calc(59 * var(--u));
  min-height: 44px;
  padding: 0;
  text-align: left;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-option);
  line-height: 1.4;
  color: var(--color-ink);
}
.choice__radio {
  flex: none;
  width: calc(29 * var(--u));
  height: calc(29 * var(--u));
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-red);
  display: grid;
  place-items: center;
}
.choice__radio::after {
  content: '';
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: var(--color-red);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.choice[aria-checked='true'] .choice__radio::after { transform: scale(1); }
.choice[aria-checked='true'] { color: var(--color-red); }
@media (hover: hover) { .choice:hover .choice__radio::after { transform: scale(0.45); } .choice[aria-checked='true']:hover .choice__radio::after { transform: scale(1); } }
.choice:disabled { cursor: default; opacity: 0.55; }

/* Подпись плашки всегда в одну строку: заливка — узкая полоса, второй строке там нет места */
.btn-plaque > span { white-space: nowrap; }
.btn-plaque { min-width: min(100%, 10.5em); }
.center-action { width: 100%; justify-content: center; }