/* cores no estilo do app original: azul-marinho em volta, paineis roxos com borda clara */
:root {
  --bg: #0b2545; --painel: #22174d; --painel2: #2e2266; --texto: #eef0ff; --muted: #a9a6d6;
  --acento: #ffcc33; --acento2: #7c5cff; --ok: #34d399; --ruim: #f87171; --borda: #5a46a8;
  --laranja: #ff9f1c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--texto);
  font: 15px/1.45 system-ui, "Segoe UI", sans-serif; min-height: 100vh; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: normal; font-size: .9em; }
/* todo botao no estilo do app original: brilhante, com degrau embaixo */
button { color: #fff; border: 0; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer;
  text-shadow: 0 1px 2px #0008; background: linear-gradient(#3d82dd, #1d4e9e); --sombra-btn: #0c2b57;
  box-shadow: inset 0 2px 0 #ffffff55, inset 0 -2px 0 #0003, 0 3px 0 var(--sombra-btn); margin-bottom: 3px; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffffff55, 0 1px 0 var(--sombra-btn); }
button:disabled { cursor: default; filter: grayscale(.8) brightness(.8); opacity: .7; }
button.grande { font-size: 1.05em; padding: 11px 22px; background: linear-gradient(#2ee6d6, #0f9e93); --sombra-btn: #0a6159; }
button.link { background: none; color: var(--muted); padding: 0; text-decoration: underline; box-shadow: none; text-shadow: none; margin: 0; }
button.sec { background: linear-gradient(#6d5bd0, #3e2f8f); --sombra-btn: #241a5c; }
/* cores dos botoes de acao do carro, como no original: stake vermelho, correr amarelo,
   renovar verde, mercado azul */
button.b-stake { background: linear-gradient(#ff6b6b, #c3141e); --sombra-btn: #6e0b10; }
button.b-correr { background: linear-gradient(#f7e15a, #c9a40a); --sombra-btn: #7a6304; }
button.b-renovar { background: linear-gradient(#5ee88a, #17913f); --sombra-btn: #0c5a26; }
button.b-vender { background: linear-gradient(#3d82dd, #1d4e9e); --sombra-btn: #0c2b57; }
input { background: var(--painel2); border: 1px solid var(--borda); color: var(--texto); border-radius: 8px;
  padding: 8px 10px; font: inherit; }

/* janela de conectar carteira, por cima do jogo */
.login { display: grid; place-items: center; position: fixed; inset: 0; z-index: 70; padding: 16px; background: #050314d9; overflow-y: auto; }
.login-box h3 { margin: 6px 0 2px; }
.carteiras-sol { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.btn-jogo.btn-carteira-sol { display: flex; align-items: center; gap: 12px; font-size: 1.1em; padding: 10px 14px; }
.btn-carteira-sol span { flex: 1; text-align: center; margin-right: 38px; } /* nome centralizado mesmo com o icone na esquerda */
.ic-carteira { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; box-shadow: 0 1px 3px #0006; }
.teste-local { text-align: left; margin-bottom: 14px; }
.teste-local summary { cursor: pointer; color: var(--muted); font-size: .9em; }
.teste-local form { margin-top: 10px !important; }
/* desconectado: o topo mostra so o botao "Conectar" e o conteudo fica escondido */
.desconectado .saldo, .desconectado main > section:not(#whitepaper), .desconectado #btn-carteira .seta { visibility: hidden; }
#btn-carteira .seta { margin-left: 8px; }
.login-box { background: var(--painel); padding: 32px; border-radius: 16px; border: 1px solid var(--borda);
  max-width: 420px; width: 100%; text-align: center; }
.login-box h1 { margin: 0 0 4px; color: var(--acento); }
.login-box form { display: flex; gap: 8px; margin-top: 20px; }
.login-box input { flex: 1; min-width: 0; }

/* botoes "brilhantes" do app original: gradiente, borda clara em cima e degrau escuro embaixo */
.btn-jogo { display: block; text-align: center; text-decoration: none; color: #fff; font-weight: 900; margin: 0;
  letter-spacing: .3px; border-radius: 10px; padding: 9px 12px; border: 0;
  text-shadow: 0 1px 2px #0009; box-shadow: inset 0 2px 0 #ffffff55, inset 0 -2px 0 #0003, 0 4px 0 var(--sombra-btn, #0c2b57);
  background: linear-gradient(#3d82dd, #1d4e9e); --sombra-btn: #0c2b57; transition: transform .08s, filter .15s; }
.btn-jogo:hover { filter: brightness(1.12); }
.btn-jogo:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffffff55, 0 2px 0 var(--sombra-btn); }
.btn-azul { background: linear-gradient(#3d82dd, #1d4e9e); --sombra-btn: #0c2b57; }
.btn-teal, .btn-menu.ativa { background: linear-gradient(#2ee6d6, #0f9e93); --sombra-btn: #0a6159; }
.btn-amarelo { background: linear-gradient(#f7e15a, #c9a40a); --sombra-btn: #7a6304; }
.btn-verde { background: linear-gradient(#5ee88a, #17913f); --sombra-btn: #0c5a26; }
.btn-vermelho { background: linear-gradient(#ff6b6b, #c3141e); --sombra-btn: #6e0b10; }
.btn-roxo { background: linear-gradient(#a06bff, #5b2fc0); --sombra-btn: #341a75; }

/* barra de cima: logo a esquerda; saldo e botao da carteira a direita */
.topo-app { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #0d2b52;
  border-bottom: 2px solid #133a6b; position: sticky; top: 0; z-index: 20; }
.marca { font-weight: 800; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.marca .logo { height: 46px; width: auto; display: block; }
.logo-login { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.tag { background: var(--ruim); color: #fff; font-size: .65em; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.saldo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.05em; white-space: nowrap; }
.saldo b { color: var(--laranja); }
/* botao da musica, ao lado do saldo */
.btn-som { width: 42px; height: 38px; padding: 0; display: grid; place-items: center; flex: none; }
.btn-som svg { width: 22px; height: 22px; fill: #fff; stroke: #fff; }
.btn-som .som-off, .btn-som.mudo .som-on { display: none; }
.btn-som.mudo .som-off { display: block; }
.btn-som.mudo { background: linear-gradient(#6b6f86, #43465a); --sombra-btn: #24263a; }
.saldo img { width: 22px; }
.carteira-menu { position: relative; }
#btn-carteira { min-width: 150px; text-transform: none; }
/* as opcoes descem com a mesma largura e alinhadas ao botao da carteira */
.menu-carteira { position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: flex; flex-direction: column; gap: 10px;
  padding: 0; z-index: 30; }
.menu-carteira .btn-jogo { width: 100%; }

/* corpo: menu vertical a esquerda e conteudo sobre a cidade a noite */
.corpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: calc(100vh - 70px); }
.lateral { display: flex; flex-direction: column; gap: 12px; padding: 22px 14px; background: #0b2545;
  position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 70px); overflow-y: auto; }
.lateral .btn-menu, .btn-aposta, .lateral .btn-roxo { font-size: .95em; text-transform: uppercase; }
.lateral-espaco { flex: 1; min-height: 18px; }
.btn-aposta { font-size: 1.05em; padding: 12px; }
main { padding: 8px 24px 40px; min-width: 0;
  background: linear-gradient(#141043ee, #120c35f2), url(arte/pista_fundo.jpg) center / cover fixed; }
main > section { max-width: 1100px; margin: 0 auto; }
/* whitepaper dentro do jogo: ocupa toda a area a direita do menu */
main > #whitepaper { max-width: 1280px; padding-top: 12px; }
#wp-frame { display: block; width: 100%; height: 80vh; border: 0; background: transparent; }
.lateral .btn-roxo.ativa { background: linear-gradient(#c49bff, #7c45e6); box-shadow: inset 0 2px 0 #ffffff77, 0 0 0 2px #e9d5ff, 0 4px 0 #341a75; }
h2 { margin: 18px 0 10px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.grade.pequena { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
/* paineis roxos com moldura clara, como os cards do app original */
.card { background: linear-gradient(#2b1d68, #1f1450); border: 3px solid #5a46a8; border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 0 0 2px #1a103f, 0 6px 16px #0006; }
/* borda pela raridade: 1 cinza, 2 verde, 3 azul, 4 roxa, 5 dourada */
.card.e5 { border-color: #ff9f1c; box-shadow: 0 0 14px #ff9f1c55; }
.card.e4 { border-color: #c084fc; box-shadow: 0 0 12px #a855f744; }
.card.e3 { border-color: #38bdf8; }
.card.e2 { border-color: #22c55e; }
.card.e1 { border-color: #9ca3af; }
.card .topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 30px; }
/* nome do carro numa linha so: miniatura + nome, cortando com "..." se faltar espaco */
.card .topo b { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.card .topo b .retrato { flex: none; }
.card .topo b > :last-child, .card .topo b { overflow: hidden; text-overflow: ellipsis; }
.card .estrelas { color: var(--acento); letter-spacing: 1px; white-space: nowrap; flex: none; }
/* alinhamento entre cards lado a lado: textos curtos numa linha so, botoes sempre no rodape */
.card > * { min-width: 0; }
.linha-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card > .estrelas { display: block; }
.card > .linha-1, .linha-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card > button:last-child { margin-top: auto; }
.card .acoes { align-content: flex-end; align-items: center; }
.card .acoes > button, .card .acoes > select { height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.card .acoes { padding-bottom: 3px; } /* espaco para o degrau dos botoes */
.card .acoes-2 { min-height: 77px; } /* 2 linhas de botoes de 34px + 6px de espaco + 3px do degrau */
/* garagem: 4 botoes em grade 2x2, como a lista vertical colorida do original */
#lista-carros .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#lista-carros .acoes > button { width: 100%; padding-left: 4px; padding-right: 4px; font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aposta-card { position: relative; }
.aposta-card .selo { position: absolute; top: 8px; right: 8px; }
/* campos dentro de cards nunca passam da borda */
.card input { min-width: 0; max-width: 100%; }
.card .linha input:not([style]) { flex: 1; width: auto; }
.card .acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.card .acoes button { padding: 6px 10px; font-size: .85em; }
.card.selecionavel { cursor: pointer; }
.card.selecionavel:hover { border-color: var(--acento); }
.barra { height: 6px; background: var(--painel2); border-radius: 3px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--ok); }
.vazio { color: var(--muted); padding: 20px; background: var(--painel); border-radius: 12px; border: 1px dashed var(--borda); }
.selo { font-size: .75em; background: var(--painel2); padding: 2px 6px; border-radius: 4px; color: var(--muted); }

/* loja: cards verticais como no original (moldura roxa, miolo mais escuro, preco grande, botao embaixo) */
.caixas-loja { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 26px; justify-content: center; margin-top: 10px; }
.caixa-loja { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px;
  background: #2b1d68; border: 4px solid #5a46a8; border-radius: 22px; box-shadow: 0 8px 24px #0008; }
.caixa-miolo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px;
  background: linear-gradient(#3a1f86, #26135e); border-radius: 12px; }
.caixa-loja h3 { margin: 0; font-size: 1.35em; text-shadow: 0 2px 2px #0008; }
.preco-caixa { font-size: 1.9em; font-weight: 900; text-shadow: 0 3px 2px #000a; white-space: nowrap; }
.caixa-loja .acoes button { min-width: 150px; }
/* x1 / x5 / x10: quantas caixas abrir de uma vez; o preco em cima mostra o total */
.preco-detalhe { font-size: .85em; color: #ffffffb0; min-height: 1.2em; }
.qtd-caixa { display: flex; gap: 8px; justify-content: center; }
.qtd-caixa button { min-width: 58px; padding: 6px 10px; font-size: .95em; }
.qtd-caixa button.marcado { background: linear-gradient(#ffd54a, #e8a10c); --sombra-btn: #7a4f04; color: #2a1600; text-shadow: none; }
.caixa-loja table.chances { width: 100%; font-size: .85em; margin: 0; }
.caixa-loja tr.sem td { opacity: .35; }
.caixa-loja .estrelas { color: var(--acento); white-space: nowrap; }
.caixa { height: 170px; width: auto; max-width: 90%; object-fit: contain; flex: none; } /* mesma altura nas duas caixas */
.caixa-zoo { border-color: #a16207; background: #3a2414; }
.caixa-zoo h3 { color: #fde68a; }
.caixa-zoo .caixa-miolo { background: linear-gradient(#5b3a1e, #2f1d0e); }
.caixa-zoo .caixa { filter: drop-shadow(0 0 14px #84cc1666); }
.caixa-safari { border-color: #fbbf24; box-shadow: 0 0 18px #fbbf2433; }
.caixa-safari h3 { color: var(--acento); }
.caixa-safari .caixa { filter: drop-shadow(0 0 16px #fbbf24aa); }
.caixa.abrindo { animation: tremer .6s ease-in-out 2; }
.frag-arte { position: relative; margin: 6px auto 0; aspect-ratio: 1376 / 768; }
.frag-arte > img { width: 46%; position: absolute; left: 0; top: 0; filter: drop-shadow(0 0 6px #a855f7); }
.frag-arte > span { position: absolute; right: 0; bottom: 0; opacity: .55; }
.podio { position: relative; width: min(420px, 100%); margin: 0 auto; aspect-ratio: 1.6; }
.podio-img { position: absolute; left: 10%; width: 80%; bottom: 0; }
.no-podio { position: absolute; width: 30%; }
.no-podio .veiculo { width: 100% !important; }
.no-podio.p1 { left: 35%; bottom: 52%; }
.no-podio.p2 { left: 7%; bottom: 40%; }
.no-podio.p3 { left: 63%; bottom: 33%; }
.no-podio.voce::after { content: "YOU"; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  font-size: .7em; font-weight: 800; color: #222; background: var(--acento); padding: 1px 6px; border-radius: 4px; }
@keyframes tremer { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-12deg) } 75% { transform: rotate(12deg) } }
table { border-collapse: collapse; margin: 8px 0 14px; }
td, th { padding: 2px 12px 2px 0; text-align: left; }

/* veiculo do signo: uma imagem 640x360 com o carro encostado embaixo */
.veiculo { position: relative; aspect-ratio: 640 / 360; max-width: 100%; margin: 8px auto 0; }
/* proporcao propria: as rodas ficam certas mesmo se o .veiculo for esticado na altura por um flex/grid */
.veiculo .carroceria { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 640 / 360; transform-origin: 50% 100%; }
.veiculo .arte { position: absolute; inset: 0; width: 100%; display: block; }
/* rodas: copia da arte recortada em circulo no cubo, girando por cima do aro (borda suave para nao marcar) */
.veiculo .roda { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; pointer-events: none;
  -webkit-mask: radial-gradient(circle, #000 86%, transparent 100%); mask: radial-gradient(circle, #000 86%, transparent 100%); }
.veiculo .roda img { position: absolute; max-width: none; display: block; }
.veiculo.andando .roda { animation: rodar 1.1s linear infinite; }
.veiculo.girando .roda { animation: rodar .32s linear infinite; }
@keyframes rodar { to { transform: rotate(360deg); } }
/* Meus carros: o carro (e o animal) balanca de leve, como se estivesse andando */
.veiculo.andando .carroceria { animation: andar 1.1s ease-in-out infinite; }
@keyframes andar { 0%, 100% { transform: none; } 25% { transform: translateY(-1.5%) rotate(-.5deg); } 50% { transform: translateY(0); }
  75% { transform: translateY(-1%) rotate(.4deg); } }
/* na corrida: balanco da suspensao + rastro de velocidade */
.veiculo.girando .carroceria { animation: pular .28s ease-in-out infinite alternate; }
@keyframes pular { from { transform: translateY(0) rotate(0); } to { transform: translateY(-3%) rotate(-1.2deg); } }.veiculo.girando::before { content: ""; position: absolute; left: -22%; bottom: 14%; width: 26%; height: 30%;
  background: repeating-linear-gradient(0deg, #ffffff99 0 3px, transparent 3px 11px); border-radius: 4px;
  -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
/* aura de raridade em volta do veiculo: 2★ verde pequena, 3★ azul, 4★ roxa forte, 5★ dourada forte */
.veiculo.e2 .arte { filter: drop-shadow(0 0 3px #22c55e) drop-shadow(0 0 1px #22c55e); }
.veiculo.e3 .arte { filter: drop-shadow(0 0 5px #38bdf8) drop-shadow(0 0 2px #38bdf8); }
.veiculo.e4 .arte { filter: drop-shadow(0 0 7px #c084fc) drop-shadow(0 0 16px #a855f7cc) drop-shadow(0 0 2px #e9d5ff); }
.veiculo.e5 .arte { filter: drop-shadow(0 0 8px #ffd54a) drop-shadow(0 0 20px #ff9f1cdd) drop-shadow(0 0 2px #fff3c4); }
.retrato { vertical-align: middle; height: auto; }

/* pista: cidade ao fundo + faixa de arvores e grade na frente, as duas repetidas na horizontal */
.pista { position: relative; overflow: hidden; border-radius: 12px; margin: 14px 0; background: #8fd3f7; }
.camada { position: relative; background-repeat: repeat-x; background-position: 0 bottom; }
.fundo { height: 190px; background-image: url(arte/pista_fundo.jpg); background-size: auto 100%; }
.frente { height: 70px; margin-top: -62px; background-image: url(arte/ui/frente.png); background-size: auto 100%; }
.estrada { position: relative; background: #464953; }
.zebra { height: 9px; background: repeating-linear-gradient(90deg, #e3342f 0 28px, #fff 28px 56px); }
.raias { position: relative; }
.raia { height: 92px; position: relative; border-bottom: 2px dashed #ffffff55; }
.raia:last-child { border-bottom: 0; }
.raia .veic { position: absolute; bottom: 2px; left: 64px; }
.raia .veiculo { margin: 0; }
.raia .nome { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 56px; color: #ffffffb0;
  font-size: .72em; line-height: 1.2; white-space: normal; }
.raia.voce { background: #ffcc331c; }
.raia.voce .nome { color: var(--acento); font-weight: 700; }
.chegada { position: absolute; right: 56px; top: 9px; bottom: 9px; width: 12px; z-index: 5;
  background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 12px 12px; opacity: .9; }
/* ---------- abertura da caixa ---------- */
.abertura { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #3b1d7acc, #07041ef2 70%); animation: entrar .3s ease-out; --cor-rar: #fff; }
@keyframes entrar { from { opacity: 0; } }
.abertura-palco { position: relative; width: min(640px, 96vw); height: min(560px, 90vh); display: grid; place-items: center; }
.abertura .cx { position: absolute; width: min(360px, 70vw); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }
/* a caixa cai e depois balanca por ~2,9 s, cada vez mais forte e mais rapido, inchando ate explodir.
   Sem brilho na cor da raridade aqui: o que vai sair so aparece depois da explosao (nas duas caixas) */
.abertura.f-cai .cx-fechada { opacity: 1; animation: cair .55s cubic-bezier(.3, 1.4, .5, 1) both, tremer2 2.9s .6s cubic-bezier(.45, 0, .9, .6) both; }
@keyframes cair { from { transform: translate(-50%, -160%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes tremer2 {
  0%   { transform: translate(-50%, -50%) rotate(0) scale(1); filter: none; }
  6%   { transform: translate(-50.6%, -50%) rotate(-2deg) scale(1.01); }
  12%  { transform: translate(-49.4%, -50%) rotate(2deg) scale(1.02); }
  18%  { transform: translate(-51%, -50.3%) rotate(-3deg) scale(1.03); }
  24%  { transform: translate(-49%, -49.7%) rotate(3deg) scale(1.04); }
  30%  { transform: translate(-51.3%, -50.4%) rotate(-4deg) scale(1.06); filter: brightness(1.06); }
  36%  { transform: translate(-48.7%, -49.6%) rotate(4deg) scale(1.07); }
  42%  { transform: translate(-51.6%, -50.5%) rotate(-5deg) scale(1.09); }
  48%  { transform: translate(-48.4%, -49.5%) rotate(5deg) scale(1.1); }
  54%  { transform: translate(-51.9%, -50.6%) rotate(-6deg) scale(1.12); filter: brightness(1.12); }
  59%  { transform: translate(-48.1%, -49.4%) rotate(6deg) scale(1.14); }
  64%  { transform: translate(-52.2%, -50.7%) rotate(-7deg) scale(1.16); }
  69%  { transform: translate(-47.8%, -49.3%) rotate(7deg) scale(1.18); }
  74%  { transform: translate(-52.4%, -50.8%) rotate(-7deg) scale(1.2); filter: brightness(1.2); }
  78%  { transform: translate(-47.6%, -49.2%) rotate(8deg) scale(1.21); }
  82%  { transform: translate(-52.6%, -50.8%) rotate(-8deg) scale(1.23); }
  86%  { transform: translate(-47.4%, -49.2%) rotate(8deg) scale(1.24); }
  89%  { transform: translate(-52.8%, -50.9%) rotate(-9deg) scale(1.26); }
  92%  { transform: translate(-47.2%, -49.1%) rotate(9deg) scale(1.27); }
  95%  { transform: translate(-52.5%, -50.6%) rotate(-6deg) scale(1.29); }
  97.5% { transform: translate(-47.5%, -49.4%) rotate(6deg) scale(1.3); }
  100% { transform: translate(-50%, -50%) rotate(0) scale(1.32); filter: brightness(1.32); } }
.abertura.f-abre .cx-fechada { opacity: 0; animation: none; }
.abertura.f-abre .cx-aberta { opacity: 1; animation: abrir .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes abrir { from { transform: translate(-50%, -50%) scale(.85); } to { transform: translate(-50%, -50%) scale(1); } }
.abertura.f-carro .cx-aberta { animation: abrir .45s both, sumir .45s ease-in forwards; }
.abertura.f-info .cx-aberta { visibility: hidden; }
/* a caixa nao "abre" mais: ela se despedaca (ver estilhacar() no app.js); a imagem da caixa aberta nao aparece */
.abertura .cx-aberta { display: none !important; }
.estilhacos { position: absolute; pointer-events: none; z-index: 2; }
.estilhaco { position: absolute; background-repeat: no-repeat; will-change: transform, opacity;
  animation: voar var(--dur) cubic-bezier(.12, .75, .35, 1) var(--atraso) forwards; }
.estilhacos.forte .estilhaco { filter: drop-shadow(0 0 6px var(--cor-rar)) brightness(1.15); }
@keyframes voar {
  0% { transform: none; opacity: 1; }
  65% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--esc)); opacity: 0; } }
/* Jaula Safari: onda de choque dupla saindo do centro */
.onda { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  border: 6px solid var(--cor-rar); box-shadow: 0 0 24px var(--cor-rar), inset 0 0 18px var(--cor-rar); opacity: 0;
  animation: onda .7s ease-out forwards; }
.onda.segunda { animation-delay: .12s; border-color: #fff; }
@keyframes onda { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(9); opacity: 0; border-width: 1px; } }
/* Caixote do Zoo: clarao mais fraco, como uma caixa de madeira estourando */
.abertura.caixa-zoo.f-abre .flash { animation: clarao-fraco .5s ease-out; }
@keyframes clarao-fraco { 0% { opacity: 0; } 20% { opacity: .55; } 100% { opacity: 0; } }
/* a caixa aberta some de vez (cresce e desaparece no clarao) para o resultado aparecer sozinho */
@keyframes sumir { to { transform: translate(-50%, -50%) scale(1.35); opacity: 0; filter: brightness(2.5) blur(4px); } }
.flash { position: absolute; inset: -30%; background: radial-gradient(circle, #fff, transparent 60%); opacity: 0; pointer-events: none; }
.abertura.f-abre .flash { animation: clarao .6s ease-out; }
@keyframes clarao { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.raios { position: absolute; width: 900px; height: 900px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cor-rar) 45%, transparent) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); }
.abertura.f-abre .raios { opacity: 1; animation: girar-raios 9s linear infinite, aparecer .5s ease-out; }
@keyframes girar-raios { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; transform: scale(.4); } }
.particulas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.particulas i { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0;
  background: var(--cor-rar); box-shadow: 0 0 10px var(--cor-rar); }
.particulas i:nth-child(3n) { background: #fff; width: 6px; height: 6px; }
.abertura.f-abre .particulas i { animation: estourar 1.1s ease-out forwards; }
@keyframes estourar { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } }
.revelado { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; opacity: 0; }
.abertura.f-carro .revelado { opacity: 1; }
.revelado-carro { animation: none; filter: drop-shadow(0 0 18px var(--cor-rar)) drop-shadow(0 0 40px var(--cor-rar)); }
.revelado-carro .veiculo { margin: 0; max-width: 80vw; }
.abertura.f-carro .revelado-carro { animation: subir .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes subir { from { transform: translateY(120px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.revelado-nome, .revelado-estrelas, .revelado-raridade, .revelado-acoes { opacity: 0; }
.revelado-nome { font-size: 2em; font-weight: 900; text-shadow: 0 3px 4px #000a; }
.revelado-estrelas { font-size: 2.2em; letter-spacing: 4px; color: #ffffff30; }
.revelado-estrelas span { display: inline-block; }
.revelado-raridade { font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: var(--cor-rar); text-shadow: 0 0 12px var(--cor-rar); }
.revelado-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
/* varias caixas: grade com todos os carros, do mais raro ao menos raro, aparecendo um a um */
.revelado-carro.multi { filter: none; }
.revelado-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(600px, 92vw); max-height: 52vh;
  overflow-y: auto; padding: 4px; }
.rev-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; min-width: 0;
  background: linear-gradient(#2b1d68e6, #1f1450e6); border: 2px solid var(--cor); box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 55%, transparent);
  opacity: 0; font-size: .78em; }
.rev-item .veiculo { margin: 0; max-width: 100%; }
.rev-item b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-item .estrelas { color: var(--acento); font-size: .9em; letter-spacing: 0; white-space: nowrap; }
.abertura.f-carro .rev-item { animation: surgir-item .45s calc(var(--i) * .09s) cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes surgir-item { from { opacity: 0; transform: translateY(40px) scale(.4); } to { opacity: 1; transform: none; } }
.revelado-estrelas.resumo { font-size: 1em; letter-spacing: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rar-chip { padding: 3px 10px; border-radius: 99px; border: 2px solid var(--cor); color: var(--cor); font-weight: 800; background: #0006; }
.abertura.varios .revelado-nome { font-size: 1.6em; }
@media (max-width: 560px) { .revelado-grade { grid-template-columns: repeat(3, 1fr); max-height: 44vh; } }
/* X do canto para fechar a abertura da caixa */
.fechar-abertura { position: absolute; top: 14px; right: 16px; z-index: 5; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  font-size: 28px; line-height: 1; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: linear-gradient(#ff6b6b, #c3141e); border: 2px solid #ffffff55; box-shadow: 0 3px 0 #6e0b10, 0 0 10px #ef444466; }
.fechar-abertura:hover { filter: brightness(1.12); }
.abertura.f-info .revelado-nome { animation: surgir .4s both; }
.abertura.f-info .revelado-estrelas { opacity: 1; }
.abertura.f-info .revelado-estrelas span.cheia { color: var(--acento); text-shadow: 0 0 12px #ffcc33; animation: estrela .45s both; }
.abertura.f-info .revelado-estrelas span:nth-child(1) { animation-delay: .15s; }
.abertura.f-info .revelado-estrelas span:nth-child(2) { animation-delay: .35s; }
.abertura.f-info .revelado-estrelas span:nth-child(3) { animation-delay: .55s; }
.abertura.f-info .revelado-estrelas span:nth-child(4) { animation-delay: .75s; }
.abertura.f-info .revelado-estrelas span:nth-child(5) { animation-delay: .95s; }
@keyframes estrela { from { transform: scale(3) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.abertura.f-info .revelado-raridade { animation: surgir .4s 1.2s both; }
.abertura.f-info .revelado-acoes { animation: surgir .4s 1.5s both; }
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.abertura.f-especial .raios { animation-duration: 4s; }
.abertura.f-especial.f-info .revelado-nome { animation: surgir .4s both, pulsar 1.2s 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { text-shadow: 0 0 22px var(--cor-rar), 0 3px 4px #000a; } }

/* campo de batalha: pista no meio e coluna de carros a direita */
.campo { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.campo-centro { position: relative; min-width: 0; }
.campo-centro .pista { margin: 0; }
.campo-lista { background: #0d0a2acc; border: 3px solid #5a46a8; border-radius: 16px; padding: 10px; }
.lista-coluna { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; margin-top: 6px; padding-right: 2px; }
.item-corrida { display: grid !important; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 8px;
  padding: 6px 8px; border-width: 2px; border-radius: 12px; }
.item-corrida .veiculo { margin: 0; grid-row: 1 / 3; align-self: center; }
.item-corrida .item-info { min-width: 0; font-size: .85em; }
.item-corrida .acoes { grid-column: 2; margin: 0; }
.item-corrida .acoes button { width: 100%; height: 30px; font-size: .85em; }
/* Meus carros com 3 botoes (stake desligado): o primeiro ocupa a linha de cima inteira, os outros dois embaixo */
#lista-carros .acoes > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
/* corrida rapida: botao de duas setas no canto de cima a direita do carro */
.item-corrida { position: relative; }
.item-corrida .item-info .linha-nome { padding-right: 30px; }
.item-corrida .b-rapida { position: absolute; top: 6px; right: 6px; width: 28px; height: 24px; padding: 0; display: grid; place-items: center;
  border-radius: 7px; background: linear-gradient(#ffb547, #e8730c); --sombra-btn: #7a3b04; }
.item-corrida .b-rapida svg { width: 16px; height: 16px; fill: #fff; filter: drop-shadow(0 1px 1px #0008); }
.item-corrida .b-rapida:disabled svg { opacity: .5; }
.painel-rapida .rapida-colocacoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.painel-rapida .rapida-colocacoes div { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px 10px;
  background: #ffffff12; border: 2px solid #ffffff2a; border-radius: 10px; }
.painel-rapida .rapida-colocacoes div.ouro { border-color: var(--acento); }
.painel-rapida .rapida-colocacoes span { font-size: .8em; color: #e9d5ff; font-weight: 800; }
.painel-rapida .rapida-colocacoes b { font-size: 1.25em; }
.painel-rapida .rapida-tabela { width: 100%; min-width: 0; border-collapse: collapse; overflow: hidden; }
.painel-rapida .rapida-tabela tr:last-child td { border-bottom: 0; }
.painel-rapida .rapida-tabela td:first-child { text-align: left; }
.painel-rapida .rapida-frags { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: .9em; }
.pista-aviso { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); background: #000a; padding: 10px 18px;
  border-radius: 10px; white-space: nowrap; font-size: .95em; }
/* resultado da corrida em cima da tela, como o "GAME RESULT" do original */
.modal-resultado { display: none; }
.modal-resultado.aberto { display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; background: #050314cc; padding: 16px; overflow-y: auto; }
@media (max-width: 1000px) { .campo { grid-template-columns: 1fr; } .lista-coluna { max-height: none; } }
.painel-resultado { position: relative; width: min(560px, 100%); margin: 34px auto 10px; padding: 34px 18px 18px;
  background: linear-gradient(#2b1d68, #1f1450); border: 4px solid #c9a24a; border-radius: 16px; box-shadow: 0 10px 30px #000a;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.faixa-titulo { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); padding: 8px 46px; white-space: nowrap;
  background: linear-gradient(#8b5cf6, #5b21b6); border: 3px solid #c4b5fd; border-radius: 12px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 1px; font-size: 1.15em; text-shadow: 0 2px 2px #0008; }
.total-resultado { display: flex; flex-direction: column; align-items: center; padding: 8px 30px; background: #3b0f6e;
  border-radius: 10px; border: 2px solid #6d28d9; }
.total-resultado span { font-size: .8em; text-transform: uppercase; font-weight: 800; color: #e9d5ff; }
.total-resultado b { color: var(--acento); font-size: 1.4em; }
.painel-resultado .acoes button { min-width: 160px; }
#dialogo { z-index: 80; }
.painel-dialogo { width: min(460px, 100%); text-align: center; }
.painel-dialogo .acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.painel-dialogo .acoes button { min-width: 140px; flex: 1 1 140px; }
.dlg-texto { line-height: 1.5; }
#dlg-valor { width: 150px; font-size: 1.1em; text-align: center; }
.placar { text-align: center; font-size: 1.6em; font-weight: 800; margin: 10px 0; }
.placar.ganhou { color: var(--acento); }

.linha { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.stake-area { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 14px; align-items: start; }
.stake-lista #stake-carros { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; margin-top: 6px; }
.stake-item { display: flex; gap: 10px; align-items: center; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 6px 10px; cursor: pointer; font-size: .85em; }
.stake-item .veiculo { margin: 0; flex: none; }
.stake-item.sel { border-color: var(--acento); }
.stake-item.fraco { opacity: .55; }
#stake-painel { align-items: center; text-align: center; }
.info { display: flex; justify-content: space-between; width: 100%; max-width: 320px; border-bottom: 1px solid var(--borda); padding: 3px 0; }
.info > span:first-child { color: var(--muted); }
.stake-acao { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.selo.forte { background: #b91c1c; color: #fff; font-size: .85em; padding: 4px 10px; }
@media (max-width: 700px) { .stake-area { grid-template-columns: 1fr; } }
select { background: var(--painel2); border: 1px solid var(--borda); color: var(--texto); border-radius: 8px; padding: 7px 8px; font: inherit; max-width: 100%; min-width: 0; }
.par-form { max-width: 560px; }
.par-form .linha { flex-wrap: wrap; }
/* campo com o nome em cima e a caixa embaixo, ate a metade da largura do formulario (Nome, Carro, Aposta do PVP) */
.campo-form { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.campo-form > span { font-size: .95em; }
.campo-form > input, .campo-form > select, .campo-form > .campo-zdc { width: 50%; min-width: 220px; max-width: 100%; }
.campo-form > .campo-zdc input { width: auto; }
.fase-aposta { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; margin: 8px 0;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fase-aposta.apostas { border-color: var(--ok); }
.fase-aposta.resultado { border-color: var(--acento); }
.fase-aposta .relogio { font-size: 1.4em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--acento); }
.aposta-card.apostado { border-color: var(--ok); }
.podio-tb { display: flex; gap: 14px; flex-wrap: wrap; }
.podio-tb .pod { background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; }
.aposta-card.marcado { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset; }
.confronto { display: flex; align-items: center; justify-content: space-around; gap: 6px; }
.confronto .x { font-size: 1.3em; color: var(--muted); }
.par-lado { display: flex; flex-direction: column; align-items: center; font-size: .85em; }
.par-lado .veiculo { margin: 0; }
.par-lado.destaque span { color: var(--acento); font-weight: 700; }
.mini { font-size: .75em; margin-top: -4px; }
.pvp-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.pvp-jog { display: flex; flex-direction: column; align-items: center; font-size: .75em; color: var(--muted); max-width: 80px; text-align: center; }
.pvp-jog .veiculo { margin: 0; }
.pvp-jog span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-jog.venceu span { color: var(--acento); font-weight: 700; }
.validade { font-size: .8em; }
.validade.boa, .boa { color: var(--ok); }
.validade.ruim, .ruim { color: var(--ruim); }
.card.fraco { opacity: .4; cursor: default; }
.sub-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
/* garagem: carros a esquerda e filtro de raridade a direita */
.garagem-area { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; align-items: start; }
.filtro-raridade { position: sticky; top: 84px; gap: 8px; }
.filtro-estrelas { display: flex; flex-direction: column; gap: 6px; }
.filtro-estrelas button { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; }
.filtro-estrelas button .estrelas { font-size: .9em; letter-spacing: 0; }
.filtro-estrelas .qtd { background: #0006; border-radius: 99px; padding: 0 8px; font-size: .8em; }
.filtro-estrelas button.marcado { background: linear-gradient(#2ee6d6, #0f9e93); --sombra-btn: #0a6159; }
/* filtro de gasolina (corridas que o carro ainda tem hoje) */
.filtro-gas { margin-bottom: 6px; }
.filtro-gas .qtd { background: #0006; border-radius: 99px; padding: 0 8px; font-size: .85em; }
/* sem gasolina: a mesma bomba de gasolina com o simbolo de bloqueio por cima */
.gas-bloq { position: relative; display: inline-block; line-height: 1; }
.gas-bloq i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.15); font-style: normal; opacity: .9; }
@media (max-width: 900px) {
  .garagem-area { grid-template-columns: 1fr; }
  .filtro-raridade { position: static; order: -1; }
  .filtro-estrelas { flex-direction: row; flex-wrap: wrap; }
  .filtro-estrelas button { width: auto; flex: 1 1 auto; }
}
.barra-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barra-filtros .sub-abas { margin: 0; flex: 1 1 auto; }
.sub-abas button { background: var(--painel2); color: var(--muted); }
.sub-abas button.ativa { background: var(--acento2); color: #fff; }
.comb-escolhidos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.slot { width: 100px; height: 70px; border: 2px dashed var(--borda); border-radius: 10px; display: grid; place-items: center;
  color: var(--muted); font-size: .75em; overflow: hidden; }
.slot.cheio { border-style: solid; border-color: var(--acento); cursor: pointer; }
.slot .frag-arte, .slot .veiculo { margin: 0; }
.grande-num { font-size: 1.5em; }
.carteira-resumo .card { gap: 2px; min-width: 0; }
/* saldos grandes (ex.: 997.990.951,84 ZDC) numa linha so */
.carteira-resumo .grande-num { font-size: clamp(1.05em, 1.6vw, 1.5em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; min-width: 560px; background: var(--painel); border-radius: 10px; }
.tabela th, .tabela td { padding: 6px 10px; border-bottom: 1px solid var(--borda); font-size: .9em; }
.chk { margin-left: 12px; }
ul#lista-hist { padding-left: 18px; color: var(--muted); }
ul#lista-hist li:first-child { color: var(--texto); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--painel2);
  border: 1px solid var(--borda); padding: 10px 18px; border-radius: 10px; max-width: calc(100% - 32px); z-index: 10; }
.toast.erro { border-color: var(--ruim); color: var(--ruim); }
/* tablet e celular: o menu lateral vira uma grade de botoes em cima do conteudo */
@media (max-width: 820px) {
  .corpo { grid-template-columns: 1fr; }
  .lateral { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .lateral > * { flex: 1 1 calc(25% - 8px); min-width: 110px; }
  .lateral .btn-jogo { font-size: .8em; padding: 8px 6px; }
  .lateral-espaco { display: none; }
}
@media (max-width: 600px) {
  .topo-app, main { padding-left: 16px; padding-right: 16px; }
  .topo-app { flex-wrap: wrap; gap: 8px 12px; position: static; }
  .marca { flex: 1 1 calc(100% - 116px); }   /* logo + som + lapis do nick na mesma linha */
  .marca .logo { height: 36px; }
  /* no celular o botao da musica sobe para a linha do logo; saldo e carteira ficam na linha de baixo */
  .btn-som { order: 1; }
  .saldo, .carteira-menu { order: 2; }
  .saldo { flex: 1; font-size: .95em; min-width: 0; }
  #btn-carteira { min-width: 0; }
  .lateral > * { flex-basis: calc(33% - 8px); min-width: 90px; }
  .fundo { height: 140px; }
}
/* celular estreito: saldo grande (ex.: 202.744,44) e botao da carteira continuam na mesma linha */
@media (max-width: 420px) {
  .saldo { font-size: .82em; gap: 4px; }
  .saldo img { width: 18px; }
  #btn-carteira { padding-left: 10px; padding-right: 10px; }
}
/* ---------- resultado do PVP: verde se venceu, vermelho se perdeu; jogadores um abaixo do outro ---------- */
#resultado-pvp { z-index: 75; }
.painel-pvp { width: min(560px, 100%); }
.painel-pvp.ganhou { border-color: #22c55e; box-shadow: 0 0 30px #22c55e55, 0 10px 30px #000a; }
.painel-pvp.perdeu { border-color: #ef4444; box-shadow: 0 0 30px #ef444455, 0 10px 30px #000a; }
.painel-pvp.ganhou .placar { color: #4ade80; text-shadow: 0 0 14px #22c55e; }
.painel-pvp.perdeu .placar { color: #f87171; text-shadow: 0 0 14px #ef4444; }
.painel-pvp.perdeu .total-resultado b { color: #f87171; }
.painel-pvp.ganhou .total-resultado b { color: #4ade80; }
.pvp-colocacao { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: 46vh; overflow-y: auto; padding: 2px; }
.pvp-linha { display: grid; grid-template-columns: 34px 74px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 10px; border: 2px solid; }
.pvp-linha .veiculo { margin: 0; }
.pvp-linha.venceu { background: #16a34a2e; border-color: #22c55e; }
.pvp-linha.perdeu { background: #dc26262e; border-color: #ef4444; }
.pvp-linha.eu { box-shadow: inset 0 0 0 2px #ffffff70; }
.pvp-linha .pos { font-weight: 900; font-size: 1.1em; text-align: center; }
.pvp-linha .quem { display: flex; flex-direction: column; min-width: 0; }
.pvp-linha .quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-linha .quem .estrelas { color: var(--acento); font-size: .85em; }
.pvp-linha .status { font-weight: 800; font-size: .85em; white-space: nowrap; }
.pvp-linha.venceu .status { color: #4ade80; }
.pvp-linha.perdeu .status { color: #f87171; }
@media (max-width: 520px) {
  .pvp-linha { grid-template-columns: 26px 60px minmax(0, 1fr); }
  .pvp-linha .status { grid-column: 2 / -1; white-space: normal; }
}
/* campo de valor com "ZDC" dentro da caixa, a direita do numero */
.campo-zdc { display: inline-flex; align-items: center; background: var(--painel2); border: 1px solid var(--borda); border-radius: 8px;
  padding-right: 10px; max-width: 100%; min-width: 0; }
/* sozinho numa linha de card (ex.: Depositar, Sacar): ocupa a largura toda, sem sair do card */
.card .linha > .campo-zdc:only-child { width: 100%; }
.campo-zdc:focus-within { border-color: var(--acento); }
.campo-zdc input { border: 0; background: transparent; width: 110px; padding-right: 4px; flex: 1 1 auto; min-width: 0; }
.campo-zdc input:focus { outline: none; }
.campo-zdc span { font-weight: 800; color: var(--acento); font-size: .9em; }
/* PVP: "Carros ate" com botoes 1 a 5 estrelas */
.botoes-estrelas { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.botoes-estrelas button { min-width: 50px; padding: 6px 10px; font-size: 1em; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.botoes-estrelas button .estrela { color: var(--acento); text-shadow: 0 0 6px #ffcc3388; }
.botoes-estrelas button.marcado { background: linear-gradient(#2ee6d6, #0f9e93); --sombra-btn: #0a6159; }
.botoes-estrelas button.marcado .estrela { color: #fff3b0; }
/* X vermelho no canto de cima a direita de cada pop-up */
.fechar-x { position: absolute; top: 10px; right: 10px; z-index: 6; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 900; line-height: 1; color: #fff; cursor: pointer;
  background: linear-gradient(#ff6b6b, #c3141e); border: 2px solid #ffffff55; box-shadow: 0 3px 0 #6e0b10, 0 0 10px #ef444466; }
.fechar-x:hover { filter: brightness(1.12); }
/* ---------- barra de rolagem no estilo do jogo (sem as setas quadradas do navegador) ----------
   lista de carros da Corrida, grade da abertura de caixas, resultado do PVP, tabelas e a propria pagina */
/* Firefox (nao entende o ::-webkit-scrollbar); no Chrome/Edge essas duas propriedades desligariam o estilo abaixo */
@supports (-moz-appearance: none) {
  .lista-coluna, .revelado-grade, .pvp-colocacao, .tabela-wrap, html { scrollbar-width: thin; scrollbar-color: #8b5cf6 transparent; }
}
.lista-coluna::-webkit-scrollbar, .revelado-grade::-webkit-scrollbar, .pvp-colocacao::-webkit-scrollbar,
.tabela-wrap::-webkit-scrollbar, html::-webkit-scrollbar { width: 10px; height: 10px; }
.lista-coluna::-webkit-scrollbar-track, .revelado-grade::-webkit-scrollbar-track, .pvp-colocacao::-webkit-scrollbar-track,
.tabela-wrap::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: #ffffff0d; border-radius: 99px; margin: 6px 0; }
html::-webkit-scrollbar-track { background: #0b2545; margin: 0; }
.lista-coluna::-webkit-scrollbar-thumb, .revelado-grade::-webkit-scrollbar-thumb, .pvp-colocacao::-webkit-scrollbar-thumb,
.tabela-wrap::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
  background: linear-gradient(#a06bff, #5b2fc0); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 1px 0 #ffffff55; }
.lista-coluna::-webkit-scrollbar-thumb:hover, .revelado-grade::-webkit-scrollbar-thumb:hover, .pvp-colocacao::-webkit-scrollbar-thumb:hover,
.tabela-wrap::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { background: linear-gradient(#2ee6d6, #0f9e93); background-clip: padding-box; }
.lista-coluna::-webkit-scrollbar-button, .revelado-grade::-webkit-scrollbar-button, .pvp-colocacao::-webkit-scrollbar-button,
.tabela-wrap::-webkit-scrollbar-button, html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.lista-coluna::-webkit-scrollbar-corner, html::-webkit-scrollbar-corner { background: transparent; }
/* Referral: botao dourado no menu (acima do Whitepaper) e o link de convite */
.lateral .btn-referral { font-size: .95em; text-transform: uppercase; color: #2a1f00; }
.lateral .btn-referral.ativa { background: linear-gradient(#fff07a, #e0bb12); box-shadow: inset 0 2px 0 #ffffff99, 0 0 0 2px #fff3b0, 0 4px 0 #7a6304; }
.ref-convite .linha { gap: 8px; flex-wrap: nowrap; }
.ref-convite input { flex: 1; min-width: 0; font-weight: 700; }
.ref-convite button { color: #2a1f00; flex: none; }
#ref-lista { min-width: 0; }   /* 4 colunas curtas: cabe na tela sem rolar */
@media (max-width: 600px) { #ref-lista { font-size: .85em; } #ref-lista th, #ref-lista td { padding: 6px 5px; } }
/* Cronometro: folhas de calendario no meio da barra de cima, viram a cada segundo */
.contagem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px;
  pointer-events: none; }
.contagem-titulo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.contagem-titulo b { color: var(--laranja, #ffb547); font-size: .82em; text-transform: uppercase; letter-spacing: 1px; }
.contagem-titulo span { color: #b9c8e6; font-size: .72em; font-weight: 700; }
.folhas { display: flex; gap: 7px; }
.sem-dias .folha[data-k="d"] { display: none; }
.folha { position: relative; width: 44px; border-radius: 7px; background: #fffaf0; box-shadow: 0 3px 0 #b9ad93, 0 5px 10px #0008; perspective: 220px; }
.folha-topo { height: 13px; border-radius: 7px 7px 0 0; background: linear-gradient(#ef4444, #b91c1c); color: #fff; font-size: 8px; font-weight: 900;
  letter-spacing: .5px; text-transform: uppercase; text-align: center; line-height: 14px; }
.argola { position: absolute; top: -4px; width: 5px; height: 9px; border-radius: 3px; background: linear-gradient(#e5e7eb, #6b7280); z-index: 2; }
.argola:nth-child(1) { left: 10px; } .argola:nth-child(2) { right: 10px; }
.folha-num { position: relative; height: 32px; perspective: 160px; }
.folha-num .numero { display: block; height: 32px; line-height: 32px; text-align: center; font-weight: 900; font-size: 21px; color: #1c1450;
  font-variant-numeric: tabular-nums; }
.folha-num > .numero { border-radius: 0 0 7px 7px; background: linear-gradient(#fffdf7, #ece4d2); }
/* a folha que sobe: presa na borda de cima (junto da faixa vermelha), gira para cima e para a frente e some */
.folha-num .pagina { position: absolute; inset: 0; border-radius: 0 0 7px 7px; background: linear-gradient(#fffdf7, #efe7d6);
  transform-origin: 50% 0; box-shadow: 0 2px 3px #0003; animation: folha-sobe .55s cubic-bezier(.45, .05, .55, .95) forwards; z-index: 1; }
@keyframes folha-sobe {
  0% { transform: rotateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotateX(105deg); opacity: 0; }
}
.contagem-fim { font-weight: 900; font-size: 1.15em; color: var(--laranja, #ffb547); text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 2px 8px #ff9f1c88; white-space: nowrap; }
/* tela media: o cronometro nao cabe entre o logo e o saldo, vai para uma linha propria */
@media (max-width: 1100px) {
  .topo-app { flex-wrap: wrap; }
  .contagem { position: static; transform: none; order: 5; flex: 1 1 100%; justify-content: center; padding: 2px 0 4px; }
}
/* lapis do nick, ao lado do botao da carteira */
.btn-lapis { width: 42px; height: 38px; padding: 0; display: grid; place-items: center; flex: none; }
.btn-lapis svg { width: 20px; height: 20px; color: #fff; }
.desconectado .btn-lapis { display: none; }
#dlg-campo-texto input { width: 100%; font-size: 1.05em; font-weight: 700; }
@media (max-width: 600px) { .btn-lapis { order: 1; } }   /* no celular sobe para a linha do logo, junto do som */
/* Botao do ZDC demo, abaixo do Whitepaper: grande, dourado e pulsando; cinza depois de usado */
.btn-demo { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 14px 12px; border-radius: 14px;
  background: linear-gradient(135deg, #ffe066, #ff9f1c 55%, #ff5e3a); color: #2a1300; text-align: left;
  box-shadow: inset 0 2px 0 #ffffffaa, 0 4px 0 #8a3a00, 0 0 0 0 #ffb54799; animation: demo-pulsa 1.6s ease-in-out infinite; }
.btn-demo:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-demo .demo-icone { font-size: 1.9em; line-height: 1; flex: none; }
.btn-demo .demo-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.btn-demo .demo-txt b { font-size: 1.05em; text-transform: uppercase; letter-spacing: .5px; }
.btn-demo .demo-txt small { font-size: .78em; font-weight: 800; opacity: .85; }
.btn-demo.usado, .btn-demo:disabled { background: linear-gradient(#6b7280, #4b5563); color: #e5e7eb; box-shadow: inset 0 2px 0 #ffffff33, 0 4px 0 #2d333d;
  animation: none; cursor: default; filter: none; transform: none; }
@keyframes demo-pulsa { 0%, 100% { box-shadow: inset 0 2px 0 #ffffffaa, 0 4px 0 #8a3a00, 0 0 0 0 #ffb54799; }
  50% { box-shadow: inset 0 2px 0 #ffffffaa, 0 4px 0 #8a3a00, 0 0 18px 4px #ffb547aa; } }
@media (max-width: 900px) { .lateral > .btn-demo { flex-basis: 100%; margin-top: 2px; justify-content: center; } }
/* BUY ZDC, ao lado da etiqueta da rede */
.btn-comprar-zdc { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: .85em; white-space: nowrap; flex: none;
  background: linear-gradient(#5ee88a, #17913f); box-shadow: inset 0 2px 0 #ffffff66, 0 3px 0 #0c5a26; text-transform: uppercase; }
.btn-comprar-zdc img { width: 18px; height: 18px; }
@media (max-width: 600px) { .btn-comprar-zdc { padding: 5px 8px; font-size: .72em; } .btn-comprar-zdc img { width: 14px; height: 14px; } }
/* Redes sociais: botoes quadrados no fim do menu */
.redes { display: flex; gap: 10px; margin-top: 14px; }
.rede { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #fff; text-decoration: none;
  background: #0b1530; border: 1px solid #ffffff2a; box-shadow: 0 3px 0 #050a1a; transition: background .15s, transform .15s, border-color .15s; }
.rede svg { width: 22px; height: 22px; }
.rede:hover { transform: translateY(-2px); }
.rede-x:hover { background: #000; border-color: #fff; }
.rede-discord:hover { background: #5865f2; border-color: #8b93ff; }
.rede.em-breve { opacity: .55; }
.rede.em-breve:hover { opacity: .8; }
@media (max-width: 900px) { .lateral > .redes { flex-basis: 100%; justify-content: center; margin-top: 4px; } }