/* Layout : une seule scène plein écran, barre du haut (maison, étoiles, son), grande zone de calcul, sol sableux en bas */
:root{
  --sky:#d9f0e4; --ground:#e9d6a8; --ink:#1d3b2a; --leaf:#3f8f5a; --accent:#ef7d22; --card:#ffffff; --nest:#c69c5d;
  --good:#3aa55c; --bad:#d9534f;
  --display:"Baloo 2","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
  color-scheme:light;
}
html,body{height:100%}
body{background:var(--sky);color:var(--ink);font-family:var(--display);overflow:hidden;
  background-image:linear-gradient(to top,var(--ground) 0,var(--ground) 8%,transparent 8%)}
.app{height:100%;display:grid;grid-template-rows:auto 1fr;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px 0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.round{width:54px;height:54px;border-radius:50%;border:3px solid var(--ink);background:var(--card);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;flex:none}
.round svg{width:28px;height:28px}
.round:active{transform:scale(.93)}
.stars{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;min-width:0}
.stars svg{width:clamp(20px,6vw,30px);height:clamp(20px,6vw,30px)}
.stars .on{fill:#f6c431;stroke:#b9861a}
.stars .off{fill:transparent;stroke:#8bb59b}
main{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:16px;min-height:0;padding-block:8px 8vh;overflow:auto}
h1{font-size:clamp(2.6rem,9vw,4.4rem);margin:0;line-height:1;color:var(--leaf);text-wrap:balance;text-align:center}
.sub{margin:0;font-size:1.2rem;font-weight:500;text-align:center}
.menu{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:720px}
@media (min-width:700px){.menu{grid-template-columns:repeat(4,1fr)}}
.choice{background:var(--card);border:4px solid var(--ink);border-radius:24px;padding:14px 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:var(--ink);font-size:1.3rem;font-weight:800;
  box-shadow:0 6px 0 var(--ink)}
.choice .sym{font-size:3.4rem;line-height:1;color:var(--accent)}
.choice small{font-size:.9rem;font-weight:500}
.choice.mix{grid-column:1/-1;flex-direction:row;justify-content:center;gap:14px}
.choice.mix svg{height:56px}
.choice.mix span{text-align:center}
.choice:active,.go:active,.num-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.scene{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.mascot{width:min(26vw,130px);flex:none}
.mascot.trex{width:calc(min(26vw,130px) * var(--taille,1));transition:width .7s cubic-bezier(.3,1.5,.5,1)}
.mascot.hop{animation:hop .45s 2}
.mascot.sad{animation:shake .45s}
.calc{background:var(--card);border:4px solid var(--ink);border-radius:28px;padding:10px 26px;
  font-size:clamp(3rem,13vw,5.6rem);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .q{color:var(--accent)}
.answers{display:grid;grid-template-columns:repeat(4,auto);gap:14px;justify-content:center}
@media (max-width:440px){.answers{grid-template-columns:repeat(2,auto)}}
.num-btn{width:clamp(80px,20vw,104px);height:clamp(80px,20vw,104px);border-radius:24px;border:4px solid var(--ink);background:var(--card);color:var(--ink);
  font:inherit;font-size:clamp(2.4rem,9vw,3.2rem);font-weight:800;cursor:pointer;box-shadow:0 6px 0 var(--ink);font-variant-numeric:tabular-nums}
.num-btn.yes{border-color:var(--good);background:#d6f5de}
.num-btn.no{border-color:var(--bad);background:#fbe0df;opacity:.55;animation:shake .45s}
.tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.help{background:transparent;border:3px dashed var(--leaf);color:var(--leaf);border-radius:999px;padding:6px 20px;font:inherit;font-size:1.15rem;font-weight:700;cursor:pointer}
.hint{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;max-width:760px}
.hint .op{font-size:2rem;font-weight:800}
.hint .lbl{width:100%;text-align:center;font-size:1.1rem;font-weight:600}
.group{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;background:var(--nest);border-radius:40%/45%;padding:10px 14px;max-width:190px;box-shadow:inset 0 -6px 0 #a77d41}
.group.plain{background:rgba(255,255,255,.6);box-shadow:none;border-radius:18px;max-width:260px}
.mini{width:22px;height:28px;display:block;position:relative}
.mini svg{width:100%;height:100%;display:block}
.mini.gone{opacity:.35}
.mini.gone::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;background:var(--bad);transform:rotate(-40deg);border-radius:2px}
button:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
@keyframes hop{50%{transform:translateY(-16px)}}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.big-dino{width:min(64vw,300px);animation:dance 1s infinite ease-in-out}
@keyframes dance{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-12px)}}
.go{background:var(--accent);color:#fff;border:4px solid var(--ink);border-radius:999px;padding:10px 28px;font:inherit;
  font-size:1.5rem;font-weight:800;cursor:pointer;box-shadow:0 6px 0 var(--ink)}
.go.alt{background:var(--card);color:var(--ink)}
.row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* Écran « Fonctionnement » : plus de texte, donc une mise en page de lecture */
.titre-infos{font-size:clamp(2rem,7vw,3rem);margin:0;line-height:1;color:var(--leaf);text-align:center}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;width:100%;max-width:820px}
.info{background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:12px 16px}
.info h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:1.3rem}
.info .sym{font-size:2rem;line-height:1;color:var(--accent)}
.info p{margin:4px 0;font-size:1.05rem;font-weight:500;line-height:1.35}
.infos-partie{margin:0;padding-left:1.2em;max-width:820px;width:100%;font-size:1.05rem;font-weight:500;line-height:1.4;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}