/* signs — ronnie. Интерфейс в духе unsent project: Arial, ничего лишнего, мягкие формы.
   Гамма — с обложки релиза: угольный чёрный, туманный серый, «светящийся» белый, лаванда.
   Все значения — токены ниже; в правилах только var(--…). Canvas (lace.js) читает те же токены. */

:root {
  /* ===== палитра с обложки (примитивы, напрямую в правилах не используются) ===== */
  --c-black: #121212;
  --c-coal: #1c1c1b;       /* фон обложки */
  --c-coal-up: #242423;
  --c-smoke: #2f302e;
  --c-graphite: #5d5f5c;
  --c-mist: #a5a7a2;
  --c-silver: #d3d6cf;
  --c-bone: #e5ebdf;       /* свечение */
  --c-glow: #f6f8ec;       /* самый светлый белый обложки */
  --c-paper: #eceee8;
  --c-paper-up: #f9faf6;
  --c-lilac-soft: #d8d5e2;
  --c-lilac-deep: #6b6780;
  --c-lilac-ink: #3d3950;  /* тёмная лавандовая нить — вышивка текста */

  /* ===== роли: тёмная тема — главная, по умолчанию ===== */
  color-scheme: dark;
  --bg: var(--c-coal);
  --surface: var(--c-coal-up);
  --fg: var(--c-glow);
  --fg-muted: var(--c-mist);   /* контраст с --bg ≥ 4.5:1 */
  --line: var(--c-smoke);
  --accent: var(--c-lilac-soft);
  --edge: color-mix(in srgb, var(--fg) 34%, transparent);
  --edge-strong: color-mix(in srgb, var(--fg) 70%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--fg) 9%, transparent);
  --grain-opacity: .045;
  --fill-quiet: color-mix(in srgb, var(--bg) 45%, transparent); /* еле заметная подложка у контурных кнопок */

  /* ===== карточки со знаками — одинаковые в обеих темах (их читает lace.js) ===== */
  --card-bg: var(--c-black);
  --card-light: var(--c-bone);   /* свет и нити на чёрном льне */
  --card-stitch: var(--c-bone);  /* бирка */
  --card-ink-accent: var(--c-lilac-ink); /* иногда текст вышит лавандовой нитью, а не тёмной в тон салфетки */
  --card-edge: color-mix(in srgb, var(--fg) 14%, transparent);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, .55);
  --shadow-room: 88px;  /* запас под тень карточки: прокрутка карусели обрезает всё, что за её краем */

  /* ===== шрифты ===== */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-script: "Pinyon Script", cursive;          /* имена, заголовки вкладок */
  --font-serif: "Cormorant Garamond", Georgia, serif; /* вышивка знаков */
  --font-hand: "Caveat", cursive;                   /* вышивка знаков */
  --fw-regular: 400;
  --fw-bold: 700;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;            /* 16px в полях — iOS не зумит */
  --fs-h1: clamp(28px, 6.5vw, 44px);
  --fs-script: clamp(40px, 9vw, 56px);
  --lh-tight: 1.08;
  --track: 0;                /* обычный текст */
  --track-tight: -0.01em;    /* крупные заголовки: −1%, как в Figma */
  --track-caps: .08em;       /* мелкий текст капсом — разреженный, иначе слипается */

  /* ===== скругления ===== */
  --r-none: 0;
  --r-sm: 8px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-round: 50%;

  /* ===== обводки и тени ===== */
  --bw: 1px;
  --shadow-float: 0 10px 24px rgba(0, 0, 0, .18);

  /* ===== отступы ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --gutter: max(var(--s-4), env(safe-area-inset-left), env(safe-area-inset-right));

  /* ===== размеры ===== */
  --tap: 44px;              /* минимальная зона нажатия */
  --control: 48px;          /* одна высота у поля, кнопок и тем */
  --page: 1100px;
  --w-form: 520px;
  --w-stack: 320px;
  --w-release: 380px;
  --logo: 124px;
  --arrow: 56px;
  --icon: 22px;
  --icon-box: 36px;
  --icon-glyph: 16px;

  /* ===== прозрачность ===== */
  --o-dim: .45;             /* соседние карточки в карусели */
  --o-disabled: .3;

  /* ===== движение ===== */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s;
  --t: .3s;
  --t-slow: .5s;

  /* ===== слои ===== */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 2;   /* шапка над экранами: ползунок громкости свисает на них и должен ловить мышь */
  --z-sheet: 10;
  --z-grain: 20;
  --z-toast: 40;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--c-paper);
  --surface: var(--c-paper-up);
  --fg: var(--c-black);
  --fg-muted: var(--c-graphite);
  --line: var(--c-silver);
  --accent: var(--c-lilac-deep);
  --card-edge: transparent;
  --shadow-card: 0 18px 40px rgba(0, 0, 0, .18);
  --grain-opacity: .08;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fw-regular) var(--fs-md) / 1.4 var(--font-sans);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* бумажное зерно поверх всего */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: var(--z-grain);
}

