/* Jornada Persol — fase 6: faixa do nível em "Meu perfil" (abre a Jornada) e a página da Jornada (origem: Persol)
   (Meu nível · Liga do mês · Temporada). Usa os tokens de reset.css. Só aparece para quem participa
   (em teste: só admin). A barra/animações da Pergunta rápida e a moldura da foto ficam em quiz.css. */

/* ---- Faixa do nível em "Meu perfil": um botão discreto, sem poluir o modal ---- */

.profile-modal-jornada {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 8px 9px 10px;
  color: var(--green-900);
  text-align: left;
  background: var(--green-050);
  border: 1px solid var(--line);
  border-radius: 14px;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-modal-jornada[hidden] { display: none; }

.profile-modal-jornada:hover {
  background: var(--green-100);
  border-color: var(--green-600);
}

.profile-modal-jornada:focus-visible {
  outline: 3px solid rgba(91, 0, 204, 0.45);
  outline-offset: 2px;
}

.pmj-escudo { flex: 0 0 auto; line-height: 0; }

.pmj-txt {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.pmj-linha {
  font-size: 13px;
  font-weight: 800;
}

.pmj-barra {
  display: block;
  height: 5px;
  overflow: hidden;
  background: var(--white);
  border-radius: 999px;
}

.pmj-barra > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green-600), #2f8f5b);
  border-radius: inherit;
}

.pmj-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pmj-seta {
  flex: 0 0 auto;
  color: var(--green-700);
  font-size: 22px;
}

/* O selo do escudo na barra do topo também abre a Jornada */
.profile-button .jp-selo {
  pointer-events: auto;
  cursor: pointer;
}

/* ---- Página da Jornada ---- */

body.jp-pagina-aberta { overflow: hidden; }

