@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap);.hero-logo-accent,.hero-logo-main,.logo-online,.logo-text,.modal-left h2,.modal-right h2 {
    -webkit-text-fill-color: transparent
}

.landing-logo,.modal-dl-card,a {
    text-decoration: none
}

.footer-col h4,.hero-logo-main,.hero-stat-value,.section-title {
    font-family: 'Times New Roman',serif
}

*,::after,::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: Montserrat,'Segoe UI',sans-serif;
    background: #0a0a0c;
    color: #9a9a9a;
    line-height: 1.5;
    overflow-x: hidden;
    max-width: 100vw
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px
}

a {
    color: #8a8a80;
    transition: color .25s
}

.modal-dl-card:hover .modal-dl-card-icon,a:hover {
    color: #b0a080
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 0,rgba(30,28,26,.3) 0,transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(20,18,16,.2) 0,transparent 50%);
    pointer-events: none;
    z-index: 0
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

section {
    animation: .5s ease-out both fadeInUp;
    padding: 20px 0
}

.hero-section {
    animation: .6s ease-out fadeIn
}

.landing-header .logo-img {
    display: block;
    height: 25px;
    width: auto;
    transition: filter .3s
}

.landing-header .logo-img:hover {
    filter: drop-shadow(0 0 10px rgba(200,160,80,.4)) brightness(1.1)
}

.landing-header {
    background: linear-gradient(180deg,rgba(16,14,12,.98) 0,rgba(12,10,8,.96) 100%);
    border-bottom: 1px solid #1e1a16;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(16px)
}

.landing-header .container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap
}

.landing-logo {
    flex-shrink: 0
}

.logo-text {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(180deg,#d4c8b0,#a09078 50%,#6a5a42);
    -webkit-background-clip: text;
    background-clip: text
}

.landing-nav a,.social-btn {
    letter-spacing: 1px;
    transition: .25s;
    text-transform: uppercase;
    white-space: nowrap
}

.logo-online {
    background: linear-gradient(180deg,#c0b090,#807050);
    -webkit-background-clip: text;
    background-clip: text
}

.landing-nav {
    display: flex;
    gap: 0;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap
}

.header-actions,.landing-nav a {
    align-items: center;
    display: flex
}

.landing-nav a {
    gap: 0;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    position: relative
}

.landing-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: #5a4530;
    transform: scaleX(0);
    transition: transform .25s
}

.landing-nav a:hover {
    color: #c0a878;
    background: 0 0
}

.landing-nav a:hover::after {
    transform: scaleX(1)
}

.header-actions {
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap
}

.social-btn {
    padding: 7px 14px;
    border: 1px solid #2a2520;
    border-radius: 2px;
    color: #707070;
    font-size: 10px;
    font-weight: 600
}

.social-btn:hover {
    border-color: #5a5040;
    color: #a09078;
    background: rgba(255,255,255,.02)
}

.online-counter {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7a8a6a;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 14px;
    background: rgba(120,140,100,.04);
    border-radius: 2px;
    border: 1px solid rgba(120,140,100,.1);
    white-space: nowrap
}

.online-dot {
    width: 8px;
    height: 8px;
    background: #7a8a6a;
    border-radius: 50%;
    animation: 2s infinite pulse
}

.nav-burger {
    display: none;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0
}

.nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #707070;
    margin: 5px 0;
    transition: .3s
}

.lang-switcher {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0
}

.lang-flag {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 2px;
    opacity: .6;
    transition: .2s;
    line-height: 0
}

.lang-flag:hover {
    opacity: .9;
    background: rgba(255,255,255,.03)
}

.lang-flag.active {
    opacity: 1;
    background: rgba(160,144,120,.08);
    box-shadow: 0 0 0 1px rgba(160,144,120,.2)
}

.lang-flag img {
    display: block;
    width: 24px;
    height: 16px;
    vertical-align: middle;
    border-radius: 2px
}

.hero-bonus-strip,.hero-btn {
    border: none!important;
    box-shadow: none!important
}

.hero-news-wrapper {
    position: relative;
    overflow: hidden;
    background: #0a0a0c
}

.hero-news-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}

.hero-news-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(8,6,4,0) 0,rgba(8,6,4,.05) 30%,rgba(8,6,4,.3) 55%,rgba(8,6,4,.7) 80%,rgba(8,6,4,.92) 100%);
    z-index: 1
}

.hero-news-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(1.1) saturate(1.1);
    display: block
}

.hero-section {
    position: relative;
    padding: 50px 0 40px;
    display: block;
    overflow: hidden;
    min-height: auto;
    background: 0 0
}

.hero-bonus-strip::after,.hero-bonus-strip::before,.hero-section::after,.hero-section::before,.hero-stream-card::before,.stats-bg::after,.stats-bg::before,section::before {
    display: none
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%,rgba(20,18,16,.4) 0,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(30,28,24,.3) 0,transparent 50%);
    z-index: 1;
    transition: opacity .5s
}

.hero-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2
}

.hero-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative
}

.hero-logo-img {
    display: block;
    max-width: 500px;
    height: auto;
    margin: 0 auto 12px;
    filter: drop-shadow(0 0 20px rgba(200,160,80,.3)) drop-shadow(0 4px 8px rgba(0,0,0,.8));
    transition: filter .4s,transform .4s
}

.hero-logo-main,.hero-tagline {
    text-transform: uppercase;
    margin: 0 0 8px
}

.hero-logo-img:hover {
    filter: drop-shadow(0 0 35px rgba(240,200,100,.6)) drop-shadow(0 6px 12px rgba(0,0,0,.9));
    transform: scale(1.02)
}

