.osOverlayHighlight {
  background-color: rgba(56, 162, 204, 0.401);
  border: rgba(255, 0, 0, 0.1) dashed 1px;
  position: relative; /* Ensure positioning context for the span */
  overflow: hidden;
}

.osOverlayHighlight:hover {
  border: red dashed 2px;
  display: block;
}

.osOverlayHighlight span {
  display: none; /* Initially hide the span text */
}

.osOverlayHighlight:hover span {
  display: inline;
}

.osOverlayText {
  display: none;
  font-size: 1vw;
  line-height: 1.5em;
}
.osOverlayText:hover {
  display: block;
}

.overlay.biomes {
  background: rgba(0, 0, 0, 0.1);
  border: 0.15em solid;
  border-radius: 0.5em;

  & > span {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & > span {
      text-align: center;
      font-weight: bold;
      font-size: 1.3em;
      text-shadow: 0 0 0.5em #000;
    }
  }
}

div:has(> div > .osOverlayPOI) {
  position: relative;
  transform: translate(-50%, -50%);
  --border-color: #47546b;
  pointer-events: auto;
  z-index: 10;
}

.osOverlayPOI {
  overflow: hidden;
  background-color: transparent;
  border: none;
  border-radius: 0.25em;
  line-height: 0;

  & > img {
    --size: 30px;
    min-width: var(--size);
    min-height: var(--size);
  }
}

.osOverlayPopup {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -0.3em) scale(0.9);
  font-size: 14px;
  padding: 0.85em 1.1em;
  border: 0.125em solid var(--border-color);
  border-radius: 0.4em;
  background-color: #1a1f2a;
  left: 50%;
  bottom: 100%;
  min-width: 32em;
  max-width: min(56em, 95vw);
  transition: 0.1s ease-out;
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.6);
}

.osOverlayPopup::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.625em solid transparent;
  border-right: 0.625em solid transparent;
  border-top: 0.625em solid var(--border-color);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Hide the arrow when the popup has been repositioned to fixed */
.osOverlayPopup.popup-repositioned::before {
  display: none;
}

div:has(> .osOverlayPOI):hover .osOverlayPopup,
.osOverlayPopup.force-show {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -0.35em) scale(1);
}

.osOverlayPopup h2 {
  font-size: 1.5em;
  text-wrap: nowrap;
}

.osOverlayPopup h3 {
  font-size: 1em;
  color: #ccc;
}

.osOverlayPopup p {
  font-size: 0.9em;
  color: #ccc;
}

.osOverlayPopup a {
  color: #ffc107;
}

/* ─── Extended-info section (pro-gated) ─────────────────────────────────── */

/* Modal must render above the marker tooltip (z-index: 10000) and OSD overlay
   popups so the auth/login modal isn't visually buried under the popup the
   user clicked the CTA from. Bootstrap's default modal z-index (1055) loses
   to the marker tooltip. */
.modal { z-index: 100000 !important; }
.modal-backdrop { z-index: 99999 !important; }

/* Bartender material-type colors — matched 1:1 with bartender's custom.css. */
.material-type-solid  { color: oklch(70.9% 0.01 56.259); }
.material-type-liquid { color: oklch(80.9% 0.105 251.813); }
.material-type-powder { color: oklch(91% 0.096 180.426); }
.material-type-gas    { color: oklch(83.3% 0.145 321.434); }
.material-type-fire   { color: oklch(80.8% 0.114 19.571); }
.material-type-acid   { color: oklch(72.3% 0.219 149.579); }

/* ── Section wrapper ── */
.extended-info-section {
  margin-top: 0.85em;
  padding-top: 0.85em;
  border-top: 0.065em solid #3a3a4a;
  font-size: 1em;
  line-height: 1.5;
  color: #ccc;
}

.extended-info-header {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #777;
  margin-bottom: 0.6em;
}

/*
 * ── Card layout ──
 *
 * Card roots are plain block containers.  Each logical section (subhead +
 * its rows) is wrapped in an .extended-info-group.  Groups with many rows
 * (>= 5) get the --cols modifier which uses CSS multi-column layout so
 * rows flow into two balanced columns.  Smaller groups stay single-column.
 */
.extended-info-creature,
.extended-info-spell,
.extended-info-material {
  display: block;
}

/* ── Group wrappers ── */
.extended-info-group {
  break-inside: avoid;
}

