/* =========================================================
   INFINITE PIZZA GENERATOR
   VERSION 7
   CINEMATIC UI POLISH
========================================================= */


/* =========================================================
   RESET / VARIABLES
========================================================= */

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


:root {

    --bg-one: #ff9f43;
    --bg-two: #7c241d;

    --accent: #ffd166;
    --accent-two: #ff6537;

    --panel:
        rgba(
            13,
            13,
            14,
            0.78
        );

    --panel-strong:
        rgba(
            8,
            8,
            9,
            0.92
        );

    --panel-soft:
        rgba(
            22,
            22,
            24,
            0.66
        );

    --panel-light:
        rgba(
            255,
            255,
            255,
            0.055
        );

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

    --border-bright:
        rgba(
            255,
            255,
            255,
            0.22
        );

    --text-main:
        rgba(
            255,
            255,
            255,
            0.97
        );

    --text-muted:
        rgba(
            255,
            255,
            255,
            0.67
        );

    --text-faint:
        rgba(
            255,
            255,
            255,
            0.43
        );

    --danger: #ff526c;
    --success: #7ee0a4;

    --shadow-large:
        0 34px 90px
        rgba(
            0,
            0,
            0,
            0.42
        );

    --shadow-medium:
        0 20px 48px
        rgba(
            0,
            0,
            0,
            0.3
        );

    --shadow-small:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.22
        );

    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 11px;
}


html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}


body {

    width: 100%;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text-main);

    background: #111012;

    overflow-x: hidden;

    transition:
        background
        0.8s ease;
}


button {
    font: inherit;
}


button,
.stat,
.upgrade-card,
.achievement-card {
    -webkit-tap-highlight-color: transparent;
}


.hidden {
    display: none !important;
}



/* =========================================================
   CODED CINEMATIC SCENE
========================================================= */

#scene-root {

    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background: #0f0f11;
}


#scene-svg {

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    transform: scale(1.025);

    transition:
        filter 1s ease,
        opacity 1s ease;
}


#scene-vignette {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(
                0,
                0,
                0,
                0.14
            )
            56%,
            rgba(
                0,
                0,
                0,
                0.68
            )
            100%
        );
}


#scene-grain {

    position: absolute;

    inset: -50%;

    width: 200%;
    height: 200%;

    opacity: 0.035;

    background-image:
        repeating-radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.7
            )
            0,
            transparent
            1px,
            transparent
            3px
        );

    background-size:
        6px
        6px;

    animation:
        scene-grain-shift
        0.42s
        steps(2)
        infinite;
}


@keyframes scene-grain-shift {

    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-1.5%, 1%);
    }

    50% {
        transform: translate(1%, -1.2%);
    }

    75% {
        transform: translate(0.7%, 1.5%);
    }

    100% {
        transform: translate(-1%, -0.8%);
    }
}


#scene-far {

    animation:
        scene-far-drift
        20s
        ease-in-out
        infinite alternate;
}


#scene-atmosphere {

    animation:
        scene-light-drift
        12s
        ease-in-out
        infinite alternate;
}


@keyframes scene-far-drift {

    from {
        transform: translateX(-4px);
    }

    to {
        transform: translateX(7px);
    }
}


@keyframes scene-light-drift {

    from {
        opacity: 0.72;
        transform: translate(-8px, 0);
    }

    to {
        opacity: 1;
        transform: translate(16px, -7px);
    }
}


#world-art {
    display: none !important;
}



/* =========================================================
   OVERALL CINEMATIC LAYER
========================================================= */

body::before {

    content: "";

    position: fixed;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(
                4,
                4,
                5,
                0.08
            ),
            rgba(
                4,
                4,
                5,
                0.3
            )
            58%,
            rgba(
                4,
                4,
                5,
                0.62
            )
            100%
        );
}



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

#site-header {

    position: relative;
    z-index: 5;

    width:
        min(
            1380px,
            95%
        );

    min-height: 76px;

    margin: 0 auto;

    padding:
        15px
        20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                7,
                7,
                8,
                0.74
            ),
            rgba(
                7,
                7,
                8,
                0.34
            )
        );

    backdrop-filter:
        blur(18px)
        saturate(1.1);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(1.1);
}


#site-brand {

    display: flex;
    align-items: center;
    gap: 12px;
}


#site-logo {

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

    filter:
        drop-shadow(
            0 8px 11px
            rgba(
                0,
                0,
                0,
                0.32
            )
        );
}


#site-logo svg {

    width: 100%;
    height: 100%;

    display: block;
}


#site-brand-small {

    margin-bottom: 2px;

    color: #a8d3b5;

    font-size: 0.61rem;

    font-weight: 900;

    letter-spacing: 0.24rem;
}


#site-brand-name {

    font-size: 1.08rem;

    font-weight: 900;

    letter-spacing: 0.025rem;
}


#development-badge {

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.34
        );

    color:
        rgba(
            255,
            255,
            255,
            0.61
        );

    font-size: 0.61rem;

    font-weight: 850;

    letter-spacing: 0.11rem;

    white-space: nowrap;
}



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

main {

    position: relative;
    z-index: 3;

    width:
        min(
            1420px,
            96%
        );

    min-height: 100vh;

    margin: 0 auto;

    padding:
        50px
        20px
        100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 36px;
}



/* =========================================================
   TWO-COLUMN GAME LAYOUT
========================================================= */

#game-layout {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            290px,
            350px
        );

    align-items: start;

    gap: 30px;
}


#primary-game-column {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;
}



/* =========================================================
   SHARED PANEL TREATMENT
========================================================= */

#level-section,
#mechanic-panel,
#achievements-panel,
#shop-section {

    position: relative;

    overflow: hidden;

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

    background:
        linear-gradient(
            150deg,
            rgba(
                17,
                17,
                19,
                0.84
            ),
            rgba(
                6,
                6,
                7,
                0.68
            )
        );

    backdrop-filter:
        blur(18px)
        saturate(1.08);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(1.08);

    box-shadow:
        var(--shadow-large),
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.055
        );
}


#level-section::before,
#mechanic-panel::before,
#achievements-panel::before,
#shop-section::before {

    content: "";

    position: absolute;

    inset:
        0
        0
        auto
        0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.2
            ),
            transparent
        );

    pointer-events: none;
}



/* =========================================================
   LEVEL-UP / SETBACK / ACHIEVEMENT BANNERS
========================================================= */

#level-up-banner,
#setback-banner,
#achievement-banner {

    position: fixed;

    left: 50%;
    top: 26px;

    z-index: 50000;

    width:
        min(
            430px,
            calc(
                100vw - 30px
            )
        );

    padding:
        18px
        26px;

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

    text-align: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.19
        );

    border-radius: 18px;

    background:
        rgba(
            9,
            9,
            10,
            0.95
        );

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    box-shadow:
        0 28px 80px
        rgba(
            0,
            0,
            0,
            0.48
        );

    transition:
        transform
        0.4s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        );
}


#level-up-banner.show,
#setback-banner.show,
#achievement-banner.show {

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


#level-up-small,
#setback-small,
#achievement-banner-small {

    display: block;

    margin-bottom: 6px;

    color: #a8d3b5;

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.17rem;
}


#level-up-name,
#setback-message,
#achievement-unlock-name {

    display: block;

    font-size: 1.4rem;

    line-height: 1.22;
}


#achievement-unlock-description {

    display: block;

    margin-top: 6px;

    color: var(--text-muted);

    font-size: 0.82rem;

    line-height: 1.4;
}



/* =========================================================
   LEVEL SECTION
========================================================= */

#level-section {

    width: 100%;

    max-width: 810px;

    padding:
        29px
        30px
        26px;

    text-align: center;

    border-radius: var(--radius-xl);
}


#level-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 16px;

    padding:
        7px
        15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.23
        );

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.33
        );

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 0.69rem;

    font-weight: 850;

    letter-spacing: 0.14rem;

    text-transform: uppercase;
}


#level-name {

    margin-bottom: 14px;

    font-size:
        clamp(
            2.5rem,
            6vw,
            5.1rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.048em;

    text-wrap: balance;

    text-shadow:
        0 3px 0
        rgba(
            0,
            0,
            0,
            0.18
        ),
        0 18px 38px
        rgba(
            0,
            0,
            0,
            0.34
        );
}


#level-description {

    max-width: 680px;

    margin:
        0 auto
        22px;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size:
        clamp(
            0.96rem,
            2vw,
            1.08rem
        );

    line-height: 1.6;

    text-wrap: pretty;
}


#level-progress-container {

    width: 100%;
    height: 19px;

    padding: 3px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.19
        );

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.46
        );

    box-shadow:
        inset
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


#level-progress-bar {

    width: 0%;
    height: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #84b79a,
            #d5e2c9
        );

    box-shadow:
        0 0 14px
        rgba(
            136,
            190,
            156,
            0.2
        );

    transition:
        width
        0.2s ease;
}


#level-progress-bar::after {

    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.34
            ),
            transparent
        );

    animation:
        level-progress-shimmer
        2.8s
        ease-in-out
        infinite;
}


@keyframes level-progress-shimmer {

    0%,
    45% {
        transform: translateX(-100%);
    }

    75%,
    100% {
        transform: translateX(100%);
    }
}


#next-level-text {

    margin-top: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size: 0.83rem;
}



/* =========================================================
   MECHANIC PANEL
========================================================= */

#mechanic-panel {

    width: 100%;

    max-width: 760px;

    padding: 25px;

    border-radius: var(--radius-lg);
}


#mechanic-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}


#mechanic-badge,
#mechanic-difficulty {

    color: #a8d3b5;

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.12rem;
}


#mechanic-name {

    margin-bottom: 8px;

    font-size:
        clamp(
            1.4rem,
            4vw,
            1.85rem
        );

    font-weight: 900;

    letter-spacing: -0.025em;
}


#mechanic-description {

    margin-bottom: 18px;

    color: var(--text-muted);

    line-height: 1.5;
}


#mechanic-meter-container {

    width: 100%;
    height: 17px;

    padding: 3px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.45
        );

    box-shadow:
        inset
        0 2px 6px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


#mechanic-meter-fill {

    width: 0%;
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #769f88,
            #acd0b7
        );

    transition:
        width
        0.18s ease;
}


#mechanic-status {

    margin-top: 9px;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size: 0.83rem;
}


#mechanic-action {

    width: 100%;

    min-height: 47px;

    margin-top: 18px;

    padding:
        12px
        16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #e8d89f,
            #caa75d
        );

    color: #2f2414;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 5px 0
        rgba(
            32,
            24,
            12,
            0.5
        );

    transition:
        transform 0.09s ease,
        filter 0.12s ease,
        box-shadow 0.09s ease;
}


#mechanic-action:hover:not(:disabled) {
    filter: brightness(1.06);
}


