/* ============================================================
   ВХОД: четыре касания → персонаж · ревизия 2026-08.
   Все значения — из tokens.css.
   ============================================================ */

.st-stage{ padding-top:var(--sp6); padding-bottom:var(--sp8); }

/* прогресс */
.st-dots{ display:flex; gap:var(--sp2); margin-bottom:var(--sp6); }
.st-dot{
  flex:1; max-width:var(--sp8); height:var(--sp1); border-radius:var(--r-full);
  background:var(--s3);
  transition:background var(--d-std) var(--e-effect);
}
.st-dot.done{ background:var(--hero); }
.st-dot.now{ background:var(--hero-mid); }

/* вопрос */
.st-q{ margin-bottom:var(--sp6); }
.st-q .pv-over{ display:block; margin-bottom:var(--sp3); }
.st-answers{ display:flex; flex-direction:column; gap:var(--sp3); }
.st-answer{
  display:flex; align-items:center; gap:var(--sp3); text-align:left;
  min-height:var(--ctl-lg); padding:var(--sp4) var(--sp5);
  background:var(--s2); border:1px solid var(--hair);
  border-radius:var(--r-md); cursor:pointer; color:var(--t1);
  font:500 var(--fs-body)/var(--lh-body) var(--f-ui);
  transition:transform var(--d-micro) var(--e-spring-soft),
             background var(--d-micro) var(--e-effect),
             border-color var(--d-micro) var(--e-effect);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){ .st-answer:hover{ border-color:var(--hair2); background:var(--s3); } }
.st-answer:active{ transform:scale(.98); }
.st-answer:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.st-answer.picked{ background:var(--s4); border-color:var(--hero); }

/* смена вопроса */
.st-swap{ opacity:0; transform:translateX(var(--sp5)); }
.st-swap.from-left{ transform:translateX(calc(var(--sp5) * -1)); }
.st-swap.in{
  opacity:1; transform:translateX(0);
  transition:opacity var(--d-std) var(--e-effect), transform var(--d-spring) var(--e-spring);
}
.st-swap.out{
  opacity:0; transform:translateX(calc(var(--sp5) * -1));
  transition:opacity var(--d-exit-std) var(--e-effect), transform var(--d-exit-std) var(--e-in);
}

/* сборка */
.st-forging{ text-align:center; padding-top:var(--sp8); }
.st-forging .pv-over{ display:block; }

/* ---------- церемония ---------- */
.st-reveal{ text-align:center; padding-top:var(--sp7); }
.st-reveal .pv-over{ display:block; margin-bottom:var(--sp5); }
.st-reveal .pv-mono{ margin:0 auto var(--sp5); }
.st-name{
  font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif);
  margin:0 0 var(--sp2); color:var(--t1); text-wrap:balance;
}
.st-name-input{
  width:100%; max-width:calc(var(--col) * .6); box-sizing:border-box;
  text-align:center;
  font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif); color:var(--t1);
  background:var(--s1); border:1px solid var(--hero); border-radius:var(--r-md);
  padding:var(--sp2) var(--sp4); outline:none;
}
.st-rename, .st-reroll, .st-tune-link{
  display:inline-block;
  background:none; border:0; cursor:pointer;
  color:var(--t3); font:500 var(--fs-small)/1 var(--f-ui);
  text-decoration:underline; text-underline-offset:var(--sp1);
  padding:var(--sp3) var(--sp4);
  touch-action:manipulation;
}
.st-rename{ margin-bottom:var(--sp2); }
.st-reroll{ margin-top:var(--sp4); }
.st-rename:focus-visible, .st-reroll:focus-visible, .st-tune-link:focus-visible{
  outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); border-radius:var(--r-sm);
}
.st-tagline{ color:var(--t2); font-size:var(--fs-body); max-width:calc(var(--col) * .62); margin:0 auto; text-wrap:pretty; }

/* первая реплика — главный аргумент церемонии */
.st-first{
  margin:var(--sp6) auto 0; max-width:calc(var(--col) * .76);
  padding:var(--sp4) var(--sp5); text-align:left;
  background:var(--s2); border:1px solid var(--hair);
  border-radius:var(--r-md); border-bottom-left-radius:var(--r-xs);
}
.st-first .pv-over{ display:block; margin-bottom:var(--sp2); color:var(--hero); }
.st-first p{ margin:0; color:var(--t1); font-size:var(--fs-small); line-height:var(--lh-body); text-wrap:pretty; }

/* ---------- карточка для пересылки ---------- */
.st-card-wrap{ margin:var(--sp7) auto 0; max-width:calc(var(--col) * .56); }
.st-card{
  position:relative;
  aspect-ratio:4 / 5;
  background:var(--s1); border:1px solid var(--hair2);
  border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp4); padding:var(--sp6) var(--sp6) var(--sp8);
  text-align:center;
}
.st-card .pv-over{ color:var(--t3); }
.st-card-name{ font:700 var(--fs-title)/var(--lh-tight) var(--f-serif); color:var(--t1); }
.st-card-line{ color:var(--t2); font-size:var(--fs-small); }
/* домен прижат к низу абсолютом: с margin-top:auto он растягивал колонку
   и посреди карточки зияла пустота */
