html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: Arial, Helvetica, sans-serif; }
#escena { display: block; width: 100vw; height: 100vh; cursor: default; transition: filter .6s ease; }
#ayuda {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: 600 13px/1.2 Arial, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000;
  background: rgba(0, 0, 0, .35); padding: 6px 12px; border-radius: 12px; pointer-events: none;
  transition: opacity .4s;
}
#estado {
  position: fixed; left: 10px; top: 8px; font: 12px Arial, sans-serif; color: #fff;
  text-shadow: 0 1px 2px #000; pointer-events: none;
}

/* ── HUD del juego real: recorte de #gameui (800×85, stuff_HD a 1000×1500) ── */
#gameHud { position: fixed; left: 50%; bottom: 0; width: 480px; height: 85px; transform: translateX(-50%) scale(var(--gs, 1)); transform-origin: center bottom;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) -170px -1231.5px / 1000px 1500px no-repeat;
  pointer-events: none; transition: opacity .4s; }
#hudPower { position: absolute; left: 71px; bottom: 17px; width: 0; height: 19px;
  background: #de1821 url(/static/images/themes/classicHD/stuff_HD.webp) 0 -1422.5px / 1000px 1500px; }
#hudLastMark { position: absolute; left: 70px; top: 67px; margin-left: -4px; width: 9px; height: 6px;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) -221px -1413px / 1000px 1500px; transition: left 1s ease-out; }
#hudAng { position: absolute; left: 22px; top: 14px; scale: .5; transform-origin: 0 0; opacity: .75; }

/* ── Botón arrastrar/espacio, marca de fuerza y controles táctiles (style.css del juego) ── */
#slice_drag_button { position: absolute; left: 37px; top: 42px; width: 30px; height: 30px; cursor: pointer; pointer-events: auto;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) -231.5px -1358px / 1000px 1500px no-repeat; }
#slice_drag_button.drag { background-position: -231.5px -1389.5px; }
#powerMarkArea { position: absolute; left: 71px; bottom: 0; width: 400px; height: 38px; pointer-events: auto; }
#powerMark { position: absolute; left: 200px; width: 11px; height: 23px; margin-left: -5.5px; pointer-events: none;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) -263px -1378.5px / 1000px 1500px no-repeat; transition: transform .2s; }
@keyframes blinking_glow_anim { 50% { box-shadow: 0 0 0 0 #ff0; transform: rotate(0); } 100% { box-shadow: 0 0 8px 8px #ff0; transform: rotate(10deg); } }
#TouchBarMsg { position: absolute; bottom: 11px; left: 2px; width: 60px; height: 27px; border-radius: 5px; box-shadow: 4px 4px 15px 7px #310;
  border: 1px solid #000; opacity: .8; font: 12px/13px Verdana, sans-serif; text-align: center; color: darkblue; z-index: 777; display: none;
  background: radial-gradient(ellipse at center, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%); animation: blinking_glow_anim 1s ease-in infinite alternate; }
#TouchShot { position: fixed; top: 40%; left: 40px; width: 80px; height: 80px; border-radius: 80px; box-shadow: 4px 4px 15px 7px #310;
  border: 1px solid #000; opacity: .8; text-align: center; font: 13px Verdana, sans-serif; color: darkblue; z-index: 777; display: none;
  background: radial-gradient(ellipse at center, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%); animation: blinking_glow_anim 1s ease-in infinite alternate;
  touch-action: none; user-select: none; -webkit-user-select: none; }
#TouchShot.active { animation: blinking_glow_anim .5s ease-in infinite alternate;
  background: radial-gradient(ellipse at center, #f3c5bd 0, #e86c57 50%, #ea2803 51%, #f60 75%, #c72200 100%); }
#touch_ui { position: fixed; left: 0; top: 0; width: 250px; height: 350px; display: none; z-index: 5; transform-origin: 0 0;
  transform: scale(var(--tscale, 1)); touch-action: none; user-select: none; -webkit-user-select: none; }
#btnLeft, #btnRight, #btnUp, #btnDown { position: absolute; opacity: .4; background: url(/static/images/touch_ui.png) no-repeat; }
#btnLeft { left: 0; top: 100px; width: 70px; height: 150px; background-position: 0 -100px; }
#btnRight { left: 180px; top: 100px; width: 70px; height: 150px; background-position: -280px -100px; }
#btnUp { left: 50px; top: 0; width: 150px; height: 70px; background-position: -100px 0; }
#btnDown { left: 50px; top: 280px; width: 150px; height: 70px; background-position: -100px -280px; }
#btnLeft:hover, #btnRight:hover, #btnUp:hover, #btnDown:hover { opacity: .6; }
#btnLeft.active, #btnRight.active, #btnUp.active, #btnDown.active { opacity: .8; }
body.conLogin #touch_ui, body.conLogin #TouchShot, body.espectador #touch_ui, body.espectador #TouchShot { display: none !important; }
#escena { touch-action: none; }
.HandCursor, .HandCursor #escena { cursor: url(/static/images/hand.cur), move !important; }

