/* O visual único do app (html[data-app]): o acabamento da tela de prêmio diário e do lobby —
   painéis roxos de contorno grosso, dourado nos destaques, letras condensadas, botões de placa
   arredondada como o JOGAR, cartas pequenas com estado (disponível, da conta, em uso,
   bloqueado) e os efeitos do lobby (poeira dourada, brilho que atravessa, ícone que flutua) —
   levado a todas as telas que abrem por cima do lobby: a loja, as abas de personalização, o
   visualizador de detalhes, o perfil, os ajustes, o ranking, os mapas, as salas e os amigos, o
   tutorial, as folhas, a busca, a partida encontrada, o fim de corrida, as perguntas e os
   avisos. O site (computador e navegador do celular) não usa nada daqui.

   As peças, na ordem do arquivo:
     1. as cores e medidas (variáveis);
     2. o painel, o título e o X;
     3. botões, campos e listas;
     4. a carta de produto e os estados dela;
     5. a loja (categorias, grade) e as abas de personalização;
     6. o visualizador de detalhes;
     7. cada tela (perfil e ajustes, amigos e salas, folhas, mapas, ranking, partida, fim de corrida, sala);
     8. a pergunta e os avisos;
     9. os efeitos. */

/* ---------- 1. Cores e medidas ---------- */
html[data-app] {
  --contorno: #120a1c;
  --painel: linear-gradient(180deg, #2b2049, #171029);
  --painel-sombra: inset 0 1px 0 #ffffff33, inset 0 -3px 0 #00000059, 0 4px 0 #000000a6;
  --vx-folha: linear-gradient(180deg, #2b2049, #150e26);
  --vx-folha-liso: #20173a;                 /* a cor do alto da folha, para o que fica preso nela ao rolar */
  --vx-folha-sombra: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6, 0 24px 60px #000d;
  --vx-carta: #0f0a1cb3;
  --vx-carta-sombra: inset 0 1px 0 #ffffff14, 0 3px 0 #000000a6;
  --vx-ouro: linear-gradient(180deg, #ffe45c, #ffb000 55%, #ff7a00);
  --vx-em-uso: linear-gradient(180deg, #5a3f0a, #2a1c08);
  --vx-em-uso-sombra: inset 0 0 0 2px #ffcf4a, 0 0 16px #ffb00059, 0 3px 0 #000000a6;
  --vx-meu: #12301fcc;
  --vx-meu-sombra: inset 0 0 0 1.5px #3ddc7780, 0 3px 0 #000000a6;
  --vx-titulo: #ffe45c;
  --vx-dourado: #ffd76a;
  --vx-claro: #d9d2ee;
  --vx-apagado: #a99fc4;
  --vx-verde: #3ddc77;
  --vx-verde-claro: #7ee2a0;
  --vx-roxo: #b98cff;
  --vx-condensada: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* As placas dos botões (o degradê, a borda grossa de baixo). */
  --vx-placa-ouro: linear-gradient(180deg, #fff27a 0%, #ffd21f 34%, #ff9d00 76%, #f56f00 100%);
  --vx-placa-verde: linear-gradient(180deg, #c9ffd9 0%, #5cf08f 34%, #22c55e 76%, #159447 100%);
  --vx-placa-vermelha: linear-gradient(180deg, #ffb3a6 0%, #ff6a55 34%, #e8262c 76%, #b8121c 100%);
  --vx-placa-roxa: linear-gradient(180deg, #6a58a6 0%, #4a3a78 38%, #33265c 78%, #241a40 100%);
  --vx-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%233ddc77' stroke='%23120a1c' stroke-width='2.5'/%3E%3Cpath d='M7 12.4l3.4 3.3L17.2 8.6' fill='none' stroke='%2306210f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Dentro das telas do app, o texto apagado do site (cinza-azulado) vira o lilás do visual novo. */
html[data-app] #overlay, html[data-app] .vitrine3d, html[data-app] .fim-corrida, html[data-app] .app-encontrada, html[data-app] #lobby { --muted: #cfc6e6; --dim: #a99fc4; }

/* ---------- 2. O painel, o título e o X ---------- */
/* Os painéis do site (Loja, Ajustes, Online) e a escolha de mapas, abertos por cima do lobby. */
html[data-app] #overlay .menu > .panel:not(.picker):not([hidden]),
html[data-app] #overlay.app-mapas .menu > .picker {
  padding: 12px 14px 14px; border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha);
  box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 100vmax #05030ad1, 0 6px 0 #000000a6;
  animation: app-folha-pula .22s cubic-bezier(.2, 1.3, .4, 1);
  scrollbar-width: thin; scrollbar-color: #5b4a8c transparent;
}
html[data-app] #overlay.app-mapas .menu > .picker { background: var(--vx-folha); padding: 12px 14px; }
/* O painel tem a altura do que mostra (uma aba com três facas não ocupa a tela inteira) e fica
   no meio; a loja, que é longa, vai de cima a baixo. */
html[data-app] #overlay .menu > .panel:not(.picker):not(#shopPanel):not([hidden]) {
  height: fit-content; min-height: min(190px, calc(100dvh - 16px));
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); margin-block: auto;
}
/* A luz atrás do título: a mesma aura dourada das estrelas do lobby, respirando devagar. */
html[data-app] #overlay .menu > .panel:not(.picker)::before, html[data-app] .app-folha-caixa::before, html[data-app] .app-pergunta-caixa::before {
  content: ""; display: block; position: absolute; z-index: -1; left: 50%; top: -34px; width: min(460px, 84%); height: 118px; border: 0; translate: -50% 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 34%, #ffb0003d, #b98cff24 46%, transparent 70%); animation: vx-aura 4.6s ease-in-out infinite;
}
html[data-app] .app-folha-caixa, html[data-app] .app-pergunta-caixa { position: relative; isolation: isolate; }
/* As folhas do lobby (modos, menu, sobre, tutorial, estrelas, login): o mesmo painel. */
html[data-app] .app-folha { background: radial-gradient(ellipse at 50% 46%, #1a0f33d9, #05030af0); }
html[data-app] .app-folha-caixa { gap: 10px; border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); scrollbar-width: thin; scrollbar-color: #5b4a8c transparent; }
/* O título de toda tela: dourado, condensado, no centro, com o ícone do botão que a abriu. */
html[data-app] #overlay .menu > .panel > .panel-title,
html[data-app] #overlay .picker .panel-head .panel-title,
html[data-app] #overlay .picker .ranking > h3,
html[data-app] .app-folha-caixa > h3,
html[data-app] .app-busca-caixa > h3 {
  margin: 0 0 8px; color: var(--vx-titulo); font: 800 24px/1.15 var(--vx-condensada); letter-spacing: .05em; text-shadow: 0 2px 0 #0009;
}
html[data-app] .app-titulo-icone { width: 38px; height: 38px; margin: -8px 8px -6px 0; filter: drop-shadow(0 2px 0 #00000080); animation: app-flutua 3.4s ease-in-out infinite; }
/* O X: a bolinha escura de contorno grosso, igual em todas as telas. */
html[data-app] .app-painel-fechar, html[data-app] .app-mapas-fechar, html[data-app] .app-folha-fechar {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 2.5px solid var(--contorno); border-radius: 50%;
  background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #150e26, 0 3px 0 #000000a6; color: #fff; cursor: pointer;
  transition: transform .1s ease, filter .12s ease;
}
html[data-app] .app-painel-fechar:active, html[data-app] .app-mapas-fechar:active, html[data-app] .app-folha-fechar:active { transform: translateY(2px); filter: brightness(.9); }
html[data-app] .app-painel-fechar svg, html[data-app] .app-mapas-fechar svg, html[data-app] .app-folha-fechar svg { width: 16px; height: 16px; stroke-width: 3; }
html[data-app] .app-painel-fechar, html[data-app] .app-mapas-fechar { margin: -4px -4px -38px auto; }

/* ---------- 3. Botões, campos e listas ----------
   Todo botão do app é da família do JOGAR: uma placa de cantos redondos, levemente inclinada,
   com contorno grosso, luz em cima e uma borda grossa embaixo que afunda ao toque. Dourada para a
   ação principal, verde para o que confirma ou joga, vermelha para sair da conta, roxa para o
   que fecha, cancela ou é secundário. */
html[data-app] .bv-loja:not(.app-jogar), html[data-app] .bv-sair {
  --bv-inclinacao: -7deg; font-family: var(--vx-condensada); font-size: 14px; font-weight: 800; letter-spacing: .1em; transition: transform .1s ease;
}
html[data-app] .bv-loja:not(.app-jogar) { color: #2a1200; text-shadow: 0 1px 0 #ffffff8c; }
html[data-app] .bv-loja:not(.app-jogar)::before, html[data-app] .bv-loja:not(.app-jogar)::after, html[data-app] .bv-sair::before { border-radius: 9px; }
html[data-app] .bv-loja:not(.app-jogar)::before, html[data-app] .bv-sair::before {
  border: 2.5px solid var(--contorno); background: var(--vx-placa-ouro);
  box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -4px 0 var(--vx-borda, #b54d00), 0 3px 0 var(--contorno), 0 6px 12px #0009; transition: filter .16s;
}
html[data-app] .bv-loja:not(.app-jogar)::after { inset: 2.5px; }
@media (hover: hover) { html[data-app] .bv-loja:not(.app-jogar):hover:not(:disabled)::before, html[data-app] .bv-sair:hover:not(:disabled)::before { filter: brightness(1.08) saturate(1.08); } }
html[data-app] .bv-loja:not(.app-jogar):active:not(:disabled), html[data-app] .bv-sair:active:not(:disabled) { transform: translateY(3px); }
html[data-app] .bv-loja:not(.app-jogar):active:not(:disabled)::before, html[data-app] .bv-sair:active:not(:disabled)::before { box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -2px 0 var(--vx-borda, #b54d00), 0 0 0 var(--contorno), 0 2px 6px #0009; }
html[data-app] .bv-loja:not(.app-jogar):focus-visible::before, html[data-app] .bv-sair:focus-visible::before { box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -4px 0 var(--vx-borda, #b54d00), 0 0 0 2px var(--contorno), 0 0 0 5px #ffe45c; }
html[data-app] .bv-loja:not(.app-jogar):disabled { color: #2a1200b3; text-shadow: none; }
html[data-app] .bv-loja:not(.app-jogar):disabled::before { filter: grayscale(.75) brightness(.7); }
html[data-app] .bv-loja svg { stroke-width: 2.4; }
/* Verde: jogar de novo, adicionar, aceitar. */
html[data-app] .bv-loja--verde:not(.app-jogar) { --vx-borda: #0b6a2d; color: #04210f; text-shadow: 0 1px 0 #ffffff80; }
html[data-app] .bv-loja--verde:not(.app-jogar)::before, html[data-app] .bv-loja--verde:not(.app-jogar):hover:not(:disabled)::before { background: var(--vx-placa-verde); }
/* Vermelha: sair da conta. */
html[data-app] .bv-loja--sair:not(.app-jogar) { --vx-borda: #7a0b12; color: #fff; text-shadow: 0 1px 0 #0006; }
html[data-app] .bv-loja--sair:not(.app-jogar)::before, html[data-app] .bv-loja--sair:not(.app-jogar):hover:not(:disabled)::before { background: var(--vx-placa-vermelha); box-shadow: inset 0 2px 0 #ffffff80, inset 0 -4px 0 var(--vx-borda), 0 3px 0 var(--contorno), 0 6px 12px #0009; }
/* Roxa: fechar, cancelar, sair de uma tela, tirar; e as de contorno do site (entrar, atualizar). */
html[data-app] .bv-sair, html[data-app] #vitrine3dFechar.bv-loja, html[data-app] .bv-loja--escuro:not(.app-jogar), html[data-app] .bv-loja--contorno:not(.app-jogar), html[data-app] .bv-loja--contorno-verde:not(.app-jogar) { --vx-borda: #150e26; text-shadow: 0 1px 0 #0008; }
html[data-app] .bv-sair::before, html[data-app] .bv-sair:hover:not(:disabled)::before,
html[data-app] #vitrine3dFechar.bv-loja::before, html[data-app] #vitrine3dFechar.bv-loja:hover:not(:disabled)::before,
html[data-app] .bv-loja--escuro:not(.app-jogar)::before, html[data-app] .bv-loja--contorno:not(.app-jogar)::before, html[data-app] .bv-loja--contorno-verde:not(.app-jogar)::before,
html[data-app] .bv-loja--contorno:not(.app-jogar):hover:not(:disabled)::before, html[data-app] .bv-loja--contorno-verde:not(.app-jogar):hover:not(:disabled)::before {
  background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -4px 0 var(--vx-borda), 0 3px 0 var(--contorno), 0 6px 12px #0009;
}
html[data-app] .bv-sair { justify-content: center; min-height: 36px; padding: 0 18px; color: #ffb3a8; font-size: 13px; }
html[data-app] .bv-sair svg { width: 14px; height: 14px; }
/* A placa é o ::before: o fundo escuro que alguns tinham no site (o Sair da "Partida encontrada", o Tirar
   do rastro e da mochila, o filtro aceso da loja) virava um retângulo em volta dela (23/10/2026). */
html[data-app] .bv-sair, html[data-app] .bv-loja:not(.app-jogar), html[data-app] #shopPanel .loja-filtros button.bv-loja { background: none; }
html[data-app] #vitrine3dFechar.bv-loja, html[data-app] .bv-loja--escuro:not(.app-jogar) { color: #fff; }
html[data-app] .bv-loja--contorno:not(.app-jogar), html[data-app] .bv-loja--contorno:not(.app-jogar):hover:not(:disabled) { color: var(--vx-dourado); }
html[data-app] .bv-loja--contorno-verde:not(.app-jogar), html[data-app] .bv-loja--contorno-verde:not(.app-jogar):hover:not(:disabled) { color: var(--vx-verde-claro); }
/* Comprar com Vectors: a placa escura de aro dourado, com a moeda. */
html[data-app] .bv-loja.loja-vectors:not(.app-jogar) { --vx-borda: #1a1003; color: var(--vx-dourado); text-shadow: 0 1px 0 #0008; }
html[data-app] .bv-loja.loja-vectors:not(.app-jogar)::before, html[data-app] .bv-loja.loja-vectors:not(.app-jogar):hover:not(:disabled)::before { background: linear-gradient(180deg, #5a430c, #33250a 55%, #241803); box-shadow: inset 0 0 0 1.5px #ffcf4a, inset 0 -4px 0 var(--vx-borda), 0 3px 0 var(--contorno), 0 6px 12px #0009; }
html[data-app] .bv-loja.loja-vectors span { font: 800 15px/1 var(--vx-condensada); letter-spacing: .04em; }
/* Equipado: o estado, não uma ação — a placa verde-escura de aro verde. */
html[data-app] .bv-loja.loja-equipado.loja-equipado:not(.app-jogar) { --vx-borda: #0a1f13; color: var(--vx-verde-claro); text-shadow: none; }
html[data-app] .bv-loja.loja-equipado.loja-equipado:not(.app-jogar)::before { background: linear-gradient(180deg, #1c4a30, #12301f); box-shadow: inset 0 0 0 1.5px #3ddc77, inset 0 -4px 0 var(--vx-borda), 0 3px 0 var(--contorno); filter: none; }
/* O brilho que atravessa a placa, como no JOGAR: só na ação principal de cada tela. */
html[data-app] :is(#vitrine3dAcao:not(.loja-equipado), #perguntaSim, .app-login-receber, .app-premio-entrar, #onlineCriar, .fim-acoes .bv-loja, .app-sem-itens .bv-loja):not(:disabled)::after {
  opacity: 1; background-position: 160% 0; transition: none; animation: app-brilho 5.4s ease-in-out infinite;
}
/* Os botões pequenos das listas (entrar numa sala, convidar, aceitar, recusar, remover): a mesma placa, menor. */
html[data-app] .online-salas button, html[data-app] .amigo-acoes button, html[data-app] .aviso-amigo-acoes button {
  --vx-borda: #0b6a2d; position: relative; isolation: isolate; height: 32px; padding: 0 13px; border: 0; background: none; color: #04210f; font: 800 12.5px/1 var(--vx-condensada); letter-spacing: .1em; text-shadow: 0 1px 0 #ffffff80; text-transform: uppercase; transition: transform .1s ease;
}
html[data-app] .online-salas button::before, html[data-app] .amigo-acoes button::before, html[data-app] .aviso-amigo-acoes button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-7deg); border: 2px solid var(--contorno); border-radius: 8px; background: var(--vx-placa-verde);
  box-shadow: inset 0 2px 0 #ffffffa6, inset 0 -3px 0 var(--vx-borda), 0 2px 0 var(--contorno);
}
html[data-app] .online-salas button:active:not(:disabled), html[data-app] .amigo-acoes button:active, html[data-app] .aviso-amigo-acoes button:active { transform: translateY(2px); }
html[data-app] .online-salas button:hover:not(:disabled), html[data-app] .amigo-acoes button.principal:hover:not(:disabled) { color: #04210f; }
html[data-app] .online-salas button:hover:not(:disabled)::before, html[data-app] .amigo-acoes button.principal:hover:not(:disabled)::before { background: var(--vx-placa-verde); }
html[data-app] .amigo-acoes button:not(.principal), html[data-app] .aviso-amigo-acoes button:not(.principal), html[data-app] .online-salas button:disabled { --vx-borda: #150e26; color: var(--vx-claro); text-shadow: 0 1px 0 #0008; }
html[data-app] .amigo-acoes button:not(.principal)::before, html[data-app] .amigo-acoes button:not(.principal):hover::before, html[data-app] .aviso-amigo-acoes button:not(.principal)::before, html[data-app] .online-salas button:disabled::before {
  background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 var(--vx-borda), 0 2px 0 var(--contorno);
}
html[data-app] .amigo-acoes button.remover { width: 32px; padding: 0; color: #ffb3a8; font: 800 17px/1 "Segoe UI", sans-serif; letter-spacing: 0; }
html[data-app] .online-salas button:disabled { opacity: .75; }
/* A conta, no alto do lobby e nas telas: a placa dourada com a foto, nos mesmos cantos redondos. */
html[data-app] .bv-conta { --bv-inclinacao: -7deg; font-family: var(--vx-condensada); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
html[data-app] .bv-conta::before { border: 2.5px solid var(--contorno); border-radius: 9px; background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00, 0 3px 0 var(--contorno); }
/* O texto corrido e os avisos das telas. */
html[data-app] #overlay .menu .loja-aviso, html[data-app] #overlay .menu .intro, html[data-app] #overlay .menu .setting-dica { color: var(--vx-claro); }
/* Campos de texto e listas de escolha: a caixa inclinada do site vira uma caixa escura de contorno. */
html[data-app] #overlay .menu .caixa-inclinada, html[data-app] .app-ranking-mapa .caixa-inclinada, html[data-app] #overlay .menu .busca-mapa { transform: none; border: 2.5px solid var(--contorno); border-radius: 10px; background: #0f0a1ccc; box-shadow: inset 0 2px 4px #0008, 0 1px 0 #ffffff1f; }
html[data-app] #overlay .menu .caixa-inclinada > *, html[data-app] .app-ranking-mapa .caixa-inclinada > * { transform: none; }
html[data-app] #overlay .menu .caixa-inclinada::before, html[data-app] #overlay .menu .caixa-inclinada::after, html[data-app] #overlay .menu .busca-mapa::before { display: none; }
html[data-app] #overlay .menu .caixa-inclinada:focus-within, html[data-app] #overlay .menu .busca-mapa:focus-within { box-shadow: inset 0 2px 4px #0008, 0 0 0 2px #ffcf4a; }
html[data-app] #overlay .menu input[type="text"], html[data-app] #overlay .menu select { color: #fff; }
html[data-app] #overlay .menu input::placeholder { color: var(--vx-apagado); }
/* A linha de um ajuste: um cartão escuro com o nome à esquerda e o controle à direita. */
html[data-app] #overlay .menu .setting { padding: 7px 12px; border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); color: #fff; }
html[data-app] #overlay .menu .setting > span:first-child { color: var(--vx-dourado); font: 800 13px/1.2 var(--vx-condensada); letter-spacing: .1em; text-transform: uppercase; }
html[data-app] #overlay .menu .setting output { padding: 2px 9px; border: 2px solid var(--contorno); border-radius: 999px; background: #ffb00026; color: var(--vx-dourado); font: 800 12.5px/1.25 var(--vx-condensada); letter-spacing: .04em; }
html[data-app] #overlay .menu input[type="range"] { accent-color: #ffb000; }
html[data-app] #overlay .menu input[type="checkbox"] { accent-color: #3ddc77; }
/* O título de uma parte da tela (Molduras de perfil, Salas públicas, Kits com desconto): dourado, com um fio. */
html[data-app] #shopPanel .loja-secao > h3, html[data-app] #settingsPanel h3, html[data-app] #onlinePanel .online-card h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--vx-dourado); font: 800 14px/1.2 var(--vx-condensada); letter-spacing: .14em; text-transform: uppercase;
}
html[data-app] #shopPanel .loja-secao > h3::after, html[data-app] #settingsPanel h3::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ffd76a66, transparent); }

/* ---------- 4. A carta de produto ----------
   Uma carta pequena para todo produto e todo item de personalização: a miniatura, o nome e o
   preço ou o estado. O toque abre o visualizador de detalhes. Estados: a que é da conta (verde),
   a que está em uso (dourada, acesa, com a marca por cima da miniatura) e a bloqueada (apagada). */
.loja-carta, html[data-app] #settingsPanel .faca-miniatura, html[data-app] #settingsPanel .carta-escolha {
  position: relative; display: grid; grid-template-rows: auto auto; align-content: start; justify-items: center; gap: 3px; min-width: 0; margin: 0; padding: 5px 5px 6px;
  border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); color: #fff; cursor: pointer; text-align: center;
  font-family: Barlow, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; transition: transform .1s ease, filter .12s ease;
}
.loja-carta:active, html[data-app] #settingsPanel .faca-miniatura:active, html[data-app] #settingsPanel .carta-escolha:active { transform: translateY(2px); filter: brightness(.92); }
@media (hover: hover) { .loja-carta:hover, html[data-app] #settingsPanel .faca-miniatura:hover, html[data-app] #settingsPanel .carta-escolha:hover { filter: brightness(1.15); } }
.loja-carta:focus-visible, html[data-app] #settingsPanel .faca-miniatura:focus-visible, html[data-app] #settingsPanel .carta-escolha:focus-visible { outline: 3px solid #ffe45c; outline-offset: 2px; }
/* A miniatura, num fundo de vitrine. */
.loja-carta-foto, html[data-app] #settingsPanel .carta-foto, html[data-app] #settingsPanel .carta-escolha > canvas {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse at 50% 62%, #3d2f63, #1a1230 78%);
}
.loja-carta-foto img, html[data-app] #settingsPanel .carta-foto img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; aspect-ratio: auto; filter: drop-shadow(0 2px 2px #0008); }
html[data-app] #settingsPanel .carta-escolha > canvas { height: auto; object-fit: contain; }
/* O kit: as peças dele lado a lado, e o desconto no canto. */
.loja-carta--kit .loja-carta-foto { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.loja-carta-desconto { position: absolute; z-index: 2; top: 3px; right: 3px; padding: 1px 6px; border: 2px solid var(--contorno); border-radius: 999px; background: linear-gradient(180deg, #ff7a66, #e8262c); color: #fff; font: 800 11px/1.25 var(--vx-condensada); letter-spacing: .04em; }
.loja-carta-selo { position: absolute; z-index: 2; top: 2px; left: 5px; color: #ffe45c; font: 800 14px/1 "Segoe UI", sans-serif; font-style: normal; text-shadow: 0 1px 0 #000, 0 0 6px #ffb000; }
/* O nome e o preço (ou o estado). */
.loja-carta strong, html[data-app] #settingsPanel .carta-nome, html[data-app] #settingsPanel .carta-escolha > span {
  order: 2; max-width: 100%; overflow: hidden; color: #fff; font: 800 13px/1.15 var(--vx-condensada); letter-spacing: .03em; text-overflow: ellipsis; text-transform: none; white-space: nowrap;
}
.loja-carta-foto, html[data-app] #settingsPanel .carta-foto, html[data-app] #settingsPanel .carta-escolha > canvas { order: 1; }
.loja-carta-preco { order: 3; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 15px; }
.loja-carta-preco em { color: var(--vx-dourado); font: 800 13px/1 var(--vx-condensada); font-style: normal; letter-spacing: .03em; white-space: nowrap; }
.loja-carta-preco em.loja-adquirido { color: var(--vx-verde-claro); }
.loja-carta-vectors { display: inline-flex; align-items: center; gap: 2px; color: var(--vx-dourado); font: 800 12px/1 var(--vx-condensada); }
.loja-carta-vectors img { width: 13px; height: 13px; }
.loja-carta-vectors.sem-saldo { opacity: .5; }
/* Da conta: verde, como o dia já recebido. */
.loja-carta.meu { background: var(--vx-meu); box-shadow: var(--vx-meu-sombra); }
/* Em uso: dourada e acesa, como o dia de hoje. */
.loja-carta.usando, html[data-app] #settingsPanel .faca-miniatura.equipado, html[data-app] #settingsPanel .carta-escolha.equipado, html[data-app] #settingsPanel .carta-escolha[aria-pressed="true"]:not(.carta-rastro) {
  border-color: var(--contorno); background: var(--vx-em-uso); box-shadow: var(--vx-em-uso-sombra); color: #fff;
}
/* (Nas abas, a carta tocada por último não fica marcada: quem marca é o estado — em uso.) */
html[data-app] #settingsPanel .faca-miniatura[aria-pressed="true"]:not(.equipado), html[data-app] #settingsPanel .carta-rastro[aria-pressed="true"]:not(.equipado) { border-color: var(--contorno); background: var(--vx-carta); color: #fff; }
/* A marca de "em uso": por cima da miniatura, no canto (a ordem das peças da carta a deixaria por baixo). */
.loja-carta.usando::after, html[data-app] #settingsPanel .faca-miniatura.equipado::after, html[data-app] #settingsPanel .carta-escolha.equipado::after, html[data-app] #settingsPanel .carta-escolha[aria-pressed="true"]:not(.carta-rastro)::after {
  content: ""; position: absolute; z-index: 3; right: 3px; top: 3px; width: 22px; height: 22px; background: var(--vx-marca) center / contain no-repeat; filter: drop-shadow(0 2px 0 #0008); pointer-events: none; animation: vx-marca-entra .3s cubic-bezier(.2, 1.6, .4, 1) backwards;
}
/* Ocupada por outro jogador da sala. */
html[data-app] #settingsPanel .carta-escolha.tomada { opacity: .5; filter: grayscale(.8); }
html[data-app] #settingsPanel .selo-carta { display: none; }

/* ---------- 5. A loja e as abas de personalização ---------- */
/* A carteira: a moedinha, o saldo e o ganho do dia numa linha; o "?" abre como se ganha. */
.loja-carteira-ajuda { display: none; }
html[data-app] .loja-carteira { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; padding: 4px 8px 4px 5px; border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] .loja-carteira img { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 #00000080); }
html[data-app] .loja-carteira div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
html[data-app] .loja-carteira b { color: var(--vx-dourado); font: 800 18px/1.1 var(--vx-condensada); }
html[data-app] .loja-carteira span { color: var(--vx-claro); font: 700 13px/1.1 var(--vx-condensada); letter-spacing: .04em; }
html[data-app] .loja-carteira p { display: none; flex: 1 1 100%; margin: 2px 2px 4px; color: var(--vx-claro); font-size: 12px; line-height: 1.45; }
html[data-app] .loja-carteira.aberta p { display: block; }
html[data-app] .loja-carteira-ajuda { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 2px solid var(--contorno); border-radius: 50%; background: var(--vx-placa-ouro); box-shadow: inset 0 1px 0 #ffffffbf, inset 0 -2px 0 #b54d00, 0 2px 0 var(--contorno); color: #2a1200; font: 800 15px/1 var(--vx-condensada); cursor: pointer; }
html[data-app] .loja-carteira.aberta .loja-carteira-ajuda { filter: brightness(.8); }
/* Os avisos da loja (carregando, teste, entrar com a conta): numa linha, discretos. */
html[data-app] #shopPanel > .loja-aviso { margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
html[data-app] #shopPanel > .loja-aviso:empty { display: none; }
/* No lugar dos filtros do site, a faixa de categorias. */
html[data-app] #lojaFiltros { display: none !important; }
.loja-categorias { display: none; }
html[data-app] .loja-categorias:not([hidden]) {
  position: sticky; top: -12px; z-index: 6; display: flex; align-items: center; gap: 6px; margin: 0 -14px 4px; padding: 7px 56px 9px 14px; overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--vx-folha-liso); box-shadow: 0 6px 8px -6px #000c; scrollbar-width: none;
}
html[data-app] .loja-categorias::-webkit-scrollbar { display: none; }
.loja-categoria {
  flex: none; display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px 0 5px; border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #150e26, 0 2px 0 var(--contorno);
  color: #fff; cursor: pointer; font: 800 13px/1 var(--vx-condensada); letter-spacing: .08em; text-shadow: 0 1px 0 #0008; text-transform: uppercase; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform .1s ease;
}
.loja-categoria img { width: 28px; height: 28px; margin: -3px 0; pointer-events: none; }
.loja-categoria:active { transform: translateY(2px); }
.loja-categoria[aria-current="true"] { background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00, 0 2px 0 var(--contorno), 0 0 14px #ffb00066; color: #2a1200; text-shadow: 0 1px 0 #ffffff8c; animation: vx-salta .28s cubic-bezier(.2, 1.6, .4, 1); }
.loja-categoria[aria-current="true"] img { animation: app-flutua 2.8s ease-in-out infinite; }
.loja-categoria[data-categoria="minhas"] { margin-left: auto; }
.loja-categoria[data-categoria="minhas"]:not(:has(img)) { padding: 0 14px; }
.loja-categoria[data-categoria="minhas"][aria-pressed="true"] { background: var(--vx-placa-verde); box-shadow: inset 0 2px 0 #ffffffa6, inset 0 -3px 0 #0b6a2d, 0 2px 0 var(--contorno), 0 0 14px #3ddc7766; color: #04210f; text-shadow: 0 1px 0 #ffffff80; }
/* As seções: o título dourado com um fio, a grade de cartas. */
html[data-app] #shopPanel .loja-secoes { display: grid; gap: 10px; }
html[data-app] #shopPanel .loja-secao { margin: 0; padding: 0; border: 0; background: none; }
html[data-app] #shopPanel .loja-secao-nota { display: none; }
html[data-app] #shopPanel .loja-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }

/* As abas de personalização (Facas, Sprays, Personagens, Rastros, Mochilas): sem o expositor
   grande nem os textos de apoio — só a grade de cartas, no meio; o toque abre os detalhes. */
html[data-app] #settingsPanel #facaVitrine, html[data-app] #settingsPanel #mochilaVitrine,
html[data-app] #settingsPanel #abaRastrosConteudo > .rastro-vitrine, html[data-app] #settingsPanel .escolhas .label { display: none !important; }
html[data-app] #settingsPanel .facas-grade, html[data-app] #settingsPanel .escolha-grade { display: grid; grid-template-columns: repeat(auto-fit, 118px); justify-content: center; gap: 9px 8px; padding: 6px 4px 4px; }
html[data-app] #settingsPanel .carta-escolha > canvas { aspect-ratio: 16 / 12; }
html[data-app] #settingsPanel .rastro-cadeado { display: none !important; }
/* Sem nenhum item daquele tipo: o convite para a loja. */
html[data-app] .app-sem-itens p { color: #fff; }

/* ---------- 6. O visualizador de detalhes (src/vitrine-3d.js) ----------
   A janela que abre ao tocar num produto: o palco (a faca em 3D ou na mão, o rastro, o
   personagem, a mochila voando, o spray na parede, as peças do kit) e, ao lado, o nome, o preço,
   as visualizações e os botões. */
html[data-app] .vitrine3d { background: radial-gradient(ellipse at 50% 46%, #33195fe6, #07050cf5); }
html[data-app] .vitrine3d-caixa { position: relative; align-items: stretch; border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); animation: app-folha-pula .24s cubic-bezier(.2, 1.3, .4, 1); }
/* O palco ocupa a altura toda da janela (os dados ao lado mandam nela). */
html[data-app] .vitrine3d-palco { align-self: stretch; height: auto; min-height: min(calc(100dvh - 42px), 62vh, 440px); overflow: hidden; border: 2.5px solid var(--contorno); border-radius: 12px; background: radial-gradient(ellipse at 50% 60%, #3d2f63, #150e26 78%); box-shadow: inset 0 2px 10px #0009; }
html[data-app] .vitrine3d-dados { gap: 7px; align-content: center; justify-items: stretch; text-align: center; }
html[data-app] .vitrine3d-dados > strong { color: var(--vx-titulo); font: 800 22px/1.1 var(--vx-condensada); letter-spacing: .04em; text-shadow: 0 2px 0 #0009; overflow-wrap: anywhere; }
html[data-app] .vitrine3d-dados > .loja-extra { color: var(--vx-claro); font-size: 12px; line-height: 1.35; }
html[data-app] .vitrine3d-dados > .loja-extra:empty { display: none; }
html[data-app] .vitrine3d-dados > em { color: var(--vx-dourado); font: 800 19px/1.1 var(--vx-condensada); letter-spacing: .03em; }
html[data-app] .vitrine3d-dados > em.loja-adquirido, html[data-app] #vitrine3dPreco.loja-adquirido { color: var(--vx-verde-claro); }
/* As visualizações (Em 3D / Na mão; Rastro / No personagem): duas metades, a escolhida dourada. */
html[data-app] .vitrine3d-modos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 0; border: 2.5px solid var(--contorno); border-radius: 10px; overflow: hidden; background: #0f0a1ccc; box-shadow: 0 2px 0 #000000a6; }
html[data-app] .vitrine3d-modos[hidden] { display: none; }
html[data-app] .vitrine3d-modos button { min-height: 34px; padding: 0 8px; border: 0; border-radius: 0; background: none; color: var(--vx-claro); font: 800 12.5px/1.1 var(--vx-condensada); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
html[data-app] .vitrine3d-modos button + button { border-left: 2.5px solid var(--contorno); }
html[data-app] .vitrine3d-modos button[aria-pressed="true"] { background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00; color: #2a1200; text-shadow: 0 1px 0 #ffffff8c; }
html[data-app] .vitrine3d-dica { color: var(--vx-apagado); font-size: 11px; line-height: 1.35; letter-spacing: .02em; }
html[data-app] .vitrine3d-dica:empty { display: none; }
/* Com duas visualizações (Em 3D / Na mão; Rastro / No personagem), a dica tem a altura reservada:
   trocar de uma para a outra não muda o tamanho da janela. */
html[data-app] .vitrine3d-modos:not([hidden]) ~ .vitrine3d-dica { display: flex; align-items: center; justify-content: center; min-height: 2.7em; margin: -2px 0; }
html[data-app] .vitrine3d-dados .loja-acoes { display: grid; gap: 9px; padding: 2px 9px 6px; }
html[data-app] .vitrine3d-dados .loja-acoes .bv-loja { width: 100%; min-width: 0; height: 40px; justify-content: center; }
html[data-app] .vitrine3d-dados .loja-acoes .bv-sair { width: 100%; height: 38px; }
html[data-app] .vitrine3d-dados .loja-reembolso { justify-self: center; padding: 2px 8px; border: 0; background: none; color: var(--vx-apagado); font-size: 11px; text-decoration: underline; cursor: pointer; }
html[data-app] .vitrine3d-estado { color: var(--vx-claro); }
html[data-app] .vitrine3d-parabens { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-em-uso); box-shadow: var(--vx-em-uso-sombra); color: #fff; }
html[data-app] .vitrine3d-parabens b { color: var(--vx-titulo); }
html[data-app] .vitrine3d.comemorando .vitrine3d-caixa { box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 60px #ffb00059, 0 6px 0 #000000a6; }
/* O spray nos detalhes: o desenho grande, numa parede. */
.expositor-parede { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #4a3d6e 0%, #2a2145 55%, #150e26 100%), repeating-linear-gradient(0deg, #ffffff0a 0 2px, transparent 2px 44px), repeating-linear-gradient(90deg, #ffffff08 0 2px, transparent 2px 88px); background-blend-mode: normal, overlay, overlay; }
.expositor-parede img { width: auto; height: 78%; max-width: 78%; object-fit: contain; filter: drop-shadow(0 3px 0 #0006) saturate(1.05); animation: vx-carimbo .34s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.expositor-parede b { color: #ffe45c; font: 800 clamp(64px, 30vh, 120px)/1 var(--vx-condensada, "Barlow Condensed", sans-serif); text-shadow: 0 5px 0 #0008; }
/* O kit nos detalhes: as peças dele, lado a lado (tocar numa abre os detalhes dela). */
.expositor-kit { position: absolute; inset: 0; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px; }
.expositor-kit-peca { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 6px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px; background: #0f0a1cb3; box-shadow: inset 0 1px 0 #ffffff14, 0 3px 0 #000000a6; color: #fff; cursor: pointer; animation: vx-carta-entra .3s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.expositor-kit-peca + .expositor-kit-peca { animation-delay: 70ms; }
.expositor-kit-peca + .expositor-kit-peca + .expositor-kit-peca { animation-delay: 140ms; }
.expositor-kit-peca img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.expositor-kit-peca span { max-width: 100%; overflow: hidden; font: 800 13px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.expositor-kit-peca:active { transform: translateY(2px); }

/* ---------- 7. Cada tela ---------- */
/* O perfil e os ajustes. */
html[data-app] #settingsPanel .minha-moldura { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] #settingsPanel #minhaMolduraNome { color: #fff; font: 800 17px/1.2 var(--vx-condensada); letter-spacing: .04em; }
html[data-app] #settingsPanel .setting-dica { border-radius: 10px; background: #ffb0000f; }
html[data-app] #settingsPanel .app-molduras-como, html[data-app] #settingsPanel .conta-excluir-texto { color: var(--vx-claro); }
html[data-app] #settingsPanel .conta-excluir { border-color: #ffffff1f; }
html[data-app] #recarregarJogo { border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #150e26, 0 2px 0 var(--contorno); color: #fff; font: 800 13px/1 var(--vx-condensada); letter-spacing: .08em; text-transform: uppercase; }
/* As molduras de perfil: cartas com os mesmos estados (bloqueada, sua, em uso). */
html[data-app] .app-moldura-carta { position: relative; border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] .app-moldura-carta.tem { background: var(--vx-meu); box-shadow: var(--vx-meu-sombra); }
html[data-app] .app-moldura-carta.atual { background: var(--vx-em-uso); box-shadow: var(--vx-em-uso-sombra); }
html[data-app] .app-moldura-carta.atual::after { content: ""; position: absolute; z-index: 3; right: 3px; top: 3px; width: 22px; height: 22px; background: var(--vx-marca) center / contain no-repeat; filter: drop-shadow(0 2px 0 #0008); }
html[data-app] .app-moldura-carta:not(.tem)::after { content: ""; position: absolute; z-index: 3; right: 2px; top: 2px; width: 26px; height: 26px; background: url("./assets/lobby/cadeado.webp") center / contain no-repeat; filter: drop-shadow(0 2px 0 #0008); }
html[data-app] .app-moldura-carta b { color: #fff; font: 800 14px/1.15 var(--vx-condensada); }
html[data-app] .app-moldura-carta.tem em { color: var(--vx-verde-claro); }
html[data-app] .app-moldura-carta.atual em { color: var(--vx-dourado); }

/* Os amigos e as salas. */
html[data-app] #onlinePanel .online-card { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] #onlinePanel .online-card h3 { margin: 0; font-size: 16px; }
html[data-app] .app-cartao-icone { flex: none; width: 34px; height: 34px; margin: -6px -2px -4px 0; filter: drop-shadow(0 2px 0 #00000080); }
html[data-app] #onlinePanel .online-dica, html[data-app] #onlinePanel .online-salas-vazio { color: var(--vx-claro); }
html[data-app] #onlinePanel .online-rolagem li, html[data-app] #onlinePanel .online-salas li { border: 2px solid var(--contorno); border-radius: 10px; background: #241a40cc; box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 0 #000000a6; }
html[data-app] #onlinePanel .online-rolagem li.pedido { background: linear-gradient(180deg, #4a3608cc, #2a1c08cc); box-shadow: inset 0 0 0 1.5px #ffcf4a, 0 2px 0 #000000a6; }
html[data-app] #onlinePanel .online-rolagem li b, html[data-app] #onlinePanel .online-sala-dados b { overflow: visible; color: #fff; font: 800 16px/1.15 var(--vx-condensada); letter-spacing: .03em; text-overflow: clip; }
html[data-app] #onlinePanel .online-rolagem li.online b { color: var(--vx-verde-claro); }
html[data-app] #onlinePanel .online-salas img { border: 2px solid var(--contorno); border-radius: 7px; }
html[data-app] #onlinePanel .online-sala-gente { color: var(--vx-dourado); font: 800 14px/1 var(--vx-condensada); letter-spacing: .04em; }

/* As folhas do lobby: as opções de modo e do menu são cartas (a escolhida, dourada e acesa). */
html[data-app] .app-modo-op, html[data-app] .app-menu-op { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); color: #fff; transition: transform .1s ease, filter .12s ease; }
html[data-app] .app-modo-op:active, html[data-app] .app-menu-op:active { transform: translateY(2px); filter: brightness(.92); }
html[data-app] .app-modo-op[aria-pressed="true"] { border-color: var(--contorno); background: var(--vx-em-uso); box-shadow: var(--vx-em-uso-sombra); }
html[data-app] .app-modo-op[aria-pressed="true"] img { animation: app-flutua 2.8s ease-in-out infinite; }
html[data-app] .app-modo-op b, html[data-app] .app-menu-op { font-family: var(--vx-condensada); font-weight: 800; }
html[data-app] .app-modo-op small { color: var(--vx-claro); }
html[data-app] .app-menu-op img { flex: none; width: 34px; height: 34px; margin: -4px 0; filter: drop-shadow(0 2px 0 #00000080); }
html[data-app] .app-menu-lista #sairConta { height: 42px; padding: 0 20px 0 12px; }
html[data-app] .app-sair-icone { flex: none; width: 36px; height: 36px; margin: -8px 0 -4px; filter: drop-shadow(0 2px 0 #00000080); }
html[data-app] .app-tutorial-quadro { border: 2.5px solid var(--contorno); border-radius: 12px; }
html[data-app] .app-folha-caixa .rodape-sobre p, html[data-app] .app-folha-caixa .rodape-sobre span { color: var(--vx-claro); }

/* A escolha de mapas: as cartas com o contorno do padrão; a escolhida, dourada e acesa. */
html[data-app] #overlay.app-mapas #mapPanel { border: 0; background: none; box-shadow: none; }
html[data-app] #overlay.app-mapas .menu .map-card { overflow: hidden; border: 2.5px solid var(--contorno); border-radius: 12px; background: linear-gradient(180deg, #241a40, #150e26); box-shadow: var(--vx-carta-sombra); transition: transform .1s ease, filter .12s ease; }
html[data-app] #overlay.app-mapas .menu .map-card:active { transform: translateY(2px); filter: brightness(.92); }
html[data-app] #overlay.app-mapas .menu .map-card.selected { border-color: #ffcf4a; background: var(--vx-em-uso); box-shadow: 0 0 0 2.5px var(--contorno), 0 0 16px #ffb00073, 0 3px 0 2.5px #000000a6; }
html[data-app] #overlay.app-mapas .menu .map-card .accent { display: none; }
html[data-app] #overlay.app-mapas .menu .map-card .map-shot { border-radius: 8px 8px 0 0; }
html[data-app] #overlay.app-mapas .menu .map-card .map-heading b { color: #fff; font-family: var(--vx-condensada); font-weight: 800; }
html[data-app] #overlay.app-mapas .menu .map-card.selected .map-heading b { color: var(--vx-titulo); }
html[data-app] #overlay.app-mapas .menu .map-description { color: var(--vx-claro); }
html[data-app] #overlay.app-mapas .menu .map-card .badge { top: 40px; left: 9px; padding: 1px 8px; border: 2px solid var(--contorno); border-radius: 999px; background: #150e26f2; font: 800 11.5px/1.3 var(--vx-condensada); letter-spacing: .06em; }
html[data-app] #overlay.app-mapas .menu .map-card .map-feito { padding: 1px 8px; border: 2px solid var(--contorno); border-radius: 999px; background: #12301ff2; color: var(--vx-verde-claro); font: 800 11.5px/1.3 var(--vx-condensada); letter-spacing: .06em; }
html[data-app] #overlay.app-mapas .menu .map-card .map-carimbo { top: 7px; left: 7px; border-width: 2.5px; font-size: 12.5px; }
html[data-app] #overlay.app-mapas .menu .map-card .map-check { z-index: 3; width: 24px; height: 24px; border: 0; background: var(--vx-marca) center / contain no-repeat; box-shadow: none; color: transparent; filter: drop-shadow(0 2px 0 #0008); }
/* A barra (busca, dificuldade, setas) numa linha só, também no celular estreito: botões mais justos. */
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-tools { flex-wrap: nowrap; gap: 8px; }
html[data-app] #overlay.app-mapas .menu .map-arrows { gap: 8px; margin-left: 0; }
@media (max-width: 760px) {
  html[data-app] #overlay.app-mapas .menu .dif-botao { gap: 4px; padding: 0 10px; font-size: 12.5px; letter-spacing: .04em; }
  html[data-app] #overlay.app-mapas .menu .map-arrows .arrow { width: 38px; }
  html[data-app] .vitrine3d-modos button { padding: 0 4px; font-size: 11.5px; letter-spacing: .03em; white-space: nowrap; }
}
html[data-app] #overlay.app-mapas .menu .dif-lista { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); }

/* O ranking: cada tempo numa linha de contorno; o pódio com a medalha; a sua linha, dourada. */
html[data-app] #overlay.app-mapas .ranking li { border: 2px solid var(--contorno); border-radius: 10px; background: #241a40cc; box-shadow: inset 0 1px 0 #ffffff1f; }
html[data-app] #overlay.app-mapas .ranking li.eu { background: var(--vx-em-uso); box-shadow: inset 0 0 0 1.5px #ffcf4a; }
html[data-app] #overlay.app-mapas .ranking li .nome { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 6px; min-width: 0; overflow: visible; color: #fff; font: 800 1.12em/1.15 var(--vx-condensada); letter-spacing: .03em; text-overflow: clip; white-space: normal; }
html[data-app] #overlay.app-mapas .ranking li.eu .nome { color: var(--vx-titulo); }
html[data-app] #overlay.app-mapas .ranking li .tempo { font-family: var(--vx-condensada); font-size: 1.12em; font-weight: 800; letter-spacing: .04em; }
html[data-app] #overlay.app-mapas .ranking li .pico { color: var(--vx-apagado); font-family: var(--vx-condensada); font-weight: 700; }
html[data-app] #overlay.app-mapas .ranking li.podio b { width: 20px; height: 20px; border: 2px solid var(--contorno); font: 800 13px/1 var(--vx-condensada); }
html[data-app] #overlay.app-mapas .ranking li .autosync, html[data-app] #overlay.app-mapas .ranking li .impulso, html[data-app] #overlay.app-mapas .ranking li .continuou { border-width: 1.5px; border-radius: 999px; padding: 0 5px; }
html[data-app] #overlay.app-mapas .ranking li { grid-template-columns: 22px minmax(0, 1fr) auto auto 34px; padding-right: 8px; }
html[data-app] #overlay.app-mapas .ranking li .assistir-linha.bv-loja { width: 30px; height: 24px; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-cartao { overflow: hidden; border: 2.5px solid var(--contorno); border-radius: 12px; box-shadow: var(--vx-carta-sombra); }
html[data-app] #overlay.app-mapas .ranking > h3 em { color: var(--vx-claro); }
html[data-app] .bata-meu-tempo.bv-loja { height: 32px; font-size: 13px; }

/* O rosto desenhado enche a bolinha (o retrato de corpo inteiro, que era recortado, sai). */
html[data-app] .lobby-resultado-lista .rosto-desenho { border: 2px solid var(--contorno); border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--personagem, #b98cff) 55%, #2b2049), #150e26 85%); }
html[data-app] .lobby-resultado-lista .rosto-desenho img { position: static; width: 100%; height: 100%; padding: 3px 3px 0; box-sizing: border-box; transform: none; object-fit: contain; object-position: 50% 100%; }
html[data-app] .lobby-resultado-lista .rosto.rosto-desenho { width: 46px; height: 46px; }
/* O apelido inteiro, sem reticências (um nome antigo e largo quebra em duas linhas). */
/* O apelido aparece inteiro: sem reticências; um nome antigo e largo quebra em duas linhas. */

/* O fim de corrida. */
html[data-app] .fim-corrida { background: radial-gradient(ellipse at 50% 40%, #2a1a52f0, #07050cf7); }
html[data-app] .fim-titulo, html[data-app] .fim-corrida.recorde .fim-titulo, html[data-app] .fim-corrida[data-tipo="online"] .fim-titulo { color: var(--vx-titulo); text-shadow: 0 3px 0 #0009; }
html[data-app] .fim-corrida.recorde .fim-titulo { animation: vx-salta .5s cubic-bezier(.2, 1.6, .4, 1) .25s backwards; }
html[data-app] .fim-titulo img { width: 1.25em; height: 1.25em; margin: -.3em .2em -.3em 0; vertical-align: middle; filter: drop-shadow(0 2px 0 #00000080); animation: app-flutua 3s ease-in-out infinite; }
html[data-app] .fim-linha { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); animation: vx-carta-entra .32s cubic-bezier(.2, 1.3, .4, 1) backwards; }
html[data-app] .fim-linha:nth-child(2) { animation-delay: 90ms; }
html[data-app] .fim-linha:nth-child(3) { animation-delay: 180ms; }
html[data-app] .fim-linha > span { color: var(--vx-dourado); font: 800 13px/1 var(--vx-condensada); letter-spacing: .14em; }
html[data-app] .fim-linha em { color: var(--vx-claro); }
html[data-app] .fim-mapa-foto { border: 2.5px solid var(--contorno); border-radius: 10px; box-shadow: 0 3px 0 #000000a6; }
html[data-app] .fim-barra { height: 14px; border: 2px solid var(--contorno); background: #0f0a1c; box-shadow: 0 1px 0 #ffffff26; }
html[data-app] .fim-linha .fim-icone { width: 30px; height: 30px; margin: -4px 0; filter: drop-shadow(0 2px 0 #00000080); }
html[data-app] .fim-acoes { gap: 14px; }
/* A classificação da corrida online: cada lugar numa linha de contorno; a sua, dourada; o apelido inteiro. */
html[data-app] .fim-classificacao li { border: 2px solid var(--contorno); border-radius: 10px; background: #241a40cc; box-shadow: inset 0 1px 0 #ffffff1f; color: #fff; }
html[data-app] .fim-classificacao li.eu { background: var(--vx-em-uso); box-shadow: inset 0 0 0 1.5px #ffcf4a; }
html[data-app] .fim-classificacao li span { color: var(--vx-dourado); }
html[data-app] .fim-classificacao li b { overflow: visible; font: 800 15px/1.1 var(--vx-condensada); letter-spacing: .03em; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
html[data-app] .fim-classificacao li em { color: var(--vx-claro); font: 800 14px/1 var(--vx-condensada); letter-spacing: .04em; }
html[data-app] .fim-campeao { overflow: visible; max-width: 150%; border: 2px solid var(--contorno); border-radius: 999px; background: var(--painel); font-weight: 800; text-overflow: clip; }

/* A sala online (online.css): o fundo roxo, os botões de placa redonda, os cartões de contorno
   grosso, as escolhas em metades (a escolhida dourada) e o apelido inteiro na placa de cada um. */
html[data-app] .lobby {
  --lb-vidro: #0f0a1cb3; --lb-linha: #ffffff1f; --lb-linha-forte: #5b4a8c; --lb-muted: #cfc6e6; --lb-amber: #ffd76a;
  background: radial-gradient(ellipse at 50% 55%, #2a1a52 0%, #150e26 58%, #07050c 100%);
}
html[data-app] .lobby-rotulo { color: var(--vx-dourado); font: 800 11px/1.2 var(--vx-condensada); letter-spacing: .16em; }
html[data-app] .lobby-codigo { color: #fff; text-shadow: 0 2px 0 #0009; }
html[data-app] .lobby-chip { border: 2px solid var(--contorno); background: var(--painel); box-shadow: 0 2px 0 #000000a6; color: var(--vx-claro); font: 800 12.5px/1.2 var(--vx-condensada); letter-spacing: .06em; }
html[data-app] .lobby-btn { height: 36px; font: 800 13px/1 var(--vx-condensada); letter-spacing: .1em; text-shadow: 0 1px 0 #0008; transition: transform .1s ease; }
html[data-app] .lobby-btn::before, html[data-app] .lobby-btn:hover::before { transform: skewX(-7deg); border: 2.5px solid var(--contorno); border-radius: 9px; background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -4px 0 #150e26, 0 3px 0 var(--contorno); }
html[data-app] .lobby-btn:active { transform: translateY(3px); }
html[data-app] #lobbySair.lobby-btn { color: #ffb3a8; }
/* Cada vaga empilha de baixo para cima — a placa do apelido, a moldura (na proporção dela, 2:3, do
   tamanho que couber) e, colado em cima dela, o estado (Pronto, Escolhendo). Antes o estado ficava
   preso no alto da vaga: com quatro numa tela de celular a moldura é limitada pela largura, fica
   mais baixa que a vaga, e sobrava um vão entre os dois. A folga que houver vai para cima de tudo.
   (O palco 3D mede a moldura na tela: o boneco continua do mesmo tamanho, no mesmo lugar.) */
html[data-app] .lobby-vaga { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-top: 2px; }
html[data-app] .lobby-vaga > .lobby-estado { position: static; flex: none; margin-bottom: 5px; }
html[data-app] .lobby-vaga > .lobby-figura { flex: 0 1 auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 2 / 3; }
html[data-app] .lobby-vaga > .lobby-placa { flex: none; }
/* Cada jogador: o estado em cima (uma pílula) e a placa com o apelido embaixo. */
html[data-app] .lobby-estado { border: 2px solid var(--contorno); border-radius: 999px; background: var(--painel); box-shadow: 0 2px 0 #000000a6; color: var(--vx-claro); font-weight: 800; }
html[data-app] .lobby-estado.pronto, html[data-app] .lobby-estado.chegou { border-color: var(--contorno); background: #12301f; box-shadow: inset 0 0 0 1.5px #3ddc77, 0 2px 0 #000000a6; color: var(--vx-verde-claro); }
html[data-app] .lobby-estado.livre { border-color: var(--contorno); background: #3a2a0a; color: var(--vx-dourado); }
html[data-app] .lobby-estado.jogando { border-color: var(--contorno); background: #0c2a3a; color: #8fe2ff; }
html[data-app] .lobby-placa { gap: 4px; width: 100%; max-width: 190px; padding: 0 6px; border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--painel); box-shadow: inset 0 3px 0 var(--cor), 0 3px 0 #000000a6; }
/* (A regra .lobby-vaga.eu .lobby-placa do online.css ganhava na especificidade: a placa do próprio
   nome ficava estreita e sem fundo, menor que as outras — 23/10/2026.) */
html[data-app] .lobby-vaga.eu .lobby-placa { width: 100%; padding: 0 6px; border: 2.5px solid var(--contorno); background: var(--painel); box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 14px #ffb00059, 0 3px 0 #000000a6; }
/* O apelido inteiro, sem reticências: a letra acompanha a largura da tela (uma sala de quatro num
   celular tem placas estreitas, e ali o desenho do aparelho dá lugar ao nome); um nome antigo e
   largo quebra em duas linhas. */
html[data-app] .lobby-placa b { min-width: 0; overflow: visible; font-size: clamp(10.5px, 1.6vw, 19px); font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; text-align: center; text-overflow: clip; white-space: normal; }
@media (max-width: 1000px) {
  html[data-app] .lobby-placa .lobby-aparelho { display: none; }
  /* A coroa do líder vai para o canto da placa: o apelido fica com a largura toda. */
  html[data-app] .lobby-placa .lobby-coroa { position: absolute; left: -5px; top: -11px; font-size: 13px; filter: drop-shadow(0 1px 0 #000); }
}
html[data-app] .lobby-chat input { font-size: 13px; }
/* As opções de outro jogador (o ⋯): no canto de cima da placa dele, sem invadir a placa do vizinho. */
html[data-app] .lobby-opcoes, html[data-app] .lobby-vaga:not(.livre) .lobby-opcoes { top: -14px; right: -7px; translate: none; border: 2px solid var(--contorno); background: var(--vx-placa-roxa); box-shadow: 0 2px 0 #000000a6; color: #fff; }
/* A partida (mapa, formato, aparelhos) e a conversa: cartões; as escolhas, em metades. */
html[data-app] .lobby-partida, html[data-app] .lobby-chat { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] .lobby-partida h2 { color: var(--vx-titulo); font-weight: 800; text-shadow: 0 2px 0 #0009; }
html[data-app] .lobby-mapa { border: 2.5px solid var(--contorno); border-radius: 10px; }
html[data-app] .lobby-mapa:not(:disabled):hover { border-color: #ffcf4a; }
html[data-app] .lobby-mapa b { font-weight: 800; }
html[data-app] .lobby-seg { border: 2.5px solid var(--contorno); border-radius: 10px; background: #0f0a1ccc; box-shadow: 0 2px 0 #000000a6; }
html[data-app] .lobby-seg button { padding: 6px 3px; color: var(--vx-claro); font: 800 12px/1.1 var(--vx-condensada); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
html[data-app] .lobby-seg button + button { border-left: 2.5px solid var(--contorno); }
html[data-app] .lobby-seg button[aria-pressed="true"] { background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00; color: #2a1200; text-shadow: 0 1px 0 #ffffff8c; }
html[data-app] .lobby-chat input { border-top: 2.5px solid var(--contorno); background: #0f0a1ccc; color: #fff; }
html[data-app] #lobby .caixa-inclinada { transform: none; border: 2.5px solid var(--contorno); border-radius: 10px; background: #0f0a1ccc; box-shadow: inset 0 2px 4px #0008; }
html[data-app] #lobby .caixa-inclinada > * { transform: none; }
html[data-app] #lobby .caixa-inclinada::before, html[data-app] #lobby .caixa-inclinada::after { display: none; }
/* Os personagens para escolher: cartas; o meu, dourado. (Em tela baixa a carta é só o retrato.) */
html[data-app] .lobby-carta { border: 2.5px solid var(--contorno); border-radius: 10px; box-shadow: 0 3px 0 #000000a6; }
html[data-app] .lobby-carta.minha { border-color: #ffcf4a; box-shadow: 0 0 0 2.5px var(--contorno), 0 0 14px #ffb00073; }
/* Com o rosto desenhado, ele enche a carta (o retrato de corpo inteiro era recortado). */
html[data-app] .lobby-carta.com-rosto { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cor) 50%, #2b2049), #150e26 85%); }
html[data-app] .lobby-carta.com-rosto img { position: absolute; left: 3px; top: 4px; width: calc(100% - 6px); height: calc(100% - 26px); transform: none; object-fit: contain; object-position: 50% 50%; }
html[data-app] .lobby-carta.com-rosto.tomada { background: #150e26; }
html[data-app] .lobby-carta span { padding: 3px 4px; background: #120a1cd9; font: 800 11.5px/1.1 var(--vx-condensada); letter-spacing: .03em; overflow-wrap: anywhere; text-align: center; text-overflow: clip; white-space: normal; }
@media (max-height: 520px) {
  /* No celular a carta é só o rosto: um quadrado de canto redondo, do tamanho do dedo, sem encolher
     (a conversa cede a largura). O nome do personagem fica na dica da carta. */
  html[data-app] .lobby-carta span { display: none; }
  /* Cinco personagens à vista, do tamanho do dedo; os outros vêm passando o dedo na fileira, que
     para sempre numa carta inteira (src/online.js guarda onde ela estava e apaga as beiradas de
     que há mais). A conversa fica com o resto da largura. (Eram todos divididos na fileira: com
     treze personagens viraram bolinhas e a conversa, uma fresta — pedido de 22/10/2026.) */
  html[data-app] .lobby { --lb-carta: 50px; --lb-vao: 6px; }
  html[data-app] .lobby-tela { gap: 10px; }
  /* As vagas na altura do palco: a moldura encolhe o que precisar (sem isto a fileira crescia com
     ela, e as placas desciam por cima da conversa). */
  html[data-app] .lobby-palco { grid-template-rows: minmax(0, 1fr); }
  html[data-app] .lobby-base { grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; }
  html[data-app] .lobby-chat { height: 84px; }
  html[data-app] .lobby-chat ol { padding: 4px 10px 2px; font-size: 12px; }
  html[data-app] .lobby-chat > .caixa-inclinada { height: 30px; margin: 2px 6px 6px; }
  html[data-app] .lobby-cartas { box-sizing: content-box; width: calc(5 * var(--lb-carta) + 4 * var(--lb-vao)); gap: var(--lb-vao); padding: 4px 4px 5px; margin-inline: -4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; }
  html[data-app] .lobby-cartas::-webkit-scrollbar { display: none; }
  html[data-app] .lobby-cartas.mais-depois { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), #0000); }
  html[data-app] .lobby-cartas.mais-antes { mask-image: linear-gradient(90deg, #0000, #000 22px); }
  html[data-app] .lobby-cartas.mais-antes.mais-depois { mask-image: linear-gradient(90deg, #0000, #000 22px, #000 calc(100% - 22px), #0000); }
  html[data-app] .lobby-carta.com-rosto { flex: 0 0 var(--lb-carta); width: var(--lb-carta); height: var(--lb-carta); border-radius: 12px; scroll-snap-align: start; }
  html[data-app] .lobby-carta.com-rosto img { left: 2px; top: 3px; width: calc(100% - 4px); height: calc(100% - 3px); object-position: 50% 100%; }
  html[data-app] .lobby-carta:not(:disabled):hover { transform: none; }
  /* A partida: o título por cima do alto do mapa (como o nome do mapa embaixo), o nome de cada
     escolha ao lado dela, não em cima, e o mapa fica com a altura que sobra (maior que a faixa de
     antes, sem esconder as escolhas). */
  html[data-app] .lobby-partida { position: relative; gap: 5px; }
  html[data-app] .lobby-partida > h2 { position: absolute; z-index: 1; top: 10px; left: 12px; right: 12px; padding: 5px 8px 14px; border-radius: 8px 8px 0 0; background: linear-gradient(#000000c0, #0000); pointer-events: none; }
  html[data-app] .lobby-partida > .lobby-mapa { flex: 1 1 0; min-height: 64px; max-height: 140px; }
  html[data-app] .lobby-partida > .lobby-mapa img { position: absolute; inset: 0; height: 100%; }
  html[data-app] .lobby-partida > .lobby-campo:not([hidden]) { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 6px; }
  html[data-app] .lobby-partida > .lobby-campo > .lobby-rotulo { font-size: 9px; line-height: 1.1; overflow-wrap: anywhere; }
  html[data-app] .lobby-partida .lobby-seg button { padding-block: 5px; }
}
/* Celular estreito: as cartas um pouco menores, para a conversa caber com a dica inteira. */
@media (max-height: 520px) and (max-width: 780px) {
  html[data-app] .lobby { --lb-carta: 46px; }
}
/* O Pronto / Iniciar partida: o JOGAR da sala. */
html[data-app] .lobby-pronto { color: #2a1200; font-weight: 800; letter-spacing: .12em; text-shadow: 0 1px 0 #ffffff8c; transition: transform .1s ease; }
html[data-app] .lobby-pronto::before, html[data-app] .lobby-pronto:hover:not(:disabled)::before { transform: skewX(-9deg); border: 3px solid var(--contorno); border-radius: 12px; background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -5px 0 #b54d00, 0 4px 0 var(--contorno), 0 8px 16px #000b, 0 0 22px #ff9a0059; }
html[data-app] .lobby-pronto:active:not(:disabled) { transform: translateY(3px); }
html[data-app] .lobby-pronto.cancelar { color: #fff; text-shadow: 0 1px 0 #0006; }
html[data-app] .lobby-pronto.cancelar::before, html[data-app] .lobby-pronto.cancelar:hover:not(:disabled)::before { background: var(--vx-placa-vermelha); box-shadow: inset 0 2px 0 #ffffff80, inset 0 -5px 0 #7a0b12, 0 4px 0 var(--contorno), 0 8px 16px #000b; }
html[data-app] .lobby-pronto:disabled { color: #2a1200b3; text-shadow: none; }
html[data-app] .lobby-aviso { color: var(--vx-claro); }
/* As janelas da sala: o resultado da corrida, a troca de mapa e as opções de um jogador. */
html[data-app] .lobby-resultado, html[data-app] .lobby-mapas, html[data-app] .lobby-jogador { background: radial-gradient(ellipse at 50% 46%, #1a0f33e6, #05030af5); }
html[data-app] .lobby-resultado-caixa, html[data-app] .lobby-mapas-caixa, html[data-app] .lobby-jogador-caixa { border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); animation: app-folha-pula .22s cubic-bezier(.2, 1.3, .4, 1); }
html[data-app] .lobby-resultado-caixa h3, html[data-app] .lobby-mapas-caixa h3 { color: var(--vx-titulo); font-weight: 800; text-shadow: 0 2px 0 #0009; }
html[data-app] .lobby-resultado-lista li { border: 2px solid var(--contorno); border-radius: 10px; background: #241a40cc; box-shadow: inset 0 1px 0 #ffffff1f; }
html[data-app] .lobby-resultado-lista li.eu { border-color: var(--contorno); background: var(--vx-em-uso); box-shadow: inset 0 0 0 1.5px #ffcf4a; }
html[data-app] .lobby-resultado-lista b { overflow: visible; font-weight: 800; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
html[data-app] .lobby-resultado-lista .tempo { font: 800 18px/1 var(--vx-condensada); letter-spacing: .04em; }
/* A troca de mapa da sala (cartas, a escolhida dourada) e as opções de um jogador (silenciar, denunciar, remover). */
html[data-app] .lobby-mapa-op { border: 2.5px solid var(--contorno); border-radius: 12px; box-shadow: var(--vx-carta-sombra); transition: transform .1s ease; }
html[data-app] .lobby-mapa-op:active { transform: translateY(2px); }
html[data-app] .lobby-mapa-op.atual { border-color: #ffcf4a; box-shadow: 0 0 0 2.5px var(--contorno), 0 0 16px #ffb00073; }
html[data-app] .lobby-mapa-op b { font-weight: 800; }
html[data-app] .lobby-jogador-caixa h3 { color: var(--vx-titulo); font-weight: 800; text-shadow: 0 2px 0 #0009; }
html[data-app] .lobby-jogador-acoes button { border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #150e26, 0 2px 0 var(--contorno); color: #fff; font: 800 14px/1.2 var(--vx-condensada); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
html[data-app] .lobby-jogador-acoes button:active { transform: translateY(2px); }
html[data-app] .lobby-jogador-acoes button.perigo { border-color: var(--contorno); color: #ffb3a8; }
html[data-app] .lobby-amigos { border: 2.5px solid var(--contorno); border-radius: 14px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); }
html[data-app] .lobby-amigos h3 { color: var(--vx-titulo); font-weight: 800; }

/* Assistir (o replay de uma corrida) e a janela do clipe. */
html[data-app] .assistir-topo, html[data-app] .assistir-barra { border: 2.5px solid var(--contorno); border-radius: 12px; background: #171029e6; box-shadow: var(--painel-sombra); }
html[data-app] .assistir-rotulo { color: var(--vx-dourado); font: 800 12px/1.2 var(--vx-condensada); letter-spacing: .14em; }
html[data-app] .assistir-topo strong { font-weight: 800; }
html[data-app] .assistir-mapa { color: var(--vx-claro); }
html[data-app] .assistir-vel, html[data-app] .assistir-tempo { color: var(--vx-dourado); font: 800 14px/1 var(--vx-condensada); letter-spacing: .04em; }
html[data-app] .assistir-dica { border: 2px solid var(--contorno); border-radius: 999px; background: #171029cc; color: var(--vx-claro); }
html[data-app] .assistir-botao { border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #150e26, 0 2px 0 var(--contorno); color: #fff; font: 800 14px/1 var(--vx-condensada); letter-spacing: .06em; transition: transform .1s ease; }
html[data-app] .assistir-botao:active { transform: translateY(2px); }
html[data-app] .assistir-botao.destaque { border-color: var(--contorno); background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00, 0 2px 0 var(--contorno); color: #2a1200; text-shadow: 0 1px 0 #ffffff8c; }
html[data-app] #assistirLinha { accent-color: #ffb000; }
html[data-app] .clipe { border: 2.5px solid #120a1c; border-radius: 16px; background: linear-gradient(180deg, #2b2049, #150e26); box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6; color: #d9d2ee; }
html[data-app] .clipe::backdrop { background: radial-gradient(ellipse at 50% 46%, #1a0f33e6, #05030af5); }
html[data-app] .clipe h2 { color: var(--vx-titulo); font-weight: 800; letter-spacing: .05em; text-shadow: 0 2px 0 #0009; text-transform: uppercase; }
html[data-app] .clipe-opcao { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); transition: transform .1s ease; }
html[data-app] .clipe-opcao:hover, html[data-app] .clipe-opcao:focus-visible { border-color: #ffcf4a; }
html[data-app] .clipe-opcao:active { transform: translateY(2px); }
html[data-app] .clipe-opcao b { font-weight: 800; }
html[data-app] .clipe-opcao small, html[data-app] .clipe-aviso { color: var(--vx-claro); }
html[data-app] .clipe-tela canvas, html[data-app] .clipe-tela video { border: 2.5px solid var(--contorno); border-radius: 12px; }
html[data-app] .clipe-progresso { height: 12px; accent-color: #ffb000; }
html[data-app] .clipe-acao { border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--vx-placa-roxa); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #150e26, 0 2px 0 var(--contorno); color: #fff; font: 800 14px/1 var(--vx-condensada); letter-spacing: .08em; text-transform: uppercase; }
html[data-app] .clipe-acao:active { transform: translateY(2px); }
html[data-app] .clipe-acao.destaque { border-color: var(--contorno); background: var(--vx-placa-ouro); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00, 0 2px 0 var(--contorno); color: #2a1200; text-shadow: 0 1px 0 #ffffff8c; }

/* ---------- 8. A pergunta e os avisos ---------- */
/* A pergunta de sim ou não (src/perguntar.js). */
.app-pergunta { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 46%, #1a0f33e6, #05030af5); animation: app-folha .14s ease-out; }
.app-pergunta[hidden] { display: none; }
.app-pergunta-caixa { display: grid; justify-items: center; gap: 12px; width: min(440px, 100%); padding: 16px 18px 18px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 16px; background: var(--vx-folha, #20173a); box-shadow: var(--vx-folha-sombra, 0 6px 0 #000a); animation: app-folha-pula .22s cubic-bezier(.2, 1.3, .4, 1); }
.app-pergunta-icone { width: 56px; height: 56px; margin: -4px 0 -6px; filter: drop-shadow(0 3px 0 #00000080); animation: app-flutua 3s ease-in-out infinite; }
.app-pergunta-caixa p { margin: 0; color: #fff; font: 700 17px/1.35 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; }
.app-pergunta-acoes { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px; width: 100%; padding: 0 6px 3px; }
.app-pergunta-acoes .bv-loja, .app-pergunta-acoes .bv-sair { width: 100%; height: 42px; justify-content: center; }
/* O aviso que passa por cima das telas, o "+N Vectors" e a conquista da moldura. */
html[data-app] .aviso-flutuante { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--painel); box-shadow: var(--painel-sombra); color: #fff; font: 700 14px/1.35 var(--vx-condensada); letter-spacing: .03em; }
html[data-app] #overlay #message { border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--painel); box-shadow: var(--painel-sombra); color: #fff; }
html[data-app] .vectors-ganho { border: 2.5px solid var(--contorno); background: var(--painel); box-shadow: var(--painel-sombra); }
html[data-app] .conquista { border: 2.5px solid var(--contorno); border-radius: 14px; background: var(--painel); box-shadow: inset 0 0 0 1.5px #ffcf4a99, 0 4px 0 #000000a6, 0 0 26px #ffb00040; }
html[data-app] .conquista small { color: var(--vx-dourado); font: 800 12px/1.2 var(--vx-condensada); letter-spacing: .1em; text-transform: uppercase; }
html[data-app] .conquista strong { color: #fff; font: 800 19px/1.15 var(--vx-condensada); letter-spacing: .03em; }
html[data-app] .conquista-texto > span { color: var(--vx-claro); }
html[data-app] .aviso-amigo { border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--painel); box-shadow: var(--painel-sombra); color: #fff; }
html[data-app] .atualizar-app { background: radial-gradient(ellipse at 50% 46%, #1a0f33e6, #05030af5); }
html[data-app] .atualizar-app-caixa { border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); }
html[data-app] .atualizar-app-caixa strong { color: var(--vx-titulo); }
html[data-app] .atualizar-app-caixa p { color: var(--vx-claro); }
/* As Novidades: a folha do app, título dourado e o botão de jogar dourado. No app, elas ficam no
   menu: o botão do rodapé (que vai para o Sobre) sai. */
html[data-app] .rodape-novidades { display: none; }
/* O painel do dono do jogo, na folha do app. */
html[data-app] .painel { background: radial-gradient(ellipse at 50% 46%, #1a0f33f2, #05030afa); }
html[data-app] .painel-caixa { border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); }
html[data-app] .painel-cabeca strong { color: var(--vx-titulo); font-family: var(--vx-condensada); text-shadow: 0 2px 0 #000000a6; }
html[data-app] .painel-cartao { background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] .painel-cartao h3 { color: var(--vx-dourado); font-family: var(--vx-condensada); }
html[data-app] .painel-numero, html[data-app] .painel-lista li { background: #0000004d; }
html[data-app] .painel-atualizar { height: 38px; padding: 0 16px; }
html[data-app] .novidades { background: radial-gradient(ellipse at 50% 46%, #1a0f33e6, #05030af5); }
html[data-app] .novidades-caixa { border: 2.5px solid var(--contorno); border-radius: 16px; background: var(--vx-folha); box-shadow: var(--vx-folha-sombra); }
html[data-app] .novidades-cabeca strong { color: var(--vx-titulo); font-family: var(--vx-condensada); text-shadow: 0 2px 0 #000000a6; }
html[data-app] .novidades-cabeca small, html[data-app] .novidades-nota h3 { color: var(--vx-dourado); font-family: var(--vx-condensada); }
html[data-app] .novidades-nota p { color: var(--vx-claro); }
html[data-app] .novidades-nota li { padding: 8px 10px; border-radius: 10px; background: var(--vx-carta); box-shadow: var(--vx-carta-sombra); }
html[data-app] .novidades-nota ul { gap: 8px; }
/* A sombra da última carta não fica cortada rente à borda da lista. */
html[data-app] .novidades-lista { padding-bottom: 6px; }
html[data-app] .novidades-fechar { height: 44px; padding: 0 24px; }

/* ---------- 9. Os efeitos ----------
   Os do lobby, nas telas: a poeira dourada que sobe (src/efeitos-menu.js liga quando há uma
   tela aberta), a aura atrás do título, as cartas que entram uma depois da outra, a marca que
   salta. Leves: só transform e opacity; com "reduzir movimento", nada se mexe. */
@keyframes vx-aura { 0%, 100% { opacity: .6; scale: .96 1; } 50% { opacity: 1; scale: 1.06 1; } }
@keyframes vx-carta-entra { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes vx-marca-entra { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }
@keyframes vx-salta { 0% { transform: scale(.86); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes vx-carimbo { from { opacity: 0; transform: scale(1.5) rotate(-8deg); } }
@keyframes vx-poeira { 0% { transform: translate(0, 0); opacity: 0; } 14% { opacity: var(--o, .7); } 70% { opacity: calc(var(--o, .7) * .5); } 100% { transform: translate(var(--v, 16px), -62vh); opacity: 0; } }
/* As cartas entram em sequência (as oito primeiras; o resto, juntas). */
html[data-app] .loja-grade > .loja-carta, html[data-app] #settingsPanel .facas-grade > *, html[data-app] #settingsPanel .escolha-grade > *, html[data-app] .app-moldura-carta, html[data-app] .app-modo-op, html[data-app] .app-menu-op {
  animation: vx-carta-entra .3s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
html[data-app] :is(.loja-grade, .facas-grade, .escolha-grade, .app-menu-lista, .app-molduras) > :nth-child(2), html[data-app] .app-modo-op:nth-of-type(2) { animation-delay: 35ms; }
html[data-app] :is(.loja-grade, .facas-grade, .escolha-grade, .app-menu-lista, .app-molduras) > :nth-child(3), html[data-app] .app-modo-op:nth-of-type(3) { animation-delay: 70ms; }
html[data-app] :is(.loja-grade, .facas-grade, .escolha-grade, .app-molduras) > :nth-child(4) { animation-delay: 105ms; }
html[data-app] :is(.loja-grade, .facas-grade, .escolha-grade, .app-molduras) > :nth-child(5) { animation-delay: 140ms; }
html[data-app] :is(.loja-grade, .facas-grade, .escolha-grade, .app-molduras) > :nth-child(6) { animation-delay: 175ms; }
html[data-app] :is(.loja-grade, .facas-grade, .escolha-grade) > :nth-child(n + 7) { animation-delay: 210ms; }
/* A poeira dourada por cima das telas abertas. */
.vx-efeitos { display: none; }
html[data-app][data-menu-aberto] .vx-efeitos { display: block; position: fixed; inset: 0; z-index: 128; overflow: hidden; pointer-events: none; }
.vx-efeitos i { position: absolute; left: var(--x); bottom: 4%; width: var(--t, 3px); height: var(--t, 3px); border-radius: 50%; background: var(--c, #ffd98a); box-shadow: 0 0 6px 1px var(--b, #ffb00099); opacity: 0; will-change: transform, opacity; animation: vx-poeira var(--d, 10s) linear var(--a, 0s) infinite; }
@media (prefers-reduced-motion: reduce) {
  html[data-app] #overlay .menu > .panel, html[data-app] #overlay .menu > .picker, html[data-app] .vitrine3d-caixa, .app-pergunta, .app-pergunta-caixa,
  html[data-app] .loja-grade > *, html[data-app] #settingsPanel .facas-grade > *, html[data-app] #settingsPanel .escolha-grade > *, html[data-app] .app-moldura-carta, html[data-app] .app-modo-op, html[data-app] .app-menu-op,
  html[data-app] .app-titulo-icone, html[data-app] .loja-categoria, html[data-app] .loja-categoria img, html[data-app] .app-modo-op img, html[data-app] .app-encontrada-jogador, html[data-app] .fim-linha, html[data-app] .fim-titulo, html[data-app] .fim-titulo img,
  .expositor-kit-peca, .expositor-parede img, .app-pergunta-icone, html[data-app] .bv-loja::after,
  html[data-app] #overlay .menu > .panel::before, html[data-app] .app-folha-caixa::before, html[data-app] .app-pergunta-caixa::before,
  .loja-carta::after, html[data-app] #settingsPanel .faca-miniatura::after, html[data-app] #settingsPanel .carta-escolha::after { animation: none !important; }
  .vx-efeitos { display: none !important; }
}

/* Os pacotes de Vectors (src/main.js cartaDoPacote): um desenho por pacote (moeda, maleta, mala cheia,
   monte, baú), todos do mesmo tamanho e inteiros dentro da foto; o selo é o bônus. */
.loja-carta--pacote .loja-carta-foto { display: grid; place-items: center; padding: 0; }
.loja-carta--pacote .loja-carta-foto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px #0008); }
.loja-carta--pacote .loja-carta-desconto { background: linear-gradient(180deg, #7dff9a, #19b84a); color: #04210f; }

/* A tela de amigos com abas (src/amigos.js, 28/10/2026): Amigos, Pedidos (com o selo) e Recomendados,
   e a linha de chamar gente nova (WhatsApp e compartilhar). */
html[data-app] .amigos-abas { display: flex; gap: 6px; margin: 4px 0 8px; }
html[data-app] .amigos-abas button { position: relative; flex: 1; min-height: 38px; padding: 4px 10px; border: 2.5px solid var(--contorno, #120c22); border-radius: 12px; background: var(--vx-placa-roxa, linear-gradient(#6a58a6, #241a40)); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #160f2a; color: var(--vx-claro, #e7dcff); font: 800 14px/1 var(--vx-condensada, "Barlow Condensed", sans-serif); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 0 #0009; cursor: pointer; }
html[data-app] .amigos-abas button[aria-selected="true"] { background: var(--vx-placa-ouro, linear-gradient(#ffd84a, #ff9a1a)); color: #2a1200; text-shadow: none; box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00; }
html[data-app] .amigos-conta { margin-left: 4px; opacity: .75; font-weight: 700; }
html[data-app] .amigos-selo { position: absolute; top: -8px; right: -6px; min-width: 20px; padding: 2px 6px; border: 2px solid var(--contorno, #120c22); border-radius: 999px; background: #ff3b4e; color: #fff; font: 800 12px/1.1 var(--vx-condensada, sans-serif); }
html[data-app] .amigos-selo[hidden] { display: none; }
html[data-app] .amigos-compartilhar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 8px 6px 12px; border: 2px solid var(--contorno, #120c22); border-radius: 12px; background: #0b0816b3; color: var(--vx-claro, #e7dcff); font: 700 13px/1.2 var(--vx-condensada, sans-serif); }
html[data-app] .amigos-compartilhar span { flex: 1; min-width: 0; }
html[data-app] .amigos-compartilhar button { display: grid; place-items: center; width: 40px; height: 34px; border: 2.5px solid var(--contorno, #120c22); border-radius: 10px; cursor: pointer; box-shadow: inset 0 2px 0 #ffffff80, inset 0 -3px 0 #0006; }
html[data-app] .amigos-compartilhar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-app] .amigos-whatsapp { background: linear-gradient(#5fe07f, #1fa851); color: #fff; }
html[data-app] .amigos-whatsapp svg path:last-child { fill: currentColor; stroke: none; }
html[data-app] .amigos-partilhar { background: linear-gradient(#ffc04a, #ff8a1a); color: #2a1200; }
html[data-app] .amigos-aba[hidden] { display: none; }