/* Lobby no mesmo visual da tela de carregamento (vidro + verde/amarelo/azul).
   Só cores, bordas e efeitos — o layout continua vindo de ui-moderno.css / mobile-lobby.css. */

body:not(.playing) #welcome {
  --lm-glass: linear-gradient(160deg, #0f172ad9, #020617e6);
  --lm-line: #ffffff1f;
  --lm-soft: #ffffff0d;
  --lm-text: #f8fafc;
  --lm-muted: #94a3b8;
  --lm-green: #22c55e;
  --lm-yellow: #facc15;
  --lm-blue: #3b82f6;
  --lm-red: #ef4444;
  --lm-grad: linear-gradient(90deg, #16a34a, #facc15 55%, #2563eb);
  position: relative;
}

/* fundo: partículas + véu escuro por cima do mapa 3D */
#bm-lobby-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
body:not(.playing) #welcome > section {
  position: relative;
  z-index: 1;
}

/* ── cartões de vidro ── */
body:not(.playing) #welcome .avatar-stage,
body:not(.playing) #welcome .entry-card {
  background: var(--lm-glass) !important;
  border: 1px solid var(--lm-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px #000000b0, 0 0 0 1px #ffffff08 inset, 0 0 60px #16a34a14 !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  animation: lm-rise 0.7s cubic-bezier(.2, .8, .2, 1) both;
}
body:not(.playing) #welcome .entry-card { animation-delay: 0.08s; }

body:not(.playing) #welcome .avatar-stage::before,
body:not(.playing) #welcome .entry-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #22c55e99, transparent 35%, transparent 65%, #3b82f699);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* palco do personagem: holofote */
body:not(.playing) #welcome .stage-preview {
  background:
    radial-gradient(ellipse 55% 45% at 50% 62%, #facc1522, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, #16a34a22, transparent 70%) !important;
}
body:not(.playing) #welcome .stage-heading .eyebrow,
body:not(.playing) #welcome .card-heading .step {
  background: var(--lm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}
body:not(.playing) #welcome .stage-heading h1 {
  color: var(--lm-text) !important;
  text-shadow: 0 4px 30px #000c;
}
body:not(.playing) #welcome .stage-heading h1::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 12px;
  border-radius: 99px;
  background: var(--lm-grad);
}
body:not(.playing) #welcome .entry-card h2 {
  color: var(--lm-text) !important;
  font-weight: 800 !important;
}
body:not(.playing) #welcome .muted,
body:not(.playing) #welcome .input-label,
body:not(.playing) #welcome .look-row legend {
  color: var(--lm-muted) !important;
}

/* barra de animações (Parado / Andando…) */
body:not(.playing) #welcome .preview-tools {
  background: #020617cc !important;
  border-color: var(--lm-line) !important;
  border-radius: 14px !important;
}
body:not(.playing) #welcome .preview-tools button {
  border-radius: 10px !important;
  background: var(--lm-soft) !important;
  border: 1px solid #ffffff14 !important;
  color: #e2e8f0 !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
body:not(.playing) #welcome .preview-tools button:hover { transform: translateY(-1px); background: #ffffff1a !important; }
body:not(.playing) #welcome .preview-tools button[aria-pressed="true"],
body:not(.playing) #welcome .preview-tools button.active,
body:not(.playing) #welcome .preview-tools button.on {
  background: linear-gradient(135deg, #22c55e, #facc15) !important;
  color: #0b1220 !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px #facc1540;
}

/* caixa da conta */
body:not(.playing) #welcome .entry-card [class*="account"],
body:not(.playing) #welcome .entry-card .nick-wrap {
  border-radius: 14px !important;
}

/* lado: Bolsonarista / Petista */
body:not(.playing) #welcome .side {
  background: var(--lm-soft) !important;
  border: 1px solid #ffffff17 !important;
  border-radius: 14px !important;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
