/* Lightning, sprouts, edge overgrowth, sunlight, windows and plants. */

/* ----- rain storms: lightning flashes over rooms with weather "rain" ----- */
.room-lightning {
  position: absolute; inset: 0; z-index: 11;
  pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 12%, rgba(225, 235, 255, 0.7), rgba(190, 210, 255, 0.25) 45%, transparent 75%);
}
.study-room.flash .room-lightning { animation: lightning 1.1s ease-out; }
.study-room.flash .world-window .sky { animation: sky-flash 1.1s ease-out; }
.study-room.flash .world-window .bolt { animation: bolt 1.1s ease-out; }
.world-window .bolt {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 4px #dfe8ff) drop-shadow(0 0 10px rgba(180,200,255,0.8));
}
@keyframes lightning {
  0% { opacity: 0; } 6% { opacity: 0.85; } 12% { opacity: 0.1; }
  20% { opacity: 0.65; } 34% { opacity: 0.05; } 100% { opacity: 0; }
}
@keyframes sky-flash {
  0%, 100% { filter: none; } 6%, 20% { filter: brightness(1.8) saturate(0.5); } 12% { filter: brightness(1.2); }
}
@keyframes bolt {
  0% { opacity: 0; } 5% { opacity: 1; } 12% { opacity: 0.2; } 20% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; }
}

/* ----- gradual growth: sprouts early, vines at the screen edges later, then sunlight ----- */
.room-sprouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.room-sprouts i {
  position: absolute; bottom: var(--b, 0);
  width: var(--w, 18px); height: var(--h, 22px);
  transform: scale(0); transform-origin: 50% 100%;
  transition: transform 3.2s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 2s ease;
  opacity: 0;
  background:
    radial-gradient(ellipse 34% 26% at 28% 38%, #5f9444 60%, transparent 62%),
    radial-gradient(ellipse 34% 26% at 72% 30%, #4f8838 60%, transparent 62%),
    linear-gradient(90deg, transparent 47%, #3c6a2c 47% 53%, transparent 53%);
}
.room-sprouts i.moss {
  height: 8px; border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, #4f7f36, #2f5226 70%, transparent 72%);
}
.room-sprouts i.up { transform: scale(1); opacity: 0.92; }
#overgrowth, #sunlight {
  position: fixed; inset: 0; pointer-events: none;
}
#overgrowth { z-index: 250; }
#overgrowth svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#overgrowth path {
  fill: none; stroke: #2f5a2a; stroke-linecap: round;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--off, 200);
  opacity: 0;
  transition: stroke-dashoffset 5s cubic-bezier(0.25, 0.75, 0.3, 1), opacity 0.8s ease;
}
#overgrowth path.grown { opacity: 1; }
#overgrowth path.under { stroke: #1f3d1c; }
#overgrowth .vine-leaf { position: absolute; }
#sunlight {
  z-index: 240;
  opacity: var(--sun, 0);
  transition: opacity 2.4s ease;
  background:
    radial-gradient(ellipse 60% 50% at 82% -6%, rgba(255, 232, 160, 0.42), transparent 62%),
    linear-gradient(200deg, rgba(255, 236, 170, 0.22) 0%, transparent 38%),
    repeating-linear-gradient(115deg, rgba(255, 240, 190, 0.06) 0 60px, transparent 60px 150px);
}
#opening:not([hidden]) ~ #overgrowth, #opening:not([hidden]) ~ #sunlight { display: none; }