.hero-logo-main {
    font-size: 68px;
    font-weight: 900;
    letter-spacing: 10px;
    background: linear-gradient(180deg,#f8f0d0,#d4b878 20%,#907030);
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 1;
    filter: drop-shadow(0 0 15px rgba(220,190,120,.5)) drop-shadow(0 0 40px rgba(200,160,80,.25)) drop-shadow(0 0 80px rgba(180,140,60,.1)) drop-shadow(0 6px 12px rgba(0,0,0,.9));
    animation: 3s ease-in-out infinite runeGlow
}

@keyframes runeGlow {
    0%,100% {
        filter: drop-shadow(0 0 15px rgba(220,190,120,.5)) drop-shadow(0 0 40px rgba(200,160,80,.25)) drop-shadow(0 0 80px rgba(180,140,60,.1))
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(240,210,140,.7)) drop-shadow(0 0 60px rgba(220,180,100,.4)) drop-shadow(0 0 120px rgba(200,160,80,.2))
    }
}

.hero-logo-accent {
    font-size: 48px;
    background: linear-gradient(180deg,#c0a878,#705020);
    -webkit-background-clip: text;
    background-clip: text
}

.hero-tagline {
    font-size: 15px;
    color: #c0a878;
    font-weight: 700;
    letter-spacing: 6px;
    text-shadow: 0 0 8px rgba(200,160,80,.3),0 2px 4px rgba(0,0,0,.8)
}

.hero-desc {
    font-size: 14px;
    color: #909090;
    font-style: italic;
    margin: 0 0 16px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0,0,0,.7)
}

.hero-bonus-date,.hero-btn {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800
}

.hero-logo-block {
    text-align: center;
    position: relative;
    padding: 20px 0
}

.hero-logo-block::after {
    content: '';
    display: block;
    width: 200px;
    height: 1px;
    margin: 14px auto 0;
    background: linear-gradient(90deg,rgba(200,160,80,.4),rgba(200,160,80,.1),transparent)
}

.hero-btn {
    clip-path: none!important;
    min-width: auto!important;
    padding: 0!important;
    width: 250px;
    height: 60px;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    position: relative;
    transition: filter .3s;
    background-size: 100% 100%!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    color: #d4a870!important;
    text-shadow: 0 0 8px rgba(200,160,80,.5)
}

.hero-btn::after,.hero-stat-card::after,.hero-stat-card::before,.hero-stat-icon-wrap {
    display: none!important
}

.hero-btn-play {
    background-image: url('/assets/images/templates/btn-play.png')!important
}

.hero-btn-play:hover {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(240,200,100,.6))
}

.hero-btn-about {
    background-image: url('/assets/images/templates/btn-about.png')!important;
    color: #807060!important;
    text-shadow: 0 0 6px rgba(180,160,120,.3)
}

.hero-bonus-text,.hero-stat-value {
    text-shadow: 0 0 6px rgba(200,160,80,.3)
}

.hero-btn-about:hover {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(200,180,130,.5))
}

.hero-actions-block {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.hero-bonus-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto 15px;
    background: url('/assets/images/templates/bonus-bg.png') center/100% 100% no-repeat!important;
    padding: 18px 25px;
    height: auto;
    aspect-ratio: 1700/230
}

.hero-bonus-text {
    flex: 1;
    color: #c0a878;
    font-size: 13px;
    line-height: 1.5;
    text-align: left
}

.hero-bonus-date {
    display: inline-block;
    background: rgba(0,0,0,.4);
    color: #d4a84b;
    padding: 4px 14px;
    font-size: 10px;
    margin-bottom: 4px;
    border: 1px solid rgba(212,168,75,.2)
}

.hero-stats-row {
    display: flex!important;
    flex-direction: row!important;
    flex-wrap: nowrap!important;
    gap: 12px!important;
    justify-content: center!important;
    align-items: center!important;
    margin-bottom: 18px
}

.hero-stat-card,.hero-stream-card {
    border: none!important;
    align-items: center;
    position: relative
}

.hero-stat-card {
    display: flex!important;
    justify-content: center;
    padding: 0!important;
    transition: .4s;
    clip-path: none!important;
    box-shadow: none!important;
    filter: brightness(.9);
    margin: 0!important
}

.hero-stat-card:first-child,.hero-stat-card:nth-child(3) {
    width: 220px;
    aspect-ratio: 481/188
}

.hero-stat-card:nth-child(2) {
    width: 280px;
    aspect-ratio: 551/216
}

.hero-stat-card:hover {
    transform: translateY(-4px);
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(200,160,80,.3))
}

.news-column::after,.news-column::before {
    top: -10px;
    transform: translateX(-50%);
    content: ''
}

.hero-stat-info {
    text-align: center!important;
    padding: 7px 0 8px 71px!important
}

.hero-stat-value {
    font-size: 18px;
    font-weight: 900;
    color: #e5b556;
    line-height: 1;
    letter-spacing: 1px
}

.hero-stat-label,.hero-streamers-link a {
    font-weight: 600;
    text-transform: uppercase
}

.hero-stat-value.online {
    color: #a0c0a0;
    font-size: 30px;
    text-shadow: 0 0 10px rgba(140,180,120,.4)
}

.hero-stat-label {
    font-size: 9px;
    color: #a09070;
    letter-spacing: 3px;
    text-shadow: 0 0 4px rgba(0,0,0,.5);
    margin-top: 2px
}

.hero-streams-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    max-width: 950px;
    margin: 0 auto
}

.hero-stream-card {
    padding: 0!important;
    aspect-ratio: 434/245;
    overflow: hidden;
    background: url('/assets/images/templates/streambg.png') center/100% 100% no-repeat!important;
    display: flex!important;
    justify-content: center
}

