/* ============================================================================
   ВИДЕО-ЗАДАНИЯ КАРТОЧКИ ПЕСНИ (30.09.2026, лестница заданий карточки; разметку рисует
   public/card-tasks.js). Экран на весь экран: клип закреплён сверху, под ним вопрос,
   «▶ Смотреть отрывок» справа (под большой палец), строка и четыре варианта внизу —
   всё на одном экране 390×844 и 375×667 без прокрутки.

   Визуальный язык — тот же, что у «Сегодня» (study.css): свои токены --ct-* (ловушка
   темы: светлая тема = снятый data-theme, body с data-chrome="a" переворачивает --ink),
   литое золото на главной кнопке, скругление 14, без красного — ошибка сиреневая.
   ============================================================================ */

.ct-ov{
  --ct-bg:#EDEFF4;--ct-s1:#F5F7FA;--ct-s2:#FFFFFF;
  --ct-ink:#171B26;--ct-mut:#4E5766;--ct-dim:#5A6474;
  --ct-line:rgba(23,27,38,.13);--ct-line2:rgba(23,27,38,.24);
  --ct-iris:#6C46D8;--ct-iris-wash:rgba(108,70,216,.10);
  --ct-mint:#1E7A5A;--ct-mint-wash:rgba(30,122,90,.10);--ct-mint-line:rgba(30,122,90,.55);
  --ct-ko:#5A2FC0;--ct-mark:rgba(108,70,216,.14);
  --ct-gold:var(--gold-grad,linear-gradient(135deg,#FBE6D2,#EDC7A2 46%,#DFA97F));--ct-gold-ink:#2A1520;
  --ct-gold-line:#DFA97F;--ct-gold-ic:#B8773F;
  --ct-edge:inset 0 1px 0 rgba(255,255,255,.85);--ct-focus:#6C46D8;
}
html[data-theme="dark"] .ct-ov{
  --ct-bg:#100B18;--ct-s1:#17101F;--ct-s2:#1E1629;
  --ct-ink:#F6F1FA;--ct-mut:#C6B7D7;--ct-dim:#A594C0;
  --ct-line:rgba(255,255,255,.10);--ct-line2:rgba(255,255,255,.20);
  --ct-iris:#C888E6;--ct-iris-wash:rgba(200,136,230,.13);
  --ct-mint:#7FE8C9;--ct-mint-wash:rgba(127,232,201,.12);--ct-mint-line:rgba(127,232,201,.60);
  --ct-ko:#C6A5FF;--ct-mark:rgba(198,165,255,.18);
  --ct-gold-line:#EDC7A2;--ct-gold-ic:#EDC7A2;
  --ct-edge:inset 0 1px 0 rgba(255,255,255,.06);--ct-focus:#ffe9a8;
}
.ct-ov,.ct-ov *{box-sizing:border-box}
html.ct-lock,html.ct-lock body{overflow:hidden}
.ct-ov{position:fixed;inset:0;z-index:9500;display:none;justify-content:center;align-items:stretch;
  background:var(--ct-bg);color:var(--ct-ink);font-family:var(--f-ui,system-ui,sans-serif)}
.ct-ov.is-open{display:flex}
.ct-box{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;height:100dvh;
  background:radial-gradient(120% 30% at 50% 100%,var(--ct-iris-wash),transparent 70%),var(--ct-bg)}
@media (min-width:640px){.ct-box{border-left:1px solid var(--ct-line);border-right:1px solid var(--ct-line)}}
:where(.ct-ov) button{font-family:inherit;color:var(--ct-ink)}
.ct-ov :focus-visible{outline:2px solid var(--ct-focus);outline-offset:2px}
.ct-ov [tabindex="-1"]:focus-visible{outline:none!important;box-shadow:none!important}
.ct-ov [lang="ko"]{font-family:var(--f-ko,"Pretendard Variable"),var(--f-ui,sans-serif)}

/* ── Верх: закрыть, точки прогресса, номер вопроса ── */
.ct-top{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;
  min-height:48px;padding:2px 8px;padding-top:max(2px,env(safe-area-inset-top,0px))}
.ct-x{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--ct-mut)!important}
.ct-top-c{min-width:0;display:flex;justify-content:center}
.ct-top-t{font-size:16px;font-weight:760}
.ct-prog{display:flex;align-items:center;gap:8px;min-width:0}
.ct-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;list-style:none;margin:0;padding:0}
.ct-dots li{width:8px;height:8px;border-radius:999px;background:var(--ct-line2);transition:width .2s ease,background .2s ease}
.ct-dots li.ok{background:var(--ct-mint)}
.ct-dots li.miss{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ct-dim)}
.ct-dots li.cur{width:18px;background:var(--ct-iris)}
.ct-dots li.rt{width:6px;height:6px;align-self:center}
.ct-dots li.rt.cur{width:14px}
.ct-num{font-size:12.5px;font-weight:720;color:var(--ct-mut);font-variant-numeric:tabular-nums}

