/* =============================================================
   GOLAZO DE PREMIOS — styles.css
    1. Reset e tokens        7. CTA e contato com o campo
    2. Loading               8. Efeitos, moedas e toast
    3. Cenario               9. Popups de resultado
    4. Shell e header       10. Presell em camadas
    5. Barra de saldo       11. Keyframes
    6. Gol, grade, campo    12. Responsividade
   ============================================================= */


/* ── 1. RESET E TOKENS ─────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --pink:      #FE2C55;
  --pink-dark: #D01340;
  --cyan:      #25F4EE;
  --ink:       #161823;
  --white:     #FFFFFF;
  --grey:      #F5F5F5;
  --grey-mid:  #8E93A6;
  --gold:      #FFC72C;

  --tile-face: linear-gradient(180deg, #262B3D 0%, #191C2A 58%, #12141F 100%);
  --pink-face: linear-gradient(180deg, #FF4A6D 0%, var(--pink) 55%, var(--pink-dark) 100%);
  --soft: 0 8px 22px rgba(10, 12, 22, .26);
  --lift: 0 14px 34px rgba(10, 12, 22, .34);

  --gap:   12px;
  --pad-x: 16px;
  --r-lg:  26px;
  --r-sm:  13px;

  --ease-out: cubic-bezier(.22, .9, .32, 1);
  --ease-pop: cubic-bezier(.20, .90, .25, 1.12);

  --font:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hd: 'Archivo Black', 'Archivo', system-ui, sans-serif;
}

/* o minigame se comporta como tela de app: sem scroll, sem bounce */
html, body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
ul { list-style: none; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
[tabindex="-1"]:focus { outline: none; }

body.is-leaving { transition: opacity .3s ease; opacity: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ── 2. LOADING ────────────────────────────────────────────── */

.loader {
  position: fixed; inset: 0;
  z-index: 90;
  display: grid; place-items: center;
  background: var(--white);
  transition: opacity .26s ease;
}
.loader.is-out { opacity: 0; pointer-events: none; }
.loader[hidden] { display: none; }

.loader__dots { position: relative; width: 74px; height: 26px; }

.dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}
.dot--pink { background: var(--pink); animation: ld1 .9s ease-in-out infinite; }
.dot--cyan { background: var(--cyan); animation: ld2 .9s ease-in-out infinite; }


/* ── 3. CENARIO ────────────────────────────────────────────── */

.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.scene__bg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* refletores respirando: duas camadas com tempos diferentes */
.scene__lights {
  position: absolute;
  z-index: 5;
  inset: 0 0 46% 0;
  background:
    radial-gradient(48% 34% at 18% 26%, rgba(254, 44, 85, .22), transparent 70%),
    radial-gradient(46% 32% at 82% 30%, rgba(37, 244, 238, .20), transparent 70%);
  opacity: .7;
  animation: lights 9s ease-in-out infinite alternate;
  will-change: opacity;
}

.scene__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(22, 24, 35, .06) 0%,
    rgba(22, 24, 35, 0)   30%,
    rgba(22, 24, 35, .10) 62%,
    rgba(22, 24, 35, .34) 100%);
}


/* ── 4. SHELL E HEADER ─────────────────────────────────────── */

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  margin-inline: auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 8px)
    var(--pad-x)
    calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;
}

.masthead { position: relative; flex: none; height: 82px; }

/* branding discreto do parceiro, sem card nem selo em volta */
.masthead__mark {
  position: absolute;
  left: 0; top: 12px;
  width: 86px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(10, 12, 22, .30));
}

.brand {
  position: absolute;
  left: 50%; top: 2px;
  transform: translateX(-50%);
  width: 50%;
  max-width: 194px;
  overflow: hidden;
}
.brand__logo { width: 100%; }

/* shimmer ocasional, nao continuo */
.brand__shine {
  position: absolute;
  top: -20%; left: -55%;
  width: 34%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-16deg);
  animation: shine 9s ease-in-out 3s infinite;
  pointer-events: none;
}

.masthead__tools { position: absolute; right: 0; top: 4px; display: flex; gap: 8px; }

.chip {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--soft);
  transition: transform .16s var(--ease-out);
}
.chip svg { width: 19px; height: 19px; }
.chip:active { transform: scale(.9); }

#btnSound .ico-off { display: none; }
#btnSound[aria-pressed="true"] .ico-on  { display: none; }
#btnSound[aria-pressed="true"] .ico-off { display: block; color: var(--grey-mid); }


/* ── 5. BARRA DE SALDO ─────────────────────────────────────── */

.balance {
  flex: none;
  display: flex; align-items: center; gap: 11px;
  height: 74px;
  padding: 0 8px 0 12px;
  border-radius: var(--r-lg);
  background: var(--ink);
  box-shadow: var(--lift);
}

.balance__coins {
  flex: none;
  width: 42px;
  animation: coinIdle 7s ease-in-out 1.5s infinite;
  will-change: transform;
}

.balance__sum {
  flex: 1; min-width: 0;
  padding-right: 11px;
  border-right: 1px solid rgba(255, 255, 255, .10);
}
.balance__label { font-size: 12.5px; color: var(--grey-mid); line-height: 1.2; }
.balance__value {
  font-family: var(--font-hd);
  font-size: 26px; line-height: 1.12;
  letter-spacing: -.015em;
  font-feature-settings: 'tnum' 1;
}
.balance__value span { font-size: 12.5px; color: var(--grey-mid); letter-spacing: .03em; }
.balance.is-bump .balance__value { animation: bump .55s var(--ease-pop); }

