:root{--bg-color: #1a0b2e;--text-color: #3e2723;--btn-color: #5d4037;--btn-hover: #8d6e63}*,*:before,*:after{box-sizing:border-box}body{margin:0;overflow:hidden;background-color:var(--bg-color);font-family:Outfit,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;height:100vh;height:100dvh}#intro-overlay{position:absolute;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,#2e0b3e,#000);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s ease}.character-container img{max-height:40vh;filter:drop-shadow(0 0 20px rgba(255,215,0,.5))}#dialogue-box{margin-top:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:15px;border:1px solid #ffd700;max-width:80%;text-align:center;font-size:1.2rem;min-height:60px;min-width:300px}#start-btn{margin-top:30px;padding:12px 30px;font-size:1.2rem;background-color:gold;color:#000;border:none;border-radius:50px;cursor:pointer;font-weight:700;box-shadow:0 0 15px gold;transition:transform .2s}#start-btn:hover{transform:scale(1.05)}#main-container{width:100%;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;z-index:10;padding:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}#scroll-scene{position:relative;width:min(680px,96vw);height:min(980px,94vh);height:min(980px,94dvh);overflow:hidden;display:flex;align-items:center;justify-content:center}#scroll-canvas{width:100%;height:100%;display:block}#scroll-ui{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:stretch;justify-content:center;pointer-events:none;overflow:hidden;padding-top:clamp(92px,13vh,160px);padding-bottom:clamp(92px,13vh,160px);padding-left:clamp(34px,7vw,80px);padding-right:clamp(34px,7vw,80px)}#scroll-letter{width:100%;max-width:520px;margin:0 auto;height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:auto;scrollbar-width:thin;scrollbar-color:var(--btn-hover) transparent}#scroll-letter::-webkit-scrollbar{width:10px}#scroll-letter::-webkit-scrollbar-track{background:transparent}#scroll-letter::-webkit-scrollbar-thumb{background-color:var(--btn-hover);border-radius:10px;border:2px solid transparent;background-clip:content-box}#scroll-letter .scroll-content{width:90%;color:var(--text-color);font-family:Dancing Script,cursive;font-size:clamp(.98rem,3.2vw,1.35rem);text-align:center;opacity:0;padding:clamp(10px,2.6vh,22px) clamp(10px,2vw,22px);line-height:1.25;margin-left:22px}.scroll-content h2{font-size:clamp(1.6rem,5.2vw,2.2rem);margin:10px 12px 16px 0;color:#5d4037}.scroll-content p{margin:10px 12px 16px}@media (max-width: 420px){#dialogue-box{font-size:1.05rem;min-width:0;width:min(92vw,420px)}#start-btn{font-size:1.05rem;padding:12px 24px}}@media (max-height: 640px){#scroll-scene{height:94vh;height:94dvh}#scroll-ui .scroll-content{font-size:clamp(.95rem,3.2vw,1.25rem);padding:14px 0}}@media (orientation: landscape) and (max-height: 520px){#scroll-scene{width:min(720px,96vw);height:92vh;height:92dvh}#scroll-ui .scroll-content{width:min(520px,80%)}}.hidden{display:none!important}