/* ============================================================================
   cliente-gf.css — telas novas do GAMES FUTSHOP (app do cliente)
   ----------------------------------------------------------------------------
   ORDEM DE CARGA: style.css → tokens.css → hub.css → cliente-gf.css (sempre por último).
   Só o cliente carrega este arquivo; o admin nunca o lê. Nada aqui redefine token:
   tudo é composição sobre tokens.css (escala 4px, raios 8/12/18/pílula, --fs-*,
   --dur-*/--ease-*). CSP self: zero url() remota, zero @font-face novo.

   GRAMÁTICA DE COR (a mesma do app inteiro):
     dourado  = prêmio e ação de prêmio (girar, liberar no WhatsApp, código)
     azul     = navegação, informação, progresso de jogo
     verde    = confirmação ("Pronto! A gente te avisa.", copiado)
     aço      = neutro/pausa/near-miss (nunca vermelho pra estado normal)

   MOVIMENTO — um momento autoral por tela, o resto é resposta:
     /palpites (pausa) : nenhum tique animado; o "Pronto" entra em 260ms.
     /roleta           : o giro (4s expo-out) e a revelação do prêmio em dois tempos.
     primeiro acesso   : entrada do diálogo 240ms e troca de tela 200ms.
   Toda animação tem contrapartida no bloco prefers-reduced-motion no fim.
   ========================================================================== */

/* ============================================================================
   1. MARCA NO CABEÇALHO — Futshop + "Games" (o produto), num toque volta ao início
   ========================================================================== */
a.brandbar { color: inherit; text-decoration: none; }
a.brandbar:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; border-radius: var(--r-sm); }
.brandbar { gap: var(--sp-3); }
.brand-games {
  display: inline-flex;
  align-items: center;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--blue-light);            /* 6.66:1 sobre --bg */
  white-space: nowrap;
}
.brand-games--lg { font-size: 22px; letter-spacing: 3px; padding-left: var(--sp-4); }

/* login: logo + GAMES formam um lockup só */
.hero-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.wrap:not(.wide) .hero-lockup .hero-logo { margin-bottom: 0; }
.page-login .hero h1 .accent { color: var(--gold); }

/* ============================================================================
   2. NAV DE 5 ABAS — Palpites · Roleta · Prêmios · Ranking · Regras
   Conta em 390px: 390 − 32 (wrap) − 2 (borda) − 12 (padding) − 16 (4 gaps) = 328 / 5 = 65px.
   "Palpites" a 11px ocupa ~50px: cabe sem reticência. Alvo de toque: 52px de altura.
   ========================================================================== */
.tabs a { padding-left: 2px; padding-right: 2px; }
@media (max-width: 360px) {
  .tabs a { font-size: 10px; letter-spacing: 0; }
}

/* ============================================================================
   3. TÍTULO DE PÁGINA (Meus prêmios, Regras)
   ========================================================================== */
.page-title {
  margin: var(--sp-2) 2px var(--sp-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-wrap: balance;
}
.page-lede {
  margin: calc(-1 * var(--sp-2)) 2px var(--sp-5);
  max-width: 44ch;
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: var(--text-2);
}
.page-lede strong { color: var(--text); }

/* ============================================================================
   4. PRÉ-LANÇAMENTO (launch.js)
   ========================================================================== */
.launch {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 196, 0, 0.28);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(47, 107, 255, 0.20), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 196, 0, 0.08), transparent 60%),
    var(--panel);
  box-shadow: var(--sh-2);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.launch__mark {
  position: absolute;
  z-index: -1;
  top: -150px;
  right: -150px;
  width: 300px;
  height: 300px;
  opacity: 0.14;
  pointer-events: none;
}
.launch__wedge { fill: #ffc400; }
.launch__wedge--b { fill: #2F6BFF; }
.launch__ring { fill: none; stroke: #ffe08a; stroke-width: 2; }
.launch__hub { fill: none; stroke: #ffe08a; stroke-width: 2; }
.launch__body { position: relative; }

.launch__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
}
.launch__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.launch__cell {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--sp-3) 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.launch__num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.launch__cell:first-child .launch__num { color: var(--gold); }   /* os dias são o que se lê de longe */
.launch__unit {
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.launch__date {
  margin-top: var(--sp-2);
  font-size: var(--fs-2);
  color: var(--text-2);
}
.launch__pitch {
  margin-top: var(--sp-5);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.launch__gold { color: var(--gold); font-weight: 700; }
.launch__saldo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 196, 0, 0.30);
  background: var(--spin-tint);
  font-size: var(--fs-2);
  color: #e9dcb4;                       /* 9.8:1 sobre o tinte dourado */
}
.launch__saldo b { color: var(--spin-ink); }
.launch__cta { margin-top: var(--sp-5); }
.launch__btn { width: 100%; min-height: 52px; font-size: var(--fs-4); }
.launch__btn svg { width: 19px; height: 19px; }
.launch__err { margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--red); }
.launch__done {
  display: flex;
  align-items: center;                  /* ícone e texto no mesmo eixo, com ou sem a linha de apoio */
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(0, 230, 118, 0.30);
  border-radius: var(--r-md);
  background: rgba(0, 230, 118, 0.07);
  animation: gfSettle var(--dur-3) var(--ease-out) both;
}
.launch__done-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(0, 230, 118, 0.16);
  color: var(--green);
}
.launch__done-txt { display: grid; gap: 2px; min-width: 0; }
.launch__done-title { font-size: var(--fs-4); font-weight: 700; color: var(--text); line-height: 1.35; }
.launch__done-sub { font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); }
.launch__link-btn {
  appearance: none;
  margin-top: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--blue-light);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.launch__links { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.launch__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: var(--fs-2);
  font-weight: 700;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.launch__chip svg { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .launch__chip:hover { color: var(--text); border-color: var(--blue); }
  .launch__link-btn:hover { color: var(--text); }
}

/* variante da Roleta: a promessa é o título */
.launch--roleta { padding-top: var(--sp-6); }
.launch--roleta .launch__pitch { margin-top: 0; font-size: var(--fs-4); color: var(--text-2); }
.launch--roleta .launch__lead {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-wrap: balance;
}

@keyframes gfSettle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   5. PRIMEIRO ACESSO (onboarding.js) — <dialog> nativo
   ========================================================================== */
html.onb-lock { overflow: hidden; }
.onb {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(47, 107, 255, 0.16), transparent 60%),
    var(--panel);
  color: var(--text);
  box-shadow: var(--sh-3);
  overflow: auto;
  overscroll-behavior: contain;
}
.onb[open] { animation: onbIn 240ms var(--ease-out) both; }
.onb::backdrop {
  background: rgba(3, 6, 16, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.onb[open]::backdrop { animation: onbFade 240ms var(--ease-out) both; }
@keyframes onbIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes onbFade { from { opacity: 0; } }

.onb__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) 0 var(--sp-5);
}
.onb__progress { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.onb__bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); transition: background var(--dur-3) var(--ease-out); }
.onb__bar.is-on { background: var(--spin-grad); }
.onb__skip {
  appearance: none;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 700;
  cursor: pointer;
}

