/* ============================================================
   KRYPTIA.NET
   DARK NAVY / YELLOW / BLUE THEME
============================================================ */

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


/* ============================================================
   ROOT
============================================================ */

:root {

    --background:
        #070b13;

    --background-soft:
        #0a101b;

    --background-deep:
        #050810;


    --panel:
        #101724;

    --panel-soft:
        #121b2a;

    --panel-light:
        #172132;


    --yellow:
        #f3c74f;

    --yellow-light:
        #ffe38a;

    --yellow-dark:
        #c99a24;


    --blue:
        #438cff;

    --blue-light:
        #71adff;

    --cyan:
        #50c8e8;


    --green:
        #31d17c;

    --red:
        #ef4765;


    --text:
        #eef3fb;

    --text-soft:
        #c5cfdd;

    --muted:
        #8994a5;

    --muted-dark:
        #596678;


    --border:
        rgba(124, 151, 190, .16);

    --border-light:
        rgba(140, 170, 210, .25);

    --border-yellow:
        rgba(243, 199, 79, .30);

    --border-blue:
        rgba(67, 140, 255, .35);


    --radius-small:
        9px;

    --radius:
        14px;

    --radius-large:
        20px;

    --radius-xl:
        26px;


    --shadow:
        0 20px 55px
        rgba(0, 0, 0, .28);

    --shadow-large:
        0 35px 90px
        rgba(0, 0, 0, .45);


    --container:
        1180px;
}


/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    scroll-padding-top:
        100px;
}


body {

    margin:
        0;

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(67, 140, 255, .08),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 35%,
            rgba(243, 199, 79, .025),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #080d17 0%,
            #060a12 45%,
            #050810 100%
        );

    color:
        var(--text-soft);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        15px;

    line-height:
        1.65;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body.navigation-open,
body.cookie-modal-open {

    overflow:
        hidden;
}


::selection {

    background:
        rgba(243, 199, 79, .25);

    color:
        #ffffff;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
textarea,
select {

    font:
        inherit;
}


button {

    color:
        inherit;
}


img {

    display:
        block;

    max-width:
        100%;
}


.container {

    width:
        min(
            calc(100% - 44px),
            var(--container)
        );

    margin:
        0 auto;
}


/* ============================================================
   SCROLLBAR
============================================================ */

::-webkit-scrollbar {

    width:
        8px;
}


::-webkit-scrollbar-track {

    background:
        #050810;
}


::-webkit-scrollbar-thumb {

    border:
        2px solid
        #050810;

    border-radius:
        999px;

    background:
        #263246;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #3c4d68;
}


/* ============================================================
   BACKGROUND ELEMENTS
============================================================ */

.background-grid {

    position:
        fixed;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        .16;

    background-image:

        linear-gradient(
            rgba(92, 125, 168, .04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(92, 125, 168, .04) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


.background-glow {

    position:
        fixed;

    z-index:
        -4;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    filter:
        blur(140px);

    pointer-events:
        none;

    opacity:
        .07;
}


.glow-one {

    top:
        -230px;

    left:
        -160px;

    background:
        var(--blue);
}


.glow-two {

    right:
        -260px;

    top:
        45%;

    background:
        var(--yellow);
}


/* ============================================================
   HEADER
============================================================ */

.site-header {

    position:
        fixed;

    top:
        16px;

    left:
        0;

    right:
        0;

    z-index:
        1000;

    pointer-events:
        none;
}


.header-inner {

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    padding:
        8px 10px 8px 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    background:
        rgba(11, 17, 28, .91);

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .28);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    pointer-events:
        auto;
}


/* ============================================================
   BRAND
============================================================ */

.brand {

    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;
}


.brand img {

    width:
        130px;

    max-height:
        43px;

    object-fit:
        contain;

    transition:
        transform .2s ease;
}


.brand:hover img {

    transform:
        scale(1.025);
}


/* ============================================================
   NAVIGATION
============================================================ */

.navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    margin-left:
        auto;

    margin-right:
        14px;
}


.navigation a {

    position:
        relative;

    padding:
        10px 13px;

    border-radius:
        9px;

    color:
        #8b97a8;

    font-size:
        10px;

    font-weight:
        750;

    transition:
        color .2s ease,
        background .2s ease;
}


.navigation a:hover {

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .04);
}


.navigation a::after {

    content:
        "";

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        5px;

    height:
        2px;

    border-radius:
        999px;

    transform:
        scaleX(0);

    background:
        var(--yellow);

    transition:
        transform .2s ease;
}


.navigation a:hover::after {

    transform:
        scaleX(1);
}


/* ============================================================
   HEADER SERVER BUTTON
============================================================ */

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.server-button {

    min-height:
        43px;

    padding:
        0 16px;

    border:
        1px solid
        var(--border-yellow);

    border-radius:
        10px;

    background:
        rgba(243, 199, 79, .07);

    color:
        var(--yellow-light);

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.server-button:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(243, 199, 79, .55);

    background:
        rgba(243, 199, 79, .12);
}


/* ============================================================
   MOBILE MENU
============================================================ */

.mobile-menu-button {

    width:
        43px;

    height:
        43px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .03);

    cursor:
        pointer;
}


.mobile-menu-button span {

    width:
        17px;

    height:
        2px;

    border-radius:
        999px;

    background:
        #aab5c5;

    transition:
        .22s ease;
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(2) {

    opacity:
        0;
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.hero {

    position:
        relative;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    padding:
        135px 0 90px;

    overflow:
        hidden;
}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        900px;

    height:
        550px;

    left:
        50%;

    top:
        18%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(57, 111, 188, .10),
            transparent 68%
        );

    pointer-events:
        none;
}


.hero::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        min(1100px, 90%);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110, 140, 185, .18),
            transparent
        );
}


.hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    flex-direction:
        column;

    text-align:
        center;
}


/* ============================================================
   CONSTRUCTION BADGE
============================================================ */

.construction-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        0 13px;

    margin-bottom:
        8px;

    border:
        1px solid
        rgba(243, 199, 79, .23);

    border-radius:
        999px;

    background:
        rgba(243, 199, 79, .075);

    color:
        var(--yellow-light);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .18em;
}


/* ============================================================
   HERO NETWORK STATUS
============================================================ */

