/* ============================================================================
   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; }
}


/* ============================================================================
   5b. TUTORIAL DE PRIMEIRO ACESSO (tutorial.js, admin v4 spec N) — reaproveita a casca .onb
   As 5 telas ficam lado a lado num trilho; a tela anda com o dedo e assenta com a curva de gaveta.
   O trilho estica todas as telas pra altura da maior: o "Continuar" nunca muda de lugar.
   ========================================================================== */
.tut__stage {
  overflow: hidden;
  touch-action: pan-y;               /* rolagem vertical continua nativa; o horizontal é nosso */
  user-select: none;
  -webkit-user-select: none;
}
.tut__track {
  display: flex;
  align-items: stretch;
  transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.tut__stage.is-arrastando { cursor: grabbing; }
.tut__pane {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: var(--sp-2) var(--sp-5) 0;
  text-align: center;
  opacity: 0.35;
  /* fora de vista = escondida de verdade (sem pintura nem leitura), mas só DEPOIS do deslize terminar:
     a tela que sai continua visível enquanto o trilho anda; a que entra aparece na hora */
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 0s linear 340ms;
}
.tut__pane.is-on { opacity: 1; visibility: visible; transition: opacity 260ms var(--ease-out), visibility 0s; }
/* arrastando: as vizinhas aparecem junto do dedo */
.tut__stage.is-arrastando .tut__pane { visibility: visible; transition: none; }
.tut__visual { min-height: 176px; gap: var(--sp-3); align-content: center; }
.tut__title { margin-top: var(--sp-4); }
.tut__body { margin-left: auto; margin-right: auto; }
.tut__skip { color: var(--text); }
.tut__skip:focus-visible, .onb__back:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }

/* 1 — palpites */
.tut__logo { height: 40px; width: auto; }
.tut__jogo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 280px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tut__time { font-size: var(--fs-2); font-weight: 700; color: var(--text-2); }
.tut__time:last-child { text-align: right; }
.tut__placar {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
.tut__placar b { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--text); }
.tut__placar i { font-style: normal; font-weight: 700; color: var(--text-3); }

/* 2 — pontos */
.tut__regras { display: grid; gap: 6px; width: 100%; max-width: 290px; margin: 0; padding: 0; list-style: none; }
.tut__regra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-3);
  color: var(--text-2);
}
.tut__pts { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-2); white-space: nowrap; }
.tut__pts--ouro { background: rgba(255, 196, 0, 0.14); color: var(--gold); }
.tut__pts--azul { background: rgba(66, 165, 245, 0.14); color: var(--blue-light); }
.tut__pts--zero { background: var(--surface-2); color: var(--text-2); }

