:root {
    --rose: #ff6b9d; --orange: #ff8a50; --jaune: #ffd166;
    --vert: #06d6a0; --bleu: #118ab2; --violet: #7b2ff7;
    --fond: #fef9ef; --fond-carte: #ffffff; --texte: #2d3047;
    --ombre: rgba(45, 48, 71, 0.1); --rayon: 20px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overscroll-behavior: none; height: 100%; }
body {
    font-family: 'Quicksand', sans-serif;
    background: var(--fond);
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,107,157,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(17,138,178,0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(123,47,247,0.05) 0%, transparent 60%);
    min-height: 100vh; min-height: -webkit-fill-available;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-x: hidden; color: var(--texte);
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
}

/* Décorations */
.decorations-flottantes { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.flotteur { position: absolute; left: var(--x); top: -3rem; font-size: var(--taille); animation: flotter 12s ease-in-out infinite; animation-delay: var(--delai); opacity: 0.5; }
@keyframes flotter {
    0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    25% { transform: translateY(30vh) rotate(15deg); opacity: 0.6; }
    50% { transform: translateY(55vh) rotate(-10deg); opacity: 0.5; }
    75% { transform: translateY(80vh) rotate(20deg); opacity: 0.4; }
}

/* Écrans */
.ecran { display: none; min-height: 100vh; min-height: -webkit-fill-available; position: relative; z-index: 1; }
.ecran.actif { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: apparition 0.5s ease-out; }
@keyframes apparition { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* Accueil */
.accueil-contenu { text-align: center; padding: 2rem; max-width: 600px; width: 100%; }
.titre-jeu { font-family: 'Baloo 2', cursive; font-size: clamp(2.5rem,8vw,4.5rem); font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, var(--rose), var(--violet), var(--bleu)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; animation: rebond 2s ease-in-out infinite; }
.titre-jeu-petit { font-size: clamp(2rem,6vw,3rem); }
.titre-emoji { -webkit-text-fill-color: initial; display: inline-block; animation: balancement 2s ease-in-out infinite; }
.titre-emoji:last-child { animation-delay: 0.5s; }
@keyframes rebond { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes balancement { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.sous-titre { font-size: clamp(1rem,3vw,1.4rem); color: #666; font-weight: 600; margin-bottom: 2rem; }

/* Grille jeux */
.grille-jeux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 440px; margin: 0 auto; }
.btn-choix-jeu { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.3rem 0.8rem; border: 4px solid transparent; border-radius: 24px; cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); font-family: 'Quicksand', sans-serif; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; }
.btn-choix-jeu::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent); pointer-events: none; }
.btn-jeu-mots { background: linear-gradient(145deg, #e8f5e9, #c8e6c9); box-shadow: 0 6px 20px rgba(6,214,160,0.2); }
.btn-jeu-mots:active { border-color: var(--vert); transform: translateY(-4px) scale(1.03); }
.btn-jeu-lettres { background: linear-gradient(145deg, #fff3e0, #ffe0b2); box-shadow: 0 6px 20px rgba(255,138,80,0.2); }
.btn-jeu-lettres:active { border-color: var(--orange); transform: translateY(-4px) scale(1.03); }
.btn-jeu-calculs { background: linear-gradient(145deg, #e3f2fd, #bbdefb); box-shadow: 0 6px 20px rgba(17,138,178,0.2); }
.btn-jeu-calculs:active { border-color: var(--bleu); transform: translateY(-4px) scale(1.03); }
.btn-jeu-phrases { background: linear-gradient(145deg, #f3e5f5, #e1bee7); box-shadow: 0 6px 20px rgba(123,47,247,0.2); }
.btn-jeu-phrases:active { border-color: var(--violet); transform: translateY(-4px) scale(1.03); }
.choix-jeu-icone { font-size: 2.8rem; }
.choix-jeu-titre { font-family: 'Baloo 2', cursive; font-size: 1.1rem; font-weight: 800; color: var(--texte); }
.choix-jeu-desc { font-size: 0.75rem; font-weight: 600; color: #888; }

.btn-retour-menu { display: inline-block; margin-top: 2rem; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.95rem; background: none; border: 2px solid #ddd; border-radius: 50px; padding: 0.6rem 1.5rem; cursor: pointer; color: #888; transition: all 0.2s; -webkit-tap-highlight-color: transparent; }
.btn-retour-menu:active { background: var(--rose); color: white; border-color: var(--rose); }

/* Thèmes */
.label-choix { font-family: 'Baloo 2', cursive; font-size: 1.3rem; font-weight: 700; color: var(--texte); margin-bottom: 1.2rem; }
.grille-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.btn-theme { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.5rem; border: 3px solid transparent; border-radius: var(--rayon); background: var(--fond-carte); box-shadow: 0 4px 15px var(--ombre); cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); font-family: 'Quicksand', sans-serif; -webkit-tap-highlight-color: transparent; }
.btn-theme:active { transform: translateY(-4px) scale(1.04); border-color: var(--violet); }
.theme-emoji { font-size: 2rem; }
.theme-nom { font-weight: 700; font-size: 0.8rem; color: var(--texte); }

/* Jeu */
#ecran-jeu.actif { justify-content: flex-start; }
.jeu-entete { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; width: 100%; max-width: 600px; margin: 0 auto; }
.btn-retour { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.95rem; background: var(--fond-carte); border: 2px solid #e0e0e0; border-radius: 50px; padding: 0.5rem 1.2rem; cursor: pointer; transition: all 0.2s; color: var(--texte); -webkit-tap-highlight-color: transparent; }
.btn-retour:active { background: var(--rose); color: white; border-color: var(--rose); }
.info-theme { font-family: 'Baloo 2', cursive; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.compteur-score { display: flex; align-items: center; gap: 0.3rem; font-family: 'Baloo 2', cursive; font-size: 1.3rem; font-weight: 800; color: var(--orange); background: var(--fond-carte); padding: 0.4rem 1rem; border-radius: 50px; box-shadow: 0 2px 10px var(--ombre); }
.etoile-score { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.progression { width: 100%; max-width: 500px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
.barre-progression { flex: 1; height: 12px; background: #e8e8e8; border-radius: 50px; overflow: hidden; }
.remplissage-progression { height: 100%; width: 0%; background: linear-gradient(90deg, var(--vert), var(--bleu)); border-radius: 50px; transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.texte-progression { font-weight: 700; font-size: 0.85rem; color: #999; white-space: nowrap; }

.zone-jeu { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem; flex: 1; }

.carte-image { width: clamp(140px,38vw,200px); height: clamp(140px,38vw,200px); background: var(--fond-carte); border-radius: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px var(--ombre); border: 4px solid #f0f0f0; position: relative; overflow: hidden; animation: apparitionCarte 0.6s ease-out; }
.carte-image.carte-calcul { width: clamp(240px,70vw,340px); height: clamp(120px,28vw,150px); border-radius: 24px; }
.carte-image.carte-lettre { width: clamp(120px,30vw,160px); height: clamp(120px,30vw,160px); border-radius: 24px; }
.carte-image.carte-scene { width: clamp(200px,60vw,300px); height: clamp(130px,35vw,180px); border-radius: 24px; }
.emoji-scene { font-size: clamp(2.8rem,10vw,4.5rem); animation: douxRebond 3s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); letter-spacing: 4px; }
.btn-reponse.btn-phrase { font-size: clamp(0.85rem,2.8vw,1.05rem); padding: 0.8rem 1.2rem; text-align: left; line-height: 1.3; }
.carte-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%); border-radius: 26px; pointer-events: none; }
@keyframes apparitionCarte { from { opacity: 0; transform: scale(0.7) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

.emoji-question { font-size: clamp(4rem,16vw,6rem); animation: douxRebond 3s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
.texte-operation { font-family: 'Baloo 2', cursive; font-size: clamp(2.5rem,10vw,4rem); font-weight: 800; color: var(--texte); animation: douxRebond 3s ease-in-out infinite; letter-spacing: 2px; }
.texte-operation .signe-plus { color: var(--bleu); margin: 0 0.3rem; }
.texte-operation .signe-egal { color: var(--violet); margin: 0 0.2rem; }
@keyframes douxRebond { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } }

.instruction { font-family: 'Baloo 2', cursive; font-size: clamp(1rem,3.5vw,1.4rem); font-weight: 700; margin: 0.8rem 0; color: var(--texte); }

/* Boutons réponse */
.conteneur-boutons { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; max-width: 360px; }
.conteneur-boutons.cache { display: none !important; }
.btn-reponse { font-family: 'Baloo 2', cursive; font-size: clamp(1.1rem,3.5vw,1.4rem); font-weight: 700; padding: 0.9rem 1.5rem; border: 3px solid #e8e8e8; border-radius: 16px; background: var(--fond-carte); color: var(--texte); cursor: pointer; transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 3px 12px var(--ombre); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.btn-reponse::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.6), transparent); pointer-events: none; }
.btn-reponse:active:not(.desactive) { transform: scale(0.97); border-color: var(--violet); }
.btn-reponse.correct { background: linear-gradient(135deg,#a8edce,#06d6a0) !important; border-color: var(--vert) !important; color: #065f46 !important; transform: scale(1.05); animation: succes 0.5s ease-out; }
.btn-reponse.incorrect { background: linear-gradient(135deg,#fecaca,#fca5a5) !important; border-color: #ef4444 !important; color: #991b1b !important; animation: trembler 0.5s ease-out; }
.btn-reponse.desactive { opacity: 0.5; cursor: not-allowed; transform: none !important; }
@keyframes succes { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1.05); } }
@keyframes trembler { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* ===== JEU LETTRES : MOT TROUÉ + CLAVIER ===== */
.zone-mot-troue { display: flex; justify-content: center; gap: 4px; margin: 0.8rem 0; flex-wrap: wrap; }
.zone-mot-troue.cache { display: none !important; }
.lettre-case { font-family: 'Baloo 2', cursive; font-size: clamp(1.8rem,6vw,2.6rem); font-weight: 800; width: clamp(2rem,7vw,2.8rem); height: clamp(2.4rem,8vw,3.2rem); display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--fond-carte); color: var(--texte); box-shadow: 0 2px 8px var(--ombre); text-transform: uppercase; }
.lettre-case.trou { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border: 3px dashed var(--bleu); color: var(--bleu); min-width: clamp(2rem,7vw,2.8rem); animation: pulseTrou 1.5s ease-in-out infinite; }
.lettre-case.trou.correct-lettre { background: linear-gradient(135deg, #a8edce, #06d6a0) !important; border: 3px solid var(--vert) !important; color: #065f46 !important; animation: succes 0.5s ease-out; }
.lettre-case.trou.incorrect-lettre { background: linear-gradient(135deg, #fecaca, #fca5a5) !important; border: 3px solid #ef4444 !important; color: #991b1b !important; animation: trembler 0.5s ease-out; }
@keyframes pulseTrou { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.clavier { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 420px; margin-top: 0.5rem; }
.clavier.cache { display: none !important; }
.clavier-ligne { display: flex; gap: 4px; justify-content: center; }
.touche { font-family: 'Baloo 2', cursive; font-size: clamp(1rem,3.5vw,1.3rem); font-weight: 700; width: clamp(2rem,8vw,2.6rem); height: clamp(2.4rem,9vw,3rem); border: 2px solid #e0e0e0; border-radius: 10px; background: var(--fond-carte); color: var(--texte); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; box-shadow: 0 2px 6px var(--ombre); text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.touche:active:not(.touche-desactive) { transform: scale(0.9); background: var(--violet); color: white; border-color: var(--violet); }
.touche-desactive { opacity: 0.3; cursor: not-allowed; }

/* Résultat */
.message-resultat { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; animation: fondu 0.3s ease-out; }
.message-resultat.cache { display: none !important; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.contenu-resultat { background: var(--fond-carte); border-radius: 30px; padding: 2.5rem 2rem; text-align: center; max-width: 340px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.15); animation: popResultat 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popResultat { from { transform: scale(0.5) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.emoji-resultat { font-size: 4rem; display: block; margin-bottom: 0.8rem; animation: douxRebond 2s ease-in-out infinite; }
.texte-resultat { font-family: 'Baloo 2', cursive; font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--texte); }
.btn-suivant { font-family: 'Baloo 2', cursive; font-size: 1.1rem; font-weight: 700; padding: 0.8rem 2.5rem; border: none; border-radius: 50px; background: linear-gradient(135deg, var(--violet), var(--bleu)); color: white; cursor: pointer; box-shadow: 0 4px 15px rgba(123,47,247,0.3); -webkit-tap-highlight-color: transparent; }
.btn-suivant:active { transform: scale(0.96); }

/* Fin */
.contenu-fin { text-align: center; padding: 2rem; max-width: 450px; }
.feux-artifice { font-size: 3rem; display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.feux-artifice span { animation: rebond 1.5s ease-in-out infinite; }
.feux-artifice span:nth-child(2) { animation-delay: 0.3s; }
.feux-artifice span:nth-child(3) { animation-delay: 0.6s; }
.titre-bravo { font-family: 'Baloo 2', cursive; font-size: clamp(2rem,7vw,3rem); font-weight: 800; background: linear-gradient(135deg, var(--jaune), var(--orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; }
.message-fin { font-size: 1.2rem; font-weight: 600; color: #666; margin-bottom: 2rem; }
.score-final { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; margin-bottom: 1.5rem; }
.label-score-final { font-size: 1.1rem; font-weight: 600; color: #888; }
.valeur-score-final { font-family: 'Baloo 2', cursive; font-size: 3.5rem; font-weight: 800; color: var(--orange); line-height: 1; }
.etoiles-fin { font-size: 2.5rem; margin-bottom: 2rem; display: flex; justify-content: center; gap: 0.5rem; }
.etoiles-fin span { display: inline-block; animation: apparitionEtoile 0.4s ease-out both; }
.etoiles-fin span:nth-child(1) { animation-delay: 0.2s; }
.etoiles-fin span:nth-child(2) { animation-delay: 0.4s; }
.etoiles-fin span:nth-child(3) { animation-delay: 0.6s; }
@keyframes apparitionEtoile { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.boutons-fin { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-rejouer, .btn-autre-theme { font-family: 'Baloo 2', cursive; font-size: 1.1rem; font-weight: 700; padding: 0.8rem 2rem; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 15px var(--ombre); -webkit-tap-highlight-color: transparent; }
.btn-rejouer { background: linear-gradient(135deg, var(--vert), #04b890); color: white; }
.btn-autre-theme { background: linear-gradient(135deg, var(--violet), var(--bleu)); color: white; }

/* Responsive */
@media (max-width: 480px) {
    .grille-themes { grid-template-columns: repeat(2, 1fr); }
    .grille-jeux { max-width: 320px; }
    .btn-choix-jeu { padding: 1rem 0.6rem; }
    .choix-jeu-icone { font-size: 2rem; }
    .jeu-entete { padding: 0.8rem 1rem; }
    .btn-retour { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
    .zone-jeu { padding: 0.8rem 1rem; }
    .boutons-fin { flex-direction: column; align-items: center; }
}
@media (max-height: 680px) {
    .carte-image { width: 120px; height: 120px; }
    .carte-image.carte-calcul { width: 220px; height: 100px; }
    .carte-image.carte-lettre { width: 100px; height: 100px; }
    .carte-image.carte-scene { width: 180px; height: 110px; }
    .emoji-scene { font-size: 2.5rem; }
    .emoji-question { font-size: 3.5rem; }
    .instruction { margin: 0.4rem 0; font-size: 1rem; }
    .btn-reponse { padding: 0.6rem 1rem; }
    .lettre-case { font-size: 1.5rem; width: 1.8rem; height: 2rem; }
    .touche { width: 2rem; height: 2.2rem; font-size: 0.9rem; }
}
@media (min-width: 768px) {
    .conteneur-boutons { flex-direction: row; max-width: 560px; }
    .btn-reponse { flex: 1; }
}