.hero-network-status {

    width:
        min(100%, 1240px);

    display:
        grid;

    grid-template-columns:
        minmax(190px, 240px)
        minmax(430px, 1fr)
        minmax(190px, 240px);

    align-items:
        center;

    column-gap:
        70px;

    margin:
        10px auto 22px;
}


/* ============================================================
   STATUS CARDS
============================================================ */

.hero-status-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        15px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #121a28,
            #0d1420
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .22);

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}


.hero-status-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--border-light);

    background:
        linear-gradient(
            145deg,
            #172132,
            #101824
        );
}


.minecraft-status-card:hover {

    border-color:
        rgba(243, 199, 79, .35);
}


.discord-status-card:hover {

    border-color:
        rgba(67, 140, 255, .40);
}


.hero-status-icon {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(243, 199, 79, .15);

    border-radius:
        11px;

    background:
        rgba(243, 199, 79, .08);

    color:
        var(--yellow);

    font-size:
        17px;
}


.discord-status-card
.hero-status-icon {

    border-color:
        rgba(67, 140, 255, .20);

    background:
        rgba(67, 140, 255, .10);

    color:
        var(--blue-light);
}


.hero-status-content {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.hero-status-label {

    color:
        #687588;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .18em;
}


.hero-status-content strong {

    overflow:
        hidden;

    color:
        #edf2fa;

    font-size:
        11px;

    font-weight:
        850;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.hero-status-sub {

    color:
        #647184;

    font-size:
        8px;

    font-weight:
        600;
}


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

.hero-logo-stage {

    position:
        relative;

    height:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    perspective:
        1000px;

    transform-style:
        preserve-3d;
}


.hero-logo-stage .hero-logo {

    position:
        relative;

    z-index:
        2;

    width:
        min(540px, 100%);

    max-width:
        none;

    max-height:
        220px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 18px 38px
            rgba(0, 0, 0, .35)
        );
}


.hero-logo-animated {

    animation:
        kryptiaLogoDepth
        5.5s
        ease-in-out
        infinite;
}


.hero-logo-glow {

    position:
        absolute;

    width:
        400px;

    height:
        120px;

    border-radius:
        50%;

    background:
        rgba(67, 140, 255, .09);

    filter:
        blur(60px);

    animation:
        kryptiaLogoGlow
        5.5s
        ease-in-out
        infinite;
}


@keyframes kryptiaLogoDepth {

    0%,
    100% {

        transform:
            translateZ(-75px)
            scale(.95);
    }

    50% {

        transform:
            translateZ(100px)
            scale(1.035);
    }
}


@keyframes kryptiaLogoGlow {

    0%,
    100% {

        opacity:
            .25;

        transform:
            scale(.85);
    }

    50% {

        opacity:
            .65;

        transform:
            scale(1.15);
    }
}


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

.hero-eyebrow,
.section-kicker {

    display:
        block;

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .21em;
}


.hero-eyebrow {

    margin-bottom:
        13px;
}


.hero h1 {

    max-width:
        850px;

    margin:
        0;

    color:
        #f4f7fc;

    font-size:
        clamp(
            42px,
            6vw,
            76px
        );

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.hero h1 span {

    color:
        var(--yellow);
}


.hero-description {

    max-width:
        650px;

    margin:
        22px auto 0;

    color:
        #8792a3;

    font-size:
        13px;

    line-height:
        1.8;
}


/* ============================================================
   BUTTONS
============================================================ */

.hero-actions,
.discord-actions {

    display:
        flex;

    align-items:
        center;


    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        27px;
}


.primary-button,
.secondary-button,
.discord-button {

    min-height:
        47px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 21px;

    border-radius:
        11px;

    font-size:
        10px;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.primary-button {

    border:
        1px solid
        #e6b83e;

    background:
        linear-gradient(
            135deg,
            #f6d568,
            #e7b938
        );

    color:
        #16130a;

    box-shadow:
        0 10px 30px
        rgba(243, 199, 79, .13);
}


.primary-button:hover {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #ffe488,
            #f0c74f
        );

    box-shadow:
        0 15px 40px
        rgba(243, 199, 79, .20);
}


.secondary-button {

    border:
        1px solid
        var(--border);

    background:
        #111824;

    color:
        #aab5c5;
}


.secondary-button:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--border-blue);

    background:
        #162132;

    color:
        #ffffff;
}


.discord-button {

    border:
        1px solid
        rgba(67, 140, 255, .45);

    background:
        linear-gradient(
            135deg,
            #438cff,
            #326bc8
        );

    color:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgba(67, 140, 255, .13);
}


.discord-button:hover {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #62a1ff,
            #3d7ee8
        );
}


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

.hero-meta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        30px;

    padding:
        11px 17px;

    border:
        1px solid
        rgba(125, 150, 185, .10);

    border-radius:
        999px;

    background:
        #0c121d;
}


.hero-meta > div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.meta-label {

    color:
        #586577;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .14em;
}


.hero-meta strong {

    color:
        #8996a8;

    font-size:
        8px;

    font-weight:
        700;
}


.meta-separator {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--yellow);
}


/* ============================================================
   SECTIONS
============================================================ */

.games-section,
.network-section,
.discord-section {

    position:
        relative;

    padding:
        105px 0;
}


.section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        40px;
}


.section-heading h2,
.network-copy h2,
.discord-content h2 {

    margin:
        8px 0 0;

    color:
        #f1f5fb;

    font-size:
        clamp(
            30px,
            4vw,
            47px
        );

    font-weight:
        850;

    line-height:
        1.08;

    letter-spacing:
        -.04em;
}


.section-heading > p {

    max-width:
        430px;

    margin:
        0;

    color:
        #7d899a;

    font-size:
        11px;

    line-height:
        1.75;
}


/* ============================================================
   GAME CARDS
============================================================ */

.games-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        17px;
}


.game-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    background:
        #0e1521;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .20);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.game-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(243, 199, 79, .28);

    box-shadow:
        0 25px 65px
        rgba(0, 0, 0, .32);
}


.game-image {

    position:
        relative;

    height:
        225px;

    overflow:
        hidden;

    background:
        #0a1019;
}


.game-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        saturate(.85)
        brightness(.78);

    transition:
        transform .5s ease,
        filter .5s ease;
}


.game-card:hover
.game-image img {

    transform:
        scale(1.045);

    filter:
        saturate(1)
        brightness(.9);
}


.image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 35%,
            rgba(8, 13, 22, .22) 60%,
            #0e1521 100%
        );
}


