/* Плеер 3D-разбора. --u = 1% ширины кадра, всё в оверлее масштабируется от него */
.pl { position: relative; width: 100%; --u: 8px; }
.pl-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #9fd3ff; border-radius: inherit; }
.pl-v .pl-stage { aspect-ratio: 9 / 16; }
.pl canvas { display: block; width: 100%; height: 100%; }
.pl-ov { position: absolute; inset: 0; pointer-events: none; font-family: 'Fira Sans Extra Condensed', 'Arial Narrow', sans-serif; color: #fff; }
.pl-ov > div { visibility: hidden; opacity: 0; }

.ov-chip { position: absolute; left: calc(var(--u) * 2.2); top: calc(var(--u) * 2.2); background: #ffd21f; color: #111;
  font-weight: 900; font-size: calc(var(--u) * 2.1); letter-spacing: .02em; padding: calc(var(--u) * .5) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * .8); box-shadow: 0 calc(var(--u) * .35) 0 #111; }

.ov-q { position: absolute; left: 50%; top: calc(var(--u) * 3); transform: translateX(-50%); width: 78%;
  background: rgba(14, 16, 20, .88); border-radius: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2);
  box-shadow: 0 calc(var(--u) * .6) 0 #ffd21f; }
.pl-v .ov-q { width: 88%; top: calc(var(--u) * 6); }
.ov-q-badge { display: inline-block; background: #ffd21f; color: #111; font-weight: 900; font-size: calc(var(--u) * 1.7);
  padding: calc(var(--u) * .25) calc(var(--u) * .9); border-radius: calc(var(--u) * .5); }
.ov-q-text { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 700; font-size: calc(var(--u) * 2.5); line-height: 1.18; margin-top: calc(var(--u) * .9); }
.pl-v .ov-q-text { font-size: calc(var(--u) * 4.4); }
.ov-q-ans { margin: calc(var(--u) * 1) 0 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: calc(var(--u) * .5); }
.ov-q-ans li { counter-increment: a; font-family: 'Golos Text', system-ui, sans-serif; font-size: calc(var(--u) * 1.75); line-height: 1.2;
  padding: calc(var(--u) * .45) calc(var(--u) * .9) calc(var(--u) * .45) calc(var(--u) * 3.2); position: relative;
  border-radius: calc(var(--u) * .6); background: rgba(255, 255, 255, .08); }
.pl-v .ov-q-ans li { font-size: calc(var(--u) * 3.2); padding-left: calc(var(--u) * 5.6); }
.ov-q-ans li::before { content: counter(a); position: absolute; left: calc(var(--u) * .7); top: 50%; transform: translateY(-50%);
  width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); border-radius: 50%; background: #fff; color: #111;
  font-weight: 900; display: grid; place-items: center; font-size: calc(var(--u) * 1.3); }