/* altura única pras 3 telas: o "Continuar" fica no MESMO lugar — o dedo toca 3 vezes sem caçar o botão */
.onb__stage { padding: var(--sp-2) var(--sp-5) 0; min-height: 392px; }
.onb:focus { outline: none; }
.onb__pane {
  display: grid;
  justify-items: center;
  text-align: center;
  transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out);
}
.onb__pane[data-enter="fwd"]  { opacity: 0; transform: translateX(16px); }
.onb__pane[data-enter="back"] { opacity: 0; transform: translateX(-16px); }

.onb__visual { display: grid; place-items: center; min-height: 164px; width: 100%; }
.onb__title {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-wrap: balance;
}
.onb__body {
  margin-top: var(--sp-3);
  max-width: 32ch;
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: var(--text-2);
}

/* tela 1 — marca */
.onb__visual--brand { gap: var(--sp-3); align-content: center; }
.onb__logo { height: 48px; width: auto; }
.onb__wordmark {
  margin-top: -4px;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--blue-light);
}
.onb__seals { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.onb__seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  background: var(--lock-tint);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text);
}
.onb__seal svg { color: var(--green); }
.onb__seal + .onb__seal svg { color: var(--blue-light); }

/* tela 2 — placar */
.onb__visual--score { gap: var(--sp-3); align-content: center; }
.onb__placar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
.onb__gol { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--text); }
.onb__x { font-size: 22px; font-weight: 700; color: var(--text-3); }
.onb__rules { display: grid; gap: 6px; width: 100%; max-width: 280px; margin: 0; padding: 0; list-style: none; }
.onb__rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-2);
  color: var(--text-2);
}
.onb__pts { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-1); }
.onb__pts--4 { background: rgba(255, 196, 0, 0.14); color: var(--gold); }
.onb__pts--1 { background: rgba(66, 165, 245, 0.14); color: var(--blue-light); }

/* tela 3 — prêmio pra todo mundo */
.onb__visual--medal { min-height: 100px; }
.onb__medal {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 30%, #ffe89a, #ffc400 45%, #b8860b);
  color: var(--on-tier);
  box-shadow: 0 10px 30px rgba(255, 196, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.onb__rewards { display: grid; gap: var(--sp-2); width: 100%; margin: var(--sp-4) 0 0; padding: 0; list-style: none; text-align: left; }
.onb__reward {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  color: var(--text-2);
}
.onb__reward b { color: var(--text); }
.onb__reward-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--spin-tint);
  color: var(--spin-ink);
}
.onb__reward--blue .onb__reward-ic { background: rgba(47, 107, 255, 0.16); color: var(--blue-light); }

.onb__foot {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-5);
}
.onb__back {
  appearance: none;
  flex: none;
  min-height: 52px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.onb__next { flex: 1 1 auto; min-height: 52px; }
.onb__next svg { width: 18px; height: 18px; }
.onb__back:active, .onb__skip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .onb__skip:hover, .onb__back:hover { color: var(--text); }
}
@media (max-height: 700px) {
  .onb__stage { min-height: 0; }
  .onb__visual { min-height: 120px; }
}

/* o cartão que o botão final destaca (primeiro jogo aberto / pré-lançamento) */
.is-spotlight { animation: gfSpot 1600ms var(--ease-out) 1; }
@keyframes gfSpot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0); }
  25%  { box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0); }
}

/* ============================================================================
   6. CARTÃO DO JOGADOR E NÍVEL — o que tem do outro lado, sempre dito
   ========================================================================== */
.player-card__reason b { font-weight: 600; color: var(--text); }
.stat-tile__sub {
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #d8c79a;                       /* 6.59:1 sobre o tinte dourado */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-tile:not(.stat-tile--gold) .stat-tile__sub { color: var(--text-2); }

.tier-card__perks svg { color: var(--green); }
.tier-card__next {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid rgba(255, 196, 0, 0.26);
  border-radius: var(--r-md);
  background: var(--spin-tint);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: #efe3bf;                       /* 10.9:1 sobre o tinte dourado */
  font-weight: 600;
}
.tier-card__next svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--spin-ink); }

/* ============================================================================
   7. ROLETA — roda, saldo, convite
   ========================================================================== */
.wheel-slot__big { font-family: 'Russo One', system-ui, sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.2px; }
.wheel-slot__small { font-size: 6.4px; font-weight: 700; letter-spacing: 0.3px; opacity: 0.9; }
.wheel-slot--respin .wheel-slot__wedge,
.wheel-slot--entrega_direta .wheel-slot__wedge { stroke: rgba(255, 255, 255, 0.16); }

.wheel-saldo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 6px;
  font-size: var(--fs-3);
  color: var(--text-2);
}
.wheel-saldo__n {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: 400;
  line-height: 1;
  color: var(--spin-ink);
  font-variant-numeric: tabular-nums;
}
.wheel-saldo__venc { color: var(--text-2); }
.wheel-saldo__zero { font-size: var(--fs-2); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3); }
.wheel-spin { min-height: 54px; font-size: var(--fs-4); }

.wheel-invite:empty { display: none; }
.wheel-invite { width: 100%; max-width: 360px; text-align: center; }
.wheel-invite__title {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
}
.wheel-invite__hint { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--text-2); }

.gf-faixas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.gf-faixa {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  text-align: center;
}
.gf-faixa__n { font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; }
.gf-faixa__n b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--spin-ink); }
.gf-faixa__req { font-size: var(--fs-0); line-height: 1.3; color: var(--text-2); }

.gf-linkrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.gf-linkrow > svg { flex: none; width: 20px; height: 20px; color: var(--gold); }
.gf-linkrow > svg:last-child { width: 18px; height: 18px; color: var(--text-3); }
.gf-linkrow__txt { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.gf-linkrow__txt b { font-size: var(--fs-3); }
.gf-linkrow__txt span { font-size: var(--fs-1); color: var(--text-2); }
.gf-linkrow:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .gf-linkrow:hover { border-color: var(--blue); } }

