:root {
    --yellow: #FFD93D;
    --blue: #4D77FF;
    --red: #FF4D4D;
    --green: #4DFF88;
    --white: #FFFFFF;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Comic Neue', cursive;
    background-color: var(--white);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-container {
    width: 100%;
    max-width: 800px;
    min-height: 100vh;
    padding: 20px;
    position: relative;
}

.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
}

.screen.active {
    display: flex;
}

/* Level Selection Screen Specific Styles */
#level-select-screen {
    /* display: none; Already handled by .screen */
    /* flex-direction: column; Already handled by .screen */
    /* align-items: center; Already handled by .screen */
    /* justify-content: center; Already handled by .screen */
}

/* .level-select-screen.active is handled by .screen.active */

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Creates responsive columns */
    gap: 15px; /* Increased gap for better spacing */
    width: 100%;
    max-width: 400px; /* Max width for the grid, can be adjusted */
    margin: 20px 0; /* Margin above and below the grid */
    padding: 10px; /* Padding inside the grid container */
    background-color: rgba(0, 0, 0, 0.05); /* Subtle background for the grid area */
    border-radius: 8px; /* Rounded corners for the grid container */
}

.level-button {
    padding: 15px 10px; /* Vertical and horizontal padding */
    border: 2px solid var(--blue); /* Using theme color for border */
    border-radius: 8px; /* Rounded corners for buttons */
    text-align: center;
    font-size: 1.2em; /* Font size for level number */
    font-weight: bold;
    color: var(--blue); /* Text color */
    background-color: var(--white); /* Background color */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.level-button:hover:not(:disabled), .level-button:focus:not(:disabled) {
    background-color: var(--yellow); /* Hover effect using theme color */
    color: var(--blue);
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Enhanced shadow on hover/focus */
}

.level-button:focus:not(:disabled) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.level-button:disabled {
    opacity: 0.7; /* Make disabled buttons look faded */
}

.level-locked {
    background-color: #ccc; /* Grey background */
    color: #888; /* Darker grey text */
    border-color: #bbb; /* Lighter grey border */
    cursor: not-allowed; /* Indicates non-interactive */
}
.level-locked:focus { /* No specific focus style for locked, or very subtle if needed */
    outline: none;
}


.level-unlocked {
    background-color: var(--yellow); /* Yellow background from theme */
    color: var(--blue); /* Text color ensuring contrast */
    border-color: #fbc02d; /* Slightly darker yellow for border */
}
.level-unlocked:hover:not(:disabled), .level-unlocked:focus:not(:disabled) {
    background-color: #fdd835; /* Slightly darker yellow on hover */
}

.level-passed {
    background-color: var(--green); /* Green background from theme */
    color: var(--white); /* White text for contrast */
    border-color: #388e3c; /* Slightly darker green for border */
}
.level-passed:hover:not(:disabled), .level-passed:focus:not(:disabled) {
    background-color: #43a047; /* Slightly darker green on hover */
}

.level-passed-difficult { 
    background-color: var(--red); /* Red background from theme */
    color: var(--white); /* White text */
    border-color: #d32f2f; /* Slightly darker red for border */
}
.level-passed-difficult:hover:not(:disabled), .level-passed-difficult:focus:not(:disabled) {
    background-color: #e53935; /* Slightly darker red on hover */
}

/* Legal Notice Screen Specific Styles */
#legal-notice-screen {
    /* display: none; Already handled by .screen */
    /* flex-direction: column; Already handled by .screen */
    /* align-items: center; Already handled by .screen */
    /* justify-content: center; Handled by .screen, but content needs specific alignment */
    padding-top: 60px; /* Add padding to push content down from top */
    padding-bottom: 60px; /* Add padding at the bottom */
}

#legal-text-content {
    text-align: left;
    margin: 20px; /* Consistent margin */
    max-width: 700px; /* Max width for readability */
    width: 90%; /* Responsive width */
    margin-left: auto;
    margin-right: auto;
    white-space: pre-line; /* Respects newlines in the text */
    line-height: 1.6; /* Improved line spacing */
    font-size: 16px; /* Standard text size */
    color: #333; /* Dark grey for text, good for reading */
    overflow-y: auto; /* Allow scrolling if content is too long */
    max-height: calc(100vh - 200px); /* Max height to prevent overflow, adjust 200px based on header/footer/button */
    background-color: #f9f9f9; /* Light background for the text area */
    padding: 20px; /* Padding within the text box */
    border-radius: 8px; /* Rounded corners for the text box */
    border: 1px solid #eee; /* Subtle border */
}

