/* Tela de login do Talisman Online — recriação fiel de ui\lay_login.xml
   Layout por ÂNCORAS como o engine (widgets em pixels 1:1, reposicionados
   relativos às bordas/centro da janela — em 1024×768 reproduz exatamente as
   Locations do XML; em widescreen reancora como o client faz).
   Sprites recortados dos atlas por tools/ui_extract_login.py (static/ui/data). */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0b1626;
  /* fonte "def" do ui.xml (mars): Arial 12px */
  font: 12px/1 Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============ Cena de fundo: o cenário 3D REAL do stage\login.lua ==========
   ator sdl09 com a pose "scene" em loop (login_scene.js monta o canvas aqui).
   O fundo sólido é o RenderSetBaseColor(0,0,0) do próprio stage — é o que
   aparece enquanto o GLB carrega, ou se a máquina não tiver WebGL. */

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  opacity: 0;
  transition: opacity .8s linear;
}
#scene.ready { opacity: 1; }

#scene canvas { display: block; width: 100%; height: 100%; }

/* ============ Palco = janela inteira (âncoras do engine) ================== */

#stage {
  position: fixed;
  inset: 0;
}

/* lbGameName1/2 256×256 — âncoras: BOTTOM→TOP(frmLogin)-10, LEFT(frmLogin)-99
   e lbGameName2 encostado à direita do 1 (frmLogin: 50%-147px / 50%-40px) */
.logo {
  position: absolute;
  top: calc(50% - 306px);
  width: 256px;
  height: 256px;
  pointer-events: none;
  user-select: none;
}
#lbGameName1 { left: calc(50% - 246px); }
#lbGameName2 { left: calc(50% + 10px); }

/* ============ Botões ======================================================= */

button {
  position: absolute;
  border: 0;
  background-color: transparent;
  font: inherit;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .85);
  cursor: pointer;
  padding: 0;
}

/* PushButtonLong (theme.xml): normal tz_035 61,80,118,18 / pushed 61,100.
   O template só define Normal/Pushed/Disabled (sem HighlightImage) e o atlas
   não tem recorte de hover → como no client, hover NÃO muda o visual. */
.btn-long {
  background-image: url("data/btlong_normal.png");
  background-size: 100% 100%;
}
.btn-long:active { background-image: url("data/btlong_pushed.png"); }

/* PushButton (btcancle): normal tz_035 1,80,58,18 / pushed 1,100 */
.btn-short {
  background-image: url("data/bt_normal.png");
  background-size: 100% 100%;
}
.btn-short:active { background-image: url("data/bt_pushed.png"); }

button:focus-visible { outline: 1px dotted rgba(255, 255, 255, .7); }

/* Coluna inferior direita — âncoras RIGHT-20 / BOTTOM-66 encadeadas
   (btSystem: bottom = topo do btReturn − 20; btCreateAccount: −62). O
   lay_login do cliente novo sobe o btReturn 20px (era BOTTOM-46). */
#btReturn        { right: 20px; bottom: 66px;  width: 120px; height: 24px; }
#btSystem        { right: 20px; bottom: 110px; width: 120px; height: 24px; }
#btCreateAccount { right: 20px; bottom: 152px; width: 120px; height: 22px; }

/* ============ frmLogin 294×220 — CENTERH / CENTERV+70 (1024: 365,344) ===== */

#frmLogin {
  position: absolute;
  left: calc(50% - 147px);
  top: calc(50% - 40px);
  width: 294px;
  height: 220px;
  animation: loginFade 2s linear both;   /* FadeInTime="2" */
}

@keyframes loginFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Label 704 (TemplateNormalTitle) em 1,9,292,32 — theme.xml: lbcenter
   windowbeam (101×17, REPEAT) de LEFT+10 a RIGHT−10 no topo; lbleft/lbright
   tz_035 18×18 logo ABAIXO do friso (TOP→BOTTOM do lbcenter), alinhadas às
   pontas dele. O lbTitelText o frmLogin esconde. */
