/* --- Design tokens shared across the site --- */
:root {
    --bg: #0b0f14;
    --card: #121923;
    --muted: #8aa0b7;
    --text: #ffffff; /* site-wide text color */
    --accent: #6ea8fe;
    --win: #19c37d;
    --ring: #263245;
}

/* --- Custom fonts --- */
@font-face {
    font-family: "TechnoRace";
    src: url("../fonts/TechnoRace-Italic.woff2") format("woff2"), url("../fonts/TechnoRace-Italic.woff") format("woff"), url("../fonts/TechnoRace-Italic.ttf") format("truetype"), url("../fonts/TechnoRace-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic; /* this file is italic */
    font-display: swap;
}

@font-face {
    font-family: "Rewritten By Machine";
    src: url("../fonts/RewrittenByMachine-Regular.woff2") format("woff2"), url("../fonts/RewrittenByMachine-Regular.woff") format("woff"), url("../fonts/RewrittenByMachine-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Global base styles --- */
html, body {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontally center content */
    align-items: flex-start; /* default: stick to top (good for game page) */

    color: var(--text);
    background: linear-gradient(180deg, #0b0f14, #0e1620 40%, #0b0f14);
    font-family: "Rewritten By Machine", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* --- Typography rules --- */
h1, h2, h3,
.brand, .title, .pill, .btn-main, .cta, .btn, .link {
    font-family: "TechnoRace", system-ui, sans-serif;
    font-style: italic;
}

/* --- Shared page wrapper --- */
.page-wrap {
    width: 100%;
    max-width: 1100px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* --- Optional helper: full vertical centering --- */
.center-y {
    margin: auto; /* pushes wrapper to center vertically */
}


/* 9-Grid button — matches hero cards */
.evil-cta {
    display: grid;
    gap: 10px;
    margin: 6px 0 14px;
    justify-items: end; /* push to the right, like your screenshot */
}

    .evil-cta .card {
        width: min(280px, 100%);
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        border: 1px solid var(--ring);
        background: var(--card);
        box-shadow: 0 6px 18px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.03);
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .evil-cta .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 0 22px rgba(255, 0, 110, .25);
        }

        .evil-cta .card .label {
            top: 8px;
            left: 8px;
            letter-spacing: .4px;
            font-weight: 800;
        }

    .evil-cta .frame {
        aspect-ratio: 4 / 3; /* consistent with the rest of the site */
        display: grid;
        place-items: center;
        background: radial-gradient(circle at 30% 35%, rgba(255,255,255,.08) 0 30%, transparent 31%), radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0 26%, transparent 27%), linear-gradient(180deg, #0e1620, #0b1119);
        border-bottom: 1px solid var(--ring);
    }

    .evil-cta img {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        filter: contrast(1.05) saturate(1.05);
    }

    .evil-cta .cta-text {
        font-weight: 800;
        text-align: center;
        padding: 10px 12px 12px;
        letter-spacing: .3px;
    }

    /* Smaller Evil */
    .evil-cta.small {
        margin-top: 18px;
        justify-items: center;
    }

        .evil-cta.small .card {
            width: 200px;
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(0,0,0,.25);
        }

        .evil-cta.small .frame {
            aspect-ratio: 4/3;
        }

        .evil-cta.small .cta-text {
            font-size: 13px;
            padding: 8px 10px 10px;
        }