/* ==========================================================================
   SUDOKU SHIELD RESET (Protects game from global flexexp.css & text.css)
   ========================================================================== */
 
/* Target the cells and everything inside them directly by class */
.sudoku-cell,
.sudoku-cell * {
    box-sizing: border-box !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}
 
/* Force spans inside the cells to completely ignore absolute positioning from .eframe */
.sudoku-cell span {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    text-align: center !important;
    height: auto !important;
    width: auto !important;
    position: static !important; /* Completely neutralizes absolute positioning */
    left: auto !important;
    bottom: auto !important;
}
 
/* Force the cell layout */
.sudoku-cell {
    display: grid !important;
    grid-template-areas: "overlay" !important;
    position: relative !important;
}
 
/* Force the large numbers to center and stack perfectly */
.cell-value {
    grid-area: overlay !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
 
/* Force the pencil marks grid to stack perfectly */
.candidates-grid {
    grid-area: overlay !important;
    display: grid !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
/* Sudoku Game Wrapper */
#sudoku-app {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    font-family: Arial, sans-serif !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
 
/* Difficulty Selector Buttons */
.difficulty-selector {
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}
.difficulty-selector button {
    background-color: #272763 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background 0.2s !important;
    width: auto !important;
}
.difficulty-selector button:hover, .difficulty-selector button.active {
    background-color: #637DFF !important;
}
 
/* Force the 9x9 Grid Layout */
#sudoku-grid {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    grid-template-rows: repeat(9, 1fr) !important;
    gap: 1px !important;
    background-color: #1C1D3D !important; /* Border color between cells */
    border: 3px solid #1C1D3D !important; /* Outer border */
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto 15px auto !important;
    box-sizing: border-box !important;
}
 
/* Individual Cell Styling - Forced to be a self-contained container */
.sudoku-cell {
    background-color: #FFFFFF !important;
    display: grid !important;
    grid-template-areas: "overlay" !important; /* Creates a single overlapping zone */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    user-select: none !important;
    position: relative !important;
}
 
/* Main Large Number Styling - Forced to stay inside the overlapping zone */
.cell-value {
    grid-area: overlay !important; /* Force it into the overlap zone */
    font-size: 24px !important;
    font-weight: bold !important;
    color: #272763 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
/* Candidates Grid - Also forced into the exact same overlapping zone */
.candidates-grid {
    grid-area: overlay !important; /* Force it into the exact same overlap zone */
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
 
/* Highlight 3x3 Subgrids (Thick Borders) */
.sudoku-cell:nth-child(3n) {
    border-right: 2px solid #1C1D3D !important;
}
.sudoku-cell:nth-child(9n) {
    border-right: none !important;
}
 
/* Horizontal thick borders */
#sudoku-grid > div:nth-child(n+19):nth-child(-n+27),
#sudoku-grid > div:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 2px solid #1C1D3D !important;
}
 
/* Highlight original/starting numbers */
.sudoku-cell.original {
    background-color: #DEE1FC !important;
}
.sudoku-cell.original .cell-value {
    color: #1C1D3D !important;
}
 
/* Selection and Error States */
.sudoku-cell:focus, .sudoku-cell:active {
    background-color: #e2e6ff !important;
}
.sudoku-cell.wrong {
    background-color: #ffe3e3 !important;
}
.sudoku-cell.wrong .cell-value {
    color: #FF0000 !important;
}
 
/* --- CANDIDATES / PENCIL MARKS STYLING --- */
.candidate-num {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    color: #7777aa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important; /* Hidden by default */
}
 
/* Show only active candidates */
.candidate-num.active {
    opacity: 1 !important;
}
 
/* Control Container (Timer + Buttons) */
#container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
}
#timer {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #1C1D3D !important;
}
#startStopButton, #checkButton {
    font-size: 16px !important;
    padding: 5px 12px !important;
    background-color: #4A4C87 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: auto !important;
}
#startStopButton:hover, #checkButton:hover {
    background-color: #272763 !important;
}