/* ========================================================= */
/* --- 1. 字体与基础设置 (笑傲江湖·大反派系统·明朝绘卷) --- */
/* ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Serif+SC:wght@600&display=swap');

/* 全局动态背景 —— 酒、竹、古筝暗纹，奢华金红 */
body {
    min-height: 100vh;
    background: #1a0e0b;  /* 玄墨底 */
    font-family: 'Noto Sans SC', sans-serif;
    padding: 20px 12px;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(180, 120, 60, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 90% 70%, rgba(200, 160, 80, 0.15) 0%, transparent 40%),
        repeating-linear-gradient(45deg, rgba(140, 80, 40, 0.04) 0px, rgba(140, 80, 40, 0.04) 2px, transparent 2px, transparent 10px),
        url('data:image/svg+xml;utf8,<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><path d="M25 85 Q40 40 60 65 T95 50" stroke="%23b78a5e" fill="none" stroke-width="0.9" opacity="0.25"/><circle cx="30" cy="100" r="6" fill="%23996633" opacity="0.15"/><path d="M80 20 L100 30 L90 45 L70 35 Z" fill="%23aa7a4c" opacity="0.12"/><text x="10" y="30" font-family="Arial" font-size="16" fill="%23c9a87c" opacity="0.2">⚔️</text></svg>');
    background-size: 200px 200px, 240px 240px, auto, 140px 140px;
    background-blend-mode: overlay;
    animation: bgDrift 32s infinite alternate ease-in-out;
}

@keyframes bgDrift {
    0% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
    100% { background-position: 6% 8%, 94% 92%, 20px 10px, 15px 25px; }
}

/* 气泡容器——对话流 */
.cinnamoroll-bubble {
    position: relative;
    margin: 30px 2px;
    border-radius: 16px 4px 16px 4px;
    font-family: 'Noto Sans SC', sans-serif;
    transition: all 0.2s ease-in-out;
    background: #fcf6e8;      /* 牙色宣纸 */
    color: #2c1e12;           /* 深褐，极致清晰 */
    border: 1px solid #c9aa7b;
    box-shadow: 0 8px 0 #2a1b0c, 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 1px #e7cfae;
    backdrop-filter: blur(2px);
    word-break: break-word;
}

.cinnamoroll-content {
    padding: 18px 16px !important;
    position: relative;
    z-index: 2;
}