button { font: inherit; letter-spacing: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- шапка ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: var(--page);
  margin: 0 auto;
  padding: max(var(--s-2), env(safe-area-inset-top)) var(--gutter) 0;
}
/* лого ronnie! — маской из logo.svg, поэтому цвет берётся из темы */
.logo {
  display: block;
  aspect-ratio: 346.6 / 163.6;
  background: currentColor;
  -webkit-mask: url("logo.svg") center / contain no-repeat;
  mask: url("logo.svg") center / contain no-repeat;
}
.logo { flex: none; width: var(--logo); color: var(--fg); margin: var(--s-1) 0; }
.top nav { margin-left: auto; }
/* иконки соцсетей и площадок: ровные квадраты, слева соцсети, черта, справа музыка */
.icons { display: flex; align-items: center; gap: var(--s-1); }
.icon {
  flex: none; /* квадрат никогда не сжимается */
  display: grid;
  place-items: center;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: var(--r-sm);
  color: var(--fg-muted);   /* шапка — второстепенная: без рамок, приглушённо */
  opacity: .8;
  transition: color var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}
.icon svg { width: var(--icon-glyph); height: var(--icon-glyph); fill: currentColor; }
.icon.soon { opacity: var(--o-disabled); cursor: default; }
.icon.text { width: auto; padding: 0 var(--s-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); text-decoration: none; white-space: nowrap; }
button.icon { border: 0; background: none; cursor: pointer; }
@media (hover: hover) { a.icon:hover, button.icon:hover { color: var(--fg); opacity: 1; background: color-mix(in srgb, var(--fg) 8%, transparent); } }
.icon:focus-visible { color: var(--fg); opacity: 1; }
.icons-divider { flex: none; width: var(--bw); height: 18px; background: color-mix(in srgb, var(--fg) 16%, transparent); margin: 0 var(--s-2); }
.navlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.navlink.theme { order: 1; color: var(--fg-muted); }

/* редактор знаков — тихо в правом нижнем углу */
/* на узком экране «back to pre-save» уходит влево, чтобы не пересекаться с «редактировать знаки» */
@media (max-width: 560px) { #ask .back { left: var(--gutter); right: auto; margin: 0; } }

/* узкий экран: иконкам тесно — в шапке остаются лого, «all links» (там все ссылки крупно) и звук, одной строкой */
@media (max-width: 720px) {
  .icons > :not(.all) { display: none; }
}
@media (max-width: 420px) {
  .top { --logo: 104px; gap: var(--s-2); }
  .top .sound { margin-left: 0; } /* .top — чтобы перебить общее правило .sound ниже по файлу */
  .icon.text, .sound-btn { padding: 0 var(--s-1); }
}
/* самые узкие телефоны (320px): лого чуть меньше, подписи плотнее — чтобы всё влезло, а лого не сжималось */
@media (max-width: 340px) {
  .top { --logo: 88px; }
  .icon.text, .sound-btn { letter-spacing: .04em; }
}

/* ---------- экраны ---------- */
main { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) max(var(--s-7), env(safe-area-inset-bottom)); }
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 140px);
  min-height: calc(100dvh - 140px);
}
.screen.active { display: flex; }
/* элементы экрана проступают по очереди — и при смене экрана, и при загрузке страницы */
.screen.active > * { animation: enter .7s var(--ease) both; }
.screen.active > :nth-child(2) { animation-delay: .08s; }
.screen.active > :nth-child(3) { animation-delay: .16s; }
.screen.active > :nth-child(4) { animation-delay: .24s; }
.screen.active > :nth-child(5) { animation-delay: .32s; }
.screen.active > :nth-child(n+6) { animation-delay: .4s; }
.top { animation: enter .9s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }

