/* ============================================================
   PlusMate — Modern Design System v3
   ----------------------------------------------------------
   Enhanced with gradients, animations, better spacing,
   and modern UI components. Tabletop scoreboard aesthetic
   with premium glassmorphism and smooth interactions.
   ============================================================ */

@import url('/fonts/inter/inter.css');

:root {
    /* ===== Enhanced Palette — light (по умолчанию) =====
       Значения ниже — актуальная версия ("PlusMate visual refresh": единый
       зелёный бренд-акцент вместо связки зелёный+оранжевый, чуть мягче тени
       и скругления). Раньше эти же токены переопределялись ВТОРОЙ раз в
       хвосте файла отдельным :root-блоком, который и "побеждал" по каскаду —
       теперь сведено в одно место, второй блок удалён. */
    --color-field: #0bbf6a;        /* полевой зеленый — основной бренд-акцент */
    --color-field-dark: #079653;
    --color-field-light: #e8faf1;
    --color-field-ultra-light: #f4fcf7;
    --color-action: #087a45;
    --color-action-hover: #066238;
    --color-action-text: #ffffff;
    --color-whistle: #F2A83C;      /* свисток — live/внимание */
    --color-whistle-dark: #C97F1C;
    --color-brand: #0bbf6a;        /* было отдельным оранжевым (#FF5A1F) — унифицировано с полевым зелёным */
    --color-brand-dark: #079653;
    --color-brand-light: #e8faf1;
    --color-court: #2D5FE0;        /* информационный синий */
    --color-court-light: #E8F0FF;

    /* Отдельный, НЕ зависящий от темы токен для табло матча (.score-board) —
       см. правку ниже: раньше табло красилось через --color-ink, который в
       тёмной теме превращается в светлый (это же переменная текста, в
       тёмной теме текст светлый на тёмном фоне) — из-за этого в тёмной теме
       фон табло становился светлым, а текст названий команд оставался
       жёстко белым (color:#fff) и сливался с фоном (см. баг "в турнирных
       матчах на 'hero' текст сливается с фоном: светлый фон + белые буквы
       названия команд"). Табло — самостоятельный брендовый элемент (как
       настоящее табло стадиона), должно выглядеть одинаково тёмным в обеих
       темах, поэтому значение здесь одно и не переопределяется в
       [data-theme="dark"]. */
    --color-scoreboard-bg: #111827;

    --color-ink: #111827;
    --color-ink-muted: #667085;
    --color-ink-faint: #98a2b3;
    --color-bg: #f8faf9;
    --color-bg-raised: #ffffff;
    --color-card: #ffffff;
    --color-border: #e7ece9;
    --color-border-light: #f1f4f2;
    --color-success: #0bbf6a;
    --color-success-bg: #e8faf1;
    --color-danger: #C4432B;
    --color-danger-bg: #FBEAE6;
    --color-warning: #F2A83C;
    --color-warning-bg: #FFF8E8;

    /* ===== Glassmorphism ===== */
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-blur: 18px;

    --scrim: rgba(20, 22, 26, 0.5);

    /* ===== Enhanced Shadows ===== */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .03);
    --shadow-card: 0 4px 18px rgba(16, 24, 40, .05);
    --shadow-hover: 0 14px 30px rgba(11, 191, 106, .15);
    --shadow-cta: 0 12px 36px rgba(255,90,31,0.28);
    --shadow-glass: 0 8px 32px rgba(20,22,26,0.12);
    --shadow-floating: 0 20px 45px rgba(16, 24, 40, .12);

    /* ===== Gradient backgrounds ===== */
    --gradient-brand: linear-gradient(135deg, #FF5A1F 0%, #FF8A47 100%);
    --gradient-field: linear-gradient(135deg, #1B6B3A 0%, #2FA863 100%);
    --gradient-court: linear-gradient(135deg, #2D5FE0 0%, #5A7FFF 100%);

    /* ===== Типографика — единый шрифт Inter для всего сайта (см. бриф:
       "основным шрифтом является Inter, обеспечивает высокую читаемость
       на всех устройствах"); display использует более жирные начертания
       того же семейства вместо отдельного акцидентного шрифта. ===== */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-score: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ===== Радиусы ===== */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;

    /* ===== Animations ===== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-snap: cubic-bezier(0.36, 0, 0.66, -0.56);

    /* ===== Transitions ===== */
    --transition-fast: 150ms var(--ease-in-out);
    --transition-base: 250ms var(--ease-in-out);
    --transition-slow: 400ms var(--ease-in-out);
}

/* ===== Палитра — dark =====
   Как и со светлой темой — значения актуализированы под "PlusMate visual
   refresh", второй дублирующий [data-theme="dark"] блок в хвосте файла
   удалён (был там специально ради порядка каскада, теперь не нужен, т.к.
   единственная версия уже здесь). */
[data-theme="dark"] {
    --color-field: #43d88d;
    --color-field-dark: #2bbd73;
    --color-field-light: rgba(67, 216, 141, .14);
    --color-field-ultra-light: rgba(67, 216, 141, .08);
    --color-action: #43d88d;
    --color-action-hover: #2bbd73;
    --color-action-text: #07180e;
    --color-whistle: #F2A83C;
    --color-whistle-dark: #F5BD6B;
    --color-brand: #43d88d;
    --color-brand-dark: #2bbd73;
    --color-brand-light: rgba(67, 216, 141, .14);
    --color-court: #6E93FF;
    --color-court-light: rgba(110,147,255,0.14);

    --color-ink: #f2f4f7;
    --color-ink-muted: #aab3bf;
    --color-ink-faint: #7d8794;
    --color-bg: #101418;
    --color-bg-raised: #171d23;
    --color-card: #1b2229;
    --color-border: #2b353e;
    --color-border-light: #222b33;
    --color-success: #43d88d;
    --color-success-bg: rgba(67, 216, 141, .14);
    --color-danger: #F0705A;
    --color-danger-bg: rgba(240,112,90,0.14);
    --color-warning: #F2A83C;
    --color-warning-bg: rgba(242,168,60,0.14);

    --glass-bg: rgba(27, 30, 33, 0.55);
    --glass-border: rgba(255, 255, 255, 0.08);
    --scrim: rgba(0, 0, 0, 0.6);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-card: 0 4px 18px rgba(0, 0, 0, .24);
    --shadow-hover: 0 14px 30px rgba(67, 216, 141, .18);
    --shadow-cta: 0 12px 36px rgba(255,122,69,0.3);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-floating: 0 20px 45px rgba(0, 0, 0, .35);

    --gradient-brand: linear-gradient(135deg, #FF7A45 0%, #FFA477 100%);
    --gradient-field: linear-gradient(135deg, #3FCB7C 0%, #5FE59F 100%);
    --gradient-court: linear-gradient(135deg, #6E93FF 0%, #8DAAFF 100%);
}

/* ============================================================
   Reset & base
   ============================================================ */

* { box-sizing: border-box; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light dark;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background:
        radial-gradient(circle at 8% 0%, rgba(11, 191, 106, .035), transparent 28rem),
        var(--color-bg);
    color: var(--color-ink);
    line-height: 1.5;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

img, svg { max-width: 100%; display: block; }

/* Уважаем reduced-motion — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

a { color: inherit; text-decoration: none }

/* Фокус — всегда видимый, отдельно от hover (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid var(--color-field);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-ink);
    color: var(--color-bg);
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 640px) {
    .container { padding: 0 24px; }
}

/* Утилита для screen-reader-only текста */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Header — sticky, с тумблером темы
   ============================================================ */

.site-header {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(231, 236, 233, .8);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
    position: relative;
}

/*
   quick-actions — профиль/уведомления/тема (см. обсуждение "мобильное меню:
   перенести профиль, колокольчик, смену темы на видимую часть"). Раньше эти
   элементы жили внутри .nav-links и на мобильном пропадали под гамбургером
   вместе со всем остальным меню. Теперь это отдельный прямой ребенок
   .header-inner, который через flex order десктопе встает там же, где раньше
   был правый край nav-links, а на мобильном (см. медиа-запрос ниже) —
   непосредственно перед гамбургером.
*/
.header-inner > .logo { order: 0; }
.header-inner > .nav-links { order: 1; }
.header-inner > .quick-actions { order: 2; display: flex; align-items: center; gap: 6px; }
.header-inner > .mobile-nav-toggle { order: 3; }

.notifications-dropdown-panel {
    min-width: 320px;
    max-width: 360px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
}

.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-ink);
    padding: 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.mobile-nav-toggle:hover { background: var(--color-field-light); }

.logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--color-ink);
    text-decoration: none;
    letter-spacing: -.03em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.logo svg {
    width: 23px;
    height: 23px;
    padding: 4px;
    color: #fff;
    background: var(--color-field);
    border-radius: 50%;
    stroke-width: 2.8;
}

/*
   Свой логотип сайта (см. обсуждение "Логотип — светлая/тёмная тема"),
   переключение чистым CSS: тема живет в html[data-theme] (см. theme.js),
   сервер не знает тему заранее при рендере, поэтому выводятся оба варианта
   и здесь просто скрывается ненужный.
*/
.site-logo-custom { max-height: 28px; width: auto; display: block; }
.site-logo-custom--dark { display: none; }
:root[data-theme="dark"] .site-logo-custom--light { display: none; }
:root[data-theme="dark"] .site-logo-custom--dark { display: block; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-links a:not(.btn-small):not(.btn) {
    color: #344054;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 650;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.nav-links a:not(.btn-small):not(.btn):hover {
    color: var(--color-field-dark);
    background: var(--color-field-light);
}

/* Меню "Создать" и юзер-меню — маленький dropdown, чтобы не плодить 9 ссылок подряд.
   Визуально унифицирован с .searchable-select-panel (см. обсуждение "стиль
   дропдауна и поиска надо изменить везде") — тот же плавный fade+slide при
   открытии вместо резкого display:none/flex, тот же акцентный цвет при наведении. */
.nav-menu {
    position: relative;
}
.nav-menu > button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    color: #344054;
    font-size: .86rem;
    font-weight: 650;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
}
.nav-menu > button:hover { color: var(--color-field-dark); background: var(--color-field-light); }
.nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glass);
    min-width: 220px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    z-index: 40;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.nav-menu.open .nav-menu-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-menu.flip-left .nav-menu-panel { right: auto !important; left: 0 !important; }
.nav-menu.flip-up .nav-menu-panel { top: auto !important; bottom: calc(100% + 6px) !important; transform: translateY(4px); }
.nav-menu.flip-up.open .nav-menu-panel { transform: translateY(0); }
.nav-menu-panel a, .nav-menu-panel button.link-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    text-align: left;
    width: 100%;
}
.nav-menu-panel a:hover, .nav-menu-panel button.link-button:hover {
    background: var(--color-field-light);
    color: var(--color-field);
    text-decoration: none;
}

.theme-toggle {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-ink-muted);
    transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--color-field-light); color: var(--color-ink); }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }

/* Кнопка "Жалоба / предложение" в шапке — тот же круглый стиль иконки, что и переключатель темы */
#feedback-trigger-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-ink-muted);
    transition: background 0.15s, color 0.15s;
}
#feedback-trigger-btn:hover { background: var(--color-field-light); color: var(--color-danger); }

/* ===== Buttons — Modern Enhanced ===== */

.btn-small, .btn {
    background: var(--color-action);
    color: var(--color-action-text) !important;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    box-shadow: none;
}

.btn-small::before, .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn {
    padding: 12px 20px;
    font-size: .9rem;
    border-radius: var(--radius);
    font-weight: 700;
}
.btn-small {
    padding: 10px 16px;
    font-size: .86rem;
}

.btn:hover, .btn-small:hover {
    background: var(--color-action-hover);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.btn:hover::before, .btn-small:hover::before { opacity: 1; }

.btn:active, .btn-small:active { 
    transform: translateY(0px);
    box-shadow: var(--shadow-card);
}

.btn:disabled, .btn-small:disabled { 
    opacity: 0.55; 
    cursor: not-allowed; 
    box-shadow: var(--shadow-card);
    transform: none;
}

/* CTA — основная зеленая кнопка (см. бриф: единый фирменный зеленый, а не
   отдельный оранжевый акцент для CTA). Раньше был мягкий градиент
   (var(--gradient-field)) — в актуальной версии ("visual refresh") плоский
   зеленый фон и более скромная тень с оттенком зелёного. */
.btn-cta {
    background: var(--color-action);
    color: var(--color-action-text) !important;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(11, 191, 106, .18);
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

.btn-cta::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
}

.btn-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-action-hover);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.btn-cta:hover { 
    box-shadow: var(--shadow-floating);
    transform: translateY(-3px);
}

.btn-secondary {
    background: #fff;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover { 
    background: var(--color-field-ultra-light); 
    border-color: #9be4bd; 
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--color-ink) !important;
    border: none;
    box-shadow: none;
}

.btn-ghost:hover { 
    background: var(--color-field-light); 
    box-shadow: none;
    transform: translateY(-2px);
}

.btn-danger { 
    background: var(--color-danger);
    box-shadow: var(--shadow-card);
}

.btn-danger:hover { 
    background: #A3341F;
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.btn-success { 
    background: var(--color-success);
    box-shadow: var(--shadow-card);
}

.btn-success:hover { 
    filter: brightness(0.92);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.btn svg, .btn-small svg {
    width: 18px; 
    height: 18px; 
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.btn-small svg { width: 15px; height: 15px; }

.link-button {
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 12px;
    font-family: var(--font-body);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
}

.link-button:hover { 
    color: var(--color-ink);
    background: var(--color-field-light);
}

.inline-form { display: inline; }

/* ============================================================
   Layout
   ============================================================ */

main { padding: 32px 0 72px; }
/* Hero на главной должен примыкать прямо к шапке без зазора (см.
   обсуждение "большой отступ сверху между hero и меню") — общий отступ
   у <main> предназначен для обычных страниц, где контент не full-bleed. */
main.main-flush-top { padding-top: 0; }

@media (min-width: 768px) {
    main { padding: 48px 0 96px; }
}

.page-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--color-ink);
}

@media (min-width: 640px) {
    .page-title { font-size: 2.1rem; }
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.18rem;
    margin: 36px 0 14px;
    letter-spacing: -.025em;
    color: var(--color-ink);
}

.eyebrow {
    font-family: var(--font-score);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-field-dark);
}

/* ============================================================
   Hero — full-bleed сцена с фирменной фотографией (силуэты спортсменов
   разных видов спорта на одной "дорожке" — визуально это ровно то, чем
   является сервис: один вход для любого спорта, а не абстрактная
   картинка). Темный скрим слева направо держит контраст текста
   независимо от того, что происходит на фото справа; тональность скрима
   — тот же --color-field-dark, что и весь остальной бренд, поэтому
   переход "текст → фото" не выглядит инородной вставкой.
   ============================================================ */
.hero-full {
    position: relative;
    isolation: isolate;
    margin: 0 0 48px;
    display: flex;
    align-items: center;
    min-height: 430px;
    width: 100%;
    max-width: none;
    border-radius: 0;
    overflow: hidden;
}
@media (min-width: 900px) { .hero-full { min-height: 600px; } }

/* Клипуем только слой фото (у него zoom-анимация при загрузке, transform
   слегка выходит за края) — отдельным элементом, а не через overflow:hidden
   на всей .hero-full, иначе обрезался бы и выпадающий список "Город"
   из формы поиска ниже (см. обсуждение "мешает надпись снизу... как
   будто она поверх дроплиста"). */
.hero-full-media-clip {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    border-radius: 0;
}
.hero-full-media {
    position: absolute;
    inset: 0;
    background-image: url('/images/hero-athletes.jpg');
    background-size: cover;
    background-position: center right;
    filter: saturate(.86);
    transform: scale(1.01);
    animation: hero-media-in 1.6s var(--ease-out) both;
}
@keyframes hero-media-in {
    from { opacity: 0; transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
}

.hero-full-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 36%, rgba(255,255,255,.08) 73%),
                linear-gradient(0deg, rgba(16,24,40,.12), transparent 45%);
}
[data-theme="dark"] .hero-full-scrim {
    background: linear-gradient(90deg, rgba(16, 20, 24, .98) 0%, rgba(16, 20, 24, .88) 38%, rgba(16, 20, 24, .08) 78%),
                linear-gradient(0deg, rgba(0, 0, 0, .24), transparent 45%);
}

.hero-full-content { max-width: 560px; padding: 74px 0 66px; position: relative; color: var(--color-ink); }
@media (min-width: 900px) { .hero-full-content { padding: 0; } }

/* Появление содержимого при загрузке — один срежиссированный момент, без
   разрозненных эффектов по всей странице (см. gid по анимации). */
.hero-full-content > * {
    animation: hero-rise 0.7s var(--ease-out) both;
}
.hero-full-content .hero-eyebrow { animation-delay: 0.05s; }
.hero-full-content h1 { animation-delay: 0.14s; }
.hero-full-content p.hero-sub { animation-delay: 0.22s; }
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-full-media, .hero-full-content > * { animation: none; }
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-field-dark);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--color-field-light);
    padding: 7px 12px;
    border-radius: 999px;
}

.hero-full-content h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.35rem, 4vw, 4.15rem);
    letter-spacing: -.065em;
    line-height: 1.02;
    margin: 18px 0 14px;
    max-width: 560px;
    color: var(--color-ink);
}
.hero-h1-accent {
    background: linear-gradient(100deg, #7CF29C 0%, var(--color-field) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-field-dark);
}

.hero-full-content p.hero-sub {
    font-size: 1rem;
    color: #475467;
    max-width: 460px;
    line-height: 1.7;
    margin: 0 0 28px;
}

/* Карточки статистики — легкое стекло поверх фото, а не белые плашки:
   на темном скриме стекло держит контакт с фото, оставаясь читаемым. */
.stats-band {
    background: var(--gradient-field);
    padding: 22px 0;
}
.hero-board {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-stat {
    min-width: 116px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius);
    padding: 14px 18px;
}
.hero-stat .value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    line-height: 1;
}
.hero-stat .label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    margin-top: 6px;
}

/* ============================================================
   Плавное появление секций при прокрутке — один сдержанный прием на
   страницу (см. дизайн-гайд: "один срежиссированный момент лучше россыпи
   эффектов"), используется на главной для блоков ниже hero
   (см. app.js/IntersectionObserver в home.html).
   ============================================================ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-on-scroll.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Filters
   ============================================================ */

/* Панель фильтров — остается видимой при прокрутке (см. дизайн-бриф:
   "панель фильтров... остается видимой при прокрутке страницы", в духе
   Airbnb/Booking). Приподнятая белая карточка с крупным скруглением. */
.filters {
    margin-bottom: 24px;
    position: sticky;
    top: 76px;
    z-index: 10;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-card);
}
.filters-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    transition: max-height 0.2s ease-out, opacity 0.15s ease-out, margin 0.2s ease-out;
}

/*
    Мобильная версия: раньше панель схлопывалась/разворачивалась
    автоматически при скролле — но изменение высоты sticky-элемента ПРЯМО ВО
    ВРЕМЯ скролла дергало страницу (браузер вынужден пересчитывать layout
    посреди скролл-жеста, отсюда и ощущение "пробрасывает") (см. обсуждение
    "фильтр плохо раскрывается... пробрасывает страницу"). Теперь чисто
    ручное управление кнопкой — свернуто по умолчанию на мобильном, никакой
    реакции на скролл вообще.
*/
@media (max-width: 768px) {
    #filters-compact-toggle { display: inline-flex !important; }
    .filters-fields {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        pointer-events: none;
    }
    /* max-height нужен фиксированным (а не auto/none) — CSS не умеет
       анимировать переход к/от auto, только между конкретными значениями. */
    .filters.expanded .filters-fields {
        max-height: 600px;
        opacity: 1;
        margin-top: 12px;
        pointer-events: auto;
    }
}

#filters-compact-toggle { align-items: center; gap: 6px; }

.filters select, .filters input {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-card);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-ink);
    transition: border-color 0.15s;
}
.filters select:focus, .filters input:focus { border-color: var(--color-field); outline: none; }

/* Выпадающий список с поиском (см. app.js initSearchableSelects) — используется
   для длинных справочников вроде городов (см. обсуждение "поиск в
   выпадающем списке"). */
.searchable-select-wrapper { position: relative; display: inline-block; }
.searchable-select-native {
    position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.searchable-select-input {
    padding: 10px 14px 10px 36px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-ink);
    width: 100%;
    cursor: text;
    transition: border-color 0.15s;
}
.searchable-select-input:focus { border-color: var(--color-field); outline: none; }
.searchable-select-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glass);
    z-index: 50;
    padding: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.searchable-select-panel.open { display: block; opacity: 1; transform: translateY(0); }
.searchable-select-item {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s;
}
.searchable-select-item:hover, .searchable-select-item.active { background: var(--color-field-light); color: var(--color-field); }
.searchable-select-empty { padding: 9px 12px; font-size: 0.85rem; color: var(--color-ink-muted); }
/* Скроллбар панели в едином тонком стиле, а не системный по умолчанию */
.searchable-select-panel::-webkit-scrollbar { width: 8px; }
.searchable-select-panel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* Шеврон в <summary> спойлеров (см. обсуждение "раскрывающий элемент, как
   оформляют спойлеры" — предложение матча и т.п.) — поворачивается при
   открытии, браузерный треугольник-маркер отключен через list-style:none
   прямо в разметке. */
.details-chevron { transition: transform 0.15s ease-out; flex-shrink: 0; }
details[open] > summary .details-chevron { transform: rotate(90deg); }
/* list-style:none в разметке не убирает маркер в Chrome/Safari — только в Firefox. */
summary::-webkit-details-marker { display: none; }

/* ============================================================
   Cards / grid
   ============================================================ */

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.game-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-decoration: none;
    color: var(--color-ink);
    display: block;
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: card-in 0.4s var(--ease-out) backwards;
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-field);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.game-card:hover {
    border-color: #b3e8ca;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.game-card:hover::before { transform: scaleX(1); }

/* Карточки видов спорта на главной — крупная иконка по центру, подъем при
   наведении (см. дизайн-бриф). */
.sport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
    margin-left: auto;       /* авто-отступы по бокам */
    margin-right: auto;
    justify-content: center; /* центрирует сами колонки, если они не растягиваются */
}
.sport-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 12px;
    text-decoration: none;
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
}
.sport-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-field-light);
}
.sport-card-icon {
    font-size: 1.9rem;
    line-height: 1;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gradient-field);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base);
}
.sport-card:hover .sport-card-icon { transform: scale(1.08) rotate(-4deg); }
.sport-card-name { font-weight: 600; font-size: 0.9rem; }
.sport-card-count {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-field-dark);
    background: var(--color-field-light);
    padding: 2px 10px;
    border-radius: 999px;
}
[data-theme="dark"] .sport-card-count { color: var(--color-field); }
.sport-card-count-empty {
    color: var(--color-ink-faint);
    background: transparent;
    font-weight: 500;
}

/* "Ближайшие турниры" / "Активные команды" на главной — два столбца,
   на узких экранах в один (см. макет редизайна "главная страница"). */
.two-col-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    padding: 22px;
}
@media (min-width: 800px) {
    .two-col-showcase { grid-template-columns: 1fr 1fr; }
}

/* Секция-питч "Команды" на главной (см. референс-макет "прототип главной
   страницы") — чек-лист преимуществ слева, реальные карточки команд справа,
   а не просто ещё один список для браузинга. */
.home-team-pitch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
}
@media (min-width: 800px) {
    .home-team-pitch { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.home-team-pitch-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.home-team-pitch-list li { display: flex; gap: 10px; align-items: flex-start; }
.home-team-pitch-list svg { color: var(--color-field); flex-shrink: 0; margin-top: 2px; }
.home-team-pitch-list strong { display: block; font-size: .92rem; }
.home-team-pitch-list span { display: block; font-size: .82rem; color: var(--color-ink-muted); margin-top: 2px; }

.showcase-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--color-ink);
    border: 1px solid var(--color-border-light);
    box-shadow: none;
    border-radius: 12px;
    padding: 14px 16px;
}
.showcase-row-card:last-child { margin-bottom: 0; }
.showcase-row-card:hover {
    border-color: #b3e8ca;
    background: var(--color-field-ultra-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* ============================================================
   "Возможности сервиса" на главной — та же логика баннера с градиентом,
   что и tournament-card, чтобы блок не выглядел бледнее остального сайта
   (см. обсуждение "слишком допотопно" — раньше это были обычные
   .game-card с одной мелкой иконкой сверху). Три карты — команды,
   турниры, организаторство — каждая со своим акцентным цветом бренда.
   ============================================================ */
.feature-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-ink);
    display: block;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-field-light);
}
.feature-card-banner {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0bbf6a, #93e8b6);
}
.feature-card-banner.accent-brand { background: linear-gradient(135deg, #ebad3c, #f9d78b); }
.feature-card-banner.accent-court { background: linear-gradient(135deg, #5b7df4, #9ab0ff); }
.feature-card-banner svg { color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18)); }
.feature-card-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
}
.feature-card:hover .feature-card-icon-circle { transform: scale(1.06); }
.feature-card-body { padding: 20px; }

/* Финальный CTA-баннер (см. референс-макет) — тёмная карточка, тот же
   приём "тёмный фон + белый текст", что и в hero-карточке турнира. */
.home-final-cta {
    background: linear-gradient(135deg, #101820 0%, #0a3d24 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    margin: 48px 0;
    text-align: center;
}
.home-final-cta h2 { font-family: var(--font-display); font-size: 1.7rem; }
.home-final-cta p { color: rgba(255, 255, 255, .72); max-width: 520px; margin: 0 auto; }
.home-final-cta > div { justify-content: center; }
.home-final-cta .btn-secondary:hover { background: rgba(255, 255, 255, .1) !important; }
.feature-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 6px;
}
.feature-card-desc { color: var(--color-ink-muted); font-size: 0.88rem; margin: 0; }
.feature-card-stat {
    margin: 10px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-field-dark);
}
[data-theme="dark"] .feature-card-stat { color: var(--color-field); }
.feature-card-open {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-field-dark);
}
[data-theme="dark"] .feature-card-open { color: var(--color-field); }
.feature-card-open svg { transition: transform .2s ease; }
.feature-card:hover .feature-card-open svg { transform: translate(2px, -2px); }