/* Visual Sudoku Game Styles */
.sudoku-grid {
    display: grid;
    /* gridSize will be set via JS, e.g., grid-template-columns: repeat(4, 1fr); */
    /* For a 4x4 grid, a fixed size might be good for consistency */
    width: 240px; /* Example: 4 cells * 60px */
    height: 240px; /* Example: 4 cells * 60px */
    border: 3px solid var(--blue); /* Thicker border for the whole grid */
    border-radius: 8px; /* Rounded corners for the grid */
    margin: 20px auto; /* Center the grid */
    background-color: var(--white);
    box-shadow: var(--shadow);
    padding: 2px; /* Small padding so cell borders don't overlap grid border visually */
}

.sudoku-cell {
    border: 1px solid var(--blue); /* Lighter border for individual cells */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em; /* Larger font for emojis */
    cursor: pointer;
    user-select: none; /* Prevent text selection on click/drag */
    transition: background-color 0.2s;
}

/* Adding thicker borders for 2x2 blocks in a 4x4 grid */
/* For a 4x4 grid, this means after the 2nd row and 2nd column */
.sudoku-cell:nth-child(4n + 1) { /* First cell in each row */
    /* border-left: 2px solid var(--blue); */ /* This would be for the outer border */
}
.sudoku-cell:nth-child(n+5):nth-child(-n+8), /* Cells in 2nd row */
.sudoku-cell:nth-child(n+13):nth-child(-n+16) { /* Cells in 4th row */
    /* No specific top border needed if using grid lines */
} 
/* Thicker line after 2nd column */
.sudoku-cell:nth-child(2),
.sudoku-cell:nth-child(4n + 2) { /* All cells in the 2nd column */
   /* border-right: 2px solid var(--blue); */ /* This is tricky with just nth-child, better with JS or specific classes if complex */
}
/* Simpler approach: define block borders using pseudo-elements or JS-added classes if very complex.
   For 4x4, manual classes or careful nth-child might work.
   Let's rely on cell borders and the main grid border primarily for now,
   and add specific block borders if the visual isn't clear enough.
   The following will target cells to create thicker right/bottom borders for 2x2 blocks.
*/
.sudoku-cell:nth-child(2), 
.sudoku-cell:nth-child(6), 
.sudoku-cell:nth-child(10), 
.sudoku-cell:nth-child(14) { /* End of 2nd cell in each row (for 4x4) */
    border-right-width: 2px;
    border-right-color: var(--blue);
}
.sudoku-cell:nth-child(n+5):nth-child(-n+8), /* Cells in 2nd row */
.sudoku-cell:nth-child(n+13):nth-child(-n+16) { /* Cells in 4th row */
    /* This selector is for rows. We need bottom border for 2nd row's cells */
}
/* Bottom border for cells in the 2nd row (index 4 to 7 for 0-indexed grid in JS) */
.sudoku-cell:nth-child(5), /* cell at (1,0) */
.sudoku-cell:nth-child(6), /* cell at (1,1) */
.sudoku-cell:nth-child(7), /* cell at (1,2) */
.sudoku-cell:nth-child(8) { /* cell at (1,3) */
    border-bottom-width: 2px;
    border-bottom-color: var(--blue);
}


.sudoku-cell.prefilled {
    background-color: #e0e0e0; /* Light grey for prefilled cells */
    cursor: default;
    font-weight: bold;
    color: #333; /* Darker text for prefilled */
}

.sudoku-cell.fillable:hover {
    background-color: var(--yellow); /* Highlight on hover for fillable cells */
}

#check-sudoku-button {
    margin-top: 20px; /* Space above the button */
    padding: 15px 30px; /* Make it prominent */
    width: auto; /* Auto width based on content */
    min-height: 0; /* Override if needed from general button styles */
}

/* Assembly Puzzle Game Styles */
.target-display-assembly {
    font-size: 1.8em; /* Larger to show the context clearly */
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--blue); /* Using theme blue color */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.03); /* Very subtle background */
    border-radius: 6px;
    display: inline-block; /* To fit content width */
}


h1 {
    font-size: 48px;
    color: var(--blue);
    margin-bottom: 10px;
}

