/* ===================================================
   TheCuzzorts — Hunting
   Public page: Turkey (full map/slam/photo feature set, absorbed from
   the now-retired /turkey-hunting) and Whitetail Deer (bucks catalog)
   lead as prominent sections, followed by a species checklist for
   everything else — card-with-chips pattern mirrors /fishing; category
   grouping, person filter, and watch-list chips are original to this
   page.
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');

/* --- Reset & Base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  --section: #22703D;
  --section-on-dark: #57BD83;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  background: var(--bg, #f0f2f5);
  color: var(--text, #222);
  min-height: 100vh;
}

/* --- Section panels (anchor-nav targets) ----------- */
/* 6rem, not 4rem -- the sticky header (global cross-site strip + this
   page's own nav row) measures ~77px tall, which 4rem (64px) doesn't
   clear, so anchor jumps landed with the target's top ~13px tucked
   under the header. */
.section-panel {
  scroll-margin-top: 6rem;
}

.section-panel + .section-panel {
  margin-top: 2rem;
}

/* --- Stats strip -------------------------------------- */
.stats-strip {
  max-width: 700px;
  margin: 0.5rem auto 2.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border, #c6cfd7);
  border: 1px solid var(--border, #c6cfd7);
  border-radius: 10px;
  overflow: hidden;
}

.stat {
  background: var(--surface, #fff);
  text-align: center;
  padding: 0.9rem 1rem;
}

.stat-num {
  display: block;
  font-family: 'Kreon', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--section);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #7d8a97);
  margin-top: 0.15rem;
}

.privacy-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted, #7d8a97);
  background: var(--chip-bg, #eaeef2);
  border: 1px solid var(--border, #c6cfd7);
  padding: 0.4rem 0.8rem;
  border-radius: 99px;
}

/* --- Section shortcuts ------------------------------
   "On This Page" explanations + jump links -- distinct from the plain
   anchor list in the header's <nav role="navigation">. A compact
   adaptation of the homepage's .card/.card-icon pattern (index.html):
   same DNA (accent-colored icon, title, one-line description) but
   scaled down for 8 in-page jump-links rather than 6 cross-page hero
   cards -- no giant watermark icon, no hover-lift. */
.section-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-width: 1100px;
  margin: 1.25rem auto 1.6rem;
}

.shortcut-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--surface, #fff);
  border-radius: 10px;
  border-top: 3px solid var(--section);
  box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,0.06));
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
}
.shortcut-card:hover { box-shadow: 0 4px 18px var(--shadow, rgba(0,0,0,0.1)); transform: translateY(-2px); }

.shortcut-icon { width: 22px; height: 22px; color: var(--section); }
.shortcut-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shortcut-card h3 {
  font-family: 'Kreon', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #1a2e3b);
}

.shortcut-card p {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted, #7d8a97);
}

/* --- Person filter (mirrors /turkey-hunting + /mlb-games -- /fishing
   has no per-catch attribution, so it has no filter to mirror) ------ */
.person-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.1rem 0 1.4rem;
}

