/* ============================================================
   SONIC_FIELD — 页面专属样式
   通用终端风格请改 css/terminal.css，本文件只管本页
   ============================================================ */

html, body { height: 100%; overflow: hidden; background: #050505; }

/* ---------- 主题色 CSS 变量 (由 themes.js 动态覆写) ----------
   --t-p = 主发光色 rgb 三元组
   --t-s = 次发光色
   --t-w = 警示色                                          */
body {
    --t-p: 52, 211, 153;   /* emerald */
    --t-s: 34, 211, 238;   /* cyan */
    --t-w: 239, 68, 68;    /* red */
    /* 主题色软润小三角光标 (JS 加载前用 emerald 兜底) */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4,3 Q5,1.5 6.5,2 L15,7 Q17,8 15,10 L6.5,15 Q5,15.5 4,14 Z' fill='rgba(52,211,153,0.82)' stroke='rgba(52,211,153,0.35)' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto;
}

#stage { position: fixed; inset: 0; z-index: 1; }

/* ---------- 启动遮罩 ---------- */
#boot-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.8s ease;
}
#boot-overlay.hidden { opacity: 0; pointer-events: none; }

/* ---------- CLI 闪烁光标 ---------- */
.cursor-blink {
    display: inline-block; width: 9px; height: 16px;
    background: rgb(var(--t-p)); vertical-align: -2px;
    animation: cursorBlink 0.9s steps(1) infinite;
}

/* ---------- CLI 真实输入框 (控制台提示符后) ---------- */
.cli-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.cli-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: rgb(var(--t-p));
    caret-color: transparent;        /* 隐藏原生细光标, 用方块光标替代 */
    text-shadow: 0 0 6px rgba(var(--t-p), 0.45);
}
.cli-input::selection { background: rgba(var(--t-p), 0.25); }
/* 方块光标: 绝对定位于文本末端 (left 由 JS 按文本宽度更新) */
#cli-cursor {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 6px;
    height: 11px;
    pointer-events: none;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

/* ---------- 遥测数值发光 ---------- */
.telemetry-val { text-shadow: 0 0 8px rgba(var(--t-p), 0.5); }
.telemetry-val.cyan { text-shadow: 0 0 8px rgba(var(--t-s), 0.5); }

/* ---------- 节拍脉冲红闪层 ---------- */
#beat-flash {
    position: fixed; inset: 0; z-index: 14; pointer-events: none;
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.10) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.25s ease-out;
}

/* ---------- 进度条: 渐变热头 + 流光扫过 ---------- */
#progress-track { cursor: pointer; }
#progress-bar {
    background: linear-gradient(90deg,
        rgba(var(--t-p), 0.30) 0%,
        rgb(var(--t-p)) 70%,
        rgb(var(--t-s)) 92%,
        #ffffff 100%) !important;
    box-shadow: 0 0 8px rgba(var(--t-p), 0.6) !important;
    overflow: hidden;
}
/* 已播放区域内的流光 */
#progress-bar::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 36px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: progress-shimmer 2.4s linear infinite;
}
@keyframes progress-shimmer {
    from { left: -40px; }
    to   { left: 100%; }
}
#progress-track:hover #progress-bar {
    filter: brightness(1.35);
    box-shadow: 0 0 14px rgba(var(--t-p), 0.9) !important;
}

/* ---------- FX 总开关 (扫描线 + 暗角 + CRT 闪烁) ---------- */
body.fx-off::before { display: none; }              /* 关闭 CRT 扫描线 (terminal.css) */
body.fx-off .vignette-overlay { display: none; }    /* 关闭边缘暗角 */
body.fx-off.crt-flicker { animation: none; }        /* 关闭 CRT 周期性闪烁 */

/* ---------- 右侧栏 (时钟/日志 + 调控 + 遥测 统一排布) ---------- */
#side-rail {
    position: fixed;
    right: 12px;
    top: 12px;
    bottom: 12px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    width: 224px;
    pointer-events: none;
}
#control-dock {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 栏内控件撑满整宽，保持对齐 */
#side-rail .ctrl-toggle,
#side-rail .ctrl-switch,
#side-rail .ctrl-slider {
    width: 100%;
}
#side-rail .ctrl-slider input[type="range"] {
    flex: 1;
    width: auto;
}

