/* ============ LISAPO · English through African tales ============ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  /* warm premium palette */
  --bg:        oklch(0.972 0.012 78);
  --bg2:       oklch(0.945 0.022 72);
  --card:      #ffffff;
  --ink:       oklch(0.28 0.02 60);
  --ink-soft:  oklch(0.44 0.02 60);
  --muted:     oklch(0.58 0.018 62);
  --line:      oklch(0.905 0.016 74);
  --line-soft: oklch(0.94 0.012 74);

  /* accents — shared L/C, varied hue */
  --sun:   oklch(0.66 0.145 47);   /* terracotta */
  --sun-d: oklch(0.56 0.145 45);
  --leaf:  oklch(0.66 0.115 158);  /* green */
  --teal:  oklch(0.66 0.115 215);  /* blue-teal */
  --gold:  oklch(0.80 0.125 84);   /* amber */
  --berry: oklch(0.62 0.150 18);   /* warm red — streak/hearts */
  --plum:  oklch(0.58 0.115 318);  /* B2 */

  --sun-tint:  oklch(0.95 0.04 60);
  --shadow:    0 10px 30px -12px oklch(0.4 0.06 60 / .35);
  --shadow-sm: 0 4px 14px -6px oklch(0.4 0.06 60 / .30);
  --radius: 22px;
  --maxw: 460px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, oklch(0.93 0.04 70), transparent 60%),
    var(--bg2);
  min-height:100dvh;
  display:flex;justify-content:center;
  overflow:hidden;
}
.display{font-family:"Baloo 2",system-ui,sans-serif;}

/* ---------- App shell : phone-sized stage ---------- */
#app{
  width:100%;max-width:var(--maxw);
  height:100dvh;
  background:var(--bg);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 0 60px -10px oklch(0.4 0.06 60 / .35);
}
@media(min-width:480px){
  #app{ border-radius:0; }
  body{ padding:0; }
}

/* ---------- launch splash ---------- */
.splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, oklch(0.93 0.05 70), transparent 60%),
    var(--bg);
  transition:opacity .55s ease, visibility .55s;
}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
.splash .splash-hero{
  width:150px;height:150px;border-radius:34px;overflow:hidden;
  box-shadow:var(--shadow);
  animation:splashPop .6s cubic-bezier(.2,1.3,.4,1) both;
}
.baobab-img{width:100%;height:100%;object-fit:cover;display:block;}
.splash-word{font-size:42px;font-weight:800;letter-spacing:.5px;color:var(--ink);line-height:1;
  animation:splashRise .55s .12s both;}
.splash-tag{font-size:13.5px;color:var(--muted);font-weight:600;max-width:230px;text-align:center;line-height:1.4;
  animation:splashRise .55s .22s both;}
@keyframes splashPop{from{transform:scale(.55);opacity:0;}to{transform:none;opacity:1;}}
@keyframes splashRise{from{transform:translateY(9px);opacity:0;}to{transform:none;opacity:1;}}

/* scroll regions */
.view{position:absolute;inset:0;display:none;flex-direction:column;}
.view.active{display:flex;}
@keyframes viewIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{width:0;}

/* ---------- buttons ---------- */
.btn{
  font-family:"Baloo 2",sans-serif;font-weight:700;font-size:17px;
  border:none;border-radius:16px;padding:15px 22px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s ease, box-shadow .2s, filter .2s;
  color:#fff;background:var(--sun);
  box-shadow:0 5px 0 var(--sun-d);
  user-select:none;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sun-d);}
.btn.block{width:100%;}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);}
.btn.ghost:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--line);}
.btn.lg{font-size:19px;padding:17px 26px;}
.btn[disabled]{opacity:.45;pointer-events:none;}

.icon-btn{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--card);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);
  transition:transform .12s;flex-shrink:0;
}
.icon-btn:active{transform:scale(.9);}

/* ================= HOME / JOURNEY ================= */
.home-head{
  padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 14px;
  display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg, oklch(0.97 0.03 70), transparent);
}
/* baobab hero header (real photo behind the greeting) */
.home-head.hero{position:relative;overflow:hidden;}
.home-head .head-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.home-head .head-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(40,24,12,.30), rgba(40,24,12,.62));}
.home-head.hero > .greet-row,
.home-head.hero > .stats-row,
.home-head.hero > .xp-wrap{position:relative;z-index:2;}
.home-head.hero .greet-txt .hi{color:rgba(255,255,255,.92);}
.home-head.hero .greet-txt .name{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25);}

.greet-row{display:flex;align-items:center;gap:12px;}
.mascot-av{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--gold), var(--sun));
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:var(--shadow-sm);border:3px solid #fff;
  position:relative;overflow:hidden;
}
.greet-txt{flex:1;min-width:0;}
.greet-txt .hi{font-size:13px;color:var(--muted);font-weight:600;}
.greet-txt .name{font-family:"Baloo 2";font-weight:800;font-size:21px;line-height:1.1;color:var(--ink);}
.stats-row{display:flex;gap:9px;}
.stat{
  flex:1;background:var(--card);border-radius:15px;padding:9px 8px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  box-shadow:var(--shadow-sm);
}
.stat .v{font-family:"Baloo 2";font-weight:800;font-size:18px;line-height:1;display:flex;align-items:center;gap:4px;}
.stat .l{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.2px;}
.stat .v .e{font-size:16px;}

.xpbar{height:8px;background:var(--line-soft);border-radius:6px;overflow:hidden;margin-top:7px;}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--sun));border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1);}

/* ---------- home quick actions row ---------- */
.quick-row{display:flex;gap:10px;padding:14px 14px 4px;}
.quick{
  flex:1;position:relative;cursor:pointer;border:none;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow-sm);
  padding:12px 8px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .12s, box-shadow .2s;
}
.quick:active{transform:translateY(2px);box-shadow:var(--shadow-sm);}
.quick .q-emo{font-size:26px;line-height:1;}
.quick .q-lbl{font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.15;}
.quick .q-badge{
  position:absolute;top:7px;right:9px;min-width:19px;height:19px;padding:0 5px;
  background:var(--berry);color:#fff;border-radius:20px;
  font-family:"Baloo 2";font-weight:800;font-size:11px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px -1px var(--berry);
}

/* world band */
.world{padding:6px 0 4px;}
.world-band{
  position:sticky;top:0;z-index:5;
  margin:10px 14px 0;padding:11px 16px;border-radius:16px;
  display:flex;align-items:center;gap:11px;color:#fff;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);
}
.world-band .wname{font-family:"Baloo 2";font-weight:800;font-size:16px;flex:1;line-height:1.05;}
.world-band .wsub{font-size:11px;opacity:.9;font-weight:600;display:block;}
.world-band .wprog{font-size:12px;font-weight:700;background:#ffffff2e;padding:3px 11px;border-radius:20px;white-space:nowrap;}

/* winding trail */
.trail{position:relative;padding:14px 0 26px;}
.node{
  position:relative;z-index:2;width:50%;
  display:flex;align-items:center;gap:10px;min-height:74px;
  padding:0 20px;box-sizing:border-box;
}
.node.r{margin-left:auto;flex-direction:row;}
.node.l{margin-right:auto;flex-direction:row-reverse;text-align:right;}
.dot{
  width:62px;height:62px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:29px;
  background:var(--card);box-shadow:0 6px 0 var(--line), var(--shadow-sm);
  border:3px solid #fff;transition:transform .14s;position:relative;
}
.dot:active{transform:translateY(3px) scale(.97);}
.node.done .dot{box-shadow:0 6px 0 var(--leaf), var(--shadow-sm);}
.node.locked .dot{filter:grayscale(.7);opacity:.5;box-shadow:0 6px 0 var(--line);cursor:default;}
.node.current .dot{animation:bob 2.4s ease-in-out infinite;}
.node.current .dot::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:3px dashed var(--sun);opacity:.65;animation:spin 9s linear infinite;
}
@keyframes bob{50%{transform:translateY(-7px);}}
@keyframes spin{to{transform:rotate(360deg);}}
.dot .lockico{font-size:22px;filter:none;opacity:.8;}
.node .nlabel{
  flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink-soft);line-height:1.2;
}
.node.locked .nlabel{color:var(--muted);}
.stars{display:flex;gap:1px;margin-top:3px;justify-content:inherit;}
.node.l .stars{justify-content:flex-end;}
.stars .s{font-size:12px;color:var(--line);}
.stars .s.on{color:var(--gold);}
.node .badge-num{
  position:absolute;top:-2px;font-size:10px;font-weight:800;color:#fff;
  background:var(--ink);border-radius:20px;padding:1px 7px;font-family:"Baloo 2";
}
.node.r .badge-num{left:14px;}
.node.l .badge-num{right:14px;}

/* squiggle connector drawn via pseudo path */
.trail::before{
  content:"";position:absolute;top:20px;bottom:20px;left:50%;width:0;
  border-left:4px dotted oklch(0.86 0.03 72);transform:translateX(-50%);z-index:0;
}

