img[src="images/contgoobicon.png"] {
            object-fit: contain;
        }

        #darkDistrictStatsBar img[src="images/contgoobicon.png"] {
            transform: scale(0.75);
        }

        #businessMenu .business-dropdown-income::before,
        #businessMenu .business-dropdown-value::before,
        #businessMenu #passiveIncomePerSecond::before,
        .union-goob-amount::before {
            content: '';
            display: inline-block;
            width: 17px;
            height: 16px;
            margin-right: 4px;
            vertical-align: -3px;
            background: url('images/goobgreenicon.png') center / contain no-repeat;
        }

        #crimeMenu .crime-heist-goob-amount::before,
        #heistMenu .crime-heist-goob-amount::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 3px;
            vertical-align: -3px;
            background: url('images/goobgreenicon.png') center / contain no-repeat;
        }

        .menu-green-goob-amount::before,
        #goobBankInteriorMenu button[onclick^="setDepositAmount("]::before,
        #goobBankInteriorMenu button[onclick^="setWithdrawAmount("]::before,
        #casinoMenu button[onclick^="setCasinoBet("]::before,
        #goobRaceMenu .pony-quick-bets button::before,
        #trashPileMenu .trash-rewards-card-goobs .trash-rewards-label::before,
        #scavanageringMenu .search-rewards-card-goobs .search-goob-row:not(.search-goob-row-last) .search-goob-label::before,
        #fightClubMenu .payout-multiplier > div:last-child::before,
        #fightClubMenu #outcomeProfit span::before,
        #lockerRoomMenu :is(#runawayDetails, #bribeDetails, #cooperateDetails) > div:is(:first-child, :nth-child(2), :last-child) > span:last-child::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 3px;
            vertical-align: -3px;
            background: url('images/goobgreenicon.png') center / contain no-repeat;
        }

        .menu-blue-goob-amount::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 3px;
            vertical-align: -3px;
            background: url('images/iconbluegoob.png') center / contain no-repeat;
        }

        #familiesMenu .menu-green-goob-amount::before,
        #familiesMenu .menu-blue-goob-amount::before {
            width: 13px;
            height: 13px;
            vertical-align: -2px;
        }

        #familiesMenu h3.menu-green-goob-amount::before {
            width: 20px;
            height: 20px;
            vertical-align: -2px;
            margin-right: 6px;
        }

        #familiesMenu .business-button .menu-green-goob-amount::before {
            width: 11px;
            height: 11px;
            vertical-align: -1px;
        }

        .menu-red-goob-amount::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 3px;
            vertical-align: -3px;
            background: url('images/contgoobicon.png') center / contain no-repeat;
        }

        #weaponsShopMenu .menu-green-goob-amount::before,
        #backgroundSelectionMenu .menu-green-goob-amount::before,
        #clothingSelectionMenu .menu-green-goob-amount::before,
        #employmentOfficeMenu .menu-green-goob-amount::before {
            width: 12px;
            height: 12px;
            margin-right: 2px;
            vertical-align: -2px;
        }

        #inventoryMenu .menu-green-goob-amount::before {
            width: 12px;
            height: 12px;
            margin-right: 2px;
            vertical-align: -2px;
        }

        #strengthTrainingMenu .menu-green-goob-amount::before {
            width: 13px;
            height: 13px;
            margin-right: 2px;
            vertical-align: -2px;
        }

        #weaponsShopMenu .weapon-shop-card__currency-price {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        #weaponsShopMenu .weapon-shop-card__currency-price img {
            width: 13px;
            height: 13px;
            object-fit: contain;
            flex: none;
        }

        #goobRaceMenu .pony-panel-heading .menu-green-goob-amount::before {
            width: 12px;
            height: 12px;
            margin-right: 2px;
            vertical-align: -2px;
        }

        html {
            /* clip avoids the overflow-x:hidden quirk that forces overflow-y:auto and crops the banner */
            overflow-x: clip;
            overflow-y: hidden;
            scrollbar-gutter: auto;
            /* Compensates body zoom so fixed storm effects still cover the full viewport */
            --game-zoom: 1;
            --vz: calc(1vw / var(--game-zoom, 1));
        }

        body {
            font-family: Arial, sans-serif;
            text-align: center;
            /* Keep space above the prelogin logo without adding page margin. */
            margin: 0;
            padding: 50px 0 24px 0;
            background-color: black;
            color: white;
            position: relative;
            overflow-x: clip;
            overflow-y: hidden;
            /* Do NOT use min-height: 100vh here — it fights zoom/fit and causes fake scroll */
            min-height: 0;
        }
        
        body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/mountain_background.png');
    background-size: auto 100%; /* Hoogte op 100%, breedte automatisch */
    background-position: center top;
    background-repeat: repeat-x; /* Alleen horizontaal herhalen */
    image-rendering: crisp-edges; /* Betere rendering voor pixelart-achtige afbeeldingen */
    z-index: -10;
}

/* Default citizen preview above the pre-login gender choices. */
.prelogin-gender-option {
    position: relative;
}

.prelogin-register-card {
    position: relative;
}

.prelogin-gender-preview {
    position: absolute;
    bottom: 67px;
    width: 72px;
    height: 128px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.88);
    transform-origin: bottom center;
    transition: opacity 160ms ease, transform 180ms ease;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.7));
    z-index: 100;
}

.prelogin-gender-preview--male {
    left: 35.5%;
}

.prelogin-gender-preview--female {
    left: 64.5%;
}

.prelogin-register-card:has(#maleOption:hover) .prelogin-gender-preview--male,
.prelogin-register-card:has(#maleOption:focus-visible) .prelogin-gender-preview--male,
.prelogin-register-card:has(#femaleOption:hover) .prelogin-gender-preview--female,
.prelogin-register-card:has(#femaleOption:focus-visible) .prelogin-gender-preview--female {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

#maleOption:hover,
#maleOption:focus-visible {
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.6), 0 0 0 2px #007bff;
    transform: scale(1.05);
}

#maleOption.prelogin-gender-option--selected {
    background: #e7f3ff !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.6), 0 0 0 2px #007bff;
}

#femaleOption:hover,
#femaleOption:focus-visible {
    border-color: #ff69b4;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.6), 0 0 0 2px #ff69b4;
    transform: scale(1.05);
}

#femaleOption.prelogin-gender-option--selected {
    background: #ffe7f3 !important;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.6), 0 0 0 2px #ff69b4;
}

.prelogin-register-card #username,
.prelogin-register-card .prelogin-password-field,
.prelogin-register-card .prelogin-gender-option,
.prelogin-register-card .create-account-button {
    transition: filter 160ms ease, opacity 160ms ease;
}

.prelogin-register-card:has(.prelogin-gender-option:hover) #username,
.prelogin-register-card:has(.prelogin-gender-option:hover) .prelogin-password-field,
.prelogin-register-card:has(.prelogin-gender-option:hover) .prelogin-gender-option,
.prelogin-register-card:has(.prelogin-gender-option:hover) .create-account-button,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) #username,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) .prelogin-password-field,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) .prelogin-gender-option,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) .create-account-button {
    filter: blur(3px);
    opacity: 0.62;
}

.prelogin-register-card .prelogin-gender-option:hover,
.prelogin-register-card .prelogin-gender-option:focus-visible,
.prelogin-register-card .create-account-button {
    filter: none !important;
    opacity: 1 !important;
}

.prelogin-gender-preview img {
    position: absolute;
    image-rendering: pixelated;
    user-select: none;
}

.prelogin-gender-preview--male img,
.prelogin-gender-preview__body {
    inset: 0;
    width: 100%;
    height: 100%;
}

.prelogin-gender-preview__hair {
    top: 0;
    left: 0;
    width: 100%;
    height: 45.56%;
    z-index: 1;
}

.prelogin-gender-preview__face-correction {
    z-index: 2;
    clip-path: polygon(
        44% 12%, 61% 12%,
        61% 15%, 67% 15%,
        67% 18%, 72% 18%,
        72% 21%, 77% 21%,
        77% 27%, 72% 27%,
        72% 30%, 67% 30%,
        67% 33%, 61% 33%,
        61% 36%, 39% 36%,
        39% 33%, 33% 33%,
        33% 30%, 28% 30%,
        28% 27%, 23% 27%,
        23% 21%, 28% 21%,
        28% 18%, 33% 18%,
        33% 15%, 39% 15%,
        39% 12%
    );
}

.prelogin-gender-preview__skin--1 {
    opacity: 1;
}

.prelogin-gender-preview__skin--2,
.prelogin-gender-preview__skin--3 {
    opacity: 0;
}

.prelogin-register-card:has(.prelogin-gender-option:hover) .prelogin-gender-preview__skin--1,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) .prelogin-gender-preview__skin--1 {
    animation: preloginSkinTone1 1.5s linear infinite;
}

.prelogin-register-card:has(.prelogin-gender-option:hover) .prelogin-gender-preview__skin--2,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) .prelogin-gender-preview__skin--2 {
    animation: preloginSkinTone2 1.5s linear infinite;
}

.prelogin-register-card:has(.prelogin-gender-option:hover) .prelogin-gender-preview__skin--3,
.prelogin-register-card:has(.prelogin-gender-option:focus-visible) .prelogin-gender-preview__skin--3 {
    animation: preloginSkinTone3 1.5s linear infinite;
}

@keyframes preloginSkinTone1 {
    0%, 32.99% { opacity: 1; }
    33%, 100% { opacity: 0; }
}

@keyframes preloginSkinTone2 {
    0%, 32.99% { opacity: 0; }
    33%, 65.99% { opacity: 1; }
    66%, 100% { opacity: 0; }
}

@keyframes preloginSkinTone3 {
    0%, 65.99% { opacity: 0; }
    66%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .prelogin-gender-preview {
        transition: none;
    }

    .prelogin-gender-preview__skin {
        animation: none !important;
    }
}

/* Free emergency recovery: compact treatment row matching the paid options. */
.hospital-free-recovery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 8px 16px;
    border: 1px solid rgba(211, 47, 47, 0.32);
    border-radius: 8px;
    background: rgba(211, 47, 47, 0.12);
    box-sizing: border-box;
}

.hospital-free-recovery__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-bottom: 1px;
}

.hospital-free-recovery__progress {
    position: relative;
    width: 100%;
    height: 16px;
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hospital-free-recovery__progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, #b71c1c, #d32f2f, #ef5350);
    box-shadow: 0 0 13px rgba(239, 83, 80, 0.42);
    transition: width 110ms ease-out;
}

.hospital-free-recovery__progress-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.62em;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 3px #000;
}

.hospital-free-recovery__hint {
    overflow: hidden;
    color: #ff8a80;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hospital-free-recovery__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 130px;
    width: 130px;
    min-width: 130px;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 6px;
    color: #ef5350;
    background: rgba(0, 0, 0, 0.25);
    font-size: 1em;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 90ms ease, filter 140ms ease, opacity 140ms ease;
}

.hospital-free-recovery__button:hover:not(:disabled),
.hospital-free-recovery__button:focus-visible:not(:disabled) {
    color: #ff6b6b;
    background: rgba(0, 0, 0, 0.38);
    filter: brightness(1.08);
    outline: none;
}

.hospital-free-recovery__button.is-clicked {
    transform: scale(0.975);
}

.hospital-free-recovery__mouse {
    width: 20px;
    height: 20px;
    object-fit: contain;
    pointer-events: none;
    transform-origin: 30% 20%;
    animation: hospitalFreeRecoveryMouseClick 0.76s ease-in-out infinite;
}

@keyframes hospitalFreeRecoveryMouseClick {
    0%, 42%, 100% {
        transform: scale(1) translateY(0);
    }
    55% {
        transform: scale(0.82) translateY(1px);
    }
}

.hospital-free-recovery__button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.45);
}

.hospital-free-recovery__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hospital-free-recovery__mouse {
        animation: none;
    }
}

/* Currency icons used across the hospital treatment prices. */
.hospital-currency-icon {
    width: 16px;
    height: 16px;
    margin-right: 0;
    display: block;
    object-fit: contain;
}

.hospital-currency-price {
    display: grid;
    align-items: center;
    justify-content: center;
    column-gap: 2px;
}

.hospital-currency-price--goobs {
    grid-template-columns: 16px 58px 6px 30px;
    column-gap: 0;
    padding-right: 7px !important;
    padding-left: 7px !important;
}

.hospital-currency-price--goobs .hospital-currency-label {
    grid-column: 4;
    margin-left: 0;
}

.hospital-currency-price--blue {
    grid-template-columns: 16px 28px auto;
}

.hospital-currency-price > span:not(.hospital-currency-label) {
    text-align: right;
}

.hospital-currency-label {
    font-size: 0.68em;
    margin-left: 4px;
    text-align: center;
}

/* Advanced hospital care combines Blue and Contribution treatments. */
.hospital-advanced-care {
    padding: 14px 16px;
    border: 1px solid rgba(126, 87, 194, 0.48);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(22, 29, 43, 0.82), rgba(41, 22, 34, 0.78));
    box-shadow: inset 0 0 24px rgba(103, 58, 183, 0.06);
    box-sizing: border-box;
}

.hospital-advanced-care__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(126, 87, 194, 0.42);
    color: #d1c4e9;
    font-size: 1.05em;
    letter-spacing: 0.5px;
}

.hospital-advanced-care__heading small {
    padding: 2px 6px;
    border: 1px solid rgba(255, 183, 77, 0.45);
    border-radius: 999px;
    color: #ffcc80;
    background: rgba(255, 152, 0, 0.1);
    font-size: 0.55em;
    letter-spacing: 0.08em;
}

.hospital-contribution-treatment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border: 1px solid rgba(192, 57, 43, 0.42);
    border-radius: 8px;
    background: linear-gradient(to right, rgba(192, 57, 43, 0.14), rgba(121, 45, 45, 0.2));
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.hospital-contribution-treatment:hover {
    border-color: rgba(239, 108, 87, 0.68);
    background: linear-gradient(to right, rgba(192, 57, 43, 0.25), rgba(121, 45, 45, 0.32));
}

.hospital-contribution-treatment:active {
    transform: scale(0.992);
}

.hospital-contribution-treatment--ultimate {
    border-color: rgba(255, 152, 0, 0.48);
    background: linear-gradient(to right, rgba(183, 28, 28, 0.2), rgba(230, 81, 0, 0.18));
}

.hospital-contribution-treatment__health {
    color: #ff8a80;
    font-size: 1em;
    font-weight: 800;
}

.hospital-contribution-treatment__price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 130px;
    width: 130px;
    min-width: 130px;
    height: 30px;
    padding: 0 7px;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(135deg, rgba(126, 28, 28, 0.9), rgba(74, 19, 26, 0.94));
    box-sizing: border-box;
    white-space: nowrap;
}

.hospital-contribution-treatment__price img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(231, 76, 60, 0.5));
}

.hospital-contribution-treatment__price strong {
    color: #ffcc80;
}

.hospital-contribution-treatment__price small {
    color: #ffcdd2;
    font-size: 0.68em;
}

/* Disease Treatment — full hospital workspace */
.disease-treatment-workspace {
    color: #e7e7e7;
}

.disease-treatment-status {
    display: flex;
    align-items: center;
    min-height: 50px;
    margin-bottom: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(76, 175, 80, 0.45);
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(31, 78, 42, 0.55), rgba(22, 53, 30, 0.36));
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
}

.disease-treatment-status.is-sick {
    border-color: rgba(239, 83, 80, 0.58);
    background: linear-gradient(100deg, rgba(100, 33, 31, 0.6), rgba(61, 26, 25, 0.42));
}

.disease-treatment-status.is-loading {
    border-color: rgba(144, 164, 174, 0.45);
    background: rgba(60, 70, 75, 0.3);
}

.disease-treatment-status strong,
.disease-treatment-status span {
    display: block;
}

.disease-treatment-status strong {
    font-size: 1.08em;
}

.disease-treatment-status div > span {
    margin-top: 2px;
    color: #aeb8b0;
    font-size: 0.88em;
    line-height: 1.4;
}

.disease-treatment-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.disease-treatment-column {
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: linear-gradient(160deg, rgba(32, 34, 34, 0.92), rgba(21, 22, 22, 0.92));
    box-sizing: border-box;
}

.disease-reference-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.disease-section-heading {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
    text-align: center;
}

.disease-section-heading strong,
.disease-section-heading small {
    display: block;
}

.disease-section-heading strong {
    color: #f4f4f4;
    font-size: 1.08em;
}

.disease-section-heading small {
    margin-top: 2px;
    color: #858b89;
    font-size: 0.9em;
    line-height: 1.35;
}

.active-disease-record {
    display: block;
    padding: 8px;
    border: 1px solid rgba(76, 175, 80, 0.28);
    border-radius: 8px;
    background: rgba(12, 17, 14, 0.65);
}

.active-disease-record.is-sick {
    border-color: rgba(239, 83, 80, 0.45);
    background: rgba(50, 22, 21, 0.44);
}

.active-disease-copy {
    min-width: 0;
    text-align: center;
}

.disease-record-label {
    display: block;
    margin-bottom: 2px;
    color: #7f9185;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.active-disease-copy > strong {
    display: block;
    margin-bottom: 3px;
    color: #83d18b;
    font-size: 1.15em;
}

.active-disease-record.is-sick .active-disease-copy > strong {
    color: #ff7774;
}

.active-disease-copy > span:not(.disease-record-label) {
    color: #b5b9b7;
    font-size: 0.95em;
    line-height: 1.35;
}

.disease-record-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 5px;
}

.disease-record-meta span {
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #cfd4d1;
    font-size: 0.82em;
}

.disease-risk-explanation,
.disease-catalogue-block,
.disease-medication-directory {
    margin-top: 9px;
    padding: 10px;
    border: 1px solid rgba(255, 183, 77, 0.23);
    border-radius: 8px;
    background: rgba(70, 47, 18, 0.2);
}

.disease-reference-row .disease-catalogue-block,
.disease-reference-row .disease-medication-directory {
    margin-top: 10px;
}

.disease-risk-explanation > strong {
    display: block;
    color: #ffbd64;
    font-size: 0.98em;
    text-align: center;
}

.disease-risk-content {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.disease-risk-content > .critical-needs-row {
    grid-column: 1 / -1;
}

.disease-explanation-gif {
    width: 72px;
    height: 82px;
    object-fit: cover;
    border: 1px solid rgba(255, 183, 77, 0.25);
    border-radius: 7px;
    image-rendering: pixelated;
}

.disease-risk-copy {
    min-width: 0;
}

.disease-risk-explanation p {
    margin: 0 0 7px;
    color: #aaaead;
    font-size: 0.92em;
    line-height: 1.42;
}

.disease-risk-explanation em {
    color: #ffb74d;
    font-style: normal;
    font-weight: 700;
}

.critical-needs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.critical-needs-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 3px;
    border: 1px solid rgba(244, 67, 54, 0.24);
    border-radius: 5px;
    background: rgba(244, 67, 54, 0.08);
    color: #e5aaa8;
    font-size: 0.82em;
    text-align: center;
    white-space: nowrap;
}

.critical-need-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    object-fit: contain;
}

.disease-subheading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
}

.disease-subheading strong {
    color: #e8e8e8;
    font-size: 0.96em;
}

.disease-subheading small {
    color: #808583;
    font-size: 0.8em;
    line-height: 1.35;
    max-width: 760px;
    text-align: center;
}

.disease-severity-key {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 8px;
    line-height: 1.25;
}

.disease-severity-key.is-mild {
    border-color: rgba(102, 187, 106, 0.72);
    background: rgba(76, 175, 80, 0.14);
    color: #8bd491;
}

.disease-severity-key.is-severe {
    border-color: rgba(239, 83, 80, 0.78);
    background: rgba(239, 83, 80, 0.14);
    color: #ff8582;
}

.disease-catalogue {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.disease-guide-card {
    display: block;
    min-width: 0;
    padding: 9px 5px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
}

.disease-guide-card.is-active {
    border-color: rgba(255, 193, 7, 0.72);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.12);
}

.disease-guide-card > span {
    display: block;
    margin-bottom: 4px;
    font-size: 1.25em;
    text-align: center;
}

.disease-guide-card strong,
.disease-guide-card small {
    display: block;
}

.disease-guide-card strong {
    color: #d5d8d6;
    font-size: 0.88em;
    line-height: 1.2;
    text-align: center;
}

.disease-guide-card small {
    margin-top: 2px;
    color: #7f8783;
    font-size: 0.8em;
    line-height: 1.3;
    text-align: center;
}

.disease-guide-card.is-severe small {
    color: #e57373;
}

.disease-currency-icon {
    width: 17px;
    height: 17px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
}

.disease-treatment-plan {
    min-height: 160px;
    padding: 10px;
    border: 1px solid rgba(33, 150, 243, 0.28);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(16, 43, 61, 0.42), rgba(13, 29, 38, 0.28));
    box-sizing: border-box;
}

.disease-empty-prescription {
    display: flex;
    min-height: 138px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.disease-empty-prescription strong {
    color: #7ccc84;
    font-size: 1.05em;
}

.disease-empty-prescription p {
    max-width: 260px;
    margin: 8px 0 0;
    color: #7f8984;
    font-size: 0.95em;
    line-height: 1.5;
}

.prescription-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    justify-content: center;
    text-align: center;
}

.disease-treatment-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}

.prescription-header strong,
.prescription-header small {
    display: block;
}

.prescription-header strong {
    color: #90caf9;
    font-size: 1.06em;
}

.prescription-header small {
    margin-top: 2px;
    color: #7c8f9c;
    font-size: 0.9em;
}

.treatment-rounds {
    display: flex;
    gap: 8px;
    margin: 10px 0 13px;
}

.treatment-round-help {
    margin: -5px 0 10px;
    color: #9ba7ad;
    font-size: 0.84em;
    line-height: 1.35;
    text-align: center;
}

.treatment-round {
    flex: 1;
    padding: 8px 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    color: #727b80;
    font-size: 0.86em;
    text-align: center;
}

.treatment-round.is-complete {
    border-color: rgba(76, 175, 80, 0.55);
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.treatment-purchase-options {
    display: grid;
    gap: 9px;
}

.disease-purchase-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255, 193, 7, 0.42);
    border-radius: 6px;
    background: rgba(255, 193, 7, 0.1);
    color: #ffe082;
    cursor: pointer;
    font: inherit;
    font-size: 0.94em;
    font-weight: 700;
    transition: transform 0.15s, background 0.15s;
}

.disease-purchase-button:hover {
    background: rgba(255, 193, 7, 0.2);
    transform: translateY(-1px);
}

.disease-purchase-button.is-blue {
    border-color: rgba(66, 165, 245, 0.48);
    background: rgba(33, 150, 243, 0.12);
    color: #90caf9;
}

.disease-purchase-button.is-blue:hover {
    background: rgba(33, 150, 243, 0.22);
}

.disease-purchase-button:disabled {
    cursor: wait;
    opacity: 0.55;
    transform: none;
}

.disease-button-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.disease-medication-directory {
    border-color: rgba(33, 150, 243, 0.2);
    background: rgba(18, 50, 68, 0.14);
}

.disease-medication-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.medication-directory-row {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) 25px;
    align-items: center;
    column-gap: 7px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

.medication-directory-row.is-mild {
    border-color: rgba(102, 187, 106, 0.65);
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.12), rgba(0, 0, 0, 0.2));
}

.medication-directory-row.is-severe {
    border-color: rgba(239, 83, 80, 0.72);
    background: linear-gradient(145deg, rgba(239, 83, 80, 0.13), rgba(0, 0, 0, 0.22));
}

.disease-css-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    margin: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.disease-css-icon::before,
.disease-css-icon::after,
.disease-css-icon > span,
.disease-css-icon > span::before,
.disease-css-icon > span::after {
    position: absolute;
    box-sizing: border-box;
    content: '';
}

/* Influenza: a spiked virus particle. */
.disease-css-icon--influenza::before {
    inset: 5px;
    border: 2px solid #f4c84b;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff1a6 0 12%, #d89a18 14% 100%);
}

.disease-css-icon--influenza::after {
    top: 1px;
    left: 11px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffe37a;
    box-shadow: 0 20px #ffe37a, -10px 10px #ffe37a, 10px 10px #ffe37a, -7px 3px #ffe37a, 7px 17px #ffe37a;
}

.disease-css-icon--influenza > span {
    top: 9px;
    left: 9px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #7b560f;
    box-shadow: 5px 2px #7b560f, 2px 6px #7b560f;
}

/* Food poisoning: a contaminated bowl with rising bubbles. */
.disease-css-icon--food-poisoning::before {
    bottom: 12px;
    left: 2px;
    width: 21px;
    height: 11px;
    border: 2px solid #8ad36f;
    border-top-color: #b8f29f;
    border-radius: 3px 3px 12px 12px;
    background: linear-gradient(#6c9f2e, #315d1e);
}

.disease-css-icon--food-poisoning::after {
    top: 3px;
    left: 5px;
    width: 4px;
    height: 4px;
    border: 1px solid #b9f77c;
    border-radius: 50%;
    box-shadow: 7px -2px 0 -1px #7bd650, 13px 3px 0 -1px #b9f77c;
}

.disease-css-icon--food-poisoning > span {
    right: 1px;
    bottom: 0;
    width: 7px;
    height: 2px;
    border-radius: 2px;
    background: #d9e2d4;
    transform: rotate(-22deg);
    transform-origin: right center;
}

/* Migraine: a head profile with a pulsing pain point at the temple. */
.disease-css-icon--migraine::before {
    top: 2px;
    left: 3px;
    width: 18px;
    height: 21px;
    background: linear-gradient(145deg, #ffd08a, #b87332);
    clip-path: polygon(20% 0, 66% 0, 89% 15%, 96% 34%, 100% 46%, 82% 53%, 84% 68%, 66% 73%, 66% 100%, 27% 100%, 31% 72%, 14% 59%, 2% 36%, 7% 14%);
    filter: drop-shadow(0 0 1px #5e3416);
}

.disease-css-icon--migraine::after {
    top: 5px;
    left: 8px;
    width: 6px;
    height: 6px;
    border: 2px solid #ff4f57;
    border-radius: 50%;
    background: #ffe082;
    box-shadow: 0 0 0 2px rgba(255, 79, 87, 0.3), 0 0 6px #ff3038;
}

.disease-css-icon--migraine > span {
    top: 2px;
    right: 0;
    width: 8px;
    height: 15px;
    border-top: 2px solid #ff6b68;
    border-right: 2px solid #ff6b68;
    border-radius: 0 9px 0 0;
    transform: rotate(8deg);
}

.disease-css-icon--migraine > span::after {
    top: 5px;
    right: -3px;
    width: 4px;
    height: 2px;
    border-radius: 2px;
    background: #ff8b88;
    box-shadow: 1px 5px #ff8b88;
}

/* Toothache: a molar with a visible inflamed spot. */
.disease-css-icon--toothache::before {
    top: 1px;
    left: 3px;
    width: 19px;
    height: 23px;
    background: linear-gradient(135deg, #ffffff, #cbd4d2);
    clip-path: polygon(8% 7%, 28% 0, 50% 8%, 72% 0, 94% 8%, 100% 30%, 82% 100%, 62% 73%, 49% 100%, 29% 73%, 12% 100%, 0 30%);
}

.disease-css-icon--toothache::after {
    top: 7px;
    right: 5px;
    width: 6px;
    height: 6px;
    border: 2px solid #ff6b68;
    border-radius: 50%;
    background: #702322;
}

/* Cancer: a custom awareness ribbon. */
.disease-css-icon--cancer::before {
    top: 1px;
    left: 6px;
    width: 13px;
    height: 15px;
    border: 3px solid #ff78b3;
    border-radius: 50%;
    transform: rotate(-20deg);
}

.disease-css-icon--cancer::after {
    bottom: 0;
    left: 5px;
    width: 17px;
    height: 14px;
    background: linear-gradient(90deg, #ff559d 0 42%, transparent 43% 57%, #ff9bc7 58% 100%);
    clip-path: polygon(35% 0, 52% 10%, 75% 0, 100% 100%, 65% 78%, 50% 38%, 34% 78%, 0 100%);
}

/* Heart disease: a heart crossed by a pulse line. */
.disease-css-icon--heart-disease > span {
    top: 6px;
    left: 6px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, #ff7272, #a91e2d);
    transform: rotate(45deg);
}

.disease-css-icon--heart-disease > span::before,
.disease-css-icon--heart-disease > span::after {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: inherit;
}

.disease-css-icon--heart-disease > span::before {
    top: -7px;
    left: 0;
}

.disease-css-icon--heart-disease > span::after {
    top: 0;
    left: -7px;
}

.disease-css-icon--heart-disease::after {
    top: 11px;
    left: 2px;
    z-index: 2;
    width: 22px;
    height: 5px;
    background: #fff2f2;
    clip-path: polygon(0 42%, 28% 42%, 36% 0, 46% 100%, 56% 42%, 100% 42%, 100% 66%, 59% 66%, 46% 100%, 35% 42%, 31% 66%, 0 66%);
}

/* Brain amoeba: an irregular neural blob with internal folds. */
.disease-css-icon--brain-amoeba::before {
    top: 3px;
    left: 2px;
    width: 21px;
    height: 19px;
    border: 2px solid #f38cad;
    border-radius: 58% 42% 52% 48% / 45% 58% 42% 55%;
    background: radial-gradient(circle at 32% 35%, #ffd0df 0 11%, transparent 13%), radial-gradient(circle at 68% 65%, #c84475 0 12%, transparent 14%), #ec729d;
}

.disease-css-icon--brain-amoeba::after {
    top: 7px;
    left: 7px;
    width: 11px;
    height: 10px;
    border-top: 2px solid #8e2852;
    border-right: 2px solid #8e2852;
    border-radius: 50%;
    transform: rotate(28deg);
}

.disease-css-icon--brain-amoeba > span {
    top: 1px;
    right: 1px;
    width: 5px;
    height: 5px;
    border-radius: 60% 40% 55% 45%;
    background: #ff9cbd;
}

/* Lung disease: two damaged lung lobes and a central airway. */
.disease-css-icon--lung-disease::before,
.disease-css-icon--lung-disease::after {
    bottom: 2px;
    width: 10px;
    height: 17px;
    border: 2px solid #83c7da;
    background: linear-gradient(#4f8797, #244c59);
}

.disease-css-icon--lung-disease::before {
    left: 1px;
    border-radius: 70% 35% 48% 55%;
}

.disease-css-icon--lung-disease::after {
    right: 1px;
    border-radius: 35% 70% 55% 48%;
}

.disease-css-icon--lung-disease > span {
    top: 1px;
    left: 11px;
    z-index: 2;
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: #b7e2eb;
}

.disease-css-icon--generic::before,
.disease-css-icon--generic::after {
    border-radius: 2px;
    background: #90caf9;
}

.disease-css-icon--generic::before {
    top: 3px;
    left: 10px;
    width: 5px;
    height: 19px;
}

.disease-css-icon--generic::after {
    top: 10px;
    left: 3px;
    width: 19px;
    height: 5px;
}

.medication-directory-row > div {
    grid-column: 2;
    text-align: left;
}

.medication-directory-row.is-active {
    box-shadow: inset 0 0 0 2px rgba(66, 165, 245, 0.78), 0 0 10px rgba(33, 150, 243, 0.2);
}

.medication-directory-row strong,
.medication-directory-row small {
    display: block;
}

.medication-directory-row strong {
    color: #cfd5d2;
    font-size: 0.88em;
    line-height: 1.2;
}

.medication-directory-row small {
    margin-top: 1px;
    color: #737d78;
    font-size: 0.78em;
    line-height: 1.3;
}

.medication-directory-severity {
    font-weight: 700;
}

.medication-directory-row.is-mild .medication-directory-severity {
    color: #83d18b;
}

.medication-directory-row.is-severe .medication-directory-severity {
    color: #ff7774;
}

.medication-directory-row > small {
    grid-column: 2;
    width: fit-content;
    margin-top: 4px;
    padding: 3px 6px;
    font-size: 0.72em;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}

.medication-directory-price {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-right: auto;
    margin-left: auto;
}

.medication-directory-price span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.disease-directory-currency-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

@media (max-width: 760px) {
    .disease-treatment-columns {
        grid-template-columns: 1fr;
    }

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

    .disease-medication-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

/* Sewer 2 ambience: kitchen lamp, floor mist and animated pipe slime. */
.sewers-interior-effects {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sewers-interior-lamp-glow {
    position: absolute;
    left: 47.8%;
    top: 33%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 222, 142, 0.9) 0 5%, rgba(255, 170, 59, 0.54) 14%, rgba(219, 109, 22, 0.2) 40%, transparent 72%);
    filter: blur(1.4px);
    mix-blend-mode: screen;
    animation: sewerInteriorLampFlicker 5.3s infinite;
}

.sewers-interior-lamp-glow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 45%;
    background: rgba(255, 225, 150, 0.9);
    box-shadow: 0 0 10px 4px rgba(255, 168, 52, 0.62);
}

@keyframes sewerInteriorLampFlicker {
    0%, 5%, 9%, 27%, 31%, 56%, 61%, 79%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    6%, 29%, 58%, 81% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.93); }
    8%, 33%, 63%, 83% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.sewers-interior-mist {
    position: absolute;
    left: -9%;
    right: -9%;
    bottom: -2%;
    height: 34%;
    opacity: 0.72;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
}

.sewers-interior-mist__bank {
    position: absolute;
    display: block;
    width: 58%;
    height: 56%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(187, 194, 158, 0.24) 0%, rgba(119, 137, 100, 0.13) 48%, transparent 75%);
    filter: blur(16px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.sewers-interior-mist__bank--one {
    left: -15%;
    bottom: 0;
    animation: sewerInteriorMistOne 15s ease-in-out infinite alternate;
}

.sewers-interior-mist__bank--two {
    right: -12%;
    bottom: 12%;
    opacity: 0.68;
    animation: sewerInteriorMistTwo 19s ease-in-out -7s infinite alternate;
}

.sewers-interior-mist__bank--three {
    left: 31%;
    bottom: -8%;
    width: 46%;
    opacity: 0.5;
    animation: sewerInteriorMistThree 12s ease-in-out -3s infinite alternate;
}

@keyframes sewerInteriorMistOne {
    from { transform: translate3d(-4%, 3%, 0) scale(1); opacity: 0.42; }
    to { transform: translate3d(48%, -6%, 0) scale(1.18); opacity: 0.75; }
}

@keyframes sewerInteriorMistTwo {
    from { transform: translate3d(8%, 4%, 0) scale(1.06); opacity: 0.32; }
    to { transform: translate3d(-50%, -5%, 0) scale(1.22); opacity: 0.68; }
}

@keyframes sewerInteriorMistThree {
    from { transform: translate3d(-20%, 2%, 0) scale(0.92); }
    to { transform: translate3d(29%, -7%, 0) scale(1.18); }
}

.sewers-interior-slime-flow {
    position: absolute;
    left: 68.1%;
    top: 48.2%;
    width: 48px;
    height: 29.5%;
    transform: translateX(-50%);
    overflow: hidden;
    clip-path: polygon(18% 0, 82% 0, 91% 39%, 78% 100%, 22% 100%, 8% 40%);
    border-radius: 43% 43% 38% 38%;
    background: linear-gradient(90deg, transparent 0%, rgba(214, 200, 72, 0.22) 50%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.sewers-interior-slime-flow::before,
.sewers-interior-slime-flow::after {
    content: '';
    position: absolute;
    left: 14%;
    width: 72%;
    height: 42%;
    top: -42%;
    border-radius: 40%;
    background: linear-gradient(to bottom, transparent, rgba(236, 226, 130, 0.7), transparent);
    filter: blur(1.4px);
    animation: sewerOfferSideFlow 1.55s linear infinite;
}

.sewers-interior-slime-flow::after {
    left: 28%;
    width: 44%;
    animation-duration: 2.05s;
    animation-delay: -0.8s;
}

.sewers-interior-slime-flow__strand {
    position: absolute;
    top: -42%;
    width: 36%;
    height: 42%;
    border-radius: 40%;
    background: linear-gradient(to bottom, transparent, rgba(236, 226, 130, 0.45), transparent);
    filter: blur(1.4px);
    animation: sewerOfferSideFlow 1.8s linear infinite;
}

.sewers-interior-slime-flow__strand--one { left: 16%; }
.sewers-interior-slime-flow__strand--two { left: 46%; width: 30%; animation-delay: -0.9s; animation-duration: 2.25s; }

.sewers-interior-slime-flow__blob {
    position: absolute;
    top: -18px;
    width: 12px;
    height: 22px;
    border-radius: 50% 45% 58% 50%;
    background: radial-gradient(circle at 40% 25%, rgba(209, 196, 76, 0.48), rgba(90, 101, 23, 0.14) 70%);
    filter: blur(0.5px);
    animation: sewerInteriorSlimeBlob 3.3s ease-in infinite;
}

.sewers-interior-slime-flow__blob--one { left: 13px; }
.sewers-interior-slime-flow__blob--two { right: 9px; width: 9px; height: 17px; animation-delay: -1.8s; animation-duration: 4.1s; }

@keyframes sewerInteriorSlimeBlob {
    0% { transform: translateY(-8px) scale(0.72); opacity: 0; }
    12% { opacity: 0.8; }
    86% { opacity: 0.72; }
    100% { transform: translateY(205px) scale(1.12, 1.5); opacity: 0; }
}

.sewers-interior-slime-pool {
    position: absolute;
    left: 68.1%;
    top: 76.8%;
    width: 90px;
    height: 24px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(129, 130, 34, 0.48) 0%, rgba(86, 70, 22, 0.34) 48%, transparent 74%);
    box-shadow: inset 0 2px 4px rgba(188, 181, 71, 0.18);
    mix-blend-mode: screen;
    animation: sewerInteriorSlimePool 2.6s ease-in-out infinite;
}

.sewers-interior-slime-pool::before,
.sewers-interior-slime-pool::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 5px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(183, 180, 70, 0.44);
    border-radius: 50%;
    animation: sewerInteriorSlimeRipple 2.8s ease-out infinite;
}

.sewers-interior-slime-pool::after { animation-delay: -1.4s; }

@keyframes sewerInteriorSlimePool {
    0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.62; }
    50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.88; }
}

@keyframes sewerInteriorSlimeRipple {
    from { width: 15px; height: 4px; opacity: 0.5; }
    to { width: 76px; height: 19px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sewers-interior-lamp-glow,
    .sewers-interior-mist__bank,
    .sewers-interior-slime-flow,
    .sewers-interior-slime-flow::before,
    .sewers-interior-slime-flow::after,
    .sewers-interior-slime-flow__strand,
    .sewers-interior-slime-flow__blob,
    .sewers-interior-slime-pool,
    .sewers-interior-slime-pool::before,
    .sewers-interior-slime-pool::after {
        animation: none;
    }
}

/* Sewer 3 ambience: moving channel water, ceiling drips and wall roaches. */
.sewers-tube-effects {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sewers-tube-water {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: polygon(55.4% 66%, 69.4% 66%, 86.2% 100%, 38% 100%);
    background:
        linear-gradient(90deg, rgba(67, 57, 19, 0.18), rgba(137, 135, 42, 0.22) 46%, rgba(85, 78, 23, 0.26) 70%, rgba(47, 40, 17, 0.2)),
        repeating-linear-gradient(180deg, rgba(111, 112, 31, 0.08) 0 12px, rgba(176, 163, 52, 0.2) 16px 22px, rgba(72, 66, 19, 0.08) 27px 43px);
    background-size: 100% 100%, 100% 44px;
    mix-blend-mode: screen;
    opacity: 0.76;
    animation: sewerTubeWaterFlow 2.1s linear infinite;
}

.sewers-tube-water::before {
    content: '';
    position: absolute;
    inset: 57% 28% -15% 30%;
    background: repeating-linear-gradient(164deg, transparent 0 18px, rgba(202, 190, 73, 0.2) 21px 25px, transparent 29px 49px);
    background-size: 100% 52px;
    filter: blur(1.4px);
    animation: sewerTubeWaterSheen 3.4s linear infinite;
}

.sewers-tube-water__current {
    position: absolute;
    top: 58%;
    width: 4px;
    height: 25%;
    border-radius: 50%;
    background: linear-gradient(to bottom, transparent, rgba(215, 200, 77, 0.36), transparent);
    filter: blur(1px);
    animation: sewerTubeCurrent 2.8s linear infinite;
}

.sewers-tube-water__current--one { left: 57%; }
.sewers-tube-water__current--two { left: 69%; animation-delay: -1.45s; animation-duration: 3.3s; }

.sewers-tube-water__bubble {
    position: absolute;
    top: 64%;
    width: 7px;
    height: 3px;
    border: 1px solid rgba(192, 183, 69, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(181, 174, 68, 0.28);
    opacity: 0;
    animation: sewerTubeBubble 4.2s ease-in infinite;
}

.sewers-tube-water__bubble::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 2px;
    width: 3px;
    height: 2px;
    border: 1px solid rgba(192, 183, 69, 0.38);
    border-radius: 50%;
}

.sewers-tube-water__bubble--one { left: 58%; --bubble-drift: 28px; }
.sewers-tube-water__bubble--two { left: 63%; top: 67%; animation-delay: -1.5s; animation-duration: 5s; --bubble-drift: -22px; }
.sewers-tube-water__bubble--three { left: 69%; top: 65%; animation-delay: -3.1s; animation-duration: 4.6s; --bubble-drift: 31px; }
.sewers-tube-water__bubble--four { left: 54%; top: 69%; width: 5px; height: 2px; animation-delay: -2.2s; animation-duration: 3.8s; --bubble-drift: 18px; }
.sewers-tube-water__bubble--five { left: 66%; top: 71%; width: 10px; height: 4px; animation-delay: -4.4s; animation-duration: 5.7s; --bubble-drift: -34px; }
.sewers-tube-water__bubble--six { left: 73%; top: 68%; width: 6px; height: 3px; animation-delay: -0.8s; animation-duration: 4.1s; --bubble-drift: 20px; }
.sewers-tube-water__bubble--seven { left: 49%; top: 73%; width: 4px; height: 2px; animation-delay: -3.6s; animation-duration: 4.9s; --bubble-drift: 43px; }
.sewers-tube-water__bubble--eight { left: 61%; top: 75%; width: 8px; height: 4px; animation-delay: -5.1s; animation-duration: 6.2s; --bubble-drift: -18px; }
.sewers-tube-water__bubble--nine { left: 77%; top: 72%; width: 5px; height: 2px; animation-delay: -2.8s; animation-duration: 5.3s; --bubble-drift: -41px; }

@keyframes sewerTubeWaterFlow {
    from { background-position: 0 0, 0 -44px; }
    to { background-position: 0 0, 0 0; }
}

@keyframes sewerTubeWaterSheen {
    from { background-position: 0 -52px; }
    to { background-position: 0 0; }
}

@keyframes sewerTubeCurrent {
    from { transform: translateY(-38%) scaleY(0.7); opacity: 0; }
    18% { opacity: 0.7; }
    to { transform: translateY(145%) scaleY(1.35); opacity: 0; }
}

@keyframes sewerTubeBubble {
    0%, 12% { transform: translate(0, 0) scale(0.55); opacity: 0; }
    20% { opacity: 0.65; }
    90% { opacity: 0.4; }
    100% { transform: translate(var(--bubble-drift, 34px), 210px) scale(1.7); opacity: 0; }
}

.sewers-tube-drip {
    position: absolute;
    left: var(--drop-x);
    top: var(--drop-start);
    width: 28px;
    height: calc(var(--drop-end) - var(--drop-start));
    transform: translateX(-50%);
}

.sewers-tube-drip::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 11px;
    transform: translateX(-50%);
    border-radius: 55% 55% 68% 68%;
    background: linear-gradient(to bottom, #87983b, #5e6d20 48%, #6b421b);
    box-shadow: 0 0 3px rgba(128, 148, 45, 0.65);
    opacity: 0;
    animation: sewerTubeDripFall var(--drop-duration) cubic-bezier(.42, 0, .72, 1) var(--drop-delay) infinite;
}

.sewers-tube-drip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 7px;
    height: 3px;
    transform: translateX(-50%);
    border: 1px solid rgba(151, 170, 61, 0.74);
    border-radius: 50%;
    opacity: 0;
    animation: sewerTubeDripRipple var(--drop-duration) ease-out var(--drop-delay) infinite;
}

@keyframes sewerTubeDripFall {
    0%, 72% { top: 0; opacity: 0; transform: translateX(-50%) scaleY(0.7); }
    74% { top: 0; opacity: 0.92; transform: translateX(-50%) scaleY(1); }
    91% { top: calc(100% - 8px); opacity: 0.92; transform: translateX(-50%) scaleY(1.35); }
    92%, 100% { top: calc(100% - 4px); opacity: 0; transform: translateX(-50%) scaleY(0.3); }
}

@keyframes sewerTubeDripRipple {
    0%, 90% { width: 7px; height: 2px; opacity: 0; }
    92% { width: 8px; height: 3px; opacity: 0.82; }
    99% { width: 31px; height: 9px; opacity: 0; }
    100% { opacity: 0; }
}

.sewers-tube-roach {
    position: absolute;
    width: 9px;
    height: 5px;
    border-radius: 55% 48% 52% 55%;
    background: linear-gradient(90deg, #160d08, #4a2813 46%, #1a0e08);
    border: 1px solid rgba(6, 3, 2, 0.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    transform-origin: center;
}

.sewers-tube-roach::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 1px;
    width: 4px;
    height: 3px;
    border-radius: 50%;
    background: #211108;
    box-shadow: -3px -2px 0 -1px #120905, -3px 2px 0 -1px #120905;
}

.sewers-tube-roach::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 2px;
    height: 1px;
    background: #120905;
    box-shadow: -3px -3px 0 #120905, -3px 3px 0 #120905, 2px -3px 0 #120905, 2px 3px 0 #120905, 6px -2px 0 #120905, 6px 2px 0 #120905;
}

.sewers-tube-roach--one {
    left: 14%;
    top: 24%;
    animation: sewerTubeRoachLeft 14s steps(85, end) -2s infinite;
}

.sewers-tube-roach--two {
    right: 11%;
    top: 19%;
    animation: sewerTubeRoachRight 17s steps(95, end) -8s infinite;
}

.sewers-tube-roach--three {
    left: 31%;
    top: 43%;
    transform: scale(0.78);
    animation: sewerTubeRoachShort 11s steps(70, end) -5s infinite;
}

.sewers-tube-roach--four {
    right: 29%;
    top: 34%;
    transform: scale(0.68);
    animation: sewerTubeRoachRightShort 12.5s steps(75, end) -10s infinite;
}

@keyframes sewerTubeRoachLeft {
    0% { transform: translate(0, 0) rotate(8deg); opacity: 0; }
    5% { opacity: 0.82; }
    28% { transform: translate(58px, 18px) rotate(28deg); }
    52% { transform: translate(107px, -8px) rotate(-18deg); }
    76% { transform: translate(142px, 42px) rotate(67deg); opacity: 0.8; }
    100% { transform: translate(181px, 74px) rotate(35deg); opacity: 0; }
}

@keyframes sewerTubeRoachRight {
    0% { transform: translate(0, 0) rotate(170deg); opacity: 0; }
    7% { opacity: 0.78; }
    31% { transform: translate(-62px, 23px) rotate(194deg); }
    55% { transform: translate(-108px, 7px) rotate(151deg); }
    79% { transform: translate(-143px, 58px) rotate(218deg); opacity: 0.76; }
    100% { transform: translate(-184px, 92px) rotate(184deg); opacity: 0; }
}

@keyframes sewerTubeRoachShort {
    0% { transform: translate(0, 0) rotate(-78deg) scale(0.78); opacity: 0; }
    9% { opacity: 0.72; }
    45% { transform: translate(-21px, -54px) rotate(-108deg) scale(0.78); }
    75% { transform: translate(14px, -91px) rotate(-51deg) scale(0.78); opacity: 0.7; }
    100% { transform: translate(39px, -126px) rotate(-74deg) scale(0.78); opacity: 0; }
}

@keyframes sewerTubeRoachRightShort {
    0% { transform: translate(0, 0) rotate(84deg) scale(0.68); opacity: 0; }
    8% { opacity: 0.68; }
    42% { transform: translate(29px, 47px) rotate(61deg) scale(0.68); }
    72% { transform: translate(-5px, 83px) rotate(112deg) scale(0.68); opacity: 0.66; }
    100% { transform: translate(-31px, 122px) rotate(78deg) scale(0.68); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sewers-tube-water,
    .sewers-tube-water::before,
    .sewers-tube-water__current,
    .sewers-tube-water__bubble,
    .sewers-tube-drip::before,
    .sewers-tube-drip::after,
    .sewers-tube-roach {
        animation: none;
    }
}

/* Your Belongings: Animals */
.animals-loading,
.animals-error {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #aaa;
    text-align: center;
}

.animals-error > div {
    font-size: 38px;
}

.animals-error button {
    border: 1px solid #7e9c69;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    background: #405b36;
    cursor: pointer;
}

.animal-adoption-intro {
    display: grid;
    grid-template-columns: 290px 1fr;
    align-items: center;
    gap: 22px;
    margin-bottom: 8px;
    padding: 14px 18px;
    border: 1px solid rgba(201, 151, 64, 0.42);
    border-radius: 12px;
    background:
        radial-gradient(circle at 15% 20%, rgba(221, 166, 72, 0.14), transparent 42%),
        linear-gradient(135deg, rgba(39, 55, 36, 0.92), rgba(24, 31, 25, 0.94));
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.26);
}

.animal-adoption-intro > img {
    display: block;
    width: 100%;
    max-height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.animal-adoption-intro h3 {
    margin: 0;
    color: #f5c96a;
    font-size: 1.25em;
}

.animal-adoption-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 7px;
    text-align: center;
}

.animal-adoption-intro p {
    margin: 5px 0;
    color: #ddd;
    line-height: 1.45;
    font-size: 0.88em;
}

.animal-ready {
    color: #8fd27c;
    font-weight: bold;
}

.animal-locked {
    color: #ffad70;
    font-weight: bold;
}

.animal-adoption-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.animal-adoption-guide-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.animal-adoption-card {
    position: relative;
    min-width: 0;
    padding: 9px 11px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(126, 156, 105, 0.65);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(50, 64, 47, 0.94), rgba(31, 38, 30, 0.96));
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.animal-adoption-card:hover {
    transform: translateY(-3px);
    border-color: #d6aa57;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34);
}

.animal-adoption-card img {
    width: 100%;
    height: 118px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.42));
}

/* Cats: same image slot height as dogs (keeps name + button aligned), sprite slightly smaller, bottom-aligned with dogs */
#inventoryAnimalsContent .animal-adoption-card.animal-species-cat img {
    height: 118px;
    padding: 16px 14px 0;
    box-sizing: border-box;
    object-fit: contain;
    object-position: bottom center;
}

.animal-adoption-card h4 {
    min-height: 35px;
    margin: 5px 0 9px;
    color: #f2ead9;
    font-size: 0.91em;
}

.animal-card-species {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    padding: 3px 7px;
    border-radius: 999px;
    color: #d5e9ce;
    background: rgba(29, 45, 27, 0.88);
    font-size: 0.65em;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.animal-adoption-card button {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d0a24d;
    border-radius: 6px;
    color: #20190d;
    background: linear-gradient(#f5ca6e, #d59b36);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-weight: bold;
}

.animal-adoption-card button:disabled,
.animal-adoption-card .animal-adoption-unavailable-button {
    border-color: #626262;
    color: #aaa;
    background: #404040;
    box-shadow: none;
}

.animal-adoption-card .animal-adoption-unavailable-button {
    cursor: pointer;
}

.animal-adoption-confirm {
    width: min(430px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid rgba(213, 155, 54, 0.7);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.animal-name-label {
    display: block;
    margin: 16px 0 6px;
    color: #f5c96a;
    font-size: 0.85em;
    font-weight: bold;
    text-align: left;
}

.animal-name-input {
    width: 100%;
    padding: 10px 11px;
    box-sizing: border-box;
    border: 1px solid #8e784f;
    border-radius: 6px;
    outline: none;
    color: #fff;
    background: rgba(16, 19, 15, 0.92);
    font: inherit;
}

.animal-name-input:focus {
    border-color: #e0b85d;
    box-shadow: 0 0 0 2px rgba(224, 184, 93, 0.2);
}

.animal-name-error {
    min-height: 18px;
    margin-top: 5px;
    color: #ff8b82;
    font-size: 0.72em;
    text-align: left;
}

.character-animal-companion,
.view-player-animal-companion,
.official-animal-companion {
    position: absolute;
    z-index: 7;
    pointer-events: none;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.animal-companion-clickable {
    pointer-events: auto;
    cursor: pointer;
    outline: none;
}

.animal-companion-clickable:focus-visible img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.72)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
}

.character-animal-companion {
    left: 61.5%;
    bottom: 11.3%;
    width: auto;
    height: 136px;
}

.view-player-animal-companion,
.official-animal-companion {
    left: 61.5%;
    bottom: 11.3%;
    width: auto;
}

.view-player-animal-companion {
    height: 147px;
}

.official-animal-companion {
    height: 155px;
}

.character-animal-companion.animal-species-dog {
    height: 150px;
}

.view-player-animal-companion.animal-species-dog {
    height: 163px;
}

.official-animal-companion.animal-species-dog {
    height: 171px;
}

.character-animal-companion.animal-species-cat {
    height: 136px;
}

.view-player-animal-companion.animal-species-cat {
    height: 147px;
}

.official-animal-companion.animal-species-cat {
    height: 155px;
}

.character-child-companions,
.view-player-child-companions,
.official-child-companions {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: block;
    pointer-events: none;
}

.child-companions-clickable {
    outline: none;
}

#characterChildCompanion .child-companion {
    pointer-events: auto;
    cursor: pointer;
}

#characterChildCompanion .child-companion img {
    pointer-events: auto;
}

.child-parenting-alert {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 28px;
    height: 34px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 9;
}

.child-parenting-alert i {
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -5px;
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    color: #ff2d2d;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.95), 0 1px 1px #4a0000;
    opacity: 0;
    animation: childParentingAlertFloat 1.7s ease-out infinite;
}

.child-parenting-alert i:nth-child(1) {
    animation-name: childParentingAlertFloatLeft;
}

.child-parenting-alert i:nth-child(2) {
    animation-delay: 0.55s;
}

.child-parenting-alert i:nth-child(3) {
    animation-name: childParentingAlertFloatRight;
    animation-delay: 1.1s;
}

@keyframes childParentingAlertFloat {
    0% { transform: translate(0, 0) scale(0.75); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(0, -22px) scale(1.08); opacity: 0; }
}

@keyframes childParentingAlertFloatLeft {
    0% { transform: translate(0, 0) scale(0.75); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(-11px, -22px) scale(1.08); opacity: 0; }
}

@keyframes childParentingAlertFloatRight {
    0% { transform: translate(0, 0) scale(0.75); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(11px, -22px) scale(1.08); opacity: 0; }
}

.child-companion {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}

.child-companion.slot-left {
    left: 3%;
    bottom: 11%;
}

.child-companion.slot-center {
    left: 15%;
    bottom: 11%;
}

.child-companion.slot-right {
    left: 27%;
    bottom: 11%;
}

.character-arrange-button {
    padding: 1px 7px;
    border: 2px solid #ff0000;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.character-arrange-button:hover {
    background: #cc0000;
}

.character-arrange-button.is-save {
    background: #cc0000;
}

.character-arrange-button.is-cancel {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.45);
}

.character-arrange-hint {
    display: none;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 53;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffd54f;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
}

.character-arrange-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    pointer-events: none;
    cursor: grab;
    background: rgba(0, 0, 0, 0.18);
}

#characterDisplay.is-arranging-companions {
    outline: 2px solid #ffd54f;
}

#characterDisplay.is-arranging-companions .character-arrange-overlay,
#characterDisplay.is-arranging-companions .character-arrange-hint {
    display: block;
}

#characterDisplay.is-arranging-companions .character-animal-companion,
#characterDisplay.is-arranging-companions .child-companion {
    pointer-events: auto !important;
    cursor: grab;
    z-index: 45;
}

#characterDisplay.is-arranging-companions .character-animal-companion img,
#characterDisplay.is-arranging-companions .child-companion img {
    pointer-events: auto !important;
}

#characterDisplay.is-arranging-companions .character-animal-companion.is-dragging,
#characterDisplay.is-arranging-companions .child-companion.is-dragging {
    z-index: 46 !important;
    cursor: grabbing;
}

#characterDisplay.is-arranging-companions.is-card-companion-dragging .character-arrange-overlay,
body.is-card-companion-dragging .character-arrange-overlay {
    cursor: grabbing;
}

.child-companion.is-teen {
    width: auto;
    height: 188px;
    z-index: 1;
}

/* Public cards are taller (330 / 350) than the own card (300). Scale sprites by card height, not player size. */
.view-player-child-companions .child-companion.is-teen {
    height: 207px;
}

.official-child-companions .child-companion.is-teen {
    height: 219px;
}

.child-companion.is-teen.is-girl .child-companion-name {
    bottom: calc(100% - 11px);
}

.child-companion.is-toddler {
    width: auto;
    height: 108px;
    z-index: 2;
}

.view-player-child-companions .child-companion.is-toddler {
    height: 119px;
}

.official-child-companions .child-companion.is-toddler {
    height: 126px;
}

.child-companion.is-toddler .child-companion-name {
    bottom: calc(100% - 3px);
}

.child-companion.is-baby {
    width: auto;
    height: 72px;
    z-index: 3;
}

.view-player-child-companions .child-companion.is-baby {
    height: 79px;
}

.official-child-companions .child-companion.is-baby {
    height: 84px;
}

.child-companion.is-baby .child-companion-name {
    left: 70%;
    bottom: calc(100% - 1px);
    max-width: 52px;
    padding: 0 3px;
    font-size: 8px;
    line-height: 10px;
}

.child-companion-name {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    z-index: 6;
    display: block;
    max-width: 72px;
    padding: 1px 5px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.9);
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.child-companion.is-girl .child-companion-name {
    color: #ff69b4;
}

.child-companion.is-boy .child-companion-name {
    color: #90caf9;
}

.child-companion img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
    pointer-events: none;
    -webkit-user-drag: none;
}

.character-animal-companion img,
.view-player-animal-companion img,
.official-animal-companion img {
    display: block;
    position: relative;
    z-index: 2;
    width: auto;
    height: calc(100% - 22px);
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
    pointer-events: auto;
    -webkit-user-drag: none;
}

.character-animal-companion .animal-companion-name,
.view-player-animal-companion .animal-companion-name,
.official-animal-companion .animal-companion-name {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: none;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    text-shadow: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.animal-companion-labels {
    position: relative;
    z-index: 4;
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: center;
}

.animal-type-golden-retriever .animal-companion-name {
    transform: translateY(20px);
}

.animal-companion-friendship {
    position: absolute;
    z-index: 5;
    top: 82px;
    left: 50%;
    right: auto;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    color: #fff;
    background: rgba(24, 24, 24, 0.82);
    font-size: 8px;
    font-style: normal;
    font-weight: bold;
    line-height: 11px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.48);
    opacity: 0;
    transform: translate(-50%, 3px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.animal-guide-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.animal-guide-button {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    font: inherit;
    font-size: 0.9em;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
}

.animal-guide-button:hover,
.animal-guide-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.3);
}

.animal-guide-needs-panel {
    line-height: 1.35;
}

.animal-guide-needs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.animal-guide-need-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(129, 199, 132, 0.34);
    border-radius: 8px;
    background: rgba(13, 25, 15, 0.52);
}

.animal-guide-need-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #fff;
    font-weight: 800;
}

.animal-guide-need-title img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-guide-need-card > strong,
.animal-guide-need-card > span,
.animal-guide-need-card > small {
    display: block;
}

.animal-guide-need-card > strong {
    margin-bottom: 5px;
    color: #a5d6a7;
    font-size: 0.86em;
}

.animal-guide-need-card > span {
    color: #ddd;
    font-size: 0.78em;
}

.animal-guide-need-card > small {
    margin-top: 6px;
    color: #b7c7b5;
    font-size: 0.7em;
}

.animal-guide-health-card {
    border-color: rgba(239, 83, 80, 0.38);
    background: rgba(57, 20, 20, 0.38);
}

.animal-guide-health-card > strong {
    color: #ffb0ad;
}

.animal-guide-need-scale {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.animal-guide-need-scale span {
    padding: 7px 8px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.74em;
}

.animal-guide-need-scale span strong {
    margin-right: 4px;
}

.animal-guide-need-scale .is-good {
    color: #c8edca;
    background: rgba(76, 175, 80, 0.22);
}

.animal-guide-need-scale .is-warning {
    color: #ffe0a1;
    background: rgba(255, 152, 0, 0.22);
}

.animal-guide-need-scale .is-urgent {
    color: #ffc0bd;
    background: rgba(239, 83, 80, 0.22);
}

.animal-guide-care-explainer {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.animal-guide-care-heading {
    margin-bottom: 8px;
    color: #fff;
    font-size: 0.82em;
    font-weight: 800;
    text-align: center;
}

.animal-guide-care-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.animal-guide-care-grid article {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.2);
}

.animal-guide-care-grid article > strong {
    display: block;
    margin-bottom: 4px;
    color: #f2ce83;
    font-size: 0.78em;
}

.animal-guide-care-grid p {
    margin: 0;
    color: #d5ddd4;
    font-size: 0.72em;
    line-height: 1.45;
}

.animal-guide-care-grid small {
    display: block;
    margin-top: 5px;
    color: #a5d6a7;
    font-size: 0.66em;
    line-height: 1.35;
}

.animal-guide-glow-preview {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(244, 143, 177, 0.25);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.2);
}

.animal-guide-glow-heading {
    margin-bottom: 10px;
    color: #fff;
    font-size: 0.82em;
    font-weight: 800;
    text-align: center;
}

.animal-guide-glow-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.animal-guide-glow-sample {
    display: flex;
    position: relative;
    min-width: 0;
    min-height: 116px;
    padding: 8px 4px 7px;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: rgba(16, 22, 17, 0.72);
    text-align: center;
}

.animal-guide-glow-sample img {
    width: auto;
    height: 74px;
    margin: auto 0 4px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-guide-glow-sample strong,
.animal-guide-glow-sample > span {
    display: block;
    line-height: 1.2;
}

.animal-guide-glow-sample strong {
    color: #fff;
    font-size: 0.66em;
}

.animal-guide-glow-sample > span {
    margin-top: 2px;
    font-size: 0.62em;
    font-weight: 700;
}

.animal-guide-glow-sample.animal-friendship-level-1 > span { color: #d7d7d7; }
.animal-guide-glow-sample.animal-friendship-level-2 > span { color: #fff0a8; }
.animal-guide-glow-sample.animal-friendship-level-3 > span { color: #d8f7dd; }
.animal-guide-glow-sample.animal-friendship-level-4 > span { color: #dcecff; }
.animal-guide-glow-sample.animal-friendship-level-5 > span { color: #fff0c2; }

.animal-visibility-button {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 187, 106, 0.56);
    border-radius: 4px;
    color: #fff;
    background: rgba(67, 110, 61, 0.62);
    cursor: pointer;
    font: inherit;
    font-size: 1em;
}

.animal-visibility-button.is-hidden {
    border-color: rgba(239, 83, 80, 0.56);
    background: rgba(120, 48, 44, 0.62);
}

.animal-visibility-button.is-hidden::after {
    position: absolute;
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: #ffd8d6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
    content: '';
    pointer-events: none;
    transform: rotate(-45deg);
}

.animal-visibility-button:hover,
.animal-visibility-button:focus-visible {
    filter: brightness(1.15);
}

.animal-visibility-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.animal-status-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.character-animal-companion:has(img:hover) .animal-companion-friendship,
.view-player-animal-companion:has(img:hover) .animal-companion-friendship,
.official-animal-companion:has(img:hover) .animal-companion-friendship {
    opacity: 1;
    transform: translate(-50%, 0);
}

.animal-companion-effect {
    display: none;
    position: absolute;
    left: 18%;
    right: 18%;
    top: 26px;
    bottom: 2px;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.animal-friendship-sparkle-host {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.animal-guide-glow-sample .animal-friendship-sparkle-host {
    display: inline-flex;
    width: auto;
    height: 74px;
    margin: auto auto 4px;
    padding: 2px 8px 6px;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
}

.animal-guide-glow-sample .animal-friendship-sparkle-host img,
.animal-public-portrait .animal-friendship-sparkle-host img {
    position: relative;
    z-index: 2;
}

.animal-guide-glow-sample .animal-friendship-sparkle-host img {
    display: block;
    margin: 0 auto;
}

.animal-public-portrait .animal-friendship-sparkle-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.animal-public-portrait .animal-friendship-sparkle-1 { top: 14%; left: 16%; }
.animal-public-portrait .animal-friendship-sparkle-2 { top: 6%; left: 50%; }
.animal-public-portrait .animal-friendship-sparkle-3 { top: 16%; left: 84%; }
.animal-public-portrait .animal-friendship-sparkle-4 { top: 44%; left: 12%; }
.animal-public-portrait .animal-friendship-sparkle-5 { top: 52%; left: 88%; }
.animal-public-portrait .animal-friendship-sparkle-6 { top: 90%; left: 18%; }
.animal-public-portrait .animal-friendship-sparkle-7 { top: 93%; left: 82%; }
.animal-public-portrait .animal-friendship-sparkle-8 { top: 93%; left: 50%; }

.animal-pet-zone .animal-friendship-sparkle-host {
    position: absolute;
    left: 18%;
    right: 18%;
    top: 6%;
    height: auto;
    bottom: 6%;
    z-index: 1;
}

.animal-friendship-level-5 .animal-companion-effect {
    display: block;
}

.animal-friendship-sparkle {
    position: absolute;
    z-index: 1;
    width: 7px;
    height: 7px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: animalFriendshipSparkleTwinkle 1.9s ease-in-out infinite;
    will-change: transform, opacity;
}

.animal-friendship-sparkle--star::before,
.animal-friendship-sparkle--star::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 1px;
    box-shadow: 0 0 4px #fff, 0 0 8px rgba(255, 230, 140, 0.95), 0 0 14px rgba(255, 210, 80, 0.7);
}

.animal-friendship-sparkle--star::before {
    width: 2px;
    height: 100%;
    transform: translate(-50%, -50%);
}

.animal-friendship-sparkle--star::after {
    width: 100%;
    height: 2px;
    transform: translate(-50%, -50%);
}

.animal-friendship-sparkle--dot {
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #fff4c2 38%, rgba(255, 215, 80, 0.18) 68%, transparent 100%);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 214, 80, 0.8);
}

.animal-friendship-sparkle-1 { top: 10%; left: 4%; width: 9px; height: 9px; animation-duration: 1.7s; animation-delay: -1.15s; }
.animal-friendship-sparkle-2 { top: 2%; left: 50%; animation-duration: 2.1s; animation-delay: -0.35s; }
.animal-friendship-sparkle-3 { top: 12%; left: 96%; width: 8px; height: 8px; animation-duration: 1.85s; animation-delay: -1.05s; }
.animal-friendship-sparkle-4 { top: 42%; left: 0%; animation-duration: 2.3s; animation-delay: -1.7s; }
.animal-friendship-sparkle-5 { top: 50%; left: 100%; width: 9px; height: 9px; animation-duration: 1.95s; animation-delay: -0.55s; }
.animal-friendship-sparkle-6 { top: 92%; left: 8%; animation-duration: 2.15s; animation-delay: -1.45s; }
.animal-friendship-sparkle-7 { top: 94%; left: 92%; width: 8px; height: 8px; animation-duration: 1.8s; animation-delay: -0.2s; }
.animal-friendship-sparkle-8 { top: 94%; left: 50%; animation-duration: 2.05s; animation-delay: -0.9s; }

.animal-guide-glow-sample .animal-friendship-sparkle {
    width: 5px;
    height: 5px;
}

.animal-guide-glow-sample .animal-friendship-sparkle-1 {
    top: 10%;
    left: 6%;
    width: 6px;
    height: 6px;
}

.animal-guide-glow-sample .animal-friendship-sparkle-2 { top: 2%; left: 50%; }
.animal-guide-glow-sample .animal-friendship-sparkle-3 { top: 12%; left: 94%; }
.animal-guide-glow-sample .animal-friendship-sparkle-4 { top: 42%; left: 2%; }
.animal-guide-glow-sample .animal-friendship-sparkle-5 {
    top: 50%;
    left: 98%;
    width: 6px;
    height: 6px;
}
.animal-guide-glow-sample .animal-friendship-sparkle-6 { top: 90%; left: 10%; }
.animal-guide-glow-sample .animal-friendship-sparkle-7 { top: 94%; left: 90%; }
.animal-guide-glow-sample .animal-friendship-sparkle-8 { top: 94%; left: 50%; }

.animal-pet-zone .animal-friendship-sparkle,
.animal-public-portrait .animal-friendship-sparkle {
    width: 10px;
    height: 10px;
}

.animal-pet-zone .animal-friendship-sparkle-1,
.animal-pet-zone .animal-friendship-sparkle-5,
.animal-public-portrait .animal-friendship-sparkle-1,
.animal-public-portrait .animal-friendship-sparkle-5 {
    width: 12px;
    height: 12px;
}

@keyframes animalFriendshipSparkleTwinkle {
    0%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    16% { transform: translate(-50%, -50%) scale(1.2) rotate(18deg); opacity: 1; }
    48% { transform: translate(-50%, -50%) scale(0.85) rotate(42deg); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; }
}

.animal-friendship-level-1 .animal-companion-friendship {
    color: #d7d7d7;
    border: 1px solid #777;
    box-shadow: 0 0 6px rgba(190, 190, 190, 0.72), 0 0 12px rgba(150, 150, 150, 0.4);
}

.animal-friendship-level-1 img {
    filter: grayscale(0.12) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 5px rgba(195, 195, 195, 0.82)) drop-shadow(0 0 11px rgba(165, 165, 165, 0.58)) drop-shadow(0 0 18px rgba(210, 210, 210, 0.26));
}

.animal-friendship-level-2 .animal-companion-friendship {
    color: #fff0a8;
    border: 1px solid #c5a74d;
    box-shadow: 0 0 6px rgba(255, 218, 92, 0.78), 0 0 12px rgba(235, 188, 45, 0.44);
}

.animal-friendship-level-2 img {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 5px rgba(255, 225, 105, 0.86)) drop-shadow(0 0 11px rgba(255, 200, 54, 0.6)) drop-shadow(0 0 18px rgba(255, 232, 135, 0.28));
}

.animal-friendship-level-3 .animal-companion-friendship {
    color: #d8f7dd;
    border: 1px solid #65c97b;
    box-shadow: 0 0 6px rgba(101, 215, 126, 0.8), 0 0 12px rgba(54, 177, 83, 0.48);
}

.animal-friendship-level-3 img {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 5px rgba(105, 225, 132, 0.88)) drop-shadow(0 0 11px rgba(55, 190, 87, 0.62)) drop-shadow(0 0 18px rgba(143, 238, 162, 0.3));
}

.animal-friendship-level-4 .animal-companion-friendship {
    color: #dcecff;
    border: 1px solid #72aee6;
    box-shadow: 0 0 6px rgba(97, 174, 238, 0.8), 0 0 12px rgba(53, 137, 226, 0.46);
}

.animal-friendship-level-4 img {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 5px rgba(105, 185, 255, 0.88)) drop-shadow(0 0 11px rgba(53, 144, 239, 0.62)) drop-shadow(0 0 18px rgba(142, 205, 255, 0.3));
}

/* Keep friendship colors on player cards, but hug the animal silhouette closely. */
:is(.character-animal-companion, .view-player-animal-companion, .official-animal-companion).animal-friendship-level-1 img {
    filter: grayscale(0.12) drop-shadow(0 0 3px rgba(195, 195, 195, 0.86)) drop-shadow(0 0 6px rgba(165, 165, 165, 0.6)) drop-shadow(0 0 10px rgba(210, 210, 210, 0.3)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
}

:is(.character-animal-companion, .view-player-animal-companion, .official-animal-companion).animal-friendship-level-2 img {
    filter: drop-shadow(0 0 3px rgba(255, 225, 105, 0.9)) drop-shadow(0 0 6px rgba(255, 200, 54, 0.64)) drop-shadow(0 0 10px rgba(255, 232, 135, 0.32)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
}

:is(.character-animal-companion, .view-player-animal-companion, .official-animal-companion).animal-friendship-level-3 img {
    filter: drop-shadow(0 0 3px rgba(105, 225, 132, 0.92)) drop-shadow(0 0 6px rgba(55, 190, 87, 0.66)) drop-shadow(0 0 10px rgba(143, 238, 162, 0.34)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
}

:is(.character-animal-companion, .view-player-animal-companion, .official-animal-companion).animal-friendship-level-4 img {
    filter: drop-shadow(0 0 3px rgba(105, 185, 255, 0.92)) drop-shadow(0 0 6px rgba(53, 144, 239, 0.66)) drop-shadow(0 0 10px rgba(142, 205, 255, 0.34)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58));
}

.animal-friendship-level-5 .animal-companion-friendship {
    color: #fff6d2;
    border: 1px solid #e6c35c;
    background: rgba(42, 32, 10, 0.9);
    box-shadow: 0 0 6px rgba(255, 220, 120, 0.75), 0 0 13px rgba(255, 196, 60, 0.4);
}

.animal-info-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw / var(--game-zoom, 1));
    height: calc(100vh / var(--game-zoom, 1));
    z-index: 20000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.72);
}

.animal-info-dialog {
    width: min(720px, calc(100vw - 48px));
    overflow: hidden;
    border: 2px solid #6d7c60;
    border-radius: 14px;
    color: #f4f4f4;
    background: linear-gradient(145deg, #263124, #171d18);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.72), 0 0 28px rgba(119, 151, 91, 0.18);
}

.animal-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: linear-gradient(to right, #4d612f, #2f3d25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.animal-info-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.animal-info-header img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-info-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2em;
}

.animal-info-header button {
    min-width: 34px;
    padding: 2px 8px !important;
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.6em;
    line-height: 1;
    cursor: pointer;
}

.animal-info-content {
    min-height: 300px;
    padding: 20px;
    box-sizing: border-box;
}

.animal-public-loading,
.animal-public-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #d8dfd1;
    text-align: center;
}

.animal-public-loading img,
.animal-public-empty img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-public-empty h3,
.animal-public-empty p {
    margin: 0;
}

.animal-public-profile {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 20px;
}

.animal-public-portrait,
.animal-public-status {
    border: 1px solid rgba(154, 183, 128, 0.38);
    border-radius: 11px;
    background: rgba(12, 17, 13, 0.48);
}

.animal-public-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

.animal-public-owner {
    color: #b8c6ac;
    font-size: 0.76em;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.animal-public-portrait h3 {
    margin: 5px 0 4px;
    color: #fff;
    font-size: 1.25em;
}

.animal-public-portrait img {
    width: 150px;
    height: 205px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-public-portrait p {
    margin: 4px 0 0;
    color: #c3cdbd;
    font-size: 0.88em;
}

.animal-public-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: 18px;
}

.animal-public-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.animal-public-summary > div {
    padding: 10px;
    border: 1px solid rgba(224, 184, 93, 0.32);
    border-radius: 8px;
    background: rgba(18, 22, 17, 0.68);
}

.animal-public-summary small,
.animal-public-summary strong {
    display: block;
}

.animal-public-summary small {
    margin-bottom: 4px;
    color: #b7bdaf;
    font-size: 0.67em;
    letter-spacing: 0.45px;
}

.animal-public-summary strong {
    color: #fff;
    font-size: 0.9em;
}

.animal-public-metric > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.animal-public-metric span,
.animal-public-metric strong {
    color: #fff;
    font-weight: 800;
}

.animal-public-metric span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.animal-public-metric img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-public-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
}

.animal-public-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(to right, #4f9d5d, #86cd71);
}

.animal-public-track.health span {
    background: linear-gradient(to right, #e6a52e, #f2d65e);
}

.animal-public-readonly {
    margin: 0;
    color: #aeb9a8;
    font-size: 0.8em;
    text-align: center;
}

.animal-public-readonly {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 720px) {
    .animal-public-profile {
        grid-template-columns: 1fr;
    }

    .animal-public-portrait img {
        height: 145px;
    }
}

.animal-profile {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 20px;
    min-height: 430px;
}

.animal-profile-portrait,
.animal-profile-status {
    border: 1px solid rgba(126, 156, 105, 0.48);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(45, 57, 42, 0.96), rgba(27, 34, 27, 0.98));
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.28);
}

.animal-profile-portrait {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
}

.animal-profile-portrait img {
    width: 225px;
    height: 270px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.48));
}

.animal-pet-zone {
    position: relative;
    width: 225px;
    height: 314px;
}

.animal-pet-button {
    display: flex;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    outline: none;
    color: #e7c77e;
    background: transparent !important;
    box-shadow: none !important;
    cursor: none !important;
    font: inherit;
    margin: 0;
}

.animal-pet-button .animal-pet-sprite {
    width: 225px;
    height: 270px;
    transition: transform 140ms ease, filter 140ms ease;
}

/* Animals tab only: keep portrait zone size, draw cats a bit smaller inside, bottom-aligned */
#inventoryAnimalsContent .animal-profile.animal-species-cat .animal-pet-button .animal-pet-sprite {
    width: 225px;
    height: 270px;
    padding: 40px 22px 0;
    box-sizing: border-box;
    object-fit: contain;
    object-position: bottom center;
}

.animal-pet-button:hover,
.animal-pet-button:focus-visible,
.animal-pet-button:active {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.animal-pet-button:hover .animal-pet-sprite,
.animal-pet-button:focus-visible .animal-pet-sprite {
    transform: scale(1.035);
    filter: drop-shadow(0 0 8px rgba(255, 142, 174, 0.58)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45));
}

.animal-pet-button > span {
    margin-top: 14px;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.4px;
}

.animal-pet-button .animal-pet-sprite.is-being-petted {
    animation: animalPetBounce 520ms ease;
}

.animal-pet-hearts {
    position: absolute;
    inset: 18px 0 34px;
    pointer-events: none;
    z-index: 5;
}

.animal-pet-hearts span {
    position: absolute;
    top: var(--heart-top);
    left: var(--heart-left);
    color: #ff5e88;
    font-size: var(--heart-size);
    opacity: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 94, 136, 0.75);
    animation: animalHeartFloat 0.92s ease-out var(--heart-delay) forwards;
}

.animal-hand-cursor {
    position: absolute;
    z-index: 8;
    display: block;
    width: 52px !important;
    height: 35px !important;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transform: translate(-8px, -10px);
    transition: opacity 70ms ease;
}

.animal-hand-cursor.is-visible {
    opacity: 1;
}

.animal-family-label {
    color: #d4a94f;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 1.3px;
}

.animal-status-heading > div:first-child > span {
    display: block;
    color: #d4a94f;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 1.3px;
    white-space: nowrap;
}

.animal-profile-portrait .animal-family-label {
    color: #fff;
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.animal-profile-portrait h3 {
    margin: 5px 0 2px;
    color: #f4d287;
    font-size: 1.28em;
}

.animal-profile-portrait p {
    margin: 0;
    color: #a9baa3;
    font-size: 0.83em;
}

.animal-profile-portrait .animal-profile-type {
    margin-top: 32px;
}

.animal-profile-status {
    min-width: 0;
    padding: 20px 20px 8px;
}

.animal-status-heading {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.animal-status-heading .animal-guide-button {
    padding-right: 9px;
    padding-left: 9px;
}

.animal-status-heading h3 {
    margin: 3px 0 0;
    color: #f0eee8;
    font-size: 1.25em;
}

.animal-age-card {
    box-sizing: border-box;
    min-width: 165px;
    padding: 8px 11px;
    border: 1px solid rgba(213, 155, 54, 0.36);
    border-radius: 8px;
    text-align: right;
    background: rgba(0, 0, 0, 0.22);
}

.animal-age-card small {
    display: block;
    margin-bottom: 3px;
    color: #a79d89;
    font-size: 0.61em;
    letter-spacing: 0.7px;
}

.animal-age-card strong {
    color: #f2c66c;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.animal-happiness-card {
    margin-bottom: 15px;
    padding: 14px;
    border: 1px solid rgba(255, 193, 7, 0.32);
    border-radius: 9px;
    background: rgba(88, 68, 24, 0.18);
}

.animal-friendship-card {
    margin-bottom: 15px;
    padding: 14px;
    border: 1px solid rgba(244, 143, 177, 0.4);
    border-radius: 9px;
    background: rgba(123, 41, 74, 0.18);
}

.animal-friendship-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.animal-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff !important;
    font-weight: 800;
}

.animal-metric-label img {
    display: block;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-friendship-heading strong {
    color: #ffb5cc;
    font-size: 0.88em;
}

.animal-friendship-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
}

.animal-friendship-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d94b78, #ff9fbd);
    transition: width 260ms ease;
}

.animal-friendship-card small {
    display: block;
    margin-top: 7px;
    color: #cdb0bb;
    font-size: 0.69em;
}

@keyframes animalPetBounce {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.07) rotate(-1deg); }
    70% { transform: scale(1.035) rotate(1deg); }
}

@keyframes animalHeartFloat {
    0% { transform: translate(-50%, 8px) scale(0.35); opacity: 0; }
    16% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--heart-drift-x)), -72px) scale(1.12); opacity: 0; }
}

.animal-happiness-card > div:first-child,
.animal-need-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.animal-happiness-card strong {
    color: #ffd15d;
}

.animal-health-heading-left {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.animal-death-countdown {
    padding: 3px 7px;
    border: 1px solid rgba(239, 83, 80, 0.65);
    border-radius: 4px;
    color: #ff9b98;
    background: rgba(105, 20, 20, 0.42);
    font-size: 0.68em;
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.animal-happiness-card small {
    display: block;
    margin-top: 7px;
    color: #aaa18f;
    font-size: 0.69em;
}

.animal-happiness-track,
.animal-need-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
}

.animal-happiness-track span,
.animal-need-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 250ms ease;
}

.animal-happiness-track span {
    background: linear-gradient(90deg, #f0a62f, #ffe37b);
}

.animal-needs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.animal-need-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(109, 155, 91, 0.38);
    border-radius: 8px;
    background: rgba(65, 93, 54, 0.17);
}

.animal-need-card.needs-attention {
    border-color: rgba(239, 83, 80, 0.65);
    background: rgba(130, 44, 39, 0.2);
}

.animal-status-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
}

.animal-status-icon img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}

.animal-need-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 4px;
    object-fit: contain;
    vertical-align: -4px;
    image-rendering: pixelated;
}

.animal-status-icon img[src$="welkicon.png"],
.animal-need-icon[src$="welkicon.png"],
.animal-status-icon img[src$="playicon.svg"],
.animal-need-icon[src$="playicon.svg"] {
    filter: brightness(1.75) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

.animal-need-card small,
.animal-need-card strong {
    display: block;
}

.animal-need-card small {
    margin-bottom: 3px;
    color: #96aa8e;
    font-size: 0.62em;
    letter-spacing: 0.6px;
}

.animal-need-card strong {
    color: #e9e9e3;
    font-size: 0.8em;
}

.animal-need-card > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.animal-care-button {
    min-width: 74px;
    padding: 5px 8px;
    border: 1px solid rgba(213, 155, 54, 0.7);
    border-radius: 6px;
    color: #251b0c;
    background: linear-gradient(#f5ca6e, #d59b36);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    font: inherit;
    font-size: 0.68em;
    font-weight: bold;
    line-height: 1.1;
}

.animal-care-button.walk,
.animal-care-button.play {
    width: 74px;
    border-color: rgba(102, 187, 106, 0.75);
    color: #eaf8e7;
    background: linear-gradient(#4f8748, #386634);
}

.animal-walk-power {
    display: block;
    margin-top: 3px;
    color: #bde8b8;
    font-size: 0.68em;
    font-weight: 700;
    white-space: nowrap;
}

.animal-feed-cost {
    display: block;
    margin-top: 3px;
    color: #f2ce83;
    font-size: 0.68em;
    font-weight: 700;
    white-space: nowrap;
}

.animal-care-button small {
    display: block;
    margin: 2px 0 0;
    color: inherit;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.72;
}

.animal-care-button:hover:not(:disabled),
.animal-care-button:focus-visible:not(:disabled) {
    filter: brightness(1.08);
}

.animal-care-button:disabled {
    border-color: #596159;
    color: #9ca29a;
    background: #3b403a;
    box-shadow: none;
    cursor: not-allowed;
}

.animal-need {
    margin-top: 10px;
    color: #d9ded5;
    font-size: 0.8em;
}

.animal-need-heading strong {
    color: #cbd7c5;
    font-size: 0.9em;
}

.animal-return-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239, 83, 80, 0.45);
    border-radius: 6px;
    color: #ffd0cc;
    background: rgba(18, 22, 17, 0.82);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    font: inherit;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
}

.animal-return-button:hover,
.animal-return-button:focus-visible {
    border-color: rgba(239, 83, 80, 0.8);
    color: #fff;
    background: rgba(88, 32, 28, 0.88);
}

.animal-return-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.animal-return-confirm {
    width: min(430px, calc(100vw - 40px));
    box-sizing: border-box;
    border: 1px solid rgba(239, 83, 80, 0.55);
}

.blue-goob-laboratory-header {
    position: relative;
    overflow: hidden;
}

.blue-goob-laboratory-header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 24%;
    background: linear-gradient(90deg, transparent, rgba(183, 235, 255, 0.22), transparent);
    transform: skewX(-20deg);
    animation: blueGoobLaboratoryHeaderScan 5.5s ease-in-out infinite;
    pointer-events: none;
}

.blue-goob-laboratory-body {
    background-image:
        linear-gradient(rgba(61, 158, 218, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 158, 218, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 0, rgba(0, 108, 190, 0.12), transparent 48%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    scrollbar-color: #087ac5 #071522;
}

.blue-goob-laboratory-generate:hover {
    background: linear-gradient(to bottom, #10a5ec, #0867bf) !important;
    box-shadow: 0 0 20px rgba(48, 182, 255, 0.62) !important;
    transform: translateY(-1px);
}

@keyframes blueGoobLaboratoryHeaderScan {
    0%, 60% { left: -30%; opacity: 0; }
    68% { opacity: 1; }
    88%, 100% { left: 112%; opacity: 0; }
}

#labBannerSection {
    isolation: isolate;
    overflow: visible;
}

.blue-goob-lab-art {
    image-rendering: pixelated;
    animation: blueGoobLabArtGlow 3.5s ease-in-out infinite alternate;
}

#labBannerSection.is-generating .blue-goob-lab-art {
    animation: blueGoobLabArtFlash 650ms ease-out;
}

.blue-goob-lab-burst {
    position: absolute;
    z-index: 1;
    top: 56%;
    left: 50%;
    width: 31px;
    height: 31px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(43, 186, 255, 0.95));
    animation: blueGoobLabFountain 1.45s linear both;
}

@keyframes blueGoobLabArtGlow {
    from { filter: drop-shadow(0 0 8px rgba(0, 153, 255, .48)) drop-shadow(0 0 18px rgba(0, 110, 255, .28)); }
    to { filter: drop-shadow(0 0 14px rgba(22, 181, 255, .7)) drop-shadow(0 0 26px rgba(0, 123, 255, .38)); }
}

@keyframes blueGoobLabArtFlash {
    0% { filter: brightness(1.25) drop-shadow(0 0 20px rgba(55, 205, 255, .95)) drop-shadow(0 0 35px rgba(0, 130, 255, .65)); }
    100% { filter: brightness(1) drop-shadow(0 0 10px rgba(0, 153, 255, .55)) drop-shadow(0 0 20px rgba(0, 110, 255, .3)); }
}

@keyframes blueGoobLabFountain {
    0% {
        opacity: 0;
        transform: translate(-50%, 22px) scale(.7);
        animation-timing-function: cubic-bezier(.18, .72, .3, 1);
    }
    12% { opacity: 1; }
    48% {
        opacity: 1;
        transform: translate(calc(-50% + var(--goob-apex-x)), -205px) scale(1.12);
        animation-timing-function: cubic-bezier(.55, 0, .84, .42);
    }
    88% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--goob-land-x)), 80px) scale(.78);
    }
}

@media (prefers-reduced-motion: reduce) {
    .blue-goob-lab-art,
    #labBannerSection.is-generating .blue-goob-lab-art,
    .blue-goob-lab-burst {
        animation: none;
    }
}

.blue-goob-research-notes {
    width: calc(100% - 30px);
}

/* Keep the Available Blocks reward row compact without affecting previews elsewhere. */
#blockSurvivorRewardSection .flame-clothing-icon-block,
#blockSurvivorRewardSection .block-glasses-clothing-icon-block,
#blockSurvivorRewardSection .flame-clothing-icon-block > img,
#blockSurvivorRewardSection .block-glasses-clothing-icon-block > img {
    width: 68px;
    height: 68px;
}

        #backgroundVideo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    #container {
        width: 1010px;
        height: 901px;
        margin: 0 auto;
        padding: 20px;
        color: black;
        position: relative;
        z-index: 2; /* Keep game UI above background rain/stars */
        overflow: visible;
        /* Verwijder de background property aangezien we nu een video gebruiken */
    }

    /* Pre-login: grow with content so footer/gallery are not clipped */
    #container:not(.in-game) {
        height: auto;
        min-height: 901px;
        /* Nudge front-page block slightly down for visual centering (in-game unaffected) */
        padding-top: 60px;
        padding-bottom: 28px;
        overflow: visible;
    }

        #audioPlayer {
            position: absolute;
            visibility: hidden;
            top: -9999px;
            left: -9999px;
        }

        #counter {
            font-size: 48px;
            margin-bottom: 20px;
            padding: 10px;
            font-weight: bold;
            display: none;
            justify-content: space-between;
            align-items: center;
        }

        #click-count {
    flex: 1;
    text-align: center;
    position: absolute;
    top: 20px;           /* Pas deze waarde aan voor verticale positie */
    left: 50px;         /* Pas deze waarde aan voor horizontale positie */
}


#container.in-game {
    width: 1010px;  /* Terug naar originele breedte voor UI elementen */
    /* Content 1140 + padding 40 = 1180 — matches banner ::before so bottom border is not cropped */
    height: 1140px;
    position: relative;
    z-index: 2; /* Above background storm — rain cannot show through UI opacity */
    isolation: isolate;
    padding: 20px;  /* Herstel de padding voor UI elementen */
    margin: 0 auto;  /* Centreer de container */
    overflow: visible;
}

#container.in-game::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50.5%;
    transform: translateX(-50%);  /* Herstel centrering van achtergrond */
    width: 1027px;  /* Volledige breedte van de achtergrond */
    height: 1180px;  /* Volledige hoogte van de achtergrond */
    background-image: url('images/bannerblanktest (1) (1).png');
    background-size: 1027px 1180px;  /* Exacte afmetingen */
    background-position: center top;
    background-repeat: no-repeat;
    z-index: -1;
}


@keyframes warningPulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: scale(1.2);
    }
}

@keyframes needStatIconGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255, 50, 50, 0.75)) drop-shadow(0 0 5px rgba(255, 0, 0, 0.45));
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(255, 80, 80, 1)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.9));
    }
}

.need-stat-icon-critical {
    animation: needStatIconGlowPulse 1.5s ease-in-out infinite;
}

@keyframes needAlarmToggleBlink {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
        filter: drop-shadow(0 0 2px rgba(255, 60, 60, 0.9))
                drop-shadow(0 0 6px rgba(255, 0, 0, 0.6));
    }
    50% {
        opacity: 0.9;
        transform: translateY(-50%) scale(1.22);
        filter: drop-shadow(0 0 4px rgba(255, 80, 80, 1))
                drop-shadow(0 0 10px rgba(255, 0, 0, 0.85))
                drop-shadow(0 0 16px rgba(255, 50, 50, 0.45));
    }
}

.need-alarm-toggle.need-alarm-toggle-alert {
    animation: needAlarmToggleBlink 0.55s ease-in-out infinite;
    z-index: 2;
}

.guide-need-alarm-demo {
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(192, 57, 43, 0.45);
    border-radius: 6px;
    background: rgba(40, 20, 20, 0.35);
}

.guide-need-alarm-demo-title {
    margin: 0 0 4px;
    color: #ffb3b3;
    font-size: 0.95em;
    font-weight: bold;
}

.guide-need-alarm-demo-text {
    margin: 0 0 6px;
    color: #ddd;
    font-size: 0.9em;
    line-height: 1.35;
}

.guide-need-alarm-demo--inline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 8px;
}

.guide-need-alarm-demo--inline .guide-need-alarm-demo-text {
    margin: 0;
    font-size: 0.88em;
    line-height: 1.3;
}

.guide-need-alarm-demo--inline .guide-need-alarm-demo-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.guide-need-alarm-demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.guide-need-alarm-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(192, 57, 43, 0.55);
    border-radius: 5px;
    background: rgba(20, 20, 20, 0.55);
    color: #fff;
    padding: 4px 8px;
    font-size: 0.82em;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.guide-need-alarm-demo-btn:hover {
    background: rgba(192, 57, 43, 0.25);
    border-color: rgba(255, 80, 80, 0.75);
}

.guide-need-alarm-demo-btn img {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

.guide-need-alarm-demo-btn.guide-need-alarm-demo-alert {
    animation: guideNeedAlarmDemoBlink 0.55s ease-in-out infinite;
}

@keyframes guideNeedAlarmDemoBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1.02);
        box-shadow: 0 0 4px rgba(255, 60, 60, 0.7);
    }
    50% {
        opacity: 0.92;
        transform: scale(1.08);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.85), 0 0 16px rgba(255, 50, 50, 0.45);
    }
}

@keyframes blinkRed {
    0%, 100% { 
        background: linear-gradient(to bottom, #cc0000, #990000);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
    50% { 
        background: linear-gradient(to bottom, #ff3333, #cc0000);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
}

.market-button-blink {
    animation: blinkRed 1.5s infinite !important;
}

@keyframes blinkTab {
    0%, 100% { 
        background: linear-gradient(to bottom, #cc0000, #990000) !important;
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
    50% { 
        background: linear-gradient(to bottom, #ff3333, #cc0000) !important;
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
}

.market-tab-blink {
    animation: blinkTab 1.5s infinite !important;
}


#clickButton {
    position: absolute;   /* Voeg absolute positioning toe */
    top: 50px;          /* Pas deze waarde aan voor verticale positie */
    left: 800px;         /* Pas deze waarde aan voor horizontale positie */
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    color: white;
    width: auto;
}

        #gameContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #extrasMenu {
    position: absolute;
    top: 180px;
    left: 45px;
    z-index: 10;
    display: none; /* Verberg het menu standaard */
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Ruimte tussen de twee menu's */
}

#mainMenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    top: 220px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
    height: 225px;
}

#darkdistrict {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    top: 262px;  /* Aangepaste positie onder mainMenu */
    left: -20px;
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
    height: 375px;
}

#casinostrip {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    top: 830px;  /* Position below casinostrip */
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

#forestdistrict {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    top: 665px;  /* Aangepaste positie onder darkdistrict */
    left: -20px;
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
    height: auto;
    overflow: visible;
}

#buymenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: -30px; /* Adjust as needed */
    left: 740px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

#minigamemenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: -30px; /* Adjust as needed to position independently */
    left: 740px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

#specialFeaturesMenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: 420px; /* Adjust as needed to position independently */
    left: 10px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

button {
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin: 5px 0;
    width: auto;
}

button:hover {
    background-color: darkred;
}

        #rightMenu {
            background: rgba(255, 255, 255, 0.6);
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            top: 200px;
            right: 45px;
            display: none;
            flex-direction: column;
            align-items: left;
            z-index: 5;
            width: 200px;
            height: auto;
            overflow: visible;
        }

        button {
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            padding: 1px 20px;
            font-size: 18px;
            cursor: pointer;
            margin: 5px 0;
            width: auto;
        }

        button:hover {
            background-color: darkred;
        }


        #shopMenu,
        #highscoreMenu,
        #missionsMenu,
        #itemLadyMenu,
        #dailyChallengesMenu {
            display: none;
            position: absolute;
            left: -500px;
            top: 50%;
            transform: translateY(-50%);
            width: 450px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            z-index: 10;
        }

        #statisticsMenu {
    top: 190px;
    left: 51%;
    transform: translateX(-50%);
    width: 500px;
    min-height: 630px !important;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.6);
    padding: 5px;
    border-radius: 10px;
    position: absolute;
    text-align: left;
    font-weight: bold;
    z-index: 10;
}




        #inventoryBtn {
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 2px 20px;
            cursor: pointer;
            font-weight: bold;
            align-self: center;
            margin-left: 108px;
            margin-top: 10px;
            position: relative;
            top: -5px;
            display: inline-block;
            width: 170px; /* Voeg dit toe om de breedte in te stellen */

        }

        #loginMenu,
        #usernameInput {
            margin-top: 10px;
            background: rgba(255, 255, 255, 0.5);
            padding: 1px 1px;
            border-radius: 5px;
            width: 350px;
            margin: 10px auto;
            text-align: center;
        }

        input {
            padding: 10px;
            font-size: 15px;
            width: calc(100% - 180px);
            margin-right: 0px;
            margin-top: -15px;
        }

        .login-button,
        .create-account-button {
            padding: 10px 15px;
            font-size: 15px;
            cursor: pointer;
            background-color: red;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: bold;
        }

        #muteButton {
            background-color: red;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-right: 20px;
        }

        #infoMenu {
    margin-top: 20px;    /* Pas dit aan om het menu hoger/lager te zetten */
    margin-left: 210px;     /* Pas dit aan om het menu meer naar links/rechts te zetten */
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 10px;
    width: 555px;
    text-align: center;
    font-size: 14px;
    position: relative;
    overflow: visible;
}

/* Persistent storm: full visual WIDTH under body zoom.
   Height tracks the mountain ridge (~60% of viewport — same as ~880px on 1440p),
   so rain never fills the whole screen on short windows. */
.prelogin-storm {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw / var(--game-zoom, 1));
    height: min(
        calc(880px / var(--game-zoom, 1)),
        calc(60vh / var(--game-zoom, 1))
    );
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    /* Stable compositor layer (helps Brave keep stars/rain visible under overlays) */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Clean up unused welcome full-screen star host if present */
.welcome-sky-stars {
    display: none !important;
}

.prelogin-storm__clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Cover more of the upper sky; fade handled per-cloud + mask */
    height: 78%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 40%,
        rgba(0, 0, 0, 0.75) 70%,
        rgba(0, 0, 0, 0.35) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 40%,
        rgba(0, 0, 0, 0.75) 70%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

.prelogin-sky-cloud {
    position: absolute;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 40% 45%,
        rgba(195, 200, 205, 0.7) 0%,
        rgba(155, 160, 165, 0.4) 42%,
        rgba(130, 135, 140, 0.16) 68%,
        transparent 100%
    );
    /* One blur on the whole cloud (pseudos inherit softness). Extra blur on
       ::before/::after was ~3× GPU cost for almost the same look. */
    filter: blur(6px);
    will-change: transform;
    pointer-events: none;
    contain: layout style;
}

.prelogin-sky-cloud::before,
.prelogin-sky-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.prelogin-sky-cloud::before {
    width: 55%;
    height: 70%;
    left: -18%;
    top: 15%;
}

.prelogin-sky-cloud::after {
    width: 50%;
    height: 65%;
    right: -14%;
    top: 20%;
}

/* Exit right → instant wrap left (same idea as crows).
   Use --vz so travel matches the full visual viewport under body zoom. */
@keyframes preloginCloudDrift {
    0% {
        transform: translate3d(calc(-18 * var(--vz, 1vw)), 0, 0) scale(var(--cloud-scale, 1));
    }
    100% {
        transform: translate3d(calc(105 * var(--vz, 1vw)), 0, 0) scale(var(--cloud-scale, 1));
    }
}

.prelogin-storm__stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.prelogin-sky-star {
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    /* Skip per-star glow — dozens of box-shadows were expensive; twinkle keeps life */
}

.prelogin-sky-star--white {
    background: #ffffff;
    color: #ffffff;
}

.prelogin-sky-star--orange {
    background: #ffb347;
    color: #ffb347;
}

.prelogin-sky-star--orange-deep {
    background: #ff8c22;
    color: #ff8c22;
}

.prelogin-sky-star--orange-soft {
    background: #ffd08a;
    color: #ffd08a;
}

.prelogin-storm__rain {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background: transparent;
    contain: layout style;
}

/* Screen blend only where needed — full-time mix-blend-mode is costly on the GPU */
.prelogin-storm__rain.prelogin-storm__rain--blend {
    mix-blend-mode: screen;
}

/* Crows stay behind logo/menus (#container z-index 2) — same height cap as storm */
.prelogin-storm__crows {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw / var(--game-zoom, 1));
    height: min(
        calc(880px / var(--game-zoom, 1)),
        calc(60vh / var(--game-zoom, 1))
    );
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout style;
}

/* Halloween weather has no flying crows. */
body[data-global-weather="halloween"] .prelogin-storm__crows {
    display: none;
}

.prelogin-storm__crows .crow {
    position: absolute;
    left: 0;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout style;
}

/* Flight + wing flap stay; static legs/tail at this scale is nearly invisible */
.prelogin-storm__crows .crow.crow--lite-detail [data-crow-detail] {
    animation: none !important;
}

.prelogin-storm__crows .crow.crow--hit {
    z-index: 1;
}

.prelogin-storm__crows .crow.crow--falling {
    animation: crowFallDead 2s cubic-bezier(0.4, 0, 0.7, 0.2) forwards !important;
}

/* Straight drop top→bottom; distance set per hit via --fall-distance */
@keyframes crowFallDead {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 3px rgba(180, 20, 40, 0.55));
    }
    25% {
        transform: translate3d(6px, calc(var(--fall-distance, 900px) * 0.22), 0) rotate(70deg);
    }
    55% {
        transform: translate3d(-4px, calc(var(--fall-distance, 900px) * 0.55), 0) rotate(150deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, var(--fall-distance, 900px), 0) rotate(210deg);
        opacity: 1;
        filter: none;
    }
}

.crow-blood-burst {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 10001;
    pointer-events: none;
}

.crow-blood-spark {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--spark-size, 4px);
    height: var(--spark-size, 4px);
    margin: calc(var(--spark-size, 4px) / -2) 0 0 calc(var(--spark-size, 4px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, #ff6b7a 0%, #c41e3a 55%, #7a0a1a 100%);
    box-shadow:
        0 0 var(--spark-glow, 4px) rgba(255, 80, 100, 0.95),
        0 0 var(--spark-glow-outer, 10px) rgba(200, 30, 50, 0.65);
    animation: crowBloodSparkle var(--spark-dur, 0.85s) ease-out forwards;
    --dx: 0px;
    --dy: 0px;
}

@keyframes crowBloodSparkle {
    0% {
        transform: translate(0, 0) scale(1.2);
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.2);
        opacity: 0;
    }
}

/* Welcome image: full-bleed soft flash + orange bloom */
.welcome-storm-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    background:
        radial-gradient(
            ellipse 90% 55% at 50% 0%,
            rgba(255, 120, 40, 0.28) 0%,
            rgba(255, 140, 50, 0.12) 40%,
            transparent 72%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 235, 180, 0.55) 0%,
            rgba(255, 220, 140, 0.3) 28%,
            rgba(255, 210, 120, 0.16) 55%,
            rgba(255, 200, 100, 0.07) 78%,
            rgba(255, 200, 100, 0.02) 92%,
            rgba(255, 200, 100, 0) 100%
        );
    animation: welcomeLightningFlashSoft 13s ease-in-out infinite -11.5s;
}

/* Tutorial / Mayor Tasks: storm flash only around right-side stars */
.tutpic-storm-flash {
    /* Match star field / window pane only (stars use right: 8%–37%, top: ~2%–18%) */
    position: absolute;
    top: 0;
    right: -2%;
    width: 48%;
    height: 36%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background:
        radial-gradient(
            ellipse 85% 60% at 50% 0%,
            rgba(255, 120, 40, 0.32) 0%,
            rgba(255, 140, 50, 0.14) 38%,
            transparent 70%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 235, 180, 0.5) 0%,
            rgba(255, 220, 140, 0.28) 22%,
            rgba(255, 210, 120, 0.14) 45%,
            rgba(255, 200, 100, 0.06) 70%,
            rgba(255, 200, 100, 0.02) 88%,
            rgba(255, 200, 100, 0) 100%
        );
    /* Symmetric soft edges: equal left/right fade + soft bottom (centered, not right-heavy) */
    -webkit-mask-image:
        linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-composite: intersect;
    animation: welcomeLightningFlashSoft 13s ease-in-out infinite -11.5s;
}

/* Keep the reusable layer available, but do not flash the Tutorial or Mayor Challenges images. */
#tutorialMenu .tutpic-storm-flash,
#mayorTasksMenu .tutpic-storm-flash {
    display: none !important;
    animation: none !important;
}

/* Mild full-screen flash synced with pre-login bolts (pre-login only) */
.prelogin-storm__flash {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw / var(--game-zoom, 1));
    height: calc(100vh / var(--game-zoom, 1));
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 220, 140, 0.22) 0%,
        rgba(255, 210, 120, 0.14) 35%,
        rgba(255, 200, 100, 0.06) 65%,
        rgba(255, 200, 100, 0) 100%
    );
    animation: preloginLightningFlash 14s ease-in-out infinite;
    animation-delay: 2s;
}

/* After login: never show flash */
body:has(#container.in-game) .prelogin-storm__flash {
    display: none !important;
    animation: none !important;
}

@keyframes preloginLightningFlash {
    0%, 14%, 100% {
        opacity: 0;
    }
    0.7% {
        opacity: 0.5;
    }
    1.4% {
        opacity: 0;
    }
    2% {
        opacity: 0.65;
    }
    2.6% {
        opacity: 0;
    }
    3.2% {
        opacity: 0.38;
    }
    6% {
        opacity: 0.14;
    }
    10% {
        opacity: 0;
    }
}

.welcome-sky-stars {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.welcome-sky-stars .prelogin-sky-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
}

.prelogin-page-bolts {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1010px;
    height: 320px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

#infoMenu,
#loginMenu,
#usernameInput,
#privacyInfoMenu {
    z-index: 10;
    overflow: visible;
}

#infoText {
    overflow: visible;
    margin: 0;
    line-height: normal;
}

.prelogin-feature-line {
    text-align: left;
    padding-left: 75px;
    box-sizing: border-box;
    line-height: 1.35;
}

.prelogin-feature-rotator {
    display: inline-block;
    /* overflow != visible makes inline-block baseline = bottom of box,
       so without a negative align the red text sits above "Featuring:" */
    overflow: hidden;
    height: 1.35em;
    line-height: 1.35em;
    margin-left: 0.28em;
    text-align: left;
    vertical-align: -0.35em;
    position: relative;
    top: 0;
}

.prelogin-feature-rotator__viewport {
    display: block;
    overflow: hidden;
    height: 100%;
    position: relative;
    text-align: left;
}

.prelogin-feature-rotator__item {
    display: block;
    height: 1.35em;
    line-height: 1.35em;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    font-size: 1em;
    will-change: transform;
    background: linear-gradient(to bottom, rgb(240, 11, 11), rgb(158, 14, 14));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prelogin-feature-rotator__item.is-out {
    animation: preloginFeatureOut 0.4s ease forwards;
}

.prelogin-feature-rotator__item.is-in {
    animation: preloginFeatureIn 0.4s ease forwards;
}

@keyframes preloginFeatureOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-110%);
    }
}

@keyframes preloginFeatureIn {
    from {
        transform: translateY(110%);
    }
    to {
        transform: translateY(0);
    }
}

.prelogin-logo-wrap {
    position: relative;
    isolation: isolate;
    display: inline-block;
    top: 12px;
    left: -48px;
    /* Preserve the logo's surrounding space without changing its position. */
    padding: 28px 32px 16px;
    margin: -28px -32px -16px;
    overflow: visible;
}

.prelogin-logo-img {
    height: 195px;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    overflow: visible;
}

.prelogin-logo-corn {
    display: none;
    position: absolute;
    left: 46px;
    right: 46px;
    bottom: 10px;
    height: 250px;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

body[data-global-weather="halloween"] .prelogin-logo-corn {
    display: block;
}

.prelogin-logo-corn span {
    position: absolute;
    bottom: 0;
    width: 52px;
    background: url("Seasonthemes/corn-stalk-silhouette.svg?v=halloween-corn") center bottom / 100% 100% no-repeat;
    opacity: 0.78;
    transform-origin: 50% 100%;
    animation: cornfieldPreviewSway 3.8s ease-in-out infinite alternate;
}

.prelogin-logo-corn span:nth-child(1) { left: 4%; height: 248px; animation-delay: -1.4s; }
.prelogin-logo-corn span:nth-child(2) { left: 18%; height: 268px; opacity: 0.62; animation-delay: -2.6s; }
.prelogin-logo-corn span:nth-child(3) { left: 46%; height: 255px; opacity: 0.5; animation-delay: -0.4s; }
.prelogin-logo-corn span:nth-child(4) { left: 72%; height: 272px; opacity: 0.66; animation-delay: -1.9s; }
.prelogin-logo-corn span:nth-child(5) { left: 88%; height: 246px; opacity: 0.58; animation-delay: -3.2s; }

.prelogin-logo-wrap .prelogin-logo-corn {
    left: 48px;
    right: 48px;
    bottom: -68px;
    height: 300px;
    z-index: 0;
}

.prelogin-logo-wrap .prelogin-logo-img {
    z-index: 1;
}

.prelogin-logo-wrap .prelogin-logo-corn span {
    width: 88px;
}

.prelogin-logo-wrap .prelogin-logo-corn span:nth-child(1) { left: -1%; height: 405px; opacity: 0.92; }
.prelogin-logo-wrap .prelogin-logo-corn span:nth-child(2) { left: 17%; height: 435px; opacity: 0.82; }
.prelogin-logo-wrap .prelogin-logo-corn span:nth-child(3) { left: 43%; height: 422px; opacity: 0.78; }
.prelogin-logo-wrap .prelogin-logo-corn span:nth-child(4) { left: 67%; bottom: -3px; height: 441px; opacity: 0.88; }
.prelogin-logo-wrap .prelogin-logo-corn span:nth-child(5) { left: 85%; height: 413px; opacity: 0.8; }

#postLoginLogo .prelogin-logo-corn {
    left: 28px;
    right: 28px;
    bottom: -6px;
    height: 200px;
}

#postLoginLogo .prelogin-logo-corn span {
    width: 62px;
}

#postLoginLogo .prelogin-logo-corn span:nth-child(1) { left: 2%; height: 198px; opacity: 0.9; }
#postLoginLogo .prelogin-logo-corn span:nth-child(2) { left: 20%; height: 214px; opacity: 0.78; }
#postLoginLogo .prelogin-logo-corn span:nth-child(3) { left: 44%; height: 206px; opacity: 0.74; }
#postLoginLogo .prelogin-logo-corn span:nth-child(4) { left: 68%; height: 220px; opacity: 0.84; }
#postLoginLogo .prelogin-logo-corn span:nth-child(5) { left: 86%; height: 202px; opacity: 0.76; }

.post-login-logo {
    position: relative;
    z-index: 1;
}

/* Reuse the Hill House raven silhouettes and circling flight around the logo. */
.prelogin-logo-ravens {
    position: absolute;
    inset: -35px -75px -55px;
    z-index: 2;
    display: none;
    overflow: visible;
    pointer-events: none;
}

body[data-global-weather="halloween"]:not([data-pre-storm-show="true"]) .prelogin-logo-ravens {
    display: block;
}

.prelogin-logo-raven {
    opacity: .95;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .75));
    animation: preloginLogoRavenCircle 13s linear infinite;
}

.prelogin-logo-raven::before {
    transform-origin: right center;
    animation: cornfieldRavenWing .5s ease-in-out infinite alternate;
}

.prelogin-logo-raven--one { animation-delay: -1s; }
.prelogin-logo-raven--two { width: 15px; height: 7px; animation-duration: 17s; animation-delay: -8s; opacity: .7; }
.prelogin-logo-raven--three { width: 24px; height: 10px; animation-duration: 11s; animation-delay: -5s; }
.prelogin-logo-raven--four { width: 13px; height: 6px; animation-duration: 19s; animation-delay: -13s; opacity: .65; }
.prelogin-logo-raven--five { width: 18px; height: 8px; animation-duration: 15s; animation-delay: -10s; animation-direction: reverse; opacity: .8; }
.prelogin-logo-raven--six { animation-duration: 21s; animation-delay: -17s; animation-direction: reverse; }

@keyframes preloginLogoRavenCircle {
    0% { left: 6%; top: 40%; transform: scaleX(1) scale(.8); }
    25% { left: 38%; top: 4%; transform: scaleX(1) scale(1); }
    50% { left: 94%; top: 32%; transform: scaleX(-1) scale(.85); }
    75% { left: 58%; top: 53%; transform: scaleX(-1) scale(1.05); }
    100% { left: 6%; top: 40%; transform: scaleX(1) scale(.8); }
}

body.hide-background-effects .prelogin-logo-ravens,
body.hide-background-effects .prelogin-logo-corn {
    visibility: hidden;
}

body.storm-tab-hidden .prelogin-logo-raven,
body.storm-tab-hidden .prelogin-logo-raven::before {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .prelogin-logo-ravens { display: none !important; }
}

.prelogin-logo-bolt {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transform-origin: top center;
    filter:
        drop-shadow(0 0 5px rgba(255, 140, 40, 0.7))
        drop-shadow(0 0 14px rgba(255, 100, 0, 0.5))
        drop-shadow(0 0 28px rgba(255, 80, 0, 0.3));
    animation: preloginBoltStrike 14s ease-in-out infinite;
    animation-delay: 2s;
}

.prelogin-logo-bolt--left {
    left: -2px;
}

.prelogin-logo-bolt--right {
    right: calc(-2.5% + 2px);
}

/* Soft-hide: never use display:none here — that restarts CSS animations and
   causes violent skyline flicker when the class toggles (e.g. Off-minigames mode). */
body.hide-background-effects .prelogin-storm,
body.hide-background-effects .prelogin-storm__stars,
body.hide-background-effects .prelogin-storm__rain,
body.hide-background-effects .prelogin-storm__crows,
body.hide-background-effects .prelogin-storm__shooting-stars,
body.hide-background-effects .prelogin-storm__clouds {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.hide-background-effects .prelogin-storm *,
body.hide-background-effects .prelogin-storm__crows,
body.hide-background-effects .prelogin-storm__crows * {
    animation-play-state: paused !important;
}

/* Tab in background: pause CSS storm work (canvas rain already stops via JS).
   Flash is a sibling of .prelogin-storm (not a child) — must be paused too,
   or glow drifts ahead of bolts while the tab is hidden. */
body.storm-tab-hidden .prelogin-storm *,
body.storm-tab-hidden .prelogin-storm__crows,
body.storm-tab-hidden .prelogin-storm__crows *,
body.storm-tab-hidden .prelogin-storm__flash,
body.storm-tab-hidden .prelogin-logo-bolt {
    animation-play-state: paused !important;
}

/* Shooting stars — same look as country (dot star, diagonal drift, fade out) */
.prelogin-storm__shooting-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.prelogin-shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    will-change: transform, opacity;
    --shoot-x: 150px;
    --shoot-y: 150px;
    animation: preloginShootingStar 10s infinite linear;
}

.prelogin-shooting-star--1 {
    top: 8%;
    left: 22%;
    animation-delay: 1s;
}

.prelogin-shooting-star--2 {
    top: 5%;
    left: 62%;
    animation-delay: 6s;
}

/* Color / start / direction set randomly by JS each loop */
@keyframes preloginShootingStar {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--shoot-x), var(--shoot-y));
        opacity: 0;
    }
}

@keyframes preloginBoltStrike {
    0% {
        opacity: 0;
        transform: scaleY(0.15);
        filter:
            drop-shadow(0 0 4px rgba(255, 120, 20, 0.15))
            drop-shadow(0 0 10px rgba(255, 80, 0, 0.08));
    }
    /* inkomen — iets milder */
    0.7% {
        opacity: 0.78;
        transform: scaleY(1);
        filter:
            drop-shadow(0 0 6px rgba(255, 180, 60, 0.75))
            drop-shadow(0 0 18px rgba(255, 110, 0, 0.65))
            drop-shadow(0 0 36px rgba(255, 70, 0, 0.4));
    }
    /* flikker */
    1.4% {
        opacity: 0.1;
        filter:
            drop-shadow(0 0 4px rgba(255, 120, 20, 0.18))
            drop-shadow(0 0 10px rgba(255, 80, 0, 0.1));
    }
    2% {
        opacity: 0.82;
        filter:
            drop-shadow(0 0 7px rgba(255, 200, 80, 0.8))
            drop-shadow(0 0 20px rgba(255, 120, 0, 0.7))
            drop-shadow(0 0 40px rgba(255, 70, 0, 0.45));
    }
    /* flikker */
    2.6% {
        opacity: 0.14;
        filter:
            drop-shadow(0 0 5px rgba(255, 120, 20, 0.2))
            drop-shadow(0 0 12px rgba(255, 80, 0, 0.12));
    }
    3.2% {
        opacity: 0.72;
        filter:
            drop-shadow(0 0 6px rgba(255, 170, 50, 0.7))
            drop-shadow(0 0 16px rgba(255, 100, 0, 0.6))
            drop-shadow(0 0 32px rgba(255, 70, 0, 0.35));
    }
    /* langzaam fade out */
    6% {
        opacity: 0.4;
        transform: scaleY(1);
        filter:
            drop-shadow(0 0 6px rgba(255, 140, 40, 0.45))
            drop-shadow(0 0 14px rgba(255, 90, 0, 0.3))
            drop-shadow(0 0 28px rgba(255, 60, 0, 0.16));
    }
    10% {
        opacity: 0.14;
        filter:
            drop-shadow(0 0 5px rgba(255, 120, 20, 0.2))
            drop-shadow(0 0 10px rgba(255, 80, 0, 0.1));
    }
    14%, 100% {
        opacity: 0;
        transform: scaleY(1);
        filter:
            drop-shadow(0 0 4px rgba(255, 100, 0, 0))
            drop-shadow(0 0 10px rgba(255, 70, 0, 0));
    }
}

#updateMenu {
    background: rgba(255, 255, 255, 0.4);
    padding: 10px;
    border-radius: 5px;
    width: 150px;
    height: 43px; /* Voeg een vaste hoogte toe */
    text-align: center;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px auto;
    margin-top: 299px;
    margin-left: 6px;
    overflow-y: auto; /* Voeg scrollbalk toe indien nodig */
}

        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 50px 0 24px 0;
            background-color: black;
            color: white;
            overflow-x: clip;
            overflow-y: hidden;
            min-height: 0;
        }

        #backgroundVideo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    #container {
        width: 1010px;
        height: 901px;
        margin: 0 auto;
        padding: 20px;
        color: black;
        position: relative;
        z-index: 2; /* Keep game UI above background rain/stars */
        overflow: visible;
        /* Verwijder de background property aangezien we nu een video gebruiken */
    }

        #audioPlayer {
            position: absolute;
            visibility: hidden;
            top: -9999px;
            left: -9999px;
        }

        #counter {
            font-size: 48px;
            margin-bottom: 20px;
            padding: 10px;
            font-weight: bold;
            display: none;
            justify-content: space-between;
            align-items: center;
        }

        #click-count {
    flex: 1;
    text-align: center;
    position: absolute;
    top: 40px;           /* Pas deze waarde aan voor verticale positie */
    left: 50px;         /* Pas deze waarde aan voor horizontale positie */
}

#clickButton { 
    position: absolute;
    top: 900px;
    right: 500px; /* Changed from left: 60px to right: 100px */
    left: auto; /* Remove the left positioning */
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    color: white;
    width: auto;
} 

        #gameContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #extrasMenu {
    position: absolute;
    top: 180px;
    left: 45px;
    z-index: 10;
    display: none; /* Verberg het menu standaard */
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Ruimte tussen de twee menu's */
}

#mainMenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: 10px; /* Adjust as needed */
    left: -20px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

#buymenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: 10px; /* Adjust as needed */
    left: 703px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
    height: 251px;
}

/* Keep Public Services labels on one line in Firefox's flex layout. */
#needsMenu > button {
    box-sizing: border-box;
    width: 100%;
    padding-left: 6px;
    white-space: nowrap;
}

#minigamemenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: -30px; /* Adjust as needed to position independently */
    left: 740px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

#specialFeaturesMenu {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    position: absolute; /* Use absolute positioning */
    top: 420px; /* Adjust as needed to position independently */
    left: 10px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 200px;
}

button {
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin: 5px 0;
    width: auto;
}

button:hover {
    background-color: darkred;
}

        #rightMenu {
            background: rgba(255, 255, 255, 0.6);
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            top: 902px;
            right: 29.5px;
            display: none;
            flex-direction: column;
            align-items: left;
            z-index: 5;
            width: 200px;
            height: auto; /* override earlier fixed 222px — was clipping Logout */
            overflow: visible;
        }


        button {
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            padding: 1px 20px;
            font-size: 18px;
            cursor: pointer;
            margin: 5px 0;
            width: auto;
        }

        button:hover {
            background-color: darkred;
        }

        #shopMenu,
        #highscoreMenu,
        #missionsMenu,
        #itemLadyMenu,
        #dailyChallengesMenu {
            display: none;
            position: absolute;
            left: -500px;
            top: 50%;
            transform: translateY(-50%);
            width: 450px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            z-index: 10;
        }

        #statisticsMenu {
            top: 190px;
            left: 50%;
            transform: translateX(-50%);
            width: 420px;
            height: 550px;
            overflow-y: auto;
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background: rgba(255, 255, 255, 0.6);
            padding: 5px;
            border-radius: 10px;
            position: absolute;
            text-align: left;
            font-weight: bold;
            z-index: 10;
        }
        
        /* Duidelijke grijze scrollbar voor Chrome, Safari en Opera */
        #statisticsMenu::-webkit-scrollbar {
            width: 8px;
        }
        
        #statisticsMenu::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }
        
        #statisticsMenu::-webkit-scrollbar-thumb {
            background: rgba(80, 80, 80, 0.5);
            border-radius: 4px;
        }
        
        #statisticsMenu::-webkit-scrollbar-thumb:hover {
            background: rgba(60, 60, 60, 0.7);
        }
        
        /* Firefox scrollbar */
        #statisticsMenu {
            scrollbar-width: thin;
            scrollbar-color: rgba(80, 80, 80, 0.5) rgba(0, 0, 0, 0.1);
        }

        /* Mayor tasks overview — same subtle scrollbar as statistics */
        #mayorTaskOverviewList::-webkit-scrollbar {
            width: 8px;
        }

        #mayorTaskOverviewList::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        #mayorTaskOverviewList::-webkit-scrollbar-thumb {
            background: rgba(80, 80, 80, 0.5);
            border-radius: 4px;
        }

        #mayorTaskOverviewList::-webkit-scrollbar-thumb:hover {
            background: rgba(60, 60, 60, 0.7);
        }

        #mayorTaskOverviewList {
            scrollbar-width: thin;
            scrollbar-color: rgba(80, 80, 80, 0.5) rgba(0, 0, 0, 0.1);
        }



#communityMenu {
            background: rgba(255, 255, 255, 0.6);
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            top: 765px;
            right: 45px;
            display: none;
            flex-direction: column;
            align-items: left;
            z-index: 10;
            width: 200px;
}

/* Voeg deze nieuwe CSS regel direct eronder toe */
#statisticsMenu > div > div {
    width: 450px;  /* Of welke breedte je wilt */
}

        #inventoryBtn {
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 2px 20px;
            cursor: pointer;
            font-weight: bold;
            align-self: center;
            margin-left: 108px;
            margin-top: 10px;
            position: relative;
            top: -5px;
            display: inline-block;
            width: 170px; /* Voeg dit toe om de breedte in te stellen */

        }
        

        #loginMenu,
#usernameInput {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.15); /* iets transparanter */
    backdrop-filter: blur(6px);            /* glas-effect */
    -webkit-backdrop-filter: blur(6px);    /* voor Safari */
    padding: 10px 15px;
    border-radius: 15px;                    /* minder rond */
    border: 1px solid rgba(255, 255, 255, 0.1); /* subtiel randje */
    width: 350px;
    margin: 10px auto;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* zwevend effect */
}

        input {
            padding: 10px;
            font-size: 15px;
            width: calc(100% - 180px);
            margin-right: 0px;
            margin-top: -15px;
        }

        .login-button,
        .create-account-button {
            padding: 10px 15px;
            font-size: 15px;
            cursor: pointer;
            background-color: red;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: bold;
        }

        #muteButton {
            background-color: red;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-right: 20px;
        }

        #infoMenu {
    margin-top: -10px;    /* Pas dit aan om het menu hoger/lager te zetten */
    margin-left: 225px;     /* Pas dit aan om het menu meer naar links/rechts te zetten */
    background: rgba(255, 255, 255, 0.0);
    padding: 4px;
    border-radius: 10px;
    width: 555px;
    text-align: center;
    font-size: 14px;
    position: relative;
    overflow: visible;
}

#needsmenu {
            background: rgba(255, 255, 255, 0.6);
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            top: 215px;
            right: 45px;
            display: none;
            flex-direction: column;
            align-items: left;
            z-index: 10;
            width: 200px;
        }

        #demensionsMenu {
            background: rgba(255, 255, 255, 0.6);
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            top: 380px;
            right: 45px;
            display: none;
            flex-direction: column;
            align-items: left;
            z-index: 10;
            width: 200px;
        }

#updateMenu {
    background: rgba(255, 255, 255, 0.4);
    padding: 10px;
    border-radius: 5px;
    width: 150px;
    height: 43px; /* Voeg een vaste hoogte toe */
    text-align: center;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px auto;
    margin-top: 275px;
    margin-left: 6px;
    overflow-y: auto; /* Voeg scrollbalk toe indien nodig */
}

        .belowLoginMenu {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }

        .mission-item {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background: rgba(200, 200, 200, 0.8);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mission-info {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .mission-reward {
            font-weight: bold;
            color: green;
        }

        .mission-timer {
            color: red;
            font-size: 12px;
        }

        .shop-items {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            margin-top: 20px;
        }

        .shop-items img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            margin-bottom: 10px;
        }

        #statisticsMenu p {
            margin: 2px 0;
            padding: 0;
        }

        #statisticsMenu #totalClicks > span:last-of-type::before,
        #statisticsMenu #bankBalanceStats::before,
        #statisticsMenu #sessionClicks > span:last-of-type::before,
        #statisticsMenu #statsPassiveGoobsValue::before,
        #statisticsMenu #totalBlueGoobs > span::before,
        #statisticsMenu #totalSeasonGoobs > span::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 3px;
            vertical-align: -2px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 15px 15px;
            transform: scale(1.35);
            transform-origin: center;
        }

        #statisticsMenu #totalClicks > span:last-of-type::before,
        #statisticsMenu #bankBalanceStats::before,
        #statisticsMenu #sessionClicks > span:last-of-type::before,
        #statisticsMenu #statsPassiveGoobsValue::before {
            background-image: url('images/goobgreenicon.png');
        }

        #statisticsMenu #totalBlueGoobs > span::before {
            background-image: url('images/iconbluegoob.png');
        }

        #statisticsMenu #totalSeasonGoobs > span::before {
            background-image: url('images/contgoobicon.png');
            background-size: 13px 11px;
        }

        #statisticsMenu #sessionClicksContainer,
        #statisticsMenu #statsPassiveGoobsRow,
        #statisticsMenu #totalBlueGoobsContainer,
        #statisticsMenu #totalSeasonGoobsContainer {
            position: relative;
        }

        #statisticsMenu #totalClicks {
            display: grid;
            grid-template-columns: 66px max-content;
            align-items: center;
            letter-spacing: 0.75px;
            flex: 0 0 auto;
            line-height: 16px;
            white-space: nowrap;
        }

        #statisticsMenu #totalClicks > span:last-of-type {
            letter-spacing: normal;
            white-space: nowrap;
        }

        #statisticsMenu #statsBankContainer {
            flex: 0 0 auto;
            line-height: 16px;
        }

        #statisticsMenu #sessionClicks > span:last-of-type,
        #statisticsMenu #statsPassiveGoobsValue,
        #statisticsMenu #totalBlueGoobs > span,
        #statisticsMenu #totalSeasonGoobs > span {
            position: absolute;
            top: 50%;
            left: 108px;
            right: 84px;
            transform: translateY(-50%);
            display: block;
            min-width: 0;
            height: 16px;
            padding: 3px 0;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #statisticsMenu #totalSeasonGoobs > span {
            right: 6px;
            font-weight: normal;
        }

        #statisticsMenu #totalSeasonGoobs {
            word-spacing: 4.45px;
        }

        #statisticsMenu #totalBlueGoobs > span,
        #statisticsMenu #totalSeasonGoobs > span {
            left: 102px;
        }

        #statisticsMenu #sessionClicks > span:last-of-type,
        #statisticsMenu #statsPassiveGoobsValue {
            left: 72px;
        }

        #statisticsMenu #currentRank > span {
            overflow: visible !important;
        }

        #statisticsMenu #currentRank img[src="images/goobgreenicon.png"] {
            transform: scale(1.35);
            transform-origin: center;
        }

        #statisticsMenu #currentRank img.aura-teken {
            transform: scale(1.2);
            transform-origin: center;
        }

        #agencyMenu {
            display: none;
            position: absolute;
            left: -730px;
            top: 50%;
            transform: translateY(-50%);
            width: 680px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            z-index: 10;
            text-align: center;
        }

        #agencyMenu img {
            width: 665px;
            height: 500px;
            object-fit: cover;
            margin-bottom: 10px;
        }

        #agencyMenu p {
            margin: 2px 0;
            padding: 0;
        }

        #ranksMenu {
            display: none;
            position: absolute;
            left: -500px;
            top: 50%;
            transform: translateY(-50%);
            width: 450px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            z-index: 10;
            text-align: left;
        }

        #eliteGoobsMenu {
            display: none;
            position: absolute;
            left: -600px;
            top: 50%;
            transform: translateY(-50%);
            width: 550px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            z-index: 10;
            text-align: center;
        }
		
		#topsGoobsMenu {
            display: none;
            position: absolute;
            left: -600px;
            top: 50%;
            transform: translateY(-50%);
            width: 550px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            z-index: 10;
            text-align: center;
        }

        #apartmentMenu {
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        top: 250px; /* Same as rightMenu */
        right: -700px; /* Same as rightMenu */
        display: none;
        flex-direction: column;
        align-items: flex-start;
        z-index: 10;
        width: 600px; /* Same as rightMenu */
    }

    #purchaseApartmentMenu {
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        top: 0px; /* Same as rightMenu */
        right: -580px; /* Same as rightMenu */
        display: none;
        flex-direction: column;
        align-items: flex-start;
        z-index: 10;
        width: 520px; /* Same as rightMenu */
    }

    #apartmentInteriorMenu {
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        top: 180px; /* Same as rightMenu */
        right: -900px; /* Same as rightMenu */
        display: none;
        flex-direction: column;
        align-items: flex-start;
        z-index: 10;
        width: 635px; /* Same as rightMenu */
    }

    #inventoryList {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap to the next line */
        justify-content: center; /* Centers items horizontally */
        gap: 10px; /* Adds space between items */
    }

    .inventory-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 120px;
        margin: 10px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.8);
        text-align: center;
    }

    .inventory-item img {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
    }

    .inventory-item p {
        margin: 0;
        font-size: 14px;
    }

    .inventory-item .item-name {
        font-weight: bold; /* Make the item name bold */
    }

    p.lock-icon {
    margin: 0;
    padding: 0;
    display: inline; /* Zorgt ervoor dat het zich inline gedraagt en geen blokniveau-element is */
}

.bet-option button {
    margin-bottom: 5px;
    width: 130px; /* Vaste breedte voor alle knoppen */
    height: 40px; /* Vaste hoogte voor alle knoppen */
    padding: 2px 10px; /* Aangepaste padding voor betere tekst uitlijning */
    white-space: nowrap; /* Voorkomt dat de tekst op meerdere regels springt */
}

#missionsMenu {
    display: none;
    position: absolute;
    left: -500px;
    top: 50%;
    transform: translateY(-50%);
    width: 450px;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
    z-index: 10;
    max-height: 700px; /* Set a maximum height for the menu */
    overflow-y: auto; /* Enable vertical scrolling */
}

#businessMenu {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    top: 30px;
    right: 1100px;
    display: none;
    flex-direction: column;
    align-items: left;
    z-index: 10;
    width: 380px;
    max-height: 1000px; /* Match missionsMenu max height */
    overflow-y: auto; /* Enable vertical scrolling */
}

.business-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.business-item h3 {
    margin: 0 0 5px 0;
    color: #333;
}

.business-item p {
    margin: 5px 0;
    font-size: 14px;
}

.business-item span {
    display: block;
    margin-top: 5px;
    font-weight: bold;
    color: #444;
}

.menu-header {
    color: #444;
    border-bottom: 2px solid rgba(255, 0, 0, 0.3);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Pony Payouts: dark betting shop menu around the race broadcast. */
#goobRaceMenu {
    position: absolute;
    left: 50%;
    top: 670px;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 965px;
    height: 970px;
    box-sizing: border-box;
    overflow: hidden;
    color: #f2e2d8;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(47,28,26,.98), rgba(22,16,15,.98));
    box-shadow: 0 5px 20px rgba(0,0,0,.4);
    font-family: Arial, sans-serif;
    container: pony-race / inline-size;
}

#goobRaceMenu *, #goobRaceMenu *::before, #goobRaceMenu *::after { box-sizing: border-box; }

.pony-shop-header {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 14px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(to right, #592721, #8a4636);
}
.pony-shop-mark {
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    height: 37px;
    border: 2px solid rgba(255,224,199,.8);
    border-radius: 5px;
    color: white;
    background: rgba(43,15,13,.38);
    font: 900 13px/1 Arial, sans-serif;
}
.pony-shop-title { min-width: 0; flex: 1; }
.pony-shop-title h3 { margin: 0; color: white; font-size: 1.4em; line-height: 1; }
.pony-shop-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 5px;
    color: white;
    background: transparent;
    font: 24px/1 Arial, sans-serif;
    cursor: pointer;
}
.pony-shop-close:hover { background: rgba(0,0,0,.18); }
.pony-shop-content { height: calc(100% - 52px); overflow-y: auto; padding: 16px 0; scrollbar-color: #8a4636 #241815; }
.pony-shop-inner { width: calc(100% - 24px); max-width: 850px; margin: 0 auto; }
.pony-shop-guide {
    max-width: 750px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto 11px;
    color: #e2dddd;
    font: bold 11px/1.2 Arial, sans-serif;
}
.pony-shop-guide > span {
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    color: white;
    background: red;
    white-space: nowrap;
}
.pony-shop-guide b { color: white; margin-right: 5px; }
.pony-shop-guide small { margin-left: auto; color: #aaa3a3; font: 11px/1.2 Arial, sans-serif; white-space: nowrap; }

.pony-tv {
    width: 100%;
    padding: 14px 14px 0;
    margin-bottom: 11px;
    border: 4px solid #4b2b1b;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 30% 42%, rgba(210,151,93,.22), transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 6px, rgba(40,19,9,.12) 7px, transparent 10px),
        linear-gradient(100deg, #5d351f, #a26d47 23%, #704328 58%, #ad7950 82%, #57311f);
    box-shadow: inset 2px 2px rgba(242,192,129,.45), inset -3px -3px #2d170e, 0 7px 0 #25150e, 0 13px 22px rgba(0,0,0,.4);
}
.pony-tv-screen {
    position: relative;
    overflow: hidden;
    border: 5px solid #090f0e;
    border-radius: 18px;
    background: #211816;
    box-shadow: 0 0 0 1px #885842, inset 0 0 30px rgba(0,0,0,.75), 0 0 12px rgba(190,117,79,.14);
}
.pony-tv-screen::before {
    content: "";
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 5% 20%, rgba(255,255,255,.6) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 68%, rgba(255,255,255,.32) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 12%, rgba(255,255,255,.35) 0 1px, transparent 2px),
        radial-gradient(circle at 53% 81%, rgba(255,255,255,.34) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 26%, rgba(255,255,255,.4) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 77%, rgba(255,255,255,.38) 0 1px, transparent 2px);
    opacity: .46;
    animation: pony-crt-flicker 5s steps(2, end) infinite;
}
.pony-tv-screen::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
    border-radius: 13px;
    background:
        radial-gradient(ellipse 62% 70% at 50% 48%, transparent 39%, rgba(0,0,0,.22) 73%, rgba(0,0,0,.8) 100%),
        linear-gradient(117deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 13%, transparent 25% 82%, rgba(255,255,255,.025) 94%, transparent 100%),
        repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0 1px, rgba(255,255,255,.018) 1px 2px, transparent 2px 3px),
        linear-gradient(rgba(75,80,77,.17), rgba(75,80,77,.17));
    box-shadow: inset 0 0 35px 5px rgba(0,0,0,.38), inset 2px 0 rgba(255,125,105,.05), inset -2px 0 rgba(115,175,255,.05);
}
.pony-tv-static {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 2px 3px, rgba(255,255,255,.08) 0 .6px, transparent 1px) 0 0 / 9px 11px repeat,
        radial-gradient(circle at 6px 8px, rgba(0,0,0,.1) 0 .8px, transparent 1.3px) 0 0 / 13px 17px repeat;
    animation: pony-tv-grain 0.38s steps(3, end) infinite;
}
@keyframes pony-tv-grain {
    0% { background-position: 0 0, 0 0; }
    33% { background-position: 3px -2px, -4px 2px; }
    66% { background-position: -2px 4px, 3px -3px; }
}
@keyframes pony-crt-flicker {
    0%, 94%, 100% { opacity: .46; }
    95% { opacity: .6; }
    97% { opacity: .35; }
}
.pony-broadcast-bar, .pony-tv-ticker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0 10px;
    color: #efcfb8;
    background: #452820;
    font: bold 10px/1 monospace;
    letter-spacing: 1px;
}
.pony-broadcast-bar { border-bottom: 2px solid #86523b; }
.pony-tv-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffe4bd;
    font: bold 11px/1 monospace;
}
.pony-tv-live i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f44336;
    box-shadow: 0 0 4px #f44336;
    animation: pony-live-pulse 1.35s ease-in-out infinite;
}
@keyframes pony-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 4px #f44336; }
    50% { opacity: .65; transform: scale(1.5); box-shadow: 0 0 11px 3px rgba(244,67,54,.85); }
}
@media (prefers-reduced-motion: reduce) {
    .pony-tv-live i { animation: none; }
    .pony-tv-screen::before { animation: none; }
    .pony-tv-static { animation: none; }
}
.pony-broadcast-bar strong { color: #f4d2b9; font: inherit; white-space: nowrap; }
.pony-broadcast-bar small { color: #d7ae94; font: inherit; }
.pony-tv-ticker { height: 25px; border-top: 2px solid #86523b; background: #311d19; }
.pony-tv-ticker span:last-child { color: #bfa99a; }
.pony-tv-ticker strong { color: #f4d2b9; font: inherit; }
.pony-tv-chin {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 5px;
    color: #f0d7ae;
    font: bold 10px/1 monospace;
    letter-spacing: 1px;
    text-shadow: 1px 1px #000;
}
.pony-tv-power { margin-left: auto; width: 14px; height: 14px; border: 1px solid #422613; border-radius: 50%; background: radial-gradient(circle, #e7a35c 0 2px, #55402a 3px 5px, #d3a875 6px); box-shadow: 0 0 4px rgba(231,163,92,.5); }
.pony-tv-vents { width: 65px; height: 9px; background: repeating-linear-gradient(90deg, #24170f 0 3px, #9c6a45 3px 7px); }

.pony-stake-panel, .pony-odds-panel {
    width: 100%;
    border: 1px solid rgba(160,87,65,.58);
    border-radius: 8px;
    background: rgba(35,20,18,.72);
    padding: 9px 11px;
    margin-bottom: 12px;
}
.pony-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.pony-panel-heading strong, .pony-panel-heading h4 { color: #e4a47f; margin: 0; font: bold 14px/1 Arial, sans-serif; }
.pony-panel-heading span, .pony-panel-heading p { color: #c7afa4; margin: 0; font: 11px/1.2 Arial, sans-serif; }
.pony-stake-row { display: grid; grid-template-columns: 210px 1fr; align-items: end; gap: 9px; }
.pony-stake-row label { min-width: 0; color: #e4b18f; font: bold 11px/1.2 Arial, sans-serif; }
#ponyRaceBetAmount {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 4px;
    padding: 4px 9px;
    border: 1px solid rgba(181,107,78,.68);
    border-radius: 6px;
    outline: none;
    color: white;
    background: rgba(27,18,16,.95);
    font: 15px/1 Arial, sans-serif;
}
#ponyRaceBetAmount:focus { border-color: #e6aa83; box-shadow: 0 0 0 2px rgba(230,170,131,.2); }
.pony-quick-bets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pony-quick-bets button {
    height: 34px;
    border: 0;
    border-radius: 5px;
    color: white;
    background: red;
    font: bold 12px/1 Arial, sans-serif;
    cursor: pointer;
}
.pony-quick-bets button:hover { background: darkred; }
#ponyRaceBetPreview { min-height: 14px; margin: 7px 0 0; color: #ccc; font: 12px/1.3 Arial, sans-serif; }

.pony-odds-panel { margin-bottom: 8px; }
#bettingOptions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.pony-odds-card {
    --ticket: #4caf50;
    --ticket-dark: #388e3c;
    --ticket-rgb: 76,175,80;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(var(--ticket-rgb),.4);
    border-radius: 8px;
    color: #eee;
    background: rgba(27,19,17,.72);
}
.pony-odds-card-2 { --ticket: #2196f3; --ticket-dark: #1976d2; --ticket-rgb: 33,150,243; }
.pony-odds-card-3 { --ticket: #ff9800; --ticket-dark: #f57c00; --ticket-rgb: 255,152,0; }
.pony-odds-card-4 { --ticket: #f44336; --ticket-dark: #d32f2f; --ticket-rgb: 244,67,54; }
.pony-card-top { display: flex; align-items: center; gap: 5px; min-width: 0; margin: -7px -7px 7px; padding: 7px; border-radius: 7px 7px 0 0; background: rgba(var(--ticket-rgb),.3); font: bold 11px/1.1 Arial, sans-serif; }
.pony-card-number { display: grid; flex: 0 0 20px; place-items: center; height: 20px; border-radius: 4px; color: white; background: var(--ticket); }
.pony-card-top span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pony-card-stats { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; }
.pony-card-stats strong { color: var(--ticket); font: bold 20px/1 Arial, sans-serif; }
.pony-card-stats span { color: #bbb; font: 11px/1 Arial, sans-serif; white-space: nowrap; }
.pony-card-preview { min-height: 14px; margin: 7px 0 5px; color: var(--ticket); font: 11px/1.2 Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pony-odds-card button {
    width: 100%;
    height: 30px;
    margin-top: auto;
    border: none;
    border-radius: 4px;
    color: white;
    background: linear-gradient(to bottom, var(--ticket), var(--ticket-dark));
    font: bold 13px/1 Arial, sans-serif;
    cursor: pointer;
}
.pony-odds-card button:hover { filter: brightness(1.1); }
#goobRaceMenu button:disabled { opacity: .45; cursor: not-allowed; }
#goobRaceMenu button:focus-visible { outline: 2px solid #e6aa83; outline-offset: 2px; }
#raceCooldown { margin: 8px 0 1px; padding: 7px; color: #ff6666; text-align: center; font: 13px/1.2 Arial, sans-serif; }
#raceTimer { font-weight: bold; }

@container pony-race (max-width: 760px) {
    .pony-shop-guide { flex-wrap: wrap; }
    .pony-shop-guide small { margin-left: 0; }
    .pony-stake-row { grid-template-columns: 1fr; }
    #bettingOptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pony-race (max-width: 440px) {
    .pony-shop-title h3 { font-size: 16px; }
    .pony-broadcast-bar small, .pony-tv-ticker span:last-child { display: none; }
    .pony-panel-heading span { display: none; }
}
/* The track stays pixel sharp inside the television picture. */
#raceTrack {
    width: 100%;
    height: 368px;
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 4px solid #65502c;
    border-radius: 5px;
    box-shadow: 0 5px 0 #312719, inset 0 0 0 2px #c7a763, 0 12px 24px rgba(0, 0, 0, .35);
    background: #d6b276;
    box-sizing: border-box;
}

#raceTrack *, #raceTrack *::before, #raceTrack *::after { box-sizing: border-box; }

.pony-infield {
    height: 32px;
    padding: 5px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffe6a0;
    font: bold 11px/1 monospace;
    letter-spacing: 2px;
    text-shadow: 2px 2px #291410;
    background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.08) 18px 20px), linear-gradient(#72382b 0 45%, #49251f 45% 100%);
    border-bottom: 5px solid #f3e4bb;
    box-shadow: inset 0 -8px #895b32;
}

.pony-track-lanes {
    height: 328px;
    position: relative;
    background: #dfc48d;
}

.pony-lane {
    height: 82px;
    position: relative;
    background-color: #dfc48d;
    background-image:
        radial-gradient(circle at 6% 24%, rgba(127,91,52,.25) 0 1px, transparent 2px),
        radial-gradient(circle at 14% 78%, rgba(255,240,201,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 43%, rgba(146,102,54,.22) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 15%, rgba(255,238,194,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 39% 67%, rgba(128,87,47,.23) 0 1px, transparent 2px),
        radial-gradient(circle at 47% 32%, rgba(255,239,199,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 56% 84%, rgba(148,103,53,.24) 0 1px, transparent 2px),
        radial-gradient(circle at 65% 19%, rgba(255,236,190,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 73% 58%, rgba(131,91,48,.22) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 36%, rgba(255,239,201,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 73%, rgba(135,91,49,.25) 0 1px, transparent 2px),
        radial-gradient(circle at 10% 54%, rgba(158,113,62,.22) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 11%, rgba(251,230,183,.7) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 87%, rgba(142,96,50,.2) 0 1px, transparent 2px),
        radial-gradient(circle at 35% 51%, rgba(255,239,202,.7) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 9%, rgba(153,107,54,.21) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 60%, rgba(249,229,184,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 43%, rgba(134,92,49,.2) 0 1px, transparent 2px),
        radial-gradient(circle at 69% 89%, rgba(251,233,189,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 8%, rgba(151,105,52,.22) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 56%, rgba(248,224,177,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 95% 29%, rgba(141,99,51,.2) 0 1px, transparent 2px),
        radial-gradient(ellipse 100px 26px at 18% 42%, rgba(246,222,175,.45), transparent),
        radial-gradient(ellipse 135px 31px at 67% 75%, rgba(174,128,71,.12), transparent),
        radial-gradient(ellipse 95px 25px at 89% 16%, rgba(248,224,178,.38), transparent);
    background-repeat: no-repeat;
}

.pony-lane:nth-child(odd) { filter: brightness(.97); }

.pony-lane::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .6;
    background:
        linear-gradient(70deg, transparent 39%, #5e7d3e 42% 55%, transparent 58%) 13% 59% / 7px 8px no-repeat,
        linear-gradient(110deg, transparent 39%, #73924b 42% 55%, transparent 58%) calc(13% + 4px) 59% / 7px 8px no-repeat,
        linear-gradient(70deg, transparent 39%, #6f8d49 42% 55%, transparent 58%) 43% 22% / 6px 7px no-repeat,
        linear-gradient(110deg, transparent 39%, #58783b 42% 55%, transparent 58%) calc(43% + 4px) 22% / 6px 7px no-repeat,
        linear-gradient(70deg, transparent 39%, #668445 42% 55%, transparent 58%) 77% 70% / 7px 8px no-repeat,
        linear-gradient(110deg, transparent 39%, #7b9850 42% 55%, transparent 58%) calc(77% + 4px) 70% / 7px 8px no-repeat;
}
.pony-lane:nth-child(odd)::before { transform: scaleX(-1); }

.pony-lane::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 8px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(transparent 0 2px, #f5edd6 2px 5px, #aa9873 5px 6px, transparent 6px), repeating-linear-gradient(90deg, transparent 0 42px, #f1e8d1 42px 45px, #ad9a74 45px 47px, transparent 47px 51px);
}

.pony-lane-number {
    position: absolute;
    left: 4px;
    top: 31px;
    width: 20px;
    height: 20px;
    z-index: 5;
    display: grid;
    place-items: center;
    color: #fff5d5;
    background: #5e452e;
    border: 2px solid #e5c482;
    box-shadow: 2px 2px #714b2a;
    font: bold 12px/1 monospace;
}

.pony-finish {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: 24px;
    width: 14px;
    background: repeating-conic-gradient(#fff4da 0 25%, #30251e 0 50%) 0 0 / 14px 14px;
    box-shadow: -3px 0 #5d3c27, 3px 0 #5d3c27;
}

#raceTrack .racer {
    position: absolute;
    left: 26px;
    top: 11px;
    width: 94px;
    height: 60px;
    z-index: 2;
    transition: left 5s cubic-bezier(.35, .08, .72, .98);
    filter: drop-shadow(3px 4px 0 rgba(79, 48, 27, .38));
}

#goob1 { --coat: #75492d; --coat-light: #aa7143; --mane: #2e211c; --silk: #3c9d52; }
#goob2 { --coat: #a56832; --coat-light: #ce9755; --mane: #58341e; --silk: #2d8de1; }
#goob3 { --coat: #d0ab67; --coat-light: #ecd39a; --mane: #69502b; --silk: #ed9b1f; }
#goob4 { --coat: #5c433b; --coat-light: #927265; --mane: #281e1c; --silk: #dd453d; }

@media (max-height: 700px) {
    #raceTrack { height: 312px; }
    .pony-track-lanes { height: 272px; }
    .pony-lane { height: 68px; }
    .pony-lane-number { top: 24px; }
    #raceTrack .racer { top: 4px; }
}

.pony-horse { position: relative; width: 78px; height: 50px; transform: scale(1.2); transform-origin: left top; }
.pony-horse > span { position: absolute; display: block; }
.pony-body {
    left: 18px; top: 17px; width: 40px; height: 20px;
    background: linear-gradient(#3e291e 0 3px, var(--coat-light) 3px 8px, var(--coat) 8px 100%);
    clip-path: polygon(0 20%, 8% 0, 90% 0, 100% 20%, 100% 80%, 88% 100%, 10% 100%, 0 80%);
}
.pony-neck {
    left: 51px; top: 9px; width: 16px; height: 28px;
    background: linear-gradient(90deg, var(--coat) 0 65%, var(--coat-light) 65%);
    clip-path: polygon(0 40%, 35% 0, 100% 0, 100% 62%, 68% 62%, 55% 100%, 0 100%);
}
.pony-head {
    left: 62px; top: 8px; width: 16px; height: 17px;
    background: linear-gradient(#30231d 0 3px, var(--coat-light) 3px 65%, var(--coat) 65%);
    clip-path: polygon(0 0, 70% 0, 85% 22%, 85% 55%, 100% 55%, 100% 88%, 80% 100%, 28% 100%, 15% 70%, 0 70%);
}
.pony-ear { left: 65px; top: 2px; width: 5px; height: 10px; background: var(--coat); clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%); }
.pony-eye { left: 72px; top: 14px; width: 2px; height: 2px; background: #171511; z-index: 2; }
.pony-mane {
    left: 52px; top: 7px; width: 12px; height: 18px;
    background: var(--mane);
    clip-path: polygon(25% 0, 100% 0, 74% 24%, 82% 43%, 47% 39%, 60% 62%, 16% 56%, 31% 82%, 0 100%, 0 30%);
}
.pony-tail {
    left: 2px; top: 17px; width: 22px; height: 20px;
    background: var(--mane);
    clip-path: polygon(100% 0, 65% 30%, 20% 22%, 0 58%, 35% 48%, 5% 100%, 60% 70%, 90% 40%);
    transform-origin: right top;
}
.pony-leg {
    top: 31px; width: 6px; height: 18px;
    background: linear-gradient(var(--coat) 0 78%, #2c231e 78%);
    transform-origin: center top;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 100% 100%, 0 100%);
}
.pony-leg-back { left: 25px; }
.pony-leg-rear { left: 34px; filter: brightness(.7); }
.pony-leg-front { left: 48px; }
.pony-leg-far { left: 55px; filter: brightness(.7); }
.pony-saddle {
    left: 35px; top: 16px; width: 17px; height: 17px;
    z-index: 2;
    color: #fff;
    background: var(--silk);
    border: 2px solid #f4e2bd;
    text-align: center;
    font: bold 10px/13px monospace;
    text-shadow: 1px 1px #25201a;
}
.pony-jockey {
    left: 39px; top: 7px; width: 12px; height: 12px;
    z-index: 3;
    background: var(--silk);
    clip-path: polygon(0 0, 75% 0, 100% 55%, 75% 100%, 0 80%);
}
.pony-helmet {
    left: 40px; top: 1px; width: 9px; height: 9px;
    z-index: 3;
    background: linear-gradient(var(--silk) 0 4px, #f5d8a4 4px 100%);
    box-shadow: 2px 0 var(--mane);
}

.racer.is-running .pony-horse { animation: pony-gallop .28s steps(2, end) infinite; }
.racer.is-running::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 51px;
    width: 4px;
    height: 4px;
    background: #ebcc93;
    box-shadow: -6px 3px #e1bd80, -12px 0 #f0d5a1, -18px 5px #cfa66d;
    animation: pony-dust .28s steps(2, end) infinite;
}
.racer.is-running .pony-tail { animation: pony-tail-swish .28s steps(2, end) infinite; }
.racer.is-running .pony-leg-back, .racer.is-running .pony-leg-far { animation: pony-leg-stride .28s steps(2, end) infinite; }
.racer.is-running .pony-leg-rear, .racer.is-running .pony-leg-front { animation: pony-leg-stride .28s steps(2, end) infinite reverse; }
.racer.winner .pony-saddle { box-shadow: 0 0 0 3px #ffe173, 0 0 12px 5px #ffe173; }

@keyframes pony-gallop {
    0%, 100% { transform: scale(1.2); }
    50% { transform: translateY(-4px) scale(1.2); }
}
@keyframes pony-dust { 50% { opacity: .35; transform: translate(-3px, -2px); } }
@keyframes pony-tail-swish { 50% { transform: rotate(-16deg); } }
@keyframes pony-leg-stride { 50% { transform: rotate(34deg); } }

.bet-option {
    text-align: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.bet-option button {
    margin-bottom: 5px;
}

.bet-option p {
    margin: 0;
    font-size: 12px;
}

.bet-option button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

#notification {
    animation: slideDown 0.3s ease-out;
}

/* Daily Rewards Styling */
#dailyRewardsMenu {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    position: absolute;
    left: -500px;
    top: 49%;
    transform: translateY(-50%);
    z-index: 10;
}

.streak-container {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    gap: 10px;
}

.day-block {
    background: #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    flex: 1;
    transition: all 0.3s ease;
}

.day-block.claimed {
    background: #4CAF50;
    color: white;
}

.day-block .reward {
    font-weight: bold;
    margin-top: 5px;
    font-size: 0.9em;
}

#currentStreak {
    font-size: 24px;
    font-weight: bold;
    color: #4CAF50;
    margin: 10px 0;
}

#claimRewardBtn {
    background-color: red;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    margin: 15px 0;
}

#claimRewardBtn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

#nextRewardTime {
    color: #666;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}

.special-reward {
    font-size: 0.8em;
    color: #4CAF50;
    margin-top: 5px;
}

.message-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.message-tabs button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.tab-active {
    background: #4CAF50;
    color: white;
}

.message-tabs button {
    background: linear-gradient(to bottom, #3c3c3c, #282828);
}

.message-tabs button.tab-active {
    background: linear-gradient(to bottom, #8B0000, #660000) !important;
}

.message-list {
    max-height: 400px;
    overflow-y: auto;
}

.message-item {
    padding: 10px;
    margin: 5px 0;
    background: #d8d8d8;
    border-radius: 5px;
    cursor: pointer;
}

.message-item.unread {
    font-weight: bold;
    background: #ececec;
}

.message-item.mass-message {
    box-shadow:
        0 0 0 1px rgba(255, 40, 40, 0.9),
        0 0 12px 2px rgba(220, 0, 0, 0.85),
        0 0 24px 4px rgba(180, 0, 0, 0.45);
}

#messageContent {
    width: 100%;
    height: 100px;
    margin: 10px 0;
    padding: 8px;
    border-radius: 5px;
    resize: none;
}

#messageReceiver {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border-radius: 5px;
}

.message-badge {
    background-color: red;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    top: -5px;
    right: -5px;
}

#messageBtn {
    position: relative;
}

.message-item button {
    margin-top: 5px;
    padding: 3px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.message-item button:hover {
    background-color: #0056b3;
}

.message-buttons {
    margin-top: 5px;
}

.message-buttons button {
    margin-right: 5px;
}

.delete-btn {
    background-color: #dc3545 !important;
}

.delete-btn:hover {
    background-color: #c82333 !important;
}

/* Heist Menu Styling */
.heist-stats-container {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
}

.stat-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}

.stat-label {
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.3em; /* Grotere tekst voor stats */
}

.stat-item {
    padding: 8px 12px; /* Meer ruimte in stat items */
}

.cooldown-timer {
    text-align: center;
    color: #e74c3c;
    margin: 5px 0 0 0;
    font-weight: bold;
    display: none;
    font-size: 1.2em; /* Grotere cooldown timer */
}

.heist-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.heist-buttons, .upgrade-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.heist-btn, .upgrade-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px; /* Meer ruimte in knoppen */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s;
    min-width: 115px;
    font-size: 1.1em; /* Grotere basis tekstgrootte */
}

.heist-btn {
    background-color: #c0392b;
    color: white;
}

.upgrade-btn {
    background-color: #2c3e50;
    color: white;
}

.heist-btn:hover, .upgrade-btn:hover {
    transform: scale(1.02);
}

.heist-name, .upgrade-name {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1.3em; /* Grotere namen */
}

.heist-chance, .upgrade-cost {
    font-size: 1.2em; /* Grotere kansen/kosten */
    margin: 3px 0;
}

.heist-values {
    font-size: 1.1em; /* Grotere waardes */
    opacity: 0.9; /* Iets meer zichtbaar */
    margin-top: 5px;
}

.upgrades-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1.4em; /* Grotere headers */
}

/* Disabled button states */
.heist-btn:disabled, .upgrade-btn:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
    transform: none;
}

/* Pas de breedte van het menu aan */
#heistMenu {
    width: 400px; /* Behoud deze breedte */
}

#heistMenu .heist-btn-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

#heistMenu .heist-lock-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 8px 6px;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    font-size: 0.78em;
    font-weight: bold;
    line-height: 1.35;
    z-index: 2;
    pointer-events: none;
}

#heistMenu .heist-lock-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.72);
    z-index: 0;
}

#heistMenu .heist-lock-icon-wrap,
#heistMenu .heist-lock-text {
    position: relative;
    z-index: 1;
}

#heistMenu .heist-lock-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ff0000;
    flex-shrink: 0;
}

#heistMenu .heist-lock-icon {
    height: 22px;
    width: auto;
    display: block;
}

#heistMenu .heist-lock-text {
    display: block;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Trash Pile fishing lock (same pattern as agility locks) */
#trashPileMenu .trash-search-btn-wrap {
    position: relative;
    width: 100%;
}

#trashPileMenu .trash-search-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(to bottom, #6b8e4e, #4a5c34);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 8px rgba(107, 142, 78, 0.3);
    transition: all 0.2s ease;
}

#trashPileMenu .trash-search-btn-wrap.is-fishing-locked,
#trashPileMenu .trash-search-btn-wrap.is-fishing-locked .trash-search-btn {
    cursor: pointer;
}

#trashPileMenu .trash-fishing-lock {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    z-index: 2;
    pointer-events: auto;
    overflow: hidden;
    cursor: pointer;
}

#trashPileMenu .trash-fishing-lock::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.72);
    z-index: 0;
}

#trashPileMenu .trash-fishing-lock-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
}

#trashPileMenu .trash-lock-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0088ff;
    flex-shrink: 0;
}

#trashPileMenu .trash-lock-icon {
    height: 16px;
    width: auto;
    display: block;
}

#trashPileMenu .trash-lock-text {
    display: block;
    color: #ffffff;
    font-size: 0.95em;
    font-weight: bold;
    line-height: 1.1;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

/* Maak de grid columns smaller */
.heist-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px; /* Iets meer ruimte tussen knoppen */
}

.upgrade-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Maak de knoppen groter */
.heist-btn, .upgrade-btn {
    min-width: 115px;
    padding: 8px;
    font-size: 1em;
}

/* Pas de upgrades grid aan */
.upgrades-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Maak de tekst beter leesbaar */
.heist-values, .upgrade-cost {
    font-size: 0.85em; /* Groter dan voorheen */
}

.heist-name, .upgrade-name {
    font-size: 0.95em; /* Groter dan voorheen */
    font-weight: bold;
}

/* Voeg wat padding toe aan de knoppen */
.heist-btn, .upgrade-btn {
    padding: 10px 8px;
}

/* Alleen de stats tekst aanpassen */
.stat-label, .stat-value {
    font-size: 1em; /* Terug naar normale grootte */
    font-weight: bold;
    color: #2c3e50;
}

.stat-item {
    padding: 5px 10px; /* Originele padding */
}

/* Locker Room Menu Styles */
#lockerRoomMenu {
    font-family: Arial, sans-serif;
    width: 550px;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    left: -600px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#lockerRoomMenu .locker-response-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

#lockerRoomMenu .locker-response-toggle span {
    display: block;
    line-height: 1;
}

.locker-room-header {
    color: #000;
    text-align: center;
    margin: 0 0 15px 0;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.locker-room-description {
    background-color: rgba(50, 50, 50, 0.1);
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid rgba(50, 50, 50, 0.3);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #000;
}

.locker-room-image {
    width: 200px;
    height: auto;
    margin: 10px auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.action-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}

.action-box {
    border: 2px solid #444;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.action-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #000;
}

.action-button {
    width: 100%;
    text-align: left;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #000;
}

.action-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 3px;
    display: block;
    color: #000;
}

.action-description {
    font-size: 13px;
    color: #000;
    margin-bottom: 3px;
}

.action-stats {
    font-size: 12px;
    color: #000;
    display: block;
    margin-top: 3px;
}

.requirements-box {
    margin-top: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    text-align: left;
}

.requirement-item {
    margin: 3px 0;
    font-size: 13px;
    color: #000;
}

.cooldown-timer {
    color: #ff0000;
    font-weight: bold;
}

/* Success/Fail Animation Classes */
.action-success {
    animation: successPulse 0.5s ease;
}

.action-fail {
    animation: failShake 0.5s ease;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); background-color: rgba(0, 255, 0, 0.1); }
    100% { transform: scale(1); }
}

@keyframes failShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    #lockerRoomMenu {
        width: 90%;
        left: 5%;
        transform: translateY(-50%);
    }

    .action-container {
        max-width: 100%;
    }

    .action-box {
        padding: 8px;
    }

    .action-title {
        font-size: 14px;
    }

    .action-description,
    .action-stats {
        font-size: 12px;
    }
}

#notification-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647;
}

/* Keep purchase feedback visible above the death screen, Hospital and stats bar. */
body.player-dead #notification-container {
    z-index: 2147483647 !important;
}

.game-notification {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: 2px solid #ff0000;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.notification-red {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ff0000 !important;
    color: #ff0000;
}

.notification-green {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #00ff00 !important;
    color: #00ff00;
}

.notification-blue {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #0066ff !important;
    color: #0066ff;
}

#messageReceiver, #messageContent {
    width: 90%; /* Verklein van 100% naar 90% */
    max-width: 400px; /* Voeg een maximum breedte toe */
    margin: 10px auto; /* Centreer de elementen */
}

#messageContent {
    height: 100px; /* Optioneel: pas de hoogte van het berichtveld aan */
}

#cityStatsMenu .menu-content {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 20px;
}

#cityStatsMenu h3 {
    color: #333;
    margin-bottom: 10px;
}

#cityStatsMenu p {
    margin: 5px 0;
    font-weight: bold;
}

/* Add to your existing CSS */
#eventMenu .menu-header {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 15px;
}

#eventMenu h5 {
    color: #2c3e50;
    margin: 10px 0;
}

#claimRewardsBtn:hover {
    background: #45a049;
}

#claimRewardsBtn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

#rewardsList li {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    margin: 5px 0;
}

.reward-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

#claimRewardsBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76,175,80,0.4);
    background: linear-gradient(90deg, #45a049, #3d8b40);
}

#progressBar {
    background-size: 200% 200%;
    animation: gradientMove 2s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes rainbow {
    0% { border: 2px solid #a0a49c }
    25% { border: 2px solid #ff0000;  }
    50% { border: 2px solid #a0a49c }
    75% { border: 2px solid #ff0000; }
    100% { border: 2px solid #a0a49c }
}

.rainbow-button {
    background-color: red;
    color: white;
    border: 2px solid;
    border-radius: 5px;
    font-weight: bold;
    padding: 1px 20px; /* Verminderd van 10px naar 5px voor top/bottom padding */
    font-size: 18px;
    cursor: pointer;
    margin: 5px 0;
    width: auto;
    animation: rainbow 4s linear infinite;
    transition: transform 0.2s;
}

.rainbow-button:hover {
    transform: scale(1.05);
}

.event-rewards-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-rewards-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-rewards-box li {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    margin: 5px 0;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.event-rewards-box li:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.event-rewards-box img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    object-fit: contain;
}



#viewPlayerMenu {
    display: none;
    flex-direction: column;
    width: 970px;
    height: 970px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

#viewPlayerMenuBody {
    flex: 1 1 auto;
    height: calc(970px - 48px); /* definite height so centering works */
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* whole left+right block in vertical middle */
    align-items: stretch;
    box-sizing: border-box;
    padding: 12px 16px;
    overflow: hidden;
}

#viewPlayerMenu .view-player-menu-header {
    flex-shrink: 0;
}

#playerSearchSection {
    flex-shrink: 0;
    padding: 0 0 12px;
    box-sizing: border-box;
}

#playerSearchSection.is-hidden {
    display: none !important;
}

#playerInfo {
    flex: 0 0 auto; /* content height only — body centers this block */
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#playerInfo > .view-player-profile-layout {
    width: 100%;
    max-height: 100%;
}

.view-player-profile-layout {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 16px;
    align-items: stretch; /* right column always matches left height */
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
}

.view-player-left-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

.view-player-details-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: stretch;
}

.view-player-details-row > div {
    height: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

#playerInfo::-webkit-scrollbar,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar {
    width: 8px;
}

#playerInfo::-webkit-scrollbar-track,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

#playerInfo::-webkit-scrollbar-thumb,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 252, 0.35);
    border-radius: 4px;
}

#playerInfo::-webkit-scrollbar-thumb:hover,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(125, 211, 252, 0.55);
}

.inventory-item .rare-item {
    color: red !important;
}

.titles-menu-body {
    height: calc(970px - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 0;
    box-sizing: border-box;
}

.titles-menu-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.titles-menu-inner > *:not(#titlesList):not(#titlesShopFooter) {
    flex-shrink: 0;
}

#titlesList {
    flex: 1 1 auto;
    min-height: 280px;
    background: rgba(38, 38, 44, 0.95);
    border-radius: 8px;
    padding: 10px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

#titlesShopFooter {
    flex-shrink: 0;
}

.titles-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
    color: #b8bcc4;
    box-sizing: border-box;
}

/* Titles menu — magical glisten over STATUS banner center */
.titles-banner-wrap {
    position: relative;
    height: 280px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titles-banner-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.92) saturate(1.05);
    display: block;
}

.titles-banner-magic {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.titles-magic-glow {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 88%;
    height: 48%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 235, 160, 0.28) 0%,
        rgba(200, 230, 255, 0.14) 38%,
        rgba(255, 200, 120, 0.06) 58%,
        transparent 78%
    );
    filter: blur(12px);
    animation: titlesMagicPulse 3.5s ease-in-out infinite;
    mix-blend-mode: screen;
}

.titles-magic-glow--soft {
    width: 72%;
    height: 38%;
    top: 40%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 220, 150, 0.08) 42%,
        transparent 75%
    );
    filter: blur(8px);
    animation: titlesMagicPulse 2.8s ease-in-out infinite reverse;
    animation-delay: 0.5s;
}

.titles-magic-sparkle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    animation: titlesStarGlint 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.titles-magic-sparkle::before,
.titles-magic-sparkle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 35%,
        #fff 50%,
        rgba(255, 230, 150, 0.95) 65%,
        transparent 100%
    );
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.95), 0 0 28px rgba(255, 255, 255, 0.6);
}

.titles-magic-sparkle::before {
    width: 100%;
    height: 4px;
}

.titles-magic-sparkle::after {
    width: 4px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 35%,
        #fff 50%,
        rgba(255, 230, 150, 0.95) 65%,
        transparent 100%
    );
}

.titles-magic-sparkle--large {
    width: 42px;
    height: 42px;
    animation-duration: 4s;
}

.titles-magic-sparkle--large::before {
    height: 5px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 36px rgba(255, 255, 255, 0.8);
}

.titles-magic-sparkle--large::after {
    width: 5px;
}

.titles-magic-sparkle--cyan::before,
.titles-magic-sparkle--cyan::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 240, 255, 0.9) 40%,
        #e8f8ff 50%,
        rgba(180, 220, 255, 0.9) 60%,
        transparent
    );
    box-shadow: 0 0 16px rgba(150, 220, 255, 0.9), 0 0 28px rgba(255, 255, 255, 0.55);
}

.titles-magic-dust {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe9a8 40%, transparent 70%);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    animation: titlesDustTwinkle 2.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.titles-banner-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 15px 15px 10px;
    color: white;
}

.titles-banner-caption p {
    margin: 0;
    font-size: 1.1em;
    font-style: italic;
    text-shadow: 1px 1px 2px black;
}

@keyframes titlesMagicPulse {
    0%, 100% {
        opacity: 0.22;
        transform: translate(-50%, -50%) scale(0.92);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes titlesStarGlint {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }
    12% {
        opacity: 0;
    }
    28% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.35) rotate(22deg);
    }
    42% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.2) rotate(45deg);
    }
    58% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.85) rotate(60deg);
    }
    75%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.15) rotate(90deg);
    }
}

@keyframes titlesDustTwinkle {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    55% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }
}

.title-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.title-rarity-meta {
    color: #b8bcc4;
}

.title-job-meta {
    color: #ffc107;
    font-weight: bold;
}

.title-name {
    font-weight: bold;
}

.title-name.common { color: #ffffff; }
.title-name.rare { color: #0099ff; }
.title-name.epic { color: #ff00ff; }
.title-name.legendary { color: #ffaa00; }

.title-price {
    color: #e8e8ec !important;
}

/* Standaard button styling in titlesMenu (voor buy buttons) */
#titlesMenu button:not(.set-active-button) {
    background-color: #ff4444 !important;
    color: white !important;
    border: none !important;
    padding: 5px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

#titlesMenu button:not(.set-active-button):hover {
    background-color: #ff6666 !important;
}

/* Specifieke styling voor set-active buttons */
#titlesMenu .set-active-button {
    background-color: #44b544 !important;
    color: white !important;
    border: none !important;
    padding: 5px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

#titlesMenu .set-active-button:hover {
    background-color: #4dc74d !important;
}

#titlesMenu button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Developer Title - Rood met VELE vallende sparkles */
@keyframes devRedPulse {
    0%, 100% { 
        color: #FF0000;
        text-shadow: 
            0 0 10px rgba(255, 0, 0, 0.9),
            0 0 20px rgba(255, 0, 0, 0.7),
            0 0 30px rgba(255, 0, 0, 0.5);
    }
    50% { 
        color: #FF3333;
        text-shadow: 
            0 0 15px rgba(255, 0, 0, 1),
            0 0 30px rgba(255, 0, 0, 0.9),
            0 0 45px rgba(255, 0, 0, 0.7);
    }
}

@keyframes sparkleFall {
    0% { 
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: translateY(40px) scale(0.2) rotate(360deg);
        opacity: 0;
    }
}

/* ===== LEGENDARY TITLE - CELEBRITY EDITION ===== */

.title-name.legendary {
    position: relative !important;
    color: #FFD700 !important;  /* Goud */
    font-weight: bold !important;
    font-size: 0.9em !important;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 1),
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(255, 140, 0, 0.6),
        0 0 40px rgba(255, 69, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    animation: celebrityShine 3s ease-in-out infinite !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    letter-spacing: 1px !important;
}





/* Zwevende sparkles */
@keyframes sparkleFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateX(-50%) translateY(-3px) scale(1.2) rotate(5deg);
        opacity: 0.8;
    }
    50% {
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    75% {
        transform: translateX(-50%) translateY(-3px) scale(1.2) rotate(-5deg);
        opacity: 0.8;
    }
}

/* Override voor #statName */
#statName .title-name.legendary {
    position: relative !important;
    color: #FFD700 !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 1),
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(255, 140, 0, 0.6),
        0 0 40px rgba(255, 69, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    animation: celebrityShine 3s ease-in-out infinite !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    letter-spacing: 1px !important;
}



@keyframes epicRedGlow {
    0% { 
        color: #ff3333; 
        text-shadow: 0 0 10px rgba(255, 51, 51, 0.9), 0 0 20px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.4);
    }
    50% { 
        color: #ff6666; 
        text-shadow: 0 0 15px rgba(255, 102, 102, 1), 0 0 25px rgba(255, 51, 51, 0.8), 0 0 35px rgba(255, 0, 0, 0.6);
    }
    100% { 
        color: #ff3333; 
        text-shadow: 0 0 10px rgba(255, 51, 51, 0.9), 0 0 20px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.4);
    }
}

@keyframes epicBlink {
    0%, 90%, 100% { opacity: 1; }
    93%, 97% { opacity: 0.3; }
    95% { opacity: 1; }
}

@keyframes epicFirework {
    0% { 
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% { 
        transform: translate(var(--tx), var(--ty)) scale(1);
        opacity: 0;
    }
}



.title-name.epic {
    position: relative;
    animation: epicRedGlow 2s ease-in-out infinite, epicBlink 4s ease-in-out infinite;
    font-weight: bold;
    display: inline-block;
    padding: 0 20px;
}

.title-name.epic::before,
.title-name.epic::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 16px;
    background-image: url('images/blob.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: epicFirework 1.5s ease-out infinite;
}

.title-name.epic::before {
    --tx: -20px;
    --ty: -15px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    animation-delay: 0s;
}

.title-name.epic::after {
    --tx: 20px;
    --ty: -15px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    animation-delay: 0.75s;
}


.citizen-item:hover {
    background: rgba(0, 0, 0, 0.1);
}

.citizen-name {
    font-weight: bold;
}

#citizensMenu {
    position: absolute;
    left: -640px;
    top: 50%;
    transform: translateY(-50%);
    width: 570px;
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    z-index: 10;
}

.citizen-item:hover {
    background: rgba(0, 0, 0, 0.1);
}

.citizen-name {
    font-weight: bold;
}

.legendary {
    color: #FFD700;
    font-weight: bold;
}
.epic {
    color: #A335EE;
    font-weight: bold;
}
.rare {
    color: #0070DD;
    font-weight: bold;
}
.uncommon {
    color: #1EFF00;
    font-weight: bold;
}
.common {
    color: #FFFFFF;
    font-weight: bold;
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}



#updateText {
    white-space: nowrap;
    animation: none;
    display: inline-block;  /* Zorgt dat de container zo breed wordt als de tekst */
    padding: 0 20px;
    position: relative;
    min-width: 100%;  /* Minimaal zo breed als de container */
}

.dynamic-stat {
    display: inline-block;
    min-width: 6ch; /* reserveer ruimte zodat de breedte niet springt als cijfers binnenkomen */
}

#cityUpdates {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.alert-content {
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
    max-width: 400px;
    margin: 0 auto;
}

.alert-content h3 {
    margin-bottom: 15px;
    color: #ff4444;
}

.alert-content p {
    margin: 10px 0;
}

.alert-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.alert-button {
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.alert-button.confirm {
    background: #ff4444;
    color: white;
}

.alert-button.cancel {
    background: #666;
    color: white;
}

.alert-button:hover {
    transform: scale(1.05);
}

.sewer-harvest-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.82);
}

.alert-content.sewer-harvest-result {
    width: min(360px, calc(100vw - 40px));
    box-sizing: border-box;
    margin: 260px 20px 20px;
    padding: 22px 24px 20px;
    overflow: hidden;
    border: 1px solid var(--harvest-color);
    background:
        radial-gradient(circle at 50% 38%, var(--harvest-background), transparent 58%),
        linear-gradient(180deg, rgba(26, 28, 22, 0.98), rgba(8, 10, 7, 0.98));
    box-shadow: 0 0 24px var(--harvest-glow), 0 12px 38px rgba(0, 0, 0, 0.75);
}

.alert-content.sewer-harvest-result h3 {
    margin: 0 0 15px;
    color: var(--harvest-color);
    font-size: 1.45em;
    text-shadow: 0 0 10px var(--harvest-glow);
}

.sewer-harvest-result__image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 174px;
    height: 174px;
    margin: 0 auto 13px;
    border: 1px solid color-mix(in srgb, var(--harvest-color) 75%, transparent);
    border-radius: 18px;
    background: radial-gradient(circle, var(--harvest-background), rgba(0, 0, 0, 0.52) 72%);
    box-shadow: inset 0 0 22px var(--harvest-glow), 0 0 18px var(--harvest-glow);
    animation: sewerHarvestCardReveal 0.38s ease-out both;
}

.sewer-harvest-result__image-wrap > img {
    position: relative;
    z-index: 2;
    width: 148px;
    height: 148px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px var(--harvest-glow));
    animation: sewerHarvestPlantReveal 0.5s cubic-bezier(.2, .85, .25, 1.2) both;
}

.sewer-harvest-result__pulse {
    position: absolute;
    inset: 18px;
    z-index: 1;
    border: 2px solid var(--harvest-color);
    border-radius: 50%;
    opacity: 0;
    animation: sewerHarvestPulse 1.7s ease-out 0.35s infinite;
}

.alert-content.sewer-harvest-result .sewer-harvest-result__eyebrow {
    margin: 4px 0 3px;
    color: #aeb69d;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.alert-content.sewer-harvest-result .sewer-harvest-result__name {
    margin: 0;
    color: var(--harvest-color);
    font-size: 1.25em;
    font-weight: 900;
    text-shadow: 0 0 9px var(--harvest-glow);
}

.alert-content.sewer-harvest-result .sewer-harvest-result__aura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 8px 0 0;
    color: #8fd5ff;
    font-size: 0.85em;
    font-weight: 800;
}

.sewer-harvest-result__aura img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.alert-content.sewer-harvest-result .sewer-harvest-result__inventory {
    margin: 9px 0 0;
    color: #d1d6c6;
    font-size: 0.88em;
}

.sewer-harvest-result .alert-buttons {
    margin-top: 15px;
}

.sewer-harvest-result .alert-button.confirm {
    min-width: 92px;
    background: var(--harvest-color);
    color: #111;
    box-shadow: 0 0 12px var(--harvest-glow);
}

.sewer-guide-location {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit;
    font: inherit;
    font-weight: 800 !important;
    line-height: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sewer-guide-location:hover,
.sewer-guide-location:focus-visible {
    filter: brightness(1.25);
    text-shadow: 0 0 7px currentColor;
    outline: none;
}

.sewer-guide-location--blue { color: #8fd3ff !important; }
.sewer-guide-location--green { color: #9bdf91 !important; }
.sewer-guide-location--red { color: #ff918b !important; }
.sewer-guide-location--market { color: #f1d18a !important; }
.sewer-guide-location--factory { color: #ffe1a0 !important; }

.sewer-guide-offer-count {
    margin: 12px 0 15px;
    padding: 10px 12px;
    border: 1px solid rgba(225, 179, 83, 0.42);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.24);
    text-align: center;
}

.sewer-guide-offer-count [data-sewer-offer-count] {
    color: #ff4d4d;
    text-shadow: 0 0 8px rgba(255, 45, 45, 0.35);
}

.sewer-guide-offer-aura { color: #7dd3fc; }

@keyframes sewerHarvestCardReveal {
    from { opacity: 0; transform: translateY(9px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sewerHarvestPlantReveal {
    from { opacity: 0; transform: scale(0.62) rotate(-5deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes sewerHarvestPulse {
    0% { opacity: 0.62; transform: scale(0.62); }
    75%, 100% { opacity: 0; transform: scale(1.22); }
}

#alertContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

@keyframes pulse {
    0% { filter: brightness(0.8); }
    50% { filter: brightness(1.2); }
    100% { filter: brightness(0.8); }
}

#dimensionsMenu button:hover {
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}
    
#dimensionsMenu button:hover div {
    transform: translateX(0);
}

    @keyframes strengthPulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.7; }
    100% { opacity: 0.3; }
}

@keyframes dimensionGlow {
    0% {
        box-shadow: 0 0 10px 2px rgba(204, 0, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 15px 5px rgba(106, 13, 173, 0.9);
    }
}

@keyframes dimensionPulse {
    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.95);
    }
}

@keyframes rainbowRotate {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }

        @keyframes driftFog {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-15px) translateX(5px);
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@keyframes floatOrb {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    33% {
        transform: translateY(-10px) translateX(5px);
    }
    66% {
        transform: translateY(5px) translateX(-10px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

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

#callSpiritButton:hover {
    background: linear-gradient(to bottom, #512da8, #4527a0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 20px rgba(110, 20, 170, 0.3);
    transform: translateY(-2px);
}

#callSpiritButton:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 10px rgba(110, 20, 170, 0.2);
}

@keyframes pulseGlow {
    0% {
        text-shadow: 0 0 3px rgba(255, 0, 0, 0.3);
    }
    100% {
        text-shadow: 0 0 8px rgba(255, 0, 0, 0.8), 0 0 12px rgba(255, 50, 50, 0.6);
    }
}

@keyframes glow {
    0% { text-shadow: 0 0 2px #ff0000; }
    50% { text-shadow: 0 0 5px #ff0000, 0 0 7px #ff0000; }
    100% { text-shadow: 0 0 2px #ff0000; }
}

@keyframes pulse {
    0% { box-shadow: 0 0 10px #4CAF50, 0 0 15px rgba(76, 175, 80, 0.5); }
    100% { box-shadow: 0 0 15px #4CAF50, 0 0 25px rgba(76, 175, 80, 0.7); }
}

#container.in-game #backgroundImage {
    display: none; /* Hide the background image when logged in */
}

@keyframes naturalLightFlicker {
    0% { opacity: 0.85; box-shadow: 0 0 15px 8px rgba(255, 210, 100, 0.3); }
    20% { opacity: 0.9; box-shadow: 0 0 18px 9px rgba(255, 210, 100, 0.35); }
    40% { opacity: 0.96; box-shadow: 0 0 22px 11px rgba(255, 210, 100, 0.45); }
    50% { opacity: 0.92; box-shadow: 0 0 20px 10px rgba(255, 210, 100, 0.4); }
    60% { opacity: 0.97; box-shadow: 0 0 23px 12px rgba(255, 210, 100, 0.5); }
    70% { opacity: 0.94; box-shadow: 0 0 21px 10px rgba(255, 210, 100, 0.42); }
    80% { opacity: 1; box-shadow: 0 0 25px 13px rgba(255, 210, 100, 0.5); }
    90% { opacity: 0.92; box-shadow: 0 0 20px 10px rgba(255, 210, 100, 0.38); }
    95% { opacity: 0.96; box-shadow: 0 0 22px 11px rgba(255, 210, 100, 0.45); }
    100% { opacity: 0.9; box-shadow: 0 0 18px 9px rgba(255, 210, 100, 0.35); }
}

@keyframes subtleGlow {
    0% {
        filter: drop-shadow(0 0 12px rgba(15, 140, 15, 0.7)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(15, 140, 15, 0.9)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 12px rgba(15, 140, 15, 0.7)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }
}

#postLoginHelperClip.helper-clip {
    position: absolute;
    top: 58px;
    left: 0;
    z-index: 6;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: auto;
    line-height: 0;
    cursor: pointer;
}

#postLoginHelperClip.helper-clip[hidden] {
    display: none !important;
}

#postLoginStormGuideLauncher.storm-guide-launcher {
    position: absolute;
    top: 52px;
    left: 0;
    z-index: 6;
    display: block;
    width: 112px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transform: translateX(-100%);
}

#postLoginStormGuideLauncher.storm-guide-launcher[hidden] {
    display: none !important;
}

.storm-guide-launcher__motion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform-origin: 50% 70%;
    animation: stormGuideLauncherFloat 2.8s ease-in-out infinite;
}

.storm-guide-launcher__art {
    position: relative;
    display: block;
    width: 102px;
    height: 68px;
}

.storm-guide-launcher__art::before {
    content: '';
    position: absolute;
    inset: 8px 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 36, 27, 0.7), rgba(170, 0, 0, 0.22) 48%, transparent 74%);
    filter: blur(6px);
    opacity: 0.58;
}

.storm-guide-launcher__art img {
    position: relative;
    z-index: 1;
    display: block;
    width: 102px;
    height: 68px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.7));
}

.storm-guide-launcher__label {
    display: block;
    padding: 4px 9px 5px;
    border: 1px solid rgba(255, 100, 88, 0.78);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(86, 10, 10, 0.96), rgba(28, 5, 5, 0.96));
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #fff4f2;
    font: 900 11px/1 "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

#postLoginStormGuideLauncher:hover .storm-guide-launcher__motion,
#postLoginStormGuideLauncher:focus-visible .storm-guide-launcher__motion {
    filter: brightness(1.25);
    transform: translateY(-2px) scale(1.05);
}

#postLoginStormGuideLauncher:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 12px;
}

body[data-pre-storm-show="true"] .storm-guide-launcher__motion {
    animation: stormGuideLauncherAlert 0.95s ease-in-out infinite;
}

body[data-pre-storm-show="true"] .storm-guide-launcher__art::before {
    opacity: 1;
    animation: stormCounterAlarm 1.05s ease-in-out infinite;
}

@keyframes stormGuideLauncherFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}

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

#postLoginHelperClip .helper-clip-motion {
    display: block;
    position: relative;
    animation: helperClipHopMove 2.4s ease-in-out infinite;
}

#postLoginHelperClip .helper-clip-hop {
    display: block;
    position: relative;
    transform-origin: 50% 100%;
    animation: helperClipHop 2.4s ease-in-out infinite;
    pointer-events: none;
}

#postLoginHelperClip .helper-clip-sprite {
    display: block;
    height: 78px;
    width: auto;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

#postLoginHelperClip .helper-clip-alert {
    display: none;
    position: absolute;
    left: 38%;
    bottom: calc(100% - 6px);
    margin: 0;
    color: #ff2222;
    font: 800 26px/1 "Trebuchet MS", "Arial Black", sans-serif;
    text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 0, 0, 0.75);
    transform: translateX(-50%);
    pointer-events: none;
}

#postLoginHelperClip.has-claim .helper-clip-alert {
    display: block;
    animation: helperClipAlertBounce 0.7s ease-in-out infinite;
}

#postLoginHelperClip.has-intro:not(.has-claim) .helper-clip-alert {
    display: none;
}

#postLoginHelperClip .helper-clip-bubble {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: -8px;
    z-index: 2;
    box-sizing: border-box;
    max-width: 126px;
    padding: 8px 11px 9px;
    border: 2px solid #2c2416;
    border-radius: 18px 18px 18px 7px;
    background: linear-gradient(180deg, #fffdf8 0%, #ffe7a4 100%);
    box-shadow: 2px 3px 0 rgba(44, 36, 22, 0.18), 0 6px 12px rgba(0, 0, 0, 0.22);
    transform-origin: 0% 80%;
    animation: helperClipBubblePop 0.42s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}

#postLoginHelperClip.has-intro .helper-clip-bubble {
    display: block;
}

#postLoginHelperClip .helper-clip-bubble::before,
#postLoginHelperClip .helper-clip-bubble::after {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 11px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}

#postLoginHelperClip .helper-clip-bubble::before {
    left: -11px;
    bottom: 9px;
    border-width: 8px 11px 8px 0;
    border-right-color: #2c2416;
}

#postLoginHelperClip .helper-clip-bubble::after {
    border-width: 6px 9px 6px 0;
    border-right-color: #ffe7a4;
}

#postLoginHelperClip .helper-clip-bubble-text {
    display: block;
    color: #2a2214;
    font: 700 12px/1.25 "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
    letter-spacing: 0.15px;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

@keyframes helperClipAlertBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes helperClipBubblePop {
    0% {
        opacity: 0;
        transform: scale(0.45) translateY(6px);
    }
    72% {
        opacity: 1;
        transform: scale(1.08) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.helper-guide-dialog.is-welcome {
    background: #050505;
}

.helper-welcome {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background: #050505;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.helper-welcome.is-out {
    animation: helperWelcomeOut 0.45s ease forwards;
    pointer-events: none;
}

.helper-welcome-smoke,
.helper-welcome-smoke span {
    position: absolute;
    pointer-events: none;
}

.helper-welcome-smoke {
    inset: -20%;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 40% at 20% 80%, rgba(70, 70, 70, 0.45), transparent 70%),
        radial-gradient(ellipse 50% 35% at 80% 75%, rgba(90, 90, 90, 0.35), transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 110%, rgba(30, 30, 30, 0.9), transparent 70%);
}

.helper-welcome-smoke span {
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.45;
    background: rgba(160, 160, 160, 0.35);
    animation: helperWelcomeSmoke 7s ease-in-out infinite;
}

.helper-welcome-smoke span:nth-child(1) { width: 280px; height: 180px; left: 8%; bottom: 12%; animation-delay: 0s; }
.helper-welcome-smoke span:nth-child(2) { width: 340px; height: 210px; right: 6%; bottom: 8%; animation-delay: -2s; }
.helper-welcome-smoke span:nth-child(3) { width: 220px; height: 160px; left: 38%; bottom: 22%; animation-delay: -3.5s; }
.helper-welcome-smoke span:nth-child(4) { width: 260px; height: 190px; left: 18%; top: 18%; opacity: 0.22; animation-delay: -1.2s; }
.helper-welcome-smoke span:nth-child(5) { width: 300px; height: 200px; right: 16%; top: 12%; opacity: 0.2; animation-delay: -4.4s; }

.helper-welcome-flash {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    animation: helperWelcomeFlash 0.7s ease-out both;
}

.helper-welcome-shock {
    position: absolute;
    top: 36px;
    left: 50%;
    z-index: 2;
    height: 520px;
    width: auto;
    max-width: 86%;
    object-fit: contain;
    image-rendering: pixelated;
    transform: translateX(-50%);
    transform-origin: 50% 80%;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
    animation: helperWelcomeShockIn 0.75s cubic-bezier(0.12, 1.4, 0.3, 1) both;
    pointer-events: none;
}

.helper-welcome[data-mode="photo"] .helper-welcome-shock {
    animation: helperWelcomeShockFade 0.35s ease forwards;
}

.helper-welcome[data-mode="districts"] .helper-welcome-shock {
    animation: helperWelcomeShockFade 0.35s ease forwards;
}

.helper-welcome[data-mode="citizen"] .helper-welcome-shock {
    animation: helperWelcomeShockFade 0.35s ease forwards;
}

.helper-welcome-photo-frame {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 3;
    display: none;
    width: min(820px, 92%);
    height: 650px;
    transform: translateX(-50%);
    pointer-events: none;
}

.helper-welcome[data-mode="photo"] .helper-welcome-photo-frame {
    display: block;
}

.helper-welcome-photo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.helper-welcome-photo-frame.is-pop .helper-welcome-photo {
    animation: helperWelcomePhotoIn 0.42s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}

.helper-welcome-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
}

.helper-welcome-photo-spot {
    display: none;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ffd54f;
    border-radius: 10px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.62), 0 0 16px rgba(255, 215, 0, 0.55);
    pointer-events: none;
    z-index: 2;
    animation: helperWelcomeSpotPulse 1.15s ease-in-out infinite;
}

.helper-welcome-photo-stage[data-spot] .helper-welcome-photo-spot {
    display: block;
}

@keyframes helperWelcomeSpotPulse {
    0%, 100% { box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.62), 0 0 12px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.62), 0 0 22px rgba(255, 215, 0, 0.85); }
}

.helper-welcome-district-demo {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 3;
    display: none;
    width: min(850px, 92%);
    height: 650px;
    transform: translateX(-50%);
    pointer-events: none;
}

.helper-welcome[data-mode="districts"] .helper-welcome-district-demo {
    display: block;
}

.helper-welcome-district-card {
    position: absolute;
    width: 310px;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    image-rendering: pixelated;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.65));
    opacity: 0;
}

.helper-welcome-district-base {
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    animation: helperWelcomeDistrictBase 0.65s ease-out forwards;
}

.helper-welcome-district-city {
    left: 90px;
    top: 70px;
    transform: translateY(-560px) rotate(-10deg);
    animation: helperWelcomeMapDropLeft 0.9s 1s cubic-bezier(0.18, 1.2, 0.3, 1) forwards;
}

.helper-welcome-district-outskirts {
    right: 90px;
    top: 54px;
    transform: translateY(-560px) rotate(9deg);
    animation: helperWelcomeMapDropRight 0.9s 2.3s cubic-bezier(0.18, 1.2, 0.3, 1) forwards;
}

.helper-welcome-manor-pointer {
    position: absolute;
    right: 172px;
    top: 109px;
    z-index: 6;
    width: 42px;
    height: 42px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform-origin: 30% 20%;
    filter: drop-shadow(0 2px 3px #000);
    animation: helperWelcomeMouseClick 1.52s 3.8s ease-in-out forwards;
}

.helper-welcome-manor-click {
    position: absolute;
    right: 184px;
    top: 100px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border: 4px solid #fff;
    border-radius: 50%;
    opacity: 0;
    animation: helperWelcomeClickRing 0.65s 4.55s ease-out forwards;
}

.helper-welcome-manor-menu {
    position: absolute;
    left: 50%;
    top: 42px;
    z-index: 8;
    width: auto;
    height: 600px;
    max-width: 96%;
    box-sizing: border-box;
    object-fit: contain;
    border: 3px solid rgba(185, 195, 190, 0.9);
    border-radius: 10px;
    background: #111;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.75));
    opacity: 0;
    translate: -50% 0;
    transform: scale(0.82);
    transform-origin: center center;
    animation: helperWelcomeManorOpen 0.8s 5.65s cubic-bezier(0.18, 1.2, 0.3, 1) forwards;
}

.helper-welcome-character-frame {
    position: absolute;
    top: 38px;
    left: 50%;
    z-index: 3;
    display: none;
    width: min(820px, 92%);
    height: 620px;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.helper-welcome[data-mode="citizen"] .helper-welcome-character-frame {
    display: flex;
}

.helper-welcome-citizen-card {
    position: relative;
    z-index: 1;
    width: 475px;
    height: 300px;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.65));
    animation: helperWelcomeCharacterIn 0.52s cubic-bezier(0.18, 1.25, 0.3, 1) both;
}

.helper-welcome-dialog {
    position: relative;
    z-index: 5;
    width: 88%;
    min-height: 168px;
    margin: 0 0 28px;
    padding: 18px 24px 32px;
    box-sizing: border-box;
    border: 4px solid #f3e2b0;
    border-radius: 10px;
    background: linear-gradient(#1b1610, #0d0b08);
    box-shadow: 0 0 0 4px #0d0b08, 0 10px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 2px #7a5a28;
    color: #fff;
    font: 700 20px/1.45 "Courier New", Courier, "Trebuchet MS", monospace;
    letter-spacing: 0.01em;
    text-align: left;
    opacity: 0;
    transform: translateY(16px);
}

.helper-welcome.is-talking .helper-welcome-dialog {
    animation: helperWelcomeDialogIn 0.28s ease-out forwards;
}

.helper-welcome-text {
    margin: 0;
    min-height: 5.8em;
    white-space: pre-wrap;
}

.helper-welcome-title {
    color: #e53935;
    font-weight: 800;
}

.helper-welcome-goobs {
    color: #4caf50;
    font-weight: 800;
    white-space: nowrap;
}

.helper-welcome-goobs .helper-welcome-title {
    color: #4caf50;
}

.helper-welcome-word {
    white-space: nowrap;
}

.helper-welcome-word-icon {
    height: 1em;
    width: auto;
    margin: 0 0.2em -0.12em 0;
    object-fit: contain;
    vertical-align: -0.12em;
}

.helper-welcome-caret {
    position: absolute;
    right: 18px;
    bottom: 10px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    animation: helperWelcomeCaret 0.55s steps(2, end) infinite;
}

.helper-welcome-caret[hidden] {
    display: none;
}

.helper-welcome.is-sequence-playing .helper-welcome-caret {
    display: none;
}

.helper-welcome-wait {
    position: absolute;
    right: calc(6% + 18px);
    bottom: 38px;
    z-index: 7;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 11px 7px 12px;
    border: 2px solid #f3e2b0;
    border-radius: 8px;
    background: rgba(13, 11, 8, 0.9);
    color: #f3e2b0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    animation: helperWelcomeWaitPulse 1s ease-in-out infinite;
}

.helper-welcome-wait[hidden] {
    display: none;
}

.helper-welcome-wait-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font: 700 11px/1 "Trebuchet MS", Arial, sans-serif;
    opacity: 0.88;
}

.helper-welcome-wait-time {
    min-width: 2.35em;
    color: #fff;
    font: 800 22px/1 "Courier New", Courier, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.helper-welcome-wait-time::after {
    content: "s";
    margin-left: 1px;
    font-size: 13px;
    font-weight: 700;
    color: #f3e2b0;
}

@keyframes helperWelcomeWaitPulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(243, 226, 176, 0.2); }
    50% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 10px 1px rgba(243, 226, 176, 0.35); }
}

.helper-welcome-skip {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    padding: 6px 12px;
    border: 1px solid rgba(243, 226, 176, 0.55);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #f3e2b0;
    font: 700 12px/1 "Trebuchet MS", Arial, sans-serif;
    cursor: pointer;
}

.helper-welcome-mute {
    position: absolute;
    top: 12px;
    right: 72px;
    z-index: 6;
    display: grid;
    width: 32px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(243, 226, 176, 0.55);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.helper-welcome-mute:hover {
    background: rgba(243, 226, 176, 0.18);
}

.helper-welcome-skip:hover {
    background: rgba(243, 226, 176, 0.18);
}

@keyframes helperWelcomeSmoke {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(18px, -22px) scale(1.08); }
}

@keyframes helperWelcomeFlash {
    0% { opacity: 0.95; }
    35% { opacity: 0.35; }
    100% { opacity: 0; }
}

@keyframes helperWelcomeShockIn {
    0% { opacity: 0; transform: translateX(-50%) scale(0.2) rotate(-8deg); filter: brightness(6); }
    45% { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(2deg); filter: brightness(1.35); }
    62% { transform: translateX(-50%) translateX(-7px) scale(1.02); }
    78% { transform: translateX(-50%) translateX(5px) scale(0.98); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); filter: brightness(1); }
}

@keyframes helperWelcomeShockFade {
    to { opacity: 0; transform: translateX(-50%) scale(0.86); }
}

@keyframes helperWelcomePhotoIn {
    0% { opacity: 0; transform: scale(0.84) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes helperWelcomeDialogIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes helperWelcomeCaret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes helperWelcomeOut {
    to { opacity: 0; }
}


.helper-guide-dialog-overlay {
    position: absolute;
    inset: 0;
    z-index: 10030;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
    pointer-events: auto !important;
}

.helper-guide-dialog,
.storm-guide-dialog {
    position: absolute;
    left: 50%;
    top: 670px;
    transform: translate(-50%, -50%);
    width: 965px;
    height: 970px;
    max-width: 965px;
    min-height: 970px;
    max-height: 970px;
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: linear-gradient(to bottom, #282828, #141414);
    color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
}

.storm-guide-dialog .helper-guide-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 10px 10px;
}

.storm-guide-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #101418;
}

.storm-guide-scene {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.storm-guide-stage[data-scene="intro"] .storm-guide-scene-intro,
.storm-guide-stage[data-scene="weather"] .storm-guide-scene-weather,
.storm-guide-stage[data-scene="join"] .storm-guide-scene-join,
.storm-guide-stage[data-scene="rain"] .storm-guide-scene-rain,
.storm-guide-stage[data-scene="claim"] .storm-guide-scene-claim {
    opacity: 1;
}

.storm-guide-stage[data-scene="intro"] .storm-guide-scene-intro,
.storm-guide-stage[data-scene="weather"] .storm-guide-scene-weather {
    pointer-events: auto;
}

.storm-guide-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 16px;
    bottom: auto;
    z-index: 5;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 18px 16px;
    border: 1px solid rgba(255, 82, 70, 0.58);
    border-radius: 10px;
    background: rgba(5, 8, 11, 0.9);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

.storm-guide-caption strong {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(179, 25, 18, 0.32);
    color: #ff6b5f;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.storm-guide-caption span {
    display: block;
}

.storm-guide-stage[data-scene="intro"] .storm-guide-caption {
    display: none;
}

.storm-demo-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #111 url('images/mountain_background.png') center center / cover no-repeat;
}

.storm-guide-weather-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(12, 18, 34, 0.8), rgba(22, 29, 43, 0.3) 62%, rgba(16, 22, 28, 0.16));
    opacity: 0;
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-guide-weather-shade {
    animation: stormGuideWeatherDarken 4.6s ease-in forwards;
}

/* Step 1 reuses the real pre-storm weather layers instead of a separate imitation. */
.storm-guide-stage[data-scene="weather"] .storm-guide-prestorm-night {
    opacity: 0.88;
    background: linear-gradient(to bottom, rgba(24, 12, 31, 0.84), rgba(62, 37, 43, 0.46) 54%, rgba(92, 58, 35, 0.12) 78%, transparent 100%);
}

.storm-guide-stage[data-scene="weather"] .storm-guide-prestorm-overlay {
    opacity: 0.62;
    background:
        radial-gradient(ellipse at 16% 28%, rgba(18, 20, 24, 0.42) 0%, rgba(48, 52, 58, 0.28) 18%, rgba(110, 116, 124, 0.14) 36%, rgba(190, 196, 202, 0.06) 52%, transparent 68%),
        radial-gradient(ellipse at 48% 18%, rgba(12, 14, 18, 0.36) 0%, rgba(42, 46, 52, 0.22) 22%, rgba(128, 134, 140, 0.1) 44%, transparent 70%),
        radial-gradient(ellipse at 78% 40%, rgba(22, 24, 28, 0.38) 0%, rgba(64, 68, 74, 0.22) 20%, rgba(150, 156, 162, 0.1) 42%, transparent 66%),
        radial-gradient(ellipse at 40% 72%, rgba(28, 30, 34, 0.28) 0%, rgba(90, 96, 102, 0.14) 30%, transparent 58%),
        linear-gradient(to bottom, rgba(10, 12, 16, 0.34) 0%, rgba(40, 44, 50, 0.2) 28%, rgba(100, 106, 112, 0.1) 55%, rgba(190, 196, 202, 0.04) 76%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);
}

.storm-guide-stage[data-scene="weather"] .storm-guide-prestorm-veil {
    display: block;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx::after {
    display: block;
    height: 68%;
    opacity: 0.4;
    background:
        radial-gradient(ellipse at 22% 34%, rgba(14, 16, 20, 0.4) 0%, rgba(46, 50, 56, 0.22) 24%, rgba(120, 126, 132, 0.1) 46%, transparent 68%),
        radial-gradient(ellipse at 68% 48%, rgba(18, 20, 24, 0.34) 0%, rgba(60, 64, 70, 0.16) 28%, rgba(160, 166, 172, 0.06) 52%, transparent 70%),
        linear-gradient(to bottom, rgba(8, 10, 14, 0.28) 0%, rgba(48, 52, 58, 0.14) 36%, rgba(130, 136, 142, 0.05) 64%, transparent 100%);
    filter: blur(20px);
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-cloud-extra {
    display: block;
    opacity: 0.2;
    filter: grayscale(1) brightness(0.42) sepia(0.18) hue-rotate(62deg);
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-thunder-flash,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-lightning,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-wind-streak,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris {
    display: block;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-wind-streak {
    animation-duration: var(--ambient-wind-medium-duration, 7s);
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-lightning--left {
    animation: ambientLightningIntro 1.35s ease-out, ambientLightningStrike 18s linear 1.35s infinite;
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-thunder-flash--left {
    animation: ambientThunderSkyIntro 1.35s ease-out, ambientThunderSkyFlash 18s linear 1.35s infinite;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--1 {
    animation-name: preStormDebrisAcross;
    animation-duration: 24s;
    animation-delay: -4s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--3 {
    animation-name: preStormDebrisAcross;
    animation-duration: 28s;
    animation-delay: -15s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--6 {
    animation-name: preStormDebrisAcrossHigh;
    animation-duration: 22s;
    animation-delay: -8s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--8,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--2,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--9 {
    animation-name: preStormDebrisReturn;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--8 {
    animation-duration: 26s;
    animation-delay: -11s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--2 {
    animation-duration: 23s;
    animation-delay: -2s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--5 {
    animation-name: preStormDebrisReturnLow;
    animation-duration: 27s;
    animation-delay: -18s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--9 {
    animation-duration: 21s;
    animation-delay: -7s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--4,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--7,
.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--10 {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--4 {
    --orbit-x: 22vw;
    --orbit-y: 8vh;
    --orbit-r: 9vh;
    animation-name: preStormDebrisOrbit;
    animation-duration: 14s;
    animation-delay: -3s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--7 {
    --orbit-x: 58vw;
    --orbit-y: 16vh;
    --orbit-r: 11vh;
    animation-name: preStormDebrisOrbit;
    animation-duration: 18s;
    animation-delay: -9s;
}

.storm-guide-stage[data-scene="weather"] .storm-guide-real-prestorm-fx .ambient-tornado-debris--10 {
    --orbit-x: 74vw;
    --orbit-y: 6vh;
    --orbit-r: 8vh;
    animation-name: preStormDebrisOrbitReverse;
    animation-duration: 16s;
    animation-delay: -5s;
}

.storm-guide-weather-shade--storm {
    opacity: 0.72;
}

.storm-guide-weather-shade--calm {
    opacity: 0.54;
    animation: stormGuideWeatherClear 4.6s ease forwards;
}

.storm-guide-dynamic-clouds {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    width: 100%;
    height: 72%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 72%, transparent 100%);
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-guide-dynamic-clouds {
    height: 78%;
    z-index: 0;
    opacity: 1;
    animation: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.35) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.35) 100%);
}

.storm-guide-stage[data-scene="rain"] .storm-guide-dynamic-clouds {
    opacity: 0.78;
}

.storm-guide-stage[data-scene="claim"] .storm-guide-dynamic-clouds {
    opacity: 0.5;
    animation: stormGuideCloudsClear 4.6s ease forwards;
}

.storm-guide-dynamic-clouds .prelogin-sky-cloud {
    filter: blur(6px);
}

.storm-guide-wind {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.storm-guide-wind-line {
    --storm-wind-top: 20%;
    --storm-wind-width: 90px;
    --storm-wind-delay: 0s;
    position: absolute;
    top: var(--storm-wind-top);
    left: -18%;
    width: var(--storm-wind-width);
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(222, 234, 242, 0.8), transparent);
    box-shadow: 0 0 4px rgba(220, 234, 244, 0.28);
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-guide-wind-line {
    animation: stormGuideWind 2.8s linear infinite var(--storm-wind-delay);
}

.storm-guide-wind-line--1 { --storm-wind-top: 18%; --storm-wind-width: 120px; --storm-wind-delay: 1.1s; }
.storm-guide-wind-line--2 { --storm-wind-top: 31%; --storm-wind-width: 84px; --storm-wind-delay: 1.8s; }
.storm-guide-wind-line--3 { --storm-wind-top: 45%; --storm-wind-width: 135px; --storm-wind-delay: 2.3s; }
.storm-guide-wind-line--4 { --storm-wind-top: 57%; --storm-wind-width: 96px; --storm-wind-delay: 1.5s; }
.storm-guide-wind-line--5 { --storm-wind-top: 69%; --storm-wind-width: 112px; --storm-wind-delay: 2.7s; }
.storm-guide-wind-line--6 { --storm-wind-top: 80%; --storm-wind-width: 74px; --storm-wind-delay: 2s; }

.storm-guide-lightning {
    position: absolute;
    top: 0;
    right: 12%;
    z-index: 4;
    width: 150px;
    height: 330px;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255, 132, 25, 0.9)) drop-shadow(0 0 24px rgba(255, 92, 0, 0.55));
}

.storm-guide-lightning svg {
    width: 100%;
    height: 100%;
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-guide-lightning {
    animation: stormGuideLightning 4.6s linear forwards;
}

.storm-demo-rain,
.storm-demo-rain-live {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background: transparent;
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-demo-rain {
    z-index: 1;
    opacity: 1;
    animation: none;
}

.storm-guide-stage[data-scene="rain"] .storm-demo-rain-live {
    opacity: 0.85;
}

.storm-demo-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.0);
    z-index: 4;
    pointer-events: none;
}

.storm-guide-stage.is-started[data-scene="weather"] .storm-demo-flash {
    animation: stormDemoFlash 4.6s linear forwards;
}

.storm-demo-count {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 17px auto 10px;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(12, 8, 10, 0.82);
    color: #fff4f4;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.95);
    box-shadow: 0 0 24px rgba(220, 30, 30, 0.55);
}

.storm-demo-count strong {
    font-size: 1.18em;
    font-variant-numeric: tabular-nums;
}

.storm-guide-intro-sky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 15, 20, 0.2), rgba(3, 7, 10, 0.56));
}

.storm-guide-weather-countdown {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 270px;
    padding: 18px 28px;
    border: 1px solid rgba(255, 84, 70, 0.62);
    border-radius: 14px;
    background: rgba(10, 8, 10, 0.82);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.62), 0 0 28px rgba(220, 30, 30, 0.42);
    color: #fff4f4;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.95);
    transform: translate(-50%, -50%);
}

.storm-guide-weather-countdown span {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.storm-guide-weather-countdown strong {
    font-size: 34px;
    font-variant-numeric: tabular-nums;
}

.storm-guide-intro-card {
    position: absolute;
    top: 48%;
    left: 50%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(610px, calc(100% - 80px));
    box-sizing: border-box;
    padding: 26px 34px 24px;
    border: 1px solid rgba(255, 92, 75, 0.58);
    border-radius: 15px;
    background: linear-gradient(155deg, rgba(20, 25, 31, 0.96), rgba(6, 10, 15, 0.94));
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.68),
        0 0 32px rgba(190, 23, 18, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.storm-guide-step-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 89, 77, 0.55);
    border-radius: 999px;
    background: rgba(111, 14, 12, 0.42);
    color: #ffb4aa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.storm-guide-step-label span {
    padding-left: 9px;
    border-left: 1px solid rgba(255, 180, 170, 0.34);
    color: #fff;
}

.storm-guide-intro-icon {
    width: 88px;
    height: 58px;
    object-fit: cover;
    image-rendering: pixelated;
    margin: 2px 0 2px;
    filter: drop-shadow(0 0 9px rgba(255, 35, 35, 0.9));
}

.storm-guide-intro-card h4 {
    margin: 2px 0 8px;
    color: #fff;
    font-size: 29px;
    line-height: 1.12;
}

.storm-guide-intro-card > p {
    max-width: 500px;
    margin: 0 0 16px;
    color: #d7dee3;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.48;
}

.storm-guide-highlight {
    color: #ff5045;
    font-weight: 900;
    text-shadow: 0 0 9px rgba(255, 43, 34, 0.42);
}

.storm-guide-weather-signs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
}

.storm-guide-weather-signs span {
    padding: 8px 5px;
    border: 1px solid rgba(179, 199, 211, 0.2);
    border-radius: 7px;
    background: rgba(122, 144, 156, 0.11);
    color: #e8f0f4;
    font-size: 11px;
    font-weight: 800;
}

.storm-guide-start-button {
    min-width: 210px;
    margin-top: 18px;
    padding: 13px 28px;
    border: 1px solid #ff6a5c;
    border-radius: 8px;
    background: linear-gradient(to bottom, #e94234, #a81712);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    box-shadow: 0 8px 22px rgba(177, 21, 16, 0.4);
    transition: transform 0.16s ease, filter 0.16s ease;
}

.storm-guide-start-button:hover {
    filter: brightness(1.16);
    transform: translateY(-1px) scale(1.025);
}

.storm-guide-start-button:active {
    transform: translateY(1px) scale(0.985);
}

.storm-demo-join {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 86px 36px 28px;
    border-radius: 8px;
    background: linear-gradient(to bottom, #2a2a2a 0%, #141414 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.storm-demo-join h4 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 2.2em;
}

.storm-demo-join p {
    margin: 0 0 14px;
    color: #d0d0d0;
}

.storm-demo-rewards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 28px;
}

.storm-demo-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 16px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.storm-demo-reward img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    image-rendering: auto;
}

.storm-demo-reward span {
    color: #eee;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.storm-demo-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.storm-demo-btn {
    min-width: 180px;
    padding: 16px 28px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    cursor: default;
}

.storm-demo-btn-yes {
    background: linear-gradient(to bottom, #cc0000, #8d0000);
    box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.6);
}

.storm-guide-stage[data-scene="join"] .storm-demo-btn-yes {
    animation: stormDemoAccept 1.1s ease-in-out infinite;
}

.storm-demo-btn-no {
    background: #666;
}

.storm-demo-rainyard {
    position: absolute;
    inset: 0;
    background: #111 url('images/mountain_background.png') center center / cover no-repeat;
    overflow: hidden;
}

.storm-demo-drop {
    position: absolute;
    z-index: 5;
    top: -12%;
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6));
}

.storm-guide-stage[data-scene="rain"] .storm-demo-drop {
    animation: stormDemoItemFall 2.4s linear forwards;
}

.storm-demo-drop-1 { left: 18%; animation-delay: 0.1s; }
.storm-demo-drop-2 { left: 38%; animation-delay: 0.45s; }
.storm-demo-drop-3 { left: 58%; animation-delay: 0.2s; }
.storm-demo-drop-4 { left: 74%; animation-delay: 0.7s; }

.storm-guide-mouse {
    position: absolute;
    z-index: 6;
    width: 72px;
    height: 72px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 2px 3px #000);
    transform-origin: 30% 20%;
}

.storm-guide-stage[data-scene="rain"] .storm-guide-mouse {
    animation: stormDemoMouse 4.8s ease-in-out forwards;
}

.storm-guide-clickring {
    position: absolute;
    left: 58%;
    top: 52%;
    z-index: 5;
    width: 48px;
    height: 48px;
    border: 4px solid #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.storm-guide-stage[data-scene="rain"] .storm-guide-clickring {
    animation: helperWelcomeClickRing 0.65s 2.15s ease-out forwards;
}

.storm-demo-calm {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #111 url('images/mountain_background.png') center center / cover no-repeat;
}

.storm-demo-claim-card {
    position: absolute;
    top: 44%;
    left: 50%;
    z-index: 5;
    width: min(760px, calc(100% - 72px));
    box-sizing: border-box;
    padding: 22px 24px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(12, 17, 21, 0.9);
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.58);
}

.storm-demo-claim-card h4 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 27px;
}

.storm-demo-claim-card > p {
    margin: 0 0 15px;
    color: #c9d3d8;
    font-size: 13px;
}

.storm-demo-claim-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.storm-demo-claim-items .storm-demo-reward {
    min-height: 150px;
    padding: 10px 8px;
}

.storm-demo-claim-items .storm-demo-reward img {
    width: 92px;
    height: 92px;
}

.storm-demo-claim {
    position: relative;
    z-index: 5;
    left: auto;
    top: auto;
    transform: none;
    min-width: 220px;
    padding: 18px 36px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(to bottom, #2ecc71, #1e8f4e);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.storm-guide-stage[data-scene="claim"] .storm-demo-claim {
    animation: stormDemoAcceptBtn 1.2s 1.2s ease-in-out infinite;
}

@keyframes stormGuideWeatherDarken {
    0%, 12% { opacity: 0; }
    58% { opacity: 0.48; }
    100% { opacity: 0.82; }
}

@keyframes stormGuideWeatherClear {
    from { opacity: 0.7; }
    to { opacity: 0; }
}

@keyframes stormGuideCloudsIn {
    0%, 8% { opacity: 0; }
    52% { opacity: 0.62; }
    100% { opacity: 0.94; }
}

@keyframes stormGuideCloudsClear {
    from { opacity: 0.65; }
    to { opacity: 0.18; }
}

@keyframes stormGuideCloudDrift {
    from { transform: translate3d(-300px, 0, 0) scale(var(--cloud-scale, 1)); }
    to { transform: translate3d(1180px, 0, 0) scale(var(--cloud-scale, 1)); }
}

@keyframes stormGuideWind {
    0%, 18% { transform: translate3d(0, 8px, 0) scaleX(0.65); opacity: 0; }
    28% { opacity: 0.78; }
    100% { transform: translate3d(1180px, -7px, 0) scaleX(1.08); opacity: 0; }
}

@keyframes stormGuideLightning {
    0%, 52%, 57%, 64%, 69%, 100% { opacity: 0; transform: translateY(-10px) scaleY(0.94); }
    54% { opacity: 1; transform: translateY(0) scaleY(1); }
    59% { opacity: 0.35; }
    66% { opacity: 0.9; transform: translateY(2px) scaleY(1.01); }
}

@keyframes stormDemoRainIn {
    0%, 34% { opacity: 0; }
    64% { opacity: 0.58; }
    100% { opacity: 0.85; }
}

@keyframes stormDemoFlash {
    0%, 52%, 57%, 64%, 69%, 100% { background: rgba(255, 255, 255, 0); }
    54% { background: rgba(255, 183, 104, 0.48); }
    66% { background: rgba(255, 222, 184, 0.35); }
}

@keyframes stormDemoAccept {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.06); }
}

.storm-demo-btn-yes {
    transform: none;
}

.storm-guide-stage[data-scene="join"] .storm-demo-btn-yes {
    animation: stormDemoAcceptBtn 1.1s ease-in-out infinite;
}

@keyframes stormDemoAcceptBtn {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.45); }
    50% { transform: scale(1.06); box-shadow: 0 0 16px rgba(204, 0, 0, 0.65); }
}

@keyframes stormDemoItemFall {
    0% { top: -16%; opacity: 0; }
    12% { opacity: 1; }
    100% { top: 46%; opacity: 1; }
}

@keyframes stormDemoMouse {
    0% { opacity: 0; left: 82%; top: 12%; transform: scale(1); }
    18% { opacity: 1; left: 66%; top: 42%; transform: scale(1); }
    42% { opacity: 1; left: 56%; top: 50%; transform: scale(1); }
    52% { opacity: 1; left: 56%; top: 50%; transform: scale(0.82); }
    64% { opacity: 1; left: 56%; top: 50%; transform: scale(1); }
    100% { opacity: 1; left: 56%; top: 50%; transform: scale(1); }
}

.helper-guide-dialog-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-right: 12px;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    flex-shrink: 0;
}

.helper-guide-dialog h3 {
    margin: 0;
    padding: 12px 0 12px 15px;
    background: none;
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.helper-guide-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 12px;
    box-sizing: border-box;
}

.helper-guide-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.helper-guide-progress {
    flex: 0 0 140px;
    width: 930px;
    max-width: 100%;
    height: 140px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 24px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.helper-guide-progress h4 {
    margin: 0;
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
    text-align: center;
}

.helper-guide-progress-track {
    position: relative;
    width: 100%;
    height: 42px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 215, 0, 0.28);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

.helper-guide-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    background-size: 200% 200%;
    animation: gradientMove 2s linear infinite;
    box-shadow: 0 0 14px rgba(231, 76, 60, 0.45);
    transition: width 0.35s ease;
}

.helper-guide-progress-fill.is-complete {
    background: linear-gradient(to right, #2e7d32, #43a047);
    box-shadow: 0 0 14px rgba(76, 175, 80, 0.45);
}

.helper-guide-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.92em;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    z-index: 1;
    pointer-events: none;
}

.helper-guide-info {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.18fr) minmax(0, 0.86fr);
    gap: 10px;
    flex: 0 0 auto;
    align-items: stretch;
}

.helper-guide-panel {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.helper-guide-panel > h4,
.helper-guide-how h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 0.98em;
    font-weight: 700;
    text-align: center;
}

.helper-guide-panel-earn {
    padding: 0;
    overflow: hidden;
}

.helper-guide-panel-earn .helper-guide-earn {
    height: 100%;
    gap: 0;
}

.helper-guide-panel-earn .helper-guide-earn h4 {
    padding: 8px 12px 6px;
    color: #fff;
    text-align: center;
}

.helper-guide-panel-earn .helper-guide-earn-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.helper-guide-panel-earn .helper-guide-earn-prizes {
    flex: 0 0 auto;
}

.helper-guide-panel-earn .helper-guide-mayor-next {
    margin-top: auto;
}

.helper-guide-panel-help {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.helper-guide-panel-help .helper-guide-help-list {
    flex: 0 0 auto;
    justify-content: flex-start;
}

.helper-guide-how {
    padding-top: 10px;
}

.helper-guide-how p {
    margin: 0;
    color: #c8c8c8;
    line-height: 1.4;
    font-size: 0.8em;
}

.helper-guide-lead {
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.helper-guide-lead h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 1.02em;
    font-weight: 700;
    text-align: center;
}

.helper-guide-intro {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #d2d2d2;
    line-height: 1.4;
    font-size: 0.8em;
}

.helper-guide-inline-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    color: #bdbdbd;
    font-size: 0.78em;
    line-height: 1.35;
}

.helper-guide-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.helper-guide-inline-btn:hover,
.helper-guide-inline-btn:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

.helper-guide-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
}

.helper-guide-card {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 12px 0;
    border-radius: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.helper-guide-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.helper-guide-card > div {
    width: 100%;
    min-width: 0;
}

.helper-guide-step {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    font-size: 0.82em;
    font-weight: 800;
    line-height: 26px;
    text-align: center;
}

.helper-guide-card h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.02em;
    font-weight: 700;
}

.helper-guide-card p {
    margin: 0;
    color: #c8c8c8;
    line-height: 1.45;
    font-size: 0.84em;
}

.helper-guide-open-example {
    display: inline-block;
    position: relative;
    width: 54px;
    min-height: 18px;
    box-sizing: border-box;
    padding: 1px 4px;
    margin: 0 2px;
    overflow: hidden;
    border-radius: 4px;
    background: #666;
    color: #fff;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(94, 226, 117, 0.38), 0 0 4px rgba(49, 205, 81, 0.45);
    animation: helperDemoTodoPulse 1.35s ease-in-out infinite;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.helper-guide-open-example:hover {
    background: #d18610;
    color: #1a1208;
    box-shadow: 0 0 0 2px rgba(255, 190, 65, 0.45), 0 0 10px rgba(232, 154, 26, 0.65);
    animation: none;
}

.helper-guide-open-example .helper-guide-task-todo-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.helper-guide-open-example:hover .helper-guide-task-todo-label {
    opacity: 0;
    transform: translateY(-8px);
}

.helper-guide-open-example:hover .helper-guide-task-open-label {
    opacity: 1;
    transform: translateY(0);
}

@keyframes helperDemoTodoPulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(94, 226, 117, 0.35), 0 0 3px rgba(49, 205, 81, 0.38);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(147, 255, 164, 0.58), 0 0 8px rgba(49, 225, 87, 0.68);
    }
}

.helper-guide-card-goob {
    height: 16px;
    width: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.helper-guide-card-earn {
    align-items: stretch;
}

.helper-guide-earn {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 8px;
}

.helper-guide-earn h4 {
    margin: 0;
    color: #fff;
    text-align: center;
}

.helper-guide-earn-panel {
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.helper-guide-earn-row {
    display: none;
}

.helper-guide-earn-summary {
    margin: 0;
    padding: 6px 10px;
    max-width: 100%;
    color: #d2d2d2;
    font-size: 0.76em;
    line-height: 1.35;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.helper-guide-earn-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 0 4px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.helper-guide-earn-amount .helper-guide-card-goob {
    height: 16px;
    width: 16px;
}

.helper-guide-earn-prizes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    overflow: hidden;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.helper-guide-earn-or {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 0;
    padding: 0 8px;
    box-sizing: border-box;
    color: #f0c27a;
    font-size: 0.66em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.helper-guide-earn-prize.is-locked {
    opacity: 0.42;
    pointer-events: none;
}

.helper-guide-earn-prize.is-locked .helper-guide-no-noob-tile {
    cursor: default;
}

.helper-guide-earn-prize {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: start;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 6px 4px 7px;
    border-top: 0;
    text-align: center;
}

.helper-guide-earn-prize-label {
    display: block;
    color: #f0c27a;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 2px;
}

.helper-guide-earn-prize .helper-guide-task-action {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
}

.helper-guide-earn-prize .helper-guide-task-action button,
.helper-guide-earn-prize .helper-guide-task-claimed {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    font-size: 0.68em;
    padding: 4px 6px;
}

.helper-guide-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

.helper-guide-split-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    text-align: center;
}

.helper-guide-split-box .helper-guide-settings-note {
    margin: 0 !important;
}

.helper-guide-split-box .helper-guide-help-row {
    justify-content: center;
    margin: 0;
}

.helper-guide-settings-note {
    margin: 0 !important;
    color: #bdbdbd !important;
    font-size: 0.75em !important;
    line-height: 1.4 !important;
    max-width: none;
}

.helper-guide-no-noob-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 0;
}

.helper-guide-no-noob-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.helper-guide-no-noob-tile {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 7px;
    border: 2px solid rgba(125, 211, 252, 0.55);
    box-shadow: 0 0 12px rgba(125, 211, 252, 0.35);
    background: #111;
    cursor: pointer;
}

.helper-guide-no-noob-tile img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.helper-guide-no-noob-tile .helper-guide-no-noob-g {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    animation: blobPulse 2s ease-in-out infinite;
}

.helper-guide-no-noob-name {
    color: #ddd;
    font-size: 0.7em;
    font-weight: 700;
    margin-top: 2px;
    white-space: nowrap;
}

.helper-guide-help-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
}

.helper-guide-help-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.helper-guide-help-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.helper-guide-help-item::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-right: 2px solid #bbb;
    border-bottom: 2px solid #bbb;
    transform: rotate(-45deg);
    flex-shrink: 0;
}

.helper-guide-help-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.helper-guide-split-box .helper-guide-task-shop {
    width: auto;
    padding: 6px 12px;
    font-size: 0.78em;
}

.helper-guide-columns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.helper-guide-col-info {
    display: none;
}

.helper-guide-tasks {
    flex: 1 1 auto;
    align-self: stretch;
    width: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.helper-guide-tasks-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
}

.helper-guide-tasks-title h4 {
    margin: 0;
    color: #fff;
    font-size: 1.02em;
    font-weight: 700;
    text-align: center;
    grid-column: 2;
}

.helper-guide-task-count {
    color: #f0c27a;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    grid-column: 3;
    justify-self: end;
}

.helper-guide-tasks > p {
    margin: 0 0 8px;
    color: #bbb;
    font-size: 0.78em;
    line-height: 1.35;
    text-align: center;
}

.helper-guide-task-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
}

.helper-guide-task-empty {
    margin: 0;
    color: #aaa;
    font-size: 0.8em;
    grid-column: 1 / -1;
    align-self: center;
}

.helper-guide-task {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    box-sizing: border-box;
}

.helper-guide-task-image {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    padding: 4px;
    box-sizing: border-box;
}

.helper-guide-task-image.is-empty {
    display: block;
}

.helper-guide-task-copy {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
    text-align: center;
}

.helper-guide-task-kicker {
    margin-bottom: 1px;
    color: #f0c27a;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.helper-guide-task h5 {
    margin: 0 0 1px;
    color: #E85A47;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.helper-guide-task p {
    margin: 0;
    color: #ccc;
    font-size: 0.72em;
    line-height: 1.3;
}

.helper-guide-task-where {
    color: #bdbdbd !important;
}

.helper-guide-task-reward {
    margin-top: 2px !important;
    color: #4caf50 !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.68em !important;
}

.helper-guide-task-goob-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.helper-guide-task-action {
    flex-shrink: 0;
}

.helper-guide-task-list .helper-guide-task-action {
    flex: 0 0 112px;
    width: 112px;
}

.helper-guide-task-action button,
.helper-guide-task-claimed {
    display: inline-block;
    padding: 6px 10px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.helper-guide-task-claim {
    background: #2e7d32;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 215, 64, 0.9), 0 0 11px 3px rgba(255, 193, 7, 0.72);
    animation: helperClaimGlow 1.5s ease-in-out infinite;
}

.helper-guide-task-list .helper-guide-task-claim,
.helper-guide-task-list .helper-guide-task-claimed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    min-height: 26px;
    box-sizing: border-box;
    text-align: center;
}

.helper-guide-task-claim:hover {
    background: #256628;
}

.helper-guide-task-claim:disabled {
    cursor: not-allowed;
    animation: none;
    opacity: 0.65;
    box-shadow: none;
}

@keyframes helperClaimGlow {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(255, 215, 64, 0.78), 0 0 8px 2px rgba(255, 193, 7, 0.52);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(255, 240, 150, 1), 0 0 17px 5px rgba(255, 193, 7, 0.95);
    }
}

.helper-guide-task-shop {
    background: #666;
    cursor: pointer;
}

.helper-guide-task-shop:hover {
    background: #555;
}

.helper-guide-task-list .helper-guide-task-shop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    min-height: 26px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    background: #666;
    color: #fff;
    font-size: 0.64em;
    padding: 5px 4px;
    box-shadow: 0 0 0 2px rgba(94, 226, 117, 0.5), 0 0 10px rgba(49, 205, 81, 0.7);
    animation: helperTaskTodoPulse 1.35s ease-in-out infinite;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.helper-guide-task-todo-label,
.helper-guide-task-open-label {
    display: block;
    transition: opacity 0.14s ease, transform 0.18s ease;
}

.helper-guide-task-open-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
}

.helper-guide-task-list .helper-guide-task-shop:hover,
.helper-guide-task-list .helper-guide-task-shop:focus-visible {
    background: #d18610;
    color: #1a1208;
    box-shadow: 0 0 0 2px rgba(255, 190, 65, 0.45), 0 0 12px rgba(232, 154, 26, 0.7);
    animation: none;
    transform: translateY(-1px);
    outline: none;
}

.helper-guide-task-list .helper-guide-task-shop:hover .helper-guide-task-todo-label,
.helper-guide-task-list .helper-guide-task-shop:focus-visible .helper-guide-task-todo-label {
    opacity: 0;
    transform: translateY(-8px);
}

.helper-guide-task-list .helper-guide-task-shop:hover .helper-guide-task-open-label,
.helper-guide-task-list .helper-guide-task-shop:focus-visible .helper-guide-task-open-label {
    opacity: 1;
    transform: translateY(0);
}

@keyframes helperTaskTodoPulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(94, 226, 117, 0.42), 0 0 7px rgba(49, 205, 81, 0.5);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(147, 255, 164, 0.75), 0 0 18px rgba(49, 225, 87, 0.95);
    }
}

.helper-guide-task-claimed {
    background: rgba(255, 255, 255, 0.12);
    color: #ddd;
}

.helper-guide-task-claimed.is-done {
    gap: 5px;
}

.helper-guide-task-check {
    color: #4caf50;
    font-size: 1.12em;
    font-weight: 800;
    line-height: 1;
}

.helper-guide-task.is-next {
    border-color: rgba(255, 215, 0, 0.28);
    background: rgba(255, 215, 0, 0.06);
}

.helper-guide-task.is-next .helper-guide-task-image {
    image-rendering: pixelated;
    background: transparent;
    padding: 2px;
}

.helper-guide-task.is-next h5 {
    color: #cfcfcf;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: 0.66em;
    line-height: 1.2;
}

.helper-guide-task.is-next .helper-guide-task-action,
.helper-guide-task.is-next .helper-guide-task-shop {
    flex-basis: 118px;
    width: 118px;
}

.helper-guide-task-list .helper-guide-task.is-next .helper-guide-task-shop {
    background: #c0392b;
    color: #fff;
    white-space: nowrap;
    font-size: 0.62em;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.55), 0 0 10px rgba(192, 57, 43, 0.7);
    animation: helperTaskMayorPulse 1.35s ease-in-out infinite;
}

.helper-guide-task-list .helper-guide-task.is-next .helper-guide-task-shop:hover,
.helper-guide-task-list .helper-guide-task.is-next .helper-guide-task-shop:focus-visible {
    background: #a93226;
    color: #fff;
    transform: none;
    animation: none;
    box-shadow: 0 0 0 2px rgba(255, 140, 130, 0.5), 0 0 12px rgba(192, 57, 43, 0.8);
}

@keyframes helperTaskMayorPulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.42), 0 0 7px rgba(192, 57, 43, 0.5);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(255, 150, 140, 0.78), 0 0 18px rgba(231, 76, 60, 0.95);
    }
}

.helper-guide-task-next-link {
    color: #ffd54f;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.helper-guide-task.is-ready {
    box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.45);
}

.helper-guide-mayor-next {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-top: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 0;
    background: rgba(255, 215, 0, 0.08);
    color: inherit;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.helper-guide-mayor-next img {
    width: 34px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.helper-guide-mayor-next-copy {
    color: #cfcfcf;
    font-size: 0.74em;
    line-height: 1.3;
}

.helper-guide-mayor-next strong {
    color: #ffd54f;
    font-size: 0.74em;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.helper-guide-mayor-next:hover,
.helper-guide-mayor-next:focus-visible {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.4);
    outline: none;
}

.helper-guide-mayor-next:hover strong,
.helper-guide-mayor-next:focus-visible strong {
    color: #ffe082;
}

.mayor-citizen-lock {
    position: absolute;
    left: 4%;
    top: 12%;
    width: calc(47% + 46px);
    max-width: none;
    transform: translateY(calc(-100% - 8px));
    z-index: 27;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}

.mayor-citizen-lock[hidden] {
    display: none !important;
}

.mayor-citizen-lock-msg {
    pointer-events: auto;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(12, 12, 12, 0.88);
    border: 1px solid rgba(255, 215, 0, 0.55);
    color: #eee;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-shadow: 1px 1px 2px black;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.mayor-citizen-lock-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: #ffd54f;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.mayor-citizen-lock-link:hover,
.mayor-citizen-lock-link:focus-visible {
    color: #ffe082;
    outline: none;
}

.helper-guide-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}

.helper-guide-dialog-actions button {
    padding: 8px 20px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    font-size: 14px;
    margin: 0;
}

.helper-guide-dialog-cancel {
    background: #666;
}

.helper-guide-dialog-cancel:hover {
    background: #555;
}

.helper-guide-dialog-off {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.38);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    margin: 0;
}

.helper-guide-dialog-off:hover {
    background: rgba(0, 0, 0, 0.55);
}

.helper-guide-dialog-replay {
    flex-shrink: 0;
    margin: 0 0 0 auto;
    padding: 6px 12px;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
}

.helper-guide-dialog-replay:hover {
    background: rgba(0, 0, 0, 0.48);
}

@keyframes helperWelcomeDistrictBase {
    from { opacity: 0; transform: translateX(-50%) scale(0.84); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes helperWelcomeMapDropLeft {
    0% { opacity: 0; transform: translateY(-560px) rotate(-10deg); }
    72% { opacity: 1; transform: translateY(16px) rotate(-4deg); }
    100% { opacity: 1; transform: translateY(0) rotate(-5deg); }
}

@keyframes helperWelcomeMapDropRight {
    0% { opacity: 0; transform: translateY(-560px) rotate(9deg); }
    72% { opacity: 1; transform: translateY(16px) rotate(4deg); }
    100% { opacity: 1; transform: translateY(0) rotate(5deg); }
}

@keyframes helperWelcomeMouseClick {
    0% { opacity: 0; transform: scale(1) translateY(0); }
    14% { opacity: 1; transform: scale(1) translateY(0); }
    42% { opacity: 1; transform: scale(1) translateY(0); }
    55% { opacity: 1; transform: scale(0.82) translateY(1px); }
    72% { opacity: 1; transform: scale(1) translateY(0); }
    84% { opacity: 1; transform: scale(0.82) translateY(1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes helperWelcomeClickRing {
    0% { opacity: 0.9; transform: scale(0.25); }
    100% { opacity: 0; transform: scale(2.1); }
}

@keyframes helperWelcomeManorOpen {
    0% { opacity: 0; transform: scale(0.82); filter: brightness(2); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes helperWelcomeCharacterIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.72); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes helperClipHopMove {
    0%, 16%, 90%, 100% {
        transform: translateY(0);
    }
    48% {
        transform: translateY(-18px);
    }
    78% {
        transform: translateY(-2px);
    }
}

@keyframes helperClipHop {
    0%, 100% {
        transform: scale(1.14, 0.84);
    }
    16% {
        transform: scale(0.94, 1.06);
    }
    48% {
        transform: scale(0.97, 1.08);
    }
    78% {
        transform: scale(1.05, 0.94);
    }
    90% {
        transform: scale(1.16, 0.82);
    }
}

@keyframes mapGlowGreen {
    0% {
        box-shadow: 0 0 8px rgba(0, 255, 0, 0.6), 0 0 15px rgba(0, 255, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 25px rgba(0, 255, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 8px rgba(0, 255, 0, 0.6), 0 0 15px rgba(0, 255, 0, 0.4);
    }
}

@keyframes mapGlowOrange {
    0% {
        box-shadow: 0 0 8px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 140, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 140, 0, 0.8), 0 0 25px rgba(255, 140, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 140, 0, 0.4);
    }
}

@keyframes mapGlowRed {
    0% {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 0 0 25px rgba(255, 0, 0, 0.6);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4);
    }
}

#username:hover, #accessCode:hover {
    border-color: #3498db;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

#username:focus, #accessCode:focus {
    outline: none;
    border-color: #2980b9;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 8px 16px rgba(52, 152, 219, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

#username::placeholder, #accessCode::placeholder {
    color: #7f8c8d;
    font-style: italic;
    opacity: 0.8;
}

#loginName:hover, #loginCode:hover {
    border-color: #3498db;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

#loginName:focus, #loginCode:focus {
    outline: none;
    border-color: #2980b9;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 8px 16px rgba(52, 152, 219, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

#loginName::placeholder, #loginCode::placeholder {
    color: #7f8c8d;
    font-style: italic;
    opacity: 0.8;
}




.info-icon {
    position: relative;
}

.info-icon .tooltip {
    visibility: hidden;
    width: 250px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 125%;
    opacity: 0;
    transition: opacity 0.1s;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    pointer-events: none;
}

.info-icon .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.info-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

@keyframes pulsee {
    from { box-shadow: 0 0 15px #808080, 0 0 30px rgba(128, 128, 128, 0.6); }
    to { box-shadow: 0 0 25px #808080, 0 0 45px rgba(128, 128, 128, 0.8); }
}

@keyframes seasonColorChange {
                    0% { background-color: #4CAF50; } /* Spring - Green */
                    25% { background-color: #FF9800; } /* Summer - Orange */
                    50% { background-color: #8B4513; } /* Fall - Brown */
                    75% { background-color: #2196F3; } /* Winter - Blue */
                    100% { background-color: #4CAF50; } /* Back to Spring */
                }


  /* Weather particle styles */
  .rainParticle {
        position: absolute;
        width: 1px;
        height: 10px;
        background-color: rgba(120, 190, 255, 0.8);
        animation: rainFall linear infinite;
    }
    
    .snowParticle {
        position: absolute;
        width: 4px;
        height: 4px;
        background-color: white;
        border-radius: 50%;
        animation: snowFall linear infinite;
    }
    
    .lightningParticle {
    position: absolute;
    width: 2px;
    height: 2px; /* Shorter segments for zigzag effect */
    background-color: rgba(255, 255, 180, 0.9);
    animation: lightningFlash ease-in-out infinite;
    box-shadow: 0 0 5px rgba(255, 255, 180, 0.8), 0 0 10px rgba(255, 255, 180, 0.5);
    z-index: 5;
}
    
    @keyframes rainFall {
        0% { transform: translateY(-10px); opacity: 0; }
        10% { opacity: 0.8; }
        90% { opacity: 0.8; }
        100% { transform: translateY(40px); opacity: 0; }
    }
    
    @keyframes snowFall {
        0% { transform: translate(-5px, -10px) rotate(0deg); opacity: 0; }
        10% { opacity: 0.8; }
        90% { opacity: 0.8; }
        100% { transform: translate(5px, 40px) rotate(360deg); opacity: 0; }
    }
    
    @keyframes lightningFlash {
    0% { opacity: 0; }
    10% { opacity: 1; }
    20% { opacity: 0; }
    30% { opacity: 0.8; }
    40% { opacity: 0; }
    50% { opacity: 0.6; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

/* ===== GAME SCALE CSS STYLES ===== */

/* Game Scale Button Hover Effects */
.guide-content button:hover {
    background: rgba(50, 50, 50, 0.8) !important;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.guide-content button:active {
    transform: translateY(0);
}

/* Scale check animation */
#scale100Check, #scale90Check, #scale80Check, #scale75Check {
    transition: all 0.3s ease;
}

/* Smooth scaling transition */
#container {
    transition: transform 0.3s ease;
}

[id$="Menu"] {
    transition: transform 0.3s ease;
}



/* ===== EINDE GAME SCALE CSS ===== */

.citizen-name:hover {
    color: #5dade2 !important;
    text-shadow: 0 0 5px rgba(93, 173, 226, 0.5);
}

.citizen-name {
    transition: all 0.2s ease;
}

@keyframes levelUpPulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* Contribution Badge Tooltip Styling */
.contribution-badge-container {
    position: relative;
    display: inline-block;
}

.contribution-badge-container::before {
    content: 'Item';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 8px;
}

.contribution-badge-container::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 3px;
}

.contribution-badge-container:hover::before,
.contribution-badge-container:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Zorgt ervoor dat alleen de afbeelding vorm oplicht, niet het vierkant */
.contribution-badge-container img {
    filter: drop-shadow(0 0 0 transparent);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.contribution-badge-container:hover img {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.4));
    transform: scale(1.1);
}

@keyframes proposalBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Specifieke styling voor de status knoppen */
#jobButton {
    background: red !important;
    color: white !important;
}

#housingButton {
    background: red !important;
    color: white !important;
}

#familiesButton {
    background: red !important;
    color: white !important;
}

#marriageButton {
    background: red !important;
    color: white !important;
}

/* Toggle Passive Income knop styling */
#togglePassiveBtn {
    background: red !important;
    color: white !important;
}

/* +1 knop styling */
button[onclick*="increaseCounter()"] {
    background: red !important;
    color: white !important;
}

/* Show/Hide login code knop styling */
#toggleCodeBtn {
    background: red !important;
    color: white !important;
}

/* Hover effecten voor deze knoppen */
#jobButton:hover,
#housingButton:hover,
#familiesButton:hover,
#marriageButton:hover,
#togglePassiveBtn:hover,
button[onclick*="increaseCounter()"]:hover,
#toggleCodeBtn:hover {
    background: darkred !important;
}

button[onclick*="openInventoryMenu()"],
button[onclick*="openCharacterCustomization()"],
button[onclick*="openBackgroundSelection()"],
#statName {
    background: red !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover effect voor deze knoppen */
button[onclick*="openInventoryMenu()"]:hover,
button[onclick*="openCharacterCustomization()"]:hover,
button[onclick*="openBackgroundSelection()"]:hover,
#statName:hover {
    background: darkred !important;
}

/* Zorg ervoor dat titel tekst zichtbaar blijft met semi-transparante zwarte achtergrond */
#statName .title-name {
    background-color: rgba(0, 0, 0, 0.6) !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    margin-left: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Behoud het glow effect voor legendary en epic titels */
#statName .title-name.legendary {
    background-color: rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.8), 0 0 12px rgba(255, 170, 0, 0.6) !important;
    animation: legendaryPulse 4s linear infinite !important;
}

#statName .title-name.epic {
    background-color: rgba(0, 0, 0, 0.5) !important;
    animation: epicRedGlow 2s ease-in-out infinite, epicBlink 4s ease-in-out infinite !important;
    position: relative !important;
}

#statName .title-name.rare {
    background-color: rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 0 4px rgba(0, 112, 221, 0.8) !important;
}

#childrenButton {
    background: red !important;  /* Ook de kleur fixen */
    color: white !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    font-size: 0.8em !important;
    padding: 0 6px !important;
    cursor: pointer !important;
    margin-left: 10px !important;
    min-width: 65px !important;  /* ✅ FIX: 50px → 65px */
    height: 16px !important;
    line-height: 16px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

#childrenButton:hover {
    background: #990000 !important;  /* Ook hover kleur aanpassen */
}

/* Children menu animations */
#childrenMenu button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}
/* Straatlantaarn Glow Effect - origineel voor characterBackground */
#characterBackground.has-city-rain .street-lamp-glow {
    position: absolute;
    top: 80px;
    left: 40px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.6) 0%, rgba(255, 150, 50, 0.4) 50%, transparent 70%);
    filter: blur(8px);
    animation: streetLampFlicker 45s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}
/* Straatlantaarn Glow Effect - hoger voor admin list en view player */
.city-rain-effects .street-lamp-glow {
    position: absolute;
    top: 85px;
    left: 5px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.6) 0%, rgba(255, 150, 50, 0.4) 50%, transparent 70%);
    filter: blur(8px);
    animation: streetLampFlicker 45s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}
/* Straatlantaarn Glow Effect - specifiek voor admin list (government officials) */
[id^="adminBackground_"] .street-lamp-glow {
    position: absolute;
    top: 75px;
    left: 3px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.6) 0%, rgba(255, 150, 50, 0.4) 50%, transparent 70%);
    filter: blur(8px);
    animation: streetLampFlicker 45s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}
#characterBackground.has-city-rain::before,
#characterBackground.has-city-rain::after,
.city-rain-effects::before,
.city-rain-effects::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
#characterBackground.has-city-rain::before,
.city-rain-effects::before {
    top: -10px;
    left: 15%;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall1 1.8s infinite linear;
}
#characterBackground.has-city-rain::after,
.city-rain-effects::after {
    top: -10px;
    left: 25%;
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall2 2.1s infinite linear;
}
#characterBackground.has-city-rain .city-rain-drop-3,
.city-rain-effects .city-rain-drop-3 {
    position: absolute;
    top: -10px;
    left: 40%;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall3 1.9s infinite linear;
    pointer-events: none;
    z-index: 2;
}
#characterBackground.has-city-rain .city-rain-drop-4,
.city-rain-effects .city-rain-drop-4 {
    position: absolute;
    top: -10px;
    left: 55%;
    width: 2px;
    height: 17px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall4 2.3s infinite linear;
    pointer-events: none;
    z-index: 2;
}
#characterBackground.has-city-rain .city-rain-drop-5,
.city-rain-effects .city-rain-drop-5 {
    position: absolute;
    top: -10px;
    left: 70%;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall5 2.0s infinite linear;
    pointer-events: none;
    z-index: 2;
}
#characterBackground.has-city-rain .city-rain-drop-6,
.city-rain-effects .city-rain-drop-6 {
    position: absolute;
    top: -10px;
    left: 85%;
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall6 1.7s infinite linear;
    pointer-events: none;
    z-index: 2;
}

/* City Stars - twinklende sterren voor city view background */
#characterBackground.has-city-rain .city-star-1,
.city-rain-effects .city-star-1 {
    position: absolute;
    top: 15%;
    left: 8%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px white;
    animation: cityStarTwinkle1 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .city-star-2,
.city-rain-effects .city-star-2 {
    position: absolute;
    top: 8%;
    left: 27%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px white;
    animation: cityStarTwinkle2 2.8s ease-in-out infinite 0.5s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .city-star-3,
.city-rain-effects .city-star-3 {
    position: absolute;
    top: 18%;
    left: 43%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px white;
    animation: cityStarTwinkle1 2.2s ease-in-out infinite 1s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .city-star-4,
.city-rain-effects .city-star-4 {
    position: absolute;
    top: 5%;
    left: 64%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px white;
    animation: cityStarTwinkle2 3s ease-in-out infinite 0.3s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .city-star-5,
.city-rain-effects .city-star-5 {
    position: absolute;
    top: 5%;
    left: 90%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px white;
    animation: cityStarTwinkle1 2.6s ease-in-out infinite 0.8s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .city-star-6,
.city-rain-effects .city-star-6 {
    position: absolute;
    top: 10%;
    left: 52%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px white;
    animation: cityStarTwinkle2 2.4s ease-in-out infinite 1.2s;
    pointer-events: none;
    z-index: 1;
}

/* Animaties voor de sterren */
@keyframes cityStarTwinkle1 {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

@keyframes cityStarTwinkle2 {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Rookpluim Effect - dikke vuile schoorsteen rook rechts - SMALLE PLUIM - CONTINUE STROOM */
#characterBackground.has-city-rain .chimney-smoke-1,
.city-rain-effects .chimney-smoke-1 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 45px;
    height: 65px;
    background: radial-gradient(circle, rgba(60, 55, 50, 0.9) 0%, rgba(80, 75, 70, 0.75) 30%, rgba(100, 95, 90, 0.5) 60%, transparent 85%);
    border-radius: 50%;
    filter: blur(12px);
    animation: chimneySmokePlume1 5s infinite ease-out;
    animation-delay: 0s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-2,
.city-rain-effects .chimney-smoke-2 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 50px;
    height: 70px;
    background: radial-gradient(circle, rgba(50, 45, 40, 0.85) 0%, rgba(70, 65, 60, 0.7) 35%, rgba(90, 85, 80, 0.45) 65%, transparent 88%);
    border-radius: 50%;
    filter: blur(15px);
    animation: chimneySmokePlume2 5.5s infinite ease-out;
    animation-delay: -0.5s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-3,
.city-rain-effects .chimney-smoke-3 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 52px;
    height: 72px;
    background: radial-gradient(circle, rgba(55, 50, 45, 0.88) 0%, rgba(75, 70, 65, 0.72) 32%, rgba(95, 90, 85, 0.48) 62%, transparent 86%);
    border-radius: 50%;
    filter: blur(13px);
    animation: chimneySmokePlume3 6s infinite ease-out;
    animation-delay: -1.0s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-4,
.city-rain-effects .chimney-smoke-4 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 42px;
    height: 62px;
    background: radial-gradient(circle, rgba(65, 60, 55, 0.92) 0%, rgba(85, 80, 75, 0.78) 28%, rgba(105, 100, 95, 0.52) 58%, transparent 84%);
    border-radius: 50%;
    filter: blur(11px);
    animation: chimneySmokePlume4 4.8s infinite ease-out;
    animation-delay: -1.5s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-5,
.city-rain-effects .chimney-smoke-5 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 48px;
    height: 68px;
    background: radial-gradient(circle, rgba(58, 53, 48, 0.87) 0%, rgba(78, 73, 68, 0.73) 33%, rgba(98, 93, 88, 0.47) 63%, transparent 87%);
    border-radius: 50%;
    filter: blur(14px);
    animation: chimneySmokePlume5 5.8s infinite ease-out;
    animation-delay: -2.0s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-6,
.city-rain-effects .chimney-smoke-6 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 46px;
    height: 66px;
    background: radial-gradient(circle, rgba(62, 57, 52, 0.9) 0%, rgba(82, 77, 72, 0.76) 31%, rgba(102, 97, 92, 0.5) 61%, transparent 85%);
    border-radius: 50%;
    filter: blur(13px);
    animation: chimneySmokePlume6 5.3s infinite ease-out;
    animation-delay: -2.5s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-7,
.city-rain-effects .chimney-smoke-7 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 44px;
    height: 64px;
    background: radial-gradient(circle, rgba(52, 47, 42, 0.86) 0%, rgba(72, 67, 62, 0.71) 34%, rgba(92, 87, 82, 0.46) 64%, transparent 88%);
    border-radius: 50%;
    filter: blur(12px);
    animation: chimneySmokePlume7 5.2s infinite ease-out;
    animation-delay: -3.0s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-8,
.city-rain-effects .chimney-smoke-8 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 47px;
    height: 67px;
    background: radial-gradient(circle, rgba(56, 51, 46, 0.89) 0%, rgba(76, 71, 66, 0.74) 32%, rgba(96, 91, 86, 0.49) 62%, transparent 86%);
    border-radius: 50%;
    filter: blur(14px);
    animation: chimneySmokePlume8 5.6s infinite ease-out;
    animation-delay: -3.5s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-9,
.city-rain-effects .chimney-smoke-9 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 51px;
    height: 71px;
    background: radial-gradient(circle, rgba(54, 49, 44, 0.88) 0%, rgba(74, 69, 64, 0.72) 33%, rgba(94, 89, 84, 0.48) 63%, transparent 87%);
    border-radius: 50%;
    filter: blur(15px);
    animation: chimneySmokePlume9 5.9s infinite ease-out;
    animation-delay: -4.0s;
    pointer-events: none;
    z-index: 1;
}

#characterBackground.has-city-rain .chimney-smoke-10,
.city-rain-effects .chimney-smoke-10 {
    position: absolute;
    top: 18%;
    right: 17%;
    width: 49px;
    height: 69px;
    background: radial-gradient(circle, rgba(60, 55, 50, 0.91) 0%, rgba(80, 75, 70, 0.77) 30%, rgba(100, 95, 90, 0.51) 60%, transparent 85%);
    border-radius: 50%;
    filter: blur(13px);
    animation: chimneySmokePlume10 5.4s infinite ease-out;
    animation-delay: -4.5s;
    pointer-events: none;
    z-index: 1;
}

/* Rookpluim Animaties - geleidelijke continue stroom - SMALLER */
@keyframes chimneySmokePlume1 {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    50% {
        transform: translate(-1px, -60px) scale(0.9);
        opacity: 0.42;
    }
    100% {
        transform: translate(-2px, -120px) scale(1.3);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume2 {
    0% {
        transform: translate(0, 0) scale(0.25);
        opacity: 0;
    }
    20% {
        opacity: 0.58;
    }
    50% {
        transform: translate(1px, -70px) scale(0.95);
        opacity: 0.4;
    }
    100% {
        transform: translate(2px, -140px) scale(1.35);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume3 {
    0% {
        transform: translate(0, 0) scale(0.35);
        opacity: 0;
    }
    20% {
        opacity: 0.62;
    }
    50% {
        transform: translate(-1px, -65px) scale(1.0);
        opacity: 0.43;
    }
    100% {
        transform: translate(-2px, -130px) scale(1.4);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume4 {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    20% {
        opacity: 0.65;
    }
    50% {
        transform: translate(1px, -55px) scale(0.85);
        opacity: 0.45;
    }
    100% {
        transform: translate(2px, -110px) scale(1.25);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume5 {
    0% {
        transform: translate(0, 0) scale(0.32);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    50% {
        transform: translate(-1px, -68px) scale(0.98);
        opacity: 0.41;
    }
    100% {
        transform: translate(-1px, -135px) scale(1.38);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume6 {
    0% {
        transform: translate(0, 0) scale(0.28);
        opacity: 0;
    }
    20% {
        opacity: 0.63;
    }
    50% {
        transform: translate(1px, -62px) scale(0.92);
        opacity: 0.44;
    }
    100% {
        transform: translate(2px, -125px) scale(1.32);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume7 {
    0% {
        transform: translate(0, 0) scale(0.26);
        opacity: 0;
    }
    20% {
        opacity: 0.59;
    }
    50% {
        transform: translate(-1px, -58px) scale(0.88);
        opacity: 0.39;
    }
    100% {
        transform: translate(-2px, -115px) scale(1.28);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume8 {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    20% {
        opacity: 0.61;
    }
    50% {
        transform: translate(1px, -66px) scale(0.96);
        opacity: 0.43;
    }
    100% {
        transform: translate(1px, -132px) scale(1.36);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume9 {
    0% {
        transform: translate(0, 0) scale(0.34);
        opacity: 0;
    }
    20% {
        opacity: 0.62;
    }
    50% {
        transform: translate(-1px, -64px) scale(1.02);
        opacity: 0.42;
    }
    100% {
        transform: translate(-2px, -128px) scale(1.42);
        opacity: 0;
    }
}

@keyframes chimneySmokePlume10 {
    0% {
        transform: translate(0, 0) scale(0.31);
        opacity: 0;
    }
    20% {
        opacity: 0.64;
    }
    50% {
        transform: translate(1px, -61px) scale(0.94);
        opacity: 0.44;
    }
    100% {
        transform: translate(2px, -122px) scale(1.34);
        opacity: 0;
    }
}

#viewPlayerBackground .chimney-smoke-1,
#viewPlayerBackground .chimney-smoke-2,
#viewPlayerBackground .chimney-smoke-3,
#viewPlayerBackground .chimney-smoke-4,
#viewPlayerBackground .chimney-smoke-5,
#viewPlayerBackground .chimney-smoke-6,
#viewPlayerBackground .chimney-smoke-7,
#viewPlayerBackground .chimney-smoke-8,
#viewPlayerBackground .chimney-smoke-9,
#viewPlayerBackground .chimney-smoke-10 {
    top: 20%;     /* Pas aan */
    right: 10%;   /* Pas aan */
}

/* Horizontale Lightning Glow - bliksem gloed over de horizon (dikker/breder) */
#characterBackground.has-city-rain .city-lightning-horizon-1,
.city-rain-effects .city-lightning-horizon-1 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to bottom, 
        rgba(255, 136, 0, 0.12) 0%,
        rgba(255, 102, 0, 0.18) 20%,
        rgba(255, 68, 0, 0.25) 40%,
        rgba(255, 102, 0, 0.15) 65%,
        rgba(255, 136, 0, 0.05) 85%,
        rgba(255, 136, 0, 0) 100%
    );
    filter: blur(8px);
    animation: cityHorizonLightning1 25s infinite ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

#characterBackground.has-city-rain .city-lightning-horizon-2,
.city-rain-effects .city-lightning-horizon-2 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to bottom, 
        rgba(255, 119, 0, 0.1) 0%,
        rgba(255, 136, 0, 0.15) 25%,
        rgba(255, 102, 0, 0.22) 45%,
        rgba(255, 136, 0, 0.12) 70%,
        rgba(255, 119, 0, 0.05) 88%,
        rgba(255, 119, 0, 0) 100%
    );
    filter: blur(10px);
    animation: cityHorizonLightning2 32s infinite ease-in-out 10s;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

#characterBackground.has-city-rain .city-lightning-horizon-3,
.city-rain-effects .city-lightning-horizon-3 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to bottom, 
        rgba(255, 102, 0, 0.15) 0%,
        rgba(255, 119, 0, 0.2) 30%,
        rgba(255, 68, 0, 0.3) 50%,
        rgba(255, 119, 0, 0.18) 68%,
        rgba(255, 102, 0, 0.08) 86%,
        rgba(255, 102, 0, 0) 100%
    );
    filter: blur(12px);
    animation: cityHorizonLightning3 40s infinite ease-in-out 20s;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

/* Horizon lightning flash animaties - DUIDELIJKE FLITSEN synchroon */
@keyframes cityHorizonLightning1 {
    0%, 10%, 100% { opacity: 0; }
    12% { opacity: 0; }
    12.02% { opacity: 0.8; }
    12.06% { opacity: 0.8; }
    12.08% { opacity: 0; }
    12.18% { opacity: 0; }
    12.2% { opacity: 0.8; }
    12.24% { opacity: 0.8; }
    12.26% { opacity: 0; }
    12.36% { opacity: 0; }
    12.38% { opacity: 0.8; }
    12.42% { opacity: 0.8; }
    12.46% { opacity: 0.75; }
    12.7% { opacity: 0.7; }
    13% { opacity: 0.65; }
    13.5% { opacity: 0.58; }
    14% { opacity: 0.5; }
    14.5% { opacity: 0.42; }
    15% { opacity: 0.34; }
    15.5% { opacity: 0.26; }
    16% { opacity: 0.18; }
    16.5% { opacity: 0.1; }
    17% { opacity: 0.05; }
    17.5%, 100% { opacity: 0; }
}

@keyframes cityHorizonLightning2 {
    0%, 6%, 100% { opacity: 0; }
    8% { opacity: 0; }
    8.02% { opacity: 0.75; }
    8.06% { opacity: 0.75; }
    8.08% { opacity: 0; }
    8.18% { opacity: 0; }
    8.2% { opacity: 0.75; }
    8.24% { opacity: 0.75; }
    8.26% { opacity: 0; }
    8.36% { opacity: 0; }
    8.38% { opacity: 0.75; }
    8.42% { opacity: 0.75; }
    8.46% { opacity: 0.7; }
    8.7% { opacity: 0.65; }
    9% { opacity: 0.6; }
    9.5% { opacity: 0.53; }
    10% { opacity: 0.46; }
    10.5% { opacity: 0.39; }
    11% { opacity: 0.32; }
    11.5% { opacity: 0.24; }
    12% { opacity: 0.16; }
    12.5% { opacity: 0.09; }
    13% { opacity: 0.04; }
    13.5%, 100% { opacity: 0; }
}

@keyframes cityHorizonLightning3 {
    0%, 4%, 100% { opacity: 0; }
    6% { opacity: 0; }
    6.02% { opacity: 0.8; }
    6.06% { opacity: 0.8; }
    6.08% { opacity: 0; }
    6.18% { opacity: 0; }
    6.2% { opacity: 0.8; }
    6.24% { opacity: 0.8; }
    6.26% { opacity: 0; }
    6.36% { opacity: 0; }
    6.38% { opacity: 0.8; }
    6.42% { opacity: 0.8; }
    6.46% { opacity: 0.75; }
    6.7% { opacity: 0.7; }
    7% { opacity: 0.65; }
    7.5% { opacity: 0.58; }
    8% { opacity: 0.5; }
    8.5% { opacity: 0.42; }
    9% { opacity: 0.34; }
    9.5% { opacity: 0.26; }
    10% { opacity: 0.18; }
    10.5% { opacity: 0.1; }
    11% { opacity: 0.05; }
    11.5%, 100% { opacity: 0; }
}

/* Kleine bliksemschichten in de hoeken - synchroon met horizon glows */
#characterBackground.has-city-rain .city-lightning-strike-left,
.city-rain-effects .city-lightning-strike-left {
    position: absolute;
    top: -1%;
    left: 5%;
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: cityLightningStrikeLeft 25s infinite ease-in-out;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-city-rain .city-lightning-strike-right,
.city-rain-effects .city-lightning-strike-right {
    position: absolute;
    top: 0%;
    right: 5%;
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: cityLightningStrikeRight 32s infinite ease-in-out 10s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-city-rain .city-lightning-strike-right-sync,
.city-rain-effects .city-lightning-strike-right-sync {
    position: absolute;
    top: 0%;
    right: 5%;
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: cityLightningStrikeRightSync 25s infinite ease-in-out;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-city-rain .city-lightning-strike-center,
.city-rain-effects .city-lightning-strike-center {
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: cityLightningStrikeCenter 40s infinite ease-in-out 20s;
    pointer-events: none;
    z-index: 3;
}

/* Lightning strike animaties - DUIDELIJKE LANGERE FLITSEN met LANGERE pauzes */
@keyframes cityLightningStrikeLeft {
    0%, 100% { opacity: 0; }
    12% { opacity: 0; }
    12.02% { opacity: 1; }
    12.06% { opacity: 1; }
    12.08% { opacity: 0; }
    12.18% { opacity: 0; }
    12.2% { opacity: 1; }
    12.24% { opacity: 1; }
    12.26% { opacity: 0; }
    12.36% { opacity: 0; }
    12.38% { opacity: 1; }
    12.42% { opacity: 1; }
    12.46% { opacity: 0.95; }
    12.7% { opacity: 0.9; }
    13% { opacity: 0.85; }
    13.5% { opacity: 0.75; }
    14% { opacity: 0.65; }
    14.5% { opacity: 0.55; }
    15% { opacity: 0.45; }
    15.5% { opacity: 0.35; }
    16% { opacity: 0.25; }
    16.5% { opacity: 0.15; }
    17% { opacity: 0.08; }
    17.5%, 100% { opacity: 0; }
}

@keyframes cityLightningStrikeRight {
    0%, 100% { opacity: 0; }
    8% { opacity: 0; }
    8.02% { opacity: 1; }
    8.06% { opacity: 1; }
    8.08% { opacity: 0; }
    8.18% { opacity: 0; }
    8.2% { opacity: 1; }
    8.24% { opacity: 1; }
    8.26% { opacity: 0; }
    8.36% { opacity: 0; }
    8.38% { opacity: 1; }
    8.42% { opacity: 1; }
    8.46% { opacity: 0.9; }
    8.7% { opacity: 0.85; }
    9% { opacity: 0.8; }
    9.5% { opacity: 0.7; }
    10% { opacity: 0.6; }
    10.5% { opacity: 0.5; }
    11% { opacity: 0.4; }
    11.5% { opacity: 0.3; }
    12% { opacity: 0.2; }
    12.5% { opacity: 0.1; }
    13% { opacity: 0.05; }
    13.5%, 100% { opacity: 0; }
}

@keyframes cityLightningStrikeCenter {
    0%, 100% { opacity: 0; }
    6% { opacity: 0; }
    6.02% { opacity: 1; }
    6.06% { opacity: 1; }
    6.08% { opacity: 0; }
    6.18% { opacity: 0; }
    6.2% { opacity: 1; }
    6.24% { opacity: 1; }
    6.26% { opacity: 0; }
    6.36% { opacity: 0; }
    6.38% { opacity: 1; }
    6.42% { opacity: 1; }
    6.46% { opacity: 0.95; }
    6.7% { opacity: 0.9; }
    7% { opacity: 0.85; }
    7.5% { opacity: 0.75; }
    8% { opacity: 0.65; }
    8.5% { opacity: 0.55; }
    9% { opacity: 0.45; }
    9.5% { opacity: 0.35; }
    10% { opacity: 0.25; }
    10.5% { opacity: 0.15; }
    11% { opacity: 0.08; }
    11.5%, 100% { opacity: 0; }
}

@keyframes cityLightningStrikeRightSync {
    0%, 100% { opacity: 0; }
    12% { opacity: 0; }
    12.02% { opacity: 1; }
    12.06% { opacity: 1; }
    12.08% { opacity: 0; }
    12.18% { opacity: 0; }
    12.2% { opacity: 1; }
    12.24% { opacity: 1; }
    12.26% { opacity: 0; }
    12.36% { opacity: 0; }
    12.38% { opacity: 1; }
    12.42% { opacity: 1; }
    12.46% { opacity: 0.95; }
    12.7% { opacity: 0.9; }
    13% { opacity: 0.85; }
    13.5% { opacity: 0.75; }
    14% { opacity: 0.65; }
    14.5% { opacity: 0.55; }
    15% { opacity: 0.45; }
    15.5% { opacity: 0.35; }
    16% { opacity: 0.25; }
    16.5% { opacity: 0.15; }
    17% { opacity: 0.08; }
    17.5%, 100% { opacity: 0; }
}


/* Street Lamp Flicker Animation - GHETTO STYLE: lange cyclus met meer actie in het begin */
@keyframes streetLampFlicker {
    0% { opacity: 1; transform: scale(1); }
    
    /* Flicker 1 - vroeg, kort */
    3% { opacity: 0.35; transform: scale(0.95); }
    3.5% { opacity: 1; transform: scale(1); }
    
    6% { opacity: 1; transform: scale(1); }
    
    /* Flicker 2 - licht */
    9% { opacity: 0.5; transform: scale(0.97); }
    9.5% { opacity: 0.85; transform: scale(1); }
    10% { opacity: 1; transform: scale(1); }
    
    /* Flicker 3 - hevig */
    14% { opacity: 0.15; transform: scale(0.92); }
    14.5% { opacity: 0.7; transform: scale(0.98); }
    15% { opacity: 0.2; transform: scale(0.93); }
    15.5% { opacity: 1; transform: scale(1); }
    
    20% { opacity: 1; transform: scale(1); }
    
    /* Flicker 4 - medium */
    24% { opacity: 0.3; transform: scale(0.95); }
    24.5% { opacity: 0.9; transform: scale(1); }
    25% { opacity: 1; transform: scale(1); }
    
    35% { opacity: 1; transform: scale(1); }
    
    /* Flicker 5 - kort */
    47% { opacity: 0.3; transform: scale(0.95); }
    47.5% { opacity: 1; transform: scale(1); }
    
    58% { opacity: 1; transform: scale(1); }
    
    /* Flicker 6 - medium */
    66% { opacity: 0.2; transform: scale(0.93); }
    66.5% { opacity: 0.85; transform: scale(1); }
    67% { opacity: 0.35; transform: scale(0.96); }
    67.5% { opacity: 1; transform: scale(1); }
    
    78% { opacity: 1; transform: scale(1); }
    
    /* Flicker 7 - heel kort */
    83% { opacity: 0.5; transform: scale(0.97); }
    83.3% { opacity: 1; transform: scale(1); }
    
    92% { opacity: 1; transform: scale(1); }
    
    /* Flicker 8 - licht op het einde */
    95% { opacity: 0.4; transform: scale(0.96); }
    95.5% { opacity: 0.9; transform: scale(1); }
    96% { opacity: 1; transform: scale(1); }
    
    100% { opacity: 1; transform: scale(1); }
}

/* City Rain Effect - exact zoals government building */
#characterBackground.has-city-rain::before,
#characterBackground.has-city-rain::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* Rain Drop 1 */
#characterBackground.has-city-rain::before {
    top: -10px;
    left: 15%;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall1 1.8s infinite linear;
}

/* Rain Drop 2 */
#characterBackground.has-city-rain::after {
    top: -10px;
    left: 25%;
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall2 2.1s infinite linear;
}

/* Extra rain drops via JavaScript */
#characterBackground.has-city-rain .city-rain-drop-3 {
    position: absolute;
    top: -10px;
    left: 40%;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall3 1.9s infinite linear;
    pointer-events: none;
    z-index: 2;
}

#characterBackground.has-city-rain .city-rain-drop-4 {
    position: absolute;
    top: -10px;
    left: 55%;
    width: 2px;
    height: 17px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall4 2.3s infinite linear;
    pointer-events: none;
    z-index: 2;
}

#characterBackground.has-city-rain .city-rain-drop-5 {
    position: absolute;
    top: -10px;
    left: 70%;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall5 2.0s infinite linear;
    pointer-events: none;
    z-index: 2;
}

#characterBackground.has-city-rain .city-rain-drop-6 {
    position: absolute;
    top: -10px;
    left: 85%;
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    border-radius: 0 0 50% 50%;
    animation: cityRainFall6 1.7s infinite linear;
    pointer-events: none;
    z-index: 2;
}

/* Rain Animations — translate3d (compositor) instead of top */
@keyframes cityRainFall1 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(0, 310px, 0); opacity: 0; } }
@keyframes cityRainFall2 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(0, 310px, 0); opacity: 0; } }
@keyframes cityRainFall3 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(0, 310px, 0); opacity: 0; } }
@keyframes cityRainFall4 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(0, 310px, 0); opacity: 0; } }
@keyframes cityRainFall5 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(0, 310px, 0); opacity: 0; } }
@keyframes cityRainFall6 { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(0, 310px, 0); opacity: 0; } }


/* Alleen jobsMenu extra schalen, apartment menu's laten gewoon meeschalen met zoom */
#jobsMenu {
    /* Reset alle transforms behalve de originele translateY */
    transform: translateY(-50%) !important;
}


/* Zorg ervoor dat apartment menu's gewoon meeschalen */
#apartmentMenu,
#apartmentInteriorMenu {
    /* Reset alle transforms behalve de originele translateY */
    transform: translateY(-50%) !important;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        opacity: 0.6; 
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Island Store items special glow */
.inventory-item.island-item {
    animation: islandGlow 2s ease-in-out infinite;
}

@keyframes islandGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 136, 0.7), 0 0 35px rgba(0, 255, 136, 0.4);
    }
}

/* Flikkerende sterren animatie */
@keyframes twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* Vallende ster animatie */
@keyframes shootingStar {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translate(150px, 150px);
        opacity: 0;
    }
}

/* Sigaret glow effect */
@keyframes sigaretGlow {
    0%, 100% { 
        filter: drop-shadow(2px 0 3px rgba(255, 100, 0, 0.6)) brightness(1);
    }
    50% { 
        filter: drop-shadow(2px 0 8px rgba(255, 80, 0, 0.9)) brightness(1.3);
    }
}

/* Rook animatie */
@keyframes sigaretSmoke {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0.7;
    }
    50% {
        transform: translate(8px, -15px) scale(1);
        opacity: 0.4;
    }
    100% {
        transform: translate(15px, -30px) scale(1.5);
        opacity: 0;
    }
}

/* Meerdere rook wolkjes met verschillende delays */
.sigaret-smoke {
    position: absolute;
    right: -5%;
    top: 20%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, rgba(150, 150, 150, 0.3) 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    animation: sigaretSmoke 2s infinite ease-out;
}

.sigaret-smoke-2 {
    animation-delay: 0.6s;
    animation-duration: 2.2s;
}

.sigaret-smoke-3 {
    animation-delay: 1.2s;
    animation-duration: 1.8s;
}

.sigaret-smoke-4 {
    animation-delay: 1.8s;
    animation-duration: 2.4s;
}

/* Ghost church clothing - orbiting smoke aura */
@keyframes ghostClothingOrbitIcon1 {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translate(15px, 0) rotate(0deg) scale(1); opacity: 0.45; }
    50%  { transform: translate(-50%, -50%) rotate(180deg) translate(15px, 0) rotate(-180deg) scale(1.2); opacity: 0.82; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translate(15px, 0) rotate(-360deg) scale(1); opacity: 0.45; }
}

@keyframes ghostClothingOrbitIcon2 {
    0%   { transform: translate(-50%, -50%) rotate(72deg) translate(13px, 0) rotate(-72deg) scale(0.95); opacity: 0.4; }
    50%  { transform: translate(-50%, -50%) rotate(252deg) translate(13px, 0) rotate(-252deg) scale(1.15); opacity: 0.75; }
    100% { transform: translate(-50%, -50%) rotate(432deg) translate(13px, 0) rotate(-432deg) scale(0.95); opacity: 0.4; }
}

@keyframes ghostClothingOrbitIcon3 {
    0%   { transform: translate(-50%, -50%) rotate(144deg) translate(17px, 0) rotate(-144deg) scale(1.05); opacity: 0.5; }
    50%  { transform: translate(-50%, -50%) rotate(324deg) translate(17px, 0) rotate(-324deg) scale(1.3); opacity: 0.88; }
    100% { transform: translate(-50%, -50%) rotate(504deg) translate(17px, 0) rotate(-504deg) scale(1.05); opacity: 0.5; }
}

@keyframes ghostClothingOrbitIcon4 {
    0%   { transform: translate(-50%, -50%) rotate(216deg) translate(12px, 0) rotate(-216deg) scale(0.9); opacity: 0.35; }
    50%  { transform: translate(-50%, -50%) rotate(396deg) translate(12px, 0) rotate(-396deg) scale(1.1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) rotate(576deg) translate(12px, 0) rotate(-576deg) scale(0.9); opacity: 0.35; }
}

@keyframes ghostClothingOrbitIcon5 {
    0%   { transform: translate(-50%, -50%) rotate(288deg) translate(16px, 0) rotate(-288deg) scale(1); opacity: 0.42; }
    50%  { transform: translate(-50%, -50%) rotate(468deg) translate(16px, 0) rotate(-468deg) scale(1.25); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) rotate(648deg) translate(16px, 0) rotate(-648deg) scale(1); opacity: 0.42; }
}

@keyframes ghostClothingOrbitIconLg1 {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translate(34px, 0) rotate(0deg) scale(1); opacity: 0.45; }
    50%  { transform: translate(-50%, -50%) rotate(180deg) translate(34px, 0) rotate(-180deg) scale(1.2); opacity: 0.82; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translate(34px, 0) rotate(-360deg) scale(1); opacity: 0.45; }
}

@keyframes ghostClothingOrbitIconLg2 {
    0%   { transform: translate(-50%, -50%) rotate(72deg) translate(30px, 0) rotate(-72deg) scale(0.95); opacity: 0.4; }
    50%  { transform: translate(-50%, -50%) rotate(252deg) translate(30px, 0) rotate(-252deg) scale(1.15); opacity: 0.75; }
    100% { transform: translate(-50%, -50%) rotate(432deg) translate(30px, 0) rotate(-432deg) scale(0.95); opacity: 0.4; }
}

@keyframes ghostClothingOrbitIconLg3 {
    0%   { transform: translate(-50%, -50%) rotate(144deg) translate(38px, 0) rotate(-144deg) scale(1.05); opacity: 0.5; }
    50%  { transform: translate(-50%, -50%) rotate(324deg) translate(38px, 0) rotate(-324deg) scale(1.3); opacity: 0.88; }
    100% { transform: translate(-50%, -50%) rotate(504deg) translate(38px, 0) rotate(-504deg) scale(1.05); opacity: 0.5; }
}

@keyframes ghostClothingOrbitIconLg4 {
    0%   { transform: translate(-50%, -50%) rotate(216deg) translate(28px, 0) rotate(-216deg) scale(0.9); opacity: 0.35; }
    50%  { transform: translate(-50%, -50%) rotate(396deg) translate(28px, 0) rotate(-396deg) scale(1.1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) rotate(576deg) translate(28px, 0) rotate(-576deg) scale(0.9); opacity: 0.35; }
}

@keyframes ghostClothingOrbitIconLg5 {
    0%   { transform: translate(-50%, -50%) rotate(288deg) translate(36px, 0) rotate(-288deg) scale(1); opacity: 0.42; }
    50%  { transform: translate(-50%, -50%) rotate(468deg) translate(36px, 0) rotate(-468deg) scale(1.25); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) rotate(648deg) translate(36px, 0) rotate(-648deg) scale(1); opacity: 0.42; }
}

@keyframes ghostClothingOrbitLayer1 {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translate(32px, 0) rotate(0deg) scale(1); opacity: 0.45; }
    50%  { transform: translate(-50%, -50%) rotate(180deg) translate(32px, 0) rotate(-180deg) scale(1.2); opacity: 0.82; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translate(32px, 0) rotate(-360deg) scale(1); opacity: 0.45; }
}

@keyframes ghostClothingOrbitLayer2 {
    0%   { transform: translate(-50%, -50%) rotate(72deg) translate(28px, 0) rotate(-72deg) scale(0.95); opacity: 0.4; }
    50%  { transform: translate(-50%, -50%) rotate(252deg) translate(28px, 0) rotate(-252deg) scale(1.15); opacity: 0.75; }
    100% { transform: translate(-50%, -50%) rotate(432deg) translate(28px, 0) rotate(-432deg) scale(0.95); opacity: 0.4; }
}

@keyframes ghostClothingOrbitLayer3 {
    0%   { transform: translate(-50%, -50%) rotate(144deg) translate(36px, 0) rotate(-144deg) scale(1.05); opacity: 0.5; }
    50%  { transform: translate(-50%, -50%) rotate(324deg) translate(36px, 0) rotate(-324deg) scale(1.3); opacity: 0.88; }
    100% { transform: translate(-50%, -50%) rotate(504deg) translate(36px, 0) rotate(-504deg) scale(1.05); opacity: 0.5; }
}

@keyframes ghostClothingOrbitLayer4 {
    0%   { transform: translate(-50%, -50%) rotate(216deg) translate(24px, 0) rotate(-216deg) scale(0.9); opacity: 0.35; }
    50%  { transform: translate(-50%, -50%) rotate(396deg) translate(24px, 0) rotate(-396deg) scale(1.1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) rotate(576deg) translate(24px, 0) rotate(-576deg) scale(0.9); opacity: 0.35; }
}

@keyframes ghostClothingOrbitLayer5 {
    0%   { transform: translate(-50%, -50%) rotate(288deg) translate(34px, 0) rotate(-288deg) scale(1); opacity: 0.42; }
    50%  { transform: translate(-50%, -50%) rotate(468deg) translate(34px, 0) rotate(-468deg) scale(1.25); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) rotate(648deg) translate(34px, 0) rotate(-648deg) scale(1); opacity: 0.42; }
}

@keyframes ghostClothingItemFloat {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(180, 160, 255, 0.45));
        opacity: 0.92;
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(210, 190, 255, 0.75));
        opacity: 1;
    }
}

.ghost-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.ghost-clothing-icon > img {
    position: relative;
    z-index: 2;
    animation: ghostClothingItemFloat 3.5s infinite ease-in-out;
}

.ghost-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.ghost-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.ghost-clothing-layer {
    overflow: visible !important;
    animation: ghostClothingItemFloat 3.5s infinite ease-in-out;
}

.ghost-clothing-smoke {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(210, 195, 255, 0.7) 0%, rgba(150, 130, 220, 0.4) 42%, rgba(120, 100, 180, 0.12) 68%, transparent 78%);
    filter: blur(2px);
    will-change: transform, opacity;
}

.ghost-clothing-icon .ghost-clothing-smoke {
    width: 14px;
    height: 10px;
}

.ghost-clothing-icon-lg .ghost-clothing-smoke {
    width: 22px;
    height: 14px;
}

.ghost-clothing-layer .ghost-clothing-smoke {
    width: 26%;
    height: 18%;
    filter: blur(3px);
}

.ghost-clothing-icon .ghost-clothing-smoke-1 { animation: ghostClothingOrbitIcon1 4.2s linear infinite; }
.ghost-clothing-icon .ghost-clothing-smoke-2 { animation: ghostClothingOrbitIcon2 5.1s linear infinite; }
.ghost-clothing-icon .ghost-clothing-smoke-3 { animation: ghostClothingOrbitIcon3 4.8s linear infinite; }
.ghost-clothing-icon .ghost-clothing-smoke-4 { animation: ghostClothingOrbitIcon4 5.6s linear infinite; }
.ghost-clothing-icon .ghost-clothing-smoke-5 { animation: ghostClothingOrbitIcon5 4.5s linear infinite; }

.ghost-clothing-icon-lg .ghost-clothing-smoke-1 { animation: ghostClothingOrbitIconLg1 4.2s linear infinite; }
.ghost-clothing-icon-lg .ghost-clothing-smoke-2 { animation: ghostClothingOrbitIconLg2 5.1s linear infinite; }
.ghost-clothing-icon-lg .ghost-clothing-smoke-3 { animation: ghostClothingOrbitIconLg3 4.8s linear infinite; }
.ghost-clothing-icon-lg .ghost-clothing-smoke-4 { animation: ghostClothingOrbitIconLg4 5.6s linear infinite; }
.ghost-clothing-icon-lg .ghost-clothing-smoke-5 { animation: ghostClothingOrbitIconLg5 4.5s linear infinite; }

.ghost-clothing-layer .ghost-clothing-smoke-1 { animation: ghostClothingOrbitLayer1 4.2s linear infinite; }
.ghost-clothing-layer .ghost-clothing-smoke-2 { animation: ghostClothingOrbitLayer2 5.1s linear infinite; }
.ghost-clothing-layer .ghost-clothing-smoke-3 { animation: ghostClothingOrbitLayer3 4.8s linear infinite; }
.ghost-clothing-layer .ghost-clothing-smoke-4 { animation: ghostClothingOrbitLayer4 5.6s linear infinite; }
.ghost-clothing-layer .ghost-clothing-smoke-5 { animation: ghostClothingOrbitLayer5 4.5s linear infinite; }

/* Trash Can hat - green stink fumes rising upward */
@keyframes stinkFumeRiseIcon1 {
    0%   { transform: translate(-50%, 0) scale(0.45); opacity: 0; }
    20%  { opacity: 0.72; }
    80%  { opacity: 0.38; }
    100% { transform: translate(calc(-50% + 8px), -40px) scale(1.35); opacity: 0; }
}

@keyframes stinkFumeRiseIcon2 {
    0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    22%  { opacity: 0.78; }
    100% { transform: translate(calc(-50% - 10px), -48px) scale(1.5); opacity: 0; }
}

@keyframes stinkFumeRiseIcon3 {
    0%   { transform: translate(-50%, 0) scale(0.42); opacity: 0; }
    18%  { opacity: 0.68; }
    100% { transform: translate(calc(-50% + 4px), -36px) scale(1.25); opacity: 0; }
}

@keyframes stinkFumeRiseIcon4 {
    0%   { transform: translate(-50%, 0) scale(0.48); opacity: 0; }
    24%  { opacity: 0.75; }
    100% { transform: translate(calc(-50% - 6px), -44px) scale(1.4); opacity: 0; }
}

@keyframes stinkFumeRiseIcon5 {
    0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    20%  { opacity: 0.65; }
    100% { transform: translate(calc(-50% + 12px), -38px) scale(1.2); opacity: 0; }
}

@keyframes stinkFumeRiseIconLg1 {
    0%   { transform: translate(-50%, 0) scale(0.45); opacity: 0; }
    20%  { opacity: 0.72; }
    100% { transform: translate(calc(-50% + 10px), -70px) scale(1.45); opacity: 0; }
}

@keyframes stinkFumeRiseIconLg2 {
    0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    22%  { opacity: 0.8; }
    100% { transform: translate(calc(-50% - 14px), -82px) scale(1.6); opacity: 0; }
}

@keyframes stinkFumeRiseIconLg3 {
    0%   { transform: translate(-50%, 0) scale(0.42); opacity: 0; }
    18%  { opacity: 0.68; }
    100% { transform: translate(calc(-50% + 6px), -62px) scale(1.3); opacity: 0; }
}

@keyframes stinkFumeRiseIconLg4 {
    0%   { transform: translate(-50%, 0) scale(0.48); opacity: 0; }
    24%  { opacity: 0.76; }
    100% { transform: translate(calc(-50% - 8px), -76px) scale(1.5); opacity: 0; }
}

@keyframes stinkFumeRiseIconLg5 {
    0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    20%  { opacity: 0.64; }
    100% { transform: translate(calc(-50% + 16px), -66px) scale(1.25); opacity: 0; }
}

@keyframes stinkFumeRiseLayer1 {
    0%   { transform: translate(-50%, 0) scale(0.45); opacity: 0; }
    20%  { opacity: 0.72; }
    100% { transform: translate(calc(-50% + 12px), -75px) scale(1.5); opacity: 0; }
}

@keyframes stinkFumeRiseLayer2 {
    0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    22%  { opacity: 0.8; }
    100% { transform: translate(calc(-50% - 16px), -90px) scale(1.7); opacity: 0; }
}

@keyframes stinkFumeRiseLayer3 {
    0%   { transform: translate(-50%, 0) scale(0.42); opacity: 0; }
    18%  { opacity: 0.68; }
    100% { transform: translate(calc(-50% + 6px), -68px) scale(1.35); opacity: 0; }
}

@keyframes stinkFumeRiseLayer4 {
    0%   { transform: translate(-50%, 0) scale(0.48); opacity: 0; }
    24%  { opacity: 0.76; }
    100% { transform: translate(calc(-50% - 10px), -82px) scale(1.55); opacity: 0; }
}

@keyframes stinkFumeRiseLayer5 {
    0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    20%  { opacity: 0.64; }
    100% { transform: translate(calc(-50% + 18px), -72px) scale(1.3); opacity: 0; }
}

.stink-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.stink-clothing-icon > img {
    position: relative;
    z-index: 2;
}

.stink-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.stink-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.stink-clothing-layer {
    overflow: visible !important;
}

.stink-clothing-fume {
    position: absolute;
    left: 50%;
    top: 5%;
    pointer-events: none;
    z-index: 5;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 200, 80, 0.75) 0%, rgba(100, 180, 60, 0.5) 42%, transparent 72%);
    filter: blur(3px);
    will-change: transform, opacity;
}

.stink-clothing-icon .stink-clothing-fume {
    width: 16px;
    height: 16px;
}

.stink-clothing-icon-lg .stink-clothing-fume {
    width: 26px;
    height: 26px;
    filter: blur(4px);
}

.stink-clothing-layer .stink-clothing-fume {
    width: 28%;
    height: 28%;
    filter: blur(5px);
}

.stink-clothing-icon .stink-clothing-fume-1 { animation: stinkFumeRiseIcon1 3s ease-in-out infinite -0.5s; }
.stink-clothing-icon .stink-clothing-fume-2 { animation: stinkFumeRiseIcon2 3.6s ease-in-out infinite -1.2s; }
.stink-clothing-icon .stink-clothing-fume-3 { animation: stinkFumeRiseIcon3 3.2s ease-in-out infinite -2s; }
.stink-clothing-icon .stink-clothing-fume-4 { animation: stinkFumeRiseIcon4 3.8s ease-in-out infinite -0.8s; }
.stink-clothing-icon .stink-clothing-fume-5 { animation: stinkFumeRiseIcon5 3.4s ease-in-out infinite -1.6s; }

.stink-clothing-icon-lg .stink-clothing-fume-1 { animation: stinkFumeRiseIconLg1 3s ease-in-out infinite -0.5s; }
.stink-clothing-icon-lg .stink-clothing-fume-2 { animation: stinkFumeRiseIconLg2 3.6s ease-in-out infinite -1.2s; }
.stink-clothing-icon-lg .stink-clothing-fume-3 { animation: stinkFumeRiseIconLg3 3.2s ease-in-out infinite -2s; }
.stink-clothing-icon-lg .stink-clothing-fume-4 { animation: stinkFumeRiseIconLg4 3.8s ease-in-out infinite -0.8s; }
.stink-clothing-icon-lg .stink-clothing-fume-5 { animation: stinkFumeRiseIconLg5 3.4s ease-in-out infinite -1.6s; }

.stink-clothing-layer .stink-clothing-fume-1 { animation: stinkFumeRiseLayer1 3s ease-in-out infinite -0.5s; }
.stink-clothing-layer .stink-clothing-fume-2 { animation: stinkFumeRiseLayer2 3.6s ease-in-out infinite -1.2s; }
.stink-clothing-layer .stink-clothing-fume-3 { animation: stinkFumeRiseLayer3 3.2s ease-in-out infinite -2s; }
.stink-clothing-layer .stink-clothing-fume-4 { animation: stinkFumeRiseLayer4 3.8s ease-in-out infinite -0.8s; }
.stink-clothing-layer .stink-clothing-fume-5 { animation: stinkFumeRiseLayer5 3.4s ease-in-out infinite -1.6s; }

/* Chip Shirt - green stink glow around entire clothing */
@keyframes stinkGlowItemPulse {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(90, 200, 60, 0.28)) drop-shadow(0 0 6px rgba(60, 160, 40, 0.18));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(115, 230, 75, 0.42)) drop-shadow(0 0 10px rgba(75, 185, 50, 0.28));
    }
}

@keyframes stinkGlowLayerPulse {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(90, 200, 60, 0.25)) drop-shadow(0 0 7px rgba(60, 160, 40, 0.16));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(115, 230, 75, 0.38)) drop-shadow(0 0 12px rgba(75, 185, 50, 0.24));
    }
}

@keyframes stinkGlowAuraPulse1 {
    0%, 100% { transform: translate(-50%, -50%) scale(0.97) rotate(0deg); opacity: 0.22; }
    50%      { transform: translate(-50%, -50%) scale(1.03) rotate(2deg); opacity: 0.38; }
}

@keyframes stinkGlowAuraPulse2 {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.16; }
    50%      { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); opacity: 0.3; }
}

@keyframes stinkGlowAuraPulse3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1.02) rotate(0deg); opacity: 0.12; }
    50%      { transform: translate(-50%, -50%) scale(1.08) rotate(3deg); opacity: 0.22; }
}

@keyframes stinkGlowAuraWobble {
    0%, 100% { border-radius: 42% 48% 44% 46%; }
    33%      { border-radius: 48% 42% 50% 44%; }
    66%      { border-radius: 44% 50% 42% 48%; }
}

.stink-glow-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.stink-glow-clothing-icon > img {
    position: relative;
    z-index: 3;
    animation: stinkGlowItemPulse 3.2s ease-in-out infinite;
}

.stink-glow-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.stink-glow-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.stink-glow-clothing-layer {
    overflow: visible !important;
    animation: stinkGlowLayerPulse 3.2s ease-in-out infinite;
}

.stink-glow-clothing-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 1;
    border-radius: 42% 48% 44% 46%;
    background: radial-gradient(
        ellipse at center,
        rgba(120, 220, 80, 0.34) 0%,
        rgba(85, 185, 55, 0.22) 32%,
        rgba(60, 150, 40, 0.12) 52%,
        transparent 72%
    );
    filter: blur(4px);
    animation: stinkGlowAuraWobble 5s ease-in-out infinite;
    will-change: transform, opacity;
}

.stink-glow-clothing-icon .stink-glow-clothing-aura-1,
.stink-glow-clothing-layer .stink-glow-clothing-aura-1 {
    width: 104%;
    height: 104%;
    animation: stinkGlowAuraPulse1 3.2s ease-in-out infinite, stinkGlowAuraWobble 5s ease-in-out infinite;
}

.stink-glow-clothing-icon .stink-glow-clothing-aura-2,
.stink-glow-clothing-layer .stink-glow-clothing-aura-2 {
    width: 112%;
    height: 112%;
    filter: blur(5px);
    animation: stinkGlowAuraPulse2 3.8s ease-in-out infinite -0.8s, stinkGlowAuraWobble 6s ease-in-out infinite -1.2s;
}

.stink-glow-clothing-icon .stink-glow-clothing-aura-3,
.stink-glow-clothing-layer .stink-glow-clothing-aura-3 {
    width: 120%;
    height: 120%;
    filter: blur(6px);
    animation: stinkGlowAuraPulse3 4.4s ease-in-out infinite -1.6s, stinkGlowAuraWobble 7s ease-in-out infinite -2.4s;
}

.stink-glow-clothing-layer .stink-glow-clothing-aura-1 {
    width: 96%;
    height: 96%;
}

.stink-glow-clothing-layer .stink-glow-clothing-aura-2 {
    width: 106%;
    height: 106%;
}

.stink-glow-clothing-layer .stink-glow-clothing-aura-3 {
    width: 116%;
    height: 116%;
}

.trash-rewards-content .trash-rewards-item-label .stink-glow-clothing-icon img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* GOOBDEV shirt - red pulsing glow around entire clothing */
@keyframes goobdevGlowItemPulse {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 70, 70, 0.34)) drop-shadow(0 0 7px rgba(210, 35, 35, 0.22));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(255, 95, 95, 0.52)) drop-shadow(0 0 12px rgba(230, 45, 45, 0.34));
    }
}

@keyframes goobdevGlowLayerPulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(255, 70, 70, 0.3)) drop-shadow(0 0 8px rgba(210, 35, 35, 0.18));
    }
    50% {
        filter: drop-shadow(0 0 7px rgba(255, 95, 95, 0.46)) drop-shadow(0 0 14px rgba(230, 45, 45, 0.3));
    }
}

@keyframes goobdevGlowAuraPulse1 {
    0%, 100% { transform: translate(-50%, -50%) scale(0.97) rotate(0deg); opacity: 0.24; }
    50%      { transform: translate(-50%, -50%) scale(1.03) rotate(2deg); opacity: 0.42; }
}

@keyframes goobdevGlowAuraPulse2 {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.18; }
    50%      { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); opacity: 0.34; }
}

@keyframes goobdevGlowAuraPulse3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1.02) rotate(0deg); opacity: 0.14; }
    50%      { transform: translate(-50%, -50%) scale(1.08) rotate(3deg); opacity: 0.26; }
}

.goobdev-glow-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.goobdev-glow-clothing-icon > img {
    position: relative;
    z-index: 3;
    animation: goobdevGlowItemPulse 3s ease-in-out infinite;
}

.goobdev-glow-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.goobdev-glow-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.goobdev-glow-clothing-layer {
    overflow: visible !important;
    animation: goobdevGlowLayerPulse 3s ease-in-out infinite;
}

.goobdev-glow-clothing-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 1;
    border-radius: 42% 48% 44% 46%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 90, 90, 0.38) 0%,
        rgba(220, 45, 45, 0.24) 32%,
        rgba(170, 30, 30, 0.14) 52%,
        transparent 72%
    );
    filter: blur(4px);
    animation: stinkGlowAuraWobble 5s ease-in-out infinite;
    will-change: transform, opacity;
}

.goobdev-glow-clothing-icon .goobdev-glow-clothing-aura-1,
.goobdev-glow-clothing-layer .goobdev-glow-clothing-aura-1 {
    width: 104%;
    height: 104%;
    animation: goobdevGlowAuraPulse1 3s ease-in-out infinite, stinkGlowAuraWobble 5s ease-in-out infinite;
}

.goobdev-glow-clothing-icon .goobdev-glow-clothing-aura-2,
.goobdev-glow-clothing-layer .goobdev-glow-clothing-aura-2 {
    width: 112%;
    height: 112%;
    filter: blur(5px);
    animation: goobdevGlowAuraPulse2 3.6s ease-in-out infinite -0.7s, stinkGlowAuraWobble 6s ease-in-out infinite -1.1s;
}

.goobdev-glow-clothing-icon .goobdev-glow-clothing-aura-3,
.goobdev-glow-clothing-layer .goobdev-glow-clothing-aura-3 {
    width: 120%;
    height: 120%;
    filter: blur(6px);
    animation: goobdevGlowAuraPulse3 4.2s ease-in-out infinite -1.4s, stinkGlowAuraWobble 7s ease-in-out infinite -2.2s;
}

.goobdev-glow-clothing-layer .goobdev-glow-clothing-aura-1 {
    width: 96%;
    height: 96%;
}

.goobdev-glow-clothing-layer .goobdev-glow-clothing-aura-2 {
    width: 106%;
    height: 106%;
}

.goobdev-glow-clothing-layer .goobdev-glow-clothing-aura-3 {
    width: 116%;
    height: 116%;
}

.trash-rewards-content .trash-rewards-item-label .goobdev-glow-clothing-icon img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Manor / luxury clothing - celebrity glitter sparkles */
@keyframes glitterItemShimmer {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.55)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(255, 240, 200, 0.95)) brightness(1.1);
    }
}

@keyframes glitterSparkleIcon1 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.4) rotate(20deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 16px), calc(-50% - 38px)) scale(0.2) rotate(80deg); opacity: 0; }
}

@keyframes glitterSparkleIcon2 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.3) rotate(-15deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 14px), calc(-50% - 40px)) scale(0.2) rotate(-70deg); opacity: 0; }
}

@keyframes glitterSparkleIcon3 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.5) rotate(35deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 6px), calc(-50% - 46px)) scale(0.15) rotate(120deg); opacity: 0; }
}

@keyframes glitterSparkleIcon4 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.2) rotate(-25deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 20px), calc(-50% - 28px)) scale(0.25) rotate(-95deg); opacity: 0; }
}

@keyframes glitterSparkleIcon5 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.35) rotate(10deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 22px), calc(-50% - 30px)) scale(0.2) rotate(60deg); opacity: 0; }
}

@keyframes glitterSparkleIcon6 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.45) rotate(-40deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 8px), calc(-50% - 44px)) scale(0.18) rotate(-110deg); opacity: 0; }
}

@keyframes glitterSparkleIcon7 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.25) rotate(50deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 10px), calc(-50% - 22px)) scale(0.3) rotate(140deg); opacity: 0; }
}

@keyframes glitterSparkleIcon8 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.5) rotate(-55deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 12px), calc(-50% - 36px)) scale(0.15) rotate(-130deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg1 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.4) rotate(20deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 28px), calc(-50% - 68px)) scale(0.2) rotate(80deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg2 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.3) rotate(-15deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 24px), calc(-50% - 72px)) scale(0.2) rotate(-70deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg3 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.5) rotate(35deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 10px), calc(-50% - 82px)) scale(0.15) rotate(120deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg4 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.2) rotate(-25deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 34px), calc(-50% - 50px)) scale(0.25) rotate(-95deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg5 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.35) rotate(10deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 38px), calc(-50% - 54px)) scale(0.2) rotate(60deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg6 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.45) rotate(-40deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 14px), calc(-50% - 78px)) scale(0.18) rotate(-110deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg7 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.25) rotate(50deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 18px), calc(-50% - 40px)) scale(0.3) rotate(140deg); opacity: 0; }
}

@keyframes glitterSparkleIconLg8 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.5) rotate(-55deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 20px), calc(-50% - 64px)) scale(0.15) rotate(-130deg); opacity: 0; }
}

@keyframes glitterSparkleLayer1 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.4) rotate(20deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 42px), calc(-50% - 88px)) scale(0.2) rotate(80deg); opacity: 0; }
}

@keyframes glitterSparkleLayer2 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.3) rotate(-15deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 36px), calc(-50% - 92px)) scale(0.2) rotate(-70deg); opacity: 0; }
}

@keyframes glitterSparkleLayer3 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.5) rotate(35deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 16px), calc(-50% - 102px)) scale(0.15) rotate(120deg); opacity: 0; }
}

@keyframes glitterSparkleLayer4 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.2) rotate(-25deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 52px), calc(-50% - 64px)) scale(0.25) rotate(-95deg); opacity: 0; }
}

@keyframes glitterSparkleLayer5 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.35) rotate(10deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 58px), calc(-50% - 70px)) scale(0.2) rotate(60deg); opacity: 0; }
}

@keyframes glitterSparkleLayer6 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.45) rotate(-40deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 20px), calc(-50% - 98px)) scale(0.18) rotate(-110deg); opacity: 0; }
}

@keyframes glitterSparkleLayer7 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.25) rotate(50deg); opacity: 1; }
    100% { transform: translate(calc(-50% + 28px), calc(-50% - 52px)) scale(0.3) rotate(140deg); opacity: 0; }
}

@keyframes glitterSparkleLayer8 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(1.5) rotate(-55deg); opacity: 1; }
    100% { transform: translate(calc(-50% - 30px), calc(-50% - 84px)) scale(0.15) rotate(-130deg); opacity: 0; }
}

.glitter-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.glitter-clothing-icon > img {
    position: relative;
    z-index: 2;
    animation: glitterItemShimmer 2.5s ease-in-out infinite;
}

.glitter-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.glitter-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.glitter-clothing-icon-manor {
    width: 58px;
    height: 58px;
    margin-bottom: 8px;
}

.glitter-clothing-icon-manor > img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.glitter-clothing-layer {
    overflow: visible !important;
}

.glitter-clothing-layer > img,
.glitter-clothing-layer {
    animation: glitterItemShimmer 2.5s ease-in-out infinite;
}

.glitter-clothing-sparkle {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 5;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #fff4d6 30%, #ffd700 55%, transparent 100%);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 215, 0, 0.85);
    will-change: transform, opacity;
}

.glitter-clothing-sparkle-2,
.glitter-clothing-sparkle-4,
.glitter-clothing-sparkle-6,
.glitter-clothing-sparkle-8 {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: linear-gradient(135deg, #ffffff 0%, #ffe9a8 45%, #d4af37 100%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 12px rgba(255, 215, 0, 0.9);
}

.glitter-clothing-icon .glitter-clothing-sparkle-1 { animation: glitterSparkleIcon1 2.2s ease-out infinite -0.1s; }
.glitter-clothing-icon .glitter-clothing-sparkle-2 { animation: glitterSparkleIcon2 2.5s ease-out infinite -0.6s; }
.glitter-clothing-icon .glitter-clothing-sparkle-3 { animation: glitterSparkleIcon3 2.1s ease-out infinite -1.1s; }
.glitter-clothing-icon .glitter-clothing-sparkle-4 { animation: glitterSparkleIcon4 2.7s ease-out infinite -0.3s; }
.glitter-clothing-icon .glitter-clothing-sparkle-5 { animation: glitterSparkleIcon5 2.4s ease-out infinite -1.4s; }
.glitter-clothing-icon .glitter-clothing-sparkle-6 { animation: glitterSparkleIcon6 2.3s ease-out infinite -0.8s; }
.glitter-clothing-icon .glitter-clothing-sparkle-7 { animation: glitterSparkleIcon7 2.6s ease-out infinite -1.7s; }
.glitter-clothing-icon .glitter-clothing-sparkle-8 { animation: glitterSparkleIcon8 2.0s ease-out infinite -0.5s; }

.glitter-clothing-icon-lg .glitter-clothing-sparkle-1,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-1 { animation: glitterSparkleIconLg1 2.2s ease-out infinite -0.1s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-2,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-2 { animation: glitterSparkleIconLg2 2.5s ease-out infinite -0.6s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-3,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-3 { animation: glitterSparkleIconLg3 2.1s ease-out infinite -1.1s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-4,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-4 { animation: glitterSparkleIconLg4 2.7s ease-out infinite -0.3s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-5,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-5 { animation: glitterSparkleIconLg5 2.4s ease-out infinite -1.4s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-6,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-6 { animation: glitterSparkleIconLg6 2.3s ease-out infinite -0.8s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-7,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-7 { animation: glitterSparkleIconLg7 2.6s ease-out infinite -1.7s; }
.glitter-clothing-icon-lg .glitter-clothing-sparkle-8,
.glitter-clothing-icon-manor .glitter-clothing-sparkle-8 { animation: glitterSparkleIconLg8 2.0s ease-out infinite -0.5s; }

.glitter-clothing-layer .glitter-clothing-sparkle-1 { animation: glitterSparkleLayer1 2.2s ease-out infinite -0.1s; }
.glitter-clothing-layer .glitter-clothing-sparkle-2 { animation: glitterSparkleLayer2 2.5s ease-out infinite -0.6s; }
.glitter-clothing-layer .glitter-clothing-sparkle-3 { animation: glitterSparkleLayer3 2.1s ease-out infinite -1.1s; }
.glitter-clothing-layer .glitter-clothing-sparkle-4 { animation: glitterSparkleLayer4 2.7s ease-out infinite -0.3s; }
.glitter-clothing-layer .glitter-clothing-sparkle-5 { animation: glitterSparkleLayer5 2.4s ease-out infinite -1.4s; }
.glitter-clothing-layer .glitter-clothing-sparkle-6 { animation: glitterSparkleLayer6 2.3s ease-out infinite -0.8s; }
.glitter-clothing-layer .glitter-clothing-sparkle-7 { animation: glitterSparkleLayer7 2.6s ease-out infinite -1.7s; }
.glitter-clothing-layer .glitter-clothing-sparkle-8 { animation: glitterSparkleLayer8 2.0s ease-out infinite -0.5s; }

/* Donator clothing - red & green dripping particles */
@keyframes dripParticleIcon1 {
    0%   { transform: translate(calc(-50% - 10px), 0) scale(0.8); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% - 8px), 38px) scale(0.5); opacity: 0; }
}

@keyframes dripParticleIcon2 {
    0%   { transform: translate(calc(-50% + 6px), 0) scale(0.75); opacity: 0; }
    15%  { opacity: 0.88; }
    100% { transform: translate(calc(-50% + 10px), 44px) scale(0.45); opacity: 0; }
}

@keyframes dripParticleIcon3 {
    0%   { transform: translate(calc(-50% - 2px), 0) scale(0.85); opacity: 0; }
    15%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 2px), 40px) scale(0.55); opacity: 0; }
}

@keyframes dripParticleIcon4 {
    0%   { transform: translate(calc(-50% + 12px), 0) scale(0.7); opacity: 0; }
    15%  { opacity: 0.85; }
    100% { transform: translate(calc(-50% + 14px), 36px) scale(0.4); opacity: 0; }
}

@keyframes dripParticleIcon5 {
    0%   { transform: translate(calc(-50% - 14px), 0) scale(0.8); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% - 16px), 42px) scale(0.5); opacity: 0; }
}

@keyframes dripParticleIcon6 {
    0%   { transform: translate(calc(-50% + 2px), 0) scale(0.72); opacity: 0; }
    15%  { opacity: 0.87; }
    100% { transform: translate(calc(-50% - 4px), 46px) scale(0.42); opacity: 0; }
}

@keyframes dripParticleIcon7 {
    0%   { transform: translate(calc(-50% + 8px), 0) scale(0.78); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% + 6px), 34px) scale(0.48); opacity: 0; }
}

@keyframes dripParticleIcon8 {
    0%   { transform: translate(calc(-50% - 6px), 0) scale(0.74); opacity: 0; }
    15%  { opacity: 0.86; }
    100% { transform: translate(calc(-50% - 10px), 48px) scale(0.4); opacity: 0; }
}

@keyframes dripParticleIconLg1 {
    0%   { transform: translate(calc(-50% - 14px), 0) scale(0.8); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% - 10px), 72px) scale(0.5); opacity: 0; }
}

@keyframes dripParticleIconLg2 {
    0%   { transform: translate(calc(-50% + 10px), 0) scale(0.75); opacity: 0; }
    15%  { opacity: 0.88; }
    100% { transform: translate(calc(-50% + 16px), 78px) scale(0.45); opacity: 0; }
}

@keyframes dripParticleIconLg3 {
    0%   { transform: translate(calc(-50% - 4px), 0) scale(0.85); opacity: 0; }
    15%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 4px), 70px) scale(0.55); opacity: 0; }
}

@keyframes dripParticleIconLg4 {
    0%   { transform: translate(calc(-50% + 18px), 0) scale(0.7); opacity: 0; }
    15%  { opacity: 0.85; }
    100% { transform: translate(calc(-50% + 20px), 66px) scale(0.4); opacity: 0; }
}

@keyframes dripParticleIconLg5 {
    0%   { transform: translate(calc(-50% - 20px), 0) scale(0.8); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% - 22px), 74px) scale(0.5); opacity: 0; }
}

@keyframes dripParticleIconLg6 {
    0%   { transform: translate(calc(-50% + 4px), 0) scale(0.72); opacity: 0; }
    15%  { opacity: 0.87; }
    100% { transform: translate(calc(-50% - 6px), 80px) scale(0.42); opacity: 0; }
}

@keyframes dripParticleIconLg7 {
    0%   { transform: translate(calc(-50% + 12px), 0) scale(0.78); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% + 8px), 64px) scale(0.48); opacity: 0; }
}

@keyframes dripParticleIconLg8 {
    0%   { transform: translate(calc(-50% - 8px), 0) scale(0.74); opacity: 0; }
    15%  { opacity: 0.86; }
    100% { transform: translate(calc(-50% - 14px), 82px) scale(0.4); opacity: 0; }
}

@keyframes dripParticleLayer1 {
    0%   { transform: translate(calc(-50% - 16px), 0) scale(0.8); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% - 12px), 95px) scale(0.5); opacity: 0; }
}

@keyframes dripParticleLayer2 {
    0%   { transform: translate(calc(-50% + 12px), 0) scale(0.75); opacity: 0; }
    15%  { opacity: 0.88; }
    100% { transform: translate(calc(-50% + 18px), 102px) scale(0.45); opacity: 0; }
}

@keyframes dripParticleLayer3 {
    0%   { transform: translate(calc(-50% - 4px), 0) scale(0.85); opacity: 0; }
    15%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 6px), 88px) scale(0.55); opacity: 0; }
}

@keyframes dripParticleLayer4 {
    0%   { transform: translate(calc(-50% + 20px), 0) scale(0.7); opacity: 0; }
    15%  { opacity: 0.85; }
    100% { transform: translate(calc(-50% + 24px), 84px) scale(0.4); opacity: 0; }
}

@keyframes dripParticleLayer5 {
    0%   { transform: translate(calc(-50% - 22px), 0) scale(0.8); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% - 26px), 98px) scale(0.5); opacity: 0; }
}

@keyframes dripParticleLayer6 {
    0%   { transform: translate(calc(-50% + 6px), 0) scale(0.72); opacity: 0; }
    15%  { opacity: 0.87; }
    100% { transform: translate(calc(-50% - 8px), 106px) scale(0.42); opacity: 0; }
}

@keyframes dripParticleLayer7 {
    0%   { transform: translate(calc(-50% + 14px), 0) scale(0.78); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(calc(-50% + 10px), 82px) scale(0.48); opacity: 0; }
}

@keyframes dripParticleLayer8 {
    0%   { transform: translate(calc(-50% - 10px), 0) scale(0.74); opacity: 0; }
    15%  { opacity: 0.86; }
    100% { transform: translate(calc(-50% - 16px), 104px) scale(0.4); opacity: 0; }
}

.drip-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.drip-clothing-icon > img {
    position: relative;
    z-index: 2;
}

.drip-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.drip-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.drip-clothing-icon-donator {
    width: 60px;
    height: 60px;
}

.drip-clothing-icon-donator > img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
}

.drip-clothing-layer {
    overflow: visible !important;
}

.drip-clothing-particle {
    position: absolute;
    top: 62%;
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}

.drip-clothing-particle-red {
    background: radial-gradient(circle, rgba(255, 90, 90, 0.95) 0%, rgba(210, 45, 45, 0.65) 55%, transparent 100%);
    box-shadow: 0 0 5px rgba(255, 70, 70, 0.75);
}

.drip-clothing-particle-green {
    background: radial-gradient(circle, rgba(90, 230, 90, 0.95) 0%, rgba(45, 190, 45, 0.65) 55%, transparent 100%);
    box-shadow: 0 0 5px rgba(70, 210, 70, 0.75);
}

.drip-clothing-icon .drip-clothing-particle-1 { animation: dripParticleIcon1 2.1s ease-in infinite -0.2s; }
.drip-clothing-icon .drip-clothing-particle-2 { animation: dripParticleIcon2 2.4s ease-in infinite -0.9s; }
.drip-clothing-icon .drip-clothing-particle-3 { animation: dripParticleIcon3 2.0s ease-in infinite -1.5s; }
.drip-clothing-icon .drip-clothing-particle-4 { animation: dripParticleIcon4 2.3s ease-in infinite -0.5s; }
.drip-clothing-icon .drip-clothing-particle-5 { animation: dripParticleIcon5 2.2s ease-in infinite -1.1s; }
.drip-clothing-icon .drip-clothing-particle-6 { animation: dripParticleIcon6 2.5s ease-in infinite -0.7s; }
.drip-clothing-icon .drip-clothing-particle-7 { animation: dripParticleIcon7 2.1s ease-in infinite -1.8s; }
.drip-clothing-icon .drip-clothing-particle-8 { animation: dripParticleIcon8 2.4s ease-in infinite -0.3s; }

.drip-clothing-icon-lg .drip-clothing-particle-1,
.drip-clothing-icon-donator .drip-clothing-particle-1 { animation: dripParticleIconLg1 2.1s ease-in infinite -0.2s; }
.drip-clothing-icon-lg .drip-clothing-particle-2,
.drip-clothing-icon-donator .drip-clothing-particle-2 { animation: dripParticleIconLg2 2.4s ease-in infinite -0.9s; }
.drip-clothing-icon-lg .drip-clothing-particle-3,
.drip-clothing-icon-donator .drip-clothing-particle-3 { animation: dripParticleIconLg3 2.0s ease-in infinite -1.5s; }
.drip-clothing-icon-lg .drip-clothing-particle-4,
.drip-clothing-icon-donator .drip-clothing-particle-4 { animation: dripParticleIconLg4 2.3s ease-in infinite -0.5s; }
.drip-clothing-icon-lg .drip-clothing-particle-5,
.drip-clothing-icon-donator .drip-clothing-particle-5 { animation: dripParticleIconLg5 2.2s ease-in infinite -1.1s; }
.drip-clothing-icon-lg .drip-clothing-particle-6,
.drip-clothing-icon-donator .drip-clothing-particle-6 { animation: dripParticleIconLg6 2.5s ease-in infinite -0.7s; }
.drip-clothing-icon-lg .drip-clothing-particle-7,
.drip-clothing-icon-donator .drip-clothing-particle-7 { animation: dripParticleIconLg7 2.1s ease-in infinite -1.8s; }
.drip-clothing-icon-lg .drip-clothing-particle-8,
.drip-clothing-icon-donator .drip-clothing-particle-8 { animation: dripParticleIconLg8 2.4s ease-in infinite -0.3s; }

.drip-clothing-layer .drip-clothing-particle-1 { animation: dripParticleLayer1 2.1s ease-in infinite -0.2s; }
.drip-clothing-layer .drip-clothing-particle-2 { animation: dripParticleLayer2 2.4s ease-in infinite -0.9s; }
.drip-clothing-layer .drip-clothing-particle-3 { animation: dripParticleLayer3 2.0s ease-in infinite -1.5s; }
.drip-clothing-layer .drip-clothing-particle-4 { animation: dripParticleLayer4 2.3s ease-in infinite -0.5s; }
.drip-clothing-layer .drip-clothing-particle-5 { animation: dripParticleLayer5 2.2s ease-in infinite -1.1s; }
.drip-clothing-layer .drip-clothing-particle-6 { animation: dripParticleLayer6 2.5s ease-in infinite -0.7s; }
.drip-clothing-layer .drip-clothing-particle-7 { animation: dripParticleLayer7 2.1s ease-in infinite -1.8s; }
.drip-clothing-layer .drip-clothing-particle-8 { animation: dripParticleLayer8 2.4s ease-in infinite -0.3s; }

/* Rainbow clothing - glowing rainbow aura */
@keyframes rainbowClothingItemGlow {
    0% {
        filter: drop-shadow(0 0 4px rgba(255, 60, 120, 0.5)) drop-shadow(0 0 8px rgba(0, 180, 255, 0.35)) hue-rotate(0deg);
    }
    33% {
        filter: drop-shadow(0 0 5px rgba(80, 255, 120, 0.55)) drop-shadow(0 0 9px rgba(255, 210, 0, 0.4)) hue-rotate(120deg);
    }
    66% {
        filter: drop-shadow(0 0 5px rgba(140, 90, 255, 0.55)) drop-shadow(0 0 9px rgba(255, 80, 180, 0.4)) hue-rotate(240deg);
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(255, 60, 120, 0.5)) drop-shadow(0 0 8px rgba(0, 180, 255, 0.35)) hue-rotate(360deg);
    }
}

@keyframes rainbowClothingLayerGlow {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 80, 140, 0.3)) drop-shadow(0 0 6px rgba(80, 180, 255, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(120, 255, 160, 0.35)) drop-shadow(0 0 7px rgba(255, 200, 80, 0.22));
    }
}

@keyframes rainbowAuraPulse1 {
    0%   { transform: translate(-50%, -50%) scale(0.75); opacity: 0.45; }
    100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

@keyframes rainbowAuraPulse2 {
    0%   { transform: translate(-50%, -50%) scale(0.7) rotate(0deg); opacity: 0.38; }
    100% { transform: translate(-50%, -50%) scale(1.7) rotate(120deg); opacity: 0; }
}

@keyframes rainbowAuraPulse3 {
    0%   { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0.32; }
    100% { transform: translate(-50%, -50%) scale(1.45) rotate(-140deg); opacity: 0; }
}

@keyframes rainbowAuraPulseLayer1 {
    0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.28; }
    100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

@keyframes rainbowAuraPulseLayer2 {
    0%   { transform: translate(-50%, -50%) scale(0.75) rotate(0deg); opacity: 0.24; }
    100% { transform: translate(-50%, -50%) scale(1.55) rotate(120deg); opacity: 0; }
}

@keyframes rainbowAuraPulseLayer3 {
    0%   { transform: translate(-50%, -50%) scale(0.85) rotate(0deg); opacity: 0.2; }
    100% { transform: translate(-50%, -50%) scale(1.4) rotate(-140deg); opacity: 0; }
}

@keyframes rainbowAuraSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.rainbow-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.rainbow-clothing-icon > img {
    position: relative;
    z-index: 3;
    animation: rainbowClothingItemGlow 3s linear infinite;
}

.rainbow-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.rainbow-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.rainbow-clothing-icon-donator {
    width: 60px;
    height: 60px;
}

.rainbow-clothing-icon-donator > img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
}

.rainbow-clothing-layer {
    overflow: visible !important;
    animation: rainbowClothingLayerGlow 3s ease-in-out infinite;
}

.rainbow-clothing-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ff3366,
        #ff9933,
        #ffee33,
        #33ff99,
        #33ccff,
        #9966ff,
        #ff66cc,
        #ff3366
    );
    filter: blur(5px);
    -webkit-mask: radial-gradient(circle, transparent 50%, black 65%);
    mask: radial-gradient(circle, transparent 50%, black 65%);
}

.rainbow-clothing-layer .rainbow-clothing-aura {
    filter: blur(4px);
    -webkit-mask: radial-gradient(circle, transparent 58%, black 72%);
    mask: radial-gradient(circle, transparent 58%, black 72%);
}

.rainbow-clothing-icon .rainbow-clothing-aura-1,
.rainbow-clothing-layer .rainbow-clothing-aura-1 {
    width: 72%;
    height: 72%;
    animation: rainbowAuraPulse1 2.2s ease-out infinite;
}

.rainbow-clothing-icon .rainbow-clothing-aura-2,
.rainbow-clothing-layer .rainbow-clothing-aura-2 {
    width: 88%;
    height: 88%;
    animation: rainbowAuraPulse2 2.8s ease-out infinite -0.8s;
}

.rainbow-clothing-icon .rainbow-clothing-aura-3,
.rainbow-clothing-layer .rainbow-clothing-aura-3 {
    width: 100%;
    height: 100%;
    animation: rainbowAuraPulse3 3.4s ease-out infinite -1.6s;
}

.rainbow-clothing-layer .rainbow-clothing-aura-1 {
    animation: rainbowAuraPulseLayer1 2.2s ease-out infinite;
}

.rainbow-clothing-layer .rainbow-clothing-aura-2 {
    animation: rainbowAuraPulseLayer2 2.8s ease-out infinite -0.8s;
}

.rainbow-clothing-layer .rainbow-clothing-aura-3 {
    animation: rainbowAuraPulseLayer3 3.4s ease-out infinite -1.6s;
}

.rainbow-clothing-icon::before,
.rainbow-clothing-layer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 51, 102, 0.28),
        rgba(255, 153, 51, 0.28),
        rgba(255, 238, 51, 0.28),
        rgba(51, 255, 153, 0.28),
        rgba(51, 204, 255, 0.28),
        rgba(153, 102, 255, 0.28),
        rgba(255, 102, 204, 0.28),
        rgba(255, 51, 102, 0.28)
    );
    filter: blur(10px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
    animation: rainbowAuraSpin 4s linear infinite;
}

.rainbow-clothing-layer::before {
    width: 95%;
    height: 95%;
    filter: blur(8px);
    opacity: 0.22;
    -webkit-mask: radial-gradient(circle, transparent 52%, black 68%);
    mask: radial-gradient(circle, transparent 52%, black 68%);
}

/* Thank You! clothing - periodic confetti bursts */
@keyframes confettiBurstIcon1 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 28px), calc(-50% - 38px)) rotate(220deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 34px), calc(-50% - 52px)) rotate(300deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon2 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 30px), calc(-50% - 36px)) rotate(-200deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 36px), calc(-50% - 50px)) rotate(-280deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon3 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 42px), calc(-50% - 4px)) rotate(160deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 52px), calc(-50% - 8px)) rotate(250deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon4 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 40px), calc(-50% + 6px)) rotate(-170deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 48px), calc(-50% + 10px)) rotate(-260deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon5 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 2px), calc(-50% - 48px)) rotate(140deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 2px), calc(-50% - 62px)) rotate(230deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon6 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 34px), calc(-50% + 28px)) rotate(190deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 42px), calc(-50% + 40px)) rotate(280deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon7 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 36px), calc(-50% + 30px)) rotate(-150deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 44px), calc(-50% + 42px)) rotate(-240deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon8 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 0px), calc(-50% + 42px)) rotate(120deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 0px), calc(-50% + 56px)) rotate(210deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon9 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 18px), calc(-50% - 52px)) rotate(240deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 22px), calc(-50% - 66px)) rotate(330deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstIcon10 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 22px), calc(-50% - 50px)) rotate(-220deg) scale(0.85); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 26px), calc(-50% - 64px)) rotate(-310deg) scale(0.55); opacity: 0; }
}

@keyframes confettiBurstLayer1 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 62px), calc(-50% - 84px)) rotate(220deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 76px), calc(-50% - 112px)) rotate(300deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer2 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 66px), calc(-50% - 80px)) rotate(-200deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 80px), calc(-50% - 108px)) rotate(-280deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer3 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 92px), calc(-50% - 10px)) rotate(160deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 112px), calc(-50% - 18px)) rotate(250deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer4 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 88px), calc(-50% + 14px)) rotate(-170deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 106px), calc(-50% + 22px)) rotate(-260deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer5 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 4px), calc(-50% - 106px)) rotate(140deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 4px), calc(-50% - 136px)) rotate(230deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer6 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 74px), calc(-50% + 62px)) rotate(190deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 90px), calc(-50% + 88px)) rotate(280deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer7 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 78px), calc(-50% + 66px)) rotate(-150deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 94px), calc(-50% + 92px)) rotate(-240deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer8 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 0px), calc(-50% + 92px)) rotate(120deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 0px), calc(-50% + 122px)) rotate(210deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer9 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% - 40px), calc(-50% - 114px)) rotate(240deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% - 48px), calc(-50% - 144px)) rotate(330deg) scale(0.6); opacity: 0; }
}

@keyframes confettiBurstLayer10 {
    0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0); opacity: 0; }
    4%  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    38% { transform: translate(calc(-50% + 48px), calc(-50% - 110px)) rotate(-220deg) scale(0.9); opacity: 0.95; }
    55% { transform: translate(calc(-50% + 56px), calc(-50% - 140px)) rotate(-310deg) scale(0.6); opacity: 0; }
}

.confetti-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.confetti-clothing-icon > img {
    position: relative;
    z-index: 3;
}

.confetti-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.confetti-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.confetti-clothing-icon-referral {
    width: 60px;
    height: 60px;
}

.confetti-clothing-icon-referral > img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 4px;
}

.confetti-clothing-layer {
    overflow: visible !important;
}

.confetti-clothing-piece {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    pointer-events: none;
    z-index: 5;
    border-radius: 1px;
    opacity: 0;
    will-change: transform, opacity;
    animation-duration: 2.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.confetti-clothing-layer .confetti-clothing-piece {
    width: 5px;
    height: 10px;
}

.confetti-clothing-piece-red { background: #ff4757; box-shadow: 0 0 3px rgba(255, 71, 87, 0.7); }
.confetti-clothing-piece-blue { background: #3742fa; box-shadow: 0 0 3px rgba(55, 66, 250, 0.7); }
.confetti-clothing-piece-yellow { background: #ffd32a; box-shadow: 0 0 3px rgba(255, 211, 42, 0.7); }
.confetti-clothing-piece-green { background: #2ed573; box-shadow: 0 0 3px rgba(46, 213, 115, 0.7); }
.confetti-clothing-piece-pink { background: #ff6b81; box-shadow: 0 0 3px rgba(255, 107, 129, 0.7); }
.confetti-clothing-piece-orange { background: #ff7f50; box-shadow: 0 0 3px rgba(255, 127, 80, 0.7); }
.confetti-clothing-piece-purple { background: #a55eea; box-shadow: 0 0 3px rgba(165, 94, 234, 0.7); }
.confetti-clothing-piece-cyan { background: #18dcff; box-shadow: 0 0 3px rgba(24, 220, 255, 0.7); }
.confetti-clothing-piece-gold { background: #f9ca24; box-shadow: 0 0 3px rgba(249, 202, 36, 0.7); }
.confetti-clothing-piece-magenta { background: #ff9ff3; box-shadow: 0 0 3px rgba(255, 159, 243, 0.7); }

.confetti-clothing-piece-2,
.confetti-clothing-piece-4,
.confetti-clothing-piece-7,
.confetti-clothing-piece-9 {
    width: 3px;
    height: 7px;
}

.confetti-clothing-layer .confetti-clothing-piece-2,
.confetti-clothing-layer .confetti-clothing-piece-4,
.confetti-clothing-layer .confetti-clothing-piece-7,
.confetti-clothing-layer .confetti-clothing-piece-9 {
    width: 4px;
    height: 9px;
}

.confetti-clothing-icon .confetti-clothing-piece-1 { animation-name: confettiBurstIcon1; }
.confetti-clothing-icon .confetti-clothing-piece-2 { animation-name: confettiBurstIcon2; }
.confetti-clothing-icon .confetti-clothing-piece-3 { animation-name: confettiBurstIcon3; }
.confetti-clothing-icon .confetti-clothing-piece-4 { animation-name: confettiBurstIcon4; }
.confetti-clothing-icon .confetti-clothing-piece-5 { animation-name: confettiBurstIcon5; }
.confetti-clothing-icon .confetti-clothing-piece-6 { animation-name: confettiBurstIcon6; }
.confetti-clothing-icon .confetti-clothing-piece-7 { animation-name: confettiBurstIcon7; }
.confetti-clothing-icon .confetti-clothing-piece-8 { animation-name: confettiBurstIcon8; }
.confetti-clothing-icon .confetti-clothing-piece-9 { animation-name: confettiBurstIcon9; }
.confetti-clothing-icon .confetti-clothing-piece-10 { animation-name: confettiBurstIcon10; }

.confetti-clothing-layer .confetti-clothing-piece-1 { animation-name: confettiBurstLayer1; }
.confetti-clothing-layer .confetti-clothing-piece-2 { animation-name: confettiBurstLayer2; }
.confetti-clothing-layer .confetti-clothing-piece-3 { animation-name: confettiBurstLayer3; }
.confetti-clothing-layer .confetti-clothing-piece-4 { animation-name: confettiBurstLayer4; }
.confetti-clothing-layer .confetti-clothing-piece-5 { animation-name: confettiBurstLayer5; }
.confetti-clothing-layer .confetti-clothing-piece-6 { animation-name: confettiBurstLayer6; }
.confetti-clothing-layer .confetti-clothing-piece-7 { animation-name: confettiBurstLayer7; }
.confetti-clothing-layer .confetti-clothing-piece-8 { animation-name: confettiBurstLayer8; }
.confetti-clothing-layer .confetti-clothing-piece-9 { animation-name: confettiBurstLayer9; }
.confetti-clothing-layer .confetti-clothing-piece-10 { animation-name: confettiBurstLayer10; }

/* Searching-T / Search Hat - continuous question marks from all sides */
@keyframes searchQuestionIconUp {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(-10deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(-50%, calc(-50% - 32px)) scale(1.05) rotate(14deg); opacity: 0; }
}

@keyframes searchQuestionIconDown {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(8deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(-50%, calc(-50% + 32px)) scale(1.05) rotate(-12deg); opacity: 0; }
}

@keyframes searchQuestionIconLeft {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(6deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(calc(-50% - 32px), -50%) scale(1.05) rotate(-16deg); opacity: 0; }
}

@keyframes searchQuestionIconRight {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(-6deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(calc(-50% + 32px), -50%) scale(1.05) rotate(16deg); opacity: 0; }
}

@keyframes searchQuestionIconUpLeft {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(-14deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% - 24px), calc(-50% - 26px)) scale(1) rotate(18deg); opacity: 0; }
}

@keyframes searchQuestionIconUpRight {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(14deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 24px), calc(-50% - 26px)) scale(1) rotate(-18deg); opacity: 0; }
}

@keyframes searchQuestionIconDownLeft {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(12deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% - 24px), calc(-50% + 26px)) scale(1) rotate(-20deg); opacity: 0; }
}

@keyframes searchQuestionIconDownRight {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(-12deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 24px), calc(-50% + 26px)) scale(1) rotate(20deg); opacity: 0; }
}

@keyframes searchQuestionIconLgUp {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(-10deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(-50%, calc(-50% - 58px)) scale(1.1) rotate(14deg); opacity: 0; }
}

@keyframes searchQuestionIconLgDown {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(8deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(-50%, calc(-50% + 58px)) scale(1.1) rotate(-12deg); opacity: 0; }
}

@keyframes searchQuestionIconLgLeft {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(6deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(calc(-50% - 58px), -50%) scale(1.1) rotate(-16deg); opacity: 0; }
}

@keyframes searchQuestionIconLgRight {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(-6deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(calc(-50% + 58px), -50%) scale(1.1) rotate(16deg); opacity: 0; }
}

@keyframes searchQuestionIconLgUpLeft {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(-14deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% - 42px), calc(-50% - 46px)) scale(1.05) rotate(18deg); opacity: 0; }
}

@keyframes searchQuestionIconLgUpRight {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(14deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 42px), calc(-50% - 46px)) scale(1.05) rotate(-18deg); opacity: 0; }
}

@keyframes searchQuestionIconLgDownLeft {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(12deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% - 42px), calc(-50% + 46px)) scale(1.05) rotate(-20deg); opacity: 0; }
}

@keyframes searchQuestionIconLgDownRight {
    0%   { transform: translate(-50%, -50%) scale(0.42) rotate(-12deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 42px), calc(-50% + 46px)) scale(1.05) rotate(20deg); opacity: 0; }
}

@keyframes searchQuestionLayerUp {
    0%   { transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(-50%, calc(-50% - 95px)) scale(1.15) rotate(14deg); opacity: 0; }
}

@keyframes searchQuestionLayerDown {
    0%   { transform: translate(-50%, -50%) scale(0.5) rotate(8deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(-50%, calc(-50% + 95px)) scale(1.15) rotate(-12deg); opacity: 0; }
}

@keyframes searchQuestionLayerLeft {
    0%   { transform: translate(-50%, -50%) scale(0.5) rotate(6deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(calc(-50% - 95px), -50%) scale(1.15) rotate(-16deg); opacity: 0; }
}

@keyframes searchQuestionLayerRight {
    0%   { transform: translate(-50%, -50%) scale(0.45) rotate(-6deg); opacity: 0; }
    14%  { opacity: 0.95; }
    100% { transform: translate(calc(-50% + 95px), -50%) scale(1.15) rotate(16deg); opacity: 0; }
}

@keyframes searchQuestionLayerUpLeft {
    0%   { transform: translate(-50%, -50%) scale(0.48) rotate(-14deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% - 68px), calc(-50% - 74px)) scale(1.1) rotate(18deg); opacity: 0; }
}

@keyframes searchQuestionLayerUpRight {
    0%   { transform: translate(-50%, -50%) scale(0.48) rotate(14deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 68px), calc(-50% - 74px)) scale(1.1) rotate(-18deg); opacity: 0; }
}

@keyframes searchQuestionLayerDownLeft {
    0%   { transform: translate(-50%, -50%) scale(0.48) rotate(12deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% - 68px), calc(-50% + 74px)) scale(1.1) rotate(-20deg); opacity: 0; }
}

@keyframes searchQuestionLayerDownRight {
    0%   { transform: translate(-50%, -50%) scale(0.48) rotate(-12deg); opacity: 0; }
    14%  { opacity: 0.92; }
    100% { transform: translate(calc(-50% + 68px), calc(-50% + 74px)) scale(1.1) rotate(20deg); opacity: 0; }
}

.search-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.search-clothing-icon > img {
    position: relative;
    z-index: 3;
}

.search-clothing-icon-sm {
    width: 30px;
    height: 30px;
}

.search-clothing-icon-sm > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.search-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.search-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.search-clothing-layer {
    overflow: visible !important;
}

.search-clothing-question {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 5;
    font-weight: 800;
    line-height: 1;
    color: #88ddff;
    text-shadow: 0 0 4px rgba(136, 221, 255, 0.95), 0 0 8px rgba(100, 180, 255, 0.65);
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.search-clothing-icon .search-clothing-question,
.search-clothing-icon-sm .search-clothing-question {
    font-size: 11px;
    animation-duration: 2.2s;
}

.search-clothing-icon-lg .search-clothing-question {
    font-size: 14px;
    animation-duration: 2.4s;
}

.search-clothing-layer .search-clothing-question {
    font-size: 16px;
    animation-duration: 2.6s;
}

.search-clothing-icon .search-clothing-question-1,
.search-clothing-icon-sm .search-clothing-question-1 { animation-name: searchQuestionIconUp; animation-delay: 0s; }
.search-clothing-icon .search-clothing-question-2,
.search-clothing-icon-sm .search-clothing-question-2 { animation-name: searchQuestionIconDown; animation-delay: -0.28s; }
.search-clothing-icon .search-clothing-question-3,
.search-clothing-icon-sm .search-clothing-question-3 { animation-name: searchQuestionIconLeft; animation-delay: -0.55s; }
.search-clothing-icon .search-clothing-question-4,
.search-clothing-icon-sm .search-clothing-question-4 { animation-name: searchQuestionIconRight; animation-delay: -0.82s; }
.search-clothing-icon .search-clothing-question-5,
.search-clothing-icon-sm .search-clothing-question-5 { animation-name: searchQuestionIconUpLeft; animation-delay: -1.1s; }
.search-clothing-icon .search-clothing-question-6,
.search-clothing-icon-sm .search-clothing-question-6 { animation-name: searchQuestionIconUpRight; animation-delay: -1.38s; }
.search-clothing-icon .search-clothing-question-7,
.search-clothing-icon-sm .search-clothing-question-7 { animation-name: searchQuestionIconDownLeft; animation-delay: -1.65s; }
.search-clothing-icon .search-clothing-question-8,
.search-clothing-icon-sm .search-clothing-question-8 { animation-name: searchQuestionIconDownRight; animation-delay: -1.92s; }

.search-clothing-icon-lg .search-clothing-question-1 { animation-name: searchQuestionIconLgUp; animation-delay: 0s; }
.search-clothing-icon-lg .search-clothing-question-2 { animation-name: searchQuestionIconLgDown; animation-delay: -0.3s; }
.search-clothing-icon-lg .search-clothing-question-3 { animation-name: searchQuestionIconLgLeft; animation-delay: -0.6s; }
.search-clothing-icon-lg .search-clothing-question-4 { animation-name: searchQuestionIconLgRight; animation-delay: -0.9s; }
.search-clothing-icon-lg .search-clothing-question-5 { animation-name: searchQuestionIconLgUpLeft; animation-delay: -1.2s; }
.search-clothing-icon-lg .search-clothing-question-6 { animation-name: searchQuestionIconLgUpRight; animation-delay: -1.5s; }
.search-clothing-icon-lg .search-clothing-question-7 { animation-name: searchQuestionIconLgDownLeft; animation-delay: -1.8s; }
.search-clothing-icon-lg .search-clothing-question-8 { animation-name: searchQuestionIconLgDownRight; animation-delay: -2.1s; }

.search-clothing-layer .search-clothing-question-1 { animation-name: searchQuestionLayerUp; animation-delay: 0s; }
.search-clothing-layer .search-clothing-question-2 { animation-name: searchQuestionLayerDown; animation-delay: -0.32s; }
.search-clothing-layer .search-clothing-question-3 { animation-name: searchQuestionLayerLeft; animation-delay: -0.65s; }
.search-clothing-layer .search-clothing-question-4 { animation-name: searchQuestionLayerRight; animation-delay: -0.98s; }
.search-clothing-layer .search-clothing-question-5 { animation-name: searchQuestionLayerUpLeft; animation-delay: -1.3s; }
.search-clothing-layer .search-clothing-question-6 { animation-name: searchQuestionLayerUpRight; animation-delay: -1.62s; }
.search-clothing-layer .search-clothing-question-7 { animation-name: searchQuestionLayerDownLeft; animation-delay: -1.95s; }
.search-clothing-layer .search-clothing-question-8 { animation-name: searchQuestionLayerDownRight; animation-delay: -2.28s; }

#scavanageringMenu .search-reward-item-label .search-clothing-icon-sm {
    flex-shrink: 0;
}

#scavanageringMenu .search-reward-item-label .search-clothing-icon-sm > img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Block Survivor - extreme flame / subtle explosion jacket effect */
@keyframes flameTongueIconLeft1 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(-18deg); opacity: 0; }
    12%  { opacity: 0.95; }
    100% { transform: translate(-26px, -8px) scale(1.15) rotate(-36deg); opacity: 0; }
}

@keyframes flameTongueIconLeft2 {
    0%   { transform: translate(0, 0) scale(0.38) rotate(12deg); opacity: 0; }
    12%  { opacity: 0.92; }
    100% { transform: translate(-24px, 12px) scale(1.1) rotate(32deg); opacity: 0; }
}

@keyframes flameTongueIconRight1 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(18deg); opacity: 0; }
    12%  { opacity: 0.95; }
    100% { transform: translate(26px, -9px) scale(1.15) rotate(36deg); opacity: 0; }
}

@keyframes flameTongueIconRight2 {
    0%   { transform: translate(0, 0) scale(0.38) rotate(-12deg); opacity: 0; }
    12%  { opacity: 0.92; }
    100% { transform: translate(24px, 12px) scale(1.1) rotate(-32deg); opacity: 0; }
}

@keyframes flameTongueIconTop1 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(-8deg); opacity: 0; }
    12%  { opacity: 0.94; }
    100% { transform: translate(-6px, -26px) scale(1.12) rotate(-16deg); opacity: 0; }
}

@keyframes flameTongueIconTop2 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(8deg); opacity: 0; }
    12%  { opacity: 0.94; }
    100% { transform: translate(7px, -25px) scale(1.12) rotate(16deg); opacity: 0; }
}

@keyframes flameTongueIconBottom1 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(10deg); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translate(-7px, 24px) scale(1.08) rotate(20deg); opacity: 0; }
}

@keyframes flameTongueIconBottom2 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(-10deg); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translate(6px, 25px) scale(1.08) rotate(-20deg); opacity: 0; }
}

@keyframes flameTongueIconDiag1 {
    0%   { transform: translate(0, 0) scale(0.35) rotate(-28deg); opacity: 0; }
    14%  { opacity: 0.88; }
    100% { transform: translate(-20px, -20px) scale(1.05) rotate(-42deg); opacity: 0; }
}

@keyframes flameTongueIconDiag2 {
    0%   { transform: translate(0, 0) scale(0.35) rotate(28deg); opacity: 0; }
    14%  { opacity: 0.88; }
    100% { transform: translate(20px, -20px) scale(1.05) rotate(42deg); opacity: 0; }
}

@keyframes flameTongueIconDiag3 {
    0%   { transform: translate(0, 0) scale(0.35) rotate(24deg); opacity: 0; }
    14%  { opacity: 0.86; }
    100% { transform: translate(18px, 18px) scale(1.02) rotate(38deg); opacity: 0; }
}

@keyframes flameTongueIconDiag4 {
    0%   { transform: translate(0, 0) scale(0.35) rotate(-24deg); opacity: 0; }
    14%  { opacity: 0.86; }
    100% { transform: translate(-18px, 18px) scale(1.02) rotate(-38deg); opacity: 0; }
}

@keyframes flameTongueLayerLeft1 {
    0%   { transform: translate(0, 0) scale(0.45) rotate(-18deg); opacity: 0; }
    10%  { opacity: 0.98; }
    100% { transform: translate(-58px, -18px) scale(1.35) rotate(-38deg); opacity: 0; }
}

@keyframes flameTongueLayerLeft2 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(12deg); opacity: 0; }
    10%  { opacity: 0.96; }
    100% { transform: translate(-52px, 24px) scale(1.28) rotate(32deg); opacity: 0; }
}

@keyframes flameTongueLayerRight1 {
    0%   { transform: translate(0, 0) scale(0.45) rotate(18deg); opacity: 0; }
    10%  { opacity: 0.98; }
    100% { transform: translate(58px, -18px) scale(1.35) rotate(38deg); opacity: 0; }
}

@keyframes flameTongueLayerRight2 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(-12deg); opacity: 0; }
    10%  { opacity: 0.96; }
    100% { transform: translate(52px, 24px) scale(1.28) rotate(-32deg); opacity: 0; }
}

@keyframes flameTongueLayerTop1 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(-8deg); opacity: 0; }
    10%  { opacity: 0.96; }
    100% { transform: translate(-12px, -56px) scale(1.3) rotate(-18deg); opacity: 0; }
}

@keyframes flameTongueLayerTop2 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(8deg); opacity: 0; }
    10%  { opacity: 0.96; }
    100% { transform: translate(14px, -54px) scale(1.3) rotate(18deg); opacity: 0; }
}

@keyframes flameTongueLayerBottom1 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(10deg); opacity: 0; }
    10%  { opacity: 0.94; }
    100% { transform: translate(-12px, 50px) scale(1.25) rotate(22deg); opacity: 0; }
}

@keyframes flameTongueLayerBottom2 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(-10deg); opacity: 0; }
    10%  { opacity: 0.94; }
    100% { transform: translate(10px, 52px) scale(1.25) rotate(-22deg); opacity: 0; }
}

@keyframes flameTongueLayerDiag1 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(-30deg); opacity: 0; }
    12%  { opacity: 0.92; }
    100% { transform: translate(-44px, -40px) scale(1.22) rotate(-46deg); opacity: 0; }
}

@keyframes flameTongueLayerDiag2 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(30deg); opacity: 0; }
    12%  { opacity: 0.92; }
    100% { transform: translate(44px, -40px) scale(1.22) rotate(46deg); opacity: 0; }
}

@keyframes flameTongueLayerDiag3 {
    0%   { transform: translate(0, 0) scale(0.38) rotate(26deg); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translate(40px, 38px) scale(1.18) rotate(40deg); opacity: 0; }
}

@keyframes flameTongueLayerDiag4 {
    0%   { transform: translate(0, 0) scale(0.38) rotate(-26deg); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translate(-40px, 38px) scale(1.18) rotate(-40deg); opacity: 0; }
}

@keyframes flameClothingGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(255, 110, 0, 0.45))
                drop-shadow(0 0 10px rgba(255, 50, 0, 0.25));
    }
    50% {
        filter: drop-shadow(0 0 7px rgba(255, 140, 0, 0.62))
                drop-shadow(0 0 16px rgba(255, 70, 0, 0.38));
    }
}

@keyframes flameHeatAuraSide {
    0%, 100% { opacity: 0.45; transform: scaleY(0.92); }
    50%      { opacity: 0.82; transform: scaleY(1.06); }
}

@keyframes flameWingLayerLeft1 {
    0%   { transform: translate(0, 0) scale(0.45) rotate(-88deg); opacity: 0; }
    12%  { opacity: 0.96; }
    100% { transform: translate(-78px, -8px) scale(1.32) rotate(-96deg); opacity: 0; }
}

@keyframes flameWingLayerLeft2 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(-92deg); opacity: 0; }
    12%  { opacity: 0.94; }
    100% { transform: translate(-82px, 6px) scale(1.28) rotate(-84deg); opacity: 0; }
}

@keyframes flameWingLayerLeft3 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(-86deg); opacity: 0; }
    12%  { opacity: 0.92; }
    100% { transform: translate(-74px, 14px) scale(1.22) rotate(-94deg); opacity: 0; }
}

@keyframes flameWingLayerRight1 {
    0%   { transform: translate(0, 0) scale(0.45) rotate(88deg); opacity: 0; }
    12%  { opacity: 0.96; }
    100% { transform: translate(78px, -8px) scale(1.32) rotate(96deg); opacity: 0; }
}

@keyframes flameWingLayerRight2 {
    0%   { transform: translate(0, 0) scale(0.42) rotate(92deg); opacity: 0; }
    12%  { opacity: 0.94; }
    100% { transform: translate(82px, 6px) scale(1.28) rotate(84deg); opacity: 0; }
}

@keyframes flameWingLayerRight3 {
    0%   { transform: translate(0, 0) scale(0.4) rotate(86deg); opacity: 0; }
    12%  { opacity: 0.92; }
    100% { transform: translate(74px, 14px) scale(1.22) rotate(94deg); opacity: 0; }
}

@keyframes flameEmberFloat {
    0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--ex, 0), var(--ey, -18px)) scale(0.15); opacity: 0; }
}

@keyframes flameBurstRingSide {
    0%, 74%, 100% { transform: translate(-50%, -50%) scale(0.35); opacity: 0; }
    75%           { opacity: 0.42; }
    84%           { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.flame-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.flame-clothing-icon::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: -50%;
    right: -50%;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 72% 100% at 8% 50%, rgba(255, 130, 0, 0.34) 0%, rgba(255, 90, 0, 0.12) 38%, rgba(255, 70, 0, 0.02) 62%, transparent 82%),
        radial-gradient(ellipse 72% 100% at 92% 50%, rgba(255, 130, 0, 0.34) 0%, rgba(255, 90, 0, 0.12) 38%, rgba(255, 70, 0, 0.02) 62%, transparent 82%);
    filter: blur(10px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
    animation: flameHeatAuraSide 2.4s ease-in-out infinite;
}

.flame-clothing-icon > img {
    position: relative;
    z-index: 3;
    animation: flameClothingGlowPulse 1.8s ease-in-out infinite;
}

.flame-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.flame-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.flame-clothing-icon-block {
    width: 72px;
    height: 72px;
}

.flame-clothing-icon-block > img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.flame-clothing-layer {
    overflow: visible !important;
    isolation: isolate;
}

.flame-clothing-layer::before {
    content: '';
    position: absolute;
    top: 16%;
    bottom: 16%;
    left: -62%;
    right: -62%;
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 68% 100% at 7% 50%, rgba(255, 130, 0, 0.36) 0%, rgba(255, 90, 0, 0.14) 34%, rgba(255, 70, 0, 0.04) 56%, transparent 78%),
        radial-gradient(ellipse 68% 100% at 93% 50%, rgba(255, 130, 0, 0.36) 0%, rgba(255, 90, 0, 0.14) 34%, rgba(255, 70, 0, 0.04) 56%, transparent 78%);
    filter: blur(16px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    animation: flameHeatAuraSide 2.2s ease-in-out infinite;
}

.flame-clothing-layer::after {
    content: none;
}

.flame-clothing-tongue {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    width: 9px;
    height: 16px;
    background: linear-gradient(to top, #bf360c 0%, #ff6f00 28%, #ffab00 58%, #fff176 82%, transparent 100%);
    border-radius: 50% 50% 16% 16%;
    filter: blur(0.35px);
    box-shadow: 0 0 8px rgba(255, 100, 0, 0.75), 0 0 14px rgba(255, 50, 0, 0.35);
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.flame-clothing-layer .flame-clothing-tongue {
    width: 14px;
    height: 24px;
    filter: blur(3px);
    box-shadow: 0 0 16px rgba(255, 100, 0, 0.55), 0 0 28px rgba(255, 50, 0, 0.28);
    z-index: -1;
}

.flame-clothing-layer .flame-clothing-ember {
    filter: blur(2px);
    box-shadow: 0 0 12px rgba(255, 145, 0, 0.55), 0 0 20px rgba(255, 61, 0, 0.28);
    z-index: -1;
}

.flame-clothing-layer .flame-clothing-burst {
    border: none;
    background: radial-gradient(circle, rgba(255, 190, 90, 0.28) 0%, rgba(255, 110, 0, 0.1) 42%, transparent 72%);
    box-shadow: none;
    filter: blur(8px);
    z-index: -1;
}

.flame-clothing-ember {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    background: radial-gradient(circle, #fff176 0%, #ffab00 45%, #ff6d00 100%);
    box-shadow: 0 0 8px #ff9100, 0 0 14px #ff3d00;
    animation: flameEmberFloat 2.4s ease-out infinite;
}

.flame-clothing-burst {
    position: absolute;
    width: 16%;
    height: 28%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    border: 2px solid rgba(255, 200, 80, 0.45);
    box-shadow: 0 0 10px rgba(255, 120, 0, 0.35), inset 0 0 8px rgba(255, 200, 80, 0.2);
    animation: flameBurstRingSide 3.8s ease-out infinite;
}

.flame-clothing-icon .flame-clothing-tongue-1,
.flame-clothing-icon-lg .flame-clothing-tongue-1,
.flame-clothing-icon-block .flame-clothing-tongue-1 {
    left: -3%;
    top: 36%;
    animation: flameTongueIconLeft1 1.7s ease-out infinite -0.1s;
}

.flame-clothing-icon .flame-clothing-tongue-2,
.flame-clothing-icon-lg .flame-clothing-tongue-2,
.flame-clothing-icon-block .flame-clothing-tongue-2 {
    left: -2%;
    top: 52%;
    animation: flameTongueIconLeft2 2s ease-out infinite -0.7s;
}

.flame-clothing-icon .flame-clothing-tongue-3,
.flame-clothing-icon-lg .flame-clothing-tongue-3,
.flame-clothing-icon-block .flame-clothing-tongue-3 {
    right: -3%;
    top: 38%;
    animation: flameTongueIconRight1 1.8s ease-out infinite -0.4s;
}

.flame-clothing-icon .flame-clothing-tongue-4,
.flame-clothing-icon-lg .flame-clothing-tongue-4,
.flame-clothing-icon-block .flame-clothing-tongue-4 {
    right: -2%;
    top: 54%;
    animation: flameTongueIconRight2 2.1s ease-out infinite -1s;
}

.flame-clothing-icon .flame-clothing-tongue-5,
.flame-clothing-icon-lg .flame-clothing-tongue-5,
.flame-clothing-icon-block .flame-clothing-tongue-5,
.flame-clothing-icon .flame-clothing-tongue-6,
.flame-clothing-icon-lg .flame-clothing-tongue-6,
.flame-clothing-icon-block .flame-clothing-tongue-6,
.flame-clothing-icon .flame-clothing-tongue-7,
.flame-clothing-icon-lg .flame-clothing-tongue-7,
.flame-clothing-icon-block .flame-clothing-tongue-7,
.flame-clothing-icon .flame-clothing-tongue-8,
.flame-clothing-icon-lg .flame-clothing-tongue-8,
.flame-clothing-icon-block .flame-clothing-tongue-8 {
    display: none;
}

.flame-clothing-icon .flame-clothing-tongue-9,
.flame-clothing-icon-lg .flame-clothing-tongue-9,
.flame-clothing-icon-block .flame-clothing-tongue-9 {
    left: -2%;
    top: 42%;
    animation: flameTongueIconLeft1 1.7s ease-out infinite -0.3s;
}

.flame-clothing-icon .flame-clothing-tongue-10,
.flame-clothing-icon-lg .flame-clothing-tongue-10,
.flame-clothing-icon-block .flame-clothing-tongue-10 {
    right: -2%;
    top: 44%;
    animation: flameTongueIconRight1 1.8s ease-out infinite -1.1s;
}

.flame-clothing-icon .flame-clothing-tongue-11,
.flame-clothing-icon-lg .flame-clothing-tongue-11,
.flame-clothing-icon-block .flame-clothing-tongue-11 {
    right: -1%;
    top: 56%;
    animation: flameTongueIconRight2 2.1s ease-out infinite -0.65s;
}

.flame-clothing-icon .flame-clothing-tongue-12,
.flame-clothing-icon-lg .flame-clothing-tongue-12,
.flame-clothing-icon-block .flame-clothing-tongue-12 {
    left: -1%;
    top: 54%;
    animation: flameTongueIconLeft2 2s ease-out infinite -1.55s;
}

.flame-clothing-layer .flame-clothing-tongue-1 { left: -4%; top: 30%; animation: flameWingLayerLeft1 1.5s ease-out infinite -0.1s; }
.flame-clothing-layer .flame-clothing-tongue-2 { left: -3%; top: 44%; animation: flameWingLayerLeft2 1.7s ease-out infinite -0.55s; }
.flame-clothing-layer .flame-clothing-tongue-3 { right: -4%; top: 32%; animation: flameWingLayerRight1 1.5s ease-out infinite -0.25s; }
.flame-clothing-layer .flame-clothing-tongue-4 { right: -3%; top: 46%; animation: flameWingLayerRight2 1.7s ease-out infinite -0.7s; }
.flame-clothing-layer .flame-clothing-tongue-5 { left: -2%; top: 58%; animation: flameWingLayerLeft3 1.8s ease-out infinite -1.1s; }
.flame-clothing-layer .flame-clothing-tongue-6 { right: -2%; top: 60%; animation: flameWingLayerRight3 1.8s ease-out infinite -1.25s; }
.flame-clothing-layer .flame-clothing-tongue-7 { left: -5%; top: 38%; animation: flameWingLayerLeft1 1.6s ease-out infinite -0.85s; }
.flame-clothing-layer .flame-clothing-tongue-8 { right: -5%; top: 40%; animation: flameWingLayerRight1 1.6s ease-out infinite -1s; }
.flame-clothing-layer .flame-clothing-tongue-9 { left: -3%; top: 52%; animation: flameWingLayerLeft2 1.9s ease-out infinite -1.45s; }
.flame-clothing-layer .flame-clothing-tongue-10 { right: -3%; top: 54%; animation: flameWingLayerRight2 1.9s ease-out infinite -1.6s; }
.flame-clothing-layer .flame-clothing-tongue-11 { right: -4%; top: 36%; animation: flameWingLayerRight3 2s ease-out infinite -0.4s; }
.flame-clothing-layer .flame-clothing-tongue-12 { left: -4%; top: 34%; animation: flameWingLayerLeft3 2s ease-out infinite -0.55s; }

.flame-clothing-layer .flame-clothing-ember-1 { left: -2%; top: 34%; --ex: -24px; --ey: -8px; animation-delay: 0s; }
.flame-clothing-layer .flame-clothing-ember-2 { left: 0%; top: 48%; --ex: -28px; --ey: 4px; animation-delay: -0.8s; }
.flame-clothing-layer .flame-clothing-ember-3 { right: -2%; top: 36%; --ex: 24px; --ey: -6px; animation-delay: -1.5s; }
.flame-clothing-layer .flame-clothing-ember-4 { right: 0%; top: 50%; --ex: 28px; --ey: 5px; animation-delay: -2.1s; }
.flame-clothing-layer .flame-clothing-ember-5 { left: -1%; top: 58%; --ex: -22px; --ey: 2px; animation-delay: -0.4s; }
.flame-clothing-layer .flame-clothing-ember-6 { right: -1%; top: 56%; --ex: 22px; --ey: 3px; animation-delay: -1.9s; }

.flame-clothing-layer .flame-clothing-burst-1 { left: -6%; top: 44%; animation-delay: 0s; }
.flame-clothing-layer .flame-clothing-burst-2 { left: auto; right: -6%; top: 46%; animation-delay: -1.25s; width: 18%; height: 30%; }
.flame-clothing-layer .flame-clothing-burst-3 { display: none; }

/* Glow punt op de sigaret */
.sigaret-glow-point {
    position: absolute;
    right: 2%;
    top: 45%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 120, 0, 1) 0%, rgba(255, 80, 0, 0.8) 40%, rgba(255, 50, 0, 0) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 0 6px rgba(255, 100, 0, 0.8);
    animation: sigaretGlow 1.5s infinite ease-in-out;
}

/* Ring of Angels Glow Effect */
@keyframes angelRingGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)) 
                drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)) 
                brightness(1.1);
    }
    50% { 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) 
                drop-shadow(0 0 25px rgba(255, 255, 255, 0.6)) 
                brightness(1.3);
    }
}

/* Deal With It block glasses - translucent smoke + sparks rising up */
@keyframes blockGlassesBaseFogPulse {
    0%, 100% { opacity: 0.22; transform: translateX(-50%) scale(0.96); }
    50%      { opacity: 0.34; transform: translateX(-50%) scale(1.04); }
}

@keyframes blockGlassesSpark1 {
    0%   { transform: translate(-50%, 0) translateX(-9px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -26px) translateX(-12px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark2 {
    0%   { transform: translate(-50%, 0) translateX(6px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -28px) translateX(9px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark3 {
    0%   { transform: translate(-50%, 0) translateX(-4px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -30px) translateX(-6px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark4 {
    0%   { transform: translate(-50%, 0) translateX(10px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -25px) translateX(14px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark5 {
    0%   { transform: translate(-50%, 0) translateX(-7px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -27px) translateX(-10px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark6 {
    0%   { transform: translate(-50%, 0) translateX(8px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -29px) translateX(11px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark7 {
    0%   { transform: translate(-50%, 0) translateX(-5px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -24px) translateX(-8px) scale(0.35); opacity: 0; }
}
@keyframes blockGlassesSpark8 {
    0%   { transform: translate(-50%, 0) translateX(11px) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 0.95; }
    100% { transform: translate(-50%, -31px) translateX(15px) scale(0.35); opacity: 0; }
}

@keyframes blockGlassesSparkFlicker {
    0%, 100% { filter: brightness(1.1); }
    40%      { filter: brightness(1.6); }
    70%      { filter: brightness(0.9); }
}

@keyframes blockGlassesSmokeRiseIcon1 {
    0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
    12%  { opacity: 0.42; }
    60%  { opacity: 0.28; }
    100% { transform: translate(calc(-50% - 10px), -24px) scale(1.8); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon2 {
    0%   { transform: translate(-50%, 0) scale(0.65); opacity: 0; }
    14%  { opacity: 0.38; }
    60%  { opacity: 0.24; }
    100% { transform: translate(calc(-50% + 12px), -26px) scale(1.9); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon3 {
    0%   { transform: translate(-50%, 0) scale(0.75); opacity: 0; }
    11%  { opacity: 0.4; }
    60%  { opacity: 0.26; }
    100% { transform: translate(calc(-50% - 4px), -28px) scale(2); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon4 {
    0%   { transform: translate(-50%, 0) scale(0.62); opacity: 0; }
    15%  { opacity: 0.36; }
    60%  { opacity: 0.22; }
    100% { transform: translate(calc(-50% + 8px), -22px) scale(1.75); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon5 {
    0%   { transform: translate(-50%, 0) scale(0.72); opacity: 0; }
    13%  { opacity: 0.44; }
    60%  { opacity: 0.3; }
    100% { transform: translate(calc(-50% - 14px), -25px) scale(1.95); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon6 {
    0%   { transform: translate(-50%, 0) scale(0.68); opacity: 0; }
    12%  { opacity: 0.37; }
    60%  { opacity: 0.23; }
    100% { transform: translate(calc(-50% + 15px), -27px) scale(2.05); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon7 {
    0%   { transform: translate(-50%, 0) scale(0.66); opacity: 0; }
    14%  { opacity: 0.39; }
    60%  { opacity: 0.25; }
    100% { transform: translate(calc(-50% - 7px), -29px) scale(2.1); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseIcon8 {
    0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
    12%  { opacity: 0.41; }
    60%  { opacity: 0.27; }
    100% { transform: translate(calc(-50% + 5px), -30px) scale(2.05); opacity: 0; }
}

@keyframes blockGlassesSmokeRiseLayer1 {
    0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
    12%  { opacity: 0.45; }
    60%  { opacity: 0.3; }
    100% { transform: translate(calc(-50% - 14%), -22%) scale(1.85); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer2 {
    0%   { transform: translate(-50%, 0) scale(0.65); opacity: 0; }
    14%  { opacity: 0.4; }
    60%  { opacity: 0.26; }
    100% { transform: translate(calc(-50% + 16%), -24%) scale(1.95); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer3 {
    0%   { transform: translate(-50%, 0) scale(0.75); opacity: 0; }
    11%  { opacity: 0.43; }
    60%  { opacity: 0.28; }
    100% { transform: translate(calc(-50% - 5%), -26%) scale(2.05); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer4 {
    0%   { transform: translate(-50%, 0) scale(0.62); opacity: 0; }
    15%  { opacity: 0.38; }
    60%  { opacity: 0.24; }
    100% { transform: translate(calc(-50% + 10%), -20%) scale(1.75); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer5 {
    0%   { transform: translate(-50%, 0) scale(0.72); opacity: 0; }
    13%  { opacity: 0.46; }
    60%  { opacity: 0.32; }
    100% { transform: translate(calc(-50% - 18%), -23%) scale(2); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer6 {
    0%   { transform: translate(-50%, 0) scale(0.68); opacity: 0; }
    12%  { opacity: 0.39; }
    60%  { opacity: 0.25; }
    100% { transform: translate(calc(-50% + 18%), -25%) scale(2.1); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer7 {
    0%   { transform: translate(-50%, 0) scale(0.66); opacity: 0; }
    14%  { opacity: 0.41; }
    60%  { opacity: 0.27; }
    100% { transform: translate(calc(-50% - 8%), -27%) scale(2.15); opacity: 0; }
}
@keyframes blockGlassesSmokeRiseLayer8 {
    0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
    12%  { opacity: 0.4; }
    60%  { opacity: 0.26; }
    100% { transform: translate(calc(-50% + 7%), -28%) scale(2.05); opacity: 0; }
}

.block-glasses-clothing-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

.block-glasses-clothing-icon::before,
.block-glasses-clothing-layer::before {
    content: '';
    position: absolute;
    top: 36%;
    left: 50%;
    width: 72%;
    height: 22%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse 100% 85% at 50% 85%, rgba(140, 140, 140, 0.32) 0%, rgba(110, 110, 110, 0.2) 42%, rgba(90, 90, 90, 0.08) 68%, transparent 88%);
    filter: blur(8px);
    animation: blockGlassesBaseFogPulse 2.4s ease-in-out infinite;
}

.block-glasses-clothing-icon > img {
    position: relative;
    z-index: 3;
}

.block-glasses-clothing-icon-lg {
    width: 80px;
    height: 80px;
}

.block-glasses-clothing-icon-lg > img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.block-glasses-clothing-icon-block {
    width: 72px;
    height: 72px;
}

.block-glasses-clothing-icon-block > img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.block-glasses-clothing-layer {
    overflow: visible !important;
    isolation: isolate;
}

.block-glasses-clothing-smoke {
    position: absolute;
    pointer-events: none;
    z-index: 6;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 150, 150, 0.38) 0%, rgba(120, 120, 120, 0.24) 35%, rgba(95, 95, 95, 0.1) 58%, transparent 82%);
    filter: blur(6px);
    will-change: transform, opacity;
}

.block-glasses-clothing-spark {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffacd 0%, #ffd700 35%, #ffab00 70%, #ff8c00 100%);
    box-shadow: 0 0 5px #ffb700, 0 0 8px rgba(255, 140, 0, 0.75), 0 0 12px rgba(255, 100, 0, 0.35);
    opacity: 0;
}

.block-glasses-clothing-icon .block-glasses-clothing-smoke,
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke,
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke,
.block-glasses-clothing-layer .block-glasses-clothing-smoke {
    top: 38%;
    width: 28px;
    height: 18px;
    filter: blur(6px);
    z-index: 7;
}

.block-glasses-clothing-icon .block-glasses-clothing-spark,
.block-glasses-clothing-icon-lg .block-glasses-clothing-spark,
.block-glasses-clothing-icon-block .block-glasses-clothing-spark,
.block-glasses-clothing-layer .block-glasses-clothing-spark {
    top: 45%;
}

.block-glasses-clothing-spark-1 { 
    left: 34%; 
    animation: blockGlassesSpark1 2.1s ease-out infinite -0.1s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.05s;
}
.block-glasses-clothing-spark-2 { 
    left: 40%; 
    animation: blockGlassesSpark2 2.1s ease-out infinite -0.7s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.25s;
}
.block-glasses-clothing-spark-3 { 
    left: 47%; 
    animation: blockGlassesSpark3 2.1s ease-out infinite -1.3s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.5s;
}
.block-glasses-clothing-spark-4 { 
    left: 53%; 
    animation: blockGlassesSpark4 2.1s ease-out infinite -0.4s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.15s;
}
.block-glasses-clothing-spark-5 { 
    left: 60%; 
    animation: blockGlassesSpark5 2.1s ease-out infinite -1.6s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.35s;
}
.block-glasses-clothing-spark-6 { 
    left: 66%; 
    animation: blockGlassesSpark6 2.1s ease-out infinite -1s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.6s;
}
.block-glasses-clothing-spark-7 { 
    left: 37%; 
    animation: blockGlassesSpark7 2.1s ease-out infinite -0.3s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.2s;
}
.block-glasses-clothing-spark-8 { 
    left: 57%; 
    animation: blockGlassesSpark8 2.1s ease-out infinite -1.4s, blockGlassesSparkFlicker 0.45s ease-in-out infinite -0.45s;
}

.block-glasses-clothing-smoke-1 { left: 28%; }
.block-glasses-clothing-smoke-2 { left: 36%; }
.block-glasses-clothing-smoke-3 { left: 44%; }
.block-glasses-clothing-smoke-4 { left: 52%; }
.block-glasses-clothing-smoke-5 { left: 60%; }
.block-glasses-clothing-smoke-6 { left: 68%; }
.block-glasses-clothing-smoke-7 { left: 32%; }
.block-glasses-clothing-smoke-8 { left: 40%; }
.block-glasses-clothing-smoke-9 { left: 48%; }
.block-glasses-clothing-smoke-10 { left: 56%; }
.block-glasses-clothing-smoke-11 { left: 64%; }
.block-glasses-clothing-smoke-12 { left: 72%; }

.block-glasses-clothing-icon .block-glasses-clothing-smoke-1 { animation: blockGlassesSmokeRiseIcon1 3s ease-out infinite -0.2s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-2 { animation: blockGlassesSmokeRiseIcon2 3.3s ease-out infinite -0.9s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-3 { animation: blockGlassesSmokeRiseIcon3 2.8s ease-out infinite -1.4s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-4 { animation: blockGlassesSmokeRiseIcon4 3.4s ease-out infinite -0.5s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-5 { animation: blockGlassesSmokeRiseIcon5 3.1s ease-out infinite -1.8s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-6 { animation: blockGlassesSmokeRiseIcon6 3.5s ease-out infinite -1.1s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-7 { animation: blockGlassesSmokeRiseIcon7 2.9s ease-out infinite -0.7s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-8 { animation: blockGlassesSmokeRiseIcon8 3.6s ease-out infinite -2.1s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-9 { animation: blockGlassesSmokeRiseIcon1 2.7s ease-out infinite -0.4s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-10 { animation: blockGlassesSmokeRiseIcon3 3.2s ease-out infinite -1.6s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-11 { animation: blockGlassesSmokeRiseIcon5 2.9s ease-out infinite -2.4s; }
.block-glasses-clothing-icon .block-glasses-clothing-smoke-12 { animation: blockGlassesSmokeRiseIcon7 3.4s ease-out infinite -1.3s; }

.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-1 { animation: blockGlassesSmokeRiseIcon1 3s ease-out infinite -0.2s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-2 { animation: blockGlassesSmokeRiseIcon2 3.3s ease-out infinite -0.9s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-3 { animation: blockGlassesSmokeRiseIcon3 2.8s ease-out infinite -1.4s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-4 { animation: blockGlassesSmokeRiseIcon4 3.4s ease-out infinite -0.5s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-5 { animation: blockGlassesSmokeRiseIcon5 3.1s ease-out infinite -1.8s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-6 { animation: blockGlassesSmokeRiseIcon6 3.5s ease-out infinite -1.1s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-7 { animation: blockGlassesSmokeRiseIcon7 2.9s ease-out infinite -0.7s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-8 { animation: blockGlassesSmokeRiseIcon8 3.6s ease-out infinite -2.1s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-9 { animation: blockGlassesSmokeRiseIcon1 2.7s ease-out infinite -0.4s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-10 { animation: blockGlassesSmokeRiseIcon3 3.2s ease-out infinite -1.6s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-11 { animation: blockGlassesSmokeRiseIcon5 2.9s ease-out infinite -2.4s; }
.block-glasses-clothing-icon-lg .block-glasses-clothing-smoke-12 { animation: blockGlassesSmokeRiseIcon7 3.4s ease-out infinite -1.3s; }

.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-1 { animation: blockGlassesSmokeRiseIcon1 3s ease-out infinite -0.2s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-2 { animation: blockGlassesSmokeRiseIcon2 3.3s ease-out infinite -0.9s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-3 { animation: blockGlassesSmokeRiseIcon3 2.8s ease-out infinite -1.4s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-4 { animation: blockGlassesSmokeRiseIcon4 3.4s ease-out infinite -0.5s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-5 { animation: blockGlassesSmokeRiseIcon5 3.1s ease-out infinite -1.8s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-6 { animation: blockGlassesSmokeRiseIcon6 3.5s ease-out infinite -1.1s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-7 { animation: blockGlassesSmokeRiseIcon7 2.9s ease-out infinite -0.7s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-8 { animation: blockGlassesSmokeRiseIcon8 3.6s ease-out infinite -2.1s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-9 { animation: blockGlassesSmokeRiseIcon1 2.7s ease-out infinite -0.4s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-10 { animation: blockGlassesSmokeRiseIcon3 3.2s ease-out infinite -1.6s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-11 { animation: blockGlassesSmokeRiseIcon5 2.9s ease-out infinite -2.4s; }
.block-glasses-clothing-icon-block .block-glasses-clothing-smoke-12 { animation: blockGlassesSmokeRiseIcon7 3.4s ease-out infinite -1.3s; }

.block-glasses-clothing-layer .block-glasses-clothing-smoke-1 { animation: blockGlassesSmokeRiseLayer1 3s ease-out infinite -0.2s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-2 { animation: blockGlassesSmokeRiseLayer2 3.3s ease-out infinite -0.9s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-3 { animation: blockGlassesSmokeRiseLayer3 2.8s ease-out infinite -1.4s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-4 { animation: blockGlassesSmokeRiseLayer4 3.4s ease-out infinite -0.5s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-5 { animation: blockGlassesSmokeRiseLayer5 3.1s ease-out infinite -1.8s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-6 { animation: blockGlassesSmokeRiseLayer6 3.5s ease-out infinite -1.1s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-7 { animation: blockGlassesSmokeRiseLayer7 2.9s ease-out infinite -0.7s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-8 { animation: blockGlassesSmokeRiseLayer8 3.6s ease-out infinite -2.1s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-9 { animation: blockGlassesSmokeRiseLayer1 2.7s ease-out infinite -0.4s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-10 { animation: blockGlassesSmokeRiseLayer3 3.2s ease-out infinite -1.6s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-11 { animation: blockGlassesSmokeRiseLayer5 2.9s ease-out infinite -2.4s; }
.block-glasses-clothing-layer .block-glasses-clothing-smoke-12 { animation: blockGlassesSmokeRiseLayer7 3.4s ease-out infinite -1.3s; }

/* Vallende sterretjes animatie */
@keyframes angelStarFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(200%) rotate(360deg);
        opacity: 0;
    }
}

/* Sterretje base style */
.angel-star {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 0, 0.8) 40%, transparent 70%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    animation: angelStarFall 3s infinite ease-in;
}

.angel-star-1 { left: 20%; animation-delay: 0s; animation-duration: 2.5s; }
.angel-star-2 { left: 40%; animation-delay: 0.5s; animation-duration: 3s; }
.angel-star-3 { left: 60%; animation-delay: 1s; animation-duration: 2.8s; }
.angel-star-4 { left: 80%; animation-delay: 1.5s; animation-duration: 3.2s; }
.angel-star-5 { left: 30%; animation-delay: 2s; animation-duration: 2.7s; }
.angel-star-6 { left: 70%; animation-delay: 2.5s; animation-duration: 2.9s; }





/* Boxblaster (Speaker) Bass Pulse Effect */
@keyframes boxblasterPulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 50, 50, 0.4));
    }
    25% { 
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.6));
    }
    50% { 
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 50, 50, 0.4));
    }
    75% { 
        transform: scale(1.03);
        filter: drop-shadow(0 0 8px rgba(255, 50, 50, 0.5));
    }
}

/* Muzieknootjes animatie - vanuit MIDDEN naar boven-rechts */
@keyframes musicNoteFloat {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(50px, -80px) rotate(-15deg) scale(0.7);
        opacity: 0;
    }
}

@keyframes musicNoteFloat2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(60px, -70px) rotate(20deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes musicNoteFloat3 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(55px, -90px) rotate(-10deg) scale(0.6);
        opacity: 0;
    }
}

/* Muzieknoot base style */
.music-note {
    position: absolute;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 3px rgba(255, 100, 100, 0.8),
                 0 0 6px rgba(255, 50, 50, 0.6);
    pointer-events: none;
    z-index: 7;
    font-weight: bold;
}

/* Verschillende noten met verschillende posities - START VANUIT MIDDEN */
.music-note-1 {
    left: 50%;
    top: 45%;
    transform: translateX(-50%);
    animation: musicNoteFloat 2.5s infinite ease-out;
    animation-delay: 0s;
}

.music-note-2 {
    left: 48%;
    top: 50%;
    transform: translateX(-50%);
    animation: musicNoteFloat2 2.8s infinite ease-out;
    animation-delay: 0.5s;
    font-size: 18px;
}

.music-note-3 {
    left: 52%;
    top: 48%;
    transform: translateX(-50%);
    animation: musicNoteFloat3 2.3s infinite ease-out;
    animation-delay: 1s;
    font-size: 22px;
}

.music-note-4 {
    left: 50%;
    top: 52%;
    transform: translateX(-50%);
    animation: musicNoteFloat 2.6s infinite ease-out;
    animation-delay: 1.5s;
    font-size: 19px;
}

.music-note-5 {
    left: 49%;
    top: 46%;
    transform: translateX(-50%);
    animation: musicNoteFloat2 2.4s infinite ease-out;
    animation-delay: 2s;
    font-size: 21px;
}

/* Geluidsgolven effect rondom speaker - LINKS */
.sound-wave {
    position: absolute;
    left: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 100, 100, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    animation: soundWaveExpand 1.5s infinite ease-out;
}

.sound-wave-2 {
    animation-delay: 0.3s;
}

.sound-wave-3 {
    animation-delay: 0.6s;
}

/* Geluidsgolven effect - RECHTS */
.sound-wave-right {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 100, 100, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    animation: soundWaveExpand 1.5s infinite ease-out;
}

.sound-wave-right-2 {
    animation-delay: 0.3s;
}

.sound-wave-right-3 {
    animation-delay: 0.6s;
}

@keyframes soundWaveExpand {
    0% {
        transform: translateY(-50%) scale(0.5);
        opacity: 0.8;
        border-width: 3px;
    }
    50% {
        opacity: 0.4;
        border-width: 2px;
    }
    100% {
        transform: translateY(-50%) scale(2);
        opacity: 0;
        border-width: 1px;
    }
}

/* Bass shake effect voor extra impact */
@keyframes bassShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-1px); }
    20% { transform: translateX(1px); }
    30% { transform: translateX(-1px); }
    40% { transform: translateX(1px); }
    50% { transform: translateX(0); }
}

/* IJskoud biertje - condensdruppels effect */
@keyframes beerCondenseDrop {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100px) scale(0.8);
        opacity: 0;
    }
}

/* Condensdruppel base style */
.beer-condense {
    position: absolute;
    width: 3px;
    height: 8px;
    background: linear-gradient(to bottom, 
        rgba(200, 230, 255, 0.9) 0%, 
        rgba(180, 220, 255, 0.8) 30%,
        rgba(150, 200, 255, 0.6) 70%,
        transparent 100%);
    border-radius: 50% 50% 60% 40%;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
    animation: beerCondenseDrop 3s infinite ease-in;
}

/* Verschillende druppels - OP HET FLESJE (midden gebied) */
.beer-condense-1 {
    left: 46%;
    top: 35%;
    animation-delay: 0s;
    animation-duration: 2.8s;
}

.beer-condense-2 {
    left: 42%;
    top: 45%;
    animation-delay: 0.6s;
    animation-duration: 3.2s;
    width: 2px;
    height: 6px;
}

.beer-condense-3 {
    left: 50%;
    top: 48%;
    animation-delay: 1.2s;
    animation-duration: 3s;
    width: 4px;
    height: 10px;
}

.beer-condense-4 {
    left: 58%;
    top: 44%;
    animation-delay: 1.8s;
    animation-duration: 2.9s;
    width: 3px;
    height: 7px;
}

.beer-condense-5 {
    left: 62%;
    top: 43%;
    animation-delay: 2.4s;
    animation-duration: 3.1s;
    width: 2px;
    height: 9px;
}

.beer-condense-6 {
    left: 46%;
    top: 45%;
    animation-delay: 3s;
    animation-duration: 2.7s;
    width: 3px;
    height: 8px;
}

.beer-condense-7 {
    left: 54%;
    top: 49%;
    animation-delay: 0.8s;
    animation-duration: 3.3s;
    width: 2px;
    height: 6px;
}

.beer-condense-8 {
    left: 48%;
    top: 48%;
    animation-delay: 2.2s;
    animation-duration: 2.8s;
    width: 4px;
    height: 9px;
}



@keyframes beerColdPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Kleine ijskristallen/frost effect - OOK IN HET MIDDEN */
.beer-frost {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 0 2px rgba(200, 230, 255, 0.6);
    animation: beerFrostSparkle 1.5s infinite ease-in-out;
}

@keyframes beerFrostSparkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.beer-frost-1 { left: 40%; top: 45%; animation-delay: 0s; }
.beer-frost-2 { left: 50%; top: 40%; animation-delay: 0.3s; }
.beer-frost-3 { left: 60%; top: 48%; animation-delay: 0.6s; }
.beer-frost-4 { left: 55%; top: 52%; animation-delay: 0.9s; }
.beer-frost-5 { left: 45%; top: 50%; animation-delay: 1.2s; }

/* Bag of Goobs - de groene goobs laten de volledige tas pulserend shinen */
.bag-of-goobs-accessory {
    animation: bagOfGoobsGlow 1.8s infinite ease-in-out !important;
    transform-origin: 58% 14%;
    will-change: filter, transform;
}

@keyframes bagOfGoobsGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 3px rgba(86, 255, 44, 0.72))
            drop-shadow(0 0 9px rgba(35, 220, 40, 0.48))
            drop-shadow(0 0 17px rgba(0, 180, 35, 0.28))
            brightness(1.06)
            saturate(1.14);
        transform: rotate(8deg) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 5px rgba(150, 255, 80, 0.85))
            drop-shadow(0 0 13px rgba(60, 255, 40, 0.65))
            drop-shadow(0 0 23px rgba(0, 220, 45, 0.4))
            brightness(1.16)
            saturate(1.3);
        transform: rotate(8deg) scale(1.02);
    }
}

/* =========================================================
   CSS-only character accessories
   ========================================================= */
.effect-only-accessory-layer {
    pointer-events: none;
    overflow: visible;
    isolation: isolate;
}

/* Head Smoke: zachte rookpluimen die vanaf het hoofd opstijgen. */
.head-smoke-particle {
    position: absolute;
    top: 19%;
    left: var(--effect-x);
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle at 38% 40%, rgba(230, 235, 235, 0.7) 0 18%, transparent 48%),
        radial-gradient(circle at 65% 55%, rgba(130, 140, 145, 0.65) 0 25%, transparent 62%),
        radial-gradient(circle, rgba(75, 82, 86, 0.55), transparent 70%);
    filter: blur(2.5px);
    mix-blend-mode: screen;
    animation: headSmokeRise 3.4s infinite ease-out;
    animation-delay: calc(var(--effect-i) * -0.47s);
}

@keyframes headSmokeRise {
    0% {
        opacity: 0;
        transform: translate(-50%, 25%) scale(0.35);
    }
    18% { opacity: 0.72; }
    70% { opacity: 0.36; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + 10px), -260%) scale(1.45);
    }
}

/* Flame Aura: een rokerig vuurportaal rondom het character. */
.fire-portal-ring {
    position: absolute;
    inset: -8% -18% -5%;
    border-radius: 48%;
    opacity: 0.82;
    background:
        radial-gradient(ellipse at center,
            transparent 0 43%,
            rgba(255, 224, 90, 0.2) 47%,
            rgba(255, 104, 5, 0.66) 53%,
            rgba(178, 24, 0, 0.62) 60%,
            rgba(52, 17, 12, 0.38) 67%,
            transparent 75%);
    filter: blur(5px) drop-shadow(0 0 8px rgba(255, 68, 0, 0.65));
    mix-blend-mode: screen;
    animation: firePortalBreathe 1.65s infinite ease-in-out alternate;
}

.fire-portal-ring::before,
.fire-portal-ring::after {
    content: '';
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    background: conic-gradient(
        from 25deg,
        transparent 0 8%, rgba(255, 84, 0, 0.62) 12%, transparent 19% 27%,
        rgba(255, 180, 25, 0.58) 32%, transparent 39% 51%,
        rgba(220, 38, 0, 0.68) 57%, transparent 64% 76%,
        rgba(255, 112, 0, 0.62) 83%, transparent 91% 100%
    );
    filter: blur(7px);
    -webkit-mask: radial-gradient(ellipse, transparent 0 48%, #000 56% 65%, transparent 73%);
    mask: radial-gradient(ellipse, transparent 0 48%, #000 56% 65%, transparent 73%);
    animation: firePortalTurn 7s infinite linear;
}

.fire-portal-ring::after {
    inset: 6%;
    opacity: 0.62;
    animation-direction: reverse;
    animation-duration: 5.4s;
}

.fire-smoke-cloud {
    position: absolute;
    left: var(--effect-x);
    top: var(--effect-y);
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle at 45% 58%, rgba(255, 220, 86, 0.78) 0 7%, rgba(255, 72, 0, 0.64) 18%, transparent 42%),
        radial-gradient(circle at 62% 42%, rgba(104, 35, 20, 0.88) 0 22%, rgba(34, 30, 30, 0.82) 48%, transparent 72%),
        radial-gradient(circle, rgba(12, 12, 13, 0.72), transparent 74%);
    filter: blur(5px) drop-shadow(0 0 6px rgba(255, 74, 0, 0.54));
    mix-blend-mode: normal;
    animation: fireSmokeBillow 3.2s infinite ease-in-out;
    animation-delay: calc(var(--effect-i) * -0.27s);
}

@keyframes firePortalBreathe {
    from { opacity: 0.65; transform: scale(0.96); }
    to { opacity: 0.9; transform: scale(1.035); }
}

@keyframes firePortalTurn {
    to { transform: rotate(360deg); }
}

@keyframes fireSmokeBillow {
    0% { opacity: 0; transform: translate(-50%, -45%) scale(0.42) rotate(-8deg); }
    20% { opacity: 0.82; }
    55% { opacity: 0.62; transform: translate(-50%, -65%) scale(0.92) rotate(5deg); }
    100% { opacity: 0; transform: translate(-45%, -105%) scale(1.35) rotate(14deg); }
}

/* Static Voltage: grote SVG-bliksemaders als een stormaura rondom het character. */
.static-lightning-aura {
    position: absolute;
    inset: -6% -16% -5%;
    pointer-events: none;
}

.static-lightning-aura::before {
    content: '';
    position: absolute;
    inset: 8% 12% 7%;
    z-index: 0;
    border-radius: 48%;
    opacity: 0.58;
    background:
        radial-gradient(ellipse at center, rgba(92, 94, 102, 0.3) 0 24%, rgba(45, 46, 53, 0.42) 48%, rgba(103, 25, 26, 0.24) 62%, transparent 76%);
    filter: blur(12px);
    animation: staticStormCloudCore 4.8s infinite alternate ease-in-out;
}

.static-storm-cloud {
    position: absolute;
    left: var(--effect-x);
    top: var(--effect-y);
    z-index: 1;
    width: 41%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle at 39% 61%, rgba(229, 62, 47, 0.38) 0 10%, rgba(111, 30, 32, 0.34) 28%, transparent 58%),
        radial-gradient(circle at 63% 40%, rgba(160, 164, 173, 0.72) 0 25%, rgba(72, 74, 82, 0.8) 51%, transparent 81%),
        radial-gradient(circle at 47% 54%, rgba(27, 28, 34, 0.84), transparent 82%);
    filter: blur(7.5px) drop-shadow(0 0 9px rgba(255, 52, 38, 0.25));
    animation: staticStormCloudBillow 4.1s infinite ease-in-out;
    animation-delay: calc(var(--effect-i) * -0.31s);
}

.static-lightning-aura__svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.aura-lightning-strike {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    mix-blend-mode: screen;
    will-change: opacity, transform, filter;
    animation: staticAuraLightningStrike 3.1s infinite steps(1, end);
    animation-delay: calc(var(--effect-i) * -0.49s);
}

.aura-bolt-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Dezelfde gelaagde opbouw als de city-bliksem: brede kleurblur en een felle kern. */
.aura-bolt-halo-red {
    stroke: #ff2f16;
    stroke-width: 8px;
    opacity: 0.46;
    filter: blur(3.6px);
    transform: translate(-1.1px, 0.6px);
}

.aura-bolt-halo-blue {
    stroke: #276dff;
    stroke-width: 6px;
    opacity: 0.5;
    filter: blur(2.8px);
    transform: translate(1.1px, -0.6px);
}

.aura-bolt-ember {
    stroke: #ff8a18;
    stroke-width: 3.4px;
    opacity: 0.9;
    filter: blur(1px);
}

.aura-bolt-core {
    stroke: #fffbea;
    stroke-width: 1.25px;
    opacity: 1;
    filter:
        drop-shadow(0 0 2px #ffffff)
        drop-shadow(0 0 5px rgba(255, 119, 22, 0.95))
        drop-shadow(0 0 8px rgba(40, 112, 255, 0.92));
}

.aura-bolt-path--branch.aura-bolt-halo-red { stroke-width: 5px; }
.aura-bolt-path--branch.aura-bolt-halo-blue { stroke-width: 3.8px; }
.aura-bolt-path--branch.aura-bolt-ember { stroke-width: 2.3px; }
.aura-bolt-path--branch.aura-bolt-core { stroke-width: 0.9px; }

@keyframes staticStormCloudCore {
    from { opacity: 0.42; transform: scale(0.96) rotate(-1deg); }
    to { opacity: 0.68; transform: scale(1.035) rotate(1.5deg); }
}

@keyframes staticStormCloudBillow {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.8) rotate(-9deg);
    }
    28% {
        opacity: 0.8;
        transform: translate(-52%, -53%) scale(1.03) rotate(4deg);
    }
    58% {
        opacity: 0.58;
        transform: translate(-47%, -57%) scale(0.95) rotate(-3deg);
    }
    82% {
        opacity: 0.72;
        transform: translate(-51%, -50%) scale(1.08) rotate(7deg);
    }
    100% {
        opacity: 0.42;
        transform: translate(-48%, -55%) scale(0.84) rotate(-7deg);
    }
}

@keyframes staticAuraLightningStrike {
    0%, 7% {
        opacity: 0;
        transform: scale(0.985);
        filter: brightness(0.78) saturate(1.2);
    }
    8% {
        opacity: 1;
        transform: scale(1.01);
        filter: brightness(1.45) saturate(1.45);
    }
    10% { opacity: 0.12; }
    12%, 17% {
        opacity: 0.96;
        filter: brightness(1.25) saturate(1.55);
    }
    22%, 44% { opacity: 0; }
    45% {
        opacity: 0.88;
        transform: scaleX(0.99) scaleY(1.015);
        filter: brightness(1.36) saturate(1.5);
    }
    47% { opacity: 0.1; }
    49%, 54% { opacity: 0.92; }
    60%, 77% { opacity: 0; }
    78% {
        opacity: 0.76;
        transform: scaleX(1.012) scaleY(0.99);
        filter: brightness(1.3) saturate(1.5);
    }
    80% { opacity: 0.1; }
    82%, 85% { opacity: 0.84; }
    89%, 100% { opacity: 0; }
}

/* Geanimeerde accessory-previews voor shop en inventory. */
.accessory-card-preview-frame {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.accessory-card-preview-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    transform-origin: center;
    transition: filter 180ms ease;
}

.accessory-card-preview-frame:hover .accessory-card-preview-media {
    filter: brightness(1.12) saturate(1.08);
}

/* Groot hovervoorbeeld, gelijk aan het 360px-previewvenster op de Donator Page. */
.accessory-large-preview-overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 30000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.accessory-large-preview-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: min(360px, calc(100vw - 32px));
    height: min(360px, calc(100vh - 32px));
    overflow: hidden;
    box-sizing: border-box;
    border: 3px solid rgba(125, 211, 252, 0.85);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 0 40px rgba(125, 211, 252, 0.65);
}

.accessory-large-preview-frame .accessory-large-preview-media {
    flex: none;
    transform: scale(3.55);
    filter: none;
    transition: none;
    will-change: auto;
}

.accessory-large-preview-frame .accessory-large-preview-media.accessory-card-preview-media--cigarette {
    transform: scale(2.75);
}

.accessory-large-preview-frame .accessory-card-preview-media--cigarette .accessory-card-preview-effects {
    overflow: visible;
}

/* Sigaret-preview: ruimte rond de brandende punt zodat gloed en rook zichtbaar blijven. */
.accessory-card-preview-media--cigarette .accessory-card-preview-image {
    max-width: 68px;
    transform: translateX(-2px);
}

.accessory-card-preview-media--cigarette .sigaret-glow-point {
    top: 35px;
    right: 13px;
}

.accessory-card-preview-media--cigarette .sigaret-smoke {
    top: 31px;
    right: 12px;
    animation-name: cigarettePreviewSmoke;
}

@keyframes cigarettePreviewSmoke {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0.72;
    }
    50% {
        transform: translate(-3px, -10px) scale(1);
        opacity: 0.44;
    }
    100% {
        transform: translate(-7px, -23px) scale(1.45);
        opacity: 0;
    }
}

.accessory-card-preview-image {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
    transform-origin: center;
}

.accessory-card-preview-effects {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: 5px;
    pointer-events: none;
}

.accessory-card-preview-image--angel {
    animation: angelRingGlow 2s infinite ease-in-out;
}

.accessory-card-preview-image--blaster {
    animation: boxblasterPulse 0.6s infinite ease-in-out;
}

.accessory-card-preview-image--bag {
    animation: bagOfGoobsGlow 1.8s infinite ease-in-out;
}

.accessory-preview-angel-aura,
.accessory-preview-beer-cold-aura,
.accessory-preview-goob-haze {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    pointer-events: none;
}

.accessory-preview-angel-aura {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.72), inset 0 0 9px rgba(255, 255, 220, 0.4);
    animation: beerColdPulse 1.8s infinite ease-in-out;
}

.accessory-preview-beer-cold-aura {
    background: radial-gradient(circle, rgba(150, 220, 255, 0.32), transparent 67%);
    box-shadow: 0 0 11px rgba(120, 210, 255, 0.65);
    animation: beerColdPulse 2s infinite ease-in-out;
}

.accessory-preview-goob-haze {
    background: radial-gradient(circle, rgba(76, 255, 58, 0.36), transparent 68%);
    filter: blur(4px);
    animation: beerColdPulse 1.8s infinite ease-in-out;
}

.accessory-card-preview-effects .angel-star {
    top: 10%;
}

.accessory-card-preview-effects .music-note {
    font-size: 13px;
}

/* De drie effect-only accessoires tonen hun echte effect op een mini-character. */
.css-effect-accessory-preview {
    border-radius: 5px;
}

.css-effect-preview-stage {
    position: relative;
    display: block;
    width: 58px;
    height: 74px;
}

.css-effect-preview-character,
.css-effect-preview-layer {
    position: absolute;
    inset: 0;
    display: block;
}

.css-effect-preview-character {
    z-index: 1;
    background: url('character/man.png') center / contain no-repeat;
}

.css-effect-preview-layer {
    z-index: 0;
    overflow: visible;
}

.css-effect-preview--smoke .css-effect-preview-layer {
    z-index: 2;
}

.css-effect-preview--smoke .head-smoke-particle {
    filter: blur(1.7px);
}

.css-effect-preview--flame .fire-smoke-cloud {
    filter: blur(3px) drop-shadow(0 0 4px rgba(255, 74, 0, 0.55));
}

.css-effect-preview--static .static-storm-cloud {
    filter: blur(4px) drop-shadow(0 0 5px rgba(255, 52, 38, 0.25));
}


/* ==== ROOK WOLKJES EFFECT - DIKKER EN BREDER ==== */

/* Rook wolkjes - individuele wolken die opstijgen */
.smoke-cloud {
    position: absolute;
    bottom: 0;
    width: 120px;  /* Was 60px - NU 2x zo breed */
    height: 120px;  /* Was 60px - NU 2x zo hoog */
    background: radial-gradient(circle, rgba(140, 140, 140, 0.8) 0%, rgba(120, 120, 120, 0.5) 40%, transparent 70%);  /* Dikkere opacity */
    border-radius: 50%;
    filter: blur(25px);  /* Was 15px - NU dikker blur */
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

/* Verschillende rook wolken met verschillende posities en timings - start net boven rode balk */
@keyframes smokeCloud1 {
    0% {
        bottom: 30px;  /* Boven de rode post-login balk (was -60px) */
        left: 5%;
        opacity: 0;
        transform: scale(1);
    }
    20% {
        opacity: 0.9;
    }
    100% {
        bottom: 350px;
        left: 10%;
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes smokeCloud2 {
    0% {
        bottom: 30px;
        left: 20%;
        opacity: 0;
        transform: scale(1.1);
    }
    25% {
        opacity: 1;
    }
    100% {
        bottom: 330px;
        left: 18%;
        opacity: 0;
        transform: scale(2.2);
    }
}

@keyframes smokeCloud3 {
    0% {
        bottom: 30px;
        left: 35%;
        opacity: 0;
        transform: scale(1.2);
    }
    30% {
        opacity: 0.85;
    }
    100% {
        bottom: 370px;
        left: 40%;
        opacity: 0;
        transform: scale(2.1);
    }
}

@keyframes smokeCloud4 {
    0% {
        bottom: 30px;
        left: 50%;
        opacity: 0;
        transform: scale(1);
    }
    22% {
        opacity: 0.95;
    }
    100% {
        bottom: 340px;
        left: 55%;
        opacity: 0;
        transform: scale(2.3);
    }
}

@keyframes smokeCloud5 {
    0% {
        bottom: 30px;
        left: 65%;
        opacity: 0;
        transform: scale(1.15);
    }
    28% {
        opacity: 0.88;
    }
    100% {
        bottom: 360px;
        left: 68%;
        opacity: 0;
        transform: scale(2.15);
    }
}

@keyframes smokeCloud6 {
    0% {
        bottom: 30px;
        left: 80%;
        opacity: 0;
        transform: scale(1.05);
    }
    24% {
        opacity: 0.92;
    }
    100% {
        bottom: 345px;
        left: 83%;
        opacity: 0;
        transform: scale(2.25);
    }
}

@keyframes smokeCloud7 {
    0% {
        bottom: 30px;
        left: 12%;
        opacity: 0;
        transform: scale(0.95);
    }
    26% {
        opacity: 0.87;
    }
    100% {
        bottom: 355px;
        left: 15%;
        opacity: 0;
        transform: scale(2.05);
    }
}

@keyframes smokeCloud8 {
    0% {
        bottom: 30px;
        left: 42%;
        opacity: 0;
        transform: scale(1.08);
    }
    23% {
        opacity: 0.93;
    }
    100% {
        bottom: 365px;
        left: 45%;
        opacity: 0;
        transform: scale(2.18);
    }
}

@keyframes smokeCloud9 {
    0% {
        bottom: 30px;
        left: 58%;
        opacity: 0;
        transform: scale(1.12);
    }
    27% {
        opacity: 0.9;
    }
    100% {
        bottom: 335px;
        left: 60%;
        opacity: 0;
        transform: scale(2.12);
    }
}

@keyframes smokeCloud10 {
    0% {
        bottom: 30px;
        left: 73%;
        opacity: 0;
        transform: scale(1.03);
    }
    25% {
        opacity: 0.94;
    }
    100% {
        bottom: 350px;
        left: 75%;
        opacity: 0;
        transform: scale(2.08);
    }
}

/* ==== RODE ROOK WOLKJES ==== */
.smoke-cloud-red {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(200, 50, 50, 0.7) 0%, rgba(180, 40, 40, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

/* Rode wolken animaties */
@keyframes smokeCloudRed1 {
    0% {
        bottom: 30px;
        left: 8%;
        opacity: 0;
        transform: scale(0.9);
    }
    22% {
        opacity: 0.8;
    }
    100% {
        bottom: 340px;
        left: 12%;
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes smokeCloudRed2 {
    0% {
        bottom: 30px;
        left: 28%;
        opacity: 0;
        transform: scale(1);
    }
    24% {
        opacity: 0.85;
    }
    100% {
        bottom: 360px;
        left: 32%;
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes smokeCloudRed3 {
    0% {
        bottom: 30px;
        left: 48%;
        opacity: 0;
        transform: scale(0.95);
    }
    26% {
        opacity: 0.82;
    }
    100% {
        bottom: 350px;
        left: 52%;
        opacity: 0;
        transform: scale(1.95);
    }
}

@keyframes smokeCloudRed4 {
    0% {
        bottom: 30px;
        left: 68%;
        opacity: 0;
        transform: scale(1.05);
    }
    23% {
        opacity: 0.87;
    }
    100% {
        bottom: 345px;
        left: 72%;
        opacity: 0;
        transform: scale(2.05);
    }
}

@keyframes smokeCloudRed5 {
    0% {
        bottom: 30px;
        left: 88%;
        opacity: 0;
        transform: scale(0.98);
    }
    25% {
        opacity: 0.84;
    }
    100% {
        bottom: 355px;
        left: 90%;
        opacity: 0;
        transform: scale(1.98);
    }
}

/* ==== GROENE ROOK WOLKJES ==== */
.smoke-cloud-green {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(50, 200, 80, 0.7) 0%, rgba(40, 180, 70, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

/* Groene wolken animaties */
@keyframes smokeCloudGreen1 {
    0% {
        bottom: 30px;
        left: 15%;
        opacity: 0;
        transform: scale(1.02);
    }
    21% {
        opacity: 0.83;
    }
    100% {
        bottom: 365px;
        left: 18%;
        opacity: 0;
        transform: scale(2.02);
    }
}

@keyframes smokeCloudGreen2 {
    0% {
        bottom: 30px;
        left: 38%;
        opacity: 0;
        transform: scale(0.97);
    }
    27% {
        opacity: 0.88;
    }
    100% {
        bottom: 335px;
        left: 42%;
        opacity: 0;
        transform: scale(1.97);
    }
}

@keyframes smokeCloudGreen3 {
    0% {
        bottom: 30px;
        left: 55%;
        opacity: 0;
        transform: scale(1.08);
    }
    24% {
        opacity: 0.86;
    }
    100% {
        bottom: 358px;
        left: 58%;
        opacity: 0;
        transform: scale(2.08);
    }
}

@keyframes smokeCloudGreen4 {
    0% {
        bottom: 30px;
        left: 75%;
        opacity: 0;
        transform: scale(0.93);
    }
    28% {
        opacity: 0.81;
    }
    100% {
        bottom: 342px;
        left: 78%;
        opacity: 0;
        transform: scale(1.93);
    }
}

@keyframes smokeCloudGreen5 {
    0% {
        bottom: 30px;
        left: 22%;
        opacity: 0;
        transform: scale(1.04);
    }
    23% {
        opacity: 0.89;
    }
    100% {
        bottom: 348px;
        left: 25%;
        opacity: 0;
        transform: scale(2.04);
    }
}

@keyframes platinumShimmer {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 40px rgba(230, 230, 250, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.1);
        border-color: rgba(230, 230, 250, 0.8);
    }
    33% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 50px rgba(230, 230, 250, 0.6), inset 0 0 25px rgba(255, 215, 0, 0.15);
        border-color: rgba(255, 215, 0, 0.9);
    }
    66% {
        box-shadow: 0 0 35px rgba(230, 230, 250, 0.9), 0 0 60px rgba(255, 215, 0, 0.5), inset 0 0 30px rgba(230, 230, 250, 0.2);
        border-color: rgba(230, 230, 250, 1);
    }
}

@keyframes platinumImageGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 25px rgba(230, 230, 250, 0.5)) brightness(1.05);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(230, 230, 250, 0.9)) drop-shadow(0 0 35px rgba(255, 215, 0, 0.6)) brightness(1.1);
    }
}

@keyframes platinumTextGlow {
    0%, 100% {
        color: #ffd700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(230, 230, 250, 0.4);
    }
    50% {
        color: #e6e6fa;
        text-shadow: 0 0 15px rgba(230, 230, 250, 0.9), 0 0 25px rgba(255, 215, 0, 0.6);
    }
}

@keyframes redGreenBadgeGlow {
    0%, 100% {
        background: rgba(255, 0, 0, 0.8);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.9);
        text-shadow: 0 0 5px rgba(255, 0, 0, 1);
    }
    50% {
        background: rgba(0, 255, 0, 0.8);
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.9);
        text-shadow: 0 0 5px rgba(0, 255, 0, 1);
    }
}

/* Fast-Forward Clock Animations - Time moves quickly in GoobVille! */

/* Second hand - spins continuously and smoothly (1 full rotation per 2 seconds) */
@keyframes chaosSecondHand {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* Minute hand - follows naturally (1 full rotation per 2 minutes = 120 seconds) */
@keyframes chaosMinuteHand {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* Hour hand - moves slowly but visibly (1 full rotation per 24 minutes = 1440 seconds) */
@keyframes chaosHourHand {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* Optional: Subtle pulse effect for the clock border */
@keyframes clockGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(52, 152, 219, 0.6),
            inset 0 0 15px rgba(52, 152, 219, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(52, 152, 219, 0.9),
            inset 0 0 20px rgba(52, 152, 219, 0.5);
    }
}

#persistentWeaponDisplay:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(139, 0, 0, 0.4);
    border-color: rgba(139, 0, 0, 0.8);
}

#persistentWeaponDisplay:active {
    transform: scale(0.98);
}

/* Style scrollbar for inventory menu, clothing menu and background menu */
#inventoryMenu .hide-scrollbar::-webkit-scrollbar,
#clothingSelectionMenu .hide-scrollbar::-webkit-scrollbar,
#backgroundSelectionMenu .hide-scrollbar::-webkit-scrollbar {
    width: 12px;
}

#inventoryMenu .hide-scrollbar::-webkit-scrollbar-track,
#clothingSelectionMenu .hide-scrollbar::-webkit-scrollbar-track,
#backgroundSelectionMenu .hide-scrollbar::-webkit-scrollbar-track {
    background: rgba(40, 40, 40, 1);
    border-radius: 10px;
}

#inventoryMenu .hide-scrollbar::-webkit-scrollbar-thumb,
#clothingSelectionMenu .hide-scrollbar::-webkit-scrollbar-thumb,
#backgroundSelectionMenu .hide-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #666, #555);
    border-radius: 10px;
    border: 2px solid rgba(40, 40, 40, 1);
}

#inventoryMenu .hide-scrollbar::-webkit-scrollbar-thumb:hover,
#clothingSelectionMenu .hide-scrollbar::-webkit-scrollbar-thumb:hover,
#backgroundSelectionMenu .hide-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #777, #666);
}

/* Firefox scrollbar styling */
#inventoryMenu .hide-scrollbar,
#clothingSelectionMenu .hide-scrollbar,
#backgroundSelectionMenu .hide-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #666 rgba(40, 40, 40, 1);
}

/* ===== STAGE 1: BROKEN CLOCK (0-10 hours) - ECHT KAPOT! ===== */
/* Vuur glow aan de bovenkant - over hele halve maan */
.clock-broken::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 35px;
    top: -18px;
    left: 0;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.6) 0%, 
        rgba(255, 100, 0, 0.4) 40%, 
        rgba(255, 50, 0, 0.2) 70%,
        transparent 100%);
    border-radius: 50%;
    animation: fireGlow 0.5s infinite alternate;
    filter: blur(8px);
    z-index: 4;
}

@keyframes fireGlow {
    0% { 
        opacity: 0.7;
        transform: scaleX(1) scaleY(1);
    }
    100% { 
        opacity: 1;
        transform: scaleX(1.05) scaleY(1.15);
    }
}

/* Hitte waas effect - over hele bovenkant */
.clock-broken::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 40px;
    top: -20px;
    left: 5%;
    background: linear-gradient(to top, 
        rgba(255, 150, 0, 0.15) 0%, 
        rgba(255, 100, 0, 0.08) 50%, 
        transparent 100%);
    animation: heatWave 0.8s infinite;
    filter: blur(5px);
    z-index: 3;
}

@keyframes heatWave {
    0%, 100% { 
        opacity: 0.6;
        transform: translateY(0) scaleX(1);
    }
    50% { 
        opacity: 0.4;
        transform: translateY(-3px) scaleX(1.03);
    }
}

/* Vlammen over de hele bovenkant - 10 vlammen verspreid */
.clock-broken .clock-mark-12::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 25px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.9) 0%, 
        rgba(255, 100, 0, 0.7) 30%, 
        rgba(255, 50, 0, 0.5) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker1 0.3s infinite, fireRise1 1.5s infinite;
    opacity: 0;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    filter: blur(2px);
    z-index: 5;
}

.clock-broken .clock-mark-12::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 22px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.85) 0%, 
        rgba(255, 100, 0, 0.65) 30%, 
        rgba(255, 50, 0, 0.45) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker2 0.35s infinite, fireRise2 1.6s infinite;
    opacity: 0;
    left: 30%;
    top: -12px;
    transform: translateX(-50%);
    filter: blur(2px);
    z-index: 5;
}

/* Extra vlammen via clock marks - verspreid over bovenkant */
.clock-broken .clock-mark-3::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 20px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.85) 0%, 
        rgba(255, 100, 0, 0.65) 30%, 
        rgba(255, 50, 0, 0.45) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker3 0.32s infinite, fireRise3 1.7s infinite;
    opacity: 0;
    right: -25px;
    top: 8px;
    filter: blur(2px);
    z-index: 5;
}

.clock-broken .clock-mark-3::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 18px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.8) 0%, 
        rgba(255, 100, 0, 0.6) 30%, 
        rgba(255, 50, 0, 0.4) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker4 0.38s infinite, fireRise4 1.8s infinite;
    opacity: 0;
    right: -15px;
    top: -5px;
    filter: blur(2px);
    z-index: 5;
}

.clock-broken .clock-mark-9::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 20px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.85) 0%, 
        rgba(255, 100, 0, 0.65) 30%, 
        rgba(255, 50, 0, 0.45) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker5 0.33s infinite, fireRise5 1.65s infinite;
    opacity: 0;
    left: -25px;
    top: 8px;
    filter: blur(2px);
    z-index: 5;
}

.clock-broken .clock-mark-9::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 18px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.8) 0%, 
        rgba(255, 100, 0, 0.6) 30%, 
        rgba(255, 50, 0, 0.4) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker6 0.36s infinite, fireRise6 1.75s infinite;
    opacity: 0;
    left: -15px;
    top: -5px;
    filter: blur(2px);
    z-index: 5;
}

/* Extra vlammen via spark en glitter containers */
.clock-broken ~ .spark-container::before {
    content: '';
    position: absolute;
    width: 13px;
    height: 19px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.8) 0%, 
        rgba(255, 100, 0, 0.6) 30%, 
        rgba(255, 50, 0, 0.4) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker7 0.34s infinite, fireRise7 1.55s infinite;
    opacity: 0;
    left: 35%;
    top: -8px;
    filter: blur(2px);
}

.clock-broken ~ .spark-container::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 19px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.8) 0%, 
        rgba(255, 100, 0, 0.6) 30%, 
        rgba(255, 50, 0, 0.4) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker8 0.37s infinite, fireRise8 1.62s infinite;
    opacity: 0;
    right: 35%;
    top: -8px;
    filter: blur(2px);
}

.clock-broken ~ .glitter-container::before {
    content: '';
    position: absolute;
    width: 11px;
    height: 17px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.75) 0%, 
        rgba(255, 100, 0, 0.55) 30%, 
        rgba(255, 50, 0, 0.35) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker9 0.31s infinite, fireRise9 1.68s infinite;
    opacity: 0;
    left: 20%;
    top: -10px;
    filter: blur(2px);
}

.clock-broken ~ .glitter-container::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 17px;
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 150, 0, 0.75) 0%, 
        rgba(255, 100, 0, 0.55) 30%, 
        rgba(255, 50, 0, 0.35) 60%, 
        transparent 100%);
    border-radius: 50% 50% 0 0;
    animation: fireFlicker10 0.39s infinite, fireRise10 1.72s infinite;
    opacity: 0;
    right: 20%;
    top: -10px;
    filter: blur(2px);
}

/* Vuur flikkering - 10 variaties voor natuurlijk effect */
@keyframes fireFlicker1 {
    0%, 100% { transform: translateX(-50%) scaleY(1) scaleX(1); }
    50% { transform: translateX(-50%) scaleY(1.1) scaleX(0.95); }
}

@keyframes fireFlicker2 {
    0%, 100% { transform: translateX(-50%) scaleY(1) scaleX(1); }
    50% { transform: translateX(-50%) scaleY(0.95) scaleX(1.05); }
}

@keyframes fireFlicker3 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.08) scaleX(0.92); }
}

@keyframes fireFlicker4 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(0.93) scaleX(1.07); }
}

@keyframes fireFlicker5 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.12) scaleX(0.88); }
}

@keyframes fireFlicker6 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(0.9) scaleX(1.1); }
}

@keyframes fireFlicker7 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.05) scaleX(0.95); }
}

@keyframes fireFlicker8 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(0.97) scaleX(1.03); }
}

@keyframes fireFlicker9 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.09) scaleX(0.91); }
}

@keyframes fireFlicker10 {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(0.94) scaleX(1.06); }
}

/* Vuur stijgt op - 10 variaties met verschillende timings */
@keyframes fireRise1 {
    0% { opacity: 0; transform: translateX(-50%) translateY(0) scaleY(0.5); }
    20% { opacity: 0.9; transform: translateX(-50%) translateY(-5px) scaleY(1); }
    60% { opacity: 0.6; transform: translateX(-50%) translateY(-20px) scaleY(1.4); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scaleY(1.8); }
}

@keyframes fireRise2 {
    0% { opacity: 0; transform: translateX(-50%) translateY(0) scaleY(0.5); }
    25% { opacity: 0.85; transform: translateX(-50%) translateY(-6px) scaleY(1); }
    65% { opacity: 0.55; transform: translateX(-50%) translateY(-22px) scaleY(1.5); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-42px) scaleY(1.9); }
}

@keyframes fireRise3 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    22% { opacity: 0.88; transform: translateY(-5px) scaleY(1); }
    62% { opacity: 0.58; transform: translateY(-21px) scaleY(1.45); }
    100% { opacity: 0; transform: translateY(-41px) scaleY(1.85); }
}

@keyframes fireRise4 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    24% { opacity: 0.82; transform: translateY(-6px) scaleY(1); }
    64% { opacity: 0.52; transform: translateY(-23px) scaleY(1.5); }
    100% { opacity: 0; transform: translateY(-43px) scaleY(1.9); }
}

@keyframes fireRise5 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    21% { opacity: 0.87; transform: translateY(-5px) scaleY(1); }
    61% { opacity: 0.57; transform: translateY(-20px) scaleY(1.42); }
    100% { opacity: 0; transform: translateY(-40px) scaleY(1.82); }
}

@keyframes fireRise6 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    23% { opacity: 0.84; transform: translateY(-6px) scaleY(1); }
    63% { opacity: 0.54; transform: translateY(-22px) scaleY(1.48); }
    100% { opacity: 0; transform: translateY(-42px) scaleY(1.88); }
}

@keyframes fireRise7 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    19% { opacity: 0.86; transform: translateY(-5px) scaleY(1); }
    59% { opacity: 0.56; transform: translateY(-19px) scaleY(1.4); }
    100% { opacity: 0; transform: translateY(-39px) scaleY(1.8); }
}

@keyframes fireRise8 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    26% { opacity: 0.83; transform: translateY(-6px) scaleY(1); }
    66% { opacity: 0.53; transform: translateY(-24px) scaleY(1.52); }
    100% { opacity: 0; transform: translateY(-44px) scaleY(1.92); }
}

@keyframes fireRise9 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    20% { opacity: 0.88; transform: translateY(-5px) scaleY(1); }
    60% { opacity: 0.58; transform: translateY(-21px) scaleY(1.44); }
    100% { opacity: 0; transform: translateY(-41px) scaleY(1.84); }
}

@keyframes fireRise10 {
    0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
    27% { opacity: 0.81; transform: translateY(-7px) scaleY(1); }
    67% { opacity: 0.51; transform: translateY(-25px) scaleY(1.54); }
    100% { opacity: 0; transform: translateY(-45px) scaleY(1.94); }
}

.clock-broken {
    border-color: #4a4a4a !important;
    background: radial-gradient(circle, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%) !important;
    animation: clockShake 1s infinite, clockGlitch 0.3s infinite !important;
    box-shadow: 
        0 0 15px rgba(100, 100, 100, 0.3),
        inset 0 0 10px rgba(50, 50, 50, 0.2) !important;
}

/* Haperige wijzers die WEL rondgaan maar constant stotteren */
.clock-broken .clock-hand-hour {
    animation: brokenHourHand 240s infinite linear !important;
    filter: brightness(0.7) !important;
}

.clock-broken .clock-hand-minute {
    animation: brokenMinuteHand 4s infinite linear !important;
    filter: brightness(0.7) !important;
}

.clock-broken .clock-hand-second {
    animation: brokenSecondHand 2s infinite linear !important;
    filter: brightness(0.7) !important;
}

.clock-broken .clock-center {
    background: #666 !important;
    animation: sparkFlash 0.2s infinite !important;
}

/* Klok schudt SUBTIEL - minder heftig */
@keyframes clockShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-0.5px, 0.5px) rotate(-0.3deg); }
    40% { transform: translate(0.5px, -0.5px) rotate(0.3deg); }
    60% { transform: translate(-0.5px, 0px) rotate(-0.2deg); }
    80% { transform: translate(0.5px, 0px) rotate(0.2deg); }
}

@keyframes clockGlitch {
    0%, 90% { opacity: 1; }
    91%, 93% { opacity: 0.6; }
    94%, 100% { opacity: 1; }
}

/* SUPER haperige uurwijzer - draait wel rond maar stottert constant */
@keyframes brokenHourHand {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    1% { transform: translateX(-50%) rotate(0deg); opacity: 0.2; }
    2% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    3% { transform: translateX(-50%) rotate(0deg); opacity: 0.5; }
    4% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    10% { transform: translateX(-50%) rotate(15deg); opacity: 1; }
    11% { transform: translateX(-50%) rotate(15deg); opacity: 0.3; }
    12% { transform: translateX(-50%) rotate(15deg); opacity: 1; }
    25% { transform: translateX(-50%) rotate(90deg); opacity: 1; }
    26% { transform: translateX(-50%) rotate(90deg); opacity: 0.2; }
    27% { transform: translateX(-50%) rotate(90deg); opacity: 0.8; }
    28% { transform: translateX(-50%) rotate(90deg); opacity: 1; }
    50% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    51% { transform: translateX(-50%) rotate(180deg); opacity: 0.4; }
    52% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    53% { transform: translateX(-50%) rotate(180deg); opacity: 0.6; }
    54% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    75% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    76% { transform: translateX(-50%) rotate(270deg); opacity: 0.3; }
    77% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    78% { transform: translateX(-50%) rotate(270deg); opacity: 0.5; }
    79% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    100% { transform: translateX(-50%) rotate(360deg); opacity: 1; }
}

/* SUPER haperige minuutwijzer */
@keyframes brokenMinuteHand {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    2% { transform: translateX(-50%) rotate(0deg); opacity: 0.2; }
    3% { transform: translateX(-50%) rotate(0deg); opacity: 0.8; }
    4% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    15% { transform: translateX(-50%) rotate(54deg); opacity: 1; }
    16% { transform: translateX(-50%) rotate(54deg); opacity: 0.3; }
    17% { transform: translateX(-50%) rotate(54deg); opacity: 1; }
    18% { transform: translateX(-50%) rotate(54deg); opacity: 0.5; }
    19% { transform: translateX(-50%) rotate(54deg); opacity: 1; }
    35% { transform: translateX(-50%) rotate(126deg); opacity: 1; }
    36% { transform: translateX(-50%) rotate(126deg); opacity: 0.2; }
    37% { transform: translateX(-50%) rotate(126deg); opacity: 0.7; }
    38% { transform: translateX(-50%) rotate(126deg); opacity: 1; }
    50% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    51% { transform: translateX(-50%) rotate(180deg); opacity: 0.4; }
    52% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    53% { transform: translateX(-50%) rotate(180deg); opacity: 0.6; }
    54% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    70% { transform: translateX(-50%) rotate(252deg); opacity: 1; }
    71% { transform: translateX(-50%) rotate(252deg); opacity: 0.3; }
    72% { transform: translateX(-50%) rotate(252deg); opacity: 1; }
    73% { transform: translateX(-50%) rotate(252deg); opacity: 0.5; }
    74% { transform: translateX(-50%) rotate(252deg); opacity: 1; }
    85% { transform: translateX(-50%) rotate(306deg); opacity: 1; }
    86% { transform: translateX(-50%) rotate(306deg); opacity: 0.2; }
    87% { transform: translateX(-50%) rotate(306deg); opacity: 0.8; }
    88% { transform: translateX(-50%) rotate(306deg); opacity: 1; }
    100% { transform: translateX(-50%) rotate(360deg); opacity: 1; }
}

/* SUPER haperige secondewijzer - stottert CONSTANT */
@keyframes brokenSecondHand {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    2% { transform: translateX(-50%) rotate(0deg); opacity: 0.2; }
    3% { transform: translateX(-50%) rotate(0deg); opacity: 0.6; }
    4% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    5% { transform: translateX(-50%) rotate(18deg); opacity: 1; }
    6% { transform: translateX(-50%) rotate(18deg); opacity: 0.3; }
    7% { transform: translateX(-50%) rotate(18deg); opacity: 1; }
    8% { transform: translateX(-50%) rotate(18deg); opacity: 0.5; }
    9% { transform: translateX(-50%) rotate(18deg); opacity: 1; }
    20% { transform: translateX(-50%) rotate(72deg); opacity: 1; }
    21% { transform: translateX(-50%) rotate(72deg); opacity: 0.2; }
    22% { transform: translateX(-50%) rotate(72deg); opacity: 0.7; }
    23% { transform: translateX(-50%) rotate(72deg); opacity: 1; }
    24% { transform: translateX(-50%) rotate(72deg); opacity: 0.4; }
    25% { transform: translateX(-50%) rotate(72deg); opacity: 1; }
    40% { transform: translateX(-50%) rotate(144deg); opacity: 1; }
    41% { transform: translateX(-50%) rotate(144deg); opacity: 0.3; }
    42% { transform: translateX(-50%) rotate(144deg); opacity: 1; }
    43% { transform: translateX(-50%) rotate(144deg); opacity: 0.5; }
    44% { transform: translateX(-50%) rotate(144deg); opacity: 1; }
    60% { transform: translateX(-50%) rotate(216deg); opacity: 1; }
    61% { transform: translateX(-50%) rotate(216deg); opacity: 0.2; }
    62% { transform: translateX(-50%) rotate(216deg); opacity: 0.8; }
    63% { transform: translateX(-50%) rotate(216deg); opacity: 1; }
    64% { transform: translateX(-50%) rotate(216deg); opacity: 0.4; }
    65% { transform: translateX(-50%) rotate(216deg); opacity: 1; }
    80% { transform: translateX(-50%) rotate(288deg); opacity: 1; }
    81% { transform: translateX(-50%) rotate(288deg); opacity: 0.3; }
    82% { transform: translateX(-50%) rotate(288deg); opacity: 1; }
    83% { transform: translateX(-50%) rotate(288deg); opacity: 0.6; }
    84% { transform: translateX(-50%) rotate(288deg); opacity: 1; }
    100% { transform: translateX(-50%) rotate(360deg); opacity: 1; }
}

/* Center dot flikkert HARD met oranje vonkjes effect */
@keyframes sparkFlash {
    0%, 60% { 
        box-shadow: 0 0 5px rgba(255, 150, 0, 0.6); 
        background: #666;
    }
    61%, 65% { 
        box-shadow: 
            0 0 20px rgba(255, 150, 0, 1), 
            0 0 30px rgba(255, 120, 0, 0.9),
            0 0 40px rgba(255, 100, 0, 0.7); 
        background: #ff9500;
    }
    66%, 100% { 
        box-shadow: 0 0 5px rgba(255, 150, 0, 0.6); 
        background: #666;
    }
}

/* VEEL MEER VONKJES! - Echte spark effects met CSS */
.clock-broken ~ .spark-container::before,
.clock-broken ~ .spark-container::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 8px;
    background: linear-gradient(to bottom, #ffff00, #ff9500, #ff6600);
    border-radius: 50% 50% 0 0;
    box-shadow: 
        0 0 8px #ff9500,
        0 0 12px #ff6600,
        0 0 16px #ff3300;
    animation: sparkFly1 1.2s infinite;
    opacity: 0;
}

.clock-broken ~ .spark-container::before {
    top: 20%;
    left: 10%;
    animation-delay: 0.2s;
}

.clock-broken ~ .spark-container::after {
    top: 60%;
    right: 15%;
    animation-delay: 0.6s;
}

/* Extra vonkjes via pseudo-elementen op de klok zelf */
.clock-broken::before,
.clock-broken::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 10px;
    background: linear-gradient(to bottom, #ffffff, #ffff00, #ff9500);
    border-radius: 50% 50% 0 0;
    box-shadow: 
        0 0 10px #ffff00,
        0 0 15px #ff9500,
        0 0 20px #ff6600,
        0 0 25px #ff3300;
    animation: sparkFly2 1.5s infinite;
    opacity: 0;
    z-index: 20;
}

.clock-broken::before {
    top: 5%;
    right: 20%;
    animation-delay: 0s;
}

.clock-broken::after {
    bottom: 10%;
    left: 25%;
    animation-delay: 0.9s;
}

/* Vonkjes animaties - verschillende richtingen met trail effect */
@keyframes sparkFly1 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.3) rotate(0deg); 
        filter: blur(0px);
    }
    10% { 
        opacity: 1; 
        transform: translate(3px, -3px) scale(1) rotate(45deg); 
        filter: blur(0px);
    }
    20% { 
        opacity: 0.9; 
        transform: translate(7px, -7px) scale(1.2) rotate(90deg); 
        filter: blur(0.5px);
    }
    30% { 
        opacity: 0.8; 
        transform: translate(12px, -12px) scale(1) rotate(135deg); 
        filter: blur(1px);
    }
    40% { 
        opacity: 0.6; 
        transform: translate(18px, -18px) scale(0.8) rotate(180deg); 
        filter: blur(1.5px);
    }
    50% { 
        opacity: 0.4; 
        transform: translate(24px, -24px) scale(0.6) rotate(225deg); 
        filter: blur(2px);
    }
    100% { 
        opacity: 0; 
        transform: translate(35px, -35px) scale(0.2) rotate(360deg); 
        filter: blur(3px);
    }
}

@keyframes sparkFly2 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.4) rotate(0deg); 
        filter: blur(0px);
    }
    15% { 
        opacity: 1; 
        transform: translate(-4px, -4px) scale(1.1) rotate(-45deg); 
        filter: blur(0px);
    }
    30% { 
        opacity: 0.9; 
        transform: translate(-9px, -9px) scale(1.3) rotate(-90deg); 
        filter: blur(0.5px);
    }
    45% { 
        opacity: 0.7; 
        transform: translate(-15px, -15px) scale(1) rotate(-135deg); 
        filter: blur(1px);
    }
    60% { 
        opacity: 0.5; 
        transform: translate(-22px, -22px) scale(0.7) rotate(-180deg); 
        filter: blur(1.5px);
    }
    100% { 
        opacity: 0; 
        transform: translate(-32px, -32px) scale(0.2) rotate(-270deg); 
        filter: blur(2.5px);
    }
}

/* Extra vonkjes via clock marks - kleine burst effects */
.clock-broken .clock-mark-12::before,
.clock-broken .clock-mark-3::before,
.clock-broken .clock-mark-6::before,
.clock-broken .clock-mark-9::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 6px;
    background: linear-gradient(to bottom, #ffff00, #ff9500);
    border-radius: 50%;
    box-shadow: 
        0 0 6px #ff9500,
        0 0 10px #ff6600;
    animation: markSparkBurst 1.2s infinite;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-broken .clock-mark-12::before { animation-delay: 0s; }
.clock-broken .clock-mark-3::before { animation-delay: 0.3s; }
.clock-broken .clock-mark-6::before { animation-delay: 0.6s; }
.clock-broken .clock-mark-9::before { animation-delay: 0.9s; }

@keyframes markSparkBurst {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.2);
    }
    20% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.5);
    }
    40% { 
        opacity: 0.8; 
        transform: translate(-50%, -80%) scale(1);
    }
    60% { 
        opacity: 0.5; 
        transform: translate(-50%, -120%) scale(0.7);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -150%) scale(0.3);
    }
}

/* Extra vonkjes via clock marks - de marks zelf flikkeren ook */
.clock-broken .clock-mark-12,
.clock-broken .clock-mark-3,
.clock-broken .clock-mark-6,
.clock-broken .clock-mark-9 {
    animation: markSpark 0.8s infinite !important;
    position: relative;
}

.clock-broken .clock-mark-12 { animation-delay: 0s !important; }
.clock-broken .clock-mark-3 { animation-delay: 0.2s !important; }
.clock-broken .clock-mark-6 { animation-delay: 0.4s !important; }
.clock-broken .clock-mark-9 { animation-delay: 0.6s !important; }

@keyframes markSpark {
    0%, 80% { 
        background: #8B0000;
        box-shadow: none;
    }
    81%, 85% { 
        background: linear-gradient(to bottom, #ffff00, #ff9500);
        box-shadow: 
            0 0 8px #ff9500,
            0 0 12px #ff6600;
    }
    86%, 100% { 
        background: #8B0000;
        box-shadow: none;
    }
}

/* ===== STAGE 2: RUSTY CLOCK (10-20 hours) - Kleine verbetering ===== */
.clock-rusty {
    border-color: #9e9e9e !important;
    background: radial-gradient(circle, rgba(60, 60, 60, 0.9) 0%, rgba(45, 45, 45, 0.95) 100%) !important;
    box-shadow: 
        0 0 15px rgba(120, 120, 120, 0.4), 
        inset 0 0 10px rgba(100, 100, 100, 0.2) !important;
    animation: rustyShake 2s infinite !important;
}

/* Wijzers werken beter maar nog niet perfect - minder hapering */
.clock-rusty .clock-hand-hour {
    animation: rustyHourHand 240s infinite linear !important;
    filter: brightness(0.8) !important;
}

.clock-rusty .clock-hand-minute {
    animation: rustyMinuteHand 4s infinite linear !important;
    filter: brightness(0.8) !important;
}

.clock-rusty .clock-hand-second {
    animation: rustySecondHand 2s infinite linear !important;
    filter: brightness(0.8) !important;
}

.clock-rusty .clock-center {
    background: #888 !important;
    box-shadow: 0 0 8px rgba(120, 120, 120, 0.6) !important;
}

/* Subtiele shake - minder erg dan broken */
@keyframes rustyShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-0.3px, 0.3px) rotate(-0.2deg); }
    50% { transform: translate(0.3px, -0.3px) rotate(0.2deg); }
    75% { transform: translate(-0.3px, 0px) rotate(-0.1deg); }
}

/* Uurwijzer - stottert alleen op 4 momenten (veel beter dan broken) */
@keyframes rustyHourHand {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    1% { transform: translateX(-50%) rotate(0deg); opacity: 0.5; }
    2% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    25% { transform: translateX(-50%) rotate(90deg); opacity: 1; }
    26% { transform: translateX(-50%) rotate(90deg); opacity: 0.6; }
    27% { transform: translateX(-50%) rotate(90deg); opacity: 1; }
    50% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    51% { transform: translateX(-50%) rotate(180deg); opacity: 0.5; }
    52% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    75% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    76% { transform: translateX(-50%) rotate(270deg); opacity: 0.6; }
    77% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    100% { transform: translateX(-50%) rotate(360deg); opacity: 1; }
}

/* Minuutwijzer - stottert minder vaak */
@keyframes rustyMinuteHand {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    1% { transform: translateX(-50%) rotate(0deg); opacity: 0.6; }
    2% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    25% { transform: translateX(-50%) rotate(90deg); opacity: 1; }
    26% { transform: translateX(-50%) rotate(90deg); opacity: 0.7; }
    27% { transform: translateX(-50%) rotate(90deg); opacity: 1; }
    50% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    51% { transform: translateX(-50%) rotate(180deg); opacity: 0.6; }
    52% { transform: translateX(-50%) rotate(180deg); opacity: 1; }
    75% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    76% { transform: translateX(-50%) rotate(270deg); opacity: 0.7; }
    77% { transform: translateX(-50%) rotate(270deg); opacity: 1; }
    100% { transform: translateX(-50%) rotate(360deg); opacity: 1; }
}

/* Secondewijzer - stottert af en toe maar niet constant */
@keyframes rustySecondHand {
    0% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    1% { transform: translateX(-50%) rotate(0deg); opacity: 0.6; }
    2% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    20% { transform: translateX(-50%) rotate(72deg); opacity: 1; }
    21% { transform: translateX(-50%) rotate(72deg); opacity: 0.7; }
    22% { transform: translateX(-50%) rotate(72deg); opacity: 1; }
    40% { transform: translateX(-50%) rotate(144deg); opacity: 1; }
    41% { transform: translateX(-50%) rotate(144deg); opacity: 0.6; }
    42% { transform: translateX(-50%) rotate(144deg); opacity: 1; }
    60% { transform: translateX(-50%) rotate(216deg); opacity: 1; }
    61% { transform: translateX(-50%) rotate(216deg); opacity: 0.7; }
    62% { transform: translateX(-50%) rotate(216deg); opacity: 1; }
    80% { transform: translateX(-50%) rotate(288deg); opacity: 1; }
    81% { transform: translateX(-50%) rotate(288deg); opacity: 0.6; }
    82% { transform: translateX(-50%) rotate(288deg); opacity: 1; }
    100% { transform: translateX(-50%) rotate(360deg); opacity: 1; }
}

/* VEEL MEER ROOK - 8 rookwolkjes totaal! */
.clock-rusty::before,
.clock-rusty::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, rgba(140, 140, 140, 0.5) 0%, rgba(100, 100, 100, 0.3) 50%, transparent 100%);
    border-radius: 50%;
    animation: smokeRise1 2.5s infinite;
    opacity: 0;
    z-index: 20;
}

.clock-rusty::before {
    top: 8%;
    left: 18%;
    animation-delay: 0s;
}

.clock-rusty::after {
    top: 12%;
    right: 22%;
    animation-delay: 1.2s;
}

/* Extra rook wolkjes via spark container */
.clock-rusty ~ .spark-container::before,
.clock-rusty ~ .spark-container::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, rgba(130, 130, 130, 0.6) 0%, rgba(90, 90, 90, 0.4) 50%, transparent 100%);
    border-radius: 50%;
    animation: smokeRise2 2.8s infinite;
    opacity: 0;
}

.clock-rusty ~ .spark-container::before {
    bottom: 18%;
    left: 12%;
    animation-delay: 0.6s;
}

.clock-rusty ~ .spark-container::after {
    bottom: 22%;
    right: 16%;
    animation-delay: 1.8s;
}

/* Nog meer rook via clock marks */
.clock-rusty .clock-mark-12::after,
.clock-rusty .clock-mark-3::after,
.clock-rusty .clock-mark-6::after,
.clock-rusty .clock-mark-9::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(120, 120, 120, 0.5) 0%, rgba(80, 80, 80, 0.3) 50%, transparent 100%);
    border-radius: 50%;
    animation: smokeRise3 3s infinite;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-rusty .clock-mark-12::after { animation-delay: 0.3s; }
.clock-rusty .clock-mark-3::after { animation-delay: 1s; }
.clock-rusty .clock-mark-6::after { animation-delay: 1.6s; }
.clock-rusty .clock-mark-9::after { animation-delay: 2.2s; }

/* Verschillende rook animaties voor variatie */
@keyframes smokeRise1 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.4);
        filter: blur(0px);
    }
    15% { 
        opacity: 0.7; 
        transform: translate(-3px, -12px) scale(0.9);
        filter: blur(1px);
    }
    30% { 
        opacity: 0.6; 
        transform: translate(4px, -25px) scale(1.3);
        filter: blur(2px);
    }
    50% { 
        opacity: 0.4; 
        transform: translate(-5px, -40px) scale(1.7);
        filter: blur(3px);
    }
    70% { 
        opacity: 0.2; 
        transform: translate(3px, -58px) scale(2.1);
        filter: blur(4px);
    }
    100% { 
        opacity: 0; 
        transform: translate(-4px, -80px) scale(2.5);
        filter: blur(5px);
    }
}

@keyframes smokeRise2 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.5);
        filter: blur(0px);
    }
    20% { 
        opacity: 0.6; 
        transform: translate(4px, -10px) scale(0.8);
        filter: blur(1px);
    }
    40% { 
        opacity: 0.5; 
        transform: translate(-3px, -22px) scale(1.2);
        filter: blur(2px);
    }
    60% { 
        opacity: 0.3; 
        transform: translate(5px, -38px) scale(1.6);
        filter: blur(3px);
    }
    80% { 
        opacity: 0.15; 
        transform: translate(-4px, -55px) scale(2);
        filter: blur(4px);
    }
    100% { 
        opacity: 0; 
        transform: translate(3px, -75px) scale(2.4);
        filter: blur(5px);
    }
}

@keyframes smokeRise3 {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.3);
        filter: blur(0px);
    }
    25% { 
        opacity: 0.5; 
        transform: translate(-50%, -65%) scale(0.7);
        filter: blur(1px);
    }
    50% { 
        opacity: 0.4; 
        transform: translate(-50%, -85%) scale(1.1);
        filter: blur(2px);
    }
    75% { 
        opacity: 0.2; 
        transform: translate(-50%, -110%) scale(1.5);
        filter: blur(3px);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -140%) scale(1.9);
        filter: blur(4px);
    }
}

/* Clock marks flikkeren soms (minder vaak dan broken) */
.clock-rusty .clock-mark-12,
.clock-rusty .clock-mark-3,
.clock-rusty .clock-mark-6,
.clock-rusty .clock-mark-9 {
    animation: rustyMarkFlicker 3s infinite !important;
    position: relative;
}

.clock-rusty .clock-mark-12 { animation-delay: 0s !important; }
.clock-rusty .clock-mark-3 { animation-delay: 0.75s !important; }
.clock-rusty .clock-mark-6 { animation-delay: 1.5s !important; }
.clock-rusty .clock-mark-9 { animation-delay: 2.25s !important; }

@keyframes rustyMarkFlicker {
    0%, 90% { 
        background: #8B0000;
        box-shadow: none;
    }
    91%, 94% { 
        background: #999;
        box-shadow: 0 0 5px rgba(150, 150, 150, 0.5);
    }
    95%, 100% { 
        background: #8B0000;
        box-shadow: none;
    }
}

/* ===== STAGE 3: DECENT CLOCK (20-35 hours) ===== */
.clock-decent {
    border: 3px solid #DAA520 !important;
    background: radial-gradient(circle, rgba(35, 35, 35, 0.9) 0%, rgba(25, 25, 25, 0.95) 100%) !important;
    box-shadow: 
        0 0 20px rgba(218, 165, 32, 0.8),
        0 0 30px rgba(218, 165, 32, 0.5),
        inset 0 0 15px rgba(218, 165, 32, 0.3) !important;
    animation: gentlePulse 3s infinite ease-in-out, goldenBorderGlow 2s infinite ease-in-out !important;
}

@keyframes gentlePulse {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(218, 165, 32, 0.8),
            0 0 30px rgba(218, 165, 32, 0.5),
            inset 0 0 15px rgba(218, 165, 32, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 25px rgba(218, 165, 32, 1),
            0 0 40px rgba(218, 165, 32, 0.7),
            inset 0 0 20px rgba(218, 165, 32, 0.4);
    }
}

@keyframes goldenBorderGlow {
    0%, 100% { 
        border-color: #DAA520;
        filter: drop-shadow(0 0 8px rgba(218, 165, 32, 0.6));
    }
    50% { 
        border-color: #FFD700;
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9));
    }
}

/* Glitters achter de minuutwijzer */
.clock-decent .clock-hand-minute::before,
.clock-decent .clock-hand-minute::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 200, 100, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 4px rgba(255, 215, 0, 0.8),
        0 0 8px rgba(255, 200, 100, 0.5);
    animation: glitterTrail 0.8s infinite;
    opacity: 0;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.clock-decent .clock-hand-minute::after {
    animation-delay: 0.4s;
    bottom: 18px;
}

/* Glitter trail animatie */
@keyframes glitterTrail {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.3);
        filter: blur(0px);
    }
    20% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1);
        filter: blur(0px);
    }
    40% { 
        opacity: 0.8; 
        transform: translateX(-50%) scale(1.2);
        filter: blur(0.5px);
    }
    60% { 
        opacity: 0.5; 
        transform: translateX(-50%) scale(1);
        filter: blur(1px);
    }
    80% { 
        opacity: 0.2; 
        transform: translateX(-50%) scale(0.7);
        filter: blur(1.5px);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.4);
        filter: blur(2px);
    }
}

/* Extra glitters via spark container - zweven rond de klok */
.clock-decent ~ .spark-container::before,
.clock-decent ~ .spark-container::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 215, 0, 1) 0%, rgba(255, 200, 100, 0.7) 40%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 6px rgba(255, 215, 0, 1),
        0 0 10px rgba(255, 200, 100, 0.6);
    animation: glitterFloat 2.5s infinite ease-in-out;
    opacity: 0;
}

.clock-decent ~ .spark-container::before {
    top: 30%;
    left: 15%;
    animation-delay: 0s;
}

.clock-decent ~ .spark-container::after {
    bottom: 35%;
    right: 20%;
    animation-delay: 1.25s;
}

/* Glitter zweef animatie */
@keyframes glitterFloat {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    15% { 
        opacity: 1; 
        transform: translate(3px, -3px) scale(1) rotate(45deg);
    }
    30% { 
        opacity: 0.9; 
        transform: translate(5px, -6px) scale(1.3) rotate(90deg);
    }
    50% { 
        opacity: 0.8; 
        transform: translate(6px, -4px) scale(1.1) rotate(180deg);
    }
    70% { 
        opacity: 0.5; 
        transform: translate(4px, -2px) scale(0.9) rotate(270deg);
    }
    85% { 
        opacity: 0.2; 
        transform: translate(2px, -1px) scale(0.6) rotate(315deg);
    }
    100% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.3) rotate(360deg);
    }
}

/* Sterretjes die vanaf de onderkant naar boven zweven */
.clock-decent::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 0, 0.8) 30%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 215, 0, 0.6);
    animation: starRise1 3s infinite ease-out;
    opacity: 0;
    bottom: 0;
    left: 20%;
    z-index: 3;
}

.clock-decent::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 0, 0.8) 30%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 215, 0, 0.6);
    animation: starRise2 3.5s infinite ease-out;
    opacity: 0;
    bottom: 0;
    right: 20%;
    z-index: 3;
}

/* Extra sterretjes via spark container */
.clock-decent ~ .spark-container .star1,
.clock-decent ~ .spark-container .star2,
.clock-decent ~ .spark-container .star3,
.clock-decent ~ .spark-container .star4 {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 0, 0.8) 30%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 5px rgba(255, 255, 255, 0.9),
        0 0 8px rgba(255, 215, 0, 0.6);
    opacity: 0;
    bottom: 0;
    z-index: 3;
}

/* Animaties voor verschillende sterretjes - zweven vanaf onderkant naar boven */
@keyframes starRise1 {
    0% { 
        opacity: 0; 
        bottom: 0;
        left: 20%;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    10% { 
        opacity: 1; 
        transform: translateY(-5px) scale(1) rotate(45deg);
    }
    30% { 
        opacity: 0.9; 
        transform: translateY(-20px) scale(1.1) rotate(90deg);
    }
    50% { 
        opacity: 0.7; 
        transform: translateY(-40px) scale(1) rotate(180deg);
    }
    70% { 
        opacity: 0.4; 
        transform: translateY(-60px) scale(0.8) rotate(270deg);
    }
    90% { 
        opacity: 0.1; 
        transform: translateY(-80px) scale(0.5) rotate(340deg);
    }
    100% { 
        opacity: 0; 
        bottom: 100px;
        transform: translateY(-100px) scale(0.2) rotate(360deg);
    }
}

@keyframes starRise2 {
    0% { 
        opacity: 0; 
        bottom: 0;
        right: 20%;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    10% { 
        opacity: 1; 
        transform: translateY(-5px) scale(1) rotate(-45deg);
    }
    30% { 
        opacity: 0.9; 
        transform: translateY(-25px) scale(1.1) rotate(-90deg);
    }
    50% { 
        opacity: 0.7; 
        transform: translateY(-45px) scale(1) rotate(-180deg);
    }
    70% { 
        opacity: 0.4; 
        transform: translateY(-65px) scale(0.8) rotate(-270deg);
    }
    90% { 
        opacity: 0.1; 
        transform: translateY(-85px) scale(0.5) rotate(-340deg);
    }
    100% { 
        opacity: 0; 
        bottom: 100px;
        transform: translateY(-100px) scale(0.2) rotate(-360deg);
    }
}

@keyframes starRise3 {
    0% { 
        opacity: 0; 
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(0) scale(0.4) rotate(0deg);
    }
    15% { 
        opacity: 1; 
        transform: translateX(-50%) translateY(-8px) scale(1) rotate(60deg);
    }
    35% { 
        opacity: 0.85; 
        transform: translateX(-50%) translateY(-30px) scale(1.2) rotate(120deg);
    }
    55% { 
        opacity: 0.6; 
        transform: translateX(-50%) translateY(-50px) scale(0.9) rotate(200deg);
    }
    75% { 
        opacity: 0.3; 
        transform: translateX(-50%) translateY(-70px) scale(0.7) rotate(280deg);
    }
    95% { 
        opacity: 0.05; 
        transform: translateX(-50%) translateY(-90px) scale(0.4) rotate(350deg);
    }
    100% { 
        opacity: 0; 
        bottom: 100px;
        transform: translateX(-50%) translateY(-100px) scale(0.2) rotate(360deg);
    }
}

@keyframes starRise4 {
    0% { 
        opacity: 0; 
        bottom: 0;
        left: 35%;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    12% { 
        opacity: 1; 
        transform: translateY(-6px) scale(1) rotate(50deg);
    }
    32% { 
        opacity: 0.88; 
        transform: translateY(-22px) scale(1.15) rotate(110deg);
    }
    52% { 
        opacity: 0.65; 
        transform: translateY(-42px) scale(0.95) rotate(190deg);
    }
    72% { 
        opacity: 0.35; 
        transform: translateY(-62px) scale(0.75) rotate(260deg);
    }
    92% { 
        opacity: 0.08; 
        transform: translateY(-82px) scale(0.45) rotate(330deg);
    }
    100% { 
        opacity: 0; 
        bottom: 100px;
        transform: translateY(-100px) scale(0.2) rotate(360deg);
    }
}

@keyframes starRise5 {
    0% { 
        opacity: 0; 
        bottom: 0;
        right: 35%;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    12% { 
        opacity: 1; 
        transform: translateY(-7px) scale(1) rotate(-50deg);
    }
    32% { 
        opacity: 0.88; 
        transform: translateY(-28px) scale(1.15) rotate(-110deg);
    }
    52% { 
        opacity: 0.65; 
        transform: translateY(-48px) scale(0.95) rotate(-190deg);
    }
    72% { 
        opacity: 0.35; 
        transform: translateY(-68px) scale(0.75) rotate(-260deg);
    }
    92% { 
        opacity: 0.08; 
        transform: translateY(-88px) scale(0.45) rotate(-330deg);
    }
    100% { 
        opacity: 0; 
        bottom: 100px;
        transform: translateY(-100px) scale(0.2) rotate(-360deg);
    }
}

/* Extra glitters via glitter container */
.clock-decent ~ .glitter-container::before,
.clock-decent ~ .glitter-container::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 200, 100, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 5px rgba(255, 215, 0, 0.9),
        0 0 9px rgba(255, 200, 100, 0.5);
    animation: glitterFloat 2.8s infinite ease-in-out;
    opacity: 0;
}

.clock-decent ~ .glitter-container::before {
    top: 20%;
    right: 15%;
    animation-delay: 0.7s;
}

.clock-decent ~ .glitter-container::after {
    bottom: 25%;
    left: 18%;
    animation-delay: 1.9s;
}

/* Clock marks krijgen gouden glow */
.clock-decent .clock-mark-12,
.clock-decent .clock-mark-3,
.clock-decent .clock-mark-6,
.clock-decent .clock-mark-9 {
    background: linear-gradient(to bottom, #DAA520, #B8860B) !important;
    box-shadow: 0 0 4px rgba(218, 165, 32, 0.7);
    animation: markGlow 2s infinite ease-in-out;
}

.clock-decent .clock-mark-12 { animation-delay: 0s; }
.clock-decent .clock-mark-3 { animation-delay: 0.5s; }
.clock-decent .clock-mark-6 { animation-delay: 1s; }
.clock-decent .clock-mark-9 { animation-delay: 1.5s; }

@keyframes markGlow {
    0%, 100% { 
        box-shadow: 0 0 4px rgba(218, 165, 32, 0.7);
    }
    50% { 
        box-shadow: 0 0 8px rgba(255, 215, 0, 1);
    }
}

/* Center dot krijgt ook gouden glow */
.clock-decent .clock-center {
    background: linear-gradient(135deg, #FFD700, #DAA520) !important;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 15px rgba(218, 165, 32, 0.5) !important;
}

/* Glitters achter de UURWIJZER */
.clock-decent .clock-hand-hour::before,
.clock-decent .clock-hand-hour::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 200, 100, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 4px rgba(255, 215, 0, 0.8),
        0 0 8px rgba(255, 200, 100, 0.5);
    animation: glitterTrail 0.8s infinite;
    opacity: 0;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.clock-decent .clock-hand-hour::after {
    animation-delay: 0.4s;
    bottom: 14px;
}

/* Glitters achter de MINUUTWIJZER */
.clock-decent .clock-hand-minute::before,
.clock-decent .clock-hand-minute::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 200, 100, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 4px rgba(255, 215, 0, 0.8),
        0 0 8px rgba(255, 200, 100, 0.5);
    animation: glitterTrail 0.8s infinite;
    opacity: 0;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.clock-decent .clock-hand-minute::after {
    animation-delay: 0.4s;
    bottom: 18px;
}

/* Glitters achter de SECONDEWIJZER */
.clock-decent .clock-hand-second::before,
.clock-decent .clock-hand-second::after {
    content: '';
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 200, 100, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 4px rgba(255, 215, 0, 0.8),
        0 0 8px rgba(255, 200, 100, 0.5);
    animation: glitterTrail 0.6s infinite;
    opacity: 0;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.clock-decent .clock-hand-second::after {
    animation-delay: 0.3s;
    bottom: 20px;
}

/* Glitter trail animatie */
@keyframes glitterTrail {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.3);
        filter: blur(0px);
    }
    20% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1);
        filter: blur(0px);
    }
    40% { 
        opacity: 0.8; 
        transform: translateX(-50%) scale(1.2);
        filter: blur(0.5px);
    }
    60% { 
        opacity: 0.5; 
        transform: translateX(-50%) scale(1);
        filter: blur(1px);
    }
    80% { 
        opacity: 0.2; 
        transform: translateX(-50%) scale(0.7);
        filter: blur(1.5px);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.4);
        filter: blur(2px);
    }
}

/* ===== STAGE 4: POLISHED CLOCK (35-50 hours) ===== */
.clock-polished {
    border-color: #DC143C !important;
    background: radial-gradient(circle, rgba(45, 15, 15, 0.95) 0%, rgba(30, 10, 10, 0.98) 100%) !important;
    box-shadow: 
        0 0 30px rgba(220, 20, 60, 0.8),
        0 0 50px rgba(220, 20, 60, 0.4),
        inset 0 0 20px rgba(220, 20, 60, 0.3) !important;
    animation: polishedGlow 2s infinite ease-in-out !important;
    overflow: visible !important;
}

.clock-polished .clock-center {
    background: #DC143C !important;
    box-shadow: 0 0 15px rgba(220, 20, 60, 1), 0 0 25px rgba(220, 20, 60, 0.6) !important;
    animation: centerPulse 2s infinite ease-in-out !important;
}

.clock-polished .clock-hand-hour,
.clock-polished .clock-hand-minute,
.clock-polished .clock-hand-second {
    filter: brightness(1.3) !important;
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.8) !important;
}

@keyframes polishedGlow {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(220, 20, 60, 0.8),
            0 0 50px rgba(220, 20, 60, 0.4),
            inset 0 0 20px rgba(220, 20, 60, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 40px rgba(220, 20, 60, 1),
            0 0 60px rgba(220, 20, 60, 0.6),
            inset 0 0 25px rgba(220, 20, 60, 0.5);
    }
}

@keyframes centerPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* BLOEDDRUPPELS - 8 druppels die van de onderkant vallen */
.clock-polished::before,
.clock-polished::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    background: linear-gradient(to bottom, rgba(220, 20, 60, 1) 0%, rgba(139, 0, 0, 0.9) 50%, rgba(100, 0, 0, 0.8) 100%);
    border-radius: 50% 50% 50% 0;
    box-shadow: 
        0 0 4px rgba(220, 20, 60, 0.8),
        inset -1px -1px 2px rgba(255, 100, 100, 0.5);
    animation: bloodDrip1 2.5s infinite;
    opacity: 0;
    z-index: 25;
}

.clock-polished::before {
    bottom: -2px;
    left: 25%;
    animation-delay: 0s;
}

.clock-polished::after {
    bottom: -2px;
    left: 75%;
    animation-delay: 1.25s;
}

/* Extra bloeddruppels via spark container */
.clock-polished ~ .spark-container::before,
.clock-polished ~ .spark-container::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    background: linear-gradient(to bottom, rgba(220, 20, 60, 1) 0%, rgba(139, 0, 0, 0.9) 50%, rgba(100, 0, 0, 0.8) 100%);
    border-radius: 50% 50% 50% 0;
    box-shadow: 
        0 0 4px rgba(220, 20, 60, 0.8),
        inset -1px -1px 2px rgba(255, 100, 100, 0.5);
    animation: bloodDrip2 2.8s infinite;
    opacity: 0;
}

.clock-polished ~ .spark-container::before {
    bottom: 0;
    left: 40%;
    animation-delay: 0.6s;
}

.clock-polished ~ .spark-container::after {
    bottom: 0;
    left: 60%;
    animation-delay: 1.9s;
}

/* Extra bloeddruppels via glitter container */
.clock-polished ~ .glitter-container::before,
.clock-polished ~ .glitter-container::after {
    content: '';
    position: absolute;
    width: 3.5px;
    height: 7px;
    background: linear-gradient(to bottom, rgba(220, 20, 60, 1) 0%, rgba(139, 0, 0, 0.9) 50%, rgba(100, 0, 0, 0.8) 100%);
    border-radius: 50% 50% 50% 0;
    box-shadow: 
        0 0 4px rgba(220, 20, 60, 0.8),
        inset -1px -1px 2px rgba(255, 100, 100, 0.5);
    animation: bloodDrip3 3s infinite;
    opacity: 0;
}

.clock-polished ~ .glitter-container::before {
    bottom: 0;
    left: 15%;
    animation-delay: 0.3s;
}

.clock-polished ~ .glitter-container::after {
    bottom: 0;
    left: 85%;
    animation-delay: 1.5s;
}

/* Extra bloeddruppels via clock marks */
.clock-polished .clock-mark-6::before,
.clock-polished .clock-mark-6::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 6px;
    background: linear-gradient(to bottom, rgba(220, 20, 60, 1) 0%, rgba(139, 0, 0, 0.9) 50%, rgba(100, 0, 0, 0.8) 100%);
    border-radius: 50% 50% 50% 0;
    box-shadow: 
        0 0 3px rgba(220, 20, 60, 0.8),
        inset -1px -1px 2px rgba(255, 100, 100, 0.5);
    animation: bloodDrip4 2.2s infinite;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
}

.clock-polished .clock-mark-6::before {
    bottom: -5px;
    animation-delay: 0.8s;
}

.clock-polished .clock-mark-6::after {
    bottom: -5px;
    animation-delay: 2s;
}

/* Bloeddruppel animaties - verschillende snelheden */
@keyframes bloodDrip1 {
    0% { 
        opacity: 0; 
        transform: translateY(0) scaleY(1);
    }
    10% { 
        opacity: 1; 
        transform: translateY(0) scaleY(1);
    }
    15% {
        transform: translateY(2px) scaleY(1.2);
    }
    20% { 
        transform: translateY(5px) scaleY(1.5);
    }
    40% { 
        opacity: 0.9;
        transform: translateY(20px) scaleY(2);
    }
    60% { 
        opacity: 0.7;
        transform: translateY(40px) scaleY(2.5);
    }
    80% { 
        opacity: 0.4;
        transform: translateY(65px) scaleY(3);
    }
    100% { 
        opacity: 0; 
        transform: translateY(90px) scaleY(3.5);
    }
}

@keyframes bloodDrip2 {
    0% { 
        opacity: 0; 
        transform: translateY(0) scaleY(1);
    }
    8% { 
        opacity: 1; 
        transform: translateY(0) scaleY(1);
    }
    12% {
        transform: translateY(1px) scaleY(1.1);
    }
    18% { 
        transform: translateY(4px) scaleY(1.4);
    }
    35% { 
        opacity: 0.9;
        transform: translateY(18px) scaleY(1.9);
    }
    55% { 
        opacity: 0.7;
        transform: translateY(38px) scaleY(2.4);
    }
    75% { 
        opacity: 0.4;
        transform: translateY(62px) scaleY(2.9);
    }
    100% { 
        opacity: 0; 
        transform: translateY(85px) scaleY(3.3);
    }
}

@keyframes bloodDrip3 {
    0% { 
        opacity: 0; 
        transform: translateY(0) scaleY(1);
    }
    12% { 
        opacity: 1; 
        transform: translateY(0) scaleY(1);
    }
    18% {
        transform: translateY(3px) scaleY(1.3);
    }
    25% { 
        transform: translateY(6px) scaleY(1.6);
    }
    45% { 
        opacity: 0.9;
        transform: translateY(22px) scaleY(2.1);
    }
    65% { 
        opacity: 0.7;
        transform: translateY(45px) scaleY(2.6);
    }
    85% { 
        opacity: 0.4;
        transform: translateY(70px) scaleY(3.1);
    }
    100% { 
        opacity: 0; 
        transform: translateY(95px) scaleY(3.6);
    }
}

@keyframes bloodDrip4 {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(0) scaleY(1);
    }
    15% { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0) scaleY(1);
    }
    20% {
        transform: translateX(-50%) translateY(2px) scaleY(1.2);
    }
    30% { 
        transform: translateX(-50%) translateY(8px) scaleY(1.7);
    }
    50% { 
        opacity: 0.8;
        transform: translateX(-50%) translateY(25px) scaleY(2.2);
    }
    70% { 
        opacity: 0.5;
        transform: translateX(-50%) translateY(50px) scaleY(2.8);
    }
    90% { 
        opacity: 0.2;
        transform: translateX(-50%) translateY(75px) scaleY(3.2);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(100px) scaleY(3.5);
    }
}

/* Clock marks krijgen rode glow */
.clock-polished .clock-mark-12,
.clock-polished .clock-mark-3,
.clock-polished .clock-mark-6,
.clock-polished .clock-mark-9 {
    background: linear-gradient(to bottom, #DC143C, #8B0000) !important;
    box-shadow: 0 0 5px rgba(220, 20, 60, 0.8);
    animation: bloodMarkGlow 2s infinite ease-in-out;
    position: relative;
}

.clock-polished .clock-mark-12 { animation-delay: 0s; }
.clock-polished .clock-mark-3 { animation-delay: 0.5s; }
.clock-polished .clock-mark-6 { animation-delay: 1s; }
.clock-polished .clock-mark-9 { animation-delay: 1.5s; }

@keyframes bloodMarkGlow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(220, 20, 60, 0.8);
    }
    50% { 
        box-shadow: 0 0 10px rgba(220, 20, 60, 1);
    }
}

/* ===== STAGE 5: LEGENDARY MYTHICAL CLOCK (50+ hours) - VOLLEDIG NIEUW MAGISCH ONTWERP ===== */
.clock-legendary {
    border: 3px solid transparent !important;
    background: radial-gradient(circle, rgba(15, 5, 30, 0.95) 0%, rgba(5, 0, 15, 0.98) 100%) !important;
    position: relative;
    overflow: visible !important;
    animation: mythicalPulse 3s infinite ease-in-out !important;
    box-shadow: 
        0 0 30px rgba(138, 43, 226, 0.8),
        0 0 50px rgba(255, 0, 255, 0.6),
        0 0 70px rgba(0, 200, 255, 0.4),
        inset 0 0 40px rgba(138, 43, 226, 0.3) !important;
}

/* Holografische roterende border */
.clock-legendary::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, 
        #FF00FF, #00FFFF, #FFD700, #FF1493, 
        #00FF00, #8A2BE2, #FF6347, #FF00FF);
    background-size: 400% 400%;
    animation: holographicBorder 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

@keyframes holographicBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Magische pulserende aura */
@keyframes mythicalPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 30px rgba(138, 43, 226, 0.8),
            0 0 50px rgba(255, 0, 255, 0.6),
            0 0 70px rgba(0, 200, 255, 0.4),
            inset 0 0 40px rgba(138, 43, 226, 0.3);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 
            0 0 40px rgba(138, 43, 226, 1),
            0 0 60px rgba(255, 0, 255, 0.8),
            0 0 90px rgba(0, 200, 255, 0.6),
            inset 0 0 50px rgba(138, 43, 226, 0.5);
    }
}

/* Centrum - Holografische kristal bol */
.clock-legendary .clock-center {
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(138, 43, 226, 0.8) 30%,
        rgba(255, 0, 255, 0.6) 70%,
        transparent 100%) !important;
    width: 10px !important;
    height: 10px !important;
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 1),
        0 0 30px rgba(138, 43, 226, 1),
        0 0 40px rgba(255, 0, 255, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.8) !important;
    animation: crystalGlow 2s infinite ease-in-out !important;
}

@keyframes crystalGlow {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 1),
            0 0 30px rgba(138, 43, 226, 1),
            0 0 40px rgba(255, 0, 255, 0.8);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 
            0 0 30px rgba(255, 255, 255, 1),
            0 0 50px rgba(138, 43, 226, 1),
            0 0 60px rgba(255, 0, 255, 1);
    }
}

/* Wijzers - Magische licht-zwepen */
.clock-legendary .clock-hand-hour,
.clock-legendary .clock-hand-minute,
.clock-legendary .clock-hand-second {
    background: linear-gradient(to top, 
        rgba(138, 43, 226, 1) 0%, 
        rgba(255, 0, 255, 0.9) 50%, 
        rgba(255, 255, 255, 1) 100%) !important;
    filter: brightness(1.8) drop-shadow(0 0 8px rgba(255, 0, 255, 1)) !important;
    box-shadow: 
        0 0 10px rgba(255, 0, 255, 1),
        0 0 20px rgba(138, 43, 226, 0.8) !important;
}

/* Markering punten - Zwevende kristallen */
.clock-legendary .clock-mark-12,
.clock-legendary .clock-mark-3,
.clock-legendary .clock-mark-6,
.clock-legendary .clock-mark-9 {
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(138, 43, 226, 0.8) 40%,
        transparent 100%) !important;
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 1),
        0 0 15px rgba(138, 43, 226, 1) !important;
    animation: floatingCrystals 3s infinite ease-in-out !important;
}

.clock-legendary .clock-mark-12 { animation-delay: 0s !important; }
.clock-legendary .clock-mark-3 { animation-delay: 0.75s !important; }
.clock-legendary .clock-mark-6 { animation-delay: 1.5s !important; }
.clock-legendary .clock-mark-9 { animation-delay: 2.25s !important; }

@keyframes floatingCrystals {
    0%, 100% { 
        transform: translateY(0) scale(1);
        box-shadow: 
            0 0 10px rgba(255, 255, 255, 1),
            0 0 15px rgba(138, 43, 226, 1);
    }
    50% { 
        transform: translateY(-2px) scale(1.3);
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 1),
            0 0 25px rgba(138, 43, 226, 1);
    }
}

/* ===== MAGISCHE ENERGIE RINGEN - 3 roterende ringen ===== */

/* Outer Ring 1 - Paars */
.clock-legendary .clock-mark-12::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border: 2px solid transparent;
    border-top-color: rgba(138, 43, 226, 0.8);
    border-right-color: rgba(138, 43, 226, 0.4);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: energyRing1 4s linear infinite;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
    z-index: -1;
}

@keyframes energyRing1 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Middle Ring 2 - Magenta */
.clock-legendary .clock-mark-3::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid transparent;
    border-left-color: rgba(255, 0, 255, 0.8);
    border-bottom-color: rgba(255, 0, 255, 0.4);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: energyRing2 5s linear infinite reverse;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
    z-index: -1;
}

@keyframes energyRing2 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Inner Ring 3 - Cyaan */
.clock-legendary .clock-mark-6::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    border: 2px solid transparent;
    border-top-color: rgba(0, 255, 255, 0.8);
    border-left-color: rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: energyRing3 6s linear infinite;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    z-index: -1;
}

@keyframes energyRing3 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== ZWEVENDE MAGISCHE DEELTJES - 12 particles rondom de klok ===== */

/* Particle 1 - Top */
.clock-legendary .clock-mark-9::before {
    content: '✦';
    position: absolute;
    color: rgba(255, 255, 255, 0.9);
    font-size: 8px;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    animation: floatingParticle1 4s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(138, 43, 226, 1);
    z-index: 10;
}

@keyframes floatingParticle1 {
    0%, 100% { 
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: translateX(-50%) translateY(-5px) scale(1.3);
        opacity: 1;
    }
}

/* Particle 2 - Top Right */
.clock-legendary .clock-mark-9::after {
    content: '✧';
    position: absolute;
    color: rgba(255, 0, 255, 0.9);
    font-size: 6px;
    right: -20px;
    top: -15px;
    animation: floatingParticle2 3.5s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(255, 0, 255, 1);
    z-index: 10;
}

@keyframes floatingParticle2 {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% { 
        transform: translate(3px, -3px) scale(1.4) rotate(180deg);
        opacity: 1;
    }
}

/* Particle 3 - Right */
.clock-legendary .clock-mark-12::after {
    content: '✦';
    position: absolute;
    color: rgba(0, 255, 255, 0.9);
    font-size: 7px;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    animation: floatingParticle3 4.5s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(0, 255, 255, 1);
    z-index: 10;
}

@keyframes floatingParticle3 {
    0%, 100% { 
        transform: translateY(-50%) translateX(0) scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-50%) translateX(4px) scale(1.5);
        opacity: 1;
    }
}

/* Particle 4 - Bottom Right */
.clock-legendary .clock-mark-3::after {
    content: '✧';
    position: absolute;
    color: rgba(255, 215, 0, 0.9);
    font-size: 6px;
    right: -18px;
    bottom: -15px;
    animation: floatingParticle4 3.8s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(255, 215, 0, 1);
    z-index: 10;
}

@keyframes floatingParticle4 {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% { 
        transform: translate(2px, 3px) scale(1.3) rotate(-180deg);
        opacity: 1;
    }
}

/* Particle 5 - Bottom */
.clock-legendary .clock-mark-6::after {
    content: '✦';
    position: absolute;
    color: rgba(138, 43, 226, 0.9);
    font-size: 8px;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    animation: floatingParticle5 4.2s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(138, 43, 226, 1);
    z-index: 10;
}

@keyframes floatingParticle5 {
    0%, 100% { 
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: translateX(-50%) translateY(5px) scale(1.4);
        opacity: 1;
    }
}

/* Particle 6 - Bottom Left */
.clock-legendary .clock-hand-hour::before {
    content: '✧';
    position: absolute;
    color: rgba(255, 105, 180, 0.9);
    font-size: 6px;
    left: -18px;
    bottom: -15px;
    animation: floatingParticle6 3.6s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(255, 105, 180, 1);
    z-index: 10;
}

@keyframes floatingParticle6 {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% { 
        transform: translate(-2px, 3px) scale(1.3) rotate(180deg);
        opacity: 1;
    }
}

/* Particle 7 - Left */
.clock-legendary .clock-hand-minute::before {
    content: '✦';
    position: absolute;
    color: rgba(0, 255, 127, 0.9);
    font-size: 7px;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    animation: floatingParticle7 4.3s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(0, 255, 127, 1);
    z-index: 10;
}

@keyframes floatingParticle7 {
    0%, 100% { 
        transform: translateY(-50%) translateX(0) scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-50%) translateX(-4px) scale(1.5);
        opacity: 1;
    }
}

/* Particle 8 - Top Left */
.clock-legendary .clock-hand-second::before {
    content: '✧';
    position: absolute;
    color: rgba(255, 99, 71, 0.9);
    font-size: 6px;
    left: -20px;
    top: -15px;
    animation: floatingParticle8 3.7s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(255, 99, 71, 1);
    z-index: 10;
}

@keyframes floatingParticle8 {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% { 
        transform: translate(-3px, -3px) scale(1.4) rotate(-180deg);
        opacity: 1;
    }
}

/* ===== MAGISCHE AURA GOLVEN - 3 expanding circles ===== */
.clock-legendary .clock-hand-hour::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(138, 43, 226, 0.6);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: auraWave1 3s infinite ease-out;
    z-index: -2;
}

@keyframes auraWave1 {
    0% { 
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.clock-legendary .clock-hand-minute::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255, 0, 255, 0.6);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: auraWave2 3s infinite ease-out;
    animation-delay: 1s;
    z-index: -2;
}

@keyframes auraWave2 {
    0% { 
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.clock-legendary .clock-hand-second::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: auraWave3 3s infinite ease-out;
    animation-delay: 2s;
    z-index: -2;
}

@keyframes auraWave3 {
    0% { 
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* ===== EXTRA: Magische glinstering over de hele klok ===== */
@keyframes shimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ===== SPECTACULAIR SMOKEY EFFECT VOOR CLOCK-RUSTY ===== */

/* Upgrade de klok zelf met dikke rook-sfeer */
.clock-rusty {
    border: 3px solid #696969 !important;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%) !important;
    box-shadow: 
        0 0 30px rgba(100, 100, 100, 0.6),
        0 0 50px rgba(150, 150, 150, 0.4),
        0 0 70px rgba(200, 200, 200, 0.2),
        inset 0 0 30px rgba(80, 80, 80, 0.4) !important;
    animation: rustyShake 1.2s infinite, smokyPulse 4s infinite ease-in-out !important;
    overflow: visible !important;
    position: relative;
    z-index: 5;
}

@keyframes smokyPulse {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(100, 100, 100, 0.6),
            0 0 50px rgba(150, 150, 150, 0.4),
            0 0 70px rgba(200, 200, 200, 0.2),
            inset 0 0 30px rgba(80, 80, 80, 0.4);
    }
    50% { 
        box-shadow: 
            0 0 40px rgba(100, 100, 100, 0.8),
            0 0 60px rgba(150, 150, 150, 0.6),
            0 0 80px rgba(200, 200, 200, 0.4),
            inset 0 0 40px rgba(80, 80, 80, 0.6);
    }
}

/* DIKKE ROOKWOLKEN - 6 grote wolken die uit de klok komen */

/* Rookwolk 1 - Links boven */
.clock-rusty .clock-hand-hour::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, 
        rgba(150, 150, 150, 0.8) 0%, 
        rgba(120, 120, 120, 0.6) 30%, 
        rgba(90, 90, 90, 0.4) 60%,
        transparent 100%);
    border-radius: 60% 40% 55% 45%;
    left: -20px;
    top: -10px;
    animation: bigSmoke1 5s infinite ease-in-out;
    filter: blur(8px);
    z-index: -3;
}

@keyframes bigSmoke1 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    20% { 
        opacity: 0.8; 
        transform: translate(-10px, -15px) scale(1) rotate(30deg);
    }
    50% { 
        opacity: 0.6; 
        transform: translate(-25px, -35px) scale(1.5) rotate(80deg);
    }
    80% { 
        opacity: 0.3; 
        transform: translate(-35px, -55px) scale(2) rotate(140deg);
    }
    100% { 
        opacity: 0; 
        transform: translate(-40px, -70px) scale(2.5) rotate(180deg);
    }
}

/* Rookwolk 2 - Rechts boven */
.clock-rusty .clock-hand-hour::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: radial-gradient(circle, 
        rgba(140, 140, 140, 0.75) 0%, 
        rgba(110, 110, 110, 0.55) 30%, 
        rgba(80, 80, 80, 0.35) 60%,
        transparent 100%);
    border-radius: 45% 55% 50% 50%;
    right: -15px;
    top: -5px;
    animation: bigSmoke2 6s infinite ease-in-out;
    animation-delay: 0.8s;
    filter: blur(10px);
    z-index: -3;
}

@keyframes bigSmoke2 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0.6) rotate(0deg);
    }
    25% { 
        opacity: 0.75; 
        transform: translate(12px, -18px) scale(1.1) rotate(-35deg);
    }
    55% { 
        opacity: 0.55; 
        transform: translate(28px, -40px) scale(1.6) rotate(-90deg);
    }
    85% { 
        opacity: 0.25; 
        transform: translate(38px, -60px) scale(2.1) rotate(-150deg);
    }
    100% { 
        opacity: 0; 
        transform: translate(45px, -75px) scale(2.6) rotate(-180deg);
    }
}

/* Rookwolk 3 - Boven centrum */
.clock-rusty .clock-hand-minute::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    background: radial-gradient(circle, 
        rgba(160, 160, 160, 0.85) 0%, 
        rgba(130, 130, 130, 0.65) 30%, 
        rgba(100, 100, 100, 0.45) 60%,
        transparent 100%);
    border-radius: 50% 60% 40% 50%;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    animation: bigSmoke3 5.5s infinite ease-in-out;
    animation-delay: 1.5s;
    filter: blur(12px);
    z-index: -3;
}

@keyframes bigSmoke3 {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(0) scale(0.4) rotate(0deg);
    }
    22% { 
        opacity: 0.85; 
        transform: translateX(-50%) translateY(-20px) scale(1.2) rotate(25deg);
    }
    52% { 
        opacity: 0.65; 
        transform: translateX(-50%) translateY(-45px) scale(1.8) rotate(70deg);
    }
    82% { 
        opacity: 0.3; 
        transform: translateX(-50%) translateY(-70px) scale(2.4) rotate(130deg);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(-90px) scale(3) rotate(180deg);
    }
}

/* Rookwolk 4 - Links */
.clock-rusty .clock-hand-minute::after {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    background: radial-gradient(circle, 
        rgba(145, 145, 145, 0.8) 0%, 
        rgba(115, 115, 115, 0.6) 30%, 
        rgba(85, 85, 85, 0.4) 60%,
        transparent 100%);
    border-radius: 55% 45% 60% 40%;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    animation: bigSmoke4 6.5s infinite ease-in-out;
    animation-delay: 2.2s;
    filter: blur(9px);
    z-index: -3;
}

@keyframes bigSmoke4 {
    0% { 
        opacity: 0; 
        transform: translateY(-50%) translateX(0) scale(0.55) rotate(0deg);
    }
    24% { 
        opacity: 0.8; 
        transform: translateY(-50%) translateX(-15px) scale(1.15) rotate(-30deg);
    }
    54% { 
        opacity: 0.6; 
        transform: translateY(-50%) translateX(-32px) scale(1.7) rotate(-85deg);
    }
    84% { 
        opacity: 0.28; 
        transform: translateY(-50%) translateX(-48px) scale(2.3) rotate(-145deg);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-50%) translateX(-60px) scale(2.8) rotate(-180deg);
    }
}

/* Rookwolk 5 - Rechts */
.clock-rusty .clock-hand-second::before {
    content: '';
    position: absolute;
    width: 42px;
    height: 42px;
    background: radial-gradient(circle, 
        rgba(155, 155, 155, 0.82) 0%, 
        rgba(125, 125, 125, 0.62) 30%, 
        rgba(95, 95, 95, 0.42) 60%,
        transparent 100%);
    border-radius: 48% 52% 55% 45%;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    animation: bigSmoke5 5.8s infinite ease-in-out;
    animation-delay: 3s;
    filter: blur(11px);
    z-index: -3;
}

@keyframes bigSmoke5 {
    0% { 
        opacity: 0; 
        transform: translateY(-50%) translateX(0) scale(0.5) rotate(0deg);
    }
    23% { 
        opacity: 0.82; 
        transform: translateY(-50%) translateX(16px) scale(1.18) rotate(32deg);
    }
    53% { 
        opacity: 0.62; 
        transform: translateY(-50%) translateX(35px) scale(1.75) rotate(88deg);
    }
    83% { 
        opacity: 0.3; 
        transform: translateY(-50%) translateX(50px) scale(2.35) rotate(148deg);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-50%) translateX(65px) scale(2.9) rotate(180deg);
    }
}

/* Rookwolk 6 - Onder centrum */
.clock-rusty .clock-hand-second::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, 
        rgba(150, 150, 150, 0.78) 0%, 
        rgba(120, 120, 120, 0.58) 30%, 
        rgba(90, 90, 90, 0.38) 60%,
        transparent 100%);
    border-radius: 52% 48% 50% 50%;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    animation: bigSmoke6 6.2s infinite ease-in-out;
    animation-delay: 1s;
    filter: blur(10px);
    z-index: -3;
}

@keyframes bigSmoke6 {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(0) scale(0.52) rotate(0deg);
    }
    21% { 
        opacity: 0.78; 
        transform: translateX(-50%) translateY(18px) scale(1.12) rotate(-28deg);
    }
    51% { 
        opacity: 0.58; 
        transform: translateX(-50%) translateY(40px) scale(1.68) rotate(-75deg);
    }
    81% { 
        opacity: 0.28; 
        transform: translateX(-50%) translateY(65px) scale(2.28) rotate(-135deg);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(85px) scale(2.85) rotate(-180deg);
    }
}

/* DRAAIENDE ROOK SPIRALEN rondom de klok */
.clock-rusty::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border: 3px solid transparent;
    border-top-color: rgba(150, 150, 150, 0.5);
    border-right-color: rgba(150, 150, 150, 0.3);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: smokeSpiral1 8s linear infinite;
    filter: blur(3px);
    z-index: -1;
}

@keyframes smokeSpiral1 {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.5;
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        opacity: 0.3;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        opacity: 0.5;
    }
}

.clock-rusty::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid transparent;
    border-left-color: rgba(140, 140, 140, 0.6);
    border-bottom-color: rgba(140, 140, 140, 0.4);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: smokeSpiral2 10s linear infinite reverse;
    filter: blur(4px);
    z-index: -1;
}

@keyframes smokeSpiral2 {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(1.15);
        opacity: 0.4;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        opacity: 0.6;
    }
}

/* MISTIGE AURA - expanderende rookgolven */
.clock-rusty .clock-center::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(130, 130, 130, 0.5);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: smokeWave1 4s infinite ease-out;
    filter: blur(2px);
    z-index: -2;
}

@keyframes smokeWave1 {
    0% { 
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.6;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.clock-rusty .clock-center::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(120, 120, 120, 0.6);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: smokeWave2 4s infinite ease-out;
    animation-delay: 2s;
    filter: blur(2px);
    z-index: -2;
}

@keyframes smokeWave2 {
    0% { 
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.6;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* Grijze gloed op de wijzers */
.clock-rusty .clock-hand-hour,
.clock-rusty .clock-hand-minute,
.clock-rusty .clock-hand-second {
    background: linear-gradient(to top, #6B6B6B, #999999) !important;
    filter: brightness(0.9) drop-shadow(0 0 8px rgba(150, 150, 150, 0.6)) !important;
    box-shadow: 0 0 10px rgba(150, 150, 150, 0.5) !important;
    position: relative;
    z-index: 3;
}

/* Grijze gloed op het centrum */
.clock-rusty .clock-center {
    background: radial-gradient(circle, #999999, #666666) !important;
    box-shadow: 
        0 0 15px rgba(150, 150, 150, 0.8),
        0 0 25px rgba(150, 150, 150, 0.5) !important;
    animation: smokeyCenterGlow 3s infinite ease-in-out !important;
    position: relative;
    z-index: 4;
}

@keyframes smokeyCenterGlow {
    0%, 100% { 
        box-shadow: 
            0 0 15px rgba(150, 150, 150, 0.8),
            0 0 25px rgba(150, 150, 150, 0.5);
    }
    50% { 
        box-shadow: 
            0 0 20px rgba(150, 150, 150, 1),
            0 0 35px rgba(150, 150, 150, 0.7);
    }
}

/* Zorg dat markeringen zichtbaar blijven */
.clock-rusty .clock-mark-12,
.clock-rusty .clock-mark-3,
.clock-rusty .clock-mark-6,
.clock-rusty .clock-mark-9 {
    position: relative;
    z-index: 2;
}

/* ===== PRACHTIG GLITTER VUURWERK VOOR CLOCK-DECENT (elke 6 seconden) ===== */

/* Langzaam opbouwende energie-bol in het centrum */
.clock-decent .clock-center::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 1) 0%, 
        rgba(255, 165, 0, 0.9) 40%, 
        rgba(255, 140, 0, 0.6) 70%,
        transparent 100%);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterBuildUp 6s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    z-index: 10;
}

@keyframes glitterBuildUp {
    0%, 10% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        box-shadow: 0 0 0 transparent;
    }
    15% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.3);
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    }
    20% { 
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.5);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    }
    25% { 
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.7);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
    30% { 
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.9);
        box-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }
    /* EXPLOSIE MOMENT! */
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 165, 0, 0.8);
    }
    36% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(3);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    }
    100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}

/* Glitter Particle 1 - Boven (Geel) */
.clock-decent .clock-mark-12::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 215, 0, 1), rgba(255, 215, 0, 0.6), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle1 6s infinite ease-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle1 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    35% { 
        opacity: 1;
        transform: translate(-50%, -5px) scale(1.3) rotate(45deg);
    }
    40% { 
        opacity: 0.9;
        transform: translate(-50%, -20px) scale(1.1) rotate(90deg);
    }
    50% { 
        opacity: 0.7;
        transform: translate(-50%, -40px) scale(0.9) rotate(180deg);
    }
    65% { 
        opacity: 0.4;
        transform: translate(-50%, -60px) scale(0.6) rotate(270deg);
    }
    80% { 
        opacity: 0.1;
        transform: translate(-50%, -75px) scale(0.3) rotate(360deg);
    }
    100% { 
        opacity: 0;
        transform: translate(-50%, -85px) scale(0);
    }
}

/* Glitter Particle 2 - Rechts-boven (Oranje) */
.clock-decent .clock-mark-12::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 165, 0, 1), rgba(255, 140, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle2 6s infinite ease-out;
    box-shadow: 0 0 8px rgba(255, 165, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle2 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4);
    }
    36% { 
        opacity: 1;
        transform: translate(-40%, -40%) scale(1.2) rotate(-30deg);
    }
    42% { 
        opacity: 0.9;
        transform: translate(-25px, -25px) scale(1) rotate(-60deg);
    }
    52% { 
        opacity: 0.7;
        transform: translate(-45px, -45px) scale(0.8) rotate(-120deg);
    }
    67% { 
        opacity: 0.4;
        transform: translate(-60px, -60px) scale(0.5) rotate(-180deg);
    }
    82% { 
        opacity: 0.1;
        transform: translate(-70px, -70px) scale(0.3) rotate(-240deg);
    }
    100% { 
        opacity: 0;
        transform: translate(-75px, -75px) scale(0);
    }
}

/* Glitter Particle 3 - Rechts (Geel-Oranje) */
.clock-decent .clock-mark-3::before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(255, 200, 0, 1), rgba(255, 165, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle3 6s infinite ease-out;
    box-shadow: 0 0 12px rgba(255, 200, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle3 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.6);
    }
    37% { 
        opacity: 1;
        transform: translate(-30%, -50%) scale(1.3) rotate(50deg);
    }
    44% { 
        opacity: 0.9;
        transform: translate(10px, -50%) scale(1.1) rotate(100deg);
    }
    54% { 
        opacity: 0.7;
        transform: translate(35px, -50%) scale(0.9) rotate(200deg);
    }
    69% { 
        opacity: 0.4;
        transform: translate(55px, -50%) scale(0.6) rotate(300deg);
    }
    84% { 
        opacity: 0.1;
        transform: translate(70px, -50%) scale(0.3) rotate(400deg);
    }
    100% { 
        opacity: 0;
        transform: translate(80px, -50%) scale(0);
    }
}

/* Glitter Particle 4 - Rechts-onder (Donker Oranje) */
.clock-decent .clock-mark-3::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 140, 0, 1), rgba(255, 120, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle4 6s infinite ease-out;
    box-shadow: 0 0 8px rgba(255, 140, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle4 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    38% { 
        opacity: 1;
        transform: translate(-40%, -60%) scale(1.1) rotate(-40deg);
    }
    46% { 
        opacity: 0.9;
        transform: translate(-25px, 15px) scale(0.95) rotate(-80deg);
    }
    56% { 
        opacity: 0.7;
        transform: translate(-45px, 40px) scale(0.75) rotate(-160deg);
    }
    71% { 
        opacity: 0.4;
        transform: translate(-60px, 60px) scale(0.5) rotate(-240deg);
    }
    86% { 
        opacity: 0.1;
        transform: translate(-70px, 75px) scale(0.3) rotate(-320deg);
    }
    100% { 
        opacity: 0;
        transform: translate(-75px, 85px) scale(0);
    }
}

/* Glitter Particle 5 - Onder (Geel) */
.clock-decent .clock-mark-6::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 215, 0, 1), rgba(255, 200, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle5 6s infinite ease-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle5 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    39% { 
        opacity: 1;
        transform: translate(-50%, -40%) scale(1.3) rotate(60deg);
    }
    48% { 
        opacity: 0.9;
        transform: translate(-50%, 10px) scale(1.1) rotate(120deg);
    }
    58% { 
        opacity: 0.7;
        transform: translate(-50%, 35px) scale(0.9) rotate(240deg);
    }
    73% { 
        opacity: 0.4;
        transform: translate(-50%, 60px) scale(0.6) rotate(360deg);
    }
    88% { 
        opacity: 0.1;
        transform: translate(-50%, 80px) scale(0.3) rotate(480deg);
    }
    100% { 
        opacity: 0;
        transform: translate(-50%, 95px) scale(0);
    }
}

/* Glitter Particle 6 - Links-onder (Oranje) */
.clock-decent .clock-mark-6::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 165, 0, 1), rgba(255, 140, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle6 6s infinite ease-out;
    box-shadow: 0 0 9px rgba(255, 165, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle6 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4);
    }
    40% { 
        opacity: 1;
        transform: translate(-60%, -60%) scale(1.2) rotate(45deg);
    }
    49% { 
        opacity: 0.9;
        transform: translate(15px, 15px) scale(1) rotate(90deg);
    }
    59% { 
        opacity: 0.7;
        transform: translate(40px, 40px) scale(0.8) rotate(180deg);
    }
    74% { 
        opacity: 0.4;
        transform: translate(60px, 60px) scale(0.55) rotate(270deg);
    }
    89% { 
        opacity: 0.1;
        transform: translate(75px, 75px) scale(0.3) rotate(360deg);
    }
    100% { 
        opacity: 0;
        transform: translate(85px, 85px) scale(0);
    }
}

/* Glitter Particle 7 - Links (Geel-Oranje) */
.clock-decent .clock-mark-9::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 200, 0, 1), rgba(255, 180, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle7 6s infinite ease-out;
    box-shadow: 0 0 11px rgba(255, 200, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle7 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    41% { 
        opacity: 1;
        transform: translate(-70%, -50%) scale(1.3) rotate(-50deg);
    }
    50% { 
        opacity: 0.9;
        transform: translate(-10px, -50%) scale(1.1) rotate(-100deg);
    }
    60% { 
        opacity: 0.7;
        transform: translate(-35px, -50%) scale(0.9) rotate(-200deg);
    }
    75% { 
        opacity: 0.4;
        transform: translate(-60px, -50%) scale(0.6) rotate(-300deg);
    }
    90% { 
        opacity: 0.1;
        transform: translate(-80px, -50%) scale(0.3) rotate(-400deg);
    }
    100% { 
        opacity: 0;
        transform: translate(-95px, -50%) scale(0);
    }
}

/* Glitter Particle 8 - Links-boven (Licht Oranje) */
.clock-decent .clock-mark-9::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 180, 0, 1), rgba(255, 160, 0, 0.7), transparent);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterParticle8 6s infinite ease-out;
    box-shadow: 0 0 8px rgba(255, 180, 0, 1);
    z-index: 11;
}

@keyframes glitterParticle8 {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4);
    }
    42% { 
        opacity: 1;
        transform: translate(-60%, -40%) scale(1.2) rotate(40deg);
    }
    51% { 
        opacity: 0.9;
        transform: translate(15px, -25px) scale(1) rotate(80deg);
    }
    61% { 
        opacity: 0.7;
        transform: translate(40px, -45px) scale(0.8) rotate(160deg);
    }
    76% { 
        opacity: 0.4;
        transform: translate(60px, -65px) scale(0.55) rotate(240deg);
    }
    91% { 
        opacity: 0.1;
        transform: translate(75px, -80px) scale(0.3) rotate(320deg);
    }
    100% { 
        opacity: 0;
        transform: translate(85px, -90px) scale(0);
    }
}

/* Expanderende glitter-ring */
.clock-decent .clock-center::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid transparent;
    border-top-color: rgba(255, 215, 0, 0.8);
    border-right-color: rgba(255, 165, 0, 0.6);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glitterRingExpand 6s infinite ease-out;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    z-index: 9;
}

@keyframes glitterRingExpand {
    0%, 32% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    33% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    }
    38% { 
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.5) rotate(90deg);
    }
    48% { 
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(3) rotate(180deg);
    }
    60% { 
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(4.5) rotate(270deg);
    }
    75% { 
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(6) rotate(360deg);
    }
    100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(7) rotate(450deg);
    }
}

/* Block Badge Glitter Effect - Voor Inventory en Market */
@keyframes blockBadgeGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)) brightness(1.2);
    }
}

@keyframes blockBadgeGlitter {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
    25% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 30px rgba(255, 215, 0, 0.2), 5px 5px 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), inset 0 0 40px rgba(255, 215, 0, 0.3), -5px -5px 10px rgba(255, 215, 0, 0.3);
    }
    75% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 30px rgba(255, 215, 0, 0.2), 5px -5px 10px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
}

/* Glitter particles effect voor Block Badges in inventory */
.block-badge-item::before,
.block-badge-item::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 100%);
    border-radius: 50%;
    animation: glitterFloat 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    box-shadow: 
        0 0 4px #ffd700,
        0 0 8px #ffd700,
        0 0 12px rgba(255, 215, 0, 0.5);
}

.block-badge-item::before {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.block-badge-item::after {
    top: 15%;
    right: 10%;
    animation-delay: 1.5s;
    width: 3px;
    height: 3px;
}

/* Extra particles voor meer effect */
.block-badge-item {
    position: relative;
}

.block-badge-item:hover::before,
.block-badge-item:hover::after {
    animation-duration: 2s;
}

/* Glitter particles effect voor Block Badges in market */
.block-badge-market-item::before,
.block-badge-market-item::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 100%);
    border-radius: 50%;
    animation: glitterFloat 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    box-shadow: 
        0 0 6px #ffd700,
        0 0 10px #ffd700,
        0 0 15px rgba(255, 215, 0, 0.6);
}

.block-badge-market-item::before {
    top: 20%;
    left: 5%;
    animation-delay: 0s;
}

.block-badge-market-item::after {
    top: 25%;
    left: 5%;
    animation-delay: 1.5s;
    width: 4px;
    height: 4px;
}

/* Verbeterde glitter float animatie */
@keyframes glitterFloat {
    0% {
        transform: translateY(0px) translateX(0px) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(-5px) translateX(2px) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-15px) translateX(-3px) scale(1.2);
    }
    50% {
        transform: translateY(-25px) translateX(5px) scale(1);
        opacity: 0.8;
    }
    70% {
        transform: translateY(-35px) translateX(-2px) scale(0.8);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-45px) translateX(3px) scale(0);
        opacity: 0;
    }
}

/* Extra sparkle effect met pseudo-element shimmer */
@keyframes shimmer {
    0%, 100% {
        opacity: 0;
        transform: rotate(0deg) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: rotate(180deg) scale(1);
    }
}

@keyframes customItemGlowPulse {
    0%, 100% {
        filter: var(--glow-filter-min);
    }
    50% {
        filter: var(--glow-filter-max);
    }
}

.factory-glow-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
}

.factory-glow-option {
    min-width: 58px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.35);
    color: #ccc;
    font-size: 0.75em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.factory-glow-option:hover {
    transform: translateY(-1px);
}

.factory-glow-option.active {
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

.factory-glow-option[data-glow="green"] { color: #00ff88; border-color: rgba(0, 255, 136, 0.35); }
.factory-glow-option[data-glow="gold"] { color: #ffd700; border-color: rgba(255, 215, 0, 0.35); }
.factory-glow-option[data-glow="red"] { color: #ff6666; border-color: rgba(255, 68, 68, 0.35); }
.factory-glow-option[data-glow="blue"] { color: #4da6ff; border-color: rgba(77, 166, 255, 0.35); }
.factory-glow-option[data-glow="purple"] { color: #b57bff; border-color: rgba(153, 50, 204, 0.35); }
.factory-glow-option[data-glow="cyan"] { color: #00ffff; border-color: rgba(0, 255, 255, 0.35); }
.factory-glow-option[data-glow="pink"] { color: #ff66cc; border-color: rgba(255, 102, 204, 0.35); }

.factory-preview-thumb.has-custom-glow {
    border-radius: 8px;
    padding: 6px;
}

/* 7th Day reward glow animation */
@keyframes seventhDayGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.9)) drop-shadow(0 0 20px rgba(0, 255, 136, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 136, 1)) drop-shadow(0 0 30px rgba(0, 255, 136, 0.8));
    }
}


/* TIER Items (Scavenging) - Fire/Flame Particle Effect */
.tier-item::before,
.tier-item::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 8px;
    background: radial-gradient(ellipse, #9932cc 0%, #b84de6 30%, #6a1b9a 60%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flameFloat 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    box-shadow: 
    0 0 6px #9932cc,
    0 0 10px #6a1b9a,
    0 0 15px rgba(153, 50, 204, 0.5);
    filter: blur(0.5px);
}

.tier-item::before {
    bottom: 5%;
    left: 15%;
    animation-delay: 0s;
}

.tier-item::after {
    bottom: 8%;
    right: 15%;
    animation-delay: 1.2s;
    width: 5px;
    height: 7px;
}

/* TIER Items in Market */
.tier-market-item::before,
.tier-market-item::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 9px;
    background: radial-gradient(ellipse, #9932cc 0%, #b84de6 30%, #6a1b9a 60%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flameFloat 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    box-shadow: 
    0 0 8px #9932cc,
    0 0 12px #6a1b9a,
    0 0 18px rgba(153, 50, 204, 0.6);
    filter: blur(0.5px);
}

.tier-market-item::before {
    top: 30%;
    left: 3%;
    animation-delay: 0s;
}

.tier-market-item::after {
    top: 50%;
    left: 3%;
    animation-delay: 1.2s;
    width: 6px;
    height: 8px;
}

/* Flame float animation - vlammen die omhoog bewegen */
@keyframes flameFloat {
    0% {
        transform: translateY(0px) translateX(0px) scale(0.8) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(-8px) translateX(2px) scale(1) rotate(5deg);
    }
    25% {
        opacity: 1;
        transform: translateY(-18px) translateX(-3px) scale(1.1) rotate(-5deg);
    }
    40% {
        transform: translateY(-28px) translateX(4px) scale(1) rotate(8deg);
        opacity: 0.9;
    }
    60% {
        transform: translateY(-40px) translateX(-2px) scale(0.9) rotate(-3deg);
        opacity: 0.6;
    }
    80% {
        transform: translateY(-50px) translateX(3px) scale(0.7) rotate(5deg);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-60px) translateX(0px) scale(0.4) rotate(0deg);
        opacity: 0;
    }
}

/* Glow effect voor TIER items */
@keyframes tierGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(153, 50, 204, 0.8)) drop-shadow(0 0 12px rgba(153, 50, 204, 0.6)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(184, 77, 230, 1)) drop-shadow(0 0 18px rgba(153, 50, 204, 0.8)) brightness(1.1);
    }
}

/* Mayor Task items - checkmark particle effect */
.mayor-task-item {
    overflow: visible !important;
}

@keyframes mayorCheckFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    12% {
        opacity: 1;
        transform: translateY(-4px) translateX(1px) scale(1);
    }
    40% {
        transform: translateY(-20px) translateX(-2px) scale(1.05);
        opacity: 0.95;
    }
    70% {
        transform: translateY(-38px) translateX(3px) scale(0.85);
        opacity: 0.45;
    }
    100% {
        transform: translateY(-58px) translateX(0) scale(0.35);
        opacity: 0;
    }
}

@keyframes mayorTaskGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(204, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(255, 68, 68, 0.55)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 68, 68, 1)) drop-shadow(0 0 20px rgba(204, 0, 0, 0.75)) brightness(1.08);
    }
}

@keyframes mayorAuraChipGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(125, 211, 252, 0.45), 0 0 14px rgba(56, 189, 248, 0.28);
        border-color: rgba(125, 211, 252, 0.65);
        text-shadow: 0 0 6px rgba(125, 211, 252, 0.55);
    }
    50% {
        box-shadow: 0 0 14px rgba(125, 211, 252, 0.85), 0 0 24px rgba(56, 189, 248, 0.5);
        border-color: rgba(125, 211, 252, 0.95);
        text-shadow: 0 0 10px rgba(125, 211, 252, 0.9);
    }
}

.mayor-completion-aura-chip {
    animation: mayorAuraChipGlow 2.2s ease-in-out infinite;
    color: #7dd3fc;
}

.mayor-completion-aura-chip span {
    text-shadow: 0 0 6px rgba(125, 211, 252, 0.55), 0 0 12px rgba(56, 189, 248, 0.4);
}

/* Ember particles (extra kleine vuur deeltjes) */
@keyframes emberFloat {
    0% {
        transform: translateY(0px) translateX(0px) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translateY(-10px) translateX(3px) scale(1);
    }
    50% {
        transform: translateY(-25px) translateX(-2px) scale(0.8);
        opacity: 0.8;
    }
    80% {
        transform: translateY(-40px) translateX(4px) scale(0.4);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-50px) translateX(0px) scale(0);
        opacity: 0;
    }
}

/* Job Rarity - Regenboog Effect */
@keyframes jobTitleRainbow {
    0% { color: #ff0000; }
    16% { color: #ff8800; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    66% { color: #0088ff; }
    83% { color: #8800ff; }
    100% { color: #ff0000; }
}

.title-name.job {
    animation: jobTitleRainbow 5s linear infinite;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    font-weight: bold;
}

/* Zorg dat job effect ook werkt in statName (actieve titel display) */
#statName .title-name.job {
    animation: jobTitleRainbow 5s linear infinite !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Famous Title - Hollywood Camera Flash Effect */
.title-name.famous {
    position: relative;
    color: #FFD700 !important;
    font-weight: bold;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 165, 0, 0.6),
        0 0 30px rgba(255, 140, 0, 0.4);
    animation: hollywoodGlitter 2s ease-in-out infinite;
    z-index: 1;
}

/* Glitter animation voor de tekst zelf */
@keyframes hollywoodGlitter {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 165, 0, 0.6),
            0 0 30px rgba(255, 140, 0, 0.4);
    }
    25% {
        text-shadow: 
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 165, 0, 0.8),
            0 0 45px rgba(255, 140, 0, 0.6),
            2px 2px 4px rgba(255, 215, 0, 0.5);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(255, 215, 0, 1),
            0 0 40px rgba(255, 165, 0, 1),
            0 0 60px rgba(255, 140, 0, 0.8),
            -2px 2px 6px rgba(255, 215, 0, 0.6);
    }
    75% {
        text-shadow: 
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 165, 0, 0.8),
            0 0 45px rgba(255, 140, 0, 0.6),
            2px -2px 4px rgba(255, 215, 0, 0.5);
    }
}

/* Camera Flash Effect - witte flitsen achter de tekst */
.title-name.famous::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 20%, transparent 50%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: cameraFlash 4s ease-in-out infinite;
}

/* Camera Flash animatie - meerdere flitsen */
@keyframes cameraFlash {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    /* Eerste flash */
    22% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    23% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    24% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
    /* Tweede flash */
    26% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    27% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
    28% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.4);
    }
    /* Derde flash (kleiner) */
    30% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    31% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    32% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
    }
    /* Vierde flash sequence */
    72% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    73% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    74% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
    76% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    77% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.1);
    }
    78% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.4);
    }
}



/* Sparkle rain animatie - vallend van boven naar beneden */
@keyframes sparkleRainFall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(50%);
        opacity: 0;
    }
}

/* Employment Office Menu Scrollbar Styling - match inventory style */
#employmentOfficeMenu ::-webkit-scrollbar {
    width: 12px;
}

#employmentOfficeMenu ::-webkit-scrollbar-track {
    background: rgba(40, 40, 40, 1);
    border-radius: 10px;
}

#employmentOfficeMenu ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #666, #555);
    border-radius: 10px;
    border: 2px solid rgba(40, 40, 40, 1);
}

#employmentOfficeMenu ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #777, #666);
}

/* Firefox scrollbar styling */
#employmentOfficeMenu {
    scrollbar-width: thin;
    scrollbar-color: #666 rgba(40, 40, 40, 1);
}


@keyframes rankPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.7);
        background-color: rgba(50, 50, 50, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 5px rgba(204, 0, 0, 0.4);
        background-color: rgba(204, 0, 0, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0);
        background-color: rgba(50, 50, 50, 0.1);
    }
}

.rank-pulse {
    animation: rankPulse 0.6s ease-in-out 2;


}

/* Fishing skill pulse animation */
@keyframes fishingPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(32, 178, 170, 0.7);
        background-color: rgba(50, 50, 50, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 5px rgba(32, 178, 170, 0.4);
        background-color: rgba(32, 178, 170, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(32, 178, 170, 0);
        background-color: rgba(50, 50, 50, 0.1);
    }
}

.fishing-pulse {
    animation: fishingPulse 0.6s ease-in-out 2;
}

/* Battle skill pulse animation */
@keyframes battlePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.7);
        background-color: rgba(50, 50, 50, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 5px rgba(204, 0, 0, 0.4);
        background-color: rgba(204, 0, 0, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0);
        background-color: rgba(50, 50, 50, 0.1);
    }
}

.battle-pulse {
    animation: battlePulse 0.6s ease-in-out 2;
}

/* Agility skill pulse animation */
@keyframes agilityPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        background-color: rgba(50, 50, 50, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 5px rgba(76, 175, 80, 0.4);
        background-color: rgba(76, 175, 80, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
        background-color: rgba(50, 50, 50, 0.1);
    }
}

.agility-pulse {
    animation: agilityPulse 0.6s ease-in-out 2;
}


/* Shop button pulse animation - alleen glow effect */
@keyframes shopPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.shop-pulse {
    animation: shopPulse 0.6s ease-in-out 3;
}

@keyframes mapClaimPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(255, 68, 68, 0.9), 0 0 30px 12px rgba(255, 215, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
    }
}

.map-claim-pulse {
    animation: mapClaimPulse 0.6s ease-in-out 3;
}

/* Disease Blinking Animation */
@keyframes diseaseIconBlink {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.3;
        transform: scale(1.1);
    }
}

@keyframes diseaseTextBlink {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.4;
    }
}

/* Disease Particles Animation - BIGGER and MORE VISIBLE */
.disease-particle {
    position: absolute;
    width: 8px; /* Was 6px - now bigger */
    height: 8px;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.9), rgba(0, 200, 0, 0.6)); /* More opaque */
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 4px rgba(0, 255, 0, 0.8); /* Add glow effect */
}

@keyframes diseaseParticleFloat1 {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1; /* More visible */
    }
    100% { 
        transform: translate(-25px, -70px) scale(0.3); /* Higher float */
        opacity: 0;
    }
}

@keyframes diseaseParticleFloat2 {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% { 
        transform: translate(25px, -70px) scale(0.3); /* Higher float */
        opacity: 0;
    }
}

@keyframes diseaseParticleFloat3 {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% { 
        transform: translate(-35px, -60px) scale(0.3); /* Higher float */
        opacity: 0;
    }
}

@keyframes diseaseParticleFloat4 {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% { 
        transform: translate(35px, -60px) scale(0.3); /* Higher float */
        opacity: 0;
    }
}

@keyframes diseaseParticleFloat5 {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% { 
        transform: translate(0px, -80px) scale(0.3); /* Much higher float */
        opacity: 0;
    }
}

@keyframes tvStatic {
    0% { 
        background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.1) 2px),
                   repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 2px);
        opacity: 0.8;
    }
    50% { 
        background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255, 255, 255, 0.12) 1px, rgba(255, 255, 255, 0.12) 2px),
                   repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(200, 200, 200, 0.1) 2px, rgba(200, 200, 200, 0.1) 3px);
        opacity: 0.85;
    }
    100% { 
        background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200, 200, 200, 0.12) 2px, rgba(200, 200, 200, 0.12) 3px),
                   repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(100, 100, 100, 0.1) 1px, rgba(100, 100, 100, 0.1) 2px);
        opacity: 0.7;
    }
}

/* A Room Rain Animations - start op 15% (102px), valt tot 35% (238px) */
@keyframes aRoomRainFall1 { 
    0% { top: 162px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 278px; opacity: 0; } 
}
@keyframes aRoomRainFall2 { 
    0% { top: 162px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 278px; opacity: 0; } 
}
@keyframes aRoomRainFall3 { 
    0% { top: 162px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 278px; opacity: 0; } 
}
@keyframes aRoomRainFall4 { 
    0% { top: 162px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 278px; opacity: 0; } 
}
@keyframes aRoomRainFall5 { 
    0% { top: 162px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 278px; opacity: 0; } 
}
@keyframes aRoomRainFall6 { 
    0% { top: 162px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 278px; opacity: 0; } 
}

/* Bathroom Rain (links boven, 10%-40%) */
@keyframes aBathroomRainFall1 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 272px; opacity: 0; } }
@keyframes aBathroomRainFall2 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 272px; opacity: 0; } }
@keyframes aBathroomRainFall3 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 272px; opacity: 0; } }
@keyframes aBathroomRainFall4 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 272px; opacity: 0; } }

/* Kitchen Rain (midden boven, 20%-50%) */
@keyframes aKitchenRainFall1 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 300px; opacity: 0; } }
@keyframes aKitchenRainFall2 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 300px; opacity: 0; } }
@keyframes aKitchenRainFall3 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 300px; opacity: 0; } }
@keyframes aKitchenRainFall4 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 300px; opacity: 0; } }
@keyframes aKitchenRainFall5 { 0% { top: 100px; opacity: 0; } 10% { opacity: 1; } 100% { top: 300px; opacity: 0; } }

/* Ongedierte animaties - krioelen over de grond */
@keyframes bugCrawl1 {
    0% { left: -5%; transform: translateX(0) scaleX(1); }
    50% { transform: translateX(10px) scaleX(-1); }
    100% { left: 105%; transform: translateX(0) scaleX(1); }
}

@keyframes bugCrawl2 {
    0% { left: 105%; transform: translateX(0) scaleX(-1); }
    50% { transform: translateX(-10px) scaleX(1); }
    100% { left: -5%; transform: translateX(0) scaleX(-1); }
}

@keyframes bugCrawl3 {
    0% { left: -5%; transform: translateX(0) scaleX(1) translateY(0); }
    25% { transform: translateX(5px) scaleX(1) translateY(-3px); }
    50% { transform: translateX(10px) scaleX(-1) translateY(0); }
    75% { transform: translateX(5px) scaleX(-1) translateY(-2px); }
    100% { left: 105%; transform: translateX(0) scaleX(1) translateY(0); }
}

@keyframes bugCrawl4 {
    0% { left: 105%; transform: translateX(0) scaleX(-1) translateY(0); }
    25% { transform: translateX(-5px) scaleX(-1) translateY(-2px); }
    50% { transform: translateX(-10px) scaleX(1) translateY(0); }
    75% { transform: translateX(-5px) scaleX(1) translateY(-3px); }
    100% { left: -5%; transform: translateX(0) scaleX(-1) translateY(0); }
}

@keyframes bugCrawl5 {
    0% { left: -5%; transform: translateX(0) scaleX(1); }
    50% { transform: translateX(8px) scaleX(-1); }
    100% { left: 105%; transform: translateX(0) scaleX(1); }
}

/* Lucht flow animaties - meer naar rechts en beneden */
@keyframes airFlow1 {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% { 
        transform: translate(120px, 80px) scale(0.3);
        opacity: 0;
    }
}

@keyframes airFlow2 {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% { 
        transform: translate(100px, 100px) scale(0.3);
        opacity: 0;
    }
}

@keyframes airFlow3 {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.55;
    }
    100% { 
        transform: translate(140px, 70px) scale(0.3);
        opacity: 0;
    }
}

/* Modern Living Room Rain - alleen bij het raam */
@keyframes modernLivingRoomRain1 { 
    0% { top: 200px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 300px; opacity: 0; } 
}
@keyframes modernLivingRoomRain2 { 
    0% { top: 200px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 300px; opacity: 0; } 
}
@keyframes modernLivingRoomRain3 { 
    0% { top: 200px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 300px; opacity: 0; } 
}
@keyframes modernLivingRoomRain4 { 
    0% { top: 200px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 300px; opacity: 0; } 
}

/* Modern Kitchen Rain - alleen bij het raam */
@keyframes modernKitchenRain1 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 350px; opacity: 0; } 
}
@keyframes modernKitchenRain2 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 350px; opacity: 0; } 
}
@keyframes modernKitchenRain3 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 350px; opacity: 0; } 
}

/* Modern Bathroom Rain - alleen bij het raam */
@keyframes modernBathroomRain1 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 350px; opacity: 0; } 
}
@keyframes modernBathroomRain2 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 350px; opacity: 0; } 
}
@keyframes modernBathroomRain3 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 350px; opacity: 0; } 
}

/* Modern Balcony Rain - alleen bij het raam */
@keyframes modernBalconyRain1 { 
    0% { top: 110px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 380px; opacity: 0; } 
}
@keyframes modernBalconyRain2 { 
    0% { top: 110px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 380px; opacity: 0; } 
}
@keyframes modernBalconyRain3 { 
    0% { top: 110px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 380px; opacity: 0; } 
}
@keyframes modernBalconyRain4 { 
    0% { top: 110px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 380px; opacity: 0; } 
}

/* Mansion Living Room Rain */
@keyframes mansionLivingRoomRain1 { 
    0% { top: 130px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 400px; opacity: 0; } 
}
@keyframes mansionLivingRoomRain2 { 
    0% { top: 130px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 400px; opacity: 0; } 
}
@keyframes mansionLivingRoomRain3 { 
    0% { top: 130px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 400px; opacity: 0; } 
}
@keyframes mansionLivingRoomRain4 { 
    0% { top: 130px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 400px; opacity: 0; } 
}

/* Mansion Kitchen Rain */
@keyframes mansionKitchenRain1 { 
    0% { top: 160px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 310px; opacity: 0; } 
}
@keyframes mansionKitchenRain2 { 
    0% { top: 160px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 310px; opacity: 0; } 
}
@keyframes mansionKitchenRain3 { 
    0% { top: 160px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 310px; opacity: 0; } 
}

/* Mansion Bathroom Rain */
@keyframes mansionBathroomRain1 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 250px; opacity: 0; } 
}
@keyframes mansionBathroomRain2 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 250px; opacity: 0; } 
}
@keyframes mansionBathroomRain3 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 250px; opacity: 0; } 
}

/* Mansion Bedroom Rain */
@keyframes mansionBedroomRain1 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 360px; opacity: 0; } 
}
@keyframes mansionBedroomRain2 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 360px; opacity: 0; } 
}
@keyframes mansionBedroomRain3 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 360px; opacity: 0; } 
}
@keyframes mansionBedroomRain4 { 
    0% { top: 120px; opacity: 0; } 
    10% { opacity: 1; } 
    100% { top: 360px; opacity: 0; } 
}

/* Fireplace Flames Animation */
@keyframes fireFlicker1 {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
    50% { transform: scaleY(1.15) scaleX(0.95); opacity: 1; }
    100% { transform: scaleY(0.95) scaleX(1.05); opacity: 0.85; }
}

@keyframes fireFlicker2 {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.95; }
    50% { transform: scaleY(1.2) scaleX(0.9); opacity: 1; }
    100% { transform: scaleY(0.9) scaleX(1.1); opacity: 0.9; }
}

@keyframes fireFlicker3 {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
    50% { transform: scaleY(1.1) scaleX(0.95); opacity: 0.95; }
    100% { transform: scaleY(0.95) scaleX(1.05); opacity: 0.85; }
}

/* Fireplace Glow Animation */
@keyframes fireGlow {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* Fire Sparks Animation */
@keyframes fireSpark1 {
    0% { bottom: 40px; opacity: 0; }
    20% { opacity: 1; }
    100% { bottom: 120px; opacity: 0; }
}

@keyframes fireSpark2 {
    0% { bottom: 50px; opacity: 0; }
    25% { opacity: 1; }
    100% { bottom: 130px; opacity: 0; }
}

@keyframes fireSpark3 {
    0% { bottom: 45px; opacity: 0; }
    22% { opacity: 1; }
    100% { bottom: 125px; opacity: 0; }
}

.contribution-item-tabs {
    display: flex;
    width: min(430px, calc(100% - 20px));
    margin: 0 auto 14px;
    padding: 4px;
    gap: 5px;
    border: 1px solid rgba(192, 57, 43, 0.45);
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.58);
    box-sizing: border-box;
}

.contribution-item-tabs .contribution-item-tab {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #bcbcbc;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.contribution-item-tabs .contribution-item-tab:hover,
.contribution-item-tabs .contribution-item-tab:focus-visible {
    color: #fff;
    background: rgba(192, 57, 43, 0.2);
    outline: none;
}

.contribution-item-tabs .contribution-item-tab.is-active {
    color: #fff;
    background: linear-gradient(#c94738, #84251c);
    border-color: rgba(255, 174, 157, 0.48);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.contribution-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    min-height: 260px;
    padding: 0 10px;
}

.contribution-item-grid[hidden] {
    display: none;
}

#eventShopSpiritItemsList > .shop-item-wrapper:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 210px);
}

.contribution-item-empty {
    grid-column: 1 / -1;
    padding: 36px 10px;
    color: #aaa;
    text-align: center;
}

.shop-item-wrapper {
    position: relative;
    display: inline-block;
}

.shop-item-wrapper::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 5px;
}

.shop-item-wrapper::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 1px;
}

.shop-item-wrapper:hover::before,
.shop-item-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ===== DONATOR BACKGROUND EFFECTEN ===== */

/* Centrale statische glow - elektrisch rood */
#characterBackground.has-donator-effects .donator-center-glow,
.donator-effects .donator-center-glow {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, 
        rgba(255, 0, 0, 0.6) 0%, 
        rgba(255, 50, 0, 0.4) 30%, 
        rgba(255, 100, 0, 0.2) 60%, 
        transparent 100%
    );
    filter: blur(20px);
    animation: electricPulse 1.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

/* Rode vonken in cirkel patroon - 8 vonken */
#characterBackground.has-donator-effects .donator-spark-1,
.donator-effects .donator-spark-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 50, 50, 1) 40%, rgba(255, 0, 0, 0.8) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 50, 50, 1), 0 0 20px rgba(255, 0, 0, 0.8);
    animation: sparkBurst1 1s infinite ease-out -0.5s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-2,
.donator-effects .donator-spark-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 200, 1) 0%, rgba(255, 80, 30, 1) 40%, rgba(255, 40, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 80, 30, 1), 0 0 18px rgba(255, 40, 0, 0.8);
    animation: sparkBurst2 1.1s infinite ease-out -0.3s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-3,
.donator-effects .donator-spark-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 60, 40, 1) 40%, rgba(255, 20, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 60, 40, 1), 0 0 25px rgba(255, 20, 0, 0.8);
    animation: sparkBurst3 0.9s infinite ease-out -0.7s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-4,
.donator-effects .donator-spark-4 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 220, 1) 0%, rgba(255, 70, 50, 1) 40%, rgba(255, 30, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 70, 50, 1), 0 0 20px rgba(255, 30, 0, 0.8);
    animation: sparkBurst4 1.05s infinite ease-out -0.2s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-5,
.donator-effects .donator-spark-5 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 90, 60, 1) 40%, rgba(255, 50, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 90, 60, 1), 0 0 18px rgba(255, 50, 0, 0.8);
    animation: sparkBurst5 0.95s infinite ease-out -0.6s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-6,
.donator-effects .donator-spark-6 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 200, 1) 0%, rgba(255, 100, 70, 1) 40%, rgba(255, 60, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 13px rgba(255, 100, 70, 1), 0 0 22px rgba(255, 60, 0, 0.8);
    animation: sparkBurst6 1.15s infinite ease-out -0.4s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-7,
.donator-effects .donator-spark-7 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 110, 80, 1) 40%, rgba(255, 70, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(255, 110, 80, 1), 0 0 24px rgba(255, 70, 0, 0.8);
    animation: sparkBurst7 1s infinite ease-out -0.8s;
    pointer-events: none;
    z-index: 3;
}

#characterBackground.has-donator-effects .donator-spark-8,
.donator-effects .donator-spark-8 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 220, 1) 0%, rgba(255, 120, 90, 1) 40%, rgba(255, 80, 0, 0.9) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 11px rgba(255, 120, 90, 1), 0 0 19px rgba(255, 80, 0, 0.8);
    animation: sparkBurst8 0.9s infinite ease-out -0.1s;
    pointer-events: none;
    z-index: 3;
}

/* Statisch effect - elektrische ruis */
#characterBackground.has-donator-effects .donator-static,
.donator-effects .donator-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, transparent 0px, rgba(255, 0, 0, 0.05) 1px, transparent 2px),
        repeating-linear-gradient(90deg, transparent 0px, rgba(255, 0, 0, 0.05) 1px, transparent 2px);
    animation: staticNoise 0.08s infinite steps(1);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

/* Glitch flashes - rode flitsen */
#characterBackground.has-donator-effects .donator-glitch,
.donator-effects .donator-glitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.3) 0%, rgba(255, 50, 0, 0.15) 40%, transparent 70%);
    animation: glitchFlash 2.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

/* Zwarte as-vlokken - 15 vlokken */
#characterBackground.has-donator-effects .donator-ash-1,
.donator-effects .donator-ash-1 {
    position: absolute;
    top: -5%;
    left: 10%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.9) 0%, rgba(20, 20, 20, 0.7) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall1 15s infinite linear;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-2,
.donator-effects .donator-ash-2 {
    position: absolute;
    top: -5%;
    left: 25%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(50, 50, 50, 0.8) 0%, rgba(30, 30, 30, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall2 18s infinite linear 2s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-3,
.donator-effects .donator-ash-3 {
    position: absolute;
    top: -5%;
    left: 40%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(35, 35, 35, 0.9) 0%, rgba(15, 15, 15, 0.7) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall3 16s infinite linear 4s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-4,
.donator-effects .donator-ash-4 {
    position: absolute;
    top: -5%;
    left: 55%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(45, 45, 45, 0.85) 0%, rgba(25, 25, 25, 0.65) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall4 14s infinite linear 1s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-5,
.donator-effects .donator-ash-5 {
    position: absolute;
    top: -5%;
    left: 70%;
    width: 9px;
    height: 9px;
    background: radial-gradient(circle, rgba(38, 38, 38, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall5 17s infinite linear 3s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-6,
.donator-effects .donator-ash-6 {
    position: absolute;
    top: -5%;
    left: 85%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(42, 42, 42, 0.85) 0%, rgba(22, 22, 22, 0.65) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall6 19s infinite linear 5s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-7,
.donator-effects .donator-ash-7 {
    position: absolute;
    top: -5%;
    left: 15%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(36, 36, 36, 0.9) 0%, rgba(16, 16, 16, 0.7) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall7 15.5s infinite linear 2.5s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-8,
.donator-effects .donator-ash-8 {
    position: absolute;
    top: -5%;
    left: 32%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(44, 44, 44, 0.85) 0%, rgba(24, 24, 24, 0.65) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall8 16.5s infinite linear 1.5s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-9,
.donator-effects .donator-ash-9 {
    position: absolute;
    top: -5%;
    left: 48%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.85) 0%, rgba(20, 20, 20, 0.65) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall1 14.5s infinite linear 0.5s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-10,
.donator-effects .donator-ash-10 {
    position: absolute;
    top: -5%;
    left: 62%;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(38, 38, 38, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall2 16.8s infinite linear 1.8s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-11,
.donator-effects .donator-ash-11 {
    position: absolute;
    top: -5%;
    left: 78%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(42, 42, 42, 0.9) 0%, rgba(22, 22, 22, 0.7) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall3 15.2s infinite linear 3.2s;
    pointer-events: none;
    z-index: 4;
}

#characterBackground.has-donator-effects .donator-ash-12,
.donator-effects .donator-ash-12 {
    position: absolute;
    top: -5%;
    left: 92%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(45, 45, 45, 0.8) 0%, rgba(25, 25, 25, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: ashFall4 17.5s infinite linear 4.5s;
    pointer-events: none;
    z-index: 4;
}

/* ===== ANIMATIES ===== */

/* Elektrische pulse */
@keyframes electricPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1);
        filter: blur(20px);
    }
    50% { 
        opacity: 0.8; 
        transform: translate(-50%, -50%) scale(1.15);
        filter: blur(25px);
    }
}

/* Vonken burst - 8 richtingen in cirkel - GLITCHEND EN VERDER */
@keyframes sparkBurst1 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(0px, -20px) scale(1.4);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(0px, -45px) scale(1.1);
    }
    30% { 
        opacity: 0.95; 
        transform: translate(2px, -48px) scale(1.15);
    }
    35% { 
        opacity: 0.85; 
        transform: translate(-1px, -50px) scale(1.05);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(0px, -100px) scale(0.8);
    }
    100% { 
        opacity: 0; 
        transform: translate(0px, -150px) scale(0.2);
    }
}

@keyframes sparkBurst2 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(14px, -14px) scale(1.3);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(32px, -32px) scale(1.05);
    }
    28% { 
        opacity: 0.95; 
        transform: translate(35px, -30px) scale(1.1);
    }
    32% { 
        opacity: 0.85; 
        transform: translate(33px, -34px) scale(1);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(71px, -71px) scale(0.75);
    }
    100% { 
        opacity: 0; 
        transform: translate(106px, -106px) scale(0.2);
    }
}

@keyframes sparkBurst3 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(20px, 0px) scale(1.5);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(45px, 0px) scale(1.1);
    }
    29% { 
        opacity: 0.95; 
        transform: translate(48px, -2px) scale(1.15);
    }
    33% { 
        opacity: 0.85; 
        transform: translate(46px, 1px) scale(1.05);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(100px, 0px) scale(0.8);
    }
    100% { 
        opacity: 0; 
        transform: translate(150px, 0px) scale(0.2);
    }
}

@keyframes sparkBurst4 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(14px, 14px) scale(1.35);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(32px, 32px) scale(1.08);
    }
    30% { 
        opacity: 0.95; 
        transform: translate(34px, 30px) scale(1.12);
    }
    34% { 
        opacity: 0.85; 
        transform: translate(31px, 33px) scale(1.02);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(71px, 71px) scale(0.78);
    }
    100% { 
        opacity: 0; 
        transform: translate(106px, 106px) scale(0.2);
    }
}

@keyframes sparkBurst5 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(0px, 20px) scale(1.4);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(0px, 45px) scale(1.1);
    }
    31% { 
        opacity: 0.95; 
        transform: translate(-2px, 47px) scale(1.14);
    }
    36% { 
        opacity: 0.85; 
        transform: translate(1px, 49px) scale(1.06);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(0px, 100px) scale(0.8);
    }
    100% { 
        opacity: 0; 
        transform: translate(0px, 150px) scale(0.2);
    }
}

@keyframes sparkBurst6 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(-14px, 14px) scale(1.32);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(-32px, 32px) scale(1.06);
    }
    29% { 
        opacity: 0.95; 
        transform: translate(-30px, 34px) scale(1.11);
    }
    33% { 
        opacity: 0.85; 
        transform: translate(-33px, 31px) scale(1.01);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(-71px, 71px) scale(0.76);
    }
    100% { 
        opacity: 0; 
        transform: translate(-106px, 106px) scale(0.2);
    }
}

@keyframes sparkBurst7 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(-20px, 0px) scale(1.45);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(-45px, 0px) scale(1.12);
    }
    30% { 
        opacity: 0.95; 
        transform: translate(-47px, 2px) scale(1.16);
    }
    35% { 
        opacity: 0.85; 
        transform: translate(-46px, -1px) scale(1.07);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(-100px, 0px) scale(0.82);
    }
    100% { 
        opacity: 0; 
        transform: translate(-150px, 0px) scale(0.2);
    }
}

@keyframes sparkBurst8 {
    0% { 
        opacity: 0; 
        transform: translate(0, 0) scale(0);
    }
    8% { 
        opacity: 1; 
        transform: translate(-14px, -14px) scale(1.36);
    }
    25% { 
        opacity: 0.9; 
        transform: translate(-32px, -32px) scale(1.07);
    }
    31% { 
        opacity: 0.95; 
        transform: translate(-34px, -30px) scale(1.13);
    }
    36% { 
        opacity: 0.85; 
        transform: translate(-31px, -33px) scale(1.03);
    }
    60% { 
        opacity: 0.6; 
        transform: translate(-71px, -71px) scale(0.77);
    }
    100% { 
        opacity: 0; 
        transform: translate(-106px, -106px) scale(0.2);
    }
}

/* Statisch geluid effect */
@keyframes staticNoise {
    0%, 100% { opacity: 0; }
    8% { opacity: 0.2; }
    16% { opacity: 0; }
    38% { opacity: 0.15; }
    52% { opacity: 0; }
    74% { opacity: 0.18; }
    88% { opacity: 0; }
}

/* Glitch flash */
@keyframes glitchFlash {
    0%, 88%, 100% { opacity: 0; }
    89%, 90% { opacity: 0.4; }
    91% { opacity: 0; }
    92%, 93% { opacity: 0.25; }
    94%, 100% { opacity: 0; }
}

/* As-vlokken die vallen met drift */
@keyframes ashFall1 {
    0% { 
        top: -5%; 
        opacity: 0.8;
        transform: translateX(0px) rotate(0deg);
    }
    5% { opacity: 0.9; }
    92% { opacity: 0.9; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(15px) rotate(360deg);
    }
}

@keyframes ashFall2 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(-20px) rotate(-360deg);
    }
}

@keyframes ashFall3 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.85; }
    90% { opacity: 0.85; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(10px) rotate(180deg);
    }
}

@keyframes ashFall4 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.75; }
    90% { opacity: 0.75; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(-15px) rotate(-270deg);
    }
}

@keyframes ashFall5 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(25px) rotate(450deg);
    }
}

@keyframes ashFall6 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.75; }
    90% { opacity: 0.75; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(-12px) rotate(-180deg);
    }
}

@keyframes ashFall7 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.85; }
    90% { opacity: 0.85; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(18px) rotate(320deg);
    }
}

@keyframes ashFall8 {
    0% { 
        top: -5%; 
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { 
        top: 105%; 
        opacity: 0;
        transform: translateX(-22px) rotate(-400deg);
    }
}

/* Jet Engine Heat Distortion Effect */
@keyframes jetHeatWave {
    0% { 
        transform: translateX(0) scaleX(0.8) scaleY(1.2);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    25% { 
        transform: translateX(25px) scaleX(1.1) scaleY(0.85);
        opacity: 0.35;
    }
    50% { 
        transform: translateX(50px) scaleX(1.3) scaleY(0.95);
        opacity: 0.3;
    }
    75% { 
        transform: translateX(75px) scaleX(1.5) scaleY(0.8);
        opacity: 0.2;
    }
    100% { 
        transform: translateX(100px) scaleX(1.8) scaleY(0.7);
        opacity: 0;
    }
}

.heat-distortion {
    position: absolute;
    width: 30px;
    height: 100%;
    left: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.15) 0%,
        rgba(200, 200, 255, 0.12) 30%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 100%
    );
    filter: blur(3px);
    animation: jetHeatWave 1.5s ease-out infinite;
    border-radius: 50%;
}

.heat-distortion.dist-1 {
    animation-duration: 1.3s;
    animation-delay: 0s;
}

.heat-distortion.dist-2 {
    animation-duration: 1.6s;
    animation-delay: 0.3s;
    opacity: 0.8;
}

.heat-distortion.dist-3 {
    animation-duration: 1.4s;
    animation-delay: 0.6s;
    opacity: 0.7;
}

/* Turbine Glow - Jet Engine Burn Effect */
@keyframes turbineGlow {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.15);
    }
}

.turbine-glow {
    position: absolute;
    width: 25px;
    height: 35px;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at left center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(100, 150, 255, 0.7) 15%,
        rgba(255, 100, 50, 0.6) 35%,
        rgba(255, 150, 0, 0.4) 55%,
        transparent 80%
    );
    filter: blur(2px);
    animation: turbineGlow 0.15s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 150, 50, 0.8);
}



/* Airport Lamp Flicker (zoals race lampen) */
@keyframes airportLampFlicker {
    0%, 100% { opacity: 0.7; }
    25% { opacity: 1; }
    50% { opacity: 0.8; }
    75% { opacity: 0.9; }
}

/* Airport Lamp Flicker - Individuele Glitches */
@keyframes airportLampGlitch1 {
    0% { opacity: 0.8; }
    8% { opacity: 0; }
    10% { opacity: 0.9; }
    12% { opacity: 0.1; }
    14% { opacity: 0.85; }
    40% { opacity: 0.8; }
    41% { opacity: 0; }
    42% { opacity: 0.8; }
    100% { opacity: 0.8; }
}

@keyframes airportLampGlitch2 {
    0% { opacity: 0.85; }
    100% { opacity: 0.85; }
}

@keyframes airportLampGlitch3 {
    0% { opacity: 0.8; }
    22% { opacity: 0.8; }
    23% { opacity: 0; }
    24% { opacity: 0.2; }
    25% { opacity: 0.9; }
    26% { opacity: 0; }
    28% { opacity: 0.8; }
    65% { opacity: 0.8; }
    66% { opacity: 0.1; }
    67% { opacity: 0.8; }
    100% { opacity: 0.8; }
}

.airport-sign-lamp {
    background: radial-gradient(circle,
        rgba(255, 220, 150, 0.8) 0%,
        rgba(255, 200, 100, 0.6) 30%,
        rgba(255, 180, 80, 0.4) 50%,
        transparent 70%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 25px rgba(255, 220, 150, 0.7),
        0 0 45px rgba(255, 200, 100, 0.5),
        0 0 70px rgba(255, 180, 80, 0.3);
    filter: blur(8px);
}

.airport-sign-lamp.lamp-1 {
    animation: airportLampGlitch1 8s ease-in-out infinite;
}

.airport-sign-lamp.lamp-2 {
    animation: airportLampGlitch2 3s ease-in-out infinite;
}

.airport-sign-lamp.lamp-3 {
    animation: airportLampGlitch3 11s ease-in-out infinite;
}

@keyframes blobPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.4; 
        transform: scale(1.1);
    }
}

/* ===== MANOR RARITY - ELEGANT GOLD LUXURY EFFECT (NO ICON EFFECT) ===== */

.title-name.manor {
    position: relative;
    color: #FFD700 !important;
    font-weight: bold;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6))
            drop-shadow(0 0 15px rgba(255, 215, 0, 0.3));
    animation: luxuryGlow 2s ease-in-out infinite;
    z-index: 1;
}

/* Subtiele glow pulse */
@keyframes luxuryGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6))
                drop-shadow(0 0 15px rgba(255, 215, 0, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9))
                drop-shadow(0 0 25px rgba(255, 215, 0, 0.5));
    }
}

/* Zachte champagne flitsen */
.title-name.manor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 300%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 248, 220, 0.3) 20%, 
        rgba(255, 215, 0, 0.15) 40%, 
        transparent 60%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: gentleSparkle 5s ease-in-out infinite;
}

/* Zachte sparkle animatie */
@keyframes gentleSparkle {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    15% {
        opacity: 0;
    }
    20% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
    25% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
    }
    45% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.05);
    }
    55% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Voor #statName (actieve title bij naam) */
#statName .title-name.manor {
    position: relative;
    color: #FFD700 !important;
    font-weight: bold;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.5);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7))
            drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
    animation: luxuryGlow 2s ease-in-out infinite !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    padding: 1px 8px !important;
    z-index: 1;
}

#statName .title-name.manor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 300%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 248, 220, 0.3) 20%, 
        rgba(255, 215, 0, 0.15) 40%, 
        transparent 60%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: gentleSparkle 5s ease-in-out infinite;
}

@keyframes dadAuraGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.7))
                drop-shadow(0 0 16px rgba(13, 71, 161, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(33, 150, 243, 1))
                drop-shadow(0 0 28px rgba(3, 169, 244, 0.65));
    }
}

@keyframes momAuraGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.7))
                drop-shadow(0 0 16px rgba(194, 24, 91, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 105, 180, 1))
                drop-shadow(0 0 28px rgba(255, 64, 129, 0.65));
    }
}

.title-name.dad,
.title-name.mom {
    position: relative;
    color: #FFD700 !important;
    font-weight: bold;
    z-index: 1;
}

.title-name.dad {
    text-shadow:
        0 0 10px rgba(33, 150, 243, 0.85),
        0 0 20px rgba(30, 136, 229, 0.5),
        0 0 30px rgba(13, 71, 161, 0.3);
    animation: dadAuraGlow 2s ease-in-out infinite;
}

.title-name.mom {
    text-shadow:
        0 0 10px rgba(255, 105, 180, 0.85),
        0 0 20px rgba(255, 64, 129, 0.5),
        0 0 30px rgba(194, 24, 91, 0.3);
    animation: momAuraGlow 2s ease-in-out infinite;
}

.title-name.dad::before,
.title-name.mom::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 300%;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: gentleSparkle 5s ease-in-out infinite;
}

.title-name.dad::before {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(179, 229, 252, 0.35) 20%,
        rgba(33, 150, 243, 0.2) 40%,
        transparent 60%);
}

.title-name.mom::before {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 205, 210, 0.35) 20%,
        rgba(255, 64, 129, 0.2) 40%,
        transparent 60%);
}

#statName .title-name.dad,
#statName .title-name.mom {
    position: relative;
    color: #FFD700 !important;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5) !important;
    padding: 1px 8px !important;
    z-index: 1;
}

#statName .title-name.dad {
    text-shadow:
        0 0 10px rgba(33, 150, 243, 0.85),
        0 0 20px rgba(30, 136, 229, 0.5);
    animation: dadAuraGlow 2s ease-in-out infinite !important;
}

#statName .title-name.mom {
    text-shadow:
        0 0 10px rgba(255, 105, 180, 0.85),
        0 0 20px rgba(255, 64, 129, 0.5);
    animation: momAuraGlow 2s ease-in-out infinite !important;
}

/* Title Shop Tab Styling */
.titles-tab {
    flex: 1;
    padding: 22px 15px;
    min-height: 58px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.titles-tab.active {
    background: linear-gradient(to bottom, #8B4513, #6d3710) !important;
    color: white !important;
    border-bottom: 3px solid #ffd700 !important;
}

.titles-tab.inactive {
    background: linear-gradient(to bottom, #4a4a4a, #333333) !important;
    color: #aaa !important;
    border-bottom: 3px solid transparent !important;
}

@keyframes maintenancePulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 68, 68, 0.8), 0 0 20px rgba(255, 68, 68, 0.6);
        border-width: 3px;
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 1), 0 0 40px rgba(255, 68, 68, 0.8), 0 0 60px rgba(255, 68, 68, 0.6);
        border-width: 4px;
    }
}
.maintenance-critical {
    animation: maintenancePulse 2s ease-in-out infinite;
}

/* MAP Mist Carousel - langzamer, meer relaxed */
@keyframes mapMistCarousel1 { 0% { transform: translateX(1200px); } 100% { transform: translateX(-400px); } }
@keyframes mapMistCarousel2 { 0% { transform: translateX(1400px); } 100% { transform: translateX(-500px); } }
@keyframes mapMistCarousel3 { 0% { transform: translateX(1100px); } 100% { transform: translateX(-350px); } }
@keyframes mapMistCarousel4 { 0% { transform: translateX(1300px); } 100% { transform: translateX(-450px); } }
@keyframes mapMistCarousel5 { 0% { transform: translateX(1250px); } 100% { transform: translateX(-420px); } }

/* Landingsbaan lichten animatie */
@keyframes runwayBlink1 {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4);
    }
    50% { 
        opacity: 0.3; 
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.4), 0 0 6px rgba(255, 255, 255, 0.2);
    }
}

.runway-light {
    filter: blur(1px);
}

/* Verticale landingsbaan sequentiële lichten - van voor naar achter */
@keyframes runwaySequence {
    0%, 40%, 100% { 
        opacity: 0.2;
        transform: translateX(-50%) scale(0.8);
        filter: blur(2px);
    }
    10%, 30% { 
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
        filter: blur(0px);
    }
}
.runway-light-v {
    transition: all 0.3s ease;
}

/* Factory Smoke Rise animatie voor MAP rookpluim */
@keyframes factorySmokeRise {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-30px) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-60px) scale(1.3);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-90px) scale(1.6);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-120px) scale(2);
        opacity: 0;
    }
}

.smoke-puff {
    will-change: transform, opacity;
}

/* Vuur flicker effect - af en toe opflikkeren */
@keyframes fireFlicker {
    0%, 45%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }
    50%, 55% {
        opacity: 0.9;
        transform: translateY(-3px) scale(1.1);
    }
    52% {
        opacity: 0.7;
        transform: translateY(-2px) scale(1);
    }
    54% {
        opacity: 1;
        transform: translateY(-4px) scale(1.15);
    }
    60%, 90% {
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }
}

/* Vuur glow aan basis */
@keyframes fireGlow {
    0%, 40%, 100% {
        opacity: 0.2;
        transform: scale(0.9);
    }
    50%, 60% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Schuimend water effect */
@keyframes waterFoam1 {
    0%, 100% {
        transform: translateX(-50%) scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes waterFoam2 {
    0%, 100% {
        transform: translateX(-50%) scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-50%) scale(1.15);
        opacity: 0.9;
    }
}

@keyframes waterFoam3 {
    0%, 100% {
        transform: translateX(-50%) scale(0.95);
        opacity: 0.65;
    }
    50% {
        transform: translateX(-50%) scale(1.18);
        opacity: 0.95;
    }
}

/* Water rimpels die uitstralen */
@keyframes waterRipple1 {
    0% {
        width: 20px;
        height: 12px;
        opacity: 0.6;
    }
    100% {
        width: 50px;
        height: 30px;
        opacity: 0;
    }
}

@keyframes waterRipple2 {
    0% {
        width: 20px;
        height: 12px;
        opacity: 0.5;
    }
    100% {
        width: 55px;
        height: 33px;
        opacity: 0;
    }
}

@keyframes waterRipple3 {
    0% {
        width: 20px;
        height: 12px;
        opacity: 0.55;
    }
    100% {
        width: 52px;
        height: 31px;
        opacity: 0;
    }
}

/* Casino — Roulette wheel */
.roulette-stage {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.roulette-wheel-outer {
    position: relative;
    width: 200px;
    height: 200px;
}

.roulette-wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #1b4332 28%, transparent 29%),
        conic-gradient(
            #2e7d32 0deg 9.73deg,
            #c62828 9.73deg 19.46deg,
            #212121 19.46deg 29.19deg,
            #c62828 29.19deg 38.92deg,
            #212121 38.92deg 48.65deg,
            #c62828 48.65deg 58.38deg,
            #212121 58.38deg 68.11deg,
            #c62828 68.11deg 77.84deg,
            #212121 77.84deg 87.57deg,
            #c62828 87.57deg 97.3deg,
            #212121 97.3deg 107.03deg,
            #c62828 107.03deg 116.76deg,
            #212121 116.76deg 126.49deg,
            #c62828 126.49deg 136.22deg,
            #212121 136.22deg 145.95deg,
            #c62828 145.95deg 155.68deg,
            #212121 155.68deg 165.41deg,
            #c62828 165.41deg 175.14deg,
            #212121 175.14deg 184.87deg,
            #c62828 184.87deg 194.59deg,
            #212121 194.59deg 204.32deg,
            #c62828 204.32deg 214.05deg,
            #212121 214.05deg 223.78deg,
            #c62828 223.78deg 233.51deg,
            #212121 233.51deg 243.24deg,
            #c62828 243.24deg 252.97deg,
            #212121 252.97deg 262.7deg,
            #c62828 262.7deg 272.43deg,
            #212121 272.43deg 282.16deg,
            #c62828 282.16deg 291.89deg,
            #212121 291.89deg 301.62deg,
            #c62828 301.62deg 311.35deg,
            #212121 311.35deg 321.08deg,
            #c62828 321.08deg 330.81deg,
            #212121 330.81deg 340.54deg,
            #c62828 340.54deg 350.27deg,
            #212121 350.27deg 360deg
        );
    border: 4px solid #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.5);
    transform: rotate(0deg);
}

.roulette-ball-orbit {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    transform: rotate(0deg);
    pointer-events: none;
}

.roulette-ball {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #e0e0e0 40%, #9e9e9e 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.roulette-result-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 3;
    border: 3px solid rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.roulette-result-display.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.roulette-result-display.red { background: #c62828; }
.roulette-result-display.black { background: #212121; }
.roulette-result-display.green { background: #2e7d32; }

.roulette-rules-box {
    margin: 8px 0;
    padding: 7px 10px;
    background: rgba(25, 25, 25, 0.85);
    border: 1px solid rgba(220, 20, 60, 0.22);
    border-radius: 6px;
    text-align: center;
}

.roulette-rules-line {
    margin: 0 0 5px;
    font-size: 0.76em;
    color: #ccc;
    line-height: 1.3;
}

.roulette-rules-line strong {
    color: #ffd700;
}

.roulette-rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.roulette-rules-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 6px;
    font-size: 0.72em;
    line-height: 1.35;
}

.roulette-rule-what {
    color: #aaa;
}

.roulette-rule-what::after {
    content: "→";
    margin-left: 4px;
    color: #666;
}

.roulette-rule-pay {
    font-weight: bold;
    white-space: nowrap;
}

.roulette-rule-pay.win-big {
    color: #90ee90;
}

.roulette-rule-pay.win-big strong {
    color: #c8e6c9;
}

.roulette-rule-pay.win {
    color: #81c784;
}

.roulette-rule-pay.win strong {
    color: #a5d6a7;
}

.roulette-rule-pay.lose {
    color: #ff9999;
}

.roulette-section-label {
    margin: 0 0 6px;
    text-align: center;
    color: #ff8a80;
    font-weight: bold;
    font-size: 0.82em;
}

.roulette-bet-type-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.roulette-bet-type-btn {
    padding: 7px 12px;
    background: rgba(220, 20, 60, 0.2);
    color: #ff8a80;
    border: 1px solid rgba(220, 20, 60, 0.35);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
}

.roulette-bet-type-btn.selected {
    background: rgba(220, 20, 60, 0.55);
    color: #fff;
    border-color: #ff5252;
}

.roulette-number-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    max-height: 140px;
    overflow-y: auto;
    padding: 4px;
}

.roulette-num-btn {
    padding: 7px 0;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    color: #fff;
}

.roulette-num-btn.red { background: #b71c1c; }
.roulette-num-btn.black { background: #212121; }
.roulette-num-btn.green { background: #2e7d32; }

.roulette-num-btn.selected {
    box-shadow: 0 0 0 2px #ffd700, 0 0 10px rgba(255, 215, 0, 0.6);
}

#rouletteSpinBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#casinoMenu .casino-bet-preview {
    margin: 0 0 10px;
    font-size: 1.1em;
    line-height: 1.5;
    color: #ddd;
    text-align: center;
    min-height: 1.4em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#casinoMenu .casino-balance-line {
    margin: 0 0 8px;
    font-size: 1em;
    color: #aaa;
    text-align: center;
}

#casinoMenu .casino-balance-line span {
    color: #fff;
    font-weight: bold;
}

#casinoBtn {
    position: relative;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#casinoLotteryTimer {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    isolation: isolate;
    font-size: 11px;
    font-weight: bold;
    color: #ffe082;
    background: none;
    border: none;
    text-shadow:
        0 0 2px #140000,
        0 1px 0 #140000,
        0 -1px 0 #140000,
        1px 0 0 #140000,
        -1px 0 0 #140000;
    letter-spacing: 0;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

#casinoBtn .casino-dice-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 21px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}

#casinoBtn .casino-die {
    position: absolute;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    padding: 1px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    box-shadow: inset 0 1px 0 #fff, 1px 1px 0 rgba(0, 0, 0, 0.45);
}

#casinoBtn .casino-die i {
    width: 2.5px;
    height: 2.5px;
    margin: auto;
    background: #111;
    border-radius: 50%;
}

#casinoBtn .casino-die-five {
    left: 0;
    bottom: 0;
    transform: rotate(-8deg);
    z-index: 1;
}

#casinoBtn .casino-die-five i:nth-child(1) { grid-area: 1 / 1; }
#casinoBtn .casino-die-five i:nth-child(2) { grid-area: 1 / 3; }
#casinoBtn .casino-die-five i:nth-child(3) { grid-area: 2 / 2; }
#casinoBtn .casino-die-five i:nth-child(4) { grid-area: 3 / 1; }
#casinoBtn .casino-die-five i:nth-child(5) { grid-area: 3 / 3; }

#casinoBtn .casino-die-six {
    right: 0;
    top: 0;
    transform: rotate(8deg);
}

#casinoBtn .casino-die-six i:nth-child(1) { grid-area: 1 / 1; }
#casinoBtn .casino-die-six i:nth-child(2) { grid-area: 2 / 1; }
#casinoBtn .casino-die-six i:nth-child(3) { grid-area: 3 / 1; }
#casinoBtn .casino-die-six i:nth-child(4) { grid-area: 1 / 3; }
#casinoBtn .casino-die-six i:nth-child(5) { grid-area: 2 / 3; }
#casinoBtn .casino-die-six i:nth-child(6) { grid-area: 3 / 3; }

#casinoLotteryTimer::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 170%;
    height: 3em;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, #ff4d4d, #ffb347, #fff176, #69f0ae, #40c4ff, #b388ff, #ff4d4d);
    background-size: 220% 100%;
    filter: blur(7px);
    border: none;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 70%);
    animation: lotteryRainbowShift 4s linear infinite, casinoTimerFade 1.8s ease-in-out infinite;
}

@keyframes casinoTimerFade {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

#casinoLotteryTimer:empty {
    display: none;
}

#itemLadyBtn,
#rareShopBtn,
#contributionShopBtn {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.commercial-shop-button__label,
.commercial-shop-button .shop-green-icon,
.commercial-shop-button .contribution-goob-icon,
.commercial-shop-button .rare-shop-blue-icon,
.commercial-shop-button #rareItemButtonTimer {
    transition: filter 160ms ease, opacity 160ms ease;
}

.commercial-shop-button:is(:hover, :focus-visible) .commercial-shop-button__label,
.commercial-shop-button:is(:hover, :focus-visible) .shop-green-icon,
.commercial-shop-button:is(:hover, :focus-visible) .contribution-goob-icon,
.commercial-shop-button:is(:hover, :focus-visible) .rare-shop-blue-icon,
.commercial-shop-button:is(:hover, :focus-visible) #rareItemButtonTimer {
    filter: blur(3px);
    opacity: 0.4;
}

.commercial-shop-button__hint {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: inherit;
    background: rgba(65, 0, 0, 0.3);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.commercial-shop-button__hint img {
    width: 16px;
    height: 16px;
    flex: none;
    object-fit: contain;
}

.commercial-shop-button:is(:hover, :focus-visible) .commercial-shop-button__hint {
    opacity: 1;
}

#itemLadyBtn .shop-green-icon,
#rareShopBtn .rare-shop-blue-icon,
#contributionShopBtn .contribution-goob-icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
}

#itemLadyBtn .shop-green-icon {
    right: 1px;
    width: 31px;
    height: 31px;
}

#contributionShopBtn .contribution-goob-icon {
    right: 4px;
    width: 26px;
    height: 23px;
}

#rareItemButtonTimer {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    isolation: isolate;
    font-size: 11px;
    font-weight: bold;
    color: #ffe8e8;
    background: none;
    border: none;
    text-shadow:
        0 0 2px #140000,
        0 1px 0 #140000,
        0 -1px 0 #140000,
        1px 0 0 #140000,
        -1px 0 0 #140000;
    letter-spacing: 0;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

.rare-shop-clock {
    position: relative;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(#3a2414, #3a2414) center top / 1.5px 2px no-repeat,
        linear-gradient(#3a2414, #3a2414) center bottom / 1.5px 2px no-repeat,
        linear-gradient(#3a2414, #3a2414) left center / 2px 1.5px no-repeat,
        linear-gradient(#3a2414, #3a2414) right center / 2px 1.5px no-repeat,
        #fffdf6;
    border: 1.5px solid #2a0000;
    box-shadow: inset 0 0 0 1px #ffd54f;
    pointer-events: none;
}

#rareItemTimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rare-shop-clock .rare-clock-hour,
.rare-shop-clock .rare-clock-minute {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 1px;
    z-index: 1;
}

.rare-shop-clock .rare-clock-hour {
    width: 2px;
    height: 5px;
    margin-left: -1px;
    background: #1a1a1a;
    animation: rareClockSpin 8s linear infinite;
}

.rare-shop-clock .rare-clock-minute {
    width: 2px;
    height: 6px;
    margin-left: -1px;
    background: #ff1744;
    animation: rareClockSpin 2.4s linear infinite;
}

.rare-shop-clock::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: #d50000;
    border-radius: 50%;
    z-index: 1;
}

@keyframes rareClockSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#rareItemButtonTimer::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 170%;
    height: 3em;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, #7f0000, #ff1744, #ff8a80, #fff, #ff8a80, #ff1744, #7f0000);
    background-size: 220% 100%;
    filter: blur(6px);
    border: none;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 12%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 12%, transparent 72%);
    animation: lotteryRainbowShift 4s linear infinite, casinoTimerFade 1.8s ease-in-out infinite;
}

#rareItemButtonTimer.is-unavailable {
    color: #fff;
    font-size: 12px;
    text-shadow:
        0 0 2px #140000,
        0 1px 0 #140000,
        0 -1px 0 #140000,
        1px 0 0 #140000,
        -1px 0 0 #140000;
}

#rareItemButtonTimer.is-unavailable::before {
    display: none;
}

#rareItemButtonTimer:empty {
    display: none;
}

#rareItemContainer {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 0 15px;
}

#rareItemCurrentColumn,
#rareItemHistory {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 15px) / 2);
    width: calc((100% - 15px) / 2);
    max-width: calc((100% - 15px) / 2);
    min-width: 0;
}

#rareItemHistory {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.35);
    border: 1px solid rgba(198, 40, 40, 0.35);
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
}

#rareItemHistory h4 {
    margin: 0 0 4px;
    color: #ff0000;
    font-size: 1em;
}

#rareItemHistoryList {
    overflow-y: auto;
    min-height: 0;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(3 * 70px + 2 * 8px);
}

.rare-history-empty {
    margin: 8px 0 0;
    color: #888;
    font-size: 0.9em;
    text-align: center;
}

.rare-history-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 70px;
    padding: 8px;
    background: rgba(30, 30, 30, 0.75);
    border: 1px solid rgba(198, 40, 40, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

.rare-history-row > img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(139, 69, 19, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(139, 69, 19, 0.35);
}

.rare-history-copy {
    min-width: 0;
    flex: 1;
}

.rare-history-copy strong {
    display: block;
    color: #ff0000;
    font-size: 0.95em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rare-history-copy span {
    display: block;
    color: #aaa;
    font-size: 0.8em;
    line-height: 1.35;
}

#casinoMenu .grand-goob-lottery-bar {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    margin: 5px 0;
    padding: 12px 15px;
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.1), rgba(255, 70, 70, 0.06) 45%, rgba(70, 170, 255, 0.1));
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #ffe082;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
}

#casinoMenu .grand-goob-lottery-bar:hover {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.2), rgba(255, 70, 70, 0.12) 45%, rgba(70, 170, 255, 0.16));
    background-color: transparent;
}

#casinoMenu .grand-goob-lottery-title-wrap {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    min-width: 0;
}

#casinoMenu .grand-goob-lottery-icon-frame {
    width: 22px;
    height: 22px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

#casinoMenu .grand-goob-lottery-icon {
    width: 44.4px;
    height: 38.4px;
    max-width: none;
    position: absolute;
    left: -11.7px;
    top: -9px;
    image-rendering: pixelated;
    pointer-events: none;
}

#casinoMenu .grand-goob-lottery-title {
    display: inline-block;
    background: linear-gradient(90deg, #ff4d4d, #ffb347, #fff176, #69f0ae, #40c4ff, #b388ff, #ff4d4d);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lotteryRainbowShift 4s linear infinite;
    letter-spacing: 0.04em;
    font-size: 1em;
    font-weight: bold;
}

#casinoMenu .grand-goob-lottery-bar-meta {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    font-size: 1em;
    font-weight: bold;
    white-space: nowrap;
}

#casinoMenu .lottery-draw-label {
    color: #ffe7a3;
    font-size: 1em;
    font-weight: bold;
}

#casinoMenu .lottery-pot-glow,
#casinoMenu .lottery-time-glow {
    position: relative;
    z-index: 1;
    font-size: 1em;
    line-height: normal;
    color: #fff4c2;
    padding: 0;
}

#casinoMenu .lottery-pot-glow {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 4px;
}

#casinoMenu .lottery-goob-icon {
    width: 1em;
    height: 1em;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: -0.15em;
}

#casinoMenu .lottery-pot-glow::before {
    content: '';
    position: absolute;
    inset: -2px -6px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(255, 196, 0, 0.72) 0%, rgba(255, 120, 0, 0.28) 45%, transparent 72%);
    z-index: -1;
    animation: lotteryPotPulse 1.5s ease-in-out infinite;
}

#casinoMenu .lottery-time-glow {
    color: #ffe7a3;
    text-align: right;
}

#casinoMenu #grandGoobLotteryArrow {
    margin-left: 2px;
}

@keyframes lotteryRainbowShift {
    0% { background-position: 0% center; }
    100% { background-position: 220% center; }
}

@keyframes lotteryPotPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

#casinoMenu .grand-goob-lottery-stage {
    position: relative;
    overflow: hidden;
    height: 220px;
    margin: 0 auto 12px;
    border-radius: 8px;
    background: #120c09;
}

#casinoMenu .grand-goob-rain {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#casinoMenu .grand-goob-rain img {
    position: absolute;
    top: -28px;
    width: 20px;
    height: 20px;
    animation-name: grandGoobRain;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#casinoMenu .grand-goob-rain img:nth-child(1) { left: 2%; animation-duration: 2.8s; animation-delay: -0.4s; width: 16px; height: 16px; }
#casinoMenu .grand-goob-rain img:nth-child(2) { left: 9%; animation-duration: 3.6s; animation-delay: -1.8s; width: 22px; height: 22px; }
#casinoMenu .grand-goob-rain img:nth-child(3) { left: 16%; animation-duration: 2.4s; animation-delay: -2.1s; width: 14px; height: 14px; }
#casinoMenu .grand-goob-rain img:nth-child(4) { left: 23%; animation-duration: 4.1s; animation-delay: -0.7s; width: 18px; height: 18px; }
#casinoMenu .grand-goob-rain img:nth-child(5) { left: 31%; animation-duration: 3.1s; animation-delay: -2.6s; width: 24px; height: 24px; }
#casinoMenu .grand-goob-rain img:nth-child(6) { left: 39%; animation-duration: 2.6s; animation-delay: -1.2s; width: 15px; height: 15px; }
#casinoMenu .grand-goob-rain img:nth-child(7) { left: 46%; animation-duration: 3.8s; animation-delay: -3.2s; width: 20px; height: 20px; }
#casinoMenu .grand-goob-rain img:nth-child(8) { left: 54%; animation-duration: 2.9s; animation-delay: -0.2s; width: 17px; height: 17px; }
#casinoMenu .grand-goob-rain img:nth-child(9) { left: 61%; animation-duration: 4.4s; animation-delay: -2.4s; width: 23px; height: 23px; }
#casinoMenu .grand-goob-rain img:nth-child(10) { left: 69%; animation-duration: 2.7s; animation-delay: -1.5s; width: 14px; height: 14px; }
#casinoMenu .grand-goob-rain img:nth-child(11) { left: 76%; animation-duration: 3.4s; animation-delay: -3.6s; width: 21px; height: 21px; }
#casinoMenu .grand-goob-rain img:nth-child(12) { left: 83%; animation-duration: 2.5s; animation-delay: -0.9s; width: 16px; height: 16px; }
#casinoMenu .grand-goob-rain img:nth-child(13) { left: 90%; animation-duration: 3.9s; animation-delay: -2.8s; width: 19px; height: 19px; }
#casinoMenu .grand-goob-rain img:nth-child(14) { left: 12%; animation-duration: 4.6s; animation-delay: -4.1s; width: 13px; height: 13px; }
#casinoMenu .grand-goob-rain img:nth-child(15) { left: 48%; animation-duration: 3.3s; animation-delay: -1.1s; width: 18px; height: 18px; }
#casinoMenu .grand-goob-rain img:nth-child(16) { left: 72%; animation-duration: 2.2s; animation-delay: -0.6s; width: 15px; height: 15px; }

@keyframes grandGoobRain {
    0% { transform: translateY(-36px) rotate(0deg); }
    100% { transform: translateY(250px) rotate(180deg); }
}

#casinoMenu .grand-goob-lottery-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    background: transparent;
    pointer-events: none;
}

#casinoMenu .grand-goob-lottery-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

#casinoMenu .grand-goob-lottery-stats div {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.22);
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
}

#casinoMenu .grand-goob-lottery-stats span {
    display: block;
    color: #bcaaa4;
    font-size: 0.75em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

#casinoMenu .grand-goob-lottery-stats strong {
    color: #ffe082;
    font-size: 0.95em;
}

#casinoMenu .grand-goob-lottery-draw-line {
    margin: 0 0 8px;
    text-align: center;
    font-size: 1em;
    color: #ffe7a3;
}

#casinoMenu .grand-goob-lottery-draw-line strong {
    color: #fff4c2;
}

#casinoMenu .grand-goob-lottery-rules {
    margin: 0 0 12px;
    padding: 0 0 0 18px;
    color: #eee;
    font-size: 1em;
    line-height: 1.55;
    text-align: left;
}

#casinoMenu .grand-goob-lottery-rules li {
    margin: 0 0 4px;
}

#casinoMenu .grand-goob-lottery-chance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 10px;
}

#casinoMenu .grand-goob-lottery-chance div {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
}

#casinoMenu .grand-goob-lottery-chance span {
    display: block;
    color: #ffe7a3;
    font-size: 0.85em;
    margin-bottom: 3px;
}

#casinoMenu .grand-goob-lottery-chance strong {
    display: block;
    color: #fff;
    font-size: 1.05em;
}

#casinoMenu .grand-goob-lottery-history {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 193, 7, 0.22);
}

#casinoMenu .lottery-history-title {
    margin: 0 0 6px;
    text-align: center;
    color: #ffe7a3;
    font-size: 0.95em;
    letter-spacing: 0.03em;
}

#casinoMenu .lottery-history-empty {
    margin: 0;
    text-align: center;
    color: #bbb;
    font-size: 0.9em;
}

#casinoMenu .lottery-history-head,
#casinoMenu .lottery-history-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    text-align: center;
}

#casinoMenu .lottery-history-table {
    max-height: 8.05em;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

#casinoMenu .lottery-history-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0 2px 4px;
    background: #16120e;
    color: #ffe7a3;
    font-size: 0.78em;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#casinoMenu .lottery-history-head span,
#casinoMenu .lottery-history-row > :first-child,
#casinoMenu .lottery-history-row > .lottery-history-date,
#casinoMenu .lottery-history-row > .lottery-history-pot,
#casinoMenu .lottery-history-row > .lottery-history-winner {
    text-align: center;
    justify-self: stretch;
}

#casinoMenu .lottery-history-list {
    overflow: visible;
}

#casinoMenu .lottery-history-row {
    box-sizing: border-box;
    min-height: 2.15em;
    padding: 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #eee;
    font-size: 0.9em;
}

#casinoMenu .lottery-history-row > :first-child,
#casinoMenu .lottery-history-date,
#casinoMenu .lottery-history-pot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

#casinoMenu .lottery-history-pot img {
    width: 1em;
    height: 1em;
    object-fit: contain;
}

#casinoMenu .lottery-history-winner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#casinoMenu .lottery-ticket-cost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 2px 0 8px;
    color: #fff4c2;
    font-size: 1.2em;
    font-weight: bold;
}

#casinoMenu .lottery-ticket-cost img {
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
}

#casinoMenu .lottery-ticket-cost span {
    color: #cbbba0;
    font-size: 0.72em;
    font-weight: normal;
}

#casinoMenu #lotteryBuyBtn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(to bottom, #ffb300, #ff8f00);
    color: #2a1a00;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 0.04em;
}

#casinoMenu #lotteryBuyBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#casinoMenu .casino-bet-total {
    margin: 0 0 10px;
    font-size: 1.05em;
    color: #ffd700;
    text-align: center;
    font-weight: bold;
}

.roulette-bet-slip {
    background: rgba(25, 25, 25, 0.9);
    border: 1px solid rgba(220, 20, 60, 0.3);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    max-height: 120px;
    overflow-y: auto;
}

.roulette-bet-slip-empty {
    margin: 0;
    text-align: center;
    color: #888;
    font-size: 0.95em;
    padding: 8px 4px;
}

.roulette-bet-slip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 4px;
    background: rgba(220, 20, 60, 0.12);
    border-radius: 5px;
    font-size: 1.05em;
}

.roulette-bet-slip-item:last-child {
    margin-bottom: 0;
}

.roulette-bet-slip-remove {
    background: rgba(120, 30, 30, 0.5);
    color: #ffcdd2;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.85em;
    flex-shrink: 0;
}

.roulette-num-btn.has-bet {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.7), 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Camera button pulse animation */
@keyframes cameraButtonPulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(30, 136, 229, 0.5);
    }
    50% {
        box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 35px rgba(30, 136, 229, 0.8), 0 0 50px rgba(30, 136, 229, 0.4);
    }
}

#cityStatsMenu .city-stats-body {
    height: calc(970px - 48px);
    overflow: hidden;
    padding: 14px 18px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

#cityStatsMenu .city-stats-inner {
    width: 100%;
    max-width: 900px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

#cityStatsMenu .city-stats-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(0, 150, 136, 0.35);
    flex: 0 0 168px;
    height: 168px;
}

#cityStatsMenu .city-stats-banner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#cityStatsMenu .city-stats-banner-caption {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 7;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

#cityStatsMenu .city-stats-banner-kicker {
    color: #80cbc4;
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 0;
}

#cityStatsMenu .city-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    flex: 0 0 auto;
}

#cityStatsMenu .city-stat-card {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 18px 14px;
    min-height: 86px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    text-align: left;
}

#cityStatsMenu .city-stat-card-hero {
    flex: 0 0 auto;
    min-height: 98px;
    padding: 18px 18px;
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.12), rgba(0, 0, 0, 0.32));
    border: 1px solid rgba(46, 204, 113, 0.4);
    align-items: center;
    text-align: center;
}

#cityStatsMenu .city-stat-label {
    color: #8fbc8f;
    font-size: 0.76em;
    font-weight: normal;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#cityStatsMenu .city-stat-value {
    font-size: 1.28em;
    font-weight: bold;
    line-height: 1.15;
    word-break: break-word;
    color: #fff;
}

#cityStatsMenu .city-stat-hint {
    margin-top: 5px;
    color: #888;
    font-size: 0.74em;
}

#cityStatsMenu .city-stat-card-hero .city-stat-value {
    font-size: 1.75em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#cityStatsMenu .city-stat-card-goobs .city-stat-label {
    color: #8fbc8f;
}

#cityStatsMenu .city-stat-card-goobs .city-stat-value {
    color: #2ecc71;
}

#cityStatsMenu .city-stat-card-citizens {
    border-color: rgba(77, 182, 172, 0.4);
    align-items: center;
    text-align: center;
    justify-content: center;
}

#cityStatsMenu .city-stat-card-citizens .city-stat-label {
    color: #80cbc4;
}

#cityStatsMenu .city-stat-card-citizens .city-stat-value {
    color: #fff;
}

#cityStatsMenu .city-stat-card-blue {
    border-color: rgba(33, 150, 243, 0.4);
    align-items: center;
    text-align: center;
    justify-content: center;
}

#cityStatsMenu .city-stat-card-blue .city-stat-label {
    color: #90caf9;
}

#cityStatsMenu .city-stat-card-blue .city-stat-value {
    color: #64b5f6;
}

#cityStatsMenu .city-stat-card-event {
    border-color: rgba(192, 57, 43, 0.4);
    align-items: center;
    text-align: center;
    justify-content: center;
}

#cityStatsMenu .city-stat-card-event .city-stat-label {
    color: #ef9a9a;
}

#cityStatsMenu .city-stat-card-event .city-stat-value {
    color: #ef5350;
}

#cityStatsMenu .city-stat-card-items {
    border-color: rgba(206, 147, 216, 0.4);
    align-items: center;
    text-align: center;
    justify-content: center;
}

#cityStatsMenu .city-stat-card-items .city-stat-label {
    color: #e1bee7;
}

#cityStatsMenu .city-stat-card-items .city-stat-value {
    color: #ce93d8;
}

#cityStatsMenu .city-stats-live-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(0, 150, 136, 0.14), rgba(0, 0, 0, 0.28));
    border: 1px solid rgba(0, 150, 136, 0.32);
    border-radius: 8px;
    padding: 8px 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}

#cityStatsMenu .city-stats-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4db6ac;
    box-shadow: 0 0 0 0 rgba(77, 182, 172, 0.55);
    animation: cityStatsLivePulse 1.8s ease-out infinite;
    flex-shrink: 0;
}

#cityStatsMenu .city-stats-live-text {
    color: #aaa;
    font-size: 0.78em;
    line-height: 1.25;
}

#cityStatsMenu .city-stats-boards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

#cityStatsMenu .city-stats-board {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(0, 150, 136, 0.28);
    border-radius: 8px;
    padding: 8px 10px 8px;
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#cityStatsMenu .city-stats-board-title {
    color: #80cbc4;
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

#cityStatsMenu .city-stats-board-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: space-between;
}

#cityStatsMenu .city-stats-board-empty {
    color: #888;
    font-size: 0.78em;
    padding: 4px 2px;
}

#cityStatsMenu .city-stats-board-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    flex: 0 0 auto;
    line-height: 1.15;
    position: relative;
    overflow: hidden;
}

#cityStatsMenu .city-stats-board-rank {
    color: #4db6ac;
    font-weight: bold;
    font-size: 0.75em;
}

#cityStatsMenu .city-stats-board-name {
    color: #eee;
    font-weight: bold;
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
}

#cityStatsMenu .city-stats-board-name:hover {
    color: #80cbc4;
    text-decoration: underline;
}

#cityStatsMenu .city-stats-medal-gold {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.22), rgba(255, 215, 0, 0.06) 55%, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.12);
}

#cityStatsMenu .city-stats-medal-gold .city-stats-board-rank,
#cityStatsMenu .city-stats-medal-gold .city-stats-board-name,
#cityStatsMenu .city-stats-medal-gold .city-stats-board-value {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

#cityStatsMenu .city-stats-medal-gold .city-stats-board-name:hover {
    color: #ffe566;
}

#cityStatsMenu .city-stats-medal-silver {
    background: linear-gradient(90deg, rgba(192, 198, 210, 0.2), rgba(192, 198, 210, 0.05) 55%, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(192, 198, 210, 0.4);
}

#cityStatsMenu .city-stats-medal-silver .city-stats-board-rank,
#cityStatsMenu .city-stats-medal-silver .city-stats-board-name,
#cityStatsMenu .city-stats-medal-silver .city-stats-board-value {
    color: #c0c6d2;
    text-shadow: 0 0 6px rgba(192, 198, 210, 0.25);
}

#cityStatsMenu .city-stats-medal-silver .city-stats-board-name:hover {
    color: #e8ecf3;
}

#cityStatsMenu .city-stats-medal-bronze {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.22), rgba(205, 127, 50, 0.06) 55%, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(205, 127, 50, 0.42);
}

#cityStatsMenu .city-stats-medal-bronze .city-stats-board-rank,
#cityStatsMenu .city-stats-medal-bronze .city-stats-board-name,
#cityStatsMenu .city-stats-medal-bronze .city-stats-board-value {
    color: #cd7f32;
    text-shadow: 0 0 6px rgba(205, 127, 50, 0.28);
}

#cityStatsMenu .city-stats-medal-bronze .city-stats-board-name:hover {
    color: #e0a066;
}

#cityStatsMenu .city-stats-board-value {
    color: #bbb;
    font-size: 0.92em;
    font-weight: bold;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#cityStatsMenu .city-stats-board-icon {
    height: 1.05em;
    width: auto;
    vertical-align: middle;
    pointer-events: none;
    flex-shrink: 0;
}

#cityStatsMenu .city-stats-board-aura {
    color: #7dd3fc;
    text-shadow: 0 0 6px rgba(125, 211, 252, 0.45);
}

#cityStatsMenu .city-stats-board-time {
    color: #80cbc4;
}

@keyframes cityStatsLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(77, 182, 172, 0.55);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(77, 182, 172, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(77, 182, 172, 0);
    }
}

#cityStatsMenu .city-stats-updates {
    background: rgba(40, 40, 40, 0.75);
    border-radius: 12px;
    padding: 14px;
    border: 2px solid rgba(255, 183, 77, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

#cityStatsMenu .city-stats-updates-title {
    color: #ffb74d;
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 0.5px;
}

#cityStatsMenu .city-stats-ecg-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
    background: linear-gradient(to top, rgba(0, 20, 18, 0.82), rgba(0, 30, 26, 0.35) 55%, transparent);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

#cityStatsMenu .city-stats-ecg-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(77, 182, 172, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 182, 172, 0.1) 1px, transparent 1px);
    background-size: 100% 16px, 24px 100%;
    opacity: 0.55;
}

#cityStatsMenu .city-stats-ecg-canvas {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 92%;
    display: block;
}

#cityStatsMenu .city-stats-ecg-baseline {
    stroke: rgba(77, 182, 172, 0.45);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

#cityStatsMenu .city-stats-ecg-draw {
    fill: none;
    stroke: #4dffb8;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 110 890;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 4px rgba(77, 255, 184, 0.85)) drop-shadow(0 0 10px rgba(0, 200, 140, 0.45));
    animation: cityStatsEcgSweep 7s linear infinite;
}

@keyframes cityStatsEcgSweep {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

#manorInteriorMenu {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

#manorInteriorMenu[style*="display: block"],
#manorInteriorMenu[style*="display:block"] {
    display: flex !important;
    flex-direction: column;
}

#manorInteriorMenu > div:first-child {
    flex-shrink: 0;
}

#manorInteriorMenu .manor-interior-body {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(970px - 52px);
    overflow: hidden;
    padding: 8px 0 12px;
    display: flex;
    flex-direction: column;
}

#manorInteriorMenu .manor-interior-inner {
    max-width: 820px;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#manorInteriorMenu .manor-interior-banner {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

#manorInteriorMenu .manor-interior-banner img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
}

#manorInteriorMenu .manor-interior-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.2));
}

#manorInteriorMenu .manor-interior-banner-title {
    margin: 0 0 2px 0;
    color: #D4AF37;
    font-size: 1.55em;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

#manorInteriorMenu .manor-interior-banner-subtitle {
    margin: 0;
    color: #ddd;
    font-size: 1.1em;
    font-style: italic;
}

#manorInteriorMenu .manor-interior-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    flex: 0 0 auto;
    align-items: start;
    align-content: start;
}

#manorInteriorMenu .manor-card-wide {
    grid-column: 1 / -1;
}

#manorInteriorMenu .manor-interior-card {
    background: rgba(40, 40, 40, 0.82);
    border-radius: 12px;
    padding: 14px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#manorInteriorMenu .manor-card-wardrobe {
    border-color: rgba(212, 175, 55, 0.4);
    align-self: start;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide {
    padding: 10px 12px;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-card-desc {
    font-size: 0.84em;
    margin-bottom: 8px;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-item {
    padding: 10px 12px;
    min-height: 148px;
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
    justify-content: center;
    overflow: visible;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-item img,
#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-item .glitter-clothing-icon-manor img {
    width: 50px;
    height: 50px;
    margin-bottom: 0;
    filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.5));
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-item .glitter-clothing-icon-manor {
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-name {
    font-size: 0.86em;
    margin-bottom: 3px;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-clothing-tag {
    font-size: 0.76em;
    margin-bottom: 8px;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-claim-btn {
    padding: 7px 10px;
    font-size: 0.8em;
}

#manorInteriorMenu .manor-card-wardrobe.manor-card-wide .manor-card-footnote {
    margin-top: 8px;
    font-size: 0.72em;
}

#manorInteriorMenu .manor-card-title {
    border-color: rgba(255, 215, 0, 0.35);
    align-self: start;
}

#manorInteriorMenu .manor-card-stardom {
    border-color: rgba(255, 215, 0, 0.35);
    align-self: start;
}

#manorInteriorMenu .manor-card-stardom,
#manorInteriorMenu .manor-card-title {
    padding: 10px 12px;
}

#manorInteriorMenu .manor-stardom-box,
#manorInteriorMenu .manor-title-box {
    position: relative;
    background: rgba(20, 20, 20, 0.65);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    padding: 12px 12px;
    text-align: center;
    flex: 0 0 auto;
    height: 188px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

#manorInteriorMenu .manor-stardom-icon {
    font-size: 2.6em;
    line-height: 1;
    margin-bottom: 2px;
    filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.8));
    animation: manorGentleFloat 3s ease-in-out infinite;
}

#manorInteriorMenu .manor-stardom-quote {
    margin: 0;
    color: #FFD700;
    font-size: 0.92em;
    font-style: italic;
    line-height: 1.35;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    padding: 0 8px;
}

#manorInteriorMenu .manor-stardom-quote strong {
    color: #FFD700;
    font-style: normal;
}

#manorInteriorMenu .manor-stardom-note {
    margin: 0;
    color: #ccc;
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.3;
    padding: 0 8px;
}

#manorInteriorMenu .manor-stardom-box .manor-claim-btn,
#manorInteriorMenu .manor-title-box .manor-claim-btn {
    padding: 8px 12px;
    font-size: 0.85em;
    margin-top: 2px;
}

#manorInteriorMenu .manor-card-footnote-spacer {
    visibility: hidden;
}

#manorInteriorMenu .manor-card-label {
    color: #D4AF37;
    font-size: 0.78em;
    font-weight: bold;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8px;
}

#manorInteriorMenu .manor-card-desc {
    margin: 0 0 10px 0;
    color: #ccc;
    font-size: 0.82em;
    line-height: 1.4;
    text-align: center;
}

#manorInteriorMenu .manor-clothing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}

#manorInteriorMenu .manor-clothing-item {
    background: rgba(20, 20, 20, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

#manorInteriorMenu .manor-clothing-item img,
#manorInteriorMenu .manor-clothing-item .glitter-clothing-icon-manor img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    margin-bottom: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

#manorInteriorMenu .manor-clothing-item .glitter-clothing-icon-manor {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
}

#manorInteriorMenu .manor-clothing-name {
    color: #D4AF37;
    font-size: 0.78em;
    font-weight: bold;
    margin-bottom: 2px;
}

#manorInteriorMenu .manor-clothing-tag {
    color: #888;
    font-size: 0.68em;
    margin-bottom: 6px;
}

#manorInteriorMenu .manor-claim-btn {
    width: 100%;
    background: linear-gradient(to bottom, #8B4513, #654321);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.78em;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

#manorInteriorMenu .manor-claim-btn:hover {
    transform: scale(1.03);
}

#manorInteriorMenu .manor-card-footnote {
    margin-top: 8px;
    color: #888;
    font-size: 0.68em;
    text-align: center;
    font-style: italic;
}

#manorInteriorMenu .manor-card-drink {
    border-color: rgba(212, 175, 55, 0.4);
    padding: 8px 14px 10px;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#manorInteriorMenu .manor-card-drink .manor-card-label {
    margin-bottom: 8px;
    flex-shrink: 0;
}

#manorInteriorMenu .manor-drink-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(20, 20, 20, 0.65);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
    flex: 1 1 auto;
    min-height: 0;
}

#manorInteriorMenu .manor-drink-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.8));
}

#manorInteriorMenu .manor-drink-copy {
    flex: 1 1 auto;
    min-width: 0;
}

#manorInteriorMenu .manor-drink-quote {
    margin: 0 0 6px 0;
    color: #FFD700;
    font-size: 0.95em;
    font-style: italic;
    line-height: 1.35;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

#manorInteriorMenu .manor-drink-note {
    margin: 0;
    color: #ccc;
    font-size: 0.84em;
    font-style: italic;
    line-height: 1.35;
}

#manorInteriorMenu .manor-drink-needs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

#manorInteriorMenu .manor-drink-need {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 68px;
    padding: 12px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 6px;
}

#manorInteriorMenu .manor-drink-need img {
    height: 30px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

#manorInteriorMenu .manor-drink-need span {
    color: #D4AF37;
    font-size: 0.68em;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

#manorInteriorMenu .manor-drink-btn {
    width: auto;
    min-width: 148px;
    flex-shrink: 0;
    padding: 14px 18px;
    font-size: 0.92em;
    white-space: nowrap;
}

#manorInteriorMenu .manor-drink-btn:disabled {
    transform: none;
    cursor: not-allowed;
    opacity: 0.85;
}

#manorInteriorMenu .manor-title-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-bottom: 2px;
    filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.8));
    animation: manorGentleFloat 3s ease-in-out infinite;
}

#manorInteriorMenu .manor-title-name {
    color: #FFD700;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    margin-bottom: 0;
}

#manorInteriorMenu .manor-title-desc {
    color: #ccc;
    font-size: 0.82em;
    font-style: italic;
    margin-bottom: 0;
}

#manorInteriorMenu .manor-title-glitter {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

#manorInteriorMenu .manor-title-glitter-1 {
    top: 18%;
    left: 18%;
    width: 4px;
    height: 4px;
    background: #FFD700;
    animation: manorGlitterFloat1 3s infinite;
}

#manorInteriorMenu .manor-title-glitter-2 {
    top: 28%;
    right: 20%;
    width: 3px;
    height: 3px;
    background: #FFF;
    animation: manorGlitterFloat2 4s infinite;
}

#manorInteriorMenu .manor-title-glitter-3 {
    top: 62%;
    left: 24%;
    width: 5px;
    height: 5px;
    background: #DAA520;
    animation: manorGlitterFloat3 3.5s infinite;
}

#manorInteriorMenu .manor-quote-box {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid #FFD700;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    flex: 1;
}

#manorInteriorMenu .manor-quote-box p {
    margin: 0;
    color: #FFD700;
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.45;
}

@keyframes manorGentleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(4deg); }
}

@keyframes manorGlitterFloat1 {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    50% { opacity: 1; transform: translateY(-14px) scale(1.4); }
}

@keyframes manorGlitterFloat2 {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
    60% { opacity: 1; transform: translateY(-10px) scale(1.2); }
}

@keyframes manorGlitterFloat3 {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
    40% { opacity: 0.9; transform: translateY(-16px) scale(1.3); }
}

/* Searching / Scavenging Menu */
#scavanageringMenu .search-menu-desc {
    margin: 12px 0;
    background: linear-gradient(to right, rgba(80, 0, 0, 0.25), rgba(40, 10, 10, 0.45));
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 4px solid #cc0000;
    color: #eee;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

#scavanageringMenu .search-menu-desc p {
    margin: 0;
    line-height: 1.5;
    font-size: 1.05em;
    text-shadow: 0 0 12px rgba(204, 0, 0, 0.2);
}

#scavanageringMenu .search-tier {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(25, 25, 25, 0.85);
    border: 2px solid rgba(204, 0, 0, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#scavanageringMenu .search-tier:hover {
    border-color: rgba(204, 0, 0, 0.4);
}

#scavanageringMenu .search-tier-header {
    background: linear-gradient(to right, #4a0000, #990000, #cc0000);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#scavanageringMenu .search-tier-title {
    margin: 0;
    color: #fff;
    font-size: 1.15em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
}

#scavanageringMenu .search-tier-collection,
#scavanageringMenu .search-item-collection {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
}

#scavanageringMenu .search-item-collection {
    display: inline-block;
    margin-left: 8px;
    margin-top: 0;
    color: #cc99ff;
    border-color: rgba(204, 153, 255, 0.28);
    background: rgba(80, 30, 90, 0.28);
}

#scavanageringMenu .search-tier-collection.is-complete,
#scavanageringMenu .search-item-collection.is-complete {
    color: #4CAF50;
    border-color: rgba(76, 175, 80, 0.4);
}

#scavanageringMenu .search-fly-layer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

#scavanageringMenu .search-fly-bit {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 220, 120, 0.45));
    animation: searchFlyBit ease-in-out infinite;
    opacity: 0;
}

#scavanageringMenu .search-glass {
    display: none;
    position: absolute;
    top: 42%;
    left: 8%;
    width: 150px;
    height: 150px;
}

#scavanageringMenu .search-idle-fx {
    display: none;
}

#scavanageringMenu .search-live-reveal {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
    pointer-events: none;
    background: none;
}

#scavanageringMenu .search-live-reveal.is-visible {
    display: flex;
}

#scavanageringMenu .search-live-reveal span {
    font-family: 'Arial Black', sans-serif;
    font-size: 1.7em;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px currentColor;
}

#scavanageringMenu .search-live-reveal.is-searching span {
    color: #ffe082;
    animation: searchLivePulse 0.7s ease-in-out infinite;
}

#scavanageringMenu .search-live-reveal.is-found span {
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700, 0 0 22px rgba(255, 215, 0, 0.6);
}

#scavanageringMenu .search-live-reveal.is-miss span {
    color: #ff5252;
    text-shadow: 0 0 10px #ff0000, 0 0 22px rgba(255, 0, 0, 0.5);
}

#searchAnimationContainer.is-live-search {
    box-shadow: inset 0 0 40px rgba(255, 200, 80, 0.18);
}

#searchAnimationContainer.is-live-search .search-fly-layer {
    display: block;
}

#searchAnimationContainer.is-live-search .search-idle-fx {
    display: none;
}

#searchAnimationContainer.is-live-search .search-glass {
    display: block;
    animation: searchLiveSweep 2.4s ease-in-out forwards, searchLiveRotate 2.4s ease-in-out forwards;
}

@keyframes searchLiveSweep {
    0% { top: 42%; left: 6%; }
    30% { top: 26%; left: 34%; }
    62% { top: 38%; left: 58%; }
    100% { top: 28%; left: 46%; }
}

@keyframes searchLiveRotate {
    0% { transform: rotate(-8deg); }
    40% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
    100% { transform: rotate(6deg); }
}

@keyframes searchLivePulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes searchFlyBit {
    0% {
        opacity: 0;
        transform: translate(0, 12px) scale(0.55) rotate(0deg);
    }
    18% { opacity: 0.95; }
    70% {
        opacity: 0.88;
        transform: translate(var(--fly-x), var(--fly-y)) scale(1) rotate(var(--fly-rot));
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--fly-x) * 1.25), calc(var(--fly-y) - 24px)) scale(0.7) rotate(var(--fly-rot));
    }
}

#scavanageringMenu .search-tier-meta {
    margin: 4px 0 0 0;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#scavanageringMenu .search-tier-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

#scavanageringMenu .search-tier-btn-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 136px;
    height: 36px;
}

#scavanageringMenu .search-tier-search-btn {
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #666666, #555555);
    border: none;
    color: white;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

#scavanageringMenu .search-tier-btn-wrap.is-agility-locked,
#scavanageringMenu .search-tier-btn-wrap.is-search-locked {
    cursor: pointer;
}

#scavanageringMenu .search-tier-btn-wrap.is-agility-locked .search-tier-search-btn,
#scavanageringMenu .search-tier-btn-wrap.is-search-locked .search-tier-search-btn {
    cursor: pointer;
}

#scavanageringMenu .search-agility-lock {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: transparent;
    z-index: 2;
    pointer-events: auto;
    overflow: hidden;
    cursor: pointer;
}

#scavanageringMenu .search-agility-lock::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    z-index: 0;
}

#scavanageringMenu .search-agility-lock-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
    padding: 0 6px;
    box-sizing: border-box;
}

#scavanageringMenu .search-lock-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff0000;
    flex-shrink: 0;
}

#scavanageringMenu .search-lock-icon {
    height: 14px;
    width: auto;
    display: block;
}

#scavanageringMenu .search-lock-text {
    display: block;
    color: #ffffff;
    font-size: 0.58em;
    font-weight: bold;
    line-height: 1.1;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

#scavanageringMenu .search-tier-arrow {
    color: #fff;
    font-size: 1.25em;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
    line-height: 1;
    user-select: none;
}

#scavanageringMenu .search-tier-arrow:hover {
    background: rgba(0, 0, 0, 0.4);
}

#scavanageringMenu .search-tier-content {
    display: none;
    padding: 18px 16px;
    color: #ddd;
    background: rgba(15, 15, 15, 0.6);
    border-top: 1px solid rgba(204, 0, 0, 0.2);
}

#scavanageringMenu .search-rewards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(250px, 1.15fr);
    gap: 14px;
}

#scavanageringMenu .search-rewards-card {
    background: rgba(18, 18, 18, 0.75);
    padding: 16px 14px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#scavanageringMenu .search-rewards-card-items {
    border-top: 4px solid #cc66ff;
}

#scavanageringMenu .search-rewards-card-goobs {
    border-top: 4px solid #ffcc00;
}

#scavanageringMenu .search-rewards-card-clothing {
    border-top: 4px solid #88ccee;
}

#scavanageringMenu .search-rewards-card-title {
    margin: 0 0 14px 0;
    text-align: center;
    font-size: 1.05em;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#scavanageringMenu .search-rewards-card-title-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    color: #cc99ff;
}

#scavanageringMenu .search-rewards-card-title-items .search-item-collection {
    margin-left: 0;
}

#scavanageringMenu .search-rewards-card-title-items .search-rewards-subtitle {
    flex-basis: 100%;
}

#scavanageringMenu .search-rewards-card-title-goobs {
    color: #ffcc00;
}

#scavanageringMenu .search-rewards-card-title-clothing {
    color: #88ccee;
}

#scavanageringMenu .search-rewards-subtitle {
    display: block;
    margin-top: 3px;
    font-size: 0.72em;
    color: #999;
    font-weight: normal;
}

#scavanageringMenu .search-reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#scavanageringMenu .search-reward-row-last {
    margin-bottom: 0;
    border-bottom: none;
}

#scavanageringMenu .search-reward-row.is-found {
    background: rgba(76, 175, 80, 0.08);
    border-radius: 6px;
    border-bottom-color: transparent;
}

#scavanageringMenu .search-reward-row.is-found .search-reward-item-label::after {
    content: '✓';
    color: #4CAF50;
    font-weight: 800;
    margin-left: 2px;
}

#scavanageringMenu .search-reward-item-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee;
    font-size: 0.92em;
}

#scavanageringMenu .search-reward-item-label img:not(.aura-teken) {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

#scavanageringMenu .search-reward-percent {
    font-weight: bold;
    font-size: 1em;
    color: #cc99ff;
    min-width: 36px;
    text-align: right;
}

#scavanageringMenu .search-reward-percent-clothing {
    color: #88ccee;
    flex-shrink: 0;
}

#scavanageringMenu .search-rewards-card-clothing .search-reward-item-label {
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

#scavanageringMenu .search-rewards-note {
    margin: 12px 0 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 153, 85, 0.08);
    border: 1px solid rgba(255, 153, 85, 0.2);
    font-size: 0.8em;
    line-height: 1.4;
    color: #bbb;
    text-align: center;
}

#scavanageringMenu .search-goob-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 9px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.9em;
    line-height: 1.35;
}

#scavanageringMenu .search-goob-row-last {
    margin-bottom: 0;
    border-bottom: none;
}

#scavanageringMenu .search-goob-label {
    color: #eee;
    padding-right: 8px;
    white-space: nowrap;
}

.reward-item-aura {
    color: #7dd3fc;
    font-size: 0.78em;
    font-weight: bold;
    margin-left: 6px;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(125, 211, 252, 0.35);
}

/* Match Searching aura size to Church / Trash Pile (larger label + row context) */
#scavanageringMenu .search-reward-item-label .reward-item-aura {
    font-size: 0.96em;
}

img.aura-teken {
    height: 1em;
    width: auto;
    max-width: 1.15em;
    vertical-align: -0.15em;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    object-fit: contain;
    flex-shrink: 0;
}

.reward-item-aura img.aura-teken {
    height: 1em;
    width: auto;
    max-width: 1.15em;
}

.item-aura-badge img.aura-teken {
    margin-right: 0.08em;
    margin-left: 0;
}

#scavanageringMenu .search-rewards-card-items .search-reward-item-label img:not(.aura-teken),
.trash-rewards-content .trash-rewards-card-items .trash-rewards-item-label img:not(.aura-teken),
.church-rewards-card-items .church-rewards-item-label img:not(.aura-teken) {
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

#scavanageringMenu .search-rewards-card-items .search-reward-item-label img:not(.aura-teken):hover,
.trash-rewards-content .trash-rewards-card-items .trash-rewards-item-label img:not(.aura-teken):hover,
.church-rewards-card-items .church-rewards-item-label img:not(.aura-teken):hover {
    transform: scale(1.75);
    z-index: 5;
    filter: drop-shadow(0 4px 12px rgba(125, 211, 252, 0.45));
}

#scavanageringMenu .search-goob-label em {
    display: block;
    font-style: normal;
    font-size: 0.85em;
    color: #999;
    margin-left: 4px;
}

#scavanageringMenu .search-goob-percent {
    font-weight: bold;
    font-size: 0.95em;
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
}

#scavanageringMenu .search-goob-percent-loss {
    color: #ff6666;
}

#scavanageringMenu .search-goob-percent-win {
    color: #88ff88;
}

#scavanageringMenu .search-goob-percent-jackpot {
    color: #ffdd44;
}

#scavanageringMenu .search-goob-percent-nothing {
    color: #ff4444;
}

#viewPlayerStatsPanel {
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 14px;
}

#viewPlayerTabsColumn {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%; /* always match left column height */
    align-self: stretch;
    overflow: hidden;
}

#viewPlayerTabsColumn .view-player-tab-nav {
    flex-shrink: 0;
}

#viewPlayerTabsColumn .view-player-tab-nav button {
    padding: 8px !important;
}

#viewPlayerStatsPanel.view-player-tab-static {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#playerStatsContent {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-height: 0;
}

#viewPlayerStatsPanel.view-player-tab-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

#viewPlayerStatsPanel.view-player-tab-static::-webkit-scrollbar,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar {
    width: 8px;
}

#viewPlayerStatsPanel.view-player-tab-static::-webkit-scrollbar-track,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

#viewPlayerStatsPanel.view-player-tab-static::-webkit-scrollbar-thumb,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 252, 0.35);
    border-radius: 4px;
}

#viewPlayerStatsPanel.view-player-tab-static::-webkit-scrollbar-thumb:hover,
#viewPlayerStatsPanel.view-player-tab-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(125, 211, 252, 0.55);
}

#viewPlayerMenu .view-player-aura-card {
    background: rgba(40, 40, 40, 0.7);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: visible;
}

#viewPlayerMenu .view-player-aura-card-header {
    color: #3498db;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 1px solid #3498db;
    padding-bottom: 4px;
}

#viewPlayerMenu .view-player-aura-card .view-player-aura-hero-value-wrap {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    overflow: visible;
    min-width: 0;
}

#viewPlayerMenu .view-player-aura-card .view-player-aura-hero-value {
    position: relative;
    z-index: 2;
    color: #7dd3fc;
    font-size: 1.75em;
    line-height: 1.18;
    white-space: nowrap;
    font-weight: bold;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(125, 211, 252, 0.45);
    animation: viewPlayerAuraGlow 2.6s ease-in-out infinite;
}

#viewPlayerMenu .view-player-aura-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: 1;
    animation: viewPlayerAuraSparkEmit 2.4s ease-out infinite;
    animation-delay: var(--d, 0s);
}

#viewPlayerMenu .view-player-aura-spark-sm {
    width: 5px;
    height: 5px;
}

#viewPlayerMenu .view-player-aura-spark::before,
#viewPlayerMenu .view-player-aura-spark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(125, 211, 252, 0.85) 45%,
        #bae6fd 50%,
        rgba(125, 211, 252, 0.85) 55%,
        transparent 100%
    );
    box-shadow: 0 0 8px rgba(125, 211, 252, 0.95), 0 0 16px rgba(52, 152, 219, 0.55);
}

#viewPlayerMenu .view-player-aura-spark::before {
    width: 12px;
    height: 2px;
}

#viewPlayerMenu .view-player-aura-spark::after {
    width: 2px;
    height: 12px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(125, 211, 252, 0.85) 45%,
        #bae6fd 50%,
        rgba(125, 211, 252, 0.85) 55%,
        transparent 100%
    );
}

#viewPlayerMenu .view-player-aura-spark-sm::before {
    width: 8px;
    height: 1.5px;
}

#viewPlayerMenu .view-player-aura-spark-sm::after {
    width: 1.5px;
    height: 8px;
}

@keyframes viewPlayerAuraSparkEmit {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.15);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1);
    }
}

@keyframes viewPlayerAuraGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(125, 211, 252, 0.55), 0 0 20px rgba(52, 152, 219, 0.35);
    }
    50% {
        text-shadow: 0 0 16px rgba(125, 211, 252, 0.95), 0 0 28px rgba(52, 152, 219, 0.55);
    }
}

#viewPlayerStatsPanel .view-player-stat-card {
    background: rgba(40, 40, 40, 0.7);
    border-radius: 10px;
    padding: 8px 11px;
    margin-bottom: 0;
    text-align: center;
    box-sizing: border-box;
    flex: 1 1 0; /* fill right column height evenly */
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

#viewPlayerStatsPanel .view-player-stat-card-green {
    border: 2px solid rgba(46, 204, 113, 0.5);
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.25);
}

#viewPlayerStatsPanel .view-player-stat-card-blue {
    border: 2px solid rgba(52, 152, 219, 0.5);
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.25);
}

#viewPlayerStatsPanel .view-player-stat-card-red {
    border: 2px solid rgba(231, 76, 60, 0.5);
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.25);
}

#viewPlayerStatsPanel .view-player-stat-card-aura {
    border: 2px solid rgba(125, 211, 252, 0.5);
    box-shadow: 0 4px 14px rgba(125, 211, 252, 0.25);
}

#viewPlayerStatsPanel .view-player-stat-card-title {
    color: #aaa;
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

#viewPlayerStatsPanel .view-player-stat-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 2px;
    flex-shrink: 0;
}

#viewPlayerStatsPanel .view-player-stat-card-header .view-player-stat-card-title {
    margin-bottom: 0;
}

#viewPlayerStatsPanel .view-player-stat-card-value {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.15;
    word-break: break-word;
    flex-shrink: 0;
    min-height: 0;
}

#viewPlayerStatsPanel .view-player-stat-value-lg {
    font-size: 1.85em;
    letter-spacing: -0.01em;
}

#viewPlayerStatsPanel .view-player-stat-value-green {
    color: rgba(6, 233, 17, 0.85);
    text-shadow: 0 2px 10px rgba(46, 204, 113, 0.45);
}

#viewPlayerStatsPanel .view-player-stat-value-blue {
    color: #3498db;
    text-shadow: 0 2px 10px rgba(52, 152, 219, 0.45);
}

#viewPlayerStatsPanel .view-player-stat-value-red {
    color: #e74c3c;
    text-shadow: 0 2px 10px rgba(231, 76, 60, 0.45);
}

#viewPlayerStatsPanel .view-player-stat-value-aura {
    color: #7dd3fc;
    text-shadow: 0 2px 10px rgba(125, 211, 252, 0.45);
    font-size: 1.25em;
}

#viewPlayerStatsPanel .view-player-stat-split {
    display: flex;
    justify-content: space-around;
    gap: 7px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

#viewPlayerStatsPanel .view-player-stat-card-green .view-player-stat-split {
    border-top-color: rgba(46, 204, 113, 0.35);
}

#viewPlayerStatsPanel .view-player-stat-card-blue .view-player-stat-split {
    border-top-color: rgba(52, 152, 219, 0.35);
}

#viewPlayerStatsPanel .view-player-stat-card-red .view-player-stat-split {
    border-top-color: rgba(231, 76, 60, 0.35);
}

#viewPlayerStatsPanel .view-player-stat-split-single {
    justify-content: center;
}

#viewPlayerStatsPanel .view-player-stat-split-item {
    text-align: center;
    min-width: 0;
}

#viewPlayerStatsPanel .view-player-stat-split-label {
    color: #aaa;
    font-size: 1.02em;
    margin-bottom: 3px;
    line-height: 1.2;
}

#viewPlayerStatsPanel .view-player-stat-split-value {
    color: #2ecc71;
    font-weight: bold;
    font-size: 1.14em;
    line-height: 1.2;
    word-break: break-word;
}

#viewPlayerStatsPanel .view-player-stat-card-blue .view-player-stat-split-value {
    color: #3498db;
}

#viewPlayerStatsPanel .view-player-stat-card-red .view-player-stat-split-value {
    color: #e74c3c;
}

#viewPlayerStatsPanel .view-player-stat-inline-muted {
    color: #aaa;
    font-size: 1.02em;
    font-weight: normal;
}

#viewPlayerStatsPanel .view-player-stat-referral-count {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1em;
}

#viewPlayerStatsPanel .view-player-stat-icon-md {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}

#viewPlayerStatsPanel .view-player-stat-icon-lg {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.15));
}

#viewPlayerStatsPanel .view-player-stat-aura-icon {
    color: #7dd3fc;
    font-size: 1.25em;
    font-weight: bold;
    filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.45));
}

/* Agility Bootcamp — field themes & gameplay UI */
.agility-bootcamp-select {
    position: relative;
    padding: 12px 12px 10px;
    border-radius: 10px;
    border: 1px solid #4a5c3a;
    background-color: #1a2214;
    background-image:
        linear-gradient(165deg, rgba(22, 30, 18, 0.92), rgba(12, 16, 10, 0.96)),
        repeating-linear-gradient(120deg, rgba(74, 92, 58, 0.4) 0 12px, rgba(45, 58, 36, 0.4) 12px 24px, rgba(58, 72, 44, 0.32) 24px 36px, rgba(34, 44, 26, 0.4) 36px 48px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.agility-menu-body {
    box-sizing: border-box;
    height: calc(970px - 48px);
    overflow-y: auto;
    padding: 16px 0;
}
.agility-menu-body.agility-menu-fields-view {
    overflow-y: hidden;
    padding: 12px 0 8px;
}
.agility-menu-fields-view .agility-bootcamp-back { margin-bottom: 10px; }
.agility-menu-fields-view .agility-bootcamp-select { padding: 10px 12px 8px; }
.agility-menu-fields-view .agility-level-select-title { margin-bottom: 4px; font-size: 1.08em; }
.agility-menu-fields-view .agility-level-select-hint { margin-bottom: 10px; }
.agility-menu-fields-view .agility-level-grid { gap: 8px; }
.agility-menu-fields-view .agility-level-btn { padding: 9px 8px 7px; }
.agility-menu-fields-view .agility-level-btn-num { margin-bottom: 4px; padding: 2px 8px; }
.agility-menu-fields-view .agility-level-btn-title { margin-bottom: 2px; font-size: 1em; }
.agility-menu-fields-view .agility-level-btn-tagline { margin-bottom: 4px; font-size: 0.76em; }
.agility-menu-fields-view .agility-level-btn-reward { padding-top: 4px; font-size: 0.72em; line-height: 1.25; }
.agility-bootcamp-back { margin-bottom: 20px; }
.agility-level-select-title {
    color: #c5e1a5;
    margin: 0 0 6px;
    text-align: center;
    font-size: 1.15em;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.agility-level-select-hint {
    color: #7a8a68;
    text-align: center;
    font-size: 0.78em;
    margin: 0 0 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.agility-level-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 0;
}
.agility-level-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.agility-level-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 8px, transparent 8px 16px);
}
.agility-level-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
.agility-level-btn:disabled { filter: grayscale(0.4) brightness(0.78); }
.agility-level-btn-easy {
    background: linear-gradient(to bottom, #5a7a42, #3d5628);
    border-color: rgba(174, 213, 129, 0.28);
}
.agility-level-btn-mid {
    background: linear-gradient(to bottom, #456838, #2e4a24);
    border-color: rgba(129, 199, 132, 0.25);
}
.agility-level-btn-hard {
    background: linear-gradient(to bottom, #6d5a45, #4a3a2c);
    border-color: rgba(188, 170, 138, 0.28);
}
.agility-level-btn-boss {
    background: linear-gradient(to bottom, #3a3420, #1a1608);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.22),
        0 3px 10px rgba(0, 0, 0, 0.28);
}
.agility-level-btn-num {
    position: relative;
    z-index: 1;
    display: inline-block;
    align-self: center;
    font-size: 0.68em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.28);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.agility-level-btn-boss .agility-level-btn-num {
    background: rgba(255, 193, 7, 0.22);
    color: #ffe082;
}
.agility-level-btn-title {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.05em;
    font-weight: bold;
    margin-bottom: 3px;
}
.agility-level-btn-tagline {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.78em;
    font-weight: normal;
    opacity: 0.92;
    font-style: italic;
    margin-bottom: 6px;
}
.agility-level-btn-reward {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.76em;
    font-weight: normal;
    opacity: 0.9;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    line-height: 1.35;
}
.agility-level-goob-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: -2px;
    margin-right: 2px;
}
.agility-level-btn-locked { font-style: normal; opacity: 0.85; }
.agility-hud { text-align: center; margin-bottom: 8px; }
.agility-hud-title { color: #aed581; font-size: 1.35em; margin: 0 0 2px; letter-spacing: 0.02em; }
.agility-hud-progress { color: #ddd; font-size: 0.95em; margin: 0 0 6px; }
.agility-field-mechanic { text-align: center; color: #9ccc65; font-size: 0.82em; margin: 0 0 6px; min-height: 1.1em; opacity: 0.92; }
.agility-run-stats { text-align: center; color: #bbb; font-size: 0.82em; margin: 0 0 8px; min-height: 1.1em; }
.agility-next-preview { text-align: center; font-size: 0.8em; color: #888; margin-bottom: 10px; min-height: 1.2em; }
.agility-is-loading .agility-hud-title,
.agility-is-loading .agility-field-mechanic,
.agility-is-loading .agility-next-preview,
.agility-is-loading .agility-run-stats { visibility: hidden; height: 0; margin: 0; overflow: hidden; }
.agility-is-loading .agility-hud-progress { color: #c5e1a5; font-style: italic; }
.agility-field { position: relative; width: 100%; height: 520px; background: url('images/camproute.png') center center / cover no-repeat; border-radius: 8px; overflow: hidden; border: 2px solid #4CAF50; }
.agility-field-loading { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: linear-gradient(to bottom, rgba(18, 28, 18, 0.96), rgba(8, 12, 8, 0.98)); }
.agility-loading-text { margin: 0; color: #c5e1a5; font-size: 1em; font-weight: bold; text-align: center; }
.agility-loading-bar-track { width: min(100%, 320px); height: 18px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(139, 195, 74, 0.45); overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }
.agility-loading-bar-fill { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(to right, #689f38, #8bc34a, #aed581); transition: width 0.08s linear; box-shadow: 0 0 12px rgba(139, 195, 74, 0.55); }
.agility-loading-percent { margin: 0; color: #ddd; font-size: 0.9em; letter-spacing: 0.04em; }
.agility-field-play { position: absolute; inset: 0; }
.agility-is-loading .agility-controls,
.agility-is-loading .agility-key-hint { opacity: 0.45; pointer-events: none; }
.agility-field-overlay { pointer-events: none; position: absolute; inset: 0; z-index: 5; }
.agility-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 1;
    overflow: visible;
    border-top: 2px solid #2e4a1c;
    background:
        radial-gradient(circle at 12% 80%, rgba(62, 39, 35, 0.55) 0 8px, transparent 9px),
        radial-gradient(circle at 28% 65%, rgba(46, 31, 20, 0.45) 0 5px, transparent 6px),
        radial-gradient(circle at 44% 88%, rgba(78, 52, 46, 0.5) 0 7px, transparent 8px),
        radial-gradient(circle at 61% 72%, rgba(56, 38, 28, 0.4) 0 6px, transparent 7px),
        radial-gradient(circle at 78% 84%, rgba(62, 39, 35, 0.45) 0 8px, transparent 9px),
        radial-gradient(circle at 91% 68%, rgba(46, 31, 20, 0.5) 0 5px, transparent 6px),
        linear-gradient(to top, #2a1c12 0%, #3d2a1c 28%, #4e342e 52%, #3e5528 78%, #4a6b2f 100%);
    box-shadow: inset 0 10px 22px rgba(0, 0, 0, 0.38), inset 0 2px 0 rgba(129, 199, 132, 0.18);
}
.agility-ground-turf {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}
.agility-ground-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.agility-ground::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 14px,
        rgba(0, 0, 0, 0.05) 14px 15px
    );
    pointer-events: none;
}
.agility-ground::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 10px;
    background: linear-gradient(to bottom, rgba(85, 139, 47, 0.55), transparent);
    filter: blur(1px);
    animation: agilityGroundHaze 4.5s ease-in-out infinite alternate;
}
.agility-gf {
    position: absolute;
    display: block;
    pointer-events: none;
}
.agility-gf-grass {
    bottom: 0;
    width: 3px;
    border-radius: 3px 3px 0 0;
    transform-origin: bottom center;
    transform: rotate(var(--base-rot, 0deg));
    background: linear-gradient(to top, #2e5d18, #558b2f 45%, #7cb342 72%, #aed581);
    box-shadow: 1px 0 0 rgba(27, 47, 16, 0.35);
    animation: agilityGrassSway var(--sway-dur, 2.4s) ease-in-out infinite;
    animation-delay: var(--sway-delay, 0s);
}
.agility-ground-turf .agility-gf-grass:nth-child(1)  { left: 1%;   height: 20px; --sway-dur: 2.1s; --sway-delay: 0s;     --base-rot: -5deg; }
.agility-ground-turf .agility-gf-grass:nth-child(2)  { left: 3%;   height: 14px; --sway-dur: 2.7s; --sway-delay: -0.3s;  --base-rot: 4deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(3)  { left: 5%;   height: 24px; --sway-dur: 2.3s; --sway-delay: -1s;    --base-rot: -2deg; }
.agility-ground-turf .agility-gf-grass:nth-child(4)  { left: 7%;   height: 17px; --sway-dur: 3s;   --sway-delay: -0.6s;  --base-rot: 3deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(5)  { left: 9%;   height: 22px; --sway-dur: 2.4s; --sway-delay: -1.4s;  --base-rot: -3deg; }
.agility-ground-turf .agility-gf-grass:nth-child(6)  { left: 12%;  height: 15px; --sway-dur: 2.9s; --sway-delay: -0.2s;  --base-rot: 2deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(7)  { left: 15%;  height: 26px; --sway-dur: 2.2s; --sway-delay: -1.8s;  --base-rot: -4deg; }
.agility-ground-turf .agility-gf-grass:nth-child(8)  { left: 18%;  height: 18px; --sway-dur: 3.2s; --sway-delay: -0.8s;  --base-rot: 1deg; }
.agility-ground-turf .agility-gf-grass:nth-child(9)  { left: 21%;  height: 21px; --sway-dur: 2.5s; --sway-delay: -1.1s;  --base-rot: -2deg; width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(10) { left: 24%;  height: 16px; --sway-dur: 2.8s; --sway-delay: -0.4s;  --base-rot: 5deg; }
.agility-ground-turf .agility-gf-grass:nth-child(11) { left: 27%;  height: 25px; --sway-dur: 2.1s; --sway-delay: -1.6s;  --base-rot: -3deg; }
.agility-ground-turf .agility-gf-grass:nth-child(12) { left: 30%;  height: 13px; --sway-dur: 3.1s; --sway-delay: -0.9s;  --base-rot: 2deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(13) { left: 34%;  height: 23px; --sway-dur: 2.6s; --sway-delay: -1.3s;  --base-rot: -1deg; }
.agility-ground-turf .agility-gf-grass:nth-child(14) { left: 38%;  height: 19px; --sway-dur: 2.3s; --sway-delay: -0.5s;  --base-rot: 4deg; }
.agility-ground-turf .agility-gf-grass:nth-child(15) { left: 42%;  height: 27px; --sway-dur: 2.9s; --sway-delay: -1.7s;  --base-rot: -4deg; }
.agility-ground-turf .agility-gf-grass:nth-child(16) { left: 46%;  height: 15px; --sway-dur: 2.4s; --sway-delay: -0.7s;  --base-rot: 3deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(17) { left: 50%;  height: 22px; --sway-dur: 2.7s; --sway-delay: -1.2s;  --base-rot: -2deg; }
.agility-ground-turf .agility-gf-grass:nth-child(18) { left: 54%;  height: 17px; --sway-dur: 3s;   --sway-delay: -0.3s;  --base-rot: 2deg; }
.agility-ground-turf .agility-gf-grass:nth-child(19) { left: 58%;  height: 24px; --sway-dur: 2.2s; --sway-delay: -1.5s;  --base-rot: -3deg; width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(20) { left: 62%;  height: 14px; --sway-dur: 2.8s; --sway-delay: -0.6s;  --base-rot: 5deg; }
.agility-ground-turf .agility-gf-grass:nth-child(21) { left: 66%;  height: 26px; --sway-dur: 2.5s; --sway-delay: -1.9s;  --base-rot: -1deg; }
.agility-ground-turf .agility-gf-grass:nth-child(22) { left: 70%;  height: 18px; --sway-dur: 3.2s; --sway-delay: -0.8s;  --base-rot: 3deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(23) { left: 74%;  height: 21px; --sway-dur: 2.3s; --sway-delay: -1s;    --base-rot: -4deg; }
.agility-ground-turf .agility-gf-grass:nth-child(24) { left: 78%;  height: 16px; --sway-dur: 2.9s; --sway-delay: -0.4s;  --base-rot: 2deg; }
.agility-ground-turf .agility-gf-grass:nth-child(25) { left: 82%;  height: 25px; --sway-dur: 2.1s; --sway-delay: -1.6s;  --base-rot: -2deg; width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(26) { left: 86%;  height: 19px; --sway-dur: 2.6s; --sway-delay: -0.9s;  --base-rot: 4deg; }
.agility-ground-turf .agility-gf-grass:nth-child(27) { left: 90%;  height: 23px; --sway-dur: 2.4s; --sway-delay: -1.3s;  --base-rot: -3deg; }
.agility-ground-turf .agility-gf-grass:nth-child(28) { left: 94%;  height: 15px; --sway-dur: 3.1s; --sway-delay: -0.5s;  --base-rot: 1deg;  width: 2px; }
.agility-ground-turf .agility-gf-grass:nth-child(odd)::after {
    content: '';
    position: absolute;
    left: 3px;
    bottom: 0;
    width: 2px;
    height: 68%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, #2e7d32, #8bc34a);
    transform: rotate(12deg);
    transform-origin: bottom center;
}
.agility-gf-fly {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #1b1b1b;
    opacity: 0.75;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    animation: agilityFlyBuzz var(--fly-dur, 5s) linear infinite;
    animation-delay: var(--fly-delay, 0s);
}
.agility-gf-fly:nth-of-type(1) { left: 18%; bottom: 38px; --fly-dur: 4.2s; --fly-delay: -1s; }
.agility-gf-fly:nth-of-type(2) { left: 52%; bottom: 46px; --fly-dur: 5.6s; --fly-delay: -2.4s; }
.agility-gf-fly:nth-of-type(3) { left: 84%; bottom: 34px; --fly-dur: 4.8s; --fly-delay: -0.6s; }
.agility-gf-rat {
    bottom: 2px;
    width: 14px;
    height: 8px;
    border-radius: 40% 55% 45% 40%;
    background: radial-gradient(circle at 30% 40%, #8d6e63, #4e342e 70%);
    box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(8px) scale(0.6);
    animation: agilityRatPop var(--rat-dur, 7s) ease-in-out infinite;
    animation-delay: var(--rat-delay, 0s);
}
.agility-gf-rat::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50% 10% 50% 40%;
    background: #5d4037;
}
.agility-gf-rat::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 3px;
    width: 7px;
    height: 2px;
    border-radius: 2px;
    background: #3e2723;
    transform: rotate(-8deg);
}
.agility-gf-rat:nth-of-type(1) { left: 26%; --rat-dur: 8.5s; --rat-delay: -2s; }
.agility-gf-rat:nth-of-type(2) { left: 71%; --rat-dur: 9.5s; --rat-delay: -5.5s; }
.agility-gf-leaf {
    width: 7px;
    height: 4px;
    border-radius: 0 70% 0 70%;
    background: #558b2f;
    opacity: 0.55;
    animation: agilityLeafDrift var(--leaf-dur, 12s) linear infinite;
    animation-delay: var(--leaf-delay, 0s);
}
.agility-gf-leaf:nth-of-type(1) { left: -8px; bottom: 12px; --leaf-dur: 14s; --leaf-delay: -3s; }
.agility-gf-leaf:nth-of-type(2) { left: -12px; bottom: 24px; --leaf-dur: 11s; --leaf-delay: -7s; transform: scale(0.8) rotate(20deg); }
@keyframes agilityGrassSway {
    0%, 100% { transform: rotate(calc(var(--base-rot, 0deg) - 7deg)); }
    50% { transform: rotate(calc(var(--base-rot, 0deg) + 8deg)); }
}
@keyframes agilityGroundHaze {
    from { opacity: 0.45; transform: translateX(-2px); }
    to { opacity: 0.7; transform: translateX(2px); }
}
@keyframes agilityFlyBuzz {
    0%   { transform: translate(0, 0); opacity: 0.2; }
    10%  { opacity: 0.85; }
    25%  { transform: translate(18px, -8px); }
    40%  { transform: translate(8px, 6px); }
    55%  { transform: translate(26px, -3px); }
    70%  { transform: translate(14px, 10px); }
    85%  { transform: translate(32px, 2px); opacity: 0.7; }
    100% { transform: translate(40px, -6px); opacity: 0; }
}
@keyframes agilityRatPop {
    0%, 78%, 100% { opacity: 0; transform: translateY(10px) scale(0.5); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    88% { opacity: 1; transform: translateY(-2px) scale(1); }
    94% { opacity: 0.85; transform: translateY(8px) scale(0.85); }
}
@keyframes agilityLeafDrift {
    0% { transform: translateX(0) rotate(0deg); opacity: 0; }
    8% { opacity: 0.55; }
    100% { transform: translateX(110vw) rotate(240deg); opacity: 0.15; }
}
.agility-player { position: absolute; left: 50px; bottom: 72px; width: 48px; height: 72px; z-index: 4; will-change: transform; }
.agility-player-visual { position: absolute; inset: 0; overflow: visible; transform-origin: center bottom; transition: transform 0.12s ease; }
.agility-player-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.agility-character-layer { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.agility-player.is-ducking .agility-player-visual { transform: scaleY(0.55) translateY(18px); }
.agility-player.double-jump-flash { filter: drop-shadow(0 0 8px #81d4fa); }
.agility-dust-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.agility-speed-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.agility-speed-streak {
    position: absolute;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(to left, rgba(220, 237, 200, 0.9), rgba(139, 195, 74, 0.35) 55%, transparent);
    box-shadow: 0 0 5px rgba(174, 213, 129, 0.2);
    animation: agilitySpeedStreak var(--streak-dur, 0.28s) linear forwards;
    will-change: transform, opacity;
}
.agility-speed-streak.is-dirt {
    height: 2px;
    background: linear-gradient(to left, rgba(161, 136, 127, 0.85), rgba(93, 64, 55, 0.3) 50%, transparent);
    box-shadow: none;
}
.agility-speed-streak.is-thin { height: 1px; opacity: 0.55; }
@keyframes agilitySpeedStreak {
    0% { opacity: var(--streak-opacity, 0.75); transform: translateX(0) scaleX(0.3); }
    100% { opacity: 0; transform: translateX(var(--streak-drift, -38px)) scaleX(1.2); }
}
.agility-dust-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
    animation: agilityDustBurst 0.58s ease-out forwards;
    box-shadow: 0 0 3px rgba(62, 39, 35, 0.2);
    will-change: transform, opacity;
}
.agility-dust-particle.is-puff { border-radius: 42%; filter: blur(1.5px); opacity: 0; }
.agility-dust-jump { animation-duration: 0.62s; }
.agility-dust-duck { animation-duration: 0.48s; }
@keyframes agilityDustBurst {
    0% { opacity: 0.88; transform: translate(-50%, 0) scale(0.45); }
    35% { opacity: 0.72; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 12px)) scale(var(--ds, 1.35)); }
}
.agility-hurdle {
    --plank-hi: #f0d7a4;
    --plank: #d09a52;
    --plank-mid: #a87438;
    --seam: #3a2614;
    --rail: #6b4423;
    --wood: repeating-linear-gradient(to bottom, var(--plank-hi) 0 3px, var(--plank) 3px 8px, var(--plank-mid) 8px 12px, var(--seam) 12px 14px);
    --wood-rail: linear-gradient(to bottom, var(--rail) 0 3px, var(--plank-hi) 3px 6px, var(--seam) 6px 9px, transparent 9px);
    position: absolute;
    bottom: 72px;
    left: 600px;
    width: 50px;
    height: 120px;
    z-index: 3;
    border: none;
    border-radius: 2px;
    background: var(--wood-rail), var(--wood);
    box-shadow: inset 0 0 0 2px #3a2614, 3px 4px 0 rgba(0, 0, 0, 0.28);
    overflow: visible;
}
.agility-hurdle::before,
.agility-hurdle::after {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -4px;
    width: 8px;
    background: linear-gradient(90deg, #2e1c0e 0%, #8d5a2c 30%, #f0d7a4 48%, #a56b32 70%, #2e1c0e 100%);
    box-shadow: 0 -5px 0 #c99555, 0 -7px 0 #3a2614, 0 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 2;
    pointer-events: none;
}
.agility-hurdle::before { left: -1px; }
.agility-hurdle::after { right: -1px; }
.agility-hurdle--low { --plank-hi: #f6e2b4; --plank: #e2b86a; --plank-mid: #c4924a; --rail: #8a6234; }
.agility-hurdle--wide {
    --plank: #c48448;
    --plank-mid: #9a6230;
    background:
        var(--wood-rail),
        linear-gradient(to bottom right, transparent calc(50% - 2px), #3a2614 calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
        linear-gradient(to bottom left, transparent calc(50% - 2px), #3a2614 calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
        var(--wood);
}
.agility-hurdle--high { --plank-hi: #e2c08a; --plank: #b47c38; --plank-mid: #8a5828; --rail: #5c3a1c; }
.agility-hurdle--tall,
.agility-hurdle--high,
.agility-hurdle.is-boss {
    background:
        var(--wood-rail),
        linear-gradient(to bottom right, transparent calc(50% - 3px), rgba(42, 24, 12, 0.92) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
        var(--wood);
}
.agility-hurdle--tall { --plank-hi: #c9a06a; --plank: #8d5a2c; --plank-mid: #6b4020; --seam: #2a1a0e; --rail: #3d2614; }
.agility-hurdle.is-overhead {
    border-radius: 0;
    z-index: 4;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='44' viewBox='0 0 90 44'%3E%3Cpath d='M0 41 H90' stroke='%23aeb8c2' stroke-width='1'/%3E%3Cpath d='M0 42.5 H90' stroke='%23f4f7f8' stroke-width='1.5'/%3E%3Cpath d='M0 43.7 H90' stroke='%233e464e' stroke-width='1'/%3E%3Cg fill='none' stroke='%23e7edf2' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 42 l-4 -8 m4 8 l4 -8 m-4 8 l-3 2 m3 -2 l3 2'/%3E%3Cpath d='M34 42 l-4 -8 m4 8 l4 -8 m-4 8 l-3 2 m3 -2 l3 2'/%3E%3Cpath d='M56 42 l-4 -8 m4 8 l4 -8 m-4 8 l-3 2 m3 -2 l3 2'/%3E%3Cpath d='M78 42 l-4 -8 m4 8 l4 -8 m-4 8 l-3 2 m3 -2 l3 2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 44px;
    background-repeat: repeat-y;
    background-position: center bottom;
    box-shadow: none;
}
.agility-hurdle.is-overhead::before,
.agility-hurdle.is-overhead::after {
    top: 0;
    width: 9px;
    height: auto;
    bottom: calc(var(--agility-ground, 72px) - var(--agility-post-height, 140px));
    transform: none;
    border-radius: 1px;
    background: linear-gradient(90deg, #2e1c0e 0%, #a56b32 36%, #f0d7a4 50%, #7a4e24 74%, #2a1a0c 100%);
    box-shadow: none;
}
.agility-hurdle.is-overhead::before { left: 0; }
.agility-hurdle.is-overhead::after { right: 0; }
.agility-hurdle.is-boss {
    --plank-hi: #6e5644;
    --plank: #3c2a22;
    --plank-mid: #2a1c16;
    --seam: #120c0a;
    --rail: #ffd54a;
    box-shadow: inset 0 0 0 2px #ffd700, 0 0 16px rgba(255, 215, 0, 0.55), 3px 4px 0 rgba(0, 0, 0, 0.35);
    animation: agilityBossPulse 0.8s infinite alternate;
}
@keyframes agilityBossPulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.agility-collectibles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.agility-pickup { position: absolute; font-size: 1.4em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); animation: agilityPickupBob 0.6s ease-in-out infinite alternate; z-index: 3; }
@keyframes agilityPickupBob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.agility-pickup-pop { position: absolute; z-index: 6; pointer-events: none; font-size: 0.85em; font-weight: bold; color: #ffeb3b; text-shadow: 0 1px 3px rgba(0,0,0,0.8); animation: agilityPopFloat 0.9s ease-out forwards; }
@keyframes agilityPopFloat { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
.agility-controls { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.agility-btn { border: none; padding: 14px 36px; border-radius: 8px; font-size: 1.15em; font-weight: bold; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3); color: white; transition: transform 0.1s ease, opacity 0.15s ease; }
.agility-btn:active { transform: scale(0.95); }
.agility-btn:disabled { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.35); transform: none; box-shadow: none; }
.agility-btn-jump { background: linear-gradient(to bottom, #4CAF50, #45a049); }
.agility-btn-duck { background: linear-gradient(to bottom, #FF9800, #f57c00); }
.agility-key-hint { text-align: center; color: #777; font-size: 0.75em; margin: 10px 0 0; }
.agility-field-1 { border-color: #8bc34a; box-shadow: inset 0 0 40px rgba(139, 195, 74, 0.15); }
.agility-field-1 .agility-field-overlay { background: linear-gradient(to bottom, rgba(139,195,74,0.08), transparent 40%); }
.agility-field-2 { border-color: #ff9800; }
.agility-field-2 .agility-field-overlay { background: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(255,152,0,0.04) 18px, rgba(255,152,0,0.04) 20px); }
.agility-field-3 { border-color: #ff5722; }
.agility-field-3 .agility-field-overlay { background: repeating-linear-gradient(-15deg, transparent, transparent 12px, rgba(255,87,34,0.06) 12px, rgba(255,87,34,0.06) 14px); animation: agilitySpeedLines 0.4s linear infinite; }
@keyframes agilitySpeedLines { from { background-position: 0 0; } to { background-position: 40px 0; } }
.agility-field-4 { border-color: #607d8b; box-shadow: inset 0 0 0 2px rgba(96,125,139,0.3); }
.agility-field-5 { border-color: #2196f3; }
.agility-field-5 .agility-hurdle { transition: bottom 0.05s linear; }
.agility-field-6 { border-color: #03a9f4; background: linear-gradient(to bottom, rgba(3,169,244,0.2), transparent), url('images/camproute.png') center center / cover no-repeat; }
.agility-field-6 .agility-field-overlay { background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.12), transparent 50%); }
.agility-field-7 { border-color: #795548; }
.agility-field-7 .agility-field-overlay { background: linear-gradient(to bottom, rgba(100,100,120,0.25), transparent 60%); }
.agility-field-7.agility-raining .agility-field-overlay::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent, transparent 8px, rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 9px); animation: agilityRain 0.3s linear infinite; }
@keyframes agilityRain { from { background-position: 0 0; } to { background-position: 0 20px; } }
.agility-field-8 { border-color: #f44336; animation: agilityAlertBorder 1.2s infinite; }
@keyframes agilityAlertBorder { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,67,54,0.4); } 50% { box-shadow: 0 0 16px 2px rgba(244,67,54,0.35); } }
.agility-field-9 { border-color: #9e9e9e; }
.agility-field-9 .agility-field-overlay { background: radial-gradient(circle at 20% 80%, rgba(150,150,150,0.35), transparent 45%), radial-gradient(circle at 80% 60%, rgba(120,120,120,0.3), transparent 40%); animation: agilitySmoke 4s ease-in-out infinite alternate; }
@keyframes agilitySmoke { from { opacity: 0.6; } to { opacity: 0.95; } }
.agility-field-10 { border-color: #ffd700; background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(40,0,0,0.3)), url('images/camproute.png') center center / cover no-repeat; box-shadow: 0 0 24px rgba(255, 215, 0, 0.25); }
.agility-field-10 .agility-field-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(255,215,0,0.03) 30px, rgba(255,215,0,0.03) 31px); animation: agilityGauntletFlash 2s infinite; }
@keyframes agilityGauntletFlash { 0%, 90%, 100% { opacity: 1; } 93% { opacity: 0.7; } }

/* ── Admin Moderation button (classic Goobville red + edge sparkles) ─ */
.moderation-god-btn-wrap {
    position: absolute;
    top: 5px;
    left: 15px;
    right: auto;
    transform: none;
    z-index: 5;
    pointer-events: auto;
}

.moderation-god-btn-wrap--logo-side {
    top: 70px;
    left: calc(50% - 390px);
    z-index: 16;
}

.moderation-god-btn-wrap--player-card {
    top: 5px;
    left: 5px;
    z-index: 20;
}

#dailyRewardsLoginTab,
#dailyRewardsTasksTab {
    margin: 0;
    border-radius: 0;
}

#mainMenu {
    overflow: visible;
}

.city-chat-entry-wrap {
    position: absolute;
    left: 7px;
    top: 5px;
    z-index: 5;
    pointer-events: auto;
}

.moderation-god-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    width: 86px;
    min-height: 26px;
    box-sizing: border-box;
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, #cc0000, rgb(197, 10, 10));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 2px solid #ff0000;
}

#cityChatRoomOpenButton {
    position: relative;
    overflow: visible;
}

#cityChatRoomOpenButton::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255, 90, 90, 0.55) 0%, rgba(255, 0, 0, 0.4) 38%, rgba(180, 0, 0, 0.15) 58%, transparent 74%);
    animation: cityChatLiveGlow 1.2s ease-in-out infinite;
    z-index: 0;
}

#cityChatRoomOpenButton .moderation-god-btn__label {
    display: inline-flex;
    align-items: center;
}

.city-chat-live-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    object-fit: contain;
    z-index: 1;
    transform: translateY(-50%);
    animation: cityChatLivePulse 1.2s ease-in-out infinite;
}

@keyframes cityChatLiveGlow {
    0%, 100% {
        opacity: 0.45;
        transform: translateY(-50%) scale(0.82);
        filter: brightness(0.85);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.18);
        filter: brightness(1.4);
    }
}

@keyframes cityChatLivePulse {
    0%, 100% {
        filter:
            brightness(1.15)
            drop-shadow(0 0 1px #fff)
            drop-shadow(0 0 4px rgba(255, 50, 50, 0.9));
    }
    50% {
        filter:
            brightness(1.55)
            drop-shadow(0 0 2px #fff)
            drop-shadow(0 0 7px rgba(255, 30, 30, 1))
            drop-shadow(0 0 12px rgba(255, 0, 0, 0.85));
    }
}

.moderation-god-btn:hover {
    background: linear-gradient(to bottom, #ff0000, #cc0000);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.moderation-god-btn:active {
    transform: scale(0.98);
}

.moderation-god-btn__label {
    position: relative;
    z-index: 2;
}

.moderation-god-btn__shine {
    display: none;
}

.moderation-god-btn__sparkle {
    position: absolute;
    z-index: 3;
    width: 10px;
    height: 10px;
    pointer-events: none;
    animation: moderationGodSparkle 2.2s ease-in-out infinite;
}

.moderation-god-btn__sparkle::before,
.moderation-god-btn__sparkle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 40%,
        #fff 50%,
        rgba(255, 255, 255, 0.95) 60%,
        transparent 100%
    );
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 120, 120, 0.55);
}

.moderation-god-btn__sparkle::before {
    width: 100%;
    height: 2px;
}

.moderation-god-btn__sparkle::after {
    width: 2px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 40%,
        #fff 50%,
        rgba(255, 255, 255, 0.95) 60%,
        transparent 100%
    );
}

.moderation-god-btn__sparkle--1 { top: -5px; left: 6px; animation-delay: 0s; }
.moderation-god-btn__sparkle--2 { top: -4px; right: 8px; animation-delay: 0.55s; }
.moderation-god-btn__sparkle--3 { bottom: -5px; left: 14px; width: 8px; height: 8px; animation-delay: 1.1s; }
.moderation-god-btn__sparkle--4 { bottom: -4px; right: 10px; width: 11px; height: 11px; animation-delay: 1.65s; }

@keyframes moderationGodSparkle {
    0%, 100% { opacity: 0.2; transform: scale(0.65) rotate(0deg); }
    40% { opacity: 1; transform: scale(1.2) rotate(16deg); }
    70% { opacity: 0.65; transform: scale(0.9) rotate(-8deg); }
}


/* ===== THE STORM (drop party) ===== */
#dropPartyOverlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
    display: none;
    overflow: hidden;
}

/* During active storm play: catch all clicks so city/menus underneath cannot open.
   Falling drops keep pointer-events:auto and remain the only clickable targets. */
#dropPartyOverlay.drop-party-overlay--play {
    pointer-events: auto;
}

.drop-party-banner {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none !important;
    text-align: center;
    padding: 12px 22px 11px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(28, 8, 10, 0.96) 0%, rgba(8, 18, 12, 0.95) 55%, rgba(6, 10, 8, 0.96) 100%);
    border: 1px solid rgba(180, 40, 40, 0.55);
    box-shadow:
        0 0 0 1px rgba(40, 90, 50, 0.35) inset,
        0 10px 32px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(140, 20, 20, 0.28),
        0 0 36px rgba(30, 80, 40, 0.18);
    animation: dropPartyBannerIn 0.45s ease-out;
}

.drop-party-banner__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.drop-party-banner__title {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.18em;
    font-size: 1.45em;
    color: #e53935;
    text-shadow:
        0 2px 0 #1b0000,
        0 0 14px rgba(220, 40, 40, 0.65),
        0 0 28px rgba(80, 140, 70, 0.25);
}

.drop-party-siren {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 50% 35%, #ffb3a8 0%, #ff1744 38%, #b71c1c 72%, #1a0505 100%);
    border: 1px solid rgba(255, 160, 160, 0.75);
    box-shadow:
        0 0 8px 2px rgba(255, 23, 68, 0.95),
        0 0 18px 4px rgba(229, 57, 53, 0.75),
        0 0 32px 8px rgba(255, 82, 82, 0.45),
        0 0 48px 12px rgba(183, 28, 28, 0.28),
        inset 0 1px 3px rgba(255, 255, 255, 0.55);
    animation: dropPartySirenPulse 0.7s ease-in-out infinite;
}

.drop-party-siren__beam {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
}

.drop-party-siren__beam::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 1) 0deg,
        rgba(255, 235, 59, 0.95) 18deg,
        rgba(255, 23, 68, 0.9) 40deg,
        transparent 70deg,
        transparent 175deg,
        rgba(255, 82, 82, 0.75) 195deg,
        rgba(255, 255, 255, 0.85) 215deg,
        transparent 245deg,
        transparent 360deg
    );
    animation: dropPartySirenSpin 0.55s linear infinite;
    mix-blend-mode: screen;
    filter: blur(0.4px);
}

.drop-party-siren::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 82, 82, 0.65) 0%,
        rgba(255, 23, 68, 0.35) 38%,
        transparent 72%
    );
    animation: dropPartySirenHalo 0.7s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

.drop-party-siren::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.75), rgba(255, 80, 80, 0.25) 50%, transparent 72%);
    pointer-events: none;
    z-index: 1;
}

@keyframes dropPartySirenSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes dropPartySirenPulse {
    0%, 100% {
        box-shadow:
            0 0 8px 2px rgba(255, 23, 68, 0.95),
            0 0 18px 4px rgba(229, 57, 53, 0.75),
            0 0 32px 8px rgba(255, 82, 82, 0.45),
            0 0 48px 12px rgba(183, 28, 28, 0.28),
            inset 0 1px 3px rgba(255, 255, 255, 0.55);
        filter: brightness(1);
    }
    50% {
        box-shadow:
            0 0 12px 4px rgba(255, 235, 59, 0.85),
            0 0 24px 8px rgba(255, 23, 68, 1),
            0 0 42px 14px rgba(255, 82, 82, 0.7),
            0 0 60px 18px rgba(183, 28, 28, 0.4),
            inset 0 1px 3px rgba(255, 255, 255, 0.7);
        filter: brightness(1.25);
    }
}

@keyframes dropPartySirenHalo {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
}

.drop-party-banner__sub {
    margin-top: 3px;
    font-size: 0.84em;
    color: #a8c4a0;
    letter-spacing: 0.02em;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.drop-party-fall-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.drop-party-drop {
    position: absolute;
    top: -120px;
    transform: translateX(-50%);
    width: 118px;
    min-height: 118px;
    padding: 10px 8px 12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    background: rgba(15, 15, 18, 0.88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    animation: dropPartyFall var(--drop-fall-ms, 8000ms) linear forwards;
    z-index: 6;
}

.drop-party-drop > * {
    pointer-events: none !important;
}

.drop-party-drop__hitbox {
    position: absolute;
    inset: -18px;
    z-index: 1;
}

.drop-party-drop img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}

.drop-party-drop__label {
    font-size: 0.78em;
    line-height: 1.15;
    text-align: center;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f5f5f5;
    pointer-events: none;
    font-weight: 600;
}

.drop-party-drop__amount {
    font-size: 0.9em;
    font-weight: bold;
    color: #ffd54f;
    pointer-events: none;
}

.drop-party-drop--goobs {
    border-color: rgba(76, 175, 80, 0.65);
    background: rgba(20, 40, 22, 0.88);
}

.drop-party-drop--blue_goobs {
    border-color: rgba(33, 150, 243, 0.7);
    background: rgba(12, 28, 48, 0.88);
}

.drop-party-drop--blue_goobs .drop-party-drop__amount {
    color: #64b5f6;
}

.drop-party-drop--clothing {
    border-color: rgba(186, 104, 200, 0.75);
}

.drop-party-drop--item {
    border-color: rgba(255, 183, 77, 0.75);
}

/* Falling-star look for items & clothing */
.drop-party-drop--star {
    overflow: visible;
    width: 132px;
    min-height: 132px;
    z-index: 7;
    box-shadow:
        0 0 18px rgba(255, 220, 120, 0.55),
        0 0 36px rgba(255, 180, 60, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.4);
    /* Only animate top — keep clicks reliable (no filter/transform flicker on the button) */
    animation: dropPartyFall var(--drop-fall-ms, 8000ms) linear forwards;
}

.drop-party-drop--star .drop-party-drop__hitbox {
    inset: -28px;
}

.drop-party-drop--star.drop-party-drop--clothing {
    box-shadow:
        0 0 18px rgba(220, 140, 255, 0.55),
        0 0 36px rgba(180, 80, 255, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.4);
}

.drop-party-star-glow {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 180, 0.45) 0%, rgba(255, 200, 80, 0.18) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: dropPartyStarGlowPulse 0.8s ease-in-out infinite;
}

.drop-party-drop--clothing .drop-party-star-glow {
    background: radial-gradient(circle, rgba(230, 180, 255, 0.45) 0%, rgba(180, 100, 255, 0.18) 40%, transparent 70%);
}

.drop-party-star-trail {
    position: absolute;
    left: 50%;
    bottom: 95%;
    width: 10px;
    height: 70px;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(255, 230, 140, 0.75), rgba(255, 180, 60, 0.25), transparent);
    border-radius: 999px;
    filter: blur(1.5px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.drop-party-drop--clothing .drop-party-star-trail {
    background: linear-gradient(to top, rgba(230, 170, 255, 0.75), rgba(170, 90, 255, 0.25), transparent);
}

.drop-party-star-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff8e1;
    box-shadow: 0 0 6px #ffd54f, 0 0 12px #ffb300;
    pointer-events: none;
    z-index: 3;
    animation: dropPartyStarSpark 0.7s linear infinite;
}

.drop-party-drop--clothing .drop-party-star-spark {
    background: #f3e5f5;
    box-shadow: 0 0 6px #ce93d8, 0 0 12px #ab47bc;
}

.drop-party-star-spark--1 { top: 8%; left: 18%; animation-delay: 0s; }
.drop-party-star-spark--2 { top: 22%; right: 14%; animation-delay: 0.12s; }
.drop-party-star-spark--3 { top: -6%; left: 48%; animation-delay: 0.24s; }
.drop-party-star-spark--4 { bottom: 18%; left: 10%; animation-delay: 0.36s; }
.drop-party-star-spark--5 { bottom: 28%; right: 8%; animation-delay: 0.48s; }

.drop-party-drop--star img,
.drop-party-drop--star .drop-party-drop__label,
.drop-party-drop--star .drop-party-drop__amount {
    position: relative;
    z-index: 2;
}

.drop-party-drop:hover:not(:disabled) {
    z-index: 8;
    box-shadow:
        0 0 22px rgba(255, 255, 255, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.45);
}

.drop-party-drop--expired {
    opacity: 0.25 !important;
    pointer-events: none !important;
    cursor: default;
    filter: grayscale(0.7);
}

.drop-party-drop--claiming {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.92);
}

.drop-party-drop--claimed {
    animation: dropPartyClaimPop 0.35s ease-out forwards !important;
    pointer-events: none;
}

.drop-party-drop--burn {
    animation: dropPartyBurnAway 0.75s ease-in forwards !important;
    pointer-events: none !important;
    z-index: 5;
    border-color: #ff6a00 !important;
    box-shadow:
        0 0 18px rgba(255, 80, 0, 0.85),
        0 0 40px rgba(255, 140, 0, 0.55),
        inset 0 0 20px rgba(255, 60, 0, 0.45) !important;
    filter: saturate(1.4) brightness(1.25);
}

.drop-party-drop--burn img {
    filter: sepia(1) saturate(3) hue-rotate(-25deg) brightness(1.3) contrast(1.2);
}

.drop-party-ember {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff59d 0%, #ff6a00 55%, transparent 75%);
    box-shadow: 0 0 6px #ff9100;
    pointer-events: none;
    animation: dropPartyEmberFly 0.7s ease-out forwards;
}

.drop-party-claim-popup {
    position: fixed;
    transform: translate(-50%, -10px);
    pointer-events: none;
    z-index: 12001;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(46, 125, 50, 0.95);
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    animation: dropPartyPopupUp 1.1s ease-out forwards;
}

.drop-party-claim-popup--taken {
    background: linear-gradient(180deg, #e65100, #bf360c);
    border: 1px solid #ffab40;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.drop-party-fx {
    position: absolute;
    inset: 0;
    pointer-events: none !important;
    opacity: 0;
    z-index: 1;
}

.drop-party-fx--burst {
    animation: dropPartyFxBurst 1.3s ease-out;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 213, 79, 0.35), transparent 35%),
        radial-gradient(circle at 80% 15%, rgba(100, 181, 246, 0.28), transparent 40%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 45%);
}

/* ===== Storm layer (welcome-style rain + thunder) ===== */
.drop-party-storm {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    overflow: hidden;
}

.drop-party-storm.is-active {
    opacity: 1;
}

.drop-party-storm__sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(90, 110, 160, 0.28), transparent 55%),
        linear-gradient(180deg, rgba(10, 14, 28, 0.42) 0%, rgba(8, 10, 18, 0.18) 45%, rgba(0, 0, 0, 0.08) 100%);
    animation: dropPartyStormPulse 4.5s ease-in-out infinite;
}

.drop-party-storm__flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    animation: dropPartyLightningFlash 7s ease-in-out infinite;
}

.drop-party-storm__flash--delayed {
    animation-delay: 3.4s;
    animation-duration: 9s;
}

.drop-party-storm__bolt {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.7));
}

.drop-party-storm__bolt--left {
    left: 4%;
    animation: dropPartyBoltStrike 7s ease-in-out infinite;
}

.drop-party-storm__bolt--right {
    right: 6%;
    animation: dropPartyBoltStrike 9s ease-in-out infinite 3.4s;
}

.drop-party-storm__rain {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.drop-party-rain-drop {
    position: absolute;
    top: -30px;
    width: 2px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(to bottom, rgba(220, 235, 255, 0.55), rgba(180, 210, 255, 0.08));
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.drop-party-storm--strike .drop-party-storm__sky {
    background:
        radial-gradient(ellipse at 40% 0%, rgba(255, 240, 180, 0.45), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(40, 50, 80, 0.2) 40%, transparent 100%);
}

.drop-party-storm--strike .drop-party-storm__flash {
    background: rgba(255, 245, 200, 0.55);
    animation: none;
}

.drop-party-storm--strike .drop-party-storm__bolt--left,
.drop-party-storm--strike .drop-party-storm__bolt--right {
    opacity: 1 !important;
    animation: none;
}

.drop-party-catalog-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #3a3a3a;
}

.drop-party-catalog-row.is-selected {
    border-color: #ffd54f;
    background: rgba(255, 213, 79, 0.08);
}

.drop-party-catalog-row img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(0,0,0,0.25);
    border-radius: 5px;
}

.drop-party-catalog-row__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drop-party-catalog-row__meta strong {
    color: #fff;
    font-size: 0.88em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drop-party-catalog-row__meta span {
    color: #888;
    font-size: 0.75em;
}

.drop-party-catalog-row__actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.drop-party-catalog-row__actions input {
    width: 52px;
    padding: 4px 6px;
    background: rgba(0,0,0,0.45);
    border: 1px solid #555;
    border-radius: 4px;
    color: #eee;
}

.drop-party-catalog-row__actions button {
    padding: 5px 9px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.78em;
    color: #fff;
    background: #455a64;
}

.drop-party-catalog-row.is-selected .drop-party-catalog-row__actions button {
    background: #c62828;
}

@keyframes dropPartyFall {
    from { top: -120px; opacity: 1; }
    to { top: calc(100% - 40px); opacity: 0.85; }
}

@keyframes dropPartyStarTwinkle {
    0%, 100% { filter: brightness(1.05); }
    50% { filter: brightness(1.25); }
}

@keyframes dropPartyStarGlowPulse {
    0%, 100% { opacity: 0.65; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes dropPartyStarSpark {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(0, -18px) scale(0.2); opacity: 0; }
}

@keyframes dropPartyBannerIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes dropPartyClaimPop {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.35); opacity: 0; }
}

@keyframes dropPartyBurnAway {
    0% {
        transform: translateX(-50%) scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1.2) saturate(1.3);
    }
    25% {
        transform: translateX(-50%) scale(1.12) rotate(-4deg);
        opacity: 1;
        filter: brightness(1.6) saturate(2) hue-rotate(-10deg);
    }
    55% {
        transform: translateX(-50%) scale(0.95) rotate(6deg);
        opacity: 0.85;
        filter: brightness(1.8) sepia(0.6) saturate(2.5);
    }
    100% {
        transform: translateX(-50%) scale(0.35) rotate(18deg);
        opacity: 0;
        filter: brightness(2.2) sepia(1) blur(2px);
    }
}

@keyframes dropPartyEmberFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% {
        transform: translate(var(--ember-x, 20px), var(--ember-y, -40px)) scale(0.2);
        opacity: 0;
    }
}

@keyframes dropPartyPopupUp {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -36px); }
}

@keyframes dropPartyFxBurst {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes dropPartyStormPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

@keyframes dropPartyLightningFlash {
    0%, 8%, 100% { background: rgba(255, 255, 255, 0); }
    1% { background: rgba(255, 220, 140, 0.35); }
    2% { background: rgba(255, 255, 255, 0.55); }
    3% { background: rgba(255, 230, 160, 0.28); }
    4.5% { background: rgba(255, 255, 255, 0.4); }
    6% { background: rgba(255, 255, 255, 0); }
}

@keyframes dropPartyBoltStrike {
    0%, 8%, 100% { opacity: 0; }
    1% { opacity: 0.55; }
    2% { opacity: 1; }
    3.5% { opacity: 0.85; }
    5% { opacity: 0.2; }
    6.5% { opacity: 0; }
}

@keyframes dropPartyRainGust1 {
    0% { transform: translate(0, 0) rotate(8deg); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translate(-28px, 110vh) rotate(12deg); opacity: 0.15; }
}
@keyframes dropPartyRainGust2 {
    0% { transform: translate(0, 0) rotate(14deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(-48px, 110vh) rotate(18deg); opacity: 0.1; }
}
@keyframes dropPartyRainGust3 {
    0% { transform: translate(0, 0) rotate(6deg); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translate(-18px, 110vh) rotate(9deg); opacity: 0.15; }
}
@keyframes dropPartyRainGust4 {
    0% { transform: translate(0, 0) rotate(16deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(-55px, 110vh) rotate(20deg); opacity: 0.1; }
}
@keyframes dropPartyRainGust5 {
    0% { transform: translate(0, 0) rotate(10deg); opacity: 0; }
    9% { opacity: 1; }
    100% { transform: translate(-35px, 110vh) rotate(14deg); opacity: 0.12; }
}
@keyframes dropPartyRainGust6 {
    0% { transform: translate(0, 0) rotate(4deg); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translate(-12px, 110vh) rotate(7deg); opacity: 0.15; }
}
@keyframes dropPartyRainGust7 {
    0% { transform: translate(0, 0) rotate(12deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(-42px, 110vh) rotate(16deg); opacity: 0.1; }
}

/* ===== Storm intro: "A storm is comming...." ===== */
#dropPartyOverlay.drop-party-overlay--intro-flash::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 19;
    pointer-events: none;
    background: rgba(255, 220, 200, 0.45);
    animation: dropPartyIntroScreenFlash 0.4s ease-out forwards;
}

@keyframes dropPartyIntroScreenFlash {
    0% { opacity: 0.9; }
    40% { opacity: 0.55; }
    100% { opacity: 0; }
}

.drop-party-coming-text {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(40, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 70%);
    animation: dropPartyComingIn 0.55s ease-out;
}

.drop-party-coming-text.is-leaving {
    animation: dropPartyComingOut 0.45s ease-in forwards;
}

.drop-party-coming-text__line {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(2.2em, 5vw, 3.6em);
    letter-spacing: 0.08em;
    color: #ff1a1a;
    text-transform: none;
    text-shadow:
        0 0 8px rgba(255, 0, 0, 0.85),
        0 0 28px rgba(180, 0, 0, 0.65),
        0 3px 0 #4a0000,
        0 0 60px rgba(255, 40, 40, 0.35);
    animation: dropPartyComingPulse 0.9s ease-in-out infinite;
}

.drop-party-coming-text__dots {
    display: inline-block;
    margin-top: 6px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(2em, 4.5vw, 3.2em);
    letter-spacing: 0.35em;
    color: #ff3333;
    text-shadow:
        0 0 8px rgba(255, 0, 0, 0.8),
        0 0 24px rgba(160, 0, 0, 0.55);
    animation: dropPartyComingDots 1.1s steps(4, end) infinite;
}

@keyframes dropPartyComingIn {
    from { opacity: 0; transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dropPartyComingOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes dropPartyComingPulse {
    0%, 100% { opacity: 0.85; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.25); }
}

@keyframes dropPartyComingDots {
    0% { opacity: 0.25; }
    50% { opacity: 1; }
    100% { opacity: 0.25; }
}

/* Storm join: keep alert host transparent so rain/thunder show behind the card */
#alertContainer.storm-join-alert-host {
    background: transparent !important;
    z-index: 13050 !important;
    align-items: center;
}

/* Storm claim menu must sit above #dropPartyOverlay (z-index 12000) — no black backdrop */
#alertContainer.storm-claim-alert-host {
    background: transparent !important;
    z-index: 14000 !important;
    align-items: center;
    /* MUST stay clickable — pointer-events:none here blocked Confirm */
    pointer-events: auto !important;
}

.storm-claim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 14000;
    overflow-y: auto;
    padding: 20px 0;
    pointer-events: auto;
}

.storm-claim-overlay .storm-alert-content,
.storm-claim-overlay .storm-claim-alert {
    pointer-events: auto !important;
    margin: 20px;
    max-width: min(560px, 92vw) !important;
    width: min(560px, 92vw);
    position: relative;
    z-index: 14001;
    transform: translateY(-8vh);
    text-align: center;
    padding: 22px 22px 18px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%) !important;
    border: 2px solid rgba(229, 57, 53, 0.85) !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(40, 90, 50, 0.25) inset,
        0 0 28px rgba(140, 20, 20, 0.28);
    color: #eee !important;
}

.storm-claim-overlay .alert-button,
.storm-claim-overlay .alert-buttons,
#dropPartyCollectBtn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 14002;
}

.storm-join-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 13000;
    overflow-y: auto;
    padding: 20px 0;
    pointer-events: none;
}

.storm-join-alert,
.storm-claim-alert {
    pointer-events: auto;
    max-width: 560px !important;
    width: min(560px, 92vw);
    margin: 20px !important;
    padding: 22px 22px 18px !important;
    text-align: center;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%) !important;
    border: 2px solid rgba(229, 57, 53, 0.85) !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(40, 90, 50, 0.25) inset,
        0 0 28px rgba(140, 20, 20, 0.28);
    color: #eee !important;
    transform: translateY(-8vh);
}

.storm-join-alert h3,
.storm-claim-alert h3 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.08em;
    font-size: 1.75em !important;
    font-weight: bold !important;
    color: #ff3333 !important;
    margin: 0 0 14px !important;
    text-shadow: 0 0 18px rgba(255, 51, 51, 0.35);
}

.storm-join-alert p,
.storm-claim-alert p {
    color: #ccc !important;
    font-size: 0.95em !important;
    line-height: 1.45 !important;
    margin: 8px 0 !important;
}

.storm-join-alert__lead {
    color: #bbb !important;
    font-size: 0.92em !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: bold;
}

.storm-claim-alert__meta {
    color: #ddd !important;
    font-size: 0.95em !important;
}

.storm-claim-alert__warn {
    color: #ff8a80 !important;
    font-size: 0.88em !important;
    margin-top: 12px !important;
}

.storm-reward-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 0 14px;
    overflow: hidden;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #444;
}

.storm-reward-grid--collect {
    max-height: none;
    overflow: visible;
}

.storm-join-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 10px 6px 8px;
    min-height: 78px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #555;
    border-radius: 8px;
    text-align: center;
}

.storm-join-reward__icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.storm-join-reward__label {
    color: #fff;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.storm-join-reward--more {
    justify-content: center;
}

.storm-join-reward__more {
    color: #81c784;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1;
}

.storm-join-reward--skip {
    opacity: 0.55;
    border-color: rgba(198, 40, 40, 0.55);
}

.storm-join-reward__owned {
    color: #ef9a9a;
    font-size: 0.68em;
    line-height: 1;
    font-weight: bold;
}

.storm-join-alert__timer {
    color: #fff !important;
    font-size: 1.05em !important;
    font-weight: bold;
    margin: 10px 0 4px !important;
    padding: 8px 12px;
    display: inline-block;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #555;
}

.storm-join-alert__timer span {
    color: #ff5252;
    font-size: 1.15em;
}

.storm-join-alert .alert-buttons,
.storm-claim-alert .alert-buttons {
    margin-top: 16px;
    gap: 12px;
}

.storm-join-alert .alert-button,
.storm-claim-alert .alert-button,
.storm-claim-overlay .alert-button {
    min-width: 120px;
    padding: 11px 22px !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 0.95em !important;
    letter-spacing: 0.02em;
    color: #fff !important;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.storm-join-alert .alert-button.confirm,
.storm-claim-alert .alert-button.confirm,
.storm-claim-overlay .alert-button.confirm,
#dropPartyCollectBtn.alert-button.confirm {
    background: linear-gradient(180deg, #2e7d32, #1b5e20) !important;
    box-shadow: 0 2px 0 #0d3d12, 0 4px 12px rgba(46, 125, 50, 0.35);
}

.storm-join-alert .alert-button.cancel,
.storm-claim-alert .alert-button.cancel {
    background: linear-gradient(180deg, #c62828, #8e0000) !important;
    box-shadow: 0 2px 0 #5c0000, 0 4px 12px rgba(198, 40, 40, 0.35);
}

.storm-join-alert .alert-button:hover,
.storm-claim-alert .alert-button:hover,
.storm-claim-overlay .alert-button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.storm-join-alert .alert-button:active,
.storm-claim-alert .alert-button:active,
.storm-claim-overlay .alert-button:active {
    transform: translateY(1px);
    filter: brightness(0.95);
}

#dropPartyOverlay.drop-party-overlay--join-ambience .drop-party-storm--join .drop-party-storm__sky {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(90, 110, 160, 0.4), transparent 55%),
        linear-gradient(180deg, rgba(10, 14, 28, 0.55) 0%, rgba(8, 10, 18, 0.28) 45%, rgba(0, 0, 0, 0.12) 100%);
}

/* Storm collect uses GoobVille .alert-content / .alert-button style */
.storm-alert-content {
    max-width: 560px !important;
    width: min(560px, 92vw);
}

.storm-alert-skip {
    color: #ef9a9a !important;
}
.view-citizen-founder-badge {
    isolation: isolate;
    box-shadow:
        0 0 5px rgba(255, 213, 79, 0.8),
        0 0 12px rgba(255, 193, 7, 0.35);
    animation: view-citizen-founder-glow 2.2s ease-in-out infinite;
}

.view-citizen-founder-badge::before,
.view-citizen-founder-badge::after {
    content: "\2726";
    position: absolute;
    z-index: 1;
    color: #fff7b2;
    line-height: 1;
    opacity: 0;
    filter: drop-shadow(0 0 3px #ffd54f);
    animation: view-citizen-founder-sparkle 1.8s ease-in-out infinite;
}

.view-citizen-founder-badge::before {
    top: -7px;
    left: -6px;
    font-size: 10px;
}

.view-citizen-founder-badge::after {
    right: -4px;
    bottom: -4px;
    font-size: 8px;
    animation-delay: 0.85s;
}

@keyframes view-citizen-founder-glow {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(255, 213, 79, 0.65),
            0 0 9px rgba(255, 193, 7, 0.25);
    }
    50% {
        box-shadow:
            0 0 7px rgba(255, 245, 157, 0.95),
            0 0 16px rgba(255, 193, 7, 0.55);
    }
}

@keyframes view-citizen-founder-sparkle {
    0%, 35%, 100% {
        opacity: 0;
        transform: scale(0.25) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.25) rotate(90deg);
    }
    68% {
        opacity: 0;
        transform: scale(0.45) rotate(180deg);
    }
}

.prelogin-weather-live {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #cbcbcb;
    font-size: 0.72em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
    transform: translateY(1px);
}

.prelogin-weather-live__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #ff3030;
    box-shadow: 0 0 4px rgba(255, 35, 35, 0.95), 0 0 9px rgba(255, 0, 0, 0.58);
    transform: translateY(-1.5px);
    animation: preloginWeatherLivePulse 1.35s ease-in-out infinite;
}

.prelogin-weather-live__label {
    color: #cbcbcb;
    font-weight: 700;
}

#preloginCurrentWeather {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #cbcbcb;
    font-weight: 700;
    line-height: 1;
}

#preloginCurrentWeatherPeriod {
    display: inline-block;
    transform: none;
}

.prelogin-weather-live__icon {
    position: relative;
    display: inline-flex;
    width: 1.08em;
    height: 1em;
    flex: 0 0 1.08em;
    align-items: center;
    justify-content: center;
    font-size: 1.18em;
    line-height: 1;
    vertical-align: middle;
    transform: translateY(-0.08em);
    cursor: help;
    outline: none;
}

/* Keep platform emoji inside the text line instead of using their oversized native box. */
.weather-icon-emoji {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
    transform: translateY(calc(-0.14em + 0.7px));
}

/* Platform-independent jack-o'-lantern used by the Halloween override. */
.weather-icon-halloween-pumpkin {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 0.8em;
    box-sizing: border-box;
    flex: 0 0 1em;
    border: 1px solid rgba(255, 184, 56, 0.88);
    border-radius: 47% 47% 43% 43% / 53% 53% 47% 47%;
    background:
        radial-gradient(ellipse at 31% 39%, #321404 0 9%, transparent 10%),
        radial-gradient(ellipse at 69% 39%, #321404 0 9%, transparent 10%),
        linear-gradient(#3b1704, #241002) 50% 70% / 34% 10% no-repeat,
        radial-gradient(ellipse at 50% 42%, #ffca4c 0%, #ff8b18 58%, #c84708 100%);
    box-shadow:
        inset 0.12em 0 rgba(255, 198, 65, 0.2),
        inset -0.12em 0 rgba(105, 27, 2, 0.24),
        0 0 0.18em rgba(255, 152, 28, 0.72),
        0 0 0.38em rgba(255, 83, 7, 0.34);
    vertical-align: middle;
}

.weather-icon-halloween-pumpkin::before {
    content: '';
    position: absolute;
    bottom: 91%;
    left: 45%;
    width: 0.2em;
    height: 0.28em;
    border-radius: 45% 45% 20% 20%;
    background: linear-gradient(to right, #3f4b16, #778127 55%, #313b11);
    transform: rotate(8deg);
}

.weather-icon-halloween-pumpkin::after {
    content: '';
    position: absolute;
    inset: 5% 14%;
    border-right: 1px solid rgba(115, 31, 3, 0.22);
    border-left: 1px solid rgba(255, 208, 87, 0.16);
    border-radius: 46%;
    pointer-events: none;
}

.prelogin-weather-live__icon .weather-icon-halloween-pumpkin {
    width: 0.96em;
    height: 0.76em;
    flex-basis: 0.96em;
    transform: translateY(-0.02em);
}

#goobvilleWeather .weather-icon-halloween-pumpkin {
    width: 1em;
    height: 0.8em;
    flex-basis: 1em;
}

/* Platform-independent decorated Christmas tree for pre- and post-login. */
.weather-icon-christmas-tree {
    position: relative;
    display: inline-block;
    width: 0.9em;
    height: 1em;
    flex: 0 0 0.9em;
    box-sizing: border-box;
    background: linear-gradient(#754019, #3e210d) 50% 100% / 18% 22% no-repeat;
    filter: drop-shadow(0 0 0.2em rgba(103, 255, 144, 0.34));
    vertical-align: middle;
}

.weather-icon-christmas-tree::before {
    content: '';
    position: absolute;
    inset: 13% 3% 10%;
    clip-path: polygon(50% 0, 69% 28%, 61% 28%, 82% 55%, 70% 55%, 100% 100%, 0 100%, 30% 55%, 18% 55%, 39% 28%, 31% 28%);
    background:
        radial-gradient(circle at 37% 43%, #ffdf62 0 4%, transparent 5%),
        radial-gradient(circle at 64% 55%, #ff5252 0 4%, transparent 5%),
        radial-gradient(circle at 43% 72%, #7ddcff 0 4%, transparent 5%),
        radial-gradient(circle at 71% 82%, #ffd54f 0 4%, transparent 5%),
        linear-gradient(135deg, #2d9a50 0%, #0c5f32 58%, #063d24 100%);
    box-shadow: inset -0.08em -0.04em 0.12em rgba(0, 30, 16, 0.4);
}

.weather-icon-christmas-tree::after {
    content: '';
    position: absolute;
    top: -2%;
    left: 39%;
    width: 24%;
    height: 22%;
    clip-path: polygon(50% 0, 61% 34%, 98% 36%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 36%, 39% 34%);
    background: #ffe878;
    box-shadow: 0 0 0.28em rgba(255, 221, 80, 0.82);
}

.prelogin-weather-live__icon .weather-icon-christmas-tree {
    width: 0.86em;
    height: 0.96em;
    flex-basis: 0.86em;
    transform: translateY(-0.03em);
}

#goobvilleWeather .weather-icon-christmas-tree {
    width: 0.9em;
    height: 1em;
    flex-basis: 0.9em;
}

/* Nudge only the pre-login Heavy Storm icon down by half a pixel at night. */
#preloginCurrentWeather[data-weather="tornado"][data-period="night"] .weather-icon-emoji {
    transform: translateY(calc(-0.14em + 1.2px));
}

/* Compact custom sun, matching the custom moon's predictable dimensions. */
.weather-icon-soft-sun {
    display: inline-block;
    width: 0.76em;
    height: 0.76em;
    box-sizing: border-box;
    flex: 0 0 0.76em;
    border: 1px solid rgba(255, 234, 145, 0.82);
    border-radius: 50%;
    vertical-align: middle;
    background: radial-gradient(circle at 38% 34%, #fffbd8 0 14%, #ffd75f 42%, #eea51d 100%);
    box-shadow:
        0 0 0.18em rgba(255, 206, 70, 0.62),
        inset -0.07em -0.07em 0.1em rgba(190, 104, 0, 0.3);
}

/* Platform fog emoji have inconsistent whitespace; use fixed mist lines instead. */
.weather-icon-fog {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 0.62em;
    flex: 0 0 1em;
    box-sizing: border-box;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 0 8%, #d9e0e2 8% 72%, transparent 72%) 0 2% / 100% 0.12em no-repeat,
        linear-gradient(90deg, transparent 0 25%, #bfc9cd 25% 92%, transparent 92%) 0 46% / 100% 0.12em no-repeat,
        linear-gradient(90deg, transparent 0 3%, #aebbc0 3% 67%, transparent 67%) 0 90% / 100% 0.12em no-repeat;
    filter: drop-shadow(0 0 0.12em rgba(205, 221, 226, 0.5));
}

/* Neutral custom moon so its colour does not depend on the platform emoji set. */
.weather-icon-gray-moon {
    display: inline-block;
    width: 0.92em;
    height: 0.92em;
    box-sizing: border-box;
    flex: 0 0 0.92em;
    border: 1px solid rgba(231, 235, 240, 0.72);
    border-radius: 50%;
    vertical-align: -0.08em;
    background:
        radial-gradient(circle at 31% 29%, rgba(250, 252, 255, 0.58) 0 7%, transparent 8%),
        radial-gradient(circle at 69% 61%, rgba(82, 89, 99, 0.42) 0 11%, transparent 12%),
        radial-gradient(circle at 39% 73%, rgba(91, 98, 108, 0.34) 0 7%, transparent 8%),
        radial-gradient(circle at 43% 39%, #e0e3e7 0%, #b3b8c0 57%, #747b85 100%);
    box-shadow:
        0 0 0.2em rgba(205, 213, 223, 0.5),
        inset -0.08em -0.08em 0.12em rgba(54, 61, 70, 0.42);
}

.prelogin-weather-live__icon .weather-icon-gray-moon {
    margin-right: 0.12em;
}

.prelogin-weather-live__icon .weather-icon-soft-sun {
    width: 0.84em;
    height: 0.84em;
    flex-basis: 0.84em;
    margin-right: 0.08em;
}

/* Keep both round custom icons on the same corrected baseline as the icon slot. */
.prelogin-weather-live__icon .weather-icon-gray-moon,
.prelogin-weather-live__icon .weather-icon-soft-sun {
    transform: none;
}

.prelogin-weather-live__icon .weather-icon-gray-moon {
    transform: translateY(-0.3px);
}

.prelogin-weather-live__icon .weather-icon-soft-sun {
    transform: translateY(-0.3px);
}

#weatherTimeDisplay .weather-time-content {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    min-width: 0;
    font-size: 0.9em;
}

#weatherTimeDisplay #goobvilleTime {
    justify-self: start;
    margin-left: 6px;
    text-align: left;
}

#weatherTimeDisplay #goobvilleDate {
    justify-self: center;
    text-align: center;
}

#weatherTimeDisplay #goobvilleWeather {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    margin-right: 6px;
    width: 1.4em;
    min-width: 1.4em;
    max-width: 1.4em;
    height: 1.2em;
    box-sizing: border-box;
    contain: layout;
    line-height: 1;
    text-align: center;
}

#goobvilleWeather .weather-icon-emoji,
#goobvilleWeather .weather-icon-soft-sun {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    flex: none;
    transform: translate(-50%, -50%);
}


#goobvilleWeather .weather-icon-gray-moon {
    width: 1em;
    height: 1em;
    flex-basis: 1em;
    transform: none;
}

#goobvilleWeather .weather-icon-soft-sun {
    width: 0.82em;
    height: 0.82em;
    flex-basis: 0.82em;
    transform: translate(-50%, -50%);
}

#goobvilleWeather .weather-icon-fog {
    width: 0.9em;
    height: 0.56em;
    flex-basis: 0.9em;
}

/* Align the post-login Heavy Storm emoji with the clock's date text. */
#goobvilleWeather[data-weather="tornado"] .weather-icon-emoji {
    transform: translate(-50%, calc(-50% + 0.01em));
}

.moderation-weather-preview-option.weather-preview-clear-night .weather-icon-gray-moon {
    width: 1em;
    height: 1em;
    flex-basis: 1em;
}

.prelogin-weather-live__icon.is-aurora {
    box-sizing: border-box;
    width: 1.4em;
    height: 1em;
    flex: 0 0 1.4em;
    transform: translateY(-0.08em);
}

/* Shared Rainy Aurora artwork for the pre-login badge and post-login clock. */
.weather-icon-aurora-art {
    position: absolute;
    inset: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(ellipse 34% 82% at 18% 50%, rgba(73, 255, 161, 0.95) 0%, rgba(73, 255, 161, 0.48) 34%, transparent 76%),
        radial-gradient(ellipse 38% 94% at 51% 48%, rgba(71, 220, 255, 0.96) 0%, rgba(71, 220, 255, 0.46) 36%, transparent 78%),
        radial-gradient(ellipse 34% 84% at 84% 52%, rgba(187, 103, 255, 0.92) 0%, rgba(187, 103, 255, 0.42) 34%, transparent 76%);
    box-shadow: none;
    filter: blur(0.8px) saturate(1.12);
    transform: skewX(-8deg) scaleY(1.08);
    animation: preloginAuroraWisps 3.2s ease-in-out infinite alternate;
}

@keyframes preloginAuroraWisps {
    from {
        background-position: -1px 1px, 0 -1px, 1px 1px;
        opacity: 0.76;
    }
    to {
        background-position: 1px -1px, 0 1px, -1px -1px;
        opacity: 1;
    }
}

.prelogin-weather-live__icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 31;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    margin-bottom: 1px;
}

.prelogin-weather-live__icon::after {
    content: attr(data-weather-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 30;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-shadow: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    margin-bottom: 5px;
}

.prelogin-weather-live__icon:hover::before,
.prelogin-weather-live__icon:hover::after {
    opacity: 1;
    visibility: visible;
}

@keyframes preloginWeatherLivePulse {
    0%, 100% {
        opacity: 0.68;
        transform: translateY(-1.5px) scale(0.82);
        box-shadow: 0 0 3px rgba(255, 35, 35, 0.78), 0 0 6px rgba(255, 0, 0, 0.38);
    }
    50% {
        opacity: 1;
        transform: translateY(-1.5px) scale(1.08);
        box-shadow: 0 0 5px rgba(255, 75, 75, 1), 0 0 12px rgba(255, 0, 0, 0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .view-citizen-founder-badge,
    .view-citizen-founder-badge::before,
    .view-citizen-founder-badge::after,
    .prelogin-weather-live__dot {
        animation: none;
    }

    .weather-icon-aurora-art {
        animation: none;
    }

    .view-citizen-founder-badge::before,
    .view-citizen-founder-badge::after {
        opacity: 0.85;
    }
}

/* Global weather: one rain canvas or a small CSS-only particle set. */
.prelogin-storm__weather-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}

/* Seasonal variants for the actual pre-storm show (separate from clock previews). */
.pre-storm-theme-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}

.pre-storm-theme-particle {
    position: absolute;
    top: -12%;
    left: var(--theme-left, 50%);
    display: block;
    width: var(--theme-size, 18px);
    height: var(--theme-size, 18px);
    opacity: var(--theme-opacity, 0.8);
    will-change: transform, opacity;
    animation: preStormSeasonalFall var(--theme-duration, 9s) linear var(--theme-delay, 0s) infinite;
}

.pre-storm-theme-particle--snow::before {
    content: '\2744';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f1fbff;
    font-size: var(--theme-size, 18px);
    line-height: 1;
    text-shadow: 0 0 6px rgba(210, 244, 255, 0.9), 0 1px 2px rgba(16, 43, 57, 0.62);
}

.pre-storm-theme-particle--pumpkin {
    height: calc(var(--theme-size, 22px) * 0.78);
    margin-top: calc(var(--theme-size, 22px) * 0.2);
    border-radius: 46% 46% 43% 43%;
    background:
        radial-gradient(ellipse 12% 18% at 34% 44%, #1b120b 0 72%, transparent 76%),
        radial-gradient(ellipse 12% 18% at 66% 44%, #1b120b 0 72%, transparent 76%),
        linear-gradient(25deg, transparent 42%, #25120a 43% 55%, transparent 56%) 38% 70% / 26% 25% no-repeat,
        linear-gradient(-25deg, transparent 42%, #25120a 43% 55%, transparent 56%) 62% 70% / 26% 25% no-repeat,
        linear-gradient(90deg, #b9410e 0 12%, #f58220 27%, #c74f11 50%, #f58220 73%, #a9340c 100%);
    box-shadow: inset 0 -3px 4px rgba(94, 28, 5, 0.45), 0 2px 5px rgba(0, 0, 0, 0.4), 0 0 7px rgba(255, 119, 24, 0.24);
}

.pre-storm-theme-particle--pumpkin::before {
    content: '';
    position: absolute;
    top: calc(var(--theme-size, 22px) * -0.2);
    left: 45%;
    width: 14%;
    height: 28%;
    border-radius: 80% 20% 30% 20%;
    background: linear-gradient(90deg, #28411e, #66833c);
    transform: rotate(16deg);
}

.pre-storm-theme-particle--gift {
    height: calc(var(--theme-size, 20px) * 0.82);
    margin-top: calc(var(--theme-size, 20px) * 0.16);
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent 39%, #f3d764 40% 59%, transparent 60%),
        linear-gradient(180deg, transparent 32%, #f3d764 33% 49%, transparent 50%),
        var(--gift-color, #d62d2d);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.34);
}

.pre-storm-theme-particle--gift::before,
.pre-storm-theme-particle--gift::after {
    content: '';
    position: absolute;
    top: -29%;
    width: 44%;
    height: 39%;
    border: 3px solid #f3d764;
    box-sizing: border-box;
    border-radius: 70% 30% 55% 35%;
}
.pre-storm-theme-particle--gift::before { right: 48%; transform: rotate(18deg); }
.pre-storm-theme-particle--gift::after { left: 48%; transform: scaleX(-1) rotate(18deg); }

@keyframes preStormSeasonalFall {
    0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
    8% { opacity: var(--theme-opacity, 0.8); }
    48% { transform: translate3d(0, var(--theme-mid-distance, 54vh), 0) rotate(120deg); }
    100% { transform: translate3d(var(--theme-drift, 20px), var(--theme-fall-distance, 118vh), 0) rotate(var(--theme-spin, 240deg)); opacity: 0.2; }
}

.prelogin-storm__ambient-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease, background 0.6s ease;
    contain: layout style paint;
}

/* Clear night is the shared base underneath every nighttime weather type. */
.prelogin-storm__night-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(3, 9, 42, 0.72), rgba(13, 41, 83, 0.16) 70%, transparent 100%);
    transition: opacity 0.6s ease;
    contain: layout style paint;
}

body[data-global-weather-mode="dynamic"][data-ambient-night="true"] .prelogin-storm__night-base,
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="night"] .prelogin-storm__night-base {
    opacity: 0.74;
}

/* Fixed Halloween override: foggy night, the regular moon, light rain and thunder. */
body[data-global-weather="halloween"] .prelogin-storm__night-base {
    opacity: 0.88;
    background:
        radial-gradient(circle at 80% 16%, rgba(154, 52, 12, 0.28), rgba(94, 29, 19, 0.12) 20%, transparent 43%),
        linear-gradient(to bottom, rgba(24, 12, 31, 0.84), rgba(62, 37, 43, 0.46) 54%, rgba(92, 58, 35, 0.12) 78%, transparent 100%);
}

body[data-global-weather="halloween"] .prelogin-storm__night-base::before {
    opacity: 1;
}

body[data-global-weather="halloween"] .prelogin-storm__ambient-overlay {
    opacity: 0.62;
    background:
        radial-gradient(ellipse at 16% 28%, rgba(18, 20, 24, 0.42) 0%, rgba(48, 52, 58, 0.28) 18%, rgba(110, 116, 124, 0.14) 36%, rgba(190, 196, 202, 0.06) 52%, transparent 68%),
        radial-gradient(ellipse at 48% 18%, rgba(12, 14, 18, 0.36) 0%, rgba(42, 46, 52, 0.22) 22%, rgba(128, 134, 140, 0.1) 44%, transparent 70%),
        radial-gradient(ellipse at 78% 40%, rgba(22, 24, 28, 0.38) 0%, rgba(64, 68, 74, 0.22) 20%, rgba(150, 156, 162, 0.1) 42%, transparent 66%),
        radial-gradient(ellipse at 40% 72%, rgba(28, 30, 34, 0.28) 0%, rgba(90, 96, 102, 0.14) 30%, transparent 58%),
        linear-gradient(to bottom, rgba(10, 12, 16, 0.34) 0%, rgba(40, 44, 50, 0.2) 28%, rgba(100, 106, 112, 0.1) 55%, rgba(190, 196, 202, 0.04) 76%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);
}

/* Overlay under the Log In button, aligned to the name/password column. Out of flow so the card keeps its height. */
.pre-storm-login-countdown {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -2px;
    z-index: 4;
    width: 234px;
    height: auto;
    overflow: visible;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    transform: translateX(calc(-50% + 12px));
    pointer-events: none;
}

body[data-pre-storm-show="true"] .pre-storm-login-countdown {
    display: flex;
}

body[data-pre-storm-show="true"] #loginMenu {
    z-index: 12;
}

.pre-storm-countdown-tip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 5;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(28, 0, 0, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(255, 40, 40, 0.7);
    transform: translateX(-50%);
    pointer-events: none;
}

.pre-storm-login-countdown:hover .pre-storm-countdown-tip,
.pre-storm-clock-countdown:hover .pre-storm-countdown-tip {
    display: block;
}

.pre-storm-login-countdown__art {
    position: absolute;
    left: -28px;
    top: 50%;
    display: block;
    width: 52px;
    height: 40px;
    margin-top: -20px;
    overflow: visible;
}

.pre-storm-login-countdown__art::before,
.pre-storm-clock-countdown__art::before {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 40, 40, 0.95) 0%, rgba(190, 0, 0, 0.55) 42%, transparent 72%);
    filter: blur(5px);
    animation: stormCounterAlarm 1.05s ease-in-out infinite;
    pointer-events: none;
}

.pre-storm-login-countdown__art::before {
    left: 50%;
    top: 46%;
    width: 78px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 40, 40, 0.95) 0%, rgba(200, 0, 0, 0.5) 36%, rgba(140, 0, 0, 0.16) 60%, transparent 74%);
    filter: blur(3px);
    animation: stormCounterAlarmLogin 1.05s ease-in-out infinite;
}

@keyframes stormCounterAlarmLogin {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.pre-storm-login-countdown__art img {
    position: absolute;
    z-index: 1;
    width: 98px;
    height: 65px;
    max-width: none;
    left: -27px;
    top: -13px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 5px rgba(255, 30, 30, 0.9));
}

.pre-storm-login-countdown__label {
    color: #fff4f4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    transform: translateX(8px);
    text-shadow:
        0 0 6px rgba(255, 40, 40, 0.85),
        0 1px 2px rgba(0, 0, 0, 0.9);
}

.pre-storm-login-countdown strong {
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.prelogin-cornfield-event {
    appearance: none;
    display: none;
    position: absolute;
    left: 50%;
    bottom: -12px;
    z-index: 4;
    width: 234px;
    height: 31px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0;
    padding: 3px 12px;
    border: 1px solid #382014;
    border-radius: 2px 4px 3px 2px;
    background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(22, 9, 4, .24) 6px 7px, transparent 8px 11px),
        linear-gradient(90deg, #3b2114, #714327 18%, #60351e 52%, #754528 83%, #392014);
    box-shadow: inset 0 1px rgba(202, 139, 73, .4), inset 0 -2px rgba(20, 8, 3, .55), 0 3px 8px rgba(0, 0, 0, .58);
    color: #f7e3c7;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}
.prelogin-cornfield-event.is-active { display: flex; }
body[data-pre-storm-show="true"] .prelogin-cornfield-event.is-active { bottom: -48px; }
.prelogin-cornfield-event:hover,
.prelogin-cornfield-event:focus-visible {
    filter: brightness(1.18);
    outline: 2px solid #ffae4c;
    outline-offset: 3px;
}
.prelogin-cornfield-event::before,
.prelogin-cornfield-event::after,
.cornfield-launcher::before,
.cornfield-launcher::after {
    content: '';
    position: absolute;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a5845b;
    box-shadow: inset 1px 1px #d4b184, 0 1px 1px #271207;
}
.prelogin-cornfield-event::before,
.cornfield-launcher::before { left: 7px; }
.prelogin-cornfield-event::after,
.cornfield-launcher::after { right: 7px; }
.prelogin-cornfield-event__name {
    position: relative;
    z-index: 0;
    color: #d20b0b;
    font: 900 16px Georgia, serif;
    -webkit-text-stroke: .4px #250000;
    text-shadow: 0 1px #650000, 0 2px #260000, 0 0 5px #ff3318;
}
.prelogin-cornfield-event__name::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -5px -13px -4px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 25px 3px at 18% 35%, rgba(65, 29, 12, .65), transparent 100%),
        radial-gradient(ellipse 22px 2px at 82% 67%, rgba(65, 29, 12, .6), transparent 100%),
        repeating-linear-gradient(176deg, transparent 0 4px, rgba(78, 38, 18, .22) 5px 6px, transparent 7px 11px),
        radial-gradient(ellipse at center, #edc392 0%, #daa671 55%, #a66b42 100%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 40%, rgba(0, 0, 0, .85) 64%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at center, #000 40%, rgba(0, 0, 0, .85) 64%, transparent 100%);
    filter: brightness(.84) sepia(.18) saturate(1.15);
    pointer-events: none;
}
.prelogin-cornfield-event__name::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 22%;
    width: 2px;
    height: 4px;
    border-radius: 0 0 2px 2px;
    background: #a40000;
    box-shadow: 27px 1px #810000, 58px -1px #ad0505;
    animation: cornfieldSignBloodDrip 2.4s linear infinite;
}
@keyframes cornfieldSignBloodDrip {
    0% { transform: translateY(0) scaleY(.75); opacity: .9; }
    25% { transform: translateY(2px) scaleY(1.2); opacity: 1; }
    70% { transform: translateY(7px) scaleY(.85); opacity: .7; }
    100% { transform: translateY(11px) scaleY(.5); opacity: 0; }
}
.prelogin-cornfield-event__time { font: bold 11px Arial, sans-serif; text-shadow: 0 1px 2px #170902; }
.prelogin-cornfield-event__time strong { color: #fff2db; font-size: 12px; }

.cornfield-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    background: rgba(7, 13, 9, 0.82);
    backdrop-filter: blur(7px);
    font-family: Arial, sans-serif;
    color: #e5e5e5;
}

.cornfield-preview-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 27px 28px 26px;
    border: 1px solid rgba(210, 210, 210, 0.2);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(43, 61, 43, 0.97), rgba(22, 34, 25, 0.98));
    box-shadow: 0 0 26px rgba(204, 0, 0, 0.22), 0 18px 60px rgba(0, 0, 0, 0.75);
    text-align: center;
}

.cornfield-preview-close {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.38);
    color: #fff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.cornfield-preview-dialog .cornfield-preview-halloween {
    color: #ff8c00;
    text-shadow: 0 2px #783300, 0 0 9px rgba(255, 140, 0, 0.7);
}

.cornfield-preview-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid rgba(255, 0, 0, 0.58);
    border-radius: 8px;
    background: rgba(13, 27, 17, 0.82);
    box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.08), 0 0 12px rgba(0, 0, 0, 0.3);
}

.cornfield-preview-countdown span {
    color: #cbcbcb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cornfield-preview-countdown strong {
    color: #ff0000;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.45);
}

.cornfield-preview-details {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 630px;
    box-sizing: border-box;
    margin-top: 0;
    padding: 48px 28px 20px;
    border: 1px solid rgba(203, 203, 203, 0.25);
    border-left: 4px solid #ff0000;
    border-radius: 10px;
    background:
        linear-gradient(to bottom, rgba(5, 15, 10, 0.36), rgba(8, 24, 14, 0.66) 32%, rgba(8, 24, 14, 0.74) 68%, rgba(9, 21, 11, 0.58)),
        url("Seasonthemes/cornfield0.png") center center / cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-align: left;
}

.cornfield-preview-details__field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.cornfield-preview-details__field span {
    position: absolute;
    bottom: -23px;
    width: 74px;
    height: 190px;
    background: url("Seasonthemes/corn-stalk-silhouette.svg?v=halloween-corn") center bottom / 100% 100% no-repeat;
    opacity: 0.3;
    transform-origin: 50% 100%;
    animation: cornfieldPreviewSway 3.8s ease-in-out infinite alternate;
}

.cornfield-preview-details__field span:nth-child(1) { left: -5%; height: 205px; animation-delay: -2.1s; }
.cornfield-preview-details__field span:nth-child(2) { left: 10%; height: 170px; opacity: 0.23; animation-delay: -0.8s; }
.cornfield-preview-details__field span:nth-child(3) { left: 23%; height: 215px; opacity: 0.2; animation-delay: -2.8s; }
.cornfield-preview-details__field span:nth-child(4) { left: 38%; height: 165px; opacity: 0.19; animation-delay: -1.4s; }
.cornfield-preview-details__field span:nth-child(5) { left: 53%; height: 210px; opacity: 0.2; animation-delay: -3.1s; }
.cornfield-preview-details__field span:nth-child(6) { left: 68%; height: 175px; opacity: 0.23; animation-delay: -0.4s; }
.cornfield-preview-details__field span:nth-child(7) { left: 81%; height: 220px; opacity: 0.27; animation-delay: -2.5s; }
.cornfield-preview-details__field span:nth-child(8) { left: 94%; height: 185px; animation-delay: -1.1s; }

@keyframes cornfieldPreviewSway {
    from { transform: rotate(-5deg) translateX(-2px); }
    to { transform: rotate(5deg) translateX(3px); }
}

.cornfield-preview-details__message {
    position: relative;
    z-index: 1;
    margin: 0;
    transform: translateY(-28px);
}

.cornfield-preview-details__title {
    margin: 0;
    color: #ff0000;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.85);
}

.cornfield-preview-details p {
    position: relative;
    z-index: 1;
    margin: 15px 0 0;
    font-size: clamp(17px, 2.5vw, 19px);
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.85);
}

.cornfield-preview-details strong {
    color: #ff0000;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.35);
}

.cornfield-preview-details .cornfield-preview-details__signature {
    flex: 1 1 auto;
    margin: 0;
    color: #cbcbcb;
    font: 700 18px Arial, sans-serif;
    text-align: left;
}

.cornfield-preview-details__footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 42px;
    padding-top: 12px;
    border-top: 1px solid rgba(203, 203, 203, 0.25);
}

.cornfield-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 23px;
}

.cornfield-preview-done {
    min-height: 48px;
    min-width: 140px;
    padding: 9px 24px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(to bottom, #cc0000, #a80c0c);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.cornfield-preview-dialog button:hover,
.cornfield-preview-dialog button:focus-visible {
    filter: brightness(1.18);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .cornfield-preview-dialog { padding: 25px 17px 19px; }
    .cornfield-preview-countdown { flex-wrap: wrap; gap: 4px 10px; }
    .cornfield-preview-details { padding: 20px 14px 18px; }
    .cornfield-preview-details__footer { flex-direction: column; }
    .cornfield-preview-details .cornfield-preview-details__signature { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cornfield-preview-details__field span { animation: none; }
}

.prelogin-weather-live__storm {
    display: none !important;
}

.pre-storm-clock-countdown {
    display: none;
    position: relative;
    align-items: center;
    gap: 4px;
    justify-self: end;
    margin-right: 4px;
    height: 22px;
    pointer-events: auto;
}

#weatherTimeDisplay.is-pre-storm .weather-time-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

#weatherTimeDisplay.is-pre-storm #goobvilleWeather {
    display: none !important;
}

#weatherTimeDisplay.is-pre-storm .pre-storm-clock-countdown {
    display: inline-flex;
}

#weatherTimeDisplay.is-pre-storm:has(.pre-storm-clock-countdown:hover) {
    overflow: visible;
}

.pre-storm-clock-countdown__art {
    position: relative;
    display: block;
    width: 28px;
    height: 22px;
    flex: 0 0 28px;
    overflow: hidden;
}

.pre-storm-clock-countdown__art::before {
    inset: 6% 2%;
}

.pre-storm-clock-countdown img {
    position: absolute;
    z-index: 1;
    width: 53px;
    height: 35px;
    max-width: none;
    left: -15px;
    top: -7px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(255, 30, 30, 0.95));
}

.pre-storm-clock-countdown strong {
    color: #fff4f4;
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    text-shadow:
        0 0 6px rgba(255, 40, 40, 0.95),
        0 1px 2px rgba(0, 0, 0, 0.9);
}

@keyframes stormCounterAlarm {
    0%, 100% { opacity: 0.45; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* The storm covers the sun, dawn and sunset. At night the normal moon remains visible. */
body[data-pre-storm-show="true"] .prelogin-storm__dawn-base,
body[data-pre-storm-show="true"] .prelogin-storm__sunset-base {
    opacity: 0 !important;
}

body[data-pre-storm-show="true"][data-ambient-sky-base="night"] .prelogin-storm__night-base::before {
    opacity: 1;
}

/* Fixed Christmas override: deep winter night with cool magical colour. */
body[data-global-weather="christmas"] .prelogin-storm__night-base {
    opacity: 0.86;
    background:
        radial-gradient(ellipse at 68% 8%, rgba(48, 108, 142, 0.3), transparent 38%),
        linear-gradient(to bottom, rgba(3, 15, 43, 0.92), rgba(8, 46, 70, 0.56) 56%, rgba(17, 73, 69, 0.16) 82%, transparent 100%);
}

body[data-global-weather="christmas"] .prelogin-storm__night-base::before {
    opacity: 0;
}

body[data-global-weather="christmas"] .prelogin-storm__ambient-overlay {
    opacity: 0.78;
    background:
        radial-gradient(ellipse at 18% 5%, rgba(75, 227, 180, 0.2), transparent 34%),
        radial-gradient(ellipse at 52% 2%, rgba(92, 173, 255, 0.22), transparent 38%),
        radial-gradient(ellipse at 86% 8%, rgba(190, 105, 255, 0.14), transparent 32%),
        linear-gradient(to bottom, rgba(24, 68, 108, 0.3), rgba(17, 82, 76, 0.12) 58%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.66) 65%, rgba(0, 0, 0, 0.2) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.66) 65%, rgba(0, 0, 0, 0.2) 82%, transparent 100%);
}

body[data-global-weather="christmas"] .prelogin-storm__ambient-overlay::before {
    content: '';
    position: absolute;
    inset: -10% -8% 24%;
    opacity: 0.52;
    background:
        radial-gradient(ellipse at 14% 18%, transparent 38%, rgba(74, 255, 184, 0.48) 42% 49%, transparent 54%),
        radial-gradient(ellipse at 49% 13%, transparent 36%, rgba(75, 210, 255, 0.42) 40% 48%, transparent 53%),
        radial-gradient(ellipse at 86% 20%, transparent 39%, rgba(187, 105, 255, 0.34) 43% 50%, transparent 55%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.86) 46%, rgba(0, 0, 0, 0.26) 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.86) 46%, rgba(0, 0, 0, 0.26) 76%, transparent 100%);
    filter: blur(13px) saturate(1.14);
    transform: translate3d(-2%, 0, 0) scale(1.02);
    will-change: transform, opacity;
    animation: christmasAuroraDrift 12s ease-in-out infinite alternate;
}

@keyframes christmasAuroraDrift {
    from { opacity: 0.38; transform: translate3d(-3%, -1%, 0) scale(1.01, 0.96); }
    to { opacity: 0.62; transform: translate3d(3%, 2%, 0) scale(1.06, 1.08); }
}

.prelogin-storm__halloween-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 42%, transparent 18%, rgba(12, 14, 18, 0.22) 48%, rgba(40, 44, 50, 0.14) 68%, rgba(140, 146, 152, 0.05) 82%, transparent 100%),
        linear-gradient(to bottom, rgba(8, 10, 14, 0.2), rgba(36, 40, 46, 0.1) 36%, rgba(110, 116, 122, 0.05) 68%, transparent 86%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0.24) 89%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0.24) 89%, transparent 100%);
}

body[data-global-weather="halloween"] .prelogin-storm__halloween-veil,
body[data-pre-storm-show="true"] .prelogin-storm__halloween-veil {
    display: block;
}

/* A low graveyard-like fog bank crawling across the city. */
.prelogin-storm__halloween-veil::before {
    content: '';
    position: absolute;
    right: -12%;
    bottom: 10%;
    left: -12%;
    height: 52%;
    opacity: 0.48;
    background:
        radial-gradient(ellipse at 8% 72%, rgba(16, 18, 22, 0.46) 0%, rgba(48, 52, 58, 0.3) 18%, rgba(100, 106, 112, 0.16) 36%, rgba(180, 186, 192, 0.06) 54%, transparent 70%),
        radial-gradient(ellipse at 34% 56%, rgba(12, 14, 18, 0.4) 0%, rgba(44, 48, 54, 0.24) 22%, rgba(120, 126, 132, 0.12) 42%, transparent 64%),
        radial-gradient(ellipse at 62% 74%, rgba(20, 22, 26, 0.42) 0%, rgba(64, 68, 74, 0.22) 24%, rgba(140, 146, 152, 0.1) 44%, transparent 66%),
        radial-gradient(ellipse at 88% 48%, rgba(14, 16, 20, 0.36) 0%, rgba(56, 60, 66, 0.18) 22%, rgba(160, 166, 172, 0.06) 46%, transparent 68%);
    filter: blur(24px);
    transform: translate3d(-2%, 0, 0);
    animation: halloweenGroundFogDrift 18s ease-in-out infinite alternate;
}

/* Broad uneven shadow overhead, as if something is hanging above the skyline. */
.prelogin-storm__halloween-veil::after {
    content: '';
    position: absolute;
    top: -13%;
    right: 3%;
    left: 3%;
    height: 52%;
    opacity: 0.38;
    background:
        radial-gradient(ellipse at 18% 31%, rgba(10, 12, 16, 0.55), transparent 42%),
        radial-gradient(ellipse at 49% 12%, rgba(18, 20, 24, 0.48), transparent 50%),
        radial-gradient(ellipse at 82% 34%, rgba(28, 30, 34, 0.32), transparent 44%);
    filter: blur(28px);
    transform-origin: 50% 0;
    animation: halloweenOverheadShadow 9s ease-in-out infinite alternate;
}

@keyframes halloweenGroundFogDrift {
    from { transform: translate3d(-2%, 1%, 0) scaleY(0.96); opacity: 0.36; }
    to { transform: translate3d(3%, -2%, 0) scaleY(1.06); opacity: 0.52; }
}

@keyframes halloweenOverheadShadow {
    from { transform: scale(0.98, 0.92) translateY(-2%); opacity: 0.28; }
    to { transform: scale(1.04, 1.08) translateY(3%); opacity: 0.42; }
}

/* Dawn is a light yellow-orange sky base underneath its Rainy weather. */
.prelogin-storm__dawn-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom,
        rgba(196, 117, 28, 0.26) 0%,
        rgba(224, 148, 49, 0.23) 12%,
        rgba(242, 178, 75, 0.17) 26%,
        rgba(244, 191, 103, 0.1) 40%,
        rgba(235, 184, 111, 0.04) 53%,
        rgba(218, 165, 104, 0.012) 64%,
        transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 24%,
        rgba(0, 0, 0, 0.84) 36%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%,
        rgba(0, 0, 0, 0.1) 67%,
        transparent 75%);
    mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 24%,
        rgba(0, 0, 0, 0.84) 36%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%,
        rgba(0, 0, 0, 0.1) 67%,
        transparent 75%);
    transition: opacity 0.6s ease;
    contain: layout style paint;
}

body[data-global-weather-mode="dynamic"][data-ambient-sky-base="dawn"] .prelogin-storm__dawn-base {
    opacity: 1;
}

/* Day + Rainy gets Dawn's top-down fade in the warm Sunny palette. */
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="rain"] .prelogin-storm__ambient-overlay {
    opacity: 0.58;
    background: linear-gradient(to bottom,
        rgba(255, 224, 107, 0.48) 0%,
        rgba(255, 195, 75, 0.38) 16%,
        rgba(255, 173, 55, 0.24) 32%,
        rgba(255, 154, 48, 0.11) 49%,
        rgba(255, 143, 52, 0.035) 63%,
        transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 24%,
        rgba(0, 0, 0, 0.84) 36%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%,
        rgba(0, 0, 0, 0.1) 67%,
        transparent 75%);
    mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 24%,
        rgba(0, 0, 0, 0.84) 36%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%,
        rgba(0, 0, 0, 0.1) 67%,
        transparent 75%);
}

/* Sunset is a sky base, never a weather type. It sits underneath Rainy. */
.prelogin-storm__sunset-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom,
        rgba(143, 61, 8, 0.64) 0%,
        rgba(172, 72, 9, 0.57) 12%,
        rgba(205, 88, 12, 0.45) 26%,
        rgba(228, 106, 20, 0.29) 40%,
        rgba(220, 110, 31, 0.14) 53%,
        rgba(199, 101, 39, 0.045) 64%,
        transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 24%,
        rgba(0, 0, 0, 0.84) 36%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%,
        rgba(0, 0, 0, 0.1) 67%,
        transparent 75%);
    mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 24%,
        rgba(0, 0, 0, 0.84) 36%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%,
        rgba(0, 0, 0, 0.1) 67%,
        transparent 75%);
    transition: opacity 0.6s ease;
    contain: layout style paint;
}

body[data-global-weather-mode="dynamic"][data-ambient-sky-base="sunset"] .prelogin-storm__sunset-base {
    opacity: 1;
}

/* Aurora is never part of sunset; suppress stale/preview aurora colours too. */
body:not([data-local-weather-preview="true"])[data-global-weather-mode="dynamic"][data-ambient-sky-base="sunset"][data-ambient-weather="rainbow"] .prelogin-storm__ambient-overlay {
    opacity: 0;
    background: none;
}

/* Keep sunny weather visible at sunset without creating a blinding light spot. */
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="sunset"][data-ambient-weather="sun"] .prelogin-storm__ambient-overlay {
    opacity: 0.38;
    background: radial-gradient(circle at 78% 10%, rgba(255, 226, 137, 0.2) 0, rgba(255, 177, 73, 0.08) 14%, transparent 34%);
}

#weatherTimeDisplay[data-sky-base="sunset"] .weather-sun-glow {
    opacity: 0.38;
}

.prelogin-storm__night-base::before {
    content: '';
    position: absolute;
    top: 9%;
    right: 14%;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fffde3 0 18%, #f6edb6 38%, rgba(221, 226, 217, 0.9) 60%, rgba(210, 225, 238, 0.16) 64%, transparent 72%);
    box-shadow: 0 0 24px rgba(226, 238, 255, 0.5), 0 0 64px rgba(150, 190, 255, 0.28);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="sun"] .prelogin-storm__ambient-overlay {
    opacity: 0.75;
    background: radial-gradient(circle at 78% 10%, rgba(255, 224, 107, 0.55) 0, rgba(255, 187, 64, 0.2) 15%, transparent 38%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, 0.72) 56%, rgba(0, 0, 0, 0.24) 72%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, 0.72) 56%, rgba(0, 0, 0, 0.24) 72%, transparent 88%);
}

/* Day + Sunny keeps its sun and adds the same warm sky fade as Day + Rainy. */
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="sun"] .prelogin-storm__ambient-overlay {
    opacity: 0.75;
    background:
        radial-gradient(circle at 78% 10%, rgba(255, 224, 107, 0.55) 0, rgba(255, 187, 64, 0.2) 15%, transparent 38%),
        linear-gradient(to bottom,
            rgba(255, 224, 107, 0.48) 0%,
            rgba(255, 195, 75, 0.38) 16%,
            rgba(255, 173, 55, 0.24) 32%,
            rgba(255, 154, 48, 0.11) 49%,
            rgba(255, 143, 52, 0.035) 63%,
            transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%, #000 24%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.1) 67%, transparent 75%);
    mask-image: linear-gradient(to bottom,
        #000 0%, #000 24%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.1) 67%, transparent 75%);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .prelogin-storm__ambient-overlay {
    opacity: 0.65;
    background: linear-gradient(to bottom, rgba(18, 25, 52, 0.7), rgba(36, 42, 62, 0.2));
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="foggy"] .prelogin-storm__ambient-overlay {
    opacity: 0.8;
    background:
        radial-gradient(ellipse 48% 36% at 12% 46%, rgba(210, 217, 214, 0.38), transparent 72%),
        radial-gradient(ellipse 52% 38% at 50% 48%, rgba(202, 210, 206, 0.36), transparent 72%),
        radial-gradient(ellipse 48% 36% at 88% 46%, rgba(210, 217, 214, 0.38), transparent 72%);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="rainbow"] .prelogin-storm__ambient-overlay {
    opacity: 0.58;
    background:
        radial-gradient(ellipse at 12% 2%, rgba(255, 67, 142, 0.48), transparent 35%),
        radial-gradient(ellipse at 50% 0%, rgba(65, 235, 196, 0.44), transparent 39%),
        radial-gradient(ellipse at 88% 5%, rgba(116, 92, 255, 0.46), transparent 37%),
        linear-gradient(112deg, rgba(255, 130, 55, 0.24), rgba(49, 218, 151, 0.2), rgba(91, 102, 255, 0.28));
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 16%, rgba(0, 0, 0, 0.64) 28%, rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0.08) 49%, transparent 57%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 16%, rgba(0, 0, 0, 0.64) 28%, rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0.08) 49%, transparent 57%);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="cloudy"] .prelogin-storm__ambient-overlay {
    opacity: 0.55;
    background: linear-gradient(
        to bottom,
        rgba(105, 112, 120, 0.5) 0%,
        rgba(94, 102, 109, 0.3) 42%,
        rgba(80, 88, 94, 0.1) 72%,
        transparent 94%
    );
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .prelogin-storm__ambient-overlay {
    opacity: 0.65;
    background: linear-gradient(to bottom, rgba(18, 25, 52, 0.7), rgba(36, 42, 62, 0.2));
}

/* Keep the warm Day fade underneath daytime fog, clouds and storms too. */
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="foggy"] .prelogin-storm__ambient-overlay {
    background:
        radial-gradient(ellipse 48% 36% at 12% 46%, rgba(210, 217, 214, 0.38), transparent 72%),
        radial-gradient(ellipse 52% 38% at 50% 48%, rgba(202, 210, 206, 0.36), transparent 72%),
        radial-gradient(ellipse 48% 36% at 88% 46%, rgba(210, 217, 214, 0.38), transparent 72%),
        linear-gradient(to bottom,
            rgba(255, 224, 107, 0.48) 0%,
            rgba(255, 195, 75, 0.38) 16%,
            rgba(255, 173, 55, 0.24) 32%,
            rgba(255, 154, 48, 0.11) 49%,
            rgba(255, 143, 52, 0.035) 63%,
            transparent 74%);
}

body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="cloudy"] .prelogin-storm__ambient-overlay {
    background:
        linear-gradient(to bottom,
            rgba(105, 112, 120, 0.5) 0%,
            rgba(94, 102, 109, 0.3) 42%,
            rgba(80, 88, 94, 0.1) 72%,
            transparent 94%),
        linear-gradient(to bottom,
            rgba(255, 224, 107, 0.48) 0%,
            rgba(255, 195, 75, 0.38) 16%,
            rgba(255, 173, 55, 0.24) 32%,
            rgba(255, 154, 48, 0.11) 49%,
            rgba(255, 143, 52, 0.035) 63%,
            transparent 74%);
}

body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="stormy"] .prelogin-storm__ambient-overlay {
    background:
        linear-gradient(to bottom, rgba(18, 25, 52, 0.7), rgba(36, 42, 62, 0.2)),
        linear-gradient(to bottom,
            rgba(255, 224, 107, 0.48) 0%,
            rgba(255, 195, 75, 0.38) 16%,
            rgba(255, 173, 55, 0.24) 32%,
            rgba(255, 154, 48, 0.11) 49%,
            rgba(255, 143, 52, 0.035) 63%,
            transparent 74%);
}

body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="foggy"] .prelogin-storm__ambient-overlay,
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="cloudy"] .prelogin-storm__ambient-overlay,
body[data-global-weather-mode="dynamic"][data-ambient-sky-base="day"][data-ambient-weather="stormy"] .prelogin-storm__ambient-overlay {
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%, #000 24%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.1) 67%, transparent 75%);
    mask-image: linear-gradient(to bottom,
        #000 0%, #000 24%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.1) 67%, transparent 75%);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="drizzle"] .prelogin-storm__ambient-overlay {
    opacity: 0.62;
    background:
        radial-gradient(
            circle at 78% 10%,
            rgba(255, 224, 107, 0.48) 0,
            rgba(255, 187, 64, 0.16) 12%,
            transparent 31%
        ),
        linear-gradient(to bottom, rgba(155, 190, 205, 0.28), transparent 70%);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="drizzle"] .prelogin-storm__ambient-overlay::before {
    content: none;
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .prelogin-storm__ambient-overlay {
    opacity: 0.82;
    background:
        radial-gradient(ellipse 72% 68% at 16% 8%, rgba(122, 108, 79, 0.3), transparent 72%),
        radial-gradient(ellipse 76% 70% at 42% 16%, rgba(82, 88, 87, 0.34), transparent 74%),
        radial-gradient(ellipse 74% 66% at 68% 9%, rgba(119, 96, 66, 0.28), transparent 72%),
        radial-gradient(ellipse 72% 70% at 92% 18%, rgba(78, 86, 87, 0.32), transparent 74%),
        linear-gradient(to bottom, rgba(70, 69, 61, 0.72), rgba(48, 53, 54, 0.5) 48%, rgba(79, 67, 50, 0.24) 76%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0.72) 44%, rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.08) 65%, transparent 74%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0.72) 44%, rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.08) 65%, transparent 74%);
}

/* These night types keep Clear night's maximum base darkness. */
body[data-global-weather-mode="dynamic"][data-ambient-night="true"][data-ambient-weather="cloudy"] .prelogin-storm__ambient-overlay,
body[data-global-weather-mode="dynamic"][data-ambient-night="true"][data-ambient-weather="thunder"] .prelogin-storm__ambient-overlay,
body[data-global-weather-mode="dynamic"][data-ambient-night="true"][data-ambient-weather="stormy"] .prelogin-storm__ambient-overlay,
body[data-global-weather-mode="dynamic"][data-ambient-night="true"][data-ambient-weather="tornado"] .prelogin-storm__ambient-overlay {
    opacity: 0;
}

.prelogin-storm__ambient-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}

.prelogin-storm__ambient-fx::after {
    content: '';
    position: absolute;
    top: -2%;
    right: -4%;
    bottom: auto;
    left: -4%;
    z-index: 0;
    display: none;
    height: 38%;
    opacity: 0.78;
    background:
        radial-gradient(ellipse 105% 92% at 50% -12%, rgba(27, 30, 33, 0.8) 0%, rgba(70, 75, 78, 0.64) 38%, rgba(119, 87, 60, 0.42) 62%, transparent 88%),
        linear-gradient(to bottom, rgba(31, 34, 36, 0.58) 0%, rgba(92, 94, 92, 0.38) 38%, rgba(153, 90, 43, 0.22) 66%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.28) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.28) 80%, transparent 100%);
    filter: blur(14px);
    animation: ambientThunderCloudGlow 7s ease-in-out infinite alternate;
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .prelogin-storm__ambient-fx::after {
    /* Retained for possible future reuse; Thunder now uses the Stormy sky. */
    display: none;
}

body[data-global-weather="halloween"] .prelogin-storm__ambient-fx::after {
    display: block;
    height: 68%;
    opacity: 0.4;
    background:
        radial-gradient(ellipse at 22% 34%, rgba(14, 16, 20, 0.4) 0%, rgba(46, 50, 56, 0.22) 24%, rgba(120, 126, 132, 0.1) 46%, transparent 68%),
        radial-gradient(ellipse at 68% 48%, rgba(18, 20, 24, 0.34) 0%, rgba(60, 64, 70, 0.16) 28%, rgba(160, 166, 172, 0.06) 52%, transparent 70%),
        linear-gradient(to bottom, rgba(8, 10, 14, 0.28) 0%, rgba(48, 52, 58, 0.14) 36%, rgba(130, 136, 142, 0.05) 64%, transparent 100%);
    filter: blur(20px);
}

.ambient-cloud-extra {
    display: none;
    z-index: 0;
    animation-name: preloginCloudDrift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ambient-cloud-extra--1 { top: 6%; width: 138px; height: 43px; opacity: 0.35; --cloud-scale: 1.02; animation-duration: 48s; animation-delay: -9s; }
.ambient-cloud-extra--2 { top: 23%; width: 176px; height: 55px; opacity: 0.28; --cloud-scale: 0.94; animation-duration: 55s; animation-delay: -31s; }
.ambient-cloud-extra--3 { top: 42%; width: 122px; height: 39px; opacity: 0.23; --cloud-scale: 0.9; animation-duration: 44s; animation-delay: -20s; }
.ambient-cloud-extra--4 { top: 59%; width: 158px; height: 49px; opacity: 0.18; --cloud-scale: 0.86; animation-duration: 52s; animation-delay: -42s; }
.ambient-cloud-extra--5 { top: 14%; width: 112px; height: 37px; opacity: 0.3; --cloud-scale: 0.92; animation-duration: 46s; animation-delay: -36s; }
.ambient-cloud-extra--6 { top: 51%; width: 146px; height: 46px; opacity: 0.2; --cloud-scale: 0.88; animation-duration: 50s; animation-delay: -14s; }
.ambient-cloud-extra--7 { top: 32%; width: 128px; height: 41px; opacity: 0.24; --cloud-scale: 0.9; animation-duration: 53s; animation-delay: -47s; }
.ambient-cloud-extra--8 { top: 67%; width: 104px; height: 34px; opacity: 0.16; --cloud-scale: 0.84; animation-duration: 45s; animation-delay: -27s; }

body[data-global-weather-mode="dynamic"][data-ambient-weather="cloudy"] .ambient-cloud-extra {
    display: block;
}

body[data-global-weather="halloween"] .ambient-cloud-extra {
    display: block;
    opacity: 0.2;
    filter: grayscale(1) brightness(0.42) sepia(0.18) hue-rotate(62deg);
}

.ambient-thunder-flash {
    position: absolute;
    inset: 0 0 42% 0;
    z-index: 1;
    display: none;
    opacity: 0;
    background:
        linear-gradient(to bottom, rgba(255, 122, 18, 0.56) 0%, rgba(255, 151, 42, 0.38) 34%, rgba(226, 126, 37, 0.2) 65%, transparent 100%);
    mix-blend-mode: screen;
    will-change: opacity;
    animation: ambientThunderSkyFlash 18s linear infinite -3s;
}

.ambient-thunder-flash--center {
    animation-duration: 21s;
    animation-delay: -11s;
}

.ambient-thunder-flash--right {
    animation-duration: 25s;
    animation-delay: -17s;
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-thunder-flash,
body[data-global-weather="halloween"] .ambient-thunder-flash {
    display: block;
}

.ambient-lightning {
    position: absolute;
    top: 0;
    z-index: 2;
    display: none;
    width: 160px;
    height: 336px;
    opacity: 0;
    filter:
        drop-shadow(0 0 5px rgba(255, 140, 40, 0.7))
        drop-shadow(0 0 14px rgba(255, 100, 0, 0.5))
        drop-shadow(0 0 28px rgba(255, 80, 0, 0.3));
    transform-origin: top center;
    animation: ambientLightningStrike 18s linear infinite;
}

.ambient-lightning svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ambient-lightning--center svg {
    transform: scaleX(-1);
}

.ambient-lightning--left {
    left: 16%;
    animation-delay: -3s;
}

.ambient-lightning--center {
    left: 52%;
    top: 0;
    width: 145px;
    height: 300px;
    animation-duration: 21s;
    animation-delay: -11s;
}

.ambient-lightning--right {
    right: 15%;
    top: 0;
    width: 158px;
    height: 330px;
    animation-duration: 25s;
    animation-delay: -17s;
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-lightning,
body[data-global-weather="halloween"] .ambient-lightning {
    display: block;
}

/* Accessibility: keep the storm ambience, but remove every Thunderstorm flash/bolt. */
body.disable-thunder-flashes[data-ambient-weather="thunder"] .ambient-thunder-flash,
body.disable-thunder-flashes[data-ambient-weather="thunder"] .ambient-lightning,
body.disable-thunder-flashes[data-global-weather="halloween"] .ambient-thunder-flash,
body.disable-thunder-flashes[data-global-weather="halloween"] .ambient-lightning,
body.disable-thunder-flashes .weather-lightning-bolt,
body.disable-thunder-flashes .weather-lightning-flash {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* The Storm minigame: remove only visual lightning, never its rain/audio/gameplay. */
body.disable-thunder-flashes .drop-party-storm__flash,
body.disable-thunder-flashes .drop-party-storm__bolt,
body.disable-thunder-flashes #dropPartyOverlay.drop-party-overlay--intro-flash::before {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

body.disable-thunder-flashes .drop-party-storm--strike .drop-party-storm__sky {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(90, 110, 160, 0.28), transparent 55%),
        linear-gradient(180deg, rgba(10, 14, 28, 0.42) 0%, rgba(8, 10, 18, 0.18) 45%, rgba(0, 0, 0, 0.08) 100%);
}

body.ambient-thunder-intro[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-lightning--left,
body.ambient-thunder-intro[data-global-weather="halloween"] .ambient-lightning--left {
    animation: ambientLightningIntro 1.35s ease-out both;
}

body.ambient-thunder-intro[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-thunder-flash--left,
body.ambient-thunder-intro[data-global-weather="halloween"] .ambient-thunder-flash--left {
    animation: ambientThunderSkyIntro 1.35s ease-out both;
}

.ambient-wind-streak {
    --particle-top: 12%;
    --particle-width: 24px;
    --wind-speed: 3.4s;
    --wind-delay: 0s;
    --wind-opacity: 0.72;
    position: absolute;
    top: var(--particle-top);
    left: -34px;
    display: none;
    width: var(--particle-width);
    height: 1px;
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(228, 235, 237, 0.74) 28%, rgba(203, 215, 219, 0.52) 72%, transparent);
    box-shadow: 0 0 3px rgba(218, 229, 232, 0.16);
    will-change: transform, opacity;
    animation: ambientStormWindParticle var(--wind-speed) linear infinite var(--wind-delay);
}

.ambient-wind-streak--1 { --particle-top: 8%; --particle-width: 22px; --wind-speed: 3.1s; --wind-delay: -0.4s; --wind-opacity: 0.68; }
.ambient-wind-streak--2 { --particle-top: 16%; --particle-width: 27px; --wind-speed: 3.7s; --wind-delay: -2.3s; --wind-opacity: 0.62; }
.ambient-wind-streak--3 { --particle-top: 25%; --particle-width: 19px; --wind-speed: 3.3s; --wind-delay: -1.6s; --wind-opacity: 0.76; }
.ambient-wind-streak--4 { --particle-top: 34%; --particle-width: 25px; --wind-speed: 3.9s; --wind-delay: -3.1s; --wind-opacity: 0.58; }
.ambient-wind-streak--5 { --particle-top: 43%; --particle-width: 21px; --wind-speed: 3s; --wind-delay: -1.1s; --wind-opacity: 0.74; }
.ambient-wind-streak--6 { --particle-top: 52%; --particle-width: 28px; --wind-speed: 3.6s; --wind-delay: -2.8s; --wind-opacity: 0.64; }
.ambient-wind-streak--7 { --particle-top: 61%; --particle-width: 18px; --wind-speed: 3.2s; --wind-delay: -0.8s; --wind-opacity: 0.7; }
.ambient-wind-streak--8 { --particle-top: 70%; --particle-width: 24px; --wind-speed: 3.8s; --wind-delay: -2s; --wind-opacity: 0.6; }
.ambient-wind-streak--9 { --particle-top: 78%; --particle-width: 20px; --wind-speed: 3.4s; --wind-delay: -3s; --wind-opacity: 0.72; }
.ambient-wind-streak--10 { --particle-top: 86%; --particle-width: 26px; --wind-speed: 3.9s; --wind-delay: -1.4s; --wind-opacity: 0.6; }
.ambient-wind-streak--11 { --particle-top: 29%; --particle-width: 23px; --wind-speed: 3.5s; --wind-delay: -2.6s; --wind-opacity: 0.66; }
.ambient-wind-streak--12 { --particle-top: 66%; --particle-width: 17px; --wind-speed: 3s; --wind-delay: -1.9s; --wind-opacity: 0.76; }

body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak {
    display: block;
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak {
    animation-duration: var(--ambient-wind-medium-duration, 7s);
    opacity: 0;
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--1,
body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--4,
body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--7,
body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--10,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--1,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--4,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--7,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--10 {
    animation-duration: var(--ambient-wind-slow-duration, 7.6s);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--2,
body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--5,
body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--8,
body[data-global-weather-mode="dynamic"][data-ambient-weather="stormy"] .ambient-wind-streak--11,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--2,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--5,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--8,
body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-wind-streak--11 {
    animation-duration: var(--ambient-wind-fast-duration, 6.6s);
}

/* Thunder is the Stormy base plus its dedicated amber lightning/glow. */
body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-wind-streak,
body[data-global-weather="halloween"] .ambient-wind-streak {
    display: block;
    opacity: 0;
    animation-duration: var(--ambient-wind-medium-duration, 7s);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-wind-streak:is(
    .ambient-wind-streak--1,
    .ambient-wind-streak--4,
    .ambient-wind-streak--7,
    .ambient-wind-streak--10
) {
    animation-duration: var(--ambient-wind-slow-duration, 7.6s);
}

body[data-global-weather-mode="dynamic"][data-ambient-weather="thunder"] .ambient-wind-streak:is(
    .ambient-wind-streak--2,
    .ambient-wind-streak--5,
    .ambient-wind-streak--8,
    .ambient-wind-streak--11
) {
    animation-duration: var(--ambient-wind-fast-duration, 6.6s);
}

.ambient-tornado-debris {
    --debris-top: 18%;
    --debris-speed: 10s;
    --debris-delay: 0s;
    --debris-color: rgba(113, 91, 62, 0.82);
    position: absolute;
    top: var(--debris-top);
    left: -20px;
    display: none;
    width: 10px;
    height: 5px;
    border-radius: 2px;
    opacity: 0;
    background: var(--debris-color);
    box-shadow: 0 1px 2px rgba(12, 11, 9, 0.7);
    filter: drop-shadow(0 0 1px rgba(225, 196, 136, 0.2));
    will-change: transform, opacity;
    animation: ambientTornadoDebrisDrift var(--debris-speed) linear infinite var(--debris-delay);
}

.ambient-tornado-debris::before {
    content: '';
    position: absolute;
    display: block;
}

/* Four small twigs; the pseudo-element forms a visible side branch. */
.ambient-tornado-debris--1,
.ambient-tornado-debris--4,
.ambient-tornado-debris--7,
.ambient-tornado-debris--10 {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4b2c16, #9a6734 48%, #3a2416);
}

.ambient-tornado-debris--1::before,
.ambient-tornado-debris--4::before,
.ambient-tornado-debris--7::before,
.ambient-tornado-debris--10::before {
    left: 40%;
    top: 0;
    width: 7px;
    height: 2px;
    border-radius: 2px;
    background: #68401f;
    transform: rotate(-42deg);
    transform-origin: left center;
}

/* Three leaves with a short stem, kept CSS-only for a low rendering cost. */
.ambient-tornado-debris--2,
.ambient-tornado-debris--5,
.ambient-tornado-debris--8 {
    border-radius: 85% 15% 78% 22%;
    background: linear-gradient(135deg, #a06b28 0%, #6d6725 48%, #35451f 100%);
}

.ambient-tornado-debris--2::before,
.ambient-tornado-debris--5::before,
.ambient-tornado-debris--8::before {
    right: -4px;
    top: 50%;
    width: 5px;
    height: 1px;
    background: #56371d;
    transform: rotate(22deg);
    transform-origin: left center;
}

/* Three irregular scraps/wood chips. */
.ambient-tornado-debris--3,
.ambient-tornado-debris--6,
.ambient-tornado-debris--9 {
    border-radius: 0;
    clip-path: polygon(8% 10%, 94% 0, 76% 42%, 100% 82%, 35% 100%, 0 63%);
    background: linear-gradient(145deg, #78766b, #393b37 55%, #8a6339);
}

.ambient-tornado-debris--1 { --debris-top: 11%; --debris-speed: 9.8s; --debris-delay: -2.1s; width: 16px; }
.ambient-tornado-debris--2 { --debris-top: 22%; --debris-speed: 11.6s; --debris-delay: -8.4s; width: 11px; height: 7px; }
.ambient-tornado-debris--3 { --debris-top: 34%; --debris-speed: 10.7s; --debris-delay: -4.7s; width: 9px; height: 8px; }
.ambient-tornado-debris--4 { --debris-top: 47%; --debris-speed: 12.4s; --debris-delay: -9.2s; width: 19px; }
.ambient-tornado-debris--5 { --debris-top: 58%; --debris-speed: 10.2s; --debris-delay: -6.8s; width: 9px; height: 6px; }
.ambient-tornado-debris--6 { --debris-top: 69%; --debris-speed: 11.9s; --debris-delay: -3.3s; width: 11px; height: 7px; }
.ambient-tornado-debris--7 { --debris-top: 79%; --debris-speed: 13.1s; --debris-delay: -10.6s; width: 14px; }
.ambient-tornado-debris--8 { --debris-top: 28%; --debris-speed: 12.7s; --debris-delay: -1.5s; width: 12px; height: 7px; }
.ambient-tornado-debris--9 { --debris-top: 53%; --debris-speed: 11.1s; --debris-delay: -7.7s; width: 8px; height: 9px; }
.ambient-tornado-debris--10 { --debris-top: 72%; --debris-speed: 13.6s; --debris-delay: -5.4s; width: 17px; }

body[data-global-weather-mode="dynamic"][data-ambient-weather="tornado"] .ambient-tornado-debris {
    display: block;
}

/* Pre-storm debris crosses both ways, slower, and some pieces loop like a hurricane. */
body[data-pre-storm-show="true"] .ambient-tornado-debris {
    display: block;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

body[data-pre-storm-show="true"] .ambient-tornado-debris--1 {
    animation-name: preStormDebrisAcross;
    animation-duration: 24s;
    animation-delay: -4s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--3 {
    animation-name: preStormDebrisAcross;
    animation-duration: 28s;
    animation-delay: -15s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--6 {
    animation-name: preStormDebrisAcrossHigh;
    animation-duration: 22s;
    animation-delay: -8s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--8 {
    animation-name: preStormDebrisReturn;
    animation-duration: 26s;
    animation-delay: -11s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--2 {
    animation-name: preStormDebrisReturn;
    animation-duration: 23s;
    animation-delay: -2s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--5 {
    animation-name: preStormDebrisReturnLow;
    animation-duration: 27s;
    animation-delay: -18s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--9 {
    animation-name: preStormDebrisReturn;
    animation-duration: 21s;
    animation-delay: -7s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--4 {
    --orbit-x: 22vw;
    --orbit-y: 8vh;
    --orbit-r: 9vh;
    animation-name: preStormDebrisOrbit;
    animation-duration: 14s;
    animation-delay: -3s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--7 {
    --orbit-x: 58vw;
    --orbit-y: 16vh;
    --orbit-r: 11vh;
    animation-name: preStormDebrisOrbit;
    animation-duration: 18s;
    animation-delay: -9s;
}
body[data-pre-storm-show="true"] .ambient-tornado-debris--10 {
    --orbit-x: 74vw;
    --orbit-y: 6vh;
    --orbit-r: 8vh;
    animation-name: preStormDebrisOrbitReverse;
    animation-duration: 16s;
    animation-delay: -5s;
}

@keyframes preStormDebrisAcross {
    0% { transform: translate3d(-8vw, 6px, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 0.9; }
    32% { transform: translate3d(28vw, -8px, 0) rotate(80deg); }
    42% { transform: translate3d(40vw, -34px, 0) rotate(160deg); }
    52% { transform: translate3d(54vw, -6px, 0) rotate(250deg); }
    62% { transform: translate3d(40vw, 28px, 0) rotate(340deg); }
    72% { transform: translate3d(30vw, 2px, 0) rotate(400deg); opacity: 0.85; }
    100% { transform: translate3d(112vw, -10px, 0) rotate(560deg); opacity: 0; }
}

@keyframes preStormDebrisAcrossHigh {
    0% { transform: translate3d(-10vw, -4px, 0) rotate(20deg); opacity: 0; }
    14% { opacity: 0.88; }
    38% { transform: translate3d(36vw, 18px, 0) rotate(140deg); }
    48% { transform: translate3d(48vw, -16px, 0) rotate(230deg); }
    58% { transform: translate3d(60vw, 22px, 0) rotate(320deg); }
    68% { transform: translate3d(46vw, 36px, 0) rotate(400deg); }
    100% { transform: translate3d(116vw, 8px, 0) rotate(620deg); opacity: 0; }
}

@keyframes preStormDebrisReturn {
    0% { transform: translate3d(112vw, 4px, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 0.9; }
    30% { transform: translate3d(78vw, -12px, 0) rotate(-90deg); }
    42% { transform: translate3d(64vw, -36px, 0) rotate(-180deg); }
    54% { transform: translate3d(50vw, -4px, 0) rotate(-280deg); }
    64% { transform: translate3d(64vw, 30px, 0) rotate(-370deg); }
    74% { transform: translate3d(76vw, 0, 0) rotate(-430deg); opacity: 0.84; }
    100% { transform: translate3d(-14vw, 8px, 0) rotate(-640deg); opacity: 0; }
}

@keyframes preStormDebrisReturnLow {
    0% { transform: translate3d(108vw, 20px, 0) rotate(-30deg); opacity: 0; }
    15% { opacity: 0.86; }
    36% { transform: translate3d(70vw, 8px, 0) rotate(-150deg); }
    48% { transform: translate3d(56vw, -22px, 0) rotate(-240deg); }
    60% { transform: translate3d(44vw, 16px, 0) rotate(-340deg); }
    70% { transform: translate3d(58vw, 34px, 0) rotate(-420deg); }
    100% { transform: translate3d(-12vw, 6px, 0) rotate(-600deg); opacity: 0; }
}

@keyframes preStormDebrisOrbit {
    0%, 100% { transform: translate3d(var(--orbit-x), var(--orbit-y), 0) rotate(0deg); opacity: 0.82; }
    25% { transform: translate3d(calc(var(--orbit-x) + var(--orbit-r)), calc(var(--orbit-y) - var(--orbit-r)), 0) rotate(140deg); opacity: 0.95; }
    50% { transform: translate3d(var(--orbit-x), calc(var(--orbit-y) - var(--orbit-r) - var(--orbit-r)), 0) rotate(280deg); }
    75% { transform: translate3d(calc(var(--orbit-x) - var(--orbit-r)), calc(var(--orbit-y) - var(--orbit-r)), 0) rotate(420deg); opacity: 0.9; }
}

@keyframes preStormDebrisOrbitReverse {
    0%, 100% { transform: translate3d(var(--orbit-x), var(--orbit-y), 0) rotate(0deg); opacity: 0.8; }
    25% { transform: translate3d(calc(var(--orbit-x) - var(--orbit-r)), calc(var(--orbit-y) + var(--orbit-r)), 0) rotate(-140deg); }
    50% { transform: translate3d(var(--orbit-x), calc(var(--orbit-y) + var(--orbit-r) + var(--orbit-r)), 0) rotate(-280deg); opacity: 0.94; }
    75% { transform: translate3d(calc(var(--orbit-x) + var(--orbit-r)), calc(var(--orbit-y) + var(--orbit-r)), 0) rotate(-420deg); }
}

@keyframes ambientLightningStrike {
    0%, 88%, 94%, 100% { opacity: 0; transform: translateY(-8px) scaleY(0.92); }
    89% { opacity: 1; transform: translateY(0) scaleY(1); }
    89.45% { opacity: 0.12; }
    89.9% { opacity: 0.92; }
    91% { opacity: 0; }
    92% { opacity: 0.72; }
    93% { opacity: 0; transform: translateY(4px) scaleY(1.02); }
}

@keyframes ambientLightningIntro {
    0% { opacity: 0.96; transform: translateY(0) scaleY(1); }
    10% { opacity: 0.12; }
    20% { opacity: 0.92; }
    36% { opacity: 0; }
    52% { opacity: 0.68; transform: translateY(2px) scaleY(1.01); }
    68%, 100% { opacity: 0; transform: translateY(4px) scaleY(1.02); }
}

@keyframes ambientThunderSkyIntro {
    0% { opacity: 0.7; }
    10% { opacity: 0.08; }
    20% { opacity: 0.58; }
    36% { opacity: 0; }
    52% { opacity: 0.38; }
    68%, 100% { opacity: 0; }
}

@keyframes ambientThunderSkyFlash {
    0%, 88%, 94%, 100% { opacity: 0; }
    89% { opacity: 0.78; }
    89.5% { opacity: 0.08; }
    90% { opacity: 0.62; }
    91.2% { opacity: 0; }
    92% { opacity: 0.42; }
    93% { opacity: 0; }
}

@keyframes ambientThunderCloudGlow {
    from { opacity: 0.38; transform: scaleX(0.98); }
    to { opacity: 0.62; transform: scaleX(1.03); }
}

@keyframes ambientStormWindParticle {
    0% { transform: translate3d(0, 5px, 0) scaleX(0.72); opacity: 0; }
    9% { opacity: var(--wind-opacity); }
    36% { transform: translate3d(calc(42 * var(--vz, 1vw)), -4px, 0) scaleX(1.05); opacity: var(--wind-opacity); }
    68% { transform: translate3d(calc(82 * var(--vz, 1vw)), 6px, 0) scaleX(0.9); opacity: 0.55; }
    92% { opacity: 0.4; }
    100% { transform: translate3d(calc(112 * var(--vz, 1vw)), -3px, 0) scaleX(0.78); opacity: 0; }
}

@keyframes ambientTornadoDebrisDrift {
    0% { transform: translate3d(0, 3px, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.92; }
    30% { transform: translate3d(calc(34 * var(--vz, 1vw)), -12px, 0) rotate(230deg); }
    57% { transform: translate3d(calc(67 * var(--vz, 1vw)), 9px, 0) rotate(510deg); opacity: 0.88; }
    80% { transform: translate3d(calc(93 * var(--vz, 1vw)), -7px, 0) rotate(760deg); opacity: 0.7; }
    100% { transform: translate3d(calc(114 * var(--vz, 1vw)), 4px, 0) rotate(940deg); opacity: 0; }
}

/* Keep the original pre-login lightning code available, but leave it disabled. */
.prelogin-storm__flash,
.prelogin-logo-bolt {
    visibility: hidden !important;
    animation-play-state: paused !important;
}

body[data-global-weather="snow"] .prelogin-storm__rain,
body[data-global-weather="christmas"] .prelogin-storm__rain {
    visibility: hidden;
    opacity: 0;
}

.global-weather-particle {
    position: absolute;
    top: -24px;
    left: var(--weather-left);
    animation-delay: var(--weather-delay);
    animation-duration: var(--weather-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

.global-weather-particle--snow {
    width: var(--weather-size);
    height: var(--weather-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, var(--weather-opacity));
    animation-name: globalWeatherSnowFall;
}

.global-weather-particle--leaf {
    width: var(--weather-size);
    height: calc(var(--weather-size) * 0.68);
    border-radius: 80% 12% 80% 12%;
    background: var(--leaf-color);
    opacity: var(--weather-opacity);
    animation-name: globalWeatherLeafFall;
}

.global-weather-particle--leaf::after {
    content: '';
    position: absolute;
    left: 48%;
    top: 8%;
    width: 1px;
    height: 82%;
    background: rgba(90, 38, 8, 0.45);
    transform: rotate(35deg);
}

.global-weather-particle--glitter {
    top: var(--weather-top);
    width: var(--weather-size);
    height: var(--weather-size);
    border-radius: 50%;
    opacity: 0;
    color: var(--glitter-color);
    background: currentColor;
    box-shadow:
        0 0 4px currentColor,
        0 0 10px currentColor;
    animation-name: globalChristmasGlitter;
}

.global-weather-particle--glitter::before,
.global-weather-particle--glitter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.global-weather-particle--glitter::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

@keyframes globalWeatherSnowFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
    10% { opacity: var(--weather-opacity); }
    100% {
        opacity: 0.15;
        transform: translate3d(var(--weather-drift), calc(60vh + 45px), 0);
    }
}

@keyframes globalWeatherLeafFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -25px, 0) rotate(0deg);
    }
    10% { opacity: var(--weather-opacity); }
    48% {
        transform: translate3d(var(--weather-drift-mid), 28vh, 0) rotate(190deg);
    }
    100% {
        opacity: 0.1;
        transform: translate3d(var(--weather-drift), calc(60vh + 55px), 0) rotate(420deg);
    }
}

@keyframes globalChristmasGlitter {
    0%, 100% { opacity: 0.08; transform: scale(0.45) rotate(0deg); }
    38% { opacity: var(--weather-opacity); transform: scale(1.15) rotate(35deg); }
    62% { opacity: 0.22; transform: scale(0.72) rotate(70deg); }
}

.moderation-weather-heading {
    margin-bottom: 16px;
    padding: 14px;
    border-left: 4px solid #42a5f5;
    border-radius: 8px;
    background: rgba(50, 50, 50, 0.3);
}

.moderation-weather-heading h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.05em;
}

.moderation-weather-heading p {
    margin: 0;
    color: #ccc;
    line-height: 1.5;
}

.moderation-weather-status {
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #444;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #bbb;
}

.moderation-pre-storm {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #655249;
    border-radius: 10px;
    background: linear-gradient(155deg, rgba(42, 29, 28, 0.72), rgba(18, 22, 28, 0.78));
}

.moderation-pre-storm h4 {
    margin: 0 0 6px;
    color: #ffd7a1;
}

.moderation-pre-storm p {
    margin: 0 0 12px;
    color: #ccc;
    line-height: 1.5;
}

.moderation-pre-storm__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.moderation-pre-storm__badge {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(255, 121, 80, 0.48);
    border-radius: 999px;
    color: #ffb29a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: rgba(116, 33, 22, 0.34);
}

.moderation-pre-storm .moderation-weather-status {
    margin-bottom: 12px;
}

.moderation-pre-storm__themes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 13px;
}

.moderation-pre-storm__theme {
    display: flex;
    min-width: 0;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 1px solid #4b5258;
    border-radius: 8px;
    color: #e7ebed;
    cursor: pointer;
    background: rgba(8, 13, 17, 0.72);
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.moderation-pre-storm__theme:hover,
.moderation-pre-storm__theme:focus-visible {
    border-color: #ba6860;
    transform: translateY(-1px);
    outline: none;
}

.moderation-pre-storm__theme.is-selected {
    border-color: #ec5149;
    background: linear-gradient(180deg, rgba(119, 37, 32, 0.54), rgba(34, 20, 22, 0.82));
    box-shadow: 0 0 0 1px rgba(236, 81, 73, 0.17), 0 6px 18px rgba(0, 0, 0, 0.22);
}

.moderation-pre-storm__theme:disabled {
    cursor: wait;
    opacity: 0.62;
}

.moderation-pre-storm__theme strong {
    color: #fff;
    font-size: 12px;
}

.moderation-pre-storm__theme small {
    overflow: hidden;
    color: #9fa9ae;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moderation-pre-storm__theme-scene {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    overflow: hidden;
    border-radius: 5px;
    background: linear-gradient(180deg, #111d2a, #172229 62%, #091013);
}

.moderation-pre-storm__theme-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background: repeating-linear-gradient(110deg, transparent 0 10px, rgba(181, 211, 224, 0.52) 11px 12px, transparent 13px 20px);
    animation: moderationPreStormRain 0.8s linear infinite;
}

.moderation-pre-storm__theme-scene--normal i {
    position: absolute;
    top: 8px;
    left: 55%;
    width: 3px;
    height: 21px;
    background: #eefaff;
    clip-path: polygon(45% 0, 100% 0, 66% 42%, 100% 42%, 0 100%, 33% 54%, 4% 54%);
    filter: drop-shadow(0 0 4px #ccecff);
}

.moderation-pre-storm__theme-scene--halloween { background: linear-gradient(180deg, #281126, #482116 64%, #100a0b); }
.moderation-pre-storm__theme-scene--winter { background: linear-gradient(180deg, #395164, #6d8691 64%, #26383f); }
.moderation-pre-storm__theme-scene--christmas { background: linear-gradient(180deg, #0e3a38, #174e3f 64%, #32151a); }

.moderation-pre-storm__theme-scene:not(.moderation-pre-storm__theme-scene--normal) i {
    position: absolute;
    z-index: 1;
    top: -5px;
    color: #fff;
    font-style: normal;
    animation: moderationThemeFall 2.1s linear infinite;
}
.moderation-pre-storm__theme-scene i:nth-child(1) { left: 18%; animation-delay: -0.4s; }
.moderation-pre-storm__theme-scene i:nth-child(2) { left: 49%; animation-delay: -1.6s; }
.moderation-pre-storm__theme-scene i:nth-child(3) { left: 78%; animation-delay: -0.9s; }
.moderation-pre-storm__theme-scene--halloween i { width: 10px; height: 8px; border-radius: 45%; background: #e66b16; box-shadow: inset 2px 0 #ff9b2d, inset -2px 0 #9d310d; }
.moderation-pre-storm__theme-scene--halloween i::before { content: ''; position: absolute; top: -3px; left: 4px; width: 2px; height: 4px; background: #4b6b29; transform: rotate(18deg); }
.moderation-pre-storm__theme-scene--winter i::before { content: '\2744'; font-size: 12px; }
.moderation-pre-storm__theme-scene--christmas i::before { content: '\2744'; font-size: 11px; }
.moderation-pre-storm__theme-scene--christmas i:nth-child(2)::before { content: ''; display: block; width: 10px; height: 9px; background: linear-gradient(90deg, transparent 42%, #f4d75c 43% 57%, transparent 58%), #d32f2f; box-shadow: 0 -2px 0 #f4d75c; }

@keyframes moderationPreStormRain { to { background-position: 0 28px; } }
@keyframes moderationThemeFall { to { transform: translate3d(5px, 50px, 0) rotate(110deg); } }

@media (max-width: 760px) {
    .moderation-pre-storm__themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.moderation-pre-storm__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.moderation-pre-storm__controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #ddd;
    font-size: 0.85em;
    font-weight: 700;
}

.moderation-pre-storm__controls input {
    width: 88px;
    padding: 8px 10px;
    border: 1px solid #666;
    border-radius: 6px;
    background: #1c1c1c;
    color: #fff;
    font: inherit;
}

.moderation-pre-storm__controls button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: #8a4b16;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.moderation-pre-storm__controls button:last-child {
    background: #444;
}

.moderation-weather-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.moderation-weather-option {
    display: flex;
    min-height: 150px;
    padding: 18px 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 2px solid #444;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(60, 60, 60, 0.75), rgba(25, 25, 25, 0.85));
    color: #eee;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.moderation-weather-option:hover {
    border-color: #777;
    transform: translateY(-2px);
}

.moderation-weather-option.is-active {
    border-color: #42a5f5;
    background: linear-gradient(180deg, rgba(33, 115, 170, 0.5), rgba(20, 55, 78, 0.75));
}

.moderation-weather-option__icon {
    font-size: 2.25em;
    line-height: 1;
}

.moderation-weather-option strong {
    font-size: 1em;
}

.moderation-weather-option small {
    color: #aaa;
    font-size: 0.8em;
}

.moderation-weather-preview-heading {
    display: flex;
    margin-top: 24px;
    padding-top: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #444;
}

.moderation-weather-preview-heading h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 1em;
}

.moderation-weather-preview-heading p {
    margin: 0;
    color: #aaa;
    font-size: 0.84em;
}

.moderation-weather-preview-heading button {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid #666;
    border-radius: 6px;
    background: #3d3d3d;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

.moderation-weather-preview-status {
    margin: 12px 0;
    color: #9ecfff;
    font-size: 0.86em;
}

.moderation-weather-preview-subheading {
    margin: 14px 0 8px;
    color: #ddd;
    font-size: 0.82em;
    font-weight: 700;
}

.moderation-weather-preview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.moderation-weather-preview-grid--sky-base {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.moderation-weather-preview-grid--sky-base .moderation-weather-preview-option {
    min-height: 78px;
}

.moderation-sky-base-preview-option small {
    color: #aaa;
    font-size: 0.68em;
    line-height: 1.2;
}

.moderation-weather-preview-option {
    display: flex;
    min-height: 74px;
    padding: 9px 7px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #4d4d4d;
    border-radius: 7px;
    background: rgba(25, 25, 25, 0.72);
    color: #ddd;
    cursor: pointer;
    font-family: inherit;
}

.moderation-weather-preview-option:hover {
    border-color: #888;
    background: rgba(55, 55, 55, 0.78);
}

.moderation-weather-preview-option.is-active {
    border-color: #ffb74d;
    background: rgba(145, 82, 15, 0.38);
    color: #fff;
}

.moderation-weather-preview-option span {
    font-size: 1.35em;
    line-height: 1;
}

.moderation-weather-preview-option strong {
    font-size: 0.76em;
}

@media (prefers-reduced-motion: reduce) {
    .global-weather-particle,
    .moderation-weather-option,
    .ambient-lightning,
    .ambient-thunder-flash,
    .ambient-wind-streak,
    .ambient-tornado-debris,
    body[data-global-weather="christmas"] .prelogin-storm__ambient-overlay::before,
    .prelogin-storm__halloween-veil::before,
    .prelogin-storm__halloween-veil::after,
    .prelogin-logo-corn span,
    .prelogin-storm__ambient-fx::after,
    .prelogin-storm__ambient-fx::before {
        animation: none;
        transition: none;
    }

    .ambient-lightning,
    .prelogin-storm__ambient-fx::before {
        opacity: 0;
    }
}

.inventory-children-panel {
    min-height: 425px;
    display: flex;
    flex-direction: column;
}

.inventory-children-loading,
.inventory-children-empty,
.inventory-children-error {
    text-align: center;
    padding: 40px 0;
    color: #aaa;
    grid-column: 1 / -1;
}

.inventory-children-error {
    color: #ff8a80;
}

.inventory-children-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.inventory-children-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.14), rgba(100, 149, 237, 0.08));
    border: 1px solid rgba(255, 107, 157, 0.28);
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

.inventory-children-card:hover {
    filter: brightness(1.08);
}

.inventory-children-card img {
    width: 88px;
    height: 108px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.inventory-children-card.is-girl img {
    border: 3px solid #ff69b4;
}

.inventory-children-card.is-boy img {
    border: 3px solid #4169e1;
}

.inventory-children-info {
    width: 100%;
    text-align: center;
    margin-top: 7px;
}

.inventory-children-name {
    font-weight: bold;
    font-size: 1.08em;
    margin: 0 0 4px 0;
}

.inventory-children-card.is-girl .inventory-children-name {
    color: #ff69b4;
}

.inventory-children-card.is-boy .inventory-children-name {
    color: #90caf9;
}

.inventory-children-age {
    margin: 0;
    color: #ccc;
    font-size: 0.9em;
}

.inventory-children-card-hint {
    width: 100%;
    margin-bottom: 12px;
    text-align: center;
    color: #ddd;
    font-size: 0.92em;
}

.inventory-children-card-hint strong {
    color: #ffd54f;
}

.inventory-children-card.is-on-card {
    border-color: #ffd54f;
    box-shadow: 0 0 0 1px rgba(255, 213, 84, 0.35);
}

.inventory-children-card.has-parenting-event {
    border-color: #ff3b30;
    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.55), 0 0 14px rgba(255, 59, 48, 0.35);
}

.inventory-children-card.has-parenting-event > img {
    animation: inventoryChildParentingBlink 0.8s steps(1, end) infinite;
}

.child-hunger-death-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 82, 82, 0.72);
    border-left: 4px solid #ff3333;
    border-radius: 7px;
    background: rgba(95, 10, 10, 0.48);
    box-shadow: 0 0 10px rgba(255, 35, 35, 0.12);
    text-align: left;
}

.child-hunger-death-warning > img {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    object-fit: contain;
    image-rendering: pixelated;
}

.child-hunger-death-warning > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.child-hunger-death-warning strong {
    color: #ff6666;
    font-size: 0.88em;
    line-height: 1.25;
}

.child-hunger-death-warning strong span {
    color: #fff;
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.child-hunger-death-warning small {
    color: #ffc2c2;
    font-size: 0.75em;
    line-height: 1.3;
}

@keyframes inventoryChildParentingBlink {
    0%, 49%, 100% {
        opacity: 1;
        filter: brightness(1.15) drop-shadow(0 0 7px rgba(255, 59, 48, 0.9));
    }
    50%, 99% {
        opacity: 0.28;
        filter: brightness(0.65);
    }
}

.inventory-child-parenting-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
    padding: 3px 6px;
    border: 1px solid #ff665c;
    border-radius: 9px;
    background: rgba(115, 0, 0, 0.92);
    color: #fff;
    font-size: 0.62em;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.inventory-children-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(58px, 0.65fr);
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.inventory-children-card-toggle {
    margin-top: 0;
    position: relative;
    top: 5px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #eee;
    padding: 0 5px;
    height: 38px;
    font-size: 0.78em;
    font-weight: bold;
    cursor: pointer;
    white-space: normal;
    line-height: 1.1;
}

.inventory-children-card-toggle.is-active {
    background: linear-gradient(to right, #ffd54f, #ffb300);
    border-color: #ffd54f;
    color: #3e2723;
}

.inventory-children-card-toggle:hover {
    filter: brightness(1.08);
}

.inventory-children-card-care {
    border: 1px solid rgba(255, 143, 171, 0.75);
    border-radius: 6px;
    background: linear-gradient(to right, #ff6b9d, #c44569);
    color: white;
    padding: 0 5px;
    height: 38px;
    font-size: 0.78em;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

.inventory-children-card-care:hover {
    filter: brightness(1.1);
}

.inventory-children-footer {
    margin-top: 18px;
    text-align: center;
    width: 100%;
}

.inventory-children-care-button {
    width: 100%;
    max-width: 260px;
    background: linear-gradient(to right, #ff6b9d, #c44569);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 1.05em;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(196, 69, 105, 0.35);
}

.inventory-children-care-button:hover {
    filter: brightness(1.08);
}

.inventory-children-intro {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 22px;
    align-items: center;
    min-height: 405px;
}

.inventory-children-intro-scan {
    background: #0b0b0b;
    border: 2px solid rgba(255, 107, 157, 0.35);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 40px rgba(255, 107, 157, 0.08);
}

.inventory-children-intro-scan img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
    display: block;
    image-rendering: pixelated;
}

.inventory-children-intro-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.inventory-children-intro-copy h4 {
    margin: 0;
    color: #ff8fab;
    font-size: 1.35em;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.inventory-children-intro-copy p {
    margin: 0;
    color: #ddd;
    line-height: 1.55;
    font-size: 0.98em;
}

.inventory-children-intro-aside {
    margin-top: 4px !important;
    padding: 10px 12px;
    background: rgba(255, 107, 157, 0.12);
    border-left: 3px solid #ff6b9d;
    border-radius: 6px;
    color: #f8bbd0 !important;
    font-size: 0.92em !important;
}

.inventory-children-intro-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.inventory-children-guide-button,
.inventory-children-try-button {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.inventory-children-guide-button {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.inventory-children-guide-button:hover {
    background: rgba(255, 255, 255, 0.24);
}

.inventory-children-try-button {
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.inventory-children-try-button:hover {
    filter: brightness(1.08);
}
/* City Outskirts — animated sewer sludge icon */
.sewers-menu-button {
    padding-left: 44px !important;
    padding-right: 44px !important;
}

.sewers-button-icon {
    position: absolute;
    right: 3px;
    top: 50%;
    width: 30px;
    height: 22px;
    transform: translateY(-50%);
    overflow: visible;
    pointer-events: auto;
    cursor: help;
}

.sewers-button-icon > * {
    pointer-events: none;
}

.sewers-button-sludge {
    position: absolute;
    z-index: 1;
    left: 2px;
    bottom: 1px;
    width: 26px;
    height: 18px;
    border-radius: 48% 55% 45% 50%;
    background: linear-gradient(135deg, #81921f 0%, #536b18 48%, #6a431d 72%, #3b2815 100%);
    box-shadow: inset 2px 2px 2px rgba(180, 196, 67, 0.35), 0 0 4px rgba(109, 139, 30, 0.65);
    transform-origin: center bottom;
    animation: sewersButtonSludgeWobble 1.8s ease-in-out infinite;
}

.sewers-button-plant-count {
    position: absolute;
    z-index: 3;
    left: 2px;
    bottom: 1px;
    width: 26px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fffbd1;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 1px #1b1408, 0 0 2px #1b1408;
}

.sewers-button-key-icon {
    position: absolute;
    z-index: 3;
    left: -2px;
    bottom: -6px;
    width: 34px;
    height: 34px;
    display: none;
    object-fit: contain;
    filter: brightness(1.65) contrast(1.35) drop-shadow(0 0 1px #fff7ce) drop-shadow(0 1px 1px #120c04);
}

.sewers-button-bubble {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    background: #98a92b;
    box-shadow: inset 1px 1px 1px rgba(220, 225, 130, 0.5), 0 0 2px rgba(123, 148, 33, 0.8);
    opacity: 0;
}

.sewers-button-bubble--one {
    left: 7px;
    bottom: 15px;
    width: 4px;
    height: 4px;
    animation: sewersButtonBubbleRise 1.6s ease-out infinite;
}

.sewers-button-bubble--two {
    right: 4px;
    bottom: 14px;
    width: 3px;
    height: 3px;
    background: #795126;
    animation: sewersButtonBubbleRise 1.6s ease-out 0.8s infinite;
}

@keyframes sewersButtonSludgeWobble {
    0%, 100% { transform: translateX(0) scale(1, 1); }
    35% { transform: translateX(1px) scale(1.06, 0.92); }
    68% { transform: translateX(-1px) scale(0.96, 1.08); }
}

@keyframes sewersButtonBubbleRise {
    0% { transform: translateY(0) scale(0.65); opacity: 0; }
    20% { opacity: 0.9; }
    75% { opacity: 0.65; }
    100% { transform: translateY(-10px) scale(1.05); opacity: 0; }
}

/* Sewer shop and inventory placeholders — replace with item images later. */
.sewer-tab-blob {
    width: 19px;
    height: 12px;
    border-radius: 55% 45% 50% 42%;
    background: linear-gradient(135deg, #8d9f27, #586f1d 55%, #6b421e);
    box-shadow: inset 2px 2px 2px rgba(210, 220, 108, 0.28), 0 0 4px rgba(116, 144, 35, 0.55);
    animation: sewersButtonSludgeWobble 1.8s ease-in-out infinite;
}

.sewer-item-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 4px;
    object-fit: contain;
    border-radius: 16px;
    border: 2px solid rgba(166, 181, 70, 0.65);
    background: radial-gradient(circle at 35% 30%, rgba(145, 166, 56, 0.8), rgba(55, 66, 28, 0.95) 62%, #25291a 100%);
    box-shadow: inset 0 0 12px rgba(214, 224, 119, 0.16), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.sewer-item-placeholder > span {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
}

.sewer-item-placeholder--starter {
    border-color: rgba(160, 112, 61, 0.78);
    background: radial-gradient(circle at 35% 30%, #785b36, #3c3021 64%, #211c16 100%);
}

.sewer-item-placeholder--seed {
    border-color: rgba(142, 172, 54, 0.8);
}

.sewer-item-placeholder--spray {
    border-color: rgba(109, 151, 98, 0.8);
    background: radial-gradient(circle at 35% 30%, #657b42, #34452e 64%, #1c261c 100%);
}

.sewer-item-placeholder--blue-moss {
    border-color: rgba(67, 151, 210, 0.85);
    background: radial-gradient(circle at 35% 30%, #315f7d, #243b4a 64%, #151f26 100%);
}

.sewer-item-placeholder--red-moss {
    border-color: rgba(204, 70, 63, 0.85);
    background: radial-gradient(circle at 35% 30%, #7b3731, #472521 64%, #271817 100%);
}

.sewer-item-placeholder--green-moss {
    border-color: rgba(95, 174, 74, 0.85);
    background: radial-gradient(circle at 35% 30%, #496f37, #2d4326 64%, #182417 100%);
}

.sewer-item-placeholder--shop {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain !important;
    font-size: 2.55em;
}

.sewer-item-placeholder--inventory {
    width: 92px;
    height: 92px;
    margin-bottom: 12px;
    font-size: 2.7em;
}

.sewer-item-placeholder--scene {
    width: 32px;
    height: 32px;
    padding: 2px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.05em;
}

.sewer-offer-inventory-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid rgba(157, 171, 72, 0.45);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(52, 58, 29, 0.82), rgba(34, 37, 25, 0.9));
    color: #dce7b2;
    text-align: center;
    font-size: 0.9em;
}

.sewer-offer-inventory-info #inventorySewerOfferCount {
    color: #ff4d4d;
    text-shadow: 0 0 8px rgba(255, 45, 45, 0.35);
}

.sewer-offer-inventory-info__ending {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.sewer-offer-inventory-info button {
    padding: 0;
    border: 0;
    background: none;
    color: #f6d57c;
    font: inherit;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.sewer-offer-inventory-info button:hover,
.sewer-offer-inventory-info button:focus-visible {
    color: #fff1b9;
}

.sewer-items-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.sewer-item-card {
    position: relative;
    min-width: 0;
    padding: 18px 14px 14px;
    text-align: center;
    border: 1px solid rgba(125, 141, 57, 0.48);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(48, 52, 34, 0.94), rgba(28, 29, 23, 0.96));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.sewer-item-card h4 {
    margin: 0 0 7px;
    color: #e8e2c5;
    font-size: 1em;
}

.sewer-item-card__image {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
}

.sewer-item-card__image .sewer-item-placeholder--inventory {
    display: block;
    margin: 0;
}

.sewer-item-card p {
    min-height: 44px;
    margin: 0 0 12px;
    color: #aaa995;
    font-size: 0.76em;
    line-height: 1.45;
}

.sewer-item-card__sell {
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    width: auto;
    min-width: 50px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #7f8b35, #4c5722);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
    font-size: 0.72em;
    line-height: 1;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.sewer-item-card__sell:hover,
.sewer-item-card__sell:focus-visible {
    filter: brightness(1.2);
    transform: translateY(-1px);
    outline: none;
}

.sewer-item-card__sell--blue-moss {
    background: linear-gradient(to bottom, #247bb0, #174b70);
}

.sewer-item-card__sell--green-moss {
    background: linear-gradient(to bottom, #4f963f, #2d642d);
}

.sewer-item-card__sell--red-moss {
    background: linear-gradient(to bottom, #b2443e, #762722);
}

.sewer-item-card__quantity {
    padding: 6px 8px;
    color: #dce7a7;
    font-size: 0.82em;
    font-weight: bold;
    background: rgba(106, 126, 45, 0.22);
    border: 1px solid rgba(132, 151, 57, 0.38);
    border-radius: 5px;
}

.sewer-items-empty {
    padding: 90px 20px;
    color: #979b82;
    text-align: center;
}

.sewer-items-empty p {
    margin: 13px 0 6px;
    color: #d0d6ad;
    font-size: 1.05em;
}

.sewer-items-empty small {
    color: #8e907f;
}

.sewer-items-empty--error {
    color: #d88a7d;
}

.sewer-items-empty__blob {
    width: 46px;
    height: 25px;
    margin: 0 auto;
    border-radius: 52% 45% 55% 42%;
    background: linear-gradient(135deg, #859429, #526817 55%, #67401d);
    box-shadow: inset 4px 3px 4px rgba(210, 220, 108, 0.25), 0 0 12px rgba(111, 138, 32, 0.4);
    animation: sewersButtonSludgeWobble 1.8s ease-in-out infinite;
}

.sewers-scene-inventory {
    position: absolute;
    z-index: 2;
    right: 8%;
    bottom: 3%;
    width: 41%;
    transform: none;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid rgba(139, 151, 72, 0.58);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(28, 31, 20, 0.9), rgba(26, 22, 16, 0.84));
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.sewers-scene-inventory__title {
    margin-bottom: 7px;
    color: #dce5ad;
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.sewers-scene-inventory__title button {
    margin: 0;
    padding: 0;
    color: #efc56d;
    font: inherit;
    font-weight: bold;
    text-transform: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sewers-scene-inventory__title button:hover {
    color: #ffe49a;
}

.sewers-scene-inventory__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.sewers-scene-item {
    min-width: 0;
    padding: 5px 3px;
    text-align: center;
    border: 1px solid rgba(151, 157, 94, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
}

.sewers-scene-item .sewer-item-placeholder {
    margin: 0 auto 3px;
}

.sewers-scene-item span:not(.sewer-item-placeholder) {
    display: block;
    overflow: hidden;
    color: #c5c6ad;
    font-size: 0.58em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sewers-scene-item strong {
    display: block;
    margin-top: 2px;
    color: #d9e58e;
    font-size: 0.66em;
}

.sewers-scene-inventory__empty {
    grid-column: 1 / -1;
    padding: 14px 6px;
    color: #a5a892;
    font-size: 0.68em;
    text-align: center;
}

/* Sewer 2 — compact live dashboard for all growing spots. */
.sewers-spot-overview {
    position: absolute;
    z-index: 4;
    left: 2.2%;
    top: auto;
    bottom: 3%;
    width: 370px;
    max-width: 44%;
    box-sizing: border-box;
    padding: 10px;
    color: #e5e8cb;
    border: 1px solid rgba(133, 154, 62, 0.58);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(18, 21, 13, 0.92), rgba(28, 25, 16, 0.88));
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(215, 225, 157, 0.07);
    backdrop-filter: blur(3px);
}

.sewers-spot-overview__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    text-align: left;
}

.sewers-spot-overview__header strong {
    display: block;
    color: #dce9a5;
    font-size: 0.78em;
    text-transform: uppercase;
}

.sewers-spot-overview__header span {
    display: block;
    margin-top: 2px;
    color: #aeb590;
    font-size: 0.6em;
}

.sewers-spot-overview__header span b {
    color: #f1f4d6;
}

.sewers-spot-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.sewers-spot-overview__loading {
    grid-column: 1 / -1;
    padding: 24px 8px;
    color: #aeb590;
    font-size: 0.68em;
    text-align: center;
}

.sewers-spot-overview__loading--error {
    color: #ef9a9a;
}

.sewers-spot-summary-card {
    min-width: 0;
    min-height: 76px;
    box-sizing: border-box;
    padding: 5px 4px 6px;
    text-align: center;
    border: 1px solid rgba(119, 137, 50, 0.38);
    border-radius: 6px;
    background: rgba(31, 37, 20, 0.76);
}

.sewers-spot-summary-card > strong {
    display: block;
    margin-bottom: 2px;
    color: #dbe5ae;
    font-size: 0.58em;
}

.sewers-spot-summary-card > img {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 1px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.sewers-spot-summary-card > span:not(.sewers-spot-summary-card__empty-ring) {
    display: block;
    overflow: hidden;
    color: #eef2d5;
    font-size: 0.56em;
    font-weight: bold;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sewers-spot-summary-card > small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #aeb590;
    font-size: 0.49em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sewers-spot-summary-card > small b {
    color: #e9efbd;
    font-weight: bold;
}

.sewers-spot-summary-card__empty-ring {
    display: flex;
    width: 28px;
    height: 13px;
    box-sizing: border-box;
    margin: 7px auto 8px;
    align-items: center;
    justify-content: center;
    color: #c7d783;
    font-size: 0.7em;
    border: 1px solid #77902d;
    border-radius: 50%;
}

.sewers-spot-summary-card.is-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #898b7a;
    border-color: rgba(115, 110, 91, 0.34);
    background: rgba(34, 32, 27, 0.7);
}

.sewers-spot-summary-card.is-locked > span {
    color: #aaa99b;
    font-size: 0.58em;
    font-weight: bold;
}

.sewers-spot-summary-card.is-ready {
    border-color: rgba(218, 179, 55, 0.75);
    background: rgba(91, 67, 17, 0.82);
    box-shadow: 0 0 8px rgba(222, 185, 61, 0.24);
    animation: sewerOverviewReadyPulse 2.2s ease-in-out infinite;
}

.sewers-spot-summary-card.is-ready > span {
    color: #fff0a2;
}

.sewers-spot-summary-card.is-preparing {
    border-color: rgba(118, 157, 56, 0.56);
}

@keyframes sewerOverviewReadyPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(222, 185, 61, 0.2); }
    50% { box-shadow: 0 0 12px rgba(222, 185, 61, 0.45); }
}

/* Sewer 3 — permanent growing spots on the left and right beams. */
.sewer-growing-spots {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.sewer-growing-spots__loading {
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    padding: 7px 12px;
    color: #dedfc4;
    font-size: 0.74em;
    border: 1px solid rgba(150, 154, 92, 0.45);
    border-radius: 6px;
    background: rgba(20, 20, 14, 0.82);
}

.sewer-growing-spots__loading--error {
    color: #ef9a9a;
    border-color: rgba(239, 83, 80, 0.45);
}

.sewer-growing-spot {
    position: absolute;
    width: 90px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: auto;
}

.sewer-growing-spot--1 { left: 12%; top: 64.5%; }
.sewer-growing-spot--2 { left: 26%; top: 59%; }
.sewer-growing-spot--3 { left: 39%; top: 56.2%; }
.sewer-growing-spot--4 { left: 78.5%; top: 54.2%; }
.sewer-growing-spot--5 { left: 87%; top: 58.2%; }
.sewer-growing-spot--6 { left: 95.5%; top: 62.7%; }

.sewer-growing-spot--4,
.sewer-growing-spot--5,
.sewer-growing-spot--6 {
    width: 74px;
}

.sewer-growing-spot--4 .sewer-growing-spot__plot,
.sewer-growing-spot--5 .sewer-growing-spot__plot,
.sewer-growing-spot--6 .sewer-growing-spot__plot {
    width: 50px;
    height: 23px;
}

.sewer-growing-spot__plot {
    position: relative;
    width: 56px;
    height: 25px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 2px dashed #84a733;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 7px rgba(126, 171, 45, 0.48);
    overflow: visible;
}

.sewer-growing-spot__plus {
    display: block;
    line-height: 19px;
    color: #f0efd5;
    font-size: 1.05em;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.sewer-growing-spot__plant {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 9px;
    width: auto;
    object-fit: contain;
    transform: translateX(-50%);
    transform-origin: center bottom;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.sewer-growing-spot__plant--stage-1 { height: 54px; }
.sewer-growing-spot__plant--stage-2 { height: 88px; }
.sewer-growing-spot__plant--stage-3 { height: 125px; }

.sewer-growing-spot__supply {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 2px;
    width: 34px;
    height: 34px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.sewer-growing-spot__label {
    width: max-content;
    max-width: 88px;
    margin: 3px auto 0;
    padding: 2px 5px;
    overflow: hidden;
    color: #e4e3c9;
    font-size: 0.58em;
    font-weight: bold;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 3px;
    background: rgba(19, 18, 13, 0.82);
}

.sewer-growing-spot__buy {
    width: 76px;
    margin-top: 3px;
    padding: 3px 2px;
    color: white;
    font-size: 0.67em;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    background: red;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
    cursor: pointer;
}

.sewer-growing-spot__buy:hover {
    background: #e53935;
}

.sewer-growing-spot__action {
    width: 68px;
    min-height: 25px;
    padding: 3px 3px;
    font-size: 0.58em;
    line-height: 1.1;
}

.sewer-growing-spot__buy:disabled {
    color: #b9b9b9;
    background: #4d4742;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.9;
}

.sewer-growing-spot.is-unlocked .sewer-growing-spot__plot {
    border-style: solid;
    border-color: #8aa43a;
    background: transparent;
    box-shadow: 0 0 8px rgba(126, 171, 45, 0.58);
}

.sewer-growing-spot__status {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: 68px;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 2px;
    transform: translateX(-50%);
    color: #dceda7;
    font-size: 0.62em;
    font-weight: bold;
    border: 1px solid rgba(139, 173, 59, 0.58);
    border-radius: 4px;
    background: rgba(55, 73, 26, 0.9);
}

.sewer-growing-spot__status--stage-1 { bottom: 67px; }
.sewer-growing-spot__status--stage-2 { bottom: 101px; }
.sewer-growing-spot__status--stage-3 { bottom: 138px; }

.sewer-growing-spot__countdown {
    display: inline-block;
    margin-top: 1px;
    color: #f0f2cf;
    font-size: 0.9em;
    white-space: nowrap;
}

.sewer-growing-spot__status.is-harvest-ready {
    color: #fff2a8;
    border-color: rgba(220, 181, 55, 0.72);
    background: rgba(103, 75, 19, 0.92);
    box-shadow: 0 0 6px rgba(222, 185, 61, 0.32);
}

/* Sewer entrance ambience: lamp flicker, floor condensation and a slow leak. */
.sewers-entrance-effects {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sewers-entrance-lamp-glow {
    position: absolute;
    left: 39.1%;
    top: 38.3%;
    width: 74px;
    height: 74px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 205, 105, 0.84) 0 5%,
        rgba(255, 164, 55, 0.52) 15%,
        rgba(226, 114, 24, 0.22) 38%,
        transparent 70%);
    filter: blur(1.5px);
    mix-blend-mode: screen;
    animation: sewerEntranceLampFlicker 4.8s infinite;
}

.sewers-entrance-lamp-glow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 17px;
    transform: translate(-50%, -50%);
    border-radius: 45%;
    background: rgba(255, 222, 143, 0.9);
    box-shadow: 0 0 10px 4px rgba(255, 169, 55, 0.65);
}

@keyframes sewerEntranceLampFlicker {
    0%, 7%, 12%, 29%, 34%, 62%, 68%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
    8%, 30%, 64% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.92); }
    10%, 32%, 66%, 83% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    84% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.96); }
}

.sewers-entrance-mist {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -2%;
    height: 34%;
    opacity: 0.78;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
}

.sewers-entrance-mist__bank {
    position: absolute;
    display: block;
    width: 58%;
    height: 54%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(194, 202, 169, 0.26) 0%,
        rgba(137, 153, 117, 0.14) 48%,
        transparent 75%);
    filter: blur(15px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.sewers-entrance-mist__bank--one {
    left: -12%;
    bottom: 2%;
    animation: sewerEntranceMistOne 14s ease-in-out infinite alternate;
}

.sewers-entrance-mist__bank--two {
    right: -9%;
    bottom: 13%;
    opacity: 0.74;
    animation: sewerEntranceMistTwo 18s ease-in-out -5s infinite alternate;
}

.sewers-entrance-mist__bank--three {
    left: 27%;
    bottom: -7%;
    width: 48%;
    opacity: 0.56;
    animation: sewerEntranceMistThree 11s ease-in-out -2s infinite alternate;
}

@keyframes sewerEntranceMistOne {
    from { transform: translate3d(-5%, 2%, 0) scale(1); opacity: 0.45; }
    to { transform: translate3d(46%, -7%, 0) scale(1.18); opacity: 0.78; }
}

@keyframes sewerEntranceMistTwo {
    from { transform: translate3d(7%, 4%, 0) scale(1.08); opacity: 0.35; }
    to { transform: translate3d(-52%, -4%, 0) scale(1.24); opacity: 0.7; }
}

@keyframes sewerEntranceMistThree {
    from { transform: translate3d(-18%, 3%, 0) scale(0.9); }
    to { transform: translate3d(28%, -8%, 0) scale(1.2); }
}

.sewers-entrance-drip {
    position: absolute;
    left: 26%;
    top: 13%;
    width: 30px;
    height: 72%;
    transform: translateX(-50%);
}

.sewers-entrance-drip__drop {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 11px;
    transform: translateX(-50%);
    border-radius: 55% 55% 65% 65%;
    background: linear-gradient(to bottom, #87983b 0%, #5e6d20 48%, #6b421b 100%);
    box-shadow: 0 0 3px rgba(128, 148, 45, 0.65);
    opacity: 0;
    animation: sewerEntranceDrop 8.6s cubic-bezier(.42, 0, .72, 1) infinite;
}

.sewers-entrance-drip__pool {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 26px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(108, 118, 37, 0.66) 0%, rgba(91, 63, 25, 0.5) 45%, transparent 74%);
    box-shadow: inset 0 1px 2px rgba(168, 174, 84, 0.36);
}

.sewers-entrance-drip__ripple {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 8px;
    height: 3px;
    transform: translateX(-50%);
    border: 1px solid rgba(155, 170, 68, 0.82);
    border-radius: 50%;
    opacity: 0;
    animation: sewerEntranceRipple 8.6s ease-out infinite;
}

@keyframes sewerEntranceDrop {
    0% { top: 0; opacity: 0.95; transform: translateX(-50%) scaleY(1); }
    15% { top: calc(100% - 8px); opacity: 0.95; transform: translateX(-50%) scaleY(1.35); }
    16% { top: calc(100% - 4px); opacity: 0; transform: translateX(-50%) scaleY(0.3); }
    17%, 100% { top: 0; opacity: 0; transform: translateX(-50%) scaleY(0.7); }
}

@keyframes sewerEntranceRipple {
    0%, 14% { width: 7px; height: 2px; opacity: 0; }
    16% { width: 8px; height: 3px; opacity: 0.9; }
    25% { width: 30px; height: 8px; opacity: 0; }
    26%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sewers-entrance-lamp-glow,
    .sewers-entrance-mist__bank,
    .sewers-entrance-drip__drop,
    .sewers-entrance-drip__ripple {
        animation: none;
    }
}

/* Sewer wall: slime trails and roaches stay within the wall scene. */
.sewers-wall-effects {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sewers-wall-drip::before {
    background: linear-gradient(to bottom, #a6aa43, #71802a 55%, #614816);
    box-shadow: 0 0 4px rgba(157, 168, 52, 0.64);
}

.sewers-wall-drip::after {
    left: 50%;
    top: 0;
    bottom: auto;
    width: 5px;
    height: 18px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 35% 35% 60% 60%;
    background: linear-gradient(to bottom, rgba(104, 112, 32, 0.58), rgba(173, 172, 55, 0.4), transparent);
    animation: sewerWallSlimeStretch 5.8s ease-in-out var(--drop-delay) infinite;
}

.sewers-wall-roach {
    scale: 2.8;
    background: linear-gradient(90deg, #1b0e07, #664021 46%, #1c1008);
    box-shadow: 0 0 2px rgba(191, 134, 61, 0.5), 0 2px 3px rgba(0, 0, 0, 0.9);
}

@keyframes sewerWallSlimeStretch {
    0%, 100% { height: 12px; opacity: 0.34; }
    55% { height: 31px; opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
    .sewers-wall-drip::before,
    .sewers-wall-drip::after,
    .sewers-wall-roach {
        animation: none;
    }
}

/* Sewer wall: two clear routes before entering either area. */
.sewers-wall-choice {
    position: absolute;
    z-index: 5;
    top: 53%;
    width: 150px;
    min-height: 42px;
    padding: 7px 12px;
    transform: translate(-50%, -50%);
    border: 2px solid #ec4747;
    border-radius: 5px;
    background: #bc0808;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
}

.sewers-wall-choice--growing { left: 29%; }
.sewers-wall-choice--offer { left: 71%; }
.sewers-wall-choice:hover { background: #e31a1a; }
.sewers-wall-choice:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Offer room: two side outlets, ceiling slime and the sewer's roaming roaches. */
.sewers-offer-effects {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sewers-offer-lamp-glow {
    position: absolute;
    left: 51%;
    top: 23.5%;
    width: 12%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 170, .7) 0 5%, rgba(241, 180, 80, .42) 16%, rgba(155, 88, 27, .2) 39%, transparent 74%);
    mix-blend-mode: screen;
    filter: blur(3px);
    animation: sewerOfferLampIdle 6.3s linear infinite;
}

.sewers-offer-sacrifice-beam {
    position: absolute;
    left: 51%;
    top: 25%;
    width: 43%;
    height: 53%;
    transform: translateX(-50%);
    clip-path: polygon(47% 0, 53% 0, 97% 100%, 3% 100%);
    background: linear-gradient(to bottom, rgba(255, 223, 140, .48), rgba(207, 146, 63, .32) 42%, rgba(150, 97, 32, .12) 80%, transparent);
    filter: blur(8px);
    mix-blend-mode: screen;
    opacity: 0;
}
.sewers-offer-sacrifice-beam::before {
    content: '';
    position: absolute;
    inset: 0 20%;
    background: linear-gradient(to bottom, rgba(255, 233, 169, .28), rgba(243, 182, 85, .16) 47%, transparent 88%);
    filter: blur(10px);
}
.sewers-offer-sacrifice-beam::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 20%;
    background: radial-gradient(ellipse at center, rgba(232, 174, 73, .16), transparent 72%);
    filter: blur(12px);
}

.sewers-offer-sacrifice-flash {
    position: absolute;
    left: 51%;
    top: 25%;
    width: 31%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 238, 187, .7) 0 3%, rgba(245, 183, 92, .42) 19%, rgba(170, 95, 30, .18) 43%, transparent 75%);
    mix-blend-mode: screen;
    filter: blur(7px);
    opacity: 0;
}

.sewers-offer-effects.is-offering .sewers-offer-lamp-glow {
    animation: sewerOfferLampBurst 2.7s linear both;
}
.sewers-offer-effects.is-offering .sewers-offer-sacrifice-beam {
    animation: sewerOfferBeam 2.7s linear both;
}
.sewers-offer-effects.is-offering .sewers-offer-sacrifice-flash {
    animation: sewerOfferFlash 2.7s linear both;
}
.sewers-offer-effects.has-reward .sewers-offer-sacrifice-beam {
    opacity: .28;
    animation: sewerOfferAfterglow 5.4s linear infinite;
}
.sewers-offer-effects.has-reward .sewers-offer-sacrifice-flash { opacity: .17; }

.sewers-offer-rewards-dropdown {
    position: absolute;
    z-index: 6;
    top: 18px;
    left: 18px;
    width: 225px;
    color: #f7f1e5;
    border: 1px solid rgba(165, 118, 54, .76);
    border-radius: 7px;
    background: rgba(24, 17, 10, .95);
    box-shadow: 0 5px 17px rgba(0, 0, 0, .75);
    overflow: hidden;
}
.sewers-offer-rewards-dropdown__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px;
    border: 0;
    background: linear-gradient(90deg, #39220e, #674015);
    color: #fff;
    text-align: left;
    font-size: .86em;
    font-weight: 700;
    cursor: pointer;
}
.sewers-offer-rewards-dropdown__toggle:hover { background: linear-gradient(90deg, #513014, #88531c); }
.sewers-offer-rewards-dropdown__toggle:focus-visible { outline: 2px solid #ffe29b; outline-offset: -2px; }
.sewers-offer-rewards-dropdown__content { padding: 8px 11px 8px; font-size: .76em; line-height: 1.3; }
.sewers-offer-rewards-dropdown__lead { margin: 0 0 2px; color: #dfcc9b; }
.sewers-offer-rewards-dropdown__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 7px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 239, 192, .16);
}
.sewers-offer-rewards-dropdown__row span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sewers-offer-rewards-dropdown__row img { width: 18px; height: 18px; object-fit: contain; }
.sewers-offer-rewards-dropdown__row strong { color: #fff1bb; }
.sewers-offer-rewards-dropdown__row small { grid-column: 1 / -1; color: #c1af84; }
.sewers-offer-rewards-dropdown__rules { margin-top: 4px; border-top: 1px solid rgba(255, 239, 192, .16); }
.sewers-offer-rewards-dropdown__rule { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255, 239, 192, .1); }
.sewers-offer-rewards-dropdown__rule:first-child { border-top: 0; }
.sewers-offer-rewards-dropdown__rule span { color: #c1af84; }
.sewers-offer-rewards-dropdown__rule strong { color: #fff1bb; font-weight: 700; white-space: nowrap; }
.sewers-offer-rewards-dropdown__rule--nobonus strong { color: #ffb0b0; }

.sewers-offer-reward {
    position: absolute;
    z-index: 3;
    left: 51%;
    top: 45%;
    width: min(48%, 390px);
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 5px #160e05, 0 0 15px #171008;
    animation: sewerOfferRewardReveal .65s ease-out both;
}
.sewers-offer-reward__eyebrow { font-size: .86em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sewers-offer-reward__value { display: flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.sewers-offer-reward__value img { width: 53px; height: 53px; object-fit: contain; filter: drop-shadow(0 0 9px currentColor); }
.sewers-offer-reward__value strong { font-size: clamp(1.6em, 3.2vw, 2.4em); line-height: 1; }
.sewers-offer-reward.is-green { color: #bfff8b; }
.sewers-offer-reward.is-blue { color: #a3d5ff; }
.sewers-offer-reward.is-red { color: #ff9d9d; }
@keyframes sewerOfferRewardReveal {
    from { opacity: 0; transform: translate(-50%, -35%) scale(.72); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes sewerOfferLampBurst {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
    9% { transform: translate(-50%, -50%) scale(2.1); opacity: .64; }
    12% { transform: translate(-50%, -50%) scale(1.35); opacity: .15; }
    20% { transform: translate(-50%, -50%) scale(3.4); opacity: .86; }
    23% { transform: translate(-50%, -50%) scale(2); opacity: .25; }
    27% { transform: translate(-50%, -50%) scale(3.7); opacity: .9; }
    30% { transform: translate(-50%, -50%) scale(1.5); opacity: .12; }
    35%, 60% { transform: translate(-50%, -50%) scale(4.2); opacity: .94; }
    63% { transform: translate(-50%, -50%) scale(2.5); opacity: .38; }
    66%, 76% { transform: translate(-50%, -50%) scale(4); opacity: .86; }
    79% { transform: translate(-50%, -50%) scale(2); opacity: .2; }
    83% { transform: translate(-50%, -50%) scale(3); opacity: .67; }
    90% { transform: translate(-50%, -50%) scale(1.6); opacity: .3; }
}
@keyframes sewerOfferBeam {
    0%, 100% { opacity: 0; }
    10% { opacity: .17; }
    13% { opacity: .03; }
    20% { opacity: .49; }
    23% { opacity: .12; }
    27% { opacity: .59; }
    30% { opacity: .04; }
    36%, 60% { opacity: .68; }
    63% { opacity: .24; }
    67%, 75% { opacity: .61; }
    79% { opacity: .09; }
    84% { opacity: .45; }
    92% { opacity: .18; }
}
@keyframes sewerOfferFlash {
    0%, 100% { opacity: 0; }
    11% { opacity: .28; }
    14% { opacity: .02; }
    22% { opacity: .62; }
    25% { opacity: .1; }
    29% { opacity: .7; }
    32% { opacity: .07; }
    38%, 57% { opacity: .76; }
    64% { opacity: .25; }
    69%, 74% { opacity: .65; }
    81% { opacity: .12; }
    86% { opacity: .4; }
}
@keyframes sewerOfferLampIdle {
    0%, 18%, 100% { opacity: .56; }
    19% { opacity: .28; }
    20%, 48% { opacity: .58; }
    49% { opacity: .43; }
    50%, 74% { opacity: .6; }
    75% { opacity: .19; }
    76% { opacity: .51; }
}
@keyframes sewerOfferAfterglow {
    0%, 46%, 100% { opacity: .28; }
    47% { opacity: .18; }
    48%, 77% { opacity: .27; }
    78% { opacity: .12; }
    79% { opacity: .26; }
}

.sewers-offer-panel {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 2.5%;
    width: min(84%, 680px);
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid rgba(255, 227, 134, .42);
    border-radius: 9px;
    background: linear-gradient(125deg, rgba(20, 17, 13, .94), rgba(39, 29, 15, .93));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .8), inset 0 1px rgba(255, 239, 187, .12);
    color: #f8f1dd;
}
.sewers-offer-panel__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.sewers-offer-panel__heading strong { color: #ffe8a4; font-size: 1.08em; }
.sewers-offer-panel__heading small { color: #c6b996; font-size: .74em; }
.sewers-offer-panel__controls { display: flex; align-items: center; gap: 10px; }
.sewers-offer-panel__item-image { width: 40px; height: 40px; object-fit: contain; border-radius: 5px; background: #17130e; }
.sewers-offer-panel select[hidden] { display: none; }
.sewers-offer-picker { position: relative; flex: 1; min-width: 0; }
.sewers-offer-panel.is-picker-open { z-index: 8; }
@keyframes sewersOfferFactoryGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 193, 69, .45), inset 0 0 5px rgba(255, 200, 91, .16); }
    50% { box-shadow: 0 0 14px rgba(255, 202, 88, .88), 0 0 25px rgba(255, 151, 41, .3), inset 0 0 10px rgba(255, 200, 91, .25); }
}
.sewers-offer-panel__factory-badge { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; width: 100%; margin-top: 7px; color: #f7e1a9; font-size: .8em; text-align: center; }
.sewers-offer-panel__factory-badge[hidden] { display: none; }
.sewers-offer-panel__factory-badge strong { color: #ffd164; text-shadow: 0 0 9px rgba(255, 194, 67, .65); letter-spacing: .05em; }
.sewers-offer-panel button { padding: 9px 13px; border: 1px solid #fa7777; border-radius: 5px; background: #ba1010; color: white; font-weight: 700; cursor: pointer; }
.sewers-offer-panel button:hover:not(:disabled) { background: #e02020; }
.sewers-offer-panel button:disabled { opacity: .55; cursor: not-allowed; }
.sewers-offer-panel .sewers-offer-picker__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px; padding: 0 10px; border: 1px solid #847349; background: #181611; color: #fff; text-align: left; font-size: .88em; font-weight: 500; }
.sewers-offer-panel .sewers-offer-picker__toggle:hover:not(:disabled) { background: #302713; }
.sewers-offer-picker__toggle span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sewers-offer-panel .sewers-offer-picker__toggle.is-factory-made { border-color: #ffd36e; background: linear-gradient(105deg, #21180d, #3a270e 55%, #21180d); color: #fff1bf; animation: sewersOfferFactoryGlow 2.3s ease-in-out infinite; }
.sewers-offer-panel .sewers-offer-picker__list { position: absolute; z-index: 1; bottom: calc(100% + 5px); left: 0; right: 0; max-height: 310px; overflow-y: auto; box-sizing: border-box; padding: 4px; border: 1px solid #9d7a3b; border-radius: 6px; background: #15120d; box-shadow: 0 8px 24px rgba(0, 0, 0, .85); scrollbar-color: #8f702f #17130d; }
.sewers-offer-panel .sewers-offer-picker__list[hidden] { display: none; }
.sewers-offer-panel .sewers-offer-picker__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #eee8d8; text-align: left; font-size: .78em; font-weight: 500; }
.sewers-offer-panel .sewers-offer-picker__option:hover:not(:disabled), .sewers-offer-panel .sewers-offer-picker__option:focus-visible { background: #3a2e19; outline: 1px solid #d6af66; }
.sewers-offer-panel .sewers-offer-picker__option.is-selected { border-color: #bb8b38; }
.sewers-offer-picker__item-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sewers-offer-picker__factory-tag { flex: none; color: #ffe099; font-size: .83em; font-weight: 800; white-space: nowrap; text-shadow: 0 0 8px rgba(255, 199, 79, .9); }
.sewers-offer-picker__no-bonus { flex: none; color: #ffb0b0; font-size: .78em; font-weight: 800; white-space: nowrap; }
.sewers-offer-picker__no-bonus[hidden] { display: none; }
.sewers-offer-panel .sewers-offer-picker__option.is-factory-made { border-color: rgba(255, 190, 63, .65); background: linear-gradient(90deg, #39250c, #624011 55%, #39250c); animation: sewersOfferFactoryRowPulse 1.7s ease-in-out infinite; }
@keyframes sewersOfferFactoryRowPulse {
    0%, 100% { box-shadow: inset 0 0 5px rgba(255, 181, 38, .3), 0 0 3px rgba(255, 181, 38, .25); filter: brightness(.86); }
    50% { box-shadow: inset 0 0 14px rgba(255, 211, 107, .63), 0 0 12px rgba(255, 184, 53, .7); filter: brightness(1.22); }
}
@media (prefers-reduced-motion: reduce) { .sewers-offer-panel .sewers-offer-picker__toggle.is-factory-made, .sewers-offer-panel .sewers-offer-picker__option.is-factory-made { animation: none; box-shadow: 0 0 10px rgba(255, 193, 69, .65); filter: none; } }
.sewers-offer-panel__detail { min-height: 1.25em; margin-top: 6px; color: #e6d6a7; font-size: .8em; }
.sewers-offer-panel__cooldown { margin-top: 6px; color: #ffd68b; font-size: .84em; font-weight: 700; }
.sewers-offer-panel__cooldown:empty { display: none; }
.sewers-offer-panel__confirm { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82em; }
.sewers-offer-panel__confirm span { flex: 1; }
.sewers-offer-panel__confirm button { padding: 5px 9px; }
.sewers-offer-panel__confirm button:first-of-type { background: #48433b; border-color: #817769; }
.sewers-offer-panel__status { min-height: 1.2em; margin: 5px 0; font-weight: 700; font-size: .86em; }
.sewers-offer-panel__status:empty { display: none; }
.sewers-offer-panel__status.is-error { color: #ff9d9d; }

.sewers-offer-side-flow {
    position: absolute;
    top: 64.4%;
    overflow: hidden;
    background: linear-gradient(90deg, transparent 0%, rgba(214, 200, 72, 0.34) 50%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.95;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 2%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.55) 32%, #000 58%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 2%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.55) 32%, #000 58%);
}

.sewers-offer-side-flow::before,
.sewers-offer-side-flow::after {
    content: '';
    position: absolute;
    left: 16%;
    width: 68%;
    height: 78%;
    top: -78%;
    border-radius: 40%;
    background: linear-gradient(to bottom, transparent, rgba(236, 226, 130, 0.62), transparent);
    filter: blur(1.6px);
    animation: sewerOfferSideFlow 1.35s linear infinite;
}

.sewers-offer-side-flow::after {
    left: 30%;
    width: 40%;
    animation-duration: 1.75s;
    animation-delay: -0.7s;
}

.sewers-offer-side-flow--left {
    left: 5.4%;
    width: 7.6%;
    height: 18.8%;
    clip-path: polygon(3% 1%, 51% 1%, 54% 12%, 61% 31%, 61% 67%, 84% 83%, 97% 88%, 80% 96%, 18% 96%, 5% 92%, 29% 83%, 20% 67%, 20% 31%, 10% 12%);
}
.sewers-offer-side-flow--right {
    right: 5%;
    width: 7.8%;
    height: 19.6%;
    clip-path: polygon(49% 1%, 92% 1%, 86% 12%, 82% 30%, 80% 64%, 80% 80%, 88% 88%, 97% 94%, 97% 98%, 38% 99%, 4% 88%, 34% 80%, 36% 64%, 37% 30%, 40% 12%);
}

.sewers-offer-side-flow--right::before { animation-delay: -0.55s; }
.sewers-offer-side-flow--right::after { animation-delay: -1.2s; }

.sewers-offer-side-pool {
    position: absolute;
    top: 80.4%;
    width: 10%;
    height: 4.2%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(196, 183, 69, 0.28), rgba(111, 100, 34, 0.14) 44%, transparent 74%);
    mix-blend-mode: screen;
    animation: sewerOfferPoolPulse 2.9s ease-in-out infinite;
}

.sewers-offer-side-pool--left { left: 4.2%; }
.sewers-offer-side-pool--right { right: 4.1%; animation-delay: -1.4s; }

.sewers-offer-side-pool::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 15%;
    height: 14%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(213, 205, 94, 0.55);
    border-radius: 50%;
    animation: sewerInteriorSlimeRipple 2.9s ease-out infinite;
}

.sewers-offer-side-pool--right::after { animation-delay: -1.4s; }

.sewers-offer-side-pool::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 55%;
    width: 28%;
    height: 22%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(230, 220, 120, 0.4);
    border-radius: 50%;
    animation: sewerInteriorSlimeRipple 2.2s ease-out -0.8s infinite;
}

.sewers-offer-splash-bubble {
    position: absolute;
    left: 50%;
    bottom: 28%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 252, 210, 0.95), rgba(210, 196, 78, 0.45) 55%, transparent 74%);
    animation: sewerOfferBubble 1.7s ease-out var(--bubble-delay, 0s) infinite;
}

.sewers-offer-splash-bubble--small {
    width: 4px;
    height: 4px;
    margin-left: -2px;
}

@keyframes sewerOfferBubble {
    0% { opacity: 0; transform: translate(var(--bubble-x, 0), 6px) scale(0.35); }
    18% { opacity: 0.95; }
    100% { opacity: 0; transform: translate(var(--bubble-x, 0), -18px) scale(1.05); }
}
.sewers-offer-drip::before { background: linear-gradient(to bottom, #9a9f3c, #697520 48%, #654417); }

@keyframes sewerOfferSideFlow {
    0% { transform: translateY(0); opacity: 0; }
    18% { opacity: 0.95; }
    100% { transform: translateY(230%); opacity: 0; }
}

@keyframes sewerOfferPoolPulse {
    0%, 100% { opacity: 0.48; transform: scale(0.94); }
    50% { opacity: 0.84; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .sewers-offer-lamp-glow,
    .sewers-offer-side-flow,
    .sewers-offer-side-flow::before,
    .sewers-offer-side-flow::after,
    .sewers-offer-side-pool,
    .sewers-offer-side-pool::before,
    .sewers-offer-side-pool::after,
    .sewers-offer-splash-bubble,
    .sewers-offer-effects.is-offering .sewers-offer-lamp-glow,
    .sewers-offer-effects.is-offering .sewers-offer-sacrifice-beam,
    .sewers-offer-effects.is-offering .sewers-offer-sacrifice-flash,
    .sewers-offer-effects.has-reward .sewers-offer-sacrifice-beam {
        animation: none;
    }
    .sewers-offer-reward { animation: none; }
    .sewers-offer-effects.is-offering .sewers-offer-sacrifice-beam { opacity: .4; }
    .sewers-offer-effects.is-offering .sewers-offer-sacrifice-flash { opacity: .35; }
}
/* --------------------------------------------------------------------------
   GoobVille City Chat Room
   -------------------------------------------------------------------------- */
body.city-chat-view-active #postLoginDisclaimer,
#container.city-chat-view-active #infoMenu,
#container.city-chat-view-active #counter,
#container.city-chat-view-active #postLoginMapLogo,
#container.city-chat-view-active #postLoginModerationBtn,
#container.city-chat-view-active #postLoginCornfieldLink,
#container.city-chat-view-active #gameContainer > *:not(#cityChatRoom):not(#citizenInspectPrompt):not(style) {
    display: none !important;
}

#container.city-chat-view-active #postLoginLogo {
    display: block !important;
}

#container.city-chat-view-active #cityChatRoom {
    display: block !important;
}

.cornfield-launcher {
    display: none;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 234px;
    height: 31px;
    box-sizing: border-box;
    padding: 3px 12px;
    border: 1px solid #382014;
    border-radius: 2px 4px 3px 2px;
    background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(22, 9, 4, .24) 6px 7px, transparent 8px 11px),
        linear-gradient(90deg, #3b2114, #714327 18%, #60351e 52%, #754528 83%, #392014);
    box-shadow: inset 0 1px rgba(202, 139, 73, .4), inset 0 -2px rgba(20, 8, 3, .55), 0 3px 8px rgba(0, 0, 0, .58);
    color: #f7e3c7;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease, box-shadow .15s ease;
}

.cornfield-launcher:hover,
.cornfield-launcher:focus-visible {
    filter: brightness(1.14);
    box-shadow: inset 0 1px rgba(202, 139, 73, .5), inset 0 -2px rgba(20, 8, 3, .55), 0 4px 10px rgba(0, 0, 0, .7);
    outline: 2px solid #d8ad78;
    outline-offset: 2px;
}

.season-events-list {
    display: grid;
    gap: 16px;
}

.season-events-loading {
    padding: 28px;
    color: #aaa;
    text-align: center;
}

.season-event-card {
    overflow: hidden;
    border: 1px solid #6b4b2c;
    border-radius: 9px;
    background: linear-gradient(145deg, #302a23, #1d1c1a);
    color: #eee;
}

.season-event-card__intro {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 14px;
}

.season-event-card__intro img {
    width: 100px;
    height: 100px;
    flex: none;
    object-fit: cover;
    border-radius: 6px;
}

.season-event-card__intro h4 {
    margin: 0 0 7px;
    color: #ffb45b;
    font-size: 1.25em;
}

.season-event-card__intro p {
    margin: 0;
    color: #ccc;
    line-height: 1.4;
}

.season-event-card__activation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 55px;
    padding: 9px 14px;
    border-top: 1px solid #5a4130;
    border-bottom: 1px solid #5a4130;
    background: rgba(86, 25, 18, .4);
}

.season-event-card.is-active .season-event-card__activation {
    background: rgba(25, 91, 35, .42);
}

.season-event-card__activation > div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.season-event-card__activation strong { color: #fff; }
.season-event-card__activation [data-season-event-status] { color: #f4c2b8; }
.season-event-card.is-active .season-event-card__activation [data-season-event-status] { color: #b6efb4; }

.season-event-card__switch {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 78px;
    padding: 6px 10px;
    border: 1px solid #9e5a50;
    border-radius: 20px;
    background: #72362e;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.season-event-card__switch::before {
    content: '';
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
}

.season-event-card.is-active .season-event-card__switch {
    flex-direction: row-reverse;
    border-color: #59a35b;
    background: #2d7938;
}

.season-event-card__duration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 14px;
}

.season-event-card__duration label { color: #ddd; }

.season-event-card__duration input {
    width: 66px;
    margin: 0 6px;
    padding: 7px;
    border: 1px solid #777;
    border-radius: 5px;
    background: #151515;
    color: #fff;
    font: inherit;
}

.season-event-card__duration button {
    padding: 9px 15px;
    border: 0;
    border-radius: 5px;
    background: #98601f;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.season-event-card button:disabled { opacity: .5; cursor: wait; }
.season-event-card button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cornfield-menu {
    position: absolute;
    left: 50%;
    top: 670px;
    transform: translate(-50%, -50%);
    width: 970px;
    height: 975px;
    max-width: 96%;
    overflow: hidden;
    border: 0;
    background: #09110a;
    box-shadow: 0 12px 40px #000;
    z-index: 10;
    box-sizing: border-box;
}

.cornfield-menu__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cornfield-menu.is-maze .cornfield-menu__image {
    object-fit: fill;
}

.cornfield-menu__fence-detail {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.cornfield-menu.is-maze .cornfield-menu__fence-detail { display: none; }

.cornfield-menu__fence-sign {
    position: absolute;
    top: 82.5%;
    left: clamp(78%, calc(50% + 280px), calc(100% - 88px));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 42px;
    box-sizing: border-box;
    border: 2px solid #271208;
    border-radius: 3px 5px 4px 3px;
    background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(22, 9, 4, .25) 6px 7px, transparent 8px 11px),
        linear-gradient(90deg, #402314, #805031 18%, #694024 52%, #805030 82%, #392014);
    box-shadow: inset 0 1px rgba(219, 153, 86, .45), inset 0 -3px rgba(24, 8, 3, .65), 0 5px 9px rgba(0, 0, 0, .8);
    transform: translate(-50%, -50%) rotate(-3deg);
}
.cornfield-menu__fence-sign::before,
.cornfield-menu__fence-sign::after {
    content: '';
    position: absolute;
    top: 17px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b08a60;
    box-shadow: inset 1px 1px #e0ba8b, 0 1px 2px #1c0a04;
}
.cornfield-menu__fence-sign::before { left: 7px; }
.cornfield-menu__fence-sign::after { right: 7px; }
.cornfield-menu__fence-sign .prelogin-cornfield-event__name { white-space: nowrap; }

.cornfield-menu__fence-blood {
    position: absolute;
    top: calc(100% - 2px);
    width: 5px;
    border-radius: 0 0 55% 55%;
    background: linear-gradient(90deg, #3b0000, #a60808 45%, #510000);
    box-shadow: 1px 0 2px rgba(11, 0, 0, .85);
    transform-origin: center top;
    animation: cornfieldFenceBloodFlow 3.4s linear var(--blood-delay, 0s) infinite both;
}
.cornfield-menu__fence-blood::after {
    content: '';
    position: absolute;
    left: -1px;
    bottom: -3px;
    width: 7px;
    height: 9px;
    border-radius: 50% 50% 60% 60%;
    background: #7d0303;
    animation: cornfieldFenceBloodDrop 3.4s ease-in var(--blood-delay, 0s) infinite both;
}
.cornfield-menu__fence-blood--one { left: 20%; height: 31px; --blood-delay: 0s; --drop-travel: 63px; }
.cornfield-menu__fence-blood--two { left: 51%; width: 6px; height: 81px; --blood-delay: .7s; --drop-travel: 15px; }
.cornfield-menu__fence-blood--three { left: 79%; height: 48px; --blood-delay: 1.4s; --drop-travel: 46px; }
@keyframes cornfieldFenceBloodFlow {
    0% { transform: scaleY(0); opacity: 0; }
    6% { opacity: 1; }
    68%, 85% { transform: scaleY(1); opacity: 1; }
    96%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes cornfieldFenceBloodDrop {
    0%, 66% { transform: translateY(0) scale(.7); opacity: 0; }
    70% { transform: translateY(0) scale(1); opacity: 1; }
    89%, 100% { transform: translateY(var(--drop-travel)) scale(.8); opacity: 0; }
}

.cornfield-menu__blood-pool {
    position: absolute;
    top: 93.5%;
    left: clamp(78%, calc(50% + 280px), calc(100% - 88px));
    width: 119px;
    height: 23px;
    border-radius: 57% 43% 64% 36% / 56% 61% 39% 44%;
    background: radial-gradient(ellipse at 44% 43%, #a5120a 0%, #660300 45%, #260300 78%, transparent 100%);
    box-shadow: 0 0 11px rgba(51, 0, 0, .8), inset 0 2px 3px rgba(235, 60, 31, .4);
    transform: translateX(-50%) rotate(-5deg);
}
.cornfield-menu__blood-pool::before,
.cornfield-menu__blood-pool::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #570300;
}
.cornfield-menu__blood-pool::before { left: -11px; top: 10px; width: 19px; height: 6px; }
.cornfield-menu__blood-pool::after { right: -7px; top: 4px; width: 14px; height: 5px; }

.cornfield-menu__ravens,
.cornfield-menu__maze-mist,
.cornfield-menu__hillhouse-mist,
.cornfield-menu__hillhouse-ravens,
.cornfield-menu__haunt {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.cornfield-menu__ravens { display: block; }
.cornfield-menu.is-maze .cornfield-menu__ravens { display: none; }
.cornfield-menu__raven {
    left: 56%;
    top: 12%;
    opacity: .88;
    filter: drop-shadow(0 1px 1px rgba(180, 177, 128, .3));
    animation: cornfieldRavenCircle 13s linear infinite;
}
.cornfield-menu__raven::before {
    transform-origin: right center;
    animation: cornfieldRavenWing .55s ease-in-out infinite alternate;
}
.cornfield-menu__raven.cornfield-menu__raven--two { width: 15px; height: 7px; animation-duration: 17s; animation-delay: -5s; opacity: .7; }
.cornfield-menu__raven.cornfield-menu__raven--three { width: 24px; height: 10px; animation-duration: 11s; animation-delay: -8s; }
.cornfield-menu__raven.cornfield-menu__raven--four { width: 13px; height: 6px; animation-duration: 19s; animation-delay: -12s; opacity: .62; }
.cornfield-menu__raven.cornfield-menu__raven--five { width: 18px; height: 8px; animation-duration: 15s; animation-delay: -10s; opacity: .75; }
@keyframes cornfieldRavenCircle {
    0% { transform: translate3d(-145px, 12px, 0) scaleX(1) scale(.85); }
    25% { transform: translate3d(-12px, -61px, 0) scaleX(1) scale(1); }
    50% { transform: translate3d(135px, -9px, 0) scaleX(-1) scale(.83); }
    75% { transform: translate3d(6px, 54px, 0) scaleX(-1) scale(1.08); }
    100% { transform: translate3d(-145px, 12px, 0) scaleX(1) scale(.85); }
}
@keyframes cornfieldRavenWing {
    from { transform: rotate(-42deg); }
    to { transform: rotate(18deg); }
}

.cornfield-menu__maze-mist { display: none; }
.cornfield-menu.is-maze:not(.is-hillhouse):not(.is-interior) .cornfield-menu__maze-mist {
    display: block;
    background: linear-gradient(180deg, rgba(192, 199, 172, .06), rgba(190, 200, 170, .025) 42%, rgba(190, 200, 170, .07));
}
.cornfield-menu__mist-bank {
    position: absolute;
    display: block;
    width: 75%;
    height: 28%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(190, 200, 178, .24) 0%, rgba(170, 185, 162, .12) 43%, transparent 73%);
    filter: blur(20px);
    animation: cornfieldMistDrift 19s ease-in-out infinite alternate;
}
.cornfield-menu__mist-bank--one { left: -24%; top: 7%; animation-delay: -4s; }
.cornfield-menu__mist-bank--two { right: -28%; top: 31%; animation-duration: 23s; animation-delay: -13s; animation-direction: alternate-reverse; }
.cornfield-menu__mist-bank--three { left: -18%; top: 57%; animation-duration: 16s; animation-delay: -8s; opacity: .8; }
.cornfield-menu__mist-bank--four { right: -25%; top: 77%; animation-duration: 26s; animation-delay: -17s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes cornfieldMistDrift {
    from { transform: translate3d(-8%, 3%, 0) scale(1); opacity: .45; }
    to { transform: translate3d(39%, -5%, 0) scale(1.18); opacity: .9; }
}

.cornfield-menu__hillhouse-mist,
.cornfield-menu__hillhouse-ravens { display: none; }
.cornfield-menu.is-hillhouse .cornfield-menu__hillhouse-mist,
.cornfield-menu.is-hillhouse .cornfield-menu__hillhouse-ravens { display: block; }
.cornfield-menu__hillhouse-mist {
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 37%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 25%, #000 37%, #000 100%);
}
.cornfield-menu__hillhouse-mist-bank {
    position: absolute;
    width: 76%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(186, 200, 176, .3) 0%, rgba(144, 165, 141, .15) 45%, transparent 74%);
    filter: blur(19px);
    animation: cornfieldHillhouseMistDrift 17s ease-in-out infinite alternate;
}
.cornfield-menu__hillhouse-mist-bank--one { left: -21%; top: 34%; animation-delay: -5s; }
.cornfield-menu__hillhouse-mist-bank--two { right: -26%; top: 47%; animation-duration: 21s; animation-delay: -12s; animation-direction: alternate-reverse; }
.cornfield-menu__hillhouse-mist-bank--three { left: -19%; top: 66%; animation-duration: 15s; animation-delay: -8s; opacity: .75; }
.cornfield-menu__hillhouse-mist-bank--four { right: -23%; top: 83%; animation-duration: 24s; animation-delay: -16s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes cornfieldHillhouseMistDrift {
    from { transform: translate3d(-7%, 4%, 0) scale(1); opacity: .4; }
    to { transform: translate3d(30%, -5%, 0) scale(1.17); opacity: .85; }
}

.cornfield-menu__hillhouse-raven {
    opacity: .95;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .75));
    animation: cornfieldHillhouseRavenCircle 13s linear infinite;
}
.cornfield-menu__hillhouse-raven::before {
    transform-origin: right center;
    animation: cornfieldRavenWing .5s ease-in-out infinite alternate;
}
.cornfield-menu__hillhouse-raven--one { animation-delay: -1s; }
.cornfield-menu__hillhouse-raven--two { width: 15px; height: 7px; animation-duration: 17s; animation-delay: -8s; opacity: .7; }
.cornfield-menu__hillhouse-raven--three { width: 24px; height: 10px; animation-duration: 11s; animation-delay: -5s; }
.cornfield-menu__hillhouse-raven--four { width: 13px; height: 6px; animation-duration: 19s; animation-delay: -13s; opacity: .65; }
.cornfield-menu__hillhouse-raven--five { width: 18px; height: 8px; animation-duration: 15s; animation-delay: -10s; animation-direction: reverse; opacity: .8; }
.cornfield-menu__hillhouse-raven--six { animation-duration: 21s; animation-delay: -17s; animation-direction: reverse; }
@keyframes cornfieldHillhouseRavenCircle {
    0% { left: 34%; top: 31%; transform: scaleX(1) scale(.8); }
    25% { left: 49%; top: 11%; transform: scaleX(1) scale(1); }
    50% { left: 79%; top: 25%; transform: scaleX(-1) scale(.85); }
    75% { left: 62%; top: 36%; transform: scaleX(-1) scale(1.05); }
    100% { left: 34%; top: 31%; transform: scaleX(1) scale(.8); }
}

.cornfield-menu__haunt,
.cornfield-menu__ghost,
.cornfield-menu__spider { display: none; }
.cornfield-menu.is-interior .cornfield-menu__haunt { display: block; }
.cornfield-menu.is-interior .cornfield-menu__ghost--inside-one,
.cornfield-menu.is-interior .cornfield-menu__ghost--inside-two,
.cornfield-menu.is-interior .cornfield-menu__spider--inside-one,
.cornfield-menu.is-interior .cornfield-menu__spider--inside-two { display: block; }

.cornfield-menu__ghost {
    position: absolute;
    width: 56px;
    height: 100px;
    background: radial-gradient(ellipse at 50% 50%, rgba(135, 228, 199, .19), transparent 72%);
    filter: drop-shadow(0 0 11px rgba(143, 222, 193, .48));
    animation: cornfieldGhostRoam var(--ghost-duration, 14s) ease-in-out var(--ghost-delay, 0s) infinite;
}
.cornfield-menu__ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(216, 255, 238, .76) 2%, rgba(128, 205, 185, .58) 48%, rgba(64, 138, 128, .29) 78%, transparent 100%);
    -webkit-mask: url('character/man.png') center / contain no-repeat;
    mask: url('character/man.png') center / contain no-repeat;
    filter: blur(1.8px);
}
.cornfield-menu__ghost::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -8px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(169, 230, 209, .26), transparent 72%);
    filter: blur(10px);
    animation: cornfieldGhostVapor 3.6s ease-in-out infinite alternate;
}
.cornfield-menu__ghost--inside-one { left: 18%; top: 30%; --ghost-end-x: 135px; --ghost-mid-x: 70px; --ghost-duration: 16s; --ghost-delay: -7s; }
.cornfield-menu__ghost--inside-two { left: 78%; top: 27%; --ghost-end-x: -132px; --ghost-mid-x: -64px; --ghost-duration: 19s; --ghost-delay: -13s; }
@keyframes cornfieldGhostRoam {
    0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.82); }
    18% { opacity: .73; }
    52% { opacity: .53; transform: translate3d(var(--ghost-mid-x), -11px, 0) scale(1); }
    78% { opacity: .68; }
    100% { opacity: 0; transform: translate3d(var(--ghost-end-x), -31px, 0) scale(.86); }
}
@keyframes cornfieldGhostVapor {
    from { opacity: .3; transform: translateY(0) scale(.8); }
    to { opacity: .75; transform: translateY(8px) scale(1.3); }
}

.cornfield-menu__spider {
    position: absolute;
    width: 28px;
    height: 27px;
    filter: drop-shadow(0 1px 1px rgba(232, 168, 95, .48));
    animation: cornfieldSpiderCrawl var(--spider-duration, 15s) ease-in-out var(--spider-delay, 0s) infinite alternate;
}
.cornfield-menu__spider::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 9px;
    width: 11px;
    height: 13px;
    border-radius: 48%;
    background: radial-gradient(circle at 45% 25%, #3c2719, #140b08 68%);
    box-shadow: 0 -5px 0 -3px #110907;
}
.cornfield-menu__spider i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
}
.cornfield-menu__spider i::before,
.cornfield-menu__spider i::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: #1b100b;
}
.cornfield-menu__spider i::before { left: 0; transform-origin: right center; }
.cornfield-menu__spider i::after { right: 0; transform-origin: left center; }
.cornfield-menu__spider i:nth-child(1) { top: 5px; }
.cornfield-menu__spider i:nth-child(2) { top: 9px; }
.cornfield-menu__spider i:nth-child(3) { top: 15px; }
.cornfield-menu__spider i:nth-child(4) { top: 19px; }
.cornfield-menu__spider i:nth-child(1)::before { transform: rotate(38deg); }
.cornfield-menu__spider i:nth-child(1)::after { transform: rotate(-38deg); }
.cornfield-menu__spider i:nth-child(2)::before { transform: rotate(18deg); }
.cornfield-menu__spider i:nth-child(2)::after { transform: rotate(-18deg); }
.cornfield-menu__spider i:nth-child(3)::before { transform: rotate(-18deg); }
.cornfield-menu__spider i:nth-child(3)::after { transform: rotate(18deg); }
.cornfield-menu__spider i:nth-child(4)::before { transform: rotate(-38deg); }
.cornfield-menu__spider i:nth-child(4)::after { transform: rotate(38deg); }
.cornfield-menu__spider--inside-one { left: 14%; top: 9%; --spider-mid-x: 14px; --spider-mid-y: 94px; --spider-x: 27px; --spider-y: 185px; --spider-duration: 16s; --spider-delay: -4s; }
.cornfield-menu__spider--inside-two { left: 85%; top: 7%; --spider-mid-x: -17px; --spider-mid-y: 102px; --spider-x: -32px; --spider-y: 198px; --spider-duration: 19s; --spider-delay: -12s; }
@keyframes cornfieldSpiderCrawl {
    0% { transform: translate3d(0, 0, 0) rotate(-8deg); }
    50% { transform: translate3d(var(--spider-mid-x), var(--spider-mid-y), 0) rotate(9deg); }
    100% { transform: translate3d(var(--spider-x), var(--spider-y), 0) rotate(12deg); }
}

body.hide-background-effects .cornfield-menu__ravens,
body.hide-background-effects .cornfield-menu__maze-mist,
body.hide-background-effects .cornfield-menu__hillhouse-mist,
body.hide-background-effects .cornfield-menu__hillhouse-ravens,
body.hide-background-effects .cornfield-menu__haunt { display: none !important; }

.cornfield-menu__storm {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.cornfield-menu__rain,
.cornfield-menu__lightning {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cornfield-menu__rain {
    z-index: 1;
    opacity: .94;
    mix-blend-mode: screen;
}
.cornfield-menu.is-hillhouse .cornfield-menu__rain,
.cornfield-menu.is-interior .cornfield-menu__rain { display: none; }

.cornfield-menu__lightning {
    z-index: 2;
}

.cornfield-menu__storm .ambient-thunder-flash,
.cornfield-menu__storm .ambient-lightning {
    display: block;
}

.cornfield-menu.is-opening .cornfield-menu__storm .ambient-lightning--left {
    animation: ambientLightningIntro 1.35s ease-out, ambientLightningStrike 7s linear 1.35s infinite;
}

.cornfield-menu.is-opening .cornfield-menu__storm .ambient-thunder-flash--left {
    animation: ambientThunderSkyIntro 1.35s ease-out, ambientThunderSkyFlash 7s linear 1.35s infinite;
}

.cornfield-menu__storm .ambient-lightning--center {
    animation: ambientLightningStrike 8.5s linear -3s infinite;
}

.cornfield-menu__storm .ambient-thunder-flash--center {
    animation: ambientThunderSkyFlash 8.5s linear -3s infinite;
}

.cornfield-menu__storm .ambient-lightning--right {
    animation: ambientLightningStrike 10s linear -7s infinite;
}

.cornfield-menu__storm .ambient-thunder-flash--right {
    animation: ambientThunderSkyFlash 10s linear -7s infinite;
}

/* The gate keeps the visible lightning; later scenes keep only its sky glow. */
.cornfield-menu.is-maze .cornfield-menu__storm .ambient-lightning,
.cornfield-menu.is-hillhouse .cornfield-menu__storm .ambient-lightning {
    display: none;
    animation: none;
}

body.disable-thunder-flashes .cornfield-menu__storm .ambient-lightning,
body.disable-thunder-flashes .cornfield-menu__storm .ambient-thunder-flash {
    display: none !important;
}

.cornfield-menu__title {
    position: absolute;
    top: 16%;
    left: 0;
    width: 100%;
    z-index: 2;
    color: #a90000;
    font: 900 64px Georgia, serif;
    text-align: center;
    letter-spacing: .015em;
    -webkit-text-stroke: 1.5px #250000;
    text-shadow: 0 3px #500000, 0 6px #260000, 2px 9px 3px #0a0000, 0 0 18px #f51500;
    pointer-events: none;
    opacity: 0;
}

.cornfield-menu__title::after {
    content: '';
    position: absolute;
    top: 78%;
    left: 28%;
    width: 7px;
    height: 23px;
    border-radius: 0 0 7px 7px;
    background: #8e0000;
    box-shadow: 48px 8px #750000, 109px -2px #9e0000, 177px 12px #760000,
        248px 3px #950000, 323px 11px #730000;
    filter: drop-shadow(2px 3px 1px #190000);
}

.cornfield-menu__enter {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 10px 28px;
    border: 2px solid #f3a241;
    border-radius: 7px;
    background: linear-gradient(#42210d, #1a0d06);
    color: #ffe0a3;
    box-shadow: 0 0 15px #c85a15, 0 4px 12px #000;
    font: 900 23px Georgia, serif;
    letter-spacing: .12em;
    text-shadow: 0 2px #000;
    cursor: pointer;
}

.cornfield-menu__enter:hover,
.cornfield-menu__enter:focus-visible {
    background: #743715;
    outline: 2px solid #fff;
}

.cornfield-menu.is-maze .cornfield-menu__enter,
.cornfield-menu.is-maze .cornfield-menu__title { display: none; }

.cornfield-maze {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: auto;
    cursor: crosshair;
}

.cornfield-menu.is-maze .cornfield-maze { display: block; }
.cornfield-maze:focus { outline: none; }
.cornfield-maze button { pointer-events: auto; cursor: pointer; }
.cornfield-maze__citizen {
    z-index: 4;
    pointer-events: none;
    cursor: inherit;
}
.cornfield-maze__citizen.is-walking .city-chat-citizen-visual {
    animation: cornfieldCitizenWalk .32s ease-in-out infinite alternate;
}
@keyframes cornfieldCitizenWalk {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}
.cornfield-maze__hint {
    position: absolute;
    z-index: 5;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 9px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .7);
    color: #ffe1b1;
    font: bold 12px Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
}

.cornfield-maze__gate {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 8px 11px;
    border: 1px solid #e8a45c;
    border-radius: 6px;
    background: rgba(21, 11, 4, .85);
    color: #ffda9f;
    font-weight: bold;
    z-index: 6;
}

.cornfield-maze__status {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 14px;
    border: 1px solid rgba(255, 179, 87, .6);
    border-radius: 5px;
    background: rgba(17, 8, 2, .78);
    color: #ffe2ad;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 0 2px #000;
    z-index: 5;
    pointer-events: none;
}

.cornfield-maze__exit {
    position: absolute;
    display: grid;
    place-items: center;
    width: 62px;
    height: 56px;
    padding: 0;
    border: 2px solid #985324;
    border-radius: 5px;
    background:
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(33, 13, 4, .22) 9px 10px, transparent 11px 16px),
        linear-gradient(90deg, #3a1a0b, #875027 20%, #a96830 51%, #75421f 80%, #321608);
    color: #fff0c8;
    box-shadow: inset 0 1px #cf8e4f, inset 0 -3px #2c1209, 0 4px 12px #000;
    font: bold 34px Arial, sans-serif;
    line-height: 1;
    text-shadow: 0 2px 2px #2b1005;
    transition: transform .16s ease, background .16s ease;
    z-index: 5;
}
.cornfield-maze__exit::before,
.cornfield-maze__exit::after {
    content: '';
    position: absolute;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b99a69;
    box-shadow: inset 1px 1px #e0c596, 0 1px 2px #281307;
}
.cornfield-maze__exit::before { left: 7px; }
.cornfield-maze__exit::after { right: 7px; }

.cornfield-maze__exit:hover,
.cornfield-maze__exit:focus-visible {
    transform: translate(-50%, -50%) scale(1.13);
    background: linear-gradient(90deg, #5a2c12, #af7136 50%, #5a2c12);
    outline: 2px solid #fff;
}

.cornfield-maze__exit--top { top: 5%; left: 50%; transform: translate(-50%, -50%); }
.cornfield-maze__exit--right { top: 46%; left: 95%; transform: translate(-50%, -50%); }
.cornfield-maze__exit--bottom { top: 94%; left: 50%; transform: translate(-50%, -50%); }
.cornfield-maze__exit--left { top: 46%; left: 5%; transform: translate(-50%, -50%); }

.cornfield-maze__message {
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    min-width: 250px;
    padding: 9px 15px;
    border-radius: 6px;
    background: rgba(13, 6, 2, .85);
    color: #ffe5b7;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px #000;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 5;
    pointer-events: none;
}

.cornfield-maze__message.is-visible { opacity: 1; }
.cornfield-maze__message.is-wrong { color: #ff8585; }

.cornfield-menu.is-wrong::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    animation: cornfieldWrongFlash .65s ease-out;
}

.cornfield-menu.is-moving .cornfield-menu__image {
    animation: cornfieldPathMove .55s ease-in-out;
}

@keyframes cornfieldPathMove {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(.55) blur(2px); transform: scale(1.04); }
}

@keyframes cornfieldWrongFlash {
    0% { background: rgba(173, 0, 0, .46); }
    100% { background: transparent; }
}

.cornfield-maze__complete {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 290px;
    padding: 26px;
    border: 2px solid #efad59;
    border-radius: 10px;
    background: rgba(15, 12, 4, .94);
    color: #ffe3b4;
    box-shadow: 0 10px 30px #000;
    text-align: center;
    pointer-events: auto;
    z-index: 7;
}

.cornfield-maze__complete strong { display: block; margin-bottom: 17px; font: bold 26px Georgia, serif; }
.cornfield-maze__complete button { padding: 9px 14px; border: 1px solid #e4a65c; border-radius: 5px; background: #573015; color: #fff; }
.cornfield-menu.is-complete .cornfield-maze__complete { display: block; }
.cornfield-menu.is-complete .cornfield-maze__exit { display: none; }
.cornfield-menu.is-hillhouse .cornfield-maze__exit,
.cornfield-menu.is-hillhouse .cornfield-maze__status,
.cornfield-menu.is-hillhouse .cornfield-maze__message,
.cornfield-menu.is-hillhouse .cornfield-maze__complete { display: none; }

.cornfield-maze__house-enter,
.cornfield-maze__house-back,
.cornfield-rewards { display: none; }

.cornfield-menu.is-hillhouse .cornfield-maze__house-enter {
    display: block;
    position: absolute;
    left: 51.2%;
    top: 43.5%;
    transform: translate(-50%, -50%);
    z-index: 6;
    padding: 6px 14px;
    border: 2px solid #f8b566;
    border-radius: 6px;
    background: rgba(27, 10, 3, .88);
    color: #ffe8b8;
    box-shadow: 0 0 17px #e96e22, 0 3px 9px #000;
    font: bold 17px Georgia, serif;
    letter-spacing: .1em;
}

.cornfield-menu.is-interior .cornfield-maze { cursor: crosshair; }
.cornfield-menu.is-interior .cornfield-maze__hint,
.cornfield-menu.is-interior .cornfield-maze__gate,
.cornfield-menu.is-interior .cornfield-maze__exit,
.cornfield-menu.is-interior .cornfield-maze__status,
.cornfield-menu.is-interior .cornfield-maze__message,
.cornfield-menu.is-interior .cornfield-maze__complete { display: none; }
.cornfield-menu.is-interior .cornfield-maze__house-back {
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 7;
    padding: 8px 11px;
    border: 1px solid #e8a45c;
    border-radius: 6px;
    background: rgba(21, 11, 4, .87);
    color: #ffda9f;
    font-weight: bold;
}
.cornfield-menu.is-interior .cornfield-rewards {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: min(76%, 690px);
    z-index: 12;
    color: #ffe8c5;
    text-align: center;
    box-sizing: border-box;
}
.cornfield-rewards h2 { display: none; }
.cornfield-rewards__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cornfield-rewards__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 6px;
    border: 1px solid #70411d;
    border-radius: 7px;
    background: rgba(40, 17, 6, .76);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .6);
}
.cornfield-rewards__card img { width: 100%; height: 65px; object-fit: contain; }
.cornfield-rewards__card strong { font: bold 15px Georgia, serif; }
.cornfield-rewards__card span { font: 12px Arial, sans-serif; color: #d9aa74; }
.cornfield-rewards__card button {
    width: 100%;
    margin-top: 3px;
    padding: 5px;
    border: 1px solid #e8a45c;
    border-radius: 5px;
    background: #8b3a15;
    color: #fff0d5;
    font-weight: bold;
}
.cornfield-rewards__card button:disabled { opacity: .65; cursor: default; }
.cornfield-rewards__message {
    display: inline-block;
    margin: 5px 0 0;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(17, 7, 5, .86);
    font: bold 13px Arial, sans-serif;
}
.cornfield-rewards__message:empty { display: none; }

.cornfield-menu.is-opening .cornfield-menu__title {
    animation: cornfieldBloodTitle 3.7s ease-out both;
}

@keyframes cornfieldBloodTitle {
    0% { opacity: 0; transform: scale(1.15); filter: blur(8px); }
    17%, 60% { opacity: 1; transform: scale(1); filter: blur(0); }
    100% { opacity: 0; transform: scale(.98); filter: blur(8px); }
}

.cornfield-menu__close {
    position: absolute;
    display: grid;
    place-items: center;
    top: 8px;
    right: 9px;
    z-index: 14;
    width: 33px;
    height: 33px;
    padding: 0;
    color: white;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.cornfield-menu__audio-toggle {
    position: absolute;
    display: grid;
    place-items: center;
    top: 8px;
    right: 50px;
    z-index: 14;
    width: 35px;
    height: 33px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: white;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.cornfield-menu__guide {
    display: none;
    position: absolute;
    top: 8px;
    right: 91px;
    z-index: 14;
    width: 35px;
    height: 33px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #ffe4b6;
    font: bold 21px Georgia, serif;
    cursor: pointer;
}
.cornfield-menu.is-maze:not(.is-hillhouse):not(.is-interior) .cornfield-menu__guide { display: grid; }
.cornfield-menu__guide:hover,
.cornfield-menu__guide:focus-visible { background: #720000; outline: 2px solid white; }
.cornfield-menu__mansion-shortcut[hidden] { display: none !important; }
.cornfield-menu__mansion-shortcut {
    display: none;
    position: absolute;
    top: 8px;
    right: 132px;
    z-index: 14;
    height: 33px;
    padding: 0 12px;
    border: 1px solid #c78b4a;
    border-radius: 5px;
    background: linear-gradient(#563017, #291307);
    box-shadow: inset 0 1px rgba(255, 222, 156, .27), 0 2px 7px rgba(0, 0, 0, .65);
    color: #ffe0ae;
    font: bold 13px Georgia, serif;
    white-space: nowrap;
    cursor: pointer;
}
.cornfield-menu.is-maze:not(.is-hillhouse):not(.is-interior) .cornfield-menu__mansion-shortcut:not([hidden]) { display: block; }
.cornfield-menu__mansion-shortcut:hover,
.cornfield-menu__mansion-shortcut:focus-visible { background: #74401d; outline: 2px solid #fff; }
.cornfield-menu__mansion-shortcut:disabled { opacity: .6; cursor: wait; }
.cornfield-menu__guide-overlay[hidden] { display: none; }
.cornfield-menu__guide-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 22px;
    box-sizing: border-box;
    background: rgba(5, 9, 5, .75);
}
.cornfield-menu__guide-card {
    position: relative;
    width: min(100%, 470px);
    padding: 25px 28px 24px;
    box-sizing: border-box;
    border: 2px solid #9f6030;
    border-radius: 8px;
    background: linear-gradient(155deg, rgba(47, 29, 15, .98), rgba(15, 17, 10, .97));
    box-shadow: 0 16px 42px #000, inset 0 1px rgba(239, 175, 101, .27);
    color: #f9e7c9;
    font: 15px/1.5 Arial, sans-serif;
}
.cornfield-menu__guide-card h2 { margin: 0 36px 15px 0; color: #ffcf87; font: bold 25px Georgia, serif; }
.cornfield-menu__guide-steps { margin: 0 0 15px; padding-left: 24px; }
.cornfield-menu__guide-steps li { margin-bottom: 9px; padding-left: 3px; }
.cornfield-menu__guide-steps li::marker { color: #f6b765; font-weight: bold; }
.cornfield-menu__guide-example {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 15px;
}
.cornfield-menu__guide-example span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border: 1px solid #8a613a;
    border-radius: 5px;
    background: linear-gradient(#644024, #3b2416);
    font-size: 13px;
    white-space: nowrap;
}
.cornfield-menu__guide-example span strong { margin-left: auto; color: #ffd592; }
.cornfield-menu__guide-example-icon { font: bold 20px/1 Arial, sans-serif; }
.cornfield-menu__guide-example span:first-child .cornfield-menu__guide-example-icon { color: #9ee78b; }
.cornfield-menu__guide-example span:last-child .cornfield-menu__guide-example-icon { color: #ff8585; }
.cornfield-menu__guide-card .cornfield-menu__guide-secret {
    margin: 0;
    padding: 11px 12px;
    border-left: 3px solid #dc8a3f;
    background: rgba(14, 9, 5, .6);
    color: #f8d7a7;
}
.cornfield-menu__guide-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid #b98a57;
    border-radius: 50%;
    background: #28170d;
    color: #fff3dd;
    font: bold 24px/1 Arial, sans-serif;
    cursor: pointer;
}
.cornfield-menu__guide-close:hover,
.cornfield-menu__guide-close:focus-visible { background: #713113; outline: 2px solid #fff; }

.cornfield-menu__audio-toggle[aria-pressed="false"] { opacity: .65; }
.cornfield-menu__audio-toggle:hover,
.cornfield-menu__audio-toggle:focus-visible {
    background: #720000;
    outline: 2px solid white;
}

.cornfield-menu__close:hover,
.cornfield-menu__close:focus-visible {
    background: #720000;
    outline: 2px solid white;
}

@media (prefers-reduced-motion: reduce) {
    .prelogin-cornfield-event__name::after { animation: none; }
    .cornfield-menu__fence-blood,
    .cornfield-menu__fence-blood::after { animation: none; }
    .cornfield-menu__ravens { display: none; }
    .cornfield-menu__raven,
    .cornfield-menu__raven::before,
    .cornfield-menu__mist-bank,
    .cornfield-menu__hillhouse-mist-bank,
    .cornfield-menu__hillhouse-raven,
    .cornfield-menu__hillhouse-raven::before,
    .cornfield-menu__ghost,
    .cornfield-menu__ghost::after,
    .cornfield-menu__spider { animation: none; }
    .cornfield-menu__hillhouse-ravens { display: none !important; }
    .cornfield-menu__ghost { display: none !important; }
    .cornfield-menu__title { opacity: 1; }
    .cornfield-menu.is-opening .cornfield-menu__title { animation: none; }
    .cornfield-menu__storm .ambient-lightning,
    .cornfield-menu__storm .ambient-thunder-flash { display: none !important; }
    .cornfield-menu.is-moving .cornfield-menu__image,
    .cornfield-menu.is-wrong::after { animation: none; }
}

.city-chat-room {
    position: absolute;
    left: 50%;
    top: 670px;
    transform: translate(-50%, -50%);
    width: 965px;
    height: 970px;
    z-index: 10020;
    overflow: hidden;
    box-sizing: border-box;
    color: #eee;
    background: linear-gradient(160deg, #141b16 0%, #080d09 58%, #15100b 100%);
    border: 1px solid rgba(134, 183, 112, 0.34);
    border-radius: 12px;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.72), 0 0 34px rgba(68, 111, 52, 0.18);
}

.city-chat-header {
    height: 58px;
    box-sizing: border-box;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(90deg, #16351f, #274d2c 55%, #522817);
    border-bottom: 1px solid rgba(255, 210, 133, 0.3);
}

.city-chat-header-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.city-chat-header-copy strong {
    color: #fff1cf;
    font-size: 1.18em;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px #000;
}

.city-chat-header-copy span {
    color: #bfd0bd;
    font-size: 0.78em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.city-chat-online-count {
    padding: 5px 9px;
    border-radius: 999px;
    color: #d9f0d5;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(168, 215, 151, 0.32);
    font-size: 0.76em;
    font-weight: bold;
}

.city-chat-weather-badge {
    padding: 5px 9px;
    border-radius: 999px;
    color: #cbd8e6;
    background: rgba(7, 13, 21, 0.5);
    border: 1px solid rgba(155, 183, 214, 0.3);
    font-size: 0.72em;
    font-weight: bold;
    white-space: nowrap;
}

.city-chat-graveyard-music-toggle {
    min-width: 32px;
    padding: 4px 6px;
    border: 2px solid red;
    border-radius: 4px;
    color: red;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
}

.city-chat-graveyard-music-toggle.is-muted {
    color: #888;
    border-color: #888;
}

.city-chat-graveyard-music-toggle[hidden] {
    display: none;
}

.city-chat-graveyard-guide-button {
    padding: 4px 9px;
    border: 1px solid rgba(210, 230, 180, 0.45);
    border-radius: 4px;
    color: #e8f5d8;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.76em;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.city-chat-graveyard-guide-button[hidden] {
    display: none;
}

.city-chat-leave-button,
.city-chat-order-champagne,
.city-chat-form button {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    background: linear-gradient(#a42b24, #711913);
    font-weight: bold;
    cursor: pointer;
}

.city-chat-order-champagne {
    position: absolute;
    left: 15.6%;
    top: 65%;
    z-index: 9;
    min-width: 108px;
    padding: 5px 8px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#ef1717, #bd0000);
    font-size: 10px;
    line-height: 1.15;
    text-shadow: 0 1px 1px #650000;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.65),
        inset 0 1px rgba(255, 255, 255, 0.2);
}

.city-chat-order-champagne[hidden] {
    display: none;
}

.city-chat-order-champagne:hover:not(:disabled) {
    background: linear-gradient(#ff2929, #d00000);
    filter: none;
}

.city-chat-order-champagne:disabled {
    cursor: default;
}

.city-chat-lounge-drink-button {
    left: 15.6%;
    top: 65%;
}

.city-chat-lounge-drink-menu {
    left: 15.6%;
    top: 48%;
    border-color: #d4a24a;
    background: linear-gradient(155deg, rgba(58, 16, 12, 0.98), rgba(12, 7, 6, 0.98));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), 0 0 14px rgba(212, 162, 74, 0.22);
}

.city-chat-lounge-drink-menu .city-chat-sportsbar-beer-menu__header {
    border-bottom-color: rgba(212, 154, 72, 0.28);
}

.city-chat-lounge-drink-menu .city-chat-sportsbar-beer-menu__header strong {
    color: #ffd9a8;
}

.city-chat-lounge-drink-menu .city-chat-sportsbar-beer-menu__header button {
    background: #a42b24;
}

.city-chat-stage:not([data-city-location="donator_lounge"]) .city-chat-lounge-drink-button,
.city-chat-stage:not([data-city-location="donator_lounge"]) .city-chat-lounge-drink-menu {
    display: none;
}

.city-chat-lounge-drink-menu[hidden] {
    display: none;
}

.donator-lounge-perk-thumb {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid rgba(155, 89, 182, 0.4);
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.donator-lounge-perk-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.donator-lounge-perk-thumb__badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.45px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    background: rgba(12, 8, 14, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

.city-chat-stage:not([data-city-location="donator_lounge"]) .city-chat-recruit-sign,
.city-chat-stage:not([data-city-location="donator_lounge"]) .city-chat-recruit-menu {
    display: none;
}

.city-chat-recruit-sign {
    position: absolute;
    left: auto;
    right: 42px;
    top: 0;
    z-index: 9;
    width: 176px;
    padding: 0;
    transform: none;
    transform-origin: 50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    animation: cityChatRecruitSway 6.2s ease-in-out infinite;
}

.city-chat-recruit-sign[hidden],
.city-chat-recruit-menu[hidden] {
    display: none;
}

.city-chat-recruit-sign:hover,
.city-chat-recruit-sign:focus-visible,
.city-chat-recruit-sign:active {
    background: transparent;
}

.city-chat-recruit-sign:hover .city-chat-recruit-counter,
.city-chat-recruit-sign:focus-visible .city-chat-recruit-counter {
    border-color: #ffe09a;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.78),
        0 0 0 2px rgba(255, 210, 106, 0.35),
        0 0 14px 4px rgba(255, 190, 64, 0.52),
        0 0 28px 8px rgba(255, 142, 42, 0.22),
        inset 0 0 10px rgba(255, 218, 130, 0.12);
}

.city-chat-recruit-sign:focus-visible {
    outline: none;
}

.city-chat-recruit-chain {
    position: absolute;
    top: 0;
    width: 22px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.city-chat-recruit-chain--left {
    left: 28px;
}

.city-chat-recruit-chain--right {
    right: 28px;
}

.city-chat-recruit-chain span {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 13px;
    height: 18px;
    margin-top: -6px;
    border: 3.5px solid #d7a33a;
    border-radius: 50%;
    background: rgba(28, 16, 6, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 224, 150, 0.45),
        inset 0 0 0 1px #6a4410,
        0 1px 2px rgba(0, 0, 0, 0.7);
}

.city-chat-recruit-chain span:first-child {
    margin-top: 0;
    width: 14px;
    height: 14px;
    border-width: 3.5px;
    background: radial-gradient(circle at 50% 50%, #2a1a08 0 3px, transparent 3.5px);
}

.city-chat-recruit-chain span:nth-child(even) {
    width: 19px;
    height: 13px;
    border-color: #c4922e;
}

.city-chat-recruit-counter {
    position: relative;
    z-index: 1;
    width: 176px;
    margin-top: 90px;
    padding: 11px 11px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #ffd9a8;
    background:
        linear-gradient(180deg, #3a2216 0%, #1a0e0a 48%, #120a08 100%);
    border: 2px solid #d4a24a;
    border-radius: 6px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.78),
        inset 0 1px 0 rgba(255, 224, 160, 0.35),
        inset 0 -2px 0 rgba(80, 40, 10, 0.65);
}

.city-chat-recruit-sign.is-claimed .city-chat-recruit-counter {
    border-color: #d4a24a;
}

.city-chat-recruit-counter__eyebrow {
    color: #ffe08a;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 1.15;
    text-shadow: 0 1px 1px #000;
}

.city-chat-recruit-counter__eyebrow span {
    color: #ff6b55;
    letter-spacing: 0;
}

.city-chat-recruit-counter__claim-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    color: #ffe08a;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.15;
    text-shadow: 0 1px 1px #000;
}

.city-chat-recruit-counter__claim-hint strong {
    color: #fff;
}

.city-chat-recruit-counter__claim-hint img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    vertical-align: middle;
}

.city-chat-recruit-sign.is-claimed .city-chat-recruit-counter__claim-hint {
    display: none;
}

.city-chat-recruit-counter__caption {
    color: #ff6b55;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0 1px 1px #000;
}

.city-chat-recruit-counter__caption:empty {
    display: none;
}

.city-chat-recruit-sign.is-claimed .city-chat-recruit-counter__caption {
    color: #82df8b;
}

.city-chat-recruit-counter__countdown {
    color: #ffd27a;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.35px;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0 1px 1px #000;
}

.city-chat-recruit-counter__countdown[hidden] {
    display: none;
}

.city-chat-recruit-counter__digits {
    margin: 0;
    padding: 5px 5px 4px;
    display: flex;
    gap: 4px;
    list-style: none;
    background: #090807;
    border: 1px solid rgba(255, 196, 92, 0.4);
    border-radius: 3px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}

.city-chat-recruit-counter__digits li {
    width: 30px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    counter-reset: recruit-digit var(--digit, 0);
    color: #ff3b32;
    background: linear-gradient(#24110e, #070504);
    border-radius: 2px;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 48, 32, 0.95);
}

.city-chat-recruit-counter__digits li::after {
    content: counter(recruit-digit);
}

.city-chat-recruit-sign.is-claimed .city-chat-recruit-counter__digits li,
.city-chat-recruit-sign.is-claimed .city-chat-recruit-counter__digits li::after {
    color: #ff3b32;
    text-shadow: 0 0 8px rgba(255, 48, 32, 0.95);
}

@keyframes cityChatRecruitSway {
    0%, 100% { transform: rotate(-0.8deg); }
    50% { transform: rotate(0.8deg); }
}

.city-chat-recruit-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 32;
    width: min(340px, calc(100% - 32px));
    box-sizing: border-box;
    padding: 16px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: linear-gradient(155deg, rgba(58, 16, 12, 0.98), rgba(12, 7, 6, 0.98));
    border: 2px solid #d49a48;
    border-radius: 12px;
    box-shadow: 0 11px 34px rgba(0, 0, 0, 0.85), 0 0 24px rgba(212, 80, 48, 0.28);
}

.city-chat-recruit-menu__header {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 154, 72, 0.28);
}

.city-chat-recruit-menu__header strong {
    color: #ffd9a8;
    font-size: 16px;
    letter-spacing: 0.2px;
    text-align: center;
}

.city-chat-recruit-menu__header button {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #a42b24;
    font-size: 20px;
    line-height: 26px;
    cursor: pointer;
}

.city-chat-recruit-menu__eyebrow {
    color: #f0c08a;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
}

.city-chat-recruit-menu__scope {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    color: #f7e8d5;
    background: rgba(212, 154, 72, 0.12);
    border: 1px solid rgba(255, 208, 128, 0.32);
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.city-chat-recruit-menu__scope strong {
    display: block;
    margin-bottom: 2px;
    color: #ffe08a;
    font-size: 12px;
}

.city-chat-recruit-menu__rate {
    color: #f0c08a;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
}

.city-chat-recruit-menu__rate-blue {
    color: #55b7ff;
    text-shadow: 0 0 6px rgba(45, 151, 255, 0.45);
}

.city-chat-recruit-menu__rate-goobs {
    color: #73d34d;
    text-shadow: 0 0 6px rgba(78, 190, 47, 0.42);
}

.city-chat-recruit-menu__amount {
    color: #ffdd55;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 221, 85, 0.35);
}

.city-chat-recruit-menu__players {
    color: #d7c4b4;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

.city-chat-recruit-menu__actions {
    width: 100%;
    display: flex;
    gap: 10px;
}

.city-chat-recruit-menu__claim {
    flex: 1 1 0;
    min-height: 56px;
    padding: 8px 8px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.15;
    cursor: pointer;
}

.city-chat-recruit-menu__claim img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.city-chat-recruit-menu__claim--blue {
    background: linear-gradient(#1a5fb4, #0d3b78);
    border-color: rgba(120, 190, 255, 0.45);
}

.city-chat-recruit-menu__claim--goobs {
    background: linear-gradient(#3f9f27, #236416);
    border-color: rgba(152, 231, 117, 0.45);
}

.city-chat-recruit-menu__claim:hover:not(:disabled).city-chat-recruit-menu__claim--blue {
    background: linear-gradient(#2474d4, #124a94);
}

.city-chat-recruit-menu__claim:hover:not(:disabled).city-chat-recruit-menu__claim--goobs {
    background: linear-gradient(#55bd35, #2c7c1b);
}

.city-chat-recruit-menu__claim:disabled {
    color: #d0d0d0;
    background: linear-gradient(#777, #555);
    border-color: rgba(210, 210, 210, 0.45);
    opacity: 0.72;
    cursor: default;
}

.city-chat-recruit-menu__feedback {
    min-height: 16px;
    color: #ffaaa3;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.city-chat-recruit-menu__feedback.is-success {
    color: #8bec87;
}

.city-chat-leave-button {
    padding: 7px 12px;
    font-size: 0.78em;
}

.city-chat-stage-shell {
    height: 636px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050806;
    border-bottom: 1px solid rgba(255, 210, 133, 0.18);
}

.city-chat-stage {
    position: relative;
    width: 918px;
    height: 612px;
    overflow: hidden;
    outline: none;
    background-image: url('images/citychatbg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(204, 153, 80, 0.22);
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.city-chat-stage[data-city-location="sports_bar"] {
    background-image: url('images/sportsbar.png');
}

.city-chat-stage[data-city-location="donator_lounge"] {
    background-image:
        url('images/donatorlounge.png'),
        linear-gradient(160deg, #25120e, #080505 70%);
}

.city-chat-stage[data-city-location="market"] {
    background-image:
        linear-gradient(rgba(5, 12, 18, 0.12), rgba(3, 7, 11, 0.24)),
        url('images/mart.png');
    background-size: cover;
    background-position: center;
    background-color: #071015;
    box-shadow:
        inset 0 70px 80px -38px rgba(0, 0, 0, 0.62),
        inset 0 -54px 76px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(190, 158, 87, 0.3);
}

.city-chat-stage[data-city-location="family_house"] {
    background-color: #140c08;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 70px 90px -24px rgba(0, 0, 0, 0.48),
        inset 0 -36px 48px rgba(0, 0, 0, 0.28),
        inset 48px 0 70px rgba(0, 0, 0, 0.22),
        inset -48px 0 70px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(204, 153, 80, 0.22);
}

.city-chat-stage[data-city-location="family_house"][data-family-interior="houtenhut"] {
    background-image: url('images/houtenhut.png');
}

.city-chat-stage[data-city-location="family_house"][data-family-interior="luxehuuis"] {
    background-image: url('images/luxehuuis.png');
}

.city-chat-stage[data-city-location="family_house"][data-family-interior="bikergang"] {
    background-image: url('images/bikergang.png');
}

.city-chat-stage:is([data-city-location="graveyard"], [data-city-location="spirit_room"]) {
    background-image: url('images/begraaf.png');
    background-color: #070b06;
}

.city-chat-graveyard-effects {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.city-chat-stage:is([data-city-location="graveyard"], [data-city-location="spirit_room"]) .city-chat-graveyard-effects {
    display: block;
}

.city-chat-graveyard-sky {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22%;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.45) 78%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.45) 78%,
        transparent 100%
    );
}

.city-chat-graveyard-stars,
.city-chat-graveyard-clouds {
    position: absolute;
    inset: 0;
}

.city-chat-graveyard-sky .prelogin-sky-star {
    width: 3.5px;
    height: 3.5px;
    box-shadow: 0 0 4px currentColor;
}

.city-chat-graveyard-sky-cloud {
    position: absolute;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 40% 45%,
        rgba(210, 218, 168, 0.58) 0%,
        rgba(140, 155, 110, 0.3) 42%,
        rgba(90, 110, 70, 0.12) 68%,
        transparent 100%
    );
    filter: blur(5px);
    will-change: transform;
    pointer-events: none;
}

.city-chat-graveyard-sky-cloud::before,
.city-chat-graveyard-sky-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.city-chat-graveyard-sky-cloud::before {
    width: 55%;
    height: 70%;
    left: -18%;
    top: 15%;
}

.city-chat-graveyard-sky-cloud::after {
    width: 50%;
    height: 65%;
    right: -14%;
    top: 20%;
}

.city-chat-graveyard-sky-cloud--1 {
    top: 4%;
    width: 170px;
    height: 38px;
    opacity: 0.7;
    --cloud-scale: 1.05;
    animation: cityChatGraveCloudDrift 42s linear infinite;
}

.city-chat-graveyard-sky-cloud--2 {
    top: 16%;
    width: 130px;
    height: 30px;
    opacity: 0.55;
    --cloud-scale: 0.92;
    animation: cityChatGraveCloudDrift 54s linear infinite -18s;
}

.city-chat-graveyard-sky-cloud--3 {
    top: 6%;
    width: 190px;
    height: 40px;
    opacity: 0.62;
    --cloud-scale: 1.12;
    animation: cityChatGraveCloudDrift 48s linear infinite -30s;
}

.city-chat-graveyard-sky-cloud--4 {
    top: 24%;
    width: 120px;
    height: 28px;
    opacity: 0.48;
    --cloud-scale: 0.86;
    animation: cityChatGraveCloudDrift 60s linear infinite -8s;
}

.city-chat-graveyard-quote {
    position: absolute;
    top: 22%;
    left: 50%;
    z-index: 4;
    width: min(82%, 560px);
    margin: 0;
    padding: 0 8px;
    transform: translateX(-50%);
    text-align: center;
    font-family: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
    font-size: clamp(13px, 1.55vw, 19px);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: rgba(228, 226, 204, 0.92);
    text-shadow:
        0 0 14px rgba(186, 198, 142, 0.38),
        0 0 28px rgba(120, 140, 90, 0.22),
        0 1px 3px rgba(0, 0, 0, 0.72);
    pointer-events: none;
    opacity: 0;
    filter: blur(7px);
    white-space: normal;
}

.city-chat-graveyard-quote.is-visible {
    animation: cityChatGraveQuoteAppear 1.15s ease-out forwards;
}

.city-chat-graveyard-quote.is-fading {
    animation: cityChatGraveQuoteDust 2.35s ease-in forwards;
}

@keyframes cityChatGraveQuoteAppear {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateX(-50%) translateY(10px) scale(0.98);
    }
    to {
        opacity: 0.94;
        filter: blur(0.15px);
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes cityChatGraveQuoteDust {
    0% {
        opacity: 0.94;
        filter: blur(0.15px);
        letter-spacing: 0.05em;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(11px);
        letter-spacing: 0.16em;
        transform: translate3d(calc(-50% + 18px), -16px, 0) scale(1.06);
    }
}

@keyframes cityChatGraveCloudDrift {
    from {
        transform: translate3d(-180px, 0, 0) scale(var(--cloud-scale, 1));
    }
    to {
        transform: translate3d(980px, 0, 0) scale(var(--cloud-scale, 1));
    }
}

.city-chat-graveyard-haze {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(90, 110, 80, 0.12) 0%, transparent 52%),
        linear-gradient(180deg, rgba(8, 12, 8, 0.28) 0%, transparent 28%, rgba(6, 10, 6, 0.18) 62%, rgba(4, 8, 4, 0.42) 100%);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.45);
}

.city-chat-graveyard-mist {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(18px);
    background: radial-gradient(ellipse, rgba(176, 186, 168, 0.34) 0%, rgba(90, 104, 86, 0.16) 46%, transparent 74%);
}

.city-chat-graveyard-mist--one {
    left: -18%;
    bottom: -8%;
    width: 62%;
    height: 38%;
    animation: cityChatGraveMistOne 16s ease-in-out infinite alternate;
}

.city-chat-graveyard-mist--two {
    right: -16%;
    bottom: -4%;
    width: 58%;
    height: 34%;
    opacity: 0.8;
    animation: cityChatGraveMistTwo 21s ease-in-out -6s infinite alternate;
}

.city-chat-graveyard-mist--three {
    left: 22%;
    bottom: -10%;
    width: 52%;
    height: 30%;
    opacity: 0.7;
    animation: cityChatGraveMistThree 13s ease-in-out -3s infinite alternate;
}

.city-chat-graveyard-wisp {
    position: absolute;
    width: 120px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(210, 220, 200, 0.22) 0%, transparent 70%);
    filter: blur(8px);
}

.city-chat-graveyard-wisp--one {
    left: 12%;
    bottom: 18%;
    animation: cityChatGraveWisp 11s ease-in-out infinite;
}

.city-chat-graveyard-wisp--two {
    right: 18%;
    bottom: 24%;
    width: 160px;
    animation: cityChatGraveWisp 15s ease-in-out -5s infinite reverse;
}

.city-chat-graveyard-raven {
    position: absolute;
    width: 20px;
    height: 9px;
    background: #0a0a0a;
    border-radius: 70% 50% 45% 55%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    transform-origin: 50% 50%;
}

.city-chat-graveyard-raven::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 0;
    width: 16px;
    height: 7px;
    background: #080808;
    border-radius: 80% 20% 40% 60%;
    transform: rotate(-22deg);
}

.city-chat-graveyard-raven::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 2px;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 8px solid #111;
}

.city-chat-graveyard-raven--sky-one,
.city-chat-graveyard-raven--sky-two {
    top: 10%;
    opacity: 0.72;
    animation: cityChatGraveRavenCircle 22s linear infinite;
}

.city-chat-graveyard-raven--sky-two {
    top: 16%;
    width: 14px;
    height: 6px;
    opacity: 0.5;
    animation-duration: 28s;
    animation-delay: -11s;
}

.city-chat-graveyard-raven--1 { left: 16%; top: 36%; }
.city-chat-graveyard-raven--2 { left: 29%; top: 41%; }
.city-chat-graveyard-raven--3 { left: 58%; top: 34%; }
.city-chat-graveyard-raven--4 { left: 74%; top: 39%; }
.city-chat-graveyard-raven--5 { left: 88%; top: 35%; }
.city-chat-graveyard-raven--6 { left: 11%; top: 54%; }

.city-chat-graveyard-effects.is-flushing .city-chat-graveyard-raven--1 {
    animation: cityChatGraveRavenFlushLeft 1.15s ease-in forwards;
}
.city-chat-graveyard-effects.is-flushing .city-chat-graveyard-raven--2 {
    animation: cityChatGraveRavenFlushRight 1.05s ease-in 0.05s forwards;
}
.city-chat-graveyard-effects.is-flushing .city-chat-graveyard-raven--3 {
    animation: cityChatGraveRavenFlushUp 0.95s ease-in 0.08s forwards;
}
.city-chat-graveyard-effects.is-flushing .city-chat-graveyard-raven--4 {
    animation: cityChatGraveRavenFlushRight 1.2s ease-in 0.12s forwards;
}
.city-chat-graveyard-effects.is-flushing .city-chat-graveyard-raven--5 {
    animation: cityChatGraveRavenFlushLeft 1.1s ease-in 0.04s forwards;
}
.city-chat-graveyard-effects.is-flushing .city-chat-graveyard-raven--6 {
    animation: cityChatGraveRavenFlushUp 1.25s ease-in 0.16s forwards;
}

@keyframes cityChatGraveMistOne {
    from { transform: translate3d(-6%, 4%, 0) scale(1); opacity: 0.4; }
    to { transform: translate3d(28%, -8%, 0) scale(1.16); opacity: 0.78; }
}

@keyframes cityChatGraveMistTwo {
    from { transform: translate3d(8%, 2%, 0) scale(0.94); opacity: 0.36; }
    to { transform: translate3d(-22%, -7%, 0) scale(1.2); opacity: 0.72; }
}

@keyframes cityChatGraveMistThree {
    from { transform: translate3d(-10%, 6%, 0) scale(1); opacity: 0.32; }
    to { transform: translate3d(16%, -5%, 0) scale(1.14); opacity: 0.64; }
}

@keyframes cityChatGraveWisp {
    0% { opacity: 0; transform: translate(0, 8px) scale(0.8); }
    28% { opacity: 0.55; }
    100% { opacity: 0; transform: translate(46px, -34px) scale(1.35); }
}

@keyframes cityChatGraveRavenCircle {
    0% { left: -8%; transform: translateY(0) scaleX(1); }
    48% { transform: translateY(-10px) scaleX(1); }
    50% { left: 108%; transform: translateY(-6px) scaleX(-1); }
    98% { transform: translateY(8px) scaleX(-1); }
    100% { left: -8%; transform: translateY(0) scaleX(1); }
}

@keyframes cityChatGraveRavenFlushLeft {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scaleX(1); }
    18% { transform: translate(-12px, -18px) rotate(-18deg) scaleX(1.05); }
    100% { opacity: 0; transform: translate(-160px, -170px) rotate(-28deg) scale(0.7); }
}

@keyframes cityChatGraveRavenFlushRight {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scaleX(-1); }
    16% { transform: translate(14px, -16px) rotate(16deg) scaleX(-1.05); }
    100% { opacity: 0; transform: translate(180px, -160px) rotate(24deg) scale(0.68); }
}

@keyframes cityChatGraveRavenFlushUp {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(8px, -24px) rotate(-8deg); }
    100% { opacity: 0; transform: translate(40px, -210px) rotate(-12deg) scale(0.6); }
}

.city-chat-graves {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.city-chat-gravestone--search,
.city-chat-gravestone--child,
.city-chat-gravestone--animal {
    pointer-events: auto;
    cursor: pointer;
}

.city-chat-gravestone--search:hover .city-chat-gravestone__stone,
.city-chat-gravestone--child:hover .city-chat-gravestone__stone,
.city-chat-gravestone--animal:hover .city-chat-gravestone__stone {
    filter: brightness(1.12);
}

.city-chat-stage:not([data-city-location="graveyard"]) .city-chat-graves,
.city-chat-stage:not([data-city-location="graveyard"]) .city-chat-grave-search-menu {
    display: none;
}

.city-chat-gravestone {
    position: absolute;
    width: 78px;
    height: 88px;
    transform: translate(-50%, -100%);
}

.city-chat-gravestone::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 108px;
    height: 28px;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 22% 38%, #7a5430 0 3px, transparent 4px),
        radial-gradient(circle at 74% 58%, #3d2612 0 2px, transparent 3px),
        radial-gradient(circle at 48% 28%, #6b4626 0 2px, transparent 3px),
        radial-gradient(ellipse at 50% 48%, #5a3b1e 0%, #3f2814 68%, #2a1a0c 100%);
    border-radius: 50% 48% 52% 50% / 62% 58% 42% 46%;
    box-shadow:
        inset 0 2px 0 rgba(92, 64, 34, 0.4),
        0 1px 0 rgba(16, 10, 4, 0.55);
    pointer-events: none;
}

.city-chat-gravestone--search::before {
    width: 118px;
    height: 30px;
    bottom: -10px;
}

.city-chat-gravestone__stone {
    position: absolute;
    z-index: 1;
    left: 4px;
    bottom: 0;
    width: 70px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 5px 8px;
    background: linear-gradient(180deg, #8d8778 0%, #6a6458 48%, #3f3b34 100%);
    border: 2px solid #2a241c;
    border-radius: 18px 18px 4px 4px;
    box-shadow:
        0 3px 0 #161310,
        0 4px 8px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.city-chat-gravestone--child .city-chat-gravestone__stone {
    background: linear-gradient(180deg, #7f8874 0%, #586050 50%, #3a4136 100%);
}

.city-chat-gravestone--animal .city-chat-gravestone__stone {
    background: linear-gradient(180deg, #8a8174 0%, #5f564c 50%, #3c372f 100%);
}

.city-chat-gravestone--search {
    width: 84px;
    height: 86px;
}

.city-chat-gravestone--search .city-chat-gravestone__stone {
    left: 4px;
    width: 76px;
    height: 78px;
    background: linear-gradient(180deg, #5c5c60 0%, #3a3a3e 52%, #1e1e22 100%);
    border-color: #111;
}

.city-chat-gravestone--empty .city-chat-gravestone__stone {
    background: linear-gradient(180deg, #6f6b64 0%, #4c4843 48%, #32302c 100%);
    opacity: 0.9;
}

.city-chat-gravestone--tone-1 .city-chat-gravestone__stone {
    background: linear-gradient(168deg, #969084 0%, #706a5f 46%, #413d36 100%);
    border-color: #2c261e;
}

.city-chat-gravestone--tone-2 .city-chat-gravestone__stone {
    background: linear-gradient(176deg, #81898a 0%, #596364 49%, #343c3d 100%);
    border-color: #202829;
}

.city-chat-gravestone--tone-3 .city-chat-gravestone__stone {
    background: linear-gradient(164deg, #808878 0%, #59614f 48%, #343b30 100%);
    border-color: #24291f;
}

.city-chat-gravestone--tone-4 .city-chat-gravestone__stone {
    background: linear-gradient(172deg, #998979 0%, #6d5c4e 47%, #40342b 100%);
    border-color: #30251d;
}

.city-chat-gravestone--tone-5 .city-chat-gravestone__stone {
    background: linear-gradient(180deg, #737273 0%, #515052 48%, #2f2e31 100%);
    border-color: #202024;
}

.city-chat-gravestone__stone > * {
    position: relative;
    z-index: 1;
}

.city-chat-gravestone--moss-1 .city-chat-gravestone__stone::before,
.city-chat-gravestone--moss-2 .city-chat-gravestone__stone::before,
.city-chat-gravestone--moss-3 .city-chat-gravestone__stone::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 15px 15px 2px 2px;
    pointer-events: none;
}

.city-chat-gravestone--moss-1 .city-chat-gravestone__stone::before {
    background:
        radial-gradient(ellipse at 12% 13%, rgba(76, 102, 43, 0.9) 0 6%, transparent 17%),
        radial-gradient(ellipse at 19% 29%, rgba(55, 82, 34, 0.74) 0 7%, transparent 18%),
        linear-gradient(100deg, rgba(69, 94, 42, 0.72) 0 7%, transparent 19% 100%);
}

.city-chat-gravestone--moss-2 .city-chat-gravestone__stone::before {
    background:
        radial-gradient(ellipse at 32% 5%, rgba(92, 113, 51, 0.88) 0 8%, transparent 20%),
        radial-gradient(ellipse at 66% 7%, rgba(63, 91, 38, 0.82) 0 10%, transparent 23%),
        radial-gradient(ellipse at 86% 20%, rgba(55, 79, 32, 0.68) 0 6%, transparent 17%);
}

.city-chat-gravestone--moss-3 .city-chat-gravestone__stone::before {
    background:
        radial-gradient(ellipse at 15% 15%, rgba(78, 104, 43, 0.92) 0 8%, transparent 21%),
        radial-gradient(ellipse at 78% 10%, rgba(94, 115, 49, 0.84) 0 9%, transparent 23%),
        radial-gradient(ellipse at 90% 42%, rgba(48, 75, 31, 0.76) 0 8%, transparent 19%),
        radial-gradient(ellipse at 26% 70%, rgba(53, 78, 34, 0.58) 0 7%, transparent 20%);
}

.city-chat-gravestone__rip {
    color: #1c1c1c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.city-chat-gravestone--search .city-chat-gravestone__rip {
    color: #ececec;
    text-shadow: 0 1px 2px #000;
}

.city-chat-gravestone__identity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    max-width: 64px;
}

.city-chat-gravestone__type {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    mix-blend-mode: lighten;
}

.city-chat-gravestone__name {
    min-width: 0;
    overflow: hidden;
    color: #151515;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.15;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.city-chat-gravestone--search .city-chat-gravestone__name {
    max-width: 66px;
    color: #f3f3f3;
    text-align: center;
}

.city-chat-gravestone__count {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    padding: 2px 6px 1px;
    color: #111;
    background: rgba(255, 236, 176, 0.42);
    border: 1px solid rgba(70, 48, 8, 0.35);
    border-radius: 8px;
    line-height: 1;
}

.city-chat-gravestone__count-num {
    color: #140d04;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.city-chat-gravestone--search .city-chat-gravestone__count,
.city-chat-gravestone--empty .city-chat-gravestone__count {
    display: none;
}

.city-chat-gravestone__candle {
    position: absolute;
    z-index: 2;
    left: 6px;
    bottom: 4px;
    display: none;
    width: 7px;
    height: 16px;
    background: linear-gradient(#f4ead0, #d8c48a);
    border: 1px solid #5a4a22;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}

.city-chat-gravestone.has-candle .city-chat-gravestone__candle {
    display: block;
}

.city-chat-gravestone__flame {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 6px;
    height: 9px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 70%, #fff6c2 0%, #ffb347 42%, #ff6a00 78%, transparent 82%);
    border-radius: 50% 50% 45% 45%;
    filter: drop-shadow(0 0 4px rgba(255, 140, 0, 0.95));
    animation: cityChatGraveFlame 0.7s ease-in-out infinite alternate;
}

@keyframes cityChatGraveFlame {
    from { opacity: 0.72; transform: translateX(-50%) scale(0.86); }
    to { opacity: 1; transform: translateX(-50%) scale(1.12); }
}

.city-chat-spirit-gate {
    position: absolute;
    left: 76.1%;
    top: calc(53.5% + 7px);
    z-index: 8;
    display: none;
    width: 118px;
    height: 138px;
    padding: 0;
    margin: 0;
    transform: translate(-50%, -50%);
    appearance: none;
    color: transparent;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.city-chat-stage[data-city-location="graveyard"] .city-chat-spirit-gate {
    display: block;
}

.city-chat-spirit-gate__orb {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 4px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(213, 255, 247, 0.82);
    box-shadow: 0 0 5px 2px rgba(150, 255, 235, 0.38);
    animation: cityChatSpiritGatePulse 4.6s ease-in-out infinite;
}

.city-chat-spirit-gate__wisps i {
    position: absolute;
    z-index: 3;
    left: 36%;
    top: 57%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(219, 253, 255, 0.98);
    box-shadow: 0 0 7px 3px rgba(138, 239, 255, 0.92), 0 0 16px 6px rgba(25, 149, 255, 0.58);
    animation: cityChatSpiritGateWisp 5.3s ease-in-out infinite;
}

.city-chat-spirit-gate__wisps i:nth-child(2) {
    left: 62%;
    top: 40%;
    width: 3px;
    height: 3px;
    animation-delay: -1.8s;
}

.city-chat-spirit-gate__wisps i:nth-child(3) {
    left: 69%;
    top: 62%;
    animation-delay: -3.6s;
}

.city-chat-spirit-gate__wisps i:nth-child(4) {
    left: 29%;
    top: 68.5%;
    width: 3px;
    height: 3px;
    animation-delay: -0.8s;
}

.city-chat-spirit-gate__wisps i:nth-child(5) {
    left: 49%;
    top: 73%;
    animation-delay: -2.7s;
}

.city-chat-spirit-gate__wisps i:nth-child(6) {
    left: 77%;
    top: 70.5%;
    width: 3px;
    height: 3px;
    animation-delay: -4.4s;
}

.city-chat-spirit-gate__wisps i:nth-child(7) {
    left: 42%;
    top: 29%;
    width: 3px;
    height: 3px;
    animation-delay: -1.25s;
}

.city-chat-spirit-gate__wisps i:nth-child(8) {
    left: 66%;
    top: 20%;
    width: 4px;
    height: 4px;
    animation-delay: -3.15s;
}

.city-chat-spirit-gate__wisps i:nth-child(9) {
    left: 31%;
    top: 13%;
    width: 3px;
    height: 3px;
    animation-delay: -4.85s;
}

.city-chat-spirit-gate__wisps i:nth-child(10) {
    left: 56%;
    top: 6%;
    width: 2px;
    height: 2px;
    animation-delay: -2.35s;
}

.city-chat-spirit-gate__wisps i:nth-child(11) {
    left: 73%;
    top: 32%;
    width: 2px;
    height: 2px;
    animation-delay: -0.45s;
}

.city-chat-spirit-gate__label {
    display: none;
}

.city-chat-spirit-gate:hover,
.city-chat-spirit-gate:focus-visible,
.city-chat-spirit-gate:active {
    color: transparent;
    background: transparent !important;
    border: 0;
    outline: 0;
    box-shadow: none;
    filter: none;
}

.city-chat-spirit-gate:is(:hover, :focus-visible, :active) .city-chat-spirit-gate__orb {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: #e4fdff;
    box-shadow: 0 0 8px 3px rgba(188, 249, 255, 0.96), 0 0 18px 8px rgba(42, 176, 255, 0.72);
    animation-duration: 1.1s;
}

.city-chat-spirit-gate:is(:hover, :focus-visible, :active) .city-chat-spirit-gate__wisps i {
    animation-duration: 1.35s;
}

@keyframes cityChatSpiritGatePulse {
    0%, 20%, 100% { opacity: 0.08; transform: translate(-50%, -50%) scale(0.7); }
    35% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
    44% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes cityChatSpiritGateWisp {
    0%, 14%, 100% { opacity: 0; transform: scale(0.5); }
    24% { opacity: 0.58; transform: scale(1); }
    31% { opacity: 0.08; transform: scale(0.7); }
}

.city-chat-ghosts {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.city-chat-stage[data-city-location="spirit_room"] .city-chat-ghosts {
    display: block;
}

.city-chat-spirit-altar {
    position: absolute;
    left: 50%;
    top: 72.5%;
    z-index: 8;
    display: none;
    width: 210px;
    height: 166px;
    transform: translate(-50%, -50%);
    color: #cfe5dd;
    cursor: pointer;
    user-select: none;
}

.city-chat-stage[data-city-location="spirit_room"] .city-chat-spirit-altar {
    display: block;
}

.city-chat-spirit-altar__aura {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 180px;
    height: 98px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(113, 219, 199, 0.12), transparent 70%);
    filter: blur(7px);
    opacity: 0.5;
    pointer-events: none;
}

.city-chat-spirit-goblet {
    position: absolute;
    left: 50%;
    bottom: 31px;
    z-index: 3;
    width: 104px;
    height: 102px;
    transform: translateX(-50%) scale(1.25);
    transform-origin: 50% 100%;
    pointer-events: none;
}

.city-chat-spirit-goblet__bowl {
    position: absolute;
    left: 50%;
    bottom: 36px;
    z-index: 7;
    width: 82px;
    height: 38px;
    transform: translateX(-50%);
    border: 2px solid #2b1a0e;
    border-top-color: #c99b54;
    border-radius: 8px 8px 42px 42px;
    background:
        linear-gradient(90deg, rgba(255, 228, 160, 0.3), transparent 20% 70%, rgba(35, 16, 7, 0.35)),
        linear-gradient(#9a692f, #543118 72%, #2f1b0f);
    box-shadow: inset 0 3px rgba(255, 226, 157, 0.28), 0 6px 7px rgba(0, 0, 0, 0.62), 0 0 9px rgba(93, 224, 210, 0.18);
}

.city-chat-spirit-goblet__bowl::after {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 10px;
    height: 1px;
    background: rgba(243, 203, 126, 0.42);
    box-shadow: 0 6px rgba(45, 24, 12, 0.58);
    content: '';
}

.city-chat-spirit-goblet__stem {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    width: 17px;
    height: 31px;
    transform: translateX(-50%);
    border: 2px solid #2c190c;
    border-radius: 4px 4px 7px 7px;
    background: linear-gradient(90deg, #4d2b13, #bc8745 45%, #573018);
    box-shadow: inset 2px 0 rgba(255, 222, 153, 0.18), 0 3px 4px rgba(0, 0, 0, 0.45);
}

.city-chat-spirit-goblet__foot {
    position: absolute;
    left: 50%;
    bottom: 5px;
    z-index: 4;
    width: 62px;
    height: 16px;
    transform: translateX(-50%);
    border: 2px solid #2b190c;
    border-radius: 50% 50% 8px 8px;
    background: linear-gradient(#b37d3e, #4b2913);
    box-shadow: inset 0 2px rgba(255, 222, 155, 0.22), 0 5px 5px rgba(0, 0, 0, 0.58);
}

.city-chat-spirit-goblet__flame {
    position: absolute;
    left: 50%;
    bottom: 62px;
    z-index: 2;
    width: 35px;
    height: 47px;
    transform: translateX(-50%) rotate(5deg);
    transform-origin: 50% 100%;
    border-radius: 55% 45% 58% 42% / 72% 70% 30% 28%;
    background: radial-gradient(circle at 48% 72%, #effffc 0 10%, #7ff7e9 22%, #27aeaa 52%, rgba(26, 93, 101, 0.35) 74%, transparent 76%);
    filter: drop-shadow(0 0 7px rgba(96, 255, 237, 0.85));
    animation: cityChatSpiritGobletFlame 1.15s ease-in-out infinite alternate;
}

.city-chat-spirit-goblet__flame--back {
    left: 38%;
    bottom: 60px;
    width: 27px;
    height: 37px;
    opacity: 0.58;
    animation-delay: -0.72s;
}

.city-chat-spirit-goblet__flame--left {
    left: 63%;
    bottom: 60px;
    width: 24px;
    height: 32px;
    opacity: 0.7;
    animation-delay: -0.38s;
}

.city-chat-spirit-goblet__flame--main {
    z-index: 5;
    opacity: 0.82;
}

@keyframes cityChatSpiritGobletFlame {
    from { transform: translateX(-50%) rotate(-6deg) scale(0.88, 0.94); opacity: 0.68; }
    to { transform: translateX(-50%) rotate(7deg) scale(1.06, 1.12); opacity: 1; }
}

.city-chat-spirit-altar__item {
    position: absolute;
    left: 50%;
    bottom: 78px;
    z-index: 6;
    width: 48px;
    height: 57px;
    transform: translateX(-50%);
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 7px rgba(136, 230, 255, 0.76)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.6));
    animation: cityChatSpiritHolderGlow 2.35s ease-in-out infinite alternate;
    pointer-events: none;
}

.city-chat-spirit-altar__item[hidden] {
    display: none;
}

.city-chat-spirit-altar__status {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 6;
    max-width: 205px;
    transform: translateX(-50%);
    overflow: hidden;
    padding: 2px 7px;
    border: 1px solid rgba(155, 207, 194, 0.32);
    border-radius: 7px;
    color: #cfe5dd;
    background: rgba(7, 28, 24, 0.75);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
    pointer-events: none;
}

.city-chat-spirit-altar.can-place-spirit-holder .city-chat-spirit-altar__status {
    color: #eafff9;
    border-color: rgba(154, 239, 221, 0.62);
    box-shadow: 0 0 7px rgba(109, 226, 202, 0.18);
}

.city-chat-spirit-altar.has-spirit-holder .city-chat-spirit-altar__aura {
    opacity: 0.9;
    background: radial-gradient(ellipse, rgba(132, 239, 220, 0.32), rgba(73, 169, 153, 0.12) 48%, transparent 72%);
    animation: cityChatSpiritHolderAura 2.8s ease-in-out infinite alternate;
}

.city-chat-spirit-altar.is-placing {
    pointer-events: none;
    opacity: 0.7;
}

.city-chat-spirit-altar:focus-visible {
    outline: none;
}

@keyframes cityChatSpiritHolderGlow {
    from {
        transform: translateX(-50%) translateY(3px) rotate(-2deg);
        filter: drop-shadow(0 0 5px rgba(136, 230, 255, 0.56)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.6));
    }
    to {
        transform: translateX(-50%) translateY(-7px) rotate(2deg);
        filter: drop-shadow(0 0 11px rgba(165, 245, 255, 0.92)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.6));
    }
}

@keyframes cityChatSpiritHolderAura {
    from { transform: translateX(-50%) scale(0.9); opacity: 0.62; }
    to { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

.city-chat-ghost {
    --ghost-mid-x: -18px;
    --ghost-mid-y: 10px;
    --ghost-drift-x: 24px;
    --ghost-drift-y: -20px;
    --ghost-duration: 8s;
    --ghost-delay: 0s;
    --ghost-image-height: 79px;
    position: absolute;
    width: 180px;
    height: calc(var(--ghost-image-height) + 24px);
    transform: translate(-50%, -50%);
    animation: cityChatGhostWander var(--ghost-duration) ease-in-out var(--ghost-delay) infinite;
    will-change: transform, opacity;
    pointer-events: auto;
    cursor: pointer;
}

.city-chat-ghost--child-baby {
    --ghost-image-height: 79px;
}

.city-chat-ghost--child-toddler {
    --ghost-image-height: 119px;
}

.city-chat-ghost--child-teen {
    --ghost-image-height: 207px;
}

.city-chat-ghost--animal-dog {
    --ghost-image-height: 141px;
}

.city-chat-ghost--animal-cat {
    --ghost-image-height: 125px;
}

.city-chat-ghost__glow {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 86%;
    height: 76%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(190, 255, 245, 0.25), rgba(83, 203, 185, 0.12) 48%, transparent 72%);
    filter: blur(8px);
    animation: cityChatGhostGlow 2.6s ease-in-out infinite alternate;
}

.city-chat-ghost__image {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: auto;
    height: var(--ghost-image-height);
    max-width: none;
    transform: translateX(-50%);
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0.72;
    filter: grayscale(0.78) sepia(0.18) hue-rotate(112deg) saturate(1.35) brightness(1.35) contrast(0.88) drop-shadow(0 0 5px rgba(188, 255, 244, 0.95)) drop-shadow(0 0 13px rgba(84, 232, 208, 0.72));
    mix-blend-mode: screen;
    animation: cityChatGhostFlicker 3.4s ease-in-out infinite alternate;
}

.city-chat-ghost--angry .city-chat-ghost__glow {
    background: radial-gradient(ellipse, rgba(255, 91, 70, 0.48), rgba(196, 31, 29, 0.23) 48%, transparent 73%);
    filter: blur(7px);
    animation-duration: 0.78s;
}

.city-chat-ghost--angry .city-chat-ghost__image {
    filter: grayscale(0.68) sepia(0.22) saturate(1.6) brightness(1.24) contrast(0.94) drop-shadow(0 0 6px rgba(255, 103, 80, 0.98)) drop-shadow(0 0 15px rgba(213, 42, 35, 0.82));
}

.city-chat-ghost--angry .city-chat-ghost__name {
    color: #ffd9d2;
    border-color: rgba(255, 102, 82, 0.62);
    background: rgba(57, 9, 8, 0.72);
    text-shadow: 0 1px 2px #000, 0 0 7px rgba(255, 83, 65, 0.9);
}

.city-chat-ghost--neutral .city-chat-ghost__glow {
    background: radial-gradient(ellipse, rgba(255, 185, 80, 0.42), rgba(213, 111, 30, 0.2) 48%, transparent 73%);
}

.city-chat-ghost--neutral .city-chat-ghost__image {
    filter: grayscale(0.72) sepia(0.38) saturate(1.45) brightness(1.28) contrast(0.9) drop-shadow(0 0 6px rgba(255, 193, 101, 0.94)) drop-shadow(0 0 14px rgba(225, 126, 43, 0.72));
}

.city-chat-ghost--neutral .city-chat-ghost__name {
    color: #fff0d3;
    border-color: rgba(255, 185, 89, 0.54);
    background: rgba(52, 30, 8, 0.68);
    text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 176, 73, 0.78);
}

.city-chat-ghost--loved .city-chat-ghost__glow {
    background: radial-gradient(ellipse, rgba(117, 255, 151, 0.46), rgba(38, 185, 88, 0.21) 48%, transparent 73%);
}

.city-chat-ghost--loved .city-chat-ghost__image {
    filter: grayscale(0.72) sepia(0.2) hue-rotate(76deg) saturate(1.5) brightness(1.34) contrast(0.88) drop-shadow(0 0 6px rgba(140, 255, 166, 0.98)) drop-shadow(0 0 15px rgba(56, 218, 105, 0.76));
}

.city-chat-ghost--loved .city-chat-ghost__name {
    color: #dcffe5;
    border-color: rgba(119, 246, 151, 0.58);
    background: rgba(7, 48, 22, 0.7);
    text-shadow: 0 1px 2px #000, 0 0 7px rgba(99, 243, 135, 0.85);
}

.city-chat-ghost.is-angry-arrival {
    z-index: 30;
    animation: cityChatGhostAngryArrival 2.45s cubic-bezier(0.2, 0.74, 0.22, 1) both;
}

.city-chat-ghost.is-angry-arrival .city-chat-ghost__image {
    animation: cityChatGhostAngryFlicker 0.18s steps(2, end) infinite;
}

.city-chat-ghost__image.is-being-remembered {
    animation: cityChatGhostPet 520ms ease;
}

.city-chat-ghost__hearts {
    position: absolute;
    inset: 8px 18px 20px;
    z-index: 4;
    overflow: visible;
    pointer-events: none;
}

.city-chat-ghost__hearts span {
    position: absolute;
    top: var(--heart-top);
    left: var(--heart-left);
    color: #ff5e88;
    font-size: var(--heart-size);
    opacity: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 94, 136, 0.75);
    animation: animalHeartFloat 0.92s ease-out var(--heart-delay) forwards;
}

.city-chat-ghost__candle-count {
    position: absolute;
    left: 50%;
    top: -25px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 31px;
    height: 23px;
    transform: translateX(-50%);
    padding: 2px 8px 2px 7px;
    color: #fff4dd;
    background: rgba(20, 13, 8, 0.82);
    border: 1px solid rgba(255, 210, 133, 0.58);
    border-radius: 11px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.62), 0 0 8px rgba(255, 161, 65, 0.18);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
    pointer-events: none;
}

.city-chat-ghost__candle-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 14px;
    background: linear-gradient(#f4ead0, #d8c48a);
    border: 1px solid #5a4a22;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}

.city-chat-ghost--angry .city-chat-ghost__candle-count {
    border-color: rgba(255, 102, 82, 0.7);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.62), 0 0 9px rgba(255, 74, 52, 0.34);
}

.city-chat-ghost--neutral .city-chat-ghost__candle-count {
    border-color: rgba(255, 185, 89, 0.7);
}

.city-chat-ghost--loved .city-chat-ghost__candle-count {
    border-color: rgba(119, 246, 151, 0.7);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.62), 0 0 9px rgba(65, 230, 110, 0.28);
}

.city-chat-ghost:focus-visible {
    outline: none;
}

@keyframes cityChatGhostPet {
    0%, 100% { transform: translateX(-50%) scale(1); }
    35% { transform: translateX(-50%) scale(1.07) rotate(-1deg); }
    70% { transform: translateX(-50%) scale(1.035) rotate(1deg); }
}

.city-chat-ghost__name {
    position: absolute;
    left: 50%;
    bottom: 0;
    max-width: 112px;
    transform: translateX(-50%);
    overflow: hidden;
    padding: 2px 6px;
    color: #defff9;
    background: rgba(7, 38, 33, 0.66);
    border: 1px solid rgba(150, 241, 226, 0.4);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000, 0 0 6px rgba(153, 255, 238, 0.86);
    white-space: nowrap;
}

.city-chat-ghosts__empty {
    position: absolute;
    left: 50%;
    top: 48%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: min(430px, 82%);
    transform: translate(-50%, -50%);
    padding: 0;
    color: #ffd39a;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    text-shadow: 0 2px 2px #160500, 0 0 8px rgba(255, 87, 15, 0.58);
    pointer-events: none;
    animation: cityChatSpiritEmptyFloat 3.2s ease-in-out infinite;
}

.city-chat-ghosts__empty strong {
    color: #7ff7e9;
    background: linear-gradient(180deg, #effffc 5%, #7ff7e9 38%, #27aeaa 72%, #1a5d65 100%);
    background-size: 100% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    letter-spacing: 0.035em;
    filter: drop-shadow(0 2px 0 #083236) drop-shadow(0 0 7px rgba(96, 255, 237, 0.85));
    animation: cityChatSpiritFireText 1.35s steps(4, end) infinite;
}

.city-chat-ghosts__empty span {
    color: #ffd6a0;
    font-size: 13px;
    line-height: 1.35;
    text-shadow: 0 2px 2px #160500, 0 0 7px rgba(255, 111, 24, 0.62);
}

@keyframes cityChatSpiritEmptyFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-7px); }
}

@keyframes cityChatSpiritFireText {
    0%, 100% { background-position: 50% 0%; filter: drop-shadow(0 2px 0 #083236) drop-shadow(0 0 6px rgba(96, 255, 237, 0.72)); }
    50% { background-position: 50% 100%; filter: drop-shadow(0 2px 0 #083236) drop-shadow(0 0 12px rgba(127, 247, 233, 0.96)); }
}

@keyframes cityChatGhostWander {
    0%, 100% { opacity: 0.58; transform: translate(-50%, -50%) translate(0, 0) rotate(-2deg); }
    32% { opacity: 0.84; transform: translate(-50%, -50%) translate(var(--ghost-mid-x), var(--ghost-mid-y)) rotate(1deg); }
    68% { opacity: 0.68; transform: translate(-50%, -50%) translate(var(--ghost-drift-x), var(--ghost-drift-y)) rotate(2deg); }
}

@keyframes cityChatGhostAngryArrival {
    0% { opacity: 0.62; transform: translate(-50%, -50%) translate(0, 0) rotate(-2deg) scale(1); }
    7% { opacity: 0.95; transform: translate(-50%, -50%) translate(-7px, 1px) rotate(-8deg) scale(1.04); }
    13% { transform: translate(-50%, -50%) translate(7px, -2px) rotate(8deg) scale(1.04); }
    20% { transform: translate(-50%, -50%) translate(0, 0) rotate(-3deg) scale(0.96); }
    49% { opacity: 0.9; transform: translate(-50%, -50%) translate(var(--ghost-charge-route-x), var(--ghost-charge-route-y)) rotate(-7deg) scale(1.06); }
    68% { opacity: 1; transform: translate(-50%, -50%) translate(var(--ghost-charge-x), var(--ghost-charge-y)) rotate(5deg) scale(1.16); }
    74% { transform: translate(-50%, -50%) translate(var(--ghost-charge-x), var(--ghost-charge-y)) rotate(-6deg) scale(1.11); }
    80% { transform: translate(-50%, -50%) translate(var(--ghost-charge-x), var(--ghost-charge-y)) rotate(5deg) scale(1.15); }
    89% { opacity: 0.86; transform: translate(-50%, -50%) translate(var(--ghost-charge-route-x), var(--ghost-charge-route-y)) rotate(2deg) scale(1.02); }
    100% { opacity: 0.62; transform: translate(-50%, -50%) translate(0, 0) rotate(-2deg) scale(1); }
}

@keyframes cityChatGhostAngryFlicker {
    0%, 100% { opacity: 0.58; }
    50% { opacity: 0.96; }
}

@keyframes cityChatGhostGlow {
    from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 0.92; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes cityChatGhostFlicker {
    0%, 100% { opacity: 0.62; }
    42% { opacity: 0.8; }
    47% { opacity: 0.55; }
    53% { opacity: 0.78; }
}

.city-chat-stage:is([data-city-location="sports_bar"], [data-city-location="donator_lounge"], [data-city-location="market"], [data-city-location="family_house"], [data-city-location="graveyard"], [data-city-location="spirit_room"]) .city-chat-weather-host,
.city-chat-stage:is([data-city-location="sports_bar"], [data-city-location="donator_lounge"], [data-city-location="market"], [data-city-location="family_house"], [data-city-location="graveyard"], [data-city-location="spirit_room"]) .city-chat-scene-lights {
    display: none;
}

.city-chat-sportsbar-effects {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}

.city-chat-stage[data-city-location="sports_bar"] .city-chat-sportsbar-effects {
    display: block;
}

.city-chat-sportsbar-beer-button {
    position: absolute;
    left: 52%;
    top: 54.5%;
    z-index: 9;
    min-width: 104px;
    padding: 5px 9px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#ef1717, #bd0000);
    font-size: 10px;
    font-weight: bold;
    line-height: 1.15;
    text-shadow: 0 1px 1px #650000;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.68),
        inset 0 1px rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.city-chat-sportsbar-beer-button:hover {
    background: linear-gradient(#ff2929, #d00000);
}

.city-chat-sportsbar-beer-button[hidden],
.city-chat-sportsbar-beer-menu[hidden] {
    display: none;
}

.city-chat-sportsbar-beer-menu {
    position: absolute;
    left: 52%;
    top: 51%;
    z-index: 30;
    width: 210px;
    box-sizing: border-box;
    padding: 10px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #fff;
    background: linear-gradient(155deg, rgba(48, 17, 12, 0.98), rgba(15, 12, 10, 0.98));
    border: 1px solid #d73328;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), 0 0 14px rgba(215, 51, 40, 0.2);
}

.city-chat-sportsbar-beer-menu__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.city-chat-sportsbar-beer-menu__header strong {
    color: #fff;
    font-size: 12px;
}

.city-chat-sportsbar-beer-menu__header button {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #b90000;
    font-size: 16px;
    line-height: 19px;
    cursor: pointer;
}

.city-chat-sportsbar-beer-menu__image {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.65));
}

.city-chat-sportsbar-beer-menu__name {
    color: #fff;
    font-size: 13px;
}

.city-chat-sportsbar-beer-menu__health {
    color: #70db70;
    font-size: 10px;
    font-weight: bold;
}

.city-chat-sportsbar-beer-menu__price {
    color: #ffd75a;
    font-size: 10px;
    font-weight: bold;
}

.city-chat-sportsbar-beer-menu__price.menu-green-goob-amount::before {
    width: 11px;
    height: 11px;
    margin-right: 2px;
    vertical-align: -2px;
}

.city-chat-sportsbar-beer-menu__buy {
    min-width: 94px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#ef1717, #bd0000);
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
}

.city-chat-sportsbar-beer-menu__buy:hover:not(:disabled) {
    background: linear-gradient(#ff2929, #d00000);
}

.city-chat-sportsbar-beer-menu__buy:disabled {
    opacity: 0.65;
    cursor: wait;
}

.city-chat-sportsbar-beer-menu__feedback {
    min-height: 12px;
    color: #ffb4ad;
    font-size: 9px;
    line-height: 1.25;
    text-align: center;
}

.city-chat-sportsbar-beer-menu__feedback.is-success {
    color: #7ee787;
}

.city-chat-sportsbar-beer-button.city-chat-lounge-drink-button {
    left: 15.6%;
    top: 65%;
}

.city-chat-sportsbar-beer-menu.city-chat-lounge-drink-menu {
    left: 15.6%;
    top: 48%;
    border-color: #d4a24a;
    background: linear-gradient(155deg, rgba(58, 16, 12, 0.98), rgba(12, 7, 6, 0.98));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), 0 0 14px rgba(212, 162, 74, 0.22);
}

.city-chat-sportsbar-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 13% 10%, rgba(255, 164, 55, 0.2) 0%, transparent 22%),
        radial-gradient(ellipse at 50% 13%, rgba(255, 130, 35, 0.18) 0%, transparent 27%),
        radial-gradient(ellipse at 88% 11%, rgba(255, 177, 65, 0.17) 0%, transparent 21%),
        radial-gradient(ellipse at 52% 51%, rgba(255, 105, 24, 0.13) 0%, transparent 39%),
        linear-gradient(to bottom, rgba(39, 8, 2, 0.12), rgba(18, 5, 2, 0.03) 48%, rgba(10, 3, 1, 0.2)),
        radial-gradient(ellipse at center, transparent 43%, rgba(0, 0, 0, 0.42) 100%);
    mix-blend-mode: screen;
    animation: cityChatSportsBarWarmGlow 5.6s ease-in-out infinite alternate;
}

.city-chat-sportsbar-effects::after {
    content: '';
    position: absolute;
    left: 17%;
    top: 47%;
    width: 69%;
    height: 21%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 121, 27, 0.13), transparent 68%);
    filter: blur(12px);
    opacity: 0.72;
    animation: cityChatSportsBarHaze 7s ease-in-out infinite alternate;
}

.city-chat-sportsbar-tv {
    position: absolute;
    /* Match the picture areas in the 1536 × 1024 Sports Bar artwork. */
    top: 30%;
    height: 9.2%;
    overflow: hidden;
    border-radius: 2px;
    opacity: 0.58;
    mix-blend-mode: screen;
    filter: saturate(1.65) contrast(1.18);
    animation: cityChatSportsBarTvFlicker 2.4s steps(1, end) infinite;
}

.city-chat-sportsbar-tv::after {
    content: '';
    position: absolute;
    inset: -25%;
    background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.38) 47%, transparent 61%);
    transform: translateX(-70%);
    animation: cityChatSportsBarTvScan 3.7s linear infinite;
}

.city-chat-sportsbar-tv--basketball {
    left: 34.4%;
    width: 9.7%;
    background: radial-gradient(circle at 58% 45%, rgba(255, 224, 105, 0.8), rgba(255, 76, 18, 0.28) 48%, transparent 78%);
    box-shadow: 0 0 18px 6px rgba(255, 83, 22, 0.42);
}

.city-chat-sportsbar-tv--football {
    left: 45.3%;
    width: 10.8%;
    background: radial-gradient(circle at 48% 48%, rgba(119, 255, 153, 0.72), rgba(19, 183, 97, 0.3) 50%, transparent 78%);
    box-shadow: 0 0 19px 7px rgba(48, 221, 116, 0.34);
    animation-delay: -0.8s;
}

.city-chat-sportsbar-tv--racing {
    left: 57.4%;
    width: 9.1%;
    background: radial-gradient(circle at 42% 48%, rgba(121, 199, 255, 0.78), rgba(36, 88, 255, 0.28) 51%, transparent 79%);
    box-shadow: 0 0 19px 7px rgba(55, 128, 255, 0.38);
    animation-delay: -1.55s;
}

.city-chat-beer-puddle {
    --puddle-rotation: 0deg;
    position: absolute;
    width: 74px;
    height: 18px;
    border-radius: 50%;
    transform: rotate(var(--puddle-rotation));
    background:
        radial-gradient(ellipse at 38% 35%, rgba(255, 218, 129, 0.36) 0 8%, transparent 12%),
        radial-gradient(ellipse at 50% 55%, rgba(114, 55, 8, 0.7), rgba(48, 23, 4, 0.62) 55%, rgba(255, 160, 46, 0.27) 72%, transparent 78%);
    box-shadow:
        inset 0 1px 2px rgba(255, 211, 115, 0.38),
        0 1px 3px rgba(0, 0, 0, 0.65);
    opacity: 0.68;
    filter: blur(0.25px);
    animation: cityChatBeerPuddleShimmer 4.2s ease-in-out infinite alternate;
}

.city-chat-beer-puddle::after {
    content: '';
    position: absolute;
    right: -13px;
    top: 7px;
    width: 10px;
    height: 5px;
    border-radius: 50%;
    background: rgba(109, 54, 9, 0.68);
    box-shadow: -78px 2px 0 -1px rgba(117, 57, 8, 0.54);
}

.city-chat-beer-puddle--one {
    left: 31%;
    top: 76%;
    --puddle-rotation: -7deg;
}

.city-chat-beer-puddle--two {
    left: 57%;
    top: 84%;
    width: 92px;
    --puddle-rotation: 5deg;
    animation-delay: -1.8s;
}

.city-chat-beer-puddle--three {
    left: 76%;
    top: 72%;
    width: 57px;
    height: 14px;
    --puddle-rotation: -4deg;
    animation-delay: -3s;
}

.city-chat-sportsbar-ashtray {
    position: absolute;
    left: 32.5%;
    top: 54.8%;
    width: 44px;
    height: 14px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: 2px solid rgba(184, 151, 112, 0.88);
    border-radius: 50%;
    z-index: 5;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(31, 27, 24, 0.95) 0 42%, transparent 45%),
        linear-gradient(to bottom, #a98c6c, #49382b 68%, #1e1712);
    box-shadow:
        inset 0 1px 2px rgba(255, 225, 187, 0.55),
        0 2px 3px rgba(0, 0, 0, 0.72),
        0 0 5px rgba(255, 146, 65, 0.12);
}

.city-chat-sportsbar-ashtray::before {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 3px;
    height: 5px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 50%, #777 0 1px, transparent 1.5px),
        radial-gradient(circle at 61% 45%, #a0a0a0 0 1px, transparent 1.5px),
        rgba(17, 15, 14, 0.9);
}

.city-chat-sportsbar-cigarette {
    position: absolute;
    left: 8px;
    top: -6px;
    width: 30px;
    height: 8px;
    transform: rotate(-7deg);
    transform-origin: center;
    z-index: 3;
    background: url('images/Cigarette.png') center / contain no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

.city-chat-cigarette-smoke {
    position: absolute;
    left: 34px;
    top: -15px;
    width: 9px;
    height: 20px;
    z-index: 4;
    opacity: 0;
    border-left: 1.5px solid rgba(225, 225, 218, 0.62);
    border-radius: 50%;
    filter: blur(0.45px);
    animation: cityChatCigaretteSmoke 3s ease-out infinite;
}

.city-chat-cigarette-smoke--two {
    left: 36px;
    animation-delay: -1s;
}

.city-chat-cigarette-smoke--three {
    left: 33px;
    animation-delay: -2s;
}

@keyframes cityChatCigaretteSmoke {
    0% {
        opacity: 0;
        transform: translate(0, 5px) scale(0.55) rotate(-8deg);
    }
    24% {
        opacity: 0.48;
    }
    62% {
        opacity: 0.31;
    }
    100% {
        opacity: 0;
        transform: translate(8px, -27px) scale(1.3) rotate(22deg);
    }
}

@keyframes cityChatSportsBarWarmGlow {
    from { opacity: 0.7; filter: brightness(0.92) saturate(0.94); }
    to { opacity: 1; filter: brightness(1.1) saturate(1.12); }
}

@keyframes cityChatSportsBarHaze {
    from { opacity: 0.42; transform: translateX(-2%) scale(0.96); }
    to { opacity: 0.78; transform: translateX(2%) scale(1.04); }
}

@keyframes cityChatSportsBarTvFlicker {
    0%, 100% { opacity: 0.48; filter: brightness(0.92) saturate(1.5); }
    11% { opacity: 0.72; filter: brightness(1.28) saturate(1.8); }
    13% { opacity: 0.43; }
    37% { opacity: 0.64; filter: brightness(1.08) hue-rotate(5deg); }
    61% { opacity: 0.53; filter: brightness(0.88) hue-rotate(-7deg); }
    79% { opacity: 0.7; filter: brightness(1.22) saturate(1.9); }
}

@keyframes cityChatSportsBarTvScan {
    0%, 22% { transform: translateX(-75%); opacity: 0; }
    35% { opacity: 0.7; }
    64%, 100% { transform: translateX(75%); opacity: 0; }
}

@keyframes cityChatBeerPuddleShimmer {
    from { opacity: 0.51; filter: brightness(0.82) blur(0.25px); }
    to { opacity: 0.78; filter: brightness(1.22) blur(0.1px); }
}

.city-chat-donator-lounge-effects {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}

.city-chat-stage[data-city-location="donator_lounge"] .city-chat-donator-lounge-effects {
    display: block;
}

.city-chat-lounge-window-rain {
    position: absolute;
    left: 30.5%;
    top: 10.5%;
    right: auto;
    bottom: auto;
    width: 63.5%;
    height: 49%;
    display: block;
    z-index: 1;
    opacity: 0.72;
    mix-blend-mode: screen;
    filter: brightness(0.82) saturate(0.78);
}

.city-chat-lounge-wall-lamp {
    position: absolute;
    top: 37.5%;
    width: 92px;
    height: 112px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 3;
    background: radial-gradient(
        ellipse,
        rgba(255, 232, 166, 0.42) 0%,
        rgba(255, 178, 70, 0.24) 20%,
        rgba(255, 111, 30, 0.1) 43%,
        transparent 72%
    );
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: cityChatLoungeWallLampFlicker 3.8s ease-in-out infinite;
}

.city-chat-lounge-wall-lamp::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 25px;
    transform: translate(-50%, -50%);
    border-radius: 45%;
    background: rgba(255, 235, 173, 0.65);
    box-shadow: 0 0 12px 5px rgba(255, 170, 62, 0.42);
}

.city-chat-lounge-wall-lamp--left {
    left: 27.7%;
}

.city-chat-lounge-wall-lamp--right {
    left: 96%;
    animation-delay: -1.75s;
}

.city-chat-donator-lounge-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 56% 12%, rgba(255, 193, 88, 0.31) 0%, rgba(255, 126, 24, 0.13) 20%, transparent 42%),
        radial-gradient(ellipse at 27.5% 38%, rgba(255, 179, 73, 0.18), transparent 13%),
        radial-gradient(ellipse at 96% 38%, rgba(255, 179, 73, 0.17), transparent 13%),
        radial-gradient(ellipse at 71% 69%, rgba(255, 157, 58, 0.12), transparent 16%),
        linear-gradient(to bottom, rgba(83, 35, 8, 0.08), transparent 51%, rgba(20, 8, 3, 0.16)),
        radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.29) 100%);
    animation: cityChatDonatorLoungeGlow 5.8s ease-in-out infinite alternate;
}

.city-chat-donator-lounge-effects::after {
    content: '';
    position: absolute;
    left: 35%;
    top: 7%;
    width: 43%;
    height: 79%;
    background: linear-gradient(
        to bottom,
        rgba(255, 221, 151, 0.19),
        rgba(255, 177, 70, 0.075) 44%,
        rgba(255, 139, 35, 0.025) 75%,
        transparent
    );
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    filter: blur(8px);
    mix-blend-mode: screen;
    opacity: 0.75;
    animation: cityChatChandelierLightCone 4.6s ease-in-out infinite alternate;
}

.city-chat-chandelier-aura {
    position: absolute;
    left: 56.2%;
    top: 10%;
    width: 25%;
    height: 25%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 236, 179, 0.3), rgba(255, 163, 48, 0.13) 34%, transparent 70%);
    filter: blur(5px);
    mix-blend-mode: screen;
    animation: cityChatChandelierAura 3.4s ease-in-out infinite alternate;
}

.city-chat-chandelier-crystal {
    position: absolute;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #fff4ca;
    box-shadow:
        0 0 4px 1px rgba(255, 245, 205, 0.95),
        0 0 12px 4px rgba(255, 177, 62, 0.75);
    opacity: 0;
    animation: cityChatChandelierCrystalSparkle 2.8s ease-in-out infinite;
}

.city-chat-chandelier-crystal::before,
.city-chat-chandelier-crystal::after {
    display: none;
}

.city-chat-chandelier-crystal--one {
    left: 49.5%;
    top: 4.5%;
}

.city-chat-chandelier-crystal--two {
    left: 53.2%;
    top: 9%;
    animation-delay: -0.55s;
}

.city-chat-chandelier-crystal--three {
    left: 57.2%;
    top: 3.8%;
    animation-delay: -1.1s;
}

.city-chat-chandelier-crystal--four {
    left: 61%;
    top: 8%;
    animation-delay: -1.65s;
}

.city-chat-chandelier-crystal--five {
    left: 64.4%;
    top: 5%;
    animation-delay: -2.2s;
}

.city-chat-chandelier-crystal--six {
    left: 56.3%;
    top: 15.7%;
    animation-delay: -2.55s;
}

@keyframes cityChatLoungeWallLampFlicker {
    0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.98); }
    18% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.02); }
    37% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.99); }
    54% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.045); }
    69% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.01); }
    84% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes cityChatDonatorLoungeGlow {
    from { opacity: 0.68; filter: brightness(0.91) saturate(0.94); }
    to { opacity: 1; filter: brightness(1.09) saturate(1.13); }
}

@keyframes cityChatChandelierLightCone {
    from { opacity: 0.44; transform: scaleX(0.94); }
    to { opacity: 0.82; transform: scaleX(1.04); }
}

@keyframes cityChatChandelierAura {
    from { opacity: 0.52; transform: translate(-50%, -50%) scale(0.88); }
    to { opacity: 0.94; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes cityChatChandelierCrystalSparkle {
    0%, 22%, 54%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(45deg) scale(0.35);
    }
    34% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
    }
    43% {
        opacity: 0.48;
        transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
    }
}

.city-chat-family-house-effects {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}

.city-chat-stage[data-city-location="family_house"] .city-chat-family-house-effects {
    display: block;
}

.city-chat-family-stats {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 7;
    max-width: calc(100% - 200px);
    min-height: 36px;
    box-sizing: border-box;
    padding: 7px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #ddd;
    background: rgba(8, 8, 8, 0.82);
    border: 1px solid rgba(211, 51, 40, 0.72);
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.72);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.city-chat-family-stats[hidden] {
    display: none;
}

.city-chat-family-stats__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.city-chat-family-stats__item img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.city-chat-family-stats__item--goobs {
    color: #ffcf40;
}

.city-chat-family-stats__item--blue {
    color: #55aaff;
}

.city-chat-family-stats__separator {
    color: #777;
    font-weight: bold;
}

.city-chat-family-income {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    min-width: 158px;
    box-sizing: border-box;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: #eee;
    background: linear-gradient(145deg, rgba(12, 30, 14, 0.94), rgba(7, 8, 7, 0.92));
    border: 1px solid rgba(94, 202, 91, 0.68);
    border-radius: 7px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.68), inset 0 0 18px rgba(69, 160, 69, 0.12);
    pointer-events: none;
}

.city-chat-family-income[hidden],
.city-chat-stage:not([data-city-location="family_house"]) .city-chat-family-income {
    display: none;
}

.city-chat-family-income__label {
    color: #a6cba5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
    line-height: 1;
    text-transform: uppercase;
}

.city-chat-family-income__value {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #83e77f;
    font-size: 12px;
    line-height: 1;
}

.city-chat-family-income__value img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.city-chat-family-income__value strong {
    color: #b8f7ad;
    font-size: 17px;
    line-height: 1;
    text-shadow: 0 0 7px rgba(97, 226, 91, 0.36);
}

.city-chat-family-contributors {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 9;
    width: 290px;
    box-sizing: border-box;
    padding: 9px;
    color: #e9e2dc;
    background: linear-gradient(145deg, rgba(28, 13, 10, 0.93), rgba(8, 7, 7, 0.9));
    border: 1px solid rgba(211, 74, 61, 0.62);
    border-radius: 7px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.68), inset 0 0 18px rgba(128, 37, 28, 0.12);
    pointer-events: none;
}

.city-chat-family-contributors[hidden],
.city-chat-stage:not([data-city-location="family_house"]) .city-chat-family-contributors {
    display: none;
}

.city-chat-family-contributors__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.city-chat-family-contributors__header strong {
    color: #ffd36a;
    font-size: 13px;
    line-height: 1.2;
}

.city-chat-family-contributors__header span {
    color: #9d918b;
    font-size: 9px;
    white-space: nowrap;
}

.city-chat-family-contributors__columns,
.city-chat-family-contributors__row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 90px 58px;
    align-items: center;
    column-gap: 5px;
}

.city-chat-family-contributors__columns {
    padding: 0 5px 4px;
    color: #8f8580;
    font-size: 9px;
    line-height: 1;
}

.city-chat-family-contributors__columns > span:first-child {
    grid-column: 1 / 3;
}

.city-chat-family-contributors__columns > span:not(:first-child) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}

.city-chat-family-contributors__columns img {
    width: 11px;
    height: 11px;
    object-fit: contain;
}

.city-chat-family-contributors__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    list-style: none;
}

.city-chat-family-contributors__row {
    min-height: 25px;
    padding: 2px 5px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    font-size: 10px;
}

.city-chat-family-contributors__rank {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
}

.city-chat-family-contributors__row:nth-child(1) .city-chat-family-contributors__rank {
    color: #3d2600;
    background: #f1c84b;
    box-shadow: 0 0 7px rgba(241, 200, 75, 0.55);
}

.city-chat-family-contributors__row:nth-child(2) .city-chat-family-contributors__rank {
    color: #343434;
    background: #c9ced3;
}

.city-chat-family-contributors__row:nth-child(3) .city-chat-family-contributors__rank {
    color: #32190c;
    background: #bc7a4c;
}

.city-chat-family-contributors__name {
    overflow: hidden;
    color: #f1e8e2;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-chat-family-contributors__amount {
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-chat-family-contributors__amount--goobs {
    color: #ffd05a;
}

.city-chat-family-contributors__amount--blue {
    color: #64b5ff;
}

.city-chat-family-contributors__empty {
    padding: 10px 6px 8px;
    color: #9f9691;
    font-size: 10px;
    text-align: center;
}

.city-chat-stage:not([data-city-location="market"]) .city-chat-market-summary {
    display: none;
}

.city-chat-market-summary {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 18;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    color: #e9edf0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 32%),
        linear-gradient(90deg, rgba(10, 17, 22, 0.98), rgba(20, 22, 24, 0.97), rgba(7, 13, 18, 0.98));
    border: 0;
    border-bottom: 1px solid rgba(213, 178, 91, 0.84);
    border-radius: 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.68), inset 0 -1px rgba(255, 255, 255, 0.05);
}

.city-chat-market-summary[hidden] {
    display: none;
}

.city-chat-market-summary__totals {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-width: 280px;
    flex: 0 0 280px;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
}

.city-chat-market-summary__totals strong {
    color: #e7c66f;
    font-size: 16px;
}

#cityChatMarketTotalValue.menu-green-goob-amount::before {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.city-chat-market-summary__top {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.city-chat-market-summary__heading {
    color: #d8bd78;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.city-chat-market-summary__list {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.city-chat-market-summary__listing {
    min-width: 0;
    margin: 0;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(120, 153, 166, 0.035));
    border: 1px solid rgba(193, 205, 210, 0.24);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.city-chat-market-summary__listing:hover,
.city-chat-market-summary__listing:focus-visible {
    background: linear-gradient(135deg, rgba(218, 182, 94, 0.18), rgba(94, 139, 157, 0.11));
    border-color: rgba(226, 194, 116, 0.72);
    outline: none;
}

.city-chat-market-summary__listing > img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    image-rendering: auto;
}

.city-chat-market-summary__listing-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.city-chat-market-summary__listing-details strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffe9ef;
    font-size: 13px;
}

.city-chat-market-summary__listing-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.city-chat-market-summary__price {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffd45e;
    font-size: 11px;
}

.city-chat-market-summary__price.menu-green-goob-amount::before {
    width: 11px;
    height: 11px;
    margin-right: 2px;
    vertical-align: -2px;
}

.city-chat-market-summary__aura {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.city-chat-market-summary__aura img.aura-teken {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    object-fit: contain;
}

.city-chat-market-summary__empty {
    grid-column: 1 / -1;
    color: #bdaeb3;
    font-size: 10px;
    text-align: center;
}

.city-chat-market-effects {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}

.city-chat-stage[data-city-location="market"] .city-chat-market-effects {
    display: block;
}

.city-chat-market-sign {
    position: absolute;
    left: 50%;
    top: 21.5%;
    z-index: 6;
    min-width: 148px;
    padding: 8px 18px 7px;
    transform: translateX(-50%);
    color: #f2d58b;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 27%),
        linear-gradient(#25292b, #101416 70%, #080a0b);
    border: 1px solid #a88942;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 194, 0.22),
        inset 0 -1px rgba(0, 0, 0, 0.65),
        0 5px 12px rgba(0, 0, 0, 0.68),
        0 0 15px rgba(205, 165, 72, 0.12);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 #000, 0 0 9px rgba(236, 198, 105, 0.46);
    animation: cityChatMarketSignGlow 3.8s ease-in-out infinite;
}

.city-chat-market-sign::before,
.city-chat-market-sign::after {
    content: '';
    position: absolute;
    top: auto;
    bottom: 100%;
    width: 3px;
    height: 70px;
    background: linear-gradient(90deg, #25292c, #aab0b2 48%, #353a3d);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55), 0 0 5px rgba(191, 202, 207, 0.16);
}

.city-chat-market-sign::before {
    left: 18px;
}

.city-chat-market-sign::after {
    right: 18px;
}

.city-chat-market-windows {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 205px;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(69, 102, 113, 0.035);
    border-top: 7px solid #111719;
    border-bottom: 13px solid #101416;
    box-shadow:
        inset 0 2px rgba(188, 203, 207, 0.16),
        inset 0 -2px rgba(178, 150, 87, 0.22),
        0 12px 22px rgba(0, 0, 0, 0.52);
}

.city-chat-market-window-rain,
.city-chat-market-window-glass {
    position: absolute;
    inset: 0;
}

.city-chat-market-window-rain {
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.62;
    filter: brightness(0.92) saturate(0.72);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 94%, transparent 100%);
}

.city-chat-market-window-glass {
    z-index: 2;
    background-image:
        linear-gradient(110deg, transparent 0 10%, rgba(214, 239, 246, 0.09) 11%, transparent 13% 34%, rgba(206, 232, 239, 0.055) 35%, transparent 38%),
        repeating-linear-gradient(90deg, #0d1316 0 7px, rgba(36, 50, 56, 0.88) 7px 9px, transparent 9px 148px, rgba(10, 15, 18, 0.96) 148px 154px);
    box-shadow:
        inset 0 0 38px rgba(107, 164, 183, 0.1),
        inset 0 -34px 54px rgba(0, 0, 0, 0.26);
}

.city-chat-market-window-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(222, 241, 246, 0.07), transparent 18% 76%, rgba(192, 158, 83, 0.055)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 4% 96%, rgba(255, 255, 255, 0.025));
}

.city-chat-market-window-glass::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 48%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 222, 229, 0.2) 18%, rgba(196, 222, 229, 0.08) 72%, transparent);
    box-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

@keyframes cityChatMarketSignGlow {
    0%, 100% { filter: brightness(0.94); }
    50% { filter: brightness(1.1); }
}

.city-chat-family-interior {
    position: absolute;
    inset: 0;
    display: none;
}

.city-chat-stage[data-family-interior="houtenhut"] .city-chat-family-interior--houtenhut,
.city-chat-stage[data-family-interior="luxehuuis"] .city-chat-family-interior--luxehuuis,
.city-chat-stage[data-family-interior="bikergang"] .city-chat-family-interior--bikergang {
    display: block;
}

.city-chat-family-interior::before,
.city-chat-family-interior::after {
    content: '';
    position: absolute;
    inset: 0;
}

.city-chat-family-interior--houtenhut::before {
    background:
        radial-gradient(ellipse at 14% 46%, rgba(255, 176, 62, 0.22) 0%, transparent 16%),
        radial-gradient(ellipse at 42% 56%, rgba(255, 120, 28, 0.28) 0%, rgba(255, 80, 10, 0.1) 18%, transparent 38%),
        radial-gradient(ellipse at 42% 74%, rgba(255, 106, 22, 0.16), transparent 32%),
        linear-gradient(to bottom, rgba(8, 3, 1, 0.38), transparent 26%, transparent 58%, rgba(6, 2, 1, 0.22));
    mix-blend-mode: screen;
    animation: cityChatHutCabinGlow 3.4s ease-in-out infinite alternate;
}

.city-chat-family-interior--houtenhut::after {
    background: radial-gradient(ellipse at center, transparent 46%, rgba(0, 0, 0, 0.46) 100%);
}

.city-chat-hut-lantern {
    position: absolute;
    left: 13.8%;
    top: 46.5%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255, 214, 120, 0.46) 0%,
        rgba(255, 154, 42, 0.22) 28%,
        rgba(255, 110, 20, 0.08) 52%,
        transparent 72%
    );
    filter: blur(1.5px);
    mix-blend-mode: screen;
    animation: cityChatHutLanternFlicker 4.1s ease-in-out infinite;
}

.city-chat-hut-fire {
    position: absolute;
    left: 42%;
    top: 56%;
    width: 210px;
    height: 210px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255, 196, 92, 0.42) 0%,
        rgba(255, 102, 18, 0.26) 24%,
        rgba(255, 62, 8, 0.1) 46%,
        transparent 70%
    );
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: cityChatHutFireFlicker 1.15s steps(2, end) infinite;
}

.city-chat-hut-heat {
    position: absolute;
    left: 42%;
    top: 44%;
    width: 88px;
    height: 70px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 170, 70, 0.16), transparent 70%);
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: cityChatHutHeatHaze 2.8s ease-in-out infinite alternate;
}

.city-chat-hut-embers {
    position: absolute;
    left: 42%;
    top: 53%;
    width: 42px;
    height: 88px;
    transform: translate(-50%, -100%);
}

.city-chat-hut-embers > span {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffd08a;
    box-shadow: 0 0 5px 2px rgba(255, 122, 28, 0.85);
    animation: cityChatHutEmber 2.6s ease-out infinite;
}

.city-chat-hut-embers > span:nth-child(2) { left: 28%; animation-delay: -0.4s; animation-duration: 3.1s; }
.city-chat-hut-embers > span:nth-child(3) { left: 72%; animation-delay: -1.1s; animation-duration: 2.2s; }
.city-chat-hut-embers > span:nth-child(4) { left: 40%; animation-delay: -1.7s; animation-duration: 2.9s; }
.city-chat-hut-embers > span:nth-child(5) { left: 62%; animation-delay: -2.2s; animation-duration: 2.4s; }
.city-chat-hut-embers > span:nth-child(6) { left: 18%; animation-delay: -0.8s; animation-duration: 3.4s; }

.city-chat-family-interior--luxehuuis::before {
    background:
        radial-gradient(ellipse at 50% 14%, rgba(255, 214, 120, 0.28) 0%, rgba(255, 154, 48, 0.12) 18%, transparent 40%),
        radial-gradient(ellipse at 12% 42%, rgba(255, 186, 88, 0.16), transparent 12%),
        radial-gradient(ellipse at 78% 52%, rgba(180, 40, 28, 0.14), transparent 14%),
        radial-gradient(ellipse at 50% 68%, rgba(255, 176, 70, 0.1), transparent 22%),
        linear-gradient(to bottom, rgba(12, 6, 3, 0.22), transparent 30%, transparent 70%, rgba(8, 3, 2, 0.18));
    mix-blend-mode: screen;
    animation: cityChatLuxeRoomGlow 5.4s ease-in-out infinite alternate;
}

.city-chat-family-interior--luxehuuis::after {
    background: radial-gradient(ellipse at 50% 42%, transparent 48%, rgba(0, 0, 0, 0.38) 100%);
}

.city-chat-luxe-chandelier {
    position: absolute;
    left: 50%;
    top: 13%;
    width: 28%;
    height: 28%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 236, 179, 0.34), rgba(255, 163, 48, 0.14) 34%, transparent 70%);
    filter: blur(5px);
    mix-blend-mode: screen;
    animation: cityChatChandelierAura 3.4s ease-in-out infinite alternate;
}

.city-chat-luxe-cone {
    position: absolute;
    left: 28%;
    top: 12%;
    width: 44%;
    height: 72%;
    background: linear-gradient(
        to bottom,
        rgba(255, 221, 151, 0.2),
        rgba(255, 177, 70, 0.08) 44%,
        rgba(255, 139, 35, 0.03) 75%,
        transparent
    );
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    filter: blur(8px);
    mix-blend-mode: screen;
    opacity: 0.78;
    animation: cityChatChandelierLightCone 4.6s ease-in-out infinite alternate;
}

.city-chat-luxe-crystal {
    position: absolute;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #fff4ca;
    box-shadow:
        0 0 4px 1px rgba(255, 245, 205, 0.95),
        0 0 12px 4px rgba(255, 177, 62, 0.75);
    opacity: 0;
    animation: cityChatChandelierCrystalSparkle 2.8s ease-in-out infinite;
}

.city-chat-luxe-crystal--one { left: 45.5%; top: 7.5%; }
.city-chat-luxe-crystal--two { left: 50%; top: 5.2%; animation-delay: -0.5s; }
.city-chat-luxe-crystal--three { left: 54.5%; top: 8%; animation-delay: -1.1s; }
.city-chat-luxe-crystal--four { left: 48.2%; top: 12.4%; animation-delay: -1.7s; }
.city-chat-luxe-crystal--five { left: 52.8%; top: 11.6%; animation-delay: -2.2s; }

.city-chat-luxe-sconce {
    position: absolute;
    left: 11.5%;
    top: 40%;
    width: 92px;
    height: 110px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 214, 130, 0.36) 0%, rgba(255, 150, 50, 0.14) 36%, transparent 70%);
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: cityChatLoungeWallLampFlicker 3.8s ease-in-out infinite;
}

.city-chat-luxe-fire {
    position: absolute;
    left: 92.4%;
    bottom: 32.5%;
    width: 54px;
    height: 40px;
    transform: translateX(-50%);
    pointer-events: none;
}

.city-chat-luxe-fire__glow {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 64px;
    height: 38px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 80%,
        rgba(255, 188, 72, 0.95) 0%,
        rgba(255, 96, 16, 0.62) 38%,
        rgba(255, 42, 0, 0.22) 62%,
        transparent 78%
    );
    filter: blur(1.5px);
    mix-blend-mode: screen;
    animation: cityChatHutFireFlicker 1.15s steps(2, end) infinite;
}

.city-chat-luxe-fire__flame {
    position: absolute;
    bottom: 2px;
    border-radius: 50% 50% 28% 28%;
    background: linear-gradient(to top, rgba(255, 78, 0, 1), rgba(255, 186, 42, 0.92), rgba(255, 236, 150, 0.35), transparent);
    filter: blur(0.4px);
    mix-blend-mode: screen;
    transform-origin: 50% 100%;
}

.city-chat-luxe-fire__flame--one {
    left: 22%;
    width: 11px;
    height: 18px;
    animation: cityChatLuxeFireFlame 0.72s ease-in-out infinite alternate;
}

.city-chat-luxe-fire__flame--two {
    left: 38%;
    width: 14px;
    height: 26px;
    animation: cityChatLuxeFireFlame 0.58s ease-in-out infinite alternate-reverse;
}

.city-chat-luxe-fire__flame--three {
    left: 56%;
    width: 12px;
    height: 20px;
    animation: cityChatLuxeFireFlame 0.8s ease-in-out infinite alternate;
}

.city-chat-luxe-candle {
    position: absolute;
    left: 50%;
    top: 61%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 140, 0.55), rgba(255, 150, 40, 0.18) 45%, transparent 70%);
    mix-blend-mode: screen;
    animation: cityChatHutLanternFlicker 2.6s ease-in-out infinite;
}

.city-chat-luxe-windows {
    position: absolute;
    left: 27%;
    top: 16%;
    width: 48%;
    height: 38%;
    background: transparent;
    box-shadow:
        42px 38px 5px 0 rgba(255, 168, 62, 0.42),
        78px 52px 5px 0 rgba(255, 176, 70, 0.38),
        118px 34px 6px 0 rgba(255, 158, 48, 0.44),
        164px 48px 5px 0 rgba(255, 170, 58, 0.4),
        208px 30px 6px 0 rgba(255, 162, 52, 0.46),
        252px 54px 5px 0 rgba(255, 176, 70, 0.36),
        298px 40px 6px 0 rgba(255, 154, 46, 0.42),
        336px 58px 5px 0 rgba(255, 168, 60, 0.34),
        96px 96px 5px 0 rgba(255, 150, 48, 0.28),
        210px 108px 5px 0 rgba(255, 162, 52, 0.3),
        280px 92px 5px 0 rgba(255, 146, 42, 0.28);
    animation: cityChatWindowFlicker 5.4s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.72;
}

.city-chat-luxe-dust > span {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 232, 186, 0.72);
    box-shadow: 0 0 4px 1px rgba(255, 200, 110, 0.45);
    animation: cityChatLuxeDust 9s linear infinite;
}

.city-chat-luxe-dust > span:nth-child(1) { left: 44%; top: 22%; animation-duration: 8.2s; }
.city-chat-luxe-dust > span:nth-child(2) { left: 51%; top: 18%; animation-delay: -2s; animation-duration: 10.4s; }
.city-chat-luxe-dust > span:nth-child(3) { left: 57%; top: 26%; animation-delay: -4.2s; animation-duration: 7.6s; }
.city-chat-luxe-dust > span:nth-child(4) { left: 47%; top: 34%; animation-delay: -6s; animation-duration: 11s; }
.city-chat-luxe-dust > span:nth-child(5) { left: 54%; top: 30%; animation-delay: -1.4s; animation-duration: 8.8s; }

.city-chat-family-interior--bikergang::before {
    background:
        radial-gradient(ellipse at 18% 22%, rgba(255, 196, 92, 0.2) 0%, transparent 16%),
        radial-gradient(ellipse at 63% 18%, rgba(255, 186, 78, 0.2) 0%, transparent 16%),
        radial-gradient(ellipse at 87% 20%, rgba(255, 176, 70, 0.18) 0%, transparent 15%),
        linear-gradient(to bottom, rgba(6, 4, 3, 0.34), transparent 24%, transparent 62%, rgba(4, 2, 2, 0.2));
    mix-blend-mode: screen;
    animation: cityChatBikerShopGlow 4.8s ease-in-out infinite alternate;
}

.city-chat-family-interior--bikergang::after {
    background: radial-gradient(ellipse at 50% 48%, transparent 44%, rgba(0, 0, 0, 0.42) 100%);
}

.city-chat-biker-lamp {
    position: absolute;
    top: 16%;
    width: 18%;
    height: 58%;
    background: linear-gradient(
        to bottom,
        rgba(255, 214, 130, 0.28),
        rgba(255, 168, 58, 0.1) 36%,
        rgba(255, 130, 30, 0.03) 70%,
        transparent
    );
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    filter: blur(7px);
    mix-blend-mode: screen;
    animation: cityChatBikerLampCone 3.6s ease-in-out infinite alternate;
}

.city-chat-biker-lamp--left { left: 10%; }
.city-chat-biker-lamp--mid { left: 54%; animation-delay: -1.2s; }
.city-chat-biker-lamp--right { left: 78%; animation-delay: -2.4s; }

.city-chat-biker-floor {
    position: absolute;
    top: 68%;
    width: 22%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 176, 70, 0.16), transparent 68%);
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: cityChatBikerFloorPool 4.2s ease-in-out infinite alternate;
}

.city-chat-biker-floor--left { left: 9%; }
.city-chat-biker-floor--mid { left: 52%; animation-delay: -1.4s; }
.city-chat-biker-floor--right { left: 76%; animation-delay: -2.6s; }

.city-chat-biker-smoke {
    position: absolute;
    width: 10px;
    height: 22px;
    opacity: 0;
    border-left: 1.5px solid rgba(225, 225, 218, 0.5);
    border-radius: 50%;
    filter: blur(0.5px);
    animation: cityChatCigaretteSmoke 3.4s ease-out infinite;
}

.city-chat-biker-smoke--one { left: 48%; top: 58%; }
.city-chat-biker-smoke--two { left: 50%; top: 57%; animation-delay: -1.1s; }
.city-chat-biker-smoke--three { left: 74%; top: 68%; animation-delay: -1.8s; }
.city-chat-biker-smoke--four { left: 76%; top: 67%; animation-delay: -2.6s; }

/* Family House light sources aligned to the artwork itself. */
.city-chat-hut-lantern {
    left: 24%;
    top: 45.5%;
    width: 126px;
    height: 126px;
}

.city-chat-hut-fire {
    left: 44.6%;
    top: 55.5%;
    width: 150px;
    height: 150px;
}

.city-chat-hut-heat {
    left: 44.6%;
    top: 48%;
    width: 64px;
    height: 56px;
}

.city-chat-hut-embers {
    left: 44.6%;
    top: 55%;
}

.city-chat-family-interior--luxehuuis::before,
.city-chat-family-interior--luxehuuis::after {
    background: none;
    animation: none;
}

.city-chat-luxe-window-rain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    opacity: 0.72;
    mix-blend-mode: screen;
    filter: brightness(0.78) saturate(0.72);
    -webkit-mask: linear-gradient(#000 0 0) 50% 26% / 53% 39% no-repeat;
    mask: linear-gradient(#000 0 0) 50% 26% / 53% 39% no-repeat;
}

.city-chat-luxe-chandelier {
    left: 52.5%;
    top: 12.5%;
    width: 205px;
    height: 150px;
    background: radial-gradient(
        ellipse,
        rgba(255, 246, 206, 0.52) 0%,
        rgba(255, 190, 78, 0.24) 32%,
        rgba(255, 132, 38, 0.08) 55%,
        transparent 72%
    );
    filter: blur(3px);
}

.city-chat-luxe-crystal {
    width: 5px;
    height: 5px;
    background: #fff8d6;
    box-shadow:
        0 0 5px 2px rgba(255, 250, 220, 0.95),
        0 0 14px 5px rgba(255, 176, 56, 0.82);
}

.city-chat-luxe-crystal--one { left: 47%; top: 8.6%; }
.city-chat-luxe-crystal--two { left: 50.7%; top: 11.4%; animation-delay: -0.45s; }
.city-chat-luxe-crystal--three { left: 53.5%; top: 7.5%; animation-delay: -0.95s; }
.city-chat-luxe-crystal--four { left: 56.6%; top: 10.8%; animation-delay: -1.45s; }
.city-chat-luxe-crystal--five { left: 52.5%; top: 18.4%; animation-delay: -1.95s; }
.city-chat-luxe-crystal--six { left: 55%; top: 15.8%; animation-delay: -2.4s; }

.city-chat-luxe-fire {
    left: 94.3%;
    bottom: 24.5%;
    width: 54px;
    height: 40px;
}

.city-chat-family-interior--bikergang::before {
    background: none;
    animation: none;
}

.city-chat-biker-lamp {
    top: 20%;
    width: 108px;
    height: 108px;
    transform: translate(-50%, -50%);
    overflow: visible;
    clip-path: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255, 224, 148, 0.38) 0%,
        rgba(255, 178, 66, 0.17) 32%,
        rgba(255, 126, 32, 0.05) 55%,
        transparent 72%
    );
    filter: blur(2px);
}

.city-chat-biker-lamp::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 150px;
    height: 260px;
    transform: translateX(-50%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    background: linear-gradient(
        to bottom,
        rgba(255, 218, 142, 0.16),
        rgba(255, 174, 72, 0.065) 44%,
        transparent 100%
    );
    filter: blur(7px);
}

.city-chat-biker-lamp--left { left: 6.1%; }
.city-chat-biker-lamp--mid { left: 79.4%; }
.city-chat-biker-lamp--right { left: 94.1%; }

@keyframes cityChatHutCabinGlow {
    from { opacity: 0.72; filter: brightness(0.9) saturate(0.96); }
    to { opacity: 1; filter: brightness(1.12) saturate(1.14); }
}

@keyframes cityChatHutLanternFlicker {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.97); }
    16% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.03); }
    28% { opacity: 0.74; transform: translate(-50%, -50%) scale(0.99); }
    47% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.05); }
    63% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.01); }
    81% { opacity: 0.88; transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes cityChatHutFireFlicker {
    0%, 100% { opacity: 0.62; filter: brightness(0.92) hue-rotate(-6deg); }
    25% { opacity: 0.92; filter: brightness(1.18) hue-rotate(4deg); }
    40% { opacity: 0.7; filter: brightness(0.96); }
    70% { opacity: 1; filter: brightness(1.22) saturate(1.15); }
}

@keyframes cityChatHutHeatHaze {
    from { opacity: 0.35; transform: translate(-50%, -50%) scale(0.92) skewX(-2deg); }
    to { opacity: 0.7; transform: translate(-52%, -54%) scale(1.08) skewX(3deg); }
}

@keyframes cityChatHutEmber {
    0% {
        opacity: 0;
        transform: translate(-50%, 8px) scale(0.5);
    }
    18% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + 10px), -78px) scale(0.2);
    }
}

@keyframes cityChatLuxeRoomGlow {
    from { opacity: 0.7; filter: brightness(0.92) saturate(0.95); }
    to { opacity: 1; filter: brightness(1.08) saturate(1.12); }
}

@keyframes cityChatLuxeFireFlame {
    from { opacity: 0.62; transform: scaleY(0.82) scaleX(0.94); }
    to { opacity: 1; transform: scaleY(1.12) scaleX(1.04); }
}

@keyframes cityChatLuxeDust {
    0% { opacity: 0; transform: translateY(0) scale(0.6); }
    12% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(12px, 86px) scale(1.1); }
}

@keyframes cityChatBikerShopGlow {
    from { opacity: 0.68; filter: brightness(0.9); }
    to { opacity: 1; filter: brightness(1.1); }
}

@keyframes cityChatBikerLampCone {
    from { opacity: 0.5; }
    to { opacity: 0.88; }
}

@keyframes cityChatBikerFloorPool {
    from { opacity: 0.42; transform: scale(0.94); }
    to { opacity: 0.8; transform: scale(1.06); }
}

.city-chat-portal {
    position: absolute;
    width: 92px;
    height: 72px;
    transform: translate(-50%, -50%);
    z-index: 8;
    pointer-events: none;
}

.city-chat-portal--sports-bar {
    left: 18%;
    top: 79%;
}

.city-chat-portal--main-street,
.city-chat-portal--donator-lounge,
.city-chat-portal--market,
.city-chat-portal--graveyard,
.city-chat-portal--family-house,
.city-chat-portal--family-share,
.city-chat-portal--main-street-return,
.city-chat-portal--graveyard-return {
    display: none;
}

.city-chat-portal--main-street {
    left: 21%;
    top: 84%;
}

.city-chat-portal--family-house {
    left: 31%;
    top: 79%;
}

.city-chat-portal--donator-lounge {
    left: 44%;
    top: 79%;
}

.city-chat-portal--market {
    left: 57%;
    top: 79%;
}

.city-chat-portal--graveyard {
    left: 89%;
    top: 79%;
    overflow: visible;
}

.city-chat-portal--main-street-return {
    left: 14%;
    top: 84%;
}

.city-chat-portal--graveyard-return {
    left: 14%;
    top: 84%;
}

.city-chat-portal--family-share {
    left: 26%;
    top: 84%;
}

.city-chat-stage[data-city-location="donator_lounge"] .city-chat-portal--main-street-return {
    left: 31.5%;
    top: 91%;
}

.city-chat-stage:is([data-city-location="sports_bar"], [data-city-location="donator_lounge"], [data-city-location="market"], [data-city-location="family_house"], [data-city-location="graveyard"], [data-city-location="spirit_room"]) .city-chat-portal--sports-bar {
    display: none;
}

.city-chat-stage[data-city-location="main_street"] .city-chat-portal--donator-lounge,
.city-chat-stage[data-city-location="main_street"] .city-chat-portal--market,
.city-chat-stage[data-city-location="main_street"] .city-chat-portal--graveyard,
.city-chat-stage[data-city-location="main_street"] .city-chat-portal--family-house,
.city-chat-stage[data-city-location="sports_bar"] .city-chat-portal--main-street,
.city-chat-stage[data-city-location="family_house"] .city-chat-portal--family-share,
.city-chat-stage:is([data-city-location="donator_lounge"], [data-city-location="market"], [data-city-location="family_house"], [data-city-location="graveyard"]) .city-chat-portal--main-street-return {
    display: block;
}

.city-chat-stage[data-city-location="spirit_room"] .city-chat-portal--graveyard-return {
    display: block;
}

.city-chat-portal__beam {
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 48px;
    height: 52px;
    transform: translateX(-50%);
    border-radius: 50% 50% 38% 38%;
    background: linear-gradient(to bottom, rgba(255, 45, 38, 0), rgba(255, 25, 18, 0.42));
    filter: blur(1px);
    animation: cityChatPortalBeam 1.25s ease-in-out infinite alternate;
}

.city-chat-portal__ring {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 66px;
    height: 22px;
    transform: translateX(-50%);
    box-sizing: border-box;
    border: 4px solid rgba(255, 54, 46, 0.96);
    border-radius: 50%;
    background: rgba(255, 20, 15, 0.24);
    box-shadow:
        0 0 8px 3px rgba(255, 30, 24, 0.85),
        0 0 24px 8px rgba(255, 16, 12, 0.48),
        inset 0 0 9px rgba(255, 220, 210, 0.72);
    animation: cityChatPortalRing 0.95s ease-in-out infinite alternate;
}

.city-chat-portal__count {
    position: absolute;
    left: 50%;
    bottom: 33px;
    z-index: 2;
    transform: translateX(-50%);
    color: #ff5c54;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-shadow:
        0 1px 2px #000,
        0 0 5px currentColor;
}

.city-chat-portal--donator-lounge .city-chat-portal__count {
    color: #ff8d32;
}

.city-chat-portal--market .city-chat-portal__count {
    color: #f2a1bb;
}

.city-chat-portal--graveyard .city-chat-portal__count {
    color: #cfcfcf;
}

.city-chat-portal--family-house .city-chat-portal__count {
    color: #ff8f8b;
}

.city-chat-portal__label {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    padding: 2px 7px;
    color: #fff;
    background: rgba(82, 5, 3, 0.86);
    border: 1px solid rgba(255, 91, 83, 0.72);
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

.city-chat-portal--donator-lounge .city-chat-portal__beam {
    background: linear-gradient(to bottom, rgba(255, 143, 28, 0), rgba(255, 74, 12, 0.62));
    filter: blur(1px) drop-shadow(0 0 8px rgba(255, 126, 24, 0.72));
}

.city-chat-portal--donator-lounge .city-chat-portal__ring {
    border-color: #ff7b21;
    background: rgba(255, 69, 8, 0.34);
    box-shadow:
        0 0 8px 3px rgba(255, 110, 20, 0.94),
        0 0 26px 9px rgba(255, 48, 6, 0.58),
        inset 0 0 10px rgba(255, 224, 170, 0.86);
}

.city-chat-portal--donator-lounge .city-chat-portal__label {
    color: #fff2d4;
    background: rgba(92, 28, 2, 0.9);
    border-color: rgba(255, 150, 55, 0.88);
}

.city-chat-portal--market .city-chat-portal__beam {
    background: linear-gradient(to bottom, rgba(128, 0, 32, 0), rgba(128, 0, 32, 0.72));
    filter: blur(1px) drop-shadow(0 0 8px rgba(128, 0, 32, 0.92));
}

.city-chat-portal--market .city-chat-portal__ring {
    border-color: #a51d48;
    background: rgba(128, 0, 32, 0.46);
    box-shadow:
        0 0 8px 3px rgba(144, 12, 53, 0.94),
        0 0 26px 9px rgba(92, 0, 29, 0.68),
        inset 0 0 10px rgba(255, 182, 205, 0.74);
}

.city-chat-portal--market .city-chat-portal__label {
    color: #ffe4ec;
    background: rgba(70, 0, 22, 0.94);
    border-color: rgba(181, 42, 84, 0.9);
}

.city-chat-portal--graveyard .city-chat-portal__beam {
    background: linear-gradient(to bottom, rgba(70, 76, 82, 0), rgba(16, 17, 19, 0.9));
    filter: blur(1px) drop-shadow(0 0 10px rgba(118, 126, 134, 0.42));
}

.city-chat-portal--graveyard .city-chat-portal__ring {
    border-color: #8a9198;
    background: rgba(6, 6, 8, 0.82);
    box-shadow:
        0 0 8px 3px rgba(0, 0, 0, 0.92),
        0 0 20px 7px rgba(92, 100, 108, 0.38),
        inset 0 0 11px rgba(176, 184, 192, 0.42);
}

.city-chat-portal--graveyard .city-chat-portal__label {
    color: #f2f2f2;
    background: rgba(6, 6, 8, 0.94);
    border-color: rgba(150, 156, 164, 0.92);
}

.city-chat-portal--graveyard-return .city-chat-portal__beam {
    background: linear-gradient(to bottom, rgba(126, 235, 210, 0), rgba(45, 119, 104, 0.58));
    filter: blur(1px) drop-shadow(0 0 9px rgba(151, 255, 234, 0.54));
}

.city-chat-portal--graveyard-return .city-chat-portal__ring {
    border-color: #a4ded1;
    background: rgba(39, 102, 89, 0.36);
    box-shadow:
        0 0 8px 3px rgba(121, 226, 205, 0.72),
        0 0 24px 8px rgba(63, 153, 136, 0.42),
        inset 0 0 10px rgba(226, 255, 249, 0.76);
}

.city-chat-portal--graveyard-return .city-chat-portal__label {
    color: #e6fff9;
    background: rgba(7, 49, 41, 0.92);
    border-color: rgba(153, 233, 217, 0.82);
}

.city-chat-portal--family-house .city-chat-portal__beam {
    background: linear-gradient(to bottom, rgba(229, 57, 53, 0), rgba(198, 40, 40, 0.58));
    filter: blur(1px) drop-shadow(0 0 8px rgba(229, 57, 53, 0.7));
}

.city-chat-portal--family-house .city-chat-portal__ring {
    border-color: #ef9a9a;
    background: rgba(198, 40, 40, 0.34);
    box-shadow:
        0 0 8px 3px rgba(229, 57, 53, 0.9),
        0 0 26px 9px rgba(183, 28, 28, 0.52),
        inset 0 0 10px rgba(255, 220, 210, 0.82);
}

.city-chat-portal--family-house .city-chat-portal__label {
    color: #ffe8e6;
    background: rgba(80, 10, 10, 0.9);
    border-color: rgba(239, 154, 154, 0.88);
}

.city-chat-portal--family-house.is-locked {
    filter: grayscale(1) brightness(0.82);
    opacity: 0.78;
}

.city-chat-portal--family-house.is-locked .city-chat-portal__beam,
.city-chat-portal--family-house.is-locked .city-chat-portal__ring {
    animation: none;
    box-shadow: none;
}

.city-chat-portal--family-house.is-locked .city-chat-portal__label {
    color: #d4d4d4;
    background: rgba(42, 42, 42, 0.9);
    border-color: rgba(150, 150, 150, 0.55);
}

.city-chat-portal--family-share .city-chat-portal__beam {
    background: linear-gradient(to bottom, rgba(82, 220, 75, 0), rgba(49, 178, 55, 0.62));
    filter: blur(1px) drop-shadow(0 0 8px rgba(89, 229, 81, 0.72));
}

.city-chat-portal--family-share .city-chat-portal__ring {
    border-color: #61d85d;
    background: rgba(43, 164, 50, 0.34);
    box-shadow:
        0 0 8px 3px rgba(75, 214, 69, 0.9),
        0 0 26px 9px rgba(38, 161, 45, 0.52),
        inset 0 0 10px rgba(218, 255, 215, 0.82);
}

.city-chat-portal--family-share .city-chat-portal__label {
    color: #e9ffe7;
    background: rgba(9, 65, 13, 0.92);
    border-color: rgba(112, 224, 105, 0.88);
}

.city-chat-family-share-portal__amount {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 2;
    max-width: 118px;
    padding: 2px 5px;
    transform: translateX(-50%);
    overflow: hidden;
    color: #ffdd55;
    background: rgba(5, 31, 7, 0.84);
    border: 1px solid rgba(116, 226, 109, 0.58);
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

.city-chat-portal--family-share.is-claimed {
    filter: saturate(0.55);
    opacity: 0.8;
}

.city-chat-portal--family-share.is-unavailable {
    filter: grayscale(1) brightness(0.72);
    opacity: 0.78;
}

.city-chat-portal--family-share.is-unavailable .city-chat-portal__beam,
.city-chat-portal--family-share.is-unavailable .city-chat-portal__ring {
    animation: none;
    box-shadow: none;
}

.city-chat-portal--family-share.is-unavailable .city-chat-portal__label,
.city-chat-portal--family-share.is-unavailable .city-chat-family-share-portal__amount {
    color: #d2d2d2;
    background: rgba(45, 45, 45, 0.92);
    border-color: rgba(155, 155, 155, 0.55);
    text-shadow: 0 1px 2px #000;
}

.city-chat-portal--family-share.is-online-locked .city-chat-family-share-portal__amount {
    color: #ffe0a3;
    background: rgba(48, 32, 6, 0.9);
    border-color: rgba(255, 190, 70, 0.7);
}

.city-chat-family-share-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 32;
    width: 280px;
    box-sizing: border-box;
    padding: 12px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: linear-gradient(155deg, rgba(13, 55, 18, 0.98), rgba(9, 16, 10, 0.98));
    border: 1px solid #58cf55;
    border-radius: 10px;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.8), 0 0 18px rgba(74, 211, 69, 0.2);
}

.city-chat-family-share-menu[hidden] {
    display: none;
}

.city-chat-family-share-menu__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(126, 231, 120, 0.2);
}

.city-chat-family-share-menu__header strong {
    color: #dfffdc;
    font-size: 13px;
}

.city-chat-family-share-menu__header button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #23852a;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}

.city-chat-family-share-menu__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(85, 220, 78, 0.5));
}

.city-chat-family-share-menu__eyebrow {
    color: #aeeaaa;
    font-size: 10px;
}

.city-chat-family-share-menu__amount {
    color: #ffdd55;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(255, 221, 85, 0.35);
}

.city-chat-family-share-menu__vault {
    color: #b8c9b7;
    font-size: 9px;
}

.city-chat-family-share-menu__claim {
    min-width: 112px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#42bb49, #218129);
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
}

.city-chat-family-share-menu__claim:hover:not(:disabled) {
    background: linear-gradient(#55d05c, #299632);
}

.city-chat-family-share-menu__claim:disabled {
    color: #d0d0d0;
    background: linear-gradient(#777, #555);
    border-color: rgba(210, 210, 210, 0.45);
    opacity: 0.72;
    cursor: default;
}

.city-chat-family-share-menu__feedback {
    min-height: 13px;
    color: #ffaaa3;
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
}

.city-chat-family-share-menu__feedback.is-success {
    color: #8bec87;
}

.city-chat-family-share-menu__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.city-chat-family-share-menu.is-online-locked .city-chat-family-share-menu__body {
    filter: blur(5px);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.city-chat-family-share-menu__lock {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 48px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    pointer-events: none;
}

.city-chat-family-share-menu__lock[hidden] {
    display: none;
}

.city-chat-family-share-menu__lock strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
    text-shadow: 0 2px 8px #000;
}

.city-chat-family-share-menu__lock span {
    color: #ff5555;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 0 2px 8px #000;
}

.city-chat-grave-search-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 32;
    width: 380px;
    box-sizing: border-box;
    padding: 18px 20px 16px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    color: #fff;
    text-align: left;
    background: linear-gradient(155deg, rgba(28, 28, 32, 0.98), rgba(8, 8, 10, 0.98));
    border: 1px solid #6a6a6a;
    border-radius: 12px;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.city-chat-grave-search-menu[hidden] {
    display: none;
}

.city-chat-grave-search-menu__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(180, 180, 180, 0.2);
}

.city-chat-grave-search-menu__header strong {
    color: #ececec;
    font-size: 18px;
}

.city-chat-grave-search-menu__header button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #444;
    font-size: 20px;
    line-height: 26px;
    cursor: pointer;
}

.city-chat-grave-search-menu__eyebrow {
    color: #c4c4c4;
    font-size: 13px;
    line-height: 1.4;
}

.city-chat-grave-search-menu__field {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    text-align: left;
}

.city-chat-grave-search-menu__field-label {
    display: block;
    position: static;
    margin: 0 0 6px;
    color: #ddd;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
}

.city-chat-grave-search-menu__field input {
    display: block;
    position: static;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #555;
    border-radius: 6px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    font-size: 15px;
}

.city-chat-grave-search-menu__search,
.city-chat-grave-search-menu__candle {
    display: block;
    width: 100%;
    min-width: 140px;
    padding: 10px 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(#4a4a4a, #222);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.city-chat-grave-search-menu__search:hover,
.city-chat-grave-search-menu__candle:hover:not(:disabled) {
    background: linear-gradient(#5c5c5c, #2d2d2d);
}

.city-chat-grave-search-menu__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(180, 180, 180, 0.2);
    border-radius: 8px;
}

.city-chat-grave-search-menu__result[hidden] {
    display: none;
}

.city-chat-grave-search-menu__result strong {
    color: #fff;
    font-size: 17px;
}

.city-chat-grave-search-menu__result span {
    color: #cfcfcf;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    white-space: pre-line;
}

.city-chat-grave-search-menu__feedback {
    min-height: 16px;
    color: #ffaaa3;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.city-chat-grave-search-menu__feedback.is-success {
    color: #c8c8c8;
}

.city-chat-donator-steam-icons {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 82px;
    height: 92px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}

.city-chat-donator-steam-icons > span {
    --icon-drift: 0px;
    --icon-rotate: 0deg;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 23px;
    opacity: 0;
    background: url('images/weneedyou.png') center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 111, 20, 0.95));
    animation: cityChatDonatorIconSteam 3.2s ease-out infinite;
}

.city-chat-donator-steam-icons > span:nth-child(2) {
    --icon-drift: -20px;
    --icon-rotate: -10deg;
    animation-delay: 0.62s;
}

.city-chat-donator-steam-icons > span:nth-child(3) {
    --icon-drift: 18px;
    --icon-rotate: 9deg;
    animation-delay: 1.24s;
}

.city-chat-donator-steam-icons > span:nth-child(4) {
    --icon-drift: -9px;
    --icon-rotate: -5deg;
    animation-delay: 1.86s;
}

.city-chat-donator-steam-icons > span:nth-child(5) {
    --icon-drift: 10px;
    --icon-rotate: 6deg;
    animation-delay: 2.48s;
}

.city-chat-market-rise-icons {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 82px;
    height: 92px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}

.city-chat-market-rise-icons > span {
    --icon-drift: 0px;
    --icon-rotate: 0deg;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 31px;
    height: 31px;
    opacity: 0;
    background: url('images/sellmarketicon.png') center / contain no-repeat;
    filter: drop-shadow(0 0 5px rgba(151, 15, 57, 0.98));
    animation: cityChatDonatorIconSteam 3.2s ease-out infinite;
}

.city-chat-market-rise-icons > span:nth-child(2) {
    --icon-drift: -20px;
    --icon-rotate: -10deg;
    animation-delay: 0.62s;
}

.city-chat-market-rise-icons > span:nth-child(3) {
    --icon-drift: 18px;
    --icon-rotate: 9deg;
    animation-delay: 1.24s;
}

.city-chat-market-rise-icons > span:nth-child(4) {
    --icon-drift: -9px;
    --icon-rotate: -5deg;
    animation-delay: 1.86s;
}

.city-chat-market-rise-icons > span:nth-child(5) {
    --icon-drift: 10px;
    --icon-rotate: 6deg;
    animation-delay: 2.48s;
}

.city-chat-graveyard-rise-icons {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 82px;
    height: 92px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}

.city-chat-graveyard-rise-icons > span {
    --icon-drift: 0px;
    --icon-rotate: 0deg;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 26px;
    height: 38px;
    opacity: 0;
    background: url('images/kruis.png') center / contain no-repeat;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.98));
    animation: cityChatDonatorIconSteam 4.2s ease-out infinite;
}

.city-chat-graveyard-rise-icons > span:nth-child(2) {
    --icon-drift: -16px;
    --icon-rotate: -8deg;
    animation-delay: 2.1s;
}

.city-chat-graveyard-portal-mist {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 84px;
    height: 78px;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.city-chat-graveyard-portal-mist > span {
    --mist-x: -10px;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 24px;
    margin-left: -21px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(196, 200, 196, 0.74) 0%, rgba(110, 114, 110, 0.34) 48%, transparent 74%);
    filter: blur(6px);
    opacity: 0;
    animation: cityChatGravePortalMist 5.4s ease-out infinite;
}

.city-chat-graveyard-portal-mist > span:nth-child(2) {
    --mist-x: 14px;
    width: 52px;
    height: 28px;
    margin-left: -26px;
    animation-delay: 1.8s;
}

.city-chat-graveyard-portal-mist > span:nth-child(3) {
    --mist-x: -4px;
    width: 36px;
    height: 20px;
    margin-left: -18px;
    animation-delay: 3.6s;
}

.city-chat-graveyard-portal-ravens {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 1px;
    height: 1px;
    z-index: 4;
    pointer-events: none;
}

.city-chat-graveyard-portal-ravens .city-chat-graveyard-raven {
    left: 0;
    top: 0;
    opacity: 0;
    animation: cityChatGravePortalRavenLeft 6.2s ease-in-out infinite;
}

.city-chat-graveyard-portal-ravens .city-chat-graveyard-raven:nth-child(2) {
    width: 15px;
    height: 7px;
    animation-name: cityChatGravePortalRavenRight;
    animation-delay: 3.1s;
}

@keyframes cityChatGravePortalMist {
    0% {
        opacity: 0;
        transform: translate(0, 6px) scale(0.55);
    }
    18% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: translate(var(--mist-x), -56px) scale(1.45);
    }
}

@keyframes cityChatGravePortalRavenLeft {
    0% {
        opacity: 0;
        transform: translate(-4px, 2px) scale(0.55) rotate(-8deg);
    }
    10% {
        opacity: 0.92;
    }
    100% {
        opacity: 0;
        transform: translate(-54px, -62px) scale(0.82) rotate(-26deg);
    }
}

@keyframes cityChatGravePortalRavenRight {
    0% {
        opacity: 0;
        transform: translate(4px, 4px) scale(0.5) rotate(8deg);
    }
    10% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        transform: translate(50px, -58px) scale(0.78) rotate(22deg);
    }
}

.city-chat-sportsbar-rise-icons,
.city-chat-family-rise-icons {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 82px;
    height: 92px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}

.city-chat-sportsbar-rise-icons > span,
.city-chat-family-rise-icons > span {
    --icon-drift: 0px;
    --icon-rotate: 0deg;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    animation: cityChatDonatorIconSteam 3.2s ease-out infinite;
}

.city-chat-sportsbar-rise-icons > span {
    width: 32px;
    height: 50px;
    background: url('images/Beer.png') center / contain no-repeat;
    filter: drop-shadow(0 0 5px rgba(255, 189, 72, 0.95));
}

.city-chat-family-rise-icons > span {
    width: 36px;
    height: 28px;
    color: #ffd3d0;
    filter: drop-shadow(0 0 5px rgba(229, 57, 53, 0.95));
    font-size: 25px;
    line-height: 28px;
    text-align: center;
}

.city-chat-sportsbar-rise-icons > span:nth-child(2),
.city-chat-family-rise-icons > span:nth-child(2) {
    --icon-drift: -20px;
    --icon-rotate: -10deg;
    animation-delay: 0.62s;
}

.city-chat-sportsbar-rise-icons > span:nth-child(3),
.city-chat-family-rise-icons > span:nth-child(3) {
    --icon-drift: 18px;
    --icon-rotate: 9deg;
    animation-delay: 1.24s;
}

.city-chat-sportsbar-rise-icons > span:nth-child(4),
.city-chat-family-rise-icons > span:nth-child(4) {
    --icon-drift: -9px;
    --icon-rotate: -5deg;
    animation-delay: 1.86s;
}

.city-chat-sportsbar-rise-icons > span:nth-child(5),
.city-chat-family-rise-icons > span:nth-child(5) {
    --icon-drift: 10px;
    --icon-rotate: 6deg;
    animation-delay: 2.48s;
}

@keyframes cityChatPortalBeam {
    from { opacity: 0.48; transform: translateX(-50%) scaleX(0.86); }
    to { opacity: 0.9; transform: translateX(-50%) scaleX(1.08); }
}

@keyframes cityChatPortalRing {
    from { opacity: 0.76; transform: translateX(-50%) scale(0.92); }
    to { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

@keyframes cityChatDonatorIconSteam {
    0% {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.52);
    }
    18% {
        opacity: 0.92;
    }
    74% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--icon-drift)), -76px) scale(0.92) rotate(var(--icon-rotate));
    }
}

.city-chat-portal-prompt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.34);
    cursor: default;
}

.city-chat-portal-prompt[hidden] {
    display: none;
}

.city-chat-portal-prompt__panel {
    min-width: 300px;
    max-width: 420px;
    padding: 20px 24px;
    color: #fff;
    background: linear-gradient(160deg, rgba(50, 15, 12, 0.98), rgba(17, 9, 8, 0.98));
    border: 2px solid #d8322a;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.72), 0 0 24px rgba(255, 34, 25, 0.35);
    text-align: center;
}

.city-chat-portal-prompt__panel strong {
    display: block;
    margin-bottom: 16px;
    font-size: 17px;
    text-shadow: 0 1px 3px #000;
}

.city-chat-portal-prompt__detail {
    display: block;
    margin: -10px 0 14px;
    color: #d7d0c4;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
    text-shadow: 0 1px 2px #000;
}

.city-chat-portal-prompt__detail[hidden] {
    display: none;
}

.city-chat-portal-prompt__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.city-chat-portal-prompt__actions button {
    min-width: 92px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(#b32f28, #761a15);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.city-chat-portal-prompt__actions button:hover {
    filter: brightness(1.18);
}

.city-chat-portal-prompt__panel p {
    margin: -4px 0 16px 0;
    color: #d8d0c8;
    font-size: 14px;
}

.city-chat-spirit-attack-prompt .city-chat-portal-prompt__panel {
    border-color: #ff4d3e;
    background: linear-gradient(160deg, rgba(68, 12, 10, 0.99), rgba(17, 6, 6, 0.99));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.78), 0 0 30px rgba(255, 48, 37, 0.48);
}

.city-chat-spirit-attack-prompt__loss {
    display: block;
    margin: -7px 0 17px;
    color: #ff8c7f;
    font-size: 20px;
    font-weight: 900;
    text-shadow: 0 1px 3px #000, 0 0 10px rgba(255, 65, 50, 0.72);
}

.city-chat-spirit-attack-prompt .city-chat-portal-prompt__detail {
    margin-top: 0;
    color: #f4d9d4;
}

.city-chat-citizen-actions {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 28px);
    z-index: 40;
    display: flex;
    gap: 4px;
    padding: 4px;
    transform: translateX(-50%);
    background: linear-gradient(160deg, rgba(50, 15, 12, 0.96), rgba(17, 9, 8, 0.96));
    border: 1px solid #d8322a;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 34, 25, 0.28);
    pointer-events: auto;
    white-space: nowrap;
}

.city-chat-citizen-actions[hidden] {
    display: none;
}

.city-chat-citizen-actions.is-detached {
    top: 14px;
    bottom: auto;
}

.city-chat-citizen-market-count {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    padding: 4px 8px;
    color: #ffe4ec;
    background: rgba(70, 0, 22, 0.96);
    border: 1px solid rgba(181, 42, 84, 0.9);
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.city-chat-citizen-market-count[hidden],
.city-chat-citizen-actions button[hidden] {
    display: none;
}

.city-chat-citizen-actions button {
    margin: 0;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#b32f28, #761a15);
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.city-chat-citizen-actions button:hover {
    filter: brightness(1.18);
}

.citizen-inspect-prompt {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18%;
    z-index: 20000;
    background: transparent;
    pointer-events: none;
    cursor: default;
}

.citizen-inspect-prompt[hidden] {
    display: none;
}

.citizen-inspect-prompt__actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    pointer-events: auto;
    background: linear-gradient(160deg, rgba(50, 15, 12, 0.96), rgba(17, 9, 8, 0.96));
    border: 1px solid #d8322a;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 34, 25, 0.28);
}

.citizen-inspect-prompt__actions button {
    min-width: 0;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#b32f28, #761a15);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.citizen-inspect-prompt__actions button:hover {
    filter: brightness(1.18);
}

.clickable-citizen-name {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.clickable-citizen-name:hover {
    filter: brightness(1.18);
}

.city-chat-stage:focus {
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.48), 0 0 0 2px rgba(190, 221, 151, 0.48);
}

.city-chat-scene-lights,
.city-chat-weather-host {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The chat weather uses clones of GoobVille's existing global weather layers. */
.city-chat-weather-host {
    z-index: 3;
    contain: layout style paint;
}

.city-chat-weather-clones {
    display: contents;
}

/* The shared cloud field is 78% high on the full-page background. Crossroad
   St. has a much lower skyline, so keep its clouds inside the upper sky. */
.city-chat-stage[data-city-location="main_street"] .city-chat-weather-clones .prelogin-storm__clouds {
    height: 42%;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 62%,
        rgba(0, 0, 0, 0.52) 82%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 62%,
        rgba(0, 0, 0, 0.52) 82%,
        transparent 100%
    );
}

/* Cloudy weather adds a second set of clouds directly to the ambient layer.
   Remove only its lower variants in Crossroad St.; other ambient effects stay
   untouched. */
.city-chat-stage[data-city-location="main_street"] .city-chat-weather-clones :is(
    .ambient-cloud-extra--3,
    .ambient-cloud-extra--4,
    .ambient-cloud-extra--6,
    .ambient-cloud-extra--8
) {
    display: none !important;
}

/* Crossroad St. already has a fully painted foreground. Keep the cloned sky
   colour in the upper part of that background instead of tinting the buildings
   and street as well. Rain and weather particles remain full-height. */
.city-chat-stage[data-city-location="main_street"] .city-chat-weather-clones :is(
    .prelogin-storm__night-base,
    .prelogin-storm__dawn-base,
    .prelogin-storm__sunset-base,
    .prelogin-storm__ambient-overlay
) {
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 18%,
        rgba(0, 0, 0, 0.72) 26%,
        rgba(0, 0, 0, 0.28) 34%,
        transparent 42%
    ) !important;
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 18%,
        rgba(0, 0, 0, 0.72) 26%,
        rgba(0, 0, 0, 0.28) 34%,
        transparent 42%
    ) !important;
}

.city-chat-weather-host > .prelogin-storm__rain {
    z-index: 1;
}

/* Keep lightning above the Crossroad St. rooftops without changing its timing. */
.city-chat-stage[data-city-location="main_street"] .city-chat-weather-clones .ambient-lightning {
    height: 120px;
}

.city-chat-stage[data-city-location="main_street"] .city-chat-weather-clones .ambient-lightning--center {
    height: 105px;
}

.city-chat-stage[data-city-location="main_street"] .city-chat-weather-clones .ambient-lightning--right {
    height: 115px;
}

/* citychatbg.png already contains its own moon; keep every other night layer. */
.city-chat-weather-host .prelogin-storm__night-base::before {
    display: none !important;
}

/* Keep the shared star effects entirely above GoobVille's highest rooftops. */
.city-chat-weather-host .prelogin-storm__stars,
.city-chat-weather-host .prelogin-storm__shooting-stars {
    -webkit-clip-path: inset(0 0 78% 0);
    clip-path: inset(0 0 78% 0);
}

.city-chat-scene-lights {
    z-index: 2;
    opacity: 0.92;
    transition: opacity 0.6s ease;
}

.city-chat-stage[data-city-sky="day"] .city-chat-scene-lights {
    opacity: 0.46;
}

.city-chat-stage[data-city-sky="dawn"] .city-chat-scene-lights,
.city-chat-stage[data-city-sky="sunset"] .city-chat-scene-lights {
    opacity: 0.68;
}

.city-chat-window-glows::before,
.city-chat-window-glows::after,
.city-chat-lantern-glows::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

.city-chat-window-glows::before {
    width: 9px;
    height: 18px;
    border-radius: 1px;
    background: transparent;
    box-shadow:
        59px 221px 7px 0 rgba(255, 157, 50, 0.74),
        59px 313px 7px 0 rgba(255, 149, 43, 0.72),
        233px 232px 7px 0 rgba(255, 157, 50, 0.74),
        459px 254px 7px 0 rgba(255, 166, 57, 0.76),
        420px 326px 7px 0 rgba(255, 149, 43, 0.72),
        564px 306px 7px 0 rgba(255, 154, 46, 0.72),
        566px 405px 7px 0 rgba(255, 149, 43, 0.74);
    animation: cityChatWindowFlicker 5.4s ease-in-out infinite;
}

.city-chat-window-glows::after {
    display: none;
}

.city-chat-lantern-glows::before {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        108px 356px 3px 2px rgba(255, 205, 112, 1),
        108px 356px 18px 8px rgba(255, 132, 24, 0.94),
        108px 356px 50px 28px rgba(255, 96, 10, 0.62),
        108px 356px 90px 40px rgba(255, 76, 0, 0.3),
        335px 356px 3px 2px rgba(255, 205, 112, 1),
        335px 356px 18px 8px rgba(255, 132, 24, 0.94),
        335px 356px 50px 28px rgba(255, 96, 10, 0.62),
        335px 356px 90px 40px rgba(255, 76, 0, 0.3),
        500px 364px 3px 2px rgba(255, 205, 112, 1),
        500px 364px 18px 8px rgba(255, 132, 24, 0.94),
        500px 364px 50px 28px rgba(255, 96, 10, 0.62),
        500px 364px 90px 40px rgba(255, 76, 0, 0.3);
    animation: cityChatLanternPulse 3.6s ease-in-out infinite;
}

.city-chat-broken-alley-lamp {
    position: absolute;
    left: 664px;
    top: 354px;
    width: 11px;
    height: 8px;
    z-index: 2;
    border: 1px solid rgba(93, 67, 34, 0.92);
    border-radius: 2px 2px 5px 5px;
    background: radial-gradient(circle at 50% 42%, #fff5c2 0 16%, #ffc35e 32%, #9f5115 76%, #24180e 100%);
    box-shadow: 0 0 5px 2px rgba(255, 177, 64, 0.76);
    transform-origin: 50% 50%;
    animation: cityChatBrokenAlleyLamp 5.2s steps(1, end) infinite;
}

.city-chat-broken-alley-lamp::before {
    content: '';
    position: absolute;
    right: 8px;
    top: -5px;
    width: 12px;
    height: 7px;
    border-top: 2px solid #29241d;
    border-left: 2px solid #29241d;
    border-radius: 3px 0 0;
}

.city-chat-broken-alley-lamp::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 104px;
    height: 124px;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 190, 91, 0.34) 0%,
        rgba(255, 135, 42, 0.18) 18%,
        rgba(255, 91, 20, 0.055) 42%,
        transparent 72%
    );
    -webkit-clip-path: polygon(47% 0, 53% 0, 96% 100%, 4% 100%);
    clip-path: polygon(47% 0, 53% 0, 96% 100%, 4% 100%);
    filter: blur(6px);
    transform-origin: 50% 0;
}

@keyframes cityChatWindowFlicker {
    0%, 100% { opacity: 0.72; }
    42% { opacity: 1; }
    47% { opacity: 0.68; }
    65% { opacity: 0.9; }
}

@keyframes cityChatLanternPulse {
    0%, 100% { opacity: 0.92; filter: brightness(0.98) saturate(1.14); }
    50% { opacity: 1; filter: brightness(1.18) saturate(1.24); }
}

@keyframes cityChatBrokenAlleyLamp {
    0%, 5%, 9%, 37%, 41%, 68%, 73%, 100% {
        opacity: 0.88;
        filter: brightness(0.95) saturate(1.08);
    }
    6%, 8%, 38%, 40%, 69%, 72% {
        opacity: 0.08;
        filter: brightness(0.35);
    }
    70% {
        opacity: 0.36;
        filter: brightness(0.68);
    }
    71% {
        opacity: 0.12;
        filter: brightness(0.4);
    }
}

.city-chat-mainstreet-ravens {
    position: absolute;
    left: 72%;
    top: 8%;
    width: 25%;
    height: 40%;
    z-index: 3;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.city-chat-stage[data-city-location="main_street"] .city-chat-mainstreet-ravens {
    display: block;
}

.city-chat-mainstreet-ravens .city-chat-graveyard-raven {
    left: 5%;
    opacity: 0.74;
    animation: cityChatMainstreetRavenCircle 18s ease-in-out infinite;
}

.city-chat-mainstreet-raven--one {
    top: 23%;
}

.city-chat-mainstreet-ravens .city-chat-mainstreet-raven--two {
    top: 48%;
    width: 15px;
    height: 7px;
    opacity: 0.58;
    animation-duration: 23s;
    animation-delay: -9s;
}

.city-chat-mainstreet-ravens .city-chat-mainstreet-raven--three {
    top: 68%;
    width: 12px;
    height: 6px;
    opacity: 0.45;
    animation-duration: 27s;
    animation-delay: -17s;
}

@keyframes cityChatMainstreetRavenCircle {
    0% {
        left: 4%;
        opacity: 0;
        transform: translateY(112px) scaleX(1);
    }
    12% {
        left: 12%;
        opacity: 0.56;
        transform: translateY(48px) scaleX(1);
    }
    26% {
        left: 28%;
        opacity: 0.76;
        transform: translateY(4px) scaleX(1);
    }
    56% {
        left: 66%;
        opacity: 0.78;
        transform: translateY(-12px) scaleX(1);
    }
    76% {
        left: 88%;
        opacity: 0.64;
        transform: translateY(18px) scaleX(1);
    }
    91% {
        left: 96%;
        opacity: 0.18;
        transform: translateY(88px) scaleX(1);
    }
    100% {
        left: 98%;
        opacity: 0;
        transform: translateY(118px) scaleX(1);
    }
}

.city-chat-mainstreet-forest-mist {
    position: absolute;
    right: -1%;
    bottom: 7%;
    width: 35%;
    height: 24%;
    z-index: 4;
    display: none;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, rgba(0, 0, 0, 0.42) 15%, #000 29%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, rgba(0, 0, 0, 0.42) 15%, #000 29%, #000 100%);
}

.city-chat-stage[data-city-location="main_street"] .city-chat-mainstreet-forest-mist {
    display: block;
}

.city-chat-mainstreet-forest-mist::before {
    content: '';
    position: absolute;
    left: 4%;
    right: -4%;
    bottom: 0;
    height: 62%;
    border-radius: 50%;
    opacity: 0.38;
    background: radial-gradient(ellipse at 78% 64%, rgba(190, 202, 184, 0.24) 0%, rgba(119, 137, 114, 0.11) 45%, transparent 74%);
    filter: blur(12px);
}

.city-chat-mainstreet-forest-mist__bank {
    position: absolute;
    right: -8%;
    bottom: 5%;
    width: 78%;
    height: 52%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(198, 207, 193, 0.26) 0%, rgba(119, 137, 114, 0.13) 48%, transparent 74%);
    filter: blur(12px);
    animation: cityChatMainstreetForestMist 14s ease-in-out infinite;
    will-change: transform, opacity;
}

.city-chat-mainstreet-forest-mist__bank--two {
    right: 2%;
    bottom: -3%;
    width: 66%;
    height: 44%;
    animation-delay: -5s;
    animation-duration: 17s;
}

.city-chat-mainstreet-forest-mist__bank--three {
    right: -14%;
    bottom: 19%;
    width: 58%;
    height: 36%;
    animation-delay: -10s;
    animation-duration: 19s;
}

@keyframes cityChatMainstreetForestMist {
    0% {
        opacity: 0;
        transform: translate3d(26px, 7px, 0) scale(0.88);
    }
    24% {
        opacity: 0.38;
    }
    68% {
        opacity: 0.26;
    }
    100% {
        opacity: 0;
        transform: translate3d(-48px, -5px, 0) scale(1.12);
    }
}

.city-chat-chimney-smoke {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.city-chat-stage[data-city-location="main_street"] .city-chat-chimney-smoke {
    display: block;
}

.city-chat-chimney-smoke__puff {
    --smoke-drift: 22px;
    position: absolute;
    width: 38px;
    height: 42px;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 58%,
        rgba(184, 181, 164, 0.7) 0%,
        rgba(148, 151, 141, 0.46) 28%,
        rgba(126, 134, 127, 0.18) 48%,
        transparent 72%
    );
    filter: blur(2.5px) drop-shadow(0 0 5px rgba(188, 181, 158, 0.2));
    transform-origin: 50% 100%;
    animation: cityChatChimneySmoke 6.4s ease-out infinite;
    will-change: transform, opacity;
}

.city-chat-chimney-smoke__puff::before,
.city-chat-chimney-smoke__puff::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.city-chat-chimney-smoke__puff::before {
    left: -7px;
    top: 13px;
    width: 31px;
    height: 28px;
    background: radial-gradient(circle, rgba(166, 163, 149, 0.54) 0%, rgba(130, 135, 126, 0.24) 42%, transparent 72%);
}

.city-chat-chimney-smoke__puff::after {
    right: -8px;
    top: 1px;
    width: 30px;
    height: 32px;
    background: radial-gradient(circle, rgba(151, 154, 143, 0.48) 0%, rgba(119, 128, 120, 0.2) 43%, transparent 72%);
}

.city-chat-chimney-smoke__puff--one {
    left: 73px;
    top: 81px;
    animation-delay: -1.2s;
}

.city-chat-chimney-smoke__puff--two {
    --smoke-drift: 27px;
    left: 183px;
    top: 71px;
    animation-delay: -4.4s;
    animation-duration: 7.1s;
}

.city-chat-chimney-smoke__puff--three {
    --smoke-drift: 18px;
    left: 585px;
    top: 90px;
    animation-delay: -2.7s;
    animation-duration: 6.8s;
}

@keyframes cityChatChimneySmoke {
    0% {
        opacity: 0;
        transform: translate(0, 8px) scale(0.48);
    }
    16% {
        opacity: 0.78;
    }
    58% {
        opacity: 0.56;
    }
    100% {
        opacity: 0;
        transform: translate(var(--smoke-drift), -62px) scale(1.7);
    }
}

.city-chat-rats {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.city-chat-stage[data-city-location="main_street"] .city-chat-rats {
    display: block;
}

.city-chat-rat {
    position: absolute;
    width: 31px;
    height: 15px;
    opacity: 0;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.78));
    will-change: opacity, transform;
}

.city-chat-rat > i {
    position: absolute;
    left: 7px;
    top: 3px;
    width: 18px;
    height: 10px;
    border: 1px solid rgba(28, 12, 5, 0.88);
    border-radius: 55% 48% 44% 48%;
    background: radial-gradient(circle at 66% 30%, #65402b 0 15%, #432518 47%, #241109 100%);
    box-shadow: inset 0 -3px 3px rgba(28, 10, 4, 0.5);
}

.city-chat-rat > i::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 2px;
    width: 9px;
    height: 7px;
    border: 1px solid rgba(28, 12, 5, 0.86);
    border-radius: 42% 70% 72% 48%;
    background: #4b2a1b;
    box-shadow:
        -2px -3px 0 -1px #d18480,
        6px 2px 0 -2px #0b0503;
}

.city-chat-rat > i::after {
    content: '';
    position: absolute;
    left: 2px;
    bottom: -3px;
    width: 4px;
    height: 2px;
    border-radius: 50%;
    background: #ca7773;
    box-shadow: 9px 0 0 #ca7773;
    animation: cityChatRatFeet 0.16s steps(2, end) infinite;
}

.city-chat-rat::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 8px;
    width: 18px;
    height: 2px;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, rgba(207, 116, 119, 0.28), #d77f82 42%, #e29391);
    transform: rotate(-10deg);
    transform-origin: 100% 50%;
    animation: cityChatRatTail 0.34s ease-in-out infinite alternate;
}

.city-chat-rat--one {
    left: 142px;
    top: 466px;
    animation: cityChatRatRunRight 18s linear 0s infinite;
}

.city-chat-rat--two {
    left: 683px;
    top: 468px;
    animation: cityChatRatRunLeft 18s linear 3s infinite;
}

.city-chat-rat--three {
    left: 143px;
    top: 468px;
    animation: cityChatRatRunRightLow 18s linear 6s infinite;
}

@keyframes cityChatRatRunRight {
    0% {
        opacity: 0;
        transform: translate(0, 0) scaleX(1);
    }
    1% {
        opacity: 1;
    }
    8% { transform: translate(80px, 50px) scaleX(1); }
    15% { transform: translate(220px, 72px) scaleX(1); }
    22% { transform: translate(390px, 62px) scaleX(1); }
    28% { transform: translate(500px, 35px) scaleX(1); }
    31.5% {
        opacity: 1;
        transform: translate(541px, 0) scaleX(1);
    }
    33.3%, 100% {
        opacity: 0;
        transform: translate(541px, 0) scaleX(1);
    }
}

@keyframes cityChatRatRunLeft {
    0% {
        opacity: 0;
        transform: translate(0, 0) scaleX(-1);
    }
    1% {
        opacity: 1;
    }
    8% { transform: translate(-78px, 44px) scaleX(-1); }
    15% { transform: translate(-226px, 73px) scaleX(-1); }
    22% { transform: translate(-398px, 60px) scaleX(-1); }
    28% { transform: translate(-500px, 34px) scaleX(-1); }
    31.5% {
        opacity: 1;
        transform: translate(-540px, -2px) scaleX(-1);
    }
    33.3%, 100% {
        opacity: 0;
        transform: translate(-540px, -2px) scaleX(-1);
    }
}

@keyframes cityChatRatRunRightLow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scaleX(1);
    }
    1% {
        opacity: 1;
    }
    8% { transform: translate(92px, 62px) scaleX(1); }
    15% { transform: translate(245px, 86px) scaleX(1); }
    22% { transform: translate(405px, 75px) scaleX(1); }
    28% { transform: translate(505px, 38px) scaleX(1); }
    31.5% {
        opacity: 1;
        transform: translate(539px, -2px) scaleX(1);
    }
    33.3%, 100% {
        opacity: 0;
        transform: translate(539px, -2px) scaleX(1);
    }
}

@keyframes cityChatRatTail {
    from { transform: rotate(-14deg); }
    to { transform: rotate(8deg); }
}

@keyframes cityChatRatFeet {
    from { transform: translateX(-1px); }
    to { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .city-chat-chimney-smoke {
        display: none !important;
    }

    .city-chat-rats {
        display: none !important;
    }

    .city-chat-mainstreet-forest-mist {
        display: none !important;
    }

    .city-chat-cigarette-smoke,
    .city-chat-lounge-wall-lamp,
    .city-chat-donator-lounge-effects::before,
    .city-chat-donator-lounge-effects::after,
    .city-chat-chandelier-aura,
    .city-chat-chandelier-crystal,
    .city-chat-sportsbar-effects::before,
    .city-chat-sportsbar-effects::after,
    .city-chat-sportsbar-tv,
    .city-chat-sportsbar-tv::after,
    .city-chat-beer-puddle,
    .city-chat-market-sign,
    .city-chat-market-window-rain,
    .city-chat-donator-steam-icons > span,
    .city-chat-graveyard-rise-icons > span,
    .city-chat-graveyard-portal-mist > span,
    .city-chat-graveyard-portal-ravens .city-chat-graveyard-raven,
    .city-chat-graveyard-mist,
    .city-chat-graveyard-wisp,
    .city-chat-graveyard-raven,
    .city-chat-graveyard-quote.is-visible,
    .city-chat-graveyard-quote.is-fading,
    .city-chat-citizen.is-emote-dance .city-chat-citizen-visual,
    .city-chat-citizen.is-emote-laugh .city-chat-citizen-visual,
    .city-chat-citizen.is-emote-cry .city-chat-citizen-visual,
    .city-chat-citizen.is-emote-wave .city-chat-citizen-visual,
    .city-chat-emote-fx span,
    .city-chat-disco__ring,
    .city-chat-disco::after,
    .city-chat-gravestone__flame,
    .city-chat-spirit-gate__orb,
    .city-chat-spirit-gate__wisps i,
    .city-chat-spirit-goblet__flame,
    .city-chat-spirit-altar__aura,
    .city-chat-spirit-altar__item,
    .city-chat-ghost,
    .city-chat-ghost__glow,
    .city-chat-ghost__image,
    .city-chat-portal__beam,
    .city-chat-portal__ring,
    .city-chat-window-glows::before,
    .city-chat-window-glows::after,
    .city-chat-lantern-glows::before,
    .city-chat-lantern-glows::after,
    .city-chat-broken-alley-lamp,
    .city-chat-family-interior::before,
    .city-chat-hut-lantern,
    .city-chat-hut-fire,
    .city-chat-hut-heat,
    .city-chat-hut-embers > span,
    .city-chat-luxe-chandelier,
    .city-chat-luxe-cone,
    .city-chat-luxe-crystal,
    .city-chat-luxe-sconce,
    .city-chat-luxe-fire__glow,
    .city-chat-luxe-fire__flame,
    .city-chat-luxe-candle,
    .city-chat-luxe-windows,
    .city-chat-luxe-dust > span,
    .city-chat-biker-lamp,
    .city-chat-biker-floor,
    .city-chat-biker-smoke,
    .city-chat-live-icon,
    .city-chat-recruit-sign,
    #cityChatRoomOpenButton::after {
        animation: none !important;
    }

    .city-chat-graveyard-quote.is-visible {
        opacity: 0.94;
        filter: none;
        transform: translateX(-50%);
    }

    .city-chat-graveyard-quote.is-fading {
        opacity: 0;
        filter: none;
    }
}

.city-chat-players {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.city-chat-citizen {
    position: absolute;
    width: 76px;
    height: 126px;
    transform: translate(-50%, -100%);
    transform-origin: 50% 100%;
    cursor: pointer;
    pointer-events: auto;
    will-change: left, top;
}

.city-chat-stage:is([data-city-location="sports_bar"], [data-city-location="donator_lounge"], [data-city-location="market"], [data-city-location="family_house"], [data-city-location="graveyard"], [data-city-location="spirit_room"]) .city-chat-citizen {
    width: 88px;
    height: 145px;
}

.city-chat-citizen:hover .city-chat-citizen-visual,
.city-chat-citizen:focus-visible .city-chat-citizen-visual {
    filter: brightness(1.1) drop-shadow(0 0 7px rgba(255, 222, 132, 0.7)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.62));
}

.city-chat-citizen:focus-visible {
    outline: none;
}

.city-chat-citizen:hover .city-chat-citizen-name,
.city-chat-citizen:focus-visible .city-chat-citizen-name {
    border-color: rgba(255, 226, 151, 0.9);
}

.city-chat-citizen.is-remote {
    transition: left 0.72s linear, top 0.72s linear;
}

.city-chat-citizen-visual {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.62));
}

.city-chat-citizen-name {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    max-width: 230px;
    padding: 2px 6px;
    overflow: visible;
    color: white;
    background: rgba(0, 0, 0, 0.74);
    border: 1px solid rgba(255, 224, 157, 0.35);
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

.city-chat-citizen-name .title-name {
    vertical-align: baseline;
}

.city-chat-market-listing-badge {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 25px);
    z-index: 36;
    transform: translateX(-50%);
    padding: 3px 7px;
    color: #ffe4ec;
    background: rgba(70, 0, 22, 0.94);
    border: 1px solid rgba(181, 42, 84, 0.88);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.58);
    font-size: 9px;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
    pointer-events: none;
}

.city-chat-stage[data-city-location="market"] .city-chat-market-listing-badge {
    display: block;
}

.city-chat-stage[data-city-location="market"] .city-chat-citizen.is-being-inspected .city-chat-market-listing-badge {
    display: none;
}

.city-chat-stage[data-city-location="market"] .city-chat-bubble {
    bottom: calc(100% + 52px);
}

.city-chat-family-role {
    display: block;
    margin-bottom: 2px;
    color: #d5d5d5;
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000, 0 0 5px currentColor;
}

.city-chat-family-role.is-head {
    color: #ffd54a;
}

.city-chat-family-role.is-officer {
    color: #66ccff;
}

.city-chat-family-role.is-trusted {
    color: #72e58a;
}

.city-chat-family-role.is-member {
    color: #d5d5d5;
}

.city-chat-citizen-name .title-name.is-donator-title {
    zoom: 0.78;
}

.city-chat-citizen.is-self .city-chat-citizen-name {
    color: #fff3a7;
    border-color: rgba(255, 221, 84, 0.7);
}

.city-chat-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 28px);
    transform: translate(-50%, 6px) scale(0.96);
    width: max-content;
    max-width: 210px;
    padding: 7px 9px;
    opacity: 0;
    visibility: hidden;
    color: #1f1b14;
    background: #fff8e7;
    border: 1px solid #44382b;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 50;
}

.city-chat-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff8e7;
}

.city-chat-bubble.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

.city-chat-control-hint {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 5px 8px;
    color: #ddd3c1;
    background: rgba(0, 0, 0, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    font-size: 10px;
    pointer-events: none;
    z-index: 1000;
}

.city-chat-emote-bar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1001;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 340px;
    pointer-events: auto;
}

.city-chat-stage[data-city-location="family_house"] .city-chat-emote-bar {
    bottom: 52px;
}

.city-chat-emote-bar button {
    padding: 5px 8px;
    border: 1px solid rgba(255, 224, 157, 0.32);
    border-radius: 6px;
    color: #f4ead0;
    background: rgba(12, 16, 12, 0.82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    cursor: pointer;
    text-shadow: 0 1px 2px #000;
}

.city-chat-emote-bar button:hover,
.city-chat-emote-bar button:focus-visible {
    border-color: rgba(255, 226, 151, 0.88);
    background: rgba(42, 36, 18, 0.94);
    outline: none;
}

.city-chat-emote-bar button.is-active {
    color: #23180c;
    background: linear-gradient(#ffe08a, #e2b34a);
    border-color: #fff1c2;
    text-shadow: none;
    box-shadow: 0 0 10px rgba(255, 210, 110, 0.35);
}

.city-chat-emote-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 22px);
    z-index: 40;
    transform: translateX(-50%);
    max-width: 140px;
    padding: 1px 7px;
    overflow: hidden;
    color: #f7edd4;
    background: rgba(22, 16, 10, 0.86);
    border: 1px solid rgba(255, 214, 140, 0.48);
    border-radius: 999px;
    font-size: 9px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
    pointer-events: none;
}

.city-chat-emote-label[hidden] {
    display: none;
}

.city-chat-stage[data-city-location="family_house"] .city-chat-emote-label {
    bottom: calc(100% + 44px);
}

.city-chat-citizen.is-emoting .city-chat-bubble {
    bottom: calc(100% + 46px);
}

.city-chat-stage[data-city-location="family_house"] .city-chat-citizen.is-emoting .city-chat-bubble {
    bottom: calc(100% + 68px);
}

.city-chat-citizen.is-emoting .city-chat-market-listing-badge {
    bottom: calc(100% + 44px);
}

.city-chat-emote-fx {
    display: none;
    position: absolute;
    left: 50%;
    top: 8%;
    width: 54px;
    height: 54px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 6;
}

.city-chat-citizen.is-emote-dance .city-chat-emote-fx,
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx,
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx,
.city-chat-citizen.is-emote-cry .city-chat-emote-fx,
.city-chat-citizen.is-emote-wave .city-chat-emote-fx {
    display: block;
}

.city-chat-emote-fx span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #ffe9a8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    opacity: 0;
}

.city-chat-citizen.is-emote-dance .city-chat-citizen-visual {
    transform-origin: 50% 100%;
    animation: cityChatEmoteDance 0.8s cubic-bezier(0.45, 0.12, 0.2, 1) infinite;
}

.city-chat-disco {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 130px;
    height: 130px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 4;
}

.city-chat-citizen.is-emote-dance .city-chat-disco {
    display: block;
}

.city-chat-disco::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 78px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    filter: blur(3px);
    mix-blend-mode: screen;
    animation: cityChatDiscoFloor 0.8s ease-in-out infinite;
}

.city-chat-disco__ring {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 98px;
    height: 98px;
    margin: -49px 0 0 -49px;
    animation: cityChatDiscoSpin 2.6s linear infinite;
}

.city-chat-disco__ring span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    opacity: 0.9;
    filter: blur(0.4px);
    box-shadow: 0 0 10px currentColor, 0 0 18px currentColor;
    mix-blend-mode: screen;
    transform: rotate(var(--r, 0deg)) translateY(-46px);
    animation: cityChatDiscoPulse 0.4s ease-in-out infinite;
}

.city-chat-disco__ring span:nth-child(1) { --r: 0deg; color: #ff2b7a; background: #ff2b7a; }
.city-chat-disco__ring span:nth-child(2) { --r: 60deg; color: #2ef0ff; background: #2ef0ff; animation-delay: -0.07s; }
.city-chat-disco__ring span:nth-child(3) { --r: 120deg; color: #c45cff; background: #c45cff; animation-delay: -0.14s; }
.city-chat-disco__ring span:nth-child(4) { --r: 180deg; color: #ffe14a; background: #ffe14a; animation-delay: -0.21s; }
.city-chat-disco__ring span:nth-child(5) { --r: 240deg; color: #4dff9a; background: #4dff9a; animation-delay: -0.28s; }
.city-chat-disco__ring span:nth-child(6) { --r: 300deg; color: #ff7a2e; background: #ff7a2e; animation-delay: -0.35s; }

.city-chat-citizen.is-emote-dance .city-chat-emote-fx {
    top: 0;
}

.city-chat-citizen.is-emote-dance .city-chat-emote-fx__a { animation: cityChatEmoteNote 0.8s ease-out infinite; }
.city-chat-citizen.is-emote-dance .city-chat-emote-fx__b { animation: cityChatEmoteNote 0.8s ease-out infinite 0.2s; }
.city-chat-citizen.is-emote-dance .city-chat-emote-fx__c { animation: cityChatEmoteNote 0.8s ease-out infinite 0.4s; }
.city-chat-citizen.is-emote-dance .city-chat-emote-fx__a::before { content: '♪'; }
.city-chat-citizen.is-emote-dance .city-chat-emote-fx__b::before { content: '♫'; color: #ffd4ef; }
.city-chat-citizen.is-emote-dance .city-chat-emote-fx__c::before { content: '✨'; color: #fff4b8; }

.city-chat-citizen.is-emote-sleep .city-chat-citizen-visual {
    transform-origin: 50% 80%;
    transform: translateY(8px) rotate(-11deg);
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.62)) brightness(0.92);
}

.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__a,
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__b,
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__c {
    color: #c9e7ff;
    font-size: 12px;
    font-style: italic;
}
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__a { animation: cityChatEmoteZzz 2.2s ease-out infinite; }
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__b { animation: cityChatEmoteZzz 2.2s ease-out infinite 0.7s; }
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__c { animation: cityChatEmoteZzz 2.2s ease-out infinite 1.4s; }
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__a::before { content: 'z'; }
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__b::before { content: 'Z'; }
.city-chat-citizen.is-emote-sleep .city-chat-emote-fx__c::before { content: 'Zz'; }

.city-chat-citizen.is-emote-laugh .city-chat-citizen-visual {
    transform-origin: 50% 100%;
    animation: cityChatEmoteLaugh 0.38s ease-in-out infinite;
}

.city-chat-citizen.is-emote-laugh .city-chat-emote-fx span {
    color: #ffe38a;
    font-size: 11px;
    font-style: italic;
}
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx__a { animation: cityChatEmoteNote 0.9s ease-out infinite; }
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx__b { animation: cityChatEmoteNote 0.9s ease-out infinite 0.22s; }
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx__c { animation: cityChatEmoteNote 0.9s ease-out infinite 0.44s; }
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx__a::before { content: 'ha'; }
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx__b::before { content: 'ha'; }
.city-chat-citizen.is-emote-laugh .city-chat-emote-fx__c::before { content: 'haha'; }

.city-chat-citizen.is-emote-cry .city-chat-citizen-visual {
    transform-origin: 50% 100%;
    animation: cityChatEmoteCry 0.9s ease-in-out infinite;
}

.city-chat-citizen.is-emote-cry .city-chat-emote-fx span {
    width: 5px;
    height: 8px;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    background: linear-gradient(#9ad8ff, #4f9fd6);
    box-shadow: 0 0 4px rgba(120, 190, 255, 0.7);
    color: transparent;
}
.city-chat-citizen.is-emote-cry .city-chat-emote-fx__a { left: 38%; animation: cityChatEmoteTear 1.1s linear infinite; }
.city-chat-citizen.is-emote-cry .city-chat-emote-fx__b { left: 58%; animation: cityChatEmoteTear 1.1s linear infinite 0.35s; }
.city-chat-citizen.is-emote-cry .city-chat-emote-fx__c { left: 48%; animation: cityChatEmoteTear 1.1s linear infinite 0.7s; }

.city-chat-citizen.is-emote-wave .city-chat-citizen-visual {
    transform-origin: 50% 88%;
    animation: cityChatEmoteWave 1.2s ease-in-out infinite;
}

.city-chat-citizen.is-emote-wave .city-chat-emote-fx__a {
    animation: cityChatEmoteNote 1s ease-out infinite;
    font-size: 16px;
}
.city-chat-citizen.is-emote-wave .city-chat-emote-fx__a::before { content: '👋'; }
.city-chat-citizen.is-emote-wave .city-chat-emote-fx__b,
.city-chat-citizen.is-emote-wave .city-chat-emote-fx__c {
    display: none;
}

@keyframes cityChatEmoteDance {
    0%, 100% { transform: translate(-8px, 2px) rotate(-6deg); }
    18% { transform: translate(-8px, -11px) rotate(-9deg); }
    32% { transform: translate(-8px, 1px) rotate(-3deg); }
    50% { transform: translate(8px, 2px) rotate(6deg); }
    68% { transform: translate(8px, -11px) rotate(9deg); }
    82% { transform: translate(8px, 1px) rotate(3deg); }
}

@keyframes cityChatDiscoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes cityChatDiscoPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes cityChatDiscoFloor {
    0%, 100% { background: rgba(255, 45, 130, 0.78); box-shadow: 0 0 16px rgba(255, 45, 130, 0.7); }
    33% { background: rgba(40, 230, 255, 0.78); box-shadow: 0 0 16px rgba(40, 230, 255, 0.7); }
    66% { background: rgba(170, 80, 255, 0.78); box-shadow: 0 0 16px rgba(170, 80, 255, 0.7); }
}

@keyframes cityChatEmoteLaugh {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-6px) rotate(4deg) scale(1.03); }
}

@keyframes cityChatEmoteCry {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-2px); }
}

@keyframes cityChatEmoteWave {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(4deg); }
}

@keyframes cityChatEmoteNote {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(0.7); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(12px, -28px) scale(1.15); }
}

@keyframes cityChatEmoteZzz {
    0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(10px, -30px) scale(1.2); }
}

@keyframes cityChatEmoteTear {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 28px) scale(0.85); }
}

.city-chat-console {
    height: 276px;
    box-sizing: border-box;
    padding: 10px 16px 8px;
    background: linear-gradient(#111913, #090d0a);
}

.city-chat-log {
    height: 174px;
    box-sizing: border-box;
    padding: 9px 11px;
    overflow-y: auto;
    color: #ddd;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(153, 190, 137, 0.2);
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.45;
}

.city-chat-empty {
    padding: 35px 10px;
    color: #758276;
    text-align: center;
}

.city-chat-message {
    display: flex;
    gap: 7px;
    padding: 3px 1px;
    overflow-wrap: anywhere;
}

.city-chat-message-name {
    flex-shrink: 0;
    color: #d5b66f;
    font-weight: bold;
    cursor: pointer;
}

.city-chat-message-name:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #f0d48a;
}

.city-chat-message.is-self .city-chat-message-name {
    color: #b9df9e;
}

.city-chat-message-time {
    flex-shrink: 0;
    margin-left: auto;
    color: #667066;
    font-size: 9px;
}

.city-chat-form {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 9px;
}

.city-chat-form input {
    min-width: 0;
    flex: 1;
    box-sizing: border-box;
    padding: 10px 64px 10px 11px;
    color: #f2f2f2;
    background: #171d18;
    border: 1px solid rgba(167, 203, 150, 0.35);
    border-radius: 7px;
    outline: none;
    font-size: 13px;
}

.city-chat-form input:focus {
    border-color: rgba(197, 230, 178, 0.72);
    box-shadow: 0 0 0 2px rgba(105, 153, 82, 0.15);
}

.city-chat-form button {
    width: 84px;
    padding: 8px 12px;
}

.city-chat-form button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.city-chat-character-count {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    color: #778078;
    font-size: 10px;
    pointer-events: none;
}

.city-chat-feedback {
    min-height: 16px;
    padding-top: 4px;
    color: #d6c38c;
    font-size: 10px;
    text-align: center;
}

.city-chat-leave-button:hover,
.city-chat-form button:hover:not(:disabled) {
    filter: brightness(1.16);
}

/* Delivery job — image-free GoobVille route map */
.delivery-map {
    position: relative;
    height: 450px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 205, 92, 0.28);
    border-radius: 9px;
    box-sizing: border-box;
    isolation: isolate;
}

.delivery-map--intro {
    background: #111 url('images/diliveryoutside.png') center / cover no-repeat;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.28), 0 5px 16px rgba(0, 0, 0, 0.28);
}

.delivery-map--city {
    background-color: #142117;
    background-image:
        linear-gradient(90deg, transparent 0 8%, #303a34 8% 15%, transparent 15% 35%, #303a34 35% 42%, transparent 42% 61%, #303a34 61% 68%, transparent 68% 84%, #303a34 84% 91%, transparent 91%),
        linear-gradient(0deg, transparent 0 13%, #303a34 13% 21%, transparent 21% 42%, #303a34 42% 50%, transparent 50% 68%, #303a34 68% 76%, transparent 76%),
        radial-gradient(circle at 50% 48%, rgba(74, 118, 63, 0.46) 0 10%, transparent 27%),
        radial-gradient(circle at 18% 72%, rgba(45, 92, 51, 0.52), transparent 29%),
        radial-gradient(circle at 82% 25%, rgba(60, 104, 50, 0.42), transparent 31%),
        linear-gradient(145deg, #1e3421, #0e1811);
    box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.72), 0 5px 16px rgba(0, 0, 0, 0.28);
}

.delivery-map--city::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.36;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 21px, rgba(255, 255, 255, 0.055) 22px 23px),
        repeating-linear-gradient(0deg, transparent 0 21px, rgba(0, 0, 0, 0.12) 22px 23px);
    mix-blend-mode: overlay;
}

.delivery-map--city::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border: 7px solid rgba(5, 9, 6, 0.46);
    border-radius: 8px;
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.74);
}

.delivery-map__heading {
    position: absolute;
    top: 11px;
    left: 50%;
    z-index: 8;
    min-width: 240px;
    padding: 7px 18px 6px;
    transform: translateX(-50%);
    color: #ffe39a;
    background: linear-gradient(180deg, rgba(55, 40, 20, 0.96), rgba(24, 18, 11, 0.96));
    border: 1px solid rgba(245, 192, 74, 0.58);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 13px rgba(245, 192, 74, 0.12);
    text-align: center;
    pointer-events: none;
}

.delivery-map__heading strong,
.delivery-map__heading span {
    display: block;
}

.delivery-map__heading strong {
    font: 800 17px/1.05 Georgia, serif;
    letter-spacing: 2px;
}

.delivery-map__heading span {
    margin-top: 3px;
    color: #c8a96b;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 2.5px;
}

.delivery-map__empty {
    position: absolute;
    left: 50%;
    top: 54%;
    z-index: 5;
    padding: 9px 14px;
    transform: translate(-50%, -50%);
    color: #d9c390;
    background: rgba(8, 13, 9, 0.82);
    border: 1px solid rgba(217, 195, 144, 0.25);
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.delivery-map__compass {
    position: absolute;
    top: 15px;
    right: 16px;
    z-index: 7;
    width: 37px;
    height: 37px;
    color: #efd58d;
    background: rgba(8, 13, 9, 0.76);
    border: 1px solid rgba(239, 213, 141, 0.35);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    text-align: center;
    pointer-events: none;
}

.delivery-map__compass strong {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
}

.delivery-map__compass span {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 6px solid transparent;
    border-bottom: 19px solid #d95642;
    border-left: 6px solid transparent;
    filter: drop-shadow(0 1px 1px #000);
}

.delivery-map__landmark {
    position: absolute;
    left: var(--map-x);
    top: var(--map-y);
    z-index: 2;
    width: 66px;
    height: 31px;
    transform: translate(-50%, -100%);
    background:
        linear-gradient(90deg, transparent 0 8px, rgba(255, 224, 128, 0.72) 8px 13px, transparent 13px 25px, rgba(255, 224, 128, 0.62) 25px 30px, transparent 30px 43px, rgba(255, 224, 128, 0.68) 43px 48px, transparent 48px),
        linear-gradient(180deg, color-mix(in srgb, var(--landmark-accent) 52%, #222), #171b18);
    border: 2px solid color-mix(in srgb, var(--landmark-accent) 70%, #17120b);
    border-radius: 3px 3px 2px 2px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.58), 0 0 9px color-mix(in srgb, var(--landmark-accent) 22%, transparent);
    box-sizing: border-box;
    pointer-events: none;
}

.delivery-map__landmark::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -9px;
    height: 9px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--landmark-accent) 72%, #24190e), #17120d);
    border: 1px solid rgba(0, 0, 0, 0.68);
    clip-path: polygon(8% 100%, 18% 0, 82% 0, 94% 100%);
}

.delivery-map__landmark > span {
    position: absolute;
    left: 50%;
    bottom: 4px;
    max-width: 60px;
    transform: translateX(-50%);
    overflow: hidden;
    color: #f8e8bb;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

.delivery-map__landmark--hall {
    width: 80px;
    height: 38px;
}

.delivery-map__route {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.delivery-map__route line {
    vector-effect: non-scaling-stroke;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 7;
}

.delivery-map__route line.is-upcoming {
    stroke: rgba(255, 172, 56, 0.54);
}

.delivery-map__route line.is-complete {
    stroke: rgba(93, 214, 112, 0.88);
}

.delivery-map__marker {
    position: absolute;
    left: var(--map-x);
    top: var(--map-y);
    z-index: 6;
    width: 21px;
    height: 21px;
    transform: translate(-50%, -38%);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50% 50% 50% 7px;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.72);
    font-size: 8px;
    font-weight: 900;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

.delivery-map__marker > span {
    transform: rotate(45deg);
}

.delivery-map__marker--upcoming {
    transform: translate(-50%, -38%) rotate(-45deg);
    background: #d9871f;
    opacity: 0.76;
}

.delivery-map__marker--complete {
    transform: translate(-50%, -38%) rotate(-45deg);
    background: #3f8e4d;
    opacity: 0.9;
}

.delivery-map__marker--active {
    width: 28px;
    height: 28px;
    transform: translate(-50%, -38%) rotate(-45deg);
    background: #ff4938;
    border-color: #fff1b5;
    animation: deliveryMapLocationBlink 0.9s ease-in-out infinite;
}

.delivery-map__active-label {
    position: absolute;
    left: var(--map-x);
    top: var(--map-y);
    z-index: 7;
    min-width: 112px;
    padding: 5px 8px;
    transform: translate(-50%, 26px);
    color: #fff1bd;
    background: rgba(18, 12, 8, 0.94);
    border: 1px solid rgba(255, 192, 76, 0.58);
    border-radius: 5px;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.55);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.25px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.delivery-map__active-label strong,
.delivery-map__active-label span {
    display: block;
}

.delivery-map__active-label strong {
    color: #ff6a55;
    font-size: 8px;
    letter-spacing: 0.8px;
}

.delivery-map__active-label span {
    margin-top: 2px;
}

.delivery-map--mailroom {
    background-color: #1c1c1c;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.5), 0 5px 16px rgba(0, 0, 0, 0.28);
}

.delivery-map__mailroom-label {
    position: absolute;
    left: 50%;
    top: 18px;
    padding: 7px 13px;
    transform: translateX(-50%);
    color: #eee;
    background: rgba(20, 20, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.46);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.4px;
}

@keyframes deliveryMapLocationBlink {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(255, 73, 56, 0.62), 0 0 10px rgba(255, 73, 56, 0.82), 0 4px 8px rgba(0, 0, 0, 0.7);
    }
    50% {
        filter: brightness(1.3);
        box-shadow: 0 0 0 10px rgba(255, 73, 56, 0), 0 0 23px rgba(255, 187, 65, 0.96), 0 4px 8px rgba(0, 0, 0, 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .delivery-map__marker--active {
        animation: none;
        box-shadow: 0 0 0 6px rgba(255, 73, 56, 0.2), 0 0 18px rgba(255, 187, 65, 0.9), 0 4px 8px rgba(0, 0, 0, 0.7);
    }
}

/* Player death state: at 0% Health only this memorial and the Hospital remain usable. */
.player-death-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    display: none;
    width: calc(100vw / var(--game-zoom, 1));
    height: calc(100vh / var(--game-zoom, 1));
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    color: #eee;
    background: #000;
    isolation: isolate;
}

.player-death-overlay::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -54%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 241, 255, 0.12) 0%, rgba(94, 126, 158, 0.045) 42%, transparent 72%);
    pointer-events: none;
}

.player-death-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    transform: translateY(-2%);
}

.player-death-quote {
    position: absolute;
    left: 50%;
    top: -112px;
    width: min(560px, 84vw);
    margin: 0;
    padding: 0 10px;
    transform: translateX(-50%);
    color: rgba(238, 245, 255, 0.94);
    font-family: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
    font-size: clamp(19px, 2vw, 27px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow:
        0 0 13px rgba(218, 237, 255, 0.62),
        0 0 30px rgba(137, 177, 218, 0.34),
        0 2px 4px rgba(0, 0, 0, 0.92);
    opacity: 0;
    filter: blur(9px);
    pointer-events: none;
}

.player-death-quote.is-playing {
    animation: playerDeathQuoteJourney 8.4s ease-in-out forwards;
}

.player-death-overlay.is-hospital-open .player-death-content {
    visibility: hidden;
    pointer-events: none;
}

.player-death-grave {
    position: relative;
    width: 430px;
    height: 300px;
    filter: drop-shadow(0 15px 18px rgba(0, 0, 0, 0.82));
    animation: playerDeathGraveFloat 5.2s ease-in-out infinite;
}

.player-death-clouds {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 510px;
    height: 410px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: visible;
    pointer-events: none;
}

.player-death-clouds::before {
    content: '';
    position: absolute;
    inset: 28px 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 29% 38%, rgba(161, 165, 171, 0.48) 0%, rgba(116, 120, 126, 0.2) 31%, transparent 57%),
        radial-gradient(circle at 71% 35%, rgba(143, 147, 153, 0.42) 0%, rgba(104, 108, 114, 0.17) 33%, transparent 59%),
        radial-gradient(circle at 56% 73%, rgba(151, 155, 161, 0.44) 0%, rgba(110, 114, 120, 0.18) 34%, transparent 61%);
    filter: blur(26px);
    opacity: 0.88;
}

.player-death-clouds span {
    position: absolute;
    display: block;
    width: 205px;
    height: 105px;
    border-radius: 47% 53% 58% 42% / 57% 44% 56% 43%;
    filter: blur(22px);
    --death-cloud-opacity: 0.72;
    --death-cloud-rotation: 0deg;
    --death-cloud-delay: 0s;
    --death-cloud-duration: 8s;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: playerDeathCloudBillow var(--death-cloud-duration) ease-out infinite;
    animation-delay: var(--death-cloud-delay);
}

.player-death-cloud--grey,
.player-death-cloud--red,
.player-death-cloud--green {
    background: radial-gradient(ellipse at 48% 52%, rgba(140, 140, 140, 0.78) 0%, rgba(120, 120, 120, 0.46) 38%, rgba(86, 86, 86, 0.12) 62%, transparent 76%);
}

.player-death-clouds--back {
    z-index: 0;
    opacity: 0.72;
    animation: playerDeathCloudDriftBack 10s ease-in-out infinite alternate;
}

.player-death-clouds--back span:nth-child(1) { left: -10px; top: 115px; width: 228px; height: 132px; --death-cloud-rotation: -7deg; --death-cloud-delay: -1.4s; }
.player-death-clouds--back span:nth-child(2) { left: 64px; top: 5px; width: 230px; height: 138px; --death-cloud-rotation: 5deg; --death-cloud-opacity: 0.54; --death-cloud-delay: -5.2s; --death-cloud-duration: 9.2s; }
.player-death-clouds--back span:nth-child(3) { right: 54px; top: -7px; width: 226px; height: 142px; --death-cloud-rotation: -4deg; --death-cloud-opacity: 0.56; --death-cloud-delay: -3.5s; --death-cloud-duration: 8.6s; }
.player-death-clouds--back span:nth-child(4) { right: -8px; top: 118px; width: 235px; height: 134px; --death-cloud-rotation: 7deg; --death-cloud-delay: -6.7s; --death-cloud-duration: 9.5s; }
.player-death-clouds--back span:nth-child(5) { right: 42px; top: 260px; width: 220px; height: 126px; --death-cloud-opacity: 0.48; --death-cloud-delay: -7.4s; --death-cloud-duration: 10s; }
.player-death-clouds--back span:nth-child(6) { left: 38px; top: 265px; width: 220px; height: 122px; --death-cloud-opacity: 0.48; --death-cloud-delay: -2.6s; --death-cloud-duration: 8.9s; }

.player-death-clouds--front {
    z-index: 4;
    opacity: 0.7;
    animation: playerDeathCloudDriftFront 8.5s ease-in-out infinite alternate;
}

.player-death-clouds--front::before {
    inset: 230px 42px 18px;
    filter: blur(25px);
}

.player-death-clouds--front span:nth-child(1) { left: -7px; top: 220px; width: 218px; height: 112px; --death-cloud-rotation: 5deg; --death-cloud-opacity: 0.58; --death-cloud-delay: -4.8s; }
.player-death-clouds--front span:nth-child(2) { left: 74px; top: 291px; width: 235px; height: 110px; --death-cloud-rotation: -3deg; --death-cloud-delay: -1.9s; --death-cloud-duration: 9.4s; }
.player-death-clouds--front span:nth-child(3) { right: 70px; top: 292px; width: 228px; height: 108px; --death-cloud-rotation: 5deg; --death-cloud-opacity: 0.54; --death-cloud-delay: -6.1s; --death-cloud-duration: 8.7s; }
.player-death-clouds--front span:nth-child(4) { right: -7px; top: 218px; width: 216px; height: 114px; --death-cloud-rotation: -5deg; --death-cloud-delay: -3.2s; --death-cloud-duration: 9.8s; }
.player-death-clouds--front span:nth-child(5) { left: 148px; top: 315px; width: 214px; height: 96px; --death-cloud-opacity: 0.46; --death-cloud-delay: -7.7s; --death-cloud-duration: 10.2s; }

.player-death-earth {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 19px;
    width: 270px;
    height: 56px;
    transform: translateX(-50%);
    border-radius: 50% 48% 52% 50% / 62% 58% 42% 46%;
    background:
        radial-gradient(circle at 22% 38%, #5f4125 0 6px, transparent 7px),
        radial-gradient(circle at 74% 58%, #32200f 0 4px, transparent 5px),
        radial-gradient(circle at 48% 28%, #694523 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 48%, #513518 0%, #38230f 68%, #1b1008 100%);
    box-shadow: inset 0 3px 0 rgba(105, 74, 39, 0.25), 0 3px 0 rgba(8, 5, 2, 0.5);
    opacity: 0.32;
}

.player-death-stone {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 43px;
    width: 178px;
    height: 225px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 25px 16px 20px;
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 13% 16%, rgba(72, 96, 44, 0.86) 0 7%, transparent 19%),
        radial-gradient(ellipse at 83% 11%, rgba(61, 82, 39, 0.66) 0 8%, transparent 21%),
        linear-gradient(168deg, #908a7e 0%, #686258 47%, #39362f 100%);
    border: 4px solid #28221b;
    border-radius: 46px 46px 8px 8px;
    box-shadow:
        0 7px 0 #14110e,
        0 11px 18px rgba(0, 0, 0, 0.68),
        inset 0 2px 0 rgba(255, 255, 255, 0.14),
        inset -12px -10px 24px rgba(0, 0, 0, 0.18);
}

.player-death-stone::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 46px;
    width: 37px;
    height: 54px;
    opacity: 0.4;
    background:
        linear-gradient(128deg, transparent 0 45%, #28251f 46% 50%, transparent 51%) 0 0 / 24px 31px no-repeat,
        linear-gradient(52deg, transparent 0 45%, #28251f 46% 50%, transparent 51%) 13px 21px / 24px 31px no-repeat;
    pointer-events: none;
}

.player-death-rip {
    position: relative;
    z-index: 1;
    color: #1b1b19;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.player-death-name {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    width: 100%;
    max-height: 64px;
    overflow: hidden;
    color: #171715;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.player-death-candle {
    position: absolute;
    z-index: 5;
    left: 116px;
    bottom: 52px;
    width: 20px;
    height: 49px;
    border: 2px solid #5a4a22;
    border-radius: 2px 2px 4px 4px;
    background: linear-gradient(90deg, #c8b274 0%, #fff1c2 44%, #d5bd7a 100%);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 139, 36, 0.15);
}

.player-death-candle::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 8px;
    width: 5px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 250, 222, 0.25);
}

.player-death-flame {
    position: absolute;
    left: 50%;
    top: -25px;
    width: 17px;
    height: 27px;
    transform: translateX(-50%);
    transform-origin: 50% 90%;
    border-radius: 55% 45% 52% 48%;
    background: radial-gradient(circle at 50% 72%, #fffbd2 0%, #ffc156 40%, #ff6a00 74%, transparent 79%);
    filter: drop-shadow(0 0 7px rgba(255, 140, 0, 0.95));
    animation: playerDeathFlame 0.72s ease-in-out infinite alternate;
}

.player-death-music-toggle {
    position: absolute;
    z-index: 10;
    top: 16px;
    right: 54px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(225, 236, 243, 0.42);
    border-radius: 50%;
    color: #f3f7fa;
    background: rgba(17, 22, 26, 0.78);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.62), 0 0 16px rgba(166, 205, 226, 0.14);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.player-death-music-toggle:hover,
.player-death-music-toggle:focus-visible {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(35, 44, 50, 0.9);
    outline: none;
}

.player-death-music-toggle.is-muted {
    color: #a5adb2;
    border-color: rgba(165, 173, 178, 0.28);
}

.player-death-hospital-button {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: -12px;
    min-width: 210px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
    background: red;
    box-shadow: none;
    font: 700 18px/1 Arial, sans-serif;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.player-death-hospital-button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.player-death-hospital-button:hover,
.player-death-hospital-button:focus-visible {
    background: darkred;
    outline: none;
}

.player-death-hospital-button:active {
    background: #750000;
}

body.player-dead-hospital-open #hospitalMenu {
    position: fixed !important;
    left: calc(50vw / var(--game-zoom, 1)) !important;
    top: calc(50vh / var(--game-zoom, 1)) !important;
    z-index: 100001 !important;
}

body.player-dead-hospital-open #darkDistrictStatsBar {
    display: block !important;
    z-index: 100002 !important;
}

@keyframes playerDeathFlame {
    from { opacity: 0.74; transform: translateX(-50%) rotate(-2deg) scale(0.88); }
    to { opacity: 1; transform: translateX(-50%) rotate(2deg) scale(1.1); }
}

@keyframes playerDeathQuoteJourney {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateX(-50%) translateY(16px) scale(0.97);
    }
    16%, 58% {
        opacity: 0.96;
        filter: blur(0.1px);
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(12px);
        transform: translateX(-50%) translateY(-12px) scale(1.025);
        letter-spacing: 0.09em;
    }
}

@keyframes playerDeathGraveFloat {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-7px); }
}

@keyframes playerDeathCloudBillow {
    0% {
        opacity: 0.04;
        transform: translate3d(-3px, 18px, 0) scale(0.72) rotate(var(--death-cloud-rotation));
    }
    24% {
        opacity: var(--death-cloud-opacity);
    }
    58% {
        opacity: var(--death-cloud-opacity);
        transform: translate3d(4px, -13px, 0) scale(1.02) rotate(var(--death-cloud-rotation));
    }
    100% {
        opacity: 0.03;
        transform: translate3d(-1px, -47px, 0) scale(1.27) rotate(var(--death-cloud-rotation));
    }
}

@keyframes playerDeathCloudDriftBack {
    from { transform: translate(-51%, -50%) scale(0.98); opacity: 0.67; }
    to { transform: translate(-49%, -50%) scale(1.025); opacity: 0.82; }
}

@keyframes playerDeathCloudDriftFront {
    from { transform: translate(-49.5%, -50%) scale(1.01); }
    to { transform: translate(-50.8%, -50%) scale(0.97); }
}

@media (max-width: 560px) {
    .player-death-content {
        transform: translateY(-1%) scale(0.9);
    }

    .player-death-quote {
        top: -102px;
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-death-flame {
        animation: none;
    }

    .player-death-grave,
    .player-death-clouds,
    .player-death-clouds span,
    .player-death-quote.is-playing {
        animation: none;
    }

    .player-death-clouds span {
        opacity: 0.62;
    }

    .player-death-quote.is-playing {
        opacity: 0.96;
        filter: none;
    }
}
/* One-Click Needs: same red nav look; only unfolds details on hover. */
.house-all-needs-button {
    position: absolute !important;
    top: 60px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0;
    margin: 0 !important;
    padding: 5px 8px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 5px !important;
    background: red !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65) !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    isolation: isolate;
    z-index: 1000 !important;
}

.house-all-needs-button[style*="display: block"] {
    display: flex !important;
}

.house-all-needs-button:hover:not(:disabled),
.house-all-needs-button:focus-visible:not(:disabled),
.house-all-needs-button.is-unlocked:hover:not(:disabled),
.house-all-needs-button.is-unlocked:focus-visible:not(:disabled) {
    background: red !important;
    min-width: 196px !important;
}

.house-all-needs-button:active:not(:disabled) {
    transform: none;
}

.house-all-needs-button.is-unlocked {
    background: red !important;
}

.house-all-needs-button.is-pending,
.house-all-needs-button:disabled {
    cursor: wait !important;
    filter: saturate(0.65);
    opacity: 0.86 !important;
}

.house-all-needs-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    pointer-events: none;
}

.house-all-needs-title,
.house-all-needs-cost {
    display: inline-flex;
    align-items: center;
    pointer-events: none;
}

.house-all-needs-title {
    font-size: 16px;
    font-weight: 700;
}

.house-all-needs-cost {
    gap: 3px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.house-all-needs-details {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 12px;
    row-gap: 6px;
    width: 0;
    min-width: 100%;
    max-width: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.18s ease, margin 0.18s ease, padding 0.18s ease, opacity 0.12s ease;
}

.house-all-needs-button:hover:not(:disabled) .house-all-needs-details,
.house-all-needs-button:focus-visible:not(:disabled) .house-all-needs-details {
    width: max-content;
    min-width: 100%;
    max-height: 150px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 1;
}

.house-all-needs-hint {
    grid-column: 1 / -1;
    max-width: 230px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal !important;
}

.house-all-needs-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.house-all-needs-need-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    pointer-events: none;
}

.house-all-needs-blue-goob-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    object-fit: contain;
    vertical-align: -3px;
    pointer-events: none;
}

.house-all-needs-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: auto !important;
}

.house-all-needs-dialog {
    width: min(430px, calc(100vw - 40px));
    margin: 300px 20px 20px 20px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(40, 40, 40, 0.97), rgba(20, 20, 20, 0.97));
    color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.house-all-needs-dialog h3 {
    margin: 0;
    padding: 12px 15px;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.house-all-needs-dialog-body {
    padding: 16px 18px 18px;
}

.house-all-needs-dialog p {
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.4;
}

.house-all-needs-dialog-benefit {
    margin: 14px 0 !important;
    padding: 11px 12px;
    border-left: 4px solid #ff4444;
    border-radius: 7px;
    background: rgba(192, 57, 43, 0.18);
    color: #fff !important;
    font-weight: 800;
}

.house-all-needs-dialog-balance {
    margin: 14px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
}

.house-all-needs-dialog-balance > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0;
    color: #fff;
    font-size: 14px;
}

.house-all-needs-dialog-balance strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
}

.house-all-needs-dialog-remaining {
    margin: 7px 0 0 !important;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.house-all-needs-dialog-remaining .house-all-needs-blue-goob-icon {
    margin-left: 3px;
}

.house-all-needs-dialog-remaining.is-insufficient {
    color: #ff6666 !important;
}

.house-all-needs-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.house-all-needs-dialog-actions button {
    padding: 8px 20px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto !important;
}

.house-all-needs-dialog-cancel {
    background: #666;
}

.house-all-needs-dialog-cancel:hover {
    background: #555;
}

.house-all-needs-dialog-confirm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: red;
}

.house-all-needs-dialog-confirm:hover {
    background: darkred;
}

/* ===== Pokemon-style Battle Hall ===== */
.battle-menu-body {
    height: calc(970px - 48px);
    overflow: hidden;
    position: relative;
}

.battle-select-wrap {
    height: 100%;
    overflow: hidden;
    padding: 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.battle-select-wrap #npcSelectionScreen {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.battle-select-intro {
    flex-shrink: 0;
    margin-bottom: 12px;
    background: rgba(192, 57, 43, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    border-left: 4px solid #C0392B;
}

.battle-select-intro p {
    margin: 0;
    line-height: 1.4;
    font-size: 0.95em;
}

.battle-select-intro-guide {
    background: none;
    border: none;
    padding: 0;
    color: #ffd27a;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
    font-family: inherit;
}

.battle-select-intro-guide:hover {
    color: #ffe7a8;
}

.battle-select-arena {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.battle-npc-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(30, 30, 30, 0.6);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.battle-npc-panel-header {
    flex-shrink: 0;
    background: linear-gradient(to right, rgba(123, 36, 28, 0.8), rgba(192, 57, 43, 0.8));
    padding: 12px 15px;
}

.battle-npc-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.pk-battle-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2;
    background: #0a0a0c;
}

.pk-battle-field {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pk-hall-wall {
    position: absolute;
    inset: 0;
    background: #1c1816 url('images/battlebackground.png') center center / cover no-repeat;
}

.pk-hall-wall::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 23.5% 27.5%, rgba(255, 198, 92, 0.42), transparent 9%),
        radial-gradient(circle at 79.7% 27.5%, rgba(255, 198, 92, 0.42), transparent 9%),
        radial-gradient(ellipse at 23.5% 75%, rgba(255, 164, 55, 0.16), transparent 25%),
        radial-gradient(ellipse at 79.7% 75%, rgba(255, 164, 55, 0.16), transparent 25%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 55%, rgba(0, 0, 0, 0.18));
    pointer-events: none;
    animation: pkAmbientLight 5s ease-in-out infinite;
}

.pk-hall-wall::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg at 23.5% 27.5%, transparent 0deg 165deg, rgba(255, 194, 102, 0.13) 169deg 193deg, transparent 197deg 360deg),
        conic-gradient(from 0deg at 79.7% 27.5%, transparent 0deg 165deg, rgba(255, 194, 102, 0.13) 169deg 193deg, transparent 197deg 360deg);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: pkLightBeamFlicker 4.4s ease-in-out infinite;
}

.pk-hall-graffiti {
    display: none;
}

.pk-tag {
    position: absolute;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    mix-blend-mode: screen;
}

.pk-tag-1 { left: 7%; top: 12%; color: #ff4d6d; font-size: 42px; transform: rotate(-12deg); font-family: Impact, 'Arial Black', sans-serif; text-shadow: 3px 3px 0 #3b0010; }
.pk-tag-2 { left: 38%; top: 6%; color: #7cff6b; font-size: 28px; transform: rotate(8deg); font-family: 'Comic Sans MS', Impact, sans-serif; }
.pk-tag-3 { right: 10%; top: 16%; color: #ffd93d; font-size: 36px; transform: rotate(14deg); font-family: Impact, sans-serif; }
.pk-tag-4 { left: 22%; top: 32%; color: #c084fc; font-size: 64px; transform: rotate(-6deg); font-family: Impact, sans-serif; opacity: 0.28; }
.pk-tag-5 { right: 28%; top: 28%; color: #67e8f9; font-size: 22px; transform: rotate(-18deg); font-family: Impact, sans-serif; }

.pk-hall-neon {
    display: none;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 22px;
    letter-spacing: 8px;
    color: #ff4d4d;
    text-shadow:
        0 0 6px #ff1a1a,
        0 0 16px #ff1a1a,
        0 0 32px rgba(255, 40, 40, 0.8);
    animation: pkNeonFlicker 3.6s infinite;
    z-index: 3;
    pointer-events: none;
}

.pk-hall-lights {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    pointer-events: none;
    z-index: 4;
}

.pk-bulb {
    position: absolute;
    top: 8px;
    width: 70px;
    height: 18px;
    border-radius: 0 0 40px 40px;
    background: rgba(255, 214, 120, 0.85);
    box-shadow:
        0 18px 40px rgba(255, 190, 80, 0.35),
        0 40px 80px rgba(255, 140, 40, 0.18);
}

.pk-bulb-1 { left: 12%; animation: pkBulbFlicker 2.8s infinite; }
.pk-bulb-2 { left: 46%; animation: pkBulbFlicker 4.1s infinite 0.4s; }
.pk-bulb-3 { right: 12%; animation: pkBulbFlicker 3.3s infinite 1.1s; }

.pk-hall-floor {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 90, 40, 0.12), transparent 55%),
        linear-gradient(180deg, #2a2422 0%, #161210 40%, #0c0a0a 100%);
    box-shadow: inset 0 18px 40px rgba(0, 0, 0, 0.55);
}

.pk-hall-floor::before {
    content: '';
    position: absolute;
    inset: 12% 6% 8%;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 28px),
        linear-gradient(180deg, rgba(80, 70, 65, 0.35), rgba(20, 16, 14, 0.8));
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
    opacity: 0.55;
}

.pk-hall-haze {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(255, 80, 40, 0.08), transparent 40%),
        radial-gradient(ellipse at 75% 35%, rgba(80, 160, 255, 0.07), transparent 36%);
    animation: pkHazePulse 5s ease-in-out infinite;
    z-index: 1;
    overflow: hidden;
}

.pk-hall-haze::before,
.pk-hall-haze::after {
    content: '';
    position: absolute;
    left: -20%;
    bottom: 5%;
    width: 140%;
    height: 30%;
    background:
        radial-gradient(ellipse at 12% 65%, rgba(220, 226, 224, 0.15) 0%, transparent 24%),
        radial-gradient(ellipse at 38% 45%, rgba(210, 218, 216, 0.12) 0%, transparent 27%),
        radial-gradient(ellipse at 67% 62%, rgba(225, 230, 228, 0.13) 0%, transparent 25%),
        radial-gradient(ellipse at 91% 42%, rgba(210, 218, 216, 0.1) 0%, transparent 24%);
    filter: blur(14px);
    opacity: 0.55;
    transform: translateX(-4%);
    animation: pkFloorFog 13s ease-in-out infinite alternate;
}

.pk-hall-haze::after {
    bottom: 0;
    opacity: 0.32;
    transform: translateX(5%) scaleY(0.75);
    animation-duration: 17s;
    animation-direction: alternate-reverse;
}

.battle-arena-rain {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.battle-arena-rain span {
    position: absolute;
    top: -70px;
    width: 2px;
    height: 46px;
    border-radius: 0 0 50% 50%;
    opacity: 0;
    background: linear-gradient(
        to bottom,
        rgba(218, 235, 242, 0),
        rgba(218, 235, 242, 0.62)
    );
    box-shadow: 0 0 2px rgba(190, 225, 238, 0.25);
    transform: rotate(7deg);
    animation: battleArenaRainFall 1.45s linear infinite;
}

.battle-arena-rain span:nth-child(1)  { left: 4%;  animation-delay: -0.7s;  animation-duration: 1.35s; }
.battle-arena-rain span:nth-child(2)  { left: 11%; animation-delay: -1.2s;  animation-duration: 1.62s; height: 37px; }
.battle-arena-rain span:nth-child(3)  { left: 19%; animation-delay: -0.15s; animation-duration: 1.42s; }
.battle-arena-rain span:nth-child(4)  { left: 27%; animation-delay: -1.5s;  animation-duration: 1.72s; height: 52px; }
.battle-arena-rain span:nth-child(5)  { left: 34%; animation-delay: -0.9s;  animation-duration: 1.3s; }
.battle-arena-rain span:nth-child(6)  { left: 42%; animation-delay: -1.8s;  animation-duration: 1.58s; height: 39px; }
.battle-arena-rain span:nth-child(7)  { left: 49%; animation-delay: -0.4s;  animation-duration: 1.4s; }
.battle-arena-rain span:nth-child(8)  { left: 57%; animation-delay: -1.1s;  animation-duration: 1.68s; height: 54px; }
.battle-arena-rain span:nth-child(9)  { left: 64%; animation-delay: -0.6s;  animation-duration: 1.32s; }
.battle-arena-rain span:nth-child(10) { left: 71%; animation-delay: -1.7s;  animation-duration: 1.55s; height: 41px; }
.battle-arena-rain span:nth-child(11) { left: 79%; animation-delay: -0.25s; animation-duration: 1.46s; }
.battle-arena-rain span:nth-child(12) { left: 86%; animation-delay: -1.35s; animation-duration: 1.74s; height: 50px; }
.battle-arena-rain span:nth-child(13) { left: 92%; animation-delay: -0.8s;  animation-duration: 1.38s; }
.battle-arena-rain span:nth-child(14) { left: 97%; animation-delay: -1.95s; animation-duration: 1.64s; height: 43px; }

@keyframes battleArenaRainFall {
    0% {
        opacity: 0;
        transform: translate3d(22px, -60px, 0) rotate(7deg);
    }
    8% { opacity: 0.72; }
    88% { opacity: 0.5; }
    100% {
        opacity: 0;
        transform: translate3d(-42px, 760px, 0) rotate(7deg);
    }
}

.pk-industrial-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.pk-steam {
    position: absolute;
    bottom: 16%;
    width: 74px;
    height: 42px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(215, 224, 219, 0.52) 0%, rgba(184, 196, 191, 0.22) 46%, transparent 72%);
    filter: blur(7px);
    opacity: 0;
    transform: translateY(0) scale(0.35);
    animation: pkSteamBurst 5.4s ease-out infinite;
}

.pk-steam-left { left: 3%; }
.pk-steam-right {
    right: 3%;
    animation-name: pkSteamBurstRight;
}
.pk-steam-2 { animation-delay: 0.45s; left: 5%; }
.pk-steam-3 { animation-delay: 0.9s; left: 1%; }
.pk-steam-4 { animation-delay: 2.7s; }
.pk-steam-5 { animation-delay: 3.15s; right: 5%; }
.pk-steam-6 { animation-delay: 3.6s; right: 1%; }

.pk-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff4a3;
    box-shadow:
        0 0 5px #fff,
        0 0 10px #ffb000,
        0 0 18px #ff5a00;
    opacity: 0;
    animation: pkSparkFall 3.8s linear infinite;
}

.pk-spark::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(to top, #fff5af, rgba(255, 114, 0, 0));
    transform: rotate(-26deg);
    transform-origin: bottom;
}

.pk-spark-1 { left: 23.5%; top: 27.5%; animation-delay: 0s; }
.pk-spark-2 { left: 24.5%; top: 28.5%; animation-delay: 0.22s; animation-duration: 3.8s; }
.pk-spark-3 { left: 22.5%; top: 27%; animation-delay: 0.48s; animation-duration: 3.8s; }
.pk-spark-4 { right: 20.3%; top: 27.5%; animation-delay: 1.9s; }
.pk-spark-5 { right: 19.3%; top: 28.5%; animation-delay: 2.14s; animation-duration: 3.8s; }
.pk-spark-6 { right: 21.3%; top: 27%; animation-delay: 2.42s; animation-duration: 3.8s; }
.pk-spark-7 { left: 10%; top: 38%; animation-delay: 3.05s; animation-duration: 5.7s; }
.pk-spark-8 { right: 9%; top: 36%; animation-delay: 4.1s; animation-duration: 6.2s; }

.pk-ember {
    position: absolute;
    bottom: 7%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffb23e;
    box-shadow: 0 0 7px #ff641e;
    opacity: 0;
    animation: pkEmberRise 6s ease-out infinite;
}

.pk-ember-1 { left: 14%; animation-delay: 0.3s; }
.pk-ember-2 { left: 42%; animation-delay: 2.1s; animation-duration: 7.2s; }
.pk-ember-3 { right: 36%; animation-delay: 3.7s; animation-duration: 6.6s; }
.pk-ember-4 { right: 12%; animation-delay: 1.2s; animation-duration: 7.8s; }

.pk-hud {
    position: absolute;
    z-index: 8;
    min-width: 270px;
    max-width: 340px;
    padding: 12px 14px 10px;
    background:
        linear-gradient(24deg, transparent 43%, rgba(20, 20, 20, 0.42) 44% 47%, transparent 48%) 0 0 / 76px 54px,
        linear-gradient(-18deg, transparent 52%, rgba(255, 199, 78, 0.18) 53% 56%, transparent 57%) 20px 8px / 105px 68px,
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(48, 19, 8, 0.68) 22px 25px),
        repeating-linear-gradient(90deg, transparent 0 52px, rgba(45, 17, 7, 0.58) 52px 55px),
        linear-gradient(145deg, #b84c18 0%, #85300f 55%, #5e1e0b 100%);
    border: 4px solid #241812;
    border-radius: 7px;
    box-shadow:
        0 0 0 2px #8c6748,
        0 0 0 5px #18120f,
        6px 7px 0 rgba(0, 0, 0, 0.48),
        inset 0 0 18px rgba(0, 0, 0, 0.46),
        inset 0 2px 0 rgba(255, 183, 95, 0.28);
    color: #fff8e9;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    text-shadow: 2px 2px 0 rgba(34, 12, 4, 0.9);
}

.pk-hud::before,
.pk-hud::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d8b28b 0 14%, #6c4c35 35%, #241812 72%);
    box-shadow: 0 1px 2px #000;
}

.pk-hud::before { left: 6px; }
.pk-hud::after { right: 6px; }

.pk-hud-enemy::after,
.pk-hud-player::after {
    box-shadow:
        0 1px 2px #000,
        -18px 37px 0 -1px rgba(255, 197, 51, 0.28),
        -11px 32px 0 -2px rgba(255, 197, 51, 0.4);
}

.pk-hud-enemy {
    top: 18px;
    right: 16px;
    left: auto;
}

.pk-hud-player {
    top: 18px;
    left: 16px;
    right: auto;
    bottom: auto;
}

.pk-hud-name {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff4da;
}

.pk-hud-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.pk-hud-level {
    font-weight: 900;
    font-size: 14px;
    color: #ffe17a;
}

.pk-hud-hp-row,
.pk-hud-xp-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}

.pk-hud-label {
    font-size: 12px;
    font-weight: 900;
    color: #ffe06a;
    width: 43px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-shadow: 1px 2px 0 #381307;
}

.pk-hud-hp-row .pk-hud-label::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: url('images/hearthicon.png') center / contain no-repeat;
    filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.8));
}

.pk-hp-track,
.pk-xp-track {
    flex: 1;
    height: 14px;
    background: #160d09;
    border: 3px solid #17100d;
    border-radius: 5px;
    overflow: hidden;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.9),
        0 1px 0 rgba(255, 200, 130, 0.25);
}

.pk-hp-fill,
.pk-xp-fill {
    height: 100%;
    transition: width 0.3s;
}

.pk-hp-fill-enemy {
    background: linear-gradient(to bottom, #ff766d 0%, #e2362c 45%, #9e160e 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 0 8px rgba(255, 55, 35, 0.6);
}

.pk-hp-fill-player {
    background: linear-gradient(to bottom, #70f29b 0%, #22b95b 45%, #0e7134 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 0 8px rgba(45, 225, 105, 0.55);
}

.pk-xp-fill {
    background: linear-gradient(to bottom, #ffe76c 0%, #f4b716 48%, #b26907 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 0 7px rgba(255, 193, 30, 0.55);
}

.pk-hud-hp-text,
.pk-hud-xp-text {
    min-width: 64px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    color: #ffffff;
    text-align: right;
    letter-spacing: 0.2px;
    text-shadow:
        2px 2px 0 #311006,
        0 0 4px rgba(0, 0, 0, 0.9);
}

.pk-hud-weapon {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 2px solid rgba(255, 204, 122, 0.25);
    font-size: 12px;
    font-weight: 900;
    color: #fff4dd;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.pk-hud-str {
    color: #ffe06a;
}

.pk-actor {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.pk-actor-enemy {
    top: auto;
    left: 69%;
    right: auto;
    bottom: 17%;
    width: 220px;
    transform: translateX(-50%);
}

.pk-actor-player {
    left: 31%;
    bottom: 17%;
    width: 210px;
    transform: translateX(-50%);
}

.pk-platform {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(90, 70, 55, 0.85) 0%, rgba(20, 14, 12, 0.95) 70%);
    box-shadow:
        0 0 0 3px rgba(40, 30, 24, 0.9),
        0 10px 18px rgba(0, 0, 0, 0.55),
        inset 0 0 18px rgba(255, 120, 60, 0.12);
    z-index: 1;
}

.pk-platform-enemy { bottom: 8px; width: 170px; height: 34px; }
.pk-platform-player { bottom: 0; width: 210px; height: 46px; }

.pk-actor-visual {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pk-actor-enemy .pk-actor-visual {
    transform-origin: 50% 80%;
}

.pk-actor-player .pk-actor-visual {
    transform-origin: 50% 85%;
    min-width: 190px;
}

.pk-actor-enemy #enemySprite {
    max-width: 168px;
    max-height: 176px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.65));
    image-rendering: auto;
}

.pk-actor-player #weaponSprite {
    position: absolute;
    right: -26px;
    bottom: 24px;
    width: 108px;
    height: 108px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 210, 80, 0.55)) drop-shadow(0 4px 4px rgba(0,0,0,0.6));
    z-index: 5;
}

.pk-player-citizen {
    width: 128px;
    height: 214px;
    position: relative;
}

.pk-player-base {
    position: relative;
    width: 100%;
    height: 100%;
}

.pk-player-base > div {
    pointer-events: none;
}

.pk-actor-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

.pk-hit-flash {
    position: absolute;
    inset: 8% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,80,40,0.0) 70%);
    animation: pkHitFlash 0.35s ease-out forwards;
}

.pk-heal-flash {
    position: absolute;
    inset: 8% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,255,150,0.75) 0%, rgba(40,180,80,0) 70%);
    animation: pkHitFlash 0.55s ease-out forwards;
}

.pk-shield-flash {
    position: absolute;
    inset: 4% 8%;
    border-radius: 50%;
    border: 4px solid rgba(80, 180, 255, 0.9);
    box-shadow: 0 0 18px rgba(80, 180, 255, 0.8), inset 0 0 18px rgba(80, 180, 255, 0.35);
    animation: pkShieldPulse 0.7s ease-out forwards;
}

.pk-dmg-float {
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 28px;
    color: #fff;
    text-shadow: 2px 2px 0 #7a0000, 0 0 8px #ff3b3b;
    animation: pkDmgFloat 0.85s ease-out forwards;
    pointer-events: none;
    z-index: 9;
}

.pk-dmg-float.is-crit { color: #ffe566; font-size: 34px; }
.pk-dmg-float.is-miss { color: #d0d0d0; font-size: 22px; text-shadow: 2px 2px 0 #333; }
.pk-dmg-float.is-heal { color: #7CFF9A; text-shadow: 2px 2px 0 #14532d; }

.pk-actor.is-attack-player .pk-actor-visual {
    animation: pkPlayerLunge 0.42s ease-in-out;
}

.pk-actor.is-attack-enemy .pk-actor-visual {
    animation: pkEnemyLunge 0.42s ease-in-out;
}

.pk-actor.is-hit .pk-actor-visual {
    animation: pkHitShake 0.38s linear;
}

.pk-actor.is-defend .pk-actor-visual {
    animation: pkDefendPose 0.55s ease-out;
}

.pk-actor.is-faint .pk-actor-visual {
    animation: pkFaint 0.7s ease-in forwards;
}

.pk-actor.is-idle-bob .pk-actor-visual {
    animation: pkIdleBob 2.4s ease-in-out infinite;
}

.pk-battle-bottom {
    flex: 0 0 236px;
    height: 236px;
    min-height: 236px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 10px;
    padding: 10px 12px 12px;
    background:
        linear-gradient(180deg, #1a1412 0%, #0e0c0c 100%);
    border-top: 3px solid #3a2a20;
    z-index: 8;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.pk-dialogue-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.pk-dialogue-box {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(22deg, transparent 45%, rgba(31, 15, 10, 0.48) 46% 49%, transparent 50%) 0 0 / 92px 65px,
        linear-gradient(-16deg, transparent 54%, rgba(255, 187, 64, 0.14) 55% 58%, transparent 59%) 18px 5px / 118px 74px,
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(49, 20, 9, 0.72) 30px 33px),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(47, 18, 8, 0.62) 72px 75px),
        linear-gradient(145deg, #a94317 0%, #78300f 58%, #4e1c0a 100%);
    border: 4px solid #1d1511;
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 2px #996f4d,
        inset 0 0 22px rgba(0, 0, 0, 0.5),
        3px 3px 0 rgba(0, 0, 0, 0.42);
    color: #fff6e3;
    padding: 10px 12px;
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
}

.pk-dialogue-title {
    flex: 0 0 auto;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 6px;
    color: #ffe06a;
    border-bottom: 2px solid rgba(255, 211, 128, 0.35);
    padding-bottom: 4px;
    text-shadow: 2px 2px 0 #2d0d04;
}

.pk-dialogue-log {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 1px 1px 0 rgba(35, 10, 3, 0.95);
}

.pk-dialogue-log p {
    color: #fff8e9 !important;
    overflow-wrap: anywhere;
}

.battle-goob-reward {
    display: inline;
    color: #65ed7d;
    font-weight: 900;
    line-height: inherit;
    text-shadow:
        1px 2px 0 #123d1b,
        0 0 7px rgba(62, 230, 95, 0.45);
}

.battle-goob-reward img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    margin: 0 3px 0 1px;
    vertical-align: -3px;
    filter: drop-shadow(0 0 4px rgba(72, 239, 106, 0.7));
}

.pk-food-menu {
    position: absolute;
    inset: 0;
    background: rgba(18, 32, 18, 0.96);
    border: 4px solid #2e7d32;
    border-radius: 10px;
    padding: 10px 12px;
    box-sizing: border-box;
    z-index: 3;
}

.pk-food-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.35);
    padding-bottom: 6px;
}

.pk-food-menu-header h4 {
    margin: 0;
    color: #4CAF50;
    font-size: 1.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pk-food-menu-header h4 img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.pk-food-menu-header button {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.pk-food-list {
    max-height: 168px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pk-command-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    background:
        linear-gradient(28deg, transparent 43%, rgba(36, 14, 7, 0.46) 44% 48%, transparent 49%) 0 0 / 88px 62px,
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(49, 20, 9, 0.72) 30px 33px),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(47, 18, 8, 0.62) 72px 75px),
        linear-gradient(145deg, #a94317 0%, #78300f 58%, #4e1c0a 100%);
    border: 4px solid #1d1511;
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 2px #996f4d,
        inset 0 0 20px rgba(0, 0, 0, 0.52),
        3px 3px 0 rgba(0, 0, 0, 0.42);
    padding: 8px;
}

.pk-cmd-btn {
    border: 3px solid #2b2118 !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-weight: 900 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    min-width: 0 !important;
    padding: 6px 4px !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.25) !important;
    text-shadow: none !important;
    letter-spacing: 0.6px;
    font-family: 'Courier New', Courier, monospace !important;
}

.pk-cmd-label {
    font-size: 1.05em;
    margin-bottom: 2px;
}

.pk-cmd-sub {
    font-size: 0.75em;
    font-weight: 700;
    opacity: 0.92;
    line-height: 1.15;
}

.pk-cmd-attack { background: linear-gradient(to bottom, #e74c3c, #922B21) !important; color: #fff !important; }
.pk-cmd-defend { background: linear-gradient(to bottom, #3498db, #1B4F72) !important; color: #fff !important; }
.pk-cmd-food { background: linear-gradient(to bottom, #2ecc71, #1e8449) !important; color: #fff !important; }
.pk-cmd-retreat { background: linear-gradient(to bottom, #95a5a6, #5D6D7E) !important; color: #fff !important; }

.pk-cmd-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.battle-skill-check {
    position: absolute;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(38, 17, 7, 0.34), rgba(0, 0, 0, 0.72));
    backdrop-filter: blur(1.5px);
}

.battle-skill-check__panel {
    width: min(520px, 72%);
    padding: 20px 24px 17px;
    box-sizing: border-box;
    border: 4px solid #08090a;
    border-radius: 8px;
    background:
        linear-gradient(112deg, transparent 0 22%, rgba(255,255,255,0.035) 23% 24%, transparent 25% 61%, rgba(255,255,255,0.025) 62% 63%, transparent 64%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 6px),
        linear-gradient(145deg, #3b3e42 0%, #242629 48%, #101113 100%);
    box-shadow:
        0 0 0 2px #777c82,
        8px 9px 0 rgba(0, 0, 0, 0.52),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 24px rgba(0, 0, 0, 0.72),
        0 0 30px rgba(0, 0, 0, 0.58);
    text-align: center;
    color: #fff5df;
    font-family: 'Courier New', Courier, monospace;
}

.battle-skill-check__eyebrow {
    color: #bfc5ca;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.battle-skill-check__title {
    margin: 4px 0 15px;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 27px;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 3px 3px 0 #08090a;
}

.battle-skill-check__track {
    position: relative;
    height: 34px;
    overflow: hidden;
    border: 4px solid #17100d;
    border-radius: 6px;
    background: #b51f18;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8);
}

.battle-skill-check.is-counting .battle-skill-check__track > :not(.battle-skill-check__countdown) {
    filter: blur(5px);
}

.battle-skill-check__countdown {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 13, 15, 0.42);
    color: #fff;
    font: 900 27px Impact, 'Arial Black', sans-serif;
    text-shadow: 0 2px 5px #000, 0 0 12px #ffbe3d;
    pointer-events: none;
}

.battle-skill-check.is-counting .battle-skill-check__countdown {
    display: flex;
}

.battle-skill-check__danger {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #ec5145 0%, #c6281e 48%, #8f160f 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.18);
}

.battle-skill-check__target {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30%;
    width: 44%;
    background: linear-gradient(180deg, #ffd36b, #f39819 52%, #a84b08);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.42),
        0 0 13px rgba(255, 157, 35, 0.72);
}

.battle-skill-check__target::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22.73%;
    width: 54.54%;
    background: linear-gradient(180deg, #7cff9b, #20c75b 52%, #0b7833);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.4),
        0 0 10px rgba(62, 255, 112, 0.68);
}

.battle-skill-check__target::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 46%;
    width: 8%;
    background: rgba(255, 246, 125, 0.75);
    box-shadow: 0 0 9px #fff26b;
}

.battle-skill-check__needle {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 42px;
    border-radius: 3px;
    background: #fff;
    box-shadow:
        0 0 0 2px #25130a,
        0 0 10px #fff,
        0 0 17px #ffd43b;
    transform: translateX(-50%);
    will-change: left;
}

.battle-skill-check__timer {
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(20, 10, 5, 0.72);
}

.battle-skill-check__timer > div {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f44336, #ffc107, #65e879);
    transform-origin: left center;
}

#battleSkillHitButton {
    min-width: 150px;
    margin-top: 13px;
    padding: 9px 25px;
    border: 3px solid #17100d;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffbe3d, #d55c13);
    box-shadow: 0 0 0 2px #a47a55, 3px 4px 0 rgba(0,0,0,0.45);
    color: #fff;
    font: 900 18px 'Courier New', Courier, monospace;
    text-shadow: 2px 2px 0 #6d2208;
    cursor: pointer;
}

#battleSkillHitButton:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

#battleSkillHitButton:disabled {
    cursor: default;
    opacity: 0.6;
    transform: none;
    filter: none;
}

.battle-skill-check__hint,
.battle-skill-check__risk {
    margin-top: 9px;
    font-size: 11px;
    font-weight: 900;
}

.battle-skill-check__hint { color: #fff3d1; }
.battle-skill-check__risk { color: #ffb0a8; }

.battle-skill-check.is-success .battle-skill-check__panel {
    animation: battleSkillSuccess 0.28s ease-out;
    box-shadow: 0 0 0 2px #70e88f, 0 0 35px rgba(68, 240, 112, 0.72);
}

.battle-skill-check.is-partial .battle-skill-check__panel {
    animation: battleSkillSuccess 0.28s ease-out;
    box-shadow: 0 0 0 2px #ffbd59, 0 0 35px rgba(255, 153, 35, 0.7);
}

.battle-skill-check.is-fail .battle-skill-check__panel {
    animation: battleSkillFail 0.35s linear;
    box-shadow: 0 0 0 2px #ff5d51, 0 0 35px rgba(255, 56, 43, 0.72);
}

@keyframes battleSkillSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); filter: brightness(1.35); }
    100% { transform: scale(1); }
}

@keyframes battleSkillFail {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(9px); }
    60% { transform: translateX(-7px); }
    80% { transform: translateX(5px); }
}

.battle-win-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    background: radial-gradient(circle, rgba(16, 42, 22, 0.42), rgba(0, 0, 0, 0.72));
    backdrop-filter: blur(1px);
}

.battle-win-message {
    color: #62f58d;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 82px;
    font-weight: 900;
    letter-spacing: 8px;
    text-shadow:
        4px 4px 0 #123b1d,
        0 0 16px rgba(46, 204, 113, 0.9),
        0 0 38px rgba(46, 204, 113, 0.65);
    animation: battleWinIn 0.5s cubic-bezier(.2, .9, .3, 1.25) both;
}

.battle-continue-button {
    min-width: 190px;
    padding: 13px 28px;
    border: 4px solid #19120e;
    border-radius: 7px;
    background: linear-gradient(180deg, #d96725, #8d2e0d);
    box-shadow:
        0 0 0 2px #b98a62,
        5px 6px 0 rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 220, 168, 0.35);
    color: #fff5dd;
    font-family: 'Courier New', Courier, monospace;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 0 #3a1005;
    cursor: pointer;
    animation: battleContinueIn 0.35s ease-out 0.35s both;
}

.battle-continue-button:hover {
    filter: brightness(1.16);
    transform: translateY(-2px);
}

.battle-continue-button:active {
    transform: translateY(2px);
    box-shadow:
        0 0 0 2px #b98a62,
        2px 2px 0 rgba(0, 0, 0, 0.5);
}

@keyframes battleWinIn {
    0% { opacity: 0; transform: scale(0.45) rotate(-5deg); }
    70% { opacity: 1; transform: scale(1.12) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

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

@keyframes pkNeonFlicker {
    0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
    20%, 22%, 81% { opacity: 0.35; }
    50% { opacity: 0.85; }
}

@keyframes pkBulbFlicker {
    0%, 86%, 100% { opacity: 1; }
    88% { opacity: 0.25; }
    90% { opacity: 1; }
    93% { opacity: 0.4; }
}

@keyframes pkHazePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes pkAmbientLight {
    0%, 100% { opacity: 0.65; filter: brightness(0.96); }
    48% { opacity: 1; }
    50% { opacity: 0.42; filter: brightness(0.82); }
    52% { opacity: 1; filter: brightness(1.12); }
    55% { opacity: 0.68; }
    58% { opacity: 1; filter: brightness(1); }
}

@keyframes pkLightBeamFlicker {
    0%, 100% { opacity: 0.72; }
    42% { opacity: 1; }
    44% { opacity: 0.2; }
    46% { opacity: 0.95; }
    48% { opacity: 0.35; }
    51% { opacity: 1; }
}

@keyframes pkFloorFog {
    0% { transform: translateX(-5%) scaleY(0.9); }
    50% { transform: translateX(1%) scaleY(1.08); }
    100% { transform: translateX(6%) scaleY(0.95); }
}

@keyframes pkSteamBurst {
    0%, 4% { opacity: 0; transform: translateY(0) translateX(0) scale(0.3); }
    10% { opacity: 0.72; }
    32% { opacity: 0.48; transform: translateY(-50px) translateX(16px) scale(1.05); }
    52%, 100% { opacity: 0; transform: translateY(-105px) translateX(30px) scale(1.7); }
}

@keyframes pkSteamBurstRight {
    0%, 4% { opacity: 0; transform: translateY(0) translateX(0) scale(0.3); }
    10% { opacity: 0.72; }
    32% { opacity: 0.48; transform: translateY(-50px) translateX(-16px) scale(1.05); }
    52%, 100% { opacity: 0; transform: translateY(-105px) translateX(-30px) scale(1.7); }
}

@keyframes pkSparkFall {
    0%, 58% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    60% { opacity: 1; }
    67% { opacity: 0.9; transform: translate(12px, 34px) scale(1); }
    76% { opacity: 0; transform: translate(-5px, 82px) scale(0.4); }
    100% { opacity: 0; transform: translate(-5px, 82px) scale(0.4); }
}

@keyframes pkEmberRise {
    0%, 30% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    36% { opacity: 0.8; }
    62% { opacity: 0.55; transform: translate(18px, -90px) scale(1); }
    82%, 100% { opacity: 0; transform: translate(-8px, -175px) scale(0.3); }
}

@keyframes pkPlayerLunge {
    0% { transform: translate(0, 0); }
    35% { transform: translate(46px, -18px) rotate(4deg); }
    100% { transform: translate(0, 0); }
}

@keyframes pkEnemyLunge {
    0% { transform: translate(0, 0); }
    35% { transform: translate(-48px, 16px) rotate(-3deg); }
    100% { transform: translate(0, 0); }
}

@keyframes pkHitShake {
    0%, 100% { transform: translateX(0); filter: none; }
    20% { transform: translateX(-10px); filter: brightness(2.2) saturate(0.2); }
    40% { transform: translateX(9px); filter: brightness(1.6); }
    60% { transform: translateX(-7px); }
    80% { transform: translateX(5px); }
}

@keyframes pkDefendPose {
    0% { transform: scale(1); }
    40% { transform: scale(0.92) translateY(6px); }
    100% { transform: scale(1); }
}

@keyframes pkFaint {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(28px) rotate(-18deg); opacity: 0.15; }
}

@keyframes pkIdleBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pkHitFlash {
    0% { opacity: 1; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes pkShieldPulse {
    0% { opacity: 1; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.25); }
}

@keyframes pkDmgFloat {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -36px); }
}

/* ===== Pokemon-style Block Challenge battles ===== */
.block-pk-menu {
    background: #0a0908 !important;
    color: #fff !important;
}

.block-pk-header {
    height: 48px;
    box-sizing: border-box;
    background: linear-gradient(90deg, #7b241c, #c0392b) !important;
    border-bottom: 3px solid #31130d;
    position: relative;
    z-index: 300;
}

.block-pk-body {
    height: calc(970px - 48px) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.block-pk-stage {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

.block-pk-backdrop {
    position: absolute;
    inset: 0 0 236px;
    overflow: hidden;
    background: #18100c url('images/theblockbg.png') center / cover no-repeat;
    z-index: 0;
}

.block-pk-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 41% 9.5%, rgba(255,153,49,.42), transparent 8%),
        radial-gradient(circle at 70% 42%, rgba(255,174,66,.38), transparent 8%),
        conic-gradient(from 0deg at 41% 9.5%, transparent 0deg 165deg, rgba(255,178,76,.12) 169deg 193deg, transparent 197deg 360deg),
        conic-gradient(from 0deg at 70% 42%, transparent 0deg 165deg, rgba(255,178,76,.11) 169deg 193deg, transparent 197deg 360deg),
        radial-gradient(ellipse at 41% 77%, rgba(255,135,34,.15), transparent 24%),
        radial-gradient(ellipse at 70% 78%, rgba(255,135,34,.15), transparent 24%),
        linear-gradient(180deg, rgba(0,0,0,0.06), transparent 60%, rgba(0,0,0,0.24));
    animation: pkAmbientLight 5s ease-in-out infinite;
}

.block-pk-backdrop::after {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: 0;
    height: 28%;
    background:
        radial-gradient(ellipse at 14% 70%, rgba(218,225,222,0.16), transparent 23%),
        radial-gradient(ellipse at 44% 50%, rgba(218,225,222,0.13), transparent 26%),
        radial-gradient(ellipse at 76% 66%, rgba(218,225,222,0.15), transparent 24%);
    filter: blur(14px);
    animation: pkFloorFog 14s ease-in-out infinite alternate;
}

.block-pk-steam {
    position: absolute;
    bottom: 11%;
    width: 80px;
    height: 52px;
    border-radius: 50%;
    opacity: 0;
    filter: blur(8px);
    background: radial-gradient(ellipse, rgba(220,228,224,0.5), rgba(185,196,191,0.16) 50%, transparent 72%);
    animation: pkSteamBurst 5.4s ease-out infinite;
}

.block-pk-steam-left { left: 2%; }
.block-pk-steam-right {
    right: 2%;
    animation-name: pkSteamBurstRight;
    animation-delay: 2.7s;
}

.block-pk-spark {
    position: absolute;
    top: 9%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    background: #fff4a3;
    box-shadow: 0 0 5px #fff, 0 0 11px #ff9d00, 0 0 18px #ff5200;
    animation: pkSparkFall 4s linear infinite;
}

.block-pk-spark-1 { left: 40%; }
.block-pk-spark-2 { left: 43%; animation-delay: .3s; }
.block-pk-spark-3 { right: 29%; top: 41%; animation-delay: 2s; }
.block-pk-spark-4 { right: 32%; top: 41%; animation-delay: 2.3s; }

/* Embers and flickering light over the burning barrel in the new alley artwork. */
.block-pk-barrel-fire {
    position: absolute;
    left: 72%;
    top: 54%;
    width: 56px;
    height: 48px;
    z-index: 2;
    pointer-events: none;
}

.block-pk-barrel-fire::before {
    content: '';
    position: absolute;
    left: -14px;
    bottom: -13px;
    width: 84px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 72%, rgba(255, 179, 51, .48), rgba(255, 86, 13, .2) 42%, transparent 73%);
    mix-blend-mode: screen;
    filter: blur(3px);
    animation: blockBarrelFireGlow 1.4s ease-in-out infinite alternate;
}

.block-pk-barrel-fire > span {
    position: absolute;
    bottom: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe590 0%, #ff9b24 40%, rgba(255, 71, 12, .75) 70%, transparent 90%);
    box-shadow: 0 0 7px rgba(255, 121, 17, .8);
    opacity: 0;
    animation: blockBarrelEmberRise 2s ease-out infinite;
}

.block-pk-barrel-fire > span:nth-child(1) { left: 12%; animation-delay: -0.2s; animation-duration: 1.8s; }
.block-pk-barrel-fire > span:nth-child(2) { left: 27%; animation-delay: -1.1s; animation-duration: 2.2s; }
.block-pk-barrel-fire > span:nth-child(3) { left: 42%; animation-delay: -0.6s; animation-duration: 1.9s; }
.block-pk-barrel-fire > span:nth-child(4) { left: 58%; animation-delay: -1.5s; animation-duration: 2.3s; }
.block-pk-barrel-fire > span:nth-child(5) { left: 76%; animation-delay: -0.9s; animation-duration: 1.7s; }
.block-pk-barrel-fire > span:nth-child(6) { left: 20%; animation-delay: -1.8s; animation-duration: 2.1s; }
.block-pk-barrel-fire > span:nth-child(7) { left: 52%; animation-delay: -0.3s; animation-duration: 2.4s; }
.block-pk-barrel-fire > span:nth-child(8) { left: 68%; animation-delay: -1.3s; animation-duration: 2s; }

@keyframes blockBarrelFireGlow {
    from { opacity: .55; transform: scale(.9); }
    to { opacity: .95; transform: scale(1.08); }
}

@keyframes blockBarrelEmberRise {
    0% { opacity: 0; transform: translate(0, 0) scale(.4); }
    12% { opacity: .95; }
    40% { opacity: .8; transform: translate(7px, -24px) scale(1); }
    72% { opacity: .4; transform: translate(-5px, -52px) scale(.65); }
    100% { opacity: 0; transform: translate(9px, -78px) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
    .block-pk-barrel-fire::before,
    .block-pk-barrel-fire > span { animation: none; }
}

.block-pk-boss-hud,
.block-pk-player-hud {
    position: absolute !important;
    top: 18px !important;
    z-index: 30 !important;
    width: 310px !important;
    min-height: 88px;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    border: 4px solid #241812 !important;
    border-radius: 7px !important;
    background:
        linear-gradient(25deg, transparent 43%, rgba(20,20,20,.4) 44% 47%, transparent 48%) 0 0/76px 54px,
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(48,19,8,.68) 22px 25px),
        repeating-linear-gradient(90deg, transparent 0 52px, rgba(45,17,7,.58) 52px 55px),
        linear-gradient(145deg, #b84c18, #85300f 55%, #5e1e0b) !important;
    box-shadow:
        0 0 0 2px #8c6748,
        0 0 0 5px #18120f,
        6px 7px 0 rgba(0,0,0,.45),
        inset 0 0 18px rgba(0,0,0,.46) !important;
    color: #fff8e9 !important;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    text-shadow: 2px 2px 0 rgba(34,12,4,.9);
}

.block-pk-boss-hud {
    right: 16px !important;
    left: auto !important;
}

.block-pk-player-hud {
    left: 16px !important;
    right: auto !important;
}

.block-pk-boss-hud span,
.block-pk-player-hud span,
.block-pk-player-hud div {
    color: #fff8e9;
}

.block-pk-boss-hud > div:first-child > div:first-child > span:first-child,
.block-pk-player-hud > div:first-child {
    color: #ffe06a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.block-pk-boss-hud > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 8px;
}

.block-pk-boss-hud > div:first-child > div:first-child {
    min-width: 0;
}

.block-pk-boss-hud > div:first-child > div:first-child > span {
    display: block;
    margin: 0 !important;
    line-height: 1.2;
}

.block-pk-boss-hud > div:first-child > div:first-child > span:nth-child(2) {
    margin-top: 3px !important;
    color: #d7b89e !important;
    font-size: 9px !important;
    white-space: normal;
}

.block-pk-boss-hud [id^="gymBossHPText_"],
.block-pk-player-hud [id^="gymPlayerHPText_"] {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

.block-pk-boss-hud > div:last-child,
.block-pk-player-hud > div:nth-child(3) {
    height: 13px !important;
    border: 3px solid #17100d;
    border-radius: 5px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.85);
}

.block-pk-arena {
    position: absolute !important;
    inset: 0 0 236px !important;
    z-index: 8 !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: none;
}

.block-pk-boss-actor {
    position: absolute !important;
    right: 18% !important;
    bottom: 11% !important;
    width: 210px !important;
    height: 230px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: none !important;
}

.block-pk-boss-actor::before,
.block-pk-player-actor .block-pk-platform {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 205px;
    height: 45px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(74,53,42,.88), rgba(17,12,10,.96) 70%);
    box-shadow: 0 0 0 3px rgba(38,27,22,.9), 0 10px 18px rgba(0,0,0,.55);
    z-index: -1;
}

.block-pk-boss-actor img {
    position: relative;
    z-index: 2;
    width: 185px !important;
    height: 185px !important;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0,0,0,.65)) !important;
}

.block-pk-versus {
    display: none !important;
}

.block-pk-player-actor {
    position: absolute;
    left: 18%;
    bottom: 310px;
    z-index: 12;
    width: 210px;
    height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.block-pk-player-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 190px;
}

.block-pk-citizen {
    position: relative;
    width: 128px;
    height: 214px;
}

.block-pk-citizen-base {
    position: relative;
    width: 100%;
    height: 100%;
}

.block-pk-arena-weapon {
    position: absolute;
    right: -24px;
    bottom: 23px;
    width: 108px;
    height: 108px;
    object-fit: contain;
    z-index: 8;
    filter: drop-shadow(0 0 8px rgba(255,210,80,.55)) drop-shadow(0 4px 4px rgba(0,0,0,.6));
}

.block-pk-log {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    z-index: 40 !important;
    width: calc(58% - 18px) !important;
    height: 210px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    overflow-y: auto !important;
    border: 4px solid #1d1511 !important;
    border-radius: 7px !important;
    background:
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(49,20,9,.72) 30px 33px),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(47,18,8,.62) 72px 75px),
        linear-gradient(145deg, #a94317, #78300f 58%, #4e1c0a) !important;
    box-shadow: inset 0 0 0 2px #996f4d, inset 0 0 22px rgba(0,0,0,.5) !important;
    color: #fff8e9;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-align: left;
    text-shadow: 1px 1px 0 rgba(35,10,3,.95);
}

.block-pk-log p {
    color: #fff8e9;
}

.block-pk-actions {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 40 !important;
    width: calc(42% - 18px) !important;
    height: 210px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 9px !important;
    border: 4px solid #1d1511;
    border-radius: 7px;
    background:
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(49,20,9,.72) 30px 33px),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(47,18,8,.62) 72px 75px),
        linear-gradient(145deg, #a94317, #78300f 58%, #4e1c0a);
    box-shadow: inset 0 0 0 2px #996f4d, inset 0 0 20px rgba(0,0,0,.52);
}

.block-pk-actions button {
    flex: none !important;
    width: auto !important;
    padding: 8px 5px !important;
    border: 3px solid #241812 !important;
    border-radius: 8px !important;
    font: 900 14px 'Courier New', monospace !important;
    opacity: 1;
    box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}

.block-pk-actions [id^="gymAttackBtn_"] {
    grid-column: 1 / -1;
    background: linear-gradient(#e74c3c, #922b21) !important;
}

.block-pk-actions [id^="gymDefendBtn_"] {
    background: linear-gradient(#3498db, #1b4f72) !important;
}

.block-pk-actions [id^="gymFoodBtn_"] {
    background: linear-gradient(#2ecc71, #1e8449) !important;
}

.block-pk-actions [id^="gymAttackWeaponImg_"] {
    width: 32px !important;
    height: 32px !important;
}

.block-pk-mash {
    position: absolute !important;
    left: 50% !important;
    top: 43% !important;
    transform: translate(-50%, -50%);
    z-index: 120 !important;
    width: 540px !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    box-sizing: border-box;
    border: 4px solid #08090a !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, #3b3e42, #242629 48%, #101113) !important;
    box-shadow: 0 0 0 2px #777c82, 8px 9px 0 rgba(0,0,0,.52), inset 0 0 24px rgba(0,0,0,.72) !important;
}

.block-pk-mash > div:first-child {
    color: #fff !important;
    font-size: 1.2em !important;
    letter-spacing: 1px;
}

.block-pk-mash [id^="gymMashBtn_"] {
    display: block;
    width: 250px !important;
    margin: 0 auto !important;
    padding: 18px !important;
    border: 4px solid #17100d !important;
    box-shadow: 0 0 0 2px #a47a55, 0 0 22px rgba(255,111,0,.5) !important;
}

.block-pk-food {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    z-index: 100 !important;
    width: calc(58% - 18px) !important;
    height: 210px;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(14,29,18,.97) !important;
    border: 4px solid #2e7d32 !important;
}

.block-pk-victory-overlay {
    position: absolute;
    inset: 0 0 236px;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(20,65,30,.3), rgba(0,0,0,.67));
    backdrop-filter: blur(1.5px);
}

.block-pk-victory-card {
    width: min(460px, 68%);
    padding: 24px 28px 21px;
    box-sizing: border-box;
    border: 4px solid #17110d;
    border-radius: 8px;
    background: linear-gradient(145deg, #33383a, #1c2021 58%, #0c0e0f);
    box-shadow:
        0 0 0 2px #7c8588,
        7px 8px 0 rgba(0,0,0,.52),
        inset 0 0 24px rgba(0,0,0,.72),
        0 0 38px rgba(55,225,105,.25);
    color: #f8fff8;
    text-align: center;
    font-family: 'Courier New', monospace;
}

.block-pk-victory-title {
    color: #65ed7d;
    font: 900 54px Impact, 'Arial Black', sans-serif;
    letter-spacing: 5px;
    text-shadow: 3px 3px 0 #123d1b, 0 0 18px rgba(62,230,95,.72);
    animation: battleWinIn .5s cubic-bezier(.2,.9,.3,1.25) both;
}

.block-pk-victory-summary {
    margin-top: 8px;
    color: #fff4d8;
    font-size: 14px;
    font-weight: 900;
}

.block-pk-victory-hint {
    margin: 9px auto 17px;
    max-width: 360px;
    color: #bfc7c4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.block-pk-continue-button {
    min-width: 190px;
    padding: 12px 28px;
    border: 4px solid #19120e;
    border-radius: 7px;
    background: linear-gradient(180deg, #d96725, #8d2e0d);
    box-shadow: 0 0 0 2px #b98a62, 5px 6px 0 rgba(0,0,0,.5);
    color: #fff5dd;
    font: 900 17px 'Courier New', monospace;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 0 #3a1005;
    cursor: pointer;
}

.block-pk-continue-button:hover {
    filter: brightness(1.16);
    transform: translateY(-2px);
}

.block-pk-player-actor.is-block-attacking .block-pk-player-visual {
    animation: blockPlayerAttack .45s ease-in-out;
}

.block-pk-boss-actor.is-block-attacking img {
    animation: blockBossAttack .45s ease-in-out;
}

.block-pk-player-actor.is-block-hit .block-pk-player-visual,
.block-pk-boss-actor.is-block-hit img {
    animation: pkHitShake .38s linear;
}

@keyframes blockPlayerAttack {
    0%, 100% { transform: translate(0,0); }
    42% { transform: translate(48px,-14px) rotate(3deg); }
}

@keyframes blockBossAttack {
    0%, 100% { transform: translate(0,0); }
    42% { transform: translate(-48px,12px) rotate(-3deg); }
}

/* Fixed pre-storm warning console. Its position stays anchored to the game field. */
#preStormAnnouncementMenu.pre-storm-alarm-menu {
    position: absolute;
    left: 50%;
    top: 430px;
    z-index: 14500;
    display: block;
    width: 610px;
    height: 310px;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid #d52222;
    border-radius: 12px;
    color: #f7f7f7;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(99, 116, 122, 0.48), transparent 52%),
        radial-gradient(ellipse at 14% 30%, rgba(84, 96, 102, 0.44), transparent 38%),
        linear-gradient(155deg, #26333a 0%, #131d23 46%, #080d11 100%);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.82),
        0 0 0 3px rgba(51, 5, 5, 0.85),
        0 0 38px rgba(255, 25, 25, 0.38);
    transform: translate(-50%, -50%);
    isolation: isolate;
}

#preStormAnnouncementMenu.pre-storm-alarm-menu::before {
    content: '';
    position: absolute;
    inset: 48px 0 0;
    z-index: -1;
    opacity: 0.18;
    background: repeating-linear-gradient(112deg, transparent 0 15px, rgba(199, 226, 235, 0.72) 16px 18px, transparent 19px 33px);
    transform: translate3d(-6%, -8%, 0);
    animation: preStormAlarmRain 1.05s linear infinite;
}

#preStormAnnouncementMenu.pre-storm-alarm-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 9px;
    pointer-events: none;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.82), inset 0 1px rgba(255, 255, 255, 0.15);
}

.pre-storm-alarm-menu__weather {
    position: absolute;
    inset: 48px 0 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.pre-storm-alarm-menu__cloud {
    position: absolute;
    width: 360px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.34;
    background:
        radial-gradient(ellipse at 22% 58%, #a1adb1 0 20%, transparent 21%),
        radial-gradient(ellipse at 48% 42%, #69777d 0 31%, transparent 32%),
        radial-gradient(ellipse at 76% 62%, #8b989d 0 23%, transparent 24%);
    filter: blur(11px);
    animation: preStormAlarmCloud 8s ease-in-out infinite alternate;
}

.pre-storm-alarm-menu__cloud--one {
    top: -35px;
    left: -70px;
}

.pre-storm-alarm-menu__cloud--two {
    right: -68px;
    bottom: -28px;
    animation-delay: -4s;
    animation-direction: alternate-reverse;
}

.pre-storm-alarm-menu__header {
    position: relative;
    z-index: 5;
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 8px 13px 8px 16px;
    border-bottom: 2px solid #ff3939;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px),
        linear-gradient(90deg, #620606, #c31111 50%, #620606);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.62), 0 0 16px rgba(255, 26, 26, 0.3);
}

.pre-storm-alarm-menu__header h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #fff;
    font-size: 1.18em;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-shadow: 0 2px 2px #420000, 0 0 10px rgba(255, 255, 255, 0.18);
}

.pre-storm-alarm-menu__header h3 span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.42);
}

.pre-storm-alarm-menu__close {
    position: relative;
    z-index: 6;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 7px;
    color: #fff;
    font: 700 25px/27px Arial, sans-serif;
    cursor: pointer;
    background: rgba(45, 0, 0, 0.55);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.pre-storm-alarm-menu__close:hover,
.pre-storm-alarm-menu__close:focus-visible {
    background: #e12929;
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.pre-storm-alarm-menu__body {
    position: relative;
    z-index: 2;
    display: flex;
    height: 262px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    padding: 17px 24px 13px;
}

.pre-storm-alarm-console {
    display: grid;
    grid-template-columns: 54px 45px 232px 45px 54px;
    align-items: center;
    justify-content: center;
    min-height: 102px;
}

.pre-storm-alarm-sign {
    position: relative;
    display: grid;
    min-height: 90px;
    place-content: center;
    box-sizing: border-box;
    padding: 8px 22px 7px;
    border: 3px solid #d6d9d9;
    border-radius: 8px;
    color: #fff;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 8px 8px, #d3d9da 0 2px, #4a5558 3px, transparent 4px),
        radial-gradient(circle at calc(100% - 8px) 8px, #d3d9da 0 2px, #4a5558 3px, transparent 4px),
        radial-gradient(circle at 8px calc(100% - 8px), #d3d9da 0 2px, #4a5558 3px, transparent 4px),
        radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #d3d9da 0 2px, #4a5558 3px, transparent 4px),
        linear-gradient(180deg, #9e0c0c, #540303);
    box-shadow:
        0 0 0 3px #2d3639,
        0 7px 13px rgba(0, 0, 0, 0.75),
        inset 0 1px rgba(255, 255, 255, 0.28),
        0 0 22px rgba(255, 25, 25, 0.4);
    animation: preStormAlarmSign 1.05s ease-in-out infinite;
}

.pre-storm-alarm-sign small {
    color: #ffd2d2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.31em;
    line-height: 1;
}

.pre-storm-alarm-sign strong {
    color: #fff;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: 31px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.05;
    text-shadow: 0 3px 0 #350000, 0 0 8px rgba(255, 255, 255, 0.38);
}

.pre-storm-alarm-sign > span {
    color: #ffcd4a;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.35em;
    line-height: 1;
    text-shadow: 0 2px 0 #3b1900;
}

.pre-storm-alarm-lamp {
    position: relative;
    display: block;
    width: 42px;
    height: 50px;
    justify-self: center;
}

.pre-storm-alarm-lamp::before {
    content: '';
    position: absolute;
    top: -11px;
    left: 50%;
    width: 82px;
    height: 46px;
    background: conic-gradient(from 15deg, transparent 0 35%, rgba(255, 25, 25, 0.68) 43%, transparent 51% 85%, rgba(255, 25, 25, 0.46) 93%, transparent 100%);
    filter: blur(3px);
    transform-origin: 50% 58%;
    animation: preStormAlarmLampSpin 0.82s linear infinite;
}

.pre-storm-alarm-lamp::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 8px;
    border: 2px solid #92999b;
    border-radius: 3px;
    background: linear-gradient(#3f484b, #121719);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.65);
}

.pre-storm-alarm-lamp i {
    position: absolute;
    top: 5px;
    left: 7px;
    width: 28px;
    height: 35px;
    box-sizing: border-box;
    border: 2px solid #ff7777;
    border-radius: 15px 15px 5px 5px;
    background: radial-gradient(circle at 48% 38%, #fff 0 6%, #ff4b3e 10% 26%, #e00000 45%, #5b0000 78%);
    box-shadow: inset 0 0 8px #ffb0a6, 0 0 10px #ff1717, 0 0 25px rgba(255, 0, 0, 0.88);
    animation: preStormAlarmLampPulse 0.41s ease-in-out infinite alternate;
}

.pre-storm-alarm-lamp--right::before {
    animation-direction: reverse;
}

.pre-storm-alarm-waves {
    position: relative;
    display: block;
    width: 43px;
    height: 52px;
    overflow: hidden;
}

.pre-storm-alarm-waves--left {
    transform: scaleX(-1);
}

.pre-storm-alarm-waves i {
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-right-color: #ff4b43;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    animation: preStormAlarmSoundWave 1.2s ease-out infinite;
}

.pre-storm-alarm-waves i:nth-child(1) {
    width: 24px;
    height: 24px;
}

.pre-storm-alarm-waves i:nth-child(2) {
    width: 43px;
    height: 43px;
    animation-delay: 0.2s;
}

.pre-storm-alarm-waves i:nth-child(3) {
    width: 62px;
    height: 62px;
    animation-delay: 0.4s;
}

.pre-storm-alarm-menu__message {
    margin: 3px 0 0;
    color: #dce4e6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 3px #000;
}

#preStormAnnouncementCountdown {
    display: block;
    margin: 0 0 9px;
    color: #ff564d;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    text-shadow: 0 0 6px #000, 0 0 15px rgba(255, 34, 27, 0.8);
}

.pre-storm-alarm-menu__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pre-storm-alarm-menu__confirm.alert-button.confirm,
.pre-storm-alarm-menu__guide.alert-button {
    min-width: 122px;
    margin: 0;
    padding: 9px 25px;
}

.pre-storm-alarm-menu__confirm.alert-button.confirm {
    border: 1px solid #89d294;
    background: linear-gradient(#238337, #116522);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.48), 0 0 13px rgba(36, 190, 65, 0.25);
}

.pre-storm-alarm-menu__guide.alert-button {
    border: 1px solid #ff8686;
    color: #fff;
    background: linear-gradient(#ce2727, #8e0808);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.48), 0 0 13px rgba(255, 37, 37, 0.28);
}

.pre-storm-alarm-menu__confirm.alert-button.confirm:hover,
.pre-storm-alarm-menu__confirm.alert-button.confirm:focus-visible,
.pre-storm-alarm-menu__guide.alert-button:hover,
.pre-storm-alarm-menu__guide.alert-button:focus-visible {
    filter: brightness(1.18);
    transform: translateY(-1px);
}

@keyframes preStormAlarmRain {
    to { transform: translate3d(3%, 10%, 0); }
}

@keyframes preStormAlarmCloud {
    from { transform: translateX(-18px) scale(1); }
    to { transform: translateX(24px) scale(1.14); }
}

@keyframes preStormAlarmLampSpin {
    to { transform: rotate(360deg); }
}

@keyframes preStormAlarmLampPulse {
    from { filter: brightness(0.72); opacity: 0.78; }
    to { filter: brightness(1.48); opacity: 1; }
}

@keyframes preStormAlarmSoundWave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.22); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translate(-13%, -50%) scale(1); }
}

@keyframes preStormAlarmSign {
    0%, 100% { filter: brightness(0.9); }
    50% { filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    #preStormAnnouncementMenu *,
    #preStormAnnouncementMenu::before {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Refined Storm Guide-inspired treatment: restrained colours and motion. */
#preStormAnnouncementMenu.pre-storm-alarm-menu {
    height: 350px;
    border: 1px solid rgba(211, 60, 53, 0.7);
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 50% 115%, rgba(73, 94, 101, 0.12), transparent 48%),
        linear-gradient(155deg, #10181e 0%, #0a1116 58%, #080d11 100%);
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.76),
        0 0 22px rgba(214, 44, 38, 0.09),
        inset 0 1px rgba(255, 255, 255, 0.035);
}

#preStormAnnouncementMenu.pre-storm-alarm-menu::before {
    inset: 0;
    opacity: 0;
    background: repeating-linear-gradient(112deg, transparent 0 23px, rgba(197, 221, 229, 0.65) 24px 25px, transparent 26px 44px);
    animation-duration: 2.4s;
}

#preStormAnnouncementMenu.pre-storm-alarm-menu::after {
    border-radius: 14px;
    box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.38);
}

.pre-storm-alarm-menu__weather {
    inset: 0;
    opacity: 0.72;
}

.pre-storm-alarm-menu__rain {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.58;
    pointer-events: none;
    mix-blend-mode: screen;
}

.pre-storm-alarm-menu__live-fx {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    overflow: hidden;
    opacity: 0.56;
    pointer-events: none;
    contain: layout style paint;
}

.pre-storm-alarm-menu__theme-particles {
    z-index: 3;
    opacity: 0.68;
}

.pre-storm-alarm-menu__theme-particles .pre-storm-theme-particle {
    --theme-fall-distance: 390px;
    --theme-mid-distance: 185px;
    animation-duration: 6.4s;
}

.pre-storm-alarm-menu__live-fx .ambient-thunder-flash,
.pre-storm-alarm-menu__live-fx .ambient-lightning,
.pre-storm-alarm-menu__live-fx .ambient-wind-streak {
    display: block;
}

.pre-storm-alarm-menu__live-fx .ambient-lightning {
    height: 230px;
    filter: saturate(0.35) brightness(1.35) drop-shadow(0 0 12px rgba(185, 211, 226, 0.28));
}

.pre-storm-alarm-menu__live-fx .ambient-thunder-flash {
    bottom: 25%;
    opacity: 0;
}

.pre-storm-alarm-menu__live-fx .ambient-lightning--left {
    animation: ambientLightningStrike 6s linear -1s infinite;
}

.pre-storm-alarm-menu__live-fx .ambient-lightning--center {
    animation: ambientLightningStrike 7.5s linear -4s infinite;
}

.pre-storm-alarm-menu__live-fx .ambient-lightning--right {
    animation: ambientLightningStrike 9s linear -7s infinite;
}

.pre-storm-alarm-menu__live-fx .ambient-thunder-flash--left {
    animation: ambientThunderSkyFlash 6s linear -1s infinite;
}

.pre-storm-alarm-menu__live-fx .ambient-thunder-flash--center {
    animation: ambientThunderSkyFlash 7.5s linear -4s infinite;
}

.pre-storm-alarm-menu__live-fx .ambient-thunder-flash--right {
    animation: ambientThunderSkyFlash 9s linear -7s infinite;
}

.pre-storm-alarm-menu__weather::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(118deg, transparent 0 44%, rgba(214, 231, 238, 0.2) 45%, transparent 47%),
        radial-gradient(ellipse at 48% 18%, rgba(218, 233, 238, 0.2), transparent 38%);
    mix-blend-mode: screen;
    animation: preStormMenuLightning 5.2s linear infinite;
}

.pre-storm-alarm-menu__weather::after {
    content: '';
    position: absolute;
    right: -12%;
    bottom: 8px;
    left: -12%;
    height: 115px;
    opacity: 0.22;
    background:
        radial-gradient(ellipse at 10% 60%, rgba(151, 169, 176, 0.34) 0 8%, transparent 25%),
        radial-gradient(ellipse at 38% 45%, rgba(108, 126, 133, 0.4) 0 10%, transparent 30%),
        radial-gradient(ellipse at 72% 66%, rgba(152, 168, 174, 0.32) 0 8%, transparent 27%),
        radial-gradient(ellipse at 95% 38%, rgba(99, 119, 126, 0.34) 0 9%, transparent 28%);
    filter: blur(14px);
    animation: preStormMenuWind 8s ease-in-out infinite alternate;
}

.pre-storm-alarm-menu__cloud {
    opacity: 0.2;
    filter: blur(15px);
    animation-duration: 10s;
}

.pre-storm-alarm-menu__header {
    position: absolute;
    inset: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.pre-storm-alarm-menu__header h3 {
    gap: 6px;
    padding: 6px 13px 5px 10px;
    border: 1px solid rgba(226, 70, 63, 0.72);
    border-radius: 999px;
    color: #ffc0bc;
    font-size: 11px;
    letter-spacing: 0.12em;
    background: rgba(107, 23, 21, 0.42);
    text-shadow: none;
    box-shadow: 0 0 12px rgba(222, 46, 40, 0.08), inset 0 1px rgba(255, 255, 255, 0.05);
}

.pre-storm-alarm-menu__header h3 span {
    width: 15px;
    height: 15px;
    border-width: 1px;
    font-size: 10px;
    box-shadow: none;
}

.pre-storm-alarm-menu__close {
    position: absolute;
    top: 13px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #899298;
    font-size: 21px;
    line-height: 25px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
    pointer-events: auto;
}

.pre-storm-alarm-menu__close:hover,
.pre-storm-alarm-menu__close:focus-visible {
    color: #fff;
    background: rgba(211, 48, 43, 0.68);
    outline: 1px solid rgba(255, 255, 255, 0.55);
}

.pre-storm-alarm-menu__body {
    height: 350px;
    justify-content: center;
    padding: 8px 24px 12px;
}

.pre-storm-alarm-menu__title-icon {
    position: relative;
    z-index: 2;
    display: flex;
    width: 172px;
    height: 96px;
    flex: 0 0 96px;
    align-items: center;
    justify-content: center;
    margin: -4px 0 -7px;
}

.pre-storm-alarm-menu__title-icon::before {
    content: '';
    position: absolute;
    inset: 8px 1px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 52, 44, 0.34), rgba(143, 20, 17, 0.13) 46%, transparent 72%);
    filter: blur(5px);
    animation: preStormGuideIconGlow 1.8s ease-in-out infinite;
}

.pre-storm-alarm-menu__title-icon img {
    position: relative;
    z-index: 1;
    display: block;
    width: 176px;
    height: 116px;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.76));
}

.pre-storm-alarm-console {
    grid-template-columns: 43px 38px 224px 38px 43px;
    min-height: 90px;
}

.pre-storm-alarm-sign {
    min-height: 82px;
    padding: 9px 22px 8px;
    border: 1px solid rgba(211, 59, 53, 0.62);
    border-radius: 9px;
    background:
        radial-gradient(circle at 8px 8px, rgba(205, 212, 214, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(205, 212, 214, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at 8px calc(100% - 8px), rgba(205, 212, 214, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), rgba(205, 212, 214, 0.55) 0 1px, transparent 2px),
        linear-gradient(180deg, rgba(30, 39, 45, 0.96), rgba(15, 22, 27, 0.98));
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 14px rgba(213, 45, 39, 0.1),
        inset 0 1px rgba(255, 255, 255, 0.045);
    animation: preStormAlarmSignRefined 2.6s ease-in-out infinite;
}

.pre-storm-alarm-sign small {
    color: #9ba5aa;
    font-size: 8px;
    letter-spacing: 0.28em;
}

.pre-storm-alarm-sign strong {
    color: #f2f4f5;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: 28px;
    letter-spacing: 0.07em;
    text-shadow: 0 2px 0 #000;
}

.pre-storm-alarm-sign > span {
    color: #ef4a43;
    font-size: 13px;
    letter-spacing: 0.33em;
    text-shadow: none;
}

.pre-storm-alarm-lamp {
    width: 32px;
    height: 41px;
    opacity: 0.86;
}

.pre-storm-alarm-lamp::before {
    top: -5px;
    width: 58px;
    height: 36px;
    opacity: 0.3;
    filter: blur(5px);
    animation-duration: 1.7s;
}

.pre-storm-alarm-lamp::after {
    height: 6px;
    border-width: 1px;
    border-color: #596266;
}

.pre-storm-alarm-lamp i {
    top: 7px;
    left: 6px;
    width: 20px;
    height: 27px;
    border: 1px solid rgba(255, 119, 119, 0.72);
    border-radius: 12px 12px 4px 4px;
    background: radial-gradient(circle at 48% 35%, #ffd0cd 0 5%, #ec4038 12% 30%, #950d0a 56%, #390504 82%);
    box-shadow: inset 0 0 5px rgba(255, 190, 185, 0.65), 0 0 8px rgba(255, 38, 31, 0.52);
    animation: preStormAlarmLampPulseRefined 1.25s ease-in-out infinite alternate;
}

.pre-storm-alarm-waves {
    width: 38px;
    height: 48px;
    opacity: 0.52;
}

.pre-storm-alarm-waves i {
    border-width: 2px;
    border-right-color: rgba(239, 74, 67, 0.74);
    animation-duration: 1.9s;
}

.pre-storm-alarm-menu__message {
    margin-top: 2px;
    color: #abb4b9;
    font-size: 12px;
    font-weight: 600;
    text-shadow: none;
}

.pre-storm-alarm-menu__countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 12px;
}

.pre-storm-alarm-menu__countdown > span {
    margin-bottom: 2px;
    color: #aeb8bd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

#preStormAnnouncementCountdown {
    margin: 0;
    color: #f4f5f5;
    font-size: 25px;
    text-shadow: 0 0 12px rgba(229, 57, 53, 0.2);
}

.pre-storm-alarm-menu__actions {
    gap: 10px;
}

.pre-storm-alarm-menu__clock-help {
    display: flex;
    width: min(500px, 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    margin: 14px 0 0;
    padding: 12px 14px 0;
    border: 0;
    border-top: 1px solid rgba(175, 193, 201, 0.13);
    border-radius: 0;
    color: #929da2;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    background: transparent;
    box-shadow: none;
}

.pre-storm-alarm-menu__clock-help > strong {
    max-width: 460px;
    color: #aeb7bc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pre-storm-alarm-menu__clock-copy {
    position: relative;
    display: grid;
    width: 207px;
    height: 35px;
    flex: 0 0 35px;
    grid-template-columns: 51px 37px 47px 1fr;
    align-items: center;
    box-sizing: border-box;
    padding: 0 6px;
    overflow: hidden;
    border: 2px solid #e32121;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    background:
        linear-gradient(rgba(5, 12, 15, 0.78), rgba(5, 12, 15, 0.88)),
        url('images/lucht.png') center / cover no-repeat;
    box-shadow: 0 0 11px rgba(224, 35, 31, 0.18), inset 0 1px rgba(255, 255, 255, 0.08);
    transition: filter 0.16s ease, transform 0.16s ease;
}

.pre-storm-alarm-menu__clock-copy:hover,
.pre-storm-alarm-menu__clock-copy:focus-visible {
    filter: brightness(1.18);
    transform: translateY(-1px);
    outline: 1px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
}

.pre-storm-alarm-menu__clock-time,
.pre-storm-alarm-menu__clock-date,
.pre-storm-alarm-menu__clock-copy strong {
    position: relative;
    z-index: 2;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
}

.pre-storm-alarm-menu__clock-time {
    justify-self: start;
    font-size: 12px;
    font-weight: 800;
}

.pre-storm-alarm-menu__clock-date {
    justify-self: center;
    font-size: 11px;
}

.pre-storm-alarm-menu__clock-storm {
    position: relative;
    z-index: 2;
    display: block;
    width: 43px;
    height: 27px;
    overflow: hidden;
}

.pre-storm-alarm-menu__clock-storm img {
    position: absolute;
    top: -5px;
    left: -6px;
    width: 55px;
    height: 37px;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 3px rgba(255, 38, 31, 0.65));
}

.pre-storm-alarm-menu__clock-copy strong {
    justify-self: end;
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pre-storm-alarm-menu__confirm.alert-button.confirm,
.pre-storm-alarm-menu__guide.alert-button {
    min-width: 128px;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
}

.pre-storm-alarm-menu__confirm.alert-button.confirm {
    border: 1px solid rgba(255, 111, 104, 0.78);
    background: linear-gradient(180deg, #dc352e, #b91d19);
    box-shadow: 0 6px 16px rgba(168, 20, 16, 0.25), inset 0 1px rgba(255, 255, 255, 0.16);
}

.pre-storm-alarm-menu__guide.alert-button {
    min-width: 128px;
    border: 1px solid rgba(255, 111, 104, 0.78);
    color: #fff;
    background: linear-gradient(180deg, #dc352e, #a91411);
    box-shadow: 0 6px 16px rgba(168, 20, 16, 0.25), inset 0 1px rgba(255, 255, 255, 0.16);
}

/* Safety for old DOM left behind by a previous cached script. */
#postLoginStormGuideLauncher {
    display: none !important;
}

.pre-storm-alarm-menu__confirm.alert-button.confirm:hover,
.pre-storm-alarm-menu__confirm.alert-button.confirm:focus-visible,
.pre-storm-alarm-menu__guide.alert-button:hover,
.pre-storm-alarm-menu__guide.alert-button:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@keyframes preStormAlarmSignRefined {
    0%, 100% { border-color: rgba(211, 59, 53, 0.48); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), 0 0 10px rgba(213, 45, 39, 0.06), inset 0 1px rgba(255, 255, 255, 0.045); }
    50% { border-color: rgba(226, 74, 67, 0.76); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), 0 0 18px rgba(213, 45, 39, 0.15), inset 0 1px rgba(255, 255, 255, 0.045); }
}

@keyframes preStormAlarmLampPulseRefined {
    from { filter: brightness(0.78); opacity: 0.76; }
    to { filter: brightness(1.18); opacity: 1; }
}

@keyframes preStormMenuLightning {
    0%, 47%, 50%, 53%, 100% { opacity: 0; }
    48% { opacity: 0.68; }
    51% { opacity: 0.26; }
}

@keyframes preStormMenuWind {
    from { transform: translate3d(-4%, 0, 0) scaleX(1); }
    to { transform: translate3d(5%, -4px, 0) scaleX(1.08); }
}

@keyframes preStormGuideIconGlow {
    0%, 100% { opacity: 0.38; transform: scale(0.9); }
    50% { opacity: 0.82; transform: scale(1.08); }
}

/* Current Weather uses the same live weather layers as the game background. */
#currentWeatherInfoMenu.current-weather-info-menu {
    border: 1px solid rgba(229, 57, 53, 0.56);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.68), 0 0 20px rgba(224, 41, 36, 0.12) !important;
}

.current-weather-info__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #07130d url('images/weatherbg.png') center center / cover no-repeat;
    image-rendering: pixelated;
}

.current-weather-info__clouds,
.current-weather-info__sky-layer,
.current-weather-info__ambient-overlay,
.current-weather-info__halloween-layer,
.current-weather-info__particles,
.current-weather-info__ambient-fx,
.current-weather-info__rain,
.current-weather-info__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.current-weather-info__sky-layer,
.current-weather-info__ambient-overlay,
.current-weather-info__halloween-layer {
    pointer-events: none;
    filter: saturate(1.15) brightness(1.08);
}

.current-weather-info__ambient-overlay {
    z-index: 1;
}

.current-weather-info__halloween-layer {
    z-index: 2;
}

.current-weather-info__clouds {
    z-index: 1;
    opacity: 0.68;
    overflow: hidden;
}

.current-weather-info__rain {
    z-index: 2;
    display: block;
    opacity: 0.94;
    mix-blend-mode: screen;
    filter: brightness(1.36) contrast(1.12);
}

.current-weather-info__particles {
    z-index: 3;
    display: block;
    overflow: hidden;
    opacity: 1;
    filter: brightness(1.2) saturate(1.08);
}

.current-weather-info__ambient-fx {
    z-index: 4;
    display: block;
    overflow: hidden;
    opacity: 0.82;
}

.current-weather-info__ambient-fx .ambient-cloud-extra,
.current-weather-info__ambient-fx .ambient-thunder-flash,
.current-weather-info__ambient-fx .ambient-lightning,
.current-weather-info__ambient-fx .ambient-wind-streak,
.current-weather-info__ambient-fx .ambient-tornado-debris {
    display: none !important;
}

#currentWeatherInfoMenu[data-weather="cloudy"] .current-weather-info__ambient-fx .ambient-cloud-extra,
#currentWeatherInfoMenu[data-weather="halloween"] .current-weather-info__ambient-fx .ambient-cloud-extra {
    display: block !important;
}

#currentWeatherInfoMenu[data-weather="thunder"] .current-weather-info__ambient-fx .ambient-thunder-flash,
#currentWeatherInfoMenu[data-weather="thunder"] .current-weather-info__ambient-fx .ambient-lightning,
#currentWeatherInfoMenu[data-weather="thunder"] .current-weather-info__ambient-fx .ambient-wind-streak,
#currentWeatherInfoMenu[data-weather="stormy"] .current-weather-info__ambient-fx .ambient-wind-streak,
#currentWeatherInfoMenu[data-weather="tornado"] .current-weather-info__ambient-fx .ambient-wind-streak,
#currentWeatherInfoMenu[data-weather="halloween"] .current-weather-info__ambient-fx .ambient-thunder-flash,
#currentWeatherInfoMenu[data-weather="halloween"] .current-weather-info__ambient-fx .ambient-lightning,
#currentWeatherInfoMenu[data-weather="halloween"] .current-weather-info__ambient-fx .ambient-wind-streak {
    display: block !important;
}

body.disable-thunder-flashes #currentWeatherInfoMenu .current-weather-info__ambient-fx .ambient-thunder-flash,
body.disable-thunder-flashes #currentWeatherInfoMenu .current-weather-info__ambient-fx .ambient-lightning {
    display: none !important;
}

#currentWeatherInfoMenu[data-weather="tornado"] .current-weather-info__ambient-fx .ambient-tornado-debris {
    display: block !important;
}

.current-weather-info__ambient-fx .ambient-lightning {
    height: 210px;
    filter: saturate(0.58) brightness(1.48) drop-shadow(0 0 15px rgba(205, 224, 237, 0.42));
}

#currentWeatherInfoMenu.is-weather-effect-intro .current-weather-info__ambient-fx .ambient-lightning--left {
    animation: ambientLightningIntro 1.35s ease-out, ambientLightningStrike 7s linear 1.35s infinite;
}

#currentWeatherInfoMenu.is-weather-effect-intro .current-weather-info__ambient-fx .ambient-thunder-flash--left {
    animation: ambientThunderSkyIntro 1.35s ease-out, ambientThunderSkyFlash 7s linear 1.35s infinite;
}

#currentWeatherInfoMenu.is-weather-effect-intro .current-weather-info__ambient-fx .ambient-lightning--center {
    animation: ambientLightningStrike 8.5s linear -3s infinite;
}

#currentWeatherInfoMenu.is-weather-effect-intro .current-weather-info__ambient-fx .ambient-thunder-flash--center {
    animation: ambientThunderSkyFlash 8.5s linear -3s infinite;
}

#currentWeatherInfoMenu.is-weather-effect-intro .current-weather-info__ambient-fx .ambient-lightning--right {
    animation: ambientLightningStrike 10s linear -7s infinite;
}

#currentWeatherInfoMenu.is-weather-effect-intro .current-weather-info__ambient-fx .ambient-thunder-flash--right {
    animation: ambientThunderSkyFlash 10s linear -7s infinite;
}

.current-weather-info__shade {
    z-index: 5;
    background: linear-gradient(180deg, rgba(3, 7, 10, 0.02), rgba(3, 7, 10, 0.2));
}

.current-weather-info__header,
.current-weather-info__body {
    position: relative;
    z-index: 6;
}

.current-weather-info__body {
    background: rgba(5, 9, 12, 0.08);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.88);
}

.storm-guide-live-countdown {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: -2px 0 0;
    padding: 6px 11px;
    border: 1px solid rgba(226, 70, 63, 0.42);
    border-radius: 8px;
    color: #aeb9bf;
    font-size: 12px;
    font-weight: 700;
    background: rgba(99, 21, 18, 0.18);
}

.storm-guide-live-countdown strong {
    color: #ff625a;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 9px rgba(255, 54, 46, 0.34);
}

.storm-guide-live-countdown + .storm-guide-start-button {
    margin-top: 13px;
}

/* Display Settings keeps all themes visible while showing one settings panel at a time. */
.display-settings-themes {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 9px 4px 13px;
    background: linear-gradient(#292929 82%, rgba(41, 41, 41, 0));
}

.display-settings-themes button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: linear-gradient(#414141, #303030);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.display-settings-themes button::after {
    content: '›';
    position: absolute;
    top: 15px;
    right: 13px;
    color: #d2b08d;
    font: bold 24px/1 Arial, sans-serif;
    transition: transform .15s ease;
}
.display-settings-themes button.is-active::after { transform: rotate(90deg); }

.display-settings-themes button strong { font-size: 15px; }
.display-settings-themes button small { color: #bbb; font-size: 11px; }
.display-settings-themes button:hover,
.display-settings-themes button:focus-visible,
.display-settings-themes button.is-active {
    border-color: #e0a66a;
    background: linear-gradient(#62452e, #3d3028);
    outline: none;
}
.display-settings-themes button.is-active { box-shadow: 0 0 0 1px #c78950, 0 4px 13px rgba(0, 0, 0, .38); }
.display-settings-themes button.is-active small { color: #f0d6b5; }
.display-settings-theme-hint {
    margin: 15px 4px 0;
    padding: 28px 18px;
    border: 1px dashed rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: #cfcfcf;
    text-align: center;
}
.display-settings-theme-hint[hidden],
[data-display-settings-panel][hidden] { display: none !important; }

@media (max-width: 700px) {
    .display-settings-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.donations-coming-soon {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: not-allowed;
}

.donations-coming-soon__button {
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
}

.donations-coming-soon__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 25, 0.38);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    text-shadow: 0 2px 6px #000;
    pointer-events: none;
}
.prelogin-status-footer {
    padding: 10px;
    border-radius: 6px;
    background-color: rgba(20, 40, 20, 0.4);
}

.prelogin-status-footer__row {
    display: flex;
    justify-content: space-evenly;
    height: 18px;
    align-items: center;
    transform: translate(-4px, 1px);
}

.prelogin-status-footer__row > :first-child {
    position: relative;
    left: -20px;
}

.prelogin-status-footer__row > :nth-child(2) {
    position: relative;
    left: -3px;
    top: -1px;
}

.prelogin-version-slot {
    position: relative;
    left: 26px;
    display: inline-flex;
    align-items: center;
}

.prelogin-discord-link {
    position: absolute;
    right: calc(100% - 2px);
    top: calc(50% - 0.75px);
    transform: translateY(calc(-50% + 0.02px));
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

.prelogin-discord-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    border-radius: 3px;
}

.prelogin-discord-link img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: filter 0.18s ease;
}

.prelogin-discord-link:hover img,
.prelogin-discord-link:focus-visible img {
    filter: drop-shadow(0 0 4px #5865f2) drop-shadow(0 0 7px #5865f2);
}

.citizen-services-nav {
    position: relative;
    display: flex;
}

.citizen-services-nav #linksBtn {
    flex: 1;
}

.citizen-services-discord {
    position: absolute;
    top: 50%;
    right: 3px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
}

.citizen-services-discord:focus-visible {
    outline: 2px solid white;
    outline-offset: 1px;
    border-radius: 3px;
}

.citizen-services-discord img {
    display: block;
    width: 26px;
    height: 28px;
    object-fit: fill;
    transition: filter 0.18s ease;
}

.citizen-services-discord:hover img,
.citizen-services-discord:focus-visible img {
    filter: drop-shadow(0 0 4px #5865f2) drop-shadow(0 0 7px #5865f2);
}

.prelogin-version-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
    gap: 4px;
    height: 18px;
    padding: 0 2px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #cbcbcb;
    font: bold 0.72em Arial, sans-serif;
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
}

.version-gear {
    display: grid;
    place-items: center;
    flex: none;
}

.prelogin-version-gear {
    position: relative;
    top: -0.75px;
    width: 22px;
    height: 22px;
    --version-gear-size: 12px;
    --version-gear-hole: 1.4px;
}

.version-gear::before {
    content: '';
    display: block;
    width: var(--version-gear-size);
    height: var(--version-gear-size);
    background: linear-gradient(135deg, #e0e0e0, #9a9a9a 55%, #555);
    clip-path: polygon(42% 0, 58% 0, 61% 11%, 70% 15%, 80% 8%, 92% 20%, 85% 30%, 89% 39%, 100% 42%, 100% 58%, 89% 61%, 85% 70%, 92% 80%, 80% 92%, 70% 85%, 61% 89%, 58% 100%, 42% 100%, 39% 89%, 30% 85%, 20% 92%, 8% 80%, 15% 70%, 11% 61%, 0 58%, 0 42%, 11% 39%, 15% 30%, 8% 20%, 20% 8%, 30% 15%, 39% 11%);
    -webkit-mask: radial-gradient(circle at center, transparent 0 var(--version-gear-hole), #000 calc(var(--version-gear-hole) + 0.5px));
    mask: radial-gradient(circle at center, transparent 0 var(--version-gear-hole), #000 calc(var(--version-gear-hole) + 0.5px));
    animation: prelogin-version-gear-spin 14s linear infinite;
}

.prelogin-version-label {
    position: relative;
    left: -4px;
}

@keyframes prelogin-version-gear-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .version-gear::before { animation: none; }
}

.prelogin-version-trigger strong {
    color: #2ecc71;
    font-weight: bold;
    animation: version-online-glow 1.3s ease-in-out infinite;
}

@keyframes version-online-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(46, 204, 113, 0.6); }
    50% { text-shadow: 0 0 12px rgba(46, 204, 113, 0.9), 0 0 20px rgba(46, 204, 113, 0.4); }
}

.prelogin-version-trigger:hover,
.prelogin-version-trigger:focus-visible {
    color: #fff;
    background: rgba(38, 94, 60, 0.35);
    outline: 1px solid rgba(123, 228, 157, 0.55);
}

.welcome-version-trigger {
    position: absolute;
    bottom: calc(5% - 4px);
    left: calc(3% + 36px);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 25px;
    padding: 0 9px 0 3px;
    border: 2px solid #888;
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    color: #cbcbcb;
    font: bold 12px/1 Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.welcome-version-gear {
    width: 18px;
    height: 18px;
    --version-gear-size: 12px;
    --version-gear-hole: 1.4px;
}

.welcome-version-trigger strong {
    color: #2ecc71;
    font-weight: bold;
    animation: version-online-glow 1.3s ease-in-out infinite;
}

.welcome-version-trigger:hover,
.welcome-version-trigger:focus-visible {
    transform: scale(1.06);
    border-color: #ff4d4d;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    outline: none;
}

.welcome-version-new-burst {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.welcome-version-new-burst[hidden] {
    display: none;
}

.welcome-version-new-burst span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #ff3b3b;
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 0 #4a0000;
    white-space: nowrap;
    opacity: 0;
    animation: welcomeVersionNewFly var(--fly-duration) ease-out var(--fly-delay) infinite both;
}

@keyframes welcomeVersionNewFly {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--fly-start-x)), calc(-50% + var(--fly-start-y))) scale(0.85) rotate(0deg);
    }
    22% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(1) rotate(var(--fly-rot));
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-version-new-burst { display: none; }
}

.in-game-version-card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 72px;
    margin: 0 0 12px;
    padding: 15px;
    border: 1px solid rgba(76, 175, 80, 0.45);
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.6);
    color: #e4e4e4;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.in-game-version-card:hover,
.in-game-version-card:focus-visible {
    border-color: rgba(76, 175, 80, 0.85);
    transform: translateX(5px);
}

.in-game-version-card:focus-visible {
    outline: 2px solid #81c784;
    outline-offset: 2px;
}

.in-game-version-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 8px;
    background: #142e47;
}

.in-game-version-card__icon .version-gear {
    width: 28px;
    height: 28px;
    --version-gear-size: 18px;
    --version-gear-hole: 2.2px;
}

.in-game-version-card__copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.in-game-version-card__title {
    color: #81c784;
    font-size: 0.83em;
    font-weight: 600;
}

.in-game-version-card__title strong {
    color: #2ecc71;
    animation: version-online-glow 1.3s ease-in-out infinite;
}

.in-game-version-card__description {
    color: #aaa;
    font-size: 0.8em;
}

.in-game-version-card__arrow {
    flex: none;
    width: 24px;
    margin-left: 31px;
    color: #81c784;
    font-size: 1.5em;
}

.in-game-discord-card {
    border-color: rgba(88, 101, 242, 0.55);
    text-decoration: none;
}

.in-game-discord-card:hover,
.in-game-discord-card:focus-visible {
    border-color: #8995ff;
}

.in-game-discord-card:focus-visible {
    outline-color: #8995ff;
}

.in-game-discord-card .in-game-version-card__icon {
    background: rgba(88, 101, 242, 0.18);
}

.in-game-discord-card .in-game-version-card__icon img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.in-game-discord-card .in-game-version-card__title,
.in-game-discord-card .in-game-version-card__arrow {
    color: #aeb6ff;
}

.community-action-row {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) 55px;
    align-items: center;
}

.community-action-row--badge {
    grid-template-columns: 74px minmax(0, 1fr) 74px;
}

.community-action-row > :nth-child(2) {
    min-width: 0;
    text-align: center;
}

.community-action-row > :last-child {
    justify-self: end;
}

.version-history-dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(840px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #75443b;
    border-radius: 10px;
    background: #1b1312;
    color: #f2e2d8;
    text-align: left;
    font-family: Arial, sans-serif;
    box-shadow: 0 20px 65px rgba(0, 0, 0, 0.85), 0 0 30px rgba(169, 62, 48, 0.16);
}

.version-history-dialog[open] {
    display: flex;
    flex-direction: column;
    transform: translateY(-56px);
}

.version-history-dialog::backdrop {
    background: rgba(0, 0, 0, 0.82);
}

.version-history-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 14px 62px;
    background: linear-gradient(135deg, #3a2420, #281a18);
    border-bottom: 1px solid #75443b;
}

.version-history-header-main {
    position: relative;
    width: max-content;
    max-width: 100%;
}

.version-history-header-icon {
    width: 24px;
    height: 24px;
    --version-gear-size: 24px;
    --version-gear-hole: 3px;
    transform: translateY(-1px);
}

.version-history-header-copy {
    min-width: 0;
    text-align: center;
}

.version-history-header h2 {
    margin: 0;
    color: #fff;
    font-size: 22px;
}

.version-history-header-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.version-history-intro {
    margin: 5px 0 0;
    color: #d9c4b7;
    font-size: 12px;
    line-height: 1.5;
}

.version-history-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 221, 205, 0.55);
    border-radius: 5px;
    background: rgba(37, 13, 12, 0.42);
    color: #fff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.version-history-close:hover,
.version-history-close:focus-visible {
    background: rgba(190, 55, 55, 0.55);
}

.version-history-content {
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    padding: 18px 22px 22px;
    background: #171110;
}

.version-history-milestone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 13px 0 14px;
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(30, 50, 30, 0.78);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #d9e2d9;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.version-history-milestone-copy {
    flex: 1;
    min-width: 0;
}

.version-history-milestone-icon {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.version-history-milestone-title {
    display: block;
    color: #f0f2ee;
    font-size: 14px;
    font-weight: 700;
}

.version-history-milestone p {
    max-width: 70ch;
    margin: 7px auto 0;
}

.version-history-release {
    position: relative;
    overflow: hidden;
    border: 1px solid #73463a;
    border-radius: 7px;
    background: linear-gradient(155deg, #30201d, #201716);
}

.version-history-release[hidden] {
    display: none;
}

.version-history-release + .version-history-release {
    margin-top: 14px;
}

.version-history-release-body {
    padding: 18px 19px 19px;
}

.version-history-release-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.version-history-number {
    display: inline-flex;
    align-items: center;
    color: #ffcfad;
    font-size: 26px;
    font-weight: 700;
}

.version-history-release-date {
    color: #d9c4b7;
    font-size: 12px;
}

.version-history-release time {
    color: #ff0000;
    font-weight: 700;
}

.version-history-release h3 {
    margin: 13px 0 6px;
    color: #fff0e6;
    font-size: 15px;
    text-align: center;
}

.version-history-summary {
    margin: 0 0 13px;
    color: #d9c4b7;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.version-history-changes-panel {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #0b0b0b;
}

.version-history-release--cornfield .version-history-changes-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at center bottom, rgba(112, 72, 26, 0.17), transparent 70%), #0b0b0b;
}

.version-history-changes-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.version-history-changes-field span {
    position: absolute;
    bottom: -30px;
    width: 74px;
    height: 115px;
    background: url("Seasonthemes/corn-stalk-silhouette.svg?v=halloween-corn") center bottom / 100% 100% no-repeat;
    opacity: 0.24;
    transform-origin: 50% 100%;
    animation: cornfieldPreviewSway 3.8s ease-in-out infinite alternate;
}

.version-history-changes-field span:nth-child(1) { left: -4%; height: 125px; animation-delay: -2.1s; }
.version-history-changes-field span:nth-child(2) { left: 10%; height: 95px; animation-delay: -0.8s; }
.version-history-changes-field span:nth-child(3) { left: 23%; height: 120px; animation-delay: -2.8s; }
.version-history-changes-field span:nth-child(4) { left: 38%; height: 90px; animation-delay: -1.4s; }
.version-history-changes-field span:nth-child(5) { left: 53%; height: 115px; animation-delay: -3.1s; }
.version-history-changes-field span:nth-child(6) { left: 68%; height: 100px; animation-delay: -0.4s; }
.version-history-changes-field span:nth-child(7) { left: 81%; height: 125px; animation-delay: -2.5s; }
.version-history-changes-field span:nth-child(8) { left: 94%; height: 105px; animation-delay: -1.1s; }

.version-history-release--cornfield .version-history-changes-panel ul {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px #000;
}

@media (prefers-reduced-motion: reduce) {
    .version-history-changes-field span { animation: none; }
}

.version-history-release ul {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    color: #e8d8ce;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.version-history-release li {
    display: flex;
    gap: 9px;
}

.version-history-change-bullet {
    color: #ff0000;
    font-weight: 700;
    flex: none;
}

.version-history-change-copy {
    flex: 1;
}

.version-history-change-topic {
    color: #ff0000;
    font-weight: 700;
}

.version-history-change-topic--halloween {
    color: #ff9f2f;
}

strong.version-history-change-topic--sewers,
.version-history-change-topic--sewers {
    position: relative;
    display: inline-block;
    color: #b6ff4a;
    background-image: linear-gradient(180deg, #f3ffc2 0%, #b6ff46 32%, #46b816 68%, #17640c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform-origin: center top;
    filter: drop-shadow(0 1px 0 #0d3a08) drop-shadow(0 0 5px rgba(110, 230, 50, 0.8));
    animation: versionSewerSlime 2.3s ease-in-out infinite;
}

strong.version-history-change-topic--sewers::before,
.version-history-change-topic--sewers::before,
strong.version-history-change-topic--sewers::after,
.version-history-change-topic--sewers::after {
    content: "";
    position: absolute;
    top: 1.05em;
    width: 3px;
    height: 5px;
    border-radius: 40% 40% 50% 50%;
    background: #8ed428;
    pointer-events: none;
}

strong.version-history-change-topic--sewers::before,
.version-history-change-topic--sewers::before {
    left: 16%;
    animation: versionSewerDrip 2.4s ease-in infinite;
    box-shadow: 9px 0 0 #6fbe1c, 18px 0 0 #c6ff62;
}

strong.version-history-change-topic--sewers::after,
.version-history-change-topic--sewers::after {
    left: 54%;
    animation: versionSewerDrip 2.8s ease-in -0.9s infinite;
    box-shadow: 8px 0 0 #4ea014, 16px 0 0 #b6ff46;
}

@keyframes versionSewerSlime {
    0%, 100% {
        transform: scaleY(1) translateY(0);
        filter: drop-shadow(0 1px 0 #0d3a08) drop-shadow(0 0 4px rgba(110, 230, 50, 0.65));
    }
    46% {
        transform: scaleY(1.14) translateY(1px);
        filter: drop-shadow(0 3px 0 #145c08) drop-shadow(0 0 8px rgba(170, 255, 70, 0.95));
    }
}

@keyframes versionSewerDrip {
    0% { opacity: 0; transform: translateY(0); }
    14% { opacity: 0.95; transform: translateY(1px); }
    100% { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
    strong.version-history-change-topic--sewers,
    .version-history-change-topic--sewers,
    strong.version-history-change-topic--sewers::before,
    .version-history-change-topic--sewers::before,
    strong.version-history-change-topic--sewers::after,
    .version-history-change-topic--sewers::after {
        animation: none;
    }
}

.version-history-release li + li {
    margin-top: 7px;
}

.version-history-signoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 15px;
    color: #d9c4b7;
    font-size: 12px;
}

.version-history-signoff__signature {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffcfad;
    font-weight: 700;
}

.version-history-signoff img {
    width: 10px;
    height: 18px;
    object-fit: contain;
}

.version-history-empty {
    color: #d6b5a5;
    font-size: 12px;
}

.version-history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid #704237;
    background: #271917;
    color: #e0bba6;
    font-size: 11px;
}

.version-history-pagination[hidden] { display: none; }

.version-history-pagination button {
    border: 1px solid #9b5645;
    border-radius: 4px;
    padding: 7px 10px;
    background: #592721;
    color: #fff2e9;
    font: inherit;
    cursor: pointer;
}

.version-history-pagination button:hover:not(:disabled),
.version-history-pagination button:focus-visible:not(:disabled) {
    background: #8a4636;
}

.version-history-pagination button:disabled {
    opacity: 0.45;
    cursor: default;
}

.version-history-confetti {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.version-history-confetti span {
    position: absolute;
    top: -15px;
    width: 7px;
    height: 12px;
    opacity: 0;
    animation: version-confetti-fall 4s ease-in forwards;
}

@keyframes version-confetti-fall {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate3d(var(--confetti-drift), 700px, 0) rotate(650deg); opacity: 0; }
}

@media (max-width: 480px) {
    .version-history-header { padding: 14px; }
    .version-history-header-main { max-width: 100%; }
    .version-history-header-icon { width: 21px; height: 21px; --version-gear-size: 21px; --version-gear-hole: 2.6px; }
    .version-history-header h2 { font-size: 19px; }
    .version-history-close { top: 12px; right: 12px; }
    .version-history-content { padding: 14px; }
    .version-history-milestone { gap: 6px; padding: 12px 10px; }
    .version-history-milestone-icon { width: 34px; height: 34px; }
    .version-history-release-body { padding: 13px; }
    .version-history-pagination { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .version-history-confetti { display: none; }
}

/* Bloodbets gives players a clear view of the timing zones before the bar moves. */
#timingGame.is-preparing #timingZones,
#timingGame.is-preparing #timingBar {
    filter: blur(5px);
    opacity: 0.5;
}

.bloodbets-timing-countdown {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(12, 8, 8, 0.48);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 5px #000;
    pointer-events: none;
}

.bloodbets-timing-countdown strong {
    color: #ffd560;
    font-size: 30px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 170, 40, 0.7);
}

.bloodbets-timing-countdown strong:empty {
    display: none;
}

#timingGame:not(.is-preparing) .bloodbets-timing-countdown {
    display: none;
}

/* Bloodbets: restrained fight-night styling, without platform-dependent emoji. */
#fightClubMenu {
    border: 1px solid #713632 !important;
    background: radial-gradient(circle at 50% -10%, #3b2424 0, #1d191a 42%, #141516 100%) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(133, 32, 25, 0.15) !important;
    font-family: Arial, sans-serif;
}

#fightClubMenu > div:first-child {
    background: linear-gradient(100deg, #4e1c1d, #8a2c26 52%, #42191c) !important;
    border-bottom: 1px solid #b64a3c;
}

#fightClubMenu .bloodbets-menu-title {
    text-shadow: 0 2px 4px #260b0b;
}

#fightClubMenu .bloodbets-menu-close {
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid rgba(255, 220, 210, 0.35);
    border-radius: 6px;
    background: rgba(20, 9, 10, 0.32);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#fightClubMenu .bloodbets-menu-close:hover {
    background: #a83c30;
}

#fightClubMenu > div:nth-child(2) {
    scrollbar-color: #8b4038 #221b1c;
}

#fightClubIntro > div:first-child,
#fightClubMenu .bloodbets-guide,
#fightClubMenu .bloodbets-wager-note {
    background: rgba(11, 12, 13, 0.55) !important;
    border: 1px solid rgba(177, 87, 69, 0.34);
    border-radius: 10px !important;
}

#fightClubIntro > div:first-child {
    border-left: 3px solid #c65743 !important;
    color: #e0d1ca;
}

#fightClubImageSection {
    border: 1px solid rgba(191, 102, 77, 0.55);
}

#fightClubMenu .bloodbets-guide > div:first-child {
    background: linear-gradient(90deg, #482222, #682d28) !important;
}

#fightClubMenu .bloodbets-guide > div:nth-child(2) {
    border: 0 !important;
    border-top: 1px solid rgba(177, 87, 69, 0.34) !important;
}

#fightClubMenu .bloodbets-primary-action,
#fightClubMenu #timingClickButton {
    background: linear-gradient(180deg, #c44b3b, #882b29) !important;
    border: 1px solid #e07156 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(112, 25, 22, 0.35) !important;
}

#fightClubMenu .bloodbets-bet-actions {
    position: relative;
}

#fightClubMenu .bloodbets-bet-actions #fightClubCooldown {
    position: absolute;
    top: 50%;
    left: calc(50% + 95px);
    transform: translateY(-50%);
    margin: 0 !important;
    color: #eaa49a !important;
    font-size: 0.85em !important;
    text-align: left;
    white-space: nowrap;
}

#fightClubMenu #fighterSelection > h3,
#fightClubMenu #fightResult > h3,
#fightClubMenu .bloodbets-boost-heading {
    color: #f2d6c2 !important;
}

#fightClubMenu .bloodbets-fighter-grid > div {
    background: linear-gradient(160deg, #292122, #191819) !important;
    border: 1px solid #70413b !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#fightClubMenu .bloodbets-fighter-grid > div:hover {
    transform: translateY(-3px) !important;
    border-color: #d07d5a !important;
}

#fightClubMenu .bloodbets-fighter-grid > div.fighter-selected {
    background: linear-gradient(160deg, #343025, #1b211a) !important;
    border-color: #a6cb78 !important;
    box-shadow: 0 0 0 2px rgba(166, 203, 120, 0.15) !important;
}

#fightClubMenu .bloodbets-fighter-grid h4 {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(197, 138, 111, 0.25);
}

#fightClubMenu .bloodbets-stat {
    display: inline-flex;
    align-items: center;
}

#fightClubMenu .bloodbets-stat::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    background: #bc8c79;
    flex: none;
}

#fightClubMenu .bloodbets-stat--power::before {
    background: linear-gradient(#bc8c79, #bc8c79) center / 100% 3px no-repeat,
        linear-gradient(#bc8c79, #bc8c79) left / 3px 9px no-repeat,
        linear-gradient(#bc8c79, #bc8c79) right / 3px 9px no-repeat;
}

#fightClubMenu .bloodbets-stat--speed::before {
    background: #d8af68;
    clip-path: polygon(58% 0, 20% 53%, 48% 53%, 36% 100%, 85% 42%, 55% 42%);
}

#fightClubMenu .bloodbets-stat--defense::before {
    background: #9aacc0;
    clip-path: polygon(50% 0, 95% 18%, 85% 70%, 50% 100%, 15% 70%, 5% 18%);
}

#fightClubMenu .bloodbets-stat--technique::before {
    border: 2px solid #a9ba9a;
    border-radius: 50%;
    box-sizing: border-box;
    background: radial-gradient(circle, #a9ba9a 0 2px, transparent 2.5px);
}

#fightClubMenu .bloodbets-wager-note {
    padding: 14px !important;
}

#fightClubMenu :is(#boostOption1, #boostOption2, #boostOption3) {
    background: linear-gradient(120deg, #292122, #1b1a1b) !important;
    border-width: 1px !important;
    border-radius: 10px !important;
    padding: 15px !important;
}

#fightClubMenu :is(#boostOption1, #boostOption2, #boostOption3):hover {
    background: linear-gradient(120deg, #382928, #211c1d) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

#fightClubMenu .bloodbets-option-heading {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

#fightClubMenu .bloodbets-option-heading::before {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.32);
    font-size: 12px;
    font-weight: 800;
    flex: none;
}

#fightClubMenu .bloodbets-option-heading--one::before { content: '01'; }
#fightClubMenu .bloodbets-option-heading--two::before { content: '02'; }
#fightClubMenu .bloodbets-option-heading--three::before { content: '03'; }

#fightClubMenu .bloodbets-risk-label::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 10px;
    margin-right: 5px;
    background: #ff7771;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

#fightClubMenu #boostPreview {
    background: rgba(114, 152, 76, 0.11) !important;
    border: 1px solid rgba(163, 196, 112, 0.45) !important;
    box-shadow: none !important;
}

#fightClubMenu #fightResult > div:first-of-type,
#fightClubMenu #fightAnimation {
    background: rgba(10, 11, 12, 0.55) !important;
    border: 1px solid rgba(177, 87, 69, 0.32);
    border-radius: 10px !important;
}

#fightClubMenu #fightAnimation {
    flex-direction: column;
    gap: 13px;
}

#fightClubMenu #fightAnimation::after {
    content: 'FIGHT IN PROGRESS';
    color: #c8afa6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.bloodbets-fight-indicator {
    width: 34px;
    height: 34px;
    border: 3px solid #4b2929;
    border-top-color: #d4634d;
    border-right-color: #a84639;
    border-radius: 50%;
    animation: bloodbets-round-spin 0.9s linear infinite;
}

@keyframes bloodbets-round-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bloodbets-fight-indicator { animation: none; }
}

/* One-click return for a citizen saved on this browser. */
#savedCitizenChooser[hidden] { display: none !important; }
.citizen-login-slot { position: relative; }
.citizen-login-slot #manualCitizenLogin { position: relative; }
.citizen-login-slot.has-saved-citizen #manualCitizenLogin { visibility: hidden; }
.saved-citizen-chooser {
    position: absolute;
    top: -33px;
    left: 0;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #f5e8d1;
    text-align: center;
}
.saved-citizen-enter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 230px;
    height: 109px;
    padding: 4px 10px;
    border: 2px solid #cbcbcb;
    border-radius: 12px;
    background: #cbcbcb;
    color: #2c3e50;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 #cbcbcb;
    transition: all 0.3s ease;
    cursor: pointer;
}
.saved-citizen-enter:hover,
.saved-citizen-enter:focus-visible {
    background: #cbcbcb;
    border-color: #cc0000;
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.6), inset 0 1px 0 #cbcbcb, 0 0 0 2px #cc0000;
    outline: none;
}
.saved-citizen-enter:disabled { opacity: 0.65; cursor: wait; }
.saved-citizen-enter .saved-citizen-visual {
    position: relative;
    inset: auto;
    display: block;
    width: 55px;
    height: 80px;
    flex: none;
}
.saved-citizen-enter-text { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.saved-citizen-enter-text strong { font-size: 15px; }
.saved-citizen-enter-text small { font-size: 10px; color: #4d5960; }
.saved-citizen-error { min-height: 12px; margin: 0; color: #ff9999; font-size: 10px; }
.saved-citizen-error:empty { display: none; }
.saved-citizen-actions { display: flex; justify-content: center; gap: 6px; }
.saved-citizen-error:empty + .saved-citizen-actions { transform: translateY(-8px); }
.saved-citizen-actions button {
    padding: 4px 8px;
    border: 1px solid #a50000;
    border-radius: 6px;
    background: linear-gradient(to bottom, #cc0000, rgb(197, 10, 10));
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}
.saved-citizen-actions button:hover,
.saved-citizen-actions button:focus-visible {
    background: linear-gradient(to bottom, #ff0000, #cc0000);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}
.citizen-login-slot.is-ready-to-save #loginName,
.citizen-login-slot.is-ready-to-save #loginCode {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.citizen-login-slot.is-revealing-save-choice .login-button {
    background: linear-gradient(to bottom, #696763, #565450) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    text-shadow: none !important;
    transform: scale(1) !important;
    cursor: progress;
    overflow: hidden;
}
.citizen-login-slot.is-revealing-save-choice .login-button::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #f0c763;
    transform: scaleX(0);
    transform-origin: left center;
    animation: citizen-login-choice-pause 1s linear forwards;
}
@keyframes citizen-login-choice-pause {
    to { transform: scaleX(1); }
}
.save-citizen-prompt {
    position: absolute;
    top: -29px;
    left: 50%;
    z-index: 2;
    width: 236px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 2px solid #cbcbcb;
    border-radius: 12px;
    background: #cbcbcb;
    color: #2c3e50;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 #cbcbcb;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 7px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.citizen-login-slot.is-ready-to-save .save-citizen-prompt {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.save-citizen-option {
    width: 184px;
    min-height: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid #a50000;
    border-radius: 7px;
    background: linear-gradient(to bottom, #cc0000, rgb(197, 10, 10));
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}
.save-citizen-option:hover,
.save-citizen-option:focus-within {
    background: linear-gradient(to bottom, #ff0000, #cc0000);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.save-citizen-option input { width: 14px; height: 14px; flex: none; margin: 0; accent-color: #fff; }
.save-citizen-prompt > small { font-size: 10px; color: #4d5960; }
.edit-citizen-credentials {
    border: 0;
    padding: 0;
    background: none;
    color: #702020;
    font: bold 10px Arial, sans-serif;
    text-decoration: underline;
    cursor: pointer;
}
.edit-citizen-credentials:hover,
.edit-citizen-credentials:focus-visible { color: #cc0000; }

/* Keep the Halloween sign close to the smaller saved-citizen login. */
.citizen-login-slot.has-saved-citizen ~ .prelogin-cornfield-event.is-active { bottom: -4px; }
body[data-pre-storm-show="true"] .citizen-login-slot.has-saved-citizen ~ .prelogin-cornfield-event.is-active { bottom: -40px; }

/* Families: make the shared-vault journey clear before players see the controls. */
.family-onboarding {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 22px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 112, 102, .45);
    border-radius: 14px;
    background: linear-gradient(145deg, #3b181c 0%, #171821 56%, #101a1a 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    color: #eee;
}
.family-onboarding__eyebrow,
.family-guide-eyebrow {
    color: #ffb48f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}
.family-onboarding h3 { margin: 5px 0 7px; color: #fff; font-size: 23px; }
.family-onboarding__lead { margin: 0 0 17px; color: #d9dddd; line-height: 1.5; }
.family-onboarding__steps,
.family-guide-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.family-onboarding__steps > div {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .055);
}
.family-onboarding__steps strong { display: block; margin-bottom: 6px; color: #ffcfab; font-size: 12px; }
.family-onboarding__steps span { display: block; color: #ccd0d2; font-size: 12px; line-height: 1.45; }
.family-onboarding__rule {
    margin: 15px 0 13px;
    padding: 10px 12px;
    border-left: 3px solid #83d48a;
    border-radius: 5px;
    background: rgba(99, 192, 108, .11);
    color: #e4f3e5;
    font-size: 12px;
    line-height: 1.45;
}
.family-onboarding__guide {
    border: 0;
    border-radius: 6px;
    padding: 8px 12px;
    background: #e53935;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.family-onboarding__guide:hover { background: #fa5550; }
.family-onboarding__guide:focus-visible,
.family-income-guide-tab:focus-visible { outline: 2px solid #ffda99; outline-offset: 2px; }

.family-income-guide { color: #eee; font-size: 14px; line-height: 1.5; }
.family-guide-hero {
    padding: 20px 22px;
    border: 1px solid rgba(255, 110, 95, .4);
    border-radius: 12px;
    background: linear-gradient(125deg, #3e1c22, #1b1c27 62%, #152522);
}
.family-guide-hero h4 { margin: 5px 0 8px; color: #fff; font-size: 21px; line-height: 1.2; }
.family-guide-hero > p { margin: 0; color: #e1e3e3; }
.family-guide-rule {
    margin-top: 15px;
    padding: 11px 13px;
    border-left: 4px solid #83d48a;
    border-radius: 5px;
    background: rgba(99, 192, 108, .14);
    color: #e4f5e5;
}
.family-income-guide-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.family-income-guide-tab {
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: #292a31;
    color: #dbdcdf;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.family-income-guide-tab:hover { border-color: #ff9a87; color: #fff; }
.family-income-guide-tab.active { border-color: #ff9386; background: #a92729; color: #fff; box-shadow: 0 2px 12px rgba(229, 57, 53, .28); }
.family-income-guide-panel { padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: #202229; }
.family-income-guide-panel[hidden] { display: none; }
.family-income-guide-panel h5 { margin: 0 0 15px; color: #ffe0b6; font-size: 17px; }
.family-guide-step {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 9px;
    background: rgba(255, 255, 255, .045);
}
.family-guide-step > span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 10px; border-radius: 50%; background: #e53935; color: #fff; font-weight: 800; }
.family-guide-step strong { display: block; color: #fff; font-size: 13px; }
.family-guide-step p { margin: 6px 0 0; color: #d5d7d8; font-size: 12px; line-height: 1.5; }
.family-guide-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.family-guide-example,
.family-guide-note { margin: 15px 0 0; padding: 11px 13px; border-radius: 7px; background: rgba(99, 192, 108, .1); color: #e1eee2; line-height: 1.5; }
.family-guide-example { border-left: 3px solid #83d48a; }
.family-guide-note { background: rgba(255, 193, 93, .1); color: #eadfc9; }
.family-guide-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.family-guide-facts > div { padding: 13px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .045); }
.family-guide-facts strong { color: #ffcfab; }
.family-guide-facts p { margin: 7px 0 0; color: #d5d7d8; font-size: 12px; line-height: 1.5; }
.family-guide-milestones { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.family-guide-milestones span { padding: 7px 9px; border-radius: 20px; background: rgba(229, 57, 53, .2); color: #ffe4d0; font-size: 12px; }
@media (max-width: 680px) {
    .family-onboarding__steps,
    .family-guide-steps,
    .family-guide-steps--three,
    .family-guide-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .family-onboarding__steps,
    .family-guide-steps,
    .family-guide-steps--three,
    .family-guide-facts { grid-template-columns: 1fr; }
    .family-income-guide-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .family-onboarding,
    .family-guide-hero,
    .family-income-guide-panel { padding: 16px; }
}

/* Compact Families guide, using the same Arial type as the other guides. */
.family-income-guide,
.family-onboarding { font-family: Arial, sans-serif; }
.family-income-guide { font-size: .98em; line-height: 1.55; }
.family-onboarding { padding: 16px 18px; }
.family-onboarding h3 { margin: 0 0 5px; font-size: 1.25em; }
.family-onboarding__lead { margin: 0 0 10px; font-size: .91em; }
.family-onboarding__rule { margin: 10px 0; padding: 7px 10px; font-size: .82em; }
.family-onboarding__guide { padding: 6px 10px; font-size: .84em; }
.family-guide-hero { padding: 14px 16px; }
.family-guide-hero h4 { margin: 0 0 4px; font-size: 1.12em; }
.family-guide-hero > p { margin: 0; font-size: .9em; }
.family-guide-rule { margin-top: 9px; padding: 8px 10px; font-size: .84em; }
.family-income-guide-tabs { margin: 10px 0; }
.family-income-guide-tab { min-height: 33px; padding: 5px 8px; font-family: Arial, sans-serif; font-size: .82em; }
.family-income-guide-panel { padding: 13px 15px; }
.family-income-guide-panel h5 { margin: 0 0 9px; font-size: 1em; }
.family-guide-compact-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.family-guide-compact-steps--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 11px; }
.family-guide-compact-steps > div { padding: 9px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.045); }
.family-guide-compact-steps strong { display: block; color: #ffcfab; font-size: .85em; }
.family-guide-compact-steps span { display: block; margin-top: 3px; color: #e0e2e3; font-size: .82em; line-height: 1.4; }
.family-guide-caption { margin: 5px 0 9px !important; color: #d9dddd; font-size: .82em; line-height: 1.42; }
.family-guide-mini-note { margin: 10px 0 0 !important; padding: 8px 10px; border-left: 3px solid #83d48a; border-radius: 5px; background: rgba(99,192,108,.1); color: #e1eee2; font-size: .82em; line-height: 1.45; }

.family-donation-flow {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 5px 10px;
    border: 1px solid rgba(99, 216, 117, .35);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(50, 125, 58, .16), rgba(22, 31, 26, .55));
    box-sizing: border-box;
}
.family-donation-flow--blue { border-color: rgba(90, 162, 255, .43); background: linear-gradient(90deg, rgba(47, 98, 173, .2), rgba(20, 29, 47, .58)); }
.family-donation-flow__label { flex: 0 0 auto; color: #e9f5e8; font-size: .76em; font-weight: bold; white-space: nowrap; }
.family-donation-flow--blue .family-donation-flow__label { color: #dceaff; }
.family-donation-flow__label--vault { padding: 5px 8px; border: 1px solid rgba(121, 217, 125, .4); border-radius: 5px; background: rgba(57, 124, 64, .26); }
.family-donation-flow--blue .family-donation-flow__label--vault { border-color: rgba(100, 176, 255, .45); background: rgba(40, 94, 171, .32); }
.family-donation-flow__track { position: relative; display: block; flex: 1 1 auto; min-width: 50px; height: 36px; overflow: hidden; border-bottom: 1px dashed rgba(255,255,255,.25); }
.family-donation-flow__coin { position: absolute; top: 2px; left: -34px; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(100, 255, 117, .85)); animation: familyGoobFly 3.1s linear infinite; pointer-events: none; }
.family-donation-flow--blue .family-donation-flow__coin { filter: drop-shadow(0 0 6px rgba(84, 174, 255, .9)); }
.family-donation-flow__coin--second { animation-delay: -1.55s; }
@keyframes familyGoobFly {
    0% { left: -34px; transform: translateY(6px) scale(.72); opacity: 0; }
    12% { opacity: 1; }
    50% { transform: translateY(-4px) scale(1.04); }
    88% { opacity: 1; }
    100% { left: calc(100% + 2px); transform: translateY(4px) scale(.8); opacity: 0; }
}
@media (max-width: 560px) {
    .family-guide-compact-steps { grid-template-columns: 1fr; }
    .family-donation-flow { gap: 5px; padding: 5px 6px; }
    .family-donation-flow__label--vault { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .family-donation-flow__coin { animation: none; left: 44%; opacity: 1; transform: none; }
    .family-donation-flow__coin--second { left: 56%; }
}

/* First step of the Families guide: explain membership before income. */
.family-guide-start-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 161, 122, .34);
    border-radius: 10px;
    background: linear-gradient(115deg, rgba(139, 51, 46, .26), rgba(37, 43, 49, .75));
}
.family-guide-start-intro__icon {
    display: grid;
    flex: 0 0 54px;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 183, 132, .46);
    border-radius: 12px;
    background: rgba(229, 57, 53, .2);
    font-size: 28px;
}
.family-guide-start-intro__tag { color: #ffbe9f; font-size: .67em; font-weight: 800; letter-spacing: .1em; }
.family-guide-start-intro h5 { margin: 2px 0 3px; color: #fff; font-size: 1.06em; }
.family-guide-start-intro p { margin: 0 !important; color: #e3e5e4; font-size: .85em; line-height: 1.42; }
.family-guide-join-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.family-guide-join-path { min-width: 0; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .045); }
.family-guide-join-path--join { border-color: rgba(103, 206, 130, .38); background: linear-gradient(145deg, rgba(43, 103, 65, .23), rgba(24, 32, 28, .6)); }
.family-guide-join-path--create { border-color: rgba(255, 150, 112, .38); background: linear-gradient(145deg, rgba(131, 48, 41, .24), rgba(34, 26, 29, .6)); }
.family-guide-join-path__badge { display: inline-block; padding: 3px 7px; border-radius: 4px; background: rgba(102, 221, 129, .16); color: #b2eabf; font-size: .66em; font-weight: 800; letter-spacing: .06em; }
.family-guide-join-path--create .family-guide-join-path__badge { background: rgba(255, 160, 111, .15); color: #ffd0b6; }
.family-guide-join-path h5 { margin: 7px 0 8px; color: #fff; font-size: 1.02em; }
.family-guide-join-path ol { margin: 0; padding-left: 18px; color: #e0e3e1; font-size: .79em; line-height: 1.43; }
.family-guide-join-path li { margin: 4px 0; padding-left: 2px; }
.family-guide-join-path li::marker { color: #ffb99b; font-weight: 800; }
.family-guide-join-path--join li::marker { color: #99e5ae; }
.family-guide-join-path strong { color: #fff; }
.family-guide-start-footer { margin: 11px 0 0 !important; padding: 8px 10px; border-radius: 6px; background: rgba(255, 205, 111, .1); color: #f0e5d2; font-size: .8em; line-height: 1.42; }
@media (max-width: 620px) {
    .family-guide-join-paths { grid-template-columns: 1fr; }
}