.ctrl-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    min-width: 96px;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 左侧状态指示条 */
.ctrl-toggle::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: rgb(var(--t-p));
    box-shadow: 0 0 8px rgba(var(--t-p), 0.8);
    transition: all 0.3s;
}
.ctrl-toggle[data-state="off"]::before {
    background: #4b5563;
    box-shadow: none;
}
.ctrl-toggle:hover {
    border-color: rgba(var(--t-p), 0.35);
    background: rgba(var(--t-p), 0.06);
}
.ctrl-toggle-label {
    font-size: 10px;
    letter-spacing: 0.25em;
    color: #e2e8f0;
}
.ctrl-toggle-hint {
    font-size: 8px;
    letter-spacing: 0.15em;
    color: #6b7280;
}
.ctrl-toggle-state {
    font-size: 9px;
    letter-spacing: 0.3em;
    color: rgb(var(--t-p));
    text-shadow: 0 0 6px rgba(var(--t-p), 0.6);
}
.ctrl-toggle[data-state="off"] .ctrl-toggle-state {
    color: #6b7280;
    text-shadow: none;
}

/* ---------- 多选一切换组 (如主题色) ---------- */
.ctrl-switch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    min-width: 96px;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', monospace;
}
.ctrl-switch::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: rgb(var(--t-p));
    box-shadow: 0 0 8px rgba(var(--t-p), 0.8);
}
.ctrl-switch-opts {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.ctrl-switch-opt {
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 0.15em;
    font-family: 'JetBrains Mono', monospace;
    color: #6b7280;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.25s;
}
.ctrl-switch-opt:hover {
    border-color: rgba(var(--t-p), 0.4);
    color: #e2e8f0;
}
.ctrl-switch-opt[data-active="1"] {
    color: rgb(var(--t-p));
    border-color: rgba(var(--t-p), 0.6);
    background: rgba(var(--t-p), 0.08);
    text-shadow: 0 0 6px rgba(var(--t-p), 0.6);
}
/* 子模式加亮态 (如 RING 二次点击 BOOST): 明显更亮 + 呼吸辉光 */
.ctrl-switch-opt.boost {
    color: #fff;
    border-color: rgb(var(--t-p));
    background: rgba(var(--t-p), 0.28);
    text-shadow: 0 0 8px rgb(var(--t-p)), 0 0 16px rgba(var(--t-p), 0.8);
    box-shadow: 0 0 10px rgba(var(--t-p), 0.55), inset 0 0 6px rgba(var(--t-p), 0.35);
    animation: ctrl-boost-glow 1.2s ease-in-out infinite alternate;
}
@keyframes ctrl-boost-glow {
    from { box-shadow: 0 0 6px rgba(var(--t-p), 0.4),  inset 0 0 4px rgba(var(--t-p), 0.25); }
    to   { box-shadow: 0 0 16px rgba(var(--t-p), 0.85), inset 0 0 8px rgba(var(--t-p), 0.5); }
}

/* ============================================================
   全局主题换色 — 全界面跟随 --t-p / --t-s / --t-w
   ============================================================ */

/* 标题发光 */
.title-glow    { text-shadow: 0 0 12px rgba(var(--t-p), 0.4); }
.title-glow-lg { text-shadow: 0 0 20px rgba(var(--t-p), 0.5); }

/* 标题下发光渐变线 (覆盖 terminal.css) */
.hud-title-line { color: rgb(var(--t-p)); }
.hud-title-line::after {
    background: linear-gradient(90deg, rgb(var(--t-p)) 0%, rgba(var(--t-p), 0) 100%) !important;
}

/* 呼吸节点 / 系统时钟 */
.blinking-node { background: rgb(var(--t-p)) !important; }
#sys-time { color: rgb(var(--t-s)); }

/* 遥测数值颜色 */
#tel-rms, #tel-bpm { color: rgb(var(--t-p)); }
#tel-freq { color: rgb(var(--t-s)); }

/* 迷你均衡器 (奇偶双色交替) */
.eq-bar { background: rgba(var(--t-p), 0.7) !important; }
.eq-bar:nth-child(odd) { background: rgba(var(--t-s), 0.7) !important; }

/* 播放状态语义色 */
.state-p { color: rgb(var(--t-p)); }
.state-s { color: rgb(var(--t-s)); }
.state-w { color: rgb(var(--t-w)); }

/* 日志流语义色 */
.log-p { color: rgba(var(--t-p), 0.8); }
.log-s { color: rgba(var(--t-s), 0.8); }
.log-w { color: rgba(var(--t-w), 0.8); }

/* ---------- 曲目加载提示 (整曲解码 / 缓冲中) ---------- */
#track-loading {
    position: fixed; left: 50%; top: 42%;
    transform: translate(-50%, -50%);
    z-index: 36;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    pointer-events: none;
    font-size: 10px; letter-spacing: 0.25em; white-space: nowrap;
    color: rgb(var(--t-p));
    background: rgba(8, 8, 8, 0.72);
    border: 1px solid rgba(var(--t-p), 0.35);
    backdrop-filter: blur(4px);
}
/* 隐藏态: ID 选择器优先级高于 Tailwind .hidden, 需显式压过 display:flex */
#track-loading.hidden { display: none; }
/* 左侧闪烁节点 */
#track-loading .tl-node {
    width: 8px; height: 8px; flex: none;
    background: rgb(var(--t-w));
    animation: tlBlink 0.9s steps(1) infinite;
}
/* 右侧流水方块: 依次点亮的加载律动 */
#track-loading .tl-blocks { display: inline-flex; gap: 3px; }
#track-loading .tl-blocks i {
    width: 5px; height: 10px;
    background: rgb(var(--t-p));
    opacity: 0.15;
    animation: tlSeq 1s ease-in-out infinite;
}
#track-loading .tl-blocks i:nth-child(2) { animation-delay: 0.15s; }
#track-loading .tl-blocks i:nth-child(3) { animation-delay: 0.30s; }
#track-loading .tl-blocks i:nth-child(4) { animation-delay: 0.45s; }
@keyframes tlBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes tlSeq { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* ---------- 图标按钮 (切歌等小型操作) ---------- */
.icon-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, text-shadow 0.2s, transform 0.15s;
}
.icon-btn:hover {
    color: rgb(var(--t-p));
    text-shadow: 0 0 8px rgba(var(--t-p), 0.9);
    transform: scale(1.2);
}
.icon-btn:active { transform: scale(0.9); }

