/* ============================================================
   TELAS — layouts específicos
   ============================================================ */

/* ========================================================
   SPLASH / LANDING
   ======================================================== */
.splash {
  /* SEM `position: relative` aqui.
     Esta regra carrega depois de base.css e cancelava o
     `position: absolute; inset: 0` do `.screen`. Sem estar presa ao
     palco, a tela crescia com o conteudo: 983px dentro de 844, com os
     tres selos de confianca do rodape cortados E inalcancaveis.
     Era a UNICA tela do app com esse problema, e a causa era uma
     declaracao que nao fazia falta: os gradientes abaixo sao fundo, e
     o `.splash__floor` ja se ancora no `.splash__hero`, que tem o
     proprio `position: relative`. */
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(237,185,72,.20), transparent 62%),
    radial-gradient(120% 70% at 50% 108%, rgba(194,133,27,.26), transparent 60%),
    var(--bg-root);
}
.splash__body {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-6) var(--gutter) 0;
  text-align: center;
}
.splash__logo { width: min(260px, 72%); margin-top: var(--s-4); }
.splash__tagline {
  margin-top: var(--s-4);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-200); max-width: 20ch; line-height: 1.6;
}
.splash__hero {
  position: relative;
  width: 100%;
  /* Altura DEFINIDA, nao `min-height: 0`.
     Tentei deixar o hero ceder espaco em tela curta; o resultado foi
     pior: a caixa encolheu, mas `max-height: 100%` dentro de um
     container de altura flexivel nao resolve contra nada, entao a
     arte continuou com 296px e passou POR CIMA do botao.
     Com altura definida o layout e previsivel, e quando nao cabe quem
     resolve e a rolagem do `.screen__body` - que passou a funcionar
     depois do `min-height: 0` dele. */
  flex: 0 0 auto;
  height: clamp(200px, 34vh, 300px);
  display: grid; place-items: center;
  /* respiro embaixo: sem ele o brilho da arte termina atras do
     "Jogar agora" e os dois viram uma mancha so */
  margin-block: var(--s-3) var(--s-7);
}

.splash__hero img {
  max-width: min(300px, 82%);
  max-height: 100%;
  width: auto; height: auto;
}

/* piso de luz sob o box */
.splash__floor {
  position: absolute; bottom: 2%; left: 50%; translate: -50% 0;
  width: 76%; height: 54px;
  background: radial-gradient(ellipse at center, rgba(237,185,72,.44), transparent 68%);
  filter: blur(9px);
}
.splash__actions { width: 100%; display: flex; flex-direction: column; gap: var(--s-3); }
.splash__trust { width: 100%; padding-block: var(--s-6) var(--s-5); }

/* ========================================================
   PORTÃO 18+
   ======================================================== */
.agegate { display: grid; place-items: center; padding: var(--s-6) var(--gutter); text-align: center; min-height: 100%; }
.agegate__seal {
  display: grid; place-items: center;
  width: 96px; height: 96px; margin-inline: auto;
  border-radius: var(--r-full);
  border: 2px solid var(--gold-500);
  font-family: var(--ff-display); font-weight: var(--fw-black); font-size: 30px;
  color: var(--gold-300);
  box-shadow: var(--glow-md), inset 0 0 24px rgba(237,185,72,.12);
}

/* ========================================================
   HOME
   ======================================================== */
.home__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-2) var(--gutter) var(--s-4);
}
.home__brand { display: flex; align-items: center; gap: var(--s-2); }
.home__brand svg { height: 30px; width: auto; }

.home__sectiontitle { padding: var(--s-6) var(--gutter) var(--s-3); }

/* ---- Card de box (Bronze / Prata / Ouro / Diamante) ----
   Cada card carrega --tier, e cor da borda, do halo, do preço e da
   barra lateral saem dessa variável. É o que faz os quatro parecerem
   da mesma família sem repetir regra quatro vezes. */
.boxcard {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--bg-surface-2), var(--bg-surface) 62%);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.boxcard:active { transform: scale(.985); }
.boxcard:hover { border-color: color-mix(in srgb, var(--tier) 42%, transparent); }

