/* ============================================================================
   «ПЕРЕВАЛ 1959» — игровое поле.
   Доска тёмная, улики — светлые бумажные карточки: предметы на столе.
   ========================================================================= */

.page-game { background: var(--field); }

.gx-head { max-width: 66ch; padding-block: clamp(1.4rem, 4vw, 3rem) 0; }
.gx-head h1 { font-size: clamp(2rem, 6vw, 3.6rem); }

/* --- Стартовый экран ----------------------------------------------------- */

.gx-start { display: grid; gap: clamp(1.4rem, 3vw, 3rem); grid-template-columns: 1fr; padding-block: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 940px) { .gx-start { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.gx-start-main { max-width: 56ch; }
.gx-start-side { border: var(--hair) solid var(--rule-field); padding: clamp(1rem, 2.4vw, 1.6rem); background: rgba(232,238,243,.02); }
.btn-lg { padding: 1rem 1.3rem; font-size: .8rem; }
.gx-rules { margin: 0; padding-left: 1.3rem; display: grid; gap: .7rem; font-size: .96em; }
.gx-rules li::marker { font-family: var(--f-mono); color: var(--orange-lit); }
.gx-coll { border-top: var(--hair) solid var(--rule-field); padding-top: var(--sp-3); }
.gx-coll-num { font-family: var(--f-mono); margin-top: .3rem; }
.gx-coll-num b { font-size: 2.1rem; color: var(--orange-lit); line-height: 1; }
.gx-coll-num span { font-size: .8rem; color: var(--snow-2); }

/* --- Выбор версии -------------------------------------------------------- */

.vgrid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); padding-block: clamp(1.2rem, 3vw, 2.4rem); }
.vcard {
  display: grid; gap: .7rem; text-align: left; cursor: pointer;
  background: var(--sheet); color: var(--ink);
  border: var(--hair) solid rgba(18,24,28,.24);
  padding: 1rem 1.05rem;
  font: inherit;
  box-shadow: var(--lift-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.vcard-top { display: grid; gap: .15rem; }
.vcard-name { font-family: var(--f-display); font-weight: 800; font-size: 1.22rem; line-height: 1.12; letter-spacing: -.015em; }
.vcard-who { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-3); }
.vcard-thesis { font-size: .95em; color: var(--ink-2); }
.vcard-slots ul { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .87em; color: var(--ink-2); display: grid; gap: .22rem; }
.vcard-slots .meta { color: var(--ink-3); }
.vcard-go { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }

/* --- Полоса состояния --------------------------------------------------- */

.gx-bar {
  position: sticky; top: 58px; z-index: 30;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  margin-top: var(--sp-4);
  padding: .6rem clamp(.7rem, 2vw, 1rem);
  background: color-mix(in srgb, var(--field) 94%, transparent);
  backdrop-filter: blur(6px);
  border: var(--hair) solid var(--rule-field);
}
.gx-bar-item { display: flex; flex-direction: column; gap: .12rem; }
.gx-bar-item b { font-family: var(--f-mono); font-size: .92rem; font-weight: 700; }
.gx-bar-right { margin-left: auto; flex-direction: row; align-items: center; gap: .8rem; }
.gx-bar .meta { font-size: .75rem; }

.pbar { display: inline-flex; gap: 2px; margin-top: .2rem; }
.pb-seg { width: 12px; height: 8px; background: rgba(232,238,243,.16); display: block; }
.pb-seg.on { background: var(--stamp-lit); }

/* --- Сетка игры --------------------------------------------------------- */

.gx-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; padding-block: clamp(1rem, 2.5vw, 1.8rem) var(--sp-6); align-items: start; }
@media (min-width: 1040px) { .gx-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.gx-col-main, .gx-col-side { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }

.panel { border: var(--hair) solid var(--rule-field); background: rgba(232,238,243,.022); }
.panel-head {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; justify-content: space-between;
  padding: .7rem clamp(.8rem, 2vw, 1.05rem);
  border-bottom: var(--hair) solid var(--rule-field);
}
.panel-head h2 { font-size: 1.06rem; letter-spacing: -.01em; }
.panel-note { padding: .7rem clamp(.8rem, 2vw, 1.05rem); margin: 0; font-size: .84rem; color: var(--snow-2); max-width: 70ch; }
.gx-notice { margin: 0; padding: .7rem clamp(.8rem, 2vw, 1.05rem); background: rgba(255,97,87,.12); color: var(--stamp-lit); font-family: var(--f-mono); font-size: .78rem; }

/* --- Цепочка версии ----------------------------------------------------- */

.chain { display: grid; }
.link { position: relative; border-top: var(--hair) solid var(--rule-field); }
.link-main {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit;
  padding: .85rem clamp(.8rem, 2vw, 1.05rem); cursor: pointer;
  transition: background .16s var(--ease);
}
.link-main:hover { background: rgba(232,238,243,.045); }
.link-no { color: var(--snow-3); font-size: .8rem; }
.link-body { display: grid; gap: .18rem; }
.link-label { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--snow-3); }
.link-fact { font-size: 1rem; }
.link-empty { font-size: .92rem; color: var(--snow-3); font-style: italic; }
.link-badge { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: .16rem .4rem; border: 1px solid currentColor; white-space: nowrap; }
.badge-empty { color: var(--snow-3); border-style: dotted; }
.badge-weak { color: var(--orange-lit); border-style: dashed; }
.badge-thin { color: var(--orange-lit); border-style: dashed; }
.badge-held { color: var(--ok-lit); }
.badge-broken { color: var(--stamp-lit); }
.link.is-broken .link-body { opacity: .55; }
.link.is-broken .link-fact { text-decoration: line-through; text-decoration-color: var(--stamp-lit); }
.link.is-broken { background: repeating-linear-gradient(45deg, rgba(255,97,87,.05) 0 6px, transparent 6px 12px); }
.link.is-sel { background: rgba(255,122,69,.1); }
.link.is-hit { background: rgba(255,97,87,.12); }
.link-x {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer;
  color: var(--snow-3); font-size: 1.05rem;
}
.link-x:hover { color: var(--snow); }
.link-hit-mark {
  position: absolute; right: .8rem; top: -.55rem;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stamp-lit); background: var(--field); padding: 0 .3rem;
}
.link.is-hit .link-main { animation: gx-hit .45s var(--ease-out); }
@keyframes gx-hit { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 60% { transform: translateX(2px); } 100% { transform: translateX(0); } }

