.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.background-img {
    width: 100%;
    height: 100%;
}

/* Import the standard web Minecraft font */
       @font-face {
            font-family: 'Minecraft';
            src: url('minecraft font/minecraft_font.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

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

        body {
            background-color: #0d140d; 
            width: 100vw;
            height: 100vh;
            position: relative; 
            
            /* Applying your custom font globally */
            font-family: 'Minecraft', monospace; 
            
            overflow: hidden;
            user-select: none; 
        }

        .minecraft-loader-master {
            position: absolute;
            left: 50%;
            transform: translateX(-50%); 
            bottom: 160px; 
            width: 540px;
            background-color: #c6c6c6;
            border: 3px solid #000000;
            box-shadow: 
                inset 3px 3px 0px #ffffff, 
                inset -3px -3px 0px #5b5b5b,
                0 10px 30px rgba(0,0,0,0.8);
            padding: 2px 8px 8px 8px;
            display: flex;
            flex-direction: column;
            z-index: 9999; 
            
            /* Anti-aliasing tweak so pixel fonts stay crisp */
            -webkit-font-smoothing: none;
            image-rendering: pixelated;
        }

        .dialog-header {
            text-align: center;
            font-size: 26px;
            color: #313131; 
            line-height: 32px;
            letter-spacing: 1px;
            margin-bottom: 2px;
        }

        .dialog-screen {
            background-color: #070707;
            border: 2px solid #ffffff; 
            height: 155px;
            padding: 16px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .status-text {
            color: #ffffff;
            font-size: 26px;
            letter-spacing: 1px;
            text-shadow: 2px 2px 0px #3f3f3f; 
            margin-top: 4px;
        }

        .progress-track {
            width: 105%;
            height: 6px;
            display: flex;
            gap: 4px; 
            margin-bottom: 8px;
        }

        .segment {
            flex: 1;
            height: 100%;
            background-color: #162e16; 
            border: 1px solid #081208;
        }

        .segment.filled {
            background-color: #3cfc3c;
            box-shadow: 
                inset 2px 2px 0px #b5ffb5, 
                inset -2px -2px 0px #009600;
            border: none;
        }

        .achievement-toast {
            position: absolute;
            /* Starts hidden 100px above the top of the screen */
            top: -150px; 
            left: 50%;
            transform: translateX(-50%);
            
            background-color: #212121;
            border: 2px solid #000000;
            /* Inner highlight/shadow to create the 3D bevel */
            box-shadow: 
                inset 2px 2px 0px #505050, 
                inset -2px -2px 0px #151515,
                0 6px 15px rgba(0,0,0,0.6);
            
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            z-index: 10000;
            min-width: 320px;
            
            /* The physics of the slide-in: uses a custom bezier curve for a slight "bounce" */
            transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        }

        /* When this class is added via JS, it slides down to 20px */
        .achievement-toast.show {
            top: 20px; 
        }

        .achievement-icon {
            width: 36px;
            height: 72px;
            image-rendering: pixelated; /* Keeps the pixel art crisp when scaled */
            /* A subtle shadow behind the diamond */
            filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5));
        }

        .achievement-text-block {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .achievement-title {
            color: #FFFF55; /* Minecraft Yellow */
            font-size: 22px;
            text-shadow: 2px 2px 0px #3F3F00;
            margin-bottom: 2px;
        }

        .achievement-desc {
            color: #FFFFFF;
            font-size: 22px;
            text-shadow: 2px 2px 0px #3F3F3F;
        }