/* Lilo & Stitch Color Palette */
:root {
    --stitch-blue: #4ebcff;
    --stitch-dark: #00458b;
    --lilo-red: #ed192d;
    --sand: #fef9e7;
    --purple: #945cb4;
}

body {
    font-family: 'Nunito', sans-serif;
    /* TROPICAL WALLPAPER BACKGROUND */
    background-image: url('https://i.pinimg.com/originals/c8/92/f2/c892f25b12da2d17478d389a09575916.jpg'); 
    background-size: 300px; /* Makes the pattern repeat nicely */
    background-repeat: repeat;
    color: #333;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 600px;
    text-align: center;
    /* Add a white backdrop so we can read text over the wallpaper */
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 5px solid var(--stitch-blue);
}

h1 {
    font-family: 'Fredoka One', cursive;
    color: white;
    text-shadow: 3px 3px 0px var(--stitch-dark);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border: 4px solid var(--stitch-dark);
}

.hidden { display: none; }

/* Inputs & Buttons */
input {
    padding: 15px;
    font-size: 1.2rem;
    border-radius: 10px;
    border: 2px solid var(--stitch-blue);
    margin: 5px;
    width: 70%;
    text-align: center;
    font-family: 'Fredoka One', cursive;
}

button {
    background-color: var(--lilo-red);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Fredoka One', cursive;
    transition: transform 0.1s;
}

button:active { transform: scale(0.95); }

/* NEW IMAGE STYLING */
.character-area {
    height: 150px; /* Keeps the layout from jumping when image changes */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#stitch-img {
    max-height: 100%;
    max-width: 100%;
    drop-shadow: 5px 5px 0px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

/* Make him wiggle when hovered */
#stitch-img:hover {
    transform: rotate(5deg) scale(1.1);
}

/* Game Area */
.stats-bar {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    color: var(--stitch-dark);
    margin-bottom: 20px;
}

#word-display {
    font-size: 3rem;
    font-weight: bold;
    color: var(--stitch-dark);
    margin: 20px 0;
    letter-spacing: 5px;
    min-height: 60px;
}

.bubble {
    background: var(--sand);
    padding: 10px;
    border-radius: 15px;
    display: inline-block;
    border: 2px dashed var(--lilo-red);
    font-style: italic;
    margin-bottom: 10px;
}

/* Progress Bar */
#progress-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 10px;
    height: 20px;
    margin-top: 20px;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    background-color: var(--lilo-red);
    width: 0%;
    transition: width 0.3s;
}

/* Leaderboard */
#score-list {
    list-style: none;
    padding: 0;
}
#score-list li {
    background: var(--sand);
    margin: 5px 0;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}