:root {
    color-scheme: dark;
    --bg-base: #02060f;
    --bg-overlay: rgba(1, 5, 12, 0.5);
    --surface-bg: rgba(7, 12, 24, 0.92);
    --surface-gradient: linear-gradient(155deg, rgba(10, 16, 32, 0.96), rgba(2, 6, 14, 0.98));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(8, 15, 30, 0.94), rgba(2, 6, 14, 0.98));
    --surface-overlay-highlight: rgba(127, 227, 255, 0.08);
    --surface-border: rgba(120, 188, 255, 0.5);
    --surface-glow: rgba(46, 116, 196, 0.42);
    --accent: #7fe3ff;
    --accent-strong: #c5f6ff;
    --accent-soft: rgba(112, 216, 255, 0.14);
    --accent-muted: rgba(46, 116, 196, 0.35);
    --accent-rgb: 127 227 255;
    --event-secondary-rgb: 139 123 255;
    --event-tertiary-rgb: 118 255 196;
    --scrollbar-track: rgba(4, 10, 22, 0.82);
    --scrollbar-track-outline: rgba(127, 227, 255, 0.12);
    --scrollbar-thumb: rgb(var(--accent-rgb) / 0.5);
    --scrollbar-thumb-hover: rgb(var(--accent-rgb) / 0.7);
    --scrollbar-thumb-active: rgb(var(--accent-rgb) / 0.88);
    --text-primary: #f6f8ff;
    --text-secondary: rgba(199, 219, 255, 0.68);
    --text-tertiary: rgba(158, 192, 243, 0.52);
    --surface-alt: rgba(4, 10, 22, 0.72);
    --shadow-strong: 0 28px 60px rgba(0, 6, 18, 0.66);
    --shadow-soft: 0 18px 34px rgba(6, 16, 36, 0.55);
    --corner-size: 28px;
    --corner-thickness: 2px;
    --button-corner-size: 10px;
    --font-base: 'Sarpanch', 'Segoe UI', sans-serif;
    --ui-scale-desktop: 0.88;
    user-select: none;
}

@property --button-pop-scale {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --button-pop-raise {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --button-pop-rotation {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes luckPresetMildShake {
    0%,
    100% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(0) rotate(0deg);
    }
    20% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-1.6px) rotate(-0.8deg);
    }
    40% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(1.6px) rotate(0.8deg);
    }
    60% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-1px) rotate(-0.5deg);
    }
    80% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(1px) rotate(0.5deg);
    }
}

@keyframes luckPresetAggressiveShake {
    0%,
    100% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(0) rotate(0deg);
    }
    10% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-4px) rotate(-3deg);
    }
    20% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(4px) rotate(3deg);
    }
    30% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-5px) rotate(-4deg);
    }
    40% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(5px) rotate(4deg);
    }
    50% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-3px) rotate(-2deg);
    }
    60% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(3px) rotate(2deg);
    }
    70% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-2px) rotate(-1deg);
    }
    80% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(2px) rotate(1deg);
    }
    90% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-1px) rotate(-0.5deg);
    }
}

@keyframes luckPresetMassiveShake {
    0%,
    100% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(0) rotate(0deg);
    }
    10% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-8px) rotate(-6deg);
    }
    20% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(8px) rotate(6deg);
    }
    30% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-10px) rotate(-8deg);
    }
    40% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(10px) rotate(8deg);
    }
    50% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-6px) rotate(-4deg);
    }
    60% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(6px) rotate(4deg);
    }
    70% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-4px) rotate(-2deg);
    }
    80% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(4px) rotate(2deg);
    }
    90% {
        transform: translateY(var(--button-raise)) scale(var(--button-scale)) translateX(-2px) rotate(-1deg);
    }
}

