/* --- START OF FILE sudoku-for-kids.css --- */

/* 
   إصلاح كامل لشبكات 4x4 و 6x6
   مع إلغاء تداخل خطوط شبكة 9x9 الأصلية
*/

/* --- Main Grid Container --- */
#grid-container {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    padding: 5px; 
}

/* =========================================
   COMMON GRID STYLES (4x4 & 6x6)
   ========================================= */
.grid-4x4, .grid-6x6 {
    display: grid;
    aspect-ratio: 1 / 1;
    border: 4px solid var(--text-color-light); 
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 4px;
    overflow: hidden;
    gap: 0;
}

/* دعم الثيمات للحدود الخارجية */
.theme-dark .grid-4x4, .theme-dark .grid-6x6 { border-color: var(--text-color-dark); }
.theme-paper .grid-4x4, .theme-paper .grid-6x6 { border-color: var(--text-color-paper); }

/* --- إعادة تعيين شاملة للخلايا (Reset) --- */
.grid-4x4 .cell, .grid-6x6 .cell {
    font-weight: bold;
    /* إجبار الحدود على أن تكون رفيعة كقاعدة أساسية */
    border-right: 2px solid var(--border-color-light) !important;
    border-bottom: 2px solid var(--border-color-light) !important;
    border-top: none;
    border-left: none;
}

/* دعم ألوان الحدود الرفيعة للثيمات */
.theme-dark .grid-4x4 .cell, .theme-dark .grid-6x6 .cell {
    border-right-color: var(--border-color-dark) !important;
    border-bottom-color: var(--border-color-dark) !important;
}
.theme-paper .grid-4x4 .cell, .theme-paper .grid-6x6 .cell {
    border-right-color: var(--border-color-paper) !important;
    border-bottom-color: var(--border-color-paper) !important;
}

/* =========================================
   4x4 SPECIFIC LAYOUT
   ========================================= */
.grid-4x4 {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
}

.grid-4x4 .cell {
    font-size: clamp(40px, 12vw, 70px);
}

/* --- خطوط شبكة 4x4 --- */
.grid-4x4 .cell:nth-child(4n) { border-right: none !important; } /* إزالة الحافة اليمنى */
.grid-4x4 .cell:nth-child(n+13) { border-bottom: none !important; } /* إزالة الحافة السفلية */

/* خط عمودي سميك (بعد العمود 2) */
.grid-4x4 .cell:nth-child(4n+2) { 
    border-right: 3px solid var(--text-color-light) !important; 
}
/* خط أفقي سميك (بعد الصف 2) */
.grid-4x4 .cell:nth-child(n+5):nth-child(-n+8) { 
    border-bottom: 3px solid var(--text-color-light) !important; 
}

/* ألوان الخطوط السميكة (4x4) */
.theme-dark .grid-4x4 .cell:nth-child(4n+2),
.theme-dark .grid-4x4 .cell:nth-child(n+5):nth-child(-n+8) { border-color: var(--text-color-dark) !important; }
.theme-paper .grid-4x4 .cell:nth-child(4n+2),
.theme-paper .grid-4x4 .cell:nth-child(n+5):nth-child(-n+8) { border-color: var(--text-color-paper) !important; }


/* =========================================
   6x6 SPECIFIC LAYOUT (FIXED)
   ========================================= */
.grid-6x6 {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(6, 1fr) !important;
}

.grid-6x6 .cell {
    font-size: clamp(24px, 8vw, 45px);
}

/* --- خطوط شبكة 6x6 --- */

/* 1. إزالة الحدود الخارجية */
.grid-6x6 .cell:nth-child(6n) { border-right: none !important; }
.grid-6x6 .cell:nth-child(n+31) { border-bottom: none !important; }

/* 2. خط عمودي سميك (بعد العمود 3) */
.grid-6x6 .cell:nth-child(6n+3) { 
    border-right: 3px solid var(--text-color-light) !important; 
}

/* 3. خطوط أفقية سميكة (بعد الصف 2 والصف 4) */
/* الصف 2 (الخلايا 7-12) */
.grid-6x6 .cell:nth-child(n+7):nth-child(-n+12) { 
    border-bottom: 3px solid var(--text-color-light) !important; 
}
/* الصف 4 (الخلايا 19-24) */
.grid-6x6 .cell:nth-child(n+19):nth-child(-n+24) { 
    border-bottom: 3px solid var(--text-color-light) !important; 
}

