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

.boxlist { display: grid; gap: var(--s-3); padding: 4px var(--gutter) 0; }
.boxpulse {
  margin: 0 var(--gutter) 8px; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(237,185,72,.26); border-radius: var(--r-md);
  color: var(--gold-100); background: rgba(237,185,72,.07);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.boxpulse[hidden] { display: none; }
.boxpulse::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-300); box-shadow: 0 0 12px var(--gold-300);
  animation: boxpulse-dot 1.4s ease-in-out infinite;
}
@keyframes boxpulse-dot { 50% { opacity: .42; transform: scale(.72); } }
.boxcard__trend {
  display: none; padding: 2px 7px; border-radius: var(--r-full);
  color: #171006; background: var(--gold-300); font-size: 9px;
  font-weight: var(--fw-black); letter-spacing: .07em;
}
.boxcard.is-hot .boxcard__trend { display: inline-flex; }
.boxcard.is-hot {
  border-color: color-mix(in srgb, var(--tier) 76%, var(--gold-300));
  box-shadow: 0 0 calc(12px + var(--box-glow, 7px)) -5px var(--tier);
}
.boxcard[data-active="true"]::before { opacity: var(--box-halo, .14); }

/* ---- 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;
  white-space: nowrap;
  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: inline-flex; align-items: center; gap: 3px;
  min-height: 30px; padding: 0 9px 0 11px; border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--tier) 42%, transparent);
  color: var(--tier, var(--gold-300));
  background: color-mix(in srgb, var(--tier) 9%, transparent);
  transition: all var(--dur-base) var(--ease);
}
.boxcard__go b {
  font-family: var(--ff-display); font-size: 10px; font-weight: var(--fw-black);
  letter-spacing: .08em; text-transform: uppercase;
}
.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));
  background: color-mix(in srgb, var(--tier) 15%, transparent);
}

/* Comprar saldo apoia o jogo, mas não disputa atenção com as boxes. */
.home__buy {
  min-height: 46px;
  color: var(--gold-300);
  border-color: rgba(237,185,72,.26);
  background: rgba(237,185,72,.045);
  box-shadow: none;
}

/* Confirmação de jogo: explica a ação sem jogar probabilidades na frente
   do CTA. Os números continuam disponíveis na tela de transparência. */
