/*
 * TILUS storefront theme
 * One visual system for the public site: calm canvas, wide navigation,
 * flat rounded panels and cyan actions. Functional page layouts stay intact.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg-main: #171c21 !important;
    --bg-panel: #1c2126 !important;
    --bg-card: #1c2126 !important;
    --text-main: #f7f9fa !important;
    --text-muted: #898b96 !important;
    --accent-light: #3bb3df !important;
    --accent-cyan: #3bb3df !important;
    --accent-blue: #87bfeb !important;
    --color-accent-2: #87bfeb !important;
    --border-color: rgba(255, 255, 255, .075) !important;
    --content-width: 1760px !important;
    --font-pixel: 'Montserrat', sans-serif !important;
    --font-body: 'Montserrat', sans-serif !important;
}

html {
    background: #171c21 !important;
}

body {
    padding-top: 0 !important;
    color: #f7f9fa !important;
    background: #171c21 !important;
    background-image: none !important;
    background-attachment: scroll !important;
    font-family: 'Montserrat', sans-serif !important;
}

h1, h2, h3,
.hero-title, .section-title, .showcase-title, .social-title-main,
.feature-hero h1, .feature-card h2, .feature-card h3,
.page-header h1, .stats-title, .stats-section-head h2,
.profile-hero h1, .auth-card h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    text-transform: none !important;
}

/* Header */
.site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(calc(100% - 80px), 1760px) !important;
    min-height: 106px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.site-brand {
    gap: 15px !important;
}

/* Знак рисует свой скруглённый квадрат прямо в SVG, поэтому фон и рамку
   у контейнера снимаем — иначе под водой проступает старая плашка. */
.site-brand-mark {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: none !important;
    box-shadow: 0 10px 28px rgba(53, 184, 216, .18) !important;
    text-shadow: none !important;
    overflow: visible !important;
}

/* На наведении вода в знаке поднимается — тот же приём, что на экране
   загрузки, только в миниатюре. */
.site-brand-water {
    transition: transform 520ms cubic-bezier(.33, .9, .35, 1);
}
.site-brand:hover .site-brand-water {
    transform: translateY(-9px);
}
@media (prefers-reduced-motion: reduce) {
    .site-brand-water { transition: none; }
}

.site-brand-copy {
    gap: 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
}

.site-brand-copy small {
    color: #3bb3df !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 2px !important;
}

.site-nav {
    gap: 15px !important;
}

