/*
 * base.css - 移动优先基础样式
 * 核心原则：可读、可滚动、不卡顿
 * 无 position:fixed、无复杂动画
 */

/* ===== 桌面专属组件 移动端强制隐藏 ===== */
/* 物理参数监视面板：DOM 始终存在，但小屏死活不显示 */
.physics-monitor {
    display: none;
}

/* ===== 水墨渐显首屏 Hero ===== */
@property --ink-spread {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.hero-ink-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at 50% 42%,
            transparent var(--ink-spread),
            #f5f0e8 calc(var(--ink-spread) + 2%));
    pointer-events: none;
    animation: ink-spread 2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

/* 遮罩中心的站名标题 */
.hero-ink-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-title, 'Ma Shan Zheng', cursive);
    font-size: clamp(2rem, 8vw, 4rem);
    color: #3a2a1a;
    letter-spacing: 0.3em;
    opacity: 0;
    animation:
        hero-title-in 0.6s ease-out 0.1s forwards,
        hero-title-out 0.5s ease-in 1.2s forwards;
    white-space: nowrap;
}

/* 渐显动画已完成后隐藏整个遮罩 */
.hero-ink-overlay.done {
    display: none;
}

/* 如果本次会话已播放过，直接隐藏 */
.hero-ink-overlay.skip {
    display: none;
}

@keyframes ink-spread {
    0% {
        --ink-spread: 0%;
    }

    100% {
        --ink-spread: 85%;
    }
}

@keyframes hero-title-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}

@keyframes hero-title-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15);
        filter: blur(4px);
    }
}

/* ===== CSS Reset & Variables ===== */
:root {
    --bg-color: #f5f5f5;
    --text-color: #2c2c2c;
    /* 胭脂红/朱砂红：比原版大红(#c91f37)更沉稳，更有历史感 */
    --accent-color: #B03A2E;
    /* 中国红 - 明亮正气 (备用原色: #c91f37) */
    --accent-blue: #1A5599;
    /* 霁蓝 - 更深邃典雅 */
    /* 宣纸白 - 暖色调护眼，更有书卷气 (原: #ffffff) */
    --card-bg: #fdfbf7;
    --font-title: 'Ma Shan Zheng', cursive;
    --font-body: 'LXGW WenKai Screen', 'Noto Serif SC', serif;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --gradient-start: #e8f0e8;
    --gradient-end: #f5f0e8;
    --highlight-color: #c91f37;
    --card-text-min-height: clamp(350px, 60vw, 480px);
    --card-vertical-padding: clamp(1rem, 3vw, 2rem);
    --card-block-height: calc(var(--card-text-min-height) + (var(--card-vertical-padding) * 2));
    /* 与强调色保持一致 */
}

/* 深色模式变量 */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e8e4dc;
    --accent-color: #e85a6b;
    --accent-blue: #7CA5D6;
    /* 稍亮的蓝，提高深色背景对比度 */
    --card-bg: #2a2a2a;
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --gradient-start: #1a1a1a;
    --gradient-end: #252520;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 选区颜色 ===== */
::selection {
    background: var(--accent-color);
    color: #fff;
}

::-moz-selection {
    background: var(--accent-color);
    color: #fff;
}

/* ===== 自定义滚动条 ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 4px;
    /* 极细 */
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 4px;
    opacity: 0.8;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a01830;
    /* 深红悬停 */
    opacity: 1;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--bg-color);
    min-height: 100vh;
    line-height: 1.6;
    /* 移动端：允许自然滚动 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== 背景 - 简化版 ===== */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    z-index: -1;
    transition: background 0.3s ease;
}

/* ===== 文字游戏 ===== */
:root {
    --char-cell-size: 24px;
}

.char-game-btn {
    position: fixed;
    right: 10px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 2px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-color);
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.char-game-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
}

.char-game-nav.active {
    display: flex;
}

.char-game-nav-cells {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--char-cell-size);
    gap: 4px;
}

.char-game-nav-cell {
    width: var(--char-cell-size);
    height: var(--char-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(201, 31, 55, 0.35);
    border-radius: 6px;
}

.char-game-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 2200;
}

.char-game-overlay.active {
    display: block;
}

.char-game-panel {
    position: absolute;
    width: min(92vw, 640px);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 10px;
    padding: 12px 12px 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    z-index: 4;
}

.char-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 8px;
    position: relative;
    z-index: 6;
}

.char-game-close {
    border: none;
    background: transparent;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
    position: relative;
    z-index: 6;
}

.char-game-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 4px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 6;
}

.char-game-cell {
    height: var(--char-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.95rem;
    color: var(--text-color);
    background: rgba(250, 250, 250, 0.8);
    border: 1px dashed rgba(0, 0, 0, 0.08);
}

.char-game-cell.punct {
    background: rgba(217, 58, 73, 0.08);
    border: 1px solid rgba(217, 58, 73, 0.2);
    color: #c91f37;
    font-weight: bold;
}

.char-game-cell.filled {
    border-style: solid;
}

.char-game-cell.prefilled {
    background: rgba(201, 31, 55, 0.06);
    color: #b32034;
}

.char-game-cell.hit {
    animation: char-hit 0.22s ease-out;
}

@keyframes char-hit {
    0% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

.char-game-hint {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    position: relative;
    z-index: 6;
}

.char-fall-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

.char-fall-item {
    position: absolute;
    font-size: 20px;
    color: #c91f37;
    opacity: 0.95;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    text-shadow: 0 0 6px rgba(217, 58, 73, 0.3);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(201, 31, 55, 0.35);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    touch-action: manipulation;
}

.char-game-dialog {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.15);
}

.char-game-dialog.active {
    display: flex;
}

.char-game-dialog-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    min-width: 200px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.char-game-dialog-title {
    font-size: 1rem;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 10px;
}

.char-game-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.char-game-dialog-btn {
    border: 2px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-color);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
}

.char-game-dialog-btn.secondary {
    border-color: #999;
    color: #666;
}

@media (max-width: 768px) {
    :root {
        --char-cell-size: 21px;
    }

    .char-game-btn {
        right: 8px;
        bottom: 80px;
        width: 50px;
        height: 50px;
    }

    .char-game-panel {
        width: calc(100vw - 32px);
    }

    .char-game-grid {
        transform: scale(0.9);
        transform-origin: top center;
    }

    .char-game-nav-cells {
        transform: scale(0.9);
        transform-origin: top center;
    }

    .char-game-cell {
        font-size: 0.8rem;
    }
}

/* ===== 雪花特效强制关闭 ===== */
.snowflake {
    display: none !important;
}

