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

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


html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #a855f7 #0d0912;
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: #0d0912;
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(#b76cff, #6d28d9);
    border: 3px solid #0d0912;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #d4a4ff;
}


body {

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    color: white;

    overflow-x: hidden;

    background:

            linear-gradient(
                    180deg,
                    #08060b 0%,
                    #0b0710 35%,
                    #0d0912 60%,
                    #08060b 100%
            );

}


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


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


/* =========================================
   VARIABLES
========================================= */

:root {

    --background: #08060b;

    --purple: #a855f7;

    --purple-light: #c77dff;

    --purple-dark: #261536;

    --text-muted:
            rgba(255, 255, 255, 0.68);

}


/* =========================================
   NAVBAR
========================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 126px;

    z-index: 1000;

    display: flex;

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

    padding: 0 7%;

    background:

            rgba(
                    8,
                    6,
                    11,
                    0.82
            );

    backdrop-filter:
            blur(14px);

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

    border-bottom:

            1px solid

            rgba(
                    255,
                    255,
                    255,
                    0.06
            );

    opacity: 0;

    transform:
            translateY(-20px);

    pointer-events: none;

    transition:

            opacity 0.45s ease,

            transform 0.45s ease;

}


.navbar.navbar-visible {

    opacity: 1;

    transform:
            translateY(0);

    pointer-events: auto;

}


/* =========================================
   NAV LOGO
========================================= */

.nav-logo {

    display: flex;

    align-items: center;

}


.nav-logo img {

    width: 200px;

    height: auto;

}


/* Textové logo – kompatibilita */
.logo {

    color: white;

    font-size: 28px;

    font-weight: 900;

}


.logo::first-letter {
    color: white;
}


/* =========================================
   NAV LINKS
========================================= */

.nav-links {

    display: flex;

    align-items: center;

    gap: 20px;

}


.nav-links a {

    position: relative;

    padding: 10px 15px;

    border-radius: 999px;

    color: white;

    font-size: 23px;

    font-weight: 700;

    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;

}


.nav-links a:hover {

    color: white;

    background: rgba(183, 108, 255, 0.18);

    box-shadow: 0 0 18px rgba(183, 108, 255, 0.22), inset 0 0 0 1px rgba(210, 165, 255, 0.28);

    transform: translateY(-1px);

}


.nav-links a::after {

    display: none;

    content: "";

    position: absolute;

    left: 0;

    bottom: 18px;

    width: 0;

    height: 2px;

    background:
            var(--purple);

    transition: 0.25s;

}


.nav-links a:hover::after {

    width: 100%;

}


.nav-links a.active {

    color: white;

    background: rgba(183, 108, 255, 0.13);

    box-shadow: inset 0 0 0 1px rgba(210, 165, 255, 0.22);

}


.nav-links a.active::after {

    width: 100%;

}


/* =========================================
   LOGIN BUTTON
========================================= */

.login-button {

    display: inline-flex;

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

    padding:

            11px
            22px;

    border-radius: 10px;

    color: white;

    font-size: 14px;

    font-weight: 800;

    background:

            rgba(
                    255,
                    255,
                    255,
                    0.06
            );

    border:

            1px solid

            rgba(
                    255,
                    255,
                    255,
                    0.12
            );

    transition: 0.25s;

}


.login-button:hover {

    transform:
            translateY(-2px);

    background:

            rgba(
                    255,
                    255,
                    255,
                    0.10
            );

}


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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

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

    padding:

            265px
            20px
            180px;

    overflow: hidden;

    background:

            linear-gradient(
                    to bottom,

                    rgba(
                            10,
                            5,
                            18,
                            0.10
                    ),

                    rgba(
                            10,
                            6,
                            16,
                            0.45
                    ) 55%,

                    #08060b 100%
            ),

            url("/images/background.png");

    background-size: cover;

    background-position: center;

}


/* =========================================
   HERO PLYNULÝ PŘECHOD
========================================= */

.hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -1px;

    height: 220px;

    background:

            linear-gradient(
                    to bottom,

                    transparent,

                    #08060b
            );

    pointer-events: none;

}


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

.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


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

.hero-logo {

    width: min(750px, 70vw);

    max-width: 750px;

    height: auto;

    margin-bottom: 25px;

    filter:

            drop-shadow(
                    0 15px 30px
                    rgba(100, 0, 255, 0.45)
            );

    animation:
            logoPulse 3s ease-in-out infinite;

    will-change:
            transform,
            filter;

}


/* =========================================
   LOGO PULSE ANIMATION
========================================= */

@keyframes logoPulse {

    0% {

        transform:
                scale(1);

        filter:

                drop-shadow(
                        0 10px 22px
                        rgba(100, 0, 255, 0.30)
                );

    }


    50% {

        transform:
                scale(1.035);

        filter:

                drop-shadow(
                        0 15px 40px
                        rgba(168, 85, 247, 0.75)
                )

                drop-shadow(
                        0 0 25px
                        rgba(197, 61, 240, 0.35)
                );

    }


    100% {

        transform:
                scale(1);

        filter:

                drop-shadow(
                        0 10px 22px
                        rgba(100, 0, 255, 0.30)
                );

    }

}


/* =========================================
   SERVER STATUS
========================================= */

.server-status {

    position: relative;

    display: flex;

    align-items: center;

    width: auto;

    min-width: 380px;

    height: 50px;

    border-radius: 17px;

    overflow: hidden;

    background:

            rgba(
                    12,
                    8,
                    20,
                    0.48
            );

    border:

            1px solid

            rgba(
                    150,
                    70,
                    255,
                    0.38
            );

    backdrop-filter:
            blur(16px);

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

    box-shadow:

            0 12px 35px

            rgba(
                    0,
                    0,
                    0,
                    0.20
            );

}


/* =========================================
   ONLINE PLAYERS
========================================= */

