/* LOGIN NUEVO (Cesar 2026-10-02/03). Compartido por el pre registro (#login) y el login del juego (#lnLogin, encima de
   #LoginWindow de cliente.js). Escenario 855:525 que escala con la pantalla (unidades cqw).
   HOJA NUEVA (2026-10-03): todas las piezas salen de /static/images/login_nuevo/login-y-pre-registro.webp (clases .s-*, al inicio).
   DISPOSICIÓN (2026-10-03, maqueta de Cesar "quiero que quede así"): logo arriba, pestañas juntas apoyadas en la ventana,
   botones DENTRO de la ventana, placas en fila pegadas debajo, Opciones arriba a la derecha. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;800&display=swap");
/* ── PIEZAS de la hoja /static/images/login_nuevo/login-y-pre-registro.webp (457×768), generadas con sus coordenadas exactas ── */
.lnEscena .s{ background-image:url(/static/images/login_nuevo/login-y-pre-registro.webp?v=2); background-repeat:no-repeat; background-color:transparent; border:0; padding:0; margin:0; display:block }
.lnEscena .s-win-login{ background-size:191.2134% auto; background-position:4.1284% 2.0344%; aspect-ratio:239/129 }
.lnEscena .s-win-reg{ background-size:102.2371% auto; background-position:50% 77.6213%; aspect-ratio:447/129 }
.lnEscena .s-ingresar{ background-size:313.0137% auto; background-position:84.8875% 1.4865%; aspect-ratio:146/28 }
.lnEscena .s-ingresar-off{ background-size:328.777% auto; background-position:83.9623% 5.4127%; aspect-ratio:139/29 }
.lnEscena .s-crear{ background-size:313.0137% auto; background-position:2.2508% 86.3514%; aspect-ratio:146/28 }
.lnEscena .s-campo-user-on{ background-size:283.8509% auto; background-position:86.1486% 9.2617%; aspect-ratio:161/23 }
.lnEscena .s-campo-user-off{ background-size:283.8509% auto; background-position:86.1486% 12.4832%; aspect-ratio:161/23 }
.lnEscena .s-campo-pass-on{ background-size:283.8509% auto; background-position:86.1486% 15.5705%; aspect-ratio:161/23 }
.lnEscena .s-campo-pass-off{ background-size:283.8509% auto; background-position:86.1486% 18.6577%; aspect-ratio:161/23 }
.lnEscena .s-juega{ background-size:448.0392% auto; background-position:5.0704% 22.3011%; aspect-ratio:102/64 }
.lnEscena .s-batallas{ background-size:448.0392% auto; background-position:34.0845% 23.2819%; aspect-ratio:102/55 }
.lnEscena .s-mapas{ background-size:448.0392% auto; background-position:63.0986% 23.2819%; aspect-ratio:102/55 }
.lnEscena .s-amigos{ background-size:448.0392% auto; background-position:92.3944% 23.3146%; aspect-ratio:102/56 }
.lnEscena .s-login-off{ background-size:315.1724% auto; background-position:5.1282% 37.1775%; aspect-ratio:145/109 }
.lnEscena .s-login-on{ background-size:272.0238% auto; background-position:58.1315% 36.7601%; aspect-ratio:168/126 }
.lnEscena .s-reg-off{ background-size:343.609% auto; background-position:5.2469% 54.8048%; aspect-ratio:133/102 }
.lnEscena .s-reg-on{ background-size:289.2405% auto; background-position:56.5217% 56.4142%; aspect-ratio:158/121 }
.lnEscena .s-opciones{ background-size:557.3171% auto; background-position:93.0667% 31.9838%; aspect-ratio:82/27 }
.lnEscena .s-rc-nombre{ background-size:285.625% auto; background-position:4.3771% 90.0937%; aspect-ratio:160/21 }
.lnEscena .s-rc-email{ background-size:285.625% auto; background-position:58.9226% 90.0937%; aspect-ratio:160/21 }
.lnEscena .s-rc-pass{ background-size:285.625% auto; background-position:4.3771% 92.905%; aspect-ratio:160/21 }
.lnEscena .s-rc-pass2{ background-size:285.625% auto; background-position:58.9226% 92.905%; aspect-ratio:160/21 }
.lnEscena .s-rc-gris1{ background-size:285.625% auto; background-position:4.3771% 95.8501%; aspect-ratio:160/21 }
.lnEscena .s-rc-gris2{ background-size:285.625% auto; background-position:58.9226% 95.8501%; aspect-ratio:160/21 }
.lnEscena .s-rc-gris3{ background-size:285.625% auto; background-position:4.3771% 98.6613%; aspect-ratio:160/21 }
.lnEscena .s-rc-gris4{ background-size:285.625% auto; background-position:58.9226% 98.6613%; aspect-ratio:160/21 }
.lnEscena .s-hombre{ background-size:830.9091% auto; background-position:87.0647% 90.7258%; aspect-ratio:55/24 }
.lnEscena .s-mujer{ background-size:830.9091% auto; background-position:87.0647% 94.086%; aspect-ratio:55/24 }
.lnEscena{ --ln-ui:"Nunito","Segoe UI",Arial,sans-serif;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(83vw,135vh,1350px); aspect-ratio:855/525;
  container-type:inline-size; font-family:var(--ln-ui); -webkit-user-select:none; user-select:none }
