/**
 * YouCare Game ｜ Loader Chibi (brique partagée plateforme).
 *
 * Overlay glass-soft + robot pixel art + barre de progression 6s ease-out.
 * Utilisé pour couvrir les attentes "rassurantes" (validation Turnstile,
 * soumission score, chargement leaderboard, etc.).
 *
 * Modes :
 *   .yc-loader              → fixed inset:0, couvre le viewport (défaut).
 *   .yc-loader.is-scoped    → absolute inset:0, scopé sur un conteneur.
 *
 * Cycle de vie pilotée par yc-loader.js :
 *   .is-show  → fade-in (200ms).
 *   .is-hide  → fade-out (250ms) avant retrait DOM.
 *
 * L'animation de la barre tourne en CSS pure (cubic-bezier ease-out 6s).
 * Le compteur % est animé en JS pour suivre la même courbe.
 *
 * Charte plateforme : violet #1a0f3d → #0d0820, accent rose #ec4899.
 * Police arcade Press Start 2P (auto-hostée via shared/css/fonts.css).
 */

.yc-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;

  background: rgba(13, 8, 32, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-family: 'Press Start 2P', ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.95);

  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: auto;
}

.yc-loader.is-scoped {
  position: absolute;
  z-index: 50;
}

.yc-loader.is-show {
  opacity: 1;
}

.yc-loader.is-hide {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

/* --- Stage (robot + slot challenge superposés) -------------------- */

/* Stage : zone qui héberge le robot par défaut, et qui peut basculer
 * sur le widget Turnstile cliquable au reveal (après 6s d'attente).
 * Le robot et le slot sont superposés en absolute pour que la bascule
 * ne déplace pas le layout vertical (label + barre dessous restent en
 * place pendant la transition d'opacité). */
.yc-loader-stage {
  position: relative;
  width: 200px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yc-loader-robot {
  width: 200px;
  height: 175px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55));
  animation: yc-loader-head-bob 2.8s ease-in-out infinite;
  transition: opacity 200ms ease-out;
}

/* Slot challenge : le widget Turnstile est rendu dedans dès show().
 * Invisible et inerte par défaut (Pre-Clearance silencieux passe sans
 * que le joueur ne voie quoi que ce soit). Révélé par revealChallenge()
 * via la classe .is-challenging sur l'overlay parent. Volontairement
 * monté dès le départ dans un slot in-flow (pas position:absolute) :
 * iOS Safari peut optimiser et ne pas charger les iframes offscreen.
 * Le widget Turnstile (300x65 typiquement) débordera légèrement les
 * 200px du stage, c'est volontaire — il faut qu'il soit pleinement
 * cliquable une fois révélé. */
.yc-loader-challenge-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

/* Mode challenge : le robot s'efface, le slot devient cliquable, la
 * barre de progression disparaît (incohérente avec une attente
 * humaine), le bouton Annuler apparaît. */
.yc-loader.is-challenging .yc-loader-robot {
  opacity: 0;
  pointer-events: none;
}

.yc-loader.is-challenging .yc-loader-challenge-slot {
  opacity: 1;
  pointer-events: auto;
}

.yc-loader.is-challenging .yc-loader-pbar-wrap {
  display: none;
}

/* Bouton Annuler : visible uniquement en mode challenge.
 * Ghost button minimaliste assorti à la charte arcade. */
.yc-loader-cancel {
  display: none;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}

.yc-loader-cancel:hover,
.yc-loader-cancel:focus-visible {
  color: #fff;
  border-color: #fff;
  outline: none;
}

.yc-loader.is-challenging .yc-loader-cancel {
  display: inline-block;
}

.yc-loader-robot .yc-loader-eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: yc-loader-eye-blink 3.6s infinite;
}

.yc-loader-robot .yc-loader-led {
  animation: yc-loader-status-blink 1.2s infinite;
}

.yc-loader-robot .yc-loader-led--s2 {
  animation-delay: 0.25s;
}

@keyframes yc-loader-head-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes yc-loader-eye-blink {
  0%, 92%, 100% { transform: scaleY(1);    opacity: 1; }
  94%, 98%      { transform: scaleY(0.05); opacity: 0.5; }
}

@keyframes yc-loader-status-blink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* --- Label ----------------------------------------------------------- */

.yc-loader-label {
  font-size: 11px;
  letter-spacing: 2px;
  line-height: 1.5;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  max-width: 28em;
  text-transform: uppercase;
}

/* --- Progress bar ---------------------------------------------------- */

.yc-loader-pbar-wrap {
  width: 340px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.yc-loader-pbar {
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  image-rendering: pixelated;
}

.yc-loader-pbar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: repeating-linear-gradient(
    45deg,
    #ec4899 0 6px,
    #be185d 6px 12px
  );
  animation: yc-loader-pbar-progress 6s cubic-bezier(0.05, 0.8, 0.2, 1) forwards;
}

.yc-loader-pbar-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-30px);
  animation: yc-loader-pbar-shine 1.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes yc-loader-pbar-progress {
  0%   { width: 0%; }
  100% { width: 100%; }
}

@keyframes yc-loader-pbar-shine {
  0%   { transform: translateX(0);    opacity: 0; }
  20%  {                              opacity: 1; }
  100% { transform: translateX(360px); opacity: 0; }
}

.yc-loader-pbar-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.65);
}

.yc-loader-pbar-pct {
  color: #ec4899;
}

/* --- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .yc-loader-robot,
  .yc-loader-robot .yc-loader-eye,
  .yc-loader-robot .yc-loader-led,
  .yc-loader-pbar-shine {
    animation: none !important;
  }
  .yc-loader-pbar-fill {
    animation: yc-loader-pbar-progress 6s linear forwards;
  }
}

/* --- Mobile ---------------------------------------------------------- */

@media (max-width: 480px) {
  .yc-loader-stage {
    width: 160px;
    height: 140px;
  }
  .yc-loader-robot {
    width: 160px;
    height: 140px;
  }
  .yc-loader-label {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
  .yc-loader-pbar-wrap {
    width: 280px;
  }
}