/* Печатная страница, а не «атмосферное приложение».
   Здесь намеренно нет ничего из набора, которым обычно изображают дороговизну:
   ни фонового свечения, ни зерна, ни золотых градиентов с бликом, ни искр ✦,
   ни мерцающих скелетонов, ни дышащих на холостом ходу элементов. Всё это
   украшает пустоту и с первого взгляда читается как сгенерированное.
   Работают три вещи: крупный текст, линейки как структура и один акцентный
   цвет, который появляется только там, где что-то значит — позиция карты,
   цена, ответ. Единственный богатый объект на экране — сама карта. */

:root {
  /* бумага */
  --paper-0: #0E0F13;
  --paper-1: #16181E;
  --paper-2: #1D2028;

  /* краска */
  --ink:   #EDE7DA;
  --ink-2: #D8D2C4;
  --dim:   #918C7E;    /* тёплый серый: холодный читается как системный текст */
  --faint: #625E55;

  /* один акцент, плоский */
  --gold: #C9A227;
  --gold-soft: #DFC172;

  --blood: #A8564C;    /* перевёрнутая карта, ошибки */

  --line:      rgba(237, 231, 218, .12);
  --line-gold: rgba(201, 162, 39, .34);

  /* Единственный объект со своей геометрией — карта. Всё остальное либо
     резче неё, либо вовсе без скруглений. */
  --r-sm: 2px;
  --r-card: 6px;
  --tab-h: 66px;

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
           "Noto Serif", "Droid Serif", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", sans-serif;

  /* Крупно намеренно. Этим пользуются и в двадцать, и в шестьдесят пять,
     и мелкий разреженный капслок из макетов там не читается вообще.
     Ничего меньше 15px в интерфейсе нет. */
  --t-body: 19px;
  --t-ui: 17px;
  --t-small: 15px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Без этого собственный display у элемента перебивает атрибут hidden, и
   название карты проступает раньше, чем её перевернули. */
[hidden] { display: none !important; }

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-0);
  color: var(--ink);
  font: var(--t-body)/1.6 var(--serif);
  overscroll-behavior-y: contain;
}

.screen {
  max-width: 600px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 20px
           calc(var(--tab-h) + env(safe-area-inset-bottom) + 44px);
  transition: opacity .14s ease;
}
.screen.leaving { opacity: 0; }

/* --- типографика --- */

h1 {
  font: 400 30px/1.2 var(--serif);
  letter-spacing: -.01em;
  margin: 6px 0;
  text-wrap: balance;
}
h2 { font: 400 22px/1.25 var(--serif); margin: 34px 0 12px; }
p { margin: 0 0 12px; }

.lead { color: var(--dim); font-size: var(--t-ui); margin: 0 0 24px; max-width: 33em; }
.dim { color: var(--dim); }
.small { font-size: var(--t-small); }
.center { text-align: center; }
.ui { font-family: var(--sans); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Заголовок секции: линейка снизу, без орнаментов по бокам. */
.rule {
  font: 400 20px/1.3 var(--serif);
  color: var(--ink);
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* --- кнопки --- */

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 62px; padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  font: 600 18px/1.25 var(--sans);
  cursor: pointer;
  transition: background .12s ease;
}
.btn:active { background: #262A34; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn + .btn { margin-top: 10px; }

/* Главное действие — плоская заливка акцентом. Без градиента, без блика,
   без свечения: золото здесь означает «здесь платят», а не «дорого». */
.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #17140B;
}
.btn-gold:active { background: #B08D1D; }

.btn-ghost {
  background: transparent;
  border-color: var(--line-gold);
  color: var(--gold-soft);
  font-weight: 500;
}
.btn-ghost:active { background: rgba(201, 162, 39, .08); }

.back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; color: var(--dim);
  font: 500 var(--t-ui)/1 var(--sans);
  padding: 8px 0 16px;
  cursor: pointer;
}
.back:active { color: var(--ink); }

/* --- выбор расклада --- */

.pick {
  display: block;
  width: 100%; text-align: left;
  background: none; border: 0;
  border-top: 1px solid var(--line);
  padding: 20px 2px;
  color: var(--ink); font: inherit;
  cursor: pointer;
  transition: background .12s ease;
}
.pick:last-of-type { border-bottom: 1px solid var(--line); }
.pick:active { background: var(--paper-1); }
.pick .t { display: block; font: 400 23px/1.25 var(--serif); }
.pick .s { display: block; color: var(--dim); font-size: var(--t-ui);
           font-family: var(--sans); margin-top: 6px; }
.pick .n { display: block; color: var(--faint); font-size: var(--t-small);
           font-family: var(--sans); margin-top: 8px; }

/* --- форма --- */

label {
  display: block;
  font: 500 var(--t-ui)/1.3 var(--sans);
  color: var(--dim);
  margin: 24px 0 9px;
}

input[type=text], input[type=date], textarea {
  width: 100%;
  padding: 17px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper-1);
  color: var(--ink);
  font: var(--t-body)/1.4 var(--serif);   /* меньше 16px — iOS зумит страницу */
  resize: none;
}
input:focus, textarea:focus { outline: none; border-color: var(--line-gold); }
textarea { min-height: 112px; }
::placeholder { color: var(--faint); }

