/* J'écris les chiffres · Colibouli — charte de la marque */
:root{
  --teal-dark:#1E5E57; --teal:#3FB09B; --teal-light:#7CCFBF;
  --rose:#D9546E; --rose-deep:#C7445F; --tuft:#F08C80;
  --cream:#FFF8EA; --cream-2:#F8E3B0; --sun:#FFD966; --sun-deep:#F2B33D;
  --ink:#1F2A30; --muted:#5B6B66;
  --leaf:#7CC77A; --leaf-dark:#4E9E57; --leaf-light:#E4F4DC;
  --paper:#FFFDF6; --rule:#E9E2CF;
  --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;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

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

/* ---------- 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;
}
.score svg{width:26px;height:26px;fill:var(--sun);stroke:#E0A928;stroke-width:1.6}
.score.pop{animation:bump .5s ease-out}

/* ---------- Mission ---------- */
.mission{display:flex;align-items:center;gap:6px}
.colibouli{width:clamp(80px,13vw,120px);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 18px;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}
.goal-number{
  display:grid;place-items:center;flex:none;width:clamp(64px,9vw,84px);height:clamp(64px,9vw,84px);border-radius:22px;
  background:var(--leaf-light);color:var(--rose-deep);font:700 clamp(48px,7vw,66px)/1 var(--display);
}
.goal-text{font:600 clamp(17px,2.2vw,22px)/1.2 var(--display);color:var(--muted)}
.goal-text strong{display:block;font-weight:700;font-size:clamp(26px,3.6vw,36px);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 .goal-number{animation:goalpop .5s ease-out}

/* ---------- Plateau ---------- */
.board{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
.paper{
  position:relative;aspect-ratio:360/380;max-width:100%;justify-self:center;
  width:min(100%,calc((100vh - 300px) * .947));width:min(100%,calc((100dvh - 300px) * .947));min-width:min(100%,300px);
  border-radius:28px;border:4px solid #fff;overflow:hidden;
  background:
    linear-gradient(90deg,transparent 0 10%,rgba(217,84,110,.18) 10% calc(10% + 2px),transparent 0),
    repeating-linear-gradient(0deg,transparent 0 37px,var(--rule) 37px 39px),
    var(--paper);
  box-shadow:0 6px 0 #EADFC4;
}
.paper.success{box-shadow:0 0 0 6px var(--leaf),0 6px 0 #EADFC4}
#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}

.side{display:flex;flex-direction:column;gap:14px}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool{
  min-height:58px;padding:8px 10px;border:0;border-radius:20px;background:#fff;cursor:pointer;
  font:600 19px/1.1 var(--display);color:var(--teal-dark);box-shadow:0 5px 0 #EADFC4;
  transition:transform .12s ease;
}
.tool span{font-size:22px}
.tool:active{transform:translateY(3px)}
.picker{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;border-radius:24px;background:#fff;box-shadow:0 5px 0 #EADFC4;
}
.digit{
  position:relative;aspect-ratio:1;min-height:48px;border:3px solid var(--leaf-light);border-radius:16px;background:var(--paper);cursor:pointer;
  font:700 clamp(24px,3.2vw,32px)/1 var(--display);color:var(--teal-dark);
}
.digit.current{border-color:var(--teal);background:var(--teal);color:#fff}
.digit.learned::after{
  content:"★";position:absolute;right:-7px;top:-9px;font-size:18px;color:var(--sun-deep);text-shadow:0 1px 0 #fff;
}
.tip{margin:0;padding:12px 16px;border-radius:20px;background:var(--leaf-light);font-weight:800;font-size:16px;color:var(--teal-dark);line-height:1.35}

/* ---------- Boutons ---------- */
.actions{display:flex;justify-content:center}
.btn{border:0;border-radius:999px;cursor:pointer;font-family:var(--display);font-weight:700;color:#fff;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px)}
.btn-ok{min-height:66px;min-width:min(100%,340px);padding:10px 36px;font-size:clamp(24px,3.2vw,30px);background:var(--leaf-dark);box-shadow:0 6px 0 #357340}
.btn-ok:disabled{opacity:.45;cursor:default;transform:none}
.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}
.footer{text-align:center;color:var(--muted);font-weight:800;font-size:12px;padding-bottom:4px}

/* ---------- Accueil / fin ---------- */
.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(440px,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-digits{margin:6px 0 12px;font:700 30px/1 var(--display);color:var(--rose-deep);letter-spacing:.08em}

/* ---------- Effets ---------- */
.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 fall{to{transform:translateY(105vh) rotate(540deg)}}

/* ---------- Tablette en hauteur et téléphone ---------- */
@media (max-width:820px){
  .board{grid-template-columns:1fr}
  .paper{width:min(100%,480px);min-width:0;margin:0 auto}
  .side{width:min(100%,480px);margin:0 auto}
}
@media (max-width:700px){
  .game{padding:8px 12px 8px;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}
  .score svg{width:20px;height:20px}
  .colibouli{width:68px}
  .bubble{gap:10px;padding:6px 54px 6px 10px;border-radius:20px}
  .replay{width:38px;height:38px;right:8px}
  .tool{min-height:52px;font-size:17px}
  .picker{grid-template-columns:repeat(10,1fr);gap:4px;padding:8px;border-radius:18px}
  .digit{min-height:0;border-radius:10px;border-width:2px;font-size:22px}
  .digit.learned::after{font-size:13px;right:-4px;top:-7px}
  .tip{display:none}
  .side{gap:10px}
  .btn-ok{min-height:60px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}