/* The opening is a living title scene. The paper book begins after it. */
html{scroll-padding-top:88px}
body{background:#17111d;background-image:none}
.site-header{position:absolute;z-index:20;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px max(5vw,24px);color:var(--paper);border-bottom:1px solid #efe6d312}
.site-header .publisher{color:var(--paper);white-space:nowrap}
.site-header nav{display:flex;align-items:center;gap:34px;font-size:14px}
.site-header nav a{text-decoration:none;transition:color .15s}
.site-header nav a:hover{color:#ffc274}
.site-header .nav-playtest{border:1px solid #e3435c70;padding:10px 17px;background:#a81f3f33;color:#fff0d7}
.site-header .nav-playtest:hover{background:#a81f3f}
.site-header a:focus-visible,.opening a:focus-visible,.opening button:focus-visible{outline-color:#f5a63a}
.opening{min-height:640px;min-height:max(640px,100dvh);position:relative;isolation:isolate;overflow:hidden;background:#17111d;color:var(--paper);display:flex;align-items:center;padding:120px max(7.5vw,32px) 135px}
.opening-art,.opening-still,.opening-still img,#opening-canvas{position:absolute;inset:0;width:100%;height:100%}
.opening-art{z-index:-2;pointer-events:none;overflow:hidden}
.opening-still img,#opening-canvas{display:block;object-fit:cover;object-position:center bottom;image-rendering:pixelated}
.opening:after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,#17111d44,transparent 54%),linear-gradient(0deg,#17111d33,transparent 18%)}
.opening-content{max-width:540px;width:49%;padding:18px 0 0;text-shadow:0 2px 0 #17111d}
.opening-status{font:8px/1.8 var(--pixel);letter-spacing:.8px;color:#e5c99d;display:flex;align-items:center;gap:12px;margin:0 0 39px}
.opening-status>span{width:6px;height:6px;background:#f5a63a;box-shadow:2px 2px 0 #a81f3f}
.opening h1{line-height:1;margin-bottom:29px}
.opening .logo-wrap{--logo-scale:3;margin:0;left:0;transform:none;filter:drop-shadow(0 4px 0 #17111d)}
.opening .game-logo{margin:0}
.opening h2{font:16px/1.9 var(--pixel);color:#f6e8d1;letter-spacing:0;margin:0 0 24px}
.opening-description{font-size:18px;line-height:1.7;color:#d4c8cc;max-width:430px;margin:0}
.opening-actions{display:flex;align-items:center;gap:29px;margin:32px 0 0}
.opening .begin-button{margin:0;min-width:266px;min-height:56px;border-color:#f1cb9b88;box-shadow:inset 0 2px 0 #e3435c,3px 4px 0 #0b0711;color:#fff0d7;text-shadow:none}
.opening .begin-button:hover{background:#c32948}
.opening .menu-hand{width:30px;height:16px;left:-40px}
.watch-link{font-size:13px;text-decoration:none;white-space:nowrap;color:#d0c0c7;text-underline-offset:5px}
.watch-link:hover{text-decoration:underline;color:#fff0d7}
.opening-platforms{font-size:13px;line-height:1.8;color:#c5b7c3;margin-top:20px!important;max-width:420px}
.opening-platforms>span{display:block;font-size:12px;color:#9e8e9e;margin-top:2px}
.scroll-invitation{position:absolute;bottom:29px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;min-height:50px;justify-content:center;color:#c8b6b7;font:8px/1.8 var(--pixel);text-decoration:none;white-space:nowrap}
.scroll-invitation:hover{color:#ffcf8a}
.scroll-chevron{width:8px;height:8px;border-bottom:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin:0 0 4px;image-rendering:pixelated}
.opening .motion-toggle{position:absolute;bottom:33px;right:max(5vw,24px);padding:14px 0;color:#b2a0ae;font:11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:44px;z-index:2}
.opening .motion-toggle:hover{color:#ffcf8a}
.book{margin-top:50px;margin-bottom:30px;max-width:1120px}
.book .page:first-of-type{border-top:0;box-shadow:none}
.game-page{padding-top:65px;padding-bottom:56px}
.game-spread{grid-template-columns:minmax(0,1fr) 318px;gap:64px}
.game-copy h2{font-size:24px;line-height:1.7;letter-spacing:-.7px;max-width:480px;margin:19px 0 28px}
.game-copy>p:not(.eyebrow){font-size:17px;line-height:1.8}
.game-facts{margin-top:27px;gap:20px}
.game-join-link{display:inline-block;font-size:14px;margin-top:1px;padding:8px 0}
.footage-plate{width:318px;padding:10px 10px 16px}
.footage-border{position:relative}
.watch-preview{position:absolute;inset:4px;z-index:2;width:calc(100% - 8px);height:calc(100% - 8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border:0;background:linear-gradient(0deg,#17111d9e,#17111d08 78%);color:#fff0d7;font:8px/1.9 var(--pixel);cursor:pointer;text-shadow:0 2px 0 #17111d}
.play-symbol{display:grid;place-items:center;width:72px;height:64px;background:var(--red);border:2px solid #ffd49f;box-shadow:4px 4px 0 #17111d;font:24px/1 sans-serif;padding-left:5px;text-shadow:none;transition:background .15s}
.watch-preview:hover .play-symbol{background:#d33150}
.watch-preview small{display:block;font:8px/1.9 var(--pixel);font-size:7px;margin-top:11px;color:#ddc7ba}
.watch-preview:focus-visible{outline:3px solid #ffd49f;outline-offset:-7px}
.footage-plate video{min-width:0}
.little-company{margin-top:25px;padding-top:24px}
.chapter-heading h2{font-size:24px;line-height:1.7;letter-spacing:-.7px}
.chapter-heading{margin-bottom:34px}
.faq-heading h2{font-size:20px;line-height:1.8}
body.page-hidden .sprite,.offscreen .sprite,.opening-away .opening .sprite{animation-play-state:paused!important}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(min-width:1680px){.opening-content{margin-left:max(0px,calc((100vw - 1600px)/2 - 5vw))}.opening{padding-left:max(7.5vw,32px)}}
@media(max-width:1180px){.opening{padding-left:6vw;padding-right:6vw}.opening-content{width:49%;max-width:470px}.opening .logo-wrap{--logo-scale:2}.opening-description{max-width:350px;font-size:17px}.opening-actions{gap:18px}.opening .begin-button{min-width:235px}.watch-link{font-size:12px}.game-spread{gap:38px;grid-template-columns:minmax(0,1fr) 280px}.footage-plate{width:280px}.game-copy h2{font-size:20px}.chapter-heading h2{font-size:20px}}
@media(max-width:1000px){.opening-content{width:48%}.opening-actions{flex-wrap:wrap;gap:19px}.opening .begin-button{min-width:250px}.book{margin-top:34px}.game-spread{grid-template-columns:minmax(0,1fr) 260px;gap:30px}.footage-plate{width:260px}.game-copy h2{font-size:16px;letter-spacing:0}.chapter-heading h2{font-size:16px;letter-spacing:0}.faq-heading h2{font-size:16px}}
@media(max-width:860px) and (orientation:portrait),(max-aspect-ratio:6/5){
 .site-header{padding:17px 23px;min-height:73px}.site-header nav{gap:24px;font-size:13px}.site-header .publisher span{display:none}.site-header .nav-playtest{padding:8px 13px}
 .opening{display:block;min-height:100vh;min-height:100dvh;padding:120px 22px 360px;text-align:center}.opening-content{max-width:470px;width:100%;padding:0;margin:0 auto}.opening .logo-wrap{--logo-scale:2;left:50%;transform:translateX(-50%)}.opening-status{justify-content:center;margin-bottom:35px;font-size:8px}.opening h1{margin-bottom:22px}.opening h2{font:16px/1.8 var(--pixel);margin-bottom:18px}.opening-description{font-size:16px;line-height:1.65;max-width:350px;margin:auto}.opening-actions{justify-content:center;gap:20px;margin-top:24px}.opening .begin-button{min-width:264px;min-height:52px}.watch-link{display:none}.opening-platforms{font-size:12px;margin:18px auto 0!important;line-height:1.75}.opening-platforms>span{font-size:11px;color:#b2a0ae;margin-top:1px}.opening:after{background:linear-gradient(180deg,#17111d10,transparent 50%)}.scroll-invitation{left:22px;bottom:19px;transform:none;align-items:flex-start;font-size:7px;gap:8px;min-height:44px}.scroll-chevron{margin-left:10px;width:6px;height:6px}.opening .motion-toggle{bottom:22px;right:23px;font-size:10px}.book{margin-top:28px}
}
@media(max-width:760px){.game-spread{grid-template-columns:minmax(0,1fr);gap:34px}.game-copy h2{font-size:20px;line-height:1.8}.game-copy h2 br{display:initial}.game-copy>p:not(.eyebrow){font-size:16px}.game-facts{margin-bottom:20px}.game-join-link{font-size:14px}.footage-plate{width:290px}.chapter-heading h2{font-size:16px;letter-spacing:0}.faq-heading h2{font-size:16px}.book{margin-top:24px}.little-company{margin-top:22px}}
@media(max-width:460px){.site-header{padding:14px 19px;min-height:66px}.site-header .nav-game{display:none}.site-header .nav-playtest{font-size:12px;padding:8px 12px}.site-header .publisher{font-size:8px}.opening{padding:104px 20px 310px;min-height:100dvh}.opening-content{max-width:350px}.opening-status{font-size:7px;letter-spacing:.5px;margin-bottom:33px}.opening h1{margin-bottom:20px}.opening h2{font-size:12px;line-height:1.8;margin-bottom:16px}.opening h2 br{display:none}.opening-description{font-size:15px;line-height:1.6;max-width:310px}.opening-actions{margin-top:22px}.opening .begin-button{min-width:260px;min-height:52px;font-size:8px;gap:20px}.opening-platforms{margin-top:16px!important}.opening .menu-hand{display:none}.opening-platforms>span{display:inline;margin:0 0 0 8px}.scroll-invitation{font-size:6px;left:20px;bottom:18px}.opening .motion-toggle{right:20px;bottom:18px}.game-copy h2{font-size:16px;letter-spacing:0;line-height:2}.game-copy>p:not(.eyebrow){font-size:15px}.footage-plate{width:258px}.game-join-link{font-size:13px}.book .game-page{padding-top:38px}.faq-heading h2{font-size:16px}}
@media(max-width:370px){.opening{padding:94px 17px 295px}.opening .logo-wrap{--logo-scale:1}.opening-status{margin-bottom:24px;font-size:6px}.opening h1{margin-bottom:19px}.opening h2{font-size:8px;line-height:1.9;margin-bottom:14px}.opening-description{font-size:14px;max-width:270px}.opening .begin-button{min-width:240px;font-size:7px}.opening-platforms{font-size:11px}.opening-platforms>span{display:block;font-size:10px;margin:0}.scroll-invitation{font-size:5px;left:17px}.opening .motion-toggle{font-size:9px;right:17px}.footage-plate{width:226px}.faq-heading h2{font-size:12px}}
@media(max-height:800px) and (min-width:861px){.opening{min-height:max(640px,100dvh);padding-top:110px;padding-bottom:100px}.opening-status{margin-bottom:30px}.opening h1{margin-bottom:20px}.opening h2{margin-bottom:16px}.opening-description{font-size:16px}.opening-actions{margin-top:24px}.opening-platforms{margin-top:16px!important}}
@media(max-height:720px) and (max-width:860px){.opening{padding-top:95px;padding-bottom:210px;min-height:100dvh}.opening-status{margin-bottom:26px}.opening h1{margin-bottom:16px}.opening h2{font-size:8px;line-height:1.9;margin-bottom:13px}.opening h2 br{display:none}.opening-description{font-size:14px;max-width:290px}.opening-actions{margin-top:18px}.opening .begin-button{min-height:48px}.opening-platforms{margin-top:12px!important;font-size:11px}.opening-platforms>span{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){.opening{min-height:640px}.opening-content{max-width:390px}.opening .logo-wrap{--logo-scale:2}}
.opening-away .site-header{position:fixed;background:#17111df5;border-bottom-color:#a81f3f66;box-shadow:0 3px 12px #0003;padding-top:12px;padding-bottom:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.motion-paused{scroll-behavior:auto}
/* The invitation stays in reach; gameplay leads the first page on phones. */
.site-header{position:fixed}
.has-scrolled .site-header{background:#17111df5;border-bottom-color:#a81f3f66;box-shadow:0 3px 12px #0003;padding-top:12px;padding-bottom:12px}
.opening .begin-button{font-size:10px;min-width:280px}
.game-spread{grid-template-areas:'heading footage' 'copy footage';grid-template-rows:min-content 1fr;row-gap:0;align-items:start}
.game-heading{grid-area:heading}
.game-heading h2{font-size:24px;line-height:1.7;letter-spacing:-.7px;margin:19px 0 28px}
.game-copy{grid-area:copy}
.footage-plate{grid-area:footage;align-self:center}
@media(max-width:1180px){.game-heading h2{font-size:20px}}
@media(max-width:1000px){.game-heading h2{font-size:16px;letter-spacing:0}}
@media(max-width:760px){.game-spread{grid-template-areas:'heading' 'footage' 'copy';grid-template-rows:auto;row-gap:28px}.game-heading h2{font-size:20px;line-height:1.8;margin:16px 0 0}.game-copy{width:100%}.footage-plate{justify-self:center}.opening .begin-button{font-size:10px}}
@media(max-width:460px){.game-heading h2{font-size:16px;line-height:2;margin:15px 0 0}.game-spread{row-gap:24px}.opening .begin-button{min-width:280px;font-size:10px}}
@media(max-width:370px){.opening .begin-button{min-width:252px;font-size:9px}.game-heading h2{font-size:16px}}

/* Legible navigation is the baseline; transparency is a top-of-scene enhancement. */
.site-header{background:#17111df5;border-bottom-color:#a81f3f66;box-shadow:0 3px 12px #0003}
body.scene-navigation:not(.has-scrolled) .site-header{background:transparent;border-bottom-color:#efe6d312;box-shadow:none}
@media(max-height:500px) and (orientation:landscape){
 .site-header{padding:10px 24px;min-height:54px}.site-header nav{gap:22px;font-size:12px}.site-header .publisher span{display:none}
 .opening{display:flex;align-items:center;text-align:left;min-height:max(390px,100dvh);padding:78px 5vw 55px}
 .opening-content{width:48%;max-width:380px;margin:0;padding:0}.opening-status,.opening h2{display:none}
 .opening .logo-wrap{--logo-scale:2;left:0;transform:none}.opening h1{margin-bottom:14px}
 .opening-description{font-size:14px;line-height:1.5;max-width:350px;margin:0}
 .opening-actions{margin-top:16px;justify-content:flex-start}.opening .begin-button{min-height:44px;min-width:240px;font-size:8px}.watch-link{display:none}
 .opening-platforms{font-size:10px;line-height:1.7;margin:10px 0 0!important}.opening-platforms>span{display:inline;font-size:10px;margin-left:8px}
 .scroll-invitation{bottom:9px;font-size:6px;min-height:32px;gap:7px}.opening .motion-toggle{bottom:6px;font-size:10px}
}

@media(max-width:600px){.scroll-invitation>span:first-child{display:none}.scroll-invitation:before{content:'SCROLL';font:6px/1.8 var(--pixel)}}

/* On phones, reserve real space for the scene below the invitation. */
@media(max-width:600px) and (orientation:portrait){
 .opening{display:flex;flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;padding-bottom:0}
 .opening-content{flex:0 0 auto;width:calc(100% - 40px);margin:0 auto}
 .opening-art{position:relative;inset:auto;order:2;flex:1 0 auto;width:100%;min-height:97vw;margin-top:24px}
 .opening-art:after{content:'';position:absolute;inset:0 0 auto;height:36px;background:linear-gradient(#17111d,transparent);pointer-events:none}
}

/* The studio's native small-size badge, alongside its developer name. */
.site-header .publisher{display:inline-flex;align-items:center;gap:10px}
.site-header .publisher .studio-mark{display:block;flex:none;width:32px;height:32px;image-rendering:pixelated}
.site-header .publisher span{margin-left:2px}
.site-header nav{flex-shrink:0}
@media(max-width:370px){.site-header{gap:14px}.site-header .publisher{gap:8px;font-size:7px}}

/* Follow the visible phone viewport as browser chrome expands or retracts. */
@media(max-width:860px){.opening{min-height:100vh;min-height:100dvh}}
/* A small two-hop invitation; independent translate preserves its centering. */
@keyframes scroll-hop{0%,62%,100%{translate:0 0}73%{translate:0 -6px}83%{translate:0 0}91%{translate:0 -3px}}
@media(prefers-reduced-motion:no-preference){.scroll-invitation{animation:scroll-hop 2.6s steps(6,end) infinite}}
.motion-paused .scroll-invitation,.page-hidden .scroll-invitation,.opening-away .scroll-invitation{animation-play-state:paused}

/* Keep the cue above floating phone browser controls, beside the raised campfire. */
@media(max-width:600px) and (orientation:portrait){
 .scroll-invitation{bottom:max(88px,calc(64px + env(safe-area-inset-bottom,0px)))}
}

/* Compact the invitation when browser controls leave a shorter portrait view. */
@media(max-width:600px) and (max-height:800px) and (orientation:portrait){
 .opening{padding-top:84px}
 .opening-status{display:none}
 .opening h1{margin-bottom:12px}
 .opening h2{margin-bottom:8px}
 .opening-description{line-height:1.5}
 .opening-actions{margin-top:14px}
 .opening-platforms{margin-top:10px!important}
 .opening-art{min-height:92vw}
 .scroll-invitation{bottom:max(96px,calc(72px + env(safe-area-inset-bottom,0px)))}
}
@media(max-width:600px) and (max-height:600px) and (orientation:portrait){
 .opening h2,.opening-platforms{display:none}
}

/* The little company shares a centered stage and a caption beneath it. */
.little-company{flex-direction:column;align-items:center;gap:14px;text-align:center}
.company-heroes{display:flex;justify-content:center;align-items:flex-end;gap:24px}
.little-company p{margin:0;max-width:300px}
/* A real render of the results controls makes the feedback route recognizable. */
.feedback-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 30px;align-items:center;margin-top:38px;padding-top:30px;border-top:1px solid var(--edge)}
.feedback-instructions h3{font:10px/1.9 var(--pixel);margin:12px 0 15px}
.feedback-instructions>p:last-child{font-size:15px;line-height:1.75;color:var(--ink-soft)}
.feedback-controls{margin:0;text-align:center}
.feedback-controls img{display:block;width:480px;max-width:100%;height:auto;margin:auto;image-rendering:pixelated}
.feedback-controls figcaption{font-size:12px;color:var(--ink-soft);margin-top:14px}
.feedback-note{grid-column:1/-1;margin:0;font-size:12px;line-height:1.75;color:#6b5c56;max-width:690px}
@media(max-width:760px){.feedback-guide{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:30px;padding-top:26px}.feedback-controls{width:100%;max-width:480px;justify-self:center}.feedback-instructions h3{font-size:9px}.company-heroes{gap:20px}}

/* Platform changes ease between their natural heights, then release the box. */
.platform-pages{overflow-anchor:none}
.platform-pages.is-switching{overflow:hidden;overflow:clip}

html.platform-switching{overflow-anchor:none}