* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--void);
}

body {
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; font: inherit; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--void);
}

.grain {
  position: absolute;
  z-index: 30;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* The store's header icons, on the gateway only; "All animals" replaces them. */
/* Placed exactly where the store header puts them (centred in a
   --header-height bar, --gutter-desktop from the edge), so moving between the
   shop and the map, they stay put. */
.map-nav {
  position: absolute;
  z-index: 40;
  top: calc((var(--header-height) - var(--min-touch)) / 2);
  right: var(--gutter-desktop);
  display: flex;
  gap: var(--space-4);
  transition: opacity 420ms var(--ease);
}
.map-nav.leaving { opacity: 0; pointer-events: none; }
.map-nav__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--min-touch);
  height: var(--min-touch);
  border-radius: 50%;
  color: var(--paper);
  transition: background var(--duration) var(--ease);
}
.map-nav__icon svg { transition: transform var(--duration) var(--ease); }
.map-nav__icon:hover, .map-nav__icon:focus-visible { background: rgba(244, 241, 234, 0.14); }
.map-nav__icon:hover svg, .map-nav__icon:focus-visible svg { transform: scale(1.12); }
.map-nav__icon:active svg { transform: scale(0.94); }
.map-nav__icon[aria-current="page"]::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--clay); }
.map-nav__icon::before {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--size-11);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.map-nav__icon:hover::before, .map-nav__icon:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.map-nav__count { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--clay); color: var(--paper); font-size: 10px; font-weight: var(--weight-semibold); line-height: 16px; text-align: center; }
.map-nav__count:empty { display: none; }
@media (max-width: 640px) {
  .map-nav { right: var(--gutter-mobile); gap: 0; }
}

.gateway {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  text-align: center;
  padding: 0 var(--gutter-mobile);
  background: var(--void);
  transition: opacity 420ms var(--ease);
}
.gateway.leaving { opacity: 0; pointer-events: none; }
.gateway .eyebrow {
  margin: 0;
  color: var(--ash);
  font-size: var(--size-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gateway h1 {
  margin: 0;
  max-width: 30rem;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  font-size: clamp(24px, 4vw, var(--size-34));
  line-height: var(--line-heading);
}
.enter-button {
  margin-top: var(--space-12);
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--paper);
  background: none;
  color: var(--paper);
  font-size: var(--size-15);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.enter-button span { display: inline-block; margin-left: 8px; transition: transform var(--duration) var(--ease); }
.enter-button:hover span { transform: translate(3px, -3px); }
.enter-button:disabled { opacity: 0.5; cursor: progress; }
.gateway-note {
  margin: 0;
  color: var(--ash);
  font-size: var(--size-13);
}

.globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.globe .maplibregl-ctrl-attrib { font-size: 10px; }

/* ---------------------------------------------------------------- glass
   Everything that floats over the globe is frosted glass: translucent, heavily
   blurred, a hairline edge that catches light, soft depth. */
.back-to-store,
.animals-toggle,
.species-panel,
.globe .maplibregl-ctrl-group {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.back-to-store,
.animals-toggle {
  position: absolute;
  z-index: 40;
  top: var(--space-20);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  color: var(--paper);
  font-size: var(--size-13);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.back-to-store { left: var(--space-20); }
.animals-toggle { right: var(--space-20); }
.back-to-store:hover, .back-to-store:focus-visible,
.animals-toggle:hover, .animals-toggle:focus-visible { background: var(--glass-hover); }

.globe .maplibregl-ctrl-group { overflow: hidden; border-radius: 14px; }
.globe .maplibregl-ctrl-group button { width: 36px; height: 36px; background-color: transparent; }
.globe .maplibregl-ctrl-group button + button { border-top: 1px solid var(--glass-edge); }
.globe .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.globe .maplibregl-ctrl-group button:hover { background-color: var(--glass-hover); }
.globe .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 var(--space-20) var(--space-12) 0; }

.species-panel {
  position: absolute;
  z-index: 35;
  left: var(--space-20);
  bottom: var(--space-20);
  width: 23rem;
  max-height: calc(100% - 96px);
  overflow-y: auto;
  border-radius: 24px;
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
  scrollbar-width: none;
}
.species-panel::-webkit-scrollbar { display: none; }
.species-panel.visible { opacity: 1; transform: none; }
.species-figure {
  position: relative;
  margin: 10px 10px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.species-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.species-credit {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(2, 7, 6, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(244, 241, 234, 0.85);
  font-size: 10px;
  line-height: 1.4;
}
.species-credit:empty { display: none; }
.species-body { padding: 16px 20px 20px; }
.species-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: -0.025em;
  font-size: 26px;
  line-height: 1.08;
}
.species-scientific { margin: 3px 0 0; color: rgba(244, 241, 234, 0.6); font-size: 14px; font-style: italic; }
.species-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.species-count__number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.species-count__label { color: rgba(244, 241, 234, 0.82); font-size: 14px; }
.species-source { margin: 6px 0 0 14px; color: rgba(244, 241, 234, 0.55); font-size: 12px; }
.species-source a { color: inherit; text-underline-offset: 2px; }
.species-source a:hover { color: var(--paper); }
.species-location { margin: 14px 0 0; color: rgba(244, 241, 234, 0.88); font-size: 14px; line-height: 1.5; }
.species-provenance { margin: 6px 0 0; color: rgba(244, 241, 234, 0.55); font-size: 12px; line-height: 1.5; }
.species-actions { display: grid; gap: var(--space-8); margin-top: 16px; }
.shop-piece-link,
.species-donate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--min-touch);
  padding: 0 var(--space-20);
  border-radius: var(--radius-pill);
  font-size: var(--size-13);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  transition: background var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.shop-piece-link { background: rgba(244, 241, 234, 0.94); color: var(--void); }
.shop-piece-link:hover { opacity: 0.88; }
.species-donate { border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, 0.08); color: var(--paper); }
.species-donate::after { content: "↗"; font-weight: var(--weight-regular); }
.species-donate:hover, .species-donate:focus-visible { background: var(--glass-hover); }

/* ---------------------------------------------------------------- all animals */
.species-selector {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: var(--space-20) var(--space-32) 0;
  background: rgba(2, 7, 6, 0.55);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease);
}
.species-selector.open { opacity: 1; }
.species-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: var(--space-20);
}
.species-selector-head .label {
  margin: 0;
  color: var(--paper);
  font-size: var(--size-18);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}
