@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap");

/* ============================================================
   Jurasasphere — "Expedition Journal" theme
   A botanist-paleontologist's field expedition through a
   prehistoric rainforest: deep canopy greens and dappled light
   framing the globe, fern-silhouette undergrowth at the viewport
   edges, and a parchment specimen page for every fossil record.
   Depth comes from texture, layered foliage and real shadow —
   never glow.
   ============================================================ */

:root {
  /* — canopy — */
  --canopy-0: #0a140c;         /* deepest jungle floor */
  --canopy-1: #0d1a10;
  --canopy-2: #16281a;
  --canopy-3: #1f3a24;         /* lit understory */
  --fern:     #6f9b4f;
  --moss:     #8bbf5a;
  --lichen:   #8a9a80;         /* muted grey-green */
  --line:     rgba(139, 155, 120, 0.24);

  /* — resin & rock — */
  --amber:  #d8a63a;           /* tree resin / Triassic */
  --resin:  #c98a2e;
  --rust:   #c2542f;           /* terracotta / Cretaceous */
  --jur:    #7fa24e;           /* Jurassic marker green */

  /* — paper & ink — */
  --bone:      #ece3cf;
  --ink:       #e7dfcd;        /* light ink on dark ground */
  --page:      #e9dcbc;        /* parchment mid-tone */
  --page-hi:   #f2ead6;
  --page-lo:   #dcc99f;
  --sepia:     #5d4826;        /* drawn-ink on parchment */
  --umber:     #3a2f1a;        /* body ink on parchment */
  --umber-dk:  #241c10;        /* headline ink */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-script: "Caveat", cursive;

  /* — textures & botanical plates (inline SVG) — */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* fern frond cluster, leaning left (front frond dark, back frond lit) */
  --fern-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cdefs%3E%3Cpath id='p' d='M0 0C-14 -9 -36 -11 -58 -3C-38 7 -14 8 0 4Z'/%3E%3Cg id='f'%3E%3Cpath d='M127 372C114 272 116 156 139 24L146 26C126 158 124 268 136 370Z'/%3E%3Cuse href='%23p' transform='translate(124 336) rotate(-38)'/%3E%3Cuse href='%23p' transform='translate(120 306) rotate(-34)'/%3E%3Cuse href='%23p' transform='translate(117 276) rotate(-31) scale(.95)'/%3E%3Cuse href='%23p' transform='translate(116 246) rotate(-28) scale(.9)'/%3E%3Cuse href='%23p' transform='translate(116 216) rotate(-26) scale(.84)'/%3E%3Cuse href='%23p' transform='translate(118 186) rotate(-23) scale(.77)'/%3E%3Cuse href='%23p' transform='translate(121 156) rotate(-21) scale(.69)'/%3E%3Cuse href='%23p' transform='translate(125 128) rotate(-18) scale(.6)'/%3E%3Cuse href='%23p' transform='translate(129 100) rotate(-16) scale(.5)'/%3E%3Cuse href='%23p' transform='translate(133 74) rotate(-14) scale(.4)'/%3E%3Cuse href='%23p' transform='translate(137 50) rotate(-12) scale(.28)'/%3E%3Cuse href='%23p' transform='translate(128 344) scale(-1 1) rotate(-36)'/%3E%3Cuse href='%23p' transform='translate(123 314) scale(-1 1) rotate(-33)'/%3E%3Cuse href='%23p' transform='translate(120 284) scale(-.97 .97) rotate(-30)'/%3E%3Cuse href='%23p' transform='translate(118 254) scale(-.92 .92) rotate(-27)'/%3E%3Cuse href='%23p' transform='translate(118 224) scale(-.86 .86) rotate(-25)'/%3E%3Cuse href='%23p' transform='translate(120 194) scale(-.8 .8) rotate(-22)'/%3E%3Cuse href='%23p' transform='translate(123 164) scale(-.72 .72) rotate(-20)'/%3E%3Cuse href='%23p' transform='translate(126 136) scale(-.63 .63) rotate(-18)'/%3E%3Cuse href='%23p' transform='translate(130 108) scale(-.53 .53) rotate(-15)'/%3E%3Cuse href='%23p' transform='translate(134 82) scale(-.42 .42) rotate(-13)'/%3E%3Cuse href='%23p' transform='translate(138 58) scale(-.3 .3) rotate(-11)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' fill='%23294727' opacity='.8' transform='rotate(-16 150 380) translate(-14 2)'/%3E%3Cuse href='%23f' fill='%23102415'/%3E%3C/svg%3E");

  /* same cluster, mirrored for the right corner */
  --fern-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cdefs%3E%3Cpath id='p' d='M0 0C-14 -9 -36 -11 -58 -3C-38 7 -14 8 0 4Z'/%3E%3Cg id='f'%3E%3Cpath d='M127 372C114 272 116 156 139 24L146 26C126 158 124 268 136 370Z'/%3E%3Cuse href='%23p' transform='translate(124 336) rotate(-38)'/%3E%3Cuse href='%23p' transform='translate(120 306) rotate(-34)'/%3E%3Cuse href='%23p' transform='translate(117 276) rotate(-31) scale(.95)'/%3E%3Cuse href='%23p' transform='translate(116 246) rotate(-28) scale(.9)'/%3E%3Cuse href='%23p' transform='translate(116 216) rotate(-26) scale(.84)'/%3E%3Cuse href='%23p' transform='translate(118 186) rotate(-23) scale(.77)'/%3E%3Cuse href='%23p' transform='translate(121 156) rotate(-21) scale(.69)'/%3E%3Cuse href='%23p' transform='translate(125 128) rotate(-18) scale(.6)'/%3E%3Cuse href='%23p' transform='translate(129 100) rotate(-16) scale(.5)'/%3E%3Cuse href='%23p' transform='translate(133 74) rotate(-14) scale(.4)'/%3E%3Cuse href='%23p' transform='translate(137 50) rotate(-12) scale(.28)'/%3E%3Cuse href='%23p' transform='translate(128 344) scale(-1 1) rotate(-36)'/%3E%3Cuse href='%23p' transform='translate(123 314) scale(-1 1) rotate(-33)'/%3E%3Cuse href='%23p' transform='translate(120 284) scale(-.97 .97) rotate(-30)'/%3E%3Cuse href='%23p' transform='translate(118 254) scale(-.92 .92) rotate(-27)'/%3E%3Cuse href='%23p' transform='translate(118 224) scale(-.86 .86) rotate(-25)'/%3E%3Cuse href='%23p' transform='translate(120 194) scale(-.8 .8) rotate(-22)'/%3E%3Cuse href='%23p' transform='translate(123 164) scale(-.72 .72) rotate(-20)'/%3E%3Cuse href='%23p' transform='translate(126 136) scale(-.63 .63) rotate(-18)'/%3E%3Cuse href='%23p' transform='translate(130 108) scale(-.53 .53) rotate(-15)'/%3E%3Cuse href='%23p' transform='translate(134 82) scale(-.42 .42) rotate(-13)'/%3E%3Cuse href='%23p' transform='translate(138 58) scale(-.3 .3) rotate(-11)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(300 0) scale(-1 1)'%3E%3Cuse href='%23f' fill='%23294727' opacity='.8' transform='rotate(-16 150 380) translate(-14 2)'/%3E%3Cuse href='%23f' fill='%23102415'/%3E%3C/g%3E%3C/svg%3E");

  /* ammonite spiral — drawn ink, for the strata band */
  --ammonite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cpath d='M62 62a3 3 0 0 1 3 3 5 5 0 0 1-5 5 8 8 0 0 1-8-8 12 12 0 0 1 12-12 17.5 17.5 0 0 1 17.5 17.5 24 24 0 0 1-24 24 32 32 0 0 1-32-32 41 41 0 0 1 41-41 51 51 0 0 1 51 51' fill='none' stroke='%23473518' stroke-width='2.6' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");

  /* ammonite spiral — faint watermark for the parchment page */
  --ammonite-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cpath d='M62 62a3 3 0 0 1 3 3 5 5 0 0 1-5 5 8 8 0 0 1-8-8 12 12 0 0 1 12-12 17.5 17.5 0 0 1 17.5 17.5 24 24 0 0 1-24 24 32 32 0 0 1-32-32 41 41 0 0 1 41-41 51 51 0 0 1 51 51' fill='none' stroke='rgba(93,72,38,0.16)' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(140% 110% at 50% -10%, #182b1a 0%, #0f1d12 48%, var(--canopy-0) 100%);
  overflow: hidden;
}

::selection { background: var(--amber); color: #201806; }

.search:focus-visible,
.era-btn:focus-visible,
.mute:focus-visible,
.panel-close:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Sediment grain — tactile film over everything
   ------------------------------------------------------------ */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: var(--noise);
}

/* ------------------------------------------------------------
   Undergrowth — fern clusters rooted in the bottom corners.
   Edges only; the globe at centre stays clear. Above the globe
   (z1), below HUD (z20) and panel (z25).
   ------------------------------------------------------------ */
body::before,
body::after {
  content: "";
  position: fixed; bottom: -7vmin; z-index: 14;
  width: 42vmin; height: 54vmin;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(3, 8, 4, 0.45));
}
body::before {
  left: -6vmin;
  transform-origin: 24% 96%;
  background:
    var(--fern-l) 100% 100% / 54% auto no-repeat,
    var(--fern-l) 0% 100% / 78% auto no-repeat;
  animation: fern-sway 11s ease-in-out infinite alternate;
}
body::after {
  right: -6vmin;
  transform-origin: 76% 96%;
  background:
    var(--fern-r) 0% 100% / 54% auto no-repeat,
    var(--fern-r) 100% 100% / 78% auto no-repeat;
  animation: fern-sway 13s ease-in-out infinite alternate-reverse;
}
@keyframes fern-sway {
  from { transform: rotate(-0.6deg); }
  to   { transform: rotate(0.8deg); }
}

