/* Lobby estilo Capítulo 1 */
#lobby { position: fixed; inset: 0; z-index: 10; color: #fff; font-family: "Segoe UI", Arial, sans-serif; display: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#lobby * { box-sizing: border-box; }
.lb-topo { position: absolute; top: 0; left: 0; right: 0; height: 74px; display: flex; align-items: center; padding: 0 22px; gap: 24px; background: linear-gradient(rgba(10,20,45,.85), rgba(10,20,45,.35)); }
.lb-card { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.lb-banner { width: 46px; height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid #fff; }
.lb-nome { font-size: 18px; font-weight: 800; cursor: pointer; } .lb-nome:hover { text-decoration: underline; }
.lb-nivel { font-size: 12px; opacity: .85; }
.lb-xp { width: 200px; height: 6px; background: rgba(0,0,0,.5); border-radius: 3px; margin-top: 3px; overflow: hidden; } .lb-xp div { height: 100%; background: #ffd94a; }
.lb-abas { display: flex; gap: 4px; flex: 1; justify-content: center; }
.lb-aba { padding: 10px 16px; font-weight: 800; letter-spacing: 1px; font-size: 14px; background: rgba(0,0,0,.35); border-radius: 4px; cursor: pointer; transition: .15s; }
.lb-aba:hover { background: rgba(255,255,255,.15); } .lb-aba.sel { background: #ffd94a; color: #1b2a4b; text-shadow: none; }
.lb-vb { font-weight: 800; font-size: 18px; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 6px; }
.vbico { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #4fd648; color: #06301a; font-weight: 900; font-family: 'Luckiest Guy', 'Nunito', Arial, sans-serif; text-align: center; line-height: 22px; font-size: 14px; text-shadow: none; margin-right: 4px; }
.lb-corpo { position: absolute; top: 84px; left: 22px; right: 22px; bottom: 40px; overflow: auto; }
.lb-corpo h2 { margin: 6px 0 4px; font-size: 26px; font-weight: 900; letter-spacing: 2px; }
.lb-sub { opacity: .9; font-size: 14px; margin-bottom: 12px; background: rgba(0,0,0,.35); padding: 8px 12px; border-radius: 6px; display: inline-block; }
.lb-rodape { position: absolute; bottom: 0; left: 0; right: 0; height: 32px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; font-size: 12px; opacity: .8; background: rgba(0,0,0,.4); }
/* menu Esc dentro do jogo */
#menuesc { position: fixed; inset: 0; z-index: 12; display: none; align-items: center; justify-content: center; background: rgba(5,10,25,.55); color: #fff; font-family: "Segoe UI", Arial, sans-serif; }
.me-box { width: min(720px, 92vw); max-height: 88vh; overflow: auto; background: rgba(10,20,45,.95); border-radius: 10px; padding: 18px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.me-t { font-size: 26px; font-weight: 900; letter-spacing: 4px; margin-bottom: 10px; }
.me-bts { display: flex; gap: 10px; margin-bottom: 12px; } .me-bts .perigo { margin-top: 0; }
.me-cfg .lb-config { max-width: none; background: rgba(0,0,0,.25); }
/* aba lobby */
.lb-esq { position: absolute; left: 0; top: 0; width: 340px; }
.lb-news { background: rgba(10,20,45,.82); border-radius: 8px; padding: 14px; border-left: 5px solid #ffd94a; }
.lb-news-tag { font-size: 11px; letter-spacing: 3px; color: #ffd94a; font-weight: 800; } .lb-news h3 { margin: 4px 0 6px; font-size: 20px; } .lb-news p { margin: 0; font-size: 14px; line-height: 1.4; }
.lb-news-nav { margin-top: 8px; font-size: 13px; } .lb-news-nav span { cursor: pointer; font-size: 20px; padding: 0 6px; }
.lb-party { margin-top: 14px; background: rgba(10,20,45,.7); border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.lb-party-t { font-size: 11px; letter-spacing: 3px; font-weight: 800; opacity: .8; margin-bottom: 6px; } .lb-party-m { padding: 4px 0; } .lb-party-m.dim { opacity: .55; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.lb-dir { position: absolute; right: 0; bottom: 0; width: 360px; text-align: right; }
.lb-modo { background: rgba(10,20,45,.82); border-radius: 8px; padding: 12px; text-align: left; margin-bottom: 12px; }
.lb-modo-t { font-size: 11px; letter-spacing: 3px; font-weight: 800; opacity: .8; margin-bottom: 8px; }
.lb-modo-op { padding: 8px 10px; border-radius: 5px; cursor: pointer; margin-bottom: 4px; border: 2px solid transparent; } .lb-modo-op:hover { background: rgba(255,255,255,.1); } .lb-modo-op.sel { border-color: #ffd94a; background: rgba(255,217,74,.15); }
.lb-modo-op b { display: block; font-size: 15px; letter-spacing: 1px; } .lb-modo-op span { font-size: 12px; opacity: .8; }
.lb-fill { margin-top: 8px; font-size: 13px; } .lb-fill b { cursor: pointer; color: #ffd94a; }
.lb-play { width: 100%; font-size: 34px; font-weight: 900; padding: 16px; border: 0; border-radius: 8px; background: #ffd94a; color: #1b2a4b; cursor: pointer; letter-spacing: 6px; box-shadow: 0 6px 0 #a88a1a; text-shadow: none; }
.lb-play:hover { background: #ffe680; } .lb-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #a88a1a; }
.lb-dica { margin-top: 8px; font-size: 13px; opacity: .85; }
/* passe */
.lb-passe-top { display: flex; justify-content: space-between; align-items: center; background: rgba(10,20,45,.82); padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; } .lb-passe-top h2 { margin: 0 0 4px; } .ok { color: #4fd648; font-weight: 800; }
.lb-btn { font-size: 15px; font-weight: 800; padding: 10px 18px; border: 0; border-radius: 6px; background: #ffd94a; color: #1b2a4b; cursor: pointer; letter-spacing: 1px; text-shadow: none; } .lb-btn:hover { background: #ffe680; } .lb-btn.perigo { background: #d33; color: #fff; margin-top: 16px; }
.lb-passe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.lb-tier { background: rgba(10,20,45,.75); border-radius: 6px; padding: 6px; text-align: center; font-size: 11px; border: 2px solid rgba(255,255,255,.15); position: relative; min-height: 86px; }
.lb-tier .tn { position: absolute; top: 3px; left: 5px; font-weight: 800; opacity: .8; } .lb-tier .ti { font-size: 26px; margin-top: 12px; } .lb-tier .tt { font-weight: 700; line-height: 1.1; } .lb-tier .tg { color: #4fd648; font-size: 10px; font-weight: 800; }
.lb-tier.r1 { border-color: #4fd648; } .lb-tier.r2 { border-color: #3d8cff; } .lb-tier.r3 { border-color: #b34ff0; } .lb-tier.r4 { border-color: #ffbf2e; }
.lb-tier.got { background: rgba(79,214,72,.25); } .lb-tier.lock { opacity: .45; }
/* desafios */
.lb-desafios { max-width: 760px; } .lb-des-t { font-weight: 800; letter-spacing: 2px; margin: 12px 0 6px; font-size: 13px; opacity: .9; }
.lb-des { display: grid; grid-template-columns: 1fr 200px 70px 100px; gap: 12px; align-items: center; background: rgba(10,20,45,.75); padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; font-size: 14px; }
.lb-des.feito { opacity: .55; text-decoration: line-through; } .lb-des .db { height: 8px; background: rgba(0,0,0,.5); border-radius: 4px; overflow: hidden; } .lb-des .db div { height: 100%; background: #ffd94a; } .lb-des .dr { color: #ffd94a; font-weight: 800; text-align: right; }
/* armário / loja */
.lb-cats { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.lb-cat { padding: 6px 12px; background: rgba(0,0,0,.4); border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 700; } .lb-cat.sel { background: #ffd94a; color: #1b2a4b; text-shadow: none; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.lb-item { background: rgba(10,20,45,.8); border-radius: 8px; padding: 8px; cursor: pointer; border: 2px solid rgba(255,255,255,.2); position: relative; transition: .1s; }
.lb-item:hover { transform: translateY(-2px); border-color: #fff; } .lb-item.lock { opacity: .5; } .lb-item.eq { border-color: #4fd648; box-shadow: inset 0 0 0 1px #4fd648, 0 4px 12px rgba(0,0,0,.4); }
/* cards do armário e da loja: fundo na cor da raridade com um brilho suave atrás do ícone */
.lb-item { background: radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.14), rgba(255,255,255,0) 62%), linear-gradient(rgba(30,44,80,.9), rgba(10,20,45,.9)); }
.lb-item.r1 { background: radial-gradient(ellipse at 50% 32%, rgba(140,255,120,.28), rgba(0,0,0,0) 62%), linear-gradient(rgba(16,50,28,.92), rgba(40,150,36,.65)); border-color: rgba(79,214,72,.5); }
.lb-item.r2 { background: radial-gradient(ellipse at 50% 32%, rgba(130,190,255,.3), rgba(0,0,0,0) 62%), linear-gradient(rgba(14,32,80,.92), rgba(40,100,220,.65)); border-color: rgba(61,140,255,.5); }
.lb-item.r3 { background: radial-gradient(ellipse at 50% 32%, rgba(220,150,255,.3), rgba(0,0,0,0) 62%), linear-gradient(rgba(40,14,80,.92), rgba(150,50,220,.65)); border-color: rgba(179,79,240,.5); }
.lb-item.r4 { background: radial-gradient(ellipse at 50% 32%, rgba(255,230,150,.32), rgba(0,0,0,0) 62%), linear-gradient(rgba(70,40,10,.92), rgba(230,160,20,.65)); border-color: rgba(255,191,46,.55); }
.lb-item .ii { height: 96px; display: flex; align-items: center; justify-content: center; padding: 2px 6px; } .lb-item .ii svg { max-height: 92px; filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); }
.lb-tier .ti svg { height: 44px; width: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); } .lb-item .in { font-weight: 800; font-size: 13px; margin-top: 4px; } .lb-item .ir { font-size: 11px; opacity: .85; } .lb-item .ip { position: absolute; top: 6px; right: 8px; font-weight: 800; color: #5ad0ff; } .lb-item .ieq { position: absolute; top: 6px; right: 8px; font-size: 10px; color: #4fd648; font-weight: 800; }
/* emotes e telas de carregamento ainda usam emoji/degradê; o resto dos cosméticos é SVG (lobby.js previewItem) */
.pv-emote { font-size: 44px; } .pv-tela { width: 120px; height: 70px; border-radius: 6px; }
.lb-loja-t { font-weight: 800; letter-spacing: 3px; margin: 8px 0; font-size: 13px; }
/* carreira / config */
.lb-tabela { border-collapse: collapse; background: rgba(10,20,45,.8); border-radius: 8px; overflow: hidden; font-size: 14px; min-width: 520px; }
.lb-tabela th, .lb-tabela td { padding: 8px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); } .lb-tabela th { background: rgba(0,0,0,.35); font-size: 12px; letter-spacing: 1px; } .lb-tabela tr.eu td { color: #ffd94a; font-weight: 800; }
.lb-config { max-width: 640px; background: rgba(10,20,45,.8); padding: 14px 18px; border-radius: 8px; }
.lb-cfg-t { font-weight: 800; letter-spacing: 3px; margin: 12px 0 6px; font-size: 12px; opacity: .9; }
.lb-cfg { display: grid; grid-template-columns: 240px 1fr 50px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lb-cfg input[type=range] { width: 100%; }
.lb-tg { padding: 6px 12px; border: 0; border-radius: 4px; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font-weight: 800; font-size: 12px; margin-right: 4px; } .lb-tg.on { background: #4fd648; color: #0a2a10; text-shadow: none; }
/* teclas configuráveis */
.lb-bind-g { font-weight: 800; letter-spacing: 2px; font-size: 11px; opacity: .75; margin: 10px 0 2px; }
.lb-bind { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: center; padding: 4px 0; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.lb-key { justify-self: start; min-width: 90px; padding: 5px 12px; border: 2px solid rgba(255,255,255,.35); border-bottom-width: 4px; border-radius: 5px; background: rgba(255,255,255,.12); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 1px; cursor: pointer; font-family: inherit; }
.lb-key:hover { background: rgba(255,255,255,.25); } .lb-key.cap { background: #ffd94a; color: #1b2a4b; border-color: #fff; animation: piscaKey 0.8s infinite; } .lb-key.dup { border-color: #ffb347; }
@keyframes piscaKey { 50% { opacity: .5; } }
/* multiplayer: grupo, convites, jogadores online */
.lb-party .lider { color: #ffd94a; font-size: 12px; font-weight: 800; }
.lb-party .lb-tg { padding: 4px 10px; font-size: 11px; margin-left: 6px; }
.lb-party .lb-x { cursor: pointer; opacity: .6; margin-left: 6px; font-weight: 800; } .lb-party .lb-x:hover { opacity: 1; color: #f66; }
.lb-convite { margin: 6px 0; padding: 8px 10px; background: rgba(255,217,74,.18); border-left: 4px solid #ffd94a; border-radius: 4px; font-size: 13px; line-height: 1.7; }
.lb-party-m.aviso { color: #ffd94a; font-size: 13px; }
.lb-modo-op.trav { cursor: default; opacity: .7; } .lb-modo-op.trav:hover { background: transparent; }
.lb-play.espera { background: #6a6f80; color: #dfe3ee; box-shadow: 0 6px 0 #3a3f50; cursor: default; font-size: 22px; letter-spacing: 2px; }
.lb-rodape .on { color: #4fd648; font-weight: 800; } .lb-rodape .off { color: #f66; font-weight: 800; }
/* ---- acabamento: fonte própria, gradientes e brilhos ---- */
#lobby, #menuesc { font-family: 'Nunito', "Segoe UI", Arial, sans-serif; }
.lb-aba, .lb-play, .lb-corpo h2, .me-t, .lb-modo-op b, .lb-nome, .lb-news h3, .lb-btn { font-family: 'Luckiest Guy', 'Nunito', "Segoe UI", Arial, sans-serif; font-weight: 400; letter-spacing: 1px; }
.lb-aba { font-size: 15px; letter-spacing: 2px; padding: 10px 18px; }
.lb-aba.sel { background: linear-gradient(180deg, #ffe36b, #ffc93a); box-shadow: 0 0 14px rgba(255,217,74,.45); }
.lb-topo { background: linear-gradient(rgba(6,14,36,.92), rgba(6,14,36,.45)); border-bottom: 1px solid rgba(255,255,255,.08); }
.lb-news { background: linear-gradient(160deg, rgba(14,28,64,.9), rgba(8,16,40,.85)); box-shadow: 0 8px 24px rgba(0,0,0,.45); border-left-color: #ffc93a; }
.lb-news h3 { font-size: 24px; letter-spacing: 2px; }
.lb-party, .lb-modo { background: linear-gradient(160deg, rgba(14,28,64,.88), rgba(8,16,40,.82)); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.lb-modo-op.sel { background: linear-gradient(90deg, rgba(255,217,74,.22), rgba(255,217,74,.06)); box-shadow: inset 0 0 0 1px rgba(255,217,74,.35); }
.lb-modo-op b { font-size: 17px; letter-spacing: 2px; }
.lb-play { font-size: 40px; letter-spacing: 6px; background: linear-gradient(180deg, #ffe36b, #ffc93a); position: relative; overflow: hidden; }
.lb-play::after { content: ""; position: absolute; top: -60%; left: -40%; width: 30%; height: 220%; background: rgba(255,255,255,.35); transform: rotate(20deg); animation: brilho 3.2s infinite; }
@keyframes brilho { 0% { left: -40%; } 60% { left: 130%; } 100% { left: 130%; } }
.lb-play.espera { background: #6a6f80; } .lb-play.espera::after { display: none; }
.lb-item { box-shadow: 0 4px 12px rgba(0,0,0,.4); } .lb-item:hover { box-shadow: 0 0 16px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.5); }
.lb-corpo h2 { font-size: 30px; letter-spacing: 3px; }
.lb-tier { box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.lb-config { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
/* duas teclas por ação */
.lb-bind { grid-template-columns: 240px 1fr; }
.lb-keys { display: flex; align-items: center; gap: 8px; }
.lb-key.vazia { opacity: .45; font-style: italic; }
.lb-x2 { cursor: pointer; opacity: .5; font-weight: 800; padding: 0 4px; } .lb-x2:hover { opacity: 1; color: #f66; }
.lb-bind-cab { display: grid; grid-template-columns: 240px 1fr; font-size: 11px; letter-spacing: 2px; opacity: .7; margin-top: 8px; }
.lb-bind-cab span { display: inline-block; width: 98px; margin-right: 8px; }
/* conta, chat do lobby, fila, tela de carregamento */
.lb-conta { font-size: 12px; margin-left: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 420px; } .lb-conta .ok { color: #4fd648; font-weight: 800; } .lb-conta i { opacity: .7; }
.lb-in { padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; font-family: inherit; font-size: 13px; width: 120px; }
.lb-chat { margin-top: 12px; background: linear-gradient(160deg, rgba(14,28,64,.88), rgba(8,16,40,.82)); border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.lb-chat-msgs { max-height: 130px; overflow: auto; margin-bottom: 6px; } .lb-chat-msgs div { padding: 2px 0; } .lb-chat-msgs .dim { opacity: .55; } .lb-chat-msgs b { color: #ffd94a; }
.lb-chat-in { width: 100%; box-sizing: border-box; }
.lb-fila { width: 100%; margin-top: 8px; font-size: 15px; background: linear-gradient(180deg, #6ec0ff, #2f8ff0); color: #fff; }
#carregando { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; transition: opacity .5s; font-family: 'Nunito', "Segoe UI", Arial, sans-serif; }
.cg-titulo { font-family: 'Luckiest Guy', 'Nunito', Arial, sans-serif; font-size: 64px; letter-spacing: 6px; text-shadow: 0 6px 0 rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.5); animation: cgPulsa 1.6s infinite; }
@keyframes cgPulsa { 50% { opacity: .75; } }
.cg-logo { font-family: 'Luckiest Guy', 'Nunito', Arial, sans-serif; font-size: 30px; letter-spacing: 8px; color: #ffd94a; text-shadow: 0 4px 0 rgba(0,0,0,.4); margin-bottom: 6px; }
.cg-tela { font-size: 14px; letter-spacing: 4px; opacity: .8; margin-top: 4px; }
.cg-dica { margin-top: 40px; font-size: 18px; background: rgba(0,0,0,.35); padding: 10px 22px; border-radius: 8px; max-width: 640px; }
/* lobby no celular: colunas empilhadas, botão grande */
@media (max-width: 900px), (pointer: coarse) {
  .lb-topo { height: auto; flex-wrap: wrap; padding: 6px 10px; gap: 8px; }
  .lb-card { min-width: 0; } .lb-xp { width: 120px; } .lb-nome { font-size: 15px; }
  .lb-abas { flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; gap: 3px; } .lb-aba { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .lb-vb { font-size: 14px; padding: 4px 10px; }
  .lb-corpo { top: 118px; left: 10px; right: 10px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; }
  .lb-esq { position: static; width: auto; } .lb-dir { position: static; width: auto; margin-top: 4px; text-align: left; }
  .lb-play { position: sticky; bottom: 0; z-index: 2; }
  .lb-modo-op { padding: 6px 10px; } .lb-modo-op span { font-size: 11px; }
  .lb-news h3 { font-size: 18px; } .lb-news p { font-size: 13px; }
  .lb-play { font-size: 28px; padding: 12px; letter-spacing: 3px; }
  .lb-rodape { font-size: 10px; height: 26px; padding: 0 10px; }
  .lb-cfg { grid-template-columns: 1fr 1fr 40px; font-size: 13px; } .lb-bind { grid-template-columns: 1fr 1fr; }
  .lb-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .me-box { width: 96vw; padding: 12px; }
}
/* celular em pé: o botão JOGAR e o modo vêm primeiro; deitado fica em duas colunas (grupo à esquerda, modo/JOGAR à direita) */
@media (pointer: coarse) and (orientation: portrait) { .lb-dir { order: -1; } }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .lb-corpo { flex-direction: row; align-items: flex-start; top: 96px; bottom: 26px; }
  .lb-esq { flex: 1 1 50%; min-width: 0; } .lb-dir { flex: 1 1 50%; min-width: 0; margin-top: 0; position: sticky; top: 0; }
  .lb-topo { padding: 4px 10px; } .lb-abas { flex: 1 1 auto; } .lb-play { font-size: 24px; padding: 10px; }
  .lb-news { display: none; }
}
/* presentear na loja e tag de clã nas configurações */
.lb-presente { margin-top: 6px; font-size: 11px; font-weight: 800; background: rgba(255,217,74,.9); color: #1b2a4b; border-radius: 6px; padding: 3px 6px; text-align: center; cursor: pointer; text-shadow: none; }
.lb-presente:hover { background: #ffe680; }
.lb-tagin { width: 64px; font: inherit; font-weight: 800; text-transform: uppercase; text-align: center; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; padding: 4px; }
/* nomes sobre as cabeças na cena do lobby */
#lb-nomes { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
#lb-nomes div { position: absolute; transform: translate(-50%, -100%); font-family: 'Luckiest Guy', 'Nunito', "Segoe UI", Arial, sans-serif; font-size: 20px; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 #1b2a4b, 0 0 8px rgba(0,0,0,.7); background: rgba(10,20,45,.55); padding: 2px 10px; border-radius: 6px; white-space: nowrap; }
#lb-nomes div.eu { color: #ffd94a; }
/* login obrigatório (cobre o lobby até entrar na conta) */
#lb-login { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(5,10,25,.72); backdrop-filter: blur(3px); }
.lg-box { width: min(440px, 92vw); background: rgba(10,20,45,.96); border-radius: 12px; padding: 24px 26px; box-shadow: 0 12px 48px rgba(0,0,0,.7); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.lg-t { font-family: 'Luckiest Guy', 'Nunito', "Segoe UI", Arial, sans-serif; font-size: 34px; letter-spacing: 4px; color: #ffd94a; text-shadow: 0 4px 0 rgba(0,0,0,.4); }
.lg-sub { font-size: 14px; opacity: .9; line-height: 1.4; }
#lb-login .lb-in { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px; }
.lg-bts { display: flex; gap: 10px; } .lg-bts .lb-btn { flex: 1; font-size: 16px; } .lg-bts .criar { background: linear-gradient(180deg,#8f8,#4c4); }
.lg-msg { min-height: 18px; font-size: 13px; color: #ffe27a; } .lg-msg.err { color: #ff8a8a; font-weight: 700; }
/* código da imagem (captcha) na criação de conta */
.lg-cap { display: flex; gap: 8px; align-items: center; justify-content: center; } .lg-cap img { height: 64px; width: 200px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); image-rendering: auto; }
.lg-cap .novo { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; font-size: 20px; } .lg-cap-esp { height: 64px; width: 200px; display: flex; align-items: center; justify-content: center; color: #aab; font-size: 13px; border: 1px dashed rgba(255,255,255,.25); border-radius: 6px; }
#lb-login .visitante { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.lg-obs { font-size: 11px; opacity: .75; line-height: 1.35; } .lb-vis { color: #ffd94a; font-weight: 800; }
.lb-busca { width: 100%; box-sizing: border-box; margin: 4px 0 6px; }
/* seletor de idioma PT | EN na barra de cima do lobby */
.lb-lang { margin-left: 12px; font-size: 13px; font-weight: 800; opacity: .9; } .lb-lang b { cursor: pointer; opacity: .45; } .lb-lang b:hover { opacity: .8; } .lb-lang b.sel { opacity: 1; text-decoration: underline; }

/* listas do lobby com altura máxima (muita gente online / muito chat não estica o painel) */
.lb-online { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.lb-chat-msgs { max-height: 150px; overflow-y: auto; }

/* botão do Discord na barra de cima do lobby */
.lb-discord { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; padding: 6px 12px; border-radius: 8px; background: #5865F2; color: #fff !important; text-decoration: none; font-weight: 900; font-size: 13px; letter-spacing: 1px; box-shadow: 0 3px 0 #3c45a5, 0 4px 14px rgba(88,101,242,.5); transition: transform .08s, filter .15s; pointer-events: auto; }
.lb-discord svg { width: 20px; height: 20px; }
.lb-discord:hover { filter: brightness(1.12); transform: translateY(-1px); }
.lb-discord:active { transform: translateY(2px); box-shadow: 0 1px 0 #3c45a5; }
body.toque .lb-discord span { display: none; }

/* caixa dos Reais: Reais + PT | EN na linha de cima, Discord ocupando a linha de baixo */
.lb-vb { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.lb-vb .lb-discord { flex-basis: 100%; justify-content: center; margin-left: 0; box-sizing: border-box; }

/* aba de configurações: engrenagem grande, gira no hover */
.lb-aba.lb-aba-cfg { display: flex; align-items: center; justify-content: center; padding: 6px 14px; }
.lb-aba-cfg svg { width: 26px; height: 26px; transition: transform .35s ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.lb-aba-cfg:hover svg { transform: rotate(90deg); }
.lb-aba-cfg.sel svg { filter: none; }

/* criar conta: pergunta secreta; entrar: link "esqueci a senha" pro Discord */
.lg-perg { font-size: 13px; opacity: .85; margin: 6px 0 2px; text-align: left; }
.lg-esqueci { display: block; margin-top: 10px; font-size: 13px; color: #9fb4ff; text-decoration: underline; cursor: pointer; }
.lg-esqueci:hover { color: #fff; }