/* barra do tier na borda esquerda */
.boxcard::after {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--tier, var(--gold-500));
  opacity: .9;
}
/* halo do tier vazando por trás da arte */
.boxcard::before {
  content: ""; position: absolute; left: 6px; top: 50%; translate: 0 -50%;
  width: 128px; height: 128px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--tier, var(--gold-500)), transparent 64%);
  opacity: .14; pointer-events: none;
}
.boxcard.is-selected {
  border-color: var(--tier, var(--gold-500));
  box-shadow: 0 0 24px -8px var(--tier, var(--gold-500));
}

.boxcard__art {
  width: 64px; height: 64px; flex: 0 0 auto; position: relative;
  display: grid; place-items: center;
}
.boxcard__art img, .boxcard__art svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}

/* os filhos são <span> dentro de um <button>: sem display:block eles
   fluem inline e nome, preço e linhas viram uma frase só */
.boxcard__info { flex: 1 1 auto; min-width: 0; display: block; }
.boxcard__info > * { display: block; }

.boxcard__head { display: flex !important; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.boxcard__name {
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mid);
}

.boxcard__price {
  display: flex !important; align-items: baseline; gap: 5px;
  margin-top: 1px;
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: 26px; line-height: 1.08;
  color: var(--tier, var(--gold-300));
  font-variant-numeric: tabular-nums;
}
.boxcard__price i {
  font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid);
}

/* linhas e chance viram selos: scaneiam melhor que texto corrido */
.boxcard__tags { display: flex !important; gap: 5px; margin-top: 7px; }
.boxtag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  background: rgba(255,255,255,.045); color: var(--text-mid);
  border: 1px solid var(--line-soft); white-space: nowrap;
}
.boxtag--tier {
  color: var(--tier, var(--gold-300));
  border-color: color-mix(in srgb, var(--tier) 32%, transparent);
  background: color-mix(in srgb, var(--tier) 10%, transparent);
}

.boxcard__go {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-soft); color: var(--text-low);
  transition: all var(--dur-base) var(--ease);
}
.boxcard__go svg { width: 15px; height: 15px; }
.boxcard:hover .boxcard__go {
  border-color: color-mix(in srgb, var(--tier) 55%, transparent);
  color: var(--tier, var(--gold-300));
}

/* ========================================================
   ARENA DO JOGO — o coração do app

   A leitura é vertical e sempre a mesma:
       cordas (corta aqui)  →  box (guarda)  →  pódio (entrega)
   Separar o ponto de corte do ponto de entrega é o que torna a
   relação causa/efeito legível sem precisar de texto.
   ======================================================== */
.game {
  background:
    radial-gradient(86% 42% at 50% 30%, rgba(237,185,72,.15), transparent 62%),
    radial-gradient(130% 38% at 50% 104%, rgba(194,133,27,.16), transparent 60%),
    var(--bg-canvas);
}

.game__head {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--gutter) var(--s-2) var(--s-3);
  flex: 0 0 auto;
}
.game__title { text-align: center; line-height: 1.12; }
.game__title b {
  display: block; font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--text-mid);
}
.game__title span {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-h2); color: var(--gold-300);
}

