:root {
    /* 蓝白学院风配色 */
    --primary-color: #2563eb;
    --secondary-color: #3b82f6;
    --accent-color: #0ea5e9;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #06b6d4;
    --love-color: #ec4899;
    --light-bg: #f1f5f9;
    --card-bg: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
    --shadow-hover: 0 8px 30px rgba(37, 99, 235, 0.12);
    /* 学院风专属变量 */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
}

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

/* ==================== 移动端视窗稳定性修复 ==================== */
html {
    /* 防止iOS Safari自动调整字体大小导致布局变化 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* 使用稳定的视窗高度 */
    height: 100%;
    /* 防止滚动时地址栏隐藏导致的高度变化 */
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 50%, #e0e7ff 100%);
    min-height: 100vh;
    /* 使用dvh单位适配移动端动态视窗 */
    min-height: 100dvh;
    color: var(--text-primary);
    /* 防止横向溢出导致的缩放 */
    overflow-x: hidden;
    /* 防止双击缩放 */
    touch-action: manipulation;
    /* 防止iOS橡皮筋效果导致的视觉跳动 */
    overscroll-behavior: none;
}

/* 角色显示 */
.character-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.character-display:hover {
    background: var(--border-color);
}

.character-display .char-icon {
    font-size: 1.4rem;
}

.character-display .char-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.character-display .char-mode {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.character-display .char-mode.normal-mode {
    background: rgba(108, 92, 231, 0.15);
    color: #6c5ce7;
}

.character-display .char-mode.reversed-mode {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
}


/* 基础成就样式 */
.achievement-item {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    margin: 4px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 成就标签默认样式 */
.achievement-item {
    background: linear-gradient(135deg, #fdcb6e33, #ffeaa733);
    color: #2d3436;
    border: 1px solid #fdcb6e;
}

/* 成就标签悬停效果 */
.achievement-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 203, 110, 0.5);
}

/* 全球统计面板中的成就/结局标签 */
.stats-tag {
    padding: 4px 8px;
    background: white;
    border-radius: 6px;
    font-size: 0.65rem;
    border: 1px solid var(--border-color);
}

.stats-tag strong {
    color: var(--success-color);
}

.stats-tag.ending-tag strong {
    color: var(--primary-color);
}

/* 未解锁成就样式 */
.locked-achievement-tag {
    padding: 4px 8px;
    background: #e0e0e0;
    border-radius: 15px;
    font-size: 0.75rem;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.locked-achievement-tag:hover {
    background: #d0d0d0;
    color: #666;
}

/* 弹窗内的统计标签 */
.modal-stats-tag {
    padding: 4px 8px;
    background: var(--light-bg);
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-stats-tag:hover {
    transform: translateY(-1px);
}

.modal-stats-tag strong {
    color: var(--success-color);
}

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 使用dvh适配移动端动态视窗 */
    height: 100dvh;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    /* 防止弹窗导致页面滚动 */
    overscroll-behavior: contain;
}

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

.modal {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    max-width: 550px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-hover);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal { transform: scale(1); }

.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: center;
}

.modal-content { margin-bottom: 15px; line-height: 1.7; font-size: 0.95rem; }

.modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 按钮样式 */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    /* 防止移动端点击时触发缩放 */
    touch-action: manipulation;
    /* 防止iOS点击高亮 */
    -webkit-tap-highlight-color: transparent;
}

/* 按钮涟漪效果 */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn:active::after {
    width: 200%;
    height: 200%;
}

.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; }
.btn-success { background: linear-gradient(135deg, var(--success-color), #55efc4); color: white; }
.btn-danger { background: linear-gradient(135deg, var(--danger-color), #fab1a0); color: white; }
.btn-warning { background: linear-gradient(135deg, var(--warning-color), #ffeaa7); color: var(--text-primary); }
.btn-info { background: linear-gradient(135deg, var(--info-color), #a0d2ff); color: white; }
.btn-secondary { background: linear-gradient(135deg, #7f8c8d, #95a5a6); color: white; }
.btn-accent { background: linear-gradient(135deg, var(--accent-color), #ffb8d0); color: white; }

/* 开始界面小按钮样式 */
.start-btn-small {
    padding: 8px 14px;
    font-size: 0.85rem;
    flex: 1;
    justify-content: center;
    height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* 星盘按钮区域 */
.constellation-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    border-top: 1px solid var(--border-color);
}

.constellation-buttons .button-row {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}

.constellation-buttons .button-row .btn {
    flex: 1;
}

.button-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.button-row:last-child {
    margin-bottom: 0;
}

/* 开始界面 */
#start-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f7fa 100%);
    transition: background 0.5s ease;
}

.start-container {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 25px 30px;
    max-width: 850px;
    width: 100%;
    box-shadow: var(--shadow-hover);
    text-align: center;
    transition: all 0.5s ease;
}

.game-title {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
}

.game-title span {
    -webkit-text-fill-color: initial;
    background: none;
}

.game-author {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

/* 模式切换按钮 */
.mode-toggle-container {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 15px auto;
    background: var(--border-color);
    border-radius: 25px;
    padding: 4px;
    max-width: 280px;
}

.mode-toggle-btn {
    flex: 1;
    padding: 10px 25px;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    background: transparent;
    color: var(--text-secondary);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mode-toggle-btn:hover {
    color: var(--text-primary);
}

.mode-toggle-btn.active {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 特殊模式按钮（未实装） */
.special-mode-btn {
    background: transparent !important;
    border: 1px dashed var(--text-secondary) !important;
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

.special-mode-btn:hover {
    opacity: 1;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: rgba(108, 92, 231, 0.05) !important;
}

.mode-description {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    padding: 8px 20px;
    background: var(--light-bg);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.game-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 12px 15px;
    background: var(--light-bg);
    border-radius: 12px;
    text-align: left;
}

.game-intro p { margin-bottom: 3px; }

/* 游戏说明按钮 - 统一简洁风格 */
.guide-content {
    padding: 15px;
    background: var(--light-bg);
    border-radius: 0 0 10px 10px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.guide-btn {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.guide-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.guide-btn i {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.guide-btn:hover i {
    color: white;
}

.guide-btn span {
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.guide-hint {
    margin-top: 10px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.character-selection h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    padding: 8px 4px;
}

@media (max-width: 700px) {
    .character-grid { grid-template-columns: repeat(2, 1fr); }
}

.character-card {
    background: var(--light-bg);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.character-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--secondary-color);
}

.character-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(108,92,231,0.1), rgba(162,155,254,0.1));
}

.character-card .icon { font-size: 1.8rem; margin-bottom: 5px; }
.character-card .name { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.character-card .desc { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.3; }
.character-card .bonus {
    padding: 5px 8px;
    background: rgba(0,184,148,0.15);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--success-color);
    font-weight: 500;
}

/* 难度星级样式 */
.difficulty-container {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(241, 196, 15, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.difficulty-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.difficulty-stars i {
    font-size: 0.85rem;
    color: #f1c40f;
    text-shadow: 0 0 4px rgba(241, 196, 15, 0.5);
    transition: all 0.2s ease;
}

.difficulty-stars i.fas {
    filter: drop-shadow(0 0 2px rgba(241, 196, 15, 0.6));
}

.difficulty-stars i.far {
    opacity: 0.3;
    color: #b8b8b8;
    text-shadow: none;
}

.difficulty-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.difficulty-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
}

.difficulty-badge.legendary { background: rgba(155,89,182,0.2); color: #9b59b6; }
.difficulty-badge.nightmare { background: rgba(231,76,60,0.2); color: #e74c3c; }
.difficulty-badge.expert { background: rgba(230,126,34,0.2); color: #e67e22; }
.difficulty-badge.hard { background: rgba(241,196,15,0.2); color: #f39c12; }
.difficulty-badge.normal { background: rgba(52,152,219,0.2); color: #3498db; }
.difficulty-badge.easy { background: rgba(46,204,113,0.2); color: #27ae60; }
.difficulty-badge.unknown { background: rgba(149,165,166,0.2); color: #95a5a6; }

.start-btn { font-size: 1.1rem; padding: 12px 40px; }

/* 游戏主界面 */
#game-screen { display: none; min-height: 100vh; padding: 10px; }

.game-container {
    display: grid;
    grid-template-columns: 260px 1fr 280px 260px;
    gap: 10px;
    max-width: 1800px;
    margin: 0 auto;
}

.rightmost-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.panel {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 14px;
    box-shadow:
        0 4px 20px rgba(37, 99, 235, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

/* 面板悬停效果 */
.panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(37, 99, 235, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06);
    border-color: rgba(37, 99, 235, 0.2);
}

.panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    position: relative;
}

.left-column { display: flex; flex-direction: column; gap: 10px; }
.middle-column { display: flex; flex-direction: column; gap: 10px; }
.right-column { display: flex; flex-direction: column; gap: 10px; }

/* 属性栏 */
.attribute-bar { margin-bottom: 8px; }

.attribute-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    font-size: 0.8rem;
}

.attribute-label .name { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    cursor: help;
}
.attribute-label .value { font-weight: 600; color: var(--primary-color); }

.progress-bar {
    height: 10px;
    background: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 进度条光泽效果 */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.35), transparent);
    border-radius: 6px 6px 0 0;
}

/* ==================== 属性条动画效果 ==================== */

/* 流动粒子效果 - 基础层 */
.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 25%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0.1) 75%,
        transparent 100%);
    animation: progressFlow 3s linear infinite;
    pointer-events: none;
}

@keyframes progressFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* 数值变化脉冲闪光 */
.progress-fill.pulse-increase {
    animation: pulseIncrease 0.6s ease-out;
}

.progress-fill.pulse-decrease {
    animation: pulseDecrease 0.6s ease-out;
}

@keyframes pulseIncrease {
    0% { filter: brightness(1.1); }
    30% { filter: brightness(2.0) drop-shadow(0 0 8px rgba(34, 197, 94, 0.8)); }
    100% { filter: brightness(1.1); }
}

@keyframes pulseDecrease {
    0% { filter: brightness(1.1); }
    30% { filter: brightness(1.7) drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); }
    100% { filter: brightness(1.1); }
}

/* 增加时的绿色光波 */
.progress-bar.wave-increase::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.6), transparent);
    animation: waveIncrease 0.5s ease-out forwards;
    border-radius: 6px;
    pointer-events: none;
    z-index: 10;
}

@keyframes waveIncrease {
    0% {
        opacity: 1;
        transform: scaleX(0);
        transform-origin: left;
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* 减少时的红色光波 */
.progress-bar.wave-decrease::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.6), transparent);
    animation: waveDecrease 0.5s ease-out forwards;
    border-radius: 6px;
    pointer-events: none;
    z-index: 10;
}

@keyframes waveDecrease {
    0% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: right;
    }
    50% {
        opacity: 1;
        transform: scaleX(0.5);
    }
    100% {
        opacity: 0;
        transform: scaleX(0);
    }
}

/* 满值呼吸光效 - 原色到暗色变化 */
.progress-fill.full-glow {
    animation: fullGlow 3s ease-in-out infinite;
}

@keyframes fullGlow {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(0.85) saturate(1.1);
    }
}

/* 低值警告呼吸光效 - 原色到暗色变化 */
.progress-fill.low-warning {
    animation: lowWarning 2s ease-in-out infinite;
}

@keyframes lowWarning {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(0.8) saturate(1.15);
    }
}

/* 危险值闪烁效果 - 原色到暗色变化 */
.progress-fill.danger-flash {
    animation: dangerFlash 1.2s ease-in-out infinite;
}

@keyframes dangerFlash {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(0.7) saturate(1.2);
    }
}

/* 数值文字变化动画 */
.attribute-label .value {
    transition: all 0.3s ease;
}

.attribute-label .value.value-increase {
    animation: valueIncrease 0.5s ease-out;
}

.attribute-label .value.value-decrease {
    animation: valueDecrease 0.5s ease-out;
}

@keyframes valueIncrease {
    0% { transform: scale(1); color: inherit; }
    40% { transform: scale(1.3); color: #22c55e; }
    100% { transform: scale(1); color: inherit; }
}

@keyframes valueDecrease {
    0% { transform: scale(1); color: inherit; }
    40% { transform: scale(1.3); color: #ef4444; }
    100% { transform: scale(1); color: inherit; }
}

/* 低值警告 - 数值闪烁（不是进度条） */
.attribute-label .value.value-low-warning {
    animation: valueLowWarning 1s ease-in-out infinite;
}

.attribute-label .value.value-danger {
    animation: valueDanger 0.5s ease-in-out infinite;
}

@keyframes valueLowWarning {
    0%, 100% {
        color: var(--primary-color);
    }
    50% {
        color: #f59e0b;
        text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
    }
}

@keyframes valueDanger {
    0%, 100% {
        color: var(--primary-color);
    }
    50% {
        color: #ef4444;
        text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }
}

/* 浮动数字提示 */
.floating-change {
    position: absolute;
    right: 0;
    top: -5px;
    font-size: 0.75rem;
    font-weight: 700;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 20;
}

.floating-change.positive {
    color: #22c55e;
    text-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.floating-change.negative {
    color: #ef4444;
    text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-20px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }
}

/* 属性条容器需要relative定位 */
.attribute-bar {
    position: relative;
}

/* ==================== 金币/成就币动画效果 ==================== */
.currency-item {
    position: relative;
    transition: all 0.3s ease;
}

.currency-item.currency-increase {
    animation: currencyIncrease 0.6s ease-out;
}

.currency-item.currency-decrease {
    animation: currencyDecrease 0.6s ease-out;
}

@keyframes currencyIncrease {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); background: rgba(34, 197, 94, 0.2); }
    100% { transform: scale(1); }
}

@keyframes currencyDecrease {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); background: rgba(239, 68, 68, 0.2); }
    100% { transform: scale(1); }
}

/* 金币数值变化 */
.currency-item .currency-value.value-increase {
    animation: currencyValueUp 0.5s ease-out;
}

.currency-item .currency-value.value-decrease {
    animation: currencyValueDown 0.5s ease-out;
}

@keyframes currencyValueUp {
    0% { transform: scale(1); color: inherit; }
    40% { transform: scale(1.4); color: #22c55e; }
    100% { transform: scale(1); color: inherit; }
}

@keyframes currencyValueDown {
    0% { transform: scale(1); color: inherit; }
    40% { transform: scale(1.4); color: #ef4444; }
    100% { transform: scale(1); color: inherit; }
}

/* 金币闪光效果 */
.currency-item.gold-sparkle::after {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.8rem;
    animation: goldSparkle 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes goldSparkle {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(360deg) translateY(-10px); }
}

/* 浮动货币变化提示 */
.floating-currency {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.7rem;
    font-weight: 700;
    pointer-events: none;
    animation: floatCurrency 0.8s ease-out forwards;
    z-index: 20;
}

.floating-currency.positive {
    color: #22c55e;
    text-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.floating-currency.negative {
    color: #ef4444;
    text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

@keyframes floatCurrency {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-15px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
}

/* 更新配色匹配学院风 */
.progress-fill.san { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-fill.research { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.progress-fill.social { background: linear-gradient(90deg, #10b981, #34d399); }
.progress-fill.favor { background: linear-gradient(90deg, #ec4899, #f472b6); }

.gold-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    margin-top: 5px;
}

/* 新的货币显示样式 */
.currency-display {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    justify-content: center;
}

.currency-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--light-bg);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.currency-item i {
    font-size: 0.9rem;
}

.currency-item:first-child i {
    color: #f59e0b;
}

.currency-item.achievement-currency i {
    color: #f39c12;
}

.gold-display .gold-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.gold-display .gold-info i { color: #d68910; font-size: 1rem; }

/* Buff栏 */
.buff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 80px;
    overflow-y: auto;
}

.buff-tag {
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

.buff-tag.permanent {
    background: linear-gradient(135deg, rgba(0,184,148,0.2), rgba(85,239,196,0.2));
    color: #00a878;
    border: 1px solid var(--success-color);
}

.buff-tag.temporary {
    background: linear-gradient(135deg, rgba(116,185,255,0.2), rgba(162,155,254,0.2));
    color: #4a90d9;
    border: 1px solid var(--info-color);
}

.buff-tag.debuff {
    background: linear-gradient(135deg, rgba(225,112,85,0.2), rgba(250,177,160,0.2));
    color: #d63031;
    border: 1px solid var(--danger-color);
}

.buff-tag.love {
    background: linear-gradient(135deg, rgba(255,107,157,0.2), rgba(255,182,193,0.3));
    color: var(--love-color);
    border: 1px solid var(--love-color);
}

/* 科研成果栏 */
.research-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 8px;
}

.research-stat {
    padding: 5px;
    background: var(--light-bg);
    border-radius: 6px;
    text-align: center;
}

.research-stat .label { font-size: 0.65rem; color: var(--text-secondary); }
.research-stat .value { font-size: 0.95rem; font-weight: 700; color: var(--primary-color); }

/* 论文筛选按钮 */
.research-stat.filter-btn {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    position: relative;
    background: var(--light-bg);
}

.research-stat.filter-btn:hover {
    transform: scale(1.08);
    z-index: 10;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.08));
    border-color: var(--secondary-color);
}

.research-stat.filter-btn.active {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
}

.research-stat.filter-btn:not(.active) {
    opacity: 0.6;
    background: var(--light-bg);
}

.paper-list { max-height: 220px; overflow-y: auto; }

.paper-item {
    padding: 8px;
    background: var(--light-bg);
    border-radius: 6px;
    margin-bottom: 6px;
    border-left: 3px solid var(--primary-color);
}

.paper-item.grade-A { border-left-color: #e17055; }
.paper-item.grade-B { border-left-color: #fdcb6e; }
.paper-item.grade-C { border-left-color: #00b894; }

.paper-item .title { font-size: 0.75rem; font-weight: 500; margin-bottom: 3px; }
.paper-item .meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* 毕业信息栏 */
.graduation-info-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.graduation-info-compact .date-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.graduation-info-compact .date-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 6px;
    font-weight: 600;
}

.graduation-info-compact .remaining-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--warning-color), #ffeaa7);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.8rem;
}

.graduation-info-compact .target-badge {
    padding: 4px 10px;
    background: var(--light-bg);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* 游戏日志栏 */
.log-content {
    height: 320px;
    overflow-y: auto;
    padding: 8px;
    background: var(--light-bg);
    border-radius: 10px;
}

.log-entry {
    padding: 7px 9px 7px 12px;
    margin-bottom: 5px;
    border-radius: 6px;
    background: white;
    border-left: 4px solid var(--primary-color);
    font-size: 0.8rem;
    transition: all 0.3s ease;
    position: relative;
    animation: logSlideIn 0.4s ease-out;
}

/* 日志入场动画 */
@keyframes logSlideIn {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.log-entry:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.log-entry .date { font-weight: 600; color: var(--primary-color); font-size: 0.75rem; }
.log-entry .event { color: var(--text-primary); margin: 2px 0; }
.log-entry .result { color: var(--success-color); font-weight: 500; font-size: 0.75rem; }
.log-entry.negative .result { color: var(--danger-color); }

/* 日志颜色标签系统 - 左侧竖条区分类型 */
/* 系统/时间 - 蓝色 */
.log-entry.log-system {
    border-left-color: #3498db;
    border-left-width: 4px;
}

.log-entry.log-system .date::before {
    content: '📅 ';
}

/* 论文相关 - 紫色 */
.log-entry.log-paper {
    border-left-color: #9b59b6;
    border-left-width: 4px;
}

.log-entry.log-paper .date::before {
    content: '📝 ';
}

/* 金钱变动 - 金色 */
.log-entry.log-money {
    border-left-color: #f39c12;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(243, 156, 18, 0.04), white);
}

.log-entry.log-money .date::before {
    content: '💰 ';
}

/* 关系变化 - 粉色 */
.log-entry.log-relationship {
    border-left-color: #e91e63;
    border-left-width: 4px;
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.04), white);
}

.log-entry.log-relationship .date::before {
    content: '💬 ';
}

/* 警告提示 - 红色 */
.log-entry.log-warning {
    border-left-color: #e74c3c;
    border-left-width: 5px;
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.08), white);
    animation: logWarningPulse 2s ease-in-out infinite;
}

.log-entry.log-warning .date::before {
    content: '⚠️ ';
}

@keyframes logWarningPulse {
    0%, 100% {
        background: linear-gradient(90deg, rgba(231, 76, 60, 0.08), white);
    }
    50% {
        background: linear-gradient(90deg, rgba(231, 76, 60, 0.15), white);
    }
}

/* 成就/里程碑 - 绿色 */
.log-entry.log-milestone {
    border-left-color: #27ae60;
    border-left-width: 5px;
    background: linear-gradient(90deg, rgba(39, 174, 96, 0.08), white);
}

.log-entry.log-milestone .date::before {
    content: '🎯 ';
}

/* 重要事件高亮 */
.log-entry.log-important {
    border-left-width: 6px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), white);
    font-weight: 500;
    animation: logSlideIn 0.4s ease-out, logHighlight 1s ease-out;
}

@keyframes logHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(37, 99, 235, 0.25);
    }
    100% {
        box-shadow: none;
    }
}

/* 成就达成日志特效 */
.log-entry.achievement {
    border-left: 5px solid #f39c12;
    background: linear-gradient(90deg, rgba(253, 203, 110, 0.15), white);
    animation: logSlideIn 0.4s ease-out, achievementPop 0.5s ease;
    position: relative;
    overflow: hidden;
}

.log-entry.achievement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    animation: achievementShine 1.5s ease-out;
    pointer-events: none;
}

@keyframes achievementPop {
    0% { transform: scale(0.8) translateX(-20px); opacity: 0; }
    50% { transform: scale(1.05) translateX(0); }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

@keyframes achievementShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 操作栏 - 统一简洁风格 */
.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    padding-top: 4px;
}

.action-btn {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    background: linear-gradient(145deg, #ffffff, var(--light-bg));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

/* 3D按压效果 */
.action-btn:active:not(:disabled) {
    transform: translateY(2px) scale(0.98);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.action-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.08));
    color: var(--primary-color);
    border-color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow:
        0 6px 16px rgba(59, 130, 246, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 涟漪效果基础 */
.action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}

.action-btn:active:not(:disabled)::before {
    width: 200%;
    height: 200%;
    opacity: 1;
}

/* 禁用状态 */
.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn i {
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.action-btn span {
    font-weight: 500;
}

/* 各按钮悬停图标动画 */
/* 看论文 - 书本翻页摇晃 */
#btn-read:hover:not(:disabled) i {
    animation: bookShake 0.5s ease-in-out;
}

@keyframes bookShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* 打工 - 公文包左右摇晃 */
#btn-work:hover:not(:disabled) i {
    animation: briefcaseSwing 0.6s ease-in-out;
}

@keyframes briefcaseSwing {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-5deg) translateX(-2px); }
    75% { transform: rotate(5deg) translateX(2px); }
}

/* 想idea - 灯泡闪烁发光 */
#btn-idea:hover:not(:disabled) i {
    animation: bulbGlow 0.8s ease-in-out;
}

@keyframes bulbGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px #f1c40f);
    }
}

/* 做实验 - 试管冒泡动画 */
#btn-experiment:hover:not(:disabled) i {
    animation: tubeBubble 0.7s ease-in-out;
}

