/* Portada de Gumbao (login): tarjeta con pestañas a la izquierda y panel de novedades a la derecha.
   Mantiene los IDs que usa DLL.dll; el marcado extra (marca, pestañas, etiquetas, #LoginSide) está en index.hbs.
   Usa las variables de game-theme.css / game-batalla.css. */

/* Fondo: arte de un mapa del juego, desenfocado y oscurecido */
#LoginWindowBG {
    background: #081429 !important;
    overflow: hidden;
}

#LoginWindowBG::before {
    content: "";
    position: absolute;
    inset: -30px;
    background: url(/static/images/maps/dragon_bg.jpg) center / cover no-repeat;
    filter: blur(14px) brightness(.45) saturate(1.1);
}

#LoginWindowBG::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 25% 40%, rgba(61, 138, 232, .25), transparent 70%),
        linear-gradient(180deg, rgba(8, 20, 41, .35), rgba(8, 20, 41, .85));
}

#LoginWindow {
    z-index: 1;
    width: 1000px !important;
    height: 560px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible;
    transform-origin: center center !important;
    font-family: var(--font) !important;
    color: var(--text);
}

#LoginWindow::before, #LoginWindow::after { display: none !important; }

/* Lo que reemplazan las pestañas */
#loginTitle, #registerTitle, #LoginSap { display: none !important; }

/* ---------- Marca ---------- */

#LoginBrand {
    position: absolute;
    left: 0;
    top: 0;
    width: 440px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lbMark {
    font: 700 48px/1 var(--font-d);
    letter-spacing: 3px;
    background: linear-gradient(180deg, #fff3b0 0%, #ffc533 45%, #ef8a0c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 #6b3a00) drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}

.lbSub {
    margin-top: 4px;
    font: 700 12px var(--font);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a9c1e6;
}

/* Sonido e idioma: junto a la marca */
#LoginMute, #LoginLang {
    top: 24px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 2px solid #1f4a8c !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    box-shadow: none !important;
    animation: none !important;
}

#LoginMute { left: 366px !important; background-color: #12306a !important; }

#LoginLang {
    left: 404px !important;
    background: #12306a !important;
    color: #fff !important;
    font: 700 12px/28px var(--font-d) !important;
    text-align: center;
    text-shadow: none !important;
}

/* ---------- Tarjeta y pestañas ---------- */

#LoginCard {
    position: absolute;
    left: 0;
    top: 84px;
    width: 440px;
    height: 476px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1d4688 0%, #0f2b5e 100%);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 8px 0 #06102a, 0 24px 50px rgba(0, 0, 0, .6);
}

#LoginTabs {
    position: absolute;
    left: 24px;
    top: 104px;
    width: 392px;
    height: 46px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
    overflow: hidden;
    background: #0b1d41;
    box-shadow: inset 0 0 0 2px #1f4a8c;
}

#LoginTabs button {
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: #a9c1e6;
    font: 700 14px var(--font-d) !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .12s, background .12s;
}

#LoginTabs button:hover { color: #fff; }

#LoginTabs button.on {
    color: #fff;
    background: linear-gradient(180deg, rgba(92, 184, 255, .22), rgba(92, 184, 255, .06));
    border-bottom-color: #ffc533;
}

/* ---------- Formularios ---------- */

#LoginPart, #RegisterPart {
    left: 24px !important;
    top: 168px !important;
    width: 392px !important;
    display: flex;
    flex-direction: column;
}

#RegisterPart { display: none; }
#LoginWindow.lwRegister #LoginPart { display: none; }
#LoginWindow.lwRegister #RegisterPart { display: flex; }

#LoginPart br, #RegisterPart > br { display: none; }
#RegisterPart .formLine { margin: 0 !important; }

.lwLabel {
    margin: 10px 0 6px;
    font: 700 12px var(--font-d);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a9c1e6;
}

#LoginWindow .inputField {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    height: 48px;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 2px solid #1f4a8c !important;
    border-radius: 10px !important;
    background: #0b1d41 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4) !important;
    color: #fff !important;
    font: 600 16px var(--font) !important;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

#LoginWindow .inputField::placeholder { color: #5f7fb3; }
#LoginWindow .inputField:focus { border-color: #ffc533 !important; box-shadow: 0 0 0 3px rgba(255, 197, 51, .25) !important; }

/* Botones principales */
#LoginSubmit.blueBtn, #RegisterSubmit.registerButton {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    height: 52px !important;
    margin: 22px 0 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    font: 700 18px var(--font-d) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    cursor: pointer;
    animation: none !important;
    transition: transform .08s, filter .12s;
}

#LoginSubmit.blueBtn {
    background: var(--b-gold) !important;
    color: #4a2a00 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
    box-shadow: inset 0 -5px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a, 0 8px 18px rgba(0, 0, 0, .4) !important;
}

#RegisterSubmit.registerButton {
    background: var(--b-orange) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important;
    box-shadow: inset 0 -5px 0 var(--b-orange-edge), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #06102a, 0 8px 18px rgba(0, 0, 0, .4) !important;
}

#LoginSubmit.blueBtn:hover, #RegisterSubmit.registerButton:hover { filter: brightness(1.08); }
#LoginSubmit.blueBtn:active, #RegisterSubmit.registerButton:active { transform: translateY(2px); }
#LoginSubmit.grayspin, #RegisterSubmit.grayspin { filter: grayscale(1) brightness(.85); }

