:root {
            --bg-color: #000;
            --scanline-color: rgba(0, 255, 0, 0.1);
            --glow-color: #0f0;
            --text-color: #0f0;
            --error-color: #f00;
            --terminal-bg: rgba(0, 15, 0, 0.85);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { background-color: var(--bg-color); }
        body {
            font-family: 'VT323', monospace;
            color: var(--text-color);
            text-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        #matrix-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
        
        .terminal-window {
            background: var(--terminal-bg);
            border: 2px solid var(--glow-color);
            box-shadow: 0 0 20px var(--glow-color) inset, 0 0 20px var(--glow-color);
            padding: 20px;
            width: 100%;
            max-width: 900px;
            position: relative;
            overflow: hidden;
        }
        
        .terminal-window::after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: repeating-linear-gradient(0deg, var(--scanline-color) 0, var(--scanline-color) 1px, transparent 1px, transparent 3px);
            pointer-events: none;
            z-index: 2;
        }

        .terminal-header {
            background: var(--glow-color);
            color: var(--bg-color);
            text-shadow: none;
            padding: 5px;
            margin: -20px -20px 20px -20px;
            font-size: 1.2rem;
            text-align: left;
            padding-left: 15px;
        }

        .game-container { display: flex; gap: 20px; }
        .left-panel { flex: 1; padding-right: 20px; border-right: 1px dashed var(--text-color); }
        .right-panel { flex: 2; display: flex; flex-direction: column; gap: 20px; }
        #hangman-ascii { font-size: 1rem; white-space: pre; line-height: 1.1; }
        #title, #hint-container { font-size: 1.5rem; }

        #word-container { display: flex; gap: 15px; font-size: 3rem; height: 60px; margin-bottom: 10px; align-items: center; }
        .letter-placeholder { border-bottom: 4px solid var(--text-color); width: 40px; text-align: center; position: relative; }
        .letter-placeholder.empty::after { content: '█'; position: absolute; left: 50%; transform: translateX(-50%); animation: blink 1s step-end infinite; }
        @keyframes blink { 50% { opacity: 0; }}

        #message-container { font-size: 1.3rem; height: 25px; min-height: 25px; }
        #keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

        .key { font-family: inherit; font-size: 1.5rem; background: transparent; border: 1px solid var(--text-color); color: var(--text-color); width: 50px; height: 50px; cursor: pointer; transition: all 0.2s; text-shadow: inherit; }
        .key:hover:not(:disabled) { background: var(--glow-color); color: var(--bg-color); text-shadow: none; }
        .key:disabled { opacity: 0.4; cursor: not-allowed; border-style: dashed; }
        .key.correct { background: var(--glow-color); color: var(--bg-color); text-shadow: none; }
        .key.incorrect { background: var(--error-color); border-color: var(--error-color); color: var(--bg-color); text-shadow: none; }
        
        #controls { margin-top: 15px; text-align: center; }
        .control-button { font-family: inherit; font-size: 1.2rem; padding: 10px 20px; margin: 5px; background: transparent; border: 1px solid var(--text-color); color: var(--text-color); cursor: pointer; text-shadow: inherit; }
        .control-button:hover { background: var(--glow-color); color: var(--bg-color); text-shadow: none; }
        #restart-button { opacity: 0; visibility: hidden; transition: opacity 0.5s; }
        #restart-button.visible { opacity: 1; visibility: visible; }
        
        /* --- MODAL STYLES --- */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.hidden { display: none; }

        #modal-content {
            animation: fadeIn 0.5s ease;
        }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        
        #modal-title {
            font-size: 4rem;
            text-align: center;
            margin-bottom: 20px;
        }
        .win-title { color: var(--glow-color); text-shadow: 0 0 15px var(--glow-color); }
        .lose-title { color: var(--error-color); text-shadow: 0 0 15px var(--error-color); }

        #modal-message { font-size: 1.5rem; text-align: center; min-height: 60px; }
        #modal-close-button { margin-top: 25px; }


        @media (max-width: 768px) {
            .game-container { flex-direction: column; }
            .left-panel { border-right: none; border-bottom: 1px dashed var(--text-color); padding-right: 0; padding-bottom: 20px; text-align: center; }
            #word-container { font-size: 2rem; justify-content: center; }
            .letter-placeholder { width: 30px; }
            .key { width: 40px; height: 40px; font-size: 1.2rem; }
        }