.jp-pagina {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.jp-pagina[hidden] { display: none; }

.jp-pagina-fundo {
  position: absolute;
  inset: 0;
  background: rgba(18, 30, 25, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.jp-pagina-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.28);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.jp-pagina.is-visible .jp-pagina-fundo { opacity: 1; }
.jp-pagina.is-visible .jp-pagina-caixa { opacity: 1; transform: none; }

.jp-pagina-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 10px;
}

.jp-pagina-topo h2 {
  margin: 0;
  color: var(--green-900);
  font-size: 19px;
  font-weight: 800;
}

.jp-pagina-x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.jp-pagina-x:hover { background: var(--green-050); }

.jp-pagina-abas {
  display: flex;
  gap: 6px;
  margin: 0 22px;
  padding: 4px;
  background: var(--green-050);
  border-radius: 999px;
}

.jp-pagina-aba {
  flex: 1;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--green-900);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.jp-pagina-aba[aria-selected="true"] {
  color: var(--white);
  background: var(--green-900);
}

.jp-pagina-aba:focus-visible,
.jp-pagina-x:focus-visible,
.jp-pg-tentar:focus-visible {
  outline: 3px solid rgba(91, 0, 204, 0.45);
  outline-offset: 2px;
}

.jp-pagina-corpo {
  flex: 1;
  min-height: 240px;
  padding: 16px 22px 24px;
  overflow-y: auto;
  outline: none;
}

.jp-pg-carregando,
.jp-pg-vazio {
  margin: 10px 0;
  color: var(--muted);
  font-size: 13px;
}

.jp-pg-erro {
  display: grid;
  justify-items: start;
  gap: 8px;
  color: var(--green-900);
  font-size: 14px;
}

.jp-pg-tentar {
  padding: 8px 16px;
  color: var(--white);
  background: var(--green-900);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.jp-pg-titulo { margin: 20px 0 8px; }
.jp-pg-titulo:first-child { margin-top: 4px; }

.jp-pg-titulo h3 {
  margin: 0;
  color: var(--green-900);
  font-size: 15px;
  font-weight: 800;
}

.jp-pg-titulo p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.jp-pg-nota {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.jp-pg-barra {
  height: 8px;
  overflow: hidden;
  background: var(--green-050);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.jp-pg-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-600), #2f8f5b);
  border-radius: inherit;
}

/* Meu nível */
.jp-pg-heroi {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--green-050);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.jp-pg-escudo { flex: 0 0 auto; line-height: 0; }

.jp-pg-heroi-txt {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.jp-pg-heroi-nome {
  margin: 0;
  color: var(--green-900);
  font-size: 20px;
  font-weight: 800;
}

.jp-pg-heroi-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.jp-pg-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.jp-pg-num {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.jp-pg-num strong {
  color: var(--green-900);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.jp-pg-num span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.jp-pg-cats,
.jp-pg-hist,
.jp-pg-ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jp-pg-cat {
  display: grid;
  grid-template-columns: minmax(90px, 30%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}

.jp-pg-cat-nome {
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-pg-cat-xp {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jp-pg-hist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.jp-pg-hist-item:last-child { border-bottom: 0; }

.jp-pg-hist-data {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jp-pg-hist-txt {
  overflow: hidden;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-pg-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jp-pg-pill.is-ok { color: #1f6b43; background: rgba(47, 143, 91, 0.12); }
.jp-pg-pill.is-quase { color: #8a5a10; background: rgba(240, 190, 90, 0.18); }

/* Rankings (Liga e Temporada) */
.jp-pg-linha {
  display: grid;
  grid-template-columns: 34px auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
}

.jp-pg-linha + .jp-pg-linha { margin-top: 2px; }

.jp-pg-linha.is-eu {
  background: var(--green-050);
  box-shadow: inset 0 0 0 1px var(--green-600);
}

.jp-pg-pos {
  color: var(--green-900);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.jp-pg-av {
  display: inline-flex;
  padding: 4px;
}

.jp-pg-av .jp-selo {
  right: 0;
  bottom: 0;
}

.jp-pg-quem {
  display: grid;
  min-width: 0;
}

.jp-pg-nome {
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-pg-nivel {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.jp-pg-xp {
  color: var(--green-900);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jp-pg-reticencias {
  padding: 0 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.jp-pg-minhas {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--green-050);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.jp-pg-minhas strong { color: var(--green-900); font-size: 14px; }
.jp-pg-minhas span { color: var(--muted); font-size: 12px; font-weight: 600; }

.jp-pg-catgrade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.jp-pg-catcard {
  padding: 10px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.jp-pg-catcard h4 {
  margin: 0 0 4px 10px;
  color: var(--green-900);
  font-size: 13px;
  font-weight: 800;
}

.jp-pg-ranking.is-compacto .jp-pg-linha {
  grid-template-columns: 28px auto 1fr auto;
  padding: 4px 8px;
}

/* Celular: a página ocupa a tela, abas e alvos grandes */
@media (max-width: 560px) {
  .jp-pagina { padding: 0; place-items: end stretch; }

  .jp-pagina-caixa {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .jp-pagina-topo { padding: 16px 16px 8px; }
  .jp-pagina-abas { margin: 0 16px; }
  .jp-pagina-aba { font-size: 12.5px; padding: 8px 6px; }
  .jp-pagina-corpo { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  .jp-pg-numeros { grid-template-columns: repeat(2, 1fr); }
  .jp-pg-heroi-nome { font-size: 18px; }
  .jp-pg-catgrade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .jp-pagina-fundo,
  .jp-pagina-caixa { transition: none; }
}

/* ---- Fase 8: o filme da Retrospectiva (tela cheia, estilo stories) ---- */

body.rt-aberto { overflow: hidden; }

.rt {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: radial-gradient(120% 90% at 20% 0%, #2f6b57 0%, var(--green-900) 55%, #0d1d19 100%);
  user-select: none;
}

.rt-barras {
  display: flex;
  gap: 5px;
  padding: max(14px, env(safe-area-inset-top)) 56px 0 16px;
}

.rt-barra {
  flex: 1;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.rt-barra > i {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  border-radius: inherit;
}

.rt-x {
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.rt-palco-cenas {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  cursor: pointer;
}

.rt-cena {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(560px, 100%);
  text-align: center;
  animation: rt-entra 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rt-sobre {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rt-grande {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 800;
  line-height: 1.15;
}

.rt-grande.rt-menor { font-size: clamp(18px, 4.5vw, 24px); }

.rt-sub {
  margin: 0;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.5;
}

.rt-contador {
  margin: 0;
  color: #f6d77a;
  font-size: clamp(34px, 9vw, 54px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rt-grafico-box { width: 100%; }
.rt-svg { width: 100%; height: auto; overflow: visible; }

.rt-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.rt-card {
  display: grid;
  gap: 4px;
  padding: 18px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
}

.rt-card strong { font-size: clamp(24px, 6vw, 32px); font-variant-numeric: tabular-nums; }
.rt-card span { color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 700; }

.rt-destaque {
  margin: 4px 0 0;
  padding: 8px 14px;
  color: var(--green-900);
  background: #f6d77a;
  border-radius: 999px;
  font-weight: 800;
}

.rt-numero-gigante {
  margin: 0;
  color: #f6d77a;
  font-size: clamp(80px, 22vw, 140px);
  font-weight: 800;
  line-height: 1;
  animation: rt-estoura 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.rt-palco {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  width: 100%;
}

.rt-degrau {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 13px;
}

.rt-degrau strong { font-size: 15px; }
.rt-degrau span { color: rgba(255, 255, 255, 0.8); }
.rt-medalha { font-size: 30px; }

.rt-bloco {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 6px;
  color: var(--green-900);
  background: linear-gradient(180deg, #f6d77a, #c9962b);
  border-radius: 12px 12px 0 0;
  font-size: 22px;
  font-weight: 800;
  transform-origin: bottom;
  animation: rt-sobe 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rt-degrau-1 .rt-bloco { height: 130px; animation-delay: 0.9s; }
.vr .rt-degrau-1 .rt-bloco { height: 150px; }
.vr .rt-degrau-2 .rt-bloco { height: 112px; }
.vr .rt-degrau-3 .rt-bloco { height: 86px; }
.rt-degrau-2 .rt-bloco { height: 95px; background: linear-gradient(180deg, #e4e9ee, #9aa6b2); animation-delay: 0.45s; }
.rt-degrau-3 .rt-bloco { height: 70px; background: linear-gradient(180deg, #e7b38a, #a8642f); }

.rt-lista {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-lista li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.rt-lista span:last-child { color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.rt-ins { line-height: 0; }

.rt-ins-grande {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  filter: drop-shadow(0 18px 45px rgba(227, 184, 78, 0.4));
  animation: rt-carimbo 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.rt-escudo { line-height: 0; }

.rt-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.rt-btn {
  min-height: 48px;
  padding: 12px 24px;
  color: var(--green-900);
  background: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.rt-btn-sec {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.rt-btn:focus-visible,
.rt-x:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* ---- Virada da Liga de lançamento (V.362) — usa o palco .rt e o pódio .rt-palco/.rt-bloco ---- */
.vr-palco { position: absolute; inset: 0; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(60px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); display: grid; justify-items: center; align-content: start; }
.vr-cena { gap: 16px; width: min(600px, 100%); }
.vr-confete { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.vr-podio { max-width: 520px; margin-top: 4px; }
.vr-degrau { position: relative; }
.vr-avatares { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; max-width: 100%; row-gap: 6px; }
.vr-medalha { line-height: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.vr .rt-degrau .rt-bloco { position: relative; display: grid; place-items: center; }
.vr-lugar { font-size: 26px; font-weight: 800; line-height: 1; transform: translateY(-6px); }
.vr .rt-bloco .vr-xp { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 12px; font-weight: 800; color: rgba(10, 10, 10, 0.85); }
.vr-avatares--varios .vr-av { margin-left: -8px; }
.vr-avatares--varios .vr-av:first-child { margin-left: 0; }
.vr-av { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 2px var(--green-900); position: relative; pointer-events: auto; cursor: default; }
/* foto cresce no mouse; o balão é um elemento só, posicionado por JS (V.373) */
.vr-av { transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1.3), box-shadow 0.18s; }
.vr-av:hover, .vr-av:focus-visible { transform: scale(1.22); z-index: 6; box-shadow: 0 0 0 2px var(--green-900), 0 0 0 5px rgba(242, 193, 78, 0.9), 0 8px 18px rgba(0, 0, 0, 0.4); outline: none; }
.vr-balao { position: fixed; z-index: 9; transform: translateY(-100%) translateY(-6px) scale(0.96); opacity: 0; pointer-events: none; transition: opacity 0.16s, transform 0.16s;
  display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; color: #fff; text-align: left;
  background: linear-gradient(160deg, rgba(31, 90, 58, 0.96), rgba(13, 29, 25, 0.98)); border: 1px solid rgba(242, 193, 78, 0.45); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); }
.vr-balao.is-aberto { opacity: 1; transform: translateY(-100%) scale(1); }
.vr-balao.is-abaixo { transform: translateY(6px) scale(0.96); }
.vr-balao.is-abaixo.is-aberto { transform: none; }
.vr-balao::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: #0f2a20; border-right: 1px solid rgba(242, 193, 78, 0.45); border-bottom: 1px solid rgba(242, 193, 78, 0.45); transform: rotate(45deg); }
.vr-balao.is-abaixo::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.vr-balao-topo { display: flex; gap: 10px; align-items: center; }
.vr-balao-av { width: 42px; height: 42px; font-size: 14px; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.8); }
.vr-balao-txt { display: grid; gap: 2px; min-width: 0; }
.vr-balao-txt strong { font-size: 14px; line-height: 1.2; }
.vr-balao-sub { font-size: 12px; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.vr-balao-chip { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 4px 10px 4px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--green-900); background: linear-gradient(180deg, #f6d77a, #e2b23c); }
.vr-balao-chip .material-symbols-rounded { font-size: 16px; }
/* classificação da unidade (V.374) */
.vr-titulo-un { font-size: clamp(22px, 5vw, 30px); }
/* seletor de visão da simulação (só admin): canto inferior esquerdo, fora do layout */
.vr-visao { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 8; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); }
.vr-visao-rotulo { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); padding: 0 6px; }
.vr-visao-btn { font: inherit; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; }
.vr-visao-btn.is-ativa { background: #f2c14e; color: var(--green-900); }
.vr-unidades { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vr-un { font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; cursor: pointer; }
.vr-un.is-ativa { background: #f2c14e; border-color: #f2c14e; color: var(--green-900); }
.vr-cena--un { width: 100%; }
.vr-arena { position: relative; width: 100%; margin-top: 6px; }
.vr-arena .vr-podio { max-width: 520px; margin: 0 auto; }
.vr-cena--un .rt-bloco { animation: rt-sobe 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vr-cena--un .rt-degrau-3 .rt-bloco { animation-delay: 0.2s, 2s; } .vr-cena--un .rt-degrau-2 .rt-bloco { animation-delay: 0.6s, 2s; } .vr-cena--un .rt-degrau-1 .rt-bloco { animation-delay: 1s, 2s; }
.vr-cena--un .rt-degrau-3 .rt-medalha { animation-delay: 0.7s; } .vr-cena--un .rt-degrau-2 .rt-medalha { animation-delay: 1.1s; } .vr-cena--un .rt-degrau-1 .rt-medalha { animation-delay: 1.5s; }
.vr-cena--un .vr-av { --base: 0.6s; } .vr-cena--un .rt-degrau-2 .vr-av { --base: 1s; } .vr-cena--un .rt-degrau-1 .vr-av { --base: 1.4s; }
.vr-podio--un .rt-degrau-1 .rt-bloco { height: 120px; } .vr-podio--un .rt-degrau-2 .rt-bloco { height: 92px; } .vr-podio--un .rt-degrau-3 .rt-bloco { height: 70px; }
.vr-solto { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; animation: vr-cai 0.7s calc(1.8s + var(--k, 0) * 0.08s) cubic-bezier(0.2, 0.9, 0.3, 1.3) both; z-index: 2; }
.vr-arena.is-estreita .vr-solto { transform: translate(-50%, 0); }
.vr-solto .vr-av { width: 40px; height: 40px; font-size: 14px; --base: 0s; animation: none; }
.vr-solto-xp { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.35); padding: 1px 6px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .vr-solto, .vr-cena--un .rt-bloco, .vr-cena--un .rt-medalha { animation: none; } }
.rt-degrau-1 .vr-av { width: 56px; height: 56px; font-size: 19px; }
.vr-av--mais { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 800; }
.vr-xp { font-size: 12px; font-variant-numeric: tabular-nums; }
.vr-cartao { width: 100%; display: grid; gap: 10px; padding: 16px 18px; text-align: left; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; animation: rt-entra 0.6s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vr-h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; }
.vr-textos { display: grid; gap: 12px; }
.vr-cartao { gap: 14px; }
.vr-p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 14.5px; line-height: 1.6; max-width: 56ch; }
.vr-p--destaque { color: #fff; }
.vr-p--destaque b { color: #f2c14e; }
.vr-regras { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vr-regras li { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; font-size: 14px; }
.vr-regras b { color: #f2c14e; font-size: 15px; font-variant-numeric: tabular-nums; position: relative; display: inline-block; }
/* "O que vale" com a animação de ponto ganho: o valor dá um pulo e um "+15" sobe e some (dona, 30/10) */
.vr .vr-ganho { animation: vr-ganha 0.7s calc(5.2s + var(--k, 0) * 0.55s) cubic-bezier(0.2, 0.9, 0.2, 1.4) both; }
.vr .vr-ganho::after { content: attr(data-ganho); position: absolute; left: 50%; top: -4px; transform: translate(-50%, 0); color: #7be0a6; font-weight: 800; font-size: 16px; opacity: 0; pointer-events: none; animation: vr-sobe-ponto 1.3s calc(5.25s + var(--k, 0) * 0.55s) ease-out both; }
@keyframes vr-ganha { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vr-sobe-ponto { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
.vr-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vr-btn { font: inherit; font-weight: 800; font-size: 14px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; cursor: pointer; }
.vr-btn--principal { background: #7be0a6; border-color: #7be0a6; color: #0f2a20; }
.vr-btn:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.vr-nota { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.65); }
/* ritmo (dona, 30/10): a tela aparece parada; o título "estoura"; os blocos sobem um por vez (3º, 2º, 1º); a medalha cai
   em cima de cada bloco; as pessoas aparecem uma a uma; os números de XP contam; o 1º lugar brilha e tem estrelas; o quadro
   das regras vem por último. Luzes giram no fundo o tempo todo. (V.368 — dona: "precisa de mais animação") */
.vr { overflow: hidden; display: block; }
.vr::before { content: ''; position: absolute; inset: -45%; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(123, 224, 166, 0.16) 24%, transparent 32% 52%, rgba(242, 193, 78, 0.14) 60%, transparent 68% 100%);
  animation: vr-gira 22s linear infinite; }
.vr .rt-x { z-index: 3; }
@keyframes vr-gira { to { transform: rotate(360deg); } }
.vr-titulo { animation: vr-estoura 0.9s 0.25s cubic-bezier(0.2, 0.9, 0.2, 1.25) both; text-shadow: 0 2px 28px rgba(123, 224, 166, 0.45); }
@keyframes vr-estoura { from { transform: scale(0.55); opacity: 0; } }
.vr .rt-bloco { position: relative; overflow: hidden; animation: rt-sobe 1.1s cubic-bezier(0.16, 1, 0.3, 1) both, vr-pulsa 2.6s ease-in-out 4.2s infinite; }
@keyframes vr-pulsa { 0%, 100% { transform: scaleY(1); filter: brightness(1); } 50% { transform: scaleY(1.035); filter: brightness(1.12); } }
.vr .rt-degrau-3 .rt-bloco { animation-delay: 1.1s, 4.2s; }
.vr .rt-degrau-2 .rt-bloco { animation-delay: 1.9s, 4.2s; }
.vr .rt-degrau-1 .rt-bloco { animation-delay: 2.7s, 4.2s; }
.vr .rt-degrau-1 .rt-bloco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); transform: translateX(-130%); animation: vr-brilha 2.8s 4.6s ease-in-out infinite; }
@keyframes vr-brilha { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(130%); } }
.vr .rt-medalha { animation: vr-cai 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
@keyframes vr-cai { from { transform: translateY(-46px) scale(0.3); opacity: 0; } 70% { transform: translateY(5px) scale(1.1); opacity: 1; } to { transform: none; opacity: 1; } }
.vr .rt-degrau-3 .rt-medalha { animation-delay: 1.9s; }
.vr .rt-degrau-2 .rt-medalha { animation-delay: 2.7s; }
.vr .rt-degrau-1 .rt-medalha { animation-delay: 3.5s; }
.vr .vr-av { --base: 2s; animation: vr-estoura 0.55s calc(var(--base) + var(--i, 0) * 0.13s) cubic-bezier(0.2, 0.9, 0.2, 1.35) both; }
.vr .rt-degrau-2 .vr-av { --base: 2.8s; }
.vr .rt-degrau-1 .vr-av { --base: 3.6s; }

.vr .rt-degrau-1 { position: relative; }
.vr .rt-degrau-1::before, .vr .rt-degrau-1::after { content: '✦'; position: absolute; top: 6px; color: #f2c14e; font-size: 18px; pointer-events: none; animation: vr-pisca 1.6s 4.4s ease-in-out infinite both; }
.vr .rt-degrau-1::before { left: 4px; }
.vr .rt-degrau-1::after { right: 4px; top: 30px; font-size: 13px; animation-delay: 5.1s; }
@keyframes vr-pisca { 0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(25deg); } }
.vr .vr-cartao, .vr .vr-acoes, .vr .vr-nota { animation: rt-entra 0.7s 4.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vr .vr-btn--principal { animation: vr-chama 2.2s 6s ease-in-out infinite; }
@keyframes vr-chama { 0%, 100% { box-shadow: 0 0 0 0 rgba(123, 224, 166, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(123, 224, 166, 0); } }
@media (prefers-reduced-motion: reduce) { .vr::before, .vr-titulo, .vr .rt-bloco, .vr .rt-bloco::after, .vr .rt-medalha, .vr .vr-av, .vr .rt-degrau-1::before, .vr .rt-degrau-1::after, .vr .vr-cartao, .vr .vr-acoes, .vr .vr-nota, .vr .vr-btn--principal, .vr .vr-ganho, .vr .vr-ganho::after { animation: none; } }

@keyframes rt-entra { from { opacity: 0; transform: translateY(16px); } }
@keyframes rt-estoura { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.12); } }
@keyframes rt-sobe { from { transform: scaleY(0); } }
@keyframes rt-carimbo { 0% { transform: translateY(-80px) scale(1.6); opacity: 0; } 70% { transform: scale(0.94); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rt-cena, .rt-numero-gigante, .rt-bloco, .rt-ins-grande { animation: none; }
}

/* ---- Fase 9: insígnias no "Meu nível" e junto do nome nos rankings ---- */

.jp-pg-insignias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jp-pg-insignias li {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 96px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.jp-pg-nome-ins {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 0;
}

.jp-pg-rever {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--green-900);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* O conteúdo das cenas nunca fica mais largo que a tela (celular) */
.rt-palco-cenas { grid-template-columns: minmax(0, 1fr); }
.rt-cena { min-width: 0; max-width: 100%; }
.rt-ins-item { display: grid; justify-items: center; gap: 6px; width: 132px; margin: 0; }
.rt-ins-item figcaption { color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1.3; }

/* Segurando a tela: a cena fica congelada (sem seleção de texto nem menu do celular) */
.rt { -webkit-touch-callout: none; touch-action: manipulation; }
.rt.is-pausado .rt-barras { opacity: 0.55; }

/* ---- Arte v2 dos escudos e insígnias (V.229): brilho que passa e aura (cópia de ESCUDO_V2_CSS e INSIGNIA_V2_CSS) ---- */
.jp2-brilho { animation: jp2-passa 3.4s ease-in-out infinite; }
.jp2-aura { transform-origin: 50px 52px; animation: jp2-pulsa 3s ease-in-out infinite; }
@keyframes jp2-passa { 0%, 60% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(150px); } }
@keyframes jp2-pulsa { 0%, 100% { opacity: .5; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.03); } }
.jpi2-brilho { animation: jpi2-passa 2.8s ease-in-out infinite; }
@keyframes jpi2-passa { 0%, 50% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(70px); } }
@media (prefers-reduced-motion: reduce) { .jp2-brilho, .jp2-aura, .jpi2-brilho { animation: none; } }

/* ---- Moldura da foto v2 (V.235, 09/10/2026): aro desenhado em SVG (jornada/moldura.js › aroSVG), no estilo dos
   escudos v2 — fosco → bronze → prata → ouro, com rebites, pedra, aura, aro duplo, brilho, coroa e louros.
   O SVG vem pela variável --jp-aro; a caixa é 142% da foto (a foto ocupa o círculo central). A v1 (aros em CSS,
   data-jp-estilo 1–5 em quiz.css) continua valendo se voltar a arte-v1. ---- */
.avatar.jp-moldura[data-jp-estilo="v2"]::before {
  inset: -21%;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  background: var(--jp-aro) center / contain no-repeat;
}

/* Celular (10/10/2026, achado no teste do tour do perfil): na foto pequena da barra do topo (30–36 px) o selo do escudo
   cobre o meio da foto, e tocar na foto abria a Jornada em vez do "Meu perfil". Em tela de toque, a foto inteira abre o
   perfil (de lá, a faixa do nível abre a Jornada). No computador, clicar no selo continua abrindo a Jornada direto. */
@media (pointer: coarse) {
  .profile-button .jp-selo { pointer-events: none; }
}