* {
    box-sizing: border-box;
}

:root {
    --emerald-primary: #00ff99;
    --emerald-accent: #8cff66;
    --emerald-heading-font: "Cinzel";
    --emerald-body-font: "Inter";
    --emerald-background-image: none;
    --player-fill: 0%;
    --page-width: 1180px;
    --glass: rgba(4, 38, 25, 0.78);
    --glass-heavy: rgba(2, 27, 18, 0.9);
    --line: rgba(0, 255, 153, 0.27);
    --text: #effff6;
    --muted: #b9e8ce;
}

html {
    min-height: 100%;
    background: #03110c;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background: #03110c;
    font-family:
        var(--emerald-body-font),
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
a {
    font: inherit;
}

button:disabled {
    cursor: default;
}

.emerald-background,
.emerald-aura,
#fairyDust {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.emerald-background {
    z-index: 0;

    background-image:
        linear-gradient(
            rgba(2, 16, 11, 0.2),
            rgba(2, 16, 11, 0.42)
        ),
        var(--emerald-background-image),
        radial-gradient(
            circle at 50% 25%,
            #174d34 0%,
            #051b12 55%,
            #020907 100%
        );

    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;

    filter:
        brightness(0.73)
        saturate(1.18);

    transform: scale(1.01);
}

.emerald-aura {
    z-index: 1;

    background:
        radial-gradient(
            circle at 50% 66%,
            rgba(0, 255, 135, 0.18) 0%,
            rgba(0, 205, 105, 0.17) 22%,
            rgba(0, 140, 75, 0.12) 43%,
            rgba(0, 65, 42, 0.08) 62%,
            rgba(0, 0, 0, 0.66) 100%
        );

    mix-blend-mode: screen;
    opacity: 0.58;

    animation:
        auraFlicker
        7s
        infinite
        ease-in-out;
}

#fairyDust {
    z-index: 2;
    width: 100%;
    height: 100%;
}

.page-shell {
    position: relative;
    z-index: 3;

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

    margin: 0 auto;
    padding-bottom: 50px;
}

.emerald-card {
    border:
        1px solid
        var(--line);

    background:
        linear-gradient(
            145deg,
            rgba(5, 45, 29, 0.82),
            rgba(3, 27, 19, 0.8)
        );

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

    backdrop-filter:
        blur(13px);

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

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;

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

    gap: 18px;

    padding:
        18px
        24px;

    border-top: 0;

    border-radius:
        0
        0
        18px
        18px;
}

.brand {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    min-width: 0;

    color:
        var(--text);

    text-decoration:
        none;
}

.brand-logo {
    width: 48px;
    height: 48px;

    flex:
        0 0 48px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0
            0
            12px
            rgba(0, 255, 153, 0.35)
        );
}

.brand-leaf {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(0, 255, 153, 0.26);

    border-radius:
        50%;

    background:
        rgba(0, 255, 153, 0.08);

    font-size:
        22px;
}

.brand-title {
    overflow: hidden;

    font-family:
        var(--emerald-heading-font),
        "Cinzel",
        serif;

    font-size:
        clamp(
            17px,
            2.4vw,
            24px
        );

    font-weight:
        700;

    line-height:
        1.1;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    text-shadow:
        0 0 12px rgba(0, 255, 153, 0.45);
}

.brand-title em {
    color:
        #c9f8da;

    font-family:
        var(--emerald-body-font),
        sans-serif;

    font-size:
        0.72em;

    font-weight:
        700;
}

.top-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex:
        0 0 auto;
}

.discord-button,
.btn-emerald {
    border: 0;

    border-radius:
        11px;

    padding:
        10px
        16px;

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

.discord-button {
    border:
        1px solid
        rgba(0, 255, 153, 0.18);

    color:
        #effff6;

    background:
        rgba(0, 17, 12, 0.68);
}

.btn-emerald {
    color:
        #00180e;

    background:
        linear-gradient(
            90deg,
            var(--emerald-primary),
            var(--emerald-accent)
        );

    box-shadow:
        0 0 15px
        rgba(0, 255, 153, 0.34);

    font-weight:
        800;

    text-decoration:
        none;
}

.discord-button:not(:disabled):hover,
.btn-emerald:not(:disabled):hover {
    transform:
        translateY(-1px);
}

.btn-emerald:not(:disabled):hover {
    filter:
        brightness(1.12);

    box-shadow:
        0 0 24px
        rgba(0, 255, 184, 0.55);
}

.setup-banner {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top:
        20px;

    padding:
        14px
        18px;

    border-radius:
        14px;

    color:
        var(--muted);
}

.setup-banner strong {
    color:
        var(--emerald-primary);
}

.hero {
    margin:
        36px
        14px
        28px;

    padding:
        clamp(28px, 5vw, 52px)
        28px;

    border-radius:
        22px;

    text-align:
        center;
}

.hero-eyebrow,
.server-kicker {
    display: block;

    margin-bottom:
        8px;

    color:
        var(--emerald-accent);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;
}

.hero h1 {
    margin:
        0;

    font-family:
        var(--emerald-heading-font),
        "Cinzel",
        serif;

    font-size:
        clamp(
            30px,
            5vw,
            50px
        );

    line-height:
        1.05;
}

.hero p {
    max-width:
        820px;

    margin:
        14px
        auto
        0;

    color:
        #c4efd6;

    font-size:
        clamp(
            14px,
            2vw,
            17px
        );

    line-height:
        1.65;
}

.text-glow {
    text-shadow:
        0 0 8px rgba(0, 255, 153, 0.48),
        0 0 28px rgba(0, 255, 153, 0.14);
}

.server-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(340px, 0.75fr);

    gap:
        24px;

    margin:
        0
        14px
        34px;

    padding:
        24px;

    border-radius:
        20px;
}