.hero-stream-player {
    background: #000;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
    z-index: 0
}

.hero-stream-player iframe {
    width: 100%!important;
    height: 100%!important;
    border: none;
    position: absolute;
    top: 0;
    left: 0
}

.hero-stream-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.hero-stream-label {
    position: absolute;
    bottom: 3%;
    left: 8%;
    right: 8%;
    color: #9a8a6a;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1
}

.hero-streamers-link {
    margin-top: 12px;
    text-align: center
}

.hero-streamers-link a {
    color: #5a5040;
    font-size: 11px;
    text-decoration: none;
    transition: color .25s;
    letter-spacing: 1px
}

.hero-streamers-link a:hover {
    color: #908070
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden
}

.mist-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    animation: 20s ease-in-out infinite mistRiseNews
}

.mist-1 {
    height: 50%;
    background: linear-gradient(0deg,rgba(8,6,4,.98) 0,rgba(8,6,4,.8) 10%,rgba(8,6,4,.5) 25%,rgba(8,6,4,.2) 45%,rgba(8,6,4,.05) 70%,transparent 100%);
    animation-duration: 16s
}

.mist-2 {
    height: 35%;
    background: linear-gradient(0deg,rgba(8,6,4,.9) 0,rgba(8,6,4,.5) 20%,rgba(8,6,4,.2) 40%,rgba(8,6,4,.05) 65%,transparent 100%);
    animation-duration: 20s;
    animation-delay: -5s
}

.mist-3 {
    height: 25%;
    background: linear-gradient(0deg,rgba(8,6,4,.7) 0,rgba(8,6,4,.3) 25%,rgba(8,6,4,.1) 50%,transparent 100%);
    animation-duration: 24s;
    animation-delay: -10s
}

.mist-4 {
    height: 18%;
    background: linear-gradient(0deg,rgba(8,6,4,.5) 0,rgba(8,6,4,.15) 35%,transparent 100%);
    animation-duration: 28s;
    animation-delay: -14s
}

.mist-5 {
    height: 12%;
    background: linear-gradient(0deg,rgba(8,6,4,.3) 0,rgba(8,6,4,.08) 50%,transparent 100%);
    animation-duration: 32s;
    animation-delay: -18s
}

@keyframes mistRiseNews {
    0%,100% {
        opacity: .5;
        transform: translateY(10px) scale(1.02)
    }

    50% {
        opacity: .95;
        transform: translateY(-10px) scale(.98)
    }
}

.ash-particles,.magic-dust {
    position: absolute;
    inset: 0
}

.magic-dust span {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: linear infinite floatDust;
    filter: blur(2px)
}

.magic-dust span:first-child {
    left: 5%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle,rgba(220,190,130,.8),rgba(160,120,60,0));
    animation-duration: 14s;
    animation-delay: 0s
}

.magic-dust span:nth-child(2) {
    left: 12%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,rgba(200,180,140,.7),transparent);
    animation-duration: 12s;
    animation-delay: 1.5s
}

.magic-dust span:nth-child(3) {
    left: 20%;
    width: 9px;
    height: 9px;
    background: radial-gradient(circle,rgba(240,200,110,.6),rgba(180,140,50,0));
    animation-duration: 18s;
    animation-delay: 3s;
    filter: blur(3px)
}

.magic-dust span:nth-child(4) {
    left: 28%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle,rgba(220,200,160,.8),transparent);
    animation-duration: 10s;
    animation-delay: .8s
}

.magic-dust span:nth-child(5) {
    left: 35%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,rgba(200,160,100,.7),rgba(140,100,40,0));
    animation-duration: 16s;
    animation-delay: 4s
}

.magic-dust span:nth-child(6) {
    left: 42%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle,rgba(180,150,120,.6),rgba(120,90,50,0));
    animation-duration: 13s;
    animation-delay: 2.2s;
    filter: blur(3px)
}

.magic-dust span:nth-child(7) {
    left: 50%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle,rgba(240,200,130,.75),transparent);
    animation-duration: 11s;
    animation-delay: .5s
}

.magic-dust span:nth-child(8) {
    left: 58%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle,rgba(200,170,110,.65),rgba(140,110,60,0));
    animation-duration: 15s;
    animation-delay: 3.5s
}

.magic-dust span:nth-child(9) {
    left: 65%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle,rgba(220,180,100,.5),rgba(160,120,40,0));
    animation-duration: 20s;
    animation-delay: 1s;
    filter: blur(4px)
}

.magic-dust span:nth-child(10) {
    left: 72%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,rgba(200,190,150,.8),transparent);
    animation-duration: 9s;
    animation-delay: 5s
}

@keyframes floatDust {
    0% {
        bottom: -30px;
        opacity: 0;
        transform: translateX(0) rotate(0) scale(.3)
    }

    5% {
        opacity: .8
    }

    15% {
        transform: translateX(-50px) scale(1)
    }

    30% {
        transform: translateX(25px) scale(1.15)
    }

    45% {
        transform: translateX(-35px) scale(.85)
    }

    60% {
        transform: translateX(20px) scale(1.05);
        opacity: .5
    }

    75% {
        transform: translateX(-25px) scale(.75);
        opacity: .25
    }

    90% {
        transform: translateX(15px) scale(.45);
        opacity: .05
    }

    100% {
        bottom: 115%;
        transform: translateX(-10px) scale(.2);
        opacity: 0
    }
}

