/* 演出（表紙の本・光の粒・町のフィールド）の見た目。完成後はほぼ触りません */
:root{--n:#0a1230;--g:#d9b45a}*{box-sizing:border-box;margin:0}
html,body{height:100%;background:radial-gradient(ellipse at 50% 30%,#1b2a63 0,#0b1334 55%,#050a1c 100%) fixed;color:#fff;font-family:"Hiragino Sans","Noto Sans JP",sans-serif;overflow:hidden}
.s{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.s.on{opacity:1;visibility:visible}
.btn{font:inherit;font-size:1.1rem;padding:.8em 1.7em;border:2px solid var(--g);background:rgba(10,18,48,.9);color:var(--g);border-radius:999px;cursor:pointer}
#cover{perspective:1500px;background:radial-gradient(ellipse at 50% 45%,#1d2c63,#050a1c 72%);gap:3vh;overflow:hidden}
.stg{--sw:min(70vw,42vh);position:relative;width:var(--sw);aspect-ratio:768/970;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-24deg);transition:transform 1.9s cubic-bezier(.45,0,.25,1)}
.open .stg{transform:rotateX(6deg) rotateY(-3deg) scale(var(--s,.6)) translate(50%,var(--ty,0px))}
.zoom .stg{transform:rotateX(0) rotateY(0) scale(var(--s,.6)) translate(50%,var(--ty,0px)) translateZ(var(--dz,600px));transition:transform 2.4s cubic-bezier(.5,0,.8,.5)}
.sh{position:absolute;left:-6%;right:-14%;bottom:-6%;height:10%;background:radial-gradient(#000c,transparent 70%);transform:translateZ(-40px) rotateX(75deg);filter:blur(6px)}
.L{position:absolute;transform-style:preserve-3d}.bc{inset:0;background:#0a1640;border-radius:3px;transform:translateZ(-16px)}
.pb{inset:1.5% .8% 1.5% 2%;background:repeating-linear-gradient(180deg,#f1e6cb 0 2px,#cdbb92 2px 3px);transform:translateZ(-9px);box-shadow:3px 0 0 #b9a77c,5px 0 0 #8a7a55}
.p1{inset:1.5% .8% 1.5% 2%;background:linear-gradient(90deg,#cbb98f,#fcf6e3 9%,#fbf2da);transform:translateZ(-3px);border-radius:0 9px 9px 0}
/* ===== 紙のしなり：ページを細い帯に分け、少しずつ角度をつけて曲げる ===== */
@property --b{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --bn{syntax:'<number>';inherits:true;initial-value:0}
.st{position:absolute;top:0;bottom:0;left:0;width:calc(var(--W)/var(--N) + .6px);transform-style:preserve-3d;transform-origin:left center;transform:rotateY(var(--b))}
.st>.st{left:calc(var(--W)/var(--N))}
.lf{--N:7;--W:calc(var(--sw)*.972);--pg:linear-gradient(90deg,#cdbb92,#fbf3dc 9%,#fffaf0 60%,#f4ead0);--z0:calc(-1px - var(--i)*.5px);--z1:calc(7px + var(--i)*.6px);left:2%;width:var(--W);top:calc(1.5% + var(--i)*.35%);bottom:calc(1.5% + var(--i)*.35%);transform-origin:left center;transform:translateZ(var(--z0)) rotateY(0);animation:fp 1.4s cubic-bezier(.4,.05,.25,1) calc(1.5s + var(--i)*.25s) both paused,bend 1.4s ease-in-out calc(1.5s + var(--i)*.25s) both paused}
.lf .st{background-image:var(--pg);background-size:var(--W) 100%;background-position:calc(var(--k)*var(--W)/var(--N)*-1) 0}
.lf .st::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(70,45,10,calc(var(--bn)*var(--k)*.03)),rgba(255,255,255,calc(var(--bn)*.1)))}
.lf .st.end{border-radius:0 9px 9px 0}.lf>.st{border-radius:2px 0 0 2px}
.open .lf{animation-play-state:running}
@keyframes fp{0%{transform:translateZ(var(--z0)) rotateY(0)}30%{transform:translateZ(14px) rotateY(-40deg)}60%{transform:translateZ(11px) rotateY(-112deg)}100%{transform:translateZ(var(--z1)) rotateY(-168deg)}}
@keyframes bend{0%{--b:0deg;--bn:0}25%{--b:5.5deg;--bn:1}55%{--b:6deg;--bn:1}80%{--b:-1.4deg;--bn:.3}100%{--b:0deg;--bn:0}}
.cw{inset:0;transform-origin:left center;transform:translateZ(5px);transition:transform 2.3s cubic-bezier(.45,0,.25,1) .3s}.open .cw{transform:translateZ(5px) rotateY(-172deg)}
.cw>*{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px}.cw img{width:100%;height:100%;box-shadow:0 0 0 2px #060d2a,6px 8px 22px #000a}
.cw .ib{transform:rotateY(180deg);background:linear-gradient(270deg,#0f1d52,#1a2a66);box-shadow:inset 0 0 0 10px #0f1d52,inset 0 0 0 12px #d9b45a}
.cw:after{content:"";position:absolute;inset:0;border-radius:3px;background:linear-gradient(115deg,transparent 30%,#fff3 45%,transparent 60%);backface-visibility:hidden;animation:sh 2.3s ease-in-out .3s both paused}.open .cw:after{animation-play-state:running}@keyframes sh{from{opacity:0;transform:translateX(-40%)}50%{opacity:1}to{opacity:0;transform:translateX(40%)}}
#glow{position:absolute;left:0;top:0;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:radial-gradient(circle,#fffdf2 0,#ffeeb4 6%,#ffd96b55 16%,#ffd96b18 30%,transparent 44%);opacity:0;transform:scale(.18);transition:opacity 2s ease-out 1.6s,transform 3.2s cubic-bezier(.3,0,.4,1) 1.6s;pointer-events:none;z-index:3}.open #glow{opacity:1;transform:scale(1)}
#flash{position:fixed;inset:0;z-index:60;background:radial-gradient(circle at var(--cx,50%) var(--cy,45%),#fffef6 0,#fff4cc 55%,#ffeaa6 100%);opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity 1.4s ease-in-out}#flash.on{opacity:1}
.s.nt{transition:none}
#cover h1{font:700 clamp(1.5rem,6.6vw,2.5rem) 'Cinzel Decorative',serif;letter-spacing:.1em;color:var(--g);text-shadow:0 2px 12px #000}#cover p{font:500 .95rem 'Shippori Mincho B1',serif;opacity:.92}
.stg,.stg *{pointer-events:none}#cover .t{position:relative;z-index:5;text-align:center;transition:opacity .6s}.open .t{opacity:0}

/* ===== 動く背景：ページごとに色が変わる ===== */
@property --c0{syntax:'<color>';inherits:true;initial-value:#0a1230}
@property --c1{syntax:'<color>';inherits:true;initial-value:#16275f}
@property --c2{syntax:'<color>';inherits:true;initial-value:#2b4aa8}
@property --c3{syntax:'<color>';inherits:true;initial-value:#c9a24b}
#bgl{--c0:#070d27;--c1:#14245a;--c2:#2b4aa8;--c3:#c9a24b;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(165deg,var(--c0),var(--c1));transition:--c0 2.4s ease,--c1 2.4s ease,--c2 2.4s ease,--c3 2.4s ease}
#bgl i{position:absolute;border-radius:50%;will-change:transform}
#bgl i:nth-child(1){left:-35vmax;top:-30vmax;width:95vmax;height:95vmax;background:radial-gradient(circle,var(--c2) 0,transparent 62%);animation:dr1 26s ease-in-out infinite alternate}
#bgl i:nth-child(2){right:-40vmax;bottom:-35vmax;width:100vmax;height:100vmax;background:radial-gradient(circle,var(--c3) 0,transparent 62%);opacity:.8;animation:dr2 31s ease-in-out infinite alternate}
#bgl i:nth-child(3){left:5vmax;top:25vh;width:70vmax;height:70vmax;background:radial-gradient(circle,var(--c2) 0,transparent 60%);opacity:.45;animation:dr3 38s ease-in-out infinite alternate}
@keyframes dr1{to{transform:translate(30vmax,24vmax) scale(1.18)}}@keyframes dr2{to{transform:translate(-28vmax,-30vmax) scale(.88)}}@keyframes dr3{to{transform:translate(26vmax,-18vmax) scale(1.25)}}
#bgl[data-theme=night]{--c0:#0f1e4d;--c1:#1d3a7a;--c2:#3c6fd0;--c3:#0fa3b1}
#bgl[data-theme=violet]{--c0:#2a1b5e;--c1:#4a2c8a;--c2:#a05ad6;--c3:#ff8fc2}
#bgl[data-theme=sky]{--c0:#15508f;--c1:#2f87c9;--c2:#8fd3ff;--c3:#ffe7b0}
#bgl[data-theme=mint]{--c0:#12514b;--c1:#1f8a74;--c2:#7ee0b9;--c3:#f6e7a0}
#bgl[data-theme=rose]{--c0:#5a1230;--c1:#a22a54;--c2:#ff7a9c;--c3:#ffd0a0}
#bgl[data-theme=gold]{--c0:#4a3210;--c1:#9a6a1c;--c2:#ffc857;--c3:#fff0b8}
#bgl[data-theme=blush]{--c0:#5a2848;--c1:#b4587f;--c2:#ffa9c0;--c3:#ffe0cc}
#bgl[data-theme=baby]{--c0:#1f4a85;--c1:#4f93d8;--c2:#bfe3ff;--c3:#fff4c4}
#bgl[data-theme=sunrise]{--c0:#4a2a6a;--c1:#c0567e;--c2:#ffb36b;--c3:#ffe39a}
#bgl[data-theme=dusk]{--c0:#1e2866;--c1:#4a3a94;--c2:#8d6bd6;--c3:#f0a2b8}
@media (prefers-reduced-motion:reduce){#bgl i{animation:none}}
/* 町の左右・上下の余白：町の画像をぼかして敷く */
#field{background:#0b1b12}.fbg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(24px) brightness(.55) saturate(1.25);z-index:0}.fw{z-index:1}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.s{z-index:1}
#field{background:#000}.fw{position:relative;width:min(100vw,150vh);aspect-ratio:3/2;clip-path:inset(0 0 -100vh 0);font-family:DotGothic16,sans-serif}
.fw .bg{width:100%;height:100%;display:block;animation:zm 7s linear forwards}@keyframes zm{to{transform:scale(1.05)}}
.sp,.ht,.dl{display:none}.cl .sp,.cl .ht,.cl .dl{display:block}.cl .bg{animation:none}
.sp{position:absolute;bottom:41.5%;image-rendering:pixelated;transition:left 4.6s linear}#sk{width:5.3%}#ss{width:4.4%}.walk .sp{animation:bob .5s steps(1) 9}@keyframes bob{50%{transform:translateY(-4%)}}
#sk{left:-8%}#ss{left:108%}.walk #sk{left:43.3%}.walk #ss{left:52.1%}
.ht{position:absolute;left:48.7%;top:41%;width:3.4%;image-rendering:pixelated;opacity:0;transition:opacity .4s}.meet .ht{opacity:1}
.dl{position:absolute;left:23.8%;top:65.9%;width:52.4%;height:24.4%;background:#0a0a0a;border:.5vmin solid #fff;border-radius:1vmin;padding:2% 4%;font-size:min(2.3vw,3.4vh);line-height:1.7;white-space:nowrap;opacity:0;transition:opacity .5s}
@media (orientation:portrait){.dl{left:3%;width:94%;top:106%;height:auto;font-size:5vw;padding:4% 7%}}.dlg .dl{opacity:1}.dl .y{animation:none}.pick .y{animation:bl .3s 4}@keyframes bl{50%{opacity:0}}

/* ===== 光のあとに出るタイトル（画像は別途用意。無いときは文字で代用） ===== */
#tc{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(9vh + env(safe-area-inset-top));text-align:center;background:#1c4fa8 center/cover no-repeat;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.3s ease,visibility 1.3s}
#tc.on{opacity:1;visibility:visible;transition:none}
#tc .lg{display:none;width:min(94vw,640px);filter:drop-shadow(0 4px 14px #0008)}#tc.hasimg .lg{display:block}#tc.hasimg .tx{display:none}
#tc .tx h1{font:900 clamp(2.2rem,11.5vw,4rem)/1.05 'Cinzel Decorative','Noto Serif JP',serif;letter-spacing:.04em;background:linear-gradient(180deg,#fff7c8 0,#f6d462 30%,#c98a1c 52%,#8a5206 53%,#e9b84a 78%,#fff0a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.045em #3a1f6e;paint-order:stroke fill;filter:drop-shadow(0 .06em 0 #2a1450) drop-shadow(0 0 .35em #fff)}
#tc .tx h1:after{content:"";display:block;height:3px;margin:.35em auto 0;width:78%;background:linear-gradient(90deg,transparent,#c98a1c,#fff3b0,#c98a1c,transparent)}
#tc .tx p{display:inline-block;font:700 clamp(.85rem,3.6vw,1.1rem) 'Shippori Mincho B1',serif;color:#fff6cf;letter-spacing:.14em;margin-top:1em;padding:.35em 1.4em;background:linear-gradient(90deg,transparent,#3a1f6ecc 15%,#3a1f6ecc 85%,transparent);text-shadow:0 1px 3px #000}
#tc .lg,#tc .tx{opacity:0}#tc.on .lg,#tc.on .tx{animation:tin 3.2s cubic-bezier(.25,.6,.3,1) 1.3s both}
@keyframes tin{from{opacity:0;transform:translateY(5vh) scale(.95)}to{opacity:1;transform:none}}
.bk2{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:30;font:inherit;font-size:.85rem;padding:.45em 1em;border:1px solid #d9b45a99;background:rgba(10,18,48,.6);color:#f3dfa0;border-radius:999px;display:none}
.bk2.on{display:block}

#cover.rs *,#cover.rs *:after,#cover.rs{animation:none!important;transition:none!important}
.fw.rs0,.fw.rs0 *{animation:none!important;transition:none!important}