.server-main {
    min-width:
        0;
}

.server-heading-row {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;
}

.server-heading-row h2 {
    margin:
        0;

    font-family:
        var(--emerald-heading-font),
        "Cinzel",
        serif;

    font-size:
        clamp(
            23px,
            3vw,
            34px
        );
}

.server-heading-row p {
    margin:
        6px
        0
        0;

    color:
        var(--muted);
}

.status-pill {
    display: inline-flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        0 0 auto;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(0, 255, 153, 0.26);

    border-radius:
        999px;

    color:
        #caffdd;

    background:
        rgba(0, 255, 132, 0.08);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;
}

.status-pill::before {
    content: "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--emerald-primary);

    box-shadow:
        0 0 10px
        rgba(0, 255, 153, 0.8);
}

.status-pill.offline {
    border-color:
        rgba(255, 110, 110, 0.25);

    color:
        #ffd0d0;

    background:
        rgba(255, 74, 74, 0.08);
}

.status-pill.offline::before {
    background:
        #ff6868;

    box-shadow:
        0 0 10px
        rgba(255, 75, 75, 0.72);
}

.player-summary {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        28px;
}

.player-count {
    display: flex;

    align-items:
        baseline;

    gap:
        7px;
}

.player-count strong {
    color:
        #fff;

    font-size:
        38px;

    line-height:
        1;
}

.player-count span,
.heartbeat {
    color:
        var(--muted);

    font-size:
        13px;
}

.capacity-track {
    height:
        9px;

    margin-top:
        12px;

    overflow:
        hidden;

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

    border-radius:
        999px;

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

.capacity-track span {
    display: block;

    width:
        var(--player-fill);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--emerald-primary),
            var(--emerald-accent)
        );

    box-shadow:
        0 0 16px
        rgba(0, 255, 153, 0.48);
}

.server-stat-grid {
    display: grid;

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

    gap:
        10px;
}

.server-stat {
    min-width:
        0;

    padding:
        12px
        13px;

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

    border-radius:
        12px;

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

.server-stat span {
    display: block;

    margin-bottom:
        5px;

    color:
        #82cba2;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.server-stat strong {
    display: block;

    overflow:
        hidden;

    color:
        #effff5;

    font-size:
        14px;

    text-overflow:
        ellipsis;
}

.emerald-section {
    margin:
        0
        14px
        36px;
}

.section-title {
    margin:
        0
        0
        15px;

    font-family:
        var(--emerald-heading-font),
        "Cinzel",
        serif;

    font-size:
        clamp(
            23px,
            3vw,
            31px
        );

    text-align:
        center;
}

.product-row {
    display: grid;

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

    gap:
        20px;
}

.emerald-item {
    position:
        relative;

    display:
        flex;

    min-width:
        0;

    min-height:
        100%;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 255, 153, 0.5);

    border-radius:
        16px;

    background:
        linear-gradient(
            155deg,
            rgba(0, 30, 19, 0.84),
            rgba(0, 14, 10, 0.78)
        );

    box-shadow:
        0 0 18px
        rgba(0, 255, 153, 0.12);

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

.emerald-item::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    box-shadow:
        inset
        0
        0
        24px
        rgba(0, 255, 153, 0.045);
}

.emerald-item:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(0, 255, 153, 0.88);

    box-shadow:
        0 0 28px rgba(0, 255, 153, 0.24),
        0 24px 60px rgba(0, 0, 0, 0.32);
}

.emerald-item.is-featured {
    border-color:
        rgba(140, 255, 102, 0.9);

    box-shadow:
        0 0 0 1px rgba(140, 255, 102, 0.13),
        0 0 30px rgba(0, 255, 153, 0.22);
}