/* ========================================================= */
/* --- 2. AI 气泡：天道之卷 (系统/说书人) 紫金雅韵 --- */
/* ========================================================= */
.cinnamoroll-bubble.ai-bubble {
    background: linear-gradient(145deg, #fdf7e9, #f3e7d4);
    border-left: 6px solid #6a0dad;      /* 紫气东来 */
    border-right: 1px solid #b4925a;
    box-shadow: 0 6px 0 #3e1d3a, 0 12px 18px #00000060, inset 0 0 0 1px #ebd5b0;
}

.cinnamoroll-bubble.ai-bubble::before {
    content: "📖 天道卷 · 世事如棋";
    position: absolute;
    top: -26px; left: 0px;
    font-size: 14px;
    font-weight: bold;
    color: #4a148c;
    background: #f7e7d5;
    padding: 3px 14px 3px 10px;
    border-radius: 30px 8px 0 0;
    border-left: 3px solid #6a0dad;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    letter-spacing: 1px;
}

.cinnamoroll-bubble.ai-bubble::after {
    content: '☯';
    position: absolute;
    bottom: 5px; right: 10px;
    font-size: 22px;
    color: #4a2e1e;
    opacity: 0.25;
    z-index: 1;
    transform: rotate(10deg);
}

/* ========================================================= */
/* --- 3. User 气泡：侠客行记 (墨柒/玩家) 碧血丹心 --- */
/* ========================================================= */
.cinnamoroll-bubble.user-bubble {
    background: #f9f2e4;
    border-right: 6px solid #1b6b2e;      /* 松石绿 · 江湖绿林 */
    border-left: 1px solid #b4925a;
    box-shadow: 0 6px 0 #1e3b1e, 0 12px 18px #00000060, inset 0 0 0 1px #ebd5b0;
}

.cinnamoroll-bubble.user-bubble::before {
    content: "⚔️ 江湖行 · 一剑一人";
    position: absolute;
    top: -26px; right: 0px;
    font-size: 14px;
    font-weight: bold;
    color: #1b5e20;
    background: #e8f5e9;
    padding: 3px 10px 3px 14px;
    border-radius: 8px 30px 0 0;
    border-right: 3px solid #2e7d32;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    letter-spacing: 1px;
}

.cinnamoroll-bubble.user-bubble::after {
    content: '侠';
    position: absolute;
    top: 8px; left: 10px;
    font-size: 18px;
    font-family: 'Noto Serif SC', serif;
    font-weight: 900;
    color: #c0392b;                /* 朱砂红，清晰醒目 */
    border: 2px solid #c0392b;
    padding: 1px 5px;
    border-radius: 2px;
    opacity: 0.8;
    z-index: 1;
    background: #fcf6e8aa;
    box-shadow: 0 2px 4px #00000020;
}

/* ========================================================= */
/* --- 4. 消息文本 —— 所有文字极致清晰，变色字体高对比 --- */
/* ========================================================= */
.inazuma-message-text {
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: #2c1e12;   /* 基础深褐，清晰 */
}

/* 加粗：内力·朱砂红 (醒目) */
.inazuma-message-text strong {
    color: #c0392b !important;
    font-weight: 800;
    text-shadow: 0 0 1px #ffdddd;
}

/* 斜体：剑意·冷月蓝 (清冽) */
.inazuma-message-text em {
    color: #1e5f6b !important;
    font-style: italic;
    font-weight: 500;
}

/* 加粗斜体：天命·璀璨金 (奢华) */
.inazuma-message-text strong em,
.inazuma-message-text em strong {
    color: #b8860b !important;
    text-shadow: 0 0 4px #f1cf9b;
    font-weight: 800;
}

/* 标题：浓墨重彩 */
.inazuma-message-text h1,
.inazuma-message-text h2,
.inazuma-message-text h3 {
    color: #1a0e0b !important;
    border-bottom: 2px solid #8b4513;
    padding-bottom: 4px;
    margin: 12px 0 8px;
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
}

/* 删除线：身陨道消 */
.inazuma-message-text del {
    color: #7f6e5d;
    text-decoration: line-through;
}

/* ========================================================= */
/* --- 5. 代码块：武學秘笈·心法 (清晰仿古) --- */
/* ========================================================= */
pre {
    margin: 16px 0px !important;
    padding: 34px 12px 10px 12px !important;
    background: #efe0cd !important;
    border-radius: 6px 2px 6px 2px;
    border: 1.5px solid #8b4513;
    position: relative;
    overflow-x: auto;
    box-shadow: inset 0 0 12px #0000001a, 0 4px 0 #5a3a1e;
}

pre::before {
    content: "📜 武學秘笈 · 心法口訣";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28px;
    background: #a0522d;
    color: #fcf3da;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding-left: 12px;
    border-bottom: 2px solid #6b3e1c;
    letter-spacing: 2px;
    border-radius: 4px 0 0 0;
}

pre code {
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 14px !important;
    color: #1e130c !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
}

pre code strong { color: #c0392b !important; }
pre code em { color: #1e5f6b !important; }

/* ========================================================= */
/* --- 6. 引用块：江湖箴言/诗号 --- */
/* ========================================================= */
blockquote {
    margin: 14px 0;
    padding: 12px 16px;
    background: #efe0cdc0;
    border-left: 5px solid #8b4513;
    color: #3a281c !important;
    font-weight: 600 !important;
    font-size: 15px;
    font-style: italic;
    border-radius: 0 16px 16px 0;
    box-shadow: inset 0 0 8px #dac09e;
}

blockquote strong { color: #b3470b !important; }

/* 分割线：水墨渐变 */
hr {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8b5a2b, #c9aa7b, #8b5a2b, transparent);
    margin: 24px 0;
    opacity: 0.7;
}

/* 链接样式（若有） */
a {
    color: #8b4513;
    font-weight: bold;
    text-decoration: underline wavy #b8860b;
}

/* ========================================================= */
/* --- 7. 移动端优化 (手机适配) --- */
/* ========================================================= */
@media (max-width: 600px) {
    body { padding: 16px 8px; }
    .cinnamoroll-bubble { margin: 22px 2px; }
    .cinnamoroll-content { padding: 14px 12px !important; }
    .cinnamoroll-bubble::before { top: -22px; font-size: 12px; }
    .inazuma-message-text { font-size: 15px; }
}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>武侠风播放器 - 编钟定制版</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5; 
            /* 页面背景装饰，实际使用时可删除 */
            background-image: repeating-linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5), repeating-linear-gradient(45deg, #e5e5e5 25%, #f0f2f5 25%, #f0f2f5 75%, #e5e5e5 75%, #e5e5e5);
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
        }

        /* --- 编钟悬浮按钮 (完全透明，不遮挡文字) --- */
        #player-trigger {
            position: fixed;
            left: 20px; 
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 60px;
            background-color: transparent; 
            border: none;
            z-index: 1000;
            cursor: pointer;
            transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

            /* 周朝编钟图标背景 (SVG) - 纯图案，无文字 */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M40,25 C30,5 70,5 60,25' fill='none' stroke='rgba(80, 80, 80, 0.8)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M30,25 L70,25 L85,105 Q50,90 15,105 Z' fill='rgba(255, 255, 255, 0.1)' stroke='rgba(80, 80, 80, 0.8)' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='35' cy='45' r='3' fill='rgba(80, 80, 80, 0.8)'/%3E%3Ccircle cx='65' cy='45' r='3' fill='rgba(80, 80, 80, 0.8)'/%3E%3Ccircle cx='32' cy='65' r='3' fill='rgba(80, 80, 80, 0.8)'/%3E%3Ccircle cx='68' cy='65' r='3' fill='rgba(80, 80, 80, 0.8)'/%3E%3Ccircle cx='29' cy='85' r='3' fill='rgba(80, 80, 80, 0.8)'/%3E%3Ccircle cx='71' cy='85' r='3' fill='rgba(80, 80, 80, 0.8)'/%3E%3Cline x1='50' y1='25' x2='50' y2='95' stroke='rgba(80, 80, 80, 0.8)' stroke-width='2'/%3E%3C/svg%3E");
            background-size: contain; 
            background-repeat: no-repeat;
            background-position: center;

            /* 古风轻微悬浮呼吸特效 */
            animation: bell-float 3s infinite alternate ease-in-out;
            user-select: none; 
        }

        @keyframes bell-float {
            0% { transform: translateY(-50%) scale(1); filter: drop-shadow(0 0 2px rgba(80, 80, 80, 0.3)); }
            100% { transform: translateY(-52%) scale(1.05); filter: drop-shadow(0 5px 8px rgba(80, 80, 80, 0.6)); }
        }

        #player-trigger:hover {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M40,25 C30,5 70,5 60,25' fill='none' stroke='rgba(212, 60, 51, 0.9)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M30,25 L70,25 L85,105 Q50,90 15,105 Z' fill='rgba(212, 60, 51, 0.1)' stroke='rgba(212, 60, 51, 0.9)' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='35' cy='45' r='3' fill='rgba(212, 60, 51, 0.9)'/%3E%3Ccircle cx='65' cy='45' r='3' fill='rgba(212, 60, 51, 0.9)'/%3E%3Ccircle cx='32' cy='65' r='3' fill='rgba(212, 60, 51, 0.9)'/%3E%3Ccircle cx='68' cy='65' r='3' fill='rgba(212, 60, 51, 0.9)'/%3E%3Ccircle cx='29' cy='85' r='3' fill='rgba(212, 60, 51, 0.9)'/%3E%3Ccircle cx='71' cy='85' r='3' fill='rgba(212, 60, 51, 0.9)'/%3E%3Cline x1='50' y1='25' x2='50' y2='95' stroke='rgba(212, 60, 51, 0.9)' stroke-width='2'/%3E%3C/svg%3E");
            filter: drop-shadow(0 0 10px rgba(212, 60, 51, 0.5));
        }

        /* --- 播放器面板 --- */
        #player-panel {
            position: fixed;
            left: -320px; 
            top: 50%;
            transform: translateY(-50%);
            width: 320px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 5px 0 15px rgba(0,0,0,0.08);
            border-radius: 0 12px 12px 0;
            z-index: 999;
            transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
        }

        #player-panel.active {
            left: 0;
        }

        .panel-header {
            background-color: #d43c33;
            color: #fff;
            padding: 15px;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            letter-spacing: 2px;
        }

        .playlist {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 450px; 
            overflow-y: auto;
        }

        .playlist li {
            padding: 12px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            font-size: 14px;
            color: #444;
            transition: all 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .playlist li:hover {
            background-color: #fdf5f5;
            color: #d43c33;
        }

        .playlist li.playing {
            color: #d43c33;
            font-weight: bold;
            background-color: #fff3f3;
        }

        .playlist li.playing::after {
            content: "ılılı"; 
            font-size: 12px;
            animation: sound-wave 1s infinite alternate;
        }

        @keyframes sound-wave {
            0% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .playlist::-webkit-scrollbar { width: 4px; }
        .playlist::-webkit-scrollbar-thumb { background-color: rgba(212, 60, 51, 0.3); border-radius: 2px; }
    </style>
</head>
<body>

    <div id="player-trigger"></div>

    <div id="player-panel">
        <div class="panel-header">江湖乐谱</div>
        <ul id="playlist" class="playlist">
            <li data-src="https://music.163.com/song/media/outer/url?id=1895081222.mp3">桃花岛</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=1386460251.mp3">天下</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=34014045.mp3">兰君</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=30031035.mp3">笑傲江湖曲</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=195913.mp3">笑傲江湖</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=5241652.mp3">沧海一声笑</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=258070.mp3">比剑</li>
            <li data-src="https://music.163.com/song/media/outer/url?id=258028.mp3">只记今朝笑(粤)</li>
        </ul>
        <audio id="audio-player" style="display:none;"></audio>
    </div>

    <script>
        const trigger = document.getElementById('player-trigger');
        const panel = document.getElementById('player-panel');
        const audio = document.getElementById('audio-player');
        const songs = document.querySelectorAll('.playlist li');
        let currentPlaying = null;

        trigger.addEventListener('click', () => {
            panel.classList.toggle('active');
            if (panel.classList.contains('active')) {
                trigger.style.left = '330px'; 
            } else {
                trigger.style.left = '20px';
            }
        });

        songs.forEach((song) => {
            song.addEventListener('click', function() {
                const src = this.getAttribute('data-src');
                if (currentPlaying === this && !audio.paused) {
                    audio.pause();
                    this.classList.remove('playing');
                    return;
                }
                songs.forEach(s => s.classList.remove('playing'));
                this.classList.add('playing');
                if (audio.src !== src) audio.src = src;
                
                audio.play().catch(e => console.log("播放受限:", e));
                currentPlaying = this;
            });
        });

        audio.addEventListener('ended', () => {
            if (currentPlaying) {
                let nextSong = currentPlaying.nextElementSibling || songs[0];
                nextSong.click();
            }
        });
    </script>
</body>
</html>