#dvd img, #dvd2 img, #dvd3 img, #err-container img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#dvd {
    z-index: 999;
    display: block;
}

#dvd2, #dvd3 {
    display: none;
}

#dvd2 img, #dvd3 img {
    height: 200px;
}

#dvd, #dvd2, #dvd3 {
    cursor: grabbing;
}

html {
    background: black;
}

html, body {
    overflow: hidden;
    font-family: 'Jersey 10', sans-serif;
    font-size: 35px;
    line-height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

body {
    background-image: url('../winground.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
    border-radius: 40px;
    margin: 15px;
    height: calc(100vh - 30px);
    position: relative;
}

@keyframes crt-scan-shift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 130px, 0 -160px, 0 0; }
}

@keyframes crt-static-flicker {
    0% { opacity: 0.06; transform: translate(0, 0); }
    20% { opacity: 0.12; transform: translate(-1px, 1px); }
    40% { opacity: 0.05; transform: translate(1px, -1px); }
    60% { opacity: 0.14; transform: translate(-1px, -1px); }
    80% { opacity: 0.07; transform: translate(1px, 1px); }
    100% { opacity: 0.06; transform: translate(0, 0); }
}

@keyframes crt-frame-flicker {
    0% { filter: brightness(1) contrast(1.05) saturate(1.05); }
    25% { filter: brightness(1.08) contrast(1.2) saturate(1.18); }
    50% { filter: brightness(0.94) contrast(1.12) saturate(1.25); }
    75% { filter: brightness(1.1) contrast(1.24) saturate(1.2); }
    100% { filter: brightness(1) contrast(1.05) saturate(1.05); }
}

@keyframes rgb-split-glitch {
    0% {
        filter:
            drop-shadow(0 0 0 rgba(255, 0, 64, 0))
            drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    }
    12% {
        filter:
            drop-shadow(-7px 0 0 rgba(255, 0, 96, 0.8))
            drop-shadow(6px 0 0 rgba(0, 255, 255, 0.85));
    }
    24% {
        filter:
            drop-shadow(8px -1px 0 rgba(255, 0, 96, 0.9))
            drop-shadow(-7px 1px 0 rgba(0, 255, 255, 0.92));
    }
    40% {
        filter:
            drop-shadow(-10px 2px 0 rgba(255, 0, 96, 0.95))
            drop-shadow(9px -2px 0 rgba(0, 255, 255, 0.95));
    }
    58% {
        filter:
            drop-shadow(7px -3px 0 rgba(255, 0, 96, 0.85))
            drop-shadow(-6px 3px 0 rgba(0, 255, 255, 0.9));
    }
    76% {
        filter:
            drop-shadow(-8px -2px 0 rgba(255, 0, 96, 0.9))
            drop-shadow(7px 2px 0 rgba(0, 255, 255, 0.9));
    }
    100% {
        filter:
            drop-shadow(0 0 0 rgba(255, 0, 64, 0))
            drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    }
}

@keyframes femtanyl-wiggle-chaos {
    0% { transform: translate(0, 0) skew(0deg, 0deg) rotate(0deg); }
    10% { transform: translate(-7px, 5px) skew(-1.5deg, 0.8deg) rotate(-0.8deg); }
    20% { transform: translate(8px, -6px) skew(1.6deg, -0.9deg) rotate(0.9deg); }
    30% { transform: translate(-9px, -4px) skew(-1.8deg, 1deg) rotate(-1deg); }
    40% { transform: translate(10px, 6px) skew(2deg, -1.2deg) rotate(1.1deg); }
    50% { transform: translate(-8px, -7px) skew(-2.2deg, 1.3deg) rotate(-1.2deg); }
    60% { transform: translate(9px, 4px) skew(1.8deg, -1.1deg) rotate(1deg); }
    70% { transform: translate(-10px, 7px) skew(-2deg, 1.2deg) rotate(-1.1deg); }
    80% { transform: translate(8px, -5px) skew(1.7deg, -0.9deg) rotate(0.9deg); }
    90% { transform: translate(-7px, -6px) skew(-1.6deg, 1deg) rotate(-0.8deg); }
    100% { transform: translate(0, 0) skew(0deg, 0deg) rotate(0deg); }
}

@keyframes rgb-image-split {
    0% {
        transform: translate(0, 0);
        filter:
            drop-shadow(0 0 0 rgba(255, 0, 96, 0))
            drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    }
    25% {
        transform: translate(-15px, 9px);
        filter:
            drop-shadow(-39px 0 0 rgba(255, 0, 96, 1))
            drop-shadow(36px 0 0 rgba(0, 255, 255, 1));
    }
    50% {
        transform: translate(18px, -12px);
        filter:
            drop-shadow(45px -6px 0 rgba(255, 0, 96, 1))
            drop-shadow(-39px 6px 0 rgba(0, 255, 255, 1));
    }
    75% {
        transform: translate(-18px, -9px);
        filter:
            drop-shadow(-42px 6px 0 rgba(255, 0, 96, 1))
            drop-shadow(39px -6px 0 rgba(0, 255, 255, 1));
    }
    100% {
        transform: translate(0, 0);
        filter:
            drop-shadow(0 0 0 rgba(255, 0, 96, 0))
            drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    }
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: 9998;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.11) 0px, rgba(255, 255, 255, 0.11) 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.035), rgba(0, 255, 255, 0.03), rgba(0, 0, 255, 0.035));
    mix-blend-mode: screen;
    opacity: 0.08;
    animation: none;
}