/* 节拍红闪层跟随警示色 */
#beat-flash {
    background: radial-gradient(circle at center, rgba(var(--t-w), 0.10) 0%, transparent 60%);
}

/* action-btn 按钮 (覆盖 terminal.css 的翠绿) */
.action-btn {
    border-color: rgba(var(--t-p), 0.3);
    color: rgb(var(--t-p));
}
.action-btn::before {
    background: linear-gradient(90deg, transparent, rgba(var(--t-p), 0.1), transparent);
}
.action-btn:hover {
    background: rgba(var(--t-p), 0.1);
    box-shadow: 0 0 30px rgba(var(--t-p), 0.2), inset 0 0 20px rgba(var(--t-p), 0.05);
    border-color: rgba(var(--t-p), 0.6);
}

/* 卡片悬停光效 (覆盖 terminal.css) */
.terminal-card:hover {
    box-shadow: inset 0 0 30px rgba(var(--t-p), 0.02), 0 0 30px rgba(var(--t-p), 0.08);
    border-color: rgba(var(--t-p), 0.25);
}

/* 滚动条 (覆盖 terminal.css) */
::-webkit-scrollbar-thumb { background: rgb(var(--t-p)); }

/* ---------- 拖动条 (如粒子密度) ---------- */
.ctrl-slider {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    min-width: 96px;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', monospace;
}
.ctrl-slider::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: rgb(var(--t-p));
    box-shadow: 0 0 8px rgba(var(--t-p), 0.8);
}
.ctrl-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}
.ctrl-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 104px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
}
.ctrl-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: rgb(var(--t-p));
    box-shadow: 0 0 8px rgba(var(--t-p), 0.8);
    cursor: pointer;
    transition: transform 0.15s;
}
.ctrl-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}
.ctrl-slider input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 0;
    background: rgb(var(--t-p));
    box-shadow: 0 0 8px rgba(var(--t-p), 0.8);
    cursor: pointer;
}
.ctrl-slider-val {
    font-size: 9px;
    letter-spacing: 0.12em;
    color: rgb(var(--t-p));
    text-shadow: 0 0 6px rgba(var(--t-p), 0.5);
    min-width: 36px;
    text-align: right;
}