.close-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass);
  color: var(--paper);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.close-button:hover { background: var(--glass-hover); }

.species-rail {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  padding-bottom: var(--space-32);
}
.species-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.species-tile:hover, .species-tile:focus-visible { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.species-tile-photo {
  aspect-ratio: 4 / 3;
  margin-bottom: 8px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.06);
  background-size: cover;
  background-position: center;
}
.species-tile-name { padding: 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.2; }
.species-tile-sci { padding: 0 6px; color: rgba(244, 241, 234, 0.55); font-size: 12px; font-style: italic; }
.species-tile.selected { border-color: rgba(233, 165, 116, 0.8); background: rgba(180, 100, 47, 0.14); }

@media (max-width: 720px) {
  .back-to-store { left: var(--space-12); top: var(--space-12); }
  .animals-toggle { right: var(--space-12); top: var(--space-12); }
  .species-panel {
    left: var(--space-8);
    right: var(--space-8);
    bottom: var(--space-8);
    width: auto;
    max-height: 60%;
    border-radius: 22px;
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The card covers the bottom of the screen; the zoom buttons and the
     imagery credit move up under "All animals" so both stay visible. */
  .globe .maplibregl-ctrl-bottom-right { top: 60px; bottom: auto; }
  .species-figure { aspect-ratio: auto; height: 104px; margin: 8px 8px 0; border-radius: 14px; }
  .species-body { padding: 12px 16px 0; }
  .species-panel h2 { font-size: 22px; }
  .species-count { margin-top: 10px; padding: 8px 12px; }
  .species-count__number { font-size: 28px; }
  .species-location { margin-top: 10px; font-size: 13px; }
  /* The buttons stay pinned to the bottom of the card while the text scrolls. */
  .species-actions {
    position: sticky;
    bottom: 0;
    grid-template-columns: 1fr 1fr;
    margin: 12px -16px 0;
    padding: 10px 16px 14px;
    background: linear-gradient(to top, rgba(12, 20, 17, 0.96) 70%, rgba(12, 20, 17, 0));
  }
  .species-actions > :only-child, .species-actions > [hidden] + *, .species-actions > :first-child:has(+ [hidden]) { grid-column: 1 / -1; }
  .shop-piece-link, .species-donate { min-height: 42px; padding: 0 12px; font-size: 12px; line-height: 1.2; }
  .species-donate__org { display: none; }
  .species-selector { padding: var(--space-12) var(--space-12) 0; }
  .species-rail { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (prefers-reduced-transparency: reduce) {
  .back-to-store, .animals-toggle, .species-panel, .globe .maplibregl-ctrl-group, .species-selector { background: rgba(10, 16, 14, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}