/* Zoologist: be the animal. The garden is a canvas; everything over it is
   plain HTML. The garden stays light in both themes; panels follow the
   site's tokens. */
.zs { max-width: 72rem; }
.zs [hidden] { display: none !important; }
.zs h1 { margin: 0; }
.zs h2 { font-family: var(--font-display); font-size: var(--step-2); margin: 0 0 0.6rem; }
.zs button.big { font-size: var(--step-1); padding: 0.75rem 1.6rem; }
.zs-note { color: var(--ink-soft); font-size: var(--step--1); margin: 0.4rem 0 0; }
.zs-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.zs-head h1 { flex: 1; }

/* The builder */
.zs-build { display: grid; grid-template-columns: minmax(10rem, 20rem) 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.zs-hero { width: 100%; height: auto; max-width: 20rem; justify-self: center; }
.zs-pick { display: grid; gap: 0.9rem; }
.zs-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zs-row > b { font-family: var(--font-display); font-weight: 600; width: 4rem; }
button.zs-opt {
  display: grid; justify-items: center; gap: 0.15rem; padding: 0.35rem 0.5rem 0.45rem; border-radius: 1.1rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  background: var(--paper); border: 2px solid var(--rule); color: var(--ink);
}
button.zs-opt canvas { width: 4.2rem; height: 4.2rem; }
button.zs-opt[aria-checked="true"] { border-color: var(--candyfloss-deep); background: color-mix(in srgb, var(--candyfloss) 18%, var(--paper)); }
.zs-go { justify-self: start; margin-top: 0.3rem; }
.zs-more { color: var(--ink-soft); font-size: var(--step--1); max-width: 34rem; }
.zs-more summary { cursor: pointer; }
@media (max-width: 40rem) {
  .zs-build { grid-template-columns: 1fr; }
  .zs-hero { max-width: 11rem; }
  .zs-row > b { width: 100%; }
}

/* The nights */
.zs-map { display: grid; gap: 1.2rem; margin-top: 1rem; }
.zs-me { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.zs-me canvas { width: 7rem; height: 7rem; }
.zs-me > div { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zs-home { width: 100%; margin: 0; font-family: var(--font-display); font-weight: 600; }
.zs-me [data-book] span { color: var(--ink-soft); font-weight: 400; margin-left: 0.3rem; }
.zs-nights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.8rem; }
button.zs-night {
  position: relative; width: 100%; display: flex; align-items: center; gap: 0.7rem; text-align: left;
  padding: 0.8rem 1rem; border-radius: 1.3rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-0);
  background: color-mix(in srgb, var(--mint) 30%, var(--paper)); color: var(--ink); border: 2px solid var(--rule);
}
.zs-nights li:nth-child(odd) button.zs-night { rotate: -0.6deg; }
.zs-nights li:nth-child(even) button.zs-night { rotate: 0.6deg; }
button.zs-night.done { background: color-mix(in srgb, var(--mint) 60%, var(--paper)); }
button.zs-night.next { border-color: var(--candyfloss-deep); box-shadow: var(--shadow); }
button.zs-night:disabled { opacity: 0.55; cursor: default; }
.zs-n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-weight: 600; flex: none; }
.zs-t { flex: 1; }
.zs-tick { color: var(--ink); font-weight: 700; }
.zs-master { display: flex; gap: 0.8rem; align-items: center; padding: 0.7rem 1rem; border-radius: 1.3rem; background: color-mix(in srgb, var(--shine) 30%, var(--paper)); max-width: 30rem; }
.zs-master > div { display: grid; }
.zs-master b { font-family: var(--font-display); font-size: var(--step-1); }
.zs-badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--shine); color: #4a2545; font-size: 1.6rem; border: 2px solid #4a2545; flex: none; }