body::after {
    z-index: 9999;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0) 2px),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0) 2px),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0) 2px);
    background-size: 6px 6px, 7px 7px, 8px 8px;
    mix-blend-mode: screen;
    opacity: 0.03;
    animation: none;
}

@keyframes femtanyl-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-36px, 27px) rotate(-6deg); }
    20% { transform: translate(30px, -33px) rotate(6.6deg); }
    30% { transform: translate(-42px, -24px) rotate(-7.8deg); }
    40% { transform: translate(36px, 36px) rotate(7.2deg); }
    50% { transform: translate(-30px, -36px) rotate(-6deg); }
    60% { transform: translate(39px, 24px) rotate(8.4deg); }
    70% { transform: translate(-36px, 33px) rotate(-7.2deg); }
    80% { transform: translate(33px, -30px) rotate(6deg); }
    90% { transform: translate(-39px, -27px) rotate(-6.6deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

body.femtanyl-shaking {
    animation: femtanyl-shake 24ms steps(1, end) infinite, crt-frame-flicker 60ms steps(2, end) infinite;
    will-change: transform;
}

body.femtanyl-shaking::before {
    opacity: 0.45;
    animation: crt-scan-shift 0.7s linear infinite;
}

body.femtanyl-shaking::after {
    opacity: 0.2;
    animation: crt-static-flicker 120ms steps(2, end) infinite;
}

body.femtanyl-shaking #text,
body.femtanyl-shaking .player {
    animation: rgb-split-glitch 130ms steps(2, end) infinite, femtanyl-wiggle-chaos 180ms steps(2, end) infinite;
    will-change: transform, filter;
}

body.femtanyl-shaking #music-group,
body.femtanyl-shaking #music-group .player,
body.femtanyl-shaking #music-group button,
body.femtanyl-shaking #music-group input,
body.femtanyl-shaking #music-group a {
    animation: none !important;
    transform: none !important;
}

body.femtanyl-shaking #dvd,
body.femtanyl-shaking #dvd2,
body.femtanyl-shaking #dvd3 {
    animation: none;
    will-change: transform;
}

body.femtanyl-shaking #dvd img,
body.femtanyl-shaking #dvd2 img,
body.femtanyl-shaking #dvd3 img {
    animation: rgb-image-split 52ms steps(2, end) infinite;
    will-change: transform, filter;
}

#err-container img {
    height: 150px;
    position: absolute;
}

#text {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 2px;
}

#top-text-group,
#music-group {
    transition: transform 280ms ease, padding 280ms ease;
}

.jitter-letter {
    display: inline-block;
    font-size: 100%;
    transition: font-size 180ms ease;
}

#text p {
    padding: 0;
    margin: 0;
}

.player {
    font-size:25px;
    margin-top:20px;
    border: 1px solid red;
    padding: 10px;
    border-radius: 10px;
    background: #ff000020;
}

.player-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.player-progress > input {
    width: 320px;
    height: 28px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.player-progress > input::-webkit-slider-runnable-track {
    height: 14px;
    border-radius: 999px;
    background-image: url('../player/bar.png');
    background-size: 100px 14px;
    background-repeat: repeat;
}

.player-progress > input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -8px;
    border-radius: 50%;
    border: none;
    background-image: url('../player/ball.png');
    background-color: transparent;
    background-size: cover;
    background-position: center;
}

.player-progress > input::-moz-range-track {
    height: 14px;
    border-radius: 999px;
    background-image: url('../player/bar.png');
    background-size: 100px 14px;
    background-repeat: repeat;
}

.player-progress > input::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background-image: url('../player/ball.png');
    background-color: transparent;
    background-size: cover;
    background-position: center;
}

.player-button {
    background: none;
    border: none;
    transition: transform 80ms ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.player-button, .player-button img {
    height: 60px;
    width: 60px;
}

.player-button img {
    pointer-events: none;
}

.player-progress > input,
.player-progress > input::-webkit-slider-thumb,
.player-progress > input::-moz-range-thumb,
a,
button,
input {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.player-button:active {
    transform: scale(0.88);
}

@media (max-width: 900px), (max-height: 700px) {
    #dvd img {
        width: 180px;
        height: auto;
    }

    #dvd2 img, #dvd3 img {
        height: 140px;
    }

    #err-container img {
        height: 110px;
    }

    .player {
        font-size: 22px;
    }

    .player-button, .player-button img {
        height: 50px;
        width: 50px;
    }
}

@media (max-width: 600px), (max-height: 500px) {
    #dvd img {
        width: 140px;
        height: auto;
    }

    #dvd2 img, #dvd3 img {
        height: 100px;
    }

    #err-container img {
        height: 80px;
    }

    .player-progress > input {
        width: min(250px, 60vw);
    }

    .player-button, .player-button img {
        height: 42px;
        width: 42px;
    }
}