/* 神佛护佑 H5 公共样式（设计宽 750，1rpx = var(--r)） */
:root{--r:0.5px;--vh:100vh}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#1c0f26;font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif;-webkit-text-size-adjust:100%;overflow:hidden}
img{display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button,input,select{font:inherit;-webkit-appearance:none;appearance:none;border-radius:0}
.page{position:relative;width:calc(var(--r)*750);height:var(--vh);margin:0 auto;overflow:hidden}
.bg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:0}
.anim-canvas,.anim-still{position:absolute;left:0;top:0;width:100%;height:100%}
.anim-canvas{z-index:3;transition:opacity .3s}
.anim-still{z-index:2;transition:opacity .3s}
.breath{-webkit-animation:breath 3.2s ease-in-out infinite;animation:breath 3.2s ease-in-out infinite}
@-webkit-keyframes breath{0%,100%{-webkit-filter:brightness(1)}50%{-webkit-filter:brightness(1.12)}}
@keyframes breath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.toast{position:fixed;left:50%;top:45%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:99;max-width:70%;padding:12px 18px;border-radius:8px;background:rgba(17,17,17,.85);color:#fff;font:15px/1.4 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{-webkit-animation:none!important;animation:none!important;transition:none!important}}
/* 背景音乐按钮 */
.bgm{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 8px);right:max(12px,calc(50% - 280px + 12px));width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,236,190,.75);background:rgba(60,20,40,.38);color:#ffe7a6;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bgm.on{-webkit-animation:bgmspin 4s linear infinite;animation:bgmspin 4s linear infinite}
.bgm i{position:absolute;left:50%;top:50%;width:70%;height:2px;margin:-1px 0 0 -35%;background:#ffe7a6;border-radius:1px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);display:none}
.bgm.paused i{display:block}
@-webkit-keyframes bgmspin{to{-webkit-transform:rotate(360deg)}}
@keyframes bgmspin{to{transform:rotate(360deg)}}