body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Navigation Bar */
#main-nav {
    background-color: #f0f0f0;
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

.nav-btn {
    background-color: #ffffff;
    border: 2px solid #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    transition: all 0.2s;
    text-decoration: none; /* Added for <a> tags */
    display: inline-block;
}

.nav-btn:hover {
    background-color: #eef;
    border-color: #bbf;
}

.nav-btn.active {
    background-color: #4CAF50;
    color: white;
    border-color: #45a049;
}

/* Game Container */
#app {
    flex: 1;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Alphabet Game Specifics */
.alphabet-display {
    font-size: 20rem;
    font-weight: bold;
    color: #333;
    transition: transform 0.1s ease-in-out;
}

.alphabet-display:active {
    transform: scale(0.95);
}

/* Welcome Page Styles */
.welcome-container {
    flex-direction: column;
    text-align: center;
    background-color: #f9f9f9;
}

.game-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.game-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    width: 200px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.game-card h2 {
    margin-top: 0;
    color: #4CAF50;
}

.game-card p {
    color: #666;
}

/* Missing Number Game */
.missing-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 800px;
}

.game-header {
    text-align: center;
}

.number-strip {
    display: flex;
    gap: 10px;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.number-box {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 5px;
}

.number-box.empty {
    background: #e3f2fd;
    border-style: dashed;
    border-color: #2196F3;
    color: #2196F3;
}

.number-box.highlight-wrong {
    background: #e1bee7; /* Light purple */
    border-color: #9c27b0;
    transform: scale(1.1);
    z-index: 5;
    transition: transform 0.2s, background-color 0.2s;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.keypad-btn {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    border: none;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 0 #ddd;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.keypad-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.filled-anim {
    animation: popIn 0.3s ease-out;
    background: #c8e6c9; /* Success green */
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.celebration-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: #4CAF50;
    text-shadow: 2px 2px white;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    pointer-events: none;
}

/* Junior Sudoku */
.junior-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.sudoku-grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 4px solid #333;
    background: #333;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sudoku-cell {
    width: 70px;
    height: 70px;
    background: white;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Thick borders for 2x2 regions */
/* Vertical divider after 2nd column */
.sudoku-cell:nth-child(2), 
.sudoku-cell:nth-child(6), 
.sudoku-cell:nth-child(10), 
.sudoku-cell:nth-child(14) {
    border-right: 3px solid #333;
}

/* Horizontal divider after 2nd row (cells 5-8 are 2nd row... wait grid is flat list of 16) */
/* Row 1: 1-4. Row 2: 5-8. Border after 8. */
.sudoku-cell:nth-child(n+5):nth-child(-n+8) {
    border-bottom: 3px solid #333;
}

.sudoku-cell.fixed {
    color: #000;
    font-weight: bold;
    background-color: #f5f5f5;
}

.sudoku-cell.user-filled {
    color: #1976D2;
}

.sudoku-cell.selected {
    background-color: #BBDEFB; /* Light Blue */
}

.sudoku-cell.highlight-match {
    background-color: #E1BEE7; /* Light Purple for scanning help */
}

/* If selected AND highlighted, blend? CSS order matters, last wins usually */
.sudoku-cell.selected.highlight-match {
    background-color: #CE93D8; 
}

.junior-keypad {
    display: flex;
    gap: 15px;
}

.active-number {
    background-color: #E1BEE7 !important;
    border-color: #9C27B0 !important;
    transform: scale(1.1);
}

.game-controls {
    margin-top: 20px;
}

.game-controls-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

/* Laser Focus */
.laser-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.target-num-display {
    color: #e91e63;
    font-weight: bold;
    font-size: 1.2em;
}

.sudoku-grid-9x9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0;
    border: 4px solid #333;
    background: #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Reusing generic cell but adding states */
/* 9x9 specific borders */
.sudoku-grid-9x9 .sudoku-cell {
    width: 40px; /* Smaller for 9x9 */
    height: 40px;
    font-size: 1.2rem;
}

/* 3x3 region borders for 9x9 */
.sudoku-grid-9x9 .sudoku-cell:nth-child(3n) {
    border-right: 2px solid #333;
}
.sudoku-grid-9x9 .sudoku-cell:nth-child(9n) {
    border-right: none; /* Edge case */
}
/* Horizontal */
/* Row 1-8. Bottom border on 3, 6 */
/* This is harder with nth-child on flat grid. 
   Grid is 81 cells. 
   Rows 3 (19-27) and 6 (46-54) need bottom border.
*/
.sudoku-grid-9x9 .sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-grid-9x9 .sudoku-cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 2px solid #333;
}

/* Laser States */
.target-box-cell {
    background: #fff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px #2196F3; /* Subtle blue highlight for the target box */
}

/* The actual source number causing the laser */
.source-cell {
    background: #fff9c4 !important; /* Pale Yellow */
    color: black !important;
    font-weight: bold;
    cursor: crosshair; /* Indicates "targeting" */
    transition: background 0.2s;
}

.source-cell:hover {
    background: #ffeb3b !important; /* Brighter Yellow */
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.tainted-cell {
    background-color: #ffcdd2 !important; /* Red tint */
    position: relative;
}

/* Optional: Add a line through tainted cells? */
.tainted-cell::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(244, 67, 54, 0.3); /* Red line */
    pointer-events: none;
}

/* Grid Detective */
.detective-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.detective-header {
    text-align: center;
}

.target-num-highlight {
    color: #2e7d32;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: underline;
}

.found-success {
    background-color: #c8e6c9 !important; /* Green */
    color: #1b5e20;
    font-weight: bold;
    animation: popIn 0.3s ease-out;
}