/* --- CSS STYLES --- */
        body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', sans-serif; overflow: hidden; background-color: #f8f9fa; }
        #map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
        
        /* UI Layers */
        .ui-overlay { position: absolute; z-index: 1000; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; }
        .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: flex; align-items: center; justify-content: center; pointer-events: auto; padding: 20px; }
        .modal-content { background: white; padding: 2rem; border-radius: 15px; text-align: center; width: 100%; max-width: 500px; box-shadow: 0 4px 25px rgba(0,0,0,0.6); }
        .hidden { display: none !important; }
        
        /* Text & HUD */
        h1 { margin: 0 0 5px 0; color: #2c3e50; font-size: 1.8rem; }
        .hud-float { position: absolute; top: 20px; background: rgba(255, 255, 255, 0.95); padding: 8px 16px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); font-size: 1.2rem; font-weight: bold; pointer-events: none; }
        #hud-score { left: 20px; color: #27ae60; border: 2px solid #27ae60; }
        #hud-lives { right: 20px; color: #c0392b; border: 2px solid #c0392b; }
        
        /* Bottom Control Bar */
        .hud-bottom { pointer-events: auto; background: rgba(255, 255, 255, 0.98); padding: 15px; text-align: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); border-top-left-radius: 20px; border-top-right-radius: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
        
        input[type="text"] { padding: 12px; font-size: 1.2rem; width: 50%; border: 2px solid #ccc; border-radius: 8px; text-transform: uppercase; text-align: center; letter-spacing: 1px; }
        button { padding: 12px 20px; font-size: 1rem; background: #27ae60; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-left: 5px; }
        button:disabled { background: #95a5a6; cursor: not-allowed; }
        #hint-btn { background: #f39c12; }
        
        /* MOBILE OPTIMIZED WORD DISPLAY */
        #word-display { 
            display: flex; 
            flex-wrap: wrap; /* Allows words to drop to next line */
            justify-content: center; 
            gap: 15px; /* Space between words */
            margin-bottom: 15px;
            font-family: 'Courier New', monospace; 
            font-weight: 800; 
            color: #333;
            /* Dynamic sizing: shrinks on small phones, grows on desktop */
            font-size: clamp(1.2rem, 5vw, 2.2rem); 
        }
        
        .word-block {
            display: inline-block;
            white-space: nowrap; /* Forces "FOREST" to stay on one line */
        }

        .letter-char {
            display: inline-block;
            min-width: 0.6em; /* Ensures underscores are visible */
            text-align: center;
        }
        
        #clue-box { margin-bottom: 15px; padding: 10px; background: #e8f6f3; border-radius: 8px; border-left: 4px solid #1abc9c; text-align: left; font-size: 0.9rem; display: none; }
        .clue-label { font-weight: bold; color: #16a085; margin-right: 5px; }
        .bad-letter { color: #c0392b; text-decoration: line-through; margin: 0 4px; opacity: 0.6; }
        .good-letter { color: #27ae60; margin: 0 4px; }

        /* Leaderboard */
        table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; }
        th, td { padding: 8px; border-bottom: 1px solid #ddd; text-align: left; }
        th { background-color: #f1f1f1; }

        /* Animation */
        .anim-pop { animation: popScale 0.4s ease-out; }
        .anim-shake { animation: shakeColor 0.4s ease-in-out; }
        @keyframes popScale { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
        @keyframes shakeColor { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
        
        @media (max-width: 600px) {
            h1 { font-size: 1.4rem; }
            input[type="text"] { width: 45%; font-size: 1rem; padding: 10px; }
            button { padding: 10px 10px; font-size: 0.85rem; }
            .hud-bottom { padding: 10px; }
            #hud-score, #hud-lives { font-size: 0.9rem; padding: 5px 10px; }
        }