.withdraw {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  height: 46px;
  padding: 0 13px 0 14px;
  border-radius: 999px;
  font-size: 15px; font-weight: 700;
  color: var(--white);
  background: var(--pink-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 5px 14px rgba(254, 44, 85, .38);
  transition: transform .16s var(--ease-out);
}
.withdraw__ico   { width: 19px; height: 19px; }
.withdraw__arrow { width: 14px; height: 14px; }
.withdraw:active { transform: scale(.95); }


/* ── 5b. TIMER DE EXPIRAÇÃO ────────────────────────────────── */

.expiry {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: -4px;
  font-size: 12.5px;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(10, 12, 22, .55);
}
.expiry__ico { width: 15px; height: 15px; color: var(--pink); flex: none; }
.expiry__label { opacity: .92; }

.clock { display: flex; align-items: center; gap: 3px; }
.clock b {
  min-width: 25px;
  padding: 2px 0;
  border-radius: 6px;
  text-align: center;
  font-family: var(--font-hd);
  font-size: 12.5px;
  font-feature-settings: 'tnum' 1;
  color: var(--white);
  background: rgba(22, 24, 35, .82);
}
.clock i { font-style: normal; font-size: 11px; opacity: .7; }
.expiry.is-over .clock b { color: var(--pink); }

/* ── 6. GOL, GRADE E CAMPO ─────────────────────────────────── */

.arena {
  position: relative;
  z-index: 10;
  flex: 1 1 auto;
  min-height: 0;
  margin-inline: calc(var(--pad-x) * -1);
}

.arena__goal { position: absolute; z-index: 10; left: 0; right: 0; top: 0; }

.goal { width: 100%; }

/* respiro luminoso na moldura do gol */
.goal__glow {
  position: absolute;
  left: 8%; right: 8%; top: 6%; bottom: 14%;
  border-radius: 20px;
  box-shadow: 0 0 34px 8px rgba(254, 44, 85, .30);
  opacity: .55;
  animation: goalGlow 7.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.grid {
  position: absolute;
  z-index: 11;
  left: 11.5%; right: 11.5%;
  top: 13%; height: 72%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 7px;
}

.tile {
  position: relative;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  font-family: var(--font-hd);
  font-size: clamp(15px, 5.2vw, 22px);
  letter-spacing: -.02em;
  color: var(--white);
  background: var(--tile-face);
  border: 1px solid rgba(37, 244, 238, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 4px 10px rgba(10, 12, 22, .30);
  transition: transform .2s var(--ease-out), box-shadow .25s, background .25s, color .25s, border-color .25s, opacity .25s;
}

.tile.is-mystery {
  color: #5A3B00;
  background: linear-gradient(180deg, #FFE07A 0%, var(--gold) 54%, #E9A705 100%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(255, 199, 44, .30);
  animation: mystery 3.6s ease-in-out 2s infinite;
  will-change: transform;
}

.tile.is-hit {
  animation: tileHit .42s var(--ease-pop);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 199, 44, .55), 0 6px 18px rgba(255, 199, 44, .35);
}

.tile.is-won {
  color: var(--white);
  background: var(--pink-face);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 14px rgba(254, 44, 85, .34);
  animation: none;
}

.tile.is-long  { font-size: clamp(10px, 3.1vw, 13px); letter-spacing: -.03em; }
.tile.is-spent { opacity: .42; animation: none; }

.mascot {
  position: absolute;
  z-index: 15;
  right: 0; bottom: 0;
  width: 38%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 16px rgba(10, 12, 22, .34));
  animation: charIdle 5.5s ease-in-out .6s infinite;
  will-change: transform;
  pointer-events: none;
}
.mascot.is-react { animation: charReact .5s var(--ease-pop); }


/* ── 7. CTA E CONTATO COM O CAMPO ──────────────────────────── */

.action { position: relative; z-index: 20; flex: none; display: grid; justify-items: center; gap: 8px; }

.kick-zone {
  position: relative;
  width: 72%;
  max-width: 290px;
  aspect-ratio: 760 / 253;
}

/* sombra ambiente: oval grande e suave */
.kick-ambient {
  position: absolute;
  left: -12%; right: -12%;
  bottom: -16%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 26, 10, .30), transparent 76%);
  pointer-events: none;
}

/* sombra de contato: curta, logo abaixo da base */
.kick-contact {
  position: absolute;
  left: 9%; right: 9%;
  bottom: 2%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 18, 6, .52), transparent 82%);
  pointer-events: none;
}

.kick {
  --face: 36.8%;
  position: relative;
  z-index: 20;   /* sempre acima da bola parada */
  width: 100%; height: 100%;
  transition: transform .09s var(--ease-out), filter .2s;
}
.kick__img { width: 100%; height: 100%; }



.kick__label {
  position: absolute;
  left: 0; right: 0;
  top: var(--face);
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-hd);
  font-size: clamp(20px, 6.6vw, 27px);
  letter-spacing: .02em;
  color: var(--white);
  text-shadow: 0 2px 5px rgba(140, 10, 40, .45);
  transition: top .09s var(--ease-out);
  pointer-events: none;
}

.kick.is-pressed { --face: 42.6%; transform: translateY(2px); }
.kick:disabled { filter: saturate(.88) brightness(.96); cursor: wait; }


.ball {
  position: absolute;
  --size: 150px;
  left: calc(50% - var(--size) / 2);
  /* metade de baixo some atras da face do botao */
  top: calc(-1 * var(--size) * .5);
  width: var(--size); height: var(--size);
  z-index: 18;                 /* abaixo do botao */
  pointer-events: none;
  will-change: transform;
}
.ball.is-idle   { animation: ballIdle 4.2s ease-in-out infinite; }
.ball.is-flying { z-index: 25; animation: none; }   /* sai de tras do CTA */

.shots {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--white);
  background: rgba(22, 24, 35, .88);
  box-shadow: var(--soft);
}
.shots svg { width: 14px; height: 14px; color: var(--gold); fill: var(--gold); stroke-width: 1.4; }


/* ── 8. EFEITOS, MOEDAS E TOAST ────────────────────────────── */

.fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

.spark {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold);
  animation: spark .6s var(--ease-out) forwards;
}