/* --- Скептик ------------------------------------------------------------ */

.panel-skeptic.is-quiet .skeptic-quiet { padding: .8rem clamp(.8rem, 2vw, 1.05rem); margin: 0; color: var(--snow-3); font-size: .9rem; }
.panel-skeptic.is-hit { border-color: rgba(255,97,87,.5); }
.panel-skeptic.is-hit .panel-head { border-bottom-color: rgba(255,97,87,.5); }
.skeptic-say {
  margin: 0; padding: clamp(.9rem, 2.4vw, 1.3rem) clamp(.9rem, 2vw, 1.2rem);
  font-family: var(--f-read); font-size: 1.1rem; line-height: 1.45; color: var(--snow);
  border-left: 0; background: rgba(255,97,87,.06);
}
.skeptic-say::before { content: "«"; }
.skeptic-say::after { content: "»"; }
.skeptic-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding: .9rem clamp(.8rem, 2vw, 1.05rem) 0; }
.btn-danger { border-color: rgba(255,97,87,.55); color: var(--stamp-lit); }
.btn-danger:hover { border-color: var(--stamp-lit); }

/* --- Рука с уликами ----------------------------------------------------- */

.hand { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); padding: clamp(.8rem, 2vw, 1.05rem); }
.fcard {
  position: relative; display: grid; gap: .34rem; align-content: start; text-align: left; cursor: pointer;
  background: var(--sheet); color: var(--ink);
  border: var(--hair) solid rgba(18,24,28,.26);
  padding: .75rem .8rem; font: inherit;
  box-shadow: var(--lift-1);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.fcard:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.fcard.is-sel { outline: 2px solid var(--orange-lit); outline-offset: 1px; transform: translateY(-3px); }
.fcard.can-answer::after {
  content: ""; position: absolute; right: .5rem; top: .5rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok-ink);
}
.fcard-kind { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.fcard-title { font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1.18; }
.fcard-text { font-size: .88em; color: var(--ink-2); line-height: 1.42; }
.fcard-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .1rem; }
.fcard-tags i { font-family: var(--f-mono); font-style: normal; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid rgba(18,24,28,.2); padding: 0 .22rem; }
.fcard-src { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-3); border-top: var(--hair) solid rgba(18,24,28,.14); padding-top: .3rem; margin-top: .1rem; }
.fcard.kind-document { border-top: 3px solid var(--ok-ink); }
.fcard.kind-testimony { border-top: 3px dashed var(--orange-ink); }
.fcard.kind-expert { border-top: 3px solid var(--cyan-ink); }
.fcard.kind-calc { border-top: 3px dotted var(--ink-2); }
.fcard.kind-myth { background: repeating-linear-gradient(45deg, var(--sheet) 0 8px, var(--sheet-2) 8px 9px); }