/* ============================================================================
   8. TELA DO PRÊMIO (Byou, bloco 4) — comemoração primeiro, ação depois
   ========================================================================== */
.prize-screen {
  text-align: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  animation: hubResultIn var(--dur-3) var(--ease-out) both;
}
.prize-screen > * { position: relative; z-index: 1; }
.prize-screen .celebrate__bloom { z-index: 0; }
.prize-screen--bonus,
.prize-screen--premio {
  border-color: rgba(255, 196, 0, 0.50);
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(255, 196, 0, 0.16), transparent 62%),
    var(--panel);
  box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255, 196, 0, 0.10);
}
.prize-screen--respin {
  border-color: rgba(47, 107, 255, 0.45);
  background: radial-gradient(110% 60% at 50% 0%, rgba(47, 107, 255, 0.18), transparent 62%), var(--panel);
}
.prize-screen--near {
  border-color: rgba(169, 182, 212, 0.28);
  background: linear-gradient(180deg, var(--nearmiss-tint), transparent 60%), var(--panel);
}

.ps-seal {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 30%, #ffe89a, #ffc400 48%, #b8860b);
  color: var(--on-tier);
  box-shadow: 0 8px 24px rgba(255, 196, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ps-seal svg { width: 28px; height: 28px; }
.ps-seal--blue { background: radial-gradient(circle at 35% 30%, #9ec5ff, #2F6BFF 55%, #1240A6); color: #fff; box-shadow: 0 8px 24px rgba(47, 107, 255, 0.28); }

.ps-hero { display: grid; justify-items: center; gap: 2px; margin-top: var(--sp-4); font-weight: 400; }
.ps-hero__val {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--spin-ink);
  font-variant-numeric: tabular-nums;
}
.ps-hero__unit {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: #d8c79a;
}
.ps-title {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-wrap: balance;
}
.prize-screen--premio .ps-title { color: var(--spin-ink); font-size: 34px; }
.prize-screen--near .ps-title { color: var(--nearmiss-ink); font-size: var(--fs-6); }
.ps-sub { margin: var(--sp-2) auto 0; max-width: 32ch; font-size: var(--fs-3); line-height: var(--lh-body); color: var(--text-2); }

.ps-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--spin-grad);
  color: var(--on-tier);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.ps-art {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 40%, rgba(255, 196, 0, 0.22), transparent 70%), var(--surface-sunken);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.30);
  color: var(--spin-ink);
}
.ps-art img { width: 132px; height: 132px; object-fit: contain; }
.ps-art > svg { width: 64px; height: 64px; }
.prize-screen.is-grand .ps-art { animation: gfGrand 900ms var(--ease-out) both; }
@keyframes gfGrand {
  from { transform: scale(0.9) rotate(-4deg); opacity: 0; }
  60%  { transform: scale(1.03) rotate(1deg); opacity: 1; }
  to   { transform: none; }
}

/* bloco de ação: entra DEPOIS da comemoração (data-reveal wait → in, via JS) */
.ps-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* sem isto o min-content do rótulo/código alarga a trilha e o cartão recorta */
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.ps-action > * { transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out); }
.ps-action[data-reveal="wait"] > * { opacity: 0; transform: translateY(10px); }
.ps-action[data-reveal="in"] > *:nth-child(2) { transition-delay: 50ms; }
.ps-action[data-reveal="in"] > *:nth-child(3) { transition-delay: 100ms; }
.ps-action[data-reveal="in"] > *:nth-child(4) { transition-delay: 150ms; }
.ps-action[data-reveal="in"] > *:nth-child(5) { transition-delay: 200ms; }
.prize-screen--respin .ps-action { border-top: 0; padding-top: 0; }
.ps-lead {
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}
.ps-wa, .ps-again { width: 100%; min-height: 54px; }
.ps-again { font-size: var(--fs-3); }
.ps-note { font-size: var(--fs-2); color: var(--text-2); text-align: center; }
.ps-wallet {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--blue-light);
}

/* botão do WhatsApp: é ação de prêmio → dourado do sistema, com o balão desenhado.
   Uma linha em 390px (14px + 16px de respiro lateral); abaixo disso quebra em duas em vez de vazar. */
.gf-wa {
  min-width: 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;
}
.gf-wa span { min-width: 0; text-wrap: balance; }

/* código GF-XXXX-XXXX: o herói da parte de ação. O código tem a LINHA INTEIRA (nunca corta nem
   ganha reticência — é o que o atendente vai conferir letra por letra); "Copiar" sobe pro lado do rótulo. */
.gf-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label copy" "value value";
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px dashed rgba(255, 196, 0, 0.70);
  border-radius: var(--r-md);
  background: var(--bg);
}
.gf-code__label {
  grid-area: label;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.gf-code__value {
  grid-area: value;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 2px;
  color: var(--gold);
  white-space: nowrap;
  user-select: all;
}
.gf-code__copy {
  grid-area: copy;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.gf-code__copy svg { width: 16px; height: 16px; }
.gf-code__copy:active { transform: scale(0.96); }
.gf-code__copy.is-copied { border-color: rgba(0, 230, 118, 0.45); color: var(--green); }
@media (hover: hover) and (pointer: fine) { .gf-code__copy:hover { border-color: var(--blue); } }
.gf-code--compact .gf-code__value { font-size: 22px; letter-spacing: 1.6px; }

.gf-terms { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gf-terms li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--text-2);
}
.gf-terms li b { color: var(--text); font-weight: 700; }
.gf-terms svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--text-3); }

/* ============================================================================
   9. ÚLTIMOS GANHADORES
   ========================================================================== */
#wheelFeed:not([hidden]),
#missionList:not([hidden]) { margin-top: var(--sp-6); }
.gf-feed { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.gf-feed__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
}
.gf-feed__row + .gf-feed__row { border-top: 1px solid var(--hairline); }
.gf-feed__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--spin-tint);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.35);
  font-family: var(--font-display);
  font-size: var(--fs-3);
  color: var(--spin-ink);
}
.gf-feed__txt { display: grid; min-width: 0; line-height: 1.3; }
.gf-feed__txt b { font-size: var(--fs-3); color: var(--text); }
.gf-feed__prize { font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-feed__date { font-size: var(--fs-1); color: var(--text-3); font-variant-numeric: tabular-nums; }
.gf-feed-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-2);
  color: var(--text-2);
}
.gf-feed-empty svg { flex: none; width: 20px; height: 20px; color: var(--gold); }