/* ---------- Palco ---------- */
.arena { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Raios de luz atrás do box.
   repeating-: o conic comum para no último stop e os raios só
   apareceriam num quadrante. */
.arena__rays {
  position: absolute; translate: -50% -50%;
  width: 165%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg,
    transparent 0deg 3deg, rgba(237,185,72,.12) 4deg 6deg, transparent 7deg 15deg,
    rgba(237,185,72,.07) 16deg 18deg, transparent 19deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 7%, transparent 58%);
  mask-image: radial-gradient(circle, #000 7%, transparent 58%);
  animation: sweep 40s linear infinite;
  pointer-events: none; z-index: 0;
  opacity: .55;
  transition: opacity var(--dur-slow) var(--ease), top 700ms var(--ease-out);
}

/* O box, pendurado pelas cordas, à frente de tudo */
.arena__box {
  position: absolute; translate: -50% -50%;
  z-index: 3; pointer-events: none;
  animation: float-y 6s ease-in-out infinite;
  transition: scale var(--dur-base) var(--ease), filter var(--dur-base) var(--ease),
              top 700ms var(--ease-out);
}
/* O halo também sai: está assado no render. */
.arena__box img { width: var(--box-size); height: var(--box-size); }
.arena__box.is-swallowing { scale: 1.1; filter: brightness(1.3) saturate(1.08); }
.arena__box.is-opening { animation: box-pop 640ms var(--ease-back); }

/* Pódio: o disco dourado onde o prêmio aterrissa */
.arena__podium {
  position: absolute; left: 50%; translate: -50% -50%;
  width: 66%; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(237,185,72,.3), transparent 72%);
  border-bottom: 1.5px solid rgba(237,185,72,.26);
  z-index: 1; pointer-events: none;
  transition: filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.arena__podium::after {
  content: ""; position: absolute; inset: 22% 16%;
  border-radius: 50%; border: 1px solid rgba(237,185,72,.2);
}
/* na vitrine o pódio fica fraco: ainda não há nada para aterrissar,
   mas sem ele a metade de baixo do palco fica sem chão */
.arena[data-phase="showcase"] .arena__podium,
.arena[data-phase="sealing"] .arena__podium { opacity: .35; }
/* a partir do corte ele acende: é onde o prêmio vai cair */
.arena__podium.is-ready { filter: brightness(1.5); }
.arena__podium.is-lit { filter: brightness(2.2); }

.arena__web {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; z-index: 2;
}

/* ---------- Cordas de cima: o alvo do corte ---------- */
.rope-path {
  fill: none; stroke: url(#ropeGrad); stroke-width: 1.7; stroke-linecap: round;
  transition: stroke-width var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease);
}
.rope-knot { fill: var(--gold-200); opacity: .85; transition: opacity var(--dur-base) var(--ease); }
/* Desenho NAO recebe ponteiro. Quem recebe e a area de toque.
   Sem isto, o traco visivel de uma corda posterior fica POR CIMA da
   faixa de toque de uma anterior (ordem do DOM), e o toque cai no
   desenho errado. Medido: so 38% dos pontos sobre uma corda acertavam
   a propria corda. O no e os fios da vitrine entram pelo mesmo motivo. */
.rope-path, .rope-knot, .hang-path { pointer-events: none; }

/* A area de toque e uma FAIXA preenchida, nao o traco.
   `fill: transparent` com `pointer-events: fill` da um alvo grande e
   invisivel; `pointer-events: stroke` com 24px dava um alvo fino que
   seguia a curva - e o centro da caixa de uma corda curva nem sequer
   fica sobre ela. Ver `ropeHitPath` em game.js. */
.rope-hit { fill: transparent; stroke: none; pointer-events: none; }

/* só na fase de corte a corda aceita toque */
.arena[data-phase="cut"] .rope-hit { pointer-events: fill; cursor: pointer; }
/* e só aí ela ganha o pulso que convida ao corte */
.arena[data-phase="cut"] .rope-path { animation: rope-breathe 3.2s ease-in-out infinite; }
.arena[data-phase="cut"] .rope:nth-child(2n) .rope-path { animation-delay: -1.1s; }
.arena[data-phase="cut"] .rope:nth-child(3n) .rope-path { animation-delay: -2.2s; }

/* O anel de foco padrão desenha a caixa delimitadora do path — numa
   corda curva isso vira um retângulo branco atravessando a arena.
   Suprimimos e marcamos o foco na própria corda. */
.rope-hit:focus, .rope-hit:focus-visible { outline: none; }
.rope:has(.rope-hit:focus-visible) .rope-path,
.rope.is-hover .rope-path {
  stroke: var(--gold-100); stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(255,238,188,.9));
  animation: none;
}
.rope.is-cut .rope-path { opacity: .15; stroke-dasharray: 3 6; animation: none; }
.rope.is-cut .rope-knot { opacity: 0; }
.rope.is-dead .rope-path { opacity: .12; animation: none; }

