#wildlife-targets { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wildlife-target { position: absolute; z-index: 2; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; pointer-events: auto; touch-action: manipulation; }
.wildlife-target:hover { border-color: rgb(0 167 181 / .65); outline: 1px solid rgb(255 255 255 / .6); outline-offset: 2px; }
.wildlife-target:focus-visible { border-color: rgb(0 167 181 / .8); outline: 2px solid rgb(0 167 181 / .6); outline-offset: 2px; box-shadow: 0 0 0 5px rgb(255 255 255 / .22); }
.wildlife-hint { position: absolute; z-index: 1; width: 156px; max-width: calc(100% - 16px); padding: 9px 12px; border: 1px solid rgb(255 255 255 / .65); border-radius: 3px; color: var(--navy, #1a2340); background: rgb(250 252 250 / .95); box-shadow: 0 3px 14px rgb(12 28 23 / .16); pointer-events: auto; }
/* The 1px border plus this 9px bridge covers the 8px visual gap. The animal
   target stays above it so moving targets always retain their click surface. */
.wildlife-hint::before { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 9px; }
.wildlife-hint[data-side="below"]::before { top: auto; bottom: 100%; }
.wildlife-hint strong { display: block; font-size: 12px; line-height: 1.7; font-weight: 500; letter-spacing: .06em; }
.wildlife-hint span { display: block; color: #536865; font-size: 10px; line-height: 1.8; white-space: nowrap; }
.wildlife-launchers { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #d9dce3); }
.wildlife-launchers > span, .wildlife-launchers > p { margin: 0; color: #5d687d; font-size: 10px; }
.wildlife-launchers > div { display: flex; flex-wrap: wrap; gap: 0 18px; }
.wildlife-launchers [data-species] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border: 0; background: transparent; font-size: 11px; text-decoration: underline; text-decoration-color: #b1b8c4; text-underline-offset: 5px; }
.wildlife-launchers [data-species]:hover { color: #007d89; text-decoration-color: var(--cyan, #00a7b5); }
.wildlife-dialog { width: min(1000px, calc(100% - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 0; color: var(--navy, #1a2340); background: #fff; box-shadow: 0 20px 80px rgb(8 24 32 / .22); }
.wildlife-dialog:not([open]) { display: none; }
.wildlife-dialog::backdrop { background: rgb(16 24 39 / .7); }
.wildlife-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 24px; border-bottom: 1px solid #e7eaf0; background: #fff; }
.wildlife-header #wildlife-kind { margin: 0; color: #5d687d; font-size: 10px; letter-spacing: .14em; }
#wildlife-close { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: transparent; font-size: 12px; }
#wildlife-close span { font-size: 23px; font-weight: 400; line-height: 1; }
#wildlife-close:hover { color: #007d89; }
.wildlife-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.wildlife-photo-panel { min-width: 0; margin: 0; padding: 28px; background: #f1f4f3; }
#wildlife-photo { display: block; width: 100%; height: auto; max-height: 52vh; max-height: 52svh; object-fit: contain; object-position: center; }
#wildlife-caption { margin: 14px 0 0; font-size: 11px; line-height: 1.9; }
.wildlife-credits, #wildlife-credit { color: #5d687d; font-size: 10px; line-height: 1.9; overflow-wrap: anywhere; }
#wildlife-credit { margin: 10px 0 0; }
#wildlife-credit a { display: inline-block; padding-block: 4px; text-underline-offset: 3px; }
#wildlife-photo-error { margin: 0; padding: 28px 0; color: #5d687d; font-size: 12px; line-height: 2; }
.wildlife-gallery { min-width: 0; touch-action: pan-y pinch-zoom; }
.wildlife-gallery-stage { display: grid; place-items: center; width: 100%; min-width: 0; aspect-ratio: 3 / 2; max-height: 52vh; max-height: 52svh; overflow: hidden; background: #e8eeeb; }
.wildlife-gallery-stage #wildlife-photo { width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.wildlife-gallery-toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; margin-top: 14px; }
.wildlife-gallery-toolbar > button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #c4cecb; border-radius: 50%; color: #294440; background: #fff; font-size: 28px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.wildlife-gallery-toolbar > button:hover { border-color: #007d89; color: #007d89; }
.wildlife-gallery-toolbar > button:focus-visible { outline: 2px solid #007d89; outline-offset: 3px; }
.wildlife-gallery-status { min-width: 0; text-align: center; }
.wildlife-gallery-label { display: block; color: #294440; font-size: 11px; font-weight: 500; line-height: 1.8; }
.wildlife-gallery-counter { display: block; color: #5d687d; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.8; }
.wildlife-body { min-width: 0; padding: 24px 32px 30px; }
#wildlife-title { margin: 0; font-size: clamp(27px, 3.2vw, 36px); line-height: 1.65; letter-spacing: .08em; }
#wildlife-scientific { margin: 3px 0 24px; color: #5d687d; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-style: italic; letter-spacing: .03em; }
.wildlife-description { font-size: 12px; line-height: 2.1; letter-spacing: .025em; }
.wildlife-description p { margin: 0 0 16px; }
.wildlife-facts { display: grid; grid-template-columns: minmax(60px, 8em) minmax(0, 1fr); gap: 10px 16px; margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--line, #d9dce3); font-size: 11px; line-height: 1.9; }
.wildlife-facts dt { color: #5d687d; }
.wildlife-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.wildlife-sources { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line, #d9dce3); }
.wildlife-sources > p, .wildlife-sources > h3 { margin: 0 0 6px; color: #5d687d; font-size: 10px; font-weight: 400; letter-spacing: .08em; }
#wildlife-source { margin: 0; padding: 0; list-style: none; }
#wildlife-source a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding-block: 6px; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.wildlife-dialog a:hover { color: #007d89; }
@media (max-width: 700px) {
  .wildlife-header { min-height: 60px; padding: 8px 20px; }
  .wildlife-layout { grid-template-columns: minmax(0, 1fr); }
  .wildlife-photo-panel { padding: 20px; }
  #wildlife-photo { max-height: 40vh; max-height: 40svh; }
  .wildlife-gallery-stage { max-height: 40vh; max-height: 40svh; }
  .wildlife-gallery-stage #wildlife-photo { max-height: 100%; }
  .wildlife-body { padding: 22px 24px 28px; }
  #wildlife-title { font-size: 29px; }
  #wildlife-scientific { margin-bottom: 20px; }
  .wildlife-facts { gap: 10px 14px; }
  .wildlife-launchers { gap: 0 16px; }
}