/* Карточки статистики профиля (см. дизайн-бриф: "количество сыгранных
   матчей, побед, организованных игр и процент посещаемости"). */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stat-tile {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-xs);
}
.stat-tile-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-field);
}
.stat-tile-label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-ink-muted);
    margin-top: 4px;
}

/* ============================================================
   Auth pages (login/register) — разделенный экран (см. дизайн-бриф:
   "слева крупная фотография, демонстрирующая атмосферу сообщества, справа
   карточка регистрации"). Вместо фото — фирменная иллюстрация с тем же
   визуальным языком, что и hero на главной, для целостности бренда.
   ============================================================ */
.auth-split {
    display: grid;
    grid-template-columns: 1fr;
    /* Раньше здесь было calc(100vh - 220px) "с запасом на футер" — но футер
       на этих двух страницах (auth/login.html, auth/register.html) теперь
       не показывается вовсе (см. обсуждение "весь раздел должен быть в
       пол"), достаточно вычесть только высоту шапки (64px, см. .header-inner). */
    min-height: calc(100vh - 64px);
    align-items: center;
}
@media (min-width: 900px) {
    .auth-split { grid-template-columns: 1fr 1fr; gap: 0; }
}
.auth-visual {
    display: none;
    background: var(--gradient-field);
    min-height: 100%;
    padding: 56px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
@media (min-width: 900px) {
    .auth-visual { display: flex; flex-direction: column; justify-content: center; }
}
.auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.10), transparent 45%);
}
.auth-visual-content { position: relative; z-index: 1; }
.auth-visual h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    margin: 0 0 12px;
    max-width: 14ch;
}
.auth-visual p { color: rgba(255,255,255,0.85); max-width: 34ch; margin: 0; }

/*
   Плавающие декоративные иконки на левой панели входа/регистрации (см.
   обсуждение "хочу добавить туда анимацию, используй Anime js"). Абсолютно
   спозиционированы поверх градиента, анимируются через CSS — плавное,
   медленное движение, не
   отвлекающее от самой формы (которая все равно физически в другой
   половине экрана).
*/
.auth-visual-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.auth-visual-decor-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.18);
    animation: auth-decor-float 6s ease-in-out infinite alternate;
}
.auth-visual-decor-icon:nth-child(2n) {
    animation-duration: 7.5s;
    animation-delay: -1.5s;
}
.auth-visual-decor-icon:nth-child(3n) {
    animation-duration: 9s;
    animation-delay: -3s;
}
@keyframes auth-decor-float {
    from { transform: translate3d(-8px, -12px, 0) rotate(-3deg); }
    to { transform: translate3d(8px, 12px, 0) rotate(3deg); }
}
.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 20px;
}
@media (min-width: 900px) { .auth-form-panel { padding: 48px 72px; } }
.auth-form-panel .container { margin: 0; max-width: 420px; padding: 0; }

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glassmorphism-вариант карточки — используется поверх hero/темных панелей */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

.sport-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-field-light);
    color: var(--color-field-dark);
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .7rem;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Hero-карточка обзора турнира (см. референс-макет "обзор турнира") —
   тёмно-зелёный градиент вместо баннера с фото/иконкой (баннера у турнира
   пока нет, см. обсуждение "убрать пока баннер у турниров"). */
.tournament-hero-card {
    background: linear-gradient(135deg, var(--color-field-dark) 0%, #0a3d24 100%);
    color: #fff;
    padding: 26px 28px 24px;
    border-radius: var(--radius-lg);
    border: none;
}
.tournament-hero-card .badge,
.tournament-hero-card .sport-badge {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: none;
}
.tournament-hero-card h1 { color: #fff; }
.tournament-hero-organizer { color: rgba(255, 255, 255, .78); display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.tournament-hero-organizer img {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .3);
}
.tournament-hero-organizer a { color: #fff; font-weight: 700; text-decoration: none; }
.tournament-hero-organizer a:hover { text-decoration: underline; }

.tournament-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.tournament-info-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
}
.tournament-info-card .eyebrow { display: block; margin-bottom: 8px; }
.tournament-info-value { font-size: 1.15rem; font-weight: 800; color: var(--color-ink); }
.tournament-info-value.accent { color: var(--color-field-dark); }
[data-theme="dark"] .tournament-info-value.accent { color: var(--color-field); }
.tournament-info-card p { margin: 4px 0 0; font-size: .82rem; color: var(--color-ink-muted); }

.game-card .game-time {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.game-card .game-address { color: var(--color-ink-muted); font-size: 0.88rem; margin-bottom: 10px; }
.game-card .game-slots {
    font-family: var(--font-score);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-field-dark);
}
[data-theme="dark"] .game-card .game-slots { color: var(--color-field); }

/* Строка "иконка + текст" в карточках игр (город, адрес, время, состав) —
   раньше была локальным <style> только в games/list.html, теперь общий
   класс, т.к. используется и на главной странице (см. обсуждение "в
   ближайшие игры на главной — город и иконки"). */
.card-icon-row { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--color-ink-muted); }
.card-icon-row svg { color: var(--color-field); flex-shrink: 0; width: 15px; height: 15px; }

.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
}
.empty-state svg { color: var(--color-ink-faint); margin: 0 auto 16px; width: 48px; height: 48px; }
.empty-state p { font-size: 1.02rem; margin-bottom: 16px; }

/* ============================================================
   Skeleton loading
   ============================================================ */

.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    height: 148px;
    border-radius: var(--radius);
}
.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
}
.skeleton-line.short { width: 40%; }

/* ============================================================
   Forms — Enhanced modern style with better focus states
   ============================================================ */

.form-group { 
   margin-bottom: 20px; 
   position: relative; 
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 600;
   font-size: 0.95rem;
   color: var(--color-ink);
   letter-spacing: 0.2px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
   width: 100%;
   padding: 12px 16px;
   border-radius: var(--radius);
   border: 1.5px solid var(--color-border);
   font-family: var(--font-body);
   font-size: 0.96rem;
   color: var(--color-ink);
   background: var(--color-card);
   transition: all var(--transition-base);
   box-shadow: var(--shadow-xs);
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
   border-color: var(--color-field);
   outline: none;
   box-shadow: var(--shadow-card), 0 0 0 4px var(--color-field-light);
   transform: translateY(-1px);
}

.form-group input:invalid:not(:placeholder-shown),
.form-group.field-invalid input,
.form-group.field-invalid select,
.form-group.field-invalid textarea {
   border-color: var(--color-danger);
   box-shadow: var(--shadow-xs), 0 0 0 4px var(--color-danger-bg);
}

.form-group.field-valid input {
   border-color: var(--color-success);
   box-shadow: var(--shadow-xs), 0 0 0 4px var(--color-success-bg);
}

.form-error {
   color: var(--color-danger);
   font-size: 0.84rem;
   margin-top: 6px;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 5px;
}

.form-hint {
   color: var(--color-ink-muted);
   font-size: 0.85rem;
   margin-top: 6px;
   font-style: italic;
}

/*
   Иконки Lucide (svg[data-lucide]) без явного display остаются "inline" —
   по умолчанию у инлайновых замещаемых элементов есть небольшой отступ снизу
   (baseline alignment), из-за чего строка с иконкой становится выше обычной
   текстовой строки. В узких контейнерах (например "профиль <icon>" в
   admin/users.html) это иногда приводит к тому, что браузер переносит именно
   иконку (или следующий за ней текст) на новую строку отдельно от текста
   перед ней (см. обсуждение "иконка external-link перекидывает сообщение на
   следующую строку"). inline-block + vertical-align убирают этот эффект, а
   white-space: nowrap на самой иконке гарантирует, что перенос строки не
   пройдет "внутри" нее.
*/
svg[data-lucide] {
   display: inline-block;
   vertical-align: -2px;
   white-space: nowrap;
   flex-shrink: 0;
}

.checkbox-group { 
   display: flex; 
   align-items: flex-start; 
   gap: 10px;
   padding: 12px;
   background: var(--color-field-ultra-light);
   border-radius: var(--radius);
   transition: all var(--transition-fast);
}

.checkbox-group:hover {
   background: var(--color-field-light);
}

.checkbox-group input { 
   width: auto; 
   margin-top: 3px; 
   accent-color: var(--color-field);
   cursor: pointer;
}

/* ============================================================
   Badges
   ============================================================ */

/* ============================================================
   Badges — Enhanced with better styling
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.badge-success { 
    background: var(--color-success-bg);
    color: var(--color-field-dark);
    border: 1px solid var(--color-field-light);
}

[data-theme="dark"] .badge-success { color: var(--color-field); }

.badge-danger { 
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-bg);
}

.badge-muted { 
    background: var(--color-border);
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-bg);
}

.badge-live {
    background: var(--color-whistle);
    color: #4A2E00;
    animation: pulse-live 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(242,168,60,0.5);
    font-weight: 800;
}

@keyframes pulse-live {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(242,168,60,0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(242,168,60,0);
        transform: scale(1.05);
    }
}

/* ============================================================
   Lists / rows
   ============================================================ */

.participant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.participant-row:last-child { border-bottom: none; }

/* ============================================================
   Значки статуса участника (подтвержден / оплата) — см. обсуждение
   "рядом с именем лучше использовать значки и цвет о подтверждении и
   оплате". Показываются организатору, в том числе внутри колонок команд
   после деления — см. "чтобы при дележке эти значки оставались".
   ============================================================ */
.participant-name-row { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.participant-name-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-icon { flex-shrink: 0; display: inline-flex; }
.status-icon.icon-confirmed { color: var(--color-success); }
.status-icon.icon-paid { color: var(--color-success); }
.status-icon.icon-unpaid { color: var(--color-ink-muted); opacity: 0.55; }
.status-icon.icon-claimed { color: #D4A017; } /* игрок заявил, но организатор еще не подтвердил — промежуточный, "янтарный" цвет */
.status-icon.icon-attended { color: var(--color-success); }
.status-icon.icon-not-attended { color: var(--color-danger); }

.attendance-confirmation {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-field-light);
}
.attendance-confirmation .form-hint { margin: 6px 0 12px; }
.attendance-confirmation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.attendance-confirmation-actions form { margin: 0; }
.attendance-confirmation-done {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--color-success);
    font-weight: 600;
}

/* Кнопка-меню действий с участником — три точки, открывает тот же nav-menu
   паттерн, что и в шапке (см. app.js), просто компактнее. */
.participant-menu { position: relative; }
.participant-menu > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.participant-menu > button:hover { background: var(--color-field-light); color: var(--color-ink); }
.participant-menu-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:18px;
    height:18px;
}
.participant-menu-icon > span {
    width:3px;
    height:3px;
    border-radius:50%;
    background:currentColor;
}
.participant-menu .nav-menu-panel { right: 0; left: auto; min-width: 200px; }
.participant-menu { z-index: 20; }
.participant-menu .nav-menu-panel { z-index: 100; }
.participant-row, .team-column, .game-details-shell, .match-details-shell { overflow: visible; }

/* Match and game workspaces get their full width from the shared PageShell
   rule (main > .container:not(.container--narrow), см. выше по файлу) —
   отдельное правило здесь не нужно, .game-details-shell/.match-details-shell
   не помечены как узкие. */
.game-details-shell .game-layout,
.match-details-shell .match-layout {
    width: 100%;
}
.team-drop-zone { min-height: 120px; transition: background-color .15s ease, outline-color .15s ease; }
.team-drop-zone.drag-over { outline: 2px dashed var(--color-field); outline-offset: 4px; background: var(--color-field-light); }
.draw-pair-visible { animation: draw-pair-in .45s ease-out forwards; }
@keyframes draw-pair-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .draw-pair-visible { animation: none; opacity: 1; transform: none; }
}

.match-assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0;
}
.match-assignment-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
    padding: 14px;
}
.match-assignment-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.match-assignment-heading > svg { color: var(--color-field); flex: 0 0 auto; margin-top: 2px; }
.match-assignment-heading strong,
.match-assignment-heading span { display: block; }
.match-assignment-heading span { color: var(--color-ink-muted); font-size: .82rem; margin-top: 3px; }
.assignment-filter { width: 100%; margin-bottom: 8px; }
.assignment-options { display: grid; gap: 6px; max-height: 250px; overflow-y: auto; }
.assignment-option {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px;
    background: transparent;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
}
.assignment-option:hover,
.assignment-option:focus-visible {
    border-color: var(--color-field);
    background: var(--color-field-light);
    outline: none;
}
.assignment-option img,
.assignment-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
}
.assignment-avatar {
    display: grid;
    place-items: center;
    background: var(--color-field-light);
    color: var(--color-field);
    font-weight: 700;
}
.assignment-option span:not(.assignment-avatar) { min-width: 0; flex: 1; }
.assignment-option b,
.assignment-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-option small { color: var(--color-ink-muted); margin-top: 2px; }
.assignment-option > svg { color: var(--color-field); opacity: .7; }
.referee-search-card { max-width: 620px; padding: 28px; }
.referee-search-heading { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.referee-search-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:14px; color:var(--color-action); background:var(--color-field-light); }
.referee-search-heading h2 { margin:0; font-size:1.25rem; letter-spacing:-.02em; }
.referee-search-heading p { margin:4px 0 0; color:var(--color-ink-muted); font-size:.88rem; }
.referee-search-close { display:grid; place-items:center; width:42px; height:42px; flex:none; margin-left:auto; border:1px solid var(--color-border); border-radius:12px; color:var(--color-ink-muted); background:var(--color-card); cursor:pointer; }
.referee-search-close:hover,.referee-search-close:focus-visible { color:var(--color-ink); border-color:var(--color-action); outline:2px solid var(--color-field-light); }
.referee-search-controls { display:grid; grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr); gap:12px; margin-bottom:14px; }
.referee-search-field { display:grid; align-content:start; gap:6px; min-width:0; color:var(--color-ink-muted); font-size:.8rem; font-weight:650; }
.referee-search-field select,.referee-search-field input { width:100%; min-width:0; min-height:46px; margin:0; }
.referee-search-input-wrap { position:relative; display:block; }
.referee-search-input-wrap > svg { position:absolute; top:50%; left:14px; color:var(--color-ink-faint); transform:translateY(-50%); pointer-events:none; }
.referee-search-input-wrap input { padding-left:40px; }
.referee-search-results { max-height:min(340px,45vh); gap:5px; padding:5px; border:1px solid var(--color-border-light); border-radius:14px; background:var(--color-bg); }
.referee-search-results .assignment-option { min-height:54px; border-color:transparent; }
.referee-search-results .assignment-option:disabled { cursor:default; opacity:.58; }
.referee-search-empty { margin:0; padding:18px 16px; border:1px dashed var(--color-border); border-radius:14px; color:var(--color-ink-muted); font-size:.9rem; line-height:1.55; text-align:center; }
.referee-search-error { margin:0; padding:12px 14px; border-radius:12px; color:var(--color-danger); background:var(--color-danger-bg); font-size:.9rem; line-height:1.5; }
.team-communication-page .team-content { min-width: 0; }
.team-communication-page .team-content > .card { margin-bottom: 14px; }
.team-communication-page .team-content > .card > div:last-child { flex-wrap: wrap; }
.tournament-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
    gap: 18px 32px;
    align-items: start;
}
.tournament-summary-card > p { margin: 0; }
.tournament-summary-card > p:first-child { grid-column: 1 / -1; font-size: 1.05rem; }
.tournament-list-card .participant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}
/* Narrow-shell width variants — one class per exact px value that templates
   previously set via inline style="max-width: Npx". Values are kept as-is
   (not merged into fewer tokens) so this pass doesn't change any page's
   visual appearance; see docs/PAGE_SHELL.md for the follow-up to consolidate
   these into 2-3 design-system tokens (Этап 4). Must come after the base
   .container rule so it wins on equal specificity. */
.container--narrow-420 { max-width: 420px; }
.container--narrow-460 { max-width: 460px; }
.container--narrow-480 { max-width: 480px; }
.container--narrow-520 { max-width: 520px; }
.container--narrow-560 { max-width: 560px; }
.container--narrow-600 { max-width: 600px; }
.container--narrow-640 { max-width: 640px; }
.container--narrow-720 { max-width: 720px; }
.container--narrow-1000 { max-width: 1000px; }

/* Unified PageShell width rule.
   By default every top-level page container uses the full available desktop
   width (workspace pages: catalogs, dashboards, match/game/tournament details).
   Pages that are meant to stay reading-width (auth forms, edit forms, legal
   documents, narrow confirmation screens) opt out by adding the
   `.container--narrow` marker class to their <div class="container"> —
   they then keep whatever max-width they declare themselves (inline or class).
   NOTE: previously this rule excluded a class called `.auth-shell`, which was
   never actually present on any template — so it silently forced ~20 narrow
   form/legal pages to full 1440px width, overriding their own inline
   `max-width`. `.container--narrow` is the real, applied marker; see the
   templates listed in docs/PAGE_SHELL.md for the full narrow-page list. */
main > .container:not(.container--narrow) {
    width: min(100% - 40px, 1440px);
    max-width: 1440px !important;
}

@media (max-width: 700px) {
    main > .container:not(.container--narrow) { width: min(100% - 24px, 1440px); }
    .match-assignment-grid { grid-template-columns: 1fr; }
    .tournament-summary-card { grid-template-columns: 1fr; }
    .tournament-list-card .participant-row { grid-template-columns: 1fr; gap: 7px; }
}
.participant-menu .nav-menu-panel .menu-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
    padding: 8px 12px 2px;
}

/* Keep team-split participant names and controls aligned on a single row. */
.team-participant-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.team-participant-row .participant-name-row {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.team-participant-row .participant-name-row a {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-participant-row > div:last-child {
    align-self: center;
    flex: 0 0 auto;
}
.team-participant-actions {
    display:flex;
    align-items:center;
    gap:6px;
}

/* ============================================================
   Chat
   ============================================================ */

.chat-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    height: 320px;
    overflow-y: auto;
    padding: 14px;
    background: var(--color-card);
    margin-bottom: 12px;
}

.chat-message { margin-bottom: 12px; }
.chat-message .author { font-weight: 700; font-size: 0.82rem; color: var(--color-field-dark); }
[data-theme="dark"] .chat-message .author { color: var(--color-field); }
.chat-message .text { font-size: 0.94rem; }

/* ============================================================
   Map
   ============================================================ */

#map, #picker-map { height: 340px; border-radius: var(--radius); margin-bottom: 24px; overflow: hidden; }

.map-marker {
    width: 26px;
    height: 26px;
    background: var(--color-field);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(27,107,58,0.4);
    cursor: pointer;
    transform: translate(-50%, -50%);
}
.map-marker:hover { background: var(--color-field-dark); }

/* Темная тема для тайлов OSM — легкая инверсия/затемнение, чтобы карта не слепила на фоне темного UI */
[data-theme="dark"] #map, [data-theme="dark"] #picker-map {
    filter: brightness(0.85) contrast(1.05) saturate(0.9);
}

/* ============================================================
   Scoreboard (сигнатурный элемент)
   ============================================================ */

.score-board {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 32px 24px;
    background: var(--color-scoreboard-bg);
    background-image: radial-gradient(circle at 20% 20%, rgba(27,107,58,0.35), transparent 55%),
                       radial-gradient(circle at 80% 80%, rgba(242,168,60,0.18), transparent 55%);
    border-radius: var(--radius-lg);
    color: #fff;
    margin-bottom: 24px;
}
.score-board .team-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    max-width: 180px;
    text-align: center;
}
.score-board .score {
    font-family: var(--font-score);
    font-size: 2.6rem;
    font-weight: 700;
    min-width: 56px;
    text-align: center;
}
.score-board .vs { font-family: var(--font-score); font-size: 1rem; opacity: 0.5; }

/* ============================================================
   Bracket
   ============================================================ */

.bracket-wrapper { overflow-x: auto; padding: 24px 0 44px; }
.bracket { display: flex; gap: 52px; min-width: max-content; padding: 0 4px; }
.bracket-round { display: flex; flex-direction: column; justify-content: center; gap: 26px; min-width: 230px; }
.bracket-round-title {
    text-align: center;
    font-family: var(--font-score);
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-field);
    margin-bottom: 4px;
}
.bracket-match {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.bracket-match:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--color-field); }
.bracket-match a { text-decoration: none; color: inherit; display: block; }
.bracket-team { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-size: 0.9rem; }
.bracket-team:first-child { border-bottom: 1px solid var(--color-border); }
.bracket-team.winner { font-weight: 700; background: var(--color-field-light); }
.bracket-team .team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 145px; }
.bracket-team .team-score { font-family: var(--font-score); font-weight: 700; color: var(--color-field-dark); min-width: 24px; text-align: right; }
[data-theme="dark"] .bracket-team .team-score { color: var(--color-field); }
.bracket-match-meta { font-size: 0.72rem; color: var(--color-ink-muted); padding: 5px 14px 9px; border-top: 1px dashed var(--color-border); }
.bracket-live-badge {
    display: inline-block;
    background: var(--color-whistle);
    color: #4A2E00;
    font-size: 0.64rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.04em;
}

.event-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.event-row:last-child { border-bottom: none; }
.event-row .minute { font-family: var(--font-score); font-weight: 700; color: var(--color-field); min-width: 32px; }

/*
   Бейдж команды в ленте событий и в официальной статистике (см. обсуждение
   "в событиях матча и статистике нужно также показывать из какой команды").
   Две команды матча — teamAEntry/teamBEntry (см. TournamentMatch) — красим
   двумя разными акцентными цветами палитры (зеленый/синий), чтобы взгляд
   сразу выхватывал, к какой команде относится строка, не читая текст — тот
   же принцип, что и в живых текстовых трансляциях спортивных сайтов
   (Sofascore/Flashscore), где у каждого события в ленте есть цветовая
   метка команды.
*/
.event-team-badge {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.event-team-badge--a { background: var(--color-field-light); color: var(--color-field-dark); }
.event-team-badge--b { background: var(--color-court-light); color: var(--color-court); }

/* ============================================================
   Dashboard (админка) — в духе Notion/Linear/Stripe:
   плотная сетка карточек-метрик + таблица со спокойной типографикой
   ============================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.metric-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.metric-card .metric-label {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.metric-card .metric-value {
    font-family: var(--font-score);
    font-size: 1.9rem;
    font-weight: 700;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.9rem;
}
.data-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-ink-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-field-light); }

/* ============================================================
   Toasts
   ============================================================ */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 40px);
}
.toast {
    background: var(--color-ink);
    color: var(--color-bg);
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-glass);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-in 0.3s var(--ease-out);
    max-width: 360px;
}
.toast.success { border-left: 3px solid var(--color-field); }
.toast.error { border-left: 3px solid var(--color-danger); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Responsive
   ============================================================ */

/* Ничего не должно вызывать горизонтальный скролл всей страницы —
   раньше на мобильных иногда "плавала" ширина из-за фиксированных
   min-width на некоторых блоках.
   ВАЖНО: overflow-x: hidden на html/body ломает position:sticky у шапки
   (см. обсуждение "при скроле нет фиксации меню") — hidden/auto/scroll
   на любой оси превращает элемент в скролл-контейнер, и sticky-дети
   начинают залипать относительно него, а не окна браузера. overflow-x:
   clip визуально обрезает контент точно так же, но не создает
   скролл-контейнер — sticky продолжает работать как раньше. */
html { overflow-x: clip; }

@media (max-width: 768px) {
    .mobile-nav-toggle { display: flex; }

    /* Порядок в шапке на мобильном (см. обсуждение "гамбургер в левую
       сторону перед логотипом, потом логотип, тема, колокольчик, профиль"):
       гамбургер → логотип → тема → уведомления → профиль. */
    .header-inner > .mobile-nav-toggle { order: 0; }
    .header-inner > .logo { order: 1; }
    .header-inner > .quick-actions { order: 2; }
    .header-inner > .nav-links { order: 3; }

    /* Внутри .quick-actions DOM-порядок остался прежним (профиль, уведомления,
       тема) — переставляем визуально через flex order, чтобы не трогать
       разметку/логику самих меню. */
    .quick-actions .theme-toggle { order: 1; }
    .quick-actions #notifications-menu { order: 2; }
    .quick-actions > .nav-menu:first-child { order: 3; }

    /* quick-actions всегда видим и не должен превращаться в полноширинные
       строки, как остальные .nav-menu внутри свернутого меню — оставляем
       компактный floating-dropdown, как на десктопе. */
    .quick-actions .nav-menu { position: relative; width: auto; }
    .quick-actions .nav-menu > button { width: auto; padding: 8px; }
    .quick-actions .nav-menu-panel {
        position: absolute;
        left: auto;
        right: 0;
        width: auto;
        padding: 6px;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-glass);
    }
    .quick-actions .theme-toggle { align-self: center; }

    /* Панель уведомлений — фиксированные 320-360px могли не влезать в узкий
       экран телефона (см. обсуждение "открывается криво через мобильную
       версию"), особенно если кнопка-колокольчик сидит близко к правому
       краю экрана. Ограничиваем шириной вьюпорта с отступами по бокам. */
    .notifications-dropdown-panel {
        min-width: 0;
        width: min(92vw, 360px);
        max-width: none;
    }

    /* Раньше вся навигация (3 ссылки + 2 выпадающих меню + переключатель
       темы) пыталась поместиться в одну строку и на узких экранах
       переносилась вразнобой, наезжая на лого. Теперь на мобильном она
       скрыта под гамбургером и раскрывается вниз отдельной панелью. */
    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--color-bg-raised);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-glass);
        padding: 8px 16px 14px;
        z-index: 40;
    }
    .nav-links.open { display: flex; }
    .nav-links a:not(.btn-small):not(.btn) { padding: 12px 8px; }

    /* Выпадающие подменю ("Создать", пользователь) на мобильном — не floating
       панель поверх контента (там ей некуда красиво поместиться на узком
       экране), а обычный раскрывающийся блок в потоке, во всю ширину. */
    .nav-menu { width: 100%; }
    .nav-menu > button { width: 100%; justify-content: space-between; padding: 12px 8px; }
    .nav-menu-panel {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        border: none;
        padding: 0 0 0 14px;
    }
    .nav-menu.open .nav-menu-panel { display: block; }
    .theme-toggle { align-self: flex-start; }

}