/* --- Планшет ------------------------------------------------------------ */

.board { position: relative; aspect-ratio: 620 / 330; background: var(--field-2); }
.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; gap: .12rem; align-items: center; justify-items: center;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: .5rem .4rem;            /* палец попадает без прицеливания */
}
.pin.is-top { grid-auto-flow: row; }
.pin.is-top .pin-label { order: 3; }
.pin.is-top .pin-note { order: 2; }
.pin .pin-label { text-align: center; }
.pin-dot { width: 13px; height: 13px; border: 1.6px solid var(--orange-lit); border-radius: 50%; background: var(--field-2); transition: transform .16s var(--ease), background .16s var(--ease); }
.pin:hover .pin-dot { transform: scale(1.35); background: var(--orange-lit); }
.pin-label {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; color: var(--snow);
  background: color-mix(in srgb, var(--field) 82%, transparent); padding: .05rem .25rem; white-space: nowrap;
}
.pin-label i { font-style: normal; color: var(--orange-lit); margin-left: .35rem; }
.pin-note { font-family: var(--f-mono); font-size: .75rem; color: var(--snow-3); white-space: nowrap; }
.pin.is-empty .pin-dot { border-color: var(--snow-3); }
.pin.is-empty .pin-label i { color: var(--snow-3); }
@media (max-width: 620px) { .pin-note { display: none; } .pin-label { font-size: .75rem; } }

/* --- Смена версии и журнал --------------------------------------------- */

.panel-pivot summary {
  cursor: pointer; padding: .7rem clamp(.8rem, 2vw, 1.05rem);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-2);
}
.panel-pivot summary i { font-style: normal; color: var(--snow-3); margin-left: .4rem; letter-spacing: .04em; }
.pivot-list { display: grid; padding: 0 clamp(.8rem, 2vw, 1.05rem) .9rem; }
.pv { display: grid; gap: .15rem; text-align: left; background: none; border: 0; border-top: var(--hair) solid var(--rule-field); color: inherit; font: inherit; padding: .6rem 0; cursor: pointer; }
.pv:hover b { color: var(--orange-lit); }
.pv b { font-family: var(--f-display); font-size: .96rem; }
.pv span { font-size: .8rem; color: var(--snow-3); }

.loglist { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.lg { display: grid; grid-template-columns: 4.2rem 1fr; gap: .6rem; padding: .5rem clamp(.8rem, 2vw, 1.05rem); border-top: var(--hair) solid var(--rule-field); font-size: .84rem; }
.lg:first-child { border-top: 0; }
.lg-t { font-family: var(--f-mono); font-size: .75rem; color: var(--snow-3); padding-top: .12rem; }
.lg-good .lg-text { color: var(--ok-lit); }
.lg-bad .lg-text, .lg-break .lg-text { color: var(--stamp-lit); }
.lg-attack .lg-text { color: var(--orange-lit); }
.lg-version .lg-text { color: var(--cyan-lit); }

/* --- Итог партии -------------------------------------------------------- */

.panel-over { border-color: rgba(255,97,87,.45); }
.over-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: 1fr; padding: clamp(.9rem, 2.4vw, 1.4rem); }
@media (min-width: 620px) { .over-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.over-rank-name { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.05; letter-spacing: -.02em; margin-top: .2rem; }
.over-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .7rem 1.2rem; margin: 0; }
.over-stats dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--snow-3); }
.over-stats dd { margin: .1rem 0 0; font-size: 1.02rem; }
.over-grid-line { font-size: 1.3rem; letter-spacing: .12em; padding: 0 clamp(.9rem, 2.4vw, 1.4rem); margin: 0; overflow-wrap: anywhere; }
.over-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 clamp(.9rem, 2.4vw, 1.4rem); }
.over-why { padding: 0 clamp(.9rem, 2.4vw, 1.4rem); }
.over-why summary { cursor: pointer; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-2); }
.share-box {
  display: block; width: calc(100% - 2 * clamp(.9rem, 2.4vw, 1.4rem)); margin: clamp(.9rem, 2.4vw, 1.4rem);
  background: var(--field); color: var(--snow-2); border: var(--hair) solid var(--rule-field);
  font-family: var(--f-mono); font-size: .78rem; line-height: 1.5; padding: .7rem; resize: vertical; min-height: 8.5rem;
}

