:root {
    --primary-blue: #0ea5e9;
    /* Sky 500 */
    --primary-dark: #0369a1;
    /* Sky 700 */
    --bg-color: #f8fafc;
    --grid-border: #334155;
    --cell-border: #cbd5e1;
    --selection-bg: #e0f2fe;
    /* Light blue */
    --same-num-bg: #bae6fd;
    /* Darker light blue */
    --text-color: #1e293b;
    --fixed-text: #0f172a;
    /* Darker for initial numbers */
    --user-text: #0ea5e9;
    /* Blue for user input */
    --error-text: #ef4444;
    /* Red for errors */

    --cell-size: 40px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.app-container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
.game-header {
    text-align: center;
    margin-bottom: 20px;
}

.game-header h1 {
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.timer-badge {
    background: #e2e8f0;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
}

/* Controls */
.controls-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
}

.diff-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s;
}

.diff-btn.active {
    background: var(--primary-blue);
    color: white;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.2);
}

/* Grid */
.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    border: 2px solid var(--grid-border);
    background: white;
    margin-bottom: 20px;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    border: 1px solid var(--cell-border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    /* remove outlines from standard border to handle nth-child logic cleaner manually? 
       Actually CSS Grid gap is easier but border collapse style is preferred for Sudoku looks.
       We will use standard border collapse logic via negative margins or just border-right/bottom
    */
    border-right: 1px solid var(--cell-border);
    border-bottom: 1px solid var(--cell-border);
}

/* Thicker borders for 3x3 Block */
.cell:nth-child(3n) {
    border-right: 2px solid var(--grid-border);
}

.cell:nth-child(9n) {
    border-right: none;
    /* End of row handled by container border? No, container has border. */
}

/* Rows... difficult with pure CSS nth-child unless we know rows. 
   We have 81 cells. 
   Row 3 ends at 27, Row 6 at 54.
*/
.cell:not(:nth-bottom-child) {
    /* Hard to do generically without classes */
}

/* Let's rely on JS adding classes for borders or use specific nth-child ranges 
   Range 19-27 (Row 3), 46-54 (Row 6) need bottom border.
*/
/* Actually, simpler: 
   Horizontal lines after row 3 and 6. 
   Cells 19-27 are indices 18-26. 
   Row 3: Cells 19-27.
   Row 6: Cells 46-54.
*/
.cell.border-bottom-thick {
    border-bottom: 2px solid var(--grid-border);
}

.cell.border-right-thick {
    border-right: 2px solid var(--grid-border);
}

.cell.selected {
    background-color: var(--selection-bg);
}

.cell.related {
    background-color: #f1f5f9;
}

.cell.same-num {
    background-color: var(--same-num-bg);
}

.cell.fixed {
    color: var(--fixed-text);
    font-weight: 700;
}

.cell:not(.fixed) {
    color: var(--user-text);
}

.cell.error {
    color: var(--error-text);
    background-color: #fecaca !important;
}

/* Numpad */
.numpad-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.numpad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.num-btn,
.action-btn {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    height: 45px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
    box-shadow: 0 2px 0 #cbd5e1;
    transition: transform 0.1s;
}

.num-btn:active,
.action-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.action-btn {
    color: var(--error-text);
}

.primary-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    width: 90%;
    max-width: 350px;
}

.modal h2 {
    color: var(--primary-dark);
    margin-bottom: 20px;
}

.stats {
    margin-bottom: 20px;
    text-align: left;
    padding-left: 20px;
    font-size: 1.1rem;
}

/* Responsive Grid sizing */
@media (max-width: 400px) {
    .cell-size {
        --cell-size: 34px;
    }

    .sudoku-grid {
        margin: 0 auto 20px auto;
    }
}