@media (max-width: 640px) {
    .header-inner { height: 56px; }
    .page-title { font-size: 1.5rem; }
    .score-board { gap: 14px; padding: 22px 14px; }
    .score-board .team-name { font-size: 0.9rem; max-width: 100px; }
    .score-board .score { font-size: 1.9rem; }
    .hero { padding: 32px 18px; border-radius: var(--radius-lg); }
    .hero-board { gap: 18px; }
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }

    /* Строки формы, где несколько полей стояли рядом (например
       "Количество команд" / "Игроков в команде", часы/минуты
       длительности) — на узком экране складываем в колонку, иначе поля
       становятся слишком узкими для ввода. */
    form div[style*="display:flex"],
    form[style*="display:flex"] { flex-wrap: wrap; }

    /* Таблицы и широкий контент (турнирная сетка уже имеет свой скролл —
       это на случай остальных, более простых таблиц в админке). */
    table { display: block; overflow-x: auto; }

    /* Строка "иконка + подпись + значение" в деталях игры/матча — на узком
       экране может не поместиться в одну линию (например, длинный адрес). */
    .info-row { flex-wrap: wrap; }

    /* На маленьких телефонах auto-fit с minmax(160px) иногда все же умещал 2
       узкие колонки команд рядом — принудительно в одну колонку, чтобы
       карточки участников и кнопка "Перенести в…" не сжимались. */
    .team-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   Модальные попапы (см. "Пригласить друга" на странице игры) —
   переиспользуемый паттерн для будущих попапов тоже.
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: 24px;
    width: 100%;
    max-width: 380px;
}

/* ============================================================
   "Как это работает" — шаги с номерами, легкий переиспользуемый паттерн
   ============================================================ */
/* ============================================================
   "Как это работает" — реальная последовательность из 4 шагов, поэтому
   нумерация оправдана (см. дизайн-гайд: номера уместны только там, где
   порядок правда что-то значит). Добавлена соединяющая линия между
   карточками на широких экранах — читается как единый путь, а не набор
   разрозненных плашек.
   ============================================================ */
.how-it-works {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 40px;
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
}
.how-it-works-step {
    position: relative;
    z-index: 1;
    padding: 12px 22px;
}
.how-it-works-step + .how-it-works-step { border-left: 1px dashed #b8e9cd; }
.how-it-works-step .step-number {
    font-family: var(--font-score);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-field);
    box-shadow: 0 0 0 5px var(--color-field-light);
    font-size: .8rem;
}
.how-it-works-step h3 { margin: 18px 0 6px; font-size: .92rem; }
.how-it-works-step p { margin: 0; color: var(--color-ink-muted); font-size: .82rem; }

/* ============================================================
   Футер
   ============================================================ */
.site-footer {
    margin-top: 64px;
    border-top: 1px solid var(--color-border);
    background: var(--color-card);
}
.footer-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    padding: 40px 0 28px;
}
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }
.footer-brand svg { color: var(--color-field); }
.footer-tagline { color: var(--color-ink-muted); font-size: 0.9rem; max-width: 32ch; margin: 0; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); margin: 0 0 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: var(--color-ink); text-decoration: none; font-size: 0.92rem; }
.footer-col a:hover { color: var(--color-field); }
.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--color-ink-muted);
}
.footer-social { display: flex; gap: 10px; }
.footer-social a { color: var(--color-ink-muted); display: flex; }
.footer-social a:hover { color: var(--color-field); }

/* ============================================================
   Центр уведомлений — колокольчик в шапке (см. fragments/notifications-dropdown.html)
   ============================================================ */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.notification-item.unread { background: var(--color-field-light); }
.notification-item:hover { background: var(--color-border); }
#notifications-dropdown-panel { right: 0; left: auto; }

/* Вкладки-категории на странице /notifications (см. обсуждение "разделить страницу с уведомлениями") */
.notif-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.notif-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-ink-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.notif-tab:hover { border-color: var(--color-field); }
.notif-tab.active { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text); }

/* ============================================================
   Панель администратора — темный боковой sidebar (см. обсуждение
   "нужен sidebar для более удобного управления", дизайн в духе
   Stripe/Linear: темная навигация слева + светлая рабочая область).

   Общая механика "sidebar + main content" (flex, sticky-сайдбар,
   схлопывание в колонку на мобильном) одинакова для .admin-layout
   и .team-layout (см. ниже, /teams/{id}/**, /tournaments/{id}/**,
   /profile/**) — различаются только косметика (тёмный/светлый
   сайдбар, ширина, отступ контента). Здесь объявлена базовая часть
   один раз на оба класса, чтобы не дублировать display/align/gap.
   ============================================================ */
.admin-layout,
.team-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.admin-layout {
    min-height: calc(100vh - 140px);
}
.admin-sidebar {
    flex: 0 0 220px;
    background: #14161A;
    color: #ECEBE6;
    padding: 24px 12px;
    border-radius: 20px;
    position: sticky;
    top: 88px;
}
.admin-nav-disclosure { display:block; }
.admin-nav-summary { display:none; }
.admin-nav-links { display:block; }
.admin-sidebar a {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    color: #C7CBC6;
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-sidebar a.active { background: var(--color-action); color: var(--color-action-text); font-weight: 600; }
.admin-sidebar-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7C8480;
    padding: 14px 14px 6px;
}
.admin-content { flex: 1; min-width: 0; padding: 0 0 0 28px; }
.admin-layout {
    width: 100%;
    max-width: none !important;
    padding-top: 28px;
    padding-bottom: 48px;
}
.admin-content > .page-title {
    margin-top: 0;
    letter-spacing: -.04em;
}
.admin-content .card {
    background: var(--color-card);
    border-color: var(--color-border);
}
.admin-content input,
.admin-content select,
.admin-content textarea {
    background: var(--color-card);
    color: var(--color-ink);
}
@media (max-width: 860px) {
    /* См. тот же комментарий у .team-layout ниже по файлу — .admin-layout
       наследует ту же базовую align-items:flex-start (см. общее правило
       ".admin-layout, .team-layout { display:flex; align-items:flex-start; }"
       выше), и без явного stretch здесь .admin-content на мобильном так же
       раздувался по контенту шире экрана. */
    .admin-layout { flex-direction: column; align-items: stretch; }
    .admin-sidebar { position: static; width: 100%; flex: none; padding:8px 12px; }
    .admin-nav-summary {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        min-height:48px;
        cursor:pointer;
        list-style:none;
    }
    .admin-nav-summary::-webkit-details-marker { display:none; }
    .admin-nav-summary-copy { display:grid; gap:2px; min-width:0; }
    .admin-nav-summary-copy strong { color:#ECEBE6; font-size:.92rem; }
    .admin-nav-current { overflow:hidden; color:#AEB5B0; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
    .admin-nav-chevron {
        width:9px;
        height:9px;
        flex:0 0 auto;
        border-right:2px solid #AEB5B0;
        border-bottom:2px solid #AEB5B0;
        transform:rotate(45deg) translateY(-2px);
        transition:transform .16s ease;
    }
    .admin-nav-disclosure[open] .admin-nav-chevron { transform:rotate(225deg) translate(-2px, -1px); }
    .admin-nav-links { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; padding:8px 0 4px; }
    .admin-nav-links .admin-sidebar-title { display:none; }
    .admin-nav-links .admin-viewer-notice { grid-column:1 / -1; margin-bottom:6px; white-space:normal; line-height:1.4; }
    .admin-sidebar .admin-nav-links a { min-width:0; margin:0; padding:10px; font-size:.82rem; line-height:1.25; }
    .admin-content { padding: 20px 0 0; width: 100%; }
}

/* ============================================================
   Профиль команды — боковой sidebar по аналогии с панелью
   администратора (см. обсуждение "сделать по аналогии с панелью
   администратора, т.к. табы не подходят"). Используется на всех
   страницах /teams/{id}/** вместо прежнего ряда табов.
   Светлая карточка (а не темная, как в admin-sidebar) — раздел
   команды не административный, ему привычнее общая стилистика
   карточек сайта.
   ============================================================ */
.team-layout {
    width: 100%;
}
.team-sidebar {
    flex: 0 0 240px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    padding: 16px 10px;
    border-radius: var(--radius-lg, 16px);
    position: sticky;
    top: 92px;
    box-shadow: var(--shadow-card);
}
.team-sidebar-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    padding: 14px 12px 6px;
}
.team-sidebar-title:first-child { padding-top: 6px; }
.team-sidebar a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.team-sidebar a:hover { background: var(--color-field-light); }
.team-sidebar a.active { background: var(--color-action); color: var(--color-action-text); font-weight: 600; }
.team-sidebar-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    line-height: 1.4;
}
.team-content { flex: 1; min-width: 0; padding-left: 30px; }
.team-content > .card,
.team-content .card { border-radius: var(--radius-lg); }
@media (max-width: 860px) {
    /*
        См. обсуждение "проверь мобильную версию по «мои игры» - шире чем
        экран телефона" — реальный баг: .team-layout/.admin-layout задают
        align-items:flex-start (осмысленно для горизонтальной раскладки —
        просто "прижать к верху"), но при переключении на
        flex-direction:column этот же align-items начинает работать по
        ГОРИЗОНТАЛИ (это теперь поперечная ось) — то есть "не растягивать
        по ширине". Из-за этого .team-content на мобильном получал ширину
        по своему содержимому (fit-content), а не 100% контейнера, и любой
        внутренний элемент с чуть большей интринсик-шириной (сетка
        карточек, строка турнира с длинным названием и т.п.) раздувал всю
        колонку шире экрана — сайдбар при этом уже был на 100% (явно
        задано ниже), а .team-content — нет. Возвращаем растягивание по
        ширине явно для колоночной раскладки.
    */
    .team-layout { flex-direction: column; align-items: stretch; }
    .team-sidebar { position: static; width: 100%; flex: none; display: flex; flex-wrap: wrap; gap: 4px; }
    .team-sidebar-title { display: none; }
    .team-content { padding: 20px 0 0; width: 100%; }
    .profile-page .team-sidebar { flex-basis: auto; }
}

/* Карточка "последний анонс" на сводке команды — выделяем рупором,
   т.к. по договоренности анонсы должны быть на видном месте. */
.team-announcement-highlight {
    border-left: 4px solid var(--color-field);
}

/*
   Баннер согласия на использование cookie (см. обсуждение "куки: сайт будет
   собирать куки, нужно будет согласие пользователя"). display:none по
   умолчанию — app.js переключает на flex, если согласие еще не
   дано (см. localStorage). position:fixed внизу экрана, поверх всего
   остального контента, но не перекрывает шапку (та тоже sticky сверху).
*/
.cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--color-bg-raised);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-consent-banner p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-ink-muted);
    max-width: 720px;
    flex: 1 1 480px;
}
.cookie-consent-banner .btn { flex-shrink: 0; }

@media (max-width: 640px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 9px 12px;
        max-height: min(30vh, 180px);
        max-height: min(30dvh, 180px);
        overflow-y: auto;
        text-align:left;
    }
    .cookie-consent-banner p {
        min-width: 0;
        flex:0 0 auto;
        max-width:none;
        font-size:.76rem;
        line-height:1.35;
    }
    .cookie-consent-banner .btn {
        flex:0 0 auto;
        align-self:flex-end;
        width: auto;
        min-height:36px;
        padding:7px 12px;
        justify-content: center;
        font-size:.82rem;
    }
}

/*
   Вкладки "Основное" / "Параметры турнира" в форме создания турнира (см.
   обсуждение "отдельная вкладка о параметрах турнира"). Переключаются
   инлайновым JS (см. tournaments/create.html) — состояние не переживает
   ошибку валидации формы (страница просто перезагружается на вкладке
   "Основное"), это осознанный компромисс ради простоты.
*/
.tournament-form-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}
.tournament-form-tab {
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tournament-form-tab.active {
    color: var(--color-field);
    border-bottom-color: var(--color-field);
}

/*
   Печать сетки турнира (см. обсуждение "сетку турнира можно распечатать").
   .no-print — общий утилитарный класс, скрывает элемент только при печати
   (шапка сайта, сайдбар турнира, сама кнопка печати — на бумаге они не нужны).
*/
@media print {
    .no-print,
    .site-header,
    .site-footer,
    .team-sidebar {
        display: none !important;
    }
    .team-content { padding: 0 !important; }
    .bracket-wrapper { overflow: visible !important; }
    body { background: #fff !important; }
}

/*
   Визард создания игры/турнира (см. макет редизайна "создание матча,
   детали матча" — 4 шага: Основное/Детали/Участники/Подтверждение).
   Alpine.js только переключает видимость (x-show) — сам индикатор шагов
   ниже чисто визуальный (не кликабельный: специально не даем прыгать
   вперед мимо незаполненных шагов, только вперед по одному через "Далее"
   или назад в любой момент).
*/
.wizard-steps {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}
.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
    text-align: center;
}
.wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.wizard-step.is-done:not(:last-child)::after { background: var(--color-field); }
.wizard-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-card);
    border: 2px solid var(--color-border);
    color: var(--color-ink-muted);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 1;
}
.wizard-step.is-active .wizard-step-circle {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-action-text);
}
.wizard-step.is-done .wizard-step-circle {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-action-text);
}
.wizard-step-label {
    font-size: 0.82rem;
    color: var(--color-ink-muted);
    font-weight: 500;
}
.wizard-step.is-active .wizard-step-label { color: var(--color-ink); font-weight: 600; }

/* Плитки выбора вида спорта на шаге 1 (см. макет — иконка + подпись,
   рамка подсвечивается зеленым у выбранной). */
.sport-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.sport-picker-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
}
.sport-picker-tile:hover { border-color: var(--color-field-light); }
.sport-picker-tile:has(input:checked) {
    border-color: var(--color-field);
    background: var(--color-field-ultra-light);
    color: var(--color-field);
}
.sport-picker-icon { font-size: 1.5rem; }

.game-venue-options {
    padding-top: 8px;
}
.game-venue-options .form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-ink);
    font-size: 0.95rem;
    font-weight: 600;
}
.game-option-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 9px;
    margin-top: 8px;
}
.game-option-picker--surface,
.game-option-picker--amenities {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.game-option-tile {
    position: relative;
    display: flex;
    min-height: 62px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background: var(--color-card);
    color: var(--color-ink-muted);
    cursor: pointer;
    font-size: 0.86rem;
    line-height: 1.25;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.game-option-tile:hover { border-color: var(--color-field-light); }
.game-option-tile:has(input:checked) {
    border-color: var(--color-field);
    background: var(--color-field-ultra-light);
    color: var(--color-field);
}
.game-option-tile:focus-within {
    outline: 2px solid var(--color-field-light);
    outline-offset: 2px;
}
.game-option-tile input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.game-option-tile svg { flex: 0 0 auto; color: var(--color-field); }
.form-hint-inline {
    color: var(--color-ink-muted);
    font-size: 0.8rem;
    font-weight: 400;
}
.game-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.game-detail-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-field-ultra-light);
    color: var(--color-ink);
    font-size: 0.82rem;
    line-height: 1.2;
}
.game-detail-tag svg { color: var(--color-field); }

.profile-role-settings {
    margin: 28px 0;
}
.profile-role-settings-heading h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}
.profile-role-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-card);
}
.profile-role-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--color-field-ultra-light);
    color: var(--color-field);
}
.profile-role-copy { flex: 1; min-width: 0; }
.profile-role-copy > strong,
.profile-role-copy > span { display: block; }
.profile-role-copy > strong { margin-bottom: 3px; color: var(--color-ink); }
.profile-role-copy > span { color: var(--color-ink-muted); font-size: .84rem; line-height: 1.45; }
.profile-role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.profile-role-chip {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--color-field-ultra-light);
    color: var(--color-field);
    font-size: .78rem;
    font-weight: 600;
}
.profile-role-empty { color: var(--color-ink-muted); font-size: .8rem; }
.profile-sports-dialog {
    width: min(560px, calc(100% - 28px));
    max-height: min(82vh, 720px);
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-card);
    color: var(--color-ink);
    box-shadow: var(--shadow-floating);
}
.profile-sports-dialog::backdrop { background: rgba(12, 20, 16, .58); backdrop-filter: blur(3px); }
.profile-sports-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-sports-dialog-header h2 { margin: 0; font-size: 1.2rem; }
.profile-sports-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 8px;
    max-height: 45vh;
    overflow-y: auto;
    margin-top: 16px;
}
.profile-sport-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-ink);
    cursor: pointer;
    font-size: .85rem;
}
.profile-sport-tile:has(input:checked) { border-color: var(--color-field); background: var(--color-field-ultra-light); color: var(--color-field); }
.profile-sport-tile input { width: 17px; height: 17px; accent-color: var(--color-field); }
.profile-sport-icon { font-size: 1.2rem; }
.profile-sports-dialog-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 540px) {
    .profile-role-card { flex-wrap: wrap; }
    .profile-role-card > .btn-small { margin-left: auto; }
    .profile-sports-dialog { padding: 17px; }
    .profile-sports-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
   Баннер команды (см. макет редизайна "раздел команды" — фото стадиона за
   игроками в шапке). Настоящего фото-поля у команды в базе нет — используем
   градиент цвета команды вместо выдуманного стокового фото.
*/
.team-hero-banner {
    height: 96px;
    background: linear-gradient(135deg, var(--color-field) 0%, var(--color-field-dark, #12492A) 100%);
}
.team-hero-logo {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    border: 4px solid var(--color-card);
    flex-shrink: 0;
    box-shadow: var(--shadow-card);
}
.team-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
}
.team-hero-stats > div { display: flex; flex-direction: column; gap: 2px; }
.team-hero-stats > div > span:first-child {
    font-family: var(--font-score);
    font-weight: 800;
    font-size: 1.1rem;
}

/* Стопка аватаров участников команды — перекрывающиеся кружки (см. макет). */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-card);
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-left: -8px;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar-stack-item:first-child { margin-left: 0; }
.avatar-stack-item img { width: 100%; height: 100%; object-fit: cover; }
.avatar-stack-more { background: var(--color-field-light); color: var(--color-field); font-size: 0.72rem; }

/* Достижения в профиле (см. макет редизайна "профиль пользователя"). */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.achievement-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--radius-lg);
    background: var(--color-field-ultra-light);
    opacity: 0.45;
}
.achievement-tile.unlocked { opacity: 1; }
.achievement-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    margin-bottom: 4px;
}
.achievement-tile.unlocked .achievement-icon { background: var(--color-field); color: #fff; }
.achievement-title { font-size: 0.85rem; font-weight: 600; }

/* Прогресс-бары "любимые виды спорта" в профиле. */
.favorite-sport-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.favorite-sport-bar-fill {
    height: 100%;
    background: var(--color-field);
    border-radius: 999px;
}

/* Графики и списки на панели администратора — на мобильном в один столбец. */
@media (max-width: 900px) {
    .admin-charts-grid { grid-template-columns: 1fr !important; }
    .admin-lists-grid { grid-template-columns: 1fr !important; }
    .admin-game-status-grid { grid-template-columns: 1fr !important; }
}

/* Кнопки в hero вместо формы поиска (см. обсуждение "вместо фильтра поиска
   2 кнопки: найти игру и создать игру"). */
.hero-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.hero-cta-row .btn { white-space: nowrap; }

.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-size: .85rem;
    color: var(--color-ink-muted);
}
.hero-social-proof strong { color: var(--color-ink); }

/* Плавающая карточка ближайшего матча поверх фото (см. референс-макет) —
   тёмная полупрозрачная плашка, читаема на любом участке фото независимо
   от его яркости в этом месте. */
.hero-match-preview {
    position: absolute;
    right: 24px;
    bottom: 24px;
    max-width: 260px;
    background: rgba(16, 24, 40, .72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    color: #fff;
    z-index: 1;
}
.hero-match-preview-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-match-preview-top .sport-badge,
.hero-match-preview-top .badge {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: none;
    margin-bottom: 0;
}
.hero-match-preview-title { font-weight: 700; font-size: .95rem; margin: 0 0 4px; }
.hero-match-preview-meta { font-size: .78rem; color: rgba(255, 255, 255, .75); margin: 0; }
@media (max-width: 760px) {
    .hero-match-preview { display: none; }
}

/*
   Плитки "Популярные виды спорта" — цветной градиент на всю карточку с
   крупной иконкой и подписью снизу (см. макет редизайна "главная страница").
   Настоящих фото по видам спорта нет — 6 фирменных градиентов по кругу
   (.sport-tile-0 … .sport-tile-5) вместо одного плоского цвета для всех,
   чтобы сетка не выглядела монотонно, как было бы с одним --color-field
   на все карточки сразу.
*/
.sport-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
}
.sport-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: transform var(--transition-base);
}
.sport-tile:hover { transform: translateY(-3px); }
.sport-tile-icon { font-size: 2rem; line-height: 1; }
.sport-tile-label { display: flex; flex-direction: column; gap: 2px; }
.sport-tile-name { font-weight: 700; font-size: 1.05rem; }
.sport-tile-count { font-size: 0.8rem; opacity: 0.85; }

