/* =========================================
   GLOBAL
========================================= */

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


:root {

    --background: #05090f;
    --panel: #0d1621;
    --panel-light: #121f2d;

    --border: #26394d;

    --text: #f5f7fa;
    --muted: #8193a6;

    --yellow: #ffc247;
    --orange: #ff8b35;

    --green: #5bd69b;
    --blue: #65baff;
    --purple: #aa8cff;
}


body {

    min-height: 100vh;

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

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -10%,
            #193149 0%,
            #08111b 35%,
            #04070b 75%
        );

    background-attachment: fixed;
}


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

.top-header {

    max-width: 1400px;

    margin: auto;

    padding:
        32px
        35px
        10px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.studio-name {

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--yellow);

    font-weight: bold;

    margin-bottom: 5px;
}


.logo-section h1 {

    font-size: 42px;

    letter-spacing: 8px;

    line-height: 1;
}


.tagline {

    color: #93a5b7;

    margin-top: 9px;

    font-size: 14px;
}


.header-buttons {

    display: flex;

    gap: 10px;
}


.secondary-button,
.danger-button {

    padding:
        10px
        16px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: bold;

    transition: 0.2s;
}


.secondary-button {

    background: #152435;

    border: 1px solid #31465c;

    color: white;
}


.secondary-button:hover {

    background: #1d3045;
}


.danger-button {

    background: transparent;

    border: 1px solid #713d46;

    color: #ff8895;
}


.danger-button:hover {

    background: rgba(
        255,
        90,
        108,
        0.1
    );
}



/* =========================================
   MAIN CONTAINER
========================================= */

.game-container {

    width: 94%;

    max-width: 1400px;

    margin:
        25px
        auto
        60px;
}



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

.resource-section {

    display: grid;

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

    gap: 14px;

    margin-bottom: 20px;
}


.resource-card {

    min-height: 115px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 34, 49, 0.95),
            rgba(11, 20, 30, 0.95)
        );

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

    border-radius: 14px;

    transition:
        transform 0.2s,
        border-color 0.2s;
}


.resource-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #3d5872;
}


.resource-icon {

    width: 50px;
    height: 50px;

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;

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


.resource-label {

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: bold;
}


.resource-card h2 {

    margin-top: 3px;

    font-size: 27px;
}


.resource-rate {

    color: #64788c;

    font-size: 11px;

    margin-top: 3px;
}



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

.game-layout {

    display: grid;

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

    gap: 20px;
}



/* =========================================
   CITY PANEL
========================================= */

.city-panel {

    position: relative;

    min-height: 640px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(35, 71, 95, 0.28),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(15, 27, 40, 0.97),
            rgba(7, 13, 20, 0.98)
        );

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

    border-radius: 18px;

    overflow: hidden;
}


.city-panel::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 186, 68, 0.05),
            transparent 65%
        );

    pointer-events: none;
}


.city-header {

    position: absolute;

    top: 27px;
    left: 30px;
    right: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.eyebrow {

    color: #6d8296;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;
}


.city-header h2 {

    margin-top: 5px;

    font-size: 23px;
}


.city-level {

    min-width: 95px;

    padding:
        9px
        15px;

    text-align: right;

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

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

    border-radius: 10px;
}

.city-level-group {
    display: flex;
    gap: 8px;
}

.population-level strong { color: var(--green); }


.city-level span {

    display: block;

    color: #6f8498;

    font-size: 8px;

    letter-spacing: 1px;
}


.city-level strong {

    display: block;

    margin-top: 3px;

    color: var(--yellow);

    font-size: 18px;
}



/* =========================================
   CITY VISUAL
========================================= */

.city-visual {

    position: relative;

    z-index: 2;

    max-width: 650px;

    text-align: center;

    font-size: clamp(
        80px,
        10vw,
        130px
    );

    letter-spacing: 7px;

    line-height: 1.3;

    filter:
        drop-shadow(
            0
            12px
            30px
            rgba(
                0,
                0,
                0,
                0.6
            )
        );

    transition:
        transform
        0.4s;
}

.city-visual { filter: drop-shadow(0 0 13px rgba(255,194,71,.16)); animation: cityBreathe 4s ease-in-out infinite; }
.city-visual.city-thriving { filter: drop-shadow(0 0 22px rgba(91,214,155,.32)); }

@keyframes cityBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.018); } }


.city-visual:hover {

    transform:
        scale(1.03);
}


.city-description {

    position: relative;

    z-index: 2;

    max-width: 550px;

    margin:
        20px
        auto
        25px;

    color: #8496a8;

    font-size: 13px;

    text-align: center;

    line-height: 1.6;
}



/* =========================================
   ENERGY BUTTON
========================================= */

.energy-button {

    position: relative;

    z-index: 3;

    min-width: 290px;

    padding:
        17px
        30px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    color: #111;

    background:
        linear-gradient(
            135deg,
            #ffd05a,
            #ff8c34
        );

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 0.5px;

    box-shadow:
        0
        8px
        30px
        rgba(
            255,
            154,
            51,
            0.2
        );

    transition:
        0.15s;
}


.energy-button:hover {

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0
        10px
        35px
        rgba(
            255,
            154,
            51,
            0.35
        );
}


.energy-button:active {

    transform:
        scale(0.96);
}


.energy-button-icon {

    font-size: 22px;
}


.energy-button small {

    padding-left: 10px;

    border-left:
        1px solid
        rgba(
            0,
            0,
            0,
            0.2
        );

    font-size: 10px;
}



/* =========================================
   CLICK STATS
========================================= */

.click-stats {

    position: relative;

    z-index: 3;

    display: flex;

    gap: 18px;

    margin-top: 25px;
}

