/* ============================================================
   Музейный квест — Дарвиновский музей × ГИМ
   Дизайн-система Organic, тёмная сцена «музейный архив»
   ============================================================ */

/* --- 1. Токены ------------------------------------------------ */
:root {
  /* Тёплые нейтральные */
  --c-ink-900: #2e2b25;
  --c-ink-950: #1b1913;
  --c-cream-100: #f9f4ed;
  --c-cream-200: #eee7db;
  --c-cream-300: #dcd3c4;
  --c-cream-400: #c0b6a5;

  /* Дарвиновский музей — зелёный (sage) */
  --c-nature-200: #e1eecc;
  --c-nature-300: #ccdbb2;
  --c-nature-400: #aebf92;
  --c-nature-500: #8fa073;
  --c-nature-900: #272e1b;

  /* Исторический музей — оранжевый */
  --c-history: #ED760E;
  --c-history-light: #F7BE8B;
  --c-history-900: #402310;
  --c-history-800: #643312;

  /* Проверка ответа */
  --c-right: #3FB86B;
  --c-wrong: #E5484D;

  /* Акцент активного маршрута — переключается через <body data-museum="..."> */
  --tint: var(--c-nature-300);          /* текст, иконки, прогресс */
  --tint-fill: var(--c-nature-400);     /* заливка кнопок, звание */
  --tint-ink: var(--c-nature-900);      /* текст на заливке */
  --tint-soft: var(--c-nature-200);     /* текст подсказки */
  --tint-glow: color-mix(in srgb, var(--c-nature-500) 34%, transparent);

  /* Типографика (Rubik / Manrope — с кириллицей) */
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Скругления и поверхности */
  --r-pill: 999px;
  --r-lg: 30px;
  --r-md: 22px;
  --surface: rgba(249, 244, 237, .06);
  --surface-strong: rgba(249, 244, 237, .07);
  --surface-hover: rgba(249, 244, 237, .12);
  --border: rgba(220, 211, 196, .14);
  --text-muted: rgba(220, 211, 196, .8);
  --shadow-panel: 0 20px 48px rgba(0, 0, 0, .32);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

body[data-museum="shm"] {
  --tint: var(--c-history);
  --tint-fill: var(--c-history);
  --tint-ink: var(--c-history-900);
  --tint-soft: var(--c-history-light);
  --tint-glow: color-mix(in srgb, var(--c-history) 30%, transparent);
}

/* --- 2. База -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-cream-200);
  background: #1b1913 radial-gradient(130% 85% at 50% -10%, var(--c-nature-900) 0%, var(--c-ink-900) 48%, var(--c-ink-950) 100%) fixed;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-cream-100);
}
p { margin: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

a { color: var(--tint); text-decoration: none; }
a:hover { color: color-mix(in srgb, var(--tint) 80%, #fff); }
::selection { background: color-mix(in srgb, var(--tint) 35%, transparent); }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: var(--r-pill); }

/* Иконки Lucide, толщина линии 2.75 */
.icon {
  width: 22px; height: 22px;
  display: block; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--xs { width: 16px; height: 16px; }
.icon--sm { width: 18px; height: 18px; }
.icon--md { width: 28px; height: 28px; }
.icon--lg { width: 30px; height: 30px; }

/* --- 3. Фон --------------------------------------------------- */
.particles, .vignette { position: fixed; inset: 0; pointer-events: none; }
.particles { z-index: 0; width: 100%; height: 100%; }
.vignette { z-index: 1; background: radial-gradient(75% 55% at 50% 45%, transparent 0%, rgba(0, 0, 0, .55) 100%); }

/* --- 4. Каркас ------------------------------------------------ */
.app { position: relative; z-index: 2; min-height: 100dvh; display: flex; flex-direction: column; }

.screen { flex: 1; animation: fade .5s ease both; }

.screen--home {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(12px, 2vh, 40px) 22px calc(clamp(56px, 17vh, 110px) + env(safe-area-inset-bottom, 0px));
}

.screen--page {
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
  width: 100%; margin: 0 auto;
  padding: 10px clamp(14px, 4vw, 20px) calc(14px + env(safe-area-inset-bottom, 0px));
}
#screen-select { max-width: 1080px; gap: clamp(12px, 2vh, 24px); }
#screen-quest { max-width: 780px; }
#screen-final {
  max-width: 620px;
  align-items: center; justify-content: center; text-align: center;
  gap: clamp(10px, 1.6vh, 20px);
  padding: clamp(12px, 2.4vh, 36px) 16px calc(clamp(14px, 2.4vh, 32px) + env(safe-area-inset-bottom, 0px));
}

.footer {
  padding: 18px 22px 26px;
  text-align: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(192, 182, 165, .6);
}

.footer__link {
  padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--tint); cursor: pointer;
}
.footer__link:hover { text-decoration: underline; }

/* Появление элементов */
.rise { animation: rise .8s var(--ease) both; }
.rise--2 { animation-delay: .1s; }
.rise--3 { animation-delay: .2s; }
.rise--4 { animation-delay: .3s; }

