/* ─────────────────────────────────────────────────────────────
   duel-reveal-split.css — разделено поле при разкриване
   Половината поле е в моя цвят, половината в цвета на
   противника. Ако двамата сме избрали един и същ отговор,
   същият ред се разделя на две — ляво мое, дясно негово.
   ───────────────────────────────────────────────────────────── */

/* ── основата: всеки отговор може да носи два слоя цвят ───── */
.opt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.opt > * { position: relative; z-index: 2; }

/* слой, който рисува разделянето (не пипа текста) */
.opt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
  border-radius: inherit;
}

/* само моят отговор → лявата половина в моя цвят */
.opt[data-my="1"]::after {
  opacity: 1;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--me-col, #6f9f7a) 30%, transparent) 0 50%,
    transparent 50% 100%);
}

/* само неговият отговор → дясната половина в неговия цвят */
.opt[data-op="1"]:not([data-my="1"])::after {
  opacity: 1;
  background: linear-gradient(to right,
    transparent 0 50%,
    color-mix(in srgb, var(--op-col, #b8794a) 30%, transparent) 50% 100%);
}

/* и двамата на един и същ отговор → поле, разделено на две */
.opt[data-my="1"][data-op="1"]::after {
  opacity: 1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--me-col, #6f9f7a) 34%, transparent) 0 50%,
      color-mix(in srgb, var(--op-col, #b8794a) 34%, transparent) 50% 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a227 26%, transparent);
}

/* тънка разделителна линия точно по средата, когато има два цвята */
.opt[data-my="1"][data-op="1"] > .opt-split,
.opt[data-my="1"][data-op="1"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  z-index: 2;
  background: linear-gradient(to bottom,
    transparent, rgba(232, 223, 200, .55) 22%, rgba(232, 223, 200, .55) 78%, transparent);
  transform: translateX(-.5px);
  pointer-events: none;
}

/* ── редовете в списъка с отговори ───────────────────────── */
.reveal-answers > li,
#revealAnswers > li {
  position: relative;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--who, #6f9f7a) 70%, transparent);
  border-radius: 3px;
}
.reveal-answers > li.is-op,
#revealAnswers > li.is-op {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--who, #b8794a) 12%, transparent), transparent 62%);
}
.reveal-answers > li.is-me,
#revealAnswers > li.is-me {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--who, #6f9f7a) 14%, transparent), transparent 62%);
}
#revealAnswers > li .ra-name {
  color: #ece5d3;
}
#revealAnswers > li.is-me .ra-name {
  color: color-mix(in srgb, var(--who, #6f9f7a) 45%, #f2ecdc);
}
#revealAnswers > li.is-op .ra-name {
  color: color-mix(in srgb, var(--who, #b8794a) 45%, #f2ecdc);
}

/* ── мобилно: по-меки оттенъци, за да не бие текста ──────── */
@media (max-width: 700px) {
  .opt[data-my="1"]::after,
  .opt[data-op="1"]:not([data-my="1"])::after,
  .opt[data-my="1"][data-op="1"]::after {
    opacity: .85;
  }
}

/* ── без анимации при поискано намаляване на движението ──── */
@media (prefers-reduced-motion: reduce) {
  .opt::after { transition: none; }
}

/* ── цялото поле: лява половина мой цвят, дясна негов ────── */
.options.split-two {
  position: relative;
  border-radius: 14px;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--me-col, #6f9f7a) 9%, transparent) 0 50%,
      color-mix(in srgb, var(--op-col, #b8794a) 9%, transparent) 50% 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a227 10%, transparent);
  padding: 8px 6px 6px;
  margin: -14px -6px -6px;
  transition: background .25s ease;
}
/* разделител по средата на полето */
.options.split-two::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(232, 223, 200, .22) 15%, rgba(232, 223, 200, .22) 85%, transparent);
  pointer-events: none;
  z-index: 0;
}
/* етикети „аз“ / „той“ по средата на разделителя */
.options.split-two::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(14, 20, 15, .92);
  border: 1px solid rgba(201, 162, 39, .28);
  color: #b6ad97;
  font: 600 8.5px/1 system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .25s ease;
}
.options.split-two.reveal-on::after { opacity: 1; }
@media (max-width: 700px) {
  .options.split-two::after { display: none; }
}