/* ---------- 左侧音频选择面板 ---------- */
#playlist-dock {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.playlist-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}
.track-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    min-width: 128px;
    text-align: left;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 左侧状态指示条 (当前曲目高亮) */
.track-btn::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: #4b5563;
    transition: all 0.3s;
}
.track-btn[data-state="on"]::before {
    background: rgb(var(--t-p));
    box-shadow: 0 0 8px rgba(var(--t-p), 0.8);
}
.track-btn:hover {
    border-color: rgba(var(--t-p), 0.35);
    background: rgba(var(--t-p), 0.06);
}
.track-btn[data-state="on"] {
    border-color: rgba(var(--t-p), 0.5);
    background: rgba(var(--t-p), 0.08);
}
.track-btn[data-state="on"] .ctrl-toggle-label {
    color: rgb(var(--t-p));
    text-shadow: 0 0 6px rgba(var(--t-p), 0.6);
}

/* ---------- 曲目列表弹窗 (点击左栏 TRACKS 按钮弹出) ---------- */
#track-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}
#track-modal.hidden { display: none; }
.track-modal-panel {
    width: min(460px, 92vw);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: rgba(4, 6, 5, 0.94);
}
.track-modal-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#track-modal-close {
    margin-left: auto;
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}
#track-modal-close:hover {
    color: rgb(var(--t-w));
    text-shadow: 0 0 8px rgba(var(--t-w), 0.8);
}
#track-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.track-modal-panel .track-btn { flex-shrink: 0; }

/* ---------- 左侧停靠歌词 (三句滚动, 当前句居中+下划线) ---------- */
#lyric-dock {
    position: fixed;
    /* 水平居中于画面左 1/4 处 (试调后固化: 25vw) */
    left: 25vw;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(34vw, 420px);
    text-align: center;
    z-index: 36;
    display: none;
}
body.lyric-open #lyric-dock { display: block; }

/* HLX 模式: 歌词停靠在下方区域 (替代时域曲线位置) */
body.lyric-open-helix #lyric-dock {
    left: 50%;
    top: auto;
    bottom: 110px;
    transform: translateX(-50%);
    width: min(52vw, 520px);
}
body.lyric-open-helix #lyric-dock-close {
    margin-bottom: 8px;
}

#lyric-dock-close {
    background: none;
    border: none;
    margin-bottom: 14px;
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
    /* 默认隐藏但保留占位, 鼠标悬浮歌词区域时淡入 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, color 0.2s, text-shadow 0.2s;
}
#lyric-dock:hover #lyric-dock-close {
    opacity: 1;
    visibility: visible;
}
#lyric-dock-close:hover {
    color: rgb(var(--t-w));
    text-shadow: 0 0 8px rgba(var(--t-w), 0.8);
}
.lyric-slot {
    width: 100%;
    padding: 6px 0;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    /* 优先在空格处折行 (CJK 不在字间断开), 超长无空格句兜底防溢出 */
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.6;
    cursor: pointer;
    transition: color 0.3s;
}
.lyric-slot.side {
    font-size: 16px;
    letter-spacing: 0.12em;
    color: rgba(var(--t-s), 0.45);
}
.lyric-slot.side:hover { color: rgba(var(--t-s), 0.85); }
.lyric-slot.current {
    position: relative;
    /* 收缩贴合文本并水平居中, 下划线随文本长度 */
    width: fit-content;
    max-width: 100%;
    margin: 4px auto;
    padding: 12px 0 14px;
    font-size: clamp(18px, 1.9vw, 24px);
    letter-spacing: 0.2em;
    color: rgb(var(--t-ice, 243, 244, 246));
    text-shadow: 0 0 12px rgba(var(--t-p), 0.7), 0 1px 8px rgba(0, 0, 0, 0.9);
}
/* 当前句下划线 (随文本长度) */
.lyric-slot.current::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, rgb(var(--t-p)), rgb(var(--t-s)), transparent);
    box-shadow: 0 0 6px rgba(var(--t-p), 0.8);
}
/* 双语歌词: 中文翻译行 (当前句上下两行, 较小较淡) */
.lyric-zh {
    display: block;
    font-size: 0.72em;
    color: rgba(var(--t-s), 0.72);
    letter-spacing: 0.08em;
    margin-top: 4px;
}