.game-status {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(243, 199, 79, .22);

    border-radius:
        999px;

    background:
        rgba(11, 16, 26, .82);

    color:
        var(--yellow-light);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    backdrop-filter:
        blur(10px);
}


.game-content {

    padding:
        21px;
}


.game-tag {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--yellow);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .18em;
}


.game-content h3 {

    margin:
        0;

    color:
        #eef3fb;

    font-size:
        21px;

    font-weight:
        850;

    letter-spacing:
        -.025em;
}


.game-content p {

    min-height:
        60px;

    margin:
        10px 0 19px;

    color:
        #798597;

    font-size:
        10px;

    line-height:
        1.7;
}


.game-footer {

    padding-top:
        14px;

    border-top:
        1px solid
        rgba(135, 160, 195, .09);
}


.game-footer span {

    color:
        #596678;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .14em;
}


/* ============================================================
   UNKNOWN GAME
============================================================ */

.unknown-game {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        10px;

    background:
        radial-gradient(
            circle,
            rgba(67, 140, 255, .06),
            transparent 50%
        ),
        #0a1019;
}


.question-mark {

    color:
        #35435a;

    font-size:
        55px;

    font-weight:
        900;
}


.unknown-game span {

    color:
        #48576d;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .20em;
}


/* ============================================================
   NETWORK
============================================================ */

.network-section {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(14, 22, 35, .45),
            transparent
        );
}


.network-panel {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, .85fr);

    align-items:
        center;

    gap:
        65px;

    padding:
        50px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        #0d141f;

    box-shadow:
        var(--shadow);
}


.network-copy p {

    max-width:
        550px;

    margin:
        20px 0 26px;

    color:
        #7c8899;

    font-size:
        11px;

    line-height:
        1.8;
}


/* ============================================================
   DEVELOPMENT
============================================================ */

.development-card {

    padding:
        21px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        #121a27;
}


.development-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        17px;
}


.development-header span {

    color:
        #667488;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .15em;
}


.development-header strong {

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        rgba(243, 199, 79, .09);

    color:
        var(--yellow);

    font-size:
        7px;

    font-weight:
        900;
}


.progress {

    height:
        5px;

    margin-bottom:
        20px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #222d3e;
}


.progress-bar {

    width:
        14%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #d8a92f,
            #f7d264
        );
}


.development-list {

    display:
        flex;

    flex-direction:
        column;
}


.development-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(130, 155, 190, .09);
}


.development-item:last-child {

    border-bottom:
        0;
}


.development-item span {

    color:
        #8995a5;

    font-size:
        9px;

    font-weight:
        650;
}


.development-item strong {

    font-size:
        7px;

    font-weight:
        850;
}


.development-item.completed strong {

    color:
        var(--green);
}


.development-item.active strong {

    color:
        var(--yellow);
}


.development-item.pending strong {

    color:
        #667488;
}


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

.discord-panel {

    position:
        relative;

    overflow:
        hidden;

    padding:
        54px;

    border:
        1px solid
        rgba(67, 140, 255, .20);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #101827,
            #0b121e
        );

    box-shadow:
        var(--shadow);
}


.discord-background {

    position:
        absolute;

    width:
        500px;

    height:
        400px;

    right:
        -200px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(67, 140, 255, .08);

    filter:
        blur(100px);

    pointer-events:
        none;
}


.discord-layout {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, .7fr);

    align-items:
        center;

    gap:
        60px;
}


.discord-content h2 span {

    color:
        var(--blue-light);
}


.discord-content p {

    max-width:
        620px;

    margin:
        19px 0 0;

    color:
        #7f8b9d;

    font-size:
        11px;

    line-height:
        1.8;
}


.discord-invite {

    color:
        #657286;

    font-size:
        9px;

    font-weight:
        700;
}


.discord-info {

    padding:
        22px;

    border:
        1px solid
        rgba(110, 145, 195, .14);

    border-radius:
        14px;

    background:
        #121a28;
}


.discord-info-label {

    margin-bottom:
        9px;

    color:
        var(--blue-light);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .16em;
}


.discord-info > strong {

    display:
        block;

    color:
        #edf3ff;

    font-size:
        18px;

    font-weight:
        800;
}


.discord-info p {

    margin:
        10px 0 17px;

    color:
        #778497;

    font-size:
        10px;

    line-height:
        1.7;
}


.discord-info-line {

    height:
        1px;

    margin-bottom:
        14px;

    background:
        rgba(100, 135, 190, .15);
}


.discord-info > span {

    color:
        #8794a6;

    font-size:
        9px;

    font-weight:
        700;
}


/* ============================================================
   COPY MESSAGE
============================================================ */

.copy-message {

    position:
        fixed;

    left:
        50%;

    bottom:
        25px;

    z-index:
        9990;

    padding:
        11px 16px;

    border:
        1px solid
        var(--border-yellow);

    border-radius:
        10px;

    background:
        #121a27;

    color:
        var(--yellow-light);

    font-size:
        10px;

    font-weight:
        750;

    box-shadow:
        var(--shadow);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(-50%, 15px);

    transition:
        .22s ease;
}


.copy-message.visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, 0);
}


/* ============================================================
   FOOTER
============================================================ */

.site-footer {

    padding:
        65px 0 25px;

    border-top:
        1px solid
        rgba(125, 150, 185, .09);

    background:
        #060a11;
}


.footer-main {

    display:
        grid;

    grid-template-columns:
        1.5fr
        repeat(3, 1fr);

    gap:
        50px;

    padding-bottom:
        42px;
}


.footer-logo img {

    width:
        145px;

    margin-bottom:
        16px;
}


.footer-about p {

    max-width:
        320px;

    margin:
        0;

    color:
        #637083;

    font-size:
        10px;

    line-height:
        1.75;
}


.footer-column {

    display:
        flex;

    align-items:
        flex-start;

    flex-direction:
        column;

    gap:
        9px;
}


.footer-heading {

    margin-bottom:
        5px;

    color:
        #9ca8b8;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .15em;
}


.footer-column a,
.footer-column > span:not(.footer-heading),
.footer-link-button {

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #657286;

    font-size:
        9px;

    cursor:
        pointer;

    transition:
        color .2s ease;
}


.footer-column a:hover,
.footer-link-button:hover {

    color:
        var(--yellow);
}


