/* ============== QTV banner (stats.php?g=qw) ============== */
.qtv-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(74,144,226,0.12), rgba(212,166,87,0.08));
    border: 1px solid rgba(74,144,226,0.35);
    border-radius: 10px;
    padding: 16px 20px;
    margin: -8px 0 28px;
    flex-wrap: wrap;
    position: relative;
}
.qtv-banner-icon {
    color: var(--accent-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(74,144,226,0.15);
    border-radius: 8px;
}
.qtv-banner-text { flex: 1 1 280px; min-width: 0; }
.qtv-banner-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.qtv-banner-sub { font-size: 13px; color: var(--txt-soft); }
.qtv-banner-hint {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--txt-soft);
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    margin-top: 2px;
}
.qtv-banner-hint code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--accent);
    background: rgba(255,255,255,0.04);
    padding: 1px 5px;
    border-radius: 3px;
}
.qtv-pulse {
    width: 9px;
    height: 9px;
    background: #ff4a4a;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255,74,74,0.7);
    animation: qtv-pulse 1.6s ease-out infinite;
}
@keyframes qtv-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,74,74,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255,74,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,74,74,0); }
}
.qtv-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qtv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: background .15s, color .15s, border-color .15s;
}
.qtv-btn-primary {
    background: var(--accent-3);
    color: #fff;
    border-color: var(--accent-3);
}
.qtv-btn-primary:hover { background: #5fa3ee; border-color: #5fa3ee; }
.qtv-btn-ghost {
    background: transparent;
    color: var(--txt);
    border-color: rgba(255,255,255,0.18);
}
.qtv-btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); }
.qtv-btn-ghost code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--accent);
    background: transparent;
    padding: 0;
}
.qtv-copy { position: relative; }
.qtv-copy-icon { opacity: .5; font-size: 14px; }
.qtv-copy.copied::after {
    content: "✓";
    position: absolute;
    top: -6px;
    right: -6px;
    background: #2eaa5a;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
}
@media (max-width: 700px) {
    .qtv-banner { padding: 12px 14px; gap: 12px; }
    .qtv-banner-title { font-size: 14px; }
    .qtv-banner-sub { font-size: 12px; }
    .qtv-btn { padding: 7px 11px; font-size: 12px; }
}