.click-stats div:last-child strong { color: var(--green); }


.click-stats div {

    min-width: 100px;

    text-align: center;
}


.click-stats span {

    display: block;

    color: #60768b;

    font-size: 8px;

    letter-spacing: 1px;
}


.click-stats strong {

    display: block;

    margin-top: 4px;

    font-size: 18px;
}



/* =========================================
   BUILDING PANEL
========================================= */

.building-panel {

    max-height: 640px;

    padding: 23px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            rgba(14, 25, 37, 0.98),
            rgba(8, 16, 25, 0.98)
        );

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

    border-radius: 18px;
}


.panel-heading {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.buy-amounts {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #09131d;
}

.buy-amount {
    border: 0;
    border-right: 1px solid var(--border);
    padding: 6px 8px;
    color: var(--muted);
    background: transparent;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.buy-amount:last-child { border-right: 0; }
.buy-amount:hover { color: var(--text); background: rgba(255,255,255,.05); }
.buy-amount.active { color: #121820; background: var(--yellow); }


.panel-heading h2 {

    margin-top: 4px;

    font-size: 23px;
}


.building-count {

    padding:
        6px
        9px;

    border:
        1px solid
        #30455a;

    border-radius: 7px;

    color: #8395a7;

    font-size: 10px;
}



/* =========================================
   BUILDING CARDS
========================================= */

.building-card {

    padding: 16px;

    margin-bottom: 13px;

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

    border:
        1px solid
        #24384b;

    border-radius: 12px;

    transition:
        0.2s;
}


.building-card:hover {

    border-color:
        #405e78;

    transform:
        translateY(-2px);
}


.building-top {

    display: flex;

    gap: 13px;

    align-items: flex-start;
}


.building-icon {

    flex-shrink: 0;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 24px;
}


.solar-icon {

    background:
        rgba(
            255,
            194,
            71,
            0.09
        );
}


.farm-icon {

    background:
        rgba(
            91,
            214,
            155,
            0.09
        );
}


.shelter-icon {

    background:
        rgba(
            101,
            186,
            255,
            0.09
        );
}


.lab-icon {

    background:
        rgba(
            170,
            140,
            255,
            0.09
        );
}


.building-top h3 {

    font-size: 14px;

    margin-top: 2px;
}


.building-top p {

    margin-top: 5px;

    color: #72869a;

    font-size: 10px;

    line-height: 1.4;
}


.building-stats {

    display: flex;

    justify-content: space-between;

    gap: 8px;

    margin:
        13px
        0;
}


.building-stats span {

    color: #697d91;

    font-size: 9px;
}


.building-stats strong {

    display: block;

    margin-top: 3px;

    color: #cdd7e1;

    font-size: 11px;
}



/* =========================================
   BUY BUTTON
========================================= */

.buy-button {

    width: 100%;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background:
        #1c3347;

    color: white;

    font-size: 11px;

    font-weight: bold;

    transition:
        0.2s;
}


.buy-button:hover:not(:disabled) {

    background:
        #26475f;

    transform:
        translateY(-1px);
}


.buy-button span {

    color: var(--yellow);
}


.buy-button:disabled {

    opacity: 0.36;

    cursor: not-allowed;
}



/* =========================================
   PROGRESS
========================================= */

.progress-panel {

    margin-top: 20px;

    padding: 23px;

    background:
        rgba(
            13,
            23,
            34,
            0.9
        );

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

    border-radius: 15px;
}


.progress-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 15px;
}


.progress-header h2 {

    margin-top: 5px;

    font-size: 18px;
}


#nextStageText {

    color: #778da1;

    font-size: 10px;
}


.progress-track {

    height: 8px;

    margin-top: 18px;

    overflow: hidden;

    background: #101d29;

    border-radius: 100px;
}


.progress-bar {

    width: 0%;

    height: 100%;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #ffc247,
            #ff8b35
        );

    transition:
        width
        0.5s ease;
}


.stage-labels {

    display: flex;

    justify-content: space-between;

    margin-top: 9px;

    color: #526679;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}



/* =========================================
   SAVE
========================================= */

.save-status {

    margin-top: 13px;

    text-align: right;

    color: #53697d;

    font-size: 9px;
}


.notification {

    position: fixed;

    right: 25px;
    bottom: 25px;

    padding:
        12px
        20px;

    border:
        1px solid
        #315d4b;

    border-radius: 9px;

    background:
        #10251e;

    color: #72dfaa;

    font-size: 12px;

    font-weight: bold;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(15px);

    transition:
        0.3s;
}


.notification.show {

    opacity: 1;

    transform:
        translateY(0);
}



/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {

    width: 7px;
}


::-webkit-scrollbar-track {

    background: #07101a;
}


::-webkit-scrollbar-thumb {

    background: #263c50;

    border-radius: 100px;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .game-layout {

        grid-template-columns:
            1fr;
    }


    .building-panel {

        max-height: none;
    }


    .city-panel {

        min-height: 570px;
    }

}



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

@media (max-width: 700px) {

    .top-header {

        align-items: flex-start;

        flex-direction: column;

        padding:
            25px
            20px
            10px;
    }


    .logo-section h1 {

        font-size: 32px;

        letter-spacing: 5px;
    }


    .resource-section {

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


    .resource-card {

        min-height: 95px;

        padding: 14px;

        gap: 10px;
    }


    .resource-icon {

        width: 38px;
        height: 38px;

        font-size: 21px;
    }


    .resource-card h2 {

        font-size: 20px;
    }


    .city-panel {

        min-height: 560px;

        padding: 20px;
    }


    .city-header {

        top: 20px;
        left: 20px;
        right: 20px;
    }


    .city-visual {

        font-size: 70px;
    }


    .energy-button {

        min-width: 240px;

        padding:
            15px
            20px;
    }


    .progress-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .stage-labels {

        font-size: 6px;
    }

}



/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 450px) {

    .resource-section {

        grid-template-columns:
            1fr;
    }


    .header-buttons {

        width: 100%;
    }


    .header-buttons button {

        flex: 1;
    }


    .click-stats {

        gap: 10px;
    }

}

/* =========================================
   STAGE TABS
========================================= */

.stage-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* =========================================
   COMMAND / UPGRADE VIEWS
========================================= */

.game-mode-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px;
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(7, 15, 24, 0.72);
}