.sport-tile-0 { background: linear-gradient(135deg, #1B6B3A 0%, #2E9950 100%); }
.sport-tile-1 { background: linear-gradient(135deg, #C2560C 0%, #E8843D 100%); }
.sport-tile-2 { background: linear-gradient(135deg, #1E5FA8 0%, #4A8FD6 100%); }
.sport-tile-3 { background: linear-gradient(135deg, #8A2E8A 0%, #B860B8 100%); }
.sport-tile-4 { background: linear-gradient(135deg, #1E7A7A 0%, #45ABAB 100%); }
.sport-tile-5 { background: linear-gradient(135deg, #A83250 0%, #D46A82 100%); }

/*
   Аккордеон "Популярные виды спорта" (см. обсуждение "сделать как
   аккордеон" + присланные силуэты спортсменов). По умолчанию все панели
   узкие, активная (hover/tap) разворачивается — тот же прием, что и на
   фан-галереях. Название вида спорта уже нарисовано на самой картинке —
   поверх ничего не дублируем, только бейдж с количеством игр.
*/
/* Виды спорта — сетка карточек, как в визарде создания игры/турнира (см.
   обсуждение "скроем аккордеон, вместо нужно виды спорта карточками как на
   визарде — динамичные, чтобы при изменении размера экрана не было видно
   скролла"). auto-fill сам переносит карточки на новую строку при любой
   ширине окна — в отличие от прежнего горизонтального аккордеона с
   overflow-x, здесь скролл в принципе не появляется. */
.sport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 40px;
}
.sport-grid-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 12px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-ink);
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}
.sport-grid-tile:hover {
    border-color: #b3e8ca;
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.sport-grid-icon { font-size: 2rem; line-height: 1; }
.sport-grid-name { font-weight: 700; font-size: .92rem; }
.sport-grid-count { font-size: .76rem; color: var(--color-ink-muted); }
.sport-grid-tile-more {
    background: var(--color-field-ultra-light);
    border-style: dashed;
    border-color: var(--color-field-light);
    color: var(--color-field-dark);
}
.sport-grid-tile-more:hover { border-color: var(--color-field); }
.sport-grid-tile-more .sport-grid-icon { color: var(--color-field-dark); }

/* ============================================================
   PlusMate visual refresh
   Clean product UI: quiet surfaces, emerald actions, editorial spacing.
   (Токены :root/[data-theme=dark] и весь hero-full/.hero-* отсюда уже
   слиты в основные блоки выше по файлу — ниже остаются переопределения
   для остальных компонентов главной страницы: секции, карточки игр,
   аккордеон видов спорта, feature-карточки.)
   ============================================================ */

@media (max-width: 760px) {
    .header-inner { height: 62px; gap: 8px; }
    .hero-full { margin-bottom: 32px; border-radius: 0; }
    .hero-full-content { padding: 52px 0 44px; }
    .hero-full h1 { font-size: 2.45rem; }
    .hero-full-scrim {
        background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 52%, rgba(255,255,255,.24) 100%);
    }
    .how-it-works { padding: 14px; }
    .how-it-works-step { padding: 16px 8px; }
    .how-it-works-step + .how-it-works-step { border-left: 0; border-top: 1px dashed #b8e9cd; }
    .two-col-showcase { padding: 16px; }
}

/* Токены тёмной темы отсюда уже слиты в основной [data-theme="dark"] блок
   в начале файла — ниже остаются только переопределения конкретных
   компонентов для тёмной темы (шапка, главная страница). */


[data-theme="dark"] .site-header {
    background: rgba(23, 29, 35, .9);
    border-bottom-color: rgba(43, 53, 62, .9);
}
[data-theme="dark"] .nav-links a:not(.btn-small):not(.btn),
[data-theme="dark"] .nav-menu > button { color: #d0d5dd; }
[data-theme="dark"] .hero-full-scrim {
    background: linear-gradient(90deg, rgba(16, 20, 24, .98) 0%, rgba(16, 20, 24, .88) 38%, rgba(16, 20, 24, .08) 78%),
                linear-gradient(0deg, rgba(0, 0, 0, .24), transparent 45%);
}
[data-theme="dark"] .hero-full h1,
[data-theme="dark"] .hero-full-content { color: var(--color-ink); }
[data-theme="dark"] .hero-sub { color: #c0c8d2; }
[data-theme="dark"] .hero-full-content p.hero-sub { color: #c0c8d2; }
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .how-it-works,
[data-theme="dark"] .game-card,
[data-theme="dark"] .two-col-showcase {
    background: var(--color-card);
    color: var(--color-ink);
}
[data-theme="dark"] .btn-secondary:hover { background: var(--color-field-light); }
[data-theme="dark"] .feature-card { background: var(--color-card); }
[data-theme="dark"] .how-it-works,
[data-theme="dark"] .game-card,
[data-theme="dark"] .two-col-showcase,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .feature-card-body {
    background: var(--color-card);
    color: var(--color-ink);
}
[data-theme="dark"] .how-it-works-step + .how-it-works-step {
    border-color: var(--color-border);
}
[data-theme="dark"] .showcase-row-card {
    background: var(--color-bg-raised);
    border-color: var(--color-border);
}
[data-theme="dark"] .showcase-row-card:hover {
    background: var(--color-field-ultra-light);
}
[data-theme="dark"] .admin-content .card {
    background: var(--color-card);
}

.tournament-details-shell {
    max-width: 1180px;
    padding-top: 28px;
    padding-bottom: 48px;
}
.tournament-back-link {
    margin-bottom: 18px;
}
.tournament-details-cover-inline {
    height: 230px;
    margin-bottom: 22px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #0b6b40, #75dca4);
    color: #fff;
    font-size: 4rem;
    box-shadow: var(--shadow-card);
}
.tournament-details-cover-inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tournament-details-page > .tournament-details-shell > .page-title {
    margin: 12px 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.05em;
}
.tournament-details-page > .tournament-details-shell > .card {
    border-radius: var(--radius-lg);
    padding: 22px;
}
.tournament-details-page > .tournament-details-shell > h2 {
    font-size: 1.25rem;
    letter-spacing: -.03em;
}
[data-theme="dark"] .tournament-details-cover-inline {
    background: linear-gradient(120deg, #123f2b, #277f54);
}

/* Full-width workspace layouts for high-density sections. */
.teams-catalog-shell,
.team-page-shell,
.profile-page-shell {
    max-width: 1440px;
    width: min(100% - 48px, 1440px);
}
.profile-page-shell.profile-edit-shell {
    padding-top: 30px;
    padding-bottom: 54px;
}
.profile-edit-shell > .card,
.profile-edit-shell > .profile-upload-card,
.profile-edit-shell > .page-title {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.profile-subpage-shell {
    padding-top: 30px;
    padding-bottom: 54px;
}
.profile-page .team-sidebar { flex: 0 0 248px; }
.profile-page .team-content { min-width: 0; }
.teams-catalog-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 22px;
}
.teams-catalog-heading .page-title { margin: 4px 0; }
.team-catalog-card {
    position: relative;
    min-height: 170px;
    padding-top: 24px;
}
.team-catalog-card.is-member {
    border-color: rgba(11, 191, 106, .38);
    box-shadow: 0 8px 22px rgba(11, 191, 106, .08);
}
.team-you-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--color-field-dark);
    background: var(--color-field-light);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 750;
}
.profile-page-shell .team-content > .card {
    padding: 24px;
}
.teams-catalog-page .filters {
    border: 1px solid var(--color-border);
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-card);
}
.teams-catalog-page .filters input,
.teams-catalog-page .filters select { min-height: 44px; }
[data-theme="dark"] .team-catalog-card.is-member {
    border-color: rgba(67, 216, 141, .42);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
@media (max-width: 760px) {
    .teams-catalog-shell,
    .team-page-shell,
    .profile-page-shell { width: min(100% - 28px, 1440px); }
    .teams-catalog-heading { align-items: flex-start; flex-direction: column; }
    .profile-page-shell.profile-edit-shell,
    .profile-subpage-shell { padding-top: 20px; padding-bottom: 34px; }
}

/* Team dashboard: turn the public team page into a compact home base with a
   clear identity, useful summary and a readable event feed. */
.team-dashboard-content { min-width:0; }
.team-dashboard-hero {
    border-radius:24px !important;
    box-shadow:var(--shadow-floating) !important;
}
.team-dashboard-hero .team-hero-banner { min-height:150px; }
.team-dashboard-identity { min-height:132px; }
.team-dashboard-identity .page-title {
    font-size:clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing:-.055em;
}
.team-dashboard-identity > div { min-width:0; }
.team-dashboard-identity p { line-height:1.55; }
.team-dashboard-stat-card {
    padding:20px 22px;
    border-radius:18px;
    background:linear-gradient(135deg, var(--color-card), var(--color-bg-raised));
}
.team-dashboard-section-heading h2 {
    display:flex; align-items:center; gap:8px;
    letter-spacing:-.025em;
}
.team-dashboard-section-heading h2 svg { color:var(--color-field); }
.team-dashboard-section-heading a { color:var(--color-field-dark); font-size:.82rem; font-weight:700; }
.team-dashboard-section .card {
    border-radius:16px;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.team-dashboard-section .card:hover {
    border-color:rgba(11,191,106,.35);
    box-shadow:var(--shadow-hover);
}
.team-upcoming-card { padding:16px 18px; }
.team-upcoming-card h3 { letter-spacing:-.02em; }
.team-upcoming-card a > div { min-width:0; }
@media (max-width:760px) {
    .team-dashboard-hero .team-hero-banner { min-height:120px; }
    .team-dashboard-identity { padding-left:16px !important; padding-right:16px !important; }
    .team-dashboard-section-heading { align-items:flex-start !important; gap:10px; }
    .team-dashboard-section-heading a { white-space:nowrap; }
}

/* Game details: present the match as a focused event page, with the key
   context above the fold and supporting actions in a calm sidebar. */
.game-details-shell { padding-top:1px; padding-bottom:58px; }
.game-details-heading {
    position:relative; padding:26px 28px; border:1px solid var(--color-border);
    border-radius:24px; background:linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
    box-shadow:var(--shadow-floating); overflow:hidden;
}
.game-details-heading::before {
    content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--gradient-brand);
}
.game-details-heading-main { position:relative; }
.game-details-heading .badge { margin-top:2px; }
.game-details-heading .btn { flex-shrink:0; }
.game-details-info-card {
    background:var(--color-card);
    box-shadow:var(--shadow-card);
}
.game-details-info-card .info-row { min-height:48px; }
.game-details-info-card .info-row > span:last-of-type { line-height:1.45; }
.game-details-section-title { margin:28px 0 12px; }
.game-details-section-title .section-title { letter-spacing:-.03em; }
.game-details-sidebar-card { box-shadow:var(--shadow-card); }
.game-details-shell .game-layout > div:first-child > .card,
.game-details-shell .game-layout > div:last-child > .card { border-radius:18px; }
.game-details-shell .participant-row { padding:14px 0; }
.game-details-shell .team-column { border-radius:16px; }
[data-theme="dark"] .game-details-heading {
    background:linear-gradient(145deg, var(--color-card), #11181e);
}
@media (max-width:760px) {
    .game-details-shell { padding-top:0; }
    .game-details-heading { align-items:flex-start; flex-direction:column; padding:22px 18px; }
    .game-details-heading .btn { width:100%; justify-content:center; }
    .game-details-heading .page-title { font-size:clamp(1.8rem, 8vw, 2.5rem); }
    .game-details-info-card { padding:14px 16px; }
    .game-details-info-card .info-row { align-items:flex-start; flex-wrap:wrap; }
    .game-details-info-card .info-row .label { min-width:88px; }
    .game-details-info-card .info-row a { margin-left:0 !important; width:100%; justify-content:center; }
}

/* Profile surfaces: a personal identity header on the public page and a
   focused settings workspace for the owner. */
.profile-content { min-width:0; }
.profile-identity-card {
    position:relative; overflow:hidden; padding:26px;
    border-radius:24px !important;
    background:linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
    box-shadow:var(--shadow-floating);
}
.profile-identity-card::before {
    content:''; position:absolute; inset:0 0 auto; height:4px;
    background:var(--gradient-brand);
}
.profile-identity-card > * { position:relative; }
.profile-identity-card img,
.profile-identity-card > div[style*="width:80px"] {
    border:4px solid var(--color-card);
    box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.profile-identity-card .page-title { font-size:clamp(1.65rem, 3vw, 2.35rem); letter-spacing:-.055em; }
.profile-stats-grid { margin-bottom:20px; }
.profile-stats-grid .stat-tile {
    min-height:100px; border-radius:16px; padding:18px;
    border:1px solid var(--color-border); box-shadow:var(--shadow-card);
    background:var(--color-card);
}
.profile-stats-grid .stat-tile-value { font-size:1.55rem; }
.profile-section-card { border-radius:18px; box-shadow:var(--shadow-card); }
.profile-section-card > p:first-child { font-size:1rem; }
.profile-contact-card p { line-height:1.6; }
.profile-page .achievement-tile { border-radius:14px; }
.profile-page .favorite-sport-bar { height:8px; border-radius:999px; overflow:hidden; }
.profile-page h2 { letter-spacing:-.035em; }
.profile-overview,
.profile-anchor-section { scroll-margin-top:96px; }
.profile-anchor-section { margin-top:34px; }
.profile-identity-card { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.profile-avatar { width:80px; height:80px; flex:0 0 80px; border-radius:50%; object-fit:cover; }
.profile-avatar-placeholder { display:grid; place-items:center; background:var(--color-field-ultra-light); color:var(--color-field); font-size:1.8rem; font-weight:800; }
.profile-identity-copy { flex:1; min-width:0; }
.profile-handle { margin:0 0 10px; color:var(--color-ink-muted); font-size:.9rem; }
.profile-badges { display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px; }
.profile-sport-role { min-width:0; }
.profile-sport-role[open] { flex-basis:100%; }
.profile-sport-role > summary {
    display:inline-flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    list-style:none;
}
.profile-sport-role > summary::-webkit-details-marker { display:none; }
.profile-sport-role[open] > summary svg { transform:rotate(180deg); }
.profile-sport-role-list {
    margin:6px 0 2px;
    color:var(--color-ink-muted);
    font-size:.84rem;
    line-height:1.5;
}
.profile-edit-action,
.profile-report-action { align-self:flex-start; }
.profile-stats-grid .stat-tile {
    display:grid;
    grid-template-columns:24px minmax(0, 1fr);
    grid-template-rows:min-content min-content;
    align-content:center;
    align-items:center;
    column-gap:10px;
    row-gap:4px;
    text-align:left;
}
.profile-stats-grid .stat-tile > i { grid-row:1 / span 2; color:var(--color-field); }
.profile-stats-grid .stat-tile-value,
.profile-stats-grid .stat-tile-label { min-width:0; line-height:1.2; }
.profile-stats-grid .stat-tile-value { white-space:nowrap; font-variant-numeric:tabular-nums; }
.profile-section-card { margin-bottom:20px; padding:22px; }
.profile-section-heading,
.profile-anchor-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.profile-section-heading { margin-bottom:14px; }
.profile-section-heading h2,
.profile-anchor-heading h2 { margin:0; font-size:1.18rem; }
.profile-anchor-heading { margin-bottom:12px; }
.eyebrow { margin:0 0 4px; color:var(--color-field); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.profile-section-description { margin:-4px 0 18px; color:var(--color-ink-muted); font-size:.9rem; }
.profile-achievements-card { overflow:hidden; }
.profile-achievements { margin:0; }
.profile-achievements > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; }
.profile-achievements > summary::-webkit-details-marker { display:none; }
.profile-achievements > summary > span:first-child { display:grid; gap:3px; }
.profile-achievements > summary strong { font-size:1.18rem; letter-spacing:-.035em; }
.profile-achievements > summary small { color:var(--color-ink-muted); font-size:.86rem; }
.profile-achievements-summary { display:flex; align-items:center; gap:8px; }
.profile-achievements-summary > i { color:var(--color-ink-muted); transition:transform .2s ease; }
.profile-achievements[open] .profile-achievements-summary > i { transform:rotate(180deg); }
.profile-achievements .achievements-grid { margin-top:18px; padding-top:18px; border-top:1px solid var(--color-border); }
.achievements-grid { grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:10px; }
.achievement-tile { min-height:160px; justify-content:flex-start; padding:14px 10px 12px; border:1px solid transparent; transition:transform .2s ease, border-color .2s ease, opacity .2s ease; }
.achievement-tile:hover { transform:translateY(-2px); border-color:var(--color-border); }
.achievement-icon { width:40px; height:40px; }
.achievement-title { line-height:1.25; }
.achievement-description { min-height:32px; color:var(--color-ink-muted); font-size:.72rem; line-height:1.35; }
.achievement-progress { margin-top:auto; color:var(--color-field); font-size:.72rem; font-weight:750; }
.achievement-tile:not(.unlocked) .achievement-progress { color:var(--color-ink-muted); }
.favorite-sports-list { display:grid; gap:14px; }
.favorite-sport-row { display:grid; gap:6px; }
.favorite-sport-meta { display:flex; justify-content:space-between; gap:12px; font-size:.9rem; }
.profile-empty-state { display:flex; align-items:flex-start; gap:12px; padding:18px; border:1px dashed var(--color-border); border-radius:14px; background:var(--color-bg-raised); color:var(--color-ink-muted); }
.profile-empty-state > i { flex:0 0 auto; color:var(--color-field); }
.profile-empty-state strong { display:block; color:var(--color-ink); margin-bottom:4px; }
.profile-empty-state p { margin:0 0 12px; font-size:.9rem; line-height:1.45; }
.profile-list { display:grid; }
.profile-list-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--color-border); color:inherit; text-decoration:none; }
.profile-list-row:last-child { border-bottom:0; }
.profile-list-row:hover strong { color:var(--color-field); }
.profile-list-row > span:first-child { min-width:0; flex:1; display:grid; gap:3px; }
.profile-list-row small { color:var(--color-ink-muted); }
.profile-list-row > i { color:var(--color-ink-muted); flex:0 0 auto; }
.btn-text { display:inline-flex; align-items:center; gap:4px; color:var(--color-field); font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.profile-last-game { display:inline-block; margin:0 0 14px; font-weight:700; }
.profile-review-form { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.profile-review-form label { margin:0; }
.profile-review-form select { width:auto; }
.profile-review-form input[type="text"] { flex:1; min-width:190px; }
.profile-details-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.profile-facts { display:grid; gap:14px; margin:0; }
.profile-facts div { display:grid; gap:3px; }
.profile-facts dt { color:var(--color-ink-muted); font-size:.76rem; }
.profile-facts dd { margin:0; font-weight:600; }
.profile-integrity { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:0 0 10px; }
.profile-integrity i { color:var(--color-success); }
.profile-integrity strong { font-family:var(--font-display); font-size:1.5rem; color:var(--color-field); }
.profile-integrity span { color:var(--color-ink-muted); font-size:.85rem; }
.profile-organizer-rating { display:flex; gap:7px; align-items:center; margin:14px 0 0; font-size:.9rem; }
.profile-organizer-rating i { color:#d4a017; }
.profile-social-links { display:flex; flex-wrap:wrap; gap:10px; }
.profile-social-links a { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--color-border); border-radius:10px; color:var(--color-ink); font-weight:650; text-decoration:none; }
.profile-social-links a:hover { border-color:var(--color-field); color:var(--color-field); }
.profile-subpage-content { min-width:0; }
.profile-subpage-heading { margin-bottom:22px; }
.profile-subpage-heading .page-title { margin:5px 0 6px; }
.profile-subpage-heading .form-hint { max-width:650px; line-height:1.55; }
.profile-feedback-list { display:grid; gap:14px; }
.profile-feedback-card { padding:20px; }
.profile-feedback-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.profile-feedback-head h2 { margin:0; font-size:1rem; }
.profile-feedback-head .form-hint { margin:3px 0 0; }
.profile-feedback-message { margin:14px 0 0; white-space:pre-wrap; line-height:1.55; }
.profile-feedback-answer { margin-top:14px; padding:12px; border-radius:12px; background:var(--color-field-ultra-light); }
.profile-feedback-answer strong { display:block; margin-bottom:5px; font-size:.84rem; }
.profile-feedback-answer p { margin:0; line-height:1.5; }
.profile-finance-section { margin-top:28px; }
.profile-finance-section:first-of-type { margin-top:0; }
.profile-payment-row { gap:12px; }
.profile-payment-main { min-width:0; flex:1; display:grid; gap:3px; color:inherit; text-decoration:none; }
.profile-payment-main:hover strong { color:var(--color-field); }
.profile-receipt-link { white-space:nowrap; }
.profile-social-input { display:flex; align-items:center; gap:6px; }
.profile-social-input > span { color:var(--color-ink-muted); white-space:nowrap; }
.profile-social-input > input { flex:1; }
.profile-referee-hint { margin-top:0; }
.profile-referee-option { margin-bottom:6px; }
.profile-upload-card { margin-top:16px; }
.profile-upload-title { margin-top:0; font-weight:700; }
.profile-upload-preview { display:block; width:80px; height:80px; margin-bottom:10px; border-radius:50%; object-fit:cover; }
.profile-upload-hint { margin:6px 0 0; }
.auth-form-container { max-width:420px; }
.auth-form-lead { margin:0 0 24px; color:var(--color-ink-muted); }
.auth-submit { width:100%; justify-content:center; margin-top:8px; }
.profile-edit-shell { padding-top:34px; }
.profile-edit-heading { margin-bottom:22px; }
.profile-edit-heading .page-title { margin:7px 0 6px; }
.profile-edit-heading .form-hint { max-width:590px; line-height:1.6; }
.profile-edit-card {
    padding:28px; border-radius:22px !important; box-shadow:var(--shadow-floating);
}
.profile-edit-card input,
.profile-edit-card select { border-radius:11px; }
.profile-edit-card .form-group { margin-bottom:21px; }
.profile-edit-card .checkbox-group { padding:12px 14px; border:1px solid var(--color-border); border-radius:12px; }
.profile-upload-card {
    padding:22px; border-radius:18px !important; box-shadow:var(--shadow-card);
}
.profile-upload-card input[type="file"] { max-width:100%; padding:10px; }
@media (max-width:760px) {
    .profile-identity-card { align-items:flex-start !important; flex-direction:column; padding:20px 18px; }
    .profile-identity-card > button { align-self:stretch !important; justify-content:center;     }
    .profile-identity-card > .profile-edit-action { align-self:stretch; justify-content:center; }
    .profile-details-grid { grid-template-columns:1fr; gap:0; }
    .profile-details-grid .profile-section-card { margin-bottom:20px; }
    .achievements-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .achievement-tile { min-height:150px; }
    .profile-list-row { align-items:flex-start; }
    .profile-list-row .badge { max-width:45%; white-space:normal; text-align:right; }
    .profile-achievements > summary { align-items:flex-start; }
    .profile-achievements-summary .badge { white-space:nowrap; }
    .profile-feedback-head { flex-direction:column; }
    .profile-payment-row { flex-wrap:wrap; }
    .profile-payment-main { flex-basis:calc(100% - 100px); }
    .profile-stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
    .profile-stats-grid .stat-tile { min-height:88px; padding:14px 12px; }
    .profile-stats-grid .stat-tile-value { font-size:1.25rem; }
    .profile-edit-shell { padding-top:22px; }
    .profile-edit-card { padding:18px; }
}

@media (max-width: 700px) {
}

/* Team catalogue: discovery first, then a compact card that makes ownership,
   location and the next action obvious at a glance. */
.teams-catalog-shell { padding-top: 8px; padding-bottom: 58px; }
.teams-catalog-heading { margin: 34px 0 24px; }
.teams-catalog-heading .form-hint { max-width: 520px; line-height: 1.6; }
.teams-catalog-create { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.teams-catalog-filters {
    display:flex; align-items:center; gap:10px; margin-bottom:24px;
    padding:16px !important; border-radius:18px !important;
}
.teams-search-field {
    display:flex; align-items:center; gap:9px; flex:1; min-width:230px;
    min-height:44px; padding:0 13px; border:1px solid var(--color-border);
    border-radius:11px; background:var(--color-bg);
}
.teams-search-field svg { color:var(--color-ink-faint); flex-shrink:0; }
.teams-search-field input {
    width:100%; min-width:0; min-height:40px !important; padding:0 !important;
    border:0 !important; outline:0; background:transparent !important;
}
.teams-catalog-filters select { min-width:180px; }
.teams-catalog-grid { grid-template-columns:repeat(auto-fill, minmax(285px, 1fr)); gap:16px; }
.team-catalog-card {
    display:flex; flex-direction:column; min-height:218px; padding:20px;
    border-radius:20px; overflow:hidden;
}
.team-catalog-card-head { display:flex; align-items:center; gap:13px; min-width:0; margin-bottom:18px; }
.team-catalog-logo {
    width:54px; height:54px; flex:0 0 54px; object-fit:cover; border-radius:16px;
    border:1px solid var(--color-border);
}
.team-catalog-logo-placeholder {
    display:grid; place-items:center; color:var(--color-field);
    background:var(--color-field-light);
}
.team-catalog-name { min-width:0; }
.team-catalog-name .game-time {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.06rem;
}
.team-catalog-name .game-address { margin-top:4px; font-size:.77rem; }
.team-catalog-tags { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; }
.team-catalog-open {
    display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:18px;
    color:var(--color-field-dark); font-size:.82rem; font-weight:750;
}
.team-catalog-open svg { transition:transform .2s ease; }
.team-catalog-card:hover .team-catalog-open svg { transform:translate(2px,-2px); }
[data-theme="dark"] .teams-search-field { background:var(--color-bg-raised); }

.team-roster-filter {
    display:flex;
    align-items:flex-end;
    gap:12px;
    margin:0 0 14px;
    padding:14px;
    border:1px solid var(--color-border);
    border-radius:16px;
    background:var(--color-card);
    box-shadow:var(--shadow-card);
}
.team-roster-search {
    display:flex;
    align-items:center;
    gap:9px;
    flex:1 1 240px;
    min-width:180px;
    min-height:44px;
    padding:0 12px;
    border:1px solid var(--color-border);
    border-radius:11px;
    background:var(--color-bg);
    color:var(--color-ink-faint);
}
.team-roster-search:focus-within { border-color:var(--color-field); box-shadow:0 0 0 3px var(--color-field-light); }
.team-roster-search svg { flex:0 0 auto; }
.team-roster-search input {
    width:100%;
    min-width:0;
    min-height:40px !important;
    padding:0 !important;
    border:0 !important;
    outline:0;
    background:transparent !important;
    color:var(--color-ink);
}
.team-roster-role {
    display:grid;
    gap:4px;
    flex:0 1 190px;
    min-width:150px;
    color:var(--color-ink-muted);
    font-size:.76rem;
    font-weight:700;
}
.team-roster-role select { min-height:44px; margin:0; }
.team-roster-filter-count {
    flex:0 0 auto;
    margin:0 2px 12px auto;
    color:var(--color-ink-muted);
    font-size:.8rem;
    white-space:nowrap;
}
.team-roster-filter-reset { margin-bottom:2px; }
.team-roster-filter [hidden],
.team-roster-member[hidden],
.team-roster-no-results[hidden] { display:none !important; }
.team-roster-no-results { margin:0; padding:16px 0 4px; color:var(--color-ink-muted); }
[data-theme="dark"] .team-roster-search { background:var(--color-bg-raised); }

@media (max-width:760px) {
    .teams-catalog-shell { padding-top:0; }
    .teams-catalog-heading { gap:18px; margin:24px 0 20px; }
    .teams-catalog-create { width:100%; justify-content:center; }
    .teams-catalog-filters { align-items:stretch; flex-direction:column; }
    .teams-search-field { min-width:0; }
    .teams-catalog-filters select,
    .teams-catalog-filters .btn-small { width:100%; }
    .teams-catalog-grid { grid-template-columns:1fr; }
    .team-roster-filter { align-items:stretch; flex-wrap:wrap; gap:10px; padding:12px; }
    .team-roster-search { flex-basis:100%; min-width:0; }
    .team-roster-role { flex:1 1 150px; min-width:0; }
    .team-roster-filter-count { margin:0 auto 0 0; align-self:center; }
    .team-roster-filter-reset { align-self:center; margin:0; }
}

/* Homepage premium layer: a clear first action, a lightweight hero panel and
   compact navigation cards keep the landing page useful before scrolling. */
.hero-full > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.hero-full-content { flex: 1 1 560px; }
.hero-floating-panel {
    width: min(100%, 340px);
    flex: 0 0 340px;
    padding: 24px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(19, 29, 40, .82), rgba(19, 29, 40, .58));
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
    animation: hero-panel-in .8s .25s var(--ease-out) both;
}
.hero-floating-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero-floating-live { display: inline-flex; align-items: center; gap: 7px; }
.hero-floating-live span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #52e39a; box-shadow: 0 0 0 5px rgba(82,227,154,.13);
}
.hero-floating-panel h2 {
    margin: 28px 0 22px;
    max-width: 260px;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1.12;
    letter-spacing: -.035em;
}
.hero-floating-list { display: grid; gap: 13px; }
.hero-floating-list div {
    display: flex; align-items: center; gap: 11px;
    color: rgba(255,255,255,.82); font-size: .9rem;
}
.hero-floating-list i { color: #73e6a5; }
.hero-floating-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 26px; color: #9bf0bb; font-size: .86rem; font-weight: 700;
    text-decoration: none;
}
.hero-floating-link:hover { color: #fff; }
@keyframes hero-panel-in {
    from { opacity: 0; transform: translateY(18px) rotate(1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
}
.home-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: -28px 0 64px;
    position: relative;
    z-index: 2;
}
.home-quick-action {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 16px 17px; color: var(--color-ink); text-decoration: none;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 16px; box-shadow: 0 12px 28px rgba(17, 24, 39, .08);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-quick-action:hover {
    color: var(--color-ink); border-color: var(--color-field);
    box-shadow: 0 16px 34px rgba(17, 24, 39, .13); transform: translateY(-4px);
}
.home-quick-action > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.home-quick-action strong { font-size: .92rem; }
.home-quick-action small { margin-top: 3px; color: var(--color-ink-muted); font-size: .77rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-quick-action > svg { color: var(--color-ink-faint); flex-shrink: 0; }
.home-quick-action-primary { border-color: rgba(255, 90, 31, .35); }
.home-quick-icon {
    display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
    color: var(--color-field); background: var(--color-field-light); border-radius: 12px;
}
.home-quick-action-primary .home-quick-icon { color: #fff; background: var(--gradient-brand); }
.home-steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.home-step { position:relative; min-width:0; padding:22px; overflow:hidden; }
.home-step > i { color:var(--color-field); }
.home-step-number {
    position:absolute; top:13px; right:17px; color:var(--color-ink-faint);
    font-family:var(--font-score); font-size:1.7rem; font-weight:800; opacity:.48;
}
.home-step h3 { margin:15px 0 7px; font-size:1rem; }
.home-step p { min-height:3.2em; margin:0 0 14px; color:var(--color-ink-muted); font-size:.87rem; line-height:1.55; }
.home-step a, .about-feature a {
    display:inline-flex; align-items:center; gap:6px; color:var(--color-field-dark);
    font-size:.84rem; font-weight:750; text-decoration:none;
}
.home-step a:hover, .about-feature a:hover { text-decoration:underline; }
.home-section-heading {
    display: flex; align-items: end; justify-content: space-between; gap: 20px;
    margin: 0 0 22px;
}
.home-section-heading .section-title { margin-bottom: 0; }
.home-section-heading > p { max-width: 310px; margin: 0 0 3px; color: var(--color-ink-muted); font-size: .9rem; text-align: right; }
[data-theme="dark"] .home-quick-action { box-shadow: 0 12px 28px rgba(0,0,0,.18); }
[data-theme="dark"] .home-quick-action:hover { box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.home-shell { padding-bottom:56px; }
.home-section { margin-top:48px; }
.home-section-heading { margin-bottom:18px; }
.home-section-heading .section-title { margin-top:4px; }
.home-game-grid { margin-bottom:0; }
.home-game-card { min-height:192px; }
.home-game-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.home-game-details { display:grid; gap:6px; margin-top:12px; }
.home-game-details > span { display:flex; align-items:center; gap:7px; color:var(--color-ink-muted); font-size:.83rem; }
.home-game-details svg { width:15px; height:15px; flex:0 0 auto; color:var(--color-field); }
.home-game-details .home-game-muted { font-style:italic; }
.home-empty-state { display:flex; align-items:flex-start; gap:13px; padding:24px; border:1px dashed var(--color-border); border-radius:18px; background:var(--color-bg-raised); }
.home-empty-state > i { flex:0 0 auto; color:var(--color-field); }
.home-empty-state strong { display:block; margin-bottom:4px; }
.home-empty-state p { margin:0 0 13px; color:var(--color-ink-muted); font-size:.9rem; line-height:1.5; }
.home-empty-state-compact { min-height:128px; }
.home-sports-section .sport-grid { margin-bottom:0; }
.home-discovery-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; }
.home-showcase-list { display:grid; gap:10px; }
.home-showcase-list .showcase-row-card { margin:0; }
.home-showcase-main { display:grid; min-width:0; gap:4px; }
.home-showcase-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-showcase-main small { overflow:hidden; color:var(--color-ink-muted); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.home-team-row { display:flex; align-items:center; min-width:0; gap:10px; }
.home-team-row .team-catalog-logo { width:40px; height:40px; flex:0 0 40px; }
.home-news-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.home-news-card { padding:20px; }
.home-news-card time { color:var(--color-field); font-size:.75rem; font-weight:750; }
.home-news-card h3 { margin:8px 0 7px; font-size:1rem; }
.home-news-card p { margin:0; color:var(--color-ink-muted); font-size:.88rem; line-height:1.5; white-space:pre-wrap; }
.home-final-cta { margin-top:48px; }
.home-final-cta .eyebrow { color:rgba(255,255,255,.72); }
.home-final-cta h2 { margin:8px 0 10px; }
.home-final-cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.home-final-cta .btn-secondary { border-color:rgba(255,255,255,.34); color:#fff; background:transparent; }
.home-final-cta .btn-secondary:hover { background:rgba(255,255,255,.12); }
@media (max-width: 880px) {
    .hero-floating-panel { display: none; }
    .hero-full > .container { display: block; }
    .home-quick-actions { margin-top: -20px; }
}
@media (max-width: 680px) {
    .home-quick-actions { grid-template-columns: 1fr; margin-bottom: 46px; }
    .home-quick-action { padding: 14px; }
    .home-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
    .home-section-heading > p { text-align: left; }
    .home-section { margin-top:38px; }
    .home-discovery-grid,
    .home-news-list { grid-template-columns:1fr; gap:24px; }
    .home-steps { grid-template-columns:1fr; }
    .home-step p { min-height:0; }
    .home-showcase-main small { white-space:normal; }
    .home-showcase-list .showcase-row-card { align-items:flex-start; }
}

.about-page { padding-bottom:56px; }
.about-hero {
    position:relative; overflow:hidden; padding:76px 0 72px; color:#fff;
    background:
        radial-gradient(ellipse at 80% 15%, rgba(121,230,165,.22), transparent 42%),
        linear-gradient(130deg, #13242c, #17473a 62%, #21634c);
}
.about-hero .container { max-width:940px; }
.about-hero .eyebrow { display:inline-flex; align-items:center; gap:7px; color:#9bf0bb; }
.about-hero h1 { margin:18px 0 14px; font-family:var(--font-display); font-size:clamp(2.5rem, 6vw, 4.5rem); line-height:1.02; letter-spacing:-.045em; }
.about-hero h1 span { color:#a6edbc; }
.about-hero p { max-width:660px; margin:0; color:rgba(255,255,255,.8); font-size:1.08rem; line-height:1.7; }
.about-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.about-hero .btn-secondary { border-color:rgba(255,255,255,.55); color:#fff !important; background:rgba(255,255,255,.08); }
.about-hero .btn-secondary:hover,.about-hero .btn-secondary:focus-visible { border-color:#fff; color:#fff !important; background:rgba(255,255,255,.16); }
.about-content { max-width:1000px; padding-top:48px; }
.about-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:42px; margin-bottom:32px; }
.about-intro h2 { max-width:470px; margin:8px 0 0; font-family:var(--font-display); font-size:clamp(1.55rem, 3vw, 2.1rem); line-height:1.18; }
.about-intro > p { margin:0; color:var(--color-ink-muted); line-height:1.75; }
.about-feature-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.about-feature { display:flex; flex-direction:column; min-height:250px; padding:22px; }
.about-feature-icon, .about-contact-icon {
    display:grid; place-items:center; width:46px; height:46px; color:var(--color-field);
    background:var(--color-field-light); border-radius:14px;
}
.about-feature h2 { margin:18px 0 7px; font-size:1.05rem; }
.about-feature p { flex:1; margin:0 0 16px; color:var(--color-ink-muted); font-size:.88rem; line-height:1.65; }
.about-contact { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; margin-top:28px; padding:24px; }
.about-contact-icon { width:54px; height:54px; }
.about-contact-copy h2 { margin:5px 0; font-size:1.25rem; }
.about-contact-copy p { margin:0; color:var(--color-ink-muted); font-size:.88rem; line-height:1.5; }
.about-contact-links { display:grid; justify-items:start; gap:10px; }
.about-contact-links > a:not(.btn) { display:inline-flex; align-items:center; gap:6px; color:var(--color-field-dark); font-size:.83rem; font-weight:700; text-decoration:none; }
.about-contact-links > a:not(.btn):hover { text-decoration:underline; }
.about-legal-note { margin:20px 0 0; color:var(--color-ink-muted); font-size:.82rem; line-height:1.6; }
.about-legal-note a { color:var(--color-field-dark); }
@media (max-width:760px) {
    .about-hero { padding:54px 0; }
    .about-hero p { font-size:1rem; }
    .referee-search-card { padding:22px 18px; }
    .referee-search-controls { grid-template-columns:1fr; gap:10px; }
    .about-content { padding-top:32px; }
    .about-intro { grid-template-columns:1fr; gap:12px; }
    .about-feature-grid { grid-template-columns:1fr; }
    .about-feature { min-height:0; }
    .about-contact { grid-template-columns:auto 1fr; gap:14px; padding:18px; }
    .about-contact-links { grid-column:1 / -1; width:100%; }
    .about-contact-links .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-floating-panel, .home-quick-action { animation: none; transition: none; }
}

/* Games catalogue refresh: give the calendar its own hierarchy while keeping
   the existing filters, tabs and grid behaviour intact. */
.games-page-shell .filters {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}
.games-page-shell .filters-fields { gap: 10px; }
.games-page-shell .filters input,
.games-page-shell .filters select {
    min-height: 44px;
    border-radius: 11px;
}
.games-page-shell .game-grid { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.games-page-shell .game-card { min-height: 205px; padding: 20px; }
.games-page-shell .game-card .game-time { color: var(--color-ink); }
.games-page-shell .game-card .card-icon-row { display:flex; align-items:center; gap:8px; }
.games-page-shell .game-card .card-icon-row svg { width:15px; height:15px; flex-shrink:0; }
.games-page-shell .sport-badge { white-space: nowrap; }
.games-page-shell .tabs a { padding: 12px 14px; }
.games-page-shell .empty-state { padding: 52px 24px; border-radius: 18px; }
[data-theme="dark"] .games-page-shell .games-heading p { color: var(--color-ink-muted); }
@media (max-width: 760px) {
    .games-page-shell { padding-top: 22px; }
    .games-heading { align-items:flex-start; flex-direction:column; gap:18px; margin-bottom:22px; }
    .games-heading-action { width:100%; justify-content:center; }
    .games-page-shell .tabs { overflow-x:auto; scrollbar-width:none; }
    .games-page-shell .tabs::-webkit-scrollbar { display:none; }
    .games-page-shell .tabs a { flex:0 0 auto; }
    .games-page-shell .game-grid { grid-template-columns: 1fr; }
}

/* Match creation and room: both surfaces use the same calm, task-first
   composition instead of a stack of unrelated default cards. */
.game-create-shell {
    width: min(100% - 32px, 760px);
    padding-top: 34px;
    padding-bottom: 60px;
}
.game-create-heading { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.game-create-heading .page-title { margin:4px 0 0; }
.game-create-back {
    display:grid; place-items:center; width:42px; height:42px; flex-shrink:0;
    color:var(--color-ink-muted); border:1px solid var(--color-border);
    border-radius:13px; background:var(--color-card); text-decoration:none;
}
.game-create-back:hover { color:var(--color-field); border-color:var(--color-field); }
.game-create-intro { margin:0 0 24px 56px; max-width:560px; line-height:1.6; }
.game-create-card { padding:26px; border-radius:22px; box-shadow:var(--shadow-floating); }
.game-create-card .wizard-steps { margin-bottom:26px; }
.game-create-card .form-group { margin-bottom:20px; }
.game-create-card input,
.game-create-card select,
.game-create-card textarea { border-radius:12px; }
.game-create-card .sport-picker { gap:10px; }
.game-create-card .sport-picker-tile { border-radius:14px; min-height:78px; }
.game-create-card .form-error { border-radius:11px !important; }

/* ============================================================
   Дизайн визарда создания матча — заголовки шагов, секции, карточки
   ============================================================ */

/* Заголовок шага внутри карточки */
.wizard-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border-light);
}
.wizard-step-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--color-field-ultra-light);
    color: var(--color-field);
    font-weight: 800;
    font-size: 1.05rem;
    font-family: var(--font-display);
}
.wizard-step-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}
.wizard-step-desc {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
}

/* Визуальные секции внутри шага */
.form-section {
    padding: 18px 0;
    border-top: 1px solid var(--color-border-light);
}
.form-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.form-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-field);
}
.form-section-label svg { color: var(--color-field); }

/* Сетка для парных полей (длительность, формат) */
.duration-grid {
    display: flex;
    gap: 12px;
}
.duration-grid > div,
.duration-grid > .form-group { flex: 1; }

/* Предупреждение о позднем создании матча */
.wizard-warning {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-warning-bg);
    border: 1px solid rgba(242, 168, 60, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-ink);
}
.wizard-warning svg { color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }

/* Общая ошибка формы */
.game-create-form-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-danger-bg);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: var(--color-danger);
}
.game-create-form-error svg { flex-shrink: 0; }

/* Option-карточки для чекбоксов */
.option-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-raised);
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    transition: all var(--transition-base);
}
.option-card:hover {
    border-color: var(--color-field-light);
    background: var(--color-field-ultra-light);
}
.option-card input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--color-field);
    cursor: pointer;
    flex-shrink: 0;
}
.option-card-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 !important;
    cursor: pointer;
}
.option-card-label strong {
    font-size: 0.95rem;
    color: var(--color-ink);
}
.option-card-label span {
    font-size: 0.82rem;
    color: var(--color-ink-muted);
    font-weight: 400;
}
.option-card-label a { color: var(--color-field); }

/* Карточка статуса оплаты на шаге 4 */
.payment-status-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: var(--color-field-ultra-light);
    border: 1px solid var(--color-field-light);
}
.payment-status-card--paid {
    background: var(--color-warning-bg);
    border-color: rgba(242, 168, 60, 0.25);
    flex-direction: column;
}
.payment-status-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
}
.payment-status-icon--free {
    background: var(--color-field-light);
    color: var(--color-field);
}
.payment-status-icon--paid {
    background: rgba(242, 168, 60, 0.15);
    color: var(--color-whistle-dark);
}
.payment-status-body {
    flex: 1;
    min-width: 0;
}
.payment-status-body strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}
.payment-status-body p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}
.payment-status-body a { color: var(--color-field); }
.payment-status-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(242, 168, 60, 0.2);
}

/* Строка ввода промокода */
.promo-input-row {
    display: flex;
    gap: 8px;
}
.promo-input-row input { flex: 1; }

/* Чеклист перед созданием */
.confirm-checklist {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.confirm-checklist-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 10px;
}
.confirm-checklist-title svg { color: var(--color-field); }
.confirm-checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.confirm-checklist-items li {
    position: relative;
    padding-left: 22px;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    line-height: 1.5;
}
.confirm-checklist-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-field);
}

/* Навигация визарда */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}

/* Плавный переход между шагами */
.wizard-step-enter {
    opacity: 0;
    transform: translateY(8px);
}
.wizard-step-enter-active {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.friendly-room-shell { padding-top:28px; padding-bottom:60px; }
.friendly-room-back { margin-bottom:18px; }
.friendly-room-back a {
    display:inline-flex; align-items:center; gap:5px; color:var(--color-field);
    font-weight:700; text-decoration:none;
}
.friendly-room-hero {
    position:relative; overflow:hidden; padding:30px 28px;
    border-radius:24px; background:linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
}
.friendly-room-hero::before {
    content:''; position:absolute; inset:0 0 auto; height:4px;
    background:var(--gradient-brand);
}
.friendly-room-hero > div:first-child { position:relative; }
.friendly-room-hero p { font-size:1rem; }
.friendly-room-hero a { color:var(--color-field); }
.friendly-room-hero form input { border-radius:11px; }
.friendly-room-status {
    border-radius:18px; padding:20px 22px;
    background:var(--color-card); box-shadow:var(--shadow-card);
}
.friendly-room-section-title { margin:30px 0 12px; }
.friendly-room-squads {
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px;
}
.friendly-room-squad {
    min-height:130px; padding:20px; border-radius:18px;
    background:var(--color-card);
}
.friendly-room-squad p:first-child { color:var(--color-ink); font-size:1rem; }
.friendly-room-referee {
    margin-bottom:24px; padding:20px; border-radius:18px;
    background:var(--color-card);
}
.friendly-room-referee .nav-menu-panel {
    border:1px solid var(--color-border); border-radius:14px;
    background:var(--color-card); box-shadow:var(--shadow-floating);
}
.modal-open { overflow:hidden; }
.friendly-referee-open,
.friendly-opponent-open { width:100%; justify-content:flex-start; text-align:left; }
.friendly-opponent-open { min-height:50px; padding:12px 16px; }
.friendly-opponent-open span { min-width:0; }
.friendly-opponent-selected {
    display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px 14px;
    border:1px solid var(--color-border); border-radius:15px;
    background:var(--color-bg-raised);
}
.friendly-opponent-selected-logo,
.friendly-opponent-result-logo {
    width:44px; height:44px; flex:0 0 44px; object-fit:cover;
    border:1px solid var(--color-border); border-radius:13px;
    background:var(--color-field-light);
}
.friendly-opponent-selected-copy,
.friendly-opponent-result-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:4px; }
.friendly-opponent-selected-name,
.friendly-opponent-result-copy strong { overflow-wrap:anywhere; font-weight:700; }
.friendly-opponent-selected-meta,
.friendly-opponent-result-copy small { margin:0; color:var(--color-ink-muted); font-size:.83rem; }
.friendly-opponent-modal-card,
.friendly-referee-modal-card {
    display:flex; flex-direction:column; width:min(100%, 540px); max-width:540px;
    max-height:min(760px, calc(100dvh - 32px));
    padding:clamp(20px, 4vw, 28px); overflow:hidden;
    border:1px solid var(--color-border); border-radius:22px;
}
.friendly-search-modal-header {
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    margin-bottom:10px;
}
.friendly-search-modal-header h2 {
    margin:0; color:var(--color-ink); font-size:clamp(1.2rem, 3vw, 1.5rem);
    letter-spacing:-.04em; line-height:1.2;
}
.friendly-search-modal-eyebrow {
    margin:0 0 6px; color:var(--color-field); font-size:.73rem;
    font-weight:750; letter-spacing:.09em; text-transform:uppercase;
}
.friendly-search-modal-description { margin:0 0 16px; line-height:1.5; }
.friendly-search-field {
    display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px;
    border:1px solid var(--color-border); border-radius:14px;
    background:var(--color-bg-raised); color:var(--color-ink-muted);
}
.friendly-search-field:focus-within {
    border-color:var(--color-field); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-field) 15%, transparent);
}
.friendly-search-field input {
    width:100%; min-width:0; padding:0; border:0; outline:0;
    background:transparent; color:var(--color-ink); box-shadow:none;
}
.friendly-search-field input:focus { outline:0; box-shadow:none; }
.friendly-search-modal-tip { margin:8px 2px 12px; font-size:.8rem; }
.friendly-search-results {
    display:grid; gap:8px; min-height:0; overflow-y:auto;
    overscroll-behavior:contain; padding:2px 3px 2px 1px;
}
.friendly-opponent-result,
.friendly-referee-result {
    display:flex; align-items:center; gap:12px; width:100%; min-height:68px;
    padding:11px 13px; border:1px solid var(--color-border); border-radius:15px;
    background:var(--color-card); color:var(--color-ink); font:inherit;
    text-align:left; cursor:pointer; transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.friendly-opponent-result:hover,
.friendly-referee-result:hover {
    transform:translateY(-1px); border-color:var(--color-field);
    background:var(--color-bg-raised);
}
.friendly-opponent-result > svg,
.friendly-referee-result > svg { flex:0 0 auto; color:var(--color-ink-muted); }
.friendly-referee-result-avatar {
    display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center;
    border-radius:50%; background:var(--color-field-light); color:var(--color-field);
    font-weight:750; font-size:1.05rem;
}
.friendly-referee-result-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:4px; }
.friendly-referee-result-copy strong { overflow-wrap:anywhere; }
.friendly-referee-result-copy small { color:var(--color-ink-muted); }
.friendly-search-empty {
    margin:18px 0 4px; padding:18px; border:1px dashed var(--color-border);
    border-radius:14px; color:var(--color-ink-muted); text-align:center;
}
@media (max-width:760px) {
    .game-create-shell { width:min(100% - 24px, 760px); padding-top:22px; }
    .game-create-card { padding:18px; }
    .game-create-intro { margin-left:0; }
    .friendly-room-shell { padding-top:20px; }
    .friendly-room-hero { padding:24px 16px; }
    .friendly-room-squads { grid-template-columns:1fr; }
    .friendly-opponent-modal-card,
    .friendly-referee-modal-card {
        width:100%; max-height:calc(100dvh - 24px); padding:19px;
        border-radius:19px;
    }
    .friendly-opponent-result,
    .friendly-referee-result { gap:10px; min-height:64px; padding:10px; }
}

/* ============================================================
   Страница "Мои игры" — профильный сайдбар + горизонтальные табы
   ============================================================ */
.my-games-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.my-games-header .page-title { margin: 4px 0 0; }
.my-games-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-bottom: 8px;
    text-decoration: none;
    transition: color 0.15s ease;
}
.my-games-back:hover { color: var(--color-field); }

.my-games-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.my-games-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-decoration: none;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    transition: all 0.15s ease;
}
.my-games-tabs a:hover {
    color: var(--color-field);
    border-color: var(--color-field-light);
    background: var(--color-field-light);
}

