:root{--ink:#4a2141;--cream:#fff0de;--sky:#b3ffff;--pale:#deffd2;--green:#b2f799;--grass:#40c641;--sea:#96e3ff;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:5px}img{max-width:100%;display:block}html{scroll-padding-top:68px;scroll-behavior:smooth}.preview{height:42px;background:var(--ink);color:var(--cream);display:flex;justify-content:space-between;align-items:center;padding:0 4%;font-size:12px;position:sticky;top:0;z-index:30}.preview button{border:1px solid #fff0de88;border-radius:20px;background:transparent;color:inherit;padding:5px 15px;font-size:12px}.preview button[aria-pressed=true]{background:var(--cream);color:var(--ink)}header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:#fff8ed;position:sticky;top:0;z-index:20;border-bottom:2px solid #4a214115}.brand{font-size:19px;font-weight:800;letter-spacing:.06em}nav{display:flex;gap:26px;font-size:13px;font-weight:700}nav a:hover{border-bottom:2px solid}.scene{position:relative;overflow:hidden}.hero{height:min(760px,calc(100svh - 68px));min-height:570px;background:var(--sky)}.hero-copy{position:absolute;z-index:3;top:9%;left:0;right:0;text-align:center}.eyebrow{font-size:14px;letter-spacing:.25em;margin:0 0 18px}h1{font-size:clamp(58px,7.8vw,106px);line-height:1.12;letter-spacing:.12em;margin:0;font-weight:900}h1 span{display:block;font-size:.68em;letter-spacing:.22em;margin-top:8px}.tagline{margin-top:24px;font-size:17px;letter-spacing:.12em}.cloud{position:absolute;background:#fffefa;clip-path:polygon(0 54%,6% 33%,18% 28%,24% 9%,42% 0,57% 11%,64% 26%,84% 29%,96% 48%,100% 70%,94% 85%,64% 91%,47% 100%,31% 90%,9% 92%,0 77%)}.cloud-a{width:225px;height:74px;left:6%;top:16%}.cloud-b{width:150px;height:45px;right:9%;top:30%}.cloud-c{width:100px;height:30px;left:28%;top:52%}.hill{position:absolute;bottom:21%;background:#a5f2af;width:64%;height:26%;border-radius:60% 44% 0 0}.hill-a{left:-22%;transform:rotate(5deg)}.hill-b{right:-17%;width:56%;height:19%;background:#89e899;transform:rotate(-7deg)}.hero-ground{position:absolute;inset:68% 0 0;background:var(--pale);clip-path:polygon(0 5%,21% 1%,42% 7%,65% 0,83% 6%,100% 3%,100% 100%,0 100%)}.path{position:absolute;background:var(--cream)}.hero-path{left:16%;bottom:-1%;height:33%;width:65%;clip-path:polygon(54% 0,64% 0,62% 20%,49% 45%,62% 70%,100% 100%,0 100%,29% 70%,34% 43%,51% 20%)}.walker-track{position:absolute;bottom:9%;left:calc(50% - 74px);width:148px;z-index:4}.walker{width:148px;height:175px;background:url('assets/pote-walk.webp') 0 0/592px 175px no-repeat;image-rendering:pixelated}.grass{position:absolute;color:#64bd65;font-size:42px;font-weight:bold;bottom:9%;transform:rotate(-8deg)}.g1{left:7%}.g2{right:12%;bottom:19%}.flowers{position:absolute;bottom:5%;right:5%;font-size:30px;color:#f3b460;letter-spacing:14px}.flowers span{font-size:20px}.scroll-note{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.1em;z-index:5;white-space:nowrap}.scroll-note span{margin-left:12px}.intro{background:var(--pale);padding:110px 7% 160px;min-height:650px}.intro-path{left:0;top:0;width:32%;height:100%;clip-path:polygon(47% 0,83% 0,62% 26%,60% 52%,80% 77%,100% 100%,10% 100%,0 66%,20% 38%)}.intro-wrap{position:relative;z-index:2;max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.chapter>span,.section-heading>span{font-size:10px;font-weight:800;letter-spacing:.24em}.chapter h2,.section-heading h2{font-size:clamp(25px,3vw,37px);line-height:1.75;letter-spacing:.08em;margin:18px 0 20px}.chapter p,.section-heading p{font-size:14px;line-height:2.3}.draft{display:block;font-size:10px;opacity:.65;margin-top:22px}.intro-picture{margin:0;transform:rotate(3deg);background:#fff8ed;padding:12px 12px 18px;border-radius:3% 2% 3% 1%}.intro-picture img{width:100%;height:auto;image-rendering:pixelated}.intro-picture figcaption{text-align:center;font-size:11px;margin-top:14px;letter-spacing:.08em}.intro-friends{position:absolute;width:120px;height:auto;right:14%;bottom:15px;transform:rotate(-5deg)}.section-pad{padding:100px 6%}.section-heading{text-align:center;position:relative;z-index:2}.section-heading h2{margin-bottom:10px}.section-heading p{margin-top:0}.characters{background:#fff8ed;position:relative}.characters:before{content:'';position:absolute;top:-18px;left:0;right:0;height:30px;background:#fff8ed;clip-path:polygon(0 60%,12% 10%,30% 62%,49% 20%,62% 70%,82% 25%,100% 55%,100% 100%,0 100%)}.character-line{display:grid;grid-template-columns:1fr 1fr 1.45fr;gap:30px;max-width:1080px;margin:50px auto 0;text-align:center}.portrait{height:240px;display:flex;align-items:flex-end;justify-content:center}.portrait img{width:190px;height:auto;max-height:220px;object-fit:contain;image-rendering:pixelated}.portrait img.tall{height:235px;width:auto;max-height:none}.pair .portrait img{width:290px;max-height:220px}.character-line h3{font-size:18px;margin:25px 0 12px}.character-line h3 small{font-size:12px}.character-line p{font-size:12px;line-height:2}.section-foot{text-align:center;font-size:12px;margin:54px 0 0;letter-spacing:.16em}.games{background:#b2f799}.game-grid{max-width:1100px;margin:45px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}.game{background:#fff8ed;border:3px solid var(--ink);border-radius:26px 32px 22px 31px;padding:34px 26px;display:flex;gap:25px;align-items:center}.game h3{font-size:18px;margin:8px 0 22px}.mini{font-size:11px}.button{display:inline-flex;gap:25px;justify-content:center;align-items:center;border:3px solid var(--ink);background:var(--cream);border-radius:20px 23px 18px 24px;padding:10px 24px;box-shadow:0 4px 0 var(--ink);font-size:13px;font-weight:bold;transition:transform .15s,box-shadow .15s}.button:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}.reversi{min-width:92px;height:92px;background:#77ca77;border:3px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px;transform:rotate(-6deg)}.reversi i{border-radius:50%;background:var(--ink)}.reversi i:nth-child(2),.reversi i:nth-child(3){background:var(--cream)}.blocks{position:relative;min-width:92px;height:92px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:start;padding-top:8px;transform:rotate(4deg)}.blocks i{height:19px;background:#ffc68c;border:2px solid var(--ink);border-radius:3px}.blocks i:nth-child(2n){background:#96e3ff}.blocks b{position:absolute;bottom:0;left:23px;background:var(--ink);width:50px;height:9px;border-radius:4px}.blocks:after{content:'';position:absolute;bottom:25px;right:24px;width:10px;height:10px;border-radius:50%;background:var(--ink)}.special{background:var(--cream);position:relative;overflow:hidden;padding-bottom:145px}.special-note{position:relative;text-align:center;max-width:600px;margin:40px auto 0;padding:25px 20px 40px;border:2px dashed #4a214155;border-radius:48% 46% 18% 20% / 15% 19% 10% 12%;z-index:2}.special-note>span{font-size:37px;color:#ce8a4b}.special-note h3{font-size:20px}.special-note p{font-size:13px;line-height:1.9}.special-note small{font-size:10px;opacity:.7}.shore{position:absolute;inset:auto -2% -2px;height:80px;background:var(--sea);clip-path:polygon(0 55%,17% 29%,35% 48%,57% 17%,75% 50%,90% 30%,100% 45%,100% 100%,0 100%)}.gallery{background:var(--sea);padding-top:70px}.book{max-width:1000px;margin:45px auto 0;background:#fff8ed;display:grid;grid-template-columns:1.2fr 1fr;padding:22px;border-radius:5px 18px 18px 5px;box-shadow:0 9px 0 #829c79,0 13px 0 #4a214133}.book figure{margin:0;display:flex;align-items:center;padding-right:20px;border-right:1px solid #4a214133}.book img{width:100%;height:auto;image-rendering:pixelated}.book-copy{padding:32px 20px;text-align:center;display:flex;flex-direction:column;justify-content:center}.book-copy>span{font-size:9px;letter-spacing:.18em}.book-copy>p{font-size:20px;line-height:1.9;margin:30px 0}.book-copy>small{font-size:10px}.book-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px}.book-controls button{width:43px;height:43px;border:2px solid var(--ink);background:var(--cream);border-radius:50%}.book-controls output{font-size:11px;letter-spacing:.12em}.sns{background:#b3ffff;text-align:center;position:relative;overflow:hidden;padding-bottom:45px}.sns>.button{position:relative;z-index:3;margin-top:12px}.sns-cloud{width:170px;height:55px;right:6%;top:65px}.farewell{width:250px;height:auto;margin:55px auto 25px;image-rendering:pixelated;border-radius:48% 50% 40% 45%}footer{text-align:center;padding:24px;background:#fff8ed;font-size:12px}footer span{font-size:10px;opacity:.65}.mode-status{position:fixed;bottom:14px;left:14px;z-index:30;background:var(--ink);color:var(--cream);padding:8px 13px;border-radius:20px;font-size:10px;box-shadow:0 2px 8px #4a214120;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Stop by default. Only visible scenes animate after explicit start. */
.motion .hero.in-view .walker-track{animation:stroll 12s ease-in-out infinite}.motion .hero.in-view .walker{animation:steps .84s steps(4) infinite}.motion .hero.in-view .cloud-a{animation:cloud-drift 18s ease-in-out infinite alternate}.motion .intro.in-view .intro-friends{animation:follow 10s ease-in-out infinite}body.paused *{animation-play-state:paused!important}@keyframes steps{to{background-position:-592px 0}}@keyframes stroll{0%,14%{transform:translateX(-55px)}46%,65%{transform:translateX(55px)}92%,100%{transform:translateX(-55px)}}@keyframes cloud-drift{to{transform:translateX(28px)}}@keyframes follow{0%,20%{transform:translateX(0) rotate(-5deg)}55%,78%{transform:translateX(-30px) rotate(0)}100%{transform:translateX(0) rotate(-5deg)}}
@media(max-width:760px){header{padding:0 5%;height:60px}.brand{font-size:16px}nav{gap:14px;font-size:11px}nav a[href="#characters"],nav a[href="#gallery"]{display:none}.preview{padding:0 4%;font-size:10px}.preview small{display:none}.preview button{font-size:11px}html{scroll-padding-top:60px}.hero{min-height:565px;height:calc(88svh - 60px);max-height:680px}.hero-copy{top:10%}h1{font-size:66px}.eyebrow{font-size:11px}.tagline{font-size:14px}.cloud-a{width:118px;height:42px;left:-25px;top:30%}.cloud-b{width:90px;height:34px;right:-10px;top:19%}.cloud-c{left:12%;top:51%;width:70px;height:25px}.hero-ground{inset:67% 0 0}.hill{bottom:24%;height:17%}.hero-path{left:0;width:100%;height:34%}.walker-track{bottom:10%}.flowers{font-size:20px;letter-spacing:5px}.grass{font-size:27px}.intro{padding:70px 7% 145px}.intro-wrap{grid-template-columns:1fr;gap:35px}.chapter h2{font-size:27px}.chapter p{font-size:13px}.intro-path{width:50%;opacity:.65}.intro-picture{max-width:360px;width:88%;margin-left:auto}.intro-friends{width:100px;right:16%;bottom:8px}.section-pad{padding:72px 6%}.section-heading h2{font-size:25px}.section-heading p{font-size:12px}.character-line{grid-template-columns:1fr 1fr;gap:30px 12px;margin-top:30px}.character-line .pair{grid-column:1/-1}.portrait{height:185px}.portrait img{width:150px;max-height:170px}.portrait img.tall{height:185px}.pair .portrait{height:195px}.pair .portrait img{width:260px;max-height:195px}.character-line h3{font-size:16px;margin-top:20px}.character-line p{font-size:11px}.game-grid{grid-template-columns:1fr}.game{gap:24px;padding:26px 22px}.game h3{font-size:16px}.game .mini{font-size:10px}.special{padding-bottom:120px}.special-note p{font-size:12px}.book{grid-template-columns:1fr;padding:15px}.book figure{padding:0;border:0}.book-copy{padding:25px 10px 12px}.book-copy>p{font-size:17px;margin:20px 0}.book-controls{margin-top:22px}.sns-cloud{right:-70px}.farewell{width:220px}footer span{display:block;margin-top:8px}.mode-status{bottom:9px;left:9px;font-size:9px;padding:7px 10px}@keyframes stroll{0%,14%{transform:translateX(-30px)}46%,65%{transform:translateX(30px)}92%,100%{transform:translateX(-30px)}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion .scene *{animation:none!important}.button{transition:none}}

/* v2: big ensemble cover, forest walk in the middle, continuous coast. */
.hero{height:800px;min-height:680px;max-height:900px;background:#b3ffff url('assets/coastal-hero-v2.webp') center bottom/100% auto no-repeat;isolation:isolate}
.hero-copy{top:5%;z-index:3;pointer-events:none}.hero .eyebrow{font-size:13px;letter-spacing:.3em;margin-bottom:12px}.hero h1{font-size:clamp(88px,11vw,155px);line-height:1;letter-spacing:.04em;text-shadow:3px 3px 0 #fff0de}.hero h1 span{font-size:.64em;letter-spacing:.18em;margin-top:12px}.hero .tagline{font-size:16px;margin-top:22px;letter-spacing:.16em}
.hero-cast{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:min(870px,82%);height:300px;display:flex;align-items:flex-end;justify-content:center;gap:0;z-index:4}.hero-cast img{height:auto;object-fit:contain;image-rendering:pixelated;flex-shrink:0}.hero-cast .cast-stasta{width:21%;max-height:300px;margin-right:1%;transform:rotate(-6deg);margin-bottom:15px}.hero-cast .cast-pote{width:33%;max-height:285px;margin-left:-1%;margin-right:-1%;z-index:2}.hero-cast .cast-green{width:43%;max-height:260px;transform:rotate(3deg);margin-bottom:4px}.hero .scroll-note{bottom:23px;background:#fff0def2;border:2px solid #4a2141;border-radius:19px 24px 18px 23px;padding:8px 17px;white-space:normal;text-align:center;width:max-content;max-width:90%}
.intro{padding-top:105px;background:#deffd2}.intro::before{content:'';position:absolute;top:-1px;left:0;right:0;height:45px;background:#fff0de;clip-path:polygon(30% 0,42% 0,40% 40%,35% 100%,24% 100%,29% 40%)}.intro-path{left:0;width:37%;clip-path:polygon(65% 0,94% 0,86% 23%,63% 47%,58% 70%,73% 100%,24% 100%,10% 65%,27% 39%,61% 16%)}.intro-grass{position:absolute;right:12%;bottom:60px;color:#75be76;font-size:30px;letter-spacing:25px}.characters{background:#deffd2;padding-top:75px;padding-bottom:75px}.characters::before{display:none}.characters .section-foot{margin-bottom:0}.portrait{height:245px}.character-line{margin-top:40px}
.games{background:#deffd2;padding-top:375px;padding-bottom:125px;position:relative;overflow:visible;isolation:isolate}.games>.section-heading,.games>.game-grid{position:relative;z-index:3}.games:before{content:'';position:absolute;inset:140px 0 0;background:#b2f799;clip-path:polygon(0 18%,12% 12%,26% 20%,42% 9%,56% 17%,74% 6%,85% 14%,100% 10%,100% 100%,0 100%);z-index:-2}.games:after{content:'';position:absolute;inset:190px 0 -1px;background:#fff0de;clip-path:polygon(35% 0,47% 0,61% 18%,80% 35%,88% 65%,82% 100%,69% 100%,75% 68%,67% 43%,48% 27%);z-index:-1}
.midtrail{position:absolute;inset:0 0 auto;height:350px;overflow:hidden;z-index:1}.trail-path{position:absolute;left:0;right:0;top:15%;height:85%;background:#fff0de;clip-path:polygon(0 10%,15% 0,36% 12%,58% 40%,80% 60%,100% 45%,100% 77%,82% 87%,62% 66%,35% 40%,15% 27%,0 40%)}.trail-caption{position:absolute;top:5%;left:51%;font-size:12px;letter-spacing:.1em;line-height:2;color:#4a2141}.midtrail .walker-track{left:calc(44% - 74px);bottom:21%;width:148px}.midtrail .walker{width:148px;height:175px;background-size:592px 175px}.trail-friends{position:absolute;width:135px;height:auto;left:15%;top:23%;transform:rotate(-3deg);z-index:3;image-rendering:pixelated}.trail-tree{position:absolute;width:150px;height:175px;z-index:2;top:25px;background:#40c641;border-bottom:12px solid #4a2141;clip-path:polygon(0 13%,18% 4%,40% 8%,53% 0,75% 12%,83% 28%,100% 37%,91% 60%,72% 69%,57% 68%,58% 100%,44% 100%,41% 69%,18% 67%,4% 49%)}.trail-tree-left{left:-35px;transform:rotate(-9deg)}.trail-tree-right{right:-30px;top:115px;width:185px;transform:rotate(8deg)}
.special{padding-top:85px;padding-bottom:150px;overflow:visible;isolation:isolate;background:#fff0de}.special:before{content:'';position:absolute;top:-78px;left:0;right:0;height:80px;background:#fff0de;clip-path:polygon(0 68%,8% 55%,17% 65%,27% 24%,37% 40%,47% 10%,58% 28%,69% 18%,80% 5%,90% 21%,100% 0,100% 100%,0 100%);z-index:-1}.special .section-heading,.special-note{position:relative;z-index:2}.coast-path{position:absolute;inset:-1px 0 0;background:#fff8ed;clip-path:polygon(69% 0,82% 0,86% 22%,70% 49%,48% 75%,36% 100%,14% 100%,27% 74%,50% 49%,66% 21%);z-index:-1}.coast-grass{position:absolute;top:-13px;left:0;width:36%;height:78%;background:#b2f799;clip-path:polygon(0 0,90% 0,78% 16%,60% 30%,72% 45%,52% 62%,28% 78%,16% 100%,0 100%);z-index:-1}.special-note{background:#fff8ede8;border:2px dashed #4a214155;max-width:580px}.shore{height:100px;z-index:0;pointer-events:none}.gallery{position:relative}.gallery:before{content:'';position:absolute;top:10px;left:4%;width:85px;height:10px;background:#e5ffff;clip-path:polygon(0 40%,24% 0,53% 60%,80% 20%,100% 60%,97% 100%,55% 100%,22% 50%,4% 100%)}.sns{background:#96e3ff}.sns:before{content:'';position:absolute;inset:0 0 auto;height:60px;background:#b3ffff;clip-path:polygon(0 25%,12% 42%,29% 15%,45% 50%,64% 20%,83% 38%,100% 10%,100% 100%,0 100%)}.sns .section-heading{margin-top:20px}.farewell{border-radius:43% 48% 40% 45%}
.motion .games.in-view .walker-track{animation:middle-stroll 14s ease-in-out infinite}.motion .games.in-view .walker{animation:steps .84s steps(4) infinite}.motion .games.in-view .trail-friends{animation:middle-follow 14s ease-in-out infinite}@keyframes middle-stroll{0%,14%{transform:translate(-30px,-14px)}48%,68%{transform:translate(110px,25px)}94%,100%{transform:translate(-30px,-14px)}}@keyframes middle-follow{0%,25%{transform:translate(0,0) rotate(-3deg)}60%,78%{transform:translate(65px,12px) rotate(0)}100%{transform:translate(0,0) rotate(-3deg)}}
@media(min-width:1200px){.hero{height:min(850px,calc(100svh - 68px));min-height:720px}.hero-cast{bottom:9%;height:310px}.hero-copy{top:4%}.hero h1{font-size:146px}.hero h1 span{font-size:.63em}}
@media(max-width:760px){.hero{height:690px;min-height:630px;max-height:800px;background-size:auto 70%;background-position:44% bottom}.hero-copy{top:7%}.hero h1{font-size:clamp(65px,18.5vw,112px);letter-spacing:.01em}.hero h1 span{font-size:.73em;letter-spacing:.12em}.hero .eyebrow{font-size:11px}.hero .tagline{font-size:13px;margin-top:20px}.hero-cast{width:96%;height:230px;bottom:13%}.hero-cast .cast-stasta{width:23%;max-height:210px;margin-right:0;margin-bottom:18px}.hero-cast .cast-pote{width:34%;max-height:210px}.hero-cast .cast-green{width:44%;max-height:175px}.hero .scroll-note{bottom:25px;font-size:10px;padding:8px 12px}.intro{padding-top:75px;padding-bottom:100px}.intro-grass{bottom:20px;font-size:24px}.characters{padding-bottom:45px}.games{padding-top:345px;padding-bottom:100px}.midtrail{height:320px}.midtrail .walker-track{left:calc(47% - 62px);width:124px;bottom:21%}.midtrail .walker{width:124px;height:146px;background-size:496px 146px;animation-name:mobile-steps!important}.trail-friends{width:90px;left:5%;top:31%}.trail-caption{font-size:10px;top:4%;left:40%}.trail-tree-left{left:-48px;width:110px;height:140px}.trail-tree-right{right:-63px;width:145px;top:100px}.games:before{top:140px}.games:after{top:200px}.special{padding-top:65px;padding-bottom:125px}.special:before{height:65px;top:-63px}.coast-grass{width:24%}.special-note{padding:25px 14px 35px}.special-note p{font-size:11px}.sns .section-heading{margin-top:10px}.motion .games.in-view .walker-track{animation-name:middle-stroll-mobile}@keyframes mobile-steps{to{background-position:-496px 0}}@keyframes middle-stroll-mobile{0%,14%{transform:translate(-10px,-7px)}48%,68%{transform:translate(45px,15px)}94%,100%{transform:translate(-10px,-7px)}}}
@media(prefers-reduced-motion:reduce){.motion .games.in-view *{animation:none!important}}
/* Keep the cover one continuous sky; size by the visible silhouettes. */
.hero{background-size:cover;background-position:center bottom}.hero h1{font-size:clamp(88px,14vw,155px)}.hero-cast{width:min(920px,94%)}.hero-cast .cast-stasta{width:42%;max-height:330px;margin-right:-12%;margin-bottom:0;transform:rotate(-5deg)}.hero-cast .cast-pote{width:33%;max-height:300px;margin-right:-7%;margin-left:0}.hero-cast .cast-green{width:44%;max-height:285px}
@media(max-width:760px){.hero{background-size:auto 100%;background-position:45% bottom}.hero h1{font-size:clamp(65px,18.5vw,112px)}.hero-cast{width:100%;bottom:15%}.hero-cast .cast-stasta{width:42%;max-height:220px;margin-right:-12%;margin-bottom:0}.hero-cast .cast-pote{width:33%;max-height:210px;margin-right:-7%}.hero-cast .cast-green{width:44%;max-height:190px}}
main{overflow-x:clip}.special .shore{left:0;right:0}
/* Round land edges and grove silhouettes rather than straight section cuts. */
.games:before{clip-path:none;border-radius:48% 52% 0 0 / 9% 12% 0 0}.special:before{clip-path:none;top:-76px;height:100px;border-radius:56% 44% 0 0 / 42% 59% 0 0}.coast-grass{clip-path:polygon(0 0,88% 0,82% 8%,74% 14%,67% 21%,62% 30%,65% 38%,67% 45%,60% 54%,51% 63%,38% 72%,26% 82%,19% 91%,16% 100%,0 100%)}
.trail-tree{height:105px;clip-path:none;border:0;border-radius:46% 56% 42% 51%;background:#40c641}.trail-tree:after{content:'';position:absolute;left:44%;bottom:-48px;width:17px;height:55px;background:#4a2141;z-index:-1;transform:rotate(3deg)}.trail-tree:before{content:'';position:absolute;top:35%;left:24%;width:42px;height:17px;border-bottom:7px solid #159e48;border-radius:0 0 55% 45%;transform:rotate(-13deg)}.trail-tree-right{height:120px}
.characters{isolation:isolate}.characters:after{content:'';position:absolute;inset:0 auto 0 0;width:27%;background:#fff0de;clip-path:polygon(35% 0,100% 0,88% 16%,57% 32%,46% 49%,50% 69%,76% 85%,94% 100%,39% 100%,23% 84%,11% 65%,9% 45%,20% 25%);z-index:-1}.characters .section-heading,.character-line,.section-foot{position:relative;z-index:1}.characters .section-heading{background:#deffd2d9;border-radius:45%;width:fit-content;max-width:90%;margin:auto;padding:5px 16px}
@media(max-width:760px){.trail-tree-left{height:85px}.trail-tree-right{height:100px}.characters:after{width:19%;opacity:.85}.special:before{top:-60px;height:85px}}

/* One coordinate system joins the cover's vegetation and both road edges. */
main{--cover-height:800px;--landscape-width:max(100vw, calc(var(--cover-height) * 1672 / 941))}
.hero{height:var(--cover-height);min-height:0;max-height:none;background-size:var(--landscape-width) var(--cover-height);background-position:center bottom}
.intro{background:#d9fcce;padding-top:190px;min-height:720px}
.intro::before{display:none}
.intro-landscape{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:var(--landscape-width);max-width:none;height:calc(100% + 2px);pointer-events:none}
@media(min-width:1200px){main{--cover-height:clamp(720px,calc(100svh - 68px),850px)}}
@media(max-width:760px){main{--cover-height:690px}.intro{padding-top:220px;min-height:850px}.intro-landscape{height:calc(100% + 2px)}}
/* Keep both foreground groves visible, including on narrow screens. */
main{--landscape-width:100vw}
@media(max-width:760px){.hero{background-size:100% 72%;background-color:#a0f8fa}.intro{padding-top:160px}}

@media(max-width:760px){.grove-extension{transform:scaleY(.55)}}

/* One image follows alternating edge flights; only transform and opacity animate. */
.hero-ufo{position:absolute;z-index:2;top:0;left:0;width:clamp(90px,12vw,165px);height:auto;image-rendering:pixelated;pointer-events:none;transform:translate(85vw,70px);}
.hero.ufo-flight-started .hero-ufo{animation:ufo-edge-flight 16s linear infinite;animation-play-state:paused}
.ufo-motion .hero.ufo-flight-visible .hero-ufo{animation-play-state:running}
@keyframes ufo-edge-flight{
  0%{transform:translate(76vw,-150px);opacity:0}
  3%{transform:translate(78vw,-90px);opacity:1}
  12%{transform:translate(83vw,calc(var(--cover-height) * .09));opacity:1}
  25%{transform:translate(94vw,calc(var(--cover-height) * .23));opacity:1}
  36%{transform:translate(calc(100vw + 20px),calc(var(--cover-height) * .30));opacity:1}
  39%,49%{transform:translate(calc(100vw + 20px),calc(var(--cover-height) * .32));opacity:0}
  50%{transform:translate(-130px,calc(var(--cover-height) * .16)) scale(.68,.68);opacity:0}
  53%{transform:translate(-35px,calc(var(--cover-height) * .13)) scale(.68,.68);opacity:1}
  58%{transform:translate(6vw,calc(var(--cover-height) * .07)) scale(.68,.68);opacity:1}
  63%{transform:translate(15vw,-30px) scale(.68,.68);opacity:1}
  66%{transform:translate(23vw,-110px) scale(.68,.68);opacity:1}
  68%,100%{transform:translate(23vw,-110px) scale(.68,.68);opacity:0}
}
@media(max-width:760px){.hero-ufo{width:76px}}
@media(prefers-reduced-motion:reduce){.ufo-motion .hero .hero-ufo,.hero-ufo{animation:none!important;opacity:1;transform:translate(78vw,80px)}}

/* Approved illustrated cover: preserve the whole composition at every width. */
main{--cover-height:calc(100vw * 1086 / 1448)}
.hero{height:auto;min-height:0;max-height:none;background:none;aspect-ratio:1448 / 1086}
.hero-art{position:relative;width:100%;height:auto;max-width:none;display:block}
.hero #title.sr-only{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
.intro{background:#ccfbb2}

/* Viewport-sized cover; only the extended side scenery is cropped. */
main{--cover-height:min(760px,calc(100svh - 68px),calc(100vw * .70));--landscape-width:max(100vw,calc(var(--cover-height) * 3))}
.hero{height:var(--cover-height);aspect-ratio:auto;background:#a0f8fa}
.hero-art{width:100%;height:100%;object-fit:cover;object-position:center center}
@media(max-width:760px){main{--cover-height:min(calc(100svh - 60px),calc(100vw * .68))}}

/* Use a normal image so the wordmark also works when opening the HTML directly. */
.brand{display:flex;align-items:center;min-height:44px}
.brand-logo{display:block;width:132px;height:40px;object-fit:contain}
@media(max-width:760px){.brand-logo{width:112px;height:34px}}

@font-face{font-family:"YomogiNav";src:url('assets/yomogi-page.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
header nav{font-family:"YomogiNav","Hiragino Maru Gothic ProN",sans-serif;font-size:17px;font-weight:400;letter-spacing:.03em;-webkit-text-stroke:.35px currentColor}
@media(max-width:760px){header nav{font-size:14px;gap:13px}}

/* Use the same handwritten face for the page's live text and categories. */
:root{font-family:"YomogiNav","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}
.chapter h2,.section-heading h2,.character-line h3,.game h3,.special-note h3{font-weight:400;-webkit-text-stroke:.4px currentColor}
.chapter p,.section-heading p{font-size:16px;line-height:2.15}
.character-line p,.special-note p{font-size:15px;line-height:2}
.chapter>span,.section-heading>span{font-size:12px;font-weight:400}
.book-copy>p{line-height:2}
@media(max-width:760px){.chapter p,.section-heading p,.character-line p,.special-note p{font-size:14px}.chapter>span,.section-heading>span{font-size:11px}}

/* Intro and characters share one uninterrupted meadow and one continuous path. */
.meadow-scenes{position:relative;isolation:isolate;background:#ccfbb2}
.meadow-landscape{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:var(--landscape-width);max-width:none;height:calc(100% + 2px);pointer-events:none;z-index:-1}
.meadow-scenes .intro,.meadow-scenes .characters{background:transparent;isolation:auto}
.meadow-scenes .characters::after{display:none}
.meadow-scenes .characters .section-heading{background:transparent}
@media(max-width:760px){.meadow-scenes .characters .section-heading{width:100%;max-width:100%;padding:5px 0}}

/* Match the cover's actual ground colors and softly remove its raster edge. */
:root{--path-sand:#fdf0d0;--meadow-grass:#c3f8b3}
.meadow-scenes{background:var(--meadow-grass)}
.path,.trail-path,.games::after,.coast-path{background:var(--path-sand)}

/* Separate character follows the panorama's coordinates at every viewport. */
.hero-character-plane{position:absolute;z-index:1;top:0;left:50%;transform:translateX(-50%);width:var(--landscape-width);height:100%;pointer-events:none}
.hero-potepote{left:38.08%;top:29%;width:12.2%}
.hero-stasta{left:51.25%;top:45%;width:10.9%}
.hero-character{position:absolute;--entry-delay:.08s;--float-duration:4.6s;transform-origin:50% 60%}
.hero-stasta{--entry-delay:.36s;--float-duration:5.2s}
.hero-character img{width:100%;height:auto;max-width:none}
.hero-characters-loading .hero-character{transform:translateY(10px) scale(.666667);opacity:1}
.hero-character-started{animation:hero-character-pop .82s cubic-bezier(.22,.7,.3,1) var(--entry-delay) both;animation-play-state:paused}
.hero-character-started img{animation:hero-character-float var(--float-duration) ease-in-out calc(var(--entry-delay) + .82s) infinite;animation-play-state:paused}
.ufo-motion .hero-character-visible,.ufo-motion .hero-character-visible img{animation-play-state:running}
.ufo-motion .hero-characters-ready .hero-character:not(.hero-character-started){opacity:0}
body.paused .hero .hero-character,body.paused .hero .hero-character img{animation-play-state:paused}
@keyframes hero-character-pop{
  0%{transform:translateY(10px) scale(.666667);opacity:1}
  72%{transform:translateY(-3px) scale(1.045);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes hero-character-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@media(max-width:760px){@keyframes hero-character-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}}
@media(prefers-reduced-motion:reduce){
 .hero-characters-loading .hero-character{transform:none;opacity:1}
 .hero-characters-ready .hero-character,.hero-characters-ready .hero-character img{animation:none!important;transform:none;opacity:1!important}
}

/* On phones the lettering sits above the flying UFO, with transparent gaps. */
.hero-art-source{display:contents}
.hero-title-plane{display:block;position:absolute;z-index:1;top:0;left:50%;transform:translateX(-50%);width:var(--landscape-width);height:100%;pointer-events:none}
.hero-title-cutout{position:absolute;left:52.99%;top:calc(1.795% + 10px);width:19.38%;height:41.71%;max-width:none;image-rendering:pixelated;transform:scale(1.15);transform-origin:50% 0}
.hero-title-cutout.rubber-text{pointer-events:auto}
.hero-title-cutout>img{width:100%;height:100%;max-width:none;image-rendering:pixelated}
@media(max-width:760px){.hero-character-plane,.hero-title-plane{left:42%}.hero-title-plane{z-index:3}.hero-title-cutout{margin-left:-12px}}

/* Restored friends are independent sprites; only their old footprints are repaired. */
.hero-ground-repair-plane,.hero-friends-plane{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--landscape-width);max-width:none;height:100%;pointer-events:none}
.hero-ground-repair-plane{z-index:0}
.hero-friends-plane{z-index:1}
.hero-ground-friend{position:absolute;max-width:none;image-rendering:pixelated}

/* The meadow continues into a gentle descending bend, with no section stripe. */
.games{background:var(--meadow-grass);padding-top:330px;overflow:hidden}
.games::before,.games::after{display:none}
.games-landscape{position:absolute;inset:-1px 0 auto;width:100%;height:calc(100% + 2px);pointer-events:none;z-index:-1}
@media(max-width:760px){.games{padding-top:230px}}

/* The sketch's wooden sign and two illustrated entrances sit beside the road. */
.games.game-corner-scene{padding:0 6% 70px}
.game-corner{position:relative;z-index:3;max-width:1120px;height:820px;margin:0 auto}
.game-corner-sign{position:absolute;left:3%;top:65px;width:clamp(230px,27vw,330px)}
.game-corner-sign img{width:100%;height:auto;image-rendering:pixelated}
.game-prop{position:absolute;display:block;text-align:center;cursor:pointer;border-radius:24px;touch-action:manipulation}
.game-prop img{width:100%;height:auto;image-rendering:pixelated}
.game-reversi>img,.game-tv-picture{transition:transform .2s ease}
.game-reversi{left:1%;top:440px;width:clamp(250px,28vw,330px)}
.game-reversi>img{transform:scaleX(-1)}
.game-television{left:40%;top:235px;width:clamp(200px,22vw,250px)}
.game-prop-name{position:relative;display:grid;place-items:center;left:50%;transform:translateX(-50%);margin-top:12px;font-size:25px;line-height:1.5;isolation:isolate}
.game-label-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.game-label-shape path{fill:var(--cream);stroke:var(--ink);stroke-width:6px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;vector-effect:non-scaling-stroke}
.game-label-thought .game-label-shape path:not(:last-child){stroke-width:4px}
.game-label-text{display:block;line-height:1.4;white-space:nowrap;-webkit-text-stroke:.65px currentColor;paint-order:stroke fill}
.game-label-cloud{width:210px;height:128px;padding:36px 24px 6px}
.game-label-thought{width:268px;height:128px;padding:40px 12px 8px 32px}
.game-tv-picture{position:relative;display:block}
@media(hover:hover){.game-reversi:hover>img{transform:translateY(-5px) scale(-1.035,1.035)}.game-television:hover .game-tv-picture{transform:translateY(-5px) scale(1.035)}}
.game-reversi:active>img{transform:translateY(3px) scale(-.98,.98)}
.game-television:active .game-tv-picture{transform:translateY(3px) scale(.98)}
@media(max-width:760px){
 .games.game-corner-scene{padding:0 6% 60px}
 .game-corner{height:850px}
 .game-corner-sign{left:0;top:45px;width:240px}
 .game-television{left:auto;right:10%;top:245px;width:180px}
 .game-reversi{left:-12px;top:530px;width:220px}
 .game-prop-name{font-size:22px}
 .game-label-cloud{width:184px;height:112px;padding:30px 20px 4px}
 .game-label-thought{width:228px;height:116px;padding:36px 10px 8px 28px}
}
@media(prefers-reduced-motion:reduce){.game-reversi>img,.game-tv-picture{transition:none}}

/* The game meadow opens into a beach, with foam along the shoreline. */
.special{background:#b5eea3;overflow:hidden;padding-bottom:220px}
.special::before{display:none}
.beach-landscape{position:absolute;inset:-1px 0 auto;width:100%;height:calc(100% + 2px);pointer-events:none;z-index:-1}
@media(max-width:760px){.special{padding-bottom:170px}}

/* Keep the sea bluer than the sky, continuing below the shore without a seam. */
:root{--sea:#3aafe3}
.sns,.sns::before{background:var(--sea)}

/* Keep open water clear; the shoreline foam remains. */
.gallery::before{display:none}
.gallery{padding-bottom:210px}
.gallery-mantas{position:absolute;right:clamp(128px,14vw,180px);bottom:-48px;width:clamp(200px,23vw,280px);height:auto;image-rendering:pixelated;pointer-events:none}
.gallery-octopus{position:absolute;left:clamp(28px,6vw,100px);bottom:80px;width:clamp(150px,16vw,210px);height:auto;image-rendering:pixelated;pointer-events:none}
@media(max-width:760px){.gallery{padding-bottom:150px}.gallery-mantas{right:112px;bottom:-28px;width:170px}}
@media(max-width:760px){.gallery-octopus{left:18px;bottom:92px;width:128px}}

/* Small transparent shrubs sit in the open meadow around the character copy. */
.character-shrubs{position:absolute;inset:0;z-index:0;pointer-events:none}
.character-shrub{position:absolute;height:auto;aspect-ratio:500 / 230;image-rendering:pixelated;isolation:isolate}
.character-shrub-art{position:absolute;inset:0;z-index:1;width:100%;height:100%;image-rendering:pixelated}
.shrub-peek-window{position:absolute;z-index:0;left:20%;bottom:52%;width:60%;height:150%;overflow:hidden}
.shrub-peek-bird{position:absolute;left:10%;bottom:0;width:80%;height:auto;image-rendering:pixelated;transform:translateY(112%)}
.character-shrub.is-peeking .shrub-peek-bird{animation:shrub-bird-peek 4.6s cubic-bezier(.4,0,.2,1) both}
@keyframes shrub-bird-peek{0%,100%{transform:translateY(112%)}24%,64%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.character-shrub.is-peeking .shrub-peek-bird{animation:none}}
.character-shrub-left{left:5%;top:13.2%;width:clamp(145px,20vw,250px)}
.character-shrub-right{right:4%;bottom:7%;width:clamp(165px,22vw,270px);transform:scaleX(-1)}
.character-shrub-bottom-left{left:3%;bottom:8px;width:clamp(155px,18vw,230px)}
.meadow-scenes .characters{padding-bottom:120px}
@media(max-width:760px){
 .meadow-scenes .characters{padding-bottom:65px}
 .character-shrub-left{left:-4px;top:42px;width:110px}
 .character-shrub-right{right:3%;bottom:10px;width:132px}
 .character-shrub-bottom-left{left:1%;bottom:6px;width:110px}
}

/* Original crab artwork rests on the right side of the sand. */
.beach-crab-slot{position:absolute;z-index:3;right:12%;top:49%;width:clamp(95px,9vw,140px);pointer-events:none}
.beach-crab-slot img{width:100%;height:auto;image-rendering:pixelated}
@media(max-width:1000px){
 .beach-crab-slot{position:relative;top:auto;right:auto;width:100%;height:62px;margin:8px 0 -15px}
 .beach-crab-slot img{width:76px;margin-left:auto;margin-right:3%}
}

/* Unique forest sprites: layout reserves the actual road and the copy's bounds. */
.intro-forest{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro-forest img{position:absolute;height:auto;image-rendering:pixelated;visibility:hidden;max-width:none}

/* Let the complete crowns and roots bridge scenes, clipping only at screen sides. */
main{overflow-x:clip;overflow-y:visible}
.meadow-scenes .intro{overflow:visible}
/* Lock phone gestures to the page's vertical axis, while keeping pinch zoom. */
@media(max-width:760px){
 html,body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
 body{touch-action:pan-y pinch-zoom}
 img{-webkit-user-drag:none;user-select:none}
}

/* A small static edge filter rounds pixel corners without redrawing the trees. */
.forest-filter-defs{position:absolute;overflow:hidden;pointer-events:none}
.intro-forest img{filter:url(#forest-soft-pixel-corners)}

/* Tiny static flowers share one small pixel symbol, without image downloads. */
.intro-flowers{position:absolute;inset:0;z-index:0;pointer-events:none}
.flower-defs{position:absolute}
.intro-flower{position:absolute;visibility:hidden;width:24px;height:33px;overflow:visible;shape-rendering:crispEdges}
@media(max-width:760px){.intro-flower{width:16px;height:22px}}

/* A single flight curves back from the left edge and finishes on the tree. */
.intro-bird-flight{--bird-size:150px;position:absolute;z-index:3;left:0;top:0;width:var(--bird-size);height:var(--bird-size);pointer-events:none;offset-anchor:50% 50%;offset-rotate:0deg;offset-distance:0%;visibility:hidden}
.intro-bird-ready .intro-bird-flight{animation:intro-bird-arrive 14s linear both;animation-play-state:paused;visibility:visible}
.intro-bird-wings{width:100%;height:100%;background:url('assets/bird-flap-strip.webp') 0 0/calc(var(--bird-size) * 4) var(--bird-size) no-repeat;image-rendering:pixelated}
.intro-bird-ready .intro-bird-wings{animation:intro-bird-flap .62s steps(4) infinite,intro-bird-turn 14s linear both;animation-play-state:paused}
.intro-bird-ready .intro-bird-flight{animation-delay:1.2s}
.intro-bird-ready .intro-bird-wings{animation-delay:1.2s,1.2s}
.ufo-motion .intro.intro-bird-visible.intro-bird-ready .intro-bird-flight,.ufo-motion .intro.intro-bird-visible.intro-bird-ready .intro-bird-wings{animation-play-state:running}
body.paused .intro-bird-flight,body.paused .intro-bird-wings{animation-play-state:paused!important}
@keyframes intro-bird-flap{to{background-position:calc(var(--bird-size) * -4) 0}}
@keyframes intro-bird-arrive{0%{offset-distance:0%}60%{offset-distance:var(--bird-exit-distance)}74%{offset-distance:var(--bird-return-distance);animation-timing-function:ease-out}100%{offset-distance:100%}}
@keyframes intro-bird-turn{
 0%,60%{transform:scaleX(1) rotate(0deg)}
 66%{transform:scaleX(.4) rotate(-22deg)}
 70%{transform:scaleX(-1) rotate(-15deg)}
 74%,100%{transform:scaleX(-1) rotate(0deg)}
}
.intro-bird-flight.bird-perched .intro-bird-wings{animation:none;background-image:url('assets/bird-perched-right.webp');background-size:85% 85%;background-position:50% 50%;transform:none}
@media(max-width:760px){
 .intro-bird-flight{--bird-size:100px}
 .intro-bird-ready .intro-bird-flight{animation-name:intro-bird-cross;animation-duration:7s;animation-delay:.4s}
 .intro-bird-ready .intro-bird-wings{animation:intro-bird-flap .62s steps(4) .4s infinite;animation-play-state:paused}
 .intro-bird-flight.bird-flown{visibility:hidden}
 .intro-bird-flight.bird-flown .intro-bird-wings{animation:none}
}
@keyframes intro-bird-cross{from{offset-distance:0%}to{offset-distance:100%}}
@media(prefers-reduced-motion:reduce){.intro-bird-flight{animation:none!important;offset-distance:100%;visibility:visible}.intro-bird-wings{animation:none;background-image:url('assets/bird-perched-right.webp');background-size:85% 85%;background-position:50% 50%;transform:none}}

/* Slide the complete cat behind the solid tree; the trunk provides the occlusion. */
.intro-forest>img{z-index:1}
.intro-cat{position:absolute;z-index:0;width:var(--cat-size,104px);aspect-ratio:1.2;pointer-events:none;clip-path:inset(-20% 0 -20% -50%)}
.intro-cat::before{content:"";position:absolute;inset:0;background:url('assets/cat-peek-black-eyes.webp') center/contain no-repeat;image-rendering:pixelated;visibility:hidden;transform:translateX(55%)}
.cat-peek-started .intro-cat::before{animation:intro-cat-peek 1.8s ease-out .65s both;animation-play-state:paused}
@media(max-width:760px){.cat-peek-started .intro-cat::before{animation-delay:0s}}
.ufo-motion .intro.cat-peek-visible.cat-peek-started .intro-cat::before{animation-play-state:running}
body.paused .intro-cat::before{animation-play-state:paused!important}
@keyframes intro-cat-peek{0%{visibility:visible;transform:translateX(55%)}100%{visibility:visible;transform:translateX(-6px)}}
@media(prefers-reduced-motion:reduce){.intro-cat::before{animation:none!important;visibility:visible;transform:none}}

/* Turn at the reference point beside the TV, then rest at the Reversi caption. */
.game-walk-route{--walk-width:112px;--walk-height:calc(var(--walk-width) * 425 / 360);position:absolute;z-index:2;left:0;top:0;width:var(--walk-width);height:var(--walk-height);pointer-events:none;visibility:hidden;offset-anchor:50% 96%;offset-rotate:0deg;offset-distance:0%}
.game-walk-start{position:absolute;visibility:hidden;pointer-events:none}
.game-walk-started .game-walk-route{animation:game-road-walk var(--walk-duration,16000ms) linear both;animation-play-state:paused}
.game-walk-sprite{--game-rest-image:url('assets/game-potepote-thinking-v1-web.webp');--game-rest-size:calc(var(--walk-width) * 1.211901364) calc(var(--walk-height) * 1.210531147);--game-rest-position:calc(var(--walk-width) * -.064717465) calc(var(--walk-height) * -.11172105);width:100%;height:100%;background:url('assets/game-potepote-supplied-walk.webp') 0 0/calc(var(--walk-width) * 4) var(--walk-height) no-repeat;image-rendering:pixelated}
.game-walk-started .game-walk-sprite{animation:game-walk-steps .84s steps(4) infinite,game-walk-face-flip 1ms steps(1,start) var(--walk-flip-delay,0ms) both;animation-play-state:paused}
.games.game-walk-visible .game-walk-route{visibility:visible}
.ufo-motion .games.game-walk-visible .game-walk-route,.ufo-motion .games.game-walk-visible .game-walk-sprite{animation-play-state:running}
body.paused .game-walk-route,body.paused .game-walk-sprite{animation-play-state:paused!important}
.game-walk-route.walk-arrived{animation:none;offset-distance:100%;opacity:1}
.game-walk-route.walk-arrived .game-walk-sprite{animation:none;transform:scaleX(1);background-image:var(--game-rest-image);background-size:var(--game-rest-size);background-position:var(--game-rest-position)}
@keyframes game-road-walk{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes game-walk-steps{to{background-position:calc(var(--walk-width) * -4) 0}}
@keyframes game-walk-face-flip{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
@media(max-width:760px){.game-walk-route{--walk-width:76px}}
@media(prefers-reduced-motion:reduce){.game-walk-route,.game-walk-sprite{animation:none!important}.game-walk-route{offset-distance:100%}.game-walk-sprite{transform:scaleX(1);background-image:var(--game-rest-image);background-size:var(--game-rest-size);background-position:var(--game-rest-position)}}

/* Three staggered surprise cards on the sand. */
@font-face{font-family:"YomogiNav";src:url('assets/yomogi-special.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+005A,U+30F3}
.special-card-scene{position:relative;width:100%;max-width:920px;margin:28px auto 0}
.special-links{--special-card-scale:.52;position:relative;z-index:2;width:100%;min-height:510px;display:grid;grid-template-columns:repeat(100,minmax(0,1fr));gap:0}
.special-links>:is(.flip-card,.special-card){zoom:var(--special-card-scale);grid-row:1;align-self:start;transform:rotate(var(--special-card-tilt,0deg))}
.special-links>:first-child{--special-card-scale:.64;--special-card-tilt:-2deg;grid-column:1 / span 31}
.special-links>.flip-card:has(:focus-visible){outline:3px dashed #491f3f;outline-offset:8px}
.special-links>:nth-child(2){--special-card-scale:.4;--special-card-tilt:2deg;grid-column:28 / span 19;align-self:end}
.special-links>:nth-child(3){--special-card-tilt:-1deg;grid-column:76 / span 25;align-self:center}
.special-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff8ed;border:2px solid transparent;padding:36px 28px 40px}
/* Both faces use the same uneven pixel contour and broad plum ring. */
.special-links .flip-card__face{position:relative;border:2px solid transparent;border-radius:0;clip-path:polygon(8% 2.2222%,8% 1.1111%,19% 1.1111%,19% 0.0000%,55% 0.0000%,55% 1.1111%,76% 1.1111%,76% 2.2222%,84% 2.2222%,84% 3.3333%,88% 3.3333%,88% 4.4444%,90% 4.4444%,90% 5.5556%,92% 5.5556%,92% 6.6667%,93% 6.6667%,93% 8.8889%,94% 8.8889%,94% 12.2222%,95% 12.2222%,95% 17.7778%,96% 17.7778%,96% 33.3333%,97% 33.3333%,97% 47.7778%,98% 47.7778%,98% 58.8889%,99% 58.8889%,99% 70.0000%,100% 70.0000%,100% 85.5556%,99% 85.5556%,99% 88.8889%,98% 88.8889%,98% 91.1111%,97% 91.1111%,97% 92.2222%,96% 92.2222%,96% 93.3333%,94% 93.3333%,94% 94.4444%,92% 94.4444%,92% 95.5556%,89% 95.5556%,89% 96.6667%,83% 96.6667%,83% 97.7778%,73% 97.7778%,73% 98.8889%,51% 98.8889%,51% 100.0000%,25% 100.0000%,25% 98.8889%,14% 98.8889%,14% 97.7778%,9% 97.7778%,9% 96.6667%,6% 96.6667%,6% 95.5556%,4% 95.5556%,4% 94.4444%,3% 94.4444%,3% 92.2222%,2% 92.2222%,2% 90.0000%,1% 90.0000%,1% 84.4444%,0% 84.4444%,0% 58.8889%,1% 58.8889%,1% 47.7778%,2% 47.7778%,2% 37.7778%,3% 37.7778%,3% 24.4444%,4% 24.4444%,4% 4.4444%,5% 4.4444%,5% 2.2222%)}
.special-links .flip-card__face::before{content:"";position:absolute;inset:-2px;background:url('assets/special-card-pixel-wobbly-v2.svg?v=1') center / 100% 100% no-repeat;image-rendering:auto;pointer-events:none;z-index:2}
.special-links .flip-card__front{padding:36px 28px 40px}
.special-links .flip-card__return{right:26px;top:26px}
.special-card-art{width:140px;height:110px;object-fit:contain;image-rendering:pixelated;margin:0 0 18px}
.special-card--mischief{justify-content:center;min-height:404px}
.special-card--mischief .special-card-art{width:240px;height:220px;margin:0;object-position:center top;clip-path:polygon(31% 0,100% 0,100% 100%,0 100%,0 34%)}
.special-card.special-card--mischief h3{width:300px;max-width:100%;height:110px;margin:0 0 -20px;line-height:0;transform:rotate(-6deg);position:relative;z-index:1}
.special-mischief-wordmark{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.special-service{font-size:12px;letter-spacing:.16em}
.special-card h3{font-size:24px;font-weight:400;-webkit-text-stroke:.4px currentColor;margin:12px 0 0}
.special-card p{font-size:15px;line-height:2;margin:12px 0 22px}
.special-card .button{margin-top:auto;font-weight:400;font-size:16px;gap:16px}
:is(.special-card--stickers,.special-card--goods){min-height:420px}
:is(.special-card--stickers,.special-card--goods) .special-card-art{width:100%;height:220px;margin-bottom:8px}
:is(.special-card--stickers,.special-card--goods) h3{margin:4px 0 14px}
.special-card:is(.special-card--goods,.special-card--stickers) h3{width:100%;height:62px;line-height:0}
:is(.special-goods-wordmark,.special-stickers-wordmark){width:100%;height:100%;object-fit:cover;image-rendering:auto}
.special .beach-crab-slot{position:absolute;z-index:3;top:44px;right:7%;width:90px;height:auto;margin:0;pointer-events:none}
.special .beach-crab-slot img{width:100%;margin:0}
@media(max-width:760px){
 .special-card-scene{max-width:440px;margin-top:28px}
 .special-links{grid-template-columns:repeat(100,minmax(0,1fr));min-height:0;row-gap:28px}
 .special-links>:first-child{grid-column:1 / span 64;grid-row:1}
 .special-links>:nth-child(2){grid-column:23 / span 40;grid-row:3}
 .special-links>:nth-child(3){grid-column:49 / span 52;grid-row:2}
 .special-card--mischief{min-height:425px}
 .special-card{padding:32px 24px 36px}
 .special-card h3{font-size:22px}
 .special-card p{font-size:14px}
 .special .beach-crab-slot{top:220px;right:3%;width:76px}
 .special{padding-bottom:350px}
}

/* A cloth cover opens onto cream paper; each illustration has its own leaf. */
.picture-book{max-width:960px;margin:42px auto 0}
.book-stage{position:relative;height:clamp(370px,43vw,460px);perspective:1800px;isolation:isolate}
.is-closed .book-stage{transform:translateX(-25%)}
.book-spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#fff8ed;border:2px solid var(--ink);border-radius:5px 16px 16px 5px;box-shadow:0 5px 0 #e7d7b9,0 8px 0 #fff8ed,0 10px 0 #856d71,0 18px 25px #4a214129}
.is-closed .book-spread{visibility:hidden}
/* During a cover turn the left page belongs to the cover's moving back face. */
@media(min-width:761px){
 .is-opening .book-spread,.is-closing .book-spread{clip-path:inset(-40px -50px -50px 50%)}
}
.book-spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:30px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#4a214112 42%,#4a214128 50%,#4a21410c 65%,transparent);pointer-events:none;z-index:1}
.book-art-page{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0;padding:30px 27px 38px;background:#fff8ed;border-radius:4px 0 0 4px}
.book-art-page img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.book-illustration{position:relative;width:100%;max-height:100%;aspect-ratio:4 / 3;overflow:hidden;isolation:isolate}
.book-art-page .book-illustration .book-still{position:absolute;inset:0;width:100%;height:100%}
.book-live-art{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;image-rendering:pixelated;visibility:hidden}
/* Follow the page's visibility: decoded artwork must stay hidden in a closed book. */
.book-art-ready .book-live-art{visibility:inherit}
.book-art-ready .book-still{opacity:0}
.book-live-art .art-motion{animation-play-state:paused;transform-box:view-box}
.ufo-motion .art-playing .book-spread .art-motion{animation-play-state:running}
.art-noodle-left{transform-origin:153px 174px;animation:book-noodle-slurp 3.6s ease-in-out infinite}
.art-noodle-right{transform-origin:346px 205px;animation:book-noodle-slurp 4s ease-in-out -.9s infinite}
.art-noodle-flow{animation:book-noodle-flow .85s linear infinite}
.art-noodle-flow-right{animation-duration:1.05s;animation-delay:-.4s}
.art-rainbow-rider{transform-origin:255px 211px;animation:book-rainbow-slide 5.6s linear 1 both}
.art-astronaut{animation:book-space-float 5.2s ease-in-out infinite}
.art-spaceship{animation:book-saucer-float 7.8s ease-in-out infinite}
.art-star{animation:book-star-twinkle 4.8s ease-in-out infinite}
.art-star-1{animation-delay:1.6s}.art-star-2{animation-delay:3.2s}
.art-wave-left{animation:book-shore-wave 5.8s ease-in-out infinite}
.art-wave-right{animation:book-shore-wave 5.8s ease-in-out 1.7s infinite}
.art-cloud-left{animation:book-cloud-drift 9s ease-in-out infinite}
.art-cloud-right{animation:book-cloud-drift 10.5s ease-in-out 1.5s infinite reverse}
.art-cooking-fire{transform-origin:124px 296px;animation:book-cooking-fire 1.15s ease-in-out infinite}
.art-cooking-text{transform-origin:115px 22px;animation:book-cooking-text 3.4s ease-in-out infinite}
@keyframes book-noodle-slurp{0%,100%{transform:skewX(0) scaleY(1)}18%{transform:skewX(.7deg) scaleY(.985)}38%{transform:skewX(-.6deg) scaleY(.955)}52%{transform:skewX(.4deg) scaleY(.94)}68%{transform:skewX(-.4deg) scaleY(.965)}84%{transform:skewX(.5deg) scaleY(.99)}}
@keyframes book-noodle-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:26}}
/* One trip from the narrow distant end to the wide foreground; a fresh page resets it. */
@keyframes book-rainbow-slide{
 0%{transform:translate(195px,-28px) rotate(8deg) scale(.36)}
 18%{transform:translate(145px,-32px) rotate(6deg) scale(.46)}
 38%{transform:translate(75px,-20px) rotate(-4deg) scale(.6)}
 58%{transform:translate(0,10px) rotate(-14deg) scale(.75)}
 78%{transform:translate(-65px,50px) rotate(-22deg) scale(.9)}
 92%{transform:translate(-112px,95px) rotate(-26deg) scale(.98)}
 100%{transform:translate(-123px,105px) rotate(-27deg) scale(1)}
}
@keyframes book-space-float{0%,100%{transform:translateY(10px)}50%{transform:translateY(-12px)}}
@keyframes book-saucer-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
@keyframes book-star-twinkle{0%,100%{opacity:1}50%{opacity:.38}}
@keyframes book-shore-wave{0%,100%{transform:translate(0,0);opacity:1}50%{transform:translate(3px,-3px);opacity:.6}}
@keyframes book-cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes book-cooking-fire{0%,100%{transform:skewX(-1deg) scaleY(.96)}18%{transform:skewX(2.5deg) scaleY(1.06)}42%{transform:skewX(-2deg) scaleY(.89)}64%{transform:skewX(1.5deg) scaleY(1.08)}82%{transform:skewX(-2.5deg) scaleY(.94)}}
@keyframes book-cooking-text{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.book-live-art .art-motion{animation:none!important}.book-art-ready .book-live-art{visibility:hidden}.book-art-ready .book-still{opacity:1}}
/* The rainbow's revised background also belongs to the still version. */
@media(prefers-reduced-motion:reduce){.book-art-ready[data-art="rainbow"] .book-live-art{visibility:inherit}.book-art-ready[data-art="rainbow"] .book-still{opacity:0}}
.book-folio{position:absolute;bottom:12px;right:20px;font-size:11px;opacity:.6}
.picture-book .book-copy{min-width:0;min-height:0;padding:36px 26px;background:#fff8ed;border-radius:0 14px 14px 0}
.picture-book .book-copy>span{font-size:10px;letter-spacing:.15em}
.picture-book .book-copy>p{font-size:clamp(17px,2.2vw,23px);margin:30px 0;line-height:2}
.picture-book .book-copy>small{font-size:12px}
.book-cover{position:absolute;left:50%;top:0;width:50%;height:100%;padding:0;border:0;background:none;transform-origin:left center;transform-style:preserve-3d;z-index:5;text-align:center;cursor:pointer;touch-action:manipulation}
.book-cover[hidden]{display:none}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid var(--ink);border-radius:5px 16px 16px 5px;overflow:hidden}
.cover-front{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;background:#c6e9b6;box-shadow:inset 9px 0 0 #4a214118,inset 13px 0 0 #ffffff45,0 5px 0 #e7d7b9,0 8px 0 #fff8ed,0 11px 0 var(--ink),0 18px 25px #4a214129}
.cover-front::after{content:"";position:absolute;inset:15px 13px 15px 23px;border:1px solid #4a21414d;border-radius:3px 9px 9px 3px;pointer-events:none}
.cover-series{font-size:10px;letter-spacing:.17em}
.cover-title{font-size:clamp(30px,4vw,42px);line-height:1.3;margin-top:14px;-webkit-text-stroke:.5px currentColor;letter-spacing:.08em}
.cover-front>img{width:130px;height:140px;object-fit:contain;image-rendering:pixelated;margin:15px 0 10px}
.cover-subtitle{font-size:13px}
.cover-open{font-size:16px;margin-top:20px;border-bottom:1px dashed #4a214180;padding-bottom:5px}
.cover-open>span{display:inline-block;margin-left:12px}
.book-cover:hover .cover-open{border-bottom-style:solid}
.cover-back{transform:rotateY(180deg);background:#fff8ed;border-radius:14px 0 0 14px}
/* The left paper edge follows the moving cover, rather than remaining in empty space. */
@media(min-width:761px){.cover-back{box-shadow:0 5px 0 #e7d7b9,0 8px 0 #fff8ed,0 10px 0 #856d71}}
.cover-back .leaf-content{height:100%}
.turn-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:4;pointer-events:none}
.turn-forward{left:50%;transform-origin:left center}
.turn-backward{left:0;transform-origin:right center}
.paper-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff8ed;border:2px solid #76576b;border-radius:0 14px 14px 0;overflow:hidden;box-shadow:0 7px 18px #4a214123}
.paper-back{transform:rotateY(180deg);border-radius:14px 0 0 14px}
.turn-backward .paper-front{border-radius:14px 0 0 14px}
.turn-backward .paper-back{border-radius:0 14px 14px 0}
.paper-face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#4a214119,transparent 18%,transparent 80%,#4a21410c);pointer-events:none}
/* Only the inner sheets flex; the cover keeps its solid, rigid faces. */
.thin-paper{--paper-width:480px;--strip-width:30px}
.paper-hinge{position:absolute;top:0;left:100%;width:var(--strip-width);height:100%;transform-origin:left center;transform-style:preserve-3d}
.paper-hinge.paper-root{left:0}
.turn-backward .paper-hinge{left:-100%;transform-origin:right center}
.turn-backward .paper-hinge.paper-root{left:calc(100% - var(--strip-width))}
.thin-paper .paper-face{left:-.65px;right:-.65px;border:0;border-top:1px solid #76576b44;border-bottom:1px solid #76576b44;border-radius:0;box-shadow:none}
.thin-paper .paper-face::after{background:none}
.thin-paper .paper-face .leaf-content{width:var(--paper-width);transform:translateX(calc(var(--paper-content-x) + .65px))}
.thin-paper .paper-edge>.paper-front{border-radius:0 7px 7px 0}
.thin-paper .paper-edge>.paper-back{border-radius:7px 0 0 7px}
.thin-paper.turn-backward .paper-edge>.paper-front{border-radius:7px 0 0 7px}
.thin-paper.turn-backward .paper-edge>.paper-back{border-radius:0 7px 7px 0}
.paper-turn-shadow{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,#4a21413b,transparent 70%);transform-origin:center;opacity:0}
.leaf-content{display:grid;height:100%;min-height:0}
.leaf-full{grid-template-rows:minmax(0,1fr) 145px}
.leaf-art,.leaf-copy{grid-template-rows:minmax(0,1fr)}
.leaf-content .book-art-page{border:0}
.mobile-under-page{position:absolute;inset:0;z-index:2;background:#fff8ed;border:2px solid var(--ink);border-radius:6px 14px 14px 6px;overflow:hidden;pointer-events:none}
.picture-book .book-controls{display:grid;grid-template-columns:46px 100px 46px;gap:16px 22px;justify-content:center;align-items:center;min-height:100px;margin:28px auto 0;text-align:center}
.picture-book .book-controls[aria-hidden="true"]{visibility:hidden}
.picture-book .book-controls button{width:46px;height:46px;font-size:20px;touch-action:manipulation}
.picture-book .book-controls button:disabled{opacity:.35;cursor:default}
.picture-book .book-controls output{font-size:14px;color:var(--ink)}
.picture-book .book-controls .book-close{grid-column:1/-1;justify-self:center;width:auto;height:auto;border:0;border-bottom:1px dashed var(--ink);border-radius:0;background:transparent;padding:3px 4px;font-size:14px}
@media(max-width:760px){
 .picture-book{max-width:440px;margin-top:32px}
 .book-stage{height:440px;perspective:1400px;overflow:hidden;border-radius:6px 15px 15px 6px;box-shadow:0 5px 0 #e7d7b9,0 8px 0 #fff8ed,0 10px 0 #856d71,0 16px 20px #4a214126}
 .is-closed .book-stage{transform:none;box-shadow:0 5px 0 #e7d7b9,0 8px 0 #fff8ed,0 11px 0 var(--ink),0 16px 20px #4a214126}
 .book-spread{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 145px;box-shadow:none}
 .book-spread::after{display:none}
 .book-art-page{padding:23px 23px 14px;border-radius:0}
 .book-folio{display:none}
 .picture-book .book-copy{padding:10px 16px 20px;border-radius:0}
 .picture-book .book-copy>span{font-size:9px}
 .picture-book .book-copy>p{font-size:17px;line-height:1.8;margin:12px 0}
 .picture-book .book-copy>small{font-size:10px}
 .book-cover{left:0;width:100%}
 .cover-title{font-size:38px}
 .cover-front>img{width:145px;height:155px}
 .cover-front{padding:24px 18px;box-shadow:inset 9px 0 0 #4a214118,inset 13px 0 0 #ffffff45}
 .turn-leaf{left:0;width:100%;transform-origin:left center}
}

footer{padding:24px 6%}
.footer-credit{margin:0}

/* The cloud returns to TOP, sliding up after the hero has left the view. */
.floating-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:25;width:clamp(108px,9vw,142px);display:block;line-height:0;visibility:hidden;pointer-events:none;transform:translateY(calc(100% + 32px + env(safe-area-inset-bottom)));border-radius:16px}
.floating-top img{width:100%;height:auto;image-rendering:pixelated}
.ufo-motion .floating-top{transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
.floating-top.is-visible{visibility:visible;pointer-events:auto;transform:translateY(0)}
.ufo-motion .floating-top.is-visible{transition-delay:0s}
@media(hover:hover){.floating-top.is-visible:hover{transform:translateY(-4px)}}
@media(max-width:760px){.floating-top{width:96px;right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.floating-top{transition:none!important}}

/* Keep the new SNS heading in Yomogi, including its two added kanji. */
@font-face{font-family:"YomogiNav";src:url('assets/yomogi-sns.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+4E16,U+754C}
.sns-x-cta{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;margin-top:18px;border-radius:50%;background:#000;transition:transform .2s ease}
.sns-x-cta img{width:42px;height:43px}
@media(hover:hover){.sns-x-cta:hover{transform:translateY(-3px)}}
@media(max-width:760px){.sns-x-cta{width:76px;height:76px}.sns-x-cta img{width:36px;height:37px}}
@media(prefers-reduced-motion:reduce){.sns-x-cta{transition:none}}