/* ════════════════════════════════════════════════════════════
   LOTSOF.GAMES — Shared game components (ls-*)
   ═══════════════════════════════════════════════════════════
   Composants partagés pour le design system des jeux multi.
   Utilisés en premier sur Qui pourrait, à étendre aux autres jeux.

   Préfixe : ls-* (lotsof) pour éviter collision avec les classes existantes.
   Palette : or (#f0c674), navy gradient, rainbow — pas de peach.
   Reduced-motion : géré pour toutes les animations.
   ════════════════════════════════════════════════════════════ */

/* ─── 1. Player row : full-width button / status row ─── */
.ls-player-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:18px 18px;margin-bottom:10px;border-radius:14px;background:linear-gradient(160deg,#0d1628 0%,#122038 35%,#152a48 50%,#122038 65%,#0d1628 100%);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 2px 12px rgba(0,0,0,.3);color:var(--tx);text-align:left;font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1.2;border:none;cursor:default;transition:transform .18s ease,box-shadow .25s ease,background .2s ease}
.ls-player-row.cliquable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ls-player-row.cliquable:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(240,198,116,.18) inset,0 4px 18px rgba(0,0,0,.4)}
.ls-player-row.cliquable:active{transform:scale(.985)}

/* Stagger entrée "machine à sous" — utilisé via animation-delay inline */
@keyframes lsRowDeal{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* Player name (left) */
.ls-player-row .ls-pr-name{flex:1;min-width:0;word-break:break-word;display:flex;align-items:center;gap:8px}
.ls-player-row .ls-pr-meta{font-size:.7rem;color:var(--dm);font-weight:400}

/* — Variant: self ("toi") — */
.ls-player-row.self .ls-pr-name{color:var(--or)}

/* — State: my-vote (highlight or, ton vote actuel en multi) — */
.ls-player-row.my-vote{box-shadow:0 0 0 2px var(--or) inset,0 0 24px rgba(240,198,116,.3),0 2px 12px rgba(0,0,0,.3);background:linear-gradient(160deg,#0d1628 0%,#1a2640 35%,#22324f 50%,#1a2640 65%,#0d1628 100%)}

/* — Tap confirm pulse (animation au clic) — */
.ls-player-row.confirming,.ls-choice-card.confirming{animation:lsTapPulse .55s cubic-bezier(.34,1.4,.5,1)}
@keyframes lsTapPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(240,198,116,.6),0 2px 12px rgba(0,0,0,.3)}50%{transform:scale(1.025);box-shadow:0 0 0 12px rgba(240,198,116,0),0 0 30px rgba(240,198,116,.5),0 2px 12px rgba(0,0,0,.3)}100%{transform:scale(1);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 2px 12px rgba(0,0,0,.3)}}

/* ─── 1b. Choice card : variante généreuse de player-row pour les choix A/B (Tu Préfères, etc.) ─── */
/* Card rectangulaire chrome navy, texte centré, plus haute qu'une row, optimisée pour tap mobile.
   Tient sur iPhone SE : ~92px par card permet 2 cartes + OU + chrome card label sur 1 écran sans scroll. */
.ls-choice-card{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:84px;padding:18px 20px;margin-bottom:0;border-radius:14px;background:linear-gradient(160deg,#0d1628 0%,#122038 35%,#152a48 50%,#122038 65%,#0d1628 100%);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 2px 12px rgba(0,0,0,.3);color:var(--tx);text-align:center;font-family:inherit;font-size:1.05rem;font-weight:700;line-height:1.35;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .25s ease,background .2s ease;word-break:break-word}
.ls-choice-card:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(240,198,116,.18) inset,0 4px 18px rgba(0,0,0,.4)}
.ls-choice-card:active{transform:scale(.985)}
.ls-choice-card.my-vote{box-shadow:0 0 0 2px var(--or) inset,0 0 24px rgba(240,198,116,.3),0 2px 12px rgba(0,0,0,.3);background:linear-gradient(160deg,#0d1628 0%,#1a2640 35%,#22324f 50%,#1a2640 65%,#0d1628 100%)}
.ls-choice-card.confirming{animation:lsTapPulse .55s cubic-bezier(.34,1.4,.5,1)}
.ls-choice-or{font-size:1.05rem;font-weight:900;color:var(--dm);text-align:center;margin:8px 0;font-family:'JetBrains Mono',monospace;letter-spacing:1.5px}
@media (prefers-reduced-motion:reduce){.ls-choice-card,.ls-choice-card.confirming{animation:none!important;transition:none!important}}

/* ─── 1c. Tap reveal card : grosse carte cliquable façon "carte à retourner" — pour spy reveal & co ───
   Caractéristiques :
   - Chrome navy gradient
   - Shine animé en diagonal (lumière qui passe)
   - Glow doré autour
   - Breathing subtil (oscillation 2.5s)
   - Shake hint périodique (toutes les 4s) pour inciter à tapper
   - Au tap : flip 3D + scale */
.ls-tap-reveal{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:200px;padding:32px 24px;border-radius:18px;background:linear-gradient(160deg,#0d1628 0%,#122038 30%,#1a2c4a 50%,#122038 70%,#0d1628 100%);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 4px 28px rgba(0,0,0,.5),0 0 40px rgba(240,198,116,.18);color:var(--tx);text-align:center;font-family:inherit;font-size:1.1rem;font-weight:700;line-height:1.4;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;animation:lsTapRevealBreathe 2.5s ease-in-out infinite,lsTapRevealHint 4s ease-in-out 1.5s infinite;transform:translate3d(0,0,0);will-change:transform}
.ls-tap-reveal::after{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at top,rgba(240,198,116,.14),transparent 60%);pointer-events:none}
.ls-tap-reveal:hover{box-shadow:0 0 0 2px rgba(240,198,116,.35) inset,0 4px 32px rgba(0,0,0,.5),0 0 50px rgba(240,198,116,.25)}
.ls-tap-reveal:active{transform:scale(.97)}
.ls-tap-reveal-icon{font-size:3rem;margin-bottom:12px;position:relative;z-index:1;animation:lsTapRevealBob 2s ease-in-out infinite}
.ls-tap-reveal-text{position:relative;z-index:1}
@keyframes lsTapRevealShine{0%,60%{left:-70%}80%{left:130%}100%{left:130%}}
@keyframes lsTapRevealBreathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,0,0) scale(1.012)}}
@keyframes lsTapRevealHint{0%,88%,100%{transform:translate3d(0,0,0)}90%{transform:translate3d(-3px,0,0)}92%{transform:translate3d(3px,0,0)}94%{transform:translate3d(-2px,0,0)}96%{transform:translate3d(2px,0,0)}}
@keyframes lsTapRevealBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Tap reveal : flip animation au moment du reveal */
.ls-tap-reveal.flipping{animation:lsTapRevealFlip .55s cubic-bezier(.34,1.4,.5,1)}
@keyframes lsTapRevealFlip{0%{transform:scale(1) rotateY(0)}30%{transform:scale(.96) rotateY(-12deg)}60%{transform:scale(1.04) rotateY(8deg)}100%{transform:scale(1) rotateY(0)}}

/* Reveal content : apparition dramatique scale up */
.ls-reveal-content{animation:lsRevealContentIn .65s cubic-bezier(.34,1.56,.64,1)}
@keyframes lsRevealContentIn{0%{transform:scale(.4);opacity:0;filter:blur(6px)}50%{filter:blur(0)}100%{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){.ls-tap-reveal,.ls-tap-reveal::before,.ls-tap-reveal-icon,.ls-tap-reveal.flipping,.ls-reveal-content{animation:none!important;transition:none!important}}

/* ─── 2. Name rainbow : utility class pour les noms hero (gradient + shimmer) ─── */
/* Factorisé : utilisé par .ls-vh-name, .ls-vr-name, .qp-result-name, .qp-pass-name */
.ls-name-rainbow{font-weight:900;line-height:1.1;background:linear-gradient(90deg,#ff6b8a,#ffb86c,#ffe066,#43ffc6,#6ec1ff,#c4b5fd,#ff6b8a);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:lsRainbowShim 4s linear infinite;word-break:break-word;padding:0 8px}
@keyframes lsRainbowShim{0%{background-position:0% 0}100%{background-position:200% 0}}
/* Utility : restore native rendering for emojis inside text-fill-transparent gradients (rainbow, etc.) */
/* Usage : <span class="ls-name-rainbow">Pau <span class="ls-emoji">🎯</span></span> */
.ls-emoji{-webkit-text-fill-color:initial!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:initial}

/* Label or hero (mono, letterspacing, glow) — factorisé pour .ls-vh-label, .ls-vr-label, etc. */
.ls-label-or{font-size:.72rem;font-family:'JetBrains Mono',monospace;letter-spacing:2.5px;color:var(--or);text-shadow:0 0 14px rgba(240,198,116,.35);font-weight:600}

/* ─── 3. Vote hero : "À toi de voter [Pseudo]" (texte plein, pas de card) ─── */
.ls-vote-hero{text-align:center;padding:18px 0 14px;margin:8px 0 6px;animation:lsVoteHeroIn .55s cubic-bezier(.34,1.56,.64,1)}
.ls-vote-hero .ls-vh-label{display:block;margin-bottom:10px}
.ls-vote-hero .ls-vh-name{font-size:2.2rem}
.ls-vote-hero .ls-vh-sub{font-size:.78rem;color:var(--dm);margin-top:10px;font-style:italic}
@keyframes lsVoteHeroIn{0%{opacity:0;transform:scale(.5);}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}

/* ─── 4. Vote rappel : "✓ Tu as voté pour [X]" (multi, post-vote) ─── */
.ls-vote-rappel{text-align:center;padding:14px 0 10px;margin:6px 0;animation:lsRappelIn .5s cubic-bezier(.34,1.56,.64,1)}
.ls-vote-rappel .ls-vr-label{display:block;margin-bottom:8px}
.ls-vote-rappel .ls-vr-name{font-size:1.85rem}
@keyframes lsRappelIn{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}

/* ─── 4. Calm dots : animation d'attente apaisante (3 dots) ─── */
.ls-calm-dots{display:flex;justify-content:center;align-items:center;gap:14px;padding:24px 0;height:50px}
.ls-calm-dots span{width:12px;height:12px;border-radius:50%;background:var(--or);box-shadow:0 0 12px rgba(240,198,116,.5);animation:lsCalmDot 1.6s ease-in-out infinite;opacity:.3}
.ls-calm-dots span:nth-child(2){animation-delay:.2s}
.ls-calm-dots span:nth-child(3){animation-delay:.4s}
@keyframes lsCalmDot{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ─── 5. Status counter : "X/Y ont voté" (animé) ─── */
.ls-status-counter{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--dm);letter-spacing:1px;margin:8px 0}
.ls-status-counter .ls-sc-num{display:inline-block;color:var(--or);font-weight:800;font-size:1.05rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.ls-status-counter.tick .ls-sc-num{animation:lsCounterTick .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes lsCounterTick{0%{transform:scale(1)}40%{transform:scale(1.3);text-shadow:0 0 16px rgba(240,198,116,.7)}100%{transform:scale(1)}}

/* ─── 6. Rotating phrase : phrase italique qui change avec fade ─── */
.ls-rotating-phrase{text-align:center;font-size:.85rem;color:var(--dm);font-style:italic;line-height:1.5;padding:8px 16px;min-height:1.5rem;transition:opacity .4s ease}
.ls-rotating-phrase.fading{opacity:0}

/* ─── 7. Host action late : apparaît après délai (host force révélation) ─── */
.ls-host-action-late{opacity:0;pointer-events:none;transition:opacity .6s ease;text-align:center;margin-top:14px}
.ls-host-action-late.visible{opacity:1;pointer-events:auto}

/* ─── 8. Voted feed : zone "ils ont voté" — placée juste au-dessus des player rows (chips qui apparaissent au fil de l'eau) ─── */
.ls-voted-feed{margin:14px auto 18px;text-align:center;padding:14px 16px 12px;border-radius:14px;background:rgba(240,198,116,.04);border:1px solid rgba(240,198,116,.16)}
.ls-voted-feed-label{font-size:.66rem;font-family:'JetBrains Mono',monospace;letter-spacing:1.5px;color:var(--or);margin-bottom:10px;font-weight:600;opacity:.85}
.ls-voted-feed-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;min-height:28px;align-items:center}
.ls-voted-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:14px;background:rgba(67,255,198,.08);border:1px solid rgba(67,255,198,.32);color:var(--mint);font-size:.76rem;font-weight:600;animation:lsChipIn .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes lsChipIn{0%{opacity:0;transform:scale(.4) translateY(6px)}60%{transform:scale(1.12) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
.ls-voted-feed .ls-rotating-phrase{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.06)}

/* État empty : aucun vote — on masque le compteur et les chips, on garde juste la phrase rotative */
.ls-voted-feed.empty{padding:10px 16px}
.ls-voted-feed.empty .ls-voted-feed-label,
.ls-voted-feed.empty .ls-voted-feed-chips{display:none}
.ls-voted-feed.empty .ls-rotating-phrase{margin-top:0;padding-top:0;border-top:none}

/* ─── Shakes : effet visuel de secousse (fallback haptique) — utilisé via LF.shake(el, 'light'|'strong'|'epic') ─── */
/* IMPORTANT : ne JAMAIS shaker le body ou un wrapper qui contient du position:fixed (flash overlay, confetti).
   Le transform sur un parent crée un nouveau stacking context et fait "shake" les fixed children → micro-flashes.
   Toujours shaker un wrapper interne (.gw, .mp-screen, hero card, etc.). */
.ls-shake-light,.ls-shake-strong,.ls-shake-epic{will-change:transform;transform-origin:center center;backface-visibility:hidden}
.ls-shake-light{animation:lsShakeL .12s ease-out}
@keyframes lsShakeL{0%,100%{transform:translate3d(0,0,0)}30%{transform:translate3d(2px,0,0)}70%{transform:translate3d(-2px,0,0)}}

.ls-shake-strong{animation:lsShakeS .32s ease-out}
@keyframes lsShakeS{0%,100%{transform:translate3d(0,0,0)}15%{transform:translate3d(-4px,0,0)}30%{transform:translate3d(4px,0,0)}45%{transform:translate3d(-3px,0,0)}60%{transform:translate3d(3px,0,0)}75%{transform:translate3d(-2px,0,0)}}

/* Epic shake : pour le winner reveal — secousse multidirectionnelle plus intense */
.ls-shake-epic{animation:lsShakeEpic .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes lsShakeEpic{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  10%{transform:translate3d(-5px,-2px,0) rotate(-1deg)}
  20%{transform:translate3d(6px,2px,0) rotate(1deg)}
  30%{transform:translate3d(-5px,-1px,0) rotate(-1deg)}
  40%{transform:translate3d(5px,1px,0) rotate(.5deg)}
  50%{transform:translate3d(-4px,2px,0) rotate(-.5deg)}
  60%{transform:translate3d(4px,-2px,0) rotate(0)}
  70%{transform:translate3d(-3px,1px,0) rotate(0)}
  80%{transform:translate3d(2px,-1px,0) rotate(0)}
  90%{transform:translate3d(-1px,1px,0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){.ls-shake-light,.ls-shake-strong,.ls-shake-epic{animation:none!important}}

/* ─── 9. Pass phone : écran "Passe le tel à [Pseudo]" pour jeux locaux à tour de rôle ─── */
/* Utilisé par LF.passPhone(containerId, opts) — réutilisable sur nhie, pref, qdate, qui-pourrait */
.ls-pass{text-align:center;padding:58px 20px;animation:lsPassFadeIn .35s ease-out}
.ls-pass-track{position:relative;height:64px;max-width:280px;margin:0 auto 22px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.ls-pass-phone{position:absolute;top:50%;margin-top:-22px;font-size:2.8rem;left:-18%;animation:lsPassSlide 2.6s ease-in-out infinite;will-change:transform,left;filter:drop-shadow(0 4px 10px rgba(240,198,116,.45))}
.ls-pass-dots{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:14px;z-index:-1}
.ls-pass-dots span{width:6px;height:6px;border-radius:50%;background:var(--or);opacity:.2;animation:lsPassDot 1.4s ease-in-out infinite}
.ls-pass-dots span:nth-child(2){animation-delay:.15s}
.ls-pass-dots span:nth-child(3){animation-delay:.3s}
.ls-pass-dots span:nth-child(4){animation-delay:.45s}
.ls-pass-dots span:nth-child(5){animation-delay:.6s}
.ls-pass-from{font-size:.72rem;font-family:'JetBrains Mono',monospace;letter-spacing:2px;color:var(--dm);margin-bottom:8px;text-transform:uppercase}
.ls-pass-name{font-size:1.9rem;margin-bottom:30px;animation:lsPassNamePop .55s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes lsPassFadeIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes lsPassSlide{0%{left:-18%;transform:rotate(-12deg) scale(.9)}25%{transform:rotate(-4deg) scale(1)}50%{left:50%;transform:translateX(-50%) rotate(0) scale(1.08)}75%{transform:rotate(4deg) scale(1)}100%{left:118%;transform:rotate(12deg) scale(.9)}}
@keyframes lsPassDot{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.3)}}
@keyframes lsPassNamePop{0%{opacity:0;transform:scale(.4) translateY(10px)}60%{transform:scale(1.12) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){.ls-pass-phone,.ls-pass-dots span,.ls-pass-name,.ls-pass{animation:none!important}.ls-pass-phone{left:50%;transform:translateX(-50%)}.ls-pass-name{opacity:1}}

/* ─── 10. Modal confirm : design system lotsof (LF.confirm) ─── */
.ls-modal{position:fixed;inset:0;background:rgba(5,10,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:lsModalFade .22s ease-out}
.ls-modal-card{position:relative;background:linear-gradient(160deg,#0d1628 0%,#122038 30%,#1a2c4a 50%,#122038 70%,#0d1628 100%);border-radius:18px;padding:28px 24px 22px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(240,198,116,.28),0 0 50px rgba(240,198,116,.12);animation:lsModalPop .42s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.ls-modal-card::before{content:'';position:absolute;top:0;left:-70%;width:60%;height:100%;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:skewX(-20deg);animation:lsModalShine 8s ease-in-out infinite;pointer-events:none}
.ls-modal-card::after{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at top,rgba(240,198,116,.1),transparent 65%);pointer-events:none}
.ls-modal-emoji{position:relative;font-size:2.8rem;margin-bottom:10px;filter:drop-shadow(0 4px 14px rgba(240,198,116,.35))}
.ls-modal-title{position:relative;font-size:1.2rem;font-weight:800;margin-bottom:8px;color:var(--tx);line-height:1.3}
.ls-modal-msg{position:relative;font-size:.82rem;color:var(--dm);margin-bottom:22px;line-height:1.5}
.ls-modal-actions{position:relative;display:flex;gap:10px}
.ls-modal-actions .btn{flex:1}
@keyframes lsModalFade{from{opacity:0}to{opacity:1}}
@keyframes lsModalPop{0%{transform:scale(.82);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes lsModalShine{0%,30%{left:-70%}70%,100%{left:130%}}

/* ─── 10. Q-card chrome : carte question premium chrome shiny ─── */
.ls-q-card-chrome{position:relative;text-align:center;padding:26px 22px;border-radius:14px;background:linear-gradient(160deg,#0d1628 0%,#122038 30%,#1a2c4a 50%,#122038 70%,#0d1628 100%);border:none;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 2px 24px rgba(0,0,0,.4),0 0 32px rgba(240,198,116,.06);overflow:hidden;margin-bottom:14px;animation:lsChromeCardIn .55s cubic-bezier(0.34,1.4,0.5,1)}
.ls-q-card-chrome::before{content:'';position:absolute;top:0;left:-70%;width:60%;height:100%;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.11) 50%,transparent 65%);transform:skewX(-20deg);animation:lsChromeShine 8s ease-in-out infinite;pointer-events:none}
.ls-q-card-chrome::after{content:'';position:absolute;inset:0;border-radius:14px;background:radial-gradient(ellipse at top,rgba(240,198,116,.08),transparent 60%);pointer-events:none}
.ls-q-card-chrome.sm{padding:18px 18px}
.ls-q-card-chrome .ls-q-label{position:relative;font-size:.72rem;font-family:'JetBrains Mono',monospace;letter-spacing:2.5px;color:#f0c674;margin-bottom:14px;text-shadow:0 0 14px rgba(240,198,116,.35)}
.ls-q-card-chrome.sm .ls-q-label{font-size:.65rem;margin-bottom:8px}
.ls-q-card-chrome .ls-q-text{position:relative;font-size:clamp(1.05rem,3.8vw,1.35rem);font-weight:600;line-height:1.5;color:var(--tx)}
.ls-q-card-chrome.sm .ls-q-text{font-size:.98rem}
@keyframes lsChromeShine{0%,35%{left:-70%}75%,100%{left:130%}}
@keyframes lsChromeCardIn{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ─── 11. Drumroll ASMR : SVG arc gold + bloom + 3 orbites + core breathing ─── */
.ls-drumroll{position:relative;width:170px;height:170px;margin:0 auto}
.ls-drum-arc{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ls-drum-arc-track{fill:none;stroke:rgba(255,255,255,.05);stroke-width:2}
.ls-drum-arc-fill{fill:none;stroke:#f0c674;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(240,198,116,.7));stroke-dasharray:289;stroke-dashoffset:289;animation:lsArcFill 1.5s cubic-bezier(0.65,0,0.35,1) forwards}
@keyframes lsArcFill{to{stroke-dashoffset:0}}
.ls-drum-bloom{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,rgba(255,184,108,.35) 0%,rgba(255,107,138,.15) 40%,transparent 70%);animation:lsBloomPulse 2.8s ease-in-out infinite}
@keyframes lsBloomPulse{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.08);opacity:.95}}
.ls-drum-core{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:linear-gradient(135deg,#ffe066,#ffb86c,#ff6b8a);box-shadow:0 0 28px rgba(255,184,108,.75),0 0 56px rgba(255,107,138,.4),inset 0 0 16px rgba(255,255,255,.35);animation:lsCoreBreathe 2.8s ease-in-out infinite}
@keyframes lsCoreBreathe{0%,100%{transform:scale(1);box-shadow:0 0 28px rgba(255,184,108,.75),0 0 56px rgba(255,107,138,.4),inset 0 0 16px rgba(255,255,255,.35)}50%{transform:scale(1.14);box-shadow:0 0 40px rgba(255,184,108,.95),0 0 80px rgba(255,107,138,.55),inset 0 0 22px rgba(255,255,255,.5)}}
.ls-drum-orbit{position:absolute;top:50%;left:50%;width:0;height:0}
.ls-drum-orbit div{position:absolute;top:0;left:0;width:0;height:0;animation:lsOrbitSpin 4.5s linear infinite}
.ls-drum-orbit div::after{content:'';position:absolute;top:-60px;left:-5px;width:10px;height:10px;border-radius:50%;background:var(--lso);box-shadow:0 0 12px var(--lso),0 0 24px var(--lso)}
.ls-drum-orbit div:nth-child(1){--lso:#43ffc6}
.ls-drum-orbit div:nth-child(2){--lso:#6ec1ff;animation-delay:-1.5s}
.ls-drum-orbit div:nth-child(3){--lso:#c4b5fd;animation-delay:-3s}
@keyframes lsOrbitSpin{to{transform:rotate(360deg)}}
.ls-drum-text{font-size:.82rem;color:var(--dm);font-style:italic;margin-top:22px;letter-spacing:.8px;text-align:center}
.ls-drum-text span{display:inline-block;opacity:0;animation:lsDrumDot 1.8s infinite}
.ls-drum-text span:nth-child(2){animation-delay:.3s}
.ls-drum-text span:nth-child(3){animation-delay:.6s}
@keyframes lsDrumDot{0%,60%,100%{opacity:0}20%,55%{opacity:1}}

/* ─── 12. Slot machine name : grand texte qui change pendant le drumroll, lock final or ─── */
.ls-slot-name{text-align:center;font-size:1.5rem;font-weight:800;color:var(--tx);margin-top:18px;min-height:1.8rem;letter-spacing:.5px;transition:color .2s}
.ls-slot-name.locked{color:var(--or);text-shadow:0 0 18px rgba(240,198,116,.6);animation:lsSlotLock .4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes lsSlotLock{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1.08)}}

/* ─── 13. Pulse CTA button : pulse 2.2s pour mettre en avant un bouton ─── */
.ls-btn-pulse{animation:lsBtnPulse 2.2s ease-in-out infinite}
@keyframes lsBtnPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,184,108,.55),0 2px 10px rgba(0,0,0,.2)}50%{transform:scale(1.035);box-shadow:0 0 0 8px rgba(255,184,108,0),0 2px 14px rgba(255,184,108,.3)}}

/* ─── 14. Reveal hero : wrapper centré pour le moment de révélation, animation epic différenciée ─── */
.ls-reveal-hero{text-align:center;padding:18px 0 14px;will-change:transform,opacity;transform:translateZ(0);animation:lsRevealHeroIn .55s cubic-bezier(0.34,1.56,0.64,1)}
.ls-reveal-hero.epic{animation:lsRevealHeroEpic 1.1s cubic-bezier(0.22, 1.3, 0.36, 1)}
.ls-reveal-hero.epic .ls-name-rainbow{text-shadow:0 0 30px rgba(240,198,116,.5),0 0 60px rgba(255,107,138,.3)}
.ls-reveal-meta{font-size:.82rem;color:var(--dm);margin-top:10px}
@keyframes lsRevealHeroIn{0%{transform:scale(.5) translateZ(0);opacity:0}60%{transform:scale(1.08) translateZ(0)}100%{transform:none;opacity:1}}
@keyframes lsRevealHeroEpic{0%{transform:scale(2.2) translateZ(0);opacity:0}25%{opacity:1}45%{transform:scale(.92) translateZ(0)}65%{transform:scale(1.12) translateZ(0)}100%{transform:scale(1) translateZ(0);opacity:1}}

/* ─── 15. Flash overlay : flash radial pour amplifier les reveals dramatiques ─── */
.ls-flash-overlay{position:fixed;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.4) 0%,rgba(255,224,102,.1) 30%,transparent 60%);pointer-events:none;z-index:998;opacity:0;will-change:opacity;transform:translateZ(0);animation:lsFlash .6s ease-out forwards}
@keyframes lsFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

/* ─── 15b. Stats bar : bandeau stats finales utilisé en bas de tous les recap final (qp, nhie, futurs jeux) ─── */
.ls-stats-bar{margin-top:16px;padding:12px 14px;background:rgba(255,255,255,.02);border-top:1px dashed rgba(240,198,116,.2);border-bottom:1px dashed rgba(240,198,116,.2);font-size:.78rem;color:var(--dm);font-family:'JetBrains Mono',monospace;letter-spacing:.5px;text-align:center}

/* ─── 15c. Score row anim : badge "+X" flottant qui pop quand un joueur gagne des points ─── */
.ls-score-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;position:relative}
.ls-score-row .ls-sr-pos{width:20px;text-align:center;color:var(--dm);font-size:.85rem}
.ls-score-row .ls-sr-name{flex:1;min-width:0;word-break:break-word}
.ls-score-row .ls-sr-pts{font-family:'JetBrains Mono',monospace;color:var(--or);font-weight:700;position:relative}
.ls-score-row .ls-sr-delta{display:inline-block;margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:800;padding:2px 8px;border-radius:10px;white-space:nowrap;max-width:120px;overflow:hidden;border:1px solid transparent;opacity:0;transform:translateY(8px) scale(.7);animation:lsScoreDeltaPop .85s cubic-bezier(.34,1.56,.64,1) forwards}
.ls-score-row .ls-sr-delta.civils{background:rgba(67,255,198,.15);color:var(--mint);border-color:rgba(67,255,198,.35)}
.ls-score-row .ls-sr-delta.undercover{background:rgba(255,107,107,.15);color:var(--coral);border-color:rgba(255,107,107,.35)}
.ls-score-row .ls-sr-delta.mrwhite{background:rgba(196,181,253,.15);color:var(--lavender);border-color:rgba(196,181,253,.35)}
@keyframes lsScoreDeltaPop{
  0%{opacity:0;transform:translateY(8px) scale(.7);max-width:120px;margin-left:8px;padding:2px 8px;border-width:1px}
  25%{opacity:1;transform:translateY(0) scale(1.15);max-width:120px;margin-left:8px;padding:2px 8px;border-width:1px}
  40%{transform:translateY(0) scale(1);max-width:120px;margin-left:8px;padding:2px 8px;border-width:1px}
  80%{opacity:1;transform:translateY(0) scale(1);max-width:120px;margin-left:8px;padding:2px 8px;border-width:1px}
  92%{opacity:0;transform:translateY(-12px) scale(.95);max-width:120px;margin-left:8px;padding:2px 8px;border-width:1px}
  100%{opacity:0;transform:translateY(-12px) scale(.95);max-width:0;margin-left:0;padding:2px 0;border-width:0}
}
@media (prefers-reduced-motion:reduce){.ls-score-row .ls-sr-delta{animation:none!important;opacity:1!important;transform:none!important}}

/* ─── 15d. Recap line : ligne de recap en cascade staggered (pour les rôles révélés en fin de manche) ─── */
.ls-cascade-line{opacity:0;transform:translateX(-12px);animation:lsCascadeLineIn .4s cubic-bezier(.34,1.4,.5,1) forwards}
@keyframes lsCascadeLineIn{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.ls-cascade-line{animation:none!important;opacity:1!important;transform:none!important}}

/* ─── 15c. Cliffhanger banner : phrase teasing italique avant le bouton Rejouer ─── */
.ls-cliffhanger{margin-top:18px;font-size:.85rem;color:var(--or);font-style:italic;text-align:center;padding:10px 16px;border-top:1px dashed rgba(240,198,116,.2);border-bottom:1px dashed rgba(240,198,116,.2)}

/* ─── 16. Vote line cascade : ligne de vote qui apparaît en cascade staggered (qui-pourrait + nhie + autres) ─── */
.ls-vote-line{opacity:0;transform:translateX(-12px);font-size:.82rem;padding:5px 0;color:var(--tx);line-height:1.4;animation:lsVoteLineIn .35s cubic-bezier(.34,1.4,.5,1) forwards}
.ls-vote-line.winner-vote{color:var(--or);font-weight:600}
.ls-vote-line.winner-vote .ls-vote-arrow{color:var(--or);text-shadow:0 0 10px rgba(240,198,116,.6);font-weight:800}
.ls-vote-arrow{display:inline-block;margin:0 4px;color:var(--dm)}
@keyframes lsVoteLineIn{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:translateX(0)}}

/* ─── 17. Moment badge : badge épique au-dessus du hero (UNANIMITÉ, ANARCHIE, etc.) ─── */
.ls-moment-badge{display:inline-block;padding:6px 14px;border-radius:20px;background:linear-gradient(90deg,rgba(240,198,116,.18),rgba(255,107,138,.18),rgba(196,181,253,.18));border:1px solid rgba(240,198,116,.45);font-size:.72rem;font-family:'JetBrains Mono',monospace;letter-spacing:1.2px;color:var(--or);font-weight:700;text-shadow:0 0 12px rgba(240,198,116,.5);margin-bottom:14px;animation:lsMomentIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes lsMomentIn{0%{opacity:0;transform:translateY(-10px) scale(.7)}60%{transform:translateY(0) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ─── 18. Recap final cards : cards stagger fade-in + glow doré pulsing sur top scorer + verdicts cascade ─── */
.ls-recap-card{opacity:0;animation:lsRecapCardIn .55s cubic-bezier(0.34,1.4,0.5,1) forwards}
.ls-recap-top-glow{animation:lsRecapCardIn .55s cubic-bezier(0.34,1.4,0.5,1) forwards,lsRecapTopGlow 2.4s ease-in-out infinite 0.6s;opacity:0}
.ls-recap-line{opacity:0;transform:translateX(-8px);animation:lsRecapLineIn .35s ease-out forwards}
@keyframes lsRecapCardIn{0%{opacity:0;transform:translateY(14px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes lsRecapLineIn{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:translateX(0)}}
@keyframes lsRecapTopGlow{0%,100%{box-shadow:0 0 0 1px rgba(240,198,116,.25),0 0 18px rgba(240,198,116,.15)}50%{box-shadow:0 0 0 1px rgba(240,198,116,.55),0 0 32px rgba(240,198,116,.35)}}

/* ─── 19. Binary buttons : choix binaire "J'ai déjà / Jamais" pour nhie, pref, spy, etc. ─── */
/* Container */
.ls-btn-binary{display:flex;gap:10px;width:100%;margin:14px 0}
/* Bouton "yes/positif" : rempli chrome navy */
.ls-btn-binary-yes{flex:1;position:relative;padding:18px 16px;border-radius:14px;background:linear-gradient(160deg,#0d1628 0%,#122038 30%,#1a2c4a 50%,#122038 70%,#0d1628 100%);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 2px 12px rgba(0,0,0,.3);color:var(--or);font-family:inherit;font-size:1rem;font-weight:800;line-height:1.2;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .25s ease;text-shadow:0 0 14px rgba(240,198,116,.3);min-height:64px}
.ls-btn-binary-yes:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(240,198,116,.3) inset,0 4px 18px rgba(0,0,0,.4),0 0 24px rgba(240,198,116,.15)}
.ls-btn-binary-yes:active{transform:scale(.98)}
.ls-btn-binary-yes.my-vote{box-shadow:0 0 0 2px var(--or) inset,0 0 24px rgba(240,198,116,.4),0 2px 12px rgba(0,0,0,.3);background:linear-gradient(160deg,#0d1628 0%,#1a2640 35%,#22324f 50%,#1a2640 65%,#0d1628 100%);transform:scale(1.02)}
/* Bouton "no/négatif" : outline pointillé fantôme */
.ls-btn-binary-no{flex:1;position:relative;padding:18px 16px;border-radius:14px;background:transparent;border:2px dashed rgba(240,198,116,.45);color:var(--dm);font-family:inherit;font-size:1rem;font-weight:700;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .25s ease;min-height:64px}
.ls-btn-binary-no:hover{border-color:rgba(240,198,116,.7);color:var(--or);background:rgba(240,198,116,.04)}
.ls-btn-binary-no:active{transform:scale(.98)}
.ls-btn-binary-no.my-vote{border:2px solid var(--or);background:rgba(240,198,116,.08);color:var(--or);box-shadow:0 0 24px rgba(240,198,116,.25);transform:scale(1.02);text-shadow:0 0 12px rgba(240,198,116,.4)}
/* Tap confirm pulse (réutilise lsTapPulse) */
.ls-btn-binary-yes.confirming,.ls-btn-binary-no.confirming{animation:lsTapPulse .55s cubic-bezier(.34,1.4,.5,1)}

/* ─── 20. Reduced motion : tout désactivé proprement ─── */
@media (prefers-reduced-motion:reduce){
  .ls-player-row,.ls-player-row.confirming,
  .ls-player-row[style*="lsRowDeal"],
  .ls-vote-hero,.ls-vote-hero .ls-vh-name,
  .ls-vote-rappel,.ls-vote-rappel .ls-vr-name,
  .ls-calm-dots span,
  .ls-voted-chip,
  .ls-status-counter.tick .ls-sc-num,
  .ls-rotating-phrase,
  .ls-modal,.ls-modal-card,.ls-modal-card::before,
  .ls-q-card-chrome,.ls-q-card-chrome::before,
  .ls-drum-core,.ls-drum-bloom,.ls-drum-orbit div,.ls-drum-arc-fill,.ls-drum-text span,
  .ls-slot-name.locked,.ls-btn-pulse,
  .ls-reveal-hero,.ls-reveal-hero.epic,.ls-flash-overlay,
  .ls-vote-line,.ls-moment-badge,
  .ls-recap-card,.ls-recap-top-glow,.ls-recap-line,
  .ls-btn-binary-yes,.ls-btn-binary-no{animation:none!important;transition:none!important}
  .ls-calm-dots span{opacity:.6}
  .ls-drum-core{transform:scale(1.1)}
  .ls-drum-arc-fill{stroke-dashoffset:0}
  .ls-drum-text span{opacity:1}
  .ls-slot-name.locked{transform:scale(1.08)}
}