/* Активный пункт сайдбара */
.my-games-page .team-sidebar a[href="/my-games"] {
    background: var(--color-field);
    color: #fff;
    font-weight: 600;
}

/* Карточки игр внутри секций — компактнее, чем на главной */
.my-games-page .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.my-games-page .game-card {
    padding: 14px;
    border-radius: 14px;
}
.my-games-page .game-card .game-time {
    font-size: 0.9rem;
    font-weight: 700;
}
.my-games-page .game-card .game-address {
    font-size: 0.82rem;
}
.my-games-pending-list { display:grid; gap:10px; margin-bottom:18px; }
.my-games-pending-list h3 { margin:0; font-size:.95rem; }
.my-games-pending-card {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px; border:1px solid var(--color-border); border-radius:14px;
    background:var(--color-bg-raised);
}
.my-games-pending-card > div { display:grid; justify-items:start; gap:5px; min-width:0; }
.my-games-pending-card strong { overflow-wrap:anywhere; }
.my-games-pending-card small { color:var(--color-ink-muted); }

/* PlusMate visual refresh: stronger hierarchy on the landing, player and team pages. */
.home-page .hero-full {
    min-height: min(680px, calc(100svh - 74px));
    margin-bottom: 0;
    background: #111b20;
}
.home-page .hero-full-media {
    background-position: center 42%;
    filter: saturate(.82);
}
.home-page .hero-full-scrim {
    background:
        linear-gradient(90deg, rgba(10, 21, 25, .94) 0%, rgba(10, 21, 25, .78) 42%, rgba(10, 21, 25, .2) 100%),
        linear-gradient(0deg, rgba(7, 18, 21, .42), transparent 62%);
}
.home-page .hero-full-content,
[data-theme="dark"] .home-page .hero-full-content { color:#fff; }
.home-page .hero-full-content h1 { color:#fff; font-size:clamp(2.8rem, 6.2vw, 5.1rem); }
.home-page .hero-h1-accent {
    background:linear-gradient(100deg, #abf2c9 0%, #49d58d 90%);
    -webkit-background-clip:text;
    background-clip:text;
}
.home-page .hero-eyebrow {
    color:#b8f4d0;
    border:1px solid rgba(184,244,208,.2);
    background:rgba(25,70,52,.48);
}
.home-page .hero-full-content p.hero-sub { max-width:500px; color:rgba(255,255,255,.78); font-size:1.08rem; }
.home-page .hero-cta-row { gap:12px; }
.home-page .hero-cta-row .btn-secondary {
    color:#fff !important;
    border:1px solid rgba(255,255,255,.34);
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(10px);
}
.home-page .hero-cta-row .btn-secondary:hover { background:rgba(255,255,255,.17); }
.home-page .hero-floating-panel {
    border-color:rgba(255,255,255,.16);
    border-radius:20px;
    background:rgba(14,29,32,.72);
    box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.home-page .home-shell { padding-bottom:72px; }
.home-page .home-quick-actions { margin-top:-34px; margin-bottom:68px; }
.home-page .home-quick-action {
    min-height:82px;
    padding:18px;
    border-radius:18px;
    box-shadow:0 16px 40px rgba(16,24,40,.11);
}
.home-page .home-quick-action-primary { border-color:rgba(11,191,106,.42); }
.home-page .home-quick-action-primary .home-quick-icon { background:var(--color-field); }
.home-page .home-section { margin-top:58px; }
.home-page .home-section-heading .section-title { font-size:clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing:-.045em; }
.home-page .home-game-card,
.home-page .home-step,
.home-page .home-news-card { border-radius:18px; }
.home-page .home-game-card {
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-card);
    transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.home-page .home-game-card:hover {
    transform:translateY(-4px);
    border-color:rgba(11,191,106,.4);
    box-shadow:var(--shadow-hover);
}
.home-page .home-final-cta {
    padding:clamp(30px, 5vw, 58px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:
        radial-gradient(ellipse at 92% 4%, rgba(92,226,157,.24), transparent 38%),
        linear-gradient(130deg, #102c25, #174b38 68%, #1b6548);
    box-shadow:0 24px 60px rgba(13,50,34,.18);
}
[data-theme="dark"] .home-page .home-final-cta { background:linear-gradient(130deg, #10251e, #153e2d 68%, #174c34); }

.profile-page .profile-identity-card {
    min-height:176px;
    padding:28px;
    border-color:rgba(11,191,106,.2);
    background:
        radial-gradient(ellipse at 95% 0%, rgba(11,191,106,.10), transparent 42%),
        linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
}
.profile-page .profile-identity-card::before { height:3px; background:linear-gradient(90deg, var(--color-field), rgba(11,191,106,.12)); }
.profile-page .profile-avatar { width:92px; height:92px; flex-basis:92px; }
.profile-page .profile-avatar-placeholder { font-size:2.1rem; }
.profile-page .profile-stats-grid { gap:12px; }
.profile-page .profile-stats-grid .stat-tile {
    min-height:112px;
    padding:20px;
    border-radius:18px;
    transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.profile-page .profile-stats-grid .stat-tile:hover {
    transform:translateY(-3px);
    border-color:rgba(11,191,106,.35);
    box-shadow:var(--shadow-hover);
}
.profile-page .profile-stats-grid .stat-tile > i { width:20px; height:20px; }
.profile-page .profile-stats-grid .stat-tile-label { color:var(--color-ink-muted); font-size:.8rem; }
.profile-page .profile-section-card { border-radius:20px; }
.profile-page .profile-anchor-heading { align-items:center; }
.profile-page .profile-anchor-heading h2 { font-size:1.35rem; }

.team-page .team-dashboard-hero {
    position:relative;
    border:1px solid rgba(11,191,106,.2);
    background:
        radial-gradient(ellipse at 90% 0%, rgba(11,191,106,.12), transparent 42%),
        var(--color-card);
}
.team-page .team-dashboard-hero::before {
    content:"";
    display:block;
    height:8px;
    background:linear-gradient(90deg, var(--color-field-dark), var(--color-field), rgba(11,191,106,.18));
}
.team-page .team-dashboard-identity { padding-top:28px !important; padding-bottom:24px !important; }
.team-page .team-hero-logo {
    width:96px;
    height:96px;
    border-radius:22px;
    border-width:5px;
    box-shadow:0 12px 28px rgba(16,24,40,.14);
}
.team-page .team-dashboard-identity .page-title { font-size:clamp(1.8rem, 3.5vw, 2.65rem); }
.team-page .team-hero-stats {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 24px 22px;
    border-top:0;
}
.team-page .team-hero-stats > div {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:170px;
    padding:12px 14px;
    border:1px solid var(--color-border);
    border-radius:12px;
    background:var(--color-bg-raised);
}
.team-page .team-hero-stats > div > span:first-child { font-size:1.05rem; font-weight:750; }
.team-page .team-hero-stats .form-hint { margin:0; }
.team-page .team-dashboard-stat-card { border:1px solid var(--color-border); }
.team-page .team-dashboard-section-heading { margin-bottom:12px !important; }
.team-page .team-dashboard-section .card,
.team-page .team-dashboard-stat-card,
.team-page > .container > .team-layout > .team-sidebar { border-radius:18px; }
.team-page .team-dashboard-stat-card { display:grid; gap:16px; }
.team-page .team-dashboard-records {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    min-width:0;
}
.team-page .team-dashboard-record {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    min-height:78px;
    gap:4px;
    padding:12px 14px;
    border:1px solid var(--color-border);
    border-radius:13px;
    background:var(--color-bg-raised);
}
.team-page .team-dashboard-record-number {
    color:var(--color-ink);
    font-family:var(--font-score);
    font-size:1.55rem;
    font-variant-numeric:tabular-nums;
    font-weight:800;
    line-height:1;
}
.team-page .team-dashboard-record-win { color:var(--color-success); }
.team-page .team-dashboard-record-loss { color:var(--color-danger); }
.team-page .team-dashboard-record-label {
    color:var(--color-ink-muted);
    font-size:.78rem;
    line-height:1.3;
    overflow-wrap:anywhere;
}
.team-page .team-dashboard-summary-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    padding-top:2px;
}
.team-page .team-dashboard-summary-links a {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--color-field-dark);
    font-size:.84rem;
    font-weight:700;
}
.team-page .team-dashboard-form {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
    padding-top:13px;
    border-top:1px solid var(--color-border);
}
.team-page .team-dashboard-form-label { color:var(--color-ink-muted); font-size:.82rem; font-weight:650; }
.team-page .team-dashboard-form-results { display:flex; flex-wrap:wrap; gap:6px; }
.team-page .team-dashboard-form-result {
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:4px 9px;
    border:1px solid var(--color-border);
    border-radius:999px;
    font-size:.72rem;
    font-weight:750;
    line-height:1.2;
}
.team-page .team-dashboard-form-result.is-win { color:var(--color-success); background:var(--color-success-bg); border-color:rgba(11,191,106,.22); }
.team-page .team-dashboard-form-result.is-draw { color:var(--color-ink-muted); background:var(--color-bg-raised); }
.team-page .team-dashboard-form-result.is-loss { color:var(--color-danger); background:var(--color-danger-bg); border-color:rgba(196,67,43,.2); }
.team-page .team-dashboard-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px !important;
}
.team-page .team-dashboard-section-heading h2 { min-width:0; }
.team-page .team-dashboard-section-heading a { flex:0 0 auto; }
.team-page .team-announcement-highlight h3 { min-width:0; overflow-wrap:anywhere; }
.team-page .team-announcement-highlight > div:first-child { flex-wrap:wrap; }
.team-page .team-announcement-highlight p { overflow-wrap:anywhere; }
.team-page .team-upcoming-card { margin-bottom:10px !important; }
.team-page .team-upcoming-link {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    color:inherit;
    text-decoration:none;
}
.team-page .team-upcoming-copy { min-width:0; }
.team-page .team-upcoming-copy h3 { overflow-wrap:anywhere; }
.team-page .team-upcoming-card h3 { overflow-wrap:anywhere; }
.team-create-page > .container {
    width:min(100% - 32px, 680px);
    padding-top:32px;
    padding-bottom:56px;
}
.team-create-page > .container > .page-title {
    margin:0 0 10px;
    font-size:clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing:-.05em;
}
.team-create-page > .container > form.card {
    padding:clamp(18px, 3vw, 28px);
    border:1px solid var(--color-border);
    border-radius:20px;
    box-shadow:var(--shadow-floating);
}
.team-create-page .form-group { margin-bottom:20px; }
.team-create-page input,
.team-create-page select,
.team-create-page textarea { border-radius:11px; }
.team-invite-page > .container {
    width:min(100% - 32px, 560px);
    padding-top:48px;
    padding-bottom:56px;
}
.team-invite-page > .container > .card {
    padding:clamp(20px, 4vw, 30px);
    border:1px solid var(--color-border);
    border-radius:20px;
    box-shadow:var(--shadow-floating);
}
.team-invite-page > .container > .page-title { margin-bottom:18px; letter-spacing:-.04em; }
.team-invite-page > .container > .card > div { margin-top:20px; }
.team-invite-page form .btn { width:100%; justify-content:center; }
@media (max-width:880px) {
    .home-page .hero-full { min-height:540px; }
    .home-page .hero-full-scrim {
        background:linear-gradient(90deg, rgba(10,21,25,.9), rgba(10,21,25,.57)),
                   linear-gradient(0deg, rgba(7,18,21,.42), transparent 70%);
    }
}
@media (max-width:760px) {
    .home-page .hero-full { min-height:520px; min-height:min(600px, calc(100svh - 64px)); }
    .home-page .hero-full-content { padding:58px 0 72px; }
    .home-page .hero-full-content h1 { font-size:clamp(2.55rem, 12vw, 3.8rem); }
    .home-page .hero-full-content p.hero-sub { font-size:.98rem; }
    .home-page .hero-cta-row { align-items:stretch; flex-direction:column; max-width:360px; }
    .home-page .hero-cta-row .btn { justify-content:center; }
    .home-page .home-quick-actions { margin-top:-26px; margin-bottom:46px; }
    .home-page .home-quick-action { min-height:72px; }
    .home-page .home-section { margin-top:42px; }
    .home-page .home-final-cta { border-radius:22px; }
    .profile-page .profile-identity-card {
        display:grid;
        grid-template-columns:76px minmax(0, 1fr);
        align-items:center !important;
        gap:14px;
        padding:20px 16px;
    }
    .profile-page .profile-avatar { width:76px; height:76px; flex-basis:76px; }
    .profile-page .profile-identity-copy { grid-column:2; }
    .profile-page .profile-identity-card > .profile-avatar { grid-column:1; grid-row:1; }
    .profile-page .profile-identity-card > .profile-edit-action,
    .profile-page .profile-identity-card > .profile-report-action {
        grid-column:1 / -1;
        width:100%;
        justify-content:center;
    }
    .profile-page .profile-stats-grid .stat-tile { min-height:88px; padding:14px 12px; }
    .profile-page .profile-stats-grid .stat-tile-value { font-size:1.25rem; }
    .team-page .team-dashboard-identity { align-items:center !important; padding-top:20px !important; }
    .team-page .team-hero-logo { width:76px; height:76px; border-radius:18px; }
    .team-page .team-hero-stats {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        padding:0 18px 18px;
    }
    .team-page .team-hero-stats > div {
        min-width:0;
        margin:0;
        padding:10px;
    }
    .team-page .team-hero-stats > div > span:first-child { font-size:1.05rem; }
    .team-page .team-dashboard-identity > div { width:100%; }
    .team-page .team-dashboard-identity > div > div:first-child { align-items:flex-start !important; flex-direction:column; }
    .team-page .team-dashboard-identity > div > div:first-child > div { width:100%; flex-wrap:wrap; }
    .team-page .team-dashboard-identity > div > div:first-child .btn-small { flex:1; justify-content:center; }
    .team-page .team-sidebar {
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:6px;
    }
    .team-page .team-sidebar a { min-width:0; min-height:42px; padding:9px; font-size:.8rem; }
    .team-page .team-dashboard-records { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .team-page .team-dashboard-record { min-height:70px; padding:10px 12px; }
    .team-page .team-dashboard-summary-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .team-page .team-dashboard-summary-links a { min-width:0; font-size:.79rem; }
    .team-page .team-dashboard-form { align-items:flex-start; flex-direction:column; }
    .team-page .team-dashboard-section-heading { align-items:flex-start !important; flex-wrap:wrap; }
    .team-page .team-dashboard-section-heading h2 { font-size:1rem !important; }
    .team-page .team-dashboard-section-heading a { white-space:normal; text-align:right; }
    .team-page .team-upcoming-link { flex-direction:column; }
    .team-create-page > .container { width:min(100% - 24px, 680px); padding-top:22px; }
    .team-create-page > .container > form.card { padding:18px; border-radius:17px; }
    .team-invite-page > .container { padding-top:24px; }
}
@media (prefers-reduced-motion:reduce) {
    .home-page .home-game-card,
    .profile-page .profile-stats-grid .stat-tile { transition:none; }
}

/* Shared navigation and core player flows. */
.site-header {
    background:color-mix(in srgb, var(--color-card) 90%, transparent);
    border-bottom-color:color-mix(in srgb, var(--color-border) 82%, transparent);
    box-shadow:0 6px 24px rgba(16,24,40,.045);
}
.header-inner { gap:clamp(12px, 2vw, 28px); }
.logo { font-size:1.12rem; }
.nav-links { gap:4px; }
.nav-links a:not(.btn-small):not(.btn) {
    padding:9px 12px;
    border-radius:999px;
    font-size:.84rem;
}
.nav-links .nav-create-trigger { border-radius:999px; }
.quick-actions { gap:4px !important; }
.quick-actions .nav-menu > button,
.quick-actions .theme-toggle {
    border:1px solid transparent;
    border-radius:12px;
    transition:background var(--transition-fast), border-color var(--transition-fast);
}
.quick-actions .nav-menu > button:hover,
.quick-actions .theme-toggle:hover {
    border-color:var(--color-border);
    background:var(--color-bg-raised);
}
.nav-menu-panel {
    border-radius:16px;
    border-color:var(--color-border);
    box-shadow:var(--shadow-floating);
}
.mobile-bottom-nav {
    border-top-color:color-mix(in srgb, var(--color-border) 86%, transparent);
    box-shadow:0 -10px 28px rgba(16,24,40,.09);
}
.mobile-bottom-nav > a[aria-current="page"] { position:relative; }
.mobile-bottom-nav > a[aria-current="page"]:not(.mobile-bottom-nav-create)::before {
    content:"";
    position:absolute;
    top:1px;
    width:20px;
    height:3px;
    border-radius:999px;
    background:var(--color-field);
}

.games-page .games-page-shell { padding-top:40px; }
.games-page .games-heading {
    padding:clamp(22px, 4vw, 36px);
    border:1px solid var(--color-border);
    border-radius:24px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(11,191,106,.1), transparent 42%),
        linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
    box-shadow:var(--shadow-card);
}
.games-page .games-heading h1 { font-size:clamp(1.9rem, 4vw, 2.7rem); letter-spacing:-.055em; }
.games-page .games-heading-action {
    min-height:46px;
    padding:12px 18px;
    border-radius:13px;
    background:var(--color-field);
    color:#fff;
    font-weight:750;
    box-shadow:0 8px 20px rgba(11,191,106,.2);
}
.games-page .games-content-tabs {
    gap:6px;
    padding:5px;
    border:1px solid var(--color-border);
    border-radius:14px;
    background:var(--color-bg-raised);
}
.games-page .games-content-tabs a {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:9px 16px;
    border:0;
    border-radius:10px;
    font-size:.87rem;
}
.games-page .games-content-tabs a.active {
    color:var(--color-ink);
    background:var(--color-card);
    box-shadow:var(--shadow-xs);
}
.games-page .filters {
    border-radius:18px;
    box-shadow:var(--shadow-card);
}
.games-page .game-card {
    border-radius:18px;
    transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.games-page .game-card:hover {
    transform:translateY(-3px);
    border-color:rgba(11,191,106,.38);
    box-shadow:var(--shadow-hover);
}

.my-games-page .my-games-header {
    margin-bottom:18px;
    padding:22px 24px;
    border:1px solid var(--color-border);
    border-radius:20px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(11,191,106,.1), transparent 42%),
        var(--color-card);
}
.my-games-page .my-games-header .page-title { font-size:clamp(1.8rem, 3.5vw, 2.4rem); letter-spacing:-.05em; }
.my-games-page .my-games-header .eyebrow { margin-bottom:0; }
.my-games-page .my-games-back { font-weight:650; }
.my-games-page .my-games-tabs {
    gap:8px;
    border-bottom:0;
}
.my-games-page .my-games-tabs a {
    min-height:42px;
    padding:9px 14px;
    border-radius:12px;
    background:var(--color-card);
    transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.my-games-page .my-games-tabs a:hover { background:var(--color-field-light); }
.my-games-page .profile-section-card { border-radius:20px; }
.my-games-page .game-card {
    border:1px solid var(--color-border);
    border-radius:16px;
    transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.my-games-page .game-card:hover { transform:translateY(-3px); border-color:rgba(11,191,106,.38); box-shadow:var(--shadow-hover); }

@media (max-width:768px) {
    .site-header { box-shadow:0 4px 18px rgba(16,24,40,.06); }
    .header-inner { gap:6px; }
    .logo { font-size:1rem; }
    .nav-links {
        border:1px solid var(--color-border);
        border-top:0;
        border-radius:0 0 18px 18px;
        box-shadow:var(--shadow-floating);
    }
    .nav-links a:not(.btn-small):not(.btn) { border-radius:11px; }
    .quick-actions .nav-menu > button,
    .quick-actions .theme-toggle { padding:7px; }
    .games-page .games-page-shell { padding-top:20px; }
    .games-page .games-heading { padding:20px 18px; border-radius:18px; }
    .games-page .games-content-tabs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
    .games-page .games-content-tabs a { padding:8px 10px; }
    .my-games-page .my-games-header { padding:18px 16px; border-radius:17px; }
    .my-games-page .my-games-tabs { gap:7px; }
    .my-games-page .my-games-tabs a { min-height:46px; padding:8px 9px; font-size:.79rem; }
}
@media (prefers-reduced-motion:reduce) {
    .games-page .game-card,
    .my-games-page .game-card { transition:none; }
}

.tournament-catalog-page > .container {
    max-width:1320px;
    padding-top:36px;
    padding-bottom:64px;
}
.tournament-catalog-page > .container > .page-title {
    margin:0 0 22px;
    padding:28px 30px;
    border:1px solid var(--color-border);
    border-radius:22px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(11,191,106,.12), transparent 44%),
        linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
    box-shadow:var(--shadow-card);
    font-size:clamp(1.9rem, 4vw, 2.65rem);
    letter-spacing:-.055em;
}
.tournament-catalog-page .filters {
    position:static;
    margin:20px 0 24px;
    padding:16px;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:var(--color-card);
    box-shadow:var(--shadow-card);
}
.tournament-catalog-page .filters-fields { gap:10px; }
.tournament-catalog-page .filters-fields > div:first-child { gap:7px !important; }
.tournament-catalog-page .filters-fields form { align-items:center; }
.tournament-catalog-page .filters-fields input,
.tournament-catalog-page .filters-fields select { min-height:42px; border-radius:11px; }
.tournament-catalog-page .game-grid { grid-template-columns:repeat(auto-fill, minmax(285px, 1fr)); gap:16px; }
.tournament-catalog-page .team-catalog-card {
    min-height:232px;
    padding:20px;
    border:1px solid var(--color-border);
    border-radius:20px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(11,191,106,.055), transparent 46%),
        var(--color-card);
    box-shadow:var(--shadow-card);
    transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.tournament-catalog-page .team-catalog-card:hover {
    transform:translateY(-4px);
    border-color:rgba(11,191,106,.4);
    box-shadow:var(--shadow-hover);
}
.tournament-catalog-page .team-catalog-logo-placeholder {
    color:var(--color-field-dark);
    background:var(--color-field-light);
    border-radius:16px;
}
.tournament-catalog-page .team-catalog-name { min-width:0; }
.tournament-catalog-page .team-catalog-name .game-time {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-height:1.3;
}
.tournament-catalog-page .team-catalog-tags { margin-bottom:14px; }
.tournament-catalog-page .team-catalog-open { margin-top:auto; font-weight:700; }
.tournament-catalog-page .empty-state { border-radius:20px; }

.tournament-overview-page .tournament-workspace-shell { padding-top:26px; padding-bottom:60px; }
.tournament-overview-page .tournament-hero-card {
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:28px !important;
    border:1px solid rgba(255,255,255,.14);
    border-radius:22px;
    color:#fff;
    background:linear-gradient(135deg, #155c38 0%, #103d2b 100%);
    box-shadow:var(--shadow-floating);
}
.tournament-overview-page .tournament-hero-card .page-title,
.tournament-overview-page .tournament-hero-organizer,
.tournament-overview-page .tournament-hero-organizer a {
    color:#fff;
}
.tournament-overview-page .tournament-hero-organizer { color:rgba(255,255,255,.78); }
.tournament-overview-page .tournament-hero-organizer a { font-weight:700; }
.tournament-overview-page .tournament-hero-card .badge,
.tournament-overview-page .tournament-hero-card .sport-badge {
    color:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.12);
    box-shadow:none;
}
.tournament-overview-page .tournament-hero-card .page-title {
    flex-basis:100%;
    margin:8px 0 0 !important;
    font-size:clamp(1.8rem, 4vw, 2.7rem);
    letter-spacing:-.055em;
    overflow-wrap:anywhere;
}
.tournament-overview-page .tournament-hero-organizer {
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    margin:8px 0 0;
    color:rgba(255,255,255,.8);
    font-size:.88rem;
}
.tournament-overview-page .tournament-hero-organizer img {
    width:28px;
    height:28px;
    border-radius:50%;
    object-fit:cover;
}
.tournament-overview-page .tournament-info-grid { gap:12px; }
.tournament-overview-page .tournament-info-card {
    min-height:128px;
    padding:20px;
    border:1px solid var(--color-border);
    border-radius:17px;
    background:var(--color-card);
    box-shadow:var(--shadow-card);
}
.tournament-overview-page .tournament-info-value { margin-top:8px; font-size:1.23rem; letter-spacing:-.025em; }
.tournament-overview-page .tournament-info-card p { line-height:1.45; }
.tournament-overview-page .team-sidebar { border-radius:18px; }
.tournament-overview-page .team-content > .card {
    padding:20px;
    border-radius:18px;
    box-shadow:var(--shadow-card);
}
.tournament-overview-page .participant-row { min-height:48px; }
.tournament-overview-page .participant-row a { font-weight:650; }

.match-details-page .match-details-shell { max-width:1100px; padding-top:28px; padding-bottom:64px; }
.match-details-page .match-details-shell > .btn-small { min-height:38px; border-radius:11px; }
.match-details-page .match-tabs {
    gap:6px;
    padding:5px;
    border:1px solid var(--color-border);
    border-radius:14px;
    background:var(--color-bg-raised);
}
.match-details-page .match-tabs button {
    min-height:40px;
    margin:0;
    padding:9px 15px;
    border:0;
    border-radius:10px;
}
.match-details-page .match-tabs button.active {
    color:var(--color-ink);
    background:var(--color-card);
    box-shadow:var(--shadow-xs);
}
.match-details-page .score-board {
    position:relative;
    gap:clamp(12px, 3vw, 30px);
    min-height:188px;
    margin:16px 0 20px;
    padding:32px 24px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(67,216,141,.16), transparent 54%),
        var(--color-scoreboard-bg);
    box-shadow:0 20px 42px rgba(10,20,30,.2);
}
.match-details-page .score-board .team-name { max-width:34%; font-size:clamp(.92rem, 2vw, 1.15rem); line-height:1.3; }
.match-details-page .score-board .score { font-size:clamp(2.4rem, 6vw, 3.6rem); }
.match-details-page .match-tab-content > .card,
.match-details-page #match-tab-match > .card { border-radius:18px; box-shadow:var(--shadow-card); }
.match-details-page .info-row { flex-wrap:wrap; }

@media (max-width:760px) {
    .tournament-catalog-page > .container { padding-top:20px; padding-bottom:48px; }
    .tournament-catalog-page > .container > .page-title { padding:20px 18px; border-radius:18px; }
    .tournament-catalog-page .filters { padding:12px; }
    .tournament-catalog-page .filters-fields { align-items:stretch; flex-direction:column; }
    .tournament-catalog-page .filters-fields > div:first-child { display:grid; grid-template-columns:1fr; }
    .tournament-catalog-page .filters-fields form { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .tournament-catalog-page .filters-fields form input[type="search"] { grid-column:1 / -1; min-width:0 !important; }
    .tournament-catalog-page .filters-fields form button { min-height:42px; }
    .tournament-catalog-page .game-grid { grid-template-columns:1fr; }
    .tournament-overview-page .tournament-workspace-shell { padding-top:16px; }
    .tournament-overview-page .tournament-hero-card { padding:22px 18px !important; border-radius:18px; }
    .tournament-overview-page .tournament-info-grid { grid-template-columns:1fr; }
    .tournament-overview-page .tournament-info-card { min-height:0; }
    .tournament-overview-page .team-content > .card { padding:16px; }
    .match-details-page .match-details-shell { padding-top:18px; }
    .match-details-page .match-tabs { overflow-x:auto; }
    .match-details-page .match-tabs button { flex:0 0 auto; padding:9px 11px; font-size:.82rem; }
    .match-details-page .score-board { min-height:144px; padding:22px 12px; gap:8px; border-radius:18px; }
    .match-details-page .score-board .team-name { max-width:30%; overflow-wrap:anywhere; font-size:.8rem; }
    .match-details-page .score-board .score { font-size:2rem; }
    .match-details-page .score-board .vs { font-size:.85rem; }
}
@media (prefers-reduced-motion:reduce) {
    .tournament-catalog-page .team-catalog-card { transition:none; }
}

@media (max-width: 760px) {
    .my-games-header { flex-direction: column; }
    .my-games-tabs {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        padding-bottom:14px;
    }
    .my-games-tabs a {
        min-height:42px;
        justify-content:center;
        padding:8px 10px;
        text-align:center;
        white-space:normal;
    }
    .my-games-page .game-grid { grid-template-columns: 1fr; }
    .my-games-pending-card { align-items:flex-start; flex-direction:column; }
    .my-games-pending-card .btn-small { width:100%; justify-content:center; }
}

/* Адаптивность визарда создания матча */
@media (max-width: 760px) {
    .wizard-step-header { gap: 10px; margin-bottom: 18px; }
    .wizard-step-num { width: 32px; height: 32px; font-size: 0.95rem; }
    .wizard-step-title { font-size: 1.05rem; }
    .wizard-step-desc { font-size: 0.8rem; }
    .form-section { padding: 14px 0; }
    .duration-grid { flex-direction: column; gap: 0; }
    .payment-status-card { flex-direction: column; gap: 12px; padding: 16px; }
    .payment-status-card--paid { flex-direction: column; }
    .payment-status-icon { width: 40px; height: 40px; }
    .wizard-nav { flex-wrap: wrap; }
    .wizard-nav .btn { flex: 1; min-width: 120px; justify-content: center; }
    .promo-input-row { flex-direction: column; }
    .confirm-checklist { padding: 14px 16px; }
    .option-card { padding: 14px; }
}

/* Discovery and creation flows refresh. */
.teams-catalog-page .teams-catalog-heading {
    position:relative;
    align-items:center;
    padding:clamp(22px, 4vw, 34px);
    border:1px solid var(--color-border);
    border-radius:22px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(11,191,106,.12), transparent 42%),
        linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
    box-shadow:var(--shadow-card);
}
.teams-catalog-page .teams-catalog-heading .page-title {
    margin:5px 0 8px;
    font-size:clamp(1.9rem, 4vw, 2.65rem);
    letter-spacing:-.055em;
}
.teams-catalog-page .teams-catalog-create {
    min-height:46px;
    padding:12px 18px;
    border-radius:13px;
    background:var(--color-field);
    color:#fff;
    font-weight:750;
    box-shadow:0 8px 20px rgba(11,191,106,.2);
}
.teams-catalog-page .teams-catalog-filters { border-radius:18px; box-shadow:var(--shadow-card); }
.teams-catalog-page .teams-search-field,
.teams-catalog-page .teams-catalog-filters select { min-height:46px; border-radius:12px; }
.teams-catalog-page .teams-catalog-grid { gap:16px; }
.teams-catalog-page .team-catalog-card {
    min-height:222px;
    border-radius:19px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(11,191,106,.06), transparent 46%),
        var(--color-card);
    box-shadow:var(--shadow-card);
    transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.teams-catalog-page .team-catalog-card:hover {
    transform:translateY(-4px);
    border-color:rgba(11,191,106,.4);
    box-shadow:var(--shadow-hover);
}
.teams-catalog-page .team-catalog-card.is-member { border-color:rgba(11,191,106,.42); }
.teams-catalog-page .team-catalog-logo { border-radius:16px; }
.teams-catalog-page .team-catalog-name .game-time { line-height:1.3; }
.teams-catalog-page .team-catalog-open { margin-top:auto; }

.game-create-page .game-create-shell { padding-top:30px; }
.game-create-page .game-create-heading { margin-bottom:8px; }
.game-create-page .game-create-intro { line-height:1.6; }
.coach-create-page .coach-training-wizard-steps { margin:22px 0 18px; }
.coach-create-page .coach-training-form { min-height:680px; }
.coach-create-page [x-cloak] { display:none !important; }
.coach-create-page .coach-training-form textarea { resize:vertical; }
.coach-create-page .coach-payment-acknowledgement { margin-top:18px; }
.coach-training-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
    padding:clamp(20px,3vw,30px);
    border:1px solid var(--color-border);
    border-radius:22px;
    background:var(--color-card);
    box-shadow:var(--shadow-floating);
}
.coach-training-heading > div { min-width:0; }
.coach-training-heading .eyebrow { margin:0 0 6px; }
.coach-training-heading .page-title { margin:0; }
.coach-training-heading .form-hint { margin:8px 0 0; line-height:1.55; }
.coach-training-heading > .btn { flex:none; }
.coach-training-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:18px; align-items:stretch; }
.coach-training-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.coach-training-detail-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.coach-training-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0; }
.coach-training-detail-grid > div { display:flex; align-items:flex-start; gap:11px; min-width:0; padding:14px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-card); }
.coach-training-detail-grid > div > svg { flex:none; width:19px; height:19px; color:var(--color-field); }
.coach-training-detail-grid > div > span { display:grid; gap:3px; min-width:0; }
.coach-training-detail-grid strong { font-size:.82rem; color:var(--color-ink-muted); }
.coach-training-detail-grid small { color:var(--color-ink); font-size:.95rem; line-height:1.45; overflow-wrap:anywhere; }
.coach-training-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--color-border-light); }
.coach-training-actions form { margin:0; }
.coach-training-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.coach-training-form-grid .form-group { min-width:0; }
.coach-training-payment-warning { margin-top:18px; padding:16px; border:1px solid var(--color-warning-border,var(--color-border)); border-radius:14px; background:var(--color-warning-bg,var(--color-field-ultra-light)); }
.coach-training-payment-warning p { margin:0 0 12px; line-height:1.55; }
.coach-training-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:26px; }
.coach-training-pagination a { color:var(--color-field-dark); font-weight:650; text-decoration:none; }
.coach-training-pagination span { color:var(--color-ink-muted); font-size:.9rem; }
.coach-training-review {
    padding:22px;
    margin:0 0 18px;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:linear-gradient(135deg, var(--color-card), var(--color-field-ultra-light));
}
.coach-training-review-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.coach-training-review h3 { margin:16px 0 6px; font-size:1.35rem; }
.coach-training-review > p { margin:0; color:var(--color-ink-muted); line-height:1.6; }
.coach-training-review-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.coach-training-review-facts span { display:flex; align-items:center; gap:8px; color:var(--color-ink-muted); }
.coach-training-review-facts svg { flex:none; color:var(--color-field); }
.coach-training-review-facts b { color:var(--color-ink); font-weight:600; }
.coach-training-review-amenities { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.coach-training-review-amenities span:not(:empty) { padding:6px 10px; border:1px solid var(--color-border); border-radius:999px; color:var(--color-ink-muted); font-size:.82rem; }
.coach-training-info-card { margin:20px 0; }
.coach-training-details-shell { max-width:980px; padding-top:32px; padding-bottom:56px; }
.coach-training-detail { padding:clamp(20px,4vw,36px); border-radius:24px; box-shadow:var(--shadow-floating); }
.coach-training-detail > .page-title { margin:16px 0 8px; line-height:1.15; }
.coach-training-summary { margin:0 0 22px; padding:16px 18px; border-left:4px solid var(--color-field); border-radius:0 12px 12px 0; background:var(--color-field-ultra-light); font-size:1.05rem; line-height:1.65; }
.coach-training-description-block { margin:18px 0 24px; padding:20px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-card); }
.coach-training-description-block h2 { display:flex; align-items:center; gap:9px; margin:0 0 10px; font-size:1.05rem; }
.coach-training-description-block h2 svg { color:var(--color-field); }
.coach-training-description { margin:0; white-space:pre-line; line-height:1.75; color:var(--color-ink-muted); }
.coach-roster-card { margin-top:20px; padding:clamp(18px,3vw,28px); border-radius:20px; }
.coach-roster-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.coach-roster-heading h2 { margin:2px 0 0; font-size:1.3rem; }
.coach-roster-heading .eyebrow { margin:0; }
.coach-roster-list { display:grid; gap:10px; }
.coach-participant-row { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:12px; align-items:center; padding:14px; border:1px solid var(--color-border); border-radius:15px; background:var(--color-card); }
.coach-participant-profile { display:flex; align-items:center; gap:11px; min-width:0; color:var(--color-ink); text-decoration:none; }
.coach-participant-profile > span:last-child { display:grid; min-width:0; }
.coach-participant-profile strong { overflow:hidden; text-overflow:ellipsis; }
.coach-participant-profile small { color:var(--color-ink-muted); }
.coach-participant-avatar { display:grid; width:40px; height:40px; flex:none; place-items:center; border-radius:50%; color:var(--color-field-dark); background:var(--color-field-ultra-light); font-weight:700; }
.coach-participant-statuses { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.coach-participant-management { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; border-top:1px solid var(--color-border-light); }
.coach-participant-management form { display:flex; margin:0; }
.coach-participant-management form:has(button.btn-danger) { margin-left:auto; padding-left:12px; border-left:1px solid var(--color-border); }
.coach-participant-management button:disabled { opacity:.55; cursor:not-allowed; }
.coach-roster-empty { padding:28px; }
.coach-training-card { display:flex; flex-direction:column; min-width:0; gap:8px; padding:20px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.coach-training-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-floating); }
.coach-training-card h2 { margin:6px 0 0; color:var(--color-ink); font-size:1.15rem; line-height:1.35; }
.coach-training-card-description { display:-webkit-box; min-height:3.2em; overflow:hidden; margin:0; color:var(--color-ink-muted); line-height:1.6; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.coach-training-card-meta { display:flex; flex-wrap:wrap; gap:10px 16px; color:var(--color-ink-muted); font-size:.88rem; }
.coach-training-card-meta > span { display:flex; align-items:center; gap:6px; }
.coach-training-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid var(--color-border-light); }
.coach-training-card-bottom strong { color:var(--color-field-dark); }
.coach-training-card-bottom > span { color:var(--color-ink-muted); font-size:.85rem; }
.coach-training-card-cta { display:flex; justify-content:space-between; align-items:center; color:var(--color-field-dark); font-size:.88rem; font-weight:650; }
.coach-catalog-page .games-heading { margin-bottom:22px; }
.coach-training-filters { margin-bottom:22px; }
.coach-training-filters .filters-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
.coach-training-grid .coach-training-card { min-height:250px; gap:10px; }
.coach-training-card .games-card-top { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.coach-training-card .games-card-title { display:block; margin-bottom:4px; font-size:1.06rem; font-weight:750; letter-spacing:-.025em; white-space:normal; line-height:1.35; }
.coach-training-card-description { min-height:0; margin:0 0 4px; }
.coach-training-card .games-card-meta { display:flex; flex-direction:column; gap:7px; flex:1; margin:0 0 12px; }
.coach-training-card .games-card-footer { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:auto; }
.coach-training-details-shell { max-width:1180px; padding-top:28px; }
.coach-training-hero {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,auto); align-items:center;
    gap:24px; margin:16px 0 20px; padding:clamp(22px,3.5vw,34px);
}
.coach-training-hero .page-title { margin:14px 0 8px; line-height:1.15; }
.coach-training-summary { max-width:720px; margin:0; padding:0; border:0; background:none; font-size:1.05rem; }
.coach-training-hero-price {
    display:grid; gap:4px; min-width:190px; padding:18px 20px;
    border:1px solid var(--color-border); border-radius:18px; background:var(--color-card);
}
.coach-training-hero-price > span,.coach-training-hero-price small { color:var(--color-ink-muted); font-size:.84rem; }
.coach-training-hero-price strong { color:var(--color-field-dark); font-size:1.55rem; letter-spacing:-.03em; }
.coach-training-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.coach-training-info-card { margin:0; padding:22px 26px; border-radius:20px; }
.coach-training-info-card > .game-details-section-title { display:flex; align-items:center; gap:9px; margin:0 0 10px; font-size:1.15rem; }
.coach-training-info-card > .game-details-section-title svg { color:var(--color-field); }
.coach-training-info-card .info-row { gap:12px; }
.coach-training-info-card .info-row { padding:12px 0; border-bottom:1px solid var(--color-border-light); }
.coach-training-info-card .info-row:last-of-type { border-bottom:0; }
.coach-training-info-card .info-row > svg:first-child { color:var(--color-field); flex:none; }
.coach-training-info-card .info-row .label { min-width:102px; }
.coach-training-info-card .info-row .game-detail-tags { gap:10px; margin-left:8px; }
.coach-training-info-card .info-row > span:last-of-type,
.coach-training-info-card .info-row > a:last-child { overflow-wrap:anywhere; }
.coach-training-team-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px;
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid var(--color-border);
    border-radius:14px;
    background:var(--color-bg-raised);
}
.coach-training-team-actions form:first-child {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}
.coach-training-team-actions label { color:var(--color-ink-muted); font-size:.88rem; font-weight:650; }
.coach-training-team-actions select { width:auto; min-width:130px; }
.coach-participant-team { margin-left:auto; }
.team-training-map-link {
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:8px;
    color:var(--color-field-dark);
    font-size:.85rem;
    font-weight:650;
    text-decoration:none;
}
.team-training-map-link:hover { text-decoration:underline; }
.coach-training-coach-row a { color:var(--color-field-dark); font-weight:650; }
.coach-training-description-block { margin:20px 0 0; padding:20px 0 0; border:0; border-top:1px solid var(--color-border-light); border-radius:0; background:none; }
.coach-training-description-block h2 { font-size:1.1rem; }
.coach-training-side { position:sticky; top:90px; }
.coach-training-booking-card { padding:22px; border-radius:20px; box-shadow:var(--shadow-card); }
.coach-training-booking-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.coach-training-booking-title > div { display:grid; gap:3px; }
.coach-training-booking-title .eyebrow { margin:0; }
.coach-training-booking-title strong { font-size:1.45rem; }
.coach-training-booking-title > svg { color:var(--color-field); }
.coach-training-capacity { height:7px; margin:14px 0 18px; overflow:hidden; border-radius:99px; background:var(--color-border-light); }
.coach-training-capacity span { display:block; height:100%; border-radius:inherit; background:var(--gradient-brand); }
.coach-training-actions { flex-direction:column; align-items:stretch; margin:0; padding:0; border:0; }
.coach-training-actions > form, .coach-training-actions > a { width:100%; }
.coach-training-actions .btn { width:100%; justify-content:center; }
.coach-training-actions > form:has(.coach-training-payment-hint) { display:grid; gap:7px; }
.coach-training-payment-hint { color:var(--color-ink-muted); font-size:.78rem; line-height:1.4; }
.coach-training-payment-claimed,.coach-training-payment-confirmed {
    display:flex; align-items:flex-start; gap:8px; padding:11px 12px; border-radius:12px; font-size:.86rem; line-height:1.45;
}
.coach-training-payment-claimed { color:#8b6500; background:rgba(212,160,23,.12); }
.coach-training-payment-confirmed { color:var(--color-success); background:var(--color-success-bg,var(--color-field-ultra-light)); }
.coach-training-payment-claimed svg,.coach-training-payment-confirmed svg { flex:none; }
.coach-training-payment-warning { margin:0; }
.coach-training-side-link { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--color-border-light); color:var(--color-ink); text-decoration:none; }
.coach-training-side-link > span:nth-child(2) { display:grid; min-width:0; flex:1; gap:2px; }
.coach-training-side-link small { color:var(--color-ink-muted); }
.coach-training-side-link strong { overflow:hidden; text-overflow:ellipsis; }
.coach-training-side-link > svg { color:var(--color-field); }
.coach-training-flash { display:block; margin:14px 0 0; padding:10px 12px; }
.coach-participant-statuses { align-items:center; gap:8px; }
.coach-participant-statuses .status-icon { width:17px; height:17px; }
.coach-participant-team-form { display:flex; align-items:center; gap:7px; margin-left:auto; }
.coach-participant-team-form select { width:auto; min-width:130px; padding:7px 9px; font-size:.82rem; }
.coach-participant-management button { display:inline-flex; align-items:center; gap:5px; }
.coach-participant-management form:has(input[name="paid"][value="true"]) button { color:var(--color-success); }
.coach-training-details-shell .coach-roster-card { box-shadow:var(--shadow-card); }
.coach-training-review-card { margin-top:20px; padding:22px 26px; border-radius:20px; box-shadow:var(--shadow-card); }
.coach-training-review-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.coach-training-review-heading h2 { margin:0; font-size:1.15rem; }
.coach-training-review-heading .eyebrow { margin:0 0 4px; }
.coach-training-review-card > .form-hint { margin:8px 0 14px; }
.coach-training-review-totals,.coach-training-review-totals > span { display:flex; align-items:center; gap:6px; }
.coach-training-review-totals { gap:14px; }
.coach-training-review-totals > span:first-child { color:var(--color-success); }
.coach-training-review-totals > span:last-child { color:var(--color-danger); }
.coach-training-review-vote { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.coach-training-review-vote form { margin:0; }
.coach-training-review-vote button { display:inline-flex; align-items:center; gap:6px; }
.coach-training-review-locked { margin:8px 0 0; }
.coach-profile-training-stats { display:flex; flex-wrap:wrap; gap:10px 20px; padding-bottom:14px; border-bottom:1px solid var(--color-border-light); color:var(--color-ink-muted); font-size:.9rem; }
.coach-profile-training-stats > span { display:inline-flex; align-items:center; gap:6px; }
.coach-profile-training-stats svg { color:var(--color-field); }
.coach-profile-training-stats b { color:var(--color-ink); }
.coach-profile-upcoming-list { margin-top:4px; }
.coach-training-details-shell .advertisement-slot { margin:18px 0; }
.coach-catalog-page .advertisement-slot { margin:0 0 20px; }
.coach-training-edit-card { margin-top:18px; }
.coach-training-edit-shell { max-width:820px; padding-top:32px; padding-bottom:56px; }
.coach-training-edit-card { margin-top:18px; padding:clamp(20px,4vw,34px); border-radius:22px; }
.coach-training-edit-card > .eyebrow { margin:0 0 6px; }
.coach-training-edit-card > .page-title { margin:0; }
.coach-training-edit-card > .form-hint { margin:8px 0 22px; }
.coach-training-edit-card textarea { resize:vertical; }
.coach-training-edit-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:22px; }
.coach-training-edit-actions .btn { display:inline-flex; align-items:center; gap:7px; }
.coach-training-actions .coach-invite-button { justify-content:center; }
@media (max-width:640px) {
    .coach-training-heading { align-items:stretch; flex-direction:column; gap:16px; margin-bottom:20px; padding:18px; }
    .coach-training-heading > .btn { width:100%; justify-content:center; }
    .coach-training-form-grid { grid-template-columns:1fr; gap:0; }
    .coach-training-detail-grid { grid-template-columns:1fr; gap:10px; }
    .coach-create-page .coach-training-form { min-height:0; }
    .coach-training-review { padding:16px; }
    .coach-training-review-facts { grid-template-columns:1fr; }
    .coach-training-review-card { padding:18px; }
    .coach-training-review-heading { align-items:flex-start; }
    .coach-training-review-vote { align-items:stretch; }
    .coach-training-details-shell { padding:20px 12px 42px; }
    .coach-participant-row { grid-template-columns:1fr; }
    .coach-participant-statuses { justify-content:flex-start; }
    .coach-participant-team-form { width:100%; margin-left:0; }
    .coach-participant-team-form select { min-width:0; flex:1; }
    .coach-participant-management { grid-column:auto; }
    .coach-training-info-card .info-row .game-detail-tags { margin-left:0; }
    .coach-training-team-actions { align-items:stretch; }
    .coach-training-team-actions form:first-child { align-items:stretch; }
    .coach-training-team-actions select { width:100%; }
    .coach-training-edit-actions { flex-direction:column-reverse; }
    .coach-training-edit-actions .btn { width:100%; justify-content:center; }
}
@media (max-width:760px) {
    .coach-training-filters .filters-fields { grid-template-columns:1fr; }
    .coach-training-hero { grid-template-columns:1fr; gap:18px; }
    .coach-training-hero-price { min-width:0; }
    .coach-training-detail-layout { grid-template-columns:1fr; }
    .coach-training-side { position:static; }
}
.game-create-page .wizard-steps,
.tournament-create-page .wizard-steps {
    gap:8px;
    padding:12px;
    border:1px solid var(--color-border);
    border-radius:16px;
    background:var(--color-card);
}
.game-create-page .wizard-step,
.tournament-create-page .wizard-step { flex:1; min-width:0; }
.game-create-page .wizard-step-label,
.tournament-create-page .wizard-step-label { font-size:.8rem; }
.game-create-page .game-create-card {
    border:1px solid var(--color-border);
    border-radius:22px;
    background:var(--color-card);
}
.game-create-page .wizard-step-header {
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px solid var(--color-border);
}
.game-create-page .wizard-step-title { font-size:1.25rem; letter-spacing:-.03em; }
.game-create-page .form-section { margin-top:8px; }
.game-create-page .form-section-label { display:flex; align-items:center; gap:8px; color:var(--color-ink); font-weight:750; }
.game-create-page .form-section-label svg { color:var(--color-field); }