.ash-particles span {
    position: absolute;
    border-radius: 2px;
    opacity: 0;
    animation: linear infinite fallAsh;
    background: radial-gradient(circle,rgba(60,50,40,.6),rgba(20,15,10,0));
    filter: blur(2px)
}

.ash-particles span:first-child {
    left: 5%;
    width: 14px;
    height: 14px;
    animation-duration: 20s;
    animation-delay: 0s
}

.ash-particles span:nth-child(2) {
    left: 12%;
    width: 18px;
    height: 18px;
    animation-duration: 24s;
    animation-delay: 2s;
    filter: blur(3px)
}

.ash-particles span:nth-child(3) {
    left: 20%;
    width: 10px;
    height: 10px;
    animation-duration: 18s;
    animation-delay: 5s
}

.ash-particles span:nth-child(4) {
    left: 28%;
    width: 20px;
    height: 20px;
    animation-duration: 28s;
    animation-delay: 1s;
    filter: blur(3px)
}

.ash-particles span:nth-child(5) {
    left: 35%;
    width: 12px;
    height: 12px;
    animation-duration: 22s;
    animation-delay: 3s
}

.ash-particles span:nth-child(6) {
    left: 42%;
    width: 16px;
    height: 16px;
    animation-duration: 26s;
    animation-delay: 7s;
    filter: blur(2px)
}

.ash-particles span:nth-child(7) {
    left: 50%;
    width: 11px;
    height: 11px;
    animation-duration: 19s;
    animation-delay: 4s
}

.ash-particles span:nth-child(8) {
    left: 58%;
    width: 19px;
    height: 19px;
    animation-duration: 30s;
    animation-delay: 6s;
    filter: blur(3px)
}

.ash-particles span:nth-child(9) {
    left: 65%;
    width: 13px;
    height: 13px;
    animation-duration: 21s;
    animation-delay: 8s
}

.ash-particles span:nth-child(10) {
    left: 72%;
    width: 15px;
    height: 15px;
    animation-duration: 25s;
    animation-delay: 2s;
    filter: blur(2px)
}

.ash-particles span:nth-child(11) {
    left: 80%;
    width: 9px;
    height: 9px;
    animation-duration: 17s;
    animation-delay: 9s
}

.ash-particles span:nth-child(12) {
    left: 88%;
    width: 20px;
    height: 20px;
    animation-duration: 29s;
    animation-delay: 3s;
    filter: blur(3px)
}

.ash-particles span:nth-child(13) {
    left: 95%;
    width: 12px;
    height: 12px;
    animation-duration: 23s;
    animation-delay: 1s
}

.ash-particles span:nth-child(14) {
    left: 8%;
    width: 16px;
    height: 16px;
    animation-duration: 27s;
    animation-delay: 5s;
    filter: blur(2px)
}

.ash-particles span:nth-child(15) {
    left: 18%;
    width: 10px;
    height: 10px;
    animation-duration: 20s;
    animation-delay: 10s
}

.ash-particles span:nth-child(16) {
    left: 32%;
    width: 18px;
    height: 18px;
    animation-duration: 31s;
    animation-delay: 4s;
    filter: blur(3px)
}

.ash-particles span:nth-child(17) {
    left: 48%;
    width: 13px;
    height: 13px;
    animation-duration: 22s;
    animation-delay: 7s
}

.ash-particles span:nth-child(18) {
    left: 62%;
    width: 15px;
    height: 15px;
    animation-duration: 26s;
    animation-delay: 2s;
    filter: blur(2px)
}

.ash-particles span:nth-child(19) {
    left: 78%;
    width: 11px;
    height: 11px;
    animation-duration: 19s;
    animation-delay: 8s
}

.ash-particles span:nth-child(20) {
    left: 92%;
    width: 17px;
    height: 17px;
    animation-duration: 24s;
    animation-delay: 6s;
    filter: blur(3px)
}

@keyframes fallAsh {
    0% {
        bottom: -20px;
        opacity: 0;
        transform: translateX(0) rotate(0)
    }

    5% {
        opacity: .5
    }

    30% {
        transform: translateX(40px) rotate(60deg)
    }

    50% {
        transform: translateX(-25px) rotate(120deg);
        opacity: .4
    }

    70% {
        transform: translateX(30px) rotate(200deg);
        opacity: .2
    }

    100% {
        bottom: 100%;
        transform: translateX(-15px) rotate(360deg);
        opacity: 0
    }
}

.sparkle-particles {
    position: absolute;
    inset: 0;
    z-index: 2
}

.sparkle-particles span {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    background: #f5e8d0;
    box-shadow: 0 0 4px #f0dca0,0 0 8px rgba(240,210,140,.6),0 0 16px rgba(220,180,100,.4),0 0 30px rgba(200,160,80,.2);
    animation: 3s ease-in-out infinite sparkleNew
}

.sparkle-particles span:first-child {
    left: 5%;
    bottom: 10%;
    animation-delay: 0s;
    width: 3px;
    height: 3px
}

.sparkle-particles span:nth-child(2) {
    left: 15%;
    bottom: 25%;
    animation-delay: .4s
}

.sparkle-particles span:nth-child(3) {
    left: 25%;
    bottom: 5%;
    animation-delay: .8s;
    width: 3px;
    height: 3px
}

.sparkle-particles span:nth-child(4) {
    left: 35%;
    bottom: 30%;
    animation-delay: .3s
}

.sparkle-particles span:nth-child(5) {
    left: 45%;
    bottom: 15%;
    animation-delay: 1s;
    width: 3px;
    height: 3px
}

.sparkle-particles span:nth-child(6) {
    left: 55%;
    bottom: 35%;
    animation-delay: .6s
}

