:root {
    --grass-size: min(34vw, 230px);
}

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(75, 125, 255, 0.2), transparent 44%),
        radial-gradient(circle at 76% 79%, rgba(60, 165, 83, 0.15), transparent 42%),
        linear-gradient(160deg, #040c1f 0%, #09173a 45%, #0a1224 100%);
}

.mc-scene {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
}

.mc-grass {
    width: var(--grass-size);
    height: var(--grass-size);
    object-fit: cover;
    image-rendering: pixelated;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
    z-index: 2;
}

.mc-icon,
.mc-scratch {
    position: absolute;
    color: rgba(224, 235, 255, 0.22);
    text-shadow: 0 0 12px rgba(132, 173, 255, 0.26);
    user-select: none;
    pointer-events: none;
    z-index: 1;
}

.mc-icon {
    font-size: clamp(1.3rem, 2.4vw, 2.4rem);
    animation: drift 5.5s ease-in-out infinite alternate;
}

.mc-icon-1 {
    top: 17%;
    left: 24%;
    transform: rotate(18deg);
}

.mc-icon-2 {
    top: 26%;
    right: 21%;
    transform: rotate(180deg) scale(1.1);
    animation-duration: 7.2s;
}

.mc-icon-3 {
    bottom: 21%;
    left: 18%;
    transform: rotate(-14deg);
    animation-duration: 6.4s;
}

.mc-icon-4 {
    bottom: 16%;
    right: 24%;
    transform: rotate(182deg);
    animation-duration: 8.1s;
}

.mc-scratch {
    font-family: "Creepster", cursive;
    font-size: clamp(1.6rem, 3vw, 3rem);
    letter-spacing: 0.15em;
    opacity: 0.26;
    top: 8%;
    transform: rotate(180deg);
    animation: flicker 2.7s steps(2, end) infinite;
}

@keyframes drift {
    from {
        translate: 0 0;
        opacity: 0.18;
    }
    to {
        translate: 0 -10px;
        opacity: 0.34;
    }
}

@keyframes flicker {
    0%,
    100% {
        opacity: 0.17;
    }
    45% {
        opacity: 0.34;
    }
    60% {
        opacity: 0.09;
    }
}