h2 {
    font-size: 32px;
    color: var(--red);
    margin-bottom: 30px;
}

.button-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 300px;
}

.main-button, .secondary-button {
    font-family: 'Comic Neue', cursive;
    font-size: 24px;
    padding: 15px 30px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.2s;
    width: 100%;
    min-height: 100px;
}

.main-button {
    background-color: var(--yellow);
    color: var(--blue);
    box-shadow: var(--shadow);
}

.secondary-button {
    background-color: var(--blue);
    color: var(--white);
    box-shadow: var(--shadow);
}

.main-button:hover, .main-button:focus,
.secondary-button:hover, .secondary-button:focus {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover/focus */
}

.main-button:focus, .secondary-button:focus {
    outline: 2px solid var(--yellow); /* Focus outline for main buttons */
    outline-offset: 3px;
}
.secondary-button:focus {
    outline-color: var(--white); /* Different focus for secondary if needed, or keep same */
}


.game-header {
    width: 100%;
    margin-bottom: 30px;
    display: flex; /* For aligning progress bar and counter */
    flex-direction: column;
    align-items: center;
}

.progress-bar-container { /* Renamed from .progress-bar */
    width: 80%; /* Max width for progress bar */
    max-width: 400px;
    height: 25px; /* Slightly taller */
    background-color: #e0e0e0; /* Light grey background for the container */
    border-radius: 8px; /* Rounded corners for container */
    padding: 4px; /* Padding around the fill element */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Inner shadow for depth */
    margin-bottom: 10px; /* Space below progress bar */
}

.progress-fill {
    height: 100%;
    background-color: var(--blue); /* Using theme blue for progress */
    width: 0%;
    border-radius: 5px; /* Rounded corners for the fill itself */
    transition: width 0.5s ease-in-out; /* Smoother transition */
    box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset, 0 -1px 1px rgba(0,0,0,0.1) inset; /* Subtle 3D effect */
}

.game-counter {
    font-size: 20px; /* Slightly smaller font */
    color: #555; /* Darker grey for better readability */
    background-color: #f0f0f0; /* Subtle background */
    padding: 6px 12px; /* Padding around text */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow */
    font-weight: bold;
}

.game-content {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

#game-question {
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--blue);
}

.options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.option-button {
    font-family: 'Comic Neue', cursive;
    font-size: 24px;
    padding: 20px;
    border: 3px solid var(--blue);
    border-radius: 15px;
    background-color: var(--white);
    cursor: pointer;
    transition: all 0.2s;
}

.option-button:hover:not(:disabled) {
    background-color: var(--yellow);
    transform: scale(1.05);
    border-color: #fbc02d; /* Darker yellow border on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.option-button:focus:not(:disabled) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-color: var(--blue); /* Ensure border matches focus outline */
}

.option-button:disabled {
    cursor: default; /* Change cursor for disabled buttons */
    opacity: 0.6;
}

/* Visual feedback styles for option buttons */
.option-selected {
    border-color: var(--blue) !important; /* Prominent blue border when selected */
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--blue); /* Glow effect */
}

.option-correct {
    background-color: var(--green) !important; /* Use !important if needed to override base styles */
    color: var(--white) !important;
    border-color: #388e3c !important; /* Darker green border */
    transform: scale(1.02); /* Slight scale to emphasize */
}

.option-incorrect {
    background-color: var(--red) !important;
    color: var(--white) !important;
    border-color: #d32f2f !important; /* Darker red border */
    transform: scale(1.02);
    animation: shake 0.5s; /* Shake animation for incorrect answer */
}

/* Shake animation (optional) */
@keyframes shake {
    0%, 100% { transform: translateX(0) scale(1.02); }
    25% { transform: translateX(-5px) scale(1.02); }
    50% { transform: translateX(5px) scale(1.02); }
    75% { transform: translateX(-5px) scale(1.02); }
}


.feedback {
    font-size: 32px;
    margin-top: 20px;
    min-height: 50px;
}

#progress-stats {
    width: 100%;
    max-width: 600px;
    margin: 20px 0;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 15px;
    font-size: 24px;
}

.logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    h1 {
        font-size: 36px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    .main-button, .secondary-button {
        font-size: 20px;
        min-height: 80px;
    }
    
    #game-question {
        font-size: 24px;
    }
    
    .option-button {
        font-size: 20px;
        padding: 15px;
    }
    
    .logo {
        max-width: 150px;
    }
}