@keyframes tubeBubble {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(3deg); }
}

/* 写论文 - 笔尖书写摆动 */
#btn-write:hover:not(:disabled) i {
    animation: penWrite 0.6s ease-in-out;
}

@keyframes penWrite {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-10deg) translateX(-2px); }
    50% { transform: rotate(0deg) translateX(0); }
    75% { transform: rotate(10deg) translateX(2px); }
}

/* 下一月 - 前进箭头脉冲 */
#btn-next:hover:not(:disabled) i {
    animation: arrowPulse 0.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* 下一月按钮特殊样式 - 统一风格但添加亮色边框突出 */
.action-btn-next {
    background: var(--light-bg);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

.action-btn-next:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--secondary-color);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

/* 功能按钮区 */
.utility-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.utility-btn {
    flex: 1;
    min-width: 60px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.utility-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.utility-btn i {
    font-size: 0.9rem;
}

/* 功能按钮图标原色 */
.utility-btn:nth-child(1) i { color: #f39c12; } /* 金币商店 - 金色 */
.utility-btn:nth-child(2) i { color: #f39c12; } /* 成就商店 - 金色 */
.utility-btn:nth-child(3) i { color: #3498db; } /* 存档 - 蓝色 */
.utility-btn:nth-child(4) i { color: #2ecc71; } /* 读档 - 绿色 */
.utility-btn:nth-child(5) i { color: #e74c3c; } /* 重开 - 红色 */

.utility-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.coin-badge {
    background: var(--warning-color);
    color: white;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
}

.action-btn .action-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn .action-top i {
    font-size: 1.3rem;
}

/* 操作按钮图标原色 */
#btn-read .action-top i { color: #3498db; }
#btn-work .action-top i { color: #f39c12; }
#btn-idea .action-top i { color: #f1c40f; }
#btn-experiment .action-top i { color: #2ecc71; }
#btn-write .action-top i { color: #e91e63; }
#btn-next .action-top i { color: #9b59b6; }

.action-btn .action-top span {
    font-weight: 500;
    line-height: 1.2;
}

.action-cost {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* 论文工作站 */
.paper-slots { display: flex; flex-direction: column; gap: 10px; }

.paper-slot {
    padding: 12px 10px;
    background: var(--light-bg);
    border-radius: 10px;
    border: 2px dashed var(--border-color);
    position: relative;
    overflow: hidden;
}

.paper-slot.active {
    border-style: solid;
    border-color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* 论文槽全息闪光效果 */
.paper-slot.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 10;
}

.paper-slot.active:hover::after {
    left: 150%;
}

.paper-slot.active:hover {
    transform: translateY(-4px) rotateX(2deg) scale(1.01);
    box-shadow:
        0 12px 24px rgba(37, 99, 235, 0.12),
        0 0 15px rgba(37, 99, 235, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 10;
    position: relative;
}

.paper-slot.locked { opacity: 0.5; }

/* 期刊槽（升级槽位）悬浮效果 */
.paper-slot.upgraded-slot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.paper-slot.upgraded-slot::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(167, 139, 250, 0.3),
        transparent
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 10;
}

.paper-slot.upgraded-slot:hover::after {
    left: 150%;
}

.paper-slot.upgraded-slot:hover {
    transform: translateY(-4px) rotateX(2deg) scale(1.01);
    box-shadow:
        0 12px 24px rgba(167, 139, 250, 0.15),
        0 0 15px rgba(167, 139, 250, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 10;
    position: relative;
}

/* 投稿详细信息显示 */
.reviewing-detail-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 0.7rem;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.08));
    border-radius: 6px;
    margin-bottom: 4px;
}

.paper-slot .slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    min-height: 0;
}

.paper-slot .slot-title { font-weight: 600; color: var(--primary-color); font-size: 0.85rem; }
.paper-slot .paper-title { font-size: 0.75rem; font-weight: 500; margin: 0 0 8px 0; word-break: break-word; line-height: 1.2; }

.paper-scores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}

.score-box {
    text-align: center;
    padding: 5px;
    background: white;
    border-radius: 5px;
}

.score-box .label { font-size: 0.6rem; color: var(--text-secondary); }
.score-box .value { font-size: 0.9rem; font-weight: 700; color: var(--primary-color); }

.paper-total {
    text-align: center;
    padding: 5px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 5px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.8rem;
}

.paper-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.paper-actions .btn { padding: 5px; font-size: 0.7rem; justify-content: center; }

/* 压缩版论文槽样式 */
.paper-scores-compact {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

/* 新的分数框样式 */
.score-box-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 45px;
}

.score-box-inline .score-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.score-box-inline .score-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
}

.score-box-inline.total {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
    border-color: var(--primary-color);
}

.score-box-inline.total .score-value {
    color: var(--primary-color);
}

/* 论文进度箭头和点亮效果（合并分数显示）*/
.paper-progress-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 8px 0 10px 0;
    font-size: 0.7rem;
}

.paper-progress-flow .progress-step {
    display: flex;
    align-items: center;
    gap: 2px;
}

.paper-progress-flow .step-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 42px;
}

.paper-progress-flow .step-label .step-name {
    font-size: 0.55rem;
    opacity: 0.8;
}

.paper-progress-flow .step-label .step-score {
    font-size: 0.8rem;
    font-weight: 700;
}

