/* ============================================
   Calcudoku Game Styles
   Professional styling for desktop and mobile
   ============================================ */

/* CSS Variables for theming */
:root {
    --calcudoku-cell-bg: #ffffff;
    --calcudoku-cell-border: #d1d5db;
    --calcudoku-cage-border: #1f2937;
    --calcudoku-text: #1f2937;
    --calcudoku-selected: #3b82f6;
    --calcudoku-selected-bg: #dbeafe;
    --calcudoku-correct: #059669;
    --calcudoku-incorrect: #dc2626;
    --calcudoku-hint-text: #6b7280;
}

.dark {
    --calcudoku-cell-bg: #374151;
    --calcudoku-cell-border: #4b5563;
    --calcudoku-cage-border: #e5e7eb;
    --calcudoku-text: #f9fafb;
    --calcudoku-selected: #60a5fa;
    --calcudoku-selected-bg: #1e3a5f;
    --calcudoku-correct: #34d399;
    --calcudoku-incorrect: #f87171;
    --calcudoku-hint-text: #9ca3af;
}

/* ============================================
   GRID CONTAINER
   ============================================ */
#calcudoku-grid {
    max-width: 360px;
    margin: 0 auto;
    background: var(--calcudoku-cage-border);
    padding: 2px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#puzzle-grid {
    display: grid;
    gap: 0;
    background: var(--calcudoku-cage-border);
}

/* Grid size adaptations - columns set by JS */
#puzzle-grid[style*="grid-template-columns: repeat(4"] {
    max-width: 240px;
}

#puzzle-grid[style*="grid-template-columns: repeat(6"] {
    max-width: 300px;
}

#puzzle-grid[style*="grid-template-columns: repeat(9"] {
    max-width: 360px;
}

/* ============================================
   CELL STYLING
   ============================================ */
.calcudoku-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--calcudoku-cell-bg);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    aspect-ratio: 1;
}

/* Cell hover state */
.calcudoku-cell:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark .calcudoku-cell:hover {
    background-color: rgba(96, 165, 250, 0.15);
}

/* Cell value text */
.cell-value {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--calcudoku-text);
    z-index: 1;
}

/* Smaller text for larger grids */
#puzzle-grid[style*="repeat(6"] .cell-value {
    font-size: 1.25rem;
}

#puzzle-grid[style*="repeat(9"] .cell-value {
    font-size: 1rem;
}

/* ============================================
   SELECTED STATE
   ============================================ */
.calcudoku-cell.selected {
    background-color: var(--calcudoku-selected-bg) !important;
    box-shadow: inset 0 0 0 3px var(--calcudoku-selected);
    z-index: 2;
}

/* ============================================
   CAGE BORDERS (thick 3px borders)
   ============================================ */
.cage-top {
    border-top: 3px solid var(--calcudoku-cage-border) !important;
}

.cage-bottom {
    border-bottom: 3px solid var(--calcudoku-cage-border) !important;
}

.cage-left {
    border-left: 3px solid var(--calcudoku-cage-border) !important;
}

.cage-right {
    border-right: 3px solid var(--calcudoku-cage-border) !important;
}

/* ============================================
   CAGE HINT (Target + Operation Label)
   ============================================ */
.cage-label,
.cage-hint {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--calcudoku-hint-text);
    pointer-events: none;
    z-index: 3;
}

/* Smaller hints on larger grids */
#puzzle-grid[style*="repeat(6"] .cage-label,
#puzzle-grid[style*="repeat(6"] .cage-hint {
    font-size: 9px;
    top: 1px;
    left: 2px;
}

#puzzle-grid[style*="repeat(9"] .cage-label,
#puzzle-grid[style*="repeat(9"] .cage-hint {
    font-size: 8px;
    top: 1px;
    left: 2px;
}

/* ============================================
   CORRECT STATE (green)
   ============================================ */
.calcudoku-cell.correct .cell-value {
    color: var(--calcudoku-correct) !important;
}

.calcudoku-cell.correct {
    background-color: rgba(5, 150, 105, 0.15) !important;
}

.dark .calcudoku-cell.correct {
    background-color: rgba(52, 211, 153, 0.2) !important;
}

/* ============================================
   INCORRECT STATE (red + shake animation)
   ============================================ */
.calcudoku-cell.incorrect .cell-value {
    color: var(--calcudoku-incorrect) !important;
}

.calcudoku-cell.incorrect {
    background-color: rgba(220, 38, 38, 0.15) !important;
    animation: cellShake 0.4s ease-in-out;
}

