html, body {
    margin: 0;
    padding: 0;
}

body {
    /* 2. CHANGE THIS: Set 'Comic Neue' as the main font */
    font-family: 'Comic Neue', sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    /* Add a smooth transition for the background color */
    transition: background-color 0.3s;
}

h1 {
    font-size: 2.2em;
    margin: 15px 0;
    font-weight: 700; /* Use the bold weight of Comic Neue */
}

/* --- Color Palette Styles --- */
#color-palette {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    gap: 10px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

/* --- NEW: Alphabet Prompt Style --- */
#alphabet-prompt {
    display: none; /* Hidden by default */
    font-size: 2em;
    font-weight: 700;
    color: #333;
    margin: 10px 0;
}


/* --- Alphabet Grid Styles --- */
#alphabet-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 10px;
    max-width: 95%;
    margin: 10px auto;
    touch-action: none;
    box-sizing: border-box;
}

.letter-box {
    background-color: #ffffff;
    border: 3px solid #cccccc;

    /* 3. CHANGE THIS: This creates the "squircle" shape */
    border-radius: 25px;

    padding: 15px 0;
    font-size: 2.5em;
    font-weight: 700; /* Use the bold weight */
    color: #333;
    cursor: pointer;
    user-select: none;

    /* This transition animates the FINAL state (the color and JS-applied scale) */
    transition: background-color 0.2s, transform 0.2s ease-out;
}

/* 4. ADD THIS: The new "push-in" effect for immediate feedback */
.letter-box:active {
    /* Make it pop bigger, instantly */
    transform: scale(1.1);

    /* Add a white "glow" effect */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);

    /* This transition makes the "push-in" fast */
    transition: transform 0.05s ease-in;

    /* Make sure the pressed letter pops on top of others */
    position: relative;
    z-index: 10;
}


/* --- Control Button Styles --- */
#controls-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.control-button {
    padding: 12px 25px;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 8px;
    border: none;
    color: white;
    font-family: 'Comic Neue', sans-serif; /* Make buttons use the font too */
    font-weight: 700;
}

/* MODIFIED: Renamed button */
#level-1-button {
    background-color: #007BFF;
}

#speech-toggle-button {
    background-color: #5cb85c;
}

#case-toggle-button {
    background-color: #f0ad4e; /* A friendly orange */
}

/* NEW: Style for Level 2 button */
#level-2-button {
    background-color: #dc3545; /* Red */
}


/* --- NEW: Level 2 Game Styles --- */

/* When level 2 is active, show the prompt */
.level-2-active #alphabet-prompt {
    display: block;
}

/* When level 2 is active, hide the color palette and other controls */
.level-2-active #color-palette,
.level-2-active #speech-toggle-button,
.level-2-active #case-toggle-button {
    display: none;
}

/* Reset letter boxes for Level 2 */
.level-2-active .letter-box {
    background-color: #ffffff;
    color: #333;
    border-color: #cccccc;
    transform: none;
}

/* Style for a correct guess */
.level-2-active .letter-box.correct {
    background-color: #4CAF50; /* Green */
    color: white;
    border-color: #4CAF50;
    transform: scale(1.1);
}

/* Style for a wrong guess */
.level-2-active .letter-box.wrong {
    background-color: #f44336; /* Red */
    color: white;
    border-color: #f44336;
    animation: shake 0.5s;
}

/* NEW: Shake animation (from Spelling game) */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}


/* ==============================================
   PHONE LANDSCAPE STYLES
  ============================================== */
@media (orientation: landscape) and (max-height: 500px) {

    h1 {
        font-size: 1.8em;
        margin: 10px 0;
    }
    
    /* NEW: Responsive prompt */
    #alphabet-prompt {
        font-size: 1.5em;
        margin: 5px 0;
    }

    #color-palette {
        margin-bottom: 10px;
        gap: 8px;
    }

    .color-swatch {
        width: 30px;
        height: 30px;
    }

    #alphabet-container {
        grid-template-columns: repeat(9, 1fr);
        gap: 5px;
        padding: 5px;
        margin: 5px auto;
    }

    .letter-box {
        font-size: 1.5em;
        padding: 10px 0;
        border-width: 2px;

        /* 5. CHANGE THIS: Use a smaller radius for the smaller boxes */
        border-radius: 15px;
    }

    #controls-container {
        margin-top: 10px;
        gap: 10px;
    }

    .control-button {
        padding: 10px 20px;
        font-size: 1em;
    }

    /* --- MODIFICATION --- */
    /* Added responsive style for the home button */
    .home-btn-subpage {
        top: 10px;
        left: 10px;
    }
    /* --- END MODIFICATION --- */
}

/* --- MODIFICATION --- */
/* Replaced .control-button-icon with the standard .home-btn-subpage */
.home-btn-subpage {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1.8em; /* Nice and large icon */
    color: #333;
    text-decoration: none;
    padding: 10px;
    z-index: 100;
    transition: transform 0.1s;
}

.home-btn-subpage:active {
    transform: scale(0.9);
}
/* --- END MODIFICATION --- */


/* ==============================================
   TABLET LANDSCAPE STYLES
  ============================================== */

/* This targets landscape devices with a height
   GREATER than 500px (i.e., tablets)
*/
@media (orientation: landscape) and (min-height: 501px) {

    h1 {
        font-size: 2em; /* Slightly smaller title */
        margin: 10px 0; /* Reduced margin */
    }

    #color-palette {
        margin-bottom: 10px;
    }

    #alphabet-container {
        grid-template-columns: repeat(9, 1fr); /* Use 9 columns */
        gap: 8px; /* Can keep gap a bit larger than phone */
        padding: 8px;
        margin: 10px auto;
    }

    .letter-box {
        font-size: 2em; /* Slightly smaller text */
        padding: 12px 0;
        border-radius: 20px;
    }

    #controls-container {
        margin-top: 10px; /* Reduced margin */
    }
}