.sparkle-particles span:nth-child(7) {
    left: 65%;
    bottom: 8%;
    animation-delay: 1.2s
}

.sparkle-particles span:nth-child(8) {
    left: 75%;
    bottom: 28%;
    animation-delay: .2s;
    width: 3px;
    height: 3px
}

.sparkle-particles span:nth-child(9) {
    left: 85%;
    bottom: 20%;
    animation-delay: .9s
}

.sparkle-particles span:nth-child(10) {
    left: 95%;
    bottom: 12%;
    animation-delay: .5s;
    width: 3px;
    height: 3px
}

@keyframes sparkleNew {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0)
    }

    10% {
        opacity: 1;
        transform: translateY(-20px) scale(1.5)
    }

    30% {
        opacity: .8;
        transform: translateY(-60px) scale(1)
    }

    50% {
        opacity: .4;
        transform: translateY(-100px) scale(.6)
    }

    80% {
        opacity: .1;
        transform: translateY(-150px) scale(.3)
    }

    100% {
        opacity: 0;
        transform: translateY(-200px) scale(0)
    }
}

.news-section {
    position: relative;
    z-index: 20 !important;
    padding: 30px 0 40px
	
}

.news-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto
}

.news-column {
    min-height: 250px;
    padding: 0;
    position: relative;
    box-shadow: 0 4px 0 #0a0806,0 8px 24px rgba(0,0,0,.7);
    clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
    transition: .3s;
    overflow: hidden
}

.news-column:first-child {
    background: url('/assets/images/templates/newsbg.png') center/100% 100% no-repeat!important
}

.news-column:last-child {
    background: url('/assets/images/templates/forumbg.png') center/100% 100% no-repeat!important
}

.news-column::before {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 12px;
    background: repeating-linear-gradient(0deg,#3a2a1a 0,#3a2a1a 3px,#1a1008 3px,#1a1008 4px);
    z-index: 2
}

.news-column::after {
    position: absolute;
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border: 2px solid #3a2a1a;
    border-radius: 50%;
    background: radial-gradient(circle,#5a4530,#2a1a0e);
    z-index: 2
}

.caravans-block:hover,.class-card:hover,.forts-block:hover,.rating-block:hover {
    transform: translateY(-2px)
}

.news-column .section-header {
    padding: 14px 14px 0 18px
}

.news-column .section-title {
    color: #d4a84b!important;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(212,168,75,.2)
}

.news-column .section-link {
    color: #8a6a3a;
    border: 1px solid rgba(212,168,75,.2);
    padding: 5px 12px;
    font-size: 10px;
    letter-spacing: 1px
}

.news-column .section-link:hover {
    color: #d4a84b;
    border-color: rgba(212,168,75,.4);
    background: rgba(212,168,75,.06)
}

.news-item-wrapper {
    background: rgba(5,3,2,.35)!important;
    margin: 8px!important;
    border-radius: 4px!important;
    padding: 8px 12px!important;
    min-height: 80px!important;
    border: 1px solid rgba(212,168,75,.06)!important
}

.news-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(212,168,75,.06)
}

.news-item:last-child {
    border-bottom: none
}

.news-item:hover {
    background: rgba(212,168,75,.04);
    padding-left: 6px;
    border-radius: 2px
}

.news-item-title {
    color: #c0a060!important;
    font-size: 12px;
    text-shadow: 0 0 4px rgba(212,168,75,.1)
}

.news-item-title:hover {
    color: #d4a84b!important
}

.news-item-meta {
    color: #7a6a4a!important;
    font-size: 10px
}

.news-card {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.02);
    align-items: flex-start
}

.news-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

.news-card-image {
    width: 45px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #1a1410;
    box-shadow: inset 0 0 0 1px rgba(200,160,80,.1),0 2px 6px rgba(0,0,0,.4)
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.news-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#1a1814,#0e0c08);
    width: 45px;
    height: 32px
}

.news-card-placeholder svg {
    width: 12px;
    height: 12px
}

.news-card-content {
    flex: 1;
    min-width: 0
}

.news-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #dfae5c;
    display: block;
    margin-bottom: 2px;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,.5)
}

.news-card-title:hover {
    color: #d4b878
}

.news-card-meta {
    font-size: 9px;
    color: #5a4a30;
    margin-bottom: 2px
}

.news-card-excerpt {
    font-size: 10px;
    line-height: 1.4
}

.news-card-footer {
    display: flex;
    justify-content: flex-end
}

.news-card-readmore {
    font-size: 9px;
    color: #6a5a3a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border: 1px solid rgba(140,100,40,.2)
}