.site-nav-link,
.site-nav-trigger {
    padding: 12px 10px !important;
    border-radius: 11px !important;
    color: #d4d5dd !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.site-nav-link:hover,
.site-nav-link.active,
.site-nav-group:hover > .site-nav-trigger,
.site-nav-group:focus-within > .site-nav-trigger,
.site-nav-group.open > .site-nav-trigger,
.site-nav-group.active > .site-nav-trigger {
    color: #3bb3df !important;
    background: rgba(35, 167, 216, .07) !important;
    transform: none !important;
}

.site-nav-link.active::after,
.site-nav-group.active > .site-nav-trigger::before {
    display: none !important;
}

.site-nav-dropdown {
    width: 285px !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 18px !important;
    background: #1c2126 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important;
    backdrop-filter: none !important;
}

.site-nav-sub-link {
    border: 0 !important;
    border-radius: 12px !important;
}

.site-nav-sub-link strong {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.site-nav-sub-link:hover,
.site-nav-sub-link.active {
    border: 0 !important;
    background: #13191e !important;
}

.site-account,
.burger-btn {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 15px !important;
    color: #f7f9fa !important;
    background: #1c2126 !important;
    box-shadow: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.site-account:hover,
.site-account.active {
    color: #050e13 !important;
    background: #3bb3df !important;
}

.site-account img {
    border-radius: 50% !important;
}

/* Shared widths */
.container,
.feature-shell,
.clans-shell,
.clan-shell,
.moments-shell,
.insight-shell,
.hyper-shell,
.loop-admin,
.player-profile-shell,
.stats-shell {
    width: min(calc(100% - 80px), 1760px) !important;
    max-width: 1760px !important;
}

.feature-shell,
.clans-shell,
.clan-shell,
.moments-shell,
.insight-shell,
.hyper-shell,
.loop-admin,
.player-profile-shell,
.stats-shell {
    margin-top: 48px !important;
}

.container-main,
.showcase-container,
.social-section {
    width: min(calc(100% - 80px), 1760px) !important;
    max-width: 1760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Flat storefront panels */
:where(
    .card,
    .feature-card,
    .news-card,
    .news-feature,
    .step-card,
    .team-card,
    .social-card,
    .home-status-card,
    .menu-card,
    .profile-banner-panel,
    .clans-hero,
    .clans-stat,
    .clan-invites,
    .clan-create,
    .clan-card,
    .clan-hero,
    .clan-panel,
    .moment-card,
    .insight-card,
    .hyper-card,
    .stats-card,
    .status-card,
    .event-card,
    .punishment-card,
    .wiki-sidebar,
    .footer-server-card,
    .auth-card,
    .cape-card,
    .error-card,
    .f-card,
    .hyper-map-card,
    .hyper-marker-card,
    .hyper-panel,
    .insight-panel,
    .item-card,
    .library-item,
    .library-panel,
    .loop-card,
    .loop-marker-card,
    .panel-card,
    .player-card,
    .player-item,
    .player-moment-tile,
    .player-profile-hero,
    .player-profile-stat,
    .preview-panel,
    .rule-card,
    .server-hero-card,
    .stats-panel,
    .stats-metric,
    .stats-footnote,
    .summary-box,
    .uploaded-file-card,
    .variant-box,
    .wiki-card,
    .ann-item,
    .audit-item
) {
    border-color: transparent !important;
    border-radius: 24px !important;
    background-color: #1c2126 !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:where(
    .card,
    .feature-card,
    .news-card,
    .step-card,
    .team-card,
    .social-card,
    .home-status-card,
    .menu-card,
    .clan-card,
    .moment-card,
    .insight-card,
    .hyper-card,
    .stats-card,
    .status-card,
    .event-card
):hover {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-4px);
}

.stats-panel::before,
.player-card::before,
.server-hero-card::before,
.auth-card::before,
.rule-card::before {
    display: none !important;
}

.stats-chart-wrap,
.stats-filters,
.stats-empty,
.stats-error,
.feature-empty,
.team-empty,
.clan-empty,
.clans-empty,
.hyper-empty,
.insight-empty,
.library-empty,
.loop-empty,
.moments-empty,
.player-moments-empty,
.player-profile-empty {
    border-color: rgba(255, 255, 255, .075) !important;
    border-radius: 18px !important;
    background-color: #13191e !important;
    background-image: none !important;
    box-shadow: none !important;
}

.stats-filter.active,
.tab-btn.active,
.filter-btn.active,
.category-btn.active {
    color: #050e13 !important;
    background: #3bb3df !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Older static pages now use the same rounded card rhythm as the store. */
.page-header {
    border-color: rgba(255, 255, 255, .075) !important;
}

.features-grid {
    width: min(calc(100% - 80px), 1760px) !important;
    margin: 0 auto !important;
    gap: 16px !important;
    border: 0 !important;
}

.f-card {
    min-width: 0 !important;
    padding: 38px !important;
    border: 0 !important;
}

.f-card:hover {
    border-color: transparent !important;
    background: #22292e !important;
    transform: translateY(-4px);
}

.feature-card::before,
.step-card::before,
.profile-banner-panel::before {
    display: none !important;
}

.feature-hero {
    padding-top: 38px !important;
}

.feature-kicker,
.clans-kicker,
.footer-kicker {
    color: #3bb3df !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Buttons and fields */
.btn,
.btn-super,
.btn-ghost,
.social-btn,
button[type='submit'],
button[type='button'] {
    border-radius: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.btn-primary,
.btn-super,
.social-btn,
.footer-server-card button {
    border-color: transparent !important;
    color: #050e13 !important;
    background: #3bb3df !important;
    background-image: none !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-super:hover,
.social-btn:hover,
.footer-server-card button:hover {
    filter: brightness(1.06);
}

input:not([type='checkbox']):not([type='radio']),
textarea,
select {
    border: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 14px !important;
    color: #f7f9fa !important;
    background: #13191e !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(59, 179, 223, .4) !important;
    outline: 3px solid rgba(59, 179, 223, .07) !important;
}

/* Homepage */
.hero-glow {
    opacity: .35 !important;
}

.hero-label {
    border-color: rgba(59, 179, 223, .14) !important;
    border-radius: 14px !important;
    background: #1c2126 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.hero-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    display: inline-block !important;
    padding-inline: .05em !important;
    overflow: visible !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
}

.showcase-container {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: #1c2126 !important;
    box-shadow: none !important;
}

.showcase-text {
    width: 100% !important;
    padding: 0 24px 36px !important;
}

.btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.team-role,
.clan-card-meta span,
.player-chip,
.badge,
.tag {
    border-color: transparent !important;
    background: #13191e !important;
}

/* Footer */
.tilus-footer {
    isolation: auto !important;
    width: min(calc(100% - 80px), 1760px) !important;
    min-height: 0 !important;
    margin: 96px auto 34px !important;
    padding: 42px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #1c2126 !important;
    background-image: none !important;
}

.tilus-footer::before,
.tilus-footer::after {
    display: none !important;
}

.tilus-footer-inner {
    width: 100% !important;
    max-width: none !important;
    gap: clamp(28px, 4vw, 70px) !important;
}

.tilus-footer-about h2,
.tilus-footer-links h3,
.footer-server-card strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
}

.tilus-footer-links h3::after {
    height: 3px !important;
    background: #3bb3df !important;
}

.footer-socials a {
    border: 0 !important;
    border-radius: 50% !important;
    color: #3bb3df !important;
    background: rgba(35, 167, 216, .08) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.footer-socials a:hover {
    color: #050e13 !important;
    background: #3bb3df !important;
}

.footer-server-card {
    padding: 24px !important;
    background: #13191e !important;
}

.tilus-footer-legal {
    width: 100% !important;
    margin-top: 42px !important;
    color: #6f717d !important;
}

.season-panel {
    border: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 20px !important;
    background: #1c2126 !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .28) !important;
    backdrop-filter: none !important;
}

.season-panel > span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

.season-panel button {
    border-color: rgba(255, 255, 255, .075) !important;
    background: #13191e !important;
}

.season-panel button.active {
    color: #050e13 !important;
    background: #3bb3df !important;
}

@media (max-width: 1100px) {
    .site-header {
        width: calc(100% - 24px) !important;
        min-height: 76px !important;
    }

    .site-nav {
        top: 86px !important;
        border: 1px solid rgba(255, 255, 255, .075) !important;
        border-radius: 20px !important;
        background: #1c2126 !important;
        box-shadow: 0 25px 65px rgba(0, 0, 0, .38) !important;
    }

    .site-nav-link,
    .site-nav-trigger {
        background: #13191e !important;
    }

    .container,
    .feature-shell,
    .clans-shell,
    .clan-shell,
    .moments-shell,
    .insight-shell,
    .hyper-shell,
    .loop-admin,
    .player-profile-shell,
    .stats-shell,
    .container-main,
    .showcase-container,
    .social-section {
        width: min(calc(100% - 32px), 1760px) !important;
    }

    .tilus-footer {
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 700px) {
    .site-header {
        width: calc(100% - 20px) !important;
        min-height: 68px !important;
    }

    .site-brand-mark {
        width: 44px !important;
        height: 44px !important;
    }

    .container,
    .feature-shell,
    .clans-shell,
    .clan-shell,
    .moments-shell,
    .insight-shell,
    .hyper-shell,
    .loop-admin,
    .player-profile-shell,
    .stats-shell,
    .container-main,
    .showcase-container,
    .social-section {
        width: calc(100% - 20px) !important;
    }

    .tilus-footer {
        width: calc(100% - 20px) !important;
        margin-top: 64px !important;
        padding: 28px 22px !important;
        border-radius: 22px !important;
    }

    .tilus-footer-inner {
        grid-template-columns: 1fr !important;
    }

    .tilus-footer-about,
    .footer-server-card {
        grid-column: auto !important;
    }
}