/* =====================================================================
   Kote — animations "jeu"
   (chargé après style.css ; tout est coupé si le système demande moins
   d'animations, voir la règle prefers-reduced-motion de style.css)
   ===================================================================== */

:root { --bounce: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- transitions entre les pages (Chrome / Edge récents) ---------- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.main-nav { view-transition-name: main-nav; }
.main-nav a.active { view-transition-name: nav-active; }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
::view-transition-group(nav-active) { animation-duration: .5s; animation-timing-function: var(--bounce); }
::view-transition-old(nav-active), ::view-transition-new(nav-active) { animation-duration: .25s; }
/* uniquement opacité + déplacement : pris en charge par la carte graphique, pas de flou */
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
.vt .page { animation: none; }   /* la transition fait déjà l'entrée de la page */

/* ---------- onde au clic + appui ---------- */
button, .button-primary, .button-secondary, .main-nav a, .sub-tabs a, .settings-nav a, .pill-level {
  position: relative; overflow: hidden;
}
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .15) 40%, transparent 70%);
  transform: scale(0); animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.notif-bell { overflow: visible; }   /* sinon la pastille rouge serait coupée */
.button-primary, .hero-form button, .proposition button, .button-secondary, .main-nav a, .sub-tabs a {
  transition: transform .35s var(--bounce), box-shadow .25s, filter .2s, background .25s, color .2s;
}
.button-primary:hover, .hero-form button:hover, .proposition button:hover { transform: translateY(-2px); }
.button-primary:active, .hero-form button:active, .proposition button:active, .settings-form button:active,
.auth-form button:active, .button-secondary:active, .main-nav a:active, .sub-tabs a:active {
  transform: scale(.93); transition: transform .08s;
}
/* reflet lumineux qui balaie les boutons principaux au survol */
.button-primary::after, .hero-form button::after, .proposition button::after, .auth-form button::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.button-primary:hover::after, .hero-form button:hover::after, .proposition button:hover::after,
.auth-form button:hover::after { animation: sweep .7s ease; }
@keyframes sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

/* le bouton du bonus pulse pour attirer le regard */
.daily-claim { animation: claim-pulse 1.8s ease-in-out infinite; }
@keyframes claim-pulse { 50% { transform: scale(1.05); } }

/* ---------- chargement ---------- */
.is-loading { pointer-events: none; filter: saturate(.8) brightness(.95); }
.spinner {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analyzing {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border-radius: 14px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--border); animation: pop-in .3s var(--bounce);
  position: relative; z-index: 1;
}
.analyzing-orb { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.analyzing-orb span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.analyzing-orb span:nth-child(1) { border-top-color: var(--accent-2); animation: spin 1s linear infinite; }
.analyzing-orb span:nth-child(2) { inset: 6px; border-right-color: var(--accent); animation: spin .8s linear infinite reverse; }
.analyzing-orb span:nth-child(3) { inset: 13px; background: var(--grad-brand); animation: orb-pulse 1s ease-in-out infinite; }
@keyframes orb-pulse { 50% { transform: scale(.6); opacity: .6; } }
.analyzing-text { flex: 1; min-width: 0; }
.analyzing-text strong { display: block; font-size: .92rem; }
.analyzing-text strong.step-in { animation: step-in .35s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.analyzing-bar { margin-top: 8px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.analyzing-bar span {
  display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad-progress);
  animation: indeterminate 1.1s ease-in-out infinite;
}
@keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- entrées en scène ---------- */
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes card-flip-in { from { opacity: 0; transform: perspective(700px) rotateX(-35deg) translateY(30px) scale(.9); } }
.propositions .proposition { animation: card-flip-in .6s var(--bounce) both; }
.propositions .proposition:nth-child(2) { animation-delay: .09s; }
.propositions .proposition:nth-child(3) { animation-delay: .18s; }
.propositions .proposition:nth-child(4) { animation-delay: .27s; }
.video-grid .video-tile:nth-child(-n+6), .stats-grid .stat, .leaderboard li:nth-child(-n+10),
.people li:nth-child(-n+10), .settings-body > *, .daily-card, .hero {
  animation: card-in .4s var(--ease) both;
}
.video-grid .video-tile:nth-child(2), .stats-grid .stat:nth-child(2), .leaderboard li:nth-child(2), .people li:nth-child(2) { animation-delay: .06s; }
.video-grid .video-tile:nth-child(3), .stats-grid .stat:nth-child(3), .leaderboard li:nth-child(3), .people li:nth-child(3) { animation-delay: .12s; }
.video-grid .video-tile:nth-child(4), .stats-grid .stat:nth-child(4), .leaderboard li:nth-child(4), .people li:nth-child(4) { animation-delay: .18s; }
.video-grid .video-tile:nth-child(n+5), .stats-grid .stat:nth-child(n+5), .leaderboard li:nth-child(n+5), .people li:nth-child(n+5) { animation-delay: .24s; }
.hero { animation-delay: .05s; }

/* barres et anneaux qui se remplissent */
@property --pct { syntax: "<number>"; inherits: false; initial-value: 0; }
.level-ring { animation: ring-fill 1.2s var(--ease) .2s both; }
@keyframes ring-fill { from { --pct: 0; } }
.progress span, .xp-bar span { transform-origin: left center; animation: bar-grow 1s var(--ease) .3s both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.propositions .prop-odds { display: inline-block; animation: odds-pop .5s var(--bounce) .45s both; }
@keyframes odds-pop { from { transform: scale(.4); opacity: 0; } }

/* pari tout juste placé : il pulse dans "En cours" */
.bet-new { position: relative; border-color: rgba(155, 92, 255, .6); }
.bet-new::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(155, 92, 255, .25), 0 0 26px rgba(155, 92, 255, .5);
  opacity: 0; animation: new-bet 1.1s ease-in-out 3;
}
@keyframes new-bet { 50% { opacity: 1; } }

/* messages */
.flash { animation: flash-in .5s var(--bounce); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
.flash-reward { animation: flash-in .5s var(--bounce), shine 2.2s linear .3s 2; }

/* ---------- solde, pièces volantes, textes flottants ---------- */
.pill-coins.bump { animation: bump .45s var(--bounce); }
@keyframes bump { 40% { transform: scale(1.18); box-shadow: 0 0 22px rgba(255, 201, 60, .6); } }
.flying-coin { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; margin: -12px 0 0 -12px; }
.flying-coin .coin { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(255, 201, 60, .9)); }
.float-text {
  position: fixed; z-index: 1001; pointer-events: none; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 1.2rem; animation: float-up 1.4s var(--ease) forwards; text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.float-text.gain { color: var(--gold); }
.float-text.loss { color: var(--red); animation-name: float-down; }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -80%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}
@keyframes float-down {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, 10%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, 160%) scale(1); }
}
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 999; pointer-events: none; }