.players {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    padding:

            0
            22px;

    gap: 10px;

    font-size: 15px;

    white-space: nowrap;

}


.players::after {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    transform:
            translateY(-50%);

    width: 1px;

    height: 34px;

    background:

            rgba(
                    255,
                    255,
                    255,
                    0.20
            );

}


.status-dot {

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background:
            #42e6a4;

    box-shadow:

            0 0 12px

            rgba(
                    66,
                    230,
                    164,
                    0.75
            );

}


.status-dot.offline {

    background:
            #ff5757;

    box-shadow:

            0 0 12px

            rgba(
                    255,
                    87,
                    87,
                    0.75
            );

}


#player-count {

    color: white;

    font-size: 15px;

    font-weight: 800;

}


.players-text {

    color:

            rgba(
                    255,
                    255,
                    255,
                    0.72
            );

    font-size: 15px;

    font-weight: 600;

}


/* =========================================
   SERVER IP
========================================= */

.server-ip {

    height: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:

            0
            22px;

    border: none;

    outline: none;

    cursor: pointer;

    color: white;

    background: transparent;

    font-family: inherit;

    transition: 0.25s;

}


.server-ip:hover {

    background:

            rgba(
                    255,
                    255,
                    255,
                    0.04
            );

}


.server-ip-text {

    font-size: 18px;

    font-weight: 800;

    white-space: nowrap;

}


.copy-icon {

    font-size: 17px;

    opacity: 0.75;

    transition: 0.2s;

}


.server-ip:hover .copy-icon {

    opacity: 1;

    transform:
            scale(1.08);

}


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

.copy-message {

    margin-top: 14px;

    min-height: 20px;

    color:
            #42e6a4;

    font-size: 14px;

    font-weight: 700;

    opacity: 0;

    transform:
            translateY(-5px);

    transition:

            opacity 0.3s ease,

            transform 0.3s ease;

}


.copy-message.show {

    opacity: 1;

    transform:
            translateY(0);

}


/* =========================================
   WHITELIST BUTTON
========================================= */

.whitelist-button {

    display: inline-flex;

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

    margin-top: 20px;

    padding:

            17px
            36px;

    min-width: 290px;

    border-radius: 15px;

    color: white;

    font-size: 18px;

    font-weight: 800;

    background:

            linear-gradient(
                    135deg,
                    #7628e8,
                    #c53df0
            );

    box-shadow:

            0 15px 35px

            rgba(
                    140,
                    40,
                    255,
                    0.38
            );

    transition: 0.25s;

}


.whitelist-button:hover {

    transform:

            translateY(-3px)

            scale(1.02);

}


/* =========================================
   ABOUT SECTION
========================================= */

.about-section {

    position: relative;

    padding:

            40px
            7%
            150px;

    overflow: hidden;

    background:

            linear-gradient(
                    to bottom,

                    #08060b 0%,

                    #0a0710 25%,

                    #0c0812 70%,

                    #08060b 100%
            );

}


/* =========================================
   PLYNULÝ FIALOVÝ GLOW
========================================= */

.about-section::before {

    content: "";

    position: absolute;

    width: 900px;

    height: 700px;

    left: -350px;

    top: 50%;

    transform:
            translateY(-50%);

    background:

            radial-gradient(

                    ellipse,

                    rgba(
                            112,
                            47,
                            180,
                            0.10
                    ),

                    transparent 70%

            );

    pointer-events: none;

}


/* =========================================
   ABOUT CONTAINER
========================================= */

.about-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1650px;

    min-height: 390px;

    margin: auto;

    display: flex;

    align-items: center;

    border-radius: 24px;

    isolation: isolate;

    overflow: hidden;

    background:

            linear-gradient(
                    110deg,

                    #160d21,

                    #110b19 45%,

                    #09070d
            );

    border:

            1px solid

            rgba(
                    168,
                    85,
                    247,
                    0.18
            );

    box-shadow:

            0 20px 60px

            rgba(
                    0,
                    0,
                    0,
                    0.35
            ),

            0 0 60px

            rgba(
                    100,
                    40,
                    180,
                    0.05
            );

}


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

.about-background {

    position: absolute;

    z-index: -2;

    inset: 0;

    border-radius: 24px;

    overflow: hidden;

    background:

            linear-gradient(
                    90deg,

                    rgba(
                            43,
                            20,
                            65,
                            0.92
                    ) 0%,

                    rgba(
                            29,
                            15,
                            42,
                            0.88
                    ) 38%,

                    rgba(
                            14,
                            9,
                            20,
                            0.95
                    ) 70%,

                    #09070d 100%
            );

}


/* =========================================
   JEMNÁ TEXTURA POZADÍ
========================================= */

.about-background::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

            url("/images/about-background.png");

    background-size: cover;

    background-position: center;

    opacity: 0.12;

    filter:
            blur(2px);

    transform:
            scale(1.03);

}


/* =========================================
   FIALOVÝ OVERLAY
========================================= */

.about-background::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

            linear-gradient(
                    90deg,

                    rgba(
                            92,
                            43,
                            135,
                            0.18
                    ),

                    transparent 50%,

                    rgba(
                            0,
                            0,
                            0,
                            0.28
                    )
            );

}


/* =========================================
   ABOUT CHARACTER
========================================= */

.about-character {

    position: relative;

    z-index: 5;

    width: 43%;

    min-width: 380px;

    align-self: stretch;

    display: flex;

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

    pointer-events: none;

}


/* =========================================
   CHARACTER IMAGE
========================================= */

.about-character img {

    position: absolute;

    bottom: 0;

    width:
            min(
                    100%,
                    440px
            );

    max-width: 440px;

    height: auto;

    object-fit: contain;

    filter:

            drop-shadow(

                    0 20px 30px

                    rgba(
                            0,
                            0,
                            0,
                            0.60
                    )

            )

            drop-shadow(

                    0 0 25px

                    rgba(
                            100,
                            50,
                            180,
                            0.10
                    )

            );

}