.footer-socials a {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.footer-socials i {

    width:
        16px;

    color:
        #788699;
}


.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(125, 150, 185, .08);
}


.footer-bottom p {

    margin:
        0;

    color:
        #4d596b;

    font-size:
        8px;
}


.footer-bottom a {

    color:
        #788699;
}


.footer-bottom a:hover {

    color:
        var(--yellow);
}


/* ============================================================
   COOKIE FLOATING BUTTON
============================================================ */

.cookie-floating-button {

    position:
        fixed;

    left:
        18px;

    bottom:
        18px;

    z-index:
        9995;

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(93, 126, 177, .32);

    border-radius:
        50%;

    background:
        #111827;

    color:
        #d6a77e;

    font-size:
        16px;

    cursor:
        pointer;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .35);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.cookie-floating-button:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(243, 199, 79, .45);

    background:
        #182235;
}


/* ============================================================
   INITIAL COOKIE BANNER
============================================================ */

.cookie-consent {

    position:
        fixed;

    left:
        20px;

    bottom:
        20px;

    z-index:
        9997;

    width:
        min(
            470px,
            calc(100vw - 40px)
        );

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(18px)
        scale(.98);

    transition:
        opacity .28s ease,
        visibility .28s ease,
        transform .28s ease;
}


.cookie-consent.cookie-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0)
        scale(1);
}


.cookie-consent[hidden] {

    display:
        none;
}


.cookie-consent-inner {

    padding:
        22px;

    border:
        1px solid
        rgba(82, 119, 177, .34);

    border-radius:
        16px;

    background:
        #111a2a;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, .48);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


.cookie-title-row {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        10px;
}


.cookie-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(92, 124, 177, .25);

    border-radius:
        10px;

    background:
        #172135;

    color:
        #d8a37d;

    font-size:
        14px;
}


.cookie-title-row strong {

    color:
        #f2f5fb;

    font-size:
        14px;

    font-weight:
        850;
}


.cookie-consent-content p {

    margin:
        0;

    color:
        #8d98aa;

    font-size:
        10px;

    line-height:
        1.65;
}


.cookie-consent-content a {

    color:
        var(--blue-light);

    text-decoration:
        underline;
}


.cookie-consent-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    margin-top:
        18px;
}


.cookie-button {

    min-height:
        42px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(125, 150, 190, .20);

    border-radius:
        10px;

    background:
        #1a2231;

    color:
        #d5dce7;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.cookie-button:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(90, 145, 230, .40);

    background:
        #202b3e;
}


.cookie-settings {

    border-color:
        rgba(67, 140, 255, .36);

    background:
        #172844;

    color:
        #cfe0ff;
}


.cookie-accept {

    grid-column:
        1 / -1;

    border-color:
        #d8aa32;

    background:
        linear-gradient(
            135deg,
            #f6d467,
            #dfa92c
        );

    color:
        #17130a;

    box-shadow:
        0 10px 28px
        rgba(243, 199, 79, .16);
}


.cookie-accept:hover {

    border-color:
        #ffe48b;

    background:
        linear-gradient(
            135deg,
            #ffe58e,
            #f2c64c
        );
}


/* ============================================================
   COOKIE SETTINGS MODAL
============================================================ */

.cookie-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


.cookie-modal.cookie-modal-visible {

    opacity:
        1;

    visibility:
        visible;
}


.cookie-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(2, 5, 11, .76);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.cookie-modal-panel {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            605px,
            100%
        );

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        0;

    border:
        1px solid
        rgba(76, 112, 169, .42);

    border-radius:
        16px;

    background:
        #111a2a;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .62);

    transform:
        translateY(14px)
        scale(.98);

    transition:
        transform .25s ease;
}


.cookie-modal-visible
.cookie-modal-panel {

    transform:
        translateY(0)
        scale(1);
}


/* ============================================================
   COOKIE MODAL HEADER
============================================================ */

.cookie-modal-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 22px;

    border-bottom:
        1px solid
        rgba(120, 145, 180, .14);
}


.cookie-modal-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.cookie-modal-heading-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(90, 120, 170, .26);

    border-radius:
        50%;

    background:
        #172136;

    color:
        #d8a37d;
}


.cookie-modal-header h2 {

    margin:
        0;

    color:
        #f2f5fb;

    font-size:
        16px;

    font-weight:
        850;
}


.cookie-modal-close {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(120, 145, 180, .15);

    border-radius:
        9px;

    background:
        #182131;

    color:
        #8996a8;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.cookie-modal-close:hover {

    color:
        #ffffff;

    border-color:
        rgba(243, 199, 79, .35);

    background:
        #202b3e;
}


/* ============================================================
   COOKIE OWNER LINKS
============================================================ */

.cookie-owner {

    padding:
        0 22px 17px;

    color:
        #8995a6;

    font-size:
        10px;
}


.cookie-owner strong {

    color:
        #dce3ee;
}


.cookie-owner a {

    color:
        var(--blue-light);

    text-decoration:
        underline;
}


/* ============================================================
   COOKIE OPTIONS
============================================================ */

.cookie-modal-body {

    padding:
        0 22px;
}


.cookie-option {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        17px 0;

    border-top:
        1px solid
        rgba(120, 145, 180, .14);
}


.cookie-option-content {

    min-width:
        0;
}


.cookie-option-content strong {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #edf2fa;

    font-size:
        12px;

    font-weight:
        800;
}


.cookie-option-content p {

    margin:
        0;

    color:
        #808c9e;

    font-size:
        9px;

    line-height:
        1.55;
}


/* ============================================================
   SWITCH
============================================================ */

.cookie-switch {

    position:
        relative;

    width:
        46px;

    height:
        25px;

    flex:
        0 0 46px;

    cursor:
        pointer;
}


.cookie-switch input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.cookie-switch span {

    position:
        absolute;

    inset:
        0;

    border-radius:
        999px;

    background:
        #354258;

    transition:
        background .2s ease;
}


.cookie-switch span::after {

    content:
        "";

    position:
        absolute;

    top:
        4px;

    left:
        4px;

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    background:
        #a8b1bf;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, .3);

    transition:
        transform .2s ease,
        background .2s ease;
}


.cookie-switch
input:checked + span {

    background:
        var(--green);
}


.cookie-switch
input:checked + span::after {

    transform:
        translateX(21px);

    background:
        #ffffff;
}


.cookie-switch-required {

    opacity:
        .62;

    cursor:
        not-allowed;
}


