:root {

    --bg: #080812;

    --surface: #111124;

    --surface-light: #181833;

    --text: #f5f3ff;

    --muted: #a9a5c2;

    --accent: #8b5cf6;

    --accent-light: #b794ff;

    --border: rgba(255, 255, 255, 0.08);

    --population: #b794ff;

    --food: #7dd3a8;

    --materials: #c4a77d;

    --wealth: #e8c76a;

    --morale: #f28bb5;

}


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

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

    background:

        radial-gradient(
            circle at 50% 10%,
            rgba(139, 92, 246, 0.15),
            transparent 35%
        ),

        var(--bg);

    color: var(--text);

}


button {

    font: inherit;

}


a {

    color: inherit;

    text-decoration: none;

}



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


.game-header {

    width:
        min(
            1200px,
            calc(100% - 40px)
        );

    min-height: 72px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

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

}


.brand {

    font-size: 1.5rem;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.brand span {

    color: var(--accent-light);

}


.game-header-title {

    color: var(--muted);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.18em;

}


.back-link {

    justify-self: end;

    color: var(--muted);

    font-size: 0.9rem;

}


.back-link:hover {

    color: var(--text);

}



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


.game-page {

    width:
        min(
            1100px,
            calc(100% - 40px)
        );

    margin: 0 auto;

    padding:
        60px 0 100px;

}



/* =========================
INTRO
========================= */


.game-intro {

    text-align: center;

}


.game-category {

    color: var(--accent-light);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.18em;

}


.game-intro h1 {

    margin: 12px 0;

    font-size:
        clamp(
            3rem,
            7vw,
            5.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.06em;

}


.game-intro p {

    color: var(--muted);

    font-size: 1.05rem;

    line-height: 1.6;

}



/* =========================
TURN
========================= */


.turn-display {

    width: fit-content;

    margin:
        35px auto 20px;

    padding:
        9px 16px;

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

    border-radius: 999px;

    background: var(--surface);

    color: var(--muted);

    font-size: 0.85rem;

}


.turn-display strong {

    color: var(--text);

}



/* =========================
RESOURCES
========================= */


.resources {

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 12px;

}


.resource-card {

    padding: 15px;

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

    border-radius: 14px;

    background:
        rgba(
            17,
            17,
            36,
            0.85
        );

}


.resource-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color: var(--muted);

    font-size: 0.78rem;

}


.resource-top strong {

    color: var(--text);

    font-size: 1rem;

}


.resource-bar {

    height: 5px;

    margin-top: 12px;

    overflow: hidden;

    border-radius: 999px;

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

}


.resource-fill {

    width: 50%;

    height: 100%;

    border-radius: inherit;

    transition:
        width 0.4s ease;

}


.population-fill {

    background: var(--population);

}


.food-fill {

    background: var(--food);

}


.materials-fill {

    background: var(--materials);

}


.wealth-fill {

    background: var(--wealth);

}


.morale-fill {

    background: var(--morale);

}



/* =========================
EVENT PANEL
========================= */


.event-panel {

    margin-top: 22px;

    padding: 42px;

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

    border-radius: 24px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                139,
                92,
                246,
                0.1
            ),
            transparent 55%
        ),

        var(--surface);

    text-align: center;

}


.event-label {

    color: var(--accent-light);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.18em;

}


.event-panel h2 {

    margin: 15px 0;

    font-size:
        clamp(
            2rem,
            5vw,
            3.2rem
        );

    letter-spacing: -0.04em;

}


.event-description {

    max-width: 700px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 1.05rem;

    line-height: 1.75;

}



/* =========================
CHOICES
========================= */


.choices {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 15px;

    margin-top: 35px;

}


.choice-button {

    min-height: 155px;

    padding: 24px;

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

    border-radius: 16px;

    background: var(--surface-light);

    color: var(--text);

    text-align: left;

    cursor: pointer;

    transition:

        transform 0.2s ease,

        border-color 0.2s ease,

        background 0.2s ease;

}


.choice-button:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(
            183,
            148,
            255,
            0.45
        );

    background:
        rgba(
            139,
            92,
            246,
            0.12
        );

}


