/* 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 ---------- */
.app-lobby {
  --app-margem: 12px;
  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 palco 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;
}
.app-fundo { position: absolute; inset: -20px; z-index: -2; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(5px) brightness(.36) saturate(1.25); }
.app-lobby::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 50% 55%, #ffb00012, transparent 70%), linear-gradient(180deg, #07080bcc 0%, transparent 18%, transparent 70%, #07080bee 100%);
}
.app-lobby button { -webkit-tap-highlight-color: transparent; font-family: inherit; }

/* Topo: logo, perfil, conta e menu. */
.app-topo { grid-area: topo; display: flex; align-items: center; gap: 12px; min-width: 0; height: 52px; }
.app-perfil {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 300px; height: 46px; padding: 0 16px 0 4px; border: 0; position: relative; isolation: isolate;
  background: none; color: var(--ink); cursor: pointer; text-align: left;
}
.app-perfil::before { content: ""; position: absolute; inset: 3px 0; z-index: -1; transform: skewX(-12deg); border-radius: 3px; background: #0b0f15d9; box-shadow: inset 0 0 0 1px #ffb00059; }
.app-perfil-icone { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cor) 45%, #10151c), #0b0f15); box-shadow: inset 0 0 0 2px #ffb00080; }
.app-perfil-icone .rosto { position: absolute; left: 50%; top: -2px; width: 140%; height: auto; translate: -50% 0; }
.app-perfil-icone .moldura { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); object-fit: fill; }
.app-perfil span { display: grid; min-width: 0; }
.app-perfil b { overflow: hidden; font: 700 17px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.app-perfil small { overflow: hidden; color: #c9b27a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-espaco { flex: 1; }
.app-conta { display: flex; align-items: center; min-width: 0; }
.app-conta .topo-conta { margin: 0; }
.app-conta #sairConta { display: none; }
.app-redondo {
  position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 48px; height: 44px; border: 0; background: none; color: #1a0f00; cursor: pointer;
}
.app-redondo::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 3px; background: linear-gradient(100deg, #ffdc4d, #ffb000 45%, #ff7400); box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #00000026, 0 2px 10px #ff7a0033; }
.app-redondo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Laterais: atalhos em blocos inclinados. */
.app-lateral { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 0; }
.app-esq { grid-area: esq; }
.app-dir { grid-area: dir; }
/* O ícone desenhado já é o botão (com a placa amarela); o nome vai embaixo, contornado. */
.app-atalho {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0; width: 84px; 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.04); }
.app-atalho:active { transform: scale(.92); }
.app-desenho { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.app-atalho .app-desenho { width: 66px; height: 66px; filter: drop-shadow(0 4px 6px #000a); }
.app-atalho span {
  max-width: 100%; margin-top: -4px; overflow: hidden; font: 800 13px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: 3px #0b0f15; paint-order: stroke fill; text-shadow: 0 2px 0 #0b0f15, 0 3px 6px #000c;
}

/* Centro: o seu boneco (palco 3D, ./palco-3d.js) e as vagas da equipe. */
.app-palco { --vao: clamp(8px, 2.4vw, 22px); grid-area: palco; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: var(--vao); min-height: 0; }
.app-palco > .lobby-palco-3d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
#appPalco .lobby-vaga.app-eu {
  position: relative; display: block; flex: none; height: 100%; max-height: 330px; aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer;
}
#appPalco .lobby-vaga .lobby-figura { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
#appPalco .lobby-luz { bottom: 4%; }
.app-vaga-livre {
  position: relative; z-index: 2; isolation: isolate; flex: none; display: grid; justify-items: center; align-content: center; gap: 6px; width: clamp(62px, 10vw, 92px); height: clamp(84px, 30%, 128px);
  border: 0; background: none; color: #ffcf6b; cursor: pointer;
}
.app-vaga-livre::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-8deg); border-radius: 6px; background: #0b0f15b3; box-shadow: inset 0 0 0 1px #ffb0004d, inset 0 0 18px #ffb00014; }
.app-vaga-livre i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #ffdc4d, #ffb000 45%, #ff7400); box-shadow: 0 0 0 4px #ffb00022, 0 4px 14px #ff7a0066; }
.app-vaga-livre svg { width: 20px; height: 20px; fill: none; stroke: #1a0f00; stroke-width: 3; stroke-linecap: round; }
.app-vaga-livre span { font: 700 10px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.app-vaga-livre.c { opacity: .8; }

/* Embaixo: equipado, modo + mapa, JOGAR. */
.app-base { grid-area: base; display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.app-equipado { flex: 0 1 auto; display: grid; gap: 6px; min-width: 0; }
.app-item {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; max-width: 190px; height: 30px; padding: 0 12px; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.app-item::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 3px; background: #0b0f15d9; box-shadow: inset 0 0 0 1px #3a4552; }
.app-item .app-desenho { flex: none; width: 34px; height: 34px; margin: -6px -2px -6px -8px; filter: drop-shadow(0 2px 3px #000a); }
.app-item span { overflow: hidden; font: 600 12px Barlow, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.app-partida { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.app-modo, .app-mapa { position: relative; isolation: isolate; height: 60px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.app-modo { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; }
.app-modo::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 4px 0 0 4px; background: linear-gradient(180deg, #232c38, #151b23); box-shadow: inset 0 0 0 1px #3d4855; }
.app-modo-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffb0001f; box-shadow: inset 0 0 0 1px #ffb00066; }
.app-modo-icone svg { width: 18px; height: 18px; fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-modo-texto { display: grid; }
.app-modo-texto small, .app-mapa small { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.app-modo-texto b { font: 700 16px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; white-space: nowrap; }
.app-mapa { flex: 0 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 380px; padding: 0 14px 0 6px; margin-left: -4px; }
.app-mapa::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #1a212b, #10151c); box-shadow: inset 0 0 0 1px #3d4855; }
.app-mapa .app-mapa-foto { flex: none; width: 84px; height: 48px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #ffffff24; }
.app-mapa span { display: grid; min-width: 0; }
.app-mapa b { overflow: hidden; font: 700 17px/1.15 "Barlow Condensed", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.app-mapa small.dif-facil { color: #79c96d; } .app-mapa small.dif-medio { color: #e0b649; } .app-mapa small.dif-dificil { color: #e3853f; } .app-mapa small.dif-extremo { color: #e35043; }
.app-mapa em { display: grid; justify-items: center; flex: none; margin-left: 4px; padding-left: 2px; color: #fff; font: 800 10px/1 "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 2.5px #0b0f15; paint-order: stroke fill; }
.app-mapa em .app-desenho { width: 40px; height: 40px; margin: -4px 0 -5px; filter: drop-shadow(0 2px 4px #000a); }
.app-mapa:active em .app-desenho { transform: scale(.9); }
.app-jogar.bv-loja { flex: none; flex-direction: column; gap: 2px; min-width: clamp(150px, 22vw, 240px); height: 64px; padding: 0 28px; font: 800 24px/1 "Barlow Condensed", "Segoe UI", sans-serif; letter-spacing: .14em; }
.app-jogar.bv-loja small { max-width: 160px; overflow: hidden; font: 600 10px Barlow, sans-serif; letter-spacing: .04em; text-transform: none; text-overflow: ellipsis; white-space: nowrap; }
.app-jogar.bv-loja small:empty { display: none; }
.app-jogar.bv-loja::before { box-shadow: inset 0 1px 0 #ffffffa0, inset 0 -4px 0 #00000033, 0 6px 22px #ff7a0055; }
/* Na pausa da partida: o JOGAR vira Continuar, e o modo e as vagas saem. */

/* 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; } }
.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; }
.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, html[data-app] #overlay .menu > .panel, html[data-app] #overlay .menu > .picker { animation: none; } }

/* ---------- Tamanhos ---------- */
/* Celular deitado baixo (≤ 400 px de altura): tudo um pouco mais justo. */
@media (max-height: 400px) {
  .app-topo { height: 44px; }
  .app-perfil { height: 40px; }
  .app-perfil img { height: 38px; }
  .app-atalho { width: 72px; }
  .app-atalho .app-desenho { width: 54px; height: 54px; }
  .app-atalho span { margin-top: -3px; font-size: 12px; }
  .app-lateral { gap: 4px; }
  .app-mapa em .app-desenho { width: 34px; height: 34px; }
  .app-modo, .app-mapa { height: 54px; }
  .app-mapa .app-mapa-foto { width: 72px; height: 42px; }
  .app-jogar.bv-loja { height: 56px; font-size: 21px; }
  .app-item { height: 26px; }
}
/* 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;
  }
  .app-girar .girar-arte { width: 96px; height: 96px; margin-bottom: 12px; color: #ee8f3d; }
  .app-girar .girar-celular { fill: currentColor; transform-box: view-box; transform-origin: 32px 33px; animation: girar-celular 2.8s ease-in-out infinite; }
  .app-girar .girar-seta { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
  .app-girar strong { font: 700 30px 'Barlow Condensed', system-ui, sans-serif; }
  .app-girar p { max-width: 30ch; margin: 0; line-height: 1.5; color: #b5c2cc; }
}

/* "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-atalho { width: 104px; }
  .app-atalho .app-desenho { width: 88px; height: 88px; }
  .app-atalho span { font-size: 15px; }
  .app-lateral { gap: 14px; }
  #appPalco .lobby-vaga.app-eu { max-height: 470px; }
}

/* ---------- 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). */
.app-loja-sem-play { display: none; }
html[data-app]: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-lado { display: contents; }
.app-vaga-livre[hidden], .app-membro[hidden], .app-equipe-barra[hidden], .app-busca[hidden] { display: none !important; }
#appPalco .lobby-vaga.app-membro { position: relative; display: block; flex: none; height: calc(84% - var(--placa)); max-height: 290px; margin-top: var(--placa); aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; }
/* Na equipe, um vão maior entre os personagens: as placas (nomes de até 12 letras) cabem lado a lado. */
.app-lobby.em-equipe .app-palco { --vao: clamp(12px, 3.6vw, 32px); }
/* A placa em cima da moldura (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.
   O palco guarda --placa de altura para ela em cima de cada personagem. */
.app-palco { --placa: 51px; }
#appPalco .lobby-vaga.app-eu { height: calc(100% - var(--placa)); margin-top: var(--placa); }
.app-placa {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  width: max-content; max-width: calc(100% + var(--vao) - 2px); padding: 3px 10px 4px 4px; border-radius: 4px; background: #0b0f15d9; box-shadow: inset 0 0 0 1px #ffffff1f, 0 4px 12px #0007; white-space: nowrap; pointer-events: none;
}
.app-placa.sem-conta { padding: 4px 12px; }
.app-placa-insignia { flex: none; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 3px #000a); }
.app-placa-texto { display: grid; gap: 2px; min-width: 0; text-align: left; }
.app-placa-texto b { display: block; overflow: hidden; white-space: nowrap; color: var(--ink); font: 700 15px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-overflow: ellipsis; }
.app-placa-texto small { color: #ffcf6b; font: 600 11px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.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: 3px; background: #ffffff24; 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 é). */
.app-membro .app-placa-insignia { width: 30px; height: 30px; }
.app-membro .app-placa-texto b { font-size: 13px; }
.app-membro .app-placa-texto small { font-size: 10px; }
.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: 10px; padding: 4px 6px 4px 12px; border-radius: 4px; background: #0b0f15cc; box-shadow: inset 0 0 0 1px #ffb00040; }
.app-equipe-conta { color: var(--amber); font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.app-equipe-sair.bv-loja { min-height: 28px; padding: 0 14px; font-size: 12px; }

/* ---------- Procurando jogadores (a busca da Partida rápida) ---------- */
.app-busca { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: #000c; animation: app-folha .16s ease-out; }
.app-busca-caixa {
  display: grid; justify-items: center; gap: 10px; width: min(560px, 100%); padding: 16px 20px 20px; border-radius: 10px;
  background: linear-gradient(180deg, #1a212b, #10151c); box-shadow: inset 0 0 0 1px #3d4855, 0 20px 60px #000c;
}
.app-busca-conta { color: var(--amber); font: 800 30px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.app-busca-vagas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.app-busca-vaga { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.app-busca-vaga img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: color-mix(in srgb, var(--cor) 28%, #0b0f15); box-shadow: 0 0 0 2px var(--cor); }
.app-busca-vaga b { max-width: 100%; overflow: hidden; color: var(--ink); font: 700 12px/1.2 "Barlow Condensed", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.app-busca-vaga.eu b { color: var(--amber); }
.app-busca-vaga.fantasma img { opacity: .75; filter: saturate(.6); }
.app-busca-vaga.vazia { display: grid; place-items: center; width: 58px; height: 58px; justify-self: center; border-radius: 50%; color: #5d6876; font: 700 22px "Barlow Condensed", sans-serif; box-shadow: inset 0 0 0 2px #2f3843; animation: app-busca-pulso 1.4s ease-in-out infinite; }
@keyframes app-busca-pulso { 50% { box-shadow: inset 0 0 0 2px #ffb00066; color: #ffb00099; } }
.app-busca-barra { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: #1a212b; box-shadow: inset 0 0 0 1px #2f3843; }
.app-busca-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffdc4d, #ffb000 50%, #ff7400); transition: width .25s linear; }
.app-busca-dica { margin: 0; color: #c3ccd4; font-size: 13px; text-align: center; }
.app-busca-cancelar.bv-loja { min-height: 40px; padding: 0 26px; }
@media (prefers-reduced-motion: reduce) { .app-busca-vaga.vazia { animation: none; } }

/* ---------- Cosméticos no canto: quatro botões iguais (2 × 2) ---------- */
.app-equipado { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.app-equipado > .app-item { width: 100%; max-width: none; height: 30px; padding: 0 8px 0 10px; gap: 4px; }
.app-equipado > .app-item .app-desenho { width: 30px; height: 30px; margin: -5px -2px -5px -6px; }
.app-equipado > .app-item span { font: 700 11px "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
@media (max-height: 400px) {
  .app-equipado > .app-item { height: 26px; }
  .app-equipado > .app-item .app-desenho { width: 27px; height: 27px; }
  .app-equipado { gap: 5px; }
}
/* 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; }
/* Os cosméticos do canto: estreitos. Personagem e Spray só com o ícone e o nome da categoria. */
.app-equipado { width: 196px; max-width: 30vw; }
/* O seu boneco gira com o dedo: o navegador não rola nem dá zoom ali. */
#appPalco .lobby-vaga.app-eu { touch-action: none; }
.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; }
/* "Personagem" cabe inteiro nos quatro botões iguais. */
.app-equipado { width: 216px; }
.app-equipado > .app-item span { letter-spacing: .03em; }

/* ---------- Expositor: rastros e personagens na janela da faca ---------- */
.vitrine3d.expositor .vitrine3d-tela { display: none; }
.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; }
/* O perfil do topo sem o fundo inclinado atrás: só a foto e o apelido. */
.app-perfil::before { display: none; }
.app-perfil b, .app-perfil small { text-shadow: 0 1px 3px #000c; }
/* Convidar: só a esfera amarela com o "+" (sem o fundo inclinado nem a borda). */
.app-vaga-livre::before { display: none; }
.app-vaga-livre span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-vaga-livre i { width: 46px; height: 46px; transition: transform .12s ease; }
.app-vaga-livre:hover i { transform: scale(1.06); }
.app-vaga-livre:active i { transform: scale(.92); }

/* ---------- Modos: os ícones desenhados (o seletor no botão; cada modo na tela dos modos) ---------- */
.app-modo-icone { width: 48px; height: 48px; border-radius: 0; background: none; box-shadow: none; }
.app-modo-icone .app-desenho { width: 54px; height: 54px; margin: -3px; filter: drop-shadow(0 2px 4px #000a); }
.app-modo-op .app-desenho { flex: none; width: 46px; height: 46px; margin: -6px -2px -6px -6px; filter: drop-shadow(0 2px 4px #000a); }
@media (max-height: 400px) { .app-modo-icone { width: 42px; height: 42px; } .app-modo-icone .app-desenho { width: 48px; height: 48px; } }

/* ---------- 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(6, minmax(0, 1fr)); gap: 8px; }
.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(3, minmax(0, 1fr)); } }

/* ---------- Seletor de modo e de mapa sem a placa inclinada ----------
   Só o ícone, a foto e os textos sobre o lobby (como o perfil e o Convidar). */
.app-modo::before, .app-mapa::before { display: none; }
/* Sem a placa, o recuo dela vira lugar para o nome do mapa. */
.app-modo { padding: 0 6px 0 2px; }
.app-mapa { margin-left: 6px; padding: 0 2px; gap: 8px; }
.app-modo-texto small, .app-modo-texto b, .app-mapa small, .app-mapa b { text-shadow: 0 1px 3px #000d, 0 0 8px #0009; }
.app-modo-texto small, .app-mapa small:not([class*="dif-"]) { color: #d5dbe3; }

/* ---------- 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 { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 5px; border: 0; border-radius: 999px; background: #0b0f15cc; box-shadow: inset 0 0 0 1px #ffb00066; color: #ffd76a; cursor: pointer; }
.app-vectors[hidden] { display: none; }
.app-vectors img { width: 26px; height: 26px; }
.app-vectors b { font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; }
/* 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 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; }
.fim-vectors.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; } }

/* ---------- Partida encontrada (src/lobby-app.js, desenharPartida) ----------
   A tela cheia entre achar os jogadores e a largada, enquanto o mapa carrega: o
   mapa ao fundo, "Jogadores encontrados", o seu personagem, o emblema, quem vai
   correr, uma dica e o Sair. */
.app-encontrada { position: fixed; inset: 0; z-index: 90; display: grid; overflow: hidden; background: #05070b; animation: app-folha .2s ease-out; }
.app-encontrada[hidden] { display: none !important; }
.app-encontrada.saindo { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.app-encontrada-fundo { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(7px) brightness(.42) saturate(1.15); }
.app-encontrada-caixa { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 8px; padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.app-encontrada-conta { margin: 0; color: #fff; font: 800 clamp(22px, 7vh, 34px)/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-align: center; text-shadow: 0 3px 0 #000a, 0 0 18px #000; }
.app-encontrada-meio { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; width: 100%; min-height: 0; }
.app-encontrada-eu { position: relative; justify-self: start; width: auto; height: min(56vh, 260px); min-height: 0; aspect-ratio: 2 / 3; }
.app-encontrada-eu .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; }
.app-encontrada-centro { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.app-encontrada-emblema { width: clamp(84px, 30vh, 150px); height: auto; border-radius: 22%; filter: drop-shadow(0 8px 22px #000c) drop-shadow(0 0 26px #ffb00055); animation: app-encontrada-pulso 1.6s ease-in-out infinite; }
@keyframes app-encontrada-pulso { 50% { transform: scale(1.05); filter: drop-shadow(0 8px 22px #000c) drop-shadow(0 0 40px #ffb00099); } }
.app-encontrada-mapa { margin: 0; color: #fff; font: 700 17px "Barlow Condensed", sans-serif; letter-spacing: .05em; text-shadow: 0 2px 8px #000; white-space: nowrap; }
.app-encontrada-barra { display: block; width: min(220px, 40vw); height: 6px; overflow: hidden; border-radius: 999px; background: #ffffff24; }
.app-encontrada-barra i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb000, #ff7a00); animation: app-encontrada-barra 1.2s ease-in-out infinite; }
@keyframes app-encontrada-barra { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.app-encontrada-gente { display: grid; justify-self: end; gap: 6px; min-width: 0; }
.app-encontrada-jogador { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 12px 4px 4px; border-radius: 999px; background: #0b0f15cc; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 60%, transparent); }
.app-encontrada-jogador img { flex: none; width: 34px; height: 34px; object-fit: cover; object-position: 50% 12%; border-radius: 50%; background: color-mix(in srgb, var(--cor) 30%, #10151c); }
.app-encontrada-jogador b { overflow: hidden; max-width: 22vw; color: #fff; font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.app-encontrada-jogador.eu { box-shadow: inset 0 0 0 2px var(--amber); }
.app-encontrada-jogador.fantasma b { color: #b9cbdb; }
.app-encontrada-dica { max-width: 620px; margin: 0; color: #e7edf3; font-size: 14px; line-height: 1.4; text-align: center; text-shadow: 0 2px 8px #000; }
.app-encontrada-sair { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); height: 38px; padding: 0 18px; color: #ff9b8f; background: #0b0f15cc; }
@media (prefers-reduced-motion: reduce) { .app-encontrada-emblema, .app-encontrada-barra i { animation: none; } }

/* ---------- 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 ---------- */
.app-mapa:disabled { cursor: default; opacity: 1; }
.app-mapa:disabled em { visibility: hidden; }
.app-modo:disabled { cursor: default; opacity: 1; }
/* A placa de quem confirmou acende em verde, com o visto. */
.app-placa.pronto { box-shadow: inset 0 0 0 2px #4ade80, 0 4px 12px #0007; }
.app-placa.pronto::after { content: "✓"; position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #4ade80; color: #06210f; font: 800 13px/1 "Segoe UI", sans-serif; box-shadow: 0 1px 4px #000a; }
/* O JOGAR de quem já confirmou vira "Cancelar" (discreto); o do líder treme se falta alguém. */
.app-jogar.bv-loja.pronto::before { background: linear-gradient(180deg, #2a323d, #1a212b); box-shadow: inset 0 0 0 2px #4ade80; }
.app-jogar.bv-loja.pronto { color: #bdf5d0; }
.app-jogar.bv-loja small { max-width: 190px; }
@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; }
/* 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; }
.app-virar .girar-arte { width: 96px; height: 96px; margin-bottom: 12px; color: #ee8f3d; }
.app-virar .girar-celular { fill: currentColor; transform-box: view-box; transform-origin: 32px 33px; animation: girar-celular 2.8s ease-in-out infinite; }
.app-virar .girar-seta { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.app-virar strong { font: 700 30px 'Barlow Condensed', system-ui, sans-serif; }
.app-virar p { max-width: 30ch; margin: 0; line-height: 1.5; color: #b5c2cc; }
/* 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): no topo, à esquerda das moedas. */
.app-topo .app-gestos { flex: none; gap: clamp(2px, .7vw, 8px); }
.app-topo .app-gestos .gesto { width: clamp(26px, 7.6vh, 36px); height: clamp(26px, 7.6vh, 36px); font-size: clamp(19px, 5.8vh, 26px); }
/* 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; }