/* ===== 主容器 ===== */
.container {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    padding-top: env(safe-area-inset-top, 1rem);
    padding-bottom: env(safe-area-inset-bottom, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ===== 页头 ===== */
header {
    text-align: center;
    padding: 0.8rem 1rem;
    background-color: rgba(255, 255, 255, 0.65);
    /* 遮光罩效果 */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    /* 磨砂质感边框 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* 与页脚一致 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    /* 宽度与下方卡片对齐 */
    width: 95%;
    max-width: clamp(320px, 75vw, 600px);

    /* 内部留白 */
    margin-bottom: 0.5rem;
    /* 顶部留白，防止与上方按钮重叠 */
    margin-top: 0.5rem;
    position: relative;
}

header.char-game-active {
    padding-bottom: calc(0.8rem + var(--char-cell-size) + 4px);
}

.site-title {
    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

@keyframes text-breathe {

    0%,
    100% {
        text-shadow: 0 0 1px rgba(176, 58, 46, 0.05);
        /* 极淡 */
    }

    50% {
        text-shadow: 0 0 8px rgba(176, 58, 46, 0.25);
        /* 略明显的红色光晕 */
    }
}

/* 标题石章装饰 - 不影响标题居中 */
.title-seal {
    height: 1.1em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
    margin-right: -1.4em;
    /* 抵消石章宽度对居中的影响 */
    opacity: 0.9;
    /* 微光效果 */
    filter: drop-shadow(0 0 8px rgba(200, 50, 50, 0.4));
    animation: seal-glow 3s ease-in-out infinite alternate;
}

@keyframes seal-glow {
    from {
        filter: drop-shadow(0 0 6px rgba(200, 50, 50, 0.3));
    }

    to {
        filter: drop-shadow(0 0 12px rgba(200, 50, 50, 0.6));
    }
}

.subtitle {
    font-size: 0.85rem;
    color: #555;
    letter-spacing: 1px;
}

.header-stars {
    letter-spacing: 5px;
    font-size: 0.8rem;
    color: #999;
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* ===== 诗词卡片 ===== */
.poem-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.poem-content {
    width: 95%;
    max-width: clamp(320px, 75vw, 600px);
    background-color: var(--card-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    border-radius: 4px;
    padding: var(--card-vertical-padding) clamp(0.5rem, 2vw, 2rem);
    padding-top: calc(var(--card-vertical-padding) + 18px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    perspective: 1000px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 强化版量子呼吸脉冲层 */
.poem-content::after {
    content: "";
    position: absolute;
    inset: -5px;
    /* 增加溢出范围 */
    border-radius: 8px;
    /* 强力量子荧光：深蓝与紫红的交织 */
    box-shadow:
        0 0 40px rgba(68, 136, 255, 0.6),
        0 0 60px rgba(136, 68, 255, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

@keyframes quantum-breath-vivid {
    0% {
        opacity: 0.2;
        transform: scale(0.97);
        filter: blur(2px);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
        filter: blur(0px);
        /* 峰值时产生更强的扩散感 */
        box-shadow:
            0 0 60px rgba(68, 136, 255, 0.8),
            0 0 90px rgba(255, 68, 68, 0.4);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.97);
        filter: blur(2px);
    }
}

/* 鎵嬫満/榛樿: 闅愯棌宸﹀彸鍓崱 */
.poem-content.wing {
    display: none;
}

@media (max-width: 1023px) {
    #viewmode-btn {
        display: none;
    }
}

/* 诗词文字容器 - 默认竖排 */
#poem-text-container {
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    /* 恢复居中对齐，配合父容器的flex实现完美居中 */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* 响应式最小高度 */
    /* 响应式最小高度 */
    /* 响应式最小高度 */
    /* 响应式最小高度 - 统一定为竖排模式的大高度 (原480px -> 累减20px = 460px) */
    /* 这样无论是横排还是竖排，卡片外框都保持高度一致，不会跳动 */
    min-height: clamp(460px, 60vw, 500px);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;

    /* 整体上移：原3px -> 0px (配合外部-2px 共上移5px) */
    /* 用户需求：竖排观赏下再向上平移5px x 3 = 15px */
    position: relative;
    top: -7px;
    padding-top: 0;
}

/* 水墨晕染动画状态 (已激活) */
#poem-text-container.ink-fade-out {
    opacity: 0;
    filter: blur(4px);
    transform: scale(0.98);
}

#poem-text-container.ink-fade-in {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* ===== 3D 翻页动画 ===== */
@keyframes page-flip-out {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes page-flip-in {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

#poem-text-container.page-flip-out {
    animation: page-flip-out 0.4s ease-in forwards;
    transform-origin: left center;
}

#poem-text-container.page-flip-in {
    animation: page-flip-in 0.4s ease-out forwards;
    transform-origin: right center;
}

/* 诗词标题 - 响应式字体 */
#poem-title {
    font-family: var(--font-title);
    /* 手机1.6rem → iPad1.9rem → 桌面2.4rem */
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    /* 减少4px间距：原 0.5rem -> 0.25rem */
    margin: 0 0 0 0.25rem;
    /* 强制缩小间距测试 */
    letter-spacing: 2px;
}

/* 诗词正文 - 响应式字体 */
.body-text {
    /* 手机1.2rem → iPad1.35rem → 桌面1.5rem */
    font-size: clamp(1.2rem, 2.8vw, 1.5rem);
    line-height: clamp(2.2rem, 5vw, 3rem);
    letter-spacing: clamp(2px, 0.8vw, 5px);
}

.body-text p {
    margin: 0 clamp(0.3rem, 1vw, 0.5rem);
}

/* 诗词备注 - 竖排时移到底部 */
.poem-note {
    font-size: 0.85rem;
    color: #888;
    writing-mode: horizontal-tb;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* ===== 遮光罩模式 (Mask Mode) ===== */
.poem-content.mask-mode {
    /* 去除纹理，使用与标题一致的磨砂玻璃效果 */
    background-image: none !important;
    /* 降低不透明度，让背景更通透 */
    background-color: rgba(255, 255, 255, 0.2);
    /* 强力模糊，营造遮光罩质感 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* 遮光罩模式下的深色适配 */
[data-theme="dark"] .poem-content.mask-mode {
    background-color: rgba(30, 30, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* ===== 横排模式 ===== */
.poem-content.horizontal-mode {
    /* 横排模式通用样式 */
    padding: 1rem 0.5rem;
    /* 减小左右内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 文字纵向居中 */
}

/* 仅手机端：横排模式宽度扣除容器 padding */
@media (max-width: 809px) {
    .poem-content.horizontal-mode {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    .poem-content {
        min-height: var(--card-block-height);
    }

    .poem-content.horizontal-mode {
        min-height: var(--card-block-height);
    }
}


@media (max-width: 1023px) {}


.poem-content.horizontal-mode #poem-text-container {
    writing-mode: horizontal-tb;
    /* 保持与竖排一致的高度，继承 clamp(350px, 60vw, 480px) */
}

.poem-content.horizontal-mode #poem-title {
    font-size: 1.4rem;
    margin: 0 0 1rem 0;
    text-align: center;
}

.poem-content.horizontal-mode .body-text {
    font-size: 1rem;
    /* 稍微减小字号 */
    line-height: 2rem;
    letter-spacing: 1px;
    /* 减小字间距 */
    width: 100%;
    text-align: center;
}

.poem-content.horizontal-mode .body-text p {
    margin: 0.5rem 0 0.5rem 3px;
    /* 微调：向右偏移 3px 修正视觉中心 */
    width: 100%;
    text-align: center;
    white-space: nowrap;
    /* 强制不换行 */
}

/* 横排模式下的注释 - 显示在正文下方 */
.poem-content.horizontal-mode .poem-note {
    position: static;
    transform: none;
    margin-top: 1.5rem;
    text-align: center;
}

/* 仅手机端：横排模式下 header/footer 宽度对齐卡片 */
@media (max-width: 809px) {

    header.horizontal-width,
    .site-footer.horizontal-width {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== 箭头导航（默认隐藏，桌面端由 desktop.css 启用） ===== */
.nav-arrow {
    display: none;
}

/* ===== 控制按钮 ===== */
.control-panel {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    width: 100%;
}

#prev-btn,
#next-btn {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#prev-btn:active,
#next-btn:active {
    background: var(--accent-color);
    color: #fff;
    transform: scale(0.95);
}

/* 蓝色模式按钮 */
#prev-btn.blue-mode,
#next-btn.blue-mode {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

#prev-btn.blue-mode:active,
#next-btn.blue-mode:active {
    background: var(--accent-blue);
    color: #fff;
}

/* ===== 挂件组 - 移动端简化 ===== */
.music-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    position: relative;
    /* 让子元素绝对定位生效 */
}

/* 通用挂件按钮样式 */
.widget-btn,
#mode-btn {
    font-family: var(--font-body);
    font-size: 0.85rem;
    /* 加大字号，便于阅读 */
    font-weight: bold;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    width: 50px;
    /* 加大点击区域 */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.widget-btn.blue-mode,
#mode-btn.blue-mode,
.music-control.blue-mode {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}


/* 音乐标签 */
.music-label {
    font-family: var(--font-title);
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}

.music-label.blue-mode {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* ===== 移动端按钮折叠菜单 ===== */
/* 仅在手机端生效 (base.css 本身就是移动优先) */

/* 独立的设置按钮：默认隐藏（仅在折叠时显示） */
/* 七律logo印章 - 注入描金边框效果 */
.logo-stamp {
    display: none;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.4); /* 略微调亮背景 */
    border: 1.8px solid #FFD700; /* 描金边框 */
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(255, 215, 0, 0.4); /* 金色微光 */
    transition: all 0.3s ease;
}

.logo-stamp:hover {
    transform: scale(1.05);
    border-color: #FFEC8B; /* 悬停时金边更亮 */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.logo-stamp-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.settings-btn {
    display: none;
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.4); /* 调亮背景 */
    border: 1.8px solid #FFD700; /* 描金边框 */
    border-radius: 6px;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(255, 215, 0, 0.4); /* 金色微光 */
    transition: all 0.3s ease;
}

.settings-btn:hover {
    transform: scale(1.05);
    border-color: #FFEC8B;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.settings-btn.blue-mode {
    color: var(--accent-blue);
    background: rgba(18, 104, 204, 0.12);
    /* 移除 border-color，保持金色 */
}

/* 按钮已使用状态 */
.settings-btn.settings-used {
    background: rgba(255, 255, 255, 0.45);
    color: var(--accent-color);
}

.settings-btn.blue-mode.settings-used {
    color: var(--accent-blue);
    background: rgba(18, 104, 204, 0.16);
}

/* 折叠状态 */
.music-wrapper.collapsed {
    position: relative;
    justify-content: flex-end;
    /* 关键：让设置按钮靠右显示（音乐图标位置） */
    min-height: 60px;
    /* 保持高度防止跳变 */
}

/* 折叠时：显示logo印章和设置按钮 */
.music-wrapper.collapsed .settings-btn {
    display: flex;
    position: relative;
}

.music-wrapper.collapsed .logo-stamp {
    display: flex;
    position: absolute;
    right: 62px;
}

/* 折叠时：隐藏所有7个按钮（叠在右上角音乐图标位置） */
.music-wrapper.collapsed .widget-btn,
.music-wrapper.collapsed #mode-btn,
.music-wrapper.collapsed .music-control {
    position: absolute;
    right: 0.5rem;
    /* 对应 padding-right */
    top: 0.5rem;
    /* 对应 padding-top */
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 展开状态：隐藏logo印章和设置按钮 */
.music-wrapper.expanded .logo-stamp,
.music-wrapper.expanded .settings-btn {
    display: none;
}

/* 展开状态：按钮散开到各自位置 */
.music-wrapper.expanded .widget-btn,
.music-wrapper.expanded #mode-btn,
.music-wrapper.expanded .music-control {
    position: relative;
    right: auto;
    top: auto;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 音乐控制图标 - 方形边框+圆形内切 */
.music-control {
    width: 50px;
    /* 与 widget-btn 保持一致 */
    height: 50px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* 内切圆背景 */
.music-control::before {
    content: "";
    position: absolute;
    width: 40px;
    /* 内切圆，留边5px边距 */
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.music-icon {
    width: 22px;
    /* 稍微加大图标 */
    height: 22px;
    position: relative;
    z-index: 1;
}

@keyframes rotate-music {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

/* 歌单列表 */
.music-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    list-style: none;
    min-width: 120px;
    z-index: 100;
    overflow: hidden;
}

.music-list.show {
    display: block;
}

.music-list li {
    padding: 10px 15px;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.music-list li:last-child {
    border-bottom: none;
}

.music-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

/* 背景按钮容器 - 用于子菜单相对定位 */
.bg-btn-wrapper {
    position: relative;
    display: inline-block;
}

/* 背景选择列表 (水平分叉印章菜单样式) */
.bg-branch-group {
    display: none;
    position: absolute;
    /* 相对于父容器（bg-btn-wrapper）居中 */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;

    /* 横向排列 */
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    /* 更紧凑的间距 */

    z-index: 101;
    padding: 5px;

    /* 防止窄屏溢出 */
    max-width: 95vw;
    overflow-x: auto;
}

/* 激活状态：显示 */
.bg-branch-group.show {
    display: flex;
}

/* 所有的分支项初始透明 */
.bg-branch-group .branch-item {
    opacity: 0;
}

/* 显示时的溅射动画 */
/* 溅射动画：左边项 (需要向右偏移初始位置以重叠到中心) */
@keyframes splatterLeft {
    0% {
        opacity: 0;
        transform: translate(calc(100% + 15px), -20px) scale(0.3) rotate(30deg);
    }

    60% {
        opacity: 1;
        transform: translate(-10px, 5px) scale(1.1) rotate(-5deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* 溅射动画：中间项 (垂直下落) */
@keyframes splatterCenter {
    0% {
        opacity: 0;
        transform: translate(0, -20px) scale(0.3) rotate(0deg);
    }

    60% {
        opacity: 1;
        transform: translate(0, 5px) scale(1.1) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* 溅射动画：右边项 (需要向左偏移初始位置以重叠到中心) */
@keyframes splatterRight {
    0% {
        opacity: 0;
        transform: translate(calc(-100% - 15px), -20px) scale(0.3) rotate(-30deg);
    }

    60% {
        opacity: 1;
        transform: translate(10px, 5px) scale(1.1) rotate(5deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* 应用不同的动画 */
.bg-branch-group.show .branch-item:nth-child(1) {
    animation: splatterLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0ms;
}

.bg-branch-group.show .branch-item:nth-child(2) {
    animation: splatterCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 60ms;
}

.bg-branch-group.show .branch-item:nth-child(3) {
    animation: splatterRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 120ms;
}

/* ===== 音乐分类菜单样式 ===== */
/* 音乐按钮容器 - 用于子菜单相对定位 */
.music-btn-wrapper {
    position: relative;
    display: inline-block;
}

/* 音乐分类列表 (水平分叉印章菜单样式) */
.music-branch-group {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;

    flex-direction: row;
    align-items: flex-start;
    gap: 8px;

    z-index: 101;
    padding: 5px;
}

/* 激活状态：显示 */
.music-branch-group.show {
    display: flex;
}

/* 所有的分支项初始透明 */
.music-branch-group .branch-item {
    opacity: 0;
}

/* 应用溅射动画 */
.music-branch-group.show .branch-item:nth-child(1) {
    animation: splatterLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0ms;
}

.music-branch-group.show .branch-item:nth-child(2) {
    animation: splatterCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 60ms;
}

.music-branch-group.show .branch-item:nth-child(3) {
    animation: splatterRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 120ms;
}

/* 分支项容器 (按钮+列表) */
.branch-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

}

/* 印章按钮样式 (Seal Style) - 与父级 widget-btn 同尺寸 */
.branch-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* 红色边框/文字 */
    border: 2px solid #d93a49;
    border-radius: 4px;
    /* 与父级一致 */
    color: #d93a49;

    /* 竖排文字 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-title);
    font-size: 0.7rem;
    /* 稍小以适应40px */
    font-weight: bold;
    letter-spacing: 1px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    user-select: none;
}

.branch-btn:hover,
.branch-item.active .branch-btn {
    transform: scale(1.05);
    /* 悬浮微放大 */
    background: #fff;
    box-shadow: 0 6px 15px rgba(217, 58, 73, 0.25);
    /* 红色光晕 */
}

.branch-btn:active {
    transform: scale(0.95);
}

/* 三卡/单卡二级菜单的蓝色模式 */
.music-branch-group.blue-mode .branch-btn {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.music-branch-group.blue-mode .branch-btn:hover,
.music-branch-group.blue-mode .branch-item.active .branch-btn {
    box-shadow: 0 6px 15px rgba(18, 104, 204, 0.25);
}

.viewmode-branch-group.blue-mode .branch-btn {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.viewmode-branch-group.blue-mode .branch-btn:hover,
.viewmode-branch-group.blue-mode .branch-item.active .branch-btn {
    box-shadow: 0 6px 15px rgba(18, 104, 204, 0.25);
}


/* 三级子菜单 (具体背景列表) */
.sub-list {
    position: absolute;
    top: 100%;
    /* 在印章下方 */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;

    /* 默认隐藏，不占空间 */
    display: none;

    /* 样式复用 selector-list */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    list-style: none;
    min-width: 100px;
    /* 略宽一点 */
    padding: 5px 0;
    z-index: 102;
    overflow: hidden;
    max-height: 250px;
    /* 限制高度 */
    overflow-y: auto;
}

/* 显示子菜单 */
.branch-item.active .sub-list {
    display: block;
    animation: fadeInSlideDown 0.3s ease forwards;
}

@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.sub-list li {
    padding: 8px 15px;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    transition: background 0.2s;
}

.sub-list li:last-child {
    border-bottom: none;
}

.sub-list li:hover {
    background: rgba(217, 58, 73, 0.05);
    /* 淡淡的红 */
    color: #d93a49;
}

.sub-list li.active {
    color: #d93a49;
    font-weight: bold;
    background: rgba(217, 58, 73, 0.08);
}

/* 通用选择列表 (原 bg-list 样式已独立) */
.selector-list {
    display: none;
    position: fixed;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    list-style: none;
    min-width: 90px;
    max-height: 320px;
    /* 约8项高度，超出滚动 */
    overflow-y: auto;
    z-index: 1000;
    margin: 0;
    padding: 0;
}

.selector-list.show {
    display: block;
}

/* 清理旧的 bg-list 选择器，只保留 selector-list */
.selector-list li {
    padding: 10px 15px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.selector-list li:last-child {
    border-bottom: none;
}

.selector-list li:hover,
.selector-list li:active {
    background: rgba(168, 63, 63, 0.1);
    color: var(--accent-color);
}

.selector-list.blue-mode li:hover,
.selector-list.blue-mode li:active {
    background: rgba(74, 144, 226, 0.12);
    color: var(--accent-blue);
}

.bg-list li.active,
.selector-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

.selector-list.blue-mode li.active {
    color: var(--accent-blue);
}

/* ===== 名录弹窗 ===== */
.toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.toc-overlay.active {
    opacity: 1;
    visibility: visible;
}

.toc-card {
    background: var(--card-bg);
    width: min(85vw, 320px);
    max-width: 300px;
    max-height: 70vh;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.toc-title {
    font-family: var(--font-title);
    font-size: 1.6rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(168, 63, 63, 0.2);
    width: 100%;
    text-align: center;
}

.toc-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 0.75rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.toc-tab {
    border: 2px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.92);
    color: var(--accent-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.2;
}

.toc-tab.active {
    background: var(--accent-color);
    color: #fff;
}

.music-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--card-bg);
    width: min(85vw, 320px);
    max-width: 300px;
    max-height: 70vh;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

.theme-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--card-bg);
    width: min(56vw, 210px);
    max-width: 210px;
    max-height: 70vh;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

@media (max-width: 1023px) {
    .viewmode-btn-wrapper {
        display: none;
    }
}

.viewmode-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--card-bg);
    width: min(56vw, 210px);
    max-width: 210px;
    max-height: 70vh;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

.bg-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--card-bg);
    width: min(85vw, 320px);
    max-width: 300px;
    max-height: 70vh;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

.entertainment-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--card-bg);
    width: min(56vw, 210px);
    max-width: 210px;
    max-height: 70vh;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

.music-menu.show {
    display: flex;
}

.theme-menu.show {
    display: flex;
}

.viewmode-menu.show {
    display: flex;
}

.bg-menu.show {
    display: flex;
}

.entertainment-menu.show {
    display: flex;
}

@media (max-width: 768px) {
    .bg-tabs {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .bg-tabs .toc-tab {
        font-size: 0.72rem;
        padding: 3px 6px;
        white-space: nowrap;
    }
}

.music-menu.blue-mode .toc-title {
    color: var(--accent-blue);
    border-bottom-color: rgba(18, 104, 204, 0.2);
}

.music-menu.blue-mode .toc-tab {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.music-menu.blue-mode .toc-tab.active {
    background: var(--accent-blue);
    color: #fff;
}

.music-catalog-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

.music-menu.blue-mode .music-catalog-list li.active {
    color: var(--accent-blue);
}

.theme-menu.blue-mode .toc-title {
    color: var(--accent-blue);
    border-bottom-color: rgba(18, 104, 204, 0.2);
}

.theme-menu.blue-mode .toc-tab {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.theme-menu.blue-mode .toc-tab.active {
    background: var(--accent-blue);
    color: #fff;
}

.viewmode-menu.blue-mode .toc-title {
    color: var(--accent-blue);
    border-bottom-color: rgba(18, 104, 204, 0.2);
}

.bg-menu.blue-mode .toc-title {
    color: var(--accent-blue);
    border-bottom-color: rgba(18, 104, 204, 0.2);
}

.bg-menu.blue-mode .toc-tab {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.bg-menu.blue-mode .toc-tab.active {
    background: var(--accent-blue);
    color: #fff;
}

.entertainment-menu.blue-mode .toc-title {
    color: var(--accent-blue);
    border-bottom-color: rgba(18, 104, 204, 0.2);
}

.entertainment-menu-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

.entertainment-menu.blue-mode .entertainment-menu-list li.active {
    color: var(--accent-blue);
}

.theme-menu-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

.theme-menu.blue-mode .theme-menu-list li.active {
    color: var(--accent-blue);
}

.viewmode-menu-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

.viewmode-menu.blue-mode .viewmode-menu-list li.active {
    color: var(--accent-blue);
}

.bg-menu-list li.active {
    color: var(--accent-color);
    font-weight: bold;
}

.bg-menu.blue-mode .bg-menu-list li.active {
    color: var(--accent-blue);
}

/* ===== 作品名录弹窗蓝色模式 ===== */
.toc-overlay.blue-mode .toc-title {
    color: var(--accent-blue);
    border-bottom-color: rgba(18, 104, 204, 0.2);
}

.toc-overlay.blue-mode .toc-tab {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.toc-overlay.blue-mode .toc-tab.active {
    background: var(--accent-blue);
    color: #fff;
}

.toc-overlay.blue-mode .toc-list li:active {
    background: rgba(18, 104, 204, 0.1);
    color: var(--accent-blue);
}

.toc-overlay.blue-mode .toc-close {
    color: var(--accent-blue);
}

.toc-list {
    list-style: none;
    width: 100%;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(220, 20, 40, 0.85) rgba(0, 0, 0, 0.05);
}

.toc-list::-webkit-scrollbar {
    width: 5px;
}

.toc-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
}

.toc-list::-webkit-scrollbar-thumb {
    background: rgba(220, 20, 40, 0.85);
    border-radius: 999px;
}

.toc-list::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 20, 40, 1);
}

/* 蓝色模式滚动条 */
.toc-overlay.blue-mode .toc-list {
    scrollbar-color: rgba(18, 104, 204, 0.85) rgba(0, 0, 0, 0.05);
}

.toc-overlay.blue-mode .toc-list::-webkit-scrollbar-thumb {
    background: rgba(18, 104, 204, 0.85);
}

.toc-overlay.blue-mode .toc-list::-webkit-scrollbar-thumb:hover {
    background: rgba(18, 104, 204, 1);
}

@media (hover: hover) {

    #prev-btn:hover,
    #next-btn:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .widget-btn:hover,
    #mode-btn:hover,
    .music-control:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
}

.widget-btn:active,
#mode-btn:active,
.music-control:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.toc-list li {
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.toc-list li.new-work-highlight {
    color: var(--accent-color);
    font-weight: bold;
}

.toc-list li:active {
    background: rgba(168, 63, 63, 0.1);
    color: var(--accent-color);
}

/* 目录列表新作高亮 */
#toc-list li.new-work-highlight {
    color: var(--highlight-color);
    font-weight: bold;
}

#toc-list li.new-work-highlight::after {
    content: "";
}

/* 目录列表修订高亮 */
#toc-list li.modified-work-highlight {
    color: #4A90E2;
    /* 蓝色 */
    font-weight: bold;
}

#toc-list li.modified-work-highlight::after {
    content: "";
}

/* 目录列表新作+修订高亮 (红) */
#toc-list li.new-modified-highlight {
    color: var(--highlight-color);
    font-weight: bold;
}

#toc-list li.new-modified-highlight::after {
    content: "";
    /* JS手动处理双色标签 */
}

/* 高亮样式下hover */
#toc-list li.new-work-highlight:hover,
#toc-list li.modified-work-highlight:hover,
#toc-list li.new-modified-highlight:hover {
    color: #fff;
}

.toc-close {
    margin-top: 1rem;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
}

/* 作品注释内容 */
.notes-content {
    width: 100%;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color);
}

.notes-content p {
    margin: 0.5rem 0;
}

/* ===== 页脚 ===== */
.site-footer {
    text-align: center;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    color: #333;
    margin-top: 2rem;
    /* 半透明遮罩背景 */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    /* 统一宽度与卡片一致 */
    width: 95%;
    max-width: clamp(320px, 75vw, 600px);
    /* 防止与内容重叠 */
    position: relative;
    z-index: 10;
}

/* ===== 更新通知喇叭 ===== */
.update-notice {
    display: none;
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 1000;
    flex-direction: row-reverse;
    /* 文字在左，喇叭在右 */
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--accent-color);
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* animation 已移至第二套规则，避免冲突 */
    transition: transform 0.3s ease;
}

.update-notice:hover {
    transform: scale(1.05);
}

.notice-icon {
    font-size: 1.2rem;
    /* 移除无限抖动动画 */
    transform: scaleX(-1);
    /* 镜像喇叭，口朝左 */
}

.notice-text {
    font-family: var(--font-title);
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: bold;
}

/* 蓝色修改通知喇叭（放在此处以覆盖默认样式） */
.modification-notice {
    top: 160px;
    border-color: #4A90E2;
}

/* 蓝色变色滤镜 */
.modification-notice .notice-icon {
    filter: hue-rotate(210deg);
}

.modification-notice .notice-text {
    color: #2c5282;
}

/* 黄色公告喇叭 */
#announcement-notice {
    display: none !important;
    /* forced hidden per request */
    /* 强制显示公告喇叭 */
    /* 蓝喇叭下方 */
    border-color: #D4A017;
    /* 金黄色边框 */
    max-width: 220px;
    /* 略微加宽以容纳更多文字 */
    white-space: normal !important;
    /* 强制换行 */
    line-height: 1.4;
}

.announcement-notice .notice-icon {
    filter: hue-rotate(45deg) saturate(1.5);
    /* 黄色 */
}

.announcement-notice .notice-text {
    color: #8B6914;
    /* 深金色文字 */
}

@keyframes notice-pulse {

    0%,
    100% {
        box-shadow: 0 2px 10px rgba(168, 63, 63, 0.2);
    }

    50% {
        box-shadow: 0 2px 20px rgba(168, 63, 63, 0.4);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: scaleX(-1) rotate(0deg);
    }

    25% {
        transform: scaleX(-1) rotate(-10deg);
    }

    75% {
        transform: scaleX(-1) rotate(10deg);
    }
}

/* 移动端喇叭适配 */
@media (max-width: 768px) {

    /* 横排模式：手机端需要更宽以防止换行 */
    .poem-content.horizontal-mode {
        width: 100%;
        max-width: 100%;
    }

    /* 移动端隐藏红蓝喇叭（因自动隐藏逻辑问题） */
    #update-notice,
    #modification-notice {
        display: none !important;
    }

    /* 保留黄色公告喇叭 */
    #announcement-notice {
        /* display controlled by JS */
        top: 60px;
        /* 位置上移 */
        right: 10px;
        padding: 6px 12px;
        border-radius: 15px;
        animation: none !important;
        /* 强制换行：约10个字宽度 */
        max-width: 180px;
        white-space: normal !important;
        text-align: left;
    }

    .notice-icon {
        font-size: 1rem;
        animation: none !important;
        /* 禁止抖动 */
    }

    .notice-text {
        font-size: 0.75rem;
    }
}

.footer-info p {
    margin: 0.25rem 0;
}

.footer-stars {
    letter-spacing: 3px;
    opacity: 0.6;
    margin-top: 0.5rem;
}

/* ===== 装饰元素 - 移动端隐藏 ===== */
.decoration-branch,
#particle-canvas,
.guide-seal,
.game-seal {
    display: none;
}

/* 仅移动端显示的按钮（桌面端覆盖隐藏） */
.mobile-only {
    display: flex;
}

.desktop-only {
    display: none;
}

/* Serendipity 英文装饰 - 旋转90度 */
.serendipity-text {
    position: absolute;
    top: 51px;
    /* 视觉微调：下移2px (49 -> 51) */
    right: 21px;
    /* 视觉微调：右移3px (24 -> 21, 更贴近标签) */
    font-family: 'Times New Roman', serif;
    font-size: 10px;
    color: var(--accent-color);
    /* 跟随主题色(红) */
    opacity: 0.6;
    transform: rotate(90deg);
    transform-origin: center;
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 5;
    font-style: italic;
    /* 斜体更浪漫 */
}

/* 理工浪漫标签 - 竖排文字 */
.tech-romance-tag {
    position: absolute;
    top: 25px;
    right: 15px;
    z-index: 100;
    /* 提高层级防止被覆盖 (原10) */
    /* 确保显示在花笺上方 */
    writing-mode: vertical-rl;
    font-size: 11px;
    color: #1E90FF;
    opacity: 0.8;
    letter-spacing: 3px;
    font-family: 'Noto Serif SC', serif;
    display: none;
    /* 默认隐藏，通过JS控制显示 */
    pointer-events: none;
    padding-right: 12px;
    /* 为装饰线留空间 */
}

/* 网站 Logo 图标 (原梅花位置) */
.site-logo-icon {
    position: absolute;
    top: 20px;
    left: 12px;
    width: 60px;
    height: auto;
    z-index: 10;
    opacity: 0.95;
    mix-blend-mode: multiply;
    transition: all 0.5s ease;
    cursor: pointer;
}

.site-logo-icon:hover {
    transform: scale(1.08);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}

/* 旧版梅花小图标 (保留以防回退，但不再使用) */
.plum-icon {
    display: none;
    /* 像一个字一样排列 */
    width: 13.5px;
    height: auto;
    margin-top: 1px;
    /* 向下回调3px (原-2px -> 1px) */
    /* 作为一个“字”，和上一个字的间距 */
    /* 竖排模式下，inline元素默认居中对齐于行内 */
    opacity: 0.9;
    transform: translateX(0.4px) rotate(45deg);
    /* 位移+旋转 */
}

/* 蓝线：从卡片顶部边缘到"工"字结束 */
.tech-romance-tag::before {
    content: '';
    position: absolute;
    top: -25px;
    right: 4px;
    width: 2px;
    height: 155px;
    /* 25px (tag offset) + 7个字到达"致" */
    background: var(--accent-blue);
    opacity: 0.7;
}

/* 红线：从卡片顶部边缘到"浪漫"结束 */
.tech-romance-tag::after {
    content: '';
    position: absolute;
    top: -25px;
    right: 0;
    width: 2px;
    height: 155px;
    /* 25px (tag offset) + 9个字到达"漫" */
    background: var(--accent-color);
    opacity: 0.7;
}

/* ===== 水平红蓝装饰线（专字头顶，贯穿卡片） ===== */
.horizontal-decoration-lines {
    position: absolute;
    /* 位置：恢复到 15px (原7px + 8px下移量)，跟随正文整体下移 */
    top: 15px;
    left: 0;
    right: 0;
    height: 6px;
    /* 容纳两条2px的线 + 4px间距 */
    pointer-events: none;
    z-index: 5;
}

/* 红线：上方 */
.horizontal-decoration-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
    opacity: 0.7;
}

/* 蓝线：下方，间距4px */
.horizontal-decoration-lines::after {
    content: '';
    position: absolute;
    top: 4px;
    /* 2px line + 2px gap? No, 4px total gap from top of red line */
    /* 重新计算：红线高2px，间距4px，蓝线top = 2 + 4 = 6? 但容器只有6px */
    /* 实际：红线 top:0, 蓝线 top: 2+4 = 6? 不对 */
    /* 间距4px means gap between lines = 4px */
    /* 红线 bottom edge = 2px, 蓝线 top edge should be at 2+4 = 6px */
    /* 但是蓝线height=2px, 所以蓝线占 6-8px, 容器需要8px高 */
    /* 简化：top: 6px for blue line */
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-blue);
    opacity: 0.7;
}

/* 修正：调整容器高度 */
.horizontal-decoration-lines {
    height: 8px;
    /* 2px + 4px gap + 2px = 8px */
}


/* 梅花装饰 - 悬挂在红线末端 */
.decoration-plum {
    position: absolute;
    top: 125px;
    /* 141px (线长) - 15px (上偏移) - 些许重叠 */
    transform: rotate(15deg);
}

/* 五星红旗装饰 - 逆风专用 */
.five-stars-row {
    position: absolute;
    top: 24px;
    left: 40px;
    /* Plum width 20 + left 10 + gap 10 */
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.five-stars-row.show-stars {
    opacity: 1;
}

.five-stars-row.rainbow-stars {
    color: #ffffff;
}

.five-stars-row.rainbow-stars svg {
    fill: url(#star-rainbow);
}

.star-gradient-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 印章在移动端显示 - 位置与桌面端一致 */
.stamps-container {
    display: grid;
    position: absolute;
    bottom: 20px;
    left: 10px;
    /* 原15px -> 10px，与右侧大印章对称 */
    grid-template-columns: 26px 26px;
    grid-template-rows: 26px 26px;
    gap: 4px;
    pointer-events: none;
    writing-mode: horizontal-tb;
}

/* 移动端印章样式 */
.seal {
    width: 26px;
    height: 26px;
    border: 2px solid #E60000;
    color: #E60000;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 3px;
    font-family: var(--font-title);
    opacity: 0.85;
    line-height: 1;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.2), inset 0 0 5px rgba(230, 0, 0, 0.1);
}

/* Grid 定位 */
.seal:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
}

.seal:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.seal:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
}

/* 页码 - 卡片底部居中 */
.poem-page-number {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #C0C0C0;
    opacity: 0.85;
    letter-spacing: 1px;
    z-index: 2;
}

/* 玫瑰背景 - 移动端简化 */
/* 右下角大印章 - 移动端静态展示 */
.poem-content::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 20px;
    right: 10px;
    width: 50px;
    /* 移动端缩小尺寸 */
    height: 50px;
    background-image: url('../assets/Seal1.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

/* 横排模式使用蓝色印章 Seal4 */
.poem-content.horizontal-mode::before {
    background-image: url('../assets/Seal4.webp');
}

/* ===== 云笺模式（花笺背景） - 移动端支持 ===== */
.poem-content.yunjian-mode::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--yunjian-bg, url('../assets/card01.webp'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    box-shadow: none;
    inset: 0;
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
}

/* 云笺模式下确保正文和印章在背景之上 */
.poem-content.yunjian-mode #poem-text-container {
    z-index: 2;
    position: relative;
}

.poem-content.yunjian-mode::before {
    z-index: 1;
}

.poem-content.yunjian-mode .stamps-container {
    z-index: 2;
}


/* ===== iPad 断点 (768px+) ===== */
@media (min-width: 768px) {
    /* iPad/平板特别优化：隐藏所有3D特效和装饰，防止卡顿 */
    @media (max-width: 1024px) {

        /* 隐藏所有晶格 canvas */
        #sc-lattice-canvas,
        #bcc-lattice-canvas,
        #hcp-lattice-canvas,
        #fcc-lattice-canvas,
        /* 隐藏所有位错 3D 容器 */
        #sc-dislocation-3d,
        #bcc-dislocation-3d,
        #hcp-dislocation-3d,
        #dislocation-3d,
        /* 隐藏装饰石章 */
        .stamps-container,
        .guide-seal {
            display: none !important;
        }
    }

    .container {
        padding: 2rem;
        gap: 1.5rem;
    }

    .site-title {
        font-size: 2.8rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    header {
        width: 85%;
        max-width: 500px;
        padding: 1.5rem;
        /* 增加内边距适配大屏 */
    }

    .poem-content {
        width: 85%;
        max-width: 500px;
        padding: 2.5rem;
        /* 移动端垂直居中修正：确保内容整体居中 */
        display: flex;
        justify-content: center;
    }

    #poem-text-container {
        min-height: 480px;
        /* 竖排文本靠右对齐（减少右侧留白） */
        justify-content: flex-start;
    }

    #poem-title {
        font-size: 2rem;
        margin: 0 0 0 2rem;
    }

    .body-text {
        font-size: 1.4rem;
        line-height: 2.8rem;
        letter-spacing: 4px;
    }

    .body-text p {
        margin: 0 0.5rem;
    }

    .control-panel {
        gap: 3rem;
    }

    #prev-btn,
    #next-btn {
        font-size: 1.1rem;
        padding: 0.8rem 1.5rem;
    }

    .music-wrapper {
        gap: 1rem;
    }

    .widget-btn,
    #mode-btn,
    .music-label,
    .music-control {
        width: 45px;
        height: 45px;
    }

    .site-footer {
        font-size: 1rem;
    }
}

/* ===== 桌面断点预备 (1024px+) ===== */
/* 核心布局调整，美学层由 desktop.css 提供 */
@media (min-width: 1024px) {
    .desktop-only {
        display: flex;
    }

    #blessing-notice {
        display: none !important;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        overflow-y: auto;
        /* 允许垂直滚动，页脚可见 */
    }

    .container {
        height: 90vh;
        max-width: 800px;
        justify-content: space-between;
        padding: 2rem;
    }

    .site-title {
        font-size: 3.5rem;
    }

    .poem-content {
        width: 500px;
        height: 600px;
        max-width: none;
    }

    #poem-text-container {
        min-height: 100%;
    }

    #poem-title {
        font-size: 2.4rem;
        margin: 0 0 0 3rem;
    }

    .body-text {
        font-size: 1.5rem;
        line-height: 3rem;
        letter-spacing: 5px;
    }
}