#mechanic-action:active:not(:disabled) {

    transform: translateY(4px);

    box-shadow:
        0 1px 0
        rgba(
            32,
            24,
            12,
            0.5
        );
}



/* =========================================================
   PIZZA GAME AREA
========================================================= */

#game-section {

    width: 100%;

    padding:
        8px
        0
        2px;

    display: flex;

    flex-direction: column;

    align-items: center;
}


#pizza-button {

    width: 260px;
    height: 260px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.09
            ),
            rgba(
                255,
                255,
                255,
                0.01
            )
            68%,
            transparent
        );

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    filter:
        drop-shadow(
            0 24px 22px
            rgba(
                0,
                0,
                0,
                0.4
            )
        );

    box-shadow:
        0 0 90px
        rgba(
            255,
            190,
            95,
            0.08
        );

    transition:
        transform 0.08s ease,
        filter 0.15s ease,
        box-shadow 0.2s ease;
}


#pizza-button::before {

    content: "";

    position: absolute;

    inset: 14%;

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(
            255,
            190,
            95,
            0.13
        );

    filter: blur(30px);

    opacity: 0.58;
}


#pizza-graphic {

    width: 96%;
    height: 96%;

    display: block;

    pointer-events: none;
}


#pizza-button:hover:not(:disabled) {

    transform: scale(1.035);

    filter:
        drop-shadow(
            0 30px 28px
            rgba(
                0,
                0,
                0,
                0.43
            )
        );

    box-shadow:
        0 0 110px
        rgba(
            255,
            190,
            95,
            0.11
        );
}


#pizza-button:active:not(:disabled) {
    transform: scale(0.925);
}


#pizza-button:focus-visible {

    outline:
        3px solid
        rgba(
            255,
            255,
            255,
            0.75
        );

    outline-offset: 9px;
}


#pizza-button:disabled {

    cursor: default;
    opacity: 0.72;
}



/* =========================================================
   CURRENCY
========================================================= */

#currency-display {

    margin-top: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    font-weight: 750;
}


#pepperoni-icon {

    width: 30px;
    height: 30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


#pepperoni-icon svg {

    width: 100%;
    height: 100%;

    filter:
        drop-shadow(
            0 3px 4px
            rgba(
                0,
                0,
                0,
                0.27
            )
        );
}


#pepperoni-count {

    color: #f0c96f;

    font-size:
        clamp(
            2.15rem,
            6vw,
            3.7rem
        );

    font-weight: 950;

    letter-spacing: -0.045em;

    text-shadow:
        0 4px 10px
        rgba(
            0,
            0,
            0,
            0.3
        );
}


#currency-name {

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );

    font-size: 1rem;
}


#click-power {

    margin-top: 7px;

    color:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size: 0.86rem;
}



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

#stats-section {

    width: 100%;

    max-width: 920px;

    display: grid;

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

    gap: 12px;
}


.stat {

    min-height: 88px;

    padding:
        15px
        11px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    text-align: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(
                16,
                16,
                18,
                0.8
            ),
            rgba(
                7,
                7,
                8,
                0.58
            )
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.04
        );

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}


.stat:hover {

    transform: translateY(-2px);

    border-color:
        rgba(
            255,
            255,
            255,
            0.16
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                20,
                20,
                22,
                0.84
            ),
            rgba(
                8,
                8,
                9,
                0.62
            )
        );
}


.stat-label {

    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.07rem;

    text-transform: uppercase;
}


.stat span:last-child {

    font-size: 1.17rem;

    font-weight: 900;

    letter-spacing: -0.02em;
}



/* =========================================================
   ACHIEVEMENT SIDEBAR
========================================================= */

#achievements-panel {

    min-width: 0;

    position: sticky;

    top: 24px;

    max-height:
        calc(
            100vh - 48px
        );

    padding: 21px;

    overflow-y: auto;

    border-radius: 24px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(
            255,
            255,
            255,
            0.22
        )
        transparent;
}


#achievements-panel::-webkit-scrollbar {
    width: 8px;
}


#achievements-panel::-webkit-scrollbar-track {
    background: transparent;
}


#achievements-panel::-webkit-scrollbar-thumb {

    border-radius: 999px;

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


#achievements-header {
    margin-bottom: 17px;
}


#achievements-eyebrow {

    display: block;

    margin-bottom: 5px;

    color: #a8d3b5;

    font-size: 0.61rem;

    font-weight: 900;

    letter-spacing: 0.16rem;
}


#achievements-header h2 {

    margin-bottom: 7px;

    font-size: 1.82rem;

    font-weight: 950;

    letter-spacing: -0.04em;
}


#achievements-header p {

    color: var(--text-muted);

    font-size: 0.82rem;

    line-height: 1.48;
}


#achievement-summary {

    margin-bottom: 16px;

    padding:
        11px
        13px;

    display: flex;

    align-items: baseline;

    gap: 5px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 12px;

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

    color: var(--text-muted);

    font-size: 0.8rem;
}


#achievement-unlocked-count,
#achievement-total-count {

    color: white;

    font-size: 1.14rem;
}


#achievement-list {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.achievement-card {

    position: relative;

    padding:
        14px
        14px
        13px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.048
            ),
            rgba(
                255,
                255,
                255,
                0.02
            )
        );

    transition:
        transform 0.15s ease,
        opacity 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.achievement-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #88b398;

    opacity: 0.32;
}


.achievement-card:hover {
    transform: translateY(-2px);
}


.achievement-card.locked {

    opacity: 0.52;

    filter:
        saturate(0.7)
        brightness(0.9);
}


.achievement-card.unlocked {

    opacity: 1;

    border-color:
        rgba(
            126,
            224,
            164,
            0.34
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                95,
                145,
                110,
                0.14
            ),
            rgba(
                255,
                255,
                255,
                0.035
            )
        );
}


.achievement-card.unlocked::before {

    background: #7ee0a4;
    opacity: 0.74;
}


.achievement-card.unlocked::after {

    content: "UNLOCKED";

    position: absolute;

    top: 10px;
    right: 10px;

    padding:
        4px
        7px;

    border-radius: 999px;

    background:
        rgba(
            90,
            210,
            130,
            0.12
        );

    color: var(--success);

    font-size: 0.49rem;

    font-weight: 900;

    letter-spacing: 0.07rem;
}


.achievement-category {

    display: block;

    margin-bottom: 4px;

    color: #8fb79b;

    font-size: 0.54rem;

    font-weight: 900;

    letter-spacing: 0.11rem;
}


.achievement-card h3 {

    margin-bottom: 5px;

    padding-right: 50px;

    font-size: 0.96rem;

    line-height: 1.24;
}


.achievement-card p {

    margin-bottom: 10px;

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

    font-size: 0.73rem;

    line-height: 1.4;
}


.achievement-progress-track {

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.38
        );
}


.achievement-progress-fill {

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6f9d7e,
            #a7d0b3
        );

    transition:
        width
        0.25s ease;
}


.achievement-progress-text {

    display: block;

    margin-top: 5px;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

    font-size: 0.61rem;
}


.achievement-card.secret {

    background:
        repeating-linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.03
            )
            0,
            rgba(
                255,
                255,
                255,
                0.03
            )
            6px,
            rgba(
                0,
                0,
                0,
                0.045
            )
            6px,
            rgba(
                0,
                0,
                0,
                0.045
            )
            12px
        );
}



/* =========================================================
   SHOP
========================================================= */

#shop-section {

    width: 100%;

    max-width: 1120px;

    margin-top: 14px;

    padding: 35px;

    border-radius: 28px;
}


#shop-header {

    margin-bottom: 34px;

    text-align: center;
}


#shop-eyebrow {

    margin-bottom: 7px;

    color: #a8d3b5;

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.2rem;
}


#shop-header h2 {

    margin-bottom: 9px;

    font-size:
        clamp(
            2.1rem,
            5vw,
            3.45rem
        );

    font-weight: 950;

    letter-spacing: -0.045em;
}


#shop-description {

    max-width: 620px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 0.91rem;

    line-height: 1.5;
}


.upgrade-category {
    margin-top: 38px;
}


.upgrade-category h3 {

    margin-bottom: 15px;

    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    font-size: 1.19rem;
}


.upgrade-grid {

    display: grid;

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

    gap: 16px;
}


.upgrade-card {

    min-height: 232px;

    padding: 20px;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    gap: 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.052
            ),
            rgba(
                255,
                255,
                255,
                0.015
            )
        );

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.035
        );

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.upgrade-card::before {

    content: "";

    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #a8d3b5,
            #c5a464
        );

    opacity: 0.42;
}


.upgrade-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(
            255,
            255,
            255,
            0.17
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.07
            ),
            rgba(
                255,
                255,
                255,
                0.02
            )
        );

    box-shadow:
        0 18px 38px
        rgba(
            0,
            0,
            0,
            0.2
        );
}


.upgrade-icon {

    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 13px;

    background:
        rgba(
            0,
            0,
            0,
            0.3
        );

    color: #d8c187;

    font-size: 0.83rem;

    font-weight: 950;

    letter-spacing: 0.035rem;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.04
        );
}


.upgrade-info {
    flex: 1;
}


.upgrade-info h4 {

    margin-bottom: 7px;

    font-size: 1.16rem;

    font-weight: 900;

    letter-spacing: -0.018em;
}


.upgrade-info p {

    min-height: 43px;

    color:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size: 0.87rem;

    line-height: 1.47;
}


.upgrade-stats {

    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    color: #d8c187;

    font-size: 0.74rem;

    font-weight: 700;
}


.upgrade-button {

    width: 100%;

    min-height: 45px;

    padding:
        10px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #ecdba1,
            #c9a55f
        );

    color: #302512;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 5px 0
        rgba(
            48,
            36,
            14,
            0.48
        );

    transition:
        transform 0.08s ease,
        filter 0.13s ease,
        box-shadow 0.08s ease;
}


.upgrade-button:hover:not(:disabled) {
    filter: brightness(1.06);
}


.upgrade-button:active:not(:disabled) {

    transform: translateY(4px);

    box-shadow:
        0 1px 0
        rgba(
            48,
            36,
            14,
            0.48
        );
}


.upgrade-button:disabled {

    cursor: not-allowed;

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

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    box-shadow: none;
}


.locked-upgrade {

    opacity: 0.56;

    filter:
        saturate(0.72)
        brightness(0.92);
}


.locked-upgrade::after {

    content: "LOCKED";

    position: absolute;

    top: 13px;
    right: 13px;

    padding:
        4px
        7px;

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            0.4
        );

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size: 0.54rem;

    font-weight: 900;

    letter-spacing: 0.075rem;
}



/* =========================================================
   COMING SOON UPGRADES
========================================================= */

#coming-soon-category {

    margin-top: 45px;

    padding-top: 33px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}