/* chuva de moedas: 12 nos reaproveitados, animados por WAAPI */
.coins {
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.coins img {
  position: absolute;
  top: 0; left: 0;
  width: 38px;
  will-change: transform;
}
.coins.is-clearing { transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translateY(26px); }

.toast {
  position: fixed;
  left: 50%; top: calc(env(safe-area-inset-top, 0px) + 108px);
  z-index: 70;
  max-width: min(84vw, 330px);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  text-align: center;
  color: var(--white);
  background: rgba(22, 24, 35, .95);
  box-shadow: var(--lift);
  transform: translate(-50%, -12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s, transform .24s var(--ease-out), visibility .24s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


/* ── 8b. CLÍMAX DO ÚLTIMO TIRO ─────────────────────────────────
   Camadas: véu -> raios girando -> ondas de choque -> partículas
   -> número. Tudo em transform/opacity, sem layout thrash.
   ------------------------------------------------------------ */

.climax {
  position: fixed; inset: 0;
  z-index: 45;
  display: grid; place-items: center;
  align-content: center;
  padding-bottom: 16vh;
  pointer-events: none;
  overflow: hidden;
}
.climax[hidden] { display: none; }

.climax__veil {
  position: absolute; inset: 0;
  background: radial-gradient(62% 46% at 50% 42%, rgba(14, 9, 28, .82), rgba(4, 3, 10, .97));
  opacity: 0;
  transition: opacity .3s ease;
}
.climax.is-on .climax__veil { opacity: 1; }

/* raios dourados girando atrás do número */
.climax__rays {
  position: absolute;
  left: 50%; top: 42%;
  width: 190vmax; height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  opacity: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 199, 44, .16) 0deg 7deg,
    transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 26%, transparent 52%);
          mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 26%, transparent 52%);
  will-change: transform, opacity;
}
.climax.is-on .climax__rays {
  animation: raysIn .5s ease .1s forwards, raysSpin 14s linear infinite;
}
.climax.is-peak .climax__rays { animation: raysPeak .6s ease forwards, raysSpin 5s linear infinite; }

@keyframes raysIn   { to { opacity: .75; } }
@keyframes raysPeak { to { opacity: 1; } }
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* ondas de choque: um nó por degrau, removido depois */
.climax__rings { position: absolute; left: 50%; top: 42%; }
.shock {
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 199, 44, .85);
  animation: shock .72s cubic-bezier(.16, .8, .3, 1) forwards;
  will-change: transform, opacity;
}
.shock--big { border-color: rgba(254, 44, 85, .9); border-width: 4px; }
@keyframes shock {
  0%   { transform: scale(.35); opacity: .95; }
  100% { transform: scale(3.4);  opacity: 0; }
}

/* faíscas e confete */
.climax__parts { position: absolute; inset: 0; }
.spark2 {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 2px;
  animation: spark2 var(--d, .9s) cubic-bezier(.2, .7, .3, 1) forwards;
  will-change: transform, opacity;
}
@keyframes spark2 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.3); opacity: 0; }
}

/* ── núcleo ── */

.climax__core {
  position: relative;
  text-align: center;
  opacity: 0;
  transform: scale(.88);
}
.climax.is-on .climax__core { animation: climaxIn .38s var(--ease-pop) forwards; }

.climax__label {
  margin-bottom: 14px;
  overflow: hidden;
  font-family: var(--font-hd);
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(255, 199, 44, .55);
}
.climax__label span {
  display: inline-block;
  animation: labelUp .45s var(--ease-pop) .12s both;
}
@keyframes labelUp {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.climax__stage { position: relative; display: grid; place-items: center; }

/* halo que pulsa por trás do número */
.climax__glow {
  position: absolute;
  width: 78vw; max-width: 330px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 199, 44, .40), transparent 70%);
  opacity: .8;
  z-index: -1;
  animation: glowPulse 1.6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(.9);  opacity: .55; }
  50%      { transform: scale(1.08); opacity: .9; }
}

.climax__mult {
  margin-top: 0;
  font-family: var(--font-hd);
  font-size: clamp(64px, 23vw, 104px);
  line-height: 1;
  letter-spacing: -.04em;
  color: #FFF;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE9A8 48%, #FFB800 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 199, 44, .8)) drop-shadow(0 6px 14px rgba(10, 12, 22, .5));
  will-change: transform;
}
.climax__mult.is-pop  { animation: multPop .26s var(--ease-pop); }
.climax__mult.is-peak { animation: multPeak .7s var(--ease-pop); }

@keyframes multPop {
  0%   { transform: scale(.62) rotate(-4deg); }
  55%  { transform: scale(1.18) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes multPeak {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.5) rotate(-3deg); }
  40%  { transform: scale(.92) rotate(2deg); }
  60%  { transform: scale(1.22) rotate(-1deg); }
  100% { transform: scale(1); }
}

/* barra de carga que acompanha a progressão */
.climax__bar {
  width: min(62vw, 240px);
  height: 5px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.climax__bar span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #FFC72C, #FE2C55);
  box-shadow: 0 0 12px rgba(255, 199, 44, .8);
  transition: width .22s var(--ease-out);
}

.climax__value {
  margin-top: 14px;
  min-height: 38px;
  font-family: var(--font-hd);
  font-size: clamp(28px, 9vw, 38px);
  letter-spacing: -.02em;
  color: #FFF;
  text-shadow: 0 2px 16px rgba(255, 199, 44, .65);
  font-feature-settings: 'tnum' 1;
}
.climax__value.is-live { animation: valueBeat .28s var(--ease-pop); }
@keyframes valueBeat {
  0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); }
}

@keyframes climaxIn {
  0%   { opacity: 0; transform: scale(.88); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .climax__rays, .climax__glow, .climax__mult, .shock, .spark2 { animation: none !important; }
  .climax__rays { opacity: .3; }
}

/* ── 9. POPUPS DE RESULTADO ────────────────────────────────── */

.sheet {
  position: fixed; inset: 0;
  z-index: 60;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(12, 14, 24, .58);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s ease;
}
.sheet.is-open .sheet__scrim { opacity: 1; }

.sheet__box {
  position: relative;
  z-index: 2;
  width: min(90vw, 340px);
  display: grid; justify-items: center;
  opacity: 0;
  transform: scale(.9) translateY(14px);
  will-change: transform, opacity;
}
.sheet.is-open   .sheet__box { animation: sheetIn  .44s var(--ease-pop) forwards; }
.sheet.is-closing .sheet__box { animation: sheetOut .22s ease forwards; }
.sheet.is-closing .sheet__scrim { opacity: 0; }

.card {
  width: 100%;
  padding: 0 22px 22px;
  border-radius: 28px;
  text-align: center;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 22px 50px rgba(10, 12, 22, .42);
}

.card__art {
  width: 48%;
  max-width: 152px;
  margin: -46px auto -2px;
  filter: drop-shadow(0 10px 18px rgba(10, 12, 22, .26));
}
.card__art--lose { width: 54%; max-width: 168px; margin: -38px auto 2px; }

.card__title { font-family: var(--font-hd); font-size: 27px; letter-spacing: -.015em; }
.card__kicker { margin-top: 6px; font-size: 15px; color: var(--grey-mid); }
.card__prize {
  margin-top: 2px;
  font-family: var(--font-hd);
  font-size: clamp(34px, 11vw, 42px);
  letter-spacing: -.025em;
  color: var(--pink);
}
.card__prize--long { font-size: clamp(26px, 8.2vw, 33px); }
.card__note { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--grey-mid); }
.card__note--lead { margin-top: 8px; font-size: 15px; color: var(--ink); }
.card__shots { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--grey-mid); }
.card .cta { margin-top: 18px; }

