/* ═══════════════════════════════════════════════════════════════════════════
   TeleBet — слой оформления «Editorial × геэз»
   Бренд-цвет TeleBet (синий) остаётся акцентом интерактива: кнопки, ссылки,
   активные состояния. Золото закреплено ЗА ОДНИМ смыслом — культурный слой:
   орнамент, капители таблиц, врезки. Два цвета, но каждый со своей работой.
   Градиенты сняты полностью: плоские заливки + орнамент дают глубину.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --teleb-gold:   #c8992e;
    --teleb-gold-dim: rgba(200,153,46,.30);
    --teleb-clay:   #8f2b20;

    /* градиентные токены обезврежены — остаются плоскими */
    --teleb-gradient-primary: var(--teleb-primary);
    --teleb-gradient-dark:    var(--teleb-bg-dark);

    /* радиусы: не лесенка 6/10/16, а осознанная пара «бумага / жетон» */
    --teleb-radius-sm: 2px;
    --teleb-radius:    3px;
    --teleb-radius-lg: 4px;

    /* разная длительность под разные жесты вместо 0.2s на всё */
    --teleb-transition: 140ms cubic-bezier(.2,.7,.3,1);
    --teleb-transition-slow: 420ms cubic-bezier(.2,.7,.3,1);

    /* сигнатура: геэз-лента, мотив снят с орнамента на баннере оператора */
    --teleb-geez: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18' viewBox='0 0 72 18'%3E%3Cg fill='none' stroke='%23c8992e' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M0 13 L9 4 L18 13 L27 4 L36 13 L45 4 L54 13 L63 4 L72 13'/%3E%3Cpath d='M4 17 h4 M22 17 h4 M40 17 h4 M58 17 h4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── 1. ГРАДИЕНТЫ СНЯТЫ ───────────────────────────────────────────────── */
.teleb-btn-primary, .teleb-cta-primary, .js-link.teleb-btn-primary,
[class*="btn"][class*="primary"] { background: var(--teleb-primary); }
.teleb-btn-primary:hover { background: var(--teleb-primary-light); }
.teleb-fixed-cta, #teleb-fixed-cta { background: #0d0f14; border-top: 1px solid var(--teleb-gold-dim); }

.teleb-intro-banner {
    background:
        linear-gradient(180deg, rgba(10,11,13,.30) 0%, rgba(10,11,13,.80) 100%),
        url('/images/banner.webp') center/cover no-repeat;
    border: 1px solid var(--teleb-gold-dim);
    border-radius: 4px;
}

/* ── 2. ТИПОГРАФИКА: контраст 300/800 вместо 400/600 ──────────────────── */
h1, .teleb-main-title { font-weight: 800; letter-spacing: -.022em; line-height: 1.07; }
h2 { font-weight: 800; letter-spacing: -.015em; }
h3 { font-weight: 700; letter-spacing: -.005em; }
.teleb-lead-text p { font-weight: 300; font-size: 1.09rem; line-height: 1.76; }

/* ── 3. РИТМ: секции чередуются, вместо одинаковой линии сверху ────────── */
.teleb-txt-zone { border-top: none; padding: 76px 0; }
.teleb-txt-zone:nth-of-type(even) { background: var(--teleb-bg-light); }

/* заголовок секции получает геэз-ленту — структурный маркер, не декор */
.teleb-txt-zone > .teleb-frame > h2 { position: relative; padding-top: 28px; }
.teleb-txt-zone > .teleb-frame > h2::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 132px; height: 18px; background: var(--teleb-geez) repeat-x;
}

/* ── 4. ЛИД: врезка + капитель. Точка входа в длинную статью ───────────── */
.teleb-lead-text { border-left: 2px solid var(--teleb-gold); padding-left: 22px; }
.teleb-lead-text > p:first-child::first-letter {
    float: left; font-size: 3.1rem; line-height: .84; font-weight: 800;
    padding: 4px 10px 0 0; color: var(--teleb-gold);
}