#coming-soon-heading {

    margin-bottom: 17px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;
}


#coming-soon-heading h3 {
    margin-bottom: 0;
}


#coming-soon-eyebrow {

    display: block;

    margin-bottom: 5px;

    color:
        rgba(
            255,
            255,
            255,
            0.39
        );

    font-size: 0.56rem;

    font-weight: 900;

    letter-spacing: 0.14rem;
}


#coming-soon-badge {

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 999px;

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

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size: 0.57rem;

    font-weight: 900;

    letter-spacing: 0.08rem;

    white-space: nowrap;
}


.coming-soon-card {

    min-height: 220px;

    opacity: 0.62;

    border-style: dashed;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.038
            )
            0,
            rgba(
                255,
                255,
                255,
                0.038
            )
            8px,
            rgba(
                255,
                255,
                255,
                0.014
            )
            8px,
            rgba(
                255,
                255,
                255,
                0.014
            )
            16px
        );
}


.coming-soon-card::before {
    opacity: 0.15;
}


.coming-soon-button {
    letter-spacing: 0.07rem;
}



/* =========================================================
   SAVE / SYSTEM SECTION
========================================================= */

#system-section {

    width: 100%;

    max-width: 760px;

    padding:
        16px
        18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 15px;

    background:
        rgba(
            7,
            7,
            8,
            0.68
        );

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

    box-shadow:
        var(--shadow-small);
}


#save-status {

    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size: 0.75rem;
}


#system-buttons {

    display: flex;
    gap: 8px;
}


.system-button {

    min-height: 38px;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    border-radius: 9px;

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

    color:
        rgba(
            255,
            255,
            255,
            0.73
        );

    font-size: 0.76rem;

    cursor: pointer;

    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        transform 0.12s ease;
}


.system-button:hover {

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

    border-color:
        rgba(
            255,
            255,
            255,
            0.18
        );

    transform: translateY(-1px);
}


.danger-button {
    color: #ffb7c2;
}


.danger-button:hover {

    background:
        rgba(
            190,
            35,
            55,
            0.12
        );

    border-color:
        rgba(
            255,
            80,
            105,
            0.22
        );
}



/* =========================================================
   OFFLINE PROGRESS POPUP
========================================================= */

.offline-progress-content {

    width:
        min(
            630px,
            95%
        );

    padding:
        42px
        32px;

    text-align: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 25px;

    background:
        linear-gradient(
            155deg,
            rgba(
                20,
                20,
                22,
                0.99
            ),
            rgba(
                6,
                6,
                7,
                0.99
            )
        );

    box-shadow:
        0 35px 100px
        rgba(
            0,
            0,
            0,
            0.58
        );
}


.offline-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: #a8d3b5;

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.18rem;
}


.offline-progress-content h1 {

    margin-bottom: 10px;

    font-size:
        clamp(
            2rem,
            6vw,
            3.4rem
        );

    letter-spacing: -0.04em;

    line-height: 1;
}


.offline-progress-content > p {

    max-width: 500px;

    margin:
        0 auto
        28px;

    color: var(--text-muted);

    line-height: 1.5;
}


#offline-summary {

    margin-bottom: 26px;

    display: grid;

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

    gap: 10px;
}


.offline-stat {

    min-width: 0;

    padding:
        16px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 13px;

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


.offline-stat-label {

    display: block;

    margin-bottom: 7px;

    color: var(--text-faint);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.06rem;

    text-transform: uppercase;
}


.offline-stat strong {

    display: block;

    overflow-wrap: anywhere;

    color: #d8c187;

    font-size: 1.16rem;
}


#offline-dismiss-button {

    width: 100%;

    max-width: 360px;

    min-height: 49px;

    padding:
        12px
        16px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #ecdba1,
            #c9a55f
        );

    color: #302512;

    font-weight: 900;

    cursor: pointer;
}



/* =========================================================
   FRAUD POPUPS
========================================================= */

.fraud-popup {

    position: fixed;

    top: 95px;
    right: 24px;

    z-index: 30000;

    width:
        min(
            400px,
            calc(
                100vw - 30px
            )
        );

    padding: 22px;

    border:
        1px solid
        rgba(
            224,
            170,
            255,
            0.6
        );

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(
                16,
                0,
                43,
                0.97
            ),
            rgba(
                55,
                8,
                98,
                0.97
            )
        );

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 28px 80px
        rgba(
            0,
            0,
            0,
            0.58
        );

    animation:
        fraud-popup-enter
        0.35s
        ease-out;
}


@keyframes fraud-popup-enter {

    from {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(0.98);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


.fraud-popup-eyebrow {

    display: block;

    margin-bottom: 7px;

    color: #e0aaff;

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.14rem;
}


.fraud-popup h2 {

    margin-bottom: 9px;

    font-size: 1.5rem;
}


.fraud-popup p {

    margin-bottom: 17px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    line-height: 1.44;
}


#fraud-boost-button {

    width: 100%;

    min-height: 48px;

    padding: 13px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #fff3a3,
            #ffbf00
        );

    color: #351107;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 26px
        rgba(
            255,
            190,
            0,
            0.22
        );

    animation:
        boost-pulse
        1.15s
        ease-in-out
        infinite;
}


@keyframes boost-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}



/* =========================================================
   FRAUD QUIZ
========================================================= */

.fraud-quiz-popup {

    max-height: 82vh;

    overflow-y: auto;
}


#quiz-progress {
    font-size: 0.8rem;
}


#quiz-question {

    margin-bottom: 15px;

    line-height: 1.38;
}


#quiz-options {

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.quiz-option {

    width: 100%;

    padding:
        12px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius: 11px;

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

    color: white;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.13s ease,
        border-color 0.13s ease;
}


.quiz-option:hover {

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

    border-color:
        rgba(
            255,
            255,
            255,
            0.2
        );
}



/* =========================================================
   FULL SCREEN POPUPS
========================================================= */

.full-popup {

    position: fixed;
    inset: 0;

    z-index: 60000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(
            0,
            0,
            0,
            0.84
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.failure-content,
.victory-content {

    width:
        min(
            620px,
            95%
        );

    padding:
        45px
        30px;

    text-align: center;

    border-radius: 27px;
}



/* =========================================================
   FRAUD FAILURE
========================================================= */

.failure-content {

    border:
        2px solid
        #ff334f;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(
                255,
                51,
                79,
                0.13
            ),
            transparent
            45%
        ),
        #130005;

    box-shadow:
        0 0 80px
        rgba(
            255,
            51,
            79,
            0.18
        );
}


.failure-content span {

    color: #ff758f;

    font-size: 0.73rem;

    font-weight: 900;

    letter-spacing: 0.2rem;
}


.failure-content h1 {

    margin-top: 10px;

    color: #ff334f;

    font-size:
        clamp(
            4rem,
            13vw,
            8rem
        );

    font-weight: 950;

    letter-spacing: -0.05em;
}



/* =========================================================
   HEAVEN VICTORY
========================================================= */

.victory-content {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.78
        );

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(
                255,
                255,
                255,
                0.53
            ),
            transparent
            34%
        ),
        linear-gradient(
            180deg,
            #8e9aef,
            #87ceeb
        );

    box-shadow:
        0 0 100px
        rgba(
            255,
            255,
            255,
            0.5
        );
}


.victory-icon {

    width: 180px;

    max-width: 70%;

    margin:
        0 auto
        10px;
}


.victory-icon svg {

    width: 100%;
    height: auto;

    display: block;
}


.victory-eyebrow {

    font-size: 0.75rem;

    font-weight: 900;

    letter-spacing: 0.24rem;
}


.victory-content h1 {

    margin:
        8px
        0;

    font-size:
        clamp(
            4rem,
            12vw,
            8rem
        );

    font-weight: 950;

    letter-spacing: -0.05em;
}


.victory-content p {

    margin-bottom: 24px;

    font-size: 1.1rem;
}


.victory-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 11px;
}


.victory-buttons button {

    min-height: 47px;

    padding:
        12px
        17px;

    border: none;

    border-radius: 12px;

    background: white;

    color: #374151;

    font-weight: 900;

    cursor: pointer;
}



/* =========================================================
   GLITCH EFFECT
========================================================= */

#glitch-overlay {

    position: fixed;
    inset: 0;

    z-index: 59000;

    display: none;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(
                255,
                0,
                80,
                0.22
            )
            0,
            rgba(
                255,
                0,
                80,
                0.22
            )
            3px,
            transparent
            3px,
            transparent
            7px
        );
}


#glitch-overlay.active {

    display: block;

    animation:
        glitch-overlay
        0.13s
        steps(2)
        infinite;
}


body.glitching main,
body.glitching #scene-root {

    animation:
        body-glitch
        0.11s
        steps(2)
        infinite;
}


@keyframes glitch-overlay {

    0% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(11px);
    }

    100% {
        transform: translateX(-5px);
    }
}


@keyframes body-glitch {

    0% {

        transform: translate(-4px, 2px);

        filter: hue-rotate(0deg);
    }

    50% {

        transform: translate(5px, -3px);

        filter: hue-rotate(130deg);
    }

    100% {

        transform: translate(-2px, 4px);

        filter: hue-rotate(250deg);
    }
}



/* =========================================================
   CONFETTI
========================================================= */

#confetti-container {

    position: fixed;
    inset: 0;

    z-index: 55000;

    overflow: hidden;

    pointer-events: none;
}



/* =========================================================
   INFERNO VISUAL MODE
========================================================= */

body[data-region="inferno"] #scene-svg {

    filter:
        saturate(0.82)
        contrast(1.08)
        brightness(0.75);
}


body[data-region="inferno"] #scene-vignette {

    background:
        radial-gradient(
            ellipse at center,
            transparent
            24%,
            rgba(
                45,
                0,
                0,
                0.22
            )
            56%,
            rgba(
                0,
                0,
                0,
                0.84
            )
            100%
        );
}


body[data-region="inferno"] #pizza-button {

    box-shadow:
        0 0 75px
        color-mix(
            in srgb,
            var(--accent-two)
            44%,
            transparent
        );
}


body[data-region="inferno"] #level-section,
body[data-region="inferno"] #mechanic-panel,
body[data-region="inferno"] #shop-section {

    border-color:
        color-mix(
            in srgb,
            var(--accent-two)
            22%,
            rgba(
                255,
                255,
                255,
                0.08
            )
        );
}



/* =========================================================
   HEAVEN VISUAL MODE
========================================================= */

body[data-region="heaven"] #scene-svg {

    filter:
        saturate(0.92)
        brightness(1.2);
}


body[data-region="heaven"] #scene-vignette {

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                255,
                255,
                255,
                0.04
            )
            25%,
            rgba(
                255,
                255,
                255,
                0.02
            )
            55%,
            rgba(
                116,
                158,
                205,
                0.25
            )
            100%
        );
}