.choice-number {

    display: block;

    margin-bottom: 14px;

    color: var(--accent-light);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.choice-title {

    display: block;

    margin-bottom: 9px;

    font-size: 1.05rem;

    font-weight: 700;

}


.choice-description {

    display: block;

    color: var(--muted);

    font-size: 0.85rem;

    line-height: 1.55;

}



/* =========================
LOG
========================= */


.civilization-log {

    margin-top: 22px;

    padding: 24px;

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

    border-radius: 18px;

    background:
        rgba(
            17,
            17,
            36,
            0.65
        );

}


.log-heading {

    margin-bottom: 14px;

    color: var(--text);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.log-entries {

    max-height: 150px;

    overflow-y: auto;

}


.log-entries p {

    margin: 8px 0;

    color: var(--muted);

    font-size: 0.85rem;

    line-height: 1.5;

}



/* =========================
END SCREEN
========================= */


.end-screen {

    margin-top: 22px;

    padding:
        55px 30px 70px;

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

    border-radius: 24px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                139,
                92,
                246,
                0.16
            ),
            transparent 55%
        ),

        var(--surface);

    text-align: center;

}


.end-screen h2 {

    margin:
        15px 0 10px;

    font-size:
        clamp(
            2.4rem,
            6vw,
            4rem
        );

    letter-spacing: -0.05em;

}


.ending-subtitle {

    color: var(--muted);

    font-size: 1.05rem;

    line-height: 1.6;

}



/* =========================
FINAL STATS
========================= */


.final-stats {

    max-width: 750px;

    margin:
        35px auto 42px;

    display: grid;

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

    gap: 10px;

}


.final-stats div {

    padding: 16px;

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

    border-radius: 12px;

    background: var(--surface-light);

}


.final-stats span {

    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 0.7rem;

}


.final-stats strong {

    font-size: 1.2rem;

}



/* ==================================================
CIVILIZATION VISUAL
================================================== */


.civilization-visual {

    position: relative;

    width:
        min(
            820px,
            100%
        );

    height: 390px;

    margin:
        15px auto 50px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            183,
            148,
            255,
            0.25
        );

    border-radius: 28px;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(
                139,
                92,
                246,
                0.20
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(
                183,
                148,
                255,
                0.07
            ),
            transparent 55%
        ),

        #0b0b19;

    box-shadow:

        0 0 0 8px
            rgba(
                139,
                92,
                246,
                0.025
            ),

        0 30px 90px
            rgba(
                0,
                0,
                0,
                0.35
            );

}


/* subtle technical grid */


.visual-grid {

    position: absolute;

    inset: 0;

    opacity: 0.22;

    background-image:

        linear-gradient(
            rgba(
                183,
                148,
                255,
                0.07
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                183,
                148,
                255,
                0.07
            ) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

}



/* =========================
ORBIT RINGS
========================= */


.visual-orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    border:
        1px solid
        rgba(
            183,
            148,
            255,
            0.16
        );

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


.orbit-one {

    width: 190px;

    height: 190px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(18deg);

}


.orbit-two {

    width: 285px;

    height: 160px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-28deg);

}


.orbit-three {

    width: 410px;

    height: 230px;

    border-color:
        rgba(
            183,
            148,
            255,
            0.09
        );

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(12deg);

}



/* =========================
CENTRAL CORE
========================= */


.visual-core {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 135px;

    height: 135px;

    transform:
        translate(
            -50%,
            -50%
        );

    display: flex;

    align-items: center;

    justify-content: center;

}


.core-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

}


.ring-outer {

    border:
        1px solid
        rgba(
            183,
            148,
            255,
            0.35
        );

    box-shadow:
        0 0 35px
        rgba(
            139,
            92,
            246,
            0.15
        );

    animation:
        pulseRing 4s ease-in-out infinite;

}


.ring-middle {

    inset: 12px;

    border:
        1px solid
        rgba(
            183,
            148,
            255,
            0.24
        );

}


.ring-inner {

    inset: 28px;

    background:

        radial-gradient(
            circle,
            rgba(
                183,
                148,
                255,
                0.22
            ),
            rgba(
                139,
                92,
                246,
                0.05
            ) 60%,
            transparent 72%
        );

    border:
        1px solid
        rgba(
            183,
            148,
            255,
            0.4
        );

}



/* =========================
CORE SYMBOL
========================= */


.core-symbol {

    position: relative;

    width: 38px;

    height: 38px;

    transform:
        rotate(45deg);

}


.core-symbol span {

    position: absolute;

    display: block;

    border:
        2px solid
        var(--accent-light);

    opacity: 0.9;

}


.core-symbol span:nth-child(1) {

    width: 18px;

    height: 18px;

    left: 10px;

    top: 0;

}


