/* LOW web: el HUD es IGUAL al del juego de PC LOW (cliente libGDX, a.tO + piel piedra y oro). Todo se mide en
   "unidades" de la escena del juego: la PC usa una ExtendViewport de 1440x864 como minimo (480x288 x3), asi que
   1 unidad = min(ancho/1440, alto/864) px. js/hud.js pone --u (px por unidad) al cambiar de tamaño. Las piezas salen
   de la piel del jar (img/hud/hd = skinHD al doble, img/hud/n = Normal) y las letras son las del juego (js/letra.js). */
:root {
  --u: 1px;
  --Q: calc(80 * var(--u));                   /* ranura de atajo: 80 x 80 unidades */
  --P: calc(81 * var(--u));                   /* columna de atajos (1 de margen) */
  --M: calc(63 * var(--u));                   /* franja del menu de arriba */
  --oro: #e3c278; --oro-claro: #f6e3a9; --claro: #f3eee2; --panel: rgba(10, 12, 18, .84);
  --azul1: #2f7ee6; --azul2: #1857b8; --azul-borde: #0c2f6b;
  --letra: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --izq: max(0px, env(safe-area-inset-left)); --der: max(0px, env(safe-area-inset-right));
  --contorno: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07080b; overflow: hidden; touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  font-family: var(--letra); color: var(--claro); }
canvas#mundo { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
canvas.tx { display: block; pointer-events: none; width: 0; height: 0; }   /* sin texto todavia: no ocupa */

/* ---------- piezas de la piel (9 partes). HD: la pieza mide el doble y se pinta a la mitad ---------- */
.p-ranura { border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/ranura.webp) 56 58 56 56 fill / calc(28 * var(--u)) calc(29 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) stretch; background: none; }
.p-boton { border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/boton.webp) 42 46 62 46 fill / calc(10.5 * var(--u)) calc(11.5 * var(--u)) calc(15.5 * var(--u)) calc(11.5 * var(--u)) stretch; background: none; }
body.normal .p-ranura { border-image-source: url(../img/hud/n/ranura.webp); border-image-slice: 28 29 28 28 fill; }
body.normal .p-boton { border-image-source: url(../img/hud/n/boton.webp); border-image-slice: 21 23 31 23 fill; }

/* ---------- arriba a la izquierda: vida, mana, exp, fps (a.tO$28: 340 x 90, ui_frame2 al 75 %) ---------- */
#estado { position: fixed; left: var(--izq); top: 0; width: calc(340 * var(--u)); height: calc(90 * var(--u)); pointer-events: none; }
#estado::before { content: ""; position: absolute; inset: 0; opacity: .75; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/marco.webp) 4 52 0 0 fill / calc(1 * var(--u)) calc(13 * var(--u)) 0 0 stretch; }
body.normal #estado::before { border-image-source: url(../img/hud/n/marco.webp); border-image-slice: 2 26 0 0 fill; }
.barra { position: absolute; left: calc(1 * var(--u)); height: calc(20 * var(--u)); background: #09101a;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #0a161f, inset 0 calc(2 * var(--u)) 0 #0e2e3c; }
#b-vida { top: calc(6 * var(--u)); width: calc(332 * var(--u)); }
#b-mana { top: calc(27 * var(--u)); width: calc(327 * var(--u)); }
#b-exp { top: calc(48 * var(--u)); width: calc(322 * var(--u)); }
.barra > i { position: absolute; left: calc(2 * var(--u)); top: calc(2.5 * var(--u)); bottom: calc(2.5 * var(--u)); width: calc(100% - 4 * var(--u)); transform-origin: left; }
#b-vida > i { background: linear-gradient(rgb(166, 4, 6), rgb(102, 4, 6)); }
#b-mana > i { background: linear-gradient(rgb(166, 4, 175), rgb(104, 4, 131)); }
#b-exp > i { background: linear-gradient(rgb(255, 233, 166), rgb(230, 184, 74) 55%, rgb(178, 132, 35)); }
#b-exp > b { position: absolute; inset: calc(2 * var(--u));
  background: linear-gradient(90deg, transparent calc(20% - 1px), #141b27 calc(20% - 1px) 20%, transparent 20% calc(40% - 1px), #141b27 calc(40% - 1px) 40%,
    transparent 40% calc(60% - 1px), #141b27 calc(60% - 1px) 60%, transparent 60% calc(80% - 1px), #141b27 calc(80% - 1px) 80%, transparent 80%); }
#estado .tx { position: absolute; opacity: .75; }
#t-vida, #t-mana, #t-exp { right: calc(3 * var(--u)); top: calc(2.8 * var(--u)); }
#t-gph { left: calc(3 * var(--u)); top: calc(2.8 * var(--u)); }
#fila-est { position: absolute; left: 0; top: calc(68 * var(--u)); width: calc(333 * var(--u)); height: calc(20 * var(--u)); }
#estado #t-fps { right: calc(5 * var(--u)); top: calc(3 * var(--u)); }
#buffs { position: absolute; left: 0; top: calc(-1 * var(--u)); display: flex; gap: calc(5 * var(--u)); }
#buffs i { position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); background: center / contain no-repeat; }
#buffs i.poco { filter: sepia(1) saturate(4) hue-rotate(5deg); }
#buffs i span { display: none; }
/* debajo: nivel, mundo y fecha; rastreador de tareas; bendicion */
#info { position: fixed; left: calc(var(--izq) + 91 * var(--u)); top: calc(89 * var(--u)); pointer-events: none; }
#rastreo { margin-top: calc(2 * var(--u)); }
#info .tx { opacity: .65; }
#t-nivel { height: calc(17 * var(--u)); }
#rastreo > div { position: relative; height: calc(21 * var(--u)); padding-left: calc(20 * var(--u)); }
#rastreo > div > i { position: absolute; left: 0; top: 0; width: calc(20 * var(--u)); height: calc(20 * var(--u)); background: center / contain no-repeat; opacity: .65; }
#rastreo > div.listo .tx { animation: parpadeo .7s steps(2) infinite; }
#bendicion { position: fixed; left: calc(var(--izq) + 86 * var(--u)); top: calc(157 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u));
  background: center / contain no-repeat; pointer-events: none; }
#muertes { margin-top: calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
#oro-hora { position: fixed; left: 50%; top: calc(70 * var(--u)); transform: translateX(-50%); pointer-events: none; }

/* ---------- arriba a la derecha: menu (2 franjas azul marino frame-half-top) y misiones ---------- */
#menu-arriba { position: fixed; top: 0; right: var(--der); display: flex; }
.franja { position: relative; display: flex; gap: calc(5 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)) 0; height: calc(63 * var(--u));
  border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/franja.webp) 4 68 58 62 fill / calc(2 * var(--u)) calc(34 * var(--u)) calc(29 * var(--u)) calc(31 * var(--u)) stretch; }
body.normal .franja { border-image-source: url(../img/hud/n/franja.webp); border-image-slice: 2 34 29 31 fill; }
.m { position: relative; width: calc(60 * var(--u)); height: calc(60 * var(--u)); padding: 0; flex: none; }
.m i { position: absolute; left: calc(3 * var(--u)); top: calc(7 * var(--u)); width: calc(53 * var(--u)); height: calc(43 * var(--u));
  background: center / 100% 100% no-repeat; pointer-events: none; }
.m:hover { filter: brightness(1.11); }
.m:active, .m.apretado { filter: brightness(.78); }
.m:active i, .m.apretado i { transform: translateY(calc(1 * var(--u))); }
.m.encendido { filter: sepia(.55) saturate(2.2) hue-rotate(5deg) brightness(.95); }   /* minimapa / lista abiertos (ue.n: amarillo) */
#misiones { position: fixed; right: calc(var(--der) + 101 * var(--u)); top: calc(88 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
#misiones > div { height: calc(17 * var(--u)); display: flex; justify-content: flex-end; }
#misiones .tx { opacity: .65; }
#misiones > div.lista { pointer-events: auto; cursor: pointer; }
#misiones > div.lista .tx { opacity: 1; animation: parpadeo 1s steps(2) infinite; }