body[data-region="heaven"]::before {

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.03
            ),
            rgba(
                35,
                75,
                110,
                0.1
            )
        );
}


body[data-region="heaven"] #pizza-button {

    filter:
        drop-shadow(
            0 0 40px
            rgba(
                255,
                255,
                255,
                0.8
            )
        );
}



/* =========================================================
   RESPONSIVE — LAPTOP / TABLET
========================================================= */

@media (max-width: 1120px) {

    #game-layout {

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


    #achievements-panel {

        position: relative;

        top: auto;

        width: 100%;

        max-height: none;

        max-width: 920px;

        margin: 0 auto;
    }


    #achievement-list {

        display: grid;

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



/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 800px) {

    #site-header {

        width: 100%;

        padding:
            14px
            15px;
    }


    main {

        width: 97%;

        padding:
            36px
            12px
            70px;
    }


    #level-section {

        padding:
            24px
            18px;
    }


    .upgrade-grid {

        grid-template-columns:
            1fr;
    }


    #shop-section {

        padding:
            26px
            18px;
    }


    .upgrade-card {

        min-height: auto;
    }
}



/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    #site-brand-name {
        font-size: 0.88rem;
    }


    #site-brand-small {
        font-size: 0.53rem;
    }


    #site-logo {

        width: 42px;
        height: 42px;
    }


    #development-badge {

        font-size: 0.51rem;

        letter-spacing: 0.06rem;
    }


    #level-name {

        font-size:
            clamp(
                2.2rem,
                11vw,
                3.6rem
            );
    }


    #mechanic-heading {

        flex-direction: column;

        align-items: flex-start;
    }


    #pizza-button {

        width: 205px;
        height: 205px;
    }


    #stats-section {

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


    #achievement-list {
        grid-template-columns: 1fr;
    }


    #offline-summary {
        grid-template-columns: 1fr;
    }


    #system-section {

        flex-direction: column;

        text-align: center;
    }


    #system-buttons {
        width: 100%;
    }


    .system-button {
        flex: 1;
    }


    #coming-soon-heading {

        align-items: flex-start;

        flex-direction: column;
    }


    .fraud-popup {

        top: auto;
        right: 15px;
        bottom: 15px;
        left: 15px;

        width: auto;

        max-height: 65vh;
    }


    #scene-svg {

        width: auto;

        min-width: 100%;

        height: 100%;

        left: 50%;

        transform:
            translateX(-50%)
            scale(1.05);
    }
}



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

@media (max-width: 420px) {

    #site-header {
        gap: 8px;
    }


    #development-badge {

        max-width: 95px;

        white-space: normal;

        text-align: center;
    }


    main {

        padding-left: 8px;

        padding-right: 8px;
    }


    #level-section,
    #mechanic-panel {

        border-radius: 20px;
    }


    #stats-section {
        gap: 8px;
    }


    .stat {

        min-height: 80px;

        padding:
            12px
            7px;
    }


    .stat-label {
        font-size: 0.54rem;
    }


    .stat span:last-child {
        font-size: 1rem;
    }


    #pizza-button {

        width: 180px;
        height: 180px;
    }


    #shop-section {

        padding:
            22px
            12px;
    }


    .upgrade-card {
        padding: 17px;
    }


    #achievements-panel {
        padding: 17px;
    }


    .offline-progress-content {

        padding:
            34px
            18px;
    }


    .victory-buttons {
        flex-direction: column;
    }


    .victory-buttons button {
        width: 100%;
    }
}



/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }
}

/* =========================================================
   V7.4.1 — PIZZA CLICKER PROGRESSION LAYOUT
   Inspired by the fast, upgrade-driven feel of modern clickers.
   Existing cinematic pizza scenes and economy visuals are preserved.
========================================================= */

body.capybara-inspired {
    --clicker-rail: 360px;
    --clicker-gap: 22px;
}

body.capybara-inspired main {
    width: min(1500px, 98%);
    padding-top: 28px;
    gap: 22px;
}

body.capybara-inspired #game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--clicker-rail);
    align-items: start;
    gap: var(--clicker-gap);
}

body.capybara-inspired #primary-game-column {
    gap: 18px;
}

/* Compact menu row: Scenes / Achievements / Ascend */
body.capybara-inspired #clicker-toolbar {
    width: min(820px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(7, 7, 8, 0.66);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    box-shadow: var(--shadow-small);
}

body.capybara-inspired .clicker-toolbar-button {
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    background: rgba(255,255,255,0.065);
    color: var(--text-main);
    font-size: 0.70rem;
    font-weight: 900;
    letter-spacing: 0.045rem;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

body.capybara-inspired .clicker-toolbar-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.2);
}

body.capybara-inspired .clicker-toolbar-button:disabled {
    cursor: default;
    opacity: 0.55;
}

body.capybara-inspired .clicker-ascend-button {
    background: linear-gradient(135deg, rgba(255,209,102,.18), rgba(255,101,55,.14));
    border-color: rgba(255,209,102,.24);
}

/* Milestone card becomes compact context rather than a blocking level screen. */
body.capybara-inspired #level-section {
    width: min(820px, 100%);
    padding: 20px 22px;
    border-radius: 18px;
}

body.capybara-inspired #level-name {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: .95;
}

body.capybara-inspired #level-description {
    max-width: 700px;
    margin-top: 9px;
}

body.capybara-inspired #level-progress-container {
    height: 9px;
    margin-top: 16px;
}

/* Bonus event is secondary; it no longer dominates progression. */
body.capybara-inspired #mechanic-panel {
    width: min(820px, 100%);
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(17,17,19,.72), rgba(6,6,7,.54));
}

body.capybara-inspired #mechanic-name {
    font-size: 1.18rem;
}

body.capybara-inspired #mechanic-description,
body.capybara-inspired #mechanic-status {
    font-size: .82rem;
}

body.capybara-inspired #mechanic-meter-container {
    height: 7px;
}

/* Main clicking area gets most of the visual attention. */
body.capybara-inspired #game-section {
    width: min(820px, 100%);
    min-height: 410px;
    padding: 26px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 44%, rgba(255,209,102,.09), rgba(0,0,0,.10) 52%, rgba(0,0,0,.26));
}

body.capybara-inspired #pizza-button {
    width: clamp(235px, 29vw, 335px);
    height: clamp(235px, 29vw, 335px);
    transition: transform .07s ease, filter .18s ease;
}

body.capybara-inspired #pizza-button:hover:not(:disabled) {
    transform: scale(1.025);
}

body.capybara-inspired #pizza-button:active:not(:disabled) {
    transform: scale(.965);
}

body.capybara-inspired #currency-display {
    margin-top: 10px;
}

body.capybara-inspired #pepperoni-count {
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    font-weight: 950;
    letter-spacing: -.055em;
}

body.capybara-inspired #currency-name {
    font-size: .82rem;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

body.capybara-inspired #click-power {
    margin-top: 4px;
    color: var(--text-muted);
}

/* Stats: compact dashboard underneath the pizza. */
body.capybara-inspired #stats-section {
    width: min(820px, 100%);
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
}

body.capybara-inspired .stat {
    min-height: 72px;
    padding: 12px 10px;
    border-radius: 13px;
}

body.capybara-inspired .stat-label {
    font-size: .56rem;
    letter-spacing: .07rem;
}

/* Right-side shop rail: upgrades are the primary progression loop. */
body.capybara-inspired #shop-section {
    position: sticky;
    top: 18px;
    width: 100%;
    max-height: calc(100vh - 36px);
    overflow: hidden;
    padding: 16px 12px 14px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

body.capybara-inspired #shop-header {
    flex: 0 0 auto;
    padding: 2px 4px 12px;
}

body.capybara-inspired #shop-header h2 {
    font-size: 1.55rem;
}

body.capybara-inspired #shop-description {
    font-size: .74rem;
    line-height: 1.45;
}

body.capybara-inspired #shop-section .upgrade-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 3px 10px 0;
    scrollbar-width: thin;
}

body.capybara-inspired .upgrade-card {
    min-height: 0;
    padding: 11px;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 10px;
    border-radius: 14px;
}

body.capybara-inspired .upgrade-icon {
    width: 42px;
    height: 42px;
    font-size: 1.35rem;
}

body.capybara-inspired .upgrade-info h4 {
    font-size: .91rem;
    margin-bottom: 3px;
}

body.capybara-inspired .upgrade-info p {
    font-size: .68rem;
    line-height: 1.35;
    margin-bottom: 7px;
}

body.capybara-inspired .upgrade-stats {
    gap: 5px;
    font-size: .62rem;
}

body.capybara-inspired .upgrade-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    font-size: .70rem;
    border-radius: 9px;
}

body.capybara-inspired .locked-upgrade {
    opacity: .74;
}

/* Achievements become an optional drawer instead of permanently using a column. */
body.capybara-inspired #achievements-panel.clicker-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70000;
    width: min(410px, 92vw);
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 20px 16px 28px;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(104%);
    transition: transform .22s ease;
    box-shadow: -24px 0 70px rgba(0,0,0,.42);
}

body.capybara-inspired.show-achievements #achievements-panel.clicker-drawer {
    transform: translateX(0);
}

body.capybara-inspired #achievements-header {
    position: relative;
    padding-right: 44px;
}

body.capybara-inspired .clicker-close-button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: white;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

body.capybara-inspired #achievements-close {
    position: absolute;
    right: 0;
    top: 0;
}

/* Pizza Worlds / scene collection overlay. */
body.capybara-inspired .clicker-overlay {
    position: fixed;
    inset: 0;
    z-index: 72000;
    padding: 32px 18px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.capybara-inspired .clicker-overlay.hidden {
    display: none !important;
}

body.capybara-inspired .clicker-overlay-panel {
    width: min(980px, 96vw);
    max-height: min(820px, 90vh);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--border-bright);
    border-radius: 22px;
    background: rgba(10,10,11,.95);
    box-shadow: 0 36px 100px rgba(0,0,0,.52);
}

body.capybara-inspired .clicker-overlay-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

body.capybara-inspired .clicker-overlay-heading h2 {
    margin-top: 3px;
    font-size: 2rem;
}

body.capybara-inspired .clicker-overlay-heading p {
    max-width: 690px;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.5;
}

body.capybara-inspired .clicker-overlay-eyebrow {
    color: var(--accent);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .18rem;
}

body.capybara-inspired .scene-auto-button {
    width: 100%;
    min-height: 42px;
    margin: 5px 0 13px;
    border: 1px solid rgba(255,209,102,.24);
    border-radius: 11px;
    background: rgba(255,209,102,.08);
    color: var(--text-main);
    font-weight: 900;
    letter-spacing: .06rem;
    cursor: pointer;
}