h1 { font: var(--fw-bold) var(--fs-h1) / var(--lh-tight) var(--font-sans); letter-spacing: var(--track-tight); margin: 0 0 var(--s-2); text-wrap: balance; }
h1 .name { font: var(--fw-regular) 1.25em / 1 var(--font-script); letter-spacing: 0; color: var(--accent); }
/* заголовок в одну строку; хвост «g» свисает во внешний промежуток над полем.
   На узком экране кегль уменьшается, чтобы строка не переносилась */
#askTitle { margin: var(--s-4) 0 var(--s-7); font-size: clamp(21px, 6.2vw, 48px); white-space: nowrap; }
/* акцент как на обложке: слово каллиграфией и лавандой со свечением, у слова мерцают восьмиконечные звёзды */
@keyframes twinkle { 50% { opacity: .45; transform: scale(.82) rotate(22deg); } }
.sub { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0 0 var(--s-5); }
.fine { color: var(--fg-muted); font-size: var(--fs-xs); margin: var(--s-3) 0; }

.stack { display: grid; gap: var(--s-2); width: min(var(--w-stack), 100%); }
.field {
  width: min(var(--w-form), 100%);
  height: var(--control);
  background: var(--surface);
  color: var(--fg);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-pill);
  padding: 0 var(--s-5);
  font: var(--fw-regular) var(--fs-md) var(--font-sans);
  letter-spacing: var(--track);
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: var(--fg-muted); opacity: 1; }
/* фокус поля — рамка ярче и мягкое кольцо, без второй обводки */
.field:focus, .field:focus-visible { outline: none; border-color: var(--edge-strong); box-shadow: var(--ring); }

/* ---------- кнопки ---------- */
.btn {
  height: var(--control);
  min-width: 140px;
  padding: 0 var(--s-5);
  background: var(--fg);
  color: var(--bg);
  border: var(--bw) solid var(--fg);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: opacity var(--t), transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
}
.btn:active { transform: scale(.98); }
/* сочный ховер у основных кнопок: приподнимается, лавандовое свечение, по кнопке пробегает блик */
.btn:not(.ghost) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.ghost)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 35%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 55%, white), transparent);
  opacity: .35;
  transform: skewX(-18deg) translateX(-150%);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
  .btn:not(.ghost):not(:disabled):hover::after { animation: btn-shine 1.1s var(--ease); }
  .btn.ghost:not(:disabled):hover { border-color: var(--edge-strong); }
}
@keyframes btn-shine { to { transform: skewX(-18deg) translateX(520%); } }
.btn:disabled { opacity: var(--o-disabled); cursor: default; transform: none; }
.btn.ghost { background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); border-color: var(--edge); }
.btn.wide { width: 100%; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.row { display: flex; gap: var(--s-2); justify-content: center; align-items: center; margin-top: var(--s-5); flex-wrap: wrap; }
.textbtn {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.row.quiet { margin-top: var(--s-2); }
.video-dialog { width: min(420px, calc(100% - 32px)); padding: var(--s-5); border: var(--bw) solid var(--edge); border-radius: 20px; background: var(--bg); color: var(--fg); }
.video-dialog::backdrop { background: #000a; }
.video-dialog h2 { margin-top: 0; }
/* полоса загрузки: заполняется по мере скачивания, пока размер неизвестен — бегущий блик */
.video-progress { height: 6px; margin: var(--s-4) 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.video-progress i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); transition: width .2s linear; }
.video-progress.busy i { width: 35%; animation: video-busy 1.2s var(--ease) infinite; }
@keyframes video-busy { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
/* проверка человека невидима, пока Cloudflare не попросит действия; место при этом не занимает */
.video-verification.quiet { height: 0; overflow: hidden; opacity: 0; margin: 0; pointer-events: none; }
/* фоновая подготовка токена для знака на экране: за пределами видимости, но в потоке, чтобы виджет работал */
.video-prewarm { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.video-dialog.failed h2 { color: var(--accent); }
.video-dialog.failed .sub { color: var(--fg); }
.video-verification { min-height: 65px; display: flex; justify-content: center; }

/* ---------- пресейв ---------- */
.release { width: min(var(--w-release), 100%); display: flex; flex-direction: column; }
/* обложка-награда: всплывает, парит, наклоняется к курсору (--rx/--ry из app.js), блик идёт за курсором */
.cover-float { perspective: 1000px; animation: cover-in 1.1s var(--ease) both, cover-float 7s ease-in-out 1.1s infinite; }
.cover-tilt {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}
.cover-tilt.live { transition: transform .08s linear; }
#cover { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--card-bg); box-shadow: 0 0 0 var(--bw) var(--card-edge), var(--shadow-card); }
.glare, .shine { position: absolute; inset: 0; pointer-events: none; }
.glare {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .28), transparent 55%);
  opacity: var(--go, 0);
  transition: opacity var(--t-slow) var(--ease);
  mix-blend-mode: soft-light;
}
.shine { overflow: hidden; }
.shine::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-12deg) translateX(-120%);
  animation: shine 1.4s var(--ease) .5s both;
}
@keyframes cover-in { from { opacity: 0; transform: translateY(24px) scale(.94) rotateX(14deg); } }
@keyframes cover-float { 50% { transform: translateY(-6px); } }
@keyframes shine { to { transform: skewX(-12deg) translateX(520%); } }