/* ============================================================================
   10. CARTEIRA "MEUS PRÊMIOS"
   ========================================================================== */
#premiosMain .hub-section + .hub-section { margin-top: var(--sp-6); }
#premiosMain .hub-section[hidden] + .hub-section { margin-top: var(--sp-6); }

.wallet-giros__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wallet-giros__n { display: grid; gap: 2px; }
.wallet-giros__num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wallet-giros--on .wallet-giros__num { color: var(--spin-ink); }
.wallet-giros__unit { font-size: var(--fs-3); font-weight: 700; color: var(--text-2); }
.wallet-giros__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
}
.wallet-giros--on .wallet-giros__icon { background: var(--spin-tint); color: var(--spin-ink); box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.3); }
.wallet-giros__icon svg { width: 26px; height: 26px; }
.wallet-giros--on { border-color: rgba(255, 196, 0, 0.34); }
.wallet-giros__venc { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-2); }
.wallet-giros__venc svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.wallet-giros__cta { width: 100%; }
.wallet-giros__note { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--text-2); }

.wallet-list { display: grid; gap: var(--sp-3); }
.wallet-bonus { display: grid; gap: var(--sp-3); }
.wallet-bonus > * + * { margin-top: 0; }
.wallet-bonus--best { border-color: rgba(255, 196, 0, 0.50); }
.wallet-bonus__flag {
  justify-self: start;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--spin-tint);
  border: 1px solid rgba(255, 196, 0, 0.34);
  color: var(--spin-ink);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.wallet-bonus__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-2); font-weight: 400; }
.wallet-bonus__num { font-family: var(--font-display); font-size: 30px; line-height: 1.05; color: var(--spin-ink); font-variant-numeric: tabular-nums; }
.wallet-bonus__unit { font-size: var(--fs-1); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: #d8c79a; }
.wallet-bonus .gf-wa, .wallet-premio .gf-wa { width: 100%; min-height: 52px; }
.wallet-bonus, .wallet-premio { grid-template-columns: minmax(0, 1fr); }

.wallet-premio { display: grid; gap: var(--sp-3); border-color: rgba(255, 196, 0, 0.40); }
.wallet-premio > * + * { margin-top: 0; }
.wallet-premio__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.wallet-premio__coins { font-family: var(--font-display); font-size: var(--fs-4); color: var(--spin-ink); }
.wallet-premio__label { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); line-height: var(--lh-tight); color: var(--text); }
.wallet-premio__note { font-size: var(--fs-2); color: var(--text-2); }

.wallet-foot { margin-top: var(--sp-3); padding: 0 2px; font-size: var(--fs-1); line-height: var(--lh-snug); color: var(--text-2); }
.wallet-foot--empty {
  margin-top: 0;
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-2);
}

.wallet-hist { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.wallet-hist__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); }
.wallet-hist__row + .wallet-hist__row { border-top: 1px solid var(--hairline); }
.wallet-hist__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: rgba(0, 230, 118, 0.10); color: var(--green); }
.wallet-hist__row--off .wallet-hist__icon { background: var(--nearmiss-tint); color: var(--nearmiss-ink); }
.wallet-hist__icon svg { width: 14px; height: 14px; }
.wallet-hist__txt { display: grid; min-width: 0; line-height: 1.3; }
.wallet-hist__txt b { font-size: var(--fs-2); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-hist__meta { font-size: var(--fs-1); color: var(--text-2); }
.wallet-hist__code { font-size: var(--fs-1); color: var(--text-3); letter-spacing: 0.6px; font-variant-numeric: tabular-nums; }

.gf-empty { margin: 0; }
.wrap:not(.wide) #premiosMain .empty-state { margin: 0; }
#walletCupom .coupon-card { margin: 0; }

/* ============================================================================
   11. AVISOS (push.js) — ícone desenhado no lugar do emoji
   ========================================================================== */
.push-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(47, 107, 255, 0.18);
  color: var(--blue-light);
}
.push-icon--ok { display: inline-grid; width: 26px; height: 26px; margin-right: var(--sp-2); vertical-align: middle; background: rgba(0, 230, 118, 0.14); color: var(--green); }
.wrap:not(.wide) .push-text { color: var(--text); font-size: var(--fs-3); line-height: var(--lh-body); }
.push-text--hint { margin-top: var(--sp-2); }
.wrap:not(.wide) .push-text--hint { color: var(--text-2); font-size: var(--fs-2); }
.push-result { display: flex; align-items: center; }
.push-card--ok { border-color: rgba(0, 230, 118, 0.40); }
.push-card--info { border-color: var(--border); }
#premiosMain .push-card { margin: var(--sp-6) 0 0; }

/* ============================================================================
   12. RANKING — vaga do pódio sem dono
   ========================================================================== */
.wrap:not(.wide) .podium .step--open { border-style: dashed; background: var(--surface); box-shadow: none; }
.wrap:not(.wide) .podium .step--open .pos { opacity: 0.55; }
.wrap:not(.wide) .podium .step--open .nm--open { font-size: var(--fs-0); line-height: 1.35; color: var(--text-2); }

/* ============================================================================
   13. REGRAS — blocos que o texto corrido não resolve bem
   ========================================================================== */
#regArea .reg-section h2 { scroll-margin-top: var(--sp-4); }
#regArea .page-title { margin-top: var(--sp-2); }
.u-nowrap { white-space: nowrap; }
.reg-points { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.reg-point {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.reg-point b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4); }
.reg-point span { font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); }
.reg-point--4 b { color: var(--gold); }
.reg-point--1 b { color: var(--blue-light); }
.reg-point--0 b { color: var(--text-3); }

.reg-faixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.reg-faixa { display: grid; justify-items: center; gap: 2px; padding: var(--sp-3) 6px; border-radius: var(--r-md); background: var(--spin-tint); border: 1px solid rgba(255, 196, 0, 0.26); text-align: center; }
.reg-faixa b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4); color: var(--spin-ink); }
.reg-faixa span { font-size: var(--fs-1); line-height: 1.3; color: #e9dcb4; }

.reg-tiers { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.reg-tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "badge req" "perk perk";
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}
.reg-tier .badge-tier { grid-area: badge; }
.reg-tier__req { grid-area: req; justify-self: end; font-size: var(--fs-1); font-weight: 700; color: var(--text-2); }
.reg-tier__perk { grid-area: perk; font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text); }

