/* Lobby do aplicativo (src/lobby-app.js). Tudo aqui vale só dentro do app
   (html[data-app]): o site, no computador ou no navegador do celular, não muda.
   O lobby ocupa a tela inteira, sem rolagem; os painéis do site (Loja, Ajustes,
   Online) e o carrossel de mapas abrem por cima dele, cada um com o seu X. */

html[data-app] #overlay { overflow: hidden; background: #07080b; }
html[data-app] #overlay::before, html[data-app] #overlay::after { display: none; }
/* O que é de página de site sai: topo, banner, faixa do mapa e rodapé. */
html[data-app] #overlay .menu > .topo,
html[data-app] #overlay .menu > .hero,
html[data-app] #overlay .rodape { display: none !important; }
html[data-app] #overlay .menu { position: static; width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-app] #overlay:not(.app-mapas) .menu > .picker { display: none; }
html[data-app] #overlay #message:empty { display: none; }
html[data-app] #overlay #message {
  position: fixed; z-index: 25; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px); translate: -50% 0; max-width: 80vw;
  margin: 0; padding: 8px 14px; border: 1px solid #ffb00066; border-radius: 6px; background: #0b0e13f0; color: var(--ink); font-size: 13px; text-align: center;
}

/* ---------- O lobby ----------
   Quatro camadas, de trás para a frente: o cenário (.app-cenario: o galpão de largada, com o
   mapa escolhido aparecendo pelo portão), o personagem em pé na plataforma (.app-palco, onde
   mora a tela 3D de src/palco-3d.js), a poeira no ar (.app-poeira) e a interface (o topo, as
   laterais e a base). O que se mexe sozinho é enfeite; nada abre nem joga sem toque. */
