/* ============================================================================
   ТВ-ВИД КВИЗА (GM4) НА БОЛЬШОМ ЭКРАНЕ — телевизор Unity в браузере.
   Скрипт: connection/_Scripts/Game/Qz_Tv.js. Картинки: /images_web/tv/gm4/
   (выгружены из Unity: tools/export_gm4_tv_sprites.py).

   Сцена — 1920×1080. Все числа ниже — пиксели экрана 1920×1080 при камере в
   покое, сняты с Game Mode 4.prefab и сцены GameMode4.unity: перспективная
   камера (FOV 60) в (0, −0.08, −0.97). Слои на разной глубине — свои планы
   (.qz-plane); камера двигает их по-разному (Qz_Tv.js). Порядок слоёв в
   разметке = порядок отрисовки Unity (слой сортировки → порядок → дальность).

   Ручки в :root — только то, чего в Unity нет: здесь ведущий ещё и игрок
   (нажимает плитки, пишет блеф, жмёт «Отправить» в выезжающей панели), а
   картинка 16:9 стоит там же, где 1:1.
   ============================================================================ */
:root {
  --qz-tv-min-w: 1000;       /* ТВ-вид — с такой ширины окна, px; уже — телефонные окна */
  --qz-tv-min-aspect: 1.2;   /* …и окно не уже этого: ширина / высота */
  --qz-side-pad: 0.005;       /* поля по бокам сцены, доля ширины окна — одинаковые при любых пропорциях */
  --qz-hover: 0.14;          /* плитка под курсором: подсветка кремовым, доля (0 — нет) */
  --qz-hover-scale: 0.97;   /* плитка при наведении слегка уменьшается */
  --qz-pick-bounce: 1.045;   /* лёгкий баунс выбранной плитки: максимальный масштаб */
  --qz-pick-ms: 300ms;       /* длительность баунса */
  --qz-unpicked-opacity: 0.6; /* непрозрачность остальных плиток после отправки ответа */
  /* Плашка блефа (автор неверного варианта) — у верхнего левого угла плитки. */
  --qz-bluff-w: 183px;     /* длина плашки (Unity 242.7); ник не влез — ужимается */
  --qz-bluff-ava: 52px;      /* аватарка автора: размер */
  --qz-bluff-ava-hide: 12px;  /* …насколько уходит под нижний край плашки (как везде на сайте) */
  --qz-bluff-ava-x: 10px;    /* …отступ от левого края плашки */
  /* Вопрос с картинкой. Центр картинки и сдвиг плиток — в px сцены 1920×1080.
     Unity: 1:1 — центр (1586, 548), 0.325 px на пиксель картинки (333 у 1024 px);
     16:9 там на весь экран, здесь стоит там же, где 1:1. */
  --qz-img-sq-x: 1564px;     /* 1:1 — картинка: центр по горизонтали */
  --qz-img-sq-y: 572px;      /* 1:1 — картинка: центр по вертикали */
  --qz-img-sq-w: 514px;      /* 1:1 — картинка: ширина */
  --qz-grid-sq-dx: -31px;      /* 1:1 — плитки: сдвиг по горизонтали */
  --qz-img-wide-x: 1506px;   /* 16:9 — картинка: центр по горизонтали */
  --qz-img-wide-y: 566px;    /* 16:9 — картинка: центр по вертикали */
  --qz-img-wide-w: 711px;    /* 16:9 — картинка: ширина */
  --qz-grid-wide-dx: -61px;    /* 16:9 — плитки: сдвиг по горизонтали */
  --qz-img-gap: 76px;       /* от плиток до картинки не меньше: не влезают — блок ответов уменьшается */
  --qz-order-ms: 220ms;      /* «по порядку»: соседи разъезжаются и плитка примагничивается за */
}

.qz-tv {
  position: fixed; inset: 0; z-index: 25;
  overflow: hidden; background: #000;
  display: none;
  -webkit-user-select: none; user-select: none;
}
body.qz-tv-on .qz-tv { display: block; }
/* Экраны, которых у ТВ нет (выбор тем, «Проверка дружбы», «Треш Квиз»…): сцена фоном, окно игры поверх.
   Окна сайта — в .wrapper (z-index 1, style.css): на время cover он поднимается над сценой. */