.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; min-height: 58px; padding: 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper-1); color: var(--dim);
  font: 500 var(--t-ui)/1 var(--sans);
  cursor: pointer;
}
.seg button.on { border-color: var(--line-gold); color: var(--gold-soft);
                 background: var(--paper-2); }

.err { color: var(--blood); font: 500 var(--t-small)/1.4 var(--sans);
       margin-top: 10px; }

/* Разобранная дата словами — единственный способ поймать перепутанные
   день и месяц, пока человек ещё смотрит на поле. */
.date-echo {
  margin: 9px 0 0;
  font: 400 var(--t-small)/1.4 var(--sans);
  color: var(--gold-soft);
  min-height: 1.4em;
}
.ok { color: var(--gold-soft); font: 500 var(--t-ui)/1.4 var(--sans);
      margin-top: 12px; }

.promo { display: flex; gap: 8px; align-items: stretch; }
.promo input { flex: 1; text-transform: uppercase; }
.promo .btn { width: auto; padding: 0 22px; min-height: 0; }

/* --- приглашения --- */

.stages { list-style: none; padding: 0; margin: 0 0 18px; }
.stages li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-ui);
  color: var(--ink-2);
}
.stages li:last-child { border-bottom: 1px solid var(--line); }
.stages b { color: var(--gold-soft); margin-right: 8px; }

.goal {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 14px;
  margin: 16px 0 18px;
  font-size: var(--t-ui);
  color: var(--ink);
}

/* --- карта --- */

.card-wrap {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  width: min(66vw, 268px);
  margin: 0 auto 16px;
}

