/* Le Quatuor — style commun
   DA : crème chaud + encre navy, aplats joyeux, mascottes blob, typo ronde.
   Accessibilité 7-107 ans : gros contrastes, grosses cibles tactiles, focus visible. */
:root{
  --bg:#FBF2E4; --card:#fff; --ink:#26284B; --muted:#6E7086;
  --line:#EADFCC; --accent:#E0812F; --err:#DD4B4B;
  --good:#2C8C5C; --near:#F3B33D; --off:#C6C8D6;
  --lemot:#2C8C5C; --ana:#5B6FD6; --compte:#E0812F; --fam:#E15A5A;
}
.g-lemot{--accent:var(--lemot)}
.g-anagramme{--accent:var(--ana)}
.g-compte{--accent:var(--compte)}
.g-famdoku{--accent:var(--fam)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;
  display:flex;flex-direction:column;align-items:center;padding:14px;min-height:100dvh}
.app{width:100%;max-width:480px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mascot{display:block;flex-shrink:0}
/* rendu vectoriel de la meilleure qualité (anti-crénelage propre sur écrans non-Retina) */
svg.mascot,svg.stblob{shape-rendering:geometricPrecision;text-rendering:geometricPrecision}

/* ---- vie des mascottes : respiration, clignements, sautillement ---- */
.m-body{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 65%;transform-box:fill-box}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.955)}}
.m-eye{animation:blink 5.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,91.5%,100%{transform:scaleY(1)}93.5%{transform:scaleY(.08)}95.5%{transform:scaleY(1)}}
.m-kid{animation:kidbob 3.6s ease-in-out infinite .5s;transform-origin:center;transform-box:fill-box}
@keyframes kidbob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(4deg)}}
.m-kid .m-eye{animation-delay:1.3s}
/* désynchronisation : chaque mascotte du quatuor vit à son rythme */
.hero-mascots .mascot:nth-child(2) .m-body{animation-delay:.9s}
.hero-mascots .mascot:nth-child(2) .m-eye{animation-delay:.7s;animation-duration:6.1s}
.hero-mascots .mascot:nth-child(3) .m-body{animation-delay:1.7s}
.hero-mascots .mascot:nth-child(3) .m-eye{animation-delay:2.2s;animation-duration:4.7s}
.hero-mascots .mascot:nth-child(4) .m-body{animation-delay:.4s}
.hero-mascots .mascot:nth-child(4) .m-eye{animation-delay:1.5s;animation-duration:5.6s}
.gcard:nth-child(2) .m-body{animation-delay:.9s}
.gcard:nth-child(2) .m-eye{animation-delay:.6s}
.gcard:nth-child(3) .m-body{animation-delay:1.7s}
.gcard:nth-child(3) .m-eye{animation-delay:2.1s}
.gcard:nth-child(4) .m-body{animation-delay:.4s}
.gcard:nth-child(4) .m-eye{animation-delay:1.4s}
@media (prefers-reduced-motion:reduce){
  .m-body,.m-eye,.m-kid{animation:none}
}

