/* HUD NOVA DO /entrar (16/10/2026)
   Leonardo: "quero uma nova tela de tudo, HUD totalmente nova em todas telas do
   /entrar em cima de referencias dos mmorpgs mais famosos do mundo".
   Este arquivo vem por último e substitui a moldura metálica (border-image) de
   estilo.css e pacto.css por uma linguagem só:
     - vidro escuro com desfoque, fio dourado fino e cantos em colchete
       (FFXIV, Lost Ark, Diablo IV);
     - botão principal em ouro polido, secundário em vidro;
     - campo e aba em linha, sem caixa pesada;
     - servidor em cartões grandes com o astro de cada mundo (FFXIV, Lost Ark);
     - Pacto como cerimônia: lista em lâmina, detalhe em pergaminho de vidro
       (Elden Ring, GW2, ESO).
   Só cor, borda e posição. Pose e animação do cavaleiro vêm do bundle. */

:root{
  --hud-vidro:rgba(9,11,17,.74);
  --hud-vidro2:rgba(14,16,24,.86);
  --hud-fio:rgba(226,190,120,.34);
  --hud-fio-forte:rgba(240,206,140,.85);
  --hud-ouro:#e9c27a;
  --hud-ouro-claro:#ffe3a6;
  --hud-tinta:#efe6d6;
  --hud-suave:#a99f8e;
  --hud-fraco:#8a8174; /* era #766e62: 3,7:1 sobre o vidro, abaixo de 4,5:1 */
  --hud-titulo:'Cinzel',var(--display,var(--serif));
  --hud-sombra:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);
  /* quatro colchetes dourados nos cantos, desenhados por fundo */
  --hud-cantos:
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) left top/18px 1px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) left top/1px 18px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) right top/18px 1px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) right top/1px 18px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) left bottom/18px 1px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) left bottom/1px 18px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--hud-fio-forte),var(--hud-fio-forte)) right bottom/1px 18px no-repeat;
}

/* ================= PAINEL DE VIDRO (todas as telas) ================= */
html body .painel,
html body.emAcesso #telaAcesso,
html body.emCriacao #painelNovo,
html body #ficha,
html body #telaServidor,
html body #telaPersonagens .seletor-personagens,
html body #telaPacto .pacto-det,
html body #telaPacto .pacto-lista{
  border:1px solid var(--hud-fio);border-image:none;border-radius:2px;
  background:
    linear-gradient(180deg,rgba(255,226,166,.06),rgba(255,226,166,0) 90px),
    radial-gradient(120% 70% at 50% 0%,rgba(60,48,30,.32),transparent 70%),
    var(--hud-vidro);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--hud-sombra),inset 0 1px 0 rgba(255,236,190,.08),inset 0 0 40px rgba(0,0,0,.35);
  color:var(--hud-tinta);
}
html body .painel::before,
html body.emAcesso #telaAcesso::before,
html body.emCriacao #painelNovo::before,
html body #ficha::before,
html body #telaServidor::before,
html body #telaPersonagens .seletor-personagens::before,
html body #telaPacto .pacto-det::before{
  content:'';display:block;position:absolute;inset:-4px;pointer-events:none;background:var(--hud-cantos);
  opacity:.9;border:0;height:auto;width:auto;left:-4px;right:-4px;top:-4px;bottom:-4px;transform:none;
}
/* um traço de luz no alto do painel, como o filete do FFXIV */
html body .painel::after,
html body.emAcesso #telaAcesso::after,
html body #telaServidor::after{
  content:'';display:block;position:absolute;left:18%;right:18%;top:-1px;bottom:auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--hud-ouro-claro),transparent);
  box-shadow:0 0 12px rgba(255,214,140,.7);opacity:.85;pointer-events:none;
}