/* 3 — pódio */
.tut__podio { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 132px; }
.tut__degrau {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  width: 64px;
  padding-bottom: var(--sp-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--surface-2);
  color: var(--text);
}
.tut__degrau b { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.tut__degrau--1 { height: 120px; background: linear-gradient(180deg, rgba(255, 196, 0, 0.26), rgba(255, 196, 0, 0.06)); }
.tut__degrau--1 b { color: var(--gold); }
.tut__degrau--2 { height: 88px; }
.tut__degrau--3 { height: 66px; }
.tut__taca { color: var(--gold); margin-bottom: auto; padding-top: var(--sp-2); }

/* 4 — cupom: a escada sobe da esquerda pra direita, o último degrau é o dourado */
.tut__escada { display: grid; gap: 6px; width: 100%; max-width: 300px; margin: 0; padding: 0; list-style: none; text-align: left; }
.tut__passo {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tut__passo--2 { margin-left: 14px; }
.tut__passo--3 { margin-left: 28px; border-color: rgba(255, 196, 0, 0.32); }
.tut__passo-ic {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(47, 107, 255, 0.16);
  color: var(--blue-light);
}
.tut__passo--3 .tut__passo-ic { background: var(--spin-tint); color: var(--spin-ink); }
.tut__passo-txt { display: grid; line-height: var(--lh-snug); font-size: var(--fs-2); color: var(--text-2); }
.tut__passo-txt b { font-size: var(--fs-3); color: var(--text); }
.tut__missao {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(54, 211, 153, 0.12);
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--text);
}
.tut__missao svg { color: var(--green); flex: none; }

/* 5 — roleta */
.tut__roda {
  position: relative;
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: var(--r-pill);
  background: var(--spin-tint);
  color: var(--spin-ink);
}
.tut__roda--off { background: var(--surface-2); color: var(--text-2); }
.tut__roda-relogio {
  position: absolute; right: -4px; bottom: -4px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  color: var(--blue-light);
}
.tut__faixas { width: 100%; }

@media (max-height: 700px) {
  .tut__visual { min-height: 120px; }
  .tut__podio { height: 104px; }
  .tut__degrau--1 { height: 96px; }
  .tut__degrau--2 { height: 72px; }
  .tut__degrau--3 { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .tut__track { transition: none; }
  .tut__pane { transition: opacity 140ms linear, visibility 0s; }
}

/* 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
   ========================================================================== */
/* v3: o corpo do rótulo sai de N (GFUI.geometria) e do ajuste medido (GFUI.ajustarRoda), que escrevem
   --w-big/--w-small/--w-mi/--w-mi-small no próprio <svg>. Os números aqui são só o fallback sem JS. */
.wheel-slot__big { font-family: 'Russo One', system-ui, sans-serif; font-size: var(--w-big, 10px); font-weight: 400; letter-spacing: 0.2px; }
.wheel-slot__small { font-size: var(--w-small, 6.4px); font-weight: 700; letter-spacing: 0; opacity: 0.9; }
/* O texto da roda é desenhado no corpo do viewBox (5–9 unidades) e ESCALADO pra tela: com o hinting padrão o
   Chrome arredonda o avanço de cada letra no corpo pequeno e a escala amplia o erro ("Cris tia no", "milhã o").
   geometricPrecision posiciona as letras sem arredondar; com isso o espaçamento extra também sai (lente C). */
.wheel-svg text { text-rendering: geometricPrecision; }
.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);
  /* `backwards`, não `both`: terminada a entrada o cartão volta ao estilo normal (sem transform guardado). Com `both`
     ele ficava pra sempre numa camada própria com matrix(1,0,0,1,0,0), e o texto rasterizava 1 px fora do lugar
     em relação ao mesmo cartão sem animação (o preview do admin) — medido no pixel-diff do I5. */
  animation: hubResultIn var(--dur-3) var(--ease-out) backwards;
}
.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;
  container-type: inline-size; }            /* a largura do cartão é a régua do número herói (cqi abaixo) */
/* O número herói escala com a LARGURA DO CARTÃO e com o NÚMERO DE CARACTERES (--ps-chars, escrito pelo GFUI com o
   valor final): até ~7 caracteres ("+25.000") fica nos 52px de sempre; "+100.000.000" (12) desce o necessário pra
   caber numa linha só — o motor aceita bônus de até 100.000.000. 0,66 em por caractere = Russo One medida (0,60–0,63)
   + o letter-spacing, com folga. A 1ª declaração é o fallback por vw (cartão = tela − 66px) pra navegador sem cqi; o
   preview do admin (2 colunas) depende do cqi, que mede o cartão e não a janela. Nunca quebra, nunca corta. */
.ps-hero__val {
  font-family: var(--font-display);
  font-size: 52px;
  font-size: min(52px, calc((100vw - 66px) / (var(--ps-chars, 7) * 0.66)));
  font-size: min(52px, calc(100cqi / (var(--ps-chars, 7) * 0.66)));
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--spin-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}
.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) backwards; }
@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: var(--w-small, 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 { letter-spacing: 0; }
.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: calc(var(--w-big, 10px) * 1.08); }

/* 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: var(--w-mi, 13.5px); letter-spacing: 0.2px; }
.wheel-slot.wheel-slot--mi .wheel-slot__small { font-size: var(--w-mi-small, 7.4px); letter-spacing: 0.5px; }
/* roda densa (9+ casas): a cunha estreita não comporta o espaçamento de caixa-alta — "MILHÕES" sem ele cabe a 9+ px
   em vez de virar "MI" (lente C, 2ª passada) */
.wheel-svg--densa .wheel-slot.wheel-slot--mi .wheel-slot__small { letter-spacing: 0; }