/* --- Статичный текст под игрой ----------------------------------------- */

.gx-about { border-top: var(--hair) solid var(--rule-field); }
.gx-about .grid { align-items: start; }

/* Партия не может встать: осматривать нечего */
.gx-stall {
  margin: 0; padding: .7rem clamp(.8rem, 2vw, 1.05rem);
  border-top: var(--hair) solid var(--rule-field);
  font-size: .86rem; color: var(--snow-2);
}
.gx-stall .btn { margin-left: .4rem; vertical-align: middle; }

/* Архив улик на стартовом экране */
.arc-root summary, .arc summary {
  cursor: pointer; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--snow-2); padding: .4rem 0;
}
.arc summary i { font-style: normal; color: var(--orange-lit); letter-spacing: .04em; }
.arc { border-top: var(--hair) solid var(--rule-field); padding-left: .6rem; }
.arc ul { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .5rem; }
.arc li { font-size: .82rem; }
.arc-open { display: grid; gap: .15rem; padding-bottom: .5rem; border-bottom: var(--hair) solid var(--rule-field); }
.arc-open b { font-family: var(--f-display); font-size: .94rem; }
.arc-open span { color: var(--snow-2); }
.arc-open .src { font-size: .75rem; }
.arc-closed span { color: var(--snow-3); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }

/* Пустая рука: не тупик, а следующий шаг */
.hand-empty { grid-column: 1 / -1; display: grid; gap: .8rem; }
.hand-empty p { margin: 0; font-size: .88rem; color: var(--snow-2); max-width: 62ch; }
.hand-zones { display: flex; flex-wrap: wrap; gap: .4rem; }
.hand-zones .btn i { font-style: normal; color: var(--orange-lit); margin-left: .25rem; }
.hand-zones .btn[aria-disabled="true"] i { color: var(--snow-3); }

/* Присланный расклад */
.gx-invite {
  border: var(--hair) solid rgba(255,122,69,.4);
  background: rgba(255,122,69,.07);
  padding: .8rem 1rem;
  margin: 0 0 var(--sp-4);
  font-size: .92rem;
  max-width: 56ch;
}

/* --- Картинка-протокол и серия ------------------------------------------ */

.over-share { border-top: var(--hair) solid var(--rule-field); margin-top: var(--sp-4); padding: clamp(.9rem, 2.4vw, 1.4rem); }
.over-card-box { min-height: 120px; }
.over-card-wait { color: var(--snow-3); font-family: var(--f-mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .8rem; }
.over-card {
  display: block; width: 100%; max-width: 420px; height: auto;
  border: var(--hair) solid var(--rule-field); margin-bottom: var(--sp-3);
}
.over-share-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.over-actions { border-top: var(--hair) solid var(--rule-field); margin-top: var(--sp-4); padding: clamp(.9rem, 2.4vw, 1.4rem); }
.over-next {
  margin: 0; padding: .7rem clamp(.9rem, 2.4vw, 1.4rem);
  font-size: .95rem; color: var(--orange-lit);
  border-top: var(--hair) solid var(--rule-field);
}
.over-streak { margin: .7rem 0 0; color: var(--orange-lit); font-family: var(--f-mono); font-size: .8rem; }
.gx-streak { color: var(--orange-lit); font-family: var(--f-mono); font-size: .85rem; }
.gx-streak b { font-size: 1.3rem; }

/* Выбрана улика: видно, в какие звенья она ложится */
.link.is-fit { background: rgba(111, 207, 140, .07); }
.link.is-fit-strong { background: rgba(111, 207, 140, .13); }
.link.is-nofit .link-main { opacity: .5; }
.link-fit {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .02em;
  color: var(--ok-lit);
}
.link-fit.is-no { color: var(--snow-3); }

/* Улика, которая в руке одна подходит к пустому звену: тратить её не туда нельзя */
.fcard.is-only { border-color: rgba(255, 122, 69, .55); }
.fcard-only {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .02em;
  color: var(--orange-ink);
  border-top: var(--hair) dashed rgba(176, 61, 13, .4);
  padding-top: .3rem; margin-top: .1rem;
}

/* Что подойдёт в пустое звено */
.link-what {
  display: block;
  font-family: var(--f-mono); font-size: .75rem; line-height: 1.45;
  color: var(--snow-2); margin-top: .15rem;
}

/* ============================================================================
   Конструктор «Соберите свою версию»: развилки, ответы, итог.
   Те же материалы, что у поля разбора: тёмный стол, бумажные карточки.
   ========================================================================= */

.bx { padding-bottom: var(--sp-6); }

/* Ход по вопросам */
.bx-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: clamp(1.2rem, 3vw, 2rem); }
.bx-step {
  display: grid; gap: .35rem; padding: .3rem 0 .2rem; background: none; border: 0; color: var(--snow-3);
  font: inherit; text-align: left; cursor: pointer;
}
.bx-step i { display: block; height: 4px; background: rgba(232,238,243,.14); transition: background .2s var(--ease); }
.bx-step span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-step.is-done i { background: var(--snow-3); }
.bx-step.is-done span { color: var(--snow-2); }
.bx-step.is-now i { background: var(--orange-lit); }
.bx-step.is-now span { color: var(--orange-lit); }
.bx-step[aria-disabled="true"] { cursor: default; }
@media (max-width: 520px) { .bx-step span { font-size: .62rem; letter-spacing: .02em; } }

