/* Tela do jogo FARMAR AURA (crash por clique).
   Usa os tokens do shell.css (nav, cores, tipografia) -- aqui so mora o que e
   do jogo: o personagem, o painel de aposta e o historico de rodadas. */
/* as cores da marca vivem em tema.css (valem na plataforma inteira);
   aqui so o que e da tela do jogo */

.au-root {
  max-width: 540px;
  margin: 0 auto;
  padding: 8px 14px 0;
  display: flex;
  flex-direction: column;
  /* ⚠️ FOLGA de 10px de proposito. Sem ela o conteudo ficava EXATAMENTE na
     altura da tela, e a variacao de ~1px do multiplicador (que cresce com o
     multiplicador) cruzava o limite a cada clique: a barra de rolagem aparecia,
     a pagina encolhia 19px, refluia, a barra sumia... e o boneco BALANCAVA de
     lado junto. Era isso a "imagem pulando" -- nao a animacao. */
  min-height: calc(100dvh - var(--pp-nav-h) - 56px);
}

/* ---------- topo: marca + saldo ---------- */
.au-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 8px;
}
.au-marca {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  background: linear-gradient(120deg, #fff 0%, #c9a4ff 40%, var(--au-ciano) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.au-saldo {
  background: linear-gradient(180deg, rgba(40, 26, 74, .9), rgba(14, 10, 28, .9));
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  padding: 6px 12px;
  text-align: right;
  line-height: 1.1;
}
.au-saldo small {
  display: block;
  color: var(--pp-sub);
  font-size: 9px;
  letter-spacing: 1.4px;
}
.au-saldo b { font-size: 17px; color: var(--au-ciano); }

/* Camada interna com ALTURA PROPRIA: `inset: 0` da a ela a altura do palco, e e
   isso que faz `height: 92%` do boneco resolver (como item flex direto do palco,
   a porcentagem virava ZERO e o boneco sumia). */
.au-cena {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2.5%;
  pointer-events: none;   /* o clique passa para o boneco, que reativa */
}
.au-cena > * { pointer-events: auto; }

/* ---------- palco do personagem ---------- */
/* O palco virou o CENARIO (rua do Rio). Ele fica numa moldura arredondada, e
   nao sangrando na tela inteira, por dois motivos: o cenario e claro/ensolarado
   e o app e escuro -- em tela cheia o HUD sumiria por cima do ceu; e assim o
   jogo ganha cara de "janela", com o resto do app mantendo a identidade neon. */
.au-palco {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;      /* o boneco PISA no chao do cenario */
  justify-content: center;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--pp-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  background-image: url('/fronts/aura/assets/cenario.webp');
  background-size: cover;
  /* privilegia a parte de BAIXO da arte (a rua), cortando o excesso de ceu */
  background-position: center 78%;
}
/* Tratamento do cenario: escurece e puxa para o roxo, para o personagem e o
   texto lerem por cima. Clareia de leve conforme a rodada esquenta -- a aura
   "ilumina" a rua. Fica ATRAS do boneco (z-index). */
.au-palco::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* MEIO-TERMO (escolha do dono): da para ver o Cristo, as palmeiras e as cores
     da rua, mas escuro o bastante para o boneco, o multiplicador e a aura neon
     se destacarem. O topo escurece mais que o resto porque e onde mora o
     multiplicador -- sobre ceu claro ele sumia. */
  background:
    linear-gradient(180deg, rgba(7, 7, 13, calc(.74 - .16 * var(--int, 0))) 0%,
                            rgba(9, 6, 20, calc(.34 - .12 * var(--int, 0))) 34%,
                            rgba(9, 6, 20, calc(.24 - .10 * var(--int, 0))) 68%,
                            rgba(7, 7, 13, .56) 100%),
    radial-gradient(ellipse 80% 60% at 50% 72%, transparent 38%, rgba(7, 7, 13, .5) 100%);
  mix-blend-mode: multiply;
  transition: background .35s ease-out;
}
/* brilho da aura por cima do cenario (o antigo ::before continua valendo) */
.au-boneco { z-index: 2; }
.au-mult { z-index: 3; }
/* brilho ambiente atras do boneco; a cor acompanha a faixa do multiplicador */
.au-palco::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--au-cor, var(--au-roxo)) 0%, transparent 68%);
  opacity: .18;
  filter: blur(26px);
  transition: opacity .3s;
  pointer-events: none;
}
.au-palco.quente::before { opacity: .34; }
/* substitui o degrau: o brilho cresce continuo com --int e pulsa mais rapido */
.au-palco::before {
  opacity: calc(.14 + .38 * var(--int, 0));
  animation: au-brilho calc(3s - 2.1s * var(--int, 0)) ease-in-out infinite;
}
@keyframes au-brilho {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(calc(1 + .08 * var(--int, 0))); }
}
/* no auge a tela inteira ganha uma vinheta pulsante */
.au-palco.fervendo::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, var(--au-cor, var(--au-roxo)) 130%);
  opacity: .16;
  animation: au-vinheta .85s ease-in-out infinite;
}
@keyframes au-vinheta { 0%, 100% { opacity: .1; } 50% { opacity: .26; } }