/* ---- 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; }
}

/* ============================================================================
   17. GAMES FUTSHOP v3 — TIPOS DE PRÊMIO, VALIDADE CONGELADA, "EM BREVE",
       REGULAMENTO DINÂMICO E O PREVIEW DO ADMIN (propriedade do B4)
   ----------------------------------------------------------------------------
   Nada redefine token. Os componentes são os do GFUI (public/js/gf-ui.js), os
   mesmos que o admin vê no preview: este bloco é a única folha deles.
   ========================================================================== */

/* ---- carteira: o resto da frase do tipo, em caixa normal ------------------
   "+25.000" + "coins na sua próxima compra" é o texto da spec inteiro. Em caixa
   alta e tracking de rótulo uma frase de 5 palavras vira parede: aqui é frase.  */
.wallet-bonus__unit--frase {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--lh-snug);
  color: #e6dcc0;                        /* 11.4:1 sobre o cartão */
}
.wallet-card__linha { font-size: var(--fs-3); font-weight: 600; line-height: var(--lh-snug); color: #e6dcc0; }
/* como cada tipo é entregue: UMA linha, sem ícone, logo acima do botão */
.wallet-card__entrega { font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); }
.wallet-premio__estado {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 196, 0, 0.36);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--spin-ink);                /* 8.7:1 sobre o tinte */
  background: var(--spin-tint);
}
.wallet-premio__estado.is-entregue { border-color: rgba(0, 230, 118, 0.32); background: rgba(0, 230, 118, 0.08); color: #7ef0b0; }

/* ---- tela do prêmio: a linha de entrega do tipo --------------------------- */
.ps-entrega { color: var(--text-2); text-wrap: pretty; }

/* ---- cupom: como usar, quando não há faixa de recompensa ------------------ */
.coupon-uso { margin-top: var(--sp-3); font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); }

/* ---- pré-lançamento: "Em breve" (R3) ---------------------------------------
   Sem data não existe relógio. O lugar dele vira o bloco "Em breve" com o
   texto editável do admin — o MESMO componente (GFUI.emBreve) no Bolão e na
   Roleta, rebaixado no mesmo lugar onde a contagem estaria.                  */
.launch__embreve {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  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__embreve-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(47, 107, 255, 0.16);
  color: var(--blue-light);
}
.launch__embreve-txt { display: grid; gap: 2px; min-width: 0; }
.launch__embreve-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); line-height: var(--lh-tight); color: var(--text); }
.launch__embreve-body { font-size: var(--fs-3); line-height: var(--lh-body); color: var(--text-2); text-wrap: pretty; }
.launch--embreve.launch--palpites .launch__title { font-size: 24px; }
.launch--palpites .launch__embreve { margin-top: var(--sp-3); }
.launch__saldo-validade { flex-basis: 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* o relógio virou "Em breve" com a tela aberta: troca de estado, não entrada — só opacidade */
  .launch__tempo > * { animation: gfFade 200ms var(--ease-out) both; }
}

/* ---- regulamento dinâmico: as casas e os tipos, lidos do servidor --------- */
.reg-casas { display: grid; gap: 6px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
/* a lista numerada da roda não usa o marcador azul das listas do regulamento: o número É o marcador */
#regArea .reg-section .reg-casa { padding: 10px var(--sp-3); line-height: var(--lh-snug); }
#regArea .reg-section .reg-casa::before { content: none; }
.reg-casa {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}
.reg-casa__n { font-family: var(--font-display); font-size: var(--fs-2); color: var(--text-3); font-variant-numeric: tabular-nums; }
.reg-casa__txt { font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--text); }
.reg-casa__txt b { color: var(--spin-ink); font-weight: 700; }
.reg-casa[data-kind="respin"] .reg-casa__txt, .reg-casa[data-kind="nada"] .reg-casa__txt { color: var(--text-2); }
.reg-tipos { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 0; }
.reg-tipo { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); }
.reg-tipo dt { font-weight: 700; color: var(--text); }
.reg-tipo dd { margin: 4px 0 0; font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--text-2); }
.reg-tipo dd + dd { color: var(--text); }
.reg-nota { margin-top: var(--sp-3); font-size: var(--fs-3); line-height: var(--lh-body); color: var(--text-2); }