.game-mode-tab {
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
    transition: .2s ease;
}

.game-mode-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.game-mode-tab.active { color: #10151d; background: linear-gradient(135deg, var(--yellow), var(--orange)); }

.ready-badge {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    margin-left: 5px;
    border-radius: 99px;
    background: #17293b;
    color: var(--yellow);
    font-size: 9px;
}

.game-mode-tab.active .ready-badge { background: rgba(0,0,0,.2); color: #10151d; }

.tutorial-hint,
.auto-save-indicator {
    display: inline-flex;
    align-items: center;
    margin: -9px 0 17px;
    padding: 8px 11px;
    border-radius: 8px;
    color: #9db1c2;
    background: rgba(101,186,255,.07);
    border: 1px solid rgba(101,186,255,.18);
    font-size: 10px;
}
.auto-save-indicator { float: right; color: #768a9c; background: transparent; border-color: transparent; }
.auto-save-indicator::first-letter { color: var(--green); }
.auto-save-indicator.saved { color: var(--green); animation: savePulse .5s ease; }

.milestone-panel {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(110px, 1.35fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    padding: 15px 18px;
    border: 1px solid rgba(101, 186, 255, .25);
    border-radius: 13px;
    background: linear-gradient(100deg, rgba(20, 43, 62, .84), rgba(12, 22, 33, .9));
}

.milestone-copy { display: grid; gap: 4px; }
.milestone-copy strong { font-size: 13px; }
.milestone-copy span { color: var(--muted); font-size: 10px; }
.milestone-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #07111b; }
.milestone-progress div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--yellow)); box-shadow: 0 0 14px rgba(101,186,255,.7); transition: width .35s ease; }
.milestone-percent { color: var(--yellow); font-size: 13px; }

body.upgrades-open .game-layout,
body.upgrades-open .stage-panel > .resource-section,
body.upgrades-open .stage-panel > .save-status,
body.upgrades-open .engagement-grid,
body.upgrades-open .badge-section,
body.upgrades-open .rebirth-requirement,
body.upgrades-open #rebirthButton { display: none; }

body.stats-open .stage-panel,
body.stats-open .milestone-panel,
body.stats-open .tutorial-hint,
body.stats-open .auto-save-indicator,
body.stats-open .stage-reset-dock { display: none !important; }
body.stats-open .game-container { margin-bottom: 26px; }

.stats-panel { display: none; width: 94%; max-width: 1400px; margin: 0 auto 60px; }
body.stats-open .stats-panel { display: block; animation: fadeIn .3s ease; }
.stats-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 25px; border: 1px solid rgba(255,194,71,.28); border-radius: 16px; background: linear-gradient(120deg, rgba(41,56,63,.9), rgba(13,23,34,.94)); }
.stats-hero h2 { margin: 5px 0 7px; font-size: 26px; }
.stats-hero p:last-child { color: var(--muted); font-size: 11px; }
.stats-rank { min-width: 130px; padding: 12px 16px; border: 1px solid rgba(255,194,71,.32); border-radius: 11px; background: rgba(0,0,0,.18); text-align: right; }
.stats-rank span { display: block; color: var(--muted); font-size: 8px; letter-spacing: 1px; }
.stats-rank strong { display: block; margin-top: 5px; color: var(--yellow); font-size: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.stat-group { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(13,23,34,.9); }
.stat-group h3 { margin-bottom: 13px; color: #d9e8f4; font-size: 14px; }
.stat-lines { display: grid; gap: 3px; }
.stat-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.stat-lines div:last-child { border-bottom: 0; }
.stat-lines span { color: var(--muted); font-size: 10px; }
.stat-lines strong { color: var(--yellow); font-size: 11px; text-align: right; }

.intro-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(3,7,11,.84); backdrop-filter: blur(7px); }
.intro-modal[hidden] { display: none; }
.intro-card { width: min(510px, 100%); padding: 33px; border: 1px solid rgba(255,194,71,.5); border-radius: 19px; background: radial-gradient(circle at 50% 0, rgba(255,194,71,.14), transparent 38%), #0d1621; box-shadow: 0 24px 80px rgba(0,0,0,.55); text-align: center; animation: introEnter .5s ease both; }
.intro-symbol { display: block; margin-bottom: 14px; font-size: 48px; filter: drop-shadow(0 0 18px rgba(255,194,71,.45)); }
.intro-card h2 { margin: 7px 0 12px; font-size: 27px; }
.intro-card > p:not(.eyebrow) { color: #a8bac9; font-size: 12px; line-height: 1.65; }
.intro-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 21px 0; }
.intro-steps span { padding: 9px 5px; border: 1px solid #293d50; border-radius: 8px; color: #b7c9d8; background: rgba(255,255,255,.025); font-size: 9px; }
.intro-start-button { width: 100%; padding: 14px; border: 0; border-radius: 10px; color: #151a20; background: linear-gradient(135deg, var(--yellow), var(--orange)); font-weight: 900; letter-spacing: 1px; cursor: pointer; box-shadow: 0 7px 25px rgba(255,139,53,.22); }

@keyframes introEnter { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes savePulse { 50% { transform: scale(1.05); } }

body:not(.upgrades-open) .upgrade-section { display: none; }

.stage-reset-dock {
    display: none;
    position: fixed;
    z-index: 20;
    right: 24px;
    bottom: 22px;
    width: min(330px, calc(100vw - 48px));
    padding: 12px;
    border: 1px solid rgba(170, 140, 255, .38);
    border-radius: 14px;
    background: rgba(10, 18, 29, .94);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.stage-reset-dock .rebirth-button { margin: 0; padding: 12px; }
.stage-reset-dock p { margin: 9px 3px 1px; color: var(--muted); font-size: 10px; line-height: 1.35; }

/* =========================================
   ACTIVE PLAY, CONTRACTS & BADGES
========================================= */

.engagement-grid {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr);
    gap: 18px;
    margin-top: 20px;
}

.dispatch-card,
.contracts-card,
.badge-section {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(13, 23, 34, .9);
}

.dispatch-card { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(20, 52, 74, .94), rgba(12, 22, 34, .94)); }
.dispatch-card::after { content: "📦"; position: absolute; right: -8px; bottom: -25px; opacity: .1; font-size: 120px; transform: rotate(-12deg); }
.dispatch-topline { display: flex; justify-content: space-between; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.dispatch-topline span:last-child { color: var(--green); }
.dispatch-topline .recharging { color: var(--orange); }
.dispatch-card h2 { margin: 14px 0 7px; font-size: 19px; }
.dispatch-card p { max-width: 400px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.dispatch-card small { position: relative; z-index: 1; display: block; margin-top: 9px; color: #91a5b8; font-size: 10px; }

.dispatch-button {
    position: relative;
    z-index: 1;
    margin-top: 17px;
    padding: 12px 16px;
    border: 1px solid rgba(101,186,255,.7);
    border-radius: 9px;
    color: #d8f0ff;
    background: rgba(55, 139, 194, .2);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: .8px;
    cursor: pointer;
    transition: .2s;
}
.dispatch-button:hover:not(:disabled) { background: rgba(55,139,194,.4); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(101,186,255,.2); }
.dispatch-button:disabled { opacity: .52; cursor: wait; }

.contract-list { display: grid; gap: 8px; margin-top: 12px; }
.contract { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid #213649; border-radius: 9px; background: rgba(255,255,255,.018); }
.contract > div { display: grid; gap: 3px; }
.contract strong { font-size: 11px; }
.contract span { color: var(--muted); font-size: 9px; }
.contract button { border: 1px solid #425970; border-radius: 6px; padding: 6px 8px; color: #aabcca; background: transparent; font-size: 8px; font-weight: 900; white-space: nowrap; }
.contract.complete { border-color: rgba(91,214,155,.62); background: rgba(91,214,155,.055); }
.contract.complete button { border-color: var(--green); color: #10251e; background: var(--green); cursor: pointer; }
.contract.claimed { opacity: .48; }
.contract button:disabled { cursor: default; }

.badge-section { margin-top: 20px; }
.badge-progress { color: var(--yellow); font-size: 11px; font-weight: 900; }
.achievement-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 13px; }
.achievement { display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 9px; border: 1px solid #213649; border-radius: 10px; color: #697b8c; background: rgba(255,255,255,.015); filter: grayscale(1); }
.achievement > span { font-size: 22px; }
.achievement div { display: grid; gap: 3px; }
.achievement strong { font-size: 10px; }
.achievement small { font-size: 8px; line-height: 1.3; }
.achievement.unlocked { border-color: rgba(255,194,71,.58); color: var(--text); background: linear-gradient(135deg, rgba(255,194,71,.09), rgba(255,255,255,.02)); filter: none; }

@media (max-width: 900px) {
    .engagement-grid { grid-template-columns: 1fr; }
    .achievement-grid { grid-template-columns: repeat(2, 1fr); }
}

.stage-tab {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--muted);
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.2s;
}

.stage-tab:hover:not(.locked) {
    border-color: #405e78;
    color: var(--text);
}

.stage-tab.active {
    background: linear-gradient(135deg, #ffd05a, #ff8c34);
    color: #111;
    border-color: transparent;
}

.stage-tab.locked {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
}

.stage-tab.locked::after {
    content: "🔒";
    margin-left: 6px;
}

/* =========================================
   STAGE PANELS
========================================= */

.stage-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.stage-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   REBIRTH BUTTON
========================================= */

.rebirth-button {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #b07cff;
    border-radius: 12px;
    background: linear-gradient(135deg, #2a1a4a, #3d2a6b);
    color: #d9c5ff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 16px;
}

.rebirth-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #3d2a6b, #553a8c);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(170, 140, 255, 0.25);
}

.rebirth-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #555;
    background: #1a1a2a;
    color: #888;
}

/* =========================================
   UPGRADE SECTIONS
========================================= */

.upgrade-section {
    margin-top: 20px;
    padding: 23px;
    background: rgba(13, 23, 34, 0.9);
    border: 1px solid var(--border);
    border-radius: 15px;
}

.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.upgrade-card {
    padding: 14px;
    border: 1px solid #24384b;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
}

.upgrade-card:hover:not(:disabled) {
    border-color: #405e78;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
}

.upgrade-card:not(:disabled) {
    border-color: rgba(255, 194, 71, .48);
    box-shadow: inset 0 0 20px rgba(255, 194, 71, .025);
}

.upgrade-card:not(:disabled)::after {
    content: "READY";
    float: right;
    margin-top: -17px;
    color: var(--green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.upgrade-card:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.upgrade-card.maxed {
    border-color: #315d4b;
    background: rgba(91, 214, 155, 0.08);
}

.upgrade-name {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
}

.upgrade-desc {
    font-size: 10px;
    color: #72869a;
    margin-bottom: 10px;
    line-height: 1.4;
}

.upgrade-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #8395a7;
}

.upgrade-meta span:last-child {
    color: var(--yellow);
    font-weight: bold;
}

/* Lightweight feedback: no canvas or external assets required. */
.fx-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.floating-gain { position: fixed; z-index: 101; color: var(--yellow); font-size: 14px; font-weight: 900; text-shadow: 0 2px 8px #000; animation: floatGain .85s ease-out forwards; }
.spark { position: fixed; z-index: 100; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: sparkBurst .7s ease-out forwards; }
.energy-button { overflow: hidden; }
.energy-button::after { content: ""; position: absolute; inset: -80%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.18) 50%, transparent 58%); transform: translateX(-60%); transition: transform .65s ease; pointer-events: none; }
.energy-button:hover::after { transform: translateX(60%); }
body.upgrade-celebration .game-mode-tabs { animation: upgradePulse .5s ease-out; }

.combo-meter {
    width: min(360px, 92%);
    margin: 14px auto 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 194, 71, .25);
    border-radius: 10px;
    background: rgba(7, 15, 24, .55);
}
.combo-copy { display: flex; align-items: center; justify-content: space-between; color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.combo-copy strong { font-size: 13px; }
.combo-track { height: 5px; overflow: hidden; margin: 7px 0 5px; border-radius: 99px; background: #0b1926; }
.combo-track div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--yellow), #fff0a5); box-shadow: 0 0 12px var(--yellow); transition: width .16s ease; }
.combo-meter small { color: var(--muted); font-size: 9px; }

.lab-caption { color: var(--yellow); font-size: 10px; font-weight: 700; }
.tech-card { position: relative; overflow: hidden; }
.tech-icon { float: right; margin: -3px 0 3px 8px; font-size: 20px; }
.tech-card .upgrade-name { padding-top: 2px; }

@keyframes floatGain { from { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -54px) scale(1.1); } }
@keyframes sparkBurst { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.15); } }
@keyframes upgradePulse { 50% { filter: brightness(1.35); transform: scale(1.018); } }

@media (max-width: 650px) {
    .milestone-panel { grid-template-columns: 1fr auto; gap: 10px; }
    .milestone-progress { grid-column: 1 / -1; grid-row: 2; }
    .game-mode-tabs { width: 100%; }
    .game-mode-tab { flex: 1; }

    .top-header { padding: 22px 18px 8px; align-items: flex-start; }
    .logo-section h1 { font-size: 28px; letter-spacing: 5px; }
    .tagline { font-size: 11px; }
    .header-buttons { flex-wrap: wrap; justify-content: flex-end; }
    .header-buttons button { min-height: 38px; padding: 8px 10px; font-size: 10px; }
    .game-container, .stats-panel { width: 92%; }
    .stage-tabs { gap: 6px; }
    .stage-tab { min-width: calc(50% - 4px); flex: 0 0 calc(50% - 4px); padding: 10px 7px; font-size: 10px; }
    .city-header { left: 17px; right: 17px; top: 17px; }
    .city-header h2 { font-size: 18px; }
    .city-level-group { gap: 4px; }
    .city-level { min-width: 72px; padding: 7px 8px; }
    .city-level strong { font-size: 13px; }
    .city-level span { font-size: 7px; }
    .combo-meter { margin-top: 10px; }
    .auto-save-indicator { display: none; }
    .tutorial-hint { display: flex; width: 100%; margin-top: -5px; }
    .stats-hero { align-items: flex-start; flex-direction: column; padding: 19px; }
    .stats-rank { width: 100%; text-align: left; }
    .stats-grid { grid-template-columns: 1fr; gap: 10px; }
    .stat-group { padding: 16px; }
    .intro-card { padding: 25px 18px; }
    .intro-steps { grid-template-columns: 1fr; }
    .stage-reset-dock { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}
.offline-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.offline-modal-content {
    max-width: 420px;
    width: 90%;
    padding: 32px;
    background: linear-gradient(180deg, #121f2d, #0d1621);
    border: 1px solid var(--border);
    border-radius: 18px;
    text-align: center;
}

.offline-modal-content h2 {
    font-size: 28px;
    margin-bottom: 12px;
}

.offline-modal-content > p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.offline-subtitle {
    font-size: 11px;
    color: #53697d;
    margin-bottom: 24px !important;
}

.offline-earnings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.offline-item {
    padding: 12px;
    background: rgba(255, 194, 71, 0.08);
    border: 1px solid rgba(255, 194, 71, 0.2);
    border-radius: 10px;
    color: var(--yellow);
    font-weight: bold;
    font-size: 15px;
}

.offline-close-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffd05a, #ff8c34);
    border: none;
    border-radius: 10px;
    color: #111;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.offline-close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 154, 51, 0.3);
}
.rebirth-requirement {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(255, 194, 71, 0.06);
    border: 1px solid rgba(255, 194, 71, 0.2);
    border-radius: 10px;
    font-size: 12px;
    color: var(--yellow);
    text-align: center;
    line-height: 1.6;
}

.rebirth-requirement .req-title {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: #ffd97a;
    letter-spacing: 0.5px;
    font-size: 11px;
    text-transform: uppercase;
}

/* Persistent HTML5 energy field: responsive, keyboard-operable DOM pickups. */
.zone-scene.collection-zone { padding: 24px; overflow: visible; }
.collection-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.collection-header h2 { margin-top: 6px; font-size: 28px; }
.field-wallet { padding: 13px 18px; border: 1px solid #65baff66; border-radius: 12px; background: #09162c; text-align: right; min-width: 110px; }
.field-wallet span { color: #90badc; font-size: 9px; letter-spacing: 2px; }
.field-wallet strong { display: block; color: #8de3ff; margin-top: 5px; font-size: 24px; font-variant-numeric: tabular-nums; }
.field-objective { margin: 16px 0; padding: 12px 15px; background: #090e2580; border: 1px solid #aa8cff44; border-radius: 10px; color: #c6b8f7; font-size: 12px; }
.collection-field { position: relative; isolation: isolate; min-height: 350px; overflow: hidden; border: 1px solid #6473a566; border-radius: 16px; background: radial-gradient(ellipse at 50% 65%, #253a63, #101c34 60%, #080e22); box-shadow: inset 0 0 70px #030918; touch-action: manipulation; }
.field-grid { position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(90deg, transparent 0 54px, #628dd333 54px 55px), repeating-linear-gradient(0deg, transparent 0 54px, #628dd333 54px 55px); transform: perspective(500px) rotateX(15deg) scale(1.3); pointer-events: none; }
.collection-field::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 10% 10%, #ad8cff33, transparent 35%), radial-gradient(ellipse at 90% 90%, #65baff44, transparent 40%); }
.field-landmark { position: absolute; pointer-events: none; opacity: .16; font-size: 80px; }
.landmark-one { top: 3%; right: 2%; }
.landmark-two { left: 2%; bottom: 1%; }
.energy-pickup { position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%); border: 1px solid #79dfff; border-radius: 50%; color: #b5f4ff; background: radial-gradient(circle, #52a8e4aa, #274b7344); box-shadow: 0 0 15px #65baff55, inset 0 0 12px #8debff44; font-size: 28px; cursor: pointer; touch-action: manipulation; animation: pickupAppear .3s ease-out; transition: filter .15s, box-shadow .15s; }
.energy-pickup.charged { color: #ffeeb1; border-color: #ffc247; background: radial-gradient(circle, #ae7526cc, #67411744); box-shadow: 0 0 22px #ffc24755; }
.energy-pickup:hover { filter: brightness(1.35); box-shadow: 0 0 25px #65baffaa; }
.energy-pickup:active { filter: brightness(1.7); }
.energy-pickup:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.field-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.field-toolbar p { flex: 1 0 100%; font-size: 11px; line-height: 1.6; color: #9cbbd1; }
.field-toolbar .zone-unlock { margin-top: 0; }
.zone-workshop { margin-top: 18px; padding: 22px; border: 1px solid #354660; background: #0c1724dd; border-radius: 16px; }
.zone-workshop h3 { color: #c6dced; font-size: 16px; margin-bottom: 12px; }
.infrastructure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; }
.infrastructure-grid button { display: grid; gap: 8px; text-align: left; padding: 15px; border: 1px solid #ffc24766; border-radius: 11px; background: #18243c; color: #e7f1fa; cursor: pointer; font-family: inherit; min-height: 115px; }
.infrastructure-grid button:hover:not(:disabled) { background: #233652; }
.infrastructure-grid strong { font-size: 12px; }
.infrastructure-grid small { color: #9eb2c7; font-size: 10px; line-height: 1.5; }
.infrastructure-grid span { color: #ffc247; font-size: 10px; }
.infrastructure-grid button:disabled { border-color: #33435a; opacity: .65; cursor: default; }
.project-modules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.project-modules span { padding: 10px 16px; border: 1px dashed #887758; border-radius: 9px; color: #9aafc0; font-size: 12px; }
.project-modules .filled { color: #72dfaa; border-style: solid; border-color: #5bd69b; background: #5bd69b15; }
.recipe-label { margin-top: 18px; color: #ffc247; font-size: 12px; }
.production-track { height: 8px; margin-top: 15px; overflow: hidden; border-radius: 99px; background: #07111d; }
.production-track div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f39c6c, #ffc247); transition: width .5s linear; }
.resource-card h2, .stat-lines strong { font-variant-numeric: tabular-nums; }
@keyframes pickupAppear { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 650px) {
    .zone-scene.collection-zone { padding: 16px 12px; }
    .collection-header { align-items: flex-start; }
    .collection-header h2 { font-size: 22px; }
    .field-wallet { padding: 10px; min-width: 85px; }
    .field-wallet strong { font-size: 18px; }
    .collection-field { min-height: 320px; }
    .energy-pickup { width: 46px; height: 46px; font-size: 25px; }
    .field-toolbar .zone-unlock { width: 100%; font-size: 11px; }
    .zone-workshop { padding: 15px; }
    .infrastructure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .infrastructure-grid button { padding: 12px; }
}
@media (max-width: 360px) { .infrastructure-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .energy-pickup { animation: none; } }

/* Adventure zones and earned-currency companions. */
body[data-zone="2"] { background: radial-gradient(ellipse at 50% 0, #203a2b, #080f0d 70%); }
body[data-zone="3"] { background: radial-gradient(ellipse at 50% 0, #472c23, #100d0c 70%); }
body[data-zone="4"] { background: radial-gradient(ellipse at 50% 0, #28234a, #080918 70%); }
body[data-zone="5"] { background: radial-gradient(ellipse at 50% 0, #263657, #080b19 70%); }
.zone-mount { margin-bottom: 20px; }
.zone-scene { position: relative; overflow: hidden; isolation: isolate; min-height: 260px; padding: 28px; border: 1px solid var(--zone-accent); border-radius: 20px; background: var(--zone-bg); box-shadow: inset 0 0 90px #0005; }
.zone-1 { --zone-accent: #d6a959; --zone-bg: linear-gradient(110deg, #302b24, #151e28); }
.zone-2 { --zone-accent: #80d39a; --zone-bg: linear-gradient(110deg, #19382a, #14251f); }
.zone-3 { --zone-accent: #f39c6c; --zone-bg: linear-gradient(110deg, #452b20, #231a22); }
.zone-4 { --zone-accent: #b5a3ff; --zone-bg: linear-gradient(110deg, #252249, #111e35); }
.zone-5 { --zone-accent: #8dd5fa; --zone-bg: linear-gradient(110deg, #223456, #1d1634); }
.zone-content { position: relative; z-index: 2; max-width: 800px; }
.zone-content .eyebrow { color: var(--zone-accent); }
.zone-content h2 { margin-top: 8px; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.5px; }
.zone-lore { margin-top: 10px; max-width: 600px; font-size: 12px; line-height: 1.7; color: #b7c8cf; }
.zone-scenery { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .65; }
.zone-scenery > span { position: absolute; right: 4%; top: 18%; font-size: clamp(70px, 15vw, 170px); opacity: .3; filter: drop-shadow(0 0 30px var(--zone-accent)); }
.zone-scenery::before { content: ""; position: absolute; bottom: -10px; right: 0; width: 58%; height: 140px; background: repeating-linear-gradient(90deg, #060b12aa 0 30px, transparent 30px 43px); clip-path: polygon(0 100%, 0 65%, 13% 65%, 13% 22%, 26% 22%, 26% 45%, 40% 45%, 40% 5%, 51% 5%, 51% 35%, 69% 35%, 69% 10%, 82% 10%, 82% 58%, 100% 58%, 100% 100%); }
.zone-2 .zone-scenery::before { background: #071d13; clip-path: polygon(0 100%, 10% 20%, 20% 80%, 30% 0, 45% 80%, 55% 30%, 70% 85%, 85% 0, 100% 100%); }
.zone-3 .zone-scenery::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 35px, #f39c6c09 35px 37px); }
.zone-4 .zone-scenery::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 48px, #b5a3ff13 48px 50px), repeating-linear-gradient(0deg, transparent 0 48px, #b5a3ff13 48px 50px); transform: perspective(500px) rotateX(35deg); }
.zone-5 .zone-scenery::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #cdeaff99 1px, transparent 2px); background-size: 43px 37px; opacity: .3; }
.zone-scenery i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--zone-accent); box-shadow: 0 0 10px var(--zone-accent); animation: zoneMote 7s ease-in-out infinite; right: 25%; top: 40%; }
.zone-scenery i:nth-of-type(2) { right: 10%; top: 65%; animation-delay: -2s; }
.zone-scenery i:nth-of-type(3) { right: 38%; top: 75%; animation-delay: -4s; }
.zone-quest { display: grid; gap: 6px; margin-top: 17px; padding: 12px 15px; border-left: 3px solid var(--zone-accent); border-radius: 0 10px 10px 0; background: #050a1280; }
.zone-quest strong { font-size: 12px; line-height: 1.5; color: #edf6fb; }
.zone-quest span { font-size: 10px; color: var(--zone-accent); }
.zone-unlock, .activity-buttons button, .search-sites button, .egg-controls button, .pet-card button {
    min-height: 44px; padding: 11px 15px; border: 1px solid var(--zone-accent, #aa8cff); border-radius: 10px; color: #edf5fa; background: #ffffff0c; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s;
}
.zone-unlock { margin-top: 16px; background: var(--zone-accent); color: #09121d; }
.activity-buttons, .search-sites { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.search-sites button { flex: 1; display: grid; gap: 8px; padding: 20px 12px; background: #091c15aa; font-size: 14px; }
.search-sites small { color: #9bcbb0; font-size: 10px; font-weight: 400; }
.activity-buttons button:hover:not(:disabled), .search-sites button:hover:not(:disabled), .egg-controls button:hover:not(:disabled), .pet-card button:hover:not(:disabled) { background: #ffffff20; transform: translateY(-2px); }
.zone-unlock:disabled, .activity-buttons button:disabled, .search-sites button:disabled, .egg-controls button:disabled, .pet-card button:disabled { opacity: .45; cursor: default; }
.activity-tip, .zone-pet-summary { margin-top: 12px; color: #9aafc0; font-size: 11px; line-height: 1.6; }
.zone-pet-summary { color: var(--zone-accent); }
.assembly-slots, .relay-route { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #8293a7; }
.assembly-slots span, .relay-route span { padding: 12px 16px; min-width: 48px; text-align: center; border: 1px dashed #52607a; border-radius: 10px; font-size: 12px; background: #0004; }
.assembly-slots .filled, .relay-route .filled { color: #8be8b5; border-style: solid; border-color: #5bd69b; background: #5bd69b18; box-shadow: 0 0 16px #5bd69b15; }
.guardian-avatar { position: absolute; right: 0; top: 0; font-size: 50px; filter: drop-shadow(0 0 16px #65baff55); }
.guardian-health { height: 10px; border-radius: 9px; background: #03091c; overflow: hidden; margin-top: 20px; }
.guardian-health div { height: 100%; background: linear-gradient(90deg, #aa8cff, #ff8895); transition: width .4s ease; }
body.upgrades-open .zone-mount { display: none; }
.companion-panel { display: none; --zone-accent: #aa8cff; padding: 25px; border: 1px solid #564375; border-radius: 18px; background: radial-gradient(circle at 90% 0, #39275080, transparent 45%), #0d1621; margin-bottom: 24px; }
body.companions-open .companion-panel { display: block; animation: fadeIn .3s ease; }
body.companions-open .stage-panel, body.companions-open .stage-reset-dock { display: none !important; }
.companion-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.companion-heading h2 { font-size: 26px; margin-top: 7px; }
.companion-heading p { margin-top: 9px; font-size: 12px; color: #97a9bc; }
.egg-display { font-size: 72px; filter: drop-shadow(0 0 20px #aa8cff44); animation: eggIdle 3s ease-in-out infinite; }
.egg-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.egg-controls button:first-child { background: linear-gradient(120deg, #553781, #365d80); }
.egg-odds { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; padding: 12px; background: #0003; border-radius: 10px; }
.companion-equipped { margin-top: 20px; padding: 14px; border-radius: 12px; background: #aa8cff0b; border: 1px solid #aa8cff44; }
.companion-equipped strong { color: #cfbaff; font-size: 13px; }
.companion-equipped p { color: #9baabd; font-size: 11px; line-height: 1.6; margin-top: 6px; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; margin-top: 18px; }
.pet-card { text-align: center; padding: 20px 12px; border: 1px solid var(--rarity); border-radius: 14px; background: #ffffff04; }
.pet-card > span { display: block; font-size: 44px; margin-bottom: 12px; }
.pet-card h3 { font-size: 14px; }
.pet-card small { display: block; color: var(--rarity); font-size: 10px; margin-top: 6px; }
.pet-card p { color: #dfe8f5; font-size: 12px; margin-top: 12px; }
.pet-card button { width: 100%; margin-top: 12px; border-color: var(--rarity); }
.pet-card.undiscovered { border-style: dashed; background: #0002; }
.pet-card.undiscovered > span { opacity: .4; filter: grayscale(1); }
.hatch-celebration { top: 25vh; border-color: #aa8cff; background: linear-gradient(135deg, #3c2955, #11253c); }
.hatch-celebration .celebration-symbol { font-size: 64px; animation: hatchReveal .8s cubic-bezier(.2,.9,.3,1.4); }
.zone-celebration { border-color: #65baff; }
.boss-celebration { top: 25vh; box-shadow: 0 0 80px #ffc24755; }
.game-mode-tabs { max-width: 100%; flex-wrap: wrap; }
@keyframes zoneMote { 50% { transform: translate(-25px, -35px); opacity: .2; } }
@keyframes eggIdle { 50% { transform: translateY(-5px) rotate(5deg); } }
@keyframes hatchReveal { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 40% { transform: scale(1.3) rotate(12deg); } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 650px) {
    .game-mode-tab { flex: 1 0 42%; min-height: 42px; }
    .zone-scene, .companion-panel { padding: 20px 16px; }
    .zone-scenery > span { right: 0; opacity: .15; }
    .search-sites { flex-direction: column; }
    .search-sites button { padding: 14px; }
    .activity-buttons button { flex: 1 0 40%; }
    .relay-route { gap: 5px; font-size: 10px; }
    .relay-route span { min-width: 36px; padding: 10px; }
    .egg-controls button { flex: 1 0 100%; }
    .pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guardian-avatar { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .zone-scenery i, .egg-display, .hatch-celebration .celebration-symbol { animation: none; }
}

/* Milestone celebrations remain visible across tabs and on small screens. */
.purchase-flash {
    position: fixed;
    border: 2px solid #d0b5ff;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(170,140,255,.65);
    animation: purchaseCelebrate .65s ease-out forwards;
}
.milestone-celebration {
    position: fixed;
    z-index: 150;
    top: max(24px, env(safe-area-inset-top));
    left: 50%;
    width: min(380px, calc(100vw - 32px));
    padding: 18px 22px;
    border: 1px solid rgba(255,194,71,.8);
    border-radius: 16px;
    background: linear-gradient(135deg, #293125, #0d1926);
    box-shadow: 0 14px 55px rgba(0,0,0,.55), 0 0 32px rgba(255,194,71,.15);
    text-align: center;
    pointer-events: none;
    animation: milestoneCelebrate 2.6s ease both;
}
.milestone-celebration small { display: block; color: var(--yellow); letter-spacing: 2px; font-size: 9px; margin: 8px 0; }
.milestone-celebration strong { display: block; color: #fff; font-size: 20px; }
.milestone-celebration p { margin-top: 7px; color: #bbccda; font-size: 11px; line-height: 1.5; }
.celebration-symbol { display: inline-block; font-size: 36px; animation: badgePop .55s ease-out; }
.rebirth-celebration { top: 28vh; border-color: var(--purple); background: linear-gradient(135deg, #33244e, #101d2f); }
.rebirth-celebration small { color: #d0b5ff; }
.rebirth-wave { position: fixed; left: 50%; top: 40%; width: 40px; height: 40px; border: 3px solid var(--purple); border-radius: 50%; box-shadow: 0 0 60px #aa8cff88; animation: renewalWave 1.1s ease-out forwards; }
.achievement-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
@keyframes purchaseCelebrate { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
@keyframes badgePop { 0% { transform: scale(.3) rotate(-20deg); } 65% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes milestoneCelebrate { 0% { opacity: 0; transform: translate(-50%, -24px) scale(.9); } 15%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes renewalWave { from { opacity: .8; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(45); } }
@media (max-width: 450px) { .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
    .city-visual, .celebration-symbol { animation: none; }
    .purchase-flash, .rebirth-wave, .spark { display: none; }
    .milestone-celebration { animation: none; transform: translateX(-50%); }
}