/* ============== QTV mini-badge (index.php Q1 group) ============== */
.qtv-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(74,144,226,0.08);
    border: 1px solid rgba(74,144,226,0.25);
    border-radius: 6px;
    font-size: 12px;
}
.qtv-mini-dot {
    width: 8px;
    height: 8px;
    background: #ff4a4a;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,74,74,0.7);
    animation: qtv-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
.qtv-mini-lbl { font-weight: 700; color: var(--accent-3); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.qtv-mini-link {
    color: var(--txt);
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qtv-mini-link code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--accent);
    background: transparent;
    padding: 0;
}
.qtv-mini-link:hover code { text-decoration: underline; }
.qtv-mini-more {
    color: var(--txt-soft);
    text-decoration: none;
    font-size: 11px;
}
.qtv-mini-more:hover { color: var(--accent); }

/* =====================================================================
   ===========  MADWARS BRAND BOOK v2 — full theme application  =========
   =====================================================================
   Added: textures, rivets on primary CTAs, decorative spikes/medallions,
          "PLAY NOW" oversized buttons, action bar, ember overlay.
   Keep this block at the END so it overrides earlier rules where needed.
   ===================================================================== */

/* ---------- 1. Texture overlays ---------------------------------------
   Applied as ::before pseudo-elements with very low alpha & blend mode.
   We use isolation:isolate where needed to avoid leaking outside.        */

/* Topbar остаётся absolute (см. правило выше, line 74) — overlay над hero.
   Здесь только isolation для текстуры ::before. */
.topbar { isolation: isolate; }

/* .topbar теперь position: relative (см. правило выше, line 65+) —
   padding-top на body больше не нужен. */

.topbar::before {
    content: "";
    position: absolute; inset: 0;
    background: url('/madwars.ru/assets/brand/v2/tex_metal_tread.png') repeat;
    background-size: 256px;
    opacity: .10;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}

/* RUSTED METAL — applied to major cards */
.match-card, .ovr-table, .qtv-mini, .group-stats, .hub-section, .hub-hero,
.hub-card, .hof-card, .player-card, .stats-block {
    position: relative;
    isolation: isolate;
}
.match-card::before,
.ovr-table::before,
.hub-section::before,
.hub-hero::before,
.hub-card::before,
.hof-card::before,
.player-card::before,
.stats-block::before {
    content: "";
    position: absolute; inset: 0;
    background: url('/madwars.ru/assets/brand/v2/tex_metal_rusted.png') repeat;
    background-size: 256px;
    opacity: .055;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

/* DARK PLATE on hero stat plates */
.stat { position: relative; isolation: isolate; }
.stat::before {
    content: "";
    position: absolute; inset: 0;
    background: url('/madwars.ru/assets/brand/v2/tex_metal_dark.png') repeat;
    background-size: 256px;
    opacity: .14;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

/* BRUSHED on qtv/spec banners */
.qtv-banner, .spec-banner { position: relative; isolation: isolate; }
.qtv-banner::before, .spec-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: url('/madwars.ru/assets/brand/v2/tex_metal_brushed.png') repeat;
    background-size: 256px;
    opacity: .10;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

/* Embers overlay убран — колизей-сцена самодостаточна, наложение портит вид */
body[data-tab="all"] .hero { position: relative; }
body[data-tab="all"] .hero .hero-embers { display: none; }

/* === Мерцающие факелы поверх колизея === */
.hero-flames {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.hero-flames .flame {
    position: absolute;
    width: clamp(40px, 5vw, 80px);
    height: clamp(40px, 5vw, 80px);
    background: radial-gradient(circle, rgba(255,180,80,.32) 0%, rgba(255,80,30,.20) 25%, rgba(255,50,10,.08) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
    opacity: .55;
    animation: flicker var(--d, 1.8s) ease-in-out infinite alternate;
}
@keyframes flicker {
    0%   { opacity: .35; transform: scale(.92); }
    20%  { opacity: .58; transform: scale(1.05); }
    40%  { opacity: .40; transform: scale(.98); }
    60%  { opacity: .65; transform: scale(1.08); }
    80%  { opacity: .42; transform: scale(.95); }
    100% { opacity: .55; transform: scale(1.02); }
}
/* Позиции по колизей-сцене (картинка обрезается cover, точки в относительных %)
   Длительности 4-6 сек — медленное мерцание факелов */
.hero-flames .f1  { left:  6%; bottom: 18%; --d: 4.7s; animation-delay: 0s; }
.hero-flames .f2  { left: 14%; bottom: 12%; --d: 5.3s; animation-delay: -1.2s; }
.hero-flames .f3  { left: 23%; bottom: 14%; --d: 4.9s; animation-delay: -2.4s; }
.hero-flames .f4  { left: 33%; bottom: 10%; --d: 5.6s; animation-delay: -3.0s; }
.hero-flames .f5  { left: 44%; bottom: 12%; --d: 4.5s; animation-delay: -.8s; }
.hero-flames .f6  { left: 56%; bottom: 12%; --d: 5.8s; animation-delay: -2.7s; }
.hero-flames .f7  { left: 66%; bottom: 10%; --d: 4.6s; animation-delay: -3.8s; }
.hero-flames .f8  { left: 76%; bottom: 14%; --d: 5.2s; animation-delay: -1.5s; }
.hero-flames .f9  { left: 85%; bottom: 22%; --d: 4.8s; animation-delay: -2.9s; }
.hero-flames .f10 { left: 93%; bottom: 28%; --d: 5.5s; animation-delay: -.5s; }
/* верхние "banner" точки удалены — там нет огня в картинке, мешают */
.hero-flames .f-banner-l,
.hero-flames .f-banner-r { display: none; }
@media (prefers-reduced-motion: reduce) {
    .hero-flames .flame { animation: none; opacity: .7; }
}

/* ---------- 2. Brand-book primary buttons w/ corner rivets -----------
   These styles apply to:
     • .btn-brand           — explicit brand-book button class
     • .btn-primary         — generic primary
     • .qtv-btn-primary     — broadcast pages
     • .acc-form button[type=submit]
     • .u-follow            — scoped in u.php; we still set rivets globally
     • .spec-btn            — spec-banner CTA
     • a.ovr-play-watch, a.ovr-play-join  — overview "WATCH"/"JOIN"
   To get all FOUR corner rivets we wrap with the ::before (top corners)
   and use the element's own box-shadow trick for bottom corners.       */

.btn-brand,
.btn-primary,
.qtv-btn-primary,
.acc-form button[type="submit"],
.spec-btn,
a.spec-btn,
a.ovr-play-watch,
a.ovr-play-join,
.bb-action {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #4a3a2c 0%, #25180f 100%);
    border: 1px solid #6b4a30;
    color: var(--accent);
    padding: 11px 26px 11px 26px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    text-shadow:
        0 1px 0 rgba(0,0,0,.85),
        0 0 12px rgba(255,85,48,.5);
    box-shadow:
        inset 0 1px 0 rgba(255,200,140,.22),
        inset 0 -1px 0 rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(0,0,0,.35),
        0 4px 14px rgba(0,0,0,.55),
        0 0 18px rgba(255,85,48,.15);
    transition: filter .15s, box-shadow .18s, border-color .18s, color .15s, transform .12s;
}
.btn-brand:hover,
.btn-primary:hover,
.qtv-btn-primary:hover,
.acc-form button[type="submit"]:hover,
.spec-btn:hover, a.spec-btn:hover,
a.ovr-play-watch:hover,
a.ovr-play-join:hover,
.bb-action:hover {
    color: #ffd6a8;
    border-color: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255,220,170,.32),
        inset 0 -1px 0 rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(255,85,48,.35),
        0 4px 18px rgba(0,0,0,.6),
        0 0 22px rgba(255,85,48,.55),
        0 0 42px rgba(255,85,48,.25);
    transform: translateY(-1px);
}
.btn-brand:active,
.btn-primary:active,
.qtv-btn-primary:active,
.acc-form button[type="submit"]:active,
.spec-btn:active, a.spec-btn:active,
a.ovr-play-watch:active,
a.ovr-play-join:active,
.bb-action:active { transform: translateY(0); filter: brightness(.96); }

/* Corner rivets — two on top via ::before/::after; two on bottom via a
   second pseudo on a wrapper. Since we only have ::before/::after on the
   button itself we paint all 4 rivets using a single background-image
   layer of 4 radial-gradients positioned at the corners. This works on
   every element without needing extra markup.                          */
.btn-brand,
.btn-primary,
.qtv-btn-primary,
.acc-form button[type="submit"],
.spec-btn, a.spec-btn,
a.ovr-play-watch, a.ovr-play-join,
.bb-action {
    background-image:
        radial-gradient(circle at 6px 6px, rgba(20,12,8,.95) 0 1.4px, rgba(60,42,28,.8) 1.6px 2.8px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 6px) 6px, rgba(20,12,8,.95) 0 1.4px, rgba(60,42,28,.8) 1.6px 2.8px, transparent 3.2px),
        radial-gradient(circle at 6px calc(100% - 6px), rgba(20,12,8,.95) 0 1.4px, rgba(60,42,28,.8) 1.6px 2.8px, transparent 3.2px),
        radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(20,12,8,.95) 0 1.4px, rgba(60,42,28,.8) 1.6px 2.8px, transparent 3.2px),
        linear-gradient(180deg, #4a3a2c 0%, #25180f 100%);
    background-repeat: no-repeat;
}

/* "PLAY NOW" oversized — use .btn-brand.btn-lg or .btn-play-now class */
.btn-play-now, .btn-brand.btn-lg {
    padding: 16px 38px;
    font-size: 17px;
    letter-spacing: .18em;
}
.btn-play-now {
    /* same rivet/frame from above is inherited */
}

/* ---------- 3. Overview row "WATCH" / "JOIN" buttons ----------------- */
.ovr-play {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}
a.ovr-play-watch, a.ovr-play-join {
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: .08em;
    border-radius: 3px;
    line-height: 1;
    min-width: 70px;
}
a.ovr-play-join { color: #ffd49a; }
a.ovr-play-join:hover { color: #fff; }
.ovr-play .ovr-play-ico {
    width: 12px; height: 12px;
    display: inline-block;
    flex-shrink: 0;
    opacity: .85;
}
@media (max-width: 720px) {
    .ovr-play { gap: 4px; }
    a.ovr-play-watch, a.ovr-play-join {
        padding: 5px 8px; font-size: 10px; min-width: 0;
    }
    a.ovr-play-watch .ovr-play-lbl { display: none; }
    a.ovr-play-join  .ovr-play-lbl { display: none; }
}

/* ---------- 4. Decorative spikes & medallion (SVG inline) ----------- */
.bb-spikes {
    display: block;
    margin: 22px auto;
    width: min(360px, 60%);
    height: 22px;
    color: var(--accent);
    opacity: .55;
    filter: drop-shadow(0 0 8px rgba(255,85,48,.45));
}
.bb-medallion {
    display: inline-block; vertical-align: middle;
    width: 28px; height: 28px;
    color: var(--accent);
    opacity: .75;
    filter: drop-shadow(0 0 6px rgba(255,85,48,.45));
}

/* ---------- 5. Action bar (LOGIN / SETTINGS / PLAY / SERVERS / DL) -- */
.bb-action-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px auto 20px;
    padding: 14px 12px;
    max-width: 1100px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background:
        linear-gradient(180deg, rgba(40,28,20,.45) 0%, rgba(15,10,8,.6) 100%);
    position: relative;
    isolation: isolate;
}
.bb-action-bar::before {
    content: "";
    position: absolute; inset: 0;
    background: url('/madwars.ru/assets/brand/v2/tex_metal_brushed.png') repeat;
    background-size: 256px;
    opacity: .07;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}
.bb-action {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: .1em;
    min-width: 96px;
    flex: 0 0 auto;
}
.bb-action .bb-action-ico {
    width: 14px; height: 14px;
    display: inline-block;
    color: currentColor;
    opacity: .9;
}
@media (max-width: 720px) {
    .bb-action-bar { gap: 6px; padding: 10px 8px; margin: 22px 8px 14px; }
    .bb-action { padding: 7px 10px; font-size: 10px; letter-spacing: .06em; min-width: 76px; }
    .bb-action .bb-action-lbl { font-size: 10px; }
}
@media (max-width: 460px) {
    .bb-action { min-width: 64px; padding: 6px 7px; }
    .bb-action .bb-action-ico { width: 12px; height: 12px; }
}

/* ---------- 6. Hall-of-Fame heading medallion accent ---------------- */
.hof h1::before, .hof h2::before { content: ""; }

/* ---------- 7. Mobile drawer M-mark ---------------------------------- */
.mobile-drawer .md-mark {
    display: block;
    width: 56px; height: 56px;
    margin: 0 auto 8px;
    background: url('/madwars.ru/assets/brand/v2/mark.png') center/contain no-repeat;
    filter: drop-shadow(0 0 12px rgba(255,85,48,.4));
}

/* ---------- 8. Overview "open" link kept as text fallback ----------- */
.ovr-go a.ovr-go-text {
    /* Old plain link style is preserved by base .ovr-go a rule */
}

/* ---------- 9. Mobile/responsive tweaks ----------------------------- */
@media (max-width: 720px) {
    .btn-brand, .btn-primary, .qtv-btn-primary,
    .acc-form button[type="submit"],
    .spec-btn, a.spec-btn {
        padding: 10px 18px; font-size: 12px; letter-spacing: .08em;
    }
}