.au-boneco {
  /* ⚠️ ABSOLUTO de proposito. Como item flex, `height: 86%` resolvia para ZERO
     (porcentagem de altura nao resolve sem altura definida no pai) e o boneco
     sumia da tela. Absoluto dentro do palco (que e position:relative), a
     porcentagem passa a valer -- e ele fica sempre na mesma proporcao do
     cenario, com os pes no calcamento. */
  /* ⚠️ NADA DE POSICIONAMENTO AQUI -- e a terceira tentativa, as duas anteriores
     faziam a imagem PULAR ao clicar:
     1) `translateX(-50%)` no mesmo transform do zoom: o navegador escala a
        translacao junto, entao cada mudanca de zoom empurrava o boneco de lado;
     2) `left:0 + right:0 + margin:auto` junto com aspect-ratio e height:
        sobre-restringe o layout e o navegador oscilava entre duas solucoes
        (medido: alternava 89,2px <-> 79,7px a cada clique).
     Agora quem centraliza e o flex do `.au-cena`, e o transform carrega SO o
     zoom. Medido depois: variacao horizontal 0px. */
  height: 92%;
  max-height: 470px;
  aspect-ratio: 956 / 1455;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease-out;
}
.au-boneco {
  /* aproxima de leve conforme a rodada esquenta (1 -> 1.07) */
  transform: scale(calc(1 + .07 * var(--int, 0)));
  /* cresce para CIMA: com origem no centro o zoom enterrava os pes no chao */
  transform-origin: 50% 100%;
  transition: transform .25s ease-out, filter .25s ease-out;
  filter: drop-shadow(0 0 calc(4px + 16px * var(--int, 0)) rgba(168, 85, 247, calc(.25 + .5 * var(--int, 0))));
}
.au-boneco:active { transform: scale(calc(1 + .07 * var(--int, 0) - .015)); transform-origin: 50% 100%; }
/* As 3 poses ficam empilhadas e cruzam opacidade. Elas foram alinhadas pela
   cabeca (scripts/boneco.py), entao so os bracos se mexem. */
.au-pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  opacity: 0;
  transition: opacity .11s linear;
  pointer-events: none;
  -webkit-user-drag: none;
}
.au-pose.on { opacity: 1; }

/* SOMBRA NO CHAO. Sem ela o boneco fica "colado" por cima da foto: e ela que
   assenta o personagem no calcamento. Escurece o chao e ganha um halo na cor da
   aura conforme a rodada esquenta. */
.au-boneco::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  width: 46%;
  height: 4.5%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .28) 45%, transparent 72%),
    radial-gradient(ellipse, var(--au-cor, var(--au-roxo)) 0%, transparent 65%);
  filter: blur(5px);
  opacity: calc(.55 + .35 * var(--int, 0));
  pointer-events: none;
  z-index: -1;
}

