/* ==========================================================================
   Berlingot — habillage de la scène.
   Préfixe .bg- pour « berlingot » (le décor, lui, est peint dans le canvas).
   ========================================================================== */

.bg{position:absolute;inset:0;overflow:hidden}
.bg canvas{
  display:block;width:100%;height:100%;
  touch-action:none;                 /* sinon balayer fait défiler la page */
  -webkit-tap-highlight-color:transparent;
  cursor:crosshair;
}

/* ---------- bandeau du haut ---------- */
.bg-hud{
  position:absolute;top:10px;left:12px;right:12px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  pointer-events:none;
}
.bg-vies{display:flex;gap:6px;align-items:center}
.bg-vie{display:block;width:26px;height:20px;transition:transform .2s}
.bg-vie svg{width:100%;height:100%;display:block}
.bg-vie svg *{fill:#FF74AE;transition:fill .25s}
.bg-vie{filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.bg-vie.vide svg *{fill:rgba(255,255,255,.17)}
.bg-vie.vide{filter:none;transform:scale(.86)}
.bg-vie.perdue{animation:bg-perdue .5s ease-out}
@keyframes bg-perdue{
  0%{transform:scale(1.35) rotate(-8deg)}
  40%{transform:scale(.8) rotate(6deg)}
  100%{transform:scale(.86)}
}

.bg-droite{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.bg-score{
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1.6rem;font-weight:600;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
  transition:transform .12s ease-out;
}
.bg-score.pop{transform:scale(1.22)}
.bg-niveau{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding:3px 9px;border-radius:99px;
  background:rgba(0,0,0,.28);
  transition:color .25s, background .25s;
}
.bg-niveau.monte{color:#2C0C2C;background:#FFD66B}

/* ---------- annonces ---------- */
.bg-combo{
  position:absolute;left:0;right:0;top:26%;
  text-align:center;pointer-events:none;
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:clamp(1.3rem,6vw,1.9rem);font-weight:600;
  color:#FFE39B;
  text-shadow:0 3px 0 rgba(0,0,0,.45);
  opacity:0;transform:scale(.82);
  transition:opacity .18s ease, transform .18s ease;
}
.bg-combo.visible{opacity:1;transform:scale(1)}
.bg-combo.ko{color:#FF9A9A}

.bg-pause{
  position:absolute;right:12px;bottom:12px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.3);color:#fff;
  font-size:1.1rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(4px);
}
.bg-pause:active{transform:translateY(1px)}
.bg-pause:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}

/* ---------- « tourne ton téléphone » ---------- */
.bg-tourne{
  position:absolute;inset:0;z-index:12;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(24,8,26,.94);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  text-align:center;color:#fff;
}
.bg-tourne-carte{max-width:300px}
.bg-tel{
  width:84px;height:84px;color:#FF9CC8;margin-bottom:12px;
  animation:bg-pivote 2.6s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes bg-pivote{
  0%,28%{transform:rotate(0)}
  46%,78%{transform:rotate(-90deg)}
  100%{transform:rotate(0)}
}
.bg-tourne h2{
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1.35rem;font-weight:600;margin-bottom:6px;
}
.bg-tourne p{font-size:.95rem;color:rgba(255,255,255,.72);line-height:1.5}

@media (prefers-reduced-motion: reduce){
  .bg-combo,.bg-score,.bg-vie{transition:none}
  .bg-tel{animation:none;transform:rotate(-90deg)}
  .bg-vie.perdue{animation:none}
}

/* On propose le paysage, on ne l'impose pas : sur iPhone, la barre du navigateur
   est un coût fixe, et le portrait laisse en réalité plus de hauteur. */
.bg-quand-meme{
  margin-top:16px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.3);border-radius:12px;
  padding:9px 16px;
  font-family:'Outfit',system-ui,sans-serif;font-size:.92rem;font-weight:500;
}
.bg-quand-meme:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.bg-quand-meme:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}