/*
 * ============================================================
 * Card Stuff Yes
 * Homepage Styles
 * ============================================================
 *
 * This file controls the appearance of the homepage.
 *
 * IMPORTANT:
 * All actual colors come from colors.css.
 *
 * This keeps the Card Stuff Yes color scheme centralized so
 * the same theme can be used across the entire website.
 *
 * ============================================================
 */


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

html {

    min-height: 100%;

}


body {

    margin: 0;

    min-height: 100vh;

    background:
        var(--color-background);

    color:
        var(--color-text);

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

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/*
 * Reduce Movement
 *
 * The settings page can enable this by adding the
 * "reduce-motion" class to the document element.
 *
 * This makes homepage transitions and movement minimal.
 */

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

}


/*
 * Reduce Flashing
 *
 * This class disables visual effects that could create
 * unnecessary flashing.
 *
 * The homepage itself intentionally uses very little flashing
 * already, but this provides a global hook for future effects.
 */

html.reduce-flashing .flash-effect {

    animation: none !important;

}


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

.site-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        18px
        24px;

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

    background:
        var(--color-background-secondary);

}


/*
 * Website title in the header.
 */

.site-title {

    font-size: 20px;

    font-weight: bold;

    letter-spacing: 1px;

}


/*
 * Header account controls.
 */

.header-account {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;

}


/*
 * Current username.
 */

#header-username {

    max-width: 220px;

    overflow: hidden;

    color:
        var(--color-text-secondary);

    font-size: 14px;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/*
 * Header links.
 */

.header-link {

    color:
        var(--color-link);

    text-decoration: none;

    transition:
        color
        var(--global-transition-speed);

}


.header-link:hover {

    color:
        var(--color-link-hover);

}


.header-link:focus-visible {

    outline:
        2px solid
        var(--color-link-hover);

    outline-offset: 3px;

}


/* ============================================================
   MAIN HOMEPAGE
   ============================================================ */

.homepage {

    width:
        min(
            calc(100% - 32px),
            760px
        );

    min-height:
        calc(100vh - 70px);

    margin:
        0
        auto;

}


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

.hero-section {

    padding:
        70px
        20px
        55px;

    text-align: center;

}


.hero-section h1 {

    margin: 0;

    font-size:
        clamp(
            34px,
            8vw,
            64px
        );

    letter-spacing: 2px;

    line-height: 1.1;

}


/*
 * Text underneath the main title.
 */

.hero-subtitle {

    margin:
        12px
        0
        36px;

    color:
        var(--color-text-secondary);

    font-size: 18px;

}


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

.main-actions {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}


.main-button {

    width:
        min(
            100%,
            300px
        );

    min-height: 52px;

    padding:
        12px
        20px;

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

    border-radius: 6px;

    background:
        var(--color-button);

    color:
        var(--color-button-text);

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition:
        background
        var(--global-transition-speed),
        border-color
        var(--global-transition-speed),
        transform
        var(--global-transition-speed);

}


.main-button:hover {

    background:
        var(--color-button-hover);

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

}


.main-button:active {

    transform:
        translateY(1px);

}


.main-button:focus-visible {

    outline:
        2px solid
        var(--color-link-hover);

    outline-offset: 3px;

}


/* ============================================================
   SERVER SECTION
   ============================================================ */

.server-section {

    padding:
        28px
        0;

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

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

}


.server-section h2,
.profile-section h2 {

    margin:
        0
        0
        20px;

    font-size: 20px;

    letter-spacing: 1px;

}


/*
 * Online/offline status.
 */

.server-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    font-weight: bold;

}


.status-dot {

    color:
        var(--color-success);

    font-size: 14px;

}


/*
 * Used when the server is offline.
 */

.status-dot.offline {

    color:
        var(--color-error);

}


/*
 * Individual server statistics.
 */

.server-stat {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        8px
        0;

    color:
        var(--color-text-secondary);

}


.server-stat strong {

    color:
        var(--color-text);

}


/* ============================================================
   PROFILE SECTION
   ============================================================ */