/* ================= TÍTULOS E TEXTO ================= */
html body .acesso-cabecalho h2,
html body .novo-cabecalho h2,
html body #telaServidor h2,
html body .pt-nome,
html body .pdv-t,
html body .pd-nome{
  font-family:var(--hud-titulo);font-weight:700;letter-spacing:.06em;color:#f8ecd2;
  text-shadow:0 1px 0 #000,0 0 18px rgba(240,200,120,.25);
}
html body .acesso-cabecalho,html body .novo-cabecalho{
  position:relative;flex-direction:column;align-items:center;text-align:center;gap:10px;
  margin-bottom:20px;padding-bottom:16px;border:0;background:none;
}
html body .acesso-cabecalho::after,html body .novo-cabecalho::after{
  content:'';position:absolute;left:50%;bottom:0;width:180px;height:9px;transform:translateX(-50%);
  border:0;background:
    radial-gradient(circle,var(--hud-ouro-claro) 0 1.6px,transparent 2.2px) center/9px 9px no-repeat,
    linear-gradient(90deg,transparent,var(--hud-fio-forte) 40%,transparent 46%,transparent 54%,var(--hud-fio-forte) 60%,transparent) center/100% 1px no-repeat;
}
html body .acesso-cabecalho h2,html body .novo-cabecalho h2{font-size:24px;max-width:none;margin:0 0 4px}
html body .acesso-cabecalho p,html body .novo-cabecalho p{color:var(--hud-suave);font-size:12.5px}
html body .acesso-selo,html body .novo-cabecalho svg{
  width:34px;height:40px;fill:rgba(240,200,120,.08);stroke:var(--hud-ouro);
  filter:drop-shadow(0 0 10px rgba(240,200,120,.45));
}
html body .acesso-coroa{display:none}

/* ================= BOTÕES ================= */
html body .btn{
  border:1px solid rgba(226,190,120,.4);border-image:none;border-radius:2px;filter:none;
  min-height:40px;padding:8px 16px;
  font-family:var(--hud-titulo);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#e9dcc2;text-shadow:0 1px 0 #000;
  background:linear-gradient(180deg,rgba(40,36,30,.78),rgba(14,13,12,.86));
  box-shadow:inset 0 1px 0 rgba(255,236,190,.1),0 2px 10px rgba(0,0,0,.45);
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s;
}
html body .btn:hover:not(:disabled){
  border-color:var(--hud-fio-forte);color:#fff4dc;
  background:linear-gradient(180deg,rgba(62,52,38,.85),rgba(22,19,15,.9));
  box-shadow:inset 0 1px 0 rgba(255,236,190,.16),0 0 14px rgba(240,200,120,.22);
}
html body .btn:disabled{opacity:.45}
html body .btn:focus-visible{outline:1px solid var(--hud-ouro-claro);outline-offset:3px}

/* principal: ouro polido (Lost Ark, FFXIV "Play") */
html body .btn.forte,
html body .acesso-cta,
html body #telaPersonagens .sel-entrar,
html body #btnServidorEntrar{
  filter:none;border:1px solid #f6d79a;border-image:none;
  color:#24170a;text-shadow:0 1px 0 rgba(255,240,205,.55);
  background:
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 48%),
    linear-gradient(180deg,#f7d48c 0%,#d9a24c 52%,#a8701f 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 22px rgba(240,190,100,.35),inset 0 -2px 0 rgba(90,50,10,.45);
}
html body .btn.forte:hover:not(:disabled),
html body .acesso-cta:hover:not(:disabled),
html body #telaPersonagens .sel-entrar:hover,
html body #btnServidorEntrar:hover:not(:disabled){
  color:#1a0f04;border-color:#fff0c8;
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 48%),
    linear-gradient(180deg,#ffe2a4 0%,#e8b45c 52%,#b77d26 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 34px rgba(255,205,120,.55),inset 0 -2px 0 rgba(90,50,10,.45);
}
html body .btn.perigo{border-color:rgba(220,90,70,.55);color:#f3c2b6;
  background:linear-gradient(180deg,rgba(70,22,16,.85),rgba(28,10,8,.9))}
html body .btn.perigo:hover:not(:disabled){border-color:#ff8a70;color:#fff;box-shadow:0 0 16px rgba(220,80,60,.4)}

/* ================= CAMPOS E ABAS ================= */
html body .campo-acesso{gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--hud-suave)}
html body .campo-caixa{
  border:0;border-image:none;border-radius:0;border-bottom:1px solid rgba(226,190,120,.3);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.38));box-shadow:none;
  transition:border-color .16s,background .16s;
}
html body .campo-caixa:focus-within{border-bottom-color:var(--hud-ouro-claro);
  background:linear-gradient(180deg,rgba(240,200,120,0),rgba(240,200,120,.08));
  box-shadow:0 1px 0 0 var(--hud-ouro-claro),0 8px 18px -10px rgba(255,210,130,.6)}