/* ---------- écrans "PARI GAGNÉ !" / "NIVEAU SUPÉRIEUR" ---------- */
.celebrate {
  position: fixed; inset: 0; z-index: 998; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 45%, rgba(20, 10, 30, .7), rgba(3, 3, 8, .92));
  animation: fade-in .25s ease;
}
.celebrate.leaving { animation: fade-out .28s ease forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.celebrate-card {
  position: relative; text-align: center; padding: 30px 34px 24px; border-radius: 26px; min-width: min(340px, 90vw);
  background: linear-gradient(180deg, #1f1a2e, #13121c); border: 1px solid rgba(255, 201, 60, .45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 60px rgba(255, 201, 60, .25), 0 30px 80px rgba(0, 0, 0, .7);
  animation: celebrate-in .7s var(--bounce); isolation: isolate;
}
.celebrate-level .celebrate-card {
  border-color: rgba(122, 162, 255, .5); box-shadow: 0 0 60px rgba(122, 162, 255, .25), 0 30px 80px rgba(0, 0, 0, .7);
}
@keyframes celebrate-in { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.celebrate-emoji { font-size: 3.4rem; line-height: 1; animation: emoji-bounce 1s var(--bounce) .2s both; }
@keyframes emoji-bounce { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.3) rotate(10deg); } 100% { transform: none; } }
.celebrate-kicker { margin-top: 10px; font-size: .8rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.celebrate-amount {
  font-size: 3rem; font-weight: 900; line-height: 1.1; margin: 4px 0;
  background: linear-gradient(90deg, #ffc93c, #fff3b0, #ffc93c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 1.8s linear infinite;
}
.celebrate-level .celebrate-amount { background-image: linear-gradient(90deg, #7aa2ff, #ffffff, #38bdf8, #7aa2ff); }
.celebrate-sub { color: var(--text-2); font-size: .92rem; }
.celebrate-ok { margin-top: 18px; padding: 11px 26px; font-size: 1rem; }
.celebrate-rays {
  position: absolute; left: 50%; top: 58px; width: 260px; height: 260px; margin: -130px 0 0 -130px; z-index: -1;
  background: repeating-conic-gradient(rgba(122, 162, 255, .2) 0 10deg, transparent 10deg 30deg);
  border-radius: 50%; animation: spin 12s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
}

/* ---------- survols plus vivants ---------- */
/* seuls les éléments cliquables réagissent au survol (les cartes de pari se cochent d'un clic) */
.proposition:hover { transform: translateY(-2px); }
.prop-safe:hover { border-color: rgba(61, 220, 132, .5); }
.prop-medium:hover { border-color: rgba(255, 159, 28, .5); }
.prop-risky:hover { border-color: rgba(255, 90, 110, .5); }
.prop-express:hover { border-color: rgba(56, 189, 248, .6); }
.leaderboard li { transition: background .2s; }
.lb-rank.rank-1 { display: inline-block; animation: crown 2.4s ease-in-out infinite; }
@keyframes crown { 50% { transform: scale(1.14); } }
.notif-bell:hover svg { animation: wiggle .6s ease; transform-origin: 50% 10%; }
.brand:hover .brand-mark { animation: glitch .4s steps(2) 2; }
@keyframes glitch {
  0% { box-shadow: -3px -1px 0 rgba(122, 162, 255, .8), 3px 1px 0 rgba(155, 92, 255, .8); }
  50% { box-shadow: 3px 1px 0 rgba(122, 162, 255, .8), -3px -1px 0 rgba(155, 92, 255, .8); }
}

/* nouveaux joueurs : rayons verts qui "respirent" et bulle qui rebondit (transform/opacité uniquement) */
.starter-rays { animation: rays-pulse 1.6s ease-in-out infinite; }
@keyframes rays-pulse { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.starter-tip { animation: tip-bounce 1.2s ease-in-out infinite; }
@keyframes tip-bounce { 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- palette sobre (fin des textes jaune vif) ----------
   Les montants sont en blanc à côté de l'icône pièce (c'est elle qui porte le doré),
   les gains en vert, et plus aucun halo lumineux ni reflet animé sur du texte.
   Le doré adouci (--gold-text) reste pour quelques repères (1re place, ligne d'objectif). */
:root { --gold-text: #e9b85f; }
.gold, .bet-money .gold, .lb-value.gold, .stat-value.gold, .reward-amount, .pill-coins { color: #fff; text-shadow: none; }
.prop-odds { color: #fff; text-shadow: none; }
.lb-rank.rank-1 { color: var(--gold-text); text-shadow: none; }
.potential-gain strong { color: var(--green); }
.chart-goal { color: var(--gold-text); }
.float-text.gain { color: var(--green); }
.pill-admin { color: var(--text-2); }
.coin { filter: none; }
.celebrate-coin { filter: none; }
.celebrate-amount, .celebrate-level .celebrate-amount {
  background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; animation: none;
}
.proposition .stake-max { border-color: rgba(155, 92, 255, .5); background: rgba(155, 92, 255, .12); color: var(--accent-light); }
.proposition .stake-max:hover { background: rgba(155, 92, 255, .22); }
/* emojis 3D (static/emoji.js) : même taille qu'un caractère */
img.emoji { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; margin: 0 .04em; }

/* « + » de la barre : sa bulle d'aide dépasse en dessous (pas de découpe, pas de fond au survol) */
.main-nav a.nav-plus { overflow: visible; }
.main-nav a.nav-plus:hover, .main-nav a.nav-plus:active { background: none; }
.main-nav a.nav-plus::after { display: none; }

/* ---------- « + » : bouton principal de l'appli, gros, surélevé, avec une onde qui invite à cliquer ---------- */
.main-nav a.nav-plus {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 0 8px 6px; color: var(--accent-light); font-size: 0.72rem; font-weight: 800;
}
.nav-plus-circle {
  position: relative; width: 62px; height: 62px; margin-top: -22px;   /* dépasse au-dessus de la barre */
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #b57bff 0%, #9b5cff 40%, #6d28d9 100%);
  border: 4px solid var(--bg);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .55), inset 0 2px 0 rgba(255, 255, 255, .25);
  transition: transform .15s var(--ease);
}
.nav-plus-circle svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
/* onde qui s'échappe du bouton toutes les ~2,5 s (transform + opacity : léger) */
.nav-plus-circle::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  border: 2px solid rgba(181, 123, 255, .8); animation: plus-wave 2.6s ease-out infinite;
}
@keyframes plus-wave { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.nav-plus:hover .nav-plus-circle { transform: translateY(-2px); }
.nav-plus:active .nav-plus-circle { transform: scale(.93); }
.nav-plus-label { line-height: 1; }
@media (max-width: 600px) {
  .nav-plus-circle { width: 58px; height: 58px; margin-top: -20px; }
  .main-nav a.nav-plus { padding-bottom: 5px; font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) { .nav-plus-circle::before { animation: none; opacity: 0; } }