body.capybara-inspired #scene-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 9px;
}

body.capybara-inspired .scene-picker-card {
    min-height: 118px;
    padding: 13px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    color: var(--text-main);
    text-align: center;
}

body.capybara-inspired .scene-picker-card.unlocked {
    cursor: pointer;
}

body.capybara-inspired .scene-picker-card.unlocked:hover {
    background: rgba(255,255,255,.085);
}

body.capybara-inspired .scene-picker-card.selected {
    border-color: rgba(255,209,102,.58);
    box-shadow: inset 0 0 0 1px rgba(255,209,102,.18);
}

body.capybara-inspired .scene-picker-card.locked {
    opacity: .38;
}

body.capybara-inspired .scene-picker-icon {
    font-size: 1.65rem;
}

body.capybara-inspired .scene-picker-name {
    font-size: .77rem;
    font-weight: 900;
}

body.capybara-inspired .scene-picker-requirement {
    color: var(--text-faint);
    font-size: .58rem;
}

/* Save/system controls stay out of the way. */
body.capybara-inspired #system-section {
    width: min(820px, 100%);
    opacity: .82;
}

/* New Cycle card remains part of the main column. */
body.capybara-inspired #new-cycle-panel {
    width: min(820px, 100%);
}

@media (max-width: 1120px) {
    body.capybara-inspired #game-layout {
        grid-template-columns: minmax(0,1fr) 330px;
        gap: 14px;
    }
    body.capybara-inspired { --clicker-rail: 330px; }
}

@media (max-width: 900px) {
    body.capybara-inspired #game-layout {
        grid-template-columns: 1fr;
    }
    body.capybara-inspired #shop-section {
        position: relative;
        top: auto;
        max-height: none;
        width: min(820px, 100%);
        margin: 0 auto;
    }
    body.capybara-inspired #shop-section .upgrade-grid {
        overflow: visible;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body.capybara-inspired #scene-picker-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    body.capybara-inspired main {
        width: 100%;
        padding: 22px 10px 70px;
    }
    body.capybara-inspired #clicker-toolbar {
        grid-template-columns: 1fr;
    }
    body.capybara-inspired #stats-section {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body.capybara-inspired #game-section {
        min-height: 330px;
    }
    body.capybara-inspired #pizza-button {
        width: 220px;
        height: 220px;
    }
    body.capybara-inspired #shop-section .upgrade-grid {
        grid-template-columns: 1fr;
    }
    body.capybara-inspired #scene-picker-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body.capybara-inspired .clicker-overlay-panel {
        padding: 16px;
    }
}

/* =========================================================
   V7.5 — CLASSIC CLICKER PARITY LAYER
   Pizza-original presentation using the familiar click / upgrade /
   automate / customize / ascend interaction pattern.
========================================================= */

body.capybara-inspired {
    --clicker-rail-width: 360px;
}

body.capybara-inspired main {
    width: min(1480px, 100%);
    padding: 18px 18px 90px;
    gap: 18px;
}

body.capybara-inspired #game-layout {
    grid-template-columns: minmax(0, 1fr) var(--clicker-rail-width);
    gap: 14px;
}

body.capybara-inspired #primary-game-column {
    gap: 12px;
}

/* Main click arena */
body.capybara-inspired #game-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 86px);
    padding: 72px 330px 38px 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,210,102,.14), transparent 23%),
        linear-gradient(180deg, rgba(8,8,9,.10), rgba(8,8,9,.34));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.capybara-inspired #game-section::before {
    content: "";
    position: absolute;
    width: 590px;
    height: 590px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,220,120,.065) 0deg 7deg,
            transparent 7deg 16deg
        );
    mask-image: radial-gradient(circle, #000 0 48%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle, #000 0 48%, transparent 72%);
    animation: pizza-clicker-rays 34s linear infinite;
    pointer-events: none;
}

@keyframes pizza-clicker-rays {
    to { transform: translate(-50%, -48%) rotate(360deg); }
}

body.capybara-inspired #pizza-button {
    width: clamp(250px, 30vw, 370px);
    height: clamp(250px, 30vw, 370px);
    z-index: 4;
    margin: 4px 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

body.capybara-inspired #pizza-button::before {
    inset: 9%;
    z-index: -1;
    opacity: .78;
    filter: blur(38px);
}

body.capybara-inspired #pizza-button:hover:not(:disabled) {
    transform: scale(1.035);
}

body.capybara-inspired #pizza-button:active:not(:disabled) {
    transform: scale(.94);
}

/* Currency sits over the clickable pizza like a population counter. */
body.capybara-inspired #currency-display {
    position: relative;
    z-index: 5;
    margin: 0 0 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-shadow: 0 3px 10px rgba(0,0,0,.55);
}

body.capybara-inspired #pepperoni-icon {
    display: none;
}

body.capybara-inspired #pepperoni-count {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    line-height: .92;
    font-weight: 950;
    letter-spacing: -.065em;
}

body.capybara-inspired #currency-name {
    margin-top: 8px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .17rem;
    opacity: .78;
}

body.capybara-inspired #click-power {
    display: none;
}

/* Compact top numbers */
body.capybara-inspired #clicker-economy-hud {
    position: absolute;
    z-index: 8;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100% - 40px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
}

body.capybara-inspired .clicker-hud-stat {
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(8,8,9,.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.capybara-inspired .clicker-hud-stat span {
    color: var(--text-faint);
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .10rem;
}

body.capybara-inspired .clicker-hud-stat strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    font-size: 1rem;
    white-space: nowrap;
}

body.capybara-inspired .clicker-hud-stat-main {
    border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.10));
    background: color-mix(in srgb, var(--accent) 10%, rgba(8,8,9,.66));
}

/* Milestones are notifications, not conventional levels. */
body.capybara-inspired #level-section.clicker-milestone-card {
    position: absolute;
    z-index: 7;
    top: 92px;
    left: 16px;
    width: 286px;
    max-width: 286px;
    padding: 14px;
    border-radius: 13px;
    background: rgba(8,8,9,.66);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    text-align: left;
}

body.capybara-inspired #level-number {
    font-size: .52rem;
    letter-spacing: .12rem;
}

body.capybara-inspired #level-name {
    margin-top: 4px;
    font-size: 1.32rem;
    line-height: 1;
    letter-spacing: -.025em;
}

body.capybara-inspired #level-description {
    margin-top: 7px;
    font-size: .68rem;
    line-height: 1.38;
    color: var(--text-muted);
}

body.capybara-inspired #level-progress-container {
    height: 6px;
    margin-top: 10px;
}

body.capybara-inspired #next-level-text {
    margin-top: 6px;
    font-size: .58rem;
}

/* Optional story challenges survive, but sit off to the side and never block
   pepperoni milestone progression. */
body.capybara-inspired #mechanic-panel.clicker-event-card {
    position: absolute;
    z-index: 7;
    left: 16px;
    bottom: 16px;
    width: 286px;
    max-width: 286px;
    padding: 13px;
    border-radius: 13px;
    background: rgba(8,8,9,.64);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

body.capybara-inspired #mechanic-heading {
    margin-bottom: 5px;
}

body.capybara-inspired #mechanic-badge,
body.capybara-inspired #mechanic-difficulty {
    font-size: .48rem;
}

body.capybara-inspired #mechanic-name {
    font-size: .91rem;
}

body.capybara-inspired #mechanic-description,
body.capybara-inspired #mechanic-status {
    font-size: .62rem;
    line-height: 1.3;
}

body.capybara-inspired #mechanic-meter-container {
    height: 5px;
    margin-top: 7px;
}

body.capybara-inspired #mechanic-action {
    min-height: 32px;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: .62rem;
}

/* Extra stat grid is available below the play field but deliberately quiet. */
body.capybara-inspired #stats-section {
    width: 100%;
    grid-template-columns: repeat(8, minmax(0,1fr));
    gap: 5px;
}

body.capybara-inspired .stat {
    min-height: 54px;
    padding: 8px 6px;
    border-radius: 9px;
    background: rgba(8,8,9,.45);
}

body.capybara-inspired .stat-label {
    font-size: .45rem;
    letter-spacing: .045rem;
}

body.capybara-inspired .stat span:last-child {
    font-size: .78rem;
}

/* Left-side icon controls */
body.capybara-inspired #clicker-side-controls {
    position: fixed;
    z-index: 15000;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

body.capybara-inspired .clicker-side-button {
    width: 82px;
    min-height: 58px;
    padding: 7px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(8,8,9,.76);
    color: white;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
}

body.capybara-inspired .clicker-side-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 54%, rgba(255,255,255,.12));
    background: rgba(22,22,24,.88);
}

body.capybara-inspired .clicker-side-button:disabled {
    opacity: .42;
    cursor: default;
}

body.capybara-inspired .clicker-side-icon {
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1;
}

body.capybara-inspired .clicker-side-button span:last-child {
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .045rem;
    line-height: 1.15;
    text-align: center;
}

body.capybara-inspired .clicker-side-button.ready,
body.capybara-inspired .boost-control:not(:disabled) {
    border-color: rgba(255,209,102,.42);
    box-shadow: 0 0 24px rgba(255,209,102,.12), 0 12px 28px rgba(0,0,0,.22);
}

/* Right upgrade rail */
body.capybara-inspired #shop-section {
    position: sticky;
    top: 8px;
    width: 100%;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
    margin: 0;
    padding: 10px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-radius: 16px;
    background: rgba(9,9,10,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.capybara-inspired #shop-header {
    position: sticky;
    z-index: 4;
    top: -10px;
    margin: -10px -10px 8px;
    padding: 12px 12px 10px;
    background: rgba(8,8,9,.94);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

body.capybara-inspired #shop-eyebrow {
    margin: 0 0 2px;
    font-size: .48rem;
    letter-spacing: .11rem;
}

body.capybara-inspired #shop-header h2 {
    margin: 0;
    font-size: 1.32rem;
}

body.capybara-inspired #shop-description {
    margin-top: 3px;
    font-size: .61rem;
    line-height: 1.32;
}

body.capybara-inspired #shop-section .upgrade-category {
    margin-top: 12px;
}

body.capybara-inspired #shop-section .upgrade-category:first-of-type {
    margin-top: 5px;
}

body.capybara-inspired #shop-section .upgrade-category h3 {
    margin: 0 0 5px;
    color: rgba(255,255,255,.72);
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .10rem;
}

body.capybara-inspired #shop-section .upgrade-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    overflow: visible;
    padding: 0;
}

body.capybara-inspired .upgrade-card {
    min-height: 0;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 94px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: rgba(245,245,245,.92);
    border: 1px solid rgba(255,255,255,.72);
    color: #171719;
    box-shadow: 0 3px 0 rgba(0,0,0,.20);
}

body.capybara-inspired .upgrade-card:hover {
    transform: none;
    border-color: rgba(255,209,102,.92);
}