/* ============================================================================
   14. MOVIMENTO REDUZIDO — estado final correto, sem deslocamento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* sem deslocamento, mas com uma troca de opacidade curta: o estado novo não "estala" na tela */
  .onb[open], .onb[open]::backdrop { animation: gfFade 160ms linear both; }
  .onb__pane { transition: opacity 140ms linear; }
  .onb__pane[data-enter="fwd"], .onb__pane[data-enter="back"] { transform: none; }
  .launch__done { animation: gfFade 160ms linear both; }
  .prize-screen { animation: gfFade 160ms linear both; }
  .prize-screen.is-grand .ps-art { animation: none; }
  .ps-action > * { transition: opacity 200ms linear; }
  .ps-action[data-reveal="wait"] > * { opacity: 0; transform: none; }
  .ps-action[data-reveal="in"] > * { transition-delay: 0ms; }
  .wheel-respin { animation: gfFade 160ms linear both; }
  .is-spotlight { animation: none; box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.55); }
  .gf-linkrow, .gf-code__copy, .launch__chip, .onb__bar, .coupon-row__btn { transition: none; }
  .gf-linkrow:active, .gf-code__copy:active, .onb__back:active, .onb__skip:active, .coupon-row__btn:active { transform: none; }
}
@keyframes gfFade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   15. RODADA DE CORREÇÃO (lente visual C)
   ========================================================================== */

/* ---- botão neutro: ação que não é prêmio (avançar, pedir aviso, tentar de novo) ---- */
.hub-btn--blue { background: var(--blue-grad); color: #fff; }       /* #fff sobre #265FE4 = 5.47:1 */
.hub-btn--blue:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }

/* ---- Russo One só tem o peso 400: nada de negrito sintético nela ---- */
.hub-head__title, .test-banner__title, .wheel-saldo__n, .gf-faixa__n b, .wheel-slot__big,
.empty-state__title, .lock-card__title, .hub-card__title, .wheel-result__title, .wheel-result__hero,
.stat-tile__value, .badge-tier, .launch__num, .gf-feed__avatar, .wallet-giros__num, .wallet-bonus__num,
.wallet-premio__coins, .reg-point b, .reg-faixa b, .onb__gol, .onb__wordmark, .brand-games,
.coupon-row__value, .wheel-invite__title, .ps-hero__val, .player-card__who { font-weight: 400; }

/* ---- alvo de toque do logo: 44px de área, o desenho continua do mesmo tamanho ---- */
a.brandbar { min-height: 44px; align-items: center; }

/* ---- contraste (medido): vaga do pódio sem opacidade; metal em tinta clara ---- */
.wrap:not(.wide) .podium .step--open .pos { opacity: 1; }
.wrap:not(.wide) .podium .p3 .pos { color: var(--tier1-ink); }     /* #e0ac7a sobre #161e39 = 7.4:1 */
.wrap:not(.wide) .podium .p2 .pos { color: var(--tier2-ink); }
.chip .cnt { opacity: 1; color: var(--text-3); }                   /* #8595ad sobre #0F1733 = 5.79:1 */
.chip.active .cnt { color: var(--blue-light); }

/* ---- texto de estado NUNCA corta com reticência ---- */
.stat-tile__value, .stat-tile__label, .stat-tile__sub,
.stat-tile--word .stat-tile__value { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- cartão do jogador: tiles na horizontal (valor à esquerda, rótulo e validade à direita) ---- */
.player-card__tiles .stat-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 0;
  min-height: 46px;
  padding: 6px var(--sp-3);
}
.player-card__tiles .stat-tile__value { font-size: 24px; line-height: 1; }
/* com validade embaixo (giros): valor ocupa as 2 linhas; sem ela, rótulo centrado ao lado do número */
.player-card__tiles .stat-tile--sub .stat-tile__value { grid-row: 1 / span 2; }
.player-card__tiles .stat-tile--sub .stat-tile__label { align-self: end; }
.player-card__tiles .stat-tile__sub { align-self: start; }