.card {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 171;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

/* Одна честная тень вместо трёх наслоенных. Тень здесь только у карты —
   она единственный предмет, который лежит на столе. */
.card .side {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .9);
}
.card .front { transform: rotateY(180deg); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .front.rev img { transform: rotate(180deg); }

/* Переворот — единственная анимация в интерфейсе, потому что за ней стоит
   действие человека. Карта поднимается со стола, а не крутится в плоскости. */
.card.turn { animation: turn 780ms cubic-bezier(.34, .02, .16, 1) forwards; }
@keyframes turn {
  0%   { transform: rotateY(0deg)   scale(1)    translateY(0); }
  24%  { transform: rotateY(24deg)  scale(1.04) translateY(-14px); }
  52%  { transform: rotateY(92deg)  scale(1.08) translateY(-20px); }
  80%  { transform: rotateY(160deg) scale(1.03) translateY(-7px); }
  100% { transform: rotateY(180deg) scale(1)    translateY(0); }
}
.card.flip { transform: rotateY(180deg); }   /* готовое состояние, без анимации */

.card-wrap::after {
  content: ""; position: absolute;
  left: 14%; right: 14%; bottom: -12px; height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  filter: blur(12px);
  z-index: -1;
}
.card-wrap.turning::after {
  animation: lift 780ms cubic-bezier(.34, .02, .16, 1) forwards;
}
@keyframes lift {
  0%   { transform: scale(1);   opacity: .6; }
  52%  { transform: scale(.72); opacity: .28; }
  100% { transform: scale(1);   opacity: .6; }
}

/* Статичная подсказка. Пульсирующая надпись не помогает разобраться,
   она просто дёргает глаз. */
.tap-hint {
  text-align: center;
  font: 500 var(--t-ui)/1.3 var(--sans);
  color: var(--gold-soft);
  margin: 0 0 24px;
}

.pos-title {
  font: 400 var(--t-ui)/1.35 var(--sans);
  color: var(--gold);
  text-align: center;
  margin: 0 0 14px;
}

.card-name {
  text-align: center;
  font: 400 25px/1.25 var(--serif);
  color: var(--ink);
  margin: 0 0 3px;
}
.card-state {
  display: block; text-align: center;
  font: 400 var(--t-small)/1.3 var(--sans);
  color: var(--blood);
  margin-bottom: 22px;
}
.card-state.up { color: var(--faint); }

/* --- текст разбора --- */

.block {
  max-width: 33em;
  margin: 0 auto 36px;
  color: var(--ink-2);
  font-variant-numeric: oldstyle-nums;
}
.block p { margin: 0 0 .9em; text-wrap: pretty; }
.block p:last-child { margin-bottom: 0; }
.block p:first-child .lede { font-size: 22px; line-height: 1.45; color: var(--ink); }

/* Проявление по предложениям: текст появляется в темпе речи. Без размытия —
   blur-in это спецэффект, а здесь просто говорят. */
.ph { display: inline; opacity: 0; animation: say .5s ease forwards; }
@keyframes say { to { opacity: 1 } }

.answer {
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  padding: 26px 0 24px;
  margin: 10px 0 30px;
}
.answer .cap {
  font: 400 var(--t-small)/1.3 var(--sans);
  color: var(--gold);
  margin-bottom: 12px;
}
.answer .first {
  font: 400 28px/1.25 var(--serif);
  color: var(--ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.answer .rest { font-size: var(--t-ui); color: var(--ink-2); }

/* --- пейволл --- */

.gate {
  margin: 40px -20px 0;
  padding: 32px 20px 28px;
  background: var(--paper-1);
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}
.gate-deck { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.gate-deck figure { margin: 0; width: 86px; }
.gate-deck img {
  width: 100%; aspect-ratio: 100 / 171; object-fit: cover;
  border-radius: var(--r-card); display: block;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .85);
}
.gate-hidden-count {
  font: 400 var(--t-ui)/1.3 var(--sans);
  color: var(--gold);
  text-align: center;
  margin: 0 0 22px;
}
.gate-hook {
  font: 400 22px/1.45 var(--serif);
  color: var(--ink);
  max-width: 24em; margin: 0 auto 24px;
  text-wrap: balance;
}
/* Нумерованный список вместо булитов-искр: у позиций есть порядок, и номер
   его показывает честнее любого значка. */
.gate-list {
  list-style: none; padding: 0; margin: 0 0 26px;
  counter-reset: g;
  font: 400 var(--t-ui)/1.45 var(--serif); color: var(--ink-2);
}
.gate-list li {
  counter-increment: g;
  display: flex; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.gate-list li:last-child { border-bottom: 1px solid var(--line); }
.gate-list li::before {
  content: counter(g);
  flex: none; width: 1.4em;
  font-family: var(--sans); font-size: var(--t-small);
  color: var(--faint);
  padding-top: .2em;
}

/* --- лавка --- */

.pack {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: none; border: 0;
  border-top: 1px solid var(--line);
  padding: 18px 2px;
  color: var(--ink); font: inherit;
  cursor: pointer;
  transition: background .12s ease;
}
.pack:last-of-type { border-bottom: 1px solid var(--line); }
.pack:active { background: var(--paper-1); }
.pack.best { border-left: 2px solid var(--gold); padding-left: 12px; }
.pack .t { font: 400 22px/1.2 var(--serif); }
.pack .n { display: block; font: 400 var(--t-small)/1.3 var(--sans);
           color: var(--gold-soft); margin-top: 5px; }
.pack .per { display: block; font: 400 var(--t-small)/1.3 var(--sans);
             color: var(--faint); margin-top: 4px; }
.pack .price {
  margin-left: auto; text-align: right;
  font: 400 27px/1 var(--serif); color: var(--ink);
  white-space: nowrap;
}
.pack .price small { display: block; font: 400 var(--t-small)/1 var(--sans);
                     color: var(--dim); margin-top: 6px; }

.balance {
  display: flex; align-items: baseline; gap: 9px; justify-content: center;
  padding: 18px 0 8px;
  font: 400 var(--t-ui)/1 var(--sans); color: var(--dim);
}
.balance b { font: 400 36px/1 var(--serif); color: var(--ink); }

/* --- список --- */

.row {
  display: flex; gap: 12px; align-items: flex-start;
  width: 100%; min-height: 68px; text-align: left;
  background: none; border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 2px;
  color: var(--ink); font: inherit;
  cursor: pointer;
}
.row:active { background: var(--paper-1); }
.row .t { font: 400 20px/1.3 var(--serif); }
.row .q { display: block; font: 400 var(--t-small)/1.35 var(--sans);
          color: var(--dim); margin-top: 4px; }
.row .meta {
  margin-left: auto; text-align: right; white-space: nowrap;
  font: 400 var(--t-small)/1.4 var(--sans); color: var(--faint);
}
.row .meta b { display: block; font-weight: 500; color: var(--gold); }

/* --- профиль --- */

.hero { padding: 12px 0 4px; }
.hero .sign {
  font: 400 var(--t-ui)/1 var(--sans);
  color: var(--gold);
  margin-bottom: 10px;
}
.hero h1 { margin: 0 0 8px; }

.arc { padding: 20px 0; border-bottom: 1px solid var(--line); }
.arc:first-of-type { border-top: 1px solid var(--line); }
.arc .k { font: 500 var(--t-small)/1.3 var(--sans); color: var(--dim); }
.arc .v { font: 400 25px/1.2 var(--serif); color: var(--ink);
          margin: 8px 0 6px; }
.arc .e { font-size: var(--t-ui); color: var(--ink-2); }

/* --- ожидание --- */

.wait { text-align: center; padding: 34px 0 20px; }
.wait .deck { position: relative; height: 168px; margin-bottom: 26px; }
.wait .deck i {
  position: absolute; left: 50%; top: 0;
  width: 98px; aspect-ratio: 100 / 171; margin-left: -49px;
  border-radius: var(--r-card);
  background: var(--paper-2);
  border: 1px solid var(--line);
  animation: shuffle 2.6s ease-in-out infinite;
}
.wait .deck i:nth-child(2) { animation-delay: .3s }
.wait .deck i:nth-child(3) { animation-delay: .6s }
@keyframes shuffle {
  0%, 100% { transform: translateX(0) rotate(0) }
  30%      { transform: translateX(-42px) rotate(-8deg) }
  60%      { transform: translateX(38px) rotate(7deg) }
}
.wait .say { color: var(--dim); font-size: var(--t-body); }

.dots::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots {
  0% { content: '' } 25% { content: '.' }
  50% { content: '..' } 75% { content: '...' }
}

/* Заглушки списка — просто приглушённые блоки. Бегущий по ним блик ничего
   не сообщает и выглядит как витрина, а не как загрузка. */
.skel {
  height: 68px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-1);
}

/* --- пустые состояния и ошибки --- */

.scene { padding: 26px 0 20px; }
.scene p { font: 400 20px/1.45 var(--serif); color: var(--ink-2);
           max-width: 26em; margin: 0 0 22px; text-wrap: pretty; }
.scene.bad p { color: var(--blood); }

/* --- табы --- */

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper-0);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border: 0; background: none; color: var(--faint);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  transition: color .15s ease;
}
/* Эмодзи в таббаре рисуются по-разному на каждой платформе и в сером
   выглядят как битая картинка. Свой контур одинаков везде. */
.tab-i { width: 25px; height: 25px; fill: none; stroke: currentColor;
         stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--ink); }
.tab.on::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--gold);
}
.tab:active { color: var(--ink); }

/* --- доступность --- */

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ph, .wait .deck i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .card.turn { animation-duration: 1ms; }
}