/* --- Grundlegende Stile --- */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); /* Winterlicher Nachthimmel */
            font-family: 'Courier New', Courier, monospace;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* --- Login Container --- */
        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            background: rgba(255, 255, 255, 0.116);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(0,0,0,0.2);
            width: 90%;
            max-width: 320px;
            box-sizing: border-box;
            text-align: center; 
            /* border: 3px solid #383838; */
        }

        .login-container h1{
            color: #ffffff;
            margin-top: 0;
            margin-bottom: 30px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 2em;
            
        }
        .login-container h3{
            color: #ffffff;
            margin-top: 0;
            margin-bottom: 30px;}

        .input-group {
            margin-bottom: 20px;
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .login-container input:focus {
            outline: none;
            border-color: #3b4cca;
        }

        .login-button {
            width: 100%;
            padding: 15px;
            background-color: #3b4cca;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
            transition: background-color 0.3s;
            border-bottom: 4px solid #29348d;
        }

        .login-button:hover {
            background-color: #4c5cf1;
        }

        .login-button:active {
            transform: translateY(2px);
            border-bottom-width: 2px;
        }

        /* --- Honeypot --- */
        .honeypot {
            position: absolute;
            left: -9999px;
            top: -9999px;
        }

        /* --- Hint Box (wie im Spiel) --- */
        #hint-box {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 300px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            z-index: 100;
        }

        .hint-message {
            background-color: #ffffff;
            border: 4px solid #383838;
            border-radius: 8px;
            box-shadow: 0 0 0 4px #d0d0d8, 0 10px 20px rgba(0, 0, 0, 0.5);
            padding: 15px;
            font-size: 16px;
            color: #383838;
            line-height: 1.4;
            animation: slideInRight 0.5s ease-out forwards;
            pointer-events: auto;
            width: 100%;
            box-sizing: border-box;
        }

        .hint-message.hint-exit {
            animation: slideOutRight 0.5s ease-in forwards;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(110%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(110%);
                opacity: 0;
            }
        }

        /* --- Mobile Optimierungen --- */
        @media (max-width: 900px) {
            .login-container {
            }

            .login-container h1 {
                font-size: 1.5em;
                margin-bottom: 20px;
            }

            #hint-box {
                width: auto;
                left: 10px;
                right: 10px;
                top: 10px;
            }
        }