/*
 * OceraOT — correcciones específicas para Who Is Online.
 * No altera Character Profile ni otras páginas.
 */

/* ---------- FRAGS: ALINEACIÓN DE CALAVERAS ---------- */

.ocera-online-frags .ocera-frag-rule {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-width: 310px !important;
  text-align: left !important;
  line-height: 16px !important;
}

.ocera-online-frags .ocera-frag-rule > img {
  display: block !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  vertical-align: middle !important;
}

.ocera-online-frags .ocera-frag-rule > span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ocera-online-frags .ocera-frag-rule strong,
.ocera-online-frags .ocera-frag-rule small {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 16px !important;
  vertical-align: baseline !important;
}


/* ---------- PLAYERS ONLINE: OUTFITS ---------- */

/* Las filas necesitan espacio real para una criatura de 64 px. */
.ocera-online-players .TableContent tbody tr:not(:first-child) {
  height: 68px !important;
  min-height: 68px !important;
}

/* Celda Outfit. */
.ocera-online-players .TableContent tbody tr:not(:first-child) td:nth-child(2) {
  position: relative !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 68px !important;
  padding: 2px 4px !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* Neutraliza el position:absolute y los márgenes negativos del HTML actual. */
.ocera-online-players img[alt="player outfit"] {
  position: static !important;
  display: block !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: pixelated;
  transform: none !important;
}

/* Las demás celdas quedan verticalmente centradas con el outfit. */
.ocera-online-players .TableContent tbody tr:not(:first-child) td {
  vertical-align: middle !important;
}


/* ---------- CÍRCULOS NEGROS INFERIORES ---------- */

/*
 * El formulario de búsqueda de personajes se está insertando también
 * debajo de la tabla Online. Sus SVG producen los círculos negros.
 * Se oculta únicamente cuando la página contiene el panel Online.
 */
body:has(.ocera-online-players) .ocera-character-search {
  display: none !important;
}

/* Respaldo adicional para que ningún SVG de esa sección se desborde. */
body:has(.ocera-online-players) .ocera-character-search svg,
body:has(.ocera-online-players) .ocera-character-search circle,
body:has(.ocera-online-players) .ocera-character-search path {
  display: none !important;
}