/* ── Botones del lobby y ventanas del juego (style.css: .LobbyButton, .AlertBox, .buttonOK…) ── */
/* Solo "My Info", abajo, a la derecha del HUD (escala con la vista del juego) */
#lobbyBtns { position: fixed; bottom: calc(12px * var(--gs, 1)); left: calc(50% + 250px * var(--gs, 1)); width: 62px; height: 62px;
  transform: scale(var(--gs, 1)); transform-origin: left bottom; z-index: 20; transition: opacity .4s; }
.LobbyButton { position: absolute; top: 0; width: 62px; height: 62px;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) no-repeat; background-size: 1000px 1500px; }
.light_button:hover { filter: brightness(1.3); cursor: pointer; }
.light_button:active { transform: translateY(1px); filter: brightness(1.3); }
#buttonMyInfo { left: 0; background-position: -187.5px 0; }
/* Desconectar = botón LOGOUT del juego (.HD #BrokerLogout, stuff_HD −682.5 0, 55×51), a la IZQUIERDA del HUD
   (antes tenía la imagen de Worlds, #buttonChannels −627 0) */
#buttonChannels { position: fixed; top: auto; bottom: calc(17px * var(--gs, 1)); left: calc(50% - 305px * var(--gs, 1)); width: 55px; height: 51px;
  z-index: 20; transform: scale(var(--gs, 1)); transform-origin: left bottom; transition: opacity .4s; background-position: -682.5px 0; }
/* Options del lobby (stuff_HD −571.5 0, 55×51), a la derecha de My Info */
#buttonOptions { position: fixed; top: auto; bottom: calc(17px * var(--gs, 1)); left: calc(50% + 318px * var(--gs, 1)); width: 55px; height: 51px;
  z-index: 20; transform: scale(var(--gs, 1)); transform-origin: left bottom; transition: opacity .4s; background-position: -571.5px 0; }
/* Ventana de opciones: volumen de música igual que #OptionsBG / #slidersection2 del juego */
#dialog_options #OptionsBG { position: absolute; top: 12px; left: 14px; width: 250px; height: 60px; }
.OptionTitle1 { color: #ffc65a; }
.GOption2 { width: 70px; white-space: nowrap; display: inline-block; font-size: 12px; }
.slidecontainer { width: 100%; }
#slidersection2 { position: absolute; left: 68px; top: 2px; width: 160px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 9px; outline: 0; border: 1px solid #aaa; border-radius: 4px;
  background-color: #fff; box-shadow: inset 0 0 3px 1px #888; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; cursor: pointer; border: 1px solid #333;
  border-radius: 10px; background-color: #fff; box-shadow: inset 0 0 3px 3px #888; }
.slider::-moz-range-thumb { width: 25px; height: 25px; cursor: pointer; border: 1px solid #333; border-radius: 15px; background-color: #fff; box-shadow: inset 0 0 3px 3px #888; }
.volume { display: inline-block; width: 25px; height: 25px; right: -32px; top: -7px; position: absolute; cursor: pointer;
  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-position: 0 -75px; }
.tooltip { z-index: 5; position: absolute; display: none; top: -25px; width: 35px; height: 20px; color: #fff; text-align: center;
  font: 10pt Tahoma, Arial, sans-serif; border-radius: 3px; background: #000; line-height: 20px; margin-left: -8px; }
#OptionsOK { right: 10px; bottom: 7px; }
body.conLogin #buttonOptions, body.espectador #buttonOptions,
body.conLogin #buttonChannels, body.espectador #buttonChannels,
body.conLogin #lobbyBtns, body.espectador #lobbyBtns { opacity: 0; pointer-events: none; }
#WindowBG { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: none; z-index: 998; }
.AlertBox { position: fixed; left: 50%; top: 45%; width: 300px; height: 176px; z-index: 999; display: none;
  transform: translate(-50%, -50%) scale(var(--gs, 1));
  background: url(/static/images/themes/classicHD/stuff_HD.webp) -680.5px -318px / 1000px 1500px no-repeat;
  box-shadow: 3px 3px 10px 0 #000, inset -1px -1px 0 0 #000; font-family: Emoji, Verdana, sans-serif; }
.AlertBox.ver { display: block; animation: alertIn .25s ease-out; }
@keyframes alertIn { from { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--gs, 1) * .6)); } }
.AlertBoxTitle { position: absolute; left: 23px; top: 8px; font-size: 16px; color: #fff;
  text-shadow: #000 -2px 0 4px, #000 0 2px 4px, #000 2px 0 4px, #000 0 -2px 4px, #000 -1px 0 1px, #000 0 1px 1px, #000 1px 0 1px, #000 0 -1px 1px; }
.AlertBoxContent { position: absolute; left: 0; top: 45px; padding: 0 20px; font-size: 12px; color: #fff; z-index: 2; }
.blackShadow { text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000; }
.buttonOK, .buttonCancel { position: absolute; width: 90px; height: 29.5px; cursor: pointer; z-index: 3;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) no-repeat; background-size: 1000px 1500px; }
.buttonOK { background-position: -851px -92.5px; }
.buttonCancel { background-position: -851px -122.5px; }
.buttonOK:hover { filter: brightness(1.25); }
.buttonCancel:hover { filter: brightness(1.4); }
/* posiciones del tema HD del juego (style.css ~551/561): dentro del cuadro */
#DragonDialogOK, #dialog_change_name_ok { right: 10px; bottom: 7px; }
#DragonDialogCancel, #dialog_change_name_cancel { left: 10px; bottom: 7px; }
.buttonOK:active { transform: scale(0.96); }
.buttonCancel:active { transform: scale(0.94); }
#changeNameDiv { width: 265px; }
#display_name { width: 110px; font: 12px Verdana, sans-serif; }
#NameChangeLittle { font-size: 8px; }

/* ── Cuenta regresiva (lugar del #wind_meter2, arriba al centro; dígitos verdes HD del juego:
   getDigitPos → x 742 + n·41, y 2720, 40×42 → a la mitad en CSS 1000×1500) ── */
#cuentaRegresiva { position: fixed; top: calc(8px * var(--gs, 1)); left: 50%; transform: translateX(-50%) scale(var(--gs, 1));
  transform-origin: center top; z-index: 1000; display: none; align-items: flex-end; gap: 1px; pointer-events: none;
  padding: 3px 8px 2px; border-radius: 14px; background: rgba(0, 0, 0, .28); }
#cuentaRegresiva.ver { display: flex; }
#cuentaRegresiva .dg { width: 20px; height: 21px;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) no-repeat; background-size: 1000px 1500px; }
#cuentaRegresiva .un { margin: 0 5px 1px 1px; font: 700 11px Verdana, sans-serif; color: #fff; text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000; }
#cuentaRegresiva .un:last-child { margin-right: 0; }

/* ── Chat del juego real (style.css: #gameChat, .zotata-chat-*, #gameInput) ─ */
#gameChat { position: fixed; left: 10px; top: 10px; width: 600px; height: 111px; transform: scale(var(--gs, 1)); transform-origin: 0 0;
  color: #acf2f6; font: 12px Emoji, Verdana, sans-serif; transition: opacity .4s; }
#gameChat .viewport { width: 576px; max-width: 100%; height: 111px; overflow-y: auto; overflow-x: hidden; position: relative;
  direction: rtl; scrollbar-width: thin; scrollbar-color: rgba(172, 242, 246, .5) transparent; }