/* =========================================
   ABOUT CONTENT
========================================= */

.about-content {

    position: relative;

    z-index: 3;

    flex: 1;

    min-width: 0;

    max-width: 650px;

    padding:

            65px
            80px
            65px
            30px;

}


/* =========================================
   SECTION EYEBROW
========================================= */

.section-eyebrow,
.a-team-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color:
            var(--purple-light);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 3px;

}


/* =========================================
   ABOUT TITLE
========================================= */

.about-content h2 {

    margin-bottom: 25px;

    color: white;

    font-size:

            clamp(
                    38px,
                    4vw,
                    58px
            );

    font-weight: 950;

    line-height: 1.05;

    letter-spacing: -2px;

}


.about-content p {

    margin-bottom: 18px;

    color:

            rgba(
                    255,
                    255,
                    255,
                    0.68
            );

    font-size: 16px;

    line-height: 1.8;

}


/* Nájezd obsahu sekce „Proč hrát u nás“ při scrollování. */
@media (min-width: 901px) {
    .about-section .about-character,
    .about-section .about-content {
        opacity: 0;
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22, .8, .25, 1);
    }

    .about-section .about-character {
        transform: translateX(-90px);
    }

    .about-section .about-content {
        transform: translateX(90px);
        transition-delay: 0.12s;
    }

    .about-section.is-visible .about-character,
    .about-section.is-visible .about-content {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-section .about-character,
    .about-section .about-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================
   SCROLL TOP
========================================= */

.scroll-top {

    position: fixed;

    right: 28px;

    bottom: 28px;

    z-index: 999;

    width: 48px;

    height: 48px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color: white;

    font-size: 22px;

    background:

            linear-gradient(
                    135deg,
                    #7628e8,
                    #c53df0
            );

    box-shadow:

            0 10px 25px

            rgba(
                    140,
                    40,
                    255,
                    0.35
            );

    opacity: 0;

    transform:
            translateY(15px);

    pointer-events: none;

    transition: 0.25s;

}


.scroll-top.show {

    opacity: 1;

    transform:
            translateY(0);

    pointer-events: auto;

}


.scroll-top:hover {

    transform:

            translateY(-3px)

            scale(1.05);

}


/* =========================================
   A-TEAM PAGE
========================================= */

.a-team-page .a-team-navbar {

    opacity: 1;

    transform:
            translateY(0);

    pointer-events: auto;

    background:

            rgba(
                    7,
                    7,
                    10,
                    0.88
            );

}

/* =========================================
   REGISTER PAGE NAVBAR
========================================= */

.register-page .navbar {

    opacity: 1;

    transform:
            translateY(0);

    pointer-events: auto;

    background:

            rgba(
                    7,
                    7,
                    10,
                    0.88
            );

}


/* =========================================
   A-TEAM HERO
========================================= */

.a-team-hero {

    position: relative;

    min-height: 440px;

    display: flex;

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

    padding:

            125px
            7%
            70px;

    overflow: hidden;

    text-align: center;

    background:

            linear-gradient(
                    to bottom,

                    rgba(
                            8,
                            4,
                            15,
                            0.20
                    ),

                    rgba(
                            8,
                            6,
                            11,
                            0.96
                    )
            ),

            url("/images/background.png");

    background-size: cover;

    background-position: center;

}


.a-team-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

            linear-gradient(
                    to bottom,

                    transparent 55%,

                    #08060b 100%
            );

    pointer-events: none;

}


/* =========================================
   A-TEAM HERO CONTENT
========================================= */

.a-team-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =========================================
   A-TEAM TITLE
========================================= */

.a-team-hero-content h1 {

    margin-bottom: 18px;

    font-size:

            clamp(
                    48px,
                    6vw,
                    82px
            );

    font-weight: 950;

    letter-spacing: -3px;

    line-height: 1;

    text-shadow:

            0 10px 35px

            rgba(
                    0,
                    0,
                    0,
                    0.55
            );

}


.a-team-hero-content h1 span {

    color:
            var(--purple-light);

}


/* =========================================
   A-TEAM HERO TEXT
========================================= */

.a-team-hero-content p {

    max-width: 650px;

    color:

            rgba(
                    255,
                    255,
                    255,
                    0.68
            );

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================
   A-TEAM SCROLL BUTTON
========================================= */

.a-team-scroll-button {

    margin-top: 25px;

    padding:

            13px
            24px;

    border-radius: 10px;

    color: white;

    font-size: 14px;

    font-weight: 800;

    background:

            rgba(
                    255,
                    255,
                    255,
                    0.07
            );

    border:

            1px solid

            rgba(
                    255,
                    255,
                    255,
                    0.12
            );

    transition: 0.25s;

}


.a-team-scroll-button:hover {

    transform:
            translateY(-2px);

    background:

            rgba(
                    168,
                    85,
                    247,
                    0.18
            );

}


/* =========================================
   TEAM SECTION
========================================= */

.team-section {

    position: relative;

    padding:

            65px
            7%
            85px;

    background:

            linear-gradient(
                    180deg,

                    #08060b,

                    #0d0912
            );

}


/* =========================================
   TEAM CONTAINER
========================================= */

.team-container {

    width: 100%;

    max-width: 1200px;

    margin: auto;

}


/* =========================================
   TEAM GRID
========================================= */

.team-grid {

    width: 100%;

    max-width: 650px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}


/* =========================================
   TEAM CARD
========================================= */

.team-card {

    position: relative;

    min-height: 260px;

    padding:

            42px
            20px
            22px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    overflow: hidden;

    border-radius: 16px;

    background:

            linear-gradient(
                    145deg,

                    rgba(
                            30,
                            20,
                            40,
                            0.95
                    ),

                    rgba(
                            12,
                            9,
                            18,
                            0.98
                    )
            );

    border:

            1px solid

            rgba(
                    168,
                    85,
                    247,
                    0.15
            );

    box-shadow:

            0 16px 40px

            rgba(
                    0,
                    0,
                    0,
                    0.28
            );

    transition:

            transform 0.3s ease,

            border-color 0.3s ease,

            box-shadow 0.3s ease;

}


.team-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:

            linear-gradient(
                    90deg,

                    transparent,

                    rgba(
                            255,
                            255,
                            255,
                            0.16
                    ),

                    transparent
            );

}


