/* About page: a climb up the Big Bloom's stalk, past Jenny's work, to a vase at
   the top. It opens at the very bottom, in Bloom Season (the footer). */
html { scroll-behavior: smooth; overflow-anchor: none; }
.js body.is-locked .climb { display: none; }

.climb {
  /* the stalk grows up the middle; the fruit hangs on both sides of it */
  --trunk: clamp(64px, 18vw, 280px);
  --fruit: clamp(124px, 17vw, 220px);
  /* clip sideways only: her stalk reaches down into the game's top edge */
  position: relative; z-index: 1; overflow: hidden; overflow-x: clip; overflow-y: visible;
  padding: calc(var(--bar) + 48px) var(--m) 190px;
}
.trunk { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.trunk-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.bb-head, .climber { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.bb-head { z-index: 3; width: 200px; height: 200px; opacity: 0; transition: opacity .6s ease; }
.bb-head.is-out { opacity: 1; }
.bb-head svg { width: 100%; height: 112.5%; overflow: visible; animation: sway 4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.climber { z-index: 5; width: 96px; opacity: 0; transition: opacity .3s; }
.climber.is-out { opacity: 1; }
.climber-in { aspect-ratio: 200 / 230; }
.climber-in svg { display: block; width: 100%; height: 100%; overflow: visible; }
.climber.is-climbing .climber-in svg { animation: walk-bob .26s ease-in-out infinite alternate; }
.climber.is-climbing .av-leg--l { animation: leg .26s ease-in-out infinite alternate; }
.climber.is-climbing .av-leg--r { animation: leg .26s ease-in-out infinite alternate-reverse; }
.climber.is-resting .av-lids { opacity: 1; }
.climber-say, .bb-say {
  position: absolute; left: 50%; bottom: 100%; z-index: 1;
  width: max-content; max-width: min(260px, 70vw); margin: 0 0 12px; padding: .65em 1em; border-radius: 1em;
  background: #fff7ef; color: var(--ink-dark); font: 700 .9375rem/1.35 var(--text); text-align: center;
  translate: -50% 0; opacity: 0; scale: .9; transform-origin: 50% 100%;
  transition: opacity .2s var(--ease-out), scale .2s var(--ease-out);
}
.climber-say::after, .bb-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; translate: -50% 0; rotate: 45deg; background: inherit; }
.climber.is-saying .climber-say { opacity: 1; scale: 1; }
/* the Big Bloom's own bubble, and the key she gives your character */
.bb-head.is-saying { z-index: 9; }
.bb-head.is-saying .bb-say { opacity: 1; scale: 1; }
.bb-head.is-giving { animation: give .9s var(--ease-spring); }
@keyframes give { 35% { translate: 0 -16px; } }
.key-fly, .climber-key { position: absolute; aspect-ratio: 150 / 80; pointer-events: none; }
.key-fly svg, .climber-key svg { display: block; width: 100%; height: 100%; overflow: visible; }
.key-fly { left: 0; top: 0; z-index: 9; filter: drop-shadow(0 0 10px #ffd23f); will-change: transform; }
.climber-key { left: 56%; top: 38%; width: 80%; rotate: -18deg; filter: drop-shadow(0 0 5px rgba(255, 210, 63, .7)); animation: key-hold 1.4s ease-in-out infinite alternate; }
@keyframes key-hold { from { translate: 0 0; rotate: -22deg; } to { translate: 0 -4px; rotate: -12deg; } }

/* the top: a vase and a wooden sign pointing to it; below, Jenny beside the Big Bloom's head */
.crown { position: relative; z-index: 7; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.crown .vase, .crown .letter { pointer-events: auto; }
.crown-top { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 34px); }
.wood { display: grid; justify-items: center; margin-bottom: 4px; }
.wood-sign {
  max-width: 17ch; padding: 14px 34px 14px 18px;
  background: repeating-linear-gradient(174deg, #c98b54 0 10px, #b9773f 10px 12px, #c98b54 12px 22px, #d69a62 22px 24px);
  color: #3a210f; font: 600 clamp(.95rem, 1.9vw, 1.35rem)/1.15 var(--display); text-align: center;
  clip-path: polygon(0 6%, 3% 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 3% 100%, 0 94%);
  animation: wind-sign 3.6s ease-in-out infinite alternate; transform-origin: 50% 100%;
}
/* a thick white outline behind every letter, like the signs on the home page */
.wood-sign { text-shadow: 3.4px 0.0px 0 #fff, 3.1px 1.3px 0 #fff, 2.4px 2.4px 0 #fff, 1.3px 3.1px 0 #fff, 0.0px 3.4px 0 #fff, -1.3px 3.1px 0 #fff, -2.4px 2.4px 0 #fff, -3.1px 1.3px 0 #fff, -3.4px 0.0px 0 #fff, -3.1px -1.3px 0 #fff, -2.4px -2.4px 0 #fff, -1.3px -3.1px 0 #fff, -0.0px -3.4px 0 #fff, 1.3px -3.1px 0 #fff, 2.4px -2.4px 0 #fff, 3.1px -1.3px 0 #fff, 1.7px 0.0px 0 #fff, 1.6px 0.7px 0 #fff, 1.2px 1.2px 0 #fff, 0.7px 1.6px 0 #fff, 0.0px 1.7px 0 #fff, -0.7px 1.6px 0 #fff, -1.2px 1.2px 0 #fff, -1.6px 0.7px 0 #fff, -1.7px 0.0px 0 #fff, -1.6px -0.7px 0 #fff, -1.2px -1.2px 0 #fff, -0.7px -1.6px 0 #fff, -0.0px -1.7px 0 #fff, 0.7px -1.6px 0 #fff, 1.2px -1.2px 0 #fff, 1.6px -0.7px 0 #fff; }
.wood-post { width: 14px; height: clamp(40px, 6vw, 70px); border-radius: 0 0 4px 4px; background: #8a5a35; box-shadow: inset -4px 0 0 #6e4526; }
/* a lush tuft of grass where the post goes into the ground */
.wood-grass { width: clamp(130px, 16vw, 190px); height: auto; aspect-ratio: 160 / 44; margin-top: -26px; overflow: visible; }
.crown-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--trunk) minmax(0, 1fr); align-items: end; margin-top: 18px; }
.crown-tip { grid-column: 2; grid-row: 1; height: clamp(140px, 18vw, 230px); }
.vases { display: flex; align-items: flex-end; gap: 8px; }
.vase { width: clamp(96px, 14vw, 170px); aspect-ratio: 200 / 260; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 30px; transition: transform .2s var(--ease-out); }
.vase svg { width: 100%; height: 100%; overflow: visible; }
.vase:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .vase:not(.is-full):hover { transform: translateY(-4px) rotate(-2deg); } }
.vase.is-nope { animation: nope .45s var(--ease-out); }
@keyframes nope { 20% { rotate: -6deg; } 45% { rotate: 5deg; } 70% { rotate: -3deg; } }
.vase-head { animation: sway 3.4s ease-in-out infinite alternate; transform-origin: 0 90px; }
.vase.is-full .vase-flowers { animation: plop .6s var(--ease-spring); transform-origin: 0 -140px; }
@keyframes plop { from { scale: .3; opacity: 0; } }

/* the letter */
.letter {
  z-index: 8;
  display: grid; justify-items: center; gap: 12px;
  position: absolute; top: -12px; left: 50%; translate: -50% 0;
  width: min(520px, 100% - 16px); margin: 0; padding: 36px 30px 28px;
  border-radius: 8px; background: #fff7ef; color: var(--ink-dark);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 0 10px #fff7ef, inset 0 0 0 12px #f2c2d8;
  text-align: center; transform-origin: 50% 0;
  animation: unfold .7s var(--ease-out);
}
.letter[hidden] { display: none; }
@keyframes unfold { from { transform: perspective(900px) rotateX(-80deg); opacity: 0; } }
.letter-to { font-weight: 700; font-size: var(--t-s); color: #6b4a5c; }
.letter-body { font: 600 1.3rem/1.45 var(--display); }
.letter label { display: grid; justify-items: center; gap: 4px; width: 100%; font-weight: 700; font-size: var(--t-s); color: #6b4a5c; }
.letter input {
  width: min(360px, 100%); padding: 6px 4px; border: 0; border-bottom: 2px solid #d9a3bd; border-radius: 0;
  background: transparent; color: var(--ink-dark); text-align: center; font: 600 1.05rem var(--text);
}
.letter-sign input { font: 600 2rem/1.1 "Caveat", cursive; }
.letter input:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.letter input:disabled { opacity: .7; }
.letter-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.letter-note { font-size: .8125rem; opacity: .7; margin: 0; }
.letter.is-sent .letter-note { display: none; }
.letter-status { min-height: 1.4em; font-weight: 700; color: #b0245f; }
.letter-status:empty { display: none; }
.letter.is-sent { animation: mail 1.4s var(--ease-out) forwards; }
.letter.is-sent .letter-status { color: #1f7a4a; }
@keyframes mail { 30% { transform: scale(.9) rotate(-2deg); } 100% { transform: scale(.94); } }
/* mailed: it flies off so you can see the Big Bloom hand over the key */
.letter.is-gone { animation: mail-away .6s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes mail-away { from { transform: scale(.94); } to { transform: translateY(-60px) scale(.5) rotate(-8deg); opacity: 0; } }

/* the stalk's fruit: newest at the top, hanging left and right of the middle */
.tree { position: relative; z-index: 2; list-style: none; width: 100%; max-width: 1100px; margin: 120px auto 0; padding: 0; }
.branch { position: relative; width: calc(50% - var(--trunk) / 2); display: grid; justify-items: center; }
.branch:nth-child(odd) { margin-right: auto; }
.branch:nth-child(even) { margin-left: auto; }
/* each fruit grows in from the stem on its top, where the branch holds it */
.branch { transform-origin: 50% 0; }
.branch + .branch { margin-top: calc(var(--fruit) * .32); }
.js .branch { opacity: 0; scale: .3; transition: opacity .5s var(--ease-out), scale .9s var(--ease-spring); }
.js .branch.is-in { opacity: 1; scale: 1; }
/* every fruit: a round polka-dot skin with a stalk and a leaf on top */
.fruit {
  position: relative; display: grid; width: var(--fruit); aspect-ratio: 1; padding: clamp(7px, 1vw, 10px); border-radius: 50%;
  background-color: var(--pink); background-image: radial-gradient(#ffd4ea 22%, transparent 24%); background-size: 20px 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.branch:nth-child(4n + 2) .fruit { background-color: var(--orange); background-image: radial-gradient(var(--butter) 22%, transparent 24%); }
.branch:nth-child(4n + 3) .fruit { background-color: #4fcf86; background-image: radial-gradient(var(--mint) 22%, transparent 24%); }
.branch:nth-child(4n + 4) .fruit { background-color: var(--violet); background-image: radial-gradient(var(--lilac) 22%, transparent 24%); }
.fruit::before { content: ""; position: absolute; left: 50%; top: -22px; width: 7px; height: 28px; border-radius: 4px; background: #2f8f55; translate: -50% 0; rotate: 12deg; }
.fruit::after { content: ""; position: absolute; left: 54%; top: -26px; width: 38px; height: 20px; border-radius: 0 100% 0 100%; background: radial-gradient(#22307a 22%, transparent 24%) 0 0 / 10px 10px, #b9f4a3; rotate: -18deg; }
.fruit img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* everything moves in the wind: fruit swing from their stems, leaves flutter, the vase rocks */
.fruit { transform-origin: 50% -22px; animation: fruit-sway 4.4s ease-in-out var(--wd, 0s) infinite alternate; }
@keyframes fruit-sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.leaf-sway { animation: wind-leaf 3.4s ease-in-out var(--wd, 0s) infinite alternate; }
.vase svg { transform-origin: 50% 100%; animation: vase-rock 5s ease-in-out infinite alternate; }
@keyframes vase-rock { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
/* the words sit on the fruit's dark middle */
.fruit-in {
  display: grid; place-content: center; justify-items: center; gap: clamp(2px, .5vw, 6px);
  border-radius: 50%; padding: 14%; background: #17131f; text-align: center;
}
.fruit-in h2 { font-size: clamp(.8rem, 1.7vw, 1.35rem); line-height: 1.05; }
.fruit-in p { color: var(--ink-2); font-size: clamp(.6rem, 1.1vw, .85rem); line-height: 1.25; }
.job-year { padding: 2px 9px; border-radius: 999px; background: var(--yellow); color: var(--ink-dark); font-weight: 800; font-size: clamp(.56rem, .9vw, .72rem); white-space: nowrap; }
.fruit-in--win b { font: 600 clamp(1.7rem, 4.2vw, 3.3rem)/.9 var(--display); letter-spacing: -0.03em; color: var(--accent); }
.branch:nth-child(4n + 3) .fruit-in--win b { color: var(--mint); }
.fruit-in--win span { color: var(--ink-2); font-weight: 600; font-size: clamp(.6rem, 1.1vw, .85rem); line-height: 1.25; max-width: 14ch; }

.climb-cue {
  position: absolute; left: calc(50% + var(--trunk) / 2 + 12px); bottom: 22px; z-index: 6; width: max-content;
  min-height: 44px; padding: 0 20px 0 16px; border: 0; border-radius: 999px;
  background: var(--yellow); color: var(--ink-dark); font: 700 var(--t-s)/1 var(--text); cursor: pointer;
  animation: badge-next .7s ease-in-out infinite alternate;
}
.climb-cue::before { content: "↑ "; }

/* flowers on the stalk, waiting to be cut */
.trunk-flower {
  position: absolute; z-index: 4; padding: 0; border: 0; background: none; cursor: pointer;
  scale: 0; transition: scale .7s var(--ease-spring);
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.trunk-flower.is-grown { scale: 1; }
/* flowers hanging from a vine swing from the top, where the stem holds them */
.trunk-flower.is-hanging { transform-origin: 50% 0; }
.trunk-flower.is-hanging svg { transform-origin: 50% 0; animation-name: hang-swing; animation-duration: 3.2s; }
@keyframes hang-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.trunk-flower svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; animation: wind-bloom 3.8s ease-in-out var(--wd, 0s) infinite alternate; }
.trunk-flower.is-cutting svg { animation: shiver .09s linear infinite alternate; }
@keyframes shiver { from { transform: rotate(-5deg) translateX(-1px); } to { transform: rotate(5deg) translateX(1px); } }
.trunk-flower.is-cut { scale: 0; transition-duration: .2s; pointer-events: none; }
.trunk-flower:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 50%; }
.cut-fly { position: fixed; z-index: 96; pointer-events: none; overflow: visible; }
/* the stalk's flowers sit in one layer above the fruit, swaying with the whole plant */
.bloom-flowers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.letter-hint {
  position: absolute; top: -16px; left: 50%; translate: -50% 0; width: max-content; max-width: 90%;
  padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--ink-dark);
  font: 700 .875rem/1.3 var(--text);
}
.letter-hint:empty { display: none; }
.bloom-flowers .trunk-flower { pointer-events: auto; }

/* the shears and the bouquet hand */
.cut-on, .cut-on * { cursor: none !important; }
.cut-on .game-view, .cut-on .game-view * { cursor: auto !important; }
.cut-on .game-view button, .cut-on .game-view a, .cut-on .game-view .w-decor path { cursor: pointer !important; }
.cut-on input { cursor: auto !important; }
.cut-on input { cursor: text !important; }
.cutter { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .15s; will-change: transform; }
.cutter.is-shown { opacity: 1; }
.cutter svg { display: block; overflow: visible; }
.cutter-hand { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .12s; }
.cutter.is-hand .cutter-hand { opacity: 1; }
.cutter.is-hand .cutter-shears { opacity: 0; }
.cutter-shears { transition: opacity .12s; }
.blade { transform-box: view-box; transform-origin: 38px 38px; transition: transform .14s var(--ease-out); }
.blade--a { transform: rotate(-11deg); }
.blade--b { transform: rotate(11deg); }
.cutter.is-snipping .blade--a { animation: snip-a .18s ease-in-out infinite alternate; }
.cutter.is-snipping .blade--b { animation: snip-b .18s ease-in-out infinite alternate; }
@keyframes snip-a { to { transform: rotate(0); } }
@keyframes snip-b { to { transform: rotate(0); } }
.bouquet-badge { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(23, 19, 31, .94); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); pointer-events: none; }
.bouquet-badge[hidden] { display: none; }
.bouquet-art svg { display: block; width: 56px; height: 56px; overflow: visible; }
.bouquet-badge b { font: 700 1.1rem var(--display); color: var(--yellow); }

@media (max-width: 720px) {
  .climb { padding-inline: 8px; }
  .tree { margin-top: 80px; }
  .letter { padding: 30px 16px 24px; }
}
/* ---------- Bloom Season: the game in the footer ---------- */
.bloom-game {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 40px 0 36px;
  background: #07060b;
  text-align: center;
}
.night { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stars { position: absolute; inset: 0; transition: opacity 1.2s; }
.stars i { position: absolute; width: var(--z); height: var(--z); border-radius: 50%; background: #fff; animation: twinkle 3.2s ease-in-out var(--d) infinite alternate; }
@keyframes twinkle { from { opacity: .2; } to { opacity: 1; } }
.moon { position: absolute; top: 28px; right: 7%; width: clamp(48px, 7vw, 92px); transition: opacity 1.2s; }
.clouds i, .fog i { position: absolute; display: block; border-radius: 999px; opacity: 0; transition: opacity 1.4s; }
.clouds i { height: 46px; background: #1d1828; filter: blur(14px); animation: drift 70s linear infinite alternate; }
.clouds i:nth-child(1) { top: 3%; left: -5%; width: 34%; }
.clouds i:nth-child(2) { top: 6%; left: 40%; width: 26%; height: 36px; animation-duration: 90s; }
.clouds i:nth-child(3) { top: 2%; left: 70%; width: 30%; animation-duration: 60s; }
.clouds i:nth-child(4) { top: 9%; left: 15%; width: 22%; height: 30px; animation-duration: 80s; }
.fog i { left: -10%; width: 120%; height: 90px; background: #24202d; filter: blur(26px); animation: drift 40s ease-in-out infinite alternate; }
.fog i:nth-child(1) { top: 46%; }
.fog i:nth-child(2) { top: 72%; animation-duration: 55s; }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(6%); } }
.night[data-weather="cloudy"] .clouds i, .night[data-weather="rain"] .clouds i,
.night[data-weather="storm"] .clouds i, .night[data-weather="snow"] .clouds i { opacity: .95; }
.night[data-weather="cloudy"] .stars, .night[data-weather="snow"] .stars, .night[data-weather="fog"] .stars { opacity: .3; }
.night[data-weather="rain"] .stars, .night[data-weather="storm"] .stars { opacity: .1; }
.night[data-weather="rain"] .moon, .night[data-weather="storm"] .moon, .night[data-weather="snow"] .moon { opacity: .25; }
.night[data-weather="fog"] .fog i { opacity: .5; }
/* the weather's rain, snow and fireflies: laid over everything, never part of the layout */
.weather { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }

/* the window into the garden */
.game-view {
  position: relative;
  width: min(100% - 2 * var(--m), 1280px); height: clamp(540px, 80svh, 780px);
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden; overflow: clip;
  box-shadow: inset 0 0 0 1px #221c2d;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.game-view [hidden] { display: none !important; }
.game-view:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.world { position: absolute; left: 0; top: 0; width: 2000px; height: 1250px; transform-origin: 0 0; will-change: transform; }
.w-ground, .w-ground svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the ground and every swaying thing get their own layer, so one flower's
   sway never repaints the whole patterned ground */
.w-ground, .w-obj { will-change: transform; }
.w-snow, .w-snowline { opacity: 0; transition: opacity 1.4s; }
.world[data-weather="snow"] .w-snow, .world[data-weather="snow"] .w-snowline { opacity: 1; }
.w-obj { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.w-obj[hidden] { display: none; }
.w-obj > svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
button.w-obj { cursor: pointer; border-radius: 24px; }
button.w-obj:focus-visible { outline: calc(3px / var(--k, 1)) solid var(--yellow); outline-offset: 4px; }
.w-decor { pointer-events: none; }
.w-decor path, .w-decor circle, .w-decor ellipse { pointer-events: visiblePainted; }
.w-sway { transform-origin: 0 0; animation: wind-bloom 4.6s ease-in-out var(--wd, 0s) infinite alternate; }
.w-boss .w-sway { animation-duration: 6.5s; }
.w-floaty > svg { animation: floaty 5s ease-in-out var(--fd, 0s) infinite alternate; }
@keyframes floaty { from { transform: translate(-20px, 8px) rotate(-6deg); } to { transform: translate(24px, -14px) rotate(6deg); } }
.w-mush, .w-floaty { pointer-events: none; }
.w-label {
  position: absolute; left: 50%; top: 100%; translate: -50% 4px;
  padding: .35em .9em; border-radius: 999px;
  background: rgba(23, 19, 31, .9); color: var(--ink);
  font: 600 calc(13px / var(--k, 1))/1.1 var(--display); white-space: nowrap;
  pointer-events: none;
}
.w-hiring { top: auto; bottom: 100%; translate: -50% -4px; background: var(--yellow); color: var(--ink-dark); animation: hiring 1.1s ease-in-out infinite alternate; }
@keyframes hiring { from { scale: 1; } to { scale: 1.08; } }
.world.is-hired .w-hiring { display: none; }
/* once she grows out of the game: a tall stem straight up out of the top, her head gone up the page */
.boss-tall { opacity: 0; transition: opacity .4s; }
.boss-top { transition: opacity .35s, transform .6s var(--ease-out); }
.world.is-grown .boss-tall { opacity: 1; }
.world.is-grown .boss-top { opacity: 0; transform: translateY(-260px); }
.world.is-grown .w-boss .w-sway { animation: none; }
/* while you're up her stalk, you (and the friends you carry) are out of the garden */
.w-me, .w-wink, .w-pal { transition: opacity .3s; }
.world.is-climbing .w-me, .world.is-climbing .w-wink, .world.is-climbing .w-pal, .world.is-climbing .w-bubble { opacity: 0; }

/* the plots */
.plot svg { overflow: visible; }
.plot-plus { opacity: .4; transition: opacity .2s; }
.plot:hover .plot-plus, .plot:focus-visible .plot-plus { opacity: 1; }
.plot .plot-char { transform-origin: 0 90px; animation: sway 3.6s ease-in-out infinite alternate; }
.plot-badge { position: absolute; left: 50%; display: none; translate: -50% 0; animation: badge-bob 1.1s ease-in-out infinite alternate; pointer-events: none; }
.plot[data-state="thirsty"] .plot-badge { display: block; top: 44%; width: 22px; height: 22px; background: #5ab8ff; border-radius: 50% 0 50% 50%; rotate: -45deg; box-shadow: 0 0 0 4px rgba(90, 184, 255, .25); }
.plot[data-state="growing"] .plot-badge { display: block; top: 42%; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 14px 4px 0 var(--yellow), -14px 4px 0 var(--pink); animation-duration: .7s; }
.plot[data-state="ready"] .plot-badge { display: block; top: -8%; width: 26px; height: 26px; background: var(--yellow); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
@keyframes badge-bob { from { translate: -50% 2px; } to { translate: -50% -7px; } }
.plot.is-splash::before, .plot.is-splash::after {
  content: ""; position: absolute; left: 40%; top: 58%; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #8fd6ff; animation: splash .6s ease-out forwards; pointer-events: none;
}
.plot.is-splash::after { left: 56%; animation-delay: .08s; }
@keyframes splash { from { translate: 0 -40px; opacity: 1; } to { translate: 0 18px; opacity: 0; } }

/* you, Wink, the friends who follow you */
.w-me, .w-wink, .w-pal { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.w-me { width: 120px; height: 138px; }
.w-me-in { width: 100%; height: 100%; scale: var(--face, 1) 1; transition: scale .18s var(--ease-out); }
.w-me svg, .w-wink svg, .w-pal svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the visitor's face: happy eyes only on a giggle, heavy lids when worn out */
.av-happy, .av-lids { opacity: 0; }
.av-lids { transition: opacity .3s; }
svg.is-giggle .av-open { opacity: 0; }
svg.is-giggle .av-happy { opacity: 1; }
.w-me.is-tired .av-lids { opacity: 1; }
.w-me.is-tired svg { animation: sway 2.6s ease-in-out infinite alternate; }
.w-me.is-walking svg { animation: walk-bob .32s ease-in-out infinite alternate; }
.w-me.is-walking .av-leg--l { animation: leg .32s ease-in-out infinite alternate; }
.w-me.is-walking .av-leg--r { animation: leg .32s ease-in-out infinite alternate-reverse; }
@keyframes walk-bob { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes leg { from { translate: 0 0; } to { translate: 0 -7px; } }
/* starving: she drops to the ground and crawls, slowly */
.w-me.is-crawling svg { transform-origin: 50% 94%; rotate: 72deg; translate: 0 6px; animation: none; }
.w-me.is-crawling.is-walking svg { animation: crawl .9s ease-in-out infinite alternate; }
@keyframes crawl { from { rotate: 68deg; translate: 0 8px; } to { rotate: 76deg; translate: 5px 4px; } }
.w-me.is-crawling.is-walking .av-leg--l, .w-me.is-crawling.is-walking .av-leg--r { animation-duration: .9s; }
.w-me.is-crawling .av-shadow { opacity: 0; }
/* working while starving: a slow, shaky struggle */
.w-me.is-struggling svg { animation: struggle .14s linear infinite alternate; }
@keyframes struggle { from { transform: translateX(-3px) rotate(-2deg); } to { transform: translateX(3px) rotate(2deg); } }
.w-me.is-landing svg { animation: land .9s var(--ease-out); }
@keyframes land { 0% { translate: 0 -420px; } 60% { translate: 0 0; scale: 1.12 .86; } 80% { scale: .95 1.05; } 100% { translate: 0 0; scale: 1; } }
.w-wink { width: 56px; height: 56px; }
.w-wink-in { width: 100%; height: 100%; animation: bob 2.2s ease-in-out infinite alternate; }
.w-pal { width: 60px; height: 60px; }
.w-pal-in { width: 100%; height: 100%; animation: hop .45s ease-in-out infinite alternate; }
@keyframes hop { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes bob { from { transform: translateY(3px); } to { transform: translateY(-6px); } }
/* others who fell in: they walk and work like you */
.w-npc { position: absolute; left: 0; top: 0; width: 120px; height: 138px; margin: 0; padding: 0; border: 0; border-radius: 30px; background: none; cursor: pointer; will-change: transform; }
.w-npc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w-npc.is-walking svg { animation: walk-bob .4s ease-in-out infinite alternate; }
.w-npc.is-walking .av-leg--l { animation: leg .4s ease-in-out infinite alternate; }
.w-npc.is-walking .av-leg--r { animation: leg .4s ease-in-out infinite alternate-reverse; }
.w-npc.is-working svg { animation: bob 1.1s ease-in-out infinite alternate; }
.w-npc:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.w-npc.is-landing svg { animation: land .9s var(--ease-out); }
/* the flower folk stroll slowly, noses up */
.w-npc--rich.is-walking svg { animation: walk-bob .6s ease-in-out infinite alternate; }
/* what she carries: the reference letter and the key, held at her sides */
.w-carry { position: absolute; inset: 0; scale: var(--face, 1) 1; pointer-events: none; }
.w-carry-letter, .w-carry-key { position: absolute; display: none; filter: drop-shadow(0 0 4px rgba(255, 210, 63, .55)); }
.w-carry svg { display: block; width: 100%; height: auto; overflow: visible; }
.w-carry-letter { left: -2%; top: 50%; width: 30%; rotate: -12deg; }
.w-carry-key { left: 70%; top: 48%; width: 36%; rotate: -24deg; animation: bob 1.4s ease-in-out infinite alternate; }
.w-me.has-letter .w-carry-letter, .w-me.has-key .w-carry-key { display: block; }
.w-me.is-crawling .w-carry { translate: 0 34px; }
/* the tiny creatures */
.w-critter { position: absolute; left: 0; top: 0; width: 40px; height: 40px; cursor: pointer; will-change: transform; }
.w-critter-in { width: 100%; height: 100%; scale: var(--face, 1) 1; }
.w-critter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w-critter.is-walking .w-critter-in { animation: hop .28s ease-in-out infinite alternate; }

.w-bubble {
  position: absolute; left: 0; top: 0; z-index: 5000;
  width: max-content; max-width: calc(250px / var(--k, 1));
  margin: 0; padding: .6em .95em; border-radius: 1em;
  background: #fff7ef; color: var(--ink-dark);
  font: 700 calc(15px / var(--k, 1))/1.3 var(--text); text-align: center;
  translate: -50% -100%; opacity: 0; scale: .9; transform-origin: 50% 100%;
  transition: opacity .2s var(--ease-out), scale .2s var(--ease-out);
  pointer-events: none;
}
.w-bubble::after { content: ""; position: absolute; left: 50%; bottom: -.45em; width: .9em; height: .9em; translate: -50% 0; rotate: 45deg; background: inherit; }
.w-bubble.is-on { opacity: 1; scale: 1; }
/* her own words, over her head, pink so they read as hers */
.w-say { background: #ffe3f0; z-index: 5001; }
.world.is-climbing .w-say { opacity: 0; }
/* really sick: greenish, and she crawls */
.w-me.is-sick svg { filter: sepia(.45) hue-rotate(55deg) saturate(1.3); }
.w-mark { position: absolute; left: 0; top: 0; z-index: 4800; width: calc(44px / var(--k, 1)); height: calc(52px / var(--k, 1)); margin: 0 0 0 calc(-22px / var(--k, 1)); translate: 0 -100%; pointer-events: none; }
.w-mark[hidden] { display: none; }
.w-mark svg { width: 100%; height: 100%; overflow: visible; animation: mark-bob .7s ease-in-out infinite alternate; }
@keyframes mark-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.w-float {
  position: absolute; z-index: 4900; translate: -50% -100%;
  font: 700 calc(16px / var(--k, 1))/1 var(--display); white-space: nowrap;
  text-shadow: 0 2px 0 #07060b, 0 0 8px #07060b;
  animation: float-up 1.3s var(--ease-out) forwards; pointer-events: none;
}
.w-float.is-energy { color: var(--ink-2); }
.w-float.is-energy-up { color: var(--mint); }
.w-float.is-petal { color: var(--pink); font-size: calc(22px / var(--k, 1)); }
.w-float.is-friend { color: var(--yellow); }
@keyframes float-up { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
.w-tap { position: absolute; width: 34px; height: 14px; border: 3px solid rgba(255, 255, 255, .6); border-radius: 50%; translate: -50% -50%; animation: tap-ring .55s ease-out forwards; pointer-events: none; z-index: 1; }
@keyframes tap-ring { from { scale: .4; opacity: 1; } to { scale: 1.6; opacity: 0; } }

/* the HUD */
.hud { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.hud[hidden] { display: none; }
.hud-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hud-row:last-child { justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px;
  border: 0; border-radius: 999px; background: rgba(23, 19, 31, .94); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 .875rem/1 var(--text); pointer-events: auto;
}
.pill svg { width: 20px; height: 20px; flex: none; }
button.pill { cursor: pointer; transition: transform .16s var(--ease-out), background-color .2s; }
button.pill:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { button.pill:hover { background: #2e2640; } }
.pill--rank { color: var(--yellow); }
/* in debt: the petal count turns red */
.pill.is-debt { color: #ff8a8a; background: #3a1620; }
/* special food still working: an icon and the minutes left */
.hud-fx { display: contents; }
.hud-key, .hud-letter { padding: 0 10px; }
.hud-moon[aria-pressed="true"] { background: var(--lav); color: var(--ink-dark); }
.meter { display: block; width: 66px; height: 9px; border-radius: 5px; background: #2a2433; overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--e, 100) * 1%); border-radius: inherit; background: var(--mint); transition: width .4s var(--ease-out); }
.meter[data-need="rest"] i { background: var(--yellow); }
.is-low .meter i { background: var(--accent); }
.is-low { animation: low 1s ease-in-out infinite alternate; }
@keyframes low { to { box-shadow: 0 0 0 3px rgba(255, 79, 163, .35); } }
.nap { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: #07060b; color: var(--lav); font: 600 3rem var(--display); opacity: 0; pointer-events: none; transition: opacity .5s; }
.nap.is-on { opacity: .94; }

/* talking: a card at the bottom with the speaker's face on top */
.talk {
  position: absolute; left: 50%; bottom: 14px; z-index: 20;
  width: min(640px, 100% - 24px); translate: -50% 0;
  display: grid; justify-items: center; gap: 4px;
  padding: 48px 22px 18px; border-radius: 26px;
  background: #17131f; box-shadow: 0 14px 44px rgba(0, 0, 0, .55), inset 0 0 0 2px #2c2440;
  cursor: pointer; animation: talk-in .28s var(--ease-out);
}
.talk[hidden] { display: none; }
@keyframes talk-in { from { opacity: 0; translate: -50% 16px; } }
.talk-face { position: absolute; top: -42px; left: 50%; width: 82px; height: 82px; translate: -50% 0; padding: 8px; border-radius: 50%; background: #221c2d; box-shadow: inset 0 0 0 2px #2c2440; }
.talk-face svg { width: 100%; height: 100%; overflow: visible; }
.talk-name { font: 600 1rem/1.2 var(--display); color: var(--yellow); }
.talk-text { font-family: var(--text), "Noto Sans Tagalog", sans-serif; max-width: 44ch; min-height: 2.9em; font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.talk-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.talk-choices:empty { display: none; }
.talk-choice {
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--ground-3); color: var(--ink); font: 700 .9375rem/1.2 var(--text); cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .2s;
}
.talk-choice:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .talk-choice:hover { background: var(--accent); color: var(--ink-dark); } }
.talk-choice:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.talk-next { width: 40px; height: 32px; border: 0; background: none; color: var(--yellow); cursor: pointer; animation: badge-next .7s ease-in-out infinite alternate; }
.talk-next[hidden] { display: none; }
.talk-next svg { width: 20px; height: 20px; }
@keyframes badge-next { from { translate: 0 -2px; } to { translate: 0 4px; } }

/* screens laid over the garden */
.screen { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; overflow: auto; background: rgba(7, 6, 11, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.screen[hidden] { display: none; }
.start-card, .home-card { display: grid; justify-items: center; gap: 14px; max-width: 46ch; }
.start-art { width: 150px; height: 172px; animation: bob 2.4s ease-in-out infinite alternate; }
.start-art svg, .home-me svg, .maker-me svg { width: 100%; height: 100%; overflow: visible; }
.start-note { min-height: 1.4em; color: var(--ink-2); }
.start-note:empty { display: none; }

.maker {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: center;
  width: min(900px, 100%); margin: auto; padding: 24px 28px;
  border-radius: 28px; background: #17131f; box-shadow: inset 0 0 0 2px #2c2440;
}
/* the big one stays in view beside the choices, on a soft glow so dark hair shows */
.maker-side { position: sticky; top: 0; align-self: start; display: grid; justify-items: center; gap: 12px; }
.maker-title { font-size: var(--t-m); }
.maker-me { width: 220px; height: 250px; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 163, 255, .3), rgba(184, 163, 255, .08) 72%, transparent); }
.maker-name { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: var(--t-s); color: var(--ink-2); }
.maker-name input {
  width: 200px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--ground-3); color: var(--ink); font: 600 1rem var(--text); text-align: center;
}
.maker-name input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.maker-opts { display: grid; gap: 14px; }
.maker-row { display: grid; justify-items: center; gap: 6px; }
.maker-label { font-weight: 700; font-size: .8125rem; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.sw {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--c, #221c2d); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
  cursor: pointer; transition: transform .16s var(--ease-out), box-shadow .16s;
}
.sw svg { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.sw--art { width: 62px; height: 62px; border-radius: 18px; background: radial-gradient(circle at 50% 42%, #4d4168, #262033 75%); }
.sw--art svg { overflow: hidden; border-radius: inherit; }
.sw:active { transform: scale(.94); }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 3px #17131f, 0 0 0 6px var(--yellow); }
.sw:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.maker-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

.screen--fall { overflow: hidden; background: radial-gradient(circle at 50% 50%, #1d1729, #07060b 72%); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fall { position: absolute; inset: 0; }
.fall-swirl { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; animation: spin 6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.fall-bit { position: absolute; top: 0; width: 70px; height: 70px; animation: fall-by 1.5s linear var(--d) infinite; }
.fall-bit svg { width: 100%; height: 100%; overflow: visible; }
@keyframes fall-by { from { transform: translateY(110vh) rotate(0); } to { transform: translateY(-120px) rotate(calc(var(--r) * 200deg)); } }
.fall-me { position: absolute; left: 50%; top: 50%; width: 150px; height: 172px; translate: -50% -50%; animation: tumble 1.2s ease-in-out infinite alternate; }
.fall-me svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tumble { from { rotate: -14deg; } to { rotate: 16deg; } }
.fall-words { position: absolute; left: 0; right: 0; bottom: 12%; font: 600 var(--t-m) var(--display); color: var(--lav); }

.screen--home { background: radial-gradient(circle at 50% 30%, #2c2440, #07060b 75%); }
.home-me { width: 140px; height: 160px; }
.home-title { font-size: var(--t-l); line-height: 1; }
.home-stats { color: var(--yellow); font-weight: 700; }
.home-twist { font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

.bloom-game .end-small { margin-top: 18px; }

.game-dialog {
  max-width: min(92vw, 640px); padding: 28px; border: 0; border-radius: 26px;
  background: var(--ground-2); color: var(--ink); text-align: center;
}
.game-dialog::backdrop { background: rgba(7, 6, 11, .78); }
.game-dialog h3 { font-size: var(--t-m); margin-bottom: 8px; }
/* the shops past the right gate: the keeper, then pictures to pick from */
.shop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; text-align: left; }
.shop-face { flex: none; width: 64px; height: 64px; }
.shop-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shop-title { margin-bottom: 2px; }
.shop-say { font-size: .9rem; color: var(--ink-2); }
.shop-tabs[hidden] { display: none; }
.shop .room-items svg { width: 76px; height: 76px; overflow: hidden; border-radius: 12px; }
/* flower animals: other people's, and hers */
.w-pet { width: 90px; height: 80px; }
.w-pet.is-walking .pet-leg { animation: leg .3s ease-in-out infinite alternate; }
.w-pet--mine::after { content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; border-radius: 3px; background: var(--pink); }
.room-pet { cursor: pointer; }
.sign-text { font: 700 22px var(--display); fill: #fff7ef; }
.sign-text--dark { fill: var(--ink-dark); font-size: 20px; }
.petcard .pet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; text-align: left; }
.pet-pic { flex: none; width: 96px; height: 88px; }
.pet-pic svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pet-kind { font-size: .9rem; color: var(--ink-2); }
.pet-meters { display: grid; gap: 6px; margin-bottom: 12px; }
.pet-meter { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; text-align: left; }
.pet-meter i { display: block; height: 12px; border-radius: 999px; background: var(--ground-3); overflow: hidden; }
.pet-meter b { display: block; height: 100%; border-radius: inherit; }
.pet-acts { flex-wrap: wrap; margin-bottom: 10px; }
.pet-acts button { flex: 1 1 28%; white-space: nowrap; }
.pet-tabs[hidden] { display: none; }
.pet-mode { margin-top: 4px; }
/* the one question at level 2: a note if your garden misses you */
.mail { width: min(92vw, 400px); }
.mail-small { margin-bottom: 12px; font-size: .9rem; color: var(--ink-2); }
.mail-input { width: 100%; min-height: 48px; padding: 0 16px; border: 2px solid var(--ground-3); border-radius: 999px; background: #120e19; color: var(--ink); font: 600 1rem var(--text); text-align: center; }
.mail-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mail-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
/* inside your home: the bed, the piggy bank, decorating */
.room { width: min(94vw, 460px); max-height: 92vh; overflow-y: auto; padding: 20px 16px; }
.room-scene svg { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 18px; } /* smaller homes show a smaller room */
.room-scene svg { touch-action: none; user-select: none; -webkit-user-select: none; }
.room-move { cursor: grab; }
.room-move.is-dragging { cursor: grabbing; }
.room-del { cursor: pointer; }
.room-me.is-walking .av-leg--l { animation: leg .4s ease-in-out infinite alternate; }
.room-me.is-walking .av-leg--r { animation: leg .4s ease-in-out infinite alternate-reverse; }
.room-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 10px; }
.room-acts [aria-pressed="true"] { background: var(--yellow); color: var(--ink-dark); }
.room-sum { margin-bottom: 10px; font-size: .95rem; color: var(--ink-2); }
.room-sum b { color: var(--ink); }
.room-btns, .room-slots { display: flex; gap: 6px; }
.room-btns button, .room-slots button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; font: 700 .85rem var(--text); cursor: pointer; }
.room-btns button { background: var(--pink); color: var(--ink-dark); }
.room-slots { flex-wrap: wrap; padding: 4px; margin-bottom: 10px; border-radius: 22px; background: var(--ground-3); }
.room-slots button { min-width: 64px; }
.room-slots button { background: none; color: var(--ink-2); }
.room-slots button[aria-selected="true"] { background: var(--yellow); color: var(--ink-dark); }
.room-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.room-items button { width: 100%; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border: 2px solid transparent; border-radius: 16px; background: var(--ground-3); color: var(--ink); font: 600 .78rem/1.2 var(--text); cursor: pointer; }
.room-items button[aria-pressed="true"] { border-color: var(--yellow); }
.room-items svg { width: 56px; height: 56px; overflow: visible; }
.room-items small { font-size: .72rem; color: var(--ink-2); }
.room-note { min-height: 1.4em; margin: 8px 0 10px; font-weight: 600; font-size: .9rem; color: var(--yellow); }
/* the phone: stocks and a map of the whole world */
.phone { width: min(94vw, 440px); padding: 18px 16px 20px; border: 10px solid #2a2140; border-radius: 40px; background: #120e19; }
.phone-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--ground-3); margin-bottom: 12px; }
.phone-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 .95rem var(--display); cursor: pointer; }
.phone-tabs button[aria-selected="true"] { background: var(--yellow); color: var(--ink-dark); }
.phone-body { min-height: 300px; }
.phone-note { min-height: 1.4em; margin: 8px 0 10px; font-weight: 600; font-size: .9rem; color: var(--yellow); }
.ph-sum { font-size: .9rem; color: var(--ink-2); margin-bottom: 10px; }
.ph-sum b { color: var(--ink); }
.ph-stocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.ph-stocks li { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name price own" "act act act"; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--ground-3); }
.ph-name { grid-area: name; display: grid; } .ph-price { grid-area: price; } .ph-own { grid-area: own; } .ph-act { grid-area: act; }
.ph-stocks small { display: block; font-size: .72rem; color: var(--ink-2); font-weight: 500; }
.ph-price { font: 700 1.15rem var(--display); text-align: right; }
.ph-price.is-up, .ph-price.is-up small { color: #3fd17a; }
.ph-price.is-down, .ph-price.is-down small { color: #ff6b6b; }
.ph-own { font-weight: 700; font-size: .85rem; text-align: right; min-width: 64px; }
.ph-act { display: flex; gap: 8px; }
.ph-act button { flex: 1; min-height: 36px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--ink-dark); font: 700 .85rem var(--text); cursor: pointer; }
.ph-act button + button { background: var(--pink); }
.ph-act button:disabled { opacity: .35; cursor: default; }
.ph-map-wrap { overflow-x: auto; border-radius: 18px; background: #1b1526; }
.ph-map { display: block; height: 280px; width: auto; }
.ph-map text { font: 700 46px var(--display); fill: var(--ink); }
.ph-map .m-region { font-size: 62px; fill: var(--ink-2); letter-spacing: .06em; }
.ph-map .m-lock { font-size: 90px; fill: #ff8a8a; }
.ph-map .m-you { fill: var(--pink); font-size: 56px; }
.m-place { cursor: pointer; }
.m-place:hover circle, .m-place:focus-visible circle { fill: var(--pink); }
.m-place:focus-visible { outline: none; }
.ph-hint { margin-top: 8px; font-size: .85rem; color: var(--ink-2); }
.ph-strip { display: block; width: 100%; height: 34px; border-radius: 10px; cursor: pointer; }
.ph-zones { display: flex; gap: 6px; margin: 8px 0; }
.ph-zones button { flex: 1; min-height: 34px; border: 0; border-radius: 999px; background: var(--ground-3); color: var(--ink); font: 700 .85rem var(--text); cursor: pointer; }
.ph-zones button.is-locked { color: var(--ink-2); }
/* the stock board in town */
.w-board text { font-family: var(--display); fill: var(--ink); }
.w-board .b-title { font-size: 26px; font-weight: 700; fill: var(--yellow); letter-spacing: .1em; }
.w-board .b-name { font-size: 19px; font-weight: 600; }
.w-board .b-price { font-size: 20px; font-weight: 700; }
.w-board .b-news { font-size: 14px; font-weight: 700; fill: var(--ink-dark); }
.ph-spark { display: block; width: 100%; height: 22px; margin-top: 4px; }
.ph-news { min-height: 1.3em; margin-top: 10px; padding: 8px 12px; border-radius: 14px; background: var(--yellow); color: var(--ink-dark); font-weight: 700; font-size: .85rem; }
.ph-news:empty { display: none; }
.guide-grid { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-height: 58vh; overflow: auto; }
.guide-card { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: 16px; background: var(--ground-3); }
.guide-art { width: 72px; height: 72px; }
.guide-art svg { width: 100%; height: 100%; overflow: visible; }
.guide-card.is-locked .guide-art { filter: brightness(0); opacity: .55; }
.guide-name { font-family: var(--display); font-weight: 600; }
.guide-line { color: var(--ink-2); font-size: .8rem; line-height: 1.3; }

@media (max-width: 720px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloom-game { padding-top: 24px; }
  .game-view { width: 100%; height: max(560px, 82svh); border-radius: 0; }
  .hud { left: 8px; right: 8px; top: 8px; flex-direction: column; gap: 6px; }
  .hud-row:last-child { justify-content: flex-start; }
  .pill { min-height: 34px; padding: 0 10px; font-size: .8125rem; }
  .meter { width: 38px; }
  .pill { gap: 5px; }
  .screen { padding: 12px; }
  .maker { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 12px; }
  /* one column: the big one sticks to the top while the choices scroll under it (-12px: past the screen's padding) */
  .maker-side { display: contents; }
  .maker-title, .maker-name { justify-self: center; }
  .maker-me {
    position: sticky; top: -12px; z-index: 2; justify-self: stretch; width: auto; height: 150px; margin: 0 -12px; padding: 6px 0;
    border-radius: 0 0 24px 24px; background: radial-gradient(closest-side, rgba(184, 163, 255, .3), rgba(184, 163, 255, .08) 72%, transparent) center / 170px 170px no-repeat, #17131f;
  }
  .maker-title { font-size: 1.5rem; }
  .swatches { gap: 5px; }
  .sw { width: 34px; height: 34px; }
  .sw--art { width: 48px; height: 48px; border-radius: 14px; }
  .talk { padding: 44px 16px 14px; }
  .talk-text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w-sway, .w-floaty > svg, .w-pal-in, .w-wink-in, .w-mark svg, .start-art, .fall-swirl, .fall-bit, .fall-me, .is-low, .w-hiring,
  .fruit, .leaf-sway, .vase svg, .sparkles i, .climber-key, .bb-head.is-giving, .letter.is-gone { animation: none; }
}

/* the fungus people's village: only one world shows at a time */
.world .fz { display: none; }
.world.is-fungal .fz { display: block; }
.world.is-fungal .fz[hidden] { display: none; }
.world.is-fungal > :not(.fz):not(.w-me):not(.w-bubble):not(.w-float):not(.w-mark):not(.w-tap) { display: none !important; }
.fz-glow { animation: fz-glow 3s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes fz-glow { from { opacity: .62; } to { opacity: 1; } }
.pill.is-gold svg path { fill: var(--yellow); }
/* the cloud of spores that carries her off */
.spores { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.spores.is-on { opacity: 1; }
.spores i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #e8dcc6; opacity: .75; box-shadow: 0 0 12px #e8dcc6; animation: spore-drift 6s linear var(--d) infinite; }
@keyframes spore-drift { from { translate: 0 0; } to { translate: 60px -160px; } }
@media (prefers-reduced-motion: reduce) { .fz-glow, .spores i { animation: none; } }
/* the invasion: the garden dims, mold spreads, raiders burst from the ground */
.world.is-invaded .w-ground { filter: saturate(.55) brightness(.8) hue-rotate(-25deg); transition: filter 2s ease; }
.w-mold { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 224, 208, .55), rgba(157, 255, 176, .25) 60%, transparent); animation: mold-grow 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.w-mold svg { position: absolute; inset: -30% 0 0; width: 100%; height: 130%; overflow: visible; }
@keyframes mold-grow { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
.w-raider { pointer-events: none; }
.w-me.is-caught svg { animation: caught-shake .14s ease-in-out infinite alternate; }
@keyframes caught-shake { from { translate: -4px 0; } to { translate: 4px 0; } }
/* the threads that pull her down through the roots */
.mycelium { position: absolute; inset: 0; z-index: 42; pointer-events: none; visibility: hidden; background: rgba(29, 22, 18, 0); transition: background 1.6s ease .3s, visibility 0s 2s; }
.mycelium svg { width: 100%; height: 100%; }
.mycelium path { fill: none; stroke: #f3e6cf; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .85; transition: stroke-dashoffset 1.7s ease; }
.mycelium.is-on { visibility: visible; background: rgba(29, 22, 18, .96); transition: background 1.6s ease .3s, visibility 0s; }
.mycelium.is-on path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .w-mold, .w-me.is-caught svg { animation: none; } .mycelium, .mycelium path { transition-duration: .01s; } }

/* during the invasion: raiders and everyone else run, and the rooted flowers tremble */
.w-raider.is-walking svg, .world.is-invaded .w-npc.is-walking svg { animation: walk-bob .18s ease-in-out infinite alternate; }
.world.is-invaded .w-npc.is-walking .av-leg--l { animation: leg .18s ease-in-out infinite alternate; }
.world.is-invaded .w-npc.is-walking .av-leg--r { animation: leg .18s ease-in-out infinite alternate-reverse; }
.is-scared svg { animation: caught-shake .11s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .is-scared svg, .w-raider.is-walking svg { animation: none; } }

/* ---------- locked things wear a lock, so nobody thinks a button is broken ---------- */
:root { --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h.5A2.5 2.5 0 0 1 20 12.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 19.5v-7A2.5 2.5 0 0 1 6.5 10zm2.6 0h4.8V7a2.4 2.4 0 0 0-4.8 0z'/%3E%3C/svg%3E"); }
.page-about button:disabled::before, .w-label.is-locked::before, .talk-choice.is-locked::before, .ph-zones .is-locked::before, .room-items .is-locked b::before {
  content: ""; display: inline-block; flex: none; width: .9em; height: .9em; margin-right: .38em; vertical-align: -.1em;
  background: currentColor; -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat;
}
.page-about button:disabled { cursor: not-allowed; }
.talk-choice.is-locked, .ph-zones .is-locked { opacity: .62; }
.plot.is-locked { opacity: .55; filter: saturate(.4); }
.plot.is-locked::after { content: ""; position: absolute; left: 50%; top: 18%; width: 22px; height: 22px; translate: -50% 0; background: #fff7ef; -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; opacity: .85; pointer-events: none; }
.w-obj.is-shut > svg { filter: grayscale(.7) brightness(.7); }

/* ---------- the fungus kingdom ---------- */
/* what falls from the flower kingdom above, landing where it lands */
.f-debris { animation: fz-fall .9s cubic-bezier(.3, .1, .6, 1) both; transition: opacity .6s; }
.f-debris svg { width: 100%; height: 100%; overflow: visible; }
.f-debris.is-gone { opacity: 0; }
.f-debris.is-curio svg { animation: fz-glow 1.1s ease-in-out infinite alternate; }
@keyframes fz-fall { from { translate: 0 -420px; rotate: -40deg; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
.f-slug svg, .f-truffle svg { width: 100%; height: 100%; overflow: visible; }
.f-slug svg { scale: var(--face, 1) 1; }
.f-truffle svg { animation: fz-glow 1s ease-in-out infinite alternate; }
/* cordyceps spores drifting in the grove */
.f-puff { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(242, 162, 74, .38), rgba(242, 162, 74, .12) 60%, transparent); }
/* the dark of the caves, with a lantern's circle around her and holes where things glow */
.f-cave { position: absolute; z-index: 4000; pointer-events: none; }
.f-cave svg { display: block; width: 100%; height: 100%; }
.fz-edge { pointer-events: none; }
.fz-glyph { font: 600 30px "Noto Sans Tagalog", serif; fill: #7ef9ff; }
/* rain over the whole window, and the white flash of thunder before it */
.fz-rain { position: absolute; inset: 0; z-index: 39; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(180, 200, 255, .22) 22px 24px); background-size: 200px 200px; animation: fz-rain .4s linear infinite; }
.fz-rain.is-on { opacity: 1; }
@keyframes fz-rain { to { background-position: -40px 200px; } }
.game-view.is-thunder::after { content: ""; position: absolute; inset: 0; z-index: 41; background: #fff; pointer-events: none; animation: thunder .45s ease-out forwards; }
@keyframes thunder { from { opacity: .55; } to { opacity: 0; } }
/* what the kingdom does to her: spores steering her, a nuno's curse on her feet, riding the threads */
.w-me.is-cordy svg { filter: sepia(.6) hue-rotate(-20deg) saturate(1.6); }
.w-me.is-swollen .av-leg path { stroke-width: 22px; }
.w-me.is-threading { opacity: 0; scale: .3; transition: opacity .4s, scale .4s; }
.w-npc--tiny .w-me-in svg { scale: .55; transform-origin: 50% 100%; }
.w-npc--stiff.is-walking svg { animation: stiff .9s steps(2) infinite; }
@keyframes stiff { from { rotate: -4deg; } to { rotate: 4deg; } }
.w-npc.is-mine::after { content: ""; position: absolute; left: 50%; top: 18px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; border-radius: 3px; background: var(--pink); }
.f-knot.is-waking svg { animation: fz-glow .5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .f-debris, .f-debris.is-curio svg, .f-truffle svg, .fz-rain, .w-npc--stiff.is-walking svg, .f-knot.is-waking svg { animation: none; }
  .game-view.is-thunder::after { display: none; }
}

/* the sky lantern: lit by the mushrooms, it rises up off the page for the Creator's family */
.vase.is-lantern { aspect-ratio: 200 / 260; }
.vase.is-lit svg { filter: drop-shadow(0 0 18px rgba(255, 210, 122, .75)); }
.vase.is-rising svg { animation: lantern-rise 8s cubic-bezier(.45, 0, .7, 1) forwards; }
@keyframes lantern-rise {
  0% { translate: 0 0; rotate: 0deg; }
  25% { translate: -14px -18vh; rotate: -3deg; }
  50% { translate: 12px -46vh; rotate: 3deg; opacity: 1; }
  80% { translate: -8px -82vh; rotate: -2deg; opacity: .8; scale: .7; }
  100% { translate: 6px -120vh; rotate: 0deg; opacity: 0; scale: .5; }
}
.lantern-note { position: absolute; left: 50%; top: calc(100% + 14px); translate: -50% 0; width: min(34ch, 86vw); margin: 0;
  color: #ffe9c4; font: 600 clamp(.95rem, 1.6vw, 1.15rem)/1.4 var(--display); text-align: center; text-shadow: 0 0 14px rgba(255, 210, 122, .55); opacity: 0; transition: opacity 1.6s ease; }
.lantern-note.is-on { opacity: 1; }
.crown-top { position: relative; }
@media (prefers-reduced-motion: reduce) { .vase.is-rising svg { animation: none; opacity: 0; transition: opacity 1s; } }
/* the kingdom's fireflies drift and blink, and shine even in the dark of the caves */
.f-fly .w-critter-in { animation: fly-bob 1.7s ease-in-out var(--d, 0s) infinite alternate; }
.f-fly svg { animation: fz-glow 1.1s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes fly-bob { from { translate: 0 -6px; } to { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .f-fly .w-critter-in, .f-fly svg { animation: none; } }

/* through the stone doors: tall kapre, a waterfall, an open stone door, the air gem's wind */
.w-npc--big .w-me-in svg { scale: 1.75; transform-origin: 50% 100%; }
.kapre-smoke { animation: fz-glow 2.2s ease-in-out infinite alternate; }
.fz-portal { animation: fz-glow 1.1s ease-in-out infinite alternate; }
.fz-fall path { animation: fz-fall 0.8s linear infinite; }
@keyframes fz-fall { to { stroke-dashoffset: -44; } }
.fz-wind { position: absolute; inset: 0; z-index: 39; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(170deg, transparent 0 40px, rgba(223, 246, 255, .2) 40px 43px); background-size: 400px 400px; }
.fz-wind.is-on { animation: fz-wind 2.4s ease-out forwards; }
@keyframes fz-wind { 0% { opacity: 0; background-position: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -800px 120px; } }
.hud-wind { color: var(--ink); }
.hud-wind.is-resting { opacity: .55; }
/* Bathala answers the third lantern */
.bathala { position: absolute; left: 50%; top: -24px; z-index: 12; display: grid; justify-items: center; gap: 8px; width: min(340px, 92vw); translate: -50% 0;
  pointer-events: none; opacity: 0; scale: .8; transition: opacity 1.2s ease, scale 1.2s var(--ease-out); }
.bathala.is-on { opacity: 1; scale: 1; }
.bathala svg { width: clamp(150px, 20vw, 200px); height: auto; overflow: visible; animation: bathala 3s ease-in-out infinite alternate; }
@keyframes bathala { from { filter: drop-shadow(0 0 10px rgba(255, 210, 122, .5)); } to { filter: drop-shadow(0 0 26px rgba(255, 210, 122, .9)); } }
.bathala-gem { animation: fz-glow 1.2s ease-in-out infinite alternate; }
.bathala.is-welcome .bathala-gem { display: none; }
/* while Bathala shines, the sign and the chest step back so nothing sits on his face */
.crown-top .wood, .crown-top .vases { transition: opacity .8s ease; }
.crown-top.is-bathala .wood, .crown-top.is-bathala .vases:not(:has(.is-rising)) { opacity: .12; }
.bathala-say { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(23, 19, 31, .92); color: #ffe9c4; font: 600 clamp(.95rem, 1.6vw, 1.1rem)/1.4 var(--display); text-align: center; }
@media (prefers-reduced-motion: reduce) { .kapre-smoke, .fz-portal, .fz-fall path, .bathala svg, .bathala-gem { animation: none; } .fz-wind.is-on { animation-duration: .01s; } }
/* the brilyante: each gem's burst colors the sweep across the window */
.fz-wind[data-gem="tubig"] { background-image: repeating-linear-gradient(170deg, transparent 0 40px, rgba(90, 184, 255, .22) 40px 46px); }
.fz-wind[data-gem="lupa"] { background-image: repeating-linear-gradient(90deg, transparent 0 60px, rgba(63, 209, 122, .18) 60px 66px); }
.fz-wind[data-gem="apoy"] { background-image: radial-gradient(circle at 50% 80%, rgba(255, 107, 61, .35), transparent 60%); }
.gems-in { display: grid; gap: 14px; padding: 22px; min-width: min(420px, 86vw); }
.gems-in h3 { margin: 0; text-align: center; }
.gems-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gem-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--ground-3); }
.gem-card svg { width: 52px; height: 52px; }
.gem-card b { display: block; }
.gem-card small { display: block; color: var(--ink-2); line-height: 1.35; }
.gem-card.is-locked svg { filter: grayscale(1) brightness(.6); }
.gem-rest { font: 600 .8125rem var(--text); color: var(--ink-2); white-space: nowrap; }
.gem-lock::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .35em; vertical-align: -.1em; background: currentColor; -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; }
/* dizzy from cordyceps: she falls over for a moment */
.w-me.is-fallen .w-me-in { rotate: -78deg; translate: -10px 34px; transition: rotate .22s ease-in, translate .22s ease-in; }
.w-me .w-me-in { transition: scale .18s var(--ease-out), rotate .35s var(--ease-out), translate .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .w-me .w-me-in, .w-me.is-fallen .w-me-in { transition: none; } }
/* the waterfall up the page in the diwata village: water flowing upward to the gods' gate */
.falls-up { animation: falls-up 1.1s linear infinite; }
.falls-up.is-slow { animation-duration: 1.7s; }
@keyframes falls-up { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .falls-up { animation: none; } }
/* the diwata's sacred lands: glowing motes drifting up over everything */
.fz-sacred { position: absolute; inset: 0; z-index: 38; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.fz-sacred.is-on { opacity: 1; }
.fz-sacred i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: .8; animation: mote 9s linear var(--d) infinite; }
@keyframes mote { from { translate: 0 40px; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .8; } to { translate: 30px -260px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fz-sacred i { animation: none; } }
/* the training hall's wind chimes swing once they ring; locked guardians wait, dimmed */
.chime-swing { animation: chime 1.4s ease-in-out var(--d, 0s) infinite alternate; transform-origin: 0 -176px; transform-box: view-box; }
@keyframes chime { from { rotate: -6deg; } to { rotate: 6deg; } }
.w-npc.is-shut svg { filter: grayscale(.6) brightness(.7); }
@media (prefers-reduced-motion: reduce) { .chime-swing { animation: none; } }
/* the climb to heaven: clouds all the way up, birds crossing, fairies drifting, and the giant Gate of Bathala at the top */
.heaven-sky { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; pointer-events: none; }
.climb.is-heaven .heaven-sky { display: block; }
.hs-cloud { position: absolute; width: var(--w); height: calc(var(--w) * .38); border-radius: 999px; background: #b3dcff; box-shadow: 0 0 30px rgba(140, 200, 255, .35); animation: hs-drift 26s ease-in-out var(--d) infinite alternate; }
.hs-cloud::before, .hs-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.hs-cloud::before { width: 55%; height: 130%; left: 14%; top: -52%; }
.hs-cloud::after { width: 38%; height: 100%; left: 50%; top: -34%; }
@keyframes hs-drift { from { translate: -40px 0; } to { translate: 40px 0; } }
.hs-bird { position: absolute; left: -8%; width: 46px; height: 30px; animation: hs-fly var(--t) linear var(--d) infinite; }
.hs-bird.is-back { animation-direction: reverse; }
.hs-bird.is-back svg { scale: -1 1; }
.hs-bird svg, .hs-fairy svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes hs-fly { from { translate: 0 0; } 50% { translate: 58vw -50px; } to { translate: 118vw 0; } }
.bird-wings { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .32s ease-in-out infinite alternate; }
@keyframes flap { from { scale: 1 1; } to { scale: 1 -.7; } }
.hs-fairy { position: absolute; width: 34px; height: 34px; filter: drop-shadow(0 0 8px #fff4c2); animation: hs-float var(--t) ease-in-out var(--d) infinite; }
@keyframes hs-float { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 50% { translate: 34px -130px; } 85% { opacity: 1; } 100% { translate: -24px -260px; opacity: 0; } }
.fairy-wings { transform-box: fill-box; transform-origin: 50% 70%; animation: flutter .18s ease-in-out infinite alternate; }
@keyframes flutter { from { scale: 1 1; } to { scale: .55 1; } }
.bathala-gate { position: absolute; left: 50%; top: calc(var(--bar, 64px) - 30px); z-index: 0; width: min(920px, 104vw); translate: -50% 0; pointer-events: none; }
.bathala-gate[hidden] { display: none; }
/* the end: Bathala welcomes the peacemaker, and the journey is counted */
.finale { width: min(340px, calc(100vw - 32px)); padding: 22px 20px 20px; border: 0; border-radius: 22px; background: #17131f; color: #ffe9c4; text-align: center;
  box-shadow: 0 0 0 2px #ffd27a, 0 0 60px rgba(255, 210, 122, .45); }
.finale[open] { display: grid; justify-items: center; gap: 10px; animation: finale-in .6s var(--ease-out); }
.finale::backdrop { background: rgba(7, 6, 11, .6); }
.finale-me { padding: 6px 18px 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 233, 168, .5), rgba(255, 233, 168, .14) 70%, transparent); }
.finale-me svg { display: block; width: 150px; height: auto; overflow: visible; }
.finale-title { margin: 0; font: 700 1.5rem/1.2 var(--display); color: #ffd27a; }
.finale-stats { margin: 0; font: 600 .9375rem/1.4 var(--text); opacity: .85; }
@keyframes finale-in { from { opacity: 0; scale: .9; } }
@media (prefers-reduced-motion: reduce) { .finale[open] { animation: none; } }
.bathala-gate svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 30px rgba(255, 210, 122, .45)); }
.crown-top, .crown-row { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hs-cloud, .hs-bird, .hs-fairy, .bird-wings, .fairy-wings { animation: none; } }

/* over photos and dialogs the shears step aside for a little pink pointer, so you can always see where you are */
:root { --pretty-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 2L4 25L10 19.5L14.5 29L19 27L14.5 17.5L22.5 17.5Z' fill='%23ff6fb5' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='26' r='3.4' fill='%23ffd23f' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto; }
.cut-on .zoom, .cut-on .zoom *, .cut-on dialog[open], .cut-on dialog[open] *, .cut-on .letter, .cut-on .letter * { cursor: var(--pretty-pointer) !important; }
.cut-on .letter input, .cut-on dialog[open] input { cursor: text !important; }
body:has(.zoom:not([hidden])) .cutter, body:has(dialog[open]) .cutter { opacity: 0 !important; }

/* the offering chest: it glows open, then a beam of light carries the offering up to the gate */
.vase.is-chest { aspect-ratio: 200 / 260; }
.vase.is-offering svg { filter: drop-shadow(0 0 22px rgba(255, 210, 122, .8)); }
.vase.is-chest { position: relative; }
.vase.is-chest.is-rising::after { content: ""; position: absolute; left: 50%; bottom: 40%; width: 46%; height: 140vh; translate: -50% 0; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 244, 194, .85), rgba(255, 244, 194, 0)); border-radius: 999px; pointer-events: none; animation: offering-beam 4s ease-out forwards; }
@keyframes offering-beam { from { scale: 1 0; opacity: 0; } 20% { opacity: 1; } to { scale: 1 1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vase.is-chest.is-rising::after { animation: none; display: none; } }