/* ============================================================
   LOBBY — o mapa da ilha como menu (ver lobby.js)
   ============================================================
   `body.is-lobby` é ligado pelo lobby.js enquanto a página do mapa está ativa. É ele que
   tira o padding/teto de largura do conteúdo: o mapa é a única página de borda a borda. */
body.is-lobby .app-main { position: relative; }
body.is-lobby .app-content {
  max-width: none; margin: 0; padding: 0;
  overflow: hidden;
}
/* O HUD do usuário flutua SOBRE o mapa em vez de empurrá-lo para baixo. */
@media (min-width: 1151px) {
  body.is-lobby .app-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    pointer-events: none;
  }
  body.is-lobby .app-topbar > * { pointer-events: auto; }
  body.is-lobby .app-topbar .hud-chip {
    background: rgba(8, 8, 10, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}

.app-page[data-page="lobby"] { position: relative; height: 100%; }

/* ---- Janela + palco ----
   A janela é um container de tamanho; o palco tem a proporção da arte e é dimensionado
   para COBRIR a janela (o maior entre "largura cheia" e "altura cheia"). O que sobra
   para os lados rola — no toque nativamente, no mouse por arrasto (lobby.js). */
.lobby-view {
  position: absolute; inset: 0;
  container-type: size;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  background: #0b0b0e;
}
.lobby-view::-webkit-scrollbar { display: none; }
.lobby-view.is-pannable { cursor: grab; }
.lobby-view.is-dragging { cursor: grabbing; user-select: none; }

.lobby-stage {
  position: relative;
  /* "Cover" com 10% de folga: a arte pode esticar até 10% na vertical antes de começar
     a cortar as laterais. Numa ilustração isso não se nota, e é o que mantém os prédios
     das bordas (LEADERBOARD, FAQ, CARDS) na tela de um notebook com a sidebar aberta —
     no cover exato eles nasciam cortados. 1.614 = (1671 / 941) / 1.1. */
  width: max(100cqw, calc(100cqh * 1.614));
  height: max(100cqh, calc(100cqw * 941 / 1671));
  background: #14121c url("assets/bg-lobby.jpg") center / 100% 100% no-repeat;
  transition: transform 420ms cubic-bezier(0.6, 0, 0.9, 0.4), opacity 360ms ease-in;
}
/* A arte tem duas versões: 2560 px para quase todo mundo e 4K só para janelas largas o
   bastante para mostrar a diferença — num notebook os 2,4 MB a mais não comprariam nada.
   O preload do index.html usa a media inversa, para ninguém baixar as duas. */
@media (min-width: 2000px) {
  .lobby-stage { background-image: url("assets/bg-lobby-4k.jpg"); }
}
/* O mergulho no prédio escolhido. transform-origin vem do lobby.js. */
.lobby-stage.is-entering { transform: scale(2.1); opacity: 0; }
.lobby-stage.is-entering .lobby-spot:not(.is-chosen) { opacity: 0; }

/* ---- Moldura: vinheta + HUD (não rolam com o mapa) ---- */
.lobby-frame {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,11,0.72) 0, rgba(8,8,11,0) 150px),
    linear-gradient(0deg, rgba(8,8,11,0.78) 0, rgba(8,8,11,0) 170px),
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(8,8,11,0.55) 100%);
}
.lobby-title {
  /* Embaixo à esquerda: é o único canto da arte sem prédio (ali é só mar). No topo o
     título cobria a mansão do PROFILE. O `bottom` deixa passar a faixa de avisos. */
  position: absolute; left: 30px; bottom: 92px;
  display: flex; flex-direction: column; gap: 4px;
  transform: skewX(-10deg); transform-origin: bottom left;
}
.lobby-title small {
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 3px;
  color: var(--accent);
}
.lobby-title small i { font-style: normal; color: var(--text-dim); margin: 0 4px; }
.lobby-title b {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1; letter-spacing: 1px;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 26px rgba(233,161,59,0.35);
}
.lobby-title span {
  width: 86px; height: 4px; margin-top: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.lobby-hint {
  margin: 8px 0 0;
  display: none; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 2.5px;
  color: rgba(243,241,236,0.72);
}
.lobby-hint::before {
  content: ""; width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.lobby-view.is-pannable ~ .lobby-frame .lobby-hint { display: flex; }
body.no-ticker .lobby-title { bottom: 26px; }

/* ---- Marcadores ----
   O botão é um ponto de tamanho zero cravado no prédio; etiqueta, haste e pino crescem
   para CIMA a partir dele, então left/top apontam exatamente para onde o pino encosta. */
.lobby-spot {
  position: absolute; z-index: 2;
  width: 0; height: 0; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms;
}
.lobby-spot:hover, .lobby-spot:focus-visible { z-index: 3; outline: none; }

/* pino: losango âmbar com um anel que pulsa */
.ls-pin {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px;
  transform: rotate(45deg);
  background: var(--accent);
  border: 2px solid #0b0b0e;
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px 2px var(--accent-glow);
  transition: transform 220ms var(--ease-smooth), background 180ms;
}
.ls-pin::after {
  content: ""; position: absolute; inset: -9px;
  border: 2px solid var(--accent); opacity: 0;
  animation: lobby-ping 2.4s ease-out infinite;
}
@keyframes lobby-ping {
  0%   { transform: scale(0.45); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ls-stem {
  position: absolute; left: -1px; bottom: 8px; width: 2px; height: 30px;
  background: linear-gradient(180deg, var(--accent), rgba(233,161,59,0.25));
  transform-origin: bottom; transition: height 220ms var(--ease-smooth);
}

/* etiqueta: placa inclinada, barra âmbar na lateral */
.ls-tag {
  position: absolute; left: -14px; bottom: 36px;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 7px 16px 7px 14px;
  white-space: nowrap; text-align: left;
  transform: skewX(-12deg); transform-origin: bottom left;
  background: rgba(8, 8, 10, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 4px solid var(--accent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  transition: background 180ms, border-color 180ms, color 180ms, bottom 220ms var(--ease-smooth), box-shadow 180ms;
}
.ls-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 14px; letter-spacing: 1.2px; line-height: 1.1;
}
/* O subtítulo abre no hover: em repouso a placa é só o nome, para dez placas não
   cobrirem a arte. */
.ls-sub {
  /* max-width junto com max-height: só a altura deixaria o subtítulo invisível mas
     ainda esticando a placa até a largura dele. */
  max-height: 0; max-width: 0; opacity: 0; overflow: hidden;
  font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: 1.4px;
  color: var(--text-dim);
  transition: max-height 220ms var(--ease-smooth), opacity 180ms, margin 220ms, color 180ms;
}
.ls-sub::after { content: "  ENTER ›"; white-space: pre; color: inherit; font-weight: 800; }
.ls-new {
  font-style: normal; font-size: 9px; letter-spacing: 1px; padding: 2px 5px;
  color: #0b0b0e; background: var(--accent); border-radius: 3px;
}

/* placas da metade direita abrem para a esquerda */
.lobby-spot.is-left .ls-tag {
  left: auto; right: -14px; align-items: flex-end; text-align: right;
  transform-origin: bottom right;
  padding: 7px 14px 7px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 4px solid var(--accent);
}

.lobby-spot:hover .ls-tag,
.lobby-spot:focus-visible .ls-tag,
.lobby-spot.is-chosen .ls-tag {
  background: var(--accent); color: #0b0b0e;
  border-color: var(--accent);
  /* A placa NÃO sobe no hover. Subindo 10px ela saía de baixo de um cursor parado na
     borda de baixo dela, o hover caía, ela descia, o hover voltava — e o mapa ficava
     piscando conforme onde o mouse estava. Ela só cresce para CIMA (está ancorada em
     `bottom`), então quem está em cima dela continua em cima dela. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 34px var(--accent-glow);
}
/* Ponte invisível entre a placa e o pino: sem ela, levar o mouse do pino para a placa
   passava pelo vão da haste, onde não há nada — o hover piscava no caminho. */
.ls-tag::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px;
}
.lobby-spot:hover .ls-sub,
.lobby-spot:focus-visible .ls-sub,
.lobby-spot.is-chosen .ls-sub { max-height: 16px; max-width: 300px; opacity: 1; margin-top: 3px; color: rgba(11,11,14,0.78); }
.lobby-spot:hover .ls-stem,
.lobby-spot:focus-visible .ls-stem,
.lobby-spot.is-chosen .ls-stem { background: var(--accent); }
.lobby-spot:hover .ls-pin,
.lobby-spot:focus-visible .ls-pin,
.lobby-spot.is-chosen .ls-pin { transform: rotate(45deg) scale(1.3); background: #fff; }
.lobby-spot:hover .ls-new { background: #0b0b0e; color: var(--accent); }
.lobby-spot:active .ls-tag { filter: brightness(0.92); }

/* prédios que a carteira sem Racerz não abre */
.lobby-spot.is-locked { --accent: #7c7c86; --accent-glow: rgba(124,124,134,0.3); }
.lobby-spot.is-locked .ls-name { color: var(--text-dim); }
.lobby-spot.is-locked .ls-pin::after { animation: none; }
.lobby-spot.is-locked:hover .ls-name { color: #0b0b0e; }
.lobby-spot.is-locked .ls-sub::after { content: ""; }

/* ---- Telas estreitas ---- */
@media (max-width: 768px) {
  .lobby-title { left: 18px; bottom: 86px; }
  .ls-name { font-size: 12.5px; }
  .ls-tag { padding: 6px 12px 6px 10px; }
  .lobby-spot.is-left .ls-tag { padding: 6px 10px 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-pin::after { animation: none; }
  .lobby-stage, .ls-tag, .ls-stem, .ls-pin, .ls-sub { transition-duration: 1ms; }
}


/* ============================================================
   O MAPA É O MENU — a sidebar sai de cena
   ============================================================
   A lista de abas CONTINUA no HTML, escondida: switchPage, o sininho de missões, o tour e
   o applyHolderMode usam aqueles elementos como estado. Tirá-los do DOM quebraria os
   quatro; escondê-los não quebra nenhum. O que era do menu foi para a topbar:
   BACK TO MAP à esquerda, e LOGOUT / ADMIN / BUY RACERZ ao lado do saldo. */
.app-nav, .nav-menu-backdrop, .nav-burger { display: none !important; }
/* O ticker se centra no espaço à direita da sidebar lendo esta variável. */
:root, body.nav-collapsed { --nav-w: 0px; }

.back-to-map, .top-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; flex: 0 0 auto; cursor: pointer;
  border-radius: 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.8px;
  text-decoration: none; white-space: nowrap;
  color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: background 180ms, border-color 180ms, color 180ms, transform 180ms;
}
.back-to-map[hidden], .top-btn[hidden] { display: none; }
.back-to-map svg, .top-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.back-to-map { padding-left: 11px; color: var(--accent); border-color: rgba(233,161,59,0.38); background: rgba(233,161,59,0.08); }
.back-to-map:hover { background: var(--accent); border-color: var(--accent); color: #0b0b0e; }
.back-to-map:hover svg { transform: translateX(-3px); }
.back-to-map svg { transition: transform 180ms var(--ease-smooth); }
.back-to-map:active, .top-btn:active { transform: scale(0.97); }
.back-to-map:focus-visible, .top-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(233,161,59,0.18);
}
.btm-short { display: none; }
body.is-lobby .back-to-map { display: none; }

.top-btn:hover { border-color: var(--accent); background: rgba(233,161,59,0.14); }
/* BUY RACERZ é a única chamada à ação da barra para quem não tem Racerz, então é o
   único botão que se mexe: um halo que respira e um brilho que varre a placa. */
.top-buy {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0 20px 0 16px;
  font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: 1.2px;
  color: #0b0b0e;
  background: linear-gradient(100deg, var(--accent-strong), var(--accent) 45%, var(--accent-soft));
  border-color: var(--accent-soft);
  animation: buyGlow 2.2s ease-in-out infinite;
}
.top-buy::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto; transform: rotate(45deg);
  background: #0b0b0e;
}
.top-buy::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
  transform: translateX(-140%) skewX(-18deg);
  animation: buyShine 3.2s ease-in-out infinite;
}
.top-buy:hover { filter: brightness(1.1); transform: translateY(-1px); }
@keyframes buyGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,161,59,0.55), 0 0 14px 1px var(--accent-glow); }
  50%      { box-shadow: 0 0 0 7px rgba(233,161,59,0), 0 0 26px 6px var(--accent-glow); }
}
@keyframes buyShine {
  0%, 55%  { transform: translateX(-140%) skewX(-18deg); }
  100%     { transform: translateX(380%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .top-buy, .top-buy::after { animation: none; }
}

@media (min-width: 1151px) {
  /* Com a sidebar fora, a marca e o LOGOUT que viviam nela passam a aparecer aqui. */
  .topbar-brand {
    display: block;
    font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 24px;
    color: var(--neon-pink); letter-spacing: 0.5px; text-shadow: 0 0 18px rgba(233,161,59,0.35);
  }
  .app-topbar .btn-disconnect { display: inline-flex; }
  body.is-lobby .back-to-map, body.is-lobby .top-btn:not(.top-buy), body.is-lobby .app-topbar .btn-disconnect {
    background-color: rgba(8, 8, 10, 0.78);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}

@media (max-width: 1150px) {
  /* O saldo vivia no drawer; sem drawer, volta para a barra em versão compacta. */
  .app-topbar .app-user { margin-left: auto; }
  .app-user .balance-chip { display: flex; padding: 5px 10px 5px 6px; }
  .app-user .balance-chip .chip-label { display: none; }
  /* A chave vai junto, só ícone + número. */
  .app-user .key-chip { display: flex; padding: 5px 9px 5px 6px; gap: 6px; }
  .app-user .key-chip .chip-label { display: none; }
  /* Fora do mapa o lugar da marca é do botão de voltar. */
  body:not(.is-lobby) .topbar-brand { display: none; }
  .back-to-map { order: 0; height: 42px; padding: 0 14px 0 9px; border-radius: 12px; }
  .btm-long { display: none; }
  .btm-short { display: inline; }
  .top-btn { order: 3; height: 42px; border-radius: 12px; }
  .top-admin { width: 42px; padding: 0; }
  .top-admin span { display: none; }
}
@media (max-width: 480px) {
  .app-user .balance-chip .chip-ico { display: none; }
  .app-user .balance-chip { padding: 5px 9px; }
  .app-user .key-chip { padding: 5px 8px; gap: 4px; }
  .app-user .key-chip .chip-ico { width: 16px; height: 16px; border: 0; background: none; }
  .app-user .key-chip .chip-ico svg { width: 14px; height: 14px; }
  .app-user .key-chip .chip-value { font-size: 12px; }
  .top-buy { padding: 0 11px; font-size: 11px; letter-spacing: 0.4px; }
  .top-buy::before { display: none; }
  /* Telefone: a barra tem 375 px para MAP + saldo + logout (+ admin) (+ BUY RACERZ).
     Não cabe tudo, então aperta-se o que dá e, DENTRO das páginas, o BUY RACERZ sai —
     ele continua no mapa, que é para onde o botão MAP leva. */
  .app-topbar { gap: 8px; }
  .app-topbar .app-user { gap: 8px; }
  .app-user .balance-chip .chip-value { font-size: 12px; }
  body:not(.is-lobby) .top-buy { display: none; }
}
@media (max-width: 620px) {
  /* Sem Racerz a barra ganha o BUY RACERZ; a marca cede o lugar, senão o botão sai
     pela borda direita. */
  body.is-nonholder .topbar-brand { display: none; }
}