.preplay-note {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: var(--r-md);
  border: 1px solid rgba(237,185,72,.16);
  background: linear-gradient(135deg, rgba(237,185,72,.075), rgba(255,255,255,.018));
}
.preplay-box {
  position:relative; padding:12px; border:1px solid color-mix(in srgb, var(--tier) 34%, transparent);
  border-radius:var(--r-lg); background:radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--tier) 15%, transparent), transparent 45%);
}
.preplay-box img { filter:drop-shadow(0 0 12px color-mix(in srgb, var(--tier) 44%, transparent)); }
.preplay-box__name {
  display:block; color:var(--tier); font-family:var(--ff-display); font-size:11px;
  letter-spacing:.15em; text-transform:uppercase;
}
.preplay-note__icon {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; color: var(--gold-200); background: rgba(237,185,72,.1);
}
.preplay-note__icon svg { width: 19px; height: 19px; }
.preplay-note b { display: block; color: var(--text-hi); font-size: var(--fs-sm); }
.preplay-note small { display: block; margin-top: 2px; color: var(--text-mid); line-height: 1.35; }
.preplay-proof {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; margin-top: 8px; color: var(--text-low); font-size: var(--fs-xs);
}
.preplay-proof svg { width: 14px; height: 14px; }
.preplay-proof svg:last-child { width: 12px; }
.preplay-proof:active { color: var(--gold-300); }
.turbo-picker {
  padding: 12px; border: 1px solid rgba(255,118,39,.2); border-radius: var(--r-md);
  background: radial-gradient(circle at 100% 0, rgba(255,98,24,.11), transparent 52%), rgba(255,255,255,.018);
}
.turbo-picker__label b { display:block; color:var(--text-hi); font-size:var(--fs-sm); }
.turbo-picker__label small { display:block; margin-top:2px; color:var(--text-low); font-size:var(--fs-xs); line-height:1.35; }
.turbo-picker__options { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.turbo-option {
  min-height:38px; border:1px solid var(--line-soft); border-radius:10px;
  color:var(--text-mid); background:rgba(255,255,255,.025); font-weight:var(--fw-black);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.turbo-option:active { transform:scale(.95); }
.turbo-option.is-active {
  color:#fff4d1; border-color:#ff922e;
  background:linear-gradient(145deg, rgba(255,142,35,.3), rgba(196,51,9,.28));
  box-shadow:0 0 18px rgba(255,92,16,.16), inset 0 1px rgba(255,255,255,.13);
}

/* ========================================================
   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__boxswitch {
  position: relative; z-index: 7;
  display: grid; grid-template-columns: 42px 1fr 42px; align-items: center;
  gap: 10px; margin: 0 var(--gutter) 2px; min-height: 40px;
  border: 1px solid rgba(237,185,72,.2); border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(237,185,72,.04), rgba(237,185,72,.1), rgba(237,185,72,.04));
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  animation: boxswitch-in 280ms var(--ease-back);
}
.game__boxswitch[hidden] { display: none; }
.game__boxswitch-arrow {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--gold-200); background: rgba(237,185,72,.08);
}
.game__boxswitch-arrow:active { transform: scale(.9); background: rgba(237,185,72,.18); }
.game__boxswitch-arrow:disabled { opacity: .35; }
.game__boxswitch-arrow svg { width: 18px; height: 18px; }
.game__boxswitch-center { text-align: center; pointer-events: none; }
.game__boxswitch-center small {
  display: block; color: var(--text-mid); font-size: 8px; font-weight: var(--fw-black); letter-spacing: .14em;
}
.game__boxswitch-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.game__boxswitch-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong);
  transition: width .2s ease, background .2s ease;
}
.game__boxswitch-dots i.is-active { width: 18px; border-radius: 6px; background: var(--gold-300); }
@keyframes boxswitch-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } }
.game__live {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 26px; margin: 2px var(--gutter) 0; padding: 4px 10px;
  border: 1px solid rgba(237,185,72,.22); border-radius: var(--r-full);
  color: var(--gold-100); background: rgba(237,185,72,.055);
  font-size: 10px; font-weight: var(--fw-semi); line-height: 1.2;
  white-space: nowrap;
  animation: boxswitch-in 260ms var(--ease-back);
}
.game__live[hidden] { display: none; }
.game__live::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%;
  background: var(--arena-tier, var(--gold-300));
  box-shadow: 0 0 10px var(--arena-tier, var(--gold-300));
  animation: boxpulse-dot 1.4s ease-in-out infinite;
}
.game__tools { display: flex; align-items: center; gap: 6px; }
.game__sound {
  display: inline-flex; place-items: center; align-items: center; justify-content: center; gap: 5px;
  width: auto; min-width: 54px; height: 32px; padding: 0 8px; flex: 0 0 auto;
  border-radius: var(--r-full); color: var(--gold-200);
  background: rgba(237,185,72,.07); border: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.game__sound:active { transform: scale(.9); }
.game__sound[aria-pressed="false"] { color: var(--text-low); background: rgba(255,255,255,.025); }
.soundlabel { font: 800 9px/1 var(--ff-display); letter-spacing: .09em; }
.soundeq { display: inline-flex; align-items: end; gap: 2px; width: 13px; height: 14px; }
.soundeq i { width: 3px; height: 5px; border-radius: 3px; background: currentColor; }
.game__sound.is-on .soundeq i { animation: soundeq .72s ease-in-out infinite alternate; }
.game__sound.is-on .soundeq i:nth-child(2) { height: 11px; animation-delay: -.42s; }
.game__sound.is-on .soundeq i:nth-child(3) { height: 8px; animation-delay: -.19s; }
@keyframes soundeq { 0% { height: 4px; opacity: .65; } 100% { height: 13px; opacity: 1; } }
.app-sound {
  position: fixed;
  z-index: 72;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 58px;
  height: 34px;
  background: rgba(15, 11, 5, .88);
  border-color: rgba(237, 185, 72, .32);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38), 0 0 16px rgba(237, 185, 72, .08);
  backdrop-filter: blur(10px);
}
.app-sound:active { transform: translateX(-50%) scale(.94); }
/* O controle flutuante só pertence à home. Nas telas com appbar ele
   disputava espaço com o título; na arena há um controle próprio. */
html:not([data-route="home"]) .app-sound { display: none; }

.audiosettings { display: grid; gap: 10px; }
.audiosettings__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.audiosettings__row span { display: grid; gap: 3px; }
.audiosettings__row b { color: var(--text-hi); font-size: var(--fs-sm); }
.audiosettings__row small { color: var(--text-mid); font-size: var(--fs-xs); line-height: 1.35; }
.audiosettings__row output {
  min-width: 48px; padding: 5px 8px; border: 1px solid rgba(237,185,72,.28);
  border-radius: var(--r-full); color: var(--gold-200); background: rgba(237,185,72,.07);
  font: 800 11px/1 var(--ff-display); text-align: center;
}
.audiosettings__range {
  width: 100%; height: 28px; margin: 0 0 6px; padding: 0; cursor: pointer;
  appearance: none; background: transparent; accent-color: var(--gold-300);
}
.audiosettings__range::-webkit-slider-runnable-track {
  height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.audiosettings__range::-webkit-slider-thumb {
  appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  border: 3px solid #171006; background: var(--gold-200); box-shadow: 0 0 0 1px var(--gold-500), 0 3px 12px rgba(237,185,72,.35);
}
.audiosettings__range::-moz-range-track { height: 7px; border-radius: 99px; background: var(--gold-400); }
.audiosettings__range::-moz-range-thumb { width: 21px; height: 21px; border: 3px solid #171006; border-radius: 50%; background: var(--gold-200); }
.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);
}
.game__turbo {
  display:table; margin:3px auto 0; padding:2px 7px; border:1px solid rgba(255,132,38,.68);
  border-radius:99px; color:#ffd79d; background:rgba(161,43,7,.44); box-shadow:0 0 13px rgba(255,79,15,.24);
  font:900 9px/1.2 var(--ff-display); letter-spacing:.12em; font-style:normal;
}
.game__turbo[hidden] { display:none; }

/* Tutorial de primeira entrada. A arena continua visível e operável: o
   cartão orienta, não vira uma parede cobrindo o jogo. */
.gamecoach {
  position: absolute; z-index: 90; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--tabbar-h) + 12px); padding: 14px 15px 15px;
  border: 1px solid rgba(237,185,72,.46); border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(31,23,9,.97), rgba(12,9,5,.97));
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 28px rgba(237,185,72,.09);
  animation: coach-in 360ms var(--ease-back);
}
.coach-shield {
  position:absolute; z-index:80; inset:0;
  background:transparent; pointer-events:none;
  animation:coach-shield-in 220ms ease-out;
}
.coach-shield.is-free { pointer-events:none; background:rgba(0,0,0,.34); }
.gamecoach.gamecoach--top { top: 76px; bottom:auto; }
.gamecoach__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gamecoach__eyebrow {
  color: var(--gold-300); font-size: 10px; font-weight: var(--fw-black);
  letter-spacing: .16em;
}
.gamecoach__skip { color: var(--text-mid); font-size: var(--fs-xs); padding: 4px 0; }
.gamecoach__progress { height: 3px; margin: 9px 0 12px; border-radius: 9px; background: rgba(255,255,255,.08); overflow:hidden; }
.gamecoach__progress i { display:block; width:20%; height:100%; border-radius:inherit; background:var(--grad-gold-cta); transition:width 320ms var(--ease); }
.gamecoach__title { display:block; color:var(--text-hi); font-family:var(--ff-display); font-size:var(--fs-lg); }
.gamecoach__text { margin:5px 0 12px; color:var(--text-mid); font-size:var(--fs-sm); line-height:1.45; }
.gamecoach__next { min-height:42px; }
.game.is-tutorial .game__title b::after {
  content:' · treino'; color:var(--gold-300); letter-spacing:.08em;
}
.game.is-tutorial[data-coach="prizes"] .prize-tag { filter:drop-shadow(0 0 8px rgba(237,185,72,.42)); }
.game.is-tutorial[data-coach="cut"] .rope-path { stroke-width:2.7; filter:drop-shadow(0 0 6px rgba(255,238,188,.55)); }
.game.is-tutorial[data-coach="cut"] .gamecoach {
  top: auto; bottom: calc(102px + env(safe-area-inset-bottom));
  padding: 10px 13px 11px;
}
.game.is-tutorial[data-coach="cut"] .gamecoach__progress { margin: 6px 0 8px; }
.game.is-tutorial[data-coach="cut"] .gamecoach__text { margin: 3px 0 0; font-size: var(--fs-xs); }
.coach-target {
  position:relative; z-index:95 !important;
  filter:drop-shadow(0 0 11px rgba(255,220,112,.98));
  box-shadow:0 0 0 9999px rgba(0,0,0,.66), 0 0 0 2px var(--gold-300), 0 0 26px rgba(237,185,72,.85) !important;
  animation:coach-target-bob 1.25s ease-in-out infinite;
}
.coach-target::after {
  content:""; position:absolute; inset:-5px; border:1px solid var(--gold-300);
  border-radius:var(--r-md); pointer-events:none; animation:coach-pulse 1.4s ease-in-out infinite;
}
.arena.coach-target { animation:none; }
@keyframes coach-in { from { opacity:0; translate:0 -10px; scale:.98; } }
@keyframes coach-pulse { 50% { opacity:.38; scale:1.06; } }
@keyframes coach-target-bob { 50% { translate:0 -3px; } }
@keyframes coach-shield-in { from { opacity:0; } }

