body {
    /* Fun "Comic" font fallback, bright background */
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #48dbfb; /* Bright Sky Blue */
    margin: 0;
    padding: 20px 0;
    min-height: 100vh;
}
.container {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 900px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}
h1 { color: #333; margin: 0 0 20px 0; font-size: 24px; }
.copyright { font-size: 12px; color: #7f8c8d; margin-top: 24px; text-align: center; }
.copyright a { color: #7f8c8d; text-decoration: none; }
.copyright a:hover { text-decoration: underline; }

/* General Button Style */
.nav button,
.nav a {
    display: inline-block;
    padding: 12px 24px;
    margin: 0 8px;
    cursor: pointer;
    border: none;
    border-radius: 50px; /* Pill shape */
    font-size: 18px;
    font-weight: bold;
    color: white;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2); /* 3D effect */
    transition: transform 0.1s;
    text-decoration: none;
    font-family: inherit;
}

.nav a:hover {
    color: white;
}

.nav button:active,
.nav a:active {
    transform: translateY(4px); /* Push down effect */
    box-shadow: none;
}

/* Specific Colors - practice nav uses buttons */
.nav button:nth-child(1) { background-color: #ff6b6b; } /* Pastel Red */
.nav button:nth-child(2) { background-color: #1dd1a1; } /* Pastel Green */
.nav button:nth-child(3) { background-color: #feca57; color: #333; } /* Pastel Yellow */

/* Games Nav Colors - Different colors */
.games-nav a:nth-child(1) { background-color: #9b59b6; } /* Purple */
.games-nav a:nth-child(2) { background-color: #3498db; } /* Blue */
.games-nav a:nth-child(3) { background-color: #e67e22; } /* Orange */

/* --- COMBO METER --- */
#combo-meter {
    position: absolute;
    /* Move it outside the container into the gray margin */
    top: 10px;
    right: -140px;

    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 10;

    /* The "Fun" Tilt */
    transform: rotate(15deg);
}
#combo-label {
    font-size: 16px;
    font-weight: bold;
    /* Changed from #888 to White with shadow */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);

    letter-spacing: 1px;
    text-transform: uppercase;
}

#combo-count {
    font-size: 90px; /* Increased from 48px */
    font-weight: 900;
    color: #333;
    line-height: 1;
    transition: color 0.2s;
}
/* Combo Milestones */
#combo-count.heat-1 { color: #f39c12; }
#combo-count.heat-2 { color: #e74c3c; text-shadow: 2px 2px 0px #c0392b; }
#combo-count.heat-3 { color: #9b59b6; text-shadow: 3px 3px 0px #8e44ad; }

/* Animation: Pop (On Hit) */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.combo-pop { animation: pop 0.1s ease-out; }

/* --- FALLING GHOST (The broken combo number) --- */
.combo-ghost {
    position: absolute;
    /* Adjusted top slightly to match the new size's baseline */
    top: 40px;
    right: -130px;

    /* MATCH THIS TO #combo-count SIZE */
    font-size: 90px;

    font-weight: 900;
    color: #95a5a6;
    pointer-events: none;
    z-index: 20;
    line-height: 1;

    animation: fall-off 1s ease-in forwards; /* Increased duration slightly */
}

@keyframes fall-off {
    0% { transform: translateY(0) rotate(15deg); opacity: 1; }
    /* Change 150px to 1000px so it drops off the screen */
    100% { transform: translateY(1000px) rotate(45deg); opacity: 0; }
}


/* --- RACER --- */
#racer-lane {
    width: 100%;
    height: 40px;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
    display: none;
}
#racer-car {
    position: absolute;
    left: 0;
    bottom: -5px;
    font-size: 35px;
    transition: left 0.2s ease-out;
    z-index: 2;
    transform: scaleX(-1);
}
#racer-flag {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 25px;
    opacity: 0.5;
}
#racer-fire {
    position: absolute;
    left: 35px;
    bottom: 8px;
    font-size: 24px;
    opacity: 0;
    transform: rotate(90deg);
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
    pointer-events: none;
    z-index: -1;
}
#racer-fire.visible {
    opacity: 1;
    transform: rotate(90deg) scale(1.3);
}

