/* =========================================================
   Comète Tiamat (public/js/comet.js) : événement en direct.
   Déroulé de la maquette Figma : assombrissement + ciel doré, titre lettre par lettre,
   piqué de la comète (1 → 2,6 s), attente (ondes, halo), clic = flash, secousse, éclatement.
   ========================================================= */
.cmt-stage { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.cmt-stage[hidden] { display: none; }
.cmt-dim { position: absolute; inset: 0; background: #120e33; opacity: 0; transition: opacity .5s var(--ease); }
.cmt-gold { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease-in-out .1s;
  background: linear-gradient(180deg, #ffb34700 0%, #ffb34766 35%, #ff9a5c8c 75%, #ff7a5eb3 100%); }
.cmt-stage.is-on .cmt-dim { opacity: .45; }
.cmt-stage.is-on .cmt-gold { opacity: 1; }
.cmt-stage.is-out .cmt-dim, .cmt-stage.is-out .cmt-gold { opacity: 0; transition-duration: 1s; }

/* Titre : chaque lettre tombe, énorme et penchée, puis se pose */
.cmt-title { position: absolute; left: 0; right: 0; top: 14%; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 7.4vw, 64px); line-height: 1.05; color: var(--surface); letter-spacing: .01em; padding: 0 12px;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 6px 0 var(--ink), 0 0 30px #5cc8ffe6; transition: opacity .5s ease-in, transform .5s ease-in; }
.cmt-title .l { display: inline-block; white-space: pre; animation: cmtDrop .55s var(--spring) both; animation-delay: calc(.4s + var(--i) * .045s); }
.cmt-title.is-gone, .cmt-stage.is-taken .cmt-title { opacity: 0; transform: translateY(-40px); }
.cmt-hint { position: absolute; left: 0; right: 0; top: calc(14% + clamp(44px, 9vw, 80px)); text-align: center; font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(20px, 4vw, 30px); color: var(--sun); text-shadow: 2px 2px 0 var(--ink); opacity: 0; animation: cmtHint .4s var(--spring) 1.5s both, cmtWobble 2.4s ease-in-out 1.9s infinite; }
.cmt-stage.is-taken .cmt-hint, .cmt-stage.is-out .cmt-hint { animation: none; opacity: 0; transition: opacity .3s; }

/* Halo derrière la comète */
.cmt-halo { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; left: var(--x); top: var(--y); opacity: 0;
  background: radial-gradient(circle, #fff1c48c 0%, #ffb34738 45%, #ffb34700 70%); animation: cmtHalo 1.2s ease-out 1.4s both, cmtBreath 1.6s ease-in-out 2.6s infinite alternate; }

/* La comète : .cmt-comet fait le piqué, .cmt-bob le flottement, .cmt-head la pulsation */
.cmt-comet { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; pointer-events: none; animation: cmtDive 1.6s cubic-bezier(.12, .9, .3, 1) 1s both; }
.cmt-bob { position: absolute; left: 0; top: 0; animation: cmtBob 2.4s ease-in-out 2.6s infinite; }
.cmt-trails { position: absolute; left: -40px; top: -180px; width: 460px; height: 220px; overflow: visible; transition: opacity .25s ease-out; }
.cmt-head { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto;
  border-radius: 50%; animation: cmtPulse .6s ease-in-out 2.6s infinite alternate; -webkit-tap-highlight-color: transparent; }
.cmt-head:focus-visible { outline: 3px dashed var(--sun); outline-offset: -20px; }
.cmt-head .glow { position: absolute; inset: 5px; border-radius: 50%; background: #5cc8ff99; filter: blur(26px); }
.cmt-head .glow2 { position: absolute; inset: 45px; border-radius: 50%; background: #ffffffe6; filter: blur(10px); }
.cmt-head .core { position: absolute; inset: 60px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #e8f7ff 60%, #8fdcff 100%); }
.cmt-head .spark { position: absolute; inset: 45px; animation: cmtSpin 7.4s linear infinite; }
.cmt-stage.is-grab .cmt-head { animation: none; transform: scale(.8); transition: transform .1s ease-in; }

/* Ondes « clique-moi » */
.cmt-ring { position: absolute; left: var(--x); top: var(--y); width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 3px solid #fff; opacity: 0;
  animation: cmtRing 1.6s ease-out 2.8s infinite; }
.cmt-ring.r2 { border-color: var(--sun); animation-delay: 3.15s; }
.cmt-stage.is-taken .cmt-ring, .cmt-stage.is-out .cmt-ring, .cmt-stage.is-taken .cmt-halo, .cmt-stage.is-out .cmt-halo { animation: none; opacity: 0; transition: opacity .3s; }

/* Arrivée en cours de route (onglet ouvert ou « Y aller » pendant l'attente) : tout est déjà en place */
.cmt-stage.is-waiting .cmt-comet, .cmt-stage.is-waiting .cmt-halo { animation-delay: -10s; }
.cmt-stage.is-waiting .cmt-bob, .cmt-stage.is-waiting .cmt-head, .cmt-stage.is-waiting .cmt-ring, .cmt-stage.is-waiting .cmt-hint { animation-delay: 0s, 0s; }
.cmt-stage.is-waiting .cmt-ring.r2 { animation-delay: .35s; }
.cmt-stage.is-waiting .cmt-dim, .cmt-stage.is-waiting .cmt-gold { transition-delay: 0s; }

/* Capture : la tête éclate, les traînées s'effacent, 2 fragments repartent, pluie d'éclats, +50 */
.cmt-stage.is-taken .cmt-trails { opacity: 0; }
.cmt-stage.is-taken .cmt-head { pointer-events: none; animation: cmtBurst .35s ease-out both; }
.cmt-stage.is-taken .cmt-bob { animation-play-state: paused; }
.cmt-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.cmt-stage.is-taken .cmt-flash { animation: cmtFlash .5s ease-out both; }
.cmt-frag { position: absolute; left: var(--x); top: var(--y); width: 220px; height: 130px; opacity: 0; overflow: visible; }
.cmt-frag.f-blue { margin: -10px 0 0 -20px; }
.cmt-frag.f-pink { margin: -10px 0 0 -200px; }
.cmt-stage.is-taken .cmt-frag.f-blue { animation: cmtFragB 1s ease-out both; }
.cmt-stage.is-taken .cmt-frag.f-pink { animation: cmtFragP 1s ease-out both; }
.cmt-shard { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 22px; margin: -11px 0 0 -8px; opacity: 0; }
.cmt-stage.is-taken .cmt-shard { animation: cmtShard 1.5s cubic-bezier(.2, .8, .3, 1) both; }
.cmt-plus { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -150%); font-family: var(--font-display); font-size: clamp(34px, 7vw, 48px);
  color: var(--coin, #8fdcff); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink), 0 0 20px #fffc; opacity: 0; white-space: nowrap; }
.cmt-stage.is-mine .cmt-plus { animation: cmtPlus 1.75s ease-out .15s both; }
.cmt-stage.is-gone .cmt-comet { opacity: 0; transform: translate(-30vw, -20vh) scale(.5); transition: opacity .9s ease-in, transform .9s ease-in; }

/* Secousses de l'écran (arrivée, puis capture) */
#app.cmt-shake { animation: cmtShake .35s ease-in-out; }
#app.cmt-shake-l { animation: cmtShakeL .4s ease-in-out; }

/* Bandeau (autre onglet, ou jeu ouvert) et annonce pour tous */
.cmt-banner { position: fixed; left: 50%; top: 10px; z-index: 26; transform: translate(-50%, -150%); width: min(460px, calc(100% - 24px));
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px 14px; border-radius: 16px; background: #1b1638f2; color: var(--surface);
  border: 3px solid var(--sun); box-shadow: 4px 5px 0 var(--ink), 0 0 24px #5cc8ff80; transition: transform .45s var(--spring); overflow: hidden; }
.cmt-banner.is-in { transform: translate(-50%, 0); }
.cmt-banner b { font-family: var(--font-display); font-weight: 400; font-size: 15px; flex: 1; line-height: 1.2; }
.cmt-banner .btn { flex: none; padding: 8px 14px; font-size: 14px; }
.cmt-banner .bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--sun); width: 100%; transform-origin: left; }
.cmt-news { position: fixed; left: 50%; top: 14px; z-index: 27; transform: translate(-50%, -180%); display: flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 12px; border-radius: 16px; background: var(--surface); color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  max-width: calc(100% - 24px); transition: transform .45s var(--spring); }
.cmt-news.is-in { transform: translate(-50%, 0); }
.cmt-news.is-out { transform: translate(-50%, -180%); transition: transform .4s ease-in; }
.cmt-news b { display: block; font-weight: 900; font-size: 17px; }
.cmt-news small { display: block; color: var(--ink-2); font-size: 12.5px; }

@keyframes cmtDrop { from { opacity: 0; transform: translateY(-90px) scale(2.6) rotate(25deg); filter: blur(10px); } }
@keyframes cmtHint { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cmtWobble { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes cmtHalo { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes cmtBreath { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes cmtDive { from { transform: translate(70vw, -75vh) scale(.6); } to { transform: none; } }
@keyframes cmtBob { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-12px, -10px); } 60% { transform: translate(6px, 6px); } 80% { transform: translate(0, -8px); } }
@keyframes cmtPulse { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes cmtSpin { to { transform: rotate(-540deg); } }
@keyframes cmtRing { 0% { opacity: 1; transform: scale(1); } 45% { opacity: 0; transform: scale(2.3); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes cmtBurst { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cmtFlash { 0% { opacity: 0; } 10% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cmtFragB { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(-55vw, -42vh); } }
@keyframes cmtFragP { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(55vw, -42vh); } }
@keyframes cmtShard { 0% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .6)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.08), calc(var(--dy) + 60px)) rotate(var(--r)); } }
@keyframes cmtPlus { 0% { opacity: 0; transform: translate(-50%, -150%) scale(.3); } 17% { opacity: 1; transform: translate(-50%, -150%) scale(1.25); }
  29% { transform: translate(-50%, -150%) scale(1); } 71% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-150% - 50px)); } }
@keyframes cmtShake { 20% { transform: translate(7px, -4px); } 40% { transform: translate(-6px, 6px); } 60% { transform: translate(4px, -3px); } 80% { transform: translate(-3px, 2px); } }
@keyframes cmtShakeL { 15% { transform: translate(12px, -7px); } 30% { transform: translate(-10px, 11px); } 45% { transform: translate(7px, -6px); } 60% { transform: translate(-5px, 4px); } 80% { transform: translate(2px, -1px); } }

/* Moins d'animations : la comète arrive en fondu, sans piqué, secousse, lettres qui tombent ni flottement */
@media (prefers-reduced-motion: reduce) {
  .cmt-comet { animation: cmtFade .6s ease-out 1s both; }
  .cmt-bob, .cmt-head, .cmt-head .spark, .cmt-ring, .cmt-halo, .cmt-hint { animation: none !important; }
  .cmt-halo, .cmt-hint { opacity: 1; }
  .cmt-title .l { animation: cmtFade .5s ease-out .3s both; }
  #app.cmt-shake, #app.cmt-shake-l { animation: none; }
  .cmt-stage.is-taken .cmt-frag, .cmt-stage.is-taken .cmt-shard { animation: none; }
  .cmt-stage.is-taken .cmt-head { animation: cmtFadeOut .4s ease-out both; }
}
@keyframes cmtFade { from { opacity: 0; } }
@keyframes cmtFadeOut { to { opacity: 0; } }