/* ---- entête ---- */
.qhead{width:100%;max-width:480px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qhead .back{font-size:22px;text-decoration:none;color:var(--ink);font-weight:800;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:2px solid var(--line);border-radius:999px}
.qhead .qtitle{flex:1;display:flex;align-items:center;gap:9px}
.qhead .qtitle span{font-size:19px;font-weight:800}
.qhead .qtitle small{font-size:12.5px;color:var(--muted);font-weight:700}
.qhead .fire{font-size:14px;font-weight:800;color:var(--accent)}

/* ---- accueil ---- */
.home-hero{text-align:center;margin:12px 0 18px}
.hero-mascots{display:flex;justify-content:center;gap:4px;margin-bottom:10px}
.hero-mascots .mascot:nth-child(1){transform:rotate(-8deg)}
.hero-mascots .mascot:nth-child(2){transform:rotate(5deg) translateY(3px)}
.hero-mascots .mascot:nth-child(3){transform:rotate(-4deg)}
.hero-mascots .mascot:nth-child(4){transform:rotate(7deg) translateY(2px)}
.home-hero h1{font-family:"Cherry Bomb One","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:40px;margin:0 0 4px;letter-spacing:.5px;font-weight:400}
.home-hero p{margin:0;font-size:14px;color:var(--muted);font-weight:700}
.home-hero .num{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:800;
  background:var(--card);border:2px solid var(--line);border-radius:999px;padding:5px 14px;color:var(--muted)}
/* encart progression : anneau + blob + niveau/ceinture + streak + partage */
.panel.prog{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:14px 18px;
  border:0;box-shadow:0 2px 12px rgba(38,40,75,.07)}
.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:500;font-style:normal;
  font-size:24px;line-height:1;color:var(--ink);display:inline-block;
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}
.ring{position:relative;width:84px;height:84px;flex-shrink:0}
.ring > svg{width:84px;height:84px;display:block}
.ringblob .mascot{width:46px;height:46px}
.ring .rbg{fill:none;stroke:#F1E5D0;stroke-width:7}
.ring .rfg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.ringblob{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.prog .ptxt{flex:1;min-width:140px}
.prog .ptxt b{display:block;font-size:15.5px;font-weight:900}
.prog .ptxt small{display:block;font-size:13px;color:var(--muted);font-weight:800;margin-top:3px}
.prog .btn{padding:8px 18px;min-height:38px;font-size:13.5px;margin-top:9px}

.cards{display:flex;flex-direction:column;gap:12px}
.gcard{display:flex;align-items:center;gap:13px;background:var(--card);
  border:2px solid var(--line);border-radius:20px;padding:13px 15px;
  text-decoration:none;color:var(--ink);transition:transform .08s}
.gcard:active{transform:scale(.98)}
.gcard .ico{width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;flex-shrink:0}
.gcard .ico.lemot{background:#DCEFE4}
.gcard .ico.anagramme{background:#E2E6F9}
.gcard .ico.compte{background:#FAE6D2}
.gcard .ico.famdoku{background:#FADEDE}
.gcard .txt{flex:1;min-width:0}
.gcard .txt b{display:block;font-size:16.5px;font-weight:800}
.gcard .txt small{font-size:12.5px;color:var(--muted);font-weight:700}
.gcard .st{font-size:14px;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:5px}
.stblob{display:inline-block;vertical-align:middle}
.gcard.done{border-color:#BFDCCB;background:#F3FAF5}
.gcard.done .st{color:var(--good)}
.gcard:not(.done) .st{color:var(--accent)}
.daybar{margin:18px 0 6px;text-align:center}
.foot{text-align:center;font-size:11.5px;color:var(--muted);margin-top:24px;font-weight:700}

/* ---- composants communs ---- */
.rules{background:var(--card);border:2px solid var(--line);border-radius:16px;
  padding:11px 14px;font-size:13px;color:var(--muted);margin:10px 0;line-height:1.5;font-weight:650}
.rules b{color:var(--ink);font-weight:800}
.btn{font:inherit;font-size:15px;font-weight:800;border-radius:999px;padding:13px 20px;
  cursor:pointer;border:2px solid var(--ink);min-height:48px}
.btn.primary{background:var(--ink);color:#fff}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.tip{background:var(--card);color:var(--accent);border-color:var(--accent)}
.btn.share{background:var(--good);border-color:var(--good);color:#fff}
.btn:disabled{opacity:.35;cursor:default}
.actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.msg{font-size:13.5px;font-weight:800;color:var(--err);min-height:19px;text-align:center;margin:8px 0 2px}
.end{background:var(--card);border:2px solid var(--line);border-radius:22px;
  padding:20px;text-align:center;margin-top:14px;animation:pop .35s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.end h2{margin:0 0 6px;font-size:19px;font-weight:900}
.end p{margin:4px 0;font-size:13.5px;color:var(--muted);font-weight:650}
.end .big{font-size:15.5px;color:var(--ink)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:800;padding:12px 18px;
  border-radius:999px;opacity:0;pointer-events:none;transition:.25s;max-width:88vw;text-align:center;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- sélecteur de niveau ---- */
.segs{display:flex;justify-content:center;margin:10px 0 2px}
.seg{display:flex;gap:5px;background:#F1E5D0;border-radius:999px;padding:5px;width:fit-content}
.seg button{border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--muted);
  padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:800;min-height:40px}
.seg button.on{background:var(--ink);color:#fff;box-shadow:0 1px 3px rgba(38,40,75,.25)}
.levelhint{font-size:12.5px;color:var(--muted);text-align:center;margin:7px 0 4px;font-weight:700}

/* ---- Le Mot ---- */
.wgrid{display:grid;grid-template-rows:repeat(6,1fr);gap:7px;max-width:330px;margin:8px auto;
  aspect-ratio:5/6}
.wrow{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.wcell{border:2.5px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(17px,5.5vw,25px);font-weight:900;text-transform:uppercase;background:var(--card)}
.wcell.filled{border-color:var(--muted)}
.wcell.good{background:var(--good);border-color:var(--good);color:#fff}
.wcell.near{background:var(--near);border-color:var(--near);color:var(--ink)}
.wcell.off{background:var(--off);border-color:var(--off);color:var(--ink);opacity:.85}
.wcell.pop{animation:wpop .12s ease}
@keyframes wpop{50%{transform:scale(1.12)}}
.kbd{display:flex;flex-direction:column;gap:7px;margin-top:14px;user-select:none}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1;max-width:42px;height:54px;border:0;border-radius:10px;background:#EDE3D0;color:var(--ink);
  font:inherit;font-size:15px;font-weight:800;cursor:pointer;text-transform:uppercase}
.key.wide{max-width:66px;font-size:12px}
.key.good{background:var(--good);color:#fff}
.key.near{background:var(--near);color:var(--ink)}
.key.off{background:var(--off);color:var(--ink);opacity:.7}

/* ---- Anagramme ---- */
.aanswer{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:18px 0 4px}
.aslot{width:clamp(34px,10vw,46px);height:clamp(42px,12vw,54px);font:inherit;
  background:var(--bg);border:2.5px dashed var(--line);border-radius:13px;
  display:flex;align-items:center;justify-content:center;font-size:clamp(19px,6vw,25px);
  font-weight:900;color:var(--ink);cursor:default;padding:0}
.aslot.filled{background:var(--card);border-style:solid;border-color:var(--muted);cursor:pointer}
.aslot.hint{background:var(--good);border-style:solid;border-color:var(--good);color:#fff}
.aletters{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:14px 0 8px;min-height:56px}
.atile{width:clamp(34px,10vw,46px);height:clamp(42px,12vw,54px);font:inherit;padding:0;
  background:var(--card);border:2.5px solid var(--line);border-radius:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:clamp(19px,6vw,25px);
  font-weight:900;color:var(--ink);box-shadow:0 3px 0 var(--line)}
.atile:not(.used):active{transform:translateY(2px);box-shadow:none}
.atile.used{opacity:.2;box-shadow:none;cursor:default}
.atries{text-align:center;font-size:13.5px;color:var(--muted);min-height:18px;font-weight:700}
.abad{animation:shake .3s ease}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---- Le Compte ---- */
.ctarget{text-align:center;margin:10px 0 4px}
.ctarget .n{font-size:42px;font-weight:900;letter-spacing:1px;background:var(--ink);color:#fff;
  border-radius:20px;padding:7px 26px;display:inline-block;font-variant-numeric:tabular-nums}
.ctarget small{display:block;margin-top:7px;font-size:13px;color:var(--muted);font-weight:700}
.ceq{text-align:center;font-size:23px;font-weight:800;min-height:36px;margin:14px 0 2px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ceq b{font-weight:900}
.ceq.done b{color:var(--accent)}
.ceq .dots{color:var(--muted)}
.ctiles{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:10px 0 6px;min-height:58px}
.ctile{min-width:56px;height:56px;padding:0 12px;background:var(--card);border:2.5px solid var(--line);
  border-radius:16px;font:inherit;font-size:21px;font-weight:900;cursor:pointer;color:var(--ink);
  box-shadow:0 3px 0 var(--line);font-variant-numeric:tabular-nums}
.ctile.sel{border-color:var(--accent);color:var(--accent);transform:translateY(2px);box-shadow:none}
.ctile.used{opacity:.3;box-shadow:none;cursor:default;text-decoration:line-through;background:transparent}
.ctile.new{animation:drop2 .25s ease}
@keyframes drop2{from{transform:scale(.5);opacity:0}}
.cops{display:flex;justify-content:center;gap:9px;margin:12px 0}
.cop{width:56px;height:50px;border:2.5px solid var(--line);background:var(--card);border-radius:999px;
  font:inherit;font-size:21px;font-weight:900;cursor:pointer;color:var(--ink)}
.cop.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.cop.used{opacity:.3;cursor:default;text-decoration:line-through;background:transparent}
.chist{font-size:14px;color:var(--muted);text-align:center;min-height:20px;line-height:1.65;
  font-variant-numeric:tabular-nums;font-weight:700}
.chist b{color:var(--ink)}
.cbest{text-align:center;font-size:13.5px;font-weight:800;margin-top:6px}

/* ---- Le Chasseur de fautes ---- */
.g-fautes{--accent:#1F8A87}
.gcard .ico.fautes{background:#D7ECEB}
.ftitre{text-align:center;font-size:17px;font-weight:900;margin:14px 0 8px}
.ftxt{background:var(--card);border:2px solid var(--line);border-radius:18px;
  padding:16px 18px;font-size:16.5px;line-height:2.05;color:var(--ink);font-weight:650}
.fw{font:inherit;background:none;border:0;padding:1px 4px;margin:0 -1px;border-radius:8px;
  cursor:pointer;color:inherit;line-height:inherit}
.fw:hover{background:#F5EBDB}
.fw.sel{background:#FBE3C9;box-shadow:inset 0 0 0 2px var(--accent);font-weight:800}
.fw.good{background:#DCEFE4;box-shadow:inset 0 0 0 2px var(--good);font-weight:800}
.fw.bad{background:#FADEDE;box-shadow:inset 0 0 0 2px var(--err)}
.fw.missed{background:#FDF0D3;box-shadow:inset 0 0 0 2px var(--near);font-weight:800}
.fw s{opacity:.55}
.fw.good s,.fw.missed s{color:var(--err)}

/* ---- Familydoku ---- */
.fdk-minirules{display:flex;justify-content:center;gap:8px;margin:2px 0 8px}
.fdk-minirules .mini{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);
  border:2px solid var(--line);border-radius:14px;padding:8px 9px}
.fdk-minirules .mini span{font-size:11px;line-height:1.3;color:var(--muted);font-weight:800}
.mg{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(3,15px);gap:2px;flex-shrink:0}
.mg .mc{background:#F1E5D0;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;color:#A6987F}
.rules-sub{font-size:12px;color:var(--muted);text-align:center;margin:0 0 4px;line-height:1.55;font-weight:700}
.rules-sub b{color:var(--ink)}
.fdk-top{display:flex;align-items:center;justify-content:space-between;margin:8px 2px}
.fdk-top .timer{font-size:13.5px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.fdk-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  gap:3px;padding:7px;border-radius:20px;aspect-ratio:1;user-select:none;touch-action:none;
  background:#fff;box-shadow:0 2px 8px rgba(38,40,75,.09)}
.fdk-board .cell{position:relative;cursor:pointer;transition:filter .1s;border-radius:8px}
.fdk-board .cell:active{filter:brightness(.93)}
.fdk-board .cell .p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(18px,5.5vw,30px);pointer-events:none;animation:drop3 .18s ease;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
@keyframes drop3{from{transform:scale(.6);opacity:0}}
.fdk-board .cell .x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(15px,4.2vw,22px);font-weight:900;color:rgba(255,255,255,.95);
  -webkit-text-stroke:1.3px rgba(255,255,255,.95);paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(0,0,0,.22);pointer-events:none}
.fdk-board .cell.err::after{content:"";position:absolute;inset:7%;border:3px solid var(--err);
  border-radius:11px;pointer-events:none;animation:pulse .8s ease infinite alternate}
@keyframes pulse{from{opacity:.5}to{opacity:1}}
.fdk-board .cell.winpop .p{animation:winpop .5s ease}
@keyframes winpop{45%{transform:scale(1.25) rotate(-6deg)}}
.fdk-board .cell .broken{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(17px,4.8vw,26px);pointer-events:none;animation:heartbreak 1s ease forwards}
@keyframes heartbreak{0%{transform:scale(.3);opacity:0}18%{transform:scale(1.4) rotate(-10deg);opacity:1}
  36%{transform:scale(1.05) rotate(8deg)}54%{transform:scale(1.2) rotate(-6deg)}
  75%{transform:scale(1) rotate(0)}100%{transform:scale(1);opacity:.85}}
.hearts{font-size:16px;letter-spacing:2px}
.hearts .lost{filter:grayscale(1);opacity:.4}
.hearts .justlost{display:inline-block;animation:heartpop .6s ease}
@keyframes heartpop{35%{transform:scale(1.6) rotate(-10deg)}70%{transform:scale(.85)}}
.fdk-legend{display:flex;justify-content:center;gap:7px;margin:14px 0 2px;flex-wrap:wrap}
.fdk-legend .coin{width:46px;height:46px;border-radius:50%;background:var(--card);
  box-shadow:0 2px 5px rgba(38,40,75,.15);display:flex;align-items:center;justify-content:center;
  font-size:23px;color:#D9CDBA;font-weight:900}
.fdk-legend .coin.found{animation:coinpop .6s ease}
@keyframes coinpop{40%{transform:scale(1.3) rotate(-8deg)}}

/* ---- réglages ---- */
.panel{background:var(--card);border:2px solid var(--line);border-radius:22px;
  padding:18px;margin-bottom:14px}
.panel h2{margin:0 0 12px;font-size:18px;font-weight:900}
.blob-stage{display:flex;justify-content:center;margin:6px 0 2px}
.belt-line{text-align:center;font-size:15px;color:var(--muted);font-weight:700;margin-bottom:10px}
.belt-line b{color:var(--ink);font-weight:900}
.xpbar{height:12px;background:#F1E5D0;border-radius:999px;overflow:hidden;max-width:280px;margin:0 auto}
.xpbar .fill{height:100%;background:var(--good);border-radius:999px;transition:width .4s ease;min-width:6px}
.xp-line{text-align:center;font-size:12.5px;color:var(--muted);font-weight:700;margin:7px 0 16px}
.field{display:block;margin:12px 0}
.field span{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.field input{font:inherit;font-size:16px;font-weight:700;width:100%;
  border:2.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--bg);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--accent)}
.picker-label{font-size:13px;font-weight:800;margin:16px 0 8px}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:42px;height:42px;border-radius:50%;border:3px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.swatch.on{border-color:var(--ink);transform:scale(1.12)}
.faces{display:flex;gap:8px;flex-wrap:wrap}
.facepick{background:var(--bg);border:2.5px solid var(--line);border-radius:16px;
  padding:6px;cursor:pointer;line-height:0}
.facepick.on{border-color:var(--ink);background:#fff}
.facepick .m-body,.facepick .m-eye{animation:none}
.fam-intro{font-size:13.5px;color:var(--muted);font-weight:650;line-height:1.5;margin:0 0 12px}
.fam-code{text-align:center;font-size:34px;font-weight:900;letter-spacing:4px;
  background:var(--bg);border:2.5px dashed var(--line);border-radius:16px;padding:14px;margin-bottom:6px;
  font-variant-numeric:tabular-nums}
/* tableau de famille sur l'accueil */
.fam-board{margin-top:14px}
.fam-board h2{margin:0 0 10px;font-size:16.5px;font-weight:900}
.fam-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1.5px solid var(--line)}
.fam-row:first-of-type{border-top:0}
.fam-row .fnom{flex:1;min-width:0}
.fam-row .fnom b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-row .fnom small{font-size:12px;color:var(--muted);font-weight:700}
.fam-row .ficons{display:flex;align-items:center;gap:4px;white-space:nowrap}

/* accueil : molette de réglages + pastille de niveau */
.home .app{position:relative}
.me{position:absolute;top:0;right:0;z-index:5;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;font-size:20px;text-decoration:none;
  background:var(--card);border:2px solid var(--line);border-radius:999px}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.pills .num{margin-top:0}
.lvl-pill{display:inline-flex;align-items:center;gap:6px}
.lvl-pill .mascot{width:24px;height:24px}
.lvl-pill .m-body,.lvl-pill .m-eye{animation:none}

/* ---- tablette / iPad : on respire ---- */
@media (min-width:700px){
  body{padding:28px}
  /* pages de jeu : plateaux plus larges */
  .app,.qhead{max-width:560px}
  .wgrid{max-width:400px}
  .key{max-width:48px;height:58px;font-size:16px}
  .key.wide{max-width:76px}
  .atile{width:54px;height:62px;font-size:28px}
  .ctile{min-width:64px;height:62px;font-size:24px}
  .cop{width:64px;height:56px;font-size:24px}
  .ctarget .n{font-size:48px}
  .ceq{font-size:26px}
  .fdk-minirules .mini span{font-size:12.5px}
  .mg{grid-template-columns:repeat(3,17px);grid-template-rows:repeat(3,17px)}
  /* accueil : héros plus grand + cartes en grille 2×2 */
  .home .app{max-width:860px}
  .home-hero{margin:20px 0 26px}
  .home-hero h1{font-size:52px}
  .hero-mascots{gap:10px}
  .hero-mascots .mascot{width:52px;height:52px}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .gcard{padding:18px;border-radius:24px}
  .gcard .ico{width:72px;height:72px}
  .gcard .ico .mascot{width:52px;height:52px}
  .gcard .txt b{font-size:18px}
  .gcard .txt small{font-size:13.5px}
}