@media (max-height: 640px) {
  .gamecoach.gamecoach--top { top: 62px; }
  .gamecoach { padding: 11px 13px 12px; }
  .gamecoach__text { margin-bottom:9px; line-height:1.35; }
}

/* ---------- Palco ---------- */
.arena { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.arena.is-resolving .arena__box { animation: tension-pulse .72s ease-in-out infinite; }
.arena.is-resolving .rope-path { opacity: .38; }
.arena.is-impact { animation: arena-impact 360ms var(--ease-out); }

/* Atmosfera procedural: leve, funciona offline e dá profundidade sem
   transformar o jogo num vídeo pesado. */
.arena__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.arena__halo {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%;
  width: min(115vw, 560px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--arena-tier) 20%, transparent) 0 12%, transparent 50%),
    repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(237,185,72,.055) 9deg 11deg, transparent 12deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0 18%, transparent 68%);
  animation: arena-halo-turn 34s linear infinite;
}
.arena__dust { position: absolute; inset: 0; }
.arena__dust i {
  position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%;
  background: var(--gold-100); box-shadow: 0 0 7px var(--gold-300);
  opacity: .18; animation: dust-rise var(--d) ease-in-out var(--delay) infinite;
}
.arena[data-phase="cut"] .arena__halo { opacity: .9; animation-duration: 20s; }
.arena[data-phase="revealing"] .arena__halo { opacity: 1; filter: brightness(1.8); }
.arena[data-turbo]:not([data-turbo="1"]) .arena__halo {
  background:radial-gradient(circle, rgba(255,129,38,.3) 0 12%, transparent 52%),
             repeating-conic-gradient(from 0deg, transparent 0 6deg, rgba(255,99,22,.12) 7deg 9deg, transparent 10deg 18deg);
  animation-duration:12s;
}
.arena[data-turbo="10"] .arena__box, .arena[data-turbo="15"] .arena__box { filter:saturate(1.14) brightness(1.08); }
.arena[data-turbo="15"] .arena__halo { animation-duration:7s; }

