@font-face { font-family: "Portsmouth Mono"; src: url("assets/fonts/PortsmouthMono.ttf") format("truetype"); font-display: swap; }

:root {
  color-scheme: light;
  --ink: #3c392d;
  --paper: #f7efcf;
  --moss: #4c6242;
  --focus: #fff3a8;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: #b8c9a3; font-family: "Portsmouth Mono", monospace; }
button, a { font: inherit; }

.nature { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #b8c9a3; }
.scene-plane { position: absolute; z-index: 0; top: 50%; left: 50%; width: 160svh; height: 100svh; transform: translate(-50%, -50%); }
.background-sequence { position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; overflow: hidden; transform: translateX(-50%); }
.background-frame { position: absolute; top: 0; left: 50%; max-width: none; height: 100%; object-fit: fill; transform: translateX(-50%); }
.background-frame--wide { width: 300svh; }
.distant-layer, .lake-life-layer { position: absolute; inset: 0; pointer-events: none; }
.distant-layer { z-index: 1; }
.lake-life-layer { z-index: 6; }
.branch-layer, .weather-layer, .foliage-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.branch-layer { z-index: 13; overflow: visible; }
.branch-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.weather-layer { z-index: 14; }
.foliage-layer { z-index: 12; }
.rain-cloud { position: absolute; left: 50%; top: 5%; width: 27%; height: 12%; opacity: 0; transform: translate(-50%,-35%) scale(.82); transition: opacity 2.2s ease, transform 2.6s ease; filter: blur(.35px) drop-shadow(0 6px 10px rgba(68,79,78,.14)); }
.rain-cloud::before, .rain-cloud::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(ellipse at 48% 38%, rgba(217,225,216,.94), rgba(134,153,153,.82) 62%, rgba(93,115,121,.38) 100%); }
.rain-cloud::before { inset: 23% 5% 0; border-radius: 49% 54% 42% 46% / 68% 65% 39% 42%; }
.rain-cloud::after { left: 22%; top: 0; width: 57%; height: 86%; box-shadow: -4.6vw 1.9vw 0 -1.2vw rgba(171,187,181,.86), 5vw 1.8vw 0 -1.1vw rgba(151,171,169,.82); }
.weather-layer.has-cloud .rain-cloud { opacity: .82; transform: translate(-50%,0) scale(1); }
.rain-curtain { position: absolute; inset: 13% 0 0; opacity: 0; transition: opacity 1.1s ease; }
.weather-layer.is-raining .rain-curtain { opacity: .72; }
.rain-drop { position: absolute; top: -12%; width: 1px; height: var(--drop-length, 18px); border-radius: 50%; background: linear-gradient(to bottom, transparent, rgba(216,235,236,.84)); transform: rotate(8deg); animation: rain-fall var(--drop-speed, .72s) linear var(--drop-delay, 0s) infinite; }
.leaf-drip { position: absolute; width: 3px; height: 13px; opacity: 0; border-radius: 50%; background: linear-gradient(rgba(235,247,242,.9), rgba(171,207,210,.65)); animation: leaf-drip 1.8s ease-in var(--drip-delay, 0s) infinite; }
.weather-layer.is-raining .leaf-drip, .weather-layer.is-dripping .leaf-drip { opacity: .74; }
.rain-puddle { position: absolute; width: var(--puddle-width, 9%); height: 1.9%; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(178,211,210,.5), rgba(111,159,159,.28) 48%, transparent 72%); border-top: 1px solid rgba(237,247,232,.62); transform: scale(.2); transition: opacity 4s ease, transform 8s cubic-bezier(.18,.72,.32,1); }
.weather-layer.has-puddles .rain-puddle { opacity: .78; transform: scale(1); }
.weather-layer.is-drying .rain-puddle { opacity: 0; transform: scale(.62,.22); transition-duration: 28s; }
.autumn-leaf { position: absolute; width: var(--leaf-size, 12px); height: calc(var(--leaf-size, 12px) * .62); border-radius: 90% 12% 85% 15% / 78% 18% 82% 22%; background: linear-gradient(135deg, var(--leaf-light), var(--leaf-dark)); box-shadow: inset 0 0 0 1px rgba(91,58,30,.18), 0 2px 3px rgba(48,55,38,.12); transform-origin: 46% 52%; will-change: transform, left, top, opacity; }
.autumn-leaf::after { content: ""; position: absolute; left: 12%; top: 49%; width: 87%; height: 1px; background: rgba(91,58,30,.34); transform: rotate(-8deg); transform-origin: left; }
.autumn-leaf[data-color="maple"] { --leaf-light: #d89a3c; --leaf-dark: #9c3e2a; }
.autumn-leaf[data-color="oak"] { --leaf-light: #c79038; --leaf-dark: #70452a; }
.autumn-leaf[data-color="sumac"] { --leaf-light: #c95e35; --leaf-dark: #7d2f29; }
.autumn-leaf[data-color="birch"] { --leaf-light: #e2bd59; --leaf-dark: #9b742d; }
.autumn-leaf[data-color="russet"] { --leaf-light: #b86f3d; --leaf-dark: #633c2d; }

.living-water { position: absolute; inset: 0 auto auto 50%; width: 300svh; height: 100%; transform: translateX(-50%); pointer-events: none; }

.depth-bokeh { position: absolute; z-index: 2; bottom: -3%; width: 31%; height: 33%; pointer-events: none; backdrop-filter: blur(2.6px); opacity: .72; }
.depth-bokeh--left { left: -4%; mask-image: radial-gradient(ellipse at left bottom, #000 0 22%, transparent 72%); }
.depth-bokeh--right { right: -4%; mask-image: radial-gradient(ellipse at right bottom, #000 0 22%, transparent 72%); }

.avatar-stage { position: absolute; z-index: 16; bottom: 28.8%; left: 31.5%; width: 5.6%; aspect-ratio: 443 / 714; overflow: visible; transform: translateX(-50%); }
.avatar-rig { position: absolute; z-index: 10; inset: 0; width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; filter: drop-shadow(0 14px 10px rgba(67, 55, 32, .28)); }
.sprite-canvas { display: block; object-fit: contain; }
.avatar-rig canvas { width: 100%; height: auto; }
.avatar-rig:hover { filter: brightness(1.035) drop-shadow(0 16px 12px rgba(67, 55, 32, .32)); }
.avatar-rig:focus-visible, .avatar-hat:focus-visible, .foxgirl-ear-trigger:focus-visible, .sound-toggle:focus-visible, .nature-back:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }

.avatar-hat { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; }
.avatar-hat canvas { width: 100%; height: auto; pointer-events: none; }
.avatar-rabbit-slot { position: absolute; z-index: 47; left: 41%; top: -12%; width: 18%; aspect-ratio: 307 / 512; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(70,49,42,.18)); }
.avatar-rabbit-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.avatar-hat { z-index: 48; left: 33%; top: -20%; width: 42%; transform: translateY(var(--hat-lift, 0)); transform-origin: 50% 82%; transition: transform .42s cubic-bezier(.2,.7,.35,1); }
.avatar-hat:hover { filter: brightness(1.04); }
.avatar-hat.is-lifting { transition: none; }
.avatar-hat.is-returning { transition: transform .64s cubic-bezier(.18,.74,.34,1.18); }
.avatar-luck-bubble { position: absolute; z-index: 60; left: -180%; bottom: 112%; width: 380%; max-width: 240px; min-width: 150px; margin: 0; padding: .7em .82em; color: #3c392d; background: rgba(249,243,216,.96); border: 1.5px solid rgba(91,105,69,.56); border-radius: 46% 42% 48% 43% / 42% 48% 44% 48%; box-shadow: 0 5px 11px rgba(56,61,41,.18); font-size: clamp(7px, .58vw, 10px); line-height: 1.35; text-align: center; }
.avatar-luck-bubble::after { content: ""; position: absolute; left: 63%; bottom: -8px; width: 12px; height: 12px; background: inherit; border-right: 1.5px solid rgba(91,105,69,.56); border-bottom: 1.5px solid rgba(91,105,69,.56); transform: rotate(43deg); }
.avatar-luck-bubble.is-changing { opacity: .18; transform: translateY(2px); }
.avatar-luck-bubble.is-long { font-size: clamp(6px, .47vw, 8px); line-height: 1.28; }
.avatar-luck-bubble q { display: block; quotes: "“" "”" "‘" "’"; }

/* Resting ears (y=26) align with sequence ears (y=421): 395/512 = 77.1484375%. */
.foxgirl-stage { position: absolute; z-index: 9; left: 50%; top: 70.6%; width: 11.8%; aspect-ratio: 1; overflow: visible; pointer-events: none; transform: translate(-50%, -16.6015625%); filter: drop-shadow(0 6px 5px rgba(70,49,42,.2)); }
.foxgirl-stage canvas { transform-origin: 50% 85%; width: 100%; height: 100%; object-fit: contain; }
.foxgirl-stage[data-state="idle"] canvas { clip-path: inset(0 0 72% 0); }
.foxgirl-stage[data-state="active"] { transform: translate(-50%, -93.75%); z-index: 45; }
.foxgirl-ear-trigger { position: absolute; z-index: 2; left: 23%; top: 4%; width: 54%; height: 58%; padding: 0; border: 0; border-radius: 48% 48% 42% 42%; background: transparent; cursor: pointer; pointer-events: auto; }
.foxgirl-ear-trigger:disabled { cursor: wait; }
.log-occluder { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
.sky-swirl { position: absolute; z-index: 5; left: 50%; top: 6%; width: min(58%, 86vw); height: auto; opacity: 0; pointer-events: none; transform-origin: 50% 100%; transform: translateX(-50%); filter: blur(.4px) saturate(1.18) drop-shadow(0 2px 8px rgba(109,118,110,.16)); transition: opacity 2.1s ease, filter 2.1s ease; }
.sky-swirl.is-active { opacity: .82; filter: blur(.15px) saturate(1.32) drop-shadow(0 2px 10px rgba(109,118,110,.2)); }

.character-layer { position: absolute; z-index: 11; inset: 0; pointer-events: none; }
.special-layer { position: absolute; z-index: 9; inset: 0; pointer-events: none; }
.nature-character { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: 0; transform-origin: 50% 92%; filter: drop-shadow(0 8px 7px rgba(55, 47, 31, .22)); }
.nature-character canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.nature-character[data-depth="pond"] { z-index: 5; filter: blur(.15px) drop-shadow(0 5px 5px rgba(55,47,31,.18)); }
.nature-character[data-character="frog"] { pointer-events: auto; cursor: pointer; }
.nature-character[data-character="frog"].is-croaking { animation: frog-croak .62s ease-out 2; }

.special-actor { position: absolute; margin: 0; pointer-events: none; transform-origin: center; }
.special-actor canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.special-actor--dragonfly { left: 25%; top: 30%; width: 8%; height: 9.6%; filter: drop-shadow(0 4px 4px rgba(35,70,60,.18)); }
.special-actor--dove { z-index: 14; width: 6.8%; aspect-ratio: 1; margin-top: 1.1%; filter: drop-shadow(0 4px 4px rgba(55,47,31,.2)); transform-origin: 50% 85%; transition-property: left, top, transform, opacity; transition-timing-function: linear; }
.fish-leap { position: absolute; width: 12%; aspect-ratio: 1; margin: 0; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(45,67,64,.18)); transform-origin: center; }
.fish-leap canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.miniature-encounter { position: absolute; inset: 0; pointer-events: none; }
.miniature-encounter__part { position: absolute; height: auto; opacity: 0; object-fit: contain; transition-property: left, top, opacity, transform; transition-timing-function: linear; }
.miniature-encounter__part--moon { filter: blur(.18px); mix-blend-mode: screen; }
.miniature-encounter__part--actor { filter: blur(.12px) drop-shadow(0 1px 1px rgba(42,48,39,.16)); }
.meteor-event { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.meteor-event__part { position: absolute; height: auto; opacity: 0; object-fit: contain; transform-origin: center; transition-property: left, top, opacity, transform; transition-timing-function: linear; }
.meteor-event__part--meteor { filter: drop-shadow(0 0 5px rgba(255,182,74,.8)); }
.meteor-event__part--flash { mix-blend-mode: screen; }
.meteor-event__part--smoke { z-index: 1; }
.meteor-event__part--fire { z-index: 2; filter: drop-shadow(0 0 4px rgba(255,146,53,.55)); }
.meteor-event__part--tanker { z-index: 3; filter: drop-shadow(0 3px 3px rgba(45,52,44,.24)); }
.meteor-event__part--water { z-index: 4; }
.dove-speech { position: absolute; z-index: 18; left: 55.5%; top: 38%; width: min(17rem, 29%); margin: 0; padding: .78em .9em; color: #3b422d; background: rgba(249,243,216,.94); border: 2px solid rgba(91,105,69,.52); border-radius: 42% 45% 40% 44% / 48% 44% 46% 42%; box-shadow: 0 8px 17px rgba(56,61,41,.2); font-size: clamp(7px, .62vw, 11px); line-height: 1.4; white-space: pre-wrap; transform: translate(-50%, -100%); }
.dove-speech::after { content: ""; position: absolute; left: 57%; bottom: -17px; width: 23px; height: 24px; background: inherit; border-right: 2px solid rgba(91,105,69,.52); border-bottom: 2px solid rgba(91,105,69,.52); transform: rotate(43deg) skew(8deg); }

.sound-toggle, .nature-back { position: fixed; z-index: 30; top: max(14px, env(safe-area-inset-top)); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; color: #30412e; background: rgba(247, 239, 207,.84); border: 2px solid rgba(62,75,52,.65); border-radius: 18px 8px 18px 8px; box-shadow: 0 6px 15px rgba(48,55,38,.2); text-decoration: none; backdrop-filter: blur(8px); }
.sound-toggle { left: max(14px, env(safe-area-inset-left)); cursor: pointer; }
.nature-back { right: max(14px, env(safe-area-inset-right)); }
.nature-back.hierarchy-nav { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); left: auto; margin: 0; }
.sound-toggle[aria-pressed="true"] { background: rgba(225, 239, 199, .94); }

.edge-cat { position: fixed; z-index: 29; left: -18vw; bottom: -5px; width: clamp(46px, 6vw, 84px); margin: 0; padding: 0; opacity: 0; border: 0; background: transparent; cursor: pointer; transition: left .13s linear, bottom .1s cubic-bezier(.25,.8,.45,1), opacity .22s ease; }
.edge-cat.is-present { opacity: 1; }
.edge-cat:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.edge-cat img { display: block; width: 100%; height: auto; pointer-events: none; mix-blend-mode: multiply; }
.edge-cat-bubble { position: absolute; left: 68%; top: 5%; min-width: 4.2em; padding: .48em .7em; color: #34313a; background: rgba(255,255,255,.94); border: 2px solid rgba(58,55,65,.72); border-radius: 48% 45% 50% 43%; box-shadow: 0 4px 8px rgba(40,38,46,.18); font-size: clamp(9px, .85vw, 13px); line-height: 1; white-space: nowrap; transform: translate(-10%, -100%); }
.edge-cat-bubble::after { content: ""; position: absolute; left: 18%; bottom: -7px; width: 10px; height: 10px; background: inherit; border-right: 2px solid rgba(58,55,65,.72); border-bottom: 2px solid rgba(58,55,65,.72); transform: rotate(45deg); }

@keyframes rain-fall { from { transform: translate3d(0,-12vh,0) rotate(8deg); } to { transform: translate3d(-2.5vw,92vh,0) rotate(8deg); } }
@keyframes leaf-drip { 0%,28% { transform: translateY(0) scaleY(.35); opacity: 0; } 42% { opacity: .75; } 100% { transform: translateY(19vh) scaleY(1.1); opacity: 0; } }
@keyframes frog-croak { 0%,100% { transform: scale(1); } 42% { transform: translateY(-4%) scale(1.08, 1.13); filter: brightness(1.06) drop-shadow(0 9px 9px rgba(55,47,31,.23)); } }

.nature-status { position: fixed; z-index: 21; left: 50%; bottom: 1px; margin: 0; opacity: 0; pointer-events: none; transform: translateX(-50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .avatar-stage { bottom: 28.7%; left: 40%; width: 6.3%; }
  .avatar-luck-bubble { left: 10%; bottom: 110%; width: 460%; min-width: 132px; font-size: clamp(7px, 1.55vw, 9px); }
  .avatar-luck-bubble::after { left: 12%; }
  .foxgirl-stage { top: 71.7%; width: 13.1%; }
  .sky-swirl { top: 7%; }
  .dove-speech { width: min(15rem, 58vw); font-size: clamp(7px, 1.65vw, 10px); }
  .sound-toggle, .nature-back { top: 10px; min-height: 40px; padding: 7px 10px; font-size: 11px; }
  .special-actor--dragonfly { left: 40%; width: 9%; }
}

@media (min-aspect-ratio: 8 / 5) {
  .branch-overlay[data-branch="upper-left"] { transform: translateX(calc((160svh - 100vw) / 2)); }
  .branch-overlay[data-branch="upper-right"] { transform: translateX(calc((100vw - 160svh) / 2)); }
}

html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
html[data-motion="reduced"] .depth-bokeh { backdrop-filter: blur(1.4px); }

.sound-credits { position:fixed; bottom:1rem; left:1rem; z-index:35; max-width:min(28rem,calc(100vw - 2rem)); color:#334b3c; font:12px/1.5 Georgia,serif; }
.sound-credits summary { cursor:pointer; width:max-content; padding:.25rem .5rem; background:#f3f5dddc; border-radius:.3rem; }
.sound-credits[open] { padding:.5rem .75rem; background:#f3f5ddef; border-radius:.4rem; }
.sound-credits p { margin:.5rem 0 0; }
.sound-credits a { color:inherit; }

.scene-plate { position:absolute; top:0; left:50%; width:300svh; height:100%; transform:translateX(-50%); pointer-events:none; }
/* Each occlusion plate participates in the actor stack, not a background-only stack. */
.scene-plate--forest { z-index:2; }
.living-water { z-index:3; }
.scene-plate--foreground { z-index:8; }
.nature[data-layers] .background-frame--wide { opacity:1; }
.meteor-layer { position:absolute; inset:0; z-index:4; pointer-events:none; }
.meteor-event { clip-path:polygon(0 0,100% 0,100% 49%,79% 49%,76% 48.8%,74% 48.5%,72% 48.9%,70% 48.5%,68% 48.9%,65% 49%,0 49%); }

.bank-encounter { z-index:4; clip-path:polygon(0 0,100% 0,100% 51.5%,95% 51.2%,90% 51%,85% 50.6%,80% 50.8%,0 50.8%); }

.waterfall-flow { position:absolute; z-index:4; pointer-events:none; }