.news-card-readmore:hover {
    color: #c0a060;
    border-color: rgba(180,130,50,.4);
    background: rgba(0,0,0,.2)
}
/* Улучшение читаемости текста в карточках */
.news-card-excerpt {
    color: #909090 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

/* Разделитель над текстом */
.news-card-content .news-card-excerpt {
    padding-top: 6px;
    border-top: 1px solid rgba(200,160,80,0.08);
}

/* Заголовок при наведении */
.news-card:hover .news-card-title {
    color: #e0b860 !important;
}

/* Карточка при наведении */
.news-card:hover {
    background: rgba(212,168,75,0.03);
    border-radius: 3px;
}
.stats-bg {
    background: #080704;
    position: relative;
    padding-top: 30px;
    border-bottom: 1px solid rgba(200,160,80,.1)
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px
}

.caravans-grid,.forts-grid,.ratings-grid {
    gap: 12px;
    margin: 0 auto 20px;
    justify-content: center;
    max-width: 1350px;
    display: grid
}

.section-title {
    font-size: 22px;
    font-weight: 900;
    color: #d4a84b;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(200,160,80,.3)
}

.section-link {
    font-size: 11px;
    color: #8a6a3a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(200,160,80,.2);
    padding: 6px 14px;
    transition: .25s
}

.section-link:hover {
    color: #d4a84b;
    border-color: rgba(200,160,80,.5);
    background: rgba(200,160,80,.05)
}

.forts-grid,.ratings-grid {
    grid-template-columns: repeat(4,1fr)
}

.caravans-grid {
    grid-template-columns: repeat(3,1fr)
}

.top-classes-section .container {
    max-width: 1650px
}

.classes-grid {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 10px;
    margin: 0 auto 10px;
    justify-content: center
}

.caravans-block,.forts-block,.rating-block {
    aspect-ratio: 1/1;
    padding: 0!important;
    clip-path: none!important;
    box-shadow: 0 0 15px rgba(0,0,0,.4)!important;
    transition: .3s;
    position: relative;
    background-size: 100% 100%!important;
    background-position: center!important;
    background-repeat: no-repeat!important
}

.caravans-block:nth-child(2),.caravans-block:nth-child(3),.rating-block:first-child {
    background-image: url('/assets/images/templates/block-pvp.png')!important
}

.rating-block:nth-child(2) {
    background-image: url('/assets/images/templates/block-clans.png')!important
}

.rating-block:nth-child(3) {
    background-image: url('/assets/images/templates/block-fame.png')!important
}

.rating-block:nth-child(4) {
    background-image: url('/assets/images/templates/block-achievements.png')!important
}

.forts-block:first-child {
    background-image: url('/assets/images/templates/block-fort.png')!important
}

.forts-block:nth-child(2) {
    background-image: url('/assets/images/templates/block-castle.png')!important
}

.forts-block:nth-child(3) {
    background-image: url('/assets/images/templates/block-epic.png')!important
}

.forts-block:nth-child(4) {
    background-image: url('/assets/images/templates/block-oly.png')!important
}

.caravans-block:first-child {
    background-image: url('/assets/images/templates/block-relic.png')!important
}

.caravans-block h3,.forts-block h3,.rating-block h3 {
    font-size: 14px;
    font-weight: 900;
    color: #f0d090;
    margin: 0;
    padding: 50px 0 20px!important;
    text-align: center!important;
    justify-content: center!important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Times New Roman',serif
}

.modal-close,.modal-overlay {
    display: flex;
    align-items: center
}

.caravans-block .table-wrap,.forts-block .table-wrap,.rating-block .table-wrap {
    padding: 6px 12px
}

.rating-table {
    width: 100%;
    padding: 0 5px 37px!important
}

.rating-table th {
    color: #c0a878;
    font-size: 12px;
    padding: 5px 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700
}

.rating-table td {
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,.02);
    font-size: 14px;
    color: #d0c0a0;
    font-weight: 500
}

.rating-table td:first-child {
    padding-left: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px
}

.rating-table td:last-child {
    padding-right: 13px;
    text-align: right;
    white-space: nowrap
}

.rating-table tr:hover td {
    background: rgba(200,160,80,.03)
}

.clan-crest {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 2px;
    border: 1px solid rgba(200,160,80,.12)
}

.rank {
    color: #d4a84b;
    font-weight: 800;
    margin-right: 6px;
    font-size: 11px
}

.text-right {
    color: #c0a878!important;
    font-weight: 700;
    font-size: 11px
}

.class-name,.class-player {
    font-size: 14px;
    font-weight: 700
}

.class-card {
    background: url('/assets/images/templates/class-btn.png') center/100% 100% no-repeat!important;
    border: none!important;
    padding: 14px 18px;
    clip-path: none!important;
    box-shadow: none!important;
    transition: .3s
}

.class-card:hover {
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(200,160,80,.4))
}

.class-name {
    color: #c0a878
}

.class-player {
    color: #d4a84b
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 9999;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(12px);
    animation: .2s fadeIn
}

.modal-container {
    background: linear-gradient(160deg,#1a1816,#12100e 40%,#0e0c0a);
    border: 1px solid rgba(120,100,70,.12);
    border-radius: 4px;
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: .35s cubic-bezier(.16,1,.3,1) modalIn;
    box-shadow: 0 40px 80px rgba(0,0,0,.8),0 0 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.02)
}

.modal-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 40px;
    right: 40px;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(120,100,70,.2),transparent);
    z-index: 1;
    pointer-events: none
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(.94) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    color: #6a6a6a;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    justify-content: center;
    transition: .25s
}

.modal-close:hover {
    background: rgba(160,50,40,.1);
    border-color: rgba(180,60,50,.3);
    color: #c07060;
    transform: rotate(90deg)
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px
}

.modal-left {
    padding: 50px 40px;
    background: linear-gradient(160deg,#1c1a18,#141210);
    border-radius: 4px 0 0 4px;
    position: relative;
    overflow: hidden
}

.modal-left-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%,rgba(120,100,70,.03) 0,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(80,80,80,.02) 0,transparent 60%);
    pointer-events: none
}

.modal-left-content {
    position: relative;
    z-index: 1
}

