body{margin:0;padding:0;background: url("bg2.jpg") no-repeat center center fixed; background-size: cover; font-size:14px;font-family:'微软雅黑','宋体',sans-serif;color:#FFF9E3;overflow:auto}
a {color:#fff;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:100%;height:100%;}
#text{width:440px;
height:560px;
left: calc(50% - 400px);
top:120px;position:absolute;
}
#code{display:none;font-size:24px;}
#clock-box {position:absolute; left: calc(50% - 490px); top:550px;font-size:28px;display:none;}
#clock-box a {font-size:28px;text-decoration:none;}
#clock{margin-left:48px;}
#clock .digit {font-size:64px;}
#canvas{margin:0 auto;width:100%;height:100%;}
#error{margin:0 auto;text-align:center;margin-top:60px;display:none;}
.hand{cursor:pointer;}
.say{margin-left:5px;}
.space{margin-right:150px;}

/* 音乐按钮样式 */
#music-btn {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: url("music_icon.png") no-repeat center center;
    background-size: contain;
    z-index: 1000;
    cursor: pointer;
}

/* 旋转动画 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.music-on {
    animation: rotate 3s linear infinite;
}

/* 如果没有图标，可以使用文字代替 */
#music-btn::after {
    content: "🎵";
    font-size: 24px;
    display: block;
    text-align: center;
    line-height: 36px;
}

/* 暂停时的禁止播放斜杠 */
#music-btn:not(.music-on)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background: #ff4d4f;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1001;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* 移动端适配 */
@media (max-width: 768px) {
    #wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #canvas {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: -1;
    }
    #text {
        width: 90% !important;
        height: auto !important;
        position: relative !important;
        top: 20px !important;
        left: 0 !important;
        margin: 0 auto !important;
    }
    #clock-box {
        position: relative !important;
        top: 40px !important;
        left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 20px !important;
        margin: 0 auto !important;
    }
    #clock-box a {
        font-size: 20px !important;
    }
    #clock {
        margin-left: 0 !important;
    }
    #code {
        font-size: 18px !important;
    }
    #clock .digit {
        font-size: 36px !important;
    }
    #music-btn {
        top: 10px !important;
        right: 10px !important;
    }
}