.paper-progress-flow .step-label.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.15));
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.paper-progress-flow .step-label.completed .step-score {
    color: #16a34a;
}

.paper-progress-flow .step-label.ready {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
    color: var(--primary-color);
    border: 1px solid rgba(37, 99, 235, 0.3);
    animation: readyPulse 1.5s ease-in-out infinite;
}

.paper-progress-flow .step-label.ready .step-score {
    color: var(--primary-color);
}

@keyframes readyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 8px 2px rgba(37, 99, 235, 0.5); }
}

.paper-progress-flow .step-arrow {
    color: var(--border-color);
    font-size: 0.75rem;
}

.paper-progress-flow .step-arrow.active {
    color: #16a34a;
}

/* 会议信息栏样式 */
.conference-info-bar {
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 10px;
    margin-bottom: 0;
}

.conference-info-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.conference-info-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.conf-item {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: help;
    transition: all 0.2s ease;
}

.conf-item.conf-a {
    background: rgba(225, 112, 85, 0.15);
    color: #e17055;
    border: 1px solid rgba(225, 112, 85, 0.3);
}

.conf-item.conf-b {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.conf-item.conf-c {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.conf-item:hover {
    transform: translateY(-1px);
}

.paper-scores-compact .score-item {
    color: var(--text-secondary);
}

.paper-scores-compact .score-total {
    font-weight: 600;
    color: var(--primary-color);
    padding-left: 8px;
    border-left: 1px solid var(--border-color);
}

.paper-actions-compact {
    display: flex;
    gap: 4px;
}

.submit-btn {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    background: var(--light-bg);
    color: var(--text-primary);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.submit-btn.grade-a {
    border-color: #e17055;
    color: #e17055;
}

.submit-btn.grade-a:hover:not(:disabled) {
    background: rgba(225, 112, 85, 0.15);
}

.submit-btn.grade-b {
    border-color: #f59e0b;
    color: #b45309;
}

.submit-btn.grade-b:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.15);
}

.submit-btn.grade-c {
    border-color: #10b981;
    color: #059669;
}

.submit-btn.grade-c:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.15);
}

.submit-btn.abandon {
    flex: 0 0 32px;
    color: var(--text-secondary);
}

.submit-btn.abandon:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.new-paper-btn {
    width: 100%;
    padding: 15px;
    border: 2px dashed var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-family: inherit;
}

.new-paper-btn:hover { background: rgba(108,92,231,0.1); }

.reviewing-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--warning-color);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
}

.reviewing-badge.grade-A {
    background: linear-gradient(135deg, #e17055, #fab1a0);
    color: white;
}

.reviewing-badge.grade-B {
    background: linear-gradient(135deg, #fdcb6e, #ffeaa7);
    color: var(--text-primary);
}

.reviewing-badge.grade-C {
    background: linear-gradient(135deg, #00b894, #55efc4);
    color: white;
}

/* 商店样式 */
.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 6px;
}

.shop-item.disabled { opacity: 0.5; }

.shop-item-info { flex: 1; }
.shop-item-name { font-weight: 600; font-size: 0.85rem; }
.shop-item-desc { font-size: 0.7rem; color: var(--text-secondary); }

.shop-item-action {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shop-item-price {
    color: #d68910;
    font-weight: 600;
    font-size: 0.8rem;
}

.shop-item-action .btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}

/* 统计面板分隔 */
.stats-section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}

.stats-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 滚动条 */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--light-bg); border-radius: 2px; }
::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 2px; }

/* 人际关系面板样式 */
#relationship-panel {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 12px;
}

.relationship-slot {
    transition: all 0.2s ease;
}

.relationship-slot.filled:hover {
    background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(162,155,254,0.08)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108,92,231,0.15);
}

.relationship-slot.empty {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.relationship-slot.empty:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 中等宽度：保持4列布局，允许水平滚动 */
@media (max-width: 1500px) and (min-width: 769px) {
    html {
        overflow-x: scroll !important;
        overflow-y: scroll !important;
        min-width: 1100px;
    }
    body {
        overflow-x: visible !important;
        overflow-y: visible !important;
        min-width: 1100px;
    }
    #start-screen {
        min-width: 1100px;
    }
    #game-screen {
        overflow-x: visible !important;
        min-width: 1100px;
    }
    .game-container {
        min-width: 1100px;
        grid-template-columns: 240px 1fr 260px 240px;
    }
}

/* 移动端：单列流式布局 */
@media (max-width: 768px) {
    .game-container { grid-template-columns: 1fr; }
    .rightmost-column { grid-column: 1; grid-row: auto; }
}

/* 滚动条始终显示 */
html {
    scrollbar-gutter: stable;
}

/* 自定义滚动条样式（始终可见）*/
html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: 5px;
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 5px;
    border: 2px solid var(--light-bg);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

/* Firefox滚动条 */
html {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-color) var(--light-bg);
}

/* ==================== 季节主题系统 ==================== */

/* 粒子容器 */
#season-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* 季节粒子基础样式 */
.season-particle {
    position: absolute;
    pointer-events: none;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* 春季 - 樱花 */
.particle-spring {
    font-size: 1.2rem;
    opacity: 0.7;
    animation-name: particleFallSpring;
}

@keyframes particleFallSpring {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) translateX(50px);
        opacity: 0;
    }
}

/* 夏季 - 光斑 */
.particle-summer {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent);
    border-radius: 50%;
    animation-name: particleFloatSummer;
}

@keyframes particleFloatSummer {
    0%, 100% {
        transform: translateY(0) scale(0.8);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-30px) scale(1.2);
        opacity: 0.7;
    }
}

/* 秋季 - 枫叶 */
.particle-autumn {
    font-size: 1.1rem;
    opacity: 0.75;
    animation-name: particleFallAutumn;
}

@keyframes particleFallAutumn {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.75;
    }
    90% {
        opacity: 0.75;
    }
    100% {
        transform: translateY(100vh) rotate(-540deg) translateX(-30px);
        opacity: 0;
    }
}

/* 冬季 - 雪花 */
.particle-winter {
    font-size: 0.9rem;
    color: #60a5fa;
    text-shadow: 0 0 6px rgba(96, 165, 250, 0.8), 0 0 12px rgba(59, 130, 246, 0.5);
    animation-name: particleFallWinter;
}

@keyframes particleFallWinter {
    0% {
        transform: translateY(-20px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}

/* 学术符号点缀粒子 - 下落效果 */
.particle-academic {
    font-size: 1.5rem;
    opacity: 0.8;
    animation-name: particleFallAcademic;
}

@keyframes particleFallAcademic {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0.8;
    }
    95% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) rotate(180deg) translateX(30px);
        opacity: 0;
    }
}

/* 开始页面科研符号浮动粒子 */
.particle-startpage {
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0.7;
    animation-name: particleFloatStartPage;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
}

@keyframes particleFloatStartPage {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-15px) translateX(8px) rotate(5deg) scale(1.05);
        opacity: 0.85;
    }
    50% {
        transform: translateY(-5px) translateX(-5px) rotate(-3deg) scale(1);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-20px) translateX(-10px) rotate(8deg) scale(1.08);
        opacity: 0.8;
    }
}

/* 季节背景渐变 */
body.season-spring #game-screen {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 30%, #f0fdf4 70%, #ecfdf5 100%);
}

body.season-summer #game-screen {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 30%, #fef9c3 70%, #fefce8 100%);
}

body.season-autumn #game-screen {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 30%, #fed7aa 70%, #fef3c7 100%);
}

body.season-winter #game-screen {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 30%, #dbeafe 70%, #eff6ff 100%);
}

/* 季节时间面板边框颜色 */
body.season-spring .time-display-panel {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

body.season-summer .time-display-panel {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

body.season-autumn .time-display-panel {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    border: 1px solid rgba(234, 88, 12, 0.3);
}

body.season-winter .time-display-panel {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

/* 庆祝粒子容器 */
#celebration-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* 庆祝粒子 - 金色爆发 */
.celebration-particle {
    position: absolute;
    pointer-events: none;
}

.celebration-gold {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    border-radius: 50%;
    box-shadow: 0 0 6px #ffd700;
    animation: celebrationBurst 1.5s ease-out forwards;
}

/* 撒花彩带 */
.celebration-confetti {
    width: 10px;
    height: 6px;
    border-radius: 2px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes celebrationBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.5);
        opacity: 0;
    }
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0.3;
    }
}

/* 毕业帽抛起动画 */
.graduation-hat {
    position: absolute;
    font-size: 2rem;
    animation: hatThrow 2s ease-out forwards;
}