/* ===== 注释按钮有备注时高亮+抖动 ===== */
@keyframes note-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: rotate(-5deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: rotate(5deg);
    }
}

#note-btn.has-notes {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    /* 移除抖动动画：只保留高亮 */
}

/* 折叠状态下的设置按钮：不抖动，但保持红色高亮 */
.music-wrapper.collapsed #note-btn {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    animation: none !important;
    /* 禁用抖动 */
}

/* 展开过一次后的设置按钮：恢复默认样式 */
.music-wrapper.collapsed #note-btn.settings-used {
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* ===== 背景固定模式样式 ===== */
#bg-btn.active-mode,
#playmode-btn.active-mode,
#voice-btn.active-mode {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* ===== 键盘导航焦点样式 ===== */
.widget-btn:focus-visible,
#mode-btn:focus-visible,
.music-label:focus-visible,
.music-control:focus-visible,
#prev-btn:focus-visible,
#next-btn:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* ===== 通知喇叭样式 (小巧胶囊，右侧竖排) ===== */
.update-notice {
    position: fixed;
    top: 120px;
    /* 视听设置按钮行下方 (50px按钮 + 10px顶距 + 35px间距) */
    right: 0;
    display: none;
    /* 默认隐藏，JS控制显示 */
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: #c91f37;
    /* 红色文字 */
    border: 2px solid #c91f37;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    cursor: pointer;
    font-size: 0.8rem;
    /* white-space: nowrap; (Removed to allow multi-line text) */
    animation: notice-slide-in 0.4s ease-out;
}