/* === الإصلاح الهام لشبكة 6x6 === */
/* 
   إصلاح الخلل: الخلايا 25، 26، 27 في شبكة 6x6 تقع في الصف الخامس.
   لكن في ملف style.css الأصلي، هذه الخلايا تأخذ حدوداً سميكة لأنها جزء من الصف الثالث في شبكة 9x9.
   الكود التالي يجبرها على أن تكون حدوداً رفيعة عادية.
*/
.grid-6x6 .cell:nth-child(n+25):nth-child(-n+30) {
    border-bottom: 1px solid var(--border-color-light) !important;
}
.theme-dark .grid-6x6 .cell:nth-child(n+25):nth-child(-n+30) {
    border-bottom-color: var(--border-color-dark) !important;
}
.theme-paper .grid-6x6 .cell:nth-child(n+25):nth-child(-n+30) {
    border-bottom-color: var(--border-color-paper) !important;
}
/* === نهاية الإصلاح === */

/* ألوان الخطوط السميكة (6x6) */
.theme-dark .grid-6x6 .cell:nth-child(6n+3),
.theme-dark .grid-6x6 .cell:nth-child(n+7):nth-child(-n+12),
.theme-dark .grid-6x6 .cell:nth-child(n+19):nth-child(-n+24) { border-color: var(--text-color-dark) !important; }

.theme-paper .grid-6x6 .cell:nth-child(6n+3),
.theme-paper .grid-6x6 .cell:nth-child(n+7):nth-child(-n+12),
.theme-paper .grid-6x6 .cell:nth-child(n+19):nth-child(-n+24) { border-color: var(--text-color-paper) !important; }


/* =========================================
   KIDS CONTROLS & NOTES
   ========================================= */
.kids-pad button { 
    font-size: 24px; 
    padding: 15px 0; 
    border-radius: 12px; 
}

.notes-grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 0; 
}

.note-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: inherit; 
    opacity: 0.7; 
    line-height: 1;
}

.grid-4x4 .note-cell { font-size: clamp(18px, 6vw, 32px); }
.grid-6x6 .note-cell { font-size: clamp(12px, 3.5vw, 20px); }

/* =========================================
   Mobile Specific Adjustments
   ========================================= */
@media screen and (max-width: 600px) {
    #grid-container { 
        width: 94%;       
        max-width: 400px;
        margin: 0 auto 15px auto;
        min-height: auto; 
    }
    .grid-4x4 .cell { font-size: clamp(30px, 10vw, 55px); }
}

/* --- Mobile Menu & Pause Overlay --- */
#mobile-nav-container { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
#mobile-nav-container a { display: block; text-decoration: none; padding: 12px 15px; background-color: var(--bg-color-secondary, #f4f4f9); color: var(--text-color, #333); border-radius: 8px; font-weight: bold; text-align: left; border: 1px solid rgba(0,0,0,0.1); transition: background-color 0.2s; }
#mobile-nav-container a.active { background-color: #4a90e2; color: white; border-color: #4a90e2; }
.theme-dark #mobile-nav-container a { background-color: #2c3e50; color: #fff; border-color: #555; }
.theme-dark #mobile-nav-container a.active { background-color: #4a90e2; border-color: #4a90e2; }

.pause-overlay { background-color: rgba(248, 0, 0, 0.95); color: #4a90e2; backdrop-filter: blur(2px); }
.pause-overlay .resume-text { color: #333; }
.theme-dark .pause-overlay { background-color: rgba(30, 35, 40, 0.95); color: #64b5f6; }
.theme-dark .pause-overlay .resume-text { color: #e50000; }
.theme-paper .pause-overlay { background-color: rgba(245, 240, 230, 0.95); color: #5d4037; }

.cell.reveal-pulse { animation: solvePulse 0.5s ease-out; color: var(--primary-color-light) !important; }
.theme-dark .cell.reveal-pulse { color: var(--primary-color-dark) !important; }
.theme-paper .cell.reveal-pulse { color: var(--primary-color-paper) !important; }
@keyframes solvePulse { 0% { transform: scale(0.6); background-color: rgba(74, 144, 226, 0.4); opacity: 0; } 50% { transform: scale(1.15); background-color: rgba(74, 144, 226, 0.15); } 100% { transform: scale(1); background-color: transparent; opacity: 1; } }