.qz-tv.is-cover::after {
  content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55);
}
body.qz-tv-on.qz-tv-cover .wrapper { z-index: 26; }

/* Сцена 1920×1080 вписана в окно целиком (как в Unity — 16:9), фон
   дотягивается до краёв окна сам (Qz_Tv.js: fitBackground). */
.qz-tv-stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px; margin: -540px 0 0 -960px;
  transform-origin: 50% 50%;
  font-family: 'Bebas Neue', 'Bebas Neue Pro', Impact, sans-serif;
  line-height: 1;
}
.qz-plane, .qz-layer {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 960px 540px;
  pointer-events: none;
}
.qz-plane > *, .qz-layer > *, .qz-sun2 > *, .qz-score > * { position: absolute; }
/* style.css: img { max-width: 100% } — а здесь картинки стоят в контейнерах
   нулевой ширины (точка-якорь), и сжались бы в ноль. */
.qz-tv img { max-width: none; }

/* Капитель TMP (SmallCaps): строчные — заглавными 0.8 кегля. */
.qz-sc { font-size: 0.8em; }

/* ---------------------------------------------------------------- фон -- */
/* QUIZ_BG.png, z 7, цвет спрайта 0.75 (Gamma) — то же, что яркость 0.75. */
.qz-bg {
  left: -69.3px; top: -43.5px; width: 2129px; height: 1197.6px;
  background:
    radial-gradient(ellipse 46.26% 71.57% at 50.17% 70%, rgb(255 235 231 / 0.572) 0%, rgb(255 235 231 / 0.656) 12.5%, rgb(255 235 231 / 0.668) 25%, rgb(255 235 231 / 0.521) 37.5%, rgb(255 235 231 / 0.32) 50%, rgb(255 235 231 / 0.215) 62.5%, rgb(255 235 231 / 0.109) 75%, rgb(255 235 231 / 0.033) 87.5%, rgb(255 235 231 / 0) 100%),
    radial-gradient(ellipse 117.28% 56.59% at 53.84% 54.25%, rgb(241 156 110 / 0.886) 0%, rgb(241 156 110 / 0.813) 12.5%, rgb(241 156 110 / 0.661) 25%, rgb(241 156 110 / 0.521) 37.5%, rgb(241 156 110 / 0.37) 50%, rgb(241 156 110 / 0.242) 62.5%, rgb(241 156 110 / 0.138) 75%, rgb(241 156 110 / 0.06) 87.5%, rgb(241 156 110 / 0) 100%),
    linear-gradient(228.1deg, rgb(25 47 80 / 1) 0%, rgb(38 59 91 / 1) 37%, rgb(76 88 96 / 1) 66.2%, rgb(103 114 107 / 1) 77.14%, rgb(210 185 141 / 1) 100%);
  filter: brightness(.75);
}
/* Небо — CSS вместо картинки (юзер 30.10: у сжатой картинки была видна ступенчатость). Слои подобраны
   под QUIZ_BG.png Unity по пикселям (подбор — tools/sky_fit): градиент, зарево, круги-холмы со своим
   градиентом, туман снизу. Круги и туман — дети фона (.qz-hill, .qz-fog). */
.qz-bg > i { position: absolute; display: block; }
.qz-bg > .qz-hill { border-radius: 50%; }
.qz-bg > .qz-hill.h1 { left: -12.87%; top: 67.86%; width: 29.03%; height: 51.6%;
  background: linear-gradient(to bottom, rgb(154 156 139 / 0.447) 0%, rgb(255 202 150 / 0.041) 6.02%, rgb(255 202 150 / 0) 100%); }
.qz-bg > .qz-hill.h2 { left: 10.53%; top: 60.03%; width: 31.75%; height: 56.44%;
  background: linear-gradient(to bottom, rgb(255 202 140 / 0.683) 0%, rgb(255 189 129 / 0.065) 18.73%, rgb(255 189 129 / 0) 100%); }
.qz-bg > .qz-hill.h3 { left: 50.5%; top: 66.79%; width: 24.28%; height: 43.16%;
  background: linear-gradient(to bottom, rgb(255 197 159 / 0.67) 0%, rgb(161 172 202 / 0.204) 62.95%, rgb(161 172 202 / 0) 100%); }
