/* La bataille des lettres — jeux voyelles / consonnes */
.m-battle { background: linear-gradient(135deg, #e0564f, #f5a53a); }
.cards { gap: .7rem; }
.battle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .9rem; }
.battle-card { display: flex; align-items: center; gap: .9rem; text-align: left; padding: .9rem 1.1rem; border-radius: 1.5rem; color: #fff; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 7px 0 rgba(40, 30, 20, .25), 0 14px 26px rgba(40, 30, 20, .2); position: relative; transition: transform .15s; }
.battle-card:active { transform: translateY(4px); }
.bc-icon { font-size: clamp(2.4rem, 7vmin, 3.6rem); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.bc-body { display: flex; flex-direction: column; gap: .15rem; }
.bc-name { font-weight: 700; font-size: clamp(1.05rem, 2.6vmin, 1.4rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.bc-sub { font-size: .95rem; opacity: .95; }
.bc-count { position: absolute; right: .8rem; top: -.6rem; background: #fff; color: var(--ink); border-radius: 999px; padding: .1em .6em; font-weight: 700; font-size: .9rem; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.b-sing { background: linear-gradient(135deg, #e0568a, #b0457f); }
.b-garden { background: linear-gradient(135deg, #4caf7d, #2f8f6a); }
.b-hunt { background: linear-gradient(135deg, #3b8fd6, #5b6fe0); }
.b-find { background: linear-gradient(135deg, #f59e42, #e0743a); }
.b-count { background: linear-gradient(135deg, #8a63d2, #6c4fc0); }
.b-gap { background: linear-gradient(135deg, #c7893a, #8a5a34); }

/* --- les voyelles chantent, les consonnes soufflent --- */
.sing-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 0; }
.sing-hint { background: rgba(255, 251, 232, .92); padding: .3em 1em; border-radius: 999px; font-weight: 700; font-size: clamp(.9rem, 2.2vmin, 1.15rem); text-align: center; max-width: 94%; }
.sing-tile { --tile: clamp(110px, 24vmin, 190px); }
.sing-tile.vowel, .sing-tile.cons { transition: none; }
.baskets { display: flex; justify-content: center; gap: clamp(.6rem, 4vw, 3rem); padding-bottom: .4rem; }
.basket { width: min(44vw, 330px); display: flex; flex-direction: column; align-items: center; gap: .2rem; transition: transform .2s; }
.basket.ready { transform: scale(1.06); filter: drop-shadow(0 0 14px #ffe27a); }
.basket.hint { animation: hint 1s ease-in-out infinite; border-radius: 1.5rem; }
.basket.shake { animation: shake .5s; }
.b-mouth { width: min(30vw, 170px); display: block; }
.b-mouth svg { width: 100%; height: auto; display: block; overflow: visible; }
.basket-body { width: 100%; min-height: 4.2rem; border-radius: 0 0 2.4rem 2.4rem / 0 0 2rem 2rem; padding: .7rem .8rem; display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(90deg, #c9976a 0 14px, #b9834f 14px 28px); border: 4px solid #8a5a34; box-shadow: var(--shadow); color: #fff; }
.basket.vowel .basket-body { background: repeating-linear-gradient(90deg, #f0a58a 0 14px, #e58b6c 14px 28px); border-color: #b9573a; }
.basket.cons .basket-body { background: repeating-linear-gradient(90deg, #8fb6ec 0 14px, #6f9ad8 14px 28px); border-color: #3f68b0; }
.basket-label { font-weight: 700; font-size: clamp(.9rem, 2.2vmin, 1.2rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.basket .waves { opacity: 0; }
.basket.singing .waves { opacity: 1; animation: waves 1s ease-out infinite; }
.basket.singing .m-hole { animation: sing .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.basket.singing .m-tongue { animation: sing .5s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: center; }
.basket.puffing .m-lips { animation: pinch .4s ease; transform-box: fill-box; transform-origin: center; }
.basket.puffing .puff { animation: puff 1s ease-out; }
@keyframes waves { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }
@keyframes sing { from { transform: scale(1, .92); } to { transform: scale(1.08, 1.1); } }
@keyframes pinch { 0% { transform: scale(1); } 40% { transform: scale(.7, .6); } 100% { transform: scale(1); } }
@keyframes puff { 0% { opacity: 0; transform: translateX(-8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -14px) scale(1.6); } }

/* --- jardin des voyelles / chasse aux consonnes --- */
.field { flex: 1; position: relative; min-height: 0; margin: .2rem .4rem; }
.item { position: absolute; transform: translate(-50%, -50%); --tile: clamp(62px, 12.5vmin, 104px); }
.item .tile.bloom { cursor: pointer; }
.flower::after { content: ''; position: absolute; left: 50%; top: 92%; width: 6px; height: 34px; background: linear-gradient(#3f9d52, #2f7d4f); border-radius: 3px; translate: -50% 0; z-index: -1; }
.flower .tile { box-shadow: 0 0 0 7px rgba(255, 143, 177, .55), var(--shadow); animation: sway 4s ease-in-out infinite; transform-origin: 50% 130%; }
.flower:nth-child(3n) .tile { box-shadow: 0 0 0 7px rgba(255, 211, 107, .6), var(--shadow); }
.flower:nth-child(3n+1) .tile { box-shadow: 0 0 0 7px rgba(183, 156, 255, .55), var(--shadow); }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.butterfly { animation: drift var(--dur, 8s) ease-in-out var(--del, 0s) infinite alternate; }
.butterfly .tile { box-shadow: 0 0 0 5px rgba(255, 255, 255, .6), var(--shadow); }
.butterfly::before, .butterfly::after { content: ''; position: absolute; top: 4%; width: 46%; height: 62%; border-radius: 50% 50% 50% 8%; background: radial-gradient(circle at 40% 40%, #ffd1e6, #c79bff); border: 3px solid #fff; z-index: -1; animation: flap .5s ease-in-out infinite alternate; }
.butterfly::before { left: -34%; transform-origin: 100% 60%; }
.butterfly::after { right: -34%; transform-origin: 0 60%; animation-name: flap2; }
@keyframes flap { from { transform: rotate(-14deg) scaleX(1); } to { transform: rotate(8deg) scaleX(.55); } }
@keyframes flap2 { from { transform: scaleX(-1) rotate(-14deg); } to { transform: scaleX(-.55) rotate(8deg); } }
@keyframes drift { from { transform: translate(calc(-50% - var(--dx, 12px)), calc(-50% - var(--dy, 10px))); } to { transform: translate(calc(-50% + var(--dx, 12px)), calc(-50% + var(--dy, 10px))); } }
.item.picked { pointer-events: none; }
.item.picked::before, .item.picked::after { opacity: 0; }
.collect-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.collect-title { background: rgba(255, 251, 232, .92); padding: .15em .9em; border-radius: 999px; font-weight: 700; font-size: clamp(.85rem, 2vmin, 1.05rem); }
.collect { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; background: rgba(255, 253, 244, .9); border: 4px solid #e7d8b0; border-radius: 1.4rem; padding: .4rem .6rem; box-shadow: var(--shadow); }
.slot-c { width: clamp(44px, 9vmin, 64px); height: clamp(44px, 9vmin, 64px); border-radius: 50%; border: 4px dashed #cfc49e; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #b9ad88; position: relative; }
.slot-c.full { border-style: solid; border-color: #e7d8b0; background: #fff; color: var(--ink); }
.slot-c.vowel { background: var(--vowel-bg); border-color: var(--vowel-bd); color: var(--vowel-ink); }
.slot-c.cons { background: var(--cons-bg); border-color: var(--cons-bd); color: var(--cons-ink); }
.slot-c .g { font-size: clamp(1.3rem, 3.4vmin, 2rem); --k: 1; }
.slot-q { opacity: .6; }
@media (min-aspect-ratio: 1/1) { .collect-wrap, .tray-wrap { padding-left: clamp(84px, 17vmin, 150px); } .baskets { padding-left: clamp(84px, 17vmin, 150px); } }

/* --- mots --- */
.word-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 0; }
.word-pic { font-size: clamp(4rem, 15vmin, 8rem); line-height: 1.1; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .18)); background: rgba(255, 253, 244, .7); border-radius: 2rem; padding: .1em .35em; }
.word-row { display: flex; gap: clamp(.25rem, 1.2vw, .7rem); justify-content: center; flex-wrap: wrap; --tile: clamp(54px, min(13vw, 14vmin), 104px); }
.wl.lit { transform: scale(1.14); box-shadow: 0 0 0 7px #ffd45c, var(--shadow); }
.feathers { display: flex; gap: .2rem; font-size: clamp(1.4rem, 4vmin, 2.2rem); }
.feathers span { filter: grayscale(1) opacity(.4); transition: filter .3s, transform .3s; }
.feathers span.on { filter: none; transform: rotate(-12deg) scale(1.15); }
.count-q { background: rgba(255, 251, 232, .92); padding: .3em 1em; border-radius: 999px; font-weight: 700; font-size: clamp(.95rem, 2.4vmin, 1.25rem); text-align: center; }
.count-choices { display: flex; gap: clamp(.6rem, 3vw, 1.6rem); }
.count-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: clamp(84px, 20vmin, 140px); min-height: clamp(84px, 20vmin, 140px); border-radius: 1.6rem; background: #fffdf4; border: 5px solid #8a63d2; box-shadow: var(--shadow); padding: .3rem; }
.count-btn.ok { background: #d6f3df; border-color: #3fa86b; }
.count-btn.tried { opacity: .55; }
.count-num { font-size: clamp(1.8rem, 6vmin, 3rem); font-weight: 700; line-height: 1; }
.count-f { font-size: clamp(.9rem, 2.4vmin, 1.3rem); letter-spacing: -.1em; }
.gap-slot { width: var(--tile); height: var(--tile); border-radius: 50%; border: 5px dashed #fff; background: rgba(255, 253, 244, .45); display: flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; flex: none; }
.gap-slot.ready { background: rgba(255, 245, 160, .85); transform: scale(1.08); border-style: solid; }
.gap-slot.filled { border: 0; background: none; }
.tray-wrap { padding: .4rem 0 .6rem; }
.tray-row { display: flex; justify-content: center; gap: clamp(.6rem, 3vw, 1.6rem); --tile: clamp(64px, 14vmin, 112px); background: rgba(138, 90, 52, .75); border-radius: 1.4rem; padding: .6rem 1rem; margin: 0 auto; width: fit-content; }
.tile.placed { box-shadow: var(--shadow); }

/* --- carnet : bouquet des voyelles --- */
.bouquet { display: flex; align-items: center; gap: .9rem; background: rgba(255, 253, 244, .94); border: 4px solid #e7d8b0; border-radius: 1.5rem; padding: .6rem 1rem; box-shadow: var(--shadow); flex-wrap: wrap; }
.bouquet.locked { filter: grayscale(1) opacity(.7); }
.bouquet-emoji { font-size: 3rem; }
.bouquet-text { display: flex; flex-direction: column; flex: 1; min-width: 12rem; }
.bouquet-letters { display: flex; gap: .5rem; height: 2.4rem; align-items: center; color: var(--vowel-ink); }
.bouquet-letters .g { --k: 1; font-size: 1.8rem; }