/* ตั้งค่าพื้นฐาน */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    background-color: #f0f2f5;
    margin: 0;
    padding: 20px 0;
}

#game-container {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#header h2 {
    text-align: center;
    margin-top: 0;
    color: #333;
}

#status-bar {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 15px;
    color: #555;
    background: #e9ecef;
    padding: 10px;
    border-radius: 5px;
}

/* ส่วนกระดานซูโดกุ */
#sudoku-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1px;
    background-color: #333; /* สีเส้นขอบตาราง */
    border: 3px solid #333; /* เส้นขอบตารางด้านนอก */
    margin-bottom: 20px;
}

.cell {
    aspect-ratio: 1; /* ทำให้ช่องเป็นสี่เหลี่ยมจัตุรัส */
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #000;
}

/* สร้างเส้นแบ่งกรอบ 3x3 ให้หนาขึ้น */
.cell:nth-child(3n) { border-right: 2px solid #333; }
.cell:nth-child(9n) { border-right: none; }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #333; }

/* แผงตัวเลข */
#numpad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

button {
    padding: 10px;
    font-size: 1.1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    transition: 0.2s;
}

button:active { background: #ddd; }

.num-btn { font-weight: bold; color: #0056b3; }
.action-btn { background: #0056b3; color: white; border: none; }

#controls {
    display: flex;
    gap: 10px;
}
#controls button { flex: 1; }

/* ---- โค้ดที่เพิ่มใหม่สำหรับสถานะของช่อง ---- */
.cell.fixed {
    background-color: #f0f0f0; /* พื้นหลังสีเทาสำหรับช่องที่เป็นโจทย์ */
    color: #333;
}

.cell.selected {
    background-color: #bbdefb; /* ไฮไลท์สีฟ้าเมื่อคลิกเลือกช่อง */
}

.cell.error {
    color: red; /* ตัวเลขสีแดงเมื่อตอบผิด */
    background-color: #ffcdd2; /* พื้นหลังสีแดงอ่อน */
}

.cell.correct {
    color: #0056b3; /* ตัวเลขสีน้ำเงินเมื่อตอบถูก (แยกกับสีดำของโจทย์) */
}

/* =========================================
   ระบบธีมกระดาน 4 รูปแบบ (Themes)
========================================= */

/* 1. คลาสสิก (ไม่ต้องกำหนดอะไรเพิ่ม ใช้ค่าพื้นฐานเดิม) */

/* 2. ดาร์กโหมด (Dark Theme) */
body.theme-dark { background-color: #121212; }
body.theme-dark #game-container { background: #242424; color: #fff; box-shadow: 0 4px 10px rgba(255,255,255,0.05); }
body.theme-dark #header h2 { color: #fff; }
body.theme-dark #status-bar { background: #333; color: #ccc; }
body.theme-dark #sudoku-board { background-color: #555; border-color: #555; }
body.theme-dark .cell { background: #1e1e1e; color: #fff; }
body.theme-dark .cell.fixed { background: #2c2c2c; color: #aaa; }
body.theme-dark .cell:nth-child(3n) { border-right-color: #555; }
body.theme-dark .cell:nth-child(n+19):nth-child(-n+27), body.theme-dark .cell:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #555; }
body.theme-dark .cell.selected { background: #0056b3; color: #fff; }
body.theme-dark .cell.correct { color: #64b5f6; }
body.theme-dark button { background: #333; color: #fff; border-color: #555; }
body.theme-dark .action-btn { background: #0d6efd; border-color: #0d6efd; }

/* 3. ลายไม้ (Wood Theme) */
body.theme-wood { background-color: #d7ccc8; }
body.theme-wood #game-container { background: #efebe9; }
body.theme-wood #header h2 { color: #4e342e; }
body.theme-wood #status-bar { background: #d7ccc8; color: #4e342e; }
body.theme-wood #sudoku-board { background-color: #5d4037; border-color: #5d4037; }
body.theme-wood .cell { background: #fff8e1; color: #4e342e; }
body.theme-wood .cell.fixed { background: #d7ccc8; color: #3e2723; }
body.theme-wood .cell:nth-child(3n) { border-right-color: #5d4037; }
body.theme-wood .cell:nth-child(n+19):nth-child(-n+27), body.theme-wood .cell:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #5d4037; }
body.theme-wood .cell.selected { background: #bcaaa4; }
body.theme-wood .cell.correct { color: #d84315; }
body.theme-wood button { background: #d7ccc8; color: #3e2723; border-color: #bcaaa4; }
body.theme-wood .action-btn { background: #795548; color: #fff; border-color: #795548; }

/* 4. พาสเทล (Pastel Theme) */
body.theme-pastel { background-color: #fce4ec; }
body.theme-pastel #game-container { background: #fff; border: 2px solid #f8bbd0; }
body.theme-pastel #header h2 { color: #c2185b; }
body.theme-pastel #status-bar { background: #f8bbd0; color: #880e4f; }
body.theme-pastel #sudoku-board { background-color: #f06292; border-color: #f06292; }
body.theme-pastel .cell { background: #fff; color: #880e4f; }
body.theme-pastel .cell.fixed { background: #fce4ec; color: #c2185b; }
body.theme-pastel .cell:nth-child(3n) { border-right-color: #f06292; }
body.theme-pastel .cell:nth-child(n+19):nth-child(-n+27), body.theme-pastel .cell:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #f06292; }
body.theme-pastel .cell.selected { background: #f48fb1; color: white;}
body.theme-pastel .cell.correct { color: #1e88e5; }
body.theme-pastel button { background: #f8bbd0; color: #880e4f; border-color: #f48fb1; }
body.theme-pastel .action-btn { background: #ec407a; color: #fff; border-color: #ec407a; }