/* =========================================================
   LEVEL X GAME ZONE
   PREMIUM UI FOUNDATION
   ========================================================= */

:root {
    --bg: #050505;
    --bg-soft: #0a0a0a;
    --surface: rgba(18, 18, 18, 0.78);
    --surface-solid: #111111;

    --text: #f5f5f5;
    --muted: #969696;
    --muted-strong: #c5c5c5;

    --red: #ff2020;
    --red-bright: #ff3b3b;
    --red-dark: #a90000;

    --border: rgba(255, 255, 255, 0.09);
    --border-red: rgba(255, 32, 32, 0.35);

    --success: #45e58c;
    --warning: #ffd45c;
    --danger: #ff5555;

    --container: 1180px;
    --radius: 18px;

    --shadow:
        0 18px 55px rgba(0, 0, 0, 0.42);

    --red-glow:
        0 0 30px rgba(255, 32, 32, 0.18);

    --transition:
        0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 32, 32, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 32, 32, 0.045),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #030303 0%,
            #070707 45%,
            #030303 100%
        );

    color: var(--text);

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

    line-height: 1.6;

    transition:
        background 0.55s ease,
        color 0.45s ease;

    overflow-x: hidden;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -1;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

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

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(0, 0, 0, 0.48) 100%
        );
}

/* =========================================================
   LIGHT THEME
   ========================================================= */

body.light-theme {
    --bg: #f3f3f3;
    --bg-soft: #e9e9e9;

    --surface: rgba(255, 255, 255, 0.78);
    --surface-solid: #ffffff;

    --text: #161616;
    --muted: #686868;
    --muted-strong: #333333;

    --border: rgba(0, 0, 0, 0.10);
    --border-red: rgba(210, 20, 20, 0.30);

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 32, 32, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 32, 32, 0.045),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #fafafa 0%,
            #eeeeee 50%,
            #f8f8f8 100%
        );

    color: var(--text);
}

body.light-theme::before {
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}

body.light-theme::after {
    background:
        radial-gradient(
            circle at center,
            transparent 38%,
            rgba(0, 0, 0, 0.06) 100%
        );
}

/* =========================================================
   BASIC ELEMENTS
   ========================================================= */

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

::selection {
    background: var(--red);
    color: #fff;
}

/* =========================================================
   LAYOUT
   ========================================================= */

#site-wrapper {
    min-height: 70vh;
}

.container {
    width: min(
        calc(100% - 32px),
        var(--container)
    );

    margin-inline: auto;
}

.section {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.section-title {
    margin-bottom: 12px;

    font-size:
        clamp(32px, 5vw, 58px);

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: -2px;

    text-transform: uppercase;
}

.section-title span {
    color: var(--red);

    text-shadow:
        0 0 15px rgba(255, 32, 32, 0.55),
        0 0 40px rgba(255, 32, 32, 0.18);
}

.section-subtitle {
    max-width: 680px;

    color: var(--muted);

    font-size: 15px;
}

/* =========================================================
   GLASS SYSTEM
   ========================================================= */

.glass {
    position: relative;

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

    border-radius: var(--radius);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        ),
        var(--surface);

    box-shadow: var(--shadow);

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

    overflow: hidden;

    transition:
        background 0.45s ease,
        border-color var(--transition),
        box-shadow var(--transition);
}

.glass::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 32, 32, 0.55),
            transparent
        );

    opacity: 0.65;
}

body.light-theme .glass {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 255, 255, 0.68)
        ),
        var(--surface);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.10);
}

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

.btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 11px 20px;

    border: 1px solid var(--red);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--red-bright),
            var(--red-dark)
        );

    color: #fff;

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

    letter-spacing: 0.2px;

    box-shadow:
        0 8px 25px rgba(255, 32, 32, 0.18);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    transform: skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent
        );

    transition: left 0.6s ease;
}

.btn:hover {
    transform: translateY(-3px) scale(1.015);

    box-shadow:
        0 12px 35px rgba(255, 32, 32, 0.28),
        0 0 25px rgba(255, 32, 32, 0.14);
}

.btn:hover::before {
    left: 150%;
}

.btn:active {
    transform: scale(0.97);
}

.btn-outline {
    background: transparent;
    color: var(--red);
    box-shadow: none;
}

.btn-outline:hover {
    color: #fff;

    background: var(--red);

    box-shadow:
        0 10px 30px rgba(255, 32, 32, 0.25);
}

/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input,
select,
textarea {
    width: 100%;

    padding: 12px 14px;

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

    border-radius: 10px;

    outline: none;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--text);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea {
    background: rgba(255, 255, 255, 0.85);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--red);

    box-shadow:
        0 0 0 3px rgba(255, 32, 32, 0.10),
        0 0 18px rgba(255, 32, 32, 0.08);
}

label {
    display: block;

    margin-bottom: 7px;

    color: var(--muted-strong);

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

/* =========================================================
   ALERTS
   ========================================================= */

.alert,
.flash-message {
    width: min(
        calc(100% - 32px),
        900px
    );

    margin: 18px auto;

    padding: 13px 16px;

    border-radius: 10px;

    font-size: 14px;
}

.alert-success,
.flash-success {
    border: 1px solid rgba(69, 229, 140, 0.25);

    background: rgba(69, 229, 140, 0.08);

    color: var(--success);
}

.alert-error,
.flash-error {
    border: 1px solid rgba(255, 85, 85, 0.25);

    background: rgba(255, 85, 85, 0.08);

    color: var(--danger);
}

.flash-info {
    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.04);

    color: var(--muted-strong);
}

/* =========================================================
   PAGE LOADER
   ========================================================= */

#page-loader {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle,
            rgba(255, 32, 32, 0.08),
            transparent 35%
        ),
        #030303;

    opacity: 1;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

#page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-inner {
    width: min(280px, 75vw);

    text-align: center;
}

.loader-logo {
    margin-bottom: 18px;

    font-size: 27px;

    font-weight: 950;

    letter-spacing: 2px;
}

.loader-logo span {
    color: var(--red);

    text-shadow:
        0 0 18px rgba(255, 32, 32, 0.75);
}

.loader-line {
    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.08);
}

.loader-line::after {
    content: "";

    position: absolute;

    inset: 0;

    width: 45%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red),
            transparent
        );

    animation:
        loaderScan 1.15s linear infinite;
}

@keyframes loaderScan {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(240%);
    }
}

/* =========================================================
   PAGE TRANSITION
   ========================================================= */

body.page-leaving {
    opacity: 0;

    transform: scale(0.99);

    filter: blur(4px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        filter 0.18s ease;
}

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

@media (max-width: 900px) {
    .section {
        padding: 65px 0;
    }

    .container {
        width: min(
            calc(100% - 28px),
            var(--container)
        );
    }
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .container {
        width: calc(100% - 24px);
    }

    .section {
        padding: 52px 0;
    }

    .section-title {
        font-size: 34px;
        letter-spacing: -1.3px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .btn {
        width: 100%;
    }

    .glass {
        border-radius: 15px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}