.person-filter-btn {
  font-family: 'Kreon', Georgia, serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: 99px;
  border: 2px solid var(--person, var(--section));
  background: transparent;
  color: var(--person, var(--section));
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.person-filter-btn.active {
  background: var(--person, var(--section));
  color: #fff;
}
.person-filter-btn:not(.active):hover { opacity: 0.7; }

/* Sam's purple is too dark to read as text/border directly on a dark
   surface — use the lightened on-dark variant for those spots (the
   solid-fill active pill keeps the original purple; white text on it
   already has plenty of contrast). Same fix Turkey's own filter used
   before this page moved to one shared filter for everything. */
.person-filter-btn[data-person="Sam"]:not(.active) {
  border-color: var(--sam-on-dark, #662684);
  color: var(--sam-on-dark, #662684);
}

/* --- Category sections ------------------------------ */
/* Each section is its own container -- same technique as /baseball's
   .section-panel: a faint tint (the shared --rule-rgb token, already
   dark-mode-aware, so this doesn't need its own light/dark override)
   rather than a solid --surface card, since the cards *inside* a
   section (.species-card, .map-card, .photos-gallery-card) already use
   --surface -- a solid-white container around solid-white cards would
   have no visible boundary between them. overflow:hidden clips the
   header bar's square top corners to match this container's rounded
   ones, since the header bleeds edge-to-edge (see .category-head). */
.category {
  overflow: hidden;
  border-radius: 12px;
  background: rgba(var(--rule-rgb, 26,46,59), 0.04);
  padding: 0 1.25rem 1.5rem;
  margin-bottom: 2.2rem;
  scroll-margin-top: 6rem;
}
.category:last-child { margin-bottom: 0; }

/* Solid navy bar (same #1a2e3b used site-wide for chrome -- constant
   across both themes, not a --surface/--bg token) rather than a thin
   underline, so each of the 8 sections on this page reads as a clearly
   separated block instead of blending into the one before/after it.
   Mirrors /baseball's standalone h2.section-group bar (same navy, same
   rounded/bordered treatment) with hunting's green --section accent on
   the left border in place of baseball's gold. Bleeds edge-to-edge
   within .category (negative margins + squared corners) the same way
   baseball's .section-panel > h2.section-group does. */
.category-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: #1a2e3b;
  border-left: 5px solid var(--section);
  margin: 0 -1.25rem 1.25rem;
  width: calc(100% + 2.5rem);
  padding: 0.85rem 1.25rem;
}

.category-head h2 {
  font-family: 'Kreon', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.category-count {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

.species-subnote {
  display: block;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted, #7d8a97);
  margin: -0.4rem 0 0.9rem;
}

/* --- Species cards ----------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.species-card {
  background: var(--surface, #fff);
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,0.08));
  border-top: 3px solid var(--section);
  overflow: hidden;
}

.species-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--chip-bg, #eaeef2);
}

/* .buck-photo (Whitetail Deer bucks, hunting/js/deer.js) shares this
   exact sizing/hover treatment but stays a separate class name -- it
   opens its own #deerLightbox rather than app.js's .species-photo
   click-delegated one, which would rebuild its photo list from
   CATEGORY_ORDER/huntsLogged and never find a buck's src in it. */
.species-photo,
.buck-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.species-photo:hover,
.buck-photo:hover { opacity: 0.88; transform: scale(1.02); }

.species-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--section);
}
.species-placeholder svg { width: 38%; height: 38%; }

.species-body { padding: 0.7rem 0.75rem; }

/* No-photo species skip .species-media entirely (see buildSpeciesCardHTML)
   rather than showing a big empty placeholder box next to real photos.
   align-self: start keeps the card at its own natural (shorter) height
   instead of the grid's default stretch-to-match-row-height, which would
   otherwise leave dead space at the bottom of the card anyway. */
.species-card--no-photo { align-self: start; }

.species-name {
  font-family: 'Kreon', Georgia, serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--text, #1a2e3b);
  margin-bottom: 0.45rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.loc-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 0.12rem 0.55rem;
  border-radius: 8px;
  font-size: 0.72rem;
  background: var(--chip-bg, #eaeef2);
  border: 1px solid var(--chip-border, #c6cfd7);
  color: var(--chip-text, #28333d);
}
.loc-chip strong { display: flex; align-items: center; font-weight: 700; }
.loc-chip small { color: var(--text-muted, #5a6a7a); font-weight: 400; font-style: italic; }

.hunter-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.35em;
  flex-shrink: 0;
}

/* --- Watch list -------------------------------------- */
.watchlist-row {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.watchlist-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #7d8a97);
  margin-right: 0.3rem;
}

.watch-chip {
  display: inline-flex;
  align-items: center;
  border: 1.5px dashed var(--chip-unv-border, #c9a66b);
  color: var(--chip-unv-text, #8a7654);
  background: var(--chip-unv-bg, transparent);
  border-radius: 99px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-style: italic;
}

/* --- Lightbox (same pattern as /fishing) ------------ */
body.lb-open { overflow: hidden; }

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  cursor: pointer;
}

.lb-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.lb-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.lb-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.45);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  opacity: 0.85;
  z-index: 2;
  transition: opacity 0.15s;
}
.lb-close:hover { opacity: 1; }

.lb-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem 0.6rem;
  background: #1a2e3b;
}

.lb-prev,
.lb-next {
  flex: 0 0 auto;
  font-family: 'Kreon', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lb-prev:hover,
.lb-next:hover { color: var(--section-on-dark); border-color: var(--section-on-dark); }

.lb-caption {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-family: 'Kreon', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================
   Turkey section — ported from /turkey-hunting's own
   stylesheet when that page was retired into /hunting.
   .tlb-* is renamed from that file's original .lb-* to
   avoid colliding with this file's own #huntingLightbox
   above. Turkey has no filter UI of its own -- it's driven
   by the page-level .person-filter/.person-filter-btn
   above, so those original .person-filter/.filter-name/
   .filter-count rules aren't needed here.
   ===================================================== */

.turkey-subhead {
  font-family: 'Kreon', Georgia, serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #7d8a97);
  margin: 1.1rem 0 0.6rem;
}
.turkey-subhead:first-child { margin-top: 0; }

/* --- Harvests/Slams row -- 50/50 on desktop, stacked on mobile.
   Slams' wrapper reuses .map-card directly (see below) rather than a
   duplicate card-chrome class, so the two sit at matching width/style.
   margin-top here (not on .turkey-subhead) because each column's own
   "Harvests"/"Slams" heading is the first child of its .turkey-col, so
   the :first-child rule below already zeroes its own margin-top. */
.turkey-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.1rem;
}

/* The grid row stretches each .turkey-col to match the taller column
   (Slams usually runs longer than the map), but a plain block child
   doesn't inherit that stretched height on its own -- flex + flex:1
   lets .map-card's background actually fill down to match, instead of
   the shorter card trailing off into blank page background. */
.turkey-col { display: flex; flex-direction: column; }
.turkey-col > .map-card { flex: 1; }

@media (max-width: 640px) {
  .turkey-row { grid-template-columns: 1fr; gap: 0; }
  .turkey-col > .map-card { flex: initial; }
}

/* --- Map Card -------------------------------------- */
.map-card {
  background: var(--surface, #fff);
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,0.08));
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* --- Map Views ------------------------------------- */
.map-view { display: none; }
.map-view.active { display: block; }

/* --- Map Container (responsive aspect-ratio) ------- */
.map-container { position: relative; width: 100%; }
.map-container.us-map { padding-bottom: 50%; }

.map-container .map {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* jVectorMap overrides */
.jvectormap-container { width: 100% !important; height: 100% !important; }

.jvectormap-tip {
  background: #1a2e3b;
  border: none;
  color: #fff;
  border-radius: 5px;
  padding: 0.4rem 0.6rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 220px;
}

/* --- List Toggle ----------------------------------- */
.list-toggle {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.35rem 0 0;
  background: none;
  border: none;
  border-top: 1px solid var(--border, #eee);
  color: var(--text-muted, #aaa);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}

.list-toggle:hover { color: var(--text, #555); }

/* --- Visit List ------------------------------------ */
.visit-list { display: none; margin-top: 0.5rem; }
.visit-list.open { display: block; }

.turkey-group { margin-bottom: 0.55rem; }

.turkey-group-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #7d8a97);
  margin-bottom: 0.35rem;
}

.visit-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.visit-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: 0.92rem;
  background: var(--chip-bg, #eaeef2);
  border: 1px solid var(--chip-border, #c6cfd7);
  color: var(--chip-text, #28333d);
  white-space: nowrap;
}

/* Hunted-but-not-harvested chip */
.turkey-chip--hunted {
  font-style: italic;
  background: rgba(232,160,32,0.16) !important;
  border-color: rgba(232,160,32,0.6) !important;
  border-style: dashed !important;
  color: #6b4f0e;
}

/* Per-person chip accent colors */
.map-view[data-view="josh"]   .visit-chip { background: rgba(0,172,75,0.14);   border-color: rgba(0,172,75,0.55); }
.map-view[data-view="sam"]    .visit-chip { background: rgba(102,38,132,0.14); border-color: rgba(102,38,132,0.55); }
.map-view[data-view="tilly"]  .visit-chip { background: rgba(8,152,255,0.14);  border-color: rgba(8,152,255,0.55); }
.map-view[data-view="family"] .visit-chip { background: rgba(232,96,26,0.14);  border-color: rgba(232,96,26,0.55); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-view[data-view="sam"] .visit-chip {
    background: rgba(171,136,187,0.16);
    border-color: rgba(171,136,187,0.6);
  }
}
:root[data-theme="dark"] .map-view[data-view="sam"] .visit-chip {
  background: rgba(171,136,187,0.16);
  border-color: rgba(171,136,187,0.6);
}

/* ---- Slams ----------------------------------------- */
/* Single column, not 3-across -- this now lives in a half-width card
   next to the map (see .turkey-row above), so the "Anyone" view's 3
   people stack vertically instead of competing for width. Each slam
   is a flat flex-wrapped row (name+count, then chips inline right
   after, wrapping only if it doesn't fit) rather than its own raised
   card -- with 3 people x 4 slams stacked in that half-width column,
   a two-line-per-slam card format (head row, then a separate chips
   row, each with its own padding/shadow) cost far more height than
   the content needed. */
.slams-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.slam-person-col + .slam-person-col { padding-top: 0.6rem; border-top: 1px solid var(--border, #e3e7eb); }
.slam-person-col .person-gallery-header { font-size: 0.88rem; margin-bottom: 0.4rem; }
.slam-cards { display: flex; flex-direction: column; }

.slam-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.35rem;
  row-gap: 0.2rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--border, #e3e7eb);
}
.slam-cards .slam-card:last-child { border-bottom: none; }
.slam-card--complete { border-left: 3px solid #22703D; padding-left: 0.4rem; }

.slam-card-head { display: flex; align-items: baseline; gap: 0.3rem; flex-shrink: 0; }
.slam-card-name { font-family: 'Kreon', Georgia, serif; font-weight: 700; font-size: 0.8rem; color: var(--text, #222); }
.slam-card-count { font-family: 'Roboto Condensed', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--text-muted, #7d8a97); }

.slam-chips { display: flex; flex-wrap: wrap; gap: 0.22rem; }
.slam-chip {
  display: inline-block; padding: 0.06rem 0.4rem; border-radius: 99px; font-size: 0.64rem;
  background: var(--chip-unv-bg, #f4f6f8); border: 1px solid var(--chip-unv-border, #b9c2cb); color: var(--chip-unv-text, #56636f);
}
.slam-chip--met {
  background: var(--chip-bg, #eaeef2); border-color: var(--chip-border, #c6cfd7); color: var(--chip-text, #28333d); font-weight: 700;
}

.slam-bar { flex: 1 1 100%; height: 5px; border-radius: 99px; background: var(--chip-unv-bg, #f4f6f8); overflow: hidden; }
.slam-bar-fill { height: 100%; border-radius: 99px; }

/* Mirrors stats/index.html's .bb-badge — that stylesheet isn't loaded here, so duplicated rather than shared.
   No forced flex-basis: an auto-sized flex item wraps onto its own
   line already (it's last in DOM order, after chips that usually
   already fill the row) without needing to be stretched full-width. */
.slam-badge {
  display: inline-block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #22703D; padding: 0.14em 0.5em; border-radius: 10px;
}

.slam-empty { color: var(--text-muted, #7d8a97); font-style: italic; text-align: center; padding: 1rem; }

/* ---- Photo Gallery -------------------------------- */
.photos-gallery-card {
  background: var(--surface, #fff);
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,0.08));
  overflow: hidden;
}

.gallery-view {
  display: none;
  padding: 1.25rem;
}
.gallery-view.active { display: block; }

.person-gallery { margin-bottom: 1.75rem; }
.person-gallery:last-child { margin-bottom: 0; }

.person-gallery-header {
  font-family: 'Kreon', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--person-color, #333);
  border-left: 4px solid var(--person-color, #333);
  padding: 0.15rem 0 0.15rem 0.6rem;
  margin-bottom: 0.9rem;
}

/* "Anyone" view: one preview photo per person side-by-side */
.family-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.photo-count-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Per-person view: full 3-column grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.photo-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.photo-item:hover .photo-thumb { opacity: 0.88; transform: scale(1.02); }

.photo-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s, transform 0.15s;
}

.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.6rem 0.4rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.58));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* ---- Lightbox ------------------------------------ */
.tlb-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tlb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  cursor: pointer;
}

.tlb-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.tlb-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.tlb-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.45);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  opacity: 0.85;
  z-index: 2;
  transition: opacity 0.15s;
}
.tlb-close:hover { opacity: 1; }

.tlb-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem 0.6rem;
  background: #1a2e3b;
}

.tlb-prev,
.tlb-next {
  flex: 0 0 auto;
  font-family: 'Kreon', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tlb-prev:hover,
.tlb-next:hover { color: #E8A020; border-color: #E8A020; }

.tlb-caption {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-family: 'Kreon', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.tlb-open { overflow: hidden; }

/* =====================================================
   Whitetail Deer section
   Bucks render in the same .card-grid/.species-card/.species-media/
   .species-body/.species-name shell as the six plain categories
   (hunting/js/app.js) -- reused directly for identical card chrome at
   a real, visible photo size instead of a small inline chip icon.
   .buck-photo itself is styled alongside .species-photo above (shares
   sizing/hover, different class to avoid app.js's lightbox picking it
   up); species-placeholder is reused as-is for photo-less bucks.
   ===================================================== */
.buck-hunter-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 1;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
  pointer-events: none;
}

.buck-card-weapon {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted, #7d8a97);
  margin-top: 0.15rem;
}

.buck-age {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--section);
}

/* --- Lightbox (own instance -- see hunting/js/deer.js header for why
   this doesn't reuse app.js's #huntingLightbox/.lb-* or turkey.js's
   #turkeyLightbox/.tlb-*) --------------------------- */
body.dlb-open { overflow: hidden; }

.dlb-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dlb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  cursor: pointer;
}

.dlb-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.dlb-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.dlb-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.45);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  opacity: 0.85;
  z-index: 2;
  transition: opacity 0.15s;
}
.dlb-close:hover { opacity: 1; }

.dlb-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem 0.6rem;
  background: #1a2e3b;
}

.dlb-prev,
.dlb-next {
  flex: 0 0 auto;
  font-family: 'Kreon', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dlb-prev:hover,
.dlb-next:hover { color: var(--section-on-dark); border-color: var(--section-on-dark); }

.dlb-caption {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-family: 'Kreon', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deer-milestone-row {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border, #e3e7eb);
}

/* --- Mobile ---------------------------------------- */
@media (max-width: 640px) {
  .section-shortcuts { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 0.55rem; }
  .species-body { padding: 0.55rem 0.6rem; }
  .hunting-stat-num { font-size: 1.45rem; }
  .hunting-stats { gap: 1.25rem; }
  .family-gallery { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .tlb-img { max-width: 92vw; max-height: 70vh; }
  .dlb-img { max-width: 92vw; max-height: 70vh; }
}