.modal-section-icon {
    width: 64px;
    height: 64px;
    border-radius: 2px;
    background: linear-gradient(135deg,rgba(120,100,70,.08),rgba(120,100,70,.02));
    border: 1px solid rgba(120,100,70,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.modal-left h2,.modal-right h2 {
    color: #c0b090;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -.5px;
    background: linear-gradient(180deg,#d4c8b0,#a09078);
    -webkit-background-clip: text;
    background-clip: text
}

.footer-col h4,.modal-reg-btn {
    text-transform: uppercase;
    letter-spacing: 2px
}

.modal-subtitle {
    color: #5a5a5a;
    font-size: 13px;
    margin-bottom: 24px;
    font-weight: 500
}

.modal-downloads {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px
}

.modal-dl-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255,255,255,.01);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 2px;
    color: inherit;
    transition: .3s
}

.modal-dl-card:hover {
    border-color: rgba(120,100,70,.2);
    background: rgba(20,18,14,.6);
    transform: translateX(6px)
}

.modal-dl-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 2px;
    background: rgba(120,100,70,.05);
    border: 1px solid rgba(120,100,70,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #908070;
    flex-shrink: 0;
    transition: color .25s
}

.modal-dl-card-info {
    flex: 1
}

.modal-dl-card-title {
    display: block;
    color: #a09078;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px
}

.modal-dl-card-size {
    display: block;
    color: #4a4a4a;
    font-size: 11px
}

.modal-dl-card-arrow {
    color: rgba(120,100,70,.3);
    font-size: 20px;
    transition: .3s;
    font-weight: 300
}

.modal-dl-card:hover .modal-dl-card-arrow {
    color: #908070;
    transform: translateX(4px)
}

.modal-steps {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.modal-step,.modal-step-num {
    align-items: center;
    font-size: 12px;
    display: flex
}

.modal-step {
    gap: 12px;
    color: #5a5a5a;
    font-weight: 500
}

.modal-step-num {
    width: 28px;
    height: 28px;
    border-radius: 2px;
    background: rgba(120,100,70,.05);
    border: 1px solid rgba(120,100,70,.08);
    justify-content: center;
    color: #908070;
    font-weight: 800;
    flex-shrink: 0
}

.modal-right {
    padding: 50px 40px;
    background: linear-gradient(160deg,#161412,#100e0c);
    border-radius: 0 4px 4px 0
}

.modal-reg-form {
    margin-top: 4px
}

.modal-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    background: rgba(255,255,255,.01);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 2px;
    padding: 0 16px;
    transition: .3s
}

.modal-input-group:focus-within {
    border-color: rgba(120,100,70,.2);
    background: rgba(20,18,16,.6);
    box-shadow: 0 0 20px rgba(0,0,0,.3)
}

.modal-input-icon {
    color: #3a3a3a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color .25s
}

.modal-input-group:focus-within .modal-input-icon {
    color: #908070
}

.modal-input {
    width: 100%;
    padding: 14px 0;
    background: 0 0;
    border: none;
    color: #a0a0a0;
    font-size: 14px;
    outline: 0;
    font-family: inherit
}

.modal-input::placeholder {
    color: #3a3a3a
}

.modal-reg-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg,rgba(120,100,70,.1),rgba(120,100,70,.04));
    border: 1px solid rgba(120,100,70,.2);
    border-radius: 2px;
    color: #a09078;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .3s
}

.modal-reg-btn:hover {
    border-color: rgba(140,120,80,.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    color: #c0b090
}

.modal-reg-btn:active {
    transform: scale(.98)
}

.modal-login-link {
    text-align: center;
    margin-top: 20px;
    color: #4a4a4a;
    font-size: 12px
}

.modal-login-link a {
    color: #908070;
    font-weight: 700;
    transition: color .2s
}

.modal-login-link a:hover {
    color: #c0b090
}

/* ===== ФУТЕР ===== */
.landing-footer {
    background: linear-gradient(180deg, rgba(10,8,6,.95), rgba(4,3,2,.98));
    border-top: 1px solid rgba(200,160,80,.1);
    padding: 0;
    position: relative;
}
.landing-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(200,160,80,.2), transparent);
}

/* Кнопки метрик — ряд по центру */
.footer-metrics {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 0px 0px;
    /* max-width: 900px; */
    margin: 0 auto;
}
.footer-metric-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    background: rgba(200,160,80,.05);
    border: 1px solid rgba(200,160,80,.12);
    color: #8a7a5a;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    min-width: 140px;
    transition: all .3s;
}
.footer-metric-btn:hover {
    background: rgba(200,160,80,.12);
    border-color: rgba(200,160,80,.3);
    color: #c0a878;
    transform: translateY(-2px);
}
.footer-metric-btn.empty {
    opacity: .2;
    cursor: default;
    pointer-events: none;
}

/* Разделитель между кнопками и колонками */
.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,160,80,.08), transparent);
    margin: 0 40px;
}

/* Основная сетка — 3 колонки */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 28px 0 0;
}
.footer-col {
    padding: 20px 30px 32px;
    text-align: center;
}
.footer-col h4 {
    color: #c0a878;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Times New Roman', serif;
}
.footer-col p {
    color: #5a4a3a;
    font-size: 12px;
    line-height: 1.7;
}
.footer-col ul {
    list-style: none;
}
.footer-col li {
    margin-bottom: 8px;
}
.footer-col a {
    color: #6a5a4a;
    font-size: 12px;
    text-decoration: none;
    transition: color .25s;
}
.footer-col a:hover {
    color: #c0a878;
}

/* Нижняя полоса */
.footer-bottom {
    text-align: center;
    padding: 14px 20px;
    color: #3a3028;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(255,255,255,.02);
}
::-webkit-scrollbar {
    width: 4px
}

::-webkit-scrollbar-track {
    background: #080808
}

::-webkit-scrollbar-thumb {
    background: #1a1816;
    border-radius: 2px
}
/* ===== FORUM TOPICS MODULE ===== */
.forum-section {
    padding: 40px 0;
}

.forum-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1350px;
    margin: 0 auto;
}

.forum-topic-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s;
}

