:root {
    --bg:            #090a1f;
    --bg-2:          #11122b;
    --surface:       #13142e;
    --surface-2:     #1b1c3c;
    --surface-3:     rgba(11, 12, 33, 0.66);
    --surface-4:     #2a2c5c;
    --surface-soft:  rgba(120, 124, 255, 0.10);
    --border:        #2c2e62;
    --border-soft:   rgba(150, 156, 255, 0.16);

    --text:          #eef0ff;
    --text-muted:    #c0c3ee;
    --text-dim:      #a3a7d8;

    --success:       #3ddc84;
    --warning:       #ffc547;
    --danger:        #ff5a6a;
    --info:          #5cc8ff;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.28), 0 14px 32px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.30), 0 28px 56px rgba(0, 0, 0, 0.42);

    --ds-glass: rgba(19, 20, 46, 0.72);
    --ds-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --ds-glow-a: rgba(108, 99, 255, 0.20);
    --ds-glow-b: rgba(79, 195, 255, 0.10);
    --ds-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2);
    --ds-tap: 44px;
}

:root[data-theme="light"] {
    --bg:            #f3f4fb;
    --bg-2:          #ffffff;
    --surface:       #ffffff;
    --surface-2:     #ffffff;
    --surface-3:     #eff0fb;
    --surface-4:     #f8f8ff;
    --surface-soft:  rgba(91, 82, 232, 0.06);
    --border:        #dcdef0;
    --border-soft:   rgba(91, 82, 232, 0.14);

    --text:          #17182f;
    --text-muted:    #50527a;
    --text-dim:      #5f6188;

    --shadow-xs: 0 1px 2px rgba(23, 24, 47, 0.06), 0 2px 6px rgba(23, 24, 47, 0.04);
    --shadow-sm: 0 1px 3px rgba(23, 24, 47, 0.07), 0 6px 14px rgba(23, 24, 47, 0.06);
    --shadow-md: 0 2px 6px rgba(23, 24, 47, 0.07), 0 14px 28px rgba(23, 24, 47, 0.09);
    --shadow-lg: 0 4px 10px rgba(23, 24, 47, 0.08), 0 28px 52px rgba(23, 24, 47, 0.14);

    --ds-glass: rgba(255, 255, 255, 0.78);
    --ds-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --ds-glow-a: rgba(91, 82, 232, 0.10);
    --ds-glow-b: rgba(14, 134, 201, 0.07);
}

::selection { background: var(--accent); color: var(--on-accent); }

body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 12% -8%, var(--ds-glow-a), transparent 70%),
        radial-gradient(800px 480px at 100% 4%, var(--ds-glow-b), transparent 70%);
}

h1, h2, h3, h4 { letter-spacing: -0.012em; text-wrap: balance; }
p { text-wrap: pretty; }
b, strong, .pulse-stat b, .tournament-prize, [class*="count"], [class*="score"], [class*="rank"] {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus);
    border-radius: var(--radius-sm);
}
.form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }

.container { padding-left: 24px; padding-right: 24px; }
.main-content { padding: 48px 0 64px; }

.header {
    background: var(--ds-glass);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--ds-hairline), var(--shadow-md);
}
.header .nav-link { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.005em; }
.header .nav-link[aria-current="page"] { box-shadow: 0 8px 20px -8px var(--accent-ring), var(--ds-hairline); }
.logo { letter-spacing: -0.02em; }

.btn {
    min-height: 42px;
    padding: 10px 20px;
    border-width: 1.5px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: 0.005em;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: var(--ds-hairline), 0 6px 16px -6px var(--accent-ring);
}
.btn-primary:hover:not(:disabled) {
    box-shadow: var(--ds-hairline), 0 12px 26px -8px var(--accent-ring);
    filter: brightness(1.06);
}
.btn-secondary, .btn-login, .btn-small {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-secondary:hover:not(:disabled), .btn-login:hover:not(:disabled), .btn-small:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: var(--accent);
}
.btn-primary.btn-small, .btn-primary.btn-secondary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: var(--on-accent);
}
.btn-danger.btn-small { color: var(--danger); }
.btn-small { min-height: 36px; padding: 7px 16px; }
.btn-lg { min-height: 52px; padding: 14px 30px; }
.btn-danger { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn-icon { border-radius: 50%; min-height: 0; }

.section-head { margin-bottom: 24px; align-items: center; }
.section-head .section-title { font-weight: 800; letter-spacing: -0.02em; }
.section-head .section-title::before { width: 4px; border-radius: 2px; }
.featured-section { margin-bottom: 64px; }

.tournament-card, .stream-card, .post-card, .friend-card, .gift-card,
.user-card, .cosmetic-card, .how-step  {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--ds-hairline), var(--shadow-xs);
}
.tournament-card, .stream-card, .post-card, .cosmetic-card, .gift-card  {
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition);
}
.tournament-card:hover, .stream-card:hover, .post-card:hover,
.cosmetic-card:hover, .gift-card:hover  {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border-soft));
    box-shadow: var(--ds-hairline), var(--shadow-md), 0 0 0 1px var(--accent-ring);
}
.tournament-card h3 { font-weight: 800; letter-spacing: -0.012em; }
.tag-game, .tag-type { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 11px; }

.pulse-stats { border-radius: var(--radius-lg); box-shadow: var(--ds-hairline), var(--shadow-xs); }
.pulse-stat b { font-weight: 800; }
.home-banner { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--ds-hairline), var(--shadow-lg); }
.how-step { padding: 24px; }
.how-step-icon { border-radius: var(--radius-md); }