/* ---- preview do admin (public/preview.html) --------------------------------
   Os 4 painéis empilham em 390px (a largura do celular, a que o cliente vê) e
   viram grade quando o iframe é largo. Cada painel é o componente do cliente
   sem moldura extra: o que o admin confere é o que o cliente recebe.         */
.pv { padding-bottom: var(--sp-6); }
.pv-grid { display: grid; gap: var(--sp-5); }
/* em 2 colunas cada painel tem a largura do conteúdo do app num celular de 390 (358 px): com o .wrap de 560 do
   app as colunas caíam pra 252 px e o cartão do preview ficava MAIS ESTREITO que o do cliente (número herói menor) */
@media (min-width: 780px) {
  .wrap.pv { max-width: 780px; }
  .pv-grid { grid-template-columns: repeat(2, minmax(0, 358px)); justify-content: center; align-items: start; }
}
.pv-painel { min-width: 0; }
.pv-painel__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--text-2);
}
/* preview é pra olhar: nenhum botão do painel abre WhatsApp ou copia código de exemplo */
.pv-painel__corpo { pointer-events: none; }
.pv-roda { display: grid; justify-items: center; gap: var(--sp-3); }
.pv-roda__linha { max-width: 34ch; text-align: center; font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--text); }
.pv-wa { display: grid; gap: var(--sp-2); }
.pv-wa__bolha {
  justify-self: end;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 12px 12px 4px 12px;
  background: #144d37;                   /* balão de saída: texto #e9fff4 a 9,3:1 */
  color: #e9fff4;
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pv-wa__meta { justify-self: end; font-size: var(--fs-1); color: var(--text-3); }
.pv-vazio {
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  color: var(--text-2);
  text-align: center;
}
.pv-espera { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-2); font-size: var(--fs-3); }
/* preview: o cartão chega no estado final, sem entrada (o admin re-desenha a cada tecla) */
.prize-screen.is-estatico, .prize-screen.is-estatico .ps-art { animation: none; }
/* o código ocupa a coluna inteira, alinhado ao botão e ao "o que falta" logo acima: a caixa não muda de
   largura com o código (o atendente lê letra por letra; o preview do admin mostra GF-••••-•••• no mesmo lugar) */
.ps-action__in > .gf-code { justify-self: stretch; }

/* ---- lente C (v3, rodada 2) ------------------------------------------------ */
/* carteira: o MELHOR bônus é o único com o botão dourado cheio; os outros são compactos, com botão discreto
   (contorno dourado, sem preenchimento) — seis botões cheios iguais não diziam qual usar e somavam ~3.800 px. */
.wallet-bonus--compacto { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.wallet-bonus--compacto .wallet-bonus__num { font-size: 24px; }
.wallet-bonus--compacto .gf-code { padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); }
.wallet-bonus--compacto .gf-code--compact .gf-code__value { font-size: 19px; letter-spacing: 1.2px; }
.wallet-bonus--compacto .gf-terms { gap: 4px; }
.wallet-bonus .gf-wa.gf-wa--discreto {
  min-height: 44px;
  background: none;
  color: var(--spin-ink);                /* 8,7:1 sobre o cartão */
  box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.45);
  font-family: var(--font-body);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .wallet-bonus .gf-wa.gf-wa--discreto:hover { background: var(--spin-tint); filter: none; }
}
/* histórico: uma linha por RODADA trocada (vários códigos na coluna da direita) */
.wallet-hist__code { display: grid; justify-items: end; gap: 2px; }
/* pausa: a linha de contagem nunca deixa uma palavra sozinha ("chega / em") */
.launch__title { text-wrap: balance; }
/* casa com arte: o valor do bloco tem o mesmo corpo dos valores das outras cunhas */
.wheel-slot .wheel-slot__big.wheel-slot__big--bloco { font-size: calc(var(--w-small, 6.4px) * 1.3); letter-spacing: 0; }

/* ---- observação pro cliente (24/10) ---------------------------------------
   Texto livre do dono por casa (até 240 caracteres), sempre por textContent.
   Fica logo abaixo do que o prêmio vale: é contexto do prêmio, não letra miúda.
   Dourado bem baixo no fundo (o dourado é do prêmio), texto no corpo de leitura. */