.card--final { position: relative; padding-bottom: 20px; }

.card__confetti {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 28px;          /* recorta a si mesma: o herói pode transbordar o card */
  opacity: .9;
  pointer-events: none;
}
.card--final > :not(.card__confetti) { position: relative; }

.card__hero {
  width: 52%;
  max-width: 158px;
  margin: -58px auto -10px;
  filter: drop-shadow(0 10px 18px rgba(10, 12, 22, .26));
}

.band { position: relative; width: 104%; margin-inline: -2%; }
.band img { width: 100%; }
.band__text {
  position: absolute;
  left: 12%; right: 12%; top: 47%;   /* centro do corpo liso da faixa */
  transform: translateY(-50%);
  font-family: var(--font-hd);
  font-size: clamp(22px, 7vw, 27px);
  color: var(--white);
  text-shadow: 0 2px 6px rgba(150, 10, 55, .5);
}

.card--final .card__kicker { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.card--final .card__prize { margin-top: 0; }
.card__pile { width: 62%; max-width: 190px; margin: 2px auto 0; }
.card--final .card__note { margin-top: 6px; }

.cta--img {
  position: relative;
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.cta--img img { width: 100%; }
.cta--img span {
  position: absolute;
  left: 0; right: 0; top: 44%;
  transform: translateY(-50%);
  font-family: var(--font-hd);
  font-size: clamp(15px, 4.8vw, 18px);
  letter-spacing: .01em;
  color: var(--white);
  text-shadow: 0 2px 5px rgba(150, 10, 55, .45);
}
.cta--img.is-pressed { transform: scale(.97); }

.cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 56px;
  border-radius: 999px;
  font-size: 17px; font-weight: 700;
  color: var(--white);
  background: var(--pink-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px rgba(254, 44, 85, .38);
  transition: transform .12s var(--ease-out);
}
.cta:active { transform: scale(.97); }


/* ── 10. PRESELL EM CAMADAS ────────────────────────────────── */

.sheet--presell .sheet__scrim { background: rgba(12, 14, 24, .46); }

.presell {
  --pw: min(86vw, 322px);
  position: relative;
  z-index: 2;
  width: var(--pw);
  opacity: 0;
  transform: scale(.92) translateY(16px);
  will-change: transform, opacity;
}
.sheet.is-open   .presell { animation: sheetIn  .46s var(--ease-pop) .06s forwards; }
.sheet.is-closing .presell { animation: sheetOut .24s ease forwards; }

.presell__card {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 958;
  filter: drop-shadow(0 14px 34px rgba(10, 12, 22, .26));
}
.presell__art { width: 100%; height: 100%; }

/* 40% dentro do card, 60% para fora */
.presell__cta {
  position: absolute;
  left: 50%;
  bottom: -9.43%;
  transform: translateX(-50%);
  width: 86%;
  filter: drop-shadow(0 10px 20px rgba(214, 140, 0, .34));
  transition: transform .1s var(--ease-out);
}
.presell__cta img { width: 100%; }
.presell__cta:active { transform: translateX(-50%) scale(.97); }
.presell__cta.is-pressed { transform: translateX(-50%) scale(.96) translateY(2px); }


/* ── 11. KEYFRAMES ─────────────────────────────────────────── */

@keyframes ld1 {
  0%, 100% { transform: translateX(-11px) scale(1); }
  50%      { transform: translateX(11px)  scale(.86); }
}
@keyframes ld2 {
  0%, 100% { transform: translateX(11px)  scale(.86); }
  50%      { transform: translateX(-11px) scale(1); }
}

@keyframes lights { from { opacity: .48; } to { opacity: .92; } }

@keyframes shine {
  0%, 82% { transform: translateX(0) skewX(-16deg); }
  100%    { transform: translateX(430%) skewX(-16deg); }
}

@keyframes goalGlow { 0%, 100% { opacity: .34; } 50% { opacity: .72; } }

@keyframes coinIdle {
  0%, 88%, 100% { transform: scale(1) rotate(0deg); }
  93%           { transform: scale(1.05) rotate(-2deg); }
}

@keyframes charIdle {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-.8deg); }
}
@keyframes charReact {
  0%   { transform: translateY(0)     scale(1); }
  40%  { transform: translateY(-14px) scale(1.05); }
  100% { transform: translateY(0)     scale(1); }
}

@keyframes ballIdle {
  0%, 100% { transform: translateY(0)    rotate(-1.2deg); }
  50%      { transform: translateY(-4px) rotate(1.2deg); }
}
}
}

}

