/* ==============================================
   PAGE: LAB
   Layout specific to lab/index.html
   ============================================== */

.page-lab {
  min-height: 100vh;
  overflow: hidden;
}

/* ── Lab content area ── */
.lab-stage {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-4);
}

/* ── Lab card ── */
.lab-card {
  max-width: 420px;
  width: 100%;
  animation: float-in var(--dur-slow) var(--ease-out) both;
}
.lab-card h2 {
  font-size: var(--text-2xl);
  color: var(--fg);
}

/* ── Back link ── */
.back-link {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 100;
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--grass-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--parchment);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.back-link:hover { transform: translateX(-3px); }

/* ── Mushroom circle decoration ── */
.mushroom-circle {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-4);
  opacity: 0.7;
}
.mushroom-circle svg {
  width: 36px;
  height: 42px;
}

/* ── Lab entries menu ── */
.lab-entries {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.lab-entry {
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: background var(--dur-fast) var(--ease-out);
}
.lab-entry:hover:not(.lab-entry--placeholder) {
  background: rgba(255,255,255,0.12);
}
.lab-entry-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.lab-entry--placeholder {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0.45;
  cursor: default;
}
.lab-entry-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.lab-entry-title {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--fg);
}
.lab-entry-sub {
  font-size: var(--text-sm);
  color: var(--muted, #8892b0);
  margin-top: 2px;
}

/* ── Trees ── */
.tree-blob--1 {
  width: 180px; height: 200px;
  background: #4e8040;
  bottom: 0; left: -20px;
}
.tree-blob--2 {
  width: 200px; height: 220px;
  background: #3d6b32;
  bottom: 0; right: -30px;
}

/* ── Plant positions ── */
.plant--1 { left: 3%;  height: 65px; width: 36px; }
.plant--2 { left: 9%;  height: 80px; width: 42px; }
.plant--3 { right: 3%; height: 70px; width: 38px; }
.plant--4 { right: 9%; height: 75px; width: 40px; }

/* ── Clouds ── */
.cloud--1 {
  top: 12%; left: -10%;
  width: 160px;
  animation: cloud-drift 100s linear infinite;
  animation-delay: -45s;
}