/* ── Клип: закреплён сверху, 16:9 во всю ширину ── */
.ct-clip{flex:none;position:relative;width:100%;aspect-ratio:16/9;max-height:34dvh;background:#000;overflow:hidden}
.ct-ov.is-noclip .ct-clip{display:none}
.ct-yt,.ct-yt>div,.ct-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ct-clip-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:16px;text-align:center;color:#FFF6EA;background:#150e1f;font-size:15px;font-weight:600;line-height:1.35}
.ct-clip-msg[hidden],.ct-tap[hidden]{display:none}
.ct-clip-msg .ct-btn{color:#FFF6EA!important;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.ct-tap{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.74);
  color:#fff;font-size:13px;line-height:1.3;text-align:center;pointer-events:none}

/* ── Основное поле: вопрос сверху, варианты внизу (под палец) ── */
.ct-main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;
  padding:10px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.ct-q{display:flex;flex-direction:column;gap:8px}
.ct-qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.ct-qt{min-width:0;display:flex;flex-direction:column;gap:2px}
.ct-qt b{font-size:16px;font-weight:760;line-height:1.25;outline:none}
.ct-rt{font-size:11.5px;font-weight:740;letter-spacing:.06em;text-transform:uppercase;color:var(--ct-iris)}
.ct-play{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px 0 12px;border-radius:999px;
  border:1.5px solid var(--ct-gold-line);background:var(--ct-s2);box-shadow:var(--ct-edge);
  font-size:14.5px;font-weight:720;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.ct-play svg{color:var(--ct-gold-ic)}
.ct-play:active{transform:scale(.97)}
.ct-play.is-on{background:var(--ct-gold);color:var(--ct-gold-ink)!important;border-color:transparent}
.ct-play.is-on svg{color:var(--ct-gold-ink)}

.ct-line{margin:0;font-size:20px;line-height:1.45;font-weight:650;overflow-wrap:anywhere}
.ct-line mark{background:var(--ct-mark);color:var(--ct-ko);padding:1px 5px;border-radius:6px;font-weight:780}
.ct-line mark.is-fill{background:var(--ct-mint-wash);color:var(--ct-ink);box-shadow:inset 0 -2px 0 var(--ct-mint)}
.ct-blank{display:inline-block;vertical-align:-3px;width:4em;height:1.1em;border-radius:6px;border:2px dashed var(--ct-iris);background:var(--ct-iris-wash)}
.ct-meanrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ct-mean{margin:0;font-size:14.5px;line-height:1.4;color:var(--ct-mut)}
.ct-hint{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px dashed var(--ct-line2);background:transparent;
  color:var(--ct-mut)!important;font-size:13px;font-weight:680;cursor:pointer}
.ct-hint-t{flex:none;align-self:center;font-size:13.5px;font-weight:720;color:var(--ct-iris)}

.ct-opts{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.ct-opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:52px;width:100%;
  padding:8px 14px;border:1.5px solid var(--ct-line2);border-radius:14px;background:var(--ct-s2);box-shadow:var(--ct-edge);
  font-size:17px;font-weight:640;line-height:1.25;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .14s ease,opacity .2s ease,border-color .14s ease}
.ct-opt b{font-size:19px;font-weight:760;color:var(--ct-ko)}
.ct-opt small{font-size:13px;font-weight:560;color:var(--ct-mut)}
.ct-opt.is-long{font-size:15px;min-height:48px;padding:8px 12px;line-height:1.3}
.ct-opt:active{transform:scale(.985)}
@media (hover:hover){.ct-opts:not(.is-locked) .ct-opt:hover{border-color:var(--ct-iris)}}
.ct-opts.is-locked .ct-opt{opacity:.4;cursor:default}
.ct-opts.is-locked .ct-opt.is-picked{opacity:1;border-color:var(--ct-iris);background:var(--ct-iris-wash)}
.ct-fb{margin:-4px 0 0;font-size:12px;color:var(--ct-dim);text-align:center}
.ct-senderr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 12px;border-radius:12px;
  border:1px dashed var(--ct-line2);font-size:14px}

/* ── Разбор после ответа: три строки по центру ── */
.ct-rv{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 12px;border-radius:14px;
  background:var(--ct-s2);border:1px solid var(--ct-line);box-shadow:var(--ct-edge);text-align:center;animation:ct-up .22s ease both}
.ct-rv.is-ok{box-shadow:inset 0 3px 0 var(--ct-mint),var(--ct-edge)}
.ct-rv.is-miss{box-shadow:inset 0 3px 0 var(--ct-iris),var(--ct-edge)}
.ct-il{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px}
.ct-w{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.ct-w b{font-size:20px;font-weight:700;line-height:1.25;padding:0 2px}
.ct-w small{font-size:12px;color:var(--ct-mut);line-height:1.2;max-width:11em;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.ct-w.is-hit b{color:var(--ct-ko);background:var(--ct-mark);border-radius:6px;padding:0 6px}
.ct-rv.is-ok .ct-w.is-hit b{background:var(--ct-mint-wash);color:var(--ct-ink);box-shadow:inset 0 -2px 0 var(--ct-mint)}
.ct-w.is-hit small{color:var(--ct-ink);font-weight:720}
.ct-rv-s{margin:0;font-size:15.5px;line-height:1.4;font-weight:620}
.ct-fbi{font-size:12px;font-weight:500;color:var(--ct-dim)}
.ct-ok{display:inline-flex;align-items:center;gap:6px;color:var(--ct-mint)}
.ct-miss{color:var(--ct-ink)}
.ct-miss i{font-style:normal;color:var(--ct-ko);font-weight:800}
.ct-said{display:flex;align-items:flex-start;gap:10px;animation:ct-up .26s .08s ease both}
.ct-av{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  box-shadow:0 0 0 2px var(--ct-bg),0 0 0 3.5px var(--ct-tint,var(--ct-iris))}
.ct-av-ph{display:grid;place-items:center;background:var(--ct-iris-wash);color:var(--ct-iris);font-weight:800}
.ct-bub{margin:0;padding:8px 12px;border-radius:6px 16px 16px 16px;background:var(--ct-s2);border:1px solid var(--ct-line);
  font-size:14.5px;line-height:1.4;text-align:left}
.ct-bub b{display:block;font-size:12px;color:var(--ct-mut);font-weight:720;margin-bottom:1px}
.ct-note{margin:0;font-size:12.5px;line-height:1.35;color:var(--ct-dim);text-align:center}
@keyframes ct-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Кнопки ── */
.ct-foot{margin-top:auto;display:flex;justify-content:flex-end;gap:10px}
.ct-foot-2 .ct-btn{flex:1}
.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:999px;
  border:1px solid transparent;font-size:16.5px;font-weight:740;line-height:1.1;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .14s ease}
.ct-btn:active{transform:scale(.98)}
.ct-btn[disabled]{opacity:.45;cursor:default}
.ct-gold{background:var(--ct-gold);color:var(--ct-gold-ink)!important;
  box-shadow:0 6px 16px rgba(194,134,90,.28),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(122,70,40,.25)}
.ct-glass{background:var(--ct-s2);border-color:var(--ct-line2);box-shadow:var(--ct-edge)}
.ct-next{min-width:56%}
.ct-btn-s{min-height:40px;padding:0 14px;font-size:14px}

/* ── Итог задания ── */
.ct-fin{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-top:6px}
.ct-fin-mark{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--ct-iris-wash);color:var(--ct-iris);
  font-size:26px;animation:ct-up .3s ease both}
.ct-fin-mark.is-pass{background:var(--ct-mint-wash);color:var(--ct-mint);box-shadow:inset 0 0 0 2px var(--ct-mint-line)}
.ct-fin-h{margin:0;font-size:30px;font-weight:820;line-height:1.1;outline:none}
.ct-fin-sub{margin:0;font-size:14px;line-height:1.4;color:var(--ct-mut)}
.ct-fin-st{margin:2px 0 0;font-size:15.5px;font-weight:720;line-height:1.4}
.ct-fin-st.is-pass{color:var(--ct-mint)}
.ct-cardline{align-self:stretch;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--ct-s1);
  border:1px solid var(--ct-line);font-size:14px;line-height:1.35;text-align:left}
.ct-cardline i{flex:none;width:20px;height:26px;border-radius:4px;background:linear-gradient(160deg,#FBE6D2,#EDC7A2 46%,#C79BE4);
  box-shadow:0 2px 6px rgba(0,0,0,.25);transform:rotate(-6deg)}
.ct-cardline.is-new{border-color:#DFA97F;font-weight:680}
.ct-fin-sc{align-self:stretch;text-align:left;padding:4px 12px 12px;border-radius:14px;background:var(--ct-s2);border:1px solid var(--ct-line)}
.ct-fin .ct-said{align-self:stretch}

/* ── Загрузка и пустые состояния ── */
.ct-wait{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:30vh;font-size:15px;color:var(--ct-mut)}
.ct-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ct-line2);border-top-color:var(--ct-iris);animation:ct-spin .8s linear infinite}
@keyframes ct-spin{to{transform:rotate(360deg)}}
.ct-empty{flex:1;display:flex;flex-direction:column;gap:18px;padding-top:22vh;text-align:center}
.ct-empty p{margin:0;font-size:16px;line-height:1.45}
.ct-empty .ct-foot{justify-content:center}
.ct-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Низкий экран (375×667 и ниже): ступень меньше, всё на одном экране ── */
@media (max-height:720px){
  .ct-top{min-height:44px}
  .ct-clip{max-height:32dvh}
  .ct-main{gap:8px;padding:8px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .ct-qrow{min-height:40px}
  .ct-qt b{font-size:15px}
  .ct-play{min-height:40px;font-size:14px;padding:0 13px 0 10px}
  .ct-line{font-size:18px;line-height:1.4}
  .ct-mean{font-size:13.5px}
  .ct-opts{gap:6px}
  .ct-opt{min-height:46px;padding:6px 12px;font-size:16px}
  .ct-opt b{font-size:18px}
  .ct-opt small{font-size:12.5px}
  .ct-opt.is-long{font-size:14px;min-height:44px;padding:6px 11px}
  .ct-rv{padding:10px;gap:8px}
  .ct-w b{font-size:18px}
  .ct-rv-s{font-size:14.5px}
  .ct-bub{font-size:13.5px;padding:7px 11px}
  .ct-btn{min-height:48px;font-size:16px}
  .ct-fin-h{font-size:26px}
  .ct-fin-mark{width:50px;height:50px}
}
@media (max-width:374px){
  .ct-main{padding-left:12px;padding-right:12px}
  .ct-play span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ct-ov *{animation:none!important;transition:none!important}
}

/* ── «Песня за 3 вечера» (30.09.2026): подпись дня, «Смотреть» части ── */
.ct-rt.ct-part{color:var(--ct-mut);letter-spacing:.04em}
.ct-wbar{position:relative;height:8px;border-radius:999px;background:var(--ct-line2);overflow:hidden}
.ct-wbar i{position:absolute;inset:0;transform-origin:0 50%;background:var(--ct-mint);border-radius:inherit;transition:transform .25s linear}
.ct-w-st{margin:4px 0 0;font-size:14.5px;font-weight:620;line-height:1.4;color:var(--ct-mut)}
.ct-w-st.is-pass{color:var(--ct-mint);font-weight:760}
.ct-w-st[role="alert"]{color:var(--ct-iris)}
@media (prefers-reduced-motion:reduce){.ct-wbar i{transition:none}}

/* ══ ИГРОВЫЕ ЗАДАНИЯ (01.10.2026, игровые задания): подписи караоке, «Пары», «Караоке с
   пропусками», строка с транскрипцией в «Переводи клип». Микро-взаимодействия: отклик на
   тап сразу (≤ 100 мс), анимации 150–450 мс только transform/opacity/box-shadow; верно —
   мятная вспышка, неверно — короткая встряска и сиреневый (красного в продукте нет).
   prefers-reduced-motion — правило выше гасит всё движение, остаётся цвет. ══ */
.ct-card-pic{flex:none;width:56px;height:32px;border-radius:6px;object-fit:cover}
.ct-card-clip{color:inherit;font-weight:800;white-space:nowrap}

/* «Переводи клип»: строка хангылем, под словом транскрипция (перевода нет — его спрашивают) */
.ct-il-q{justify-content:flex-start;gap:4px 12px}
.ct-il-q .ct-w b{font-size:21px;padding:0}
.ct-il-q .ct-w small{font-size:12.5px}

/* Подписи караоке под клипом: столбик «хангыль / транскрипция / дословно» */
.ct-cap{min-height:122px;display:flex;flex-direction:column;gap:6px;padding:10px 10px 8px;border-radius:14px;
  background:var(--ct-s1);border:1px solid var(--ct-line)}
.ct-kl{margin:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 6px}
.ct-kw{display:flex;flex-direction:column;align-items:center;min-width:0;padding:3px 5px;border-radius:9px;
  transition:background-color .12s ease,transform .12s ease}
.ct-kw b{font-size:21px;font-weight:720;line-height:1.2;color:var(--ct-ink);white-space:nowrap}
.ct-kw small{font-size:11.5px;line-height:1.25;color:var(--ct-mut);max-width:8.5em;text-align:center;overflow-wrap:anywhere}
.ct-kw small.ct-kg{color:var(--ct-gold-ic);font-weight:640}
.ct-kw.is-lat b{font-size:16px;font-weight:600;color:var(--ct-mut);align-self:center}
.ct-kw.is-past b{color:var(--ct-mut)}
.ct-kw.is-on{background:var(--ct-mark);transform:translateY(-1px)}
.ct-kw.is-on b{color:var(--ct-ko)}
.ct-kw.is-on small{color:var(--ct-ink)}
.ct-kgap{display:block;width:3.4em;height:1.2em;border-radius:6px;border:2px dashed var(--ct-iris);background:var(--ct-iris-wash)}
.ct-kw.is-gap.is-on .ct-kgap{border-style:solid}
.ct-kw.is-fill.is-ok b{color:var(--ct-mint);box-shadow:inset 0 -2px 0 var(--ct-mint)}
.ct-kw.is-fill.is-miss b{color:var(--ct-iris);box-shadow:inset 0 -2px 0 var(--ct-iris)}
.ct-kn{margin:auto 0 0;font-size:13px;line-height:1.3;color:var(--ct-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-cap.is-flash-ok{animation:ct-flash-ok .65s ease}
.ct-cap.is-flash-miss{animation:ct-flash-miss .65s ease}
.ct-ktip{margin:0;font-size:13px;line-height:1.35;color:var(--ct-mut);text-align:center}

/* «Караоке с пропусками»: низ экрана — подсказка или три пузыря */
.ct-kbot{margin-top:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:92px}
.ct-kq{text-align:center}
.ct-kq b{font-size:15px;font-weight:760}
.ct-bubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ct-bubl{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;
  border-radius:20px;border:1.5px solid var(--ct-line2);background:var(--ct-s2);box-shadow:var(--ct-edge);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s ease,border-color .12s ease,background-color .12s ease,opacity .2s ease}
/* Вход пузырей — анимацией группы: у самих кнопок анимацию на время нажатия подменяет
   пружина spring.js (sp-back), и после неё вход начинался заново — пузырь мигал. */
.ct-bubs{animation:ct-bub-in .28s cubic-bezier(.2,.9,.3,1.25) both}
.ct-bubl b{font-size:19px;font-weight:760;color:var(--ct-ko);overflow-wrap:anywhere;text-align:center}
.ct-bubl small{font-size:12px;color:var(--ct-mut);text-align:center;overflow-wrap:anywhere}
.ct-bubl:active{transform:scale(.96)}
.ct-bubs .ct-bubl:disabled{cursor:default}
.ct-bubs .ct-bubl:disabled:not(.is-right):not(.is-picked){opacity:.45}
.ct-bubl.is-picked{border-color:var(--ct-iris)}
.ct-bubl.is-right{border-color:var(--ct-mint);background:var(--ct-mint-wash);box-shadow:0 0 0 3px var(--ct-mint-wash)}
.ct-bubl.is-right b{color:var(--ct-mint)}
.ct-bubl.is-wrong{border-color:var(--ct-iris)}
/* Встряска и исчезновение пары — сильнее пружины spring.js (она вешает свою анимацию на любой button). */
.ct-ov .ct-bubl.is-wrong,.ct-ov .ct-pw.is-shake{animation:ct-shake .34s ease!important}
.ct-ov .ct-pw.is-match{animation:ct-match .42s ease forwards!important}
.ct-combo{align-self:flex-start;margin-top:3px;padding:2px 10px;border-radius:999px;background:var(--ct-gold);color:var(--ct-gold-ink);
  font-size:12.5px;font-weight:820;letter-spacing:.01em}
.ct-combo.is-pop{animation:ct-pop .42s cubic-bezier(.2,.9,.3,1.4)}

/* «Пары»: две колонки по 4 кнопки, всё на одном экране */
.ct-round{flex:none;padding:6px 12px;border-radius:999px;background:var(--ct-s1);border:1px solid var(--ct-line);
  font-size:13px;font-weight:720;color:var(--ct-mut);white-space:nowrap}
.ct-pairs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:auto 0}
.ct-pcol{display:flex;flex-direction:column;gap:10px}
.ct-pw{min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 10px;
  border-radius:16px;border:1.5px solid var(--ct-line2);background:var(--ct-s2);box-shadow:var(--ct-edge);cursor:pointer;text-align:center;
  -webkit-tap-highlight-color:transparent;transition:transform .12s ease,border-color .12s ease,background-color .12s ease,opacity .2s ease}
.ct-pw b{font-size:22px;font-weight:760;line-height:1.2;color:var(--ct-ko)}
.ct-pw small{font-size:12.5px;line-height:1.2;color:var(--ct-mut)}
.ct-po span{font-size:15px;font-weight:650;line-height:1.25;overflow-wrap:anywhere}
.ct-pw:active{transform:scale(.97)}
@media (hover:hover){.ct-pw:not(.is-gone):hover{border-color:var(--ct-iris)}}
.ct-pw.is-sel{border-color:var(--ct-iris);background:var(--ct-iris-wash);box-shadow:0 0 0 3px var(--ct-iris-wash)}
.ct-pw.is-match{border-color:var(--ct-mint);background:var(--ct-mint-wash)}
.ct-pw.is-gone{visibility:hidden}
.ct-ptip{margin:0;font-size:13px;line-height:1.35;color:var(--ct-mut);text-align:center}
.ct-ptip.is-ok{font-size:15.5px;font-weight:780;color:var(--ct-mint)}

@keyframes ct-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes ct-match{0%{transform:scale(1);box-shadow:0 0 0 0 var(--ct-mint-line)}35%{transform:scale(1.05);box-shadow:0 0 0 6px var(--ct-mint-wash),0 0 22px var(--ct-mint-line)}100%{transform:scale(.82);opacity:0}}
@keyframes ct-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes ct-bub-in{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes ct-flash-ok{0%{box-shadow:0 0 0 0 var(--ct-mint-line)}30%{box-shadow:0 0 0 3px var(--ct-mint-line),0 0 26px var(--ct-mint-wash)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes ct-flash-miss{0%{box-shadow:0 0 0 0 var(--ct-iris)}30%{box-shadow:0 0 0 3px var(--ct-iris-wash),0 0 20px var(--ct-iris-wash)}100%{box-shadow:0 0 0 0 transparent}}

@media (max-height:720px){
  .ct-cap{min-height:108px;padding:8px 8px 6px;gap:4px}
  .ct-kw b{font-size:19px}
  .ct-kw small{font-size:11px}
  .ct-il-q .ct-w b{font-size:19px}
  .ct-kbot{min-height:84px;gap:6px}
  .ct-bubl{min-height:58px}
  .ct-bubl b{font-size:18px}
  .ct-pw{min-height:62px;padding:6px 8px}
  .ct-pw b{font-size:20px}
  .ct-po span{font-size:14.5px}
  .ct-pairs,.ct-pcol{gap:8px}
}

/* Высокий экран (390×844): подписи крупнее — место под клипом есть. */
@media (min-height:780px){
  .ct-cap{min-height:136px;padding:12px 10px 10px}
  .ct-kw b{font-size:24px}
  .ct-kw small{font-size:12.5px}
  .ct-pw{min-height:78px}
}
@media (prefers-reduced-motion:reduce){
  .ct-ov .ct-bubl.is-wrong,.ct-ov .ct-pw.is-shake,.ct-ov .ct-pw.is-match,.ct-bubs,.ct-combo.is-pop,.ct-cap{animation:none!important}
}
/* Пара на проверке у сервера — мягкое мерцание, без блокировки остальных (01.10.2026). */
.ct-pw.is-wait{animation:ct-wait 1s ease-in-out infinite}
@keyframes ct-wait{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ct-pw.is-wait{animation:none!important;opacity:.7}}

/* ══ ПРАВКИ ПИЛОТА VISION (02.10.2026): основатель проверил на iPhone. Стрелка «←» в шапке
   вместо крестика; «Смотреть» — блоки слов крупнее на 25 %, блок-кнопка (тап — клип с этого
   слова), ▶/⏸ и «Сначала», полоска текущей строки и «Строка N / всего»; «Пары» — стоп-кадр
   клипа сверху; «Караоке с пропусками» — варианты-блоки с транскрипцией и переводом;
   «Переводи клип» — варианты сразу под строкой. ══ */
.ct-back{width:48px;height:48px;color:var(--ct-ink)!important}
.ct-top{grid-template-columns:48px 1fr 48px}

/* «Смотреть»: управление справа — «Сначала» левее ▶/⏸ */
.ct-wctl{flex:none;display:flex;align-items:center;gap:8px}
.ct-play.is-ico{width:48px;min-height:48px;padding:0;justify-content:center}
.ct-play.is-ico svg{width:22px;height:22px}
.ct-play.ct-re{border-color:var(--ct-line2);padding:0 12px 0 10px;font-size:13.5px}
.ct-play.ct-re svg{color:var(--ct-mut)}
.ct-play[hidden]{display:none}

/* Блоки слов «Смотреть» — на 25 % крупнее (шрифт и поля) */
.ct-wq .ct-kl{gap:5px 8px}
.ct-wq .ct-kw{padding:4px 6px;border-radius:11px}
.ct-wq .ct-kw b{font-size:26px}
.ct-wq .ct-kw small{font-size:14.5px;max-width:9em}
.ct-kw.is-lat b{font-size:.8em;font-weight:700;color:inherit;align-self:auto;letter-spacing:.01em}
.ct-ov button.ct-kw{font:inherit;color:inherit;border:0;margin:0;background:transparent;cursor:pointer;min-height:44px;
  -webkit-tap-highlight-color:transparent}
.ct-ov button.ct-kw:active{transform:scale(.96)}
.ct-ov button.ct-kw.is-on{background:var(--ct-mark)}
@media (hover:hover){.ct-ov button.ct-kw:not(.is-on):hover{background:var(--ct-iris-wash)}}

/* Полоска ТЕКУЩЕЙ строки: без transition — её ведёт requestAnimationFrame */
.ct-lbar{position:relative;height:6px;border-radius:999px;background:var(--ct-line2);overflow:hidden}
.ct-lbar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);border-radius:inherit;
  background:linear-gradient(90deg,var(--ct-iris),var(--ct-ko))}
.ct-lnum{margin:-2px 0 0;font-size:13px;font-weight:720;color:var(--ct-mut);text-align:center;font-variant-numeric:tabular-nums}
.ct-wq .ct-w-st{margin-top:0}

/* «Пары»: кадр клипа — 16:9 по центру, без касаний; дымка прячет надписи YouTube после перемотки */
.ct-ov.is-still .ct-clip{align-self:center;width:auto;height:min(25dvh,56vw);max-height:none;margin:2px auto 0;border-radius:14px}
.ct-ov.is-still .ct-yt iframe{pointer-events:none}
.ct-still{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.ct-yt.is-ready .ct-still{opacity:0}
.ct-veil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:rgba(16,11,24,.55);-webkit-backdrop-filter:blur(30px) saturate(1.2);backdrop-filter:blur(30px) saturate(1.2)}
.ct-yt.is-veil .ct-veil{opacity:1}
.ct-ov.is-still .ct-pairs{margin:4px 0 auto}

/* «Караоке с пропусками»: вариант — блок «хангыль / транскрипция / перевод» */
.ct-bubl{min-height:78px;gap:1px}
.ct-bubl small{line-height:1.2}
.ct-bubl small.ct-kg{color:var(--ct-gold-ic);font-weight:640}
.ct-bubl.is-right small.ct-kg{color:var(--ct-mint)}

/* «Переводи клип»: варианты сразу под строкой */
.ct-opts.is-near{margin-top:4px}

@media (min-height:780px){
  .ct-wq .ct-kw b{font-size:30px}
  .ct-wq .ct-kw small{font-size:15.5px}
}
@media (max-height:720px){
  .ct-wq .ct-kw b{font-size:24px}
  .ct-wq .ct-kw small{font-size:13.5px}
  .ct-wq .ct-kw{padding:3px 5px}
  .ct-wq .ct-ktip{display:none}
  .ct-play.is-ico{width:44px;min-height:44px}
  .ct-bubl{min-height:70px}
  .ct-ov.is-still .ct-clip{height:min(23dvh,52vw)}
}
@media (max-width:374px){.ct-play.ct-re span{display:none}}
@media (prefers-reduced-motion:reduce){.ct-still,.ct-veil{transition:none}}

/* ══ ПРАВКИ №2 ПИЛОТА VISION (02.10.2026, правки №2): основатель снова проверил на iPhone. ══ */
/* Караоке: следующая по порядку строка въезжает снизу; прыжок часов — строка встаёт сразу (без класса). */
.ct-kl.is-in{animation:ct-line-in .18s ease-out both}
@keyframes ct-line-in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}

/* А. Шкала пройденного вверху — крупнее, квадратами. Идёт на всю ширину правее стрелки (правый
   пустой столбец шапки отдан ей): 16 квадратов «Пар» помещаются и на 360 px. Квадрат сжимается
   под ширину (flex + aspect-ratio), но не мельче 7 px; цвета прежние: мятный — верно с первой
   попытки, контур — ошибка, сиреневый с кольцом — текущий вопрос, бледно-сиреневые — слова
   текущего раунда «Пар». */
.ct-top.is-prog .ct-top-c{grid-column:2 / 4;padding-right:6px}
.ct-top.is-prog .ct-top-r{display:none}
.ct-prog{gap:10px}
.ct-dots{flex:0 1 auto;min-width:0;flex-wrap:nowrap;align-items:center;gap:5px}
.ct-dots li{flex:0 1 auto;width:14px;height:auto;min-width:7px;aspect-ratio:1;border-radius:3px;transition:background .2s ease,box-shadow .2s ease}
.ct-dots li.miss{box-shadow:inset 0 0 0 2px var(--ct-dim)}
.ct-dots li.cur{width:14px;background:var(--ct-iris);box-shadow:0 0 0 2px var(--ct-bg),0 0 0 3.5px var(--ct-iris)}
.ct-dots li.rt{width:10px;height:auto;border-radius:2px}
.ct-dots li.rt.cur{width:10px}
.ct-dots li.gs{margin-left:5px}
.ct-dots li.rn{background:var(--ct-iris);opacity:.45}
.ct-dots.is-many{gap:3px}
.ct-num{font-size:14.5px;font-weight:760;color:var(--ct-ink)}

/* А1. Караоке: строки не сливаются — между рядами блоков и до следующей строки на 50 % больше
   воздуха (было 5 px между рядами + 8 px полей блоков = 13 px, стало около 20 px). */
.ct-kl{row-gap:10px}
.ct-wq .ct-kl,.ct-hq .ct-kl{row-gap:12px}
.ct-cap{gap:10px}
.ct-kn{line-height:1.45}

/* В1. «Караоке с пропусками»: блоки под клипом — как в «Смотреть». */
.ct-hq .ct-kl{column-gap:8px}
.ct-hq .ct-kw{padding:4px 6px;border-radius:11px}
.ct-hq .ct-kw b{font-size:26px}
.ct-hq .ct-kw small{font-size:14.5px;max-width:9em}
.ct-hq .ct-kgap{width:3.2em;height:1.15em}
/* В2. Варианты — сразу под строкой с блоками, без пустого поля (было прижато к низу). */
.ct-kbot{margin-top:0;min-height:0;justify-content:flex-start}
.ct-bubl b{font-size:22px}
.ct-bubl small{font-size:13.5px}

/* Г1. «Переводи клип»: строка-оригинал и варианты — крупнее. */
.ct-il-q{gap:6px 14px}
.ct-il-q .ct-w b{font-size:27px}
.ct-il-q .ct-w small{font-size:15px}
.ct-opt.is-long{font-size:17.5px;min-height:54px;padding:9px 14px;line-height:1.28}

@media (min-height:780px){
  .ct-hq .ct-kw b{font-size:30px}
  .ct-hq .ct-kw small{font-size:15.5px}
  .ct-il-q .ct-w b{font-size:30px}
  .ct-il-q .ct-w small{font-size:16px}
  .ct-opt.is-long{font-size:18.5px;min-height:58px}
}
@media (max-height:720px){
  .ct-kl{row-gap:8px}
  .ct-wq .ct-kl,.ct-hq .ct-kl{row-gap:10px}
  .ct-cap{gap:8px}
  .ct-hq .ct-kw b{font-size:24px}
  .ct-hq .ct-kw small{font-size:13.5px}
  .ct-hq .ct-kw{padding:3px 5px}
  .ct-bubl b{font-size:20px}
  .ct-bubl small{font-size:12.5px}
  .ct-il-q .ct-w b{font-size:25px}
  .ct-il-q .ct-w small{font-size:14px}
  .ct-opt.is-long{font-size:16.5px;min-height:48px;padding:7px 12px}
  .ct-dots li,.ct-dots li.cur{width:13px}
  /* Не помещается — меньше клип, а не текст (основатель): «Смотреть», «Переводи клип». */
  .ct-ov[data-ct-kind="watch"] .ct-clip{max-height:29dvh}
  .ct-ov[data-ct-kind="line"] .ct-clip,.ct-ov[data-ct-kind="final"] .ct-clip{max-height:24dvh}
}

/* ══ «Сначала» + ⏸/▶ В ПРОПУСКАХ И «ПЕРЕВОДИ КЛИП» (02.10.2026, решение основателя): группа та же,
   что в «Смотреть» (.ct-wctl). Строка доиграла — справа «▶ Ещё раз» с текстом; на телефоне
   «Сначала» на это время — круглая ⟲ того же размера, что ⏸: ширина группы не меняется,
   «Сначала» остаётся на месте, заголовок слева не переносится на лишнюю строку. ══ */
@media (max-width:430px){
  .ct-wctl.is-again .ct-re{width:48px;min-height:48px;padding:0;justify-content:center}
  .ct-wctl.is-again .ct-re span{display:none}
  .ct-wctl.is-again .ct-re svg{width:20px;height:20px}
}
@media (max-width:430px) and (max-height:720px){
  .ct-wctl.is-again .ct-re{width:44px;min-height:44px}
}