/* guez.io : rail de lecture + guerrier du marquee en rotation (assets/anim/guez-scroll.js), toutes les pages.
   2026-10-24, orc 2026-10-28, rotation 4 personnages 2026-10-28 (lot marquee-rotation-20261028) : ce fichier = base commune
   du rail + bulle ; le style propre au personnage du créneau est dans assets/anim/marquee/<nom>.css (chargé par le JS).
   Sous la sidebar (z45), le ticker Twitch (z48), le bouton de scroll (z210) et les modales. Aucun clic intercepté.
   Coins carrés, pas de dégradé / halo / flou. */
.gz-mrail {
  position: fixed; left: 0; right: 84px; bottom: env(safe-area-inset-bottom, 0px);
  height: 40px; /* personnage 38 px max + barre 2 px : rien ne passe sous le ticker */ z-index: 38; pointer-events: none; opacity: 0; visibility: hidden; contain: layout style;
}
.gz-mrail * { pointer-events: none !important; border-radius: 0 !important; }
.gz-mrail.is-ready { opacity: 1; visibility: visible; transition: opacity .25s ease; }
/* masqué aussi derrière la fenêtre d'accueil invités (html.welcome-modal-open, page d'accueil) */
.gz-mrail.is-flat, html.guez-rail-open .gz-mrail, html.player-is-loading .gz-mrail, html.welcome-modal-open .gz-mrail { opacity: 0; visibility: hidden; }
.gz-mrail__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ff8000; transform-origin: 0 50%; transform: scaleX(0); }
.gz-mrail__walker { position: absolute; left: 0; bottom: 2px; will-change: transform; }
.gz-mrail__flip, .gz-mrail__hop { position: relative; width: 100%; height: 100%; }
.gz-mrail.is-back .gz-mrail__flip { transform: scaleX(-1); }
.gz-mrail__hop.is-hop { animation: gzChHop .5s cubic-bezier(.3, .7, .4, 1); }
.gz-ch { position: absolute; inset: 0; transform-origin: 50% 100%; }
.gz-ch svg, .gz-ch img { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.gz-ch__z { position: absolute; right: -7px; top: -6px; opacity: 0; font: 700 9px/1 Rubik, system-ui, sans-serif; color: #ff8000; }
.gz-mrail.is-asleep .gz-ch__z { opacity: 1; animation: gzChZ 2.2s ease-in-out infinite; }
.gz-mrail.is-top .gz-mrail__walker { opacity: .55; }
/* page courte (pas de défilement) avec bulles prévues : personnage posé au début du rail, barre vide */
.gz-mrail.is-short .gz-mrail__fill { opacity: 0; }

/* bulle d'info / de dialogue : carrée, sombre, bordure 1px, filet orange ; posée AU-DESSUS du rail (bottom > 40 px),
   donc jamais sur la barre Twitch. Position X bornée au rail en JS. */
.gz-say {
  position: absolute; left: 0; bottom: 47px; max-width: 190px; width: max-content;
  padding: 5px 8px 6px; background: #0e0e10; border: 1px solid #1a1a1e; border-left: 2px solid #ff8000;
  font: 500 11px/1.3 Rubik, system-ui, sans-serif; color: #e9e9ec; letter-spacing: 0;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s;
}
.gz-say__tail { position: absolute; left: 0; bottom: 41px; width: 1px; height: 6px; background: #ff8000; opacity: 0; visibility: hidden; }
.gz-mrail.has-say .gz-say, .gz-mrail.has-say .gz-say__tail { opacity: 1; visibility: visible; transition: opacity .16s ease; }
html.guez-rail-open .gz-say { display: none; }

@keyframes gzChHop { 0% { transform: translateY(0) scale(1.08, .9); } 35% { transform: translateY(-9px) scale(.96, 1.06); } 70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
@keyframes gzChStep { 0% { transform: translateY(0); } 100% { transform: translateY(-1.5px); } }
@keyframes gzChZ { 0% { transform: translate(0, 2px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translate(3px, -5px); opacity: 0; } }
@media (min-width: 768px) {
  body:has(.guez-rail) .gz-mrail { left: 200px; }
  html.guez-rail-collapsed body:has(.guez-rail) .gz-mrail { left: 56px; }
}
@media (max-width: 767px) {
  .gz-mrail { right: calc(5.625rem + 12px + env(safe-area-inset-right, 0px)); }
  .gz-say { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .gz-mrail.is-ready, .gz-say, .gz-mrail.has-say .gz-say { transition: none; }
  .gz-mrail__walker { will-change: auto; }
  .gz-mrail *, .gz-mrail *::before, .gz-mrail *::after { animation: none !important; transition: none !important; }
  .gz-mrail.is-asleep .gz-ch__z { opacity: 1; }
}
@media print { .gz-mrail { display: none !important; } }