/* ===========================
         * Variabile CSS GLOBALE
         * =========================== */
        :root {
            --primary-color: #003D73;  
            --primary-color-dark: #005f9b; 
            --background-body: #f4f7f6; 
            --background-app: #FAFAFA; 
            --text-color: #333;
            --border-radius: 12px;
            --padding-sides: 20px;
            --max-width-content: 1000px; 
        }

        /* ===========================
         * GLOBAL STYLES & LAYOUT
         * =========================== */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background-body);
            margin: 0;
            padding: 0;
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

        /* --- Stiluri Container Principal (Chenarul Unic) --- */
        .app-container {
          
            max-width: var(--max-width-content);
            width: 100%; 
            margin: 20px auto; 
            min-height: calc(100vh - 40px);
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            background-color: var(--background-app);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
            overflow: hidden; 
            box-sizing: border-box; 
        }

        /* --- Stiluri Header --- */
        .header {
            background-color: var(--primary-color);
            color: white;
            background: linear-gradient(90deg, var(--primary-color) 0%, #0170b4 100%);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 15px var(--padding-sides); 
            position: relative;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
            
        }

        .logo-link {
            text-decoration: none;
            color: inherit; 
        }

        .logo {
            font-size: 1.8em;
            font-weight: bold;
            margin-right: 30px; 
        }

        .menu-toggle {
            background: none;
            border: none;
            color: white;
            font-size: 1.5em;
            cursor: pointer;
            display: block; 
            z-index: 1001;
            order: -1; 
            margin-right: 15px;
        }

        .nav-menu {
            display: none; 
            gap: 20px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-item {
            color: white;
            text-decoration: none;
            padding: 3px 8px;
            font-size: 0.95em;
            border-radius: 5px;
            transition: background-color 0.3s;
            font-weight: 600; 
        }

        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* --- Stiluri Zona Principală a Jocului --- */
        .main-content {
            text-align: center;
            padding: 30px var(--padding-sides); 
            display: flex; 
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
        }
        
        .sudoku-game-area { 
            width: 100%; 
            max-width: 1000px;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        }

        .main-content h1 {
            margin-top: 0;
            margin-bottom: 30px;
            color: var(--primary-color);
        }

        .button-grid {
            display: flex;
            flex-direction: column; 
            gap: 15px; 
            max-width: 350px; 
            margin: 0 auto; 
        }

        .main-btn {
            padding: 18px 15px;
            font-size: 1.1em;
            font-weight: 600;
            border: none;
            border-radius: 8px; 
            cursor: pointer;
            color: white;
            background: linear-gradient(45deg, #003D73, #1e88e5);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
        }

        .main-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
            opacity: 0.9;
        }

        /* --- Stiluri Modale (Versiunea din JS) --- */
        .custom-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .custom-modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .custom-modal {
            background-color: var(--background-app);
            border-radius: var(--border-radius);
            padding: 25px 35px;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .custom-modal-overlay.active .custom-modal {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .modal-header h3 {
            margin: 0;
            color: var(--primary-color);
        }

        .custom-modal p {
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .custom-modal .close-btn {
            position: static;
            font-size: 24px;
            line-height: 1;
            color: #888;
        }
        .custom-modal .close-btn:hover {
            color: #333;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
        }

        .modal-close-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: #607D8B;
            color: white;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
        }

        .modal-close-btn:hover {
            background: #455A64;
        }

        /* --- Stiluri Sudoku Specifice --- */

        .sudoku-game-area .game-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 820px;
            gap: 12px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            color: var(--text-color);
            box-sizing: border-box;
        }

        .sudoku-game-area .difficulty-control {
            display:flex;
            align-items:center;
            gap:8px;
        }
        .sudoku-game-area .difficulty-control label { font-weight:700; color:var(--primary-color); }
        .sudoku-game-area .difficulty-control select {
            padding:6px 8px;
            border-radius:8px;
            border:1px solid rgba(0,0,0,0.12);
            background:#fff;
            cursor:pointer;
            font-weight:600;
            color: var(--primary-color);
        }

        
        .sudoku-game-area .game-board-and-controls {
            display:flex;
            flex-direction: column; 
            align-items: center;
            gap: 18px;
            width: 100%;
            max-width: 1000px;
            box-sizing: border-box;
        }

       
        .sudoku-game-area .board-9x9 {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            grid-auto-rows: 1fr;
            width: 92vw;
            max-width: 520px;
            aspect-ratio: 1 / 1;
            border: 4px solid var(--primary-color);
            border-radius: 8px;
            overflow: hidden;
            
           
        }

       
        .sudoku-game-area .cell {
            border: 1px solid #d0d0d0;
            display:flex;
            justify-content:center;
            align-items:center;
            font-size: 36px;
            font-weight:500;
            user-select:none;
            position:relative;
            background:#fff;
            box-sizing:border-box;
            cursor:pointer;
            transition: background-color 0.1s, box-shadow 0.1s; 
        }

        
        .sudoku-game-area .cell[data-row="2"],
        .sudoku-game-area .cell[data-row="5"] {
            border-bottom-width: 3px;
            border-bottom-color: var(--primary-color);
        }
        .sudoku-game-area .cell[data-col="2"],
        .sudoku-game-area .cell[data-col="5"] {
            border-right-width: 3px;
            border-right-color: var(--primary-color);
        }

       
        .sudoku-game-area .cell.fixed {
            
            color:#0b63b8;
            font-weight:700;
            cursor:default;
        }

        /* =================================
         * STILURI CORECTATE PENTRU EVIDENȚIERE
         * ================================= */
        
        /* Evidențiere Rând/Coloană/Bloc 3x3 (culoare vizibilă) */
        .sudoku-game-area .cell.highlighted {
            background-color: #BBDEFB  !important; 
        }

        /* Evidențiere Cifre Asemănătoare (culoare vizibilă) */
        .sudoku-game-area .cell.match {
            background-color: #FFF9C4 !important; 
        }

        /* Evidențiere celulă selectată  */
        .sudoku-game-area .cell.selected { 
            box-shadow: inset 0 0 0 0px #003D73; 
            background-color: #BBDEFB; 
            z-index: 2; 
        }

        /* Combinații pentru a menține contrastul */
        .sudoku-game-area .cell.selected.match {
             background-color: #FFEE98 !important; 
        }
        .sudoku-game-area .cell.selected.highlighted {
             background-color: #42A5F5 !important; 
        }

        /* --- Stiluri de Eroare --- */
.sudoku-game-area .cell.error {
    background-color: #FFC0CB !important; 
    color: #C62828 !important; 
    box-shadow: inset 0 0 0 0px #EF5350, 0 0 5px rgba(239, 83, 80, 0.5); 
    animation: errorPulse 0.3s ease-in-out 2; 
}

/* Noua animație de puls pentru erori */
@keyframes errorPulse {
    0% {
        transform: scale(1.02);
    }
    50% {
        background-color: #FFEBEE !important;
    }
    100% {
        transform: scale(1);
    }
}
        
        
        .sudoku-game-area .cell.fixed.highlighted {
            background-color: #D6E4F0; 
        }
        .sudoku-game-area .cell.fixed.match {
            background-color: #EFE4A5 !important;
        }
        
       
        .sudoku-game-area .notes {
            position:absolute;
            inset:0;
            display:grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            font-size:0.38em;
            color:#555;
            padding:3px;
            box-sizing:border-box;
            pointer-events:none;
        }
        .sudoku-game-area .notes-digit {
            display:flex;
            justify-content:center;
            align-items:center;
            line-height:1;
        }
        
       
        .sudoku-game-area .controls-panel {
            width: 92vw;
            max-width: 520px; 
            display:flex;
            flex-direction:column;
            gap:12px;
            box-sizing:border-box;
        }

       
        .sudoku-game-area .action-buttons-row {
            display:grid;
            grid-template-columns: repeat(4,1fr);
            gap:8px;
            width:100%;
        }
        .sudoku-game-area .action-btn {
            padding:10px 8px;
            border-radius:8px;
            border:none;
            font-weight:700;
            cursor:pointer;
            color:#fff;
            background:#607D8B;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
            transition: transform 0.1s, background 0.2s;
        }
        .sudoku-game-area .action-btn:hover { transform: translateY(-2px); }

       
        .sudoku-game-area #note-btn.active { background: var(--primary-color-dark); box-shadow: 0 0 0 3px rgba(0,95,155,0.12); }

      
        .sudoku-game-area .number-controls {
            display:flex;
            flex-wrap: nowrap;
            overflow-x: auto; 
            gap: 6px;
            width:100%;
            padding: 8px 0;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .sudoku-game-area .number-controls::-webkit-scrollbar {
            display: none;
        }

        .sudoku-game-area .digit-btn {
            padding:12px 0;
            border-radius:8px;
            border:1px solid var(--primary-color);
            font-size:1.1rem;
            font-weight:800;
            background: var(--primary-color);
            color:white;
            cursor:pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.12);
            transition: transform 0.1s;
            min-width: 46px; 
            flex-shrink: 0;
        }

       
        .sudoku-game-area .main-action-buttons {
            display:flex;
            gap:8px;
            justify-content: center;
            margin-top: 4px;
        }
        .sudoku-game-area .main-action-btn { 
            flex: 1; 
            padding:12px 20px; 
            background: #28a745;
            font-size: 20px; 
        }
        .sudoku-game-area .main-action-btn:hover { background: #1e7e34; }

        /* --- Media Queries --- */

        @media (max-width: 768px) {
            .menu-toggle {
                display: block; 
            }
            
            .logo {
                margin-right: auto;
            }

            .nav-menu {
                flex-direction: column;
                position: absolute;
                top: 100%; 
                left: 0;
                width: 100%;
                background: linear-gradient(90deg, var(--primary-color) 0%, #005696 100%);
                padding: 10px 0;
                box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
                z-index: 1000;
                display: none; 
            }

            .nav-menu.active {
                display: flex;
            }

            .nav-item {
                padding: 10px var(--padding-sides);
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .nav-menu.active .nav-item:last-child {
                border-bottom: none;
            }
            .sudoku-game-area .digit-btn {
                padding: 6px 0; 
            }
        }
        
        @media (min-width: 769px) {
            .menu-toggle { display: none; }
            .nav-menu { 
                display: flex; 
                gap: 16px; 
                align-items: center; 
                position: static; 
                background: none; 
                padding: 0;
                box-shadow: none;
                width: auto;
            }
            .nav-item { padding: 4px 8px; }
            
            .sudoku-game-area .game-board-and-controls {
                flex-direction: row;
                align-items: flex-start;
                justify-content: center;
                gap: 24px;
            }
            .sudoku-game-area .board-9x9 {
                width: 520px;
                max-width: 520px;
            }
            .sudoku-game-area .controls-panel { 
                width: 220px; 
                margin-top: 6px; 
                max-width: 220px;
            }
            .sudoku-game-area .number-controls { 
                display: grid; 
                grid-template-columns: repeat(3,1fr); 
                grid-auto-rows: 1fr; 
                flex-wrap: wrap;
                overflow-x: hidden; 
                gap: 8px;
            }
            .sudoku-game-area .digit-btn { min-width: auto; }

            .sudoku-game-area .action-buttons-row { grid-template-columns: 1fr; }
            .sudoku-game-area .main-action-buttons { flex-direction: column; }
        }

        /* --- Stiluri Adăugate pentru Funcționalități Noi (Continuare) --- */

        /* Stiluri pentru Butoanele Numerice (Digit Counts) */
        .sudoku-game-area .digit-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1; 
            padding: 8px 0; 
        }
        .sudoku-game-area .digit-btn .digit-span {
            font-size: 30px;
            font-weight: 800;
        }

        .sudoku-game-area .digit-btn:hover {
        background-color: #1e88e5; 
        }
        
        .sudoku-game-area .digit-btn .count-span {
            font-size: 0.65rem; 
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7); 
            margin-top: 2px;
        }

       
        .sudoku-game-area .digit-btn.completed {
            background: #4CAF50; 
            border-color: #4CAF50;
            cursor: default;
            opacity: 0.8;
        }
        .sudoku-game-area .digit-btn.completed:hover {
            transform: none; 
        }

      

/* --- Stiluri de Finalizare a Unității (Succes - Neon Pulse & Shake) --- */

.sudoku-game-area .cell.unit-complete {
    background-color: #E0F3FF !important; 
    box-shadow: inset 0 0 0 2px #00BFFF;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    
   
    animation: unitFlashCompleteNeonShake 1.0s ease-out 1 forwards; 
}

@keyframes unitFlashCompleteNeonShake {
    0% {
      
        box-shadow: inset 0 0 0 5px #1E90FF;
        background-color: #FFFFFF !important;
        transform: scale(0.98) translateX(0); 
        opacity: 0.8;
    }

    40% {
       
        transform: scale(1.0) translateX(-1.5px);
    }
    
    50% {
       
        box-shadow: 
            inset 0 0 0 1px #00BFFF, 
            0 0 14px rgba(0, 191, 255, 0.9); 
        opacity: 1;
        
       
        transform: scale(1.0) translateX(2px); 
    }

    60% {
        
        transform: scale(1.0) translateX(-1px);
    }

    70% {
        
        transform: scale(1.0) translateX(1px);
    }
    
    100% {
        
        box-shadow: inset 0 0 0 2px #00BFFF;
        background-color: #E0F3FF !important; 
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}
   


@media (max-width: 769px) {

    
    .sudoku-game-area .number-controls {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
        padding: 6px 0;
    }

    .sudoku-game-area .digit-btn {
        flex: 1;
        min-width: 0; 
        max-width: 55px; 
        height: 60px; 
        
       
        display: flex;
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        padding: 2px 0; 
    }

    
    .sudoku-game-area .digit-btn > span:not(.count-span) {
        font-size: 30px; 
        line-height: 1;
    }
    
    
    .sudoku-game-area .digit-btn .count-span {
        font-size: 14px; 
        line-height: 1; 
        margin-top: 2px; 
    }

    .sudoku-game-area .cell {
    font-size: 30px; 
 }
}