:root{
    --red:#ed101c;
    --red-dark:#96000a;
    --bg:#030405;
    --panel:#0b0d0f;
    --panel2:#111316;
    --border:#31353a;
    --text:#f4f4f4;
    --muted:#9c9fa4;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 20%,rgba(180,0,10,.08),transparent 25%),
        radial-gradient(circle at 88% 60%,rgba(180,0,10,.06),transparent 22%),
        #030405;
    font-family:Arial,Helvetica,sans-serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{
    color:inherit;
}

.topbar{
    height:62px;
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    gap:22px;
    padding:0 6.5%;
    background:rgba(3,4,5,.96);
    border-bottom:1px solid #292c30;
    box-shadow:0 8px 30px #0008;
    backdrop-filter:blur(12px);
}

.brand{
    min-width:190px;
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
}

.brand img{
    width:62px;
    height:48px;
    object-fit:contain;
    filter:drop-shadow(0 0 7px #000);
}

.brand span{
    display:grid;
}

.brand b{
    font:900 15px Impact,Arial Narrow,sans-serif;
    letter-spacing:.08em;
}

.brand small{
    font-size:7px;
    letter-spacing:.13em;
}

#main-nav{
    height:100%;
    flex:1;
    display:flex;
    align-items:stretch;
    justify-content:center;
}

#main-nav a{
    position:relative;
    display:flex;
    align-items:center;
    padding:0 17px;
    color:#d6d7d9;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
    transition:.25s ease;
}

#main-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    right:50%;
    bottom:0;
    height:2px;
    background:var(--red);
    box-shadow:0 0 11px var(--red);
    transition:.25s ease;
}

#main-nav a:hover,
#main-nav a.active{
    color:#fff;
    background:linear-gradient(#18000366,transparent);
}

#main-nav a:hover::after,
#main-nav a.active::after{
    left:14%;
    right:14%;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:13px;
}

.header-icon{
    text-decoration:none;
    font-size:20px;
}

.login-button{
    text-decoration:none;
    border:1px solid var(--red);
    border-radius:4px;
    padding:10px 20px;
    font-size:9px;
    font-weight:900;
    color:white;
    box-shadow:inset 0 0 12px #b0000822;
}

.mobile-menu{
    display:none;
    margin-left:auto;
    border:0;
    background:none;
    color:#fff;
    font-size:24px;
}

/* ===================================================
   HERO
=================================================== */

.hero{
    height:490px;
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    background:#000;
    border-bottom:1px solid #1f2225;
}

.hero-half{
    background-size:cover;
    background-position:center;
    transform:scale(1.03);
    will-change:transform,background-position;
}

.hero-scum{
    background-image:url('/assets/scum-survival-v2.png');
    animation:scumMove 22s ease-in-out infinite alternate;
}

.hero-wows{
    background-image:url('/assets/warships-battle-v2.png');
    animation:wowsMove 25s ease-in-out infinite alternate;
}

.hero-overlay{
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15) 0,
            transparent 30%,
            rgba(0,0,0,.62) 47%,
            rgba(0,0,0,.68) 53%,
            transparent 70%,
            rgba(0,0,0,.10) 100%
        ),
        linear-gradient(
            0deg,
            #050607 0,
            rgba(5,6,7,.65) 7%,
            transparent 40%
        ),
        radial-gradient(
            ellipse at center,
            transparent 0,
            rgba(0,0,0,.18) 45%,
            rgba(0,0,0,.40) 100%
        );
}

