/* --------------------------------------------------------------------------
 * Pulse Jump — scoring variants (rev10)
 *
 * Styles 100 % isolés sous `#scoringVariantOverlay` + classes préfixées `sv-`.
 * Aucun selector ne touche le HUD existant (#scoreLabel, #hud, etc.) ni la
 * structure #resultCard interne, sauf via la classe `body[data-sv-mode]`
 * portée par notre own overlay et la classe `.sv-breakdown-*` posée
 * dynamiquement sur les spans existants par le module JS.
 *
 * Perf : aucune animation infinie. Toutes les animations sont en `forwards`
 * avec un timeout JS de cleanup correspondant. Pas de filter / backdrop-filter
 * coûteux sauf sur la carte tutorial (600 ms seulement).
 * -------------------------------------------------------------------------- */

#scoringVariantOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30; /* sous résultcard (40+), au-dessus du canvas (1) */
}

/* OFF mode : tout l'overlay est passif. Les sub-layers sont quand même
   gardés dans le DOM pour éviter recréations à chaque switch. */
#scoringVariantOverlay[data-sv-mode="off"] .sv-xxl-layer,
#scoringVariantOverlay[data-sv-mode="off"] .sv-chip {
  display: none;
}

/* ============================================================================
 * Variante XXL — popup centré, ×2.5, couleur sémantique, bounce-out 1.5s
 * ============================================================================ */

.sv-xxl-layer {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Hors mode XXL, on garde le layer présent mais sans render. */
#scoringVariantOverlay:not([data-sv-mode="xxl"]) .sv-xxl-layer .sv-xxl-popup {
  display: none;
}

.sv-xxl-popup {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0.3);
  font-family: var(--font-display, 'Fredoka', -apple-system, sans-serif);
  font-weight: 900;
  font-size: 60px; /* ≈ ×2.5 du popup canvas (17px) */
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(0, 0, 0, 0.45),
    0 0 36px currentColor;
  opacity: 0;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity;
}

.sv-xxl-popup.sv-xxl-play {
  animation: sv-xxl-bounce 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sv-xxl-bounce {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.45) rotate(2deg);  opacity: 1; }
  32%  { transform: translate(-50%, -50%) scale(0.95) rotate(-1deg); }
  46%  { transform: translate(-50%, -50%) scale(1.12) rotate(1deg); }
  60%  { transform: translate(-50%, -50%) scale(1.00) rotate(0); }
  80%  { transform: translate(-50%, -54%) scale(1.00); opacity: 0.92; }
  100% { transform: translate(-50%, -68%) scale(0.85); opacity: 0; }
}

/* Réduit motion : on garde une apparition cleanly fadée. */
@media (prefers-reduced-motion: reduce) {
  .sv-xxl-popup.sv-xxl-play {
    animation: sv-xxl-fade 1.5s linear forwards;
  }
  @keyframes sv-xxl-fade {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  }
}

/* ============================================================================
 * Variante CHIP — mini-bandeau persistant à côté du score (top-left HUD)
 * ============================================================================ */

/* Position : centré horizontalement, juste SOUS la ligne HUD (~64px depuis
   le top safe area). Évite d'overlap avec #hud .scoreBlock (top-left) et la
   metaBlock (top-right, best/combo). #recordTrack est à top + 86px → on a
   ~20-30px de marge propre entre les deux. */
.sv-chip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-family: var(--font-display, 'Fredoka', -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2a2420;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #2a2420;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* Affiché uniquement en mode chip ET en jeu (le module vide le textContent
   hors `phase === 'playing'`). */
#scoringVariantOverlay[data-sv-mode="chip"] .sv-chip:not(:empty) {
  opacity: 1;
}

/* Auto-reduce visuel quand combo = 0 : opacity / scale plus faible. */
.sv-chip.idle {
  opacity: 0.55 !important;
  transform: translateX(-50%) scale(0.9);
  background: rgba(245, 245, 245, 0.78);
}