#display-area {
    font-size: 32px;
    margin: 20px 0;
    min-height: 120px;
    line-height: 1.6;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;

    background-color: #ffffff;
    border: 4px dashed #54a0ff;
    color: #333;
    padding: 30px;
    border-radius: 15px;
    cursor: text;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.1);

    /* --- NEW WRAPPING LOGIC --- */
    display: flex;            /* Use Flexbox */
    flex-wrap: wrap;          /* Allow items to drop to next line */
    align-items: baseline;    /* Keep text aligned */
    row-gap: 15px;            /* Spacing between wrapped lines */
}

/* Make untyped text darker (easier to read) */
.char {
    color: #999; /* Was #ccc, made darker for contrast */
    position: relative;
    display: inline-block;
    min-width: 1ch;
    white-space: pre;
    border-bottom: 2px solid transparent; /* Keeps spacing consistent */
}
/* Ensure correctly typed letters are dark and distinct */
.char.correct {
    color: #000000 !important;
    opacity: 1;
}

/* Highlight the current character with an underline instead of a block */
.char.current {
    background-color: transparent;
    color: #333;
    border-bottom: 4px solid #ff9ff3; /* Pink underline */
    border-radius: 0;
}

/* RESTORED: Standard Shake for Letters */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
.char.wrong {
    color: #e74c3c !important;
    animation: shake 0.3s ease-in-out;
}

/* Stats Box */
.stats-box { display: flex; justify-content: center; gap: 20px; margin-top: 15px; }
.stat-item {
    background: #f8f9fa;
    border: 2px solid #ddd; /* Slightly thicker border */
    padding: 15px;
    border-radius: 12px;
    min-width: 100px; /* A bit wider */

    /* Force Centering */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Horizontally center items */
    justify-content: center; /* Vertically center items */
}
.stat-label {
    font-size: 14px;
    color: #7f8c8d;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;

    /* Force text centering */
    width: 100%;
    text-align: center;
}
.stat-value {
    font-size: 28px;
    font-weight: 900;
    color: #2c3e50;

    /* Force text centering */
    width: 100%;
    text-align: center;
}

/* --- FINGER GUIDE --- */
#finger-guide-wrapper {
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
#finger-guide {
    background-color: #343a40;
    color: #fff;
    padding: 8px 24px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s;
}
#finger-guide.visible { opacity: 1; }

/* --- KEYBOARD --- */
.keyboard {
    user-select: none;
    background: #e9ecef;
    padding: 15px;
    border-radius: 10px;
    display: none;
    box-shadow: 0 4px 0 #cfd2d6;
}
.row { display: flex; justify-content: center; margin-bottom: 5px; }
.key {
    height: 45px;
    width: 45px;
    margin: 3px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #555;
    background: white;
    box-shadow: 0 2px 0 rgba(0,0,0,0.1);
    transition: all 0.1s;
}
.key.space { width: 300px; }
.key.shift { width: 100px; }
.key.tab { width: 70px; }
.key.enter { width: 90px; }
.key.caps { width: 80px; }
.key.back { width: 80px; }

.f-pinky { background-color: #ffadad; border-bottom: 3px solid #e09494; }
.f-ring { background-color: #ffd6a5; border-bottom: 3px solid #e0bb8f; }
.f-middle { background-color: #fdffb6; border-bottom: 3px solid #dfe09f; }
.f-index { background-color: #caffbf; border-bottom: 3px solid #b0e0a6; }
.f-thumb { background-color: #a0c4ff; border-bottom: 3px solid #8baadd; }

.key.active {
    background-color: #007bff;
    color: white;
    border-bottom: 3px solid #0056b3;
    transform: translateY(2px);
    box-shadow: none;
}

/* Add this to control spacing specifically for 'Practice Letters' mode */
#display-area.mode-letters .char {
    margin: 0 35px;   /* Adds big gaps between letters */
    font-size: 48px;  /* Makes them larger */
}

/* Back button - shown only during typing activity, over the blue area */
#back-btn {
    display: none;
    position: absolute;
    top: 1rem;
    left: -155px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    z-index: 5;
    transition: transform 0.1s, box-shadow 0.2s;
}
#back-btn:hover {
    background: linear-gradient(135deg, #ff8787 0%, #ff6b6b 100%);
    box-shadow: 0 5px 16px rgba(255, 107, 107, 0.5);
}
#back-btn:active { transform: translateY(2px); box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4); }