.product-badge {
    position:
        absolute;

    top:
        12px;

    right:
        12px;

    z-index:
        4;

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(197, 255, 172, 0.32);

    border-radius:
        999px;

    color:
        #07180d;

    background:
        linear-gradient(
            90deg,
            var(--emerald-accent),
            #d4ff9a
        );

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.product-image-wrap {
    position:
        relative;

    z-index:
        1;

    height:
        185px;

    overflow:
        hidden;

    border-bottom:
        1px solid
        rgba(0, 255, 153, 0.17);

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

.product-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    padding:
        12px;

    filter:
        drop-shadow(
            0
            14px
            16px
            rgba(0, 0, 0, 0.38)
        );

    transition:
        transform
        0.28s
        ease;
}

.emerald-item:hover .product-image {
    transform:
        scale(1.035);
}

.product-copy {
    position:
        relative;

    z-index:
        1;

    flex:
        1 1 auto;

    padding:
        18px
        18px
        8px;

    text-align:
        center;
}

.product-copy h3 {
    margin:
        0
        0
        7px;

    color:
        #f5fff8;

    font-family:
        var(--emerald-heading-font),
        "Cinzel",
        serif;

    font-size:
        18px;
}

.product-copy p {
    margin:
        0;

    color:
        #b9e3ca;

    font-size:
        13px;

    line-height:
        1.55;
}

.product-price {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    min-height:
        30px;

    padding:
        4px
        18px;

    text-align:
        center;
}

.product-price del {
    color:
        #739d86;

    font-size:
        12px;
}

.product-price strong {
    color:
        #f5fff8;

    font-size:
        17px;
}

/*
 * IMPORTANT:
 * The button sits inside a FORM.
 *
 * The form is the direct child of .emerald-item,
 * so THIS is what needs to be centered.
 */
.emerald-item > form {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    margin-top:
        auto;

    padding:
        8px
        18px
        18px;
}

/*
 * Button itself no longer needs side margins.
 * The wrapping form handles spacing + centering.
 */
.purchase-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    align-self:
        auto;

    min-width:
        118px;

    margin:
        0;

    text-align:
        center;

    cursor:
        pointer;
}

.purchase-button:disabled,
.cart-button:disabled,
.discord-button:disabled {
    opacity:
        0.88;
}

.empty-shop {
    margin:
        0
        14px
        36px;

    padding:
        46px
        24px;

    border-radius:
        20px;

    text-align:
        center;
}

.empty-shop > span {
    font-size:
        42px;
}

.empty-shop h2 {
    margin:
        12px
        0
        7px;

    font-family:
        var(--emerald-heading-font),
        "Cinzel",
        serif;
}

.empty-shop p {
    margin:
        0;

    color:
        var(--muted);
}

footer {
    display:
        flex;

    justify-content:
        center;

    gap:
        9px;

    padding:
        24px
        12px
        8px;

    color:
        rgba(206, 247, 224, 0.78);

    font-size:
        12px;
}

.footer-dot {
    opacity:
        0.5;
}

@keyframes auraFlicker {
    0%,
    100% {
        opacity:
            0.5;

        filter:
            brightness(1);
    }

    18% {
        opacity:
            0.62;

        filter:
            brightness(1.16);
    }

    42% {
        opacity:
            0.48;

        filter:
            brightness(0.94);
    }

    68% {
        opacity:
            0.64;

        filter:
            brightness(1.2);
    }

    84% {
        opacity:
            0.54;

        filter:
            brightness(1.06);
    }
}

@media (max-width: 900px) {
    .server-panel {
        grid-template-columns:
            1fr;
    }

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

@media (max-width: 680px) {
    .page-shell {
        width:
            min(
                var(--page-width),
                calc(100% - 18px)
            );
    }

    .topbar {
        position:
            relative;

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            15px;
    }

    .brand {
        width:
            100%;
    }

    .brand-title {
        white-space:
            normal;
    }

    .top-actions {
        width:
            100%;
    }

    .top-actions button,
    .top-actions a.btn-emerald,
    .top-actions a.discord-button {
        flex:
            1 1 50%;

        padding-inline:
            10px;

        text-align:
            center;
    }

    .hero,
    .server-panel,
    .emerald-section,
    .empty-shop {
        margin-left:
            0;

        margin-right:
            0;
    }

    .server-heading-row,
    .player-summary {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .server-stat-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .product-row {
        grid-template-columns:
            1fr;
    }

    .product-image-wrap {
        height:
            210px;
    }

    .emerald-item > form {
        padding:
            8px
            16px
            18px;
    }

    .purchase-button {
        min-width:
            130px;
    }
}

@media (max-width: 420px) {
    .server-stat-grid {
        grid-template-columns:
            1fr;
    }

    footer {
        align-items:
            center;

        flex-direction:
            column;

        gap:
            4px;
    }

    .footer-dot {
        display:
            none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;
    }

    .emerald-aura {
        animation:
            none;
    }
}