/* ==========================================================================
   Léon: mascote camaleão (substitui logo e bandeiras). Cores da página intactas.
   ========================================================================== */

/* Palco: respiração suave. Ancorada nos pés para parecer inspirar e expirar. */
.leon-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation:
    leon-breathe 4.4s ease-in-out infinite,
    leon-skin 11s ease-in-out infinite;
  will-change: transform;
}

.leon-pair {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.leon-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  user-select: none;
  pointer-events: none;
}

/* Piscada quadro a quadro (js/mascot.js controla data-lid no .leon-pair):
   exatamente um quadro visível por vez, sem fade, para não mostrar as duas
   camadas sobrepostas. Sem data-lid = olhos abertos. */
.leon-pair > .leon-layer { visibility: hidden; }
.leon-pair:not([data-lid]) > .leon-layer--open,
.leon-pair[data-lid="1"] > .leon-layer--blink1,
.leon-pair[data-lid="2"] > .leon-layer--blink2,
.leon-pair[data-lid="3"] > .leon-layer--closed {
  visibility: visible;
}

@keyframes leon-breathe {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(1.018, 1.045); }
  60%      { transform: scale(1.018, 1.045); }
}

/* Pele "viva": uma deriva mínima de matiz, como o camaleão regulando o tom */
@keyframes leon-skin {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  50%      { filter: hue-rotate(-9deg) saturate(1.08); }
}

/* --- Cabeçalho: no lugar da logo/bandeira --- */
.brand-mark.brand-mark--leon {
  width: 52px;
  height: 52px;
  margin: -6px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.brand:hover .brand-mark--leon { transform: rotate(-5deg) scale(1.06); }

/* --- Avatar redondo do Léon (idioma ativo, ranking, escolha de idioma) --- */
.leon-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.header-lang-flag:has(.leon-avatar) {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: visible;
  box-shadow: none;
}

.lang-flag:has(.leon-avatar) {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  overflow: visible;
  box-shadow: none;
}

/* Login e telas de entrada: Léon neutro perfeitamente centralizado com respiração */
.auth-brand-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 1.25rem !important;
  text-align: center !important;
  width: 100% !important;
}

.auth-brand-logo .leon-stage {
  width: 6.5rem !important;
  height: 6.5rem !important;
  margin: 0 auto !important;
  display: inline-block !important;
  transform-origin: 50% 90%;
}

.auth-brand-logo .leon-stage img,
.auth-brand-logo .leon-stage .leon-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

@media (max-width: 640px) {
  .brand-mark.brand-mark--leon { width: 44px; height: 44px; margin: -4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .leon-stage { animation: none; }
  .brand:hover .brand-mark--leon { transform: none; }
}