*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none;background:#0a1226}
body{
  font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif;color:#fff;
  background:radial-gradient(ellipse at 50% 0,#1d3a78 0,#0e1a33 55%,#070d1c 100%) fixed;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}

#app{
  height:100%;height:100dvh;max-width:960px;margin:0 auto;padding:8px;
  display:flex;flex-direction:column;gap:8px;
}

/* --- HUD ---------------------------------------------------------- */
.hud{display:flex;align-items:stretch;gap:6px;flex:none}
.cell{
  flex:1;min-width:0;background:linear-gradient(#27406f,#162747);border:2px solid #000;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);padding:3px 6px;text-align:center;line-height:1.1;
}
.lbl{display:block;font-size:9px;letter-spacing:.12em;color:#9fb6e6;font-weight:700}
.cell b{font:900 clamp(15px,4.6vw,24px)/1.1 Impact,"Arial Black",sans-serif;letter-spacing:.03em}
.lives{color:#ff4d5e;text-shadow:0 0 6px rgba(255,60,80,.6)}
.lives .off{color:#3a2f3d;text-shadow:none}
#mute{
  flex:none;width:48px;background:linear-gradient(#27406f,#162747);border:2px solid #000;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);font-size:10px;font-weight:700;letter-spacing:.08em;color:#cfe0ff;
}
#mute.off{color:#7a869f;text-decoration:line-through}

/* --- scène -------------------------------------------------------- */
#stage{
  position:relative;flex:none;width:min(100%,calc((100dvh - 250px) * 16 / 9));align-self:center;aspect-ratio:16/9;background:#000;border:3px solid #000;border-radius:8px;
  box-shadow:0 0 0 2px #2d5bb8,0 8px 30px rgba(0,0,0,.6);overflow:hidden;container-type:inline-size;
}
#stage.warn{box-shadow:0 0 0 2px #ffc400,0 0 22px 4px rgba(255,196,0,.7)}
#stage.watch{box-shadow:0 0 0 2px #ff2a2a,0 0 26px 6px rgba(255,30,30,.85)}
#stage.caught{box-shadow:0 0 0 3px #ff0000,0 0 40px 10px rgba(255,0,0,.95)}
#view{display:block;width:100%;height:100%;background:#000}
/* états animés de la scène SVG (classes posées par game.js) */
#sol .m-open,#sol .e-whistle,#sol .e-scared,#sol .sweat{display:none}
#sol.talk .m-closed{display:none}#sol.talk .m-open{display:inline}
#sol.whistle .e-normal{display:none}#sol.whistle .e-whistle{display:inline}
#sol.scared .e-normal,#sol.scared .e-whistle,#sol.scared .m-closed{display:none}
#sol.scared .e-scared,#sol.scared .sweat,#sol.scared .m-open{display:inline}
#solArm{transform:translate(0,110px);opacity:0;transition:transform .12s ease-out,opacity .08s}
#solArm.up{transform:none;opacity:1}
#solHand{transition:transform .09s ease-out}
/* le prisonnier, triste après le coup de crosse */
#pri .sad-brow,#pri .sad-mouth,#pri .sad-tear{display:none}
#pri.sad .sad-brow,#pri.sad .sad-mouth,#pri.sad .sad-tear{display:inline}
#pri.sad .m-neutral,#pri.sad .n-brow{display:none}
#pri.sad .sad-tear{transform-box:fill-box;transform-origin:50% 50%;animation:tear 1.4s ease-in infinite}
@keyframes tear{0%{opacity:0;transform:translateY(0) scale(.6)}18%{opacity:1;transform:translateY(2px) scale(1)}72%{opacity:.9;transform:translateY(14px) scale(1)}100%{opacity:0;transform:translateY(26px) scale(.9)}}
#supWatchG,#supFrontG{display:none}
.ph-warn #supIdleG,.ph-back #supIdleG,.ph-watch #supIdleG,.ph-caught #supIdleG{display:none}
.ph-warn #supFrontG,.ph-back #supFrontG{display:inline}
.ph-watch #supWatchG,.ph-caught #supWatchG{display:inline}
#supPhoneF{transform:translate(86px,330px);transition:transform .28s ease-out}
.ph-warn #supPhoneF{transform:translate(86px,196px)}
#supHeadL .m-grin{display:none}
.ph-caught #supHeadL .m-grin{display:inline}.ph-caught #supHeadL .m-flat{display:none}
#cone{opacity:0;transition:opacity .15s}
.ph-watch #cone,.ph-caught #cone{opacity:1;animation:coneflick .14s steps(2) infinite alternate}
@keyframes coneflick{from{opacity:.85}to{opacity:1}}
.recdot{animation:blink .7s steps(1) infinite}
.flagwave{transform-box:fill-box;transform-origin:0 50%;animation:flagwave .7s ease-in-out infinite alternate}
@keyframes flagwave{from{transform:skewY(-5deg) scaleX(.95)}to{transform:skewY(5deg) scaleX(1)}}

#fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{
  position:absolute;translate:-50% -100%;pointer-events:none;white-space:nowrap;
  font:800 max(11px,calc(2.2cqw * var(--k,1)))/1 Arial,"Segoe UI",sans-serif;color:#10131c;background:#fff;
  padding:.35em .65em;border:2px solid #10131c;border-radius:.9em;
  animation:pop .95s ease-out forwards;
}
.pop::after{
  content:"";position:absolute;left:50%;top:100%;margin-left:-.3em;
  border:.45em solid transparent;border-top:.65em solid #10131c;border-bottom:0;
}
.pop.big{font-size:max(15px,calc(3.6cqw * var(--k,1)));background:#ffe45c}
.pop.alert{background:#ffd400;color:#c40000;font-size:max(18px,calc(4.4cqw * var(--k,1)));padding:.2em .6em;animation-duration:.8s}
.pop.rec{background:#d80000;color:#fff;border-color:#fff}
.pop.rec::after{border-top-color:#fff}
.pop.think{background:#e8edf5;color:#44506a;font-weight:700;animation-duration:1.3s}
.pop.note{background:none;border:0;color:#fff;text-shadow:0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000;padding:0}
.pop.note::after{display:none}
@keyframes pop{
  0%{opacity:0;transform:translateY(8px) rotate(var(--r,0deg)) scale(.5)}
  12%{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1.08)}
  22%{transform:translateY(-1%) rotate(var(--r,0deg)) scale(1)}
  100%{opacity:0;transform:translateY(-34%) rotate(var(--r,0deg)) scale(.95)}
}

#rec{
  position:absolute;top:5%;right:6%;font:900 max(12px,3cqw)/1 "Courier New",monospace;color:#ff2a2a;letter-spacing:.08em;
  opacity:0;text-shadow:0 0 6px rgba(255,0,0,.7);
}
#vf{position:absolute;inset:3.5%;opacity:0;pointer-events:none;transition:opacity .08s}
#vf i{position:absolute;width:9%;aspect-ratio:1;border:0 solid rgba(255,255,255,.9)}
#vf i:nth-child(1){left:0;top:0;border-width:3px 0 0 3px}
#vf i:nth-child(2){right:0;top:0;border-width:3px 3px 0 0}
#vf i:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px}
#vf i:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0}
#stage.watch #rec,#stage.caught #rec{opacity:1;animation:blink .7s steps(1) infinite}
#stage.watch #vf,#stage.caught #vf{opacity:1}
@keyframes blink{50%{opacity:.25}}

#stamp{
  position:absolute;left:50%;top:48%;translate:-50% -50%;opacity:0;pointer-events:none;
  white-space:nowrap;text-align:center;font:900 max(26px,11cqw)/1 Impact,"Arial Black",sans-serif;color:#ff1f1f;letter-spacing:.04em;
  border:.12em solid #ff1f1f;padding:.05em .25em;border-radius:.12em;background:rgba(255,255,255,.18);
  text-shadow:0 0 12px rgba(0,0,0,.5);transform:rotate(-8deg);
}
#stage.caught #stamp{animation:stamp 1.25s ease-out forwards}
#stamp small{display:block;margin-top:.18em;font:800 max(10px,2.6cqw)/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#d40000;padding:.25em .5em}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-8deg) scale(2.6)}
  14%{opacity:1;transform:rotate(-8deg) scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:rotate(-8deg) scale(1)}
}

/* --- compteur ----------------------------------------------------- */
.meter{flex:none}
.meter-bar{
  height:18px;background:#0b1224;border:2px solid #000;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px #2d5bb8;
}
#meter-fill{
  height:100%;width:0;background:linear-gradient(#8dff7a,#25b84a 55%,#1b8a38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:width .06s linear;
}
.meter-txt{margin-top:3px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:#9fb6e6}
.meter-txt span{color:#fff}

/* --- gros bouton -------------------------------------------------- */
#btn{
  flex:1;min-height:110px;width:100%;border-radius:18px;border:3px solid #000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(#ffb347 0,#ff7a1a 48%,#e04a00 52%,#ff6a1a 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(120,30,0,.45),0 6px 0 #7a2600,0 10px 22px rgba(0,0,0,.55);
  transition:transform .04s,box-shadow .04s,filter .1s;
}
#btn .he{font:900 clamp(34px,11vw,76px)/1 Arial,"Segoe UI",sans-serif;text-shadow:0 3px 0 rgba(120,30,0,.7),0 0 14px rgba(255,255,255,.35)}
#btn .fr{font-weight:800;font-size:clamp(12px,3.4vw,18px);letter-spacing:.14em;text-shadow:0 2px 0 rgba(120,30,0,.7)}
#btn small{font-weight:600;letter-spacing:.04em;opacity:.8}
#btn.down,#btn:active{
  transform:translateY(6px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(120,30,0,.45),0 0 0 #7a2600,0 3px 10px rgba(0,0,0,.55);
  filter:brightness(1.08);
}
#btn:disabled{filter:grayscale(.85) brightness(.6);cursor:default}
@media (hover:none){#btn small{display:none}}

/* --- écrans (menu / niveau / fin) --------------------------------- */
#overlay{
  position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(4,8,20,.88);overflow:auto;
}
#overlay.hidden{display:none}
#overlay.jail{background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 38px,#1b1d22 38px 52px,#4a4e57 52px 55px,rgba(0,0,0,0) 55px 78px),rgba(30,6,10,.9)}
.card{
  width:100%;max-width:520px;margin:auto;text-align:center;padding:20px 18px;border:3px solid #000;border-radius:16px;
  background:linear-gradient(#1f3a74,#12224a);box-shadow:0 0 0 2px #2d5bb8,0 12px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25);
}
.card h1{
  margin:0;font:900 clamp(40px,13vw,76px)/1.05 Arial,"Segoe UI",sans-serif;color:#ffe45c;
  text-shadow:0 4px 0 #8a4a00,0 0 22px rgba(255,200,0,.45);
}
.card h1.fr{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.03em;font-size:clamp(34px,10vw,56px)}
.card .sub{margin:6px 0 12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(12px,3.4vw,15px);color:#9fd0ff}
.card .body{font-size:clamp(13px,3.7vw,16px);line-height:1.5;color:#e4ecff;margin-bottom:16px}
.card .body p{margin:.4em 0}
.card .body b{color:#ffe45c}
.card .body .stat{display:flex;justify-content:center;gap:18px;margin:10px 0 2px}
.card .body .stat div{min-width:70px}
.card .body .stat span{display:block;font-size:10px;letter-spacing:.12em;color:#9fb6e6}
.card .body .stat strong{font:900 28px/1.1 Impact,"Arial Black",sans-serif}
.card .body .new{color:#7dff7d;font-weight:800}
.go{
  width:100%;padding:16px 10px;border-radius:14px;border:3px solid #000;font:900 clamp(20px,6vw,28px)/1 Impact,"Arial Black",sans-serif;letter-spacing:.08em;
  background:linear-gradient(#8dff7a,#25b84a 52%,#1b8a38);color:#06240f;text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,70,20,.4),0 5px 0 #0c4a1b,0 9px 18px rgba(0,0,0,.5);
}
.go:active{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 0 0 #0c4a1b,0 3px 8px rgba(0,0,0,.5)}
.go:disabled{filter:grayscale(.9) brightness(.65);cursor:default}

/* --- portrait : on recadre sur la voiture pour que les personnages restent grands --- */
@media (orientation:portrait){
  #stage{aspect-ratio:1/1;width:min(100%,calc(100dvh - 250px));--k:1.75}
}

/* --- paysage sur téléphone : scène à gauche, commandes à droite --- */
@media (orientation:landscape) and (max-height:560px){
  #app{
    display:grid;max-width:none;gap:6px 8px;padding:6px;
    grid-template-columns:minmax(0,1fr) clamp(150px,27vw,280px);
    grid-template-rows:auto auto 1fr;grid-template-areas:"stage hud" "stage meter" "stage btn";
  }
  .hud{grid-area:hud;display:grid;grid-template-columns:1fr 1fr;gap:4px}
  #mute{width:auto;padding:4px}
  .cell b{font-size:clamp(14px,3.2vw,20px)}
  #stage{grid-area:stage;align-self:center;justify-self:center;width:min(100%,calc((100dvh - 12px) * 16 / 9))}
  .meter{grid-area:meter}
  #btn{grid-area:btn;min-height:0}
  #btn .he{font-size:clamp(26px,5.4vw,52px)}
  .card{padding:12px 14px}
  .card h1{font-size:clamp(30px,9vh,48px)}
  .card .body{margin-bottom:10px;font-size:13px;line-height:1.35}
  .go{padding:10px}
}
@media (prefers-reduced-motion:reduce){.pop,#stage.caught #stamp{animation-duration:.01s}}