/* 换句滚动动画: 三句依次滑入 (位移 + 淡入 + 去模糊), 带轻微级联延迟 */
.lyric-track.slide-up .lyric-slot   { animation: lyric-slot-up 0.5s cubic-bezier(0.22, 0.8, 0.32, 1) both; }
.lyric-track.slide-down .lyric-slot { animation: lyric-slot-down 0.5s cubic-bezier(0.22, 0.8, 0.32, 1) both; }
.lyric-track.slide-up .lyric-slot:nth-child(2),
.lyric-track.slide-down .lyric-slot:nth-child(2) { animation-delay: 0.05s; }
.lyric-track.slide-up .lyric-slot:nth-child(3),
.lyric-track.slide-down .lyric-slot:nth-child(3) { animation-delay: 0.10s; }
@keyframes lyric-slot-up {
    from { transform: translateY(1.6em);  opacity: 0; filter: blur(3px); }
    to   { transform: none;               opacity: 1; filter: blur(0); }
}
@keyframes lyric-slot-down {
    from { transform: translateY(-1.6em); opacity: 0; filter: blur(3px); }
    to   { transform: none;               opacity: 1; filter: blur(0); }
}

/* ---------- 底部单行歌词 (当前句, 卡拉OK式) ----------
   可读性设计: 白芯文字 + 黑色压底 + 暗色晕影底衬, 与背景彩色粒子拉开对比;
   主题识别由 主色辉光 + 底部渐变下划线 承担, 不用主题色填充文字本体 */
#lyric-line {
    position: fixed;
    left: 50%;
    bottom: 132px;                  /* 与底部控制台留出间距 */
    transform: translate(-50%, 8px);
    max-width: 80vw;
    z-index: 35;
    text-align: center;
    white-space: nowrap;
    padding: 8px 22px;
    font-family: KaiTi, STKaiti, '楷体', 'JetBrains Mono', serif;
    font-size: clamp(17px, 1.9vw, 23px);
    letter-spacing: 0.2em;
    /* 文字 = 主题冰白色 (色阶最高端; 宣纸主题下为松烟墨黑), 黑色压底保对比 */
    color: rgb(var(--t-ice, 243, 244, 246));
    text-shadow:
        0 0 14px rgba(var(--t-p), 0.75),
        0 0 34px rgba(var(--t-p), 0.35),
        0 1px 8px rgba(0, 0, 0, 0.9);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42) 0%, transparent 72%);
    border-radius: 12px;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease, visibility 0.45s ease;
    pointer-events: none;
}
/* 主题渐变下划线 (随文本长度伸缩) */
#lyric-line::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 3px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--t-p)), rgb(var(--t-s)), transparent);
    box-shadow: 0 0 6px rgba(var(--t-p), 0.8);
}
#lyric-line.on {
    opacity: 1;
    transform: translate(-50%, 0);
    filter: blur(0);
}
#lyric-line.on.pop { animation: lyric-pop 0.45s ease; }
@keyframes lyric-pop {
    0%   { opacity: 0; transform: translate(-50%, 8px); filter: blur(4px); }
    100% { opacity: 1; transform: translate(-50%, 0);   filter: blur(0); }
}

