:root {
  --bg: #0d0f0c;
  --fg: #cdbfa6;
  --dim: #5b5848;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* never scroll sideways */
  scrollbar-width: none;       /* hide the scrollbar (Firefox) — still scrollable */
}
/* hide the scrollbar in WebKit/Blink — wheel/trackpad/keys still scroll */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

/* #stage grows taller than the viewport when a tree outgrows it; the page
   then scrolls upward to reveal the canopy. The canvas is pinned to the
   bottom of the stage (the ground), so growth happens upward. */
#stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;          /* dynamic vh: accounts for the iOS toolbar (falls back to 100vh) */
  overflow: hidden;            /* clip the empty sky above the stage */
}

#tree {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
}

/* link tags carried in the canopy — overlay matched to the canvas in JS */
#links {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;   /* the container is inert; the tags re-enable clicks */
}
.leaf-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);   /* JS overrides with position + this offset */
  will-change: transform;             /* own compositor layer — no movement trails */
  color: #fff;
  background: var(--bg);          /* opaque — not see-through */
  border: 2px solid #fff;         /* crisp white-edged rectangle (┏━┓ look) */
  border-radius: 0;
  padding: 0.2em 0.55em;   /* breathing room between text and border */
  line-height: 1.2;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;               /* a bit thicker */
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.5s ease;
  user-select: none;
}
.leaf-link.show { opacity: 1; }
.leaf-link:hover { background: #fff; color: var(--bg); }
body.links-off #links { display: none; }

#corner {
  position: fixed;
  right: 0.9em;
  bottom: 0.6em;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
}
#corner-row { display: flex; align-items: center; gap: 12px; }

#repo-link {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--dim);
}
#repo-link:hover { color: var(--fg); border-color: var(--fg); }

.corner-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}
.corner-toggle:hover { color: var(--fg); }

#links-hint {
  color: var(--dim);
  opacity: 0.8;
  transition: opacity 0.8s ease;
}
#links-hint.gone { opacity: 0; pointer-events: none; }

.scroll-hint {
  position: fixed;
  left: 0;            /* exact 1-cell inset set from JS */
  color: var(--dim);
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.scroll-hint.show { opacity: 0.75; }
#hint-up { top: 0; }
#hint-down { bottom: 0; }

#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.15em;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.8; } }