.profile-section {

    padding:
        32px
        0;

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

}


/*
 * Profile card.
 */

.profile-card {

    padding:
        20px;

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

    border-radius: 6px;

    background:
        var(--color-background-secondary);

}


/*
 * Player username.
 */

.profile-username {

    margin:
        0
        0
        18px;

    font-size: 22px;

}


/*
 * Profile information rows.
 */

.profile-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        8px
        0;

}


.profile-row span {

    color:
        var(--color-text-secondary);

}


.profile-row strong {

    color:
        var(--color-text);

}


/*
 * ELO rating.
 */

.profile-elo strong {

    font-weight: bold;

}


/*
 * Profile button.
 */

.profile-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    margin-top: 18px;

    padding:
        0
        18px;

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

    border-radius: 6px;

    background:
        var(--color-button);

    color:
        var(--color-button-text);

    font-size: 14px;

    font-weight: bold;

    text-decoration: none;

    transition:
        background
        var(--global-transition-speed),
        border-color
        var(--global-transition-speed);

}


.profile-button:hover {

    background:
        var(--color-button-hover);

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

}


/*
 * Message shown when the user is not signed in.
 */

.profile-login-message {

    padding:
        18px;

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

    border-radius: 6px;

    background:
        var(--color-background-secondary);

    color:
        var(--color-text-secondary);

}


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

.site-footer {

    padding:
        32px
        20px;

    text-align: center;

}


.footer-title {

    margin-bottom: 8px;

    color:
        var(--color-text);

    font-size: 16px;

    font-weight: bold;

}


.footer-credit {

    color:
        var(--color-text-secondary);

    font-size: 14px;

}


/* ============================================================
   ERROR STATE
   ============================================================ */

.server-error {

    color:
        var(--color-error);

}


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

@media (max-width: 600px) {

    .site-header {

        align-items: flex-start;

        padding:
            15px
            16px;

    }


    .site-title {

        font-size: 16px;

    }


    .header-account {

        gap: 8px;

        flex-wrap: wrap;

    }


    #header-username {

        max-width: 120px;

    }


    .header-link {

        font-size: 13px;

    }


    .hero-section {

        padding:
            50px
            12px
            45px;

    }


    .hero-section h1 {

        font-size:
            clamp(
                32px,
                10vw,
                50px
            );

    }


    .hero-subtitle {

        font-size: 16px;

    }


    .server-stat,
    .profile-row {

        font-size: 14px;

    }


    .profile-card {

        padding: 16px;

    }

}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 380px) {

    .site-header {

        flex-direction: column;

    }


    .header-account {

        justify-content: flex-start;

    }


    .homepage {

        width:
            calc(100% - 24px);

    }

}


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

/*
 * Respect the operating system's accessibility preference even
 * if the user has not selected the option in Card Stuff Yes.
 */

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

    * {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

/* ============================================================
   SECURITY LOCKDOWN BANNER
   ============================================================ */

.security-lockdown-banner {
    width:
        min(
            calc(100% - 24px),
            1000px
        );

    margin:
        16px auto 0;

    padding:
        16px 18px;

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

    border-left:
        6px solid
        var(--color-warning-border);

    border-radius: 8px;

    background:
        var(--color-warning-background);

    color:
        var(--color-warning-text);
}


.security-lockdown-banner[hidden] {
    display: none;
}


.security-lockdown-banner strong {
    display: block;

    margin-bottom: 6px;

    letter-spacing: 0.04em;
}


.security-lockdown-banner p {
    margin: 0;

    line-height: 1.5;
}


.security-lockdown-banner span {
    display: block;

    margin-top: 8px;

    font-size: 12px;

    opacity: 0.85;
}


/* Confirmed security incident */

.security-lockdown-banner[data-state="confirmed_breach"] {
    border-color:
        var(--color-error);

    border-left-color:
        var(--color-error);
}


/* Recovery in progress */

.security-lockdown-banner[data-state="recovery"] {
    border-color:
        var(--color-info);

    border-left-color:
        var(--color-info);
}
}