.tournament-create-page .tournament-workspace-shell {
    width:min(100% - 32px, 850px);
    padding-top:32px;
    padding-bottom:64px;
}
.tournament-create-page .tournament-workspace-shell > .page-title {
    margin:0 0 8px;
    font-size:clamp(1.9rem, 4vw, 2.65rem);
    letter-spacing:-.055em;
}
.tournament-create-page .wizard-steps { margin:22px 0 18px; }
.tournament-create-page form.card {
    padding:clamp(18px, 3vw, 28px);
    border:1px solid var(--color-border);
    border-radius:22px;
    box-shadow:var(--shadow-floating);
}
.tournament-create-page .form-group { margin-bottom:20px; }
.tournament-create-page .form-group:last-child { margin-bottom:0; }
.tournament-create-page input,
.tournament-create-page select,
.tournament-create-page textarea { border-radius:11px; }
@media (max-width:760px) {
    .teams-catalog-page .teams-catalog-heading { align-items:flex-start; }
    .teams-catalog-page .teams-catalog-create { width:100%; justify-content:center; }
    .game-create-page .game-create-shell { padding-top:20px; }
    .game-create-page .game-create-card { padding:18px; border-radius:18px; }
    .game-create-page .wizard-steps,
    .tournament-create-page .wizard-steps { display:flex; overflow-x:auto; gap:12px; padding:10px; scrollbar-width:thin; }
    .game-create-page .wizard-step,
    .tournament-create-page .wizard-step { flex:0 0 auto; }
    .game-create-page .wizard-step-label,
    .tournament-create-page .wizard-step-label { max-width:100px; font-size:.72rem; }
    .tournament-create-page .tournament-workspace-shell { width:min(100% - 24px, 850px); padding-top:22px; }
    .tournament-create-page form.card { padding:18px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) {
    .teams-catalog-page .team-catalog-card { transition:none; }
}

/* ============================================================
   Страница деталей матча — scoped под .game-details-page
   ============================================================ */

.game-details-page .game-details-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 30px 0 24px;
}
.game-details-page .game-details-heading-main { min-width: 0; }
.game-details-page .game-details-heading .page-title {
    margin: 10px 0 12px;
    overflow-wrap: anywhere;
}
.game-details-page .game-details-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.game-details-page .game-details-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.game-details-page .game-details-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.game-details-page .game-details-hero {
    border-radius: 24px;
    padding: 24px 26px;
    background: linear-gradient(145deg, var(--color-card), var(--color-bg-raised));
    box-shadow: var(--shadow-floating);
}
.game-details-page .game-details-info-card {
    padding: 20px 22px;
    border-radius: 18px;
}
.game-details-page .game-details-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}
.game-details-page .game-details-section-title .section-title { margin: 0; }
.game-details-page .game-details-sidebar-card {
    border-radius: 18px;
}
.game-details-page .game-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.game-details-page .info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.game-details-page .info-row:last-child { border-bottom: none; }
.game-details-page .info-row svg { color: var(--color-field); flex-shrink: 0; }
.game-details-page .info-row .label {
    color: var(--color-ink-muted);
    font-size: 0.85rem;
    min-width: 100px;
}
.game-details-page .team-columns {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.game-details-page .team-column h3 {
    font-size: 0.9rem;
    margin: 0 0 8px;
}
.game-details-page .pending-participants-card {
    margin-top: 16px;
}
.game-details-page .pending-participant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.game-details-page .pending-participant-actions form {
    margin: 0;
}
.game-details-page .team-drop-zone { transition: background-color 0.15s, outline 0.15s; }
.game-details-page .team-drop-zone.drag-over {
    background-color: var(--color-bg-alt, rgba(0,0,0,0.04));
    outline: 2px dashed var(--color-field);
    outline-offset: -2px;
}
.game-details-page .draggable-participant { cursor: grab; }
.game-details-page .draggable-participant:active { cursor: grabbing; }

/* Карточки оплаты на странице деталей матча */
.game-details-page .game-payment-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
}
.game-details-page .game-payment-card--pending {
    background: var(--color-warning-bg);
    border: 1px solid rgba(242, 168, 60, 0.25);
}
.game-details-page .game-payment-card--confirmed {
    background: var(--color-field-ultra-light);
    border: 1px solid var(--color-field-light);
}
.game-details-page .game-payment-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
}
.game-details-page .game-payment-card--pending .game-payment-icon {
    background: rgba(242, 168, 60, 0.15);
    color: var(--color-whistle-dark);
}
.game-details-page .game-payment-card--confirmed .game-payment-icon {
    background: var(--color-field-light);
    color: var(--color-field);
}
.game-details-page .game-payment-body {
    flex: 1;
    min-width: 0;
}
.game-details-page .game-payment-body strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    margin-bottom: 4px;
}
.game-details-page .game-payment-card--confirmed .game-payment-body strong {
    color: var(--color-field-dark);
}
.game-details-page .game-payment-body p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}
.game-details-page .game-payment-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(242, 168, 60, 0.2);
}
.game-details-page .game-payment-card--confirmed .game-payment-actions {
    border-top-color: var(--color-border);
}
.game-details-page .game-payment-receipt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--color-field);
    text-decoration: none;
}
.game-details-page .game-payment-receipt:hover { text-decoration: underline; }

