/* ============================================================
   SOLEMARE — полноэкранный квиз
   Проектировался от тапа: ни одно состояние не требует наведения
   мышью. Наведение добавляется сверху только на десктопе.
   ============================================================ */

.quiz {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.quiz[hidden] { display: none; }

/* --- Фото-полотно: два слоя, чтобы кадры перетекали, а не мигали --- */

.quiz-bg { position: absolute; inset: 0; z-index: -2; background: var(--ink-deep); }
.quiz-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.quiz-bg img.is-active { opacity: 1; }
.quiz::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ink-deep) 82%, transparent) 0%,
    color-mix(in oklch, var(--ink-deep) 62%, transparent) 40%,
    color-mix(in oklch, var(--ink-deep) 92%, transparent) 100%);
  pointer-events: none;
}

/* --- Верхняя панель: назад, прогресс, закрыть --- */

.quiz-top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--gutter);
  padding-top: max(var(--s2), env(safe-area-inset-top));
}
.quiz-icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid color-mix(in oklch, var(--paper) 30%, transparent);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.quiz-icon-btn:hover { background: color-mix(in oklch, var(--paper) 12%, transparent); }
.quiz-icon-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.quiz-icon-btn[disabled] { opacity: 0.3; pointer-events: none; }
.quiz-icon-btn svg { width: 20px; height: 20px; }

.quiz-progress { display: flex; align-items: center; gap: var(--s2); margin-inline: auto; }
.quiz-progress svg { width: 40px; height: 40px; flex: none; }
.quiz-step {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

/* --- Сцена --- */

.quiz-stage {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s3) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
}
.quiz-inner { width: 100%; max-width: 900px; margin-inline: auto; }

.quiz-fade { animation: quizIn 520ms var(--ease) both; }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.quiz h2 { font-size: clamp(1.6rem, 5.2vw, 2.6rem); margin-bottom: var(--s2); }
.quiz-hint {
  font-size: var(--t-small);
  color: color-mix(in oklch, var(--sun) 90%, transparent);
  margin-bottom: var(--s3);
}
.quiz-text { color: color-mix(in oklch, var(--paper) 78%, transparent); max-width: 52ch; }

.quiz-teaser-list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
  color: color-mix(in oklch, var(--paper) 78%, transparent);
}
.quiz-teaser-list li { display: flex; gap: var(--s2); }
.quiz-teaser-list li::before { content: '—'; color: var(--sun); flex: none; }

/* --- Ответы плитками --- */

.quiz-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
  margin-top: var(--s4);
}
/* при нечётном числе вариантов последняя карточка занимает всю ширину,
   иначе она висит одинокой половинкой */
@media (max-width: 719px) {
  .quiz-tiles > :last-child:nth-child(odd) { grid-column: span 2; }
  /* 3:2, а не 2:1: на 2:1 у фигуры в полный рост срезало голову */
  .quiz-tiles > :last-child:nth-child(odd) img { aspect-ratio: 3 / 2; }
}
@media (min-width: 720px) { .quiz-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }

.quiz-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-card);
  overflow: hidden;
  background: color-mix(in oklch, var(--paper) 10%, transparent);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
/* Кадрируем от верхней трети: на плитках фигуры стоят в полный рост,
   и при обрезке по центру им срезало головы. */
.quiz-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.quiz-tile span {
  position: absolute;
  inset: auto 0 0;
  padding: var(--s4) var(--s2) var(--s2);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--paper);
  background: linear-gradient(to top,
    color-mix(in oklch, var(--ink-deep) 88%, transparent), transparent);
}
.quiz-tile:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.quiz-tile.is-picked { border-color: var(--sun); transform: scale(0.97); }

/* запасной вид плитки, когда фотография не подгрузилась */
.quiz-tile.no-img { aspect-ratio: 1; background: linear-gradient(150deg, var(--ink) 0%, var(--ink-deep) 100%); }
.quiz-tile.no-img img { display: none; }
.quiz-tile.no-img span {
  position: static;
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--s2);
  text-align: center;
  background: none;
}

/* --- Ответы текстом --- */

.quiz-list { display: grid; gap: var(--s2); margin-top: var(--s4); }
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 62px;
  padding: var(--s2) var(--s3);
  border: 1px solid color-mix(in oklch, var(--paper) 28%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in oklch, var(--ink-deep) 42%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.quiz-option:hover { border-color: color-mix(in oklch, var(--sun) 70%, transparent); }
.quiz-option:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.quiz-option .mark {
  width: 22px; height: 22px;
  flex: none;
  border: 1px solid color-mix(in oklch, var(--paper) 45%, transparent);
  border-radius: var(--r-pill);
  position: relative;
}
.quiz-option.is-picked { border-color: var(--sun); background: color-mix(in oklch, var(--ink) 62%, transparent); }
.quiz-option.is-picked .mark { background: var(--sun); border-color: var(--sun); }
.quiz-option.is-picked .mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--ink);
  clip-path: polygon(14% 46%, 6% 56%, 40% 88%, 96% 22%, 87% 14%, 39% 68%);
}

.quiz-next { margin-top: var(--s4); }
.quiz-next .btn { width: 100%; max-width: 360px; }

/* --- Экран «подбираем» --- */

.quiz-loading { display: grid; justify-items: center; gap: var(--s3); padding-block: var(--s6); text-align: center; }
.quiz-loading svg { width: 72px; height: 72px; }
.quiz-loading svg circle:last-child { animation: sunPulse 1400ms var(--ease) infinite alternate; transform-origin: center; }
@keyframes sunPulse { from { transform: scale(0.82); opacity: 0.7; } to { transform: scale(1); opacity: 1; } }

/* --- Финал: предложения под замком + форма --- */

.quiz-picks { display: grid; gap: var(--s2); margin: var(--s4) 0; }
@media (min-width: 720px) { .quiz-picks { grid-template-columns: repeat(3, 1fr); } }

.quiz-pick {
  position: relative;
  padding: var(--s3);
  border: 1px solid color-mix(in oklch, var(--paper) 22%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in oklch, var(--ink-deep) 50%, transparent);
  overflow: hidden;
}
.quiz-pick b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.quiz-pick span { font-size: var(--t-small); color: color-mix(in oklch, var(--paper) 70%, transparent); }
/* размытие снимается, когда контакт оставлен */
.quiz-pick.is-locked b,
.quiz-pick.is-locked span { filter: blur(6px); user-select: none; }
.quiz-pick b, .quiz-pick span { transition: filter var(--slow) var(--ease); }

.quiz-form { display: grid; gap: var(--s3); max-width: 460px; }
.quiz-form .field input { background: color-mix(in oklch, var(--ink-deep) 45%, transparent); }
.quiz-done { display: grid; gap: var(--s3); justify-items: start; padding-block: var(--s5); }

@media (prefers-reduced-motion: reduce) {
  .quiz-fade { animation: none; }
  .quiz-bg img { transition: none; }
  .quiz-loading svg circle:last-child { animation: none; }
}