/* Pontos: moeda dourada 3D giratória e cores dos níveis. */

/* ---------- Cores dos níveis (usadas no ranking, no perfil e na ajuda) */
:root {
  --nivel-1: #6E7571; --nivel-1-soft: rgba(110, 117, 113, .15);   /* Iniciante: cinza */
  --nivel-2: #2C772C; --nivel-2-soft: rgba(44, 119, 44, .14);     /* Arguidor: verde */
  --nivel-3: #1F6FB5; --nivel-3-soft: rgba(31, 111, 181, .14);    /* Examinador: azul */
  --nivel-4: #662D91; --nivel-4-soft: rgba(102, 45, 145, .13);    /* Catedrático: roxo */
  --nivel-5: #C0265B; --nivel-5-soft: rgba(192, 38, 91, .13);     /* Emérito: carmim */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nivel-1: #A4ABA7; --nivel-2: #6DC36D; --nivel-3: #6FB1EE; --nivel-4: #B98AE0; --nivel-5: #F0719B;
  }
}
:root[data-theme="dark"] { --nivel-1: #A4ABA7; --nivel-2: #6DC36D; --nivel-3: #6FB1EE; --nivel-4: #B98AE0; --nivel-5: #F0719B; }
.nivel-1 { --nv: var(--nivel-1); --nv-soft: var(--nivel-1-soft); }
.nivel-2 { --nv: var(--nivel-2); --nv-soft: var(--nivel-2-soft); }
.nivel-3 { --nv: var(--nivel-3); --nv-soft: var(--nivel-3-soft); }
.nivel-4 { --nv: var(--nivel-4); --nv-soft: var(--nivel-4-soft); }
.nivel-5 { --nv: var(--nivel-5); --nv-soft: var(--nivel-5-soft); }
.pill-nivel { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--nv-soft); color: var(--nv); }
.pill-nivel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nv); }
.texto-nivel { color: var(--nv); font-weight: 700; }
.nivel-bola { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nv-soft); color: var(--nv); font-size: 12px; font-weight: 700; margin-right: 6px; border: 1.5px solid var(--nv); }

/* ---------- Moeda 3D */
.pontos { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.moeda { display: inline-block; flex: none; width: 1.2em; height: 1.2em; perspective: 160px; vertical-align: -.22em; --esp: 2.4px; }
.moeda-giro { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: moeda-gira 3.6s linear infinite; }
.moeda-borda, .moeda-face { position: absolute; inset: 0; border-radius: 50%; }
.moeda-borda { background: #b8860b; transform: translateZ(calc((var(--i) - 3) * var(--esp) / 6)); }
.moeda-face {
  display: grid; place-items: center; backface-visibility: hidden;
  background: radial-gradient(circle at 32% 28%, #fff4c2 0%, #f3c740 38%, #d9a21b 70%, #a87408 100%);
  box-shadow: inset 0 0 0 1.5px #b8860b, inset 0 0 0 3px rgba(255, 244, 194, .75), inset 0 0 0 3.6px rgba(122, 82, 6, .35);
}
.moeda-frente { transform: translateZ(calc(var(--esp) / 2)); }
.moeda-verso { transform: rotateY(180deg) translateZ(calc(var(--esp) / 2)); }
.moeda-frente svg { width: 66%; height: 66%; overflow: visible; }
.moeda-verso b { font: 800 .78em/1 var(--font); color: #d9a21b; text-shadow: -.04em -.04em 0 #fff4c2, .05em .06em 0 #7a5206; }
@keyframes moeda-gira { to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .moeda-giro { animation: none; } }

.icone-bolha.bolha-nivel { background: var(--nv-soft); color: var(--nv); }
.menu-pontos { display: inline-flex; align-items: center; gap: 4px; }