/* ── 5. ТАБЛИЦЫ: газетные линейки, капители золотом ───────────────────── */
table { border-collapse: collapse; width: 100%; }
thead, thead tr, th { background: transparent !important; }
th { border-bottom: 2px solid var(--teleb-gold-dim); color: var(--teleb-gold);
     font-weight: 800; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
td { border-bottom: 1px solid rgba(255,255,255,.07); }
tbody tr { transition: background var(--teleb-transition); }
tbody tr:hover td { background: rgba(65,99,246,.06); }

/* ── 6. КАРТОЧКИ И ВРЕЗКИ: грань вместо одинаковой тени у всех ─────────── */
.teleb-note-block, .teleb-info-box, .teleb-warn-block,
.teleb-trust-block .teleb-frame > div, .teleb-rebate-block .teleb-frame > div {
    box-shadow: none; border-left: 2px solid var(--teleb-primary);
}
.teleb-warn-block, [class*="warn"] { border-left-color: var(--teleb-gold); }

/* ── 7. ПЛИТКИ ИГР: 5 в ряд — в последнем ряду не остаётся одиночки ────── */
.teleb-slots-grid, .teleb-slot-list, .teleb-game-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
@media (max-width: 1040px) { .teleb-slots-grid, .teleb-slot-list, .teleb-game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .teleb-slots-grid, .teleb-slot-list, .teleb-game-grid { grid-template-columns: repeat(2, 1fr); } }

.teleb-slot-tile {
    border-radius: 3px; border: 1px solid rgba(255,255,255,.07);
    transition: transform var(--teleb-transition), border-color var(--teleb-transition);
}
.teleb-slot-tile:hover { transform: translateY(-4px); border-color: var(--teleb-primary); }

/* ── 8. FAQ: раскрытый вопрос помечен гранью, а не только фоном ────────── */
.teleb-ask-block { border-bottom: 1px solid rgba(255,255,255,.07); }
.teleb-ask-block.open { background: rgba(65,99,246,.05); box-shadow: inset 2px 0 0 var(--teleb-primary); }
.teleb-qa-q::after { color: var(--teleb-gold); }

/* ── 9. ХРОМ: шапка и подвал ──────────────────────────────────────────── */
.teleb-header { border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: none; }
.teleb-footer { border-top: none; position: relative; }
.teleb-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18px;
    background: var(--teleb-geez) repeat-x; opacity: .55;
}

/* ── 10. ПОЯВЛЕНИЕ: секция выезжает снизу, а не просто гаснет ──────────── */
.teleb-fade-in { opacity: .28; transform: translateY(10px);
    transition: opacity 260ms ease-out, transform 260ms cubic-bezier(.2,.7,.3,1); }
.teleb-fade-in.teleb-vis { opacity: 1; transform: none; }

/* ── 11. ДОСТУПНОСТЬ ──────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, .js-link:focus-visible, .teleb-qa-q:focus-visible {
    outline: 2px solid var(--teleb-gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .teleb-fade-in { opacity: 1; transform: none; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 12. ЦИФРЫ КАК ГЕРОЙ: KPI-плитки ──────────────────────────────────── */
.teleb-kpi-tile { border: 1px solid rgba(255,255,255,.07); background: transparent;
    transition: border-color var(--teleb-transition), transform var(--teleb-transition); }
.teleb-kpi-tile:hover { border-color: var(--teleb-primary); transform: translateY(-2px); }
.teleb-fig-val { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.teleb-metric-lab { color: var(--teleb-text-muted); font-size: .78rem;
    letter-spacing: .08em; text-transform: uppercase; }
.teleb-num-glyph { color: var(--teleb-gold); }

/* ── 13. УГОЛ РУКОПИСИ: у важных врезок — золотая засечка ─────────────── */
.teleb-note-block, .teleb-warn-block { position: relative; }
.teleb-note-block::after, .teleb-warn-block::after {
    content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
    border-top: 2px solid var(--teleb-gold); border-right: 2px solid var(--teleb-gold);
    opacity: .55;
}

/* ── 14. ПРОГРЕСС ЧТЕНИЯ: полоса золотом, статья длинная ──────────────── */
#teleb-read-bar { background: var(--teleb-gold); height: 2px; }

/* ── 15. ССЫЛКИ В ТЕКСТЕ: подчёркивание растёт из-под слова ───────────── */
.teleb-txt-zone a:not([class]) {
    text-decoration: none; background-image: linear-gradient(var(--teleb-primary-light), var(--teleb-primary-light));
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size 180ms cubic-bezier(.2,.7,.3,1);
}
.teleb-txt-zone a:not([class]):hover { background-size: 100% 1px; }

/* ── 16. ПЛИТКИ ИГР: имя игры проявляется по наведению ────────────────── */
.teleb-slot-tile::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
    background: var(--teleb-primary); transform: scaleX(0); transform-origin: left;
    transition: transform 200ms cubic-bezier(.2,.7,.3,1);
}
.teleb-slot-tile:hover::after { transform: scaleX(1); }

/* ── 17. МОБИЛЬНЫЙ ОТСТУП СВЕРХУ ──────────────────────────────────────────
   style.css в блоке ≤790px даёт первому блоку main `padding-top: 80px
   !important` — компенсацию фиксированной шапки. Но шапка здесь
   `position: sticky`, то есть занимает место в потоке, и контент под неё не
   уезжает: компенсировать нечего. В результате на телефоне над «хлебными
   крошками» висела пустая полоса почти в полтора экрана шапки.
   Оставляем небольшой воздух, соразмерный шапке (60px), а не её двойную высоту. */
@media (max-width: 790px) {
    main > div:first-child,
    main > [class*="-frame"]:first-child { padding-top: 18px !important; }
}

/* ── 18. КАДРЫ ДОНОРА В ТЕКСТЕ: рамка-паспарту с подписью ─────────────── */
.teleb-shot { margin: 34px 0 40px; }
.teleb-shot img {
    display: block; width: 100%; height: auto;
    border: 1px solid rgba(255,255,255,.09); border-radius: 3px;
}
.teleb-shot figcaption {
    margin-top: 10px; padding-left: 14px;
    border-left: 2px solid var(--teleb-gold);
    color: var(--teleb-text-muted); font-size: .84rem; line-height: 1.6;
}