body.capybara-inspired .upgrade-icon {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    background: rgba(0,0,0,.08);
    color: #111;
    font-size: 1.25rem;
}

body.capybara-inspired .upgrade-info h4 {
    margin: 0 0 1px;
    color: #151515;
    font-size: .82rem;
    line-height: 1.05;
}

body.capybara-inspired .upgrade-info p {
    min-height: 0;
    margin: 0 0 3px;
    color: rgba(20,20,20,.70);
    font-size: .56rem;
    line-height: 1.2;
}

body.capybara-inspired .upgrade-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    color: rgba(20,20,20,.66);
    font-size: .52rem;
}

body.capybara-inspired .upgrade-button {
    grid-column: 3;
    grid-row: 1;
    width: 94px;
    min-height: 48px;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffd66f, #efaa2f);
    color: #2a1803;
    font-size: .55rem;
    font-weight: 950;
    line-height: 1.15;
    box-shadow: inset 0 1px rgba(255,255,255,.48), 0 2px 0 rgba(0,0,0,.20);
}

body.capybara-inspired .upgrade-button:disabled {
    opacity: .47;
    filter: grayscale(.25);
}

/* Mystery locked upgrades, matching the discovery rhythm without copying art. */
body.capybara-inspired .upgrade-card.locked-upgrade {
    opacity: .62;
    filter: grayscale(.78) brightness(.80);
}

body.capybara-inspired .locked-upgrade .upgrade-info h4 {
    font-size: 0;
}

body.capybara-inspired .locked-upgrade .upgrade-info h4::after {
    content: "???";
    font-size: .82rem;
    letter-spacing: .09rem;
}

body.capybara-inspired .locked-upgrade .upgrade-info p {
    font-size: 0;
}

body.capybara-inspired .locked-upgrade .upgrade-info p::after {
    content: "Unlock more pepperoni to reveal this upgrade.";
    font-size: .53rem;
}

body.capybara-inspired .locked-upgrade::after {
    display: none;
}

/* Cosmetics / worlds */
body.capybara-inspired #customization-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
}

body.capybara-inspired .customization-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 8px 0 12px;
}

body.capybara-inspired .customization-tabs button {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(255,255,255,.05);
    color: white;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08rem;
    cursor: pointer;
}

body.capybara-inspired .customization-tabs button.active {
    border-color: rgba(255,209,102,.54);
    background: rgba(255,209,102,.12);
}

body.capybara-inspired .customization-card {
    min-height: 112px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    color: white;
    text-align: center;
}

body.capybara-inspired .customization-card.unlocked {
    cursor: pointer;
}

body.capybara-inspired .customization-card.unlocked:hover {
    background: rgba(255,255,255,.085);
}

body.capybara-inspired .customization-card.selected {
    border-color: rgba(255,209,102,.68);
    box-shadow: inset 0 0 0 1px rgba(255,209,102,.20), 0 0 24px rgba(255,209,102,.08);
}

body.capybara-inspired .customization-card.locked {
    opacity: .34;
}

body.capybara-inspired .customization-icon {
    font-size: 1.75rem;
}

body.capybara-inspired .customization-name {
    font-size: .72rem;
    font-weight: 950;
}

body.capybara-inspired .customization-detail {
    color: var(--text-faint);
    font-size: .52rem;
}

/* Existing scene picker from V7.4 is superseded by the unified closet. */
body.capybara-inspired #scene-picker-overlay,
body.capybara-inspired #clicker-toolbar {
    display: none !important;
}

/* Ascension is a popup menu rather than a full-width block in the game flow. */
body.capybara-inspired #ascend-overlay .ascend-overlay-panel {
    position: relative;
    width: min(760px, 96vw);
}

body.capybara-inspired .ascend-overlay-close {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
}

body.capybara-inspired #new-cycle-panel.clicker-ascend-card {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px 20px 20px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Keep ordinary save/reset controls unobtrusive. */
body.capybara-inspired #system-section {
    width: 100%;
    max-width: none;
    padding: 8px 10px;
    opacity: .55;
}

/* Pizza skins: same underlying pizza graphic, cosmetic treatment only. */
body[data-pizza-skin="classic"] #pizza-button {
    filter: drop-shadow(0 26px 24px rgba(0,0,0,.42));
}

body[data-pizza-skin="extra-cheese"] #pizza-button {
    filter: saturate(1.18) brightness(1.08) drop-shadow(0 0 34px rgba(255,213,79,.25));
}

body[data-pizza-skin="supreme"] #pizza-button {
    filter: saturate(1.34) contrast(1.07) drop-shadow(0 0 34px rgba(112,210,126,.20));
}

body[data-pizza-skin="deep-dish"] #pizza-button {
    filter: saturate(.96) contrast(1.18) sepia(.12) drop-shadow(0 0 38px rgba(174,91,33,.26));
}

body[data-pizza-skin="golden-crust"] #pizza-button {
    filter: sepia(.42) saturate(1.35) brightness(1.12) drop-shadow(0 0 44px rgba(255,205,72,.35));
}

body[data-pizza-skin="neon-slice"] #pizza-button {
    filter: saturate(1.55) contrast(1.12) drop-shadow(0 0 24px rgba(80,230,255,.42)) drop-shadow(0 0 48px rgba(255,70,210,.24));
}

body[data-pizza-skin="war-pizza"] #pizza-button {
    filter: saturate(.72) contrast(1.25) brightness(.88) drop-shadow(0 0 28px rgba(255,92,55,.20));
}

body[data-pizza-skin="infernal"] #pizza-button {
    filter: saturate(1.45) contrast(1.16) brightness(.88) drop-shadow(0 0 28px rgba(255,70,20,.55)) drop-shadow(0 0 68px rgba(155,0,0,.32));
}

body[data-pizza-skin="paradise"] #pizza-button {
    filter: saturate(.92) brightness(1.26) drop-shadow(0 0 32px rgba(255,255,255,.72)) drop-shadow(0 0 72px rgba(255,224,128,.30));
}

/* Cosmetic weather */
#pizza-weather-layer {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.pizza-weather-particle {
    position: absolute;
    left: var(--x);
    pointer-events: none;
}

.weather-rain {
    top: -12vh;
    width: 2px;
    height: 28px;
    border-radius: 2px;
    background: rgba(170,215,255,.46);
    transform: rotate(12deg);
    animation: pizza-weather-rain var(--duration) linear infinite;
    animation-delay: var(--delay);
}

@keyframes pizza-weather-rain {
    to { transform: translate(var(--drift), 125vh) rotate(12deg); }
}

.weather-snow {
    top: -8vh;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    filter: blur(.4px);
    animation: pizza-weather-snow var(--duration) linear infinite;
    animation-delay: var(--delay);
}

@keyframes pizza-weather-snow {
    to { transform: translate(var(--drift), 116vh) rotate(240deg); }
}

.weather-embers {
    bottom: -8vh;
    width: var(--size);
    height: calc(var(--size) * .58);
    border-radius: 50%;
    background: rgba(255,126,42,.72);
    box-shadow: 0 0 12px rgba(255,70,10,.52);
    animation: pizza-weather-embers var(--duration) ease-in infinite;
    animation-delay: var(--delay);
}

@keyframes pizza-weather-embers {
    to { transform: translate(var(--drift), -118vh) scale(.2); opacity: 0; }
}

.weather-stars {
    top: calc(5% + (var(--size) * 2));
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(255,247,188,.88);
    box-shadow: 0 0 15px rgba(255,244,170,.72);
    animation: pizza-weather-stars var(--duration) ease-in-out infinite alternate;
    animation-delay: var(--delay);
}

@keyframes pizza-weather-stars {
    from { opacity: .15; transform: translateY(0) scale(.55); }
    to { opacity: .95; transform: translateY(18px) scale(1.1); }
}

/* Achievements drawer stays above weather/backgrounds. */
body.capybara-inspired #achievements-panel.clicker-drawer {
    z-index: 70000;
}

/* DEV-only progression tester */
#v75-progression-tester {
    position: fixed;
    z-index: 1000000;
    left: 18px;
    bottom: 86px;
    width: 230px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 11px;
    background: rgba(10,10,10,.94);
    color: white;
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
    font-family: Arial, sans-serif;
}

#v75-progression-tester strong {
    font-size: 10px;
    letter-spacing: .05em;
}

#v75-progression-tester select,
#v75-progression-tester button {
    min-height: 31px;
    padding: 5px 6px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 7px;
    background: #1b1b1d;
    color: white;
    font-size: 10px;
}

#v75-progression-tester button {
    cursor: pointer;
}

#v75-progression-tester .dev-tester-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

/* Responsive behavior */
@media (max-width: 1260px) {
    body.capybara-inspired #game-section {
        padding-left: 250px;
        padding-right: 250px;
    }
    body.capybara-inspired #level-section.clicker-milestone-card,
    body.capybara-inspired #mechanic-panel.clicker-event-card {
        width: 220px;
        max-width: 220px;
    }
}

@media (max-width: 1040px) {
    body.capybara-inspired {
        --clicker-rail-width: 330px;
    }
    body.capybara-inspired #game-section {
        padding: 74px 18px 30px;
        min-height: 640px;
    }
    body.capybara-inspired #level-section.clicker-milestone-card,
    body.capybara-inspired #mechanic-panel.clicker-event-card {
        position: relative;
        inset: auto;
        width: min(620px, 100%);
        max-width: none;
        margin-top: 10px;
        order: 10;
    }
    body.capybara-inspired #clicker-side-controls {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: 10px;
        transform: translateX(-50%);
        width: min(680px, calc(100vw - 18px));
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 5px;
    }
    body.capybara-inspired .clicker-side-button {
        width: auto;
        min-height: 50px;
    }
    #v75-progression-tester {
        bottom: 70px;
    }
}