.update-notice .notice-icon {
    font-size: 1rem;
}

.update-notice .notice-text {
    font-weight: 500;
}

/* 蓝色修订喇叭 - 在红色喇叭下方 */
.modification-notice {
    background: #fff;
    color: #1A5599;
    /* 蓝色文字 */
    border: 2px solid #1A5599;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    top: 140px;
    /* 红色喇叭下方 (95 + 35 + 10间距) */
}

/* 作者祝福喇叭 - 在蓝色喇叭下方 */
.blessing-notice {
    background: #fff;
    color: #2f855a;
    border: 2px solid #2f855a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    top: 185px;
}

.blessing-notice .notice-text {
    color: #2f855a;
}

/* 黄色公告喇叭 - 在蓝色喇叭下方 */
#announcement-notice {
    background: #fff;
    color: #e6a23c;
    /* 警示黄/公告黄 */
    border: 2px solid #e6a23c;
    box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
    top: 240px;
    /* 视听按钮大概位置下方 */
    left: auto;
    right: 0;
    transform: none;
    border-radius: 20px 0 0 20px;
    /* 贴边样式 */
    padding-right: 8px;
    border-right: none;
    /* 去掉右边框 */
}

#announcement-notice .notice-icon {
    display: inline-block;
    transform: scaleX(-1);
    /* 翻转图标，让喇叭口对着左边的文字 */
    margin-left: 4px;
}