/* шаги пресейва: заметно, над кнопкой; текущий — лавандовый, пройденный — с галочкой */
.steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); text-align: left; font-size: var(--fs-sm); }
.steps li { display: flex; align-items: center; gap: var(--s-3); color: var(--fg); transition: color var(--t), opacity var(--t); }
.steps b {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  border: var(--bw) solid var(--accent);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
}
.steps li.now b { background: var(--accent); color: var(--bg); }
/* обещание во втором шаге — ради него всё и затевается */
.steps .promise { color: var(--accent); font-weight: var(--fw-bold); text-shadow: 0 0 .8em color-mix(in srgb, var(--accent) 35%, transparent); }
#presaveBtn { margin-top: var(--s-4); font-size: var(--fs-md); }
/* успех после пресейва: минимально — звезда распускается, волна, «thank you», одна кнопка */
.success { width: min(var(--w-form), 100%); display: flex; flex-direction: column; align-items: center; }
.burst { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: var(--s-4); }
.burst::before, .burst::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-round);
  border: var(--bw) solid var(--accent);
  opacity: 0;
}
.burst-star { width: 64px; height: 64px; fill: var(--accent); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 60%, transparent)); opacity: 0; }
.success-title { font: var(--fw-regular) calc(var(--fs-script) * 1.3) / 1 var(--font-script); letter-spacing: 0; color: var(--accent); margin: 0 0 var(--s-2); opacity: 0; }
.success .sub, .success .btn { opacity: 0; }
.success .btn { margin-top: var(--s-2); }
.success.celebrate .burst-star { animation: bloom 1.1s var(--ease) both, twinkle 3.6s ease-in-out 1.1s infinite; }
.success.celebrate .burst::before { animation: ripple 1.6s var(--ease) .15s both; }
.success.celebrate .burst::after { animation: ripple 1.6s var(--ease) .45s both; }
.success.celebrate .success-title { animation: rise .9s var(--ease) .35s both; }
.success.celebrate .sub { animation: rise .9s var(--ease) .5s both; }
.success.celebrate .btn { animation: rise .9s var(--ease) .65s both, ready-glow 2.4s ease-in-out 1.6s infinite; }
@keyframes bloom { 0% { opacity: 0; transform: scale(0) rotate(-90deg); } 60% { opacity: 1; transform: scale(1.18) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes ripple { 0% { opacity: .8; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes ready-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 45%, transparent); } }

/* ---------- имя и тема ---------- */
/* темы ровным рядом, «just give me a sign» — во всю ширину ряда под ними, без одиноких переносов */
.choices { display: grid; gap: var(--s-2); margin-top: var(--s-3); width: min(var(--w-form), 100%); }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.topics .chip { flex: 1 1 auto; padding: 0 var(--s-3); }
.any span { color: var(--accent); }
/* возврат к пресейву — тихо, в самом низу экрана */
.back { position: fixed; left: 0; right: 0; bottom: max(var(--s-4), env(safe-area-inset-bottom)); width: max-content; margin: 0 auto; font-size: var(--fs-xs); }
.chip {
  height: var(--control);
  padding: 0 var(--s-4);
  background: transparent;
  background: var(--fill-quiet);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:active { background: var(--fg); color: var(--bg); }
@media (hover: hover) {
  .chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .navlink:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- вышитый узор на всю страницу ---------- */
/* высота — самый большой экран: на телефоне адресная строка прячется при прокрутке, а холст не меняется */
.bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: var(--z-bg); pointer-events: none; }
.bg-still { background: rgba(0, 0, 0, .68); } /* 404: то же затемнение океана, что рисует ocean.js, без подсветки */
.top, main { position: relative; z-index: var(--z-content); }
.top { z-index: var(--z-header); }

/* ---------- загрузка ---------- */
.loading-center {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-1);
  text-align: center;
  pointer-events: none;
}
.loading-name { font: var(--fw-regular) var(--fs-script) / 1 var(--font-script); letter-spacing: 0; color: var(--accent); margin: 0; max-width: 220px; overflow-wrap: anywhere; }
.loading-text { font-size: var(--fs-xs); color: var(--fg-muted); margin: 0; max-width: 170px; min-height: 2.6em; transition: opacity var(--t); }

/* ---------- знаки: карусель ---------- */
#results { justify-content: flex-start; padding-top: var(--s-2); }
#results .sub { margin-bottom: var(--s-4); }
/* карусель не размываем при появлении (размытие широкого блока с тремя карточками — тяжело): у карточек своя анимация */
#results.active > .deck-wrap { animation: none; }
/* всё под каруселью — поверх её запаса под тень, иначе кнопки не нажимаются */
#results > :not(.deck-wrap) { position: relative; }
.deck-wrap {
  /* ширина карточки: крупно, но так, чтобы под ней влезли кнопки.
     max() — страховка от нулевой ширины на очень низких окнах */
  --cw: max(200px, min(76vw, 380px, calc((100dvh - 330px) * .75)));
  position: relative;
  width: 100%;
}
.deck {
  display: flex;
  gap: var(--s-3);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: var(--shadow-room) calc(50vw - var(--cw) / 2);
  margin-block: calc(var(--s-2) - var(--shadow-room)); /* место под тень — без сдвига вёрстки */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
}
.deck::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 var(--cw);
  scroll-snap-align: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  animation: rise .7s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* соседние карточки — меньше и приглушённые, в фокусе — одна */
.slide canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--card-bg);
  border-radius: var(--r-none);
  box-shadow: 0 0 0 var(--bw) var(--card-edge), var(--shadow-card);
  transform: scale(.88);
  opacity: var(--o-dim);
  /* своя композитная раскладка: масштаб/прозрачность не перерисовывают карточку,
     иначе на прокрутке карусели кадры проседают и анимация «прыгает» в конец */
  will-change: transform, opacity;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.slide.on canvas { transform: none; opacity: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* стрелки-шевроны парят по центру карточки, чуть заходя на её край */
.arrow {
  position: absolute;
  top: 50%;
  width: var(--arrow);
  height: var(--arrow);
  margin-top: calc(var(--arrow) / -2);
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-round);
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  animation: hover-float 3.2s ease-in-out infinite;
  transition: opacity var(--t), background var(--t-fast), color var(--t-fast);
}
.arrow svg { width: var(--icon); height: var(--icon); }
.arrow.prev, .arrow.next { --side: max(calc(50% - 50vw + 4px), calc(50% - var(--cw) / 2 - var(--arrow) - var(--s-3))); }
.arrow.prev { left: var(--side); }
.arrow.next { right: var(--side); animation-delay: -1.6s; }
.arrow:disabled { opacity: 0; pointer-events: none; }
.arrow:active { background: var(--fg); color: var(--bg); }
@media (hover: hover) { .arrow:hover { background: var(--fg); color: var(--bg); } }
/* только transform: анимация тени перерисовывает кнопку каждый кадр */
@keyframes hover-float { 50% { transform: translateY(-5px); } }