/* 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;
  isolation: isolate;
  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);
  will-change: transform, top, filter;
}
.arena__box::before {
  content: ""; position: absolute; z-index: -1; inset: 10%; border-radius: 44%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--arena-tier) 27%, transparent) 0 24%, color-mix(in srgb, var(--arena-tier) 14%, transparent) 42%, transparent 70%),
    conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--arena-tier) 30%, transparent), transparent 34%, color-mix(in srgb, var(--arena-tier) 22%, white 4%), transparent 68%);
  filter: blur(7px); scale: 1.12;
  animation: box-aura 8s linear infinite;
}
/* O halo também sai: está assado no render. */
.arena__box img {
  width: var(--box-size); height: var(--box-size);
  transform: perspective(620px) rotateX(var(--tilt-x, -1deg)) rotateY(var(--tilt-y, 2deg));
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.46));
  transition: transform 180ms ease-out, filter 260ms ease-out;
}
.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); }
.arena__box.is-releasing { animation: box-release 1080ms var(--ease-out); }
.arena[data-phase="sealing"] .arena__box { animation: box-seal 1120ms var(--ease); }
.arena[data-phase="cut"] .arena__box img { filter: brightness(1.08) drop-shadow(0 22px 30px rgba(0,0,0,.5)); }

@keyframes box-aura {
  to { rotate: 1turn; }
}

/* Recibo técnico discreto: confiança disponível sem poluir a celebração. */
.round-proof {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin-top: var(--s-4); padding: 12px 14px; text-align: left;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: rgba(255,255,255,.025); color: var(--text-mid);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.round-proof:active { transform: scale(.985); }
.round-proof:hover { border-color: var(--line); background: rgba(237,185,72,.045); }
.round-proof__icon {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: rgba(237,185,72,.09); color: var(--gold-300);
}
.round-proof__icon svg { width: 18px; height: 18px; }
.round-proof strong { display: block; color: var(--text-hi); font-size: var(--fs-sm); }
.round-proof small { display: block; margin-top: 2px; color: var(--text-low); font-size: var(--fs-xs); }
.round-proof__chev { display: grid; place-items: center; color: var(--text-low); }
.round-proof__chev svg { width: 16px; height: 16px; }

/* 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__podium.is-lit::after { animation: podium-pulse 720ms var(--ease-out); }

.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;
  will-change: 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);
  transform-origin: 50% 0;
  animation: swing var(--swing-dur, 3s) ease-in-out infinite;
  animation-delay: var(--swing-delay, 0s);
}
.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;
  /* 46px cortava "MÁXIMO", que precisa de 51 -- justamente o
     prêmio que mais importa ler na vitrine, e o único que o
     jogador procura antes de escolher a corda. A reticência
     escondia o defeito: virava "MÁXIM…" e parecia proposital.
     56 cobre o maior rótulo do catálogo com folga, e o `ch`
     no mínimo impede que um rótulo curto fique espremido. */
  min-width: 4ch; max-width: 56px; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 4px; 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;
}