@keyframes hatThrow {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    40% {
        transform: translateY(-150px) rotate(-30deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(100px) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

.hidden { display: none !important; }

/* 移动端适配 */
@media (max-width: 768px) {
    /* 防止输入框聚焦时自动缩放 */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* 防止元素溢出导致横向滚动 */
    .start-container,
    .game-container,
    .panel,
    .modal {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .left-column { display: flex; flex-direction: column; }
    #graduation-panel { order: 1; }
    #attributes-panel { order: 3; }
    #research-panel { order: 2; }

    .middle-column { display: flex; flex-direction: column; }
    #action-panel { order: 1; }
    #buff-panel { order: 3; }
    #log-panel { order: 2; }

    .start-container { padding: 15px; margin: 10px; width: calc(100% - 20px); }
    .game-title { font-size: 1.6rem; }
    .game-intro { font-size: 0.8rem; padding: 10px; }
    .character-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .character-card { padding: 10px; }
    .character-card .icon { font-size: 1.5rem; }
    .character-card .name { font-size: 0.9rem; }
    .character-card .desc { font-size: 0.7rem; }
    .character-card .bonus { font-size: 0.65rem; padding: 4px 6px; }

    #game-screen { padding: 5px; }
    .game-container { grid-template-columns: 1fr; gap: 8px; }
    .panel { padding: 10px; border-radius: 12px; }
    .panel-title { font-size: 0.85rem; padding-bottom: 6px; margin-bottom: 8px; }

    .log-content { height: 200px; padding: 6px; }
    .action-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .action-btn { padding: 12px 8px; font-size: 0.75rem; min-height: 60px; }

    .modal { max-width: 95%; max-height: 90vh; padding: 15px; }
    .modal-title { font-size: 1.1rem; }
    .modal-content { font-size: 0.85rem; }
}

@media (max-width: 400px) {
    .character-grid { grid-template-columns: 1fr; }
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 移动端底部快捷栏 */
.mobile-quick-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 8px 5px;
    /* ★★★ 修复：提高z-index确保不被覆盖 ★★★ */
    z-index: 999;
    justify-content: space-around;
    /* ★★★ 修复：iOS Safari fixed元素稳定性 ★★★ */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* ★★★ 修复：防止被意外隐藏 ★★★ */
    visibility: visible !important;
    opacity: 1 !important;
}

.quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border: none;
    background: var(--light-bg);
    border-radius: 8px;
    font-size: 0.7rem;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.quick-btn i { font-size: 1.1rem; color: var(--primary-color); }
.quick-btn.next-month-btn { background: linear-gradient(135deg, var(--danger-color), #fab1a0); color: white; }
.quick-btn.next-month-btn i { color: white; }

@media (max-width: 768px) {
    /* ★★★ 修复：确保移动端操作栏稳定显示 ★★★ */
    .mobile-quick-bar.game-active {
        display: flex !important;
        /* 安全区域适配 */
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    #game-screen { padding-bottom: 70px; }
}

/* ==================== 折叠功能CSS样式（增强版）==================== */

/* 可折叠面板标题 */
.panel-title.collapsible,
.panel-title.clickable {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.panel-title.collapsible:hover {
    color: var(--accent-color);
}

.panel-title .collapse-icon {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.panel-title .collapse-icon.rotated {
    transform: rotate(-90deg);
}

/* 折叠内容区域 */
.collapsible-content {
    overflow: visible;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
    max-height: 2000px;
    opacity: 1;
    position: relative;
}

.collapsible-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* 折叠状态的面板 */
.panel.panel-collapsed {
    padding-bottom: 12px;
}

.panel.panel-collapsed .panel-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 折叠提示徽章 */
.collapse-hint {
    font-size: 0.6rem;
    padding: 2px 6px;
    background: var(--light-bg);
    border-radius: 8px;
    color: var(--text-secondary);
    margin-left: 8px;
}

/* 开始页面折叠区块 */
.collapsible-section {
    margin-bottom: 15px;
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--light-bg);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.collapsible-header:hover {
    background: var(--border-color);
}

.collapsible-header h3,
.collapsible-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.collapsible-header .collapse-toggle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.collapsible-header.collapsed .collapse-toggle {
    transform: rotate(-90deg);
}

.collapsible-body {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 3000px;
    opacity: 1;
}

.collapsible-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
}

/* 快速展开/收起所有按钮 */
.collapse-all-btn {
    position: fixed;
    bottom: 80px;
    right: 15px;
    z-index: 99;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    display: none;
}

@media (max-width: 768px) {
    .collapse-all-btn {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}

/* ==================== 角色卡片折叠功能 ==================== */

.character-card {
    position: relative;
}

.character-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
    transition: all 0.3s ease;
}

.character-card .card-header:hover {
    color: var(--primary-color);
}

.character-card .card-header .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.character-card .card-header .collapse-icon {
    font-size: 0.7rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.character-card .card-header .collapse-icon.rotated {
    transform: rotate(-90deg);
}

.character-card .card-body {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    max-height: 1000px;
    opacity: 1;
}

.character-card .card-body.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

.character-card.card-collapsed {
    padding-bottom: 12px;
}

.character-card.card-collapsed .card-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 折叠状态下的迷你难度显示 */
.character-card .mini-difficulty {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
}

.character-card.card-collapsed .mini-difficulty {
    display: flex;
}

/* ==================== 留言板样式 ==================== */
.message-input-area {
    background: var(--card-bg);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.message-input-area input:focus,
.message-input-area textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1);
}

.message-item {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.message-item:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.message-item.reply {
    margin-left: 30px;
    border-left: 3px solid var(--secondary-color);
    background: linear-gradient(135deg, rgba(162,155,254,0.05), rgba(108,92,231,0.05));
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.message-nickname {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.message-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.message-content {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    word-break: break-word;
}

.message-reply-to {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
    padding: 4px 8px;
    background: var(--light-bg);
    border-radius: 4px;
    display: inline-block;
}

.message-actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
}

.message-actions button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.message-actions button:hover {
    background: var(--light-bg);
    color: var(--primary-color);
}

.reply-count {
    color: var(--info-color);
    font-size: 0.75rem;
    margin-left: 5px;
}

.message-replies {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.no-messages {
    text-align: center;
    padding: 30px;
    color: var(--text-secondary);
}

.no-messages i {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* 游戏说明按钮区域样式增强 */
#guide-section .collapsible-header {
    background: var(--light-bg);
}

#guide-section .collapsible-header:hover {
    background: var(--border-color);
}

/* 说明弹窗内的表格样式 */
.modal table {
    background: var(--card-bg);
}

.modal code {
    word-break: break-word;
}

/* 响应式调整 */
@media (max-width: 600px) {
    #guide-section .btn {
        font-size: 0.7rem !important;
        padding: 8px 4px !important;
    }
    
    #guide-section .btn i {
        display: block;
        margin-bottom: 2px;
    }
}

/* ==================== 动画效果 ==================== */

/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 日志条目动画 */
.log-entry {
    animation: slideIn 0.3s ease;
}

/* 面板加载动画 */
.panel {
    animation: fadeIn 0.4s ease;
}

/* 角色卡片悬浮增强 - 3D立体效果 */
.character-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
    overflow: hidden;
}

/* 全息闪光效果 */
.character-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 10;
}

.character-card:hover::after {
    left: 150%;
}

.character-card:hover {
    transform: translateY(-8px) rotateX(3deg) rotateY(-2deg) scale(1.03);
    box-shadow:
        0 20px 40px rgba(37, 99, 235, 0.15),
        0 0 20px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 选中卡片的特殊效果 */
.character-card.selected {
    animation: selectedPulse 2s ease-in-out infinite;
}

.character-card.selected::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        var(--primary-color),
        var(--accent-color),
        var(--primary-color));
    border-radius: 14px;
    z-index: -1;
    animation: borderGlow 3s linear infinite;
    background-size: 200% 200%;
}

@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 25px rgba(37, 99, 235, 0.5); }
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 按钮点击反馈 */
.btn:active:not(:disabled),
.action-btn:active:not(:disabled),
.utility-btn:active,
.guide-btn:active {
    transform: scale(0.96);
}

/* 开始按钮脉冲效果 */
.start-btn:not(:disabled) {
    animation: pulse 2s ease-in-out infinite;
}

.start-btn:hover:not(:disabled) {
    animation: none;
}

/* 弹窗动画增强 */
.modal {
    animation: fadeIn 0.3s ease;
}

/* 属性值变化高亮 */
@keyframes valueChange {
    0% { color: var(--primary-color); }
    50% { color: var(--success-color); transform: scale(1.2); }
    100% { color: var(--primary-color); }
}

.value-changed {
    animation: valueChange 0.5s ease;
}

/* 加载状态动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-spin {
    animation: spin 1s linear infinite;
}

/* 开始界面背景动画 */
#start-screen {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 进度条动画 - 移除从0开始的动画，改为平滑过渡 */
/* .progress-fill 的 transition 已在 line 700 定义 */

/* 成就徽章闪烁 */
.coin-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==================== 隐藏旧的角色卡片网格 ==================== */
#character-grid {
    display: none !important;
}

/* ==================== 新星盘双面板布局 ==================== */
.constellation-wrapper {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: center;
    align-items: stretch;
}

.constellation-select-panel {
    flex: 0 0 auto;
    width: 380px;
    max-width: 100%;
}

.constellation-preview-panel {
    flex: 0 0 auto;
    width: 300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.preview-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.constellation-panel {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 星盘面板默认样式（蓝白学院风） */
.constellation-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.constellation-panel-header {
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.constellation-panel-header {
    background: rgba(37, 99, 235, 0.08);
    border-bottom: 2px solid var(--border-color);
    color: var(--primary-color);
}

.constellation-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.constellation-header {
    background: rgba(37, 99, 235, 0.08);
    border-bottom: 2px solid var(--border-color);
}

.constellation-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.constellation-title {
    color: var(--primary-color);
}

/* ==================== 4×4网格布局样式 ==================== */

/* 网格区域 - 独立布局 */
.constellation-grid-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}

/* 按钮区域 */
.constellation-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 15px;
    border-top: 1px solid var(--border-color);
}

.constellation-buttons {
    border-top-color: rgba(59, 130, 246, 0.15);
}

/* 4×4网格容器 */
.constellation-grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 320px;
    position: relative;
    padding: 10px;
    border-radius: 12px;
}

/* 背景分区 - 左灰色石槽，右暗紫色神秘石头 */
.constellation-grid-4x4 {
    background:
        /* 左侧灰色石槽纹理 */
        linear-gradient(
            to right,
            /* 左半边 */
            rgba(120, 120, 120, 0.15) 0%,
            rgba(100, 100, 100, 0.1) 25%,
            rgba(130, 130, 130, 0.12) 50%,
            /* 右半边透明 */
            transparent 50%
        ),
        /* 右侧暗紫色神秘渐变 */
        linear-gradient(
            to right,
            transparent 50%,
            rgba(45, 20, 60, 0.95) 50%,
            rgba(60, 25, 80, 0.9) 65%,
            rgba(40, 15, 55, 0.95) 80%,
            rgba(30, 10, 45, 0.98) 100%
        ),
        /* 左侧石槽质感 - 浅灰带凹槽感 */
        linear-gradient(
            145deg,
            #b8b8b8 0%,
            #a0a0a0 20%,
            #909090 40%,
            #a8a8a8 60%,
            #989898 80%,
            #a0a0a0 100%
        ),
        /* 基础背景色 */
        linear-gradient(
            to right,
            #a0a0a0 0%,
            #a0a0a0 50%,
            #1a0a20 50%,
            #1a0a20 100%
        );
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.25),
        inset 0 2px 6px rgba(255, 255, 255, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(80, 80, 80, 0.6);
}

/* 网格行 */
.grid-row {
    display: contents;
}

/* 确保按钮在网格单元格中居中 */
.constellation-grid-4x4 > .grid-row > .gem-rune,
.constellation-grid-4x4 > .grid-row > .center-zone {
    justify-self: center;
    align-self: center;
}

/* 中心区域占位 */
.center-zone {
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: transparent;
    width: 100%;
    height: 100%;
}

.center-zone:hover {
    opacity: 0.8;
}


/* 中心核心覆盖层 */
.center-core-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
}

/* ===== 宝石符文基础样式 ===== */
.gem-rune {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    opacity: 1 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 移除所有伪元素光晕 */
.gem-rune::before,
.gem-rune::after {
    display: none !important;
}

.gem-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gem-rune.unlocked .gem-glow {
    opacity: 1;
}

/* ===== 正位按钮样式 (normal-rune) - 白色背景，黑字，立体凸起 ===== */
.gem-rune.normal-rune {
    background: #f0f0f0 !important;
    background-image: linear-gradient(
        145deg, 
        #ffffff 0%, 
        #f8f8f8 20%,
        #f0f0f0 50%, 
        #e0e0e0 80%,
        #d0d0d0 100%
    ) !important;
    border: 3px solid;
    border-top-color: #e0e0e0;
    border-left-color: #e0e0e0;
    border-bottom-color: #909090;
    border-right-color: #909090;
    box-shadow:
        /* 外部阴影 - 凸起投影 */
        4px 4px 8px rgba(0, 0, 0, 0.3),
        2px 2px 4px rgba(0, 0, 0, 0.2),
        /* 外部高光 */
        -2px -2px 6px rgba(255, 255, 255, 0.8),
        /* 内部高光 */
        inset 2px 2px 6px rgba(255, 255, 255, 0.9),
        /* 内部底部阴影 */
        inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}

.gem-rune.normal-rune.locked {
    background: #d8d8d8 !important;
    background-image: linear-gradient(
        145deg, 
        #e8e8e8 0%, 
        #d8d8d8 50%, 
        #c0c0c0 100%
    ) !important;
    border-top-color: #d0d0d0;
    border-left-color: #d0d0d0;
    border-bottom-color: #888888;
    border-right-color: #888888;
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.2),
        -1px -1px 4px rgba(255, 255, 255, 0.5),
        inset 1px 1px 4px rgba(255, 255, 255, 0.6),
        inset -1px -1px 3px rgba(0, 0, 0, 0.08);
}

.gem-rune.normal-rune.locked .rune-icon {
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.6;
}

.gem-rune.normal-rune.unlocked {
    background: #ffffff !important;
    background-image: linear-gradient(
        145deg, 
        #ffffff 0%, 
        #fafafa 25%,
        #f0f0f0 50%, 
        #e5e5e5 75%,
        #d8d8d8 100%
    ) !important;
    border: 3px solid;
    border-top-color: #60a5fa;
    border-left-color: #60a5fa;
    border-bottom-color: #2563eb;
    border-right-color: #2563eb;
    box-shadow:
        5px 5px 10px rgba(0, 0, 0, 0.35),
        3px 3px 6px rgba(0, 0, 0, 0.25),
        -2px -2px 8px rgba(255, 255, 255, 0.9),
        0 0 12px rgba(59, 130, 246, 0.4),
        inset 2px 2px 8px rgba(255, 255, 255, 0.95),
        inset -2px -2px 5px rgba(0, 0, 0, 0.1);
}

.gem-rune.normal-rune .rune-icon {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
    z-index: 2;
}

.gem-rune.normal-rune.unlocked .gem-glow {
    display: none;
}

/* 正位按钮文字 - 黑色 */
.gem-rune.normal-rune .rune-label {
    color: #1a1a1a !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
    z-index: 2;
}

.gem-rune.normal-rune.locked .rune-label {
    color: #666666 !important;
}

/* 正位悬停 - 更凸起 */
.gem-rune.normal-rune:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow:
        6px 8px 14px rgba(0, 0, 0, 0.4),
        4px 5px 8px rgba(0, 0, 0, 0.3),
        -2px -2px 10px rgba(255, 255, 255, 0.9),
        inset 2px 2px 8px rgba(255, 255, 255, 0.95),
        inset -2px -2px 5px rgba(0, 0, 0, 0.1);
}

/* 正位点击 - 下压 */
.gem-rune.normal-rune:active {
    transform: scale(1.05) translateY(0);
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.25),
        -1px -1px 4px rgba(255, 255, 255, 0.6),
        inset 1px 1px 4px rgba(255, 255, 255, 0.7),
        inset -1px -1px 3px rgba(0, 0, 0, 0.08);
}

/* ===== 逆位按钮样式 (reversed-rune) - 浅灰背景，黑字，立体凹陷 ===== */
.gem-rune.reversed-rune {
    background: #a8a8a8 !important;
    background-image: linear-gradient(
        145deg, 
        #909090 0%, 
        #989898 20%,
        #a8a8a8 50%, 
        #b8b8b8 80%,
        #c8c8c8 100%
    ) !important;
    border: 3px solid;
    border-top-color: #707070;
    border-left-color: #707070;
    border-bottom-color: #b8b8b8;
    border-right-color: #b8b8b8;
    box-shadow:
        /* 内部深阴影 - 凹陷效果 */
        inset 4px 4px 10px rgba(0, 0, 0, 0.4),
        inset 2px 2px 5px rgba(0, 0, 0, 0.3),

        /* 内部底部高光 - 凹陷边缘反光 */
        inset -3px -3px 8px rgba(255, 255, 255, 0.5),
        inset -1px -1px 3px rgba(255, 255, 255, 0.3),
        /* 轻微外部阴影 */
        1px 1px 2px rgba(0, 0, 0, 0.1);
}

.gem-rune.reversed-rune.locked {
    background: #989898 !important;
    background-image: linear-gradient(
        145deg, 
        #808080 0%, 
        #909090 50%, 
        #a0a0a0 100%
    ) !important;
    border-top-color: #606060;
    border-left-color: #606060;
    border-bottom-color: #a0a0a0;
    border-right-color: #a0a0a0;
    box-shadow:
        inset 3px 3px 8px rgba(0, 0, 0, 0.35),
        inset -2px -2px 6px rgba(255, 255, 255, 0.4),
        1px 1px 2px rgba(0, 0, 0, 0.08);
}

.gem-rune.reversed-rune.locked .rune-icon {
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.6;
}

.gem-rune.reversed-rune.unlocked {
    background: #b0b0b0 !important;
    background-image: linear-gradient(
        145deg, 
        #909090 0%, 
        #a0a0a0 25%,
        #b0b0b0 50%, 
        #c0c0c0 75%,
        #d0d0d0 100%
    ) !important;
    border: 3px solid;
    border-top-color: #c0392b;
    border-left-color: #c0392b;
    border-bottom-color: #f5a89a;
    border-right-color: #f5a89a;
    box-shadow:
        inset 5px 5px 12px rgba(0, 0, 0, 0.45),
        inset 3px 3px 6px rgba(0, 0, 0, 0.35),
        inset -4px -4px 10px rgba(255, 255, 255, 0.6),
        inset -2px -2px 4px rgba(255, 255, 255, 0.4),
        0 0 10px rgba(231, 76, 60, 0.35),
        1px 1px 3px rgba(0, 0, 0, 0.15);
}

.gem-rune.reversed-rune .rune-icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    z-index: 2;
}

.gem-rune.reversed-rune.unlocked .gem-glow {
    display: none;
}

/* 逆位按钮文字 - 黑色 */
.gem-rune.reversed-rune .rune-label {
    color: #1a1a1a !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    z-index: 2;
}

.gem-rune.reversed-rune.locked .rune-label {
    color: #4a4a4a !important;
}

/* 逆位悬停 - 更深凹陷 */
.gem-rune.reversed-rune:hover {
    transform: scale(1.08);
    box-shadow:
        inset 6px 6px 15px rgba(0, 0, 0, 0.5),
        inset 3px 3px 8px rgba(0, 0, 0, 0.4),
        inset -4px -4px 12px rgba(255, 255, 255, 0.6),
        0 0 12px rgba(231, 76, 60, 0.4),
        1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 逆位点击 - 凹到底 */
.gem-rune.reversed-rune:active {
    transform: scale(1.02);
    box-shadow:
        inset 8px 8px 18px rgba(0, 0, 0, 0.55),
        inset 4px 4px 10px rgba(0, 0, 0, 0.45),
        inset -3px -3px 8px rgba(255, 255, 255, 0.5);
}

/* 锁定状态 */
.gem-rune.locked {
    opacity: 1 !important;
}

/* 选中状态 */
.gem-rune.selected {
    transform: scale(1.15);
}

.gem-rune.normal-rune.selected {
    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.4),
        -3px -3px 10px rgba(255, 255, 255, 0.95),
        0 0 20px rgba(59, 130, 246, 0.6),
        inset 2px 2px 8px rgba(255, 255, 255, 0.95),
        inset -2px -2px 5px rgba(0, 0, 0, 0.1);
}

