/* madwars.ru — MADWARS gothic-arena theme (v2, May 2026) */

:root {
    /* Layout — единый источник правды для ширины и spacing */
    --page-max: 1440px;
    --page-pad-x: 32px;
    --page-pad-y: 28px;
    --page-pad-bottom: 64px;
    --topbar-h: 83px;
    --footer-h: 83px;
    --hero-pad: 32px;
    --hero-max: 1440px;
    --hero-ratio: 1440 / 675;     /* aspect-ratio hero после подреза */
    --content-gap: 24px;

    /* v2 gothic-arena palette */
    --metal-dark: #1a1410;
    --metal-mid:  #2a2018;
    --metal-light:#3d2f25;
    --rust:       #6b3a1f;
    --bone:       #d4c8b8;

    --bg-0: #0d0907;            /* near-black warm */
    --bg-1: var(--metal-dark);
    --bg-2: var(--metal-mid);
    --bg-3: var(--metal-light);
    --line: #4a3a2a;
    --line-soft: #2a1f17;

    --txt: #e8d6b3;             /* warm cream */
    --txt-soft: #ad9a80;
    --txt-mute: #82715e;

    --accent: #ff5530;          /* lava orange (v2 hero accent) */
    --accent-glow: #ffb070;     /* warm glow tint */
    --ember: #ff3300;           /* deep ember */
    --site-accent: #d86643;     /* global MadWars UI, never inherited from a game */
    --site-accent-deep: #8f301f;
    --accent-2: #c14040;        /* кровавый — для bad/hidden/danger */
    --accent-3: #4a90e2;        /* синий — резерв (live/info) */
    --neon-blue: #3ad9ff;       /* электрический cyan — keep for live indicators */
    --neon-blue-2: #4a90e2;     /* мягкий синий ambient */
    --neon-red: #ff3a3a;        /* интенсивный красный для action */
    --good: #5db35d;
    --bad: #c14040;
    --hidden: #c79a3a;
    --shadow: 0 4px 24px rgba(0,0,0,.6);
    --display: "Cinzel", Georgia, "Times New Roman", serif;
    --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "JetBrains Mono", "Fira Code", Consolas, monospace;
}

/* Auth presentation lives in public/assets/auth.css and loads only on auth pages. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: #000;
    background-attachment: fixed;
    color: var(--txt);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

/* ============== HEADER ============== */
.topbar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 28px;
    background:
        linear-gradient(180deg, rgba(40,28,20,.92) 0%, rgba(15,10,8,.95) 100%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 18px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,180,100,.06);
    position: sticky; top: 0; z-index: 50;
}
/* Топбар поверх hero — на всех страницах: чёрная подложка + полоска под меню 65% прозрачности */
.topbar {
    background: rgba(0,0,0,.9);
    border-bottom: 4px solid rgba(0,0,0,.35);
    box-shadow: none;
    backdrop-filter: none;
    padding: 6px 28px;
    position: relative;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible;
    z-index: 50;
}
.topnav a {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.5);
}
.topnav a:hover {
    color: var(--accent-glow);
    background: rgba(0,0,0,.3);
}
.topnav-sep { background: rgba(255,255,255,.3); }
#player-search {
    background: rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