/* poem world windows — paired casements on the study wall */
.world-window {
  position: relative;
  flex: 1 1 0;
  width: min(42vw, 220px);
  height: min(34vw, 175px);
  z-index: 1;
  pointer-events: none;
  padding: 11px 11px 15px;
  background:
    linear-gradient(145deg, #7a7264, #5a5246 40%, #423a30);
  border: 1px solid rgba(20,16,12,0.65);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 4px rgba(0,0,0,0.35);
  border-radius: 1px;
  filter: saturate(0.85) brightness(0.9);
}
.world-window .pane {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border: 2px solid #2e2820;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 28px rgba(10,16,20,0.5);
  background: #3a4a56;
}
.world-window .pane::after {
  content: "";
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.12) 0%, transparent 28%, transparent 62%, rgba(255,255,255,0.04) 100%),
    linear-gradient(180deg, rgba(40,50,60,0.12), transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(80,70,40,0.12), transparent 55%);
}
.world-window .mullion-v,
.world-window .mullion-h {
  position: absolute; z-index: 4; background: #4a4034;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events: none;
}
.world-window .mullion-v {
  top: 0; bottom: 0; left: 50%; width: 5px; transform: translateX(-50%);
}
.world-window .mullion-h {
  left: 0; right: 0; top: 50%; height: 5px; transform: translateY(-50%);
}
.world-window .sill {
  position: absolute;
  left: -4px; right: -4px; bottom: 2px;
  height: 10px;
  background: linear-gradient(180deg, #5a5044, #322820);
  box-shadow: 0 4px 8px rgba(0,0,0,0.45);
  border-radius: 0 0 2px 2px;
  z-index: 2;
}
.world-window .sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #5a7080 0%, #6a7a68 55%, #4a5840 100%);
  transition: background 1.2s ease, filter 1.2s ease;
  filter: brightness(0.78);
}
.world-window .ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, #3a4a2a, #1e2814);
  z-index: 1;
}
.world-window .rain span {
  position: absolute; width: 1px; height: 12px; background: rgba(220,230,240,0.55);
  animation: rain-fall 0.7s linear infinite; opacity: 0; z-index: 2;
}
.world-window.stage-rain .rain span { opacity: 1; }
.world-window.stage-rain .sky {
  background: linear-gradient(180deg, #3a4a58 0%, #4a5860 50%, #3a4438 100%);
  filter: brightness(0.72);
}
@keyframes rain-fall {
  from { transform: translateY(-20px); }
  to { transform: translateY(180px); }
}
/* openable casement sashes — the plant growth swings them wide */
.world-window .pane { perspective: 460px; }
.world-window.open .pane { overflow: visible; }
.world-window .sash {
  position: absolute; top: 0; bottom: 0; width: 50%;
  z-index: 6;
  background:
    linear-gradient(118deg, rgba(226,238,245,0.3) 0%, rgba(190,210,222,0.08) 34%, rgba(255,255,255,0.14) 58%, rgba(170,190,205,0.06) 100%);
  border: 3px solid #4a4034;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.4);
  transition: transform 2.8s cubic-bezier(0.25, 0.9, 0.3, 1), box-shadow 2.8s ease;
  backface-visibility: hidden;
}
.world-window .sash::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%; height: 3px;
  background: #4a4034;
  transform: translateY(-50%);
}
.world-window .sash.l { left: 0; transform-origin: left center; }
.world-window .sash.r { right: 0; transform-origin: right center; }
.world-window.open .sash.l { transform: rotateY(-72deg); }
.world-window.open .sash.r { transform: rotateY(72deg); }
.world-window.open .mullion-v { opacity: 0; transition: opacity 1.4s ease; }
.world-window.open { box-shadow: 0 14px 28px rgba(0,0,0,0.55), 0 0 34px rgba(190,200,160,0.14); }