/* Playing */
.zs-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; scroll-margin-top: 0.3rem; }
.zs-bar b { flex: 1; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.zs-stage {
  position: relative; height: clamp(20rem, calc(100dvh - 3.6rem), 46rem);
  border-radius: var(--radius); overflow: hidden; border: 2px solid var(--rule); box-shadow: var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none; background: #a6d48c;
}
.fs.full .zs-stage { height: calc(100dvh - 4rem); }
.zs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.zs-goals, .zs-clock, .zs-warn, .zs-meters, .zs-toast, .zs-banner {
  color: #4a2545; background: rgb(255 255 255 / 0.88); border-radius: 1rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
}
.zs-goals { position: absolute; top: 0.5rem; left: 0.5rem; list-style: none; margin: 0; padding: 0.35rem 0.6rem; display: grid; gap: 0.15rem; font-size: var(--step--1); pointer-events: none; max-width: 60%; }
.zs-goals li { display: flex; gap: 0.35rem; align-items: center; }
.zs-goals li.done { opacity: 0.55; text-decoration: line-through; }
.zs-goals li.now { font-weight: 700; }
.zs-goals li.later { opacity: 0.7; }
.zs-goals small { font-variant-numeric: tabular-nums; }
.zs-clock { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; pointer-events: none; }
.zs-clock > i { width: 5rem; height: 8px; border-radius: 4px; background: #2e2a5e; overflow: hidden; }
.zs-clock > i > i { display: block; height: 100%; background: #9c86e8; }
.zs-clock.dawn > i > i { background: #ffb05e; }
.zs-warn { position: absolute; top: 3.2rem; left: 50%; translate: -50% 0; margin: 0; padding: 0.4rem 0.9rem; font-family: var(--font-display); font-weight: 600; background: #ffd9c2; animation: zs-pulse 1s ease-in-out infinite; pointer-events: none; text-align: center; max-width: calc(100% - 1rem); }
.zs-meters { position: absolute; left: 0.5rem; bottom: 0.5rem; display: grid; gap: 0.25rem; padding: 0.4rem 0.6rem; pointer-events: none; }
.zs-meter { display: grid; grid-template-columns: 1.4rem 6.5rem; align-items: center; }
.zs-meter > i { height: 10px; border-radius: 5px; background: #eadfe6; overflow: hidden; }
.zs-meter > i > i { display: block; height: 100%; border-radius: 5px; transition: width 150ms; }
.zs-meter.water > i > i { background: #6fb3d6; }
.zs-meter.food > i > i { background: #8fd06a; }
.zs-meter.low > i { animation: zs-pulse 0.8s ease-in-out infinite; box-shadow: 0 0 0 2px #ff8fc7; }
.zs-buttons { position: absolute; right: 0.5rem; bottom: 0.5rem; display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
.zs-buttons button { font-size: var(--step-0); padding: 0.65rem 1.2rem; }
.zs-shell[aria-pressed="true"] { background: #4a2545; color: #fff; }
.zs-sniff.useful { background: #e9dcff; color: #4a2545; animation: zs-beckon 1s ease-in-out infinite; }
.zs-act { background: linear-gradient(90deg, #ffd166 var(--p, 0%), #fff7d6 var(--p, 0%)); color: #4a2545; animation: zs-beckon 1s ease-in-out infinite; }
.zs-toasts { position: absolute; left: 50%; bottom: 5.2rem; translate: -50% 0; width: min(28rem, calc(100% - 1rem)); display: grid; gap: 0.3rem; }
button.zs-toast {
  font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); text-align: left; padding: 0.4rem 0.75rem; border: 0;
  animation: zs-in 250ms ease-out, zs-out 700ms ease-in 6.3s forwards; line-height: 1.35;
}
.zs-banner { position: absolute; left: 50%; top: 40%; translate: -50% -50%; padding: 0.9rem 1.4rem; text-align: center; pointer-events: none; transition: opacity 0.7s; animation: zs-fade 300ms ease-out; }
.zs-banner.out { opacity: 0; }
.zs-banner b { display: block; font-family: var(--font-display); font-size: var(--step-2); }
.zs-banner ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; justify-content: center; }
.zs-banner li { display: flex; gap: 0.3rem; align-items: center; white-space: nowrap; }
.zs-banner p { margin: 0.3rem 0 0; }

.zs-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.75rem; background: rgb(74 37 69 / 0.3); overflow-y: auto; z-index: 5; }
.zs-over.zs-book { position: fixed; z-index: 50; }
.zs-panel { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); max-width: 36rem; width: 100%; max-height: 100%; overflow-y: auto; text-align: center; animation: zs-in 250ms ease-out; }
.zs-oops { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--candyfloss-deep); margin: 0 0 0.3rem; }
.zs-answers { display: grid; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.zs-answers button { font-family: var(--font-body); font-weight: 600; font-size: var(--step-0); padding: 0.7rem 1rem; border-radius: 1.1rem; text-align: left; line-height: 1.3; }
.zs-answers button.right { background: var(--mint); color: #2b4a3c; border-color: #3f9a78; opacity: 1; }
.zs-answers button.wrong { background: var(--peach); color: #5a2f1e; opacity: 1; }
.zs-answers button:disabled:not(.right):not(.wrong) { opacity: 0.5; }
.zs-after p { margin: 0.6rem 0; text-align: left; }
.zs-done-pic { width: 9rem; height: 9rem; display: block; margin: 0 auto 0.4rem; }
.zs-master.big { margin: 0.5rem auto; text-align: left; }
.zs-learnt { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.4rem; text-align: left; font-size: var(--step--1); color: var(--ink-soft); }
.zs-done-buttons { display: flex; gap: 0.6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; }
.zs-facts { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: grid; gap: 0.4rem; text-align: left; font-size: var(--step--1); }
.zs-facts li { padding: 0.4rem 0.7rem; border-radius: 0.8rem; background: color-mix(in srgb, var(--mint) 25%, var(--paper)); }
.zs-facts li.unknown { background: var(--rule); color: var(--ink-soft); text-align: center; }
.zs-book .zs-panel { max-width: 40rem; max-height: 90dvh; }

@media (max-width: 34rem) {
  .zs-meter { grid-template-columns: 1.3rem 4.5rem; }
  .zs-buttons button { padding: 0.6rem 0.9rem; }
  .zs-toasts { bottom: 7.5rem; }
}

@keyframes zs-pulse { 50% { opacity: 0.75; } }
@keyframes zs-beckon { 50% { scale: 1.05; } }
@keyframes zs-in { from { opacity: 0; translate: 0 0.5rem; } }
@keyframes zs-out { to { opacity: 0; } }
@keyframes zs-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .zs-warn, .zs-act, .zs-sniff.useful, .zs-meter.low > i { animation: none; }
  button.zs-toast, .zs-panel, .zs-banner { animation: none; }
}