/* «Объясника» — стиль «Стикеры и бенто» (утверждён заказчиком 2026-10-13, вариант 3В).
   Чёрный фон, плоские яркие карточки с большим скруглением, сжатый жирный курсив (Roboto Condensed),
   наклейки с толстым контуром и сплошной тенью. Рисунки — в art.js. */

:root {
  --black: #000;
  --mint: #7ed8a2;
  --lilac: #e3ccf9;
  --blue: #63a4f7;
  --orange: #e65a2b;
  --yellow: #f7d54a;
  --white: #fff;
  --grey: #8a8a8a;
  --cond: "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gap: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--black); font: 600 16px/1.45 var(--sans); overflow-x: hidden; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
:where(h1, h2, h3, p, ol, ul, blockquote, figure) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { container-type: inline-size; max-width: 1180px; margin: 0 auto; padding: var(--gap) var(--gap) calc(var(--gap) + env(safe-area-inset-bottom)); }

/* ---------- Шапка ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; }
.logo {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--white); border: 3px solid var(--black); box-shadow: 0 0 0 2px var(--white);
  font: italic 900 26px/1 var(--cond); text-decoration: none; color: var(--black);
}
.top__right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Карточки ---------- */
.bento { display: grid; gap: var(--gap); }
.card { position: relative; overflow: hidden; border-radius: clamp(24px, 4cqi, 40px); padding: clamp(18px, 3.4cqi, 34px); background: var(--white); min-width: 0; }
.card--mint { background: var(--mint); }
.card--lilac { background: var(--lilac); }
.card--blue { background: var(--blue); }
.card--orange { background: var(--orange); }
.card--yellow { background: var(--yellow); }
.card--tight { padding: 12px; }
.screen + .screen { margin-top: var(--gap); }

.caps, .label { display: block; font: 800 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.big { font: italic 900 clamp(32px, 6.6cqi, 62px)/.95 var(--cond); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.big span { display: block; font-style: normal; }
.big em { display: block; font-style: italic; }

/* ---------- Кнопки-пилюли ---------- */
.actions, .res__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  border: 3px solid var(--black); background: var(--black); color: var(--white);
  font: 800 15px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .15s;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .chip:focus-visible, .linkbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--white { background: var(--white); color: var(--black); }
.btn--mint { background: var(--mint); color: var(--black); }
.btn--orange { background: var(--orange); color: var(--black); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 13px; }
.btn--wide { width: 100%; margin-top: 16px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn i { position: relative; flex: none; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid currentColor; }
/* плюс — двумя полосками, а не буквой «+»: у буквы центровка зависит от шрифта */
.btn i::before, .btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.btn i::after { transform: translate(-50%, -50%) rotate(90deg); }
.top .btn--white { border-color: var(--white); }
.top .btn:not(.btn--white) { border-color: var(--white); }
.linkbtn {
  background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: left; color: inherit;
  font: 800 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline 2px; text-underline-offset: 4px;
}

/* ---------- Старт: бегущие ленты ---------- */
.hero { position: relative; overflow: hidden; border-radius: clamp(24px, 4cqi, 40px); padding: 18px 0 26px; margin-bottom: var(--gap); }
.ribbon { overflow: hidden; padding: 5px 0; }
.ribbon:nth-child(2) { transform: rotate(-3deg); }
.ribbon:nth-child(4) { transform: rotate(2deg); }
.track { display: flex; gap: 10px; width: max-content; }
.ribbon:nth-child(3) .track { margin-left: -38%; }
@media (prefers-reduced-motion: no-preference) {
  .track { animation: marquee 26s linear infinite; }
  .ribbon:nth-child(3) .track { animation-direction: reverse; animation-duration: 30s; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.chip-big {
  flex: none; display: inline-block; padding: .04em .32em .02em; border-radius: 999px;
  font: italic 900 clamp(46px, 13cqi, 132px)/1 var(--cond); text-transform: uppercase; letter-spacing: -.01em; color: var(--black); background: var(--white);
}
.chip-big:nth-child(5n+2) { background: var(--lilac); }
.chip-big:nth-child(5n+3) { background: var(--blue); }
.chip-big:nth-child(5n+4) { background: var(--mint); }
.chip-big:nth-child(5n+5) { background: var(--orange); }
.stick { position: absolute; z-index: 2; pointer-events: none; }
.stick--glup { left: 1%; bottom: -6px; width: clamp(120px, 27cqi, 300px); transform: rotate(-6deg); }
.stick--earth { right: 1%; top: 0; width: clamp(160px, 36cqi, 400px); transform: rotate(5deg); }

.home .big { font-size: clamp(30px, 6.6cqi, 62px); }
.rules { display: grid; gap: 10px; margin-top: 12px; counter-reset: r; font: 700 17px/1.35 var(--sans); }
.rules li { position: relative; padding-left: 40px; counter-increment: r; }
.rules li::before { content: counter(r); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--black); color: var(--white); font: italic 900 18px/1 var(--cond); }
.home__meter { display: grid; align-content: center; gap: 10px; }
.home__meter p { font: 700 15px/1.35 var(--sans); }
@container (min-width: 760px) {
  .home { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .home__main { grid-row: span 2; }
}

/* ---------- Уровни ---------- */
.levels { display: grid; gap: var(--gap); margin-top: var(--gap); scroll-margin-top: 10px; }
.level { display: grid; gap: 10px; }
.level:nth-of-type(2) { background: var(--mint); }
.level:nth-of-type(3) { background: var(--blue); }
.level:nth-of-type(4) { background: var(--orange); }
.level__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.level__name { font: italic 900 clamp(32px, 6cqi, 54px)/.95 var(--cond); text-transform: uppercase; }
.level__count { font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.level__about { font: 700 16px/1.35 var(--sans); }
.level__list { display: flex; flex-wrap: wrap; gap: 6px; }
.level__list button {
  min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 3px solid var(--black); background: var(--white); cursor: pointer;
  font: 700 14px/1.25 var(--sans); text-align: left;
}
.level__list button:hover { background: var(--yellow); }
.level__best { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--black); color: var(--white); font: italic 900 14px/1.5 var(--cond); }
.toggle { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.toggle input { width: 26px; height: 26px; accent-color: var(--black); }

/* ---------- Миссия ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-radius: clamp(24px, 4cqi, 40px); background: var(--white); margin-bottom: var(--gap); }
.steps { display: flex; flex-wrap: wrap; gap: 6px; }
.steps li { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--white); border: 3px solid var(--black); font: 800 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.steps .is-now { background: var(--yellow); }
.steps .is-done { background: var(--mint); }
.steps .is-done b { font-size: 0; }
.steps .is-done b::before { content: "✓"; font-size: 14px; }
.bar__count { font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 0 8px; }
@container (max-width: 560px) { .steps li:not(.is-now) .steps__name { display: none; } }

.q { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.q--orange { background: var(--orange); }
.q--mint { background: var(--mint); }
.q--yellow { background: var(--yellow); }
.quote { font: italic 900 clamp(24px, 4.2cqi, 44px)/1.02 var(--cond); text-transform: uppercase; text-wrap: pretty; }
.quote__sub { display: inline-block; margin-bottom: 10px; padding: 4px 14px; border-radius: 999px; background: var(--white); border: 3px solid var(--black); font: 800 13px/1.3 var(--sans); letter-spacing: .06em; font-style: normal; }
.label { margin-bottom: 10px; }
.answer {
  display: block; width: 100%; min-height: 150px; padding: 16px 20px;
  border: 3px solid var(--black); border-radius: 24px; background: var(--white); color: var(--black);
  font: 500 18px/1.45 var(--sans); resize: vertical;
}
.answer::placeholder { color: var(--grey); }
.answer:focus { outline: none; box-shadow: 5px 6px 0 var(--black); }
.answer--short { min-height: 70px; }
.options { display: grid; gap: 8px; }
.option { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border: 3px solid var(--black); border-radius: 24px; background: var(--white); cursor: pointer; font: 700 17px/1.35 var(--sans); }
.option:hover { background: #fffbe6; }
.option:has(input:checked) { background: var(--yellow); box-shadow: 5px 6px 0 var(--black); }
.option input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--black); }
.reason { margin-top: 14px; }
.send {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px;
  margin: 14px calc(-1 * clamp(18px, 3.4cqi, 34px)) calc(-1 * clamp(18px, 3.4cqi, 34px)); padding: 12px clamp(18px, 3.4cqi, 34px) calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
}
.hint { font: 700 13px/1.3 var(--sans); color: #555; }
.timer { display: inline-flex; align-items: center; min-height: 54px; padding: 0 20px; border-radius: 999px; background: var(--black); color: var(--white); font: italic 900 32px/1 var(--cond); font-variant-numeric: tabular-nums; margin-right: auto; }
.timer.is-urgent { background: var(--orange); color: var(--black); }
@media (prefers-reduced-motion: no-preference) { .timer.is-urgent { animation: blink 1s steps(2) infinite; } }
@keyframes blink { 50% { opacity: .55; } }
@media (pointer: coarse) {
  .hint { display: none; }
  /* на телефоне строка с таймером и кнопкой прилипает к низу, чтобы клавиатура её не закрывала;
     поле при наборе прокручивается так, чтобы эта строка его не перекрывала */
  .send { position: sticky; bottom: 0; box-shadow: 0 -10px 12px -6px rgba(0, 0, 0, .18); }
  .answer { scroll-margin-bottom: 110px; }
}

.side { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; }
@container (min-width: 600px) { .q { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; } }
/* пока Земле нет места справа, она с терпением — компактной полоской сверху, чтобы всегда была на виду */
@container (max-width: 859px) {
  .task > .side { order: -1; grid-template-columns: 64px minmax(0, 1fr); padding: 8px 16px; }
  .task > .side > :last-child { max-width: 420px; }
}
@container (min-width: 860px) {
  .task { grid-template-columns: minmax(0, 1fr) 300px; }
  .task > :nth-child(1), .task > :nth-child(2) { grid-column: 1; }
  .task > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 10px; }
  .side { grid-template-columns: 1fr; align-content: start; }
}
@container (max-width: 520px) {
  .q { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
  .quote { font-size: clamp(21px, 6.4cqi, 28px); }
  .send .btn { flex: 1; }
}

/* ---------- Результат ---------- */
.rgrid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rgrid > .wide { grid-column: 1 / -1; }
.score { font: italic 900 clamp(96px, 26cqi, 220px)/.8 var(--cond); letter-spacing: -.03em; }
.score small { font-size: .25em; letter-spacing: 0; }
.fate { font: italic 900 clamp(40px, 9cqi, 96px)/.9 var(--cond); text-transform: uppercase; }
.patience-line { margin-top: 8px; font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.verdict { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.verdict p { font: italic 900 clamp(22px, 3.6cqi, 34px)/1.02 var(--cond); text-transform: uppercase; }
.parts { display: grid; gap: 14px; }
.part__head { display: flex; justify-content: space-between; gap: 8px; font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.part__head b { font: italic 900 22px/1 var(--cond); }
.part__bar { display: block; height: 18px; margin: 6px 0; border: 3px solid var(--black); border-radius: 999px; background: var(--white); overflow: hidden; }
.part__bar i { display: block; height: 100%; background: var(--mint); border-right: 3px solid var(--black); }
.part__why { font: 600 14px/1.35 var(--sans); }
.rows { display: grid; gap: 10px; }
.rows h3 { font: italic 900 26px/1 var(--cond); text-transform: uppercase; margin-top: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font: 700 16px/1.35 var(--sans); }
.row > b { flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 3px solid var(--black); font: 800 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.row > span { flex: 1 1 220px; min-width: 0; }
.row.is-ok > b { background: var(--mint); }
.row.is-gap > b { background: var(--yellow); }
.row.is-bad > b { background: var(--orange); }
.ideal h3 { font: italic 900 30px/1 var(--cond); text-transform: uppercase; margin-bottom: 8px; }
.ideal p { font: 600 17px/1.45 var(--sans); }
.ideal p + h3 { margin-top: 18px; }
.mine p { font: 500 17px/1.5 var(--sans); }
.mine__hit { background: var(--mint); border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 2px; }
.res__actions { margin-top: 0; }
@container (max-width: 560px) { .verdict { grid-template-columns: 76px minmax(0, 1fr); } }

/* ---------- Итог серии ---------- */
.final__list { display: grid; gap: 6px; }
.final__list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border: 3px solid var(--black); border-radius: 999px; background: var(--white); font: 700 16px/1.3 var(--sans); }
.final__list b { font: italic 900 26px/1 var(--cond); }

/* ---------- Дуэль ---------- */
.duel__msg { display: grid; justify-items: center; gap: 16px; text-align: center; }
.duel__msg > div { width: 160px; }
.duel__msg p { font: italic 900 clamp(28px, 6cqi, 44px)/1 var(--cond); text-transform: uppercase; max-width: 640px; }
.duel__wait { font: italic 900 clamp(24px, 5cqi, 36px)/1.05 var(--cond); text-transform: uppercase; }
.duel__status { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; margin: 0; padding: 10px 20px; border: 3px solid var(--black); border-radius: 999px; background: var(--orange); font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.lobby { display: grid; gap: var(--gap); }
@container (min-width: 760px) { .lobby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lobby__block + .lobby__block { margin-top: 18px; }
.lobby__label { display: block; margin-bottom: 8px; font: 800 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.lobby__link, .lobby__name { display: block; width: 100%; min-height: 54px; margin-bottom: 10px; padding: 0 22px; border: 3px solid var(--black); border-radius: 999px; background: var(--white); font: 600 16px/1 var(--sans); }
.lobby__name:focus, .lobby__link:focus { outline: none; box-shadow: 5px 6px 0 var(--black); }
.lobby__hint { font: 700 15px/1.35 var(--sans); margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; min-width: 44px; padding: 0 16px; border: 3px solid var(--black); border-radius: 999px; background: var(--white); cursor: pointer; font: 800 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.chip:hover { background: var(--yellow); }
.chip.is-on { background: var(--black); color: var(--white); }
.chip:disabled { cursor: default; opacity: .7; }
.chip:disabled:hover { background: var(--white); }
.chip.is-on:disabled:hover { background: var(--black); }
.chip--input { width: 96px; text-align: center; text-transform: none; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper__val { font: italic 900 30px/1 var(--cond); text-transform: uppercase; }
.pcards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.pcards__x { font: italic 900 40px/1 var(--cond); }
.pcard { display: grid; justify-items: center; gap: 4px; padding: 12px; border: 3px solid var(--black); border-radius: 28px; background: var(--white); text-align: center; min-width: 0; }
.pcard > div { width: 90px; }
.pcard b { font: italic 900 24px/1 var(--cond); text-transform: uppercase; overflow-wrap: anywhere; }
.pcard span { font: 800 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.pcard.is-ready { background: var(--mint); }
.pcard--empty { border-style: dashed; background: transparent; }
.board { display: grid; gap: 4px; text-align: center; }
.board__row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.board__name { flex: 1; min-width: 0; font: italic 900 clamp(22px, 5cqi, 40px)/1 var(--cond); text-transform: uppercase; overflow-wrap: anywhere; }
.board__name:first-child { text-align: right; }
.board__name:last-child { text-align: left; }
.board__score { font: italic 900 clamp(64px, 14cqi, 130px)/.85 var(--cond); }
.board__sub { font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.pside { display: grid; gap: 6px; align-content: start; }
.pside.is-win { background: var(--yellow); }
.pside__badge { justify-self: start; padding: 4px 12px; border: 3px solid var(--black); border-radius: 999px; background: var(--white); font: 800 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.pside__name { font: italic 900 clamp(24px, 5cqi, 40px)/1 var(--cond); text-transform: uppercase; overflow-wrap: anywhere; }
.pside__scene { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.pside__fate { font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.pside__score { font: italic 900 clamp(56px, 12cqi, 110px)/.85 var(--cond); }
.pside__score small { font-size: .3em; }
.pside__parts { font: 600 13px/1.35 var(--sans); }
.pside__verdict { font: italic 900 clamp(18px, 3cqi, 24px)/1.05 var(--cond); text-transform: uppercase; }
.rcols { display: grid; gap: var(--gap); }
@container (min-width: 760px) { .rcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rcol h3 { font: italic 900 30px/1 var(--cond); text-transform: uppercase; margin-bottom: 10px; }
.rcol__text { padding: 12px 16px; border: 3px solid var(--black); border-radius: 20px; background: var(--white); font: 500 15px/1.45 var(--sans); }
.rcol__q { margin-top: 12px; font: italic 900 20px/1.05 var(--cond); text-transform: uppercase; }
.rcol__why { margin-top: 8px; font: 700 14px/1.35 var(--sans); }
.rlist { display: grid; gap: 4px; margin: 10px 0; font: 600 14px/1.35 var(--sans); }
.rlist li { padding-left: 26px; position: relative; }
.rlist li::before { position: absolute; left: 0; font-weight: 900; }
.rlist li.ok::before { content: "✓"; }
.rlist li.gap::before { content: "?"; }
.rlist li.bad::before { content: "✕"; }
.rtable { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.rtable th { font: 800 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 0 6px; }
.rtable th:first-child { text-align: left; }
.rtable td { padding: 8px 12px; background: var(--white); border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); text-align: center; font: italic 900 24px/1 var(--cond); }
.rtable td:first-child { border-left: 3px solid var(--black); border-radius: 999px 0 0 999px; text-align: left; font: 700 14px/1.3 var(--sans); }
.rtable td:last-child { border-right: 3px solid var(--black); border-radius: 0 999px 999px 0; }
.rtable td.is-win { background: var(--yellow); }
.rtable td.is-boom::after { content: " ✕"; color: var(--orange); }
.rtable .linkbtn { text-transform: none; letter-spacing: 0; font-size: 14px; text-align: left; }

/* ---------- Подвал ---------- */
.foot { margin-top: var(--gap); padding: 18px 12px 6px; color: #bbb; font: 500 13px/1.45 var(--sans); }
.foot a { color: var(--white); text-decoration: underline 2px var(--mint); text-underline-offset: 3px; }

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

/* ---------- Большая сцена: взрыв или спасение ---------- */
.cinema { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px; background: var(--black); cursor: pointer; }
.cinema__earth { width: min(86vw, 62vh, 520px); }
.cinema__cap { font: italic 900 clamp(36px, 10vw, 80px)/.95 var(--cond); text-transform: uppercase; color: var(--black); background: var(--orange); padding: .05em .35em; border-radius: 999px; text-align: center; }
.cinema--save .cinema__cap { background: var(--mint); }
.cinema__skip { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- Раунд как стопка карточек: вопрос остаётся, уточнение наезжает сверху ---------- */
.bar__chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 3px solid var(--black); background: var(--yellow); font: 800 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.bar__chip.is-probe { background: var(--orange); }
.thread { display: grid; min-width: 0; }
.qcard { position: relative; border-radius: clamp(24px, 4cqi, 40px); padding: clamp(16px, 3cqi, 30px); background: var(--lilac); }
.qcard--probe { background: var(--orange); }
.qcard--bounce { background: var(--yellow); }
.qcard--back { padding: 14px clamp(16px, 3cqi, 30px) 34px; margin-bottom: -24px; transform: scale(.965); transform-origin: 50% 0; filter: saturate(.75); }
.qcard--back + .qcard--back { margin-top: -6px; }
.qcard--back .quote { font-size: clamp(16px, 2.6cqi, 22px); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.qcard--front { box-shadow: 0 -6px 0 var(--black); }
.qcard__label { display: inline-block; margin-bottom: 10px; padding: 4px 14px; border-radius: 999px; background: var(--black); color: var(--white); font: 800 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.qcard__body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.qcard__mine { margin: 0 0 10px; font: 600 14px/1.35 var(--sans); }
.qcard__mine q { font-style: italic; }
@container (min-width: 600px) { .qcard__body { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; } }
@container (max-width: 520px) { .qcard__body { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; } }
@media (prefers-reduced-motion: no-preference) {
  .qcard--new { animation: card-in .45s cubic-bezier(.2, 1.4, .4, 1); }
}
@keyframes card-in { from { transform: translateY(40px) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Итог раунда: жизнь Земли и потеря крупно ---------- */
.life { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: center; }
.life__num { font: italic 900 clamp(76px, 18cqi, 170px)/.85 var(--cond); letter-spacing: -.02em; }
.life__delta { display: inline-block; margin-top: 12px; padding: .04em .3em; border-radius: 999px; font: italic 900 clamp(48px, 11cqi, 104px)/1 var(--cond); }
.life__delta.is-loss { background: #e8352b; color: var(--white); }
.life__delta.is-none { background: var(--white); color: var(--black); border: 3px solid var(--black); font-size: clamp(30px, 6cqi, 56px); }
.life__note { margin-top: 10px; font: 800 14px/1.35 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
@container (max-width: 520px) { .life { grid-template-columns: 110px minmax(0, 1fr); } }
.qcard--done { background: var(--mint); }