/* Карточка итогового счёта */
.game-details-page .game-score-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--color-field-ultra-light);
    border: 1px solid var(--color-field-light);
}
.game-details-page .game-score-card svg { color: #D4A017; flex-shrink: 0; }
.game-details-page .game-score-card strong { font-size: 1.1rem; }

/* Sidebar actions */
.game-details-page .game-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.game-details-page .game-sidebar-actions .btn { justify-content: center; }
.game-details-page .game-sidebar-full-btn {
    width: 100%;
    justify-content: center;
}

/* Rules list в сайдбаре */
.game-details-page .rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.game-details-page .rules-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.9rem;
}
.game-details-page .rules-list svg {
    color: var(--color-field);
    flex-shrink: 0;
    margin-top: 2px;
}
.game-details-page .rules-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-field);
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}
.game-details-page .rules-link:hover { text-decoration: underline; }

/* Похожие игры */
.game-details-page .similar-games-card { margin-bottom: 16px; }
.game-details-page .similar-games-heading {
    margin: 0 0 8px;
    font-size: 1rem;
}
.game-details-page .similar-game-list { display: grid; }
.game-details-page .similar-game-link {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
    text-decoration: none;
}
.game-details-page .similar-game-link:last-child { border-bottom: 0; }
.game-details-page .similar-game-top,
.game-details-page .similar-game-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    min-width: 0;
}
.game-details-page .similar-game-top { justify-content: space-between; }
.game-details-page .similar-game-title {
    flex: 1 1 120px;
    min-width: 0;
    margin: 0;
    font-size: .9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.game-details-page .similar-game-meta {
    color: var(--color-ink-muted);
    font-size: .76rem;
    line-height: 1.4;
}
.game-details-page .similar-game-meta > span {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.game-details-page .similar-game-meta svg { flex: 0 0 auto; }
.game-details-page .similar-game-link:hover .similar-game-title { color: var(--color-field); }

/* Таблица статистики матча */
.game-details-page .stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.game-details-page .stat-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
}
.game-details-page .stat-table th:not(:first-child) { text-align: center; }
.game-details-page .stat-table td { padding: 6px 8px; }

.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: radial-gradient(circle at 50% 30%, rgba(11, 191, 106, 0.08), transparent 60%), var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: preloader-in 0.5s var(--ease-out);
}
.preloader-default { display:flex; flex-direction:column; align-items:center; gap:16px; }
.preloader-default--has-animation { display:none; }
.preloader-animation { display:block; width:auto; height:auto; max-width:min(240px, 68vw); max-height:min(240px, 42vh); object-fit:contain; }
@keyframes preloader-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.preloader-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gradient-field);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 28px rgba(11, 191, 106, 0.28);
}
.preloader-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    color: var(--color-ink);
}
.preloader-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-field-light);
    border-top-color: var(--color-field);
    border-radius: 50%;
    animation: preloader-spin 0.9s linear infinite;
}
@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}
.preloader-progress {
    width: 160px;
    height: 4px;
    background: var(--color-field-light);
    border-radius: 999px;
    overflow: hidden;
}
.preloader-progress-bar {
    height: 100%;
    width: 30%;
    background: var(--gradient-field);
    border-radius: 999px;
    animation: preloader-progress 1.4s var(--ease-in-out) infinite;
}
@keyframes preloader-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(500%); }
}
@media (prefers-reduced-motion: reduce) {
    .preloader { transition: none; }
    .preloader-spinner { animation: none; border-top-color: var(--color-field); }
    .preloader-logo, .preloader-progress-bar, .preloader-inner { animation: none; }
    .preloader-animation { display:none; }
    .preloader-default--has-animation { display:flex; }
}