/* финал пути: из знаков — в соцсети */
/* Отдельная панель во всю ширину, пристыкованная к низу страницы: тёмное матовое стекло поверх океана,
   светлая волосяная грань сверху вместо тёмной линии. margin-top: auto прижимает её к низу и на коротком экране,
   отрицательный нижний отступ гасит нижний отступ main — панель доходит до края экрана */
.outro {
  width: 100vw;
  margin: auto calc(50% - 50vw) calc(-1 * max(var(--s-7), env(safe-area-inset-bottom)));
  padding: var(--s-6) var(--gutter) max(var(--s-6), calc(env(safe-area-inset-bottom) + var(--s-4)));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-top: var(--bw) solid var(--card-edge);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .28);
}
#results .row.quiet { margin-bottom: var(--s-7); }
.outro-title { font: var(--fw-regular) var(--fs-script) / 1 var(--font-script); color: var(--accent); margin: 0 0 var(--s-2); }
.outro .row { margin-top: var(--s-3); }
.count { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
#results .row:not(.quiet) { margin-top: var(--s-3); }

/* ---------- звук: подписанная кнопка в шапке, громкость — при наведении ---------- */
.sound { position: relative; display: flex; align-items: center; margin-left: var(--s-4); }
.sound-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--icon-box);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-muted);
  opacity: .8;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sound.on .sound-btn { opacity: 1; }