@keyframes mystery {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

@keyframes presellBall {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}
@keyframes presellChar {
  0%, 100% { transform: translateY(0)    rotate(.6deg); }
  50%      { transform: translateY(-7px) rotate(-.6deg); }
}

@keyframes bump {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.09); color: var(--pink); }
  100% { transform: scale(1); }
}
@keyframes tileHit {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  70%  { transform: scale(.99); }
  100% { transform: scale(1); }
}
@keyframes spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}
@keyframes climaxIn {
  0%   { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes multPop {
  0%   { transform: scale(.72); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes sheetIn {
  0%   { opacity: 0; transform: scale(.9) translateY(14px); }
  100% { opacity: 1; transform: scale(1)  translateY(0); }
}
@keyframes sheetOut {
  0%   { opacity: 1; transform: scale(1)   translateY(0); }
  100% { opacity: 0; transform: scale(.95) translateY(8px); }
}


/* ── 12. RESPONSIVIDADE ────────────────────────────────────────
   Sem scroll em nenhum tamanho: cada degrau devolve altura na
   ordem gaps -> logo -> barra -> bola -> CTA -> gol -> presell.
   ------------------------------------------------------------ */

@media (max-height: 830px) {
  :root { --gap: 10px; }
  .masthead { height: 76px; }
  .brand { max-width: 184px; }
  .presell { --pw: min(84vw, 306px); }
}

@media (max-height: 790px) {
  :root { --gap: 8px; }
  .masthead { height: 70px; }
  .brand { width: 48%; max-width: 172px; }
  .balance { height: 68px; }
  .balance__value { font-size: 24px; }
  .balance__coins { width: 38px; }
  .withdraw { height: 42px; }
  .ball { --size: 132px; }
  .presell { --pw: min(82vw, 292px); }
}

@media (max-height: 740px) {
  .masthead { height: 62px; }
  .brand { max-width: 156px; }
  .arena__goal { left: 5%; right: 5%; }
  .kick-zone { width: 68%; }
  .ball { --size: 118px; }
  .shots { padding: 5px 13px; font-size: 12px; }
  .presell { --pw: min(78vw, 272px); }
}

@media (max-height: 690px) {
  .arena__goal { left: 11%; right: 11%; }
  .ball { --size: 104px; }
  .balance { height: 62px; }
  .presell { --pw: min(72vw, 252px); }
}

@media (max-width: 376px) {
  .brand { width: 52%; }
}

/* ── movimento reduzido: fica so o feedback funcional ───────── */
@media (prefers-reduced-motion: reduce) {
  .scene__lights, .brand__shine, .goal__glow, .balance__coins,
  .mascot, .ball,
  .tile.is-mystery, .presell__char {
    animation: none !important;
  }
  .dot { animation-duration: 1.6s; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .sheet__box, .presell { opacity: 1; transform: none; animation: none !important; }
}


/* =============================================================
   SALDO DE RECOMPENSAS (saldo.html)
   Tokens do design.md (pinksplash): Inter, canvas #F5F5F5,
   card #FFFFFF, ação #FF295E, sombra 0 1px 2px rgba(0,0,0,.05),
   raios 8 / 12 / 16.
   BalancePage + AmountCard + MovementList + BottomSheet
   ============================================================= */

.app-body {
  background: var(--grey);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;

  --ui-canvas: #F5F5F5;
  --ui-card:   #FFFFFF;
  --ui-ink:    #000000;
  --ui-ink-2:  #333333;
  --ui-muted:  #777777;
  --ui-line:   #E5E7EB;
  --ui-cta:    #FF295E;
  --sh-card:   0 1px 2px rgba(0, 0, 0, .05);
  --sh-cta:    0 4px 14px rgba(255, 59, 108, .30);
  --r-card:    16px;
  --r-input:   12px;
  --r-chip:    10px;
}
.app-body { background: var(--ui-canvas); }

.page {
  width: 100%;
  max-width: 440px;
  overflow-x: hidden;
  height: 100dvh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--grey);
  opacity: 0;
  transition: opacity .3s ease;
}
.page.is-in { opacity: 1; }

/* ── topo: header e saldo dividem o mesmo gradiente ── */
.hero {
  padding:
    calc(env(safe-area-inset-top, 0px) + 6px)
    18px 34px;
  text-align: center;
  /* curva rasa e larga: a separação é uma quebra suave, não uma faixa */
  border-radius: 0 0 52% 52% / 0 0 26px 26px;
  /* ~90% branco: a cor só aparece nos cantos */
  background: linear-gradient(
    135deg,
    rgba(37, 244, 238, .22) 0%,
    rgba(255, 255, 255, .96) 40%,
    rgba(255, 255, 255, .96) 60%,
    rgba(254, 44, 85, .24) 100%
  );
}

.topbar {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 78px;
  align-items: center;
  min-height: 56px;
  margin-bottom: 22px;
}
.topbar__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(14px, 3.9vw, 17px);
  font-weight: 700;
  line-height: 25.5px;
  text-align: center;
  color: var(--ui-ink);
}
.topbar__tools { display: flex; justify-content: flex-end; gap: 2px; }
.topbar > .topbar__btn:first-child { justify-self: start; }
.topbar__btn {
  width: 38px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  transition: background .16s;
}
.topbar__btn svg { width: 22px; height: 22px; stroke-width: 2; }
.topbar__btn:active { background: rgba(22, 24, 35, .07); }

.hero__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 400; line-height: 24px;
  color: var(--ui-muted);
}
.hero__info { width: 17px; height: 17px; color: var(--ui-muted); }
.hero__value {
  margin-top: 6px;
  font-weight: 800;
  font-size: clamp(32px, 9.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ui-ink);
  font-feature-settings: 'tnum' 1;
}
.hero__hint { margin-top: 10px; font-size: 14px; font-weight: 400; line-height: 21px; color: var(--ui-muted); }

.page__scroll {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;                 /* mata o arrasto lateral */
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}
.stack {
  padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* item nunca estoura a coluna */
  gap: 0;
  align-content: start;
}
.stack > * { min-width: 0; }

.section-title {
  margin: 26px 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--ui-ink);
}

/* ── painéis brancos ── */
.panel {
  width: 100%;
  padding: 20px 18px 18px;
  border-radius: var(--r-card);
  background: var(--ui-card);
  box-shadow: var(--sh-card);
}
.panel__title { font-size: 18px; font-weight: 700; line-height: 27px; color: var(--ui-ink); }
.panel__sub {
  margin-top: 3px;
  white-space: nowrap;
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 400;
  line-height: 21px;
  color: var(--ui-muted);
}
.panel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.panel__coin { width: 56px; flex: none; }
.panel__foot { margin-top: 14px; font-size: 12px; font-weight: 400; text-align: center; color: var(--ui-muted); }
.panel--flush { padding: 0; }

.legal {
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  color: var(--grey-mid);
}
.legal:empty { display: none; }

/* ── montos ── */
.amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 16px;
}
.amount-chip {
  width: 100%;
  min-height: 54px;
  padding: 6px 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-chip);
  font-size: clamp(12px, 3.6vw, 15px);
  font-weight: 700;
  color: var(--ui-ink);
  background: var(--ui-card);
  border: 2px solid var(--ui-line);
  box-shadow: none;
  transition: border-color .16s, color .16s, transform .12s var(--ease-out);
}
.amount-chip:active { transform: scale(.96); }
.amount-chip[aria-pressed="true"] {
  border-color: var(--ui-cta);
  color: var(--ui-cta);
  background: rgba(255, 41, 94, .05);
}