.team-card:hover {

    transform:
            translateY(-6px);

    border-color:

            rgba(
                    168,
                    85,
                    247,
                    0.45
            );

    box-shadow:

            0 22px 50px

            rgba(
                    0,
                    0,
                    0,
                    0.42
            ),

            0 0 30px

            rgba(
                    168,
                    85,
                    247,
                    0.10
            );

}


/* =========================================
   TEAM RANK
========================================= */

.team-rank {

    position: absolute;

    top: 13px;

    left: 50%;

    transform:
            translateX(-50%);

    z-index: 5;

    padding:

            7px
            17px;

    border-radius: 999px;

    color: white;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.3px;

    white-space: nowrap;

}


/* =========================================
   OWNER RANK
========================================= */

.owner-rank {

    background:

            linear-gradient(
                    135deg,

                    #a855f7,

                    #d946ef
            );

}


/* =========================================
   ADMIN RANK
========================================= */

.admin-rank {

    background:

            linear-gradient(
                    135deg,

                    #6d28d9,

                    #9333ea
            );

}


/* =========================================
   TEAM AVATAR
========================================= */

.team-avatar {

    position: relative;

    z-index: 2;

    width: 105px;

    height: 115px;

    margin-bottom: 10px;

    display: flex;

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

    overflow: visible;

    background: transparent;

}


.team-avatar::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 2px;

    transform:
            translateX(-50%);

    width: 72px;

    height: 18px;

    border-radius: 50%;

    background:

            radial-gradient(

                    ellipse,

                    rgba(
                            0,
                            0,
                            0,
                            0.55
                    ),

                    transparent 70%

            );

}


.team-avatar img {

    position: relative;

    z-index: 2;

    width: auto;

    height: 108px;

    max-width: 95px;

    object-fit: contain;

    background: transparent;

    filter:

            drop-shadow(

                    0 8px 10px

                    rgba(
                            0,
                            0,
                            0,
                            0.55
                    )

            );

    transition:
            transform 0.3s ease;

}


.team-card:hover .team-avatar img {

    transform:
            scale(1.05);

}


.team-card h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 0;

    color:
            #ffffff;

    font-size: 20px;

    font-weight: 900;

    text-align: center;

}


.team-role {

    display: none;

}


.team-card p {

    display: none;

}


/* =========================================
   REGISTER PAGE
========================================= */