@media (max-width: 900px) {
    body.capybara-inspired #game-layout {
        grid-template-columns: 1fr;
    }
    body.capybara-inspired #shop-section {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body.capybara-inspired #shop-section .upgrade-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body.capybara-inspired .upgrade-card {
        grid-template-columns: 40px minmax(0,1fr);
    }
    body.capybara-inspired .upgrade-button {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        min-height: 34px;
    }
    body.capybara-inspired #stats-section {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    body.capybara-inspired main {
        padding: 10px 8px 78px;
    }
    body.capybara-inspired #game-section {
        min-height: 560px;
        padding-top: 90px;
        border-radius: 14px;
    }
    body.capybara-inspired #clicker-economy-hud {
        top: 10px;
        width: calc(100% - 16px);
        gap: 4px;
    }
    body.capybara-inspired .clicker-hud-stat {
        padding: 7px 4px;
    }
    body.capybara-inspired .clicker-hud-stat span {
        font-size: .42rem;
        letter-spacing: .045rem;
    }
    body.capybara-inspired .clicker-hud-stat strong {
        font-size: .78rem;
    }
    body.capybara-inspired #pizza-button {
        width: 235px;
        height: 235px;
    }
    body.capybara-inspired #pepperoni-count {
        font-size: 3rem;
    }
    body.capybara-inspired #shop-section .upgrade-grid {
        grid-template-columns: 1fr;
    }
    body.capybara-inspired #stats-section {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body.capybara-inspired #customization-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body.capybara-inspired #clicker-side-controls {
        grid-template-columns: repeat(6, minmax(0,1fr));
    }
    body.capybara-inspired .clicker-side-button {
        min-height: 46px;
        padding: 5px 2px;
    }
    body.capybara-inspired .clicker-side-icon {
        font-size: 1rem;
    }
    body.capybara-inspired .clicker-side-button span:last-child {
        font-size: .39rem;
        letter-spacing: .02rem;
    }
    #v75-progression-tester {
        left: 8px;
        bottom: 64px;
        width: min(230px, calc(100vw - 16px));
    }
}



/* =========================================================
   V7.5.1 — NO BONUS EVENTS + MILESTONE BAR FIX
========================================================= */

/* Bonus Events were removed from the Capybara-style progression loop. */
body.capybara-inspired #mechanic-panel,
body.capybara-inspired #mechanic-panel.clicker-event-card {
    display: none !important;
}

/* The prior 6px track still inherited 3px padding from the cinematic UI,
   leaving zero usable inner height. Give the milestone bar real geometry. */
body.capybara-inspired #level-progress-container {
    display: block !important;
    width: 100%;
    height: 12px;
    min-height: 12px;
    margin-top: 10px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    background: rgba(0,0,0,.58);
}

body.capybara-inspired #level-progress-bar {
    display: block !important;
    height: 100%;
    min-height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd166, #ff8c42);
    box-shadow: 0 0 12px rgba(255,209,102,.34);
}

/* =========================================================
   V8.0 — ENGAGEMENT + COLLECTION PASS
========================================================= */

/* ---------------------------------------------------------
   GOLDEN PIZZA
--------------------------------------------------------- */

body.capybara-inspired #v8-golden-layer {
    position: absolute;
    z-index: 45;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

body.capybara-inspired #v8-golden-pizza {
    position: absolute;
    left: var(--golden-x);
    top: var(--golden-y);
    width: 112px;
    height: 112px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: white;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 16px rgba(255, 210, 72, .95)) drop-shadow(0 0 36px rgba(255, 160, 24, .68));
    animation: v8-golden-arrive .34s cubic-bezier(.2,.9,.24,1.25), v8-golden-hover .82s ease-in-out .34s infinite alternate;
}

body.capybara-inspired #v8-golden-pizza:hover {
    filter: drop-shadow(0 0 22px rgba(255, 241, 150, 1)) drop-shadow(0 0 52px rgba(255, 177, 35, .9));
}

body.capybara-inspired .v8-golden-pizza-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 4.6rem;
    transform: rotate(-8deg);
}

body.capybara-inspired .v8-golden-rays {
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 237, 142, .72) 0deg 7deg,
        transparent 7deg 17deg
    );
    mask-image: radial-gradient(circle, transparent 0 27%, #000 43%, transparent 73%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 27%, #000 43%, transparent 73%);
    animation: v8-golden-spin 4.4s linear infinite;
}

body.capybara-inspired .v8-golden-label {
    position: absolute;
    left: 50%;
    bottom: -24px;
    width: max-content;
    padding: 4px 7px;
    border: 1px solid rgba(255, 225, 112, .46);
    border-radius: 999px;
    background: rgba(15, 10, 4, .86);
    color: #fff2ad;
    font-size: .52rem;
    font-weight: 950;
    letter-spacing: .07rem;
    transform: translateX(-50%);
}

@keyframes v8-golden-arrive {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-30deg); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes v8-golden-hover {
    from { transform: translate(-50%, -50%) scale(.96) rotate(-2deg); }
    to { transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
}

@keyframes v8-golden-spin {
    to { transform: rotate(360deg); }
}

body.v8-golden-production #clicker-hud-pps,
body.v8-golden-click #clicker-hud-click,
body.v8-golden-crit #critical-chance {
    text-shadow: 0 0 14px rgba(255, 220, 90, .75);
}

/* ---------------------------------------------------------
   MILESTONE CELEBRATION — COMPACT LAUNCH TREATMENT
--------------------------------------------------------- */

#v8-milestone-celebration {
    position: fixed;
    z-index: 120000;
    top: 78px;
    left: 50%;
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -14px);
    transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.24,1.2), visibility .18s ease;
}

#v8-milestone-celebration.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.v8-milestone-card {
    width: 100%;
    min-height: 96px;
    padding: 14px 18px 14px 14px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "badge kicker"
        "badge name"
        "badge copy";
    column-gap: 14px;
    align-items: center;
    border: 1px solid rgba(255, 211, 105, .32);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(25, 20, 12, .97), rgba(9, 9, 11, .96));
    box-shadow:
        0 18px 50px rgba(0,0,0,.46),
        0 0 36px rgba(255, 186, 54, .08),
        inset 0 1px 0 rgba(255,255,255,.05);
    text-align: left;
    overflow: hidden;
}

.v8-milestone-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #ffe18a, #e8a42e);
}

#v8-milestone-celebration.show .v8-milestone-card {
    animation: v8-milestone-card-in .34s cubic-bezier(.2,.9,.24,1.15) forwards;
}

.v8-milestone-kicker {
    grid-area: kicker;
    display: block;
    align-self: end;
    color: #ffd166;
    font-size: .57rem;
    font-weight: 950;
    letter-spacing: .16rem;
}

.v8-milestone-number {
    position: absolute;
    top: 12px;
    right: 15px;
    color: rgba(255,255,255,.42);
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .08rem;
}

.v8-milestone-icon {
    grid-area: badge;
    width: 58px;
    height: 58px;
    margin: 0;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(255, 215, 120, .26);
    border-radius: 15px;
    background:
        radial-gradient(circle at 36% 30%, rgba(255,238,172,.18), transparent 24%),
        linear-gradient(145deg, rgba(255,195,65,.20), rgba(255,195,65,.06));
    color: #ffe18a;
    font-size: 1.28rem;
    font-weight: 1000;
    letter-spacing: -.04em;
    filter: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.v8-milestone-name {
    grid-area: name;
    display: block;
    min-width: 0;
    margin: 2px 62px 1px 0;
    color: white;
    font-size: clamp(1.12rem, 2.3vw, 1.55rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v8-milestone-copy {
    grid-area: copy;
    min-width: 0;
    max-width: none;
    margin: 3px 0 0;
    color: rgba(255,255,255,.58);
    font-size: .68rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.v8-milestone-flash #game-section {
    animation: v8-world-flash .48s ease;
}

@keyframes v8-milestone-card-in {
    0% { opacity: 0; transform: translateY(-10px) scale(.97); }
    70% { opacity: 1; transform: translateY(2px) scale(1.005); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes v8-world-flash {
    0%, 100% { filter: brightness(1); }
    34% { filter: brightness(1.12) saturate(1.08); }
}

@media (max-width: 650px) {
    #v8-milestone-celebration {
        top: 66px;
        width: calc(100vw - 20px);
    }

    .v8-milestone-card {
        min-height: 84px;
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 11px 13px 11px 11px;
        column-gap: 11px;
        border-radius: 15px;
    }

    .v8-milestone-icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        font-size: 1.05rem;
    }

    .v8-milestone-name {
        margin-right: 44px;
        font-size: 1.04rem;
    }

    .v8-milestone-copy {
        font-size: .61rem;
    }
}

/* ---------------------------------------------------------
   PURCHASE FEEDBACK
--------------------------------------------------------- */

body.capybara-inspired .upgrade-card.v8-purchased {
    animation: v8-card-purchase .4s cubic-bezier(.2,.9,.24,1.2);
}

body.capybara-inspired #pizza-button.v8-purchase-react {
    animation: v8-pizza-purchase .31s cubic-bezier(.2,.9,.24,1.35);
}

@keyframes v8-card-purchase {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-5px) scale(1.035); box-shadow: 0 0 28px rgba(255, 209, 102, .25); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes v8-pizza-purchase {
    0% { transform: scale(1); }
    48% { transform: scale(1.075) rotate(1.5deg); }
    100% { transform: scale(1); }
}

.v8-floating-feedback {
    position: fixed;
    z-index: 140000;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(8,8,9,.88);
    color: white;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .05rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: v8-float-feedback .9s ease-out forwards;
}

.v8-floating-feedback.v8-purchase {
    color: #ffe169;
    border: 1px solid rgba(255,225,105,.34);
}

@keyframes v8-float-feedback {
    0% { opacity: 0; transform: translate(-50%, -20%) scale(.8); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1.03); }
}

/* ---------------------------------------------------------
   COMBO TIERS
--------------------------------------------------------- */

body.capybara-inspired #v8-combo-tier {
    position: absolute;
    z-index: 12;
    left: 50%;
    top: calc(50% + clamp(145px, 19vw, 215px));
    min-width: 190px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(8,8,9,.72);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-50%);
    pointer-events: none;
}

body.capybara-inspired #v8-combo-tier.hidden {
    display: none !important;
}

.v8-combo-name {
    color: white;
    font-size: .69rem;
    font-weight: 950;
    letter-spacing: .055rem;
}

.v8-combo-multiplier {
    color: #ffd166;
    font-size: .59rem;
    letter-spacing: .04rem;
}

body.capybara-inspired #v8-combo-tier.v8-combo-fire,
body.capybara-inspired #v8-combo-tier.v8-combo-frenzy,
body.capybara-inspired #v8-combo-tier.v8-combo-sauce {
    border-color: rgba(255, 152, 66, .46);
    box-shadow: 0 0 24px rgba(255, 122, 46, .13), 0 12px 30px rgba(0,0,0,.24);
}

body.capybara-inspired #v8-combo-tier.v8-combo-sauce {
    border-color: rgba(255, 225, 105, .66);
    box-shadow: 0 0 34px rgba(255, 209, 102, .25), 0 12px 30px rgba(0,0,0,.24);
}

body.capybara-inspired #v8-combo-tier.v8-combo-pop {
    animation: v8-combo-pop .34s cubic-bezier(.2,.9,.24,1.3);
}

@keyframes v8-combo-pop {
    0% { transform: translateX(-50%) scale(.78); }
    65% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); }
}

/* ---------------------------------------------------------
   MYSTERY UPGRADES
--------------------------------------------------------- */

body.capybara-inspired .upgrade-card.v8-mystery-upgrade {
    border-style: dashed;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}