/* ---------- 左栏 LYRICS 按钮: 无歌词曲目时置灰 ---------- */
#btn-lyrics.dim { opacity: 0.4; }

/* ---------- 歌词 × PRISM 主题适配 ----------
   歌词文字改用白色系，避免与 PRISM 色阶的亮紫混杂 */
body[data-theme="prism"] .lyric-slot.side {
    color: rgba(255, 255, 255, 0.45) !important;
}
body[data-theme="prism"] .lyric-slot.side:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}
body[data-theme="prism"] .lyric-zh {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ---------- 歌词 × PAPER 宣纸主题适配 ----------
   画布是米白浅底: 停靠视图左条随 body 底色转米白, 当前句辉光改淡墨晕 */
body[data-theme="paper"] { background-color: rgb(242, 239, 231); }
body[data-theme="paper"] #lyric-line {
    text-shadow:
        0 0 10px rgba(var(--t-p), 0.30),
        0 1px 6px rgba(242, 239, 231, 0.9);
    background: radial-gradient(ellipse at center, rgba(242, 239, 231, 0.50) 0%, transparent 72%);
}
body[data-theme="paper"] .lyric-slot.current {
    text-shadow: 0 0 8px rgba(var(--t-p), 0.30), 0 1px 6px rgba(242, 239, 231, 0.9);
}

/* ---------- 底部中央面板: 播放顺序按钮 ---------- */
#btn-order { min-width: 78px; text-align: center; }

/* ---------- 左栏当前曲目按钮: 限宽, 超长歌名左右滚动 ---------- */
#btn-tracklist { max-width: 184px; }
.track-name-clip {
    display: block;
    max-width: 100%;
    overflow: hidden;
}
#dock-track-name {
    display: inline-block;
    white-space: nowrap;
}
#dock-track-name.marquee {
    animation: track-marquee var(--marquee-dur, 6s) ease-in-out infinite alternate;
}
@keyframes track-marquee {
    0%, 15%    { transform: translateX(0); }
    85%, 100%  { transform: translateX(calc(-1 * var(--marquee-x, 0px))); }
}

/* ---------- 蝴蝶徽标 (标题旁, 双翼 3D 扇翅, 周期随 BPM) ---------- */
#hud-butterfly {
    --flap: 1.15s;                    /* 扇翅周期 (固定, 舒缓) */
    position: relative;
    width: 42px;
    aspect-ratio: 2480.393 / 1642.067;
    flex-shrink: 0;
    perspective: 160px;               /* 扇翅 3D 透视 */
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(var(--t-p), 0.55));
    transition: transform 0.14s ease-out;
    animation: bflySway 5s ease-in-out infinite;
}
#hud-butterfly.beat-pop {
    transform: scale(1.22) rotate(-7deg);
}
#hud-butterfly .wing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: rgb(var(--t-p));
}
/* 左右翼: 各裁一半, 绕身体中轴反向 rotateY => 扇翅 */
#hud-butterfly .wing-l {
    clip-path: inset(-5% 49.8% -5% 0);
    transform-origin: 100% 55%;
    animation: flapL var(--flap) ease-in-out infinite;
}
#hud-butterfly .wing-r {
    clip-path: inset(-5% 0 -5% 49.8%);
    transform-origin: 0% 55%;
    animation: flapR var(--flap) ease-in-out infinite;
}
@keyframes flapL {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(-16deg); }
}
@keyframes flapR {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(16deg); }
}
@keyframes bflySway {
    0%, 100% { rotate: 0deg; }
    50%      { rotate: 4deg; }
}

/* ---------- 蝴蝶徽标: 点击隐藏/恢复全部面板 (PC/移动端通用) ---------- */
#hud-butterfly { pointer-events: auto; cursor: pointer; }
#hud-butterfly:hover { filter: drop-shadow(0 0 10px rgba(var(--t-p), 0.9)); }
#side-rail, #playlist-dock, #console-dock {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 歌词文本不随面板隐藏 (隐藏 UI 后仍保留歌词) */
body.panels-hidden #side-rail,
body.panels-hidden #playlist-dock,
body.panels-hidden #console-dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---------- HUD 小标签 ---------- */
.hud-label {
    font-size: 9px; letter-spacing: 0.3em;
    text-transform: uppercase; color: #6b7280;
}