.register-container {

    min-height: 100vh;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding:

            80px
            13%
            40px
            10%;

    background:

            linear-gradient(

                    to bottom,

                    rgba(
                            8,
                            4,
                            15,
                            0.20
                    ),

                    rgba(
                            8,
                            4,
                            15,
                            0.45
                    )

            ),

            url("/images/register-background.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


/* =========================================
   REGISTER CARD
========================================= */

.register-card {

    width: 100%;

    max-width: 530px;

    padding:

            42px
            48px;

    border-radius: 24px;

    background:

            rgba(
                    18,
                    12,
                    27,
                    0.82
            );

    border:

            1px solid

            rgba(
                    168,
                    85,
                    247,
                    0.55
            );

    backdrop-filter:
            blur(18px);

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

    box-shadow:

            0 25px 70px

            rgba(
                    0,
                    0,
                    0,
                    0.45
            ),

            0 0 45px

            rgba(
                    139,
                    48,
                    255,
                    0.12
            );

}


/* =========================================
   REGISTER TITLE
========================================= */

.register-card h1 {

    margin-bottom: 10px;

    color: white;

    font-size:

            clamp(
                    42px,
                    4vw,
                    56px
            );

    font-weight: 900;

    letter-spacing: -2px;

    line-height: 1.1;

}


.register-card h1 span {

    color:
            var(--purple-light);

}


/* =========================================
   REGISTER DESCRIPTION
========================================= */

.register-description {

    margin-bottom: 34px;

    color:

            rgba(
                    255,
                    255,
                    255,
                    0.68
            );

    font-size: 17px;

    line-height: 1.5;

}


/* =========================================
   INPUT GROUP
========================================= */

.input-group {

    display: flex;

    flex-direction: column;

    width: 100%;

    margin-bottom: 22px;

}


.input-group label {

    display: block;

    margin-bottom: 9px;

    color:

            rgba(
                    255,
                    255,
                    255,
                    0.88
            );

    font-size: 16px;

    font-weight: 700;

}


/* =========================================
   REGISTER INPUTS
========================================= */

.input-group input {

    display: block;

    width: 100%;

    height: 62px;

    padding:

            0
            18px;

    border-radius: 14px;

    outline: none;

    color: white;

    font-family: inherit;

    font-size: 16px;

    background:

            rgba(
                    8,
                    6,
                    14,
                    0.55
            );

    border:

            1px solid

            rgba(
                    168,
                    85,
                    247,
                    0.30
            );

    transition:

            border-color 0.25s ease,

            box-shadow 0.25s ease,

            background 0.25s ease;

}


.input-group input::placeholder {

    color:

            rgba(
                    255,
                    255,
                    255,
                    0.40
            );

}


.input-group input:focus {

    border-color:

            rgba(
                    192,
                    90,
                    255,
                    0.85
            );

    background:

            rgba(
                    15,
                    9,
                    24,
                    0.75
            );

    box-shadow:

            0 0 0 3px

            rgba(
                    168,
                    85,
                    247,
                    0.12
            );

}


/* =========================================
   REGISTER BUTTON
========================================= */

.register-card button {

    display: block;

    width: 100%;

    height: 68px;

    margin-top: 8px;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    color: white;

    font-family: inherit;

    font-size: 20px;

    font-weight: 800;

    background:

            linear-gradient(

                    135deg,

                    #a855f7,

                    #6d28d9
            );

    box-shadow:

            0 14px 30px

            rgba(
                    139,
                    48,
                    255,
                    0.35
            );

    transition:

            transform 0.25s ease,

            box-shadow 0.25s ease;

}


.register-card button:hover {

    transform:
            translateY(-3px);

    box-shadow:

            0 18px 40px

            rgba(
                    139,
                    48,
                    255,
                    0.55
            );

}


.register-card button:active {

    transform:
            translateY(-1px);

}

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

@media (max-width: 900px) {


    .navbar {

        padding:
                0 5%;

    }


    .nav-links {

        gap: 20px;

    }


    .nav-links a {

        font-size: 13px;

    }


    .hero-logo {

        width:
                min(
                        700px,
                        80vw
                );

    }


    /* ABOUT */

    .about-section {

        padding:

                100px
                5%
                100px;

    }


    .about-container {

        min-height: auto;

        flex-direction: column;

        align-items: center;

        padding:

                210px
                35px
                55px;

        text-align: center;

    }


    .about-character {

        position: absolute;

        top: -105px;

        left: 50%;

        transform:
                translateX(-50%);

        width: 100%;

        height: 320px;

        min-width: 0;

        align-self: auto;

    }


    .about-character img {

        position: absolute;

        bottom: 0;

        width: 310px;

        max-width: 310px;

    }


    .about-content {

        width: 100%;

        max-width: 650px;

        padding: 0;

    }


    .about-content p {

        margin-left: auto;

        margin-right: auto;

        max-width: 600px;

    }


    /* A-TEAM */

    .a-team-hero {

        min-height: 420px;

        padding:

                120px
                6%
                65px;

    }


    .team-section {

        padding:

                60px
                5%
                75px;

    }


    .team-grid {

        grid-template-columns:

                repeat(
                        2,
                        minmax(220px, 1fr)
                );

        max-width: 650px;

    }


    /* REGISTER */

    .register-container {

        justify-content: center;

        padding:

                100px
                30px
                50px;

    }


}


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

@media (max-width: 650px) {


    .navbar {

        height: 100px;

        padding:

                0
                20px;

    }


    .nav-links {

        display: none;

    }


    .nav-logo img {

        width: 145px;

    }


    .logo {

        font-size: 24px;

    }


    .login-button {

        padding:

                9px
                16px;

        font-size: 13px;

    }


    /* HERO */

    .hero {

        min-height: 100vh;

        padding:

                145px
                15px
                130px;

        background-position: center;

    }


    .hero::after {

        height: 150px;

    }


    .hero-logo {

        width: 95vw;

        margin-bottom: 25px;

    }


    /* SERVER STATUS */

    .server-status {

        width: 100%;

        min-width: 0;

        max-width: 400px;

        height: auto;

        flex-direction: column;

        border-radius: 16px;

    }


    .players {

        width: 100%;

        min-height: 58px;

        justify-content: center;

        padding:

                0
                15px;

    }


    .players::after {

        width: 70%;

        height: 1px;

        right: auto;

        left: 50%;

        top: auto;

        bottom: 0;

        transform:
                translateX(-50%);

    }


    .server-ip {

        width: 100%;

        min-height: 58px;

        justify-content: center;

        padding:

                0
                15px;

    }


    .whitelist-button {

        min-width: 260px;

        padding:

                16px
                28px;

        font-size: 16px;

    }


    /* ABOUT */

    .about-section {

        padding:

                70px
                20px
                90px;

    }


    .about-container {

        border-radius: 20px;

        padding:

                180px
                25px
                40px;

    }


    .about-background {

        border-radius: 20px;

    }


    .about-character {

        top: -80px;

        height: 270px;

    }


    .about-character img {

        width: 250px;

        max-width: 250px;

    }


    .about-content h2 {

        font-size: 38px;

        letter-spacing: -1px;

    }


    .about-content p {

        font-size: 15px;

        line-height: 1.7;

    }


    /* A-TEAM */

    .a-team-hero {

        min-height: 390px;

        padding:

                115px
                20px
                60px;

        background-position: center;

    }


    .a-team-hero-content h1 {

        margin-bottom: 16px;

        font-size: 46px;

        letter-spacing: -2px;

    }


    .a-team-hero-content p {

        font-size: 15px;

        line-height: 1.65;

    }


    .team-section {

        padding:

                55px
                20px
                70px;

    }


    .team-grid {

        grid-template-columns:
                1fr;

        max-width: 320px;

        margin: auto;

        gap: 18px;

    }


    .team-card {

        min-height: 245px;

        padding:

                40px
                18px
                20px;

        border-radius: 16px;

    }


    .team-avatar {

        width: 95px;

        height: 105px;

        margin-bottom: 8px;

        background: transparent;

    }


    .team-avatar img {

        height: 98px;

        max-width: 85px;

    }


    .team-card h3 {

        font-size: 19px;

    }


    /* REGISTER */

    .register-container {

        padding:

                80px
                18px
                40px;

        background-position: center;

    }


    .register-card {

        padding:

                32px
                24px;

        border-radius: 20px;

    }


    .register-card h1 {

        font-size: 42px;

    }


    .register-description {

        font-size: 16px;

        margin-bottom: 28px;

    }


    .input-group {

        margin-bottom: 18px;

    }


    .input-group input {

        height: 58px;

    }


    .register-card button {

        height: 62px;

        font-size: 18px;

    }


    /* SCROLL TOP */

    .scroll-top {

        right: 18px;

        bottom: 18px;

        width: 44px;

        height: 44px;

    }


}

/* =========================================================
   WHITELIST PAGE – CLEAN FINAL VERSION
   ========================================================= */

.whitelist-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #08060b, #0d0912);
}

/* Domovská stránka: navigace je nahoře průhledná a při scrollování plynule získává pozadí. */
.navbar#navbar {
    --navbar-scroll-progress: 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    background: rgba(8, 6, 11, calc(0.82 * var(--navbar-scroll-progress)));
    backdrop-filter: blur(calc(14px * var(--navbar-scroll-progress)));
    -webkit-backdrop-filter: blur(calc(14px * var(--navbar-scroll-progress)));
    border-bottom-color: rgba(255, 255, 255, calc(0.06 * var(--navbar-scroll-progress)));
}