.gf-obs {
  width: 100%;
  max-width: 36ch;
  margin: var(--sp-3) auto 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(255, 196, 0, 0.22);
  border-radius: var(--r-md);
  background: rgba(255, 196, 0, 0.06);
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  color: var(--text);
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.gf-obs--carteira { max-width: none; margin: var(--sp-2) 0 var(--sp-1); text-align: left; }
/* regulamento: o texto do tipo e, embaixo, a observação da casa */
.reg-casa__body { display: grid; gap: 4px; min-width: 0; }
.reg-casa__obs { font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); overflow-wrap: anywhere; }

/* ============================================================================
   ADMIN v4 · VÁRIOS GIROS ⇒ ESCOLHE 1 (spec M) — gf-ui.js#telaEscolha / telaCandidato / avisoEscolhas
   Cartões grandes, um por prêmio, valor em destaque. "Quero este" (azul: é escolha, não prêmio) abre
   a confirmação curta dentro do próprio cartão; o "Sim, quero este" é o dourado (é ali que o prêmio nasce).
   ========================================================================== */
.prize-screen--candidato {
  border-color: rgba(255, 196, 0, 0.32);
  background: radial-gradient(110% 60% at 50% 0%, rgba(255, 196, 0, 0.10), transparent 62%), var(--panel);
}
.gf-cand__lead { margin-top: var(--sp-3); font-size: var(--fs-2); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); }
.gf-cand__val { margin-top: var(--sp-1); }
.gf-cand__regra {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  max-width: 34ch;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(47, 107, 255, 0.10);
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  color: var(--text);
  text-align: left;
}
.gf-cand__regra svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--blue-light); }

.gf-esc__ultimo { margin: 0 0 var(--sp-3); font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--text-2); }
.gf-esc__ultimo b { color: var(--spin-ink); font-weight: 700; }
.gf-esc {
  padding: var(--sp-5) var(--sp-4);
  border-color: rgba(255, 196, 0, 0.30);
  background: radial-gradient(120% 50% at 50% 0%, rgba(255, 196, 0, 0.10), transparent 60%), var(--panel);
}
.gf-esc--feita { padding: 0; border: 0; background: none; box-shadow: none; }
.gf-esc__title {
  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);
}
.gf-esc__title:focus { outline: none; }
.gf-esc__title:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; border-radius: 4px; }
.gf-esc__sub { margin-top: var(--sp-2); max-width: 40ch; font-size: var(--fs-3); line-height: var(--lh-body); color: var(--text-2); }
.gf-esc__prazo { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-3); font-size: var(--fs-2); font-weight: 700; color: var(--text); }
.gf-esc__prazo svg { flex: none; width: 16px; height: 16px; color: var(--blue-light); }
.gf-esc__lista { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .gf-esc__lista { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.gf-esc__opt {
  display: grid; align-content: start; gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: opacity var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  animation: gfEscIn 280ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes gfEscIn { from { opacity: 0; transform: translateY(8px); } }
.gf-esc[data-confirmando] .gf-esc__opt:not([data-confirmando]) { opacity: 0.45; }
.gf-esc__opt[data-confirmando] { border-color: rgba(255, 196, 0, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.25); }
.gf-esc__tag {
  justify-self: start;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-1); font-weight: 700;
  color: var(--text-2);
}
.gf-esc__opt[data-kind="entrega_direta"] .gf-esc__tag { background: var(--spin-tint); color: var(--spin-ink); }
.gf-esc__val { display: grid; gap: 2px; margin: 0; }
.gf-esc__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; line-height: 1.05;
  color: var(--spin-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.gf-esc__unit { font-size: var(--fs-3); font-weight: 700; color: var(--text); }
.gf-esc__cond { margin: 0; font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); }
.gf-esc__quero { width: 100%; min-height: 48px; margin-top: var(--sp-1); }
.gf-esc__conf { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); animation: gfEscIn 200ms var(--ease-out) both; }
.gf-esc__conf-txt { margin: 0; font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--text); font-weight: 700; }
.gf-esc__conf-row { display: flex; gap: var(--sp-2); }
.gf-esc__sim { flex: 1 1 auto; min-height: 48px; }
.gf-esc__nao, .gf-esc__voltar {
  appearance: none; flex: none;
  min-height: 48px; 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;
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.gf-esc__voltar { width: 100%; margin-top: var(--sp-4); }
.gf-esc__nao:active, .gf-esc__voltar:active { transform: scale(0.97); }
.gf-esc__nao:focus-visible, .gf-esc__voltar:focus-visible, .gf-esc__quero:focus-visible, .gf-esc__sim:focus-visible,
.gf-espera__btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .gf-esc__nao:hover, .gf-esc__voltar:hover { color: var(--text); } }
.gf-esc__aviso {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 171, 82, 0.45);
  border-radius: var(--r-md);
  background: rgba(255, 157, 60, 0.10);
  font-size: var(--fs-3); line-height: var(--lh-snug);
  color: var(--text);
}
.gf-esc__aviso-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--blue-light); }
.gf-esc__fim { display: grid; gap: var(--sp-3); }
.gf-esc__pronto { margin: 0; font-family: var(--font-display); font-size: var(--fs-5); color: var(--text); }
.gf-esc__resto { margin: 0; font-size: var(--fs-2); color: var(--text-2); }
.gf-esc__fim .prize-screen:focus { outline: none; }

