body {

    font-size: 14px;
}
#bd {
    background-image: url('/image/bg.jpg');
    background-size: cover; /* 覆盖整个视口，保持比例 */
    background-position: top; /* 从顶部开始显示 */
    background-repeat: no-repeat; /* 不重复 */
    background-attachment: fixed; /* 关键：滚动时背景固定 */
    max-width: 500px;
    margin: 0 auto;
}
.main {
    margin: 0 auto;
}

.nav {
    background-color: #fff3;
    -webkit-backdrop-filter: blur(1.8px);
    backdrop-filter: blur(1.8px);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.god {
    position: relative;
    margin: 0 auto;
    width: 360px;
    height:482px;
    background-image: url("/image/god.png");
    background-size: 100% 100%;
}

.animal {
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: 100% 100%;
    filter: drop-shadow(0 0 2px rgba(220,15,15,0.85));
}
.ani {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid #333; /* 基础边框统一4px */
    /* 边框发光缓动过渡 */
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    background-size: 100% 100%;
    background-color: aliceblue;
    filter: drop-shadow(0 0 10px rgba(220,15,15,0.85));
}

.a1 {
    left: 161px;
    top: 17px;
}
.a2 {
    left: 198px;
    top: 43px;
}
.a3 {
    left: 116px;
    top: 43px;
}
.a4 {
    left: 160px;
    top: 90px;
}
.a5 {
    left: 110px;
    top: 81px;
}
.a6 {
    left: 160px;
    top: 124px;
}
.a7 {
    left: 37px;
    top: 77px;
}
.a8 {
    left: 222px;
    top: 81px;
}
.a9 {
    left: 285px;
    top: 81px;
}
.a10 {
    left: 198px;
    top: 117px;
}
.a11 {
    left: 111px;
    top: 116px;
}
.a12 {
    left: 41px;
    top: 137px;
}
.a13 {
    left: 287px;
    top: 126px;
}
.a14 {
    left: 240px;
    top: 157px;
}
.a15 {
    left: 199px;
    top: 165px;
}
.a16 {
    left: 165px;
    top: 158px;
}
.a17 {
    left: 90px;
    top: 136px;
}
.a18 {
    left: 130px;
    top: 164px;
}
.a19 {
    left: 256px;
    top: 190px;
}
.a20 {
    left: 163px;
    top: 183px;
}
.a21 {
    left: 80px;
    top: 166px;
}
.a22 {
    left:196px;
    top: 208px;
}
.a23 {
    left: 168px;
    top: 207px;
}
.a24 {
    left: 132px;
    top: 209px;
}
.a25 {
    left: 219px;
    top: 254px;
}
.a26 {
    left: 166px;
    top: 247px;
}
.a27 {
    left: 107px;
    top: 256px;
}
.a28 {
    left: 166px;
    top: 280px;
}
.a29 {
    left: 254px;
    top: 292px;
}
.a30 {
    left: 81px;
    top: 290px;
}
.a31 {
    left: 254px;
    top: 323px;
}
.a32 {
    left: 78px;
    top: 332px;
}
.a33 {
    left: 254px;
    top: 365px;
}
.a34 {
    left: 80px;
    top: 365px;
}
.a35 {
    left: 266px;
    top: 408px;
}
.a36 {
    left: 76px;
    top: 413px;
}

.b1 {
    left: 11px;
    top: 0px;
}
.b2 {
    left: 55px;
    top: 0px;
}
.b3 {
    left: 99px;
    top: 0px;
}
.b4 {
    left: 143px;
    top: 0px;
}
.b5 {
    left: 187px;
    top: 0px;
}
.b6 {
    left: 231px;
    top: 0px;
}
.b7 {
    left: 275px;
    top: 0px;
}
.b8 {
    left: 319px;
    top: 0px;
}
.b9 {
    left: 319px;
    top: 44px;
}
.b10 {
    left: 319px;
    top: 83px;
}
.b11 {
    left: 319px;
    top: 122px;
}
.b12 {
    left: 319px;
    top: 161px;
}
.b13 {
    left: 319px;
    top: 200px;
}
.b14 {
    left: 319px;
    top: 239px;
}
.b15 {
    left: 319px;
    top: 278px;
}

.b16 {
    left: 319px;
    top: 317px;
}
.b17 {
    left: 319px;
    top:356px;
}
.b18 {
    left: 319px;
    top:395px;
}
.b19 {
    left: 319px;
    top:434px;
}
.b20 {
    left: 275px;
    top:434px;
}
.b21 {
    left: 231px;
    top:434px;
}
.b22 {
    left: 187px;
    top:434px;
}
.b23 {
    left: 143px;
    top:434px;
}
.b24 {
    left: 99px;
    top:434px;
}
.b25 {
    left: 55px;
    top:434px;
}
.b26 {
    left: 11px;
    top:434px;
}
.b27 {
    left: 11px;
    top:395px;
}
.b28 {
    left: 11px;
    top:356px;
}
.b29 {
    left: 11px;
    top:317px;
}
.b30 {
    left: 11px;
    top:278px;
}
.b31 {
    left: 11px;
    top:239px;
}
.b32 {
    left: 11px;
    top:200px;
}
.b33 {
    left: 11px;
    top:161px;
}
.b34 {
    left: 11px;
    top:122px;
}
.b35 {
    left: 11px;
    top:83px;
}
.b36 {
    left: 11px;
    top:44px;
}

.result {
    margin: 0 auto;
    width:90%;
    max-width: 400px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: linear-gradient(#fff2, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 10px;
}

.r2 {
    min-height: 100px;
    text-align: center;
    border-radius: 8px;
    background: #ffffff29;
    box-shadow: inset 0 1px #ffffff59;
    transition: .25s ease;
    padding: 5px;
}

#tt {
    padding: 20px 40px;
    filter: blur(30px);
    width:360px;
    margin:0 auto;
}
.rp3 {
    font-size: 20px;
    font-weight:bold;
}
/* 激活状态：轮播到当前项的发光边框 */
.ani.active {
    border-color: #40e0ff;
    border-width: 4px; /* 激活时边框加粗 */
    box-shadow: 0 0 6px #40e0ff,inset 0 0 8px rgba(64,224,255,0.35);
}