@keyframes luckPresetPop {
    0% {
        --button-pop-scale: 1;
        --button-pop-raise: 0px;
        --button-pop-rotation: 0deg;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    28% {
        --button-pop-scale: 1.24;
        --button-pop-raise: -14px;
        box-shadow: 0 26px 48px rgba(0, 6, 18, 0.42), 0 0 28px rgba(127, 227, 255, 0.32);
    }
    58% {
        --button-pop-scale: 1.08;
        --button-pop-raise: -4px;
        box-shadow: 0 16px 28px rgba(0, 6, 18, 0.32), 0 0 18px rgba(127, 227, 255, 0.24);
    }
    100% {
        --button-pop-scale: 1;
        --button-pop-raise: 0px;
        --button-pop-rotation: 0deg;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes luckPresetMegaPop {
    0% {
        --button-pop-scale: 1;
        --button-pop-raise: 0px;
        --button-pop-rotation: 0deg;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    24% {
        --button-pop-scale: 1.52;
        --button-pop-raise: -26px;
        box-shadow: 0 38px 62px rgba(0, 6, 18, 0.5), 0 0 36px rgba(127, 227, 255, 0.42);
    }
    56% {
        --button-pop-scale: 1.18;
        --button-pop-raise: -8px;
        box-shadow: 0 24px 38px rgba(0, 6, 18, 0.36), 0 0 24px rgba(127, 227, 255, 0.28);
    }
    100% {
        --button-pop-scale: 1;
        --button-pop-raise: 0px;
        --button-pop-rotation: 0deg;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes luckPresetMasterPop {
    0% {
        --button-pop-scale: 1;
        --button-pop-raise: 0px;
        --button-pop-rotation: 0deg;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    24% {
        --button-pop-scale: 1.7;
        --button-pop-raise: -56px;
        box-shadow: 0 38px 62px rgba(0, 23, 68, 0.5), 0 0 36px rgba(127, 227, 255, 0.42);
    }
    56% {
        --button-pop-scale: 1.38;
        --button-pop-raise: -18px;
        box-shadow: 0 24px 38px rgba(0, 19, 58, 0.36), 0 0 24px rgba(127, 227, 255, 0.28);
    }
    100% {
        --button-pop-scale: 1;
        --button-pop-raise: 0px;
        --button-pop-rotation: 0deg;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

* {
    box-sizing: border-box;
}

:where(button, input, select, textarea, fieldset, dialog) {
    border-radius: 0;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: var(--font-base);
    background: var(--bg-base);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: clamp(16px, 3vw, 32px);
    position: relative;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body.reduce-motion {
    scroll-behavior: auto;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-name: none !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
}

body.reduce-motion .interface-backdrop__video {
    display: none;
}

body.reduce-motion .banner__emblem--spinning img {
    animation: none !important;
}

body.quality-no-ui-animations button:not(.luck-preset-button--shake),
body.quality-no-ui-animations .interface-button,
body.quality-no-ui-animations .interface-toggle,
body.quality-no-ui-animations .roll-trigger,
body.quality-no-ui-animations .roll-cancel {
    animation: none !important;
    transition: none !important;
}

body.quality-no-ui-animations .resource-link,
body.quality-no-ui-animations .support-float *,
body.quality-no-ui-animations .donation-float * {
    transition: none !important;
}

body.quality-no-roll-sigil-animations [class*="sigil-"],
body.quality-no-roll-sigil-animations .feed__viewport [class*="roll"],
body.quality-no-roll-sigil-animations .feed__viewport [class*="aura"] {
    animation: none !important;
    transition-duration: 0s !important;
}

body.quality-no-glitch.is-glitching,
body.quality-no-glitch .is-glitching,
body.quality-no-glitch.biome--glitch,
body.quality-no-glitch .biome--glitch {
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}

body.quality-reduced-glitch.biome--glitch,
body.quality-reduced-glitch .biome--glitch,
body.quality-reduced-glitch.is-glitching,
body.quality-reduced-glitch .is-glitching {
    --glitch-intensity: 0.35;
}

body.quality-no-shakes .luck-preset-button--shake {
    animation: none !important;
}

body.performance-mode [class*="Class"]:not(.bloodIIClass):not(.oblivionClass) {
    animation: none !important;
}

body.quality-no-ui-animations .support-float--collapsed .support-float__toggle::before,
body.quality-no-ui-animations .support-float--collapsed .support-float__toggle::after,
body.quality-no-ui-animations .support-float--collapsed .support-float__toggle-icon--expand i,
body.quality-no-ui-animations .support-float__link:hover .support-float__icon i,
body.quality-no-ui-animations .support-float__link:focus-visible .support-float__icon i {
    animation: none !important;
}

body.performance-mode .interface-footer,
body.performance-mode .feed__viewport,
body.performance-mode .resource-link,
body.performance-mode .support-float,
body.performance-mode .donation-float {
    contain: layout style;
}

body.performance-mode .support-float__link::before,
body.performance-mode .support-float__link::after,
body.performance-mode .support-float__toggle::before,
body.performance-mode .support-float__toggle::after,
body.performance-mode .donation-float__link::before,
body.performance-mode .donation-float__link::after {
    display: none !important;
}

body.performance-mode .support-float__qr-drawer,
body.performance-mode .support-float--collapsed .support-float__link,
body.performance-mode .donation-float--collapsed .donation-float__link,
body.performance-mode [class*="Class"]:not(.bloodIIClass):not(.oblivionClass) {
    filter: none !important;
}

@keyframes singularity-summon-shake {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    2% {
        transform: translate3d(0.04px, -0.03px, 0) rotate(0.002deg);
    }

    4% {
        transform: translate3d(-0.11px, 0.08px, 0) rotate(-0.007deg);
    }

    6% {
        transform: translate3d(0.2px, -0.14px, 0) rotate(0.012deg);
    }

    8% {
        transform: translate3d(-0.31px, 0.21px, 0) rotate(-0.018deg);
    }

    10% {
        transform: translate3d(0.43px, -0.28px, 0) rotate(0.026deg);
    }

    12% {
        transform: translate3d(-0.55px, 0.37px, 0) rotate(-0.033deg);
    }

    14% {
        transform: translate3d(0.69px, -0.46px, 0) rotate(0.042deg);
    }

    16% {
        transform: translate3d(-0.84px, 0.56px, 0) rotate(-0.051deg);
    }

    18% {
        transform: translate3d(1px, -0.67px, 0) rotate(0.06deg);
    }

    20% {
        transform: translate3d(-1.16px, 0.78px, 0) rotate(-0.07deg);
    }

    22% {
        transform: translate3d(1.34px, -0.89px, 0) rotate(0.08deg);
    }

    24% {
        transform: translate3d(-1.52px, 1.01px, 0) rotate(-0.091deg);
    }

    26% {
        transform: translate3d(1.7px, -1.13px, 0) rotate(0.102deg);
    }

    28% {
        transform: translate3d(-1.89px, 1.26px, 0) rotate(-0.114deg);
    }

    30% {
        transform: translate3d(2.09px, -1.4px, 0) rotate(0.126deg);
    }

    32% {
        transform: translate3d(-2.3px, 1.53px, 0) rotate(-0.138deg);
    }

    34% {
        transform: translate3d(2.51px, -1.67px, 0) rotate(0.151deg);
    }

    36% {
        transform: translate3d(-2.73px, 1.82px, 0) rotate(-0.164deg);
    }

    38% {
        transform: translate3d(2.95px, -1.97px, 0) rotate(0.177deg);
    }

    40% {
        transform: translate3d(-3.18px, 2.12px, 0) rotate(-0.191deg);
    }

    42% {
        transform: translate3d(3.41px, -2.27px, 0) rotate(0.205deg);
    }

    44% {
        transform: translate3d(-3.65px, 2.43px, 0) rotate(-0.219deg);
    }

    46% {
        transform: translate3d(3.89px, -2.59px, 0) rotate(0.234deg);
    }

    48% {
        transform: translate3d(-4.14px, 2.76px, 0) rotate(-0.248deg);
    }

    50% {
        transform: translate3d(4.39px, -2.93px, 0) rotate(0.264deg);
    }

    52% {
        transform: translate3d(-4.65px, 3.1px, 0) rotate(-0.279deg);
    }

    54% {
        transform: translate3d(4.91px, -3.27px, 0) rotate(0.295deg);
    }

    56% {
        transform: translate3d(-5.18px, 3.45px, 0) rotate(-0.311deg);
    }

    58% {
        transform: translate3d(5.45px, -3.63px, 0) rotate(0.327deg);
    }

    60% {
        transform: translate3d(-5.72px, 3.81px, 0) rotate(-0.343deg);
    }

    62% {
        transform: translate3d(6px, -4px, 0) rotate(0.36deg);
    }

    64% {
        transform: translate3d(-6.28px, 4.19px, 0) rotate(-0.377deg);
    }

    66% {
        transform: translate3d(6.57px, -4.38px, 0) rotate(0.394deg);
    }

    68% {
        transform: translate3d(-6.86px, 4.57px, 0) rotate(-0.412deg);
    }

    70% {
        transform: translate3d(7.15px, -4.77px, 0) rotate(0.429deg);
    }

    72% {
        transform: translate3d(-7.45px, 4.97px, 0) rotate(-0.447deg);
    }

    74% {
        transform: translate3d(7.75px, -5.17px, 0) rotate(0.465deg);
    }

    76% {
        transform: translate3d(-8.06px, 5.37px, 0) rotate(-0.484deg);
    }

    78% {
        transform: translate3d(8.37px, -5.58px, 0) rotate(0.502deg);
    }

    80% {
        transform: translate3d(-8.68px, 5.79px, 0) rotate(-0.521deg);
    }

    82% {
        transform: translate3d(9px, -6px, 0) rotate(0.54deg);
    }

    84% {
        transform: translate3d(-9.32px, 6.21px, 0) rotate(-0.559deg);
    }

    86% {
        transform: translate3d(9.64px, -6.43px, 0) rotate(0.579deg);
    }

    88% {
        transform: translate3d(-9.97px, 6.65px, 0) rotate(-0.598deg);
    }

    90% {
        transform: translate3d(10.3px, -6.87px, 0) rotate(0.618deg);
    }

    92% {
        transform: translate3d(-10.63px, 7.09px, 0) rotate(-0.638deg);
    }

    94% {
        transform: translate3d(10.97px, -7.31px, 0) rotate(0.658deg);
    }

    96% {
        transform: translate3d(-11.31px, 7.54px, 0) rotate(-0.679deg);
    }

    98% {
        transform: translate3d(11.65px, -7.77px, 0) rotate(0.699deg);
    }
}

@keyframes singularity-summon-background-shake {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1.055);
    }

    3% {
        transform: translate3d(0.12px, -0.08px, 0) rotate(0.005deg) scale(1.056);
    }

    6% {
        transform: translate3d(-0.34px, 0.22px, 0) rotate(-0.013deg) scale(1.057);
    }

    9% {
        transform: translate3d(0.61px, -0.4px, 0) rotate(0.023deg) scale(1.057);
    }

    12% {
        transform: translate3d(-0.92px, 0.6px, 0) rotate(-0.035deg) scale(1.058);
    }

    15% {
        transform: translate3d(1.28px, -0.83px, 0) rotate(0.048deg) scale(1.059);
    }

    18% {
        transform: translate3d(-1.66px, 1.08px, 0) rotate(-0.062deg) scale(1.06);
    }

    21% {
        transform: translate3d(2.08px, -1.35px, 0) rotate(0.078deg) scale(1.06);
    }

    24% {
        transform: translate3d(-2.53px, 1.64px, 0) rotate(-0.095deg) scale(1.061);
    }

    27% {
        transform: translate3d(3px, -1.95px, 0) rotate(0.112deg) scale(1.062);
    }

    30% {
        transform: translate3d(-3.49px, 2.27px, 0) rotate(-0.131deg) scale(1.063);
    }

    33% {
        transform: translate3d(4.01px, -2.6px, 0) rotate(0.15deg) scale(1.064);
    }

    36% {
        transform: translate3d(-4.55px, 2.96px, 0) rotate(-0.17deg) scale(1.064);
    }

    39% {
        transform: translate3d(5.11px, -3.32px, 0) rotate(0.191deg) scale(1.065);
    }

    42% {
        transform: translate3d(-5.69px, 3.7px, 0) rotate(-0.213deg) scale(1.066);
    }

    45% {
        transform: translate3d(6.28px, -4.08px, 0) rotate(0.236deg) scale(1.067);
    }

    48% {
        transform: translate3d(-6.9px, 4.48px, 0) rotate(-0.259deg) scale(1.067);
    }

    51% {
        transform: translate3d(7.53px, -4.9px, 0) rotate(0.283deg) scale(1.068);
    }

    54% {
        transform: translate3d(-8.18px, 5.32px, 0) rotate(-0.307deg) scale(1.069);
    }

    57% {
        transform: translate3d(8.85px, -5.75px, 0) rotate(0.332deg) scale(1.07);
    }

    60% {
        transform: translate3d(-9.54px, 6.2px, 0) rotate(-0.358deg) scale(1.071);
    }

    63% {
        transform: translate3d(10.23px, -6.65px, 0) rotate(0.384deg) scale(1.071);
    }

    66% {
        transform: translate3d(-10.95px, 7.12px, 0) rotate(-0.411deg) scale(1.072);
    }

    69% {
        transform: translate3d(11.68px, -7.59px, 0) rotate(0.438deg) scale(1.073);
    }

    72% {
        transform: translate3d(-12.42px, 8.07px, 0) rotate(-0.466deg) scale(1.074);
    }

    75% {
        transform: translate3d(13.18px, -8.57px, 0) rotate(0.494deg) scale(1.075);
    }

    78% {
        transform: translate3d(-13.95px, 9.07px, 0) rotate(-0.523deg) scale(1.075);
    }

    81% {
        transform: translate3d(14.73px, -9.58px, 0) rotate(0.553deg) scale(1.076);
    }

    84% {
        transform: translate3d(-15.53px, 10.1px, 0) rotate(-0.582deg) scale(1.077);
    }

    87% {
        transform: translate3d(16.34px, -10.62px, 0) rotate(0.613deg) scale(1.078);
    }

    90% {
        transform: translate3d(-17.17px, 11.16px, 0) rotate(-0.644deg) scale(1.078);
    }

    93% {
        transform: translate3d(18px, -11.7px, 0) rotate(0.675deg) scale(1.079);
    }

    96% {
        transform: translate3d(-18.85px, 12.25px, 0) rotate(-0.707deg) scale(1.08);
    }

    99% {
        transform: translate3d(19.71px, -12.81px, 0) rotate(0.739deg) scale(1.081);
    }
}

@keyframes singularity-summon-shake-strength {
    0% {
        --singularity-summon-shake-distance: 2px;
        --singularity-summon-shake-distance-negative: -2px;
    }

    8.333% {
        --singularity-summon-shake-distance: 3px;
        --singularity-summon-shake-distance-negative: -3px;
    }

    16.667% {
        --singularity-summon-shake-distance: 4px;
        --singularity-summon-shake-distance-negative: -4px;
    }

    25% {
        --singularity-summon-shake-distance: 5px;
        --singularity-summon-shake-distance-negative: -5px;
    }

    33.333% {
        --singularity-summon-shake-distance: 6px;
        --singularity-summon-shake-distance-negative: -6px;
    }

    41.667% {
        --singularity-summon-shake-distance: 7px;
        --singularity-summon-shake-distance-negative: -7px;
    }

    50% {
        --singularity-summon-shake-distance: 8px;
        --singularity-summon-shake-distance-negative: -8px;
    }

    58.333% {
        --singularity-summon-shake-distance: 9px;
        --singularity-summon-shake-distance-negative: -9px;
    }

    66.667% {
        --singularity-summon-shake-distance: 10px;
        --singularity-summon-shake-distance-negative: -10px;
    }

    75% {
        --singularity-summon-shake-distance: 11px;
        --singularity-summon-shake-distance-negative: -11px;
    }

    83.333% {
        --singularity-summon-shake-distance: 12px;
        --singularity-summon-shake-distance-negative: -12px;
    }

    91.667% {
        --singularity-summon-shake-distance: 13px;
        --singularity-summon-shake-distance-negative: -13px;
    }

    100% {
        --singularity-summon-shake-distance: 14px;
        --singularity-summon-shake-distance-negative: -14px;
    }
}

@keyframes singularity-summon-translate-jitter {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    12.5% {
        transform: translate3d(var(--singularity-summon-jitter-1-x, var(--singularity-summon-shake-distance, 2px)), var(--singularity-summon-jitter-1-y, 0px), 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    25% {
        transform: translate3d(var(--singularity-summon-jitter-2-x, 0px), var(--singularity-summon-jitter-2-y, var(--singularity-summon-shake-distance-negative, -2px)), 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    37.5% {
        transform: translate3d(var(--singularity-summon-jitter-3-x, var(--singularity-summon-shake-distance-negative, -2px)), var(--singularity-summon-jitter-3-y, 0px), 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    50% {
        transform: translate3d(var(--singularity-summon-jitter-4-x, 0px), var(--singularity-summon-jitter-4-y, var(--singularity-summon-shake-distance, 2px)), 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    62.5% {
        transform: translate3d(var(--singularity-summon-jitter-5-x, var(--singularity-summon-shake-distance, 2px)), var(--singularity-summon-jitter-5-y, 0px), 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    75% {
        transform: translate3d(var(--singularity-summon-jitter-6-x, 0px), var(--singularity-summon-jitter-6-y, var(--singularity-summon-shake-distance-negative, -2px)), 0) scale(var(--singularity-summon-shake-scale, 1));
    }

    87.5% {
        transform: translate3d(var(--singularity-summon-jitter-7-x, var(--singularity-summon-shake-distance-negative, -2px)), var(--singularity-summon-jitter-7-y, 0px), 0) scale(var(--singularity-summon-shake-scale, 1));
    }
}

body.singularity-summon-active .interface-shell,
body.singularity-summon-active .interface-footer {
    --singularity-summon-shake-scale: 1;
    animation:
        singularity-summon-shake-strength 12s steps(12, end) forwards,
        singularity-summon-translate-jitter 0.34s ease infinite;
    transform-origin: center;
    will-change: transform;
}

@media (min-width: 1200px) {
    @supports not (zoom: 1) {
        body.singularity-summon-active .interface-shell,
        body.singularity-summon-active .interface-footer {
            --singularity-summon-shake-scale: var(--ui-scale-desktop);
        }
    }
}

body.quality-no-shakes.singularity-summon-active .interface-shell,
body.quality-no-shakes.singularity-summon-active .interface-footer {
    animation: none !important;
}

@property --singularity-quake-major {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --singularity-quake-major-negative {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --singularity-quake-minor {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --singularity-quake-minor-negative {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@keyframes singularity-earthquake-intensity {
    0% {
        --singularity-quake-major: 0px;
        --singularity-quake-major-negative: 0px;
        --singularity-quake-minor: 0px;
        --singularity-quake-minor-negative: 0px;
    }

    10% {
        --singularity-quake-major: 0.6px;
        --singularity-quake-major-negative: -0.6px;
        --singularity-quake-minor: 0.2px;
        --singularity-quake-minor-negative: -0.2px;
    }

    25% {
        --singularity-quake-major: 1.5px;
        --singularity-quake-major-negative: -1.5px;
        --singularity-quake-minor: 0.55px;
        --singularity-quake-minor-negative: -0.55px;
    }

    43% {
        --singularity-quake-major: 3px;
        --singularity-quake-major-negative: -3px;
        --singularity-quake-minor: 1.2px;
        --singularity-quake-minor-negative: -1.2px;
    }

    58% {
        --singularity-quake-major: 5.5px;
        --singularity-quake-major-negative: -5.5px;
        --singularity-quake-minor: 2.2px;
        --singularity-quake-minor-negative: -2.2px;
    }

    70% {
        --singularity-quake-major: 9px;
        --singularity-quake-major-negative: -9px;
        --singularity-quake-minor: 3.8px;
        --singularity-quake-minor-negative: -3.8px;
    }

    80% {
        --singularity-quake-major: 14px;
        --singularity-quake-major-negative: -14px;
        --singularity-quake-minor: 5.8px;
        --singularity-quake-minor-negative: -5.8px;
    }

    88% {
        --singularity-quake-major: 20px;
        --singularity-quake-major-negative: -20px;
        --singularity-quake-minor: 8.5px;
        --singularity-quake-minor-negative: -8.5px;
    }

    94% {
        --singularity-quake-major: 27px;
        --singularity-quake-major-negative: -27px;
        --singularity-quake-minor: 12px;
        --singularity-quake-minor-negative: -12px;
    }

    100% {
        --singularity-quake-major: 36px;
        --singularity-quake-major-negative: -36px;
        --singularity-quake-minor: 16px;
        --singularity-quake-minor-negative: -16px;
    }
}

@keyframes singularity-earthquake-rumble {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    7% {
        transform: translate3d(var(--singularity-quake-minor), var(--singularity-quake-major-negative), 0) rotate(0.025deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    15% {
        transform: translate3d(var(--singularity-quake-major-negative), var(--singularity-quake-minor), 0) rotate(-0.045deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    23% {
        transform: translate3d(var(--singularity-quake-major), var(--singularity-quake-minor), 0) rotate(0.035deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    31% {
        transform: translate3d(var(--singularity-quake-minor-negative), var(--singularity-quake-major-negative), 0) rotate(-0.018deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    40% {
        transform: translate3d(var(--singularity-quake-major-negative), 0, 0) rotate(-0.06deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    48% {
        transform: translate3d(var(--singularity-quake-minor), var(--singularity-quake-major), 0) rotate(0.028deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    57% {
        transform: translate3d(var(--singularity-quake-major), var(--singularity-quake-minor-negative), 0) rotate(0.065deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    65% {
        transform: translate3d(0, var(--singularity-quake-major-negative), 0) rotate(-0.032deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    74% {
        transform: translate3d(var(--singularity-quake-major-negative), var(--singularity-quake-minor-negative), 0) rotate(-0.052deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    82% {
        transform: translate3d(var(--singularity-quake-major), var(--singularity-quake-minor), 0) rotate(0.042deg) scale(var(--singularity-summon-shake-scale, 1));
    }

    91% {
        transform: translate3d(var(--singularity-quake-minor-negative), var(--singularity-quake-minor), 0) rotate(-0.015deg) scale(var(--singularity-summon-shake-scale, 1));
    }
}

body.singularity-summon-active .interface-shell,
body.singularity-summon-active .interface-footer {
    --singularity-summon-shake-scale: 1;
    animation:
        singularity-earthquake-intensity 12.5s linear both,
        singularity-earthquake-rumble 240ms linear infinite;
    transform-origin: center;
    will-change: transform;
}

body.singularity-summon-active .interface-footer {
    animation-delay: 0ms, -83ms;
}

@media (min-width: 1200px) {
    @supports not (zoom: 1) {
        body.singularity-summon-active .interface-shell,
        body.singularity-summon-active .interface-footer {
            --singularity-summon-shake-scale: var(--ui-scale-desktop);
        }
    }
}

body.quality-no-shakes.singularity-summon-active .interface-shell,
body.quality-no-shakes.singularity-summon-active .interface-footer {
    animation: none !important;
}

button {
    --button-scale: 1;
    --button-raise: 0px;
    --button-pop-scale: 1;
    --button-pop-raise: 0px;
    --button-pop-rotation: 0deg;
    transform:
        translateY(var(--button-raise))
        translateY(var(--button-pop-raise))
        scale(var(--button-scale))
        scale(var(--button-pop-scale))
        rotate(var(--button-pop-rotation));
    transition: transform 0.2s ease;
    transform-origin: center;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    button {
        transition: none;
        transform: none !important;
    }
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    box-shadow: inset 0 0 0 1px var(--scrollbar-track-outline);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.85), var(--scrollbar-thumb));
    border: 2px solid rgba(2, 6, 14, 0.9);
    box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.32);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.95), var(--scrollbar-thumb-hover));
}

*::-webkit-scrollbar-thumb:active {
    background: linear-gradient(140deg, rgb(var(--accent-rgb) / 1), var(--scrollbar-thumb-active));
}


body.theme-event-valentine {
    --bg-base: #13030f;
    --bg-overlay: rgba(18, 4, 14, 0.56);
    --surface-bg: rgba(34, 8, 28, 0.9);
    --surface-gradient: linear-gradient(155deg, rgba(58, 14, 42, 0.95), rgba(22, 6, 17, 0.98));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(44, 10, 33, 0.94), rgba(17, 4, 14, 0.98));
    --surface-overlay-highlight: rgba(255, 165, 208, 0.1);
    --surface-border: rgba(255, 138, 189, 0.58);
    --surface-glow: rgba(216, 72, 142, 0.42);
    --accent: #ff9dc6;
    --accent-strong: #ffd1e5;
    --accent-soft: rgba(255, 143, 194, 0.16);
    --accent-muted: rgba(201, 72, 128, 0.36);
    --accent-rgb: 255 157 198;
    --accent-rgb-feed: 155 57 98;
    --event-secondary-rgb: 255 101 153;
    --event-tertiary-rgb: 255 209 229;
    --scrollbar-track-outline: rgba(255, 165, 208, 0.16);
}

body.theme-event-april-fools {
    --bg-base: #100817;
    --bg-overlay: rgba(15, 6, 22, 0.54);
    --surface-bg: rgba(25, 12, 34, 0.92);
    --surface-gradient: linear-gradient(155deg, rgba(37, 21, 48, 0.96), rgba(12, 6, 18, 0.99));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(31, 16, 42, 0.95), rgba(10, 5, 16, 0.99));
    --surface-overlay-highlight: rgba(220, 255, 114, 0.1);
    --surface-border: rgba(220, 255, 114, 0.5);
    --surface-glow: rgba(192, 255, 78, 0.28);
    --accent: #dcff72;
    --accent-strong: #f1ffbd;
    --accent-soft: rgba(220, 255, 114, 0.15);
    --accent-muted: rgba(157, 196, 60, 0.3);
    --accent-rgb: 220 255 114;
    --accent-rgb-feed: 120 155 37;
    --event-secondary-rgb: 255 103 226;
    --event-tertiary-rgb: 126 230 255;
    --scrollbar-track-outline: rgba(220, 255, 114, 0.17);
}

body.theme-event-halloween {
    --bg-base: #110703;
    --bg-overlay: rgba(17, 7, 3, 0.55);
    --surface-bg: rgba(31, 13, 7, 0.92);
    --surface-gradient: linear-gradient(155deg, rgba(57, 25, 12, 0.96), rgba(22, 8, 4, 0.99));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(46, 18, 8, 0.95), rgba(15, 5, 2, 0.99));
    --surface-overlay-highlight: rgba(255, 170, 91, 0.1);
    --surface-border: rgba(255, 155, 69, 0.52);
    --surface-glow: rgba(234, 104, 28, 0.34);
    --accent: #ff9b45;
    --accent-strong: #ffd1a0;
    --accent-soft: rgba(255, 155, 69, 0.16);
    --accent-muted: rgba(196, 86, 28, 0.34);
    --accent-rgb: 255 155 69;
    --accent-rgb-feed: 155 72 25;
    --event-secondary-rgb: 190 111 255;
    --event-tertiary-rgb: 174 255 113;
    --scrollbar-track-outline: rgba(255, 155, 69, 0.17);
}

body.theme-event-summer {
    --bg-base: #031923;
    --bg-overlay: rgba(2, 20, 28, 0.48);
    --surface-bg: rgba(5, 30, 40, 0.91);
    --surface-gradient: linear-gradient(155deg, rgba(10, 57, 65, 0.96), rgba(3, 20, 32, 0.98));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(7, 44, 54, 0.95), rgba(2, 15, 26, 0.98));
    --surface-overlay-highlight: rgba(105, 231, 236, 0.12);
    --surface-border: rgba(92, 222, 229, 0.52);
    --surface-glow: rgba(40, 189, 205, 0.34);
    --accent: #ffd66b;
    --accent-strong: #fff0a6;
    --accent-soft: rgba(255, 214, 107, 0.16);
    --accent-muted: rgba(235, 177, 45, 0.3);
    --accent-rgb: 255 214 107;
    --accent-rgb-feed: 159 117 24;
    --event-secondary-rgb: 82 222 225;
    --event-tertiary-rgb: 255 133 156;
    --scrollbar-track-outline: rgba(92, 222, 229, 0.2);
}

body.theme-event-easter {
    --bg-base: #04150a;
    --bg-overlay: rgba(3, 18, 8, 0.52);
    --surface-bg: rgba(7, 31, 15, 0.92);
    --surface-gradient: linear-gradient(155deg, rgba(14, 55, 25, 0.95), rgba(4, 24, 12, 0.98));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(10, 42, 26, 0.94), rgba(2, 14, 6, 0.98));
    --surface-overlay-highlight: rgba(143, 255, 182, 0.1);
    --surface-border: rgba(143, 255, 205, 0.5);
    --surface-glow: rgba(72, 211, 137, 0.3);
    --accent: #8fffcd;
    --accent-strong: #68ffa9;
    --accent-soft: rgba(130, 255, 215, 0.16);
    --accent-muted: rgba(56, 201, 165, 0.3);
    --accent-rgb: 143 255 205;
    --accent-rgb-feed: 61 155 113;
    --event-secondary-rgb: 255 218 126;
    --event-tertiary-rgb: 198 153 255;
    --scrollbar-track-outline: rgba(143, 255, 205, 0.17);
}

body.theme-event-winter {
    --bg-base: #031123;
    --bg-overlay: rgba(3, 15, 32, 0.5);
    --surface-bg: rgba(8, 20, 42, 0.9);
    --surface-gradient: linear-gradient(155deg, rgba(10, 30, 58, 0.96), rgba(4, 16, 36, 0.98));
    --surface-overlay-gradient: linear-gradient(160deg, rgba(8, 24, 46, 0.94), rgba(3, 12, 28, 0.98));
    --surface-overlay-highlight: rgba(148, 221, 255, 0.1);
    --surface-border: rgba(146, 215, 255, 0.56);
    --surface-glow: rgba(84, 161, 235, 0.4);
    --accent: #94ddff;
    --accent-strong: #d7f3ff;
    --accent-soft: rgba(132, 209, 255, 0.16);
    --accent-muted: rgba(66, 136, 199, 0.34);
    --accent-rgb: 148 221 255;
    --accent-rgb-feed: 48 121 155;
    --event-secondary-rgb: 168 184 255;
    --event-tertiary-rgb: 220 247 255;
    --scrollbar-track-outline: rgba(148, 221, 255, 0.18);
}

body.biome--glitch {
    --bg-base: #010006;
    --bg-overlay: rgba(2, 0, 9, 0.7);
    --surface-bg: rgba(5, 0, 13, 0.94);
    --surface-gradient: linear-gradient(145deg, rgba(29, 0, 58, 0.98), rgba(2, 0, 9, 0.99) 48%, rgba(0, 23, 31, 0.97));
    --surface-overlay-gradient: linear-gradient(155deg, rgba(26, 0, 52, 0.94), rgba(1, 0, 7, 0.99) 54%, rgba(0, 27, 34, 0.9));
    --surface-overlay-highlight: rgba(133, 48, 255, 0.22);
    --surface-border: rgba(81, 240, 255, 0.7);
    --surface-glow: rgba(146, 40, 255, 0.42);
    --accent: #52f5ff;
    --accent-strong: #f4d5ff;
    --accent-soft: rgba(82, 245, 255, 0.2);
    --accent-muted: rgba(156, 48, 255, 0.38);
    --accent-rgb: 82 245 255;
    --accent-rgb-feed: 87 38 138;
    --scrollbar-track: rgba(4, 0, 12, 0.92);
    --scrollbar-track-outline: rgba(118, 229, 255, 0.28);
    --scrollbar-thumb: rgb(var(--accent-rgb) / 0.55);
    --scrollbar-thumb-hover: rgb(var(--accent-rgb) / 0.75);
    --scrollbar-thumb-active: rgb(var(--accent-rgb) / 0.92);
    --text-secondary: rgba(225, 214, 255, 0.86);
    --text-tertiary: rgba(125, 230, 255, 0.62);
}

body.biome--glitch .interface-backdrop {
    filter: saturate(1.55) contrast(1.2) brightness(0.82);
}

body.biome--glitch .interface-backdrop__veil {
    opacity: 0.85;
    mix-blend-mode: screen;
}

body.biome--glitch::before,
body.biome--glitch::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}

body.biome--glitch::before {
    background:
        repeating-linear-gradient(0deg, rgba(129, 42, 255, 0.12) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0, 238, 255, 0.12) 0 2px, transparent 2px 7px);
    mix-blend-mode: screen;
    opacity: 0;
}

body.biome--glitch::after {
    background:
        radial-gradient(circle at 16% 18%, rgba(132, 31, 255, 0.38), transparent 44%),
        radial-gradient(circle at 84% 22%, rgba(0, 238, 255, 0.32), transparent 46%),
        linear-gradient(115deg, rgba(15, 0, 35, 0.34), transparent 48%, rgba(0, 31, 38, 0.24));
    mix-blend-mode: lighten;
    opacity: 0;
}

body.biome--glitch.glitch-effects-enabled::before {
    opacity: 0.26;
}

body.biome--glitch.glitch-effects-enabled::after {
    opacity: 0.22;
}

body.biome--glitch .surface {
    border-color: rgba(91, 235, 255, 0.66);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.82),
        -4px 0 28px rgba(137, 30, 255, 0.25),
        4px 0 24px rgba(0, 229, 255, 0.2);
}

body.biome--glitch .surface::after {
    background:
        radial-gradient(circle at 16% 0%, rgba(143, 40, 255, 0.28), transparent 38%),
        radial-gradient(circle at 86% 8%, rgba(0, 230, 255, 0.16), transparent 34%),
        linear-gradient(155deg, rgba(27, 0, 54, 0.97), rgba(1, 0, 7, 0.99) 56%, rgba(0, 23, 29, 0.95));
}

body.biome--glitch .interface-toggle,
body.biome--glitch .roll-trigger {
    --button-background: linear-gradient(96deg, rgba(47, 0, 83, 0.96), rgba(1, 0, 8, 0.98) 56%, rgba(0, 39, 47, 0.9));
    --button-border-color: rgba(68, 240, 255, 0.68);
    --button-accent: rgba(151, 48, 255, 0.72);
    color: #fff;
}

body.biome--glitch .resource-link {
    box-shadow: 0 10px 24px rgba(20, 0, 40, 0.55);
}

.glitch-signal {
    position: fixed;
    z-index: 4300;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    contain: layout paint style;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 30%, rgba(132, 25, 255, 0.2), transparent 34%),
        radial-gradient(circle at 82% 64%, rgba(0, 235, 255, 0.14), transparent 36%);
}

.glitch-signal > span {
    position: absolute;
    display: block;
    pointer-events: none;
}

.glitch-entry-errors {
    position: fixed;
    z-index: 4360;
    right: clamp(12px, 3vw, 46px);
    bottom: clamp(14px, 4vh, 46px);
    width: min(390px, calc(100vw - 24px));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    contain: layout paint style;
    filter: saturate(1.4) contrast(1.18);
}

.glitch-entry-errors__stack {
    display: grid;
    gap: 7px;
}

.glitch-entry-error {
    position: relative;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    min-height: 78px;
    overflow: hidden;
    border: 1px solid rgba(255, 35, 48, 0.92);
    background:
        linear-gradient(90deg, rgba(36, 0, 5, 0.98), rgba(3, 0, 3, 0.98) 42%, rgba(22, 0, 3, 0.98)),
        #050002;
    box-shadow:
        inset 0 0 0 2px rgba(255, 19, 34, 0.12),
        0 0 0 1px rgba(62, 0, 7, 0.96),
        0 0 20px rgba(255, 0, 26, 0.25);
    color: #ff2335;
    opacity: 0;
    transform: translate3d(54px, 0, 0);
    clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%);
}

.glitch-entry-error::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: "";
    opacity: 0.34;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 26, 40, 0.16) 3px 4px),
        linear-gradient(90deg, transparent 0 62%, rgba(255, 0, 22, 0.16) 62% 63%, transparent 63%);
    pointer-events: none;
}

.glitch-entry-error__warning {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    margin: 8px;
    border: 1px solid rgba(255, 37, 51, 0.82);
    background: rgba(20, 0, 3, 0.96);
    box-shadow: inset 0 0 15px rgba(255, 0, 28, 0.22), 0 0 8px rgba(255, 0, 28, 0.18);
    color: #ff2638;
    font-size: 27px;
    text-shadow: 0 0 10px rgba(255, 0, 24, 0.9);
}

.glitch-entry-error__copy {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    padding: 10px 10px 9px 3px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    font-family: 'Press Start 2P', monospace;
    text-transform: uppercase;
}

.glitch-entry-error__copy strong {
    overflow: hidden;
    color: #ff3445;
    font-size: clamp(9px, 0.82vw, 12px);
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-overflow: ellipsis;
    text-shadow: 2px 0 rgba(255, 0, 25, 0.58), -1px 0 rgba(100, 0, 8, 0.8);
    white-space: nowrap;
}

.glitch-entry-error__copy small {
    overflow-wrap: anywhere;
    color: rgba(255, 52, 66, 0.88);
    font-size: clamp(6px, 0.5vw, 8px);
    letter-spacing: 0.03em;
    line-height: 1.42;
}

.glitch-entry-error__copy small:last-child {
    color: rgba(255, 81, 92, 0.7);
}

.glitch-entry-error--corrupted::after {
    position: absolute;
    z-index: 3;
    inset: 8% -14%;
    content: "";
    opacity: 0;
    background:
        repeating-linear-gradient(136deg, #ff1028 0 13px, #130003 13px 25px, #ff2438 25px 31px, transparent 31px 43px);
    mix-blend-mode: hard-light;
    pointer-events: none;
}

body.glitch-entry-errors-active.glitch-effects-enabled .glitch-entry-errors {
    visibility: visible;
    opacity: 1;
}

body.glitch-entry-errors-active.glitch-effects-enabled .glitch-entry-error {
    animation: glitch-entry-error-card 3.7s steps(1, end) var(--glitch-entry-delay, 0ms) both;
}

body.glitch-entry-errors-active.glitch-effects-enabled .glitch-entry-error--corrupted::after {
    animation: glitch-entry-error-corruption 3.2s steps(1, end) var(--glitch-entry-delay, 0ms) both;
}

body.quality-reduced-glitch.glitch-entry-errors-active .glitch-entry-error:nth-child(n + 3) {
    display: none;
}

body.quality-reduced-glitch.glitch-entry-errors-active .glitch-entry-errors {
    filter: saturate(1.1);
}

body.quality-reduced-glitch.glitch-entry-errors-active .glitch-entry-error {
    animation-name: glitch-entry-error-card-reduced;
}

@media (max-width: 600px) {
    .glitch-entry-errors {
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        width: calc(100vw - 16px);
    }

    .glitch-entry-error {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 70px;
    }

    .glitch-entry-error__warning {
        margin: 7px;
        font-size: 23px;
    }
}

body.biome--glitch.glitch-effects-enabled .glitch-signal {
    opacity: 0.34;
    visibility: visible;
}

.glitch-signal__scanlines {
    inset: -18%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 2px,
        rgba(2, 0, 8, 0.48) 2px 3px,
        rgba(80, 240, 255, 0.09) 3px 4px
    );
    opacity: 0.28;
    mix-blend-mode: soft-light;
}

.glitch-signal__static {
    inset: -10%;
    background:
        repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 238, 255, 0.2) 11px 12px, transparent 12px 37px),
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(133, 38, 255, 0.18) 5px 6px, transparent 6px 29px);
    background-size: 47px 31px, 71px 43px;
    opacity: 0.1;
    mix-blend-mode: screen;
}

.glitch-signal__rgb {
    inset: -2%;
    opacity: 0;
    mix-blend-mode: screen;
}

.glitch-signal__rgb--magenta {
    background: linear-gradient(
        180deg,
        transparent 0 9%,
        rgba(135, 25, 255, 0.32) 9% 14%,
        transparent 14% 48%,
        rgba(185, 35, 255, 0.25) 48% 55%,
        transparent 55% 100%
    );
}

.glitch-signal__rgb--cyan {
    background: linear-gradient(
        180deg,
        transparent 0 23%,
        rgba(0, 238, 255, 0.3) 23% 31%,
        transparent 31% 67%,
        rgba(0, 238, 255, 0.24) 67% 73%,
        transparent 73% 100%
    );
}

.glitch-signal__tear {
    top: 0;
    left: -5vw;
    width: 110vw;
    height: var(--glitch-tear-height, 7px);
    opacity: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0 4%,
            rgba(0, 246, 255, 1) 8%,
            rgba(226, 247, 255, 0.96) 22%,
            rgba(123, 31, 255, 0.98) 46%,
            rgba(202, 45, 255, 0.98) 66%,
            transparent 92%
        );
    box-shadow:
        0 -2px 0 rgba(0, 245, 255, 0.9),
        0 2px 0 rgba(146, 31, 255, 0.9),
        0 0 14px rgba(119, 24, 255, 0.7);
    mix-blend-mode: screen;
}

.glitch-signal__fragment {
    top: var(--glitch-fragment-top, 30vh);
    left: var(--glitch-fragment-left, 25vw);
    width: var(--glitch-fragment-width, 96px);
    height: var(--glitch-fragment-height, 28px);
    opacity: 0;
    overflow: visible;
    border: 1px solid var(--glitch-fragment-border, rgba(170, 105, 255, 0.96));
    background:
        repeating-linear-gradient(
            0deg,
            var(--glitch-fragment-line, rgba(224, 253, 255, 0.95)) 0 1px,
            transparent 1px var(--glitch-fragment-line-step, 5px)
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 7px,
            var(--glitch-fragment-accent, rgba(0, 246, 255, 0.9)) 7px 12px,
            transparent 12px 21px
        ),
        linear-gradient(
            102deg,
            var(--glitch-fragment-fill, rgba(117, 26, 255, 0.88)),
            rgba(1, 0, 9, 0.94) 54%,
            var(--glitch-fragment-fill, rgba(117, 26, 255, 0.88))
        );
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.82),
        0 0 12px var(--glitch-fragment-glow, rgba(129, 28, 255, 0.8)),
        var(--glitch-fragment-shadow-x, 8px) 0 0 var(--glitch-fragment-shadow, rgba(0, 246, 255, 0.72));
    transform-origin: 50% 50%;
    mix-blend-mode: var(--glitch-fragment-blend, normal);
}

.glitch-signal__fragment::before,
.glitch-signal__fragment::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.glitch-signal__fragment::before {
    top: 22%;
    left: -38px;
    width: calc(100% + 76px);
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0 4%,
        var(--glitch-fragment-accent, #00f6ff) 4% 17%,
        transparent 17% 26%,
        var(--glitch-fragment-line, #e0fdff) 26% 58%,
        transparent 58% 72%,
        var(--glitch-fragment-border, #9b36ff) 72% 94%,
        transparent 94%
    );
    box-shadow:
        14px 5px 0 var(--glitch-fragment-border, #9b36ff),
        -9px 10px 0 var(--glitch-fragment-accent, #00f6ff),
        24px 16px 0 var(--glitch-fragment-line, #e0fdff);
}

.glitch-signal__fragment::after {
    inset: 10% -16%;
    opacity: 0.76;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 3px,
            var(--glitch-fragment-border, rgba(155, 54, 255, 0.92)) 3px 4px,
            transparent 4px 8px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 13px,
            var(--glitch-fragment-accent, rgba(0, 246, 255, 0.88)) 13px 18px,
            transparent 18px 31px
        );
}

.glitch-signal__dropout {
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(180deg, transparent 0 12%, rgba(0, 0, 0, 0.98) 12% 22%, transparent 22% 48%, rgba(0, 0, 0, 0.92) 48% 61%, transparent 61% 78%, rgba(100, 241, 255, 0.34) 78% 79%, transparent 79%),
        rgba(0, 0, 0, 0.3);
}

.glitch-signal__readout {
    top: max(18px, env(safe-area-inset-top));
    left: max(18px, env(safe-area-inset-left));
    max-width: calc(100vw - 36px);
    padding: 5px 8px;
    border-left: 2px solid #a12fff;
    opacity: 0;
    color: #eafcff;
    background: rgba(1, 0, 7, 0.92);
    box-shadow: 3px 0 0 rgba(0, 246, 255, 0.94), 0 0 18px rgba(123, 30, 255, 0.52);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(7px, 0.62vw, 10px);
    letter-spacing: 0.12em;
    line-height: 1.45;
    text-shadow: -3px 0 #9d2fff, 3px 0 #00f6ff;
    white-space: nowrap;
}

body.biome--glitch.glitch-effects-enabled .glitch-signal__scanlines {
    will-change: transform, opacity;
    animation: glitch-signal-scan 3.8s linear infinite;
}

body.biome--glitch.glitch-effects-enabled .glitch-signal__static {
    will-change: transform, opacity;
    animation: glitch-signal-static 1.1s steps(2, end) infinite;
}

body.biome--glitch.glitch-effects-enabled:not(.quality-reduced-glitch):not(.is-glitching) .glitch-signal__fragment {
    will-change: transform, opacity;
    animation:
        glitch-signal-fragment-ambient
        var(--glitch-fragment-ambient-duration, 5.2s)
        steps(1, end)
        var(--glitch-fragment-ambient-delay, 0ms)
        infinite;
}

body.is-glitching.glitch-effects-enabled::before {
    opacity: 0.62;
}

body.is-glitching.glitch-effects-enabled::after {
    opacity: 0.5;
}

body.is-glitching.glitch-effects-enabled .glitch-signal {
    opacity: 1;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__scanlines {
    opacity: 0.88;
    animation-duration: 0.14s;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__static {
    opacity: 0.72;
    animation-duration: 0.08s;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__rgb--magenta {
    will-change: transform, opacity;
    animation: glitch-signal-rgb-magenta 0.28s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__rgb--cyan {
    will-change: transform, opacity;
    animation: glitch-signal-rgb-cyan 0.34s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__tear {
    will-change: transform, opacity;
    animation: glitch-signal-tear 0.46s steps(1, end) var(--glitch-tear-delay, 0ms) infinite;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__tear--b {
    animation-duration: 0.37s;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__tear--c {
    animation-duration: 0.53s;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__tear--d {
    animation-duration: 0.31s;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__fragment {
    will-change: transform, opacity;
    animation: glitch-signal-fragment var(--glitch-fragment-duration, 0.54s) steps(1, end) var(--glitch-fragment-delay, 0ms) infinite;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__dropout {
    will-change: opacity;
    animation: glitch-signal-dropout 0.62s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .glitch-signal__readout {
    will-change: transform, opacity;
    animation: glitch-signal-readout 0.7s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .interface-backdrop__video {
    will-change: transform;
    animation: glitch-video-snap 0.24s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .interface-shell {
    transform-origin: 50% 12%;
    will-change: transform;
    animation: glitch-shell-snap 0.12s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .surface {
    border-color: rgba(74, 245, 255, 0.92);
    box-shadow:
        -7px 0 0 rgba(137, 27, 255, 0.32),
        7px 0 0 rgba(0, 239, 255, 0.28),
        0 0 34px rgba(130, 31, 255, 0.34),
        0 24px 52px rgba(0, 0, 0, 0.86);
    will-change: transform;
    animation: glitch-panel-snap 0.19s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled .surface:nth-of-type(even) {
    animation-duration: 0.15s;
    animation-direction: reverse;
}

body.is-glitching.glitch-effects-enabled :is(
    .parameter-console__module,
    .roll-console__module,
    .preset-console__bank,
    .feed-console
) {
    will-change: transform;
    animation: glitch-module-desync 0.23s steps(1, end) infinite;
}

body.is-glitching.glitch-effects-enabled :is(
    .interface-button,
    .interface-toggle,
    .roll-trigger,
    .form-field__input,
    .interface-select__summary
) {
    text-shadow: -2px 0 rgba(150, 32, 255, 0.82), 2px 0 rgba(0, 240, 255, 0.78);
}

body.is-glitching.glitch-effects-enabled .banner__title,
body.is-glitching.glitch-effects-enabled .surface__title,
body.is-glitching.glitch-effects-enabled .feed__tip-label,
body.is-glitching.glitch-effects-enabled .feed__mythic-label {
    animation: glitch-heading-split 0.23s steps(1, end) infinite;
}

body.quality-reduced-glitch.biome--glitch.glitch-effects-enabled .glitch-signal {
    opacity: 0.18;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal {
    opacity: 0.56;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled::before {
    opacity: 0.22;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled::after {
    opacity: 0.18;
}

body.quality-reduced-glitch.biome--glitch .glitch-signal__scanlines {
    opacity: 0.16;
    animation-duration: 5.6s;
}

body.quality-reduced-glitch.biome--glitch .glitch-signal__static {
    opacity: 0.065;
    animation-duration: 2.8s;
}

body.quality-reduced-glitch.is-glitching .glitch-signal__tear--c,
body.quality-reduced-glitch.is-glitching .glitch-signal__tear--d,
body.quality-reduced-glitch.is-glitching .glitch-signal__dropout,
body.quality-reduced-glitch.is-glitching .glitch-signal__readout {
    display: none;
}

body.quality-reduced-glitch.biome--glitch.glitch-effects-enabled .glitch-signal__fragment {
    display: none;
    animation: none;
}

body.quality-reduced-glitch.biome--glitch.glitch-effects-enabled .glitch-signal__fragment--reduced {
    display: block;
    will-change: transform, opacity;
    animation:
        glitch-signal-fragment-ambient-reduced
        var(--glitch-fragment-reduced-duration, 10s)
        steps(1, end)
        var(--glitch-fragment-reduced-delay, 0ms)
        infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__fragment--reduced {
    animation-duration: var(--glitch-fragment-reduced-burst-duration, 4.8s);
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__scanlines {
    opacity: 0.38;
    animation-duration: 1.65s;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__static {
    opacity: 0.16;
    animation-duration: 1.25s;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__rgb--magenta {
    animation: glitch-signal-rgb-purple-reduced 2.1s steps(1, end) infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__rgb--cyan {
    animation: glitch-signal-rgb-cyan-reduced 1.75s steps(1, end) infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__tear--a,
body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__tear--b {
    height: 3px;
    animation: glitch-signal-tear-reduced 1.35s steps(1, end) var(--glitch-tear-delay, 0ms) infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__tear--a {
    --glitch-reduced-tear-x: 2.4vw;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .glitch-signal__tear--b {
    --glitch-reduced-tear-x: -2vw;
    height: 2px;
    animation-duration: 1.6s;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .interface-backdrop__video {
    animation: glitch-video-snap-reduced 1.2s steps(1, end) infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .interface-shell {
    animation: glitch-shell-snap-reduced 0.8s steps(1, end) infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .surface {
    border-color: rgba(77, 224, 239, 0.58);
    box-shadow:
        -2px 0 0 rgba(137, 31, 255, 0.12),
        2px 0 0 rgba(0, 235, 255, 0.1),
        0 24px 52px rgba(0, 0, 0, 0.72);
    animation: glitch-panel-snap-reduced 1.15s steps(1, end) infinite;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled :is(
    .parameter-console__module,
    .roll-console__module,
    .preset-console__bank,
    .feed-console
) {
    animation: none;
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled :is(
    .interface-button,
    .interface-toggle,
    .roll-trigger,
    .form-field__input,
    .interface-select__summary
) {
    text-shadow: -1px 0 rgba(141, 36, 255, 0.42), 1px 0 rgba(0, 235, 255, 0.4);
}

body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .banner__title,
body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .surface__title,
body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .feed__tip-label,
body.quality-reduced-glitch.is-glitching.glitch-effects-enabled .feed__mythic-label {
    animation: none;
    text-shadow: -1px 0 rgba(141, 36, 255, 0.5), 1px 0 rgba(0, 235, 255, 0.46);
}

body.biome--glitch:not(.glitch-effects-enabled) .glitch-signal,
body.quality-no-glitch .glitch-signal,
body.quality-no-glitch .glitch-entry-errors {
    display: none;
}

body.biome--glitch:not(.glitch-effects-enabled)::before,
body.biome--glitch:not(.glitch-effects-enabled)::after,
body.quality-no-glitch.biome--glitch::before,
body.quality-no-glitch.biome--glitch::after {
    opacity: 0;
    animation: none;
}

body.quality-no-glitch.biome--glitch .interface-backdrop,
body.biome--glitch:not(.glitch-effects-enabled) .interface-backdrop {
    filter: none;
}

.interface-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--bg-base);
    background-image: var(--biome-background, url("../../files/images/backgrounds/normalBiomeImage.png"));
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    z-index: -2;
    overflow: hidden;
}

.interface-backdrop__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.interface-backdrop--video-active .interface-backdrop__video {
    opacity: 1;
    visibility: visible;
}

.interface-backdrop__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(72, 140, 255, 0.3), transparent 42%),
                radial-gradient(circle at 80% 15%, rgba(42, 112, 230, 0.22), transparent 30%),
                linear-gradient(135deg, rgba(8, 20, 42, 0.35), rgba(6, 16, 34, 0.44));
    z-index: 1;
}

body:is(
    .theme-event-valentine,
    .theme-event-april-fools,
    .theme-event-halloween,
    .theme-event-summer,
    .theme-event-easter,
    .theme-event-winter
) .interface-backdrop__veil {
    background:
        radial-gradient(circle at 18% 18%, rgb(var(--accent-rgb) / 0.24), transparent 42%),
        radial-gradient(circle at 82% 14%, rgb(var(--event-secondary-rgb) / 0.2), transparent 34%),
        linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--event-secondary-rgb) / 0.1));
}

.event-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 18;
    overflow: hidden;
    pointer-events: none;
}

.event-sun {
    position: absolute;
    top: clamp(-42px, -3vw, -22px);
    right: clamp(-42px, -3vw, -22px);
    display: none;
    width: clamp(110px, 12vw, 168px);
    aspect-ratio: 1;
    isolation: isolate;
    opacity: 0.72;
    filter: drop-shadow(0 0 26px rgba(255, 222, 91, 0.54));
    animation: event-sun-rotate 38s linear infinite;
}

body.theme-event-summer .event-sun {
    display: block;
}

.event-sun::before,
.event-sun::after,
.event-sun__core {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.event-sun::before {
    z-index: -2;
    inset: -58%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 231, 123, 0.68) 0deg 2deg,
        rgba(255, 205, 63, 0.12) 2deg 5deg,
        transparent 5deg 15deg
    );
    -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 34% 69%, transparent 72%);
    mask: radial-gradient(circle, transparent 0 31%, #000 34% 69%, transparent 72%);
    opacity: 0.78;
}

.event-sun::after {
    z-index: -1;
    inset: -38%;
    border: 1px solid rgba(255, 238, 153, 0.2);
    background: radial-gradient(circle, rgba(255, 223, 101, 0.22), rgba(255, 207, 56, 0.05) 45%, transparent 70%);
    box-shadow:
        0 0 48px rgba(255, 218, 81, 0.32),
        inset 0 0 36px rgba(255, 238, 161, 0.12);
}

.event-sun__core {
    inset: 18%;
    background:
        radial-gradient(circle at 36% 31%, #fff8cb 0 7%, transparent 8%),
        radial-gradient(circle at 42% 38%, #fff0a2 0 15%, #ffd967 42%, #ffb92f 76%, #e9921d 100%);
    border: 1px solid rgba(255, 244, 180, 0.68);
    box-shadow:
        0 0 24px rgba(255, 224, 105, 0.76),
        0 0 54px rgba(255, 190, 48, 0.34),
        inset -10px -12px 20px rgba(216, 121, 16, 0.18);
    animation: event-sun-shine 4.8s ease-in-out infinite;
}

@keyframes event-sun-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes event-sun-shine {
    0%,
    100% {
        filter: brightness(0.95);
        transform: scale(0.98);
    }
    50% {
        filter: brightness(1.12);
        transform: scale(1.04);
    }
}

.halloween-scene {
    position: absolute;
    inset: 0;
    display: none;
}

body.theme-event-halloween .halloween-scene {
    display: block;
}

.event-cobweb {
    position: absolute;
    width: clamp(118px, 15vw, 220px);
    aspect-ratio: 1;
    background:
        repeating-radial-gradient(circle at 0 0, transparent 0 15px, rgba(225, 214, 239, 0.25) 16px 17px, transparent 18px 31px),
        repeating-conic-gradient(from 0deg at 0 0, rgba(225, 214, 239, 0.26) 0deg 1deg, transparent 1deg 18deg);
    -webkit-mask: radial-gradient(circle at 0 0, #000 0 73%, transparent 75%);
    mask: radial-gradient(circle at 0 0, #000 0 73%, transparent 75%);
    filter: drop-shadow(0 0 8px rgba(193, 119, 255, 0.16));
    opacity: 0.72;
}

.event-cobweb--top-left {
    top: 0;
    left: 0;
}

.event-cobweb--top-right {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

.event-cobweb--side-left {
    top: 42%;
    left: -32px;
    transform: rotate(-28deg) scale(0.72);
}

.event-cobweb--side-right {
    top: 34%;
    right: -32px;
    transform: rotate(206deg) scale(0.68);
}

.snow-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
    z-index: 19;
}

.snow-field[data-active="true"] {
    display: block;
}

.heart-particle {
    position: absolute;
    top: calc(100% + 10vh);
    left: var(--x, 50%);
    opacity: var(--opacity, 0.75);
    transform: translate3d(calc(-50% + var(--drift, 0px)), 0, 0);
    animation: heart-float-up var(--float-duration, 20s) linear infinite;
    animation-delay: calc(-1 * var(--float-delay, 0s));
    will-change: transform, opacity;
}

.heart-particle__sway {
    display: block;
    animation: heart-sway var(--sway-duration, 5s) ease-in-out infinite alternate;
    transform-origin: center;
}

.heart-particle__icon {
    display: block;
    color: #ff8fa5;
    font-size: calc(14px * var(--size, 1));
    filter: drop-shadow(0 0 8px rgba(255, 120, 166, var(--glow-strength, 0.65)));
    animation: heart-pulse 2.2s ease-in-out infinite;
    transform-origin: center;
}

body.biome--glitch .heart-particle__icon {
    color: #ffa9bc;
    filter: drop-shadow(0 0 8px rgba(255, 120, 166, 0.7));
}

@keyframes heart-float-up {
    0% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), 0, 0) scale(0.94);
        opacity: calc(var(--opacity, 0.75) * 0.2);
    }
    10% {
        opacity: var(--opacity, 0.75);
    }
    82% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), calc(-1 * var(--pop-height, 24vh)), 0) scale(1.04);
        opacity: var(--opacity, 0.75);
    }
    86% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), calc(-1 * (var(--pop-height, 24vh) + 2vh)), 0) scale(1.26);
        opacity: calc(var(--opacity, 0.75) * 0.15);
    }
    100% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), calc(-1 * (var(--pop-height, 24vh) + 6vh)), 0) scale(0.18);
        opacity: 0;
    }
}

@keyframes heart-sway {
    0% {
        transform: translateX(calc(-1 * var(--sway-distance, 16px)));
    }
    100% {
        transform: translateX(var(--sway-distance, 16px));
    }
}

@keyframes heart-pulse {
    0%,
    100% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.06);
    }
}


.snow-particle {
    position: absolute;
    top: calc(-12% - var(--pop-height, 24vh));
    left: var(--x, 50%);
    opacity: var(--opacity, 0.75);
    transform: translate3d(calc(-50% + var(--drift, 0px)), 0, 0);
    animation: snow-fall var(--float-duration, 16s) linear infinite;
    animation-delay: calc(-1 * var(--float-delay, 0s));
    will-change: transform, opacity;
}

.snow-particle__sway {
    display: block;
    animation: snow-sway var(--sway-duration, 5s) ease-in-out infinite;
    transform-origin: center;
}

.snow-particle__icon {
    display: block;
    color: #cdeeff;
    font-size: calc(12px * var(--size, 1));
    filter: drop-shadow(0 0 7px rgba(163, 223, 255, var(--glow-strength, 0.4)));
    animation: snow-twinkle 2.8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes snow-fall {
    0% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), -18vh, 0) rotate(0deg);
        opacity: calc(var(--opacity, 0.75) * 0.2);
    }
    12% {
        opacity: var(--opacity, 0.75);
    }
    100% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), calc(118vh + var(--pop-height, 24vh)), 0) rotate(360deg);
        opacity: calc(var(--opacity, 0.75) * 0.18);
    }
}

@keyframes snow-sway {
    0% {
        transform: translateX(calc(-0.72 * var(--sway-distance, 16px))) rotate(-3deg);
    }
    24% {
        transform: translateX(calc(0.42 * var(--sway-distance, 16px))) rotate(1deg);
    }
    51% {
        transform: translateX(var(--sway-distance, 16px)) rotate(4deg);
    }
    77% {
        transform: translateX(calc(-0.28 * var(--sway-distance, 16px))) rotate(-1deg);
    }
    100% {
        transform: translateX(calc(-0.72 * var(--sway-distance, 16px))) rotate(-3deg);
    }
}

@keyframes snow-twinkle {
    0%,
    100% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.08);
    }
}

body.reduce-motion .snow-field {
    display: none;
}

.halloween-light-particle {
    position: absolute;
    bottom: -12vh;
    left: var(--x, 50%);
    opacity: var(--opacity, 0.68);
    transform: translate3d(calc(-50% + var(--drift, 0px)), 0, 0);
    animation: halloween-light-float var(--float-duration, 16s) linear infinite;
    animation-delay: calc(-1 * var(--float-delay, 0s));
    will-change: transform, opacity;
}

.halloween-light-particle__sway {
    display: block;
    animation: halloween-light-sway var(--sway-duration, 6s) ease-in-out infinite alternate;
}

.halloween-light-particle__glow {
    display: block;
    width: calc(7px * var(--size, 1));
    aspect-ratio: 1;
    border: 1px solid rgb(var(--light-rgb, 255 151 57) / 0.72);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 8%, rgb(var(--light-rgb, 255 151 57)) 28%, rgb(var(--light-rgb, 255 151 57) / 0.24) 58%, transparent 72%);
    box-shadow:
        0 0 calc(12px * var(--size, 1)) rgb(var(--light-rgb, 255 151 57) / 0.8),
        0 0 calc(26px * var(--size, 1)) rgb(var(--light-rgb, 255 151 57) / 0.42);
    animation: halloween-light-pulse 2.8s ease-in-out infinite;
}

@keyframes halloween-light-float {
    0% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), 0, 0) scale(0.72);
        opacity: 0;
    }
    12% {
        opacity: var(--opacity, 0.68);
    }
    82% {
        opacity: var(--opacity, 0.68);
    }
    100% {
        transform: translate3d(calc(-50% - var(--drift, 0px)), -118vh, 0) scale(1.08);
        opacity: 0;
    }
}

@keyframes halloween-light-sway {
    from {
        transform: translateX(calc(-1 * var(--sway-distance, 24px)));
    }
    to {
        transform: translateX(var(--sway-distance, 24px));
    }
}

@keyframes halloween-light-pulse {
    0%,
    100% {
        filter: brightness(0.78);
        transform: scale(0.82);
    }
    50% {
        filter: brightness(1.28);
        transform: scale(1.18);
    }
}

body.reduce-motion .event-sun,
body.reduce-motion .event-sun__core {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .event-sun,
    .event-sun__core {
        animation: none;
    }
}

@media (max-width: 680px) {
    .event-sun {
        top: -26px;
        right: -24px;
        width: clamp(96px, 28vw, 126px);
        opacity: 0.72;
    }

    .event-cobweb {
        width: clamp(96px, 33vw, 144px);
    }

    .event-cobweb--side-left,
    .event-cobweb--side-right {
        opacity: 0.42;
    }
}

.forte {
    margin-top: auto;
}

.scarlet-rain-drop {
    position: absolute;
    top: calc(-18% - var(--start-offset, 0%));
    left: var(--x, 50%);
    width: calc(2px * var(--thickness, 1));
    height: calc(70px * var(--length, 1));
    background: linear-gradient(180deg, rgba(255, 68, 76, 0.95), rgba(168, 0, 18, 0.8) 55%, rgba(80, 0, 8, 0));
    border-radius: 999px;
    opacity: var(--opacity, 0.85);
    filter: drop-shadow(0 0 8px rgba(255, 44, 68, 0.4));
    animation: blood-rain-fall var(--duration, 1.8s) linear infinite;
    animation-delay: calc(-1 * var(--delay, 0s));
    transform: translate3d(calc(-50% + var(--drift, 0px)), -120%, 0) skewX(var(--skew, 0deg));
    will-change: transform, opacity;
}

.scarlet-rain-drop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 190, 190, 0.65), transparent 62%);
    opacity: 0.6;
    border-radius: inherit;
    mix-blend-mode: screen;
}

.scarlet-rain-drop::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: calc(6px * var(--thickness, 1));
    height: calc(6px * var(--thickness, 1));
    background: radial-gradient(circle, rgba(255, 52, 68, 0.65) 0%, rgba(150, 0, 14, 0) 70%);
    transform: translateX(-50%) scale(0.6, 0.25);
    opacity: 0;
    animation: blood-rain-splash var(--duration, 1.8s) linear infinite;
    animation-delay: calc(-1 * var(--delay, 0s));
}

@keyframes blood-rain-fall {
    0% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), -140%, 0) skewX(var(--skew, 0deg));
        opacity: 0;
    }
    10% {
        opacity: var(--opacity, 0.8);
    }
    92% {
        opacity: var(--opacity, 0.85);
    }
    100% {
        transform: translate3d(calc(-50% + var(--drift, 0px)), 160%, 0) skewX(var(--skew, 0deg));
        opacity: 0;
    }
}

@keyframes blood-rain-splash {
    0%, 80% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5, 0.15);
    }
    90% {
        opacity: 0.4;
        transform: translateX(-50%) scale(1.1, 0.45);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.2, 0.2);
    }
}