/* =====================================================================
   INVITE « ACTIVER LE SON » — toast non bloquant
   ---------------------------------------------------------------------
   Les navigateurs bloquent l'autoplay audio tant qu'aucun geste n'a eu
   lieu : beaucoup de joueurs restent sur l'accueil (ou entrent en jeu
   après un geste qui a échoué à réveiller le contexte) SANS savoir que
   Dovion a du son. Ce toast apparaît si le son n'est toujours pas
   audible ~20 s après l'ouverture de la page OU le lancement d'une
   partie, et propose de l'activer d'un tap. Anti-spam : au plus une
   fois toutes les 40 min tant que le son reste coupé (js/sound-prompt.js).
   Affiché/masqué par js/sound-prompt.js. Séparation stricte : aucun
   style ni handler inline (CSP). Charte « haute mer » de l'accueil.
   ===================================================================== */
#sound-prompt {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  /* Au-dessus du HUD (≤90) et des modales (≤153), SOUS l'invite paysage (200)
     et la porte d'installation (300). */
  z-index: 190;
  max-width: min(92vw, 460px);
  animation: spSlideDown 0.35s ease both;
}
#sound-prompt.hidden { display: none !important; }

@keyframes spSlideDown {
  from { transform: translate(-50%, -140%); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #sound-prompt { animation: none; } }

.sp-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 34, 48, 0.97), rgba(9, 22, 33, 0.98));
  border: 1px solid rgba(90, 169, 230, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

/* Bouton principal : toute la zone son (icône + texte) active le son. */
.sp-cta {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; min-width: 0;
  padding: 0; margin: 0;
  background: transparent; border: none; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.sp-ic {
  flex: 0 0 auto; display: inline-flex;
  width: 34px; height: 34px; border-radius: 50%;
  align-items: center; justify-content: center;
  color: #10202c; background: #f0d97a;
  animation: spPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .sp-ic { animation: none; } }
@keyframes spPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 217, 122, 0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(240, 217, 122, 0); }
}
.sp-text {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 13px; line-height: 1.35; color: #cfdde7;
}
.sp-text b { display: block; color: #eaf4fb; font-weight: 700; font-size: 13.5px; }
.sp-text span { color: #9fb6c6; }

/* Fermer sans activer (respecte le choix : pas de relance avant 40 min). */
.sp-close {
  flex: 0 0 auto; display: inline-flex;
  width: 30px; height: 30px; border-radius: 8px;
  align-items: center; justify-content: center;
  color: #9fb6c6; background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sp-close:hover { color: #eaf4fb; background: rgba(255, 255, 255, 0.06); border-color: #46607a; }
.sp-cta:hover .sp-text b { color: #f6e39a; }

@media (max-width: 480px) {
  #sound-prompt { max-width: 94vw; }
  .sp-text { font-size: 12.5px; }
  .sp-text b { font-size: 13px; }
}