/* Les jeux : plein écran, gros, sans texte à lire. */
:root { --jaune: #ffb703; --orange: #fb8500; --vert: #52b788; --bleu: #4cc9f0; --rose: #f72585; --encre: #2b2d42; --fond: #fff8e1; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; } body { margin: 0; min-height: 100%; }
body { font-family: "Segoe UI", "Nunito", system-ui, sans-serif; background: var(--fond); color: var(--encre); display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: auto; min-height: 100%; }
.barre { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; gap: 10px; }
.barre a, .barre button { border: 0; background: #fff; color: var(--encre); border-radius: 999px; min-width: 56px; height: 56px; padding: 0 18px; font-size: 1.6rem; display: grid; place-items: center; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.1); cursor: pointer; }
#etoiles { font-size: 2rem; letter-spacing: 4px; color: #e0d6b9; }
#etoiles .est-faite { color: var(--jaune); text-shadow: 0 2px 0 rgba(0,0,0,.08); }
.scene { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 10px 16px 24px; }
.consigne { font-size: 1.4rem; font-weight: 800; text-align: center; margin: 0; }
.grosse { font-size: clamp(3rem, 12vmin, 7rem); line-height: 1; }

/* Les cases : gros ronds ou carrés touchables */
.choix { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 4vmin, 30px); }
.case { width: clamp(96px, 24vmin, 170px); height: clamp(96px, 24vmin, 170px); border: 0; border-radius: 28px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.12); font-size: clamp(2.6rem, 12vmin, 5rem); display: grid; place-items: center; cursor: pointer; transition: transform .12s; }
.case:active { transform: scale(.94); }
.case--rond { border-radius: 50%; }
.case.est-juste { animation: saute .6s; box-shadow: 0 0 0 8px var(--vert); }
.case.est-faux { animation: secoue .5s; }
@keyframes saute { 30% { transform: translateY(-18px) scale(1.08); } 60% { transform: translateY(0) scale(1); } }
@keyframes secoue { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* Mémory */
.carte { perspective: 600px; }
.carte__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 28px; backface-visibility: hidden; transition: transform .4s; }
.carte__dos { background: var(--bleu); color: #fff; font-size: 2.5rem; }
.carte__devant { background: #fff; transform: rotateY(180deg); }
.carte.est-retournee .carte__dos { transform: rotateY(180deg); }
.carte.est-retournee .carte__devant { transform: rotateY(0); }
.carte.est-trouvee { opacity: .55; pointer-events: none; }
.carte { position: relative; }

/* Puzzle */
.puzzle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: min(80vmin, 420px); aspect-ratio: 1; background: #fff; padding: 6px; border-radius: 24px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.piece { border: 0; padding: 0; border-radius: 14px; background-size: 200% 200%; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.piece.est-choisie { box-shadow: 0 0 0 6px var(--orange); transform: scale(.95); }
.puzzle.est-fini .piece { box-shadow: none; }

/* Ombres */
.ombre { filter: brightness(0); opacity: .8; }

/* Fin */
#fin { position: fixed; inset: 0; background: rgba(255,248,225,.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 5; }
#fin[hidden] { display: none; }
#fin .grosse { font-size: clamp(4rem, 20vmin, 9rem); }
#fin button, #fin a { border: 0; background: var(--vert); color: #fff; font-size: 1.6rem; font-weight: 800; padding: 16px 30px; border-radius: 999px; text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
#fin a { background: #fff; color: var(--encre); }
#confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
#confettis i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: tombe linear forwards; }
@keyframes tombe { to { transform: translateY(110vh) rotate(720deg); } }