/* Le train des lettres · Colibouli — charte de la marque */
: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}

/* ---------- Choix ---------- */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;width:100%;margin:0 auto}
.choice{
  min-height:118px;border:0;border-radius:28px;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.22em;padding-bottom:6px;
  font:700 clamp(54px,8vw,78px)/1 var(--display);color:var(--teal-dark);
  box-shadow:0 7px 0 #EADFC4;transition:transform .12s ease,opacity .3s ease,background .2s ease;
}
.choice small{font-size:.62em;color:var(--teal)}
.choice:hover{transform:translateY(-3px)}
.choice:active{transform:translateY(4px);box-shadow:0 3px 0 #EADFC4}
.choice.wrong{animation:shake .45s ease;background:#F7E3E3;opacity:.45;cursor:default}
.choice.correct{background:var(--leaf);color:#fff;box-shadow:0 7px 0 #357340}
.choice.correct small{color:#fff}
.choice:disabled{cursor:default}

/* ---------- Trains ---------- */
.trains{display:flex;flex-direction:column;gap:18px;padding:16px 12px 8px;border-radius:28px;background:linear-gradient(180deg,#E3F3FA 0,#EAF6E2 100%);border:4px solid #fff;box-shadow:0 6px 0 #DCE9CF}
.train{position:relative;display:flex;align-items:flex-end;gap:var(--gap,5px);padding-bottom:16px}
.train::after{ /* rails */
  content:"";position:absolute;left:-6px;right:-6px;bottom:2px;height:8px;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--sleeper) 0 6px,transparent 6px 16px),linear-gradient(var(--rail),var(--rail)) 0 0/100% 3px no-repeat;
}
.loco{position:relative;flex:none;width:var(--loco,78px);height:calc(var(--w,46px) * 1.25)}
.loco svg{width:100%;height:100%;overflow:visible}
.train.moving .loco{animation:chug .5s ease-in-out 3}
.wagon{
  position:relative;flex:none;width:var(--w,46px);height:var(--w,46px);
  border-radius:10px 10px 8px 8px;display:grid;place-items:center;
  font:700 calc(var(--w,46px) * .58)/1 var(--display);
  background:#fff;color:#C9D6D2;border:3px dashed #CFE1DA;
}
.wagon::before,.wagon::after{ /* roues */
  content:"";position:absolute;bottom:-11px;width:calc(var(--w,46px) * .26);height:calc(var(--w,46px) * .26);border-radius:50%;
  background:#38474A;border:2px solid #fff;
}
.wagon::before{left:12%} .wagon::after{right:12%}
.wagon.found{border:0;color:#fff;background:var(--c,#3FB09B);box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}
.wagon.target{border:3px solid var(--sun-deep);background:#FFF6D6;color:var(--sun-deep);animation:glow 1.4s ease-in-out infinite}
.wagon.arrive{animation:arrive .6s cubic-bezier(.3,1.6,.5,1)}

/* ---------- 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)}
.end-letters{margin:6px 0 12px;font:700 24px/1.3 var(--display);color:var(--rose-deep);letter-spacing:.06em}

.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 8px;border-radius:20px}
  .replay{width:38px;height:38px;right:8px}
  .choices{gap:10px}
  .choice{min-height:96px;border-radius:22px;font-size:50px}
  .trains{gap:14px;padding:12px 8px 6px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}