/* 入场动画 - 从右侧滑入 */
@keyframes notice-slide-in {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 朗读按钮激活状态 */
#voice-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    animation: voice-pulse 2s infinite;
}

@keyframes voice-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(74, 144, 226, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

/* ===== 雪花特效 (Safe Re-implementation) ===== */
.snowflake {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    /* 点击穿透 */
    z-index: 9999;
    /* 覆盖在最上层 */
    will-change: transform;
    user-select: none;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}

/* 公告通知栏 (修复) */
.notice-bar {
    position: fixed;
    top: 60px;
    /* 位于顶部标题下方 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    /* animation: slideDown 0.5s ease-out; */
}

/* 黄色公告 */
.yellow-notice {
    background: rgba(255, 248, 225, 0.95);
    border: 1px solid #FFD54F;
    color: #F57F17;
}

.notice-icon {
    font-size: 1.1em;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* 临时隐藏所有小喇叭通知（保留注释功能） - 已解禁，由JS控制显示 */
/* 
.update-notice,
.modification-notice,
#announcement-notice {
    display: none !important;
} 
*/

/* ?? + ??????????/???????? */
.card-header-group {
    position: absolute;
    top: 24px;
    left: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 10;
    pointer-events: none;
}

.card-header-group .site-logo-icon {
    position: static;
    top: auto;
    left: auto;
    width: 48px;
    opacity: 0.95;
    mix-blend-mode: multiply;
}

.card-header-group .five-stars-row {
    position: static;
    top: auto;
    left: auto;
    transform: translateY(-4px);
}

@media (max-width: 1023px) {
    #blessing-notice {
        display: none !important;
    }
}

/* ===== UX 细节优化 (UX Polish) ===== */

/* 1. 触感反馈 (Tactile Feedback) - 统一的Q弹按压效果 */
.char-game-btn:active,
.widget-btn:active,
#mode-btn:active,
.music-control:active,
.music-label:active,
#prev-btn:active,
#next-btn:active,
.toc-tab:active,
.sub-list li:active,
.selector-list li:active,
.close-btn:active,
.nav-btn:active,
.branch-btn:active,
.music-list li:active,
.viewmode-btn:active,
.entertainment-btn:active,
.toc-list li:active {
    transform: scale(0.92);
    transition: transform 0.05s ease-out;
}

/* ===== 诗句逐行入场动画 (移动端优先) ===== */
.poem-line-animate {
    opacity: 0;
    transform: translateY(12px) translateX(8px);
    animation: poem-line-fade-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(var(--line-index, 0) * 0.12s + 0.15s);
}

@keyframes poem-line-fade-in {
    0% {
        opacity: 0;
        transform: translateY(12px) translateX(8px);
    }

    60% {
        opacity: 0.85;
        transform: translateY(-2px) translateX(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* 背景菜单特殊选项 */
#bg-list .special-option {
    font-weight: bold;
    color: var(--accent-blue);
    border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
    padding-bottom: 8px;
}

#bg-list .special-option:hover {
    background-color: rgba(26, 85, 153, 0.1);
}

#bg-list .special-option.active {
    background-color: var(--accent-blue);
    color: #fff;
}

/* ===== 诗词加锁 UI ===== */
.poem-locked-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 200px;
    /* 强制横排：不受竖排模式影响 */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed;
}

