/* Плашка согласия на cookie «Билет» (вариант 1 кастинга cookie, пульт 22; Юра 08.10 выбрал «билет», шапку «Чек № 0001» —
   оставить). Общая для главной (glavnaya/) и «Помощи» (pomosh/). Все классы с приставкой tkc- — у главной уже есть .ck
   (галочки кабинета). Состояния «до появления» — только при .tkc-mo (движение не уменьшено), иначе без анимаций. */
.tkc {
  --tkc-ink: #0D1324; --tkc-soft: #4B556B; --tkc-blue: #3B7BF6; --tkc-blue-d: #2C64D8; --tkc-blue-l: #EEF4FF;
  --tkc-f-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tkc-f-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
  --tkc-ease: cubic-bezier(.16, 1, .3, 1);
  /* левый край колонки сайта (1440) — как у текста героя: справа на первом экране сцена (Юра 10.10: «убери в левую часть экрана») */
  --tkc-r: calc(max(0px, (100vw - 1440px) / 2) + 64px);
  position: fixed; z-index: 40; left: var(--tkc-r); bottom: 28px; width: 440px; margin: 0;
  color: var(--tkc-ink); font: 400 15px/1.5 var(--tkc-f-text); text-align: left; letter-spacing: normal;
  filter: drop-shadow(0 18px 26px rgba(13, 19, 36, .13)) drop-shadow(0 2px 3px rgba(13, 19, 36, .07));
}
.tkc *, .tkc *::before, .tkc *::after { box-sizing: border-box; }
.tkc p { margin: 0; padding: 0; }
.tkc-t { font-size: 15px; line-height: 1.5; color: var(--tkc-ink); }
.tkc-t a { color: var(--tkc-blue-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tkc-t a:hover { color: var(--tkc-ink); }
.tkc a:focus-visible, .tkc button:focus-visible { outline: 3px solid var(--tkc-blue); outline-offset: 3px; }
/* кнопки — как .btn.btn-s главной; вторая того же размера, контурная: равноценно заметна */
.tkc-bs { display: flex; }
.tkc-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--tkc-blue); color: #fff; cursor: pointer; white-space: nowrap;
  font: 600 14.5px/1 var(--tkc-f-text); text-decoration: none; transition: background .3s var(--tkc-ease), transform .3s var(--tkc-ease); }
.tkc-btn:hover { background: var(--tkc-blue-d); }
.tkc-btn:active { transform: scale(.98); }
.tkc-btn + .tkc-btn { margin-left: 10px; }
.tkc-btn-o { background: #fff; color: var(--tkc-ink); box-shadow: inset 0 0 0 1.5px rgba(13, 19, 36, .78); }
.tkc-btn-o:hover { background: var(--tkc-blue-l); color: var(--tkc-ink); }
.tkc-btn[disabled] { cursor: default; }

/* бумага с голубой сеткой, зубчатые края, перфорация, штамп */
.tkc-paper, .tkc-stub { background-color: #fff;
  background-image: linear-gradient(rgba(59, 123, 246, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 123, 246, .09) 1px, transparent 1px);
  background-size: 12px 12px; background-position: -1px -1px; }
/* верх — зубцы (оторван от ленты), низ — полукруглые вырезы перфорации */
.tkc-top { position: relative; transform-origin: 50% 100%;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 0 / 14px 7px repeat-x,
    radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) 0 7px / 51% calc(100% - 7px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) 100% 7px / 51% calc(100% - 7px) no-repeat;
  mask: conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 0 / 14px 7px repeat-x,
    radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) 0 7px / 51% calc(100% - 7px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) 100% 7px / 51% calc(100% - 7px) no-repeat; }
.tkc-paper { position: relative; padding: 24px 24px 20px; }
.tkc-head { display: flex; align-items: center; height: 30px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(13, 19, 36, .2);
  font: 500 10.5px/1 var(--tkc-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tkc-soft); }