.st-card-domain{
  position:absolute; left:0; right:0; bottom:var(--sp5);
  font:600 var(--fs-over)/1 var(--f-ui); letter-spacing:var(--ls-over);
  text-transform:uppercase; color:var(--t3);
}
.st-card .pv-mono{ margin:0; }

/* ---------- действия ---------- */
.st-actions{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp4);
  margin-top:var(--sp7);
}
.st-actions .pv-btn{ width:100%; max-width:calc(var(--col) * .56); }
.st-hand-note{ margin-top:calc(var(--sp3) * -1); }
a.st-tune-link{ text-align:center; }

@media (prefers-reduced-motion: reduce){
  .st-answer, .st-swap, .st-swap.in, .st-swap.out, .st-dot{ transition:none !important; }
  .st-swap, .st-swap.out{ opacity:1; transform:none; }
  .st-answer:active{ transform:none; }
}

/* ============================================================
   ЛИЦО ПЕРСОНАЖА
   ------------------------------------------------------------
   Аватар выбирается до сохранения, прямо на церемонии. Плитка кликабельна
   целиком: «Сменить лицо» под ней — подсказка для тех, кто не догадается
   ткнуть в картинку, а не единственный способ.
   ============================================================ */
.st-face{ display:flex; flex-direction:column; align-items:center; gap:var(--sp3); margin:0 auto var(--sp5); }
.st-face-img{
  width:132px; height:132px; border-radius:var(--r-full); overflow:hidden;
  background:var(--s2); border:1px solid var(--hair2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font:700 56px/1 var(--f-serif); color:var(--t2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.st-face-img:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.22); }
.st-face-img svg, .st-face-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-face-edit{
  background:none; border:0; padding:var(--sp2) var(--sp3); cursor:pointer;
  font:600 var(--fs-small)/1 var(--f-ui); color:var(--hero);
  border-bottom:1px dashed currentColor; border-radius:0;
}
.st-face-edit:focus-visible{ outline:2px solid var(--hero); outline-offset:3px; }

.st-name-err{
  margin:var(--sp2) auto 0; max-width:calc(var(--col) * .8);
  color:var(--lose); font-size:var(--fs-small); line-height:var(--lh-body); text-align:center;
}
.st-legal{
  margin:var(--sp5) auto 0; max-width:calc(var(--col) * .8);
  color:var(--t3); font-size:var(--fs-small); line-height:var(--lh-body); text-align:center;
}
.st-legal a{ color:var(--t2); text-decoration:underline; }

/* ---------- шторка выбора лица ---------- */
.st-sheet{
  position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.5); opacity:0; transition:opacity .22s ease;
}
.st-sheet.on{ opacity:1; }
.st-sheet-in{
  width:100%; max-width:var(--col); background:var(--s1);
  border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);
  border:1px solid var(--hair2); border-bottom:0;
  padding:var(--sp5) var(--sp5) calc(var(--sp6) + var(--sab));
  transform:translateY(16px); transition:transform .22s ease;
  max-height:88vh; overflow:auto;
}
.st-sheet.on .st-sheet-in{ transform:none; }
.st-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp4); }
.st-sheet-x{
  background:none; border:0; cursor:pointer; color:var(--t2);
  font:400 26px/1 var(--f-ui); padding:0 var(--sp2);
}
.st-face-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp3); }
.st-face-opt{
  padding:0; border:2px solid transparent; border-radius:var(--r-md); overflow:hidden;
  background:var(--s2); cursor:pointer; aspect-ratio:1; line-height:0;
  transition:border-color .16s ease, transform .16s ease;
}
.st-face-opt:hover{ transform:translateY(-2px); }
.st-face-opt.picked{ border-color:var(--hero); }
.st-face-opt svg{ width:100%; height:100%; display:block; }
.st-face-acts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp3); margin-top:var(--sp4); }
.st-face-acts .pv-btn{ width:100%; }

@media (prefers-reduced-motion: reduce){
  .st-sheet, .st-sheet-in, .st-face-img, .st-face-opt{ transition:none !important; }
  .st-face-img:hover, .st-face-opt:hover{ transform:none; }
}

/* ============================================================
   ДВЕ ДВЕРИ И ЛЕПКА ПО ФРАЗЕ
   ============================================================ */
/* ---------- две двери ----------
   Развилка не про способ сборки, а про намерение: «быстро для себя» или
   «всерьёз для других». Поэтому карточки перестали быть двумя строчками
   текста и обзавелись весом: значок, три строки о том, что внутри, и
   кнопка. Человек должен понимать, куда идёт, до нажатия — второй раз
   этот экран он уже не увидит.

   Золото у второй двери — тот же знак, что у авторских персонажей в
   каталоге. В разделе оно занято тройкой чарта и кубком игр, и это
   третье место, где ему разрешено появиться: студия и есть вход в
   авторство. */