.gem-rune.reversed-rune.selected {
    box-shadow:
        inset 6px 6px 15px rgba(0, 0, 0, 0.5),
        inset -5px -5px 12px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(231, 76, 60, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.15);
}

/* 锁图标样式 */
.rune-lock-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 12px;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.rune-icon {
    font-size: 1.4rem;
    z-index: 2;
    transition: all 0.3s ease;
}

.rune-label {
    font-size: 0.55rem;
    font-weight: 600;
    margin-top: 2px;
    z-index: 2;
    transition: all 0.3s ease;
}

/* ==================== 中心核心按钮 ==================== */
.center-core {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.center-core .center-icon {
    font-size: 1.6rem;
}

.center-core .center-text {
    font-size: 0.65rem;
    font-weight: 600;
}

/* 真大多数 - 金色样式 */
.center-core {
    background: linear-gradient(145deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
    border: 3px solid #ffd700;
    box-shadow: none;
    animation: none;
}

.center-core.locked {
    background: rgb(60, 60, 60);
    border-color: rgba(255, 255, 255, 0.5);
    opacity: 0.8;
}

.center-core.unlocked {
    background: linear-gradient(145deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
    border: 3px solid #ffd700;
}

.center-core .center-text {
    color: #5a3800;
    text-shadow: none;
}

.center-core.locked .center-text {
    color: #e0e0e0;
}

.center-core:hover {
    transform: scale(1.05);
    box-shadow: none;
}

.center-core.active {
    transform: scale(1.08);
    box-shadow: none;
    border-color: #ffed4a;
}

.center-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: none;
    animation: none;
    opacity: 0;
    display: none;
}

.center-core.unlocked .center-glow {
    display: none;
}

.center-icon {
    font-size: 1.5rem;
    z-index: 1;
}

.center-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: #333;
    margin-top: 2px;
    z-index: 1;
}

.center-core.locked .center-text {
    color: #666;
}

/* 真大多数金色图标样式 */
.gold-icon {
    display: inline-block;
    filter: sepia(100%) saturate(300%) brightness(1.1) hue-rotate(-10deg) drop-shadow(0 2px 3px rgba(139, 90, 0, 0.4));
}

/* 中心核心内的金色图标 */
.center-core .gold-icon {
    filter: sepia(100%) saturate(400%) brightness(1.2) hue-rotate(-10deg) drop-shadow(0 2px 4px rgba(139, 90, 0, 0.5));
}

/* 预览卡片内的金色图标 */
.preview-icon .gold-icon,
.preview-card .gold-icon {
    font-size: inherit;
}

/* ==================== 底部进度条区域 ==================== */
.constellation-footer {
    padding: 12px 15px;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* 底部进度条区域样式 */
.constellation-footer {
    background: transparent;
    border-top: 1px solid rgba(200, 200, 200, 0.3);
}

.progress-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.progress-bar-mini {
    flex: 1;
    max-width: 280px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

/* 进度条背景 */
.progress-bar-mini {
    background: rgba(180, 180, 180, 0.4);
}

.progress-fill-mini {
    height: 100%;
    background: linear-gradient(90deg, #6c5ce7, #ffd700, #9b59b6);
    background-size: 200% 100%;
    animation: progressShineConstellation 3s linear infinite;
    border-radius: 3px;
    transition: width 0.5s ease;
}

@keyframes progressShineConstellation {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.progress-text-mini {
    font-size: 0.75rem;
}

.progress-text-mini {
    color: var(--text-secondary);
}

.mode-switch-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.mode-switch-btn {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    background: var(--light-bg);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    color: var(--text-secondary);
}

.mode-switch-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.mode-switch-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.mode-switch-btn.reversed.active {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border-color: #8e44ad;
}

/* ==================== 右侧预览面板 ==================== */
.constellation-right {
    flex: 1;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    position: relative;
}

.constellation-right {
    background: var(--light-bg);
}

.preview-placeholder {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
}

.preview-placeholder i {
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

/* ==================== 角色预览卡牌样式 ==================== */

/* 基础预览卡牌 */
.preview-card {
    width: 100%;
    max-width: 300px;
    padding: 18px;
    border-radius: 16px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* 5. 卡片悬停3D倾斜效果 */
.preview-card:hover {
    transform: rotateX(2deg) rotateY(-3deg) translateY(-5px) scale(1.02);
}

/* 4. 卡片纹理背景层 */
.preview-card .card-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.03;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px
        );
    pointer-events: none;
    z-index: 0;
}

/* 预览面板宽度也相应增加 */
.constellation-preview-panel {
    flex: 0 0 auto;
    width: 340px;  /* ★ 增加宽度：300px -> 340px */
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

/* ===== 正位角色卡牌 - 优化：浅蓝白渐变，清新质感 ===== */
.preview-card:not(.gold-card):not(.reversed-card) {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #f8fcff 15%,
        #f0f9ff 35%,
        #e0f2fe 60%,
        #bae6fd 85%,
        #93c5fd 100%) !important;
    border: 3px solid #60a5fa !important;
    box-shadow:
        0 0 20px rgba(96, 165, 250, 0.4),
        0 0 40px rgba(147, 197, 253, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.1),
        inset 0 2px 8px rgba(255, 255, 255, 0.95),
        inset 0 -2px 6px rgba(96, 165, 250, 0.1) !important;
    animation: blueCardGlow 3s ease-in-out infinite;
}

@keyframes blueCardGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(96, 165, 250, 0.4),
            0 0 40px rgba(147, 197, 253, 0.2),
            0 8px 25px rgba(0, 0, 0, 0.1),
            inset 0 2px 8px rgba(255, 255, 255, 0.95);
    }
    50% {
        box-shadow:
            0 0 28px rgba(96, 165, 250, 0.55),
            0 0 55px rgba(147, 197, 253, 0.3),
            0 8px 25px rgba(0, 0, 0, 0.1),
            inset 0 2px 8px rgba(255, 255, 255, 0.95);
    }
}

.preview-card:not(.gold-card):not(.reversed-card)::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(96, 165, 250, 0.25);
    border-radius: 10px;
    pointer-events: none;
}

.preview-card:not(.gold-card):not(.reversed-card)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: blueCardGlint 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes blueCardGlint {
    0%, 100% { left: -50%; opacity: 0; }
    50% { left: 100%; opacity: 1; }
}

/* 正位卡牌文字 - 深蓝色 */
.preview-card:not(.gold-card):not(.reversed-card) .preview-name {
    color: #1e40af !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.preview-card:not(.gold-card):not(.reversed-card) .preview-desc {
    color: #1e3a5f !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .preview-bonus {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.preview-card:not(.gold-card):not(.reversed-card) .mode-tag.normal {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* 3. 正位觉醒区域特效 - 蓝色能量光芒 */
.preview-card:not(.gold-card):not(.reversed-card) .preview-awaken {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(96, 165, 250, 0.08)) !important;
    border: 1px dashed #3b82f6 !important;
    position: relative;
    overflow: hidden;
}

.preview-card:not(.gold-card):not(.reversed-card) .preview-awaken::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.12) 0%, transparent 70%);
    animation: awakenPulseBlue 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes awakenPulseBlue {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.preview-card:not(.gold-card):not(.reversed-card) .awaken-title {
    color: #1d4ed8 !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .awaken-desc {
    color: #1e3a5f !important;
}

/* 正位卡牌难度星星 */
.preview-card:not(.gold-card):not(.reversed-card) .difficulty-container {
    background: rgba(59, 130, 246, 0.1) !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .difficulty-label {
    color: #1d4ed8 !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .difficulty-badge {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #1d4ed8 !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .difficulty-stars i.fas {
    color: #2563eb !important;
    text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

.preview-card:not(.gold-card):not(.reversed-card) .difficulty-stars i.far {
    color: #93c5fd !important;
    opacity: 0.5;
}

.preview-card:not(.gold-card):not(.reversed-card) .meta-records {
    background: rgba(59, 130, 246, 0.06) !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .meta-records th,
.preview-card:not(.gold-card):not(.reversed-card) .meta-records td {
    color: #1e3a5f !important;
}

.preview-card:not(.gold-card):not(.reversed-card) .difficulty-rate {
    font-size: 0.6rem;
    margin-top: 2px;
    color: #1e3a5f !important;
}

/* ===== 逆位角色卡牌 - 优化：红黑渐变，暗焰质感 ===== */
.preview-card.reversed-card:not(.gold-card) {
    background: linear-gradient(145deg,
        #1a0808 0%,
        #2a1010 20%,
        #3a1515 40%,
        #2d1010 60%,
        #1f0a0a 80%,
        #150505 100%) !important;
    border: 3px solid #dc2626 !important;
    box-shadow:
        0 0 25px rgba(220, 38, 38, 0.5),
        0 0 50px rgba(239, 68, 68, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 2px 8px rgba(220, 38, 38, 0.15),
        inset 0 -3px 8px rgba(0, 0, 0, 0.3) !important;
    animation: redCardGlow 3s ease-in-out infinite;
}

@keyframes redCardGlow {
    0%, 100% {
        box-shadow:
            0 0 25px rgba(220, 38, 38, 0.5),
            0 0 50px rgba(239, 68, 68, 0.25),
            0 10px 30px rgba(0, 0, 0, 0.5),
            inset 0 2px 8px rgba(220, 38, 38, 0.15);
    }
    50% {
        box-shadow:
            0 0 35px rgba(220, 38, 38, 0.7),
            0 0 70px rgba(239, 68, 68, 0.35),
            0 10px 30px rgba(0, 0, 0, 0.5),
            inset 0 2px 8px rgba(220, 38, 38, 0.25);
    }
}

.preview-card.reversed-card:not(.gold-card)::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(220, 38, 38, 0.35);
    border-radius: 10px;
    pointer-events: none;
}

.preview-card.reversed-card:not(.gold-card)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.2), transparent);
    animation: redCardGlint 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes redCardGlint {
    0%, 100% { left: -50%; opacity: 0; }
    50% { left: 100%; opacity: 1; }
}

/* 逆位卡牌文字 - 白色带红色阴影 */
.preview-card.reversed-card:not(.gold-card) .preview-name {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(220, 38, 38, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}

.preview-card.reversed-card:not(.gold-card) .preview-desc {
    color: #fecaca !important;
}

.preview-card.reversed-card:not(.gold-card) .preview-bonus {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(220, 38, 38, 0.4);
}

.preview-card.reversed-card:not(.gold-card) .mode-tag.reversed {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}

/* 3. 逆位觉醒区域特效 - 暗焰涌动 */
.preview-card.reversed-card:not(.gold-card) .preview-awaken {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(127, 29, 29, 0.12)) !important;
    border: 1px dashed #dc2626 !important;
    position: relative;
    overflow: hidden;
}

.preview-card.reversed-card:not(.gold-card) .preview-awaken::before {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 0;
    right: 0;
    height: 80%;
    background: linear-gradient(to top, rgba(220, 38, 38, 0.2) 0%, transparent 100%);
    animation: awakenFlameRed 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes awakenFlameRed {
    0%, 100% { opacity: 0.4; transform: scaleY(0.9); }
    50% { opacity: 0.8; transform: scaleY(1.1); }
}

.preview-card.reversed-card:not(.gold-card) .awaken-title {
    color: #fca5a5 !important;
}

.preview-card.reversed-card:not(.gold-card) .awaken-desc {
    color: #fecaca !important;
}

/* 逆位卡牌难度星星 */
.preview-card.reversed-card:not(.gold-card) .difficulty-container {
    background: rgba(127, 29, 29, 0.35) !important;
}

.preview-card.reversed-card:not(.gold-card) .difficulty-label {
    color: #fecaca !important;
}

.preview-card.reversed-card:not(.gold-card) .difficulty-badge {
    background: rgba(220, 38, 38, 0.25) !important;
    color: #fca5a5 !important;
}

.preview-card.reversed-card:not(.gold-card) .difficulty-stars i.fas.fa-star {
    color: #ef4444 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* 半颗星移除发光效果，避免显示模糊 */
.preview-card.reversed-card:not(.gold-card) .difficulty-stars i.fas.fa-star-half-alt {
    color: #ef4444 !important;
    text-shadow: none !important;
}

.preview-card.reversed-card:not(.gold-card) .difficulty-stars i.far {
    color: #7f1d1d !important;
    opacity: 0.6;
}

/* 逆位卡牌记录表格样式 - 深红背景 */
.preview-card.reversed-card:not(.gold-card) .meta-records {
    background: rgba(127, 29, 29, 0.4) !important;
}

.preview-card.reversed-card:not(.gold-card) .meta-records th {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.preview-card.reversed-card:not(.gold-card) .meta-records td {
    color: #fecaca !important;
}

/* 逆位卡牌记录表格行标题颜色 */
.preview-card.reversed-card:not(.gold-card) .meta-records tbody tr td:first-child {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.preview-card.reversed-card:not(.gold-card) .difficulty-rate {
    font-size: 0.6rem;
    margin-top: 2px;
    color: #fca5a5 !important;
}

/* ★ 所有角色卡牌记录表格表头加粗 */
.preview-card .meta-records th {
    font-weight: 600 !important;
}

/* ===== 真大多数金色特殊卡牌样式 ===== */
.preview-card.gold-card {
    background: linear-gradient(145deg, #fffef5 0%, #fff8dc 30%, #ffefc0 60%, #ffe4a0 100%) !important;
    border: 4px solid #d4af37 !important;
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.4),
        0 0 40px rgba(255, 215, 0, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.15),
        inset 0 2px 6px rgba(255, 255, 255, 0.8),
        inset 0 -2px 6px rgba(139, 90, 0, 0.1) !important;
    animation: goldCardShine 3s ease-in-out infinite;
}

.preview-card.gold-card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 10px;
    pointer-events: none;
}

.preview-card.gold-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: goldCardGlint 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes goldCardShine {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(212, 175, 55, 0.4),
            0 0 40px rgba(255, 215, 0, 0.2),
            0 8px 25px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow:
            0 0 30px rgba(212, 175, 55, 0.6),
            0 0 60px rgba(255, 215, 0, 0.3),
            0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

@keyframes goldCardGlint {
    0%, 100% { left: -50%; opacity: 0; }
    50% { left: 100%; opacity: 1; }
}

.preview-card.gold-card .preview-name {
    color: #8b6914 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.preview-card.gold-card .preview-desc {
    color: #6b5210 !important;
}

.preview-card.gold-card .preview-bonus {
    background: rgba(139, 105, 20, 0.12) !important;
    color: #8b6914 !important;
    border: 1px solid rgba(139, 105, 20, 0.25);
}

.preview-card.gold-card .mode-tag {
    background: linear-gradient(135deg, #d4af37, #c4a030) !important;
    color: #fff !important;
    font-weight: 600;
}

.preview-card.gold-card .preview-awaken {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(196, 160, 48, 0.1)) !important;
    border: 1px dashed #c4a030 !important;
}

.preview-card.gold-card .awaken-title {
    color: #8b6914 !important;
}

.preview-card.gold-card .awaken-desc {
    color: #6b5210 !important;
}

/* 真大多数卡牌难度星星 - 暗黄色不发光 */
.preview-card.gold-card .difficulty-stars i {
    color: #b8860b !important;
    text-shadow: none !important;
}

.preview-card.gold-card .difficulty-stars i.fas {
    color: #b8860b !important;
    filter: none !important;
}

.preview-card.gold-card .difficulty-stars i.far {
    color: #8b6914 !important;
    opacity: 0.5;
    text-shadow: none !important;
}

.preview-card.gold-card .difficulty-container {
    background: rgba(139, 105, 20, 0.08) !important;
}

.preview-card.gold-card .difficulty-label {
    color: #8b6914 !important;
}

.preview-card.gold-card .difficulty-badge {
    background: rgba(102, 82, 16, 0.15) !important;
    color: #6b5210 !important;
}

.preview-card.gold-card .meta-records {
    background: rgba(139, 105, 20, 0.08) !important;
}

.preview-card.gold-card .meta-records th,
.preview-card.gold-card .meta-records td {
    color: #6b5210 !important;
}

.preview-card.gold-card .difficulty-rate {
    font-size: 0.6rem;
    margin-top: 2px;
    color: #6b5210 !important;
}

/* ===== 未选择/锁定状态的占位卡牌 ===== */
.preview-card-placeholder {
    width: 100%;
    max-width: 260px;
    padding: 40px 18px;
    border-radius: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* 预览占位卡片默认样式 */
.preview-card-placeholder {
    background: rgba(255, 255, 255, 0.7);
    border: 3px dashed rgba(59, 130, 246, 0.4);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.03),
        0 2px 8px rgba(37, 99, 235, 0.05);
}

.preview-card-placeholder .placeholder-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.6;
    color: var(--text-secondary);
}

.preview-card-placeholder .placeholder-text {
    font-size: 0.85rem;
    opacity: 0.6;
    color: var(--text-secondary);
}

/* ==================== 预览卡牌内部元素样式 ==================== */
.preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

/* 2. 图标浮动动画 */
.preview-icon {
    font-size: 2rem;
    animation: iconFloat 3s ease-in-out infinite;
    display: inline-block;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 1. 卡片角落装饰 */
.preview-card .corner-decoration {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 5;
}

.preview-card .corner-decoration.top-left {
    top: 6px;
    left: 6px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-radius: 4px 0 0 0;
}

.preview-card .corner-decoration.top-right {
    top: 6px;
    right: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 0 4px 0 0;
}

.preview-card .corner-decoration.bottom-left {
    bottom: 6px;
    left: 6px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-radius: 0 0 0 4px;
}

.preview-card .corner-decoration.bottom-right {
    bottom: 6px;
    right: 6px;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 0 0 4px 0;
}

/* 正位卡角落颜色 */
.preview-card:not(.gold-card):not(.reversed-card) .corner-decoration {
    color: rgba(59, 130, 246, 0.6);
}

/* 逆位卡角落颜色 */
.preview-card.reversed-card:not(.gold-card) .corner-decoration {
    color: rgba(220, 38, 38, 0.6);
}

/* 金色卡角落颜色 */
.preview-card.gold-card .corner-decoration {
    color: rgba(212, 175, 55, 0.7);
}

.preview-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.preview-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mode-tag {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

.mode-tag.normal {
    background: rgba(37, 99, 235, 0.15);
    color: var(--primary-color);
}

.mode-tag.reversed {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}

.preview-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: left;
}

.preview-bonus {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    margin-bottom: 10px;
    text-align: left;
}

.preview-bonus.normal-bonus {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.preview-bonus.reversed-bonus {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

.preview-awaken {
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
    text-align: left;
}

.preview-awaken.normal-awaken {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.05));
}

.preview-awaken.reversed-awaken {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(231, 76, 60, 0.08));
}

.awaken-title {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.awaken-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: left;
}

/* 角色名称左对齐 */
.preview-card .preview-title-row {
    align-items: flex-start;
}

/* ==================== 响应式布局 ==================== */
@media (max-width: 700px) {
    .constellation-wrapper {
        flex-direction: column;
        align-items: center;
    }

    /* 移动端：角色详情栏在选择栏上方 */
    .constellation-preview-panel {
        order: 1;
        flex: none;
        width: 100%;
        max-width: 400px;
    }

    .constellation-select-panel {
        order: 2;
        flex: none;
        width: 100%;
        max-width: 400px;
    }

    .constellation-grid-4x4 {
        max-width: 280px;
    }

    .gem-rune {
        width: 48px;
        height: 48px;
    }

    .center-core {
        width: 55px;
        height: 55px;
    }

    .center-core .center-icon {
        font-size: 1.2rem;
    }

    .center-core .center-text {
        font-size: 0.55rem;
    }
}

@media (max-width: 500px) {
    .constellation-grid-4x4 {
        gap: 6px;
        padding: 8px;
    }

    .gem-rune {
        width: 42px;
        height: 42px;
    }

    .gem-rune .rune-icon {
        font-size: 1.1rem;
    }

    .gem-rune .rune-label {
        font-size: 0.5rem;
    }

    .center-core {
        width: 48px;
        height: 48px;
    }
}

/* 结局弹窗链接按钮悬停效果 */
.modal a[href*="xhslink"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

/* 结局弹窗重开按钮悬停效果 */
.modal button[onclick="restartGame()"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(108,92,231,0.4) !important;
}

/* ==================== 年月时间显示栏 ==================== */
.time-display-panel {
    padding: 10px 15px !important;
    border-radius: 12px !important;
    /* 固定使用蓝色渐变 */
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    color: white !important;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

/* 时间面板光效 */
.time-display-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: timePanelShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes timePanelShine {
    0%, 100% { left: -100%; opacity: 0; }
    50% { left: 150%; opacity: 1; }
}

.time-display-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.time-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.time-year {
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* 月份数字动画 */
.time-month {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.95;
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.time-month.month-change {
    animation: monthFlip 0.5s ease-out;
}

@keyframes monthFlip {
    0% {
        transform: translateY(-10px) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateY(3px) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.95;
    }
}

/* 季节图标呼吸动画 */
.time-season {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    cursor: help;
    transition: all 0.3s ease;
    animation: seasonBreath 3s ease-in-out infinite;
}

@keyframes seasonBreath {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
}

.time-season:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
    animation: none;
}

/* 剩余时间显示 */
.time-remaining {
    font-size: 0.8rem;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* 时间紧迫时的警告样式 */
.time-remaining.urgent {
    background: rgba(239, 68, 68, 0.4);
    animation: urgentPulse 1s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% { background: rgba(239, 68, 68, 0.4); }
    50% { background: rgba(239, 68, 68, 0.6); }
}

/* 移动端时间显示栏浮动置顶 */
@media (max-width: 768px) {
    .time-display-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        margin: 0;
        border-radius: 0 !important;
        padding: 8px 15px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    /* 游戏界面顶部留出空间给浮动月份栏 */
    .game-container {
        padding-top: 50px;
    }

    .time-main {
        gap: 6px;
    }

    .time-year {
        font-size: 1rem;
    }

    .time-month {
        font-size: 0.85rem;
    }

    .time-season {
        font-size: 0.75rem;
        padding: 1px 6px;
    }

    .time-remaining {
        font-size: 0.75rem;
        padding: 2px 8px;
    }
}

/* ==================== 玩家统计显示样式 ==================== */

/* 开始页面的统计区块 */
.player-stats-section {
    margin: 0 15px 15px;
}

/* 默认样式（开始页面和结局弹窗）- 真大多数淡金色配色 */
.player-stats-box {
    background: linear-gradient(145deg, #fffef5 0%, #fff8dc 30%, #ffefc0 60%, #ffe4a0 100%);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.player-stats-box .ps-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 8px;
}

.player-stats-box .ps-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #8b6914;
}

.player-stats-box .ps-item i {
    color: #b8860b;
    font-size: 0.85rem;
}

.player-stats-box .ps-item strong {
    color: #6b5210;
    font-weight: 700;
    font-size: 0.9rem;
}

/* 当前局统计行（SAN上限、难度分）*/
.player-stats-box .ps-row-game {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(212, 175, 55, 0.4);
    justify-content: center;
    gap: 20px;
}

.player-stats-box .ps-difficulty {
    color: #c0392b;
}

.player-stats-box .ps-difficulty i {
    color: #e74c3c;
}

.player-stats-box .ps-difficulty strong {
    color: #c0392b;
}

/* 海报样式（分享页毕业纪念卡内）*/
.player-stats-poster {
    background: linear-gradient(145deg, rgba(255, 254, 245, 0.95), rgba(255, 239, 192, 0.9));
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.player-stats-poster .psp-title {
    text-align: center;
    font-size: 0.75rem;
    color: #8b6914;
    margin-bottom: 8px;
    font-weight: 600;
}

.player-stats-poster .psp-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 6px;
}

.player-stats-poster .psp-item {
    font-size: 0.7rem;
    color: #6b5210;
    font-weight: 500;
}

/* 紧凑样式（已弃用，保留兼容）*/
.player-stats-compact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.player-stats-compact .ps-item {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 500;
}

/* 横幅样式（已弃用，保留兼容）*/
.player-stats-banner {
    width: 100%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 12px 15px;
    margin-bottom: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.player-stats-banner .psb-title {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
    font-weight: 600;
}

.player-stats-banner .psb-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.player-stats-banner .psb-item {
    text-align: center;
    padding: 8px 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.player-stats-banner .psb-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.player-stats-banner .psb-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .player-stats-box .ps-row {
        gap: 6px;
    }

    .player-stats-box .ps-item {
        font-size: 0.75rem;
    }

    .player-stats-poster .psp-row {
        gap: 4px;
    }

    .player-stats-poster .psp-item {
        font-size: 0.65rem;
    }

    .player-stats-compact .ps-item {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .player-stats-banner .psb-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .player-stats-banner .psb-value {
        font-size: 1.1rem;
    }
}

/* ==================== 难度选择白色风格 ==================== */
.modal.difficulty-theme {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-hover);
}

.modal.difficulty-theme .modal-title {
    color: var(--primary-color);
}

.difficulty-modal-dark {
    color: var(--text-primary);
}

.difficulty-modal-dark .difficulty-header {
    text-align: center;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.05));
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(231, 76, 60, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.difficulty-modal-dark .difficulty-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e74c3c;
}

.difficulty-modal-dark .difficulty-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.difficulty-modal-dark .difficulty-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 8px;
    font-style: italic;
}

.difficulty-modal-dark .curses-container {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.difficulty-modal-dark .curse-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--light-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.difficulty-modal-dark .curse-item:hover {
    background: rgba(231, 76, 60, 0.05);
    border-color: rgba(231, 76, 60, 0.3);
}

.difficulty-modal-dark .curse-item.active {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.08));
    border-color: rgba(231, 76, 60, 0.4);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.1);
}

.difficulty-modal-dark .curse-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.difficulty-modal-dark .curse-info {
    flex: 1;
}

.difficulty-modal-dark .curse-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.difficulty-modal-dark .curse-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.difficulty-modal-dark .curse-skulls {
    display: flex;
    gap: 6px;
    min-width: 108px;
    justify-content: flex-end;
}

.difficulty-modal-dark .skull-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 50%;
    background: var(--light-bg);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    filter: grayscale(100%) brightness(0.8);
}

.difficulty-modal-dark .skull-icon:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.4);
    transform: scale(1.1);
    filter: grayscale(50%) brightness(0.9);
}

.difficulty-modal-dark .skull-icon.active {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
    filter: none;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    animation: skullPulse 1.5s ease-in-out infinite;
}

@keyframes skullPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3); }
    50% { box-shadow: 0 4px 12px rgba(231, 76, 60, 0.5); }
}

.difficulty-modal-dark .curse-points {
    min-width: 40px;
    text-align: right;
}

.difficulty-modal-dark .curse-points .points-active {
    color: #e74c3c;
    font-weight: 700;
    font-size: 0.9rem;
}

.difficulty-modal-dark .difficulty-footer {
    text-align: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ★★★ 祝福页面样式 ★★★ */
.difficulty-modal-dark .difficulty-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.difficulty-modal-dark .difficulty-tab {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--light-bg);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.difficulty-modal-dark .difficulty-tab:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.difficulty-modal-dark .difficulty-tab.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: var(--primary-color);
    color: white;
}

.difficulty-modal-dark .blessing-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--light-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.difficulty-modal-dark .blessing-item:hover {
    background: rgba(46, 204, 113, 0.05);
    border-color: rgba(46, 204, 113, 0.3);
}

.difficulty-modal-dark .blessing-item.active {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.08));
    border-color: rgba(46, 204, 113, 0.4);
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.1);
}

