/* ============================================
   Season toggle + autumn theme and overlay.
   Everything autumn-specific is scoped under body.season-autumn;
   the toggle pill styles apply in both seasons.
   Behaviour lives in autumn.js; the canvas game in garden.js.
   ============================================ */
.season-toggle {
  display: inline-flex;
  gap: 2px;
  background: rgba(255, 248, 252, 0.72);
  border: 1px solid rgba(210, 160, 185, 0.28);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.season-toggle button {
  background: transparent;
  border: 0;
  padding: 5px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #8a6878;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.season-toggle button.active {
  background: rgba(255, 255, 255, 0.95);
  color: #4a3848;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ---------- Autumn page theme ----------
   A dusk palette that continues the night scene: deep twilight purple,
   cream text, amber labels, pumpkin accents. Spring keeps the pastel
   cherry-blossom page untouched (these rules only apply under season-autumn).
   cream #f3e3c8 · soft cream #cfae8c · amber #e0a368 · pumpkin #e8853a */
/* iOS fills the elastic overscroll area with the root's solid background
   colour (a gradient doesn't count), so without this the bounce flashes white.
   The class is mirrored onto <html> by autumn.js applySeason(). */
html.season-autumn { background-color: #36224f; }
body.season-autumn {
  background: linear-gradient(180deg, #221833 0%, #2c1d42 40%, #36224f 100%);
  color: #f3e3c8;
}
/* Background drifters become maple leaves in autumn: same elements as the
   spring petals (created in garden.js initBgPetals), masked to a leaf shape,
   with mixed colours, a few larger ones, and a bit more visibility. */
body.season-autumn .bg-petal {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: #d9662a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 L13.6 5.6 L16.5 4.2 L15.8 8.4 L20.5 7.2 L18.8 10.5 L23 12 L18.5 14.2 L19.6 16.8 L14.6 16 L13 19.5 L12.6 16.6 L12.6 23 L11.4 23 L11.4 16.6 L11 19.5 L9.4 16 L4.4 16.8 L5.5 14.2 L1 12 L5.2 10.5 L3.5 7.2 L8.2 8.4 L7.5 4.2 L10.4 5.6 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 L13.6 5.6 L16.5 4.2 L15.8 8.4 L20.5 7.2 L18.8 10.5 L23 12 L18.5 14.2 L19.6 16.8 L14.6 16 L13 19.5 L12.6 16.6 L12.6 23 L11.4 23 L11.4 16.6 L11 19.5 L9.4 16 L4.4 16.8 L5.5 14.2 L1 12 L5.2 10.5 L3.5 7.2 L8.2 8.4 L7.5 4.2 L10.4 5.6 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation-name: leafDrift;
}
body.season-autumn .bg-petal:nth-of-type(4n+1) { background: #c0392b; }
body.season-autumn .bg-petal:nth-of-type(4n+2) { background: #e07a2e; }
body.season-autumn .bg-petal:nth-of-type(4n+3) { background: #e8b04a; }
body.season-autumn .bg-petal:nth-of-type(4n)   { background: #9a4a22; }
body.season-autumn .bg-petal:nth-of-type(5n)   { width: 22px; height: 22px; }
@keyframes leafDrift {
  0%   { transform: translateY(0) rotate(0deg);                     opacity: 0.08; }
  40%  { transform: translateY(-40px) translateX(14px) rotate(170deg); opacity: 0.2; }
  100% { transform: translateY(22px) translateX(-10px) rotate(360deg); opacity: 0.08; }
}
body.season-autumn .header h1 { color: #f6e6c8; }
body.season-autumn .header p { color: #d9b48c; }
body.season-autumn .game-label { color: #e0a368; }
body.season-autumn .season-toggle {
  background: rgba(255, 236, 210, 0.08);
  border-color: rgba(240, 180, 110, 0.25);
}
body.season-autumn .season-toggle button { color: #d9b48c; }
body.season-autumn .season-toggle button.active {
  background: rgba(255, 236, 210, 0.92);
  color: #5a3420;
}
body.season-autumn .game-hint { color: #cfa680; }
body.season-autumn .bloom-counter { color: #f0a050; }
body.season-autumn .reset-btn { color: #c49a74; }
body.season-autumn .reset-btn:hover { color: #f0c890; }
body.season-autumn .divider-line {
  background: linear-gradient(90deg, transparent, rgba(240, 170, 100, 0.35), transparent);
}
body.season-autumn .divider-icon { color: #e0a368; }
body.season-autumn .section-label { color: #e0a368; }
body.season-autumn .card,
body.season-autumn .link-button {
  background: rgba(255, 236, 210, 0.07);
  border-color: rgba(240, 180, 110, 0.18);
}
/* No backdrop blur in autumn: the drifting background leaves pass behind
   these, forcing the blur to be recomputed every frame (a real battery cost on
   phones), and on the dark background the blur is barely visible anyway. */
body.season-autumn .card,
body.season-autumn .link-button,
body.season-autumn .season-toggle,
body.season-autumn .share-btn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.season-autumn .link-button { color: #f3e3c8; }
body.season-autumn .link-button:hover {
  background: rgba(255, 236, 210, 0.13);
  border-color: rgba(240, 180, 110, 0.35);
}
body.season-autumn .link-arrow { color: #e0a368; }
body.season-autumn .book-info h3,
body.season-autumn .playlist-header h3 { color: #f6e6c8; }
body.season-autumn .book-info p,
body.season-autumn .playlist-track { color: #cfae8c; }
body.season-autumn .link-button.upcoming:hover { background: rgba(255, 236, 210, 0.07); border-color: rgba(240, 180, 110, 0.18); }
body.season-autumn .link-tag { color: #f0c890; background: rgba(232, 133, 58, 0.18); }
body.season-autumn .orbit-spring { display: none; }
body.season-autumn .orbit-autumn { display: block; }
body.season-autumn .orbit-item p { color: #cfae8c; }
body.season-autumn .orbit-item strong { color: #f6e6c8; }
body.season-autumn .trophy-copy h3 { color: #f6e6c8; }
body.season-autumn .trophy-copy p { color: #cfae8c; }
body.season-autumn .trophy-item + .trophy-item { border-top-color: rgba(240, 180, 110, 0.15); }
/* The tarot cards are purple already; an amber edge keeps them from melting
   into the purple page, and the reading needs cream text to read on it. */
body.season-autumn .tarot-side { border-color: rgba(240, 180, 110, 0.35); }
body.season-autumn .tarot-prompt { color: #cfae8c; }
body.season-autumn .tarot-title { color: #f6e6c8; }
body.season-autumn .tarot-message { color: #cfae8c; }
body.season-autumn .tarot-reset {
  background: rgba(255, 236, 210, 0.08);
  border-color: rgba(240, 180, 110, 0.3);
  color: #f3e3c8;
}
body.season-autumn .tarot-reset:hover {
  background: rgba(255, 236, 210, 0.14);
  border-color: rgba(240, 180, 110, 0.5);
}
body.season-autumn .vinyl-label { background: #d4793a; }
body.season-autumn .playlist-hint { color: #cfa680; }
body.season-autumn .np-title { color: #f6e6c8; }
body.season-autumn .crate-toggle { color: #cfa680; }
body.season-autumn .vinyl-crate .playlist-track:hover { background: rgba(255, 236, 210, 0.06); }
body.season-autumn .vinyl-crate .playlist-track.is-playing .track-title { color: #f6e6c8; }
body.season-autumn .track-bar { background: #e8853a; }
body.season-autumn .footer { color: #a88a6c; }
body.season-autumn .game-container {
  background: linear-gradient(180deg,
    #0b1733 0%,     /* deep night blue */
    #1d2a4f 10%,
    #3a2a56 22%,
    #6b3f5c 34%,
    #a85a44 50%,
    #c47a4a 62%,
    #8a5230 76%,
    #5a3a24 92%,
    #3d2615 100%);
  border-color: rgba(140, 70, 40, 0.25);
}
/* Game draws its own autumn leaves — no hue-rotate on the canvas. */

/* The wish mechanic only unlocks when the tree is fully bloomed, which
   never happens in autumn — hide its button and count. "share my tree" stays;
   garden.js paints the night sky and this overlay into the shared video. */
body.season-autumn .wish-btn,
body.season-autumn .wish-count { display: none; }
body.season-autumn .share-btn {
  background: rgba(255, 236, 210, 0.1);
  border-color: rgba(240, 180, 110, 0.3);
  color: #f3e3c8;
}
body.season-autumn .share-btn:hover {
  background: rgba(255, 236, 210, 0.18);
  border-color: rgba(240, 180, 110, 0.5);
}

/* Crescent moon, top-right of the autumn scene */
.moon {
  position: absolute;
  top: 7%;
  right: 9%;
  width: 36px;
  height: 36px;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 240, 190, 0.35));
}

/* Scattered twinkling stars */
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff8e0;
  border-radius: 50%;
  pointer-events: none;
  animation: twinkle var(--twinkle-dur, 3.2s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
  box-shadow: 0 0 2px rgba(255, 248, 224, 0.9);
}
.star.big { width: 3px; height: 3px; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Pumpkin patch: one pyramid-shaped cluster around the trunk base (trunk at
   ~48%). The jack-o-lantern is the centrepiece; the largest plain pumpkin sits
   just left of the trunk; sizes shrink toward the edges and the back row sits
   higher for depth. Leaves the cat's bottom-left corner and the haiku scroll's
   bottom-right corner clear. DOM order is back to front. Heights follow 60:46. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ground-pumpkin {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3));
}
.ground-pumpkin.p-far         { left: 66%; bottom: 11%;  width: 22px; height: 17px; }
.ground-pumpkin.p-left-back   { left: 26%; bottom: 9%;   width: 34px; height: 26px; }
.ground-pumpkin.p-right-main  { left: 61%; bottom: 6.5%; width: 38px; height: 29px; transform: scaleX(-1); }
.ground-pumpkin.p-left-main   { left: 31%; bottom: 3.5%; width: 56px; height: 43px; }
.ground-pumpkin.p-right-small { left: 63%; bottom: 2%;   width: 28px; height: 21px; }
.ground-pumpkin.p-left-small  { left: 22%; bottom: 2%;   width: 30px; height: 23px; }

.autumn-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  overflow: hidden;
}
body.season-autumn .autumn-overlay { display: block; }
/* Ducks get their own layer under the tree canvas (see index.html). */
.duck-layer { position: absolute; inset: 0; display: none; overflow: hidden; pointer-events: none; }
body.season-autumn .duck-layer { display: block; }
.duck-layer .interactive { pointer-events: auto; }
.tree-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.autumn-overlay .interactive { pointer-events: auto; }

.hidden-cat {
  position: absolute;
  bottom: 8%;
  left: 3%;
  width: 54px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
}
.hidden-cat .cat-body { opacity: 0; transition: opacity 0.4s ease-out 0.1s; }
.hidden-cat .cat-eyes {
  animation: catBlink 5s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(245, 208, 96, 0.8));
}
.hidden-cat.out { transform: translate(10px, -2px); }
.hidden-cat.out .cat-body { opacity: 1; }
.hidden-cat.out .cat-eyes { animation: none; }
@keyframes catBlink {
  0%, 92%, 100% { opacity: 1; }
  94%, 97%      { opacity: 0.12; }
}

/* Jack-o-lantern is the centrepiece of the pumpkin cluster, sitting in front
   of the trunk base (see the pumpkin patch block for the rest). */
.jack-o-lantern {
  position: absolute;
  bottom: 3%;
  left: 47%;
  width: 54px;
  height: 45px;
  cursor: pointer;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3));
}
.jack-o-lantern .lantern-glow { opacity: 0; transition: opacity 0.4s; }
.jack-o-lantern.lit .lantern-glow {
  opacity: 1;
  animation: flicker 1.1s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

.owl {
  position: absolute;
  top: 21%;
  right: 24%;
  width: 34px;
  height: 42px;
}
/* The owl sits in the canopy, so only its painted body takes taps (for the
   hoot). Its box, branch and empty corners pass taps through to the leaves. */
.autumn-overlay .owl.interactive { pointer-events: none; }
.owl .owl-body { pointer-events: visiblePainted; cursor: pointer; }
.owl svg { width: 100%; height: 100%; overflow: visible; }
.owl .owl-wing { transform-box: fill-box; }
.owl .owl-wing.left  { transform-origin: top right; }
.owl .owl-wing.right { transform-origin: top left; }
.owl.hooting .owl-body       { animation: owlHop 0.7s ease-out; }
.owl.hooting .owl-wing.left  { animation: owlFlapLeft 0.6s ease-in-out; }
.owl.hooting .owl-wing.right { animation: owlFlapRight 0.6s ease-in-out; }
@keyframes owlHop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-8px); }
  60%      { transform: translateY(0); }
  78%      { transform: translateY(-2px); }
}
@keyframes owlFlapLeft {
  0%, 50%, 100% { transform: rotate(0); }
  25%, 75%      { transform: rotate(55deg); }
}
@keyframes owlFlapRight {
  0%, 50%, 100% { transform: rotate(0); }
  25%, 75%      { transform: rotate(-55deg); }
}
/* Mallards on the seawall path (the canvas draws the path at 63–70% of the
   scene height, so feet sit at ~31–33% from the bottom). autumn.js wanders
   them: waddle to a spot (.walking, moving `left`), stop and peck, repeat.
   Tapping one hops it and floats a "quack" (reuses .hoot). The symbol faces
   left; .facing-right mirrors it. */
.duck {
  position: absolute;
  cursor: pointer;
  transform-origin: 50% 100%;
  animation: duckPeck 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
}
.duck svg { display: block; width: 100%; height: 100%; overflow: visible; }
.duck.facing-right svg { transform: scaleX(-1); }
.duck.d1 { left: 9%;  bottom: 31.5%; width: 30px; height: 23px; animation-delay: -1s; }
.duck.d2 { left: 18%; bottom: 31%;   width: 28px; height: 21px; animation-delay: -4s; }
@keyframes duckPeck {
  0%, 82%, 100% { transform: rotate(0); }
  86%           { transform: rotate(-14deg); }
  90%           { transform: rotate(0); }
  93%           { transform: rotate(-14deg); }
}
.duck.facing-right { animation-name: duckPeckRight; }
@keyframes duckPeckRight {
  0%, 82%, 100% { transform: rotate(0); }
  86%           { transform: rotate(14deg); }
  90%           { transform: rotate(0); }
  93%           { transform: rotate(14deg); }
}
.duck.walking { animation: duckWaddle 0.3s ease-in-out infinite alternate; }
@keyframes duckWaddle {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg) translateY(-1px); }
}
.duck.quacking { animation: duckHop 0.45s ease-out; }
@keyframes duckHop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-7px); }
}

.hoot {
  position: absolute;
  top: -6px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12px;
  color: #f5e4a8;
  text-shadow: 0 0 6px rgba(245, 228, 168, 0.6);
  pointer-events: none;
  opacity: 0;
  animation: hootFloat 1.5s ease-out forwards;
}
@keyframes hootFloat {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px); }
}
.owl .owl-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: owlBlink 7s ease-in-out infinite;
}
@keyframes owlBlink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

/* Crows: each .crow is a full-width track that slides across with a
   transform (cheap: no per-frame layout). Translate % is relative to the
   track's own width, which is the scene width, so 100% crosses the sky.
   The crow sits at the track's left edge and starts/ends off-screen so the
   loop restart is never visible. The inner SVG flaps. */
.crow {
  position: absolute;
  top: 14%;
  left: 0;
  width: 100%;
  height: 10px;
  opacity: 0.6;
  pointer-events: none;
  animation: crowFly 24s linear infinite;
  animation-delay: -6s;
}
.crow + .crow { top: 20%; height: 8px; animation-duration: 31s; animation-delay: -19s; }
.crow svg {
  display: block;
  width: 32px;
  height: 100%;
  transform-origin: center;
  animation: crowFlap 0.5s ease-in-out infinite alternate;
}
.crow + .crow svg { width: 26px; }
@keyframes crowFly {
  0%   { transform: translate(-40px, 0); }
  40%  { transform: translate(40%, -10px); }
  70%  { transform: translate(calc(70% + 12px), 6px); }
  100% { transform: translate(calc(100% + 40px), 0); }
}
@keyframes crowFlap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.35); }
}

/* Haiku scroll (bottom-right). Closed: the .scroll-rolled SVG, one parchment
   cylinder tied with a bow. Open: the SVG fades out, the two paper rolls fade
   in, the scroll widens, then the paper unrolls UPWARD (anchored to the
   bottom, so the top roll rises). Closing reverses: paper rolls up, it
   narrows, then the rolled SVG fades back in. */
.haiku-scroll {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 64px;
  cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
  transition: width 0.25s ease 0.4s;
  -webkit-tap-highlight-color: transparent;
}
.haiku-scroll.open {
  width: min(210px, calc(100% - 20px));
  transition-delay: 0s;
}
.scroll-roll {
  position: relative;
  opacity: 0;
  transition: opacity 0.15s ease 0.6s;
  height: 13px;
  margin: 0 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff6dc 0%, #f0dcaa 35%, #d9b878 70%, #b88f50 100%);
}
/* Spiral ends of the rolled paper */
.scroll-roll::before,
.scroll-roll::after {
  content: '';
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #9a7038 0 1.5px, #f3e1b4 1.5px 3px, #c49a5a 3px 4px, #f6e7c0 4px 5.5px, #b88f50 5.5px);
}
.haiku-scroll.open .scroll-roll { opacity: 1; transition-delay: 0s; }
.scroll-roll::before { left: -6px; }
.scroll-roll::after  { right: -6px; }
.scroll-paper {
  max-height: 0;
  overflow: hidden;
  margin: -3px 9px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(190, 140, 70, 0.12), transparent 60%),
    radial-gradient(ellipse at 80% 75%, rgba(190, 140, 70, 0.10), transparent 55%),
    linear-gradient(90deg, #ead4a0 0%, #f8ecce 12%, #fbf2db 50%, #f8ecce 88%, #ead4a0 100%);
  box-shadow: inset 0 7px 6px -6px rgba(110, 75, 30, 0.45), inset 0 -7px 6px -6px rgba(110, 75, 30, 0.45);
  transition: max-height 0.45s ease;
}
.haiku-scroll.open .scroll-paper {
  max-height: 150px;
  transition-delay: 0.25s;
}
.scroll-text {
  margin: 0;
  padding: 14px 12px 15px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.6;
  color: #4a2e1f;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transition: opacity 0.2s;
}
.haiku-scroll.open .scroll-text {
  opacity: 1;
  transition-delay: 0.6s;
}
.scroll-rolled {
  position: absolute;
  right: 0;
  bottom: -2px;
  width: 64px;
  height: 32px;
  transition: opacity 0.15s ease 0.6s;
}
.scroll-caption {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 64px;
  margin-bottom: 12px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 10px;
  color: #f5e4a8;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s ease 0.4s;
}
.haiku-scroll.open .scroll-rolled,
.haiku-scroll.open .scroll-caption {
  opacity: 0;
  transition-delay: 0s;
}