/* =====================================================================
   Jugadores en vivo - Mapa Medieval
   Se carga DESPUES de mapaui.css (reutiliza sus variables)
   ===================================================================== */

/* --- el marcador del jugador --- */
.jv-marcador {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jv-cabeza {
    position: relative;
    width: 32px;
    height: 32px;
    border: 2px solid var(--jv-color, #7fd45a);
    border-radius: 4px;
    background: var(--jv-color, #7fd45a);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Respaldo: la inicial va DEBAJO de la cara. Si la imagen carga la
   tapa entera; si falla, el onerror la esconde y queda la inicial.
   Asi nunca se ve un icono roto. */
.jv-inicial {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    user-select: none;
}

.jv-cara {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;   /* las skins son 8x8, no interpolar */
}

/* el tuyo, con anillo para distinguirlo de un vistazo */
.jv-marcador.jv-yo .jv-cabeza {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px var(--ui-ok, #7fd45a), 0 2px 8px rgba(0, 0, 0, .8);
}

.jv-corona {
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 13px;
    line-height: 1;
    color: #ffcc44;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
    pointer-events: none;
}

.jv-nombre {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 5px;
    background: rgba(18, 20, 18, .85);
    border-radius: 3px;
    color: #f2f4f1;
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* Deslizamiento entre actualizaciones: sin esto los jugadores dan un
   salto seco cada 15 s. Se desactiva mientras Leaflet anima el zoom,
   porque ahi los transform los mueve el, y las dos animaciones juntas
   hacen que los iconos naden por la pantalla. */
.leaflet-container:not(.leaflet-zoom-anim) .leaflet-marker-icon.jv-animado {
    transition: transform 900ms ease-out;
}

/* --- chip de estado --- */
.leaflet-top .jv-estado {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0 10px;
    padding: 6px 11px;
    background: var(--ui-fondo, rgba(18, 20, 18, .9));
    border: 2px solid var(--ui-borde-2, #2f3a2c);
    border-radius: 4px;
    color: var(--ui-texto, #f2f4f1);
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    white-space: nowrap;
}

.jv-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-suave, #9fae9f);
    flex: none;
}

.jv-estado.ok    { border-color: var(--ui-borde, #5b9c3d); }
.jv-estado.ok    .jv-punto { background: var(--ui-ok, #7fd45a); }
.jv-estado.vacio .jv-punto { background: var(--ui-suave, #9fae9f); }
.jv-estado.viejo { border-color: #8e6100; }
.jv-estado.viejo .jv-punto { background: #e7b44c; }
.jv-estado.error { border-color: #8a3324; }
.jv-estado.error .jv-punto { background: #f07a66; }

/* El punto late solo cuando hay datos buenos, para que se note que
   esto esta vivo y no es una captura congelada. */
.jv-estado.ok .jv-punto {
    animation: jv-latido 2.4s ease-in-out infinite;
}
@keyframes jv-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .jv-estado.ok .jv-punto { animation: none; }
    .leaflet-container .leaflet-marker-icon.jv-animado { transition: none; }
}


/* --- Jugador anonimo -------------------------------------------------
   Los que no son de tu party llegan sin nombre desde el servidor. Se
   dibujan como un punto, mas discreto que una cabeza: se ve que hay
   alguien ahi, que es de lo que se trata, sin senalar a nadie.

   Nada de inicial: delataria la primera letra del nombre. */
.jv-marcador.jv-sin-nombre .jv-cabeza {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    opacity: .82;
}

.jv-anonimo {
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    user-select: none;
}

.jv-marcador.jv-sin-nombre .jv-nombre {
    top: 26px;
    opacity: .72;
    font-style: italic;
}


/* --- Tipografia de Minecraft -----------------------------------------
   Pixelify Sans, con licencia SIL Open Font, servida desde aqui y no
   pedida a Google en cada visita: una peticion menos por persona y una
   cosa menos que se pueda caer.

   NO es la fuente de Minecraft: esa es de Mojang y no se puede
   redistribuir. Esta es libre y da el mismo aire.

   Y ojo, lo que mas hace que un cartel "parezca Minecraft" no es la
   fuente sino la sombra de 1 pixel abajo a la derecha, sin difuminar.
   El juego dibuja asi todos sus textos. */
@font-face {
    font-family: "Pixelify Sans";
    src: url("fuentes/pixelifysans.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

.jv-nombre {
    font-family: "Pixelify Sans", "Courier New", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    border-radius: 0;              /* los carteles del juego son rectangulos */
    background: rgba(0, 0, 0, .55);
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .95);
    padding: 2px 5px 1px;
    image-rendering: pixelated;
}

.jv-marcador.jv-yo .jv-nombre {
    color: #ffe97f;                /* el tuyo, en amarillo, como en el juego */
}

.jv-inicial {
    font-family: "Pixelify Sans", "Segoe UI", sans-serif;
}

.leaflet-tooltip.jv-tooltip {
    font-family: "Pixelify Sans", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: .4px;
    border-radius: 0;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .9);
}