/* ============================================================
   COOKIE MODAL FOOTER
============================================================ */

.cookie-modal-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    padding:
        20px 22px;

    border-top:
        1px solid
        rgba(120, 145, 180, .14);
}


.cookie-modal-footer
.cookie-accept {

    grid-column:
        auto;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

    .hero-network-status {

        width:
            min(100%, 760px);

        grid-template-columns:
            1fr 1fr;

        column-gap:
            14px;

        row-gap:
            22px;
    }


    .hero-logo-stage {

        grid-column:
            1 / -1;

        grid-row:
            1;

        height:
            215px;
    }


    .hero-logo-stage
    .hero-logo {

        width:
            min(480px, 84vw);

        max-height:
            195px;
    }


    .discord-status-card {

        grid-column:
            1;

        grid-row:
            2;
    }


    .minecraft-status-card {

        grid-column:
            2;

        grid-row:
            2;
    }


    .network-panel {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .discord-layout {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .footer-main {

        grid-template-columns:
            1.5fr 1fr 1fr;

        gap:
            35px;
    }


    .footer-socials {

        grid-column:
            2 / -1;
    }
}


/* ============================================================
   MOBILE NAVIGATION
============================================================ */

@media (max-width: 950px) {

    .site-header {

        top:
            9px;
    }


    .header-inner {

        min-height:
            59px;

        padding:
            7px 8px 7px 14px;

        border-radius:
            14px;
    }


    .brand img {

        width:
            112px;
    }


    .mobile-menu-button {

        display:
            flex;
    }


    .server-button {

        display:
            none;
    }


    .navigation {

        position:
            absolute;

        top:
            calc(100% + 8px);

        left:
            0;

        right:
            0;

        display:
            flex;

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            3px;

        margin:
            0;

        padding:
            9px;

        border:
            1px solid
            var(--border);

        border-radius:
            14px;

        background:
            #0e1623;

        box-shadow:
            var(--shadow-large);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-8px);

        transition:
            .22s ease;
    }


    .navigation.open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);
    }


    .navigation a {

        padding:
            12px 13px;
    }


    .navigation a::after {

        display:
            none;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 760px) {

    .container {

        width:
            min(
                calc(100% - 26px),
                var(--container)
            );
    }


    .hero {

        min-height:
            auto;

        padding:
            105px 0 70px;
    }


    .hero-network-status {

        width:
            100%;

        grid-template-columns:
            1fr 1fr;

        column-gap:
            8px;

        row-gap:
            18px;
    }


    .hero-logo-stage {

        height:
            165px;
    }


    .hero-logo-stage
    .hero-logo {

        width:
            min(380px, 94vw);

        max-height:
            150px;
    }


    .hero-logo-glow {

        width:
            270px;

        height:
            80px;
    }


    .hero-status-card {

        min-height:
            70px;

        padding:
            10px;

        gap:
            8px;
    }


    .hero-status-icon {

        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

        font-size:
            13px;
    }


    .hero-status-label {

        font-size:
            5px;
    }


    .hero-status-content strong {

        font-size:
            8px;
    }


    .hero-status-sub {

        display:
            none;
    }


    .hero h1 {

        font-size:
            clamp(
                37px,
                12vw,
                53px
            );
    }


    .hero-description {

        font-size:
            11px;
    }


    .hero-actions {

        width:
            100%;
    }


    .primary-button,
    .secondary-button {

        flex:
            1;

        min-width:
            140px;
    }


    .games-section,
    .network-section,
    .discord-section {

        padding:
            72px 0;
    }


    .section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

        margin-bottom:
            28px;
    }


    .games-grid {

        grid-template-columns:
            1fr;
    }


    .game-image {

        height:
            210px;
    }


    .game-content p {

        min-height:
            0;
    }


    .network-panel,
    .discord-panel {

        padding:
            26px 20px;

        border-radius:
            17px;
    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            28px 20px;
    }


    .footer-about {

        grid-column:
            1 / -1;
    }


    .footer-socials {

        grid-column:
            auto;
    }


    .footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;
    }


    /* COOKIE */

    .cookie-floating-button {

        left:
            10px;

        bottom:
            10px;

        width:
            42px;

        height:
            42px;
    }


    .cookie-consent {

        left:
            10px;

        right:
            10px;

        bottom:
            10px;

        width:
            auto;
    }


    .cookie-consent-inner {

        padding:
            17px;
    }


    .cookie-consent-actions {

        grid-template-columns:
            1fr;
    }


    .cookie-accept {

        grid-column:
            auto;
    }


    .cookie-modal {

        padding:
            9px;
    }


    .cookie-modal-panel {

        border-radius:
            14px;
    }


    .cookie-modal-header {

        padding:
            17px;
    }


    .cookie-owner {

        padding:
            0 17px 14px;
    }


    .cookie-modal-body {

        padding:
            0 17px;
    }


    .cookie-option {

        gap:
            15px;

        padding:
            15px 0;
    }


    .cookie-modal-footer {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        padding:
            16px 17px;
    }


    .cookie-modal-footer
    .cookie-accept {

        grid-column:
            1 / -1;
    }
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

    .hero-logo-stage {

        height:
            145px;
    }


    .hero-logo-stage
    .hero-logo {

        width:
            94vw;

        max-height:
            135px;
    }


    .hero-actions {

        flex-direction:
            column;
    }


    .primary-button,
    .secondary-button {

        width:
            100%;
    }


    .hero-meta {

        width:
            100%;

        justify-content:
            space-between;

        gap:
            7px;

        border-radius:
            12px;
    }


    .footer-main {

        grid-template-columns:
            1fr;
    }


    .footer-about,
    .footer-socials {

        grid-column:
            auto;
    }


    .cookie-modal-footer {

        grid-template-columns:
            1fr;
    }


    .cookie-modal-footer
    .cookie-accept {

        grid-column:
            auto;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* ============================================================
   KRYPTIA
   OLD BACKGROUND + TYPOGRAPHY FIX
   Ganz unten in style.css einfügen
============================================================ */


/* ============================================================
   OLD KRYPTIA BACKGROUND
============================================================ */

body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(45, 204, 241, .10) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 35%,
            rgba(45, 204, 241, .045) 0%,
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 55%,
            rgba(29, 112, 154, .045) 0%,
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #03070c 0%,
            #050b11 45%,
            #03070c 100%
        );

    background-attachment: fixed;

    font-size: 16px;
}


