/* =====================================================================
   Mini Échecs : L'Académie des Petits Champions
   Design pour enfants de 5 à 7 ans : gros boutons, couleurs vives,
   très peu de texte, fonctionne au toucher et à la souris.
   ===================================================================== */

:root {
  --ink: #2A1F45;
  --ink-soft: #5E5480;
  --bg1: #DDF0FF;
  --bg2: #F1E6FF;
  --card: #FFFFFF;
  --card-edge: rgba(42, 31, 69, .12);
  --primary: #7C6CF2;
  --primary-dark: #5B4BD1;
  --green: #2BB673;
  --red: #FF5A5F;
  --yellow: #FFC94D;
  --orange: #FF8A3D;
  --blue: #4CA7FF;
  --pink: #FF8FA3;
  --light-sq: #F7E8CB;
  --dark-sq: #C58D5D;
  --frame: #7B4F2E;
  --shadow: 0 6px 0 rgba(42, 31, 69, .14), 0 10px 24px rgba(42, 31, 69, .10);
  --radius: 22px;
  --app-h: 100vh;
  --world: var(--primary);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif;
}
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F4EFFF; --ink-soft: #C9C0EA; --bg1: #1D1838; --bg2: #2B2150; --card: #362B63; --card-edge: rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"] { --ink: #F4EFFF; --ink-soft: #C9C0EA; --bg1: #1D1838; --bg2: #2B2150; --card: #362B63; --card-edge: rgba(255,255,255,.12); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body {
  color: var(--ink);
  background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.55) 0 120px, transparent 121px),
              radial-gradient(circle at 85% 85%, rgba(255,201,77,.18) 0 160px, transparent 161px),
              linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }

#app { height: var(--app-h); position: relative; }
.screen {
  display: none; flex-direction: column; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: flex; animation: screenIn .3s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Barre du haut ---------- */
.topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px 4px; }
.topbar-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: clamp(1.1rem, 3.2vw, 1.5rem); font-weight: 800; text-align: center; line-height: 1.1; }
.tt-icon { font-size: 1.6em; display: inline-flex; }
.tt-icon svg { width: 1.6em; height: 1.6em; }
.step-dots { display: flex; gap: 6px; padding-right: 4px; }
.step-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--card-edge); transition: .3s; }
.step-dots i.now { background: var(--yellow); transform: scale(1.25); box-shadow: 0 0 0 3px rgba(255,201,77,.35); }
.step-dots i.done { background: var(--green); box-shadow: none; }

