body {
    margin: 0;
    padding: 0;
    font-family: 'Chewy', cursive;
    background: linear-gradient(135deg, #A8DCEC, #E0F2F7, #FFE0B2);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    max-height: 100vh;
    color: #333;
    text-align: center;
}

/* Back */
.back-to-home-icon {
    position: absolute; top: 20px; left: 20px;
    color: #777; padding: 10px; border-radius: 50%;
    text-decoration: none; display: flex; justify-content: center; align-items: center;
    transition: all 0.2s ease-in-out; z-index: 101;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: rgba(255, 255, 255, 0.7);
}
.back-to-home-icon:hover { color: #555; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.back-to-home-icon:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.back-to-home-icon svg { width: 28px; height: 28px; fill: currentColor; }

/* Layout */
.app-container {
    display: flex; justify-content: center; align-items: center;
    width: 95%; max-width: 1200px; min-height: 100vh; max-height: 100vh;
    position: relative; padding: 20px; box-sizing: border-box;
}
.game-container {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 20px; max-width: 640px; width: 100%; box-sizing: border-box;
    border: 8px solid #FF8A80; position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex-grow: 1; margin: 0 20px;
}
.side-panels {
    display: flex; flex-direction: column; height: 100%; justify-content: flex-start; align-items: center;
    width: 160px; box-sizing: border-box; pointer-events: none; padding-top: 100px;
}
.letter-panel {
    width: 100%; font-family: 'Chewy', cursive; font-size: 1.2em; padding: 10px;
    background: rgba(255,255,255,0.9); border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center; pointer-events: auto; margin-bottom: 20px; min-height: 150px; overflow-y: auto; border: 3px solid;
}
.letter-panel h4 { margin: 0 0 10px 0; font-family: 'Gochi Hand', cursive; font-size: 1.1em; }
.red-panel { color: #dc3545; border-color: #dc3545; }
.green-panel { color: #28a745; border-color: #28a745; }

h1 {
    color: #FF8A80; font-size: clamp(2em, 4vw, 3em); margin-bottom: 10px;
    text-shadow: 3px 3px 0 #FFF, 5px 5px 0 #FFECB3; letter-spacing: 2px;
}
.instructions {
    font-family: 'Gochi Hand', cursive; font-size: clamp(1.1em, 2vw, 1.5em);
    color: #2e7d32; margin-bottom: 10px; padding: 6px 14px; background-color: rgba(255,255,255,0.9);
    border-radius: 12px; border: 2px dashed #81C784; line-height: 1.2;
}
.current-problem-display {
    font-size: clamp(4em, 12vw, 7em); font-weight: bold; margin: 10px 0 18px;
    color: #7e57c2; text-shadow: 5px 5px 0 #FFF, 8px 8px 0 #FFCCBC;
    animation: bounce 2s infinite ease-in-out; line-height: 1; text-transform: uppercase;
    cursor: pointer; user-select: none;
}

@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }

.answer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: clamp(8px, 1.5vw, 16px); margin-top: 10px; width: 100%; padding-bottom: 10px;
}
.answer-button {
    border: 4px solid; border-radius: 12px; font-size: clamp(1.8em, 3.5vw, 2.6em);
    font-weight: bold; color: #fff; padding: 12px 0; cursor: pointer; transition: all 0.2s ease-in-out;
    box-shadow: 0 6px 0; user-select: none; font-family: 'Chewy', cursive; display: flex; justify-content: center; align-items: center;
    text-align: center; min-height: 80px; line-height: 1; text-transform: uppercase;
}
.answer-button:hover { transform: translateY(-3px); box-shadow: 0 9px 0; }
.answer-button:active { transform: translateY(2px); box-shadow: 0 4px 0; }
.answer-button.correct-feedback { animation: bounceOnce 0.4s ease; }
@keyframes bounceOnce { 0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* Colors */
.color-1 { background-color: #FFECB3; border-color: #FFDDAA; box-shadow: 0 6px 0 #FFDDAA; color: #6A5ACD;}
.color-1:hover { box-shadow: 0 9px 0 #FFDDAA; }
.color-1:active { box-shadow: 0 4px 0 #FFDDAA; }
.color-2 { background-color: #FFC0CB; border-color: #FFB6C1; box-shadow: 0 6px 0 #FFB6C1; color: #C71585;}
.color-2:hover { box-shadow: 0 9px 0 #FFB6C1; }
.color-2:active { box-shadow: 0 4px 0 #FFB6C1; }
.color-3 { background-color: #D4EDDA; border-color: #B3E0B7; box-shadow: 0 6px 0 #B3E0B7; color: #4CAF50;}
.color-3:hover { box-shadow: 0 9px 0 #B3E0B7; }
.color-3:active { box-shadow: 0 4px 0 #B3E0B7; }
.color-4 { background-color: #B2EBF2; border-color: #80DEEA; box-shadow: 0 6px 0 #80DEEA; color: #1E90FF;}
.color-4:hover { box-shadow: 0 9px 0 #80DEEA; }
.color-4:active { box-shadow: 0 4px 0 #80DEEA; }
.color-5 { background-color: #E1BEE7; border-color: #CE93D8; box-shadow: 0 6px 0 #CE93D8; color: #8A2BE2;}
.color-5:hover { box-shadow: 0 9px 0 #CE93D8; }
.color-5:active { box-shadow: 0 4px 0 #CE93D8; }
.color-6 { background-color: #FFAB91; border-color: #FF8A65; box-shadow: 0 6px 0 #FF8A65; color: #B22222;}
.color-6:hover { box-shadow: 0 9px 0 #FF8A65; }
.color-6:active { box-shadow: 0 4px 0 #FF8A65; }

.message {
    font-size: clamp(1.4em, 2.5vw, 2em); font-weight: bold; margin-top: 14px; min-height: 1.2em; text-shadow: 2px 2px 0 #fff;
}
.correct { color: #28a745; }
.wrong { color: #dc3545; animation: shake 0.5s; }
@keyframes shake { 0%{transform:translateX(0)} 25%{transform:translateX(-10px)} 50%{transform:translateX(10px)} 75%{transform:translateX(-10px)} 100%{transform:translateX(0)} }

.score-board {
    font-size: clamp(1.05em, 1.8vw, 1.3em); margin-top: 10px; color: #555; background-color: rgba(255, 255, 255, 0.7);
    padding: 6px 12px; border-radius: 8px; border: 2px solid #FFD700; font-family: 'Gochi Hand', cursive; display: flex; gap: 12px;
}
.streak { margin-left: 8px; }
.multiplier { font-weight: 700; }

.control-buttons { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.control-buttons button {
    background-color: #FFB300; color: #fff; border: none; padding: clamp(8px, 2vw, 12px) clamp(15px, 4vw, 25px);
    font-size: clamp(1em, 2vw, 1.2em); border-radius: 12px; cursor: pointer; transition: background-color 0.3s ease;
    box-shadow: 0 4px 0 #E6A000; font-family: 'Chewy', cursive;
}
.control-buttons button:hover { background-color: #E6A000; }
.control-buttons button:active { transform: translateY(2px); box-shadow: 0 2px 0 #E6A000; }

.audio-controls { display:flex; gap:8px; align-items:center; }
.audio-controls .vol { display:flex; gap:6px; align-items:center; font-family:'Gochi Hand', cursive; }

/* Start Overlay */
.start-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(173, 216, 230, 0.95);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 100; border-radius: 25px; padding: 20px; box-sizing: border-box;
}
.start-overlay h2 {
    font-size: clamp(2em, 5vw, 4em); color: #FF8A80; text-shadow: 3px 3px 0 #FFF, 5px 5px 0 #FFECB3; margin-bottom: 20px;
}
.start-button {
    background-color: #81C780; color: white; padding: clamp(15px, 4vw, 22px) clamp(28px, 8vw, 44px);
    font-size: clamp(1.6em, 4.4vw, 2.4em); border: none; border-radius: 20px; cursor: pointer; box-shadow: 0 10px 0 #5CB85C;
    transition: all 0.2s ease-in-out; font-family: 'Chewy', cursive; margin: 8px;
}
.start-button:hover { transform: translateY(-5px); box-shadow: 0 15px 0 #5CB85C; }
.start-button:active { transform: translateY(5px); box-shadow: 0 5px 0 #5CB85C; }
.start-button.secondary { background-color:#FFD54F; box-shadow: 0 10px 0 #E6A000; }

.hidden { display: none; }

/* Progress Bar */
.progress-wrap { width: 100%; margin-bottom: 10px; }
.progress-label { text-align: left; font-family:'Gochi Hand', cursive; font-size: 0.95em; color:#555; margin-bottom: 6px; }
.progress-bar { width: 100%; height: 12px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg,#81C784,#4CAF50); transition: width 0.35s ease; }


@media (max-width: 980px) {
    .side-panels { display: none; }
    .app-container {
        width: 100%;
        padding: 10px;
        flex-direction: column;
        align-items: stretch;
    }
    .game-container {
        margin: 0;
        max-width: 100%;
    }
    body {
        overflow-y: auto; /* allow vertical scroll if needed */
    }
    .progress-wrap {
        position: sticky;
        top: 0;
        background: rgba(255,255,255,0.95);
        padding-top: 5px;
        z-index: 5;
    }
}
@media (max-height: 700px) {
    body {
        overflow-y: auto;
    }
    .game-container {
        padding: 10px;
    }
    .answer-grid {
        gap: 6px;
    }
    .answer-button {
        font-size: 1.4em;
        min-height: 60px;
        padding: 8px 0;
    }
}