.gf-espera {
  padding: var(--sp-4);
  border-color: rgba(255, 196, 0, 0.45);
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 196, 0, 0.14), transparent 60%), var(--panel);
}
#wheelEspera { margin-bottom: var(--sp-4); }
.gf-espera__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.gf-espera__ic {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: var(--spin-tint); color: var(--spin-ink);
}
.gf-espera__ic svg { width: 20px; height: 20px; }
.gf-espera__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); line-height: var(--lh-tight); color: var(--text); }
.gf-espera__sub { margin-top: 4px; font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2); }
.gf-espera__lista { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.gf-espera__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface);
}
.gf-espera__info { display: grid; gap: 2px; min-width: 0; }
.gf-espera__info b { font-size: var(--fs-3); color: var(--text); }
.gf-espera__prazo { font-size: var(--fs-2); color: var(--text-2); }
.gf-espera__btn { min-height: 44px; flex: 1 1 180px; }
.wallet-hist__row--skip .wallet-hist__icon { background: var(--surface-2); color: var(--text-2); }

/* admin v4 (F3) — escolha pendente na Roleta: venda e "Meus prêmios" saem do palco, a escolha sobe pra baixo da roda */
#wheelStage.is-escolhendo .wheel-invite,
#wheelStage.is-escolhendo .wheel-saldo,
#wheelStage.is-escolhendo .gf-linkrow { display: none; }
#wheelStage.is-escolhendo .wheel-actions:has(> .wheel-spin[hidden]) { display: none; }

/* carteira — validade igual pra todos os bônus: UMA linha no topo da seção */
.wallet-validade {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 var(--sp-3); padding: 0 2px;
  font-size: var(--fs-2); line-height: var(--lh-snug); color: var(--text-2);
}
.wallet-validade svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }

/* carteira — "Pronto": confirma a escolha; o código mora no cartão marcado logo abaixo (uma vez só) */
.gf-pronto {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-color: rgba(255, 196, 0, 0.45);
  animation: gfSettle var(--dur-3) var(--ease-out) both;
}
.gf-pronto__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);
}
.gf-pronto__ic svg { width: 18px; height: 18px; }
.gf-pronto__txt { margin: 0; font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--text-2); }
.gf-pronto__txt b { color: var(--text); font-weight: 700; }
.wallet-card--recem { border-color: rgba(255, 196, 0, 0.70); box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.35), 0 10px 28px -14px rgba(255, 196, 0, 0.45); }
.wallet-card--recem:focus { outline: none; }
.wallet-card--recem:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wallet-recem__flag {
  justify-self: start; align-self: start;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--gold); color: #070B1A;
  font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
}
.wallet-premio .wallet-recem__flag { display: inline-block; margin-bottom: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .gf-pronto { animation: gfFade 160ms linear both; } }

@media (prefers-reduced-motion: reduce) {
  .gf-esc__opt, .gf-esc__conf { animation: gfFade 160ms linear both; transform: none; }
  .gf-esc__opt { transition: opacity 140ms linear; }
  .gf-esc__nao:active, .gf-esc__voltar:active { transform: none; }
}