html body .campo-caixa input,html body .campo-caixa input:focus{
  border:0;border-image:none;background:transparent;box-shadow:none;outline:none;
  color:#fbf2e0;font-family:var(--sans);font-size:14px;letter-spacing:.02em;
}
html body .campo-caixa svg{stroke:var(--hud-ouro);opacity:.75}
html body .abas{gap:0;border-bottom:1px solid rgba(226,190,120,.18);margin-bottom:18px}
html body .aba{
  flex:1;border:0;border-image:none;border-bottom:2px solid transparent;border-radius:0;
  background:none;padding:10px 6px;min-height:0;
  font-family:var(--hud-titulo);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hud-fraco);
}
html body .aba:hover{color:var(--hud-tinta)}
html body .aba.on{color:var(--hud-ouro-claro);border-bottom-color:var(--hud-ouro);
  text-shadow:0 0 12px rgba(255,210,130,.5);
  background:linear-gradient(0deg,rgba(240,200,120,.12),transparent 70%)}
html body .acesso-link{color:var(--hud-ouro)}
html body .acesso-rodape{color:var(--hud-fraco);font-style:italic}
html body .aviso{border:1px solid rgba(220,90,70,.4);border-left:3px solid #d65a44;border-radius:0;
  background:rgba(60,14,10,.55);color:#f6c9bd}

/* ================= LOGIN (FFXIV, Diablo IV) ================= */
html body.emAcesso #telaAcesso{
  right:clamp(56px,8vw,150px);width:380px;padding:34px 34px 24px;
}
html body.emAcesso #telaAcesso .linha-btn .acesso-cta{min-height:48px;font-size:13px}
html body .marca h1{
  font-family:var(--hud-titulo);font-weight:700;letter-spacing:.12em;
  background:linear-gradient(180deg,#fff6df 0%,#f0cf8c 45%,#b8823a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;line-height:1.18;padding-bottom:.06em;
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 24px rgba(240,190,100,.35));
}
html body .marca h1::after{display:none}
html body .marca .sub{color:var(--hud-ouro);letter-spacing:.42em;font-size:10.5px}

/* ================= SERVIDOR (FFXIV Data Center, Lost Ark) ================= */
body.emServidor #palco{filter:blur(5px) brightness(.42) saturate(.8);transition:filter .6s}
body.emServidor .marca{opacity:0}
body.emServidor .pressagio,body.emServidor .rodape{opacity:0;pointer-events:none}
html body #telaServidor{
  position:fixed;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(860px,calc(100vw - 96px));max-height:calc(100vh - 80px);overflow:auto;
  padding:30px 36px 26px;display:flex;flex-direction:column;gap:0;
}
.srv-cab{text-align:center;margin-bottom:22px;position:relative;padding-bottom:16px}
.srv-cab::after{content:'';position:absolute;left:50%;bottom:0;width:240px;height:9px;transform:translateX(-50%);
  background:
    radial-gradient(circle,var(--hud-ouro-claro) 0 1.6px,transparent 2.2px) center/9px 9px no-repeat,
    linear-gradient(90deg,transparent,var(--hud-fio-forte) 40%,transparent 47%,transparent 53%,var(--hud-fio-forte) 60%,transparent) center/100% 1px no-repeat}
.srv-rot{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--hud-ouro);margin-bottom:6px}
html body #telaServidor h2{margin:0;font-size:30px}
.srv-cab p{margin:8px auto 0;max-width:52ch;color:var(--hud-suave);font-size:13px;line-height:1.5}

