/* Fullscreen two-page layout */
html,body{height:100%;margin:0;font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif;background:#7a0b07;overflow:hidden;overscroll-behavior-x:none}
.book{position:relative;height:100vh;width:200vw;display:flex;transition:transform 600ms cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
.page{width:100vw;height:100vh;flex:0 0 100vw;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.page1{background:linear-gradient(180deg,#b91912,#6d0403)}
.poster-wrap{max-width:420px;width:90%;box-sizing:border-box}
.poster-wrap img{width:100%;height:auto;display:block}

/* make inlined SVG slightly smaller and centered */
.poster-inline svg{display:block;margin:0 auto;height:auto;width:93.5%;pointer-events:auto;transform:none}
.hint{position:absolute;right:18px;bottom:36px;background:rgba(255,255,255,0.08);color:#fff;padding:8px 12px;border-radius:20px;font-size:14px;backdrop-filter: blur(4px)}

.page2{background:linear-gradient(180deg,#e55,#b00);color:#fff}
#confetti{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.celebrate{position:relative;z-index:2;text-align:center}
.celebrate h1{font-size:48px;margin:0 0 12px}
.celebrate p{margin:0 0 24px;font-size:18px}
#replay{background:#fff;border:none;padding:10px 18px;border-radius:6px;cursor:pointer}

/* small screens tweak */
@media(max-width:420px){.celebrate h1{font-size:36px}.hint{right:12px;bottom:18px}}

/* utility classes */
.to-page2{transform:translateX(-100vw)}