.app-lobby {
  --app-margem: 12px;
  --contorno: #120a1c;
  /* O painel escuro de todo botão da tela: contorno grosso, luz em cima, degrau embaixo. */
  --painel: linear-gradient(180deg, #2b2049, #171029);
  --painel-sombra: inset 0 1px 0 #ffffff33, inset 0 -3px 0 #00000059, 0 4px 0 #000000a6;
  --tela-h: 100vh; --tela-w: 100vw;
  /* A altura do cenário: a da tela — ou mais, na tela mais larga que a arte (2,334 : 1), que
     então corta em cima. Tudo o que pisa no chão (o personagem, as vagas) mede por ela. */
  --cena-h: max(var(--tela-h), calc(var(--tela-w) / 2.3337));
  /* A linha dos pés, contada do pé da tela (o chão da arte vai até 31% da altura dela). */
  --chao: calc(var(--cena-h) * .2);
  --topo-h: 52px;
  /* O ícone das laterais cabe três vezes entre o topo e as estrelas do dia, em qualquer altura. */
  --orcamento: 222px;
  --atalho: clamp(38px, calc((var(--tela-h) - var(--orcamento)) / 3 - 15px), 88px);
  /* O azulejo dos equipamentos: pela largura da tela, mas sem a grade deles (duas fileiras) subir
     além dos pés de quem fica na vaga de trás, à esquerda (a 27,5% da altura). */
  --item: clamp(50px, min(7.6vw, calc((var(--tela-h) * .275 - 22px) / 1.4)), 74px);
  --estrela: 38px;
  position: fixed; inset: 0; z-index: 1; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo topo topo" "esq . dir" "base base base";
  gap: 6px var(--app-margem);
  padding: max(8px, env(safe-area-inset-top)) max(var(--app-margem), env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(var(--app-margem), env(safe-area-inset-left));
  color: var(--ink); font-family: Barlow, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none;
}
/* O lobby ocupa a tela toda: a altura certa é a que sobra de verdade (sem as barras do navegador, quando há). */
@supports (height: 100dvh) { .app-lobby { --tela-h: 100dvh; } }
.app-lobby button { -webkit-tap-highlight-color: transparent; font-family: inherit; }

/* ---------- Camada 1: o cenário ---------- */
.app-cenario { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0b0714; pointer-events: none; }
/* A arte inteira, do tamanho certo e apoiada embaixo, no meio: o que sobra dos lados é cortado. */
.app-cena { position: absolute; left: 50%; bottom: 0; width: calc(var(--cena-h) * 2.3337); height: var(--cena-h); translate: -50% 0; }
/* O portão (a parte vazada da arte: de 31,6% a 68,4% da largura, de 15,2% a 69,1% da altura).
   Por ele aparece a foto do mapa escolhido, que passeia devagar atrás da parede. */
.app-vista { position: absolute; left: 31%; top: 14.4%; width: 38%; height: 55.4%; overflow: hidden; background: #1a1026; }
.app-fundo { position: absolute; left: -7%; top: -7%; width: 114%; height: 114%; object-fit: cover; filter: blur(.7px) saturate(1.25) contrast(1.06); will-change: transform; animation: app-vista 28s ease-in-out infinite alternate; }
.app-fundo:not([src]), .app-fundo[src=""] { visibility: hidden; }
/* O portão tem fundo. Entre a parede e a foto do mapa fica a passagem: as quatro faces de dentro
   dela — o teto, as duas paredes e a rampa —, desenhadas em perspectiva para o ponto de fuga do
   cenário (o meio do portão, à altura dos olhos: 50% × 64,3% da abertura). É o gradiente cônico
   que as separa: as divisas dele passam pelos quatro cantos, como as quinas de um corredor visto
   de frente, e levam os fios de luz do chão. A foto sobra só no retângulo do fundo (de 7% a 93%
   da largura, de 9% a 95% da altura), com a boca da passagem escurecendo em volta dela — o mapa
   fica lá fora, depois da parede, e não colado nela. */
.app-tunel { position: absolute; inset: 0; }
.app-tunel::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 7% 9%, 7% 95%, 93% 95%, 93% 9%, 7% 9%);
  background:
    linear-gradient(90deg, #ffb05580 0%, #ffb0551f 3.5%, transparent 7%, transparent 93%, #ffb0551f 96.5%, #ffb05580 100%),
    linear-gradient(180deg, #05030c 0%, transparent 16%),
    conic-gradient(from 0deg at 50% 64.3%, #120b1e 0deg 50.9deg, #4a3760 50.9deg 51.5deg, #2a1b22 51.5deg 113.6deg, #ffc56a 113.6deg 114.5deg, #5d3b1c 114.5deg 245.5deg, #ffc56a 245.5deg 246.4deg, #2a1b22 246.4deg 308.5deg, #4a3760 308.5deg 309.1deg, #120b1e 309.1deg 360deg);
}
/* A boca da passagem: sombra para fora (o fundo das faces é mais escuro) e para dentro (a borda da foto some no escuro). */
.app-tunel::after { content: ""; position: absolute; inset: 9% 7% 5% 7%; outline: calc(var(--cena-h) * .003) solid #6b527f66; box-shadow: 0 0 calc(var(--cena-h) * .03) calc(var(--cena-h) * .008) #05030cd9, inset 0 0 calc(var(--cena-h) * .04) calc(var(--cena-h) * .004) #05030cbf; }
/* A claridade que entra pela soleira: uma névoa quente rente ao chão, que apaga a linha onde a foto encontra a rampa. */
.app-soleira { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: radial-gradient(ellipse 58% 100% at 50% 100%, #ffd9a25c, transparent 72%), linear-gradient(0deg, #ffb65c6b 0%, #ffb65c2b 26%, transparent 100%); }
/* A porta de enrolar, recolhida no alto: as lâminas e a barra de faixas amarelas e pretas, como as colunas do portão. */
.app-persiana {
  position: absolute; left: 0; right: 0; top: 0; height: 12.5%;
  background:
    repeating-linear-gradient(-55deg, #ffb000 0 calc(var(--cena-h) * .022), #1b1306 calc(var(--cena-h) * .022) calc(var(--cena-h) * .044)) bottom / 100% 26% no-repeat,
    repeating-linear-gradient(180deg, #3b3049 0 calc(var(--cena-h) * .011), #1f1829 calc(var(--cena-h) * .011) calc(var(--cena-h) * .014));
  box-shadow: 0 calc(var(--cena-h) * .004) 0 #0a0612, 0 calc(var(--cena-h) * .02) calc(var(--cena-h) * .04) #05030cd9;
}
/* A claridade de quem olha de dentro para fora: escuro em cima, luz quente na soleira. */
.app-vista::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 62%, #ffe3b01f, transparent 72%), linear-gradient(180deg, #160b2899 0%, transparent 34%, transparent 66%, #ffb65c66 100%); box-shadow: inset 0 0 26px 6px #0c0616; }
.app-parede { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Os fachos que saem do portão e a poça de luz no chão: acendem e apagam cada um no seu tempo. */
.app-facho { position: absolute; top: 15%; height: 74%; transform-origin: 50% 0; background: linear-gradient(180deg, #ffe7b35c, #ffcf8a24 55%, transparent); opacity: .25; animation: app-facho 9s ease-in-out infinite; }
.app-facho:nth-of-type(1) { left: 36.5%; width: 7%; transform: skewX(-17deg); }
.app-facho:nth-of-type(2) { left: 54.5%; width: 6%; transform: skewX(15deg); animation-duration: 13s; animation-delay: -5s; }
.app-facho:nth-of-type(3) { left: 27%; top: 64%; width: 46%; height: 30%; transform: none; background: radial-gradient(ellipse 50% 50% at 50% 30%, #ffc76a61, transparent 72%); animation-duration: 6.5s; animation-delay: -2s; }
/* A névoa rente ao chão, indo e voltando. */
.app-nevoa { position: absolute; left: -8%; top: 55%; width: 116%; height: 36%; background: radial-gradient(ellipse 26% 46% at 22% 58%, #cdb3ff1c, transparent 72%), radial-gradient(ellipse 30% 52% at 72% 46%, #ffd6a31a, transparent 72%); will-change: transform; animation: app-nevoa 41s ease-in-out infinite alternate; }
.app-nevoa + .app-nevoa { top: 60%; background: radial-gradient(ellipse 28% 44% at 46% 52%, #ffe0b81a, transparent 72%), radial-gradient(ellipse 22% 40% at 88% 62%, #b89cff17, transparent 72%); animation-duration: 57s; animation-direction: alternate-reverse; }
/* Em cima e embaixo o cenário escurece: é onde a interface escreve. */
.app-cenario::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #08050fd1 0%, transparent 19%, transparent 60%, #08050fe0 100%), linear-gradient(90deg, #08050f99 0%, transparent 16%, transparent 84%, #08050f99 100%); }
@keyframes app-vista { from { transform: translate(-2.4%, 1.2%) scale(1.02); } to { transform: translate(2.4%, -1.2%) scale(1.1); } }
@keyframes app-facho { 0%, 100% { opacity: .16; } 50% { opacity: .62; } }
@keyframes app-nevoa { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* ---------- Camada 3: a poeira dourada subindo (na frente do personagem, atrás da interface) ---------- */
.app-poeira { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.app-poeira i { position: absolute; left: var(--x); bottom: 16%; width: var(--t, 3px); height: var(--t, 3px); border-radius: 50%; background: #ffd98a; box-shadow: 0 0 6px 1px #ffb00099; opacity: 0; will-change: transform, opacity; animation: app-poeira var(--d, 10s) linear var(--a, 0s) infinite; }
/* A Temporada 2, do Eclipse (src/lobby-app.js vestirTemporada; pedido de 28/10/2026): o galpão em luar
   (assets/lobby/cenario-2.webp), o eclipse aceso no céu lá fora, no alto do portão à direita (os gestos e a placa
   ficam no meio) — o disco escuro e a coroa de luz, que pulsa
   devagar — e os enfeites (fachos, névoa, soleira, poeira) do dourado para o azul de luar. */
.app-eclipse { display: none; }
.app-lobby[data-temporada="2"] .app-eclipse {
  display: block; position: absolute; left: 66%; top: 13%; width: calc(var(--cena-h) * .12); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 56% 50%, #05070f 0 47%, transparent 48%), radial-gradient(circle, #f4f9ff 0 50%, #a9d8ff 54%, #7f9cff8c 60%, transparent 70%);
  box-shadow: 0 0 calc(var(--cena-h) * .035) calc(var(--cena-h) * .006) #a9d8ff8c; animation: app-eclipse 5s ease-in-out infinite alternate;
}
@keyframes app-eclipse { to { box-shadow: 0 0 calc(var(--cena-h) * .06) calc(var(--cena-h) * .012) #a9d8ffb3; filter: brightness(1.12); } }
.app-lobby[data-temporada="2"] .app-facho { background: linear-gradient(180deg, #d6e8ff5c, #a9c4ff24 55%, transparent); }
.app-lobby[data-temporada="2"] .app-facho:nth-of-type(3) { background: radial-gradient(ellipse 50% 50% at 50% 30%, #9fbcff61, transparent 72%); }
.app-lobby[data-temporada="2"] .app-nevoa { background: radial-gradient(ellipse 26% 46% at 22% 58%, #c9b3ff1f, transparent 72%), radial-gradient(ellipse 30% 52% at 72% 46%, #a9c8ff1c, transparent 72%); }
.app-lobby[data-temporada="2"] .app-nevoa + .app-nevoa { background: radial-gradient(ellipse 28% 44% at 46% 52%, #b8d0ff1a, transparent 72%), radial-gradient(ellipse 22% 40% at 88% 62%, #b89cff17, transparent 72%); }
.app-lobby[data-temporada="2"] .app-soleira { background: radial-gradient(ellipse 58% 100% at 50% 100%, #c8dcff5c, transparent 72%), linear-gradient(0deg, #8fb0ff6b 0%, #8fb0ff2b 26%, transparent 100%); }
.app-lobby[data-temporada="2"] .app-vista::after { background: radial-gradient(ellipse 80% 70% at 50% 62%, #d8e8ff1f, transparent 72%), linear-gradient(180deg, #0b0f2899 0%, transparent 34%, transparent 66%, #8fb0ff59 100%); }
.app-lobby[data-temporada="2"] .app-poeira i { background: #e4edff; box-shadow: 0 0 6px 1px #8fb4ff99; }
@media (prefers-reduced-motion: reduce) { .app-lobby[data-temporada="2"] .app-eclipse { animation: none; } }
@keyframes app-poeira { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 75% { opacity: .45; } 100% { transform: translate(var(--v, 16px), calc(var(--tela-h) * -.56)); opacity: 0; } }

/* ---------- Camada 2: o personagem na plataforma e as vagas da equipe ---------- */
/* Cinco colunas — duas vagas, você, duas vagas — para o seu boneco ficar no meio exato, na
   frente do portão. Todos pisam na mesma linha do chão; quem está ao lado fica um passo atrás
   (mais alto na tela e menor), como pede a perspectiva da plataforma. */
.app-palco {
  /* O seu boneco: 60% do cenário, ou o que cabe entre o chão e a placa dele, logo abaixo do topo. */
  /* (O pedestal da temporada debaixo dos pés, 04/11/2026: a linha dos pés sobe o tanto dele, e o boneco encolhe esse
     tanto, para o topo — os gestos e a placa — ficar onde estava.) */
  --pedestal-sobe: calc(var(--cena-h) * .075);
  --eu-h: min(calc(var(--cena-h) * .6), calc((var(--tela-h) - var(--chao) - var(--pedestal-sobe) - var(--topo-h) - 45px - var(--gestos-h, 0px)) / .96));
  /* O passo de uma vaga à outra: de cada lado do seu boneco, até a lateral, cabem duas. É por ele que
     os quatro da equipe cheia cabem em qualquer largura (e a placa de cada um não passa do passo). */
  --passo: min(calc((var(--tela-w) / 2 - var(--eu-h) / 3 - var(--app-margem) - var(--atalho) - 36px) / 2), 150px);
  --vaga: calc(var(--passo) * .82); --vao: calc(var(--passo) * .18);
  /* O palco é só a faixa onde os personagens ficam — entre as laterais, do topo até logo abaixo dos pés: a
     tela 3D (que tem o tamanho dele) não gasta desenho com a tela inteira. A linha dos pés fica a 12 px do pé dele. */
  position: absolute; inset: calc(var(--topo-h) + 8px) calc(var(--app-margem) + var(--atalho) + 20px) calc(var(--chao) - 12px); z-index: 0; isolation: isolate;
  display: grid; grid-template-columns: var(--vaga) var(--vaga) auto var(--vaga) var(--vaga); justify-content: center; align-items: end; column-gap: var(--vao);
  padding-bottom: calc(12px + var(--pedestal-sobe)); pointer-events: none;
}
.app-palco > .lobby-palco-3d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
#appPalco .lobby-vaga.app-eu {
  grid-column: 3; grid-row: 1; position: relative; display: block; height: var(--eu-h); aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; touch-action: none; outline-offset: -6px;
}
#appPalco .lobby-vaga .lobby-figura { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
/* O pedestal da temporada debaixo de cada boneco (04/11/2026, "já estende isso para o lobby principal"): o desenho de
   src/passe.js TEMPORADA.pedestal (o lobby-app.js vestirTemporada põe em --pedestal), com o centro do tampo — a 24% da
   altura do desenho — nos pés. */
#appPalco .lobby-vaga .lobby-figura::before {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 96%; aspect-ratio: 2.36; translate: -50% 76%; pointer-events: none;
  background: var(--pedestal, none) center / contain no-repeat; filter: drop-shadow(0 6px 8px #000b);
}
/* A luz do portão nas costas do personagem e a poça dela no chão, em volta dos pés. */
#appPalco .lobby-vaga.app-eu::before { content: ""; position: absolute; left: 50%; bottom: -9%; z-index: -1; width: 190%; height: 24%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, #ffcf7a57, #ffb04a1f 45%, transparent 70%); pointer-events: none; }
/* A sombra no chão, debaixo dos pés (src/palco-3d.js põe no lugar e no tamanho do boneco). */
#appPalco .lobby-luz { z-index: 1; bottom: 0; opacity: 1; filter: none; transform: translateX(-50%) scale(1.5, 1.25); background: radial-gradient(ellipse, #000000cc 0%, #0000007a 42%, transparent 72%); }
/* Sem o 3D (aparelho econômico, ou quem pediu menos movimento), o retrato de corpo inteiro ocupa o lugar do boneco. */
#appPalco .lobby-boneco { height: 152%; bottom: -30.4%; max-width: none; filter: drop-shadow(0 6px 10px #000a); }
.app-lado { display: contents; }
.app-lado > * { grid-row: 1; justify-self: center; pointer-events: auto; }
.app-lado.a > * { grid-column: 2; } .app-lado.b > * { grid-column: 4; } .app-lado.c > * { grid-column: 1; }
#appPalco .lobby-vaga.app-membro { position: relative; display: block; height: calc(var(--eu-h) * .84); aspect-ratio: 2 / 3; margin-bottom: calc(var(--cena-h) * .035); padding: 0; border: 0; background: none; }
#appPalco .app-lado.c > .lobby-vaga.app-membro { height: calc(var(--eu-h) * .74); margin-bottom: calc(var(--cena-h) * .075); }
/* A vaga livre: o "+" dourado flutuando sobre a marca no chão onde o amigo vai ficar. */
.app-vaga-livre {
  position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; width: 100%; height: calc(var(--eu-h) * .56); margin-bottom: calc(var(--cena-h) * .035);
  padding: 0; border: 0; background: none; color: #ffcf6b; cursor: pointer;
}
/* Só o "+" e a marca no chão respondem ao toque (a caixa em volta é só o lugar deles). */
.app-lado > .app-vaga-livre { pointer-events: none; }
.app-vaga-livre i, .app-vaga-livre::before { pointer-events: auto; }
.app-lado.c > .app-vaga-livre { height: calc(var(--eu-h) * .48); margin-bottom: calc(var(--cena-h) * .075); opacity: .82; }
.app-vaga-livre::before { content: ""; position: absolute; left: 50%; bottom: -5px; z-index: -1; width: min(84%, 86px); aspect-ratio: 3.1; translate: -50% 0; border: 2px dashed #ffc54aa6; border-radius: 50%; background: radial-gradient(ellipse, #ffb00038, transparent 72%); animation: app-marca 3.6s ease-in-out infinite; }
.app-lado.b > .app-vaga-livre::before { animation-delay: -1.2s; } .app-lado.c > .app-vaga-livre::before { animation-delay: -2.4s; }
.app-vaga-livre i { display: grid; place-items: center; width: clamp(34px, 5.6vw, 48px); aspect-ratio: 1; border: 2.5px solid var(--contorno); border-radius: 50%; background: linear-gradient(180deg, #ffe45c, #ffb000 55%, #ff7a00); box-shadow: inset 0 2px 0 #ffffff8c, inset 0 -3px 0 #b3520066, 0 4px 0 #000000a6, 0 0 18px #ffb00059; transition: transform .12s ease; animation: app-flutua 3.2s ease-in-out infinite; }
.app-lado.b > .app-vaga-livre i { animation-delay: -1s; } .app-lado.c > .app-vaga-livre i { animation-delay: -2.1s; }
.app-vaga-livre svg { width: 54%; height: 54%; fill: none; stroke: #2a1200; stroke-width: 3.4; stroke-linecap: round; }
.app-vaga-livre span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-vaga-livre:hover i { transform: scale(1.08); animation-play-state: paused; }
.app-vaga-livre:active i { transform: scale(.9); animation-play-state: paused; }
@keyframes app-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes app-marca { 0%, 100% { opacity: .55; scale: .94; } 50% { opacity: 1; scale: 1.04; } }

/* ---------- Camada 4: a interface ---------- */
.app-topo, .app-lateral, .app-base { position: relative; z-index: 2; }
/* Topo: o perfil à esquerda; a equipe e os gestos no meio; as moedas, a conta e o menu à direita. */
.app-topo { grid-area: topo; display: flex; align-items: flex-start; gap: 8px; min-width: 0; height: var(--topo-h); }
.app-topo > :not(.app-perfil):not(.app-espaco) { margin-top: calc((var(--topo-h) - 44px) / 2 + 2px); }
/* O perfil: o rosto do personagem dentro da moldura da conta, o apelido e o progresso das molduras. */
.app-perfil {
  position: relative; flex: 0 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: min(310px, 40%); height: calc(var(--topo-h) + 8px); padding: 4px 14px 5px 5px;
  border: 2.5px solid var(--contorno); border-radius: 12px 12px 12px 4px; background: var(--painel); box-shadow: var(--painel-sombra); color: var(--ink); cursor: pointer; text-align: left;
  transition: transform .1s ease, filter .12s ease;
}
.app-perfil-retrato { position: relative; flex: none; height: 100%; aspect-ratio: 2 / 3; }
/* A janela da moldura (src/molduras.js ABERTURAS, a mesma nas sete desde 23/10/2026): o fundo e o
   rosto ficam dentro dela — antes ocupavam a caixa inteira e passavam da moldura, que encolheu. */
.app-perfil-janela { position: absolute; left: 12.7%; right: 12.7%; top: 14.2%; bottom: 14.8%; overflow: hidden; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--cor, #ffb000) 60%, #10151c), #0b0f15 78%); }
/* (O retrato é de corpo inteiro: aqui só o rosto, do tamanho da janela da moldura.) */
.app-perfil-retrato .rosto { position: absolute; left: 50%; top: -40%; width: 311%; max-width: none; height: auto; translate: -50% 0; }
.app-perfil-retrato .rosto:not([src]), .app-perfil-retrato .rosto[src=""] { visibility: hidden; }
.app-perfil-retrato .lobby-moldura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.app-perfil-texto { display: grid; gap: 2px; min-width: 0; }
/* O apelido inteiro, sem reticências: quando não cabe, a letra diminui (src/lobby-app.js ajustarNome). */
.app-perfil b { font: 800 18px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .03em; white-space: nowrap; text-shadow: 0 2px 0 #0009; }
.app-perfil small { overflow: hidden; color: #ffd27a; font: 600 11px/1.15 Barlow, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.app-espaco { flex: 1; }
.app-conta { display: flex; align-items: center; min-width: 0; height: 40px; }
.app-conta .topo-conta { margin: 0; }
.app-conta #sairConta { display: none; }
/* O menu: o botão dourado do canto. */
.app-redondo { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 40px; border: 2.5px solid var(--contorno); border-radius: 11px; background: linear-gradient(180deg, #ffe45c, #ffb000 55%, #ff7a00); box-shadow: inset 0 2px 0 #ffffff8c, inset 0 -3px 0 #b3520066, 0 4px 0 #000000a6; color: #2a1200; cursor: pointer; transition: transform .1s ease, filter .12s ease; }
.app-redondo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
/* O mouse por cima acende; apertar afunda (o degrau de baixo some). */
@media (hover: hover) { .app-perfil:hover, .app-redondo:hover, .app-vectors:hover, .app-item:hover, .app-modo:hover:not(:disabled), .app-mapa:hover:not(:disabled) { filter: brightness(1.14); } }
.app-perfil:active, .app-redondo:active, .app-vectors:active, .app-item:active, .app-modo:active:not(:disabled), .app-mapa:active:not(:disabled) { transform: translateY(3px); filter: brightness(.94); }
.app-lobby :is(.app-perfil, .app-redondo, .app-vectors, .app-item, .app-modo, .app-mapa, .app-atalho, .app-estrela, .app-vaga-livre, .app-jogar):focus-visible { outline: 3px solid #ffe45c; outline-offset: 2px; }

/* Laterais: os atalhos desenhados (o ícone já é o botão, com a placa amarela), o nome embaixo. */
.app-lateral { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; }
.app-esq { grid-area: esq; }
.app-dir { grid-area: dir; }
.app-atalho {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0; width: calc(var(--atalho) + 20px); padding: 0;
  border: 0; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.app-atalho:hover { transform: translateY(-2px) scale(1.05); }
.app-atalho:active { transform: scale(.9); }
.app-desenho { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.app-atalho .app-desenho { width: var(--atalho); height: var(--atalho); filter: drop-shadow(0 4px 0 #00000080) drop-shadow(0 6px 8px #000a); }
.app-atalho span {
  max-width: 100%; margin-top: -4px; overflow: hidden; font: 800 clamp(11px, calc(var(--atalho) * .2), 15px)/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: 3px var(--contorno); paint-order: stroke fill; text-shadow: 0 2px 0 var(--contorno), 0 3px 6px #000c;
}
/* Um brilho atravessa a Loja de tempos em tempos (e o Diário, quando há prêmio): a faixa de luz
   é recortada no desenho do próprio ícone. */
.app-atalho::after {
  content: ""; position: absolute; left: 50%; top: 0; width: var(--atalho); height: var(--atalho); translate: -50% 0; pointer-events: none; opacity: 0;
  -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, #ffffffb8 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
}
#appLoja { --mascara: url("./assets/lobby/loja.webp"); }
#appDiario { --mascara: url("./assets/lobby/diario.webp"); }
#appLoja::after { opacity: 1; animation: app-brilho 8s ease-in-out -3s infinite; }
#appDiario.tem-premio::after { opacity: 1; animation: app-brilho 4.2s ease-in-out infinite; }
@keyframes app-brilho { 0%, 78% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* Prêmio a receber: o ícone pulsa de leve e ganha a bolinha de aviso. */
.app-atalho.tem-premio .app-desenho { animation: app-pulso 1.7s ease-in-out infinite; }
.app-atalho-aviso[hidden] { display: none; }
.app-atalho-aviso { position: absolute; right: 6px; top: -2px; width: 16px; height: 16px; border: 2.5px solid var(--contorno); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9d8a, #f0262c 60%); box-shadow: 0 2px 0 #0009; animation: app-aviso 1.7s ease-in-out infinite; }
@keyframes app-pulso { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes app-aviso { 0%, 100% { scale: 1; } 50% { scale: 1.22; } }

/* Embaixo: os equipamentos à esquerda, o modo e o mapa no meio, as estrelas do dia e o JOGAR à direita. */
.app-base { grid-area: base; display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
/* Os equipamentos: cinco azulejos iguais (três em cima, dois embaixo), cada um abre só a sua tela. */
.app-equipado { flex: none; display: grid; grid-template-columns: repeat(3, var(--item)); gap: 6px 5px; padding-bottom: 4px; }
.app-item {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0; width: var(--item); height: calc(var(--item) * .7); min-width: 0; padding: 1px 2px 3px;
  border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--painel); box-shadow: var(--painel-sombra); color: var(--ink); cursor: pointer;
  transition: transform .1s ease, filter .12s ease;
}
.app-item .app-desenho { width: calc(var(--item) * .47); height: calc(var(--item) * .47); margin: -3px 0 -2px; filter: drop-shadow(0 2px 0 #00000080); }
.app-item span { max-width: 100%; overflow: hidden; font: 800 clamp(8.5px, calc(var(--item) * .165), 11.5px)/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* O modo e o mapa: um painel só, em duas metades. */
.app-partida { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding-bottom: 4px; }
.app-modo, .app-mapa {
  position: relative; height: 60px; border: 2.5px solid var(--contorno); background: var(--painel); box-shadow: var(--painel-sombra); color: var(--ink); cursor: pointer; text-align: left;
  transition: transform .1s ease, filter .12s ease;
}
.app-modo { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 6px; border-radius: 14px 0 0 14px; }
.app-modo-icone { flex: none; display: grid; place-items: center; width: 46px; height: 46px; }
.app-modo-icone .app-desenho { width: 50px; height: 50px; margin: -2px; filter: drop-shadow(0 2px 0 #00000080); }
.app-modo-op .app-desenho { flex: none; width: 46px; height: 46px; margin: -6px -2px -6px -6px; filter: drop-shadow(0 2px 4px #000a); }
.app-modo-texto { display: grid; gap: 1px; }
.app-modo-texto small, .app-mapa small { color: #cfc6e6; font: 700 10px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.app-modo-texto b { font: 800 17px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .03em; white-space: nowrap; }
.app-mapa { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 360px; margin-left: -2.5px; padding: 0 8px 0 6px; border-radius: 0 14px 14px 0; background: linear-gradient(180deg, #231a3d, #120c22); }
.app-mapa .app-mapa-foto { flex: none; width: 78px; height: 44px; object-fit: cover; border: 2px solid var(--contorno); border-radius: 6px; }
.app-mapa span { display: grid; gap: 1px; min-width: 0; }
.app-mapa b { overflow: hidden; font: 800 17px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.app-mapa small.dif-facil { color: #86dd78; } .app-mapa small.dif-medio { color: #f0c44e; } .app-mapa small.dif-dificil { color: #f59546; } .app-mapa small.dif-extremo { color: #f55d50; } .app-mapa small.dif-festa { color: #f47fdc; }
.app-mapa em { display: grid; justify-items: center; flex: none; color: #fff; font: 800 10px/1 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 2.5px var(--contorno); paint-order: stroke fill; }
.app-mapa em .app-desenho { width: 38px; height: 38px; margin: -3px 0 -5px; filter: drop-shadow(0 2px 0 #00000080); }
.app-mapa:disabled, .app-modo:disabled { cursor: default; opacity: 1; }
.app-mapa:disabled em { visibility: hidden; }
/* O canto do JOGAR: as estrelas do dia em cima, o botão embaixo, da mesma largura. */
.app-canto { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; width: clamp(170px, 27vw, 290px); padding-bottom: 5px; }
/* JOGAR: o maior destaque da tela — a placa inclinada do VECTOR, dourada, com contorno e degrau. */
.app-jogar.bv-loja { --bv-inclinacao: -9deg; flex-direction: column; gap: 1px; width: 100%; height: 66px; padding: 0 22px; color: #2a1200; font: 800 32px/1 "Barlow Condensed", "Segoe UI", sans-serif; letter-spacing: .12em; text-shadow: 0 1px 0 #ffffff8c; transition: transform .1s ease; min-width: 0; }
/* Só a palavra (pedido de 08/10/2026): o texto de apoio — quem falta dar Pronto, o que o modo faz — não
   aparece; fica para o leitor de tela. Na equipe, quem confirmou aparece pelo visto na placa de cada um. */
.app-jogar.bv-loja small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-jogar.bv-loja::before, .app-jogar.bv-loja::after { border-radius: 12px; }
.app-jogar.bv-loja::before { border: 3px solid var(--contorno); background: linear-gradient(180deg, #fff27a 0%, #ffd21f 34%, #ff9d00 76%, #f56f00 100%); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -6px 0 #b54d00, 0 5px 0 var(--contorno), 0 10px 20px #000b, 0 0 26px #ff9a0059; }
.app-jogar.bv-loja:hover:not(:disabled)::before { filter: brightness(1.1) saturate(1.1); box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -6px 0 #b54d00, 0 5px 0 var(--contorno), 0 10px 20px #000b, 0 0 36px #ffb000a6; }
.app-jogar.bv-loja:active:not(:disabled) { transform: translateY(4px); }
.app-jogar.bv-loja:active:not(:disabled)::before { box-shadow: inset 0 2px 0 #ffffffbf, inset 0 -3px 0 #b54d00, 0 1px 0 var(--contorno), 0 4px 10px #000b; }
/* O brilho que atravessa o JOGAR de tempos em tempos. */
.app-jogar.bv-loja:not(:disabled):not(.pronto)::after { inset: 3px; opacity: 1; background-position: 160% 0; transition: none; animation: app-brilho 5.4s ease-in-out infinite; }
.app-jogar.bv-loja.pronto { color: #bdf5d0; text-shadow: none; }
.app-jogar.bv-loja.pronto::before { background: linear-gradient(180deg, #2a323d, #1a212b); box-shadow: inset 0 0 0 2px #4ade80, 0 5px 0 var(--contorno), 0 10px 20px #000b; }
@keyframes app-falta { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.app-jogar.falta { animation: app-falta .35s ease-out; }

/* ---------- As estrelas do dia (src/premios-lobby.js), em cima do JOGAR ---------- */
.app-estrelas { position: relative; display: grid; gap: 1px; padding: 4px 6px 5px; border: 2.5px solid var(--contorno); border-radius: 12px; background: var(--painel); box-shadow: var(--painel-sombra); }
.app-estrelas-titulo { color: #ffd76a; font: 800 10.5px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.app-estrelas-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-estrela { position: relative; display: grid; justify-items: center; gap: 0; min-width: 0; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; transition: transform .12s ease; }
.app-estrela:hover { transform: translateY(-1px) scale(1.06); }
.app-estrela:active { transform: scale(.9); }
.app-estrela:disabled { cursor: progress; }
.app-estrela b { margin-top: -3px; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; -webkit-text-stroke: 2.5px var(--contorno); paint-order: stroke fill; }
.app-estrela-arte { position: relative; display: block; width: var(--estrela); height: var(--estrela); }
.app-estrela-arte img { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 #00000080); pointer-events: none; }
.app-estrela-raios, .app-estrela-faiscas { position: absolute; pointer-events: none; opacity: 0; }
/* Bloqueada: a estrela apagada, cor de aço. */
[data-estado="bloqueada"] > .app-estrela-arte img { filter: grayscale(1) brightness(.4) contrast(1.2) drop-shadow(0 2px 0 #00000080); }
.app-estrela[data-estado="bloqueada"] b { color: #b9b2cc; }
/* Disponível: acesa, pulsando, com os raios girando atrás — é só tocar. */
.app-estrela[data-estado="disponivel"] img { animation: app-pulso 1.3s ease-in-out infinite; filter: drop-shadow(0 2px 0 #00000080) drop-shadow(0 0 8px #ffd84ad9); }
.app-estrela[data-estado="disponivel"] b { color: #ffe45c; }
.app-estrela-raios { inset: -42%; border-radius: 50%; background: repeating-conic-gradient(#ffe45c8c 0 11deg, transparent 11deg 30deg); -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); }
.app-estrela[data-estado="disponivel"] .app-estrela-raios { opacity: 1; animation: app-gira 8s linear infinite; }
/* Recebida: dourada e quieta, com o visto. */
[data-estado="recebida"] > .app-estrela-arte::after { content: "✓"; position: absolute; right: -5px; bottom: -1px; display: grid; place-items: center; width: 44%; aspect-ratio: 1; border: 2px solid var(--contorno); border-radius: 50%; background: #3ddc77; color: #06210f; font: 800 calc(var(--estrela) * .3)/1 "Segoe UI", sans-serif; }
.app-estrela[data-estado="recebida"] b { color: #7ee2a0; }
/* Acabou de acender: gira de frente para trás, clareia e solta faíscas (uma vez). */
.app-estrela.acendeu .app-estrela-arte { animation: app-estrela-acende 1.15s cubic-bezier(.2, .9, .3, 1.15); }
.app-estrela-faiscas { left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; color: #ffe45c; box-shadow: 0 -26px 0 0, 18px -18px 0 0 #fff, 26px 0 0 0, 18px 18px 0 0 #fff, 0 26px 0 0, -18px 18px 0 0 #fff, -26px 0 0 0, -18px -18px 0 0 #fff; }
.app-estrela.acendeu .app-estrela-faiscas { animation: app-faiscas .95s ease-out .2s; }
@keyframes app-gira { to { rotate: 360deg; } }
@keyframes app-estrela-acende { 0% { transform: perspective(260px) rotateY(0) scale(.55); filter: brightness(.5); } 45% { transform: perspective(260px) rotateY(360deg) scale(1.55); filter: brightness(2.1); } 100% { transform: perspective(260px) rotateY(720deg) scale(1); filter: brightness(1); } }
@keyframes app-faiscas { 0% { opacity: 1; transform: scale(.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(35deg); } }
.app-estrelas.pedindo { filter: saturate(.7); }

/* Vectors: a moedinha e o saldo; tocar abre a loja. O número pula quando o saldo sobe. */
.app-vectors { position: relative; display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 13px 0 3px; border: 2.5px solid var(--contorno); border-radius: 999px; background: var(--painel); box-shadow: var(--painel-sombra); color: #ffd76a; cursor: pointer; transition: transform .1s ease, filter .12s ease; }
.app-vectors img { width: 32px; height: 32px; margin: -4px 0 -4px -5px; filter: drop-shadow(0 2px 0 #00000080); }
.app-vectors b { display: block; font: 800 20px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-shadow: 0 2px 0 #0009; }
.app-vectors b.subiu { animation: app-saldo .55s cubic-bezier(.2, 1.5, .4, 1); }
.app-vectors.recebendo img { animation: app-pulso .3s ease-in-out infinite; }
@keyframes app-saldo { 0% { scale: 1; color: #fff; } 40% { scale: 1.5; color: #fff; } 100% { scale: 1; } }
/* Na pausa da partida: o JOGAR vira Continuar, e o modo e as vagas saem. */

/* O que é enfeite para quando o lobby não está na frente (um painel por cima, o jogo rodando)
   e para quem pediu menos movimento. */
.app-lobby.parado *, .app-lobby.parado *::before, .app-lobby.parado *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .app-fundo, .app-facho, .app-nevoa, .app-vaga-livre i, .app-vaga-livre::before, .app-atalho::after, .app-atalho .app-desenho, .app-atalho-aviso, .app-jogar.bv-loja::after, .app-estrela img, .app-estrela-raios, .app-estrela-arte, .app-estrela-faiscas, .app-vectors b, .app-vectors img { animation: none !important; }
  .app-poeira { display: none; }
}

/* Folhas pequenas (modo e menu). */
.app-folha { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: #000b; animation: app-folha .16s ease-out; }
.app-folha[hidden] { display: none; }
@keyframes app-folha { from { opacity: 0; } }
/* A caixa da folha chega com um pulinho. */
.app-folha-caixa { animation: app-folha-pula .24s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes app-folha-pula { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.app-folha-caixa {
  position: relative; display: grid; gap: 8px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px;
  border: 1px solid #3d4855; border-radius: 10px; background: linear-gradient(180deg, #161c24, #0e1318); box-shadow: 0 20px 50px #000c;
}
.app-folha-caixa h3 { margin: 0 0 4px; font: 700 22px "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.app-modo-op, .app-menu-op {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px; border: 1px solid #2f3843; border-radius: 6px;
  background: #0b0f15; color: var(--ink); cursor: pointer; text-align: left;
}
.app-modo-op span { display: grid; gap: 2px; }
.app-modo-op b { font: 700 17px "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.app-modo-op small { color: var(--muted); font-size: 12px; }
.app-modo-op[aria-pressed="true"] { border-color: var(--amber); background: #ffb00014; box-shadow: inset 0 0 0 1px #ffb00040; }
.app-modo-op svg, .app-menu-op svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-menu-op { min-height: 48px; font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.app-menu-lista { display: grid; gap: 8px; }
.app-menu-lista #sairConta { justify-self: end; margin-top: 6px; }
/* No navegador o menu tem mais duas linhas (Apoiar, Instalar): em duas colunas, para caber deitado. */
html[data-app="web"] .app-menu-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-app="web"] .app-menu-lista #sairConta { grid-column: 1 / -1; }
/* No celular deitado e baixo, o menu (com o "Dê sua opinião", 04/11/2026) passava da tela: duas colunas, como no navegador. */
@media (max-height: 430px) { html[data-app] .app-menu-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-app] .app-menu-lista #sairConta { grid-column: 1 / -1; } }
.app-folha-fechar {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #3d4855; border-radius: 50%;
  background: #0b0f15; color: var(--ink); cursor: pointer;
}
.app-folha-fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* ---------- Painéis do site por cima do lobby ---------- */
html[data-app] #overlay .menu > .panel:not(.picker):not([hidden]),
html[data-app] #overlay.app-mapas .menu > .picker {
  position: fixed; z-index: 30; display: block;
  top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  margin: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; box-shadow: 0 0 0 100vmax #000a, 0 20px 50px #000c;
  animation: app-painel .18s ease-out;
}
@keyframes app-painel { from { opacity: 0; transform: translateY(10px); } }
html[data-app] #overlay.app-mapas .menu > .picker > .palco { display: none; }
/* O X fica no canto, preso no alto enquanto o painel rola; o título deixa o lugar dele livre. */
html[data-app] .app-painel-fechar, html[data-app] .app-mapas-fechar {
  position: sticky; top: 0; z-index: 8; float: right; width: 38px; height: 38px; margin: -10px -10px -38px auto;
}
html[data-app] #overlay .menu > .panel .panel-title, html[data-app] #overlay .picker .panel-head { padding-right: 46px; }
html[data-app] #overlay:not(.app-mapas) .app-mapas-fechar { display: none; }
@media (prefers-reduced-motion: reduce) { .app-folha, .app-folha-caixa, html[data-app] #overlay .menu > .panel, html[data-app] #overlay .menu > .picker { animation: none; } }

/* ---------- Tamanhos ---------- */
/* Celular deitado (até 480 px de altura): o topo mais baixo, as estrelas sem o título e tudo um
   pouco mais justo. A placa em cima do personagem fica só com a insígnia e o nome (o progresso
   da sua conta está no perfil, no canto). */
@media (max-height: 480px) {
  .app-lobby { --topo-h: 44px; --orcamento: 194px; --estrela: 32px; }
  .app-estrelas-titulo { display: none; }
  .app-perfil b { font-size: 16px; }
  .app-perfil small { font-size: 10px; }
  .app-conta { height: 38px; }
  .app-mapa em .app-desenho { width: 34px; height: 34px; }
  .app-modo, .app-mapa { height: 54px; }
  .app-modo-icone { width: 42px; height: 42px; }
  .app-modo-icone .app-desenho { width: 46px; height: 46px; }
  .app-mapa .app-mapa-foto { width: 68px; height: 40px; }
  .app-jogar.bv-loja { height: 56px; font-size: 27px; }
  .app-canto { gap: 6px; }
  /* As placas no celular: a insígnia e o nome (as corridas e a barra ficam para a tela grande). */
  .app-placa .app-placa-barra { display: none; }
  .app-membro .app-placa { gap: 3px; padding: 2px 7px 3px 3px; }
  .app-membro .app-placa-insignia { width: 20px; height: 20px; margin: 0; }
  .app-membro .app-placa-texto b { font-size: 12.5px; letter-spacing: .01em; }
}
/* Tela estreita: a foto do mapa sai (ele já aparece pelo portão) e, mais estreita ainda, o modo fica só com o ícone. */
@media (max-width: 860px) { .app-mapa .app-mapa-foto { display: none; } .app-mapa { padding-left: 12px; } }
@media (max-width: 690px) { .app-modo-texto { display: none; } .app-modo { padding-right: 6px; } }
/* No celular comum (até 840 px de largura) a placa dos companheiros fica só com o nome: é o que deixa um
   nome de 12 letras aparecer inteiro com a equipe cheia. */
@media (max-width: 840px) {
  .app-membro .app-placa-insignia { display: none; }
  .app-membro .app-placa { padding: 2px 7px 3px; }
}
/* Mais estreita que 760 px, a letra das placas diminui e o canto do JOGAR fica um pouco menor: é o que faz a
   equipe cheia caber. Na equipe, a conta do topo mostra só a foto. */
@media (max-width: 760px) {
  .app-membro .app-placa { padding: 2px 6px 3px; }
  .app-membro .app-placa-texto b { font-size: 11.5px; letter-spacing: 0; }
  /* Com a equipe cheia numa tela estreita, a bolinha das corridas dos companheiros sai da linha do nome e
     fica presa no canto de baixo da placa: o nome usa a largura toda. */
  .app-membro .app-nome { gap: 0; }
  .app-membro .app-corridas { position: absolute; right: -7px; bottom: -9px; min-width: 16px; height: 15px; padding: 0 4px; font-size: 10px; }
  .app-item span { letter-spacing: 0; }
  .app-canto { width: clamp(156px, 25vw, 290px); }
  .app-lobby.em-equipe .app-conta .bv-conta-nome { display: none; }
  .app-lobby.em-equipe .app-conta .bv-conta { padding-right: 0; }
  .app-lobby.em-equipe .app-conta .bv-conta::before { display: none; }
  .app-lobby.em-equipe .app-equipe-barra { gap: 6px; padding-left: 8px; }
}
/* Em pé: o jogo é na horizontal — o lobby pede para virar o celular. */
.app-girar { display: none; }
@media (orientation: portrait) {
  .app-girar {
    position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px;
    background: radial-gradient(ellipse at 50% 40%, #1a1206, #07080b 70%); color: var(--ink); text-align: center;
  }
}

/* "Sobre e créditos": os blocos do rodapé do site, dentro da folha. */
.app-folha-sobre .app-folha-caixa { width: min(760px, 100%); }
.app-sobre { display: grid; gap: 18px; }
.app-sobre .rodape-sobre { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0; margin: 0; border: 0; }
.app-sobre .rodape-links { margin: 0; padding: 0; border: 0; }
.app-sobre .credits { margin: 0; }

/* ---------- Tela de carregamento ---------- */
.app-carregando { display: none; }
html[data-app] .app-carregando {
  position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: #07080b; visibility: visible; transition: opacity .4s ease;
}
html[data-app] .app-carregando.pronto { opacity: 0; pointer-events: none; }
/* O banner em tela cheia (cobre a tela; o centro, com o logo e o personagem, fica sempre à vista) e a barra por cima, embaixo. */
html[data-app] .app-carregando { justify-content: flex-end; gap: 10px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
html[data-app] .app-carregando::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 34%; background: linear-gradient(#07080b00, #07080bd9); pointer-events: none; }
.app-carregando-banner { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity .3s ease; }
.app-carregando-barra, .app-carregando > p { position: relative; z-index: 2; }
.app-carregando-banner.pronto { opacity: 1; }
.app-carregando-barra { width: min(100%, 560px); height: 12px; overflow: hidden; border-radius: 999px; background: #1a212b; box-shadow: inset 0 0 0 1px #2f3843, inset 0 1px 3px #000a; }
.app-carregando-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffdc4d, #ffb000 50%, #ff7400); box-shadow: 0 0 14px #ffb000aa; }
.app-carregando > p { margin: 0; color: #c3ccd4; font: 600 14px Barlow, "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.app-carregando b { color: var(--amber); font-variant-numeric: tabular-nums; }
.app-sobre .rodape-info { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--muted); font-size: 13px; }
.app-sobre .intro { margin: 0; text-align: left; }
/* O vídeo de fundo da escolha de mapas vem com zoom (corta o HUD da gravação):
   na folha que rola, o zoom passava das bordas e a folha rolava de lado e sobrava
   espaço vazio embaixo. Aqui o corte é feito na própria imagem. */
html[data-app] #overlay.app-mapas .menu > .picker { overflow-x: hidden; }
@supports (object-view-box: inset(0)) {
  html[data-app] #overlay.app-mapas .menu > .picker > .panel-video { transform: none; object-view-box: inset(12%); }
}
/* A escolha de mapas não tem respiro na borda: o X fica dentro dela. */
html[data-app] #overlay.app-mapas .picker > .app-mapas-fechar { margin-right: 8px; }
/* Tablet deitado (altura folgada): ícones e boneco maiores. */
@media (min-height: 600px) {
  .app-lobby { --topo-h: 62px; --orcamento: 296px; --estrela: 48px; --item: clamp(74px, min(8vw, calc((var(--tela-h) * .275 - 22px) / 1.4)), 100px); }
  .app-lateral { gap: 12px; }
  .app-perfil b { font-size: 22px; }
  .app-perfil small { font-size: 13px; }
  .app-vectors { height: 44px; }
  .app-vectors img { width: 38px; height: 38px; }
  .app-vectors b { font-size: 24px; }
  .app-redondo { width: 52px; height: 46px; }
  .app-placa-texto b { font-size: 17px; }
  .app-modo, .app-mapa { height: 68px; }
  .app-jogar.bv-loja { height: 78px; font-size: 40px; }
  .app-estrelas-titulo { font-size: 13px; }
  .app-estrela b { font-size: 15px; }
}

/* ---------- Painel dos Ajustes em vistas (main.js vistaDosAjustes) ---------- */
/* Ajustes: só as opções, até o "Recarregar o jogo"; o título não recolhe. */
html[data-app] #settingsPanel[data-app-vista="ajustes"] > .escolhas,
html[data-app] #settingsPanel[data-app-vista="ajustes"] > .conta-excluir,
html[data-app] #settingsPanel[data-app-vista="ajustes"] > .app-vista-titulo { display: none !important; }
/* A moldura (movida para cá pelo lobby) só aparece no Perfil. */
html[data-app] #settingsPanel:not([data-app-vista="perfil"]) > #minhaMoldura { display: none !important; }
html[data-app] #settingsPanel[data-app-vista="ajustes"] #ajustesAlternar { pointer-events: none; }
html[data-app] #settingsPanel[data-app-vista="ajustes"] #ajustesRotulo,
html[data-app] #settingsPanel[data-app-vista="ajustes"] .ajustes-seta { display: none; }
/* Visual e as abas sozinhas: sem as opções nem a conta. */
html[data-app] #settingsPanel:not([data-app-vista="ajustes"]) > .panel-title:not(.app-vista-titulo),
html[data-app] #settingsPanel:not([data-app-vista="ajustes"]):not([data-app-vista="perfil"]) > #ajustesGrade,
html[data-app] #settingsPanel:not([data-app-vista="ajustes"]):not([data-app-vista="perfil"]) > .conta-excluir { display: none !important; }
html[data-app] #settingsPanel[data-app-vista="perfil"] > .escolhas,
html[data-app] #settingsPanel[data-app-vista="perfil"] #ajustesGrade > :not(label[for="nick"]):not(#apelidoConta) { display: none !important; }
html[data-app] #settingsPanel[data-app-vista="perfil"] #ajustesGrade { display: block; margin: 14px 0; }
html[data-app] #settingsPanel[data-app-vista="perfil"] > #minhaMoldura:not([hidden]) { display: flex; }
.app-vista-titulo { display: none; }
html[data-app] #settingsPanel:not([data-app-vista="ajustes"]) > .app-vista-titulo { display: block; margin: 0 0 14px; }
.app-vista-titulo > span { display: none; }
html[data-app] #settingsPanel[data-app-vista="perfil"] .app-vista-titulo [data-vista="perfil"],
html[data-app] #settingsPanel[data-app-vista="visual"] .app-vista-titulo [data-vista="visual"],
html[data-app] #settingsPanel[data-app-vista="facas"] .app-vista-titulo [data-vista="facas"],
html[data-app] #settingsPanel[data-app-vista="personagens"] .app-vista-titulo [data-vista="personagens"],
html[data-app] #settingsPanel[data-app-vista="rastros"] .app-vista-titulo [data-vista="rastros"] { display: inline; }
/* Uma aba sozinha: sem a fileira de abas. */
html[data-app] #settingsPanel[data-app-vista="facas"] .escolhas-abas,
html[data-app] #settingsPanel[data-app-vista="personagens"] .escolhas-abas,
html[data-app] #settingsPanel[data-app-vista="rastros"] .escolhas-abas { display: none; }

/* ---------- Tutorial dentro do jogo ---------- */
.app-folha-tutorial .app-folha-caixa { display: flex; flex-direction: column; width: min(900px, 100%); height: 100%; max-height: none; }
.app-tutorial-quadro { flex: 1; width: 100%; min-height: 0; margin-top: 4px; border: 0; border-radius: 6px; background: #07080b; }

/* ---------- Online em duas vistas: Salas e Amigos ---------- */
html[data-app] #onlinePanel[data-app-vista="salas"] #amigos { display: none !important; }
/* Criar e entrar com código em cima, as salas abertas embaixo (a Partida rápida é um modo à parte). */
html[data-app] #onlinePanel[data-app-vista="salas"] .online-grade { grid-template-areas: "criar entrar" "salas salas"; }
html[data-app] #onlinePanel[data-app-vista="salas"] .online-card--rapida { display: none !important; }
html[data-app] #onlinePanel[data-app-vista="amigos"] > .panel-title:not(.app-vista-titulo),
html[data-app] #onlinePanel[data-app-vista="amigos"] .online-grade > :not(#amigos),
html[data-app] #onlinePanel[data-app-vista="amigos"] #onlineEstado { display: none !important; }
html[data-app] #onlinePanel[data-app-vista="amigos"] .online-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "amigos"; }
html[data-app] #onlinePanel[data-app-vista="amigos"] .online-card--amigos { contain: none; min-height: 0; }
html[data-app] #onlinePanel[data-app-vista="amigos"] .online-card--amigos .online-rolagem { flex: none; height: auto; min-height: 120px; max-height: none; }
html[data-app] #onlinePanel[data-app-vista="amigos"] .amigos-topo { padding-right: 46px; }

/* ---------- Mapas e Ranking: cada ícone a sua parte ---------- */
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .ranking { display: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .panel-head,
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .carousel { display: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking { margin-top: 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking h3 { padding-right: 46px; }

/* ---------- Facas e Rastros: só o que a conta tem (main.js marcarPosseNoApp) ---------- */
html[data-app] #settingsPanel[data-app-vista] #facasGrade > .bloqueado,
html[data-app] #settingsPanel[data-app-vista] #rastrosGrade > .bloqueado,
html[data-app] #settingsPanel[data-app-vista] #mochilasGrade > .bloqueado { display: none; }
.app-sem-itens { display: none; }
html[data-app] #settingsPanel[data-sem-facas="true"] #abaArmasConteudo > :not(.app-sem-itens),
html[data-app] #settingsPanel[data-sem-rastros="true"] #abaRastrosConteudo > :not(.app-sem-itens),
html[data-app] #settingsPanel[data-sem-mochilas="true"] #abaMochilasConteudo > :not(.app-sem-itens) { display: none !important; }
html[data-app] #settingsPanel[data-sem-facas="true"] #abaArmasConteudo > .app-sem-itens,
html[data-app] #settingsPanel[data-sem-rastros="true"] #abaRastrosConteudo > .app-sem-itens,
html[data-app] #settingsPanel[data-sem-mochilas="true"] #abaMochilasConteudo > .app-sem-itens {
  display: grid; justify-items: center; gap: 16px; padding: 36px 16px; text-align: center;
}
.app-sem-itens p { margin: 0; color: var(--ink); font: 700 20px/1.3 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.app-sem-itens-loja.bv-loja { gap: 6px; min-height: 52px; padding: 0 22px 0 12px; }
.app-sem-itens-loja .app-desenho { width: 44px; height: 44px; margin: -8px 0; }

/* A Loja do app aparece sempre. Sem a cobrança do Play confirmada (aberto pelo
   navegador, ou o Play ainda não respondeu), ela mostra o mercado com o aviso
   de como comprar; os botões ficam "Em breve no app" (nunca Pix dentro do app). */
/* O aviso de como comprar sem o Play: só no app de verdade (no navegador, data-app="web", a loja é a do site). */
.app-loja-sem-play { display: none; }
html[data-app]:not([data-app="web"]):not([data-play]) .app-loja-sem-play { display: block; margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--amber); border-radius: 4px; background: #ffb00012; color: var(--ink); font-size: 14px; line-height: 1.5; }

/* ---------- Títulos: todos do mesmo tamanho e fonte, no centro ---------- */
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 {
  display: block; width: 100%; margin: 2px 0 16px; padding: 0 48px; color: var(--ink); text-align: center;
  font: 700 26px/1.15 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
/* Só o nome: sem ícone nem subtítulo (o do ranking, o mapa, vira a linha de baixo). */
html[data-app] #overlay .menu > .panel > .panel-title .ico,
html[data-app] #overlay .menu > .panel > .panel-title em,
html[data-app] #overlay .picker .panel-head .panel-title .ico,
html[data-app] #overlay .picker .panel-head .panel-title em { display: none; }
html[data-app] #overlay .picker .ranking > h3 em { display: block; margin-top: 4px; color: var(--muted); font: 600 12px/1.3 Barlow, "Segoe UI", sans-serif; letter-spacing: .12em; }
html[data-app] #overlay .picker .panel-head { flex-wrap: wrap; justify-content: center; }
html[data-app] #ajustesAlternar { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: center; text-transform: inherit; }
/* Online: o título é o da vista (Salas ou Amigos). */
html[data-app] #onlinePanel > .panel-title:not(.app-vista-titulo),
html[data-app] #onlinePanel[data-app-vista="amigos"] .amigos-topo h3 { display: none !important; }
html[data-app] #onlinePanel[data-app-vista] > .app-vista-titulo { display: block; }
html[data-app] #onlinePanel[data-app-vista="salas"] .app-vista-titulo [data-vista="salas"],
html[data-app] #onlinePanel[data-app-vista="amigos"] .app-vista-titulo [data-vista="amigos"] { display: inline; }
html[data-app] #onlinePanel[data-app-vista="amigos"] .amigos-topo { justify-content: flex-end; padding-right: 0; }
/* O X da escolha de mapas fica preso no canto da folha sem empurrar o título (o
   cabeçalho dela é flex e desviava do X flutuante, tirando o título do centro). */
html[data-app] #overlay.app-mapas .picker > .app-mapas-fechar {
  position: fixed; z-index: 31; top: calc(max(8px, env(safe-area-inset-top)) + 8px); right: calc(max(10px, env(safe-area-inset-right)) + 8px);
  float: none; margin: 0;
}

/* O ícone do botão do lobby ao lado do título da tela que ele abre. */
.app-titulo-icone { display: inline-block; width: 44px; height: 44px; margin: -10px 10px -8px 0; vertical-align: middle; filter: drop-shadow(0 2px 4px #000a); pointer-events: none; }
.app-titulo-rosto { width: 34px; height: 34px; margin-top: -6px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: color-mix(in srgb, var(--cor, #ffb000) 30%, #0b0f15); box-shadow: 0 0 0 2px var(--cor, #ffb000); }
.app-titulo-rosto:not([src]), .app-titulo-rosto[src=""] { display: none; }
/* Ajustes: a engrenagem desenhada do site, do tamanho dos outros ícones. */
html[data-app] #overlay .menu > .panel > .panel-title #ajustesAlternar .ico { display: inline-block; width: 40px; height: 40px; margin: -8px 10px -6px 0; vertical-align: middle; }
/* O ícone do site (svg) continua escondido; o desenhado aparece. */
html[data-app] #overlay .menu > .panel > .panel-title img.app-titulo-icone,
html[data-app] #overlay .picker .panel-head .panel-title img.app-titulo-icone { display: inline-block; }
html[data-app] #overlay .picker .ranking > h3 span { vertical-align: middle; }

/* ---------- Equipe na tela principal (src/lobby-app.js desenharEquipe) ---------- */
/* Cada lado do palco: o Convidar ou o companheiro (um dos dois aparece). */
.app-vaga-livre[hidden], .app-membro[hidden], .app-equipe-barra[hidden] { display: none !important; }
/* A placa em cima de cada personagem (src/lobby-app.js placa): a insígnia da moldura, o nome
   (com a coroa de quem lidera), as corridas terminadas e a barra até a próxima moldura. */
.app-placa {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% - 4%); transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  width: max-content; max-width: calc(100% + var(--vao) - 8px); padding: 2px 10px 3px 4px; border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--painel); box-shadow: inset 0 1px 0 #ffffff33, 0 3px 0 #000000a6; white-space: nowrap; pointer-events: none;
}
.app-placa.sem-conta { padding: 3px 12px 4px; }
.app-placa-insignia { flex: none; width: 32px; height: 32px; margin: -3px 0; object-fit: contain; filter: drop-shadow(0 2px 0 #00000080); }
/* O ícone do clã, do outro lado da placa (src/lobby-app.js placa). */
.app-placa-cla { flex: none; width: 30px; height: 30px; margin: -3px -4px -3px 0; object-fit: contain; filter: drop-shadow(0 2px 0 #00000080); }
.app-placa.com-cla { padding-right: 6px; }
.app-placa-texto { display: grid; gap: 2px; min-width: 0; text-align: left; }
.app-placa-texto b { display: block; white-space: nowrap; color: var(--ink); font: 800 15px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-shadow: 0 2px 0 #0009; }
/* A sua placa pode ser mais larga que a dos companheiros: fica na fileira de cima, sozinha
   (a largura dela é a da pilha com os gestos, .app-eu-topo, no fim do arquivo). */

/* ---------- O apelido com o total de corridas (src/lobby-app.js bolinhaDeCorridas) ----------
   O nome inteiro e, no fim dele, a bolinha dourada com o número de corridas que a conta já terminou:
   dá para ver de relance quem já correu mais. O mouse por cima, o foco e o toque dizem o que o número é. */
.app-nome { display: flex; align-items: center; gap: 5px; min-width: 0; }
.app-nome > b { flex: none; }
.app-corridas {
  position: relative; flex: none; display: inline-grid; place-items: center; min-width: 19px; height: 18px; margin: 0; padding: 0 5px; border: 2px solid var(--contorno); border-radius: 999px;
  background: linear-gradient(180deg, #ffe45c, #ffb000 60%, #ff7a00); box-shadow: inset 0 1px 0 #ffffff8c, 0 2px 0 #000000a6; color: #2a1200; font: 800 11.5px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; text-shadow: none; pointer-events: auto; cursor: help; -webkit-tap-highlight-color: transparent;
}
/* (A área de toque é maior que a bolinha.) */
.app-corridas::after { content: ""; position: absolute; inset: -10px -8px; }
.app-corridas:focus-visible { outline: 2px solid #ffe45c; outline-offset: 2px; }
.app-corridas:active { transform: scale(.92); }
.app-membro .app-corridas { min-width: 17px; height: 16px; padding: 0 4px; font-size: 10.5px; }
.app-perfil .app-corridas { height: 19px; font-size: 12.5px; }
/* A dica da bolinha: aparece em cima dela (ou embaixo, perto do topo) e some sozinha. */
.app-dica { position: fixed; z-index: 58; margin: 0; padding: 5px 11px; translate: -50% -100%; border: 2.5px solid var(--contorno); border-radius: 9px; background: linear-gradient(180deg, #ffe45c, #ffb000); box-shadow: 0 3px 0 #000000a6; color: #2a1200; font: 800 13px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; pointer-events: none; animation: app-folha .12s ease-out; }
.app-dica.embaixo { translate: -50% 0; }
.app-dica[hidden] { display: none; }
.app-placa .lobby-coroa { margin-right: 4px; font-size: 12px; }
/* A barra, com o que ela mede escrito dentro ("9/14 mapas"). */
.app-placa-barra { position: relative; display: block; width: 100%; min-width: 92px; height: 12px; border-radius: 4px; background: #00000073; box-shadow: inset 0 0 0 1px #ffffff1f; overflow: hidden; }
.app-placa-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #ff8a00, #ffc23d); }
.app-placa-barra em { position: relative; display: block; padding: 0 4px; color: #fff; font: 700 9px/12px "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .07em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 2px #000d, 0 0 3px #0009; white-space: nowrap; }
/* Os companheiros: a placa um pouco menor (o boneco deles também é). */
/* (A placa de um companheiro nunca passa do passo entre as vagas: duas vizinhas não se encostam.) */
.app-membro .app-placa { max-width: calc(var(--passo) - 6px); }
.app-membro .app-placa-insignia { width: 30px; height: 30px; }
.app-membro .app-placa-texto b { font-size: 13px; }
.app-membro .app-placa-barra { min-width: 72px; }
/* A barra da equipe (quantos são e o Sair), no meio do topo. */
.app-equipe-barra { flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 5px 0 12px; border: 2.5px solid var(--contorno); border-radius: 11px; background: var(--painel); box-shadow: var(--painel-sombra); }
.app-equipe-conta { color: #ffd76a; font: 800 14px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.app-equipe-sair.bv-loja { height: 26px; min-height: 26px; padding: 0 12px; font-size: 12px; }


/* Sprays: uma aba sozinha também (sem a fileira de abas). */
html[data-app] #settingsPanel[data-app-vista="sprays"] .escolhas-abas { display: none; }
html[data-app] #settingsPanel[data-app-vista="sprays"] .app-vista-titulo [data-vista="sprays"] { display: inline; }
/* Mochilas (a jetpack): idem — o quinto botão do canto abre só ela. */
html[data-app] #settingsPanel[data-app-vista="mochilas"] .escolhas-abas { display: none; }
html[data-app] #settingsPanel[data-app-vista="mochilas"] .app-vista-titulo [data-vista="mochilas"] { display: inline; }
/* Cinco botões no canto, todos do mesmo tamanho: o da Mochila abre a terceira fileira, na
   coluna da esquerda (pedido de 07/10/2026: "não precisa ficar maior"). */
/* Personagens: a vitrine 3D (o mesmo desenho da dos rastros). */
.personagem-vitrine { display: none; }
html[data-app] #settingsPanel[data-app-vista="personagens"] .personagem-vitrine:not([hidden]) { display: block; }
html[data-app] #settingsPanel[data-app-vista="personagens"] #skinsGrade > .bloqueado { display: none; }
/* Sprays: a prévia grande, na parede. */
.spray-vitrine { display: none; }
html[data-app] #settingsPanel[data-app-vista="sprays"] .spray-vitrine { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 14px; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px #ffffff1f; }
.spray-vitrine-parede {
  display: grid; place-items: center; height: clamp(150px, 42vh, 260px);
  background: radial-gradient(ellipse at 50% 45%, #3b4656 0%, #232b36 55%, #151b23 100%), repeating-linear-gradient(0deg, #ffffff08 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, #ffffff06 0 2px, transparent 2px 92px);
  background-blend-mode: normal, overlay, overlay;
}
.spray-vitrine-parede { position: relative; }
.spray-vitrine-parede img { position: absolute; inset: 9% 0; width: auto; height: 82%; max-width: 70%; margin: auto; object-fit: contain; filter: drop-shadow(0 2px 0 #0006) saturate(1.05); }
.spray-vitrine-parede b { color: var(--amber); font: 800 96px/1 "Barlow Condensed", sans-serif; text-shadow: 0 4px 0 #0008; }
.spray-vitrine .rastro-legenda { position: absolute; left: 14px; bottom: 12px; }

/* Personagens: o canvas da vitrine com o tamanho da dos rastros. */
#personagemVitrineTela { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 6.4; }
.personagem-vitrine #personagemEquipar[hidden] { display: none; }

/* ---------- Loja no celular: cartões menores, todos do mesmo tamanho ---------- */
html[data-app] #shopPanel .loja-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 10px; }
html[data-app] .loja-item { padding-bottom: 12px; }
html[data-app] .loja-item strong { font-size: 13px; }
html[data-app] .loja-item .loja-extra { font-size: 11px; }
html[data-app] .loja-item .selo-loja, html[data-app] .loja-item .selo-apoio { font-size: 9px; padding: 2px 6px; }
html[data-app] .loja-item > .bv-loja { width: 100%; min-width: 0; min-height: 34px; margin-top: 8px; padding: 0 10px; font-size: 12px; justify-content: center; }
html[data-app] .loja-kit-desconto { font-size: 12px; }

/* ---------- Mapas e Ranking: o fundo dos outros painéis, mais compactos ---------- */
html[data-app] #overlay.app-mapas .menu > .picker { background: #171d23; box-shadow: inset 0 0 0 1px #343c45, 0 0 0 100vmax #000a, 0 20px 50px #000c; padding: 14px; }
html[data-app] #overlay.app-mapas .menu > .picker > .panel-video { display: none; }
html[data-app] #overlay.app-mapas .picker .ranking { background: none; border: 0; padding: 0; box-shadow: none; }
html[data-app] #overlay.app-mapas .menu .viewport { --per-view: 4.2; height: 182px; }
html[data-app] #overlay.app-mapas .menu .map-card { height: 176px; }
html[data-app] #overlay.app-mapas .menu .map-shot img { height: 88px; }
html[data-app] #overlay.app-mapas .menu .map-card h3, html[data-app] #overlay.app-mapas .menu .map-card .map-name { font-size: 15px; }
html[data-app] #overlay.app-mapas .menu .map-card p { font-size: 11px; line-height: 1.35; }
@media (min-width: 1000px) { html[data-app] #overlay.app-mapas .menu .viewport { --per-view: 5.2; } }
/* O seletor do mapa no Ranking. */
.app-ranking-mapa { display: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-mapa { display: flex; justify-content: center; margin: 0 0 12px; }
.app-ranking-mapa .caixa-inclinada { width: min(360px, 100%); }
.app-ranking-mapa select { width: 100%; }
html[data-app] #shopPanel .loja-item strong { font-size: 16px; line-height: 1.15; }

/* ---------- Expositor: rastros e personagens na janela da faca ---------- */
/* (!important: o three.js põe display: block no próprio canvas; sem isso a tela da faca, vazia,
   continuava por cima do expositor e engolia o toque nas peças de um kit.) */
.vitrine3d.expositor .vitrine3d-tela { display: none !important; }
.expositor-tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; }
.vitrine3d:not(.expositor) .expositor-tela { display: none; }
#vitrine3dPreco.loja-adquirido { color: #4ade80; }
/* O Ampliar das vitrines de Rastros e Personagens, como o das Facas. */
.rastro-vitrine .faca-ampliar.bv-loja { position: absolute; right: 16px; bottom: 12px; z-index: 2; }

/* ---------- Ranking: a foto do mapa e passar de mapa arrastando ---------- */
.app-ranking-cartao { display: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-cartao {
  position: relative; display: block; width: min(520px, 100%); margin: 0 auto 10px; overflow: hidden; aspect-ratio: 16 / 5.2; border-radius: 6px;
  box-shadow: inset 0 0 0 1px #ffffff24, 0 8px 20px #0008; touch-action: pan-y; user-select: none;
}
.app-ranking-cartao img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.app-ranking-cartao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #05070bd9, #05070b10 60%); pointer-events: none; }
.app-ranking-legenda { position: absolute; z-index: 1; left: 50%; bottom: 8px; transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; }
.app-ranking-legenda b { color: var(--ink); font: 700 20px/1.1 "Barlow Condensed", sans-serif; text-shadow: 0 2px 6px #000; }
.app-ranking-legenda small { color: var(--amber); font: 700 11px "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.app-ranking-seta.bv-loja { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 40px; min-height: 40px; padding: 0; justify-content: center; }
.app-ranking-seta.antes { left: 8px; } .app-ranking-seta.depois { right: 8px; }
.app-ranking-seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.app-ranking-cartao.passou-depois img { animation: ranking-passou-depois .28s ease-out; }
.app-ranking-cartao.passou-antes img { animation: ranking-passou-antes .28s ease-out; }
@keyframes ranking-passou-depois { from { transform: translateX(14%); opacity: .3; } }
@keyframes ranking-passou-antes { from { transform: translateX(-14%); opacity: .3; } }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .app-ranking-cartao img { animation: none !important; } }

/* O expositor (faca, rastro, personagem) cabe em qualquer altura do celular
   deitado: duas colunas sempre; o palco na altura que sobra; os dados rolam se precisar. */
html[data-app] .vitrine3d { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
html[data-app] .vitrine3d-caixa { grid-template-columns: minmax(0, 1fr) minmax(170px, 32%); gap: 14px; max-height: calc(100dvh - 16px); padding: 12px; }
html[data-app] .vitrine3d-palco { aspect-ratio: auto; min-height: 0; height: min(calc(100dvh - 42px), 62vh, 440px); }
html[data-app] .vitrine3d-dados { max-height: calc(100dvh - 42px); overflow-y: auto; overscroll-behavior: contain; align-content: center; }
/* A coluna rola (overflow), e o que rola corta o que passa da borda: os botões inclinados (a placa em
   losango passa uns 5 px de cada lado, mais a sombra) ganham folga em volta para aparecerem inteiros. */
html[data-app] .vitrine3d-dados .loja-acoes { padding: 4px 9px 10px; }
/* A foto do Ranking mais baixa: sobra lugar para a lista. */
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-cartao { aspect-ratio: 16 / 3.6; max-height: 120px; }

/* ---------- Introdução: o vídeo do logo, em tela cheia, antes do banner ---------- */
html[data-app] .app-intro { position: absolute; inset: 0; z-index: 5; background: #000; transition: opacity .5s ease; }
.app-intro[hidden] { display: none; }
.app-intro.saindo { opacity: 0; pointer-events: none; }
.app-intro video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.app-intro-pular, .app-intro-som {
  position: absolute; z-index: 1; top: max(14px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px;
  border: 1px solid #ffffff40; border-radius: 999px; background: #0008; color: #fff; font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.app-intro-pular { right: max(16px, env(safe-area-inset-right)); }
.app-intro-pular::after { content: "›"; font-size: 18px; line-height: 1; }
.app-intro-som { left: max(16px, env(safe-area-inset-left)); }
.app-intro-som[hidden] { display: none; }
.app-intro-som::before { content: "🔊"; font-size: 14px; }
/* Enquanto o vídeo toca, a barra e o "Carregando" esperam. */
html[data-app] .app-carregando.com-intro .app-carregando-barra, html[data-app] .app-carregando.com-intro > p { visibility: hidden; }


/* ---------- Perfil: as molduras e como ganhar ---------- */
.app-molduras { display: none; }
html[data-app] #settingsPanel[data-app-vista="perfil"] > .app-molduras { display: grid; gap: 10px; margin: 6px 0 14px; }
.app-molduras h3 { margin: 0; color: var(--ink); font: 700 18px "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.app-molduras-como, .app-molduras-aviso { margin: 0; color: #b5c2cc; font-size: 13px; line-height: 1.5; }
.app-molduras-aviso { color: var(--amber); }
.app-molduras-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }   /* as sete numa linha */
.app-moldura-carta { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 6px; background: #0b0f15; box-shadow: inset 0 0 0 1px #2a323d; text-align: center; }
.app-moldura-carta img { width: 48px; height: 72px; object-fit: contain; filter: grayscale(.7) brightness(.6); }
.app-moldura-carta.tem img { filter: none; }
.app-moldura-carta.atual { box-shadow: inset 0 0 0 2px var(--amber); }
/* As que são suas são botões: tocar passa a usar. */
button.app-moldura-carta { border: 0; color: inherit; font: inherit; cursor: pointer; }
button.app-moldura-carta:disabled { cursor: default; opacity: 1; }
button.app-moldura-carta:not(:disabled):active { transform: translateY(1px); }
button.app-moldura-carta.trocando { opacity: .6; }
.app-moldura-carta.atual em { color: var(--amber); }
.app-moldura-carta b { color: var(--ink); font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.app-moldura-carta small { color: var(--muted); font-size: 11px; }
.app-moldura-carta em { min-height: 14px; color: #c9b27a; font: 700 11px "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .04em; }
.app-moldura-carta.tem em { color: #4ade80; }
@media (max-width: 640px) { .app-molduras-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 4 + 3 */

/* ---------- Perfil: as conquistas (src/conquistas-tela.js) ---------- */
.app-conquistas { display: none; }
html[data-app] #settingsPanel[data-app-vista="perfil"] > .app-conquistas { display: grid; gap: 10px; margin: 6px 0 14px; }
.app-conquistas h3 { margin: 0; color: var(--ink); font: 700 18px "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.app-conquistas-resumo { margin: 0; color: #b5c2cc; font-size: 13px; line-height: 1.5; }
.app-conquistas-grupo { display: grid; gap: 6px; }
.app-conquistas-grupo h4 { margin: 4px 0 0; color: var(--amber); font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.app-conquistas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-conquista { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: #0b0f15; box-shadow: inset 0 0 0 1px #2a323d; }
.app-conquista.feita { box-shadow: inset 0 0 0 1.5px #ffc23d99; background: linear-gradient(100deg, #1a1508, #0b0f15 70%); }
/* A medalha: o emoji num círculo; apagada enquanto não é sua. */
.app-conquista-medalha { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b3440, #12171e); box-shadow: inset 0 0 0 2px #39424e; font-size: 24px; line-height: 1; filter: grayscale(1) brightness(.55); }
.app-conquista.feita .app-conquista-medalha { background: radial-gradient(circle at 35% 30%, #ffe08a, #b87a10); box-shadow: inset 0 0 0 2px #fff3c4, 0 0 14px #ffb00055; filter: none; }
.app-conquista-texto { display: grid; gap: 2px; min-width: 0; }
.app-conquista-texto b { color: var(--ink); font: 700 15px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.app-conquista-texto small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.app-conquista-texto em { color: #c9b27a; font: 700 11px "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .04em; }
.app-conquista-texto em.app-conquista-feita { color: #4ade80; }
.app-conquista-progresso { display: flex; align-items: center; gap: 6px; }
.app-conquista-serie { display: grid; gap: 2px; }
.app-conquista-progresso small { flex: none; color: #c9b27a; font: 700 11px "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.app-conquista-barra { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #1e252e; overflow: hidden; }
.app-conquista-barra > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #ff9a1f, #ffd34a); }
/* O prêmio: os Vectors que ela paga (ou pagou). */
.app-conquista-premio { padding: 3px 7px; border-radius: 999px; background: #1a1f27; color: #ffd34a; font: 800 12px "Barlow Condensed", sans-serif; letter-spacing: .03em; white-space: nowrap; }
.app-conquista-premio { display: flex; align-items: center; gap: 3px; }
.app-conquista-premio::after { content: ""; width: 15px; height: 15px; background: url("assets/vectors/moeda-64.webp") center / contain no-repeat; }
.app-conquista.feita .app-conquista-premio { background: #2b220c; }
@media (max-width: 640px) { .app-conquistas-grade { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Vitrines que cabem na tela deitada ----------
   A caixa do item (faca, rastro, personagem, spray) aparece inteira ao abrir: a
   altura é o que sobra abaixo do título. Antes a parte de baixo — a legenda e o
   Ampliar — ficava escondida pela borda da tela. */
html[data-app] #settingsPanel { --vitrine-altura: clamp(150px, calc(100dvh - 138px), 320px); }
html[data-app] #settingsPanel .faca-vitrine { aspect-ratio: auto; height: var(--vitrine-altura); }
html[data-app] #settingsPanel #rastroVitrine, html[data-app] #settingsPanel #personagemVitrineTela { aspect-ratio: auto; height: var(--vitrine-altura); }
html[data-app] #settingsPanel .spray-vitrine-parede { height: var(--vitrine-altura); }

/* ---------- Caixas da Loja no app: coluna simples ----------
   Sem a grade compartilhada (subgrid) do site: cada caixa é uma coluna que
   sempre contém o que tem dentro, as da mesma fileira ficam da mesma altura, e o
   preço e o botão vão para o pé da caixa. A caixa sem selo guarda o lugar dele,
   para os nomes da fileira ficarem na mesma linha. */
html[data-app] #shopPanel .loja-item { display: flex; flex-direction: column; grid-row: auto; }
html[data-app] #shopPanel .loja-item > * { flex: none; }
html[data-app] #shopPanel .loja-item > .loja-foto-botao + strong { margin-top: 40px; }
html[data-app] #shopPanel .loja-item > em { margin-top: auto; padding-top: 10px; line-height: 22px; }
html[data-app] #shopPanel .loja-item > .bv-loja { align-self: stretch; height: 44px; min-height: 44px; }
html[data-app] #shopPanel .loja-item > .loja-reembolso { align-self: flex-start; }

/* O personagem do lobby é um botão (girar com o dedo, tocar para trocar): o
   "apertado" dos botões no toque (style.css, opacity .72) deixava a moldura
   desbotada enquanto o dedo estava nela. Aqui ela fica sempre com a cor viva. */
#appPalco button.lobby-vaga:not(:disabled):active, #appPalco button.lobby-vaga:active { opacity: 1; }

/* ---------- Vectors no app ---------- */
/* O saldo no topo do lobby: a moedinha e o número; tocar abre a loja. */
.app-vectors[hidden] { display: none; }
/* O botão de Vectors nas caixas da loja: a largura toda, abaixo do Comprar. */
html[data-app] #shopPanel .loja-item > .bv-loja.loja-vectors { align-self: stretch; min-width: 0; height: 38px; min-height: 38px; margin-top: 6px; }
html[data-app] .loja-carteira { margin-bottom: 12px; }

/* ---------- Fim de corrida (src/fim-de-corrida.js) ----------
   A tela que fecha a corrida no app: o título (recorde ou colocação), o mapa, o
   personagem na moldura dele, o tempo, os Vectors que entraram, o progresso até
   a próxima moldura e, na partida online, a classificação. */
.fim-corrida { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 40%, #101a26e6, #05070bf2); backdrop-filter: blur(5px); animation: fim-entra .32s ease both; }
.fim-corrida[hidden], .fim-corrida [hidden] { display: none !important; }
@keyframes fim-entra { from { opacity: 0; transform: scale(1.03); } }
.fim-caixa { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; width: min(780px, 100%); max-height: 100%; }
.fim-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.fim-titulo { margin: 0; color: #fff; font: 800 clamp(26px, 9vh, 44px)/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 3px 0 #000a, 0 0 22px #ffb00040; }
.fim-corrida.recorde .fim-titulo, .fim-corrida[data-tipo="online"] .fim-titulo { color: var(--amber); }
.fim-mapa { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.fim-mapa-foto { flex: none; width: 84px; height: 48px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px #ffffff24; }
.fim-mapa span { display: grid; min-width: 0; }
.fim-mapa small { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.fim-mapa small.dif-facil { color: #79c96d; } .fim-mapa small.dif-medio { color: #e0b649; } .fim-mapa small.dif-dificil { color: #e3853f; } .fim-mapa small.dif-extremo { color: #e35043; } .fim-mapa small.dif-festa { color: #ef72d8; }
.fim-mapa b { overflow: hidden; color: #fff; font: 700 18px/1.15 "Barlow Condensed", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.fim-meio { display: grid; grid-template-columns: minmax(96px, 22%) minmax(0, 1fr); align-items: center; gap: 18px; min-height: 0; }
.fim-figura { position: relative; width: 100%; height: min(52vh, 250px); min-height: 0; }
/* O retrato dentro da abertura da moldura (o da sala usa transform para centrar: aqui é o translate). */
.fim-figura .lobby-boneco { position: absolute; left: 50%; bottom: 17%; width: auto; height: 68%; max-width: 78%; transform: none; translate: -50% 0; object-fit: contain; visibility: visible; }
.fim-dados { display: grid; align-content: center; gap: 7px; min-width: 0; }
.fim-linha { display: grid; grid-template-columns: 78px auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 5px 14px; border-radius: 6px; background: #0f151de0; box-shadow: inset 0 0 0 1px #2a323d; }
.fim-linha > span { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.fim-linha > b { display: flex; align-items: center; gap: 8px; color: #fff; font: 800 24px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.fim-linha > b i { font-style: normal; }
.fim-linha > em { overflow: hidden; color: #b5c2cc; font-size: 12px; font-style: normal; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.fim-tempo > b { color: var(--amber); font-size: 30px; font-variant-numeric: tabular-nums; }
/* O que entrou (os Vectors, o ponto do clã) no mesmo dourado; sem ganho, o branco das outras linhas. */
.fim-vectors.ganhou > b, .fim-cla.ganhou > b { color: #ffd76a; }
.fim-insignia { flex: none; width: 34px; height: 34px; object-fit: contain; }
.fim-barra { display: block; width: clamp(90px, 20vw, 190px); height: 10px; overflow: hidden; border-radius: 999px; background: #05070b; box-shadow: inset 0 0 0 1px #3d4855; }
.fim-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb000, #ff7a00); transition: width .6s ease; }
.fim-classificacao { display: grid; gap: 3px; max-height: 24vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.fim-classificacao li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 4px; background: #0f151db3; color: var(--ink); font-size: 13px; }
.fim-classificacao li span { color: var(--amber); font: 800 15px "Barlow Condensed", sans-serif; }
.fim-classificacao li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fim-classificacao li em { color: #b5c2cc; font-style: normal; font-variant-numeric: tabular-nums; }
.fim-classificacao li.eu { box-shadow: inset 0 0 0 1px var(--amber); }
.fim-classificacao li.fantasma b { color: #9fb4c6; }
.fim-classificacao li.fora { opacity: .6; }
.fim-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 2px 10px 4px; }
.fim-acoes .bv-loja { height: 46px; min-width: 170px; padding: 0 26px; font-size: 14px; }
.fim-acoes .bv-sair { height: 46px; padding: 0 22px; color: #ff9b8f; font-size: 12px; }
@media (max-height: 380px) {
  .fim-caixa { gap: 6px; }
  .fim-linha { min-height: 38px; padding: 3px 12px; }
  .fim-tempo > b { font-size: 26px; }
  .fim-figura { height: min(48vh, 190px); }
  .fim-acoes .bv-loja, .fim-acoes .bv-sair { height: 42px; }
}
/* Partida online: as linhas mais baixas, para a classificação inteira (até 4) caber sem rolar. */
.fim-corrida[data-tipo="online"] .fim-caixa { gap: 6px; }
.fim-corrida[data-tipo="online"] .fim-dados { gap: 5px; }
.fim-corrida[data-tipo="online"] .fim-linha { min-height: 34px; padding: 2px 12px; }
.fim-corrida[data-tipo="online"] .fim-linha > b { font-size: 20px; }
.fim-corrida[data-tipo="online"] .fim-tempo > b { font-size: 22px; }
.fim-corrida[data-tipo="online"] .fim-insignia { width: 28px; height: 28px; }
.fim-corrida[data-tipo="online"] .fim-classificacao { max-height: none; }
.fim-corrida[data-tipo="online"] .fim-classificacao li { padding: 2px 12px; }
.fim-corrida[data-tipo="online"] .fim-acoes .bv-loja { height: 42px; }
@media (prefers-reduced-motion: reduce) { .fim-corrida { animation: none; } }

/* ---------- A tela da busca e do carregamento (src/lobby-app.js mostrarCorrida, 04/11/2026) ----------
   Pelo vídeo de referência do dono: o galpão do lobby com o portão mostrando o mapa da partida, e o seu boneco de
   costas, correndo e dando bhop rumo a ele. Procurando, o cenário vem chegando devagar (.chegando); formada a
   partida, a câmera entra no portão (.dentro) e o mapa toma a tela. Duas camadas de texto por cima: a da busca
   (#appBusca) e a da partida; embaixo, sempre, o Sair à esquerda, a dica no meio e o mapa à direita. */
.app-encontrada {
  --tela-h: 100vh; --tela-w: 100vw; --cena-h: max(var(--tela-h), calc(var(--tela-w) / 2.3337)); --contorno: #120a1c;
  /* O boneco: a altura dele e, em cima, a folga do pulo (o bhop sobe ~22% da altura): a cabeça não sai da tela 3D
     nem chega no título, nos rostos e no aviso de cima (qa/tela-da-corrida.mjs confere). */
  --eu: min(calc(var(--tela-h) * .46), 280px); --folga-do-pulo: calc(var(--eu) * .26);
  position: fixed; inset: 0; z-index: 90; overflow: hidden; background: #07050c; color: #fff; animation: app-folha .2s ease-out;
  font-family: Barlow, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none;
}
@supports (height: 100dvh) { .app-encontrada { --tela-h: 100dvh; } }
.app-encontrada[hidden] { display: none !important; }
.app-encontrada.saindo { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
/* O cenário (o mesmo do lobby): chegando perto do portão, e depois entrando nele. */
.app-encontrada .app-corrida-cena { z-index: 0; }
.app-encontrada .app-cena { transform-origin: 50% 42%; transition: scale 60s linear; }
.app-encontrada.chegando .app-cena { scale: 1.22; }
.app-encontrada.dentro .app-cena { scale: 3.6; transition: scale .95s cubic-bezier(.55, 0, .85, .3); }
/* Lá dentro, o mapa: a foto inteira, nítida, entra no fim do mergulho. */
.app-encontrada-fundo { position: absolute; inset: -3%; z-index: 0; width: 106%; height: 106%; object-fit: cover; opacity: 0; filter: brightness(.62) saturate(1.15); transition: opacity .45s ease .7s; }
.app-encontrada.dentro .app-encontrada-fundo { opacity: 1; }
.app-encontrada-fundo:not([src]), .app-encontrada-fundo[src=""] { visibility: hidden; }
/* O clarão de passar pelo portão. */
.app-corrida-clarao { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, #fff6dc, #ffcf6ae6 30%, #ff9a0059 60%, transparent 80%); }
.app-encontrada.dentro .app-corrida-clarao { animation: app-corrida-clarao 1.2s ease-out .45s both; }
@keyframes app-corrida-clarao { 0% { opacity: 0; } 35% { opacity: .95; } 100% { opacity: 0; } }
/* Escurece em cima e embaixo: é onde a tela escreve. */
.app-encontrada::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #08050fd9 0%, transparent 26%, transparent 62%, #08050fe6 100%); }

/* O seu boneco: no meio, em pé no chão do galpão, de costas para quem olha. */
/* A tela 3D vai de uma borda à outra e até o pé da tela (04/11/2026: do tamanho só do boneco, ela cortava o rastro e
   a faca num quadrado). Em cima ela para onde parava (a folga do pulo, abaixo dos textos do topo); o boneco fica no
   meio, em pé no mesmo lugar. */
.app-encontrada-palco {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
  padding: var(--folga-do-pulo) 0 max(6px, calc(var(--tela-h) * .04)); pointer-events: none;
}
.app-encontrada-palco > .lobby-palco-3d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.app-encontrada-vaga { position: relative; }
.app-encontrada-vaga.com-3d .lobby-boneco { visibility: hidden; }
.app-encontrada-eu { position: relative; width: auto; height: var(--eu); min-height: 0; aspect-ratio: 2 / 3; }
.app-encontrada-eu .lobby-boneco { position: absolute; left: 50%; bottom: 0; width: auto; height: 92%; max-width: 100%; transform: none; translate: -50% 0; object-fit: contain; visibility: visible; filter: drop-shadow(0 8px 14px #000c); }
/* A sombra nos pés. */
.app-encontrada-eu::after { content: ""; position: absolute; left: 50%; bottom: -4%; z-index: -1; width: 70%; height: 10%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, #000000b3, transparent 70%); }

/* As camadas de texto: o topo (quem chegou) e a base (Sair, dica, mapa). */
.app-corrida-camada { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto 1fr auto; pointer-events: none;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.app-corrida-camada[hidden] { display: none !important; }
.app-corrida-camada > * { pointer-events: auto; }
.app-corrida-topo { display: grid; justify-items: center; gap: 6px; }
.app-corrida-base { grid-row: 3; display: grid; grid-template-columns: 1fr minmax(0, 2fr) 1fr; align-items: end; gap: 12px; }
.app-corrida-base > :first-child { justify-self: start; }
.app-corrida-mapa { justify-self: end; display: grid; justify-items: end; gap: 5px; }
/* O título: "Procurando jogadores 1/4", "Jogadores encontrados: 3/4", "Treino solo". */
.app-busca-titulo, .app-encontrada-conta { display: flex; align-items: baseline; gap: 10px; margin: 0; color: #fff; font: 800 clamp(20px, 6.4vh, 30px)/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .05em; text-transform: uppercase; text-align: center;
  -webkit-text-stroke: 4px var(--contorno); paint-order: stroke fill; text-shadow: 0 3px 0 var(--contorno), 0 0 18px #000; }
.app-busca-conta { color: #ffd84a; font: inherit; letter-spacing: .06em; }
/* Quem já chegou: os rostos, pequenos, debaixo do título. */
.app-busca-vagas { display: flex; justify-content: center; gap: 8px; }
.app-busca-vaga { display: grid; justify-items: center; gap: 2px; width: 62px; min-width: 0; animation: vx-carta-entra .32s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.app-busca-vaga img, .app-busca-vaga.vazia { width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; }
.app-busca-vaga img { object-fit: contain; object-position: 50% 100%; padding: 3px 3px 0; border: 2.5px solid var(--contorno); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cor) 55%, #2b2049), #150e26 85%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 80%, transparent), 0 3px 0 2px #000000a6; }
.app-busca-vaga.eu img { box-shadow: 0 0 0 2px #ffcf4a, 0 0 12px 3px #ffb00073; }
.app-busca-vaga b { max-width: 100%; color: #fff; font: 800 12px/1.05 "Barlow Condensed", sans-serif; text-align: center; overflow-wrap: anywhere; -webkit-text-stroke: 2.5px var(--contorno); paint-order: stroke fill; }
.app-busca-vaga.eu b { color: #ffd84a; }
.app-busca-vaga.fantasma img { opacity: .8; filter: saturate(.6); }
.app-busca-vaga.vazia { display: grid; place-items: center; justify-self: center; border: 2.5px dashed #8f7fc0; background: #0f0a1c99; color: #c9bdf0; font: 800 20px "Barlow Condensed", sans-serif; animation: app-marca 1.8s ease-in-out infinite; }
/* O que falta: "Os fantasmas do top 3 entram em 25 s", "Começa em 5 s". */
.app-busca-dica { margin: 0; padding: 3px 12px; border: 2px solid var(--contorno); border-radius: 999px; background: #120a1ccc; color: #e7dcff; font: 700 13px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-align: center; }
/* O mapa (à direita, embaixo) e a barra: na busca, o tempo dela; na partida, o carregamento. */
.app-busca-mapa, .app-encontrada-mapa { margin: 0; color: #fff; font: 800 15px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-align: right; white-space: nowrap; -webkit-text-stroke: 3px var(--contorno); paint-order: stroke fill; }
.app-busca-barra, .app-encontrada-barra { display: block; width: min(190px, 26vw); height: 12px; overflow: hidden; border: 2px solid var(--contorno); border-radius: 999px; background: #0f0a1c; box-shadow: 0 1px 0 #ffffff26; }
.app-busca-barra i, .app-encontrada-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe45c, #ffb000 55%, #ff7a00); transition: width .25s linear; }
.app-encontrada-carga { display: flex; align-items: center; gap: 8px; }
.app-encontrada-porcento { min-width: 3.2em; color: #ffd84a; font: 800 16px/1 "Barlow Condensed", sans-serif; text-align: right; -webkit-text-stroke: 3px var(--contorno); paint-order: stroke fill; }
/* A dica do jogo, no meio, embaixo. */
.app-corrida-dica, .app-encontrada-dica { justify-self: center; min-width: 0; max-width: min(520px, 100%); margin: 0; color: #f3eeff; font: 700 14px/1.3 "Barlow Condensed", sans-serif; letter-spacing: .02em; text-align: center; text-wrap: balance; -webkit-text-stroke: 3px var(--contorno); paint-order: stroke fill; }
/* Os botões vermelhos (Cancelar, Sair), à esquerda, embaixo. */
.app-busca-cancelar.bv-loja, .app-encontrada-sair.bv-loja { min-height: 40px; padding: 0 22px; }
/* Quem vai correr (os fantasmas também), debaixo do título. */
.app-encontrada-gente { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.app-encontrada-jogador { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px 3px 3px; border: 2.5px solid var(--contorno); border-radius: 999px; background: var(--painel, linear-gradient(180deg, #2b2049, #171029)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cor) 70%, transparent), 0 3px 0 #000000a6; animation: vx-carta-entra .32s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.app-encontrada-jogador:nth-child(2) { animation-delay: 90ms; } .app-encontrada-jogador:nth-child(3) { animation-delay: 180ms; } .app-encontrada-jogador:nth-child(4) { animation-delay: 270ms; }
.app-encontrada-jogador img { flex: none; width: 28px; height: 28px; object-fit: contain; object-position: 50% 100%; padding: 2px 2px 0; box-sizing: border-box; border: 2px solid var(--contorno); border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cor) 55%, #2b2049), #150e26 85%); }
.app-encontrada-jogador b { color: #fff; font: 800 14px "Barlow Condensed", sans-serif; letter-spacing: .03em; white-space: nowrap; }
.app-encontrada-jogador.eu { box-shadow: inset 0 0 0 2px #ffcf4a, 0 3px 0 #000000a6; }
.app-encontrada-jogador.eu b { color: #ffd84a; }
.app-encontrada-jogador.fantasma b { color: #c9bdf0; }
/* Tela baixa: menos espaço em cima. */
@media (max-height: 340px) { .app-busca-vagas { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .app-encontrada .app-cena { transition: none; }
  .app-encontrada.chegando .app-cena { scale: 1; }
  .app-corrida-clarao, .app-busca-vaga.vazia, .app-busca-vaga, .app-encontrada-jogador { animation: none !important; }
}

/* ---------- A escolha de mapas cabe inteira na tela (sem rolar) ---------- */
/* A folha não rola nem para cima nem para baixo: o dedo que arrasta os mapas para o lado
   com um desvio não a desloca. O cabeçalho fica numa linha só (título, busca,
   dificuldade, setas) e os cartões ocupam o resto da altura, com a descrição inteira. */
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu > .picker { display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; touch-action: none; }
/* O cabeçalho e o carrossel moram dentro de #mapPanel: é ele que reparte a altura. */
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker > #mapPanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-head { flex: none; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; margin: 0 0 8px; padding-right: 50px; min-width: 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-head .panel-title { flex: none; display: flex; align-items: center; width: auto; margin: 0; padding: 0; font-size: 21px; text-align: left; white-space: nowrap; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-head .panel-title img.app-titulo-icone { width: 34px; height: 34px; margin: -4px 8px -4px 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-tools { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .busca-mapa { flex: 0 1 170px; min-width: 84px; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .busca-mapa input { width: 100%; min-width: 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .map-arrows { flex: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .carousel { flex: 1 1 auto; min-height: 0; max-height: 330px; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .viewport { height: 100%; touch-action: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-card { display: flex; flex-direction: column; height: calc(100% - 4px); }
/* A foto cede altura para o texto: o nome e a descrição inteira têm o lugar garantido. */
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-shot { flex: 1 1 0; min-height: 56px; overflow: hidden; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-shot img { width: 100%; height: 100%; object-fit: cover; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-body { flex: none; padding: 7px 10px 9px; }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-heading b { font-size: 16px; }
/* Toda descrição tem a altura da mais comprida (--descricao, medida em src/lobby-app.js): a foto fica
   do mesmo tamanho em todos os mapas, e o "✓ Feito" (na base da foto) fica na mesma altura — sem
   cortar texto nenhum. */
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-description { margin-top: 3px; font-size: 11px; line-height: 1.32; height: var(--descricao, auto); }
html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .map-heading { white-space: nowrap; }
@media (max-width: 720px) {
  html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-head .panel-title img.app-titulo-icone { display: none; }
  html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .picker .panel-head .panel-title { font-size: 18px; }
  html[data-app] #overlay.app-mapas[data-app-mapas="mapas"] .menu .viewport { --per-view: 3.3; }
}

/* ---------- Equipe: Pronto dos membros e o JOGAR do líder ---------- */
/* A placa de quem confirmou acende em verde, com o visto. */
.app-placa.pronto { border-color: #1c7a40; box-shadow: inset 0 0 0 2px #4ade80, 0 3px 0 #000000a6; }
.app-placa.pronto::after { content: "✓"; position: absolute; right: -7px; top: -9px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #4ade80; color: #06210f; font: 800 13px/1 "Segoe UI", sans-serif; box-shadow: 0 1px 4px #000a; }
/* O campeão na tela de fim da partida online. */
.fim-campeao { position: absolute; z-index: 3; left: 50%; bottom: 1%; transform: translateX(-50%); max-width: 130%; padding: 2px 10px; overflow: hidden; border-radius: 3px; background: #0b0f15ec; box-shadow: inset 0 0 0 1px #ffb00080; color: #ffd27a; font: 700 14px/1.25 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.fim-campeao[hidden] { display: none; }

/* ---------- O Ranking cabe inteiro na tela (o "Ver +" é que libera a rolagem) ---------- */
/* Fechado (top 3): a folha não rola. A foto do mapa e o seletor ficam à esquerda; o
   título, os três tempos e os botões, à direita. */
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .menu > .picker:not(:has(#rankList.aberto)) { display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; touch-action: none; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker > #mapPanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "cartao titulo" "cartao lista" "seletor acoes"; column-gap: 16px; row-gap: 8px; align-items: start;
}
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > h3 { grid-area: titulo; margin: 0; padding: 0 44px 0 0; font-size: 22px; text-align: left; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > h3 img.app-titulo-icone { width: 32px; height: 32px; margin: -4px 8px -4px 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > h3 em { margin-top: 2px; font-size: 11px; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-cartao { grid-area: cartao; align-self: stretch; width: 100%; height: 100%; min-height: 110px; max-height: none; margin: 0; aspect-ratio: auto; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-mapa { grid-area: seletor; margin: 0; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .app-ranking-mapa .caixa-inclinada { width: 100%; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > .ranking-lista { grid-area: lista; min-height: 0; margin: 0; align-self: stretch; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > .ranking-acoes { grid-area: acoes; margin: 0; align-self: end; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > .avisos-desafio,
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker .ranking > .desafio-info { grid-column: 1 / -1; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] #rankList li { min-height: 0; padding-top: 5px; padding-bottom: 5px; }
/* Aberto (top 10): a lista cresce e a folha rola. */
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .menu > .picker:has(#rankList.aberto) { overflow-y: auto; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker:has(#rankList.aberto) .ranking { grid-template-rows: auto auto auto; }
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker:has(#rankList.aberto) .app-ranking-cartao { align-self: start; height: auto; aspect-ratio: 16 / 9; }

/* ---------- Abertura de pé: virar o celular antes do vídeo ---------- */
html[data-app] .app-virar { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; background: radial-gradient(ellipse at 50% 40%, #1a1206, #07080b 70%); color: var(--ink); text-align: center; }
html[data-app] .app-virar[hidden] { display: none; }
/* O Ranking fechado tem lugar de sobra: as três linhas do pódio mais altas. */
html[data-app] #overlay.app-mapas[data-app-mapas="ranking"] .picker:not(:has(#rankList.aberto)) #rankList li { padding-top: 12px; padding-bottom: 12px; font-size: 15px; }

/* O botão de entrar com o Google na tela de fim (sem conta, com Vectors esperando). */
.fim-entrar { flex: none; margin-left: 10px; padding: 7px 12px; border: 0; border-radius: 4px; background: #fff; color: #1f1f1f; font: 700 13px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px #0008; }
.fim-entrar[hidden] { display: none; }
.fim-entrar:active { transform: translateY(1px); }
.fim-linha.esperando > em { color: #ffd27a; }
/* Com o botão de entrar, a linha ganha a quarta coluna (o botão no fim, o aviso antes dele). */
.fim-linha.esperando { grid-template-columns: 78px auto minmax(0, 1fr) auto; }
.fim-linha.esperando > .fim-entrar { margin-left: 0; }

/* Os gestos do lobby (src/gestos.js): só os emojis, no meio, logo acima da sua placa (pedido de
   14/10/2026). Sobem para a faixa do topo, no meio dela, que fica livre: o topo deixa o toque passar
   onde não tem nada. */
.app-eu-topo { position: absolute; z-index: 4; left: 50%; bottom: calc(100% - 4%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: calc(100% + var(--vao) * 2 - 20px); pointer-events: none; }
.app-eu-topo > .app-placa { position: relative; left: auto; bottom: auto; transform: none; max-width: 100%; }
/* Sozinho no lobby, os lados de cima do portão estão livres: a placa pode passar da vaga (o ícone do clã cabe
   sem encolher o nome). Na equipe vale o limite de cima, por causa das placas dos companheiros. */
.app-lobby:not(.em-equipe) .app-eu-topo { max-width: max(calc(100% + var(--vao) * 2 - 20px), 260px); }
.app-eu-topo > .app-gestos { gap: clamp(8px, 1.6vw, 14px); pointer-events: auto; }
.app-eu-topo .gesto { width: clamp(26px, 7.4vh, 34px); height: var(--gesto-h); font-size: clamp(19px, 5.6vh, 25px); }
.app-lobby { --gesto-h: clamp(24px, 6.8vh, 30px); }
/* Na equipe, o meio do topo é da barra dela (quantos são e o Sair): o palco desce a altura dos
   gestos (onde o boneco já cabia folgado, nada muda), e eles ficam embaixo da barra. */
.app-lobby.em-equipe .app-palco { --gestos-h: calc(var(--gesto-h) + 4px); }
.app-topo { pointer-events: none; }
.app-topo > :not(.app-espaco) { pointer-events: auto; }
/* A tela de fim de corrida: o boneco vivo na moldura (./palco-3d.js). O palco tem folga em cima, para o pulo. */
.fim-palco { position: relative; min-width: 0; padding-top: 30px; margin-top: -30px; }
.fim-palco > .lobby-palco-3d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.fim-vaga { position: relative; }
.fim-vaga.com-3d .fim-figura .lobby-boneco { visibility: hidden; }

/* ---------- Prêmios diários (src/premios-lobby.js): as folhas e a tela do prêmio ---------- */
/* O aviso curto do lobby (um prêmio que não deu para receber). */
.app-aviso { position: absolute; z-index: 50; left: 50%; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 84px); translate: -50% 0; max-width: 80%; margin: 0; padding: 8px 16px; border: 2.5px solid var(--contorno); border-radius: 10px; background: var(--painel); box-shadow: var(--painel-sombra); color: var(--ink); font: 600 13px Barlow, sans-serif; text-align: center; animation: app-folha .16s ease-out; }
.app-aviso[hidden] { display: none; }
/* As duas folhas (estrelas do dia e login diário) no desenho do lobby novo; abrem com um pulinho. */
.app-folha-premio .app-folha-caixa { width: min(560px, 100%); gap: 10px; border: 2.5px solid var(--contorno); border-radius: 16px; background: linear-gradient(180deg, #2b2049, #150e26); box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6, 0 24px 60px #000d; }
.app-folha-login .app-folha-caixa { width: min(720px, 100%); }
.app-folha-premio h3 { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 44px; color: #ffe45c; text-shadow: 0 2px 0 #0009; }
.app-folha-premio h3 .app-titulo-icone { width: 40px; height: 40px; margin: -8px 8px -6px 0; }
.app-premio-como { margin: 0; color: #d9d2ee; font-size: 13px; line-height: 1.45; text-align: center; }
.app-premio-relogio { margin: 0; color: #a99fc4; font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.app-premio-relogio[hidden] { display: none; }
.app-premio-conta:empty { display: none; }
.app-premio-conta, .app-login-pe { display: grid; justify-items: center; gap: 8px; }
/* Sem conta, a folha das estrelas põe o convite e o botão de entrar lado a lado: a folha cabe inteira na
   tela deitada, sem rolar (pedido de 08/10/2026). */
.app-premio-conta { display: flex; align-items: center; justify-content: center; gap: 14px; }
.app-premio-conta p { flex: 0 1 auto; min-width: 0; line-height: 1.15; }
.app-premio-conta .app-premio-entrar.bv-loja { flex: none; min-width: 0; padding: 0 20px; letter-spacing: .1em; }
.app-premio-conta p, .app-login-pe p { margin: 0; color: #ffd76a; font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: .04em; text-align: center; }
.app-premio-entrar.bv-loja, .app-login-receber.bv-loja { height: 44px; min-width: 190px; padding: 0 26px; font-size: 14px; }
/* A folha das estrelas: uma linha por estrela — a arte, quanto falta e o Receber. */
.app-estrelas-linhas { display: grid; gap: 7px; }
.app-estrela-linha { --estrela: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 5px 14px 5px 10px; border: 2.5px solid var(--contorno); border-radius: 12px; background: #0f0a1cb3; box-shadow: inset 0 1px 0 #ffffff14; }
.app-estrela-linha[data-estado="disponivel"] { background: linear-gradient(90deg, #4a3408, #1d1430 70%); box-shadow: inset 0 0 0 1.5px #ffcf4a99; }
.app-estrela-linha[data-estado="disponivel"] .app-estrela-arte img { animation: app-pulso 1.3s ease-in-out infinite; }
.app-estrela-texto { display: grid; gap: 4px; min-width: 0; }
.app-estrela-texto b { color: var(--ink); font: 800 16px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.app-estrela-barra { position: relative; display: block; height: 14px; overflow: hidden; border-radius: 5px; background: #00000080; box-shadow: inset 0 0 0 1px #ffffff1f; }
.app-estrela-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(180deg, #ffe45c, #ff9d00); transition: width .5s ease; }
.app-estrela-barra em { position: relative; display: block; color: #fff; font: 800 10px/14px "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .08em; text-align: center; text-shadow: 0 1px 2px #000d; }
.app-estrela-linha > em { color: #b9b2cc; font: 700 13px "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.app-estrela-linha[data-estado="recebida"] > em { color: #7ee2a0; }
.app-estrela-receber.bv-loja { height: 36px; padding: 0 20px; font-size: 13px; }
/* A folha do login: os sete dias lado a lado; o sétimo, com o baú, maior. */
.app-login-dias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.55fr); gap: 6px; padding-top: 6px; }
.app-login-dia { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 96px; padding: 5px 2px 6px; border: 2.5px solid var(--contorno); border-radius: 12px; background: #0f0a1cb3; box-shadow: inset 0 1px 0 #ffffff14; }
.app-login-dia small { color: #cfc6e6; font: 800 11px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.app-login-arte { display: block; width: clamp(28px, 6vw, 42px); aspect-ratio: 1; }
.app-login-arte img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 #00000080); }
.app-login-dia b { color: #ffd76a; font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-shadow: 0 2px 0 #0009; }
.app-login-dia em { position: absolute; left: 50%; top: -9px; translate: -50% 0; padding: 1px 8px; border: 2px solid var(--contorno); border-radius: 999px; background: linear-gradient(180deg, #ffe45c, #ff9d00); color: #2a1200; font: 800 10px/1.3 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* Futuro: apagado. Hoje: aceso, pulsando. Recebido: com o visto. */
.app-login-dia[data-estado="futuro"] { opacity: .62; }
.app-login-dia[data-estado="futuro"] .app-login-arte img { filter: grayscale(.75) brightness(.7) drop-shadow(0 2px 0 #00000080); }
.app-login-dia[data-estado="hoje"] { background: linear-gradient(180deg, #5a3f0a, #2a1c08); box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 18px #ffb00059; animation: app-login-hoje 1.6s ease-in-out infinite; }
.app-login-dia[data-estado="hoje"] .app-login-arte img { animation: app-pulso 1.3s ease-in-out infinite; }
.app-login-dia[data-estado="recebido"] { background: #12301fcc; box-shadow: inset 0 0 0 1.5px #3ddc7780; }
.app-login-dia[data-estado="recebido"] b { color: #7ee2a0; }
.app-login-visto { position: absolute; right: -5px; top: -7px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--contorno); border-radius: 50%; background: #3ddc77; color: #06210f; font: 800 12px/1 "Segoe UI", sans-serif; font-style: normal; }
.app-login-dia.final { background: linear-gradient(180deg, #3a1d6e, #1b0f38); box-shadow: inset 0 0 0 2px #b98cff99; }
.app-login-dia.final .app-login-arte { width: clamp(42px, 9vw, 62px); }
.app-login-dia.final b { font-size: 21px; }
.app-login-dia.final[data-estado="futuro"] { opacity: .85; }
.app-login-dia.final[data-estado="futuro"] .app-login-arte img { filter: drop-shadow(0 2px 0 #00000080); animation: app-flutua 3.4s ease-in-out infinite; }
.app-login-dia.final[data-estado="hoje"] { box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 24px #ffb00080; }
.app-login-dia.final[data-estado="recebido"] { background: #12301fcc; box-shadow: inset 0 0 0 1.5px #3ddc7780; }
@keyframes app-login-hoje { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
/* A tela do prêmio: os raios girando, a arte que chega rodando e o quanto entrou. Um toque fecha. */
.app-premio { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, #33195fe6, #07050cf5); cursor: pointer; animation: app-folha .16s ease-out; }
.app-premio[hidden] { display: none; }
.app-premio-raios { position: absolute; left: 50%; top: 44%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(#ffd84a2e 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 44%); mask: radial-gradient(circle, #000 0, transparent 44%); animation: app-gira 26s linear infinite; }
.app-premio[data-tipo="final"] .app-premio-raios { background: repeating-conic-gradient(#c9a2ff3d 0 9deg, #ffd84a2e 9deg 18deg, transparent 18deg 27deg); }
.app-premio-caixa { position: relative; display: grid; justify-items: center; gap: 2px; animation: app-premio-entra .5s cubic-bezier(.2, 1.4, .4, 1); }
.app-premio-arte { display: block; width: clamp(92px, 36vh, 190px); aspect-ratio: 1; }
.app-premio-arte img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 0 #00000073) drop-shadow(0 0 28px #ffb000a6); animation: app-premio-gira 1.1s cubic-bezier(.2, .8, .2, 1); }
.app-premio em { color: #ffe9a8; font: 800 clamp(13px, 4.6vh, 18px)/1.2 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 0 #0009; }
.app-premio-valor { display: flex; align-items: center; gap: .14em; color: #ffe45c; font: 800 clamp(40px, 17vh, 72px)/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; -webkit-text-stroke: 6px var(--contorno); paint-order: stroke fill; text-shadow: 0 5px 0 #000000a6; }
.app-premio-valor img { width: .82em; height: .82em; filter: drop-shadow(0 3px 0 #00000080); }
.app-premio.sem-premio .app-premio-valor { display: none; }
.app-premio.sem-premio .app-premio-arte img { filter: grayscale(.8) brightness(.7) drop-shadow(0 8px 0 #00000073); }
.app-premio small { color: #cfc6e6; font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
@keyframes app-premio-entra { from { opacity: 0; transform: scale(.5); } }
@keyframes app-premio-gira { from { transform: perspective(500px) rotateY(-540deg) scale(.4); } }
/* As moedas que saem do prêmio e voam até o saldo, no topo. */
.app-moeda-voando { position: fixed; z-index: 120; width: 30px; height: 30px; pointer-events: none; filter: drop-shadow(0 2px 0 #00000080); }
@media (max-height: 400px) {
  .app-folha-premio .app-folha-caixa { gap: 6px; padding: 10px 16px 12px; }
  .app-folha-premio h3 .app-titulo-icone { width: 34px; height: 34px; margin: -6px 8px -5px 0; }
  .app-estrela-linha { --estrela: 34px; min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
  .app-estrelas-linhas { gap: 6px; }
  .app-premio-entrar.bv-loja, .app-login-receber.bv-loja { height: 38px; }
  .app-login-dia { min-height: 88px; }
  .app-login-dia.final .app-login-arte { width: 46px; }
  .app-login-dia.final b { font-size: 18px; }
  .app-premio-como { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-estrela-linha .app-estrela-arte img, .app-login-dia, .app-login-arte img, .app-premio-raios, .app-premio-caixa, .app-premio-arte img { animation: none !important; }
}
/* A fase da conta no login diário: a primeira semana (prêmios cheios) ou os ciclos seguintes (a metade). */
.app-login-fase { justify-self: center; margin: 0; padding: 2px 12px; border: 2px solid var(--contorno); border-radius: 999px; background: linear-gradient(180deg, #ffe45c, #ff9d00); color: #2a1200; font: 800 11.5px/1.35 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.app-login-fase[data-fase="seguinte"] { background: linear-gradient(180deg, #3a1d6e, #241247); color: #e3d4ff; }

/* ---------- O navegador do PC com a cara do app (data-app="web", src/plataforma.js caraDeApp) ----------
   Um celular deitado ampliado: os grupos de botões presos nos cantos crescem com a altura da janela
   (src/main.js põe --zoom-pc: a altura / 768, de 1 a 1,8). Só com mouse; o app não passa por aqui. */
@media (hover: hover) and (pointer: fine) {
  html[data-app="web"] .app-lobby :is(.app-topo, .app-lateral, .app-base) { zoom: var(--zoom-pc, 1); }
  /* No palco, o que fica em cima de quem está nas vagas (a placa, os gestos, o + de convidar) cresce no
     lugar (scale, que não mexe na posição). */
  html[data-app="web"] .app-lobby :is(.app-placa, .app-gestos) { scale: var(--zoom-pc, 1); transform-origin: 50% 100%; }
  html[data-app="web"] .app-lobby .app-vaga-livre > * { scale: var(--zoom-pc, 1); }
  html[data-app="web"] .app-lobby .app-gestos { translate: 0 calc((1 - var(--zoom-pc, 1)) * 24px); }
}
/* O Pix no navegador com a cara do app (src/main.js gerarPix o põe no <body>): uma janela no meio da tela,
   por cima da loja e do apoio, com o resto escurecido. */
html[data-app="web"] body > .loja-pix:not([hidden]) {
  position: fixed; z-index: 1000; left: 50%; top: 50%; translate: -50% -50%; width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  margin: 0; padding: 18px; border: 2.5px solid #120a1c; border-radius: 16px; background: linear-gradient(180deg, #2b2049, #171029);
  box-shadow: 0 0 0 100vmax #000000b8, inset 0 1px 0 #ffffff33, 0 10px 30px #000; color: #f4efe6;
}
/* Tudo numa tela só, sem rolar (pedido de 28/10/2026, no iPhone deitado): a foto do item é uma miniatura
   (o desenho quadrado do pacote de Vectors ocupava metade da janela) e o QR encolhe na tela baixa. */
html[data-app="web"] body > .loja-pix:not([hidden]) .loja-pix-foto { width: auto; max-width: 100%; height: clamp(40px, 14dvh, 96px); object-fit: contain; }
html[data-app="web"] body > .loja-pix:not([hidden]) .loja-qr { width: clamp(120px, 42dvh, 176px); height: clamp(120px, 42dvh, 176px); }
html[data-app="web"] body > .loja-pix:not([hidden]) .loja-pix-dados { gap: 6px; }
@media (max-height: 420px) {
  html[data-app="web"] body > .loja-pix:not([hidden]) { padding: 10px 14px; }
  html[data-app="web"] body > .loja-pix:not([hidden]) .loja-pix-dados input { height: 34px; padding-block: 0; }
  html[data-app="web"] body > .loja-pix:not([hidden]) #lojaPixEstado { margin: 0; font-size: 12px; line-height: 1.3; }
}

/* ---------- O passe de temporada (src/passe-lobby.js) ----------
   Em cima, a arte da temporada com o título, o nível (o selo e a barra de XP) e o Comprar; embaixo, as duas
   trilhas lado a lado — a do passe em cima, a grátis embaixo, o trilho dos níveis no meio —, que rolam de lado.
   Tudo cabe na altura do celular deitado: os tamanhos seguem a altura da tela. */
.app-folha-passe { padding: 10px; }
.app-folha-passe .app-folha-caixa {
  --premio: clamp(64px, 22dvh, 132px);
  /* À esquerda o herói da temporada em 3D (04/11/2026); à direita o topo e as trilhas. */
  display: grid; grid-template-columns: clamp(150px, 22%, 290px) minmax(0, 1fr); gap: 8px; width: min(1180px, 100%); height: min(calc(100dvh - 20px), 640px); max-height: none; overflow: hidden; padding: 8px 10px 8px;
  border: 2.5px solid var(--contorno, #120a1c); border-radius: 16px; background: linear-gradient(180deg, #2b2049, #150e26); box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6, 0 24px 60px #000d;
}
.app-folha-passe .app-folha-fechar { z-index: 3; }
.passe-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.passe-topo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 14px; flex: none;
  /* O herói está no palco ao lado: o topo leva o cenário da temporada, e a folga da direita é só a do Fechar. */
  min-height: clamp(70px, 22dvh, 150px); padding: 8px 56px 8px 16px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px;
  background: #1a1450 center 40% / cover no-repeat; box-shadow: inset 0 1px 0 #ffffff33;
}
/* O cenário por baixo, escurecido para o texto e os botões. */
.passe-topo::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, #120a2ef2 0%, #120a2ed9 60%, #120a2eb3 100%); pointer-events: none; }

/* ---------- O herói da temporada (src/passe-lobby.js vestirHeroi): o boneco 3D com o conjunto do passe ----------
   Atrás, raios girando devagar e brilhos subindo; embaixo, o pedestal dourado pulsando. Arrastar gira o herói,
   tocar faz ele acenar. Em baixo do palco, o nome e as peças do conjunto com o nível de cada uma. */
.passe-heroi {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 4px; min-width: 0; min-height: 0; overflow: hidden; padding: 4px 6px 7px;
  border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px;
  background: radial-gradient(ellipse 80% 55% at 50% 42%, #ffb00059, transparent 70%), linear-gradient(180deg, #43307c, #1a1233 78%);
  box-shadow: inset 0 1px 0 #ffffff33, inset 0 0 26px #ffb0001f;
}
/* O palco mede em cqw (a largura dele): o pedestal tem a largura do palco e os pés do herói pisam no tampo dele. */
.passe-heroi-palco { position: relative; min-height: 0; touch-action: none; cursor: grab; container-type: size; --pedestal-l: 78cqw; --pes: calc(var(--pedestal-l) / 2.36 * .76 + 2px); }
.passe-heroi.girando .passe-heroi-palco { cursor: grabbing; }
.passe-heroi-palco > .lobby-palco-3d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.passe-heroi-vaga { position: absolute; inset: 11% 4% var(--pes); z-index: 1; }
/* No PC o painel é alto e estreito: o herói, do tamanho da largura, encostava a faca (e o brilho dela) na borda. */
@media (min-height: 500px) { .passe-heroi-vaga { inset: 16% 13% var(--pes); } }
.passe-heroi-figura { position: absolute; inset: 0; display: grid; place-items: end center; }
.passe-heroi-figura .lobby-boneco { max-width: 100%; max-height: 100%; object-fit: contain; }
.passe-heroi-vaga.com-3d .lobby-boneco { visibility: hidden; }
/* O 3D a caminho: sem a foto antes (ela parecia menor e o herói "crescia" na troca); ele aparece de leve quando chega. */
.passe-heroi-vaga.espera-3d:not(.com-3d) .lobby-boneco { visibility: hidden; }
.passe-heroi-palco:has(.passe-heroi-vaga.com-3d) > .lobby-palco-3d { animation: passe-heroi-aparece .32s ease-out both; }
@keyframes passe-heroi-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .passe-heroi-palco:has(.passe-heroi-vaga.com-3d) > .lobby-palco-3d { animation: none; } }
.passe-heroi-figura .lobby-luz { width: min(190px, 86%); height: 34px; bottom: -8px; background: radial-gradient(ellipse, #ffd84ab3 0%, #ff9a1a4d 40%, transparent 72%); }
.passe-heroi-raios {
  position: absolute; left: 50%; top: 44%; width: 190%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(#ffd76a33 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 58%); mask: radial-gradient(circle, #000 14%, transparent 58%);
  animation: passe-raios 26s linear infinite;
}
@keyframes passe-raios { to { rotate: 360deg; } }
.passe-heroi-brilhos {
  position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background-image: radial-gradient(circle, #fff9 0 1.4px, transparent 2px), radial-gradient(circle, #ffd76acc 0 1.1px, transparent 1.7px);
  background-size: 47px 61px, 29px 41px; background-position: 0 0, 13px 17px;
  -webkit-mask: linear-gradient(transparent 4%, #000 30%, #000 72%, transparent 96%); mask: linear-gradient(transparent 4%, #000 30%, #000 72%, transparent 96%);
  animation: passe-brilhos 11s linear infinite;
}
@keyframes passe-brilhos { to { background-position: 0 -610px, 13px -393px; } }
/* O pedestal da temporada (o desenho de src/passe.js TEMPORADA.pedestal, em --pedestal), respirando um brilho. */
.passe-heroi-pedestal {
  position: absolute; left: 50%; bottom: 2px; width: var(--pedestal-l); aspect-ratio: 2.36; translate: -50% 0; pointer-events: none;
  background: var(--pedestal, radial-gradient(ellipse at 50% 38%, #fff2a8 0%, #ffb000 34%, #8a4b00 62%, transparent 70%)) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px #000a) drop-shadow(0 0 8px var(--brilho-pedestal, #ffb00066)); animation: passe-pedestal 2.8s ease-in-out infinite;
}
@keyframes passe-pedestal { 50% { filter: drop-shadow(0 4px 6px #000a) drop-shadow(0 0 18px var(--brilho-pedestal, #ffb000b3)); } }
.passe-heroi[data-temporada="2"] { --brilho-pedestal: #7fd0ffa6; }
.passe-heroi-legenda { display: grid; justify-items: center; gap: 1px; min-width: 0; text-align: center; }
.passe-heroi-selo { color: #ffd76a; font: 800 10px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.passe-heroi-nome { max-width: 100%; color: #fff; font: 800 clamp(16px, 6dvh, 26px)/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 2px 0 #000a, 0 0 14px #ffb00066; overflow-wrap: anywhere; }
.passe-heroi-pecas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.passe-heroi-peca {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 1px; height: clamp(40px, 15dvh, 72px); min-width: 0; padding: 3px 3px 2px;
  border: 2px solid var(--contorno, #120a1c); border-radius: 9px; background: linear-gradient(180deg, #6a4c12, #2e2008); box-shadow: inset 0 1px 0 #ffffff40, 0 0 10px #ffb00059; color: #fff; cursor: pointer;
}
.passe-heroi-peca:active { transform: scale(.94); }
.passe-heroi-peca img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 2px 0 #0008); }
.passe-heroi-peca em { color: #ffe45c; font: 800 10px/1 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .06em; text-shadow: 0 1px 0 #000; }
/* ---------- A tela do passe viva (04/11/2026: "quero bastantes efeitos e interatividade nessa tela de passe") ----------
   O balão do herói, as faíscas dos toques, a célula que a peça mostra, as colunas entrando, o trilho correndo luz,
   o próximo nível chamando, o selo do nível com a coroa girando, o brilho holográfico do conjunto, os raios atrás do
   prêmio final, o Comprar respirando e o pó dourado no fundo da folha. */
.passe-heroi-balao {
  position: absolute; left: 50%; bottom: 2px; z-index: 4; width: max-content; max-width: calc(100% - 8px); padding: 3px 9px; translate: -50% 0; pointer-events: none;
  border: 2px solid var(--contorno, #120a1c); border-radius: 999px; background: linear-gradient(180deg, #fff6c8, #ffd24a); color: #2a1200;
  font: 800 11px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-align: center; box-shadow: 0 3px 0 #000a; overflow-wrap: anywhere;
}
.passe-heroi-balao[hidden] { display: none; }
.passe-heroi-balao.entrando { animation: passe-balao .42s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes passe-balao { from { scale: .3; opacity: 0; } }
.passe-faiscas { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; }
.passe-faiscas i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--cor, #ffe45c);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px var(--cor, #ffe45c));
  animation: passe-faisca .75s cubic-bezier(.2, .8, .3, 1) var(--atraso, 0ms) both;
}
@keyframes passe-faisca { 0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); opacity: 0; } }
.passe-heroi-peca.chamando { animation: passe-peca .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes passe-peca { 40% { transform: scale(1.18) rotate(-4deg); filter: brightness(1.35); } }
.passe-premio.mostrando { animation: passe-mostrando 1.3s ease-in-out 2; }
@keyframes passe-mostrando { 50% { transform: translateY(-4px) scale(1.06); box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 2px var(--contorno, #120a1c), 0 0 22px #ffe45c; filter: brightness(1.3); } }
/* As colunas entram uma depois da outra a cada vez que a folha abre. */
.passe-coluna { animation: passe-coluna-entra .5s cubic-bezier(.2, 1.3, .4, 1) calc(min(var(--i, 0), 14) * 28ms) backwards; }
@keyframes passe-coluna-entra { from { opacity: 0; transform: translateY(14px) scale(.9); } }
/* O trilho já alcançado corre luz; o próximo nível chama. */
.passe-coluna.alcancado::before { background: linear-gradient(90deg, #ffb000, #ffe45c, #fff6c0, #ffe45c, #ffb000); background-size: 300% 100%; animation: passe-trilho 2.4s linear infinite; }
@keyframes passe-trilho { to { background-position: -300% 0; } }
.passe-coluna.proximo .passe-marco { border-color: #ffe45c; color: #fff; animation: passe-proximo 1.4s ease-in-out infinite; }
@keyframes passe-proximo { 50% { box-shadow: 0 0 0 4px #ffe45c55, 0 0 14px #ffe45c; transform: scale(1.12); } }
/* O selo do nível: uma coroa tracejada girando em volta. */
.passe-nivel-selo { position: relative; }
.passe-nivel-selo::after { content: ""; position: absolute; inset: -6px; border: 2px dashed #ffe45ca6; border-radius: 50%; pointer-events: none; animation: passe-raios 10s linear infinite; }
/* O conjunto do herói: um reflexo holográfico passando pela figura; o prêmio final com raios girando atrás. */
.passe-premio.exclusivo .passe-premio-arte { position: relative; }
.passe-premio.exclusivo .passe-premio-arte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, #ffffff8c 47%, #ffe45c73 52%, transparent 62%); background-size: 320% 100%; animation: passe-holo 3.8s linear infinite;
}
@keyframes passe-holo { from { background-position: 130% 0; } to { background-position: -190% 0; } }
.passe-premio.final .passe-premio-arte::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(#ffd76a4d 0deg 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 64%); mask: radial-gradient(circle, #000 20%, transparent 64%);
  animation: passe-raios 14s linear infinite;
}
.passe-premio.final .passe-premio-arte img { position: relative; }
/* O Comprar respira (brilho dourado em volta, de tempos em tempos). */
.passe-comprar.bv-loja:not(:disabled) { animation: passe-comprar 2.6s ease-in-out infinite; }
@keyframes passe-comprar { 0%, 70%, 100% { filter: none; } 82% { filter: brightness(1.18) drop-shadow(0 0 12px #ffb000); } }
/* Pó dourado subindo devagar no fundo da folha. */
.app-folha-passe .app-folha-caixa::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, #ffe45c99 0 1px, transparent 1.6px), radial-gradient(circle, #ffffff66 0 1px, transparent 1.5px);
  background-size: 83px 97px, 53px 61px; background-position: 0 0, 31px 23px; animation: passe-po 26s linear infinite;
}
@keyframes passe-po { to { background-position: 0 -970px, 31px -587px; } }
.app-folha-passe .passe-heroi, .app-folha-passe .passe-corpo { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .passe-heroi-raios, .passe-heroi-brilhos, .passe-heroi-pedestal, .passe-coluna, .passe-coluna.alcancado::before, .passe-coluna.proximo .passe-marco, .passe-nivel-selo::after,
  .passe-premio.exclusivo .passe-premio-arte::after, .passe-premio.final .passe-premio-arte::before, .passe-comprar.bv-loja, .app-folha-passe .app-folha-caixa::before, .passe-premio.mostrando { animation: none !important; }
}
.passe-topo > * { position: relative; }
.passe-titulo { display: grid; gap: 1px; min-width: 0; }
.passe-titulo small { color: #ffd76a; font: 800 12px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
/* (O título quebra em duas linhas quando falta largura — nunca "PASSE DE TEMPO...".) */
.passe-titulo b { color: #fff; font: 800 clamp(18px, 6.4dvh, 30px)/.95 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 0 #0009; overflow-wrap: break-word; }
.passe-titulo em { color: #cfc6e6; font: 700 12px/1.2 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.passe-nivel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.passe-nivel-selo {
  flex: none; display: grid; place-items: center; align-content: center; width: clamp(46px, 15dvh, 66px); aspect-ratio: 1; border: 2.5px solid var(--contorno, #120a1c); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff27a, #ffb000 60%, #e06a00); box-shadow: inset 0 2px 0 #ffffffa6, 0 3px 0 #000a; color: #2a1200;
}
.passe-nivel-selo small { font: 800 9px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.passe-nivel-num { font: 800 clamp(18px, 7dvh, 28px)/1 "Barlow Condensed", sans-serif; }
.passe-nivel.chamando .passe-nivel-selo { animation: passe-sobe-nivel .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes passe-sobe-nivel { 40% { transform: scale(1.35) rotate(-8deg); filter: brightness(1.4); } }
.passe-nivel-info { display: grid; gap: 4px; flex: 1; min-width: 0; }
.passe-barra { position: relative; display: block; height: 18px; overflow: hidden; border: 2.5px solid var(--contorno, #120a1c); border-radius: 999px; background: #0d0918d9; }
.passe-barra i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(180deg, #fff27a, #ffb000 55%, #f57a00); box-shadow: inset 0 1px 0 #ffffffb3; }
.passe-barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff8c 50%, transparent 70%); background-size: 220% 100%; animation: passe-brilho 2.4s linear infinite; }
@keyframes passe-brilho { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.passe-barra em { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 11px/1 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .08em; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.passe-hoje { color: #e9e3f7; font: 700 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-shadow: 0 1px 0 #000; }
.passe-acoes { display: grid; justify-items: end; gap: 6px; }
.passe-acoes [hidden] { display: none !important; }
.passe-comprar.bv-loja, .passe-tudo.bv-loja { height: clamp(34px, 11dvh, 46px); padding: 0 18px; font-size: clamp(12px, 3.8dvh, 15px); white-space: nowrap; }
.passe-comprar.chamando { animation: passe-chama .6s ease-in-out; }
@keyframes passe-chama { 20%, 60% { transform: translateX(-5px) scale(1.06); } 40%, 80% { transform: translateX(5px) scale(1.06); } }
.passe-ativo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 999px; background: linear-gradient(180deg, #7dff9a, #19b84a); color: #04210f; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 2px 0 #000a; }
.passe-ativo i { font-style: normal; }
.passe-previa { margin: 0; padding: 3px 10px; border-radius: 8px; background: #ffb0001f; color: #ffd76a; font: 700 12px/1.3 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-align: center; }
.passe-previa[hidden] { display: none; }
/* Só o dono: a etiqueta para trocar entre a temporada no ar e a próxima, em prévia (src/passe-lobby.js trocar),
   presa na borda de baixo do topo — não toma altura das trilhas. */
.passe-topo > .passe-trocar {
  position: absolute; left: 14px; bottom: -12px; z-index: 2; height: 24px; padding: 0 12px; border: 2px solid var(--contorno, #120a1c); border-radius: 999px;
  background: linear-gradient(180deg, #d6ecff, #7f9cff); color: #0a1030; font: 800 11px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 0 #000a; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.passe-topo > .passe-trocar[hidden] { display: none; }
.passe-topo > .passe-trocar:active { transform: translateY(1px); }

/* As trilhas: os rótulos parados à esquerda, as 30 colunas rolando. */
.passe-trilhas { position: relative; display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; cursor: grab; touch-action: pan-x; }
.passe-trilhas:active { cursor: grabbing; }
.passe-rotulos { position: sticky; left: 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 4px; flex: none; width: 54px; padding-right: 6px; background: linear-gradient(90deg, #211838 80%, transparent); }
.passe-rotulos b { display: grid; place-items: center; border: 2.5px solid var(--contorno, #120a1c); border-radius: 10px; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; rotate: 180deg; }
.passe-rotulos .paga { background: linear-gradient(180deg, #ffe45c, #ff9d00); color: #2a1200; }
.passe-rotulos .gratis { background: linear-gradient(180deg, #6a58a6, #33265c); color: #e7dcff; }
.passe-colunas { display: flex; gap: 6px; padding: 0 8px 4px 2px; }
.passe-coluna { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 4px; width: calc(var(--premio) * .92); flex: none; }
/* O trilho: uma linha que atravessa as colunas; acende até o nível alcançado. */
.passe-coluna::before { content: ""; position: absolute; left: -3px; right: -3px; top: calc(50% - 2px); height: 4px; background: #0d0918; box-shadow: 0 0 0 1px #ffffff14; }
.passe-coluna.alcancado::before { background: linear-gradient(90deg, #ffb000, #ffe45c); box-shadow: 0 0 8px #ffb00080; }
.passe-marco { position: relative; display: grid; place-items: center; justify-self: center; width: 26px; height: 26px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 50%; background: #2a2142; color: #cfc6e6; font: 800 12px/1 "Barlow Condensed", sans-serif; }
.passe-coluna.alcancado .passe-marco { background: radial-gradient(circle at 35% 30%, #fff27a, #ffb000); color: #2a1200; }
.passe-premio {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 2px; min-width: 0; padding: 4px 4px 5px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px;
  background: linear-gradient(180deg, #3a2d63, #221a3d); box-shadow: inset 0 1px 0 #ffffff26, 0 3px 0 #000a; color: #fff; cursor: pointer; transition: transform .12s, filter .12s;
}
.passe-premio.paga { background: linear-gradient(180deg, #5a4210, #2e2008); }
.passe-premio:active { transform: scale(.95); }
@media (hover: hover) { .passe-premio:hover { transform: translateY(-2px); filter: brightness(1.12); } }
.passe-premio-arte { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.passe-premio-arte img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 #0008); }
.passe-premio-nome { display: -webkit-box; max-width: 100%; overflow: hidden; color: #fff; font: 800 11px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .02em; text-align: center; text-shadow: 0 1px 0 #000; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
/* O conjunto do herói (o exclusivo do passe) e o prêmio final brilham em dourado. */
.passe-premio.exclusivo { border-color: #ffb000; box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 2px var(--contorno, #120a1c), 0 0 14px #ffb000a6; }
.passe-premio.exclusivo::before { content: "★"; position: absolute; left: 4px; top: 2px; color: #ffe45c; font: 800 13px/1 sans-serif; text-shadow: 0 1px 0 #000; }
.passe-premio.final { background: radial-gradient(circle at 50% 40%, #8a6a14, #2e2008); }
/* Os estados: longe (apagado), travado (a paga sem o passe, com o cadeado), pronto (pulsa) e recebido (✓). */
.passe-premio[data-estado="bloqueado"] { filter: saturate(.55) brightness(.72); }
.passe-premio[data-estado="travado"] .passe-premio-arte img { filter: saturate(.4) brightness(.6) drop-shadow(0 3px 0 #0008); }
.passe-premio[data-estado="travado"]::after { content: ""; position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; background: url("./assets/lobby/cadeado.webp") center / contain no-repeat; filter: drop-shadow(0 1px 0 #000); }
.passe-premio[data-estado="disponivel"] { border-color: #7dff9a; animation: passe-pronto 1.2s ease-in-out infinite; }
@keyframes passe-pronto { 50% { box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 2px var(--contorno, #120a1c), 0 0 18px #7dff9ad9; transform: translateY(-2px); } }
.passe-premio[data-estado="disponivel"] .passe-premio-marca::before { content: "!"; }
.passe-premio[data-estado="recebido"] { filter: brightness(.82); }
.passe-premio[data-estado="recebido"] .passe-premio-marca::before { content: "✓"; }
.passe-premio-marca { position: absolute; right: 3px; bottom: 3px; display: none; place-items: center; width: 20px; height: 20px; border: 2px solid var(--contorno, #120a1c); border-radius: 50%; background: #19b84a; color: #fff; font: 800 12px/1 sans-serif; font-style: normal; }
.passe-premio[data-estado="disponivel"] .passe-premio-marca { display: grid; background: #ff9d00; }
.passe-premio[data-estado="recebido"] .passe-premio-marca { display: grid; }
.passe-premio.recebendo { animation: passe-recebendo .5s ease-in-out infinite; }
@keyframes passe-recebendo { 50% { transform: scale(1.08) rotate(-2deg); filter: brightness(1.4); } }
.passe-dica { flex: none; margin: 0; color: #a99fc4; font: 700 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
/* O prêmio recebido de muitos de uma vez: as miniaturas embaixo. */
.passe-recebido-lista { display: flex; gap: 8px; margin-top: 6px; }
.passe-recebido-lista:empty { display: none; }
.passe-recebido-lista img { width: clamp(36px, 11vh, 64px); height: clamp(36px, 11vh, 64px); object-fit: contain; filter: drop-shadow(0 3px 0 #0008); animation: app-premio-entra .5s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.passe-recebido-lista img:nth-child(2) { animation-delay: .08s; } .passe-recebido-lista img:nth-child(3) { animation-delay: .16s; }
.passe-recebido-lista img:nth-child(4) { animation-delay: .24s; } .passe-recebido-lista img:nth-child(5) { animation-delay: .32s; } .passe-recebido-lista img:nth-child(6) { animation-delay: .4s; }
.app-premio-valor[hidden] { display: none; }
@media (max-height: 420px) {
  .passe-dica { display: none; }
  .passe-topo { gap: 10px; padding-block: 6px; padding-left: 12px; }
  .passe-titulo em, .passe-hoje { font-size: 10px; }
}
@media (max-width: 700px) {
  .passe-topo { grid-template-columns: minmax(0, 1fr) auto; }
  .passe-titulo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .passe-barra i::after, .passe-premio[data-estado="disponivel"], .passe-premio.recebendo, .passe-nivel.chamando .passe-nivel-selo, .passe-comprar.chamando { animation: none !important; }
}

/* ---------- Os lembretes no celular (src/lembretes-tela.js): o cartão que oferece ---------- */
.app-folha-lembretes .app-folha-caixa { width: min(460px, 100%); justify-items: center; gap: 8px; padding: 16px 20px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 16px; background: linear-gradient(180deg, #2b2049, #150e26); box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6, 0 24px 60px #000d; text-align: center; }
.lembretes-sino { font-size: clamp(30px, 11vh, 48px); line-height: 1; animation: lembretes-balanca 1.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes lembretes-balanca { 0%, 60%, 100% { rotate: 0deg; } 10% { rotate: 16deg; } 20% { rotate: -14deg; } 30% { rotate: 10deg; } 40% { rotate: -6deg; } }
.app-folha-lembretes h3 { margin: 0; color: #ffe45c; text-shadow: 0 2px 0 #0009; }
.lembretes-texto { margin: 0; color: #e7dcff; font-size: 14px; line-height: 1.4; }
.lembretes-botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 4px; }
.lembretes-quero.bv-loja { height: 44px; padding: 0 22px; font-size: 15px; }
.lembretes-agora-nao { padding: 8px 12px; border: 0; background: none; color: #a99fc4; font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
@media (max-height: 420px) { .app-folha-lembretes .app-folha-caixa { gap: 6px; padding: 10px 16px; } .lembretes-texto { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .lembretes-sino { animation: none; } }
/* A opinião na Play (src/opiniao-tela.js): o mesmo cartão, com a estrela pulsando. */
.opiniao-estrela { font-size: clamp(30px, 11vh, 48px); line-height: 1; animation: opiniao-pulsa 1.8s ease-in-out infinite; }
@keyframes opiniao-pulsa { 0%, 100% { scale: 1; } 50% { scale: 1.14; } }
@media (prefers-reduced-motion: reduce) { .opiniao-estrela { animation: none; } }

/* ---------- Os clãs (src/clas-lobby.js) ----------
   Em cima, o portal que muda de cor sozinho (com o ícone do clã no meio), o nome e os prêmios da temporada;
   as abas; e a lista que rola. Cabe no celular deitado: os tamanhos seguem a altura da tela. */
.app-folha-cla { padding: 10px; }
.app-folha-cla .app-folha-caixa {
  display: flex; flex-direction: column; gap: 6px; width: min(980px, 100%); height: min(calc(100dvh - 20px), 640px); max-height: none; overflow: hidden; padding: 8px 10px;
  border: 2.5px solid var(--contorno, #120a1c); border-radius: 16px; background: linear-gradient(180deg, #2b2049, #150e26); box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6, 0 24px 60px #000d;
}
.app-folha-cla .app-folha-fechar { z-index: 3; }
.cla-topo {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; flex: none; padding: 6px 60px 6px 10px;
  border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px; background: radial-gradient(ellipse at 12% 50%, #5b3fa8 0%, #2a1d52 45%, #1a1236 100%); box-shadow: inset 0 1px 0 #ffffff33;
}
/* O portal: o anel gira devagar e passa por todas as cores; o ícone do clã fica parado no meio. */
.cla-portal { position: relative; display: grid; place-items: center; width: clamp(60px, 21dvh, 118px); aspect-ratio: 1; flex: none; }
.cla-portal-anel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: cla-portal-cor 9s linear infinite, cla-portal-gira 40s linear infinite; filter: drop-shadow(0 0 10px #8fd9ff99); }
@keyframes cla-portal-cor { from { filter: hue-rotate(0deg) saturate(2.2) drop-shadow(0 0 10px #8fd9ff99); } to { filter: hue-rotate(360deg) saturate(2.2) drop-shadow(0 0 10px #8fd9ff99); } }
@keyframes cla-portal-gira { to { rotate: 360deg; } }
.cla-portal-icone { position: relative; width: 56%; height: 56%; object-fit: contain; filter: drop-shadow(0 3px 0 #0009); animation: cla-icone-flutua 3s ease-in-out infinite; }
.cla-portal.vazio .cla-portal-icone { display: none; }
@keyframes cla-icone-flutua { 50% { translate: 0 -4px; } }
.cla-titulo { display: grid; gap: 1px; min-width: 0; }
.cla-titulo small { color: #ffd76a; font: 800 13px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.cla-titulo b { color: #fff; font: 800 clamp(18px, 6.4dvh, 28px)/.95 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 0 #0009; overflow-wrap: break-word; }
.cla-titulo em { color: #cfc6e6; font: 700 12px/1.2 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
/* O prêmio numa linha só (pedido de 28/10/2026): a coluna dele é do tamanho do texto, o nome do clã fica com o resto. */
.cla-premios { justify-self: end; margin: 0; padding: 6px 10px; border-radius: 10px; background: #0d0918a6; color: #ffe9a8; font: 700 12px/1.3 "Barlow Condensed", sans-serif; letter-spacing: .03em; white-space: nowrap; }
.cla-abas { flex: none; margin: 0; }
.cla-abas .amigos-selo { position: absolute; top: -8px; right: -6px; }
.cla-corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 4px; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; }
.cla-corpo.pedindo { opacity: .75; pointer-events: none; }
.cla-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cla-linha, .cla-membro { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 5px 10px; border: 2px solid var(--contorno, #120a1c); border-radius: 10px; background: #241a40cc; box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 0 #000000a6; }
/* Tocar no clã abre os membros dele, logo embaixo (04/11/2026). */
.cla-linha.abre { cursor: pointer; }
.cla-linha.abre::after { content: '▾'; flex: none; color: #a99fc4; font-size: 14px; }
.cla-linha.abre[aria-expanded="true"]::after { content: '▴'; }
.cla-membros-de { list-style: none; margin: -2px 0 4px 26px; }
.cla-membros-de .cla-membro { min-height: 38px; background: #1b1430d9; }
.cla-membro-aviso { justify-content: center; color: #c3b8e2; font-size: 13px; }
.cla-linha.meu, .cla-membro.eu { background: linear-gradient(180deg, #4a3608cc, #2a1c08cc); box-shadow: inset 0 0 0 1.5px #ffcf4a, 0 2px 0 #000000a6; }
.cla-pos { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--contorno, #120a1c); border-radius: 50%; background: #3a2d63; color: #e7dcff; font: 800 12px/1 "Barlow Condensed", sans-serif; font-style: normal; }
.cla-pos.p1 { background: radial-gradient(circle at 35% 30%, #fff27a, #ffb000); color: #2a1200; }
.cla-pos.p2 { background: radial-gradient(circle at 35% 30%, #ffffff, #b8c2d6); color: #1b2030; }
.cla-pos.p3 { background: radial-gradient(circle at 35% 30%, #ffc89a, #c9733a); color: #2a1200; }
.cla-icone { flex: none; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 0 #0008); }
.cla-nome { display: grid; flex: 1; min-width: 0; }
.cla-nome b { overflow: hidden; color: #fff; font: 800 16px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.cla-nome small { color: #b9aed6; font: 600 12px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.cla-pontos { flex: none; color: #ffe45c; font: 800 18px/1 "Barlow Condensed", sans-serif; text-shadow: 0 2px 0 #0009; }
.cla-entrar.bv-loja, .cla-membro .bv-loja { flex: none; height: 34px; padding: 0 14px; font-size: 13px; }
.cla-expulsar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--contorno, #120a1c); border-radius: 10px; background: var(--vx-placa-roxa, #3a2d63); color: #ff9d8a; font: 800 15px/1 sans-serif; cursor: pointer; box-shadow: 0 2px 0 #000a; }
.cla-expulsar.confirmando { width: auto; padding: 0 10px; background: linear-gradient(180deg, #ff6a55, #b8121c); color: #fff; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.cla-vazio { margin: 18px 0; color: #b9aed6; text-align: center; }
.cla-busca { display: block; flex: none; }
.cla-busca input, .cla-form input[type="text"] { width: 100%; min-width: 0; height: 38px; padding: 0 12px; }
.cla-form { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: center; gap: 8px; flex: none; }
.cla-renomear.bv-loja { height: 38px; padding: 0 16px; font-size: 13px; white-space: nowrap; }
.cla-aberto { display: inline-flex; align-items: center; gap: 8px; color: #e7dcff; font: 700 13px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .03em; cursor: pointer; }
.cla-aberto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cla-aberto i { position: relative; flex: none; width: 44px; height: 24px; border: 2px solid var(--contorno, #120a1c); border-radius: 999px; background: #3a2d63; box-shadow: inset 0 2px 0 #0006; transition: background .15s; }
.cla-aberto i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #e7dcff; transition: translate .15s; }
.cla-aberto input:checked + i { background: linear-gradient(180deg, #ffe45c, #ff9d00); }
.cla-aberto input:checked + i::after { translate: 20px 0; background: #2a1200; }
.cla-dica { color: #b9aed6; font: 600 12px/1.3 "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.cla-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.cla-icone-op { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px; background: #241a40; cursor: pointer; transition: transform .12s; }
.cla-icone-op img { width: 100%; height: 100%; object-fit: contain; }
.cla-icone-op[aria-pressed="true"] { border-color: #ffb000; background: #4a3608; box-shadow: 0 0 0 2px var(--contorno, #120a1c), 0 0 12px #ffb000a6; transform: scale(1.06); }
.cla-icone-op.usado { position: relative; cursor: not-allowed; }
.cla-icone-op.usado img { filter: grayscale(1) brightness(.5); }
.cla-icone-op.usado::after { content: ""; position: absolute; width: 40%; height: 40%; background: url("./assets/lobby/cadeado.webp") center / contain no-repeat; }
.cla-icones.travada .cla-icone-op:not([aria-pressed="true"]) { opacity: .55; }
/* O pé (o Criar, o Sair) fica sempre à vista, preso embaixo, com a lista rolando por baixo dele. */
.cla-pe { position: sticky; bottom: -4px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; margin-top: auto; padding: 6px 0 4px; background: linear-gradient(180deg, transparent, #1a1230 30%); }
.cla-criar.bv-loja { height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.cla-sair { flex: none; height: 38px; padding: 0 16px; }
.cla-sair.confirmando { animation: passe-chama .6s ease-in-out; }
@media (max-height: 420px) {
  .cla-topo { gap: 8px; padding-block: 4px; }
  .cla-premios { font-size: 11px; padding: 4px 8px; }
  .cla-linha, .cla-membro { min-height: 44px; padding: 3px 8px; }
}
@media (max-width: 700px) { .cla-topo { grid-template-columns: auto minmax(0, 1fr); } .cla-premios { display: none; } .cla-form { grid-template-columns: minmax(0, 1fr) 90px; } }
@media (prefers-reduced-motion: reduce) { .cla-portal-anel, .cla-portal-icone { animation: none; } }

/* ---------- O inventário (src/inventario-lobby.js, 04/11/2026) ----------
   À esquerda o boneco 3D sob um holofote, vestido com o que está em uso (arrastar gira); à direita as abas e as
   cartas do que a conta tem. Tocar numa carta equipa na hora. As cartas entram uma depois da outra. */
.app-folha-inventario { padding: 10px; }
.app-folha-inventario .app-folha-caixa {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; width: min(1020px, 100%); height: min(calc(100dvh - 20px), 640px); max-height: none; overflow: hidden; padding: 8px 10px;
  border: 2.5px solid var(--contorno, #120a1c); border-radius: 16px; background: linear-gradient(180deg, #2b2049, #150e26); box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000a6, 0 24px 60px #000d;
}
.app-folha-inventario .app-folha-fechar { z-index: 3; }
.inventario-esquerda { position: relative; display: flex; flex-direction: column; min-height: 0; border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, #7a55d6 0%, #3b2a78 45%, #1a1236 100%); box-shadow: inset 0 1px 0 #ffffff33; }
/* Os raios do holofote girando devagar atrás do boneco. */
.inventario-esquerda::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 50%, #ffffff10 0deg 8deg, transparent 8deg 22deg); animation: inventario-raios 40s linear infinite; pointer-events: none; }
@keyframes inventario-raios { to { rotate: 360deg; } }
.inventario-palco { position: relative; flex: 1; min-height: 0; touch-action: none; cursor: grab; }
.inventario-palco > .lobby-palco-3d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.inventario-vaga { position: absolute; inset: 6% 10% 4%; }
.inventario-figura { position: absolute; inset: 0; display: grid; place-items: end center; }
.inventario-figura .lobby-boneco { max-width: 100%; max-height: 100%; object-fit: contain; }
.inventario-vaga.com-3d .lobby-boneco { visibility: hidden; }
.inventario-figura .lobby-luz { width: min(200px, 70%); height: 40px; bottom: -10px; background: radial-gradient(ellipse, #ffd84a99 0%, #ff9a1a44 40%, transparent 72%); }
.inventario-nome { position: relative; z-index: 3; flex: none; padding: 6px 10px 8px; color: #fff; font: 800 clamp(16px, 5.4dvh, 24px)/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-align: center; text-transform: uppercase; text-shadow: 0 2px 0 #0009; }
.inventario-direita { display: flex; flex-direction: column; min-height: 0; padding-right: 46px; }
.inventario-titulo { margin: 2px 0 0; color: #ffd76a; font: 800 clamp(18px, 6dvh, 26px)/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 #0009; }
.inventario-abas { flex: none; margin: 6px 0 8px; }
/* As cinco abas dividem a largura: o desenho em cima e o nome embaixo (lado a lado, a do Spray saía da tela). */
html[data-app] .inventario-abas button.inventario-aba { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 3px 6px 4px; font-size: 12px; letter-spacing: .02em; }
html[data-app] .inventario-abas button span { white-space: nowrap; }
.inventario-abas .app-desenho { width: 24px; height: 24px; flex: none; }
.inventario-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); align-content: start; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 8px; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; }
.inventario-carta {
  position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 2px; aspect-ratio: 1 / 1.05; padding: 6px 4px 4px; border: 2.5px solid var(--contorno, #120a1c); border-radius: 12px;
  background: linear-gradient(180deg, #3a2a6e, #22184a); color: #fff; box-shadow: inset 0 1px 0 #ffffff33, 0 3px 0 #000000a6; cursor: pointer;
  animation: inventario-entra .32s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 28ms); transition: transform .12s;
}
@keyframes inventario-entra { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.inventario-carta:active:not(:disabled) { transform: scale(.95); }
.inventario-carta img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 3px 0 #0008); }
/* Os rostos (busto cortado embaixo) ficam do tamanho das outras fotos, com folga dos lados, apoiados no nome. */
.inventario-grade[data-aba="personagem"] .inventario-carta img { width: 82%; object-position: 50% 100%; }
.inventario-carta b { width: 100%; overflow: hidden; font: 700 13px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.inventario-carta em { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 8px; background: #22c55e; color: #052e14; font: 800 10px/1.4 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.inventario-carta.em-uso { border-color: #ffd84a; background: linear-gradient(180deg, #5a4210, #2a1c08); box-shadow: inset 0 0 0 1.5px #ffcf4a, 0 0 18px #ffcf4a66, 0 3px 0 #000000a6; cursor: default; }
.inventario-carta:disabled { opacity: 1; }
.inventario-vazio { display: grid; place-items: center; width: 70%; aspect-ratio: 1; border: 2px dashed #ffffff55; border-radius: 50%; color: #c9bff0; font: 800 26px/1 "Barlow Condensed", sans-serif; font-style: normal; }
.inventario-aviso { grid-column: 1 / -1; margin: 12px 0; color: #c9bff0; font-size: 14px; text-align: center; }
@media (max-height: 420px) { .inventario-grade { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; } .inventario-carta b { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .inventario-esquerda::before, .inventario-carta { animation: none; } }
/* O cabide no pé do personagem (04/11/2026): tocar no personagem abre o inventário. Uma placa escura
   pequena, com o cabide branco, que balança de leve de tempos em tempos para ser notada. */
#appPalco .lobby-cabide {
  position: absolute; left: 4%; bottom: 14%; z-index: 3; display: grid; place-items: center; width: 34px; height: 30px;
  border: 2.5px solid var(--contorno, #120a1c); border-radius: 9px; background: linear-gradient(180deg, #4a4f6e, #262a40);
  box-shadow: inset 0 1.5px 0 #ffffff40, 0 3px 0 #000000a6; pointer-events: none;
  animation: lobby-cabide 5s ease-in-out 2s infinite;
}
#appPalco .lobby-cabide svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 #0009); }
@keyframes lobby-cabide { 0%, 84%, 100% { rotate: 0deg; } 88% { rotate: -12deg; } 92% { rotate: 9deg; } 96% { rotate: -4deg; } }
@media (prefers-reduced-motion: reduce) { #appPalco .lobby-cabide { animation: none; } }
/* Os ícones "Nenhuma" e "Aleatório" (do Codex) um pouco menores que as fotos dos itens. */
.inventario-carta img[src$="nenhum.webp"], .inventario-carta img[src$="aleatorio.webp"] { width: 70%; }
/* Nome comprido (alguns sprays): duas linhas, letra um pouco menor; nome nunca é cortado. */
.inventario-carta b.longo { white-space: normal; font-size: 11.5px; line-height: 1; letter-spacing: 0; text-wrap: balance; }
/* ---------- O lobby vivo (src/lobby-vivo.js, 04/11/2026) ---------- */
/* O balão "On-line" em cima do Convidar: o nome de um amigo conectado, trocando sozinho; tocar convida. Mora na
   mesma célula da grade do palco que o "+", logo acima dele. */
#appPalco .app-balao-online {
  position: relative; z-index: 3; align-self: end; justify-self: center; display: grid; justify-items: center; max-width: none; width: max-content;
  margin-bottom: calc(var(--cena-h) * .035 + var(--eu-h) * .28 + clamp(34px, 5.6vw, 48px) / 2 + 16px);
  /* Roxo, como os painéis do lobby (pedido de 04/11/2026: "nas nossas cores mais roxeadas"). */
  padding: 9px 12px 5px; border: 2.5px solid var(--contorno); border-radius: 10px; background: linear-gradient(180deg, #7a64c4, #4a3590 55%, #33246b);
  box-shadow: inset 0 2px 0 #ffffff59, inset 0 -3px 0 #1c1240, 0 4px 0 #000000a6, 0 0 16px #8a6cff59; color: #fff; cursor: pointer; pointer-events: auto;
}
#appPalco .app-balao-online[data-lado="c"] { margin-bottom: calc(var(--cena-h) * .075 + var(--eu-h) * .24 + clamp(34px, 5.6vw, 48px) / 2 + 16px); }
#appPalco .app-balao-online[hidden] { display: none; }
.app-balao-online b { font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; white-space: nowrap; -webkit-text-stroke: 3px var(--contorno); paint-order: stroke fill; }
.app-balao-online em { position: absolute; top: -10px; left: 50%; translate: -50% 0; padding: 1px 7px; border: 2px solid var(--contorno); border-radius: 6px; background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; font: 800 9.5px/1.3 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 2px #0a3d1e; paint-order: stroke fill; }
/* O bico, apontando o "+". */
.app-balao-online::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 11px; height: 11px; translate: -50% 0; rotate: 45deg; border: solid var(--contorno); border-width: 0 2.5px 2.5px 0; background: #33246b; }
.app-balao-online.troca { animation: app-balao-troca .38s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes app-balao-troca { from { opacity: 0; scale: .6; } }
.app-balao-online:active { scale: .94; }
/* A vitrine: a quinta coluna do palco (a da direita, que nenhuma vaga usa), no alto, um cartão que passa sozinho. */
/* O lugar: logo à esquerda dos botões da direita (Amigos, Tutorial, Diário), debaixo do topo — fora da grade do
   palco, para nunca cobrir os botões. Onde ela encostaria em alguém (src/lobby-app.js conferirLugarDaVitrine), some. */
.app-vitrine-lugar { position: absolute; z-index: 2; top: calc(max(8px, env(safe-area-inset-top)) + var(--topo-h) + 10px); right: calc(max(var(--app-margem), env(safe-area-inset-right)) + var(--atalho) + 28px); pointer-events: none; }
/* (Menor que o JOGAR, sempre: ele é o maior destaque da tela — qa/lobby-novo.mjs confere.) */
.app-vitrine { display: grid; justify-items: center; gap: 5px; width: clamp(80px, calc(var(--tela-h) * .24), 108px); pointer-events: auto; }
.app-vitrine[hidden] { display: none; }
.app-vitrine.sem-lugar { visibility: hidden; pointer-events: none; }
.app-vitrine-trilho { width: 100%; }
.app-vitrine-cartao {
  display: grid; justify-items: center; gap: 1px; width: 100%; padding: 6px 6px 7px; border: 2.5px solid var(--contorno); border-radius: 12px;
  background: var(--painel); box-shadow: var(--painel-sombra); color: #fff; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.app-vitrine-cartao.entra { animation: app-vitrine-entra .45s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes app-vitrine-entra { from { opacity: 0; transform: translateX(22px) scale(.92); } }
.app-vitrine-cartao:active { scale: .95; }
.app-vitrine-arte { display: grid; place-items: center; width: 100%; aspect-ratio: 1.55; margin-bottom: 2px; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 50% 60%, #ffcf4a59, #ffb00014 60%, transparent 75%), linear-gradient(180deg, #3a2a6e, #22184a); }
.app-vitrine-arte img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 3px 0 #0008); animation: app-flutua 3.4s ease-in-out infinite; }
.app-vitrine-passe .app-vitrine-arte img { width: 100%; height: 100%; object-position: 50% 100%; animation: none; }
.app-vitrine-cartao b { font: 800 14px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #ffd84a; -webkit-text-stroke: 2.5px var(--contorno); paint-order: stroke fill; }
.app-vitrine-cartao small { font: 700 11px/1.1 "Barlow Condensed", sans-serif; color: #e7dcff; text-wrap: balance; }
.app-vitrine-bolinhas { display: flex; gap: 4px; }
.app-vitrine-bolinhas[hidden] { display: none; }
.app-vitrine-bolinhas i { width: 7px; height: 7px; border: 1.5px solid var(--contorno); border-radius: 999px; background: #ffffff59; transition: width .25s, background .25s; }
.app-vitrine-bolinhas i.agora { width: 16px; background: #ffd84a; }
/* A mãozinha: com prêmio do passe a receber, aponta o botão (do lado de dentro da tela), indo e vindo. */
.app-atalho .app-mao { position: absolute; left: calc(50% + var(--atalho) * .42); top: calc(var(--atalho) * .18); width: calc(var(--atalho) * .95); height: auto; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 0 #0009); }
.app-atalho.tem-premio .app-mao { opacity: 1; animation: app-mao 1.1s ease-in-out infinite; }
@keyframes app-mao { 0%, 100% { translate: 10px 0; } 50% { translate: 0 0; } }
/* Tela baixa ou estreita demais: a vitrine sai (o palco não tem a quinta coluna livre). */
@media (max-height: 330px), (max-width: 640px) { .app-vitrine-lugar { display: none; } }
@media (prefers-reduced-motion: reduce) { .app-balao-online, .app-vitrine-cartao, .app-vitrine-arte img, .app-atalho .app-mao { animation: none !important; } }
/* ---------- As missões (src/missoes-lobby.js, 04/11/2026) ---------- */
/* A folha: o título, as abas, o tempo e a lista (que rola sozinha, se não couber). */
.app-folha-missoes .app-folha-caixa { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); width: min(660px, 100%); max-height: calc(var(--tela-h, 100vh) - 20px); overflow: hidden; }
.missoes-abas { margin: 0; }
.missoes-tempo { justify-self: center; margin: 0; padding: 3px 14px; border: 2px solid var(--contorno); border-radius: 999px; background: #120a1ccc; color: #e7dcff; font: 700 13px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.missoes-tempo:empty { display: none; }
.missoes-lista { display: grid; align-content: start; gap: 7px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 6px; scrollbar-width: thin; scrollbar-color: #5b4a8c transparent; }
.missoes-grupo { margin: 4px 2px 0; color: #ffd84a; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--contorno); paint-order: stroke fill; }
.missoes-grupo.premium { color: #e2b8ff; }
/* Uma missão: o ícone, o texto com a barra, o prêmio e o botão. */
.missao-carta {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 54px; padding: 6px 10px 6px 7px;
  border: 2.5px solid var(--contorno); border-radius: 12px; background: linear-gradient(180deg, #3a2a6e, #22184a); box-shadow: inset 0 1px 0 #ffffff26, 0 3px 0 #000000a6;
  animation: vx-carta-entra .3s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms);
}
.missao-icone { display: grid; place-items: center; width: 42px; height: 42px; border: 2.5px solid var(--contorno); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a58a6, #241a40 75%); font-size: 21px; line-height: 1; box-shadow: inset 0 2px 0 #ffffff33; }
.missao-texto { display: grid; gap: 4px; min-width: 0; }
.missao-texto > b { color: #fff; font: 800 15px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .02em; text-wrap: balance; }
.missao-progresso { display: flex; align-items: center; gap: 8px; }
.missao-barra { flex: 1; height: 10px; overflow: hidden; border: 2px solid var(--contorno); border-radius: 999px; background: #0f0a1c; }
.missao-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe45c, #ffb000 55%, #ff7a00); }
.missao-progresso small { flex: none; min-width: 3.2em; color: #cfc6e6; font: 700 12px/1 "Barlow Condensed", sans-serif; text-align: right; }
.missao-premio { display: flex; align-items: center; gap: 3px; }
.missao-premio img { width: 22px; height: 22px; filter: drop-shadow(0 2px 0 #0008); }
.missao-premio b { color: #ffd84a; font: 800 17px/1 "Barlow Condensed", sans-serif; -webkit-text-stroke: 2.5px var(--contorno); paint-order: stroke fill; }
.missao-receber.bv-loja { min-height: 34px; padding: 0 14px; font-size: 14px; animation: app-pulso 1.6s ease-in-out infinite; }
.missao-feita { display: grid; place-items: center; width: 32px; height: 32px; border: 2.5px solid var(--contorno); border-radius: 50%; background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; font: 800 17px/1 sans-serif; box-shadow: 0 2px 0 #000000a6; }
.missao-cadeado { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border: 2.5px solid var(--contorno); border-radius: 10px; background: linear-gradient(180deg, #7a64c4, #3b2a78); color: #fff; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 #ffffff40, 0 2px 0 #000000a6; }
.missao-cadeado img { width: 20px; height: 20px; }
/* Os estados: pronta brilha em ouro; recebida apaga um pouco; premium tem o fundo do passe; trancada, sem cor. */
.missao-carta.pronta { border-color: #ffd84a; box-shadow: inset 0 0 0 1.5px #ffcf4a, 0 0 16px #ffcf4a59, 0 3px 0 #000000a6; }
.missao-carta.recebida { opacity: .62; }
.missao-carta.recebida .missao-barra i { background: linear-gradient(90deg, #86efac, #22c55e); }
.missao-carta.premium { background: linear-gradient(180deg, #5b2f7a, #2a1646); }
.missao-carta.trancada .missao-icone, .missao-carta.trancada .missao-texto { filter: saturate(.35) brightness(.85); }
.missoes-sem-conta { display: grid; justify-items: center; gap: 10px; padding: 10px; color: #e7dcff; font: 700 15px/1.3 "Barlow Condensed", sans-serif; text-align: center; }
.missoes-sem-conta[hidden] { display: none; }
@media (max-height: 340px) { .missao-carta { min-height: 46px; padding-block: 4px; } .missao-icone { width: 34px; height: 34px; font-size: 17px; } .missao-carta { grid-template-columns: 34px minmax(0, 1fr) auto auto; } }
@media (prefers-reduced-motion: reduce) { .missao-carta, .missao-receber.bv-loja { animation: none; } }