.frm-title {
  position: absolute;
  left: 1px;
  top: 9px;
  width: 292px;
  height: 32px;
}
.frm-title > i { position: absolute; font-style: normal; }
.frm-title .tc {
  left: 10px; right: 10px; top: 0; height: 17px;
  background: url("data/title_center.png") repeat-x;
}
.frm-title .tl {
  left: 10px; top: 17px; width: 18px; height: 18px;
  background: url("data/title_left.png");
}
.frm-title .tr {
  right: 10px; top: 17px; width: 18px; height: 18px;
  background: url("data/title_right.png");
}

/* Label "619" Inherit=bg1 em 7,2,280,180 — BorderLayout windowlup…/windowmid
   pré-composto pelo ui_extract_login.py */
.bg1-login {
  position: absolute;
  left: 7px;
  top: 2px;
  width: 280px;
  height: 180px;
  background: url("data/bg1_280x180.png");
}

/* lbUserName 15,40,60×18 · lbPassword 15,74,60×18 (AlignCol=CENTER) */
.frm-label {
  position: absolute;
  width: 60px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .85);
}
#lbUserName { left: 15px; top: 40px; }
#lbPassword { left: 15px; top: 74px; }

/* edtUsername 78,38 · edtPassword 77,72 — 190×22, bg tz_012 364,368,148,25 */
.edit {
  position: absolute;
  width: 190px;
  height: 22px;
  border: 0;
  background: url("data/edit_bg.png");
  background-size: 100% 100%;
  color: #fff;
  font: inherit;
  padding: 0 5px;              /* ColSpacing="4" + borda da arte */
  caret-color: #fff;
}
/* o engine não desenha realce de foco no EditBox — só o caret */
.edit:focus { outline: none; }
#edtUsername { left: 78px; top: 38px; }
#edtPassword { left: 77px; top: 72px; }

/* lbPassRember 70,109,207×21 — barra tz_035 208,187,189,22, texto centrado */
#lbPassRember {
  position: absolute;
  left: 70px;
  top: 109px;
  width: 207px;
  height: 21px;
  line-height: 21px;
  text-align: center;
  background: url("data/remember_bar.png") 0 0 / 100% 100%;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .85);
  user-select: none;
}

/* moldura do checkbox (Label 1267): 31,109,22×22 — tz_012 152,7,24,22 */
#ckbRememberPassword {
  position: absolute;
  left: 31px;
  top: 109px;
  width: 22px;
  height: 22px;
  background: url("data/chk_box.png");
  background-size: 100% 100%;
  cursor: pointer;
}
#ckbRememberPassword:focus-visible { outline: 1px dotted rgba(255,255,255,.7); }

/* visto (CheckImage tz_012 82,6,24,20) — ckbRememberPassword 32,113,20×14 */
#chkTick {
  position: absolute;
  left: 32px;
  top: 113px;
  width: 20px;
  height: 14px;
  background: url("data/chk_tick.png");
  background-size: 100% 100%;
  pointer-events: none;
}

/* btOK 95,142,110×22 */
#btOK { left: 95px; top: 142px; width: 110px; height: 22px; }

/* ======== lbLoginBottom 2048×64 — âncora BOTTOM(btReturn)+46 ============== */
/* btReturn está em BOTTOM−46, então a conta do XML põe a barra encostada na
   base. O client põe 1px acima: a textura bottom_bg tem alfa entrelaçado
   (linha sim, linha não) e na captura real as linhas opacas caem nas ÍMPARES
   da barra — o que só fecha com o topo da barra em screenBottom−65. Com
   bottom:0 a fase inverte e o rodapé fica em antifase com o do client
   (a região `rodape` do login_compare vai de ~5 para 63 de diferença). */