.pl-v .ov-q-ans li::before { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); font-size: calc(var(--u) * 2.4); }
.ov-q.long .ov-q-text { font-size: calc(var(--u) * 2.1); }
.ov-q.long .ov-q-ans li { font-size: calc(var(--u) * 1.5); }
.ov-q.xlong .ov-q-text { font-size: calc(var(--u) * 1.8); }
.ov-q.xlong .ov-q-ans li { font-size: calc(var(--u) * 1.3); }
.pl-v .ov-q.long .ov-q-text { font-size: calc(var(--u) * 3.8); }
.pl-v .ov-q.long .ov-q-ans li { font-size: calc(var(--u) * 2.8); }
.pl-v .ov-q.xlong .ov-q-text { font-size: calc(var(--u) * 3.3); }
.pl-v .ov-q.xlong .ov-q-ans li { font-size: calc(var(--u) * 2.4); }
.ov-q.reveal li { opacity: .35; }
.ov-q.reveal li.ok { opacity: 1; background: #1fbf5b; color: #fff; }
.ov-q.reveal li.ok::before { content: '✓'; color: #1fbf5b; }

.ov-big { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); white-space: nowrap;
  font-weight: 900; font-size: calc(var(--u) * 7.5); line-height: 1; text-transform: uppercase; letter-spacing: .01em;
  padding: calc(var(--u) * .9) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 1.4);
  background: #ffd21f; color: #111; box-shadow: 0 calc(var(--u) * .8) 0 #111; }
.pl-v .ov-big { font-size: calc(var(--u) * 11); top: 40%; }
.ov-big.ok { background: #1fbf5b; color: #fff; }
.ov-big.bad { background: #ff3b30; color: #fff; }

.ov-card { position: absolute; right: calc(var(--u) * 2.4); top: 50%; transform: translateY(-50%); width: 40%;
  background: #fffaf0; color: #111; border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8);
  box-shadow: 0 calc(var(--u) * .7) 0 #111; }
.pl-v .ov-card { left: 50%; right: auto; top: 26%; transform: translateX(-50%); width: 86%; }
.ov-card-title { font-weight: 900; font-size: calc(var(--u) * 2.6); text-transform: uppercase; margin-bottom: calc(var(--u) * .7); }
.pl-v .ov-card-title { font-size: calc(var(--u) * 4.6); }
.ov-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .55); }
.ov-card li { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 600; font-size: calc(var(--u) * 1.8); line-height: 1.2;
  padding: calc(var(--u) * .5) calc(var(--u) * .8) calc(var(--u) * .5) calc(var(--u) * 3.2); position: relative;
  border-radius: calc(var(--u) * .6); background: #f1e9d6; opacity: 0; transform: translateX(calc(var(--u) * 2)); transition: none; }
.pl-v .ov-card li { font-size: calc(var(--u) * 3.3); padding-left: calc(var(--u) * 5.6); }
.ov-card li.in { opacity: 1; transform: none; }
.ov-card li::before { position: absolute; left: calc(var(--u) * .8); top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 1.15em; }
.ov-card li.mark[data-ok="true"] { background: #c9f5d8; }
.ov-card li.mark[data-ok="true"]::before { content: '✓'; color: #149a47; }
.ov-card li.mark[data-ok="false"] { background: #ffd9d6; text-decoration: line-through; text-decoration-thickness: 2px; }
.ov-card li.mark[data-ok="false"]::before { content: '✕'; color: #d42a20; }

.ov-fishka { position: absolute; left: 50%; top: calc(var(--u) * 3); transform: translateX(-50%); width: 72%;
  background: #ffd21f; color: #111; border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  box-shadow: 0 calc(var(--u) * .6) 0 #111; display: flex; gap: calc(var(--u) * 1.4); align-items: center; }
.pl-v .ov-fishka { width: 88%; top: calc(var(--u) * 8); flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .6); }
.ov-fishka b { font-weight: 900; font-size: calc(var(--u) * 2); background: #111; color: #ffd21f; padding: calc(var(--u) * .3) calc(var(--u) * .9);
  border-radius: calc(var(--u) * .5); flex: none; }
.pl-v .ov-fishka b { font-size: calc(var(--u) * 3.6); }
.ov-fishka span { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 800; font-size: calc(var(--u) * 2.3); line-height: 1.15; }
.pl-v .ov-fishka span { font-size: calc(var(--u) * 4.4); }

.ov-sub { position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); width: 86%; text-align: center;
  font-weight: 900; font-size: calc(var(--u) * 4.3); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
  -webkit-text-stroke: calc(var(--u) * .5) #111; paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .45) 0 #111; }
.pl-v .ov-sub { font-size: calc(var(--u) * 7.6); bottom: calc(var(--u) * 26); -webkit-text-stroke-width: calc(var(--u) * .9); }
.ov-sub span.hot { color: #ffd21f; }

/* ---------- стиль роликов утки (реалистичный сет) ----------
   Gilroy лежит локально в fonts-local (не публикуется), на сайте подменяется Manrope */
@font-face { font-family: 'Gilroy'; font-weight: 800; src: url('../fonts-local/Gilroy-ExtraBold.otf') format('opentype'); }
@font-face { font-family: 'Gilroy'; font-weight: 700; src: url('../fonts-local/Gilroy-Bold.ttf') format('truetype'); }
.ov-title, .ov-tags { position: absolute; }
.ov-title { left: 50%; top: 9%; width: 92%; text-align: center; transform: translateX(-50%); }
.ov-title span { display: block; font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: calc(var(--u) * 10.5); line-height: .98; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 calc(var(--u) * .25) 0 #c98a1a, 0 calc(var(--u) * .5) 0 #a8680f, 0 calc(var(--u) * .75) 0 #87500a,
    0 calc(var(--u) * 1.0) 0 #6b3e07, 0 calc(var(--u) * 1.6) calc(var(--u) * 1.8) rgba(0, 0, 0, .55); }
.ov-title span:nth-child(2n) { color: #ffd23a; }
.ov-tags { left: calc(var(--u) * 4); top: calc(var(--u) * 13); display: grid; gap: calc(var(--u) * 1.2); justify-items: start; }
.tg { font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 3.2);
  letter-spacing: .02em; padding: calc(var(--u) * .7) calc(var(--u) * 1.6); border-radius: calc(var(--u) * .8); line-height: 1; }
.tg-green { background: #2fd27a; color: #072b16; }
.tg-yellow { background: #ffd23a; color: #2b2000; }
.tg-red { background: #ff4b3e; color: #fff; }
.tg-dark { background: rgba(10, 12, 14, .78); color: #fff; }

.pl-real .ov-chip { left: calc(var(--u) * 4); top: calc(var(--u) * 6); background: rgba(10, 12, 14, .72); color: #fff; box-shadow: none;
  font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 800; font-size: calc(var(--u) * 2.6); border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.6); }
.pl-real .ov-sub { font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 800; text-transform: none; letter-spacing: 0;
  font-size: calc(var(--u) * 5.6); bottom: 15%; width: 88%; line-height: 1.12; -webkit-text-stroke: calc(var(--u) * .45) rgba(0, 0, 0, .85);
  text-shadow: 0 calc(var(--u) * .3) calc(var(--u) * 1.2) rgba(0, 0, 0, .6); }
.pl-real .ov-sub span.hot { color: #ffd23a; }
.pl-real .ov-q { top: 16%; width: 88%; background: #fff; color: #111; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 4);
  box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(0, 0, 0, .35); }
.pl-real .ov-q-badge { background: #111; color: #ffd23a; font-family: 'Gilroy', 'Manrope', sans-serif; font-size: calc(var(--u) * 2.6);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.4); }
.pl-real .ov-q-text { font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 800; font-size: calc(var(--u) * 5); line-height: 1.12; margin-top: calc(var(--u) * 2.2); }
.pl-real .ov-q-ans { gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 2.6); }
.pl-real .ov-q-ans li { font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 700; background: #f1f2f4; color: #1a1d22;
  font-size: calc(var(--u) * 3.6); padding: calc(var(--u) * 1.8) calc(var(--u) * 2) calc(var(--u) * 1.8) calc(var(--u) * 8); border-radius: calc(var(--u) * 1.6); }
.pl-real .ov-q-ans li::before { background: #1a1d22; color: #fff; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); font-size: calc(var(--u) * 2.6); left: calc(var(--u) * 2); }
.pl-real .ov-q.reveal li { opacity: .45; }
.pl-real .ov-q.reveal li.ok { opacity: 1; background: #d9f7e4; color: #0b4d26; box-shadow: inset 0 0 0 calc(var(--u) * .45) #22c063; }
.pl-real .ov-q.reveal li.ok::before { background: #22c063; color: #fff; }
.pl-real .ov-fishka { top: auto; bottom: 30%; width: 86%; background: #fff; color: #111; box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(0, 0, 0, .35);
  border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 3.6); flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); }
.pl-real .ov-fishka b { background: #ffd23a; color: #2b2000; font-family: 'Gilroy', 'Manrope', sans-serif; font-size: calc(var(--u) * 2.8); }
.pl-real .ov-fishka span { font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 800; font-size: calc(var(--u) * 4.4); line-height: 1.15; }
.pl-real .ov-card { left: 50%; right: auto; top: 18%; transform: translateX(-50%); width: 86%; background: #fff; border-radius: calc(var(--u) * 3);
  padding: calc(var(--u) * 3.4); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(0, 0, 0, .35); }
.pl-real .ov-card-title { font-family: 'Gilroy', 'Manrope', sans-serif; font-size: calc(var(--u) * 4.2); margin-bottom: calc(var(--u) * 1.6); }
.pl-real .ov-card li { font-family: 'Gilroy', 'Manrope', sans-serif; font-weight: 700; font-size: calc(var(--u) * 3.8); background: #f1f2f4;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.6) calc(var(--u) * 7); border-radius: calc(var(--u) * 1.6); }
.pl-real .ov-card li::before { left: calc(var(--u) * 2.2); }