/* Combo actif AU SEUIL : highlight magenta + petit pop. */
.sv-chip.hot {
  background: linear-gradient(135deg, #fff0fb, #ffd6f3);
  border-color: #FF2EC8;
  color: #80004a;
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 3px 0 rgba(255, 46, 200, 0.35), 0 0 18px rgba(255, 46, 200, 0.35);
}

/* Combo en cours mais sous seuil : neutre légèrement coloré (préchauffe). */
.sv-chip.active:not(.hot) {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
  border-color: #c98700;
}

/* En portrait étroit, on rapproche du score. iPhone SE-ish. */
@media (max-width: 380px) {
  .sv-chip {
    font-size: 10px;
    padding: 5px 9px;
  }
}

/* ============================================================================
 * Variante TUTORIAL — backdrop dimmé + carte centrée, fade in/out
 * ============================================================================ */

.sv-tutorial {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  z-index: 35;
  /* backdrop-filter conditionnel : safari iOS 15+ OK. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sv-tutorial.sv-tut-play {
  animation: sv-tut-in 180ms ease-out forwards;
}

.sv-tutorial.sv-tut-out {
  animation: sv-tut-out 220ms ease-in forwards;
}

@keyframes sv-tut-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sv-tut-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.sv-tut-card {
  background: #fff;
  border: 3px solid #2a2420;
  border-radius: 18px;
  padding: 18px 24px;
  text-align: center;
  font-family: var(--font-display, 'Fredoka', -apple-system, sans-serif);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), 0 0 30px rgba(0, 0, 0, 0.35);
  max-width: 86vw;
  transform: scale(0.84);
  animation: sv-tut-card-pop 240ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sv-tut-card-pop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.sv-tut-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #2a2420;
  text-transform: uppercase;
}

.sv-tutorial-perfect .sv-tut-title { color: #b58800; }
.sv-tutorial-combo   .sv-tut-title { color: #80004a; }

.sv-tut-body {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #455a64;
  letter-spacing: 0.02em;
}

/* ============================================================================
 * Variante BREAKDOWN — cascade row-by-row + zoom multiplier + total bounce
 * ============================================================================ */

/* Pré-hide : posé avant que applyEndScreen n'injecte le HTML — évite le
   flash 1-frame de tous les rows visibles avant le start des animations. */
#resultBreakdown.sv-breakdown-prep > span {
  opacity: 0;
}

/* Anim seulement quand on est en mode breakdown : la classe est posée par JS. */
#resultBreakdown.sv-breakdown-anim > span.sv-breakdown-row {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: sv-bd-row-in 380ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes sv-bd-row-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Zoom sur le multiplier (ex. "Perfects × 5 +15 pts (×3)") */
#resultBreakdown.sv-breakdown-anim > span.sv-breakdown-mult strong {
  display: inline-block;
  animation: sv-bd-mult-zoom 480ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: inherit;
  transform-origin: right center;
}

@keyframes sv-bd-mult-zoom {
  0%   { transform: scale(1); color: var(--zt-outline, #2a2420); }
  50%  { transform: scale(1.18); color: #FF2EC8; }
  100% { transform: scale(1); color: var(--zt-outline, #2a2420); }
}

/* Total : big bounce + halo doré */
#resultBreakdown.sv-breakdown-anim > span.sv-breakdown-total {
  background: linear-gradient(135deg, #fff8e1, #ffe082) !important;
  border-color: #c98700 !important;
  font-size: 14px;
  font-weight: 900;
}

#resultBreakdown.sv-breakdown-anim > span.sv-breakdown-total strong {
  font-size: 16px;
  color: #80004a !important;
  display: inline-block;
  animation: sv-bd-total-bounce 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: inherit;
}

@keyframes sv-bd-total-bounce {
  0%   { transform: scale(0.7); }
  45%  { transform: scale(1.35); }
  72%  { transform: scale(0.95); }
  100% { transform: scale(1.12); }
}

/* Réduit motion : on cancel les bounces, on garde le cascade fade. */
@media (prefers-reduced-motion: reduce) {
  #resultBreakdown.sv-breakdown-anim > span.sv-breakdown-row {
    animation: sv-bd-row-fade 240ms linear forwards;
  }
  @keyframes sv-bd-row-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  #resultBreakdown.sv-breakdown-anim > span.sv-breakdown-mult strong,
  #resultBreakdown.sv-breakdown-anim > span.sv-breakdown-total strong {
    animation: none;
  }
}

/* ============================================================================
 * Settings selector (bloc dans #menuPanel — réutilise le pattern audio)
 * ============================================================================ */

.scoringVariantGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
}

/* "OFF" prend toute la largeur sur la 3e ligne */
.scoringVariantBtn[data-scoring-variant="off"] {
  grid-column: 1 / -1;
}

.scoringVariantBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 2.5px solid var(--zt-outline);
  background: #eceff1;
  color: var(--zt-outline);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--zt-shadow);
  transition: transform 0.08s, background 0.12s, box-shadow 0.08s, border-color 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  text-align: center;
}

.scoringVariantBtn .svLabel {
  font-family: var(--font-display, 'Fredoka', -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.scoringVariantBtn .svHint {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.68;
  line-height: 1.1;
}

.scoringVariantBtn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--zt-shadow);
}

.scoringVariantBtn.active {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
  border-color: var(--btn-play-dark, #c98700);
  box-shadow: 0 3px 0 var(--zt-shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.scoringVariantBtn.active .svHint {
  opacity: 0.85;
  color: var(--accent, #FF2EC8);
}

/* Variantes : pastilles colorées dédiées quand active (signature visuelle). */
.scoringVariantBtn[data-scoring-variant="xxl"].active {
  background: linear-gradient(135deg, #fffde7, #ffe082);
  border-color: #FFB300;
}
.scoringVariantBtn[data-scoring-variant="chip"].active {
  background: linear-gradient(135deg, #e0f7fa, #80deea);
  border-color: #00838f;
}
.scoringVariantBtn[data-scoring-variant="tutorial"].active {
  background: linear-gradient(135deg, #ede7f6, #b39ddb);
  border-color: #5e35b1;
}
.scoringVariantBtn[data-scoring-variant="breakdown"].active {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  border-color: #c2185b;
}
.scoringVariantBtn[data-scoring-variant="off"].active {
  background: linear-gradient(135deg, #eceff1, #cfd8dc);
  border-color: #455a64;
}