.hero-red-splatter{
    position:absolute;
    z-index:3;
    left:50%;
    top:0;
    bottom:0;
    width:310px;
    transform:translateX(-50%) skewX(-8deg);
    pointer-events:none;
    opacity:.5;
    background:
        linear-gradient(125deg,transparent 20%,#a8000d33 35%,transparent 37%),
        linear-gradient(105deg,transparent 35%,#ef101c77 48%,transparent 51%),
        linear-gradient(72deg,transparent 50%,#8c000b33 61%,transparent 63%);
    filter:blur(.2px);
}

.hero-center{
    position:absolute;
    z-index:8;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-top:12px;
    text-shadow:0 4px 12px #000;
}

.hero-logo{
    width:340px;
    height:210px;
    object-fit:contain;
    margin-bottom:-25px;
    filter:
        drop-shadow(0 8px 12px #000)
        drop-shadow(0 0 11px #e4101c55);
    animation:logoFloat 7s ease-in-out infinite;
}

.hero-center h1{
    margin:0;
    display:grid;
    line-height:.88;
}

.hero-center h1 span{
    color:#ef1620;
    font:900 38px Impact,Arial Narrow,sans-serif;
    letter-spacing:.07em;
}

.hero-center h1 b{
    font:900 32px Impact,Arial Narrow,sans-serif;
    letter-spacing:.06em;
}

.hero-center p{
    margin:16px 0 18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.32em;
}

.hero-buttons{
    display:flex;
    gap:18px;
}

.button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 28px;
    border-radius:4px;
    color:#fff;
    text-decoration:none;
    font-size:10px;
    font-weight:900;
    letter-spacing:.03em;
    transition:.25s ease;
}

.button.red{
    background:linear-gradient(135deg,#ff1624,#ca000d);
    box-shadow:0 0 18px #ef101c33;
}

.button.dark{
    border:1px solid #dedede;
    background:#090b0dd9;
}

.button:hover{
    transform:translateY(-2px);
}

.button.red:hover{
    box-shadow:
        0 0 15px #ef101c77,
        0 0 35px #ef101c33;
}

.hero-game-label{
    position:absolute;
    z-index:6;
    top:195px;
    display:grid;
    text-shadow:0 5px 12px #000;
}

.hero-game-label strong{
    font:900 55px/.85 Impact,Arial Narrow,sans-serif;
    letter-spacing:.025em;
}

.hero-game-label span{
    margin-top:13px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.28em;
}

.hero-game-left{
    left:7%;
    text-align:left;
}

.hero-game-right{
    right:6%;
    max-width:290px;
    text-align:right;
}

.hero-game-right strong{
    font-size:39px;
}

/* ===================================================
   STATS
=================================================== */

.stats-strip{
    position:relative;
    z-index:12;
    min-height:74px;
    margin:-1px 2.7% 17px;
    padding:0 25px;
    display:grid;
    grid-template-columns:repeat(4,minmax(130px,1fr)) 1.25fr;
    border:1px solid #34383d;
    border-radius:5px;
    background:
        linear-gradient(90deg,#0b0d0f,#111416 48%,#090b0d);
    box-shadow:
        0 8px 25px #0008,
        inset 0 0 25px #000;
}

.stats-strip article{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    border-right:1px solid #26292d;
}

.stat-icon{
    font-size:27px;
    filter:grayscale(1);
}

.stats-strip article div{
    display:grid;
}

.stats-strip strong{
    font-size:23px;
    line-height:1;
}

.stats-strip b{
    margin-top:3px;
    font-size:10px;
    letter-spacing:.06em;
}

.stats-strip small{
    margin-top:2px;
    color:#8e9298;
    font-size:8px;
}

.stats-strip blockquote{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#e8e8e8;
    font-size:9px;
    line-height:1.45;
    font-style:italic;
    letter-spacing:.12em;
}

/* ===================================================
   HAUPTBEREICH
=================================================== */

.triple-grid{
    display:grid;
    grid-template-columns:1fr 1.35fr 1fr;
    gap:18px;
    padding:0 2.7% 17px;
}

.feature-card,
.section-block{
    min-width:0;
}

.section-heading{
    min-height:41px;
    display:flex;
    align-items:center;
    gap:9px;
}

.section-heading>span{
    width:3px;
    height:24px;
    background:var(--red);
    box-shadow:0 0 9px #ef101c99;
}

.section-heading h2{
    margin:0;
    font:900 20px Impact,Arial Narrow,sans-serif;
    letter-spacing:.025em;
}

.line-heading{
    border-bottom:1px solid #24272b;
    margin-bottom:10px;
}

.line-heading a{
    margin-left:auto;
    color:var(--red);
    text-decoration:none;
    font-size:9px;
    font-weight:900;
}

/* ===================================================
   SERVERCARDS
=================================================== */

.server-box{
    height:238px;
    display:grid;
    grid-template-columns:41% 59%;
    overflow:hidden;
    border:1px solid #33373c;
    border-radius:5px;
    background:#0a0c0e;
    box-shadow:inset 0 0 25px #000;
}

.server-image{
    position:relative;
    min-width:0;
}

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

.server-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,#0a0c0e);
}

.server-info{
    padding:13px 15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.server-status{
    align-self:flex-start;
    margin-bottom:10px;
    padding:5px 10px;
    border-radius:4px;
    background:#32c747;
    box-shadow:0 0 12px #32c74755;
    font-size:9px;
    font-weight:900;
}

.server-status.ready{
    background:#276db7;
}

.server-data{
    display:grid;
    grid-template-columns:73px 1fr;
    gap:6px 8px;
    font-size:10px;
}

.server-data b{
    color:#aeb1b5;
}

.server-address{
    word-break:break-word;
}

.server-connect{
    margin-top:13px;
    min-height:35px;
    width:100%;
    border:0;
    border-radius:3px;
    background:var(--red);
    color:#fff;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}

/* ===================================================
   EVENT
=================================================== */

.event-box{
    height:238px;
    position:relative;
    overflow:hidden;
    border:1px solid #363a3f;
    border-radius:5px;
    background:#0a0c0e;
}

.event-box>img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.event-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,#07090af2 0,#07090aa8 45%,transparent 78%),
        linear-gradient(0deg,#07090aa9,transparent 40%);
}

.event-content{
    position:absolute;
    z-index:3;
    inset:0;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
}

.event-content h3{
    margin:0;
    font:900 37px/.9 Impact,Arial Narrow,sans-serif;
    text-transform:uppercase;
}

.event-content h3 span{
    color:var(--red);
}

.event-meta{
    margin-top:8px;
    font-size:10px;
    font-weight:800;
}

.event-description{
    max-width:70%;
    margin:7px 0 10px;
    color:#c9cbce;
    font-size:9px;
}

.event-buttons{
    display:flex;
    gap:9px;
}

.event-buttons .button{
    min-height:32px;
    padding:0 14px;
    font-size:8px;
}

.countdown{
    position:absolute;
    z-index:5;
    top:10px;
    right:10px;
    display:grid;
    grid-template-columns:repeat(4,52px);
    gap:3px;
}

.countdown div{
    padding:6px 4px;
    display:grid;
    text-align:center;
    background:#0b0c0ddd;
    border:1px solid #35383c;
}

.countdown strong{
    font-size:17px;
}

.countdown span{
    color:#aaa;
    font-size:7px;
}

/* ===================================================
   NEWS
=================================================== */

.section-block{
    padding:0 2.7% 18px;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.news-card{
    height:132px;
    display:grid;
    grid-template-columns:40% 60%;
    overflow:hidden;
    border:1px solid #31353a;
    border-radius:5px;
    background:#0b0d0f;
    transition:.25s ease;
}

.news-card:hover{
    transform:translateY(-3px);
    border-color:#751019;
}

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

.news-card div{
    min-width:0;
    padding:10px;
}

.news-card small{
    color:#a5a8ac;
    font-size:8px;
}

.news-card h3{
    margin:5px 0;
    font-size:11px;
}

.news-card p{
    margin:0;
    color:#a9acb0;
    font-size:9px;
    line-height:1.4;
}

/* ===================================================
   MEMBER
=================================================== */

.member-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
}

.member-card{
    min-height:107px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px;
    border:1px solid #31353a;
    border-radius:5px;
    background:#0b0d0f;
}

.member-card img{
    width:64px;
    height:76px;
    object-fit:cover;
    border-radius:3px;
}

.member-card div{
    display:grid;
}

.member-card strong{
    font-size:12px;
}

.member-card b{
    margin-top:3px;
    color:var(--red);
    font-size:8px;
}

.member-card small{
    margin-top:5px;
    color:#85898e;
    font-size:8px;
}

.status-dot::before{
    content:"";
    width:6px;
    height:6px;
    margin-right:4px;
    display:inline-block;
    border-radius:50%;
    background:#3ad163;
    box-shadow:0 0 7px #3ad163;
}

.status-dot.offline::before{
    background:#555;
    box-shadow:none;
}

.status-dot.event::before{
    background:#ee1721;
    box-shadow:0 0 7px #ee1721;
}

/* ===================================================
   DISCORD
=================================================== */

.discord-banner{
    margin:0 2.7% 20px;
    min-height:95px;
    display:grid;
    grid-template-columns:80px 1fr 115px 115px 190px;
    align-items:center;
    gap:15px;
    padding:14px 26px;
    overflow:hidden;
    position:relative;
    border:1px solid #3a181b;
    border-radius:5px;
    background:
        linear-gradient(90deg,#140406,#0b0d0f 40%,#120305);
}

.discord-banner::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background:
        repeating-linear-gradient(
            120deg,
            transparent 0,
            transparent 80px,
            #f10b1816 82px,
            transparent 90px
        );
}

.discord-symbol{
    position:relative;
    z-index:2;
    font-size:54px;
}

.discord-copy,
.discord-stats,
.discord-banner .button{
    position:relative;
    z-index:2;
}

.discord-copy small{
    color:var(--red);
    font-size:8px;
    font-weight:900;
}

.discord-copy h2{
    margin:2px 0;
    font:900 25px Impact,Arial Narrow,sans-serif;
}

.discord-copy p{
    margin:0;
    color:#aaa;
    font-size:9px;
}

.discord-stats{
    display:grid;
    text-align:center;
}

.discord-stats strong{
    font-size:19px;
}

.discord-stats span{
    color:#aaa;
    font-size:8px;
}

/* ===================================================
   GALLERY / PARTNER
=================================================== */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}

.gallery-card{
    height:190px;
    position:relative;
    overflow:hidden;
    margin:0;
    border:1px solid #31353a;
    border-radius:5px;
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 4s ease;
}

.gallery-card:hover img{
    transform:scale(1.04);
}

.gallery-card figcaption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:35px 13px 11px;
    background:linear-gradient(transparent,#050607);
    font-size:11px;
    font-weight:800;
}

.gallery-card figcaption span{
    display:block;
    margin-top:2px;
    color:var(--red);
    font-size:8px;
}

.partner-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}

.partner-card{
    min-height:85px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    color:#fff;
    text-decoration:none;
    border:1px solid #31353a;
    border-radius:5px;
    background:#0b0d0f;
}

.partner-card img{
    width:62px;
    height:62px;
    object-fit:contain;
}

.partner-card div{
    display:grid;
}

.partner-card strong{
    font-size:12px;
}

.partner-card span{
    margin-top:4px;
    color:#888c91;
    font-size:9px;
}

/* ===================================================
   ABOUT + FOOTER
=================================================== */

.about-section{
    margin:0 2.7% 22px;
    padding:26px 30px;
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:35px;
    border:1px solid #302426;
    border-radius:5px;
    background:
        linear-gradient(115deg,#160307,#0b0d0f 50%,#08090a);
}

.about-section small{
    color:var(--red);
    font-size:9px;
    font-weight:900;
    letter-spacing:.15em;
}

.about-section h2{
    margin:4px 0 0;
    font:900 27px Impact,Arial Narrow,sans-serif;
}

.about-section p{
    margin:0;
    align-self:center;
    color:#b3b6ba;
    line-height:1.7;
}

footer{
    min-height:86px;
    display:flex;
    align-items:center;
    padding:15px 5%;
    gap:30px;
    border-top:1px solid #282b2f;
    background:#060708;
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.footer-brand img{
    width:64px;
    height:55px;
    object-fit:contain;
}

.footer-brand div{
    display:grid;
}

.footer-brand b{
    font-size:10px;
}

.footer-brand span{
    margin-top:3px;
    color:#767a7f;
    font-size:7px;
}

.footer-nav{
    margin-left:auto;
    display:flex;
    gap:20px;
}

.footer-nav a{
    color:#999da2;
    text-decoration:none;
    font-size:8px;
}

#toast{
    position:fixed;
    z-index:500;
    right:25px;
    bottom:25px;
    padding:12px 18px;
    border-radius:4px;
    background:#111417;
    border:1px solid #3b3f44;
    color:#fff;
    font-size:10px;
    transform:translateY(20px);
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}

#toast.show{
    opacity:1;
    transform:translateY(0);
}

/* ===================================================
   ANIMATION
=================================================== */

@keyframes scumMove{
    from{
        transform:scale(1.03);
        background-position:47% 50%;
    }
    to{
        transform:scale(1.085);
        background-position:52% 48%;
    }
}

@keyframes wowsMove{
    from{
        transform:scale(1.03);
        background-position:48% 50%;
    }
    to{
        transform:scale(1.09);
        background-position:54% 49%;
    }
}

@keyframes logoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-6px);
    }
}

body.motion-off .hero-half,
body.motion-off .hero-logo{
    animation:none!important;
}

/* ===================================================
   RESPONSIVE
=================================================== */

@media(max-width:1200px){

    #main-nav a{
        padding:0 10px;
    }

    .hero-game-label strong{
        font-size:43px;
    }

    .hero-game-right strong{
        font-size:31px;
    }

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

    .news-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:900px){

    .topbar{
        padding:0 15px;
    }

    .brand span{
        display:none;
    }

    .mobile-menu{
        display:block;
    }

    #main-nav{
        display:none;
        position:absolute;
        top:62px;
        left:0;
        right:0;
        height:auto;
        padding:10px;
        flex-direction:column;
        background:#060708f8;
    }

    #main-nav.open{
        display:flex;
    }

    #main-nav a{
        min-height:42px;
        justify-content:center;
    }

    .header-icon{
        display:none;
    }

    .hero{
        height:530px;
    }

    .hero-game-label{
        top:auto;
        bottom:31px;
    }

    .hero-game-label strong{
        font-size:29px;
    }

    .hero-game-label span{
        display:none;
    }

    .hero-logo{
        width:250px;
        height:170px;
    }

    .hero-center h1 span{
        font-size:30px;
    }

    .hero-center h1 b{
        font-size:25px;
    }

    .hero-center p{
        font-size:9px;
        letter-spacing:.15em;
    }

    .stats-strip{
        grid-template-columns:1fr 1fr;
        padding:8px;
    }

    .stats-strip article{
        min-height:75px;
    }

    .stats-strip blockquote{
        grid-column:1/-1;
        padding:12px;
    }

    .triple-grid{
        grid-template-columns:1fr;
    }

    .member-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid,
    .partner-grid{
        grid-template-columns:1fr 1fr;
    }

    .discord-banner{
        grid-template-columns:60px 1fr 1fr;
    }

    .discord-banner .button{
        grid-column:1/-1;
    }

    .about-section{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){

    .login-button{
        padding:9px 11px;
        font-size:8px;
    }

    .hero{
        height:490px;
    }

    .hero-center{
        padding-top:0;
    }

    .hero-logo{
        width:205px;
        height:150px;
    }

    .hero-center h1 b{
        font-size:21px;
    }

    .hero-center p{
        max-width:80%;
        line-height:1.5;
    }

    .hero-buttons{
        flex-direction:column;
        gap:8px;
    }

    .button{
        min-height:40px;
    }

    .hero-game-left{
        left:15px;
    }

    .hero-game-right{
        right:15px;
    }

    .hero-game-label strong{
        font-size:19px;
    }

    .stats-strip{
        grid-template-columns:1fr 1fr;
        margin-left:8px;
        margin-right:8px;
    }

    .triple-grid,
    .section-block{
        padding-left:8px;
        padding-right:8px;
    }

    .server-box{
        grid-template-columns:38% 62%;
    }

    .countdown{
        grid-template-columns:repeat(4,42px);
    }

    .news-grid,
    .member-grid,
    .gallery-grid,
    .partner-grid{
        grid-template-columns:1fr;
    }

    .discord-banner{
        margin-left:8px;
        margin-right:8px;
        grid-template-columns:55px 1fr;
    }

    .discord-stats{
        display:none;
    }

    footer{
        flex-direction:column;
    }

    .footer-nav{
        margin:0;
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media(prefers-reduced-motion:reduce){
    *{
        scroll-behavior:auto!important;
    }

    .hero-half,
    .hero-logo{
        animation:none!important;
    }
}