/* Scene composition: clear scenery, quiet reading areas, and a distinct ending. */
:root{--ink:#243d32;--muted:#455b4c;--green:#285640;--paper:#faf6e9}
.topbar{height:82px;background:linear-gradient(#faf6e9ed, #faf6e970 70%,transparent);padding-inline:4.5%;transition:background .55s ease,color .55s ease,box-shadow .55s ease}
.topbar{justify-content:flex-start}.topbar .brand{font-size:28px;letter-spacing:-.025em}
.topbar nav{background:#fffbedb8;border:1px solid #ffffffa0;border-radius:40px;padding:10px 25px;gap:28px;backdrop-filter:blur(8px)}
.topbar nav a{transition:color .2s}.topbar nav a:hover{color:#9a632a}
.topbar[data-scene="1"]{background:linear-gradient(#f5f0d9f2,#f5f0d983 72%,transparent)}
.topbar[data-scene="2"]{background:linear-gradient(#fff5ddf2,#fff5dd88 72%,transparent)}
.topbar[data-scene="3"],.topbar[data-scene="4"]{background:linear-gradient(#f4ead7f4,#f4ead78c 72%,transparent);box-shadow:0 1px 0 #7d70412b}
.topbar[data-scene="5"]{background:linear-gradient(#f7f0dbf2,#f7f0db84 72%,transparent)}
.topbar[data-scene="6"],.topbar[data-scene="7"]{background:linear-gradient(#fff8e9f4,#fff8e986 72%,transparent);box-shadow:0 1px 0 #a7824a2b}
.copy-shade{background:linear-gradient(90deg,#faf6e9f5 0%,#faf6e9dc 25%,#faf6e9a3 36%,#faf6e900 56%)}
.sunlight{background:radial-gradient(ellipse at 75% 15%,#ffeca354,transparent 58%)}
.scene-vignette{background:linear-gradient(0deg,#183b2540,transparent 18%)}
.cloud-one{width:21vw;top:6%;left:39%}.cloud-two{width:18vw;top:2%;right:-6%}
.panel{padding-left:7%;padding-top:100px;padding-bottom:70px}
.panel-inner{width:39%;max-width:520px}
h1{font-size:clamp(40px,4.2vw,64px);line-height:1.45;letter-spacing:.035em}
#welcome .panel-inner{width:46%;max-width:620px}
#welcome h1{font-size:clamp(48px,5vw,76px);font-weight:900;line-height:1.32;letter-spacing:.045em;text-shadow:0 2px 0 #fffbed99}
#welcome h1 span{color:#2f684b;display:inline-block;position:relative}
#welcome h1 span::after{content:'';position:absolute;left:4%;right:2%;height:7px;bottom:-4px;border-radius:8px;background:#edce7d99;z-index:-1}
#welcome .lead{font-size:18px;font-weight:700;color:#385043}
h2{font-size:clamp(32px,3.3vw,49px);line-height:1.48;letter-spacing:.035em}
.lead{line-height:1.95;margin:24px 0 28px}
.primary{background:#285640;box-shadow:0 6px 18px #24452b25;border:1px solid #ffffff38;min-height:56px;padding-inline:27px;transition:background .2s,box-shadow .2s}
.primary:hover{background:#1a4331;box-shadow:0 8px 24px #24452b35}
.small-note{font-size:12px}.scroll-hint{margin-top:30px}
.book-area{right:7%;width:38vw;top:19%;height:61vh}
.friend-role{display:inline-block;border-bottom:2px solid #bda570;padding-bottom:8px;margin-bottom:18px;color:#5d6348}
.friend-profile h2{font-size:clamp(48px,5.2vw,78px);letter-spacing:.06em}
.friend-profile .lead{margin-top:25px}
.game-list{gap:16px;margin-top:26px}
.game-list article{grid-template-columns:98px 1fr;padding:14px;gap:18px;border:1px solid #ffffffc9;border-radius:5px 20px 20px 5px;background:#fffbedc9;box-shadow:0 10px 24px #3647260b}
.game-list img{height:137px;border-radius:3px 11px 11px 3px}
.game-list h3{font-size:22px}.game-list small{font-size:11px;letter-spacing:.04em}
.game-list p{font-size:14px}.game-links{font-size:13px;margin-top:12px}
.game-links a:first-child{padding:4px 16px}
.system-grid{gap:24px 22px;margin-top:30px}
.system-grid article{position:relative;border-color:#5a745b45;padding-top:14px}
.system-grid article>span{display:inline-flex;align-items:center;justify-content:center;font-size:23px;color:#466a43;min-width:38px;height:35px}
.system-grid h3{margin:7px 0 7px;font-size:17px}.system-grid p{font-size:14px;line-height:1.9}
.guide-list{margin-top:22px}.guide-list a{padding:17px 0;border-color:#45634540;font-size:16px;gap:12px}
.guide-list b,.news-link b{display:grid;place-items:center;width:33px;height:33px;flex-shrink:0;border:1px solid #55775350;border-radius:50%;font-size:18px}
.guide-list a:hover b,.news-link:hover b{background:#285640;color:white}
.news-link{background:#fffbedad;border:1px solid #ffffffcc;border-radius:5px 20px 20px 5px;box-shadow:0 12px 28px #2943270c;padding:24px;gap:15px}
.news-link small{display:none}
.bush-left{width:24vw;bottom:-12vw;left:40%}.bush-right{width:26vw;bottom:-12vw;right:-9%}
.stage[data-scene="6"] .copy-shade{background:linear-gradient(90deg,#faf6e9f0,#faf6e9b0 32%,transparent 60%)}
#start h2{font-size:clamp(40px,4.4vw,64px)}
.stage[data-scene="7"] .copy-shade{background:linear-gradient(0deg,#faf6e9fa, #faf6e9d9 14%,transparent 34%)}
body:not(.is-reduced):not(.no-js) .finale-panel{align-items:flex-end;padding:0 5% 57px}
body:not(.is-reduced):not(.no-js) .finale-panel .panel-inner{width:100%;max-width:none}
.finale-panel footer{flex-direction:row;align-items:center;gap:25px;border-top:1px solid #4c664435;padding-top:25px}
.finale-panel footer .brand{font-size:29px}.finale-panel footer>div{flex-direction:row;gap:24px;font-size:13px}
.party-celebrate{width:70%;right:15%;height:54%;bottom:30%}
.stage[data-scene="7"] :is(.treasure,.treasure-closed){right:41%;bottom:16%;width:18vw}
.journey-ui{bottom:20px}.progress-track{display:none}.scroll-mark{opacity:.75}
@media(min-width:651px) and (max-width:1000px){.panel-inner{width:43%}.panel{padding-left:5%}.game-list article{grid-template-columns:65px 1fr;gap:12px}.game-list img{height:128px}.game-list h3{font-size:19px}.lead,.friend-profile .lead{font-size:16px}.system-grid{gap:16px}.system-grid p{font-size:13px}.topbar nav{padding:8px 16px;gap:17px}}
@media(max-width:650px){
 .topbar{height:68px;padding-inline:20px;background:linear-gradient(#faf6e9f5,#faf6e980 80%,transparent)}
 .topbar .brand{font-size:25px}
 .panel{padding:94px 25px 40px;align-items:flex-start}.panel-inner,#welcome .panel-inner{width:100%;max-width:none}
 .copy-shade{background:linear-gradient(180deg,#faf6e9e8 0%,#faf6e9c4 22%,#faf6e977 37%,transparent 57%)}
 h1{font-size:37px;line-height:1.43}h2{font-size:29px;line-height:1.48}
 #welcome h1{font-size:45px;line-height:1.34;letter-spacing:.035em}
 #welcome .lead{font-size:15px;font-weight:700}
 .lead,.friend-profile .lead{font-size:15px;line-height:1.9;margin:17px 0 21px}
 .primary{min-height:49px;padding:11px 23px;font-size:14px}.small-note{font-size:11px;margin-top:15px}
 .book-area{width:60vw;right:14%;top:auto;bottom:8%;height:39svh}
 .friend-role{font-size:13px;padding-bottom:6px;margin-bottom:12px}.friend-profile h2{font-size:44px}.friend-profile .lead{margin-top:17px}
 .cloud-one{width:40vw;left:65%;top:30%}.cloud-two{width:34vw;top:8%}
 .game-list{gap:10px;margin-top:17px}.game-list article{grid-template-columns:64px 1fr;gap:13px;padding:10px;border-radius:4px 15px 15px 4px;background:#fffbedcf}
 .game-list img{height:102px}.game-list h3{font-size:19px}.game-list small{font-size:10px}.game-list p{font-size:12px;line-height:1.6;margin-top:3px}.game-links{font-size:12px;margin-top:7px}.game-links a:first-child{padding:3px 13px}
 :is(#systems,#guide,#news,#start) .panel-inner{padding-bottom:30px;text-shadow:none}
 :is(#systems,#guide,#news,#start) .panel-inner::before{inset:-17px -15px -18px;background:linear-gradient(135deg,#fffbeded,#fffbedc4 65%,#fffbed78);border:1px solid #ffffffb8;border-radius:3px 24px 24px 24px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(#000 92%,transparent);-webkit-mask-image:linear-gradient(#000 92%,transparent)}
 /* Each information chapter uses a different physical surface. */
 #systems .panel-inner::before{border-radius:26px 5px 26px 5px;background:linear-gradient(145deg,#fffdefed,#f7f0d6cf 68%,#e7ddba88);box-shadow:0 14px 35px #5b70451a}
 #systems .system-grid article{padding:10px 9px 9px;border:1px solid #7890682d;border-radius:4px 15px 15px 15px;background:#fffdf27a}
 #systems .system-grid article>span{color:#315c45}
 #guide .panel-inner::before{border-radius:4px 30px 30px 4px;background:linear-gradient(110deg,#fffdeff2,#f5ecd0dd 78%,#d9cca477);border-color:#d7c88f99;box-shadow:0 12px 28px #62553517}
 #guide .guide-list{margin-inline:-2px}
 #guide .guide-list a{padding-inline:3px;border-color:#9b895553}
 #guide .guide-list a:first-child{border-top:1px solid #9b895553}
 #news .panel-inner{padding-bottom:25px}
 #news .panel-inner::before{border-radius:26px 26px 5px 26px;background:linear-gradient(145deg,#fffdf2f2,#f7eed3d6);border-color:#e2c993a3}
 #start .panel-inner{padding:16px 14px 28px}
 #start .panel-inner::before{inset:-10px -13px -15px;border-radius:24px 4px 24px 24px;background:linear-gradient(145deg,#fffdf0e8,#fff5d7b6 70%,#f4e4b77d);border-color:#fff8e5c7}
 #start .button{margin-top:4px}
 .system-grid{margin-top:19px;gap:14px 18px}.system-grid article{padding-top:9px}.system-grid article>span{height:26px;font-size:21px;min-width:28px}.system-grid h3{font-size:15px;margin:5px 0}.system-grid p{font-size:13px;line-height:1.8}
 .guide-list{margin-top:13px}.guide-list a{padding:11px 0;font-size:14px}.guide-list small{font-size:11px}.guide-list b{width:29px;height:29px}
 .news-link{font-size:16px;padding:19px}.status-note{font-size:11px;margin-top:18px}
 #start h2{font-size:35px}.login-link,.ending-link{font-size:13px;margin-top:17px}
 .stage[data-scene="6"] .copy-shade{background:linear-gradient(#faf6e9d9,#faf6e995 35%,transparent 60%)}
 .enemy-boss{width:47vw;right:-5%;bottom:12%}
 .bush-left{width:56vw;left:-28%;bottom:-28vw}.bush-right{width:60vw;right:-30%;bottom:-28vw}
 .party-celebrate{width:100%;right:0;height:40%;bottom:36%}
 .stage[data-scene="7"] :is(.treasure,.treasure-closed){width:33vw;right:33.5%;bottom:20%}
 body:not(.is-reduced):not(.no-js) .finale-panel{padding:0 25px 53px}
 .finale-panel footer{flex-wrap:wrap;gap:15px;padding-top:18px}.finale-panel footer .brand{font-size:25px}.finale-panel footer>div{width:100%;gap:17px;font-size:11px;order:2}.finale-panel footer>small{margin-left:auto;font-size:10px}
 .stage[data-scene="7"] .copy-shade{background:linear-gradient(0deg,#faf6e9f5,#faf6e9bf 18%,transparent 37%)}
}
@media(max-width:650px) and (max-height:720px){
 .panel{padding-top:78px}h1{font-size:32px}h2{font-size:26px}.friend-profile h2{font-size:38px}
 #welcome h1{font-size:39px}
 .lead,.friend-profile .lead{margin:12px 0 16px;line-height:1.8}.friend-role{margin-bottom:8px}.book-area{height:33svh;bottom:7%}
 :is(#systems,#guide,#news,#start) .panel-inner{padding-bottom:22px}
 .system-grid{margin-top:12px;gap:8px 16px}.system-grid article{padding-top:6px}.system-grid article>span{height:22px;font-size:19px}.system-grid h3{margin:3px 0;font-size:14px}.system-grid p{font-size:12px;line-height:1.7}
 .game-list{margin-top:12px;gap:8px}.game-list img{height:90px}.game-list article{padding:8px}.game-list h3{font-size:17px}.game-links{margin-top:5px}
 #start h2{font-size:30px}.guide-list a{padding:9px 0}.small-note{margin-top:12px}.ending-link,.login-link{margin-top:13px}
}
.is-reduced .finale-panel footer,.no-js .finale-panel footer{flex-wrap:wrap}
.is-reduced .panel-inner::before,.no-js .panel-inner::before{display:none}
.juvenile-party{z-index:5;right:2%;top:18%;width:48vw;height:42vh}
.juvenile-party img[data-juvenile="grass"]{left:6%;top:32%;width:29%}
.juvenile-party img[data-juvenile="fire"]{left:22%;top:16%;width:30%}
.juvenile-party img[data-juvenile="water"]{left:47%;top:20%;width:31%}
.juvenile-party img[data-juvenile="lightning"]{left:72%;right:auto;top:22%;width:28%}
.book-area{z-index:6;right:8%;top:40%;width:44vw;height:46vh}
@media(max-width:650px){
 .juvenile-party{right:1%;top:auto;bottom:24%;width:98vw;height:26svh;z-index:5}
 .book-area{right:10%;top:auto;bottom:6%;width:80vw;height:32svh}
 #welcome h1{font-size:32px;letter-spacing:0;line-height:1.4}
}
.hero-composite{position:absolute;z-index:8;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;opacity:0;visibility:hidden;will-change:opacity;filter:saturate(.98) contrast(1.02)}
.copy-shade{z-index:9;background:linear-gradient(90deg,#f8f5e93a 0%,#f8f5e924 23%,#f8f5e90f 43%,#f8f5e900 66%)}
#welcome .panel-inner{padding:26px 30px 29px;border:1px solid #fffbed8c;border-radius:28px;background:#f8f5e99c;box-shadow:0 18px 50px #20352a1c;backdrop-filter:blur(7px)}
.juvenile-party{display:block}
.hero-composite{z-index:0}
.world{z-index:1}
.no-js .hero-composite,.is-reduced .hero-composite{opacity:1;visibility:visible}
@media(max-width:650px){.hero-composite{object-position:63% center}.copy-shade{background:linear-gradient(180deg,#f8f5e928 0%,#f8f5e914 34%,#f8f5e908 58%,#f8f5e900 80%)}#welcome .panel-inner{padding:19px 19px 21px;border-radius:22px;background:#f8f5e9c2;box-shadow:0 12px 34px #20352a1c;backdrop-filter:blur(6px)}}

/* Opening: a painted forest is split into a distant scene and a transparent edge layer. The animated book stays between them. */
.hero-foreground{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;opacity:0;visibility:hidden;will-change:opacity,transform}
.hero-composite,.hero-foreground{filter:saturate(.98) contrast(1.02)}
.hero-foreground{display:none}
.book-area{z-index:6}
.no-js .hero-foreground,.is-reduced .hero-foreground{opacity:1;visibility:visible}
@media(max-width:650px){.hero-foreground{object-position:63% center}}

/* Responsive reading layout for every chapter. Animation timing lives in story.js. */
:root{--reading-surface:linear-gradient(135deg,#fffdf3f2,#fff9e8e6);--reading-padding:clamp(20px,2.2vw,32px)}
body{line-height:1.85;letter-spacing:.015em}
.topbar{height:72px;padding-inline:clamp(20px,4vw,72px)}
.panel{padding:88px 4vw 48px;align-items:center}
.panel-inner,#welcome .panel-inner{width:46%;max-width:600px;min-width:0}
.panel-inner>*{min-width:0}
.panel:not(.finale-panel) .panel-inner,#welcome .panel-inner,#start .panel-inner{position:relative;padding:var(--reading-padding);background:var(--reading-surface);border:1px solid #ffffffc9;border-radius:24px;box-shadow:0 8px 28px #29442d13;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none}
.panel-inner::before{display:none!important}
h1,h2,#welcome h1,#start h2{font-size:clamp(28px,3.1vw,48px);line-height:1.45;font-weight:700;letter-spacing:.01em;text-wrap:initial;text-shadow:none;word-break:normal;overflow-wrap:break-word}
#welcome h1 span::after{height:4px;bottom:0}
.lead,#welcome .lead,.friend-profile .lead{font-size:clamp(15px,1.15vw,18px);font-weight:500;line-height:1.9;margin:20px 0 24px;color:#243d32;text-wrap:pretty}
.small-note,.status-note,.game-list small,.guide-list small{font-size:13px;line-height:1.7;color:#475548}
.button,.primary{min-height:48px;font-size:15px;padding:11px 24px;gap:20px;max-width:100%}
.small-note{margin-top:16px}
.friend-profiles{min-height:270px}.friend-role{font-size:15px;margin-bottom:12px;letter-spacing:.02em}
.friend-profile h2{font-size:clamp(36px,4vw,58px);letter-spacing:.015em;line-height:1.4}
.friend-profile .lead{margin:18px 0 0}
#games .panel-inner{background:linear-gradient(135deg,#fffdf3ed,#fff9e8d9)}
.game-list{gap:14px;margin-top:20px;max-width:none}
.game-list article{grid-template-columns:76px minmax(0,1fr);gap:16px;padding:14px;border-radius:14px;background:#fffdf5f5;box-shadow:none}
.game-list article>div{min-width:0}.game-list img{height:100%;max-height:156px;min-height:120px;border-radius:8px}
.game-list h3{font-size:clamp(18px,1.65vw,23px);line-height:1.45;letter-spacing:0;overflow-wrap:anywhere}
.game-list p{font-size:14px;line-height:1.75;margin-top:5px}
.game-links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:14px}
.game-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 8px}
.game-links a:first-child{padding:4px 16px}
.system-grid{gap:18px 20px;margin-top:20px}
.system-grid article,#systems .system-grid article{padding:12px 0 0;border:0;border-top:1px solid #71836b52;border-radius:0;background:none}
.system-grid article>span{height:28px;font-size:23px}.system-grid h3{font-size:16px;line-height:1.6;margin:6px 0}
.system-grid p{font-size:14px;line-height:1.85;color:#243d32}
.guide-list{margin:16px 0 0}.guide-list a,#guide .guide-list a{min-height:52px;padding:11px 0;font-size:15px;line-height:1.65;gap:12px}
.guide-list a>span{min-width:0}.guide-list b{flex-shrink:0}
.news-link{font-size:16px;line-height:1.7;padding:16px;background:#fffdf5f0;box-shadow:none}
.status-note{margin-top:18px}
.login-link,.ending-link{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:10px;font-size:14px;line-height:1.7}
.finale-panel footer{flex-wrap:wrap;gap:16px 28px}.finale-panel footer>div{flex-wrap:wrap;gap:6px 24px;font-size:14px}
.finale-panel footer>div a{display:inline-flex;align-items:center;min-height:44px}.finale-panel footer>small{font-size:12px}
@media(min-width:651px) and (max-width:1000px){
 .panel{padding-inline:3vw}.panel-inner,#welcome .panel-inner{width:49%}
 .panel:not(.finale-panel) .panel-inner{padding:22px}
 h1,h2,#welcome h1,#start h2{font-size:28px}
 .game-list article{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px}
 .game-list small{font-size:12px}.game-list p{font-size:14px}
 .book-area{right:3%;width:44vw}
 .friend-profiles{min-height:280px}
}
@media(max-width:650px){
 .topbar{height:64px;padding-inline:20px}.topbar .brand{font-size:24px}
 .panel{padding:80px 18px 32px;align-items:flex-start}
 .panel-inner,#welcome .panel-inner{width:100%;max-width:none}
 .panel:not(.finale-panel) .panel-inner,#welcome .panel-inner,#start .panel-inner{padding:22px;border-radius:20px;background:linear-gradient(135deg,#fffdf3f2,#fff9e8e8)}
 h1,h2,#welcome h1,#start h2{font-size:clamp(26px,7.2vw,33px);line-height:1.45;letter-spacing:0}
 .lead,#welcome .lead,.friend-profile .lead{font-size:15px;line-height:1.85;margin:16px 0 20px}
 .lead br{display:none}
 .small-note,.status-note,.game-list small,.guide-list small{font-size:12px}
 .friend-role{font-size:14px;margin-bottom:10px;padding-bottom:6px}
 .friend-profile h2{font-size:38px}.friend-profiles{min-height:206px}
 .friend-profile .lead{margin-bottom:0}.friend-profile .lead br{display:none}
 .game-list{gap:10px;margin-top:16px}.game-list article{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px}
 .game-list img{min-height:112px;max-height:154px}.game-list h3{font-size:19px}.game-list p{font-size:14px;line-height:1.7}
 .game-links{font-size:14px;gap:4px 8px;margin-top:6px}.game-links a:first-child{padding-inline:14px}
 .system-grid{gap:14px 16px;margin-top:16px}.system-grid h3{font-size:15px}.system-grid p{font-size:14px;line-height:1.75}
 .system-grid article>span{height:24px;font-size:21px}
 .guide-list a,#guide .guide-list a{font-size:14px;padding-block:10px}.guide-list{margin-top:12px}
 .book-area{bottom:4%;height:30svh;right:13%;width:74vw}
 body:not(.is-reduced):not(.no-js) .finale-panel{padding:0 20px 32px}
 .finale-panel footer{gap:10px 16px;padding-top:14px}.finale-panel footer>div{gap:2px 16px;font-size:13px;width:100%}
 .finale-panel footer>small{font-size:12px}.finale-panel footer .brand{font-size:26px}
}
@media(max-width:360px){
 .panel{padding-inline:12px}.panel:not(.finale-panel) .panel-inner,#welcome .panel-inner,#start .panel-inner{padding:18px}
 .game-list article{grid-template-columns:42px minmax(0,1fr);gap:10px;padding:10px}
 .game-list h3{font-size:18px}.system-grid{gap:12px}.system-grid h3{font-size:14px}
 .button{padding-inline:20px}.friend-profiles{min-height:222px}
}
@media(min-height:561px) and (max-height:740px){
 .panel{padding-top:76px;padding-bottom:24px}.panel:not(.finale-panel) .panel-inner,#welcome .panel-inner,#start .panel-inner{padding:18px}
 h1,h2,#welcome h1,#start h2{font-size:28px;line-height:1.4}
 .lead,#welcome .lead,.friend-profile .lead{margin:12px 0 16px;line-height:1.75}
 .game-list{margin-top:12px;gap:10px}.game-list article{padding:10px}.game-list p{margin-top:3px}
 .system-grid{gap:10px 16px;margin-top:12px}.system-grid article,#systems .system-grid article{padding-top:8px}
 .system-grid h3{margin:3px 0}.system-grid p{line-height:1.65}
 .friend-profiles{min-height:204px}.friend-profile h2{font-size:36px}
 .guide-list a,#guide .guide-list a{min-height:48px;padding-block:8px}
 .small-note,.status-note{margin-top:12px}
}
/* Short landscape windows and reduced motion use readable normal document flow. */
.is-reduced .panel,.no-js .panel{min-height:0;padding:88px 24px 40px}
.is-reduced .panel-inner,.no-js .panel-inner,.is-reduced #welcome .panel-inner,.no-js #welcome .panel-inner{width:100%;max-width:760px;margin-inline:auto}
.is-reduced .hero-composite,.no-js .hero-composite{height:100svh}
.is-reduced .friend-profile,.no-js .friend-profile{padding:0 0 30px}
.is-reduced .friend-profiles,.no-js .friend-profiles{min-height:0}
.is-reduced .friend-profile .lead,.no-js .friend-profile .lead{max-width:none}
.is-reduced .game-list,.no-js .game-list{display:flex}
.is-reduced .finale-panel footer,.no-js .finale-panel footer{gap:16px}
.stage{min-height:0}
@media(max-width:650px) and (max-height:740px){
 .stage[data-scene="7"] .party-celebrate{bottom:44%;height:34%}
 .stage[data-scene="7"] :is(.treasure,.treasure-closed){bottom:37%;width:29vw;right:35.5%}
}
body:not(.is-reduced):not(.no-js) .panel:not(.active) .panel-inner{backdrop-filter:none;-webkit-backdrop-filter:none}
body:not(.is-reduced):not(.no-js) .panel:not(.active) *{visibility:hidden!important}
@media(max-width:360px) and (min-height:561px) and (max-height:640px){
 #games .panel-inner{padding:14px}#games h2{font-size:26px}
 .game-list article{padding:8px}.game-list{gap:8px}
}
/* Use drawn icons so missing emoji fonts cannot leave empty squares. */
.system-grid article:nth-child(2)>span,.system-grid article:nth-child(3)>span{font-size:0;width:28px;background-position:left center;background-repeat:no-repeat;background-size:25px 25px}
.system-grid article:nth-child(2)>span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 15h16c0 9-5 12-8 14-3-2-8-5-8-14Z' fill='%23826745'/%3E%3Cpath d='M6 15c0-6 5-10 10-10s10 4 10 10Z' fill='%23486643'/%3E%3Cpath d='M16 5V2' stroke='%23486643' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.system-grid article:nth-child(3)>span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23486643' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 22 17-17v7L13 25M6 19l9 9M5 27l4-4M23 22 6 5v7l13 13M26 19l-9 9M27 27l-4-4'/%3E%3C/svg%3E")}

/* Opening room: keep the animated book vertically centered on every viewport. */
.book-area{top:50%;bottom:auto;transform:translateY(-50%)}
@media(max-width:650px){.book-area{top:50%;bottom:auto;transform:translateY(-50%)}}

/* Keep both the closed and opened book clear of the reading panel. */
.book-area{right:0;width:38vw}
@media(min-width:651px) and (max-width:1000px){.book-area{right:-1%;width:41vw}}
@media(max-width:650px){.book-area{right:7%;width:62vw;height:25svh;top:72%}}
@media(max-width:650px) and (max-height:740px){.book-area{top:84%;height:22svh}}
@media(max-width:650px) and (max-height:600px){.book-area{top:91%;height:19svh}}

/* Background follows the large viewport; story objects keep the small-viewport canvas. */
body:not(.is-reduced):not(.no-js) .stage{height:100lvh}
body:not(.is-reduced):not(.no-js) .journey{height:1300svh}
@media(max-width:650px){
 body:not(.is-reduced):not(.no-js) .journey{height:1230svh}
 .world,.panels{inset:0 auto auto 0;width:100%;height:100svh}
 .world{overflow:visible}
 .world>.sky,.world>.landscape,.world>.world-tint,.world>.sunlight,.world>.scene-vignette{bottom:auto;height:100lvh}
 .hero-composite,.hero-foreground,.copy-shade{bottom:auto;height:100lvh}
 .book-area{top:72svh;height:25svh}
 .journey-ui{bottom:calc(16px + 100lvh - 100svh)}
}
@media(max-width:650px) and (max-height:740px){.book-area{top:84svh;height:22svh}}
@media(max-width:650px) and (max-height:600px){.book-area{top:91svh;height:19svh}}

/* Keep the legal/footer content at the bottom of the final scene only. */
body:not(.is-reduced):not(.no-js) .finale-panel{align-items:stretch;padding:0}
body:not(.is-reduced):not(.no-js) .finale-panel .panel-inner{position:relative;height:100%;width:100%;max-width:none}
body:not(.is-reduced):not(.no-js) .finale-panel footer{position:absolute;left:5%;right:5%;bottom:max(16px,env(safe-area-inset-bottom))}
@media(max-width:650px){body:not(.is-reduced):not(.no-js) .finale-panel footer{left:20px;right:20px;bottom:max(14px,env(safe-area-inset-bottom))}}
@media(max-width:650px){
 body:not(.is-reduced):not(.no-js) .finale-panel{inset:0 auto auto 0;width:100%;height:100lvh}
}

/* On phones the reward sits clearly below the celebrating party. */
@media(max-width:650px){
 .stage[data-scene="7"] :is(.treasure,.treasure-closed){bottom:14%}
}
@media(max-width:650px) and (max-height:740px){
 .stage[data-scene="7"] :is(.treasure,.treasure-closed){bottom:15%}
}