#gameChat .overview { padding: 2px 0 0 2px; margin: 0 auto 0 0; word-wrap: break-word; width: 364px; max-width: calc(100% - 4px); direction: ltr; }
.zotata-chat-line { min-height: 14px; margin-top: -2px; line-height: 12px; overflow: hidden; }
.zotata-chat-line:hover { background: rgba(127, 255, 255, .15); }
.zotata-chat-line.wordBreak { word-break: break-all; }
.zotata-chat-type0 { color: #fff; text-shadow: #000 -1px 0 2px, #000 0 1px 2px, #000 1px 0 2px, #000 0 -1px 2px; }
.zotata-chat-type4 { color: #fff; text-shadow: #000 -1px 0 2px, #000 0 1px 2px, #000 1px 0 2px, #000 0 -1px 2px; }
.zotata-chat-type5 { color: #debdef; text-shadow: #8c4ab5 -1px 0 2px, #8c4ab5 0 1px 2px, #8c4ab5 1px 0 2px, #8c4ab5 0 -1px 2px; }
.zotata-chat-type6 { color: #ffde9c; text-shadow: #de4c18 -1px 0 2px, #de4c18 0 1px 2px, #de4c18 1px 0 2px, #de4c18 0 -1px 2px; }
.zotata-chat-icon { float: left; width: 12px; height: 12px; background: url(/static/images/ranks3.png) no-repeat; }
.zotata-chat-icon5 { background-position: -52px -710px; }
.zotata-chat-icon6 { background-position: -65px -710px; }
.GuildName { color: #f7a539; display: inline-block; }
#gameInput { position: absolute; left: 120px; bottom: 93px; width: 455px; height: 18px; box-sizing: border-box; padding: 0 3px;
  color: #acf2f6; background: transparent; border: 1px solid transparent; font: 12px Emoji, Verdana, sans-serif; outline: none;
  pointer-events: auto; transform-origin: center bottom; }
#gameInput:hover { background-color: rgba(0, 0, 255, .1); }
#gameInput:focus { border-color: orange; background-color: #001839; }
#estado { left: auto; right: 10px; }
#ayuda { bottom: calc(118px * var(--gs, 1)); }
body.conLogin #gameChat { opacity: 0; pointer-events: none; }

/* ── Login encima del mapa en vivo (desenfocado) ───────────────────────── */
body.conLogin #escena { filter: blur(6px) brightness(.85) saturate(1.05); cursor: default; }
body.conLogin #ayuda, body.conLogin #gameHud, body.espectador #gameHud { opacity: 0; pointer-events: none; }
#login {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; transition: opacity .5s ease, transform .5s ease;
}
body:not(.conLogin) #login { opacity: 0; transform: scale(.96); pointer-events: none; }
.lgMarco {
  position: relative; display: flex; gap: 6px; padding: 6px;
  background: rgba(38, 44, 56, .92); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  width: 700px; max-width: 100%;
}
.lgCol { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.lgPanel {
  margin: 0; padding: 14px 32px 16px; border-radius: 10px; color: #fff; box-sizing: border-box;
  background: linear-gradient(160deg, #10e0f6 0%, #0aa3e2 45%, #0b6fc4 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 8px rgba(0, 40, 90, .35);
}
.lgCrearPanel { flex: 1; min-width: 0; background: linear-gradient(160deg, #0f8fe0 0%, #0a64c6 55%, #0b3fa0 100%); }
.lgFbPanel { display: flex; align-items: center; justify-content: center; padding: 22px 20px;
  background: linear-gradient(160deg, #0a8fd8 0%, #0a64c6 100%); }
.lgPanel h2 {
  margin: 4px 0 18px; text-align: center; font: 700 24px/1.1 "Trebuchet MS", Arial, sans-serif;
  text-shadow: 0 2px 0 #045, 0 0 6px rgba(0, 30, 60, .6), 1px 1px 0 #045, -1px -1px 0 #045;
}
.lgPanel input {
  display: block; width: 100%; box-sizing: border-box; height: 34px; margin: 0 0 10px; padding: 0 10px;
  border: 2px solid #d7dde3; border-radius: 4px; font-size: 18px; color: #333; background: #fff; outline: none;
}
.lgPanel input:focus { border-color: #111; box-shadow: 0 0 0 1px #fff; }
.lgPanel input::placeholder { color: #999; }
.lgFila { display: flex; gap: 10px; align-items: center; }
.lgFila input { flex: 1; margin-bottom: 0; }
.lgBtnAzul {
  flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 4px; cursor: pointer;
  font: 700 13px Arial, sans-serif; color: #fff; background: linear-gradient(#26a6f0, #0a74cf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .3);
}
.lgReset { display: block; margin-top: 12px; text-align: center; color: #ffe36b; font-size: 15px;
  text-decoration: underline; text-shadow: 0 1px 1px #046; }
.lgFb {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 10px; border: 0;
  border-radius: 4px; cursor: pointer; background: #1877f2; color: #fff; font: 700 16px Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.lgFbF { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; color: #1877f2; font: 900 20px/1 Arial, sans-serif; padding-top: 4px; box-sizing: border-box; }
.lgGenero { display: flex; justify-content: center; gap: 10px; margin: 16px 0 12px; }
.lgGenero button {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; cursor: pointer;
  border: 2px solid #2c5e2c; border-radius: 3px; color: #fff; font: 700 14px Arial, sans-serif;
  background: linear-gradient(#6fa35c, #4c7f3d); text-shadow: 0 1px 1px #000; opacity: .75;
}
.lgGenero button.sel { opacity: 1; border-color: #d9ff9e; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.lgCara { display: inline-block; width: 24px; height: 23px; background-repeat: no-repeat; }
.lgCaraM { background-image: url(/static/images/ava/mh00000.png); }
.lgCaraF { background-image: url(/static/images/ava/fh00000.png); }
.lgCrearFila { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.lgCrear {
  margin: 0 0 4px 60px; height: 42px; min-width: 104px; padding: 0 18px; cursor: pointer; border: 0;
  border-radius: 22px; color: #fff; font: 400 20px Arial, sans-serif; text-shadow: 0 1px 1px #000;
  background: linear-gradient(#83c96b, #3f8a2f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 3px rgba(0, 0, 0, .35);
}
.lgCrear:disabled, .lgBtnAzul:disabled { filter: grayscale(.6); cursor: wait; }
.lgPreview { display: flex; flex-direction: column; align-items: center; margin-right: -24px; margin-bottom: -10px; }
.lgPlaca { display: flex; align-items: center; gap: 4px; margin-top: -4px; padding: 1px 4px; font: 15px Arial, sans-serif;
  color: #fff; text-shadow: 0 1px 1px #000; border-top: 3px solid #7fdc55; background: rgba(0, 0, 0, .25); }
.lgPlacaIco { width: 20px; height: 14px; background: linear-gradient(#ffe36b, #c99a13); border: 1px solid #333; }
.lgMsg { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; font: 700 15px Arial, sans-serif;
  color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; min-height: 20px; }
.lgMsg.err { color: #ffb3a8; }
.lgAyudaBtn {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 46px; height: 46px; z-index: 2;
  border-radius: 50%; border: 2px solid #fff; cursor: pointer; color: #fff; font: 700 30px/1 Arial, sans-serif;
  background: radial-gradient(circle at 35% 30%, #9fd6ff, #2a86e0 60%, #1655b0); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 2px #024;
}
.lgAyudaTxt { display: none; position: absolute; left: 50%; top: 28px; transform: translateX(-50%); width: 340px; z-index: 3;
  background: #fff; color: #234; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.lgAyudaTxt.ver { display: block; }

@media (max-width: 640px) {
  .lgMarco { flex-direction: column; }
  .lgPanel { padding: 12px 16px 14px; }
  .lgCrear { margin-left: 0; }
  .lgPreview { margin-right: 0; }
}

/* ── Emoticones y emojis del chat (style.css del juego: .emoticonBtn, .emoticonPicker, .emoticonCell, .emo, .Alt) ──
   Posiciones del juego (#GameEmoticonBtn left 208 bottom 106, #GameEmoticonPicker left 14 bottom 136) menos
   los 170 px en que empieza el recorte del HUD. */
.emoticonBtn { position: absolute; width: 40px; height: 40px; cursor: pointer; transform: scale(.6); pointer-events: auto; }
.emoticonBtn:active { transform: scale(.8); }
#GameEmoticonBtn { left: 38px; bottom: 106px; }
.emoticonPicker { position: absolute; display: none; z-index: 200; border-radius: 15px; background: rgba(0, 30, 50, .85);
  padding: 6px; overflow: hidden; pointer-events: auto; }
#GameEmoticonPicker { left: -156px; bottom: 136px; width: 520px; }
.emoticonCooldownBar { position: absolute; left: 0; top: 0; bottom: 0; display: none; z-index: 0; background: rgba(210, 40, 40, .3); }
.emoticonCell { position: relative; z-index: 1; width: 40px; height: 40px; float: left; margin: 6px; cursor: pointer;
  background: rgba(200, 200, 0, .05); border-radius: 5px; }
.emoticonCell:hover { background: rgba(200, 200, 200, .25); }
.emoticonCell.grayscale { cursor: default; filter: grayscale(100%); }
.emoticonCell.grayscale:hover { background: rgba(200, 200, 0, .05); }
.emoticonRowBreak { clear: both; }
.emoticonName { position: absolute; left: -20px; top: 30px; width: 80px; text-align: center; font: 9px Verdana, sans-serif; color: #ff0; }
.emoIcon { position: absolute; pointer-events: none; }
.Alt { position: absolute; top: 0; left: 0; color: #fff; font: 14px Arial, sans-serif; pointer-events: none; background: #000;
  display: none; text-shadow: none; min-width: 10px; text-align: center; }
.emoticonCell .Alt { font-size: 10px; }
body.altKeys .Alt { display: block; }
.emo { width: 9px; height: 9px; transform: scale(1.3); margin: 0 1px; }

/* ── Menú de clic derecho (style.css del juego: .ContextMenu) ── */
.ContextMenu { position: fixed; background: #f0f0f0 url(/static/images/contextmenu.png) repeat-y; border: 1px solid #979797; min-width: 160px;
  padding: 2px; box-shadow: inset 0 0 0 2px #f5f5f5; z-index: 1999; color: #000; font-family: Verdana, sans-serif; user-select: none; }
.ContextMenuAction { position: relative; border: 1px solid transparent; padding: 3px 3px 3px 30px; font-size: 12px; cursor: pointer; }
.ContextMenuAction:hover { background: linear-gradient(to bottom, rgba(242, 248, 255, .4) 0, rgba(216, 235, 255, .4) 100%);
  border: 1px solid #aecff7; border-radius: 2px; box-shadow: inset 0 0 0 1px #f5f5f5; }
.ContextMenuIcon { position: absolute; left: -2px; top: -1px; width: 30px; text-align: center; font-size: 18px; }
.ContextMenuDefaultAction { font-weight: bold; }
.NoSelectTouch { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ── Solicitud de amistad (style.css del juego: .FriendRequestSmall) ── */
.frRank { display: inline-block; width: 25px; height: 15px; vertical-align: middle; background: no-repeat 0 0 / auto 15px; }
.FriendRequestSmall { font-size: 10px; }
.FriendRequestSmall a { color: #ff0; }

/* ── Panel "Rankings" (style.css del juego: #ranking_panel, .ranking_btn, .rankHD_span15, .Guide, Contact...) ── */
#ranking_panel { position: fixed; left: -330px; top: 0; height: 100%; width: 300px; color: #fff; font: 12px Emoji, Verdana, sans-serif; line-height: 1;
  z-index: 101; background: rgba(0, 0, 0, .4); transition: left .25s ease-in-out; }
#ranking_panel.open { left: 0; }
#ranking_panel table { border-collapse: collapse; border-spacing: 0; }
#ranking_panel td { vertical-align: middle; height: 15px; padding: 1px 3px; white-space: nowrap; overflow: hidden; }
#ranking_title { font-weight: bold; text-align: center; font-size: 13px; }
#ranking_btns { padding-left: 3px; }
.ranking_btn { display: inline-block; background-color: #495d7b; padding: 3px 6px; margin: 3px 0; border-radius: 5px; font-size: 12px; border: 1px solid #000; }
.ranking_btn:hover { background-color: #6b8cc6; cursor: pointer; }
.ranking_btn:active { border: 1px solid #fff; background-color: #8dc; }
.ranking_btn.selected { border: 1px solid #fff; background-color: lime; }
.ranking_me { background-color: #789; }
.ranking_num { width: 1px; text-align: right; }
.ranking_rank { width: 1px; }
.ranking_name { max-width: 100px; }
.ranking_gp { width: 1px; text-align: right; }
#ranking_data2 { clear: both; height: calc(100% - 89px); overflow: auto; direction: rtl; text-align: left; }
#ranking_data { direction: ltr; text-align: left; }
#ranking_home { direction: ltr; text-align: left; height: 100%; }
#ranking_data table { width: 100%; }
#ranking_panel_open { font: 11px/8px Emoji, Verdana, sans-serif; color: lightgray; position: fixed; left: 0; top: 50%; margin-top: -36px; width: 72px; height: 10px;
  background: rgba(100, 100, 100, .5); text-align: center; padding-top: 3px; z-index: 102; transform: rotate(90deg); transform-origin: left bottom;
  border-top-right-radius: 20px; border-top-left-radius: 20px; transition: left .25s ease-in-out; cursor: pointer; }
#ranking_panel_open.open { left: 300px; }
@media (min-height: 700px) and (min-width: 1100px) {
  #ranking_panel_open { font-size: 13px; line-height: 11px; margin-top: -50px; width: 100px; height: 13px; padding-top: 2px; }
}
#ranking_panel_open:active { margin-left: 0; filter: brightness(1.6); }
#ranking_panel_open .Alt { transform: rotate(-90deg); }
#ranking_panel .Nav { text-align: center; }
#rankingOffset { width: 39px; }
#ranking_panel a:link { color: orange; text-decoration: none; }
#ranking_panel a:visited { color: #f85; }
.Center, .center { text-align: center; }
.Bold { font-weight: bold; }
.blackShadow2 { text-shadow: -2px 0 4px #000, 0 2px 4px #000, 2px 0 4px #000, 0 -2px 4px #000, 0 -1px 4px #000, 1px 0 4px #000; }
.RankingVideoBtn { height: 15px; vertical-align: bottom; cursor: pointer; }
.RankingVideoBtn.FB { filter: hue-rotate(220deg) brightness(1.5); }
#TOSLinks { text-align: left; margin-left: 10px; margin-top: 20px; margin-bottom: 40px; }
.rankHD_span15 { display: inline-block; background-size: cover; width: 25px; height: 15px; }
.rankHD0 { background-image: url(/static/images/ranks/0.png); }
.rankHD1 { background-image: url(/static/images/ranks/1.png); }
.rankHD2 { background-image: url(/static/images/ranks/2.png); }
.rankHD3 { background-image: url(/static/images/ranks/3.png); }
.rankHD4 { background-image: url(/static/images/ranks/4.png); }
.rankHD5 { background-image: url(/static/images/ranks/5.png); }
.rankHD6 { background-image: url(/static/images/ranks/6.png); }
.rankHD7 { background-image: url(/static/images/ranks/7.png); }
.rankHD8 { background-image: url(/static/images/ranks/8.png); }
.rankHD9 { background-image: url(/static/images/ranks/9.png); }
.rankHD10 { background-image: url(/static/images/ranks/10.png); }
.rankHD11 { background-image: url(/static/images/ranks/11.png); }
.rankHD12 { background-image: url(/static/images/ranks/12.png); }
.rankHD13 { background-image: url(/static/images/ranks/13.png); }
.rankHD14 { background-image: url(/static/images/ranks/14.png); }
.rankHD15 { background-image: url(/static/images/ranks/15.png); }
.rankHD16 { background-image: url(/static/images/ranks/16.png); }
.rankHD17 { background-image: url(/static/images/ranks/17.png); }
.rankHD18 { background-image: url(/static/images/ranks/18.png); }
.rankHD19 { background-image: url(/static/images/ranks/19.png); }
.rankHD20 { background-image: url(/static/images/ranks/20.png); }
.rankHD21 { background-image: url(/static/images/ranks/21.png); }
.rankHD22 { background-image: url(/static/images/ranks/22.png?2); }
.rankHD23 { background-image: url(/static/images/ranks/23.png?2); }
.rankHD24 { background-image: url(/static/images/ranks/24.png?2); }
.rankHD25 { background-image: url(/static/images/ranks/25.png?2); }
.rankHD26 { background-image: url(/static/images/ranks/26.png?2); }
.rankHD27 { background-image: url(/static/images/ranks/27.png?2); }
.rankHD28 { background-image: url(/static/images/ranks/28.png?2); }
.rankHD29 { background-image: url(/static/images/ranks/29.png?2); }
.rankHD30 { background-image: url(/static/images/ranks/30.png?2); }
.rankHD31 { background-image: url(/static/images/ranks/31.png?2); }
.rankHD32 { background-image: url(/static/images/ranks/32.png); }
.rankHD33 { background-image: url(/static/images/ranks/33.png); }
#btnWeeklyRank21 { font-size: 17px; }
.Guide { background: url(/static/images/help.svg) no-repeat; background-size: 50px 50px; width: 50px; height: 50px; }
#GuideMain { display: inline-block; padding-left: 60px; margin-left: 15px; width: 192px; line-height: 50px; font-size: 22px; text-align: left; margin-top: 20px; }
#GuideRanks { display: inline-block; padding-left: 60px; margin-left: 15px; width: 192px; line-height: 50px; font-size: 20px; }
.ContactTitle { margin-top: 8px; color: lightyellow; font-weight: bold; text-align: center; font-size: 18px; border-bottom: 1px solid #aaa; }
.ContactName { margin-top: 8px; color: #ff0; font-weight: bold; font-size: 16px; text-align: center; }
.ContactLang { color: #fff; font-weight: normal; font-style: italic; font-size: 11px; text-align: center; }
.ContactFB { text-align: center; }
.ContactFB a { padding: 5px; }
.fbfan { border: 0; overflow: hidden; height: 70px; }
#gameChat { transition: left .25s ease-in-out, opacity .4s; }
body.rankOpen #gameChat { left: 310px; }

/* "Crear cuenta cerrado" (/admin/comingsoon): se oculta el panel "Nueva Cuenta" y queda solo Ingresar */
body.regCerrado .lgCrearPanel, body.regCerrado .lgFbPanel { display: none !important; }
body.regCerrado .lgMarco { width: auto; }

/* "Fondo del pre registro" DESACTIVADO (/admin/comingsoon): en el login se quita el mapa en movimiento y
   todo lo de fondo (cuenta regresiva, Rankings, chat); queda solo el cuadro de login sobre negro */
body.fondoOculto.conLogin #escena, body.fondoOculto.conLogin #cuentaRegresiva, body.fondoOculto.conLogin #ranking_panel,
body.fondoOculto.conLogin #ranking_panel_open, body.fondoOculto.conLogin #gameChat { visibility: hidden; }

/* ── Cambiar de mobile (SOLO pre registro): botón Mobile del lobby + ventana "Select Mobile" de la sala
   (style.css del juego: .HD .buttonMobile, #roomMobileSelect, .mobileSelectBtn, .mobileName, .currentMobileMark) ── */
#lobbyButtonMobile { position: fixed; bottom: calc(80px * var(--gs, 1)); left: calc(50% + 263px * var(--gs, 1)); width: 35px; height: 36px;
  background: url(/static/images/themes/classicHD/stuff_HD.webp) -752px -524px / 1000px 1500px no-repeat; transform: scale(var(--gs, 1));
  transform-origin: left bottom; z-index: 20; transition: opacity .4s; border-radius: 8px; }
body.conLogin #lobbyButtonMobile, body.espectador #lobbyButtonMobile { opacity: 0; pointer-events: none; }
.glow_button { cursor: pointer; }
.glow_button:hover { box-shadow: 0 0 10px 10px #ff0 !important; }
.glow_button:active { box-shadow: 0 0 10px 10px #9f9 !important; }
#roomMobileSelect { position: fixed; left: 50%; top: 50%; width: 500px; padding: 12px 0 58px; display: none; z-index: 150; border-radius: 15px;
  background: rgba(0, 30, 50, .75); transform: translate(-50%, -50%) scale(var(--gs, 1)); font-family: Emoji, Verdana, sans-serif; }
#roomMobileSelect.ver { display: block; }
body.conLogin #roomMobileSelect { display: none !important; }
#roomMobileSelect .Spacer { margin-bottom: 12px; }
#mobileSelectList { overflow: hidden; }
#roomMobileSelectCancel { right: 10px; bottom: 16px; }
.mobileSelectBtn { position: relative; width: 70px; height: 70px; background: rgba(0, 70, 30, .75); border: 3px solid #0f9; border-radius: 15px;
  float: left; margin: 0 12px 24px 12px; }
.mobileSelectBtn:hover { background: rgba(70, 70, 0, .75); }
.mobileSelectBtn:active { background: rgba(40, 120, 0, .75); }
.mobileSelectBtn .currentMobileMark { display: none; }
.mobileSelectBtn.mobileSelectCurrent { border-color: #ffd700; box-shadow: 0 0 8px #ffd700; }
.mobileSelectBtn.mobileSelectCurrent .currentMobileMark { display: block; position: absolute; top: 3px; right: 3px; z-index: 5; width: 20px; height: 20px;
  line-height: 20px; text-align: center; border-radius: 50%; color: #000; font-weight: bold; font-size: 13px; background: #ffd700; }
.mobileName { position: absolute; left: -15px; top: 73px; width: 100px; text-align: center; font-size: 16px; color: #ff0; z-index: 4; pointer-events: none; }
.mobileSelectCv { position: absolute; left: -35px; top: -35px; pointer-events: none; }

/* ── Cuadro "Links" (SOLO GM): esquina superior derecha, se desliza con su pestaña ── */
#gmLinks { position: fixed; top: 60px; right: -320px; width: 320px; height: 55%; z-index: 120; display: none; transition: right .25s ease-in-out;
  font: 12px Emoji, Verdana, sans-serif; color: #fff; }
body.esGm:not(.conLogin) #gmLinks { display: block; }
#gmLinks.open { right: 0; }
#gmLinksTab { position: absolute; left: -26px; top: 0; width: 26px; padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg);
  text-align: center; background: rgba(100, 100, 100, .5); color: lightgray; border-radius: 0 10px 10px 0; cursor: pointer; font-size: 11px; }
#gmLinksTab:hover { filter: brightness(1.4); }
#gmLinksCount { color: #ff0; font-weight: bold; }
#gmLinksBody { height: 100%; box-sizing: border-box; background: rgba(0, 0, 0, .75); border-radius: 0 0 0 10px; padding: 6px; display: flex; flex-direction: column; }
#gmLinksTitle { font-weight: bold; text-align: center; font-size: 13px; margin-bottom: 6px; color: #ff0; }
#gmLinksList { flex: 1; overflow: auto; }
.gmLinksEmpty { color: #aaa; text-align: center; margin-top: 20px; }
.gmLinkRow { background: rgba(73, 93, 123, .55); border: 1px solid #000; border-radius: 6px; padding: 5px; margin-bottom: 6px; }
.gmLinkTime { color: #aaa; }
.gmLinkName { color: #f7a539; }
.gmLinkText { margin: 4px 0; word-break: break-all; user-select: text; }
.gmLinkBtns button { font: 11px Verdana, sans-serif; margin-right: 4px; padding: 2px 8px; border-radius: 4px; border: 1px solid #000; background: #495d7b; color: #fff; cursor: pointer; }
.gmLinkBtns button:hover { background: #6b8cc6; }
.gmLinkBtns button.gmBan { background: #a22; }
.gmLinkBtns button.gmBan:hover { background: #d33; }

/* ── CELULAR VERTICAL (Cesar 2026-09-30): la interfaz usa la misma escala que el mapa (--gs = ancho/480,
   ver resize() y updateCam en prereg.js). El HUD (480) ocupa todo el ancho; los botones que en el juego van
   a los costados del HUD no entran, así que suben encima de la barra del chat. ── */
html.vertical #gameInput { left: 85px; width: 390px; }
html.vertical #GameEmoticonPicker { left: 0; width: 468px; }
html.vertical #gameChat { width: calc((100vw - 20px) / var(--gs, 1)); }
html.vertical #buttonChannels { left: 6px; bottom: calc(120px * var(--gs, 1)); }
html.vertical #buttonOptions { left: calc(100% - 6px - 55px * var(--gs, 1)); bottom: calc(120px * var(--gs, 1)); }
html.vertical #lobbyBtns { left: calc(100% - 12px - 117px * var(--gs, 1)); bottom: calc(115px * var(--gs, 1)); }
html.vertical #lobbyButtonMobile { left: calc(100% - 18px - 152px * var(--gs, 1)); bottom: calc(128px * var(--gs, 1)); }
html.vertical #ayuda { bottom: calc(185px * var(--gs, 1)); }
html.vertical #roomMobileSelect { transform: translate(-50%, -50%) scale(calc(var(--gs, 1) * .92)); }
html.vertical #gameChat { top: calc(46px * var(--gs, 1)); }


/* ── PREMIOS DEL PRE REGISTRO: botón "Ser Fundador" en el chat = .yellowBtnMini del juego
   (style.css; el mismo botón que pinta cliente.js para "[/get_room N]" al proteger una sala) ── */
.yellowBtnMini { display: inline-block; padding: 0 10px; font-size: 10px; font-weight: bold; line-height: 10px;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5); cursor: pointer; border-radius: 4px; background-color: #fd9a0f;
  background-repeat: repeat-x; background-image: linear-gradient(to bottom,#fee94f,#fd9a0f); border: 1px solid black;
  font-family: Arial,sans-serif; text-decoration: none; color: #333; }
.yellowBtnMini:hover { background-color: #fd9512; background-repeat: repeat-x;
  background-image: linear-gradient(to bottom,#fedc4d,#d80); border: 1px solid yellow; }