/* aura na palma: uma por mao, posicionada por --x/--y (medidos no alpha da arte) */
.au-palma {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--au-cor, var(--au-roxo)) 30%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(4px);
  opacity: .32;
  pointer-events: none;
  animation: au-pulsar 2.2s ease-in-out infinite;
}
.au-palma {
  animation-duration: calc(2.3s - 1.5s * var(--int, 0));
  width: calc(22% + 6% * var(--int, 0));
  opacity: calc(.3 + .35 * var(--int, 0));
}
.au-boneco.quente .au-palma { animation-duration: .9s; }
.au-palma.acendeu { animation: au-acender .5s ease-out; }
@keyframes au-pulsar {
  0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.85); }
  50% { opacity: .55; transform: translate(-50%, -50%) scale(.98); }
}
@keyframes au-acender {
  0% { opacity: .35; transform: translate(-50%, -50%) scale(.8); }
  26% { opacity: 1; transform: translate(-50%, -50%) scale(1.55); }
  100% { opacity: .3; transform: translate(-50%, -50%) scale(1.1); }
}

/* multiplicador: faixa propria acima do cenario.
   ⚠️ ALTURA FIXA. O numero cresce com o multiplicador (44px -> 72px), e enquanto
   isso mexia no layout a pagina inteira era empurrada para baixo a cada clique;
   em tela menor isso cruzava a altura do viewport e a barra de rolagem passava a
   piscar -- era o "tremendo a tela" a partir de ~2x. Agora a caixa nao muda de
   tamanho e o numero cresce DENTRO dela. */
.au-mult {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 86px;
  flex: none;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 18px var(--au-cor, var(--au-roxo));
}
.au-mult b {
  display: block;
  /* cresce de 44px (1.00x) ate ~72px no auge, junto com --int */
  font-size: calc(42px + 24px * var(--int, 0));   /* cabe na altura fixa acima */
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;
  transition: font-size .18s ease-out;
  will-change: transform;
}
.au-mult span { font-size: 12px; color: var(--pp-sub); letter-spacing: 1.5px; }
.au-mult.parado b { color: var(--pp-sub); text-shadow: none; }
/* o brilho atras do numero engrossa com a intensidade */
.au-mult {
  text-shadow:
    0 0 calc(10px + 26px * var(--int, 0)) var(--au-cor, var(--au-roxo)),
    0 0 calc(3px + 8px * var(--int, 0)) rgba(255, 255, 255, calc(.3 + .5 * var(--int, 0)));
}
/* respiracao continua: lenta no comeco, ofegante perto do topo */
.au-mult:not(.parado) b {
  animation: au-respirar calc(2.4s - 1.7s * var(--int, 0)) ease-in-out infinite;
}
@keyframes au-respirar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(calc(1 + .04 * var(--int, 0))); }
}
/* batida a cada toque -- quanto maior a intensidade, mais forte o soco */
.au-mult.bateu b { animation: au-bater .3s ease-out; }
@keyframes au-bater {
  0% { transform: scale(1); }
  35% { transform: scale(calc(1.1 + .22 * var(--int, 0))); }
  100% { transform: scale(1); }
}

/* numeros que sobem a cada clique */
.au-flut {
  position: absolute;
  font-weight: 900;
  font-size: 15px;
  color: var(--au-cor, var(--au-roxo));
  text-shadow: 0 0 10px rgba(0, 0, 0, .8);
  pointer-events: none;
  animation: au-subir .8s ease-out forwards;
}
@keyframes au-subir {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-56px) scale(1.25); }
}