.preloader-settings-preview {
    display:grid;
    place-items:center;
    min-height:150px;
    margin:14px 0;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md, 14px);
    background:var(--color-bg);
}
.preloader-settings-preview img { max-width:min(240px, 70%); max-height:180px; object-fit:contain; }
.preloader-settings-form { display:grid; gap:12px; }
.preloader-settings-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.preloader-settings-actions label { display:flex; align-items:center; gap:8px; margin:0; }

.paid-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #F2A83C 0%, #f6c36e 100%);
    color: #5c3a00;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.paid-feature-card {
    border: 1.5px dashed rgba(242, 168, 60, 0.45);
    background: linear-gradient(180deg, var(--color-warning-bg) 0%, var(--color-card) 100%);
}
.paid-feature-lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-whistle-dark);
    font-size: 0.82rem;
    font-weight: 600;
}
.game-details-page .stat-table td:not(:first-child) { text-align: center; }
.game-details-page .stat-table input { width: 52px; text-align: center; }

/* Блок деления на команды */
.game-details-page .split-teams-card {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.game-details-page .split-teams-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.game-details-page .split-teams-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.game-details-page .split-teams-form label {
    margin: 0;
    font-size: 0.88rem;
}
.game-details-page .split-teams-form input {
    width: 70px;
}

/* Блок оценки игроков */
.game-details-page .review-actions {
    display: flex;
    gap: 6px;
}

/* Блок отзыва организатору */
.game-details-page .organizer-review-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.game-details-page .organizer-review-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.game-details-page .organizer-review-form label { margin: 0; font-weight: 600; }
.game-details-page .organizer-review-form select { max-width: 160px; }
.game-details-page .organizer-review-form .btn-small { align-self: flex-start; }
.game-details-page .report-button {
    color: var(--color-danger);
    align-self: flex-start;
    font-size: 0.85rem;
}

/* Карточка ожидания записи */
.game-details-page .join-prompt-card {
    margin-bottom: 20px;
    color: var(--color-ink-muted);
}
.game-details-page .join-prompt-card p { margin: 0; }

/* Модалки */
.game-details-page .modal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.game-details-page .modal-card-header h2 {
    margin: 0;
    font-size: 1.2rem;
}
.game-details-page .modal-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.game-details-page .modal-card-actions .btn { justify-content: center; }
.game-details-page .modal-textarea {
    width: 100%;
    margin-bottom: 12px;
}
.game-details-page .modal-submit-btn {
    width: 100%;
    justify-content: center;
}

/* Адаптивность */
@media (min-width: 900px) {
    .game-details-page .game-layout {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}
@media (max-width: 760px) {
    .game-details-page .game-details-heading { flex-direction: column; align-items: flex-start; }
    .game-details-page .game-payment-card { flex-direction: column; gap: 12px; }
    .game-details-page .game-details-info-card { padding: 16px; }
    .game-details-page .info-row .label { min-width: 80px; }
    .game-details-page .similar-game-top { align-items: flex-start; }
}

.participant-menu .link-button-danger {
    color: var(--color-danger);
}
.participant-menu .link-button-danger:hover {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
.participant-remove-form {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 760px) {
    .participant-menu {
        position: relative;
        width: auto;
        flex: 0 0 auto;
    }
    .participant-menu > button {
        width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--color-border);
        background: var(--color-card);
    }
    .participant-menu .nav-menu-panel {
        position: absolute;
        top: calc(100% + 5px);
        right: 0;
        left: auto;
        width: min(260px, calc(100vw - 32px));
        min-width: min(220px, calc(100vw - 32px));
        max-height: min(60vh, 360px);
        overflow-y: auto;
        padding: 6px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-card);
        box-shadow: var(--shadow-floating);
        z-index: 100;
    }
}

.linked-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
@media (max-width: 520px) {
    .linked-account-row { align-items: flex-start; flex-wrap: wrap; }
    .linked-account-row > div { min-width: 0; flex: 1 1 150px; }
    .linked-account-row .btn-small,
    .linked-account-row form,
    .linked-account-row form .btn-small { flex: 0 0 auto; }
    .linked-account-row form { margin-left: auto; }
}

.admin-attention-section {
    margin: 0 0 24px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}
.admin-attention-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.admin-attention-heading h2 {
    margin: 0;
    font-size: 1.1rem;
}
.admin-attention-heading .form-hint { margin: 4px 0 0; }
.admin-attention-total {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-ink-muted);
    font-size: .75rem;
    font-weight: 700;
}
.admin-attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}
.admin-attention-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.admin-attention-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-field);
    box-shadow: var(--shadow-hover);
}
.admin-attention-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--color-field);
    background: var(--color-field-ultra-light);
}
.admin-attention-icon.is-warning {
    color: var(--color-whistle-dark);
    background: var(--color-warning-bg);
}
.admin-attention-icon.is-danger {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
.admin-attention-copy {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}
.admin-attention-copy strong {
    overflow: hidden;
    font-size: .83rem;
    text-overflow: ellipsis;
}
.admin-attention-copy small {
    color: var(--color-ink-muted);
    font-size: .72rem;
    line-height: 1.35;
}
.admin-attention-count {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--color-ink-muted);
    background: var(--color-bg-raised);
    font-size: .78rem;
    font-weight: 800;
}
.admin-attention-count.is-pending {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
.admin-attention-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--color-success);
    font-size: .86rem;
    font-weight: 650;
}
.admin-section-label {
    margin: 0 0 10px;
    color: var(--color-ink-muted);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.admin-user-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
}
.admin-user-stats .stat-tile {
    min-height: 88px;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-card);
}
.admin-user-stats .stat-tile-value { font-size: 1.35rem; }
.admin-user-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}
.admin-user-pagination > span {
    color: var(--color-ink-muted);
    font-size: .85rem;
}
.admin-user-facts-grid,
.admin-user-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.admin-user-facts-card h3,
.admin-user-activity-grid h3 {
    margin: 0 0 14px;
    font-size: 1rem;
}
.admin-user-facts-card h4 {
    margin: 20px 0 10px;
    font-size: .88rem;
}
.admin-user-facts {
    display: grid;
    gap: 10px;
    margin: 0;
}
.admin-user-facts > div {
    display: grid;
    grid-template-columns: minmax(130px, .75fr) minmax(0, 1.25fr);
    gap: 10px;
    align-items: baseline;
}
.admin-user-facts dt {
    color: var(--color-ink-muted);
    font-size: .78rem;
}
.admin-user-facts dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .86rem;
}
.admin-user-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.admin-user-tag {
    padding: 6px 9px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .76rem;
}
.admin-user-activity-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.admin-user-activity-stats > div {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 11px;
    background: var(--color-bg-raised);
}
.admin-user-activity-stats strong {
    color: var(--color-field);
    font-size: 1.1rem;
}
.admin-user-activity-stats span {
    color: var(--color-ink-muted);
    font-size: .72rem;
}
.admin-user-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}
.admin-user-history-row:last-of-type { border-bottom: 0; }
.admin-user-history-row > span:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.admin-user-history-row strong {
    overflow: hidden;
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-history-row small {
    color: var(--color-ink-muted);
    font-size: .74rem;
}
.admin-user-history-row:hover strong { color: var(--color-field); }
@media (max-width: 760px) {
    .admin-attention-section { padding: 16px; }
    .admin-attention-heading { flex-direction: column; gap: 8px; }
    .admin-attention-grid { grid-template-columns: 1fr; }
    .admin-user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-user-facts-grid,
    .admin-user-activity-grid { grid-template-columns: 1fr; }
    .admin-user-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Responsive app-style quick navigation and a clearer desktop create action. */
.mobile-bottom-nav { display:none; }
.nav-links .nav-create-trigger {
    min-height:40px;
    padding:9px 15px;
    border-radius:999px;
    background:var(--color-field);
    color:#fff;
    box-shadow:0 5px 14px rgba(11,191,106,.18);
}
.nav-links .nav-create-trigger:hover {
    background:var(--color-field-dark);
    color:#fff;
}
.nav-links > a[aria-current="page"]:not(.btn-small):not(.btn) {
    color:var(--color-field-dark);
    background:var(--color-field-light);
}
@media (min-width:769px) and (max-width:1050px) {
    .header-inner { gap:12px; }
    .nav-links { gap:2px; }
    .nav-links a:not(.btn-small):not(.btn),
    .nav-menu > button { padding-right:8px; padding-left:8px; }
}
@media (max-width:768px) {
    body { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
    .mobile-bottom-nav {
        position:fixed;
        inset:auto 0 0;
        z-index:80;
        display:grid;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        min-height:64px;
        padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        border-top:1px solid var(--color-border);
        background:color-mix(in srgb, var(--color-card) 94%, transparent);
        box-shadow:0 -8px 24px rgba(16,24,40,.08);
        backdrop-filter:blur(18px);
    }
    .mobile-bottom-nav.is-guest { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .mobile-bottom-nav > a {
        display:flex;
        min-width:0;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        border-radius:12px;
        color:var(--color-ink-muted);
        font-size:.67rem;
        font-weight:650;
        line-height:1.1;
        text-decoration:none;
        -webkit-tap-highlight-color:transparent;
    }
    .mobile-bottom-nav > a > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mobile-bottom-nav > a[aria-current="page"] { color:var(--color-field-dark); }
    .mobile-bottom-nav > a:active { background:var(--color-field-light); }
    .mobile-bottom-nav > .mobile-bottom-nav-create {
        justify-content:center;
        gap:4px;
        color:#fff;
        font-weight:750;
    }
    .mobile-bottom-nav-create > i,
    .mobile-bottom-nav-create > svg {
        display:grid;
        width:34px;
        height:30px;
        place-items:center;
        border-radius:10px;
        background:var(--color-field);
        color:#fff;
        stroke:#fff;
        box-shadow:0 4px 12px rgba(11,191,106,.24);
    }
    .mobile-bottom-nav-create > span { color:var(--color-ink); }
    [data-theme="dark"] .mobile-bottom-nav {
        background:color-mix(in srgb, var(--color-card) 94%, transparent);
        box-shadow:0 -8px 24px rgba(0,0,0,.24);
    }
}

.advertisement-slot { margin:24px 0; }
.advertisement-card {
    display:flex;
    align-items:center;
    gap:16px;
    min-height:92px;
    padding:18px 22px;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:linear-gradient(110deg, var(--color-bg-raised), var(--color-card));
    color:var(--color-ink);
    text-decoration:none;
    box-shadow:var(--shadow-xs);
    transition:border-color .18s, box-shadow .18s, transform .18s;
}
.advertisement-card--with-banner { align-items:center; }
.advertisement-banner {
    display:block; flex:0 1 auto; width:min(var(--ad-width), 100%);
    max-width:100%; max-height:800px; aspect-ratio:var(--ad-width) / var(--ad-height);
    object-fit:contain; border-radius:10px;
}
.advertisement-card--with-banner .advertisement-content { flex:1 1 180px; }
.advertisement-card:hover {
    border-color:var(--color-field);
    box-shadow:var(--shadow-card);
    transform:translateY(-1px);
}
.advertisement-label {
    flex:0 0 auto;
    padding:5px 8px;
    border:1px solid var(--color-border);
    border-radius:7px;
    color:var(--color-ink-muted);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.advertisement-content { display:grid; min-width:0; gap:4px; }
.advertisement-content strong { font-size:1rem; }
.advertisement-content > span { color:var(--color-ink-muted); font-size:.88rem; line-height:1.45; }
.advertisement-content > .advertisement-disclosure {
    margin-top:5px; color:var(--color-ink-muted); font-size:.72rem; line-height:1.45;
}
.advertisement-action { margin-left:auto; color:var(--color-field); }
.admin-ad-form {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    align-items:end;
    gap:14px;
    margin:20px 0;
}
.admin-ad-form > button { justify-self:start; }
.admin-ad-image-field { grid-column:1 / -1; }
.admin-ad-preview-wrap { margin-top:10px; }
.admin-ad-preview {
    display:block; max-width:min(100%, 1200px); max-height:800px;
    object-fit:contain; border:1px solid var(--color-border);
    border-radius:10px; background:var(--color-bg-raised);
}
.admin-ad-preview[hidden] { display:none; }
.admin-ad-list { display:grid; gap:0; }
.admin-ad-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:16px 0;
    border-bottom:1px solid var(--color-border);
}
.admin-ad-thumbnail {
    display:block; flex:0 1 240px; width:auto; max-width:min(100%, 240px);
    max-height:120px; object-fit:contain; border:1px solid var(--color-border);
    border-radius:10px; background:var(--color-bg-raised);
}
.admin-ad-row:last-child { border-bottom:0; }
.admin-ad-copy { display:grid; min-width:0; gap:6px; }
.admin-ad-copy > .badge { justify-self:start; max-width:100%; }
.admin-ad-copy > a { overflow-wrap:anywhere; font-size:.82rem; }
.admin-ad-copy > small { color:var(--color-ink-muted); }
.admin-ad-disclosure-form {
    display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.admin-ad-disclosure-form label { display:grid; gap:4px; min-width:min(100%, 220px); font-size:.78rem; }
.admin-ad-disclosure-form input { padding:8px 10px; }
.admin-ad-actions { display:flex; flex:0 0 auto; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-weekly-metrics {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px; margin:20px 0;
}
.admin-weekly-metrics .card { display:grid; gap:8px; margin:0; }
.admin-weekly-metrics .card span { color:var(--color-ink-muted); font-size:.85rem; }
.admin-weekly-metrics .card strong { font-size:1.65rem; letter-spacing:-.04em; }
.admin-weekly-actions { margin-top:20px; }
.admin-weekly-actions h2 { margin-top:0; }
.admin-weekly-table-wrap { overflow-x:auto; margin:12px 0 18px; }
.admin-weekly-table-wrap table { min-width:720px; width:100%; border-collapse:collapse; }
.admin-weekly-table-wrap th,
.admin-weekly-table-wrap td { padding:10px 8px; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:top; }
.linked-password-form { display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--color-border); }
@media (max-width:680px) {
    .advertisement-slot { margin:18px 0; }
    .advertisement-card { align-items:flex-start; gap:10px; padding:14px; }
    .advertisement-content > span { font-size:.82rem; }
    .advertisement-action { display:none; }
    .admin-ad-row { align-items:flex-start; flex-direction:column; }
}
@media (max-width:480px) {
    .advertisement-card { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; }
    .advertisement-label { justify-self:start; }
    .advertisement-content { width:100%; }
}

/* Admin dashboard — operational workspace, with attention queues first. */
.admin-dashboard-shell { padding-top:28px; padding-bottom:58px; }
.admin-dashboard-shell > .admin-content { min-width:0; }
.admin-dashboard-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}
.admin-dashboard-heading .page-title { margin:0 0 6px; }
.admin-dashboard-heading .form-hint { max-width:650px; line-height:1.6; }
.admin-dashboard-status {
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:9px 12px;
    color:var(--color-success);
    background:var(--color-success-bg);
    border:1px solid var(--color-border);
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
}
.admin-dashboard-section-title {
    margin:26px 0 12px;
    font-size:1.15rem;
}
.admin-registration-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:22px;
    padding:18px 20px;
    border-radius:16px;
    box-shadow:var(--shadow-card);
}
.admin-registration-title { margin:0; font-weight:700; }
.admin-quick-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:24px;
}
.admin-quick-actions .btn-small {
    display:inline-flex;
    align-items:center;
    min-height:40px;
}
.admin-stats-grid {
    grid-template-columns:repeat(auto-fit, minmax(145px, 1fr));
    gap:12px;
    margin-bottom:24px;
}
.admin-stats-grid .stat-tile {
    min-width:0;
    min-height:104px;
    padding:16px;
    border:1px solid var(--color-border);
    border-radius:14px;
    background:var(--color-card);
    box-shadow:var(--shadow-card);
    transition:transform .2s ease, box-shadow .2s ease;
}
.admin-stats-grid a.stat-tile { color:inherit; text-decoration:none; }
.admin-stats-grid a.stat-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.admin-stats-grid .stat-tile-value { overflow-wrap:anywhere; }
.admin-stats-grid .stat-tile-label { line-height:1.35; }
.admin-dashboard-card {
    min-width:0;
    border-radius:16px !important;
    box-shadow:var(--shadow-card);
}
.admin-dashboard-shell .admin-charts-grid,
.admin-dashboard-shell .admin-lists-grid {
    display:grid;
    gap:16px;
    margin-bottom:22px;
}
.admin-dashboard-shell .admin-charts-grid { grid-template-columns:1.25fr 1fr 1.25fr; }
.admin-dashboard-shell .admin-lists-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.admin-dashboard-shell .admin-charts-grid > .card,
.admin-dashboard-shell .admin-lists-grid > .card { min-width:0; padding:20px; }
.admin-dashboard-shell canvas { display:block; max-width:100%; }
.admin-game-status-card { margin-bottom:24px; padding:20px; }
.admin-game-status-card h2 { margin:0 0 4px; font-size:1.1rem; }
.admin-game-status-card > .form-hint { margin:0 0 14px; }
.admin-game-status-stats {
    grid-template-columns:repeat(auto-fit, minmax(155px, 1fr));
    gap:10px;
    margin-bottom:12px;
}
.admin-game-status-stats .stat-tile {
    min-width:0;
    padding:12px;
    border:1px solid var(--color-border);
    border-radius:12px;
    background:var(--color-bg-raised);
}
.admin-game-status-grid {
    display:grid;
    grid-template-columns:minmax(220px, .8fr) minmax(0, 1.2fr);
    align-items:center;
    gap:20px;
}
.admin-game-status-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:7px 0;
    border-bottom:1px solid var(--color-border);
}
.team-dashboard-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}
.team-dashboard-actions .btn-small { display:inline-flex; align-items:center; gap:7px; }
.team-join-request-alert {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding:14px;
    border:1px solid var(--color-border);
    background:var(--color-warning-bg);
    color:inherit;
    text-decoration:none;
}
.team-join-request-alert > i:first-child { color:var(--color-warning); }
.team-join-request-alert > i:last-child { margin-left:auto; }

@media (max-width:1200px) {
    .admin-dashboard-shell .admin-charts-grid,
    .admin-dashboard-shell .admin-lists-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px) {
    .admin-dashboard-shell .admin-charts-grid,
    .admin-dashboard-shell .admin-lists-grid { grid-template-columns:1fr !important; }
    .admin-game-status-grid { grid-template-columns:1fr !important; }
}
@media (max-width:760px) {
    .admin-dashboard-shell { padding-top:20px; }
    .admin-dashboard-heading { align-items:flex-start; flex-direction:column; }
    .admin-dashboard-status { align-self:flex-start; }
    .admin-quick-actions .btn-small { flex:1 1 calc(50% - 8px); justify-content:center; }
    .admin-stats-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .admin-stats-grid .stat-tile { min-height:90px; padding:14px 12px; }
    .admin-game-status-card { padding:16px; }
}
@media (max-width:420px) {
    .admin-registration-card { align-items:flex-start; flex-direction:column; }
    .admin-registration-card form,
    .admin-registration-card button { width:100%; }
    .admin-registration-card button { justify-content:center; }
}