/* ===== CSS VARIABLES & RESET ===== */
:root {
    --green-dark: #2d5016;
    --green-mid: #4a7c23;
    --green-light: #7cb342;
    --green-pale: #c5e1a5;
    --green-bg: #e8f5e9;
    --sky-light: #e3f2fd;
    --sky-mid: #90caf9;
    --earth-brown: #795548;
    --earth-light: #bcaaa4;
    --sun-yellow: #ffd54f;
    --sun-orange: #ffb74d;
    --flower-pink: #f48fb1;
    --flower-purple: #ce93d8;
    --berry-red: #ef5350;
    --white: #ffffff;
    --text-dark: #1b3409;
    --text-mid: #33691e;
    --shadow: rgba(0, 0, 0, 0.12);
    --shadow-strong: rgba(0, 0, 0, 0.2);
    --radius: 20px;
    --radius-sm: 12px;
    --transition: 0.3s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Segoe UI', 'SF Pro Rounded', 'Nunito', system-ui, -apple-system, sans-serif;
    background: linear-gradient(180deg, var(--sky-light) 0%, var(--green-bg) 40%, var(--green-pale) 100%);
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text-dark);
    overflow-x: hidden;
    position: relative;
}

/* ===== CELEBRATION CANVAS ===== */
#celebrationCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

/* ===== NATURE BACKGROUND ===== */
#nature-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-nature {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.15;
    animation: floatAround 20s infinite linear;
    pointer-events: none;
}

@keyframes floatAround {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* ===== SCREENS ===== */
.screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 1;
    overflow-y: auto;
}

.screen.active {
    display: flex;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== CARDS ===== */
.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 32px var(--shadow), 0 2px 8px var(--shadow);
    max-width: 480px;
    width: 100%;
    position: relative;
    border: 3px solid var(--green-pale);
}

/* ===== WELCOME SCREEN ===== */
.welcome-card {
    text-align: center;
}

.logo-area {
    margin-bottom: 1.5rem;
}

.tree-icon {
    font-size: 4rem;
    animation: treeSway 3s ease-in-out infinite;
    display: inline-block;
}

@keyframes treeSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.welcome-card h1 {
    font-size: 2.2rem;
    color: var(--green-dark);
    line-height: 1.2;
    margin: 0.5rem 0;
    font-weight: 800;
}

.subtitle {
    color: var(--green-mid);
    font-size: 1.1rem;
    font-weight: 500;
}

.choose-text {
    font-size: 1.1rem;
    color: var(--text-mid);
    margin-bottom: 1rem;
    font-weight: 600;
}

.player-select {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* ===== BUTTONS ===== */
.btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--transition);
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    display: block;
}

.btn:active {
    transform: scale(0.96);
}

.btn-age {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    color: var(--white);
    text-align: left;
}

.btn-age[data-age="5"] {
    background: linear-gradient(135deg, var(--green-light), var(--green-mid));
}

.btn-age[data-age="7"] {
    background: linear-gradient(135deg, var(--sun-orange), #e65100);
}

.btn-age:hover {
    box-shadow: 0 4px 16px var(--shadow-strong);
    transform: translateY(-2px);
}

.age-emoji {
    font-size: 2rem;
}

.age-desc {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-left: auto;
}

.btn-back {
    background: none;
    border: 2px solid var(--green-pale);
    color: var(--green-mid);
    padding: 0.4rem 0.8rem;
    border-radius: 30px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition);
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.btn-back:hover {
    background: var(--green-bg);
}

.btn-donate-small {
    background: none;
    border: 2px solid var(--green-pale);
    color: var(--green-mid);
    padding: 0.5rem 1.2rem;
    border-radius: 30px;
    font-size: 0.9rem;
    margin: 0 auto;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.btn-donate-small:hover {
    background: var(--green-bg);
}

/* ===== MODE SELECT ===== */
.mode-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--green-bg), var(--green-pale));
    color: var(--text-dark);
    border: 2px solid var(--green-pale);
}

.btn-mode:hover {
    border-color: var(--green-mid);
    box-shadow: 0 4px 16px var(--shadow);
    transform: translateY(-2px);
}

.mode-icon {
    font-size: 2.5rem;
}

.mode-title {
    font-size: 1.3rem;
    font-weight: 700;
}

.mode-desc {
    font-size: 0.9rem;
    color: var(--text-mid);
}

#screen-mode h2,
#screen-subject h2,
#screen-english h2 {
    text-align: center;
    color: var(--green-dark);
    margin-top: 1rem;
}

.btn-subject-math {
    background: linear-gradient(135deg, var(--green-bg), var(--green-pale));
    border-color: var(--green-light);
}

.btn-subject-english {
    background: linear-gradient(135deg, var(--sky-light), var(--sky-mid));
    border-color: var(--sky-mid);
}

.btn-subject-english:hover {
    border-color: #1976d2;
}

/* ===== GAME SCREEN ===== */
#screen-game {
    flex-direction: column;
    padding: 0.5rem;
}

.game-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.game-header .btn-back {
    position: static;
    flex-shrink: 0;
}

.score-display, .streak-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green-dark);
    background: var(--white);
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    border: 2px solid var(--green-pale);
}