.srv-mundos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
.srv-mundo{
  appearance:none;position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto auto;column-gap:16px;align-items:center;
  min-height:150px;padding:20px 20px 18px;text-align:left;cursor:var(--curJogo),pointer;font:inherit;color:var(--hud-tinta);
  border:1px solid rgba(226,190,120,.22);border-radius:2px;
  background:linear-gradient(160deg,rgba(28,30,42,.9),rgba(10,11,16,.92));
  box-shadow:inset 0 1px 0 rgba(255,236,190,.06),0 10px 26px rgba(0,0,0,.45);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.srv-mundo::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.55;transition:opacity .3s}
.srv-mundo-na::before{background:radial-gradient(70% 90% at 18% 50%,rgba(120,170,255,.28),transparent 70%)}
.srv-mundo-sa::before{background:radial-gradient(70% 90% at 18% 50%,rgba(255,170,110,.24),transparent 70%)}
.srv-mundo:hover:not(:disabled){border-color:rgba(240,206,140,.6);transform:translateY(-2px)}
.srv-mundo.on{border-color:var(--hud-fio-forte);
  box-shadow:inset 0 0 0 1px rgba(255,226,166,.25),0 0 30px rgba(240,200,120,.25),0 14px 30px rgba(0,0,0,.55)}
.srv-mundo.on::before{opacity:1}
.srv-mundo.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--hud-ouro-claro),transparent);box-shadow:0 0 14px rgba(255,214,140,.8)}
.srv-mundo.fechado{cursor:default;opacity:.62;filter:saturate(.45)}
.srv-mundo:disabled{color:var(--hud-tinta)}
.srv-astro{grid-row:1/4;position:relative;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(226,190,120,.18)}
.srv-astro::before,.srv-astro::after{content:'';position:absolute;inset:0}
/* Polaris: uma estrela só, firme, com raios em cruz */
.srv-mundo-na .srv-astro::before{
  background:
    radial-gradient(circle at 50% 50%,#fff 0 3px,rgba(190,215,255,.95) 4px,rgba(120,170,255,.35) 12px,transparent 30px),
    linear-gradient(90deg,transparent 8%,rgba(200,225,255,.85) 50%,transparent 92%) center/100% 1.5px no-repeat,
    linear-gradient(0deg,transparent 8%,rgba(200,225,255,.85) 50%,transparent 92%) center/1.5px 100% no-repeat;
  animation:srv-pulsa 3.6s ease-in-out infinite}
.srv-mundo-na .srv-astro::after{
  background:
    linear-gradient(45deg,transparent 30%,rgba(200,225,255,.35) 50%,transparent 70%) center/100% 1px no-repeat,
    linear-gradient(-45deg,transparent 30%,rgba(200,225,255,.35) 50%,transparent 70%) center/100% 1px no-repeat;
  transform:rotate(45deg)}
/* Cruzeiro: as quatro estrelas do Cruzeiro do Sul e a Intrometida */
.srv-mundo-sa .srv-astro::before{
  background:
    radial-gradient(circle at 50% 16%,#fff 0 2.4px,rgba(255,200,150,.6) 4px,transparent 10px),
    radial-gradient(circle at 46% 84%,#fff 0 3px,rgba(255,190,140,.6) 5px,transparent 12px),
    radial-gradient(circle at 20% 46%,#fff 0 2.2px,rgba(255,200,150,.55) 4px,transparent 9px),
    radial-gradient(circle at 78% 52%,#fff 0 2.6px,rgba(255,200,150,.6) 4px,transparent 10px),
    radial-gradient(circle at 62% 64%,#fff 0 1.2px,transparent 3px);
  animation:srv-pulsa 4.4s ease-in-out infinite}
.srv-mundo-sa .srv-astro::after{
  background:
    linear-gradient(rgba(255,210,170,.22),rgba(255,210,170,.22)) 48% 18%/1px 64% no-repeat,
    linear-gradient(rgba(255,210,170,.22),rgba(255,210,170,.22)) 22% 49%/56% 1px no-repeat}
@keyframes srv-pulsa{50%{filter:brightness(1.35) drop-shadow(0 0 8px rgba(255,255,255,.5))}}
.srv-mundo .srv-nome{grid-column:2;font-family:var(--hud-titulo);font-weight:700;font-size:26px;letter-spacing:.08em;
  color:#fbf0d8;text-shadow:0 1px 0 #000,0 0 16px rgba(240,200,120,.25)}
.srv-legenda{grid-column:2;margin-top:2px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--hud-suave)}
.srv-estado{grid-column:2;justify-self:start;margin-top:12px;padding:3px 9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hud-fraco);border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35)}
.srv-estado.aberto{color:#bfe3a0;border-color:rgba(143,191,106,.4)}
.srv-estado.aberto::before{content:'';display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;
  background:#9fdc7a;box-shadow:0 0 8px #9fdc7a;vertical-align:middle}
.srv-tag{display:inline-block;padding:2px 7px;font-family:var(--mono);font-size:8.5px;font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:#24170a;background:linear-gradient(180deg,#f7d48c,#c48b36);vertical-align:middle}
.srv-ultimo{position:absolute;top:12px;right:12px}

.srv-subs-cab{display:flex;justify-content:space-between;padding:0 16px 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--hud-ouro);
  border-bottom:1px solid rgba(226,190,120,.2)}
.srv-lista{display:flex;flex-direction:column;gap:4px;margin:8px 0 18px;outline:none}
.srv-linha{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:0 16px;font:inherit;color:var(--hud-tinta);cursor:var(--curJogo),pointer;text-align:left;
  border:1px solid transparent;border-left:2px solid transparent;border-radius:0;
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:background .16s,border-color .16s}
.srv-linha:hover:not(:disabled){background:linear-gradient(90deg,rgba(240,200,120,.1),rgba(240,200,120,.02))}
.srv-linha.on{border-color:rgba(226,190,120,.35);border-left-color:var(--hud-ouro-claro);
  background:linear-gradient(90deg,rgba(240,200,120,.18),rgba(240,200,120,.03))}
.srv-linha:focus-visible{outline:1px solid var(--hud-ouro-claro);outline-offset:1px}
.srv-linha.fechado,.srv-linha:disabled{opacity:.5;cursor:default}
.srv-linha .srv-nome{display:flex;align-items:center;gap:10px;font-family:var(--hud-titulo);font-weight:700;font-size:15px;letter-spacing:.08em}
.srv-linha .srv-nome::before{content:'';width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--hud-ouro);flex:0 0 auto}
.srv-linha.on .srv-nome::before{background:var(--hud-ouro-claro);box-shadow:0 0 8px var(--hud-ouro-claro)}
.srv-lotacao{display:flex;align-items:center;gap:3px}
.srv-lotacao i{width:5px;height:14px;background:rgba(255,255,255,.1);transform:skewX(-14deg)}
.srv-lotacao em{margin-left:10px;min-width:104px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;text-align:right}
.srv-baixa i:nth-child(-n+1),.srv-media i:nth-child(-n+2),.srv-alta i:nth-child(-n+3),.srv-cheio i{background:currentColor;box-shadow:0 0 6px currentColor}
.srv-baixa{color:#8fd86a}.srv-media{color:#e6cf5a}.srv-alta{color:#f09a3e}.srv-cheio{color:#e2553f}

.srv-acoes{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:16px;
  border-top:1px solid rgba(226,190,120,.16)}
.srv-acoes .btn{min-width:140px}
html body #btnServidorEntrar{min-width:280px;min-height:50px;font-size:13.5px}

/* ================= SELEÇÃO (WoW, Lost Ark) ================= */
html body .barra-topo{
  top:16px;left:50%;right:auto;transform:translateX(-50%);
  border:1px solid var(--hud-fio);border-image:none;border-radius:999px;padding:6px 8px 6px 22px;min-height:0;
  background:rgba(8,10,16,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,190,.07);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hud-suave);gap:16px;
}
html body .barra-topo b{font-family:var(--hud-titulo);font-weight:700;letter-spacing:.06em;text-transform:none;font-size:13px;color:#f8ecd2}
.srv-troca{appearance:none;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:999px;
  font:inherit;color:var(--hud-suave);cursor:var(--curJogo),pointer;
  border:1px solid rgba(226,190,120,.35);background:linear-gradient(180deg,rgba(60,50,34,.6),rgba(20,17,12,.7));
  transition:border-color .16s,box-shadow .16s}
.srv-troca::before{content:'';width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 1.5px,#9cc4ff 2.5px,transparent 5px);box-shadow:0 0 8px #9cc4ff}
body[data-mundo="sa"] .srv-troca::before{background:radial-gradient(circle,#fff 0 1.5px,#ffbf8a 2.5px,transparent 5px);box-shadow:0 0 8px #ffbf8a}
.srv-troca::after{content:'';width:5px;height:5px;margin-left:2px;border-right:1px solid var(--hud-ouro);border-bottom:1px solid var(--hud-ouro);
  transform:rotate(-45deg)}
.srv-troca:hover{border-color:var(--hud-fio-forte);box-shadow:0 0 14px rgba(240,200,120,.3);color:var(--hud-tinta)}

html body #ficha{top:50%;transform:translateY(-50%);left:32px;width:300px;padding:22px 22px 18px}
html body #ficha .fx-titulo{font-family:var(--hud-titulo);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hud-ouro);border-bottom:1px solid rgba(226,190,120,.2);padding-bottom:6px}
html body #telaPersonagens .seletor-personagens{right:32px;width:310px;padding:16px 14px 14px}
html body .sel-cab>span:first-child{font-family:var(--hud-titulo);color:#f8ecd2;letter-spacing:.18em}
html body .sel-cab{border-bottom-color:rgba(226,190,120,.22)}
html body #telaPersonagens .pjb{border:1px solid rgba(255,255,255,.06);border-image:none;border-radius:0;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.01));min-height:60px}
html body #telaPersonagens .pjb:hover{border-color:rgba(226,190,120,.35);background:linear-gradient(90deg,rgba(240,200,120,.1),rgba(240,200,120,.02))}
html body #telaPersonagens .pjb.on{border-color:rgba(240,206,140,.6);
  background:linear-gradient(90deg,rgba(240,200,120,.24),rgba(240,200,120,.05) 60%,rgba(0,0,0,0));
  box-shadow:inset 0 0 22px rgba(240,200,120,.1),0 0 18px rgba(240,200,120,.16)}
html body #telaPersonagens .pjb::after{background:var(--hud-ouro-claro)}
html body .pjb-nivel{font-family:var(--hud-titulo);background:radial-gradient(circle at 50% 35%,#2a2a36,#08080c 75%);
  border-color:rgba(226,190,120,.35);transform:rotate(45deg);border-radius:2px;width:36px;height:36px;margin:3px}
html body .pjb-nivel>*{transform:rotate(-45deg)}
html body #telaPersonagens .pjb.on .pjb-nivel{border-color:var(--hud-ouro-claro)}
html body #telaPersonagens .pjb.novo{border:1px dashed rgba(226,190,120,.35);color:var(--hud-ouro)}
html body #telaPersonagens .fnome{font-family:var(--hud-titulo);letter-spacing:.1em;
  background:linear-gradient(180deg,#fff7e2,#e8c27a 70%,#b98a44);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 20px rgba(240,190,100,.35))}
html body #telaPersonagens .sel-xp .fbarra{height:4px;background:rgba(255,255,255,.08);border:0;border-image:none;box-shadow:inset 0 0 0 1px rgba(226,190,120,.25)}
html body #telaPersonagens .sel-xp .fbarra i{background:linear-gradient(90deg,#9a6a26,#f6d48a);box-shadow:0 0 8px rgba(255,210,130,.7)}
html body #telaPersonagens .sel-entrar{min-height:58px;font-family:var(--hud-titulo);font-size:15px;letter-spacing:.16em}
html body .sel-sair .btn{min-width:104px;min-height:38px;font-size:10.5px}

/* ================= CRIAÇÃO (BDO, Lost Ark) ================= */
html body.emCriacao #painelNovo{right:clamp(40px,5vw,96px);width:360px;padding:28px 28px 22px}
html body .sexo-opcoes{background:rgba(0,0,0,.35);border:1px solid rgba(226,190,120,.18);border-image:none;padding:3px;gap:3px}
html body .sexo-opcoes span{border:1px solid transparent;font-family:var(--hud-titulo);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hud-fraco);background:none}
html body .sexo-opcoes input:checked+span{color:#24170a;border-color:#f6d79a;
  background:linear-gradient(180deg,#f7d48c,#c48b36);text-shadow:0 1px 0 rgba(255,240,205,.5);box-shadow:0 0 14px rgba(240,190,100,.35)}
html body fieldset legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hud-ouro)}
html body .ap-linha{border-bottom:1px solid rgba(255,255,255,.05)}
html body .ap-seta{border:1px solid rgba(226,190,120,.3);border-image:none;border-radius:50%;background:rgba(0,0,0,.35);color:var(--hud-ouro)}
html body .ap-seta:hover{border-color:var(--hud-ouro-claro);color:#fff;box-shadow:0 0 10px rgba(240,200,120,.4)}
html body .ap-valor{font-family:var(--hud-titulo);font-weight:700;letter-spacing:.06em;color:#f8ecd2}
html body .criacao-nome strong{font-family:var(--hud-titulo);font-weight:700;letter-spacing:.12em;color:#fbf0d8;
  text-shadow:0 2px 0 #000,0 0 24px rgba(240,190,100,.4)}
html body .giro-bt{border:1px solid rgba(226,190,120,.35);border-image:none;border-radius:50%;
  background:rgba(8,10,16,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html body .giro-bt:hover{border-color:var(--hud-ouro-claro);box-shadow:0 0 12px rgba(240,200,120,.4)}
html body .giro-bt svg{stroke:var(--hud-ouro)}

/* ================= PACTO (Elden Ring, GW2, ESO) ================= */
html body #telaPacto{background:
  radial-gradient(60% 70% at 50% 48%,rgba(6,7,12,0) 0%,rgba(6,7,12,.45) 62%,rgba(4,4,8,.9) 100%)}
html body .pacto-topo{justify-content:center;position:relative;padding-top:22px}
html body .pacto-topo #btnVoltarPacto{position:absolute;left:30px;top:22px}
html body .pt-nome{text-align:center;font-size:30px;letter-spacing:.14em;text-transform:uppercase}
html body .pt-nome small{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:13px;
  letter-spacing:.04em;text-transform:none;color:var(--hud-suave);font-weight:400}
html body #telaPacto .pacto-lista{padding:16px 12px;border-color:rgba(226,190,120,.2);align-self:start;max-height:100%}
html body #telaPacto .pl-rot{font-family:var(--hud-titulo);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--hud-ouro);text-align:center;margin-bottom:10px}
html body #telaPacto .casa-op{border:0;border-image:none;border-radius:0;border-left:2px solid transparent;
  background:linear-gradient(90deg,rgba(255,255,255,.03),transparent);padding:10px 12px 10px 16px;box-shadow:none}
html body #telaPacto .casa-op+.casa-op{border-top:1px solid rgba(226,190,120,.08)}
html body #telaPacto .casa-op:hover{background:linear-gradient(90deg,rgba(240,200,120,.1),transparent);transform:translateX(3px)}
html body #telaPacto .casa-op.sel{border-left-color:var(--corCasa,var(--hud-ouro-claro));
  background:linear-gradient(90deg,color-mix(in srgb,var(--corCasa,#e9c27a) 26%,transparent),transparent 85%);
  box-shadow:inset 18px 0 24px -18px var(--corCasa,var(--hud-ouro))}
html body #telaPacto .casa-op .cn{font-family:var(--hud-titulo);font-weight:700;font-size:15px;letter-spacing:.1em}
html body #telaPacto .casa-op .cf{color:var(--hud-ouro);opacity:.8}
html body #telaPacto .pacto-det{padding:22px 22px 16px;border-color:rgba(226,190,120,.24)}
html body .pd-nome{font-size:32px;letter-spacing:.1em}
html body .pd-cab{border-bottom:1px solid rgba(226,190,120,.2)}
html body .pd-rot{color:var(--hud-ouro);letter-spacing:.24em}
html body .pd-eg{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25)}
html body .pd-eg.sel{border-color:var(--corCasa,var(--hud-ouro))}
html body .pacto-rodape{border:0;border-image:none;border-top:1px solid rgba(226,190,120,.18);
  background:linear-gradient(0deg,rgba(4,4,8,.92),rgba(4,4,8,.55));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body .btn.selar{min-width:340px;min-height:56px;padding:14px 28px;font-family:var(--hud-titulo);font-size:13px;letter-spacing:.2em;
  border:1px solid rgba(226,190,120,.4);background:linear-gradient(180deg,rgba(40,30,22,.9),rgba(12,9,7,.95))}
html body .btn.selar:not(:disabled){border-color:#f6d79a;color:#fff2d6;
  box-shadow:0 0 26px rgba(240,190,100,.3),inset 0 0 18px rgba(240,190,100,.12)}
html body .btn.selar .sel-preencher{background:linear-gradient(90deg,#a8701f,#f7d48c)}

/* ================= CONTA, AVISO E CARREGANDO ================= */
html body .conta-painel{width:380px;padding:28px 28px 22px}
html body .conta-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(226,190,120,.35),transparent);border:0}
html body .conta-secao{font-family:var(--hud-titulo);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hud-ouro)}
html body #carregando{
  flex-direction:column;gap:18px;background:radial-gradient(circle at 50% 50%,#12131c,#050508 70%);
  font-family:var(--hud-titulo);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--hud-ouro);
}
html body #carregando::before{content:'';width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(226,190,120,.25);border-top-color:var(--hud-ouro-claro);
  box-shadow:0 0 22px rgba(240,200,120,.25);animation:hud-gira 1.4s linear infinite}
@keyframes hud-gira{to{transform:rotate(360deg)}}

/* ================= TELAS MENORES (1282x832) ================= */
@media (max-height:860px){
  html body.emAcesso #telaAcesso{padding:26px 30px 18px}
  html body .acesso-cabecalho,html body .novo-cabecalho{margin-bottom:14px;padding-bottom:12px}
  html body #telaServidor{padding:24px 30px 20px}
  .srv-mundo{min-height:128px;padding:16px}
  .srv-astro{width:80px;height:80px}
  .srv-mundos{grid-template-columns:1fr 1fr;column-gap:14px}
  .srv-mundo{grid-template-columns:80px 1fr}
}
@media (max-width:1366px){
  html body #ficha{width:270px;left:22px}
  html body #telaPersonagens .seletor-personagens{width:280px;right:22px}
}

/* Céu vivo (js/ceu-vivo.js): atrás do palco 3D e brasas na frente dele */
#ceuVivo,#brasasVivas{position:fixed;inset:0;pointer-events:none}
#ceuVivo{z-index:0}
#brasasVivas{z-index:2}

/* O estilo.css prende ficha, lista e barra com #telaPersonagens (dois ids, a
   moldura comprada de 20px). Aqui ganha a HUD nova com o mesmo peso. */
html body #telaPersonagens #ficha,
html body #telaPersonagens .seletor-personagens{
  border:1px solid var(--hud-fio);border-image:none;border-radius:2px;
  background:
    linear-gradient(180deg,rgba(255,226,166,.06),rgba(255,226,166,0) 90px),
    radial-gradient(120% 70% at 50% 0%,rgba(60,48,30,.32),transparent 70%),
    var(--hud-vidro);
  background-size:auto;background-origin:padding-box;background-clip:padding-box;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--hud-sombra),inset 0 1px 0 rgba(255,236,190,.08),inset 0 0 40px rgba(0,0,0,.35);overflow:visible}
html body #telaPersonagens #ficha{left:32px;width:300px;padding:22px 22px 18px}
html body #telaPersonagens .barra-topo{top:16px;left:50%;right:auto;transform:translateX(-50%)}
html body #telaPersonagens.vida-entra .barra-topo{animation:none}
@media (max-width:1366px){html body #telaPersonagens #ficha{width:270px;left:22px}}

/* Pacto: as sete Casas cabem sem rolar até 832 de altura */
html body #telaPacto .pacto-lista{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(226,190,120,.35) transparent}
html body #telaPacto .casa-op{padding:7px 12px 7px 16px}
html body #telaPacto .casa-op .cn{font-size:14px}
@media (max-height:860px){html body #telaPacto .casa-op{padding:4px 12px 4px 16px}html body #telaPacto .pacto-lista{padding:12px 12px}}