.btn {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-input);
  font-size: 16px; font-weight: 700; line-height: 24px;
  transition: transform .12s var(--ease-out), opacity .2s;
}
.btn--primary {
  color: var(--white);
  background: var(--ui-cta);
  box-shadow: var(--sh-cta);
}
.btn--primary:active { transform: scale(.985); }
.btn:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; transform: none; }
.btn.is-loading { opacity: .8; cursor: progress; }

/* ── historial ── */
.movements { display: grid; gap: 2px; padding: 4px 18px; }
.mov {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid rgba(22, 24, 35, .07);
}
.mov:first-child { border-top: 0; }
.mov__ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--pink);
  background: rgba(254, 44, 85, .09);
}
.mov__ico--bono { color: #B07A00; background: rgba(255, 199, 44, .20); }
.mov__ico svg { width: 19px; height: 19px; }
.mov__text b { display: block; font-size: 14px; font-weight: 600; line-height: 21px; color: var(--ui-ink); }
.mov__text small { font-size: 12px; line-height: 18px; color: var(--ui-muted); }
.mov__amount { font-size: 15px; font-weight: 700; color: var(--ui-ink); font-feature-settings: 'tnum' 1; }

.empty { text-align: center; padding: 42px 22px 46px; }
.empty__art {
  width: 100px; height: 86px;
  margin: 0 auto 26px;
  color: #B9BBC4;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.empty__title { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--ui-ink-2); }
.empty__sub {
  max-width: 30ch;
  margin: 10px auto 0;
  font-size: 14px; font-weight: 400;
  line-height: 21px;
  color: var(--ui-muted);
}

/* ── BOTTOM SHEET ── */
.bsheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.bsheet[hidden] { display: none; }

.bsheet__scrim {
  position: absolute; inset: 0;
  background: rgba(10, 12, 22, .48);
  opacity: 0;
  transition: opacity .3s ease;
}
.bsheet.is-open .bsheet__scrim { opacity: 1; }

.bsheet__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  min-height: 56dvh;          /* a folha ocupa 55-70% e cresce com o conteudo */
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-radius: 20px 20px 0 0;
  background: var(--white);
  box-shadow: 0 -10px 34px rgba(10, 12, 22, .22);
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22, .9, .28, 1.02);
}
.bsheet.is-open .bsheet__panel { transform: translateY(0); }
.bsheet__panel:focus { outline: none; }

.bsheet__handle {
  width: 40px; height: 4px;
  margin: 2px auto 6px;
  border-radius: 999px;
  background: rgba(22, 24, 35, .16);
}

.bsheet__head {
  flex: none;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding-bottom: 6px;
}
.bsheet__title { grid-column: 2; font-size: 16px; font-weight: 700; text-align: center; }
.bsheet__nav {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
}
.bsheet__nav:first-child { grid-column: 1; }
.bsheet__nav:last-child  { grid-column: 3; }
.bsheet__nav svg { width: 19px; height: 19px; stroke-width: 2.1; }
.bsheet__nav:active { background: rgba(22, 24, 35, .07); }
.bsheet__nav[hidden] { visibility: hidden; display: grid; }