body.capybara-inspired .upgrade-card.v8-mystery-upgrade .upgrade-icon {
    filter: grayscale(1) brightness(.45) blur(1px);
}

body.capybara-inspired .upgrade-card.v8-mystery-upgrade .upgrade-info h4 {
    letter-spacing: .13rem;
}

body.capybara-inspired .upgrade-card.v8-mystery-upgrade .upgrade-info p {
    font-style: italic;
    opacity: .62;
}

/* ---------------------------------------------------------
   TODAY'S ORDER
--------------------------------------------------------- */

body.capybara-inspired #v8-daily-order-panel,
body.capybara-inspired #v8-ascension-teaser {
    position: absolute;
    z-index: 9;
    bottom: 16px;
    width: 286px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(8,8,9,.68);
    box-shadow: 0 14px 32px rgba(0,0,0,.22);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

body.capybara-inspired #v8-daily-order-panel {
    left: 16px;
}

body.capybara-inspired #v8-ascension-teaser {
    right: 16px;
}

.v8-mini-eyebrow {
    margin-bottom: 5px;
    color: #ffd166;
    font-size: .52rem;
    font-weight: 950;
    letter-spacing: .12rem;
}

#v8-daily-order-name,
#v8-ascension-copy {
    display: block;
    color: white;
    font-size: .76rem;
    line-height: 1.25;
}

#v8-daily-order-track,
#v8-ascension-track {
    width: 100%;
    height: 7px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
}

#v8-daily-order-fill,
#v8-ascension-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd166, #ff8c42);
    transition: width .22s ease;
}

#v8-daily-order-progress {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.61);
    font-size: .58rem;
}

body.capybara-inspired #v8-daily-order-panel.complete {
    border-color: rgba(118, 229, 157, .36);
}

body.capybara-inspired #v8-daily-order-panel.complete .v8-mini-eyebrow {
    color: #9ce8b4;
}

/* ---------------------------------------------------------
   ASCENSION ANTICIPATION
--------------------------------------------------------- */

body.capybara-inspired #v8-ascension-teaser.hidden {
    display: none !important;
}

body.capybara-inspired #v8-ascension-teaser {
    border-color: rgba(201, 190, 255, .22);
}

body.capybara-inspired #v8-ascension-teaser.ready {
    border-color: rgba(255, 225, 120, .56);
    box-shadow: 0 0 32px rgba(255, 209, 102, .12), 0 14px 32px rgba(0,0,0,.22);
    animation: v8-ascension-ready 1.6s ease-in-out infinite alternate;
}

@keyframes v8-ascension-ready {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

/* ---------------------------------------------------------
   TOASTS
--------------------------------------------------------- */

#v8-toast-host {
    position: fixed;
    z-index: 160000;
    top: 18px;
    left: 50%;
    width: min(620px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
    pointer-events: none;
}

.v8-toast {
    max-width: 100%;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(8,8,9,.9);
    color: white;
    box-shadow: 0 16px 38px rgba(0,0,0,.3);
    font-size: .67rem;
    font-weight: 950;
    letter-spacing: .045rem;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px) scale(.96);
    transition: opacity .22s ease, transform .22s ease;
}

.v8-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.v8-toast-golden,
.v8-toast-secret {
    border-color: rgba(255, 220, 95, .5);
    color: #fff0a2;
}

.v8-toast-order {
    border-color: rgba(120, 224, 156, .4);
}

/* ---------------------------------------------------------
   SOUND TOGGLE
--------------------------------------------------------- */

body.capybara-inspired #v8-sound-toggle {
    position: absolute;
    z-index: 15;
    top: 17px;
    right: 17px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(8,8,9,.62);
    color: white;
    cursor: pointer;
}

body.capybara-inspired #v8-sound-toggle:hover {
    border-color: rgba(255,209,102,.4);
}

/* ---------------------------------------------------------
   INTERACTIVE PEPPERONI RAIN
--------------------------------------------------------- */

#v8-weather-interactive-layer {
    position: fixed;
    z-index: 9000;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.v8-rain-pepperoni {
    position: absolute;
    left: var(--x);
    top: -42px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 3px solid #f5b653;
    border-radius: 50%;
    background: #b5332d;
    color: #7f1917;
    box-shadow: inset 0 0 0 5px #d84d43, 0 0 18px rgba(255, 190, 80, .24);
    font-size: 0;
    cursor: pointer;
    pointer-events: auto;
    animation: v8-rain-pepperoni-fall var(--fall-duration) linear forwards;
}

.v8-rain-pepperoni::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 7px;
    top: 7px;
    border-radius: 50%;
    background: #701514;
    box-shadow: 13px 5px 0 #701514, 4px 15px 0 #701514;
}

@keyframes v8-rain-pepperoni-fall {
    from { transform: translateY(-20px) rotate(0deg); }
    to { transform: translateY(calc(100vh + 90px)) rotate(620deg); }
}

/* Added weather visuals */
.weather-cheese-storm {
    top: -10vh;
    width: var(--size);
    height: calc(var(--size) * .55);
    border-radius: 2px 7px 2px 7px;
    background: rgba(255, 209, 78, .78);
    box-shadow: 0 0 8px rgba(255, 197, 54, .32);
    animation: v8-cheese-fall var(--duration) linear infinite;
    animation-delay: var(--delay);
}

@keyframes v8-cheese-fall {
    from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    to { transform: translate3d(var(--drift), 115vh, 0) rotate(520deg); }
}

#pizza-weather-layer[data-weather="eclipse"]::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 72% 20%, rgba(255,210,115,.16) 0 5%, rgba(15,15,25,.28) 7% 18%, rgba(0,0,0,.22) 46%, transparent 72%);
    pointer-events: none;
}

.weather-eclipse {
    top: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(255, 221, 145, .3);
    box-shadow: 0 0 14px rgba(255, 210, 115, .24);
    animation: v8-eclipse-drift var(--duration) ease-in-out infinite alternate;
    animation-delay: var(--delay);
}

@keyframes v8-eclipse-drift {
    from { transform: translateX(-20px) scale(.7); opacity: .2; }
    to { transform: translateX(var(--drift)) scale(1.25); opacity: .8; }
}

/* ---------------------------------------------------------
   NEW PIZZA SKIN TREATMENTS
--------------------------------------------------------- */

body[data-pizza-skin="midnight-marinara"] #pizza-button {
    filter: saturate(1.18) brightness(.76) hue-rotate(-8deg) drop-shadow(0 0 34px rgba(78, 102, 255, .32));
}

body[data-pizza-skin="classified-pizza"] #pizza-button {
    filter: grayscale(.82) contrast(1.28) brightness(.84) drop-shadow(0 0 30px rgba(255,255,255,.18));
}

body[data-pizza-skin="uprising-pizza"] #pizza-button {
    filter: saturate(1.52) contrast(1.2) hue-rotate(-14deg) drop-shadow(0 0 38px rgba(255, 68, 52, .38));
}

body[data-pizza-skin="frozen-crust"] #pizza-button {
    filter: saturate(.72) brightness(1.2) hue-rotate(158deg) drop-shadow(0 0 42px rgba(133, 220, 255, .55));
}

body[data-pizza-skin="delivery-special"] #pizza-button {
    filter: saturate(1.12) contrast(1.08) sepia(.16) drop-shadow(0 0 32px rgba(255, 176, 82, .3));
}

body[data-pizza-skin="order-master"] #pizza-button {
    filter: sepia(.5) saturate(1.45) brightness(1.14) drop-shadow(0 0 48px rgba(255, 215, 90, .52));
}

body[data-pizza-skin="cycle-chef"] #pizza-button {
    filter: saturate(1.42) hue-rotate(70deg) contrast(1.08) drop-shadow(0 0 42px rgba(120, 255, 205, .34));
}

body[data-pizza-skin="lucky-slice"] #pizza-button {
    filter: saturate(1.5) hue-rotate(54deg) brightness(1.08) drop-shadow(0 0 44px rgba(118, 255, 108, .45));
}

body[data-pizza-skin="midnight-pizza"] #pizza-button {
    filter: saturate(1.25) brightness(.62) hue-rotate(184deg) drop-shadow(0 0 46px rgba(88, 95, 255, .58));
}

body[data-pizza-skin="purist-pie"] #pizza-button {
    filter: saturate(.35) brightness(1.34) contrast(.92) drop-shadow(0 0 48px rgba(255,255,255,.65));
}

body[data-pizza-skin="golden-pizza-skin"] #pizza-button {
    filter: sepia(.68) saturate(1.72) brightness(1.26) drop-shadow(0 0 38px rgba(255, 235, 112, .88)) drop-shadow(0 0 84px rgba(255, 172, 45, .52));
    animation: v8-golden-skin-pulse 1.3s ease-in-out infinite alternate;
}

@keyframes v8-golden-skin-pulse {
    from { transform: scale(.985); }
    to { transform: scale(1.025); }
}

/* ---------------------------------------------------------
   RESPONSIVE V8 UI
--------------------------------------------------------- */

@media (max-width: 1260px) {
    body.capybara-inspired #v8-daily-order-panel,
    body.capybara-inspired #v8-ascension-teaser {
        width: 220px;
    }
}

@media (max-width: 1040px) {
    body.capybara-inspired #v8-daily-order-panel,
    body.capybara-inspired #v8-ascension-teaser {
        position: relative;
        inset: auto;
        width: min(620px, 100%);
        margin-top: 10px;
        order: 11;
    }

    body.capybara-inspired #v8-ascension-teaser {
        order: 12;
    }

    body.capybara-inspired #v8-combo-tier {
        top: auto;
        bottom: 18px;
    }
}

@media (max-width: 650px) {
    body.capybara-inspired #v8-golden-pizza {
        width: 88px;
        height: 88px;
    }

    body.capybara-inspired .v8-golden-pizza-icon {
        font-size: 3.6rem;
    }

    body.capybara-inspired #v8-sound-toggle {
        top: 11px;
        right: 11px;
        width: 30px;
        height: 30px;
    }

    .v8-milestone-card {
        padding: 22px 16px 20px;
        border-radius: 18px;
    }

    .v8-milestone-copy {
        font-size: .76rem;
    }

    body.capybara-inspired #v8-combo-tier {
        bottom: 12px;
        min-width: 160px;
        padding: 6px 9px;
    }

    .v8-combo-name {
        font-size: .58rem;
    }

    .v8-combo-multiplier {
        font-size: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #v8-golden-pizza,
    .v8-golden-rays,
    .v8-rain-pepperoni,
    body[data-pizza-skin="golden-pizza-skin"] #pizza-button,
    body.capybara-inspired #v8-ascension-teaser.ready {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* The V8 full-screen milestone reveal replaces the older small duplicate banner. */
body.capybara-inspired #level-up-banner {
    display: none !important;
}