/* Painel de conquista da Raviera (js/celebration.js).
   Escuro nos dois temas de propósito: é um aviso que passa por cima da página,
   e é o fundo escuro que faz o emblema brilhar. O acento vem da preferência da
   pessoa, então a conquista tem a cor da jornada dela. */

.rav-celebration-host {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 120; /* acima do toast (100): a conquista é o aviso mais importante */
  width: min(430px, calc(100vw - 24px));
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.rav-celebration {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 15px 20px 15px 15px;
  border: 1px solid rgba(var(--personal-accent-rgb), .42);
  border-radius: 18px;
  color: #f2f6fc;
  /* Vidro escuro com um sopro do acento no canto de onde o emblema sai. */
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--personal-accent-rgb), .34), transparent 46%),
    linear-gradient(140deg, #131a26 0%, #0b0f17 60%, #0a0d14 100%);
  box-shadow:
    0 26px 60px rgba(5, 8, 14, .5),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 34px rgba(var(--personal-accent-rgb), .18);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(26px) scale(.96);
  transition: opacity .26s ease, transform .38s cubic-bezier(.2, 1.25, .34, 1);
}
.rav-celebration.is-open { opacity: 1; transform: translateY(0) scale(1); }
.rav-celebration.is-leaving {
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  transition-duration: .24s;
}

/* Emblema: hexágono, como marca de conquista de console. O anel de luz abre uma
   vez atrás dele — é o "clique" visual do desbloqueio. */
.rav-celebration-emblem {
  position: relative;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff6d8;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .42), transparent 52%),
    linear-gradient(160deg, var(--personal-accent) 0%, color-mix(in srgb, var(--personal-accent) 55%, #1b2436) 100%);
}
.rav-celebration-emblem svg { width: 30px; height: 30px; }
.rav-celebration-emblem::after {
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border: 1px solid rgba(255, 255, 255, .3);
}
.rav-celebration.is-open .rav-celebration-emblem {
  animation: rav-emblem-in .58s cubic-bezier(.2, 1.4, .34, 1) both;
}
@keyframes rav-emblem-in {
  0% { transform: scale(.5) rotate(-24deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Nível: o número no lugar do desenho, grande e com a fonte de número. */
.rav-celebration-level {
  font-size: 27px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.rav-celebration-copy { min-width: 0; display: grid; gap: 3px; }
.rav-celebration-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--personal-accent) 62%, #fff);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rav-celebration-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}
.rav-celebration-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.2px;
}
.rav-celebration-copy small {
  color: rgba(226, 234, 246, .62);
  font-size: 12px;
  line-height: 1.45;
}

.rav-celebration-progress {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.rav-celebration-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--personal-accent), color-mix(in srgb, var(--personal-accent) 40%, #fff));
  box-shadow: 0 0 12px rgba(var(--personal-accent-rgb), .7);
}

/* Brilho diagonal atravessando uma vez. */
.rav-celebration-shine {
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: rotate(18deg);
}
.rav-celebration.is-open .rav-celebration-shine {
  animation: rav-shine .9s ease-out .28s both;
}
@keyframes rav-shine { to { left: 130%; } }

/* Barra de tempo escorrendo: mostra que o painel vai sair sozinho. */
.rav-celebration-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--personal-accent), transparent);
}
.rav-celebration.is-open .rav-celebration-timer {
  animation: rav-timer 5.2s linear both;
}
@keyframes rav-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Movimento reduzido: o painel continua aparecendo (é informação), só não se
   move nem brilha. A barra de tempo perde o sentido sem animação e sai. */
.rav-celebration.is-quiet {
  opacity: 1;
  transform: none;
  transition: none;
}
.rav-celebration.is-quiet .rav-celebration-emblem,
.rav-celebration.is-quiet .rav-celebration-shine,
.rav-celebration.is-quiet .rav-celebration-timer { animation: none; }
.rav-celebration.is-quiet .rav-celebration-shine,
.rav-celebration.is-quiet .rav-celebration-timer { display: none; }
:root[data-motion="reduzida"] .rav-celebration {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 560px) {
  .rav-celebration-host { bottom: 16px; }
  .rav-celebration { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 13px 15px 13px 12px; }
  .rav-celebration-emblem { width: 54px; height: 54px; }
  .rav-celebration-emblem svg { width: 25px; height: 25px; }
  .rav-celebration-level { font-size: 22px; }
  .rav-celebration-copy strong { font-size: 14.5px; }
}