/* Colibouli — charte de la marque (base commune des jeux) */
:root{
  --teal-dark:#1E5E57; --teal:#3FB09B; --teal-light:#7CCFBF;
  --rose:#D9546E; --rose-deep:#C7445F; --tuft:#F08C80;
  --cream:#FFF8EA; --sun:#FFD966; --sun-deep:#F2B33D;
  --ink:#1F2A30; --muted:#5B6B66;
  --leaf:#7CC77A; --leaf-dark:#4E9E57; --leaf-light:#E4F4DC;
  --rail:#9A7B5B; --sleeper:#C9A57A;
  --display:"Fredoka","Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Trebuchet MS",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  min-height:100vh;min-height:100dvh;
  background:radial-gradient(ellipse at 10% 0%,#fff 0,transparent 40%),var(--cream);
  color:var(--ink);font-family:var(--body);
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

.game{width:min(100%,1100px);margin:0 auto;padding:12px 20px 10px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:14px}

/* ---------- En-tête ---------- */
.topbar{display:flex;align-items:center;gap:12px;min-height:52px}
.back{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:#fff;color:var(--teal-dark);font:700 34px/1 var(--display);text-decoration:none;box-shadow:0 4px 0 #EADFC4}
.logo{text-decoration:none;font-family:var(--display);font-weight:700;font-size:32px;line-height:1;white-space:nowrap}
.logo svg{display:inline-block;width:.8em;height:.8em;vertical-align:-.07em}
.logo-c{color:var(--teal-dark)} .logo-b{color:var(--rose)}
.score{margin-left:auto;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#fff;font:700 22px/1 var(--display);color:var(--teal-dark);box-shadow:0 4px 0 #EADFC4;font-variant-numeric:tabular-nums}
.score.pop{animation:bump .5s ease-out}

/* ---------- Mission ---------- */
.mission{display:flex;align-items:center;gap:6px}
.colibouli{width:clamp(78px,12vw,118px);flex:none;filter:drop-shadow(0 6px 4px rgba(30,94,87,.22));animation:hover 2.6s ease-in-out infinite}
.colibouli.talk{animation:hover 2.6s ease-in-out infinite,talk .35s ease-in-out 3}
.bubble{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:16px;padding:8px 66px 8px 14px;border:0;border-radius:26px;background:#fff;cursor:pointer;text-align:left;box-shadow:0 6px 0 #EADFC4}
.bubble::before{content:"";position:absolute;left:-13px;top:50%;margin-top:-12px;border:12px solid transparent;border-right:16px solid #fff;border-left:0}
.example-emoji{display:grid;place-items:center;flex:none;width:clamp(62px,9vw,80px);height:clamp(62px,9vw,80px);border-radius:22px;background:var(--leaf-light);font-size:clamp(40px,6vw,54px);line-height:1}
.example-text{font:600 clamp(20px,2.8vw,30px)/1.15 var(--display);color:var(--muted)}
.example-text strong{font-weight:700;font-size:1.5em;color:var(--rose-deep);vertical-align:-.08em}
.example-text span{color:var(--teal-dark)}
.replay{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff}
.replay svg{width:26px;height:26px}
.bubble.pulse .example-emoji{animation:goalpop .5s ease-out}

/* ---------- Bas de page ---------- */
.footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-weight:800;font-size:12px;padding-bottom:4px}
.restart{border:0;background:none;color:var(--teal-dark);font-weight:900;font-size:14px;text-decoration:underline;cursor:pointer;padding:8px 4px}

/* ---------- Boutons / fenêtres ---------- */
.btn{border:0;border-radius:999px;cursor:pointer;font-family:var(--display);font-weight:700;color:#fff;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-play{min-height:68px;padding:12px 48px;font-size:clamp(26px,3.6vw,32px);background:var(--rose-deep);box-shadow:0 6px 0 #9C3249;animation:pulse 1.8s ease-in-out infinite}
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(30,94,87,.55);backdrop-filter:blur(4px)}
.card{width:min(460px,100%);padding:20px 26px 28px;text-align:center;background:var(--cream);border:6px solid #fff;border-radius:32px;box-shadow:0 20px 60px rgba(20,50,45,.35);animation:goalpop .35s ease-out}
.card-bird{width:150px;margin-top:-80px;filter:drop-shadow(0 8px 6px rgba(30,94,87,.25));animation:hover 2.6s ease-in-out infinite}
.card h1,.card h2{margin:4px 0 6px;font:700 34px/1.1 var(--display);color:var(--teal-dark);text-wrap:balance}
.card p{margin:0 0 20px;font-weight:800;font-size:18px;color:var(--muted)}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:16px;animation:fall 2s ease-in forwards}

@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes talk{0%,100%{rotate:0deg}50%{rotate:-6deg}}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.05}}
@keyframes goalpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bump{50%{transform:scale(1.2)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(242,179,61,.5)}50%{box-shadow:0 0 0 7px rgba(242,179,61,0)}}
@keyframes arrive{from{transform:translateY(-40px) scale(1.4)}to{transform:none}}
@keyframes chug{50%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
/* ---------- Téléphone ---------- */
@media (max-width:700px){
  .game{padding:8px 12px;gap:10px}
  .topbar{min-height:44px;gap:8px}
  .back{width:40px;height:40px;font-size:28px}
  .logo{font-size:24px}
  .score{font-size:18px;padding:5px 10px}
  .colibouli{width:64px}
  .bubble{gap:10px;padding:6px 54px 6px 10px;border-radius:20px}
  .replay{width:38px;height:38px;right:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Les cinq doigts ---------- */
.score svg{width:24px;height:24px}
.ask-text{font:600 clamp(22px,3vw,32px)/1.15 var(--display);color:var(--muted);padding:10px 4px}
.ask-text strong{font-weight:700;color:var(--rose-deep)}
.bubble.pulse .ask-text{animation:goalpop .45s ease-out}
.bubble.ok .ask-text strong{color:var(--leaf-dark)}
.play{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.hand-card{position:relative;width:min(100%,calc((100dvh - 315px) * .96),520px);min-width:240px;aspect-ratio:480/500;border-radius:28px;background:linear-gradient(180deg,#E3F3FA 0,#EAF6E2 100%);border:5px solid #fff;box-shadow:0 7px 0 #DCE9CF}
.hand{position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation}
.h-outline{fill:#8A4B32;stroke:#8A4B32;stroke-width:11;stroke-linejoin:round}
.h-fill{fill:#F2B88E}
.h-nails{fill:#FBDCCB;pointer-events:none}
.h-creases{fill:none;stroke:#D58E68;stroke-width:3;stroke-linecap:round;pointer-events:none;opacity:.8}
.h-glow g{fill:rgba(255,217,102,.55);stroke:var(--sun-deep);stroke-width:6;opacity:0;pointer-events:none;transition:opacity .2s}
.h-glow g.on{opacity:1;animation:fpulse 1.1s ease-in-out infinite}
.h-glow g.ok{opacity:1;fill:rgba(124,199,122,.55);stroke:var(--leaf-dark);animation:none}
.h-glow g.no{opacity:1;fill:rgba(217,84,110,.35);stroke:var(--rose);animation:none}
.h-hit g,.h-hit path,.h-hit rect{fill:transparent;cursor:pointer}
.h-tags g{opacity:0;transition:opacity .3s;pointer-events:none}
.h-tags g.on{opacity:1}
.h-tags rect{fill:#fff;stroke:var(--teal);stroke-width:3}
.h-tags text{font:700 24px var(--display);fill:var(--teal-dark);text-anchor:middle}
@keyframes fpulse{0%,100%{opacity:1}50%{opacity:.45}}
.marks{position:absolute;inset:0;pointer-events:none}
.mark{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;font:700 24px/1 var(--display);color:#fff;animation:markpop .9s ease-out forwards}
.mark.ok{background:var(--leaf)} .mark.no{background:var(--rose);font-size:20px}
@keyframes markpop{0%{transform:scale(.3);opacity:1}25%{transform:scale(1.1)}80%{opacity:1}100%{transform:scale(1);opacity:0}}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{padding:6px 14px;border-radius:999px;background:#fff;color:#B9B2A0;font:700 18px/1.2 var(--display);box-shadow:0 4px 0 #EADFC4}
.chip.on{background:var(--teal);color:#fff;box-shadow:0 4px 0 #2B8576}
.chip.star{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--sun-deep)}
.phase{font-family:var(--display);font-size:14px;color:var(--teal-dark)}
.end-list{margin:6px 0 12px;font:700 22px/1.35 var(--display);color:var(--rose-deep)}
@media (max-width:700px){
  .mission .bubble{min-height:78px}
  .ask-text{font-size:22px;padding:4px 2px}
  .hand-card{width:min(100%,calc((100dvh - 270px) * .96));border-radius:22px}
  .chip{font-size:15px;padding:5px 10px}
  .phase{display:none}
}