:root{background:#f9f4ff;color:#fff}
.blue-world{background:linear-gradient(#337cd2 0%,#8abdeb 58%,#e8eeff 100%)}
.blue-world:before{display:none}.scenery{position:absolute;inset:0 0 auto;height:100%;pointer-events:none;overflow:hidden;z-index:-1}.scenery img{position:absolute;max-width:none;width:calc(100% + 100px);height:calc(100% + 80px);left:-50px;top:-40px;object-fit:cover;will-change:transform}.scenery .scene-stars{opacity:.3;object-fit:cover;mask-image:linear-gradient(#000,transparent 85%)}.scenery .scene-ribbons{object-fit:cover}.header{position:relative;z-index:4}.hero{min-height:660px;padding-top:45px;padding-bottom:140px}.hero-copy{text-shadow:0 2px 14px #1455a54d}.hero h1{font-size:clamp(3.5rem,6.5vw,6rem);letter-spacing:-3px;text-shadow:0 4px 0 #2966b055,0 12px 32px #12479230}.hero h1 span{color:#fff0b4}.hero .eyebrow{font-size:.875rem;letter-spacing:2px}.intro{font-size:1.15rem}.cta{text-shadow:none;box-shadow:0 5px 0 #5871a844,0 10px 35px #293f7733}.mochi-layer{position:absolute;z-index:1;pointer-events:none;will-change:transform}.mochi-layer img{width:100%;filter:drop-shadow(0 18px 15px #38459a33);animation:float-mochi 7s ease-in-out infinite}.mango{width:180px;top:70px;left:max(4%,calc(50% - 610px));rotate:-12deg}.orange{width:150px;top:70px;right:max(5%,calc(50% - 600px));rotate:11deg}.pink{width:245px;bottom:82px;left:max(2%,calc(50% - 670px));rotate:-9deg}.berry{width:240px;bottom:62px;right:max(2%,calc(50% - 670px));rotate:10deg}.pink img{animation-delay:-2s}.berry img{animation-delay:-4s}.orange img{animation-delay:-1s}.games{position:relative;padding-top:70px;padding-bottom:90px;color:#173c75}.section-heading{text-align:center;justify-content:center;margin-bottom:36px}.section-heading h2{font-size:clamp(1.75rem,3vw,2.4rem)}.section-heading .eyebrow{font-size:.8125rem}.game-grid{position:relative;isolation:isolate;gap:32px}.games-magic{position:absolute;inset:-110px -6% auto;width:112%;height:500px;max-width:none;object-fit:cover;z-index:-1;opacity:.35;pointer-events:none}.game{border:1px solid #fff9;box-shadow:0 16px 50px #3a64a31a;border-radius:28px}.game-art{height:310px}.game-art>img:not(.card-mochi){position:relative;z-index:1;max-width:390px}.game-art .card-mochi{position:absolute;width:110px;right:-18px;bottom:-20px;opacity:.75;rotate:-15deg;max-height:none}.game-label{font-size:.75rem}.sort .game-art{background:radial-gradient(ellipse at 30% 40%,#f8e7ff,#ccbbf4)}.mix .game-art{background:radial-gradient(ellipse at 40% 30%,#fcffd6,#c4edc5)}.game-info{background:#fffc}.footer{color:#243f70}.footer-bottom{border-color:#243f7025;color:#496083}.footer-top p{font-size:1.7rem}.motion-toggle,.replay-intro{font:inherit;color:inherit;background:transparent;border:0;min-height:44px;padding:10px 12px;cursor:pointer}.motion-toggle{border:1px solid #ffffff66;border-radius:30px;font-size:.875rem}.replay-intro{text-decoration:underline;text-underline-offset:4px}.motion-paused .mochi-layer img{animation-play-state:paused}button:focus-visible{outline:3px solid #ffe591;outline-offset:4px}
#intro-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;margin:0;border:0;background:#000;color:white;overflow:hidden;opacity:1;transition:opacity .7s ease,filter .7s ease;z-index:100}#intro-dialog::backdrop{background:#000}#intro-dialog.leaving{opacity:0;filter:blur(6px);pointer-events:none}#intro-video{width:100%;height:100%;object-fit:contain;display:block}.intro-controls{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));right:5%;left:5%;display:flex;justify-content:space-between;gap:16px}.intro-controls button,#intro-play{font:600 1rem 'DM Sans',sans-serif;border:1px solid #ffffff70;border-radius:30px;color:white;padding:12px 22px;min-height:48px;background:#17113bc9;cursor:pointer;backdrop-filter:blur(12px)}#intro-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.intro-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff20}.intro-progress span{display:block;height:100%;width:0;background:#ffcdea;transition:width .2s linear}.intro-open{overflow:hidden}@keyframes float-mochi{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@media(max-width:1100px){.hero{padding-top:105px;padding-bottom:175px}.mango{top:0;width:130px}.orange{top:0;width:115px}.pink{width:175px;bottom:10px;left:3%}.berry{width:175px;bottom:0;right:3%}.scenery{height:100%}.games{padding-top:65px}}
@media(max-width:650px){.header{padding-block:18px}.header nav{gap:4px}.motion-toggle{padding:8px 10px;font-size:.75rem}.brand{gap:6px}.brand>span{font-size:25px}.brand img{width:32px}.header nav a{padding:8px}.hero{min-height:0;padding:112px 18px 208px}.hero h1{font-size:clamp(2.6rem,10.5vw,4rem);letter-spacing:-1.8px}.hero .eyebrow{font-size:.75rem;letter-spacing:1.25px;max-width:25em}.intro{font-size:1rem}.mango{top:10px;left:8%;width:92px}.orange{top:12px;right:9%;width:85px}.pink{width:155px;bottom:25px;left:3%}.berry{width:148px;bottom:15px;right:2%}.scenery{height:100%}.scenery .scene-sky{object-position:center bottom}.scenery .scene-ribbons{object-fit:cover;opacity:.85}.scenery .scene-stars{object-fit:cover;opacity:.2}.games{padding-top:48px;padding-bottom:55px}.games-magic{opacity:.18;top:-40px;height:650px}.section-heading{margin-bottom:28px}.section-heading .eyebrow{font-size:.75rem}.game-art{height:260px}.game-info{padding:24px 20px}.game-grid{gap:25px}.intro-controls{bottom:max(24px,env(safe-area-inset-bottom));right:20px;left:20px}.intro-controls button{font-size:.875rem;padding:12px 18px}.footer-bottom{gap:12px}.replay-intro{padding-left:0}}
@media(prefers-reduced-motion:reduce){.mochi-layer img{animation:none}.scenery img,.mochi-layer{transform:none!important}#intro-dialog{transition:none}}

/* Independent scene boundaries: hero artwork never enters the games section. */
.blue-world{background:#8fbce9}
.intro-world{position:relative;isolation:isolate;overflow:hidden;background:#337cd2}
.scenery{inset:0;height:100%;z-index:-1}
.scenery img{width:calc(100% + 100px);height:calc(100% + 80px);left:-50px;top:-40px;object-fit:cover;object-position:center}
.scenery .scene-stars,.scenery .scene-ribbons{object-fit:cover}
.games{width:100%;margin:0;position:relative;isolation:isolate;overflow:hidden;padding:88px 0 96px;background:linear-gradient(180deg,#91bdea,#adcdf0 65%,#e8eeff);scroll-margin-top:0}

.games-content{position:relative;z-index:1}
.games .section-heading{position:relative;margin-bottom:48px}
.games-decoration{position:absolute;inset:200px 0 0;z-index:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.games .games-magic{position:absolute;inset:auto;top:50%;left:50%;width:max(1400px,118%);height:auto;max-width:none;object-fit:contain;transform:translate(-50%,-50%);opacity:.3;z-index:0}
@media(max-width:650px){
 .games{padding:64px 0 64px}
 .games .section-heading{margin-bottom:36px}
 .games-decoration{inset:190px 0 0}
 .games .games-magic{width:1550px;height:auto;top:50%;opacity:.23}
 
}

/* Let the landscape breathe before the curved transition to games. */
.intro-world{min-height:max(900px,56.28vw)}
.intro-world .hero{min-height:calc(max(900px,56.28vw) - 120px);align-items:start;padding-top:70px;padding-bottom:270px}
.section-wave{position:absolute;display:block;bottom:-1px;left:0;width:100%;height:100px;z-index:3;pointer-events:none}
.games{padding-top:32px}
.games-decoration{top:145px}
@media(min-width:1101px){.pink{bottom:calc(125px + clamp(120px,8vw,180px))}.berry{bottom:calc(105px + clamp(120px,8vw,180px))}}
@media(min-width:651px) and (max-width:1100px){.intro-world .hero{padding-top:115px}.pink{bottom:190px}.berry{bottom:170px}}
@media(max-width:650px){
 .intro-world{min-height:940px}
 .intro-world .hero{min-height:844px;padding-top:112px;padding-bottom:310px}
 .pink{bottom:190px}.berry{bottom:175px}
 .section-wave{height:64px}
 .games{padding-top:28px}
 .games-decoration{top:154px}
}

/* Black loading stage remains visible until the first decoded movie frame. */
#intro-video{opacity:0;background:#000}
#intro-video.frame-ready{opacity:1}
#intro-loader{position:absolute;left:calc(50% - 60px);top:50%;width:120px;height:3px;background:#ffffff25;border-radius:3px;overflow:hidden;pointer-events:none}
#intro-loader[hidden]{display:none}
#intro-loader span{display:block;width:40%;height:100%;background:#fff;border-radius:3px;animation:intro-loading 1.2s ease-in-out infinite}
@keyframes intro-loading{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
.section-wave{width:120%;left:-10%;transform-origin:center bottom;animation:wave-swell 12s ease-in-out infinite}
@keyframes wave-swell{0%,100%{transform:translateX(-2%) scaleY(.85)}50%{transform:translateX(2%) scaleY(1.12)}}
.motion-paused .section-wave{animation-play-state:paused}
@media(max-width:650px){
 .scenery .scene-ribbons{width:calc(100% + 40px);height:calc(100% + 20px);max-width:none;left:-20px;top:auto;bottom:-8px;object-fit:contain;object-position:center bottom;opacity:.95}
}
@media(prefers-reduced-motion:reduce){.section-wave,#intro-loader span{animation:none}}

#intro-sound{width:48px;height:48px;min-width:48px;padding:11px;display:grid;place-items:center;border-radius:50%}
#intro-sound svg{display:block;width:24px;height:24px}
#intro-sound[aria-pressed="true"] .sound-muted,#intro-sound[aria-pressed="false"] .sound-waves{display:none}

#intro-sound.sound-hint{animation:sound-hint-bounce .7s ease-out .4s 1}
@keyframes sound-hint-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}70%{transform:translateY(0)}85%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){#intro-sound.sound-hint{animation:none}}

/* Three games, with comfortable card widths at every screen size. */
.mochidoku .game-art{background:radial-gradient(ellipse at 40% 30%,#fff6d9,#ffcdb8)}
.mochidoku .game-label{color:#714332}
.mochidoku .game-art>img:not(.card-mochi){width:88%;max-width:345px}
@media(min-width:1200px){.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.game-art{padding-inline:20px;height:280px}.game-info{padding-inline:22px}.game-label{left:20px;right:16px;letter-spacing:1px}.game p{font-size:1rem}}
@media(min-width:801px) and (max-width:1199px){.game-grid>.game:last-child{grid-column:1/-1;width:calc((100% - 32px)/2);justify-self:center}}