.bsheet__body { overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
.bsheet__amount { font-size: 13px; color: var(--grey-mid); text-align: center; margin-bottom: 12px; }

.step.slide-in   { animation: stepIn  .22s var(--ease-out); }
.step.slide-back { animation: stepBack .22s var(--ease-out); }

/* ── métodos ── */
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 4px; }
.method {
  min-height: 108px;
  padding: 14px 12px;
  border-radius: 14px;
  text-align: left;
  background: var(--grey);
  border: 1.5px solid transparent;
  transition: border-color .16s, transform .12s var(--ease-out);
}
.method:active { transform: scale(.97); }
.method:not(.is-off):hover { border-color: rgba(254, 44, 85, .35); }
.method__ico {
  width: 64px; height: 40px;
  display: grid; place-items: center;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--white);
}
.method__ico svg { width: 20px; height: 20px; }
.method__name { display: block; font-size: 14.5px; }
.method__type { display: block; font-size: 12px; color: var(--grey-mid); }
.method__tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: #0A8F8B;
  background: rgba(37, 244, 238, .14);
}
.method.is-off .method__tag { color: var(--ui-muted, #777); background: rgba(22, 24, 35, .06); }
.method.is-off { opacity: .5; cursor: not-allowed; }

/* ── formulário ── */
.form__lead { margin-bottom: 14px; margin-top: -2px; }
.form__lead span { font-size: 12.5px; color: var(--grey-mid); }

.field { margin-bottom: 14px; }
.field__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.field__input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;                 /* 16px evita o zoom automático no iOS */
  color: var(--ink);
  background: var(--grey);
  border: 1.5px solid var(--ui-line);
  transition: border-color .16s, background .16s;
}
.field__input:focus { outline: none; border-color: var(--ink); background: var(--white); }

/* exemplo, não conteúdo: fica claramente mais leve que um valor real */
.field__input::placeholder {
  color: #B6B8C2;
  font-weight: 400;
  opacity: 1;
}
.field.has-error .field__input { border-color: var(--pink); }
.field__helper { margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--grey-mid); }
.field__msg { margin-top: 4px; font-size: 11.5px; font-weight: 600; min-height: 14px; }
.field__msg.is-err { color: var(--pink); }
.field__msg.is-ok  { color: #0FA9A3; }
.field__msg.is-ok::before { content: '✓ '; }

/* ── confirmação ── */
.step--done { text-align: center; padding: 10px 0 4px; }
.done__check { width: 64px; margin: 0 auto 12px; animation: checkIn .34s var(--ease-pop); }
.done__title { font-family: var(--font-hd); font-size: 21px; }
.done__sub { margin: 6px auto 18px; max-width: 30ch; font-size: 13px; line-height: 1.45; color: var(--grey-mid); }

@keyframes stepIn   { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes checkIn  { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }

@media (max-width: 340px) {
  .methods { grid-template-columns: 1fr; }
  .method { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .page, .bsheet__panel, .bsheet__scrim { transition: none; }
  .step.slide-in, .step.slide-back, .done__check { animation: none; }
  .bsheet__panel { transform: none; }
}

/* logos das bandeiras no seletor de método */
.method__ico img { max-width: 52px; max-height: 26px; width: auto; object-fit: contain; }
.method.is-off .method__ico img { filter: grayscale(1); opacity: .7; }

/* ── FAQ e configuración na folha secundária ── */
.faq { display: grid; }
.faq li { border-top: 1px solid var(--ui-line); }
.faq li:first-child { border-top: 0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px;
  font-size: 15px; font-weight: 600; line-height: 22px;
  color: var(--ui-ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  width: 18px; height: 18px; flex: none;
  color: var(--ui-muted);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease-out);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq p { padding: 0 2px 16px; font-size: 14px; line-height: 21px; color: var(--ui-muted); }

.settings { display: grid; padding-bottom: 4px; }
.settings li { border-top: 1px solid var(--ui-line); }
.settings li:first-child { border-top: 0; }
.settings button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px;
  padding: 0 2px;
  font-size: 15px; font-weight: 500;
  color: var(--ui-ink);
  text-align: left;
}
.settings button svg {
  width: 19px; height: 19px; flex: none;
  color: var(--ui-muted);
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.settings button:active { opacity: .55; }


/* =============================================================
   PROCESSO E CONFIRMAÇÃO DE RETIRO
   Fluxo linear: Retirar → loading → aviso → Continuar → tela.
   ============================================================= */

/* ── loading branco + aviso ── */
.process {
  position: fixed; inset: 0;
  z-index: 80;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 22px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: var(--white);
  opacity: 0;
  transition: opacity .22s ease;
}
.process[hidden] { display: none; }
.process.is-on { opacity: 1; }
.process__step { transition: opacity .24s ease; }

.process__step { display: grid; justify-items: center; width: 100%; }
.process__step[hidden] { display: none; }

.process__caption {
  margin-top: 26px;
  font-size: 14px;
  color: var(--ui-muted, #777);
}

.verify {
  position: fixed; inset: 0;
  z-index: 85;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
}
.verify[hidden] { display: none; }

/* overlay entra primeiro */
.verify__overlay {
  position: absolute; inset: 0;
  background: #FFFFFF;               /* fundo branco, sem a tela anterior atrás */
  opacity: 1;
}

/* modal entra logo depois, com leve subida */
.verify__modal {
  position: relative;
  width: min(92vw, 372px);
  padding: 30px 24px 24px;
  text-align: center;
  border-radius: 16px;
  background: var(--ui-card, #fff);
  box-shadow: 0 10px 30px rgba(10, 12, 22, .10);
  opacity: 0;
  transform: translateY(10px);
}
.verify.is-on .verify__modal { animation: verifyIn .25s ease .09s both; }
.verify__modal:focus { outline: none; }

/* âmbar: verificação pendente, não conta bloqueada */
.verify__ico {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #B4740A;
  background: #FFF4DC;
}
.verify__ico svg {
  width: 31px; height: 31px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.verify__title { font-size: 22px; font-weight: 700; line-height: 30px; color: var(--ui-ink, #000); }
.verify__lead  { margin-top: 12px; font-size: 15px; line-height: 23px; color: var(--ui-ink-2, #333); }

.verify__flag {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FFF8E8;
  border: 1px solid #F5E2B8;
  font-size: 15px; font-weight: 600; line-height: 22px;
  color: #8A5A05;
}

.verify__hint { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--ui-muted, #777); }
.verify .btn  { margin-top: 22px; letter-spacing: .02em; }

/* resumo de retención: ícone e CTA em âmbar, tom informativo */

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

}

}

/* ── tela de confirmação ── */
.topbar--solid {
  background: var(--ui-card, #fff);
  padding:
    calc(env(safe-area-inset-top, 0px) + 6px)
    18px 6px;
  box-shadow: var(--sh-card, 0 1px 2px rgba(0, 0, 0, .05));
  margin-bottom: 0;
}

.summary {
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(37, 244, 238, .08) 0%,
    #FFFFFF 38%,
    #FFFFFF 62%,
    rgba(254, 44, 85, .10) 100%
  );
}
.summary__label { font-size: 14px; color: var(--ui-muted, #777); }
.summary__value {
  margin-top: 2px;
  font-size: clamp(28px, 8.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ui-ink, #000);
  font-feature-settings: 'tnum' 1;
}
.summary__row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-line, #E5E7EB);
  font-size: 14px;
  color: var(--ui-muted, #777);
}
.summary__row b { font-weight: 600; color: var(--ui-ink, #000); }

.section-title--back { margin-bottom: 8px; }
.linkback {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px;
  font-size: 15px; font-weight: 600;
  color: var(--ui-muted, #777);
}
.linkback svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.linkback:active { opacity: .6; }

#stepForm .form__lead { margin-bottom: 16px; }
#stepForm .form__lead b { display: block; font-size: 18px; font-weight: 700; }
#stepForm .form__lead span { font-size: 14px; color: var(--ui-muted, #777); }

.form__note {
  margin: -6px 0 16px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 19px;
  color: var(--ui-ink-2, #333);
  background: rgba(37, 244, 238, .08);
  border: 1px solid rgba(37, 244, 238, .24);
}
.form__note[hidden] { display: none; }

/* a tela de confirmação não tem ações à direita: colunas menores
   para o título não precisar ser truncado */
.topbar--solid { grid-template-columns: 44px minmax(0, 1fr) 44px; }

/* aqui o fundo da página já é cinza, então os cards de método
   precisam ser brancos para se destacarem */
#stepMethods .method {
  background: var(--ui-card, #fff);
  box-shadow: var(--sh-card, 0 1px 2px rgba(0, 0, 0, .05));
}
#stepMethods .method__ico { background: var(--ui-canvas, #F5F5F5); }
#stepMethods .methods { gap: 12px; }


/* CTA amarelo do aviso (mesmo acabamento premium do fluxo) */
.btn--amber {
  color: #FFFFFF;
  background: linear-gradient(180deg, #FFC93A 0%, #FBB000 52%, #E89200 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px rgba(240, 164, 0, .34);
  text-shadow: 0 1px 2px rgba(150, 90, 0, .38);
  letter-spacing: .02em;
}
.btn--amber:active { transform: scale(.98); }
.btn--amber.is-loading { opacity: .8; cursor: progress; }

.verify__ico--amber { color: #B4740A; background: #FFF4DC; }


/* =============================================================
   CONFIRMACIÓN DE PREMIO — fiscal.html
   Continuação direta de saldo.html: reaproveita .hero, .topbar,
   .panel e .btn--primary. Só o que é específico vive aqui.
   ============================================================= */

/* título longo desta tela: colunas laterais menores e um degrau a menos */
.hero .topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.page .topbar__title { font-size: clamp(13.5px, 3.9vw, 16.5px); }

/* linha extra abaixo do hint, no mesmo bloco do gradiente */
.hero__note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  color: var(--ui-muted);
}
.hero__note b {
  font-weight: 600;
  color: var(--ui-ink-2);
  font-feature-settings: 'tnum' 1;
}

/* corpo de texto dentro dos painéis */
.panel__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--ui-ink-2);
}
.panel__text--muted { color: var(--ui-muted); }

/* ── resumo da retenção ────────────────────────────────────── */

.sum { margin-top: 14px; display: grid; }

.sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--ui-line);
}
.sum__row:first-child { border-top: 0; padding-top: 2px; }

.sum__row dt {
  min-width: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ui-muted);
}
.sum__row dd {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: var(--ui-ink);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.sum__minus { color: #B4740A; }

.sum__row--total {
  margin-top: 4px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--ui-line);
}
.sum__row--total dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-ink);
}
.sum__row--total dd {
  font-size: 17px;
  font-weight: 700;
  color: var(--ui-cta);
}

.sum__note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ui-muted);
}

/* ── card SPEI ─────────────────────────────────────────────── */

.spei { margin-top: 14px; }

.spei__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border-radius: 12px;
  background: var(--ui-card);
  border: 1.5px solid var(--ui-line);
  transition: border-color .16s, background .16s;
}
.spei.is-selected .spei__card {
  border-color: var(--ui-cta);
  background: rgba(255, 41, 94, .04);
}
.spei__card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.spei__logo {
  width: 46px;
  height: auto;
  flex: none;
  object-fit: contain;
}
.spei__body { flex: 1; display: grid; gap: 1px; min-width: 0; }
.spei__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ui-ink);
}
.spei__meta {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ui-muted);
  white-space: nowrap;
}

.spei__tag {
  flex: none;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #0A8F8B;
  background: rgba(37, 244, 238, .14);
}

.spei__check {
  width: 24px; height: 24px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ui-cta);
  color: #fff;
}
.spei__check svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── CTA e apoio ───────────────────────────────────────────── */



/* ── footer ────────────────────────────────────────────────── */

.fiscal-foot {
  padding: 10px 0 14px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.fiscal-foot__secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ui-muted);
}
.fiscal-foot__secure svg {
  width: 15px; height: 15px;
  color: var(--ui-muted);
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.fiscal-foot__link {
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-cta);
}
.fiscal-foot__link:active { opacity: .6; }
.fiscal-foot__ref {
  font-size: 11.5px;
  line-height: 17px;
  color: var(--ui-muted);
}
.fiscal-foot__ref b {
  font-weight: 600;
  color: var(--ui-ink-2);
  letter-spacing: -.01em;
}


/* =============================================================
   RETIRO EN PROCESO — procesando.html (endpoint do funil)
   ============================================================= */

.done-stack { gap: 14px; padding-top: 20px; }

.done-hero {
  text-align: center;
  padding: 30px 20px 6px;
}
.done-hero__check {
  width: 72px;
  margin: 0 auto 18px;
  animation: doneCheck .4s var(--ease-pop) both;
}
.done-hero__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  color: var(--ui-ink);
}
.done-hero__sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ui-muted);
}

@keyframes doneCheck {
  0%  { opacity: 0; transform: scale(.6); }
  65% { opacity: 1; transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* destino inline */
.dest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.dest-row__logo {
  width: 48px;
  height: auto;
  flex: none;
  object-fit: contain;
}
.dest-row__body { display: grid; gap: 2px; min-width: 0; }
.dest-row__body b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-ink);
}
.dest-row__body small {
  font-size: 12.5px;
  color: var(--ui-muted);
}

/* estado com ponto pulsante */
.estado {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}
.estado__dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: #0A8F8B;
  animation: estadoPulse 1.8s ease-in-out infinite;
}
@keyframes estadoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 143, 139, .40); }
  60%      { box-shadow: 0 0 0 7px rgba(10, 143, 139, 0); }
}
.estado__label {
  font-size: 14px;
  font-weight: 600;
  color: #0A8F8B;
}
.estado__time {
  font-size: 12.5px;
  color: var(--ui-muted);
}
.estado__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 19px;
  color: var(--ui-muted);
}