.dark .calcudoku-cell.incorrect {
    background-color: rgba(248, 113, 113, 0.2) !important;
}

@keyframes cellShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

/* ============================================
   HINTED STATE (teal)
   ============================================ */
.calcudoku-cell.hinted .cell-value {
    color: #0d9488 !important;
}

.dark .calcudoku-cell.hinted .cell-value {
    color: #2dd4bf !important;
}

/* ============================================
   SUCCESS STATE (puzzle complete)
   ============================================ */
.calcudoku-cell.success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    animation: cellSuccess 0.6s ease-out;
}

.dark .calcudoku-cell.success {
    background-color: rgba(52, 211, 153, 0.25) !important;
}

@keyframes cellSuccess {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* ============================================
   NUMBER PAD (Touch-friendly)
   ============================================ */
#number-pad {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.numpad-btn {
    min-width: 40px;
    min-height: 48px;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 0.5rem;
    background-color: #e5e7eb;
    color: #1f2937;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dark .numpad-btn {
    background-color: #374151;
    color: #f9fafb;
}

.numpad-btn:hover {
    background-color: #d1d5db;
    transform: translateY(-1px);
}

.dark .numpad-btn:hover {
    background-color: #4b5563;
}

.numpad-btn:active {
    transform: scale(0.95);
    background-color: #9ca3af;
}

.dark .numpad-btn:active {
    background-color: #6b7280;
}

/* Clear/Delete button styling */
.numpad-btn.clear-btn {
    background-color: #fecaca;
    color: #991b1b;
}

.dark .numpad-btn.clear-btn {
    background-color: #7f1d1d;
    color: #fecaca;
}

/* ============================================
   GAME BUTTONS (New Game, Check, Hint)
   ============================================ */
#new-game,
#check-btn,
#hint-btn {
    min-height: 44px;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

#new-game:hover,
#check-btn:hover,
#hint-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#new-game:active,
#check-btn:active,
#hint-btn:active {
    transform: scale(0.98);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.calcudoku-toast {
    animation: toastSlideUp 0.3s ease-out;
    font-weight: 500;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ============================================
   FAQ SECTION
   ============================================ */
#calcudoku-faq h2 {
    color: var(--calcudoku-text);
}

#calcudoku-faq h3 {
    color: #374151;
}

.dark #calcudoku-faq h3 {
    color: #f3f4f6;
}

#calcudoku-faq p {
    color: #6b7280;
}

.dark #calcudoku-faq p {
    color: #9ca3af;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Smaller screens */
@media (max-width: 400px) {
    #calcudoku-grid {
        max-width: 300px;
    }

    .cage-label,
    .cage-hint {
        font-size: 8px;
    }

    .cell-value {
        font-size: 1.25rem;
    }

    #puzzle-grid[style*="repeat(6"] .cell-value {
        font-size: 1rem;
    }

    #puzzle-grid[style*="repeat(9"] .cell-value {
        font-size: 0.875rem;
    }

    .numpad-btn {
        min-width: 32px;
        min-height: 42px;
        font-size: 1.1rem;
    }
}

/* Very small screens */
@media (max-width: 320px) {
    #calcudoku-grid {
        max-width: 260px;
    }

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

    .numpad-btn {
        min-width: 28px;
        min-height: 38px;
        font-size: 1rem;
    }
}

/* Tablet and up - slightly fade numpad (keyboard available) */
@media (min-width: 768px) {
    #number-pad {
        opacity: 0.85;
        transition: opacity 0.2s ease;
    }

    #number-pad:hover,
    #number-pad:focus-within {
        opacity: 1;
    }
}

/* Large desktop */
@media (min-width: 1024px) {
    #calcudoku-grid {
        max-width: 400px;
    }

    .cell-value {
        font-size: 1.75rem;
    }

    #puzzle-grid[style*="repeat(6"] .cell-value {
        font-size: 1.5rem;
    }

    #puzzle-grid[style*="repeat(9"] .cell-value {
        font-size: 1.125rem;
    }

    .cage-label,
    .cage-hint {
        font-size: 11px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.calcudoku-cell:focus {
    outline: 3px solid var(--calcudoku-selected);
    outline-offset: -3px;
}

.numpad-btn:focus {
    outline: 2px solid var(--calcudoku-selected);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .calcudoku-cell,
    .numpad-btn,
    #new-game,
    #check-btn,
    #hint-btn {
        transition: none;
    }

    .calcudoku-cell.incorrect {
        animation: none;
    }

    .calcudoku-cell.success {
        animation: none;
    }

    .calcudoku-toast {
        animation: none;
    }
}