body,
        html {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            font-family: 'Press Start 2P', monospace;

            /* Base background color just in case */
            background-color: #3a445e;

            background-image:
                linear-gradient(to bottom, rgba(17, 92, 126, 0.85), rgba(85, 255, 255, 0.85)),
                url('../assets/textures/light_blue_wool.png'),
                url('../assets/textures/blue_wool.png');

            background-repeat: no-repeat, repeat, repeat;
            background-size: 100% 100%, 64px 64px, 64px 64px;

            /* Initial position (will be overridden by the animation, but good for fallback) */
            background-position: 0 0, 32px 32px, 0 0;

            image-rendering: pixelated;

            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            animation: scrollDown 3s linear infinite;
        }

        .content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10;
            width: 100%;
            max-width: 600px;
            padding: 0 clamp(12px, 4vw, 32px);
            box-sizing: border-box;
        }

        /* Logo Container */
        .logo-container {
            width: 100%;
            max-width: 502px;
            /* Preserve the original 502:146 aspect ratio */
            aspect-ratio: 502 / 146;
            margin-bottom: clamp(14px, 3vw, 25px);
        }

        .logo-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            image-rendering: pixelated;
            -webkit-user-drag: none;
        }

        .server-msg {
            font-size: clamp(8px, 2vw, 14px);
            text-shadow: 2px 2px 0px #3f3f3f;
            margin-bottom: clamp(4px, 1.5vw, 8px);
            text-align: center;
            line-height: 1.5;
            color: #ffffff;
            /* White default, overridden by classes */
        }

        .mc-yellow {
            color: #FFFF55;
        }

        .mc-pink {
            color: #ff9055;
        }

        .mc-red {
            color: #8555ff;
        }

        .mc-green {
            color: #55FF55;
        }

        .mc-blue {
            color: #5555FF;
        }

        .mc-textbox {
            background-color: rgba(0, 0, 0, 0.75);
            border: 2px solid #a8a8a8;
            padding: clamp(8px, 2vw, 12px) clamp(14px, 4vw, 24px);
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            position: relative;
        }

        .mc-textbox:hover {
            border-color: #ffffff;
        }

        .title-text {
            color: #ffffff;
            text-shadow: 2px 2px 0px #3f3f3f;
            font-size: clamp(10px, 2.5vw, 16px);
            margin: 0;
            text-align: center;
            -webkit-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }

        @keyframes floatUp {
            0% {
                opacity: 1;
                transform: translate(-50%, 0);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -40px);
            }
        }

        .copied-text {
            position: absolute;
            color: #55FF55;
            /* Minecraft Green */
            font-size: 12px;
            text-shadow: 2px 2px 0px #3f3f3f;
            pointer-events: none;
            /* So it doesn't block future clicks */
            animation: floatUp 1s ease-out forwards;
            z-index: 20;
        }

        @keyframes scrollDown {
            from {
                /* Gradient stays put (0 0), Light Blue Wool starts at offset (32px 32px), Blue Wool starts at (0 0) */
                background-position: 0 0, 32px 32px, 0 0;
            }

            to {
                /* Move both wool layers down by exactly 64px (the size of one block) for a seamless loop */
                background-position: 0 0, 32px 96px, 0 64px;
            }
        }

        /* ── Entrance animation ── */
        @keyframes fadeSlideIn {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .anim-enter {
            opacity: 0;
            animation: fadeSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .anim-delay-1 {
            animation-delay: 0.05s;
        }

        .anim-delay-2 {
            animation-delay: 0.18s;
        }

        .anim-delay-3 {
            animation-delay: 0.31s;
        }

        .anim-delay-4 {
            animation-delay: 0.44s;
        }

        .anim-delay-5 {
            animation-delay: 0.57s;
        }

        /* ── Status dot ── */
        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 6px;
            position: relative;
            top: -1px;
            background-color: #aaaaaa;
        }

        .status-dot.dot-on {
            background-color: #55FF55;
            animation: dotPulse 1.8s ease-in-out infinite;
        }

        .status-dot.dot-off {
            background-color: #FF5555;
        }

        @keyframes dotPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(85, 255, 85, 0.7);
            }

            50% {
                box-shadow: 0 0 0 5px rgba(85, 255, 85, 0);
            }
        }


        .server-status {
            margin-top: clamp(8px, 2vw, 12px);
            font-size: clamp(7px, 1.8vw, 12px);
            color: #aaaaaa;
            /* Default gray while loading */
            text-shadow: 2px 2px 0px #3f3f3f;
            text-align: center;
            letter-spacing: 1px;
        }

        .server-version {
            margin-top: clamp(4px, 1vw, 6px);
            font-size: clamp(6px, 1.5vw, 10px);
            color: #888888;
            text-shadow: 2px 2px 0px #3f3f3f;
            text-align: center;
            letter-spacing: 1px;
        }

        .server-uptime {
            margin-top: clamp(3px, 0.8vw, 5px);
            font-size: clamp(6px, 1.3vw, 9px);
            color: #55FF55;
            text-shadow: 2px 2px 0px #3f3f3f;
            text-align: center;
            letter-spacing: 1px;
        }

        .server-last-online {
            margin-top: clamp(1px, 0.1vw, 1px);
            font-size: clamp(6px, 1.3vw, 9px);
            color: #aaaaaa;
            text-shadow: 2px 2px 0px #3f3f3f;
            text-align: center;
            letter-spacing: 1px;
        }

        /* Classes applied by JavaScript based on server state */
        .status-on {
            color: #55FF55;
        }

        .status-off {
            color: #FF5555;
        }

        /* Footer */
        .footer {
            position: absolute;
            bottom: clamp(10px, 2vh, 20px);
            color: #aaaaaa;
            font-size: clamp(6px, 1.3vw, 10px);
            text-shadow: 2px 2px 0px #000;
            text-align: center;
            z-index: 10;
            padding: 0 clamp(8px, 3vw, 20px);
        }