/* Вопрос */
.bx-q { max-width: 70ch; padding-top: clamp(1.2rem, 3vw, 2.2rem); }
.bx-q-title { font-size: clamp(1.6rem, 4.6vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em; margin-top: .4rem; }
.bx-known {
  margin-top: var(--sp-3); padding: .8rem 1rem; max-width: 64ch;
  border-left: 3px solid var(--ok-lit); background: rgba(111,207,140,.06);
}
.bx-known p { margin: .25rem 0 0; color: var(--snow); font-size: .98rem; }
.bx-known .src-line { margin-top: .4rem; }

/* Ответы — бумажные карточки */
.bx-opts {
  display: grid; gap: .7rem; padding-top: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.bx-opt {
  position: relative; display: grid; gap: .35rem; align-content: start; text-align: left; cursor: pointer;
  background: var(--sheet); color: var(--ink); font: inherit;
  border: var(--hair) solid rgba(18,24,28,.24); padding: .85rem .9rem 1rem;
  box-shadow: var(--lift-1);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), outline-color .16s var(--ease);
  outline: 2px solid transparent; outline-offset: 2px;
}
.bx-opt:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.bx-opt-title { font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; line-height: 1.15; letter-spacing: -.01em; }
.bx-opt-text { font-size: .9em; line-height: 1.42; color: var(--ink-2); }
.bx-opt.is-on { outline-color: var(--orange-lit); transform: translateY(-3px); box-shadow: var(--lift-2); }
.bx-opt-mark {
  justify-self: start; margin-top: .2rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-ink); border: 1px solid currentColor; padding: .08rem .35rem;
}
.bx-opt.is-open { background: transparent; color: var(--snow); border: var(--hair) dashed var(--rule-field-strong); box-shadow: none; }
.bx-opt.is-open .bx-opt-text { color: var(--snow-2); }
.bx-opt.is-open .bx-opt-mark { color: var(--orange-lit); }
.bx-opts.is-nudge { animation: gx-hit .45s var(--ease-out); }

/* Что за и что против */
.bx-reveal { margin-top: var(--sp-4); }
.bx-reveal:empty { display: none; }
.bx-ev { animation: bx-in .35s var(--ease-out); }
@keyframes bx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bx-ev-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bx-ev-grid { grid-template-columns: 1fr 1fr; } }
.bx-ev-col { padding: .85rem clamp(.8rem, 2vw, 1.05rem); border-top: var(--hair) solid var(--rule-field); }
.bx-ev-col p { margin: .3rem 0 0; font-size: .98rem; }
.bx-ev-col.is-pro .meta { color: var(--ok-lit); }
.bx-ev-col.is-con .meta { color: var(--stamp-lit); }
@media (min-width: 760px) { .bx-ev-col.is-con { border-left: var(--hair) solid var(--rule-field); } }
.bx-ev .src-line { margin-top: .45rem; }

.bx-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: var(--sp-4); }
.bx-nav .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (max-width: 620px) {
  .bx-nav { position: sticky; bottom: 0; z-index: 20; margin-inline: calc(-1 * var(--pad)); padding: .7rem var(--pad);
    background: color-mix(in srgb, var(--field) 92%, transparent); backdrop-filter: blur(6px);
    border-top: var(--hair) solid var(--rule-field); }
  .bx-nav .btn { flex: 1 1 0; justify-content: center; }
}