.sound.on .eq { color: var(--accent); } /* живой индикатор — единственный акцент в шапке */
@media (hover: hover) { .sound-btn:hover { color: var(--fg); opacity: 1; } }
/* место под самую длинную подпись — переключение on/off не двигает шапку */
.sound-label { display: inline-grid; text-align: left; }
.sound-label > * { grid-area: 1 / 1; }
.sound-label .ghost { visibility: hidden; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; contain: layout paint; }
/* столбики живые: высоту каждому ставит app.js по своей полосе частот (бас → верха).
   Высота — целыми пикселями, не transform: масштаб крошечных столбиков оставлял «висящую» черточку */
.eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
/* громкость — всплывает под кнопкой при наведении, только на устройствах с мышью.
   Под кнопкой — невидимый «мостик» до ползунка, и прячется он с задержкой: мышь успевает дойти */
.sound-vol {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  width: 120px;
  accent-color: var(--accent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) .4s, visibility 0s calc(var(--t) + .4s);
}
.sound.on::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--s-2); }
@media (hover: hover) {
  .sound.on:hover .sound-vol, .sound.on:focus-within .sound-vol { opacity: 1; visibility: visible; transition: opacity var(--t), visibility 0s; }
}
/* телефон и планшет: громкость — кнопками устройства, а тап по «sound» — с удобной зоной нажатия */
@media (pointer: coarse) {
  .sound-btn, .icon.text { height: var(--tap); }
}

/* ---------- все ссылки: свой мини-band.link поверх страницы ---------- */
.links-page {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade-in var(--t) var(--ease) both;
}
html.sheet-open { overflow: hidden; }
.links-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(var(--w-release), 100%);
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) max(var(--s-7), env(safe-area-inset-bottom));
  animation: enter .6s var(--ease) both;
}
.links-inner .logo { align-self: center; margin-bottom: var(--s-3); }
.links-label { margin: var(--s-4) 0 0; padding-left: var(--s-4); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--fg-muted); }
.links-list { display: grid; gap: var(--s-2); }
.link-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--control);
  padding: 0 var(--s-4);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--fill-quiet);
  color: var(--fg);
  font-size: var(--fs-sm);
  text-transform: lowercase;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.link-row svg { flex: none; width: var(--icon-glyph); height: var(--icon-glyph); fill: currentColor; }