/* Rastro do dedo: dois tracos sobrepostos dao nucleo branco e halo ouro. */
.cuttrail {
  position: absolute; left: var(--x, 0); top: var(--y, 0); z-index: 8;
  width: var(--len, 0); height: 22px; transform-origin: 0 50%;
  transform: translateY(-50%) rotate(var(--ang, 0deg));
  pointer-events: none; opacity: 0; transition: opacity 90ms linear;
}
.cuttrail.is-on { opacity: 1; }
.cuttrail i, .cuttrail b {
  position: absolute; left: 0; right: 0; top: 50%; border-radius: 999px;
  transform: translateY(-50%);
}
.cuttrail i { height: 12px; background: rgba(237,185,72,.22); filter: blur(5px); }
.cuttrail b { height: 2px; background: linear-gradient(90deg, transparent, #fff8e3 32%, #edb948 82%, transparent); box-shadow: 0 0 9px rgba(255,238,188,.9); }

.cut-sparks { position: absolute; z-index: 9; width: 1px; height: 1px; pointer-events: none; }
.cut-sparks i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-100); box-shadow: 0 0 8px var(--gold-300);
  animation: spark-out 520ms var(--ease-out) var(--delay, 0ms) forwards;
}

/* Fibras curtas se separam no ponto do corte. */
.rope-fray { position: absolute; z-index: 9; width: 1px; height: 1px; pointer-events: none; }
.rope-fray i {
  position: absolute; width: 2px; height: 28px; border-radius: 999px;
  transform-origin: 50% 0; background: linear-gradient(var(--gold-100), transparent);
  filter: drop-shadow(0 0 5px var(--gold-300));
  animation: rope-fray 680ms var(--ease-out) forwards;
}
.rope-fray i:nth-child(1) { rotate: 24deg; }
.rope-fray i:nth-child(2) { rotate: -24deg; }
.rope-fray i:nth-child(3) { rotate: 46deg; height: 19px; opacity:.7; }
.rope-fray i:nth-child(4) { rotate: -46deg; height: 19px; opacity:.7; }

/* Impacto no pódio: anel + partículas radiais. */
.arena-burst { position: absolute; z-index: 5; width: 1px; height: 1px; pointer-events: none; }
.arena-burst b {
  position: absolute; left: -42px; top: -16px; width: 84px; height: 32px;
  border: 2px solid rgba(255,226,148,.78); border-radius: 50%;
  animation: landing-ring 700ms var(--ease-out) forwards;
}
.arena-burst i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-100); box-shadow: 0 0 9px var(--gold-300);
  animation: spark-out 620ms var(--ease-out) var(--delay) forwards;
}

/* ---------- Faixa de instrução, acima do rodapé ---------- */
.gamehintbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 2px var(--gutter);
}
.gamehint {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 0;
  font-size: var(--fs-xs); color: var(--text-mid); text-align: center;
  min-height: 30px; min-width: 0;
}
.gamehint svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ok); }
.gamehint b { color: var(--gold-200); font-weight: var(--fw-bold); }
.game__skip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 0 8px; border: 1px solid var(--line-soft);
  border-radius: var(--r-full); color: var(--text-mid); background: rgba(255,255,255,.025);
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing:.04em;
}
.game__skip svg { width: 13px; height: 13px; color: var(--gold-300); }
.game__skip:active { color: var(--text-hi); background: rgba(237,185,72,.08); }
.game__skip[disabled] { opacity:.3; pointer-events:none; }
.game.is-tutorial .game__skip { display:none; }