/* Vertical rhythm between sibling groups */
.extended-info-group + .extended-info-group {
  margin-top: 0.55em;
  padding-top: 0.45em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Large groups: flow rows into 2 balanced columns. Min column width is wide
   enough that long translated labels (e.g. JP "近接ダメージ", DE "Elektrischer
   Sch.") don't squeeze the value column to the point that single numbers
   like "1.0" wrap to multiple lines. */
.extended-info-group--cols {
  columns: 2 14em;
  column-gap: 1.2em;
}

/* Each row is a self-contained label:value grid. */
.extended-info-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.6em;
  align-items: baseline;
  break-inside: avoid;
  padding: 0.08em 0;
}

.extended-info-label {
  color: #888;
  white-space: nowrap;
  font-size: 0.93em;
}

.extended-info-value {
  color: #ddd;
  /* break-word lets very long single words wrap at the line edge but does NOT
     break inside short tokens like "1.0" or "0.8" — that was causing single
     numbers to split across three lines in narrow popup grids. */
  word-break: break-word;
  min-width: 0;
}

/* ── Subheadings ── */
.extended-info-subhead {
  margin-bottom: 0.15em;
  font-size: 0.78em;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Inside a --cols group, the subhead spans all columns */
.extended-info-group--cols > .extended-info-subhead {
  column-span: all;
}

/* ── Description (spell) ── */
.extended-info-desc {
  break-inside: avoid;
  font-style: italic;
  color: #bbb;
  margin-bottom: 0.3em;
}

/* ── Reaction links ── */
.extended-info-reactions {
  break-inside: avoid;
  margin-top: 0.55em;
  padding-top: 0.45em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
}

/* Bartender / wiki link */
.extended-info-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: #ffc107 !important;
  font-size: 0.92em;
  text-decoration: underline;
  text-decoration-color: rgba(255, 193, 7, 0.4);
  width: max-content;
}

.extended-info-link:hover {
  color: #ffd36e !important;
  text-decoration-color: rgba(255, 211, 110, 0.8);
}

.extended-info-link i {
  font-size: 0.75em;
  opacity: 0.6;
}

/* ── Creature material entries (Blood / Corpse) ── */
.extended-info-mat-list {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.extended-info-mat-entry {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}

.extended-info-mat-kind {
  color: #888;
  font-size: 0.92em;
}

/* ── Loading / empty states ── */
.extended-info-loading,
.extended-info-empty {
  font-size: 0.92em;
  color: #777;
  font-style: italic;
}

/* ── Tag links in material popups ── */
.extended-info-tag-link {
  color: #ffc107;
  text-decoration: underline;
  text-decoration-color: rgba(255, 193, 7, 0.4);
}
.extended-info-tag-link:hover {
  color: #ffd36e;
  text-decoration-color: rgba(255, 211, 110, 0.8);
}

/* ── Placeholder (non-pro users) ── */
.extended-info-placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.5em 0.65em;
  border: 0.065em dashed #b08a2a;
  border-radius: 0.25em;
  background: linear-gradient(180deg, rgba(90, 68, 24, 0.18) 0%, rgba(36, 26, 5, 0.18) 100%);
}

.extended-info-placeholder-label {
  color: #ffd36e;
  font-size: 0.92em;
}

.extended-info-placeholder-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1em 0.8em;
  align-items: center;
}

.extended-info-placeholder-fields .extended-info-label {
  color: #998a6e;
}

/* Skeleton bar — static, no animation */
.extended-info-skeleton {
  display: block;
  width: 4em;
  height: 0.7em;
  border-radius: 0.15em;
  background: rgba(160, 130, 60, 0.22);
}

.extended-info-cta {
  align-self: flex-start;
  background: rgba(255, 211, 110, 0.12);
  border: 0.065em solid #b08a2a;
  color: #ffd36e;
  font-size: 0.92em;
  padding: 0.2em 0.55em;
  border-radius: 0.2em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.extended-info-cta:hover {
  background: rgba(255, 211, 110, 0.22);
  border-color: #ffd36e;
}

#osContainer .overlay {
  display: none !important;
  position: relative; /* Ensure z-index works */
}

#osContainer.show-structures .overlay.structures,
#osContainer.show-items .overlay.items,
#osContainer.show-bosses .overlay.bosses,
#osContainer.show-orbAreas .overlay.orbAreas,
#osContainer.show-orbs .overlay.orbs,
#osContainer.show-spatialAwareness .overlay.spatialAwareness,
#osContainer.show-hiddenMessages .overlay.hiddenMessages,
#osContainer.show-biomeBoundaries .overlay.biomeBoundaries,
#osContainer .overlay.biomes.show {
  display: block !important;
}

/* Ensure POI overlays are always on top */
.overlay.structures,
.overlay.items,
.overlay.bosses,
.overlay.orbs,
.overlay.spatialAwareness,
.overlay.hiddenMessages {
  z-index: 10 !important;
  pointer-events: auto;
}

/* Biome boundaries should be behind POIs */
.overlay.biomeBoundaries {
  z-index: 1 !important;
}

/* Biome overlays in the middle */
.overlay.biomes {
  z-index: 2 !important;
}

/* Area overlays */
.overlay.orbAreas {
  z-index: 3 !important;
}

img[src$="spatial_awareness_special_spot.png"] {
    transform: scale(0.75);
}

/* Pan-to-target pulse marker animation */
@keyframes pan-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    border-width: 0.2em;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
    border-width: 0.065em;
  }
}

/* Canvas sprites rendered from atlas in POI overlays */
.osOverlayPOI > canvas {
  --size: 30px;
  min-width: var(--size);
  min-height: var(--size);
  image-rendering: pixelated;
}