.lock-icon {
    font-size: 3rem;
    margin-bottom: 0.8rem;
    filter: grayscale(0.3);
}

.lock-hint {
    font-size: 1rem;
    color: #888;
    margin-bottom: 1.2rem;
    letter-spacing: 0.1em;
}

.lock-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lock-password-input {
    padding: 8px 14px;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    width: 140px;
    outline: none;
    transition: border-color 0.2s;
    background: rgba(255, 255, 255, 0.8);
}

.lock-password-input:focus {
    border-color: var(--accent-color);
}

.lock-unlock-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.lock-unlock-btn:hover {
    opacity: 0.85;
}

.lock-unlock-btn:active {
    transform: scale(0.95);
}

.lock-error {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 0.8rem;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* ===== 雅帖生成预览弹窗 ===== */
.share-card-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.share-card-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.share-card-panel {
    background: rgba(255, 255, 255, 0.95);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.share-card-overlay.active .share-card-panel {
    transform: translateY(0);
}

.share-card-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.share-card-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.9rem;
}

.share-card-preview-container {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.share-card-preview-container img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.share-loading {
    color: #666;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-card-actions {
    padding: 1rem;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.share-tip {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.8rem;
}

.share-btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.share-action-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 80px;
}

.share-action-btn.primary {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* 深色模式适配 */
[data-theme="dark"] .share-card-panel {
    background: #2a2a2a;
    color: #eee;
}

[data-theme="dark"] .share-card-header,
[data-theme="dark"] .share-card-actions {
    border-color: rgba(255, 255, 255, 0.1);
    background: #2a2a2a;
}

[data-theme="dark"] .share-card-header h3 {
    color: #eee;
}

[data-theme="dark"] .share-card-preview-container {
    background: #1a1a1a;
}

[data-theme="dark"] .share-action-btn {
    background: #333;
    border-color: #444;
    color: #ccc;
}

[data-theme="dark"] .share-action-btn.primary {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* ===== 全站临时访问锁 ===== */
#global-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

#global-lock-overlay.unlocking {
    opacity: 0;
    pointer-events: none;
}

.global-lock-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.8rem 2.4rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    text-align: center;
}

.global-lock-logo {
    width: 80px;
    height: auto;
    opacity: 0.85;
}