/* ---------- Boutons ---------- */
.icon-btn {
  border: 0; background: var(--card); border-radius: 20px; min-width: 60px; min-height: 60px; padding: 6px 10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--shadow); transition: transform .08s, box-shadow .08s;
}
.icon-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 rgba(42,31,69,.14); }
.ib-icon { font-size: 28px; line-height: 1; display: inline-flex; }
.ib-icon svg { width: 34px; height: 34px; }
.ib-label { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.nav-btn { min-width: 56px; min-height: 56px; }
.ctrl { min-width: 72px; min-height: 68px; }
.ctrl.toggle.on, .icon-btn.mode.on { background: var(--yellow); }
.ctrl.toggle.on .ib-label, .icon-btn.mode.on .ib-label { color: var(--ink); }
.go-btn.ready { background: var(--green); animation: goPulse 1.2s ease-in-out infinite; }
.go-btn.ready .ib-label { color: #fff; }
@keyframes goPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.big-btn {
  border: 0; border-radius: 20px; padding: 14px 22px; font-size: 1.15rem; font-weight: 800; min-height: 60px;
  background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow); transition: transform .08s;
}
.big-btn:active { transform: translateY(4px); }
.big-btn.primary { background: var(--primary); color: #fff; }
.big-btn.secondary { background: var(--card); color: var(--primary-dark); box-shadow: inset 0 0 0 3px var(--primary), var(--shadow); }
.big-btn.danger { background: var(--red); color: #fff; }

/* ---------- Mise en page de jeu ---------- */
.play-layout {
  --bs: min(94vw, calc(var(--app-h) - 330px), 620px);
  flex: 1; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 8px; padding: 6px 10px 14px;
}
.guide-host, .side { width: min(100%, 640px); }
.side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.extra:empty { display: none; }
.extra { display: flex; justify-content: center; width: 100%; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.board-area { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.game-layout { --bs: min(94vw, calc(var(--app-h) - 380px), 620px); }
.training-layout { --bs: min(94vw, calc(var(--app-h) - 420px), 600px); }

@media (orientation: landscape) and (min-width: 700px) {
  .play-layout {
    --bs: min(calc(var(--app-h) - 100px), 60vw, 760px);
    grid-template-columns: auto minmax(270px, 400px); grid-template-rows: 1fr 1fr;
    grid-template-areas: "board guide" "board side"; align-content: center; justify-content: center; column-gap: 22px;
  }
  .game-layout { --bs: min(calc(var(--app-h) - 150px), 58vw, 720px); }
  .training-layout { --bs: min(calc(var(--app-h) - 100px), 56vw, 720px); }
  .play-layout .board-area { grid-area: board; align-self: center; }
  .play-layout .guide-host { grid-area: guide; align-self: end; }
  .play-layout .side { grid-area: side; align-self: start; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .topbar { padding-top: 4px; }
  .play-layout { --bs: calc(var(--app-h) - 76px); }
  .game-layout { --bs: calc(var(--app-h) - 120px); }
  .guide .leo { width: 54px; height: 54px; }
  .bubble { font-size: 1rem; }
  .ctrl { min-width: 60px; min-height: 56px; }
}

/* ---------- Échiquier ---------- */
.board {
  position: relative; width: var(--bs); height: var(--bs);
  border: 8px solid var(--frame); border-radius: 16px; background: var(--frame);
  box-shadow: 0 10px 0 rgba(0,0,0,.18), 0 18px 34px rgba(42,31,69,.25);
}
.board-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; border-radius: 8px; overflow: hidden; }
.sq { position: relative; cursor: pointer; }
.sq.light { background: var(--light-sq); }
.sq.dark { background: var(--dark-sq); }
.sq-fx, .sq-mark, .sq-piece, .sq-badge { position: absolute; pointer-events: none; }
.sq-fx { inset: 0; transition: background .2s; }
.sq-mark { inset: 0; display: flex; align-items: center; justify-content: center; }
.sq-piece { inset: 3%; display: flex; z-index: 2; }
.sq-piece svg { width: 100%; height: 100%; }
.sq-badge { inset: 14%; z-index: 3; display: flex; }
.piece-svg { filter: drop-shadow(0 3px 1px rgba(0,0,0,.25)); overflow: visible; }

.sq.is-last .sq-fx { background: rgba(255, 214, 64, .42); }
.sq.is-selected .sq-fx { background: rgba(255, 214, 64, .55); box-shadow: inset 0 0 0 5px #FFB300; }
.sq.is-selected .sq-piece { animation: lift .9s ease-in-out infinite; }
@keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
.sq.is-move .sq-mark::after { content: ''; width: 32%; height: 32%; border-radius: 50%; background: rgba(43, 182, 115, .9); box-shadow: 0 0 0 4px rgba(255,255,255,.65); animation: dot 1.2s ease-in-out infinite; z-index: 4; }
@keyframes dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.sq.is-capture .sq-mark::after { content: ''; position: absolute; inset: 5%; border-radius: 50%; border: 6px solid var(--red); box-shadow: 0 0 0 3px rgba(255,255,255,.7); animation: dot 1s ease-in-out infinite; z-index: 4; }
.sq.is-check .sq-fx { background: radial-gradient(circle, rgba(255,40,40,.95) 0%, rgba(255,60,60,.55) 45%, transparent 75%); animation: checkPulse 1s ease-in-out infinite; }
@keyframes checkPulse { 50% { opacity: .55; } }
.sq.is-glow .sq-fx { background: rgba(255, 236, 80, .85); box-shadow: inset 0 0 0 5px #FFB300; animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { background: rgba(255, 246, 170, .7); } }
.sq.is-target .sq-fx { box-shadow: inset 0 0 0 5px rgba(124,108,242,.95); background: rgba(124,108,242,.22); }
.sq.is-found .sq-fx { background: rgba(43, 182, 115, .65); box-shadow: inset 0 0 0 4px #1E9B5E; }
.sq.is-found .sq-mark::before { content: '✔'; color: #fff; font-size: calc(var(--bs) / 16); font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.2); z-index: 1; }
.sq.is-danger .sq-fx { background: repeating-linear-gradient(45deg, rgba(255,90,95,.6) 0 7px, rgba(255,90,95,.3) 7px 14px); }
.sq.is-hint .sq-fx { box-shadow: inset 0 0 0 6px var(--yellow); animation: hintBlink .7s ease-in-out infinite; }
@keyframes hintBlink { 50% { background: rgba(255, 201, 77, .65); } }
.board-star { width: 100%; height: 100%; animation: starBob 1.6s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
@keyframes starBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8%) rotate(6deg); } }
.sq-badge.collecting svg { animation: starCollect .6s ease-in forwards; }
@keyframes starCollect { to { transform: translateY(-120%) scale(1.8) rotate(180deg); opacity: 0; } }

.sq.shake .sq-piece, .sq.shake .sq-fx { animation: shake .45s; }
.sq.shake:not(:has(.has-piece)) .sq-fx { background: rgba(255, 90, 95, .55); }
@keyframes shake { 20%, 60% { transform: translateX(-8%); } 40%, 80% { transform: translateX(8%); } }
.sq.pop .sq-piece, .sq.pop .sq-fx { animation: pop .45s; }
@keyframes pop { 40% { transform: scale(1.3); } }
.sq.bump .sq-piece { animation: bump .7s; }
@keyframes bump { 30% { transform: translateY(-22%); } 45% { transform: translateY(-8%); } 60% { transform: translateY(-16%); } }

.sq-piece .eyes { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
.sq:nth-child(3n) .sq-piece .eyes { animation-delay: 1.3s; }
.sq:nth-child(5n) .sq-piece .eyes { animation-delay: 2.7s; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.coord { position: absolute; font-size: calc(var(--bs) / 38); font-weight: 800; opacity: 0; pointer-events: none; z-index: 1; }
.show-coords .coord { opacity: .75; }
.coord-f { right: 4%; bottom: 1%; }
.coord-r { left: 4%; top: 1%; }
.sq.light .coord { color: var(--dark-sq); }
.sq.dark .coord { color: var(--light-sq); }

.board-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
.arrow { fill: none; stroke-width: .17; stroke-linecap: round; stroke-linejoin: round; opacity: .92; animation: arrowIn .35s ease-out; }
@keyframes arrowIn { from { opacity: 0; } }
.arrow-go { stroke: var(--green); }
.arrow-no { stroke: var(--red); stroke-dasharray: .25 .18; }
.arrow-hint { stroke: #FFB300; animation: arrowIn .35s, hintArrow 1s ease-in-out infinite; }
@keyframes hintArrow { 50% { opacity: .55; } }
.arrow-demo { stroke: var(--blue); }
.ah-go path { fill: var(--green); } .ah-no path { fill: var(--red); } .ah-hint path { fill: #FFB300; } .ah-demo path { fill: var(--blue); }

/* ---------- Léo le guide ---------- */
.guide { display: flex; align-items: center; gap: 8px; width: 100%; }
.leo { width: 86px; height: 86px; flex: none; cursor: pointer; }
.leo svg { width: 100%; height: 100%; overflow: visible; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(2px) scale(1.02, .98); } }
.leo .leo-wing-l, .leo .leo-wing-r { transform-box: fill-box; }
.leo .leo-wing-l { transform-origin: right center; animation: flapL 2.4s ease-in-out infinite; }
.leo .leo-wing-r { transform-origin: left center; animation: flapR 2.4s ease-in-out infinite; }
@keyframes flapL { 50% { transform: rotate(-10deg); } }
@keyframes flapR { 50% { transform: rotate(10deg); } }
.leo .leo-head { transform-box: fill-box; transform-origin: center bottom; }
.leo.talk .leo-head { animation: nod .45s ease-in-out 3; }
@keyframes nod { 50% { transform: rotate(-5deg) translateY(-2px); } }
.leo.cheer svg { animation: jump .55s ease-out 2; }
@keyframes jump { 40% { transform: translateY(-18px) scale(1.06); } 70% { transform: translateY(0) scale(1.08, .92); } }
.leo.oops svg { animation: wobble .6s ease-in-out; }
@keyframes wobble { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
.leo.think .leo-head { transform: rotate(-8deg); transition: transform .3s; }
.bubble {
  flex: 1; position: relative; background: var(--card); border-radius: 22px; padding: 10px 14px; min-height: 64px;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow);
  font-size: clamp(1.05rem, 2.7vw, 1.35rem); font-weight: 800; line-height: 1.25;
}
.bubble::before { content: ''; position: absolute; left: -12px; top: 50%; margin-top: -12px; border: 12px solid transparent; border-left: 0; border-right-color: var(--card); }
.bubble.pop { animation: bubblePop .3s ease-out; }
@keyframes bubblePop { from { transform: scale(.92); opacity: .4; } }
.bubble-pic { display: flex; align-items: center; gap: 2px; flex: none; }
.pic { display: inline-flex; align-items: center; }
.pic-piece svg { width: 38px; height: 38px; }
.pic-star svg { width: 30px; height: 30px; }
.pic-arrow { font-size: 24px; color: var(--primary); font-weight: 900; }
.pic-emoji { font-size: 26px; }
.speak-btn { min-width: 52px; min-height: 52px; border-radius: 50%; }
.guide.compact .leo { width: 62px; height: 62px; }
.guide.compact .bubble { min-height: 52px; font-size: clamp(.95rem, 2.4vw, 1.15rem); }
@media (max-width: 420px) {
  .leo { width: 66px; height: 66px; }
  .bubble { padding: 8px 10px; }
  .pic-piece svg { width: 30px; height: 30px; }
  .bubble-pic { display: none !important; }
}

/* ---------- Menu ---------- */
#scr-menu { align-items: center; padding-bottom: 20px; }
.menu-head { text-align: center; padding: 18px 10px 4px; }
.logo { margin: 0; font-size: clamp(2.4rem, 9vw, 4rem); font-weight: 900; letter-spacing: .5px; line-height: 1; }
.logo-1 { color: var(--orange); text-shadow: 0 4px 0 #C95E1C; }
.logo-2 { color: var(--primary); text-shadow: 0 4px 0 var(--primary-dark); }
.logo-sub { font-size: clamp(1rem, 3.4vw, 1.3rem); font-weight: 800; color: var(--ink-soft); margin-top: 6px; }
.menu-guide { width: min(94vw, 640px); margin: 8px 0; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: min(94vw, 640px); }
.menu-btn {
  border: 0; border-radius: 26px; padding: 16px 10px; min-height: 120px; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow);
  transition: transform .1s; text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.menu-btn:active { transform: translateY(4px) scale(.98); }
.mb-icon { font-size: 52px; line-height: 1; display: inline-flex; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.mb-icon svg { width: 62px; height: 62px; }
.mb-label { font-size: 1.2rem; font-weight: 900; }
.m-adventure { grid-column: span 2; background: linear-gradient(135deg, #FF8A3D, #FF5A5F); min-height: 140px; animation: invite 2.4s ease-in-out infinite; }
.m-adventure .mb-icon { font-size: 64px; }
@keyframes invite { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.m-pieces { background: linear-gradient(135deg, #4CA7FF, #2F7FE0); }
.m-training { background: linear-gradient(135deg, #2BB673, #1E9159); }
.m-ai { background: linear-gradient(135deg, #A996FF, #7C6CF2); }
.m-duo { background: linear-gradient(135deg, #FF8FA3, #F0627E); }
.m-rewards { background: linear-gradient(135deg, #FFC94D, #F2A417); }
.m-settings { background: linear-gradient(135deg, #8E9AB5, #66738F); }
@media (min-width: 760px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); width: min(94vw, 900px); }
  .menu-guide { width: min(94vw, 900px); }
  .m-adventure { grid-column: span 3; }
}
.menu-foot { margin-top: 14px; font-size: 1.3rem; font-weight: 900; }
.menu-stars { display: inline-flex; align-items: center; gap: 6px; background: var(--card); padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); }
.inline-star { width: 1.3em; height: 1.3em; vertical-align: middle; }

/* ---------- Mondes ---------- */
#scr-worlds > .guide, #scr-lessons > .guide, #scr-pieces > .guide, #scr-ai > .guide, #scr-rewards > .guide, #scr-settings > .guide { width: min(94vw, 760px); margin: 6px auto; }
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 8px 14px 24px; width: min(100%, 980px); margin: 0 auto; }
.world-card {
  position: relative; border: 0; border-radius: 26px; padding: 18px 10px 14px; min-height: 170px; background: var(--card);
  box-shadow: inset 0 0 0 5px var(--world), var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.world-card:active { transform: translateY(3px); }
.wc-num { position: absolute; top: 8px; left: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--world); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.wc-icon { font-size: 56px; line-height: 1; display: inline-flex; }
.wc-icon svg { width: 66px; height: 66px; }
.wc-title { font-weight: 900; font-size: 1.05rem; text-align: center; }
.wc-stars { font-weight: 800; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.wc-badge { position: absolute; top: 6px; right: 8px; font-size: 26px; }
.world-card.locked { filter: grayscale(.85); opacity: .6; }
.world-card.next { animation: nextBounce 1.4s ease-in-out infinite; }
@keyframes nextBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.shake { animation: shake .45s; }

.lesson-path { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; padding: 18px 14px 40px; max-width: 900px; margin: 0 auto; }
.lesson-node { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; }
.lesson-node:nth-child(even) { transform: translateY(26px); }
.ln-circle { width: 104px; height: 104px; border-radius: 50%; background: var(--world); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -8px 0 rgba(0,0,0,.15), 0 0 0 6px var(--card), var(--shadow); }
.ln-icon { font-size: 48px; }
.ln-title { font-weight: 900; font-size: 1rem; text-align: center; line-height: 1.15; }
.ln-stars { display: flex; gap: 2px; }
.lesson-node.locked .ln-circle { background: #B9B3CC; }
.lesson-node.locked .ln-title { opacity: .55; }
.lesson-node.next .ln-circle { animation: nextPulse 1.2s ease-in-out infinite; }
@keyframes nextPulse { 50% { transform: scale(1.1); box-shadow: inset 0 -8px 0 rgba(0,0,0,.15), 0 0 0 10px var(--yellow), var(--shadow); } }
.mini-star { display: inline-flex; width: 26px; height: 26px; }
.mini-star svg { width: 100%; height: 100%; }
.mini-star.off svg path { fill: #DCD6EC; stroke: #B9B3CC; }
.mini-star.off svg circle { display: none; }

/* ---------- Mes pièces ---------- */
.pieces-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; padding: 10px 14px 30px; width: min(100%, 860px); margin: 0 auto; }
.piece-card { position: relative; border: 0; border-radius: 26px; background: var(--card); padding: 14px 8px; box-shadow: inset 0 0 0 5px var(--world), var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pc-art svg { width: 100px; height: 100px; }
.pc-name { font-weight: 900; font-size: 1.15rem; }
.pc-check { position: absolute; top: 8px; right: 12px; background: var(--green); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; }

/* ---------- Étapes : compteur, questions, plateau de pièces ---------- */
.counter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; background: var(--card); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); }
.counter i { width: 22px; height: 22px; border-radius: 50%; background: #E4DEF2; transition: .25s; }
.counter i.on { background: var(--green); transform: scale(1.15); }
.choices { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.choice-btn { border: 0; border-radius: 26px; background: var(--card); min-width: 132px; min-height: 120px; padding: 12px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.choice-btn:active { transform: translateY(4px); }
.cb-icon { font-size: 52px; line-height: 1; }
.cb-label { font-size: 1.3rem; font-weight: 900; }
.choice-btn.right { background: var(--green); color: #fff; animation: pop .45s; }
.choice-btn.wrong { background: #FFD6D7; animation: shake .45s; }
.tray { display: flex; align-items: center; gap: 12px; background: var(--card); padding: 8px 18px; border-radius: 26px; box-shadow: var(--shadow); }
.tray-current svg { width: 84px; height: 84px; animation: lift 1s ease-in-out infinite; }
.tray-rest { display: flex; gap: 2px; flex-wrap: wrap; max-width: 220px; }
.tray-small svg { width: 34px; height: 34px; opacity: .65; }
.retry-btn { font-size: 1.3rem; }

/* ---------- Partie complète ---------- */
.turn-badge { display: flex; align-items: center; gap: 6px; background: var(--card); padding: 6px 12px 6px 6px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 900; white-space: nowrap; }
.turn-piece svg { width: 38px; height: 38px; }
.turn-badge.turn-b { background: #3B2F62; color: #fff; }
.captured { display: flex; flex-wrap: wrap; justify-content: center; min-height: 28px; width: var(--bs); gap: 0; }
.cap svg { width: 26px; height: 26px; }

/* ---------- Entraînement ---------- */
.tool-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.piece-pick { border: 0; background: var(--card); border-radius: 18px; width: 58px; height: 58px; padding: 4px; box-shadow: var(--shadow); }
.piece-pick svg { width: 100%; height: 100%; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; background: var(--card); padding: 8px; border-radius: 20px; box-shadow: var(--shadow); }
.pal-btn { border: 0; background: #F3EEFF; border-radius: 14px; width: 50px; height: 50px; padding: 3px; }
.pal-btn svg { width: 100%; height: 100%; }
.pal-btn.on { background: var(--yellow); box-shadow: inset 0 0 0 3px #E09A00; }

/* ---------- Configuration contre l'ordi ---------- */
.setup { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 14px 30px; }
.setup-label { font-weight: 900; font-size: 1.2rem; color: var(--ink-soft); }
.setup-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.setup-btn { border: 0; border-radius: 24px; background: var(--card); min-width: 120px; min-height: 120px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.setup-btn.on { box-shadow: inset 0 0 0 6px var(--primary), var(--shadow); background: #EEEAFF; }
.sb-icon { font-size: 54px; line-height: 1; display: inline-flex; }
.sb-icon svg { width: 62px; height: 62px; }
.sb-label { font-weight: 900; font-size: 1.05rem; }
.go-big { font-size: 1.6rem; padding: 18px 46px; margin-top: 8px; animation: invite 2s ease-in-out infinite; }

/* ---------- Récompenses ---------- */
.rewards { width: min(100%, 820px); margin: 0 auto; padding: 6px 16px 40px; }
.rw-total { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--card); border-radius: 26px; padding: 14px; box-shadow: var(--shadow); }
.big-star { width: 80px; height: 80px; animation: starBob 2s ease-in-out infinite; }
.rw-num { font-size: 2.2rem; font-weight: 900; }
.rw-sub { color: var(--ink-soft); font-weight: 800; }
.rw-h { font-size: 1.2rem; margin: 22px 4px 10px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.badge { background: var(--card); border-radius: 20px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.badge-icon { font-size: 44px; }
.badge-name { font-size: .85rem; font-weight: 800; line-height: 1.15; }
.badge:not(.got) { filter: grayscale(1); opacity: .45; }
.badge.got .badge-icon { animation: invite 2.6s ease-in-out infinite; }
.world-bars { display: flex; flex-direction: column; gap: 8px; }
.wbar { display: grid; grid-template-columns: 40px minmax(90px, 160px) 1fr auto; align-items: center; gap: 8px; background: var(--card); border-radius: 16px; padding: 6px 12px; box-shadow: var(--shadow); font-weight: 800; }
.wb-icon { font-size: 28px; display: inline-flex; }
.wb-icon svg { width: 36px; height: 36px; }
.wb-track { height: 16px; border-radius: 999px; background: #E9E4F5; overflow: hidden; }
.wb-track i { display: block; height: 100%; background: var(--world); border-radius: 999px; }
.mastered { display: flex; gap: 10px; flex-wrap: wrap; }
.mp { position: relative; width: 70px; height: 70px; background: var(--card); border-radius: 18px; padding: 6px; box-shadow: var(--shadow); filter: grayscale(1); opacity: .45; }
.mp.ok { filter: none; opacity: 1; }
.mp svg { width: 100%; height: 100%; }
.mp span { position: absolute; right: -4px; top: -4px; background: var(--green); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; }
.redo { display: flex; flex-wrap: wrap; gap: 10px; }
.redo-chip { border: 0; background: var(--card); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; font-weight: 800; }
.chip-stars .mini-star { width: 20px; height: 20px; }
.rw-empty { color: var(--ink-soft); font-weight: 700; }
.rw-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 1.4rem; font-weight: 900; }
.rw-stats span { background: var(--card); padding: 8px 16px; border-radius: 16px; box-shadow: var(--shadow); }

/* ---------- Paramètres ---------- */
.settings { width: min(100%, 680px); margin: 0 auto; padding: 6px 16px 40px; display: flex; flex-direction: column; gap: 10px; }
.toggle-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; background: var(--card); border-radius: 20px; padding: 12px 16px; box-shadow: var(--shadow); font-weight: 800; font-size: 1.05rem; cursor: pointer; position: relative; }
.tr-icon { font-size: 30px; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 64px; height: 36px; border-radius: 999px; background: #CFC8E3; position: relative; transition: .2s; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: .2s; }
.toggle-row input:checked + .switch { background: var(--green); }
.toggle-row input:checked + .switch::after { left: 32px; }
.toggle-row input:focus-visible + .switch { outline: 4px solid var(--blue); outline-offset: 2px; }
.settings-note { color: var(--ink-soft); font-weight: 700; margin: 2px 6px; }
.parent-zone { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ---------- Fenêtres ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(30, 20, 60, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 900; opacity: 0; transition: opacity .2s; }
.modal-back.open { opacity: 1; }
.modal { background: var(--card); border-radius: 30px; padding: 18px 20px 20px; width: min(100%, 540px); max-height: 92%; overflow-y: auto; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); transform: scale(.9); transition: transform .2s; }
.modal-back.open .modal { transform: scale(1); }
.modal-leo { width: 110px; height: 110px; margin: 0 auto; }
.modal-leo svg { width: 100%; height: 100%; }
.modal-leo.cheer svg { animation: jump .6s ease-out 3; }
.modal-title { font-size: clamp(1.4rem, 4.5vw, 2rem); margin: 8px 0; font-weight: 900; }
.modal-text { font-size: 1.15rem; font-weight: 700; color: var(--ink-soft); margin: 6px 0; }
.modal-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.big-stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.big-stars .mini-star { width: 72px; height: 72px; animation: starIn .5s ease-out backwards; }
.big-stars .mini-star:nth-child(2) { animation-delay: .25s; width: 88px; height: 88px; margin-top: -10px; }
.big-stars .mini-star:nth-child(3) { animation-delay: .5s; }
@keyframes starIn { from { transform: scale(0) rotate(-180deg); } }
.new-badge { display: flex; align-items: center; justify-content: center; gap: 10px; background: #FFF4D6; color: #6B4A00; border-radius: 20px; padding: 10px; margin-top: 10px; font-weight: 900; font-size: 1.1rem; animation: pop .6s .6s backwards; }
.new-badge .badge-icon { font-size: 40px; flex: none; }
.new-badge span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.promo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.promo-btn { border: 0; background: #F3EEFF; border-radius: 20px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 900; box-shadow: var(--shadow); color: #2A1F45; }
.promo-btn svg { width: 72px; height: 72px; }
.promo-btn:first-child { background: #FFF1C4; box-shadow: inset 0 0 0 4px var(--yellow), var(--shadow); }
.gate-display { font-size: 2.2rem; font-weight: 900; background: #F3EEFF; color: #2A1F45; border-radius: 16px; padding: 6px; margin: 8px auto; width: 140px; }
.gate-display.wrong { animation: shake .45s; background: #FFD6D7; }
.gate-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; justify-content: center; }
.gate-key { border: 0; height: 60px; border-radius: 16px; background: #F3EEFF; color: #2A1F45; font-size: 1.5rem; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.gate-key:active { transform: translateY(3px); }

/* ---------- Confettis et étincelles ---------- */
.confetti-layer, .sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
.confetti { position: absolute; top: -24px; width: 11px; height: 17px; border-radius: 3px; animation: fall linear forwards; }
.confetti.round { border-radius: 50%; width: 13px; height: 13px; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }
.sparkle { position: absolute; color: #FFC94D; font-size: 24px; font-style: normal; text-shadow: 0 0 6px #fff; transform: translate(-50%, -50%); animation: burst .9s ease-out forwards; }
@keyframes burst { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(180deg); opacity: 0; } }

/* ---------- Animations désactivées ---------- */
body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation: none !important; transition: none !important; }

/* ---------- Mini-parties (D-014) ---------- */
/* Bouton de voix : 🔊 activée, 🔇 coupée (#12). */
.speak-btn.off { opacity: .75; background: #ECE8F4; }
/* Reconnaître une pièce : grandes images de vraies pièces. */
.choice-btn.piece-choice { min-width: 118px; min-height: 140px; }
.choice-btn.piece-choice .cb-icon svg { width: 84px; height: 84px; display: block; }
/* Pièces pas encore prêtes. */
.world-card.soon .wc-stars { font-size: .95rem; }
/* Activité facultative (jouer à deux). */
.lesson-node.bonus .ln-circle { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--world, #4CA7FF); }