*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(120% 90% at 22% 8%, #fffdf7 0%, rgba(255, 253, 247, 0) 55%),
    radial-gradient(100% 80% at 85% 95%, #dfe7dc 0%, rgba(223, 231, 220, 0) 60%),
    linear-gradient(168deg, #f4f2ea 0%, #eaeee6 45%, #dde4da 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* subtle vignette so the bubbles sit in a space rather than on a flat wash */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    115% 95% at 50% 45%,
    rgba(0, 0, 0, 0) 55%,
    rgba(72, 82, 68, 0.13) 100%
  );
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

/* ---------------------------------------------------------------- *
 *  Popped-plant info — plain text straight on the background, no
 *  card. Fixed in its own reading zone so it never has to chase the
 *  bubble; the bubbles are the ones that steer clear of it instead
 *  (see the avoidance zone in main.js). Small, dark grey, sans serif;
 *  only the plant name is bold, and everything here reads darker than
 *  the title so a popped plant always has priority on the page.
 * ---------------------------------------------------------------- */

#info {
  position: fixed;
  left: 7vw;
  top: 30vh;
  width: min(15rem, calc(100vw - 2rem));
  margin: 0;
  color: #26281f;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.005em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
  text-wrap: pretty;
  z-index: 2;
}

#info .name {
  margin: 0;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: -0.006em;
  color: #16170f;
}

#info .latin {
  margin: 0.05rem 0 0.4rem;
  font-weight: 400;
  font-style: italic;
  color: #3c4038;
}

#info .rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.06rem 0.55rem;
  margin: 0;
}

#info dt {
  font-weight: 400;
  color: #4c5147;
}

#info dd {
  margin: 0;
  font-weight: 400;
}

#info .note {
  margin: 0.45rem 0 0;
  font-weight: 400;
  color: #2c2e26;
  border-top: 1px solid rgba(38, 40, 31, 0.16);
  padding-top: 0.35rem;
}

/* ---------------------------------------------------------------- */

#hint {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  margin: 0;
  color: #7c8278;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 600ms ease;
  z-index: 2;
}

#hint.gone {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #info,
  #hint {
    transition: none;
  }
}