@font-face{font-family:MaruBuri;src:url('../../assets/MaruBuri-Regular.otf') format('opentype');font-display:swap}
:root{color-scheme:light;--paper:#f6f3e9;--ink:#485544;--muted:#818875;--line:#66734f25}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:MaruBuri,Georgia,serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #738966;outline-offset:5px}.topbar{height:98px;max-width:1600px;margin:auto;padding:22px clamp(24px,5vw,80px);display:flex;align-items:center;justify-content:space-between}.topbar img{width:103px;height:auto}.back-link{font:14px system-ui,sans-serif;color:#737968;display:flex;gap:18px;align-items:center}.back-link span{font-size:22px}main{position:relative;height:calc(100svh - 145px);min-height:480px;max-height:1100px;margin:0 24px;border:1px solid var(--line);border-radius:32px;overflow:hidden;background:#f0f1e5}.heading{position:absolute;z-index:2;top:clamp(24px,4vh,48px);left:clamp(26px,4.5vw,70px);pointer-events:none}.eyebrow{font:10px system-ui,sans-serif;font-weight:600;letter-spacing:2.5px;color:#8a927e}h1{font-weight:400;font-size:clamp(27px,3vw,44px);letter-spacing:-1.6px;margin:12px 0 10px}.heading p{font-size:14px;color:#828873;margin:0}#garden{position:absolute;inset:0}canvas{width:100%;height:100%;display:block;touch-action:pinch-zoom;cursor:default}canvas:active{cursor:defaultbing}.loading{position:absolute;inset:46% 20px auto;text-align:center;color:#68775b;font-size:15px;pointer-events:none}.loading[hidden]{display:none}.bottom{position:absolute;pointer-events:none;z-index:2;bottom:28px;left:clamp(24px,4.5vw,70px);right:clamp(24px,4.5vw,70px);display:flex;align-items:center;justify-content:space-between;gap:20px}.hint{font-size:13px;color:#7a846e;margin:0}.hint>span{font:21px system-ui;margin-right:8px}.actions{display:flex;gap:10px;pointer-events:auto}.actions button{display:flex;gap:10px;align-items:center;justify-content:center;min-height:46px;border:1px solid #67774c26;border-radius:24px;background:#fffcf4dc;padding:10px 20px;font:13px system-ui;cursor:pointer;box-shadow:0 3px 12px #6b70400a;transition:background .2s,transform .2s}.actions button:hover{background:#fffdf5;transform:translateY(-2px)}button:disabled{opacity:.5;cursor:wait}.actions svg{width:16px;height:16px;stroke:#798968;stroke-width:2.5;stroke-linecap:round;fill:none}.color-dots{display:flex;padding-left:3px}.color-dots i{width:11px;height:11px;border-radius:50%;background:#bdc786;margin-left:-3px;border:1px solid #fff9}.color-dots i:nth-child(2){background:#e4b675}.color-dots i:nth-child(3){background:#cd9692}footer{display:flex;justify-content:space-between;margin:16px 48px;font:10px system-ui;letter-spacing:1px;color:#939988}
@media(max-width:600px){.topbar{height:78px;padding:12px 23px}.topbar img{width:88px}.back-link{font-size:12px;gap:10px}main{margin:0 12px;height:calc(100svh - 124px);min-height:480px;border-radius:25px}.heading{top:26px;left:25px;right:20px}h1{font-size:29px;margin:12px 0}.heading p{font-size:12px}.eyebrow{font-size:9px;letter-spacing:2px}.bottom{bottom:22px;left:16px;right:16px;flex-direction:column;gap:15px}.hint{font-size:12px}.actions button{padding:10px 17px}.actions{gap:9px}footer{margin:14px 24px;font-size:9px;letter-spacing:.5px}}
@media(max-height:520px) and (orientation:landscape){.topbar{height:57px;padding:8px max(28px,env(safe-area-inset-left))}.topbar img{width:77px}main{height:calc(100svh - 69px);min-height:260px;margin:0 max(12px,env(safe-area-inset-left));border-radius:22px}.heading{top:20px;left:26px}h1{font-size:26px;margin:7px 0}.eyebrow{font-size:8px}.heading p{font-size:11px}.bottom{bottom:16px;left:26px;right:26px}.actions button{min-height:42px;padding:8px 14px}.hint{font-size:11px}footer{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Static painted scenery stays in the DOM; only the character is rendered in WebGL. */
.meadow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
#scene{position:relative}
#garden[data-mode="pointer"].butterfly-ready #scene{cursor:none}
#butterfly{position:absolute;z-index:1;width:74px;height:74px;transform:translate(-50%,-50%);pointer-events:none}
#butterfly[hidden]{display:none}
/* Split the original transparent art around the thorax so the body stays steady. */
.butterfly-flight{position:relative;width:100%;height:100%;perspective:240px}
#butterfly img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wing-left{clip-path:inset(0 55% 0 0);transform-origin:45% 50%;animation:wing-left .26s ease-in-out infinite}
.wing-right{clip-path:inset(0 0 0 55%);transform-origin:55% 50%;animation:wing-right .26s ease-in-out infinite}
.butterfly-body{clip-path:inset(0 45%)}
@keyframes wing-left{0%,100%{transform:rotateY(-12deg)}50%{transform:rotateY(-68deg)}}
@keyframes wing-right{0%,100%{transform:rotateY(12deg)}50%{transform:rotateY(68deg)}}
.heading{filter:drop-shadow(0 2px 8px #ffffef)}
.control-column{display:flex;flex-direction:column;gap:10px;align-items:flex-start;pointer-events:auto}
.modes{display:flex;padding:4px;border:1px solid #68764e26;border-radius:28px;background:#fffcf4e8;gap:2px}
.modes button{border:0;background:transparent;padding:11px 17px;border-radius:22px;font:13px system-ui;cursor:pointer;min-height:42px;color:#738164}
.modes button[aria-pressed="true"]{background:#d8e2c5;color:#405737;box-shadow:0 1px 4px #46572d12}
.hint{background:#f9f8edcf;border-radius:12px;padding:6px 10px;font:12px system-ui;max-width:360px;line-height:1.5}
#virtual-controls{position:absolute;z-index:3;left:24px;right:24px;bottom:132px;display:none;justify-content:space-between;align-items:flex-end;pointer-events:none}
#virtual-controls[hidden]{display:none!important}
.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:5px}
.dpad button,#boost{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #63744c40;background:#fcf9eae8;box-shadow:0 3px 0 #84936d40;border-radius:16px;cursor:pointer;color:#62734e}
.dpad button{font:26px system-ui;line-height:1}
.dpad button[data-key="ArrowUp"]{grid-column:2}
.dpad button[data-key="ArrowLeft"]{grid-row:2;grid-column:1}
.dpad button[data-key="ArrowDown"]{grid-row:2;grid-column:2}
.dpad button[data-key="ArrowRight"]{grid-row:2;grid-column:3}
#boost{width:68px;height:55px;font:13px system-ui}
.dpad button.is-held,#boost.is-held{background:#cbdcae;box-shadow:0 1px 0 #84936d40;transform:translateY(2px)}
@media(any-pointer:coarse){#virtual-controls{display:flex}}
@media(max-width:600px){.bottom{gap:10px;align-items:stretch;bottom:16px}.control-column{align-items:center;gap:7px}.actions{justify-content:center}.hint{font-size:11px;text-align:center;margin:0}.modes button{font-size:12px;padding:9px 16px}.actions button{min-height:40px;padding:8px 16px;font-size:12px}.heading{top:23px}.heading p{display:none}#butterfly{width:64px;height:64px}#virtual-controls{bottom:165px;left:18px;right:18px}}
@media(max-height:520px) and (orientation:landscape){.bottom{bottom:12px;left:22px;right:22px;align-items:flex-end}.control-column{gap:5px}.modes button{padding:6px 14px;min-height:36px;font-size:12px}.hint{font-size:10px;padding:4px 8px}.heading{top:18px}.heading p,.eyebrow{display:none}h1{font-size:25px}.actions button{min-height:38px;font-size:12px}#virtual-controls{bottom:100px;left:22px;right:22px}.dpad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:4px}#boost{height:46px}}
@media(prefers-reduced-motion:reduce){#butterfly img{animation:none}}
/* A paper-colored wash keeps type readable over every illustrated garden. */
.heading::before{content:"";position:absolute;z-index:-1;inset:-30px -40px;background:radial-gradient(ellipse,#f6f3e9e8 15%,#f6f3e9a8 45%,#f6f3e900 72%);pointer-events:none}

/* The host page owns the section heading and fullscreen action when embedded. */
.embedded .topbar,.embedded footer,.embedded .heading,.embedded main>.play-fullscreen-toggle{display:none}
.embedded main{margin:0;width:100%;height:100svh;min-height:0;max-height:none;border:0;border-radius:0}
.embedded body{overflow:hidden}
main.is-play-fullscreen #garden{inset:0}

/* Touch layouts use butterfly targeting without a desktop input selector. */
@media(max-width:600px),(hover:none) and (pointer:coarse){.modes,#virtual-controls{display:none!important}}