/* ---------- 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: clamp(15px, 4.5vw, var(--fs-h3)); letter-spacing: .035em; text-transform: uppercase; line-height: 1.1;
  white-space: nowrap;
}
.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;
}
.turbo-result {
  align-self:center; margin-bottom:10px; padding:5px 12px; border-radius:var(--r-full);
  border:1px solid #ff8b2c; color:#ffe2b7; background:linear-gradient(135deg, rgba(255,119,22,.32), rgba(151,35,4,.3));
  box-shadow:0 0 24px rgba(255,88,15,.2); font:900 11px/1 var(--ff-display); letter-spacing:.14em;
}

/* 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);
}
.buy-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.buy-conversion { padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-surface); }
.buy-conversion .row-b { flex-wrap: wrap; }
.buy-conversion p { line-height: 1.5; }
[data-screen="buy"] .balancecard__v small { font-size: var(--fs-body); color: var(--text-mid); }
.pack__details { flex: 1; min-width: 0; display: grid; gap: 5px; }
.pack__offer { display: block; font-size: var(--fs-xs); color: var(--ok); line-height: 1.4; overflow-wrap: anywhere; }
.pack__n, .pack__p { display: block; line-height: 1.35; }
.pack__cta { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; padding: 12px 14px; border-radius: var(--r-md); background: var(--grad-gold-cta); color: var(--text-on-gold); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.pack__cta svg { width: 18px; height: 18px; }
.pack:disabled { cursor: not-allowed; }
.pack:disabled .pack__cta { background: var(--bg-surface-2); color: var(--text-mid); }
.pack[aria-busy="true"] .pack__cta { opacity: .6; }
@media (max-width: 360px) {
  .pack { gap: 10px; padding: 14px 12px; }
  .pack__art { width: 32px; height: 32px; }
  .pack__cta { padding: 10px; }
}
.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
   ======================================================== */
/* O cartão do QR acompanha o QR. Com padding fixo e grande ele
   virava um retângulo branco de meia tela com um quadrado no meio
   -- e, enquanto a imagem não carregava, meia tela de branco puro. */
.qrcard {
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-4);
  width: max-content; max-width: 100%; margin-inline: auto;
  border-radius: var(--r-lg);
  background: #fff;
}
.qrcard svg { width: 190px; height: 190px; }
.qrcard img { display: block; width: 220px; height: 220px; }

/* O valor e as fichas, lado a lado com o botão de trocar. */
.pixhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-surface-2); border: 1px solid var(--line-strong);
}
.pixhead__val { display: flex; flex-direction: column; gap: 2px; }
.pixhead__val strong {
  font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--gold-300);
  line-height: 1.1;
  /* "R$ 5,00" quebrando em "R$" / "5,00" faz o preço parecer dois
     números. Num valor a pagar, isso é o pior lugar possível para
     uma ambiguidade de leitura. */
  white-space: nowrap;
}
.pixhead__val span { font-size: var(--fs-xs); color: var(--text-mid); }

/* O código inteiro tem 170 caracteres e não cabe em lugar nenhum
   — nem precisa: quem paga aponta a câmera ou aperta copiar. Este
   resumo existe só para a pessoa reconhecer que é um código PIX. */
