#gameCanvas {
    font-family: 'Verdana', 'Segoe UI', sans-serif;
    background-color: #F0F9FF;
    color: #1f2937;
    min-height: 550px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

#gameCanvas * { box-sizing: border-box; touch-action: manipulation; }

/* Gestion des Ecrans */
#gameCanvas .screen {
    width: 100%; max-width: 600px;
    display: flex; flex-direction: column; align-items: center;
    transition: opacity 0.3s;
    width: 100%;
}
#gameCanvas .hidden { display: none !important; }
#gameCanvas .active { display: flex !important; }

/* --- MENU & FIN --- */
#gameCanvas .menu-card {
    background: white; padding: 40px; border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center; border: 4px solid #E0F2FE;
    width: 90%; max-width: 400px;
}
#gameCanvas .emoji-logo { font-size: 5rem; display: block; margin-bottom: 20px; animation: float 3s infinite ease-in-out; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

#gameCanvas h1 { color: #0EA5E9; margin: 0 0 10px 0; font-size: 1.8rem; }
#gameCanvas p { color: #64748B; margin-bottom: 25px; line-height: 1.5; }

#gameCanvas .level-badges { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;}
#gameCanvas .badge { padding: 5px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; color: white; }
#gameCanvas .badge.green { background: #22C55E; }
#gameCanvas .badge.yellow { background: #F59E0B; }
#gameCanvas .badge.red { background: #EF4444; }

#gameCanvas .btn-start {
    background: #0EA5E9; color: white; border: none;
    padding: 15px 30px; border-radius: 15px;
    font-size: 1.2rem; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 0 #0284C7; transition: transform 0.1s;
    width: 100%;
}
#gameCanvas .btn-start:active { transform: translateY(4px); box-shadow: none; }

#gameCanvas .final-score { font-size: 1.5rem; font-weight: bold; color: #D97706; margin-bottom: 20px; }

/* --- JEU --- */
#gameCanvas .header-bar {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px;
}
#gameCanvas .level-indicator {
    background: #E0F2FE; color: #0369A1; padding: 5px 15px;
    border-radius: 10px; font-weight: bold; font-size: 0.9rem;
}
#gameCanvas .streak-counter {
    background: white; padding: 5px 12px; border-radius: 9999px;
    display: flex; align-items: center; gap: 5px;
    font-weight: bold; color: #D97706;
}
#gameCanvas .icon-trophy { width: 18px; height: 18px; }

/* Barre de progression */
#gameCanvas .progress-container {
    flex-grow: 1; height: 10px; background: #E2E8F0;
    border-radius: 5px; margin: 0 15px; overflow: hidden;
}
#gameCanvas .progress-bar {
    height: 100%; background: #22C55E; width: 0%; transition: width 0.5s;
}

#gameCanvas .main-area { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Carte */
#gameCanvas .card-container {
    width: 120px; height: 120px;
    background: white; border-radius: 20px;
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.1);
    border: 4px solid white;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; margin-bottom: 10px;
}
#gameCanvas .card-container.won { transform: scale(1.1) rotate(3deg); border-color: #4ADE80; }
#gameCanvas .emoji-huge { font-size: 4rem; line-height: 1; }

#gameCanvas .hint-box {
    background: rgba(255,255,255,0.6); padding: 4px 12px; border-radius: 9999px;
    display: flex; align-items: center; gap: 6px; color: #4B5563; font-size: 0.9rem; margin-bottom: 10px;
}
#gameCanvas .icon-volume { width: 16px; height: 16px; }

/* Grille */
#gameCanvas .word-grid { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 5px 0; min-height: 60px; }
#gameCanvas .letter-box {
    width: 40px; height: 50px;
    background: #E5E7EB; border-bottom: 4px solid #D1D5DB;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 900; color: #9CA3AF;
    transition: all 0.2s;
}
#gameCanvas .letter-box.active { background: white; border-color: #60A5FA; color: #60A5FA; box-shadow: 0 0 0 2px #BFDBFE; }
#gameCanvas .letter-box.correct { background: #22C55E; border-color: #15803D; color: white; transform: translateY(-2px); }

/* Bouton Next */
#gameCanvas .action-area { height: 50px; display: flex; align-items: center; justify-content: center; width: 100%; }
#gameCanvas .btn-next {
    background: #22C55E; color: white; border: none;
    padding: 10px 24px; border-radius: 12px;
    font-size: 1.1rem; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 10px 0 rgba(34, 197, 94, 0.39);
    transition: transform 0.2s;
}
#gameCanvas .btn-next:hover { background: #16A34A; transform: scale(1.05); }

/* Clavier */
#gameCanvas .keyboard-area {
    background: rgba(255,255,255,0.5); padding: 10px;
    border-radius: 16px; width: 100%; margin-top: 5px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#gameCanvas .kb-row { display: flex; justify-content: center; gap: 4px; width: 100%; }
#gameCanvas .key-btn {
    width: 34px; height: 42px;
    background: white; border: 1px solid #D1D5DB; border-bottom-width: 3px;
    border-radius: 6px; font-size: 1rem; font-weight: bold; color: #374151;
    cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
#gameCanvas .key-btn:active { border-bottom-width: 0px; transform: translateY(3px); }
#gameCanvas .key-btn.current { background: #60A5FA; color: white; border-color: #2563EB; }

#gameCanvas #confetti-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

@media (max-width: 500px) {
    #gameCanvas .card-container { width: 90px; height: 90px; }
    #gameCanvas .emoji-huge { font-size: 3rem; }
    #gameCanvas .key-btn { width: 28px; height: 38px; font-size: 0.8rem; }
}