/* Alphabet en folie */
.m-alpha { background: linear-gradient(135deg, #3fa86b, #2f7fd0); }
.a-train { background: linear-gradient(135deg, #d9644a, #b0452f); }
.a-missing { background: linear-gradient(135deg, #8a63d2, #5b6fe0); }
.a-song { background: linear-gradient(135deg, #e0568a, #f0883a); }
.a-singalong { background: linear-gradient(135deg, #3b8fd6, #3fa8a0); }
.a-find { background: linear-gradient(135deg, #4caf7d, #8aab2f); }
.a-memory { background: linear-gradient(135deg, #c76bd0, #8a4fc0); }

/* --- train --- */
.train-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 0; overflow: hidden; }
.train { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .5rem .35rem; max-width: 100%; --tile: clamp(40px, 7.5vmin, 66px); transition: transform 1.6s ease-in; padding: 0 .4rem; }
.train.go { transform: translateX(8%); animation: chugga 1.4s ease-in-out 2; }
@keyframes chugga { 0%, 100% { translate: 0 0; } 25% { translate: 8px -4px; } 75% { translate: -8px 2px; } }
.loco { font-size: clamp(2.6rem, 9vmin, 4.4rem); line-height: 1; margin-right: .2rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.wagon { display: flex; flex-direction: column; align-items: center; gap: .1rem; background: linear-gradient(#e87a5f, #c4563d); border: 4px solid #8f3a28; border-radius: .7rem .7rem .4rem .4rem; padding: .25rem .3rem .1rem; box-shadow: var(--shadow); position: relative; transition: transform .2s, filter .2s; }
.wagon.ready { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 0 10px #ffe27a); }
.wagon.filled { background: linear-gradient(#f5a58a, #e0765a); }
.wagon-slot { width: var(--tile); height: var(--tile); border-radius: 50%; border: 4px dashed rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; }
.wagon.filled .wagon-slot { border: 0; background: none; }
.plate { --tile: clamp(26px, 4.6vmin, 38px) !important; border-width: 3px; box-shadow: none; margin-top: .1rem; }
.plate .g { font-size: calc(var(--tile) * .6); }
.plate.unknown { width: var(--tile); height: var(--tile); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff3dc; font-weight: 700; color: #b9873a; }
.wheels { display: flex; gap: .6rem; margin-bottom: -.5rem; }
.wheels i { width: .8rem; height: .8rem; border-radius: 50%; background: #3b3a4a; border: 2px solid #fff; display: block; }
.train-tray { flex-wrap: wrap; --tile: clamp(44px, 7.6vmin, 72px); gap: .4rem; max-width: 96vw; }

/* --- lettre qui manque / chante avec moi --- */
.seq-row { --tile: clamp(58px, min(15vw, 15vmin), 112px); }
.sing-tile.ref { --tile: clamp(96px, 20vmin, 160px); }
.choice.vowel { box-shadow: 0 0 0 7px #7bd49a, var(--shadow); }
.song-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 0; }
.frise { display: grid; grid-template-columns: repeat(9, 1fr); gap: clamp(.25rem, 1vmin, .5rem); --tile: clamp(34px, min(9vw, 9vmin), 70px); max-width: 100%; }
@media (max-aspect-ratio: 1/1) { .frise { grid-template-columns: repeat(6, 1fr); --tile: clamp(44px, 13vw, 70px); } }
.fr { transition: transform .2s, opacity .3s, box-shadow .2s; }
.fr.dim { opacity: .45; }
.fr.lit { opacity: 1; background: radial-gradient(circle at 35% 28%, #fff, #e6f7ec 62%, #bfe8cd); border-color: #5fc08a; }
.fr.now { transform: scale(1.3); z-index: 2; box-shadow: 0 0 0 6px #ffd45c, var(--shadow); }

/* --- chasse à la lettre --- */
.find-chip { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .2rem; }
.find-target { font-size: 3rem; height: 3.4rem; display: inline-flex; align-items: center; background: rgba(255, 253, 244, .94); border-radius: 1rem; padding: 0 1rem; border: 3px solid #e7d8b0; }
.find-target .g { --k: 1; font-size: 3rem; }
.item.found { animation: foundpop .7s ease forwards; }
@keyframes foundpop { 0% { scale: 1; } 40% { scale: 1.4; } 100% { scale: 1.15; } }

/* --- memory --- */
.memory-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.memory-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), auto); gap: clamp(.5rem, 2vmin, 1.1rem); --mtile: clamp(68px, min(22vw, 20vmin), 130px); }
.mcard { width: calc(var(--mtile) * 1.05); height: calc(var(--mtile) * 1.3); perspective: 700px; border-radius: 1.1rem; }
.minner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s; }
.mcard.up .minner { transform: rotateY(180deg); }
.mback, .mface { position: absolute; inset: 0; border-radius: 1.1rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border: 5px solid #fff; box-shadow: var(--shadow); }
.mback { background: repeating-linear-gradient(45deg, #4caf7d 0 12px, #3f9d6d 12px 24px); font-size: calc(var(--mtile) * .5); }
.mface { transform: rotateY(180deg); background: #fffdf4; }
.mface .tile { --tile: calc(var(--mtile) * .92); border: 0; box-shadow: none; background: none; }
.mcard.ok .mface { background: #d6f3df; border-color: #5fc08a; }
.mcard.ok { pointer-events: none; }