.done-ref {
  text-align: center;
  font-size: 12px;
  color: var(--ui-muted);
}
.done-ref b {
  font-weight: 600;
  color: var(--ui-ink-2);
  letter-spacing: -.01em;
}

.done-cta {
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: .02em;
}

.done-note {
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: var(--ui-muted);
  max-width: 34ch;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .done-hero__check,
  .estado__dot { animation: none !important; }
}


/* espaço extra no fim da tela fiscal, sob o CTA ancorado */


/* =============================================================
   CTA-DOCK — barra ancorada no rodapé
   O botão principal nunca depende de scroll. A barra tem fundo
   próprio e opaco, então o estado :disabled do botão não deixa
   o conteúdo de trás aparecer através dele.
   ============================================================= */

.cta-dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 30;
  width: min(100vw, 440px);
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: linear-gradient(180deg,
    rgba(245, 245, 245, 0) 0%,
    var(--ui-canvas, #F5F5F5) 22%,
    var(--ui-canvas, #F5F5F5) 100%);
}
.cta-dock .btn { width: 100%; }
.cta-dock__note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  color: var(--ui-muted, #777);
}

/* espaço no fim do scroll para a barra não cobrir conteúdo */
.fiscal-stack { padding-bottom: 108px; }   /* só o rodapé: o padding lateral vem de .stack */
#stepForm { padding-bottom: 84px; }

/* ===== Aviso ISR / SAT (fiscal) ===== */
.fiscal-notice__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fiscal-notice__ico{width:34px;height:34px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:#EAF7F1;color:#0FA779;border:1px solid #CDEEE0}
.fiscal-notice__ico svg{width:19px;height:19px}
.fiscal-notice .panel__title{margin:0}