/* aviso grande de estouro / retirada */
.au-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  pointer-events: none;
  animation: au-flash .9s ease-out forwards;
}
.au-flash.perdeu { color: #ff3d8b; text-shadow: 0 0 26px rgba(255, 61, 139, .85); }
.au-flash.ganhou { color: #2ee89c; text-shadow: 0 0 26px rgba(46, 232, 156, .85); }
@keyframes au-flash {
  0% { opacity: 0; transform: scale(.7); }
  22% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
.au-shake { animation: au-shake .4s; }
@keyframes au-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  45% { transform: translateX(7px); }
  70% { transform: translateX(-4px); }
}

/* ---------- historico ---------- */
.au-hist {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
}
.au-hist::-webkit-scrollbar { display: none; }
.au-hist i {
  flex: none;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 61, 139, .14);
  color: #ff8fb8;
  border: 1px solid rgba(255, 61, 139, .32);
}
.au-hist i.ok {
  background: rgba(34, 217, 146, .14);
  color: #5ff0b4;
  border-color: rgba(34, 217, 146, .35);
}

/* ---------- painel de aposta ---------- */
.au-painel {
  background: linear-gradient(180deg, rgba(30, 20, 56, .92), rgba(14, 10, 28, .95));
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 -2px 26px rgba(124, 58, 237, .18), 0 6px 18px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
.au-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.au-linha small { display: block; color: var(--pp-sub); font-size: 9px; letter-spacing: 1.4px; }
.au-linha b { font-size: 18px; }
.au-vale b { color: var(--au-ciano); }

.au-chips { display: flex; gap: 6px; margin-bottom: 10px; }
.au-chips button {
  flex: 1;
  border: 1px solid var(--pp-line);
  background: rgba(18, 10, 36, .8);
  color: var(--pp-sub);
  border-radius: 9px;
  padding: 8px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.au-chips button.on {
  color: #fff;
  background: linear-gradient(180deg, #b06bff, #7c3aed);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(168, 85, 247, .5);
}
.au-chips button:disabled { opacity: .45; cursor: not-allowed; }

.au-dica {
  text-align: center;
  color: var(--pp-sub);
  font-size: 11px;
  margin-top: 8px;
  min-height: 14px;
}
.au-dica.erro { color: #ff8fb8; }


/* ---------- faiscas que sobem (frequencia cresce com o multiplicador) ---------- */
.au-faisca {
  position: absolute;
  width: var(--sz, 4px);
  height: var(--sz, 4px);
  border-radius: 50%;
  background: var(--au-cor, var(--au-roxo));
  box-shadow: 0 0 8px var(--au-cor, var(--au-roxo));
  pointer-events: none;
  opacity: 0;
  animation: au-faisca var(--dur, 1.2s) ease-out forwards;
}
@keyframes au-faisca {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -90px) scale(1.1); }
}

/* Quem pediu menos movimento no sistema recebe a versao calma: a intensidade
   continua sendo lida pela COR e pelo tamanho, sem pulsar nem tremer. */
@media (prefers-reduced-motion: reduce) {
  .au-mult:not(.parado) b, .au-mult.bateu b, .au-palco::before,
  .au-palco.fervendo::after, .au-faisca { animation: none; }
  .au-faisca { opacity: .9; }
}

/* ---------- COMEMORACAO DA RETIRADA ---------- */
/* Aparece quando o jogador retira. A festa ESCALA com o tamanho da vitoria
   (--int vem do multiplicador da rodada), entao 1.03x nao comemora igual a 20x. */
.au-win {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(ellipse at center, rgba(12, 8, 24, .82), rgba(4, 3, 9, .94));
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-out;
}
.au-win.on { opacity: 1; pointer-events: auto; }

.au-win-cx {
  position: relative;
  width: 100%;
  max-width: 330px;
  text-align: center;
  padding: 26px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(38, 25, 70, .96), rgba(14, 10, 28, .98));
  border: 1px solid rgba(168, 85, 247, .45);
  box-shadow:
    0 0 calc(30px + 60px * var(--int, 0)) rgba(168, 85, 247, calc(.3 + .35 * var(--int, 0))),
    0 18px 50px rgba(0, 0, 0, .6);
  transform: scale(.85) translateY(14px);
  transition: transform .28s cubic-bezier(.2, 1.5, .4, 1);
}
.au-win.on .au-win-cx { transform: scale(1) translateY(0); }

.au-win-selo {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.6px;
  color: var(--au-ciano);
  border: 1px solid rgba(34, 230, 255, .35);
  background: rgba(34, 230, 255, .1);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 12px;
}
.au-win-valor {
  font-size: calc(38px + 14px * var(--int, 0));
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 calc(14px + 26px * var(--int, 0)) var(--au-cor, var(--au-roxo));
  animation: au-win-bater .5s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes au-win-bater {
  0% { transform: scale(.55); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.au-win-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 18px;
  font-size: 12px;
  color: var(--pp-sub);
  letter-spacing: .6px;
}
.au-win-linha b { color: #fff; }
#au-win-lucro { color: #2ee89c; font-weight: 800; }
.au-win-btn { margin-top: 2px; }

/* confete: as pecas sao criadas pelo JS, em quantidade proporcional a vitoria */
.au-win-confete {
  position: absolute;
  inset: -10px -10px auto -10px;
  height: 220px;
  overflow: hidden;
  pointer-events: none;
  border-radius: 20px;
}
.au-conf {
  position: absolute;
  top: -14px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: au-conf var(--dur, 1.6s) ease-in forwards;
  animation-delay: var(--atraso, 0s);
}
@keyframes au-conf {
  0% { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(230px) rotate(var(--giro, 420deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .au-win-cx, .au-win-valor { transition: none; animation: none; transform: none; }
  .au-conf { display: none; }
}

/* O foco vai para o botao ao abrir (teclado/leitor de tela). O anel padrao do
   navegador fica grosso e branco em cima do roxo, entao usamos um proprio. */
.au-win-btn:focus { outline: none; box-shadow: 0 5px 0 #4c1d95, 0 0 0 2px var(--au-ciano); }
.au-win-btn:focus:not(:focus-visible) { box-shadow: 0 5px 0 #4c1d95, 0 8px 22px rgba(124, 58, 237, .4); }


/* ---------- VITRINE DE GANHADORES (faixa do topo) ---------- */
/* ⚠️ ALTURA FIXA e conteudo trocado por dentro. Se a faixa crescesse/encolhesse
   conforme o texto, empurraria a pagina -- foi assim que nasceu o tremor da tela
   (ver comentario em .au-mult). */
.au-ganhadores {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  flex: none;
  margin: 2px 0 4px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(168, 85, 247, .16), rgba(34, 230, 255, .07));
  border: 1px solid rgba(168, 85, 247, .28);
  overflow: hidden;
}
.au-ganhadores[hidden] { display: none; }
.au-gan-ico { font-size: 12px; line-height: 1; flex: none; }
.au-gan-vitrine { position: relative; flex: 1; height: 100%; overflow: hidden; }
.au-gan-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-sub);
  white-space: nowrap;
  animation: au-gan-entra .45s ease-out;
}
.au-gan-item b { color: var(--pp-text); }
.au-gan-item i { font-style: normal; color: #2ee89c; font-weight: 800; }
.au-gan-item u { text-decoration: none; color: var(--au-ciano); font-weight: 800; }
@keyframes au-gan-entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .au-gan-item { animation: none; } }


/* ---------- fim de rodada: variante ESTOUROU ---------- */
/* Mesma caixa da retirada, so trocando a cor. O jogador perde MUITO mais vezes
   do que ganha, entao esta versao e sobria: sem confete, sem brilho grande --
   comemorar a derrota com a mesma festa da vitoria e de mau gosto e cansa. */
.au-win.perdeu .au-win-cx {
  border-color: rgba(255, 61, 139, .45);
  box-shadow: 0 0 34px rgba(255, 61, 139, .25), 0 18px 50px rgba(0, 0, 0, .6);
}
.au-win.perdeu .au-win-selo {
  color: #ff8fb8;
  border-color: rgba(255, 61, 139, .38);
  background: rgba(255, 61, 139, .12);
}
.au-win.perdeu .au-win-valor { color: #ff8fb8; text-shadow: 0 0 20px rgba(255, 61, 139, .55); }
.au-win.perdeu #au-win-lucro { color: #ff8fb8; }
.au-win.perdeu .au-win-btn {
  background: linear-gradient(180deg, #b06bff, #7c3aed);
}