/* public/css/sudocu.css */

#sudocu-section {
    min-height: 80vh;
    background-color: var(--section-bg);
    color: var(--text-color);
    padding-top: 100px;
}

body.dark-theme #sudocu-section {
    background: radial-gradient(circle at center, #0f1a2e 0%, #000000 100%);
}

/* ===== SETUP SCREEN ===== */
#setup-screen .card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    backdrop-filter: blur(10px);
}

body.dark-theme #setup-screen .diff-btn {
    border-width: 2px;
}

.diff-btn.active {
    pointer-events: none;
}

/* ===== TOP BAR ===== */
.score-badge {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ===== SUDOCU BOARD ===== */
#sudocu-board-container {
    display: flex;
    justify-content: center;
}

#sudocu-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 450px;
    height: 450px;
    border: 3px solid var(--text-color);
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
}

.sudocu-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    transition: background 0.15s ease;
}

/* 3x3 box borders */
.sudocu-cell[data-col="2"],
.sudocu-cell[data-col="5"] {
    border-right: 3px solid var(--text-color);
}

.sudocu-cell[data-row="2"],
.sudocu-cell[data-row="5"] {
    border-bottom: 3px solid var(--text-color);
}

/* Given (clue) cells */
.sudocu-cell.given {
    font-weight: 800;
    cursor: default;
}

body:not(.dark-theme) .sudocu-cell.given {
    background: #f0f0f0;
}

body.dark-theme .sudocu-cell.given {
    background: rgba(255, 255, 255, 0.06);
}

/* User-entered cells */
.sudocu-cell.user-entered {
    color: #3498db;
}

body.dark-theme .sudocu-cell.user-entered {
    color: #5dade2;
}

/* Selected cell */
.sudocu-cell.selected {
    background: rgba(52, 152, 219, 0.25) !important;
    box-shadow: inset 0 0 0 2px #3498db;
}

/* Highlighted row/col/box */
.sudocu-cell.highlighted {
    background: rgba(52, 152, 219, 0.08);
}

body.dark-theme .sudocu-cell.highlighted {
    background: rgba(52, 152, 219, 0.12);
}

/* Same number highlight */
.sudocu-cell.same-number {
    background: rgba(52, 152, 219, 0.15);
}

body.dark-theme .sudocu-cell.same-number {
    background: rgba(52, 152, 219, 0.2);
}

/* Error cell */
.sudocu-cell.error {
    color: #e74c3c !important;
    animation: cellShake 0.3s ease;
}

.sudocu-cell.error-bg {
    background: rgba(231, 76, 60, 0.12) !important;
}

/* Hint cell flash */
.sudocu-cell.hint-flash {
    animation: hintPulse 0.6s ease;
}

@keyframes hintPulse {
    0% { background: rgba(46, 204, 113, 0.5); }
    100% { background: var(--card-bg); }
}

@keyframes cellShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ===== PENCIL NOTES ===== */
.sudocu-cell .notes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.sudocu-cell .notes-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 600;
    color: #7f8c8d;
    line-height: 1;
}

body.dark-theme .sudocu-cell .notes-grid span {
    color: #95a5a6;
}

/* ===== NUMBER PAD ===== */
#number-pad {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 450px;
    margin: 0 auto;
}

.num-btn {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.num-btn:hover {
    background: rgba(52, 152, 219, 0.15);
    border-color: #3498db;
    transform: scale(1.08);
}

.num-btn:active {
    transform: scale(0.95);
}

.num-btn.completed {
    opacity: 0.3;
    pointer-events: none;
}

/* Notes mode active */
#btn-notes-toggle.active {
    background: #3498db !important;
    color: #fff !important;
    border-color: #3498db !important;
}

/* ===== STATUS BAR ===== */
#game-status {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
}

body.dark-theme #game-status {
    background: rgba(33, 37, 41, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ===== WIN ANIMATION ===== */
.sudocu-cell.win-pop {
    animation: winPop 0.4s ease forwards;
}

@keyframes winPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); background: rgba(46, 204, 113, 0.3); }
    100% { transform: scale(1); background: rgba(46, 204, 113, 0.1); }
}

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 768px) {
    #sudocu-section {
        padding-top: 80px;
    }

    #sudocu-board {
        width: 360px;
        height: 360px;
    }

    .sudocu-cell {
        font-size: 1.15rem;
    }

    .sudocu-cell .notes-grid span {
        font-size: 0.45rem;
    }

    .num-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    #number-pad {
        max-width: 360px;
    }

    .score-badge {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 480px) {
    #sudocu-section {
        padding-top: 70px;
    }

    #sudocu-board {
        width: calc(100vw - 32px);
        height: calc(100vw - 32px);
        max-width: 360px;
        max-height: 360px;
    }

    .sudocu-cell {
        font-size: 1rem;
    }

    .sudocu-cell .notes-grid span {
        font-size: 0.4rem;
    }

    .num-btn {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
        border-radius: 8px;
    }

    #number-pad {
        max-width: calc(100vw - 32px);
        gap: 4px;
    }

    .score-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    #sudocu-top-bar .btn {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    #sudocu-top-bar {
        gap: 4px !important;
    }
}