.qz-bg > .qz-hill.h4 { left: 65.82%; top: 57.67%; width: 32.12%; height: 57.1%;
  background: linear-gradient(to bottom, rgb(255 207 143 / 1) 0%, rgb(255 184 119 / 0.041) 43.08%, rgb(255 184 119 / 0) 100%); }
.qz-bg > .qz-fog { inset: 0;
  background:
    linear-gradient(to bottom, rgb(255 206 126 / 0) 55.74%, rgb(255 206 126 / 0.256) 71.26%, rgb(238 199 132 / 0.365) 75.46%, rgb(255 216 149 / 0.689) 100%); }
/* DarkBG (z 4) и Rays (z 3): в префабе их рендереры выключены — в Unity не
   видны, хотя код и крутит их прозрачность (Qz_Tv.js: RAYS_ON, DARK_ON). */
.qz-dark { left: -440.8px; top: -334.5px; width: 2801.5px; height: 1659.2px; background: #000; opacity: 0; }
.qz-rays {
  left: -490.3px; top: -973.9px; width: 2900.6px; height: 2900.6px; opacity: 0;
  /* Rays.png: ~31 клин через один; цвет спрайта в префабе — чёрный. */
  background: repeating-conic-gradient(#000 0deg 5.8deg, transparent 5.8deg 11.61deg);
  border-radius: 50%;
  animation: qz-rays-spin 90s linear infinite;   /* SlowRotateZ: 4°/с по часовой */
}
@keyframes qz-rays-spin { to { transform: rotate(360deg); } }

/* Облака: Cloud 2.svg, z 4.294, белые с прозрачностью 14/255, три копии подряд,
   едут влево 0.075 ед/с (= 13.33 px/с на этой глубине). */
.qz-clouds { left: -195.1px; top: 247.6px; height: 229.8px; width: 6930.3px;
  display: flex; animation: qz-clouds 173.3s linear infinite; }
.qz-clouds i {
  flex: 0 0 2310.1px; height: 100%; opacity: .0549;
  background: url('/images_web/tv/gm4/cloud.svg') center / 100% 100% no-repeat;
}
@keyframes qz-clouds { to { transform: translateX(-2310.1px); } }

/* Светлая полоса (Square, #CB984F), солнце и земля (FG.jpg — в игре импорт
   шириной 256 px, отсюда мягкость). */
.qz-square { left: -535.5px; top: 860.6px; width: 2991px; height: 477.3px; background: #CB984F; }
.qz-sun {
  left: 717.2px; top: 687.4px; width: 485.5px; height: 495.9px;
  background: url('/images_web/tv/gm4/sun.webp') center / 100% 100% no-repeat;
  rotate: 15.12deg;
}
.qz-ground {
  left: -335.9px; top: 944.2px; width: 2591.9px; height: 337.1px;
  background: url('/images_web/tv/gm4/ground.webp') center / 100% 100% no-repeat;
}

/* Sun_2 — «солнце с барабанами» на время барабанной дроби (Step_3).
   Позиции — в конце въезда; въезд — сдвиг всей группы (Qz_Tv.js). */
.qz-sun2 { display: none; }
.qz-tv.is-drums .qz-sun2 { display: block; }
.qz-sun2-sun {
  left: 1636.3px; top: 102.5px; width: 479.3px; height: 489.2px;
  background: url('/images_web/tv/gm4/sun.webp') center / 100% 100% no-repeat;
  rotate: -3.51deg;
}
.qz-drum2 {
  left: 1640.45px; top: 442.4px; width: 314.9px; height: 237.6px;
  background: url('/images_web/tv/gm4/drums2.webp') center / 100% 100% no-repeat;
  rotate: -18.63deg;
  animation: qz-drum2-y .234s linear infinite alternate;   /* 0.1 ед/с между −0.202 и −0.1786 */
}
.qz-stick {
  width: 55.9px; height: 230px; transform-origin: 42.12% 86.03%;   /* pivot спрайта */
  background: url('/images_web/tv/gm4/drums1.webp') center / 100% 100% no-repeat;
}
.qz-stick-a { left: 1501.45px; top: 335.43px;
  animation: qz-stick-a 66.7ms step-end infinite, qz-stick-a-y 19ms linear infinite alternate; }
.qz-stick-b { left: 1920.95px; top: 116.53px; scale: 1 -1;
  animation: qz-stick-b 100ms step-end infinite; }
/* SimpleDrumRotation: перескок между углами bps раз в секунду (30 и 20). */
@keyframes qz-stick-a { 0% { rotate: 62.5deg; } 50% { rotate: 70deg; } }
@keyframes qz-stick-b { 0% { rotate: 79.3deg; } 50% { rotate: 58.2deg; } }
/* DrumstickYMovement: 3 ед/с между −0.173 и −0.116 (55 px). */
@keyframes qz-stick-a-y { from { translate: 0 55px; } to { translate: 0 0; } }
@keyframes qz-drum2-y { from { translate: 0 0; } to { translate: 0 -22.6px; } }

/* Вспышка: белый 0.929 → прозрачный за 2 с. Холст на слое Front/1 — поэтому
   под землёй, плитками и текстом, но над плашкой вопроса и фоном. */
.qz-flash { position: absolute; inset: -2000px; background: #fff; opacity: 0; }

/* ------------------------------------------------------- плашка вопроса -- */
/* Question Tab, z 0.4. Въезжает слева (x −8 → 0) и уезжает вправо. */
.qz-band { left: -829.1px; top: 156.4px; width: 3670px; height: 188.1px; background: #000; }
.qz-qtext, .qz-caption {
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: visible; white-space: normal;
}
.qz-qtext { left: 488.55px; top: 182.8px; width: 949.7px; height: 134px; color: #F7E8DC; font-weight: 400; }
.qz-caption { left: 573.2px; top: 65.6px; width: 756.6px; height: 62.6px; color: #fff; font-weight: 400; }
.qz-qtext > span, .qz-caption > span, .qz-tile-text > span, .qz-name > span { display: block; width: 100%; }

/* ---------------------------------------------------------------- плитки -- */
/* GM4 Answer: фон — параллелограмм 406.1×80.2 (наклон 14.94° в самом спрайте).
   .qz-slot стоит центром фона; .qz-tile растёт из корня плитки (19.4 px выше
   центра фона). */
.qz-slot { width: 406.1px; height: 80.2px; margin: -40.1px 0 0 -203.05px; }
.qz-tile { position: absolute; inset: 0; transform-origin: 203.05px 20.7px; }
.qz-tile.is-muted { opacity: var(--qz-unpicked-opacity); }
.qz-tile { transition: opacity 180ms ease-out, transform 140ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .qz-slot:not(.is-dragging) > .qz-tile.is-live:hover { transform: scale(var(--qz-hover-scale)); }
}
.qz-tile.is-pick-bounce { animation: qz-pick-bounce var(--qz-pick-ms) ease-out; }
@keyframes qz-pick-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(var(--qz-pick-bounce)); }
  72% { transform: scale(calc(1 - (var(--qz-pick-bounce) - 1) * .35)); }
}
@media (prefers-reduced-motion: reduce) {
  .qz-tile.is-pick-bounce { animation: none; }
}
.qz-tile-shape { position: absolute; inset: 0; }
.qz-tile-bg {
  position: absolute; inset: 0; display: block; padding: 0; border: 0; margin: 0;
  background: #000; cursor: default; pointer-events: none;
  clip-path: polygon(21.6px 0, 405.7px 0, 384.3px 100%, 0.2px 100%);
  -webkit-tap-highlight-color: transparent;
}
.qz-tile-text {
  position: absolute; left: 71.75px; top: 12.6px; width: 265.6px; height: 55px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #F7E8DC; font-weight: 300; pointer-events: none;
}
.qz-tile.is-correct .qz-tile-bg { background: #F7E8DC; }
.qz-tile.is-correct .qz-tile-text { color: #543D36; }

/* Ведущий-игрок: плитку можно нажать (в Unity на ТВ такого нет). */
.qz-tile.is-live .qz-tile-bg { pointer-events: auto; cursor: pointer; }
.qz-tile.is-live .qz-tile-bg:hover {
  background: color-mix(in srgb, #F7E8DC calc(var(--qz-hover) * 100%), #000);
}
/* Мой выбор — цветом primary сайта (кремовый, тёмный текст). На показе голосов
   снимается (Qz_Tv.js), чтобы не спутать с кремовой плиткой правильного ответа. */
.qz-tile.is-picked .qz-tile-bg { background: var(--pb-cream); }
.qz-tile.is-picked .qz-tile-text { color: var(--pb-on-light); }
.qz-tile.is-live.is-picked .qz-tile-bg:hover { background: var(--pb-cream-hover); }

/* Аватарки проголосовавших: 73.1 px, за плиткой, выглядывают над верхним краем. */
.qz-avas { position: absolute; inset: 0; pointer-events: none; }
.qz-avas img { position: absolute; top: -49.55px; width: 73.1px; height: 73.1px; }

/* Плашка блефа (PlayerResultTab, #FF4545) у верхнего левого угла плитки:
   аватарка автора (тон #FF9696, как в Unity) и ник. Аватарка — как на всём
   сайте (окно голосов): стоит на нижнем крае, низ уходит под край и срезается
   формой плашки. Ник занимает остаток длины и ужимается, если не влез. */
.qz-bluff {
  position: absolute; left: -4.35px; top: -25.35px; width: var(--qz-bluff-w); height: 38.3px; display: none;
  background: #FF4545; overflow: hidden;
  clip-path: polygon(10.22px 0, 100% 0, calc(100% - 10.22px) 100%, 0 100%);
}
.qz-tile.is-bluff .qz-bluff { display: block; }
.qz-bluff img {
  position: absolute; left: var(--qz-bluff-ava-x); bottom: calc(-1 * var(--qz-bluff-ava-hide));
  width: var(--qz-bluff-ava); height: var(--qz-bluff-ava); filter: url(#qz-tint);
}
.qz-name {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--qz-bluff-ava-x) + var(--qz-bluff-ava) + 8px); right: 16px;
  display: flex; align-items: center; text-align: left; color: #F7E8DC; font-weight: 400; white-space: nowrap;
}
.qz-bluff.no-ava .qz-name { left: 18px; }

/* «По порядку» (Ordering в GM4 Answer): номер — красный Bebas Book слева,
   стрелка (single_arrow.png) справа. Пока ведущий расставляет — номер ячейки на
   каждой плитке; на показе ответа — номера и стрелки у всех плиток. */
.qz-num {
  position: absolute; left: 22.95px; top: 7.15px; width: 51.4px; height: 60.9px;
  display: none; align-items: center; justify-content: center;
  color: #FD404E; font-size: 36.2px; font-weight: 300; pointer-events: none;
}
.qz-arrow {
  position: absolute; left: 344.9px; top: 26.35px; width: 35px; height: 21.5px; display: none;
  background: url('/images_web/tv/gm4/arrow.webp') center / 100% 100% no-repeat; pointer-events: none;
}
.qz-tile.is-num .qz-num, .qz-tile.is-order .qz-num { display: flex; }
.qz-tile.is-order .qz-arrow { display: block; }
/* Перетаскивание (как список на телефоне): взятая плитка — primary, над остальными,
   соседи разъезжаются, отпущенная примагничивается к ячейке. */
.qz-tile.is-drag.is-live .qz-tile-bg { cursor: grab; touch-action: none; }
.qz-slot.is-shifting, .qz-slot.is-snapping {
  transition: left var(--qz-order-ms) var(--pb-ease), top var(--qz-order-ms) var(--pb-ease);
}
.qz-slot.is-dragging { z-index: 5; }
.qz-slot.is-dragging .qz-tile-shape { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.qz-slot.is-dragging .qz-tile.is-live .qz-tile-bg { background: var(--pb-cream); cursor: grabbing; }
.qz-slot.is-dragging .qz-tile-text { color: var(--pb-on-light); }

/* ------------------------------------------- картинка вопроса -- */
/* Справа от плиток, z 0.24, центр (1586, 548) — место квадратной картинки Unity;
   16:9 — там же. Плитки при картинке — сетка Answer Grid square (z 0.3). */
.qz-qimg { left: var(--qz-img-sq-x); top: var(--qz-img-sq-y); width: 0; height: 0; display: none; }
.qz-qimg.is-wide { left: var(--qz-img-wide-x); top: var(--qz-img-wide-y); }
.qz-qimg img { position: absolute; left: 0; top: 0; display: block; height: auto;
  width: var(--qz-img-sq-w); transform: translate(-50%, -50%); }
.qz-qimg.is-wide img { width: var(--qz-img-wide-w); }
.qz-grid-sq { translate: var(--qz-grid-sq-dx) 0; }
.qz-tv.is-qimg-wide .qz-grid-sq { translate: var(--qz-grid-wide-dx) 0; }

/* --------------------------------------------- загрузка и отсчёт -- */
.qz-dots i {
  position: absolute; top: 71.9px; width: 10.6px; height: 10.6px; margin-left: -5.3px;
  border-radius: 50%; background: #fff; scale: 0;
}
.qz-count {
  left: 660px; top: 194.8px; width: 600px; height: 400px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 310.5px; font-weight: 400; opacity: 0;
}

/* -------------------------------------------------- таймер (Main UI) -- */
/* «Timer Text» главной сцены: Bebas Bold 68 × 0.7 на 2208 → ≈41 px, слева сверху. */
.qz-timer {
  left: 59px; top: 24px; color: #fff; font-size: 41.4px; font-weight: 700; display: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- окно очков -- */
/* Окно очков — за жёлтой полосой и землёй; само окно — общее для всех режимов: tv-score.css (--tvs-*). */
.qz-score { display: none; }
.qz-tv.is-score .qz-score { display: block; }

/* Панель ведущего («Отправить», ввод блефа) — общая для ТВ-видов: _Styles/tv-panel.css. */

/* Название режима на заставке — как в «Шпионаже» (Game Name: z 0.6 → на кадре 1547×663 по центру 960, 411;
   Bebas 407 px, #FFDAB1, капитель), юзер 30.10. Скрипт — gameNameIn(). */
.qz-gname { position: absolute; left: 186.3px; top: calc(var(--qz-gname-y) - 331.45px); width: 1547.4px; height: 662.9px; opacity: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; white-space: normal;
  color: var(--qz-gname-c); font-family: 'Bebas Neue', 'Bebas Neue Pro', Impact, sans-serif; font-weight: 400; pointer-events: none; }
:root {
  --qz-gname-z: 0.66;            /* название режима на заставке: дальше камеры в покое на, единиц Unity (как «Шпионаж»: 1.36) */
  --qz-gname-y: 411px;         /* …центр по высоте на кадре в покое */
  --qz-gname-fs: 407px;        /* …кегль (длинное название уменьшается, чтобы влезть) */
  --qz-gname-c: #FFDAB1;         /* …цвет */
}
.qz-gname > span { display: block; }
.qz-gname-sc { font-size: 0.8em; }

:root { --qz-preview-results-h: 190px; --qz-preview-cover-size: 42px; }
.qz-tracks { max-height: var(--qz-preview-results-h); overflow-y: auto; margin-top: var(--tvp-inner-gap); text-align: left; }
.qz-tracks[hidden] { display: none; }
.qz-track { width: 100%; display: flex; align-items: center; gap: var(--pb-s-3); padding: var(--pb-s-2); margin: 0; border: 0; border-radius: var(--pb-r-sm); background: transparent; color: var(--pb-text); font: inherit; text-align: left; cursor: pointer; }
.qz-track:hover, .qz-track:focus-visible { background: var(--pb-surface-2); }
.qz-preview-cover { flex: none; display: grid; place-items: center; width: var(--qz-preview-cover-size); height: var(--qz-preview-cover-size); border-radius: var(--pb-r-sm); background: hsl(var(--track-hue) 25% 25%); font-size: 24px; }
.qz-track > span:last-child { min-width: 0; }
.qz-track strong, .qz-track small { display: block; font: inherit; }
.qz-track small { color: var(--pb-text-muted); font-size: var(--pb-fs-sm); }

.qz-track img { width: var(--qz-preview-cover-size); height: var(--qz-preview-cover-size); object-fit: cover; border-radius: var(--pb-r-sm); }