.question-counter {
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--text-mid);
    font-weight: 600;
    white-space: nowrap;
}

.game-card {
    max-width: 480px;
    margin: 0 auto;
    flex-shrink: 0;
    padding-top: 3rem;
}

/* ===== MASCOT ===== */
.mascot {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    font-size: 3rem;
    animation: mascotBounce 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes mascotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.mascot-speech {
    position: absolute;
    top: -0.5rem;
    right: 5rem;
    background: var(--sun-yellow);
    color: var(--text-dark);
    padding: 0.3rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 2;
}

.mascot-speech.show {
    opacity: 1;
    transform: scale(1);
}

.mascot-speech::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--sun-yellow);
}

/* ===== QUESTION HINT (spelling label) ===== */
.question-hint {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
}

/* ===== QUESTION AREA ===== */
.question-area {
    text-align: center;
    margin: 1rem 0 1.5rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.question-text .blank {
    display: inline-block;
    min-width: 2.5rem;
    border-bottom: 4px solid var(--sun-orange);
    color: var(--sun-orange);
    font-weight: 900;
}

/* ===== WORD ANSWERS (English games) ===== */
.answers-word .btn-answer {
    font-size: 1.1rem;
    font-weight: 700;
}

/* ===== ANSWER BUTTONS ===== */
.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.btn-answer {
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    background: linear-gradient(135deg, var(--green-bg), #f1f8e9);
    border: 3px solid var(--green-pale);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    min-height: 3.5rem;
}

.btn-answer:hover {
    border-color: var(--green-mid);
    background: linear-gradient(135deg, var(--green-pale), #dcedc8);
}

.btn-answer:active {
    transform: scale(0.95);
}

.btn-answer.correct {
    background: linear-gradient(135deg, #66bb6a, #43a047) !important;
    border-color: #2e7d32 !important;
    color: var(--white) !important;
    animation: correctPop 0.4s ease;
}

.btn-answer.wrong {
    background: linear-gradient(135deg, #ef9a9a, #e57373) !important;
    border-color: #c62828 !important;
    color: var(--white) !important;
    animation: wrongShake 0.5s ease;
}

.btn-answer.disabled {
    pointer-events: none;
    opacity: 0.6;
}

@keyframes correctPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ===== FEEDBACK ===== */
.feedback {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

.feedback.hidden {
    display: none;
}

.feedback.correct {
    background: #e8f5e9;
    color: #2e7d32;
}

.feedback.wrong {
    background: #fce4ec;
    color: #c62828;
}

/* ===== PROGRESS BAR ===== */
.progress-bar-container {
    width: 100%;
    max-width: 480px;
    margin: 0.75rem auto 0;
    height: 8px;
    background: var(--green-pale);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--green-light), var(--sun-yellow));
    border-radius: 4px;
    width: 0%;
    transition: width 0.5s ease;
}

/* ===== RESULTS SCREEN ===== */
.results-card {
    text-align: center;
    padding-top: 3rem;
}

.results-mascot {
    font-size: 4rem;
    animation: resultsBounce 1s ease-in-out infinite;
}

@keyframes resultsBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.results-card h2 {
    font-size: 1.8rem;
    color: var(--green-dark);
    margin: 0.5rem 0 1.5rem;
}

.results-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--green-dark);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-mid);
    font-weight: 600;
}

.results-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-play-again {
    flex: 1;
    padding: 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--green-light), var(--green-mid));
    color: var(--white);
}

.btn-home {
    flex: 1;
    padding: 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--earth-light), var(--earth-brown));
    color: var(--white);
}

/* ===== DONATE SCREEN ===== */
.donate-card {
    text-align: center;
    padding-top: 3rem;
}

.donate-icon {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}

.donate-card h2 {
    color: var(--green-dark);
    margin-bottom: 1rem;
}

.donate-text {
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.donate-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.btn-donate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: linear-gradient(135deg, var(--green-bg), var(--green-pale));
    color: var(--text-dark);
    border: 2px solid var(--green-pale);
    text-decoration: none;
}

.btn-donate:hover {
    border-color: var(--green-mid);
    box-shadow: 0 4px 12px var(--shadow);
}

.donate-emoji {
    font-size: 1.8rem;
}

.donate-amount {
    margin-left: auto;
    font-weight: 800;
    color: var(--green-dark);
    font-size: 1.1rem;
}

.donate-note {
    font-size: 0.85rem;
    color: var(--earth-light);
    line-height: 1.5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 400px) {
    .card {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .welcome-card h1 {
        font-size: 1.8rem;
    }

    .question-text {
        font-size: 1.5rem;
    }

    .btn-answer {
        font-size: 1.3rem;
        padding: 0.8rem;
    }

    .results-stats {
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .card {
        padding: 2.5rem 2rem;
    }

    .welcome-card h1 {
        font-size: 2.5rem;
    }

    .question-text {
        font-size: 2.2rem;
    }

    .btn-answer {
        font-size: 1.8rem;
        padding: 1.2rem;
    }
}

/* ===== UTILITY ===== */
.hidden {
    display: none !important;
}

/* Ensure smooth scrolling on iOS */
@supports (-webkit-touch-callout: none) {
    .screen {
        -webkit-overflow-scrolling: touch;
    }
}