/* ------------------------------------------------------------
   Intro overlay — dawn in the understory
   ------------------------------------------------------------ */
.intro {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; text-align: center;
  background:
    radial-gradient(130% 95% at 50% 0%, var(--canopy-3) 0%, var(--canopy-2) 40%, var(--canopy-1) 72%, var(--canopy-0) 100%);
  transition: opacity 1s ease, visibility 1s ease;
}
.intro.hidden { opacity: 0; visibility: hidden; }

/* dappled canopy light + closed-in edges */
.intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(340px 240px at 14% 4%, rgba(219, 202, 128, 0.10), transparent 70%),
    radial-gradient(280px 220px at 78% 0%, rgba(190, 208, 122, 0.08), transparent 70%),
    radial-gradient(240px 200px at 44% 10%, rgba(214, 186, 110, 0.05), transparent 70%),
    radial-gradient(ellipse 120% 105% at 50% 46%, transparent 52%, rgba(6, 12, 7, 0.45) 84%, rgba(4, 9, 5, 0.75) 100%);
}

/* undergrowth closing in on the lower corners */
.intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--fern-l) left -7vmin bottom -8vmin / 44vmin auto no-repeat,
    var(--fern-l) left 16vmin bottom -18vmin / 28vmin auto no-repeat,
    var(--fern-r) right -7vmin bottom -8vmin / 44vmin auto no-repeat,
    var(--fern-r) right 14vmin bottom -18vmin / 28vmin auto no-repeat;
}

/* footprints pressed one after another through the clearing */
.intro .trackway {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: #90ac6b; opacity: 0.16; pointer-events: none;
}
.intro .trackway use { opacity: 0; animation: track-step 0.5s ease-out forwards; }
.intro .trackway use:nth-of-type(1) { animation-delay: 0.15s; }
.intro .trackway use:nth-of-type(2) { animation-delay: 0.40s; }
.intro .trackway use:nth-of-type(3) { animation-delay: 0.65s; }
.intro .trackway use:nth-of-type(4) { animation-delay: 0.90s; }
.intro .trackway use:nth-of-type(5) { animation-delay: 1.15s; }
.intro .trackway use:nth-of-type(6) { animation-delay: 1.40s; }
@keyframes track-step { to { opacity: 1; } }

.intro-kicker {
  position: relative;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 0.7rem;
  padding: 0.65rem 1.5rem;
  border-top: 1px solid rgba(216, 166, 58, 0.4);
  border-bottom: 1px solid rgba(216, 166, 58, 0.4);
}
.intro-title {
  position: relative;
  font-family: var(--font-display);
  font-optical-sizing: auto; font-weight: 900; font-style: italic;
  font-size: clamp(3rem, 12vw, 8.5rem); line-height: 0.9; margin: 0;
  color: var(--bone); letter-spacing: -0.02em;
  text-shadow: 0 2px 0 rgba(8, 14, 9, 0.65), 0 18px 42px rgba(0, 0, 0, 0.55);
}
.intro-tagline {
  position: relative;
  font-family: var(--font-script); font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  letter-spacing: 0.02em; color: #aec584; margin: 1rem 0 0;
  transform: rotate(-1.2deg);
}