body:not(.playing) #welcome .side:hover { transform: translateY(-2px); border-color: #ffffff33 !important; }
body:not(.playing) #welcome .side-0:has(input:checked) {
  background: linear-gradient(135deg, #16a34a33, #facc1526) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 0 1px #facc1555, 0 10px 30px #facc1526 !important;
}
body:not(.playing) #welcome .side-1:has(input:checked) {
  background: linear-gradient(135deg, #dc262638, #7f1d1d30) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef444466, 0 10px 30px #ef444426 !important;
}
body:not(.playing) #welcome .side-name { color: var(--lm-text) !important; font-weight: 800 !important; }
body:not(.playing) #welcome .side-count { color: #86efac !important; }
body:not(.playing) #welcome .side-count::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--lm-green);
  box-shadow: 0 0 8px var(--lm-green);
  vertical-align: middle;
}

/* personagens */
body:not(.playing) #welcome .character-image {
  border-radius: 14px !important;
  border: 1px solid #ffffff17 !important;
  background: radial-gradient(circle at 50% 30%, #1e293b, #0b1220) !important;
  transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s;
}
body:not(.playing) #welcome .character:hover .character-image { transform: translateY(-3px); border-color: #ffffff40 !important; }
body:not(.playing) #welcome .character:has(input:checked) .character-image {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px #facc15, 0 0 0 4px #16a34a66, 0 12px 30px #facc1530 !important;
}
body:not(.playing) #welcome .character:has(input:checked) .character-name { color: var(--lm-yellow) !important; }
body:not(.playing) #welcome .character .checkmark {
  background: var(--lm-grad) !important;
  color: #0b1220 !important;
}
body:not(.playing) #welcome .character-price {
  color: #fde68a !important;
}

/* apelido */
body:not(.playing) #welcome #nickname {
  background: #020617b3 !important;
  border: 1px solid #ffffff1f !important;
  border-radius: 14px !important;
  color: var(--lm-text) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body:not(.playing) #welcome #nickname:focus {
  outline: none !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px #22c55e33 !important;
}

/* visual (camisa, pele…) */
body:not(.playing) #welcome .look-editor--stage {
  background: linear-gradient(180deg, #0b1220f2, #020617f5) !important;
  border-top-color: #ffffff14 !important;
}
body:not(.playing) #welcome .look-editor--stage > h3,
body:not(.playing) #welcome .look-editor > h3 {
  color: var(--lm-yellow) !important;
}
body:not(.playing) #welcome .look-row {
  background: #ffffff06 !important;
  border-color: #ffffff0f !important;
}

/* botão principal */
body:not(.playing) #welcome #join.primary {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--lm-grad) !important;
  background-size: 200% 100% !important;
  color: #0b1220 !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 34px #facc1540, 0 0 0 1px #ffffff30 inset !important;
  transition: transform 0.15s, box-shadow 0.2s, background-position 0.6s;
}
body:not(.playing) #welcome #join.primary:not(:disabled):hover {
  transform: translateY(-2px);
  background-position: 100% 0 !important;
  box-shadow: 0 16px 44px #facc1560, 0 0 0 1px #ffffff40 inset !important;
}
body:not(.playing) #welcome #join.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, #ffffff70 50%, transparent 70%);
  transform: translateX(-120%);
  animation: lm-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}
body:not(.playing) #welcome #join.primary:disabled {
  filter: grayscale(0.6) brightness(0.75);
}
body:not(.playing) #welcome #join.primary:disabled::after { animation: none; }
body:not(.playing) #welcome .spectate-entry {
  color: #cbd5e1 !important;
  border-radius: 12px !important;
}
body:not(.playing) #welcome .spectate-entry:hover { background: #ffffff0f !important; }
body:not(.playing) #welcome .load-status { color: #64748b !important; }

/* barras de rolagem */
body:not(.playing) #welcome .entry-card,
body:not(.playing) #welcome .look-editor--stage {
  scrollbar-color: #facc1555 transparent !important;
}

@keyframes lm-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes lm-shine {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.playing) #welcome .avatar-stage,
  body:not(.playing) #welcome .entry-card,
  body:not(.playing) #welcome #join.primary::after { animation: none; }
}