.resetPass {
    display: block;
    margin-top: 16px;
    text-align: left;
    text-shadow: none !important;
}

.resetPass a, #pplink3 {
    color: #a9c1e6 !important;
    font: 600 13px var(--font) !important;
    padding: 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: none !important;
}

.resetPass a:hover, #pplink3:hover { color: #ffc533 !important; background: none !important; }

#pplink3 {
    left: 24px !important;
    top: 526px !important;
    bottom: auto !important;
    width: auto;
    text-decoration: none;
    font-size: 12px !important;
}

/* Piloto: dos botones Hombre / Mujer (antes con iconos en imagen) */
/* flex con font-size 0: los   del marcado no ocupan sitio */
#RegisterPart #formLineGender {
    display: flex;
    gap: 10px;
    font-size: 0;
}

#formLineGender label { flex: 1; }

#LoginWindow.lwRegister #pplink3 { display: none; }

#formLineGender input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }

#formLineGender label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 10px;
    background: #0b1d41;
    box-shadow: inset 0 0 0 2px #1f4a8c;
    color: #fff;
    font: 700 15px var(--font-d);
    cursor: pointer;
    transition: background .12s, box-shadow .12s;
}

#formLineGender label .Male, #formLineGender label .Female { display: none; }
#formLineGender label[for=male]::before { content: "♂"; font-size: 20px; color: #5cb8ff; }
#formLineGender label[for=female]::before { content: "♀"; font-size: 20px; color: #ff7aa8; }
#formLineGender label:hover { background: #12306a; }
#formLineGender input:checked + label { background: #173f80; box-shadow: inset 0 0 0 2px #ffc533, 0 0 12px rgba(255, 197, 51, .35); }

#formLineSubmit { margin: 0 !important; }

/* ---------- Panel derecho: novedades ---------- */

#LoginSide {
    position: absolute;
    left: 470px;
    top: 0;
    width: 530px;
    height: 560px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lsHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 60px;
}

.lsKicker {
    display: block;
    font: 700 12px var(--font-d);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #5cb8ff;
}

.lsHead h2 {
    margin: 2px 0 0;
    font: 700 28px/1.1 var(--font-d);
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

.lsSocial { display: flex; gap: 8px; }

.lsSoc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #12306a;
    box-shadow: inset 0 0 0 2px #1f4a8c, 0 3px 0 #06102a;
    transition: transform .1s, filter .1s;
}

.lsSoc svg { width: 22px; height: 22px; }
.lsSoc.fb { color: #5b9dff; }
.lsSoc.wa { color: #4ad66d; }
.lsSoc:hover { transform: translateY(-2px); filter: brightness(1.2); }

.lsGift {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(90deg, #1d4688, #12306a);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 6px 0 #06102a;
}

.lsCoin {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c7, #ffc533 45%, #b8780c);
    box-shadow: 0 0 16px rgba(255, 197, 51, .6), inset 0 -3px 0 rgba(0, 0, 0, .25);
}

.lsGiftText { flex: 1; display: flex; flex-direction: column; }
.lsGiftText .lsKicker { color: #ffc533; }
.lsGiftText strong { font: 700 22px/1.2 var(--font-d); color: #fff; }
.lsGiftText span:last-child { font-size: 13px; color: #a9c1e6; }

.lsOnline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 16px;
    border-left: 2px solid rgba(92, 184, 255, .3);
}

.lsOnline b { font: 700 26px/1 var(--font-d); color: #4ad66d; text-shadow: 0 0 12px rgba(74, 214, 109, .5); }
.lsOnline span { font-size: 12px; color: #a9c1e6; }

/* Panel destacado: arte de un mapa del juego */
.lsShow {
    position: relative;
    flex: 1;
    min-height: 150px;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(8, 20, 41, .05) 30%, rgba(8, 20, 41, .9)),
        url(/static/images/maps/dragon_bg.jpg) center 35% / cover no-repeat;
    box-shadow: inset 0 0 0 2px #3a78d0, 0 6px 0 #06102a;
}

.lsShowTag {
    position: absolute;
    left: 14px;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(6, 16, 42, .85);
    font: 700 12px var(--font-d);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}

.lsShowTag i { width: 8px; height: 8px; border-radius: 50%; background: #ef4b5f; box-shadow: 0 0 8px #ef4b5f; animation: lsPulse 1.4s ease-in-out infinite; }

@keyframes lsPulse { 50% { opacity: .35; } }

.lsShowText {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
}

.lsShowText strong { font: 700 24px/1.15 var(--font-d); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.lsShowText span { font-size: 14px; color: #d6e6ff; }

/* Novedades */
.lsNews {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(11, 29, 65, .92);
    box-shadow: inset 0 0 0 2px #1f4a8c;
}

.lsItem {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    padding: 9px 16px;
    border-left: 3px solid #ffc533;
}

.lsItem + .lsItem { border-top: 1px solid rgba(92, 184, 255, .18); }

.lsTag {
    grid-row: span 2;
    align-self: center;
    padding: 3px 8px;
    border-radius: 6px;
    font: 700 11px var(--font-d);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #06102a;
    background: #5cb8ff;
}

.lsTag.pass { background: #b48cff; }
.lsTag.free { background: #4ad66d; }
.lsItem strong { font: 700 15px var(--font-d); color: #fff; }
.lsItem span:last-child { font-size: 12px; color: #a9c1e6; }

@media (prefers-reduced-motion: reduce) {
    .lsShowTag i { animation: none; }
}