.st-door-lead{ margin:var(--sp3) 0 0; color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); }
.st-doors{ display:flex; flex-direction:column; gap:var(--sp4); margin:var(--sp6) 0 var(--sp4); }
@media (min-width: 900px){
  .st-doors{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
}
.st-door-ic{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:var(--sp2);
  border-radius:var(--r-full); background:var(--hero-grad); color:var(--on-hero);
  box-shadow:var(--sh-hero);
}
.st-door-ic svg{ width:24px; height:24px; display:block; }
.st-door.gold .st-door-ic{
  background:linear-gradient(135deg, color-mix(in srgb, var(--mark) 92%, #fff), var(--mark));
  color:#241a05; box-shadow:0 8px 26px color-mix(in srgb, var(--mark) 26%, transparent);
}
.st-door.gold{
  background:radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--mark) 13%, transparent), transparent 60%), var(--s1);
  border-color:color-mix(in srgb, var(--mark) 30%, transparent);
}
.st-door.gold:hover{ border-color:color-mix(in srgb, var(--mark) 52%, transparent); }
.st-door-l{ margin:var(--sp2) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.st-door-l li{
  position:relative; padding-left:20px;
  font-size:12px; line-height:1.45; color:var(--t3);
}
/* Галочка нарисована псевдоэлементом, а не иконкой: три штуки на карточку,
   шесть на экран — столько инлайновых svg не стоят своего веса. */
.st-door-l li::before{
  content:''; position:absolute; left:2px; top:4px; width:9px; height:5px;
  border-left:1.8px solid var(--hero); border-bottom:1.8px solid var(--hero);
  transform:rotate(-45deg);
}
.st-door.gold .st-door-l li::before{ border-color:var(--mark); }
.st-door-go{ margin-top:var(--sp5); pointer-events:none; }
.st-door.gold .st-door-go{
  background:linear-gradient(135deg, color-mix(in srgb, var(--mark) 92%, #fff), var(--mark));
  color:#241a05; box-shadow:0 8px 26px color-mix(in srgb, var(--mark) 26%, transparent);
}
.st-door{
  display:flex; flex-direction:column; gap:var(--sp2); text-align:left;
  padding:var(--sp5); border:1px solid var(--hair2); border-radius:var(--r-md);
  background:var(--s1); cursor:pointer; width:100%;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.st-door:hover{ transform:translateY(-2px); border-color:var(--hero); }
.st-door:active{ transform:translateY(0); }
.st-door:focus-visible{ outline:2px solid var(--hero); outline-offset:3px; }
.st-door{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.st-door .st-door-go{ margin-top:auto; }
/* .ghost больше не используется дверями — вторая дверь теперь .gold.
   Правило оставлено: класс ещё встречается в других местах раздела. */
.st-door.ghost{ background:none; }
.st-door-t{ font:700 var(--fs-body)/1.25 var(--f-serif); color:var(--t1); }
.st-door-s{ font-size:var(--fs-small); line-height:var(--lh-body); color:var(--t3); }

.st-sculpt-in{
  width:100%; margin-top:var(--sp5); padding:var(--sp4);
  border:1px solid var(--hair2); border-radius:var(--r-md); background:var(--s1);
  color:var(--t1); font:400 var(--fs-body)/var(--lh-body) var(--f-ui);
  resize:vertical; min-height:96px;
}
.st-sculpt-in:focus{ outline:none; border-color:var(--hero); }
.st-sculpt-in::placeholder{ color:var(--t3); }
.st-sculpt-go{ width:100%; margin-top:var(--sp4); }

/* примеры-подсказки: лекарство от страха чистого листа */
.st-chips{ display:flex; flex-wrap:wrap; gap:var(--sp2); margin-top:var(--sp3); }
.st-chip{
  padding:var(--sp2) var(--sp3); border:1px dashed var(--hair2); border-radius:var(--r-full);
  background:none; color:var(--t2); font-size:var(--fs-small); cursor:pointer; text-align:left;
  transition:border-color .16s ease, color .16s ease;
}
.st-chip:hover{ border-color:var(--hero); color:var(--t1); }

/* три имени на выбор */
.st-names{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp2); margin:var(--sp3) 0 var(--sp2); }
.st-nchip{
  padding:var(--sp2) var(--sp4); border:1px solid var(--hair2); border-radius:var(--r-full);
  background:none; color:var(--t2); font-size:var(--fs-small); cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.st-nchip:hover{ border-color:var(--hero); color:var(--t1); }
.st-nchip.picked{ border-color:var(--hero); background:var(--s2); color:var(--t1); font-weight:600; }

/* обещание глубины */
.st-secrets{
  margin-top:var(--sp4); padding:var(--sp4);
  border:1px dashed var(--hair2); border-radius:var(--r-md);
  color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); text-align:center;
}
.st-secrets b{ color:var(--t1); }

@media (prefers-reduced-motion: reduce){
  .st-door, .st-chip, .st-nchip{ transition:none !important; }
  .st-door:hover{ transform:none; }
}

/* ссылка-кнопка внутри мелкого текста (вернуться к черновику / забыть) */
.st-linkbtn{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--hero); font:inherit; text-decoration:underline;
}
.st-linkbtn:focus-visible{ outline:2px solid var(--hero); outline-offset:2px; }