/* ---------- columnas de atajos (ItemSpellImageTextButton 80 x 80 con slot-hud) ---------- */
.columna { position: fixed; bottom: 0; width: calc(80 * var(--u)); display: flex; flex-direction: column; }
#col-izq { left: calc(var(--izq) + 1 * var(--u)); }
#col-der { right: calc(var(--der) + 1 * var(--u)); }
.atajo, .celda { position: relative; width: calc(80 * var(--u)); height: calc(80 * var(--u)); padding: 0; margin: 0; color: #fff; display: block; flex: none; }
.atajo .ic, .celda .ic { position: absolute; left: calc(18 * var(--u)); top: calc(12.5 * var(--u)); width: calc(42 * var(--u)); height: calc(42 * var(--u));
  background: center / contain no-repeat; pointer-events: none; }
.atajo.obj .ic { left: calc(23 * var(--u)); top: calc(17.5 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.atajo .n, .celda .n { position: absolute; right: calc(8 * var(--u)); bottom: calc(21 * var(--u)); }
.atajo .arriba { position: absolute; right: calc(8 * var(--u)); top: calc(8 * var(--u)); }
.atajo.elegido, .celda.sobre, .celda.activa { filter: brightness(1.35) sepia(.35) saturate(1.6); }
.atajo:active { filter: brightness(.85); }
.celda .nom { position: absolute; left: 0; right: 0; bottom: calc(22 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.celda.apagada { filter: grayscale(.9) brightness(.7); }
.chicos { position: relative; height: calc(45 * var(--u)); flex: none; }
.chico { position: absolute; top: calc(3 * var(--u)); width: calc(39 * var(--u)); height: calc(39 * var(--u)); padding: 0; }
#b-chico { left: 0; }
#b-candado { left: calc(40 * var(--u)); }
.chico i { position: absolute; left: calc(3 * var(--u)); top: calc(7 * var(--u)); width: calc(32 * var(--u)); height: calc(22 * var(--u)); background: center / contain no-repeat; pointer-events: none; }
#b-candado i { background-size: 100% 100%; }
.chico.bloqueado { filter: sepia(1) saturate(5) hue-rotate(-40deg) brightness(.9); }
.chico.caza { filter: sepia(1) saturate(4) hue-rotate(-5deg); }
.chico.sin i { filter: grayscale(1) brightness(.6); }
#b-chico.oculto { visibility: hidden; }

/* selector de skills / objetos (deslizar desde un atajo, como a.rY del cliente) */
#selector { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#selector .col, #selector .contenido { position: absolute; display: grid; gap: 0; pointer-events: auto; }
#selector .contenido { grid-template-columns: repeat(7, var(--Q)); }
#selector .col .celda { width: var(--Q); }

/* ---------- joystick (solo celular) ---------- */
#joy { position: fixed; left: calc(var(--izq) + var(--P) + clamp(30px, 6vw, 80px)); bottom: clamp(18px, 6vh, 50px); width: clamp(110px, 33vh, 200px); height: clamp(110px, 33vh, 200px);
  border-radius: 50%; touch-action: none; opacity: .38; transition: opacity .2s; }
#joy::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
#joy::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 5px solid transparent; border-bottom-color: #3fd4e8; border-left-color: rgba(63,212,232,.5); transform: rotate(-20deg); }
#joy i { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #e8eaee 60%, #c9ccd3); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
#joy.activo { opacity: .95; }
body.pc #joy { display: none; }

/* boton Chat (TextButton 100 x 50 con button-large, mesa al 90 %) */
#b-chat { position: fixed; right: calc(var(--der) + 90 * var(--u)); bottom: 0; width: calc(100 * var(--u)); height: calc(50 * var(--u)); padding: 0; opacity: .9;
  display: flex; align-items: center; justify-content: center; }
#b-chat .tx { margin-top: calc(-6 * var(--u)); }
#b-chat:active { filter: brightness(.78); }
#linea-estado { position: fixed; left: 50%; bottom: calc(56 * var(--u)); transform: translateX(-50%); pointer-events: none; transition: opacity .6s; }
#aviso-grande { position: fixed; left: 50%; top: 52%; transform: translate(-50%, 0); font: 700 clamp(11px, 3.4vh, 20px)/1.25 var(--letra); color: #fff3b0; text-shadow: var(--contorno);
  pointer-events: none; text-align: center; max-width: 70vw; transition: opacity .5s; }
#toque { position: fixed; border: 2px solid #ffe08a; border-radius: 4px; pointer-events: none; display: none; }

/* chat */
#chat { position: fixed; left: calc(var(--izq) + var(--P) + 6px); right: calc(var(--der) + var(--P) + 6px); bottom: 2px; height: min(46vh, 260px); z-index: 6;
  background: rgba(8, 10, 16, .9); border: 1px solid #2c3446; border-radius: 6px; display: flex; flex-direction: column; }
#chat-pestanas { display: flex; gap: 2px; padding: 3px; }
#chat-pestanas button { flex: 0 0 auto; background: #1d2433; color: #cfd6e4; border: 1px solid #2c3446; border-radius: 4px; font: 700 12px var(--letra); padding: 4px 8px; }
#chat-pestanas button.activo { background: #2b5fb4; color: #fff; }
#chat-cerrar { margin-left: auto; }
#chat-lineas { flex: 1; overflow-y: auto; padding: 2px 8px; font: 600 13px/1.35 var(--letra); touch-action: pan-y; -webkit-user-select: text; user-select: text; }
#chat-lineas .servidor { color: #ffd76a; } #chat-lineas .privado { color: #8fd7ff; } #chat-lineas .botin { color: #b9f29b; } #chat-lineas b { color: #f0e6c8; }
#chat-form { display: flex; gap: 4px; padding: 4px; }
#chat-form input { flex: 1; min-width: 0; font: 600 15px var(--letra); padding: 6px 8px; border-radius: 4px; border: 1px solid #3a4458; background: #0e121b; color: #fff; -webkit-user-select: text; user-select: text; }
#chat-form button { font: 700 13px var(--letra); border-radius: 4px; border: 1px solid var(--azul-borde); background: #2a6fd4; color: #fff; padding: 0 12px; }

/* ventanas chicas (lista de batalla, botin, avisos de etapa siguiente) */
#ventana { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; min-width: min(360px, 70vw); max-width: 80vw; max-height: 80vh;
  background: rgba(10, 12, 18, .95); border: 1px solid var(--oro); border-radius: 8px; display: flex; flex-direction: column; }
.vent-cab { display: flex; align-items: center; padding: 6px 10px; border-bottom: 1px solid #3a3222; color: var(--oro); }
.vent-cab button { margin-left: auto; background: none; border: 0; color: #ddd; font-size: 18px; }
#vent-cuerpo { padding: 8px 12px; overflow: auto; font: 600 13px/1.5 var(--letra); }
#lista-batalla { position: fixed; right: calc(var(--der) + var(--P) + 8px); top: calc(var(--M) + 14px + clamp(110px, 32vh, 200px)); width: clamp(110px, 32vh, 200px); max-height: calc(100vh - var(--M) - 20px - clamp(110px, 32vh, 200px)); overflow: auto;
  background: rgba(10, 12, 18, .85); border: 1px solid #2c3446; border-radius: 6px; font: 700 12px/1.3 var(--letra); padding: 4px; }
#lista-batalla div { padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; }
#lista-batalla div i { height: 4px; background: #c22; display: block; }
#minimapa { position: fixed; right: calc(var(--der) + var(--P) + 8px); top: calc(var(--M) + 8px); width: clamp(110px, 32vh, 200px); height: clamp(110px, 32vh, 200px);
  border: 2px solid #1a5bb8; border-radius: 6px; background: #000; image-rendering: pixelated; }

/* ---------- pantallas de entrar ---------- */
.pantalla { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; overflow: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(40, 32, 18, .55), rgba(5, 6, 9, .96) 70%), #07080b; }
#muerto { background: rgba(30, 0, 0, .55); }
.caja { width: min(420px, 92vw); padding: 18px 22px; background: rgba(13, 15, 20, .92); border: 1px solid rgba(214, 178, 104, .45); border-top: 2px solid var(--oro);
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
/* marco LOW (el de la caja de entrada del juego de PC, ui/low/caja.png: esquinas de oro sobre piedra): img/marco.webp en
   nueve partes (border-image) y la piedra de fondo en img/piedra.webp */
.caja { border: 24px solid transparent; border-radius: 0; padding: 4px 8px 8px;
  border-image: url(../img/marco.webp) 110 / 84px / 0 stretch;
  background: url(../img/piedra.webp) center / cover, #121216; background-origin: border-box; background-clip: border-box;
  box-shadow: 0 14px 50px rgba(0,0,0,.75); }
.caja.ancha { width: min(780px, 94vw); }
.caja h2 { margin: 0 0 12px; color: var(--oro); font: 700 20px var(--letra); text-align: center; }
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.marca img { width: 48px; height: 56px; }
.marca h1 { margin: 0; color: var(--oro); font: 700 26px/1 "Palatino Linotype", Georgia, serif; letter-spacing: 3px; }
.marca small { color: #a79e8c; font-size: 12px; }
#f-login label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; margin: 7px 0; font-size: 14px; }
#f-login label.check { display: flex; gap: 6px; font-size: 13px; color: #cfc6b3; }
#f-login input:not([type=checkbox]) { font: 600 16px var(--letra); padding: 7px 9px; border-radius: 5px; border: 1px solid #4a4232; background: #0f1218; color: #fff;
  -webkit-user-select: text; user-select: text; }
#l-msg { font-size: 12px; color: #a79e8c; margin: 8px 0; min-height: 16px; }
#l-msg.error { color: #ff8a7a; font-weight: 700; }
.mundos { display: flex; gap: 6px; margin: 6px 0 10px; }
/* "Entrar con Google" (js/google.js): boton oro como "Entrar", con la G de Google en su cuadro blanco (colores sin tocar) */
.separa { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: #a79e8c; font-size: 12px; }
.separa::before, .separa::after { content: ""; flex: 1; height: 1px; background: rgba(214, 178, 104, .3); }
button.boton-google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.g-logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(106, 71, 20, .45); flex: none; }
.g-logo svg { width: 18px; height: 18px; display: block; }
button.boton-google:disabled { filter: grayscale(.7) brightness(.7); }
.mundos button { flex: 1; background: #161a22; color: #cfc6b3; border: 1px solid #3a3426; border-radius: 5px; padding: 6px; font: 700 13px var(--letra); }
.mundos button.activo { border-color: var(--oro); color: var(--oro-claro); background: #2a2416; }
button.dorado, .botones button { font: 700 16px var(--letra); padding: 9px 18px; border-radius: 6px; border: 1px solid #6a4714; color: #2a1c06;
  background: linear-gradient(#f6e3a9, #e2b964 45%, #a87828); width: 100%; }
.botones { display: flex; gap: 10px; margin-top: 12px; }
.botones button:not(.dorado) { background: #1d2230; color: #d8d0bd; border-color: #3a3426; }
/* ---------- Choose Character, elegir servidor, confirmar y "Name" (personaje nuevo sin nombre) ---------- */
.caja.elegir { width: min(640px, 94vw); }
.pantalla { place-items: safe center; }
.caja.chica { width: min(470px, 92vw); text-align: center; }
.caja h2 { letter-spacing: 1px; text-shadow: 0 2px 3px #000; }
.caja.marco h2 { margin: 2px 0 14px; padding-bottom: 10px; font: 700 21px/1.2 "Palatino Linotype", Georgia, serif; color: var(--oro-claro);
  background: linear-gradient(90deg, transparent, rgba(227, 194, 120, .7), transparent) bottom / 80% 1px no-repeat; }
#lista-pj { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 330px); overflow-y: auto; padding: 2px 4px 2px 0;
  scrollbar-width: thin; scrollbar-color: #6a5224 transparent; }
.pj { display: grid; grid-template-columns: 52px minmax(0, 1.6fr) 54px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; width: 100%;
  min-height: 62px; padding: 4px 14px 4px 8px; text-align: left; color: var(--claro); font: 700 15px var(--letra);
  border: 9px solid transparent; border-image: url(../img/campo.webp) 22 fill / 11px stretch; background: none; }
.pj:hover { filter: brightness(1.18); }
.pj.activo { border-image-source: url(../img/campo-foco.webp); filter: none; box-shadow: 0 0 14px rgba(227, 194, 120, .28); }
.pj canvas { width: 52px; height: 52px; image-rendering: pixelated; margin: -4px 0; }
.pj .n { color: var(--oro-claro); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.pj .nv { text-align: center; color: #f3e6c2; }
.pj .cl, .pj .mu { color: #d9c9a2; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj .mu { color: #a9c7e8; }
.pj.crear { display: flex; justify-content: center; min-height: 54px; color: var(--oro-claro); font: 700 16px "Palatino Linotype", Georgia, serif; letter-spacing: .5px; }
.pj.crear span { color: var(--oro); font-size: 20px; margin-right: 8px; line-height: 1; }
.pj-vacio { text-align: center; color: #a79e8c; font-size: 13px; margin: 2px 0 0; }
.nota-verde { margin: 12px 2px 0; color: #4fd16a; font: 700 13px var(--letra); text-shadow: 0 1px 2px #000; }
.nota-verde a { color: #7ee88f; }
.nota-amarilla { margin: 14px 4px 0; color: #f2d04a; font: 700 13px/1.45 var(--letra); text-shadow: 0 1px 2px #000; text-align: center; }
.msg-error { min-height: 16px; margin: 6px 0 0; color: #ff8a7a; font: 700 13px var(--letra); text-align: center; }
.caja.marco .botones { justify-content: center; margin-top: 10px; }
.caja.marco .botones button { width: auto; min-width: 150px; flex: 0 1 190px; }
/* botones de oro con el boton LOW (ui/low/boton.png) */
.caja.marco button.dorado, #b-nombre { border-style: solid; border-color: transparent; border-width: 0 40px; border-radius: 0;
  border-image: url(../img/boton-oro.webp) 0 56 fill / 0 40px stretch; background: none; color: #2b1903;
  text-shadow: 0 1px 0 rgba(255, 236, 180, .6); height: 48px; padding: 0 0 2px; line-height: 46px; font: 700 17px/46px "Palatino Linotype", Georgia, serif; letter-spacing: .6px; }
.caja.marco button.dorado:disabled { filter: grayscale(.5) brightness(.75); }
.caja.marco button.dorado:hover, #b-nombre:hover { filter: brightness(1.1); }
.caja.marco .botones button:not(.dorado) { height: 44px; border: 1px solid #6a5224; background: linear-gradient(#24242c, #15151a); color: #e8dcc0; border-radius: 6px;
  font: 700 16px "Palatino Linotype", Georgia, serif; padding: 0 18px; align-self: center; }
.caja.marco .botones button:not(.dorado):hover { border-color: var(--oro); color: var(--oro-claro); }
#lista-sv { display: flex; flex-direction: column; gap: 10px; }
.sv { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 6px 14px 6px 8px;
  border: 9px solid transparent; border-image: url(../img/campo.webp) 22 fill / 11px stretch; background: none; color: var(--claro); }
.sv:hover { border-image-source: url(../img/campo-foco.webp); }
.sv b { display: block; text-align: center; height: 40px; line-height: 38px; border-style: solid; border-color: transparent; border-width: 0 34px;
  border-image: url(../img/boton-oro.webp) 0 56 fill / 0 34px stretch; color: #2b1903; text-shadow: 0 1px 0 rgba(255, 236, 180, .6);
  font: 700 16px/38px "Palatino Linotype", Georgia, serif; white-space: nowrap; }
.sv span { color: #d9cdb4; font: 600 13px/1.35 var(--letra); }
#cf-texto, #pn-texto { color: #e6dcc4; font: 600 15px/1.45 var(--letra); margin: 4px 6px 6px; }
#cf-texto b { color: var(--oro-claro); white-space: nowrap; }
#pn-nombre { width: 100%; font: 700 18px var(--letra); text-align: center; color: #fff; padding: 10px; margin-top: 6px;
  border: 9px solid transparent; border-image: url(../img/campo.webp) 22 fill / 11px stretch; background: none; outline: none;
  -webkit-user-select: text; user-select: text; }
#pn-nombre:focus { border-image-source: url(../img/campo-foco.webp); }
.pantalla.velo { background: rgba(4, 5, 8, .62); z-index: 30; }
#b-nombre { position: fixed; top: 2px; left: 50%; transform: translateX(-50%); z-index: 3; min-width: 150px; }
@media (max-width: 560px), (max-height: 430px) {
  .caja { border-width: 18px; border-image-width: 62px; }
  .caja.marco button.dorado, #b-nombre { height: 40px; line-height: 38px; font-size: 15px; border-width: 0 34px; border-image-width: 0 34px; }
  .caja.marco .botones button:not(.dorado) { height: 38px; font-size: 14px; }
  .sv b { height: 34px; line-height: 32px; font-size: 14px; border-width: 0 29px; border-image-width: 0 29px; }
  .caja.marco h2 { font-size: 18px; margin-bottom: 8px; padding-bottom: 7px; }
  .pj { grid-template-columns: 40px minmax(0, 1.5fr) 30px minmax(0, 1fr) minmax(0, .8fr); gap: 6px; min-height: 50px; font-size: 13px; padding: 2px 8px 2px 4px; }
  .pj canvas { width: 40px; height: 40px; }
  .pj .n { font-size: 14px; }
  .pj .cl { font-size: 12px; }
  .pj .mu { font-size: 12px; }
  #lista-pj { max-height: 46vh; }
  .sv { grid-template-columns: 112px 1fr; gap: 8px; padding: 1px 8px 1px 4px; border-width: 7px; }
  #lista-sv { gap: 6px; }
  .sv span { font-size: 12px; }
  .caja.marco .botones { margin-top: 6px; }
  .nota-verde, .nota-amarilla { font-size: 11.5px; margin-top: 6px; }
  .caja.marco .botones button { min-width: 120px; }
}
/* celular acostado (poco alto): todo mas compacto para que la caja quepa sin scroll (y si no, js/juego.js ajustarCajas la achica) */
@media (max-height: 430px) {
  .pantalla { height: 100vh; height: 100dvh; }
  .caja { padding: 0 6px 2px; }
  .marca { gap: 10px; margin-bottom: 4px; }
  .marca img { width: 34px; height: 40px; }
  .marca h1 { font-size: 21px; }
  .marca small { font-size: 11px; }
  #f-login label { margin: 4px 0; font-size: 13px; grid-template-columns: 88px 1fr; }
  #f-login label.check { font-size: 12px; }
  #f-login input:not([type=checkbox]) { padding: 5px 8px; font-size: 15px; }
  #l-msg { margin: 4px 0; font-size: 11px; min-height: 0; }
  button.dorado, .botones button { padding: 7px 14px; font-size: 15px; }
  .separa { margin: 6px 0; }
  .caja.marco h2 { font-size: 17px; margin: 0 0 6px; padding-bottom: 5px; }
  #lista-pj { max-height: max(96px, calc(100dvh - 175px)); gap: 4px; }
  .pj { min-height: 44px; }
  .pj canvas { width: 36px; height: 36px; margin: -6px 0; }
  .nota-verde, .nota-amarilla { margin-top: 4px; }
  #cf-texto, #pn-texto { font-size: 14px; margin: 2px 4px 4px; }
}
@media (max-width: 480px) { .pj { grid-template-columns: 40px minmax(0, 1.5fr) 30px minmax(0, 1fr); } .pj .cl { display: none; } }

#reconecta { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 20; background: rgba(120, 20, 10, .9); border: 1px solid #ff8a7a; border-radius: 6px;
  padding: 6px 14px; font: 700 13px var(--letra); display: flex; align-items: center; gap: 8px; }
#cargando-mapa { position: fixed; left: 50%; top: 45%; transform: translateX(-50%); z-index: 4; background: rgba(10, 12, 18, .85); border: 1px solid var(--oro);
  border-radius: 6px; padding: 6px 14px; font: 700 13px var(--letra); display: flex; align-items: center; gap: 8px; color: var(--oro-claro); }
.giro { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; border-top-color: transparent; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
#carga { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #07080b; color: #d8d0bd; font: 600 14px var(--letra); }
#carga img { width: 64px; }
#carga-barra { width: min(60vw, 280px); height: 8px; border-radius: 4px; background: #1f232c; overflow: hidden; }
#carga-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a87828, #f6e3a9); transition: width .2s; }

/* solo horizontal: en vertical, aviso */
#gira { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #07080b; color: var(--oro); text-align: center; }
#gira svg { width: 90px; animation: girar 1.8s ease-in-out infinite; }
#gira b { font: 700 22px var(--letra); } #gira span { color: #a79e8c; font-size: 14px; }
@keyframes girar { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { body.tactil #gira { display: flex; } }
#ios { position: fixed; left: 50%; top: 6px; transform: translateX(-50%); z-index: 40; width: min(460px, 90vw); background: rgba(13, 15, 20, .96); border: 1px solid var(--oro);
  border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#ios svg { width: 14px; height: 14px; vertical-align: -2px; }
#ios button { align-self: flex-end; background: #2a2416; color: var(--oro-claro); border: 1px solid var(--oro); border-radius: 5px; padding: 4px 12px; }

/* ---------- etapa 2: pelea ---------- */
/* recarga de un atajo: barrido oscuro (como el reloj de la PC) + segundos */
.atajo .rec { position: absolute; left: calc(2 * var(--u)); right: calc(3 * var(--u)); top: calc(2 * var(--u)); bottom: calc(10 * var(--u)); pointer-events: none; display: none;
  border-radius: calc(16 * var(--u)); background: conic-gradient(transparent calc((1 - var(--p, 0)) * 1turn), rgba(5, 5, 12, .72) 0); }
.atajo.recarga .rec { display: block; }
.atajo .seg { position: absolute; left: 50%; top: calc(34 * var(--u)); transform: translate(-50%, -50%); pointer-events: none; }
.atajo.apuntar { animation: late .6s ease-in-out infinite alternate; filter: sepia(1) saturate(3) brightness(1.1); }
@keyframes late { to { filter: sepia(1) saturate(3) brightness(1.35); } }
/* rastreadores */
@keyframes parpadeo { 50% { opacity: .35; } }
/* Loot HUD arriba al centro */
#loot-hud { position: fixed; left: 50%; top: calc(var(--M) + 4px); transform: translateX(-50%); display: flex; gap: 3px; pointer-events: none; z-index: 2; }
#loot-hud .lt { position: relative; width: clamp(30px, 9vh, 52px); height: clamp(30px, 9vh, 52px); border-radius: 5px; background: rgba(14, 17, 26, .8);
  border: 1px solid #6a5a2a; animation: entra .15s ease-out; transition: transform .4s, opacity .4s; }
#loot-hud .lt.fuera { transform: scale(.2); opacity: 0; }
#loot-hud .lt i { position: absolute; inset: 8%; background: center/contain no-repeat; }
#loot-hud .lt span { position: absolute; right: 2px; bottom: 1px; font: 700 clamp(8px, 2.2vh, 12px)/1 var(--letra); text-shadow: var(--contorno); }
@keyframes entra { from { transform: scale(.3); opacity: 0; } }
/* lista de batalla: el objetivo en rojo */
#lista-batalla div.obj { background: rgba(200, 30, 30, .35); outline: 1px solid #ff4a3a; }
/* muerto: mundo en gris */
body.muerto canvas#mundo { filter: grayscale(.85) brightness(.6); }
#muerto .caja p { text-align: center; color: #d8cbb6; }
#b-revivir:disabled { filter: grayscale(.6) brightness(.8); }

/* ---------- inventario (equipo, mochila, bolsa de botin) ---------- */
#ventana.inv { width: min(640px, 92vw); max-width: 92vw; max-height: 92vh; }
#ventana.inv #vent-cuerpo { padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.inv-cab { display: flex; gap: 14px; font: 700 12px var(--letra); color: #cfc6b3; }
.inv-cab .oro { color: #f1d75c; }
.inv-pes { display: flex; gap: 4px; }
.inv-pes button { flex: 1; background: #161a22; color: #cfc6b3; border: 1px solid #3a3426; border-radius: 5px; padding: 5px 4px; font: 700 12px var(--letra); }
.inv-pes button.activa { border-color: var(--oro); color: var(--oro-claro); background: #2a2416; }
.inv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(40px, 11vh, 56px), 1fr)); gap: 3px; overflow-y: auto; max-height: 44vh;
  touch-action: pan-y; padding: 1px; }
.inv-c { position: relative; aspect-ratio: 1; padding: 0; border-radius: 5px; border: 1px solid #3a3426; background: #12151c; }
.inv-c.sel { border-color: #ffd36a; box-shadow: 0 0 0 2px rgba(255, 211, 106, .45); }
.inv-c i { position: absolute; inset: 8%; background: center/contain no-repeat; }
.inv-c .n { position: absolute; right: 2px; bottom: 1px; font: 700 11px/1 var(--letra); color: #fff; text-shadow: var(--contorno); }
.inv-c small { position: absolute; left: 0; right: 0; bottom: 1px; font: 700 8px/1 var(--letra); color: #8a826f; text-align: center; pointer-events: none; }
.inv-c:has(i) small { display: none; }
.inv-vacio { grid-column: 1 / -1; color: #8a826f; padding: 10px; text-align: center; }
.inv-acc { display: flex; align-items: center; gap: 6px; min-height: 34px; font: 700 13px var(--letra); flex-wrap: wrap; }
.inv-acc .tipo { color: #8a826f; font-size: 11px; }
.inv-acc .esp { flex: 1; }
.inv-acc .ayuda { color: #8a826f; font-weight: 600; }
.inv-acc button { font: 700 13px var(--letra); padding: 7px 12px; border-radius: 6px; border: 1px solid #6a4714; color: #2a1c06;
  background: linear-gradient(#f6e3a9, #e2b964 45%, #a87828); }

/* ---------- etapa 3: tienda, banco, deposito, Store, ficha de objetos (js/ventanas.js) ---------- */
#ventana.inv { width: min(780px, 94vw); height: min(92vh, 560px); }
#ventana.inv #vent-cuerpo { flex: 1; overflow: hidden; }
#ventana[data-tipo="npc-banco"] #vent-cuerpo, #ventana[data-tipo="npc-texto"] #vent-cuerpo, #ventana[data-tipo="npc-otro"] #vent-cuerpo { max-width: min(520px, 90vw); }
.inv-cab .gemas { color: #d6a8ff; }
.vt-dos { display: flex; gap: 8px; flex: 1; min-height: 0; }
.vt-dos .inv-rejilla { flex: 1.25; max-height: none; align-content: start; min-width: 0; }
.vt-dos .vt-det { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 5px; overflow-y: auto;
  background: #0d1017; border: 1px solid #2e2a20; border-radius: 6px; padding: 6px 8px; touch-action: pan-y; min-height: 0; }
.vt-tit { display: flex; align-items: center; gap: 8px; }
.vt-tit i { flex: none; width: clamp(34px, 10vh, 48px); height: clamp(34px, 10vh, 48px); background: #12151c center/80% no-repeat; border: 1px solid #3a3426; border-radius: 5px; }
.vt-tit b { color: var(--oro-claro); font: 700 14px/1.2 var(--letra); }
.vt-ficha { margin: 0; padding: 0; list-style: none; font: 600 12px/1.35 var(--letra); color: #cfc6b3; white-space: pre-wrap; }
.vt-ficha li::before { content: "· "; color: #8a7a52; }
.vt-cant { display: flex; align-items: center; gap: 5px; }
.vt-cant input { flex: 1; min-width: 40px; accent-color: #e2b964; touch-action: none; }
.vt-det .vt-cant button { flex: none; width: 30px; height: 28px; padding: 0; border-radius: 5px; border: 1px solid #3a3426; background: #1d2230; color: #f0e6c8; font: 700 15px var(--letra); }
.vt-det .vt-cant button.max { width: auto; padding: 0 7px; font-size: 11px; }
.vt-cant b { min-width: 3.2em; text-align: right; font: 700 13px var(--letra); color: #fff; }
.vt-precio { font: 600 12px var(--letra); color: #cfc6b3; }
.vt-precio b { color: #f1d75c; }
.vt-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }
.vt-botones button, .vt-pie button { position: relative; overflow: hidden; flex: 1 1 auto; min-width: 84px; font: 700 13px var(--letra); padding: 8px 10px; border-radius: 6px;
  border: 1px solid #3a3426; background: #1d2230; color: #f0e6c8; }
.vt-botones button.dorado, .vt-pie button { border-color: #6a4714; color: #2a1c06; background: linear-gradient(#f6e3a9, #e2b964 45%, #a87828); width: auto; }
.vt-botones button.rojo { border-color: #6b1410; color: #fff; background: linear-gradient(#e2645a, #b8261c 50%, #7d120c); }
.vt-botones button:disabled, .vt-botones button.apagado { filter: grayscale(1) brightness(.6); }
.vt-botones button > span { position: relative; z-index: 1; }
/* mantener para confirmar (ButtonProgressBar de la PC): se llena de izquierda a derecha */
.vt-botones button.mantener::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .45); }
.vt-botones button.mantener.llenando::before { width: 100%; transition: width var(--ms, 900ms) linear; }
.vt-pie { display: flex; justify-content: center; }
.vt-pie button { flex: none; }
.vt-confirma { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px;
  background: rgba(6, 7, 11, .93); border-radius: 8px; text-align: center; font: 700 14px/1.4 var(--letra); }
.vt-confirma p { max-width: 46ch; margin: 0; }
.vt-confirma .botones { width: min(460px, 90%); flex-wrap: wrap; }
.vt-confirma .botones button { flex: 1 1 120px; font-size: 14px; padding: 8px 10px; }
.vt-texto { white-space: pre-wrap; max-width: 60ch; margin: 4px 0; font: 600 14px/1.5 var(--letra); color: #e9e1cf; }
#vent-cuerpo .ayuda { color: #8a826f; font-weight: 600; margin: 4px 0; }
.vt-cargando { padding: 18px; text-align: center; color: #8a826f; }
.vt-banco { display: flex; flex-direction: column; gap: 8px; min-width: min(340px, 80vw); }
.vt-banco .fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 14px var(--letra); }
.vt-banco .fila b { color: #fff; } .vt-banco .fila b.oro { color: #f1d75c; }
.vt-banco input { width: 9em; font: 700 15px var(--letra); padding: 6px 8px; border-radius: 5px; border: 1px solid #4a4232; background: #0f1218; color: #fff; -webkit-user-select: text; user-select: text; text-align: right; }
.vt-banco .vt-botones button { flex: 1 1 40%; }
#p-fuera p { text-align: center; color: #e9e1cf; font: 700 16px var(--letra); }
#p-fuera p.nota { color: #a79e8c; font: 600 13px/1.4 var(--letra); }
@media (max-width: 560px) { #ventana.inv { height: 92vh; } .vt-dos { flex-direction: column; } .vt-dos .inv-rejilla { flex: 0 1 auto; max-height: 36vh; } .vt-dos .vt-det { flex: 1 1 auto; } }
/* misiones y tareas (menu y NPC de tareas), party */
#misiones div.lista { pointer-events: auto; cursor: pointer; }
#ventana[data-tipo="party"] #vent-cuerpo, #ventana[data-tipo="jugador"] #vent-cuerpo { min-width: min(360px, 80vw); }
.vt-lista { overflow-y: auto; flex: 1; min-height: 0; touch-action: pan-y; padding-right: 2px; }
.vt-lista h4 { margin: 6px 0 4px; color: var(--oro); font: 700 13px var(--letra); }
.vt-lista h4 small { color: #a79e8c; font-weight: 600; }
.vt-fila { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; background: #0d1017; border: 1px solid #2e2a20; border-radius: 6px; }
.vt-fila-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vt-fila-t b { font: 700 13px/1.25 var(--letra); color: #f0e6c8; }
.vt-fila-t small { font: 600 11px/1.3 var(--letra); color: #a79e8c; }
.vt-barra { display: block; height: 4px; background: #2a2d36; border-radius: 2px; overflow: hidden; }
.vt-barra i { display: block; height: 100%; background: linear-gradient(90deg, #8fd14a, #c7f06a); }
.vt-fila-b { flex: none; display: flex; gap: 6px; }
.vt-fila-b button { font: 700 12px var(--letra); padding: 7px 12px; border-radius: 6px; border: 1px solid #3a3426; background: #1d2230; color: #f0e6c8; }
.vt-fila-b button.dorado { border-color: #6a4714; color: #2a1c06; background: linear-gradient(#f6e3a9, #e2b964 45%, #a87828); width: auto; }
.vt-fila-b button.apagado { filter: grayscale(1) brightness(.6); }
/* joystick flotante: aparece donde pones el dedo en el mundo */
#joy-flota { position: fixed; z-index: 2; width: clamp(96px, 28vh, 170px); height: clamp(96px, 28vh, 170px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: .85; }
#joy-flota::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
#joy-flota i { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #e8eaee 60%, #c9ccd3); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.menu-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: min(460px, 82vw); margin-top: 2px; }
.menu-rejilla button { font-size: 15px; padding: 9px 10px; }
#vent-cuerpo { touch-action: pan-y; }

/* Menu > Interfaz (Options > Interface del original): escala de interfaz y distancia de camara */
.mm-interfaz { margin-top: 10px; padding-top: 8px; border-top: 1px solid #3a3222; display: grid; gap: 8px; }
.mm-interfaz h4 { margin: 0; color: var(--oro); font: 700 14px var(--letra); }
.mm-interfaz label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; font: 600 13px var(--letra); color: #e9e1cf; }
.mm-interfaz label b { color: var(--oro-claro); font: 700 13px var(--letra); }
.mm-interfaz input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: #e2b964; touch-action: none; margin: 2px 0; }
@media (max-height: 430px) {
  #ventana[data-tipo=""] #vent-cuerpo { padding: 6px 10px; }
  .menu-rejilla { gap: 5px; }
  .menu-rejilla button { font-size: 13px; padding: 5px 8px; }
  .mm-interfaz { grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 6px; padding-top: 5px; }
  .mm-interfaz h4 { grid-column: 1 / -1; font-size: 12px; }
  .mm-interfaz label { font-size: 12px; }
  .mm-interfaz label b { font-size: 12px; }
  .vent-cab { padding: 4px 10px; }
}

/* ======================= PASO 3: ventanas LOW (js/menu.js) =======================
   Menu de la PC: VisWindowCenter 960 x 576 unidades, centrada. Marco main-menu (al 50 %), fondo ventana_fondo en
   (0, 50) - (960, 576), barras + oro + gemas + cerrar arriba, 7 pestañas button-menu de 100 x 80 (la elegida 100 x 100
   con la flecha), contenido desde y = 144. Dialogo Details: window2 500 x 400 con velo. */
#vmenu { position: fixed; left: 50%; top: 50%; width: calc(960 * var(--u)); height: calc(576 * var(--u)); transform: translate(-50%, -50%); z-index: 8; }
#vmenu .vm-marco { position: absolute; inset: 0; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/marco_ventana.webp) 78 66 86 68 fill / calc(39 * var(--u)) calc(33 * var(--u)) calc(43 * var(--u)) calc(34 * var(--u)) stretch; }
body.normal #vmenu .vm-marco { border-image-source: url(../img/hud/n/marco_ventana.webp); border-image-slice: 39 33 43 34 fill; }
#vmenu .vm-fondo { position: absolute; left: 0; top: calc(50 * var(--u)); width: 100%; bottom: 0; background: center / 100% 100% no-repeat; }
#vmenu .vm-b { position: absolute; top: calc(10 * var(--u)); width: calc(140 * var(--u)); height: calc(22 * var(--u)); }
#vm-vida { left: calc(10 * var(--u)); } #vm-mana { left: calc(160 * var(--u)); } #vm-exp { left: calc(310 * var(--u)); }
#vm-vida > i { background: linear-gradient(rgb(220, 10, 14), rgb(140, 6, 8)); }
#vm-mana > i { background: linear-gradient(rgb(214, 10, 226), rgb(140, 6, 170)); }
#vm-exp > i { background: linear-gradient(rgb(255, 233, 166), rgb(230, 184, 74) 55%, rgb(178, 132, 35)); }
#vmenu .vm-b .tx { position: absolute; right: calc(3 * var(--u)); top: calc(4.5 * var(--u)); }
.vm-rec { position: absolute; top: calc(12 * var(--u)); height: calc(36 * var(--u)); border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/recurso.webp) 30 fill / calc(15 * var(--u)) stretch; }
body.normal .vm-rec { border-image-source: url(../img/hud/n/recurso.webp); border-image-slice: 15 fill; }
#vm-oro { left: calc(590 * var(--u)); width: calc(185 * var(--u)); } #vm-gemas { left: calc(795 * var(--u)); width: calc(85 * var(--u)); }
.vm-rec .tx { position: absolute; right: calc(12 * var(--u)); top: calc(9 * var(--u)); }
.vm-rec i { position: absolute; left: calc(100% - 15 * var(--u)); top: calc(3 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); background: center / contain no-repeat; }
.vm-cerrar { position: absolute; left: calc(900 * var(--u)); top: 0; width: calc(60 * var(--u)); height: calc(60 * var(--u)); padding: 0; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/cerrar_fondo.webp) 42 48 62 44 fill / calc(21 * var(--u)) calc(24 * var(--u)) calc(31 * var(--u)) calc(22 * var(--u)) stretch; background: none; }
body.normal .vm-cerrar { border-image-source: url(../img/hud/n/cerrar_fondo.webp); border-image-slice: 21 24 31 22 fill; }
.vm-cerrar i { position: absolute; left: calc(7 * var(--u)); top: calc(4 * var(--u)); width: calc(46 * var(--u)); height: calc(42 * var(--u)); background: center / contain no-repeat; pointer-events: none; }
.vm-cerrar:active { filter: brightness(.8); }
/* pestañas (MenuImageVerticalButton) */
.vm-pestanas { position: absolute; left: 0; top: calc(60 * var(--u)); width: 100%; height: calc(84 * var(--u)); }
.vm-p { position: absolute; top: calc(1 * var(--u)); width: calc(100 * var(--u)); height: calc(80 * var(--u)); padding: 0; background: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/pestana.webp) 62 58 204 56 fill / calc(15.5 * var(--u)) calc(14.5 * var(--u)) calc(51 * var(--u)) calc(14 * var(--u)) stretch; }
.vm-p:hover { border-image-source: url(../img/hud/hd/pestana_over.webp); }
.vm-p.on { top: calc(-19 * var(--u)); height: calc(100 * var(--u)); border-image-source: url(../img/hud/hd/pestana_on.webp); }
body.normal .vm-p { border-image-source: url(../img/hud/n/pestana.webp); border-image-slice: 31 29 102 28 fill; }
body.normal .vm-p:hover { border-image-source: url(../img/hud/n/pestana_over.webp); }
body.normal .vm-p.on { border-image-source: url(../img/hud/n/pestana_on.webp); }
.vm-p i { position: absolute; left: calc(20.3 * var(--u)); top: calc(-8 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u)); background: center / contain no-repeat; pointer-events: none; }
.vm-p.on i { top: calc(2 * var(--u)); }
.vm-p .tx { position: absolute; left: 50%; top: calc(46 * var(--u)); transform: translateX(-50%); }
.vm-p.on .tx { top: calc(66 * var(--u)); }   /* la elegida: el letrero a la altura de las demas (dueño 22/10: se cortaba arriba) */
.vm-p b { display: none; }
.vm-p.on b { display: block; position: absolute; left: calc(50% - 20 * var(--u)); bottom: calc(-9 * var(--u)); width: calc(40 * var(--u)); height: calc(16 * var(--u));
  background: url(../img/hud/hd/flecha_tab.webp) center / 100% 100% no-repeat; }
body.normal .vm-p.on b { background-image: url(../img/hud/n/flecha_tab.webp); }
.vm-linea { position: absolute; left: calc(30 * var(--u)); right: calc(30 * var(--u)); top: calc(138.5 * var(--u)); height: max(1px, calc(1.5 * var(--u)));
  background: linear-gradient(90deg, rgba(189, 165, 93, 0), #bda55d 4%, #bda55d 96%, rgba(189, 165, 93, 0)); pointer-events: none; z-index: 1; }
.vm-linea2 { position: absolute; left: calc(27 * var(--u)); width: calc(893 * var(--u)); top: calc(49.5 * var(--u)); height: max(1px, calc(1 * var(--u)));
  background: linear-gradient(90deg, rgba(200, 166, 84, 0), #c8a654 calc(60 * var(--u))); pointer-events: none; }
.vm-cuerpo { position: absolute; left: 0; top: calc(144 * var(--u)); width: 100%; height: calc(432 * var(--u)); }
/* inventario */
.vm-equipo { position: absolute; left: calc(40 * var(--u)); top: calc(20 * var(--u)); width: calc(320 * var(--u)); height: calc(352 * var(--u)); background: center / 100% 100% no-repeat; }
.vm-c { position: absolute; width: calc(66 * var(--u)); height: calc(66 * var(--u)); padding: 0; background: none; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/casilla.webp) 46 46 72 46 fill / calc(11.5 * var(--u)) calc(11.5 * var(--u)) calc(18 * var(--u)) calc(11.5 * var(--u)) stretch; }
body.normal .vm-c { border-image-source: url(../img/hud/n/casilla.webp); border-image-slice: 23 23 36 23 fill; }
.vm-c.vacia { filter: brightness(.75); }
.vm-c > i { position: absolute; left: calc(6 * var(--u)); top: calc(4 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); background: center / contain no-repeat; pointer-events: none; }
.vm-c > i.bolsa { left: calc(27 * var(--u)); top: calc(27 * var(--u)); width: calc(33 * var(--u)); height: calc(33 * var(--u)); }
.vm-c > .tx { position: absolute; right: calc(4 * var(--u)); bottom: calc(6 * var(--u)); }
.vm-c:active { filter: brightness(.8); }
.vm-tabs { position: absolute; left: calc(360 * var(--u)); top: calc(10 * var(--u)); width: calc(560 * var(--u)); height: calc(50 * var(--u)); }
.vm-tabs::before, .vm-tabs::after { content: ''; position: absolute; top: calc(3 * var(--u)); bottom: 0; width: max(1px, calc(1 * var(--u))); background: #858586; }
.vm-tabs::before { left: 0; } .vm-tabs::after { right: 0; }
.vm-t { position: absolute; top: 0; width: calc(180 * var(--u)); height: calc(47 * var(--u)); padding: 0; background: none; border: 0; }
.vm-t.on { border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/tab_foco.webp) 2 40 36 34 fill / calc(1 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(17 * var(--u)) stretch; }
body.normal .vm-t.on { border-image-source: url(../img/hud/n/tab_foco.webp); border-image-slice: 1 20 18 17 fill; }
.vm-t span { position: absolute; left: 50%; top: calc(9 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; gap: 0; white-space: nowrap; }
.vm-t i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); background: center / contain no-repeat; flex: none; }
.vm-t:not(.on) i { filter: sepia(.5) saturate(1.4) brightness(.97); }
.vm-rejilla { position: absolute; left: calc(360 * var(--u)); top: calc(70 * var(--u)); width: calc(560 * var(--u)); max-height: calc(352 * var(--u)); overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y; scrollbar-width: none; }
.vm-rejilla::-webkit-scrollbar { display: none; }
/* opciones y pestañas que faltan */
.vm-opciones { position: absolute; left: calc(60 * var(--u)); right: calc(60 * var(--u)); top: calc(16 * var(--u)); }
.vm-opciones .menu-rejilla { min-width: 0; }
.vm-pend { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(20 * var(--u)); }
/* dialogo Details (window2 500 x 400) */
#vdet { position: fixed; inset: 0; z-index: 9; }
#vdet .vd-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
#vdet .vd-caja { position: absolute; left: 50%; top: 50%; width: calc(500 * var(--u)); height: calc(400 * var(--u)); transform: translate(-50%, -50%);
  border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/marco_dialogo.webp) 78 66 86 68 fill / calc(19.5 * var(--u)) calc(16.5 * var(--u)) calc(21.5 * var(--u)) calc(17 * var(--u)) stretch; }
body.normal #vdet .vd-caja { border-image-source: url(../img/hud/n/marco_dialogo.webp); border-image-slice: 39 33 43 34 fill; }
#vdet .vd-tit { position: absolute; left: 50%; top: calc(17 * var(--u)); transform: translateX(-50%); }
#vdet .vm-cerrar { left: calc(442 * var(--u)); }
.vd-cuerpo { position: absolute; left: 0; top: calc(60 * var(--u)); width: 100%; bottom: 0; }
.vd-cuerpo .vd-ic { }
.vd-cuerpo .vd-nom { position: absolute; left: 50%; top: calc(85 * var(--u)); transform: translateX(-50%); }
.vd-lineas { position: absolute; left: 0; right: 0; top: calc(127 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.vd-cant { position: absolute; left: calc(99 * var(--u)); top: calc(173 * var(--u)); width: calc(300 * var(--u)); height: calc(40 * var(--u)); margin: 0;
  -webkit-appearance: none; appearance: none; background: none; touch-action: none; --p: 100%; }
.vd-cant::-webkit-slider-runnable-track { height: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); border: calc(1 * var(--u)) solid #3b3324;
  background: linear-gradient(90deg, #f3dd6a, #d8b232) 0 50% / var(--p) calc(4 * var(--u)) no-repeat, #121216; }
.vd-cant::-webkit-slider-thumb { -webkit-appearance: none; width: calc(16 * var(--u)); height: calc(36 * var(--u)); margin-top: calc(-12 * var(--u)); border: 0;
  background: url(../img/hud/hd/scale_bar_handler.webp) center / 100% 100% no-repeat; }
.vd-cant::-moz-range-track { height: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); background: #121216; border: 1px solid #3b3324; }
.vd-cant::-moz-range-progress { height: calc(4 * var(--u)); background: #e6c64a; }
.vd-cant::-moz-range-thumb { width: calc(16 * var(--u)); height: calc(36 * var(--u)); border: 0; border-radius: 0; background: url(../img/hud/hd/scale_bar_handler.webp) center / 100% 100% no-repeat; }
.vd-n { position: absolute; left: calc(100 * var(--u)); top: calc(215 * var(--u)); }
.vd-botones { position: absolute; left: 0; right: 0; top: calc(275 * var(--u)); display: flex; justify-content: center; gap: calc(20 * var(--u)); flex-wrap: wrap; }
.vd-b { position: relative; width: calc(150 * var(--u)); height: calc(50 * var(--u)); padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vd-b .tx { margin-top: calc(-6 * var(--u)); position: relative; z-index: 1; }
.vd-b.mantener::before { content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(3 * var(--u)); bottom: calc(12 * var(--u)); width: 0; background: rgba(255, 255, 255, .25); border-radius: calc(6 * var(--u)); }
.vd-b.mantener.llenando::before { width: calc(100% - 6 * var(--u)); transition: width var(--ms, 900ms) linear; }
.vd-b:active { filter: brightness(.8); }
body.chat-abierto #joy, body.con-menu #joy, body.con-menu #joy-flota, body.con-dialogo #joy, body.con-dialogo #joy-flota, body.con-ventana #joy, body.con-ventana #joy-flota { display: none; }   /* la PC no tiene joystick: con una ventana abierta no se ve */

/* ======================= PASO 3 (b): piezas y ventanas LOW de js/lowui.js ======================= */
.lo-b { padding: 0; background: none; display: flex; align-items: center; justify-content: center; }
.lo-b .tx { margin-top: calc(-5 * var(--u)); }
.lo-b[style*="--tinte"] { filter: none; }
.lo-b[style*="--tinte"]::before { content: ""; position: absolute; inset: calc(2 * var(--u)) calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--tinte); opacity: .2; pointer-events: none; }
.lo-b .tx { position: relative; z-index: 1; }
.lo-b.apagado { cursor: default; }
.lo-b:not(.apagado):active { filter: brightness(.78); }
.lo-c { padding: 0; background: none; }
.lo-c.vacia { filter: brightness(.75); }
.lo-c > i { position: absolute; left: calc(6 * var(--u)); top: calc(4 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); background: center / contain no-repeat; pointer-events: none; }
.lo-c > .tx.n { position: absolute; right: calc(4 * var(--u)); bottom: calc(6 * var(--u)); }
.lo-c:active { filter: brightness(.8); }
.lo-c.sel { filter: brightness(1.3) sepia(.4); }
.lo-tabs { pointer-events: auto; }
.lo-tabs::before, .lo-tabs::after { content: ''; position: absolute; top: calc(3 * var(--u)); bottom: 0; width: max(1px, calc(1 * var(--u))); background: #858586; }
.lo-tabs::before { left: 0; } .lo-tabs::after { right: 0; }
.lo-tabs > .lo-t { padding: 0; background: none; border: 0; }
.lo-t span { position: absolute; left: 50%; top: calc(9 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; white-space: nowrap; }
.lo-t i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); background: center / contain no-repeat; flex: none; }
.lo-pb { overflow: hidden; border-image: none !important; background: #0d0d11; box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #34343c; border-radius: calc(3 * var(--u)); }
.lo-pb.azul { background: #13233a; box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #2a3d58; }
.lo-pb > i { position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); background: linear-gradient(#fff97a, #f1e100 45%, #c8b600); }
.lo-pb.verde > i { background: linear-gradient(#b8f05a, #6fbf1c 55%, #3e8f0c); }
.lo-pb.exp > i { left: calc(1 * var(--u)); top: calc(1 * var(--u)); bottom: calc(1 * var(--u)); background: linear-gradient(rgb(255, 233, 166), rgb(230, 184, 74) 55%, rgb(178, 132, 35)); }
.lo-pb.exp { background: #0b0b0e; box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #3b3324; border-image: none !important; }
.lo-pb.sep::after { content: ""; position: absolute; inset: calc(2 * var(--u));
  background: linear-gradient(90deg, transparent calc(20% - 1px), #2a2a2e calc(20% - 1px) 20%, transparent 20% calc(40% - 1px), #2a2a2e calc(40% - 1px) 40%,
    transparent 40% calc(60% - 1px), #2a2a2e calc(60% - 1px) 60%, transparent 60% calc(80% - 1px), #2a2a2e calc(80% - 1px) 80%, transparent 80%); pointer-events: none; }
.lo-pb > .tx { z-index: 1; }
.lo-et > i { background: center / contain no-repeat; }
.lo-chk { padding: 0; background: none; border: 0; }
.lo-chk > i { background: center / contain no-repeat; }
.lo-sep { background: linear-gradient(transparent, #6b5a33 10%, #6b5a33 90%, transparent); }
.lo-sep.h { background: linear-gradient(90deg, transparent, #6b5a33 10%, #6b5a33 90%, transparent); }
.lo-panel { pointer-events: none; }
.lo-brillo { background: center / 100% 100% no-repeat; pointer-events: none; opacity: .35; }
.lo-fig { image-rendering: pixelated; pointer-events: none; }
.lo-mb { padding: 0; background: none; }
.lo-mb > i { background: center / contain no-repeat; }
.lo-mb:active { filter: brightness(.8); }
.lo-tarjeta { padding: 0; background: none; }
.lo-tarjeta.nueva::before { content: ""; position: absolute; inset: calc(3 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #ffff00; opacity: .16; pointer-events: none; }
.lo-tarjeta.nueva > i { background: center / contain no-repeat; }
.lo-mon { image-rendering: pixelated; }
.lo-scroll { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; scrollbar-width: none; }
.lo-scroll::-webkit-scrollbar { display: none; }
.lo-scroll::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--alto, 0); }
.lo-oferta > i { pointer-events: none; }
.lo-nom { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.lo-parrafo { display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.lo-srv { padding: 0; background: none; }
.lo-srv.actual::before { content: ""; position: absolute; inset: calc(3 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: #ffff00; opacity: .18; pointer-events: none; }
.lo-srv > i { background: center / contain no-repeat; }
/* dialogos window2 (Details, confirmar, NPC) */
.lo-dlg { position: fixed; inset: 0; z-index: 9; }
.lo-dlg .lo-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.lo-dlg.suave .lo-velo { background: rgba(0, 0, 0, .45); }
#vmenu-velo { position: fixed; inset: 0; z-index: 7; background: rgba(0, 0, 0, .45); }
.lo-dlg.sin-velo { pointer-events: none; }
.lo-dlg.sin-velo .lo-velo { display: none; }
.lo-dlg.sin-velo .lo-caja { pointer-events: auto; }
.lo-dlg .lo-caja { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lo-dlg .vm-cerrar { top: 0; }
.lo-rango { position: absolute; }

/* ======================= PASO 3 (c): ventanas de siempre (#ventana: banco, deposito, tareas del NPC, party, jugador, avisos)
   con el marco window2 de la PC, titulo con la letra del juego, cerrar de oro y botones / casillas / pestañas LOW ======================= */
#ventana { background: none; border-style: solid; border-color: transparent; border-width: 0; border-radius: 0;
  border-image: url(../img/hud/hd/marco_dialogo.webp) 78 66 86 68 fill / calc(19.5 * var(--u)) calc(16.5 * var(--u)) calc(21.5 * var(--u)) calc(17 * var(--u)) stretch;
  min-width: calc(420 * var(--u)); max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); padding: 0; z-index: 9; }
body.normal #ventana { border-image-source: url(../img/hud/n/marco_dialogo.webp); border-image-slice: 39 33 43 34 fill; }
#ventana .vent-cab { position: relative; height: calc(60 * var(--u)); padding: 0; border: 0; justify-content: center; flex: none; }
#ventana .vent-cab #vent-titulo { margin-top: calc(-4 * var(--u)); }
#ventana #vent-cerrar.vm-cerrar { left: auto; right: calc(-2 * var(--u)); top: 0; margin: 0; }
#ventana #vent-cuerpo { padding: calc(4 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); font: 700 calc(15 * var(--u)) / 1.4 var(--letra); color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
#ventana.inv { width: min(calc(780 * var(--u)), calc(100vw - 8px)); height: min(calc(560 * var(--u)), calc(100vh - 8px)); }
#ventana .vt-botones button, #ventana .vt-pie button, #ventana .vt-fila-b button, #ventana .botones button, #ventana .inv-acc button, #ventana .vt-cant button {
  border-style: solid; border-color: transparent; border-width: 0; border-radius: 0; background: none !important; color: #fff !important;
  border-image: url(../img/hud/hd/boton.webp) 42 46 62 46 fill / calc(10.5 * var(--u)) calc(11.5 * var(--u)) calc(15.5 * var(--u)) calc(11.5 * var(--u)) stretch;
  min-height: calc(46 * var(--u)); padding: 0 calc(16 * var(--u)) calc(8 * var(--u)); font: 700 calc(15 * var(--u)) var(--letra);
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
#ventana .vt-cant button { min-height: calc(36 * var(--u)); width: auto; min-width: calc(36 * var(--u)); padding: 0 calc(8 * var(--u)) calc(6 * var(--u)); }
body.normal #ventana .vt-botones button, body.normal #ventana .vt-pie button, body.normal #ventana .vt-fila-b button, body.normal #ventana .botones button, body.normal #ventana .inv-acc button, body.normal #ventana .vt-cant button {
  border-image-source: url(../img/hud/n/boton.webp); border-image-slice: 21 23 31 23 fill; }
#ventana .vt-botones button.dorado, #ventana .vt-fila-b button.dorado, #ventana .botones button.dorado { color: #f7d985 !important; }
#ventana .vt-botones button.rojo { color: #ff8a7a !important; }
#ventana .vt-botones button.apagado, #ventana .vt-fila-b button.apagado { color: #7f7f7f !important; filter: none; }
#ventana .inv-pes { gap: 0; border-bottom: max(1px, calc(1 * var(--u))) solid #c8a654; }
#ventana .inv-pes button { background: none; border: 0; border-radius: 0; color: #edd9a8; font: 700 calc(15 * var(--u)) var(--letra); padding: calc(10 * var(--u)) calc(6 * var(--u));
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
#ventana .inv-pes button.activa { color: #fff; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/tab_foco.webp) 2 40 36 34 fill / calc(1 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(17 * var(--u)) stretch; }
#ventana .inv-c { border-style: solid; border-color: transparent; border-width: 0; border-radius: 0; background: none;
  border-image: url(../img/hud/hd/casilla.webp) 46 46 72 46 fill / calc(11.5 * var(--u)) calc(11.5 * var(--u)) calc(18 * var(--u)) calc(11.5 * var(--u)) stretch; }
body.normal #ventana .inv-c { border-image-source: url(../img/hud/n/casilla.webp); border-image-slice: 23 23 36 23 fill; }
#ventana .inv-c.sel { box-shadow: none; filter: brightness(1.3) sepia(.4); }
#ventana .inv-c i { inset: 6% 9% 15%; }
#ventana .inv-rejilla { grid-template-columns: repeat(auto-fill, calc(66 * var(--u))); gap: calc(4 * var(--u)); }
#ventana .vt-fila { background: none; border-style: solid; border-color: transparent; border-width: 0; border-radius: 0; min-height: calc(56 * var(--u));
  border-image: url(../img/hud/hd/list-frame-bg.webp) 38 40 52 242 fill / calc(9.5 * var(--u)) calc(10 * var(--u)) calc(13 * var(--u)) calc(60.5 * var(--u)) stretch; padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
body.normal #ventana .vt-fila { border-image-source: url(../img/hud/n/list-frame-bg.webp); border-image-slice: 19 20 26 121 fill; }
#ventana .vt-fila-t b { font: 700 calc(15 * var(--u)) var(--letra); color: #fff; }
#ventana .vt-fila-t small { font: 700 calc(13 * var(--u)) var(--letra); color: #edd9a8; }
#ventana .vt-dos .vt-det { background: none; border: max(1px, calc(1 * var(--u))) solid #3b3324; border-radius: calc(8 * var(--u)); }
#ventana .vt-texto { font: 700 calc(15 * var(--u)) / 1.45 var(--letra); color: #fff; }
#ventana .inv-cab { font: 700 calc(14 * var(--u)) var(--letra); }
#ventana .vt-banco input { font: 700 calc(16 * var(--u)) var(--letra); border-style: solid; border-color: transparent; border-width: 0; background: none;
  border-image: url(../img/hud/hd/input-field2.webp) 36 fill / calc(9 * var(--u)) stretch; padding: calc(6 * var(--u)) calc(10 * var(--u)); color: #fff; }
#ventana .vt-confirma { background: rgba(6, 7, 11, .94); }
#ventana .menu-rejilla { min-width: 0; }
#ventana #vent-cuerpo :is(p, span, b, li, label, input, h4, div) { font-size: calc(15 * var(--u)); }
#ventana #vent-cuerpo small, #ventana #vent-cuerpo .ayuda { font-size: calc(13 * var(--u)); }
#ventana .vt-banco { min-width: calc(400 * var(--u)); gap: calc(8 * var(--u)); }
#ventana .vt-banco input { width: calc(150 * var(--u)); }
#ventana .vt-tit i { width: calc(66 * var(--u)); height: calc(66 * var(--u)); }

/* ======================= Chat abierto como la PC: 90 unidades de cada lado, 254 de alto, abajo ======================= */
#chat { left: calc(var(--izq) + 90 * var(--u)); right: calc(var(--der) + 90 * var(--u)); bottom: 0; height: calc(254 * var(--u)); border: 0; border-radius: 0; background: none; z-index: 6; }
#chat::before { content: ""; position: absolute; inset: 0; opacity: .9; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/chat-window-bg2.webp) 50 50 62 48 fill / calc(12.5 * var(--u)) calc(12.5 * var(--u)) calc(15.5 * var(--u)) calc(12 * var(--u)) stretch; pointer-events: none; }
body.normal #chat::before { border-image-source: url(../img/hud/n/chat-window-bg2.webp); border-image-slice: 25 25 31 24 fill; }
#chat-pestanas { position: relative; height: calc(50 * var(--u)); padding: 0 calc(110 * var(--u)) 0 0; gap: 0; flex: none; }
#chat-pestanas::before { content: ""; position: absolute; left: 0; right: calc(105 * var(--u)); top: 0; bottom: 0; opacity: .9; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/chat-tab-bg2.webp) 50 50 62 48 fill / calc(12.5 * var(--u)) calc(12.5 * var(--u)) calc(15.5 * var(--u)) calc(12 * var(--u)) stretch; pointer-events: none; }
body.normal #chat-pestanas::before { border-image-source: url(../img/hud/n/chat-tab-bg2.webp); border-image-slice: 25 25 31 24 fill; }
#chat-pestanas button { position: relative; width: calc(100 * var(--u)); height: calc(46 * var(--u)); padding: 0; border: 0; border-radius: 0; background: none; color: #edd9a8;
  font: 700 calc(15 * var(--u)) var(--letra); text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
#chat-pestanas button.activo { color: #fff; background: none; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(../img/hud/hd/chat-tab2.webp) 2 40 36 34 fill / calc(1 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(17 * var(--u)) stretch; }
body.normal #chat-pestanas button.activo { border-image-source: url(../img/hud/n/chat-tab2.webp); border-image-slice: 1 20 18 17 fill; }
#chat-cerrar { display: none; }
#chat-lineas { position: relative; padding: calc(4 * var(--u)) calc(8 * var(--u)); font: 700 calc(15 * var(--u)) / 1.45 var(--letra); color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
#chat-lineas .servidor { color: #00ffff; }
#chat-lineas { display: flex; flex-direction: column; } #chat-lineas > :first-child { margin-top: auto; }
#chat-form { position: relative; padding: 0 calc(5 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)); gap: calc(5 * var(--u)); }
#chat-form input { height: calc(40 * var(--u)); font: 700 calc(15 * var(--u)) var(--letra); border-style: solid; border-color: transparent; border-width: 0; border-radius: 0; background: none;
  border-image: url(../img/hud/hd/input-field2.webp) 36 fill / calc(9 * var(--u)) stretch; padding: 0 calc(12 * var(--u)); }
body.normal #chat-form input { border-image-source: url(../img/hud/n/input-field2.webp); border-image-slice: 18 fill; }
#chat-form button { height: calc(40 * var(--u)); border-style: solid; border-color: transparent; border-width: 0; border-radius: 0; background: none; padding: 0 calc(14 * var(--u)) calc(6 * var(--u));
  border-image: url(../img/hud/hd/boton.webp) 42 46 62 46 fill / calc(10.5 * var(--u)) calc(11.5 * var(--u)) calc(15.5 * var(--u)) calc(11.5 * var(--u)) stretch;
  font: 700 calc(14 * var(--u)) var(--letra); text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
/* con el chat abierto el boton "Chat \/" va arriba a la derecha del chat, en la fila de pestañas (como la PC) */
body.chat-abierto #b-chat { bottom: calc(204 * var(--u)); z-index: 7; }
/* 22/10: Rank, Guild, Change Outfit, Chests, Bestiary (js/extras.js) y Mercado propuesta B */
.lo-cofre { padding: 0; background: none; }
.lo-cofre .lo-c { pointer-events: none; }
.lo-cofre:active { filter: brightness(.9); }
.lo-c.lo-listo { filter: brightness(1.15); }
.lo-resultado { pointer-events: auto; }
/* 22/10: Grind > Chests nuevo (maqueta aprobada debug/cofres/maqueta): tarjetas de piedra + oro con la luz del tier y hojas animadas */
.lo-cf { padding: 0; background: none; color: inherit; pointer-events: auto; }
.lo-cf > * { pointer-events: none; }
.lo-cf:hover { filter: brightness(1.12); } .lo-cf:active { filter: brightness(.86); }
.lo-cf-luz { position: absolute; inset: calc(6 * var(--u)) calc(7 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, transparent) 0%, color-mix(in srgb, var(--c) 6%, transparent) 38%, transparent 60%, color-mix(in srgb, var(--c) 22%, transparent) 100%);
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) color-mix(in srgb, var(--c) 45%, transparent), inset 0 calc(10 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) color-mix(in srgb, var(--c) 35%, transparent); }
.lo-cf > .lo-cf-luz::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .10) 50%, transparent 58%); transform: translateX(var(--sh, -60%)); }
.lo-cf-lin { position: absolute; left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(86 * var(--u)); height: max(1px, calc(1 * var(--u))); background: linear-gradient(90deg, transparent, #e3c278 30%, #e3c278 70%, transparent); opacity: .75; }
.lo-cf-nom { filter: drop-shadow(0 0 calc(3 * var(--u)) var(--c)); }
.lo-cf-ra { position: absolute; }
.lo-cf-ra > .tx.n { position: absolute; }
.lo-cf-ra.sin .lo-cf-sp { filter: brightness(.72) saturate(.85); }
.lo-cf-ra.sin > .tx { opacity: .7; }
.lo-cf-sp { position: absolute; background-repeat: no-repeat; pointer-events: none; }
.lo-cf-sp.chico { left: calc(-0.75 * var(--u)); top: calc(-9.25 * var(--u)); width: calc(67.5 * var(--u)); height: calc(75 * var(--u)); }
.lo-cf-esc { pointer-events: auto; }
.lo-cf-esc > .lo-cf-luz { background: linear-gradient(0deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 5%, transparent) 45%, transparent 75%);
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) color-mix(in srgb, var(--c) 40%, transparent); }
.lo-cf-grande { padding: 0; background: none; border: 0; cursor: pointer; }
.lo-cf-grande .lo-cf-sp { left: 0; top: 0; width: 100%; height: 100%; }
.lo-cf-grande:hover { filter: brightness(1.1); }
.lo-cf-grande.listo::after { content: ""; position: absolute; left: calc(26 * var(--u)); right: calc(26 * var(--u)); bottom: calc(2 * var(--u)); height: max(1px, calc(2 * var(--u))); background: linear-gradient(90deg, transparent, #fff3b0, transparent); opacity: .7; }
.lo-resultado .lo-cf-ra { pointer-events: auto; cursor: pointer; }
.lo-resultado .lo-cf-ra.lo-listo { filter: brightness(1.15); }
.lo-in { position: absolute; box-sizing: border-box; background: none; color: #fff; font: calc(17 * var(--u)) / 1 sans-serif; padding: 0 calc(10 * var(--u)); outline: none; }
.lo-in::placeholder { color: #8d8a83; }
.lo-scroll > .lo-fila, .lo-fila { pointer-events: auto; }
.lo-color { padding: 0; border: 0; box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) rgba(0, 0, 0, .55); }
.lo-color.sel { box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff; z-index: 1; }
.lo-paleta { pointer-events: auto; }
.lo-look-c, .lo-bestia { padding: 0; background: none; }
.lo-look-c.sel::before { content: ""; position: absolute; inset: calc(4 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 230, 0, .22); pointer-events: none; }
.lo-look-c canvas, .lo-bestia canvas, .lo-look-pv { position: absolute; pointer-events: none; object-fit: contain; }
.lo-look-c:active, .lo-bestia:active { filter: brightness(.85); }
.lo-ranuraB > i { position: absolute; background: center / contain no-repeat; z-index: 1; pointer-events: none; }
.lo-ranuraB::after { content: ""; position: absolute; inset: calc(12 * var(--u)); background: radial-gradient(closest-side, var(--luz, rgba(255, 255, 255, .14)), transparent); pointer-events: none; }
.lo-gemaB { position: absolute; background: center / contain no-repeat; pointer-events: none; }
.lo-avisoB { display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--u)); padding-left: calc(16 * var(--u)); box-sizing: border-box; pointer-events: none; }
.lo-avisoB .tx { display: block; }
.lo-ofertaB .lo-b .tx { margin-top: calc(-4 * var(--u)); }
.lo-fondoV { position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; }
.lo-look-bg { position: absolute; pointer-events: none; }
.lo-look-bg:not(.tiene):not(.sel) { filter: brightness(.282); }
.lo-look-bg.sel { filter: sepia(1) saturate(4) hue-rotate(8deg) brightness(1.05); }
.lo-look-c canvas.oscuro { filter: brightness(.4); }
.lo-tabs.sin-lineas::before, .lo-tabs.sin-lineas::after { display: none; }
.lo-tabfondo { pointer-events: none; }
.lo-knob { position: absolute; background: url(../img/hud/hd/scroll_knob_v.webp) center / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
body.normal .lo-knob { background-image: url(../img/hud/n/scroll_knob_v.webp); }
.lo-t span.solo-texto { top: calc(13 * var(--u)); }