.difficulty-modal-dark .blessing-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.difficulty-modal-dark .blessing-info {
    flex: 1;
}

.difficulty-modal-dark .blessing-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.difficulty-modal-dark .blessing-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.difficulty-modal-dark .blessing-stars {
    display: flex;
    gap: 6px;
    min-width: 108px;
    justify-content: flex-end;
}

.difficulty-modal-dark .star-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 50%;
    background: var(--light-bg);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    filter: grayscale(100%) brightness(0.8);
}

.difficulty-modal-dark .star-icon:hover {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.4);
    transform: scale(1.1);
}

.difficulty-modal-dark .star-icon.active {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border-color: #2ecc71;
    filter: none;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
    animation: starPulse 1.5s ease-in-out infinite;
}

@keyframes starPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3); }
    50% { box-shadow: 0 4px 12px rgba(46, 204, 113, 0.5); }
}

.difficulty-modal-dark .blessing-points {
    min-width: 40px;
    text-align: right;
}

.difficulty-modal-dark .blessing-points .points-active {
    color: #2ecc71;
    font-weight: 700;
    font-size: 0.9rem;
}

.difficulty-modal-dark .blessing-footer {
    color: #2ecc71 !important;
}

.difficulty-modal-dark .negative-difficulty-warning {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(243, 156, 18, 0.3);
    font-size: 0.8rem;
    color: #e67e22;
    line-height: 1.5;
}