/* ---------- Fios da vitrine: decorativos ---------- */
.hang-path {
  fill: none; stroke: url(#hangGrad); stroke-width: 1.5; stroke-linecap: round;
  transition: opacity var(--dur-base) var(--ease);
}
/* na selagem os prêmios trocam de lugar e o fio não acompanha; apagá-los
   esconde o descasamento e lê como se recolhessem para dentro do box */
.arena[data-phase="sealing"] .hang-path { opacity: .06; }

/* ========================================================
   ETIQUETA DE PRÊMIO
   Quatro faixas de raridade. Não é enfeite: num tabuleiro de 20
   itens o olho precisa achar o iPhone no meio das meias furadas.
   ======================================================== */
.prize-tag {
  position: absolute; translate: -50% 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  animation: swing var(--swing-dur, 3s) ease-in-out infinite;
  animation-delay: var(--swing-delay, 0s);
  will-change: transform, translate;
}

/* o gancho sela a metáfora: a etiqueta está PENDURADA, não colada */
.prize-tag__hook {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  background: var(--bg-canvas);
  margin-bottom: -4px; z-index: 1;
  box-shadow: 0 0 5px rgba(237,185,72,.5);
}

.prize-tag__art {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(165deg, var(--bg-surface-3), var(--bg-surface));
  border: 1px solid var(--line);
  box-shadow: var(--sh-card), inset 0 1px 0 rgba(255,255,255,.07);
}
.prize-tag__art svg, .prize-tag__art img { width: 38px; height: 38px; object-fit: contain; }
.prize-tag__art b {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-sm); letter-spacing: -.02em;
}

/* A etiqueta tem fundo próprio: com fileiras escalonadas, nomes de
   colunas vizinhas se encostam e sem o fundo viram uma linha ilegível. */
.prize-tag__label {
  margin-top: 5px;
  font-size: 9px; font-weight: var(--fw-bold); color: var(--text-mid);
  letter-spacing: .01em; white-space: nowrap; text-align: center;
  max-width: 46px; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 5px; border-radius: var(--r-full);
  background: rgba(10, 7, 3, .86);
}

/* --- faixas de raridade --- */
/* O prêmio ruim é discreto, não invisível: o argumento de honestidade
   depende de dar para ver que ele está lá. */
.prize-tag--dud .prize-tag__art {
  border-style: dashed; border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  box-shadow: none; opacity: .78;
}
.prize-tag--dud .prize-tag__hook { border-color: var(--text-mid); box-shadow: none; }
.prize-tag--dud .prize-tag__label { color: var(--text-mid); }

.prize-tag--rare .prize-tag__art {
  border-color: rgba(237,185,72,.45);
  box-shadow: var(--sh-card), 0 0 14px -2px rgba(237,185,72,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.prize-tag--rare .prize-tag__label { color: var(--gold-200); }

.prize-tag--epic .prize-tag__art {
  border-color: var(--gold-400);
  background: linear-gradient(165deg, #2A1E08, #15100A);
  box-shadow: var(--sh-card), 0 0 22px -2px rgba(237,185,72,.75), inset 0 1px 0 rgba(255,255,255,.16);
}
/* varredura de brilho só no topo da raridade: se todo item brilhasse,
   nenhum brilharia */
.prize-tag--epic .prize-tag__art::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-sheen);
  transform: translateX(-130%);
  animation: sheen 3.6s var(--ease) infinite;
}
.prize-tag--epic .prize-tag__label {
  color: var(--text-on-gold); background: var(--grad-gold-cta); font-weight: var(--fw-black);
}
.prize-tag--epic .prize-tag__hook { border-color: var(--gold-200); }

/* dinheiro: o selo vermelho da referência, qualquer que seja a faixa */
.prize-tag--cash .prize-tag__art {
  background: linear-gradient(165deg, #D4453A, #8E1F18);
  border-color: rgba(255,170,160,.42);
  color: #fff;
}
.prize-tag--cash.prize-tag--epic .prize-tag__art {
  border-color: #FFD9A0;
  box-shadow: var(--sh-card), 0 0 22px -2px rgba(237,185,72,.7), inset 0 1px 0 rgba(255,255,255,.26);
}

/* ---------- Prêmio descendo do box para o pódio ---------- */
.prize-drop {
  position: absolute; translate: -50% -50%; z-index: 4;
  animation: descend 1120ms var(--ease-out) forwards;
}
.prize-drop .prize-tag__hook { display: none; }
.prize-drop .prize-tag__art {
  width: 74px; height: 74px; border-radius: var(--r-md);
  border-color: var(--gold-400);
  box-shadow: var(--glow-md), inset 0 1px 0 rgba(255,255,255,.18);
}
.prize-drop .prize-tag__art svg, .prize-drop .prize-tag__art img { width: 62px; height: 62px; }
.prize-drop .prize-tag__art b { font-size: var(--fs-h2); }
.prize-drop .prize-tag__label { margin-top: 8px; font-size: var(--fs-xs); max-width: none; }

/* ---------- Tesoura e flash do corte ---------- */
.snip {
  position: absolute; z-index: 6; translate: -50% -50%;
  width: 32px; height: 32px; color: var(--gold-100);
  filter: drop-shadow(0 0 8px rgba(255,238,188,.9));
  animation: snip 620ms var(--ease) forwards;
  pointer-events: none;
}
.cutflash {
  position: absolute; z-index: 5; translate: -50% -50%;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), transparent 62%);
  animation: cut-flash 520ms var(--ease-out) forwards;
  pointer-events: none;
}