/* ---- missão da semana dentro do cartão: régua fina, sem caixa própria ---- */
.player-mission {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.player-mission__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.player-mission__title { font-size: var(--fs-2); font-weight: 700; line-height: var(--lh-snug); color: var(--text); min-width: 0; }
.player-mission__count { flex: none; font-size: var(--fs-1); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.player-mission .meter { height: 6px; }
.player-mission__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.player-mission__reward { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--fs-1); color: var(--text-2); }
.player-mission__reward svg { width: 13px; height: 13px; flex: none; color: var(--spin-ink); }
.player-mission__more { flex: none; font-size: var(--fs-1); color: var(--text-3); }
.player-mission--done .player-mission__count { color: var(--green); }

/* ---- bloco da semana: prazo + progresso + cupom, um cartão só ---- */
.week-block {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(140% 180% at 100% 0%, rgba(47, 107, 255, 0.14), transparent 55%),
    var(--panel);
  box-shadow: var(--sh-1);
}
.week-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.week-block__when { display: grid; gap: 1px; min-width: 0; }
.week-block .wh-label {
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.week-block .wh-count { font-size: var(--fs-2); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.week-block .wh-count .num { color: var(--blue-light); }
.week-block.urgent .wh-count .num { color: var(--gold); }
.wrap:not(.wide) .week-block .progress-cta { flex: none; min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-2); }
.wrap:not(.wide) .week-block .progress-wrap {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.week-block .progress-label { flex: none; font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; }
.week-block .progress-label strong { color: var(--text); }
.week-block .progress-track { flex: 1 1 auto; min-width: 48px; height: 6px; }

/* cupom da semana como linha do bloco */
.coupon-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
}
.coupon-row__icon {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(47, 107, 255, 0.14);
  color: var(--blue-light);
}
.coupon-row__icon svg { width: 16px; height: 16px; }
.coupon-row--on .coupon-row__icon { background: var(--spin-tint); color: var(--spin-ink); }
.coupon-row__txt { display: grid; gap: 1px; min-width: 0; line-height: var(--lh-snug); }
.coupon-row__txt b { font-size: var(--fs-2); color: var(--text); }
.coupon-row__txt > span { font-size: var(--fs-1); color: var(--text-2); }
.coupon-row__code { display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px; }
.coupon-row__value { font-family: var(--font-display); font-size: var(--fs-4); letter-spacing: 1.4px; color: var(--gold); overflow-wrap: anywhere; }
.coupon-row__btn {
  appearance: none;
  flex: none;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.coupon-row__btn--gold { border: 0; background: var(--spin-grad); color: var(--on-tier); }
.coupon-row__btn:active { transform: scale(0.97); }

/* filtros: situação | competição numa fileira só, rolagem horizontal */
.chips-bar {
  display: flex;
  gap: var(--sp-2);
  margin: 0 -2px var(--sp-1);
  padding: 2px 2px var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips-bar::-webkit-scrollbar { display: none; }
.wrap:not(.wide) .chips-bar .chips { flex: none; margin: 0; padding: 0; overflow: visible; }
.chips-bar .chips:empty { display: none; }
.chips-bar .chips + .chips:not(:empty) { padding-left: var(--sp-2); border-left: 1px solid var(--border); }
/* celular: a fileira rola de lado (é o que põe o 1º jogo na primeira tela) — a borda direita esmaece pra dizer que tem
   mais filtro ali; o último chip ganha respiro pra não ficar embaixo do esmaecimento */
@media (max-width: 599px) {
  .chips-bar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    scroll-snap-type: x proximity;
    padding-right: 28px;
  }
  .chips-bar .chip { scroll-snap-align: start; }
}
/* tela larga: cabe tudo — quebra em linhas e nenhum filtro some (verificação cega: em 1280 'Libertadores' sumia) */
@media (min-width: 600px) {
  .chips-bar { flex-wrap: wrap; overflow: visible; row-gap: var(--sp-2); }
  .wrap:not(.wide) .chips-bar .chips { flex-wrap: wrap; }
}

/* ritmo entre os blocos de /palpites: 12px, nunca colado */
#playerCard:not(:empty) + * { margin-top: var(--sp-3); }
#matchList > .day-head:first-child { margin-top: var(--sp-3); }
#matchList .push-card { margin: var(--sp-3) 0; }

/* ---- "Gire novamente!" no palco, acima do único botão de girar ---- */
.wheel-respin {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 320px;
  padding: var(--sp-3);
  border: 1px solid rgba(47, 107, 255, 0.45);
  border-radius: var(--r-md);
  background: radial-gradient(120% 120% at 0% 0%, rgba(47, 107, 255, 0.20), transparent 70%), var(--panel);
  animation: gfSettle var(--dur-3) var(--ease-out) both;
}
.wheel-respin__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 30%, #9ec5ff, #2F6BFF 55%, #1240A6);
  color: #fff;
}
.wheel-respin__icon svg { width: 20px; height: 20px; }
.wheel-respin__txt { display: grid; gap: 1px; line-height: var(--lh-snug); }
.wheel-respin__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); color: var(--text); }
.wheel-respin__txt > span { font-size: var(--fs-2); color: var(--text-2); }
.wheel-invite__sub { margin-top: 2px; font-size: var(--fs-2); color: var(--text-2); }

/* carta especial na roda: o nome legível junto da arte */
.wheel-slot__label--card .wheel-slot__small { font-size: 6.6px; }

/* ---- 360px: prova social em 2 linhas, botão do WhatsApp em 1 linha ---- */
@media (max-width: 380px) {
  .wrap:not(.wide) .social-proof { grid-template-columns: auto auto; row-gap: var(--sp-2); }
  .wrap:not(.wide) .social-proof > span:last-child { grid-column: 1 / -1; justify-self: center; border-left: 0; padding-left: 0; }
  .gf-wa { font-size: 13px; letter-spacing: 0; padding-left: var(--sp-3); padding-right: var(--sp-3); gap: 6px; }
  .gf-wa svg { width: 16px; height: 16px; }
}

/* ============================================================================
   16. GAMES FUTSHOP v2 — RODA DE 10 CASAS, TELA COMPARATIVA E "FALTA PRA LIBERAR"
   ----------------------------------------------------------------------------
   Blocos da roleta e do comparativo (propriedade do B3). Nada aqui redefine
   token: tudo sai de tokens.css. Contraste medido sobre a superfície do cartão
   (#161e39) e sobre o tinte dourado.
   ========================================================================== */

/* ---- roda densa: 10 cunhas de 36° -----------------------------------------
   A 45° o rótulo tinha 45,9 unidades de corda no raio 60. A 36° sobram 37,1 —
   não cabe o mesmo desenho. A saída não foi só encolher a fonte (ilegível em
   390px): o rótulo foi PRA FORA (raio 67, corda 41,4), a fonte caiu o mínimo
   necessário e as duas linhas encostaram. A prova mede a caixa de cada rótulo
   contra a corda da própria cunha — se um dia não couber, ela falha.           */
.wheel-svg--densa .wheel-slot__big { font-size: 8.4px; letter-spacing: 0; }
.wheel-svg--densa .wheel-slot__small { font-size: 5.8px; letter-spacing: 0.2px; }
.wheel-svg--densa .wheel-slot__label--card .wheel-slot__small { font-size: 5.8px; }
.wheel-svg--densa .wheel-slot__wedge { stroke-width: 0.5; }

/* a casa de maior bônus: a única cunha dourada da roda. Hierarquia, não enfeite. */
.wheel-slot--top .wheel-slot__wedge { stroke: rgba(255, 196, 0, 0.42); stroke-width: 0.9; }
.wheel-svg--densa .wheel-slot--top .wheel-slot__wedge { stroke-width: 0.8; }
/* "Perdeu a vez": a cunha mais quieta da roda. Sem dourado (não é prêmio) e sem
   vermelho (não é castigo) — é uma casa vazia, e é isso que ela parece.        */
.wheel-slot--nada .wheel-slot__wedge { stroke: rgba(255, 255, 255, 0.07); }

/* ---- "o que falta pra liberar" (spec §3) ---------------------------------
   A compra mínima sai da letra miúda e vira o passo que é. Azul, não dourado:
   o dourado é do prêmio; isto é a ação que ainda falta.                        */
.ps-unlock {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: left;
}
.ps-unlock__label {
  display: block;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--blue-light);
}
.ps-unlock__main {
  margin-top: var(--sp-2);
  font-size: var(--fs-4);
  line-height: var(--lh-snug);
  color: var(--text);
}
.ps-unlock__main b { font-weight: 700; color: var(--spin-ink); }
.ps-unlock__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--text-2);
}