/* Plants grow with the journey's growth value */
.world-window .plant {
  position: absolute; bottom: 24%; z-index: 2;
  width: 3px;
  transform-origin: bottom center;
  transform: scaleY(calc(var(--pg, 0) * var(--pw, 1) * 0.92));
  transition: transform 4.6s cubic-bezier(0.22, 0.85, 0.3, 1);
  background: linear-gradient(180deg, #4a7a3a, #2a4a22);
  border-radius: 2px 2px 0 0;
}
.world-window .window-vines {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
}
.world-window .window-vines i {
  position: absolute;
  width: 5px;
  background: linear-gradient(180deg, #4a7a38, #2a4e22);
  border-radius: 40%;
  transform-origin: top center;
  transform: scaleY(var(--wv, 0));
  transition: transform 5s cubic-bezier(0.22, 0.8, 0.3, 1);
  box-shadow: 0 0 0 1px rgba(20,40,16,0.35);
}
.world-window .window-vines i:nth-child(1) { left: 18%; top: -4%; height: 78%; }
.world-window .window-vines i:nth-child(2) { left: 62%; top: -6%; height: 86%; transition-delay: 0.5s; }
.world-window .window-vines i:nth-child(3) { left: 40%; top: 8%; height: 70%; width: 4px; transition-delay: 1s; }
.world-window .window-vines i::after {
  content: "";
  position: absolute; left: -9px; bottom: 18%;
  width: 14px; height: 9px;
  background: radial-gradient(ellipse at 30% 50%, #6a9a46, #2f5a28);
  border-radius: 80% 12% 80% 12%;
}
.world-window .plant .leaf {
  position: absolute;
  display: block;
  width: 10px; height: 6px;
  background: radial-gradient(ellipse at 30% 50%, #5a8a42, #2f5a28 70%);
  border-radius: 0 80% 0 80%;
  opacity: 0.92;
}
.world-window .plant .leaf.l { left: -8px; transform: rotate(-28deg); }
.world-window .plant .leaf.r { right: -8px; transform: rotate(28deg) scaleX(-1); }
.world-window .plant .leaf.t {
  left: 50%; top: -2px; width: 8px; height: 9px;
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 60% 60% 20% 60%;
}
.world-window.stage-sun .sky,
body.growth-vines .world-window .sky {
  background:
    radial-gradient(ellipse 46% 36% at 72% 20%, rgba(255,232,168,0.55), transparent 58%),
    linear-gradient(180deg, #8a7048 0%, #a89058 40%, #6a7840 100%);
  filter: brightness(0.92);
}
.world-window.stage-sun .ground,
body.growth-vines .world-window .ground {
  background: linear-gradient(180deg, #44632e, #253a16);
}
.world-window.stage-overgrow .sky,
body.growth-sun .world-window .sky {
  background:
    radial-gradient(ellipse 58% 48% at 70% 16%, rgba(255,236,170,0.85), transparent 52%),
    linear-gradient(180deg, #c8a85a 0%, #d8c070 36%, #8aaa50 100%);
  filter: brightness(1.18) saturate(1.15);
}
.world-window.stage-overgrow .ground,
body.growth-sun .world-window .ground {
  background: linear-gradient(180deg, #5a8a3a, #325820);
}
.world-window.stage-overgrow .plant,
body.growth-sun .world-window .plant { filter: brightness(1.16); }
.world-window.stage-overgrow,
body.growth-sun .world-window { filter: saturate(1.08) brightness(1.08); }
.world-window.stage-calm .sky {
  background: linear-gradient(180deg, #5a7080 0%, #6a7a68 55%, #4a5840 100%);
  filter: brightness(0.76);
}

#achievements {
  max-width: 44rem; margin: 0 auto; padding: 3.4rem 1.25rem 2.4rem;
  border-top: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,236,190,0.08), transparent 46%),
    linear-gradient(180deg, rgba(42, 36, 28, 0.55), rgba(13,13,15,0.2));
}
#achievements h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: 0.08em;
  font-size: 1.35rem; text-transform: none; margin-bottom: 0.35rem; color: var(--ink);
}
#achievements .ach-lead {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--mute); margin-bottom: 0.85rem; max-width: 34rem;
}
#achievements .ach-count {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--mute); margin-bottom: 1.15rem;
}
#achievements .ach-count b { color: var(--yellow); font-weight: 400; }
#achievements .ach-bar {
  height: 6px; background: rgba(232,228,220,0.08); margin: 0.45rem 0 1.1rem;
  overflow: hidden;
}
#achievements .ach-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--yellow), #8aaa50);
  transition: width 0.6s ease;
}
#achievements .ach-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.15rem; flex-wrap: wrap; }
#achievements .ach-tabs button {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.45rem 0.75rem;
  border: 1px solid var(--line); color: var(--mute);
  background: rgba(13,13,15,0.35);
}
#achievements .ach-tabs button.on { color: var(--ink); border-color: var(--yellow); color: var(--yellow); }
#achievements .ach-group { margin-bottom: 1.35rem; }
#achievements .ach-group h3 {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 0.45rem;
}
#achievements ul { list-style: none; }
#achievements li {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  padding: 0.65rem 0.7rem; margin-bottom: 0.35rem;
  border: 1px solid var(--line); color: var(--mute);
  display: flex; justify-content: space-between; gap: 1rem;
  background: rgba(13,13,15,0.28);
}
#achievements li.earned {
  color: var(--ink);
  border-color: rgba(201,185,138,0.35);
  background: rgba(201,185,138,0.06);
}
#achievements li .mark { letter-spacing: 0.08em; font-size: 0.58rem; flex-shrink: 0; }
#achievements li.earned .mark { color: var(--yellow); }
#achievements li .hint {
  display: block; font-size: 0.55rem; color: var(--mute); letter-spacing: 0.04em;
  margin-top: 0.15rem; opacity: 0.75;
}
.hole.clickable { pointer-events: auto; cursor: pointer; }

.hole.evaporating {
  transition: opacity 1.8s ease, transform 1.8s ease, width 1.8s ease, height 1.8s ease;
  opacity: 0; transform: translate(-50%, -50%) scale(0.15);
}
.hole-disk.evaporating {
  transition: opacity 1.8s ease, filter 1.8s ease;
  opacity: 0; filter: brightness(2);
}
.orbit-strip.draggable { pointer-events: auto; }
.orbit-strip.consumed {
  transition: opacity 0.45s, transform 0.45s;
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.2) !important;
  pointer-events: none !important;
}

.matrix-bit { cursor: pointer; }
.matrix-bit.caught {
  outline: 1px solid rgba(61,186,106,0.7);
  box-shadow: 0 0 12px rgba(61,186,106,0.35);
}
.matrix-bit.caught.gone { outline-color: transparent; }