#player-search::placeholder { color: rgba(255,255,255,.55); }
body[data-tab="all"] .lang-switch button {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
body[data-tab="all"] .nav-toggle-bar { background: #fff; }
.brand {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit;
    cursor: pointer;
    transition: filter .15s;
}
.brand:hover { filter: brightness(1.10); }
.brand .brand-logo-3d, .brand .logo-mark, .brand .brand-title, .brand .brand-sub { pointer-events: none; }

/* v2 3D logo (the new image) — 67px desktop / 45px mobile */
.brand-logo-3d {
    height: 67px; width: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    transition: filter .15s;
}
.brand:hover .brand-logo-3d { filter: brightness(1.1); }
@media (max-width: 720px) {
    .brand-logo-3d { height: 45px; }
}

/* legacy mark/title kept for compatibility (splash, etc.) */
.logo-mark {
    width: 72px; height: 72px;
    display: block;
    object-fit: contain;
    filter:
        drop-shadow(0 0 4px rgba(0,0,0,1))
        drop-shadow(0 0 10px rgba(0,0,0,.85))
        drop-shadow(0 0 18px rgba(255,85,48,.45))
        drop-shadow(0 0 32px rgba(255,85,48,.28));
}
.brand:hover .logo-mark {
    filter:
        drop-shadow(0 0 4px rgba(0,0,0,1))
        drop-shadow(0 0 12px rgba(0,0,0,.9))
        drop-shadow(0 0 22px rgba(255,85,48,.75))
        drop-shadow(0 0 40px rgba(255,85,48,.5));
}
@media (max-width: 720px) {
    .logo-mark { width: 52px; height: 52px; }
}
.brand-title {
    font-family: var(--display);
    font-weight: 800; font-size: 28px; letter-spacing: 2px;
    color: var(--txt);
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.brand-title .dot {
    color: var(--accent);
    text-shadow: 0 0 6px rgba(255,85,48,.65), 0 0 14px rgba(255,85,48,.4);
    animation: brandDotPulse 2.4s ease-in-out infinite;
}
@keyframes brandDotPulse {
    0%, 100% { text-shadow: 0 0 4px rgba(255,85,48,.4), 0 0 10px rgba(255,85,48,.25); opacity: .9; }
    50%      { text-shadow: 0 0 8px rgba(255,85,48,.9), 0 0 18px rgba(255,85,48,.5); opacity: 1; }
}
.brand-sub { font-size: 10px; color: var(--txt-soft); text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; }

.topnav { display: flex; gap: 4px; flex: 1; margin-left: 24px; align-items: center; }
.topnav a {
    position: relative;
    padding: 8px 14px; color: var(--txt-soft);
    text-decoration: none; border-radius: 4px; font-size: 14px;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.topnav-game span:not(.ovr-game-badge) { white-space: nowrap; }
.topnav a::after {
    content: ""; position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 1px;
    background: var(--neon-blue);
    box-shadow: 0 0 6px var(--neon-blue), 0 0 12px rgba(58,217,255,.55);
    opacity: 0;
    transform: scaleX(.4);
    transform-origin: center;
    transition: opacity .18s ease, transform .22s ease;
    pointer-events: none;
}
.topnav a:hover { color: var(--txt); background: var(--bg-2); }
.topnav a:hover::after { opacity: .85; transform: scaleX(1); }
.topnav a.active {
    color: var(--accent);
    background: var(--bg-2);
    text-shadow: 0 0 8px rgba(58,217,255,.35);
}
.topnav a.active::after { opacity: 1; transform: scaleX(1); }
.topnav-stats:hover::after {
    background: var(--neon-red);
    box-shadow: 0 0 6px var(--neon-red), 0 0 12px rgba(255,58,58,.55);
}

.lang-switch { display: flex; gap: 2px; background: var(--bg-2); border-radius: 4px; padding: 2px; }
.lang-switch button {
    background: none; border: 0; color: var(--txt-soft);
    padding: 6px 10px; font-size: 12px; font-weight: 600;
    cursor: pointer; border-radius: 3px; font-family: inherit;
}
.lang-switch button.on {
    background: linear-gradient(180deg, var(--site-accent) 0%, var(--site-accent-deep) 100%);
    color: #fff4e9;
    box-shadow: 0 0 10px rgba(216,102,67,.4), inset 0 1px 0 rgba(255,220,190,.28);
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

/* ============== v2 METAL-FRAME BUTTONS (generic) ============== */
.btn,
.qtv-btn-primary,
.cs-submit-btn,
.cv2-btn,
.acc-form button,
.acc-add-stream button,
.acc-claim button,
.cms-new-btn,
.uc-btn,
.bc-copy-btn,
.cv-copy-btn {
    display: inline-block;
    border: 1px solid var(--metal-light);
    background: linear-gradient(180deg, #3a2e22, #1a1410);
    box-shadow:
        inset 0 1px 0 rgba(255,180,100,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.6),
        0 0 0 1px rgba(0,0,0,0.4);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: color .15s, box-shadow .18s, border-color .18s, filter .15s;
}
.btn:hover,
.qtv-btn-primary:hover,
.cs-submit-btn:hover,
.cv2-btn:hover,
.acc-form button:hover,
.acc-add-stream button:hover,
.acc-claim button:hover,
.cms-new-btn:hover,
.uc-btn:hover,
.bc-copy-btn:hover,
.cv-copy-btn:hover {
    color: var(--accent-glow);
    border-color: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255,210,170,0.25),
        inset 0 -1px 0 rgba(0,0,0,.6),
        0 0 0 1px rgba(255,85,48,.45),
        0 0 16px rgba(255,85,48,0.4);
}
/* uc-btn variants: keep semantic colors but lava-glow on hover */
.uc-btn.uc-btn-approve { color: #9be29b; }
.uc-btn.uc-btn-reject  { color: #ff8a8a; }