.tkc-head i { font-style: normal; color: var(--tkc-blue-d); margin: 0 .5em; }
.tkc-stamp { position: absolute; right: 18px; top: 13px; display: flex; flex-direction: column; align-items: center; padding: 4px 10px 3px; border: 2px solid var(--tkc-blue-d); border-radius: 6px;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--tkc-blue-d); color: var(--tkc-blue-d); transform: rotate(-4deg); opacity: .88; mix-blend-mode: multiply; }
.tkc-s1 { font: 700 13px/1.05 var(--tkc-f-mono); letter-spacing: .24em; margin-right: -.24em; }
.tkc-s2 { font: 600 7.5px/1.2 var(--tkc-f-mono); letter-spacing: .14em; text-transform: uppercase; }
/* под пунктиром — бумага (и 5 px до вырезов по бокам), иначе в просветах пунктира видна страница под плашкой */
.tkc-perf { position: relative; height: 0; margin: 0 14px; border-top: 2px dashed rgba(13, 19, 36, .2); background: #fff; box-shadow: -5px 0 0 #fff, 5px 0 0 #fff; }
.tkc-stub { padding: 14px 24px 22px;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) 0 0 / 51% calc(100% - 7px) no-repeat,
    radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) 100% 0 / 51% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 100% / 14px 7px repeat-x;
  mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) 0 0 / 51% calc(100% - 7px) no-repeat,
    radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) 100% 0 / 51% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 100% / 14px 7px repeat-x; }