.forum-topic-card:hover {
    transform: translateY(-3px);
}

.forum-topic-card-inner {
    background: linear-gradient(180deg, rgba(18,15,12,0.95), rgba(10,8,6,0.98));
    border: 1px solid rgba(200,160,80,0.1);
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.forum-topic-card:hover .forum-topic-card-inner {
    border-color: rgba(200,160,80,0.3);
}

.forum-topic-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.forum-topic-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #2a2018;
    object-fit: cover;
}

.forum-topic-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-topic-author {
    color: #c0a878;
    font-size: 12px;
    font-weight: 600;
}

.forum-topic-date {
    color: #5a4a3a;
    font-size: 10px;
}

.forum-topic-title {
    color: #a09078;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.4;
    flex: 1;
}

.forum-topic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.forum-topic-node {
    color: #6a5a4a;
    font-size: 10px;
}

.forum-topic-stats {
    color: #5a4a3a;
    font-size: 10px;
}

.forum-topic-last-reply {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.02);
}

.forum-topic-last-reply span {
    color: #4a3a2a;
    font-size: 10px;
}

@media (max-width: 900px) {
    .forum-topics-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}
@media(max-width: 1100px) {
    .forts-grid,.ratings-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media(max-width: 900px) {
    .hero-streams-grid {
        grid-template-columns:repeat(2,1fr);
        max-width: 600px
    }

    .news-layout {
        max-width: 100%
    }
}

@media(max-width: 600px) {
    .hero-section {
        padding:30px 0 24px
    }

    .classes-grid {
        grid-template-columns: 1fr 1fr
    }

    .section-title {
        font-size: 16px
    }

    .news-card-image {
        width: 45px;
        height: 32px
    }

    .news-card-title {
        font-size: 11px
    }

    .news-card-excerpt {
        font-size: 10px
    }
}

@media(max-width: 768px) {
    .hero-content,.hero-desc,.hero-streamers-link,.hero-tagline {
        text-align:center
    }

    .landing-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #0a0a0c;
        flex-direction: column;
        padding: 12px;
        border-bottom: 2px solid #1a1612;
        z-index: 99
    }

    .landing-nav.open {
        display: flex
    }

    .nav-burger {
        display: block
    }

    .hero-container {
        padding: 0 16px
    }

    .hero-content {
        max-width: 100%;
        margin: 0 auto!important
    }

    .hero-logo-img {
        margin: 0 auto 10px;
        max-width: 280px
    }

    .hero-streams-grid,.news-layout {
        margin: 0 auto;
        grid-template-columns: 1fr
    }

    .hero-logo-main {
        font-size: 36px;
        letter-spacing: 4px
    }

    .hero-logo-accent {
        font-size: 26px
    }

    .hero-tagline {
        font-size: 11px;
        letter-spacing: 3px
    }

    .hero-desc {
        font-size: 11px
    }

    .hero-actions-block,.hero-stats-row {
        flex-direction: column;
        align-items: center
    }

    .hero-btn {
        width: 220px;
        height: 52px;
        font-size: 11px
    }

    .hero-stat-card:first-child,.hero-stat-card:nth-child(2),.hero-stat-card:nth-child(3) {
        width: 220px!important
    }

    .hero-stat-value.online {
        font-size: 22px
    }

    .hero-stat-value {
        font-size: 14px
    }

    .hero-streams-grid {
        max-width: 300px
    }

    .hero-bonus-strip {
        max-width: 100%
    }

    .hero-logo-block::after {
        margin: 14px auto 0
    }

    .news-layout {
        max-width: 500px
    }

    .news-column {
        min-height: 250px
    }

    .news-item-wrapper {
        min-height: 80px
    }

    .modal-grid {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .modal-left {
        border-radius: 4px 4px 0 0;
        padding: 32px 24px
    }

    .modal-right {
        border-radius: 0 0 4px 4px;
        padding: 32px 24px
    }

    .hero-stat-card:nth-child(2),.hero-stat-card:nth-child(3) {
        display: none!important
    }

    .hero-stat-card:first-child {
        width: 200px;
        margin: 0 auto!important
    }

    .hero-stats-row {
        flex-direction: row!important;
        justify-content: center!important
    }

    .caravans-grid,.forts-grid,.ratings-grid {
        grid-template-columns: 1fr;
        grid-template-columns: 1fr!important;
        gap: 16px;
        max-width: 100%!important
    }

    .caravans-block,.forts-block,.rating-block {
        width: 100%!important;
        max-width: 100%!important;
        aspect-ratio: 1/1
    }

    .caravans-block h3,.forts-block h3,.rating-block h3 {
        padding: 60px 12px 8px!important;
        font-size: 12px
    }

    .rating-table td,.rating-table th {
        padding: 5px 8px;
        font-size: 10px
    }

    .container {
        padding: 0 12px
    }

    section {
        padding: 15px 0
    }
}

@media(max-width: 400px) {
    .hero-btn {
        width:100%!important;
        max-width: 220px
    }

    .caravans-block h3,.forts-block h3,.rating-block h3 {
        padding: 50px 10px 6px!important;
        font-size: 11px
    }

    .rating-table td,.rating-table th {
        padding: 4px 6px;
        font-size: 9px
    }
}
/* Адаптив */
@media(max-width:768px){
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-col {
        padding: 20px;
        border-bottom: 1px solid rgba(255,255,255,.02);
    }
    .footer-metrics {
        gap: 8px;
        padding: 24px 12px;
    }
    .footer-metric-btn {
        padding: 10px 18px;
        font-size: 10px;
        min-width: 90px;
    }
    .footer-divider {
        margin: 0 20px;
    }
}