.form-group > label { font-weight: 600; letter-spacing: 0.005em; }
.form-input, .form-textarea, .form-select {
    min-height: 46px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    border: 1.5px solid var(--border);
}
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-soft));
}
.form-input::placeholder, .form-textarea::placeholder { opacity: 0.8; }

.modal {
    background: rgba(5, 6, 20, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
:root[data-theme="light"] .modal { background: rgba(23, 24, 47, 0.45); }
.modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-soft);
    box-shadow: var(--ds-hairline), var(--shadow-lg);
}
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-soft); }
.modal-header h3 { font-weight: 800; letter-spacing: -0.015em; }
.modal-close { border-radius: 50%; }
.modal-close:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }

.footer {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border-top: 1px solid var(--border-soft);
    box-shadow: inset 0 2px 0 -1px var(--accent);
}
.footer-section h4 { font-weight: 800; letter-spacing: -0.01em; }
.footer-bottom { border-top-color: var(--border-soft); }
.social-links a { border: 1px solid var(--border-soft); }

@media (max-width: 760px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .main-content { padding: 32px 0 48px; }
    .header { margin: 8px 10px 0; border-radius: var(--radius-lg); }
    .featured-section { margin-bottom: 44px; }
    .btn { min-height: var(--ds-tap); }
    .btn-small { min-height: 40px; }
    .form-input, .form-textarea, .form-select { min-height: var(--ds-tap); font-size: 16px; }
    .tournament-grid, .stream-grid { gap: 16px; }
    .modal { padding: 12px; }
    .modal-content { border-radius: var(--radius-lg); }
    .modal-header, .modal-body { padding-left: 18px; padding-right: 18px; }
    .tab-bar {
        background: var(--ds-glass);
        -webkit-backdrop-filter: saturate(160%) blur(18px);
        backdrop-filter: saturate(160%) blur(18px);
        border: 1px solid var(--border-soft);
        box-shadow: var(--ds-hairline), var(--shadow-lg);
    }
    .tab-bar-item { min-height: var(--ds-tap); }
}

@media (hover: none) {
    .tournament-card:hover, .stream-card:hover, .post-card:hover,
    .cosmetic-card:hover, .gift-card:hover  { transform: none; }
    .btn:hover:not(:disabled) { transform: none; }
}

@media (forced-colors: active) {
    .btn, .form-input, .form-textarea, .form-select, .tournament-card { border: 1px solid CanvasText; }
}

:root[data-theme="light"] .header .nav-link { color: var(--text-muted); opacity: 1; }
:root[data-theme="light"] .header .nav-link:hover { color: var(--accent); }
:root[data-theme="light"] .header .nav-link[aria-current="page"] { color: var(--header-pill-active-text); }
.tc-v2 .tournament-header.has-photo .tag-game { color: #fff; background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .tc-v2 .tournament-header:not(.has-photo) .tag-game { background: color-mix(in srgb, currentColor 12%, transparent); backdrop-filter: none; }
:root[data-theme="light"] .tc-v2 .tournament-header:not(.has-photo) .tc-status { color: var(--text); background: var(--surface-3); }

/* ============================================================
   Мобильная версия: точечные исправления без смены структуры
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
img, video, canvas, svg { max-width: 100%; }
.modal .modal-content { overscroll-behavior: contain; }

@media (max-width: 768px), (pointer: coarse) {
    /* Меньше 16px — iPhone при фокусе приближает страницу и не возвращает */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select, textarea, .form-input, select.form-input { font-size: 16px !important; }
    .btn-login, .header-actions .btn { min-width: 44px; }

    /* Зоны нажатия не меньше 44px, внешний вид прежний */
    #site-footer a { display: inline-block; padding-block: 11px; line-height: 1.3; }
    #site-footer li { margin: 0; }
    .guest-gate-skip { min-height: 44px; padding: 12px 16px; }
    .header-more-btn, .help-hint, .onboarding-dot, .modal-close { position: relative; }
    .header-more-btn::after, .help-hint::after, .onboarding-dot::after {
        content: ''; position: absolute; inset: -12px;
    }
    .modal-close { min-width: 44px; min-height: 44px; }

    /* Высоты без прыжков от адресной строки браузера */
    .modal .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
    .main-content { min-height: 60vh; min-height: 60dvh; }

    /* Вырезы и скруглённые экраны в горизонтальном положении */
    body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

    /* Длинные слова и ссылки не раздвигают карточки */
    .partner-card, .post, .tournament-card, .notif-item, .chat-message { overflow-wrap: anywhere; }
}

/* ============================================================
   Все версии (ПК, планшет, телефон): ссылки-заглушки и зоны нажатия
   ============================================================ */
/* Пункты без адреса (пока нет страницы или ссылки) — не прыгают наверх и выглядят неактивными */
#site-footer a[href="#"] { opacity: 0.55; cursor: default; }
#site-footer a[href="#"]:hover { text-decoration: none; }
/* На ПК ссылка футера не ниже 24px — удобнее попасть мышью */
#site-footer li a { display: inline-block; padding-block: 3px; }

@media (max-width: 1240px), (pointer: coarse) {
    .onboarding-close { min-width: 44px; min-height: 44px; }
    .site-header .logo, .header .logo { position: relative; }
    .site-header .logo::after, .header .logo::after { content: ''; position: absolute; inset: -8px -4px; }
    .offline-banner button { min-width: 44px; min-height: 44px; }
}