/* --- 5. Главная ----------------------------------------------- */
.hero { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 40px); text-align: center; }
.hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: calc(-1 * clamp(4px, 1.5vh, 24px)); }

.brand { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.brand__marks { display: flex; align-items: center; }
.brand__marks .mark--history { margin-left: -22px; }
.brand__caption { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(220, 211, 196, .72); }

/* Круглые эмблемы музеев */
.mark {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid;
  backdrop-filter: blur(3px);
}
.mark--sm { width: 44px; height: 44px; }
.mark--nature  { color: var(--c-nature-300); border-color: color-mix(in srgb, var(--c-nature-400) 70%, transparent); background: color-mix(in srgb, var(--c-nature-900) 60%, transparent); }
.mark--history { color: var(--c-history);    border-color: color-mix(in srgb, var(--c-history) 70%, transparent);    background: color-mix(in srgb, var(--c-history-900) 55%, transparent); }

.hero__title {
  font-size: clamp(24px, min(11.5vw, 11vh), 88px);
  line-height: 1.02; letter-spacing: -.02em;
  max-width: 16ch; text-wrap: balance;
}
.hero__lead { max-width: 30ch; font-size: clamp(15px, 4.2vw, 18px); color: rgba(220, 211, 196, .85); }

/* --- 6. Кнопки ------------------------------------------------ */
.btn {
  flex: none;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: filter .25s, transform .25s, background .25s, opacity .25s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .4; cursor: default; filter: none; transform: none; }
.btn--block { width: 100%; }
a.btn { display: inline-flex; align-items: center; justify-content: center; }

.btn--primary { color: var(--tint-ink); background: var(--tint-fill); box-shadow: 0 14px 34px var(--tint-glow); }

.btn--hero {
  margin-top: 2px;
  min-height: clamp(58px, 9vh, 68px);
  padding: 0 clamp(36px, 9vw, 56px);
  font-size: clamp(19px, 5vw, 24px);
  color: var(--c-history-900);
  background: var(--c-history);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--c-history) 42%, transparent);
}
.btn--hero:hover { filter: none; background: color-mix(in srgb, var(--c-history) 82%, #fff); transform: translateY(-2px); }
.btn--hero:active { background: color-mix(in srgb, var(--c-history) 85%, #000); transform: translateY(1px) scale(.985); }

.btn--outline {
  min-height: 48px;
  font-size: 16px;
  color: var(--c-cream-100);
  background: color-mix(in srgb, var(--tint-fill) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint-fill) 55%, transparent);
}
.btn--outline:hover { filter: none; background: color-mix(in srgb, var(--tint-fill) 24%, transparent); }

.btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 0; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  color: rgba(220, 211, 196, .8);
  background: transparent;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.btn-link:hover { color: var(--c-cream-100); background: var(--surface); }

.btn-icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(220, 211, 196, .16);
  color: var(--c-cream-200);
  background: var(--surface-strong);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-icon:hover { background: rgba(249, 244, 237, .14); }
.btn-icon:active { transform: scale(.94); }

/* --- 7. Текстовые блоки --------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack--full { width: 100%; gap: 8px; }

.title { font-size: clamp(26px, 7vw, 44px); line-height: 1.05; }
.lead { max-width: 42ch; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.lead--center { max-width: none; }

.kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(220, 211, 196, .7); }
.kicker--muted { font-size: 10px; color: rgba(192, 182, 165, .85); }
.kicker--invite { letter-spacing: .18em; color: var(--tint); }
body[data-museum="shm"] .kicker--invite { color: color-mix(in srgb, var(--c-history) 80%, #fff); }

.meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(192, 182, 165, .88); }

.topbar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.topbar__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar__museum {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--tint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__step {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-muted); white-space: nowrap;
}

/* --- 8. Выбор музея ------------------------------------------- */
.museum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }

.museum-card {
  --card-tint: var(--c-nature-300);
  --card-border: color-mix(in srgb, var(--c-nature-400) 45%, transparent);
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px;
  text-align: left;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.museum-card--history { --card-tint: var(--c-history); --card-border: color-mix(in srgb, var(--c-history) 45%, transparent); }
.museum-card:hover { transform: translateY(-4px); background: rgba(249, 244, 237, .11); box-shadow: 0 22px 50px rgba(0, 0, 0, .4); }
.museum-card:active { transform: scale(.99); }

.museum-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.museum-card__body { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.museum-card__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--c-cream-100); }
.museum-card__sub { font-size: 14px; color: rgba(220, 211, 196, .75); }
.museum-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(220, 211, 196, .12);
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--card-tint);
  background: color-mix(in srgb, var(--card-tint) 14%, transparent);
}
.check { display: none; width: 13px; height: 13px; stroke-width: 3.2; }
.museum-card.is-done .check { display: block; }

.arrow {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--card-tint);
  background: color-mix(in srgb, var(--card-tint) 16%, transparent);
}

