/* ============================================================
   CROWD RUNNER — styles
   ============================================================ */

html, body { margin:0; padding:0; overflow:hidden; height:100%; background:#8fc7ff;
  font-family:'Segoe UI', 'Arial Black', Arial, sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }
canvas { display:block; }

/* ---------- Vignette ----------
   Assombrissement très léger des bords : focalise le regard au centre
   sans réduire la lisibilité (sous le HUD, au-dessus du canvas). */
#vignette { position:fixed; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(ellipse 130% 100% at 50% 40%, transparent 56%, rgba(8,12,26,.22) 100%); }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
/* Bouton pause : même gabarit que le bouton son, mais en haut à GAUCHE ;
   la distance se décale à sa droite. Masqué hors partie (via ui.updateHud). */
#pauseBtn {
  position:absolute; top:10px; left:14px; pointer-events:auto; cursor:pointer;
  font-size:22px; background:rgba(0,0,0,.35); border-radius:12px; padding:6px 10px;
}
#dist {
  position:absolute; top:14px; left:66px; padding:6px 14px; border-radius:12px;
  background:rgba(0,0,0,.35); color:#fff; font-weight:800; font-size:18px; letter-spacing:.5px;
}
#dist .inf { color:#ffd23e; }
#levelChip {
  position:absolute; top:52px; left:16px; padding:4px 12px; border-radius:12px;
  background:rgba(0,0,0,.3); color:#fff; font-weight:700; font-size:14px;
}
#muteBtn {
  position:absolute; top:10px; right:14px; pointer-events:auto; cursor:pointer;
  font-size:22px; background:rgba(0,0,0,.35); border-radius:12px; padding:6px 10px;
}
/* Positionné chaque frame via transform (translate3d) : le compositeur
   déplace l'élément sans re-layout, contrairement à left/top. */
#crowdCount {
  position:absolute; left:0; top:0; will-change:transform;
  background:linear-gradient(#3b8bff,#1f5fd6); color:#fff; font-weight:900; font-size:26px;
  padding:2px 16px; border-radius:999px; border:3px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.35); white-space:nowrap;
}
#banner {
  position:absolute; top:22%; left:50%; transform:translate(-50%,-50%) scale(0);
  font-size:min(7vw,54px); font-weight:900; color:#ffd23e; text-align:center; white-space:nowrap;
  -webkit-text-stroke:2px #7a4a00; text-shadow:0 5px 0 rgba(0,0,0,.25); opacity:0;
}
#banner.show { animation:bannerPop 1.9s ease forwards; }
#banner.danger { color:#ff5252; -webkit-text-stroke:2px #5d0000; }
@keyframes bannerPop {
  0%   { transform:translate(-50%,-50%) scale(0);   opacity:0; }
  12%  { transform:translate(-50%,-50%) scale(1.15);opacity:1; }
  20%  { transform:translate(-50%,-50%) scale(1);   opacity:1; }
  80%  { transform:translate(-50%,-50%) scale(1);   opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1.25);opacity:0; }
}

/* ---------- VS (duel final) ---------- */
#vs { position:absolute; top:16%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:22px; }
#vs.hidden { display:none; }
.vsCard { font-size:min(10vw,72px); font-weight:900; color:#fff; padding:6px 26px; border-radius:20px;
  border:4px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.4); min-width:110px; text-align:center; }
.vsCard.blue { background:linear-gradient(#3b8bff,#1f5fd6); }
.vsCard.red  { background:linear-gradient(#ff5b5b,#c81e1e); }
.vsX { font-size:min(6vw,40px); font-weight:900; color:#fff; -webkit-text-stroke:2px #333; }

/* ---------- Étiquettes flottantes (+30, ×2…) ---------- */
#labels { position:fixed; inset:0; pointer-events:none; z-index:6; }
.fl { position:absolute; transform:translate(-50%,-50%); font-size:44px; font-weight:900;
  -webkit-text-stroke:2px rgba(0,0,0,.45); animation:floatUp 1.15s ease-out forwards; white-space:nowrap; }
.fl.good { color:#4dff88; }
.fl.bad  { color:#ff5252; }
.fl.neutral { color:#e8e8e8; }
.fl.reveal { font-size:56px; color:#ffd23e; -webkit-text-stroke:2px #7a4a00; }
@keyframes floatUp {
  0%   { opacity:0; margin-top:0;     transform:translate(-50%,-50%) scale(.4); }
  15%  { opacity:1;                   transform:translate(-50%,-50%) scale(1.2); }
  30%  {                              transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; margin-top:-110px;transform:translate(-50%,-50%) scale(1); }
}

/* ---------- Écrans (menu / fin) ---------- */
/* Le jeu flouté reste visible derrière les écrans : plus de profondeur,
   moins de rupture (backdrop-filter est composité par le GPU). */
.overlay { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(ellipse at center, rgba(10,25,60,.45), rgba(5,10,30,.74)); color:#fff;
  backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1); }
.overlay.hidden { display:none; }
.title { font-size:min(9vw,64px); font-weight:900; color:#ffd23e; -webkit-text-stroke:2px #7a4a00;
  text-shadow:0 6px 0 rgba(0,0,0,.3); margin:0 20px 6px; line-height:1.1; }
.subtitle { font-size:min(4.5vw,22px); font-weight:600; opacity:.95; margin:4px 24px 14px; }
.stats { background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.25); border-radius:16px;
  padding:14px 28px; margin-bottom:18px; font-size:19px; line-height:1.7; }
.stats b { color:#ffd23e; }
.btn { pointer-events:auto; cursor:pointer; border:none; border-radius:999px; margin:6px;
  padding:16px 52px; font-size:26px; font-weight:900; color:#fff; letter-spacing:1px;
  background:linear-gradient(#43d16b,#1f9e46); box-shadow:0 6px 0 #146b2e, 0 10px 18px rgba(0,0,0,.35);
  transition:transform .08s; font-family:inherit; }
.btn:active { transform:translateY(4px); box-shadow:0 2px 0 #146b2e; }
.btn.gold { background:linear-gradient(#ffd23e,#e09b12); box-shadow:0 6px 0 #9c6b00, 0 10px 18px rgba(0,0,0,.35); }
.btn.secondary { background:linear-gradient(#6b7fd6,#3d4fa1); box-shadow:0 6px 0 #29356e, 0 10px 18px rgba(0,0,0,.35); font-size:19px; padding:12px 36px; }
.hint { font-size:15px; opacity:.85; margin-top:12px; line-height:1.7; }
.kbd { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  border-radius:6px; padding:1px 8px; font-weight:700; }
#endTitle.lose { color:#ff6b6b; -webkit-text-stroke:2px #5d0000; }

/* ---------- Sélecteur de niveaux ---------- */
#levelSelect { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:6px 20px 14px; }
.lvlBtn { pointer-events:auto; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.35); color:#fff;
  border-radius:14px; padding:10px 18px; font-size:17px; font-weight:800; transition:transform .08s; }
.lvlBtn:hover:not(.locked) { transform:scale(1.06); background:rgba(255,255,255,.24); }
.lvlBtn.locked { opacity:.4; cursor:not-allowed; }
.lvlBtn .sub { display:block; font-size:11px; font-weight:600; opacity:.8; }