/* RallyAces — remake. Paleta puxada da arte do jogo: vinho, roxo e dourado. */
:root {
  --fundo: #0b0618;
  --fundo2: #150c2b;
  --carta-borda: rgba(190, 150, 255, .3);
  --dourado: #ffd76a;
  --dourado2: #f0a838;
  --texto: #f0e9ff;
  --texto2: #b6a8d8;
  --texto3: #7d6fa0;
  --verde: #4ad07a;
  --vermelho: #ff6b6b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, Arial, sans-serif;
  color: var(--texto); background: var(--fundo);
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }

.tela { display: none; height: 100%; }
.tela.ativa { display: flex; flex-direction: column; }

/* ------------------------------------------------------------ entrar */
#telaEntrar {
  align-items: center; justify-content: center;
  background: radial-gradient(1100px 700px at 50% 0%, #3a1d5c 0%, var(--fundo) 60%);
}
.cartao {
  width: 92%; max-width: 380px; padding: 34px 30px 24px; text-align: center;
  background: linear-gradient(180deg, rgba(45,28,82,.96), rgba(24,14,46,.98));
  border: 1px solid var(--carta-borda); border-radius: 20px;
  box-shadow: 0 26px 80px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
.cartao h1 { margin: 0; font-size: 27px; letter-spacing: .5px; }
.cartao h1 span { color: var(--dourado); text-shadow: 0 2px 14px rgba(255,190,70,.45); }
.sub { margin: 4px 0 20px; font-size: 12.5px; color: var(--texto2); }
label { display: block; text-align: left; font-size: 12px; color: var(--texto2); margin: 13px 0 5px; }
input {
  width: 100%; padding: 12px 13px; font-size: 15px; color: #fff; outline: none;
  background: rgba(10,6,24,.85); border: 1px solid var(--carta-borda);
  border-radius: 11px; transition: .15s;
}
input:focus { border-color: #a97bff; box-shadow: 0 0 0 3px rgba(150,100,255,.2); }
.cartao .principal {
  width: 100%; margin-top: 20px; padding: 13px; font-size: 16px; font-weight: 700;
  color: #2a1600; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--dourado), var(--dourado2));
  box-shadow: 0 8px 26px rgba(240,170,60,.35); transition: .12s;
}
.cartao .principal:active { transform: translateY(1px); }
.cartao button:disabled { opacity: .55; cursor: default; }
.cartao a { color: var(--dourado); text-decoration: none; }
.cartao a:hover { text-decoration: underline; }
.oculto { display: none; }

/* abas entrar / criar conta */
.abas {
  display: flex; gap: 5px; padding: 5px; margin-bottom: 4px;
  background: rgba(8,4,20,.7); border-radius: 12px;
}
.aba {
  flex: 1; padding: 10px; font-size: 14px; font-weight: 600; color: var(--texto2);
  background: transparent; border: 0; border-radius: 9px; transition: .14s;
}
.aba:hover { color: #fff; }
.aba.ativa {
  color: #fff; background: linear-gradient(180deg, #57379b, #3d2470);
  box-shadow: 0 4px 14px rgba(60,35,120,.55);
}

/* dicas de validacao abaixo dos campos */
.dica { min-height: 15px; margin-top: 4px; font-size: 11.5px; color: var(--texto3); }
.dica.ok { color: var(--verde); }
.dica.ruim { color: var(--vermelho); }

/* forca da senha */
.forca { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.forca i {
  flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.12);
  position: relative; overflow: hidden;
}
.forca i::after {
  content: ''; position: absolute; inset: 0; width: var(--p, 0%);
  background: var(--cor, var(--vermelho)); transition: width .2s, background .2s;
}
.forca span { font-size: 11px; color: var(--texto3); min-width: 52px; text-align: right; }

/* separador e botao de visitante */
.ou { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.ou span { font-size: 11px; color: var(--texto3); text-transform: uppercase; letter-spacing: 1px; }
.visitante {
  width: 100%; padding: 12px; font-size: 14.5px; font-weight: 600; color: var(--texto);
  background: rgba(255,255,255,.07); border: 1px solid var(--carta-borda);
  border-radius: 12px; transition: .14s;
}
.visitante:hover { background: rgba(255,255,255,.13); border-color: #a97bff; }
.visitante:active { transform: translateY(1px); }
.rodape.mini { font-size: 10.5px; margin-top: 9px; }
.aviso { min-height: 18px; margin-top: 12px; font-size: 12.5px; color: var(--vermelho); }
.aviso.ok { color: var(--verde); }
.rodape { margin: 16px 0 0; font-size: 11px; color: var(--texto3); }

/* -------------------------------------------------------------- topo */
.topo {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: linear-gradient(180deg, #1d1236, #150c2b);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.marca { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.marca span { color: var(--dourado); }
.mesa-nome { font-size: 15px; color: var(--texto2); flex: 1; text-align: center; }
.perfil { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.perfil img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--dourado2); object-fit: cover; }
.perfil .nome { font-size: 14px; font-weight: 600; }
.fichas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dourado); font-weight: 700; }
.ficha {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--dourado2));
  box-shadow: 0 0 0 2px rgba(255,215,106,.35);
}
.sair, .voltar {
  padding: 7px 13px; font-size: 13px; color: var(--texto2);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; transition: .12s;
}
.sair:hover, .voltar:hover { background: rgba(255,255,255,.12); color: #fff; }

/* -------------------------------------------------------------- hall */
.hall-corpo { flex: 1; overflow-y: auto; padding: 22px 20px 40px; }
.hall-corpo h2 { margin: 0 0 18px; font-size: 17px; font-weight: 600; color: var(--texto2); }
.niveis { display: flex; flex-direction: column; gap: 26px; max-width: 1100px; margin: 0 auto; }
.nivel h3 {
  margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 10px;
}
.nivel h3 b { color: var(--dourado); }
.nivel h3 em { font-style: normal; font-size: 12px; color: var(--texto3); }
.salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.sala {
  padding: 14px 15px; text-align: left; color: var(--texto);
  background: linear-gradient(180deg, rgba(58,36,102,.65), rgba(30,18,58,.8));
  border: 1px solid var(--carta-borda); border-radius: 14px; transition: .14s;
}
.sala:hover { transform: translateY(-2px); border-color: #a97bff; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.sala .titulo { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.sala .info { font-size: 12px; color: var(--texto2); line-height: 1.7; }
.sala .lugares { color: var(--verde); font-weight: 600; }
.sala .cheia { color: var(--vermelho); }

/* -------------------------------------------------------------- mesa */
.feltro {
  position: relative; flex: 1; overflow: hidden;
  background: radial-gradient(900px 620px at 50% 42%, #2b1450 0%, #100826 70%);
}
.tampo {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  width: min(88%, 1000px); pointer-events: none; user-select: none;
}
.centro {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 3;
}
.pote {
  font-size: 15px; font-weight: 700; color: var(--dourado);
  background: rgba(0,0,0,.45); padding: 5px 15px; border-radius: 20px;
  border: 1px solid rgba(255,215,106,.3); min-height: 0;
}
.pote:empty { display: none; }
.comunitarias { display: flex; gap: 7px; min-height: 96px; align-items: center; }
.fase { font-size: 11px; color: var(--texto2); letter-spacing: 2px; text-transform: uppercase; }

.carta {
  width: 68px; height: 96px; border-radius: 7px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
  animation: entra .28s ease-out;
}
.carta.pequena { width: 46px; height: 65px; }
@keyframes entra { from { opacity: 0; transform: translateY(-14px) scale(.9); } }

/* assentos ao redor da mesa */
.assento {
  position: absolute; width: 132px; transform: translate(-50%, -50%);
  text-align: center; z-index: 4;
}
.assento .caixa {
  padding: 7px 8px 8px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(38,22,70,.94), rgba(20,11,42,.96));
  border: 1px solid var(--carta-borda);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.assento.vez .caixa { border-color: var(--dourado); box-shadow: 0 0 0 2px rgba(255,215,106,.35), 0 6px 22px rgba(0,0,0,.6); }
.assento.fold { opacity: .42; }
.assento .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dourado2); }
.assento .nm { font-size: 12px; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assento .fc { font-size: 12px; color: var(--dourado); font-weight: 700; }
.assento .cartas { display: flex; gap: 3px; justify-content: center; margin-top: 5px; min-height: 0; }
.assento .aposta {
  margin-top: 5px; font-size: 11px; color: #fff; font-weight: 700;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,215,106,.35);
  border-radius: 12px; padding: 2px 9px; display: inline-block;
}
.assento .aposta:empty { display: none; }
.assento .marca-botao {
  position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; line-height: 22px;
  font-size: 12px; font-weight: 800; color: #2a1600; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #d9d9d9); border: 1px solid #999;
}
.assento .estado { font-size: 10px; color: var(--texto3); letter-spacing: 1px; text-transform: uppercase; }

.assento.vazio .caixa {
  background: rgba(255,255,255,.05); border-style: dashed; cursor: pointer;
  padding: 18px 8px; transition: .14s;
}
.assento.vazio .caixa:hover { background: rgba(255,255,255,.11); border-color: var(--dourado); }
.assento.vazio .caixa span { font-size: 12px; color: var(--texto2); }

/* ------------------------------------------------------------ acoes */
.barra-acoes {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; min-height: 66px;
  background: linear-gradient(180deg, #150c2b, #0d0620);
  border-top: 1px solid rgba(255,255,255,.07);
}
.barra-acoes button {
  padding: 11px 22px; font-size: 14px; font-weight: 700; color: #fff;
  border: 0; border-radius: 11px; transition: .12s; min-width: 96px;
}
.barra-acoes button:active { transform: translateY(1px); }
.btn-fold { background: linear-gradient(180deg, #6b3050, #4a1f38); }
.btn-check, .btn-call { background: linear-gradient(180deg, #2f7a4d, #1e5434); }
.btn-bet, .btn-raise { background: linear-gradient(180deg, #b5762a, #8a561c); }
.btn-allin { background: linear-gradient(180deg, #a32d3d, #741e2b); }
.barra-acoes .valor { display: flex; align-items: center; gap: 8px; }
.barra-acoes input[type=range] { width: 180px; accent-color: var(--dourado2); }
.barra-acoes .quanto { min-width: 92px; font-size: 14px; font-weight: 700; color: var(--dourado); }
.barra-acoes .espera { font-size: 13px; color: var(--texto3); }

/* ------------------------------------------------------------- chat */
.chat { position: absolute; left: 14px; bottom: 84px; width: 260px; z-index: 6; }
.chat-msgs { max-height: 132px; overflow-y: auto; margin-bottom: 6px; }
.chat-msgs div { font-size: 12px; color: var(--texto2); margin-bottom: 3px; text-shadow: 0 1px 3px #000; }
.chat-msgs b { color: var(--dourado); }
.chat input {
  padding: 8px 11px; font-size: 12px; background: rgba(10,6,24,.75);
  border-color: rgba(255,255,255,.12);
}

/* ------------------------------------------------------ aviso flutuante */
.aviso-flutuante {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%) translateY(-24px);
  padding: 11px 20px; font-size: 14px; border-radius: 12px; z-index: 100;
  background: rgba(20,11,42,.96); border: 1px solid var(--carta-borda);
  box-shadow: 0 10px 30px rgba(0,0,0,.6); opacity: 0; transition: .22s; pointer-events: none;
}
.aviso-flutuante.mostra { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso-flutuante.erro { border-color: rgba(255,107,107,.5); color: var(--vermelho); }
.aviso-flutuante.bom { border-color: rgba(74,208,122,.5); color: var(--verde); }

@media (max-width: 760px) {
  .assento { width: 104px; }
  .carta { width: 52px; height: 74px; }
  .chat { display: none; }
}

/* botao de som na barra da mesa */
.som {
  width: 34px; height: 34px; font-size: 15px; line-height: 1; color: var(--texto);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; transition: .12s;
}
.som:hover { background: rgba(255,255,255,.14); }
.som.mudo { opacity: .5; }

/* etiqueta de bot no assento */
.assento .bot {
  font-size: 9.5px; color: var(--texto3); letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  padding: 0 4px; display: inline-block; margin-top: 2px;
}

/* ------------------------------------------------------ bonus no hall */
.bonus-painel { display: flex; flex-wrap: wrap; gap: 12px; max-width: 1100px; margin: 0 auto 26px; }
.bonus-painel:empty { display: none; }
.bonus-card {
  flex: 1 1 240px; display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(90,60,150,.55), rgba(35,20,66,.85));
  border: 1px solid var(--carta-borda); border-radius: 14px;
}
.bonus-card.pronto { border-color: var(--dourado); box-shadow: 0 0 0 1px rgba(255,215,106,.25), 0 8px 24px rgba(0,0,0,.4); }
.bonus-card .icone { font-size: 26px; line-height: 1; }
.bonus-card .txt { flex: 1; }
.bonus-card .tit { font-size: 13.5px; font-weight: 600; }
.bonus-card .det { font-size: 11.5px; color: var(--texto2); margin-top: 2px; }
.bonus-card button {
  padding: 9px 15px; font-size: 13px; font-weight: 700; color: #2a1600; border: 0;
  border-radius: 10px; background: linear-gradient(180deg, var(--dourado), var(--dourado2));
  transition: .12s; white-space: nowrap;
}
.bonus-card button:active { transform: translateY(1px); }
.bonus-card button:disabled {
  background: rgba(255,255,255,.09); color: var(--texto3); cursor: default;
}
.bonus-card .seq { font-size: 11px; color: var(--dourado); }

/* ================= layout de mesa no estilo do jogo original ================= */
.fundo-sala {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; pointer-events: none;
}
.tampo {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(84%, 980px); pointer-events: none; z-index: 1;
}
/* o crupie fica no topo da mesa, atras das cartas comunitarias */
/* o crupie no topo da mesa, entre os dois assentos de cima */
.dealer {
  position: absolute; left: 50%; top: 17%; transform: translate(-50%, -50%);
  height: min(26%, 230px); z-index: 3; pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.7));
}
.centro { top: 50%; z-index: 4; }

/* assentos: foto redonda com moldura, nome e fichas embaixo */
.assento { width: 118px; z-index: 5; }
.assento .jogador { position: relative; }
.assento .foto { position: relative; width: 74px; height: 74px; margin: 0 auto 3px; }
.assento .foto .av {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  border-radius: 50%; object-fit: cover;
}
.assento .foto .moldura { position: absolute; inset: 0; width: 100%; height: 100%; }
.assento.vez .foto { filter: drop-shadow(0 0 10px rgba(120,255,150,.9)); }
.assento .dealer-btn {
  position: absolute; right: -4px; bottom: 2px; width: 24px; height: 24px; line-height: 24px;
  font-size: 12px; font-weight: 800; color: #2a1600; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff, #cfcfcf); box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.assento .nm {
  font-size: 12.5px; font-weight: 600; text-shadow: 0 2px 4px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assento .fc { font-size: 12.5px; color: #fff; font-weight: 700; text-shadow: 0 2px 4px #000; }
.assento .marca {
  font-size: 9.5px; letter-spacing: 1px; color: #ffd76a; text-transform: uppercase;
}
.assento .relogio {
  width: 62px; height: 4px; margin: 3px auto 0; border-radius: 3px;
  background: rgba(0,0,0,.5); overflow: hidden;
}
.assento .relogio i {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #9ad04a, #4ad07a); transition: width 1s linear;
}
.assento .cartas { display: flex; gap: 2px; justify-content: center; margin-top: 2px; }
.assento .cartas.minhas { margin-top: -14px; }
.assento .cartas.minhas .carta { width: 44px; height: 62px; }
.carta.mini { width: 30px; height: 43px; }
.assento .aposta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,215,106,.4);
  border-radius: 12px; padding: 2px 8px;
}
.assento.vazio { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.assento.vazio .cadeira { width: 66px; height: 66px; opacity: .55; transition: .15s; }
.assento.vazio:hover .cadeira { opacity: 1; transform: scale(1.06); }
.assento.vazio span { font-size: 11.5px; color: var(--texto2); text-shadow: 0 2px 4px #000; }

/* botoes de acao circulares, como no original */
.barra-acoes { gap: 18px; min-height: 96px; }
.acao {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 0; min-width: 0;
}
.acao img { width: 62px; height: 62px; transition: .12s; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.acao:hover img { transform: translateY(-3px) scale(1.06); }
.acao:active img { transform: translateY(0) scale(.97); }
.acao span { font-size: 12.5px; font-weight: 600; color: var(--texto); text-shadow: 0 2px 4px #000; }
.acao.a-fold span { color: #ffb3b3; }
.acao.a-check span, .acao.a-call span { color: #b6f0c6; }
.acao.a-raise span, .acao.a-allin span { color: var(--dourado); }
.av-topo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ============================ eventos no hall ============================ */
.eventos-topo { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; max-width: 1100px; margin-inline: auto; }
.eventos-topo h2 { margin: 0; }
.nivel-barra { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--texto2); }
.nivel-barra b { color: var(--dourado); font-size: 13px; }
.nivel-barra .trilho { width: 150px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.nivel-barra .trilho i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #9ad04a, var(--dourado)); }

.abas-ev { display: flex; flex-wrap: wrap; gap: 7px; max-width: 1100px; margin: 0 auto 12px; }
.abas-ev button {
  padding: 8px 15px; font-size: 13px; font-weight: 600; color: var(--texto2);
  background: rgba(255,255,255,.06); border: 1px solid var(--carta-borda);
  border-radius: 10px; transition: .13s;
}
.abas-ev button:hover { color: #fff; background: rgba(255,255,255,.12); }
.abas-ev button.ativa {
  color: #fff; background: linear-gradient(180deg, #57379b, #3d2470); border-color: #7a5bc4;
}
.abas-ev .pino {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px; margin-left: 6px;
  font-size: 10.5px; font-weight: 800; color: #2a1600; border-radius: 9px;
  background: linear-gradient(180deg, var(--dourado), var(--dourado2));
}

.ev-corpo { max-width: 1100px; margin: 0 auto 26px; }
.ev-lista { display: flex; flex-direction: column; gap: 9px; }
.ev-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 15px;
  background: linear-gradient(180deg, rgba(52,32,94,.55), rgba(28,17,54,.75));
  border: 1px solid var(--carta-borda); border-radius: 13px;
}
.ev-item.pronta { border-color: var(--dourado); box-shadow: 0 0 0 1px rgba(255,215,106,.2); }
.ev-item.feita { opacity: .5; }
.ev-item .desc { flex: 1; }
.ev-item .tit { font-size: 13.5px; font-weight: 600; }
.ev-item .sub { font-size: 11.5px; color: var(--texto2); margin-top: 2px; }
.ev-item .prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ev-item .prog .trilho { width: 130px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden; }
.ev-item .prog .trilho i { display: block; height: 100%; background: linear-gradient(90deg, #7a5bc4, #a97bff); }
.ev-item .prog span { font-size: 11px; color: var(--texto3); }
.ev-item .premio { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--dourado); }
.ev-item button {
  padding: 9px 17px; font-size: 13px; font-weight: 700; color: #2a1600; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, var(--dourado), var(--dourado2)); transition: .12s; white-space: nowrap;
}
.ev-item button:active { transform: translateY(1px); }
.ev-item button:disabled { background: rgba(255,255,255,.09); color: var(--texto3); cursor: default; }

/* barra de estrelas da Fortuna dos Iniciantes */
.barra-estrelas { margin: 4px 0 14px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(40,70,140,.5), rgba(20,32,70,.75));
  border: 1px solid rgba(130,170,255,.3); border-radius: 13px; }
.barra-estrelas .cabeca { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; }
.barra-estrelas .cabeca b { color: var(--dourado); font-size: 15px; }
.barra-estrelas .trilha { position: relative; height: 8px; border-radius: 5px;
  background: rgba(0,0,0,.45); margin: 22px 12px 30px; }
.barra-estrelas .trilha .cheio { position: absolute; inset: 0; width: 0;
  border-radius: 5px; background: linear-gradient(90deg, #4a9de0, #7ad0ff); transition: width .4s; }
.barra-estrelas .no { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.barra-estrelas .no .bolinha {
  width: 20px; height: 20px; border-radius: 50%; background: #2a3a60;
  border: 2px solid #4a6aa0; margin: 0 auto;
}
.barra-estrelas .no.atingido .bolinha { background: var(--dourado); border-color: #fff2c4; }
.barra-estrelas .no .valor { position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--dourado); white-space: nowrap; }
.barra-estrelas .no .pts { position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--texto3); }
.barra-estrelas .no button {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  padding: 3px 9px; font-size: 10.5px; border-radius: 7px; white-space: nowrap;
}