.pixresumo {
  margin-top: var(--s-2);
  text-align: center; font-size: 11px; color: var(--text-low);
  font-family: ui-monospace, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pixexpira {
  margin-top: var(--s-2);
  text-align: center; font-size: var(--fs-xs); color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.pixexpira.is-morto { color: var(--danger-300, #ff8f8f); font-weight: var(--fw-bold); }

/* Copiar é a saída de quem não consegue apontar a câmera (o
   celular É a câmera). Então é botão de verdade, com rótulo, e
   não um ícone de 17px no canto de uma linha de código. */
.copyfield--acao {
  width: 100%; justify-content: center;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--gold-300); border-style: solid; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.copyfield--acao svg { width: 17px; height: 17px; flex: none; }
.copyfield--acao span { flex: none; }
.copyfield--acao.is-ok {
  background: var(--ok-900, #0f2a18); color: var(--ok-300, #6ee7a0);
  border-color: var(--ok-300, #6ee7a0);
}
.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 {
  position: relative; overflow: hidden;
  height: 50px; border-radius: 15px;
  background: var(--field-bg), var(--bg-surface); border: 1px solid var(--field-border);
  box-shadow: var(--field-inset);
  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: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.amountgrid button:active { transform: scale(.96); }
.amountgrid button.is-active {
  border-color: var(--field-border-hot); color: var(--gold-100);
  background: radial-gradient(circle at 50% 0%, rgba(237,185,72,.22), transparent 75%), var(--bg-surface-2);
  box-shadow: 0 0 0 3px rgba(237,185,72,.08), var(--glow-sm), var(--field-inset);
}

/* Valor grande digitado (saque / depósito) */
.bigamount {
  position: relative;
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  margin-block: var(--s-2) var(--s-4); padding: var(--s-6) var(--s-4) var(--s-5);
  border: 1px solid var(--field-border); border-radius: var(--r-xl);
  background: radial-gradient(90% 100% at 50% 0%, rgba(237,185,72,.10), transparent 68%), var(--field-bg), var(--bg-surface);
  box-shadow: var(--field-inset);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.bigamount__label {
  position: absolute; top: 12px; left: 0; right: 0;
  text-align: center; color: var(--text-low); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
}
.bigamount:focus-within { border-color: var(--field-border-hot); box-shadow: var(--field-focus), var(--field-inset); transform: translateY(-1px); }
.bigamount > span:not(.bigamount__label) { 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; outline: 0; caret-color: var(--gold-300);
}
.bigamount input::placeholder { color: #544b3c; opacity: 1; }

/* ========================================================
   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: 12px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: rgba(255,255,255,.018);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.check:active { transform: scale(.988); }
/* 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: 12px; top: 13px;
  width: 24px; height: 24px; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.check__box {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px; margin-top: 1px;
  border-radius: 8px;
  border: 1px solid var(--field-border-hot);
  background: var(--field-bg), var(--bg-surface);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.24);
  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) { background: rgba(237,185,72,.055); border-color: rgba(237,185,72,.18); }
.check:has(input:checked) .check__box { background: var(--grad-gold-cta); border-color: transparent; box-shadow: var(--glow-sm), inset 0 1px rgba(255,255,255,.45); }
.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: 16px;
  background: var(--field-bg), var(--bg-surface);
  border: 1px solid var(--field-border);
  box-shadow: var(--field-inset);
  text-align: center;
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: 24px; color: var(--text-hi);
  caret-color: var(--gold-300); outline: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.otp input:focus { border-color: var(--field-border-hot); box-shadow: var(--field-focus), var(--field-inset); transform: translateY(-2px); }
.otp input.is-filled { border-color: var(--line-strong); color: var(--gold-200); }
.otp.is-erro input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(242,86,74,.08); }

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

/* ============================================================
   MISSÕES, NÍVEL E CONVITE
   ============================================================ */

.nivel__selo {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--gold-500); color: #1a1205;
  font: var(--fw-bold) 18px/1 var(--ff-num);
}

/* A sequência só aparece quando existe — ver o comentário em
   renderMissoes. Um "0 dias" fixo é um lembrete diário de que a
   pessoa não jogou. */
.seq {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn);
  font: var(--fw-bold) 13px/1 var(--ff-num);
}
.seq svg { width: 14px; height: 14px; }

.barra {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.barra__tri {
  height: 100%; border-radius: 999px;
  background: var(--gold-500);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}

.missao {
  padding: 14px; border-radius: var(--r-md);
  background: var(--bg-surface-2); border: 1px solid var(--line);
}
/* Pronta para resgatar é o único estado que pede ação, então é o
   único com borda acesa. Destacar tudo é não destacar nada. */
.missao.is-pronta { border-color: var(--gold-500); background: var(--gold-900, #2E1E04); }
.missao.is-feita  { opacity: .55; }
.missao__t { font: var(--fw-bold) 14.5px/1.3 var(--ff-body); color: var(--text-hi); margin-bottom: 3px; }
.missao__p { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--text-mid);
  font: var(--fw-med) 11px/1.5 var(--ff-body); white-space: nowrap;
}
.tag--xp    { background: rgba(79,163,209,.16);  color: #7FC4E8; }
.tag--ficha { background: rgba(210,150,33,.16);  color: var(--gold-300); }

.codigo {
  font: var(--fw-bold) 30px/1.1 var(--ff-num);
  letter-spacing: .22em; color: var(--gold-300);
  margin-top: 6px; user-select: all; word-break: break-all;
}

.passos { margin: 0; padding-left: 18px; color: var(--text-mid); font-size: 13.5px; line-height: 1.8; }
.passos strong { color: var(--text-hi); }

.skel--row { height: 72px; border-radius: var(--r-md); }

/* Tabela dentro de documento legal: a base legal de cada
   tratamento precisa caber ao lado do dado, senão a pessoa lê
   duas listas e liga uma à outra de cabeça. */
.doc__tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc__tabela th, .doc__tabela td {
  padding: 9px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.doc__tabela th { color: var(--text-low); font-weight: var(--fw-semi); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; }
.doc__tabela td { color: var(--text-mid); }
.doc__tabela td:first-child { color: var(--text-hi); }

/* ============================================================
   A FAIXA DE PROGRESSO NO RESULTADO
   ------------------------------------------------------------
   Vem DEPOIS do resultado e nunca no lugar dele: a pessoa veio
   saber se ganhou, e empurrar missão por cima dessa resposta é
   o que transforma recompensa em ruído.
   ============================================================ */

/* ========================================================
   FAIXA DE PROGRESSO DEPOIS DO RESULTADO
   Ela é IRMÃ de `.result`, não filha — e `.result` é quem
   carrega o `--gutter`. Sem repetir o respiro aqui, os cartões
   iam de borda a borda enquanto todo o resto da tela respirava,
   e a diferença de largura fazia parecer outro aplicativo.
   ======================================================== */
/* Com faixa embaixo, o resultado para de ocupar a tela inteira:
   o 100% existe para centrar o prêmio quando ele é a única coisa
   ali, e com algo depois ele vira um vão de meia tela. */
.tem-progresso .result { min-height: 0; padding-bottom: var(--s-5); }

.progbar {
  display: grid; gap: 8px;
  /* O mesmo respiro lateral do resto da tela. */
  padding: 0 var(--gutter) var(--s-6);
  margin-top: var(--s-5);
}
/* `.result` tem `min-height: 100%`, então a faixa nasce abaixo
   da dobra, solta. Um rótulo curto costura as duas coisas: sem
   ele são dois cartões órfãos no fim de uma tela vazia. */
.progbar::before {
  content: 'Seu progresso';
  font: var(--fw-bold) 11px/1 var(--ff-body);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-low);
  padding-bottom: 2px;
}

.prog {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left;
  background: var(--bg-surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); color: inherit; cursor: pointer;
}
.prog:not(button) { cursor: default; }
.prog__ico { display: grid; place-items: center; flex: 0 0 32px; height: 32px;
  border-radius: 50%; background: rgba(255,255,255,.06); color: var(--text-mid); }
.prog__ico svg { width: 17px; height: 17px; }
.prog__txt { display: block; flex: 1 1 auto; min-width: 0; }
.prog__txt strong { display: block; font: var(--fw-bold) 14px/1.3 var(--ff-body); color: var(--text-hi); }
.prog__txt span { display: block; font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
/* Virou `<button>` de verdade: antes era um `<span>` dentro de um
   bloco que só navegava. Botão precisa de reset e de alvo de
   toque — 6px de altura útil num celular é o que faz a pessoa
   errar três vezes e desistir. */
.prog__cta { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px;
  background: var(--gold-500); color: #1a1205; border: 0; cursor: pointer;
  font: var(--fw-bold) 12.5px/1 var(--ff-body);
  min-height: 36px;
  transition: filter .15s ease, opacity .15s ease; }
.prog__cta:active { filter: brightness(.92); }
.prog__cta:disabled { opacity: .6; cursor: default; }

/* Pronta para resgatar é o único estado que pede ação — e por
   isso o único com a borda acesa. Destacar tudo é não destacar
   nada. */
.prog--pronta { border-color: var(--gold-500); background: var(--gold-900, #2E1E04); }
.prog--pronta .prog__ico { background: rgba(237,185,72,.18); color: var(--gold-300); }
.prog--seq .prog__ico { background: var(--warn-bg); color: var(--warn); }


/* ========================================================
   PRÉVIA DO DOCUMENTO (KYC)
   ======================================================== */
.previa {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2); border: 1px solid var(--line-strong);
}
.previa__quadro {
  flex: none;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-surface-3, #15130f);
  border: 1px solid var(--line);
}
/* `contain` e nao `cover`: cortar um documento pela metade para
   caber num quadrado e esconder justamente a parte que a pessoa
   quer conferir antes de enviar. */
.previa__quadro img { width: 100%; height: 100%; object-fit: contain; }
.previa__pdf {
  display: grid; place-items: center; gap: 2px;
  color: var(--gold-300);
}
.previa__pdf svg { width: 26px; height: 26px; }
.previa__pdf b { font-size: 10px; letter-spacing: .08em; }
.previa__lado { min-width: 0; display: flex; flex-direction: column; }
.previa__lado b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ========================================================
   CONFIRMACAO DE PAGAMENTO
   O oposto da tela de espera: aqui nao ha nada para fazer
   nem para conferir -- so a certeza de que deu certo.
   ======================================================== */
.pago {
  display: grid; place-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  margin-top: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  border: 1px solid var(--ok, #1f7a45);
  text-align: center;
}
.pago__ico { width: 54px; height: 54px; color: var(--ok-300, #6ee7a0); }
.pago__t { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--text-hi); }
.pago__sub { font-size: var(--fs-sm); color: var(--text-mid); }
/* As fichas sao o que a pessoa comprou: e o maior numero da tela. */
.pago__fichas {
  margin-top: var(--s-3); display: grid; gap: 2px;
}
.pago__fichas span {
  font-size: 30px; line-height: 1.05;
  font-weight: var(--fw-black); color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.pago__fichas small { font-size: var(--fs-xs); color: var(--text-low); }
.pago__saldo { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-mid); }
.pago__saldo strong { color: var(--text-hi); }