/* Старт */
.bx-invite { border: var(--hair) solid rgba(255,122,69,.45); background: rgba(255,122,69,.07); padding: .9rem 1rem; margin-bottom: var(--sp-4); }
.bx-invite-title { margin: .3rem 0 .4rem; font-size: 1.08rem; }
.bx-last { color: var(--snow-2); font-size: .95rem; }
.bx-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--cyan-lit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Итог: оценка */
.bx-score-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.8rem); align-items: center; padding: clamp(.9rem, 2.4vw, 1.4rem); }
.bx-score-num { margin: 0; font-family: var(--f-display); font-weight: 800; line-height: .9; display: flex; align-items: baseline; gap: .3rem; }
.bx-score-num b { font-size: clamp(4rem, 13vw, 6.4rem); letter-spacing: -.04em; }
.bx-score-num span { font-size: 1.2rem; color: var(--snow-2); }
.bx-score-verdict { margin: .2rem 0 .35rem; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.25rem, 3.4vw, 1.7rem); line-height: 1.1; }
.bx-score.is-work .bx-score-num b, .bx-score.is-work .bx-score-verdict { color: var(--ok-lit); }
.bx-score.is-edge .bx-score-num b, .bx-score.is-edge .bx-score-verdict,
.bx-score.is-weak .bx-score-num b, .bx-score.is-weak .bx-score-verdict { color: var(--orange-lit); }
.bx-score.is-refuted .bx-score-num b, .bx-score.is-refuted .bx-score-verdict { color: var(--stamp-lit); }
.bx-score.is-honest .bx-score-num b { color: var(--snow-2); }
@media (max-width: 460px) { .bx-score-top { grid-template-columns: 1fr; } }

.bx-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: var(--hair) solid var(--rule-field); }
@media (min-width: 700px) { .bx-checklist { grid-template-columns: 1fr 1fr; } }
.bx-chk { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .55rem clamp(.8rem, 2vw, 1.05rem); border-bottom: var(--hair) solid var(--rule-field); }
.bx-chk b { font-family: var(--f-mono); font-size: .95rem; line-height: 1.3; }
.bx-chk-label { display: block; font-size: .95rem; }
.bx-chk-hint { display: block; font-size: .8rem; color: var(--snow-3); line-height: 1.35; }
.bx-chk.is-ok b { color: var(--ok-lit); }
.bx-chk.is-half b { color: var(--orange-lit); }
.bx-chk.is-no b { color: var(--stamp-lit); }
.bx-chk.is-no .bx-chk-label { color: var(--snow-2); }
.bx-clash { padding: .8rem clamp(.8rem, 2vw, 1.05rem); background: rgba(255,97,87,.08); border-bottom: var(--hair) solid var(--rule-field); }
.bx-clash .meta { color: var(--stamp-lit); }
.bx-clash ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .92rem; }

/* Итог: прочее */
.bx-weak .bx-pad { padding: .5rem clamp(.8rem, 2vw, 1.05rem) 0; margin: 0; }
.bx-share-body { padding: clamp(.8rem, 2vw, 1.05rem); display: grid; gap: .8rem; }
.bx-name { display: grid; gap: .3rem; }
.bx-name input {
  font: inherit; font-size: 1rem; color: var(--snow); background: var(--field); width: 100%;
  border: var(--hair) solid var(--rule-field-strong); padding: .55rem .7rem;
}
.bx-name input:focus { outline: 2px solid var(--orange-lit); outline-offset: 1px; }
.bx-card { max-width: 300px; margin-bottom: 0; }
.bx-flush { padding: 0; }
.bx-close { margin: 0; padding: .8rem clamp(.8rem, 2vw, 1.05rem); font-size: .98rem; }
.bx-more { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: clamp(.8rem, 2vw, 1.05rem); }

.bx-cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bx-cmp-table th, .bx-cmp-table td { text-align: left; padding: .55rem clamp(.6rem, 1.6vw, .9rem); border-bottom: var(--hair) solid var(--rule-field); vertical-align: top; }
.bx-cmp-table thead th { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-3); font-weight: 400; }
.bx-cmp-table tbody th { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-3); font-weight: 400; white-space: nowrap; }
.bx-cmp-table tr.is-same td:last-child { color: var(--ok-lit); }
.bx-cmp-table tr.is-diff td:last-child { color: var(--orange-lit); }
.bx-cmp-table tr.is-diff td { color: var(--snow); }

@media (prefers-reduced-motion: reduce) {
  .bx-ev, .bx-opts.is-nudge { animation: none; }
  .bx-opt, .bx-opt:hover, .bx-opt.is-on { transition: none; transform: none; }
}
