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

html {
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    min-height: 100%;
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-primary);
    background-image: url('../Images/war-6520667_1920.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    padding-top: var(--navbar-height);
    margin: 0;
    position: relative;
    overflow-x: clip;
    max-width: 100%;
    color: var(--color-text-primary);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(196, 30, 58, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, var(--color-bg-overlay) 0%, var(--color-bg-overlay-end) 100%);
    z-index: -1;
}

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

@media (max-width: 768px) {
    html {
        background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    }

    body {
        background-attachment: scroll;
        background-image: none;
    }

    body::before {
        position: absolute;
        background: linear-gradient(135deg, var(--color-bg-overlay) 0%, var(--color-bg-overlay-end) 100%);
    }
}

@media (min-width: 769px) {
    body {
        background-image: url('../Images/war-6520667_1920.png');
        background-attachment: fixed;
    }

    body::before {
        position: fixed;
        background: linear-gradient(135deg, var(--color-bg-overlay) 0%, var(--color-bg-overlay-end) 100%);
    }
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 20px;
}

.container:has(.stats-container) {
    max-width: var(--container-max-wide) !important;
}