.navbar .nav-links a.active,
.navbar .nav-links a:hover,
.navbar .nav-links a:focus-visible {
    background: rgba(168, 85, 247, 0.72);
    box-shadow: 0 0 22px rgba(183, 108, 255, 0.52), inset 0 0 0 1px rgba(233, 211, 255, 0.7);
    color: white;
}

.navbar .login-button {
    padding: 11px 20px;
    font-size: 20px;
    white-space: nowrap;
    border-radius: 14px;
    border-color: rgba(224, 190, 255, .5);
    background: linear-gradient(135deg, #974de0, #7032ba);
    box-shadow: 0 6px 22px rgba(133, 58, 218, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.navbar .login-button:hover,
.navbar .login-button:focus-visible {
    background: linear-gradient(135deg, #af68f2, #8844d2);
    box-shadow: 0 8px 28px rgba(166, 85, 247, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
    transform: translateY(-2px);
}

@media (max-width: 650px) {
    .navbar .login-button { font-size: 16px; padding: 11px 18px; }
}

.whitelist-page .a-team-navbar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    background: rgba(7, 7, 10, 0.88);
}

/* HERO */
.whitelist-page .whitelist-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 125px 5% 70px;
    overflow: hidden;
    text-align: left;
    background:
            linear-gradient(to bottom, rgba(8,4,15,.35), rgba(8,6,11,.95)),
            url("/images/background.png");
    background-size: cover;
    background-position: center;
}

.whitelist-page .whitelist-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent, #08060b);
    pointer-events: none;
}

.whitelist-page .whitelist-hero-content {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
}

.whitelist-page .whitelist-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(52px, 5.4vw, 76px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -3px;
}

.whitelist-page .whitelist-hero h1 span {
    color: var(--purple-light, #b76cff);
}

.whitelist-page .whitelist-hero p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 1.75;
}

/* MAIN */
.whitelist-page .whitelist-section {
    padding: 55px 0 110px;
    background: linear-gradient(to bottom, #08060b, #0d0912);
}

.whitelist-page .whitelist-container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.whitelist-page .whitelist-header {
    margin: 0 0 28px;
}

.whitelist-page .whitelist-header h2 {
    margin: 0;
    color: #f7f4fb;
    font-size: clamp(28px, 2.4vw, 34px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -1.4px;
}

.whitelist-page .whitelist-header h2 span {
    color: inherit;
}

/* LATEST APPLICATIONS */
.whitelist-page .applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 274px);
    gap: 16px;
}

.whitelist-page .application-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 18px;
    width: 274px;
    max-width: 100%;
    min-height: 112px;
    padding: 20px 24px;
    background: rgba(28,20,39,.82);
    border: 1px solid rgba(150,90,255,.32);
    border-radius: 14px;
    box-sizing: border-box;
    transition: transform .2s ease, border-color .2s ease;
}

.whitelist-page .application-card:hover {
    transform: translateY(-2px);
    border-color: rgba(190,125,255,.58);
}

/* Rozloží prvky přesně: hlava vlevo, nick nad statusem, datum vpravo */
.whitelist-page .application-player {
    display: contents;
}

.whitelist-page .minecraft-head {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 64px;
    height: 64px;
    min-width: 64px;
    object-fit: cover;
    image-rendering: pixelated;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.whitelist-page .application-player > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: end;
}

/* Nick – není tučný, jen lehce září */
.whitelist-page .application-player h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: end;
    margin: 0;
    color: #f5f2f8;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 500;
    text-shadow: 0 0 6px rgba(215,165,255,.7), 0 0 14px rgba(174,95,255,.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whitelist-page .application-status {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: start;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.whitelist-page .status-indicator {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
}

.whitelist-page .status-approved {
    color: #54dfaa;
    text-shadow: 0 0 10px rgba(84,223,170,.28);
}

.whitelist-page .status-approved .status-indicator {
    background: #54dfaa;
    box-shadow: 0 0 12px rgba(84,223,170,.9);
}

.whitelist-page .status-rejected {
    color: #ff6d7d;
    text-shadow: 0 0 10px rgba(255,109,125,.25);
}

.whitelist-page .status-rejected .status-indicator {
    background: #ff5f70;
    box-shadow: 0 0 12px rgba(255,95,112,.85);
}

/* DIVIDER */
.whitelist-page .whitelist-divider {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 46px 0 52px;
}

.whitelist-page .whitelist-divider > div {
    flex: 1;
    height: 1px;
    background: rgba(165,105,255,.35);
}

.whitelist-page .whitelist-divider span {
    padding: 10px 22px;
    border: 1px solid rgba(165,105,255,.42);
    border-radius: 999px;
    background: rgba(32,20,45,.8);
    color: #d59cff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    box-shadow: 0 0 18px rgba(138,72,255,.08);
}

/* WHITELIST PLAYERS */
.whitelist-page .approved-header {
    margin-bottom: 30px;
}

.whitelist-page .whitelist-players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 28px 16px;
    align-items: start;
}

.whitelist-page .whitelist-player-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.whitelist-page .whitelist-player-head {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Nick whitelist hráčů – normální váha + záře */
.whitelist-page .whitelist-player-card h3 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px 0 0;
    padding: 0;
    color: #f3eff8;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 7px rgba(215,165,255,.72), 0 0 16px rgba(174,95,255,.38);
}

/* Tlačítko zpět nahoru ve fialovém tématu webu. */
.scroll-top {
    background: linear-gradient(135deg, #6d28d9, #b76cff);
    box-shadow: 0 10px 25px rgba(126, 74, 216, 0.42);
}

/* EMPTY STATES */
.whitelist-page .empty-state {
    padding: 50px 25px;
    text-align: center;
    border: 1px dashed rgba(165,105,255,.25);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
}

/* PRAVIDLA */
.rules-page {
    min-height: 100vh;
    background: radial-gradient(circle at 80% 18%, rgba(113, 57, 179, .13), transparent 25%), #08060b;
}

.rules-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 195px max(7%, calc((100% - 1200px) / 2)) 95px;
    background: linear-gradient(90deg, rgba(8, 5, 13, .8) 0%, rgba(8, 5, 13, .35) 55%, rgba(8, 5, 13, .75) 100%), linear-gradient(to bottom, transparent 50%, #08060b), url("/images/background.png") center / cover;
}

.rules-hero::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: 12%;
    top: 120px;
    border-radius: 50%;
    background: rgba(174, 95, 255, .14);
    filter: blur(80px);
    animation: rules-orb-float 7s ease-in-out infinite;
}

.rules-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(rgba(204, 144, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(204, 144, 255, .12) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, black 45%, transparent);
}

.rules-hero-content,
.rules-content {
    width: min(1200px, 100%);
}

.rules-hero-content { position: relative; z-index: 1; animation: rules-hero-enter .8s cubic-bezier(.2, .85, .25, 1) both; }

.rules-kicker,
.rules-section-label {
    display: inline-block;
    color: #d7a9ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2.5px;
}

.rules-hero h1 {
    max-width: 700px;
    margin: 16px 0 20px;
    font-size: clamp(56px, 6.2vw, 86px);
    line-height: .93;
    letter-spacing: -4px;
}

.rules-hero h1 span {
    color: #bd7dff;
    text-shadow: 0 0 30px rgba(189, 125, 255, .34);
    animation: rules-text-glow 3s ease-in-out infinite;
}

.rules-hero p {
    max-width: 570px;
    color: rgba(255, 255, 255, .78);
    font-size: 19px;
    line-height: 1.6;
}

.rules-hero-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; color: rgba(255,255,255,.64); font-size: 14px; }
.rules-hero-meta b { color: #bf80ff; }

.rules-content {
    margin: 0 auto;
    padding: 78px 0 115px;
}

.rules-intro { max-width: 720px; margin-bottom: 38px; }
.rules-intro h2 { margin: 12px 0 14px; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; letter-spacing: -2px; }
.rules-intro h2 span { color: #bf80ff; }
.rules-intro p { color: rgba(255,255,255,.64); font-size: 17px; line-height: 1.65; }

.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.rules-card {
    position: relative;
    display: flex;
    overflow: hidden;
    gap: 20px;
    min-height: 150px;
    padding: 28px 30px;
    border: 1px solid rgba(183, 108, 255, .17);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(43, 27, 60, .74), rgba(19, 13, 28, .8));
    opacity: 0;
    transform: translateY(28px);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .5s ease;
}

.rules-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(207, 153, 255, .18), transparent 65%);
    transition: opacity .3s ease;
}

