:root { --red:#dc2626; --red-d:#b91c1c; --gold:#f59e0b; --cream:#fff7ed; --ink:#1f2937; --ok:#16a34a; --ok-bg:#dcfce7; --bad:#ef4444; --blue:#2563eb; --syl1:#dc2626; --syl2:#2563eb; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--cream); color:var(--ink); font-family:Andika,"Comic Sans MS",Verdana,sans-serif; overscroll-behavior:none; }
button { font-family:inherit; cursor:pointer; border:0; }
.hidden { display:none !important; }
.screen { display:none; min-height:100%; }
.screen.active { display:flex; flex-direction:column; }
h1,h2 { font-family:"Baloo 2",Andika,sans-serif; margin:.2em 0; }

/* Accueil */
#screen-start { align-items:center; justify-content:center; padding:24px; text-align:center; }
.start-card { max-width:420px; width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero { width:200px; height:200px; border-radius:50%; object-fit:cover; border:6px solid var(--red); box-shadow:0 8px 24px rgba(220,38,38,.3); }
h1 { font-size:2.6rem; color:var(--red); line-height:1; }
h1 span { display:block; font-size:1.3rem; color:var(--ink); }
#name-block { display:flex; flex-direction:column; gap:6px; width:100%; }
#name-block label { font-size:1.1rem; }
#name { font-size:1.6rem; padding:10px 14px; border:3px solid #fca5a5; border-radius:14px; text-align:center; font-family:inherit; width:100%; }
#welcome { font-size:1.4rem; margin:0; }
.big { font-size:1.6rem; padding:16px 28px; border-radius:20px; font-family:"Baloo 2",sans-serif; font-weight:800; }
.red { background:var(--red); color:#fff; box-shadow:0 6px 0 var(--red-d); }
.red:active { transform:translateY(4px); box-shadow:0 2px 0 var(--red-d); }
.ghost { background:#fff; color:var(--ink); border:2px solid #e5e7eb; border-radius:14px; padding:10px 16px; font-size:1rem; }
.ghost.small { font-size:.9rem; padding:6px 12px; margin:0 3px; }
.ghost.tiny { font-size:.75rem; padding:4px 10px; opacity:.5; }
.ghost.danger { color:var(--bad); border-color:#fecaca; }
.warn { background:#fef3c7; padding:10px; border-radius:12px; font-size:.95rem; }

/* Page */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; gap:10px; }
.badge { background:var(--red); color:#fff; font-weight:700; padding:6px 12px; border-radius:999px; font-size:1rem; white-space:nowrap; }
.badge.gold { background:var(--gold); }
.title { font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.1rem; text-align:center; flex:1; }
.page-grid { flex:1; display:grid; grid-template-rows:minmax(160px,38vh) 1fr; gap:8px; padding:0 12px 12px; }
.illu { display:flex; align-items:center; justify-content:center; }
.illu img { max-width:100%; max-height:100%; border-radius:18px; box-shadow:0 8px 20px rgba(0,0,0,.15); object-fit:cover; }
.reading { display:flex; flex-direction:column; gap:10px; }
.text { font-size:2.1rem; line-height:1.7; margin:0; padding:12px 14px; background:#fff; border-radius:18px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.text .w { display:inline-block; padding:0 .12em; border-radius:8px; transition:background .2s, color .2s; }
.text .w.ok { background:var(--ok-bg); color:var(--ok); }
.text .w.bad { background:#fee2e2; color:var(--bad); }
.text .w.cur { background:#fef08a; }
.text .w.dim { opacity:.35; }
.text .w.miss { background:#ffedd5; color:#c2410c; }
.text .w.tapped { box-shadow:inset 0 -4px #fcd34d; }
.steps { display:flex; gap:8px; justify-content:center; margin:6px 0 2px; }
.step { font-size:.95rem; padding:5px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; border:2px solid transparent; }
.step.on { background:#fef3c7; color:#92400e; border-color:var(--gold); font-weight:700; }
.step.done { background:#dcfce7; color:#166534; }
.tap-hint { text-align:center; font-size:.95rem; color:#6b7280; margin:2px 0 6px; }
.text .w.tappable { border-bottom:3px dotted #93c5fd; padding-bottom:1px; cursor:pointer; }
.read { display:block; width:100%; max-width:440px; margin:6px auto 10px; padding:16px 18px; font:inherit; font-size:1.35rem; font-weight:800; border-radius:18px; border:0; color:#fff; background:#16a34a; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; }
.read.rec { background:var(--red); animation:pulse 1.2s infinite; }
.read.wait { background:#d97706; opacity:.9; }
.big.green { background:#16a34a; color:#fff; }
.echo-card { max-width:520px; margin:0 auto; padding:14px 16px 26px; text-align:center; }
.echo-bar { height:12px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin:6px 0 16px; }
.echo-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#22c55e,#f59e0b); transition:width .4s; }
.echo-avatar { width:64px; height:64px; border-radius:50%; border:3px solid var(--gold); }
.echo-word { font-size:3.2rem; font-weight:800; letter-spacing:.04em; margin:14px 0 6px; min-height:4rem; display:flex; align-items:center; justify-content:center; gap:.06em; }
.echo-word .s:nth-child(odd) { color:var(--syl1); } .echo-word .s:nth-child(even) { color:var(--syl2); }
.echo-word .v { color:var(--syl1); } .echo-word .c { color:var(--ink); } .echo-word .mute { color:#b0b7c3; }
.echo-word.ok { animation:pop .5s; } .echo-word.ok .s, .echo-word.ok .v, .echo-word.ok .c { color:var(--ok); }
.echo-msg { font-size:1.2rem; color:#4b5563; min-height:1.6rem; margin-bottom:14px; }
.echo-mic { width:96px; height:96px; font-size:2.3rem; margin:0 auto 10px; }
/* ---------- Combat contre Freezer ---------- */
.belts { display:flex; gap:6px; align-items:center; justify-content:center; margin:6px 0; font-weight:800; color:#92400e; }
.belts img { width:38px; height:38px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.fight-hud { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; margin:2px 0 8px; }
.fighter { display:flex; flex-direction:column; align-items:center; gap:3px; }
.fighter img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid #16a34a; }
.fighter.foe img { border-color:#7c3aed; }
.hpbar { width:100%; max-width:140px; height:14px; border-radius:999px; background:#374151; overflow:hidden; border:2px solid #111827; }
.hpbar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#22c55e,#a3e635); transition:width .35s; }
.hpbar.foe i { background:linear-gradient(90deg,#a855f7,#ec4899); margin-left:auto; }
.fname { font-size:.8rem; font-weight:800; color:#374151; }
.vs { text-align:center; } .vs-txt { font-size:1.6rem; font-weight:900; color:#dc2626; -webkit-text-stroke:1px #7f1d1d; }
.round-tag { font-size:.75rem; font-weight:900; background:#111827; color:#fde047; padding:2px 8px; border-radius:6px; }
.fight-stage { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.25); background:#1f2937; }
.fight-stage img { display:block; width:100%; transition:filter .2s; }
.fight-stage.flash-hit img { filter:brightness(1.8) saturate(.5); }
.fight-stage.flash-hurt { box-shadow:0 0 0 6px #ef4444, 0 6px 18px rgba(0,0,0,.25); }
.fight-stage.aura1 img { filter:drop-shadow(0 0 0 #a855f7) saturate(1.25) hue-rotate(-8deg); }
.fight-stage.aura2 img { filter:saturate(1.5) hue-rotate(-18deg) contrast(1.1); }
.shake { animation:shake .45s; }
@keyframes shake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-9px,4px)} 40%{transform:translate(8px,-5px)} 60%{transform:translate(-6px,3px)} 80%{transform:translate(5px,-2px)} }
.fglove { position:absolute; top:40%; font-size:4.4rem; line-height:1; z-index:5; filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.fglove.jab { left:-10%; animation:fjab .5s ease-out forwards; } .fglove.direct { right:-10%; animation:fdirect .5s ease-out forwards; } .fglove.uppercut { left:40%; top:95%; animation:fupper .55s ease-out forwards; }
@keyframes fjab { 0%{transform:translateX(0) scaleX(-1)} 45%{transform:translateX(150px) scaleX(-1)} 75%{transform:translateX(120px) scaleX(-1); opacity:1} 100%{transform:translateX(60px) scaleX(-1); opacity:0} }
@keyframes fdirect { 0%{transform:translateX(0)} 45%{transform:translateX(-150px)} 75%{transform:translateX(-120px); opacity:1} 100%{transform:translateX(-60px); opacity:0} }
@keyframes fupper { 0%{transform:translateY(0) rotate(-35deg)} 45%{transform:translateY(-190px) rotate(-5deg)} 75%{transform:translateY(-170px); opacity:1} 100%{transform:translateY(-120px); opacity:0} }
.dmg { position:absolute; font-weight:900; font-size:2rem; color:#fde047; -webkit-text-stroke:2px #7c2d12; z-index:6; animation:dmgUp .8s ease-out forwards; }
.dmg.big { font-size:2.8rem; color:#fb923c; }
.dmg.hurt { color:#fecaca; -webkit-text-stroke:2px #7f1d1d; }
@keyframes dmgUp { 0%{transform:translateY(0) scale(.4); opacity:0} 25%{transform:translateY(-10px) scale(1.2); opacity:1} 100%{transform:translateY(-60px) scale(1); opacity:0} }
.banner { position:absolute; left:0; right:0; top:34%; text-align:center; font-size:2.8rem; font-weight:900; color:#fde047; -webkit-text-stroke:2.5px #7c2d12; z-index:8; animation:banner 1.6s ease-out forwards; text-shadow:0 4px 0 rgba(0,0,0,.35); }
@keyframes banner { 0%{transform:scale(.2); opacity:0} 20%{transform:scale(1.25); opacity:1} 80%{transform:scale(1); opacity:1} 100%{transform:scale(1.1); opacity:0} }
.dodge { margin:0 0 8px; padding:8px 10px; border-radius:14px; background:#7f1d1d; color:#fff; text-align:center; animation:dodgePulse .8s infinite; box-shadow:0 0 0 3px #fca5a5; }
.dodge-label { font-weight:900; font-size:1.05rem; margin-bottom:6px; }
.dodge-bar { height:16px; border-radius:999px; background:#450a0a; overflow:hidden; border:2px solid #fecaca; }
.dodge-bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#facc15,#f97316,#ef4444); }
.dodge-dots { display:flex; gap:10px; justify-content:center; margin-top:6px; }
.dodge-dots b { width:22px; height:22px; border-radius:50%; background:#450a0a; border:2px solid #fecaca; transition:transform .2s, background .2s; }
.dodge-dots b.on { background:#22c55e; border-color:#bbf7d0; transform:scale(1.25); }
@keyframes dodgePulse { 0%,100%{box-shadow:0 0 0 3px #fca5a5} 50%{box-shadow:0 0 0 7px #ef4444} }
.victory { text-align:center; } .victory img { width:150px; border-radius:16px; animation:pop .6s; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.victory .big-t { font-size:2rem; font-weight:900; color:#b45309; margin:8px 0 4px; }
/* Sac de frappe : chaque répétition = un coup, combo tous les 3, le sac s'abîme puis casse */
.ring-zone { position:relative; height:300px; margin:4px auto 8px; max-width:340px; overflow:visible; }
.bagcount { position:absolute; top:0; right:6px; font-size:1.1rem; font-weight:800; color:#b91c1c; }
.hp { position:absolute; top:4px; left:6px; width:110px; height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.hp i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ef4444,#f59e0b); transition:width .25s; }
.chain { position:absolute; left:50%; top:18px; width:4px; height:30px; margin-left:-2px; background:repeating-linear-gradient(#6b7280 0 6px,#9ca3af 6px 9px); }
.bag { position:absolute; left:50%; top:46px; width:128px; margin-left:-64px; transform-origin:50% -28px; transition:filter .2s; }
.bag-cap { height:16px; border-radius:10px 10px 4px 4px; background:#374151; }
.bag-body { position:relative; height:205px; border-radius:10px 10px 38px 38px; background:linear-gradient(90deg,#991b1b,#dc2626 45%,#b91c1c); box-shadow:inset 0 -12px 0 rgba(0,0,0,.15); overflow:hidden; }
.bag-body::before { content:""; position:absolute; left:10px; right:10px; top:48px; border-top:3px dashed rgba(255,255,255,.35); }
.bag-body i { position:absolute; opacity:0; transition:opacity .3s; }
.crack { width:3px; background:#1f2937; border-radius:2px; }
.c1 { height:40px; left:26px; top:22px; transform:rotate(25deg); } .c2 { height:52px; right:22px; top:62px; transform:rotate(-30deg); } .c3 { height:36px; left:44px; top:98px; transform:rotate(60deg); }
.patch { width:34px; height:14px; left:30px; top:74px; background:#d1d5db; transform:rotate(-12deg); border-radius:2px; }
.leak { width:8px; height:0; left:44px; bottom:0; background:#d6a75a; }
.bag.dmg1 .c1 { opacity:1; }
.bag.dmg2 .c1, .bag.dmg2 .c2, .bag.dmg2 .patch { opacity:1; }
.bag.dmg3 .c1, .bag.dmg3 .c2, .bag.dmg3 .c3, .bag.dmg3 .patch { opacity:1; } .bag.dmg3 { filter:saturate(.7) brightness(.9); }
.bag.dmg3 .leak { opacity:1; animation:leak 1s linear infinite; }
@keyframes leak { 0%{height:0; bottom:0} 100%{height:40px; bottom:-40px} }
.bag.hit-jab { animation:swingL .45s ease-out; } .bag.hit-direct { animation:swingR .45s ease-out; } .bag.hit-uppercut { animation:swingUp .5s ease-out; }
.bag.hit-combo { animation:swingBig .7s ease-out; }
@keyframes swingL { 0%{transform:rotate(0)} 30%{transform:rotate(14deg)} 65%{transform:rotate(-6deg)} 100%{transform:rotate(0)} }
@keyframes swingR { 0%{transform:rotate(0)} 30%{transform:rotate(-14deg)} 65%{transform:rotate(6deg)} 100%{transform:rotate(0)} }
@keyframes swingUp { 0%{transform:translateY(0)} 30%{transform:translateY(-22px) rotate(4deg)} 70%{transform:translateY(4px)} 100%{transform:translateY(0)} }
@keyframes swingBig { 0%{transform:rotate(0) scale(1)} 20%{transform:rotate(28deg) scale(1.06)} 50%{transform:rotate(-18deg)} 80%{transform:rotate(8deg)} 100%{transform:rotate(0)} }
.bag.broken { animation:bagBreak 1.1s ease-in forwards; }
@keyframes bagBreak { 0%{transform:rotate(0)} 25%{transform:rotate(-20deg) scale(1.1)} 100%{transform:translateY(160px) rotate(70deg) scale(.6); opacity:0} }
.bag.drop { animation:bagDrop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes bagDrop { 0%{transform:translateY(-200px)} 100%{transform:translateY(0)} }
.fx { position:absolute; inset:0; pointer-events:none; }
/* classe propre au sac (« .glove » existe déjà pour le gant qui s'envole en lecture et l'écrasait) */
.pglove { position:absolute; top:120px; left:50%; font-size:4.2rem; line-height:1; margin-left:-34px; z-index:5; opacity:1; filter:drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.pglove.jab { animation:pjab .6s ease-out forwards; } .pglove.direct { animation:pdirect .6s ease-out forwards; } .pglove.uppercut { animation:pupper .65s ease-out forwards; }
@keyframes pjab { 0%{transform:translateX(-160px) scaleX(-1); opacity:1} 45%{transform:translateX(-42px) scaleX(-1); opacity:1} 75%{transform:translateX(-70px) scaleX(-1); opacity:1} 100%{transform:translateX(-110px) scaleX(-1); opacity:0} }
@keyframes pdirect { 0%{transform:translateX(160px); opacity:1} 45%{transform:translateX(42px); opacity:1} 75%{transform:translateX(70px); opacity:1} 100%{transform:translateX(110px); opacity:0} }
@keyframes pupper { 0%{transform:translateY(140px) rotate(-40deg); opacity:1} 45%{transform:translateY(20px) rotate(-10deg); opacity:1} 75%{transform:translateY(40px); opacity:1} 100%{transform:translateY(80px); opacity:0} }
.pow { position:absolute; font-weight:900; color:#f59e0b; -webkit-text-stroke:1.5px #7c2d12; font-size:2.1rem; z-index:4; animation:pow .7s ease-out forwards; white-space:nowrap; }
.pow.big { font-size:3rem; color:#fde047; }
@keyframes pow { 0%{transform:scale(.3); opacity:0} 25%{transform:scale(1.25); opacity:1} 100%{transform:scale(1) translateY(-26px); opacity:0} }
.sand { position:absolute; width:7px; height:7px; border-radius:50%; background:#d6a75a; animation:sand 1s ease-out forwards; }
@keyframes sand { 0%{transform:translate(0,0); opacity:1} 100%{transform:translate(var(--dx),var(--dy)); opacity:0} }
.ko { position:absolute; left:0; right:0; top:70px; text-align:center; font-size:3rem; font-weight:900; color:#dc2626; -webkit-text-stroke:2px #fff; animation:pow 1.4s ease-out forwards; }
.echo-end { font-size:1.15rem; margin-top:16px; }
.echo-end .st { font-size:2rem; }
.read:disabled { opacity:.6; cursor:default; }
.text .w .mute, .focus-word .g.mute { color:#b0b7c3; }
.text .w .v { color:var(--syl1); } .text .w .c { color:var(--ink); }
.text .w.ok .v, .text .w.ok .c { color:var(--ok); }
.text .w.ok .mute { color:#86efac; }
.text.blur { filter:blur(6px); }
.text .punct { color:#9ca3af; }
.controls { display:flex; align-items:center; gap:14px; }
.mic { width:84px; height:84px; border-radius:50%; background:#fff; border:4px solid #e5e7eb; font-size:2rem; position:relative; box-shadow:0 4px 12px rgba(0,0,0,.12); flex-shrink:0; }
.mic.on { border-color:var(--red); animation:pulse 1.2s infinite; }
.mic.busy {  }
.mic .dot { position:absolute; top:6px; right:6px; width:14px; height:14px; border-radius:50%; background:#d1d5db; }
.mic.on .dot { background:var(--red); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)} 70%{box-shadow:0 0 0 18px rgba(220,38,38,0)} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0)} }
.side { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.coach { display:flex; gap:10px; align-items:flex-start; }
.coach-avatar { width:52px; height:52px; border-radius:50%; border:3px solid var(--gold); flex-shrink:0; }
.bubble { background:#fff; border-radius:16px; padding:10px 14px; font-size:1.15rem; flex:1; box-shadow:0 2px 8px rgba(0,0,0,.06); min-height:48px; }
.bubble.speaking { border:2px solid var(--gold); }
.bubble-wrap { flex:1; display:flex; flex-direction:column; gap:4px; }
.tech { font-size:.8rem; color:#b45309; min-height:0; }
.row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
@media (min-width:820px) and (orientation:landscape) {
  .page-grid { grid-template-columns:44% 1fr; grid-template-rows:1fr; }
  .text { font-size:2.4rem; }
}

/* Zoom mot */
.focus { position:fixed; inset:0; background:rgba(31,41,55,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:10; }
.focus-card { background:#fff; border-radius:24px; padding:28px 24px; width:min(92vw,520px); display:flex; flex-direction:column; align-items:center; gap:18px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.focus-word { font-size:3.6rem; font-weight:700; letter-spacing:.03em; display:flex; gap:.08em; flex-wrap:wrap; justify-content:center; }
.focus-word .s:nth-child(odd) { color:var(--syl1); } .focus-word .s:nth-child(even) { color:var(--syl2); }
.focus-word .s { border-bottom:5px solid currentColor; padding:0 .05em; }
.focus-heard { font-size:1.5rem; font-weight:800; text-align:center; color:#b45309; background:#fffbeb; border:2px dashed #fcd34d; border-radius:14px; padding:8px 14px; margin:6px 0 2px; }
.focus-hint { font-size:1.2rem; text-align:center; color:#4b5563; min-height:1.6em; }
.focus-word .g { padding:0 .04em; color:#374151; } .focus-word .g.v { color:var(--syl1); } .focus-word .g:nth-child(even).v { color:var(--syl2); }
.teaser { display:flex; gap:12px; align-items:center; background:#fff; border-radius:16px; padding:10px 12px; width:100%; text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.teaser img { width:110px; height:82px; object-fit:cover; border-radius:10px; filter:blur(5px) saturate(1.2); flex-shrink:0; }
.teaser-title { font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--red); }
.teaser-text { font-size:1.05rem; }

/* Fin de round */
#screen-round, #screen-end { align-items:center; justify-content:center; padding:24px; text-align:center; }
.round-card { max-width:460px; width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.round-stars { font-size:4rem; animation:pop .6s ease-out; }
@keyframes pop { 0%{transform:scale(.3)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.belt { width:100%; height:26px; background:#e5e7eb; border-radius:999px; overflow:hidden; border:3px solid #111; }
.belt-fill { height:100%; background:#fde047; width:0; transition:width 1s ease-out; }
.sub { font-size:1.2rem; margin:0; }
.end-img { width:100%; max-width:400px; border-radius:18px; }

/* Parents */
.parent-body { padding:12px; display:flex; flex-direction:column; gap:12px; max-width:600px; margin:0 auto; width:100%; }
.card { background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.card h3 { margin:0 0 8px; font-family:"Baloo 2",sans-serif; }
.hint { font-size:.9rem; color:#6b7280; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:4px 6px; border-bottom:1px solid #f3f4f6; }
.words { font-size:1.1rem; line-height:1.8; }

/* Affiche à compléter (10 pièces) */
.puzzle { display:grid; grid-template-columns:repeat(5,1fr); width:100%; max-width:440px; aspect-ratio:4/3; gap:3px; border-radius:16px; overflow:hidden; background:#111; padding:3px; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.puzzle.small { max-width:260px; }
.puzzle .t { position:relative; background-color:#374151; background-repeat:no-repeat; background-size:500% 200%; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.3rem; }
.puzzle .t.on { color:transparent; }
.puzzle .t.new { animation:reveal .9s ease-out; }
@keyframes reveal { 0%{transform:scale(.2) rotate(-20deg); filter:brightness(3)} 60%{transform:scale(1.15)} 100%{transform:scale(1) rotate(0); filter:brightness(1)} }
.sub.small { font-size:1rem; color:#6b7280; }

/* Petits écrans en portrait : tout doit tenir sans scroller */
@media (max-width:600px) and (orientation:portrait) {
  .page-grid { grid-template-rows:minmax(110px,24vh) 1fr; }
  .text { font-size:1.6rem; line-height:1.5; padding:10px 12px; }
  .mic { width:68px; height:68px; font-size:1.6rem; }
  .controls { position:sticky; bottom:6px; background:var(--cream); padding:4px 0; }
  .focus-word { font-size:2.8rem; }
  .teaser img { width:80px; height:60px; }
}

/* Syllabes en couleur dans le texte */
.text .w .s1 { color:#b91c1c; } .text .w .s2 { color:#1d4ed8; }
.text .w.ok .s1, .text .w.ok .s2 { color:var(--ok); }
.text .w.bad .s1, .text .w.bad .s2 { color:var(--bad); }
/* Son difficile dans le zoom */
.focus-word .hl { color:#dc2626; background:#fef08a; border-radius:8px; border-bottom-color:#dc2626; transform:scale(1.15); display:inline-block; }
.focus-word .dim { color:#6b7280; border-bottom-color:transparent; }
/* Animations de récompense */
.illu { position:relative; }
#page-img.punch { animation:punch .35s ease-out; }
@keyframes punch { 0%{transform:translateX(0) rotate(0)} 30%{transform:translateX(-10px) rotate(-3deg) scale(1.03)} 60%{transform:translateX(8px) rotate(2deg)} 100%{transform:translateX(0)} }
.glove { position:fixed; font-size:2rem; pointer-events:none; z-index:20; animation:fly .8s ease-out forwards; }
@keyframes fly { 0%{transform:translate(0,0) scale(.6); opacity:1} 100%{transform:translate(0,-90px) scale(1.4) rotate(-20deg); opacity:0} }
.combo { position:absolute; top:10px; right:12px; background:var(--gold); color:#fff; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.3rem; padding:6px 14px; border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.2); animation:pop .5s ease-out; }
.splash { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:4rem; color:#dc2626; text-shadow:0 4px 0 #fff, 0 8px 24px rgba(0,0,0,.25); pointer-events:none; z-index:30; animation:splash 1.1s ease-out forwards; }
@keyframes splash { 0%{transform:scale(.2) rotate(-10deg); opacity:0} 25%{transform:scale(1.2) rotate(3deg); opacity:1} 75%{transform:scale(1); opacity:1} 100%{transform:scale(1.3); opacity:0} }
/* Bibliothèque */
.library { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; padding:6px 14px 20px; max-width:980px; margin:0 auto; width:100%; }
.book { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.1); cursor:pointer; position:relative; border:3px solid transparent; transition:transform .15s; }
.book:active { transform:scale(.97); }
.book.active { border-color:var(--red); }
.book img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.book.locked img { filter:grayscale(.6) brightness(.85); }
.book .info { padding:10px 12px; }
.book .t { font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.1rem; line-height:1.2; }
.book .sub { font-size:.9rem; color:#6b7280; margin-top:2px; }
.book .tag { position:absolute; top:10px; left:10px; background:var(--red); color:#fff; font-weight:700; padding:4px 10px; border-radius:999px; font-size:.85rem; }
.book.active .tag { background:var(--ok); }
.book .price { position:absolute; top:10px; right:10px; background:#fff; color:var(--ink); font-weight:700; padding:4px 10px; border-radius:999px; font-size:.9rem; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.book .lock { position:absolute; bottom:64px; right:12px; font-size:1.6rem; }
.book .progress { height:6px; background:#e5e7eb; } .book .progress i { display:block; height:100%; background:var(--gold); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff; padding:12px 20px; border-radius:999px; font-size:1.05rem; z-index:40; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.sound-fix { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50; font-size:1.2rem; animation:pop .5s ease-out; }
.replay { width:52px; height:52px; border-radius:50%; background:#fff; border:3px solid var(--gold); font-size:1.4rem; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.1); align-self:center; }
.replay:active { transform:scale(.92); }

/* Micro interrupteur : état pause */
.mic-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.mic-hint { font-size:.75rem; color:#6b7280; text-align:center; max-width:110px; line-height:1.2; min-height:2.4em; }
.mic.paused { border-color:var(--gold); background:#fef3c7; }
.ghost.help { background:#fef3c7; border-color:#fcd34d; font-weight:700; }
.flags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.75rem; color:#9ca3af; margin-top:4px; }
.flags .ghost.tiny { opacity:.8; }

/* Signalement d'un mot (parents) */
.text.flagmode .w { outline:2px dashed #f59e0b; outline-offset:2px; cursor:pointer; }
.flag-card { gap:10px; }
.flag-word { font-size:2.4rem; font-weight:700; }
.flag-status { font-size:.9rem; color:#6b7280; margin-bottom:6px; }
.flag-opt { width:100%; text-align:left; background:#fff; border:2px solid #e5e7eb; border-radius:12px; padding:12px 14px; font-size:1rem; }
.flag-opt:active { background:#fef3c7; }
.round-flags { font-size:.85rem; color:#6b7280; display:flex; flex-direction:column; gap:6px; align-items:center; }
.round-flags .w { display:inline-block; padding:4px 10px; margin:3px; border-radius:8px; background:#fff; border:1px solid #e5e7eb; cursor:pointer; font-size:1rem; color:#1f2937; }
.round-flags .w.n { border-color:#fca5a5; background:#fee2e2; }
.round-note { display:flex; gap:6px; align-items:center; width:100%; max-width:440px; }
.round-note input { flex:1; font:inherit; font-size:.95rem; padding:9px 12px; border:1px solid #d1d5db; border-radius:10px; min-width:0; }
.mic.thinking { border-color:var(--gold); background:#fef3c7; animation:none; }
.mic.thinking::after { content:"⏳"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#fef3c7; border-radius:50%; font-size:2rem; animation:spin 1.2s linear infinite; }
@keyframes spin { 0%{transform:rotate(0)} 50%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} }
.mic.thinking .dot { background:var(--gold); animation:blink .6s infinite; }
.btn.thinking { opacity:.7; } .btn.thinking::before { content:"⏳ "; display:inline-block; animation:spin 1.2s linear infinite; }
.mic.hear { border-color:#3b82f6; box-shadow:0 0 0 12px rgba(59,130,246,.35); transition:box-shadow .12s; }
.text.thinking { box-shadow:none; }
@keyframes blink { 50% { opacity:.2; } }

/* Mode écoute */
.text.listen .w.cur { background:#fef08a; }
.listen-controls { display:flex; gap:12px; align-items:center; justify-content:center; }
.listen-controls .big { font-size:1.2rem; padding:12px 22px; }
.book .actions { display:flex; gap:8px; padding:0 12px 12px; }
.book .actions button { flex:1; font-size:.95rem; padding:8px 6px; border-radius:12px; border:2px solid #e5e7eb; background:#fff; font-family:"Baloo 2",sans-serif; font-weight:800; }
.book .actions button.lire { background:var(--red); color:#fff; border-color:var(--red); }

/* Esquive : cible à toucher après les 3 mots ; super attaque : jauge et rayon kaméhaméha */
.fx, .banner { pointer-events:none; }
.dodge-tap { position:absolute; width:118px; height:118px; margin:0; padding:0; border-radius:50%; border:6px solid #fff; background:radial-gradient(circle,#67e8f9 0%,#0891b2 62%,#155e75 100%); color:#fff; font-size:2.6rem; font-weight:900; line-height:1; z-index:9; box-shadow:0 0 0 7px rgba(34,211,238,.45),0 8px 18px rgba(0,0,0,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; transform:translate(-50%,-50%); animation:tapPulse .7s ease-in-out infinite; }
.dodge-tap span { font-size:.8rem; letter-spacing:.08em; }
.dodge-tap.hidden { display:none; }
@keyframes tapPulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.12); } }
.ki { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.ki-label { font-weight:900; font-size:.85rem; color:#0369a1; white-space:nowrap; }
.ki-bar { flex:1; height:12px; border-radius:999px; background:#0f172a; overflow:hidden; border:2px solid #7dd3fc; }
.ki-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#38bdf8,#e0f2fe); transition:width .4s; }
.ki.full .ki-bar { animation:kiPulse .8s ease-in-out infinite; }
@keyframes kiPulse { 0%,100% { box-shadow:0 0 6px 1px #38bdf8; } 50% { box-shadow:0 0 18px 6px #7dd3fc; } }
.beam { position:absolute; left:0; top:50%; height:40%; width:0; z-index:7; filter:saturate(1.4); border-radius:0 999px 999px 0; transform:translateY(-50%); background:linear-gradient(180deg,rgba(186,230,253,0) 0%,#7dd3fc 22%,#fff 50%,#7dd3fc 78%,rgba(186,230,253,0) 100%); box-shadow:0 0 30px 12px rgba(56,189,248,.8); pointer-events:none; }
.beam.go { animation:beamGo 1.5s ease-out forwards; }
@keyframes beamGo { 0% { width:0; opacity:1; } 35% { width:100%; opacity:1; } 80% { width:100%; opacity:1; } 100% { width:100%; opacity:0; } }
.echo-word.sentence { font-size:2rem; flex-wrap:wrap; gap:.35em; letter-spacing:0; }
.echo-word .sw.ok { color:var(--ok); }

/* Super attaque lue mot à mot, comme dans le jeu de lecture */
.super-text { font-size:1.9rem; text-align:center; margin:8px 0 6px; }
.super-text .w.ok { animation:pop .4s; }

/* Victoire : Freezer dernière transformation K.O. en grand, ceinture en petit */
.victory img.ko-img { width:100%; max-width:360px; border-radius:16px; }
.victory img.belt-mini { display:block; width:90px; border-radius:12px; margin:4px auto 8px; }

#foe-img.flip { transform:scaleX(-1); }

/* Test de lecture hebdomadaire : même écran que le combat, sans le combat */
.echo-card.calib .fight-hud, .echo-card.calib #fight-stage, .echo-card.calib #ki, .echo-card.calib #dodge, .echo-card.calib #echo-again { display:none; }

/* Bandeau d'installation (PWA) */
.install { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:10px; padding:10px 12px; background:#1D2433; color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.install img { width:44px; height:44px; border-radius:10px; flex:none; }
.install-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.95rem; line-height:1.25; }
.install-txt span { font-size:.85rem; opacity:.85; }
.install-go { font:inherit; font-weight:800; border:0; border-radius:12px; padding:10px 14px; background:#dc2626; color:#fff; cursor:pointer; flex:none; }
.install-x { font:inherit; border:0; background:transparent; color:#fff; opacity:.7; font-size:1.1rem; padding:6px; cursor:pointer; flex:none; }