/* ------------------------------------------------------------
   HUD — expedition kit strapped along the canopy line
   ------------------------------------------------------------ */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; gap: 18px;
  background: linear-gradient(180deg, rgba(8, 15, 9, 0.92), rgba(8, 15, 9, 0.55) 64%, transparent);
}

/* Dappled canopy light drifting across the whole scene. Fixed to the
   viewport, painted behind the HUD content, oversized so its slow wander
   never exposes an edge. Each biome recolours this layer further down. */
.hud::before {
  content: ""; position: fixed; inset: -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 30vmax at 12% 0%, rgba(219, 202, 128, 0.08), transparent 64%),
    radial-gradient(34vmax 26vmax at 84% 4%, rgba(190, 208, 122, 0.07), transparent 66%),
    radial-gradient(26vmax 20vmax at 38% 12%, rgba(214, 186, 110, 0.05), transparent 70%);
  animation: light-drift 44s ease-in-out infinite alternate;
}
@keyframes light-drift {
  from { transform: translate3d(-1.8%, -1.2%, 0) scale(1.03); opacity: 0.7; }
  to   { transform: translate3d(1.8%, 0.8%, 0)  scale(1);    opacity: 1; }
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  color: var(--bone); letter-spacing: 0.01em;
}
.brand-mark { width: 19px; height: 23px; fill: var(--amber); transform: rotate(-14deg); }

.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.search {
  background: rgba(10, 18, 11, 0.66);
  border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 9px 14px; border-radius: 2px; outline: none; min-width: 210px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s, background-color 0.2s;
}
.search::placeholder { color: var(--lichen); }
.search:focus { border-color: var(--amber); background: rgba(10, 18, 11, 0.82); }

/* Era filter — punched specimen tags on a line */
.eras { display: flex; gap: 7px; }
.era-btn {
  position: relative;
  background: rgba(12, 22, 13, 0.66);
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--lichen); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 9px 12px 9px 21px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.18s, background-color 0.18s, border-color 0.18s;
}
/* punched tag hole */
.era-btn::after {
  content: ""; position: absolute; left: 7px; top: 50%;
  width: 5px; height: 5px; transform: translateY(-50%);
  border-radius: 50%; background: var(--canopy-0);
  box-shadow: 0 0 0 1.5px rgba(236, 227, 207, 0.35);
}
/* era swatch dot */
.era-btn::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  vertical-align: middle; border-radius: 50%; background: currentColor; opacity: 0.5;
}
.era-btn[data-era="Triassic"]::before   { background: var(--amber); opacity: 1; }
.era-btn[data-era="Jurassic"]::before   { background: var(--jur); opacity: 1; }
.era-btn[data-era="Cretaceous"]::before { background: var(--rust); opacity: 1; }
.era-btn:hover { color: var(--bone); background: rgba(31, 58, 36, 0.7); border-color: rgba(216, 166, 58, 0.4); }
.era-btn.active {
  color: var(--umber-dk);
  background: linear-gradient(180deg, var(--page-hi), #e4d5b2);
  border-color: rgba(236, 227, 207, 0.45);
  box-shadow: inset 0 -3px 0 rgba(58, 48, 29, 0.35);
}
.era-btn.active::after { box-shadow: 0 0 0 1.5px rgba(58, 48, 29, 0.45); }
.era-btn.active[data-era="Triassic"]   { box-shadow: inset 0 -3px 0 var(--amber); }
.era-btn.active[data-era="Jurassic"]   { box-shadow: inset 0 -3px 0 var(--jur); }
.era-btn.active[data-era="Cretaceous"] { box-shadow: inset 0 -3px 0 var(--rust); }

.mute {
  background: rgba(12, 22, 13, 0.66);
  border: 1px solid var(--line); color: var(--lichen);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 9px 12px; border-radius: 2px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}
.mute:hover { color: var(--bone); border-color: rgba(216, 166, 58, 0.4); }
.mute[aria-pressed="true"] {
  color: var(--amber);
  border-color: rgba(216, 166, 58, 0.55);
  background: rgba(216, 166, 58, 0.08);
}

/* Expedition tool buttons — surprise / near-me / day-night / timeline */
.tool {
  background: rgba(12, 22, 13, 0.66);
  border: 1px solid var(--line); color: var(--lichen);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 9px 12px; border-radius: 2px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}
.tool:hover { color: var(--bone); border-color: rgba(216, 166, 58, 0.4); }
.tool.active,
.tool[aria-pressed="true"] {
  color: var(--amber);
  border-color: rgba(216, 166, 58, 0.55);
  background: rgba(216, 166, 58, 0.08);
}

/* ------------------------------------------------------------
   Search autocomplete — a specimen index dropping from the field
   search box.
   ------------------------------------------------------------ */
.search-wrap { position: relative; display: inline-flex; }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 21;
  margin: 0; padding: 4px; list-style: none;
  max-height: 46vh; overflow-y: auto;
  background: rgba(10, 18, 11, 0.94);
  border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 16px 30px rgba(3, 8, 4, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  scrollbar-width: thin; scrollbar-color: rgba(139, 155, 120, 0.4) transparent;
}
.suggest-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 2px; cursor: pointer;
  color: var(--ink); font-family: var(--font-mono); font-size: 0.76rem;
}
.suggest-item:hover,
.suggest-item.active { background: rgba(31, 58, 36, 0.72); }
.suggest-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-era {
  flex: 0 0 auto; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lichen);
}
.suggest-era::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  vertical-align: middle; border-radius: 50%; background: var(--lichen);
}
.suggest-era[data-era="Triassic"]::before   { background: var(--amber); }
.suggest-era[data-era="Jurassic"]::before   { background: var(--jur); }
.suggest-era[data-era="Cretaceous"]::before { background: var(--rust); }

/* ------------------------------------------------------------
   Timeline scrubber — a stratigraphic ruler pinned to the horizon,
   rewinding the map to a single moment in deep time.
   ------------------------------------------------------------ */