/* появление: выезжает снизу, как из кассы, и чуть «садится»; штамп ставится последним */
.tkc-mo .tkc-in { transform: translateY(calc(100% + 60px)); }
.tkc-mo .tkc-stamp { opacity: 0; }
.tkc-mo.on .tkc-in { animation: tkcIn 1150ms var(--tkc-ease) both; }
.tkc-mo.on .tkc-stamp { animation: tkcStamp 460ms 980ms cubic-bezier(.2, .9, .3, 1.35) both; }
@keyframes tkcIn { 0% { transform: translateY(calc(100% + 60px)) rotate(2.2deg); } 68% { transform: translateY(-5px) rotate(-.5deg); } 100% { transform: none; } }
@keyframes tkcStamp { 0% { opacity: 0; transform: scale(1.7) rotate(-8deg); } 100% { opacity: .88; transform: rotate(-4deg); } }
/* выбор: штамп бьёт ещё раз с ответом */
.tkc-mo.hit .tkc-stamp { animation: tkcHit 340ms cubic-bezier(.2, .9, .3, 1.35) both; }
@keyframes tkcHit { 0% { opacity: .88; transform: rotate(-4deg); } 40% { opacity: .95; transform: scale(1.25) rotate(-6deg); } 100% { opacity: .92; transform: rotate(-3deg); } }
/* «Принять все»: чек отрывается по перфорации (сначала надрыв справа) и улетает вверх; корешок с кнопками уходит вниз */
.tkc-mo.out-all .tkc-top { transform-origin: 0 100%; animation: tkcTear 980ms 380ms cubic-bezier(.5, 0, .75, .15) forwards; }
.tkc-mo.out-all .tkc-perf { animation: tkcFade 200ms 420ms forwards; }
.tkc-mo.out-all .tkc-stub { animation: tkcDrop 620ms 560ms cubic-bezier(.6, 0, .8, .25) forwards; }
@keyframes tkcTear { 0% { transform: none; } 20% { transform: translate(0, -6px) rotate(-3.5deg); } 100% { transform: translate(16vw, -120vh) rotate(-26deg); } }
@keyframes tkcDrop { to { transform: translateY(calc(100% + 80px)); } }
@keyframes tkcFade { to { opacity: 0; } }
/* «Только необходимые»: верх складывается по перфорации пополам (на ребре — уже обратная сторона) и всё уходит вниз */
.tkc-mo.out-nec .tkc-in { animation: tkcAway 640ms 1040ms cubic-bezier(.6, 0, .8, .25) both; perspective: 900px; }
.tkc-mo.out-nec .tkc-top { animation: tkcFold 680ms 360ms cubic-bezier(.65, 0, .35, 1) forwards; }
.tkc-mo.out-nec .tkc-paper > * { animation: tkcBack 680ms 360ms linear forwards; }
.tkc-mo.out-nec .tkc-perf { animation: tkcFade 200ms 700ms forwards; }
@keyframes tkcFold { 0% { transform: none; } 100% { transform: rotateX(-180deg); } }
@keyframes tkcBack { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes tkcAway { from { transform: none; } to { transform: translateY(calc(100% + 260px)); } }

@media (min-width: 1500px) {
  /* герой от 1500 px — колонка 1440 по центру: плашка у её левого края */
  .tkc { --tkc-r: calc((100vw - 1440px) / 2 + 64px); }
}
@media (max-width: 1100px) {
  .tkc { --tkc-r: 32px; }
}
/* ПК: слева внизу, под текстом героя, компактным «билетом» в строку — бумага слева, корешок с кнопками справа
   (Юра 10.10: «убери в левую часть экрана» — справа сцена). Ширина — до подсказки прокрутки по центру, высота ~110 px —
   ниже кнопок героя; на невысоких экранах (≤ 800 px) — без шапки и штампа, ещё ниже */
@media (min-width: 1101px) {
  .tkc { width: 500px; bottom: 14px; }
  .tkc-in { display: flex; align-items: stretch; }
  .tkc-top { flex: 1 1 auto; min-width: 0; -webkit-mask: none; mask: none; border-radius: 10px 0 0 10px; }
  .tkc-paper { height: 100%; padding: 12px 16px; }
  .tkc-head { height: 22px; margin-bottom: 6px; padding-bottom: 6px; font-size: 9.5px; }
  .tkc-stamp { right: 10px; top: 6px; padding: 2px 7px 2px; }
  .tkc-s1 { font-size: 10px; }
  .tkc-s2 { font-size: 6px; }
  .tkc-t { font-size: 12.5px; line-height: 1.4; }
  .tkc-perf { width: 0; height: auto; margin: 10px 0; border-top: 0; border-left: 2px dashed rgba(13, 19, 36, .2); box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
  .tkc-stub { flex: 0 0 184px; display: flex; align-items: center; padding: 12px 14px; -webkit-mask: none; mask: none; border-radius: 0 10px 10px 0; }
  .tkc-bs { flex-direction: column; width: 100%; }
  .tkc-btn { flex: none; min-height: 36px; font-size: 13px; }
  .tkc-btn + .tkc-btn { margin: 6px 0 0; }
}
@media (min-width: 1101px) and (max-height: 800px) {
  .tkc { bottom: 8px; }
  .tkc-head, .tkc-stamp { display: none; }
  .tkc-paper { padding: 9px 14px; }
  .tkc { width: 490px; }
  .tkc-paper { padding: 7px 12px; }
  .tkc-t { font-size: 11.5px; line-height: 1.35; }
  .tkc-stub { flex: 0 0 246px; padding: 7px 8px; }
  .tkc-bs { flex-direction: row; gap: 6px; }
  .tkc-btn { flex: 0 0 auto; min-height: 30px; font-size: 11.5px; padding: 0 10px; white-space: nowrap; }
  .tkc-btn:first-child { flex: 1 1 auto; }
  .tkc-btn + .tkc-btn { margin: 0; }   /* низкий экран: кнопки в строку — плашка встаёт ниже кнопок героя */
}
/* телефон: внизу во всю ширину (липкой кнопки на новой главной нет) */
@media (max-width: 720px) {
  .tkc { left: 16px; right: 16px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .tkc-t { font-size: 14.5px; }
  .tkc-btn { min-height: 48px; padding: 0 8px; line-height: 1.15; text-align: center; font-size: 13.5px; letter-spacing: -.005em; }
  .tkc-btn + .tkc-btn { margin-left: 8px; }
  .tkc-paper { padding: 18px 18px 12px; }
  .tkc-head { margin-bottom: 8px; }
  .tkc-stub { padding: 12px 18px 18px; }
  .tkc-stamp { right: 12px; }
}
/* совсем узкие экраны (<375): «Только необходимые» в одну строку впритык — разрешаем перенос, кнопки одного размера */
@media (max-width: 374px) {
  .tkc-btn { white-space: normal; padding: 6px 8px; }
}
/* уменьшение движения: никаких выездов и отрывов — плашка просто есть и просто исчезает */
@media (prefers-reduced-motion: reduce) {
  .tkc, .tkc * { animation: none !important; transition: none !important; }
}