/* ============================================================
   PAPER 宣纸主题: 白底黑墨全局反转 (body[data-theme="paper"])
   主题变量 (--t-p/s/w) 已由 themes.js 注入深色, 此处只处理
   结构性硬编码: 底色/卡片/边框/Tailwind 灰阶/暗角/扫描线
   ============================================================ */
body[data-theme="paper"] {
    background: #f2efe7;               /* 宣纸米白 */
    color: #2b2b2d;
}
body[data-theme="paper"] #boot-overlay { background: rgba(242, 239, 231, 0.94); }
body[data-theme="paper"] #track-loading {
    background: rgba(250, 248, 242, 0.82);
    border-color: rgba(40, 38, 34, 0.25);
}

/* 卡片与 HUD 边框: 深边浅底 */
body[data-theme="paper"] .terminal-card { background: rgba(250, 248, 242, 0.72); }
body[data-theme="paper"] .hud-border {
    border-color: rgba(40, 38, 34, 0.22);
    background: rgba(250, 248, 242, 0.5);
}
body[data-theme="paper"] .hud-border::before,
body[data-theme="paper"] .hud-border::after { border-color: #3a3835; }
body[data-theme="paper"] .hud-border:hover { border-color: rgba(40, 38, 34, 0.4); }

/* Tailwind 灰阶/白色文本 -> 墨色 */
body[data-theme="paper"] .text-white   { color: #1f1e1c !important; }
body[data-theme="paper"] .text-gray-300 { color: #3f3d3a !important; }
body[data-theme="paper"] .text-gray-400 { color: #57544e !important; }
body[data-theme="paper"] .text-gray-500 { color: #6b675f !important; }
body[data-theme="paper"] .text-gray-600 { color: #7d786e !important; }
body[data-theme="paper"] .hud-label    { color: #6b675f; }
body[data-theme="paper"] .border-gray-800 { border-color: rgba(40, 38, 34, 0.15) !important; }
body[data-theme="paper"] .bg-gray-800  { background-color: rgba(40, 38, 34, 0.14) !important; }

/* 边缘暗角 -> 陈年宣纸泛黄晕影 */
body[data-theme="paper"] .vignette-overlay {
    background: radial-gradient(circle at center, transparent 30%, rgba(122, 112, 92, 0.38) 100%);
}
/* CRT 扫描线/RGB 色散 -> 极浅纹理 */
body[data-theme="paper"]::before {
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(60, 55, 45, 0.05) 50%),
                linear-gradient(90deg, rgba(60, 55, 45, 0.02), rgba(60, 55, 45, 0.01), rgba(60, 55, 45, 0.02));
    background-size: 100% 2px, 3px 100%;
}
/* 发光效果在浅底下收敛为淡雅墨韵 */
body[data-theme="paper"] .title-glow,
body[data-theme="paper"] .title-glow-lg { text-shadow: 0 1px 8px rgba(var(--t-p), 0.25); }

/* ============================================================
   移动端适配 (max-width: 767px) — 桌面端完全不受影响
   布局: 右侧栏 -> 顶部横向滚动条; 左侧选曲面板 -> 底部横向滚动条
   ============================================================ */
@media (max-width: 767px) {
    /* ---------- 停靠歌词 UI 仍为桌面端专属 (底部单行可用) ---------- */
    #lyric-dock,
    #btn-lyrics { display: none !important; }

    /* ---------- 底部单行歌词: 靠近底部控制台 (遮挡可用蝴蝶徽标隐藏面板) ---------- */
    #lyric-line {
        bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        max-width: 92vw;
        padding: 6px 16px;
        font-size: clamp(15px, 4.2vw, 19px);
    }
    #lyric-line::after { left: 16px; right: 16px; }


    /* ---------- 刘海屏安全区: HUD 底部让开 home 指示条 ---------- */
    .fixed.inset-0.z-30 {
        padding-top: calc(1rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- 右侧栏 -> 顶部横向滚动条 (时钟/遥测面板本已隐藏) ---------- */
    #side-rail {
        /* 让开顶部标题区 (含刘海安全区) */
        top: calc(76px + env(safe-area-inset-top, 0px));
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        flex-direction: row;
        padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    }
    #control-dock {
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    #control-dock::-webkit-scrollbar { display: none; }
    /* 覆盖桌面端的整宽撑满规则, 恢复内容宽度并禁止压缩 */
    #side-rail .ctrl-toggle,
    #side-rail .ctrl-switch,
    #side-rail .ctrl-slider {
        width: auto;
        flex-shrink: 0;
    }

    /* ---------- 左侧选曲面板 -> 底部横向滚动条 (贴在控制台上方) ---------- */
    #playlist-dock {
        top: auto;
        /* 让开底部控制台 (含 home 指示条安全区) */
        bottom: calc(104px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        transform: none;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    }
    #playlist-dock::-webkit-scrollbar { display: none; }
    .playlist-header {
        flex-shrink: 0;
        justify-content: center;
    }
    /* 子面板在横向条内不压缩 (曲目列表已移入弹窗, 见 #track-modal) */
    #response-dock, #sens-dock { flex-shrink: 0; }
    .track-btn { flex-shrink: 0; min-width: 0; }

    /* ---------- 触控目标放大 (>=36px 行高, 滑块拇指 16px) ---------- */
    .ctrl-toggle,
    .ctrl-switch,
    .ctrl-slider,
    .track-btn {
        min-height: 44px;
        justify-content: center;
    }
    .ctrl-switch-opt {
        padding: 8px 12px;
        font-size: 10px;
    }
    .ctrl-slider input[type="range"] { height: 4px; }
    .ctrl-slider input[type="range"]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
    .ctrl-slider input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    /* ---------- 底部控制台: 播放键与进度条热区加大 ---------- */
    #btn-play { padding: 10px 18px !important; }
    #progress-track { height: 28px; }

    /* ---------- 启动遮罩: 收窄字距, 按钮全宽加大 ---------- */
    #boot-overlay { padding: 0 24px; text-align: center; }
    #boot-overlay h1 {
        font-size: 1.6rem;
        letter-spacing: 0.2em;
    }
    #boot-overlay .action-btn {
        width: 100%;
        max-width: 320px;
        padding: 14px 20px;
    }
}

/* ---------- 停靠蝴蝶指示器 (方案 D 修订): 当前句左侧栖息 ---------- */
#lyric-bfly-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}
.dock-bfly-perch {
    position: absolute;
    width: 26px;
    height: 17px;
    left: 0;
    top: 0;
    opacity: 0;
    transform-origin: center center;
    perspective: 120px;
    transition: left 0.35s cubic-bezier(0.22, 0.8, 0.32, 1),
                top 0.35s cubic-bezier(0.22, 0.8, 0.32, 1),
                opacity 0.25s ease;
}
.dock-bfly-perch.moving {
    animation: dock-perch-tilt 0.35s ease;
}
@keyframes dock-perch-tilt {
    0%   { transform: rotate(-18deg) scale(0.9); }
    50%  { transform: rotate(14deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}
.dock-bfly-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: rgb(var(--t-ice));
    opacity: 0.78;
    filter: drop-shadow(0 0 5px rgba(var(--t-ice), 0.35));
    transform-origin: center center;
}
/* 扇翅: 左右翼通过 clip-path 裁半, 用 scaleX 模拟 3D 扇动 */
.dock-bfly-perch .wing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dock-bfly-perch .wing-l {
    clip-path: inset(-5% 49.8% -5% 0);
    transform-origin: 100% 55%;
    animation: dock-bfly-flap-l 0.42s ease-in-out infinite;
}
.dock-bfly-perch .wing-r {
    clip-path: inset(-5% 0 -5% 49.8%);
    transform-origin: 0% 55%;
    animation: dock-bfly-flap-r 0.42s ease-in-out infinite;
}
@keyframes dock-bfly-flap-l {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(-16deg); }
}
@keyframes dock-bfly-flap-r {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(16deg); }
}