.timeline {
  position: fixed; left: 50%; bottom: 26px; z-index: 20;
  transform: translateX(-50%) rotate(-0.3deg);
  width: min(560px, 88vw);
  padding: 12px 20px 14px;
  background: linear-gradient(180deg, var(--page-hi), #e4d5b2);
  border: 1px solid rgba(70, 54, 26, 0.4); border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.timeline-inner { display: flex; align-items: center; gap: 14px; }
.timeline-label {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #7a5326; flex: 0 0 auto;
}
.timeline-readout {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--umber-dk); flex: 0 0 auto; min-width: 122px; text-align: right;
}
.timeline-range {
  flex: 1 1 auto; -webkit-appearance: none; appearance: none;
  height: 12px; margin: 0; background: transparent; cursor: pointer;
  direction: rtl; /* oldest time on the left, present on the right */
}
/* stratigraphic track coloured by period: Triassic → Jurassic → Cretaceous */
.timeline-range::-webkit-slider-runnable-track {
  height: 12px; border-radius: 2px; border: 1px solid rgba(70, 54, 26, 0.4);
  background: linear-gradient(90deg,
    var(--amber) 0%, var(--amber) 27%,
    var(--jur) 27%, var(--jur) 57%,
    var(--rust) 57%, var(--rust) 100%);
}
.timeline-range::-moz-range-track {
  height: 12px; border-radius: 2px; border: 1px solid rgba(70, 54, 26, 0.4);
  background: linear-gradient(90deg,
    var(--amber) 0%, var(--amber) 27%,
    var(--jur) 27%, var(--jur) 57%,
    var(--rust) 57%, var(--rust) 100%);
}
.timeline-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -4px;
  width: 12px; height: 20px; border-radius: 2px; cursor: grab;
  background: linear-gradient(180deg, #3a2f1a, #241c10);
  border: 1px solid var(--page-hi);
  box-shadow: 0 2px 4px rgba(36, 28, 16, 0.5);
}
.timeline-range::-moz-range-thumb {
  width: 12px; height: 20px; border-radius: 2px; cursor: grab;
  background: linear-gradient(180deg, #3a2f1a, #241c10);
  border: 1px solid var(--page-hi);
  box-shadow: 0 2px 4px rgba(36, 28, 16, 0.5);
}
.timeline-range:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (max-width: 620px) {
  .timeline { bottom: 14px; padding: 10px 14px; }
  .timeline-label { display: none; }
}

/* ------------------------------------------------------------
   Status — a taped-up parchment label
   ------------------------------------------------------------ */
.status {
  position: fixed; top: 78px; left: 50%; z-index: 20;
  transform: translateX(-50%) rotate(-0.6deg);
  background: linear-gradient(180deg, var(--page-hi), #e6d7b4);
  border: 1px solid rgba(70, 54, 26, 0.4);
  color: #2b2213;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  padding: 7px 16px; border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   Globe — the clearing. Canopy shade and dappled light frame
   the edges only; centre stays untouched and interactive.
   ------------------------------------------------------------ */
.globe { position: fixed; inset: 0; z-index: 1; cursor: grab; }
.globe:active { cursor: grabbing; }

/* Ambient particle field — spores in the jungle, snow at the poles, sand
   in the desert, seed fluff on the plains (overridden per biome below).
   Masked away from the centre so the globe stays clear; two copies of one
   tile at different scales give a cheap parallax. */
.globe::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--spores), var(--spores);
  background-size: 260px 260px, 430px 430px;
  background-position: 0 0, 90px 200px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 64% 58% at 50% 48%, transparent 38%, #000 84%);
  mask-image: radial-gradient(ellipse 64% 58% at 50% 48%, transparent 38%, #000 84%);
  animation: spores-rise 85s linear infinite;
}
@keyframes spores-rise {
  0%   { background-position: 0 0,        90px 200px; }
  50%  { background-position: 42px -260px, 140px -230px; }
  100% { background-position: 0 -520px,   90px -660px; }
}

.globe::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(320px 220px at 10% 4%, rgba(219, 202, 128, 0.09), transparent 70%),
    radial-gradient(260px 200px at 88% 2%, rgba(190, 208, 122, 0.07), transparent 70%),
    radial-gradient(300px 240px at 4% 92%, rgba(140, 180, 90, 0.07), transparent 70%),
    radial-gradient(280px 220px at 96% 92%, rgba(214, 180, 110, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(6, 12, 7, 0.5), transparent 16%),
    linear-gradient(0deg, rgba(6, 12, 7, 0.55), transparent 18%),
    radial-gradient(ellipse 118% 104% at 50% 50%, transparent 54%, rgba(6, 12, 7, 0.38) 84%, rgba(4, 9, 5, 0.68) 100%);
  animation: clearing-breathe 24s ease-in-out infinite alternate;
}
@keyframes clearing-breathe {
  from { opacity: 0.84; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------
   Field Record panel — a parchment page stitched into the
   expedition journal, sliding in over the jungle.
   ------------------------------------------------------------ */
.panel {
  position: fixed; top: 0; right: 0; z-index: 25; height: 100%;
  width: min(392px, 92vw); padding: 0;
  color: var(--umber);
  background:
    var(--ammonite-faint) right -48px bottom 66px / 230px auto no-repeat,
    linear-gradient(160deg, #f1e8d3 0%, var(--page) 55%, var(--page-lo) 100%);
  box-shadow:
    -26px 0 54px rgba(4, 8, 5, 0.55),
    inset 0 0 90px rgba(112, 84, 40, 0.2),
    inset 0 0 8px rgba(112, 84, 40, 0.12);
  transform: translateX(105%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.panel.open { transform: translateX(0); }

/* Ink settling onto the page — the record's entries fade in one after
   another as the page slides in. Opacity only, so it never fights the
   hand-placed rotations on the photo, stamp and location line. */
.panel.open .panel-scroll > * { animation: ink-settle 0.5s ease-out backwards; }
.panel.open .panel-scroll > :nth-child(1)  { animation-delay: 0.10s; }
.panel.open .panel-scroll > :nth-child(2)  { animation-delay: 0.15s; }
.panel.open .panel-scroll > :nth-child(3)  { animation-delay: 0.20s; }
.panel.open .panel-scroll > :nth-child(4)  { animation-delay: 0.25s; }
.panel.open .panel-scroll > :nth-child(5)  { animation-delay: 0.30s; }
.panel.open .panel-scroll > :nth-child(6)  { animation-delay: 0.34s; }
.panel.open .panel-scroll > :nth-child(7)  { animation-delay: 0.38s; }
.panel.open .panel-scroll > :nth-child(8)  { animation-delay: 0.42s; }
.panel.open .panel-scroll > :nth-child(9)  { animation-delay: 0.46s; }
.panel.open .panel-scroll > :nth-child(10) { animation-delay: 0.50s; }
.panel.open .panel-scroll > :nth-child(11) { animation-delay: 0.54s; }
.panel.open .panel-scroll > :nth-child(12) { animation-delay: 0.58s; }
@keyframes ink-settle { from { opacity: 0; } }

/* cloth binding with stitches along the page's left edge */
.panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; z-index: 1;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(232, 222, 200, 0.42) 10px 15px) 8px 0 / 2px 100% no-repeat,
    linear-gradient(90deg, #0f1e12, #21391f 60%, #16291a);
  box-shadow: 3px 0 6px rgba(31, 24, 10, 0.3);
}

/* paper fibre over the whole page */
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--noise);
  mix-blend-mode: multiply; opacity: 0.07;
}

.panel-close {
  position: absolute; top: 18px; right: 20px; z-index: 5;
  width: 34px; height: 34px; border: 1px solid rgba(70, 54, 26, 0.45); border-radius: 2px;
  background: transparent; color: var(--sepia);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: color 0.18s, background-color 0.18s, border-color 0.18s;
}
.panel-close:hover { color: var(--page-hi); background: var(--umber-dk); border-color: var(--umber-dk); }

/* the specimen plate — a taped-in photograph */
.panel-image {
  position: relative;
  height: 168px; margin: 4px 2px 24px;
  background-size: cover; background-position: center;
  border: 7px solid #f6efdd;
  outline: 1px solid rgba(70, 54, 26, 0.35);
  transform: rotate(-0.7deg);
  box-shadow: 0 6px 14px rgba(60, 45, 20, 0.3);
}
.panel-image::before {
  content: ""; position: absolute; top: -18px; left: 50%; z-index: 2;
  width: 86px; height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(224, 206, 158, 0.72);
  box-shadow: 0 1px 2px rgba(60, 45, 20, 0.28);
}
.panel-image.placeholder {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(93, 72, 38, 0.14) 22px 23px),
    linear-gradient(180deg, #eee2c6, #e5d5ae);
}
.panel-image.placeholder::after {
  content: ""; width: 66px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='%238a6f35'%3E%3Cellipse cx='50' cy='86' rx='16' ry='22'/%3E%3Cpath d='M50 66C45 40 47 22 50 12 53 22 55 40 50 66Z'/%3E%3Cpath d='M39 72C27 52 21 40 17 30 29 37 39 51 45 66Z'/%3E%3Cpath d='M61 72C73 52 79 40 83 30 71 37 61 51 55 66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.55; transform: rotate(-8deg);
}

/* rubber-stamped record header */
.panel-record {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(156, 61, 36, 0.85);
  border: 1px solid rgba(156, 61, 36, 0.5);
  padding: 4px 10px 4px 13px; margin: 0 0 12px;
  transform: rotate(-1.4deg);
}
.panel-title {
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: 1.9rem; line-height: 1.04; margin: 0 0 14px; color: var(--umber-dk);
}
.panel-era {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 2px;
  color: #221808; background: #9aa184;
  border: 1px solid rgba(36, 28, 16, 0.28);
}
.panel-era[data-era="Triassic"]   { background: var(--amber); }
.panel-era[data-era="Jurassic"]   { background: var(--jur); }
.panel-era[data-era="Cretaceous"] { background: var(--rust); color: var(--bone); }

.panel-coords {
  font-family: var(--font-mono); font-size: 0.78rem; color: #7a5326;
  margin: 18px 0 2px; letter-spacing: 0.02em;
}
.panel-location {
  font-family: var(--font-script); font-size: 1.2rem; font-weight: 500;
  color: #4a3c22; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px dashed rgba(58, 48, 29, 0.35);
  transform: rotate(-0.4deg);
}
.panel-desc {
  font-size: 0.95rem; line-height: 1.72; color: var(--umber); margin: 0;
}
.panel-desc::first-letter {
  font-family: var(--font-display); font-weight: 900; font-style: normal;
  font-size: 3em; line-height: 0.78; float: left;
  padding: 5px 8px 0 0; color: #8a3c20;
}

/* ------------------------------------------------------------
   Strata — a drawn stratigraphic column across the page foot,
   an ammonite bedded into the sediment
   ------------------------------------------------------------ */
.strata {
  position: absolute; left: 18px; right: 0; bottom: 0; height: 56px; z-index: 2;
  pointer-events: none;
  background:
    var(--ammonite) right 18px bottom 6px / 46px auto no-repeat,
    repeating-linear-gradient(
      178deg,
      rgba(122, 94, 48, 0.42) 0 9px,
      rgba(93, 74, 38, 0.26) 9px 12px,
      rgba(150, 122, 66, 0.38) 12px 23px,
      rgba(94, 106, 58, 0.34) 23px 31px,
      rgba(160, 94, 52, 0.34) 31px 40px,
      rgba(80, 64, 34, 0.32) 40px 48px,
      rgba(122, 94, 48, 0.38) 48px 56px
    );
  border-top: 1px solid rgba(70, 54, 26, 0.55);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 620px) {
  .hud { padding: 12px 14px; gap: 10px; }
  .brand span { display: none; }
  .search { min-width: 0; flex: 1 1 130px; }
  .era-btn { padding: 8px 8px 8px 18px; font-size: 0.6rem; letter-spacing: 0.08em; }
  .mute { padding: 8px 9px; }
  .status { top: 122px; }
  body::before, body::after { width: 34vmin; height: 44vmin; opacity: 0.85; }
  .panel { width: min(392px, 94vw); padding: 58px 20px 76px 40px; }
  .intro::after { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  .intro .trackway use { animation: none; opacity: 1; }
  .intro { transition: none; }
  .panel { transition: none; }
  /* still scene: no drifting light, particles, breathing or staggers */
  .hud::before, .globe::before, .globe::after { animation: none !important; }
  .panel.open .panel-scroll > * { animation: none !important; }
  .size-figure .sf-dino, .size-figure .sf-human,
  .size-figure .sf-measure, .size-figure .sf-tag,
  .size-note { animation: none !important; }
}

/* ============================================================
   Field-record extras — pronounce, badges, size chart, source.
   Scroll container so a rich record never overflows the page.
   ============================================================ */
.panel-scroll {
  position: relative; z-index: 2;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 66px 26px 96px 46px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(93, 72, 38, 0.4) transparent;
}
.panel-scroll::-webkit-scrollbar { width: 9px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(93, 72, 38, 0.4); border-radius: 5px;
  border: 2px solid transparent; background-clip: padding-box;
}

.panel-head { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; }
.panel-head .panel-title { margin: 0; flex: 1 1 auto; }

.panel-say {
  flex: 0 0 auto; margin-top: 4px; padding: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(70, 54, 26, 0.4); border-radius: 2px;
  background: rgba(122, 94, 48, 0.09); color: #8a3c20; cursor: pointer;
  transition: color 0.18s, background-color 0.18s, border-color 0.18s;
}
.panel-say:hover { color: var(--page-hi); background: #8a3c20; border-color: #8a3c20; }
.panel-say svg { width: 16px; height: 16px; fill: currentColor; }

.panel-phonetic {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: #7a5326; margin: 0 0 12px;
}

.panel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 2px; }
.badge {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #3a2f1a;
  padding: 4px 9px; border-radius: 2px;
  border: 1px solid rgba(70, 54, 26, 0.35); background: rgba(122, 94, 48, 0.1);
}
.badge.diet-carnivore { color: #7a2f18; border-color: rgba(122, 47, 24, 0.4); background: rgba(194, 84, 47, 0.12); }
.badge.diet-piscivore { color: #285a63; border-color: rgba(40, 90, 99, 0.4); background: rgba(40, 90, 99, 0.12); }
.badge.diet-herbivore { color: #3f5a24; border-color: rgba(63, 90, 36, 0.4); background: rgba(127, 162, 78, 0.14); }
.badge.diet-omnivore  { color: #6a4a1e; border-color: rgba(106, 74, 30, 0.4); background: rgba(216, 166, 58, 0.14); }

.panel-size { margin: 18px 0 4px; }
.size-label {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #7a5326; margin-bottom: 6px;
}

/* The size sketch — inked silhouettes of the animal and a person standing
   on a shared ground line, drawn to a common scale (built in js/panel.js).
   The figures grow up out of the ground and a dashed surveyor's tape is
   pulled across the animal when the record opens. */
.size-figure { display: block; width: 100%; height: auto; margin: 2px 0 8px; overflow: visible; }
.size-figure .sf-ground { stroke: rgba(70, 54, 26, 0.5); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.size-figure .sf-measure line { stroke: #8a3c20; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.size-figure .sf-measure line:first-child { stroke-dasharray: 5 4; }
.size-figure .sf-tag {
  font-family: var(--font-mono); fill: #7a5326;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.size-figure .sf-dino  { fill: #52401f; }
.size-figure .sf-human { fill: #8a3c20; }
.size-figure .sf-eye   { fill: var(--page-hi); }

.size-figure .sf-dino {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: sf-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.05s backwards;
}
.size-figure .sf-human {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: sf-rise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.28s backwards;
}
@keyframes sf-rise { from { opacity: 0; transform: translateY(4%) scale(0.72); } }
.size-figure .sf-measure {
  transform-box: fill-box; transform-origin: 0 50%;
  animation: sf-draw 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}
@keyframes sf-draw { from { opacity: 0; transform: scaleX(0); } }
.size-figure .sf-tag { animation: sf-fade 0.45s ease 0.8s backwards; }
@keyframes sf-fade { from { opacity: 0; } }

.size-note {
  font-family: var(--font-script); font-size: 1.05rem; color: #4a3c22;
  transform: rotate(-0.5deg);
  animation: sf-fade 0.45s ease 0.9s backwards;
}

.panel-age {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: #7a5326; margin: 2px 0 0;
}

.panel-source {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em;
  color: #8a3c20; text-decoration: none;
  border-bottom: 1px solid rgba(138, 60, 32, 0.5); padding-bottom: 1px;
}
.panel-source:hover { color: #5d4826; border-bottom-color: #5d4826; }

/* ============================================================
   Biome reskins — the scene shifts to the chosen dig's region.
   Only the ground colour and the corner motifs change; the globe
   and parchment record stay legible.
   ============================================================ */
:root {
  /* desert — twin-armed saguaro, layered dunes, scattered rocks */
  --dune-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cpath fill='%2333230f' opacity='.75' d='M0 380 L0 322 Q80 296 170 320 Q240 338 300 330 L300 380 Z'/%3E%3Cg fill='%233d2b12' opacity='.9'%3E%3Cpath d='M243 348 C239 326 239 306 243 292 C245 287 251 287 253 292 C257 306 257 326 253 348 Z'/%3E%3Cpath d='M244 320 C234 318 228 310 227 298 C227 295 231 293 234 295 C235 305 238 311 245 313 Z'/%3E%3C/g%3E%3Cpath fill='%23241708' d='M0 380 L0 348 Q130 318 300 352 L300 380 Z'/%3E%3Cg fill='%23191006'%3E%3Cpath d='M143 366 C137 318 137 252 143 200 C145 186 151 179 158 179 C165 179 171 186 173 200 C179 252 179 318 173 366 Z'/%3E%3Cpath d='M145 296 C123 292 111 276 109 250 C109 244 112 240 117 240 C122 240 125 244 125 250 C127 268 134 278 147 282 Z'/%3E%3Cpath d='M171 268 C191 264 201 250 203 228 C203 222 200 218 195 218 C190 218 187 222 187 228 C185 244 179 252 169 256 Z'/%3E%3Cpath d='M60 372 C58 360 66 352 82 352 C96 352 104 360 102 372 Z'/%3E%3Cpath d='M104 374 C103 367 108 362 117 362 C125 362 130 367 129 374 Z'/%3E%3C/g%3E%3C/svg%3E");
  --dune-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cg transform='translate(300 0) scale(-1 1)'%3E%3Cpath fill='%2333230f' opacity='.75' d='M0 380 L0 322 Q80 296 170 320 Q240 338 300 330 L300 380 Z'/%3E%3Cg fill='%233d2b12' opacity='.9'%3E%3Cpath d='M243 348 C239 326 239 306 243 292 C245 287 251 287 253 292 C257 306 257 326 253 348 Z'/%3E%3Cpath d='M244 320 C234 318 228 310 227 298 C227 295 231 293 234 295 C235 305 238 311 245 313 Z'/%3E%3C/g%3E%3Cpath fill='%23241708' d='M0 380 L0 348 Q130 318 300 352 L300 380 Z'/%3E%3Cg fill='%23191006'%3E%3Cpath d='M143 366 C137 318 137 252 143 200 C145 186 151 179 158 179 C165 179 171 186 173 200 C179 252 179 318 173 366 Z'/%3E%3Cpath d='M145 296 C123 292 111 276 109 250 C109 244 112 240 117 240 C122 240 125 244 125 250 C127 268 134 278 147 282 Z'/%3E%3Cpath d='M171 268 C191 264 201 250 203 228 C203 222 200 218 195 218 C190 218 187 222 187 228 C185 244 179 252 169 256 Z'/%3E%3Cpath d='M60 372 C58 360 66 352 82 352 C96 352 104 360 102 372 Z'/%3E%3Cpath d='M104 374 C103 367 108 362 117 362 C125 362 130 367 129 374 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* polar — drooping spruces, one behind the other, over a snow bank */
  --pine-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cdefs%3E%3Cpath id='t' d='M78 0 C86 24 98 46 114 62 C106 60 98 56 91 51 C101 82 114 108 132 128 C122 125 111 120 101 113 C112 148 128 176 148 198 C136 194 122 187 110 178 C122 216 140 246 162 270 L-6 270 C16 246 34 216 46 178 C34 187 20 194 8 198 C28 176 44 148 55 113 C45 120 34 125 24 128 C42 108 55 82 65 51 C58 56 50 60 42 62 C58 46 70 24 78 0 Z'/%3E%3C/defs%3E%3Cuse href='%23t' fill='%23182a3a' opacity='.85' transform='translate(170 188) scale(.62)'/%3E%3Cuse href='%23t' fill='%230c1724' transform='translate(60 96)'/%3E%3Cpath fill='%23152430' d='M0 380 L0 350 Q100 330 210 350 Q260 358 300 354 L300 380 Z'/%3E%3C/svg%3E");
  --pine-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cdefs%3E%3Cpath id='t' d='M78 0 C86 24 98 46 114 62 C106 60 98 56 91 51 C101 82 114 108 132 128 C122 125 111 120 101 113 C112 148 128 176 148 198 C136 194 122 187 110 178 C122 216 140 246 162 270 L-6 270 C16 246 34 216 46 178 C34 187 20 194 8 198 C28 176 44 148 55 113 C45 120 34 125 24 128 C42 108 55 82 65 51 C58 56 50 60 42 62 C58 46 70 24 78 0 Z'/%3E%3C/defs%3E%3Cg transform='translate(300 0) scale(-1 1)'%3E%3Cuse href='%23t' fill='%23182a3a' opacity='.85' transform='translate(170 188) scale(.62)'/%3E%3Cuse href='%23t' fill='%230c1724' transform='translate(60 96)'/%3E%3Cpath fill='%23152430' d='M0 380 L0 350 Q100 330 210 350 Q260 358 300 354 L300 380 Z'/%3E%3C/g%3E%3C/svg%3E");
  /* plains — a dense grass tuft, seed heads nodding, lit blades behind */
  --grass-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cg fill='none' stroke='%23233312' stroke-width='6' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M96 380 Q86 318 64 280'/%3E%3Cpath d='M148 380 Q152 304 176 256'/%3E%3Cpath d='M206 380 Q220 320 248 288'/%3E%3Cpath d='M120 380 Q118 310 104 264'/%3E%3C/g%3E%3Cg fill='%23233312' opacity='.8'%3E%3Cellipse cx='60' cy='274' rx='4.5' ry='12' transform='rotate(-30 60 274)'/%3E%3Cellipse cx='254' cy='281' rx='4.5' ry='12' transform='rotate(41 254 281)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23131b09' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M108 380 Q100 314 80 272'/%3E%3Cpath d='M130 380 Q128 298 116 250'/%3E%3Cpath d='M152 380 Q158 298 180 244'/%3E%3Cpath d='M176 380 Q188 312 216 274'/%3E%3Cpath d='M90 380 Q82 334 64 304'/%3E%3Cpath d='M196 380 Q208 328 232 294'/%3E%3C/g%3E%3Cg fill='%23131b09'%3E%3Cellipse cx='114' cy='240' rx='5' ry='14' transform='rotate(-14 114 240)'/%3E%3Cellipse cx='184' cy='235' rx='5' ry='14' transform='rotate(22 184 235)'/%3E%3Cellipse cx='222' cy='266' rx='4.5' ry='13' transform='rotate(36 222 266)'/%3E%3C/g%3E%3C/svg%3E");
  --grass-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380'%3E%3Cg transform='translate(300 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23233312' stroke-width='6' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M96 380 Q86 318 64 280'/%3E%3Cpath d='M148 380 Q152 304 176 256'/%3E%3Cpath d='M206 380 Q220 320 248 288'/%3E%3Cpath d='M120 380 Q118 310 104 264'/%3E%3C/g%3E%3Cg fill='%23233312' opacity='.8'%3E%3Cellipse cx='60' cy='274' rx='4.5' ry='12' transform='rotate(-30 60 274)'/%3E%3Cellipse cx='254' cy='281' rx='4.5' ry='12' transform='rotate(41 254 281)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23131b09' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M108 380 Q100 314 80 272'/%3E%3Cpath d='M130 380 Q128 298 116 250'/%3E%3Cpath d='M152 380 Q158 298 180 244'/%3E%3Cpath d='M176 380 Q188 312 216 274'/%3E%3Cpath d='M90 380 Q82 334 64 304'/%3E%3Cpath d='M196 380 Q208 328 232 294'/%3E%3C/g%3E%3Cg fill='%23131b09'%3E%3Cellipse cx='114' cy='240' rx='5' ry='14' transform='rotate(-14 114 240)'/%3E%3Cellipse cx='184' cy='235' rx='5' ry='14' transform='rotate(22 184 235)'/%3E%3Cellipse cx='222' cy='266' rx='4.5' ry='13' transform='rotate(36 222 266)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* — ambient particle tiles, one per biome — */
  --spores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23d8dfa6'%3E%3Ccircle cx='26' cy='40' r='1.7'/%3E%3Ccircle cx='118' cy='16' r='1.1' opacity='.7'/%3E%3Ccircle cx='214' cy='58' r='1.9' opacity='.8'/%3E%3Ccircle cx='70' cy='118' r='1.2' opacity='.6'/%3E%3Ccircle cx='178' cy='148' r='1.5'/%3E%3Ccircle cx='38' cy='206' r='1.3' opacity='.7'/%3E%3Ccircle cx='236' cy='226' r='1.1' opacity='.6'/%3E%3Ccircle cx='140' cy='244' r='1.8' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  --sand-specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23dcb878'%3E%3Ccircle cx='20' cy='34' r='1'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.7'/%3E%3Ccircle cx='170' cy='48' r='1.2' opacity='.8'/%3E%3Ccircle cx='238' cy='24' r='.9' opacity='.6'/%3E%3Ccircle cx='58' cy='104' r='1.1'/%3E%3Ccircle cx='148' cy='126' r='.8' opacity='.7'/%3E%3Ccircle cx='226' cy='142' r='1.3' opacity='.8'/%3E%3Ccircle cx='34' cy='188' r='.9' opacity='.6'/%3E%3Ccircle cx='118' cy='206' r='1.2'/%3E%3Ccircle cx='196' cy='232' r='1' opacity='.7'/%3E%3Ccircle cx='250' cy='202' r='.8' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --snowfall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23e6edf2'%3E%3Ccircle cx='24' cy='30' r='2'/%3E%3Ccircle cx='104' cy='14' r='1.4' opacity='.7'/%3E%3Ccircle cx='188' cy='44' r='2.2' opacity='.85'/%3E%3Ccircle cx='246' cy='90' r='1.3' opacity='.6'/%3E%3Ccircle cx='62' cy='96' r='1.6'/%3E%3Ccircle cx='140' cy='118' r='2' opacity='.8'/%3E%3Ccircle cx='216' cy='150' r='1.4' opacity='.65'/%3E%3Ccircle cx='30' cy='170' r='1.8' opacity='.8'/%3E%3Ccircle cx='112' cy='192' r='1.3' opacity='.6'/%3E%3Ccircle cx='184' cy='222' r='2.1'/%3E%3Ccircle cx='68' cy='244' r='1.5' opacity='.75'/%3E%3Ccircle cx='244' cy='250' r='1.7' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  --seedheads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23ddd6a4'%3E%3Ccircle cx='32' cy='48' r='1.6'/%3E%3Ccircle cx='128' cy='22' r='1.2' opacity='.7'/%3E%3Ccircle cx='222' cy='70' r='1.8' opacity='.8'/%3E%3Ccircle cx='84' cy='134' r='1.3' opacity='.6'/%3E%3Ccircle cx='186' cy='160' r='1.5'/%3E%3Ccircle cx='48' cy='216' r='1.4' opacity='.7'/%3E%3Ccircle cx='150' cy='240' r='1.7' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* — desert: still air, drifting sand, low heat-haze at the horizon — */
body[data-biome="desert"] {
  background: radial-gradient(140% 110% at 50% -10%, #3a2b16 0%, #2a1f11 48%, #17110a 100%);
  --fern-l: var(--dune-l); --fern-r: var(--dune-r);
}
body[data-biome="desert"]::before,
body[data-biome="desert"]::after { animation: none; }
body[data-biome="desert"] .globe::before {
  background-image: var(--sand-specks), var(--sand-specks);
  opacity: 0.32;
  animation: sand-drift 28s linear infinite;
}
@keyframes sand-drift {
  0%   { background-position: 0 0,          90px 200px; }
  50%  { background-position: 260px -26px,  520px 180px; }
  100% { background-position: 520px 0,      950px 200px; }
}
body[data-biome="desert"] .hud::before {
  background:
    radial-gradient(46vmax 30vmax at 50% -6%, rgba(226, 178, 96, 0.09), transparent 64%),
    linear-gradient(0deg, rgba(224, 168, 80, 0.07), transparent 26%);
  animation: heat-haze 8s ease-in-out infinite alternate;
}
@keyframes heat-haze {
  from { transform: translate3d(0, 0.5%, 0)  scaleY(1);     opacity: 0.65; }
  to   { transform: translate3d(0, -0.4%, 0) scaleY(1.015); opacity: 1; }
}

/* — polar: slow wind in the spruces, snow falling, pale fog above — */
body[data-biome="polar"] {
  background: radial-gradient(140% 110% at 50% -10%, #1b2c3a 0%, #101c27 48%, #070d13 100%);
  --fern-l: var(--pine-l); --fern-r: var(--pine-r);
}
body[data-biome="polar"]::before { animation-duration: 17s; }
body[data-biome="polar"]::after  { animation-duration: 19s; }
body[data-biome="polar"] .globe::before {
  background-image: var(--snowfall), var(--snowfall);
  opacity: 0.5;
  animation: snow-fall 38s linear infinite;
}
@keyframes snow-fall {
  0%   { background-position: 0 0,          90px 200px; }
  50%  { background-position: 46px 260px,   150px 630px; }
  100% { background-position: 0 520px,      90px 1060px; }
}
body[data-biome="polar"] .hud::before {
  background:
    radial-gradient(50vmax 26vmax at 30% -4%, rgba(196, 216, 228, 0.07), transparent 66%),
    radial-gradient(40vmax 22vmax at 78% 2%, rgba(170, 196, 212, 0.05), transparent 68%),
    linear-gradient(0deg, rgba(200, 220, 232, 0.04), transparent 22%);
  animation: fog-drift 36s ease-in-out infinite alternate;
}
@keyframes fog-drift {
  from { transform: translate3d(-2.4%, 0, 0);    opacity: 0.6; }
  to   { transform: translate3d(2.4%, 0.6%, 0);  opacity: 1; }
}

/* — plains: wind through the grass, seed fluff adrift, cloud shadows — */
body[data-biome="plains"] {
  background: radial-gradient(140% 110% at 50% -10%, #2c3319 0%, #1f2612 48%, #12160a 100%);
  --fern-l: var(--grass-l); --fern-r: var(--grass-r);
}
body[data-biome="plains"]::before { animation: grass-sway 5.5s ease-in-out infinite alternate; }
body[data-biome="plains"]::after  { animation: grass-sway 6.5s ease-in-out infinite alternate-reverse; }
@keyframes grass-sway {
  from { transform: rotate(-1.1deg); }
  to   { transform: rotate(1.4deg); }
}
body[data-biome="plains"] .globe::before {
  background-image: var(--seedheads), var(--seedheads);
  opacity: 0.38;
  animation: seed-drift 55s linear infinite;
}
@keyframes seed-drift {
  0%   { background-position: 0 0,          90px 200px; }
  50%  { background-position: 260px -34px,  520px 168px; }
  100% { background-position: 520px 0,      950px 200px; }
}
body[data-biome="plains"] .hud::before {
  background:
    radial-gradient(44vmax 22vmax at 24% 30%, rgba(8, 12, 4, 0.16), transparent 66%),
    radial-gradient(36vmax 18vmax at 76% 58%, rgba(8, 12, 4, 0.12), transparent 68%),
    radial-gradient(30vmax 22vmax at 60% -4%, rgba(228, 216, 160, 0.06), transparent 66%);
  animation: cloud-pass 48s ease-in-out infinite alternate;
}
@keyframes cloud-pass {
  from { transform: translate3d(-4%, 0, 0); }
  to   { transform: translate3d(4%, 0, 0); }
}