/* Alte dezente Hintergrundstruktur */

.background-grid {
    position: fixed;
    inset: 0;

    z-index: -5;

    pointer-events: none;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(45, 204, 241, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 204, 241, .025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0, 0, 0, .7) 50%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0, 0, 0, .7) 50%,
            transparent 100%
        );
}


/* Cyan Background Glows */

.background-glow {
    position: fixed;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(150px);

    opacity: .09;
}


.glow-one {
    width: 600px;
    height: 600px;

    top: -300px;
    left: -220px;

    background: #2dccf1;
}


.glow-two {
    width: 650px;
    height: 650px;

    right: -350px;
    top: 40%;

    background: #176d91;
}


/* ============================================================
   GENERAL TYPOGRAPHY
============================================================ */

body {
    color: #a6b2bf;

    line-height: 1.7;
}


p {
    font-size: 14px;
}


.hero-description {
    max-width: 680px;

    font-size: 15px;

    line-height: 1.75;

    color: #8998a6;
}


/* ============================================================
   NAVIGATION
============================================================ */

.navigation a {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: .01em;
}


.server-button {
    font-size: 12px;
}


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

.construction-badge {
    font-size: 9px;
}


.hero-eyebrow,
.section-kicker {
    font-size: 10px;
}


.hero h1 {
    font-size: clamp(
        44px,
        5.5vw,
        72px
    );
}


.hero-description {
    font-size: 15px;
}


/* ============================================================
   STATUS CARDS
============================================================ */

.hero-status-label {
    font-size: 8px;
}


.hero-status-content strong {
    font-size: 13px;
}


.hero-status-sub {
    font-size: 10px;
}


/* ============================================================
   BUTTONS
============================================================ */

.primary-button,
.secondary-button,
.discord-button {
    font-size: 12px;
}


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

.meta-label {
    font-size: 8px;
}


.hero-meta strong {
    font-size: 10px;
}


/* ============================================================
   SECTION HEADINGS
============================================================ */

.section-heading h2,
.network-copy h2,
.discord-content h2 {
    font-size: clamp(
        32px,
        4vw,
        46px
    );
}


.section-heading > p {
    font-size: 14px;

    line-height: 1.7;
}


/* ============================================================
   GAME CARDS
============================================================ */

.game-status {
    font-size: 8px;
}


.game-tag {
    font-size: 8px;
}


.game-content h3 {
    font-size: 22px;
}


.game-content p {
    font-size: 13px;

    line-height: 1.7;
}


.game-footer span {
    font-size: 8px;
}


.unknown-game span {
    font-size: 9px;
}


/* ============================================================
   NETWORK
============================================================ */

.network-copy p {
    font-size: 14px;

    line-height: 1.75;
}


.development-header span {
    font-size: 9px;
}


.development-header strong {
    font-size: 9px;
}


.development-item span {
    font-size: 12px;
}


.development-item strong {
    font-size: 9px;
}


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

.discord-content p {
    font-size: 14px;

    line-height: 1.75;
}


.discord-invite {
    font-size: 11px;
}


.discord-info-label {
    font-size: 9px;
}


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


.discord-info p {
    font-size: 12px;
}


.discord-info > span {
    font-size: 11px;
}


/* ============================================================
   FOOTER
============================================================ */

.footer-about p {
    font-size: 12px;

    line-height: 1.7;
}


.footer-heading {
    font-size: 9px;
}


.footer-column a,
.footer-column > span:not(.footer-heading),
.footer-link-button {
    font-size: 11px;
}


.footer-bottom p {
    font-size: 10px;
}


/* ============================================================
   COOKIE BANNER TYPOGRAPHY
============================================================ */

.cookie-title-row strong {
    font-size: 16px;
}


.cookie-consent-content p {
    font-size: 12px;

    line-height: 1.65;
}


.cookie-button {
    font-size: 11px;

    font-weight: 800;
}


/* ============================================================
   COOKIE SETTINGS TYPOGRAPHY
============================================================ */

.cookie-modal-header h2 {
    font-size: 18px;
}


.cookie-owner {
    font-size: 12px;
}


.cookie-option-content strong {
    font-size: 14px;
}


.cookie-option-content p {
    font-size: 11px;

    line-height: 1.55;
}


/* ============================================================
   MOBILE TYPOGRAPHY
============================================================ */

@media (max-width: 760px) {

    body {
        font-size: 14px;
    }


    .navigation a {
        font-size: 12px;
    }


    .hero h1 {
        font-size: clamp(
            36px,
            11vw,
            50px
        );
    }


    .hero-description {
        font-size: 13px;
    }


    .hero-status-label {
        font-size: 7px;
    }


    .hero-status-content strong {
        font-size: 10px;
    }


    .section-heading > p,
    .network-copy p,
    .discord-content p {
        font-size: 13px;
    }


    .game-content p {
        font-size: 12px;
    }


    .cookie-title-row strong {
        font-size: 14px;
    }


    .cookie-consent-content p {
        font-size: 11px;
    }


    .cookie-option-content strong {
        font-size: 13px;
    }


    .cookie-option-content p {
        font-size: 10px;
    }


    .cookie-button {
        font-size: 10px;
    }
}

/* ============================================================
   KRYPTIA.NET
   OLD GRID BACKGROUND + DESIGN POLISH
   Ganz unten in style.css einfügen
============================================================ */


/* ============================================================
   BACKGROUND
============================================================ */

html {
    background: #03070c;
}

body {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(45, 204, 241, .07) 0%,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #050a10 0%,
            #03070c 45%,
            #020509 100%
        );

    background-attachment: fixed;

    color: #a5b0bd;
}


/* ============================================================
   OLD SQUARE GRID

   Das ist wieder der sichtbare quadratische Hintergrund.
============================================================ */

.background-grid {
    position: fixed;

    inset: 0;

    z-index: -3;

    opacity: 1;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(66, 151, 185, .065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(66, 151, 185, .065) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    background-position:
        center center;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.75) 60%,
            rgba(0,0,0,.35) 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.75) 60%,
            rgba(0,0,0,.35) 100%
        );
}


/* kleineres zweites Grid für etwas mehr Tiefe */

.background-grid::after {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(71, 171, 207, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(71, 171, 207, .025) 1px,
            transparent 1px
        );

    background-size:
        13px 13px;
}