/* ---------- Faixa de instrução, acima do rodapé ---------- */
.gamehint {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px var(--gutter);
  font-size: var(--fs-xs); color: var(--text-mid); text-align: center;
  min-height: 30px;
}
.gamehint svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ok); }
.gamehint b { color: var(--gold-200); font-weight: var(--fw-bold); }

/* ---------- Rodapé: fichas + ação ---------- */
.game__foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--bg-canvas) 34%);
}
.tickets {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: var(--bg-surface-2); border: 1px solid var(--line);
  flex: 0 0 auto;
}
.tickets svg { width: 22px; height: 22px; }
.tickets__n {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-h3); color: var(--gold-200); font-variant-numeric: tabular-nums;
}
.tickets__lbl { font-size: 9px; color: var(--text-mid); letter-spacing: .1em; text-transform: uppercase; }

.cutbtn {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 58px; padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--grad-gold-cta); color: var(--text-on-gold);
  box-shadow: var(--glow-cta);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease);
}
.cutbtn:active { transform: scale(.975); }
.cutbtn[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }
.cutbtn svg { width: 24px; height: 24px; flex: 0 0 auto; }
.cutbtn__t {
  display: block;
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-h3); letter-spacing: .05em; text-transform: uppercase; line-height: 1.1;
}
.cutbtn__s { display: block; font-size: var(--fs-micro); font-weight: var(--fw-semi); opacity: .74; }


/* ========================================================
   RESULTADO (ganhou / prêmio pequeno / não ganhou)
   ======================================================== */
.result {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: var(--s-6) var(--gutter) 0;
  text-align: center;
}
.result--win  { background: radial-gradient(75% 48% at 50% 26%, rgba(237,185,72,.26), transparent 64%), var(--bg-canvas); }
.result--loss { background: radial-gradient(75% 48% at 50% 26%, rgba(120,120,130,.10), transparent 64%), var(--bg-canvas); }

.result__kicker {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: 42px; line-height: 1; letter-spacing: -.02em;
}
.result__sub {
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-mid);
  margin-top: 6px;
}

/* Moldura do prêmio conquistado */
.prizeframe {
  position: relative;
  margin: var(--s-6) auto 0;
  width: min(272px, 82%);
  padding: var(--s-5) var(--s-5) var(--s-5);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--gold-500);
  background: linear-gradient(180deg, rgba(237,185,72,.10), rgba(10,7,3,.6));
  box-shadow: var(--glow-md), inset 0 0 40px rgba(237,185,72,.08);
}
.prizeframe__art { width: 128px; height: 128px; margin-inline: auto; }
.prizeframe__art img { width: 100%; height: 100%; object-fit: contain; }
.prizeframe__name {
  margin-top: var(--s-4);
  font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-h2);
  color: var(--text-hi);
}
.prizeframe__value {
  font-family: var(--ff-display); font-weight: var(--fw-black); font-size: 26px;
  color: var(--gold-300); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.prizeframe__ring {
  position: absolute; inset: -2px; border-radius: inherit;
  border: 1.5px solid var(--gold-400);
  animation: ring-burst 1.6s var(--ease-out) .25s;
  pointer-events: none;
}

/* Estado de derrota — sóbrio, honesto, sem punir o usuário */
.lossframe {
  margin: var(--s-6) auto 0;
  width: min(290px, 86%);
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-xl);
  border: 1.5px dashed var(--line-strong);
  background: var(--bg-surface);
}
.lossframe__art { width: 104px; height: 104px; margin-inline: auto; opacity: .75; }