/* ================= TALE INTRO SHEET ================= */
.sheet-scrim{
  position:absolute;inset:0;z-index:40;background:oklch(0.3 0.04 60 / .45);
  opacity:0;visibility:hidden;transition:opacity .3s;backdrop-filter:blur(2px);
}
.sheet-scrim.open{opacity:1;visibility:visible;}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:41;
  background:var(--card);border-radius:28px 28px 0 0;
  padding:10px 22px calc(26px + var(--safe-b));
  transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 -10px 40px -10px oklch(0.3 0.06 60 / .4);
}
.sheet.open{transform:none;}
.sheet .grab{width:42px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 14px;}
.intro-hero{
  width:120px;height:120px;border-radius:32px;margin:4px auto 6px;
  display:flex;align-items:center;justify-content:center;font-size:62px;
  box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.hero-hint{text-align:center;font-size:11.5px;color:var(--muted);font-weight:600;margin:0 auto 12px;}
.intro-hero .hero-slot{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;}
.intro-hero .hero-slot::part(frame){background:transparent;border-radius:0;}
.intro-hero .hero-slot::part(ring){display:none;}
.vignette .vig-slot{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:1;}
.vignette .vig-slot::part(frame){background:transparent;border-radius:0;}
.vignette .vig-slot::part(ring){display:none;}
/* shared mascot photo (vieux sage) — one slot id, synced everywhere */
.sage{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;}
.sage::part(frame){background:transparent;}
.sage::part(ring){display:none;}
.ob-art .sage::part(frame){border-radius:0;}
.intro-lvl{display:flex;justify-content:center;gap:7px;margin-bottom:8px;flex-wrap:wrap;}
.chip{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px;
  background:var(--bg2);color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px;}
.chip.lvl{background:var(--sun-tint);color:var(--sun-d);}
.intro-title{font-family:"Baloo 2";font-weight:800;font-size:25px;text-align:center;line-height:1.1;}
.intro-fr{text-align:center;color:var(--muted);font-style:italic;font-size:15px;margin:3px 0 14px;}
.intro-meta{display:flex;gap:9px;justify-content:center;margin-bottom:16px;color:var(--muted);font-size:12.5px;font-weight:600;}
.intro-meta b{color:var(--ink);font-family:"Baloo 2";}
.intro-stars{display:flex;gap:4px;justify-content:center;margin-bottom:14px;font-size:22px;}
.intro-stars .s{color:var(--line);}
.intro-stars .s.on{color:var(--gold);}

/* ================= READER ================= */
.reader{background:var(--bg);}
.reader-top{
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 8px;
}
.prog-track{flex:1;height:9px;background:var(--line-soft);border-radius:6px;overflow:hidden;}
.prog-track>i{display:block;height:100%;border-radius:6px;transition:width .35s;background:var(--sun);}

.scene-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.scene{
  flex:1;display:flex;flex-direction:column;justify-content:flex-start;
  padding:8px 22px 0;overflow-y:auto;
}
.vignette{
  position:relative;width:100%;height:230px;flex-shrink:0;border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow);
}
.vignette .emo{font-size:104px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));z-index:2;}
.vignette.pop .emo{animation:popIn .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes popIn{0%{transform:scale(.4) rotate(-12deg);}100%{transform:scale(1) rotate(0);}}
.vignette .patt{position:absolute;inset:0;opacity:.5;z-index:1;}
.scene-count{position:absolute;top:12px;right:14px;z-index:3;font-family:"Baloo 2";font-weight:700;
  font-size:12px;color:#fff;background:#0003;padding:3px 10px;border-radius:20px;backdrop-filter:blur(3px);}

.line-en{
  font-family:"Baloo 2";font-weight:600;font-size:24px;line-height:1.38;color:var(--ink);
  letter-spacing:-.1px;text-wrap:pretty;cursor:pointer;
}
.line-en .w{transition:color .15s, background .15s;border-radius:5px;padding:0 1px;}
.line-en .w.spoken{background:var(--gold);color:#3a2c12;}
.line-fr{
  margin-top:16px;font-size:16.5px;line-height:1.5;color:var(--leaf);font-style:italic;
  font-weight:500;text-wrap:pretty;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s,margin .3s;
}
.line-fr.show{max-height:300px;opacity:1;}

/* full-page reader (whole tale on one scrollable page) */
.reader-page{padding:8px 20px 0;}
.rd-title{flex:1;min-width:0;overflow:hidden;}
.rd-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tale-body{padding-top:6px;}
.tale-body .sent{padding:9px 8px;border-radius:14px;cursor:pointer;transition:background .2s;}
.tale-body .sent.active{background:color-mix(in oklab, var(--gold) 22%, transparent);}
.tale-body .sent .line-en{font-size:19.5px;line-height:1.42;}
.tale-body .sent .line-fr{max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .3s ease,opacity .25s,margin .25s;}
.tale-body.show-fr .sent .line-fr{max-height:340px;opacity:1;margin-top:7px;}
.fr-toggle{
  margin-top:14px;align-self:flex-start;font-size:13px;font-weight:700;color:var(--leaf);
  background:none;border:2px solid var(--leaf);border-radius:20px;padding:7px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s;
}
.fr-toggle.on{background:var(--leaf);color:#fff;}

.reader-foot{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px calc(16px + var(--safe-b));
}
.play-btn{
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:var(--sun);color:#fff;font-size:26px;
  box-shadow:0 6px 0 var(--sun-d);display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
}
.play-btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--sun-d);}
.play-btn.playing{background:var(--leaf);box-shadow:0 6px 0 oklch(0.54 0.115 158);}
.nav-btn{
  flex:1;font-family:"Baloo 2";font-weight:700;font-size:16px;border:none;cursor:pointer;
  border-radius:16px;padding:16px;background:var(--card);color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--line);transition:transform .12s;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.nav-btn:active{transform:scale(.97);}
.nav-btn.next{background:var(--ink);color:#fff;box-shadow:0 5px 0 oklch(0.18 0.02 60);}
.nav-btn[disabled]{opacity:.35;pointer-events:none;}

/* ================= GENERIC STAGE (vocab/quiz/result) ================= */
.stage{flex:1;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 16px) 22px 0;overflow-y:auto;}
.stage-h{text-align:center;margin-bottom:6px;}
.kicker{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sun);}
.stage-title{font-family:"Baloo 2";font-weight:800;font-size:25px;line-height:1.1;margin-top:3px;}
.foot-pad{padding:14px 22px calc(18px + var(--safe-b));}

/* vocab flashcards */
.flash-deck{flex:1;display:flex;align-items:center;justify-content:center;perspective:1200px;padding:14px 0;}
.flash{
  width:100%;max-width:300px;aspect-ratio:3/3.6;cursor:pointer;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.9,.3,1);position:relative;
}
.flash.flip{transform:rotateY(180deg);}
.flash .face{
  position:absolute;inset:0;border-radius:26px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;text-align:center;box-shadow:var(--shadow);
}
.flash .front{background:var(--card);}
.flash .back{background:var(--leaf);color:#fff;transform:rotateY(180deg);}
.flash .fw{font-family:"Baloo 2";font-weight:800;font-size:32px;line-height:1.1;}
.flash .hint{font-size:12.5px;color:var(--muted);font-weight:600;}
.flash .back .hint{color:#ffffffcc;}
.flash .spk{font-size:30px;}
.flash-acts{display:flex;gap:18px;align-items:center;justify-content:center;}
.flash-acts .spk{cursor:pointer;border:none;background:none;}
.deck-dots{display:flex;gap:6px;justify-content:center;margin-top:6px;}
.deck-dots .d{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.2s;}
.deck-dots .d.on{background:var(--sun);width:20px;border-radius:5px;}

/* quiz */
.q-card{background:var(--card);border-radius:24px;padding:24px 20px;box-shadow:var(--shadow);margin-bottom:16px;}
.q-prompt{font-family:"Baloo 2";font-weight:700;font-size:21px;line-height:1.25;text-align:center;}
.q-prompt .big{display:block;font-size:30px;color:var(--sun);margin-top:6px;}
.q-opts{display:flex;flex-direction:column;gap:11px;}
.opt{
  font-family:"Plus Jakarta Sans";font-weight:600;font-size:16.5px;text-align:left;
  background:var(--card);border:2px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;
  display:flex;align-items:center;gap:12px;transition:transform .1s,border-color .2s,background .2s;color:var(--ink);
}
.opt:active{transform:scale(.985);}
.opt .ix{width:26px;height:26px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:700;font-size:14px;color:var(--ink-soft);flex-shrink:0;transition:.2s;}
.opt.correct{border-color:var(--leaf);background:oklch(0.95 0.05 158);}
.opt.correct .ix{background:var(--leaf);color:#fff;}
.opt.wrong{border-color:var(--berry);background:oklch(0.95 0.04 20);}
.opt.wrong .ix{background:var(--berry);color:#fff;}
.opt.disabled{pointer-events:none;}
.opt.dim{opacity:.5;}
.q-feedback{text-align:center;font-family:"Baloo 2";font-weight:700;font-size:17px;min-height:24px;margin-top:4px;
  opacity:0;transform:translateY(6px);transition:.25s;}
.q-feedback.show{opacity:1;transform:none;}
.q-feedback.good{color:var(--leaf);}
.q-feedback.bad{color:var(--berry);}
.q-dots{display:flex;gap:5px;justify-content:center;margin-bottom:14px;}
.q-dots .d{width:24px;height:5px;border-radius:4px;background:var(--line);transition:.2s;}
.q-dots .d.on{background:var(--sun);}
.q-dots .d.ok{background:var(--leaf);}
.q-dots .d.no{background:var(--berry);}

/* results */
.result-burst{text-align:center;padding:18px 0 6px;}
.result-emoji{font-size:84px;display:inline-block;animation:popIn .6s cubic-bezier(.2,1.5,.4,1);}
.result-stars{display:flex;justify-content:center;gap:10px;margin:10px 0;}
.result-stars .s{font-size:48px;color:var(--line);}
.result-stars .s.on{color:var(--gold);animation:starPop .45s cubic-bezier(.2,1.6,.4,1);}
.result-stars .s:nth-child(2).on{animation-delay:.14s;}
.result-stars .s:nth-child(3).on{animation-delay:.28s;}
@keyframes starPop{from{transform:scale(0);}60%{transform:scale(1.25);}to{transform:scale(1);}}
.xp-gain{font-family:"Baloo 2";font-weight:800;font-size:20px;color:var(--sun);text-align:center;}
.moral-card{
  background:linear-gradient(150deg,var(--ink),oklch(0.34 0.03 50));color:#fff;border-radius:24px;
  padding:22px;margin:18px 0;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.moral-card .ml-k{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}
.moral-card .ml-en{font-family:"Baloo 2";font-weight:700;font-size:19px;line-height:1.3;margin-top:8px;}
.moral-card .ml-fr{font-size:14px;font-style:italic;color:#ffffffc4;margin-top:9px;line-height:1.4;}
.moral-card .seal{position:absolute;right:-14px;bottom:-14px;font-size:90px;opacity:.12;}
.think{background:var(--card);border-radius:22px;padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:8px;}
.think h4{font-family:"Baloo 2";font-size:15px;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.think ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.think li{font-size:14.5px;line-height:1.4;color:var(--ink-soft);padding-left:20px;position:relative;}
.think li::before{content:"›";position:absolute;left:4px;color:var(--sun);font-weight:800;font-size:18px;line-height:1.1;}

/* mascot speech */
.mascot-say{
  display:flex;gap:11px;align-items:flex-start;margin:4px 0 16px;
}
.mascot-say .av{width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--gold), var(--sun));
  display:flex;align-items:center;justify-content:center;font-size:25px;border:3px solid #fff;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;}
.bubble{background:var(--card);border-radius:6px 18px 18px 18px;padding:13px 16px;box-shadow:var(--shadow-sm);
  font-size:14.5px;line-height:1.45;color:var(--ink-soft);flex:1;}
.bubble b{color:var(--sun-d);}

/* toast / xp fly */
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:60;
  background:var(--ink);color:#fff;font-family:"Baloo 2";font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:24px;box-shadow:var(--shadow);opacity:0;transition:.3s;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* confetti */
.confetti{position:absolute;inset:0;pointer-events:none;z-index:55;overflow:hidden;}
.confetti i{position:absolute;width:9px;height:14px;border-radius:2px;top:-20px;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(120vh) rotate(720deg);}}

/* header back row */
.bar-back{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 4px;}
.bar-title{font-family:"Baloo 2";font-weight:800;font-size:17px;flex:1;line-height:1.1;}
.bar-title small{display:block;font-size:11px;font-weight:600;color:var(--muted);font-family:"Plus Jakarta Sans";}

/* divider motif */
.motif{height:14px;margin:2px 0;background-size:18px 14px;opacity:.5;
  background-image:repeating-linear-gradient(135deg, var(--gold) 0 6px, transparent 6px 12px);}

/* word-tap popover */
.wpop{position:absolute;z-index:70;background:var(--ink);color:#fff;font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:12px;box-shadow:var(--shadow);transform:translate(-50%,-115%);
  white-space:nowrap;opacity:0;transition:.15s;pointer-events:none;}
.wpop.show{opacity:1;}
.wpop b{color:var(--gold);}

.fade-in{animation:fadeUp .4s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.empty-hint{text-align:center;color:var(--muted);font-size:14px;padding:30px 20px;line-height:1.5;}

/* ================= TAB BAR ================= */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:30;
  height:calc(60px + var(--safe-b));padding-bottom:var(--safe-b);
  display:flex;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px -14px rgba(0,0,0,.3);}
.tab{flex:1;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font-family:"Baloo 2";font-weight:700;font-size:11px;position:relative;}
.tab .ti{font-size:23px;filter:grayscale(.5);opacity:.55;transition:.15s;}
.tab.active{color:var(--ink);}
.tab.active .ti{filter:none;opacity:1;transform:translateY(-1px);}
.tab.active::before{content:"";position:absolute;top:0;width:34px;height:3px;border-radius:3px;background:var(--sun);}
.tab[data-tab="chron"].active::before{background:var(--plum);}
.tab[data-tab="chat"].active::before{background:var(--teal);}

/* ================= PARLER · picker ================= */
.chat-head{padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 12px;background:linear-gradient(180deg, oklch(0.95 0.04 205), transparent);}
.chat-lead{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:10px 0 12px;}
.lvl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lvl-lab{font-size:12.5px;font-weight:700;color:var(--muted);}
.lvl-pill{border:2px solid var(--line);background:var(--card);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;font-family:"Baloo 2";transition:.15s;}
.lvl-pill.on{background:var(--teal);border-color:var(--teal);color:#fff;}
.scn-grid{display:flex;flex-direction:column;gap:10px;padding:8px 16px 0;}
.scn-card{display:flex;align-items:center;gap:14px;background:var(--card);border:none;border-radius:18px;padding:15px 16px;cursor:pointer;box-shadow:var(--shadow-sm);text-align:left;transition:transform .12s;}
.scn-card:active{transform:scale(.99);}
.scn-emo{font-size:29px;width:52px;height:52px;border-radius:15px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.scn-tt{flex:1;min-width:0;}
.scn-tt b{display:block;font-family:"Baloo 2";font-size:16.5px;color:var(--ink);}
.scn-tt span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;}
.scn-go{font-size:22px;color:var(--teal);font-weight:700;flex-shrink:0;}

/* ================= CONVERSATION ================= */
.chat-bar .bar-title small{color:var(--teal);}
.msgs{flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:11px;}
.msgs::-webkit-scrollbar{width:0;}
.msg{max-width:84%;padding:12px 15px;font-size:15px;line-height:1.4;}
.msg.ai{align-self:flex-start;background:var(--card);box-shadow:var(--shadow-sm);border-radius:7px 18px 18px 18px;}
.msg.me{align-self:flex-end;background:var(--teal);color:#fff;border-radius:18px 18px 7px 18px;font-weight:500;}
.msg.err{background:oklch(0.96 0.03 25);}
.b-en{font-family:"Baloo 2";font-weight:600;font-size:16px;color:var(--ink);line-height:1.35;}
.b-fr{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:6px;}
.b-tools{display:flex;gap:6px;margin-top:9px;}
.b-tool{border:none;background:var(--bg2);border-radius:14px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;}
.b-tool.on{background:var(--leaf);color:#fff;}
.typing{align-self:flex-start;display:flex;gap:5px;align-items:center;padding:15px 17px;background:var(--card);box-shadow:var(--shadow-sm);border-radius:7px 18px 18px 18px;}
.typing span{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:typed 1s infinite;}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}
@keyframes typed{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
.tips{display:flex;gap:8px;padding:4px 14px 8px;overflow-x:auto;}
.tips::-webkit-scrollbar{height:0;}
.tips:empty{display:none;padding:0;}
.tip{flex:0 0 auto;white-space:nowrap;border:2px solid var(--teal);background:var(--card);color:var(--teal);border-radius:20px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:"Plus Jakarta Sans";}
.tip:active{background:var(--teal);color:#fff;}
.composer{display:flex;gap:9px;padding:10px 14px calc(12px + var(--safe-b));background:var(--card);border-top:1px solid var(--line);}
#cinput{flex:1;min-width:0;border:2px solid var(--line);border-radius:24px;padding:13px 16px;font-size:15px;font-family:"Plus Jakarta Sans";color:var(--ink);outline:none;background:var(--bg);}
#cinput:focus{border-color:var(--teal);}
.send-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--teal);color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;box-shadow:0 4px 0 oklch(0.54 0.115 215);transition:transform .12s;}
.send-btn:active{transform:translateY(2px);box-shadow:0 2px 0 oklch(0.54 0.115 215);}
.send-btn[disabled]{opacity:.5;}

/* ================= MINI-BIBLIOTHÈQUE ================= */
.biblio-cta{display:flex;align-items:center;gap:14px;width:calc(100% - 28px);margin:2px 14px 8px;
  background:linear-gradient(135deg, var(--leaf), oklch(0.66 0.12 198));color:#fff;border:none;border-radius:20px;
  padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);text-align:left;transition:transform .12s;}
.biblio-cta:active{transform:scale(.99);}
.bc-emo{font-size:28px;width:50px;height:50px;border-radius:15px;background:#ffffff2e;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bc-tt{flex:1;min-width:0;}
.bc-tt b{display:block;font-family:"Baloo 2";font-weight:800;font-size:17px;}
.bc-tt span{display:block;font-size:12px;opacity:.92;margin-top:1px;}
.bc-go{font-size:24px;font-weight:700;opacity:.9;flex-shrink:0;}
.bib-bar .bar-title small{color:var(--leaf);}
.bib-lead{margin:8px 18px 12px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.bib-list{display:flex;flex-direction:column;gap:9px;padding:0 16px;}
.bib-item{display:flex;align-items:center;gap:13px;background:var(--card);border:none;border-radius:16px;padding:13px 15px;cursor:pointer;box-shadow:var(--shadow-sm);text-align:left;transition:transform .12s;}
.bib-item:active{transform:scale(.99);}
.bib-emo{font-size:25px;width:46px;height:46px;border-radius:13px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bib-tt{flex:1;min-width:0;}
.bib-tt b{display:block;font-family:"Baloo 2";font-size:15px;color:var(--ink);line-height:1.15;}
.bib-tt span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bib-go{font-size:20px;color:var(--leaf);flex-shrink:0;}

/* bilingual reader */
.lang-seg{display:flex;gap:8px;padding:8px 16px 2px;}
.lseg{flex:1;border:2px solid var(--line);background:var(--card);border-radius:14px;padding:9px;font-family:"Baloo 2";font-weight:700;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:.15s;}
.lseg.on{background:var(--leaf);border-color:var(--leaf);color:#fff;}
.btale-hero{width:100px;height:100px;border-radius:28px;margin:12px auto 8px;display:flex;align-items:center;justify-content:center;font-size:52px;box-shadow:var(--shadow);}
.btale-title{font-family:"Baloo 2";font-weight:800;font-size:24px;line-height:1.15;text-align:center;padding:0 22px;text-wrap:balance;}
.btale-body{padding:14px 22px 0;}
.bp{font-size:17px;line-height:1.62;color:var(--ink-soft);margin-bottom:11px;text-wrap:pretty;cursor:pointer;}
.bp.dlg{color:var(--ink);padding-left:13px;border-left:3px solid var(--line-soft);font-style:italic;}
.bp.first::first-letter{font-family:"Baloo 2";font-weight:800;font-size:50px;float:left;line-height:.78;margin:5px 9px 0 0;color:var(--leaf);}
.bp.reading{color:var(--ink);background:oklch(0.95 0.055 160);border-radius:7px;box-shadow:0 0 0 7px oklch(0.95 0.055 160);transition:background .2s,box-shadow .2s;}
.bmoral{margin:16px 22px 0;background:linear-gradient(150deg,var(--ink),oklch(0.34 0.03 50));color:#fff;border-radius:18px;padding:16px 18px;}
.bmoral-k{display:block;font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--gold);}
.bmoral-t{display:block;font-family:"Baloo 2";font-weight:700;font-size:16px;line-height:1.35;margin-top:6px;}
.btale-foot{display:flex;gap:10px;padding:12px 16px calc(14px + var(--safe-b));background:var(--card);border-top:1px solid var(--line);}
.bfoot-btn{flex:1;border:none;border-radius:16px;padding:14px;font-family:"Baloo 2";font-weight:700;font-size:15px;cursor:pointer;background:var(--bg2);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s;}
.bfoot-btn:active{transform:scale(.98);}
.bfoot-btn span{font-size:18px;}
.bfoot-btn.on{background:var(--leaf);color:#fff;}
.bfoot-btn.primary{background:var(--leaf);color:#fff;box-shadow:0 4px 0 oklch(0.54 0.115 158);}

/* translation loader */
.translating{text-align:center;padding:46px 20px;}
.tr-owl{width:62px;height:62px;border-radius:50%;overflow:hidden;position:relative;border:3px solid #fff;box-shadow:var(--shadow-sm);animation:bob 2s ease-in-out infinite;display:inline-block;}
.tr-tx{font-family:"Baloo 2";font-weight:700;font-size:17px;margin-top:10px;color:var(--ink);}
.tr-bar{height:8px;background:var(--line-soft);border-radius:6px;overflow:hidden;margin:14px auto 0;max-width:240px;}
.tr-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--leaf),var(--gold));transition:width .4s;}
.tr-sub{font-size:12.5px;color:var(--muted);margin-top:10px;}

/* reading practice (mic) */
.rd-prog{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 4px) 18px 2px;}
.rd-track{flex:1;height:8px;background:var(--line-soft);border-radius:6px;overflow:hidden;}
.rd-track>i{display:block;height:100%;background:var(--sun);border-radius:6px;transition:width .3s;}
.rd-prog span{font-size:12px;font-weight:700;color:var(--muted);}
.rd-stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 24px;overflow-y:auto;}
.rd-count{text-align:center;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--leaf);margin-bottom:14px;}
.rd-sentence{font-family:"Baloo 2";font-weight:600;font-size:25px;line-height:1.5;text-align:center;color:var(--ink);text-wrap:balance;}
.rd-fb{margin-top:18px;text-align:center;}
.rd-stars{font-size:32px;color:var(--line);display:flex;gap:8px;justify-content:center;}
.rd-stars .on{color:var(--gold);}
.rd-pct{font-weight:700;color:var(--sun);margin-top:6px;font-size:14px;}
.rd-foot{padding:12px 18px calc(16px + var(--safe-b));}
.rd-mic{width:100%;border:none;border-radius:18px;padding:17px;background:var(--sun);color:#fff;font-family:"Baloo 2";font-weight:700;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 5px 0 var(--sun-d);transition:transform .12s;}
.rd-mic:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sun-d);}
.rd-mic.listening{background:var(--berry);box-shadow:0 0 0 0 oklch(0.62 0.15 18 / .55);animation:micpulse 1.3s infinite;}
.rd-mic[disabled]{opacity:.5;}
.rd-mic .pm-ic{font-size:20px;}
.rd-row{display:flex;gap:10px;margin-top:10px;}
.rd-sec{flex:1;border:2px solid var(--line);background:var(--card);border-radius:14px;padding:11px;font-weight:600;font-size:13.5px;color:var(--ink-soft);cursor:pointer;font-family:"Plus Jakarta Sans";}
.rd-sec:active{background:var(--bg2);}
.mic-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);color:var(--ink);font-size:19px;cursor:pointer;flex-shrink:0;transition:transform .12s;}
.mic-btn:active{transform:scale(.92);}
.mic-btn.listening{background:var(--berry);color:#fff;box-shadow:0 0 0 0 oklch(0.62 0.15 18 / .55);animation:micpulse 1.3s infinite;}
@keyframes micpulse{0%{box-shadow:0 0 0 0 oklch(0.62 0.15 18 / .55);}70%{box-shadow:0 0 0 13px oklch(0.62 0.15 18 / 0);}100%{box-shadow:0 0 0 0 oklch(0.62 0.15 18 / 0);}}
#home .scroll, #chronicles .scroll, #chat .scroll{padding-bottom:80px;}

/* ================= CHRONIQUES · LIST ================= */
.chron-head{padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 6px;}
.chron-cover{border-radius:24px;padding:26px 22px 22px;color:#fff;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(155deg, oklch(0.44 0.10 320), oklch(0.32 0.08 350));box-shadow:var(--shadow);}
.chron-cover::after{content:"🎭";position:absolute;right:-10px;bottom:-16px;font-size:96px;opacity:.13;}
.cc-badge{font-size:10.5px;letter-spacing:3px;font-weight:700;color:#ffffffc4;}
.cc-title{font-family:"Baloo 2";font-weight:800;font-size:40px;line-height:.92;margin:5px 0 8px;letter-spacing:1px;text-shadow:0 3px 10px rgba(0,0,0,.3);}
.cc-tome{font-size:14px;font-weight:700;color:var(--gold);}
.cc-by{font-size:12px;font-style:italic;color:#ffffffb0;margin-top:7px;}
.chron-prog{padding:12px 4px 2px;}
.cp-row{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.chron-note{margin:6px 18px 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;font-style:italic;text-align:center;}
.ch-list{display:flex;flex-direction:column;gap:9px;padding:0 16px;}
.ch-item{display:flex;align-items:center;gap:13px;text-align:left;background:var(--card);border:none;
  border-radius:16px;padding:13px 15px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s;}
.ch-item:active{transform:scale(.99);}
.ch-num{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2";font-weight:800;font-size:18px;background:var(--bg2);color:var(--plum);}
.ch-item.read .ch-num{background:var(--plum);color:#fff;}
.ch-item.cur .ch-num{background:oklch(0.92 0.05 320);color:var(--plum);box-shadow:0 0 0 2px var(--plum);}
.ch-tt{flex:1;min-width:0;}
.ch-tt b{display:block;font-family:"Baloo 2";font-size:15px;color:var(--ink);line-height:1.15;}
.ch-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-mark{font-size:18px;color:var(--plum);flex-shrink:0;font-weight:700;}
.ch-item.locked{opacity:.5;}
.ch-item.locked .ch-mark{color:var(--muted);}

/* ================= CHAPTER READER ================= */
.chron-bar .bar-title small{color:var(--plum);}
.chap-hero{padding:8px 22px 2px;}
.chap-n{font-family:"Baloo 2";font-weight:800;font-size:58px;line-height:.8;color:var(--plum);opacity:.22;}
.chap-title{font-family:"Baloo 2";font-weight:800;font-size:26px;line-height:1.1;margin-top:-4px;text-wrap:balance;}
.chap-body{padding:10px 22px 0;}
.cp{font-size:17px;line-height:1.62;color:var(--ink-soft);margin-bottom:11px;text-wrap:pretty;}
.cp.dlg{color:var(--ink);padding-left:13px;border-left:3px solid var(--line-soft);font-style:italic;}
.cp.first::first-letter{font-family:"Baloo 2";font-weight:800;font-size:54px;float:left;line-height:.78;margin:5px 9px 0 0;color:var(--plum);}
.suite{text-align:center;color:var(--muted);font-style:italic;margin:20px 0 6px;font-size:13px;letter-spacing:2px;}
.cp.reading{color:var(--ink);background:oklch(0.94 0.055 320);border-radius:7px;
  box-shadow:0 0 0 7px oklch(0.94 0.055 320);transition:background .2s,box-shadow .2s;}
.cp.dlg.reading{border-left-color:var(--plum);}
.read-fab{position:absolute;right:16px;bottom:22px;z-index:25;border:none;cursor:pointer;
  background:var(--plum);color:#fff;font-family:"Baloo 2";font-weight:700;font-size:15px;
  border-radius:30px;padding:13px 20px;box-shadow:0 6px 0 oklch(0.48 0.115 318), var(--shadow);
  display:flex;align-items:center;gap:8px;transition:transform .12s;}
.read-fab:active{transform:translateY(3px);box-shadow:0 3px 0 oklch(0.48 0.115 318);}
.read-fab.on{background:var(--leaf);box-shadow:0 6px 0 oklch(0.54 0.115 158), var(--shadow);}
.read-fab .rf-ic{font-size:14px;}

/* ===== Pause anglais ===== */
.pause{margin:10px 16px 0;background:var(--card);border-radius:24px;padding:22px 20px;box-shadow:var(--shadow);border-top:4px solid var(--plum);}
.pause-tag{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--plum);}
.pause-theme{font-family:"Baloo 2";font-weight:800;font-size:21px;line-height:1.15;margin:5px 0 6px;}
.pause-intro{font-size:14px;color:var(--ink-soft);line-height:1.45;margin-bottom:8px;}
.lx-h{font-family:"Baloo 2";font-size:14px;color:var(--ink);margin:18px 0 9px;display:flex;align-items:baseline;gap:8px;}
.lx-h span{font-size:11px;color:var(--muted);font-weight:600;font-family:"Plus Jakarta Sans";}
.lx-list{display:flex;flex-direction:column;gap:7px;}
.lx-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s,transform .1s;}
.lx-row:active{transform:scale(.99);}
.lx-row.said{background:oklch(0.95 0.04 320);border-color:var(--plum);}
.lx-en{font-family:"Baloo 2";font-weight:700;font-size:15.5px;color:var(--ink);flex:0 0 36%;}
.lx-fr{flex:1;font-size:14px;color:var(--ink-soft);}
.lx-acts{display:flex;gap:6px;flex-shrink:0;}
.lx-b{width:34px;height:34px;border-radius:50%;border:none;background:var(--card);box-shadow:var(--shadow-sm);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s;}
.lx-b:active{transform:scale(.9);}
.lx-b.prn{background:oklch(0.93 0.05 320);}
.lp-list{display:flex;flex-direction:column;gap:9px;}
.lp-card{display:flex;align-items:center;gap:10px;text-align:left;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:10px 11px 10px 14px;transition:background .15s,border-color .15s;}
.lp-card.said{border-left-color:var(--plum);background:oklch(0.96 0.03 320);}
.lp-txt{flex:1;min-width:0;cursor:pointer;}
.lp-en{display:block;font-family:"Baloo 2";font-weight:700;font-size:16px;color:var(--ink);line-height:1.28;}
.lp-fr{display:block;font-size:13.5px;color:var(--muted);font-style:italic;margin-top:3px;}
.lp-acts{display:flex;gap:6px;flex-shrink:0;}
.lp-b{width:38px;height:38px;border-radius:50%;border:none;background:var(--card);box-shadow:var(--shadow-sm);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s;}
.lp-b:active{transform:scale(.9);}
.lp-b.prn{background:oklch(0.93 0.05 320);}

/* ===== Pronunciation overlay ===== */
.prn-tag{text-align:center;font-size:11px;font-weight:800;letter-spacing:2px;color:var(--plum);margin-bottom:10px;}
.prn-phrase{text-align:center;font-family:"Baloo 2";font-weight:800;font-size:25px;line-height:1.2;color:var(--ink);text-wrap:balance;}
.prn-fr{text-align:center;font-size:14px;color:var(--muted);font-style:italic;margin-top:6px;}
.prn-mic{width:100%;border:none;border-radius:18px;padding:16px;margin-top:4px;background:var(--plum);color:#fff;
  font-family:"Baloo 2";font-weight:700;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 5px 0 oklch(0.48 0.115 318);transition:transform .12s;}
.prn-mic:active{transform:translateY(3px);box-shadow:0 2px 0 oklch(0.48 0.115 318);}
.prn-mic.listening{background:var(--berry);box-shadow:0 0 0 0 oklch(0.62 0.15 18 / .5);animation:micpulse 1.3s infinite;}
.prn-mic .pm-ic{font-size:20px;}
.prn-hint{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:12px;min-height:18px;line-height:1.4;}
.prn-result-emoji{text-align:center;font-size:62px;animation:popIn .5s cubic-bezier(.2,1.5,.4,1);}
.prn-verdict{text-align:center;font-family:"Baloo 2";font-weight:800;font-size:23px;margin-top:2px;}
.prn-stars{display:flex;justify-content:center;gap:8px;font-size:32px;margin:8px 0;color:var(--line);}
.prn-stars .on{color:var(--gold);}
.prn-score{text-align:center;font-weight:700;color:var(--plum);font-size:14px;}
.prn-target{text-align:center;margin:14px 0 8px;font-family:"Baloo 2";font-size:19px;line-height:1.75;}
.pw{padding:1px 5px;border-radius:6px;}
.pw.ok{background:oklch(0.9 0.08 150);color:oklch(0.42 0.1 150);}
.pw.no{background:oklch(0.93 0.04 30);color:var(--berry);}
.prn-said{text-align:center;font-size:13px;color:var(--muted);font-style:italic;margin-bottom:14px;}
.gram{margin-top:18px;background:linear-gradient(150deg,var(--ink),oklch(0.34 0.03 50));color:#fff;border-radius:18px;padding:18px;}
.gram-tag{font-size:10.5px;font-weight:800;letter-spacing:2px;color:var(--gold);}
.gram h4{font-family:"Baloo 2";font-size:18px;margin:6px 0 6px;}
.gram p{font-size:13.5px;color:#ffffffcf;line-height:1.45;}
.gex-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
.gex{background:#ffffff14;border-radius:10px;padding:9px 12px;}
.gex b{display:block;font-family:"Baloo 2";font-size:15px;color:#fff;}
.gex span{font-size:12.5px;color:#ffffffa8;font-style:italic;}

/* ================= ONBOARDING ================= */
.ob-scrim{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(1100px 560px at 50% -8%, oklch(0.93 0.05 70), transparent 60%),
    var(--bg);
  opacity:0;transition:opacity .3s;}
.ob-scrim.open{opacity:1;}
.ob-skip{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;z-index:3;
  border:none;background:none;cursor:pointer;font-family:"Baloo 2";font-weight:700;font-size:14px;color:var(--muted);padding:8px 6px;}
.ob-viewport{flex:1;overflow:hidden;}
.ob-track{display:flex;height:100%;transition:transform .42s cubic-bezier(.3,.9,.3,1);}
.ob-slide{flex:0 0 100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 30px 6px;gap:16px;}
.ob-art{width:148px;height:148px;border-radius:42px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);position:relative;margin-bottom:6px;animation:obFloat 4s ease-in-out infinite;overflow:hidden;}
.ob-art-emo{font-size:78px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));}
.ob-art-emo.small{font-size:62px;}
.ob-art.a1{background:radial-gradient(circle at 36% 30%, var(--gold), var(--sun));}
.ob-art.a2{background:radial-gradient(circle at 36% 30%, oklch(0.78 0.1 150), var(--leaf));}
.ob-art.a3{background:radial-gradient(circle at 36% 30%, oklch(0.8 0.13 40), var(--berry));}
.ob-art.a4{background:radial-gradient(circle at 36% 30%, oklch(0.78 0.1 210), var(--teal));}
@keyframes obFloat{50%{transform:translateY(-9px);}}
.ob-title{font-family:"Baloo 2";font-weight:800;font-size:30px;line-height:1.08;color:var(--ink);text-wrap:balance;}
.ob-title.sm{font-size:25px;}
.ob-sub{font-size:16px;line-height:1.5;color:var(--ink-soft);max-width:330px;text-wrap:pretty;}
.ob-sub b{color:var(--sun-d);font-weight:700;}
.ob-pillars{display:flex;flex-direction:column;gap:11px;width:100%;max-width:360px;margin-top:2px;}
.ob-pill{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:18px;padding:13px 15px;
  box-shadow:var(--shadow-sm);text-align:left;}
.ob-pill-emo{font-size:25px;width:48px;height:48px;border-radius:14px;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ob-pill-tx{flex:1;min-width:0;}
.ob-pill-tx b{display:block;font-family:"Baloo 2";font-weight:800;font-size:15.5px;color:var(--ink);}
.ob-pill-tx span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;line-height:1.3;}
.ob-sound{margin-top:6px;border:2px solid var(--teal);background:var(--card);color:var(--teal);cursor:pointer;
  font-family:"Baloo 2";font-weight:700;font-size:14.5px;border-radius:22px;padding:11px 20px;transition:.18s;}
.ob-sound.off{border-color:var(--line);color:var(--muted);}
.ob-foot{padding:10px 24px calc(20px + var(--safe-b));display:flex;flex-direction:column;gap:16px;align-items:center;}
.ob-dots{display:flex;gap:8px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.25s;}
.ob-dot.on{background:var(--sun);width:24px;border-radius:5px;}
.ob-next{width:100%;}

/* ================= RÉVISION ================= */
.review-cta{background:linear-gradient(135deg, var(--gold), var(--sun));}
.rv-badge{font-family:"Baloo 2";font-weight:800;font-size:16px;color:#fff;background:#ffffff33;
  min-width:36px;height:36px;padding:0 11px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rev-hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 4px;}
.rev-ring{width:158px;height:158px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--gold) calc(var(--p,0)*1%), var(--line-soft) 0);
  box-shadow:var(--shadow-sm);}
.rev-ring-in{width:128px;height:128px;border-radius:50%;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 0 0 1px var(--line-soft);}
.rev-big{font-family:"Baloo 2";font-weight:800;font-size:46px;line-height:1;color:var(--ink);}
.rev-lab{font-size:12.5px;font-weight:700;color:var(--muted);}
.rev-mast{font-family:"Baloo 2";font-weight:700;font-size:15px;color:var(--sun-d);}
.rev-due{font-size:14px;font-weight:700;color:var(--muted);background:var(--bg2);padding:8px 16px;border-radius:22px;}
.rev-due.hot{color:var(--sun-d);background:var(--sun-tint);}
.rev-say{margin:14px auto 0;display:flex;align-items:center;gap:7px;border:2px solid var(--gold);background:var(--card);
  color:var(--sun-d);cursor:pointer;font-family:"Baloo 2";font-weight:700;font-size:13.5px;border-radius:20px;padding:8px 16px;}
.rev-say:active{transform:scale(.97);}
.rev-recap{display:flex;gap:12px;margin:18px 0 4px;}
.rr-cell{flex:1;background:var(--card);border-radius:20px;padding:18px 12px;text-align:center;box-shadow:var(--shadow-sm);}
.rr-n{font-family:"Baloo 2";font-weight:800;font-size:34px;line-height:1;color:var(--sun);}
.rr-l{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:5px;}

/* ================= TEST DE NIVEAU ================= */
.lt-cta{background:linear-gradient(135deg, var(--teal), oklch(0.6 0.115 250));}
.lt-name-chip{display:inline-block;vertical-align:middle;margin-left:8px;font-family:"Baloo 2";font-weight:800;font-size:12px;
  color:#fff;background:var(--teal);padding:2px 10px;border-radius:20px;letter-spacing:.5px;}
.lt-intro{text-align:center;padding:14px 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.lt-badge{font-size:58px;animation:obFloat 4s ease-in-out infinite;}
.lt-lead{font-size:14.5px;color:var(--ink-soft);line-height:1.55;max-width:340px;text-wrap:pretty;}
.lt-lead b{color:var(--teal);}
.lt-prev{font-size:13px;color:var(--muted);background:var(--bg2);padding:7px 14px;border-radius:20px;}
.lt-result-badge{width:104px;height:104px;border-radius:32px;display:inline-flex;align-items:center;justify-content:center;
  font-size:54px;box-shadow:var(--shadow);animation:popIn .6s cubic-bezier(.2,1.5,.4,1);}
.lt-cefr{font-family:"Baloo 2";font-weight:800;font-size:14px;letter-spacing:2px;color:var(--muted);margin-top:12px;}
.lt-scale{display:flex;gap:8px;justify-content:center;margin-top:20px;}
.lt-step{flex:1;max-width:74px;background:var(--card);border-radius:16px;padding:12px 6px;text-align:center;box-shadow:var(--shadow-sm);opacity:.55;transition:.2s;}
.lt-step.on{opacity:1;box-shadow:0 0 0 2.5px var(--c), var(--shadow-sm);transform:translateY(-4px);}
.lt-step-e{display:block;font-size:24px;}
.lt-step-l{display:block;font-family:"Baloo 2";font-weight:800;font-size:13px;color:var(--ink);margin-top:3px;}
.lt-dots{flex-wrap:wrap;gap:4px;max-width:380px;margin-left:auto;margin-right:auto;}
.lt-dots .d{width:14px;height:5px;}
.lt-dots .d.on{background:var(--teal);}

/* ================= JEUX · HUB ================= */
.tab[data-tab="games"].active::before{background:var(--gold);}
.games-head{padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 8px;background:linear-gradient(180deg, oklch(0.95 0.045 75), transparent);}
.games-lead{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:10px;}
.game-grid{display:flex;flex-direction:column;gap:11px;padding:8px 16px 0;}
.game-card{display:flex;align-items:center;gap:14px;border:none;border-radius:20px;padding:16px;cursor:pointer;
  background:var(--card);box-shadow:var(--shadow-sm);text-align:left;transition:transform .12s;color:var(--ink);}
.game-card:active{transform:scale(.99);}
/* coloured game names on white cards */
.gc-tt b{color:var(--ink);}
.game-card[data-game="listen"]   .gc-tt b{color:var(--teal);}
.game-card[data-game="build"]    .gc-tt b{color:var(--sun-d);}
.game-card[data-game="sort"]     .gc-tt b{color:var(--leaf);}
.game-card[data-game="odd"]      .gc-tt b{color:var(--berry);}
.game-card[data-game="sentence"] .gc-tt b{color:var(--plum);}
.game-card[data-game="say"]      .gc-tt b{color:var(--sun);}
.game-card[data-game="crossword"].gc-tt b,
.game-card[data-game="crossword"] .gc-tt b{color:var(--teal);}
.game-card[data-game="grammar"]  .gc-tt b{color:var(--plum);}
.game-card[data-game="themes"]   .gc-tt b{color:var(--leaf);}
.game-card[data-game="listen"]   .gc-emo{background:color-mix(in oklab,var(--teal) 15%,#fff);}
.game-card[data-game="build"]    .gc-emo{background:color-mix(in oklab,var(--sun) 18%,#fff);}
.game-card[data-game="sort"]     .gc-emo{background:color-mix(in oklab,var(--leaf) 15%,#fff);}
.game-card[data-game="odd"]      .gc-emo{background:color-mix(in oklab,var(--berry) 14%,#fff);}
.game-card[data-game="sentence"] .gc-emo{background:color-mix(in oklab,var(--plum) 15%,#fff);}
.game-card[data-game="say"]      .gc-emo{background:color-mix(in oklab,var(--sun) 16%,#fff);}
.game-card[data-game="crossword"].gc-emo,
.game-card[data-game="crossword"] .gc-emo{background:color-mix(in oklab,var(--teal) 15%,#fff);}
.game-card[data-game="grammar"]  .gc-emo{background:color-mix(in oklab,var(--plum) 15%,#fff);}
.game-card[data-game="themes"]   .gc-emo{background:color-mix(in oklab,var(--leaf) 15%,#fff);}
.gc-emo{font-size:29px;width:54px;height:54px;border-radius:16px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gc-tt{flex:1;min-width:0;}
.gc-tt b{display:block;font-family:"Baloo 2";font-weight:800;font-size:18px;}
.gc-tt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.gc-go{font-size:24px;color:var(--line);flex-shrink:0;}

/* ----- jeu paires (memory) ----- */
.mem-info{display:flex;justify-content:space-between;padding:8px 18px 4px;font-family:"Baloo 2";font-weight:700;font-size:13.5px;color:var(--ink-soft);}
.mem-board{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:9px;padding:4px 14px 0;min-height:0;}
.mem-card{height:100%;min-height:64px;border:none;background:none;cursor:pointer;padding:0;perspective:760px;}
.mc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.3,.9,.3,1);}
.mem-card.up .mc-inner,.mem-card.matched .mc-inner{transform:rotateY(180deg);}
.mc-face{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;box-shadow:var(--shadow-sm);text-align:center;padding:8px;}
.mc-back{background:linear-gradient(140deg,var(--gold),var(--sun));font-size:26px;}
.mc-front{transform:rotateY(180deg);background:var(--card);font-family:"Baloo 2";font-weight:700;font-size:15px;line-height:1.14;color:var(--ink);word-break:break-word;}
.mc-front.fr{background:var(--sun-tint);color:var(--sun-d);}
.mem-card.matched .mc-front{box-shadow:inset 0 0 0 2.5px var(--leaf);background:oklch(0.95 0.05 158);color:oklch(0.42 0.1 150);}
.mem-card.matched{animation:matchPop .42s;}
@keyframes matchPop{50%{transform:scale(1.07);}}

/* ----- mots croisés ----- */
.xw-wrap{display:flex;justify-content:center;padding:14px 14px 0;}
.xw-grid{display:grid;gap:3px;margin:0 auto;}
.xw-cell{position:relative;aspect-ratio:1/1;background:var(--card);border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);}
.xw-empty{aspect-ratio:1/1;}
.xw-num{position:absolute;top:0;left:2px;font-size:8.5px;font-weight:700;color:var(--muted);font-family:"Baloo 2";z-index:2;line-height:1.2;}
.xw-in{position:absolute;inset:0;width:100%;height:100%;border:none;background:none;text-align:center;border-radius:5px;
  font-family:"Baloo 2";font-weight:800;font-size:clamp(13px,4.2vw,20px);color:var(--ink);text-transform:uppercase;outline:none;padding:0;}
.xw-in:focus{background:var(--sun-tint);}
.xw-in.ok{color:var(--leaf);}
.xw-in.bad{color:var(--berry);background:oklch(0.95 0.04 25);}
.xw-fb{text-align:center;font-family:"Baloo 2";font-weight:700;font-size:14px;min-height:18px;margin-top:12px;opacity:0;transition:.2s;}
.xw-fb.show{opacity:1;}
.xw-fb.warn{color:var(--muted);}
.xw-fb.bad{color:var(--berry);}
.xw-clues{display:flex;gap:16px;padding:12px 18px 0;}
.xw-col{flex:1;min-width:0;}
.xw-clab{font-family:"Baloo 2";font-weight:800;font-size:13px;color:var(--ink);margin-bottom:9px;}
.xw-clue{font-size:13px;line-height:1.4;color:var(--ink-soft);margin-bottom:8px;text-wrap:pretty;}
.xw-clue b{color:var(--sun-d);font-family:"Baloo 2";}
.xw-len{color:var(--muted);font-size:11px;}
.xw-foot{display:flex;gap:10px;padding:12px 16px calc(14px + var(--safe-b));background:var(--card);border-top:1px solid var(--line);}

/* ----- win overlay ----- */
.go-scrim{position:absolute;inset:0;z-index:80;background:oklch(0.3 0.04 60 / .5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:.25s;}
.go-scrim.open{opacity:1;}
.go-card{background:var(--card);border-radius:28px;padding:30px 26px 24px;width:100%;max-width:340px;text-align:center;
  box-shadow:var(--shadow);transform:scale(.9);transition:transform .3s cubic-bezier(.2,1.4,.4,1);}
.go-scrim.open .go-card{transform:none;}
.go-emoji{font-size:64px;animation:popIn .5s cubic-bezier(.2,1.5,.4,1);}
.go-title{font-family:"Baloo 2";font-weight:800;font-size:24px;margin-top:4px;line-height:1.1;}
.go-sub{color:var(--muted);font-size:14px;margin-top:5px;}
.go-xp{font-family:"Baloo 2";font-weight:800;font-size:21px;color:var(--sun);margin:12px 0 18px;}

/* ----- jeux : nouvelles cartes ----- */
/* (fonds des cartes de jeux unifiés en blanc — couleurs portées par les noms) */

/* ----- pickers (niveau / thème) ----- */
.pick-lead{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:4px 0 16px;text-wrap:pretty;}
.pick-grid{display:flex;flex-direction:column;gap:11px;}
.pick-card{display:flex;align-items:center;gap:14px;border:none;border-radius:18px;padding:15px 16px;cursor:pointer;
  background:var(--card);box-shadow:var(--shadow-sm);text-align:left;border-left:5px solid var(--c);transition:transform .12s;}
.pick-card:active{transform:scale(.99);}
.pick-emo{font-size:26px;width:50px;height:50px;border-radius:14px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pick-tt{flex:1;min-width:0;}
.pick-tt b{display:block;font-family:"Baloo 2";font-weight:800;font-size:19px;color:var(--ink);}
.pick-tt span{display:block;font-size:13px;color:var(--muted);margin-top:1px;}
.pick-best{font-family:"Baloo 2";font-weight:800;font-size:13px;color:#fff;background:var(--c);padding:4px 11px;border-radius:20px;flex-shrink:0;}
.pick-go{font-size:24px;color:var(--c);flex-shrink:0;}

.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.theme-card{display:flex;flex-direction:column;align-items:center;gap:5px;border:none;border-radius:20px;padding:20px 10px 15px;cursor:pointer;
  background:var(--card);box-shadow:var(--shadow-sm);border-bottom:4px solid var(--c);transition:transform .12s;}
.theme-card:active{transform:scale(.98);}
.th-emo{font-size:42px;line-height:1;}
.theme-card b{font-family:"Baloo 2";font-weight:800;font-size:17px;color:var(--ink);margin-top:4px;}
.th-meta{font-size:11.5px;color:var(--muted);font-weight:600;}

/* ----- grammaire : phrase ----- */
.gr-sentence{font-size:22px!important;line-height:1.35;}
.gr-blank{display:inline-block;border-bottom:3px solid var(--muted);min-width:54px;color:transparent;letter-spacing:1px;}
.gr-fill{color:var(--leaf);}
.gr-tip{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:6px;}

/* ----- imagier : image du mot ----- */
.th-pic{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border-radius:24px;
  padding:26px 20px 18px;box-shadow:var(--shadow-sm);border:2px solid color-mix(in oklab, var(--c) 22%, transparent);margin-bottom:6px;}
.th-pic-emo{font-size:80px;line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));}
.th-pic-fr{font-family:"Baloo 2";font-weight:700;font-size:18px;color:var(--ink-soft);}
.th-ask{text-align:center;font-size:14px;color:var(--muted);font-weight:600;margin:6px 0 12px;}

/* ================= LOT 1 polish : view entrance ================= */
.view.active{animation:viewIn .26s ease;}

/* ================= SETTINGS / PROFILE / PARENT ================= */
.set-scroll{padding:6px 16px calc(22px + var(--safe-b));}
.set-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow-sm);padding:16px;margin-top:12px;}
.set-card.danger{box-shadow:inset 0 0 0 1.6px color-mix(in oklab, var(--berry) 45%, transparent);}
.set-row{display:flex;align-items:center;gap:12px;}
.set-lab{flex:1;min-width:0;}
.set-lab b{display:block;font-family:"Baloo 2";font-weight:700;font-size:15.5px;color:var(--ink);}
.set-lab span{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;line-height:1.3;}
.set-lab.block{margin-bottom:6px;}
.set-sublab{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin:0 0 5px;}
.set-select{width:100%;padding:11px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card);
  font-size:14px;color:var(--ink);font-family:inherit;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.set-note{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.4;}
.set-link{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;
  padding:13px 2px;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);}
.set-link:last-child{border-bottom:none;}
.set-link .chev{color:var(--muted);font-size:22px;line-height:1;}
.set-about{text-align:center;font-size:12px;color:var(--muted);font-weight:600;margin-top:18px;line-height:1.5;}
.btn.sm{font-size:15px;padding:12px 18px;box-shadow:0 4px 0 var(--sun-d);}
.btn.sm:active{box-shadow:0 2px 0 var(--sun-d);}
.reset-btn{background:var(--berry);box-shadow:0 4px 0 oklch(0.5 0.15 18);}
.reset-btn:active{box-shadow:0 2px 0 oklch(0.5 0.15 18);}

/* iOS-style switch */
.switch{width:50px;height:30px;border-radius:30px;background:var(--line);border:none;position:relative;cursor:pointer;
  transition:background .2s;flex-shrink:0;}
.switch.on{background:var(--leaf);}
.switch>i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;}
.switch.on>i{transform:translateX(20px);}

/* account / cloud auth */
.ac-hero{text-align:center;padding:18px 10px 6px;}
.ac-emo{font-size:50px;line-height:1;}
.ac-tx{font-size:14.5px;color:var(--ink-soft);font-weight:500;line-height:1.5;margin-top:10px;}
.ac-in{width:100%;padding:13px 14px;border-radius:13px;border:2px solid var(--line);background:var(--card);
  font-size:16px;color:var(--ink);font-family:inherit;}
.ac-in:focus{outline:none;border-color:var(--sun);}
.ac-err{font-size:13px;color:var(--berry);font-weight:600;min-height:0;margin-top:8px;opacity:0;transition:opacity .2s;}
.ac-err.show{opacity:1;min-height:18px;}
.ac-link{background:none;border:none;color:var(--teal);font-weight:700;font-size:13.5px;cursor:pointer;
  margin-top:12px;display:block;width:100%;text-align:center;}
.ac-link.inline{display:inline;width:auto;margin:0;}
.ac-switch{text-align:center;font-size:13.5px;color:var(--muted);font-weight:600;margin-top:16px;}

/* narrator persona picker */
.persona-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.persona{border:none;cursor:pointer;background:var(--bg2);border-radius:14px;padding:13px 10px;
  display:flex;align-items:center;gap:10px;transition:.15s;}
.persona.on{background:var(--sun);box-shadow:0 3px 0 var(--sun-d);}
.persona .p-emo{font-size:26px;line-height:1;}
.persona .p-img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--bg);box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.18);}
.persona.on .p-img{box-shadow:0 0 0 2px var(--sun-d),0 1px 3px rgba(0,0,0,.25);}
.persona .p-lab{font-size:13px;font-weight:700;color:var(--ink-soft);}
.persona.on .p-lab{color:#fff;}

/* segmented speed control */
.seg-group{display:flex;gap:8px;}
.seg{flex:1;border:none;cursor:pointer;background:var(--bg2);color:var(--ink-soft);
  font-family:"Baloo 2";font-weight:700;font-size:14px;padding:11px 6px;border-radius:13px;transition:.15s;}
.seg.on{background:var(--sun);color:#fff;box-shadow:0 3px 0 var(--sun-d);}

/* profile */
.pr-hero{display:flex;flex-direction:column;align-items:center;margin-top:14px;}
.pr-ringwrap{position:relative;}
.pr-ring-in{display:flex;align-items:center;justify-content:center;}
.pr-avatar{width:88px;height:88px;border-radius:50%;overflow:hidden;position:relative;
  background:radial-gradient(circle at 35% 30%, var(--gold), var(--sun));border:3px solid #fff;box-shadow:var(--shadow-sm);}
.pr-lvlbadge{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-family:"Baloo 2";font-weight:800;font-size:12px;padding:3px 12px;border-radius:20px;box-shadow:var(--shadow-sm);white-space:nowrap;}
.pr-rank{font-family:"Baloo 2";font-weight:800;font-size:22px;margin-top:16px;color:var(--ink);text-align:center;}
.pr-xp{font-size:13px;color:var(--muted);font-weight:600;margin-top:3px;}
.pr-stats{display:flex;gap:9px;margin:18px 0 6px;}
.pr-sec-h{display:flex;justify-content:space-between;align-items:center;font-family:"Baloo 2";font-weight:800;font-size:16px;margin:20px 4px 10px;}
.pr-sec-h span{font-size:13px;color:var(--muted);font-weight:700;}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.badge{position:relative;background:var(--card);border-radius:16px;box-shadow:var(--shadow-sm);
  padding:14px 8px 11px;text-align:center;opacity:.5;filter:grayscale(.65);transition:.2s;}
.badge.on{opacity:1;filter:none;}
.badge-emo{font-size:32px;line-height:1;}
.badge-nm{font-family:"Baloo 2";font-weight:700;font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.1;}
.badge-ds{font-size:10.5px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.2;}
.badge-tick{position:absolute;top:7px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--leaf);color:#fff;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* parent dashboard */
.pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px;}
.pa-kpi{background:var(--card);border-radius:15px;box-shadow:var(--shadow-sm);padding:13px 8px;text-align:center;}
.pa-kpi .k-v{font-family:"Baloo 2";font-weight:800;font-size:21px;color:var(--ink);line-height:1;}
.pa-kpi .k-v small{font-size:12px;color:var(--muted);font-weight:700;}
.pa-kpi .k-l{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.2;}
.pa-sec-h{font-family:"Baloo 2";font-weight:800;font-size:16px;margin:20px 4px 8px;}
.pa-world{padding:9px 0;}
.pa-world+.pa-world{border-top:1px solid var(--line-soft);}
.pa-world-h{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:var(--ink-soft);margin-bottom:7px;}
.pa-bar{height:9px;background:var(--line-soft);border-radius:6px;overflow:hidden;}
.pa-bar>i{display:block;height:100%;border-radius:6px;transition:width .5s;}
.pa-tips{display:flex;flex-direction:column;gap:11px;}
.pa-tip{font-size:13.5px;line-height:1.45;color:var(--ink-soft);font-weight:500;}
.gate-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:28px 24px;max-width:300px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;}
.gate-q{font-size:18px;font-weight:600;color:var(--ink);}
.gate-in{width:130px;text-align:center;font-size:24px;font-family:"Baloo 2";font-weight:800;padding:10px;
  border-radius:14px;border:2px solid var(--line);color:var(--ink);}
.gate-err{font-size:13px;color:var(--berry);font-weight:600;min-height:18px;}

/* ============ COMPRÉHENSION (parcours A1+) ============ */
.cp-instr{font-family:"Baloo 2";font-weight:700;font-size:16px;color:var(--ink);text-align:center;margin:8px 0 12px;}
.cp-hint{font-size:13px;color:var(--muted);font-style:italic;margin-top:8px;}
.cp-target{min-height:54px;border:2px dashed var(--line);border-radius:14px;padding:8px;background:var(--bg2);
  display:flex;flex-direction:column;gap:7px;}
.cp-empty{color:var(--muted);font-size:13px;font-style:italic;margin:auto;text-align:center;padding:10px;}
.cp-pool{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.cp-row{text-align:left;border:none;cursor:pointer;background:var(--card);border-radius:13px;
  padding:12px 14px;box-shadow:var(--shadow-sm);font-size:15px;line-height:1.35;color:var(--ink);
  font-family:"Baloo 2";font-weight:600;transition:transform .1s;}
.cp-row:active{transform:scale(.99);}
.cp-row.in{background:var(--sun-tint);box-shadow:inset 0 0 0 2px var(--sun);}
.cp-row.in b{color:var(--sun-d);margin-right:4px;}
.cp-row.ok{background:color-mix(in oklab,var(--leaf) 16%,var(--card));box-shadow:inset 0 0 0 2px var(--leaf);pointer-events:none;}
.cp-row.ok b{color:var(--leaf);margin-right:4px;}

/* ================= WORD GAMES (6 jeux × 20 thèmes) ================= */
.theme-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-top:12px;}
.theme-tile{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;border:none;
  background:var(--card);border-radius:16px;padding:16px 8px;box-shadow:var(--shadow-sm);
  border-bottom:3px solid var(--tc,var(--sun));transition:transform .12s;}
.theme-tile:active{transform:translateY(2px);}
.theme-tile .tt-emo{font-size:30px;line-height:1;}
.theme-tile .tt-lab{font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.15;}

.wg-prog{height:6px;background:var(--line-soft);margin:0 14px;border-radius:6px;overflow:hidden;}
.wg-prog>i{display:block;height:100%;background:var(--sun);border-radius:6px;transition:width .3s;}
.wg-scroll{padding:14px 18px 0;}

.wg-listen{text-align:center;margin:10px 0 18px;}
.wg-bigspk{width:96px;height:96px;border-radius:50%;border:none;cursor:pointer;font-size:42px;
  background:var(--sun);color:#fff;box-shadow:0 6px 0 var(--sun-d);}
.wg-bigspk:active{transform:translateY(3px);box-shadow:0 3px 0 var(--sun-d);}
.wg-hint{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:12px;}

.wg-opts4{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:6px;}
.wg-opt{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  background:var(--card);border-radius:16px;padding:16px 8px;box-shadow:var(--shadow-sm);
  transition:transform .12s;border:2px solid transparent;}
.wg-opt:active{transform:scale(.97);}
.wg-opt .wo-emo{font-size:38px;line-height:1;}
.wg-opt .wo-fr{font-size:13.5px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.15;}
.wg-opt .wo-fr small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;}
.wg-opt.done{pointer-events:none;}
.wg-opt.good{border-color:var(--leaf);background:color-mix(in oklab,var(--leaf) 12%,var(--card));}
.wg-opt.bad{border-color:var(--berry);background:color-mix(in oklab,var(--berry) 12%,var(--card));}
.wg-opts4.odd .wo-emo{font-size:30px;}

.wg-fb{margin:16px 2px 4px;font-size:15px;font-weight:700;text-align:center;opacity:0;transition:opacity .2s;}
.wg-fb.show{opacity:1;}
.wg-fb.good{color:var(--leaf);}
.wg-fb.bad{color:var(--berry);}

.wg-build,.wg-say,.wg-sort{text-align:center;}
.wb-pic{font-size:72px;line-height:1;margin:6px 0;}
.wb-fr{font-family:"Baloo 2";font-weight:700;font-size:20px;color:var(--ink);}
.wg-mini-spk{background:none;border:none;color:var(--teal);font-weight:700;font-size:13px;cursor:pointer;margin-top:6px;}
.wb-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0;}
.wb-slot{width:38px;height:46px;border:none;border-bottom:3px solid var(--line);background:var(--bg2);border-radius:10px;
  font-family:"Baloo 2";font-weight:800;font-size:22px;color:var(--ink);text-transform:uppercase;cursor:pointer;}
.wb-slot.filled{background:var(--sun-tint);border-bottom-color:var(--sun);}
.wb-slot.ok{background:color-mix(in oklab,var(--leaf) 20%,var(--card));border-bottom-color:var(--leaf);}
.wb-slot.no{background:color-mix(in oklab,var(--berry) 16%,var(--card));border-bottom-color:var(--berry);}
.wb-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;}
.wb-tile{min-width:40px;height:46px;padding:0 10px;border:none;border-radius:11px;background:var(--card);
  box-shadow:0 3px 0 var(--line);font-family:"Baloo 2";font-weight:800;font-size:22px;color:var(--ink);
  text-transform:uppercase;cursor:pointer;transition:transform .1s;}
.wb-tile:active{transform:translateY(2px);}
.wb-tile.used{opacity:.22;pointer-events:none;}

.ws-card{background:var(--card);border-radius:20px;box-shadow:var(--shadow-sm);padding:22px;margin:8px 0 6px;
  display:flex;flex-direction:column;gap:3px;}
.ws-emo{font-size:60px;line-height:1;}
.ws-en{font-family:"Baloo 2";font-weight:800;font-size:24px;color:var(--ink);}
.ws-fr{font-size:14px;color:var(--muted);font-style:italic;}
.ws-cats{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.ws-cat{display:flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;
  background:var(--card);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);
  font-family:"Baloo 2";font-weight:700;font-size:15px;color:var(--ink);border:2px solid transparent;}
.ws-cat.done{pointer-events:none;}
.ws-cat.good{border-color:var(--leaf);background:color-mix(in oklab,var(--leaf) 12%,var(--card));}
.ws-cat.bad{border-color:var(--berry);background:color-mix(in oklab,var(--berry) 12%,var(--card));}

.wq-fr{font-size:15px;color:var(--ink-soft);font-weight:600;text-align:center;margin:6px 0 14px;}
.wq-line{min-height:56px;border:2px dashed var(--line);border-radius:14px;padding:10px;
  display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;background:var(--bg2);}
.wq-empty{color:var(--muted);font-size:13px;font-style:italic;margin:auto;}
.wq-bank{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px;justify-content:center;}
.wq-chip{border:none;border-radius:11px;padding:10px 14px;background:var(--card);box-shadow:0 3px 0 var(--line);
  font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;transition:transform .1s;}
.wq-chip:active{transform:translateY(2px);}
.wq-chip.in{background:var(--sun-tint);box-shadow:0 3px 0 var(--sun);}

/* ===== Mode d'emploi (Guide) ===== */
.gd-scrim{position:fixed;inset:0;background:rgba(30,18,8,.55);display:flex;align-items:flex-end;
  justify-content:center;z-index:1200;opacity:0;transition:opacity .25s;}
.gd-scrim.open{opacity:1;}
.gd-sheet{background:var(--bg,#FBF6EE);width:100%;max-width:560px;max-height:88vh;
  border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(24px);transition:transform .28s;box-shadow:0 -8px 40px rgba(0,0,0,.25);}
.gd-scrim.open .gd-sheet{transform:translateY(0);}
.gd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;color:var(--ink,#3a2410);
  border-bottom:1px solid rgba(0,0,0,.06);}
.gd-x{border:none;background:var(--bg2,#efe7d8);width:34px;height:34px;border-radius:50%;
  font-size:14px;color:var(--ink-soft,#6b5d4a);cursor:pointer;}
.gd-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 16px 26px;}
.gd-card{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(0,0,0,.05);}
.gd-emo{font-size:25px;line-height:1.1;flex:0 0 34px;text-align:center;}
.gd-tx b{display:block;font-size:15.5px;margin-bottom:4px;color:var(--ink,#3a2410);}
.gd-tx p{margin:0;font-size:14px;color:var(--ink-soft,#6b5d4a);line-height:1.5;}
.gd-tx ol{margin:4px 0 0;padding-left:18px;font-size:14px;color:var(--ink-soft,#6b5d4a);line-height:1.55;}
.gd-tx li{margin-bottom:3px;}
.gd-foot{text-align:center;color:var(--muted,#9a8c78);font-size:13px;padding:18px 0 4px;}

/* ===== Faux amis (leçon) ===== */
.ff-card{background:var(--card,#fff);border-radius:16px;padding:14px 15px;margin-bottom:11px;box-shadow:0 3px 0 var(--line,#e7ddcb);}
.ff-top{display:flex;align-items:center;justify-content:space-between;}
.ff-en{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;color:var(--ink,#3a2410);}
.ff-trap{margin-top:7px;font-size:13.5px;color:#b5562f;line-height:1.4;}
.ff-real{margin-top:4px;font-size:14px;color:var(--ink,#3a2410);line-height:1.4;}
.ff-ex{margin-top:8px;font-size:13px;color:var(--ink-soft,#6b5d4a);line-height:1.5;
  border-left:3px solid var(--sun,#EBA94E);padding-left:9px;}
.ff-qword{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;color:var(--ink,#3a2410);
  text-align:center;display:flex;gap:8px;align-items:center;justify-content:center;}
.ff-qask{text-align:center;color:var(--ink-soft,#6b5d4a);font-size:14.5px;margin:8px 0 18px;}
.ff-opts{display:flex;flex-direction:column;gap:11px;}
.ff-opt{border:none;border-radius:14px;padding:15px 16px;background:var(--card,#fff);
  box-shadow:0 3px 0 var(--line,#e7ddcb);font-size:15.5px;font-weight:600;color:var(--ink,#3a2410);
  cursor:pointer;text-align:left;transition:transform .1s;}
.ff-opt:active{transform:translateY(2px);}
.ff-opt.ok{background:#e6f6e6;box-shadow:0 3px 0 #8ec78e;}
.ff-opt.bad{background:#fdeaea;box-shadow:0 3px 0 #e3a0a0;}
.ff-score{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;color:var(--ink,#3a2410);margin:4px 0;}

/* ===== Mini-dictionnaire ===== */
.dico-search{padding:10px 16px;background:var(--bg,#FBF6EE);position:sticky;top:0;z-index:2;}
.dico-search input{width:100%;border:none;border-radius:14px;padding:13px 15px;font-size:15px;
  background:var(--bg2,#efe7d8);color:var(--ink,#3a2410);box-shadow:inset 0 1px 3px rgba(0,0,0,.06);}
.dico-list{padding:0 14px 26px;}
.dico-letter{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;color:var(--terra,#A85F38);
  padding:12px 4px 4px;letter-spacing:.5px;}
.dico-row{display:flex;align-items:center;gap:11px;width:100%;border:none;cursor:pointer;
  background:var(--card,#fff);border-radius:12px;padding:11px 13px;margin-bottom:7px;
  box-shadow:0 2px 0 var(--line,#e7ddcb);text-align:left;transition:transform .08s;}
.dico-row:active{transform:translateY(2px);}
.dico-emo{font-size:21px;line-height:1;flex:0 0 26px;text-align:center;}
.dico-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.dico-tx b{font-size:15.5px;color:var(--ink,#3a2410);}
.dico-tx span{font-size:13px;color:var(--ink-soft,#6b5d4a);}
.dico-say{font-size:17px;flex:0 0 auto;opacity:.7;}

/* ===== Paywall (Premium) ===== */
.pw-reason{background:var(--sun-tint,#FCE9C7);color:var(--ink,#3a2410);border-radius:12px;
  padding:11px 13px;font-size:14px;line-height:1.45;margin-bottom:14px;}
.pw-benes{display:flex;flex-direction:column;gap:11px;margin-bottom:14px;}
.pw-b{display:flex;gap:12px;align-items:flex-start;}
.pw-b>span{font-size:22px;line-height:1.1;flex:0 0 28px;text-align:center;}
.pw-b b{display:block;font-size:15px;color:var(--ink,#3a2410);}
.pw-b div span{font-size:13px;color:var(--ink-soft,#6b5d4a);}
.pw-price{text-align:center;background:var(--bg2,#efe7d8);border-radius:12px;padding:12px;
  font-size:14px;color:var(--ink,#3a2410);margin-bottom:14px;}
.pw-lab{display:block;font-size:13px;color:var(--ink-soft,#6b5d4a);margin-bottom:6px;}
.pw-code{display:flex;gap:8px;}
.pw-code input{flex:1;border:none;border-radius:12px;padding:12px 14px;font-size:15px;
  background:var(--bg2,#efe7d8);color:var(--ink,#3a2410);box-shadow:inset 0 1px 3px rgba(0,0,0,.06);}