/* ============================================================
   BACKGROUND GLOWS
============================================================ */

.background-glow {
    position: fixed;

    z-index: -2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(150px);

    opacity: .10;
}


.glow-one {
    width: 600px;
    height: 600px;

    top: -320px;
    left: -220px;

    background: #1aa8d1;
}


.glow-two {
    width: 650px;
    height: 650px;

    right: -350px;
    top: 38%;

    background: #135d82;

    opacity: .055;
}


/* ============================================================
   HEADER POLISH
============================================================ */

.header-inner {
    border:
        1px solid
        rgba(84, 128, 166, .22);

    background:
        linear-gradient(
            135deg,
            rgba(10, 18, 29, .94),
            rgba(6, 13, 21, .94)
        );

    box-shadow:
        0 14px 45px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.navigation a {
    color: #8997a5;

    font-size: 12px;
}


.navigation a:hover {
    color: #e9f3f7;

    background:
        rgba(57, 184, 220, .055);
}


/* ============================================================
   GENERAL PANEL POLISH
============================================================ */

.game-card,
.network-panel,
.discord-panel,
.development-card,
.discord-info,
.hero-status-card {
    border-color:
        rgba(75, 122, 158, .20);

    box-shadow:
        0 18px 55px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.018);
}


/* ============================================================
   GAME CARDS
============================================================ */

.game-card {
    background:
        linear-gradient(
            145deg,
            rgba(13, 23, 34, .96),
            rgba(7, 14, 22, .97)
        );
}


.game-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(243, 199, 79, .30);

    box-shadow:
        0 25px 65px rgba(0,0,0,.32),
        0 0 35px rgba(243,199,79,.025);
}


.game-content {
    padding: 23px;
}


.game-content h3 {
    color: #edf4f7;

    font-size: 23px;
}


.game-content p {
    color: #8b98a5;

    font-size: 13px;
}


/* ============================================================
   NETWORK PANEL
============================================================ */

.network-panel {
    background:
        linear-gradient(
            135deg,
            rgba(12, 22, 33, .95),
            rgba(6, 14, 22, .97)
        );
}


.development-card {
    background:
        rgba(15, 27, 40, .78);
}


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

.discord-panel {
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(52, 116, 214, .09),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(13, 23, 37, .97),
            rgba(7, 14, 23, .97)
        );
}


/* ============================================================
   HERO STATUS CARDS
============================================================ */

.hero-status-card {
    border:
        1px solid
        rgba(72, 126, 165, .21);

    background:
        linear-gradient(
            145deg,
            rgba(14, 27, 40, .94),
            rgba(7, 16, 25, .96)
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.hero-status-card:hover {
    border-color:
        rgba(61, 195, 230, .34);

    background:
        linear-gradient(
            145deg,
            rgba(17, 34, 49, .97),
            rgba(8, 19, 29, .98)
        );
}


/* ============================================================
   YELLOW ACCENT
============================================================ */

.hero-eyebrow,
.section-kicker,
.game-tag {
    color: #f1c75b;
}


.primary-button {
    border:
        1px solid
        rgba(255, 218, 103, .75);

    background:
        linear-gradient(
            135deg,
            #f4d46b,
            #e5b83e
        );

    color: #171309;

    box-shadow:
        0 10px 30px rgba(231,184,62,.12);
}


.primary-button:hover {
    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #ffe58a,
            #efc64e
        );

    box-shadow:
        0 15px 38px rgba(231,184,62,.18);
}


/* ============================================================
   TEXT
============================================================ */

.hero-description,
.section-heading > p,
.network-copy p,
.discord-content p {
    color: #8c99a6;

    font-size: 14px;

    line-height: 1.75;
}


.section-heading h2,
.network-copy h2,
.discord-content h2 {
    color: #eef4f7;

    font-weight: 850;

    letter-spacing: -.035em;
}


.section-kicker {
    font-size: 9px;

    letter-spacing: .17em;
}


/* ============================================================
   STATUS TEXT
============================================================ */

.hero-status-label {
    font-size: 8px;

    color: #667887;
}


.hero-status-content strong {
    font-size: 13px;

    color: #e5eef2;
}


.hero-status-sub {
    font-size: 10px;

    color: #70808d;
}


/* ============================================================
   COOKIE BUTTON

   Mehr wie dein Screenshot:
   kleiner Kreis unten links.
============================================================ */

.cookie-floating-button {
    left: 14px;
    bottom: 14px;

    width: 44px;
    height: 44px;

    border:
        1px solid
        rgba(77, 121, 166, .32);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #101a2b,
            #0b1220
        );

    color: #d5a37e;

    box-shadow:
        0 12px 35px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.035);
}


.cookie-floating-button:hover {
    transform:
        translateY(-2px)
        scale(1.04);

    border-color:
        rgba(243,199,79,.42);

    background:
        #152237;
}


/* ============================================================
   COOKIE POPUP
============================================================ */

.cookie-consent-inner,
.cookie-modal-panel {
    border:
        1px solid
        rgba(77, 121, 166, .35);

    background:
        linear-gradient(
            145deg,
            #111b2c,
            #0c1422
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.025);
}


.cookie-title-row strong {
    font-size: 15px;
}


.cookie-consent-content p {
    color: #929eac;

    font-size: 12px;
}


.cookie-option-content strong {
    color: #e8eef4;

    font-size: 13px;
}


.cookie-option-content p {
    color: #8794a3;

    font-size: 11px;
}


/* ============================================================
   SEPARATORS
============================================================ */

.game-footer,
.footer-bottom,
.cookie-option,
.cookie-modal-header,
.cookie-modal-footer {
    border-color:
        rgba(79, 119, 151, .14);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 760px) {

    /*
     * Grid etwas kleiner auf Mobile.
     * Dadurch wirkt es nicht riesig hinter dem Content.
     */

    .background-grid {
        background-size:
            38px 38px;
    }


    .background-grid::after {
        background-size:
            9.5px 9.5px;
    }


    .hero-description,
    .section-heading > p,
    .network-copy p,
    .discord-content p {
        font-size: 13px;
    }


    .hero-status-content strong {
        font-size: 10px;
    }


    .hero-status-label {
        font-size: 7px;
    }


    .cookie-floating-button {
        left: 10px;
        bottom: 10px;

        width: 42px;
        height: 42px;
    }

}