/* Fita de status (crédito em 24h / entrega) */
.statusstrip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: var(--bg-surface);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-mid);
  text-align: left; line-height: 1.35;
}
.statusstrip svg { width: 20px; height: 20px; color: var(--gold-300); flex: 0 0 auto; }

/* Bloco de verificação (provably fair) */
.fairbox {
  margin-top: var(--s-5); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--bg-surface); border: 1px solid var(--line-soft);
  text-align: left;
}
.fairbox__row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 3px 0; font-size: var(--fs-micro); }
.fairbox__row span { color: var(--text-low); flex: 0 0 auto; }
.fairbox__row code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ========================================================
   COMPRAR FICHAS
   ======================================================== */
.balancecard {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-surface-2), var(--bg-surface));
  border: 1px solid var(--line);
}
.balancecard svg { width: 36px; height: 36px; flex: 0 0 auto; }
.balancecard__v {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-h1); color: var(--text-hi); font-variant-numeric: tabular-nums;
}

.pack {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1.5px solid var(--line-soft);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pack:active { transform: scale(.985); }
.pack.is-best { border-color: var(--line-strong); background: var(--bg-surface-2); }
.pack__art { width: 40px; height: 40px; flex: 0 0 auto; }
.pack__n {
  font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-body);
  color: var(--text-hi);
}
.pack__p { font-size: var(--fs-sm); color: var(--text-mid); font-variant-numeric: tabular-nums; }
.pack__bonus {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ok);
  text-align: center; line-height: 1.15; flex: 0 0 auto; white-space: nowrap;
}
/* o selo fica na borda de cima à ESQUERDA: à direita ele cobria o
   botão Comprar, que é justamente o alvo de toque da linha */
.pack.is-best { margin-top: 10px; }
.pack__flag {
  position: absolute; top: -10px; left: var(--s-4);
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: 9px; font-weight: var(--fw-black); letter-spacing: .1em; text-transform: uppercase;
  background: var(--grad-gold-cta); color: var(--text-on-gold);
}

/* ========================================================
   DEPÓSITO PIX
   ======================================================== */
.qrcard {
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: #fff;
}
.qrcard svg { width: 190px; height: 190px; }
.copyfield {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-surface-2); border: 1px dashed var(--line-strong);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: var(--fs-xs); color: var(--text-mid);
}
.copyfield span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.amountgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.amountgrid button {
  height: 46px; border-radius: var(--r-md);
  background: var(--bg-surface); border: 1.5px solid var(--line-soft);
  font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-body);
  color: var(--text-hi); font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast) var(--ease);
}
.amountgrid button.is-active { border-color: var(--gold-500); color: var(--gold-200); background: var(--bg-surface-2); }

/* Valor grande digitado (saque / depósito) */
.bigamount {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  padding: var(--s-6) 0 var(--s-4);
}
.bigamount span { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--text-mid); }
.bigamount input {
  width: auto; max-width: 70%;
  font-family: var(--ff-display); font-weight: var(--fw-black); font-size: 44px;
  color: var(--text-hi); text-align: center; font-variant-numeric: tabular-nums;
  padding: 0;
}

/* ========================================================
   KYC
   ======================================================== */
.kycslot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--line-strong);
  background: var(--bg-surface);
  width: 100%; text-align: left;
}
.kycslot__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--bg-surface-3); color: var(--gold-300); flex: 0 0 auto; }
.kycslot__ico svg { width: 22px; height: 22px; }
.kycslot.is-done { border-style: solid; border-color: var(--ok-border); background: var(--ok-bg); }
.kycslot.is-done .kycslot__ico { color: var(--ok); }

.kycsteps { display: flex; gap: 6px; }
.kycsteps i { flex: 1; height: 3px; border-radius: var(--r-full); background: var(--bg-surface-3); }
.kycsteps i.is-done { background: var(--gold-500); }

/* ========================================================
   HISTÓRICO
   ======================================================== */