.difficulty-modal-dark .blessings-container {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

/* 难度按钮徽章样式 */
.difficulty-btn .difficulty-badge {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
}

/* ==================== 卡牌3D翻转动画 ==================== */
.card-flip-container {
    perspective: 1200px;
    width: 100%;
    max-width: 280px;
}

.card-flip-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.card-flip-inner.flipping {
    animation: cardFlipAnimation 1.2s cubic-bezier(0.4, 0.2, 0.2, 1) forwards;
}

@keyframes cardFlipAnimation {
    0% {
        transform: rotateY(180deg) scale(0.85);
    }
    /* 背面停留展示阶段 */
    25% {
        transform: rotateY(180deg) scale(1);
    }
    /* 开始翻转 - 多转一圈(540度→0度) */
    35% {
        transform: rotateY(120deg) scale(1.02);
    }
    50% {
        transform: rotateY(0deg) scale(1.08);
    }
    65% {
        transform: rotateY(-120deg) scale(1.05);
    }
    80% {
        transform: rotateY(-340deg) scale(1.02);
    }
    90% {
        transform: rotateY(-350deg) scale(1.01);
    }
    100% {
        transform: rotateY(-360deg) scale(1);
    }
}

/* 卡牌背面 - 神秘塔罗风格 */
.card-back {
    width: 100%;
    max-width: 280px;
    min-height: 380px;
    padding: 18px;
    border-radius: 16px;
    position: relative;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: linear-gradient(145deg,
        #1a1a2e 0%,
        #16213e 25%,
        #1a1a2e 50%,
        #0f0f23 75%,
        #1a1a2e 100%);
    border: 3px solid #4a3f6b;
    box-shadow:
        0 0 30px rgba(106, 90, 205, 0.3),
        0 0 60px rgba(75, 0, 130, 0.2),
        inset 0 0 50px rgba(138, 43, 226, 0.1);
    overflow: hidden;
}

/* 背面神秘图案 - 中心符号 */
.card-back::before {
    content: '✧';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: rgba(186, 135, 255, 0.15);
    text-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
    animation: cardBackPulse 3s ease-in-out infinite;
}

/* 背面边框装饰 */
.card-back::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 10px;
    pointer-events: none;
}

/* 背面四角装饰 */
.card-back-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(186, 135, 255, 0.4);
    z-index: 2;
}

.card-back-corner.top-left {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.card-back-corner.top-right {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 8px 0 0;
}

.card-back-corner.bottom-left {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 8px;
}

.card-back-corner.bottom-right {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

/* 背面神秘纹路 */
.card-back-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(75, 0, 130, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(186, 135, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* 背面中心图案容器 */
.card-back-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.card-back-symbol {
    font-size: 4rem;
    color: rgba(186, 135, 255, 0.6);
    text-shadow:
        0 0 20px rgba(138, 43, 226, 0.8),
        0 0 40px rgba(75, 0, 130, 0.5);
    animation: cardBackSymbolFloat 4s ease-in-out infinite;
}

.card-back-text {
    margin-top: 15px;
    font-size: 0.9rem;
    color: rgba(186, 135, 255, 0.5);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 300;
}

/* 背面光效扫过 */
.card-back-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(186, 135, 255, 0.15), transparent);
    animation: cardBackShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardBackPulse {
    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes cardBackSymbolFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes cardBackShine {
    0%, 100% { left: -100%; opacity: 0; }
    50% { left: 150%; opacity: 1; }
}

/* 背面星点装饰 */
.card-back-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.card-back-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: cardBackStarTwinkle 2s ease-in-out infinite;
}

.card-back-star:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.card-back-star:nth-child(2) { top: 25%; left: 80%; animation-delay: 0.3s; }
.card-back-star:nth-child(3) { top: 70%; left: 15%; animation-delay: 0.6s; }
.card-back-star:nth-child(4) { top: 80%; left: 75%; animation-delay: 0.9s; }
.card-back-star:nth-child(5) { top: 40%; left: 10%; animation-delay: 1.2s; }
.card-back-star:nth-child(6) { top: 55%; left: 85%; animation-delay: 1.5s; }

@keyframes cardBackStarTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* 卡牌正面（翻转后显示） */
.card-flip-inner .preview-card {
    backface-visibility: hidden;
}

/* ===== 逆位卡牌背面 - 暗红主题 ===== */
.card-back.reversed-back {
    background: linear-gradient(145deg,
        #1a0808 0%,
        #2a1010 25%,
        #1a0808 50%,
        #150505 75%,
        #1a0808 100%);
    border-color: #8b0000;
    box-shadow:
        0 0 30px rgba(139, 0, 0, 0.4),
        0 0 60px rgba(220, 38, 38, 0.2),
        inset 0 0 50px rgba(139, 0, 0, 0.15);
}

.card-back.reversed-back::before {
    color: rgba(255, 100, 100, 0.15);
    text-shadow: 0 0 30px rgba(220, 38, 38, 0.5);
}

.card-back.reversed-back::after {
    border-color: rgba(220, 38, 38, 0.3);
}

.card-back.reversed-back .card-back-corner {
    border-color: rgba(255, 100, 100, 0.4);
}

.card-back.reversed-back .card-back-symbol {
    color: rgba(255, 100, 100, 0.6);
    text-shadow:
        0 0 20px rgba(220, 38, 38, 0.8),
        0 0 40px rgba(139, 0, 0, 0.5);
}

.card-back.reversed-back .card-back-text {
    color: rgba(255, 100, 100, 0.5);
}

.card-back.reversed-back .card-back-shine {
    background: linear-gradient(90deg, transparent, rgba(255, 100, 100, 0.15), transparent);
}

.card-back.reversed-back .card-back-star {
    background: rgba(255, 150, 150, 0.6);
}

/* ===== 正位卡牌背面 - 蓝色主题 ===== */
.card-back.normal-back {
    background: linear-gradient(145deg,
        #0a1628 0%,
        #102040 25%,
        #0a1628 50%,
        #081020 75%,
        #0a1628 100%);
    border-color: #3b82f6;
    box-shadow:
        0 0 30px rgba(59, 130, 246, 0.3),
        0 0 60px rgba(96, 165, 250, 0.2),
        inset 0 0 50px rgba(59, 130, 246, 0.1);
}

.card-back.normal-back::before {
    color: rgba(150, 200, 255, 0.15);
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.card-back.normal-back::after {
    border-color: rgba(59, 130, 246, 0.3);
}

.card-back.normal-back .card-back-corner {
    border-color: rgba(150, 200, 255, 0.4);
}

.card-back.normal-back .card-back-symbol {
    color: rgba(150, 200, 255, 0.6);
    text-shadow:
        0 0 20px rgba(59, 130, 246, 0.8),
        0 0 40px rgba(37, 99, 235, 0.5);
}

.card-back.normal-back .card-back-text {
    color: rgba(150, 200, 255, 0.5);
}

.card-back.normal-back .card-back-shine {
    background: linear-gradient(90deg, transparent, rgba(150, 200, 255, 0.15), transparent);
}

.card-back.normal-back .card-back-star {
    background: rgba(180, 220, 255, 0.6);
}

/* ===== 金色卡牌背面 - 金色主题 ===== */
.card-back.gold-back {
    background: linear-gradient(145deg,
        #2a2010 0%,
        #3a3020 25%,
        #2a2010 50%,
        #1a1508 75%,
        #2a2010 100%);
    border-color: #d4af37;
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.4),
        0 0 60px rgba(255, 215, 0, 0.2),
        inset 0 0 50px rgba(212, 175, 55, 0.15);
}

.card-back.gold-back::before {
    color: rgba(255, 215, 100, 0.2);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.card-back.gold-back::after {
    border-color: rgba(212, 175, 55, 0.4);
}

.card-back.gold-back .card-back-corner {
    border-color: rgba(255, 215, 100, 0.5);
}

.card-back.gold-back .card-back-symbol {
    color: rgba(255, 215, 100, 0.7);
    text-shadow:
        0 0 20px rgba(212, 175, 55, 0.9),
        0 0 40px rgba(184, 134, 11, 0.6);
}

.card-back.gold-back .card-back-text {
    color: rgba(255, 215, 100, 0.6);
}

.card-back.gold-back .card-back-shine {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 100, 0.2), transparent);
}

.card-back.gold-back .card-back-star {
    background: rgba(255, 230, 150, 0.7);
}

/* ==================== 粒子闪烁效果 ==================== */
.card-particles-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 100;
}

.card-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleBurst 1s ease-out forwards;
}

/* 不同大小的粒子 */
.card-particle.size-small {
    width: 4px;
    height: 4px;
}

.card-particle.size-medium {
    width: 6px;
    height: 6px;
}

.card-particle.size-large {
    width: 8px;
    height: 8px;
}

/* 正位粒子 - 蓝色系 */
.card-particle.normal-particle {
    background: radial-gradient(circle, #60a5fa, #3b82f6);
    box-shadow: 0 0 6px #60a5fa, 0 0 12px rgba(59, 130, 246, 0.5);
}

/* 逆位粒子 - 红色系 */
.card-particle.reversed-particle {
    background: radial-gradient(circle, #f87171, #dc2626);
    box-shadow: 0 0 6px #f87171, 0 0 12px rgba(220, 38, 38, 0.5);
}

/* 金色粒子 */
.card-particle.gold-particle {
    background: radial-gradient(circle, #fcd34d, #d4af37);
    box-shadow: 0 0 6px #fcd34d, 0 0 12px rgba(212, 175, 55, 0.5);
}

/* 星形粒子 */
.card-particle.star-particle {
    background: transparent;
    width: auto !important;
    height: auto !important;
    font-size: 12px;
    text-shadow: 0 0 8px currentColor;
}

.card-particle.star-particle.normal-particle {
    color: #60a5fa;
}

.card-particle.star-particle.reversed-particle {
    color: #f87171;
}

.card-particle.star-particle.gold-particle {
    color: #fcd34d;
}

@keyframes particleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) scale(0);
    }
}

/* 闪光粒子额外动画 */
.card-particle.sparkle {
    animation: particleSparkle 0.8s ease-out forwards;
}

@keyframes particleSparkle {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--tx) * 1.3), calc(var(--ty) * 1.3)) scale(0) rotate(360deg);
    }
}

/* ==================== 论文槽卡牌背面样式（学术神秘风）==================== */

/* 论文卡牌背面基础样式 */
.paper-card-back {
    position: relative;
    min-height: 120px;
    padding: 15px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 深蓝紫学术神秘背景 */
    background: linear-gradient(145deg,
        #0a1628 0%,
        #102040 25%,
        #0a1628 50%,
        #081020 75%,
        #0a1628 100%);
    border: 2px solid #3b82f6;
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.25),
        0 0 40px rgba(96, 165, 250, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(59, 130, 246, 0.08);
}

/* 锁定状态特殊样式 */
.paper-card-back.locked-card {
    background: linear-gradient(145deg,
        #1a1a2e 0%,
        #16213e 25%,
        #1a1a2e 50%,
        #0f0f23 75%,
        #1a1a2e 100%);
    border: 2px solid rgba(100, 116, 139, 0.5);
    box-shadow:
        0 0 15px rgba(100, 116, 139, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 25px rgba(100, 116, 139, 0.05);
    opacity: 0.85;
}

/* 卡牌背面装饰边框 */
.paper-card-back::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 8px;
    pointer-events: none;
}

.paper-card-back.locked-card::before {
    border-color: rgba(100, 116, 139, 0.2);
}

/* 卡牌背面四角装饰 */
.paper-card-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 2;
}

.paper-card-corner.top-left {
    top: 12px;
    left: 12px;
    border-top: 2px solid rgba(96, 165, 250, 0.4);
    border-left: 2px solid rgba(96, 165, 250, 0.4);
    border-radius: 4px 0 0 0;
}

.paper-card-corner.top-right {
    top: 12px;
    right: 12px;
    border-top: 2px solid rgba(96, 165, 250, 0.4);
    border-right: 2px solid rgba(96, 165, 250, 0.4);
    border-radius: 0 4px 0 0;
}

.paper-card-corner.bottom-left {
    bottom: 12px;
    left: 12px;
    border-bottom: 2px solid rgba(96, 165, 250, 0.4);
    border-left: 2px solid rgba(96, 165, 250, 0.4);
    border-radius: 0 0 0 4px;
}

.paper-card-corner.bottom-right {
    bottom: 12px;
    right: 12px;
    border-bottom: 2px solid rgba(96, 165, 250, 0.4);
    border-right: 2px solid rgba(96, 165, 250, 0.4);
    border-radius: 0 0 4px 0;
}

.paper-card-back.locked-card .paper-card-corner {
    border-color: rgba(100, 116, 139, 0.3);
}

/* 中心学术符号 */
.paper-card-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: rgba(96, 165, 250, 0.25);
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    animation: paperSymbolPulse 4s ease-in-out infinite;
    z-index: 1;
}

.paper-card-back.locked-card .paper-card-symbol {
    color: rgba(100, 116, 139, 0.2);
    text-shadow: 0 0 15px rgba(100, 116, 139, 0.3);
    animation: none;
}

@keyframes paperSymbolPulse {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.05); }
}