.rules-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    width: 35%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5c7ff, transparent);
    opacity: 0;
}

.rules-grid.is-visible .rules-card { opacity: 1; transform: translateY(0); }
.rules-grid.is-visible .rules-card:nth-child(2) { transition-delay: .08s; }
.rules-grid.is-visible .rules-card:nth-child(3) { transition-delay: .16s; }
.rules-grid.is-visible .rules-card:nth-child(4) { transition-delay: .24s; }
.rules-grid.is-visible .rules-card:nth-child(5) { transition-delay: .32s; }
.rules-grid.is-visible .rules-card:nth-child(6) { transition-delay: .4s; }
.rules-card:hover { transform: translateY(-6px) scale(1.012); border-color: rgba(215, 165, 255, .6); box-shadow: 0 20px 42px rgba(0,0,0,.3), 0 0 32px rgba(150, 80, 255, .18); }
.rules-card:hover::before { opacity: 1; }
.rules-card:hover::after { opacity: 1; animation: rules-shine 1.1s ease; }
.rules-card > * { position: relative; z-index: 1; }
.rules-number {
    color: #bf80ff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rules-card h3 {
    margin: 0 0 8px;
    font-size: 21px;
}

.rules-card p {
    color: rgba(255, 255, 255, .65);
    line-height: 1.55;
}

.rules-card-highlight { background: linear-gradient(135deg, rgba(91, 45, 138, .66), rgba(32, 18, 48, .9)); }
.rules-note { display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 18px 22px; border: 1px solid rgba(183,108,255,.17); border-radius: 14px; color: rgba(255,255,255,.63); background: rgba(183,108,255,.055); }
.rules-note > span { color: #bf80ff; font-size: 20px; }
.rules-note p { line-height: 1.5; }

@keyframes rules-hero-enter {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rules-orb-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-45px, 28px, 0) scale(1.14); }
}

@keyframes rules-text-glow {
    0%, 100% { text-shadow: 0 0 22px rgba(189, 125, 255, .28); }
    50% { text-shadow: 0 0 38px rgba(201, 141, 255, .58); }
}

@keyframes rules-shine {
    from { left: -45%; }
    to { left: 110%; }
}