.histrow {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
}
.histrow__art {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--bg-surface-3);
}
.histrow__art svg, .histrow__art img { width: 34px; height: 34px; object-fit: contain; }
.histrow__date { font-size: var(--fs-micro); color: var(--text-low); font-variant-numeric: tabular-nums; }
.histrow__box  { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-hi); }
.histrow__val  { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.histrow--loss .histrow__val { color: var(--text-low); }

/* ========================================================
   PERFIL
   ======================================================== */
.profile__head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--gutter) var(--s-5); }
.avatar {
  width: 62px; height: 62px; border-radius: var(--r-full); flex: 0 0 auto;
  background: var(--bg-surface-3);
  border: 2px solid var(--gold-500);
  box-shadow: var(--glow-sm);
  object-fit: cover;
  display: grid; place-items: center;
  overflow: hidden;
}
.avatar svg { width: 34px; height: 34px; color: var(--gold-700); }
.profile__name { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--text-hi); }
.profile__tier { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--gold-300); font-weight: var(--fw-semi); }
.profile__tier svg { width: 14px; height: 14px; }

.statgrid { display: grid; grid-template-columns: 1fr 1fr; }
.statgrid > div { padding: var(--s-4); }
.statgrid > div + div { border-left: 1px solid var(--line-soft); }
.stat__v { font-family: var(--ff-display); font-weight: var(--fw-black); font-size: var(--fs-h1); color: var(--text-hi); font-variant-numeric: tabular-nums; }
.stat__l { font-size: var(--fs-xs); color: var(--text-mid); }

/* Faixa promocional do rodapé do perfil */
.promostrip {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: radial-gradient(110% 160% at 0% 50%, rgba(237,185,72,.16), transparent 60%), var(--bg-surface);
}
.promostrip svg:first-child { width: 26px; height: 26px; color: var(--tier-diamante); flex: 0 0 auto; }

/* ========================================================
   TABELA DE PRÊMIOS E PROBABILIDADES
   ======================================================== */
.oddshead {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--line);
}
.oddshead__art { width: 54px; height: 54px; flex: 0 0 auto; }
.rtp {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-h1); color: var(--gold-300); font-variant-numeric: tabular-nums;
}
.oddsrow__art { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.oddsrow__name { display: flex; align-items: center; gap: var(--s-2); }
.oddsbar { width: 54px; height: 5px; border-radius: var(--r-full); background: var(--bg-surface-3); overflow: hidden; display: inline-block; vertical-align: middle; }
.oddsbar i { display: block; height: 100%; background: var(--grad-gold-cta); border-radius: inherit; }

/* ========================================================
   LIMITES / JOGO RESPONSÁVEL
   ======================================================== */
.limitrow { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); }
.limitrow:last-child { border-bottom: 0; }
.limitrow__v { font-family: var(--ff-display); font-weight: var(--fw-bold); color: var(--gold-300); font-variant-numeric: tabular-nums; }

/* ========================================================
   SUPORTE
   ======================================================== */
.faq { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; text-align: left; padding: var(--s-4) 0;
  font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--text-hi);
}
.faq__q svg { width: 18px; height: 18px; color: var(--text-low); flex: 0 0 auto; transition: transform var(--dur-base) var(--ease); }
.faq.is-open .faq__q svg { transform: rotate(180deg); }
.faq__a { display: none; padding-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.55; }
.faq.is-open .faq__a { display: block; }

/* ========================================================
   OFFLINE
   ======================================================== */
.offline { display: grid; place-items: center; min-height: 100%; padding: var(--s-6); text-align: center; }

/* ========================================================
   SELETOR DE IDIOMA
   ======================================================== */
.langrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.langbtn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  background: var(--bg-surface); border: 1.5px solid var(--line-soft);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-mid);
  transition: all var(--dur-fast) var(--ease);
}
.langbtn b { font-size: 22px; line-height: 1; font-weight: 400; }
.langbtn.is-active {
  border-color: var(--gold-500); color: var(--gold-200);
  background: var(--bg-surface-2); box-shadow: var(--glow-sm);
}

/* ========================================================
   CONTA — entrar, cadastrar, confirmar, recuperar
   ======================================================== */