.lnEscena button{ font-family:inherit; cursor:pointer }
/* LOGO (lo pone Cesar: /static/images/login_nuevo/logo.webp; si no existe, el lugar queda vacío) */
.lnLogo{ position:absolute; left:35.7%; width:26cqw; top:-2.4cqw; height:16.8cqw; /* +25% (Cesar 2026-10-13; antes left:39.7%; width:18cqw; top:.3cqw; height:11.6cqw) */ background:url(/static/images/login_nuevo/logo.webp) center/contain no-repeat; pointer-events:none; z-index:1 }
/* OPCIONES */
.lnOpciones{ position:absolute; left:82.4%; top:1.5cqw; width:11.6cqw; z-index:3; transition:filter .12s, transform .12s }
.lnOpciones:hover{ filter:brightness(1.1); transform:translateY(-.15cqw) }
/* PESTAÑAS: cada una tiene su pieza ENCENDIDA y APAGADA; posición y tamaño según el modo (medidas de la maqueta) */
.lnTab{ position:absolute; border:0; background:none; padding:0; margin:0; z-index:1; transition:filter .15s }
.lnTab .s{ width:100% } .lnTab .s-login-off, .lnTab .s-reg-on{ display:none }
#lnTabLogin{ left:26.4%; top:12cqw; width:23.3cqw; z-index:2 }
#lnTabReg{ left:50%; top:14.5cqw; width:18.3cqw }
.lnEscena.lnModoReg #lnTabLogin{ left:27.8%; top:13.1cqw; width:20.2cqw; z-index:1 }
.lnEscena.lnModoReg #lnTabReg{ left:47.6%; top:11.6cqw; width:21.9cqw; z-index:2 }
.lnEscena.lnModoReg #lnTabLogin .s-login-on, .lnEscena.lnModoReg #lnTabReg .s-reg-off{ display:none }
.lnEscena.lnModoReg #lnTabLogin .s-login-off, .lnEscena.lnModoReg #lnTabReg .s-reg-on{ display:block }
.lnTab{ cursor:pointer }
/* HOVER de LOGIN / REGISTRO (Cesar 2026-10-03): el cuadro sobresale un poquito + sombra + un REFLEJO de luz que lo cruza, para que se note que es botón (reemplaza al giro) */
.lnTab .s{ position:relative; transition:transform .18s ease, filter .18s ease }
.lnTab:hover .s, .lnTab:focus-visible .s{ transform:translateY(-.5cqw) scale(1.05); filter:brightness(1.08) drop-shadow(0 .6cqw .5cqw rgba(0,0,0,.35)) }
.lnTab:active .s{ transform:translateY(-.1cqw) scale(1.02); transition-duration:.06s }
.lnTab .s::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%) no-repeat; background-size:250% 100%; background-position:150% 0;
  -webkit-mask-image:url(/static/images/login_nuevo/login-y-pre-registro.webp?v=2); mask-image:url(/static/images/login_nuevo/login-y-pre-registro.webp?v=2); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat }
.lnEscena .s-login-off::after{ -webkit-mask-size:315.1724% auto; mask-size:315.1724% auto; -webkit-mask-position:5.1282% 37.1775%; mask-position:5.1282% 37.1775% }
.lnEscena .s-login-on::after{ -webkit-mask-size:272.0238% auto; mask-size:272.0238% auto; -webkit-mask-position:58.1315% 36.7601%; mask-position:58.1315% 36.7601% }
.lnEscena .s-reg-off::after{ -webkit-mask-size:343.609% auto; mask-size:343.609% auto; -webkit-mask-position:5.2469% 54.8048%; mask-position:5.2469% 54.8048% }
.lnEscena .s-reg-on::after{ -webkit-mask-size:289.2405% auto; mask-size:289.2405% auto; -webkit-mask-position:56.5217% 56.4142%; mask-position:56.5217% 56.4142% }
@keyframes lnReflejo{ 0%{ background-position:150% 0; opacity:1 } 100%{ background-position:-50% 0; opacity:1 } }
.lnTab:hover .s::after, .lnTab:focus-visible .s::after{ animation:lnReflejo .75s ease-out }
.lnTab:focus-visible{ outline:.3cqw solid #ffd54a; outline-offset:.2cqw; border-radius:2cqw }
/* registro / Facebook CERRADOS (interruptor de /admin/comingsoon): gris plomo con candado */
.lnEscena.lnRegCerrado #lnTabReg, body.regCerrado .lnEscena #lnTabReg{ filter:grayscale(1) brightness(.85); cursor:not-allowed }
.lnCandado{ display:none; position:absolute; right:7%; top:10%; width:3.2cqw; height:3.2cqw; place-items:center; border-radius:50%; background:#8b8f96; border:.25cqw solid #fff; font-size:1.6cqw; line-height:1; box-sizing:border-box }
.lnEscena.lnRegCerrado .lnCandado, body.regCerrado .lnEscena .lnCandado{ display:grid }
/* VENTANAS (la pieza trae su título dibujado), apoyadas debajo de las pestañas */
.lnVentana{ position:absolute; z-index:3; margin:0 }
.lnEscena .lnSoloReg, .lnEscena.lnModoReg .lnSoloLogin{ display:none }
.lnEscena.lnModoReg .lnSoloReg{ display:block }
#fIngresar{ left:31.7%; width:34.1cqw; top:26.9cqw }
#fCrear{ left:16.8%; width:63.4cqw; top:26.9cqw }
/* campos de INICIAR SESIÓN: pieza OSCURA en espera, CLARA mientras se escribe */
.lnCampo{ position:absolute; left:18.6%; width:67.4%; aspect-ratio:161/23; display:block; margin:0 }
.lnCampo .s{ position:absolute; inset:0; width:100%; height:100% }
.lnCampo .s-campo-user-on, .lnCampo .s-campo-pass-on{ display:none }
.lnCampo:focus-within .s-campo-user-on, .lnCampo:focus-within .s-campo-pass-on{ display:block }
.lnCampo:focus-within .s-campo-user-off, .lnCampo:focus-within .s-campo-pass-off{ display:none }
.lnCampo input{ position:absolute; left:15%; right:3%; top:0; bottom:0; width:auto; height:100%; border:0; margin:0; padding:0 2%; background:transparent;
  font:800 1.3cqw var(--ln-ui); color:#fff; box-sizing:border-box; -webkit-user-select:text; user-select:text }
.lnCampo input::placeholder{ color:#d7e3f2; opacity:.9 }
.lnCampo:focus-within input{ color:#0d1b3a } .lnCampo:focus-within input::placeholder{ color:#6b7a99 }
.lnCampo input:focus{ outline:none }
.lnC1{ top:27% } .lnC2{ top:46% }
/* botones con imagen, DENTRO de la ventana */
.lnBtn{ position:absolute; border:0; background:none; padding:0; margin:0; transition:filter .12s, transform .12s }
.lnBtn:hover{ filter:brightness(1.08); transform:translateY(-.15cqw) } .lnBtn:active{ transform:translateY(.15cqw) }
.lnBtn:focus-visible{ outline:.3cqw solid #fff; outline-offset:.2cqw; border-radius:3cqw }
.lnIngresar{ left:22.6%; width:60.8%; top:66.5% } .lnIngresar .s{ width:100% }
.lnIngresar .s-ingresar-off{ display:none } .lnIngresar:disabled .s-ingresar{ display:none } .lnIngresar:disabled .s-ingresar-off{ display:block }
.lnIngresar:disabled{ cursor:wait; filter:none; transform:none }
.lnCrear{ left:53.6%; width:32.5%; top:63% } .lnCrear:disabled{ filter:grayscale(.5); cursor:wait }
/* campos de NUEVA CUENTA (grilla 2×2): pieza CLARA con el texto dibujado mientras está vacío; GRIS lisa al escribir */
.lnRC{ position:absolute; width:35.6%; aspect-ratio:160/21; display:block; margin:0 }
.lnRC .s{ position:absolute; inset:0; width:100%; height:100% }
.lnRC .s-rc-nombre, .lnRC .s-rc-email, .lnRC .s-rc-pass, .lnRC .s-rc-pass2{ display:none }
.lnRC.vacio .s-rc-nombre, .lnRC.vacio .s-rc-email, .lnRC.vacio .s-rc-pass, .lnRC.vacio .s-rc-pass2{ display:block }
.lnRC.vacio .s-rc-gris1, .lnRC.vacio .s-rc-gris2, .lnRC.vacio .s-rc-gris3, .lnRC.vacio .s-rc-gris4{ display:none }
.lnRC input{ position:absolute; inset:0; width:100%; height:100%; border:0; margin:0; padding:0 4%; background:transparent; box-sizing:border-box;
  font:800 1.35cqw var(--ln-ui); color:#1d2b45; -webkit-user-select:text; user-select:text }
/* textos de los campos del registro como placeholder real (la hoja escalada x3 perdió los grises dibujados), Cesar 2026-10-03 */
.lnRC input::placeholder{ color:#a3abb6; opacity:1 } .lnRC:focus-within input::placeholder{ color:#b9c0c9 }
.lnRC.vacio input{ color:transparent }
.lnRC input:focus{ outline:none } .lnRC:focus-within{ box-shadow:0 0 0 .25cqw #ffd54a; border-radius:.4cqw }
/* SIN CAJA DEL AUTOCOMPLETADO (Cesar 2026-10-04, "está colocando un input encima"): Chrome/Edge/Safari pintan su fondo claro
   (#e8f0fe) sobre el input cuando rellenan o sugieren usuario/contraseña guardados → se veía una caja encima del campo
   dibujado. El fondo del navegador no se puede quitar con background: se le da una transición eterna (nunca llega a pintarse)
   y se fija el color del texto con -webkit-text-fill-color (el autocompletado lo pisa). Firefox: :autofill con filter. */
.lnEscena input:-webkit-autofill, .lnEscena input:-webkit-autofill:hover, .lnEscena input:-webkit-autofill:focus,
.lnEscena input:-webkit-autofill:active{ -webkit-box-shadow:0 0 0 1000px transparent inset !important; box-shadow:none !important;
  background-color:transparent !important; background-image:none !important; transition:background-color 99999s ease-out 0s, color 99999s ease-out 0s;
  caret-color:currentColor }
.lnEscena input:autofill{ filter:none !important; background:transparent !important }
.lnCampo input:-webkit-autofill{ -webkit-text-fill-color:#fff }
.lnCampo:focus-within input:-webkit-autofill{ -webkit-text-fill-color:#0d1b3a }
.lnRC input:-webkit-autofill{ -webkit-text-fill-color:#1d2b45 }
.lnRC.vacio input:-webkit-autofill{ -webkit-text-fill-color:transparent }
.lnR1{ left:15.5%; top:27% } .lnR2{ left:51.9%; top:27% } .lnR3{ left:15.5%; top:44% } .lnR4{ left:51.9%; top:44% }
/* Hombre / Mujer: en fila, debajo de los campos a la izquierda */
.lnEscena .lnGenero{ position:absolute; left:16%; width:26.3%; top:64%; display:flex; gap:2.2%; margin:0; height:auto }
.lnEscena .lnGenero button{ width:46%; height:auto; opacity:.7; transition:opacity .12s, transform .12s, filter .12s; border-radius:.5cqw }
.lnEscena .lnGenero button.sel{ opacity:1; filter:drop-shadow(0 0 .5cqw #ffd54a); transform:scale(1.06) }
/* PLACAS: fila pegada debajo de la ventana */
.lnPlaca{ position:absolute; top:45.5cqw; width:14.3cqw; border:0; padding:0; margin:0; z-index:2; transition:transform .12s, filter .12s }
.lnPlaca.s-juega{ top:43.8cqw }
.lnPlaca:hover,.lnPlaca:focus-visible{ transform:translateY(-.4cqw) scale(1.03); filter:brightness(1.1); outline:none }
.lnP0{ left:17.1% } .lnP1{ left:33.3% } .lnP2{ left:49.6% } .lnP3{ left:65.8% }
/* FACEBOOK (estilo oficial), debajo de las placas — sólo en LOGIN */
.lnFb{ position:absolute; left:37.5%; width:25cqw; top:54.4cqw; height:3.1cqw; margin:0; padding:0 1.5%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:.8cqw; z-index:2;
  border:0; border-radius:.5cqw; background:#1877f2; color:#fff; font:700 max(1.4cqw,11px) Helvetica,Arial,"Segoe UI",sans-serif; white-space:nowrap; box-shadow:0 .3cqw .8cqw rgba(0,0,0,.25); transition:filter .12s, transform .12s }
.lnFb:hover{ background:#166fe5 } .lnFb:active{ transform:translateY(.12cqw) }
.lnFb:focus-visible{ outline:.3cqw solid #ffd54a; outline-offset:.2cqw }
.lnFb:disabled{ filter:grayscale(.6) brightness(.9); cursor:wait }
.lnFbF{ width:2cqw; height:2cqw; flex:none; display:block }
.lnFb .lnCandado{ position:static; width:2cqw; height:2cqw; font-size:1.1cqw; border-width:.18cqw }
.lnEscena.lnRegCerrado .lnFb, body.regCerrado .lnEscena .lnFb{ filter:grayscale(1) brightness(.85); cursor:not-allowed }
.lnEscena.lnModoReg .lnFb{ display:none }
/* ventana de información de las placas */
.lnInfo{ position:absolute; inset:-50vh -50vw; display:grid; place-items:center; background:rgba(5,15,40,.45); z-index:5 }
.lnInfo .lnCaja{ position:relative; width:40cqw; background:linear-gradient(#e9f2ff,#c9dcf6); border:.4cqw solid #123a8a; border-radius:2cqw; padding:1.6cqw 2.4cqw 2cqw; box-sizing:border-box; text-align:center; box-shadow:0 1cqw 3cqw rgba(0,0,0,.35) }
.lnInfo .lnCajaT{ font:800 2.4cqw var(--ln-ui); color:#0b2a6a; margin-bottom:1cqw }
.lnInfo .lnTxt{ font:800 1.6cqw/1.45 var(--ln-ui); color:#0d1b3a }
.lnInfo .lnCerrar{ margin-top:1.4cqw; border:0; border-radius:3cqw; padding:.7cqw 3cqw; background:linear-gradient(#ffe066,#f2a516); color:#4a2005; font:800 1.6cqw var(--ln-ui); box-shadow:inset 0 -.25cqw 0 rgba(0,0,0,.2) }
/* mensajes */
.lnEscena #lgMsg, .lnToast{ position:absolute; left:50%; top:58.3cqw; bottom:auto; right:auto; transform:translateX(-50%); z-index:6; white-space:nowrap;
  background:rgba(13,27,58,.9); color:#fff; font:800 1.5cqw var(--ln-ui); padding:.5cqw 1.6cqw; border-radius:1cqw; pointer-events:none }
.lnEscena #lgMsg:empty{ display:none }
.lnEscena #lgMsg.err{ background:rgba(140,24,24,.92); color:#fff }
.lnEscena.lnModoReg #lgMsg, .lnEscena.lnModoReg .lnToast{ top:55cqw }
/* login del juego: capa a pantalla completa con el mapa en vivo del pre registro detrás */
#lnLogin{ position:fixed; inset:0; z-index:9000; background:#84b6ce; overflow:hidden; opacity:1; transition:opacity .8s ease }
#lnLogin.lnSaliendo{ opacity:0; pointer-events:none }
#lnLogin .lnEscena{ transition:transform .8s ease, opacity .5s ease }
#lnLogin.lnSaliendo .lnEscena{ transform:translate(-50%,-50%) scale(.94); opacity:0 }
@media (prefers-reduced-motion:reduce){ #lnLogin, #lnLogin .lnEscena{ transition-duration:.01s } .lnTab,.lnPlaca,.lnBtn,.lnOpciones{ transition:none } .lnTab .s, .lnTab:hover .s{ transition:none } .lnTab:hover .s::after{ animation:none } }
#lnLogin iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none }
/* pre registro en modo ?fondo=1 (fondo del login del juego): sólo el mapa */
body.soloFondo #login, body.soloFondo #cuentaRegresiva, body.soloFondo #gameHud, body.soloFondo #gameChat, body.soloFondo #lobbyBtns,
body.soloFondo #ranking_panel, body.soloFondo #ranking_panel_open, body.soloFondo #gmLinks, body.soloFondo #touch_ui, body.soloFondo #TouchShot,
body.soloFondo #ayuda, body.soloFondo #buttonChannels, body.soloFondo #buttonOptions, body.soloFondo #lobbyButtonMobile{ display:none !important }
/* CELULAR VERTICAL: escenario más grande (lo de los costados queda fuera de la pantalla), registro más angosto y
   placas en 2×2 debajo */
@media (orientation:portrait){
  #login, #lnLogin{ overflow:hidden }
  .lnEscena{ width:min(172vw,99vh); aspect-ratio:100/80 }
  .lnOpciones{ left:64%; top:2cqw; width:9cqw }
  #fCrear{ left:25%; width:50cqw }
  .lnPlaca{ width:17.5cqw } .lnP0, .lnP2{ left:32% } .lnP1, .lnP3{ left:50.5% }
  .lnP0, .lnP1{ top:46cqw } .lnP2, .lnP3{ top:56cqw } .lnPlaca.s-juega{ top:44.5cqw }
  .lnFb{ left:33%; width:34cqw; top:66.5cqw; height:4cqw }
  .lnFbF{ width:2.6cqw; height:2.6cqw }
  .lnEscena #lgMsg, .lnToast, .lnEscena.lnModoReg #lgMsg, .lnEscena.lnModoReg .lnToast{ top:72cqw }
  .lnInfo .lnCaja{ width:46cqw }
  .lnCampo input, .lnRC input{ font-size:max(1.3cqw,16px) }
}
/* CELULAR HORIZONTAL (pantallas bajas): placas a los costados */
@media (orientation:landscape) and (max-height:560px){
  .lnEscena{ width:min(83vw,158vh); aspect-ratio:855/445 }
  #fCrear{ left:20%; width:60cqw }
  .lnPlaca{ width:13.5cqw } .lnP0, .lnP2{ left:3% } .lnP1, .lnP3{ left:83.5% }
  .lnP0, .lnP1{ top:22cqw } .lnP2, .lnP3{ top:33cqw } .lnPlaca.s-juega{ top:20.6cqw }
  .lnFb{ top:47cqw }
  .lnEscena #lgMsg, .lnToast, .lnEscena.lnModoReg #lgMsg, .lnEscena.lnModoReg .lnToast{ top:47.5cqw }
  .lnCampo input, .lnRC input{ font-size:max(1.3cqw,16px) }
}

/* RESETEAR CONTRASEÑA (Cesar 2026-10-04): enlace debajo de la ventana de login (va dentro del form → la sigue en todas las
   disposiciones; con REGISTRO se oculta junto con la ventana) */
.lnOlvide{ position:absolute; left:0; width:100%; top:calc(100% + .7cqw); text-align:center; z-index:4;
  font:700 max(1.15cqw,12px)/1.2 Verdana, Arial, sans-serif; color:#fff; text-decoration:none;
  text-shadow:0 0 .25cqw #000, 0 .12cqw .2cqw #000 }
.lnEscena a.lnOlvide:link, .lnEscena a.lnOlvide:visited{ color:#fff }   /* el style.css del juego pinta los a:link */
.lnEscena a.lnOlvide:hover, .lnEscena a.lnOlvide:focus-visible{ color:#ffd54a; text-decoration:underline; outline:none }
@media (orientation:portrait){ .lnOlvide{ font-size:max(1.5cqw,13px) } }

/* PLACAS (Juega gratis / Grandes batallas / Mapas únicos / Haz amigos) OCULTAS, Cesar 2026-10-03. Para volver a mostrarlas: borrar esta línea */
.lnEscena .lnPlaca{ display:none !important }

/* PARLANTE para silenciar la música (Cesar 2026-10-03): el MISMO del login antiguo (#LoginMute: amarillo, borde negro,
   ícono .volume de 5 niveles y brillo amarillo al pasar el mouse), arriba entre LOGIN y REGISTRO */
.lnMute{ position:absolute; left:47.6%; top:8.6cqw; width:3.8cqw; height:3.8cqw; z-index:4; padding:0; margin:0; box-sizing:border-box; cursor:pointer;
  border:max(2px,.35cqw) solid #000; background-color:yellow; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAACWCAMAAAAc0dNcAAABDlBMVEUAAAAAAAAlAAAAAAD/AAARERH/AAD/////AAD/AAAAAAAAAAAAAAAYGBiampoAAAAAAAAAAAAAAAD////////T09SBgYEvLzB9fX3w7/A0NDT///88Li4AAADY2Nj///8yMjKysrL/AACFhYWnp6fp6en/AADY2Nj/AACoqKjX19f/29v/EBDbysr/Ghrm5ubq6uv/AAB3eHhubW5iYmL4+Ph0c3RlZWVoaGju7u/S09Tx8vJOTk4/PT309PXg4eKGhoZubm7Pz9HX2Nnc3N7CwsVZWFmJiYmAgICBgIHHyMr7+/w0NDVaWlo0NDQ2NjdcXFxcXV16envbFxfpERG5ur11V1iCZGSdbW2Vfn7y8478AAAAL3RSTlMADQMSCwcXmcriO2FqerEjcUsvYwfkoZ/niOEXKFakNmDDB6S8/m/kj7nno9mp/nq5RXUAAAJaSURBVEjH7JJbC4IwFIBHmNZzQVe6PUTQBTbF+aBgL6bQVUXr//+RNiQanZ3HHgq/px0+xnT7yBdYYNOqZSjCbC9fS6NNFWWKqaEOBlgrY7OnCFWNhwEQlcr8CIrj+RLkNCvgjhO3vTKnFAjCGYvTuzAm+cBmh/Ch3RNdb4U4p4TnWNZ6RzPX03/0Zrt39D9qjAZ95HJIt/Neo3eNvg/+pjUAWaIeWaKWWeBHRAJK9B3uQCNLdFNWGVhiGO+hkSUewkQaWCK3k1RjLMHcZR7RMp2IEvXIEhFEiTUIv1yij5booSVytESrLvGveLJLh0YAAkEQBCX5nFhOvLn8kwKDbIOiih8/rt9LXJTYlDiUGEocSixKbEo8tsSP9khclHhS4lBiKDGUGEosSgwlFiUWJbYk3tdPu+oigxWHQSAMY8WLmtgEkltOLZTdi3PxMA4oRL0k577/q6xt7LYs7H+cj/8TZ4Rc9FkvUvyZn2TXT9bB1Hfy9AnYMFOA7CPtNA/swzR87Q5jWjMG566DeKsu++7IriVTQHTzr5B1GIIL4EskBAjUsVelJ8CKcgGyENzet5JQk40R0EEhi67mpsQh05BqMrhinSNCRH3o+JnWI7bFnflBNNSp9yn6CPAgqBtRU1p9yhH8FqEy+Fa8LaC3TwC+PFvUtzUI00FO0YL1ZUvZAnZGHP/hywVjJXEtZVszXRbelsCMuhJYm7b7/e7hqkyVtdKoZyLIW7XBrMdaaRF8VF1/g2DrfdTIj1caMlKdH1HSNPASMm5GKeVoOGuqNxOMc87Ee/5vfgAzqIxU77cT4QAAAABJRU5ErkJggg==);
  background-repeat:no-repeat; background-size:100% 600%; background-position:0 60%; transition:box-shadow .15s ease-in-out }
.lnMute:hover, .lnMute:focus-visible{ box-shadow:0 0 10px 10px #ff0; outline:none }
.lnMute.cargando{ background-image:url(/static/images/loader124.gif); background-size:contain; background-position:0 0 !important }

/* ── CAMBIOS 2026-10-05 (Cesar: "bordes limpios", parlante "dentro de Opciones", Hombre/Mujer con símbolo + texto) ──
   Respaldo docs/_herramientas_claude/respaldos_login_nuevo/ln.css.antes_campos */
/* campos de NUEVA CUENTA dibujados con CSS (las piezas recortadas de la hoja dejaban líneas/sombras en las orillas) */
.lnRC .s{ display:none !important }
.lnRC{ background:#fff; border:.18cqw solid #d9c9a6; border-radius:.6cqw; box-shadow:inset 0 .18cqw .3cqw rgba(80,60,20,.12); box-sizing:border-box }
.lnRC:focus-within{ border-color:#f2b632; box-shadow:0 0 0 .22cqw rgba(255,213,74,.55), inset 0 .18cqw .3cqw rgba(80,60,20,.12) }
.lnRC input{ padding:0 5% } .lnRC.vacio input{ color:#1d2b45 } .lnRC.vacio input:-webkit-autofill{ -webkit-text-fill-color:#1d2b45 }
.lnRC input::placeholder{ color:#9aa3ae }
/* Hombre / Mujer: ♂ / ♀ + texto, centrados */
.lnEscena .lnGenero button.lnSexo{ aspect-ratio:55/24; display:flex; align-items:center; justify-content:center; gap:.4cqw; padding:0;
  background:linear-gradient(#fffaf0,#f3e6c8); border:.18cqw solid #d9c9a6; border-radius:.7cqw; font:800 1.25cqw var(--ln-ui); white-space:nowrap }
.lnEscena .lnGenero button[data-g=m]{ color:#1769e0 } .lnEscena .lnGenero button[data-g=f]{ color:#e0479e }
.lnEscena .lnGenero .lnSim{ width:1.75cqw; height:1.75cqw; flex:none; fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible }
.lnEscena .lnGenero button.lnSexo.sel{ border-color:#f2b632 }
/* parlante: ya no se ve en la escena (sigue funcionando por dentro para el interruptor de Música de Opciones) */
.lnEscena .lnMute{ display:none !important }
/* ventana de Opciones */
.lnOpcBox .lnFila{ display:flex; align-items:center; justify-content:space-between; gap:2cqw; margin:.6cqw 0; font:800 1.7cqw var(--ln-ui); color:#0d1b3a }
.lnSw{ position:relative; width:6cqw; height:2.8cqw; border-radius:2cqw; border:.2cqw solid #123a8a; background:#9aa3ae; cursor:pointer; padding:0; box-sizing:border-box }
.lnSw::after{ content:""; position:absolute; top:.2cqw; left:.3cqw; width:2cqw; height:2cqw; border-radius:50%; background:#fff; transition:left .15s }
.lnSw.on{ background:#2ecc40 } .lnSw.on::after{ left:3.3cqw }
.lnSw:focus-visible{ outline:.3cqw solid #ffd54a; outline-offset:.2cqw }
.lnOpcMas{ margin-top:1cqw; border:0; border-radius:3cqw; padding:.6cqw 2.4cqw; background:linear-gradient(#cfe0ff,#9cbcf0); color:#0b2a6a; font:800 1.4cqw var(--ln-ui); cursor:pointer }
@media (orientation:portrait){ .lnEscena .lnGenero button.lnSexo{ font-size:max(1.25cqw,11px) } .lnOpcBox .lnFila{ font-size:max(1.7cqw,14px) } }