/* --- 9. Квест ------------------------------------------------- */
.progress { height: 5px; border-radius: var(--r-pill); overflow: hidden; background: rgba(249, 244, 237, .1); }
.progress__bar { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--tint); transition: width .5s var(--ease); }

.panel {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(16px, 4.5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-panel);
}
.panel__question { font-size: clamp(18px, 4.9vw, 26px); line-height: 1.22; text-wrap: pretty; }
.panel__note { margin-top: -6px; font-size: 13px; color: var(--tint); }

#quest-ask, #quest-reveal { display: flex; flex-direction: column; gap: 14px; }
#quest-reveal { gap: 10px; }

.options { display: flex; flex-direction: column; gap: 8px; }

/* Вариант ответа (и строка результата — та же форма) */
.option {
  --opt: var(--tint);
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 7px 16px 7px 8px;
  text-align: left;
  font-size: 14px; line-height: 1.3;
  color: var(--c-cream-100);
  background: var(--surface-strong);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .22s, border-color .22s, transform .22s;
}
.option:hover { background: rgba(249, 244, 237, .13); }
.option:active { transform: scale(.99); }
.option.is-selected { background: color-mix(in srgb, var(--opt) 18%, transparent); border-color: var(--opt); }

.option__letter {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--opt);
  background: color-mix(in srgb, var(--opt) 16%, transparent);
}
.option.is-selected .option__letter { color: var(--c-ink-900); background: var(--opt); }
.option__label { flex: 1; }

/* Строки результата */
.option--result { cursor: default; }
.option--result:hover, .option--result:active { transform: none; }
.option--right { --opt: var(--c-right); }
.option--wrong { --opt: var(--c-wrong); }
.option--result { background: color-mix(in srgb, var(--opt) 22%, transparent); border-color: var(--opt); }
.option--result:hover { background: color-mix(in srgb, var(--opt) 22%, transparent); }
.option--missed, .option--missed:hover { background: color-mix(in srgb, var(--opt) 8%, transparent); }
.option--result .option__letter { color: var(--c-ink-900); background: var(--opt); }
.option__verdict { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-align: right; color: var(--opt); }

.hint {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 13px; line-height: 1.4;
  color: var(--tint-soft);
  background: color-mix(in srgb, var(--tint-fill) 14%, transparent);
}
.hint .icon { margin-top: 1px; }

.explain {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-strong);
}
.explain__kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tint); }
.explain__text { font-size: 14px; line-height: 1.45; color: var(--c-cream-100); text-wrap: pretty; }

/* --- 10. Финал ------------------------------------------------ */
.seal {
  position: relative; flex: none;
  width: clamp(76px, 11vh, 120px); height: clamp(76px, 11vh, 120px);
  display: grid; place-items: center;
}
.seal__ring, .seal__disc { position: absolute; border-radius: var(--r-pill); }
.seal__ring { inset: 0; border: 1px dashed rgba(246, 160, 107, .45); animation: spin 26s linear infinite; }
.seal__disc {
  inset: 10px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c-nature-400) 40%, transparent), color-mix(in srgb, var(--c-history-800) 60%, transparent));
  border: 1.5px solid rgba(255, 198, 165, .55);
  box-shadow: 0 18px 44px rgba(140, 73, 26, .45);
}
.seal__icon { position: relative; width: 34px; height: 34px; stroke-width: 2.4; color: var(--c-cream-100); }

/* Звание */
.rank {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  text-align: left;
  border-radius: 28px;
  background: color-mix(in srgb, var(--tint-fill) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--tint-fill) 55%, transparent);
}
.rank__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--c-ink-900);
  background: var(--tint-fill);
}
.rank__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rank__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.1; color: var(--c-cream-100); }
.rank__note { font-size: 13px; line-height: 1.45; color: rgba(220, 211, 196, .8); text-wrap: pretty; }

/* Доп. звание: цвет задаётся классом */
.rank__bonus {
  align-self: flex-start;
  margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--c-ink-900);
  background: var(--c-cream-200);
}
.rank__bonus--history { background: var(--c-history); }
.rank__bonus--nature  { background: var(--c-nature-400); }

.stats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(220, 211, 196, .12);
}
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--c-cream-100); }
.stat__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(192, 182, 165, .88); }

/* Награда — стикерпак */
.reward {
  width: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  text-align: left;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--tint-fill) 30%, transparent);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .3);
}
.reward__head { display: flex; align-items: center; gap: 14px; }
.reward__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--tint-fill);
  background: color-mix(in srgb, var(--tint-fill) 16%, transparent);
}
.reward__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reward__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; color: var(--c-cream-100); }
.reward__sub { font-size: 13px; color: rgba(220, 211, 196, .75); }

.invite { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--c-cream-100); }

/* --- 11. Авторы ----------------------------------------------- */
#screen-authors,
#screen-feedback { max-width: 620px; }

.authors {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.author {
  display: flex; align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.25;
  color: var(--c-cream-100);
  overflow-wrap: anywhere;
}
.authors__museums { align-self: center; max-width: none; margin-top: 8px; text-align: center; }

/* --- 12. Анимации --------------------------------------------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

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