.auth__logo { width: min(190px, 52%); margin-inline: auto; margin-top: var(--s-4); }

/* separador "ou" entre entrar e criar conta */
.ou {
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-4);
  color: var(--text-low); font-size: var(--fs-xs);
}
.ou::before, .ou::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

/* olho de mostrar senha: botão de verdade, não ícone decorativo */
.field__olho {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r-full);
  color: var(--text-low);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field__olho:hover { color: var(--gold-200); background: rgba(255,255,255,.05); }
.field__olho.is-on { color: var(--gold-300); }
.field__olho svg { width: 19px; height: 19px; }

/* barra de etapas do cadastro */
.passos-barra { display: flex; gap: 6px; }
.passos-barra i {
  flex: 1; height: 3px; border-radius: var(--r-full);
  background: var(--bg-surface-3);
  transition: background var(--dur-base) var(--ease);
}
.passos-barra i.is-done { background: var(--gold-500); }

/* força da senha: quatro blocos que acendem conforme a regra passa */
.forca { display: flex; gap: 4px; margin-top: 6px; }
.forca i {
  flex: 1; height: 3px; border-radius: var(--r-full); background: var(--bg-surface-3);
  transition: background var(--dur-base) var(--ease);
}
.forca[data-nivel="1"] i:nth-child(-n+1) { background: var(--danger); }
.forca[data-nivel="2"] i:nth-child(-n+2) { background: var(--warn); }
.forca[data-nivel="3"] i:nth-child(-n+3) { background: var(--gold-400); }
.forca[data-nivel="4"] i { background: var(--ok); }

/* caixa de seleção: o <input> some, o quadrado desenhado assume —
   com :has o estado continua vindo do input, não de classe no JS */
.check {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-3);
  cursor: pointer; padding: var(--s-2) 0;
}
/* O input fica INVISÍVEL MAS DO TAMANHO da caixa desenhada, sobreposto
   a ela. Zerar width/height tira o alvo de toque e deixa o controle
   fora do alcance de automação e de parte da tecnologia assistiva. */
.check input {
  position: absolute; left: 0; top: calc(var(--s-2) + 1px);
  width: 22px; height: 22px; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.check__box {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: var(--r-xs);
  border: 1.5px solid var(--line-strong);
  background: var(--bg-surface);
  transition: all var(--dur-fast) var(--ease);
}
.check__box svg { width: 15px; height: 15px; color: var(--text-on-gold); opacity: 0; transform: scale(.5); transition: all var(--dur-fast) var(--ease-back); }
.check:has(input:checked) .check__box { background: var(--grad-gold-cta); border-color: transparent; }
.check:has(input:checked) .check__box svg { opacity: 1; transform: scale(1); }
.check:has(input:focus-visible) .check__box { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.check__txt { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-mid); }
.check__txt b { color: var(--gold-200); font-weight: var(--fw-semi); }

/* ---------- código de confirmação ---------- */
.otp__ico {
  display: grid; place-items: center;
  width: 66px; height: 66px; margin: var(--s-5) auto 0;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line-strong);
  background: radial-gradient(circle at 50% 30%, rgba(237,185,72,.16), transparent 70%);
  color: var(--gold-300);
}
.otp__ico svg { width: 30px; height: 30px; }

.otp { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.otp input {
  flex: 1; min-width: 0; height: 58px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1.5px solid var(--line-soft);
  text-align: center;
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: 24px; color: var(--text-hi);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.otp input:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--glow-sm); }
.otp input.is-filled { border-color: var(--line-strong); color: var(--gold-200); }
.otp.is-erro input { border-color: var(--danger); }

/* ---------- documentos legais ---------- */
.doc { max-width: 68ch; }
.doc__data {
  font-size: var(--fs-xs); color: var(--text-low);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-4);
}
.doc h2 {
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); color: var(--gold-200);
  margin-top: var(--s-7); margin-bottom: var(--s-2);
}
.doc h2:first-of-type { margin-top: var(--s-6); }
.doc p {
  font-size: var(--fs-sm); line-height: 1.68; color: var(--text-mid);
}
.doc p + p { margin-top: var(--s-3); }
.doc b { color: var(--text-hi); font-weight: var(--fw-semi); }