/* ============================================================
   KRYPTIA.NET
   NAVIGATION + HERO STATUS POLISH
============================================================ */


/* ============================================================
   DESKTOP HEADER
   Breiter und flacher
============================================================ */

.site-header {
    top: 18px;
}

.header-inner {
    width: min(calc(100% - 54px), 1380px);

    min-height: 72px;

    padding: 8px 12px 8px 26px;

    border:
        1px solid
        rgba(68, 126, 158, .26);

    border-radius: 17px;

    background:
        rgba(5, 14, 23, .93);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .025);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* Logo */

.brand {
    flex: 0 0 auto;
}

.brand img {
    width: 145px;
    max-height: 48px;
}


/* ============================================================
   DESKTOP NAVIGATION
============================================================ */

.navigation {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-left: auto;
    margin-right: 22px;
}

.navigation a {
    position: relative;

    padding: 14px 12px;

    border-radius: 8px;

    color: #82909d;

    font-size: 13px;
    font-weight: 700;

    transition:
        color .2s ease,
        background .2s ease;
}

.navigation a:hover {
    color: #edf5f8;

    background:
        rgba(58, 183, 218, .04);
}


/* kleine gelbe Linie */

.navigation a::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 7px;

    height: 2px;

    border-radius: 20px;

    background: #f0c653;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .22s ease;
}

.navigation a:hover::after {
    transform: scaleX(1);
}


/* ============================================================
   SERVER BUTTON
============================================================ */

.server-button {
    min-width: 112px;
    min-height: 46px;

    padding: 0 18px;

    border:
        1px solid
        rgba(238, 190, 57, .40);

    border-radius: 11px;

    background:
        rgba(238, 190, 57, .075);

    color: #f3d06a;

    font-size: 12px;
    font-weight: 800;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

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

    border-color:
        rgba(245, 204, 84, .68);

    background:
        rgba(238, 190, 57, .12);
}


/* ============================================================
   STATUS
   Alte große Pill deutlich entschärfen
============================================================ */

.hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    width: auto;

    margin: 26px auto 0;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


/* einzelne Statusinformationen */

.hero-meta > div {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 0;

    background: transparent;
}


/* STATUS / EDITION / SERVER */

.meta-label {
    color: #4d6270;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .16em;
}


/* Werte */

.hero-meta strong {
    color: #81909c;

    font-size: 10px;
    font-weight: 700;
}


/* Status etwas hervorheben */

.hero-meta > div:first-child strong {
    color: #d5b64d;
}


/* kleine Punkte zwischen den Informationen */

.meta-separator {
    width: 3px;
    height: 3px;

    flex: 0 0 3px;

    margin: 0 5px;

    border-radius: 50%;

    background: #e5bd43;

    box-shadow:
        0 0 8px rgba(229, 189, 67, .25);
}


/* ============================================================
   BURGER
   KEIN BORDER / KEIN KASTEN
============================================================ */

.mobile-menu-button {
    position: relative;

    width: 44px;
    height: 44px;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    margin-left: auto;
    padding: 0;

    border: 0 !important;
    outline: 0;

    border-radius: 0;

    background: transparent !important;

    box-shadow: none !important;

    cursor: pointer;
}


/* Burger Linien */

.mobile-menu-button span {
    display: block;

    width: 22px;
    height: 2px;

    border-radius: 999px;

    background: #91a0ab;

    transform-origin: center;

    transition:
        transform .28s cubic-bezier(.4, 0, .2, 1),
        opacity .18s ease,
        background .2s ease;
}


.mobile-menu-button:hover span {
    background: #f1c653;
}


/* ============================================================
   BURGER -> X ANIMATION
============================================================ */

.mobile-menu-button[aria-expanded="true"] span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;

    transform:
        scaleX(0);
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}

.mobile-menu-button[aria-expanded="true"] span {
    background: #f0c653;
}


/* ============================================================
   MOBILE NAVIGATION
============================================================ */

@media (max-width: 950px) {

    .site-header {
        top: 10px;
    }


    .header-inner {
        position: relative;

        width: min(calc(100% - 22px), 1380px);

        min-height: 62px;

        padding:
            7px 13px
            7px 17px;

        border-radius: 15px;
    }


    .brand img {
        width: 125px;
        max-height: 43px;
    }


    /* wichtig:
       Burger wirklich rechts */

    .header-actions {
        margin-left: auto;
    }


    .server-button {
        display: none;
    }


    .mobile-menu-button {
        display: flex;
    }


    /* ========================================================
       MOBILE DROPDOWN
    ======================================================== */

    .navigation {
        position: absolute;

        top: calc(100% + 9px);

        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 2px;

        margin: 0;
        padding: 9px;

        border:
            1px solid
            rgba(65, 119, 153, .26);

        border-radius: 14px;

        background:
            rgba(6, 15, 24, .98);

        box-shadow:
            0 25px 60px
            rgba(0, 0, 0, .45);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-8px)
            scale(.985);

        transform-origin: top center;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;
    }


    .navigation.open {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(0)
            scale(1);
    }


    .navigation a {
        width: 100%;

        padding: 13px 14px;

        border-radius: 9px;

        color: #8797a4;

        font-size: 12px;

        text-align: left;
    }


    .navigation a:hover {
        color: #eef5f7;

        background:
            rgba(51, 175, 210, .065);
    }


    .navigation a::after {
        display: none;
    }


    /* Status auf Mobile */

    .hero-meta {
        gap: 8px;

        margin-top: 22px;
    }


    .meta-label {
        font-size: 6px;
    }


    .hero-meta strong {
        font-size: 8px;
    }


    .meta-separator {
        margin: 0 2px;
    }
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 520px) {

    .header-inner {
        width: calc(100% - 18px);

        min-height: 59px;

        padding:
            6px 9px
            6px 14px;
    }


    .brand img {
        width: 112px;
    }


    .mobile-menu-button {
        width: 40px;
        height: 40px;
    }


    .mobile-menu-button span {
        width: 20px;
    }


    /* Status darf umbrechen,
       statt eine riesige Pill zu erzeugen */

    .hero-meta {
        max-width: 100%;

        flex-wrap: wrap;

        row-gap: 5px;
        column-gap: 8px;
    }
}

.minecraft-disclaimer {
    margin-top: 5px !important;

    color: #3f4d5a !important;

    font-size: 9px !important;

    font-weight: 500;

    letter-spacing: .015em;
}