:root {
  --ink: #0c0a10;
  --ink-2: #15111b;
  --pearl: #f4eef6;
  --pearl-2: rgba(244, 238, 246, .7);
  --pearl-3: rgba(244, 238, 246, .44);
  --line: rgba(244, 238, 246, .16);
  --pink: #f5a8cf;
  --lilac: #b3a2fb;
  --ice: #9fd3ff;
  --mint: #9ff0d4;
  --peach: #ffd3ad;
  --iris: linear-gradient(100deg, var(--pink), var(--lilac) 20%, var(--ice) 40%, var(--mint) 60%, var(--peach) 80%, var(--pink));
  --font: 'Jost', 'Futura', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--pearl);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* комната, которую подсвечивает шар */
.room {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 38% at 50% 30%, rgba(179, 162, 251, .16), transparent 70%),
    radial-gradient(ellipse 50% 30% at 30% 40%, rgba(245, 168, 207, .10), transparent 70%),
    radial-gradient(ellipse 50% 30% at 72% 42%, rgba(159, 240, 212, .08), transparent 70%),
    var(--ink);
}
.room::after {
  content: ''; position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.iris-text {
  background: var(--iris); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: iris 9s linear infinite;
}
@keyframes iris { to { background-position: -220% 0; } }

.demo {
  position: sticky; top: 0; z-index: 5;
  padding: 6px 16px;
  background: rgba(12, 10, 16, .7);
  border-bottom: 1px solid var(--line);
  color: var(--pearl-3);
  font: 400 11px/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase;
  text-align: center;
  backdrop-filter: blur(10px);
}

.top, main, .modes, .foot { width: 100%; max-width: 460px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.top { padding-top: 22px; text-align: center; }
.brand { margin: 0; font: 300 15px/1 var(--font); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; }
.sign { margin: 8px 0 0; font: 400 9.5px/1 var(--font); letter-spacing: .6em; margin-right: -.6em; color: var(--pearl-3); }

/* режимы */
.modes { display: flex; gap: 4px; margin-top: 22px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; width: calc(100% - 32px); max-width: 428px; }
.modes button {
  flex: 1; min-height: 40px; padding: 0 6px;
  border: 0; border-radius: 999px; background: none;
  font: 400 13px/1 var(--font); letter-spacing: .04em; color: var(--pearl-2);
  cursor: pointer; transition: background-color .3s, color .3s;
}
.modes button[aria-selected="true"] { background: var(--pearl); color: var(--ink); font-weight: 500; }

/* шар */
.stage { position: relative; display: grid; place-items: center; margin-top: 10px; }
.ball {
  position: relative;
  width: min(86vw, 360px); aspect-ratio: 1;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-box-reflect: below -14% linear-gradient(transparent 62%, rgba(255, 255, 255, .16));
}
.ball canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ball.nogl canvas { display: none; }
.ball.nogl::before {
  content: ''; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 4%, transparent 14%), radial-gradient(circle at 50% 55%, var(--lilac), var(--pink) 40%, #2a1f3a 75%);
  box-shadow: 0 0 80px rgba(179, 162, 251, .5);
}
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke: url(#iris); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: opacity .3s; }
.ball.holding .ring circle { opacity: 1; }
.ball:focus-visible .ring circle { opacity: .6; stroke-dashoffset: 0; }


.hint {
  margin: 4px auto 0; max-width: 32ch; min-height: 3em; text-wrap: balance;
  font: italic 300 17px/1.4 var(--font);
  text-align: center; color: var(--pearl-2);
  transition: opacity .4s;
}

/* видения: карты перед шаром */
.visions { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.visions > * { pointer-events: auto; }
.tcard {
  position: relative; display: block;
  width: 168px; aspect-ratio: 9 / 16;
  padding: 0; border: 0; background: none;
  perspective: 1000px; container-type: inline-size;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tcard.emerge { animation: emerge 1.6s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes emerge {
  0% { opacity: 0; transform: translateY(8%) scale(.18); filter: blur(16px) brightness(2.2); }
  55% { opacity: 1; filter: blur(3px) brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
.tcard__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.tcard.is-open .tcard__inner { transform: rotateY(180deg); }
.tcard.no-anim .tcard__inner { transition: none; }
.tcard__side {
  position: absolute; inset: 0; overflow: hidden;
  border: 1.5px solid transparent; border-radius: 9cqw;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, conic-gradient(from 210deg, var(--pink), var(--lilac), var(--ice), var(--mint), var(--peach), var(--pink)) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(179, 162, 251, .18);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tcard__front { transform: rotateY(180deg); }
.tcard__back::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(179, 162, 251, .35), transparent 46%), radial-gradient(circle at 50% 46%, rgba(245, 168, 207, .18), transparent 70%);
}
.tcard svg { position: absolute; left: 50%; top: 47%; width: 70%; transform: translate(-50%, -50%); overflow: visible; }
.tcard .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,16,.75), transparent 22%, transparent 68%, rgba(12,10,16,.9)); }
.tcard .num { position: absolute; top: 8cqw; inset-inline: 0; text-align: center; font: 300 10cqw/1 var(--font); letter-spacing: .2em; margin-right: -.2em; color: var(--pearl); }
.tcard .nm {
  position: absolute; bottom: 9cqw; inset-inline: 8cqw;
  font: 400 7.6cqw/1.2 var(--font); letter-spacing: .22em; text-transform: uppercase; text-align: center;
  color: var(--pearl); text-wrap: balance;
}
.tcard .nm::before { content: ''; display: block; width: 40%; height: 1px; margin: 0 auto 5cqw; background: var(--iris); opacity: .7; }

/* три карты расклада веером перед шаром */
.three { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
.three .slot { display: grid; gap: 8px; justify-items: center; }
.three .slot:nth-child(1) { transform: rotate(-7deg) translateY(10px); }
.three .slot:nth-child(3) { transform: rotate(7deg) translateY(10px); }
.three .tcard { width: min(27vw, 106px); }
.three .tcard.emerge { animation-duration: 1.4s; }
.three .slot:nth-child(2) .tcard.emerge { animation-delay: .25s; }
.three .slot:nth-child(3) .tcard.emerge { animation-delay: .5s; }
.three .tcard .nm { font-size: 9cqw; letter-spacing: .12em; inset-inline: 7cqw; }
/* свои варианты в «Выборе из двух» бывают длинными - до двух строк над картой */
.three .slot__label {
  width: min(27vw, 106px); white-space: normal; text-align: center; line-height: 1.25; letter-spacing: .12em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.slot__label {
  font: 400 10.5px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--pearl-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ball.dim { cursor: default; }

/* панели под шаром */
.panel { padding-bottom: 8px; }
.reading { text-align: center; animation: rise .9s .5s both; }
.verdict { margin: 0 auto 14px; max-width: 26ch; font: italic 300 25px/1.3 var(--font); text-wrap: balance; }
.thinking .verdict, .pending { animation: breathe 1.6s ease-in-out infinite; }
.pending { font-style: italic; font-weight: 300; color: var(--pearl-2); }
@keyframes breathe { 50% { opacity: .35; } }
.reading__name { margin: 6px 0 0; font: 300 34px/1.1 var(--font); letter-spacing: .14em; margin-right: -.14em; text-transform: uppercase; }
.reading__keys { margin: 10px 0 18px; font: 400 11px/1.4 var(--font); letter-spacing: .24em; text-transform: uppercase; }
.reading__text { margin: 0 auto; max-width: 34ch; font: 400 18px/1.55 var(--font); text-wrap: pretty; }
.next { margin: 18px 0 0; font: 400 12px/1.4 var(--font); letter-spacing: .1em; color: var(--pearl-3); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.h2 { margin: 4px 0 6px; font: 300 30px/1.1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.small { margin: 0 auto 18px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--pearl-2); text-align: center; }
.field { display: block; margin: 0 0 8px; font: 400 13px/1.3 var(--font); letter-spacing: .08em; color: var(--pearl-2); }
.field em { font-style: italic; font-weight: 300; color: var(--pearl-3); margin-left: 4px; }
.input {
  width: 100%; height: 54px; padding: 0 18px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(21, 17, 27, .8);
  font-size: 17px; outline: none;
}
.input:focus { border-color: rgba(179, 162, 251, .6); }
.input::placeholder { color: var(--pearl-3); }
[data-panel="ask"] .small { margin-top: 4px; }

.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 14px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: transform .15s, filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn--iris { width: 100%; background: var(--iris); background-size: 220% 100%; color: var(--ink); animation: iris 12s linear infinite; }
.btn--iris:hover { filter: brightness(1.06); }
.btn--line { background: rgba(21, 17, 27, .6); border-color: rgba(244, 238, 246, .35); color: var(--pearl); }
.btn--text { width: 100%; background: none; color: var(--pearl-3); }
.row .btn--iris { flex: 1 1 100%; }
.btn:focus-visible, .modes button:focus-visible, .input:focus-visible, .tcard:focus-visible { outline: 2px solid var(--pearl); outline-offset: 3px; }

.pos {
  margin-top: 16px; padding: 18px 18px 20px;
  border: 1px solid var(--line); border-radius: 22px;
  background: rgba(21, 17, 27, .72);
  animation: rise .7s .2s both;
}
.pos__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.label { margin: 0; font: italic 300 18px/1.1 var(--font); white-space: nowrap; }
.pos__card { font: 400 13px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; text-align: right; color: var(--pearl-2); }
.pos p:last-child { margin: 0; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.summary {
  margin-top: 20px; padding: 22px 20px; text-align: center;
  border: 1.5px solid transparent; border-radius: 24px;
  background: linear-gradient(#17121e, #17121e) padding-box, var(--iris) border-box;
  animation: rise .7s .2s both;
}
.summary .label { margin-bottom: 10px; }
.summary__text { margin: 0; font: 300 20px/1.4 var(--font); text-wrap: balance; }

/* лист оплаты */
.sheet {
  width: min(100%, 460px); max-width: 100%;
  margin: auto auto 0; padding: 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0;
  background: #120e17; color: var(--pearl);
}
.sheet::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.sheet[open] { animation: up .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes up { from { transform: translateY(100%); } }
.sheet__body { display: grid; gap: 4px; padding: 28px 22px calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.sheet__title { margin: 0; font: 300 30px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.sheet__price { margin: 10px 0 12px; font: 300 34px/1 var(--font); }
.sheet__list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--pearl-2); font-size: 15px; }
.sheet__note { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(244, 238, 246, .05); font-size: 13px; line-height: 1.45; color: var(--pearl-3); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 20;
  transform: translateX(-50%);
  padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #17121e; font-size: 13px; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  animation: rise .3s both;
}

.foot { padding-top: 44px; padding-bottom: calc(30px + env(safe-area-inset-bottom)); text-align: center; color: var(--pearl-3); font-size: 12.5px; }
.foot p { margin: 0; }
.foot__prices { margin-top: 12px !important; color: var(--pearl-2); }
.foot__links { margin-top: 10px !important; }
.foot__links a, .sheet__note a, .foot a { color: var(--pearl-2); }
.foot__who { margin-top: 6px !important; font-size: 11.5px; }

/* веер: колода рубашкой вверх, листается вбок */
.fan-wrap { margin: 0 -16px 10px; }
.fan {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.fan::-webkit-scrollbar { display: none; }
.fan__track { position: relative; height: 172px; }
.fan__card {
  position: absolute; top: 26px; width: 66px; aspect-ratio: 9 / 16;
  padding: 0; border: 0; background: none;
  container-type: inline-size;
  transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 100%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: deal .55s cubic-bezier(.2, .7, .2, 1) var(--d) backwards;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .35s;
}
.fan__card .tcard__side { box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.fan__card svg { position: absolute; left: 50%; top: 47%; width: 70%; transform: translate(-50%, -50%); overflow: visible; }
.fan__card:hover, .fan__card:focus-visible { transform: translateY(calc(var(--y) - 16px)) rotate(var(--r)); z-index: 2; }
.fan__card:focus-visible { outline: 2px solid var(--pearl); outline-offset: 2px; border-radius: 6px; }
.fan__card.taken { transform: translateY(calc(var(--y) - 70px)) rotate(var(--r)) scale(.85); opacity: 0; pointer-events: none; }
@keyframes deal { from { opacity: 0; transform: translateY(60px) rotate(0deg); } }
.fan__auto { width: auto; min-height: 44px; margin: 0 auto; display: flex; }

/* витрина раскладов */
.products { display: grid; gap: 12px; }
.product {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
  padding: 18px 20px; text-align: left;
  border: 1px solid var(--line); border-radius: 22px;
  background: rgba(21, 17, 27, .72);
  cursor: pointer; transition: border-color .25s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.product:hover { border-color: rgba(179, 162, 251, .55); }
.product:active { transform: scale(.98); }
.product:focus-visible { outline: 2px solid var(--pearl); outline-offset: 3px; }
.product__title { font: 300 21px/1.15 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.product__text { grid-column: 1; font-size: 14.5px; line-height: 1.4; color: var(--pearl-2); }
.product__price { grid-column: 2; grid-row: 1 / 3; font: 300 22px/1 var(--font); white-space: nowrap; }
.back-link {
  display: block; margin: 0 0 6px; padding: 8px 0; border: 0; background: none;
  font: 400 13px/1 var(--font); letter-spacing: .08em; color: var(--pearl-3); cursor: pointer;
}
#payBtn { margin-top: 6px; }

/* год: 12 карт по месяцам */
.grid12 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; margin-bottom: 6px; }
.g12 { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.g12 .tcard { width: 100%; }
.g12 .tcard .nm { font-size: 9cqw; letter-spacing: .1em; inset-inline: 6cqw; }
.g12 .tcard .tcard__side { box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
.g12 .slot__label { font-size: 9.5px; letter-spacing: .12em; }
.g12__empty { width: 100%; aspect-ratio: 9 / 16; border: 1px dashed var(--line); border-radius: 9px; }

/* матрица по дате рождения: звезда арканов проступает в шаре */
/* звезда шире шара: по центру ставим сами, сетка прижала бы её к верху и звезда съехала бы вниз */
.mx-star { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(92vw, 390px); height: auto; aspect-ratio: 1; overflow: visible; animation: mxIn 1.8s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes mxIn { from { opacity: 0; scale: .82; rotate: -12deg; filter: blur(10px); } }
.mx-star .sq { fill: none; stroke: url(#ig); stroke-width: 1.1; opacity: .75; }
.mx-star .ln { stroke: rgba(244, 238, 246, .22); stroke-width: .8; }
.mx-star .love { stroke: url(#ig); stroke-width: .9; stroke-dasharray: 3 3; opacity: .8; }
.mx-pt { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.mx-pt circle { fill: rgba(12, 10, 16, .82); stroke: url(#ig); stroke-width: 1.2; transition: fill .25s; }
.mx-pt text { fill: var(--pearl); font: 400 17px/1 var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mx-pt.s text { font-size: 13px; }
.mx-pt.c circle { stroke-width: 2; fill: rgba(30, 22, 40, .9); }
.mx-pt.c text { font-size: 24px; font-weight: 500; }
.mx-pt:hover circle, .mx-pt:focus-visible circle, .mx-pt.on circle { fill: rgba(179, 162, 251, .38); }
.mx-pt text.glyph { fill: var(--pearl-2); font-size: 11px; }
.mx-age { fill: var(--pearl-3); font: 400 9px/1 var(--font); text-anchor: middle; dominant-baseline: central; letter-spacing: .06em; }

.mx-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0 4px; }
.mx-keys .slot { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.mx-keys .tcard { width: 100%; }
.mx-keys .tcard .nm { font-size: 9cqw; letter-spacing: .1em; inset-inline: 6cqw; }
.mx-keys .slot__label { font-size: 9.5px; letter-spacing: .12em; white-space: normal; text-align: center; line-height: 1.25; }
.mx-title { margin: 30px 0 4px; font: italic 300 22px/1.2 var(--font); text-align: center; }
.mx-title + .small { margin-bottom: 14px; }

/* поделиться */
.sheet { max-height: 100dvh; overflow-y: auto; }
.share__preview {
  display: block; width: min(42vw, 180px); aspect-ratio: 9 / 16; margin: 0 auto 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); object-fit: cover;
}
.share__nets { display: flex; gap: 8px; margin-top: 8px; }
.share__nets .btn {
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: 6px 10px;
  font-size: 12px; letter-spacing: .08em; line-height: 1.2; text-align: center; text-decoration: none;
}
.share__tip { margin: 12px auto 0; font-size: 13px; }

/* звук: кнопка в углу сцены */
.sound {
  position: absolute; top: 4px; right: 0; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(21, 17, 27, .6);
  color: var(--pearl-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound[aria-pressed="true"] .sound__off, .sound[aria-pressed="false"] .sound__on { display: none; }
.sound[aria-pressed="false"] { color: var(--pearl-3); }
.sound:focus-visible { outline: 2px solid var(--pearl); outline-offset: 3px; }

/* «Послушать»: пока шар говорит, кнопка подсвечена */
.listen.is-on { border-color: var(--lilac); color: var(--lilac); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}