.core-symbol span:nth-child(2) {

    width: 18px;

    height: 18px;

    left: 0;

    top: 10px;

}


.core-symbol span:nth-child(3) {

    width: 18px;

    height: 18px;

    left: 10px;

    top: 20px;

}



/* =========================
NODES
========================= */


.visual-node {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--accent-light);

    box-shadow:

        0 0 12px
        rgba(
            183,
            148,
            255,
            0.8
        );

}


.node-one {

    left: 24%;

    top: 35%;

}


.node-two {

    left: 72%;

    top: 29%;

}


.node-three {

    left: 79%;

    top: 66%;

}


.node-four {

    left: 20%;

    top: 67%;

}


.node-five {

    left: 50%;

    top: 17%;

}



/* =========================
VISUAL LABEL
========================= */


.visual-label {

    position: absolute;

    left: 50%;

    bottom: 28px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

}


.visual-label span {

    color:
        rgba(
            245,
            243,
            255,
            0.55
        );

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.2em;

}


.visual-label strong {

    color: var(--accent-light);

    font-size: 1.05rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}



/* =========================
FINAL STORY
========================= */


.final-story {

    max-width: 650px;

    margin:
        0 auto 35px;

    padding-top: 30px;

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

}


.final-story h3 {

    margin-bottom: 12px;

    font-size: 1rem;

}


.final-story p {

    color: var(--muted);

    line-height: 1.75;

}



/* =========================
DEFINING TRAIT
========================= */


.defining-trait {

    margin:
        35px auto;

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.defining-trait span {

    color: var(--muted);

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


.defining-trait strong {

    color: var(--accent-light);

    font-size: 1.8rem;

}



/* =========================
ACTIONS
========================= */


.end-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 2px;

}


.primary-button,
.secondary-button {

    display: inline-block;

    margin: 8px;

    padding:
        13px 24px;

    border-radius: 11px;

    font-weight: 700;

    cursor: pointer;

}


.primary-button {

    border: 0;

    background:
        var(--accent);

    color: white;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.primary-button:hover {

    background:
        var(--accent-light);

    transform:
        translateY(-2px);

}


.secondary-button {

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

    color: var(--muted);

    transition:
        color 0.2s ease,
        border-color 0.2s ease;

}


.secondary-button:hover {

    color: var(--text);

    border-color:
        rgba(
            183,
            148,
            255,
            0.35
        );

}



/* =========================
ANIMATION
========================= */


@keyframes pulseRing {

    0%,
    100% {

        transform:
            scale(1);

        opacity: 0.65;

    }

    50% {

        transform:
            scale(1.05);

        opacity: 1;

    }

}



/* =========================
HIDDEN
========================= */


[hidden] {

    display: none !important;

}



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


@media (max-width: 850px) {


    .resources {

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

    }


    .resources
    .resource-card:last-child {

        grid-column:
            span 2;

    }


    .choices {

        grid-template-columns: 1fr;

    }


    .choice-button {

        min-height: auto;

    }


    .final-stats {

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

    }


    .final-stats
    div:last-child {

        grid-column:
            span 2;

    }


    .civilization-visual {

        height: 340px;

    }

}



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


@media (max-width: 600px) {


    .game-header {

        width:
            calc(100% - 28px);

        grid-template-columns:
            1fr auto;

    }


    .game-header-title {

        display: none;

    }


    .game-page {

        width:
            calc(100% - 28px);

        padding-top: 45px;

    }


    .resources {

        grid-template-columns: 1fr;

    }


    .resources
    .resource-card:last-child {

        grid-column: auto;

    }


    .event-panel {

        padding:
            28px 18px;

    }


    .final-stats {

        grid-template-columns: 1fr;

    }


    .final-stats
    div:last-child {

        grid-column: auto;

    }


    .end-screen {

        padding:
            40px 18px 55px;

    }


    .civilization-visual {

        height: 290px;

        border-radius: 22px;

    }


    .orbit-one {

        width: 150px;

        height: 150px;

    }


    .orbit-two {

        width: 220px;

        height: 130px;

    }


    .orbit-three {

        width: 300px;

        height: 180px;

    }


    .visual-core {

        width: 110px;

        height: 110px;

    }


    .visual-label {

        bottom: 20px;

    }


    .visual-label strong {

        font-size: 0.9rem;

    }


    .visual-node {

        width: 6px;

        height: 6px;

    }

}