@media (max-width: 900px) {
    .rules-hero { padding: 190px 35px 75px; }
    .rules-content {
        width: calc(100% - 40px);
        padding: 55px 0 80px;
    }
    .rules-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .rules-hero { min-height: 430px; padding: 160px 24px 60px; }
    .rules-hero h1 { font-size: 52px; letter-spacing: -3px; }
    .rules-hero p { font-size: 16px; }
    .rules-hero-meta { font-size: 12px; }
    .rules-card { min-height: 0; padding: 23px 20px; }
    .rules-card h3 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .rules-hero::after,
    .rules-hero h1 span,
    .rules-hero-content,
    .rules-card,
    .rules-card::after {
        animation: none;
        transition: none;
    }

    .rules-card { opacity: 1; transform: none; }
}

/* MOBILE */
@media (max-width: 900px) {
    .whitelist-page .applications-grid {
        grid-template-columns: 1fr;
    }

    .whitelist-page .whitelist-players-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .whitelist-page .whitelist-hero {
        min-height: 330px;
        padding: 110px 20px 55px;
    }

    .whitelist-page .whitelist-hero h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .whitelist-page .whitelist-hero p {
        font-size: 16px;
        line-height: 1.55;
    }

    .whitelist-page .whitelist-container {
        width: min(100% - 30px, 1200px);
    }

    .whitelist-page .whitelist-section {
        padding: 45px 0 75px;
    }

    .whitelist-page .whitelist-header h2 {
        font-size: 28px;
    }

    .whitelist-page .application-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 92px;
        padding: 14px 16px;
        column-gap: 12px;
    }

    .whitelist-page .minecraft-head {
        width: 54px;
        height: 54px;
        min-width: 54px;
    }

    .whitelist-page .application-player h3 {
        font-size: 17px;
    }

    .whitelist-page .application-status {
        font-size: 13px;
    }

    .whitelist-page .whitelist-players-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px 14px;
    }

    .whitelist-page .whitelist-player-head {
        width: 58px;
        height: 58px;
    }

    .whitelist-page .whitelist-player-card h3 {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .whitelist-page .whitelist-players-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Shared wide desktop layout; mobile keeps its compact spacing. */
.nav-account { flex-shrink: 0; margin-left: 16px; }
.recruitment-page .admin-container { width: 92%; margin: 0 auto; padding: 175px 0 70px; }
.recruitment-page .admin-card { padding: clamp(20px, 3vw, 44px); border: 1px solid #bb88ff40; border-radius: 22px; background: #191121; }
.recruitment-page h1 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 14px; }
.recruitment-description { color: #c3b4d1; margin-bottom: 30px; line-height: 1.6; }
.recruitment-table { overflow-x: auto; }
.recruitment-player { display: flex; align-items: center; gap: 12px; }
.recruitment-player .account-avatar { flex-shrink: 0; }
.recruitment-table table { width: 100%; border-collapse: collapse; text-align: left; }
.recruitment-table th, .recruitment-table td { padding: 18px 14px; border-bottom: 1px solid #ffffff18; vertical-align: top; }
.recruitment-table td { max-width: 400px; overflow-wrap: anywhere; }
.recruitment-table th { color: #d4b0ff; }
.recruitment-table button { padding: 10px 14px; margin: 0 4px 8px 0; border: 1px solid #ffffff30; border-radius: 9px; font: inherit; cursor: pointer; color: white; }
.recruitment-table .approve-button { background: #246747; }
.recruitment-table .reject-button { background: #883d55; }
.recruitment-table button:hover { filter: brightness(1.2); }
.recruitment-table button:focus-visible { outline: 2px solid #d4b0ff; outline-offset: 3px; }
.account-menu { position: relative; }
.account-menu summary { cursor: pointer; list-style: none; border-radius: 14px; padding: 5px; border: 1px solid #d0a2ff88; background: #8e45cb33; box-shadow: 0 0 22px #a855f733; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:focus-visible { outline: 2px solid #dfbdff; outline-offset: 4px; }
.account-avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: #482663; }
.account-initial { font-size: 24px; font-weight: 800; color: white; }
.account-avatar img { position: absolute; inset: 0; width: 48px; height: 48px; image-rendering: pixelated; }
.account-avatar img[hidden] { display: none; }
.account-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 220px; max-width: 85vw; padding: 12px; border: 1px solid #b77cff66; border-radius: 14px; background: #191020; box-shadow: 0 15px 40px #0008; }
.account-dropdown strong { display: block; padding: 10px; overflow-wrap: anywhere; color: #e0c6ff; }
.account-dropdown a, .account-dropdown button { display: block; width: 100%; padding: 12px 10px; text-align: left; border: 0; border-radius: 8px; background: transparent; color: white; font: inherit; font-size: 16px; cursor: pointer; }
.account-dropdown a:hover, .account-dropdown button:hover { background: #a855f733; }

/* Shared wide desktop layout; mobile keeps its compact spacing. */
@media (min-width: 1001px) {
    .navbar { padding-left: 4%; padding-right: 4%; }
    .about-section, .team-section {
        padding-left: 4%;
        padding-right: 4%;
    }
    .about-container, .team-container { max-width: none; }
    .about-content { max-width: none; padding-right: clamp(32px, 4vw, 90px); }
    .about-content p { max-width: 720px; }
    .team-grid {
        max-width: none;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .a-team-hero {
        padding-left: 4%; padding-right: 4%;
        justify-content: flex-start;
        text-align: left;
    }
    .a-team-hero-content { max-width: none; align-items: flex-start; }
    .whitelist-page .whitelist-container { width: 90%; }
    .whitelist-page .whitelist-hero { padding-left: 5%; padding-right: 5%; }
    .rules-content { width: 92%; }
    .rules-hero { padding-left: 4%; padding-right: 4%; }
    .rules-hero-content { width: 100%; }
    .rules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .admin-container, main.container { width: 92%; max-width: none; margin-inline: auto; }
}