/* República de Lemuy 3D — HUD sobre el mundo */
:root{
  --tinta:#eaf2f7; --suave:#a9c0cf;
  --caja:#101f2acc; --borde:#2b5570;
  --oro:#ffc14d; --vida:#d9453f; --xp:#49b36b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0a1620;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--tinta)}
.oculto{display:none !important}
#lienzo{position:fixed;inset:0;display:block;touch-action:none;
  image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}

/* ---------------------------------------------------- pantallas completas */
.pantalla,.cortina{position:fixed;inset:0;display:grid;place-items:center;z-index:40;
  padding:16px;overflow:auto;background:radial-gradient(circle at 50% 25%,#1c4966,#08151f)}
.cortina{background:#04101acc;z-index:45}
.caja{width:min(520px,100%);background:#0f2231;border:2px solid var(--borde);
  border-radius:18px;padding:26px;box-shadow:0 20px 60px #0008;text-align:center}
.caja h1{margin:0 0 6px;font-size:30px}
.caja h2{margin:0 0 10px;font-size:26px}
.bajada{color:var(--suave);margin:0 0 20px}
.caja label{display:block;margin:16px 0 8px;font-weight:bold;text-align:left}
#nombre{width:100%;padding:13px;font-size:18px;border-radius:11px;
  border:2px solid var(--borde);background:#0a1a26;color:var(--tinta)}
#nombre:focus{outline:none;border-color:var(--oro)}
.fila-opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{width:44px;height:44px;border-radius:11px;border:3px solid transparent;
  cursor:pointer}
.opcion.elegida{border-color:var(--oro);transform:scale(1.08)}
.boton{background:var(--oro);color:#2b1c00;border:none;border-radius:11px;
  padding:10px 14px;font-size:16px;font-weight:bold;cursor:pointer}
.boton.grande{width:100%;margin-top:20px;padding:15px;font-size:19px}
.boton:disabled{background:#3b5567;color:#8ba3b4;cursor:not-allowed}
.error{color:#ff8a8a;min-height:20px;margin:10px 0 0}
.pie{color:var(--suave);font-size:13px;margin:16px 0 0;line-height:1.7;text-align:left}
#cargando{font-size:20px;color:var(--suave)}

/* ------------------------------------------------------------------- HUD */
.panel{position:fixed;background:var(--caja);border:1px solid var(--borde);
  border-radius:12px;padding:10px;backdrop-filter:blur(3px);z-index:10}
.mini{font-size:12px;color:var(--suave)}

#ficha{left:12px;top:12px;width:250px}
.fila-ficha{display:flex;gap:10px;align-items:center}
.escudo{width:40px;height:40px;flex:none;border-radius:50%;background:#1d3d54;
  border:2px solid var(--oro);display:grid;place-items:center;font-weight:bold;font-size:17px}
.barras{flex:1;display:flex;flex-direction:column;gap:5px}
.barra{position:relative;height:17px;background:#0a1a26;border-radius:6px;
  overflow:hidden;border:1px solid #2a4a60}
.barra i{position:absolute;inset:0;width:0;background:var(--vida);
  transition:width .18s;display:block}
.barra.xp{height:9px}
.barra.xp i{background:var(--xp)}
.barra span{position:relative;display:block;text-align:center;font-size:11px;
  line-height:15px;text-shadow:0 1px 2px #000}

#objetivo{left:50%;top:12px;transform:translateX(-50%);width:280px}
.fila-obj{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.barra.enemiga i{background:#c8552f}
.cuento{margin:6px 0 0;line-height:1.35}

#panel-lado{right:12px;top:12px;width:230px;max-height:52vh;overflow-y:auto}
#panel-lado h3{margin:2px 0 8px;font-size:13px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.5px}
#panel-lado h3+div{margin-bottom:12px}
.villa,.fila{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:13px}
.punto{width:11px;height:11px;border-radius:3px;flex:none}
.vn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vn small{color:var(--suave)}
.vd{color:var(--suave);font-size:12px}
.fila.acompanando .vd{color:var(--oro)}

#acciones{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:10px;z-index:12}
.accion{position:relative;width:92px;height:70px;border-radius:14px;
  border:2px solid var(--borde);background:var(--caja);color:var(--tinta);
  font-size:26px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.accion span{font-size:10px;line-height:1.1;color:var(--suave)}
.accion.encendido{border-color:var(--oro);background:#43301099}
.accion.enfriando{opacity:.5}
.accion em{position:absolute;inset:0;display:grid;place-items:center;
  font-style:normal;font-size:20px;font-weight:bold;color:var(--oro)}

#chat{position:fixed;left:12px;bottom:18px;width:330px;z-index:11}
#chat-log{max-height:150px;overflow-y:auto;font-size:13px;
  background:#08151ecc;border-radius:10px;padding:6px 9px;margin-bottom:6px}
#chat-log:empty{display:none}
.linea-chat{padding:2px 0;line-height:1.35;word-break:break-word}
#chat-texto{width:100%;padding:8px 11px;border-radius:10px;
  border:1px solid var(--borde);background:#08151ecc;color:var(--tinta)}
#chat-texto:focus{outline:none;border-color:var(--oro);background:#0d2231}

/* --------------------------------------------- letreros sobre los personajes */
#placas{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.placa{position:absolute;left:0;top:0;text-align:center;white-space:nowrap}
.pnombre{display:block;font-size:12px;font-weight:bold;
  text-shadow:0 1px 3px #000,0 0 6px #000}
.pbarra{display:block;width:66px;height:5px;margin:2px auto 0;background:#0009;
  border-radius:3px;overflow:hidden}
.pbarra i{display:block;height:100%;background:#d9453f;width:100%}
.placa.apuntado .pbarra{outline:2px solid var(--oro);width:78px}

.dano{position:absolute;transform:translate(-50%,-50%);font-weight:bold;
  font-size:19px;color:#ffe6a0;text-shadow:0 2px 4px #000;
  animation:sube 1.1s ease-out forwards;pointer-events:none}
.dano.propio{color:#ff8a8a}
.dano.critico{color:#ffd24d;font-size:26px}
@keyframes sube{to{transform:translate(-50%,-160%);opacity:0}}

#letrero-villa{position:fixed;left:50%;top:74px;transform:translateX(-50%);
  background:#0d2231e8;border:3px solid #8b98a4;border-radius:12px;
  padding:8px 26px;text-align:center;z-index:16;animation:aparece .35s;
  box-shadow:0 6px 20px #0007}
#letrero-villa b{display:block;font-size:19px;letter-spacing:.5px}
#letrero-villa span{font-size:12px;color:var(--suave)}

#anuncios{position:fixed;left:50%;top:150px;transform:translateX(-50%);
  z-index:15;display:flex;flex-direction:column;gap:6px;align-items:center;
  pointer-events:none}
.anuncio{background:#0d2231e0;border:1px solid var(--borde);border-radius:10px;
  padding:8px 16px;font-size:14px;animation:aparece .3s}
.anuncio.bien{border-color:var(--oro);color:var(--oro)}
.anuncio.peligro{border-color:#e5484d;color:#ffb4a8;font-weight:bold;
  animation:aparece .3s, latido 1s ease-in-out infinite}
@keyframes latido{50%{background:#4a1d24e0}}
@keyframes aparece{from{opacity:0;transform:translateY(-8px)}}

/* --------------------------------------------------------- mando de tocar */
#tactil{position:fixed;inset:0;pointer-events:none;z-index:12}
#joystick{position:absolute;left:26px;bottom:110px;width:130px;height:130px;
  border-radius:50%;background:#0c1e2b88;border:2px solid var(--borde);
  pointer-events:auto;touch-action:none}
#joystick-palo{position:absolute;left:50%;top:50%;width:54px;height:54px;
  margin:-27px 0 0 -27px;border-radius:50%;background:#2b5570cc;
  border:2px solid var(--oro)}

/* el minimapa se dibuja en el lienzo, abajo a la derecha: deja el sitio libre */


/* diálogo de fundación */
#fundar-caja input{width:100%;padding:11px;font-size:16px;border-radius:10px;
  border:2px solid var(--borde);background:#0a1a26;color:var(--tinta)}
#fundar-caja input:focus{outline:none;border-color:var(--oro)}
#fundar-caja label{margin-top:14px}

/* aviso de navegación */
#navegando{position:fixed;left:50%;top:74px;transform:translateX(-50%);
  background:#0d2231e8;border:2px solid #4a90b8;border-radius:12px;
  padding:8px 22px;font-size:15px;z-index:16;animation:aparece .3s}
#acciones{flex-wrap:wrap;justify-content:center;max-width:96vw}

/* ================================================== botones flotantes del HUD */
#botones-hud{position:fixed;right:12px;top:12px;display:flex;gap:6px;z-index:20}
.tg{position:relative;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--borde);background:var(--caja);color:var(--tinta);
  font-size:19px;cursor:pointer;backdrop-filter:blur(3px)}
.tg.encendido{border-color:var(--oro);background:#43301099}
.tg em{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;
  border-radius:9px;background:var(--vida);color:#fff;font-style:normal;
  font-size:11px;line-height:17px;font-weight:bold}
.tg em:empty{display:none}

/* el panel y el chat se abren y cierran siempre; en pantalla grande van abiertos */
#panel-lado,#panel-equipo,#panel-tienda{transform:translateX(calc(100% + 20px));
  transition:transform .22s ease;top:62px;max-height:calc(100vh - 210px)}
#panel-lado.abierto,#panel-equipo.abierto,#panel-tienda.abierto{transform:none}
#panel-equipo,#panel-tienda{right:12px;width:290px;overflow-y:auto}
#panel-equipo h3,#panel-tienda h3{margin:2px 0 8px;font-size:13px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.5px}
#chat{transition:transform .22s ease, opacity .22s}
#chat:not(.abierto){transform:translateY(24px);opacity:0;pointer-events:none}

.fila-clan{display:flex;gap:6px;margin-top:8px}
.fila-clan input{flex:1;min-width:0;padding:7px 9px;border-radius:9px;
  border:1px solid var(--borde);background:#0a1a26;color:var(--tinta);font-size:13px}
.fila-clan input:focus{outline:none;border-color:var(--oro)}
.fila-clan .boton{padding:7px 11px;font-size:13px}

/* ============================================================ pantalla chica */
body.compacto #ficha{width:190px;left:8px;top:8px;padding:7px}
body.compacto .escudo{width:32px;height:32px;font-size:14px}
body.compacto .barra{height:14px}
body.compacto .barra span{font-size:10px;line-height:12px}
body.compacto .barra.xp{height:7px}
body.compacto #ficha .mini{font-size:11px}

body.compacto #objetivo{top:76px;left:8px;transform:none;width:190px;padding:8px}
body.compacto .cuento{display:none}

body.compacto #panel-lado,body.compacto #panel-equipo,body.compacto #panel-tienda{top:76px;right:8px;width:min(300px,84vw);
  max-height:calc(100vh - 230px);font-size:13px}

/* el chat, como cajón que baja desde arriba */
body.compacto #chat{left:8px;right:8px;top:76px;bottom:auto;width:auto;z-index:19}
body.compacto #chat:not(.abierto){transform:translateY(-130%);opacity:0}
body.compacto #chat-log{max-height:34vh;background:#08151ef2}

/* botones de acción: sólo íconos, en dos columnas al alcance del pulgar */
body.compacto #acciones{left:auto;right:8px;bottom:12px;transform:none;
  display:grid;grid-template-columns:repeat(2,56px);gap:7px;justify-content:end}
body.compacto .accion{width:56px;height:56px;font-size:24px;padding:0}
body.compacto .accion span{display:none}
body.compacto .accion em{font-size:17px}

body.compacto #joystick{left:16px;bottom:16px;width:120px;height:120px}
body.compacto #joystick-palo{width:50px;height:50px;margin:-25px 0 0 -25px}

body.compacto #letrero-villa{top:156px;padding:6px 16px}
body.compacto #letrero-villa b{font-size:16px}
body.compacto #anuncios{top:214px;width:92vw}
body.compacto .anuncio{font-size:13px;padding:7px 12px}
body.compacto #navegando{top:156px;font-size:13px;padding:6px 14px}

/* pantallas muy bajas (celular acostado) */
@media (max-height:460px){
  body.compacto #ficha{width:160px}
  body.compacto #objetivo{display:none}
  body.compacto #acciones{grid-template-columns:repeat(3,50px)}
  body.compacto .accion{width:50px;height:50px;font-size:21px}
  body.compacto #joystick{width:100px;height:100px}
}

/* la ayuda de la pantalla de entrada cambia según cómo se juegue */
.solo-tacto{display:none}
body.compacto .solo-teclado{display:none}
body.compacto .solo-tacto{display:block}

/* ================================================================== mochila */
.arma{display:flex;align-items:center;gap:7px;padding:5px 7px;margin-bottom:4px;
  background:#0d2231;border-left:4px solid #4fbf63;border-radius:7px;font-size:13px}
.arma.puesta{background:#14344a}
.arma .an{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold}
.arma .ad{color:var(--tinta);font-size:12px}
.arma .boton{padding:4px 8px;font-size:12px}
.arma .boton.chico{padding:4px 7px}
#mi-arma{margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.compacto #mi-arma{font-size:11px}

/* un botón que se puede apretar igual, pero se ve apagado: el servidor explica
   por qué no se puede, en vez de no hacer nada */
.boton.enfriando{opacity:.55}

/* ranuras de equipo */
.ranura{display:flex;align-items:center;gap:7px;padding:4px 7px;margin-bottom:3px;
  background:#0b1d2b;border-left:4px solid #31465a;border-radius:7px;font-size:13px}
.ranura.vacia{opacity:.6}
.ranura .re,.arma .re{font-size:14px;width:17px;text-align:center;flex:none}
.ranura .an{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranura .boton{padding:3px 7px;font-size:11px}

/* ================================================================== ranking */
.rank{display:flex;align-items:center;gap:7px;padding:5px 4px;
  border-top:1px solid #ffffff12}
.rank:first-child{border-top:none}
.rank.miafila{background:#14344a;border-radius:8px}
.rank .puesto{width:22px;text-align:center;font-size:14px;flex:none;color:var(--suave)}
.rank .rdatos{flex:1;min-width:0}
.rank .rnombre{font-size:13px;font-weight:bold;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rank .rnombre small{font-weight:normal;color:var(--suave)}
.rank .rsub{font-size:11px;color:var(--suave)}
.rank .rpoder{font-size:13px;font-weight:bold;color:var(--oro);flex:none}

/* emblemas de clan */
.emblemas{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.emb{width:30px;height:30px;border-radius:8px;font-size:16px;cursor:pointer;
  background:#0b1d2b;border:2px solid transparent;color:var(--tinta);line-height:1}
.emb.elegido{border-color:var(--oro);background:#2a3a24}
.escudo-clan{font-size:17px}


/* ------------------------------------------------- elegir clase al entrar */
.fila-clases{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px;
}
.clase{
  background: #16283a; border: 2px solid #2b435c; border-radius: 10px;
  color: #cfe0ee; padding: 8px 2px 6px; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .12s, background .12s, transform .12s;
}
.clase:hover{ background: #1d3550; }
.clase .em{ font-size: 22px; line-height: 1; }
.clase .nb{ font-size: 12px; font-weight: 700; }
.clase.elegida{ border-color: #ffc247; background: #24405c; transform: translateY(-2px); }
#clase-cuento{ min-height: 32px; margin: 0 0 8px; text-align: center; }