/* --- Body --- */
        body {
            margin: 0;
            min-height: 100vh;
            background-image: url("../img/ui/bg/bliss.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            overflow-x: hidden;
            font-family: 'Tahoma', 'MS PGothic', 'Pixel Operator', sans-serif;
            text-rendering: pixelated;
            -webkit-font-smoothing: none;
            -moz-osx-font-smoothing: grayscale;
        }

        
        /* --- Windows Formatting --- */
        .window {
            position: absolute;
            z-index: 9;
        }

        .window-body {
            font-size: 12px;
            line-height: 1.4;
        }

        .window-body img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto 10px auto;
        }

        .scrollable-window-body {
            max-height: 250px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
        }

        .title-bar {
            cursor: move;
        }

        /* --- movile ver --- */
        @media (max-width: 768px) {
            body {
                overflow-y: auto;
                padding: 15px;
                padding-bottom: 60px;
                box-sizing: border-box;
            }

            main {
                display: flex;
                flex-direction: column;
                gap: 20px;
                align-items: center;
            }

            .window {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                bottom: auto !important;
                right: auto !important;
                transform: none !important;
                width: 100% !important;
                max-width: 450px;
            }

            .title-bar {
                cursor: default;
            }
            
            #win-intro {
                margin-top: 10px;
            }
        }

        /* --- Window Initial Positions --- */
        #win-intro {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 450px;
        }

        #win-facts {
            bottom: 15%;
            left: 15%;
            width: 320px;
        }

        #win-quizzes {
            top: 5%;
            right: 5%;
            width: 350px;
        }

        #win-interests {
            bottom: 5%;
            right: 25%;
            width: 350px;
        }

        #win-kita {
            bottom: 5%;
            right: 3%;
            width: 250px;
        }

        #win-me {
            top: 10%;
            left: 10%;
            width: 250px;
        }

        #win-fanart {
            bottom: 30%;
            right: 20%;
            width: 200px;
        }

        #win-song {
            top: 30%;
            right: 30%;
            width: 250px;
        }

        #win-trickcal {
            bottom: 40%;
            left: 30%;
            width: 100px;
        }

        #win-ugly {
            top: 25%;
            left: 40%;
            width: 120px;
        }

        #win-cat {
            bottom:20%;
            left: 40%;
            width: 150px;
        }

        #win-quizzes .scrollable-window-body {
            padding-top: 0;
            padding-bottom: 0;
        }
        

        .quiz-list {
            list-style: none; 
            display: flex;
            flex-direction: column;
            gap: 8px; 
            padding: 0;
            margin: 0;
            align-items: center;
            width: 100%;
        }

        .quiz-list img {
            width: 100%;
            height: auto;
            display: block;
            border: 1px solid #082d8d; /* Optional: adds a little XP-style border */
        }

        .quiz-list li {
            margin: 0px;
        }

        .quiz-list li:first-child {
            margin-top: 0;
        }

        .quiz-list li:last-child {
            margin-bottom: 0;
        }

        /* --- Taskbar --- */
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #1941a5 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
        }

        .start-button {
            height: 100%;
            padding: 0 15px;
            background: linear-gradient(to bottom, #388e3c 0%, #4caf50 10%, #388e3c 100%);
            border: none;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            color: white;
            font-weight: bold;
            font-style: italic;
            font-size: 14px;
            text-shadow: 1px 1px 1px #000;
            cursor: pointer;
            display: flex;
            align-items: center;
            box-shadow: 2px 0 5px rgba(0,0,0,0.3);
            text-decoration: none;
        }

        .start-button:hover {
            filter: brightness(1.1);
        }

        .system-tray {
            height: 100%;
            background-color: #09adff;
            padding: 0 10px;
            display: flex;
            align-items: center;
            color: white;
            font-size: 11px;
            border-left: 1px solid #082d8d;
            box-shadow: inset 1px 0 1px rgba(255,255,255,0.3);
        }