/* 学术公式装饰 */
.paper-card-formulas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.paper-formula {
    position: absolute;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    color: rgba(96, 165, 250, 0.15);
    font-size: 0.7rem;
    animation: formulaFloat 8s ease-in-out infinite;
}

.paper-formula:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.paper-formula:nth-child(2) { top: 70%; left: 20%; animation-delay: 2s; }
.paper-formula:nth-child(3) { top: 30%; right: 15%; animation-delay: 4s; }
.paper-formula:nth-child(4) { top: 75%; right: 18%; animation-delay: 6s; }

@keyframes formulaFloat {
    0%, 100% { opacity: 0.15; transform: translateY(0); }
    50% { opacity: 0.25; transform: translateY(-5px); }
}

.paper-card-back.locked-card .paper-formula {
    color: rgba(100, 116, 139, 0.1);
    animation: none;
}

/* 光效扫过 */
.paper-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.1), transparent);
    animation: paperCardShine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes paperCardShine {
    0%, 100% { left: -100%; opacity: 0; }
    50% { left: 150%; opacity: 1; }
}

.paper-card-back.locked-card .paper-card-shine {
    display: none;
}

/* 底部文字 */
.paper-card-text {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(150, 200, 255, 0.6);
    letter-spacing: 2px;
    z-index: 2;
}

.paper-card-back.locked-card .paper-card-text {
    color: rgba(148, 163, 184, 0.5);
}

/* 锁定图标 */
.paper-card-lock {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.6);
    z-index: 2;
}

/* 悬停效果 */
.paper-card-back:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 0 30px rgba(59, 130, 246, 0.35),
        0 0 50px rgba(96, 165, 250, 0.2),
        0 12px 25px rgba(0, 0, 0, 0.35),
        inset 0 0 35px rgba(59, 130, 246, 0.12);
}

.paper-card-back.locked-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 20px rgba(100, 116, 139, 0.25),
        0 6px 18px rgba(0, 0, 0, 0.3),
        inset 0 0 28px rgba(100, 116, 139, 0.08);
}

/* 星点装饰 */
.paper-card-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.paper-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(200, 220, 255, 0.6);
    border-radius: 50%;
    animation: paperStarTwinkle 2.5s ease-in-out infinite;
}

.paper-star:nth-child(1) { top: 25%; left: 25%; animation-delay: 0s; }
.paper-star:nth-child(2) { top: 35%; left: 75%; animation-delay: 0.5s; }
.paper-star:nth-child(3) { top: 65%; left: 20%; animation-delay: 1s; }
.paper-star:nth-child(4) { top: 55%; left: 80%; animation-delay: 1.5s; }

@keyframes paperStarTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.3); }
}

.paper-card-back.locked-card .paper-star {
    background: rgba(148, 163, 184, 0.4);
    animation-duration: 4s;
}

/* ==================== 人际关系面板美化 ==================== */

/* 关系槽位基础样式 */
.relationship-slot {
    position: relative;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 已填充的槽位悬停效果 */
.relationship-slot:not(.locked):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 锁定槽位样式 */
.relationship-slot.locked {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.06));
    border: 2px dashed rgba(127, 140, 141, 0.4);
    cursor: not-allowed;
}

.relationship-slot.locked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(127, 140, 141, 0.03) 10px,
        rgba(127, 140, 141, 0.03) 20px
    );
    pointer-events: none;
}

/* 锁定槽位脉冲动画 */
.relationship-slot.locked {
    animation: lockedPulse 3s ease-in-out infinite;
}

@keyframes lockedPulse {
    0%, 100% {
        opacity: 0.6;
        border-color: rgba(127, 140, 141, 0.4);
    }
    50% {
        opacity: 0.75;
        border-color: rgba(127, 140, 141, 0.6);
    }
}

/* 人物头像容器 */
.relationship-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 3px solid var(--border-color);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* 头像呼吸动画 */
.relationship-avatar {
    animation: avatarBreath 4s ease-in-out infinite;
}

@keyframes avatarBreath {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* 头像边框颜色 - 根据关系状态 */
.relationship-avatar.status-good {
    border-color: #27ae60;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.3);
}

.relationship-avatar.status-neutral {
    border-color: #3498db;
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.2);
}

.relationship-avatar.status-low {
    border-color: #e74c3c;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.3);
    animation: avatarWarning 1.5s ease-in-out infinite;
}

@keyframes avatarWarning {
    0%, 100% {
        box-shadow: 0 0 12px rgba(231, 76, 60, 0.3);
    }
    50% {
        box-shadow: 0 0 18px rgba(231, 76, 60, 0.5);
    }
}

/* 头像悬停放大 */
.relationship-avatar:hover {
    transform: scale(1.1);
    animation: none;
}

/* 状态表情指示器 */
.relationship-status-emoji {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.9rem;
    background: var(--card-bg);
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 人物信息区 */
.relationship-info {
    flex: 1;
    min-width: 0;
}

.relationship-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.relationship-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 关系进度条容器 */
.relationship-bars {
    margin-top: 8px;
}

.relationship-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.7rem;
}

.relationship-bar-label {
    width: 50px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.relationship-bar-track {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.relationship-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

/* 关系条流动光泽效果 */
.relationship-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.15) 25%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.15) 75%,
        transparent 100%);
    animation: relationshipFlow 2.5s linear infinite;
    pointer-events: none;
}

/* 关系条顶部光泽 */
.relationship-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    border-radius: 3px 3px 0 0;
    pointer-events: none;
}

@keyframes relationshipFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* 任务进度条 - 金色 */
.relationship-bar-fill.task {
    background: linear-gradient(90deg, #f39c12, #f1c40f);
}

/* 关系进度条 - 粉色 */
.relationship-bar-fill.relation {
    background: linear-gradient(90deg, #e91e63, #f48fb1);
}

/* 进度条满时发光效果 */
.relationship-bar-fill.full {
    animation: barFullGlow 1.5s ease-in-out infinite;
}

@keyframes barFullGlow {
    0%, 100% {
        box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);
    }
}

/* 进度条变化时闪烁 - 增加时绿色 */
.relationship-bar-fill.pulse-increase {
    animation: relationPulseIncrease 0.6s ease-out;
}

/* 进度条变化时闪烁 - 减少时红色 */
.relationship-bar-fill.pulse-decrease {
    animation: relationPulseDecrease 0.6s ease-out;
}

@keyframes relationPulseIncrease {
    0% { filter: brightness(1.1); }
    30% { filter: brightness(2.0) drop-shadow(0 0 6px rgba(34, 197, 94, 0.8)); }
    100% { filter: brightness(1.1); }
}

@keyframes relationPulseDecrease {
    0% { filter: brightness(1.1); }
    30% { filter: brightness(1.7) drop-shadow(0 0 6px rgba(239, 68, 68, 0.8)); }
    100% { filter: brightness(1.1); }
}

/* 数值跳动动画 */
.relationship-bar-value.value-change {
    animation: valueJump 0.5s ease-out;
}

@keyframes valueJump {
    0% { transform: scale(1); color: var(--text-secondary); }
    30% { transform: scale(1.3); color: var(--success-color); }
    100% { transform: scale(1); color: var(--text-secondary); }
}

.relationship-bar-value.value-decrease {
    animation: valueJumpDecrease 0.5s ease-out;
}

@keyframes valueJumpDecrease {
    0% { transform: scale(1); color: var(--text-secondary); }
    30% { transform: scale(1.3); color: var(--danger-color); }
    100% { transform: scale(1); color: var(--text-secondary); }
}

.relationship-bar-value {
    width: 35px;
    text-align: right;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--text-secondary);
    position: relative;
}

/* 关系条飞出数字效果 */
.relation-floating-change {
    position: absolute;
    right: 0;
    top: -10px;
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
    animation: relationFloatUp 1s ease-out forwards;
    z-index: 20;
    white-space: nowrap;
}

.relation-floating-change.positive {
    color: #22c55e;
    text-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.relation-floating-change.negative {
    color: #ef4444;
    text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

@keyframes relationFloatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-15px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-25px) scale(0.8);
    }
}

/* 关系操作按钮 */
.relationship-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.relationship-actions .btn {
    padding: 4px 8px;
    font-size: 0.7rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.relationship-actions .btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* 交流按钮可用时发光 */
.relationship-actions .btn.chat-ready {
    background: linear-gradient(135deg, #e91e63, #f48fb1);
    color: white;
    animation: chatReadyPulse 2s ease-in-out infinite;
}

@keyframes chatReadyPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3);
    }
    50% {
        box-shadow: 0 4px 15px rgba(233, 30, 99, 0.5);
    }
}

/* 新增关系入场动画 */
.relationship-slot.new-entry {
    animation: relationshipEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes relationshipEnter {
    0% {
        opacity: 0;
        transform: translateX(-30px) scale(0.9);
    }
    60% {
        transform: translateX(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 导师特殊样式 */
.relationship-slot.advisor-slot {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(162, 155, 254, 0.05));
    border-left: 3px solid #6c5ce7;
}

.relationship-slot.advisor-slot .relationship-avatar {
    border-color: #6c5ce7;
}

/* 恋人特殊样式 */
.relationship-slot.lover-slot {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.08), rgba(244, 143, 177, 0.05));
    border-left: 3px solid #e91e63;
}

.relationship-slot.lover-slot .relationship-avatar {
    border-color: #e91e63;
    animation: loverAvatarGlow 3s ease-in-out infinite;
}

@keyframes loverAvatarGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(233, 30, 99, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(233, 30, 99, 0.5);
    }
}

/* 师兄师姐样式 */
.relationship-slot.senior-slot {
    border-left: 3px solid #3498db;
}

/* 同级样式 */
.relationship-slot.peer-slot {
    border-left: 3px solid #2ecc71;
}

/* 师弟师妹样式 */
.relationship-slot.junior-slot {
    border-left: 3px solid #f39c12;
}

/* 空槽位占位符 */
.relationship-slot.empty-unlocked {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
    border: 2px dashed rgba(102, 126, 234, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.relationship-slot.empty-unlocked:hover {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.08);
}

.relationship-slot.empty-unlocked .empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

.relationship-slot.empty-unlocked .empty-placeholder .placeholder-icon {
    font-size: 1.5rem;
    opacity: 0.5;
}

.relationship-slot.empty-unlocked .empty-placeholder .placeholder-text {
    font-size: 0.75rem;
}

/* ==================== UI特效样式 ==================== */

/* 按钮涟漪效果 */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* 月份翻页动画 */
.month-flip {
    animation: monthFlipAnim 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes monthFlipAnim {
    0% {
        transform: translateY(-15px) rotateX(-90deg);
        opacity: 0;
    }
    50% {
        transform: translateY(5px) rotateX(10deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) rotateX(0);
        opacity: 1;
    }
}

/* 年份翻页动画 */
.year-flip {
    animation: yearFlipAnim 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes yearFlipAnim {
    0% {
        transform: scale(0.8) translateY(-10px);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) translateY(3px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* B类论文 - 银色光芒粒子 */
.celebration-particle.silver-burst {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #e8e8e8, #c0c0c0, #a8a8a8);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.8), 0 0 16px rgba(192, 192, 192, 0.4);
    animation: silverBurst 1.2s ease-out forwards;
}

@keyframes silverBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    30% {
        transform: translate(var(--tx), var(--ty)) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) scale(0.3);
        opacity: 0;
    }
}

/* C类论文 - 绿色光点粒子 */
.celebration-particle.green-burst {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #55efc4, #00b894);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 184, 148, 0.8), 0 0 12px rgba(85, 239, 196, 0.4);
    animation: greenBurst 1s ease-out forwards;
}

@keyframes greenBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    40% {
        transform: translate(var(--tx), var(--ty)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx) * 1.3), calc(var(--ty) * 1.3)) scale(0.2);
        opacity: 0;
    }
}

/* 成就解锁弹窗 */
.achievement-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #fff8dc 0%, #ffe4a0 50%, #ffd700 100%);
    border: 3px solid #d4af37;
    border-radius: 16px;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.5),
        0 0 60px rgba(212, 175, 55, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    animation: achievementPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes achievementPopIn {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1) rotate(3deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
        opacity: 1;
    }
}

.achievement-popup-exit {
    animation: achievementPopOut 0.5s ease-in forwards;
}

@keyframes achievementPopOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.5) translateY(-30px);
        opacity: 0;
    }
}

.achievement-popup-icon {
    font-size: 2.5rem;
    animation: achievementIconBounce 1s ease-in-out infinite;
}

@keyframes achievementIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.achievement-popup-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.achievement-popup-title {
    font-size: 0.8rem;
    color: #8b6914;
    font-weight: 500;
}

.achievement-popup-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #5a3800;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* 成就光芒粒子 */
.achievement-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    animation: achievementSparkBurst 0.8s ease-out forwards;
}

@keyframes achievementSparkBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    40% {
        transform: translate(var(--tx), var(--ty)) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx) * 1.2), calc(var(--ty) * 1.2)) scale(0);
        opacity: 0;
    }
}

/* 头像发光效果 - 正面 */
.avatar-glow-positive {
    animation: avatarGlowPositive 1s ease-out;
}

@keyframes avatarGlowPositive {
    0% {
        box-shadow: 0 0 0 rgba(46, 204, 113, 0);
    }
    30% {
        box-shadow: 0 0 20px rgba(46, 204, 113, 0.8), 0 0 40px rgba(46, 204, 113, 0.4);
    }
    100% {
        box-shadow: 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* 头像发光效果 - 负面 */
.avatar-glow-negative {
    animation: avatarGlowNegative 1s ease-out;
}

@keyframes avatarGlowNegative {
    0% {
        box-shadow: 0 0 0 rgba(231, 76, 60, 0);
    }
    30% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.8), 0 0 40px rgba(231, 76, 60, 0.4);
    }
    100% {
        box-shadow: 0 0 0 rgba(231, 76, 60, 0);
    }
}

/* 心形粒子 */
.heart-particle {
    position: absolute;
    font-size: 1.2rem;
    pointer-events: none;
    animation: heartFloat 1.5s ease-out forwards;
    z-index: 9999;
}

@keyframes heartFloat {
    0% {
        transform: translateY(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) scale(1.2) rotate(-10deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px) scale(1) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0.6) rotate(-5deg);
        opacity: 0;
    }
}