/* Tela de entrada, medida na captura do login do client (1138 px de largura -> palco de 1280: x1,125). Painel branco com
   contorno preto de 3 px e cantos de 6 px; rótulos a 27 px da borda e campos cinza a 13 px; botões ButtonShadeOrange.
   Login: painel de 422 px. Registro: 335 px, quatro campos e Cancelar/Enviar. Fundo: FieldWallpaper (o campo azul e verde
   da captura), deslocado para a faixa amarela ficar na mesma altura. */
.bg.blur.campo { background-image: url("../img/sprites/FieldWallpaper.png"); background-position: center 9%; }

.lg-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 422px; z-index: 5; display: flex; flex-direction: column;
  background: #fff; border: 3px solid #000; border-radius: 6px; padding: 18px 13px 15px; color: #000; font-family: var(--display); }
.lg-panel.lg-registrar, .lg-panel.lg-esqueci, .lg-panel.lg-codigo { width: 335px; padding: 16px 12px 14px; }
.lg-lbl { font-weight: 700; font-size: 15px; line-height: 1; margin: 0 0 6px 14px; color: #000; }
.lg-panel.lg-registrar .lg-lbl, .lg-panel.lg-esqueci .lg-lbl, .lg-panel.lg-codigo .lg-lbl { margin-left: 12px; }
.lg-in { display: block; width: 100%; height: 42px; margin: 0 0 22px; padding: 0 11px; border: 2px solid transparent; border-radius: 6px; background: #cbcbcb;
  font-family: var(--body); font-weight: 700; font-size: 19px; color: #1f1f1f; outline: none; user-select: text; -webkit-user-select: text; }
.lg-panel.lg-registrar .lg-in, .lg-panel.lg-esqueci .lg-in, .lg-panel.lg-codigo .lg-in { height: 40px; margin-bottom: 20px; font-size: 18px; }
.lg-in::placeholder { color: #8b8b8b; font-weight: 600; opacity: 1; }
.lg-in:focus { border-color: #7a7a7a; background: #d6d6d6; }
.lg-in.bad { border-color: var(--red); background: #f3d2d0; }
.lg-in:disabled { opacity: .7; }
#lg-codigo { letter-spacing: .3em; }

.lg-link { background: none; border: 0; padding: 0; font-family: var(--body); font-weight: 700; font-size: 18px; color: #1f1f1f; text-decoration: underline; text-underline-offset: 3px; }
.lg-link:hover { color: #000; text-decoration-thickness: 2px; }
.lg-esqueci { align-self: flex-end; margin: -6px 10px 14px 0; }
.lg-intro { margin: 0 4px 14px 12px; font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.35; color: #3a3a3a; }
.lg-msg { margin: -8px 4px 12px 12px; font-family: var(--body); font-weight: 800; font-size: 15px; line-height: 1.35; color: #3a3a3a; }
.lg-msg.err { color: #c0201b; }

/* botões laranja dentro do painel: fluxo normal em vez do position: absolute do jogo */
.lg-panel .btn-orange { position: static; height: 58px; font-size: 28px; padding: 0 6px; color: #5a1c06; }
.lg-main { width: 100%; margin-top: 12px; }
.lg-msg + .lg-main { margin-top: 8px; }
.lg-row { display: flex; gap: 15px; margin-top: 15px; }
.lg-row .btn-orange { flex: 1 1 0; min-width: 0; }
.lg-row.lg-end { margin-top: 6px; }
.lg-fit { font-size: 19px !important; white-space: nowrap; overflow: hidden; }

/* ---------- cartão da conta no menu (embaixo do logo) ---------- */
.lg-card { position: absolute; left: 24px; top: 148px; width: 372px; background: #fff; border: 4px solid var(--ink); border-radius: 14px; padding: 10px 14px 12px;
  color: var(--ink); font-family: var(--body); font-weight: 800; box-shadow: 0 5px 0 rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px; }
.lg-who { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 24px; min-width: 0; }
.lg-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-who img { width: 34px; height: 34px; flex: none; }
.lg-tag { margin-left: auto; font-family: var(--body); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 999px; padding: 2px 9px; text-decoration: none; }
.lg-card p { margin: 0; font-size: 15px; line-height: 1.35; }
.lg-card p b { color: var(--red); white-space: nowrap; }
.lg-card .btn-orange { position: static; align-self: stretch; }
.lg-card.guest { border-color: var(--red); }
.lg-sair { align-self: flex-end; font-size: 15px; }