/* ---- o bônus que este giro trocou ---------------------------------------- */
.ps-swap {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--spin-tint);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: #efe3bf;                        /* 10.9:1 sobre o tinte dourado */
  text-align: left;
}
.ps-swap svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--spin-ink); }
.ps-swap b { font-weight: 700; color: var(--spin-ink); }

/* ============================================================================
   TELA COMPARATIVA (spec §3)
   ----------------------------------------------------------------------------
   Um instante de PARIDADE e depois o veredito: é a regra do maior bônus virando
   gesto. Os cartões entram iguais, escalonados por giro, e só então os que
   perderam recuam (escala, opacidade, saturação) enquanto o vencedor assume o
   ouro. Sem esse instante a animação seria enfeite, e enfeite aqui é ruído.
   Transições (não keyframes) pra poder ser interrompida e retargetada.
   ========================================================================== */
.gf-cmp { text-align: center; }
.gf-cmp__title {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-wrap: balance;
}

.gf-cmp__strip {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  /* NADA ROLA AQUI. Rolagem sem afordância escondeu o vencedor da 5ª posição inteiro; o defeito
     morre na origem quando o contêiner nunca precisa rolar. */
  overflow: visible;
}
/* N ≤ 3: lado a lado, colunas iguais (desenho aprovado pela lente) */
.gf-cmp__strip--colunas { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* N ≥ 4: uma linha por giro, de cima pra baixo, na mesma ordem */
.gf-cmp__strip--linhas { grid-auto-flow: row; }

.gf-cmp__item {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
  align-content: center;
  min-height: 96px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  transform-origin: 50% 100%;
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out),
    border-color var(--dur-4) var(--ease-out),
    background-color var(--dur-4) var(--ease-out),
    filter var(--dur-4) var(--ease-out);
}
.gf-cmp__seq {
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);                  /* 5.79:1 sobre a superfície do cartão */
}
.gf-cmp__val {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--text);
  /* uma linha só: o vencedor quebrava "+100 / mil" e ficava mais alto que os perdedores por
     acidente de quebra, não por desenho. A altura extra dele agora é escolhida. */
  white-space: nowrap;
}
.gf-cmp__item[data-state="nada"] .gf-cmp__val,
.gf-cmp__item[data-state="respin"] .gf-cmp__val { font-size: var(--fs-3); color: var(--text-2); }
.gf-cmp__tag {
  min-height: 16px;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--spin-ink);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.gf-cmp__rule {
  margin-top: var(--sp-3);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--text-2);
}

/* fase 1 — antes de entrar */
.gf-cmp[data-phase="pronto"] .gf-cmp__item { opacity: 0; transform: translateY(10px); }
/* fase 2 — PARIDADE: todo mundo igual, escalonado por giro */
.gf-cmp[data-phase="entrada"] .gf-cmp__item { opacity: 1; transform: translateY(0); }
/* fase 3 — VEREDITO: quem perdeu recua, quem venceu assume */
.gf-cmp[data-phase="veredito"] .gf-cmp__item { opacity: 1; transform: translateY(0); }
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="out"],
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="nada"],
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="respin"] {
  /* O perdedor recua, mas continua LEGÍVEL: a 0.72 o rótulo do giro caía pra 3,46:1 — abaixo de AA (4,5:1
     pra 11px/700) — e o comentário antigo aqui afirmava o contrário sem ninguém ter medido. O recuo passa a
     morar no deslocamento, na escala e na saturação; a opacidade sobe o mínimo pra devolver o contraste, e o
     rótulo usa --text-2 em vez de --text-3. Medido depois: acima de AA. */
  opacity: 0.86;
  transform: translateY(2px) scale(0.94);
  filter: saturate(0.5);
}
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="out"] .gf-cmp__seq,
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="nada"] .gf-cmp__seq,
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="respin"] .gf-cmp__seq { color: var(--text-2); }
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="win"] {
  transform: translateY(-2px);
  border-color: rgba(255, 196, 0, 0.42);
  background: var(--spin-tint);
  box-shadow: var(--sh-1);
}
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="win"] .gf-cmp__val { color: var(--spin-ink); }
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="win"] .gf-cmp__seq { color: #d8c79a; }
.gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="win"] .gf-cmp__tag { opacity: 1; }

/* o bloco de ação ganhou o "falta pra liberar": mais um degrau na cascata */
.ps-action[data-reveal="in"] > *:nth-child(6) { transition-delay: 250ms; }

/* ---- 360px: a tira encolhe antes de rolar --------------------------------- */
@media (max-width: 380px) {
  .gf-cmp__strip { grid-auto-columns: minmax(92px, 1fr); }
  .gf-cmp__val { font-size: var(--fs-4); }
  .ps-unlock { padding: var(--sp-3); }
}

/* ---- movimento reduzido: a tela CHEGA no veredito, sem transição ---------- */
@media (prefers-reduced-motion: reduce) {
  .gf-cmp__item, .gf-cmp__tag { transition: none; }
  .gf-cmp[data-phase="pronto"] .gf-cmp__item { opacity: 1; transform: none; }
  .gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="out"],
  .gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="nada"],
  .gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="respin"] { transform: none; }
  .gf-cmp[data-phase="veredito"] .gf-cmp__item[data-state="win"] { transform: none; }
}

/* ---- regulamento v2: subtítulo de seção e o exemplo da regra do maior bônus ----
   A regra do maior bônus é a mudança que mais gera dúvida, então ela ganha um
   bloco próprio com UM exemplo numérico. Exemplo não é decoração: é o que faz a
   regra caber na cabeça de quem lê o regulamento uma vez só.                     */
.reg-sub {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  color: var(--text);
}
.reg-exemplo {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(255, 196, 0, 0.26);
  border-radius: var(--r-md);
  background: var(--spin-tint);
}
.reg-exemplo__label {
  display: block;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--spin-ink);              /* 8.72:1 sobre o tinte dourado */
}
.reg-exemplo p {
  margin-top: var(--sp-1);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: #efe3bf;                       /* 10.9:1 sobre o tinte dourado */
}
.reg-exemplo p strong { color: var(--spin-ink); font-weight: 700; }

/* ============================================================================
   17. RODADA DA LENTE VISUAL — comparativo com 4+ giros, revelação que cresce
   ========================================================================== */

/* ---- N ≥ 4: uma linha por giro ---------------------------------------------
   Linha larga: o número à esquerda, o giro acima dele e o selo à direita. Os
   valores ficam alinhados numa coluna, que é o jeito mais fácil de comparar
   números — e o vencedor está SEMPRE visível, em qualquer posição.            */