#lbLoginBottom {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 2048px;
  height: 64px;
  background: url("data/bottom_bg.png");
  background-size: 100% 100%;   /* Label 2048×64 sobre textura 64×64 */
  pointer-events: none;
}
/* Label 653: BackgroundColor #33000000 em (0,24) 1280×40 */
#lbLoginBottom .veu {
  position: absolute;
  left: 0;
  top: 24px;
  width: 1280px;
  height: 40px;
  background: rgba(0, 0, 0, .2);
}

/* ======== frmLoginInfo 380×50 — CENTERH / CENTERV+35 (1024: 322,394) ====== */

#frmLoginInfo {
  position: absolute;
  left: calc(50% - 190px);
  top: calc(50% + 10px);
  width: 380px;
  height: 50px;
  background: url("data/bg1_380x50.png");
}

#lbLoginInfo {
  position: absolute;
  left: 17px;
  top: 16px;
  width: 270px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .85);
}

#btcancle { left: 294px; top: 14px; width: 70px; height: 22px; }

[hidden] { display: none; }

/* ======== Celular deitado (APK): a tela do PC precisa de ~620px de altura ==
   Com até 520px o logo encolhe para o topo, o formulário cresce um pouco para
   o toque, os botões da direita também, e o rodapé decorativo sai (ele cobria
   1/6 da tela). Só reposiciona: a arte é a mesma do client. */
