/* IDENTIDADE VISUAL DO FARMAR AURA.
 *
 * Carregado DEPOIS do shell.css em todas as telas. Ele so redefine os tokens e
 * alguns componentes -- nao reescreve o shell. Assim a plataforma inteira
 * (deposito, saque, indicar, missoes, perfil, campeonato) muda de cara junto com
 * o jogo, e o shell continua servindo o outro jogo sem alteracao.
 *
 * Plinko = azul-marinho + dourado. Aura = preto profundo + roxo/ciano neon.
 */
:root {
  /* o "dourado" do shell vira o ROXO da marca: e a cor de destaque, item ativo
     da nav, saldo e botao principal */
  --pp-gold: #a855f7;
  --pp-gold-2: #7c3aed;

  --pp-bg: #07070d;
  --pp-bg-2: #120a24;
  --pp-card: #17102b;
  --pp-card-2: #0e0a1c;
  --pp-line: #2b1d52;
  --pp-text: #f5f2ff;
  --pp-sub: #9b90bd;

  --pp-green: #22d992;
  --pp-green-2: #12a86c;

  /* cores proprias do Aura */
  --au-roxo: #a855f7;
  --au-ciano: #22e6ff;
  --au-rosa: #ff3d8b;
}

/* Reserva o espaco da barra de rolagem SEMPRE. Sem isto, quando o conteudo
   cruza a altura da tela a barra aparece/some e a pagina inteira desloca 19px --
   no jogo isso lia como a imagem "pulando" a cada clique. No celular as barras
   sao sobrepostas e isto nao muda nada. */
html { scrollbar-gutter: stable; }

/* Fundo com brilho, em vez do azul chapado do Plinko. `fixed` para nao rolar
   junto com a pagina. */
body.pp-body {
  background:
    radial-gradient(58% 42% at 12% 4%, rgba(168, 85, 247, .20), transparent 62%),
    radial-gradient(50% 38% at 92% 22%, rgba(34, 230, 255, .13), transparent 60%),
    radial-gradient(70% 45% at 50% 108%, rgba(124, 58, 237, .16), transparent 66%),
    var(--pp-bg);
  background-attachment: fixed;
}

/* ---------- botoes ---------- */
/* O botao "dourado" tinha texto quase preto (legivel no amarelo). No roxo isso
   fica ilegivel, entao o texto vira branco e a sombra acompanha o tom. */
.pp-btn-gold {
  color: #fff;
  background: linear-gradient(180deg, #b06bff, #7c3aed);
  box-shadow: 0 5px 0 #4c1d95, 0 8px 22px rgba(124, 58, 237, .4);
}
.pp-btn-gold:active { box-shadow: 0 3px 0 #4c1d95, 0 5px 14px rgba(124, 58, 237, .35); }
.pp-btn-green {
  color: #04140b;
  background: linear-gradient(180deg, #2ee89c, #12a86c);
  box-shadow: 0 5px 0 #0b6b45, 0 8px 22px rgba(34, 217, 146, .32);
}
.pp-btn-green:active { box-shadow: 0 3px 0 #0b6b45, 0 5px 14px rgba(34, 217, 146, .3); }

/* ---------- cards ---------- */
.pp-card, .pp-saldo-card {
  background: linear-gradient(180deg, rgba(30, 20, 56, .92), rgba(14, 10, 28, .92));
  border-color: var(--pp-line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pp-saldo-card strong { color: var(--au-ciano); }

/* títulos com o degrade da marca (era dourado) */
.pp-h1 { background: linear-gradient(180deg, #fff 0%, #c9a4ff 48%, #7c3aed 100%); }
.pp-eyebrow { color: var(--au-ciano); border-color: rgba(34, 230, 255, .32); background: rgba(34, 230, 255, .08); }

/* barra de progresso: era azul do Plinko */
.pp-bar > i { background: linear-gradient(90deg, var(--au-roxo), var(--au-ciano)); }

/* recompensa de missao */
.pp-mission .rw { color: #fff; background: linear-gradient(180deg, #b06bff, #7c3aed); }

/* ---------- nav inferior ---------- */
.pp-nav {
  background: linear-gradient(180deg, rgba(23, 16, 43, .96), rgba(7, 7, 13, .99));
  border-top: 1px solid var(--pp-line);
  backdrop-filter: blur(10px);
}
.pp-nav a.on { color: var(--au-ciano); }
/* marcador do item ativo -- o Plinko nao tem, ajuda a diferenciar */
.pp-nav a.on::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--au-ciano);
  box-shadow: 0 0 10px var(--au-ciano);
}
.pp-nav .center .ball {
  background: linear-gradient(180deg, #b06bff, #7c3aed);
  border-color: #0e0a1c;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .55), 0 0 0 2px rgba(168, 85, 247, .3);
}
.pp-nav .center .ball svg { fill: #fff; }
.pp-nav .dot { background: var(--au-rosa); }

/* ---------- toasts ---------- */
.pp-toast {
  background: linear-gradient(180deg, #241a44, #140e28);
  border: 1px solid var(--pp-line);
  color: var(--pp-text);
}