.link-row .go { margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-muted); }
.link-row.soon { opacity: var(--o-disabled); }
a.link-row:active { background: var(--fg); color: var(--bg); }
@media (hover: hover) { a.link-row:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } a.link-row:hover .go { color: inherit; } }
#linksMore { align-self: center; margin-top: var(--s-4); font-size: var(--fs-xs); }
.close {
  position: absolute;
  top: max(var(--s-3), env(safe-area-inset-top));
  right: var(--gutter);
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-round);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.close svg { width: var(--icon-glyph); height: var(--icon-glyph); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.close:active { background: var(--fg); color: var(--bg); }
@media (hover: hover) { .close:hover { background: var(--fg); color: var(--bg); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- тост ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  transform: translate(-50%, var(--s-4));
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}


/* Ocean stays fixed while the foreground scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("bg-ocean.webp") center / cover no-repeat;
  pointer-events: none;
}
body { isolation: isolate; }
/* имя и дата — одной строкой, поровну */
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); width: min(var(--w-form), 100%); }
.fields-row .field { width: 100%; min-width: 0; }
@media (max-width: 400px) { .fields-row .field, .fields-row .mask { padding-inline: var(--s-4); } }
/* поле даты: в фокусе серая маска DD.MM.YYYY лежит под набранным и дописывается по мере ввода */
.mask-field { position: relative; min-width: 0; }
#birthday:focus::placeholder { color: transparent; }
#birthday { color-scheme: dark; width: 100%; background: transparent; position: relative; z-index: 1; }
.mask-field::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--surface); }
.mask {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center;
  padding: 0 var(--s-5); border: var(--bw) solid transparent;
  font: var(--fw-regular) var(--fs-md) var(--font-sans); letter-spacing: var(--track);
  white-space: pre; color: transparent; pointer-events: none;
}
.mask span { color: var(--fg-muted); }
/* своя подсказка об ошибке вместо системного пузыря браузера */
.field-error {
  width: min(var(--w-form), 100%); margin: var(--s-2) 0 0; padding: 0 var(--s-5);
  color: var(--accent); font-size: var(--fs-xs); letter-spacing: var(--track); text-align: center;
  animation: err-in .25s var(--ease) both;
}
.field-error[hidden] { display: none; }
.field[aria-invalid="true"] { border-color: color-mix(in srgb, var(--accent) 75%, transparent); }
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } }


:root {
  --title-art-width: 3.55em;
  --title-art-offset: -0.45em;
  --language-menu-width: 110px;
  --language-menu-gap: 8px;
  --language-menu-shadow: 0 8px 24px #0006;
}
.signs-title {
  display: inline-block;
  width: var(--title-art-width);
  height: auto;
  vertical-align: var(--title-art-offset);
  margin-inline: -0.18em;
}
#birthday { color: var(--fg); }
.topics .chip { min-width: 0; }
.tiktok-menu { position: relative; }
.tiktok-menu summary { list-style: none; cursor: pointer; }
.tiktok-menu summary::-webkit-details-marker { display: none; }
.tiktok-languages {
  position: absolute;
  top: calc(100% + var(--language-menu-gap));
  left: 50%;
  transform: translateX(-50%);
  min-width: var(--language-menu-width);
  padding: var(--s-2);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--language-menu-shadow);
  display: flex;
  gap: var(--s-2);
}
.tiktok-languages a {
  flex: 1;
  color: var(--fg);
  font-size: var(--fs-xs);
  text-align: center;
  text-decoration: none;
  padding: var(--s-2);
  border-radius: var(--r-pill);
}
.tiktok-languages a:hover, .tiktok-languages a:focus-visible { background: var(--surface); }

/* стрелки — рядом с карточкой, а не поверх салфетки; на узком экране чуть меньше, чтобы влезали сбоку */
@media (max-width: 600px) { :root { --arrow: 44px; } }

/* Старые Safari (iOS ≤ 16.1) не знают color-mix: без запасных цветов пропали бы рамки полей и кнопок
   и фон страницы ссылок. Цвета — тёмной темы (переключатель тем выключен) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --edge: rgba(246, 248, 236, .34);
    --edge-strong: rgba(246, 248, 236, .7);
    --ring: 0 0 0 4px rgba(246, 248, 236, .09);
    --fill-quiet: rgba(28, 28, 27, .45);
    --card-edge: rgba(246, 248, 236, .14);
  }
  .btn.ghost { background: rgba(28, 28, 27, .7); }
  .icons-divider { background: rgba(246, 248, 236, .16); }
  .links-page { background: rgba(28, 28, 27, .88); }
  .outro { background: rgba(28, 28, 27, .78); }
  .field[aria-invalid="true"] { border-color: rgba(216, 213, 226, .75); }
}

.noscript { position: fixed; inset: auto 0 var(--s-5); z-index: 10; margin: 0; padding: 0 var(--s-4); text-align: center; color: var(--fg-muted); font-size: var(--fs-sm); }