@media (max-height: 520px) {
  .logo { top: 2px; width: 128px; height: 128px; }
  #lbGameName1 { left: calc(50% - 123px); }
  #lbGameName2 { left: calc(50% + 5px); }
  #frmLogin, #frmLoginInfo { transform: scale(1.15); transform-origin: 50% 0; }
  #frmLogin { top: 118px; }
  #frmLoginInfo { top: 160px; }
  .btn-long:not(#btOK) { transform: scale(1.3); transform-origin: 100% 100%; }
  #btReturn        { bottom: 16px; }
  #btSystem        { bottom: 62px; }
  #btCreateAccount { bottom: 108px; }
  #lbLoginBottom { display: none; }
}

/* teclado aberto no APK (o jogo encolhe acima dele): só o formulário */
@media (max-height: 300px) {
  .logo, .btn-long:not(#btOK) { display: none; }
  #frmLogin { top: 0; transform: scale(.85); }
}

/* navegador em pé */
@media (max-width: 520px) and (min-height: 521px) {
  .logo { top: calc(50% - 250px); width: 180px; height: 180px; }
  #lbGameName1 { left: calc(50% - 173px); }
  #lbGameName2 { left: calc(50% + 7px); }
  #frmLogin, #frmLoginInfo { transform: scale(1.2); transform-origin: 50% 0; }
  #frmLogin { top: calc(50% - 80px); }
  #btReturn, #btSystem, #btCreateAccount { right: auto; left: calc(50% - 60px); transform: scale(1.3); }
  #btReturn        { bottom: 96px; }   /* acima do rodapé de 64px */
  #btSystem        { bottom: 142px; }
  #btCreateAccount { bottom: 188px; }
}

/* ======== Celular (toque): tela "Enter" do APK (login_mobile.js) ==========
   O form, o logo e os botões do PC somem; os <input> deles vão para a tela
   nova. O #stage fica por cima só para o frmLoginInfo (mensagens/Cancel). */
html.login-apk #frmLogin,
html.login-apk .logo,
html.login-apk .btn-long:not(#btOK),
html.login-apk #lbLoginBottom { display: none; }
html.login-apk #stage { z-index: 1; pointer-events: none; }
html.login-apk #frmLoginInfo { pointer-events: auto; }

.lc {
  position: fixed; left: 50%; top: 50%; width: 844px; height: 390px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  font: bold 15px Arial, Helvetica, sans-serif; color: #fff9d6;
}
.lc > * { position: absolute; }
.lc-logo { left: 232px; top: -64px; width: 380px; pointer-events: none; }
.lc-campo {
  top: 214px; width: 256px; height: 48px; display: flex; align-items: center;
  border: 13px solid transparent; border-image: url("/static/ycmobile/sprites/image_login_srdi.png") 13 fill;
}
.lc-conta { left: 160px; }
.lc-senha { left: 428px; }
.lc-campo img { width: 20px; height: 19px; margin-right: 6px; flex: none; }
.lc .edit {
  position: static; width: 100%; height: 100%; padding: 0 2px; background: none;
  font: 16px Arial, Helvetica, sans-serif; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.lc .edit::placeholder { color: rgba(255, 249, 214, .7); }
.lc-orn { left: 342px; top: 268px; width: 160px; pointer-events: none; }
.lc-enter {
  left: 272px; top: 296px; width: 300px; height: 66px;
  background: url("/static/ycmobile/sprites/button_login_xinnian_jinru.png") 0 0 / 100% 100%;
}
/* botão "账号" do LeftPanel do APK: losango pronto + rótulo em degradê (#ffeea5→#fff) */
.lc-reg {
  left: 14px; bottom: 8px; width: 72px; height: 92px; padding: 66px 0 0;
  background: url("/static/ycmobile/sprites/button_login_zhanghao.png") 50% 0 / 66px 66px no-repeat;
}
.lc-reg span {
  display: block; font: bold 15px Arial, Helvetica, sans-serif;
  background: linear-gradient(#ffeea5, #fff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}
.lc-enter:active, .lc-reg:active { filter: brightness(.85); }

/* teclado aberto: só os campos e o Enter, no topo */
.lc.teclado { top: 0; height: 150px; transform: translate(-50%, 0) scale(var(--s, 1)); transform-origin: 50% 0; }
.lc.teclado .lc-logo, .lc.teclado .lc-orn, .lc.teclado .lc-reg { display: none; }
.lc.teclado .lc-campo { top: 8px; }
.lc.teclado .lc-enter { top: 72px; }

/* ======== Cadastro (login_registro.js): peças do prefab login/register do APK */
.lr {
  position: absolute; inset: 0; z-index: 0; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.lr[hidden] { display: none; }
#frmLoginInfo { z-index: 1; }
.lr-painel {
  position: relative; flex: none; width: 600px; height: 330px;
  transform: scale(var(--s, 1));
  font: 18px Arial, Helvetica, sans-serif;
}
.lr-painel::before {
  content: ""; position: absolute; inset: 0;
  border: solid transparent; border-width: 146px 37px 64px 37px;
  border-image: url("/static/ycmobile/sprites/bg_login_03.png") 146 37 64 37 fill;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
}
.lr-painel > * { position: absolute; }
.lr-canto { width: 46px; height: 45px; background: url("/static/ycmobile/sprites/bg_login_03_huawen.png") 0 0 / 100% 100%; opacity: .8; }
.lr-x {
  right: 22px; top: 6px; width: 56px; height: 35px;
  background: url("/static/ycmobile/sprites/button_login_close.png") 0 0 / 100% 100%;
}
.lr-campo {
  left: 62px; width: 476px; height: 42px; padding: 0 14px;
  border: 9px solid transparent; border-image: url("/static/ycmobile/sprites/bg_login_04.png") 9 fill;
  background: none; font: inherit; color: #703f2f; outline: none;
}
.lr-campo::placeholder { color: #a67a62; }
.lr-campo:focus { filter: brightness(1.06); }
.lr-campo:nth-of-type(1) { top: 40px; }
.lr-campo:nth-of-type(2) { top: 90px; }
.lr-campo:nth-of-type(3) { top: 140px; }
.lr-campo:nth-of-type(4) { top: 190px; }
.lr-ok {
  left: 204px; top: 248px; width: 192px; height: 60px;
  background: url("/static/ycmobile/sprites/button_login_05.png") 0 0 / 100% 100%;
  font: 24px Arial, Helvetica, sans-serif; color: #fff;
  text-shadow: 1px 1px 0 #c43729, -1px -1px 0 #c43729, 1px -1px 0 #c43729, -1px 1px 0 #c43729;
}
.lr-ok:active, .lr-x:active { filter: brightness(.85); }