.gf-cmp__strip--linhas .gf-cmp__item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "seq tag" "val tag";
  justify-items: start;
  align-items: center;
  gap: 0 var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  transform-origin: 0% 50%;
}
.gf-cmp__strip--linhas .gf-cmp__seq { grid-area: seq; }
.gf-cmp__strip--linhas .gf-cmp__val { grid-area: val; }
.gf-cmp__strip--linhas .gf-cmp__tag {
  grid-area: tag;
  align-self: center;
  min-height: 0;
  text-align: right;
}
/* o vencedor é a linha alta da lista: a hierarquia é desenhada, não acidental */
.gf-cmp__strip--linhas .gf-cmp__item[data-win] {
  min-height: 72px;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.gf-cmp__strip--linhas .gf-cmp__item[data-win] .gf-cmp__val { font-size: var(--fs-6); }
/* nas linhas o recuo é lateral (a lista não pode "afundar" no meio) */
.gf-cmp[data-phase="veredito"] .gf-cmp__strip--linhas .gf-cmp__item[data-state="out"],
.gf-cmp[data-phase="veredito"] .gf-cmp__strip--linhas .gf-cmp__item[data-state="nada"],
.gf-cmp[data-phase="veredito"] .gf-cmp__strip--linhas .gf-cmp__item[data-state="respin"] {
  transform: scale(0.97);
}
.gf-cmp[data-phase="veredito"] .gf-cmp__strip--linhas .gf-cmp__item[data-state="win"] { transform: none; }
.gf-cmp[data-phase="pronto"] .gf-cmp__strip--linhas .gf-cmp__item { transform: translateY(6px); }

/* ---- o bloco de ação CRESCE, não reserva ----------------------------------
   grid-template-rows 0fr → 1fr: a caixa tem a altura do que já apareceu. Antes
   ela nascia com os 525px finais em opacity 0 e a tela ficava ~2s como uma
   caixa dourada vazia — com o scroll levando o cliente pro topo do vazio.      */
.ps-action--cresce {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.ps-action--cresce[data-reveal="in"] { grid-template-rows: 1fr; }
.ps-action--cresce > .ps-action__in { min-height: 0; overflow: hidden; }
.ps-action__in {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  width: 100%;
}
/* a cascata dos filhos passa a olhar pra dentro do invólucro */
.ps-action--cresce .ps-action__in > * { transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out); }
.ps-action--cresce[data-reveal="wait"] .ps-action__in > * { opacity: 0; transform: translateY(8px); }
.ps-action--cresce[data-reveal="in"] .ps-action__in > *:nth-child(2) { transition-delay: 40ms; }
.ps-action--cresce[data-reveal="in"] .ps-action__in > *:nth-child(3) { transition-delay: 80ms; }
.ps-action--cresce[data-reveal="in"] .ps-action__in > *:nth-child(4) { transition-delay: 120ms; }
.ps-action--cresce[data-reveal="in"] .ps-action__in > *:nth-child(5) { transition-delay: 160ms; }
.ps-action--cresce[data-reveal="in"] .ps-action__in > *:nth-child(6) { transition-delay: 200ms; }
/* o invólucro anula as regras antigas, que miravam os filhos diretos */
.ps-action--cresce[data-reveal="wait"] > .ps-action__in,
.ps-action--cresce[data-reveal="in"] > .ps-action__in { opacity: 1; transform: none; transition: none; }

/* ---- a casa do topo é a mais acesa da roda --------------------------------
   Medido pela lente: o topo saía em rgba(255,196,0,0.2) contra um respin em
   0.30 — o "gire de novo" gritava mais alto que o prêmio que sustenta a
   campanha, e a fatia lia como oliva. O topo agora é o mais aceso, e o número
   dele é o maior da roda.                                                     */
.wheel-slot--top .wheel-slot__big { font-size: 10px; }
.wheel-svg--densa .wheel-slot--top .wheel-slot__big { font-size: 9.6px; }
.wheel-svg--densa .wheel-slot--top .wheel-slot__small { font-size: 5.4px; letter-spacing: 0.4px; }

/* A cunha em MILHÕES tem escala própria: o número é curto ("+2") e quem carrega a grandeza é a PALAVRA.
   Com o tipo comum, "+500 mil" ocupava 36,25px de corda contra 11,03px de "+2", e "MILHÕES" (5,4px) era
   menor que o descartável "de bônus" (5,8px) — o maior prêmio da roda lia como o menor número dela.

   ESTAS REGRAS PRECISAM VIR DEPOIS DAS DE `--top` E COM ESPECIFICIDADE MAIOR. A primeira versão nasceu
   313 linhas ACIMA, com a mesma especificidade (3 classes): empate, vence a última, e a escala própria
   era sombreada pelo bloco do topo. Escrita certa e morta — e a casa de milhões É a casa do topo em toda
   configuração que faz sentido, então o empate decidia justamente o caso que importa. (Lente visual, 4ª.) */
.wheel-slot.wheel-slot--mi .wheel-slot__big { font-size: 13.5px; }
.wheel-slot.wheel-slot--mi .wheel-slot__small { font-size: 7.4px; letter-spacing: 0.5px; }
.wheel-svg--densa .wheel-slot.wheel-slot--mi .wheel-slot__big { font-size: 12.5px; letter-spacing: 0.2px; }
.wheel-svg--densa .wheel-slot.wheel-slot--mi .wheel-slot__small { font-size: 6.8px; letter-spacing: 0.5px; }

/* ---- histórico da carteira: bônus trocado por um maior -------------------- */
.wallet-hist__row--swap .wallet-hist__icon { background: var(--spin-tint); color: var(--spin-ink); }

@media (prefers-reduced-motion: reduce) {
  .ps-action--cresce { transition: none; }
  .ps-action--cresce[data-reveal="wait"] { grid-template-rows: 1fr; }
  .ps-action--cresce .ps-action__in > * { transition: opacity 200ms linear; }
  .ps-action--cresce[data-reveal="wait"] .ps-action__in > * { opacity: 0; transform: none; }
  .ps-action--cresce[data-reveal="in"] .ps-action__in > * { transition-delay: 0ms; }
  .gf-cmp[data-phase="pronto"] .gf-cmp__strip--linhas .gf-cmp__item { transform: none; }
  .gf-cmp[data-phase="veredito"] .gf-cmp__strip--linhas .gf-cmp__item { transform: none; }
}